@datalayer/agent-runtimes 1.0.19 → 1.0.21

package/lib/chat/usage/TokenUsageBar.js

@@ -53,7 +53,7 @@ export function TokenUsageBar({ agentUsage, padding }) {
         const colorMap = {
             'System Prompts': '#8250df',
             'Tool Definitions': '#bf8700',
-            'User Messages': '#0969da',
+            'User Messages': '#16A085',
             'Assistant Messages': '#1a7f37',
             'Tool Usage': '#cf222e',
         };
@@ -86,7 +86,7 @@ export function TokenUsageBar({ agentUsage, padding }) {
             categories.push({
                 name: 'Messages',
                 value: messageTokens,
-                color: '#0969da',
+                color: '#16A085',
             });
         }
         const toolResultTokens = (agentUsage.toolCallTokens || 0) + (agentUsage.toolReturnTokens || 0);
@@ -99,7 +99,7 @@ export function TokenUsageBar({ agentUsage, padding }) {
         }
     }
     // Tiny filled pie chart options
-    const pieColor = pct > 90 ? '#cf222e' : pct > 70 ? '#bf8700' : '#0969da';
+    const pieColor = pct > 90 ? '#cf222e' : pct > 70 ? '#bf8700' : '#16A085';
     const freeSliceColor = 'var(--bgColor-muted, #f6f8fa)';
     const freeSliceOverlayColor = 'var(--borderColor-default, #d1d9e0)';
     const miniPieOption = {

package/lib/client/AgentRuntimesClient.d.ts

@@ -13,6 +13,7 @@ import type { SpaceDTO, UpdateSpaceRequest } from '../models/SpaceDTO';
 import type { NotebookDTO } from '../models/NotebookDTO';
 import type { LexicalDTO } from '../models/LexicalDTO';
 import type { ProjectDTO, ProjectDefaultItems } from '../models/ProjectDTO';
+import type { RuntimeMemory, ListRuntimeMemoriesOptions } from '../api/runtimes/runtimes';
 declare const AgentRuntimesClientWithMixins: {
     new (...args: any[]): {
         getMySpaces(): Promise<SpaceDTO[]>;
@@ -54,6 +55,8 @@ declare const AgentRuntimesClientWithMixins: {
         listRuntimes(): Promise<RuntimeDTO[]>;
         getRuntime(podName: string): Promise<RuntimeDTO>;
         deleteRuntime(podName: string): Promise<void>;
+        listRuntimeMemories(options?: ListRuntimeMemoriesOptions): Promise<RuntimeMemory[]>;
+        getRuntimeMemory(memoryId: string): Promise<RuntimeMemory>;
         terminateAllRuntimes(): Promise<PromiseSettledResult<void>[]>;
         createSnapshot(podName: string, name: string, description: string, stop?: boolean): Promise<CodeSandboxSnapshotDTO>;
         listSnapshots(): Promise<CodeSandboxSnapshotDTO[]>;
@@ -86,6 +89,8 @@ export interface AgentRuntimesClient extends DatalayerCoreClient {
     ensureRuntime(environmentName?: string, creditsLimit?: number, waitForReady?: boolean, maxWaitTime?: number, reuseExisting?: boolean, snapshotId?: string): Promise<RuntimeDTO>;
     createRuntime(environmentName: string, type: 'notebook' | 'terminal' | 'job', givenName: string, minutesLimit: number, fromSnapshotId?: string): Promise<RuntimeDTO>;
     listRuntimes(): Promise<RuntimeDTO[]>;
+    listRuntimeMemories(options?: ListRuntimeMemoriesOptions): Promise<RuntimeMemory[]>;
+    getRuntimeMemory(memoryId: string): Promise<RuntimeMemory>;
     getRuntime(podName: string): Promise<RuntimeDTO>;
     deleteRuntime(podName: string): Promise<void>;
     terminateAllRuntimes(): Promise<PromiseSettledResult<void>[]>;

package/lib/client/AgentsMixin.js

@@ -339,7 +339,9 @@ export function AgentsMixin(Base) {
                 method: 'POST',
                 token,
                 body: {
-                    environment_name: data.environmentName || 'ai-agents-env',
+                    environment: {
+                        name: data.environmentName || 'ai-agents-env',
+                    },
                     given_name: data.givenName || 'Agent',
                     credits_limit: data.creditsLimit || 10,
                     type: data.type || 'notebook',

package/lib/client/mixins/RuntimesMixin.d.ts

@@ -1,3 +1,4 @@
+import type { RuntimeMemory, ListRuntimeMemoriesOptions } from '../../api/runtimes/runtimes';
 import type { Constructor } from '@datalayer/core/lib/client/utils/mixins';
 import { EnvironmentDTO } from '../../models/EnvironmentDTO';
 import { RuntimeDTO } from '../../models/RuntimeDTO';
@@ -53,6 +54,17 @@ export declare function RuntimesMixin<TBase extends Constructor>(Base: TBase): {
          * @param podName - Runtime pod name
          */
         deleteRuntime(podName: string): Promise<void>;
+        /**
+         * List persisted memories for the authenticated caller.
+         *
+         * Backend scoping rules apply: non-admin callers are limited to their own
+         * personal account.
+         */
+        listRuntimeMemories(options?: ListRuntimeMemoriesOptions): Promise<RuntimeMemory[]>;
+        /**
+         * Fetch one persisted memory by id.
+         */
+        getRuntimeMemory(memoryId: string): Promise<RuntimeMemory>;
         /**
          * Terminate all runtimes.
          * Lists all runtimes and deletes them in parallel.

package/lib/client/mixins/RuntimesMixin.js

@@ -69,7 +69,9 @@ export function RuntimesMixin(Base) {
                     const runtimesUrl = this.getRuntimesUrl();
                     const creditsLimit = this.calculateCreditsFromMinutes(minutesLimit, env.burningRate);
                     const data = {
-                        environment_name: environmentName,
+                        environment: {
+                            name: environmentName,
+                        },
                         type,
                         given_name: givenName,
                         credits_limit: creditsLimit,
@@ -113,6 +115,27 @@ export function RuntimesMixin(Base) {
             const runtimesUrl = this.getRuntimesUrl();
             await runtimes.deleteRuntime(token, podName, runtimesUrl);
         }
+        /**
+         * List persisted memories for the authenticated caller.
+         *
+         * Backend scoping rules apply: non-admin callers are limited to their own
+         * personal account.
+         */
+        async listRuntimeMemories(options = {}) {
+            const token = this.getToken();
+            const runtimesUrl = this.getRuntimesUrl();
+            const response = await runtimes.listRuntimeMemories(token, options, runtimesUrl);
+            return response.memories;
+        }
+        /**
+         * Fetch one persisted memory by id.
+         */
+        async getRuntimeMemory(memoryId) {
+            const token = this.getToken();
+            const runtimesUrl = this.getRuntimesUrl();
+            const response = await runtimes.getRuntimeMemory(token, memoryId, runtimesUrl);
+            return response.memory;
+        }
         /**
          * Terminate all runtimes.
          * Lists all runtimes and deletes them in parallel.

package/lib/components/AgentSummary.d.ts

@@ -5,6 +5,7 @@ export interface AgentSummaryData {
     specId?: string;
     status?: string;
     baseUrl?: string;
+    sandboxBaseUrl?: string;
     agentId?: string;
     isReady?: boolean;
     error?: string;

package/lib/components/AgentSummary.js

@@ -3,9 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Spinner } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
+import { strip } from '@datalayer/core/lib/utils';
 /**
  * Statuses that represent an agent actively being created/started. The spinner
  * only shows for these; app-navigation states ("selected", "switching") and
@@ -19,20 +20,61 @@ const CREATING_STATUSES = new Set([
     'pending',
     'resuming',
 ]);
+const MAX_AGENT_NAME_LENGTH = 32;
+const toSandboxStatusUrl = (value) => {
+    const raw = String(value || '').trim();
+    if (!raw) {
+        return undefined;
+    }
+    try {
+        const parsed = new URL(raw);
+        parsed.pathname = `${parsed.pathname.replace(/\/$/, '')}/api`;
+        return parsed.toString();
+    }
+    catch {
+        const normalized = raw.replace(/\/$/, '');
+        return normalized.endsWith('/api') ? normalized : `${normalized}/api`;
+    }
+};
 /**
  * Compact agent summary badge with a hover overlay for details.
  */
 export const AgentSummary = ({ summary, title = 'Active Agent', }) => {
     const [isHovering, setIsHovering] = useState(false);
-    const runtimeStatusUrl = summary?.baseUrl
+    const closeTimerRef = useRef(null);
+    const clearCloseTimer = () => {
+        if (closeTimerRef.current !== null) {
+            window.clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    };
+    const handleMouseEnter = () => {
+        clearCloseTimer();
+        setIsHovering(true);
+    };
+    const handleMouseLeave = () => {
+        clearCloseTimer();
+        closeTimerRef.current = window.setTimeout(() => {
+            setIsHovering(false);
+            closeTimerRef.current = null;
+        }, 300);
+    };
+    useEffect(() => {
+        return () => {
+            clearCloseTimer();
+        };
+    }, []);
+    // Agent status is served by the agent-runtimes API server.
+    const apiBase = summary?.baseUrl
         ? (() => {
             const normalized = summary.baseUrl.replace(/\/$/, '');
-            if (normalized.endsWith('/api/v1')) {
-                return `${normalized}/runtime/status`;
-            }
-            return `${normalized}/api/v1/runtime/status`;
+            return normalized.endsWith('/api/v1')
+                ? normalized
+                : `${normalized}/api/v1`;
         })()
         : undefined;
+    const agentStatusUrl = apiBase ? `${apiBase}/runtime/status` : undefined;
+    const sandboxStatusUrl = toSandboxStatusUrl(summary?.sandboxBaseUrl);
     if (!summary) {
         return null;
     }
@@ -43,9 +85,17 @@ export const AgentSummary = ({ summary, title = 'Active Agent', }) => {
         !summary.agentId &&
         CREATING_STATUSES.has(normalizedStatus);
     const hasError = Boolean(summary.error);
-    return (_jsxs(Box, { sx: { position: 'relative' }, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), children: [_jsxs(Box, { as: "button", type: "button", sx: {
+    // The agent is optional: some examples run only a code sandbox. Show the
+    // agent status when there is an agent (or one is being created).
+    const hasAgent = Boolean(summary.agentId) || isCreating;
+    const shortAgentName = strip(summary.agentName, MAX_AGENT_NAME_LENGTH);
+    const badgeLabel = `${summary.agentName} · ${summary.location}`;
+    const badgeLabelShort = `${shortAgentName} · ${summary.location}`;
+    return (_jsxs(Box, { sx: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsxs(Box, { as: "button", type: "button", title: badgeLabel, sx: {
                     px: 2,
                     py: '6px',
+                    maxWidth: 280,
+                    minWidth: 0,
                     border: '1px solid',
                     borderColor: hasError ? 'danger.emphasis' : 'border.default',
                     borderRadius: 2,
@@ -56,7 +106,13 @@ export const AgentSummary = ({ summary, title = 'Active Agent', }) => {
                     display: 'flex',
                     alignItems: 'center',
                     gap: 1,
-                }, children: [isCreating && _jsx(Spinner, { size: "small", sx: { width: 12, height: 12 } }), hasError && _jsx("span", { "aria-hidden": true, children: "\u26A0" }), summary.agentName, " \u00B7 ", summary.location] }), isHovering && (_jsxs(Box, { sx: {
+                }, children: [isCreating && _jsx(Spinner, { size: "small", sx: { width: 12, height: 12 } }), hasError && _jsx("span", { "aria-hidden": true, children: "\u26A0" }), _jsx(Box, { as: "span", sx: {
+                            display: 'block',
+                            minWidth: 0,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }, children: badgeLabelShort })] }), isHovering && (_jsxs(Box, { sx: {
                     position: 'absolute',
                     top: 'calc(100% + 8px)',
                     right: 0,
@@ -70,13 +126,13 @@ export const AgentSummary = ({ summary, title = 'Active Agent', }) => {
                     zIndex: 120,
                     fontSize: 0,
                     color: 'fg.default',
-                }, children: [_jsx(Box, { sx: { mb: 1, fontWeight: 600 }, children: title }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Name: ", summary.agentName] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Location: ", summary.location] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Spec: ", summary.specId || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Status: ", isCreating ? 'creating' : summary.status || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Base URL: ", summary.baseUrl || '—'] }), _jsxs(Box, { sx: {
+                }, children: [_jsx(Box, { sx: { mb: 1, fontWeight: 600 }, children: title }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Name: ", summary.agentName] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Location: ", summary.location] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Spec: ", summary.specId || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Status: ", isCreating ? 'creating' : summary.status || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Agent base URL: ", summary.baseUrl || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Code sandbox base URL:", ' ', summary.sandboxBaseUrl ? (_jsx(Box, { as: "a", href: summary.sandboxBaseUrl, target: "_blank", rel: "noopener noreferrer", sx: { color: 'accent.fg', textDecoration: 'underline' }, children: summary.sandboxBaseUrl })) : ('—')] }), _jsxs(Box, { sx: {
                             color: 'fg.muted',
                             wordBreak: 'break-all',
                             display: 'flex',
                             alignItems: 'center',
                             gap: 1,
-                        }, children: ["Agent ID:", ' ', summary.agentId ? (summary.agentId) : isCreating ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small", sx: { width: 12, height: 12 } }), "Creating\u2026"] })) : ('—')] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Runtime status:", ' ', runtimeStatusUrl ? (_jsx(Box, { as: "a", href: runtimeStatusUrl, target: "_blank", rel: "noopener noreferrer", sx: { color: 'accent.fg', textDecoration: 'underline' }, children: runtimeStatusUrl })) : ('n/a')] }), hasError && (_jsxs(Box, { sx: {
+                        }, children: ["Agent ID:", ' ', summary.agentId ? (summary.agentId) : isCreating ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small", sx: { width: 12, height: 12 } }), "Creating\u2026"] })) : ('—')] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Agent status:", ' ', hasAgent && agentStatusUrl ? (_jsx(Box, { as: "a", href: agentStatusUrl, target: "_blank", rel: "noopener noreferrer", sx: { color: 'accent.fg', textDecoration: 'underline' }, children: agentStatusUrl })) : ('n/a')] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Code sandbox status:", ' ', sandboxStatusUrl ? (_jsx(Box, { as: "a", href: sandboxStatusUrl, target: "_blank", rel: "noopener noreferrer", sx: { color: 'accent.fg', textDecoration: 'underline' }, children: sandboxStatusUrl })) : ('n/a')] }), hasError && (_jsxs(Box, { sx: {
                             mt: 1,
                             p: 1,
                             border: '1px solid',

package/lib/components/runtimes/RuntimePickerBase.js

@@ -23,57 +23,92 @@ const RUNTIME_DISPLAY_NAME_MAX_LENGTH = 25;
  */
 export function RuntimePickerBase(props) {
     const { disabled, display, filterRuntime, multiServiceManager, postActions, preActions, preference, runtimeDesc, sessionContext, setRuntimeDesc, translator, variant, } = props;
-    const [groupedRuntimeDescs, _] = useState(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterRuntime, variant));
+    const [groupedRuntimeDescs, setGroupedRuntimeDescs] = useState(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterRuntime, variant));
     const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
     const [defaultSet, setDefaultSet] = useState(false);
+    const [remoteModelsReady, setRemoteModelsReady] = useState(!multiServiceManager.remote);
     // Trick because overflow is an unknown prop of ActionMenu.Overlay.
     const overlayProps = {
         maxHeight: 'large',
         width: (variant === 'cell' ? 'small' : 'auto'),
     };
-    /*
-    // TODO this effect generates refresh of the react components which discards any change in the selection.
     useEffect(() => {
-      const updateGroupedRuntimeDescs = () => {
-        setGroupedKernelDescs(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterKernel, variant));
-      };
-      multiServiceManager.browser?.kernels.runningChanged.connect(updateGroupedRuntimeDescs);
-      multiServiceManager.browser?.kernelspecs.specsChanged.connect(updateGroupedRuntimeDescs);
-      multiServiceManager.browser?.sessions.runningChanged.connect(updateGroupedRuntimeDescs);
-      multiServiceManager.local.kernels.runningChanged.connect(updateGroupedRuntimeDescs);
-      multiServiceManager.local.kernelspecs.specsChanged.connect(updateGroupedRuntimeDescs);
-      multiServiceManager.local.sessions.runningChanged.connect(updateGroupedRuntimeDescs);
-      multiServiceManager.remote?.kernels.changed.connect(updateGroupedRuntimeDescs);
-      multiServiceManager.remote?.environments.changed.connect(updateGroupedRuntimeDescs);
-      // multiServiceManager.remote?.sessions.runningChanged.connect(updateOptions);
-      return () => {
-        multiServiceManager.browser?.kernels.runningChanged.disconnect(updateGroupedRuntimeDescs);
-        multiServiceManager.browser?.kernelspecs.specsChanged.disconnect(updateGroupedRuntimeDescs);
-        multiServiceManager.browser?.sessions.runningChanged.disconnect(updateGroupedRuntimeDescs);
-        multiServiceManager.local.kernels.runningChanged.disconnect(updateGroupedRuntimeDescs);
-        multiServiceManager.local.kernelspecs.specsChanged.disconnect(updateGroupedRuntimeDescs);
-        multiServiceManager.local.sessions.runningChanged.disconnect(updateGroupedRuntimeDescs);
-        multiServiceManager.remote?.kernels.changed.disconnect(updateGroupedRuntimeDescs);
-        multiServiceManager.remote?.environments.changed.disconnect(updateGroupedRuntimeDescs);
-        // multiServiceManager.remote?.sessions.runningChanged.disconnect(updateOptions);
-      };
-    }, [multiServiceManager, preference, translator, filterKernel, variant]);
-    */
+        let disposed = false;
+        const updateGroupedRuntimeDescs = () => {
+            if (disposed) {
+                return;
+            }
+            setGroupedRuntimeDescs(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterRuntime, variant));
+        };
+        const refreshRuntimeModels = multiServiceManager.remote?.runtimesManager.refreshRuntimeModels?.();
+        if (refreshRuntimeModels) {
+            refreshRuntimeModels
+                .catch(reason => {
+                console.error('Failed to resolve remote runtimes for the runtime picker.', reason);
+            })
+                .finally(() => {
+                if (disposed) {
+                    return;
+                }
+                updateGroupedRuntimeDescs();
+                setRemoteModelsReady(true);
+            });
+        }
+        else {
+            setRemoteModelsReady(true);
+        }
+        // Recompute immediately in case a runtime changed between the initial
+        // render and connecting the manager signals.
+        updateGroupedRuntimeDescs();
+        multiServiceManager.browser?.kernels.runningChanged.connect(updateGroupedRuntimeDescs);
+        multiServiceManager.browser?.kernelspecs.specsChanged.connect(updateGroupedRuntimeDescs);
+        multiServiceManager.browser?.sessions.runningChanged.connect(updateGroupedRuntimeDescs);
+        multiServiceManager.local.kernels.runningChanged.connect(updateGroupedRuntimeDescs);
+        multiServiceManager.local.kernelspecs.specsChanged.connect(updateGroupedRuntimeDescs);
+        multiServiceManager.local.sessions.runningChanged.connect(updateGroupedRuntimeDescs);
+        multiServiceManager.remote?.runtimesManager.changed.connect(updateGroupedRuntimeDescs);
+        multiServiceManager.remote?.environments.changed.connect(updateGroupedRuntimeDescs);
+        return () => {
+            disposed = true;
+            multiServiceManager.browser?.kernels.runningChanged.disconnect(updateGroupedRuntimeDescs);
+            multiServiceManager.browser?.kernelspecs.specsChanged.disconnect(updateGroupedRuntimeDescs);
+            multiServiceManager.browser?.sessions.runningChanged.disconnect(updateGroupedRuntimeDescs);
+            multiServiceManager.local.kernels.runningChanged.disconnect(updateGroupedRuntimeDescs);
+            multiServiceManager.local.kernelspecs.specsChanged.disconnect(updateGroupedRuntimeDescs);
+            multiServiceManager.local.sessions.runningChanged.disconnect(updateGroupedRuntimeDescs);
+            multiServiceManager.remote?.runtimesManager.changed.disconnect(updateGroupedRuntimeDescs);
+            multiServiceManager.remote?.environments.changed.disconnect(updateGroupedRuntimeDescs);
+        };
+    }, [multiServiceManager, preference?.id, translator, filterRuntime, variant]);
     useEffect(() => {
+        if (defaultSet) {
+            return;
+        }
         if (sessionContext && groupedRuntimeDescs) {
             const kernelId = sessionContext.session?.kernel?.id;
             if (kernelId) {
+                let matched = false;
                 Object.entries(groupedRuntimeDescs).forEach(([group, runtimeDescs]) => {
                     runtimeDescs.forEach(runtimeDesc => {
                         if (runtimeDesc.kernelId === kernelId) {
+                            matched = true;
                             setRuntimeDesc(runtimeDesc);
                         }
                     });
                 });
+                if (!matched && !remoteModelsReady) {
+                    return;
+                }
             }
         }
         setDefaultSet(true);
-    }, [groupedRuntimeDescs]);
+    }, [
+        defaultSet,
+        groupedRuntimeDescs,
+        remoteModelsReady,
+        sessionContext,
+        setRuntimeDesc,
+    ]);
     // For cell using submenu instead of group would be nice unfortunately the feature
     // is not yet implemented in the component there has been a not-great demo story.
     // https://github.com/primer/react/pull/3585

package/lib/components/runtimes/RuntimePickerCell.js

@@ -99,6 +99,6 @@ export function RuntimePickerCell(props) {
     const datalayerMeta = model.getMetadata('datalayer') ?? {};
     return (_jsxs(_Fragment, { children: [_jsx(RuntimePickerBase, { display: "menu", filterRuntime: filterKernel, preference: preference, multiServiceManager: multiServiceManager, runtimeDesc: datalayerMeta.kernel ? datalayerMeta.kernel : undefined, setRuntimeDesc: setSelectedRuntimeDesc, variant: 'cell', preActions: _jsxs(ActionList.Item, { disabled: !multiServiceManager.remote, onSelect: setCell, selected: hasCellRuntime, title: !multiServiceManager.remote
                         ? 'You are not connected with Datalayer.'
-                        : 'Assign a new temporary Runtime on each Cell execution.', children: [_jsx(ActionList.LeadingVisual, { children: _jsx(CloudUploadIcon, {}) }), trans.__('Assign a Cell Runtime')] }), postActions: token || !logIn ? (_jsxs(_Fragment, { children: [RuntimeSnippetsFacade.supports(preference?.language ?? '') && (_jsx(ActionList.Item, { onSelect: openVariableDialog, disabled: !isForeign, title: trans.__('Define variables to transfer between the document kernel and the cell kernel.'), children: trans.__('Define Cell Variables Transfer') })), !configuration.whiteLabel && (_jsx(ActionList.Item, { onSelect: openSnippetDialog, disabled: snippets.length === 0, title: trans.__('Inject a code snippet at the end of the cell.'), children: trans.__('Inject Code Snippet') }))] })) : (_jsx(ActionList.Item, { onSelect: props.logIn, title: 'Connect to the Runtime provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Connect to the Runtime provider" }) })), translator: translator }), isVariableDialogOpen && (_jsx(RuntimeCellVariablesDialog, { model: model, onClose: closeVariableDialog, preference: preference, sessionContext: sessionContext, translator: translator })), isSnippetDialogOpen && (_jsx(SnippetDialog, { language: language, model: model, snippets: snippets, onClose: closeSnippetDialog, markdownParser: markdownParser, sanitizer: sanitizer })), isKernelDialogOpen && (_jsx(RuntimeLauncherDialog, { manager: multiServiceManager.remote, onSubmit: onStartRemote, startRuntime: 'defer', submitLabel: "Assign", markdownParser: markdownParser, sanitizer: sanitizer }))] }));
+                        : 'Assign a new temporary Runtime on each Cell execution.', children: [_jsx(ActionList.LeadingVisual, { children: _jsx(CloudUploadIcon, {}) }), trans.__('Assign a Cell Runtime')] }), postActions: token || !logIn ? (_jsxs(_Fragment, { children: [RuntimeSnippetsFacade.supports(preference?.language ?? '') && (_jsx(ActionList.Item, { onSelect: openVariableDialog, disabled: !isForeign, title: trans.__('Define variables to transfer between the document kernel and the cell kernel.'), children: trans.__('Define Cell Variables Transfer') })), !configuration.whiteLabel && (_jsx(ActionList.Item, { onSelect: openSnippetDialog, disabled: snippets.length === 0, title: trans.__('Inject a code snippet at the end of the cell.'), children: trans.__('Inject Code Snippet') }))] })) : (_jsx(ActionList.Item, { onSelect: props.logIn, title: 'Runtime Provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Click to sign in" }) })), translator: translator }), isVariableDialogOpen && (_jsx(RuntimeCellVariablesDialog, { model: model, onClose: closeVariableDialog, preference: preference, sessionContext: sessionContext, translator: translator })), isSnippetDialogOpen && (_jsx(SnippetDialog, { language: language, model: model, snippets: snippets, onClose: closeSnippetDialog, markdownParser: markdownParser, sanitizer: sanitizer })), isKernelDialogOpen && (_jsx(RuntimeLauncherDialog, { manager: multiServiceManager.remote, onSubmit: onStartRemote, startRuntime: 'defer', submitLabel: "Assign", markdownParser: markdownParser, sanitizer: sanitizer }))] }));
 }
 export default RuntimePickerCell;

package/lib/components/runtimes/RuntimePickerNotebook.js

@@ -220,7 +220,7 @@ export function RuntimePickerNotebook(props) {
                     Launch a New Runtime
                   </Button>
                   */
-                    _jsx(_Fragment, {})) : (_jsx(ActionList.Item, { onSelect: props.logIn, title: 'Connect to Runtime provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Connect to the Runtime provider" }) })) }) }), !selectedRuntimeDesc?.kernelId &&
+                    _jsx(_Fragment, {})) : (_jsx(ActionList.Item, { onSelect: props.logIn, title: 'Runtime Provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Click to sign in." }) })) }) }), !selectedRuntimeDesc?.kernelId &&
                 selectedRuntimeDesc?.location === 'remote' && (_jsxs(_Fragment, { children: [_jsx(RuntimeReservationControl, { disabled: outOfCredits || selectedRuntimeDesc?.location !== 'remote', label: 'Time reservation', max: effectiveMaxMinutes, time: timeLimit, onTimeChange: setTimeLimit, error: outOfCredits && maxFromCredits >= 0
                             ? 'You must add credits to your account.'
                             : timeLimit === 0

package/lib/components/runtimes/RuntimeSimplePicker.js

@@ -134,7 +134,7 @@ export function RuntimeSimplePicker(props) {
                                                     setRuntimeLocation('remote');
                                                     assignRuntime({
                                                         runtimeDesc: {
-                                                            name: kernelModel.environment_name,
+                                                            name: kernelModel.environment.name,
                                                             language: '',
                                                             location: 'remote',
                                                             displayName: kernelModel.given_name,
@@ -144,7 +144,8 @@ export function RuntimeSimplePicker(props) {
                                                         },
                                                         runtimeModel: kernelModel,
                                                     });
-                                                }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(ArtifactIcon, { type: "runtime" }) }), kernelModel.given_name, _jsx(ActionList.Description, { variant: "block", children: kernelModel.environment_name })] }, kernelModel.id));
+                                                }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(ArtifactIcon, { type: "runtime" }) }), kernelModel.given_name, _jsx(ActionList.Description, { variant: "block", children: kernelModel.environment.title ||
+                                                            kernelModel.environment.name })] }, kernelModel.id));
                                         })] })), _jsx(ActionList.Divider, {}), _jsxs(ActionList.Group, { children: [_jsxs(ActionList.Item, { selected: false, onSelect: handleLaunchRemoteKernel, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PlusIcon, {}) }), "Launch a new Runtime\u2026"] }), _jsxs(ActionList.Item, { disabled: runtimeLocation !== 'browser', selected: false, onSelect: () => {
                                                 setDialogCause(RuntimeDialogCause.Transfer);
                                             }, title: "Transfer the state of the current Runtime to a new Remote Runtime.", children: [_jsx(ActionList.LeadingVisual, { children: _jsx(UnfoldIcon, {}) }), "Transfer state to a new Runtime\u2026"] })] })] }) })] }), multiServiceManager?.remote && dialogCause > 0 && (_jsx(RuntimeLauncherDialog, { dialogTitle: dialogCause === RuntimeDialogCause.Transfer

package/lib/components/runtimes/RuntimeUtils.js

@@ -64,12 +64,12 @@ export function getGroupedRuntimeDescs(multiServiceManager, kernelId, translator
         .map(runtime => {
         const environment = multiServiceManager
             .remote.environments.get()
-            .find(env => env.name === runtime.environment_name);
+            .find(env => env.name === runtime.environment.name);
         return {
             kernelId: runtime.id,
             name: environment.name,
             language: environment.language,
-            displayName: runtime.given_name ?? environment.title,
+            displayName: environment.title || runtime.given_name || environment.name,
             location: 'remote',
             podName: runtime.pod_name,
             gpu: environment.resources?.['nvidia.com/gpu'],

package/lib/context/GraphFlowChart.js

@@ -14,7 +14,7 @@ import { useMemo } from 'react';
 import ReactECharts from 'echarts-for-react';
 /** Category definitions for ECharts graph. */
 const CATEGORIES = [
-    { name: 'start', itemStyle: { color: '#58a6ff' } },
+    { name: 'start', itemStyle: { color: '#16A085' } },
     { name: 'step', itemStyle: { color: '#3fb950' } },
     { name: 'end', itemStyle: { color: '#f85149' } },
     { name: 'end_or_continue', itemStyle: { color: '#d29922' } },

package/lib/context/TokenUsageChart.js

@@ -568,7 +568,7 @@ export function TokenUsageChart({ serviceName, agentId, runtimeId, apiKey, datal
                     ]
                     : [[initialTimestampMsRef.current, 0]],
             })),
-            color: ['#2da44e', '#0969da', '#8250df', '#bf8700', '#cf222e'],
+            color: ['#2da44e', '#16A085', '#0ea5a5', '#bf8700', '#cf222e'],
         };
     }, [turns]);
     return (_jsx(ReactECharts, { option: option, style: { height, width: '100%' }, opts: { renderer: 'canvas' }, notMerge: true, lazyUpdate: true }));

package/lib/context/TurnGraphChart.js

@@ -40,8 +40,8 @@ import { Text } from '@primer/react';
 //   - reducer    → alias for the reducer half of a join
 //   - start/end  → graph entry / exit markers
 const NODE_COLORS = {
-    root: '#58a6ff',
-    start: '#58a6ff',
+    root: '#16A085',
+    start: '#16A085',
     step: '#3fb950',
     end: '#f85149',
     end_or_continue: '#d29922',

package/lib/examples/A2UiAgentExample.js

@@ -312,7 +312,7 @@ const A2UiAgentExample = () => {
                         borderRadius: 2,
                         px: 3,
                         py: 2,
-                        bg: 'canvas.subtle',
+                        bg: 'canvas.default',
                         display: 'flex',
                         alignItems: 'center',
                         gap: 2,
@@ -355,7 +355,7 @@ const A2UiAgentExample = () => {
                                             py: 2,
                                             borderBottom: '1px solid',
                                             borderColor: 'border.default',
-                                            bg: 'canvas.subtle',
+                                            bg: 'canvas.default',
                                             display: 'flex',
                                             justifyContent: 'space-between',
                                             alignItems: 'center',
@@ -411,7 +411,7 @@ const A2UiAgentExample = () => {
                                                 m: 0,
                                                 p: 2,
                                                 borderRadius: 2,
-                                                bg: 'canvas.subtle',
+                                                bg: 'canvas.default',
                                                 border: '1px solid',
                                                 borderColor: 'border.default',
                                                 fontSize: 0,
@@ -437,6 +437,6 @@ const A2UiAgentExample = () => {
                                 justifyContent: 'center',
                                 height: '100%',
                                 gap: 3,
-                            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Creating A2UI agent..." })] })) : chatError || !agentId ? (_jsx(Box, { sx: { p: 3 }, children: _jsxs(Text, { sx: { color: 'danger.fg' }, children: ["Failed to initialize chat:", ' ', chatError || 'No agent id returned'] }) })) : (_jsx(Chat, { protocol: "ag-ui", baseUrl: baseUrl, agentId: agentId, title: "A2UI Agent", description: "Generate interactive A2UI surfaces", placeholder: "Describe the UI you want...", showHeader: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${baseUrl}/api/v1/history`, suggestions: SUGGESTIONS, submitOnSuggestionClick: true, pendingPrompt: pendingPrompt, renderToolResult: renderToolResult })) })] }) }) }));
+                            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Creating A2UI agent..." })] })) : chatError || !agentId ? (_jsx(Box, { sx: { p: 3 }, children: _jsxs(Text, { sx: { color: 'danger.fg' }, children: ["Failed to initialize chat:", ' ', chatError || 'No agent id returned'] }) })) : (_jsx(Chat, { protocol: "ag-ui", baseUrl: baseUrl, agentId: agentId, title: "A2UI Agent", description: "Generate interactive A2UI surfaces", placeholder: "Describe the UI you want...", showHeader: true, kernelIndicatorPlacement: "right", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${baseUrl}/api/v1/history`, suggestions: SUGGESTIONS, submitOnSuggestionClick: true, pendingPrompt: pendingPrompt, renderToolResult: renderToolResult })) })] }) }) }));
 };
 export default A2UiAgentExample;

package/lib/examples/A2UiComponentsGalleryExample.js

@@ -817,7 +817,7 @@ function GalleryContent({ onAction, }) {
                     borderColor: 'border.default',
                     borderRadius: 2,
                     p: 3,
-                    backgroundColor: 'canvas.subtle',
+                    backgroundColor: 'canvas.default',
                     display: 'flex',
                     flexDirection: 'column',
                     gap: 3,
@@ -845,14 +845,14 @@ const A2UiComponentsGalleryExample = () => {
                             py: 3,
                             borderBottom: '1px solid',
                             borderColor: 'border.default',
-                            backgroundColor: 'canvas.subtle',
+                            backgroundColor: 'canvas.default',
                         }, children: [_jsx(Text, { as: "h1", sx: { fontSize: 3, fontWeight: 'bold' }, children: "\uD83C\uDFA8 A2UI Components Gallery" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Showcases the A2UI basic catalog rendered live via MessageProcessor and A2uiSurface." })] }), _jsx(GalleryContent, { onAction: handleAction }), _jsx(Box, { sx: {
                             borderTop: '1px solid',
                             borderColor: 'border.default',
                             p: 3,
                             fontFamily: 'mono',
                             fontSize: 0,
-                            backgroundColor: 'canvas.subtle',
+                            backgroundColor: 'canvas.default',
                             whiteSpace: 'pre-wrap',
                             maxHeight: 220,
                             overflow: 'auto',

package/lib/examples/A2UiContactCardExample.js

@@ -138,7 +138,7 @@ function ContactCardContent({ onAction, }) {
                         borderColor: 'border.default',
                         borderRadius: 2,
                         p: 3,
-                        backgroundColor: 'canvas.subtle',
+                        backgroundColor: 'canvas.default',
                     }, children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id))) })] }));
 }
 const A2UiContactCardExample = () => {
@@ -158,7 +158,7 @@ const A2UiContactCardExample = () => {
                             py: 3,
                             borderBottom: '1px solid',
                             borderColor: 'border.default',
-                            backgroundColor: 'canvas.subtle',
+                            backgroundColor: 'canvas.default',
                         }, children: [_jsx(Text, { as: "h1", sx: { fontSize: 3, fontWeight: 'bold' }, children: "\uD83D\uDC64 A2UI Contact Card" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Uses MessageProcessor + A2uiSurface with native A2UI protocol messages." })] }), _jsxs(Box, { sx: {
                             display: 'grid',
                             gridTemplateColumns: ['1fr', '2fr 1fr'],
@@ -169,7 +169,7 @@ const A2UiContactCardExample = () => {
                                     borderColor: 'border.default',
                                     borderRadius: 2,
                                     p: 3,
-                                    backgroundColor: 'canvas.subtle',
+                                    backgroundColor: 'canvas.default',
                                     fontFamily: 'mono',
                                     fontSize: 0,
                                     whiteSpace: 'pre-wrap',

package/lib/examples/A2UiRestaurantExample.js

@@ -152,7 +152,7 @@ const A2UiRestaurantExample = () => {
                             p: 3,
                             borderBottom: '1px solid',
                             borderColor: 'border.default',
-                            backgroundColor: 'canvas.subtle',
+                            backgroundColor: 'canvas.default',
                         }, children: [_jsx(Text, { as: "h1", sx: { fontSize: '1.25rem', fontWeight: 'bold' }, children: "\uD83E\uDD16 A2UI Restaurant Example" }), _jsx(Text, { sx: { fontSize: '0.875rem', color: 'fg.muted' }, children: "Uses MessageProcessor and A2uiSurface with native A2UI backend messages." })] }), _jsxs(Box, { sx: { flex: 1, p: 3 }, children: [!hasData && !isLoading && !error && (_jsx(RestaurantSearch, { onSearch: handleSearch, isLoading: isLoading })), isLoading && (_jsxs(Box, { sx: {
                                     display: 'flex',
                                     flexDirection: 'column',
@@ -180,7 +180,7 @@ const A2UiRestaurantExample = () => {
                             p: 2,
                             borderTop: '1px solid',
                             borderColor: 'border.default',
-                            backgroundColor: 'canvas.subtle',
+                            backgroundColor: 'canvas.default',
                             textAlign: 'center',
                         }, children: _jsxs(Text, { sx: { fontSize: '0.75rem', color: 'fg.muted' }, children: ["Backend: ", a2uiRestaurantEndpoint] }) })] }) }) }));
 };