@datalayer/core 0.0.1 → 0.0.3

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 '../../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,109 @@
+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.
+ */
+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,106 @@
+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.
+ */
+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;

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

@@ -0,0 +1,42 @@
+import { ITranslator } from '@jupyterlab/translation';
+import { CommandRegistry } from '@lumino/commands';
+import type { IMultiServiceManager, IDatalayerSessionContext } from '../../api';
+import { RuntimeTransfer } from './RuntimeTransfer';
+/**
+ * {@link RuntimePickerNotebook} properties
+ */
+export interface IRuntimePickerNotebookProps {
+    /**
+     * Callback to allow the user to login
+     */
+    logIn?: () => void;
+    /**
+     * Document session context
+     */
+    sessionContext: IDatalayerSessionContext;
+    /**
+     * Multi service manager
+     */
+    multiServiceManager: IMultiServiceManager;
+    /**
+     * Set the selected kernel
+     */
+    setValue: (v: RuntimeTransfer | Error) => void;
+    /**
+     * Close the dialog
+     */
+    close: () => void;
+    /**
+     * Command registry
+     */
+    commands: CommandRegistry;
+    /**
+     * Application translator
+     */
+    translator?: ITranslator;
+}
+/**
+ * Runtime Picker components for a Notebook.
+ */
+export declare function RuntimePickerNotebook(props: IRuntimePickerNotebookProps): JSX.Element;
+export default RuntimePickerNotebook;

package/lib/components/runtimes/RuntimePickerNotebook.js

@@ -0,0 +1,168 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { ActionList, FormControl, ToggleSwitch, Tooltip, IconButton } from '@primer/react';
+import { Box } from "@datalayer/primer-addons";
+import { AlertIcon } from '@primer/octicons-react';
+import { JSONExt } from '@lumino/coreutils';
+import { KernelExecutor } from '@datalayer/jupyter-react';
+import { DatalayerThemeProvider } from '../../theme';
+import { RuntimeSnippetsFacade } from '../../api';
+import { ExternalTokenSilentLogin } from '../../components/iam';
+import { useCoreStore, useIAMStore } from '../../state';
+import { RuntimeReservationControl, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES } from './RuntimeReservationControl';
+import { RuntimeVariables } from './RuntimeVariables';
+import { RuntimePickerBase } from './RuntimePickerBase';
+/**
+ * Runtime Picker components for a Notebook.
+ */
+export function RuntimePickerNotebook(props) {
+    const { multiServiceManager, sessionContext, setValue, translator } = props;
+    const { configuration } = useCoreStore();
+    const { credits, refreshCredits, token } = useIAMStore();
+    const [selectedRuntimeDesc, setSelectedRuntimeDesc] = useState();
+    const [timeLimit, setTimeLimit] = useState(Math.min(credits?.available ?? 0, 10));
+    const [userStorage, setUserStorage] = useState(false);
+    const [canTransferFrom, setTransferFrom] = useState(false);
+    const [canTransferTo, setTransferTo] = useState(false);
+    const [transferVariables, setTransferVariables] = useState(false);
+    const [hasLoadedVariables, setHasLoadedVariables] = useState(false);
+    const [kernelVariables, setRuntimeVariables] = useState();
+    const [toTransfer, setToTransfer] = useState([]);
+    useEffect(() => {
+        refreshCredits();
+    }, []);
+    useEffect(() => {
+        const specs = sessionContext.specsManager.specs?.kernelspecs;
+        if (sessionContext.session?.kernel?.name && specs) {
+            const spec = Object.values(specs).find(spec => spec?.name === sessionContext.session.kernel.name);
+            if (spec) {
+                setSelectedRuntimeDesc({
+                    name: spec.name,
+                    kernelId: sessionContext.session.kernel.id,
+                    location: sessionContext.location,
+                    language: spec.language,
+                    displayName: sessionContext.kernelDisplayName
+                });
+                setTransferFrom(RuntimeSnippetsFacade.supports(spec.language));
+            }
+        }
+    }, [sessionContext]);
+    const listRuntimeVariables = useCallback(async () => {
+        if (hasLoadedVariables) {
+            return Promise.resolve();
+        }
+        setHasLoadedVariables(true);
+        const connection = sessionContext.session.kernel;
+        const spec = sessionContext.specsManager.specs.kernelspecs[connection.model.name];
+        const snippets = new RuntimeSnippetsFacade(spec.language);
+        const outputs = await new KernelExecutor({ connection }).execute(snippets.listVariables());
+        const content = outputs.get(0).data['text/plain'];
+        if (content) {
+            setRuntimeVariables(JSON.parse(
+            // We need to remove the quotes prior to parsing.
+            content.slice(1, content.length - 1)));
+            if (toTransfer.length) {
+                const candidates = Object.keys(kernelVariables ?? {});
+                setToTransfer(toTransfer.filter(n => candidates.includes(n)));
+            }
+            else {
+                // By default select all variables.
+                setToTransfer(Object.keys(kernelVariables ?? {}));
+            }
+        }
+        else {
+            setRuntimeVariables({});
+        }
+    }, [hasLoadedVariables, kernelVariables, toTransfer]);
+    const setSelectedVariables = useCallback((l) => {
+        if (!JSONExt.deepEqual(toTransfer, l)) {
+            setToTransfer(l);
+        }
+    }, [toTransfer]);
+    const setTransferVariable = useCallback((value) => {
+        if (transferVariables !== value) {
+            if (value) {
+                listRuntimeVariables().catch(error => {
+                    console.error('Failed to list the runtime variable', error);
+                    setHasLoadedVariables(false);
+                });
+            }
+            setTransferVariables(value);
+        }
+    }, [transferVariables]);
+    const setRuntimeDesc = useCallback((runtimeDesc) => {
+        if (!runtimeDesc) {
+            if (selectedRuntimeDesc) {
+                setSelectedRuntimeDesc(undefined);
+                setTransferTo(false);
+            }
+            return;
+        }
+        if (selectedRuntimeDesc?.displayName !== runtimeDesc.displayName || selectedRuntimeDesc?.kernelId !== runtimeDesc.kernelId) {
+            setSelectedRuntimeDesc({ ...runtimeDesc });
+            setTransferTo(RuntimeSnippetsFacade.supports(runtimeDesc.language));
+        }
+    }, [selectedRuntimeDesc]);
+    const handleUserStorageChange = useCallback((e) => {
+        e.preventDefault();
+        setUserStorage(!userStorage);
+    }, [userStorage]);
+    useEffect(() => {
+        const creditsLimit = selectedRuntimeDesc?.location === 'remote' && selectedRuntimeDesc.burningRate
+            ? Math.min(timeLimit, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES) *
+                selectedRuntimeDesc.burningRate *
+                60
+            : undefined;
+        setValue(creditsLimit !== 0 ?
+            {
+                kernel: selectedRuntimeDesc
+                    ?
+                        {
+                            environmentName: ['browser', 'remote'].includes(selectedRuntimeDesc.location)
+                                ? `${selectedRuntimeDesc.location}-${selectedRuntimeDesc.name}`
+                                : selectedRuntimeDesc.name,
+                            id: selectedRuntimeDesc.kernelId,
+                            creditsLimit,
+                            capabilities: userStorage ? ['user_storage'] : undefined
+                        }
+                    :
+                        null,
+                selectedVariables: toTransfer,
+            }
+            : new Error('Credits limit must be strictly positive.'));
+    }, [selectedRuntimeDesc, userStorage, toTransfer, timeLimit]);
+    const { kernelPreference: { canStart } } = sessionContext;
+    const max = Math.floor((credits?.available ?? 0) / (selectedRuntimeDesc?.burningRate ?? -1) / 60.0);
+    const outOfCredits = !credits?.available || max < Number.EPSILON;
+    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { as: "form", className: "dla-Runtimes-picker", children: [_jsx(Box, { sx: { padding: 'var(--stack-padding-condensed) 0' }, children: _jsx(RuntimePickerBase, { display: "radio", disabled: canStart === false, preference: {
+                            id: sessionContext.session?.id,
+                            kernelDisplayName: sessionContext.kernelPreference.shouldStart ? sessionContext.kernelDisplayName : undefined,
+                        }, sessionContext: sessionContext, multiServiceManager: multiServiceManager, translator: translator, runtimeDesc: selectedRuntimeDesc, setRuntimeDesc: setRuntimeDesc, postActions: token || !props.logIn ?
+                            /*
+                            <Button
+                              variant="default"
+                              onClick={e => {
+                                e.preventDefault();
+                                commands.execute(CommandIDs.launchRemoteRuntime);
+                                close();
+                              }}
+                            >
+                              Launch a New Runtime
+                            </Button>
+                            */
+                            _jsx(_Fragment, {})
+                            :
+                                _jsx(ActionList.Item, { onSelect: props.logIn, title: 'Connect to Runtime provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Connect to the Runtime provider" }) }) }) }), !selectedRuntimeDesc?.kernelId && selectedRuntimeDesc?.location === 'remote' &&
+                    _jsxs(_Fragment, { children: [_jsx(RuntimeReservationControl, { disabled: outOfCredits || selectedRuntimeDesc?.location !== 'remote', label: 'Time reservation', max: max < 0 ? 1 : max, time: timeLimit, onTimeChange: setTimeLimit, error: outOfCredits && max >= 0 ?
+                                    'You must add credits to your account.'
+                                    : timeLimit === 0
+                                        ? 'You must set a time limit.'
+                                        : undefined, burningRate: selectedRuntimeDesc.burningRate }), !configuration.whiteLabel &&
+                                _jsxs(FormControl, { disabled: !!selectedRuntimeDesc?.kernelId || selectedRuntimeDesc?.location !== 'remote', 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, { disabled: !!selectedRuntimeDesc?.kernelId || selectedRuntimeDesc?.location !== 'remote', checked: userStorage, size: "small", onClick: handleUserStorageChange })] })] }), canTransferFrom && canTransferTo &&
+                    _jsx(RuntimeVariables, { selectedVariables: toTransfer, setSelectVariable: setSelectedVariables, transferVariables: transferVariables, setTransferVariable: setTransferVariable, kernelVariables: kernelVariables, translator: translator })] }) }));
+}
+export default RuntimePickerNotebook;

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

@@ -0,0 +1,47 @@
+/**
+ * Maximal time reservable for a runtime in minutes.
+ *
+ * TODO this should be configurable
+ */
+export declare const MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES: number;
+/**
+ * Time control properties
+ */
+export interface IKernelReservationControlProps {
+    /**
+     * Callback on add credits button
+     */
+    addCredits?: () => void;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Control error message
+     */
+    error?: string;
+    /**
+     * Control label
+     */
+    label: string;
+    /**
+     * Maximal time
+     */
+    max: number;
+    /**
+     * Callback when time value changes
+     */
+    onTimeChange: (value: number) => void;
+    /**
+     * Time control value
+     */
+    time: number;
+    /**
+     * Burning rate
+     */
+    burningRate?: number;
+}
+/**
+ * Runtime reservation control
+ */
+export declare function RuntimeReservationControl(props: IKernelReservationControlProps): JSX.Element;

package/lib/components/runtimes/RuntimeReservationControl.js

@@ -0,0 +1,38 @@
+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.
+ */
+import { FormControl, IconButton, Text, TextInput } from '@primer/react';
+import { Box } from "@datalayer/primer-addons";
+import { PlusIcon } from '@primer/octicons-react';
+import { Slider } from '@datalayer/primer-addons';
+/**
+ * Maximal time reservable for a runtime in minutes.
+ *
+ * TODO this should be configurable
+ */
+export const MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES = 24 * 60;
+/**
+ * Runtime reservation control
+ */
+export function RuntimeReservationControl(props) {
+    const { addCredits, burningRate, disabled, error, label, max: maxProps, onTimeChange, time, } = props;
+    const max = Math.min(maxProps, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES);
+    // Temporary workaround to not show disabled components.
+    const hidden = disabled;
+    return (!hidden ?
+        _jsxs(FormControl, { disabled: disabled, sx: { paddingBottom: 'var(--stack-padding-condensed)' }, children: [_jsx(FormControl.Label, { children: label }), _jsxs(Box, { style: {
+                        alignItems: 'center',
+                        display: 'grid',
+                        gridTemplateColumns: 'max-content 1fr max-content max-content',
+                        gridGap: 'var(--stack-gap-condensed)',
+                        width: '100%'
+                    }, children: [_jsx(Slider, { step: 1, min: 1, max: max, value: time, onChange: onTimeChange, disabled: disabled, label: "", displayValue: false }), _jsx(TextInput, { type: "number", step: "1", min: "1", max: max, disabled: disabled, value: Math.min(max, time).toFixed(2), onChange: event => {
+                                onTimeChange(parseFloat(event.target.value));
+                            } }), (max === 0 || max > Number.EPSILON) && (_jsxs(_Fragment, { children: [_jsxs(Text, { children: ["out of ", maxProps, " available minutes"] }), addCredits &&
+                                    _jsx(IconButton, { icon: PlusIcon, "aria-label": "Add credits", onClick: () => addCredits() })] }))] }), _jsxs(FormControl.Caption, { children: ["Maximum execution time that can be consumed by the runtime. It must be less than ", (MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES / 60).toFixed(0), ' ', " hours.", burningRate &&
+                            _jsxs(_Fragment, { children: [_jsx("br", {}), `With the current value, the runtime execution will consume at most ${(time * burningRate * 60).toFixed(2)} credits.`] })] }), error && _jsx(FormControl.Validation, { variant: "error", children: error })] })
+        :
+            _jsx(_Fragment, {}));
+}

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

@@ -0,0 +1,34 @@
+import { Session } from '@jupyterlab/services';
+import { IRuntimeModel, type IRuntimeDesc } from '../../models';
+export interface IRuntimeAssignOptions {
+    /**
+     * Kernel description.
+     */
+    runtimeDesc?: IRuntimeDesc;
+    /**
+     * Kernel model to connect to.
+     */
+    runtimeModel?: IRuntimeModel;
+    /**
+     * Whether to transfer the state to the new Kernel model.
+     */
+    transferState?: boolean;
+}
+/**
+ * Runtime picker component properties.
+ */
+interface IRuntimeSimplePickerProps {
+    /**
+     * Kernel assignment callback.
+     */
+    assignRuntime: (options: IRuntimeAssignOptions) => Promise<void>;
+    /**
+     * Connection to the active Kernel.
+     */
+    sessionConnection?: Session.ISessionConnection;
+}
+/**
+ * Runtime simple picker component.
+ */
+export declare function RuntimeSimplePicker(props: IRuntimeSimplePickerProps): JSX.Element;
+export {};