@datalayer/agent-runtimes 1.0.26 → 1.0.29

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

@@ -0,0 +1,211 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The given name of a code sandbox of a Jupyter Server or of the browser.
+ *
+ * A sandbox of the platform is named when it is launched — `given_name`, the
+ * field the launcher fills from the template of its environment — and it
+ * carries that name everywhere it is listed. A kernel of a Jupyter Server has
+ * no such field: the API gives its identifier and its kernelspec, and nothing
+ * that is the name of THIS sandbox. `python3` is what it runs, and reads the
+ * same on every one of them.
+ *
+ * The name was taken from the session instead, and that was the wrong place:
+ * a session is a standard Jupyter session, it ties a kernel to a document, it
+ * comes and goes as documents open and close, and several can name one kernel.
+ * A sandbox then wore the name of a document, changed name when another
+ * document took it, and kept the name of a document that had been closed.
+ *
+ * The given name is held here, by kernel, and given on first sight — from the
+ * kernelspec, which is what the launcher does for a runtime of the platform.
+ * It is kept in the browser: the kernels of a server outlive the page that
+ * lists them, so the name has to outlive it too, and the server has nowhere to
+ * put it.
+ *
+ * @module components/code-sandboxes/CodeSandboxNames
+ */
+/** Where the names are kept, and under which key. */
+const STORAGE_KEY = 'datalayer:code-sandbox-names';
+/** When each name was written, so pruning can spare what is brand new. */
+const STAMP_KEY = 'datalayer:code-sandbox-names:at';
+/**
+ * How long a fresh name is safe from pruning.
+ *
+ * Pruning compares the names against a list of running kernels, and that list
+ * is a POLL: a sweep that was in flight while a sandbox was created and named
+ * finishes with a list from before it existed, and deleted the name the user
+ * had just typed — every surface then agreed on the renumbered default. A
+ * kernel identifier is never reused, so sparing a young name costs nothing:
+ * a truly dead one is collected on the sweeps after the grace.
+ */
+const PRUNE_GRACE_MS = 10 * 60 * 1000;
+/** The fallback for a browser that refuses its storage: this page only. */
+let memory = {};
+let memoryStamps = {};
+function read(key) {
+    try {
+        const raw = globalThis.localStorage?.getItem(key);
+        return raw ? JSON.parse(raw) : {};
+    }
+    catch {
+        return undefined;
+    }
+}
+/*
+ * Read on every call, never cached in the module.
+ *
+ * A cached copy is a second truth: another instance of this module — another
+ * tab, another bundle holding its own copy — writes the storage, the cache
+ * here goes stale, and the next save writes the stale cache back over what
+ * the other instance stored. The maps are a handful of entries; reading them
+ * each time is nothing.
+ */
+function load() {
+    const stored = read(STORAGE_KEY);
+    return stored === undefined ? memory : stored;
+}
+function loadStamps() {
+    const stored = read(STAMP_KEY);
+    return stored === undefined
+        ? memoryStamps
+        : stored;
+}
+function save(names, stamps) {
+    memory = names;
+    memoryStamps = stamps;
+    try {
+        globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(names));
+        globalThis.localStorage?.setItem(STAMP_KEY, JSON.stringify(stamps));
+    }
+    catch {
+        /* the names stay in memory */
+    }
+}
+/**
+ * The given name of a sandbox, when it has one.
+ *
+ * @param kernelId Kernel of the sandbox
+ */
+export function getCodeSandboxGivenName(kernelId) {
+    return kernelId ? load()[kernelId] : undefined;
+}
+/**
+ * Name a sandbox, or rename it.
+ *
+ * @param kernelId Kernel of the sandbox
+ * @param givenName What to call it; empty forgets the name
+ */
+export function setCodeSandboxGivenName(kernelId, givenName) {
+    const names = load();
+    const stamps = loadStamps();
+    if (givenName) {
+        names[kernelId] = asGivenName(givenName);
+        stamps[kernelId] = Date.now();
+    }
+    else {
+        delete names[kernelId];
+        delete stamps[kernelId];
+    }
+    save(names, stamps);
+}
+/**
+ * Drop the names of the sandboxes that are no longer running.
+ *
+ * @param runningKernelIds The kernels that are still there
+ */
+export function pruneCodeSandboxGivenNames(runningKernelIds) {
+    const alive = new Set(runningKernelIds);
+    const names = load();
+    const stamps = loadStamps();
+    const now = Date.now();
+    let dropped = false;
+    Object.keys(names).forEach(kernelId => {
+        if (alive.has(kernelId)) {
+            return;
+        }
+        // Not in the list is not proof of death: the list is a poll, and a
+        // sandbox named a moment ago may not be in it yet. The young are spared;
+        // see PRUNE_GRACE_MS.
+        const namedAt = stamps[kernelId];
+        if (typeof namedAt === 'number' && now - namedAt < PRUNE_GRACE_MS) {
+            return;
+        }
+        delete names[kernelId];
+        delete stamps[kernelId];
+        dropped = true;
+    });
+    if (dropped) {
+        save(names, stamps);
+    }
+}
+/**
+ * A name a sandbox can wear, out of whatever it was built from.
+ *
+ * A kernelspec is free to call itself with a picture — a laptop, a snake —
+ * and some do. A glyph makes a poor name: it says nothing about WHICH sandbox
+ * this is, it reads as a broken character in the fonts of the toolbar, and it
+ * is not what anyone would type. Pictures and their variation selectors are
+ * dropped, and a name left with nothing is replaced rather than shown empty.
+ */
+function asGivenName(base) {
+    const stripped = (base ?? '')
+        // Pictographs, their skin tones, their joiners and their selectors.
+        .replace(/[\u{1F000}-\u{1FAFF}\u{2190}-\u{2BFF}\u{FE00}-\u{FE0F}\u{200D}]/gu, ' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+    return stripped || 'Code Sandbox';
+}
+/**
+ * Every given name in use by a sandbox of a server or of the browser.
+ */
+export function listCodeSandboxGivenNames() {
+    return Object.values(load());
+}
+/**
+ * The next free name built on a base, numbered when the base is taken.
+ *
+ * "Python 3 (ipykernel)", then "Python 3 (ipykernel) 2", then 3 — one rule for
+ * the name a sandbox is given on first sight and for the name the launcher
+ * offers, so what the launcher proposes is what an unnamed one would get.
+ *
+ * @param base What to call it, before any numbering
+ * @param taken The names already in use
+ */
+export function nextCodeSandboxGivenName(base, taken) {
+    const used = new Set(taken);
+    const stem = asGivenName(base);
+    let candidate = stem;
+    let ordinal = 1;
+    while (used.has(candidate)) {
+        ordinal += 1;
+        candidate = `${stem} ${ordinal}`;
+    }
+    return candidate;
+}
+/**
+ * The given name of a sandbox, giving it one when it has none.
+ *
+ * The name of what it runs, and a number when a sandbox of that kind is
+ * already named — the way two runtimes of one environment are told apart.
+ * Assigned once and kept: a name that changed with what else is running would
+ * be no name at all.
+ *
+ * @param kernelId Kernel of the sandbox
+ * @param specDisplayName What the kernelspec of the sandbox is called
+ */
+export function ensureCodeSandboxGivenName(kernelId, specDisplayName) {
+    const existing = getCodeSandboxGivenName(kernelId);
+    if (existing) {
+        return existing;
+    }
+    const candidate = nextCodeSandboxGivenName(specDisplayName, listCodeSandboxGivenNames());
+    setCodeSandboxGivenName(kernelId, candidate);
+    return candidate;
+}
+export default ensureCodeSandboxGivenName;

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

@@ -4,7 +4,7 @@ import { ITranslator } from '@jupyterlab/translation';
 import { IRuntimeDesc } from '../../models';
 import { type IMultiServiceManager } from '../../runtimes';
 import type { CodeSandboxTransfer } from './CodeSandboxTransfer';
-type IDisplayMode = 'menu' | 'radio';
+type IDisplayMode = 'menu' | 'radio' | 'dropdown';
 /**
  * {@link CodeSandboxPicker} properties
  */
@@ -13,6 +13,19 @@ export interface ICodeSandboxPickerProps {
      * The display mode.
      */
     display: IDisplayMode;
+    /**
+     * Where the sandboxes that ALREADY RUN are offered, in the `dropdown`
+     * display.
+     *
+     * `separated`, the default: as radio buttons of their own, above a
+     * dropdown that then offers only the environments — so the dropdown reads
+     * as "start a new one" and the running sandboxes are all in sight, which
+     * is what picking one of them is usually about.
+     *
+     * `combined`: everything in the one dropdown, running sandboxes and
+     * environments alike, under their headings.
+     */
+    sandboxLayout?: 'separated' | 'combined';
     /**
      * Additional actions items to be placed at the top of the picker
      */

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useCallback, useEffect, useMemo, useState, } from 'react';
+import { useCallback, useEffect, useMemo, useRef, 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';
@@ -15,17 +15,39 @@ import { CreditsIndicator } from '../progress';
 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.podName;
+}
+/** How a sandbox is identified among the choices; see `dropdownDescs`. */
+function codeSandboxDescKey(desc) {
+    // The pod stands in for the kernel of a sandbox that has none — the ones
+    // of an external provider. Without it two Modal sandboxes of the same
+    // environment answer to one key and the list shows a single row.
+    return `${desc.location}:${desc.kernelId ?? desc.podName ?? desc.name}`;
+}
 /**
  * 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.
      *
@@ -42,6 +64,91 @@ 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);
+    }), [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 => {
+                    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 }), 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, {})] }, `${k.location}:${k.kernelId ?? k.name}`));
+                })] }, group))) }));
     const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
     const [defaultSet, setDefaultSet] = useState(false);
     const [remoteModelsReady, setRemoteModelsReady] = useState(!multiServiceManager.remote);
@@ -143,10 +250,30 @@ export function CodeSandboxPicker(props) {
                     }
                 }
             }
+            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,
@@ -161,6 +288,18 @@ export function CodeSandboxPicker(props) {
      */
     const { refreshCredits } = useIAMStore();
     const [timeLimit, setTimeLimit] = useState(10);
+    /*
+     * The name a new sandbox is given.
+     *
+     * Offered from what was picked — the environment or the specification —
+     * numbered against the sandboxes that already carry that name, and written
+     * into the description so whoever creates the sandbox creates it named:
+     * `given_name` for a runtime of the platform, the name held beside a kernel
+     * of a server. Re-offered whenever another thing is picked, and left alone
+     * while the user edits it.
+     */
+    const [givenName, setGivenName] = useState('');
+    const givenNameFor = useRef(undefined);
     const [userStorage, setUserStorage] = useState(false);
     const asksForNewSandbox = withNewSandboxControls || !!onTransferChange;
     useEffect(() => {
@@ -174,6 +313,25 @@ export function CodeSandboxPicker(props) {
             .find(env => env.name === runtimeDesc?.name)?.burning_rate;
     const allowance = useNewCodeSandboxAllowance(resolvedBurningRate);
     const isNewSandbox = !!runtimeDesc && !runtimeDesc.kernelId;
+    // 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
+        ? `${runtimeDesc?.location}:${runtimeDesc?.name}`
+        : undefined;
+    useEffect(() => {
+        if (!pickedKey || givenNameFor.current === pickedKey) {
+            return;
+        }
+        givenNameFor.current = pickedKey;
+        const taken = [
+            ...(multiServiceManager.remote?.runtimesManager
+                .get()
+                .map(runtime => runtime.given_name)
+                .filter(Boolean) ?? []),
+            ...listCodeSandboxGivenNames(),
+        ];
+        setGivenName(nextCodeSandboxGivenName(runtimeDesc?.displayName ?? '', taken));
+    }, [multiServiceManager, pickedKey, runtimeDesc?.displayName]);
     const effectiveMaxMinutes = runtimeDesc?.location === 'remote'
         ? allowance.effectiveMaxMinutes
         : Math.max(1, allowance.maxFromCredits ?? -1);
@@ -217,6 +375,13 @@ export function CodeSandboxPicker(props) {
                         ? `${runtimeDesc.location}-${runtimeDesc.name}`
                         : runtimeDesc.name,
                     id: runtimeDesc.kernelId,
+                    // 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.
+                    displayName: runtimeDesc.displayName,
                     creditsLimit,
                     capabilities: userStorage ? ['user_storage'] : undefined,
                 }
@@ -263,24 +428,37 @@ export function CodeSandboxPicker(props) {
                                                         candidateRuntimeDesc.name) ===
                                                         (runtimeDesc?.kernelId ?? runtimeDesc?.name), onSelect: () => {
                                                     setRuntimeDesc(candidateRuntimeDesc);
-                                                }, children: [_jsx(ActionList.LeadingVisual, { children: candidateRuntimeDesc.location === 'local' ? (_jsx(LaptopSimpleIcon, {})) : candidateRuntimeDesc.location === 'browser' ? (_jsx(BrowserIcon, {})) : (_jsx(CloudUploadIcon, {})) }), displayName + annotation.slice(0, 10)] }, candidateRuntimeDesc.name));
-                                        })] }, group))), !!postActions && (_jsxs(_Fragment, { children: [_jsx(ActionList.Divider, {}), postActions] }))] }) })] })) : (
+                                                }, 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) }))] })] }, candidateRuntimeDesc.name));
+                                        })] }, 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 user storage 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", 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.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
@@ -291,6 +469,13 @@ export function CodeSandboxPicker(props) {
                         ? 'You must add credits to your account.'
                         : timeLimit === 0
                             ? 'You must set a time limit.'
-                            : undefined, 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 }))] }));
+                            : undefined, givenName: givenName, onGivenNameChange: value => {
+                    setGivenName(value);
+                    if (runtimeDesc) {
+                        // The description is what the caller creates the sandbox from:
+                        // 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 }))] }));
 }
 export default CodeSandboxPicker;

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

@@ -2,9 +2,15 @@ import { type IRuntimeOptions } from '../../runtimes';
 export interface CodeSandboxTransfer {
     /**
      * Selected Kernel.
+     *
+     * `displayName` is the name the user gave the sandbox in the picker, carried
+     * with the choice so whoever creates it can create it named — the kernels
+     * API of a server has no field for one, and a runtime of the platform takes
+     * it as its `given_name`.
      */
     runtime: Partial<Omit<IRuntimeOptions, 'kernelType'> & {
         id: string;
+        displayName: string;
     }> | null;
     /**
      * List of selected variables

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

@@ -2,8 +2,11 @@ import { SessionContext } from '@jupyterlab/apputils';
 import { ITranslator } from '@jupyterlab/translation';
 import { IMultiServiceManager } from '../../runtimes';
 import { IRuntimeDesc } from '../../models';
+import { CodeSandboxVariant } from '../../models/CodeSandboxVariant';
 export type IDatalayerCodeSandboxDesc = IRuntimeDesc & {
     gpu?: string;
+    /** The provider the environment belongs to — see `CodeSandboxVariant`. */
+    provider?: CodeSandboxVariant;
 };
 /**
  * Create the grouped runtime descriptions.