@datalayer/agent-runtimes 1.0.20 → 1.0.25

package/lib/components/progress/CreditsIndicator.js

@@ -11,7 +11,7 @@ import { ConsumptionBar } from '@datalayer/core/lib/components/progress/Consumpt
  * Credits indicator component.
  */
 export function CreditsIndicator(props) {
-    const { serviceManager, kernelId, navigateTo, onClick, onUpdate } = props;
+    const { serviceManager, kernelId, navigateTo, onClick, onUpdate, paddingLeft, paddingRight, paddingTop, paddingBottom, } = props;
     const navigate = useNavigate();
     const [model, setModel] = useState();
     useEffect(() => {
@@ -19,5 +19,5 @@ export function CreditsIndicator(props) {
             setModel(model);
         });
     }, [kernelId, serviceManager]);
-    return model ? (_jsx(Box, { display: "flex", style: { alignItems: 'center' }, children: _jsx(ConsumptionBar, { startedAt: parseFloat(model.started_at), expiredAt: model.expired_at ? parseFloat(model.expired_at) : undefined, burningRate: model.burning_rate, onClick: onClick ?? (navigateTo ? () => navigate(navigateTo) : undefined), onUpdate: onUpdate, style: { cursor: 'pointer' } }) })) : (_jsx(_Fragment, {}));
+    return model ? (_jsx(Box, { display: "flex", style: { alignItems: 'center' }, children: _jsx(ConsumptionBar, { startedAt: parseFloat(model.started_at), expiredAt: model.expired_at ? parseFloat(model.expired_at) : undefined, burningRate: model.burning_rate, onClick: onClick ?? (navigateTo ? () => navigate(navigateTo) : undefined), onUpdate: onUpdate, style: { cursor: 'pointer' }, paddingLeft: paddingLeft, paddingRight: paddingRight, paddingTop: paddingTop, paddingBottom: paddingBottom }) })) : (_jsx(_Fragment, {}));
 }

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

@@ -1,57 +1,7 @@
-import type { IMarkdownParser, IRenderMime } from '@jupyterlab/rendermime';
-import type { IRemoteServicesManager } from '../../runtimes';
-import type { ICodeSandboxSnapshot, IRuntimeDesc } from '../../models';
 /**
- * {@link RuntimeLauncherDialog} properties.
+ * Moved: the launcher lives with the code sandboxes now.
+ *
+ * @deprecated Import from `components/code-sandboxes/CodeSandboxLauncher`.
+ * @module components/runtimes/RuntimeLauncherDialog
  */
-export interface IRuntimeLauncherDialogProps {
-    /**
-     * Dialog title
-     */
-    dialogTitle?: string;
-    /**
-     * Remote Jupyter service manager
-     */
-    manager: IRemoteServicesManager;
-    /**
-     * Form submission callback
-     */
-    onSubmit: (spec?: IRuntimeDesc) => void;
-    /**
-     * Whether to start the kernel or not.
-     *
-     * If `with-example`, a kernel will be started an
-     * an example document will be opened (if available).
-     * If `defer`, a kernel will not be started but the
-     * kernel params will have a `creditsLimit` defined
-     * for spinning a runtime.
-     *
-     * Default: `true`
-     */
-    startRuntime?: boolean | 'with-example' | 'defer';
-    /**
-     * Markdown parser
-     */
-    markdownParser?: IMarkdownParser;
-    /**
-     * If provided the kernel will be started and will
-     * restore the provided snapshot in the kernel.
-     */
-    kernelSnapshot?: ICodeSandboxSnapshot;
-    /**
-     * HTML sanitizer
-     */
-    sanitizer?: IRenderMime.ISanitizer;
-    /**
-     * Upgrade subscription URL
-     */
-    upgradeSubscription?: string;
-    /**
-     * Optional submit button label override.
-     */
-    submitLabel?: string;
-}
-/**
- * Start Runtime Launcher Dialog.
- */
-export declare function RuntimeLauncherDialog(props: IRuntimeLauncherDialogProps): JSX.Element;
+export { CodeSandboxLauncher, RuntimeLauncherDialog, type ICodeSandboxLauncherProps, type IRuntimeLauncherDialogProps, } from '../code-sandboxes/CodeSandboxLauncher';

package/lib/components/runtimes/RuntimeLauncherDialog.js

@@ -1,275 +1,11 @@
-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, Tooltip, IconButton, } from '@primer/react';
-import { Dialog } from '@primer/react/experimental';
-import { AlertIcon } from '@primer/octicons-react';
-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 { RuntimeReservationControl, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES, } from './RuntimeReservationControl';
 /**
- * Initial time in milliseconds before retrying in case no kernels are available
+ * Moved: the launcher lives with the code sandboxes now.
+ *
+ * @deprecated Import from `components/code-sandboxes/CodeSandboxLauncher`.
+ * @module components/runtimes/RuntimeLauncherDialog
  */
-const NOT_AVAILABLE_INIT_RETRY = 10_000;
-/**
- * Number of trials in case of unavailable code sandboxes
- */
-const NOT_AVAILABLE_RETRIES = 5;
-/**
- * Start Runtime Launcher Dialog.
- */
-export function RuntimeLauncherDialog(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 { credits, 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;
-    const creditsToMinutes = 1.0 / burningRate / 60.0;
-    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 = hasKnownCredits
-        ? Math.floor((credits.available ?? 0) * creditsToMinutes)
-        : 10;
-    const effectiveMaxMinutes = hasKnownCredits && hasKnownRunAllowance && !hasRemainingRuns
-        ? Math.max(1, maxFromCredits)
-        : Math.max(10, maxFromCredits > 0 ? maxFromCredits : 0);
-    const outOfCredits = shouldStartRuntime &&
-        hasKnownCredits &&
-        hasKnownRunAllowance &&
-        !hasRemainingRuns &&
-        ((credits.available ?? 0) <= 0 || maxFromCredits < Number.EPSILON);
-    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 = Math.min(timeLimit, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES) /
-                creditsToMinutes;
-            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 handleUserStorageChange = useCallback((e) => {
-        e.preventDefault();
-        setUserStorage(!userStorage);
-    }, [userStorage]);
-    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 Runtime' }), 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 }) })) : (description) }) })] }), startRuntime && (_jsx(RuntimeReservationControl, { addCredits: navigate
-                        ? () => {
-                            navigate(USAGE_ROUTE);
-                        }
-                        : undefined, disabled: outOfCredits, label: 'Time reservation', max: effectiveMaxMinutes, time: timeLimit, burningRate: burningRate, onTimeChange: setTimeLimit, error: outOfCredits ? 'You must add credits to your account.' : undefined })), !configuration.whiteLabel && (_jsxs(FormControl, { layout: "horizontal", children: [_jsxs(FormControl.Label, { id: "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, { checked: userStorage, size: "small", onClick: handleUserStorageChange, "aria-labelledby": "user-storage-label" })] })), _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 }))] }) }));
-}
+export { CodeSandboxLauncher, RuntimeLauncherDialog, } from '../code-sandboxes/CodeSandboxLauncher';

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

@@ -1,69 +1,8 @@
-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 RuntimePickerBase} properties
+ * Moved: the picker lives with the code sandboxes now.
+ *
+ * @deprecated Import from `components/code-sandboxes/CodeSandboxPicker`.
+ * @module components/runtimes/RuntimePickerBase
  */
-export interface IRuntimePickerBaseProps {
-    /**
-     * 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';
-}
-/**
- * Base Kernel Picker component.
- */
-export declare function RuntimePickerBase(props: IRuntimePickerBaseProps): ReactElement;
-export default RuntimePickerBase;
+export { CodeSandboxPicker, RuntimePickerBase, type ICodeSandboxPickerProps, type IRuntimePickerBaseProps, } from '../code-sandboxes/CodeSandboxPicker';
+export { default } from '../code-sandboxes/CodeSandboxPicker';

package/lib/components/runtimes/RuntimePickerBase.js

@@ -1,157 +1,12 @@
-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 '../../components/progress';
-import { isRuntimeRemote } from '../../runtimes';
-import { getGroupedRuntimeDescs } from './RuntimeUtils';
 /**
- * Maximal runtime display name length after which it is trimmed.
+ * Moved: the picker lives with the code sandboxes now.
+ *
+ * @deprecated Import from `components/code-sandboxes/CodeSandboxPicker`.
+ * @module components/runtimes/RuntimePickerBase
  */
-const RUNTIME_DISPLAY_NAME_MAX_LENGTH = 25;
-/**
- * Base Kernel Picker component.
- */
-export function RuntimePickerBase(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 (_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.kernelId));
-                            })] }, group))) })), !!postActions && _jsx(_Fragment, { children: postActions })] })) }));
-}
-export default RuntimePickerBase;
+export { CodeSandboxPicker, RuntimePickerBase, } from '../code-sandboxes/CodeSandboxPicker';
+export { default } from '../code-sandboxes/CodeSandboxPicker';

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

@@ -1,11 +1,11 @@
 import { ISessionContext } from '@jupyterlab/apputils';
 import { CodeCellModel } from '@jupyterlab/cells';
 import type { IMarkdownParser, IRenderMime } from '@jupyterlab/rendermime';
-import { IRuntimePickerBaseProps } from './RuntimePickerBase';
+import { type ICodeSandboxPickerProps } from '../code-sandboxes/CodeSandboxPicker';
 /**
  * {@link RuntimePickerCell} properties
  */
-export type IRuntimePickerCellProps = Pick<IRuntimePickerBaseProps, 'multiServiceManager' | 'preference' | 'translator'> & {
+export type IRuntimePickerCellProps = Pick<ICodeSandboxPickerProps, 'multiServiceManager' | 'preference' | 'translator'> & {
     /**
      * Callback to allow the user to login
      */

package/lib/components/runtimes/RuntimePickerCell.js

@@ -12,8 +12,8 @@ import { isRuntimeRemote } from '../../runtimes';
 import { RuntimeSnippetsFacade } from '../../jupyter';
 import { ExternalTokenSilentLogin } from '@datalayer/core/lib/components/iam';
 import { SnippetDialog } from '../../components/snippets/SnippetDialog';
-import { RuntimeLauncherDialog } from './RuntimeLauncherDialog';
-import { RuntimePickerBase } from './RuntimePickerBase';
+import { CodeSandboxPicker, } from '../code-sandboxes/CodeSandboxPicker';
+import { CodeSandboxLauncher } from '../code-sandboxes/CodeSandboxLauncher';
 import { RuntimeCellVariablesDialog } from './RuntimeCellVariablesDialog';
 /**
  * Runtime picker component for a cell.
@@ -97,8 +97,8 @@ export function RuntimePickerCell(props) {
         setIsKernelDialogOpen(false);
     }, [setSelectedRuntimeDesc]);
     const datalayerMeta = model.getMetadata('datalayer') ?? {};
-    return (_jsxs(_Fragment, { children: [_jsx(RuntimePickerBase, { display: "menu", filterRuntime: filterKernel, preference: preference, multiServiceManager: multiServiceManager, runtimeDesc: datalayerMeta.kernel ? datalayerMeta.kernel : undefined, setRuntimeDesc: setSelectedRuntimeDesc, variant: 'cell', preActions: _jsxs(ActionList.Item, { disabled: !multiServiceManager.remote, onSelect: setCell, selected: hasCellRuntime, title: !multiServiceManager.remote
+    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(RuntimeLauncherDialog, { manager: multiServiceManager.remote, onSubmit: onStartRemote, startRuntime: 'defer', submitLabel: "Assign", markdownParser: markdownParser, sanitizer: sanitizer }))] }));
+                        : 'Assign a new temporary Runtime on each Cell execution.', children: [_jsx(ActionList.LeadingVisual, { children: _jsx(CloudUploadIcon, {}) }), trans.__('Assign a Cell Runtime')] }), postActions: token || !logIn ? (_jsxs(_Fragment, { children: [RuntimeSnippetsFacade.supports(preference?.language ?? '') && (_jsx(ActionList.Item, { onSelect: openVariableDialog, disabled: !isForeign, title: trans.__('Define variables to transfer between the document kernel and the cell kernel.'), children: trans.__('Define Cell Variables Transfer') })), !configuration.whiteLabel && (_jsx(ActionList.Item, { onSelect: openSnippetDialog, disabled: snippets.length === 0, title: trans.__('Inject a code snippet at the end of the cell.'), children: trans.__('Inject Code Snippet') }))] })) : (_jsx(ActionList.Item, { onSelect: props.logIn, title: 'Runtime Provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Click to sign in" }) })), translator: translator }), isVariableDialogOpen && (_jsx(RuntimeCellVariablesDialog, { model: model, onClose: closeVariableDialog, preference: preference, sessionContext: sessionContext, translator: translator })), isSnippetDialogOpen && (_jsx(SnippetDialog, { language: language, model: model, snippets: snippets, onClose: closeSnippetDialog, markdownParser: markdownParser, sanitizer: sanitizer })), isKernelDialogOpen && (_jsx(CodeSandboxLauncher, { manager: multiServiceManager.remote, onSubmit: onStartRemote, startRuntime: 'defer', submitLabel: "Assign", markdownParser: markdownParser, sanitizer: sanitizer }))] }));
 }
 export default RuntimePickerCell;