@datalayer/agent-runtimes 1.0.25 → 1.0.26

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

@@ -0,0 +1,6 @@
+/**
+ * What an agent shows of itself.
+ *
+ * @module components/agents
+ */
+export * from './AgentSummary';

package/lib/components/{students → agents}/index.js

@@ -2,4 +2,9 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-export * from './StudentItemStatus';
+/**
+ * What an agent shows of itself.
+ *
+ * @module components/agents
+ */
+export * from './AgentSummary';

package/lib/components/{NotificationEventCard.js → cards/NotificationEventCard.js}

@@ -9,7 +9,7 @@ import { Box } from '@datalayer/primer-addons';
 import { ChevronDownIcon, DownloadIcon, EyeClosedIcon, EyeIcon, TrashIcon, } from '@primer/octicons-react';
 import { createMarkdownDownloadPayload, downloadTextPayload, formatDurationMs, formatRelativeTime, } from '@datalayer/core/lib/utils';
 import { Streamdown } from 'streamdown';
-import { streamdownMarkdownStyles } from '../chat/styles/streamdownStyles';
+import { streamdownMarkdownStyles } from '../../chat/styles/streamdownStyles';
 const EVENT_KIND_VARIANT = {
     'agent-start-requested': 'attention',
     'agent-assigned': 'accent',

package/lib/components/{OutputCard.js → cards/OutputCard.js}

@@ -9,7 +9,7 @@ import { Box } from '@datalayer/primer-addons';
 import { ChevronDownIcon, DownloadIcon, EyeClosedIcon, EyeIcon, TrashIcon, } from '@primer/octicons-react';
 import { createMarkdownDownloadPayload, downloadTextPayload, formatDurationMs, formatRelativeTime, } from '@datalayer/core/lib/utils';
 import { Streamdown } from 'streamdown';
-import { streamdownMarkdownStyles } from '../chat/styles/streamdownStyles';
+import { streamdownMarkdownStyles } from '../../chat/styles/streamdownStyles';
 export function OutputCard({ event, onToggleRead, onDelete, onOpenAgent, }) {
     const [isOutputExpanded, setIsOutputExpanded] = useState(false);
     const outputText = event.kind === 'agent-output' && event.payload?.outputs

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

@@ -0,0 +1,9 @@
+/**
+ * The cards an agent run is read through: the notifications it emitted, the
+ * outputs it produced, and the tool calls waiting for an approval.
+ *
+ * @module components/cards
+ */
+export * from './NotificationEventCard';
+export * from './OutputCard';
+export * from './ToolApprovalCard';

package/lib/components/cards/index.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The cards an agent run is read through: the notifications it emitted, the
+ * outputs it produced, and the tool calls waiting for an approval.
+ *
+ * @module components/cards
+ */
+export * from './NotificationEventCard';
+export * from './OutputCard';
+export * from './ToolApprovalCard';

package/lib/components/{runtimes/RuntimeCellVariables.d.ts → code-sandboxes/CodeSandboxCellVariables.d.ts}

@@ -1,6 +1,6 @@
 import { ITranslator } from '@jupyterlab/translation';
 /**
- * {@link RuntimeCellVariables} properties
+ * {@link CodeSandboxCellVariables} properties
  */
 interface IRuntimeCellVariablesProps {
     /**
@@ -35,5 +35,5 @@ interface IRuntimeCellVariablesProps {
 /**
  * Runtime Cell Variables Picker.
  */
-export declare function RuntimeCellVariables(props: IRuntimeCellVariablesProps): JSX.Element;
-export default RuntimeCellVariables;
+export declare function CodeSandboxCellVariables(props: IRuntimeCellVariablesProps): JSX.Element;
+export default CodeSandboxCellVariables;

package/lib/components/{runtimes/RuntimeCellVariables.js → code-sandboxes/CodeSandboxCellVariables.js}

@@ -11,7 +11,7 @@ import { Box } from '@datalayer/primer-addons';
 /**
  * Runtime Cell Variables Picker.
  */
-export function RuntimeCellVariables(props) {
+export function CodeSandboxCellVariables(props) {
     const { getInputOptions, getOutputOptions, inputs, output, setInputs, setOutput, translator, } = props;
     const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
     const inputForOutputRef = useRef(null);
@@ -169,4 +169,4 @@ export function RuntimeCellVariables(props) {
                                         .filter(item => item.selected)
                                         .map(item => item.id), onSelectedChange: onSelectedInputsChange, "aria-labelledby": "cell-input-variables", selectionVariant: "multiple", emptyStateText: trans.__('No available variables.'), loading: inputLoading }) })] })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { id: "cell-output-variables", children: trans.__('Output') }), _jsxs(Autocomplete, { children: [_jsx(Autocomplete.Input, { ref: inputForOutputRef, value: output, onChange: onOutputChange }), _jsx(Autocomplete.Overlay, { children: _jsx(Autocomplete.Menu, { items: outputsState ?? [], selectedItemIds: output ? [output] : [], "aria-labelledby": "cell-output-variables", loading: getOutputOptions && !outputsState, emptyStateText: trans.__('Not among the available variables.'), onOpenChange: handleOutputMenuOpenChange }) })] })] })] }));
 }
-export default RuntimeCellVariables;
+export default CodeSandboxCellVariables;

package/lib/components/{runtimes/RuntimeCellVariablesDialog.d.ts → code-sandboxes/CodeSandboxCellVariablesDialog.d.ts}

@@ -2,9 +2,9 @@ import { ISessionContext } from '@jupyterlab/apputils';
 import { CodeCellModel } from '@jupyterlab/cells';
 import { ITranslator } from '@jupyterlab/translation';
 /**
- * {@link RuntimeCellVariablesDialog} properties
+ * {@link CodeSandboxCellVariablesDialog} properties
  */
-export interface IRuntimeCellVariablesDialogProps {
+export interface ICodeSandboxCellVariablesDialogProps {
     /**
      * Code cell model
      */
@@ -33,5 +33,5 @@ export interface IRuntimeCellVariablesDialogProps {
 /**
  * Dialog to define the runtime cell variables to transfer
  */
-export declare function RuntimeCellVariablesDialog(props: IRuntimeCellVariablesDialogProps): JSX.Element;
-export default RuntimeCellVariablesDialog;
+export declare function CodeSandboxCellVariablesDialog(props: ICodeSandboxCellVariablesDialogProps): JSX.Element;
+export default CodeSandboxCellVariablesDialog;

package/lib/components/{runtimes/RuntimeCellVariablesDialog.js → code-sandboxes/CodeSandboxCellVariablesDialog.js}

@@ -9,11 +9,11 @@ import { nullTranslator } from '@jupyterlab/translation';
 import { JSONExt } from '@lumino/coreutils';
 import { KernelExecutor } from '@datalayer/jupyter-react';
 import { RuntimeSnippetsFacade } from '../../jupyter';
-import { RuntimeCellVariables } from './RuntimeCellVariables';
+import { CodeSandboxCellVariables } from './CodeSandboxCellVariables';
 /**
  * Dialog to define the runtime cell variables to transfer
  */
-export function RuntimeCellVariablesDialog(props) {
+export function CodeSandboxCellVariablesDialog(props) {
     const { onClose, model, preference, sessionContext, translator } = props;
     const [inputs, setInputs] = useState([]);
     const [output, setOutput] = useState();
@@ -96,6 +96,6 @@ export function RuntimeCellVariablesDialog(props) {
                 onClick: setVariables,
                 autoFocus: true,
             },
-        ], children: _jsx(RuntimeCellVariables, { inputs: inputs, getInputOptions: sessionContext ? getInputCandidates : undefined, setInputs: setInputs, output: output ?? undefined, getOutputOptions: getOutputCandidates, setOutput: setOutput, translator: translator }) }));
+        ], children: _jsx(CodeSandboxCellVariables, { inputs: inputs, getInputOptions: sessionContext ? getInputCandidates : undefined, setInputs: setInputs, output: output ?? undefined, getOutputOptions: getOutputCandidates, setOutput: setOutput, translator: translator }) }));
 }
-export default RuntimeCellVariablesDialog;
+export default CodeSandboxCellVariablesDialog;

package/lib/components/code-sandboxes/CodeSandboxLauncher.d.ts

@@ -55,5 +55,3 @@ export interface ICodeSandboxLauncherProps {
  * The launcher of a new code sandbox.
  */
 export declare function CodeSandboxLauncher(props: ICodeSandboxLauncherProps): JSX.Element;
-export declare const RuntimeLauncherDialog: typeof CodeSandboxLauncher;
-export type IRuntimeLauncherDialogProps = ICodeSandboxLauncherProps;

package/lib/components/code-sandboxes/CodeSandboxLauncher.js

@@ -268,5 +268,3 @@ export function CodeSandboxLauncher(props) {
                     jupyterLabAdapter?.jupyterLab &&
                     !configuration.whiteLabel && (_jsxs(FormControl, { sx: { paddingTop: '10px' }, children: [_jsx(FormControl.Label, { id: "open-example-label", children: "Open example notebook" }), _jsx(ToggleSwitch, { disabled: !environments.find(spec => spec.name === selection)?.example, checked: openExample, size: "small", onClick: handleSwitchClick, "aria-labelledby": "open-example-label" })] })), error && (_jsx(FlashClosable, { variant: flashLevel, actions: navigate && upgradeSubscription && flashLevel === 'warning' ? (_jsx(Button, { onClick: handleUpgrade, title: 'Upgrade your subscription.', children: "Upgrade" })) : undefined, children: error }))] }) }));
 }
-// Backward-compatible aliases (deprecated: use CodeSandboxLauncher).
-export const RuntimeLauncherDialog = CodeSandboxLauncher;

package/lib/components/code-sandboxes/CodeSandboxPicker.d.ts

@@ -2,7 +2,8 @@ import { ReactElement, ReactNode } from 'react';
 import { ISessionContext } from '@jupyterlab/apputils';
 import { ITranslator } from '@jupyterlab/translation';
 import { IRuntimeDesc } from '../../models';
-import { IMultiServiceManager } from '../../runtimes';
+import { type IMultiServiceManager } from '../../runtimes';
+import type { CodeSandboxTransfer } from './CodeSandboxTransfer';
 type IDisplayMode = 'menu' | 'radio';
 /**
  * {@link CodeSandboxPicker} properties
@@ -38,13 +39,18 @@ export interface ICodeSandboxPickerProps {
         location?: string;
     };
     /**
-     * Runtime description.
+     * The sandbox shown as chosen.
+     *
+     * Given with {@link setRuntimeDesc}, the choice belongs to the host — a
+     * cell keeps it in its metadata. Omitted, the picker holds it itself and
+     * reports it through {@link onTransferChange}, which is what a dialog with
+     * no state of its own needs.
      */
     runtimeDesc?: IRuntimeDesc;
     /**
      * Set runtime description.
      */
-    setRuntimeDesc: (desc?: IRuntimeDesc) => void;
+    setRuntimeDesc?: (desc?: IRuntimeDesc) => void;
     /**
      * Document session context.
      */
@@ -61,11 +67,30 @@ export interface ICodeSandboxPickerProps {
      * Change the look depending on the menu integration.
      */
     variant?: 'document' | 'cell';
+    /**
+     * Whether the questions of a NEW sandbox are asked below the list.
+     *
+     * They are the launcher's own — see `NewCodeSandboxControls` — and only
+     * concern a sandbox that does not run yet.
+     */
+    withNewSandboxControls?: boolean;
+    /**
+     * Whether the variables of the current sandbox may be carried to the
+     * chosen one, when both speak a language the snippets can serialize.
+     */
+    withVariablesTransfer?: boolean;
+    /**
+     * Called with the answer a dialog would return: the sandbox to assign and
+     * the variables to carry over.
+     *
+     * The sandbox is named the way the callers start it: `remote-` and
+     * `browser-` prefix an environment to start one in, a local environment is
+     * named by its specification alone, and `id` names one that already runs.
+     */
+    onTransferChange?: (transfer: CodeSandboxTransfer) => void;
 }
 /**
  * The picker of a code sandbox: what runs already, and what could run.
  */
 export declare function CodeSandboxPicker(props: ICodeSandboxPickerProps): ReactElement;
-export declare const RuntimePickerBase: typeof CodeSandboxPicker;
-export type IRuntimePickerBaseProps = ICodeSandboxPickerProps;
 export default CodeSandboxPicker;

package/lib/components/code-sandboxes/CodeSandboxPicker.js

@@ -3,7 +3,7 @@ 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 { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState, } from 'react';
 import { nullTranslator } from '@jupyterlab/translation';
 //import { kernelIcon } from '@jupyterlab/ui-components';
 import { ActionList, ActionMenu, IconButton, Text, RadioGroup, Radio, FormControl, LabelGroup, Label, } from '@primer/react';
@@ -12,8 +12,11 @@ import { Box } from '@datalayer/primer-addons';
 import { CpuIcon } from '@primer/octicons-react';
 import { BrowserIcon, LaptopSimpleIcon } from '@datalayer/icons-react';
 import { CreditsIndicator } from '../progress';
-import { isRuntimeRemote } from '../../runtimes';
-import { getGroupedRuntimeDescs, } from '../runtimes/RuntimeUtils';
+import { isRuntimeRemote, } from '../../runtimes';
+import { useIAMStore } from '../../state/substates';
+import { getGroupedCodeSandboxDescs, } from './CodeSandboxUtils';
+import { creditsLimitFor, NewCodeSandboxControls, useNewCodeSandboxAllowance, } from './NewCodeSandboxControls';
+import { CodeSandboxVariables, useCodeSandboxVariablesTransfer, } from './CodeSandboxVariables';
 /**
  * Maximal runtime display name length after which it is trimmed.
  */
@@ -22,8 +25,23 @@ const RUNTIME_DISPLAY_NAME_MAX_LENGTH = 25;
  * The picker of a code sandbox: what runs already, and what could run.
  */
 export function CodeSandboxPicker(props) {
-    const { disabled, display, filterRuntime, multiServiceManager, postActions, preActions, preference, runtimeDesc, sessionContext, setRuntimeDesc, translator, variant, } = props;
-    const [groupedRuntimeDescs, setGroupedRuntimeDescs] = useState(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterRuntime, variant));
+    const { disabled, display, filterRuntime, multiServiceManager, onTransferChange, postActions, preActions, preference, sessionContext, translator, variant, withNewSandboxControls, withVariablesTransfer, } = props;
+    /*
+     * The choice, held here when the host does not hold it.
+     *
+     * A cell keeps its sandbox in its metadata and passes both the value and
+     * the setter; a dialog has nowhere to keep it, so the picker does.
+     */
+    const isControlled = props.setRuntimeDesc !== undefined;
+    const [ownRuntimeDesc, setOwnRuntimeDesc] = useState();
+    const runtimeDesc = isControlled ? props.runtimeDesc : ownRuntimeDesc;
+    const setRuntimeDesc = useCallback((desc) => {
+        if (!isControlled) {
+            setOwnRuntimeDesc(desc ? { ...desc } : undefined);
+        }
+        props.setRuntimeDesc?.(desc);
+    }, [isControlled, props.setRuntimeDesc]);
+    const [groupedRuntimeDescs, setGroupedRuntimeDescs] = useState(getGroupedCodeSandboxDescs(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);
@@ -38,7 +56,7 @@ export function CodeSandboxPicker(props) {
             if (disposed) {
                 return;
             }
-            setGroupedRuntimeDescs(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterRuntime, variant));
+            setGroupedRuntimeDescs(getGroupedCodeSandboxDescs(multiServiceManager, preference?.id, translator, filterRuntime, variant));
         };
         const refreshRuntimeModels = multiServiceManager.remote?.runtimesManager.refreshRuntimeModels?.();
         if (refreshRuntimeModels) {
@@ -80,6 +98,15 @@ export function CodeSandboxPicker(props) {
             multiServiceManager.remote?.environments.changed.disconnect(updateGroupedRuntimeDescs);
         };
     }, [multiServiceManager, preference?.id, translator, filterRuntime, variant]);
+    /*
+     * The sandbox the session already runs on, shown as chosen.
+     *
+     * Preferably the very row of the list, so the choice is visibly one of
+     * them. A session whose sandbox is not listed — the list may leave the
+     * current one out, and the remote ones land late — is named from the
+     * specifications instead, so the picker still opens on what is running
+     * rather than on nothing.
+     */
     useEffect(() => {
         if (defaultSet) {
             return;
@@ -96,8 +123,24 @@ export function CodeSandboxPicker(props) {
                         }
                     });
                 });
-                if (!matched && !remoteModelsReady) {
-                    return;
+                if (!matched) {
+                    if (!remoteModelsReady) {
+                        return;
+                    }
+                    const kernelName = sessionContext.session?.kernel?.name;
+                    const spec = kernelName
+                        ? sessionContext.specsManager.specs?.kernelspecs[kernelName]
+                        : undefined;
+                    if (spec) {
+                        setRuntimeDesc({
+                            name: spec.name,
+                            kernelId,
+                            language: spec.language,
+                            displayName: sessionContext.kernelDisplayName,
+                            location: sessionContext.location ??
+                                'local',
+                        });
+                    }
                 }
             }
         }
@@ -109,55 +152,145 @@ export function CodeSandboxPicker(props) {
         sessionContext,
         setRuntimeDesc,
     ]);
+    /*
+     * What a NEW sandbox costs, and the answer the host is given.
+     *
+     * Only asked when the host wants them: a cell picking among the sandboxes
+     * that already run has neither a reservation to make nor an answer to
+     * shape. The arithmetic is the launcher's, from its own module.
+     */
+    const { refreshCredits } = useIAMStore();
+    const [timeLimit, setTimeLimit] = useState(10);
+    const [userStorage, setUserStorage] = useState(false);
+    const asksForNewSandbox = withNewSandboxControls || !!onTransferChange;
+    useEffect(() => {
+        if (asksForNewSandbox) {
+            refreshCredits();
+        }
+    }, [asksForNewSandbox]);
+    const resolvedBurningRate = runtimeDesc?.burningRate ??
+        multiServiceManager.remote?.environments
+            .get()
+            .find(env => env.name === runtimeDesc?.name)?.burning_rate;
+    const allowance = useNewCodeSandboxAllowance(resolvedBurningRate);
+    const isNewSandbox = !!runtimeDesc && !runtimeDesc.kernelId;
+    const effectiveMaxMinutes = runtimeDesc?.location === 'remote'
+        ? allowance.effectiveMaxMinutes
+        : Math.max(1, allowance.maxFromCredits ?? -1);
+    const outOfCredits = allowance.hasKnownCredits &&
+        allowance.hasKnownRunAllowance &&
+        !allowance.hasRemainingRuns &&
+        (allowance.maxFromCredits ?? -1) < Number.EPSILON;
+    const variables = useCodeSandboxVariablesTransfer(sessionContext, runtimeDesc, withVariablesTransfer);
+    const selectedVariables = variables.selected;
+    useEffect(() => {
+        if (!onTransferChange) {
+            return;
+        }
+        const maxMinutes = runtimeDesc?.location === 'remote' ? allowance.maxFromCredits : undefined;
+        const effectiveTimeLimit = runtimeDesc?.location === 'remote'
+            ? Math.max(1, Math.min(timeLimit, maxMinutes && maxMinutes > 0 ? maxMinutes : 10))
+            : timeLimit;
+        const creditsLimit = runtimeDesc?.location === 'remote' && resolvedBurningRate
+            ? creditsLimitFor(effectiveTimeLimit, resolvedBurningRate)
+            : undefined;
+        // A new remote sandbox that the account cannot pay for is no answer at
+        // all: the dialog is left with nothing to assign rather than with a
+        // start that would be refused.
+        if (isNewSandbox && runtimeDesc?.location === 'remote') {
+            if (!resolvedBurningRate || !Number.isFinite(resolvedBurningRate)) {
+                onTransferChange({ runtime: null, selectedVariables });
+                return;
+            }
+            if (allowance.hasKnownCredits &&
+                allowance.hasKnownRunAllowance &&
+                !allowance.hasRemainingRuns &&
+                (!creditsLimit || creditsLimit <= 0)) {
+                onTransferChange({ runtime: null, selectedVariables });
+                return;
+            }
+        }
+        onTransferChange({
+            runtime: runtimeDesc
+                ? {
+                    environmentName: ['browser', 'remote'].includes(runtimeDesc.location)
+                        ? `${runtimeDesc.location}-${runtimeDesc.name}`
+                        : runtimeDesc.name,
+                    id: runtimeDesc.kernelId,
+                    creditsLimit,
+                    capabilities: userStorage ? ['user_storage'] : undefined,
+                }
+                : null,
+            selectedVariables,
+        });
+    }, [
+        allowance,
+        isNewSandbox,
+        onTransferChange,
+        resolvedBurningRate,
+        runtimeDesc,
+        selectedVariables,
+        timeLimit,
+        userStorage,
+    ]);
     // 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
-    return (_jsx(_Fragment, { children: display === 'menu' ? (
-        /*
-         * Section for Menu display.
-         */
-        _jsxs(ActionMenu, { children: [variant === 'cell' ? (_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { disabled: disabled || groupedRuntimeDescs === null, 
-                        //                icon={() => <kernelIcon.react className="dla-Cell-runtime-icon" tag={'span'} />}
-                        icon: () => (_jsx("span", { className: "dla-Cell-runtime-icon", children: _jsx(CpuIcon, {}) })), "aria-label": trans.__('Assign a Runtime to the Cell.'), title: trans.__('Assign a Runtime to the Cell.'), size: "small", variant: "invisible" }) })) : (_jsxs(ActionMenu.Button, { variant: "default", disabled: disabled || groupedRuntimeDescs === null, children: [_jsx(Text, { fontWeight: 'bold', children: trans.__('Runtime:') }), ' ' + (runtimeDesc?.displayName ?? trans.__('No Runtime'))] })), _jsx(ActionMenu.Overlay, { ...overlayProps, width: "medium", sx: { overflowY: 'auto' }, side: variant === 'cell' ? 'outside-left' : 'outside-right', children: _jsxs(ActionList, { selectionVariant: "single", children: [variant === 'cell' && (_jsxs(ActionList.Item, { selected: runtimeDesc === undefined, onSelect: () => {
-                                    setRuntimeDesc(undefined);
-                                }, children: [preference?.location && (_jsx(ActionList.LeadingVisual, { children: preference.location === 'local' ? (_jsx(LaptopSimpleIcon, {})) : preference.location === 'browser' ? (_jsx(BrowserIcon, {})) : (_jsx(CloudUploadIcon, {})) })), trans.__('Assign the Notebook Runtime')] }, 'null')), !!preActions && preActions, Object.entries(groupedRuntimeDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: group }), runtimeDescs.map(candidateRuntimeDesc => {
-                                        const annotation = candidateRuntimeDesc.podName
-                                            ? ` - ${candidateRuntimeDesc.podName.split('-', 2).reverse()[0]}`
-                                            : candidateRuntimeDesc.kernelId
-                                                ? ` - ${candidateRuntimeDesc.kernelId}`
-                                                : '';
-                                        const fullDisplayName = (candidateRuntimeDesc.displayName ?? '') + annotation;
-                                        const displayName = (candidateRuntimeDesc.displayName?.length ?? 0) >
-                                            RUNTIME_DISPLAY_NAME_MAX_LENGTH
-                                            ? candidateRuntimeDesc.displayName.slice(0, RUNTIME_DISPLAY_NAME_MAX_LENGTH) + '…'
-                                            : (candidateRuntimeDesc.displayName ?? '');
-                                        return (_jsxs(ActionList.Item, { title: fullDisplayName, selected: (candidateRuntimeDesc.location ===
-                                                runtimeDesc?.location ||
-                                                (isRuntimeRemote(candidateRuntimeDesc.location) &&
-                                                    isRuntimeRemote(runtimeDesc?.location ?? 'local'))) &&
-                                                (candidateRuntimeDesc.kernelId ??
-                                                    candidateRuntimeDesc.name) ===
-                                                    (runtimeDesc?.kernelId ?? runtimeDesc?.name), onSelect: () => {
-                                                setRuntimeDesc(candidateRuntimeDesc);
-                                            }, children: [_jsx(ActionList.LeadingVisual, { children: candidateRuntimeDesc.location === 'local' ? (_jsx(LaptopSimpleIcon, {})) : candidateRuntimeDesc.location === 'browser' ? (_jsx(BrowserIcon, {})) : (_jsx(CloudUploadIcon, {})) }), displayName + annotation.slice(0, 10)] }, candidateRuntimeDesc.name));
-                                    })] }, group))), !!postActions && (_jsxs(_Fragment, { children: [_jsx(ActionList.Divider, {}), postActions] }))] }) })] })) : (
-        /*
-         * Section for Radio display.
-         */
-        _jsxs(_Fragment, { children: [defaultSet && (_jsx(RadioGroup, { name: "kernel-options", "aria-labelledby": "kernel-options", children: Object.entries(groupedRuntimeDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(Box, { children: [_jsx(Box, { as: "h4", style: { marginTop: 0 }, children: group }), runtimeDescs.map(k => {
-                                return (
-                                // A kernel identifies a runtime that already runs; an
-                                // environment to start one in has none, and is named
-                                // by where it runs and what it runs.
-                                _jsxs(Box, { title: k.name, children: [_jsxs(FormControl, { children: [_jsx(Radio, { value: k.kernelId, onChange: () => {
-                                                        setRuntimeDesc(k);
-                                                    }, checked: (k.location === runtimeDesc?.location ||
-                                                        (isRuntimeRemote(k.location) &&
-                                                            isRuntimeRemote(runtimeDesc?.location ?? 'local'))) &&
-                                                        (k.kernelId ?? k.name) ===
-                                                            (runtimeDesc?.kernelId ?? runtimeDesc?.name) }), _jsx(FormControl.Label, { children: _jsxs(Box, { display: "flex", children: [_jsx(Box, { children: k.displayName }), k.kernelId && k.location === 'remote' && (_jsx(Box, { ml: 3, mt: 1, children: _jsx(CreditsIndicator, { kernelId: k.kernelId, serviceManager: multiServiceManager.remote }, "credits-indicator") }))] }) }), _jsx(FormControl.Caption, { children: _jsxs(LabelGroup, { sx: { marginTop: 1 }, children: [_jsx(Label, { variant: "secondary", children: k.name }), _jsx(Label, { variant: "secondary", sx: { marginLeft: 1 }, children: k.location }), k.burningRate && (_jsxs(Label, { variant: "sponsors", sx: { marginLeft: 1 }, children: [k.burningRate, " credits/second"] })), k.gpu && (_jsx(Label, { variant: "success", sx: { marginLeft: 1 }, children: "GPU" }))] }) })] }), _jsx(ActionList.Divider, {})] }, `${k.location}:${k.kernelId ?? k.name}`));
-                            })] }, group))) })), !!postActions && _jsx(_Fragment, { children: postActions })] })) }));
+    return (_jsxs(_Fragment, { children: [display === 'menu' ? (
+            /*
+             * Section for Menu display.
+             */
+            _jsxs(ActionMenu, { children: [variant === 'cell' ? (_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { disabled: disabled || groupedRuntimeDescs === null, 
+                            //                icon={() => <kernelIcon.react className="dla-Cell-runtime-icon" tag={'span'} />}
+                            icon: () => (_jsx("span", { className: "dla-Cell-runtime-icon", children: _jsx(CpuIcon, {}) })), "aria-label": trans.__('Assign a Runtime to the Cell.'), title: trans.__('Assign a Runtime to the Cell.'), size: "small", variant: "invisible" }) })) : (_jsxs(ActionMenu.Button, { variant: "default", disabled: disabled || groupedRuntimeDescs === null, children: [_jsx(Text, { fontWeight: 'bold', children: trans.__('Runtime:') }), ' ' + (runtimeDesc?.displayName ?? trans.__('No Runtime'))] })), _jsx(ActionMenu.Overlay, { ...overlayProps, width: "medium", sx: { overflowY: 'auto' }, side: variant === 'cell' ? 'outside-left' : 'outside-right', children: _jsxs(ActionList, { selectionVariant: "single", children: [variant === 'cell' && (_jsxs(ActionList.Item, { selected: runtimeDesc === undefined, onSelect: () => {
+                                        setRuntimeDesc(undefined);
+                                    }, children: [preference?.location && (_jsx(ActionList.LeadingVisual, { children: preference.location === 'local' ? (_jsx(LaptopSimpleIcon, {})) : preference.location === 'browser' ? (_jsx(BrowserIcon, {})) : (_jsx(CloudUploadIcon, {})) })), trans.__('Assign the Notebook Runtime')] }, 'null')), !!preActions && preActions, Object.entries(groupedRuntimeDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: group }), runtimeDescs.map(candidateRuntimeDesc => {
+                                            const annotation = candidateRuntimeDesc.podName
+                                                ? ` - ${candidateRuntimeDesc.podName.split('-', 2).reverse()[0]}`
+                                                : candidateRuntimeDesc.kernelId
+                                                    ? ` - ${candidateRuntimeDesc.kernelId}`
+                                                    : '';
+                                            const fullDisplayName = (candidateRuntimeDesc.displayName ?? '') + annotation;
+                                            const displayName = (candidateRuntimeDesc.displayName?.length ?? 0) >
+                                                RUNTIME_DISPLAY_NAME_MAX_LENGTH
+                                                ? candidateRuntimeDesc.displayName.slice(0, RUNTIME_DISPLAY_NAME_MAX_LENGTH) + '…'
+                                                : (candidateRuntimeDesc.displayName ?? '');
+                                            return (_jsxs(ActionList.Item, { title: fullDisplayName, selected: (candidateRuntimeDesc.location ===
+                                                    runtimeDesc?.location ||
+                                                    (isRuntimeRemote(candidateRuntimeDesc.location) &&
+                                                        isRuntimeRemote(runtimeDesc?.location ?? 'local'))) &&
+                                                    (candidateRuntimeDesc.kernelId ??
+                                                        candidateRuntimeDesc.name) ===
+                                                        (runtimeDesc?.kernelId ?? runtimeDesc?.name), onSelect: () => {
+                                                    setRuntimeDesc(candidateRuntimeDesc);
+                                                }, children: [_jsx(ActionList.LeadingVisual, { children: candidateRuntimeDesc.location === 'local' ? (_jsx(LaptopSimpleIcon, {})) : candidateRuntimeDesc.location === 'browser' ? (_jsx(BrowserIcon, {})) : (_jsx(CloudUploadIcon, {})) }), displayName + annotation.slice(0, 10)] }, candidateRuntimeDesc.name));
+                                        })] }, group))), !!postActions && (_jsxs(_Fragment, { children: [_jsx(ActionList.Divider, {}), postActions] }))] }) })] })) : (
+            /*
+             * Section for Radio display.
+             */
+            _jsxs(_Fragment, { children: [defaultSet && (_jsx(RadioGroup, { name: "kernel-options", "aria-labelledby": "kernel-options", children: Object.entries(groupedRuntimeDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(Box, { children: [_jsx(Box, { as: "h4", style: { marginTop: 0 }, children: group }), runtimeDescs.map(k => {
+                                    return (
+                                    // A kernel identifies a runtime that already runs; an
+                                    // environment to start one in has none, and is named
+                                    // by where it runs and what it runs.
+                                    _jsxs(Box, { title: k.name, children: [_jsxs(FormControl, { children: [_jsx(Radio, { value: k.kernelId, onChange: () => {
+                                                            setRuntimeDesc(k);
+                                                        }, checked: (k.location === runtimeDesc?.location ||
+                                                            (isRuntimeRemote(k.location) &&
+                                                                isRuntimeRemote(runtimeDesc?.location ?? 'local'))) &&
+                                                            (k.kernelId ?? k.name) ===
+                                                                (runtimeDesc?.kernelId ?? runtimeDesc?.name) }), _jsx(FormControl.Label, { children: _jsxs(Box, { display: "flex", children: [_jsx(Box, { children: k.displayName }), k.kernelId && k.location === 'remote' && (_jsx(Box, { ml: 3, mt: 1, children: _jsx(CreditsIndicator, { kernelId: k.kernelId, serviceManager: multiServiceManager.remote }, "credits-indicator") }))] }) }), _jsx(FormControl.Caption, { children: _jsxs(LabelGroup, { sx: { marginTop: 1 }, children: [_jsx(Label, { variant: "secondary", children: k.name }), _jsx(Label, { variant: "secondary", sx: { marginLeft: 1 }, children: k.location }), k.burningRate && (_jsxs(Label, { variant: "sponsors", sx: { marginLeft: 1 }, children: [k.burningRate, " credits/second"] })), k.gpu && (_jsx(Label, { variant: "success", sx: { marginLeft: 1 }, children: "GPU" }))] }) })] }), _jsx(ActionList.Divider, {})] }, `${k.location}:${k.kernelId ?? k.name}`));
+                                })] }, group))) })), !!postActions && _jsx(_Fragment, { children: postActions })] })), withNewSandboxControls && isNewSandbox && (
+            // The user asked for a NEW sandbox: the questions are the launcher's,
+            // asked through the launcher's own controls. A sandbox of this page
+            // or of this server reserves nothing, so only the time of a remote
+            // one is asked for.
+            _jsx(NewCodeSandboxControls, { withReservation: runtimeDesc?.location === 'remote', burningRate: resolvedBurningRate, timeLimit: timeLimit, onTimeChange: setTimeLimit, max: effectiveMaxMinutes, disabled: outOfCredits, error: runtimeDesc?.location !== 'remote'
+                    ? undefined
+                    : 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) })), variables.available && (_jsx(CodeSandboxVariables, { selectedVariables: variables.selected, setSelectVariable: variables.setSelected, transferVariables: variables.transfer, setTransferVariable: variables.setTransfer, kernelVariables: variables.variables, translator: translator }))] }));
 }
-// Backward-compatible aliases (deprecated: use CodeSandboxPicker).
-export const RuntimePickerBase = CodeSandboxPicker;
 export default CodeSandboxPicker;

package/lib/components/{runtimes/RuntimePickerCell.d.ts → code-sandboxes/CodeSandboxPickerCell.d.ts}

@@ -1,11 +1,11 @@
 import { ISessionContext } from '@jupyterlab/apputils';
 import { CodeCellModel } from '@jupyterlab/cells';
 import type { IMarkdownParser, IRenderMime } from '@jupyterlab/rendermime';
-import { type ICodeSandboxPickerProps } from '../code-sandboxes/CodeSandboxPicker';
+import { type ICodeSandboxPickerProps } from './CodeSandboxPicker';
 /**
- * {@link RuntimePickerCell} properties
+ * {@link CodeSandboxPickerCell} properties
  */
-export type IRuntimePickerCellProps = Pick<ICodeSandboxPickerProps, 'multiServiceManager' | 'preference' | 'translator'> & {
+export type ICodeSandboxPickerCellProps = Pick<ICodeSandboxPickerProps, 'multiServiceManager' | 'preference' | 'translator'> & {
     /**
      * Callback to allow the user to login
      */
@@ -30,5 +30,5 @@ export type IRuntimePickerCellProps = Pick<ICodeSandboxPickerProps, 'multiServic
 /**
  * Runtime picker component for a cell.
  */
-export declare function RuntimePickerCell(props: IRuntimePickerCellProps): JSX.Element;
-export default RuntimePickerCell;
+export declare function CodeSandboxPickerCell(props: ICodeSandboxPickerCellProps): JSX.Element;
+export default CodeSandboxPickerCell;

package/lib/components/{runtimes/RuntimePickerCell.js → code-sandboxes/CodeSandboxPickerCell.js}

@@ -12,13 +12,13 @@ import { isRuntimeRemote } from '../../runtimes';
 import { RuntimeSnippetsFacade } from '../../jupyter';
 import { ExternalTokenSilentLogin } from '@datalayer/core/lib/components/iam';
 import { SnippetDialog } from '../../components/snippets/SnippetDialog';
-import { CodeSandboxPicker, } from '../code-sandboxes/CodeSandboxPicker';
-import { CodeSandboxLauncher } from '../code-sandboxes/CodeSandboxLauncher';
-import { RuntimeCellVariablesDialog } from './RuntimeCellVariablesDialog';
+import { CodeSandboxPicker, } from './CodeSandboxPicker';
+import { CodeSandboxLauncher } from './CodeSandboxLauncher';
+import { CodeSandboxCellVariablesDialog } from './CodeSandboxCellVariablesDialog';
 /**
  * Runtime picker component for a cell.
  */
-export function RuntimePickerCell(props) {
+export function CodeSandboxPickerCell(props) {
     const { logIn, markdownParser, model, preference, sanitizer, multiServiceManager, sessionContext, translator, } = props;
     const { token } = useIAMStore();
     const { configuration } = useCoreStore();
@@ -99,6 +99,6 @@ export function RuntimePickerCell(props) {
     const datalayerMeta = model.getMetadata('datalayer') ?? {};
     return (_jsxs(_Fragment, { children: [_jsx(CodeSandboxPicker, { 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: '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(CodeSandboxLauncher, { 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(CodeSandboxCellVariablesDialog, { 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(CodeSandboxLauncher, { manager: multiServiceManager.remote, onSubmit: onStartRemote, startRuntime: 'defer', submitLabel: "Assign", markdownParser: markdownParser, sanitizer: sanitizer }))] }));
 }
-export default RuntimePickerCell;
+export default CodeSandboxPickerCell;

package/lib/components/{runtimes/RuntimeReservationControl.d.ts → code-sandboxes/CodeSandboxReservationControl.d.ts}

@@ -3,11 +3,11 @@
  *
  * TODO this should be configurable
  */
-export declare const MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES: number;
+export declare const MAXIMAL_CODE_SANDBOX_TIME_RESERVATION_MINUTES: number;
 /**
  * Time control properties
  */
-export interface IKernelReservationControlProps {
+export interface ICodeSandboxReservationControlProps {
     /**
      * Callback on add credits button
      */
@@ -44,4 +44,4 @@ export interface IKernelReservationControlProps {
 /**
  * Runtime reservation control
  */
-export declare function RuntimeReservationControl(props: IKernelReservationControlProps): JSX.Element;
+export declare function CodeSandboxReservationControl(props: ICodeSandboxReservationControlProps): JSX.Element;