@datalayer/agent-runtimes 1.0.28 → 1.3.10

package/lib/components/code-sandboxes/CodeSandboxPicker.js

@@ -1,8 +1,4 @@
 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, useRef, useState, } from 'react';
 import { nullTranslator } from '@jupyterlab/translation';
 //import { kernelIcon } from '@jupyterlab/ui-components';
@@ -16,17 +12,54 @@ import { isRuntimeRemote, } from '../../runtimes';
 import { useIAMStore } from '../../state/substates';
 import { getGroupedCodeSandboxDescs, } from './CodeSandboxUtils';
 import { listCodeSandboxGivenNames, nextCodeSandboxGivenName, } from './CodeSandboxNames';
+import { codeSandboxVariantTitle } from '../../models/CodeSandboxVariant';
 import { creditsLimitFor, NewCodeSandboxControls, useNewCodeSandboxAllowance, } from './NewCodeSandboxControls';
 import { CodeSandboxVariables, useCodeSandboxVariablesTransfer, } from './CodeSandboxVariables';
+import { CodeSandboxEnvironmentSelect, } from './CodeSandboxEnvironmentSelect';
 /**
  * Maximal runtime display name length after which it is trimmed.
  */
 const RUNTIME_DISPLAY_NAME_MAX_LENGTH = 25;
+/**
+ * Whether the choice is a sandbox that ALREADY RUNS.
+ *
+ * A running one is named by its kernel, or — where it runs at an external
+ * provider and has no kernel of this platform — by its pod. An environment
+ * to start a new one in has neither. Told apart by the kernel alone, every
+ * Kaggle and Modal sandbox read as an environment: they were offered under
+ * "Assign a new Code Sandbox" and never among the ones already running.
+ */
+function isRunningSandbox(desc) {
+    return !!desc.kernelId || !!desc.runtimeName;
+}
+/** How a sandbox is identified among the choices; see `dropdownDescs`. */
+function codeSandboxDescKey(desc) {
+    // The runtime uid, then the pod, stands in for the kernel of a sandbox that
+    // does not have one yet. Without that identity all Daytona sandboxes of the
+    // same environment answer to one key.
+    return `${desc.location}:${desc.kernelId ?? desc.id ?? desc.runtimeName ?? desc.name}`;
+}
+/** The identifier shown beside a running sandbox. */
+function codeSandboxDisplayId(desc) {
+    return desc.kernelId ?? desc.id ?? desc.runtimeName;
+}
+/** Whether two descriptions refer to the same choice. */
+function isSameCodeSandbox(left, right) {
+    if (!right) {
+        return false;
+    }
+    if (left.runtimeName && right.runtimeName) {
+        return left.runtimeName === right.runtimeName;
+    }
+    const sameLocation = left.location === right.location ||
+        (isRuntimeRemote(left.location) && isRuntimeRemote(right.location));
+    return sameLocation && codeSandboxDescKey(left) === codeSandboxDescKey(right);
+}
 /**
  * The picker of a code sandbox: what runs already, and what could run.
  */
 export function CodeSandboxPicker(props) {
-    const { disabled, display, filterRuntime, multiServiceManager, onTransferChange, postActions, preActions, preference, sessionContext, translator, variant, withNewSandboxControls, withVariablesTransfer, } = props;
+    const { disabled, display, filterRuntime, multiServiceManager, onTransferChange, postActions, sandboxLayout = 'separated', preActions, preference, sessionContext, translator, variant, withNewSandboxControls, withVariablesTransfer, } = props;
     /*
      * The choice, held here when the host does not hold it.
      *
@@ -43,6 +76,94 @@ export function CodeSandboxPicker(props) {
         props.setRuntimeDesc?.(desc);
     }, [isControlled, props.setRuntimeDesc]);
     const [groupedRuntimeDescs, setGroupedRuntimeDescs] = useState(getGroupedCodeSandboxDescs(multiServiceManager, preference?.id, translator, filterRuntime, variant));
+    /*
+     * The same choices the radio column lists, as options of the dropdown.
+     *
+     * Keyed the way the radio column keys its rows — where the sandbox runs
+     * and which one it is — because a kernel already running and an
+     * environment to start one in are told apart by nothing else: two
+     * sandboxes of one environment share a name.
+     */
+    const dropdownDescs = useMemo(() => {
+        const byKey = new Map();
+        Object.values(groupedRuntimeDescs ?? {}).forEach(descs => descs.forEach(desc => byKey.set(codeSandboxDescKey(desc), desc)));
+        return byKey;
+    }, [groupedRuntimeDescs]);
+    const dropdownOptions = useMemo(() => Object.entries(groupedRuntimeDescs ?? {}).flatMap(([group, descs]) => descs.map(desc => ({
+        key: codeSandboxDescKey(desc),
+        title: desc.displayName ?? desc.name,
+        name: desc.name,
+        providerTitle: desc.provider
+            ? codeSandboxVariantTitle(desc.provider)
+            : undefined,
+        location: desc.location,
+        burningRate: desc.burningRate,
+        gpu: desc.gpu,
+        group,
+    }))), [groupedRuntimeDescs]);
+    /**
+     * The sandboxes as a column of radio buttons, group by group.
+     *
+     * Shared by the two layouts that show one: the whole list in the `radio`
+     * display, and the sandboxes that ALREADY RUN in the separated dropdown
+     * display, where the dropdown is left to the environments a new one is
+     * started in.
+     */
+    /*
+     * A sandbox that already runs is told from an environment by its KERNEL:
+     * a running one has one, an environment to start one in has none. Read
+     * from the data rather than from the heading, which is translated.
+     */
+    const runningEntries = useMemo(() => Object.entries(groupedRuntimeDescs ?? {})
+        .map(([group, descs]) => [
+        group,
+        descs.filter(isRunningSandbox),
+    ])
+        .filter(([, descs]) => descs.length > 0), [groupedRuntimeDescs]);
+    const environmentOnlyOptions = useMemo(() => dropdownOptions
+        .filter(option => {
+        const desc = dropdownDescs.get(option.key);
+        return !desc || !isRunningSandbox(desc);
+    })
+        // The running sandboxes are the radio column beside this; the dropdown
+        // then lists only environments to start, so it needs no group heading
+        // of its own ("Assign a new Code Sandbox" already labels the control).
+        .map(option => ({ ...option, group: undefined })), [dropdownDescs, dropdownOptions]);
+    const radioSections = (entries) => (_jsx(RadioGroup, { name: "kernel-options", "aria-labelledby": "kernel-options", children: entries.map(([group, runtimeDescs]) => (_jsxs(Box, { children: [_jsx(Box, { as: "h4", sx: {
+                        /*
+                         * The type of a form label, not of a heading.
+                         *
+                         * "Assign an existing Code Sandbox" and "Assign a
+                         * new Code Sandbox" name the two ways of answering
+                         * one question, and the second is the label of the
+                         * dropdown; set in the larger, heavier type of an
+                         * `h4`, the first read as a section above it rather
+                         * than as its pair. The values are the ones Primer
+                         * gives `FormControl.Label` — taken as the variables
+                         * it resolves rather than through the Primer scale,
+                         * whose `semibold` the JupyterLab theme redefines.
+                         */
+                        margin: 0,
+                        marginBottom: 2,
+                        color: 'fg.default',
+                        fontSize: 'var(--text-body-size-medium, 0.875rem)',
+                        fontWeight: 'var(--base-text-weight-semibold, 600)',
+                    }, children: group }), runtimeDescs.map(k => {
+                    const choiceKey = codeSandboxDescKey(k);
+                    const displayId = codeSandboxDisplayId(k);
+                    return (
+                    // A kernel identifies a runtime that already runs; an
+                    // environment to start one in has none, and is named
+                    // by where it runs and what it runs.
+                    _jsxs(Box, { title: k.name, children: [_jsxs(FormControl, { children: [_jsx(Radio, { value: choiceKey, onChange: () => {
+                                            setRuntimeDesc(k);
+                                        }, checked: isSameCodeSandbox(k, runtimeDesc) }), _jsx(FormControl.Label, { children: _jsxs(Box, { display: "flex", sx: { alignItems: 'baseline' }, children: [_jsx(Box, { children: k.displayName }), displayId && (_jsx(Text, { sx: {
+                                                        ml: 2,
+                                                        fontSize: 0,
+                                                        color: 'fg.muted',
+                                                        fontFamily: 'mono',
+                                                    }, title: displayId, children: displayId.slice(0, 8) })), 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 }), k.provider && (_jsx(Label, { variant: "accent", sx: { marginLeft: 1 }, children: codeSandboxVariantTitle(k.provider) })), _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, {})] }, choiceKey));
+                })] }, group))) }));
     const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
     const [defaultSet, setDefaultSet] = useState(false);
     const [remoteModelsReady, setRemoteModelsReady] = useState(!multiServiceManager.remote);
@@ -114,17 +235,36 @@ export function CodeSandboxPicker(props) {
         }
         if (sessionContext && groupedRuntimeDescs) {
             const kernelId = sessionContext.session?.kernel?.id;
-            if (kernelId) {
+            /*
+             * An external sandbox is bound by its POD, not a kernel of this platform.
+             *
+             * Its descriptor carries the pod and — until a kernel of the platform is
+             * ever attached — an empty kernel id, and the session it binds stands on
+             * the pod as its `location`. Matching only on the kernel id therefore
+             * missed it: the picker fell back to the local kernel the notebook never
+             * ran on, opening on "Python 3" while the toolbar rightly showed the
+             * sandbox. So the current sandbox is matched on the pod as well, and the
+             * remote descriptors — which arrive late — are waited for before the
+             * choice is allowed to settle on anything else.
+             */
+            const location = sessionContext.location;
+            const remoteBound = !!location && isRuntimeRemote(location);
+            const matchesCurrent = (desc) => (!!kernelId && desc.kernelId === kernelId) ||
+                (!!desc.runtimeName && !!location && desc.runtimeName === location);
+            if (kernelId || remoteBound) {
+                if (remoteBound && !remoteModelsReady) {
+                    return;
+                }
                 let matched = false;
-                Object.entries(groupedRuntimeDescs).forEach(([group, runtimeDescs]) => {
+                Object.values(groupedRuntimeDescs).forEach(runtimeDescs => {
                     runtimeDescs.forEach(runtimeDesc => {
-                        if (runtimeDesc.kernelId === kernelId) {
+                        if (matchesCurrent(runtimeDesc)) {
                             matched = true;
                             setRuntimeDesc(runtimeDesc);
                         }
                     });
                 });
-                if (!matched) {
+                if (!matched && kernelId) {
                     if (!remoteModelsReady) {
                         return;
                     }
@@ -138,16 +278,36 @@ export function CodeSandboxPicker(props) {
                             kernelId,
                             language: spec.language,
                             displayName: sessionContext.kernelDisplayName,
-                            location: sessionContext.location ??
-                                'local',
+                            location: location ?? 'local',
+                            runtimeName: remoteBound ? location : undefined,
                         });
                     }
                 }
             }
+            else if (display === 'dropdown') {
+                /*
+                 * Nothing assigned: the FIRST environment stands as the choice.
+                 *
+                 * A dropdown that opens on "Select an environment" reads as a
+                 * question already answered — the control looks filled — and the
+                 * dialog assigns nothing when it is accepted. A column of radio
+                 * buttons shows its emptiness plainly and is left alone. The list
+                 * must be settled first, or the choice would land on a local
+                 * kernelspec and move when the remote environments arrive.
+                 */
+                if (!remoteModelsReady) {
+                    return;
+                }
+                const first = Object.values(groupedRuntimeDescs).flat()[0];
+                if (first) {
+                    setRuntimeDesc(first);
+                }
+            }
         }
         setDefaultSet(true);
     }, [
         defaultSet,
+        display,
         groupedRuntimeDescs,
         remoteModelsReady,
         sessionContext,
@@ -174,7 +334,7 @@ export function CodeSandboxPicker(props) {
      */
     const [givenName, setGivenName] = useState('');
     const givenNameFor = useRef(undefined);
-    const [userStorage, setUserStorage] = useState(false);
+    const [homeFolder, setHomeFolder] = useState(false);
     const asksForNewSandbox = withNewSandboxControls || !!onTransferChange;
     useEffect(() => {
         if (asksForNewSandbox) {
@@ -186,7 +346,12 @@ export function CodeSandboxPicker(props) {
             .get()
             .find(env => env.name === runtimeDesc?.name)?.burning_rate;
     const allowance = useNewCodeSandboxAllowance(resolvedBurningRate);
-    const isNewSandbox = !!runtimeDesc && !runtimeDesc.kernelId;
+    // New means an environment to start, not a sandbox already running. An
+    // external sandbox runs with a pod but no kernel of its own, so keying
+    // "new" on the kernel alone misread it as new — and a new remote sandbox
+    // the account cannot yet price is answered with nothing, which is why
+    // assigning an existing Daytona did nothing.
+    const isNewSandbox = !!runtimeDesc && !isRunningSandbox(runtimeDesc);
     // Offer a name for what was just picked, and leave it alone afterwards: the
     // key is the thing picked, so re-picking the same one keeps what was typed.
     const pickedKey = isNewSandbox
@@ -249,28 +414,40 @@ export function CodeSandboxPicker(props) {
                         ? `${runtimeDesc.location}-${runtimeDesc.name}`
                         : runtimeDesc.name,
                     id: runtimeDesc.kernelId,
+                    // The pod names a sandbox that has no kernel of its own — an
+                    // external one — so the session can bind it through the proxy.
+                    runtime_name: runtimeDesc.runtimeName,
                     // The name the sandbox is given, carried with the choice.
                     //
                     // Everything else about the pick travelled in this object and the
                     // name did not, so whoever created the sandbox had nothing to name
                     // it with and fell back to the kernelspec: the launcher honoured
                     // what was typed, the picker silently dropped it.
+                    //
+                    // Two readers, two fields: a sandbox of a server is named from
+                    // `displayName`, a runtime of the platform is started with
+                    // `givenName`. A new remote sandbox — a Daytona among them — read
+                    // the second, which nothing filled, and came up "Code Sandbox".
+                    // Both carry the name now: what the user typed, or the title of the
+                    // environment it runs.
                     displayName: runtimeDesc.displayName,
+                    givenName: givenName || runtimeDesc.displayName,
                     creditsLimit,
-                    capabilities: userStorage ? ['user_storage'] : undefined,
+                    capabilities: homeFolder ? ['home-folder'] : undefined,
                 }
                 : null,
             selectedVariables,
         });
     }, [
         allowance,
+        givenName,
         isNewSandbox,
         onTransferChange,
         resolvedBurningRate,
         runtimeDesc,
         selectedVariables,
         timeLimit,
-        userStorage,
+        homeFolder,
     ]);
     // 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.
@@ -284,8 +461,9 @@ export function CodeSandboxPicker(props) {
                             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]}`
+                                            const choiceKey = codeSandboxDescKey(candidateRuntimeDesc);
+                                            const annotation = candidateRuntimeDesc.runtimeName
+                                                ? ` - ${candidateRuntimeDesc.runtimeName}`
                                                 : candidateRuntimeDesc.kernelId
                                                     ? ` - ${candidateRuntimeDesc.kernelId}`
                                                     : '';
@@ -294,37 +472,40 @@ export function CodeSandboxPicker(props) {
                                                 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: () => {
+                                            return (_jsxs(ActionList.Item, { title: fullDisplayName, selected: isSameCodeSandbox(candidateRuntimeDesc, runtimeDesc), 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] }))] }) })] })) : (
+                                                }, children: [_jsx(ActionList.LeadingVisual, { children: candidateRuntimeDesc.location === 'local' ? (_jsx(LaptopSimpleIcon, {})) : candidateRuntimeDesc.location === 'browser' ? (_jsx(BrowserIcon, {})) : (_jsx(CloudUploadIcon, {})) }), displayName + annotation.slice(0, 10), _jsxs(ActionList.TrailingVisual, { children: [candidateRuntimeDesc.name && (_jsx(Label, { size: "small", variant: "secondary", children: candidateRuntimeDesc.name })), ' ', candidateRuntimeDesc
+                                                                .provider && (_jsx(Label, { size: "small", variant: "accent", children: codeSandboxVariantTitle(candidateRuntimeDesc.provider) }))] })] }, choiceKey));
+                                        })] }, group))), !!postActions && (_jsxs(_Fragment, { children: [_jsx(ActionList.Divider, {}), postActions] }))] }) })] })) : display === 'dropdown' ? (
+            /*
+             * Section for the dropdown display.
+             *
+             * The same choices as the radio column, in the control the launcher
+             * uses — one question asked one way. A list of nine environments is
+             * nine rows of radio buttons before anything else on the dialog can
+             * be read; closed, it is one line.
+             */
+            _jsxs(_Fragment, { children: [defaultSet &&
+                        sandboxLayout === 'separated' &&
+                        runningEntries.length > 0 &&
+                        radioSections(runningEntries), defaultSet && (
+                    // Room below: the controls of a new sandbox follow, and the
+                    // toggle of the home folder sat against the dropdown.
+                    _jsxs(FormControl, { sx: { marginBottom: 4 }, children: [_jsx(FormControl.Label, { children: sandboxLayout === 'separated'
+                                    ? 'Assign a new Code Sandbox'
+                                    : 'Environment' }), _jsx(CodeSandboxEnvironmentSelect, { disabled: disabled, options: sandboxLayout === 'separated'
+                                    ? environmentOnlyOptions
+                                    : dropdownOptions, selectedKey: runtimeDesc ? codeSandboxDescKey(runtimeDesc) : undefined, onSelect: key => {
+                                    const chosen = dropdownDescs.get(key);
+                                    if (chosen) {
+                                        setRuntimeDesc(chosen);
+                                    }
+                                } })] })), !!postActions && _jsx(_Fragment, { children: 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 (
-                                    // A kernel identifies a runtime that already runs; an
-                                    // environment to start one in has none, and is named
-                                    // by where it runs and what it runs.
-                                    _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", sx: { alignItems: 'baseline' }, children: [_jsx(Box, { children: k.displayName }), k.kernelId && (_jsx(Text, { sx: {
-                                                                        ml: 2,
-                                                                        fontSize: 0,
-                                                                        color: 'fg.muted',
-                                                                        fontFamily: 'mono'
-                                                                    }, title: k.kernelId, children: k.kernelId.slice(0, 8) })), 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.location}:${k.kernelId ?? k.name}`));
-                                })] }, group))) })), !!postActions && _jsx(_Fragment, { children: postActions })] })), withNewSandboxControls && isNewSandbox && (
+            _jsxs(_Fragment, { children: [defaultSet &&
+                        radioSections(Object.entries(groupedRuntimeDescs ?? {})), !!postActions && _jsx(_Fragment, { children: postActions })] })), withNewSandboxControls && isNewSandbox && (
             // The user asked for a NEW sandbox: the questions are the launcher's,
             // asked through the launcher's own controls. A sandbox of this page
             // or of this server reserves nothing, so only the time of a remote
@@ -342,6 +523,6 @@ export function CodeSandboxPicker(props) {
                         // the name travels with it, rather than beside it.
                         setRuntimeDesc({ ...runtimeDesc, displayName: value });
                     }
-                }, userStorage: userStorage, onUserStorageToggle: () => setUserStorage(current => !current) })), variables.available && (_jsx(CodeSandboxVariables, { selectedVariables: variables.selected, setSelectVariable: variables.setSelected, transferVariables: variables.transfer, setTransferVariable: variables.setTransfer, kernelVariables: variables.variables, translator: translator }))] }));
+                }, homeFolder: homeFolder, onHomeFolderToggle: () => setHomeFolder(current => !current) })), variables.available && (_jsx(CodeSandboxVariables, { selectedVariables: variables.selected, setSelectVariable: variables.setSelected, transferVariables: variables.transfer, setTransferVariable: variables.setTransfer, kernelVariables: variables.variables, translator: translator }))] }));
 }
 export default CodeSandboxPicker;

package/lib/components/code-sandboxes/CodeSandboxPickerCell.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { ISessionContext } from '@jupyterlab/apputils';
 import { CodeCellModel } from '@jupyterlab/cells';
 import type { IMarkdownParser, IRenderMime } from '@jupyterlab/rendermime';

package/lib/components/code-sandboxes/CodeSandboxPickerCell.js

@@ -1,8 +1,4 @@
 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';

package/lib/components/code-sandboxes/CodeSandboxReservationControl.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 /**
  * Maximal time reservable for a runtime in minutes.
  *

package/lib/components/code-sandboxes/CodeSandboxReservationControl.js

@@ -1,11 +1,7 @@
-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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormControl, IconButton, Text, TextInput } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { PlusIcon } from '@primer/octicons-react';
+import { CreditCardIcon } from '@primer/octicons-react';
 import { Slider } from '@datalayer/primer-addons';
 /**
  * Maximal time reservable for a runtime in minutes.
@@ -45,5 +41,7 @@ export function CodeSandboxReservationControl(props) {
                     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_CODE_SANDBOX_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, {}));
+                }, 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: [_jsx(Text, { children: max < requestedMax
+                                    ? `out of ${max} minutes`
+                                    : `out of ${max} available minutes` }), addCredits && (_jsx(IconButton, { icon: CreditCardIcon, "aria-label": "Check your Plan", variant: "invisible", onClick: () => addCredits() }))] }))] }), _jsxs(FormControl.Caption, { children: ["Maximum execution time that can be consumed by the runtime. It must be less than", ' ', (MAXIMAL_CODE_SANDBOX_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/code-sandboxes/CodeSandboxTransfer.d.ts

@@ -11,6 +11,11 @@ export interface CodeSandboxTransfer {
     runtime: Partial<Omit<IRuntimeOptions, 'kernelType'> & {
         id: string;
         displayName: string;
+        /**
+         * The pod of an external sandbox (Daytona, E2B), which has no kernel of
+         * its own — the session binds it through the runtimes proxy by this.
+         */
+        runtime_name: string;
     }> | null;
     /**
      * List of selected variables

package/lib/components/code-sandboxes/CodeSandboxUtils.d.ts

@@ -1,9 +1,24 @@
 import { SessionContext } from '@jupyterlab/apputils';
 import { ITranslator } from '@jupyterlab/translation';
 import { IMultiServiceManager } from '../../runtimes';
-import { IRuntimeDesc } from '../../models';
+import { IRuntimeDesc, type IDatalayerEnvironment } from '../../models';
+import { CodeSandboxVariant } from '../../models/CodeSandboxVariant';
 export type IDatalayerCodeSandboxDesc = IRuntimeDesc & {
     gpu?: string;
+    /** The provider the environment belongs to — see `CodeSandboxVariant`. */
+    provider?: CodeSandboxVariant;
+    /**
+     * The listing entry a NEW sandbox would be started from, carried whole.
+     *
+     * What the picker has to say about an environment — whose it is, which
+     * version it launches, the class that prices it, whether anything was built
+     * for this variant — is decided by the rules in `codeSandboxEnvironments`,
+     * and they read the entry. Copying a field at a time here is how the
+     * launcher and the picker came to disagree about the same environment
+     * (PLAN_ENV.md, E1-19). Absent on a sandbox that already runs and on a
+     * kernelspec of a server or of the browser.
+     */
+    environment?: IDatalayerEnvironment;
 };
 /**
  * Create the grouped runtime descriptions.

package/lib/components/code-sandboxes/CodeSandboxUtils.js

@@ -5,6 +5,8 @@
 import { nullTranslator } from '@jupyterlab/translation';
 const ASSIGN_NEW_RUNTIME_LABEL = 'Assign a new Code Sandbox';
 import { ensureCodeSandboxGivenName } from './CodeSandboxNames';
+import { isCodeSandboxProviderAvailable } from './codeSandboxProviders';
+import { CodeSandboxVariant, codeSandboxVariantOf, } from '../../models/CodeSandboxVariant';
 const ASSIGN_EXISTING_REMOTE_RUNTIME_LABEL = 'Assign an existing Remote Code Sandbox';
 const ASSIGN_EXISTING_RUNTIME_LABEL = 'Assign an existing Code Sandbox';
 /**
@@ -18,12 +20,25 @@ export function getGroupedCodeSandboxDescs(multiServiceManager, kernelId, transl
     // identifier, the specification only names it. Only the environments to
     // start a new runtime in come from the specifications, and they wait.
     const specs = multiServiceManager.local.kernelspecs.specs;
-    const sessions = multiServiceManager.local.sessions.running();
+    /*
+     * The kernels of a Jupyter Server belong to the page that talks to one —
+     * inside JupyterLab. The web application's "local" manager points at
+     * whatever server its configuration names, and offering those kernels
+     * there lists sandboxes the user never started and cannot reason about.
+     * One rule for the whole file: the provider registry answers it, for the
+     * existing sandboxes here exactly as for the new-sandbox group below.
+     */
+    const jupyterProviderAvailable = isCodeSandboxProviderAvailable('local', multiServiceManager);
+    const sessions = jupyterProviderAvailable
+        ? multiServiceManager.local.sessions.running()
+        : [];
     const kernels = {};
     // Add the sessions.
     const runningSessions = Array.from(sessions)
         .filter(session => session.kernel && session.kernel.id !== kernelId)
-        .map(session => {
+        // Annotated for the same reason as the chain below: what is pushed into
+        // this list includes sandboxes that carry a pod rather than a kernel.
+        .map((session) => {
         const spec = specs?.kernelspecs[session.kernel.name];
         return {
             kernelId: session.kernel.id,
@@ -50,9 +65,11 @@ export function getGroupedCodeSandboxDescs(multiServiceManager, kernelId, transl
         .filter(filterKernels);
     // Add the running runtimes.
     const listedAsSession = runningSessions.map(s => s.kernelId);
-    const runningKernels = Array.from(multiServiceManager.local.kernels.running())
+    const runningKernels = Array.from(jupyterProviderAvailable ? multiServiceManager.local.kernels.running() : [])
         .filter(k => !listedAsSession.includes(k.id))
-        .map(k => {
+        // Annotated, because the element type of the chain below is taken from
+        // this first link: a sandbox with no kernel joins it further down.
+        .map((k) => {
         const spec = specs?.kernelspecs[k.name];
         return {
             kernelId: k.id,
@@ -63,15 +80,33 @@ export function getGroupedCodeSandboxDescs(multiServiceManager, kernelId, transl
         };
     })
         .concat((multiServiceManager.remote?.runtimesManager.get() ?? [])
-        .filter(k => k.id && !listedAsSession.includes(k.id))
+        /*
+         * A sandbox with no KERNEL is still a sandbox that runs.
+         *
+         * The ones of an external provider — Kaggle, Modal — run at their
+         * provider and carry no kernel of this platform, so their `id` is
+         * empty. Asking for a truthy one dropped every one of them: they
+         * appeared in the table of the Code Sandboxes and nowhere in the
+         * picker, which is the one place a notebook can be pointed at them.
+         * What they always have is the pod that stands for them.
+         */
+        .filter(k => (k.id || k.runtime_name) && !listedAsSession.includes(k.id))
         .map(runtime => {
         const environment = multiServiceManager
             .remote.environments.get()
             .find(env => env.name === runtime.environment.name);
         return {
-            kernelId: runtime.id,
+            // Keep the control-plane identity as well as the Jupyter kernel
+            // identity. External sandboxes may not have a kernel until they
+            // are attached, but their runtime uid is already unique.
+            id: runtime.uid,
+            // Empty for an external sandbox: it has none, and saying so is
+            // what keeps the picker from trying to connect to one.
+            kernelId: runtime.id || undefined,
             name: environment.name,
             language: environment.language,
+            provider: codeSandboxVariantOf(environment?.owner ??
+                runtime.environment?.owner),
             displayName: 
             // The name it was GIVEN first: the title of the environment is
             // what it runs, and every sandbox of that environment answers
@@ -79,7 +114,7 @@ export function getGroupedCodeSandboxDescs(multiServiceManager, kernelId, transl
             // can be told apart here.
             runtime.given_name || environment.title || environment.name,
             location: 'remote',
-            podName: runtime.pod_name,
+            runtimeName: runtime.runtime_name,
             gpu: environment.resources?.['nvidia.com/gpu'],
         };
     }))
@@ -101,7 +136,9 @@ export function getGroupedCodeSandboxDescs(multiServiceManager, kernelId, transl
     // another — and a runtime listed twice would be picked twice.
     const seen = new Set();
     const distinctRunning = runningSessions.filter(desc => {
-        const key = `${desc.location}:${desc.kernelId ?? desc.name}`;
+        // A kernel-less sandbox is named by its pod; without it every external
+        // sandbox of one environment collapsed into a single entry.
+        const key = `${desc.location}:${desc.kernelId ?? desc.runtimeName ?? desc.name}`;
         if (seen.has(key)) {
             return false;
         }
@@ -117,7 +154,14 @@ export function getGroupedCodeSandboxDescs(multiServiceManager, kernelId, transl
         kernels[key] = runningSessions;
     }
     // Environments.
-    const environments = Object.values(specs?.kernelspecs ?? {})
+    /*
+     * The sandboxes of a Jupyter Server, which is a provider like the others.
+     *
+     * It is the one provider that only exists where the page is talking to such
+     * a server: inside JupyterLab. Elsewhere its kernels are somebody else's,
+     * and offering them promises what cannot be reached.
+     */
+    const environments = Object.values(jupyterProviderAvailable ? (specs?.kernelspecs ?? {}) : {})
         .filter(spec => !!spec)
         .map(spec => ({
         name: spec.name,
@@ -125,10 +169,21 @@ export function getGroupedCodeSandboxDescs(multiServiceManager, kernelId, transl
         displayName: spec.display_name,
         gpu: spec.resources?.['nvidia.com/gpu'],
         location: 'local',
+        provider: CodeSandboxVariant.JupyterServer,
     }))
         .filter(filterKernels);
-    environments.push(...(multiServiceManager.remote?.environments
-        .get()
+    /*
+     * Every provider that can be used from here, and only those.
+     *
+     * A provider is a place a sandbox runs — the platform, this Jupyter Server,
+     * the browser — and each is offered when it is REACHABLE, not according to
+     * which application is asking. Withholding the platform inside JupyterLab
+     * took `ai-agents-env` off the list and left no way to launch a remote
+     * sandbox from there at all; the rule that was wanted is the other one, and
+     * it is stated where the Jupyter Server is read below.
+     */
+    const remoteEnvironments = multiServiceManager.remote?.environments.get() ?? [];
+    environments.push(...remoteEnvironments
         .map(spec => ({
         name: spec.name,
         language: spec.language,
@@ -136,8 +191,10 @@ export function getGroupedCodeSandboxDescs(multiServiceManager, kernelId, transl
         location: 'remote',
         gpu: spec.resources?.['nvidia.com/gpu'],
         burningRate: spec.burning_rate,
+        provider: codeSandboxVariantOf(spec?.owner),
+        environment: spec,
     }))
-        .filter(filterKernels) ?? []));
+        .filter(filterKernels));
     environments.push(...Object.values(multiServiceManager.browser?.kernelspecs.specs?.kernelspecs ?? {})
         .filter(spec => !!spec)
         .map(spec => ({