@datalayer/agent-runtimes 1.0.5 → 1.0.6

package/lib/examples/ChatCustomExample.js

@@ -9,6 +9,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { Chat } from '../chat';
 // Create a query client for React Query
 const queryClient = new QueryClient({
@@ -22,19 +23,18 @@ const queryClient = new QueryClient({
     },
 });
 const AGENT_NAME = 'datalayer-assistant';
-const BASE_URL = 'http://localhost:8765';
 /**
  * Hook to ensure the agent exists on the server
  * Creates the agent if it doesn't exist
  */
-function useEnsureAgent() {
+function useEnsureAgent(baseUrl) {
     const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
     const [agentId, setAgentId] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(null);
     const createAgent = useCallback(async () => {
         try {
-            const response = await fetch(`${BASE_URL}/api/v1/agents`, {
+            const response = await fetch(`${baseUrl}/api/v1/agents`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -71,7 +71,7 @@ Be concise, helpful, and provide working code examples when appropriate.`,
             console.error('[AgentRuntimeCustomExample] Error creating agent:', err);
             throw err;
         }
-    }, [agentName]);
+    }, [agentName, baseUrl]);
     const initAgent = useCallback(async () => {
         setIsLoading(true);
         setError(null);
@@ -107,7 +107,8 @@ Be concise, helpful, and provide working code examples when appropriate.`,
  * - Auto-creates agent on the server if it doesn't exist
  */
 const AgentRuntimeCustomExample = () => {
-    const { agentId, isLoading, error, retry } = useEnsureAgent();
+    const baseUrl = useExampleAgentRuntimesUrl();
+    const { agentId, isLoading, error, retry } = useEnsureAgent(baseUrl);
     return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                     display: 'flex',
                     flexDirection: 'column',

package/lib/examples/ChatExample.js

@@ -20,13 +20,14 @@ import { Text, Spinner } from '@primer/react';
 import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { ErrorView } from './components';
 import { Chat } from '../chat';
 setupPrimerPortals();
-const BASE_URL = 'http://localhost:8765';
-const AGENT_SPEC_ID = 'demo-simple';
+const AGENT_SPEC_ID = 'example-simple';
 const AGENT_NAME = 'simple';
 const AgentRuntimeChatExample = () => {
+    const baseUrl = useExampleAgentRuntimesUrl();
     const [agentId, setAgentId] = useState(null);
     const [error, setError] = useState(null);
     const [isCreating, setIsCreating] = useState(true);
@@ -37,7 +38,7 @@ const AgentRuntimeChatExample = () => {
         const name = uniqueAgentId(AGENT_NAME);
         const createAgent = async () => {
             try {
-                const response = await fetch(`${BASE_URL}/api/v1/agents`, {
+                const response = await fetch(`${baseUrl}/api/v1/agents`, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({
@@ -69,7 +70,7 @@ const AgentRuntimeChatExample = () => {
         return () => {
             cancelled = true;
         };
-    }, []);
+    }, [baseUrl]);
     // Loading state while agent is being created
     if (isCreating) {
         return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
@@ -87,7 +88,7 @@ const AgentRuntimeChatExample = () => {
         return (_jsx(ThemedProvider, { children: _jsx(ErrorView, { error: "Failed to start agent", detail: error || 'No agent ID returned' }) }));
     }
     // Agent is ready — render the Chat component
-    return (_jsx(Chat, { protocol: "ag-ui", baseUrl: BASE_URL, agentId: agentId, title: "Simple Agent", placeholder: "Send a message...", description: "Chat with a simple AI assistant", showHeader: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", runtimeId: agentId, historyEndpoint: `${BASE_URL}/api/v1/history`, suggestions: [
+    return (_jsx(Chat, { protocol: "ag-ui", baseUrl: baseUrl, agentId: agentId, title: "Simple Agent", placeholder: "Send a message...", description: "Chat with a simple AI assistant", showHeader: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", runtimeId: agentId, historyEndpoint: `${baseUrl}/api/v1/history`, suggestions: [
             {
                 title: 'Hello',
                 message: 'Hello, what can you do?',

package/lib/examples/Lexical2Example.js

@@ -158,7 +158,7 @@ export function ChatLexicalExampleInner({ serviceManager, }) {
             apiBaseUrl: import.meta.env.VITE_DATALAYER_API_URL ||
                 'https://oss.datalayer.run/api',
             apiKey: import.meta.env.VITE_DATALAYER_API_KEY,
-            defaultModel: AIModels.BEDROCK_US_ANTHROPIC_CLAUDE_3_5_HAIKU_20241022_V1_0,
+            defaultModel: AIModels.BEDROCK_US_ANTHROPIC_CLAUDE_SONNET_4_5_20250929_V1_0,
             enableStreaming: true,
             requireToolApproval: false,
             debug: import.meta.env.DEV,

package/lib/examples/LexicalAgentExample.js

@@ -72,7 +72,7 @@ function getJupyterSandboxUrl(serviceManager) {
     return `${baseUrl}${separator}token=${encodeURIComponent(token)}`;
 }
 /**
- * Hook to ensure the demo-agent exists on the server.
+ * Hook to ensure the example-agent exists on the server.
  * Creates it if it doesn't exist.
  */
 function useEnsureAgent(agentId, baseUrl, jupyterSandboxUrl) {

package/lib/examples/NotebookAgentExample.js

@@ -54,7 +54,7 @@ function getJupyterSandboxUrl(serviceManager) {
     return `${baseUrl}${separator}token=${encodeURIComponent(token)}`;
 }
 /**
- * Hook to ensure the demo-agent is aligned with the active notebook runtime.
+ * Hook to ensure the example-agent is aligned with the active notebook runtime.
  * Recreates the agent with jupyter sandbox settings from the Notebook UI.
  */
 function useEnsureAgent(agentId, baseUrl, jupyterSandboxUrl) {
@@ -154,8 +154,8 @@ function NotebookWithChat({ serviceManager, }) {
     // Get notebook tools for ChatFloating
     const frontendTools = useNotebookTools(NOTEBOOK_ID);
     return (_jsxs(Box, { sx: {
-            height: '100vh',
-            width: '100vw',
+            height: '100%',
+            width: '100%',
             display: 'flex',
             overflow: 'hidden',
         }, children: [_jsx(NotebookUI, { serviceManager: serviceManager }), error && (_jsxs(Box, { sx: {

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

@@ -2,16 +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 (``handleExampleChange`` in ``main.tsx`` already
- * resets these, but a last-millisecond WebSocket callback from the old
- * example can repopulate them between reset and the new mount — this
- * ``useLayoutEffect`` closes that race).
+ * previously-mounted chat.
  */
 export declare const ExampleWrapper: React.FC<{
     children: React.ReactNode;

package/lib/examples/components/ExampleWrapper.js

@@ -9,16 +9,15 @@ 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 (``handleExampleChange`` in ``main.tsx`` already
- * resets these, but a last-millisecond WebSocket callback from the old
- * example can repopulate them between reset and the new mount — this
- * ``useLayoutEffect`` closes that race).
+ * previously-mounted chat.
  */
 export const ExampleWrapper = ({ children, }) => {
     useLayoutEffect(() => {
@@ -26,10 +25,28 @@ export const ExampleWrapper = ({ children, }) => {
         useConversationStore.getState().clearAll();
     }, []);
     return (_jsx(Box, { sx: {
-            height: 'calc(100vh - 60px)',
-            width: '100%',
-            overflow: 'auto',
             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/example-selector.js

@@ -74,7 +74,7 @@ export const EXAMPLE_ENTRIES = [
     makeEntry('AgUiHumanInTheLoopExample', () => import('./AgUiHumanInTheLoopExample'), 'AG-UI human-in-the-loop approvals example.'),
     makeEntry('AgUiSharedStateExample', () => import('./AgUiSharedStateExample'), 'AG-UI shared state synchronization example.'),
     makeEntry('AgUiToolsBasedGenUiExample', () => import('./AgUiToolsBasedGenUiExample'), 'AG-UI tool-based generative UI example.'),
-    makeEntry('AgentSpecsExample', () => import('./AgentSpecsExample'), 'Configure and run agents from specs and transports.'),
+    makeEntry('AgentspecsExample', () => import('./AgentspecsExample'), 'Configure and run agents from specs and transports.'),
     makeEntry('CellSimpleExample', () => import('./CellSimpleExample'), 'Simple Jupyter cell integration example.'),
     makeEntry('ChatCustomExample', () => import('./ChatCustomExample'), 'Custom chat experience composition example.'),
     makeEntry('ChatExample', () => import('./ChatExample'), 'Baseline chat integration example.'),
@@ -86,6 +86,7 @@ export const EXAMPLE_ENTRIES = [
     makeEntry('AgentEvalsExample', () => import('./AgentEvalsExample'), 'Evaluation workflows for agent outputs.'),
     makeEntry('AgentGuardrailsExample', () => import('./AgentGuardrailsExample'), 'Guardrails and safety checks for agent runs.'),
     makeEntry('AgentHooksExample', () => import('./AgentHooksExample'), 'Pre-hooks and post-hooks lifecycle execution example.'),
+    makeEntry('AgentInferenceProviderExample', () => import('./AgentInferenceProviderExample'), 'Switch local and datalayer inference providers with live low-level provider events.', ['example', 'agent', 'inference', 'provider', 'runtime']),
     makeEntry('AgentToolApprovalsExample', () => import('./AgentToolApprovalsExample'), 'Tool approval workflows and manual decisions.'),
     makeEntry('AgentMemoryExample', () => import('./AgentMemoryExample'), 'Memory-aware conversation and retrieval example.'),
     makeEntry('AgentSkillsExample', () => import('./AgentSkillsExample'), 'Skills discovery, execution, and monitoring example.'),

package/lib/examples/index.d.ts

@@ -1,4 +1,4 @@
-export { default as AgentSpecsExample } from './AgentSpecsExample';
+export { default as AgentspecsExample } from './AgentspecsExample';
 export { default as A2UiComponentGalleryExample } from './A2UiComponentGalleryExample';
 export { default as A2UiContactCardExample } from './A2UiContactCardExample';
 export { default as A2UiRestaurantExample } from './A2UiRestaurantExample';
@@ -20,6 +20,7 @@ export { default as AgentCodemodeExample } from './AgentCodemodeExample';
 export { default as AgentEvalsExample } from './AgentEvalsExample';
 export { default as AgentGuardrailsExample } from './AgentGuardrailsExample';
 export { default as AgentHooksExample } from './AgentHooksExample';
+export { default as AgentInferenceProviderExample } from './AgentInferenceProviderExample';
 export { default as AgentToolApprovalsExample } from './AgentToolApprovalsExample';
 export { default as AgentMemoryExample } from './AgentMemoryExample';
 export { default as AgentOtelExample } from './AgentOtelExample';

package/lib/examples/index.js

@@ -2,7 +2,7 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-export { default as AgentSpecsExample } from './AgentSpecsExample';
+export { default as AgentspecsExample } from './AgentspecsExample';
 export { default as A2UiComponentGalleryExample } from './A2UiComponentGalleryExample';
 export { default as A2UiContactCardExample } from './A2UiContactCardExample';
 export { default as A2UiRestaurantExample } from './A2UiRestaurantExample';
@@ -24,6 +24,7 @@ export { default as AgentCodemodeExample } from './AgentCodemodeExample';
 export { default as AgentEvalsExample } from './AgentEvalsExample';
 export { default as AgentGuardrailsExample } from './AgentGuardrailsExample';
 export { default as AgentHooksExample } from './AgentHooksExample';
+export { default as AgentInferenceProviderExample } from './AgentInferenceProviderExample';
 export { default as AgentToolApprovalsExample } from './AgentToolApprovalsExample';
 export { default as AgentMemoryExample } from './AgentMemoryExample';
 export { default as AgentOtelExample } from './AgentOtelExample';

package/lib/examples/lexical/initial-content.json

@@ -1605,7 +1605,7 @@
                                 "type": "jupyter-input",
                                 "version": 1,
                                 "language": "python",
-                                "jupyterInputNodeUuid": "collapsible-demo-uuid"
+                                "jupyterInputNodeUuid": "collapsible-example-uuid"
                             },
                             {
                                 "format": "",
@@ -1619,8 +1619,8 @@
                                         "output_type": "stream"
                                     }
                                 ],
-                                "jupyterInputNodeUuid": "collapsible-demo-uuid",
-                                "jupyterOutputNodeUuid": "collapsible-demo-output-uuid"
+                                "jupyterInputNodeUuid": "collapsible-example-uuid",
+                                "jupyterOutputNodeUuid": "collapsible-example-output-uuid"
                             }
                         ],
                         "direction": "ltr",
@@ -2074,7 +2074,7 @@
                 "type": "jupyter-input",
                 "version": 1,
                 "language": "python",
-                "jupyterInputNodeUuid": "plot-demo-uuid"
+                "jupyterInputNodeUuid": "plot-example-uuid"
             },
             {
                 "format": "",
@@ -2091,8 +2091,8 @@
                         "output_type": "execute_result"
                     }
                 ],
-                "jupyterInputNodeUuid": "plot-demo-uuid",
-                "jupyterOutputNodeUuid": "plot-demo-output-uuid"
+                "jupyterInputNodeUuid": "plot-example-uuid",
+                "jupyterOutputNodeUuid": "plot-example-output-uuid"
             },
             {
                 "type": "horizontalrule",

package/lib/examples/main.js

@@ -123,6 +123,34 @@ const getDefaultExampleName = () => {
     }
     return 'NotebookExample';
 };
+const parseJwtPayload = (token) => {
+    const parts = token.split('.');
+    if (parts.length !== 3 || !parts[1]) {
+        return null;
+    }
+    try {
+        const base64 = parts[1].replace(/-/g, '+').replace(/_/g, '/');
+        const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, '=');
+        const decoded = atob(padded);
+        return JSON.parse(decoded);
+    }
+    catch {
+        return null;
+    }
+};
+const isExpiredJwt = (token) => {
+    const payload = parseJwtPayload(token);
+    if (!payload) {
+        // Non-JWT tokens (for example API keys) should not be treated as expired.
+        return false;
+    }
+    const exp = payload.exp;
+    if (typeof exp !== 'number') {
+        return false;
+    }
+    const nowSeconds = Math.floor(Date.now() / 1000);
+    return nowSeconds >= exp;
+};
 // Notebook-only component for iframe display - renders ONLY the notebook without any UI chrome
 const NotebookOnlyApp = () => {
     const [serviceManager, setServiceManager] = useState(null);
@@ -352,7 +380,7 @@ export const ExampleApp = () => {
         }));
         // 3) Wipe every piece of in-process agent state so the next example boots
         //    with a clean slate (no leftover messages, threads, pending tool
-        //    calls, runtime snapshots, monitoring caches, or sockets).
+        //    calls, code sandbox snapshots, monitoring caches, or sockets).
         useChatStore.getState().reset();
         useConversationStore.getState().clearAll();
         agentRuntimeStore.getState().reset();
@@ -402,6 +430,7 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
     const logoColors = getLogoColors(themeVariant, colorMode);
     const { token, setAuth, clearAuth } = useSimpleAuthStore();
     const [showSignIn, setShowSignIn] = useState(false);
+    const shouldShowAuthScreen = showSignIn && !token;
     const syncTokenToIamStore = useCallback((newToken) => {
         import('@datalayer/core/lib/state').then(({ iamStore: coreIamStore }) => {
             coreIamStore.setState({ token: newToken });
@@ -411,6 +440,17 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
         // Keep iamStore aligned with persisted auth token on app load/refresh.
         syncTokenToIamStore(token || undefined);
     }, [token, syncTokenToIamStore]);
+    useEffect(() => {
+        if (!token) {
+            setShowSignIn(true);
+            return;
+        }
+        if (isExpiredJwt(token)) {
+            clearAuth();
+            syncTokenToIamStore(undefined);
+            setShowSignIn(true);
+        }
+    }, [token, clearAuth, syncTokenToIamStore]);
     const handleHeaderSignIn = useCallback((newToken, handle) => {
         setAuth(newToken, handle);
         syncTokenToIamStore(newToken);
@@ -419,6 +459,7 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
     const handleHeaderLogout = useCallback(() => {
         clearAuth();
         syncTokenToIamStore(undefined);
+        setShowSignIn(true);
     }, [clearAuth, syncTokenToIamStore]);
     return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: cfg.primerTheme, themeStyles: cfg.themeStyles, children: _jsxs(Box, { sx: {
                 width: '100vw',
@@ -474,7 +515,7 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                                         const rest = availableExamples.filter(e => e.id !== 'HomeExample');
                                         // Classify each example into a named group.
                                         const groupOf = (id) => {
-                                            if (id === 'AgentSpecsExample')
+                                            if (id === 'AgentspecsExample')
                                                 return 'Personas';
                                             if (id.startsWith('A2Ui'))
                                                 return 'A2UI';
@@ -516,7 +557,7 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                                         }
                                         const nodes = [];
                                         if (home) {
-                                            nodes.push(_jsx("option", { value: home.id, children: home.title }, home.id));
+                                            nodes.push(_jsx("option", { value: home.id, disabled: home.id === selectedExample, children: home.title }, home.id));
                                         }
                                         let sepIndex = 0;
                                         for (const g of groupOrder) {
@@ -525,25 +566,24 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                                                 continue;
                                             nodes.push(_jsxs("option", { disabled: true, value: `__sep_${sepIndex}`, children: ["\u2500\u2500\u2500\u2500\u2500\u2500 ", g, " \u2500\u2500\u2500\u2500\u2500\u2500"] }, `__sep_${sepIndex++}`));
                                             for (const example of items) {
-                                                nodes.push(_jsx("option", { value: example.id, children: example.title }, example.id));
+                                                nodes.push(_jsx("option", { value: example.id, disabled: example.id === selectedExample, children: example.title }, example.id));
                                             }
                                         }
                                         return _jsx(_Fragment, { children: nodes });
-                                    })() }), 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(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: token ? (_jsxs(_Fragment, { children: [_jsx(UserBadge, { token: token, variant: "small" }), _jsx(Button, { size: "small", variant: "invisible", onClick: handleHeaderLogout, leadingVisual: SignOutIcon, sx: { color: 'fg.muted' }, children: "Sign out" })] })) : (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowSignIn(true), leadingVisual: SignInIcon, sx: { color: 'fg.muted' }, children: "Sign in" })) }), _jsx(Box, { as: "a", href: "https://datalayer.ai", target: "_blank", rel: "noopener noreferrer", "aria-label": "Open Datalayer website", sx: { display: 'inline-flex', alignItems: 'center' }, children: _jsx(DatalayerLogoText, { size: 24, variant: themeVariant, colorMode: colorMode, primaryColor: logoColors.primary, secondaryColor: logoColors.secondary, textColor: logoColors.textColor, primaryGradient: logoColors.primaryGradient, secondaryGradient: logoColors.secondaryGradient, gradient: true }) })] })] }), showSignIn && !token && (_jsx(Box, { sx: {
-                        position: 'fixed',
-                        top: 60,
-                        left: 0,
-                        right: 0,
-                        bottom: 0,
-                        zIndex: 150,
-                        bg: 'canvas.backdrop',
-                        p: 3,
-                        overflow: 'auto',
-                    }, children: _jsxs(Box, { sx: { maxWidth: 640, mx: 'auto' }, children: [_jsx(SignInSimple, { onSignIn: handleHeaderSignIn, onApiKeySignIn: apiKey => handleHeaderSignIn(apiKey, 'api-key-user'), title: "Agent Runtimes Examples", description: "Sign in to run authenticated examples and tools.", leadingIcon: _jsx(HomeIcon, { size: 24 }) }), _jsx(Box, { sx: { mt: 2, display: 'flex', justifyContent: 'center' }, children: _jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowSignIn(false), children: "Cancel" }) })] }) })), _jsx(Box, { sx: {
+                                    })() }), 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(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: token ? (_jsxs(_Fragment, { children: [_jsx(UserBadge, { token: token, variant: "small", onTokenExpired: () => {
+                                                    handleHeaderLogout();
+                                                    setShowSignIn(true);
+                                                } }), _jsx(Button, { size: "small", variant: "invisible", onClick: handleHeaderLogout, leadingVisual: SignOutIcon, sx: { color: 'fg.muted' }, children: "Sign out" })] })) : (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowSignIn(true), leadingVisual: SignInIcon, sx: { color: 'fg.muted' }, children: "Sign in" })) }), _jsx(Box, { as: "a", href: "https://datalayer.ai", target: "_blank", rel: "noopener noreferrer", "aria-label": "Open Datalayer website", sx: { display: 'inline-flex', alignItems: 'center' }, children: _jsx(DatalayerLogoText, { size: 24, variant: themeVariant, colorMode: colorMode, primaryColor: logoColors.primary, secondaryColor: logoColors.secondary, textColor: logoColors.textColor, primaryGradient: logoColors.primaryGradient, secondaryGradient: logoColors.secondaryGradient, gradient: true }) })] })] }), _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 }, selectedExample) }, selectedExample)) : null })] }) }));
+                    }, children: shouldShowAuthScreen ? (_jsx(Box, { sx: {
+                            width: '100%',
+                            height: '100%',
+                            bg: 'canvas.backdrop',
+                            p: 3,
+                            overflow: 'auto',
+                        }, children: _jsx(Box, { sx: { maxWidth: 640, mx: 'auto' }, children: _jsx(SignInSimple, { onSignIn: handleHeaderSignIn, onApiKeySignIn: apiKey => handleHeaderSignIn(apiKey, 'api-key-user'), title: "Agent Runtimes Examples", description: "Sign in to run authenticated examples and tools.", leadingIcon: _jsx(HomeIcon, { size: 24 }) }) }) })) : 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 }, selectedExample) }, selectedExample)) : null })] }) }));
 };
 // Mount the app - check route to determine which app to render
 const root = document.getElementById('root');

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

@@ -13,6 +13,6 @@
  *
  * @example
  *   uniqueAgentId('simple')           // → "simple-a3f7b2" (cached)
- *   uniqueAgentId('codemode-demo')    // → "codemode-demo-k9x2m1" (cached)
+ *   uniqueAgentId('codemode-demo')    // → "codemode-example-k9x2m1" (cached)
  */
 export declare function uniqueAgentId(baseName: string): string;

package/lib/examples/utils/agentId.js

@@ -32,7 +32,7 @@ function randomSlug(length = 6) {
  *
  * @example
  *   uniqueAgentId('simple')           // → "simple-a3f7b2" (cached)
- *   uniqueAgentId('codemode-demo')    // → "codemode-demo-k9x2m1" (cached)
+ *   uniqueAgentId('codemode-demo')    // → "codemode-example-k9x2m1" (cached)
  */
 export function uniqueAgentId(baseName) {
     const storageKey = `agent-runtimes:agentId:${baseName}`;

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

@@ -0,0 +1,5 @@
+/**
+ * Resolve the base URL used by examples to call the agent-runtimes service.
+ * Priority: explicit override -> dedicated env -> legacy base env -> localhost.
+ */
+export declare function useExampleAgentRuntimesUrl(override?: string): string;

package/lib/examples/utils/useExampleAgentRuntimesUrl.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useMemo } from 'react';
+/**
+ * Resolve the base URL used by examples to call the agent-runtimes service.
+ * Priority: explicit override -> dedicated env -> legacy base env -> localhost.
+ */
+export function useExampleAgentRuntimesUrl(override) {
+    return useMemo(() => {
+        if (override) {
+            return override;
+        }
+        return (import.meta.env.VITE_DATALAYER_AGENT_RUNTIMES_URL ||
+            import.meta.env.VITE_BASE_URL ||
+            'http://localhost:8765');
+    }, [override]);
+}

package/lib/hooks/useAIAgentsWebSocket.js

@@ -28,6 +28,20 @@ function useBaseUrl() {
 // ─── Hook ────────────────────────────────────────────────────────────
 const RECONNECT_DELAY_MS = 3_000;
 const WS_DEFAULT_PATH = `${API_BASE_PATHS.AI_AGENTS}/ws`;
+const isDevTraceEnabled = () => {
+    try {
+        return Boolean(import.meta.env?.DEV);
+    }
+    catch {
+        return false;
+    }
+};
+const logApprovalTrace = (label, details) => {
+    if (!isDevTraceEnabled()) {
+        return;
+    }
+    console.debug(`[approval-trace] ${label}`, details);
+};
 const isObject = (value) => !!value && typeof value === 'object';
 /**
  * Connect to the AI Agents generic WebSocket.
@@ -146,6 +160,17 @@ export function useAIAgentsWebSocket(options) {
                     queryClient.invalidateQueries({ queryKey: ['agent-events'] });
                 }
                 if (event.startsWith('tool_approval_')) {
+                    const data = msg.data;
+                    logApprovalTrace('recv_tool_approval_event', {
+                        event,
+                        channel: msg.channel,
+                        approvalId: typeof data?.id === 'string'
+                            ? data.id
+                            : typeof data?.approval_id === 'string'
+                                ? data.approval_id
+                                : undefined,
+                        status: typeof data?.status === 'string' ? data.status : undefined,
+                    });
                     queryClient.invalidateQueries({ queryKey: ['tool-approvals'] });
                 }
                 if (event.startsWith('notification_')) {
@@ -231,6 +256,16 @@ export function useAIAgentsWebSocket(options) {
                 return false;
             }
             try {
+                if (isObject(payload) && payload.type === 'tool_approval_decision') {
+                    logApprovalTrace('send_tool_approval_decision', {
+                        approvalId: typeof payload.approvalId === 'string'
+                            ? payload.approvalId
+                            : undefined,
+                        approved: typeof payload.approved === 'boolean'
+                            ? payload.approved
+                            : undefined,
+                    });
+                }
                 ws.send(typeof payload === 'string' ? payload : JSON.stringify(payload));
                 return true;
             }

package/lib/hooks/useAgentRuntimes.d.ts

@@ -4,6 +4,7 @@ import type { AgentConnection } from '../types/connection';
 import type { AgentStatus, AgentRuntimeData } from '../types/agents';
 import type { CreateAgentRuntimeRequest, AgentLifecycleState, CreateRuntimeApiResponse } from '../types/agents-lifecycle';
 import { ServiceManager } from '@jupyterlab/services/lib/manager';
+export type RuntimeCreationTarget = 'backend-services' | 'local-agent-runtimes';
 /**
  * Options for the useAgents hook.
  */
@@ -18,6 +19,14 @@ export interface UseAgentOptions {
     autoStart?: boolean;
     /** Full agent spec object (persisted with checkpoints) */
     agentSpec?: Record<string, any>;
+    /**
+     * Where runtime create/list operations should be sent.
+     * - `backend-services`: use backend runtimes service URL
+     * - `local-agent-runtimes`: use local agent-runtimes URL
+     */
+    runtimeCreationTarget?: RuntimeCreationTarget;
+    /** Explicit base URL for runtime create/list operations. */
+    runtimeCreationBaseUrl?: string;
 }
 /**
  * Return type for the useAgents hook.
@@ -53,6 +62,10 @@ export interface UseAgentReturn {
     isReady: boolean;
     /** Error if any */
     error: string | null;
+    /** Effective runtime creation target mode. */
+    runtimeCreationTarget: RuntimeCreationTarget;
+    /** Effective base URL used for runtime create/list operations. */
+    runtimeCreationBaseUrl: string;
 }
 /** Default query options for all agent runtime queries. */
 export declare const AGENT_QUERY_OPTIONS: {
@@ -87,7 +100,7 @@ export declare const agentQueryKeys: {
  * // Connect mode — attach to an existing runtime
  * const { isReady, endpoint, connectToRuntime } = useAgents({
  *   autoCreateAgent: true,
- *   agentConfig: { model: 'bedrock:us.anthropic.claude-3-5-haiku-20241022-v1:0' },
+ *   agentConfig: { model: 'bedrock:us.anthropic.claude-sonnet-4-5-20250929-v1:0' },
  * });
  *
  * // Lifecycle mode — full lifecycle with agentSpecId
@@ -105,7 +118,15 @@ export declare function useAgentRuntimes(options?: UseAgentOptions): UseAgentRet
  * The backend returns active runtimes from the operator **plus** paused
  * runtimes synthesised from Solr checkpoint records (with ``status="paused"``).
  */
-export declare function useAgentRuntimesQuery(): import("@tanstack/react-query").UseQueryResult<AgentRuntimeData[], Error>;
+export declare function useAgentRuntimesQuery(scope?: {
+    selectedUserUid?: string;
+    selectedOrganizationUid?: string;
+    selectedTeamUid?: string;
+    selectedAgentUid?: string;
+}, queryOptions?: {
+    enabled?: boolean;
+    refetchInterval?: number | false;
+}): import("@tanstack/react-query").UseQueryResult<AgentRuntimeData[], Error>;
 /**
  * Hook to fetch a single agent runtime by pod name.
  */
@@ -149,7 +170,15 @@ export interface UseAgentsRuntimesReturn {
 /**
  * Consolidated runtime list and mutations.
  */
-export declare function useAgentsRuntimes(): UseAgentsRuntimesReturn;
+export declare function useAgentsRuntimes(scope?: {
+    selectedUserUid?: string;
+    selectedOrganizationUid?: string;
+    selectedTeamUid?: string;
+    selectedAgentUid?: string;
+}, queryOptions?: {
+    enabled?: boolean;
+    refetchInterval?: number | false;
+}): UseAgentsRuntimesReturn;
 export interface UseAgentRuntimeWebSocketOptions {
     /** Enable/disable the connection. Defaults to `true`. */
     enabled?: boolean;