@datalayer/agent-runtimes 1.0.17 → 1.0.19

package/lib/AgentNode.js

@@ -5,10 +5,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { Box, DatalayerLogoText, DatalayerThemeProvider, getLogoColors, setupPrimerPortals, themeConfigs, } from '@datalayer/primer-addons';
+import { DatalayerLogoText, DatalayerThemeProvider, getLogoColors, setupPrimerPortals, themeConfigs, } from '@datalayer/primer-addons';
 import { AppearanceControlsWithStore } from '@datalayer/primer-addons/lib/components/appearance';
-import { ActionList, ActionMenu, Avatar, Button, FormControl, Heading, Label, PageHeader, PageLayout, Text, } from '@primer/react';
-import { CommentIcon, HomeIcon, KeyAsteriskIcon, LockIcon, MoonIcon, PeopleIcon, PersonIcon, GearIcon, SignInIcon, SignOutIcon, } from '@primer/octicons-react';
+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 { SignInSimple } from '@datalayer/core/lib/views/iam';
 import { UserBadge } from '@datalayer/core/lib/views/profile';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
@@ -16,12 +16,101 @@ import { useIAMStore } from '@datalayer/core/lib/state';
 import { BillingEntitySelect, } from '@datalayer/core/lib/components/billing';
 import { ShareAccessComponent } from '@datalayer/core/lib/components/sharing';
 import { useAgentNodeThemeStore } from './agent-node/themeStore';
+import { AgentNodeGallery } from './agent-node/AgentNodeGallery';
 import { Chat } from './chat';
+import { DatalayerCollaborationProvider } from './collaboration';
 import '../style/primer-primitives.css';
 setupPrimerPortals();
 const AGENT_RUNTIMES_BASE_URL = (import.meta.env.VITE_DATALAYER_AGENT_RUNTIMES_URL ||
     import.meta.env.VITE_BASE_URL ||
     window.location.origin).replace(/\/$/, '');
+/**
+ * LOCAL Jupyter sandbox endpoint shared by the node's agent and the chat's
+ * ephemeral notebook/document surfaces. When set (node-local dev, injected via
+ * `VITE_JUPYTER_SANDBOX_URL`), the surfaces bind their kernel straight to this
+ * Jupyter server — no proxy or tunnel — exactly like `NotebookAgentExample`.
+ * Parsed once into a clean base URL + token for `ServerConnection`.
+ */
+const LOCAL_JUPYTER_SANDBOX = (() => {
+    const raw = String(import.meta.env.VITE_JUPYTER_SANDBOX_URL || '').trim();
+    if (!raw) {
+        return undefined;
+    }
+    try {
+        const url = new URL(raw);
+        const token = url.searchParams.get('token') || undefined;
+        url.searchParams.delete('token');
+        const baseUrl = `${url.origin}${url.pathname}`.replace(/\/$/, '');
+        return { baseUrl, token };
+    }
+    catch {
+        return { baseUrl: raw.replace(/\/$/, ''), token: undefined };
+    }
+})();
+const DEFAULT_DATALAYER_URL = 'https://prod1.datalayer.run';
+/**
+ * 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.
+ */
+const AUTO_BOOTSTRAP_DISABLED_KEY = 'agent-node-auto-bootstrap-disabled';
+/** Persist (or clear) the signed-out intent in localStorage. */
+function setAutoBootstrapDisabled(disabled) {
+    try {
+        if (disabled) {
+            window.localStorage.setItem(AUTO_BOOTSTRAP_DISABLED_KEY, 'true');
+        }
+        else {
+            window.localStorage.removeItem(AUTO_BOOTSTRAP_DISABLED_KEY);
+        }
+    }
+    catch {
+        // Ignore storage failures (private mode, disabled storage, etc.).
+    }
+}
+/**
+ * Read a service URL from the server-injected `datalayer-config-data` script
+ * tag. The agent-runtimes Python server injects this tag (populated from the
+ * `DATALAYER_*_URL` environment variables, e.g. from `plane local`) when it
+ * serves the built agent pages. Reading it at runtime lets the node target the
+ * configured services (IAM, runtimes, ...) instead of the build-time-baked
+ * `VITE_DATALAYER_URL`, which defaults to production because `make build` runs
+ * without the local environment.
+ */
+const getConfigUrlFromDocument = (...keys) => {
+    if (typeof document === 'undefined') {
+        return undefined;
+    }
+    const el = document.getElementById('datalayer-config-data');
+    if (!el?.textContent) {
+        return undefined;
+    }
+    try {
+        const config = JSON.parse(el.textContent);
+        for (const key of keys) {
+            const value = config?.[key];
+            if (typeof value === 'string' && value.trim()) {
+                return value.replace(/\/$/, '');
+            }
+        }
+    }
+    catch {
+        // Ignore malformed config; fall back to env / default.
+    }
+    return undefined;
+};
+/** Resolve the base Datalayer URL: injected config → VITE env → production. */
+const resolveDatalayerUrl = () => getConfigUrlFromDocument('datalayerUrl', 'iamUrl') ||
+    import.meta.env?.VITE_DATALAYER_URL ||
+    DEFAULT_DATALAYER_URL;
+/** Resolve the runtimes URL: injected config → VITE env → base Datalayer URL. */
+const resolveRuntimesUrl = () => getConfigUrlFromDocument('runtimesUrl') ||
+    import.meta.env?.VITE_DATALAYER_RUNTIMES_URL ||
+    resolveDatalayerUrl();
+/** Resolve the spacer URL: injected config → VITE env → base Datalayer URL. */
+const resolveSpacerUrl = () => getConfigUrlFromDocument('spacerUrl') ||
+    import.meta.env?.VITE_DATALAYER_SPACER_URL ||
+    resolveDatalayerUrl();
 const MODE_CARDS = [
     {
         mode: 'private',
@@ -52,7 +141,7 @@ const DEFAULT_CONFIGURATION = {
  * but assembled exclusively from core building blocks so agent-runtimes does
  * not pull in the `ui` package.
  */
-function AgentNodeProfileView({ token }) {
+function AgentNodeProfileView({ token, onTokenExpired, }) {
     const user = useIAMStore(state => state.user);
     const display = useMemo(() => {
         if (!user)
@@ -92,7 +181,7 @@ function AgentNodeProfileView({ token }) {
             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" }), _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: {
+        }, 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%',
@@ -112,6 +201,7 @@ function AgentNodeProfileView({ token }) {
 export function AgentNode() {
     const { token, setAuth, clearAuth } = useSimpleAuthStore();
     const tokenForCore = token ?? undefined;
+    const signInLoginUrl = `${resolveDatalayerUrl()}/api/iam/v1/login`;
     const queryClient = useQueryClient();
     const iamUser = useIAMStore(state => state.user);
     const { colorMode, theme: themeVariant } = useAgentNodeThemeStore();
@@ -127,14 +217,230 @@ export function AgentNode() {
             : 'light';
     const authGradient = cfg.cardGradient[resolvedMode];
     const [step, setStep] = useState('auth');
-    const [disableAutoBootstrap, setDisableAutoBootstrap] = useState(false);
+    const [selectedAgentId, setSelectedAgentId] = useState('default');
+    // Persisted across refreshes: once the user explicitly signs out we must
+    // not silently re-authenticate them from the env-supplied DATALAYER_API_KEY
+    // via /auth/bootstrap. Initialise from localStorage so the intent survives a
+    // page reload (React state alone resets to false on refresh).
+    const [disableAutoBootstrap, setDisableAutoBootstrap] = useState(() => {
+        try {
+            return (window.localStorage.getItem(AUTO_BOOTSTRAP_DISABLED_KEY) === 'true');
+        }
+        catch {
+            return false;
+        }
+    });
     const [configuration, setConfiguration] = useState(DEFAULT_CONFIGURATION);
     const [, setSelectedBillingEntity] = useState(undefined);
     const [isSaving, setIsSaving] = useState(false);
     const [error, setError] = useState(null);
+    // ── Ephemeral notebook RTC (shared room with the SaaS UI) ───────────────
+    // The node provisions a spacer notebook room on registration and stores its
+    // uid in the configuration. When present, both the node-local chat and the
+    // SaaS gallery view join that room so the agent's notebook edits transit via
+    // RTC instead of the tunnel. Absent (e.g. before sign-in) the ephemeral
+    // notebook stays in-memory, unchanged.
+    const ephemeralCollaborationDocumentId = token && configuration.collaboration_notebook_uid
+        ? configuration.collaboration_notebook_uid
+        : undefined;
+    const ephemeralNotebookCollaborationProvider = useMemo(() => {
+        if (!ephemeralCollaborationDocumentId || !token) {
+            return undefined;
+        }
+        const spacerUrl = resolveSpacerUrl();
+        return new DatalayerCollaborationProvider({
+            datalayerUrl: spacerUrl,
+            token,
+        });
+    }, [ephemeralCollaborationDocumentId, token]);
+    // ── 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.
+    const collaborationDocumentUser = useIAMStore(state => state.user);
+    const ephemeralDocumentCollaboration = useMemo(() => {
+        const documentRoomId = configuration.collaboration_document_uid;
+        if (!token || !documentRoomId) {
+            return undefined;
+        }
+        const spacerUrl = resolveSpacerUrl();
+        const wsSpacer = String(spacerUrl).replace(/^http/, 'ws');
+        const websocketUrl = `${wsSpacer}/api/spacer/v1/lexical/ws?token=${encodeURIComponent(token)}`;
+        const u = collaborationDocumentUser;
+        return {
+            websocketUrl,
+            roomId: documentRoomId,
+            identity: u
+                ? {
+                    userId: u.uid,
+                    handle: u.handle,
+                    displayName: u.displayName,
+                    initials: u.initials,
+                    avatarUrl: u.avatarUrl,
+                }
+                : undefined,
+        };
+    }, [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 chatRestoreAttemptRef = useRef('');
+    const hasActiveAgent = Boolean(String(configuration.active_agent_id || '').trim());
+    // ── 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
+    // 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
+    // manager straight to the sandbox kernel. This is what makes the surfaces
+    // actually render and the chat header's kernel indicator reflect the sandbox
+    // kernel (rather than the browser/Pyodide placeholder).
+    const [sandboxRuntimeOverride, setSandboxRuntimeOverride] = useState(undefined);
+    // Environment name shown in the chat header's kernel indicator details, so
+    // it reads e.g. "Local Agent Sandbox (python3)" instead of the indicator's
+    // generic "browser-runtime" placeholder once the local sandbox is bound.
+    const [sandboxEnvironmentName, setSandboxEnvironmentName] = useState(undefined);
+    useEffect(() => {
+        const selected = String(selectedAgentId || '').trim();
+        if (step !== 'chat' || !selected || selected === 'default') {
+            setSandboxRuntimeOverride(undefined);
+            setSandboxEnvironmentName(undefined);
+            return;
+        }
+        // Fast path: in node-local dev the agent's Jupyter sandbox is a LOCAL
+        // server whose URL/token are known up front (VITE_JUPYTER_SANDBOX_URL).
+        // Bind the ephemeral surfaces straight to it — no /health/startup polling,
+        // no proxy, no tunnel — mirroring NotebookAgentExample.
+        if (LOCAL_JUPYTER_SANDBOX?.baseUrl) {
+            setSandboxEnvironmentName('Local Agent Sandbox');
+            setSandboxRuntimeOverride(prev => {
+                if (prev?.baseUrl === LOCAL_JUPYTER_SANDBOX.baseUrl &&
+                    (prev?.token || '') === (LOCAL_JUPYTER_SANDBOX.token || '')) {
+                    return prev;
+                }
+                return {
+                    baseUrl: LOCAL_JUPYTER_SANDBOX.baseUrl,
+                    token: LOCAL_JUPYTER_SANDBOX.token || undefined,
+                    podName: 'agent-node-sandbox',
+                };
+            });
+            return;
+        }
+        let cancelled = false;
+        let intervalId = null;
+        const stopPolling = () => {
+            if (intervalId !== null) {
+                window.clearInterval(intervalId);
+                intervalId = null;
+            }
+        };
+        const poll = async () => {
+            try {
+                const resp = await fetch(`${AGENT_RUNTIMES_BASE_URL}/health/startup`);
+                if (!resp.ok) {
+                    return;
+                }
+                const payload = await resp.json();
+                const sandbox = payload?.sandbox;
+                const jupyterUrl = String(sandbox?.jupyter_url || '').trim();
+                if (sandbox?.variant !== 'jupyter' || !jupyterUrl) {
+                    return;
+                }
+                const jupyterToken = String(sandbox?.jupyter_token || '').trim();
+                if (cancelled) {
+                    return;
+                }
+                const kernelName = String(sandbox?.kernel_name || '').trim();
+                setSandboxEnvironmentName(kernelName
+                    ? `Local Agent Sandbox (${kernelName})`
+                    : 'Local Agent Sandbox');
+                setSandboxRuntimeOverride(prev => {
+                    if (prev?.baseUrl === jupyterUrl &&
+                        (prev?.token || '') === jupyterToken) {
+                        return prev;
+                    }
+                    return {
+                        baseUrl: jupyterUrl,
+                        token: jupyterToken || undefined,
+                        podName: 'agent-node-sandbox',
+                    };
+                });
+                // Endpoint resolved — stop the fast poll.
+                stopPolling();
+            }
+            catch {
+                // Sandbox not ready yet; keep polling.
+            }
+        };
+        void poll();
+        intervalId = window.setInterval(() => {
+            void poll();
+        }, 2000);
+        return () => {
+            cancelled = true;
+            stopPolling();
+        };
+    }, [step, selectedAgentId]);
+    // ── Agent spec info for the chat header (title/description/suggestions) ──
+    // Mirrors the `ui` runtime chat view: the chat header shows the agent spec's
+    // display name and welcome message, and the empty state offers the spec's
+    // suggested prompts. The node-local agent is launched from a library spec
+    // whose id is used as the agent id (see AgentNodeGallery `launch`), so the
+    // spec is looked up by that same id via `GET /api/v1/agents/library/{id}`.
+    const [agentSpecInfo, setAgentSpecInfo] = useState(null);
+    useEffect(() => {
+        const agentId = String(selectedAgentId || '').trim();
+        if (step !== 'chat' || !agentId || agentId === 'default') {
+            setAgentSpecInfo(null);
+            return;
+        }
+        let cancelled = false;
+        (async () => {
+            try {
+                const resp = await fetch(`${AGENT_RUNTIMES_BASE_URL}/api/v1/agents/library/${encodeURIComponent(agentId)}`, {
+                    headers: token ? { Authorization: `Bearer ${token}` } : undefined,
+                });
+                if (!resp.ok) {
+                    if (!cancelled) {
+                        setAgentSpecInfo(null);
+                    }
+                    return;
+                }
+                const spec = await resp.json().catch(() => null);
+                if (cancelled || !spec) {
+                    return;
+                }
+                setAgentSpecInfo({
+                    name: typeof spec.name === 'string' ? spec.name : undefined,
+                    description: typeof spec.description === 'string' ? spec.description : undefined,
+                    welcomeMessage: typeof spec.welcomeMessage === 'string'
+                        ? spec.welcomeMessage
+                        : typeof spec.welcome_message === 'string'
+                            ? spec.welcome_message
+                            : undefined,
+                    suggestions: Array.isArray(spec.suggestions)
+                        ? spec.suggestions.filter((s) => typeof s === 'string')
+                        : undefined,
+                });
+            }
+            catch {
+                if (!cancelled) {
+                    setAgentSpecInfo(null);
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [step, selectedAgentId, token]);
+    const chatTitle = agentSpecInfo?.name || 'Agent Node 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;
     const [banner, setBanner] = useState(null);
     const bannerTimerRef = useRef(null);
     const showBanner = useCallback((kind, message) => {
@@ -158,9 +464,7 @@ export function AgentNode() {
         };
     }, []);
     const pushCredentials = useCallback((authToken, payloadToken = authToken) => {
-        const datalayerUrl = import.meta.env?.VITE_DATALAYER_URL ||
-            'https://prod1.datalayer.run';
-        const runtimesUrl = import.meta.env?.VITE_DATALAYER_RUNTIMES_URL || datalayerUrl;
+        const runtimesUrl = resolveRuntimesUrl();
         const headers = {
             'Content-Type': 'application/json',
         };
@@ -213,6 +517,7 @@ export function AgentNode() {
             try {
                 const response = await fetch(`${AGENT_RUNTIMES_BASE_URL}/api/v1/agent-node/configuration`);
                 if (!response.ok) {
+                    setConfigurationLoaded(true);
                     return;
                 }
                 const payload = await response.json();
@@ -221,10 +526,16 @@ export function AgentNode() {
                     ...(payload?.configuration || {}),
                 };
                 setConfiguration(loadedConfiguration);
+                if (loadedConfiguration.active_agent_id) {
+                    setSelectedAgentId(loadedConfiguration.active_agent_id);
+                }
             }
             catch {
                 // Ignore initial-load failures in local development.
             }
+            finally {
+                setConfigurationLoaded(true);
+            }
         };
         load();
     }, []);
@@ -319,7 +630,7 @@ export function AgentNode() {
                 }
                 if (data?.has_key && data?.token) {
                     setAuth(String(data.token), String(data.handle || 'api-key-user'));
-                    setStep('config');
+                    setStep('gallery');
                 }
             }
             catch {
@@ -343,10 +654,10 @@ export function AgentNode() {
     }, [token, pushCredentials]);
     useEffect(() => {
         import('@datalayer/core/lib/state').then(({ iamStore, coreStore }) => {
-            const datalayerUrl = import.meta.env?.VITE_DATALAYER_URL ||
-                'https://prod1.datalayer.run';
-            const runtimesUrl = import.meta.env?.VITE_DATALAYER_RUNTIMES_URL || datalayerUrl;
-            const aiInferenceUrl = import.meta.env?.VITE_DATALAYER_AI_INFERENCE_URL ||
+            const datalayerUrl = resolveDatalayerUrl();
+            const runtimesUrl = resolveRuntimesUrl();
+            const aiInferenceUrl = getConfigUrlFromDocument('aiInferenceUrl') ||
+                import.meta.env?.VITE_DATALAYER_AI_INFERENCE_URL ||
                 datalayerUrl;
             // Seed all per-service URLs to match the main UI login behavior.
             const coreApi = coreStore.getState();
@@ -387,11 +698,60 @@ export function AgentNode() {
             setStep('auth');
         }
     }, [token, step]);
+    useEffect(() => {
+        if (!token || !configurationLoaded) {
+            return;
+        }
+        const activeAgentId = (configuration.active_agent_id || '').trim();
+        if (!activeAgentId) {
+            return;
+        }
+        const restoreKey = `${activeAgentId}`;
+        if (chatRestoreAttemptRef.current === restoreKey) {
+            return;
+        }
+        chatRestoreAttemptRef.current = restoreKey;
+        let cancelled = false;
+        (async () => {
+            try {
+                const response = await fetch(`${AGENT_RUNTIMES_BASE_URL}/api/v1/agents`, {
+                    headers: {
+                        Authorization: `Bearer ${token}`,
+                    },
+                });
+                if (!response.ok) {
+                    return;
+                }
+                const payload = await response.json().catch(() => null);
+                if (cancelled) {
+                    return;
+                }
+                const agents = Array.isArray(payload)
+                    ? payload
+                    : payload?.agents || payload?.items || [];
+                const running = agents.some(agent => {
+                    const id = String(agent?.agent_id || agent?.id || '').trim();
+                    return id === activeAgentId;
+                });
+                if (running) {
+                    setSelectedAgentId(activeAgentId);
+                    setConfiguration(prev => prev.mode === 'private' ? prev : { ...prev, mode: 'private' });
+                    setStep('chat');
+                }
+            }
+            catch {
+                // Best-effort restore only.
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [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 main configuration view.
+        // skip the auth screen and land on the agents gallery.
         if (token && step === 'auth') {
-            setStep('config');
+            setStep('gallery');
         }
     }, [token, step]);
     useEffect(() => {
@@ -399,16 +759,21 @@ export function AgentNode() {
             setStep('config');
         }
     }, [step, configuration.mode]);
+    useEffect(() => {
+        if (step === 'chat' && !hasActiveAgent) {
+            setStep('gallery');
+        }
+    }, [step, hasActiveAgent]);
     const handleSignIn = (newToken, handle) => {
+        setAutoBootstrapDisabled(false);
         setDisableAutoBootstrap(false);
         setAuth(newToken, handle);
-        setStep('config');
+        setStep('gallery');
     };
     // API keys are exchanged for a session token before login so billing and
     // plans endpoints (/api/iam/v1/plans/*) resolve the correct paid plan.
     const handleApiKeySignIn = async (apiKey) => {
-        const datalayerUrl = import.meta.env?.VITE_DATALAYER_URL ||
-            'https://prod1.datalayer.run';
+        const datalayerUrl = resolveDatalayerUrl();
         try {
             const resp = await fetch(`${datalayerUrl}/api/iam/v1/login`, {
                 method: 'POST',
@@ -428,6 +793,9 @@ export function AgentNode() {
         }
     };
     const handleSignOut = () => {
+        // Persist the signed-out intent so a refresh does not re-bootstrap the
+        // session from the env-supplied DATALAYER_API_KEY.
+        setAutoBootstrapDisabled(true);
         setDisableAutoBootstrap(true);
         // Clear backend fallback credentials while still authenticated.
         void pushCredentials(token, null).catch(() => {
@@ -467,9 +835,12 @@ export function AgentNode() {
                 ...(payload?.configuration || {}),
             };
             setConfiguration(saved);
+            if (saved.active_agent_id) {
+                setSelectedAgentId(saved.active_agent_id);
+            }
             showBanner('success', 'Agent Node configuration saved.');
             if (saved.mode === 'private') {
-                setStep('chat');
+                setStep('gallery');
             }
         }
         catch (reason) {
@@ -486,8 +857,11 @@ export function AgentNode() {
             return true;
         if (!token)
             return false;
-        if (nextStep === 'chat')
-            return configuration.mode === 'private';
+        if (nextStep === 'gallery')
+            return true;
+        if (nextStep === 'chat') {
+            return configuration.mode === 'private' && hasActiveAgent;
+        }
         return true;
     };
     const StepEntry = ({ entryStep, label, leadingVisual, }) => {
@@ -508,21 +882,13 @@ export function AgentNode() {
                 minHeight: '100vh',
                 bg: 'canvas.default',
                 color: 'fg.default',
-            }, children: _jsxs(PageLayout, { containerWidth: "full", padding: "normal", sx: { bg: 'canvas.default', color: 'fg.default' }, style: { minHeight: '100vh', overflow: 'visible' }, children: [_jsx(PageLayout.Header, { children: _jsx(PageHeader, { children: _jsx(PageHeader.Actions, { children: _jsxs(Box, { sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        gap: 3,
-                                        fontSize: 2,
-                                        lineHeight: '22px',
-                                    }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: token && (_jsxs(_Fragment, { children: [_jsx(StepEntry, { entryStep: "chat", label: "Chat", leadingVisual: CommentIcon }), _jsx(StepEntry, { entryStep: "config", label: "Configuration", leadingVisual: GearIcon })] })) }), _jsx(AppearanceControlsWithStore, { useStore: useAgentNodeThemeStore }), !token ? (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setStep('auth'), leadingVisual: SignInIcon, sx: { color: 'fg.muted' }, children: "Sign in" })) : (_jsxs(Box, { sx: {
-                                                display: 'inline-flex',
-                                                alignItems: 'center',
-                                                gap: 1,
-                                            }, children: [_jsx(Box, { sx: {
-                                                        textAlign: 'left',
-                                                        display: 'inline-flex',
-                                                        alignItems: 'center',
-                                                    }, children: _jsx(UserBadge, { token: token, variant: "small", onTokenExpired: handleSignOut }) }), _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(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 }) })] }) }) }) }), _jsxs(PageLayout.Content, { children: [_jsx(Box, { "aria-live": "polite", sx: {
+            }, children: _jsxs(PageLayout, { containerWidth: "full", padding: "normal", sx: { bg: 'canvas.default', color: 'fg.default' }, style: { minHeight: '100vh', overflow: 'visible' }, children: [_jsx(PageLayout.Header, { children: _jsxs(PageHeader, { children: [_jsx(PageHeader.TitleArea, { children: _jsx(PageHeader.Title, { children: _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, inverse: true, variant: themeVariant, colorMode: colorMode, primaryColor: logoColors.primary, secondaryColor: logoColors.secondary, textColor: logoColors.textColor, primaryGradient: logoColors.primaryGradient, secondaryGradient: logoColors.secondaryGradient, gradient: true }) }) }) }), _jsx(PageHeader.Actions, { children: _jsxs(Box, { sx: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            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: {
                                     position: 'fixed',
                                     top: 0,
                                     left: 0,
@@ -560,7 +926,7 @@ export function AgentNode() {
                                             ? 'opacity 600ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1)'
                                             : 'opacity 250ms ease, transform 350ms cubic-bezier(0.16, 1, 0.3, 1)',
                                         textAlign: 'center',
-                                    }, children: _jsx(Text, { sx: { fontSize: 3, fontWeight: 'bold' }, children: banner?.message ?? '' }) }) }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 1 }, children: [_jsx(Box, { sx: { color: 'fg.muted', display: 'inline-flex' }, children: _jsx(KeyAsteriskIcon, { size: 18 }) }), _jsx(Heading, { sx: { fontSize: 3, m: 0 }, children: "Agent Node" })] }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Authenticate, configure Private/Shared/Sleep mode, then chat from this node." })] }), step === 'auth' && (_jsx(Box, { sx: {
+                                    }, children: _jsx(Text, { sx: { fontSize: 3, fontWeight: 'bold' }, children: banner?.message ?? '' }) }) }), !token && (_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 1 }, children: [_jsx(Box, { sx: { color: 'fg.muted', display: 'inline-flex' }, children: _jsx(KeyAsteriskIcon, { size: 18 }) }), _jsx(Heading, { sx: { fontSize: 3, m: 0 }, children: "Agent Node" })] }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Authenticate, configure Private/Shared/Sleep mode, then chat from this node." })] })), step === 'auth' && (_jsx(Box, { sx: {
                                     border: '1px solid',
                                     borderColor: 'border.default',
                                     borderTop: '3px solid',
@@ -582,13 +948,17 @@ export function AgentNode() {
                                         '& > div > div': {
                                             width: '100%',
                                             bg: 'canvas.default',
+                                            border: '1px solid',
                                             borderColor: `${cfg.brandColor}66`,
                                             boxShadow: `0 0 0 1px ${cfg.brandColor}2B`,
+                                            borderRadius: 2,
+                                            px: [3, 4],
+                                            py: [3, 4],
                                         },
                                         '& h2, & h3': {
                                             color: cfg.brandColor,
                                         },
-                                    }, children: _jsx(SignInSimple, { onSignIn: handleSignIn, onApiKeySignIn: handleApiKeySignIn, title: "Agent Node", description: "Sign in to configure node settings and run authenticated chat sessions.", leadingIcon: _jsx(Box, { sx: { color: cfg.brandColor, display: 'inline-flex' }, children: _jsx(HomeIcon, { size: 24 }) }) }) }) })), step === 'config' && (_jsxs(Box, { sx: {
+                                    }, children: _jsx(SignInSimple, { loginUrl: signInLoginUrl, onSignIn: handleSignIn, onApiKeySignIn: handleApiKeySignIn, title: "Agent Node", description: "Sign in to configure node settings and run authenticated chat sessions.", leadingIcon: _jsx(Box, { sx: { color: cfg.brandColor, display: 'inline-flex' }, children: _jsx(HomeIcon, { size: 24 }) }) }) }) })), step === 'config' && (_jsxs(Box, { sx: {
                                     border: '1px solid',
                                     borderColor: 'border.default',
                                     borderRadius: 2,
@@ -667,11 +1037,40 @@ export function AgentNode() {
                                                     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 }), step === 'chat' && (_jsx(Box, { sx: {
+                                                }, 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 => {
+                                    showBanner('error', message);
+                                }, onLaunched: agentId => {
+                                    setSelectedAgentId(agentId);
+                                    const nextConfiguration = {
+                                        ...configuration,
+                                        active_agent_id: agentId,
+                                        mode: 'private',
+                                    };
+                                    setConfiguration(nextConfiguration);
+                                    // Persist mode=private so Chat stays enabled and the node
+                                    // advertises the active agent state to the sync loop.
+                                    void fetch(`${AGENT_RUNTIMES_BASE_URL}/api/v1/agent-node/configuration`, {
+                                        method: 'POST',
+                                        headers: {
+                                            'Content-Type': 'application/json',
+                                        },
+                                        body: JSON.stringify(nextConfiguration),
+                                    }).catch(() => {
+                                        // Best-effort persistence; local state already switched.
+                                    });
+                                    setStep('chat');
+                                }, onTerminated: () => {
+                                    setSelectedAgentId('default');
+                                    setConfiguration(prev => ({
+                                        ...prev,
+                                        active_agent_id: undefined,
+                                    }));
+                                    setStep('gallery');
+                                } })), step === 'chat' && (_jsx(Box, { sx: {
                                     border: '1px solid',
                                     borderColor: 'border.default',
                                     borderRadius: 2,
                                     overflow: 'hidden',
-                                }, children: _jsx(Chat, { protocol: "ag-ui", baseUrl: AGENT_RUNTIMES_BASE_URL, agentId: "default", title: "Agent Node Chat", placeholder: "Send a message...", description: "Node-local chat", showHeader: true, height: '70vh', showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, runtimeId: "default", historyEndpoint: `${AGENT_RUNTIMES_BASE_URL}/api/v1/history` }) }))] })] }) }) }));
+                                }, 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` }) }))] })] }) }) }));
 }
 export default AgentNode;