@datalayer/agent-runtimes 1.0.10 → 1.0.18

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

@@ -0,0 +1,57 @@
+import type { IMarkdownParser, IRenderMime } from '@jupyterlab/rendermime';
+import type { IRemoteServicesManager } from '../../runtimes';
+import type { ICodeSandboxSnapshot, IRuntimeDesc } from '../../models';
+/**
+ * {@link RuntimeLauncherDialog} properties.
+ */
+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;

package/lib/components/runtimes/RuntimeLauncherDialog.js

@@ -0,0 +1,275 @@
+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
+ */
+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 }))] }) }));
+}

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 '../../models';
+import { IMultiServiceManager } from '../../runtimes';
+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.
+     */
+    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;

package/lib/components/runtimes/RuntimePickerBase.js

@@ -0,0 +1,122 @@
+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.
+ */
+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, _] = useState(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterRuntime, 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 updateGroupedRuntimeDescs = () => {
+        setGroupedKernelDescs(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterKernel, variant));
+      };
+      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?.kernels.changed.connect(updateGroupedRuntimeDescs);
+      multiServiceManager.remote?.environments.changed.connect(updateGroupedRuntimeDescs);
+      // multiServiceManager.remote?.sessions.runningChanged.connect(updateOptions);
+      return () => {
+        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?.kernels.changed.disconnect(updateGroupedRuntimeDescs);
+        multiServiceManager.remote?.environments.changed.disconnect(updateGroupedRuntimeDescs);
+        // multiServiceManager.remote?.sessions.runningChanged.disconnect(updateOptions);
+      };
+    }, [multiServiceManager, preference, translator, filterKernel, variant]);
+    */
+    useEffect(() => {
+        if (sessionContext && groupedRuntimeDescs) {
+            const kernelId = sessionContext.session?.kernel?.id;
+            if (kernelId) {
+                Object.entries(groupedRuntimeDescs).forEach(([group, runtimeDescs]) => {
+                    runtimeDescs.forEach(runtimeDesc => {
+                        if (runtimeDesc.kernelId === kernelId) {
+                            setRuntimeDesc(runtimeDesc);
+                        }
+                    });
+                });
+            }
+        }
+        setDefaultSet(true);
+    }, [groupedRuntimeDescs]);
+    // 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;

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;
+};
+/**
+ * Runtime picker component for a cell.
+ */
+export declare function RuntimePickerCell(props: IRuntimePickerCellProps): JSX.Element;
+export default RuntimePickerCell;