@datalayer/agent-runtimes 1.0.19 → 1.0.20

package/lib/examples/main.js

@@ -3,16 +3,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { createDatalayerServiceManager } from '../services/DatalayerServiceManager';
 /// <reference types="vite/client" />
 import { useCallback, useEffect, useMemo, 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, DatalayerLogoText, getLogoColors, themeConfigs, Box, } from '@datalayer/primer-addons';
+import { DatalayerThemeProvider, DatalayerLogoText, getLogoColors, themeConfigs, Box, SlidingPanel, } from '@datalayer/primer-addons';
 import { AgentSummary } from '../components';
 import { HomeIcon, SignInIcon, SignOutIcon } from '@primer/octicons-react';
-import { Button, Spinner, Text } from '@primer/react';
+import { Button, SegmentedControl, Spinner, Text } from '@primer/react';
 import { AppearanceControlsWithStore } from '@datalayer/primer-addons/lib/components/appearance';
 import { coreStore, iamStore } from '@datalayer/core';
 import { DATALAYER_IAM_TOKEN_KEY, DATALAYER_IAM_USER_KEY, } from '../state/substates';
@@ -29,9 +28,90 @@ import { useAgentSummaryStore } from './utils/agentSummaryStore';
 import { useExampleThemeStore } from './utils/themeStore';
 import { ExampleWrapper } from './components/ExampleWrapper';
 import { ExampleErrorBoundary } from './components/ExampleErrorBoundary';
+import { createServiceManagerFromAgentSandbox } from '../hooks/useAgentRuntimes';
+import { DEFAULT_MODEL } from '../specs/models';
 import nbformatExample from './utils/notebooks/NotebookExample1.ipynb.json';
 import '../../style/primer-primitives.css';
 const DEFAULT_RUNTIMES_URL = 'https://r1.datalayer.run';
+const DEFAULT_LOCAL_JUPYTER_SERVER_URL = 'http://localhost:8888/api/jupyter-server';
+const DEFAULT_LOCAL_JUPYTER_SERVER_TOKEN = '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6';
+const DEFAULT_CLOUD_RUNTIME_ENVIRONMENT = 'ai-agents-env';
+const isNotebookOrCellExample = (exampleId) => {
+    return ((exampleId.includes('Notebook') || exampleId.includes('Cell')) &&
+        !exampleId.includes('Agent'));
+};
+const wait = (ms) => new Promise(resolve => {
+    window.setTimeout(resolve, ms);
+});
+const safeExampleId = (value) => {
+    return value
+        .toLowerCase()
+        .replace(/[^a-z0-9-]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .slice(0, 40);
+};
+const toAgentApiBaseUrl = (ingress) => {
+    const normalized = ingress.replace(/\/$/, '');
+    if (normalized.includes('/api/agent-runtimes')) {
+        return normalized;
+    }
+    if (normalized.includes('/api/jupyter-server')) {
+        return normalized.replace('/api/jupyter-server', '/api/agent-runtimes');
+    }
+    if (normalized.includes('/jupyter/server/')) {
+        return normalized.replace('/jupyter/server/', '/agent-runtimes/');
+    }
+    if (normalized.includes('/jupyter-server/')) {
+        return normalized.replace('/jupyter-server/', '/agent-runtimes/');
+    }
+    return normalized.replace('/jupyter/', '/agent-runtimes/');
+};
+const toSurfaceLabel = (exampleId) => {
+    if (exampleId.toLowerCase().includes('cell')) {
+        return 'cell';
+    }
+    return 'notebook';
+};
+const normalizeSandboxBaseUrl = (sandboxBaseUrl, agentBaseUrl) => {
+    const sandboxRaw = String(sandboxBaseUrl || '').trim();
+    const agentRaw = String(agentBaseUrl || '').trim();
+    if (!sandboxRaw) {
+        return agentRaw;
+    }
+    try {
+        const sandboxUrl = new URL(sandboxRaw);
+        const host = sandboxUrl.hostname;
+        const isInternalHost = host === '0.0.0.0' || host === '127.0.0.1' || host === 'localhost';
+        if (!isInternalHost) {
+            return sandboxRaw;
+        }
+        const agentUrl = new URL(agentRaw);
+        sandboxUrl.protocol = agentUrl.protocol;
+        sandboxUrl.host = agentUrl.host;
+        return sandboxUrl.toString();
+    }
+    catch {
+        return sandboxRaw;
+    }
+};
+const withTokenQueryParam = (rawUrl, token) => {
+    const normalizedUrl = String(rawUrl || '').trim();
+    const normalizedToken = String(token || '').trim();
+    if (!normalizedUrl || !normalizedToken) {
+        return normalizedUrl;
+    }
+    try {
+        const parsed = new URL(normalizedUrl);
+        if (!parsed.searchParams.get('token') &&
+            !parsed.searchParams.get('jupyter_token')) {
+            parsed.searchParams.set('token', normalizedToken);
+        }
+        return parsed.toString();
+    }
+    catch {
+        return normalizedUrl;
+    }
+};
 const resolveRuntimesUrl = (configured) => {
     const envRuntimeUrl = import.meta.env.VITE_DATALAYER_RUNTIMES_URL;
     const envBaseUrl = import.meta.env.VITE_DATALAYER_URL;
@@ -54,6 +134,50 @@ const toAgentRuntimesBaseUrl = (value) => {
     }
     return normalized;
 };
+const isProd1JupyterServerUrl = (value) => {
+    if (!value) {
+        return false;
+    }
+    try {
+        return new URL(value).hostname === 'prod1.datalayer.run';
+    }
+    catch {
+        return value.includes('prod1.datalayer.run');
+    }
+};
+const resolveLocalJupyterServerUrl = () => {
+    const normalizeLoopbackHost = (raw) => {
+        const trimmed = raw.trim().replace(/\/$/, '');
+        if (!trimmed) {
+            return DEFAULT_LOCAL_JUPYTER_SERVER_URL;
+        }
+        try {
+            const parsed = new URL(trimmed);
+            if (parsed.hostname === '0.0.0.0') {
+                parsed.hostname = 'localhost';
+            }
+            return parsed.toString().replace(/\/$/, '');
+        }
+        catch {
+            return trimmed.replace('://0.0.0.0', '://localhost');
+        }
+    };
+    const envLocalUrl = import.meta.env.VITE_JUPYTER_SERVER_URL?.trim();
+    if (envLocalUrl) {
+        return normalizeLoopbackHost(envLocalUrl);
+    }
+    const configured = getJupyterServerUrl();
+    if (configured && !isProd1JupyterServerUrl(configured)) {
+        return normalizeLoopbackHost(configured);
+    }
+    return normalizeLoopbackHost(DEFAULT_LOCAL_JUPYTER_SERVER_URL);
+};
+const ensureLocalJupyterToken = () => {
+    const token = (getJupyterServerToken() || '').trim();
+    if (!token) {
+        setJupyterServerToken(DEFAULT_LOCAL_JUPYTER_SERVER_TOKEN);
+    }
+};
 // Load configurations from DOM
 const loadConfigurations = () => {
     // Load Datalayer configuration
@@ -360,12 +484,19 @@ const NotebookOnlyApp = () => {
                 if (runtimeTargetStore.getState().target === 'cloud' &&
                     configuration?.token) {
                     try {
-                        const manager = await createDatalayerServiceManager(configuration.cpuEnvironment || 'python-3.11', configuration.credits || 100);
-                        await manager.ready;
+                        const activeSummary = agentSummaryStore.getState().active;
+                        if (!activeSummary || activeSummary.location !== 'cloud') {
+                            throw new Error('No active cloud agent sandbox found for notebook-only mode.');
+                        }
+                        const manager = await createServiceManagerFromAgentSandbox({
+                            baseUrl: activeSummary.sandboxBaseUrl || activeSummary.baseUrl,
+                            agentId: activeSummary.agentId,
+                            agentBaseUrl: activeSummary.baseUrl,
+                        }, configuration.token);
                         setServiceManager(manager);
                     }
                     catch (error) {
-                        console.error('Failed to create DatalayerServiceManager:', error);
+                        console.error('Failed to connect to cloud sandbox:', error);
                         const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
                         const manager = new ServiceManager({ serverSettings });
                         await manager.ready;
@@ -373,6 +504,8 @@ const NotebookOnlyApp = () => {
                     }
                 }
                 else {
+                    setJupyterServerUrl(resolveLocalJupyterServerUrl());
+                    ensureLocalJupyterToken();
                     const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
                     const manager = new ServiceManager({ serverSettings });
                     await manager.ready;
@@ -415,8 +548,18 @@ export const ExampleApp = () => {
     const [selectedExample, setSelectedExample] = useState(getDefaultExampleName());
     const [searchQuery, setSearchQuery] = useState(getInitialSearchQuery());
     const [isChangingExample, setIsChangingExample] = useState(false);
+    const [topNotice, setTopNotice] = useState(null);
     const runtimeTarget = useRuntimeTargetStore(state => state.target);
     const setRuntimeTarget = useRuntimeTargetStore(state => state.setTarget);
+    const showTopNotice = useCallback((message, tone = 'info', durationMs = 4500, details) => {
+        setTopNotice({
+            id: Date.now() + Math.floor(Math.random() * 1000),
+            message,
+            details,
+            tone,
+            durationMs,
+        });
+    }, []);
     const filteredExampleEntries = useMemo(() => {
         const normalized = searchQuery.trim().toLowerCase();
         const all = getExampleEntriesList();
@@ -449,11 +592,14 @@ export const ExampleApp = () => {
         }
         catch (e) {
             console.error('Failed to load example:', e);
+            showTopNotice(`Failed to load example: ${e instanceof Error ? e.message : String(e)}`, 'error', 6000);
             setError(`Failed to load example: ${e}`);
             setIsChangingExample(false);
         }
     };
     const createLocalServiceManager = async () => {
+        setJupyterServerUrl(resolveLocalJupyterServerUrl());
+        ensureLocalJupyterToken();
         const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
         const manager = new ServiceManager({ serverSettings });
         await manager.ready;
@@ -464,16 +610,182 @@ export const ExampleApp = () => {
         if (!configuration?.token) {
             throw new Error('Cloud runtime requires authentication. Please sign in.');
         }
+        const connectFromSummary = async (summary) => {
+            const connectOnce = async (candidate) => {
+                const resolvedSandboxBaseUrl = normalizeSandboxBaseUrl(candidate.sandboxBaseUrl, candidate.baseUrl);
+                const manager = await createServiceManagerFromAgentSandbox({
+                    baseUrl: resolvedSandboxBaseUrl,
+                    agentId: candidate.agentId,
+                    agentBaseUrl: candidate.baseUrl,
+                    runtimeEnvironment: candidate.runtimeEnvironment,
+                }, configuration.token);
+                const cloudBaseUrl = String(manager.serverSettings.baseUrl || '').trim();
+                const cloudToken = String(manager.serverSettings.token || '').trim();
+                if (cloudBaseUrl) {
+                    setJupyterServerUrl(cloudBaseUrl.replace(/\/$/, ''));
+                }
+                if (cloudToken) {
+                    setJupyterServerToken(cloudToken);
+                }
+                return manager;
+            };
+            let lastError;
+            for (let attempt = 1; attempt <= 8; attempt += 1) {
+                try {
+                    return await connectOnce(summary);
+                }
+                catch (error) {
+                    lastError = error;
+                    if (attempt === 8) {
+                        break;
+                    }
+                    await wait(700 * attempt);
+                }
+            }
+            throw lastError;
+        };
+        const bootstrapCloudSandbox = async () => {
+            const runtimesUrl = resolveRuntimesUrl(configuration.runtimesUrl);
+            const exampleSlug = safeExampleId(selectedExample || 'example');
+            const runtimeResp = await fetch(`${runtimesUrl}/api/runtimes/v1/runtimes`, {
+                method: 'POST',
+                headers: {
+                    Authorization: `Bearer ${configuration.token}`,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    environment: {
+                        name: DEFAULT_CLOUD_RUNTIME_ENVIRONMENT,
+                    },
+                    given_name: `${exampleSlug}-sandbox`,
+                    credits_limit: 5,
+                    type: 'notebook',
+                    editor_variant: 'none',
+                }),
+            });
+            if (!runtimeResp.ok) {
+                const failure = await runtimeResp.json().catch(() => ({}));
+                throw new Error(String(failure.detail ||
+                    `Failed to launch cloud runtime (${runtimeResp.status}).`));
+            }
+            const runtimePayload = (await runtimeResp.json());
+            const ingress = String(runtimePayload.runtime?.ingress || runtimePayload.ingress || '').trim();
+            if (!ingress) {
+                throw new Error('Cloud runtime launched but did not expose a Jupyter ingress URL.');
+            }
+            const agentBaseUrl = toAgentApiBaseUrl(ingress);
+            const agentId = `${exampleSlug}-cloud-agent`;
+            const agentResp = await fetch(`${agentBaseUrl}/api/v1/agents`, {
+                method: 'POST',
+                headers: {
+                    Authorization: `Bearer ${configuration.token}`,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    name: agentId,
+                    description: `Cloud sandbox agent for ${selectedExample}`,
+                    agent_library: 'pydantic-ai',
+                    transport: 'ag-ui',
+                    model: DEFAULT_MODEL,
+                    system_prompt: 'You are a helpful AI assistant.',
+                }),
+            });
+            if (!agentResp.ok &&
+                agentResp.status !== 400 &&
+                agentResp.status !== 409) {
+                const failure = await agentResp.json().catch(() => ({}));
+                throw new Error(String(failure.detail ||
+                    `Cloud runtime launched but agent creation failed (${agentResp.status}).`));
+            }
+            const agentPayload = (await agentResp
+                .clone()
+                .json()
+                .catch(() => ({})));
+            const resolvedAgentId = String(agentPayload.agent_id ||
+                agentPayload.id ||
+                agentPayload.agent?.agent_id ||
+                agentPayload.agent?.id ||
+                '').trim() || agentId;
+            const resolvedJupyterToken = String(agentPayload.jupyter_token ||
+                agentPayload.token ||
+                runtimePayload.runtime?.jupyter_token ||
+                runtimePayload.runtime?.token ||
+                runtimePayload.jupyter_token ||
+                runtimePayload.token ||
+                '').trim();
+            const runtimeEnvironment = {
+                environmentName: String(runtimePayload.runtime?.environment?.name || '').trim() ||
+                    undefined,
+                environmentTitle: String(runtimePayload.runtime?.environment?.title || '').trim() ||
+                    undefined,
+                cpu: String(runtimePayload.runtime?.environment?.cpu ||
+                    runtimePayload.runtime?.environment?.resources?.cpu ||
+                    '').trim() || undefined,
+                memory: String(runtimePayload.runtime?.environment?.memory ||
+                    runtimePayload.runtime?.environment?.resources?.memory ||
+                    '').trim() || undefined,
+                gpu: [
+                    runtimePayload.runtime?.environment?.gpu ||
+                        runtimePayload.runtime?.environment?.resources?.gpu ||
+                        runtimePayload.runtime?.environment?.resources?.gpu_count ||
+                        runtimePayload.runtime?.environment?.resources?.['nvidia.com/gpu'] ||
+                        '',
+                    runtimePayload.runtime?.environment?.resources?.gpu_type || '',
+                    runtimePayload.runtime?.environment?.resources?.gpu_memory ||
+                        '',
+                ]
+                    .map(value => String(value || '').trim())
+                    .filter(Boolean)
+                    .join(' ') || undefined,
+            };
+            return {
+                agentBaseUrl,
+                agentId: resolvedAgentId,
+                ingress: withTokenQueryParam(ingress, resolvedJupyterToken),
+                runtimeEnvironment,
+            };
+        };
         const activeSummary = agentSummaryStore.getState().active;
-        const selectedEntry = getExampleEntriesList().find(entry => entry.id === selectedExample);
-        const resolvedSpecId = activeSummary?.exampleId === selectedExample
-            ? activeSummary.specId
-            : undefined;
-        const runtimeDescriptor = resolvedSpecId || selectedEntry?.title || selectedExample;
-        const contextualRuntimeName = `Agent Runtime - ${runtimeDescriptor}`;
-        const manager = await createDatalayerServiceManager(configuration.cpuEnvironment || 'python-3.11', configuration.credits || 100, contextualRuntimeName);
-        await manager.ready;
-        return manager;
+        if (activeSummary?.location === 'cloud' &&
+            (activeSummary.sandboxBaseUrl || activeSummary.baseUrl)) {
+            try {
+                return await connectFromSummary({
+                    baseUrl: activeSummary.baseUrl,
+                    sandboxBaseUrl: activeSummary.sandboxBaseUrl,
+                    agentId: activeSummary.agentId,
+                    runtimeEnvironment: activeSummary.runtimeEnvironment,
+                });
+            }
+            catch (error) {
+                if (!isNotebookOrCellExample(selectedExample)) {
+                    throw error;
+                }
+                showTopNotice('Existing cloud sandbox is unavailable. Launching a fresh sandbox...', 'warning', 3500);
+            }
+        }
+        if (!isNotebookOrCellExample(selectedExample)) {
+            throw new Error('No active cloud agent sandbox found. Open an agent example and launch a cloud agent first.');
+        }
+        showTopNotice('Starting a cloud agent sandbox...', 'info', 2600);
+        const launched = await bootstrapCloudSandbox();
+        agentSummaryStore.getState().setActive({
+            exampleId: selectedExample,
+            agentName: launched.agentId,
+            agentId: launched.agentId,
+            location: 'cloud',
+            baseUrl: launched.agentBaseUrl,
+            sandboxBaseUrl: launched.ingress,
+            runtimeEnvironment: launched.runtimeEnvironment,
+            status: 'running',
+            isReady: true,
+        });
+        showTopNotice(`Cloud sandbox ready. Connecting ${toSurfaceLabel(selectedExample)} to it...`, 'success', 2600);
+        return connectFromSummary({
+            baseUrl: launched.agentBaseUrl,
+            sandboxBaseUrl: launched.ingress,
+            agentId: launched.agentId,
+            runtimeEnvironment: launched.runtimeEnvironment,
+        });
     };
     useEffect(() => {
         // Load configurations
@@ -488,14 +800,13 @@ export const ExampleApp = () => {
                     try {
                         const manager = await createCloudServiceManager();
                         setServiceManager(manager);
+                        showTopNotice('Code sandbox connected successfully (cloud).', 'success', 2600);
                         // Load initial example
                         await loadExample(selectedExample, manager);
                     }
                     catch (error) {
                         console.error('Failed to create DatalayerServiceManager:', error);
-                        // Surface the failure in the UI, then fall back to local so the
-                        // app stays usable.
-                        setError(`Cloud runtime unavailable, using local instead: ${error instanceof Error ? error.message : String(error)}`);
+                        showTopNotice(`Cloud runtime unavailable, using local instead: ${error instanceof Error ? error.message : String(error)}`, 'warning', 5500);
                         const manager = await createLocalServiceManager();
                         setServiceManager(manager);
                         // Load initial example
@@ -513,6 +824,7 @@ export const ExampleApp = () => {
             }
             catch (e) {
                 console.error('Failed to initialize app:', e);
+                showTopNotice(`Failed to initialize app: ${e instanceof Error ? e.message : String(e)}`, 'error', 6000);
                 setError(`Failed to initialize app: ${e}`);
                 setLoading(false);
             }
@@ -553,9 +865,9 @@ export const ExampleApp = () => {
                     : await createLocalServiceManager();
         }
         catch (switchError) {
-            setError(`Failed to switch to ${newTarget}: ${switchError instanceof Error
+            showTopNotice(`Failed to switch to ${newTarget}: ${switchError instanceof Error
                 ? switchError.message
-                : String(switchError)}`);
+                : String(switchError)}`, 'error', 6000);
             return;
         }
         // 1) Unmount the current example FIRST so its cleanup hooks run against the
@@ -576,6 +888,7 @@ export const ExampleApp = () => {
         setServiceManager(nextManager);
         setError(null);
         await loadExample(selectedExample, nextManager);
+        showTopNotice(`Code sandbox connected successfully (${newTarget}).`, 'success', 2600);
     };
     if (loading) {
         return (_jsxs("div", { style: { padding: '20px', textAlign: 'center' }, children: [_jsxs("h2", { children: ["Loading Example: ", selectedExample] }), _jsx("p", { children: "Please wait..." })] }));
@@ -598,16 +911,17 @@ export const ExampleApp = () => {
     exampleProps.onSelectExample = (name) => {
         void handleExampleChange(name);
     };
-    return (_jsx(ExampleAppThemed, { selectedExample: selectedExample, isChangingExample: isChangingExample, error: error, ExampleComponent: ExampleComponent, exampleProps: exampleProps, serviceManager: serviceManager, onExampleChange: handleExampleChange, onRuntimeTargetChange: handleRuntimeTargetChange, availableExamples: getExampleEntriesList() }));
+    return (_jsx(ExampleAppThemed, { selectedExample: selectedExample, isChangingExample: isChangingExample, error: error, ExampleComponent: ExampleComponent, exampleProps: exampleProps, serviceManager: serviceManager, onExampleChange: handleExampleChange, onRuntimeTargetChange: handleRuntimeTargetChange, availableExamples: getExampleEntriesList(), topNotice: topNotice, onDismissTopNotice: () => setTopNotice(null) }));
 };
 /**
  * Inner shell that reads from the theme store and wires
  * DatalayerThemeProvider + the header bar with selectors.
  */
-const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleComponent, exampleProps, serviceManager, onExampleChange, onRuntimeTargetChange, availableExamples, }) => {
+const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleComponent, exampleProps, serviceManager, onExampleChange, onRuntimeTargetChange, availableExamples, topNotice, onDismissTopNotice, }) => {
     const { colorMode, theme: themeVariant } = useExampleThemeStore();
     const runtimeTarget = useRuntimeTargetStore(state => state.target);
     const agentSummary = useAgentSummaryStore(state => state.active);
+    const isHome = selectedExample === 'HomeExample';
     const cfg = themeConfigs[themeVariant];
     const logoColors = getLogoColors(themeVariant, colorMode);
     const { token, setAuth, clearAuth } = useSimpleAuthStore();
@@ -619,8 +933,11 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
         });
     }, []);
     useEffect(() => {
-        const baseUrl = toAgentRuntimesBaseUrl(serviceManager?.serverSettings.baseUrl) ||
-            resolveExampleAgentRuntimesUrl(runtimeTarget);
+        const jupyterSandboxBaseUrl = toAgentRuntimesBaseUrl(serviceManager?.serverSettings.baseUrl);
+        const agentApiBaseUrl = resolveExampleAgentRuntimesUrl(runtimeTarget);
+        const isSandboxOnlyExample = (selectedExample.includes('Notebook') ||
+            selectedExample.includes('Cell')) &&
+            !selectedExample.includes('Agent');
         // Seed a base summary for the selected example. Do NOT clobber a richer
         // summary that the mounted example already published (spec id, agent id,
         // readiness) for the same example + target — otherwise fast-settling local
@@ -639,7 +956,8 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
             exampleId: selectedExample,
             agentName: selectedExample,
             location: runtimeTarget,
-            baseUrl,
+            baseUrl: isSandboxOnlyExample ? '' : agentApiBaseUrl,
+            sandboxBaseUrl: isSandboxOnlyExample ? jupyterSandboxBaseUrl : undefined,
             status: isChangingExample ? 'switching' : 'selected',
         });
     }, [selectedExample, runtimeTarget, isChangingExample, serviceManager]);
@@ -686,7 +1004,7 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                         justifyContent: 'space-between',
                         gap: 3,
                         height: '60px',
-                        bg: 'canvas.subtle',
+                        bg: 'canvas.default',
                         borderBottom: '1px solid',
                         borderColor: 'border.default',
                     }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { as: "button", onClick: () => void onExampleChange('HomeExample'), title: "Home", "aria-label": "Go to examples home", sx: {
@@ -705,7 +1023,7 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                                         px: 2,
                                         py: '6px',
                                         fontSize: 1,
-                                        fontFamily: 'mono',
+                                        fontFamily: 'inherit',
                                         border: '1px solid',
                                         borderColor: 'border.default',
                                         borderRadius: 2,
@@ -715,7 +1033,7 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                                         minWidth: '250px',
                                         outline: 'none',
                                         '&:focus-visible': {
-                                            boxShadow: '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))',
+                                            boxShadow: '0 0 0 2px var(--bgColor-accent-muted, rgba(26,188,156,0.3))',
                                         },
                                     }, children: (() => {
                                         const home = availableExamples.find(e => e.id === 'HomeExample');
@@ -798,23 +1116,18 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                                             }
                                         }
                                         return _jsx(_Fragment, { children: nodes });
-                                    })() }), _jsxs(Box, { as: "select", value: runtimeTarget, onChange: (e) => void onRuntimeTargetChange(e.target.value), disabled: isChangingExample, "aria-label": "Runtime target", title: "Runtime target", sx: {
-                                        px: 2,
-                                        py: '6px',
-                                        fontSize: 1,
-                                        fontFamily: 'mono',
-                                        border: '1px solid',
-                                        borderColor: 'border.default',
-                                        borderRadius: 2,
-                                        bg: 'canvas.default',
-                                        color: 'fg.default',
-                                        cursor: isChangingExample ? 'not-allowed' : 'pointer',
-                                        minWidth: '120px',
-                                        outline: 'none',
-                                        '&:focus-visible': {
-                                            boxShadow: '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))',
-                                        },
-                                    }, children: [_jsx("option", { value: "local", children: "Local" }), _jsx("option", { value: "cloud", children: "Cloud" })] }), _jsx(AgentSummary, { summary: agentSummary }), 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: () => {
+                                    })() }), _jsx(Box, { "aria-label": "Runtime target", title: "Runtime target", sx: {
+                                        minWidth: '160px',
+                                        opacity: isHome || isChangingExample ? 0.6 : 1,
+                                    }, children: _jsxs(SegmentedControl, { "aria-label": "Runtime target", fullWidth: true, children: [_jsx(SegmentedControl.Button, { selected: runtimeTarget === 'local', disabled: isHome, onClick: () => {
+                                                    if (!isHome && !isChangingExample) {
+                                                        void onRuntimeTargetChange('local');
+                                                    }
+                                                }, children: "Local" }), _jsx(SegmentedControl.Button, { selected: runtimeTarget === 'cloud', disabled: isHome, onClick: () => {
+                                                    if (!isHome && !isChangingExample) {
+                                                        void onRuntimeTargetChange('cloud');
+                                                    }
+                                                }, children: "Cloud" })] }) }), !isHome && _jsx(AgentSummary, { summary: agentSummary }), isChangingExample && (_jsx(Box, { as: "span", sx: { color: 'fg.muted', fontSize: 0 }, children: "Loading\u2026" }))] }), _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: {
@@ -827,7 +1140,7 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                             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(ExampleErrorBoundary, { children: _jsx(ExampleWrapper, { children: _jsx(ExampleComponent, { ...exampleProps }, `${selectedExample}:${runtimeTarget}`) }, `${selectedExample}:${runtimeTarget}`) }, `${selectedExample}:${runtimeTarget}`)) : null })] }) }));
+                        }, 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(ExampleErrorBoundary, { children: _jsx(ExampleWrapper, { children: _jsx(ExampleComponent, { ...exampleProps }, `${selectedExample}:${runtimeTarget}`) }, `${selectedExample}:${runtimeTarget}`) }, `${selectedExample}:${runtimeTarget}`)) : null }), _jsx(SlidingPanel, { isOpen: Boolean(topNotice), onDismiss: onDismissTopNotice, position: "north", variant: topNotice?.tone ?? 'info', durationMs: topNotice?.durationMs ?? 0, fullWidth: true, offset: 60, zIndex: 160, message: topNotice?.message || '', details: topNotice?.details })] }) }));
 };
 // Mount the app - check route to determine which app to render
 const root = document.getElementById('root');

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

@@ -5,7 +5,24 @@ export interface AgentSummary {
     agentId?: string;
     specId?: string;
     location: AgentSummaryLocation;
+    /**
+     * Base URL of the agent-runtimes API server. Hosts both the agent status
+     * endpoint (`/api/v1/runtime/status`) and the code sandbox status endpoint
+     * (`/api/v1/agents/sandbox/status`).
+     */
     baseUrl: string;
+    /**
+     * Base URL of the code sandbox (Jupyter for local runs). Shown for context;
+     * the sandbox status itself is reported by the agent-runtimes server.
+     */
+    sandboxBaseUrl?: string;
+    runtimeEnvironment?: {
+        environmentName?: string;
+        environmentTitle?: string;
+        cpu?: string;
+        memory?: string;
+        gpu?: string;
+    };
     status?: string;
     isReady?: boolean;
     error?: string;

package/lib/examples/utils/themedProvider.js

@@ -1,5 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DatalayerThemeProvider, themeConfigs, } from '@datalayer/primer-addons';
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Theme-aware wrappers for example components.
+ *
+ * These are drop-in replacements for `DatalayerThemeProvider` and
+ * `JupyterReactTheme` that automatically read theme / color-mode
+ * from the shared `useExampleThemeStore`.
+ *
+ * Usage: replace
+ *   import { DatalayerThemeProvider } from '@datalayer/primer-addons';
+ * with
+ *   import { ThemedProvider } from './stores/themedProvider';
+ *
+ * and swap `<DatalayerThemeProvider>` → `<ThemedProvider>`.
+ */
+import { useEffect } from 'react';
+import { DatalayerThemeProvider, themeConfigs, useThemeStore as usePrimerThemeStore, } from '@datalayer/primer-addons';
 import { JupyterReactTheme } from '@datalayer/jupyter-react';
 import { useExampleThemeStore } from './themeStore';
 /**
@@ -11,6 +30,13 @@ import { useExampleThemeStore } from './themeStore';
 export const ThemedProvider = ({ children, ...rest }) => {
     const { colorMode, theme: themeVariant } = useExampleThemeStore();
     const cfg = themeConfigs[themeVariant];
+    // <Chat> and other components read the shared primer-addons singleton
+    // `useThemeStore` (key 'datalayer-theme', which defaults to matrix/dark),
+    // not the examples' `useExampleThemeStore`. Mirror the selected theme into
+    // the singleton so the chat main view follows the picker.
+    useEffect(() => {
+        usePrimerThemeStore.setState({ theme: themeVariant, colorMode });
+    }, [themeVariant, colorMode]);
     return (_jsx(DatalayerThemeProvider, { colorMode: rest.colorMode ?? colorMode, theme: rest.theme ?? cfg.primerTheme, themeStyles: rest.themeStyles ?? cfg.themeStyles, ...rest, children: children }));
 };
 /**
@@ -50,5 +76,9 @@ export const ThemedJupyterProvider = ({ children, useJupyterReactTheme = true })
     // Extract the canvas background from the theme's CSS-var overrides.
     const modeStyles = resolvedMode === 'dark' ? cfg.themeStyles.dark : cfg.themeStyles.light;
     const backgroundColor = modeStyles['--bgColor-default'];
-    return (_jsx(ThemedProvider, { children: useJupyterReactTheme ? (_jsx(JupyterReactTheme, { colormode: colorMode, backgroundColor: backgroundColor, children: children })) : (children) }));
+    return (_jsx(ThemedProvider, { children: useJupyterReactTheme ? (
+        // `ThemedProvider` (DatalayerThemeProvider) already applies Primer
+        // BaseStyles with the branded theme font. Disable the inner BaseStyles
+        // so Jupyter examples inherit that font instead of Primer's default.
+        _jsx(JupyterReactTheme, { colormode: colorMode, backgroundColor: backgroundColor, useBaseStyles: false, children: children })) : (children) }));
 };