@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/examples/NotebookAgentSidebarExample.js

@@ -0,0 +1,221 @@
+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.
+ */
+/**
+ * Agent Runtime Notebook Example - Next generation chat with Jupyter Notebook.
+ *
+ * This example demonstrates using the chat component with:
+ * - Jupyter Notebook integration
+ * - Frontend tool execution for notebook operations
+ * - AG-UI protocol support
+ * - HITL (Human-in-the-loop) tool approval
+ *
+ * To run this example:
+ * 1. Start the agent-runtimes server: `npm run start:ag-ui`
+ * 2. Create a .env file with VITE_BASE_URL if not using defaults
+ *
+ * @module examples/NotebookAgentSidebarExample
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { Box } from '@datalayer/primer-addons';
+import { Notebook, useJupyter } from '@datalayer/jupyter-react';
+import { useNotebookTools } from '../tools/adapters/agent-runtimes/notebookHooks';
+import { ThemedJupyterProvider } from './utils/themedProvider';
+import { ChatSidebar } from '../chat';
+import { DEFAULT_MODEL } from '../specs';
+import MatplotlibNotebook from './utils/notebooks/Matplotlib.ipynb.json';
+// Fixed notebook ID
+const NOTEBOOK_ID = 'chat-notebook-example';
+// Use the imported Matplotlib notebook
+const NOTEBOOK_CONTENT = MatplotlibNotebook;
+// Default configuration
+const DEFAULT_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+const DEFAULT_AGENT_ID = import.meta.env.VITE_AGENT_ID || 'notebook-sidebar-agent-runtime-example';
+const VERCEL_AI_ENDPOINT = `${DEFAULT_BASE_URL}/api/v1/vercel-ai/${DEFAULT_AGENT_ID}`;
+function getJupyterSandboxUrl(serviceManager) {
+    const envUrl = import.meta.env.VITE_JUPYTER_SANDBOX_URL;
+    if (envUrl) {
+        return envUrl;
+    }
+    const baseUrl = serviceManager?.serverSettings?.baseUrl?.replace(/\/$/, '');
+    if (!baseUrl) {
+        return undefined;
+    }
+    if (baseUrl.includes('token=')) {
+        return baseUrl;
+    }
+    const token = serviceManager?.serverSettings?.token;
+    if (!token) {
+        return baseUrl;
+    }
+    const separator = baseUrl.includes('?') ? '&' : '?';
+    return `${baseUrl}${separator}token=${encodeURIComponent(token)}`;
+}
+function useEnsureAgent(agentId, baseUrl, jupyterSandboxUrl) {
+    const [isReady, setIsReady] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let mounted = true;
+        async function ensureAgent() {
+            try {
+                if (!jupyterSandboxUrl) {
+                    if (mounted) {
+                        setError('Could not detect Jupyter server URL from Notebook service manager.');
+                        setIsReady(false);
+                    }
+                    return;
+                }
+                const response = await fetch(`${baseUrl}/api/v1/agents`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        name: agentId,
+                        description: 'Demo agent for notebook sidebar example',
+                        agent_library: 'pydantic-ai',
+                        transport: 'vercel-ai',
+                        model: DEFAULT_MODEL,
+                        system_prompt: 'You are a helpful AI assistant that helps users work with Jupyter notebooks. For notebook operations, always use the notebook frontend tools (runCell, readAllCells, readCell, insertCell, updateCell, deleteCells) so actions happen in the live notebook UI. Use executeCode only for temporary inspection code that should not modify notebook cells.',
+                        enable_codemode: false,
+                        sandbox_variant: 'jupyter',
+                        jupyter_sandbox: jupyterSandboxUrl,
+                    }),
+                });
+                if (mounted) {
+                    if (response.ok) {
+                        console.warn(`[NotebookAgentSidebarExample] Created agent: ${agentId}`);
+                        setError(null);
+                        setIsReady(true);
+                    }
+                    else if (response.status === 409 || response.status === 400) {
+                        console.warn(`[NotebookAgentSidebarExample] Reusing existing agent: ${agentId}`);
+                        setError(null);
+                        setIsReady(true);
+                    }
+                    else {
+                        const errorData = await response.json().catch(() => ({}));
+                        setError(errorData.detail || `Failed to create agent: ${response.status}`);
+                        setIsReady(false);
+                    }
+                }
+            }
+            catch (err) {
+                if (mounted) {
+                    console.error('[NotebookAgentSidebarExample] Error creating agent:', err);
+                    setError(err instanceof Error ? err.message : 'Failed to connect to server');
+                    setIsReady(false);
+                }
+            }
+        }
+        void ensureAgent();
+        return () => {
+            mounted = false;
+        };
+    }, [agentId, baseUrl, jupyterSandboxUrl]);
+    return { isReady, error };
+}
+function NotebookUI({ serviceManager }) {
+    if (!serviceManager) {
+        return (_jsx(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100%',
+                color: 'fg.muted',
+            }, children: "Loading Simple services..." }));
+    }
+    return (_jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "100%", cellSidebarMargin: 120, startDefaultKernel: true }));
+}
+export function AgentRuntimeNotebookExampleInner({ serviceManager, }) {
+    const jupyterSandboxUrl = useMemo(() => getJupyterSandboxUrl(serviceManager), [serviceManager]);
+    const { isReady, error } = useEnsureAgent(DEFAULT_AGENT_ID, DEFAULT_BASE_URL, jupyterSandboxUrl);
+    // Get notebook tools for ChatSidebar
+    const tools = useNotebookTools(NOTEBOOK_ID);
+    // Build Vercel AI protocol config
+    const protocolConfig = useMemo(() => {
+        return {
+            type: 'vercel-ai',
+            endpoint: VERCEL_AI_ENDPOINT,
+            agentId: DEFAULT_AGENT_ID,
+            enableConfigQuery: true,
+            configEndpoint: `${DEFAULT_BASE_URL}/api/v1/configure`,
+        };
+    }, []);
+    return (_jsx(_Fragment, { children: _jsxs(Box, { sx: {
+                height: 'calc(100vh - 70px)',
+                width: '100vw',
+                display: 'flex',
+                overflow: 'hidden',
+            }, children: [_jsxs(Box, { sx: {
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        overflow: 'hidden',
+                    }, children: [_jsxs(Box, { sx: {
+                                p: 3,
+                                borderBottom: '1px solid',
+                                borderColor: 'border.default',
+                                bg: 'canvas.subtle',
+                            }, children: [_jsx("h1", { style: { margin: 0, fontSize: '1.5rem' }, children: "Agent Runtime Notebook Sidebar Example" }), _jsx("p", { style: { margin: '8px 0 0', color: 'var(--fgColor-muted)' }, children: "Next generation chat with Jupyter Notebook integration" })] }), _jsx(Box, { sx: {
+                                flex: 1,
+                                display: 'flex',
+                                overflow: 'hidden',
+                                bg: 'canvas.default',
+                                p: 3,
+                            }, children: _jsx(Box, { sx: {
+                                    flex: 1,
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                    borderRadius: 2,
+                                    overflow: 'hidden',
+                                }, children: _jsx(NotebookUI, { serviceManager: serviceManager }) }) })] }), isReady && (_jsx(ChatSidebar, { title: "AI Assistant", protocol: protocolConfig, position: "right", width: 400, showNewChatButton: true, showClearButton: true, showSettingsButton: true, defaultOpen: true, panelProps: {
+                        protocol: protocolConfig,
+                        frontendTools: tools,
+                        useStore: false,
+                        showModelSelector: true,
+                        showToolsMenu: true,
+                        showSkillsMenu: true,
+                        suggestions: [
+                            {
+                                title: '📓 Explain notebook',
+                                message: 'Can you explain what this notebook does?',
+                            },
+                            {
+                                title: '🔧 Fix errors',
+                                message: 'Can you help me fix any errors in the notebook?',
+                            },
+                            {
+                                title: '📊 Add visualization',
+                                message: 'Can you add a visualization to the notebook?',
+                            },
+                            {
+                                title: '✨ Improve code',
+                                message: 'Can you suggest improvements for the code?',
+                            },
+                        ],
+                    } })), error && (_jsxs(Box, { sx: {
+                        position: 'fixed',
+                        bottom: 20,
+                        right: 20,
+                        padding: 3,
+                        backgroundColor: 'danger.subtle',
+                        color: 'danger.fg',
+                        borderRadius: 2,
+                        maxWidth: 320,
+                        zIndex: 999,
+                    }, children: [_jsx("strong", { children: "Error:" }), " ", error] }))] }) }));
+}
+/**
+ * Main example component with Simple wrapper
+ */
+export function AgentRuntimeNotebookAgentSidebarExample() {
+    return (_jsx(ThemedJupyterProvider, { children: _jsx(SimpleWrapper, {}) }));
+}
+function SimpleWrapper() {
+    const { serviceManager } = useJupyter();
+    return _jsx(AgentRuntimeNotebookExampleInner, { serviceManager: serviceManager });
+}
+export default AgentRuntimeNotebookAgentSidebarExample;

package/lib/examples/{DatalayerNotebookExample.d.ts → NotebookCollaborationExample.d.ts}

@@ -3,14 +3,14 @@ import { ServiceManager } from '@jupyterlab/services';
  * Example demonstrating how to use Datalayer services with Notebook
  *
  * This example shows:
- * 1. How to create and use DatalayerServiceManager for kernel management
+ * 1. How to create and use DatalayerServiceManager for runtime management
  * 2. How to create and use DatalayerCollaborationProvider for real-time collaboration
  * 3. How to enable/disable Datalayer collaboration
  * 4. How to pass these to the base Notebook component
  * 5. Graceful fallback when Datalayer credentials are not available
  */
-type IDatalayerNotebookExampleProps = {
+type INotebookCollaborationExampleProps = {
     serviceManager?: ServiceManager.IManager;
 };
-declare const DatalayerNotebookExample: (props: IDatalayerNotebookExampleProps) => import("react/jsx-runtime").JSX.Element;
-export default DatalayerNotebookExample;
+declare const NotebookCollaborationExample: (props: INotebookCollaborationExampleProps) => import("react/jsx-runtime").JSX.Element;
+export default NotebookCollaborationExample;

package/lib/examples/{DatalayerNotebookExample.js → NotebookCollaborationExample.js}

@@ -12,7 +12,7 @@ import { ThemedJupyterProvider } from './utils/themedProvider';
 import nbformatExample from './utils/notebooks/NotebookExample1.ipynb.json';
 // This corresponds to the notebook ID in the URL when you open an existing notbook in your library
 const NOTEBOOK_ID = '01JZQRQ35GG871QQCZW9TB1A8J';
-const DatalayerNotebookExample = (props) => {
+const NotebookCollaborationExample = (props) => {
     // Load config on component mount
     loadJupyterConfig();
     const [nbformat] = useState(nbformatExample);
@@ -65,7 +65,7 @@ const DatalayerNotebookExample = (props) => {
             token,
         });
     }, [enableCollaboration, configuration]);
-    return (_jsx(ThemedJupyterProvider, { children: _jsxs(Box, { p: 3, children: [_jsx(Heading, { as: "h2", sx: { mb: 3 }, children: "Datalayer Notebook Collaboration Example" }), _jsx(Box, { sx: { mb: 3 }, children: _jsxs(FormControl, { children: [_jsx(Checkbox, { checked: enableCollaboration, onChange: e => setEnableCollaboration(e.target.checked) }), _jsx(FormControl.Label, { children: "Enable Datalayer Collaboration" })] }) }), (!configuration?.runUrl || !configuration?.token) && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'danger.subtle' }, children: "Warning: Datalayer configuration is missing. Please configure runUrl and token to use DatalayerServiceManager and collaboration features." })), !serviceManager && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'attention.subtle' }, children: "Note: DatalayerServiceManager is not available. Notebook functionality will be limited." })), enableCollaboration ? (_jsxs(Box, { sx: {
+    return (_jsx(ThemedJupyterProvider, { children: _jsxs(Box, { p: 3, children: [_jsx(Heading, { as: "h2", sx: { mb: 3 }, children: "Notebook Collaboration Example" }), _jsx(Box, { sx: { mb: 3 }, children: _jsxs(FormControl, { children: [_jsx(Checkbox, { checked: enableCollaboration, onChange: e => setEnableCollaboration(e.target.checked) }), _jsx(FormControl.Label, { children: "Enable Datalayer Collaboration" })] }) }), (!configuration?.runUrl || !configuration?.token) && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'danger.subtle' }, children: "Warning: Datalayer configuration is missing. Please configure runUrl and token to use DatalayerServiceManager and collaboration features." })), !serviceManager && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'attention.subtle' }, children: "Note: DatalayerServiceManager is not available. Notebook functionality will be limited." })), enableCollaboration ? (_jsxs(Box, { sx: {
                         display: 'flex',
                         gap: 2,
                         flexDirection: 'row',
@@ -97,4 +97,4 @@ const DatalayerNotebookExample = (props) => {
                         borderRadius: 2,
                     }, children: serviceManager ? (_jsx(Notebook, { id: NOTEBOOK_ID, height: "calc(100vh - 200px)", nbformat: nbformat, readonly: readonly, serviceManager: serviceManager, startDefaultKernel: true, collaborationProvider: collaborationProvider })) : (_jsx(Box, { sx: { p: 4, textAlign: 'center' }, children: "Loading ServiceManager..." })) })), _jsxs(Box, { sx: { mt: 2, fontSize: 1, color: 'fg.subtle' }, children: [_jsx("p", { children: "This example demonstrates how to use Datalayer services with Notebook:" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "DatalayerServiceManager:" }), " Connects to Datalayer infrastructure for kernel management"] }), _jsxs("li", { children: [_jsx("strong", { children: "DatalayerCollaborationProvider:" }), " Enables real-time collaboration"] }), _jsx("li", { children: "Both require Datalayer credentials (runUrl and token)" }), _jsx("li", { children: "Pass them directly to the base Notebook component" }), _jsx("li", { children: "No wrapper components needed - just create the services and pass them as props" }), _jsx("li", { children: "This shows the explicit, composable pattern for Datalayer integration" })] })] })] }) }));
 };
-export default DatalayerNotebookExample;
+export default NotebookCollaborationExample;

package/lib/examples/NotebookExample.d.ts

@@ -1,9 +1,6 @@
 import { ServiceManager } from '@jupyterlab/services';
-/**
- * Main Agent Runtime notebook example component
- */
-interface AgentRuntimeNotebookExampleProps {
+type IJupyterNotebookExampleProps = {
     serviceManager?: ServiceManager.IManager;
-}
-declare function AgentRuntimeNotebookExample({ serviceManager, }: AgentRuntimeNotebookExampleProps): JSX.Element;
-export default AgentRuntimeNotebookExample;
+};
+export declare const JupyterNotebookExample: (props: IJupyterNotebookExampleProps) => import("react/jsx-runtime").JSX.Element;
+export default JupyterNotebookExample;

package/lib/examples/NotebookExample.js

@@ -1,154 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /*
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/**
- * Agent Runtime Notebook Example with Agent-Runtimes Integration
- *
- * This example demonstrates using the agent-runtimes ChatFloating component
- * with notebook tools for AI-assisted notebook editing.
- *
- * To run this example:
- * 1. Start the agent-runtimes server: `npm run start:server`
- * 2. Start the frontend: `npm run dev`
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
  *
- * @module examples/NotebookExample
+ * MIT License
  */
-import React, { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { Notebook } from '@datalayer/jupyter-react';
+import { Notebook, NotebookToolbar, CellSidebarExtension, CellSidebarButton, } from '@datalayer/jupyter-react';
 import { ThemedJupyterProvider } from './utils/themedProvider';
-// Agent-runtimes imports
-import { ChatFloating } from '../chat';
-import { useNotebookTools } from '../tools/adapters/agent-runtimes/notebookHooks';
-// Import Matplotlib notebook
-import MatplotlibNotebook from './utils/notebooks/Matplotlib.ipynb.json';
-import { DEFAULT_MODEL } from '../specs';
-// Fixed notebook ID
-const NOTEBOOK_ID = 'agui-notebook-example';
-// Use the imported Matplotlib notebook
-const NOTEBOOK_CONTENT = MatplotlibNotebook;
-// Base URL for agent-runtimes server
-const BASE_URL = 'http://localhost:8765';
-const AGENT_ID = 'notebook-agent-runtime-example';
-// Vercel AI endpoint
-const VERCEL_AI_ENDPOINT = `${BASE_URL}/api/v1/vercel-ai/${AGENT_ID}`;
-/**
- * Hook to ensure the demo-agent exists on the server.
- * Creates it if it doesn't exist.
- */
-function useEnsureAgent(agentId, baseUrl) {
-    const [isReady, setIsReady] = useState(false);
-    const [error, setError] = useState(null);
-    useEffect(() => {
-        let mounted = true;
-        async function ensureAgent() {
-            try {
-                // Try to create the agent (will fail if already exists, which is fine)
-                const response = await fetch(`${baseUrl}/api/v1/agents`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        name: agentId,
-                        description: 'Demo agent for notebook example',
-                        agent_library: 'pydantic-ai',
-                        transport: 'vercel-ai',
-                        model: DEFAULT_MODEL,
-                        system_prompt: 'You are a helpful AI assistant that helps users work with Jupyter notebooks. You can help with code, explanations, and data analysis.',
-                    }),
-                });
-                if (mounted) {
-                    if (response.ok) {
-                        console.log(`[AgentRuntimeExample] Created agent: ${agentId}`);
-                        setIsReady(true);
-                    }
-                    else if (response.status === 400) {
-                        // Agent already exists, which is fine
-                        console.log(`[AgentRuntimeExample] Agent already exists: ${agentId}`);
-                        setIsReady(true);
-                    }
-                    else {
-                        const errorData = await response.json().catch(() => ({}));
-                        setError(errorData.detail || `Failed to create agent: ${response.status}`);
-                    }
-                }
-            }
-            catch (err) {
-                if (mounted) {
-                    console.error('[AgentRuntimeExample] Error creating agent:', err);
-                    setError(err instanceof Error ? err.message : 'Failed to connect to server');
-                }
-            }
-        }
-        ensureAgent();
-        return () => {
-            mounted = false;
-        };
-    }, [agentId, baseUrl]);
-    return { isReady, error };
-}
-const NotebookUI = React.memo(function NotebookUI({ serviceManager, }) {
-    return (_jsxs(Box, { sx: {
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            overflow: 'auto',
-            padding: 3,
-        }, children: [_jsxs(Box, { sx: {
-                    marginBottom: 3,
-                    paddingBottom: 3,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                }, children: [_jsx(Box, { as: "h1", sx: { margin: 0 }, children: "Agent Runtime Notebook Example" }), _jsx("p", { children: "Platform-agnostic tool usage with agent-runtimes integration. Use the AI copilot to manipulate the notebook." })] }), _jsx(Box, { sx: {
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    padding: 3,
-                    backgroundColor: 'canvas.default',
-                }, children: serviceManager ? (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "calc(100vh - 300px)", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { sx: { padding: 3 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
-});
-function NotebookWithChat({ serviceManager, }) {
-    // Ensure the agent exists before rendering chat
-    const { isReady, error } = useEnsureAgent(AGENT_ID, BASE_URL);
-    // Get notebook tools for ChatFloating
-    const frontendTools = useNotebookTools(NOTEBOOK_ID);
-    return (_jsxs(Box, { sx: {
-            height: '100vh',
-            width: '100vw',
-            display: 'flex',
-            overflow: 'hidden',
-        }, children: [_jsx(NotebookUI, { serviceManager: serviceManager }), error && (_jsxs(Box, { sx: {
-                    position: 'fixed',
-                    bottom: 20,
-                    right: 20,
-                    padding: 3,
-                    backgroundColor: 'danger.subtle',
-                    color: 'danger.fg',
-                    borderRadius: 2,
-                    maxWidth: 300,
-                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { protocol: "vercel-ai", endpoint: VERCEL_AI_ENDPOINT, title: "Notebook AI Agent Runtime", description: "Hi! I can help you edit notebook cells. Try: 'Add a new code cell', 'Run cell 1', or 'Delete the last cell'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", frontendTools: frontendTools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
-                    {
-                        title: 'Add a cell',
-                        message: 'Insert a random cell to the notebook',
-                    },
-                    {
-                        title: 'Run the first cell',
-                        message: 'Run the first cell in the notebook',
-                    },
-                    {
-                        title: 'Show cells',
-                        message: 'Show the notebook cells content and compute the number of cells',
-                    },
-                    {
-                        title: 'Analyze Titanic',
-                        message: 'Analyze the Titanic dataset and provide insights about the passengers and survival rates',
-                    },
-                ] }))] }));
-}
-function AgentRuntimeNotebookExample({ serviceManager, }) {
-    return _jsx(NotebookWithChat, { serviceManager: serviceManager });
-}
-export default AgentRuntimeNotebookExample;
+import nbformatExample from './utils/notebooks/NotebookExample1.ipynb.json';
+const NOTEBOOK_ID = 'notebook-example-1';
+export const JupyterNotebookExample = (props) => {
+    const { serviceManager } = props;
+    const extensions = useMemo(() => [new CellSidebarExtension({ factory: CellSidebarButton })], []);
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { as: "h1", children: "Jupyter Notebook Example" }), serviceManager && (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { id: NOTEBOOK_ID, nbformat: nbformatExample, serviceManager: serviceManager, startDefaultKernel: true, extensions: extensions, Toolbar: NotebookToolbar }) }))] }));
+};
+export default JupyterNotebookExample;

package/lib/examples/components/AuthRequiredView.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Full-page auth gate content for examples that require a token.
+ */
+export declare const AuthRequiredView: React.FC;
+export default AuthRequiredView;

package/lib/examples/components/AuthRequiredView.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useCallback } from 'react';
+import { Box } from '@datalayer/primer-addons';
+import { HomeIcon } from '@primer/octicons-react';
+import { SignInSimple } from '@datalayer/core/lib/views/iam';
+import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
+/**
+ * Full-page auth gate content for examples that require a token.
+ */
+export const AuthRequiredView = () => {
+    const setAuth = useSimpleAuthStore(s => s.setAuth);
+    const syncTokenToIamStore = useCallback((token) => {
+        import('@datalayer/core/lib/state').then(({ iamStore }) => {
+            iamStore.setState({ token });
+        });
+    }, []);
+    const handleSignIn = useCallback((newToken, handle) => {
+        setAuth(newToken, handle);
+        syncTokenToIamStore(newToken);
+    }, [setAuth, syncTokenToIamStore]);
+    return (_jsx(Box, { sx: {
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            p: 3,
+        }, children: _jsx(Box, { sx: { width: '100%', maxWidth: 640 }, children: _jsx(SignInSimple, { onSignIn: handleSignIn, onApiKeySignIn: apiKey => handleSignIn(apiKey, 'api-key-user'), title: "Agent Runtimes Examples", description: "Sign in to run authenticated examples and tools.", leadingIcon: _jsx(HomeIcon, { size: 24 }) }) }) }));
+};
+export default AuthRequiredView;

package/lib/examples/components/ExampleWrapper.d.ts

@@ -2,9 +2,15 @@ import React from 'react';
 /**
  * ExampleWrapper
  *
- * Wraps every example in a fixed-height container that accounts for
- * the 60 px header bar. Examples inside can use `100vh` or `100%`
- * freely — the wrapper clips and scrolls as needed.
+ * Provides every example with a definite-height, scroll-clipped container
+ * that fills the parent content area exactly. Examples mounted inside
+ * should treat this as their viewport: use `height: '100%'` on their
+ * root, then own their internal flex/grid layout (and place any internal
+ * scrollers on dedicated panels with `minHeight: 0` + `overflow: 'auto'`).
+ *
+ * Also clears the shared chat + conversation stores synchronously as the
+ * new example mounts, so switching examples never leaks messages from the
+ * previously-mounted chat.
  */
 export declare const ExampleWrapper: React.FC<{
     children: React.ReactNode;

package/lib/examples/components/ExampleWrapper.js

@@ -1,16 +1,52 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useLayoutEffect } from 'react';
 import { Box } from '@datalayer/primer-addons';
+import { useChatStore, useConversationStore } from '../../stores';
 /**
  * ExampleWrapper
  *
- * Wraps every example in a fixed-height container that accounts for
- * the 60 px header bar. Examples inside can use `100vh` or `100%`
- * freely — the wrapper clips and scrolls as needed.
+ * Provides every example with a definite-height, scroll-clipped container
+ * that fills the parent content area exactly. Examples mounted inside
+ * should treat this as their viewport: use `height: '100%'` on their
+ * root, then own their internal flex/grid layout (and place any internal
+ * scrollers on dedicated panels with `minHeight: 0` + `overflow: 'auto'`).
+ *
+ * Also clears the shared chat + conversation stores synchronously as the
+ * new example mounts, so switching examples never leaks messages from the
+ * previously-mounted chat.
  */
-export const ExampleWrapper = ({ children, }) => (_jsx(Box, { sx: {
-        height: 'calc(100vh - 60px)',
-        width: '100%',
-        overflow: 'auto',
-        position: 'relative',
-    }, children: children }));
+export const ExampleWrapper = ({ children, }) => {
+    useLayoutEffect(() => {
+        useChatStore.getState().reset();
+        useConversationStore.getState().clearAll();
+    }, []);
+    return (_jsx(Box, { sx: {
+            position: 'relative',
+            height: '100%',
+            width: '100%',
+            minHeight: 0,
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+            // Generic constraint: every example's root child fills the wrapper
+            // exactly and cannot exceed it. This neutralises stray `100vh`/
+            // `calc(100vh - Npx)` heights inside individual examples so the
+            // chat footer (or any bottom UI) always remains in the viewport.
+            '& > *': {
+                flex: '1 1 0',
+                minHeight: 0,
+                maxHeight: '100%',
+                width: '100%',
+                // Default scroll behaviour for plain content pages. Examples
+                // that manage their own internal scrollers can override this
+                // by setting `overflow: 'hidden'` (or another value) on their
+                // root element \u2014 the child rule wins on specificity.
+                overflow: 'auto',
+            },
+        }, children: children }));
+};
 export default ExampleWrapper;

package/lib/examples/{ag-ui → components}/haiku/HaikuDisplay.js

@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * This component displays a collection of haikus in a carousel format
  * for the main view area. Inspired by the AG-UI Dojo implementation.
  *
- * @module examples/ag-ui/haiku/HaikuDisplay
+ * @module examples/components/haiku/HaikuDisplay
  */
 import { useState } from 'react';
 import { IconButton, Text } from '@primer/react';

package/lib/examples/{ag-ui → components}/haiku/InlineHaikuCard.js

@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Inspired by the AG-UI Dojo implementation, this component renders haiku
  * poetry with gradient backgrounds and Japanese/English text.
  *
- * @module examples/ag-ui/haiku/InlineHaikuCard
+ * @module examples/components/haiku/InlineHaikuCard
  */
 import { Spinner } from '@primer/react';
 /**

package/lib/examples/{ag-ui → components}/haiku/index.d.ts

@@ -5,7 +5,7 @@
  * tool-based generative UI where the backend generates haiku content
  * that is rendered both inline in chat and in a main display area.
  *
- * @module examples/ag-ui/haiku
+ * @module examples/components/haiku
  */
 export { InlineHaikuCard, type InlineHaikuCardProps, type HaikuResult, } from './InlineHaikuCard';
 export { HaikuDisplay, type HaikuDisplayProps } from './HaikuDisplay';

package/lib/examples/{ag-ui → components}/haiku/index.js

@@ -9,7 +9,7 @@
  * tool-based generative UI where the backend generates haiku content
  * that is rendered both inline in chat and in a main display area.
  *
- * @module examples/ag-ui/haiku
+ * @module examples/components/haiku
  */
 export { InlineHaikuCard, } from './InlineHaikuCard';
 export { HaikuDisplay } from './HaikuDisplay';

package/lib/examples/components/index.d.ts

@@ -1,5 +1,6 @@
 export { ErrorView } from './ErrorView';
 export type { ErrorViewProps } from './ErrorView';
+export { AuthRequiredView } from './AuthRequiredView';
 export { MockFileBrowser } from './MockFileBrowser';
 export type { MockFileBrowserProps } from './MockFileBrowser';
 export { MainContent } from './MainContent';
@@ -17,3 +18,5 @@ export type { TimeTravelProps } from './TimeTravel';
 export { LexicalEditor } from './LexicalEditor';
 export type { LexicalEditorProps } from './LexicalEditor';
 export { ExampleWrapper } from './ExampleWrapper';
+export { InlineWeatherCard, type InlineWeatherCardProps, type WeatherResult, } from './weather';
+export { InlineHaikuCard, HaikuDisplay, type InlineHaikuCardProps, type HaikuDisplayProps, type HaikuResult, } from './haiku';

package/lib/examples/components/index.js

@@ -4,6 +4,7 @@
  */
 // Example/layout components
 export { ErrorView } from './ErrorView';
+export { AuthRequiredView } from './AuthRequiredView';
 export { MockFileBrowser } from './MockFileBrowser';
 export { MainContent } from './MainContent';
 export { SessionTabs } from './SessionTabs';
@@ -13,3 +14,6 @@ export { FooterMetrics } from './FooterMetrics';
 export { TimeTravel } from './TimeTravel';
 export { LexicalEditor } from './LexicalEditor';
 export { ExampleWrapper } from './ExampleWrapper';
+// AG-UI example components
+export { InlineWeatherCard, } from './weather';
+export { InlineHaikuCard, HaikuDisplay, } from './haiku';