@datalayer/agent-runtimes 1.0.10 → 1.0.18

package/lib/components/runtimes/RuntimePickerCell.js

@@ -0,0 +1,104 @@
+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 { nullTranslator } from '@jupyterlab/translation';
+import { ActionList } from '@primer/react';
+import { CloudUploadIcon } from '@datalayer/icons-react';
+import { useCoreStore, useIAMStore } from '../../state/substates';
+import { isRuntimeRemote } from '../../runtimes';
+import { RuntimeSnippetsFacade } from '../../jupyter';
+import { ExternalTokenSilentLogin } from '@datalayer/core/lib/components/iam';
+import { SnippetDialog } from '../../components/snippets/SnippetDialog';
+import { RuntimeLauncherDialog } from './RuntimeLauncherDialog';
+import { RuntimePickerBase } from './RuntimePickerBase';
+import { RuntimeCellVariablesDialog } from './RuntimeCellVariablesDialog';
+/**
+ * Runtime 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 [hasCellRuntime, setHasCellRuntime] = 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 runtime = datalayerMeta.kernel;
+            setIsForeign(!!runtime);
+            setHasCellRuntime(runtime?.params?.notebook === false);
+            const newSnippets = new Array();
+            if (runtime) {
+                const spec = multiServiceManager.remote?.environments
+                    .get()
+                    .find(env => env.name === runtime.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 setSelectedRuntimeDesc = useCallback((kernel) => {
+        const datalayerMeta = model.getMetadata('datalayer') ?? {
+            runtime: 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,
+            };
+            setSelectedRuntimeDesc(desc);
+        }
+        setIsKernelDialogOpen(false);
+    }, [setSelectedRuntimeDesc]);
+    const datalayerMeta = model.getMetadata('datalayer') ?? {};
+    return (_jsxs(_Fragment, { children: [_jsx(RuntimePickerBase, { display: "menu", filterRuntime: filterKernel, preference: preference, multiServiceManager: multiServiceManager, runtimeDesc: datalayerMeta.kernel ? datalayerMeta.kernel : undefined, setRuntimeDesc: setSelectedRuntimeDesc, variant: 'cell', preActions: _jsxs(ActionList.Item, { disabled: !multiServiceManager.remote, onSelect: setCell, selected: hasCellRuntime, title: !multiServiceManager.remote
+                        ? '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(RuntimeLauncherDialog, { manager: multiServiceManager.remote, onSubmit: onStartRemote, startRuntime: 'defer', submitLabel: "Assign", 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 '../../runtimes';
+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,232 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 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 { RuntimeSnippetsFacade } from '../../jupyter';
+import { ExternalTokenSilentLogin } from '@datalayer/core/lib/components/iam';
+import { useCoreStore, useIAMStore } from '../../state/substates';
+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, user } = useIAMStore();
+    const [selectedRuntimeDesc, setSelectedRuntimeDesc] = useState();
+    const [timeLimit, setTimeLimit] = useState(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 resolvedBurningRate = selectedRuntimeDesc?.burningRate ??
+            multiServiceManager.remote?.environments
+                .get()
+                .find(env => env.name === selectedRuntimeDesc?.name)?.burning_rate;
+        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 maxMinutes = selectedRuntimeDesc?.location === 'remote' && resolvedBurningRate
+            ? Math.floor((credits?.available ?? 0) / resolvedBurningRate / 60.0)
+            : undefined;
+        const effectiveTimeLimit = selectedRuntimeDesc?.location === 'remote'
+            ? Math.max(1, Math.min(timeLimit, maxMinutes && maxMinutes > 0 ? maxMinutes : 10))
+            : timeLimit;
+        const creditsLimit = selectedRuntimeDesc?.location === 'remote' && resolvedBurningRate
+            ? Math.min(effectiveTimeLimit, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES) *
+                resolvedBurningRate *
+                60
+            : undefined;
+        const requiresRuntimeStart = !!selectedRuntimeDesc && !selectedRuntimeDesc.kernelId;
+        if (requiresRuntimeStart && selectedRuntimeDesc.location === 'remote') {
+            if (!resolvedBurningRate || !Number.isFinite(resolvedBurningRate)) {
+                setValue({ runtime: null, selectedVariables: toTransfer });
+                return;
+            }
+            if (hasKnownCredits &&
+                hasKnownRunAllowance &&
+                !hasRemainingRuns &&
+                (!creditsLimit || creditsLimit <= 0)) {
+                setValue({ runtime: null, selectedVariables: toTransfer });
+                return;
+            }
+        }
+        setValue({
+            runtime: 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,
+        });
+    }, [
+        selectedRuntimeDesc,
+        userStorage,
+        toTransfer,
+        timeLimit,
+        multiServiceManager.remote,
+        credits?.available,
+        user,
+    ]);
+    const { kernelPreference: { canStart }, } = sessionContext;
+    const resolvedBurningRate = selectedRuntimeDesc?.burningRate ??
+        multiServiceManager.remote?.environments
+            .get()
+            .find(env => env.name === selectedRuntimeDesc?.name)?.burning_rate;
+    const maxFromCredits = resolvedBurningRate
+        ? Math.floor((credits?.available ?? 0) / resolvedBurningRate / 60.0)
+        : -1;
+    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 effectiveMaxMinutes = selectedRuntimeDesc?.location === 'remote'
+        ? hasKnownCredits && hasKnownRunAllowance && !hasRemainingRuns
+            ? Math.max(1, maxFromCredits)
+            : Math.max(10, maxFromCredits > 0 ? maxFromCredits : 0)
+        : Math.max(1, maxFromCredits);
+    const outOfCredits = hasKnownCredits &&
+        hasKnownRunAllowance &&
+        !hasRemainingRuns &&
+        maxFromCredits < Number.EPSILON;
+    return (_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: effectiveMaxMinutes, time: timeLimit, onTimeChange: setTimeLimit, error: outOfCredits && maxFromCredits >= 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, { id: "user-storage-picker-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, "aria-labelledby": "user-storage-picker-label" })] }))] })), 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,42 @@
+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 { 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.max(1, Math.min(maxProps, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES));
+    const displayedTime = Number.isFinite(time)
+        ? Math.min(max, Math.max(1, time))
+        : 1;
+    const handleTimeChange = (valueOrEvent) => {
+        const rawValue = typeof valueOrEvent === 'number'
+            ? valueOrEvent
+            : parseFloat(valueOrEvent?.target?.value);
+        if (Number.isFinite(rawValue)) {
+            onTimeChange(Math.min(max, Math.max(1, rawValue)));
+        }
+    };
+    // 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: displayedTime, onChange: handleTimeChange, disabled: disabled, label: "", displayValue: false }), _jsx(TextInput, { type: "number", step: "1", min: "1", max: max, disabled: disabled, value: displayedTime.toFixed(2), onChange: handleTimeChange }), (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,38 @@
+import { Session } from '@jupyterlab/services';
+import { IRuntimeModel, type IRuntimeDesc } from '../../models';
+export interface IRuntimeAssignOptions {
+    /**
+     * Runtime description.
+     */
+    runtimeDesc?: IRuntimeDesc;
+    /**
+     * Runtime model to connect to.
+     */
+    runtimeModel?: IRuntimeModel;
+    /**
+     * Whether to transfer the state to the runtime model.
+     */
+    transferState?: boolean;
+}
+/**
+ * Runtime picker component properties.
+ */
+interface IRuntimeSimplePickerProps {
+    /**
+     * Runtime assignment callback.
+     */
+    assignRuntime: (options: IRuntimeAssignOptions) => Promise<void>;
+    /**
+     * Connection to the active runtime.
+     */
+    sessionConnection?: Session.ISessionConnection;
+    /**
+     * Whether browser runtime is available.
+     */
+    browserRuntimeAvailable?: boolean;
+}
+/**
+ * Runtime simple picker component.
+ */
+export declare function RuntimeSimplePicker(props: IRuntimeSimplePickerProps): JSX.Element;
+export {};

package/lib/components/runtimes/RuntimeSimplePicker.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { KernelIndicator, useJupyterReactStore, } from '@datalayer/jupyter-react';
+import { ISanitizer } from '@jupyterlab/apputils';
+import { IMarkdownParser } from '@jupyterlab/rendermime';
+import { ActionList, ActionMenu, Box, Button, Tooltip } from '@primer/react';
+import { CloudIcon, EyeIcon, UnfoldIcon } from '@primer/octicons-react';
+import { BrowserIcon, PlusIcon } from '@datalayer/icons-react';
+import { ArtifactIcon } from '../../components/icons';
+import { RuntimeLauncherDialog } from '.';
+import { useRuntimesStore } from '../../state/substates';
+/**
+ * Cause to open the new runtime dialog.
+ */
+var RuntimeDialogCause;
+(function (RuntimeDialogCause) {
+    /**
+     * Don't open.
+     */
+    RuntimeDialogCause[RuntimeDialogCause["None"] = 0] = "None";
+    /**
+     * Launch a new runtime.
+     */
+    RuntimeDialogCause[RuntimeDialogCause["New"] = 1] = "New";
+    /**
+     * Transfer the state from the current runtime to a new runtime.
+     */
+    RuntimeDialogCause[RuntimeDialogCause["Transfer"] = 2] = "Transfer";
+})(RuntimeDialogCause || (RuntimeDialogCause = {}));
+/**
+ * Runtime simple picker component.
+ */
+export function RuntimeSimplePicker(props) {
+    const { assignRuntime, sessionConnection, browserRuntimeAvailable = true, } = props;
+    const { runtimeModels, multiServiceManager } = useRuntimesStore();
+    const jupyterReactStore = useJupyterReactStore();
+    const jupyterLabAdapter = jupyterReactStore.jupyterLabAdapter;
+    const [runtimeLocation, setRuntimeLocation] = useState();
+    const [luminoServices, setLuminoServices] = useState({});
+    const [dialogCause, setDialogCause] = useState(RuntimeDialogCause.None);
+    const [status, setStatus] = useState('');
+    useEffect(() => {
+        if (sessionConnection) {
+            function onStatusChanged(connection) {
+                setStatus(`Runtime ${connection.kernel?.connectionStatus} - Status: ${connection.kernel?.status}`);
+            }
+            onStatusChanged(sessionConnection);
+            sessionConnection?.statusChanged.connect(onStatusChanged);
+            sessionConnection?.connectionStatusChanged.connect(onStatusChanged);
+            return () => {
+                sessionConnection?.statusChanged.disconnect(onStatusChanged);
+                sessionConnection?.connectionStatusChanged.disconnect(onStatusChanged);
+            };
+        }
+        else {
+            setStatus('No kernel');
+        }
+    }, [sessionConnection]);
+    const refreshRemoteKernels = useCallback(async () => {
+        if (multiServiceManager?.remote?.runtimesManager) {
+            await multiServiceManager.remote.runtimesManager.refresh();
+        }
+    }, [multiServiceManager?.remote?.runtimesManager]);
+    const handleLaunchRemoteKernel = useCallback(() => {
+        setDialogCause(RuntimeDialogCause.New);
+    }, []);
+    const handleCloseDialog = useCallback((runtimeDesc) => {
+        if (runtimeDesc) {
+            switch (dialogCause) {
+                case RuntimeDialogCause.New:
+                    refreshRemoteKernels().then(() => {
+                        setRuntimeLocation('remote');
+                        assignRuntime({
+                            runtimeDesc,
+                            runtimeModel: multiServiceManager?.remote?.runtimesManager
+                                .get()
+                                .find(model => model.id === runtimeDesc.kernelId),
+                        });
+                    });
+                    break;
+                case RuntimeDialogCause.Transfer:
+                    setRuntimeLocation('remote');
+                    assignRuntime({ runtimeDesc, transferState: true });
+                    break;
+            }
+        }
+        setDialogCause(RuntimeDialogCause.None);
+    }, [refreshRemoteKernels, multiServiceManager?.remote, dialogCause]);
+    useEffect(() => {
+        if (jupyterLabAdapter) {
+            Promise.all([
+                jupyterLabAdapter.jupyterLab.resolveOptionalService(IMarkdownParser),
+                jupyterLabAdapter.jupyterLab.resolveOptionalService(ISanitizer),
+            ]).then(services => {
+                setLuminoServices({
+                    [IMarkdownParser.name]: services[0],
+                    [ISanitizer.name]: services[1],
+                });
+            });
+        }
+        else {
+            setLuminoServices({});
+        }
+    }, [jupyterLabAdapter]);
+    return (_jsxs(_Fragment, { children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { leadingVisual: () => {
+                            switch (runtimeLocation) {
+                                case 'browser':
+                                    return _jsx(BrowserIcon, {});
+                                case 'remote':
+                                    return _jsx(CloudIcon, {});
+                                case undefined:
+                                    return _jsx(EyeIcon, {});
+                            }
+                            return _jsx(ArtifactIcon, { type: "runtime" });
+                        }, trailingVisual: () => sessionConnection ? (_jsx(Box, { sx: { paddingTop: '5px' }, children: _jsx(KernelIndicator, { kernel: sessionConnection.kernel }) })) : (_jsx(_Fragment, {})), size: "small", variant: "invisible", children: _jsx(Tooltip, { text: status, direction: "s", children: _jsx(Button, { variant: "invisible", size: "small", children: sessionConnection?.kernel?.name ?? 'Runtimes' }) }) }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsxs(ActionList, { selectionVariant: "single", showDividers: true, children: [_jsxs(ActionList.Group, { children: [_jsxs(ActionList.Item, { selected: runtimeLocation === undefined &&
+                                                sessionConnection === undefined, onSelect: () => {
+                                                setRuntimeLocation(undefined);
+                                                assignRuntime({ runtimeDesc: undefined });
+                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(EyeIcon, {}) }), "Viewer", _jsx(ActionList.Description, { variant: "block", children: "A simple Notebook Viewer without Runtime." })] }), browserRuntimeAvailable && (_jsxs(ActionList.Item, { selected: runtimeLocation === 'browser', onSelect: () => {
+                                                setRuntimeLocation('browser');
+                                                assignRuntime({
+                                                    runtimeDesc: {
+                                                        name: 'pyodide',
+                                                        location: 'browser',
+                                                        language: 'python',
+                                                    },
+                                                });
+                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(BrowserIcon, {}) }), "Browser Runtime", _jsx(ActionList.Description, { variant: "block", children: "A Browser Runtime based on Pyodide." })] }))] }), runtimeModels.length > 0 && (_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Cloud Runtimes" }), runtimeModels.map(kernelModel => {
+                                            return (_jsxs(ActionList.Item, { selected: sessionConnection?.kernel?.id === kernelModel.id, onSelect: () => {
+                                                    setRuntimeLocation('remote');
+                                                    assignRuntime({
+                                                        runtimeDesc: {
+                                                            name: kernelModel.environment_name,
+                                                            language: '',
+                                                            location: 'remote',
+                                                            displayName: kernelModel.given_name,
+                                                            kernelId: kernelModel.id,
+                                                            burningRate: kernelModel.burning_rate,
+                                                            podName: kernelModel.pod_name,
+                                                        },
+                                                        runtimeModel: kernelModel,
+                                                    });
+                                                }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(ArtifactIcon, { type: "runtime" }) }), kernelModel.given_name, _jsx(ActionList.Description, { variant: "block", children: kernelModel.environment_name })] }, kernelModel.id));
+                                        })] })), _jsx(ActionList.Divider, {}), _jsxs(ActionList.Group, { children: [_jsxs(ActionList.Item, { selected: false, onSelect: handleLaunchRemoteKernel, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PlusIcon, {}) }), "Launch a new Runtime\u2026"] }), _jsxs(ActionList.Item, { disabled: runtimeLocation !== 'browser', selected: false, onSelect: () => {
+                                                setDialogCause(RuntimeDialogCause.Transfer);
+                                            }, title: "Transfer the state of the current Runtime to a new Remote Runtime.", children: [_jsx(ActionList.LeadingVisual, { children: _jsx(UnfoldIcon, {}) }), "Transfer state to a new Runtime\u2026"] })] })] }) })] }), multiServiceManager?.remote && dialogCause > 0 && (_jsx(RuntimeLauncherDialog, { dialogTitle: dialogCause === RuntimeDialogCause.Transfer
+                    ? 'Switch to a new Cloud Runtime'
+                    : undefined, manager: multiServiceManager.remote, onSubmit: handleCloseDialog, markdownParser: luminoServices[IMarkdownParser.name], sanitizer: luminoServices[ISanitizer.name], startRuntime: dialogCause === RuntimeDialogCause.Transfer
+                    ? 'defer'
+                    : dialogCause === RuntimeDialogCause.New }))] }));
+}