@datalayer/agent-runtimes 1.0.19 → 1.0.21

package/README.md

@@ -171,6 +171,13 @@ pip install -e ".[chat]"       # chat-related extras
 pip install -e ".[docs]"       # docs build dependencies
 ```
 
+For deterministic installs in CI (and to avoid resolver backtracking), use the
+version constraints file:
+
+```bash
+pip install -c constraints/py313.txt -e .
+```
+
 ### Run
 
 ```bash
@@ -262,10 +269,11 @@ make examples:prod DATALAYER_URL=https://prod2.datalayer.run
 If you are developing against a local Plane (`plane local`), use:
 
 ```bash
-make examples:proxy
+make example-local
 ```
 
-This points each `DATALAYER_*_URL` at the matching localhost port exposed by
+This points each `DATALAYER_*_URL` (and its `VITE_*` frontend counterpart, so
+both http and ws traffic stay local) at the matching localhost port exposed by
 `plane local` (see `services/plane/datalayer_plane/sbin/local.sh`):
 
 | Variable                       | Default port                  |
@@ -286,7 +294,7 @@ This points each `DATALAYER_*_URL` at the matching localhost port exposed by
 Override any port on the command line, e.g.:
 
 ```bash
-PLANE_LOCAL_IAM_URL=http://localhost:9701 make examples:proxy
+PLANE_LOCAL_IAM_URL=http://localhost:9701 make example-local
 ```
 
 On the main page, you’ll find an example gallery (cards) that break things down into practical building blocks:

package/lib/AgentNode.js

@@ -3,13 +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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { DatalayerLogoText, DatalayerThemeProvider, getLogoColors, setupPrimerPortals, themeConfigs, } from '@datalayer/primer-addons';
-import { AppearanceControlsWithStore } from '@datalayer/primer-addons/lib/components/appearance';
-import { ActionList, ActionMenu, Avatar, Box, Button, FormControl, Heading, Label, PageHeader, PageLayout, Text, } from '@primer/react';
-import { CommentIcon, HomeIcon, KeyAsteriskIcon, LockIcon, MoonIcon, PeopleIcon, PersonIcon, GearIcon, RocketIcon, SignOutIcon, } from '@primer/octicons-react';
+import { AiAgentIcon, AlienIcon } from '@datalayer/icons-react';
+import { DatalayerLogoText, DatalayerThemeProvider, getColorPalette, getLogoColors, setupPrimerPortals, themeConfigs, } from '@datalayer/primer-addons';
+import { AppearanceMenu } from '@datalayer/primer-addons/lib/components/appearance';
+import { ActionList, ActionMenu, Box, Button, Heading, Label, PageHeader, PageLayout, Text, } from '@primer/react';
+import { CommentIcon, HomeIcon, KeyAsteriskIcon, LockIcon, MoonIcon, PeopleIcon, PersonIcon, GearIcon, SignOutIcon, } from '@primer/octicons-react';
 import { SignInSimple } from '@datalayer/core/lib/views/iam';
+import { UserAvatar } from '@datalayer/core/lib/components/avatars';
 import { UserBadge } from '@datalayer/core/lib/views/profile';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { useIAMStore } from '@datalayer/core/lib/state';
@@ -141,21 +143,33 @@ const DEFAULT_CONFIGURATION = {
  * but assembled exclusively from core building blocks so agent-runtimes does
  * not pull in the `ui` package.
  */
-function AgentNodeProfileView({ token, onTokenExpired, }) {
+function AgentNodeProfileView({ token, onTokenExpired, avatarFallbackBackground, avatarFallbackForeground, }) {
     const user = useIAMStore(state => state.user);
+    const hasRealAvatar = (url) => {
+        if (!url) {
+            return false;
+        }
+        if (url.startsWith('https://www.gravatar.com/avatar')) {
+            return false;
+        }
+        return true;
+    };
     const display = useMemo(() => {
         if (!user)
             return null;
         const u = user;
-        const displayName = [u.first_name, u.last_name].filter(Boolean).join(' ').trim() ||
-            u.display_name ||
-            u.name ||
-            u.handle ||
-            u.email ||
-            'Datalayer user';
+        const displayName = u.display_name ||
+            u.displayName ||
+            u.profile?.display_name ||
+            u.profile?.displayName ||
+            u.full_name ||
+            u.fullName ||
+            [u.first_name, u.last_name].filter(Boolean).join(' ').trim() ||
+            '';
         const username = u.username || u.handle || (u.email ? String(u.email).split('@')[0] : '');
+        const headingDisplayName = displayName || username || u.email || 'Datalayer user';
         const initials = u.initials ||
-            String(displayName)
+            String(headingDisplayName)
                 .split(/\s+/)
                 .filter(Boolean)
                 .slice(0, 2)
@@ -165,6 +179,7 @@ function AgentNodeProfileView({ token, onTokenExpired, }) {
             id: String(u.id || u.uid || ''),
             username,
             displayName,
+            headingDisplayName,
             initials,
             origin: String(u.origin || 'datalayer'),
             handle: u.handle ? `@${u.handle}` : '',
@@ -181,22 +196,42 @@ function AgentNodeProfileView({ token, onTokenExpired, }) {
             display: 'flex',
             flexDirection: 'column',
             gap: 3,
-        }, children: !token ? (_jsx(Text, { sx: { color: 'fg.muted' }, children: "Sign in to view your profile." })) : !display ? (_jsx(Text, { sx: { color: 'fg.muted' }, children: "Loading profile\u2026" })) : (_jsxs(_Fragment, { children: [_jsx(Heading, { sx: { fontSize: 2, mb: 2 }, children: "Identity" }), _jsx(Box, { sx: { textAlign: 'left' }, children: _jsx(UserBadge, { token: token, variant: "small", onTokenExpired: onTokenExpired }) }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 3 }, children: [display.avatarUrl ? (_jsx(Avatar, { src: display.avatarUrl, size: 72, alt: display.displayName })) : (_jsx(Box, { sx: {
-                                width: 72,
-                                height: 72,
-                                borderRadius: '50%',
-                                bg: 'canvas.subtle',
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                color: 'fg.muted',
-                            }, children: _jsx(PersonIcon, { size: 30 }) })), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Heading, { sx: { fontSize: 3, mb: 1 }, children: display.displayName }), display.handle && (_jsx(Text, { sx: { color: 'fg.muted' }, children: display.handle })), display.email && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: display.email }))] })] }), display.id && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(Label, { size: "large", variant: "secondary", children: display.id }) })), _jsxs(Box, { sx: {
+        }, children: !token ? (_jsx(Text, { sx: { color: 'fg.muted' }, children: "Sign in to view your profile." })) : !display ? (_jsx(Text, { sx: { color: 'fg.muted' }, children: "Loading profile\u2026" })) : (_jsxs(_Fragment, { children: [_jsx(Heading, { sx: { fontSize: 2, mb: 2 }, children: "Profile" }), _jsxs(Box, { sx: {
                         display: 'grid',
-                        gridTemplateColumns: '1fr 2fr',
-                        rowGap: 2,
-                        columnGap: 3,
-                        maxWidth: 560,
-                    }, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: "Username" }), _jsx(Text, { children: display.username || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Display name" }), _jsx(Text, { children: display.displayName || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Initials" }), _jsx(Text, { children: display.initials || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Origin" }), _jsx(Text, { children: display.origin || '-' })] }), display.roles.length > 0 && (_jsx(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: display.roles.map(role => (_jsx(Label, { size: "small", variant: "secondary", children: role }, role))) }))] })) }));
+                        gridTemplateColumns: [
+                            '1fr',
+                            null,
+                            'minmax(280px, 1fr) minmax(320px, 2fr)',
+                        ],
+                        gap: 4,
+                        alignItems: 'start',
+                    }, children: [_jsxs(Box, { sx: {
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                                borderRadius: 2,
+                                p: 3,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 3,
+                            }, children: [_jsx(Box, { sx: { textAlign: 'left' }, children: _jsx(UserBadge, { token: token, variant: "small", onTokenExpired: onTokenExpired }) }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 3 }, children: [hasRealAvatar(display.avatarUrl) ? (_jsx(UserAvatar, { avatarUrl: display.avatarUrl, size: 72, square: false })) : (_jsx(Box, { sx: {
+                                                width: 72,
+                                                height: 72,
+                                                borderRadius: '50%',
+                                                bg: avatarFallbackBackground || 'accent.subtle',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                '--datalayer-icon-fg': avatarFallbackForeground || 'accent.fg',
+                                            }, children: _jsx(AlienIcon, { size: 34, themed: true, colormode: true }) })), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Heading, { sx: { fontSize: 3, mb: 1 }, children: display.headingDisplayName }), display.handle && (_jsx(Text, { sx: { color: 'fg.muted' }, children: display.handle }))] })] }), display.id && (_jsx(Box, { children: _jsx(Label, { size: "large", variant: "secondary", children: display.id }) }))] }), _jsxs(Box, { sx: {
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                                borderRadius: 2,
+                                p: 3,
+                                display: 'grid',
+                                gridTemplateColumns: '1fr 2fr',
+                                rowGap: 2,
+                                columnGap: 3,
+                            }, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: "Username" }), _jsx(Text, { children: display.username || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Display name" }), _jsx(Text, { children: display.displayName || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Email" }), _jsx(Text, { children: display.email || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Initials" }), _jsx(Text, { children: display.initials || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Origin" }), _jsx(Text, { children: display.origin || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Roles" }), _jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: display.roles.length > 0 ? (display.roles.map(role => (_jsx(Label, { size: "small", variant: "secondary", children: role }, role)))) : (_jsx(Text, { children: "-" })) })] })] })] })) }));
 }
 export function AgentNode() {
     const { token, setAuth, clearAuth } = useSimpleAuthStore();
@@ -205,6 +240,8 @@ export function AgentNode() {
     const queryClient = useQueryClient();
     const iamUser = useIAMStore(state => state.user);
     const { colorMode, theme: themeVariant } = useAgentNodeThemeStore();
+    const setColorMode = useAgentNodeThemeStore(state => state.setColorMode);
+    const setTheme = useAgentNodeThemeStore(state => state.setTheme);
     const cfg = themeConfigs[themeVariant];
     const logoColors = getLogoColors(themeVariant, colorMode);
     const resolvedMode = colorMode === 'auto'
@@ -215,6 +252,7 @@ export function AgentNode() {
         : colorMode === 'dark'
             ? 'dark'
             : 'light';
+    const avatarPalette = getColorPalette(themeVariant, resolvedMode);
     const authGradient = cfg.cardGradient[resolvedMode];
     const [step, setStep] = useState('auth');
     const [selectedAgentId, setSelectedAgentId] = useState('default');
@@ -282,13 +320,21 @@ export function AgentNode() {
                 }
                 : undefined,
         };
-    }, [configuration.collaboration_document_uid, token, collaborationDocumentUser]);
+    }, [
+        configuration.collaboration_document_uid,
+        token,
+        collaborationDocumentUser,
+    ]);
     const [inferenceProvider, setInferenceProvider] = useState('datalayer');
     const [inferenceModels, setInferenceModels] = useState([]);
     const [inferenceDefaultModel, setInferenceDefaultModel] = useState(null);
     const [configurationLoaded, setConfigurationLoaded] = useState(false);
+    const [isActiveAgentRunning, setIsActiveAgentRunning] = useState(false);
     const chatRestoreAttemptRef = useRef('');
-    const hasActiveAgent = Boolean(String(configuration.active_agent_id || '').trim());
+    const hasActiveAgent = Boolean(String(configuration.active_agent_id || '').trim()) &&
+        isActiveAgentRunning;
+    const isSaasOnlyChat = configuration.chat_access_mode === 'saas_only' ||
+        configuration.deployment_target === 'aws';
     // ── Local sandbox runtime override for the ephemeral surfaces ─────────────
     // In the node-local webapp the agent's Jupyter sandbox is a LOCAL server, not
     // a Kubernetes pod resolvable by `pod_name`, so the ephemeral notebook and
@@ -437,7 +483,9 @@ export function AgentNode() {
         };
     }, [step, selectedAgentId, token]);
     const chatTitle = agentSpecInfo?.name || 'Agent Node Chat';
-    const chatDescription = agentSpecInfo?.welcomeMessage || agentSpecInfo?.description || 'Node-local chat';
+    const chatDescription = agentSpecInfo?.welcomeMessage ||
+        agentSpecInfo?.description ||
+        'Node-local chat';
     const chatSuggestions = agentSpecInfo?.suggestions && agentSpecInfo.suggestions.length > 0
         ? agentSpecInfo.suggestions.map(s => ({ title: s, message: s }))
         : undefined;
@@ -698,6 +746,11 @@ export function AgentNode() {
             setStep('auth');
         }
     }, [token, step]);
+    useEffect(() => {
+        if (!token || !String(configuration.active_agent_id || '').trim()) {
+            setIsActiveAgentRunning(false);
+        }
+    }, [token, configuration.active_agent_id]);
     useEffect(() => {
         if (!token || !configurationLoaded) {
             return;
@@ -733,20 +786,30 @@ export function AgentNode() {
                     const id = String(agent?.agent_id || agent?.id || '').trim();
                     return id === activeAgentId;
                 });
+                setIsActiveAgentRunning(running);
                 if (running) {
                     setSelectedAgentId(activeAgentId);
                     setConfiguration(prev => prev.mode === 'private' ? prev : { ...prev, mode: 'private' });
                     setStep('chat');
                 }
+                else if (selectedAgentId === activeAgentId) {
+                    setSelectedAgentId('default');
+                }
             }
             catch {
+                setIsActiveAgentRunning(false);
                 // Best-effort restore only.
             }
         })();
         return () => {
             cancelled = true;
         };
-    }, [token, configurationLoaded, configuration.active_agent_id]);
+    }, [
+        token,
+        configurationLoaded,
+        configuration.active_agent_id,
+        selectedAgentId,
+    ]);
     useEffect(() => {
         // If a persisted session is already authenticated on first load,
         // skip the auth screen and land on the agents gallery.
@@ -764,6 +827,11 @@ export function AgentNode() {
             setStep('gallery');
         }
     }, [step, hasActiveAgent]);
+    useEffect(() => {
+        if (step === 'chat' && isSaasOnlyChat) {
+            setStep('gallery');
+        }
+    }, [step, isSaasOnlyChat]);
     const handleSignIn = (newToken, handle) => {
         setAutoBootstrapDisabled(false);
         setDisableAutoBootstrap(false);
@@ -860,7 +928,7 @@ export function AgentNode() {
         if (nextStep === 'gallery')
             return true;
         if (nextStep === 'chat') {
-            return configuration.mode === 'private' && hasActiveAgent;
+            return (configuration.mode === 'private' && hasActiveAgent && !isSaasOnlyChat);
         }
         return true;
     };
@@ -888,7 +956,7 @@ export function AgentNode() {
                                             gap: 2,
                                             fontSize: 2,
                                             lineHeight: '22px',
-                                        }, children: [token && (_jsxs(_Fragment, { children: [_jsx(StepEntry, { entryStep: "chat", label: "Chat", leadingVisual: CommentIcon }), _jsx(StepEntry, { entryStep: "gallery", label: "Agents", leadingVisual: RocketIcon }), _jsx(StepEntry, { entryStep: "config", label: "Configuration", leadingVisual: GearIcon })] })), !token ? null : (_jsxs(_Fragment, { children: [_jsx(StepEntry, { entryStep: "profile", label: "Profile", leadingVisual: PersonIcon }), _jsx(Button, { size: "small", variant: "invisible", onClick: handleSignOut, leadingVisual: SignOutIcon, sx: { color: 'fg.default' }, children: "Sign out" })] })), _jsx(AppearanceControlsWithStore, { useStore: useAgentNodeThemeStore })] }) })] }) }), _jsxs(PageLayout.Content, { children: [_jsx(Box, { "aria-live": "polite", sx: {
+                                        }, children: [token && (_jsxs(_Fragment, { children: [_jsx(StepEntry, { entryStep: "chat", label: "Chat", leadingVisual: CommentIcon }), _jsx(StepEntry, { entryStep: "gallery", label: "Agents", leadingVisual: AiAgentIcon }), _jsx(StepEntry, { entryStep: "config", label: "Configuration", leadingVisual: GearIcon })] })), !token ? null : (_jsxs(_Fragment, { children: [_jsx(StepEntry, { entryStep: "profile", label: "Profile", leadingVisual: PersonIcon }), _jsx(Button, { size: "small", variant: "invisible", onClick: handleSignOut, leadingVisual: SignOutIcon, sx: { color: 'fg.default' }, children: "Sign out" })] })), _jsx(AppearanceMenu, { colorMode: colorMode, themeVariant: themeVariant, onColorModeChange: setColorMode, onThemeChange: nextTheme => setTheme(nextTheme, false), shape: "circle" })] }) })] }) }), _jsxs(PageLayout.Content, { children: [_jsx(Box, { "aria-live": "polite", sx: {
                                     position: 'fixed',
                                     top: 0,
                                     left: 0,
@@ -975,7 +1043,12 @@ export function AgentNode() {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     gap: 3,
-                                                }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Mode" }), _jsx(Box, { sx: {
+                                                }, children: [_jsxs(Box, { sx: {
+                                                            border: '1px solid',
+                                                            borderColor: 'border.default',
+                                                            borderRadius: 2,
+                                                            p: 3,
+                                                        }, children: [_jsx(Heading, { sx: { fontSize: 2, m: 0, mb: 2 }, children: "Mode" }), _jsx(Box, { sx: {
                                                                     display: 'grid',
                                                                     gridTemplateColumns: 'repeat(3, 1fr)',
                                                                     gap: 3,
@@ -1015,7 +1088,12 @@ export function AgentNode() {
                                                                                         ? cfg.brandColor
                                                                                         : 'fg.default',
                                                                                 }, children: [_jsx(Icon, { size: 20 }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: card.name })] }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: card.description })] }, card.mode));
-                                                                }) })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Inference" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, mb: 2 }, children: "Used inference provider for newly launched agent sessions." }), _jsxs(Box, { sx: {
+                                                                }) })] }), _jsxs(Box, { sx: {
+                                                            border: '1px solid',
+                                                            borderColor: 'border.default',
+                                                            borderRadius: 2,
+                                                            p: 3,
+                                                        }, children: [_jsx(Heading, { sx: { fontSize: 2, m: 0, mb: 2 }, children: "Inference" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, mb: 2 }, children: "Used inference provider for newly launched agent sessions." }), _jsxs(Box, { sx: {
                                                                     display: 'flex',
                                                                     gap: 2,
                                                                     flexWrap: 'wrap',
@@ -1033,14 +1111,30 @@ export function AgentNode() {
                                                                     display: 'flex',
                                                                     flexDirection: 'column',
                                                                     gap: 1,
-                                                                }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Bedrock Anthropic model" }), inferenceModels.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No model list available." })) : (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { children: inferenceDefaultModel || inferenceModels[0] }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsx(ActionList, { selectionVariant: "single", children: inferenceModels.map(model => (_jsx(ActionList.Item, { selected: inferenceDefaultModel === model, inactiveText: "Selection is locked", children: model }, model))) }) })] }))] }))] }), iamUser ? (_jsx(BillingEntitySelect, { value: configuration.billing_entity_uid || '', onChange: handleBillingEntityChange, onSelectedAccountChange: handleSelectedAccountChange, onAccountsResolved: handleAccountsResolved })) : (_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Run this agent under" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Loading billing entitys..." })] }))] }), _jsxs(Box, { sx: {
+                                                                }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Bedrock Anthropic model" }), inferenceModels.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No model list available." })) : (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { children: inferenceDefaultModel || inferenceModels[0] }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsx(ActionList, { selectionVariant: "single", children: inferenceModels.map(model => (_jsx(ActionList.Item, { selected: inferenceDefaultModel === model, inactiveText: "Selection is locked", children: model }, model))) }) })] }))] }))] }), iamUser ? (_jsxs(Box, { sx: {
+                                                            border: '1px solid',
+                                                            borderColor: 'border.default',
+                                                            borderRadius: 2,
+                                                            p: 3,
+                                                        }, children: [_jsx(Heading, { sx: { fontSize: 2, m: 0, mb: 2 }, children: "Billing Entity" }), _jsx(BillingEntitySelect, { value: configuration.billing_entity_uid || '', onChange: handleBillingEntityChange, onSelectedAccountChange: handleSelectedAccountChange, onAccountsResolved: handleAccountsResolved })] })) : (_jsxs(Box, { sx: {
+                                                            border: '1px solid',
+                                                            borderColor: 'border.default',
+                                                            borderRadius: 2,
+                                                            p: 3,
+                                                        }, children: [_jsx(Heading, { sx: { fontSize: 2, m: 0, mb: 2 }, children: "Billing Entity" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Loading billing entitys..." })] }))] }), _jsx(Box, { sx: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     gap: 2,
-                                                }, children: [_jsx(Heading, { sx: { fontSize: 2, m: 0 }, children: "Share" }), _jsx(ShareAccessComponent, { isOpen: true, displayMode: "inline", requestUrl: `${AGENT_RUNTIMES_BASE_URL}/api/v1/agent-node/sharing`, resourceLabel: "Agent Node", resourceName: "this Agent Node", onClose: handleSharingInlineClose })] })] }), error && _jsx(Text, { sx: { color: 'danger.fg' }, children: error }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Button, { variant: "primary", onClick: saveConfiguration, disabled: isSaving, children: isSaving ? 'Saving...' : 'Save' }) })] })), step === 'profile' && (_jsx(AgentNodeProfileView, { token: token, onTokenExpired: handleSignOut })), step === 'gallery' && (_jsx(AgentNodeGallery, { baseUrl: AGENT_RUNTIMES_BASE_URL, token: token, activeAgentId: configuration.active_agent_id, onLaunchError: message => {
+                                                }, children: _jsxs(Box, { sx: {
+                                                        border: '1px solid',
+                                                        borderColor: 'border.default',
+                                                        borderRadius: 2,
+                                                        p: 3,
+                                                    }, children: [_jsx(Heading, { sx: { fontSize: 2, m: 0, mb: 2 }, children: "Share" }), _jsx(ShareAccessComponent, { isOpen: true, displayMode: "inline", requestUrl: `${AGENT_RUNTIMES_BASE_URL}/api/v1/agent-node/sharing`, resourceLabel: "Agent Node", resourceName: "this Agent Node", onClose: handleSharingInlineClose })] }) })] }), error && _jsx(Text, { sx: { color: 'danger.fg' }, children: error }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Button, { variant: "primary", onClick: saveConfiguration, disabled: isSaving, children: isSaving ? 'Saving...' : 'Save' }) })] })), step === 'profile' && (_jsx(AgentNodeProfileView, { token: token, onTokenExpired: handleSignOut, avatarFallbackBackground: avatarPalette.bgAlt, avatarFallbackForeground: avatarPalette.primary })), step === 'gallery' && (_jsx(AgentNodeGallery, { baseUrl: AGENT_RUNTIMES_BASE_URL, token: token, activeAgentId: configuration.active_agent_id, onLaunchError: message => {
                                     showBanner('error', message);
                                 }, onLaunched: agentId => {
                                     setSelectedAgentId(agentId);
+                                    setIsActiveAgentRunning(true);
                                     const nextConfiguration = {
                                         ...configuration,
                                         active_agent_id: agentId,
@@ -1058,9 +1152,16 @@ export function AgentNode() {
                                     }).catch(() => {
                                         // Best-effort persistence; local state already switched.
                                     });
-                                    setStep('chat');
+                                    if (isSaasOnlyChat) {
+                                        showBanner('info', 'This node is configured for SaaS chat. Open Agent Nodes in Datalayer to chat with it.');
+                                        setStep('gallery');
+                                    }
+                                    else {
+                                        setStep('chat');
+                                    }
                                 }, onTerminated: () => {
                                     setSelectedAgentId('default');
+                                    setIsActiveAgentRunning(false);
                                     setConfiguration(prev => ({
                                         ...prev,
                                         active_agent_id: undefined,
@@ -1071,6 +1172,6 @@ export function AgentNode() {
                                     borderColor: 'border.default',
                                     borderRadius: 2,
                                     overflow: 'hidden',
-                                }, children: _jsx(Chat, { protocol: "ag-ui", baseUrl: AGENT_RUNTIMES_BASE_URL, agentId: selectedAgentId, title: chatTitle, placeholder: "Send a message...", description: chatDescription, suggestions: chatSuggestions, submitOnSuggestionClick: true, showHeader: true, height: '70vh', showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, enableEphemeralNotebook: true, enableEphemeralDocument: true, initialEphemeralSurfaceMode: "notebook", runtimeId: selectedAgentId, ephemeralRuntimeOverride: sandboxRuntimeOverride, kernelEnvironmentName: sandboxEnvironmentName, ephemeralNotebookCollaborationProvider: ephemeralNotebookCollaborationProvider, ephemeralNotebookCollaborationDocumentId: ephemeralCollaborationDocumentId, ephemeralDocumentCollaboration: ephemeralDocumentCollaboration, historyEndpoint: `${AGENT_RUNTIMES_BASE_URL}/api/v1/history` }) }))] })] }) }) }));
+                                }, children: isSaasOnlyChat ? (_jsxs(Box, { sx: { p: 4 }, children: [_jsx(Heading, { sx: { fontSize: 2, mb: 2 }, children: "Chat From SaaS" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "This Agent Node deployment is configured for SaaS-only chat. Use the Datalayer Agent Nodes view to open chat sessions over the runtimes tunnel." })] })) : (_jsx(Chat, { protocol: "ag-ui", baseUrl: AGENT_RUNTIMES_BASE_URL, agentId: selectedAgentId, title: chatTitle, placeholder: "Send a message...", description: chatDescription, suggestions: chatSuggestions, submitOnSuggestionClick: true, showHeader: true, height: '70vh', showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, enableEphemeralNotebook: true, enableEphemeralDocument: true, initialEphemeralSurfaceMode: "notebook", runtimeId: selectedAgentId, ephemeralRuntimeOverride: sandboxRuntimeOverride, kernelEnvironmentName: sandboxEnvironmentName, themeVariant: themeVariant, colorMode: colorMode, ephemeralNotebookCollaborationProvider: ephemeralNotebookCollaborationProvider, ephemeralNotebookCollaborationDocumentId: ephemeralCollaborationDocumentId, ephemeralDocumentCollaboration: ephemeralDocumentCollaboration, historyEndpoint: `${AGENT_RUNTIMES_BASE_URL}/api/v1/history` })) }))] })] }) }) }));
 }
 export default AgentNode;

package/lib/App.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import { useJupyter, JupyterReactTheme } from '@datalayer/jupyter-react';
-import { JupyterCellExample } from './examples/CellSimpleExample';
+import { CellExample } from './examples/CellExample';
 import { JupyterNotebookExample } from './examples/NotebookExample';
 import './App.css';
 export function App() {
@@ -13,6 +13,6 @@ export function App() {
         jupyterServerToken: '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6',
         startDefaultKernel: true,
     });
-    return (_jsxs(JupyterReactTheme, { children: [serviceManager && _jsx(JupyterCellExample, { serviceManager: serviceManager }), serviceManager && (_jsx(JupyterNotebookExample, { serviceManager: serviceManager }))] }));
+    return (_jsxs(JupyterReactTheme, { children: [serviceManager && _jsx(CellExample, { serviceManager: serviceManager }), serviceManager && (_jsx(JupyterNotebookExample, { serviceManager: serviceManager }))] }));
 }
 export default App;