@datalayer/agent-runtimes 1.0.26 → 1.0.28

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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.
@@ -12,7 +12,8 @@ import { useJupyterReactStore } from '@datalayer/jupyter-react';
 import { USAGE_ROUTE } from '@datalayer/core/lib/routes';
 import { useNavigate } from '@datalayer/core/lib/hooks';
 import { NO_RUNTIME_AVAILABLE_LABEL } from '@datalayer/core/lib/i18n';
-import { iamStore, useCoreStore, useIAMStore } from '../../state/substates';
+import { getCodeSandboxGivenName, listCodeSandboxGivenNames, nextCodeSandboxGivenName, setCodeSandboxGivenName, } from './CodeSandboxNames';
+import { iamStore, runtimesStore, useCoreStore, useIAMStore, } from '../../state/substates';
 import { createNotebook, sleep } from '@datalayer/core/lib/utils';
 import { Markdown } from '@datalayer/core/lib/components/display';
 import { Timer } from '@datalayer/core/lib/components/progress';
@@ -46,6 +47,30 @@ export function CodeSandboxLauncher(props) {
     const shouldStartRuntime = startRuntime !== 'defer';
     const user = iamStore.getState().user;
     const environments = manager.environments.get();
+    /*
+     * The sandboxes of this Jupyter Server, offered beside those of the platform.
+     *
+     * Inside JupyterLab a sandbox can be a kernel of the server, and the picker
+     * has always offered both — the launcher offered only the environments of
+     * the platform, so "Launch a Code Sandbox" could not launch the very kind
+     * that costs nothing and starts at once. The value of a local choice is
+     * prefixed, since a kernelspec and an environment are free to share a name.
+     */
+    const localSpecs = useMemo(() => {
+        const specs = runtimesStore.getState().multiServiceManager?.local?.kernelspecs.specs
+            ?.kernelspecs ?? {};
+        return Object.values(specs)
+            .filter(Boolean)
+            .map(spec => ({
+            name: spec.name,
+            title: spec.display_name,
+            language: spec.language,
+        }));
+    }, []);
+    const LOCAL_PREFIX = 'local:';
+    const localSpecOf = (value) => value.startsWith(LOCAL_PREFIX)
+        ? localSpecs.find(spec => spec.name === value.slice(LOCAL_PREFIX.length))
+        : undefined;
     const { configuration } = useCoreStore();
     const { refreshCredits } = useIAMStore();
     let navigate;
@@ -61,7 +86,24 @@ export function CodeSandboxLauncher(props) {
     const jupyterLabAdapter = jupyterReactStore.jupyterLabAdapter;
     const [selection, setSelection] = useState((kernelSnapshot?.environment || environments[0]?.name) ?? '');
     const [timeLimit, setTimeLimit] = useState(10);
-    const [runtimeName, setRuntimeName] = useState(environments[0]?.runtime?.givenNameTemplate || environments[0]?.title || '');
+    /*
+     * The name the sandbox is given, and what is offered for it.
+     *
+     * The environment says what to call one of its sandboxes; the sandboxes that
+     * already run say which of those names are taken — a second sandbox of an
+     * environment is offered that name numbered, exactly as an unnamed one is
+     * given one. Both go through `nextCodeSandboxGivenName`, so what is proposed
+     * here and what is assigned elsewhere never drift apart.
+     */
+    const takenGivenNames = useCallback(() => [
+        ...manager.runtimesManager
+            .get()
+            .map(runtime => runtime.given_name)
+            .filter(Boolean),
+        ...listCodeSandboxGivenNames(),
+    ], [manager]);
+    const givenNameFor = useCallback((spec) => nextCodeSandboxGivenName(spec?.runtime?.givenNameTemplate || spec?.title || '', takenGivenNames()), [takenGivenNames]);
+    const [runtimeName, setRuntimeName] = useState(() => givenNameFor(environments[0]));
     // Whether the runtim name has been changed by the user or not
     const [hasCustomRuntimeName, setHasCustomRuntimeName] = useState(false);
     const [userStorage, setUserStorage] = useState(false);
@@ -75,6 +117,7 @@ export function CodeSandboxLauncher(props) {
             refreshCredits();
         }
     }, [shouldStartRuntime]);
+    const isLocalSelection = selection.startsWith(LOCAL_PREFIX);
     const spec = useMemo(() => environments.find(spec => spec.name === selection), [environments, selection]);
     const description = spec?.description ?? '';
     const burningRate = spec?.burning_rate ?? 1;
@@ -86,11 +129,49 @@ export function CodeSandboxLauncher(props) {
         const selection = e.target.value;
         setSelection(selection);
         if (!hasCustomRuntimeName) {
-            const spec = environments.find(env => env.name === selection);
-            setRuntimeName(spec?.runtime?.givenNameTemplate || spec?.title || '');
+            const local = localSpecOf(selection);
+            setRuntimeName(givenNameFor(local ?? environments.find(env => env.name === selection)));
         }
-    }, [setSelection, hasCustomRuntimeName]);
+    }, [environments, givenNameFor, setSelection, hasCustomRuntimeName]);
     const handleSubmitRuntime = useCallback(async () => {
+        const localSpec = localSpecOf(selection);
+        if (localSpec) {
+            /*
+             * A sandbox of this Jupyter Server: started here, named here.
+             *
+             * Nothing to reserve, no credits to weigh, no pod to wait for — the
+             * kernel is started and the choice is handed back as any other, with
+             * the name the user gave it, which is the local answer to `given_name`.
+             */
+            setError(undefined);
+            const kernels = runtimesStore.getState().multiServiceManager?.local?.kernels;
+            if (!kernels) {
+                setError(_jsx(_Fragment, { children: "The Jupyter Server of this page is not reachable." }));
+                return;
+            }
+            setWaitingForRuntime(true);
+            try {
+                const connection = await kernels.startNew({ name: localSpec.name });
+                setCodeSandboxGivenName(connection.id, runtimeName);
+                onSubmit({
+                    kernelId: connection.id,
+                    name: localSpec.name,
+                    language: localSpec.language ?? '',
+                    location: 'local',
+                    displayName: getCodeSandboxGivenName(connection.id) ?? localSpec.title,
+                });
+            }
+            catch (reason) {
+                console.warn('Failed to start a code sandbox of this server.', reason);
+                setError(_jsx(_Fragment, { children: "The code sandbox could not be started." }));
+            }
+            finally {
+                if (isMounted()) {
+                    setWaitingForRuntime(false);
+                }
+            }
+            return;
+        }
         if (selection) {
             setError(undefined);
             setWaitingForRuntime(shouldStartRuntime);
@@ -195,6 +276,8 @@ export function CodeSandboxLauncher(props) {
                 onSubmit(desc);
             }
         }
+        // `localSpecOf` closes over `localSpecs`, which is built once.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         manager,
         selection,
@@ -251,7 +334,7 @@ export function CodeSandboxLauncher(props) {
                     event.preventDefault();
                     handleSubmitRuntime();
                 }
-            }, children: [_jsxs(FormControl, { disabled: !!kernelSnapshot?.environment || environments.length === 0, children: [_jsx(FormControl.Label, { children: "Environment" }), _jsx(Select, { name: "environment", disabled: !!kernelSnapshot?.environment || environments.length === 0, value: selection, onChange: handleSelectionChange, block: true, children: environments.map(spec => (_jsxs(Select.Option, { value: spec.name, children: [spec.name, spec.title && (_jsxs(_Fragment, { children: [' - ', spec.title] }))] }, spec.name))) }), _jsx(FormControl.Caption, { children: _jsx(_Fragment, { children: markdownParser ? (_jsx(Box, { sx: { img: { maxWidth: '100%' } }, children: _jsx(Markdown, { text: description, markdownParser: markdownParser, sanitizer: sanitizer }) })) : sanitizer ? (
+            }, children: [_jsxs(FormControl, { disabled: !!kernelSnapshot?.environment || environments.length === 0, children: [_jsx(FormControl.Label, { children: "Environment" }), _jsxs(Select, { name: "environment", disabled: !!kernelSnapshot?.environment || environments.length === 0, value: selection, onChange: handleSelectionChange, block: true, children: [environments.map(spec => (_jsxs(Select.Option, { value: spec.name, children: [spec.name, spec.title && (_jsxs(_Fragment, { children: [' - ', spec.title] }))] }, spec.name))), localSpecs.map(spec => (_jsxs(Select.Option, { value: `${LOCAL_PREFIX}${spec.name}`, children: [spec.name, spec.title && _jsx(_Fragment, { children: ` - ${spec.title}` }), ' - Jupyter Server'] }, `${LOCAL_PREFIX}${spec.name}`)))] }), _jsx(FormControl.Caption, { children: _jsx(_Fragment, { children: markdownParser ? (_jsx(Box, { sx: { img: { maxWidth: '100%' } }, children: _jsx(Markdown, { text: description, markdownParser: markdownParser, sanitizer: sanitizer }) })) : sanitizer ? (
                                 // The description of an environment carries markup. With no
                                 // parser to render it, the sanitizer of the application is
                                 // enough to show it as what it is rather than as its tags.
@@ -260,11 +343,17 @@ export function CodeSandboxLauncher(props) {
                                     } })) : (
                                 // Neither a parser nor a sanitizer: the text of the markup,
                                 // which is still better than the markup itself.
-                                asPlainText(description)) }) })] }), _jsx(NewCodeSandboxControls, { withReservation: !!startRuntime, burningRate: burningRate, timeLimit: timeLimit, onTimeChange: setTimeLimit, max: effectiveMaxMinutes, disabled: outOfCredits, error: outOfCredits ? 'You must add credits to your account.' : undefined, addCredits: navigate
+                                asPlainText(description)) }) })] }), _jsx(NewCodeSandboxControls
+                // A sandbox of this server costs nothing and starts at once: it has
+                // no time to reserve and no storage of the platform to mount.
+                , { 
+                    // A sandbox of this server costs nothing and starts at once: it has
+                    // no time to reserve and no storage of the platform to mount.
+                    withReservation: !!startRuntime && !isLocalSelection, withUserStorage: !isLocalSelection, burningRate: burningRate, timeLimit: timeLimit, onTimeChange: setTimeLimit, max: effectiveMaxMinutes, disabled: outOfCredits, error: outOfCredits ? 'You must add credits to your account.' : undefined, addCredits: navigate
                         ? () => {
                             navigate(USAGE_ROUTE);
                         }
-                        : undefined, userStorage: userStorage, onUserStorageToggle: () => setUserStorage(current => !current) }), _jsxs(FormControl, { sx: { paddingTop: '10px' }, children: [_jsx(FormControl.Label, { children: "Runtime name" }), _jsx(TextInput, { name: "name", value: runtimeName, onChange: handleKernelNameChange, block: true })] }), hasExample &&
+                        : undefined, userStorage: userStorage, onUserStorageToggle: () => setUserStorage(current => !current) }), _jsxs(FormControl, { sx: { paddingTop: '10px' }, children: [_jsx(FormControl.Label, { children: "Given Name" }), _jsx(TextInput, { name: "name", value: runtimeName, onChange: handleKernelNameChange, block: true })] }), hasExample &&
                     jupyterLabAdapter?.jupyterLab &&
                     !configuration.whiteLabel && (_jsxs(FormControl, { sx: { paddingTop: '10px' }, children: [_jsx(FormControl.Label, { id: "open-example-label", children: "Open example notebook" }), _jsx(ToggleSwitch, { disabled: !environments.find(spec => spec.name === selection)?.example, checked: openExample, size: "small", onClick: handleSwitchClick, "aria-labelledby": "open-example-label" })] })), error && (_jsx(FlashClosable, { variant: flashLevel, actions: navigate && upgradeSubscription && flashLevel === 'warning' ? (_jsx(Button, { onClick: handleUpgrade, title: 'Upgrade your subscription.', children: "Upgrade" })) : undefined, children: error }))] }) }));
 }

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

@@ -0,0 +1,47 @@
+/**
+ * The given name of a sandbox, when it has one.
+ *
+ * @param kernelId Kernel of the sandbox
+ */
+export declare function getCodeSandboxGivenName(kernelId?: string): string | undefined;
+/**
+ * Name a sandbox, or rename it.
+ *
+ * @param kernelId Kernel of the sandbox
+ * @param givenName What to call it; empty forgets the name
+ */
+export declare function setCodeSandboxGivenName(kernelId: string, givenName: string): void;
+/**
+ * Drop the names of the sandboxes that are no longer running.
+ *
+ * @param runningKernelIds The kernels that are still there
+ */
+export declare function pruneCodeSandboxGivenNames(runningKernelIds: Iterable<string>): void;
+/**
+ * Every given name in use by a sandbox of a server or of the browser.
+ */
+export declare function listCodeSandboxGivenNames(): string[];
+/**
+ * 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 declare function nextCodeSandboxGivenName(base: string, taken: Iterable<string>): string;
+/**
+ * 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 declare function ensureCodeSandboxGivenName(kernelId: string, specDisplayName: string): string;
+export default ensureCodeSandboxGivenName;

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

@@ -0,0 +1,166 @@
+/*
+ * 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';
+/** The names, by kernel identifier, as they were last written. */
+let names;
+function load() {
+    if (names) {
+        return names;
+    }
+    try {
+        const raw = globalThis.localStorage?.getItem(STORAGE_KEY);
+        names = raw ? JSON.parse(raw) : {};
+    }
+    catch {
+        // A browser that refuses its storage keeps the names for this page only.
+        names = {};
+    }
+    return names;
+}
+function save() {
+    try {
+        globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(load()));
+    }
+    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 stored = load();
+    if (givenName) {
+        stored[kernelId] = asGivenName(givenName);
+    }
+    else {
+        delete stored[kernelId];
+    }
+    save();
+}
+/**
+ * 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 stored = load();
+    let dropped = false;
+    Object.keys(stored).forEach(kernelId => {
+        if (!alive.has(kernelId)) {
+            delete stored[kernelId];
+            dropped = true;
+        }
+    });
+    if (dropped) {
+        save();
+    }
+}
+/**
+ * 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.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,6 +15,7 @@ import { CreditsIndicator } from '../progress';
 import { isRuntimeRemote, } from '../../runtimes';
 import { useIAMStore } from '../../state/substates';
 import { getGroupedCodeSandboxDescs, } from './CodeSandboxUtils';
+import { listCodeSandboxGivenNames, nextCodeSandboxGivenName, } from './CodeSandboxNames';
 import { creditsLimitFor, NewCodeSandboxControls, useNewCodeSandboxAllowance, } from './NewCodeSandboxControls';
 import { CodeSandboxVariables, useCodeSandboxVariablesTransfer, } from './CodeSandboxVariables';
 /**
@@ -161,6 +162,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 +187,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 +249,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,
                 }
@@ -279,7 +318,12 @@ export function CodeSandboxPicker(props) {
                                                             (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}`));
+                                                                (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 && (
             // 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
@@ -291,6 +335,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.js

@@ -2,11 +2,11 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { PathExt } from '@jupyterlab/coreutils';
 import { nullTranslator } from '@jupyterlab/translation';
-const ASSIGN_NEW_RUNTIME_LABEL = 'Assign a new Runtime';
-const ASSIGN_EXISTING_REMOTE_RUNTIME_LABEL = 'Assign an existing Remote Runtime';
-const ASSIGN_EXISTING_RUNTIME_LABEL = 'Assign an existing Runtime';
+const ASSIGN_NEW_RUNTIME_LABEL = 'Assign a new Code Sandbox';
+import { ensureCodeSandboxGivenName } from './CodeSandboxNames';
+const ASSIGN_EXISTING_REMOTE_RUNTIME_LABEL = 'Assign an existing Remote Code Sandbox';
+const ASSIGN_EXISTING_RUNTIME_LABEL = 'Assign an existing Code Sandbox';
 /**
  * Create the grouped runtime descriptions.
  */
@@ -29,7 +29,7 @@ export function getGroupedCodeSandboxDescs(multiServiceManager, kernelId, transl
             kernelId: session.kernel.id,
             name: spec?.name ?? session.kernel.name,
             language: spec?.language ?? '',
-            displayName: session.name || PathExt.basename(session.path),
+            displayName: ensureCodeSandboxGivenName(session.kernel.id, spec?.display_name ?? session.kernel.name),
             location: 'local',
         };
     })
@@ -43,7 +43,7 @@ export function getGroupedCodeSandboxDescs(multiServiceManager, kernelId, transl
             kernelId: session.kernel.id,
             name: spec?.name ?? session.kernel.name,
             language: spec?.language ?? '',
-            displayName: session.name || PathExt.basename(session.path),
+            displayName: ensureCodeSandboxGivenName(session.kernel.id, spec?.display_name ?? session.kernel.name),
             location: 'browser',
         };
     }))
@@ -58,7 +58,7 @@ export function getGroupedCodeSandboxDescs(multiServiceManager, kernelId, transl
             kernelId: k.id,
             name: spec?.name ?? k.name,
             language: spec?.language ?? '',
-            displayName: spec?.display_name ?? k.name,
+            displayName: ensureCodeSandboxGivenName(k.id, spec?.display_name ?? k.name),
             location: 'local',
         };
     })
@@ -72,7 +72,12 @@ export function getGroupedCodeSandboxDescs(multiServiceManager, kernelId, transl
             kernelId: runtime.id,
             name: environment.name,
             language: environment.language,
-            displayName: environment.title || runtime.given_name || environment.name,
+            displayName: 
+            // The name it was GIVEN first: the title of the environment is
+            // what it runs, and every sandbox of that environment answers
+            // it — the launcher asks for a name precisely so two of them
+            // can be told apart here.
+            runtime.given_name || environment.title || environment.name,
             location: 'remote',
             podName: runtime.pod_name,
             gpu: environment.resources?.['nvidia.com/gpu'],
@@ -86,7 +91,7 @@ export function getGroupedCodeSandboxDescs(multiServiceManager, kernelId, transl
             kernelId: k.id,
             name: spec?.name ?? k.name,
             language: spec?.language ?? '',
-            displayName: spec?.display_name ?? k.name,
+            displayName: ensureCodeSandboxGivenName(k.id, spec?.display_name ?? k.name),
             location: 'browser',
         };
     }))

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

@@ -34,6 +34,23 @@ export interface INewCodeSandboxControlsProps {
     userStorage: boolean;
     onUserStorageToggle: () => void;
     storageDisabled?: boolean;
+    /**
+     * The name the sandbox is given, when the caller asks for that question.
+     *
+     * A sandbox of the platform is named through `given_name`; one of a server
+     * or of the browser has the name held for it by `CodeSandboxNames`. The
+     * question is the same either way, so it is asked in one place.
+     */
+    givenName?: string;
+    onGivenNameChange?: (givenName: string) => void;
+    /**
+     * Whether the storage of the user is offered.
+     *
+     * A sandbox of this Jupyter Server runs on this machine, with the files of
+     * this machine: it reserves no time and mounts no storage of the platform,
+     * so neither question applies to it.
+     */
+    withUserStorage?: boolean;
 }
 /**
  * The two questions of a new sandbox: the time reservation, and the storage.

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

@@ -15,7 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * @module components/code-sandboxes/NewCodeSandboxControls
  */
-import { FormControl, ToggleSwitch, Tooltip, IconButton } from '@primer/react';
+import { FormControl, IconButton, TextInput, ToggleSwitch, Tooltip, } from '@primer/react';
 import { AlertIcon } from '@primer/octicons-react';
 import { useCoreStore, useIAMStore } from '../../state/substates';
 import { CodeSandboxReservationControl, MAXIMAL_CODE_SANDBOX_TIME_RESERVATION_MINUTES, } from './CodeSandboxReservationControl';
@@ -67,9 +67,9 @@ export function creditsLimitFor(timeLimitMinutes, burningRate) {
  * The storage is withheld on white-label deployments, as it always was.
  */
 export function NewCodeSandboxControls(props) {
-    const { addCredits, burningRate, withReservation = true, disabled, error, max, onTimeChange, onUserStorageToggle, storageDisabled, timeLimit, userStorage, } = props;
+    const { addCredits, burningRate, withReservation = true, disabled, error, givenName, max, onGivenNameChange, onTimeChange, onUserStorageToggle, storageDisabled, timeLimit, userStorage, withUserStorage = true, } = props;
     const { configuration } = useCoreStore();
-    return (_jsxs(_Fragment, { children: [withReservation && (_jsx(CodeSandboxReservationControl, { addCredits: addCredits, disabled: disabled, label: 'Time reservation', max: max, time: timeLimit, burningRate: burningRate, onTimeChange: onTimeChange, error: error })), !configuration.whiteLabel && (_jsxs(FormControl, { disabled: storageDisabled, layout: "horizontal", children: [_jsxs(FormControl.Label, { id: "new-sandbox-user-storage-label", children: ["User storage", _jsx(Tooltip, { text: "The runtime will be slower to start.", direction: "e", style: { marginLeft: 3 }, children: _jsx(IconButton, { icon: AlertIcon, "aria-label": "", variant: "invisible" }) })] }), _jsx(ToggleSwitch, { disabled: storageDisabled, checked: userStorage, size: "small", onClick: event => {
+    return (_jsxs(_Fragment, { children: [onGivenNameChange && (_jsxs(FormControl, { disabled: disabled, children: [_jsx(FormControl.Label, { children: "Given Name" }), _jsx(TextInput, { block: true, name: "given-name", value: givenName ?? '', onChange: event => onGivenNameChange(event.target.value) }), _jsx(FormControl.Caption, { children: "What this sandbox is called, wherever it is listed." })] })), withReservation && (_jsx(CodeSandboxReservationControl, { addCredits: addCredits, disabled: disabled, label: 'Time reservation', max: max, time: timeLimit, burningRate: burningRate, onTimeChange: onTimeChange, error: error })), withUserStorage && !configuration.whiteLabel && (_jsxs(FormControl, { disabled: storageDisabled, layout: "horizontal", children: [_jsxs(FormControl.Label, { id: "new-sandbox-user-storage-label", children: ["User storage", _jsx(Tooltip, { text: "The runtime will be slower to start.", direction: "e", style: { marginLeft: 3 }, children: _jsx(IconButton, { icon: AlertIcon, "aria-label": "", variant: "invisible" }) })] }), _jsx(ToggleSwitch, { disabled: storageDisabled, checked: userStorage, size: "small", onClick: event => {
                             event.preventDefault();
                             onUserStorageToggle();
                         }, "aria-labelledby": "new-sandbox-user-storage-label" })] }))] }));

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

@@ -16,6 +16,7 @@ export * from './CodeSandboxPicker';
 export * from './CodeSandboxPickerCell';
 export * from './CodeSandboxReservationControl';
 export * from './CodeSandboxTransfer';
+export * from './CodeSandboxNames';
 export * from './CodeSandboxUtils';
 export * from './CodeSandboxVariables';
 export * from './NewCodeSandboxControls';

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

@@ -20,6 +20,7 @@ export * from './CodeSandboxPicker';
 export * from './CodeSandboxPickerCell';
 export * from './CodeSandboxReservationControl';
 export * from './CodeSandboxTransfer';
+export * from './CodeSandboxNames';
 export * from './CodeSandboxUtils';
 export * from './CodeSandboxVariables';
 export * from './NewCodeSandboxControls';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/agent-runtimes",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "type": "module",
   "workspaces": [
     ".",