@datalayer/agent-runtimes 1.0.21 → 1.0.25

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

@@ -0,0 +1,272 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useIsMounted } from 'usehooks-ts';
+import { Button, FormControl, Select, Spinner, Text, TextInput, ToggleSwitch, } from '@primer/react';
+import { Dialog } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { useJupyterReactStore } from '@datalayer/jupyter-react';
+import { USAGE_ROUTE } from '@datalayer/core/lib/routes';
+import { useNavigate } from '@datalayer/core/lib/hooks';
+import { NO_RUNTIME_AVAILABLE_LABEL } from '@datalayer/core/lib/i18n';
+import { iamStore, useCoreStore, useIAMStore } from '../../state/substates';
+import { createNotebook, sleep } from '@datalayer/core/lib/utils';
+import { Markdown } from '@datalayer/core/lib/components/display';
+import { Timer } from '@datalayer/core/lib/components/progress';
+import { FlashClosable } from '@datalayer/core/lib/components/flashes';
+import { creditsLimitFor, NewCodeSandboxControls, useNewCodeSandboxAllowance, } from './NewCodeSandboxControls';
+/**
+ * The text a fragment of markup reads as.
+ *
+ * @param html Markup to read
+ */
+function asPlainText(html) {
+    if (!html || typeof DOMParser === 'undefined') {
+        return html;
+    }
+    return (new DOMParser().parseFromString(html, 'text/html').body.textContent ?? '');
+}
+/**
+ * Initial time in milliseconds before retrying in case no kernels are available
+ */
+const NOT_AVAILABLE_INIT_RETRY = 10_000;
+/**
+ * Number of trials in case of unavailable code sandboxes
+ */
+const NOT_AVAILABLE_RETRIES = 5;
+/**
+ * The launcher of a new code sandbox.
+ */
+export function CodeSandboxLauncher(props) {
+    const { dialogTitle, kernelSnapshot, manager, onSubmit, markdownParser, sanitizer, upgradeSubscription, submitLabel, startRuntime = true, } = props;
+    const hasExample = startRuntime === 'with-example';
+    const shouldStartRuntime = startRuntime !== 'defer';
+    const user = iamStore.getState().user;
+    const environments = manager.environments.get();
+    const { configuration } = useCoreStore();
+    const { refreshCredits } = useIAMStore();
+    let navigate;
+    try {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        navigate = useNavigate();
+    }
+    catch (reason) {
+        // TODO when would this component be shown outside of a react-router? navigation is only available within a react-router.
+        console.warn(reason);
+    }
+    const jupyterReactStore = useJupyterReactStore();
+    const jupyterLabAdapter = jupyterReactStore.jupyterLabAdapter;
+    const [selection, setSelection] = useState((kernelSnapshot?.environment || environments[0]?.name) ?? '');
+    const [timeLimit, setTimeLimit] = useState(10);
+    const [runtimeName, setRuntimeName] = useState(environments[0]?.runtime?.givenNameTemplate || environments[0]?.title || '');
+    // Whether the runtim name has been changed by the user or not
+    const [hasCustomRuntimeName, setHasCustomRuntimeName] = useState(false);
+    const [userStorage, setUserStorage] = useState(false);
+    const [openExample, setOpenExample] = useState(false);
+    const [waitingForRuntime, setWaitingForRuntime] = useState(false);
+    const [error, setError] = useState();
+    const [flashLevel, setFlashLevel] = useState('danger');
+    const isMounted = useIsMounted();
+    useEffect(() => {
+        if (shouldStartRuntime) {
+            refreshCredits();
+        }
+    }, [shouldStartRuntime]);
+    const spec = useMemo(() => environments.find(spec => spec.name === selection), [environments, selection]);
+    const description = spec?.description ?? '';
+    const burningRate = spec?.burning_rate ?? 1;
+    // The arithmetic the picker asks too — one copy for both, see the module.
+    const allowance = useNewCodeSandboxAllowance(burningRate);
+    const effectiveMaxMinutes = allowance.effectiveMaxMinutes;
+    const outOfCredits = shouldStartRuntime && allowance.outOfCredits;
+    const handleSelectionChange = useCallback((e) => {
+        const selection = e.target.value;
+        setSelection(selection);
+        if (!hasCustomRuntimeName) {
+            const spec = environments.find(env => env.name === selection);
+            setRuntimeName(spec?.runtime?.givenNameTemplate || spec?.title || '');
+        }
+    }, [setSelection, hasCustomRuntimeName]);
+    const handleSubmitRuntime = useCallback(async () => {
+        if (selection) {
+            setError(undefined);
+            setWaitingForRuntime(shouldStartRuntime);
+            const spec = environments.find(s => s.name === selection);
+            const desc = {
+                name: selection,
+                language: spec?.language ?? '',
+                location: 'remote',
+                displayName: runtimeName ?? spec?.title,
+            };
+            const creditsLimit = creditsLimitFor(timeLimit, burningRate);
+            desc.params = {};
+            if (startRuntime === 'defer') {
+                desc.params['creditsLimit'] = creditsLimit;
+            }
+            if (userStorage) {
+                desc.params['capabilities'] = ['user_storage'];
+            }
+            let success = true;
+            if (shouldStartRuntime) {
+                success = false;
+                let availableTrial = 1;
+                let retryDelay = NOT_AVAILABLE_INIT_RETRY;
+                // Should return success status.
+                const startNewKernel = async () => {
+                    try {
+                        const connection = await manager.runtimesManager.startNew({
+                            environmentName: selection,
+                            type: 'notebook',
+                            givenName: runtimeName,
+                            creditsLimit: creditsLimit,
+                            capabilities: userStorage ? ['user_storage'] : undefined,
+                            snapshot: kernelSnapshot?.id,
+                        }, {
+                            username: user?.handle,
+                            handleComms: true,
+                        });
+                        desc.kernelId = connection.id;
+                        if (jupyterLabAdapter?.jupyterLab && hasExample && openExample) {
+                            const example = environments.find(spec => spec.name === selection)?.example;
+                            if (example) {
+                                const options = {
+                                    kernelId: connection.id,
+                                    kernelName: connection.name,
+                                };
+                                createNotebook({
+                                    app: jupyterLabAdapter.jupyterLab,
+                                    name: selection,
+                                    url: example,
+                                    options,
+                                });
+                            }
+                        }
+                        // Close the connection as we are not using it.
+                        connection.dispose();
+                    }
+                    catch (error) {
+                        let msg = _jsx(Text, { children: "Failed to create the remote runtime\u2026" });
+                        let level = 'danger';
+                        let retry = false;
+                        if (error.response?.status === 503) {
+                            if (availableTrial++ <= NOT_AVAILABLE_RETRIES) {
+                                retry = true;
+                                msg = (_jsxs(Text, { children: ["The runtime you have requested is currently not available due to resource limitations. Leave this dialog open, new trial in ", _jsx(Timer, { duration: retryDelay * 0.001 }), ` (${availableTrial - 1}/${NOT_AVAILABLE_RETRIES}).`] }));
+                            }
+                            else {
+                                msg = _jsx(Text, { children: NO_RUNTIME_AVAILABLE_LABEL });
+                            }
+                            level = 'warning';
+                        }
+                        else if (error.name === 'MaxRuntimesExceededError') {
+                            msg = (_jsx(Text, { children: "You reached your remote runtime limits. Stop existing runtimes before starting new ones." }));
+                            level = 'warning';
+                        }
+                        else if (error.name === 'RuntimeUnreachable') {
+                            msg = (_jsx(Text, { children: "The runtime has been created but can not be accessed. Please contact your IT support team to report this issue." }));
+                        }
+                        setFlashLevel(level);
+                        console.error(msg, error);
+                        setError(msg);
+                        if (retry) {
+                            await sleep(retryDelay);
+                            retryDelay *= 2;
+                            if (isMounted()) {
+                                return await startNewKernel();
+                            }
+                        }
+                        return false;
+                    }
+                    finally {
+                        setWaitingForRuntime(false);
+                    }
+                    return true;
+                };
+                // Start the kernel if the reservation succeeded.
+                success = await startNewKernel();
+            }
+            if (success && isMounted()) {
+                if (!shouldStartRuntime) {
+                    setWaitingForRuntime(false);
+                }
+                onSubmit(desc);
+            }
+        }
+    }, [
+        manager,
+        selection,
+        startRuntime,
+        runtimeName,
+        onSubmit,
+        userStorage,
+        openExample,
+        jupyterLabAdapter,
+        timeLimit,
+        shouldStartRuntime,
+        isMounted,
+    ]);
+    const handleSwitchClick = useCallback((e) => {
+        e.preventDefault();
+        setOpenExample(!openExample);
+    }, [openExample]);
+    const handleUpgrade = useCallback(() => {
+        if (upgradeSubscription) {
+            navigate?.(upgradeSubscription);
+        }
+    }, [navigate, upgradeSubscription]);
+    const handleKernelNameChange = useCallback((e) => {
+        if (typeof e.target.value === 'string') {
+            setRuntimeName(e.target.value);
+            setHasCustomRuntimeName(true);
+        }
+    }, []);
+    // TODO title color is enforced for JupyterLab.
+    // This may be fixed in the jupyter-react theme (Primer generates h1 for the dialog title).
+    return (_jsx(Dialog, { title: _jsx("span", { style: { color: 'var(--fgColor-default)' }, children: dialogTitle || 'Launch a new Code Sandbox' }), onClose: () => {
+            onSubmit(undefined);
+        }, footerButtons: [
+            {
+                buttonType: 'default',
+                onClick: () => {
+                    onSubmit(undefined);
+                },
+                content: 'Cancel',
+                disabled: waitingForRuntime,
+            },
+            {
+                buttonType: 'primary',
+                onClick: handleSubmitRuntime,
+                content: waitingForRuntime ? (_jsx(Spinner, { size: "small" })) : ((submitLabel ?? ((startRuntime ?? true) ? 'Launch' : 'Assign'))),
+                disabled: waitingForRuntime || !selection || outOfCredits,
+                autoFocus: true,
+            },
+        ], children: _jsxs(Box, { as: "form", onKeyDown: event => {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                if (event.key === 'Enter') {
+                    event.preventDefault();
+                    handleSubmitRuntime();
+                }
+            }, children: [_jsxs(FormControl, { disabled: !!kernelSnapshot?.environment || environments.length === 0, children: [_jsx(FormControl.Label, { children: "Environment" }), _jsx(Select, { name: "environment", disabled: !!kernelSnapshot?.environment || environments.length === 0, value: selection, onChange: handleSelectionChange, block: true, children: environments.map(spec => (_jsxs(Select.Option, { value: spec.name, children: [spec.name, spec.title && (_jsxs(_Fragment, { children: [' - ', spec.title] }))] }, spec.name))) }), _jsx(FormControl.Caption, { children: _jsx(_Fragment, { children: markdownParser ? (_jsx(Box, { sx: { img: { maxWidth: '100%' } }, children: _jsx(Markdown, { text: description, markdownParser: markdownParser, sanitizer: sanitizer }) })) : sanitizer ? (
+                                // The description of an environment carries markup. With no
+                                // parser to render it, the sanitizer of the application is
+                                // enough to show it as what it is rather than as its tags.
+                                _jsx(Box, { sx: { img: { maxWidth: '100%' } }, dangerouslySetInnerHTML: {
+                                        __html: sanitizer.sanitize(description),
+                                    } })) : (
+                                // Neither a parser nor a sanitizer: the text of the markup,
+                                // which is still better than the markup itself.
+                                asPlainText(description)) }) })] }), _jsx(NewCodeSandboxControls, { withReservation: !!startRuntime, burningRate: burningRate, timeLimit: timeLimit, onTimeChange: setTimeLimit, max: effectiveMaxMinutes, disabled: outOfCredits, error: outOfCredits ? 'You must add credits to your account.' : undefined, addCredits: navigate
+                        ? () => {
+                            navigate(USAGE_ROUTE);
+                        }
+                        : undefined, userStorage: userStorage, onUserStorageToggle: () => setUserStorage(current => !current) }), _jsxs(FormControl, { sx: { paddingTop: '10px' }, children: [_jsx(FormControl.Label, { children: "Runtime name" }), _jsx(TextInput, { name: "name", value: runtimeName, onChange: handleKernelNameChange, block: true })] }), hasExample &&
+                    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

@@ -0,0 +1,71 @@
+import { ReactElement, ReactNode } from 'react';
+import { ISessionContext } from '@jupyterlab/apputils';
+import { ITranslator } from '@jupyterlab/translation';
+import { IRuntimeDesc } from '../../models';
+import { IMultiServiceManager } from '../../runtimes';
+type IDisplayMode = 'menu' | 'radio';
+/**
+ * {@link CodeSandboxPicker} properties
+ */
+export interface ICodeSandboxPickerProps {
+    /**
+     * The display mode.
+     */
+    display: IDisplayMode;
+    /**
+     * Additional actions items to be placed at the top of the picker
+     */
+    preActions?: ReactNode;
+    /**
+     * Additional actions items to be placed at the bottom of the picker
+     */
+    postActions?: ReactNode;
+    /**
+     * Whether the picker is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Runtime description passing this filter function will be displayed.
+     */
+    filterRuntime?: (desc: IRuntimeDesc) => boolean;
+    /**
+     * Session preference.
+     */
+    preference?: {
+        id?: string;
+        kernelDisplayName?: string;
+        language?: string;
+        location?: string;
+    };
+    /**
+     * Runtime description.
+     */
+    runtimeDesc?: IRuntimeDesc;
+    /**
+     * Set runtime description.
+     */
+    setRuntimeDesc: (desc?: IRuntimeDesc) => void;
+    /**
+     * Document session context.
+     */
+    sessionContext?: ISessionContext;
+    /**
+     * Application service manager
+     */
+    multiServiceManager: IMultiServiceManager;
+    /**
+     * Application translator.
+     */
+    translator?: ITranslator;
+    /**
+     * Change the look depending on the menu integration.
+     */
+    variant?: 'document' | 'cell';
+}
+/**
+ * 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

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { 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';
+import CloudUploadIcon from '@datalayer/icons-react/data1/CloudUploadIcon';
+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';
+/**
+ * Maximal runtime display name length after which it is trimmed.
+ */
+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 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'),
+    };
+    useEffect(() => {
+        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);
+    }, [
+        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
+    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 })] })) }));
+}
+// Backward-compatible aliases (deprecated: use CodeSandboxPicker).
+export const RuntimePickerBase = CodeSandboxPicker;
+export default CodeSandboxPicker;

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

@@ -0,0 +1,42 @@
+/** What the account allows for a new sandbox of a given burning rate. */
+export interface INewCodeSandboxAllowance {
+    /** Minutes the available credits pay for; undefined without a rate. */
+    maxFromCredits?: number;
+    /** The ceiling offered by the reservation control. */
+    effectiveMaxMinutes: number;
+    /** Whether a paid start is impossible: no runs left and no credits. */
+    outOfCredits: boolean;
+    hasKnownCredits: boolean;
+    hasKnownRunAllowance: boolean;
+    hasRemainingRuns: boolean;
+}
+/**
+ * The credits arithmetic both the launcher and the picker ask.
+ *
+ * @param burningRate Credits per second of the chosen environment
+ */
+export declare function useNewCodeSandboxAllowance(burningRate: number | undefined): INewCodeSandboxAllowance;
+/** The credits a time reservation stands for. */
+export declare function creditsLimitFor(timeLimitMinutes: number, burningRate: number): number;
+export interface INewCodeSandboxControlsProps {
+    /** Whether the time reservation is offered; it is by default. */
+    withReservation?: boolean;
+    /** Credits per second of the chosen environment. */
+    burningRate?: number;
+    timeLimit: number;
+    onTimeChange: (minutes: number) => void;
+    /** The ceiling of the reservation control. */
+    max: number;
+    disabled?: boolean;
+    error?: string;
+    /** Offered next to the error when credits can be added from here. */
+    addCredits?: () => void;
+    userStorage: boolean;
+    onUserStorageToggle: () => void;
+    storageDisabled?: boolean;
+}
+/**
+ * The two questions of a new sandbox: the time reservation, and the storage.
+ * The storage is withheld on white-label deployments, as it always was.
+ */
+export declare function NewCodeSandboxControls(props: INewCodeSandboxControlsProps): JSX.Element;

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

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * What launching a NEW code sandbox asks of the user, in one place.
+ *
+ * The launcher dialog and the picker both offer to start a sandbox, and both
+ * used to carry their own copy of the same questions — how long to reserve,
+ * whether to mount the user storage — and of the same arithmetic over the
+ * credits of the account. This module is the single copy: the hook computes
+ * what the account allows, the component renders the two controls, and the
+ * helper turns a time limit into the credits reservation.
+ *
+ * @module components/code-sandboxes/NewCodeSandboxControls
+ */
+import { FormControl, ToggleSwitch, Tooltip, IconButton } from '@primer/react';
+import { AlertIcon } from '@primer/octicons-react';
+import { useCoreStore, useIAMStore } from '../../state/substates';
+import { RuntimeReservationControl, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES, } from '../runtimes/RuntimeReservationControl';
+/**
+ * The credits arithmetic both the launcher and the picker ask.
+ *
+ * @param burningRate Credits per second of the chosen environment
+ */
+export function useNewCodeSandboxAllowance(burningRate) {
+    const { credits, user } = useIAMStore();
+    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 maxFromCredits = burningRate
+        ? Math.floor((credits?.available ?? 0) / burningRate / 60.0)
+        : undefined;
+    const effectiveMaxMinutes = hasKnownCredits && hasKnownRunAllowance && !hasRemainingRuns
+        ? Math.max(1, maxFromCredits ?? 0)
+        : Math.max(10, maxFromCredits && maxFromCredits > 0 ? maxFromCredits : 0);
+    const outOfCredits = hasKnownCredits &&
+        hasKnownRunAllowance &&
+        !hasRemainingRuns &&
+        ((credits?.available ?? 0) <= 0 || (maxFromCredits ?? 0) < Number.EPSILON);
+    return {
+        maxFromCredits,
+        effectiveMaxMinutes,
+        outOfCredits,
+        hasKnownCredits,
+        hasKnownRunAllowance,
+        hasRemainingRuns,
+    };
+}
+/** The credits a time reservation stands for. */
+export function creditsLimitFor(timeLimitMinutes, burningRate) {
+    return (Math.min(timeLimitMinutes, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES) *
+        burningRate *
+        60);
+}
+/**
+ * The two questions of a new sandbox: the time reservation, and the storage.
+ * The storage is withheld on white-label deployments, as it always was.
+ */
+export function NewCodeSandboxControls(props) {
+    const { addCredits, burningRate, withReservation = true, disabled, error, max, onTimeChange, onUserStorageToggle, storageDisabled, timeLimit, userStorage, } = props;
+    const { configuration } = useCoreStore();
+    return (_jsxs(_Fragment, { children: [withReservation && (_jsx(RuntimeReservationControl, { addCredits: addCredits, disabled: disabled, label: 'Time reservation', max: max, time: timeLimit, burningRate: burningRate, onTimeChange: onTimeChange, error: error })), !configuration.whiteLabel && (_jsxs(FormControl, { disabled: storageDisabled, layout: "horizontal", children: [_jsxs(FormControl.Label, { id: "new-sandbox-user-storage-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: storageDisabled, checked: userStorage, size: "small", onClick: event => {
+                            event.preventDefault();
+                            onUserStorageToggle();
+                        }, "aria-labelledby": "new-sandbox-user-storage-label" })] }))] }));
+}

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

@@ -0,0 +1,3 @@
+export * from './CodeSandboxPicker';
+export * from './CodeSandboxLauncher';
+export * from './NewCodeSandboxControls';

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

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './CodeSandboxPicker';
+export * from './CodeSandboxLauncher';
+export * from './NewCodeSandboxControls';

package/lib/components/progress/CreditsIndicator.d.ts

@@ -25,6 +25,13 @@ type ICreditsIndicatorProps = {
      * Duration is the kernel max duration
      */
     onUpdate?: (progress: number, duration: number) => void;
+    /**
+     * Paddings of the indicator, each defaulting to the current ones.
+     */
+    paddingLeft?: number | string;
+    paddingRight?: number | string;
+    paddingTop?: number | string;
+    paddingBottom?: number | string;
 };
 /**
  * Credits indicator component.