@datalayer/agent-runtimes 1.0.19 → 1.0.21

package/lib/agent-node/AgentNodeGallery.js

@@ -5,8 +5,76 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Box, Button, Heading, Label, Spinner, Text, TextInput, } from '@primer/react';
-import { CheckCircleFillIcon, RocketIcon } from '@primer/octicons-react';
-const GRID_TEMPLATE = ['1fr', '1fr 1fr', '1fr 1fr 1fr'];
+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';
+const GRID_TEMPLATE = ['1fr', '1fr 1fr', 'repeat(5, minmax(0, 1fr))'];
+const ICON_REGISTRY = {
+    // Primary agentspec icon values.
+    agent: AgentIcon,
+    database: DatabaseIcon,
+    globe: GlobeIcon,
+    'git-branch': GitBranchIcon,
+    'trending-up': GraphIcon,
+    'share-2': ShareIcon,
+    // Additional mappings used across the agentspec catalog.
+    rocket: RocketIcon,
+    sparkles: SparklesFillIcon,
+    search: SearchIcon,
+    code: CodeIcon,
+    cpu: CpuIcon,
+    beaker: BeakerIcon,
+    book: BookIcon,
+    bug: BugIcon,
+    cloud: CloudIcon,
+    copilot: CopilotIcon,
+    dependabot: DependabotIcon,
+    eye: EyeIcon,
+    file: FileIcon,
+    gear: GearIcon,
+    graph: GraphIcon,
+    heart: HeartIcon,
+    home: HomeIcon,
+    lightbulb: LightBulbIcon,
+    link: LinkIcon,
+    mail: MailIcon,
+    megaphone: MegaphoneIcon,
+    note: NoteIcon,
+    package: PackageIcon,
+    pencil: PencilIcon,
+    people: PeopleIcon,
+    play: PlayIcon,
+    plug: PlugIcon,
+    pulse: PulseIcon,
+    'issue-opened': IssueOpenedIcon,
+    shield: ShieldIcon,
+    'shield-check': ShieldCheckIcon,
+    squirrel: SquirrelIcon,
+    star: StarIcon,
+    sync: SyncIcon,
+    table: TableIcon,
+    tag: TagIcon,
+    telescope: TelescopeIcon,
+    terminal: TerminalIcon,
+    tools: ToolsIcon,
+    zap: ZapIcon,
+};
+const DEFAULT_ICON = SparklesFillIcon;
+function hashString(value) {
+    let hash = 0;
+    for (let i = 0; i < value.length; i++) {
+        hash = ((hash << 5) - hash + value.charCodeAt(i)) | 0;
+    }
+    return Math.abs(hash);
+}
+function resolveAgentspecIcon(iconId, seed) {
+    if (iconId) {
+        return ICON_REGISTRY[iconId] || DEFAULT_ICON;
+    }
+    const iconValues = Object.values(ICON_REGISTRY);
+    if (iconValues.length === 0) {
+        return DEFAULT_ICON;
+    }
+    return iconValues[hashString(seed) % iconValues.length];
+}
 /**
  * URL (optionally with `?token=`) of the LOCAL Jupyter server that the node's
  * agents should use as their `jupyter` code sandbox. This mirrors
@@ -136,6 +204,23 @@ export function AgentNodeGallery({ baseUrl, token, activeAgentId, onLaunched, on
     }, [running, normalizedActiveAgentId]);
     // An "active" agent must be both configured and currently running.
     const hasActiveAgent = Boolean(normalizedActiveAgentId && activeAgent);
+    const activeAgentSpec = useMemo(() => {
+        if (!activeAgent) {
+            return null;
+        }
+        const directSpecId = String(activeAgent.agent_spec_id || '').trim();
+        if (directSpecId) {
+            const directMatch = specs.find(spec => spec.id === directSpecId);
+            if (directMatch) {
+                return directMatch;
+            }
+        }
+        const nameCandidate = String(activeAgent.name || '').trim();
+        if (!nameCandidate) {
+            return null;
+        }
+        return specs.find(spec => spec.id === nameCandidate) || null;
+    }, [activeAgent, specs]);
     const normalizedSearch = search.trim().toLowerCase();
     const filteredSpecs = useMemo(() => {
         if (!normalizedSearch) {
@@ -251,7 +336,9 @@ export function AgentNodeGallery({ baseUrl, token, activeAgentId, onLaunched, on
                     if (!recreateResponse.ok) {
                         throw new Error(`Failed to launch agent (${recreateResponse.status})`);
                     }
-                    const recreatePayload = await recreateResponse.json().catch(() => null);
+                    const recreatePayload = await recreateResponse
+                        .json()
+                        .catch(() => null);
                     agentId =
                         recreatePayload?.agent_id ||
                             recreatePayload?.id ||
@@ -298,7 +385,9 @@ export function AgentNodeGallery({ baseUrl, token, activeAgentId, onLaunched, on
                 if (!recreateResponse.ok) {
                     throw new Error(`Failed to recreate agent with spec (${recreateResponse.status})`);
                 }
-                const recreatePayload = await recreateResponse.json().catch(() => null);
+                const recreatePayload = await recreateResponse
+                    .json()
+                    .catch(() => null);
                 agentId =
                     recreatePayload?.agent_id ||
                         recreatePayload?.id ||
@@ -364,11 +453,19 @@ export function AgentNodeGallery({ baseUrl, token, activeAgentId, onLaunched, on
         finally {
             setTerminating(false);
         }
-    }, [authHeaders, baseUrl, normalizedActiveAgentId, onTerminated, onLaunchError]);
+    }, [
+        authHeaders,
+        baseUrl,
+        normalizedActiveAgentId,
+        onTerminated,
+        onLaunchError,
+    ]);
     if (loading) {
         return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 6 }, children: _jsx(Spinner, { size: "large" }) }));
     }
-    return (_jsxs(Box, { children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Choose an agent" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Pick an agent from the gallery to launch it on this node. The active agent handles prompts sent directly to the node and through the Datalayer platform." })] }), error && (_jsx(Box, { sx: {
+    return (_jsxs(Box, { children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: hasActiveAgent ? 'Running agent' : 'Choose an agent' }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: hasActiveAgent
+                            ? 'Your node is currently running an active agent. You can terminate it to go back to the gallery.'
+                            : 'Pick an agent from the gallery to launch it on this node. The active agent handles prompts sent directly to the node and through the Datalayer platform.' })] }), error && (_jsx(Box, { sx: {
                     mb: 3,
                     p: 2,
                     borderRadius: 2,
@@ -378,13 +475,31 @@ export function AgentNodeGallery({ baseUrl, token, activeAgentId, onLaunched, on
                 }, children: error })), hasActiveAgent ? (_jsxs(Box, { sx: {
                     p: 4,
                     border: '1px solid',
-                    borderColor: 'success.muted',
+                    borderColor: 'accent.muted',
                     borderRadius: 2,
-                    bg: 'success.subtle',
+                    bg: 'accent.subtle',
                     display: 'flex',
                     flexDirection: 'column',
                     gap: 3,
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(Label, { variant: "success", sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(CheckCircleFillIcon, { size: 12 }), "Active agent"] }), _jsx(Text, { sx: { fontWeight: 600 }, children: activeAgent?.name || activeAgent?.agent_spec_id || normalizedActiveAgentId })] }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Chat is enabled while an active agent is running on this node. Terminate it to return to the agent cards picker." }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-start' }, children: _jsx(Button, { variant: "danger", disabled: terminating, onClick: () => void terminateActiveAgent(), children: terminating ? 'Terminating…' : 'Terminate' }) })] })) : specs.length === 0 ? (_jsx(Box, { sx: {
+                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(Label, { variant: "secondary", sx: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    gap: 1,
+                                    color: 'accent.fg',
+                                }, children: [_jsx(CheckCircleFillIcon, { size: 12 }), "Active agent"] }), _jsx(Text, { sx: { fontWeight: 600 }, children: activeAgent?.name ||
+                                    activeAgent?.agent_spec_id ||
+                                    normalizedActiveAgentId })] }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Chat is enabled while an active agent is running on this node. Terminate it to return to the agent cards picker." }), activeAgentSpec && (_jsxs(Box, { sx: {
+                            p: 3,
+                            border: '1px solid',
+                            borderColor: 'border.default',
+                            borderRadius: 2,
+                            bg: 'canvas.default',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 2,
+                        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Label, { size: "small", variant: "accent", children: "Spec" }), _jsx(Text, { sx: { fontWeight: 600 }, children: activeAgentSpec.name || activeAgentSpec.id }), activeAgentSpec.version && (_jsxs(Label, { size: "small", variant: "secondary", children: ["v", activeAgentSpec.version] }))] }), activeAgentSpec.description && (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: activeAgentSpec.description })), _jsxs(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: [_jsxs(Label, { size: "small", variant: "secondary", children: ["id: ", activeAgentSpec.id] }), activeAgentSpec.model && (_jsxs(Label, { size: "small", variant: "secondary", children: ["model: ", activeAgentSpec.model] })), activeAgentSpec.inference_provider && (_jsxs(Label, { size: "small", variant: "secondary", children: ["provider: ", activeAgentSpec.inference_provider] })), Array.isArray(activeAgentSpec.tags)
+                                        ? activeAgentSpec.tags.map(tag => (_jsx(Label, { size: "small", variant: "secondary", children: tag }, tag)))
+                                        : null] })] })), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-start' }, children: _jsx(Button, { variant: "danger", disabled: terminating, onClick: () => void terminateActiveAgent(), children: terminating ? 'Terminating…' : 'Terminate' }) })] })) : specs.length === 0 ? (_jsx(Box, { sx: {
                     p: 4,
                     textAlign: 'center',
                     border: '1px solid',
@@ -396,22 +511,57 @@ export function AgentNodeGallery({ baseUrl, token, activeAgentId, onLaunched, on
                             gridTemplateColumns: GRID_TEMPLATE,
                             gap: 3,
                         }, children: filteredSpecs.map(spec => {
-                            const isActive = !!activeAgentId &&
-                                runningBySpec.get(spec.id) === activeAgentId;
+                            const IconComponent = resolveAgentspecIcon(spec.icon, spec.name || spec.id);
+                            const isActive = !!activeAgentId && runningBySpec.get(spec.id) === activeAgentId;
                             const isLaunching = launchingId === spec.id;
                             const isRunning = runningBySpec.has(spec.id);
-                            return (_jsxs(Box, { sx: {
+                            const launchLabel = isActive
+                                ? 'Open chat'
+                                : isLaunching
+                                    ? 'Launching…'
+                                    : isRunning
+                                        ? 'Set active'
+                                        : 'Launch';
+                            return (_jsxs(Box, { role: "button", tabIndex: isLaunching ? -1 : 0, onClick: () => {
+                                    if (!isLaunching) {
+                                        void launch(spec);
+                                    }
+                                }, onKeyDown: event => {
+                                    if ((event.key === 'Enter' || event.key === ' ') &&
+                                        !isLaunching) {
+                                        event.preventDefault();
+                                        void launch(spec);
+                                    }
+                                }, "aria-label": `${launchLabel} ${spec.name || spec.id}`, "aria-busy": isLaunching, "aria-disabled": isLaunching, sx: {
                                     display: 'flex',
                                     flexDirection: 'column',
+                                    textAlign: 'left',
+                                    cursor: isLaunching ? 'progress' : 'pointer',
                                     p: 3,
                                     border: '1px solid',
-                                    borderColor: isActive ? 'success.emphasis' : 'border.default',
+                                    borderColor: isActive
+                                        ? 'success.emphasis'
+                                        : 'border.default',
                                     borderRadius: 2,
                                     bg: 'canvas.default',
-                                    transition: 'box-shadow 0.15s ease, transform 0.15s ease',
-                                    ':hover': {
+                                    // Hover feedback is border + shadow only. No transform: a
+                                    // transform here promotes the card to its own layer and makes
+                                    // the line-clamped description re-rasterize (per-paragraph
+                                    // motion artifact).
+                                    transition: 'box-shadow 180ms ease, border-color 180ms ease',
+                                    '&:hover': {
                                         boxShadow: 'shadow.medium',
-                                        transform: 'translateY(-2px)',
+                                        borderColor: isActive
+                                            ? 'success.emphasis'
+                                            : 'accent.emphasis',
+                                    },
+                                    '&:focus-visible': {
+                                        outline: '2px solid',
+                                        outlineColor: 'accent.fg',
+                                        outlineOffset: '2px',
+                                    },
+                                    '&[aria-disabled="true"]': {
+                                        opacity: 0.8,
                                     },
                                 }, children: [_jsxs(Box, { sx: {
                                             display: 'flex',
@@ -427,13 +577,17 @@ export function AgentNodeGallery({ baseUrl, token, activeAgentId, onLaunched, on
                                                     borderRadius: 2,
                                                     fontSize: 3,
                                                     bg: 'canvas.subtle',
-                                                }, children: spec.emoji || '🤖' }), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Heading, { as: "h3", sx: {
+                                                }, children: spec.emoji ? (_jsx(Text, { sx: { fontSize: 3, lineHeight: 1 }, children: spec.emoji })) : (_jsx(IconComponent, { size: 20 })) }), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Heading, { as: "h3", sx: {
                                                             fontSize: 2,
                                                             mb: 0,
                                                             overflow: 'hidden',
                                                             textOverflow: 'ellipsis',
                                                             whiteSpace: 'nowrap',
-                                                        }, children: spec.name || spec.id }), spec.version && (_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: ["v", spec.version] }))] }), isActive && (_jsxs(Label, { variant: "success", sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(CheckCircleFillIcon, { size: 12 }), "Active"] }))] }), spec.description && (_jsx(Text, { sx: {
+                                                        }, children: spec.name || spec.id }), spec.version && (_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: ["v", spec.version] }))] }), isActive && (_jsxs(Label, { variant: "success", sx: {
+                                                    display: 'inline-flex',
+                                                    alignItems: 'center',
+                                                    gap: 1,
+                                                }, children: [_jsx(CheckCircleFillIcon, { size: 12 }), "Active"] }))] }), spec.description && (_jsx(Text, { sx: {
                                             color: 'fg.muted',
                                             fontSize: 1,
                                             mb: 2,
@@ -446,13 +600,22 @@ export function AgentNodeGallery({ baseUrl, token, activeAgentId, onLaunched, on
                                             flexWrap: 'wrap',
                                             gap: 1,
                                             mb: 3,
-                                        }, children: spec.tags.slice(0, 4).map(tag => (_jsx(Label, { size: "small", variant: "secondary", children: tag }, tag))) })), _jsx(Box, { sx: { mt: 'auto', pt: 1 }, children: _jsx(Button, { variant: isActive ? 'default' : 'primary', leadingVisual: RocketIcon, block: true, disabled: isLaunching, onClick: () => void launch(spec), children: isActive
-                                                ? 'Open chat'
-                                                : isLaunching
-                                                    ? 'Launching…'
-                                                    : isRunning
-                                                        ? 'Set active'
-                                                        : 'Launch' }) })] }, spec.id));
+                                        }, children: spec.tags.slice(0, 4).map(tag => (_jsx(Label, { size: "small", variant: "secondary", children: tag }, tag))) })), _jsx(Box, { sx: { mt: 'auto', pt: 1 }, children: _jsxs(Box, { as: "span", sx: {
+                                                display: 'inline-flex',
+                                                alignItems: 'center',
+                                                gap: 1,
+                                                px: 2,
+                                                py: 1,
+                                                borderRadius: 2,
+                                                border: '1px solid',
+                                                borderColor: isActive
+                                                    ? 'border.default'
+                                                    : 'accent.muted',
+                                                bg: isActive ? 'canvas.subtle' : 'accent.subtle',
+                                                color: isActive ? 'fg.default' : 'accent.fg',
+                                                fontSize: 1,
+                                                fontWeight: 600,
+                                            }, children: [_jsx(IconComponent, { size: 14 }), launchLabel] }) })] }, spec.id));
                         }) }), filteredSpecs.length === 0 && (_jsx(Box, { sx: {
                             mt: 3,
                             p: 3,

package/lib/api/runtimes/runtimes.d.ts

@@ -120,6 +120,63 @@ export interface ResumeRuntimeBody {
     /** Additional metadata */
     metadata?: Record<string, any>;
 }
+/**
+ * Persisted memory record returned by ``/api/runtimes/v1/memories``.
+ */
+export interface RuntimeMemory {
+    id: string;
+    memory?: string | null;
+    hash?: string | null;
+    user_id?: string | null;
+    agent_id?: string | null;
+    run_id?: string | null;
+    actor_id?: string | null;
+    role?: string | null;
+    scope?: string | null;
+    created_at?: string | null;
+    updated_at?: string | null;
+    metadata?: Record<string, any>;
+}
+/**
+ * Response payload for listing persisted runtime memories.
+ */
+export interface ListRuntimeMemoriesResponse {
+    success: boolean;
+    message?: string;
+    count: number;
+    limit: number;
+    offset: number;
+    user_id?: string;
+    memories: RuntimeMemory[];
+}
+/**
+ * Response payload for fetching one persisted memory.
+ */
+export interface GetRuntimeMemoryResponse {
+    success: boolean;
+    message?: string;
+    memory: RuntimeMemory;
+}
+/**
+ * Query options for listing persisted runtime memories.
+ */
+export interface ListRuntimeMemoriesOptions {
+    userId?: string;
+    agentId?: string;
+    limit?: number;
+    offset?: number;
+}
+/**
+ * List persisted memories from the runtimes API.
+ *
+ * Non-admin callers are automatically scoped to their own personal account by
+ * the backend, even when ``userId`` is omitted.
+ */
+export declare const listRuntimeMemories: (token: string, options?: ListRuntimeMemoriesOptions, baseUrl?: string) => Promise<ListRuntimeMemoriesResponse>;
+/**
+ * Fetch one persisted memory by id from the runtimes API.
+ */
+export declare const getRuntimeMemory: (token: string, memoryId: string, baseUrl?: string) => Promise<GetRuntimeMemoryResponse>;
 /**
  * Resume a paused runtime by restoring from a checkpoint (async).
  *

package/lib/api/runtimes/runtimes.js

@@ -39,7 +39,7 @@ export const createRuntime = async (token, data, baseUrl = DEFAULT_SERVICE_URLS.
             const responseData = error.response.data || {};
             if (status === 404) {
                 // Environment not found
-                throw new Error(`Environment '${data.environment_name}' not found. ${responseData.message || 'Please check the environment name and try again.'}`);
+                throw new Error(`Environment '${data.environment?.name || ''}' not found. ${responseData.message || 'Please check the environment name and try again.'}`);
             }
             else if (status === 503) {
                 // No runtime available
@@ -203,6 +203,60 @@ export const pauseRuntime = async (token, podName, baseUrl = DEFAULT_SERVICE_URL
         ...(body ? { body } : {}),
     });
 };
+/**
+ * List persisted memories from the runtimes API.
+ *
+ * Non-admin callers are automatically scoped to their own personal account by
+ * the backend, even when ``userId`` is omitted.
+ */
+export const listRuntimeMemories = async (token, options = {}, baseUrl = DEFAULT_SERVICE_URLS.RUNTIMES) => {
+    validateToken(token);
+    const query = new URLSearchParams();
+    if (options.userId?.trim()) {
+        query.set('user_id', options.userId.trim());
+    }
+    if (options.agentId?.trim()) {
+        query.set('agent_id', options.agentId.trim());
+    }
+    if (typeof options.limit === 'number' && Number.isFinite(options.limit)) {
+        query.set('limit', String(Math.max(1, Math.min(1000, Math.floor(options.limit)))));
+    }
+    if (typeof options.offset === 'number' && Number.isFinite(options.offset)) {
+        query.set('offset', String(Math.max(0, Math.floor(options.offset))));
+    }
+    const qs = query.toString();
+    const response = await requestDatalayerAPI({
+        url: `${baseUrl}${API_BASE_PATHS.RUNTIMES}/memories${qs ? `?${qs}` : ''}`,
+        method: 'GET',
+        token,
+    });
+    return {
+        success: Boolean(response?.success),
+        message: response?.message,
+        count: Number(response?.count ?? 0),
+        limit: Number(response?.limit ?? options.limit ?? 100),
+        offset: Number(response?.offset ?? options.offset ?? 0),
+        user_id: response?.user_id,
+        memories: Array.isArray(response?.memories) ? response.memories : [],
+    };
+};
+/**
+ * Fetch one persisted memory by id from the runtimes API.
+ */
+export const getRuntimeMemory = async (token, memoryId, baseUrl = DEFAULT_SERVICE_URLS.RUNTIMES) => {
+    validateToken(token);
+    validateRequiredString(memoryId, 'Memory id');
+    const response = await requestDatalayerAPI({
+        url: `${baseUrl}${API_BASE_PATHS.RUNTIMES}/memories/${encodeURIComponent(memoryId)}`,
+        method: 'GET',
+        token,
+    });
+    return {
+        success: Boolean(response?.success),
+        message: response?.message,
+        memory: response?.memory,
+    };
+};
 /**
  * Resume a paused runtime by restoring from a checkpoint (async).
  *

package/lib/chat/Chat.d.ts

@@ -107,5 +107,5 @@ export interface ChatProps extends ChatCommonProps {
  * />
  * ```
  */
-export declare function Chat({ protocol: transport, extensions: _extensions, baseUrl, endpoint: endpointProp, configEndpoint: configEndpointProp, enableConfigQuery: enableConfigQueryProp, wsUrl, agentId, authToken: authTokenProp, placeholder, title, subtitle, brandIcon, autoConnect, streaming: _streaming, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height, showHeader, showNewChatButton, showClearButton, showModelSelector, showToolsMenu, showInput, disableInputPrompt, overlay, launching, launchingMessage, showSkillsMenu, codemodeEnabled, onToggleCodemode, showTokenUsage, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount, suggestions, submitOnSuggestionClick, description, headerContent, headerActions, autoFocus, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, pendingPrompt, errorBanner, showInformation, chatViewMode, onChatViewModeChange, frontendTools, enableEphemeralNotebook, initialEphemeralNotebookOpen, onEphemeralNotebookOpenChange, enableEphemeralDocument, initialEphemeralSurfaceMode, onEphemeralSurfaceModeChange, collapsed, onExpandFromCollapsed, ephemeralNotebookToolbar, ephemeralNotebookCollaborationProvider, ephemeralNotebookCollaborationDocumentId, ephemeralDocumentCollaboration, ephemeralRuntimeOverride, onToolCallStart, onToolCallComplete, renderToolResult, hideMessagesAfterToolUI, contextSnapshot, mcpStatusData, codemodeStatusData, sandboxStatusData, kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, disableInternalJupyterTheme, }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chat({ protocol: transport, extensions: _extensions, baseUrl, endpoint: endpointProp, configEndpoint: configEndpointProp, enableConfigQuery: enableConfigQueryProp, wsUrl, agentId, authToken: authTokenProp, placeholder, title, subtitle, brandIcon, autoConnect, streaming: _streaming, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height, showHeader, showNewChatButton, showClearButton, showModelSelector, showToolsMenu, showInput, disableInputPrompt, overlay, launching, launchingMessage, showSkillsMenu, codemodeEnabled, onToggleCodemode, showTokenUsage, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount, suggestions, submitOnSuggestionClick, description, headerContent, headerActions, autoFocus, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, pendingPrompt, errorBanner, showInformation, chatViewMode, onChatViewModeChange, frontendTools, enableEphemeralNotebook, initialEphemeralNotebookOpen, onEphemeralNotebookOpenChange, enableEphemeralDocument, initialEphemeralSurfaceMode, onEphemeralSurfaceModeChange, collapsed, onExpandFromCollapsed, ephemeralNotebookToolbar, ephemeralNotebookCollaborationProvider, ephemeralNotebookCollaborationDocumentId, ephemeralDocumentCollaboration, ephemeralRuntimeOverride, onToolCallStart, onToolCallComplete, renderToolResult, hideMessagesAfterToolUI, contextSnapshot, mcpStatusData, codemodeStatusData, sandboxStatusData, kernel, kernelIndicatorPlacement, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, themeVariant, colorMode, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, disableInternalJupyterTheme, }: ChatProps): import("react/jsx-runtime").JSX.Element;
 export default Chat;

package/lib/chat/Chat.js

@@ -136,7 +136,7 @@ function getProtocolType(protocol) {
  * />
  * ```
  */
-export function Chat({ protocol: transport, extensions: _extensions, baseUrl = 'http://localhost:8765', endpoint: endpointProp, configEndpoint: configEndpointProp, enableConfigQuery: enableConfigQueryProp, wsUrl, agentId, authToken: authTokenProp, placeholder = 'Type your message...', title, subtitle, brandIcon, autoConnect = true, streaming: _streaming = true, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height = '600px', showHeader = true, showNewChatButton = true, showClearButton = true, showModelSelector = true, showToolsMenu = true, showInput = true, disableInputPrompt = false, overlay, launching = false, launchingMessage, showSkillsMenu = true, codemodeEnabled = false, onToggleCodemode, showTokenUsage = true, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount = true, suggestions, submitOnSuggestionClick = true, description, headerContent, headerActions, autoFocus = false, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, pendingPrompt, errorBanner, showInformation = true, chatViewMode, onChatViewModeChange, frontendTools, enableEphemeralNotebook, initialEphemeralNotebookOpen, onEphemeralNotebookOpenChange, enableEphemeralDocument, initialEphemeralSurfaceMode, onEphemeralSurfaceModeChange, collapsed = false, onExpandFromCollapsed, ephemeralNotebookToolbar, ephemeralNotebookCollaborationProvider, ephemeralNotebookCollaborationDocumentId, ephemeralDocumentCollaboration, ephemeralRuntimeOverride, onToolCallStart, onToolCallComplete, renderToolResult, hideMessagesAfterToolUI = false, contextSnapshot, mcpStatusData, codemodeStatusData, sandboxStatusData, kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, disableInternalJupyterTheme = false, }) {
+export function Chat({ protocol: transport, extensions: _extensions, baseUrl = 'http://localhost:8765', endpoint: endpointProp, configEndpoint: configEndpointProp, enableConfigQuery: enableConfigQueryProp, wsUrl, agentId, authToken: authTokenProp, placeholder = 'Type your message...', title, subtitle, brandIcon, autoConnect = true, streaming: _streaming = true, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height = '600px', showHeader = true, showNewChatButton = true, showClearButton = true, showModelSelector = true, showToolsMenu = true, showInput = true, disableInputPrompt = false, overlay, launching = false, launchingMessage, showSkillsMenu = true, codemodeEnabled = false, onToggleCodemode, showTokenUsage = true, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount = true, suggestions, submitOnSuggestionClick = true, description, headerContent, headerActions, autoFocus = false, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, pendingPrompt, errorBanner, showInformation = true, chatViewMode, onChatViewModeChange, frontendTools, enableEphemeralNotebook, initialEphemeralNotebookOpen, onEphemeralNotebookOpenChange, enableEphemeralDocument, initialEphemeralSurfaceMode, onEphemeralSurfaceModeChange, collapsed = false, onExpandFromCollapsed, ephemeralNotebookToolbar, ephemeralNotebookCollaborationProvider, ephemeralNotebookCollaborationDocumentId, ephemeralDocumentCollaboration, ephemeralRuntimeOverride, onToolCallStart, onToolCallComplete, renderToolResult, hideMessagesAfterToolUI = false, contextSnapshot, mcpStatusData, codemodeStatusData, sandboxStatusData, kernel, kernelIndicatorPlacement, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, themeVariant, colorMode, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, disableInternalJupyterTheme = false, }) {
     const resolvedAgentId = typeof agentId === 'string' && agentId.trim().length > 0
         ? agentId.trim()
         : 'default';
@@ -364,6 +364,6 @@ export function Chat({ protocol: transport, extensions: _extensions, baseUrl = '
                                                 ? 'attention.fg'
                                                 : 'danger.fg',
                                             flex: 1,
-                                        }, children: errorBanner.message })] })), _jsx(ChatBase, { title: title, subtitle: subtitle, brandIcon: brandIcon, showHeader: showHeader, protocol: protocolConfig, placeholder: placeholder, description: description, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, autoFocus: autoFocus, runtimeId: runtimeId, historyEndpoint: historyEndpoint, pendingPrompt: pendingPrompt, showInformation: showInformation, onInformationClick: handleInformationClick, headerContent: headerContent, headerActions: headerActions, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showInput: showInput, disableInputPrompt: disableInputPrompt, overlay: overlay, launching: launching, launchingMessage: launchingMessage, autoConnect: autoConnect, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, codemodeEnabled: codemodeEnabled, onToggleCodemode: onToggleCodemode, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, connectedIdentities: identitiesForChat, onNewChat: handleNewChat, onMessagesChange: handleMessagesChange, headerButtons: headerButtons, avatarConfig: avatarConfig, backgroundColor: "canvas.default", focusTrigger: focusTrigger, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange, frontendTools: frontendTools, enableEphemeralNotebook: enableEphemeralNotebook, initialEphemeralNotebookOpen: initialEphemeralNotebookOpen, onEphemeralNotebookOpenChange: onEphemeralNotebookOpenChange, enableEphemeralDocument: enableEphemeralDocument, initialEphemeralSurfaceMode: initialEphemeralSurfaceMode, onEphemeralSurfaceModeChange: onEphemeralSurfaceModeChange, collapsed: collapsed, onExpandFromCollapsed: onExpandFromCollapsed, ephemeralNotebookToolbar: ephemeralNotebookToolbar, ephemeralNotebookCollaborationProvider: ephemeralNotebookCollaborationProvider, ephemeralNotebookCollaborationDocumentId: ephemeralNotebookCollaborationDocumentId, ephemeralDocumentCollaboration: ephemeralDocumentCollaboration, ephemeralRuntimeOverride: ephemeralRuntimeOverride, onToolCallStart: onToolCallStart, onToolCallComplete: onToolCallComplete, renderToolResult: renderToolResult, hideMessagesAfterToolUI: hideMessagesAfterToolUI, contextSnapshot: contextSnapshot, mcpStatusData: mcpStatusData, sandboxStatusData: sandboxStatusData, kernel: kernel, kernelEnvironmentName: kernelEnvironmentName, kernelCpu: kernelCpu, kernelMemory: kernelMemory, kernelGpu: kernelGpu, showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval, disableInternalJupyterTheme: disableInternalJupyterTheme })] })] }) }) }));
+                                        }, children: errorBanner.message })] })), _jsx(ChatBase, { title: title, subtitle: subtitle, brandIcon: brandIcon, showHeader: showHeader, protocol: protocolConfig, placeholder: placeholder, description: description, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, autoFocus: autoFocus, runtimeId: runtimeId, historyEndpoint: historyEndpoint, pendingPrompt: pendingPrompt, showInformation: showInformation, onInformationClick: handleInformationClick, headerContent: headerContent, headerActions: headerActions, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showInput: showInput, disableInputPrompt: disableInputPrompt, overlay: overlay, launching: launching, launchingMessage: launchingMessage, autoConnect: autoConnect, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, codemodeEnabled: codemodeEnabled, onToggleCodemode: onToggleCodemode, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, connectedIdentities: identitiesForChat, onNewChat: handleNewChat, onMessagesChange: handleMessagesChange, headerButtons: headerButtons, avatarConfig: avatarConfig, backgroundColor: "canvas.default", focusTrigger: focusTrigger, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange, frontendTools: frontendTools, enableEphemeralNotebook: enableEphemeralNotebook, initialEphemeralNotebookOpen: initialEphemeralNotebookOpen, onEphemeralNotebookOpenChange: onEphemeralNotebookOpenChange, enableEphemeralDocument: enableEphemeralDocument, initialEphemeralSurfaceMode: initialEphemeralSurfaceMode, onEphemeralSurfaceModeChange: onEphemeralSurfaceModeChange, collapsed: collapsed, onExpandFromCollapsed: onExpandFromCollapsed, ephemeralNotebookToolbar: ephemeralNotebookToolbar, ephemeralNotebookCollaborationProvider: ephemeralNotebookCollaborationProvider, ephemeralNotebookCollaborationDocumentId: ephemeralNotebookCollaborationDocumentId, ephemeralDocumentCollaboration: ephemeralDocumentCollaboration, ephemeralRuntimeOverride: ephemeralRuntimeOverride, onToolCallStart: onToolCallStart, onToolCallComplete: onToolCallComplete, renderToolResult: renderToolResult, hideMessagesAfterToolUI: hideMessagesAfterToolUI, contextSnapshot: contextSnapshot, mcpStatusData: mcpStatusData, sandboxStatusData: sandboxStatusData, kernel: kernel, kernelIndicatorPlacement: kernelIndicatorPlacement, kernelEnvironmentName: kernelEnvironmentName, kernelCpu: kernelCpu, kernelMemory: kernelMemory, kernelGpu: kernelGpu, themeVariant: themeVariant, colorMode: colorMode, showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval, disableInternalJupyterTheme: disableInternalJupyterTheme })] })] }) }) }));
 }
 export default Chat;

package/lib/chat/base/ChatBase.js

@@ -112,12 +112,14 @@ const ThemedJupyterReactTheme = JupyterReactTheme;
  *   chat height/flex chain is preserved); CSS custom properties and inherited
  *   properties (color, font) still cascade through it.
  */
-function ThemedChatBoundary({ children }) {
-    const colorMode = useThemeStore(s => s.colorMode);
-    const themeVariant = useThemeStore(s => s.theme);
+function ThemedChatBoundary({ children, themeVariant, colorMode, }) {
+    const storeColorMode = useThemeStore(s => s.colorMode);
+    const storeThemeVariant = useThemeStore(s => s.theme);
+    const resolvedColorMode = colorMode ?? storeColorMode;
+    const resolvedThemeVariant = themeVariant ?? storeThemeVariant;
     const systemMode = useSystemColorMode();
-    const themeConfig = getThemeConfig(themeVariant);
-    const resolvedMode = colorMode === 'auto' ? systemMode : colorMode;
+    const themeConfig = getThemeConfig(resolvedThemeVariant);
+    const resolvedMode = resolvedColorMode === 'auto' ? systemMode : resolvedColorMode;
     const modeStyles = resolvedMode === 'dark'
         ? themeConfig.themeStyles.dark
         : themeConfig.themeStyles.light;
@@ -432,7 +434,7 @@ function parseApprovedMcpToolsByServer(mcpStatusData) {
  * ChatBase component — Universal chat panel supporting store, protocol, and custom modes.
  */
 export function ChatBase(props) {
-    const { agentRuntimeConfig, protocol: protocolProp, useStore: useStoreMode = true, disableInternalJupyterTheme = false, } = props;
+    const { agentRuntimeConfig, protocol: protocolProp, useStore: useStoreMode = true, disableInternalJupyterTheme = false, themeVariant, colorMode, } = props;
     // Resolve protocol: string Protocol overrides type in agentRuntimeConfig or
     // is combined with a full ProtocolConfig object.
     const protocolType = typeof protocolProp === 'string' ? protocolProp : undefined;
@@ -459,7 +461,7 @@ export function ChatBase(props) {
         useStore: effectiveUseStoreMode,
     };
     const content = _jsx(ChatBaseInner, { ...innerProps });
-    const wrappedContent = disableInternalJupyterTheme ? (content) : (_jsx(ThemedChatBoundary, { children: content }));
+    const wrappedContent = disableInternalJupyterTheme ? (content) : (_jsx(ThemedChatBoundary, { themeVariant: themeVariant, colorMode: colorMode, children: content }));
     if (!existingQueryClient) {
         return (_jsx(QueryClientProvider, { client: internalQueryClient, children: wrappedContent }));
     }
@@ -468,7 +470,7 @@ export function ChatBase(props) {
 // ---------------------------------------------------------------------------
 // ChatBaseInner — contains all actual logic
 // ---------------------------------------------------------------------------
-function ChatBaseInner({ title, subtitle, showHeader = false, showTokenUsage = true, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = true, showToolsMenu = true, showSkillsMenu = true, disableInputPrompt = false, overlay, launching = false, launchingMessage, autoConnect = true, codemodeEnabled = false, onToggleCodemode, initialModel, availableModels, mcpServers, initialSkills: _initialSkills, className, loadingState, headerActions, kernelIndicatorState, kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, chatViewMode, onChatViewModeChange, 
+function ChatBaseInner({ title, subtitle, showHeader = false, showTokenUsage = true, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = true, showToolsMenu = true, showSkillsMenu = true, disableInputPrompt = false, overlay, launching = false, launchingMessage, autoConnect = true, codemodeEnabled = false, onToggleCodemode, initialModel, availableModels, mcpServers, initialSkills: _initialSkills, className, loadingState, headerActions, kernelIndicatorState, kernelIndicatorPlacement = 'left', kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, themeVariant, colorMode, chatViewMode, onChatViewModeChange, 
 // Mode selection
 useStore: useStoreMode = true, protocol: protocolRaw, onSendMessage, enableStreaming = false, 
 // Extended props
@@ -883,6 +885,10 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         requestAiAgentsApprovalHistory,
         sendAiAgentsApprovalDecision,
     ]);
+    // Assigned once `applyServerApprovalDecision` is defined below. A ref lets the
+    // ai-agents approval WS effect (declared earlier) drive the deferred-run
+    // continuation without re-subscribing when the callback identity changes.
+    const applyServerApprovalDecisionRef = useRef(null);
     const reconcileResolvedApprovalInStore = useCallback((approval) => {
         const state = agentRuntimeStore.getState();
         const removalIds = new Set([approval.id]);
@@ -988,7 +994,24 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                 }
                 const state = agentRuntimeStore.getState();
                 for (const record of records) {
-                    const approval = normalizeApprovalPayload(record);
+                    let approval = normalizeApprovalPayload(record);
+                    // SaaS-resolved events (tool_approval_approved/rejected) can arrive
+                    // with only {approvalId, status} and no tool_name/tool_args. Recover
+                    // the full envelope from the store (populated by the earlier pending
+                    // event) so the card clears AND the deferred run can resume.
+                    if (!approval) {
+                        const rawId = (typeof record.id === 'string' && record.id) ||
+                            (typeof record.approval_id === 'string' && record.approval_id) ||
+                            (typeof record.approvalId === 'string' && record.approvalId) ||
+                            '';
+                        const rawStatus = (typeof record.status === 'string' && record.status) || '';
+                        if (rawId && rawStatus && rawStatus !== 'pending') {
+                            const stored = state.approvals.find(a => a.id === rawId);
+                            if (stored) {
+                                approval = { ...stored, status: rawStatus };
+                            }
+                        }
+                    }
                     if (!approval) {
                         continue;
                     }
@@ -1018,6 +1041,11 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                     }
                     else {
                         reconcileResolvedApprovalInStore(scopedApproval);
+                        // Resume the deferred tool call when the decision was made on
+                        // another surface (e.g. the SaaS Tool Approvals UI). Without this
+                        // the pending card clears but pydantic-ai never receives the
+                        // client continuation and the run stays parked.
+                        applyServerApprovalDecisionRef.current?.(scopedApproval, scopedApproval.status === 'approved', scopedApproval.note ?? undefined);
                     }
                 }
             }
@@ -1259,13 +1287,16 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         });
         return true;
     }, [activeAgentId]);
+    applyServerApprovalDecisionRef.current = applyServerApprovalDecision;
     // ---- Agent-runtime WebSocket (monitoring stream) ----
     // Derive the bare base URL from configEndpoint or protocol.endpoint.
+    const isAgentNodeTunnelAgUi = Boolean(protocol?.endpoint &&
+        /\/api\/runtimes\/v1\/agent-nodes\/[^/]+\/ag-ui\/?$/.test(protocol.endpoint));
     const wsBaseUrl = protocol?.configEndpoint
         ? protocol.configEndpoint.replace(/\/api\/v1\/(config|configure)\/?$/, '')
         : (protocol?.endpoint?.replace(/\/api\/v1\/.*$/, '') ?? '');
     useAgentRuntimeWebSocket({
-        enabled: !!protocol && !!wsBaseUrl,
+        enabled: !!protocol && !!wsBaseUrl && !isAgentNodeTunnelAgUi,
         baseUrl: wsBaseUrl,
         authToken: protocol?.authToken,
         agentId: protocol?.agentId,
@@ -2440,7 +2471,11 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             pendingPromptSentRef.current = pendingPromptKey;
             return;
         }
-        if (!historyLoaded)
+        // Do not block prompt replay forever when runtime history cannot be fetched
+        // (e.g. websocket not connected yet/anymore). In that case we fall back to
+        // submitting once the adapter is ready.
+        const canProceedWithoutHistory = !historyScopeId || wsState !== 'connected';
+        if (!historyLoaded && !canProceedWithoutHistory)
             return;
         if (!adapterReady && !onSendMessage)
             return;
@@ -2453,6 +2488,8 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         pendingPrompt,
         pendingPromptKey,
         historyLoaded,
+        historyScopeId,
+        wsState,
         adapterReady,
         handleSend,
         onSendMessage,
@@ -2849,7 +2886,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     // no ephemeral notebook is shown) or INSIDE the chat body column (when the
     // notebook is visible) so the header always follows the chat body across all
     // view modes (docked sidebar, floating popup, floating-small).
-    const chatHeaderElement = showHeader ? (_jsx(ChatBaseHeader, { title: title, subtitle: subtitle, brandIcon: brandIcon, headerContent: headerContent, headerActions: headerActions, showInformation: showInformation, onInformationClick: onInformationClick, padding: padding, kernelIndicatorState: kernelIndicatorState, runtimeStatus: sandboxStatusData ?? sandboxStatusQuery.data, kernel: notebookVisible
+    const chatHeaderElement = showHeader ? (_jsx(ChatBaseHeader, { title: title, subtitle: subtitle, brandIcon: brandIcon, headerContent: headerContent, headerActions: headerActions, showInformation: showInformation, onInformationClick: onInformationClick, padding: padding, kernelIndicatorState: kernelIndicatorState, kernelIndicatorPlacement: kernelIndicatorPlacement, runtimeStatus: sandboxStatusData ?? sandboxStatusQuery.data, kernel: notebookVisible
             ? (notebookKernel ?? kernel)
             : documentVisible
                 ? (documentKernel ?? kernel)
@@ -2900,7 +2937,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                                         borderRight: '1px solid',
                                         borderColor: 'border.default',
                                     }),
-                        }, children: launching || overlay ? (_jsx(CompanionSurfaceSkeleton, { mode: notebookVisible ? 'notebook' : 'document' })) : notebookVisible ? (_jsx(EphemeralNotebook, { notebookId: ephemeralNotebookId, runtimePodName: runtimeId || activeAgentId, runtimeOverride: ephemeralRuntimeOverride, nbformat: persistedEphemeralNbformat ?? undefined, onNbformatChange: handleEphemeralNotebookChange, toolbarComponent: ephemeralNotebookToolbar, collaborationProvider: ephemeralNotebookCollaborationProvider })) : (_jsx(React.Suspense, { fallback: null, children: _jsx(EphemeralDocument, { documentId: ephemeralDocumentId, runtimePodName: runtimeId || activeAgentId, runtimeOverride: ephemeralRuntimeOverride, content: persistedEphemeralDocument ?? undefined, onContentChange: handleEphemeralDocumentChange, onToolsReady: handleDocumentToolsReady, onKernelChange: handleDocumentKernelChange, collaboration: ephemeralDocumentCollaboration }) })) }), !surfaceCollapsed && (_jsxs(Box, { sx: surfaceChatFloating
+                        }, children: launching || overlay ? (_jsx(CompanionSurfaceSkeleton, { mode: notebookVisible ? 'notebook' : 'document' })) : notebookVisible ? (_jsx(EphemeralNotebook, { notebookId: ephemeralNotebookId, runtimePodName: runtimeId || activeAgentId, runtimeOverride: ephemeralRuntimeOverride, themeVariant: themeVariant, colorMode: colorMode, nbformat: persistedEphemeralNbformat ?? undefined, onNbformatChange: handleEphemeralNotebookChange, toolbarComponent: ephemeralNotebookToolbar, collaborationProvider: ephemeralNotebookCollaborationProvider })) : (_jsx(React.Suspense, { fallback: null, children: _jsx(EphemeralDocument, { documentId: ephemeralDocumentId, runtimePodName: runtimeId || activeAgentId, runtimeOverride: ephemeralRuntimeOverride, themeVariant: themeVariant, colorMode: colorMode, content: persistedEphemeralDocument ?? undefined, onContentChange: handleEphemeralDocumentChange, onToolsReady: handleDocumentToolsReady, onKernelChange: handleDocumentKernelChange, collaboration: ephemeralDocumentCollaboration }) })) }), !surfaceCollapsed && (_jsxs(Box, { sx: surfaceChatFloating
                             ? {
                                 position: 'absolute',
                                 right: 16,