@datalayer/core 0.0.1 → 0.0.2

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

@@ -0,0 +1,54 @@
+import type { IMarkdownParser, IRenderMime } from '@jupyterlab/rendermime';
+import type { IRemoteServicesManager } from '../../api';
+import { type IRuntimeSnapshot } from '../../models';
+import type { IRuntimeDesc } from '../../api';
+/**
+ * {@link KernelLauncherDialog} properties.
+ */
+export interface IKernelLauncherDialogProps {
+    /**
+     * 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`
+     */
+    startKernel?: 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?: IRuntimeSnapshot;
+    /**
+     * HTML sanitizer
+     */
+    sanitizer?: IRenderMime.ISanitizer;
+    /**
+     * Upgrade subscription URL
+     */
+    upgradeSubscription?: string;
+}
+/**
+ * Start Remote Runtime Dialog.
+ */
+export declare function KernelLauncherDialog(props: IKernelLauncherDialogProps): JSX.Element;

package/lib/components/runtimes/RuntimeLauncherDialog.js

@@ -0,0 +1,254 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer 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 { useNavigate } from '../../hooks';
+import { NO_RUNTIME_AVAILABLE_LABEL } from '../../i18n';
+import { iamStore, useCoreStore, useIAMStore, useRuntimesStore } from '../../state';
+import { createNotebook, sleep } from '../../utils';
+import { Markdown } from '../display';
+import { Timer } from '../progress';
+import { FlashClosable } from '../flashes';
+import { RuntimeReservationControl, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES } from './RuntimeReservationControl';
+import { USAGE_ROUTE } from '../../routes';
+/**
+ * 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 kernels
+ */
+const NOT_AVAILABLE_RETRIES = 5;
+/**
+ * Start Remote Runtime Dialog.
+ */
+export function KernelLauncherDialog(props) {
+    const { dialogTitle, kernelSnapshot, manager, onSubmit, markdownParser, sanitizer, upgradeSubscription, startKernel = true } = props;
+    const hasExample = startKernel === 'with-example';
+    const user = iamStore.getState().user;
+    const environments = manager.environments.get();
+    const { configuration } = useCoreStore();
+    const { credits, refreshCredits } = useIAMStore();
+    let navigate;
+    try {
+        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 { jupyterLabAdapter } = useRuntimesStore();
+    const [selection, setSelection] = useState((kernelSnapshot?.environment || environments[0]?.name) ?? '');
+    const [timeLimit, setTimeLimit] = useState(Math.min(credits?.available ?? 0, 10));
+    const [runtimeName, setRuntimeName] = useState(environments[0]?.kernel?.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 (startKernel) {
+            refreshCredits();
+        }
+    }, [startKernel]);
+    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 max = Math.floor((credits?.available ?? 0) * creditsToMinutes);
+    const outOfCredits = startKernel && (!credits?.available || max < 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?.kernel?.givenNameTemplate || spec?.title || '');
+        }
+    }, [setSelection, hasCustomRuntimeName]);
+    const handleSubmitKernel = useCallback(async () => {
+        if (selection) {
+            setError(undefined);
+            setWaitingForRuntime(true);
+            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 (startKernel === 'defer') {
+                desc.params['creditsLimit'] = creditsLimit;
+            }
+            if (userStorage) {
+                desc.params['capabilities'] = ['user_storage'];
+            }
+            let success = true;
+            if (startKernel && startKernel !== 'defer') {
+                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()) {
+                onSubmit(desc);
+            }
+        }
+    }, [
+        manager,
+        selection,
+        startKernel,
+        runtimeName,
+        onSubmit,
+        userStorage,
+        openExample,
+        jupyterLabAdapter,
+        timeLimit,
+        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);
+        }
+    }, []);
+    return (_jsx(Dialog, { title: dialogTitle || 'Launch a new Runtime', onClose: () => { onSubmit(undefined); }, footerButtons: [
+            {
+                buttonType: 'default',
+                onClick: () => { onSubmit(undefined); },
+                content: 'Cancel',
+                disabled: waitingForRuntime
+            },
+            {
+                buttonType: 'primary',
+                onClick: handleSubmitKernel,
+                content: waitingForRuntime ?
+                    _jsx(Spinner, { size: "small" })
+                    :
+                        startKernel ?? true ? 'Launch' : 'Assign from the Environment',
+                disabled: waitingForRuntime || outOfCredits || timeLimit < Number.EPSILON,
+                autoFocus: true
+            }
+        ], children: _jsxs(Box, { as: "form", onKeyDown: event => {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                if (event.key === 'Enter') {
+                    event.preventDefault();
+                    handleSubmitKernel();
+                }
+            }, 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) }) })] }), startKernel &&
+                    _jsx(RuntimeReservationControl, { addCredits: navigate ?
+                            () => { navigate(USAGE_ROUTE); }
+                            :
+                                undefined, disabled: outOfCredits, label: 'Time reservation', max: max, 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, { 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 })] }), _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, { children: "Open example notebook" }), _jsx(ToggleSwitch, { disabled: !environments.find(spec => spec.name === selection)?.example, checked: openExample, size: "small", onClick: handleSwitchClick })] }), error &&
+                    _jsx(FlashClosable, { variant: flashLevel, actions: navigate && upgradeSubscription && flashLevel === 'warning' ?
+                            _jsx(Button, { onClick: handleUpgrade, title: 'Upgrade your subscription.', children: "Upgrade" })
+                            :
+                                undefined, children: error })] }) }));
+}

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

@@ -0,0 +1,69 @@
+import { ReactElement, ReactNode } from 'react';
+import { ISessionContext } from '@jupyterlab/apputils';
+import { ITranslator } from '@jupyterlab/translation';
+import { IRuntimeDesc } from '../../api';
+import { IMultiServiceManager } from '../../api';
+type IDisplayMode = 'menu' | 'radio';
+/**
+ * {@link RuntimePickerBase} properties
+ */
+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.
+     */
+    filterKernel?: (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;

package/lib/components/runtimes/RuntimePickerBase.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer 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 '../../api';
+import { getGroupedRuntimeDescs } from './RuntimeUtils';
+/**
+ * Maximal runtime display name length after which it is trimmed.
+ */
+const RUNTIME_DISPLAY_NAME_MAX_LENGTH = 25;
+/**
+ * Base Kernel Picker component.
+ */
+export function RuntimePickerBase(props) {
+    const { disabled, display, filterKernel, multiServiceManager, postActions, preActions, preference, runtimeDesc, sessionContext, setRuntimeDesc, translator, variant, } = props;
+    const [groupedKernelDescs, _] = useState(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterKernel, variant));
+    const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
+    const [defaultSet, setDefaultSet] = useState(false);
+    // Trick because overflow is an unknown prop of ActionMenu.Overlay.
+    const overlayProps = {
+        maxHeight: 'large',
+        width: (variant === 'cell' ? 'small' : 'auto')
+    };
+    /*
+    // TODO this effect generates refresh of the react components which discards any change in the selection.
+    useEffect(() => {
+      const updateGroupedKernelDescs = () => {
+        setGroupedKernelDescs(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterKernel, variant));
+      };
+      multiServiceManager.browser?.kernels.runningChanged.connect(updateGroupedKernelDescs);
+      multiServiceManager.browser?.kernelspecs.specsChanged.connect(updateGroupedKernelDescs);
+      multiServiceManager.browser?.sessions.runningChanged.connect(updateGroupedKernelDescs);
+      multiServiceManager.local.kernels.runningChanged.connect(updateGroupedKernelDescs);
+      multiServiceManager.local.kernelspecs.specsChanged.connect(updateGroupedKernelDescs);
+      multiServiceManager.local.sessions.runningChanged.connect(updateGroupedKernelDescs);
+      multiServiceManager.remote?.kernels.changed.connect(updateGroupedKernelDescs);
+      multiServiceManager.remote?.environments.changed.connect(updateGroupedKernelDescs);
+      // multiServiceManager.remote?.sessions.runningChanged.connect(updateOptions);
+      return () => {
+        multiServiceManager.browser?.kernels.runningChanged.disconnect(updateGroupedKernelDescs);
+        multiServiceManager.browser?.kernelspecs.specsChanged.disconnect(updateGroupedKernelDescs);
+        multiServiceManager.browser?.sessions.runningChanged.disconnect(updateGroupedKernelDescs);
+        multiServiceManager.local.kernels.runningChanged.disconnect(updateGroupedKernelDescs);
+        multiServiceManager.local.kernelspecs.specsChanged.disconnect(updateGroupedKernelDescs);
+        multiServiceManager.local.sessions.runningChanged.disconnect(updateGroupedKernelDescs);
+        multiServiceManager.remote?.kernels.changed.disconnect(updateGroupedKernelDescs);
+        multiServiceManager.remote?.environments.changed.disconnect(updateGroupedKernelDescs);
+        // multiServiceManager.remote?.sessions.runningChanged.disconnect(updateOptions);
+      };
+    }, [multiServiceManager, preference, translator, filterKernel, variant]);
+    */
+    useEffect(() => {
+        if (sessionContext && groupedKernelDescs) {
+            const kernelId = sessionContext.session?.kernel?.id;
+            if (kernelId) {
+                Object.entries(groupedKernelDescs).forEach(([group, runtimeDescs]) => {
+                    runtimeDescs.forEach(runtimeDesc => {
+                        if (runtimeDesc.kernelId === kernelId) {
+                            setRuntimeDesc(runtimeDesc);
+                        }
+                    });
+                });
+            }
+        }
+        setDefaultSet(true);
+    }, [groupedKernelDescs]);
+    // 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 || groupedKernelDescs === 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 || groupedKernelDescs === 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(groupedKernelDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: group }), runtimeDescs.map(runtimeDesc => {
+                                            const annotation = runtimeDesc.podName ? ` - ${runtimeDesc.podName.split('-', 2).reverse()[0]}` : runtimeDesc.kernelId ? ` - ${runtimeDesc.kernelId}` : '';
+                                            const fullDisplayName = (runtimeDesc.displayName ?? '') + annotation;
+                                            const displayName = (runtimeDesc.displayName?.length ?? 0) > RUNTIME_DISPLAY_NAME_MAX_LENGTH ? runtimeDesc.displayName.slice(0, RUNTIME_DISPLAY_NAME_MAX_LENGTH) + '…' : runtimeDesc.displayName ?? '';
+                                            return (_jsxs(ActionList.Item, { title: fullDisplayName, selected: (runtimeDesc.location === runtimeDesc?.location || (isRuntimeRemote(runtimeDesc.location) &&
+                                                    isRuntimeRemote(runtimeDesc?.location ?? 'local'))) && (runtimeDesc.kernelId ?? runtimeDesc.name) === (runtimeDesc?.kernelId ?? runtimeDesc?.name), onSelect: () => { setRuntimeDesc(runtimeDesc); }, children: [_jsx(ActionList.LeadingVisual, { children: runtimeDesc.location === 'local' ? _jsx(LaptopSimpleIcon, {}) : runtimeDesc.location === 'browser' ? _jsx(BrowserIcon, {}) : _jsx(CloudUploadIcon, {}) }), displayName + annotation.slice(0, 10)] }, runtimeDesc.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(groupedKernelDescs ?? {}).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 === k?.location || (isRuntimeRemote(k.location) &&
+                                                                    isRuntimeRemote(k?.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;

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

@@ -0,0 +1,34 @@
+import { ISessionContext } from '@jupyterlab/apputils';
+import { CodeCellModel } from '@jupyterlab/cells';
+import type { IMarkdownParser, IRenderMime } from '@jupyterlab/rendermime';
+import { IRuntimePickerBaseProps } from './RuntimePickerBase';
+/**
+ * {@link RuntimePickerCell} properties
+ */
+export type IRuntimePickerCellProps = Pick<IRuntimePickerBaseProps, 'multiServiceManager' | 'preference' | 'translator'> & {
+    /**
+     * Callback to allow the user to login
+     */
+    logIn?: () => void;
+    /**
+     * Code cell model
+     */
+    model: CodeCellModel;
+    /**
+     * Document session context
+     */
+    sessionContext?: ISessionContext;
+    /**
+     * Markdown parser
+     */
+    markdownParser?: IMarkdownParser;
+    /**
+     * HTML sanitizer; if not provided the produced HTML will not be sanitized.
+     */
+    sanitizer?: IRenderMime.ISanitizer;
+};
+/**
+ * Kernel picker component for a cell.
+ */
+export declare function RuntimePickerCell(props: IRuntimePickerCellProps): JSX.Element;
+export default RuntimePickerCell;

package/lib/components/runtimes/RuntimePickerCell.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { nullTranslator } from '@jupyterlab/translation';
+import { ActionList } from '@primer/react';
+import { CloudUploadIcon } from '@datalayer/icons-react';
+import { ExternalTokenSilentLogin } from '../../components/iam';
+import { useCoreStore, useIAMStore } from '../../state';
+import { isRuntimeRemote, RuntimeSnippetsFacade } from '../../api';
+import { SnippetDialog } from './../snippets/SnippetDialog';
+import { KernelLauncherDialog } from './RuntimeLauncherDialog';
+import { RuntimePickerBase } from './RuntimePickerBase';
+import { RuntimeCellVariablesDialog } from './RuntimeCellVariablesDialog';
+/**
+ * Kernel picker component for a cell.
+ */
+export function RuntimePickerCell(props) {
+    const { logIn, markdownParser, model, preference, sanitizer, multiServiceManager, sessionContext, translator } = props;
+    const { token } = useIAMStore();
+    const { configuration } = useCoreStore();
+    const [isForeign, setIsForeign] = useState(false);
+    const [hasCellKernel, setHasCellKernel] = useState(false);
+    const [isKernelDialogOpen, setIsKernelDialogOpen] = useState(false);
+    const [isVariableDialogOpen, setIsVariableDialogOpen] = useState(false);
+    const [language, setLanguage] = useState('');
+    const [snippets, setSnippets] = useState([]);
+    const [isSnippetDialogOpen, setIsSnippetDialogOpen] = useState(false);
+    const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
+    useEffect(() => {
+        const updateState = (model) => {
+            const datalayerMeta = model.getMetadata('datalayer') ?? {};
+            const kernel = datalayerMeta.kernel;
+            setIsForeign(!!kernel);
+            setHasCellKernel(kernel?.params?.notebook === false);
+            const newSnippets = new Array();
+            if (kernel) {
+                const spec = multiServiceManager.remote?.environments.get().find(env => env.name === kernel.name);
+                setLanguage(spec?.language ?? '');
+                if (spec?.snippets) {
+                    newSnippets.push(...spec.snippets);
+                }
+            }
+            setSnippets(newSnippets);
+        };
+        updateState(model);
+        model.metadataChanged.connect(updateState);
+        return () => {
+            model.metadataChanged.disconnect(updateState);
+        };
+    }, [model]);
+    const filterKernel = useCallback((desc) => {
+        return (!!desc.kernelId &&
+            isRuntimeRemote(desc.location) &&
+            (!preference?.language || desc.language === preference?.language));
+    }, [preference]);
+    const setSelectedKernelDesc = useCallback((kernel) => {
+        const datalayerMeta = model.getMetadata('datalayer') ?? { kernel: undefined };
+        if (!kernel) {
+            delete datalayerMeta.kernel;
+            model.setMetadata('datalayer', datalayerMeta);
+        }
+        else {
+            model.setMetadata('datalayer', Object.assign(datalayerMeta, { kernel }));
+        }
+    }, [model]);
+    const closeVariableDialog = useCallback(() => {
+        setIsVariableDialogOpen(false);
+    }, []);
+    const openVariableDialog = useCallback(() => {
+        setIsVariableDialogOpen(true);
+    }, []);
+    const closeSnippetDialog = useCallback(() => {
+        setIsSnippetDialogOpen(false);
+    }, []);
+    const openSnippetDialog = useCallback(() => {
+        setIsSnippetDialogOpen(true);
+    }, []);
+    const setCell = useCallback(() => {
+        setIsKernelDialogOpen(true);
+    }, []);
+    const onStartRemote = useCallback((desc) => {
+        if (desc) {
+            desc.params = {
+                ...desc.params,
+                notebook: false
+            };
+            setSelectedKernelDesc(desc);
+        }
+        setIsKernelDialogOpen(false);
+    }, [setSelectedKernelDesc]);
+    const datalayerMeta = model.getMetadata('datalayer') ?? {};
+    return (_jsxs(_Fragment, { children: [_jsx(RuntimePickerBase, { display: "menu", filterKernel: filterKernel, preference: preference, multiServiceManager: multiServiceManager, runtimeDesc: datalayerMeta.kernel ? datalayerMeta.kernel : undefined, setRuntimeDesc: setSelectedKernelDesc, variant: 'cell', preActions: _jsxs(ActionList.Item, { disabled: !multiServiceManager.remote, onSelect: setCell, selected: hasCellKernel, title: !multiServiceManager.remote
+                        ? 'You are not connected with Datalayer.'
+                        : 'Assign a new temporary Runtime on each Cell execution.', children: [_jsx(ActionList.LeadingVisual, { children: _jsx(CloudUploadIcon, {}) }), trans.__('Assign a Cell Runtime')] }), postActions: token || !logIn ?
+                    _jsxs(_Fragment, { children: [RuntimeSnippetsFacade.supports(preference?.language ?? '') && (_jsx(ActionList.Item, { onSelect: openVariableDialog, disabled: !isForeign, title: trans.__('Define variables to transfer between the document kernel and the cell kernel.'), children: trans.__('Define Cell Variables Transfer') })), !configuration.whiteLabel &&
+                                _jsx(ActionList.Item, { onSelect: openSnippetDialog, disabled: snippets.length === 0, title: trans.__('Inject a code snippet at the end of the cell.'), children: trans.__('Inject Code Snippet') })] })
+                    :
+                        _jsx(ActionList.Item, { onSelect: props.logIn, title: 'Connect to the Runtime provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Connect to the Runtime provider" }) }), translator: translator }), isVariableDialogOpen &&
+                _jsx(RuntimeCellVariablesDialog, { model: model, onClose: closeVariableDialog, preference: preference, sessionContext: sessionContext, translator: translator }), isSnippetDialogOpen &&
+                _jsx(SnippetDialog, { language: language, model: model, snippets: snippets, onClose: closeSnippetDialog, markdownParser: markdownParser, sanitizer: sanitizer }), isKernelDialogOpen &&
+                _jsx(KernelLauncherDialog, { manager: multiServiceManager.remote, onSubmit: onStartRemote, startKernel: false, markdownParser: markdownParser, sanitizer: sanitizer })] }));
+}
+export default RuntimePickerCell;