@datalayer/agent-runtimes 1.0.28 → 1.3.10

package/lib/AgentDocument.js

@@ -21,31 +21,21 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import '@datalayer/jupyter-react/lib/css/PrismCss';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { $getRoot, $createParagraphNode } from 'lexical';
-import { LexicalComposer } from '@lexical/react/LexicalComposer';
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { LexicalExtensionComposer } from '@lexical/react/LexicalExtensionComposer';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
-import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
-import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
-import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
-import { TRANSFORMERS } from '@lexical/markdown';
-import { registerCodeHighlighting } from '@lexical/code';
-import { ListPlugin } from '@lexical/react/LexicalListPlugin';
-import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
-import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { Text, Spinner } from '@primer/react';
 import { AlertIcon } from '@primer/octicons-react';
 import { AppearanceControlsWithStore, Box, createThemeStore, DatalayerThemeProvider, setupPrimerPortals, themeConfigs, useSystemColorMode, } from '@datalayer/primer-addons';
 import { JupyterReactTheme, disposeServiceManager, loadJupyterConfig, getJupyterServerUrl, getJupyterServerToken, setJupyterServerUrl, setJupyterServerToken, useJupyter, } from '@datalayer/jupyter-react';
-import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
+import { ComponentPickerMenuPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, TableCellResizerPlugin, } from '@datalayer/jupyter-lexical';
 import { ServiceManager, ServerConnection } from '@jupyterlab/services';
 import { Chat } from './chat';
 import { ChatInlinePlugin } from './lexical/ChatInlinePlugin';
 import { useChatInlineToolbarItems } from './lexical/useChatInlineToolbarItems';
 import { useLexicalTools } from './tools/adapters/agent-runtimes/lexicalHooks';
-import { editorConfig } from './examples/lexical/editorConfig';
+import { editorExtension } from './examples/lexical/editorConfig';
 import { DEFAULT_MODEL } from './specs';
 import '@datalayer/jupyter-lexical/style/index.css';
 import './examples/lexical/lexical-theme.css';
@@ -76,7 +66,7 @@ async function fetchStartupKernelId() {
         }
         const payload = await resp.json();
         const sandbox = payload?.sandbox;
-        if (sandbox?.variant !== 'jupyter') {
+        if (sandbox?.variant !== 'jupyter-server') {
             return undefined;
         }
         const kernelId = sandbox?.kernel_id;
@@ -178,13 +168,6 @@ function LoadContentPlugin({ content }) {
     }, [content, editor]);
     return null;
 }
-function CodeHighlightPlugin() {
-    const [editor] = useLexicalComposerContext();
-    useEffect(() => {
-        return registerCodeHighlighting(editor);
-    }, [editor]);
-    return null;
-}
 function KernelPluginsInner({ serviceManager, kernelId, onKernelReady, }) {
     const { defaultKernel } = useJupyter({
         serviceManager,
@@ -231,7 +214,7 @@ const LexicalPanel = React.memo(function LexicalPanel({ serviceManager, kernelId
             overflow: 'auto',
             borderRight: '1px solid',
             borderColor: 'border.default',
-        }, children: _jsx(Box, { sx: { padding: 3 }, children: _jsxs(LexicalConfigProvider, { lexicalId: DOCUMENT_ID, serviceManager: serviceManager, children: [_jsx(LexicalToolsPlugin, { onToolsReady: onToolsReady }), _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, {}), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { colormode: colormode, backgroundColor: backgroundColor, children: _jsx(KernelPluginsInner, { serviceManager: serviceManager, kernelId: kernelId, onKernelReady: onKernelReady }) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
+        }, children: _jsx(Box, { sx: { padding: 3 }, children: _jsxs(LexicalConfigProvider, { lexicalId: DOCUMENT_ID, serviceManager: serviceManager, children: [_jsx(LexicalToolsPlugin, { onToolsReady: onToolsReady }), _jsx(LexicalExtensionComposer, { extension: editorExtension, contentEditable: null, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(LoadContentPlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterReactTheme, { colormode: colormode, backgroundColor: backgroundColor, children: _jsx(KernelPluginsInner, { serviceManager: serviceManager, kernelId: kernelId, onKernelReady: onKernelReady }) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
                                         type: 'ag-ui',
                                         endpoint: agUiEndpoint,
                                     }, isOpen: isAiOpen, onClose: closeAi, pendingPrompt: pendingPrompt, onPendingPromptConsumed: clearPendingPrompt })] }) })] }) }) }));

package/lib/AgentNode.d.ts

@@ -1,3 +1,3 @@
 import '../style/primer-primitives.css';
-export declare function AgentNode(): import("react/jsx-runtime").JSX.Element;
+export declare function AgentNode(): import("react").JSX.Element;
 export default AgentNode;

package/lib/AgentNode.js

@@ -3,17 +3,18 @@ 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, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 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 { ActionList, ActionMenu, Box, Button, Heading, Label, PageHeader, PageLayout, Spinner, 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 * as coreState from '@datalayer/core/lib/state';
 import { useIAMStore } from '@datalayer/core/lib/state';
 import { BillingEntitySelect, } from '@datalayer/core/lib/components/billing';
 import { ShareAccessComponent } from '@datalayer/core/lib/components/sharing';
@@ -50,11 +51,25 @@ const LOCAL_JUPYTER_SANDBOX = (() => {
     }
 })();
 const DEFAULT_DATALAYER_SERVICE_URL = 'https://prod1.datalayer.run';
+/** The protocol a node reports for an agent, as the chat understands it. */
+const normalizeChatProtocol = (value) => value === 'vercel-ai' || value === 'vercel-ai-jupyter'
+    ? 'vercel-ai'
+    : 'ag-ui';
 /**
- * localStorage key recording that the user explicitly signed out. When set, the
- * UI must not silently re-authenticate from the env-supplied DATALAYER_API_KEY
- * via /auth/bootstrap, so the sign-out survives a page refresh.
+ * Whether a JWT's `exp` is in the past. A token that does not parse is not
+ * called expired — that is IAM's verdict to give, and it gives it as a 401.
  */
+const isJwtExpired = (token) => {
+    try {
+        const payload = token.split('.')[1];
+        const json = atob(payload.replace(/-/g, '+').replace(/_/g, '/'));
+        const exp = Number(JSON.parse(json)?.exp);
+        return Number.isFinite(exp) && exp * 1000 < Date.now();
+    }
+    catch {
+        return false;
+    }
+};
 const AUTO_BOOTSTRAP_DISABLED_KEY = 'agent-node-auto-bootstrap-disabled';
 /** Persist (or clear) the signed-out intent in localStorage. */
 function setAutoBootstrapDisabled(disabled) {
@@ -294,9 +309,12 @@ export function AgentNode() {
     // ── Ephemeral document RTC (shared Lexical/Loro room with the SaaS UI) ────
     // The node provisions a spacer *lexical* room (distinct from the notebook
     // room) on registration and stores its uid as `collaboration_document_uid`.
-    // Both peers join that Loro room over the spacer lexical WebSocket. The token
-    // is embedded in the ws URL (createWebsocketProvider forwards it as a query
-    // param) so the spacer authenticates the connection.
+    // Both peers join that Loro room over the spacer lexical WebSocket.
+    //
+    // The URL is the bare endpoint: the Loro provider composes
+    // `${websocketUrl}/${roomId}` itself, so a query string here would land
+    // *between* the path and the room (`…/ws?token=…/ROOM`) and match no route —
+    // which is what this used to do. The spacer reads no token on this socket.
     const collaborationDocumentUser = useIAMStore(state => state.user);
     const ephemeralDocumentCollaboration = useMemo(() => {
         const documentRoomId = configuration.collaboration_document_uid;
@@ -305,7 +323,7 @@ export function AgentNode() {
         }
         const spacerUrl = resolveSpacerUrl();
         const wsSpacer = String(spacerUrl).replace(/^http/, 'ws');
-        const websocketUrl = `${wsSpacer}/api/spacer/v1/lexical/ws?token=${encodeURIComponent(token)}`;
+        const websocketUrl = `${wsSpacer}/api/spacer/v1/lexical/ws`;
         const u = collaborationDocumentUser;
         return {
             websocketUrl,
@@ -330,6 +348,10 @@ export function AgentNode() {
     const [inferenceDefaultModel, setInferenceDefaultModel] = useState(null);
     const [configurationLoaded, setConfigurationLoaded] = useState(false);
     const [isActiveAgentRunning, setIsActiveAgentRunning] = useState(false);
+    // The protocol the active agent actually speaks, as reported by the node.
+    // The chat must speak the same one; a node hosts AG-UI and Vercel AI
+    // agents alike.
+    const [activeAgentProtocol, setActiveAgentProtocol] = useState('ag-ui');
     const chatRestoreAttemptRef = useRef('');
     const hasActiveAgent = Boolean(String(configuration.active_agent_id || '').trim()) &&
         isActiveAgentRunning;
@@ -337,7 +359,7 @@ export function AgentNode() {
         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
+    // a Kubernetes pod resolvable by `runtime_name`, so the ephemeral notebook and
     // document surfaces cannot bind their kernel through the runtimes pod lookup.
     // Instead we read the live sandbox Jupyter endpoint from `/health/startup`
     // and pass it as an explicit override so the surfaces connect a service
@@ -370,7 +392,7 @@ export function AgentNode() {
                 return {
                     baseUrl: LOCAL_JUPYTER_SANDBOX.baseUrl,
                     token: LOCAL_JUPYTER_SANDBOX.token || undefined,
-                    podName: 'agent-node-sandbox',
+                    runtimeName: 'agent-node-sandbox',
                 };
             });
             return;
@@ -392,7 +414,7 @@ export function AgentNode() {
                 const payload = await resp.json();
                 const sandbox = payload?.sandbox;
                 const jupyterUrl = String(sandbox?.jupyter_url || '').trim();
-                if (sandbox?.variant !== 'jupyter' || !jupyterUrl) {
+                if (sandbox?.variant !== 'jupyter-server' || !jupyterUrl) {
                     return;
                 }
                 const jupyterToken = String(sandbox?.jupyter_token || '').trim();
@@ -411,7 +433,7 @@ export function AgentNode() {
                     return {
                         baseUrl: jupyterUrl,
                         token: jupyterToken || undefined,
-                        podName: 'agent-node-sandbox',
+                        runtimeName: 'agent-node-sandbox',
                     };
                 });
                 // Endpoint resolved — stop the fast poll.
@@ -467,8 +489,31 @@ export function AgentNode() {
                         : typeof spec.welcome_message === 'string'
                             ? spec.welcome_message
                             : undefined,
+                    /*
+                     * Either shape, because this reads a spec off a running node.
+                     *
+                     * A node may have been launched from an older catalogue, where a
+                     * suggestion was a bare string. Filtering to strings — which is what
+                     * this did — silently emptied the list the moment the catalogue
+                     * started sending the mapping form, and an empty state with no
+                     * openers looks like an agent with nothing to offer.
+                     */
                     suggestions: Array.isArray(spec.suggestions)
-                        ? spec.suggestions.filter((s) => typeof s === 'string')
+                        ? spec.suggestions
+                            .map(item => {
+                            if (typeof item === 'string') {
+                                return { text: item };
+                            }
+                            const entry = item;
+                            return {
+                                text: typeof entry?.text === 'string' ? entry.text : '',
+                                // The label, when the spec gave one shorter than the text.
+                                summary: typeof entry?.summary === 'string'
+                                    ? entry.summary
+                                    : undefined,
+                            };
+                        })
+                            .filter(entry => !!entry.text)
                         : undefined,
                 });
             }
@@ -487,7 +532,10 @@ export function AgentNode() {
         agentSpecInfo?.description ||
         'Node-local chat';
     const chatSuggestions = agentSpecInfo?.suggestions && agentSpecInfo.suggestions.length > 0
-        ? agentSpecInfo.suggestions.map(s => ({ title: s, message: s }))
+        ? agentSpecInfo.suggestions.map(s => ({
+            title: s.summary ?? s.text,
+            message: s.text,
+        }))
         : undefined;
     const [banner, setBanner] = useState(null);
     const bannerTimerRef = useRef(null);
@@ -528,6 +576,61 @@ export function AgentNode() {
             }),
         });
     }, []);
+    // A token that IAM no longer accepts ends the session, here and now.
+    //
+    // The billing entity selector reads the signed-in user from the core IAM
+    // store, which this page fills by asking IAM `whoami` with the node's token.
+    // When that call fails the core store logs its user out while the node's own
+    // token stays — and the page used to sit there "loading" a user that was
+    // never coming. A token past its `exp` is signed out at once; one that IAM
+    // rejects is retried briefly (a plane still starting), then signed out too.
+    const [identityAttempt, setIdentityAttempt] = useState(0);
+    const expireSession = useCallback((why) => {
+        showBanner('info', `${why} Please sign in again.`);
+        setAutoBootstrapDisabled(true);
+        setDisableAutoBootstrap(true);
+        void pushCredentials(token, null).catch(() => {
+            // Best-effort; local state is signed out regardless.
+        });
+        clearAuth();
+        setStep('auth');
+    }, [token, showBanner, pushCredentials, clearAuth]);
+    useEffect(() => {
+        if (!token || iamUser) {
+            return;
+        }
+        if (isJwtExpired(token)) {
+            expireSession('Your session has expired.');
+            return;
+        }
+        let cancelled = false;
+        const attempt = identityAttempt;
+        const timer = window.setTimeout(async () => {
+            try {
+                const api = coreState.iamStore.getState();
+                await api.refreshUserByToken(token);
+            }
+            catch {
+                // Decided below, on whether a user arrived.
+            }
+            if (cancelled) {
+                return;
+            }
+            if (coreState.iamStore.getState().user) {
+                return;
+            }
+            if (attempt >= 2) {
+                expireSession(`${resolveIamUrl()} did not recognise your session.`);
+            }
+            else {
+                setIdentityAttempt(n => n + 1);
+            }
+        }, attempt === 0 ? 1500 : 4000);
+        return () => {
+            cancelled = true;
+            window.clearTimeout(timer);
+        };
+    }, [token, iamUser, identityAttempt, expireSession]);
     // Refs kept in sync with state so the BillingEntitySelect callbacks
     // (passed via stable identities) can read the latest values without
     // being re-created on every render — re-created callbacks made
@@ -700,13 +803,25 @@ export function AgentNode() {
             // Best-effort; backend may not be reachable in some local setups.
         });
     }, [token, pushCredentials]);
-    useEffect(() => {
-        import('@datalayer/core/lib/state').then(({ iamStore, coreStore }) => {
+    // Before paint, and before any child effect: children fetch runtimes and
+    // the like in their own effects, and a parent's layout effect runs first.
+    // Seeded in a plain effect behind a dynamic import, as this used to be,
+    // the first round of requests went to the core store's *default* URLs —
+    // production — and came back 401 against a local token before the local
+    // plane was even named.
+    useLayoutEffect(() => {
+        Promise.resolve(coreState).then(({ iamStore, coreStore }) => {
             const iamUrl = resolveIamUrl();
             const runtimesUrl = resolveRuntimesUrl();
             const aiInferenceUrl = getConfigUrlFromDocument('aiInferenceUrl') ||
                 import.meta.env?.VITE_DATALAYER_AI_INFERENCE_URL ||
-                DEFAULT_DATALAYER_SERVICE_URL;
+                'https://r1.datalayer.run';
+            const aiAgentsUrl = getConfigUrlFromDocument('aiAgentsUrl') ||
+                import.meta.env?.VITE_DATALAYER_AI_AGENTS_URL ||
+                'https://r1.datalayer.run';
+            const jupyterMcpServerUrl = getConfigUrlFromDocument('jupyterMcpServerUrl') ||
+                import.meta.env?.VITE_DATALAYER_JUPYTER_MCP_SERVER_URL ||
+                'https://mcp.datalayer.run/mcp';
             // Seed all per-service URLs to match the main UI login behavior.
             const coreApi = coreStore.getState();
             const prevCfg = coreApi.configuration ?? {};
@@ -715,9 +830,9 @@ export function AgentNode() {
                 runtimesUrl,
                 spacerUrl: iamUrl,
                 libraryUrl: iamUrl,
-                aiAgentsUrl: iamUrl,
+                aiAgentsUrl,
                 aiInferenceUrl: aiInferenceUrl,
-                jupyterMcpServerUrl: 'https://mcp.datalayer.run/mcp',
+                jupyterMcpServerUrl,
                 otelUrl: iamUrl,
                 growthUrl: iamUrl,
                 successUrl: iamUrl,
@@ -810,6 +925,60 @@ export function AgentNode() {
         configuration.active_agent_id,
         selectedAgentId,
     ]);
+    // Keep "is the active agent running" true to life.
+    //
+    // The restore effect above decides that once, when the page loads, so that
+    // it can send the reader to the chat once and not on every tick. But the
+    // answer changes: an agent launched later from the gallery, by another tab,
+    // or through the API (the SaaS, say) used to leave the header's Chat
+    // disabled for as long as the page stayed open, while the gallery — which
+    // refetches — plainly showed the agent as active.
+    useEffect(() => {
+        if (!token || !configurationLoaded) {
+            return;
+        }
+        const activeAgentId = (configuration.active_agent_id || '').trim();
+        if (!activeAgentId) {
+            setIsActiveAgentRunning(false);
+            return;
+        }
+        let cancelled = false;
+        const check = async () => {
+            try {
+                const response = await fetch(`${AGENT_RUNTIMES_BASE_URL}/api/v1/agents`, { headers: { Authorization: `Bearer ${token}` } });
+                if (!response.ok || cancelled) {
+                    return;
+                }
+                const payload = await response.json().catch(() => null);
+                if (cancelled) {
+                    return;
+                }
+                const agents = Array.isArray(payload)
+                    ? payload
+                    : payload?.agents || payload?.items || [];
+                const active = agents.find(agent => {
+                    const id = String(agent?.agent_id || agent?.id || '').trim();
+                    return id === activeAgentId;
+                });
+                setIsActiveAgentRunning(Boolean(active));
+                if (active) {
+                    setActiveAgentProtocol(normalizeChatProtocol(active.protocol ?? active.transport));
+                }
+            }
+            catch {
+                // Leave the last known answer; the next tick asks again.
+            }
+        };
+        void check();
+        const timer = window.setInterval(() => void check(), 10_000);
+        const onFocus = () => void check();
+        window.addEventListener('focus', onFocus);
+        return () => {
+            cancelled = true;
+            window.clearInterval(timer);
+            window.removeEventListener('focus', onFocus);
+        };
+    }, [token, configurationLoaded, configuration.active_agent_id]);
     useEffect(() => {
         // If a persisted session is already authenticated on first load,
         // skip the auth screen and land on the agents gallery.
@@ -1121,7 +1290,7 @@ export function AgentNode() {
                                                             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: {
+                                                        }, children: [_jsx(Heading, { sx: { fontSize: 2, m: 0, mb: 2 }, children: "Billing Entity" }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Loading billing entities..." })] })] }))] }), _jsx(Box, { sx: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     gap: 2,
@@ -1132,9 +1301,10 @@ export function AgentNode() {
                                                         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 => {
+                                }, onLaunched: (agentId, protocol) => {
                                     setSelectedAgentId(agentId);
                                     setIsActiveAgentRunning(true);
+                                    setActiveAgentProtocol(normalizeChatProtocol(protocol));
                                     const nextConfiguration = {
                                         ...configuration,
                                         active_agent_id: agentId,
@@ -1172,6 +1342,6 @@ export function AgentNode() {
                                     borderColor: 'border.default',
                                     borderRadius: 2,
                                     overflow: 'hidden',
-                                }, 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` })) }))] })] }) }) }));
+                                }, 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: activeAgentProtocol, 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/AgentNotebook.js

@@ -60,7 +60,7 @@ async function fetchStartupKernelId() {
         }
         const payload = await resp.json();
         const sandbox = payload?.sandbox;
-        if (sandbox?.variant !== 'jupyter') {
+        if (sandbox?.variant !== 'jupyter-server') {
             return undefined;
         }
         const kernelId = sandbox?.kernel_id;

package/lib/App.d.ts

@@ -1,3 +1,3 @@
 import './App.css';
-export declare function App(): import("react/jsx-runtime").JSX.Element;
+export declare function App(): import("react").JSX.Element;
 export default App;

package/lib/AppExamples2.d.ts

@@ -1,3 +1,3 @@
 import './AppExamples2.css';
-export declare function App(): import("react/jsx-runtime").JSX.Element;
+export declare function App(): import("react").JSX.Element;
 export default App;

package/lib/agent-node/AgentNodeGallery.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 /**
  * A single agent specification returned by ``GET /api/v1/agents/library``.
  * Only the fields consumed by the gallery cards are typed here.
@@ -14,7 +15,19 @@ export type AgentspecSummary = {
     icon?: string;
     emoji?: string;
     color?: string;
+    /** The chat protocol the spec is written for: ``ag-ui`` or ``vercel-ai``. */
+    protocol?: string;
 };
+/** The transports a node launches agents with, and the chat can speak. */
+export type AgentTransport = 'ag-ui' | 'vercel-ai';
+/**
+ * The transport to launch a spec with: its own when it names one the node
+ * can serve, AG-UI otherwise. A spec written for Vercel AI launched as AG-UI
+ * answered on an endpoint its chat never called.
+ */
+export declare const transportForSpec: (spec: {
+    protocol?: string;
+}) => AgentTransport;
 export type AgentNodeGalleryProps = {
     /** Base URL of the local Agent Runtimes server. */
     baseUrl: string;
@@ -23,7 +36,7 @@ export type AgentNodeGalleryProps = {
     /** Id of the agent currently marked active on the node, if any. */
     activeAgentId?: string | null;
     /** Called with the launched agent id once it is running and set active. */
-    onLaunched: (agentId: string) => void;
+    onLaunched: (agentId: string, protocol: AgentTransport) => void;
     /** Called once the active agent is terminated and cleared on the node. */
     onTerminated?: (agentId: string) => void;
     /** Optional callback used by parent to display launch errors (e.g. toast). */

package/lib/agent-node/AgentNodeGallery.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/*
- * Copyright (c) 2025-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Box, Button, Heading, Label, Spinner, Text, TextInput, } from '@primer/react';
 import { AgentIcon, BeakerIcon, BookIcon, BugIcon, CheckCircleFillIcon, CloudIcon, CodeIcon, CopilotIcon, CpuIcon, DatabaseIcon, DependabotIcon, EyeIcon, FileIcon, GearIcon, GitBranchIcon, GlobeIcon, GraphIcon, HeartIcon, HomeIcon, IssueOpenedIcon, LightBulbIcon, LinkIcon, MailIcon, MegaphoneIcon, NoteIcon, PackageIcon, PencilIcon, PeopleIcon, PlayIcon, PlugIcon, PulseIcon, RocketIcon, SearchIcon, ShareIcon, ShieldCheckIcon, ShieldIcon, SparklesFillIcon, SquirrelIcon, StarIcon, SyncIcon, TableIcon, TagIcon, TelescopeIcon, TerminalIcon, ToolsIcon, ZapIcon, } from '@primer/octicons-react';
+/**
+ * The transport to launch a spec with: its own when it names one the node
+ * can serve, AG-UI otherwise. A spec written for Vercel AI launched as AG-UI
+ * answered on an endpoint its chat never called.
+ */
+export const transportForSpec = (spec) => spec.protocol === 'vercel-ai' || spec.protocol === 'vercel-ai-jupyter'
+    ? 'vercel-ai'
+    : 'ag-ui';
 const GRID_TEMPLATE = ['1fr', '1fr 1fr', 'repeat(5, minmax(0, 1fr))'];
 const ICON_REGISTRY = {
     // Primary agentspec icon values.
@@ -258,9 +262,9 @@ export function AgentNodeGallery({ baseUrl, token, activeAgentId, onLaunched, on
                     body: JSON.stringify({
                         name: requestedName,
                         agent_spec_id: spec.id,
-                        transport: 'ag-ui',
-                        sandbox_variant: 'jupyter',
-                        sandboxVariant: 'jupyter',
+                        transport: transportForSpec(spec),
+                        sandbox_variant: 'jupyter-server',
+                        sandboxVariant: 'jupyter-server',
                         ...(LOCAL_JUPYTER_SANDBOX_URL
                             ? { jupyter_sandbox: LOCAL_JUPYTER_SANDBOX_URL }
                             : {}),
@@ -325,9 +329,9 @@ export function AgentNodeGallery({ baseUrl, token, activeAgentId, onLaunched, on
                         body: JSON.stringify({
                             name: requestedName,
                             agent_spec_id: spec.id,
-                            transport: 'ag-ui',
-                            sandbox_variant: 'jupyter',
-                            sandboxVariant: 'jupyter',
+                            transport: transportForSpec(spec),
+                            sandbox_variant: 'jupyter-server',
+                            sandboxVariant: 'jupyter-server',
                             ...(LOCAL_JUPYTER_SANDBOX_URL
                                 ? { jupyter_sandbox: LOCAL_JUPYTER_SANDBOX_URL }
                                 : {}),
@@ -361,7 +365,7 @@ export function AgentNodeGallery({ baseUrl, token, activeAgentId, onLaunched, on
                 const variant = String(specPayload?.sandbox_variant || specPayload?.sandboxVariant || '')
                     .trim()
                     .toLowerCase();
-                mustRecreateForSandbox = variant !== 'jupyter';
+                mustRecreateForSandbox = variant !== 'jupyter-server';
             }
             if (specResponse.status === 404 || mustRecreateForSandbox) {
                 await fetch(`${baseUrl}/api/v1/agents/${encodeURIComponent(agentId)}`, {
@@ -374,9 +378,9 @@ export function AgentNodeGallery({ baseUrl, token, activeAgentId, onLaunched, on
                     body: JSON.stringify({
                         name: spec.id,
                         agent_spec_id: spec.id,
-                        transport: 'ag-ui',
-                        sandbox_variant: 'jupyter',
-                        sandboxVariant: 'jupyter',
+                        transport: transportForSpec(spec),
+                        sandbox_variant: 'jupyter-server',
+                        sandboxVariant: 'jupyter-server',
                         ...(LOCAL_JUPYTER_SANDBOX_URL
                             ? { jupyter_sandbox: LOCAL_JUPYTER_SANDBOX_URL }
                             : {}),
@@ -406,7 +410,7 @@ export function AgentNodeGallery({ baseUrl, token, activeAgentId, onLaunched, on
             if (!activeResponse.ok) {
                 throw new Error(`Failed to set active agent (${activeResponse.status})`);
             }
-            onLaunched(agentId);
+            onLaunched(agentId, transportForSpec(spec));
         }
         catch (reason) {
             const message = reason?.message || 'Unable to launch agent.';

package/lib/agent-node/themeStore.js

@@ -4,7 +4,7 @@
  */
 import { create } from 'zustand';
 import { createJSONStorage, persist } from 'zustand/middleware';
-import { themeConfigs, } from '@datalayer/primer-addons';
+import { themeConfigs, themeVariants, } from '@datalayer/primer-addons';
 const STORAGE_KEY = 'agent-runtimes-agent-node-theme';
 const COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 365;
 const colorModeCycle = {
@@ -17,11 +17,12 @@ const normalizeThemeVariant = (value) => {
     if (value === 'ocean') {
         return 'earth';
     }
-    if (value === 'datalayer' ||
-        value === 'spatial' ||
-        value === 'lovely' ||
-        value === 'matrix' ||
-        value === 'earth') {
+    // Every variant the registry knows, read from the registry: a list written
+    // out here had stopped at five, and picking any of the three added since
+    // (sand, ivory, sun) was silently turned into Earth — the selector changed
+    // and the page did not.
+    if (typeof value === 'string' &&
+        themeVariants.includes(value)) {
         return value;
     }
     return 'earth';

package/lib/agents/AgentDetails.d.ts

@@ -2,7 +2,7 @@
  * AgentDetails component - Shows detailed information about the agent
  * including name, protocol, URL, message count, and context details.
  */
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type FullContextResponse } from '../context/ContextInspector';
 import type { ContextSnapshotResponse } from '../context/ContextPanel';
 import type { OAuthProvider, OAuthProviderConfig, Identity } from '../identity';
@@ -40,6 +40,12 @@ export interface AgentDetailsProps {
     onBack: () => void;
     /** Whether to show the header with back button (default: true) */
     showBackHeader?: boolean;
+    /**
+     * Whether the content carries its own padding. Off when the panel is
+     * embedded in a page that already sets the measure — the details then
+     * align with the sections around them instead of sitting inset.
+     */
+    padded?: boolean;
     /** Whether to show context usage/history and context snapshot sections (default: true) */
     showUsage?: boolean;
     /** Live MCP status from WS — bypasses REST polling when provided */
@@ -64,5 +70,5 @@ interface MCPToolsetsStatus {
 /**
  * AgentDetails component displays comprehensive information about the agent.
  */
-export declare function AgentDetails({ name, icon, emoji, protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, showBackHeader, showUsage, mcpStatusData, codemodeStatusData, contextSnapshotData, fullContextData, }: AgentDetailsProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentDetails({ name, icon, emoji, protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, showBackHeader, showUsage, padded, mcpStatusData, codemodeStatusData, contextSnapshotData, fullContextData, }: AgentDetailsProps): import("react").JSX.Element;
 export default AgentDetails;