@datalayer/agent-runtimes 1.0.21 → 1.0.25

package/lib/components/runtimes/RuntimePickerNotebook.js

@@ -4,24 +4,22 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * Distributed under the terms of the Modified BSD License.
  */
 import { useCallback, useEffect, useState } from 'react';
-import { ActionList, FormControl, ToggleSwitch, Tooltip, IconButton, } from '@primer/react';
+import { ActionList } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { AlertIcon } from '@primer/octicons-react';
 import { JSONExt } from '@lumino/coreutils';
 import { KernelExecutor } from '@datalayer/jupyter-react';
 import { RuntimeSnippetsFacade } from '../../jupyter';
 import { ExternalTokenSilentLogin } from '@datalayer/core/lib/components/iam';
-import { useCoreStore, useIAMStore } from '../../state/substates';
-import { RuntimeReservationControl, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES, } from './RuntimeReservationControl';
+import { useIAMStore } from '../../state/substates';
 import { RuntimeVariables } from './RuntimeVariables';
-import { RuntimePickerBase } from './RuntimePickerBase';
+import { CodeSandboxPicker } from '../code-sandboxes/CodeSandboxPicker';
+import { creditsLimitFor, NewCodeSandboxControls, useNewCodeSandboxAllowance, } from '../code-sandboxes/NewCodeSandboxControls';
 /**
  * Runtime Picker components for a Notebook.
  */
 export function RuntimePickerNotebook(props) {
     const { multiServiceManager, sessionContext, setValue, translator } = props;
-    const { configuration } = useCoreStore();
-    const { credits, refreshCredits, token, user } = useIAMStore();
+    const { refreshCredits, token } = useIAMStore();
     const [selectedRuntimeDesc, setSelectedRuntimeDesc] = useState();
     const [timeLimit, setTimeLimit] = useState(10);
     const [userStorage, setUserStorage] = useState(false);
@@ -107,36 +105,22 @@ export function RuntimePickerNotebook(props) {
             setTransferTo(RuntimeSnippetsFacade.supports(runtimeDesc.language));
         }
     }, [selectedRuntimeDesc]);
-    const handleUserStorageChange = useCallback((e) => {
-        e.preventDefault();
-        setUserStorage(!userStorage);
-    }, [userStorage]);
+    // The burning rate of the choice, and what the account allows for it —
+    // the same one copy of the arithmetic the launcher uses.
+    const resolvedBurningRate = selectedRuntimeDesc?.burningRate ??
+        multiServiceManager.remote?.environments
+            .get()
+            .find(env => env.name === selectedRuntimeDesc?.name)?.burning_rate;
+    const allowance = useNewCodeSandboxAllowance(resolvedBurningRate);
     useEffect(() => {
-        const resolvedBurningRate = selectedRuntimeDesc?.burningRate ??
-            multiServiceManager.remote?.environments
-                .get()
-                .find(env => env.name === selectedRuntimeDesc?.name)?.burning_rate;
-        const includedRuns = user?.subscription?.usage?.included_runs ??
-            user?.subscription?.included_runs;
-        const currentRuns = user?.subscription?.usage?.current_runs ??
-            user?.subscription?.current_runs ??
-            user?.subscription?.used_runs;
-        const hasKnownRunAllowance = typeof includedRuns === 'number';
-        const hasRemainingRuns = hasKnownRunAllowance &&
-            typeof currentRuns === 'number' &&
-            includedRuns > 0 &&
-            currentRuns < includedRuns;
-        const hasKnownCredits = typeof credits?.available === 'number';
-        const maxMinutes = selectedRuntimeDesc?.location === 'remote' && resolvedBurningRate
-            ? Math.floor((credits?.available ?? 0) / resolvedBurningRate / 60.0)
+        const maxMinutes = selectedRuntimeDesc?.location === 'remote'
+            ? allowance.maxFromCredits
             : undefined;
         const effectiveTimeLimit = selectedRuntimeDesc?.location === 'remote'
             ? Math.max(1, Math.min(timeLimit, maxMinutes && maxMinutes > 0 ? maxMinutes : 10))
             : timeLimit;
         const creditsLimit = selectedRuntimeDesc?.location === 'remote' && resolvedBurningRate
-            ? Math.min(effectiveTimeLimit, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES) *
-                resolvedBurningRate *
-                60
+            ? creditsLimitFor(effectiveTimeLimit, resolvedBurningRate)
             : undefined;
         const requiresRuntimeStart = !!selectedRuntimeDesc && !selectedRuntimeDesc.kernelId;
         if (requiresRuntimeStart && selectedRuntimeDesc.location === 'remote') {
@@ -144,9 +128,9 @@ export function RuntimePickerNotebook(props) {
                 setValue({ runtime: null, selectedVariables: toTransfer });
                 return;
             }
-            if (hasKnownCredits &&
-                hasKnownRunAllowance &&
-                !hasRemainingRuns &&
+            if (allowance.hasKnownCredits &&
+                allowance.hasKnownRunAllowance &&
+                !allowance.hasRemainingRuns &&
                 (!creditsLimit || creditsLimit <= 0)) {
                 setValue({ runtime: null, selectedVariables: toTransfer });
                 return;
@@ -171,38 +155,18 @@ export function RuntimePickerNotebook(props) {
         toTransfer,
         timeLimit,
         multiServiceManager.remote,
-        credits?.available,
-        user,
+        resolvedBurningRate,
+        allowance,
     ]);
     const { kernelPreference: { canStart }, } = sessionContext;
-    const resolvedBurningRate = selectedRuntimeDesc?.burningRate ??
-        multiServiceManager.remote?.environments
-            .get()
-            .find(env => env.name === selectedRuntimeDesc?.name)?.burning_rate;
-    const maxFromCredits = resolvedBurningRate
-        ? Math.floor((credits?.available ?? 0) / resolvedBurningRate / 60.0)
-        : -1;
-    const includedRuns = user?.subscription?.usage?.included_runs ??
-        user?.subscription?.included_runs;
-    const currentRuns = user?.subscription?.usage?.current_runs ??
-        user?.subscription?.current_runs ??
-        user?.subscription?.used_runs;
-    const hasKnownRunAllowance = typeof includedRuns === 'number';
-    const hasRemainingRuns = hasKnownRunAllowance &&
-        typeof currentRuns === 'number' &&
-        includedRuns > 0 &&
-        currentRuns < includedRuns;
-    const hasKnownCredits = typeof credits?.available === 'number';
     const effectiveMaxMinutes = selectedRuntimeDesc?.location === 'remote'
-        ? hasKnownCredits && hasKnownRunAllowance && !hasRemainingRuns
-            ? Math.max(1, maxFromCredits)
-            : Math.max(10, maxFromCredits > 0 ? maxFromCredits : 0)
-        : Math.max(1, maxFromCredits);
-    const outOfCredits = hasKnownCredits &&
-        hasKnownRunAllowance &&
-        !hasRemainingRuns &&
-        maxFromCredits < Number.EPSILON;
-    return (_jsxs(Box, { as: "form", className: "dla-Runtimes-picker", children: [_jsx(Box, { sx: { padding: 'var(--stack-padding-condensed) 0' }, children: _jsx(RuntimePickerBase, { display: "radio", disabled: canStart === false, preference: {
+        ? allowance.effectiveMaxMinutes
+        : Math.max(1, allowance.maxFromCredits ?? -1);
+    const outOfCredits = allowance.hasKnownCredits &&
+        allowance.hasKnownRunAllowance &&
+        !allowance.hasRemainingRuns &&
+        (allowance.maxFromCredits ?? -1) < Number.EPSILON;
+    return (_jsxs(Box, { as: "form", className: "dla-Runtimes-picker", children: [_jsx(Box, { sx: { padding: 'var(--stack-padding-condensed) 0' }, children: _jsx(CodeSandboxPicker, { display: "radio", disabled: canStart === false, preference: {
                         id: sessionContext.session?.id,
                         kernelDisplayName: sessionContext.kernelPreference.shouldStart
                             ? sessionContext.kernelDisplayName
@@ -221,12 +185,13 @@ export function RuntimePickerNotebook(props) {
                   </Button>
                   */
                     _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
-                                ? 'You must set a time limit.'
-                                : undefined, burningRate: selectedRuntimeDesc.burningRate }), !configuration.whiteLabel && (_jsxs(FormControl, { disabled: !!selectedRuntimeDesc?.kernelId ||
-                            selectedRuntimeDesc?.location !== 'remote', layout: "horizontal", children: [_jsxs(FormControl.Label, { id: "user-storage-picker-label", children: ["User storage", _jsx(Tooltip, { text: "The runtime will be slower to start.", direction: "e", style: { marginLeft: 3 }, children: _jsx(IconButton, { icon: AlertIcon, "aria-label": "", variant: "invisible" }) })] }), _jsx(ToggleSwitch, { disabled: !!selectedRuntimeDesc?.kernelId ||
-                                    selectedRuntimeDesc?.location !== 'remote', checked: userStorage, size: "small", onClick: handleUserStorageChange, "aria-labelledby": "user-storage-picker-label" })] }))] })), canTransferFrom && canTransferTo && (_jsx(RuntimeVariables, { selectedVariables: toTransfer, setSelectVariable: setSelectedVariables, transferVariables: transferVariables, setTransferVariable: setTransferVariable, kernelVariables: kernelVariables, translator: translator }))] }));
+                selectedRuntimeDesc?.location === 'remote' && (
+            // The user asked for a NEW sandbox: the questions are the
+            // launcher's, asked through the launcher's own controls.
+            _jsx(NewCodeSandboxControls, { burningRate: selectedRuntimeDesc.burningRate, timeLimit: timeLimit, onTimeChange: setTimeLimit, max: effectiveMaxMinutes, disabled: outOfCredits, error: outOfCredits && (allowance.maxFromCredits ?? -1) >= 0
+                    ? 'You must add credits to your account.'
+                    : timeLimit === 0
+                        ? 'You must set a time limit.'
+                        : undefined, userStorage: userStorage, onUserStorageToggle: () => setUserStorage(current => !current) })), canTransferFrom && canTransferTo && (_jsx(RuntimeVariables, { selectedVariables: toTransfer, setSelectVariable: setSelectedVariables, transferVariables: transferVariables, setTransferVariable: setTransferVariable, kernelVariables: kernelVariables, translator: translator }))] }));
 }
 export default RuntimePickerNotebook;

package/lib/components/runtimes/RuntimeReservationControl.js

@@ -18,7 +18,14 @@ export const MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES = 24 * 60;
  */
 export function RuntimeReservationControl(props) {
     const { addCredits, burningRate, disabled, error, label, max: maxProps, onTimeChange, time, } = props;
-    const max = Math.max(1, Math.min(maxProps, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES));
+    // The caller computes its maximum from the credits and the burning rate of
+    // an environment, either of which may not be known yet — and a slider given
+    // `NaN` renders nothing but warnings. Fall back to what a reservation may
+    // hold in any case.
+    const requestedMax = Number.isFinite(maxProps)
+        ? maxProps
+        : MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES;
+    const max = Math.max(1, Math.min(requestedMax, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES));
     const displayedTime = Number.isFinite(time)
         ? Math.min(max, Math.max(1, time))
         : 1;

package/lib/components/runtimes/RuntimeSimplePicker.js

@@ -146,7 +146,7 @@ export function RuntimeSimplePicker(props) {
                                                     });
                                                 }, 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: () => {
+                                        })] })), _jsx(ActionList.Divider, {}), _jsxs(ActionList.Group, { children: [_jsxs(ActionList.Item, { selected: false, onSelect: handleLaunchRemoteKernel, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PlusIcon, {}) }), "Launch a new Code Sandbox\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
                     ? 'Switch to a new Cloud Runtime'

package/lib/components/runtimes/RuntimeUtils.js

@@ -13,20 +13,22 @@ const ASSIGN_EXISTING_RUNTIME_LABEL = 'Assign an existing Runtime';
 export function getGroupedRuntimeDescs(multiServiceManager, kernelId, translator, filterKernels = () => true, variant) {
     translator = translator ?? nullTranslator;
     const trans = translator.load('jupyterlab');
+    // The specifications land asynchronously, and a runtime that already runs
+    // is listed with or without them: what a kernel needs to be picked is its
+    // identifier, the specification only names it. Only the environments to
+    // start a new runtime in come from the specifications, and they wait.
     const specs = multiServiceManager.local.kernelspecs.specs;
     const sessions = multiServiceManager.local.sessions.running();
     const kernels = {};
     // Add the sessions.
     const runningSessions = Array.from(sessions)
-        .filter(session => session.kernel &&
-        session.kernel.id !== kernelId &&
-        specs.kernelspecs[session.kernel.name])
+        .filter(session => session.kernel && session.kernel.id !== kernelId)
         .map(session => {
-        const spec = specs.kernelspecs[session.kernel.name];
+        const spec = specs?.kernelspecs[session.kernel.name];
         return {
             kernelId: session.kernel.id,
-            name: spec.name,
-            language: spec.language,
+            name: spec?.name ?? session.kernel.name,
+            language: spec?.language ?? '',
             displayName: session.name || PathExt.basename(session.path),
             location: 'local',
         };
@@ -34,12 +36,13 @@ export function getGroupedRuntimeDescs(multiServiceManager, kernelId, translator
         .concat(Array.from(multiServiceManager.browser?.sessions.running() ?? [])
         .filter(session => session.kernel && session.kernel.id !== kernelId)
         .map(session => {
-        const spec = multiServiceManager.browser.kernelspecs.specs.kernelspecs[session.kernel.name];
+        // The browser specifications load on their own schedule.
+        const spec = multiServiceManager.browser?.kernelspecs.specs?.kernelspecs[session.kernel.name];
         return {
             id: '', // TODO Assign a proper ID.
             kernelId: session.kernel.id,
-            name: spec.name,
-            language: spec.language,
+            name: spec?.name ?? session.kernel.name,
+            language: spec?.language ?? '',
             displayName: session.name || PathExt.basename(session.path),
             location: 'browser',
         };
@@ -50,12 +53,12 @@ export function getGroupedRuntimeDescs(multiServiceManager, kernelId, translator
     const runningKernels = Array.from(multiServiceManager.local.kernels.running())
         .filter(k => !listedAsSession.includes(k.id))
         .map(k => {
-        const spec = specs.kernelspecs[k.name];
+        const spec = specs?.kernelspecs[k.name];
         return {
             kernelId: k.id,
-            name: spec.name,
-            language: spec.language,
-            displayName: spec.display_name,
+            name: spec?.name ?? k.name,
+            language: spec?.language ?? '',
+            displayName: spec?.display_name ?? k.name,
             location: 'local',
         };
     })
@@ -78,17 +81,30 @@ export function getGroupedRuntimeDescs(multiServiceManager, kernelId, translator
         .concat(Array.from(multiServiceManager.browser?.kernels.running() ?? [])
         .filter(k => !listedAsSession.includes(k.id))
         .map(k => {
-        const spec = multiServiceManager.browser.kernelspecs.specs.kernelspecs[k.name];
+        const spec = multiServiceManager.browser?.kernelspecs.specs?.kernelspecs[k.name];
         return {
             kernelId: k.id,
-            name: spec.name,
-            language: spec.language,
-            displayName: spec.display_name,
+            name: spec?.name ?? k.name,
+            language: spec?.language ?? '',
+            displayName: spec?.display_name ?? k.name,
             location: 'browser',
         };
     }))
         .filter(filterKernels);
     runningSessions.push(...runningKernels);
+    // The sources overlap — a kernel of a session, a manager standing in for
+    // another — and a runtime listed twice would be picked twice.
+    const seen = new Set();
+    const distinctRunning = runningSessions.filter(desc => {
+        const key = `${desc.location}:${desc.kernelId ?? desc.name}`;
+        if (seen.has(key)) {
+            return false;
+        }
+        seen.add(key);
+        return true;
+    });
+    runningSessions.length = 0;
+    runningSessions.push(...distinctRunning);
     if (runningSessions.length) {
         const key = variant === 'cell'
             ? ASSIGN_EXISTING_REMOTE_RUNTIME_LABEL
@@ -96,7 +112,7 @@ export function getGroupedRuntimeDescs(multiServiceManager, kernelId, translator
         kernels[key] = runningSessions;
     }
     // Environments.
-    const environments = Object.values(specs.kernelspecs)
+    const environments = Object.values(specs?.kernelspecs ?? {})
         .filter(spec => !!spec)
         .map(spec => ({
         name: spec.name,

package/lib/components/runtimes/index.d.ts

@@ -9,3 +9,4 @@ export * from './RuntimeSimplePicker';
 export * from './RuntimeTransfer';
 export * from './RuntimeUtils';
 export * from './RuntimeVariables';
+export * from '../code-sandboxes';

package/lib/components/runtimes/index.js

@@ -13,3 +13,5 @@ export * from './RuntimeSimplePicker';
 export * from './RuntimeTransfer';
 export * from './RuntimeUtils';
 export * from './RuntimeVariables';
+// The picker and the launcher moved in with the code sandboxes.
+export * from '../code-sandboxes';

package/lib/context/CostUsageChart.d.ts

@@ -3,11 +3,11 @@ export interface CostUsageChartProps {
     agentId?: string;
     runtimeId?: string;
     apiKey?: string;
-    datalayerUrl?: string;
+    otelUrl?: string;
     wsUrl?: string;
     liveCumulativeUsd?: number;
     liveTimestampMs?: number | null;
     height?: number;
 }
-export declare function CostUsageChart({ serviceName, agentId, runtimeId, apiKey, datalayerUrl, wsUrl, liveCumulativeUsd, liveTimestampMs, height, }: CostUsageChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function CostUsageChart({ serviceName, agentId, runtimeId, apiKey, otelUrl, wsUrl, liveCumulativeUsd, liveTimestampMs, height, }: CostUsageChartProps): import("react/jsx-runtime").JSX.Element;
 export default CostUsageChart;

package/lib/context/CostUsageChart.js

@@ -278,7 +278,7 @@ function maxDefined(rows, selector) {
         return max === undefined ? value : Math.max(max, value);
     }, undefined);
 }
-export function CostUsageChart({ serviceName, agentId, runtimeId, apiKey, datalayerUrl, wsUrl, liveCumulativeUsd, liveTimestampMs, height = 160, }) {
+export function CostUsageChart({ serviceName, agentId, runtimeId, apiKey, otelUrl, wsUrl, liveCumulativeUsd, liveTimestampMs, height = 160, }) {
     const cacheServiceKey = String(serviceName || runtimeId || '').trim() || undefined;
     const monitoringCache = useAgentRuntimeStore(s => s.monitoringCache);
     const mergeCostPoints = useAgentRuntimeStore(s => s.mergeCostPoints);
@@ -327,7 +327,7 @@ export function CostUsageChart({ serviceName, agentId, runtimeId, apiKey, datala
     }, [agentId, cacheServiceKey, cachedEntry]);
     // Bootstrap chart with existing OTEL cost metrics before websocket updates.
     useEffect(() => {
-        if (!cacheServiceKey || !apiKey || !datalayerUrl) {
+        if (!cacheServiceKey || !apiKey || !otelUrl) {
             return;
         }
         let cancelled = false;
@@ -337,14 +337,14 @@ export function CostUsageChart({ serviceName, agentId, runtimeId, apiKey, datala
                     fetchOtelMetricRows({
                         metric: COST_RUN_METRIC,
                         serviceName,
-                        datalayerUrl,
+                        otelUrl,
                         apiKey,
                         limit: 1000,
                     }),
                     fetchOtelMetricRows({
                         metric: COST_CUMULATIVE_METRIC,
                         serviceName,
-                        datalayerUrl,
+                        otelUrl,
                         apiKey,
                         limit: 1000,
                     }),
@@ -391,7 +391,7 @@ export function CostUsageChart({ serviceName, agentId, runtimeId, apiKey, datala
         agentId,
         apiKey,
         cacheServiceKey,
-        datalayerUrl,
+        otelUrl,
         mergeCostPoints,
         runtimeId,
         serviceName,
@@ -439,7 +439,7 @@ export function CostUsageChart({ serviceName, agentId, runtimeId, apiKey, datala
         if (!cacheServiceKey || !apiKey)
             return;
         const rawBaseUrl = wsUrl ||
-            datalayerUrl ||
+            otelUrl ||
             (typeof window !== 'undefined' ? window.location.origin : '');
         if (!rawBaseUrl)
             return;
@@ -496,7 +496,7 @@ export function CostUsageChart({ serviceName, agentId, runtimeId, apiKey, datala
         apiKey,
         cacheServiceKey,
         mergeCostPoints,
-        datalayerUrl,
+        otelUrl,
         runtimeId,
         serviceName,
         wsUrl,

package/lib/context/TokenUsageChart.d.ts

@@ -3,7 +3,7 @@ export interface TokenUsageChartProps {
     agentId?: string;
     runtimeId?: string;
     apiKey?: string;
-    datalayerUrl?: string;
+    otelUrl?: string;
     wsUrl?: string;
     liveSystemPromptTokens?: number;
     liveToolsDescriptionTokens?: number;
@@ -14,5 +14,5 @@ export interface TokenUsageChartProps {
     height?: number;
     days?: number;
 }
-export declare function TokenUsageChart({ serviceName, agentId, runtimeId, apiKey, datalayerUrl, wsUrl, liveSystemPromptTokens, liveToolsDescriptionTokens, liveUserMessageTokens, liveAgentMessageTokens, liveToolsUsageTokens, liveTimestampMs, height, }: TokenUsageChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function TokenUsageChart({ serviceName, agentId, runtimeId, apiKey, otelUrl, wsUrl, liveSystemPromptTokens, liveToolsDescriptionTokens, liveUserMessageTokens, liveAgentMessageTokens, liveToolsUsageTokens, liveTimestampMs, height, }: TokenUsageChartProps): import("react/jsx-runtime").JSX.Element;
 export default TokenUsageChart;

package/lib/context/TokenUsageChart.js

@@ -280,7 +280,7 @@ function extractAgentId(row) {
         return aid;
     return undefined;
 }
-export function TokenUsageChart({ serviceName, agentId, runtimeId, apiKey, datalayerUrl, wsUrl, liveSystemPromptTokens, liveToolsDescriptionTokens, liveUserMessageTokens, liveAgentMessageTokens, liveToolsUsageTokens, liveTimestampMs, height = 160, }) {
+export function TokenUsageChart({ serviceName, agentId, runtimeId, apiKey, otelUrl, wsUrl, liveSystemPromptTokens, liveToolsDescriptionTokens, liveUserMessageTokens, liveAgentMessageTokens, liveToolsUsageTokens, liveTimestampMs, height = 160, }) {
     const cacheServiceKey = String(serviceName || runtimeId || '').trim() || undefined;
     const monitoringCache = useAgentRuntimeStore(s => s.monitoringCache);
     const mergeTokenTurns = useAgentRuntimeStore(s => s.mergeTokenTurns);
@@ -311,7 +311,7 @@ export function TokenUsageChart({ serviceName, agentId, runtimeId, apiKey, datal
     // Bootstrap chart with historical OTEL metrics so charts are populated even
     // before the first websocket update arrives.
     useEffect(() => {
-        if (!cacheServiceKey || !apiKey || !datalayerUrl) {
+        if (!cacheServiceKey || !apiKey || !otelUrl) {
             return;
         }
         let cancelled = false;
@@ -321,7 +321,7 @@ export function TokenUsageChart({ serviceName, agentId, runtimeId, apiKey, datal
                 const results = await Promise.all(metricNames.map(metric => fetchOtelMetricRows({
                     metric,
                     serviceName,
-                    datalayerUrl,
+                    otelUrl,
                     apiKey,
                     limit: 1000,
                 })));
@@ -375,7 +375,7 @@ export function TokenUsageChart({ serviceName, agentId, runtimeId, apiKey, datal
         agentId,
         apiKey,
         cacheServiceKey,
-        datalayerUrl,
+        otelUrl,
         mergeTokenTurns,
         runtimeId,
         serviceName,
@@ -439,7 +439,7 @@ export function TokenUsageChart({ serviceName, agentId, runtimeId, apiKey, datal
         if (!cacheServiceKey || !apiKey)
             return;
         const rawBaseUrl = wsUrl ||
-            datalayerUrl ||
+            otelUrl ||
             (typeof window !== 'undefined' ? window.location.origin : '');
         if (!rawBaseUrl)
             return;
@@ -496,7 +496,7 @@ export function TokenUsageChart({ serviceName, agentId, runtimeId, apiKey, datal
         apiKey,
         cacheServiceKey,
         mergeTokenTurns,
-        datalayerUrl,
+        otelUrl,
         runtimeId,
         serviceName,
         wsUrl,

package/lib/context/TurnGraphChart.d.ts

@@ -24,7 +24,7 @@ export interface TurnGraphChartProps {
     /** Filter spans to this agent ID (matches ``agent.id`` span attribute). */
     agentId?: string;
     /** Base URL for the Datalayer OTEL service. */
-    datalayerUrl?: string;
+    otelUrl?: string;
     /** JWT / API key for OTEL auth. */
     apiKey?: string;
     /**

package/lib/context/TurnGraphChart.js

@@ -386,7 +386,7 @@ function buildOption(run) {
         ],
     };
 }
-export const TurnGraphChart = ({ serviceName, agentId, datalayerUrl, apiKey, autoRefreshMs = 10_000, height = 320, style, }) => {
+export const TurnGraphChart = ({ serviceName, agentId, otelUrl, apiKey, autoRefreshMs = 10_000, height = 320, style, }) => {
     const [runs, setRuns] = useState([]);
     const [selectedIdx, setSelectedIdx] = useState(0);
     const [loading, setLoading] = useState(false);
@@ -440,12 +440,12 @@ export const TurnGraphChart = ({ serviceName, agentId, datalayerUrl, apiKey, aut
         };
     }, []);
     const fetchData = useCallback(async () => {
-        if (!datalayerUrl || !apiKey)
+        if (!otelUrl || !apiKey)
             return;
         setLoading(true);
         setError(null);
         try {
-            const client = createOtelClient({ baseUrl: datalayerUrl, token: apiKey });
+            const client = createOtelClient({ baseUrl: otelUrl, token: apiKey });
             const result = await client.fetchTraces({ serviceName, limit: 200 });
             if (mountedRef.current)
                 upsertRunsFromSpans(result.data, 'replace');
@@ -459,9 +459,9 @@ export const TurnGraphChart = ({ serviceName, agentId, datalayerUrl, apiKey, aut
             if (mountedRef.current)
                 setLoading(false);
         }
-    }, [datalayerUrl, apiKey, serviceName, upsertRunsFromSpans]);
+    }, [otelUrl, apiKey, serviceName, upsertRunsFromSpans]);
     const { connected: wsConnected, error: wsError } = useOtelWebSocket({
-        baseUrl: datalayerUrl,
+        baseUrl: otelUrl,
         token: apiKey,
         callbacks: {
             onTraces: spans => {
@@ -480,7 +480,7 @@ export const TurnGraphChart = ({ serviceName, agentId, datalayerUrl, apiKey, aut
     const selectedRun = runs[selectedIdx];
     const option = useMemo(() => (selectedRun ? buildOption(selectedRun) : null), [selectedRun]);
     // Not configured — caller didn't pass auth.
-    if (!datalayerUrl || !apiKey)
+    if (!otelUrl || !apiKey)
         return null;
     if (loading && runs.length === 0) {
         return (_jsx(Box, { sx: { color: 'fg.muted', fontSize: 1, py: 2 }, children: "Loading OTEL traces\u2026" }));

package/lib/examples/AgentEvalsExample.js

@@ -113,7 +113,7 @@ const AgentEvalsInner = ({ onLogout, executionTarget }) => {
         ? `local:${agentId}`
         : runtime?.podName || '(launching…)';
     const controlPlaneBaseUrl = import.meta.env.VITE_RUN_URL ||
-        configuration?.datalayerUrl ||
+        configuration?.aiAgentsUrl ||
         (cloudAgentBaseUrl ? new URL(cloudAgentBaseUrl).origin : '');
     const isAgentReady = executionTarget === 'local' ? localStatus === 'ready' : isReady;
     const agentStatus = executionTarget === 'local' ? localStatus : runtimeStatus;

package/lib/examples/AgentGuardrailsExample.js

@@ -41,7 +41,7 @@ const OTEL_BASE_URL_ENV = import.meta.env.VITE_OTEL_BASE_URL;
 // Consume-side OTEL override (DATALAYER_OTEL_IN_URL). When set, telemetry is
 // read from here instead of VITE_OTEL_BASE_URL (e.g. prod during local dev).
 const OTEL_IN_BASE_URL_ENV = import.meta.env.VITE_OTEL_IN_BASE_URL;
-const DATALAYER_URL_ENV = import.meta.env.VITE_DATALAYER_URL;
+const AI_AGENTS_URL_ENV = import.meta.env.VITE_DATALAYER_AI_AGENTS_URL;
 const OTEL_SERVICE_NAME = 'agent-runtimes';
 const COST_RUN_METRIC = 'agent_runtimes.capability.cost.run.usd';
 const COST_CUMULATIVE_METRIC = 'agent_runtimes.capability.cost.cumulative.usd';
@@ -224,9 +224,9 @@ const AgentGuardrailsInner = ({ onLogout, }) => {
     const otelBaseUrl = configuration?.otelInUrl ||
         OTEL_IN_BASE_URL_ENV ||
         configuration?.otelUrl ||
-        configuration?.datalayerUrl ||
+        configuration?.aiAgentsUrl ||
         OTEL_BASE_URL_ENV ||
-        DATALAYER_URL_ENV ||
+        AI_AGENTS_URL_ENV ||
         agentBaseUrl;
     const podName = agentId;
     const chatAuthToken = token === null ? undefined : token;

package/lib/examples/AgentInferenceProviderExample.js

@@ -57,7 +57,7 @@ const AgentInferenceProviderExampleInner = () => {
             return 'local inference';
         }
         const env = import.meta.env ?? {};
-        return (env.VITE_DATALAYER_AI_INFERENCE_URL || env.VITE_DATALAYER_URL || baseUrl);
+        return env.VITE_DATALAYER_AI_INFERENCE_URL || baseUrl;
     }, [provider, baseUrl]);
     const authFetch = useCallback((url, init = {}) => {
         return fetch(url, {

package/lib/examples/AgentMonitoringExample.js

@@ -41,7 +41,7 @@ const OTEL_BASE_URL_ENV = import.meta.env.VITE_OTEL_BASE_URL;
 // Consume-side OTEL override (DATALAYER_OTEL_IN_URL). When set, telemetry is
 // read from here instead of VITE_OTEL_BASE_URL (e.g. prod during local dev).
 const OTEL_IN_BASE_URL_ENV = import.meta.env.VITE_OTEL_IN_BASE_URL;
-const DATALAYER_URL_ENV = import.meta.env.VITE_DATALAYER_URL;
+const OTEL_URL_ENV = import.meta.env.VITE_DATALAYER_OTEL_URL;
 const AgentMonitoringInner = ({ onLogout, }) => {
     const { token } = useSimpleAuthStore();
     const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
@@ -62,9 +62,9 @@ const AgentMonitoringInner = ({ onLogout, }) => {
     const otelBaseUrl = configuration?.otelInUrl ||
         OTEL_IN_BASE_URL_ENV ||
         configuration?.otelUrl ||
-        configuration?.datalayerUrl ||
+        configuration?.otelUrl ||
         OTEL_BASE_URL_ENV ||
-        DATALAYER_URL_ENV ||
+        OTEL_URL_ENV ||
         agentBaseUrl;
     const podName = agentId;
     // The OTEL service_name resource attribute is 'agent-runtimes' (the
@@ -324,11 +324,11 @@ const AgentMonitoringInner = ({ onLogout, }) => {
                                     p: 3,
                                     borderBottom: '1px solid',
                                     borderColor: 'border.default',
-                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Token Usage" }), _jsx(TokenUsageChart, { serviceName: otelServiceName, agentId: agentId, apiKey: token ?? undefined, datalayerUrl: otelBaseUrl, liveSystemPromptTokens: liveContextSnapshot?.systemPromptTokens, liveUserMessageTokens: liveContextSnapshot?.userMessageTokens, liveAgentMessageTokens: liveContextSnapshot?.assistantMessageTokens, liveToolsUsageTokens: liveContextSnapshot?.toolTokens, liveTimestampMs: monitorLastSnapshotAt, height: 180 })] }), _jsxs(Box, { sx: {
+                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Token Usage" }), _jsx(TokenUsageChart, { serviceName: otelServiceName, agentId: agentId, apiKey: token ?? undefined, otelUrl: otelBaseUrl, liveSystemPromptTokens: liveContextSnapshot?.systemPromptTokens, liveUserMessageTokens: liveContextSnapshot?.userMessageTokens, liveAgentMessageTokens: liveContextSnapshot?.assistantMessageTokens, liveToolsUsageTokens: liveContextSnapshot?.toolTokens, liveTimestampMs: monitorLastSnapshotAt, height: 180 })] }), _jsxs(Box, { sx: {
                                     p: 3,
                                     borderBottom: '1px solid',
                                     borderColor: 'border.default',
-                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Cost" }), _jsx(CostUsageChart, { serviceName: otelServiceName, agentId: agentId, apiKey: token ?? undefined, datalayerUrl: otelBaseUrl, liveCumulativeUsd: liveCost?.cumulativeCostUsd, liveTimestampMs: monitorLastSnapshotAt, height: 180 })] }), _jsxs(Box, { sx: {
+                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Cost" }), _jsx(CostUsageChart, { serviceName: otelServiceName, agentId: agentId, apiKey: token ?? undefined, otelUrl: otelBaseUrl, liveCumulativeUsd: liveCost?.cumulativeCostUsd, liveTimestampMs: monitorLastSnapshotAt, height: 180 })] }), _jsxs(Box, { sx: {
                                     p: 3,
                                     borderBottom: '1px solid',
                                     borderColor: 'border.default',
@@ -405,7 +405,7 @@ const AgentMonitoringInner = ({ onLogout, }) => {
                                     p: 3,
                                     borderBottom: '1px solid',
                                     borderColor: 'border.default',
-                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Turn Execution Graph (OTEL traces)" }), _jsx(TurnGraphChart, { serviceName: otelServiceName, agentId: agentId, datalayerUrl: otelBaseUrl, apiKey: token ?? undefined, autoRefreshMs: 10_000, height: 280 })] })] })] })] }));
+                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Turn Execution Graph (OTEL traces)" }), _jsx(TurnGraphChart, { serviceName: otelServiceName, agentId: agentId, otelUrl: otelBaseUrl, apiKey: token ?? undefined, autoRefreshMs: 10_000, height: 280 })] })] })] })] }));
 };
 const syncTokenToIamStore = (token) => {
     import('../state/substates').then(({ iamStore }) => {

package/lib/examples/AgentOtelExample.d.ts

@@ -8,8 +8,8 @@
  * list and launched on demand.
  *
  * The OTEL backend is configured via `configuration.otelUrl` when available
- * (falling back to `configuration.datalayerUrl`, then `VITE_OTEL_BASE_URL`, then
- * `VITE_DATALAYER_URL`, then the resolved runtime base URL).
+ * (falling back to `configuration.otelUrl`, then `VITE_OTEL_BASE_URL`, then
+ * `VITE_DATALAYER_OTEL_URL`, then the resolved runtime base URL).
  * Agent routes resolve from the shared local/cloud runtime target hook.
  *
  * For Python-side observability, wire in `agent_runtimes/otel.py`: