@datalayer/agent-runtimes 1.0.2 → 1.0.4

package/lib/examples/example-selector.d.ts

@@ -11,7 +11,7 @@ export declare const EXAMPLES: Record<string, () => Promise<{
 export declare function getExampleNames(): string[];
 /**
  * Get the selected example based on environment variable
- * Falls back to 'JupyterNotebookExample' if not specified or invalid
+ * Falls back to 'NotebookExample' if not specified or invalid
  */
 export declare function getSelectedExample(): () => Promise<{
     default: React.ComponentType;

package/lib/examples/example-selector.js

@@ -8,30 +8,43 @@
  * Add new examples here to make them available in the example runner.
  */
 export const EXAMPLES = {
+    //  Lexical2Example: () => import('./Lexical2Example'),
+    A2UiComponentGalleryExample: () => import('./A2UiComponentGalleryExample'),
+    A2UiContactCardExample: () => import('./A2UiContactCardExample'),
     A2UiRestaurantExample: () => import('./A2UiRestaurantExample'),
+    A2UiViewerExample: () => import('./A2UiViewerExample'),
     AgUiAgenticExample: () => import('./AgUiAgenticExample'),
     AgUiBackendToolRenderingExample: () => import('./AgUiBackendToolRenderingExample'),
-    AgUiHaikuGenUIExample: () => import('./AgUiHaikuGenUIExample'),
+    AgUiHaikuGenUiExample: () => import('./AgUiHaikuGenUiExample'),
     AgUiHumanInTheLoopExample: () => import('./AgUiHumanInTheLoopExample'),
     AgUiSharedStateExample: () => import('./AgUiSharedStateExample'),
-    AgUiToolsBasedGenUIExample: () => import('./AgUiToolsBasedGenUIExample'),
-    AgentRuntimeCustomExample: () => import('./AgentRuntimeCustomExample'),
-    AgentRuntimeFormExample: () => import('./AgentRuntimeFormExample'),
-    AgentRuntimeLexicalSidebarExample: () => import('./AgentRuntimeLexicalSidebarExample'),
-    AgentRuntimeNotebookExample: () => import('./AgentRuntimeNotebookExample'),
-    AgentRuntimeNotebookSidebarExample: () => import('./AgentRuntimeNotebookSidebarExample'),
-    AgentRuntimeLexicalExample: () => import('./AgentRuntimeLexicalExample'),
-    //  AgentRuntimeLexical2Example: () =>
-    //    import('./AgentRuntimeLexical2Example'),
-    AgentRuntimeStandaloneExample: () => import('./AgentRuntimeStandaloneExample'),
-    AgentRuntimeChatExample: () => import('./AgentRuntimeChatExample'),
-    CopilotKitNotebookExample: () => import('./CopilotKitNotebookExample'),
+    AgUiToolsBasedGenUiExample: () => import('./AgUiToolsBasedGenUiExample'),
+    AgentspecExample: () => import('./AgentspecExample'),
+    CellSimpleExample: () => import('./CellSimpleExample'),
+    ChatCustomExample: () => import('./ChatCustomExample'),
+    ChatExample: () => import('./ChatExample'),
+    ChatStandaloneExample: () => import('./ChatStandaloneExample'),
     CopilotKitLexicalExample: () => import('./CopilotKitLexicalExample'),
+    CopilotKitNotebookExample: () => import('./CopilotKitNotebookExample'),
     DatalayerNotebookExample: () => import('./DatalayerNotebookExample'),
-    JupyterCellExample: () => import('./JupyterCellExample'),
-    JupyterNotebookExample: () => import('./JupyterNotebookExample'),
-    //  VercelAiElementsExample: () =>
-    //    import('./vercel-ai-elements/VercelAiElementsShowcase'),
+    AgentCheckpointsExample: () => import('./AgentCheckpointsExample'),
+    AgentCodemodeExample: () => import('./AgentCodemodeExample'),
+    AgentEvalsExample: () => import('./AgentEvalsExample'),
+    AgentGuardrailsExample: () => import('./AgentGuardrailsExample'),
+    AgentToolApprovalsExample: () => import('./AgentToolApprovalsExample'),
+    AgentMemoryExample: () => import('./AgentMemoryExample'),
+    AgentSkillsExample: () => import('./AgentSkillsExample'),
+    AgentOtelExample: () => import('./AgentOtelExample'),
+    AgentSandboxExample: () => import('./AgentSandboxExample'),
+    AgentMonitoringExample: () => import('./AgentMonitoringExample'),
+    AgentNotificationsExample: () => import('./AgentNotificationsExample'),
+    AgentOutputsExample: () => import('./AgentOutputsExample'),
+    AgentTriggersExample: () => import('./AgentTriggersExample'),
+    LexicalExample: () => import('./LexicalExample'),
+    LexicalSidebarExample: () => import('./LexicalSidebarExample'),
+    NotebookExample: () => import('./NotebookExample'),
+    NotebookSidebarExample: () => import('./NotebookSidebarExample'),
+    NotebookSimpleExample: () => import('./NotebookSimpleExample'),
 };
 /**
  * Get the list of available example names
@@ -41,14 +54,14 @@ export function getExampleNames() {
 }
 /**
  * Get the selected example based on environment variable
- * Falls back to 'JupyterNotebookExample' if not specified or invalid
+ * Falls back to 'NotebookExample' if not specified or invalid
  */
 export function getSelectedExample() {
     // import.meta.env.EXAMPLE is defined in vite config
-    const exampleName = import.meta.env.EXAMPLE || 'JupyterNotebookExample';
+    const exampleName = import.meta.env.EXAMPLE || 'NotebookExample';
     if (!EXAMPLES[exampleName]) {
         console.warn(`Example "${exampleName}" not found. Available examples:`, getExampleNames());
-        return EXAMPLES['JupyterNotebookExample'];
+        return EXAMPLES['NotebookExample'];
     }
     return EXAMPLES[exampleName];
 }
@@ -57,6 +70,6 @@ export function getSelectedExample() {
  */
 export function getSelectedExampleName() {
     // import.meta.env.EXAMPLE is defined in vite config
-    const exampleName = import.meta.env.EXAMPLE || 'JupyterNotebookExample';
-    return EXAMPLES[exampleName] ? exampleName : 'JupyterNotebookExample';
+    const exampleName = import.meta.env.EXAMPLE || 'NotebookExample';
+    return EXAMPLES[exampleName] ? exampleName : 'NotebookExample';
 }

package/lib/examples/index.d.ts

@@ -1,21 +1,34 @@
+export { default as AgentspecExample } from './AgentspecExample';
+export { default as A2UiComponentGalleryExample } from './A2UiComponentGalleryExample';
+export { default as A2UiContactCardExample } from './A2UiContactCardExample';
 export { default as A2UiRestaurantExample } from './A2UiRestaurantExample';
+export { default as A2UiViewerExample } from './A2UiViewerExample';
 export { default as AgUiAgenticExample } from './AgUiAgenticExample';
 export { default as AgUiBackendToolRenderingExample } from './AgUiBackendToolRenderingExample';
-export { default as AgUiHaikuGenUIExample } from './AgUiHaikuGenUIExample';
+export { default as AgUiHaikuGenUiExample } from './AgUiHaikuGenUiExample';
 export { default as AgUiHumanInTheLoopExample } from './AgUiHumanInTheLoopExample';
 export { default as AgUiSharedStateExample } from './AgUiSharedStateExample';
-export { default as AgUiToolsBasedGenUIExample } from './AgUiToolsBasedGenUIExample';
-export { default as AgentRuntimeCustomExample } from './AgentRuntimeCustomExample';
-export { default as AgentRuntimeLexical2Example } from './AgentRuntimeLexical2Example';
-export { default as AgentRuntimeLexicalExample } from './AgentRuntimeLexicalExample';
-export { default as AgentRuntimeLexicalSidebarExample } from './AgentRuntimeLexicalSidebarExample';
-export { default as AgentRuntimeNotebookExample } from './AgentRuntimeNotebookExample';
-export { default as AgentRuntimeNotebookSidebarExample } from './AgentRuntimeNotebookSidebarExample';
-export { default as AgentRuntimeStandaloneExample } from './AgentRuntimeStandaloneExample';
-export { default as AgentRuntimeFormExample } from './AgentRuntimeFormExample';
+export { default as AgUiToolsBasedGenUiExample } from './AgUiToolsBasedGenUiExample';
+export { default as CellExample } from './CellSimpleExample';
+export { default as ChatStandaloneExample } from './ChatStandaloneExample';
 export { default as CopilotKitLexicalExample } from './CopilotKitLexicalExample';
 export { default as CopilotKitNotebookExample } from './CopilotKitNotebookExample';
+export { default as CustomExample } from './ChatCustomExample';
 export { default as DatalayerNotebookExample } from './DatalayerNotebookExample';
-export { default as JupyterCellExample } from './JupyterCellExample';
-export { default as JupyterNotebookExample } from './JupyterNotebookExample';
-export type { Agent, AgentStatus, AgentsState, Transport, } from './stores/examplesStore';
+export { default as AgentCheckpointsExample } from './AgentCheckpointsExample';
+export { default as AgentCodemodeExample } from './AgentCodemodeExample';
+export { default as AgentEvalsExample } from './AgentEvalsExample';
+export { default as AgentGuardrailsExample } from './AgentGuardrailsExample';
+export { default as AgentToolApprovalsExample } from './AgentToolApprovalsExample';
+export { default as AgentMemoryExample } from './AgentMemoryExample';
+export { default as AgentOtelExample } from './AgentOtelExample';
+export { default as AgentMonitoringExample } from './AgentMonitoringExample';
+export { default as AgentNotificationsExample } from './AgentNotificationsExample';
+export { default as AgentOutputsExample } from './AgentOutputsExample';
+export { default as AgentTriggersExample } from './AgentTriggersExample';
+export { default as Lexical2Example } from './Lexical2Example';
+export { default as LexicalExample } from './LexicalExample';
+export { default as LexicalSidebarExample } from './LexicalSidebarExample';
+export { default as NotebookExample } from './NotebookExample';
+export { default as NotebookSidebarExample } from './NotebookSidebarExample';
+export { default as NotebookSimpleExample } from './NotebookSimpleExample';

package/lib/examples/index.js

@@ -2,23 +2,37 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
+export { default as AgentspecExample } from './AgentspecExample';
+export { default as A2UiComponentGalleryExample } from './A2UiComponentGalleryExample';
+export { default as A2UiContactCardExample } from './A2UiContactCardExample';
 export { default as A2UiRestaurantExample } from './A2UiRestaurantExample';
+export { default as A2UiViewerExample } from './A2UiViewerExample';
 export { default as AgUiAgenticExample } from './AgUiAgenticExample';
 export { default as AgUiBackendToolRenderingExample } from './AgUiBackendToolRenderingExample';
-export { default as AgUiHaikuGenUIExample } from './AgUiHaikuGenUIExample';
+export { default as AgUiHaikuGenUiExample } from './AgUiHaikuGenUiExample';
 export { default as AgUiHumanInTheLoopExample } from './AgUiHumanInTheLoopExample';
 export { default as AgUiSharedStateExample } from './AgUiSharedStateExample';
-export { default as AgUiToolsBasedGenUIExample } from './AgUiToolsBasedGenUIExample';
-export { default as AgentRuntimeCustomExample } from './AgentRuntimeCustomExample';
-export { default as AgentRuntimeLexical2Example } from './AgentRuntimeLexical2Example';
-export { default as AgentRuntimeLexicalExample } from './AgentRuntimeLexicalExample';
-export { default as AgentRuntimeLexicalSidebarExample } from './AgentRuntimeLexicalSidebarExample';
-export { default as AgentRuntimeNotebookExample } from './AgentRuntimeNotebookExample';
-export { default as AgentRuntimeNotebookSidebarExample } from './AgentRuntimeNotebookSidebarExample';
-export { default as AgentRuntimeStandaloneExample } from './AgentRuntimeStandaloneExample';
-export { default as AgentRuntimeFormExample } from './AgentRuntimeFormExample';
+export { default as AgUiToolsBasedGenUiExample } from './AgUiToolsBasedGenUiExample';
+export { default as CellExample } from './CellSimpleExample';
+export { default as ChatStandaloneExample } from './ChatStandaloneExample';
 export { default as CopilotKitLexicalExample } from './CopilotKitLexicalExample';
 export { default as CopilotKitNotebookExample } from './CopilotKitNotebookExample';
+export { default as CustomExample } from './ChatCustomExample';
 export { default as DatalayerNotebookExample } from './DatalayerNotebookExample';
-export { default as JupyterCellExample } from './JupyterCellExample';
-export { default as JupyterNotebookExample } from './JupyterNotebookExample';
+export { default as AgentCheckpointsExample } from './AgentCheckpointsExample';
+export { default as AgentCodemodeExample } from './AgentCodemodeExample';
+export { default as AgentEvalsExample } from './AgentEvalsExample';
+export { default as AgentGuardrailsExample } from './AgentGuardrailsExample';
+export { default as AgentToolApprovalsExample } from './AgentToolApprovalsExample';
+export { default as AgentMemoryExample } from './AgentMemoryExample';
+export { default as AgentOtelExample } from './AgentOtelExample';
+export { default as AgentMonitoringExample } from './AgentMonitoringExample';
+export { default as AgentNotificationsExample } from './AgentNotificationsExample';
+export { default as AgentOutputsExample } from './AgentOutputsExample';
+export { default as AgentTriggersExample } from './AgentTriggersExample';
+export { default as Lexical2Example } from './Lexical2Example';
+export { default as LexicalExample } from './LexicalExample';
+export { default as LexicalSidebarExample } from './LexicalSidebarExample';
+export { default as NotebookExample } from './NotebookExample';
+export { default as NotebookSidebarExample } from './NotebookSidebarExample';
+export { default as NotebookSimpleExample } from './NotebookSimpleExample';

package/lib/examples/main.d.ts

@@ -1,2 +1,9 @@
 import React from 'react';
+import { createRoot } from 'react-dom/client';
+import '../../style/primer-primitives.css';
+declare global {
+    interface Window {
+        __agentRuntimesExamplesRoot?: ReturnType<typeof createRoot>;
+    }
+}
 export declare const ExampleApp: React.FC;

package/lib/examples/main.js

@@ -8,16 +8,16 @@ import { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { loadJupyterConfig, JupyterReactTheme, createServerSettings, setJupyterServerUrl, setJupyterServerToken, getJupyterServerUrl, getJupyterServerToken, } from '@datalayer/jupyter-react';
 import { ServiceManager } from '@jupyterlab/services';
-import { DatalayerThemeProvider, themeConfigs, themeVariants, } from '@datalayer/primer-addons';
-import { SegmentedControl } from '@primer/react';
-import { Box } from '@datalayer/primer-addons';
-import { MoonIcon, SunIcon, DeviceDesktopIcon } from '@primer/octicons-react';
+import { DatalayerThemeProvider, DatalayerLogo, getLogoColors, themeConfigs, Box, } from '@datalayer/primer-addons';
+import { AppearanceControlsWithStore } from '@datalayer/primer-addons/lib/components/appearance';
 import { coreStore, iamStore, createDatalayerServiceManager, } from '@datalayer/core';
-import { useChatStore } from '../components/chat/store';
+import { useChatStore } from '../stores';
 import { OAuthCallback } from '../identity';
 import { EXAMPLES } from './example-selector';
-import { useExampleThemeStore } from './stores/themeStore';
-import nbformatExample from './stores/notebooks/NotebookExample1.ipynb.json';
+import { useExampleThemeStore } from './utils/themeStore';
+import { ExampleWrapper } from './components/ExampleWrapper';
+import nbformatExample from './utils/notebooks/NotebookExample1.ipynb.json';
+import '../../style/primer-primitives.css';
 // Load configurations from DOM
 const loadConfigurations = () => {
     // Load Datalayer configuration
@@ -28,7 +28,7 @@ const loadConfigurations = () => {
             // If token is empty or still has placeholder, use environment variable from .env
             if (!datalayerConfig.token ||
                 datalayerConfig.token.startsWith('%VITE_')) {
-                const envToken = import.meta.env.VITE_DATALAYER_API_TOKEN;
+                const envToken = import.meta.env.VITE_DATALAYER_API_KEY;
                 if (envToken) {
                     datalayerConfig.token = envToken;
                 }
@@ -114,7 +114,7 @@ const getDefaultExampleName = () => {
     if (stored && EXAMPLES[stored]) {
         return stored;
     }
-    return 'DatalayerNotebookExample';
+    return 'NotebookExample';
 };
 // Notebook-only component for iframe display - renders ONLY the notebook without any UI chrome
 const NotebookOnlyApp = () => {
@@ -306,6 +306,7 @@ export const ExampleApp = () => {
 const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleComponent, exampleProps, onExampleChange, }) => {
     const { colorMode, theme: themeVariant } = useExampleThemeStore();
     const cfg = themeConfigs[themeVariant];
+    const logoColors = getLogoColors(themeVariant, colorMode);
     return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: cfg.primerTheme, themeStyles: cfg.themeStyles, children: _jsxs(Box, { sx: {
                 width: '100vw',
                 height: '100vh',
@@ -323,7 +324,7 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                         alignItems: 'center',
                         justifyContent: 'space-between',
                         gap: 3,
-                        height: '50px',
+                        height: '60px',
                         bg: 'canvas.subtle',
                         borderBottom: '1px solid',
                         borderColor: 'border.default',
@@ -345,52 +346,29 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                                         },
                                     }, children: getExampleNames()
                                         .sort()
-                                        .map(name => (_jsx("option", { value: name, children: name }, name))) }), isChangingExample && (_jsx(Box, { as: "span", sx: { color: 'fg.muted', fontSize: 0 }, children: "Loading\u2026" })), error && (_jsxs(Box, { as: "span", sx: { color: 'danger.fg', fontSize: 0 }, children: ["Error: ", error] }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 3 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: themeVariants.map(variant => {
-                                        const tcfg = themeConfigs[variant];
-                                        const isSelected = themeVariant === variant;
-                                        return (_jsx(Box, { as: "button", "aria-label": tcfg.label, "aria-pressed": isSelected, onClick: () => useExampleThemeStore.getState().setTheme(variant, false), sx: {
-                                                width: 24,
-                                                height: 24,
-                                                borderRadius: '50%',
-                                                backgroundColor: tcfg.brandColor,
-                                                border: '2px solid',
-                                                borderColor: isSelected ? 'accent.fg' : 'border.default',
-                                                cursor: 'pointer',
-                                                padding: 0,
-                                                outline: 'none',
-                                                transition: 'border-color 0.15s ease',
-                                                boxShadow: isSelected
-                                                    ? '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))'
-                                                    : 'none',
-                                                '&:hover': { borderColor: 'accent.fg' },
-                                                '&:focus-visible': {
-                                                    boxShadow: '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))',
-                                                },
-                                            } }, variant));
-                                    }) }), _jsxs(SegmentedControl, { "aria-label": "Color mode", size: "small", onChange: (index) => {
-                                        const modes = ['light', 'dark', 'auto'];
-                                        useExampleThemeStore.getState().setColorMode(modes[index]);
-                                    }, children: [_jsx(SegmentedControl.IconButton, { selected: colorMode === 'light', icon: SunIcon, "aria-label": "Light" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'dark', icon: MoonIcon, "aria-label": "Dark" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'auto', icon: DeviceDesktopIcon, "aria-label": "Auto" })] }), _jsx("img", { src: "https://assets.datalayer.tech/datalayer-25.svg", alt: "Datalayer", style: { height: '24px' } })] })] }), _jsx(Box, { sx: {
-                        marginTop: '50px',
-                        height: 'calc(100vh - 50px)',
-                        overflow: 'auto',
-                    }, children: isChangingExample ? (_jsxs(Box, { sx: { p: 5, textAlign: 'center', color: 'fg.muted' }, children: [_jsxs("h3", { children: ["Loading ", selectedExample, "\u2026"] }), _jsx("p", { children: "Please wait while the example loads." })] })) : ExampleComponent ? (_jsx(ExampleComponent, { ...exampleProps })) : null })] }) }));
+                                        .map(name => (_jsx("option", { value: name, children: name }, name))) }), isChangingExample && (_jsx(Box, { as: "span", sx: { color: 'fg.muted', fontSize: 0 }, children: "Loading\u2026" })), error && (_jsxs(Box, { as: "span", sx: { color: 'danger.fg', fontSize: 0 }, children: ["Error: ", error] }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 3 }, children: [_jsx(AppearanceControlsWithStore, { useStore: useExampleThemeStore }), _jsx(DatalayerLogo, { size: 24, primaryColor: logoColors.primary, secondaryColor: logoColors.secondary })] })] }), _jsx(Box, { sx: {
+                        marginTop: '60px',
+                        height: 'calc(100vh - 60px)',
+                        overflow: 'hidden',
+                    }, children: isChangingExample ? (_jsxs(Box, { sx: { p: 5, textAlign: 'center', color: 'fg.muted' }, children: [_jsxs("h3", { children: ["Loading ", selectedExample, "\u2026"] }), _jsx("p", { children: "Please wait while the example loads." })] })) : ExampleComponent ? (_jsx(ExampleWrapper, { children: _jsx(ExampleComponent, { ...exampleProps }) })) : null })] }) }));
 };
 // Mount the app - check route to determine which app to render
 const root = document.getElementById('root');
 if (root) {
+    const appRoot = window.__agentRuntimesExamplesRoot ??
+        (window.__agentRuntimesExamplesRoot = createRoot(root));
     if (isOAuthCallback()) {
         // Handle OAuth callback - render OAuthCallback component
         console.log('Rendering OAuthCallback (popup flow)');
-        createRoot(root).render(_jsx(JupyterReactTheme, { children: _jsx(OAuthCallback, { autoClose: true, autoCloseDelay: 1000 }) }));
+        appRoot.render(_jsx(JupyterReactTheme, { children: _jsx(OAuthCallback, { autoClose: true, autoCloseDelay: 1000 }) }));
     }
     else if (isNotebookOnlyRoute()) {
         console.log('Rendering NotebookOnlyApp');
-        createRoot(root).render(_jsx(NotebookOnlyApp, {}));
+        appRoot.render(_jsx(NotebookOnlyApp, {}));
     }
     else {
         console.log('Rendering ExampleApp');
-        createRoot(root).render(_jsx(ExampleApp, {}));
+        appRoot.render(_jsx(ExampleApp, {}));
     }
 }
 else {

package/lib/examples/utils/examplesStore.d.ts

@@ -0,0 +1,4 @@
+import type { ExampleAgentsState } from '../../types';
+export declare const agentsStore: any;
+export declare function useAgentsStore(): ExampleAgentsState;
+export declare function useAgentsStore<T>(selector: (state: ExampleAgentsState) => T): T;

package/lib/examples/{stores → utils}/examplesStore.js

@@ -18,7 +18,7 @@ const transformAgentData = (data, notebookSuffix, lexicalSuffix) => ({
     lastEdited: data.editTimestamp,
     screenshot: data.image,
     status: data.status,
-    transport: data.transport,
+    protocol: data.transport,
     avatarUrl: data.avatarUrl,
     notebookFile: `${notebookSuffix}.ipynb.json`,
     lexicalFile: `${lexicalSuffix}.lexical.json`,

package/lib/examples/utils/notebooks/Empty.ipynb.json

@@ -0,0 +1,33 @@
+{
+  "cells": [
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "id": "309d9aeb-4a19-400b-b5fe-ed20091b357b",
+      "metadata": {},
+      "outputs": [],
+      "source": []
+    }
+  ],
+  "metadata": {
+    "kernelspec": {
+      "display_name": "Python 3 (ipykernel)",
+      "language": "python",
+      "name": "python3"
+    },
+    "language_info": {
+      "codemirror_mode": {
+        "name": "ipython",
+        "version": 3
+      },
+      "file_extension": ".py",
+      "mimetype": "text/x-python",
+      "name": "python",
+      "nbconvert_exporter": "python",
+      "pygments_lexer": "ipython3",
+      "version": "3.11.4"
+    }
+  },
+  "nbformat": 4,
+  "nbformat_minor": 5
+}

package/lib/examples/utils/notebooks/NotebookExample2.ipynb.json

@@ -0,0 +1,48 @@
+{
+  "cells": [
+    {
+      "cell_type": "code",
+      "execution_count": 1,
+      "metadata": {},
+      "outputs": [
+        {
+          "data": {
+            "text/plain": ["4"]
+          },
+          "execution_count": 1,
+          "metadata": {},
+          "output_type": "execute_result"
+        }
+      ],
+      "source": ["2+2"]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": []
+    }
+  ],
+  "metadata": {
+    "kernelspec": {
+      "display_name": "Python (ipykernel)",
+      "language": "python",
+      "name": "python"
+    },
+    "language_info": {
+      "codemirror_mode": {
+        "name": "ipython",
+        "version": 3
+      },
+      "file_extension": ".py",
+      "mimetype": "text/x-python",
+      "name": "python",
+      "nbconvert_exporter": "python",
+      "pygments_lexer": "ipython3",
+      "version": "3.10.4"
+    }
+  },
+  "nbformat": 4,
+  "nbformat_minor": 4
+}

package/lib/examples/utils/themeStore.d.ts

@@ -0,0 +1,8 @@
+import { createThemeStore, type ThemeVariant, type ColorMode, type ThemeState } from '@datalayer/primer-addons';
+export type { ThemeVariant, ColorMode, ThemeState };
+/**
+ * Zustand store for theme preferences in the examples app.
+ * Persisted to localStorage under 'agent-runtimes-theme' key.
+ * Delegates to the shared `createThemeStore` factory from primer-addons.
+ */
+export declare const useExampleThemeStore: ReturnType<typeof createThemeStore>;

package/lib/examples/utils/themeStore.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { createThemeStore, } from '@datalayer/primer-addons';
+/**
+ * Zustand store for theme preferences in the examples app.
+ * Persisted to localStorage under 'agent-runtimes-theme' key.
+ * Delegates to the shared `createThemeStore` factory from primer-addons.
+ */
+export const useExampleThemeStore = createThemeStore('agent-runtimes-theme', {
+    colorMode: 'light',
+    theme: 'datalayer',
+});

package/lib/extensions/A2UIExtension.d.ts

@@ -0,0 +1,65 @@
+/**
+ * A2UI extension for chat component.
+ * Renders A2UI protocol messages from A2A agents using @a2ui/react v0.8.
+ *
+ * @module components/extensions/A2UIExtension
+ */
+import React from 'react';
+import type { ComponentInstance } from '@a2ui/react';
+import type { ChatMessage } from '../types/messages';
+import type { ActivityRendererExtension, A2UIExtension as A2UIExtensionNamespace } from '../types/extensions';
+interface ValueMap {
+    key: string;
+    valueString?: string;
+    valueNumber?: number;
+    valueBoolean?: boolean;
+    valueMap?: ValueMap[];
+}
+/**
+ * A2UI v0.8 message shape (latest only).
+ */
+export interface A2UIMessage {
+    beginRendering?: {
+        surfaceId: string;
+        root: string;
+        mimeType?: string;
+    };
+    surfaceUpdate?: {
+        surfaceId: string;
+        components: ComponentInstance[];
+    };
+    dataModelUpdate?: {
+        surfaceId: string;
+        path?: string;
+        contents: ValueMap[];
+    };
+    finishRendering?: {
+        surfaceId: string;
+    };
+}
+/**
+ * Create A2UI activity renderer.
+ */
+export declare function createA2UIRenderer(_customRenderers?: Record<string, React.ComponentType<{
+    content: unknown;
+}>>): ActivityRendererExtension;
+/**
+ * A2UI Extension implementation class.
+ */
+export declare class A2UIExtensionImpl implements ActivityRendererExtension {
+    readonly name = "a2ui";
+    readonly type: "activity-renderer";
+    readonly activityTypes: string[];
+    readonly priority = 10;
+    private contexts;
+    getSurfaces(sessionId: string): Map<string, unknown>;
+    getDataModels(sessionId: string): Map<string, unknown>;
+    processMessage(sessionId: string, message: A2UIMessage): void;
+    clearSession(sessionId: string): void;
+    render: ({ activityType: _activityType, data, message: _message, }: {
+        activityType: string;
+        data: unknown;
+        message: ChatMessage;
+    }) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+}
+export type { A2UIExtensionNamespace };