@datalayer/agent-runtimes 1.0.28 → 1.0.29

package/lib/api/index.js

@@ -22,9 +22,21 @@ export * as notifications from './notifications';
 export * as output from './output';
 export * from '../runtimes';
 import { iamStore } from '@datalayer/core/lib/state';
+import { runtimesStore } from '../state/substates';
 import { listEnvironments } from './runtimes/environments';
 import { listSnapshots, createSnapshot, deleteSnapshot, } from './runtimes/snapshots';
 import { asCodeSandboxSnapshot, } from '../models/CodeSandboxSnapshot';
+/*
+ * The runtimes URL of the PAGE's configuration, not the built-in default.
+ *
+ * Every function below takes an optional `baseUrl`, and the low-level API
+ * layer defaults it to the production URL. Callers all over the application
+ * pass nothing — so against a local plane they silently queried production,
+ * and the picker offered the environments of the wrong deployment.
+ */
+function resolveRuntimesUrl(baseUrl) {
+    return baseUrl ?? runtimesStore.getState().runtimesUrl ?? undefined;
+}
 function resolveToken(token) {
     const resolved = token ?? iamStore.getState()?.token;
     if (!resolved) {
@@ -33,14 +45,14 @@ function resolveToken(token) {
     return resolved;
 }
 export async function getEnvironments(token, baseUrl) {
-    const response = await listEnvironments(resolveToken(token), baseUrl);
+    const response = await listEnvironments(resolveToken(token), resolveRuntimesUrl(baseUrl));
     return (response.environments ?? []).map(environment => ({
         ...environment,
         burningRate: environment.burningRate ?? environment.burning_rate,
     }));
 }
 export async function getSandboxSnapshots(token, baseUrl) {
-    const response = await listSnapshots(resolveToken(token), baseUrl);
+    const response = await listSnapshots(resolveToken(token), resolveRuntimesUrl(baseUrl));
     return (response.snapshots ?? []).map(snapshot => asCodeSandboxSnapshot(snapshot));
 }
 export async function createSandboxSnapshot(data, token, baseUrl) {
@@ -49,11 +61,11 @@ export async function createSandboxSnapshot(data, token, baseUrl) {
     if (!('pod_name' in data)) {
         return data;
     }
-    const response = await createSnapshot(resolveToken(token), data, baseUrl);
+    const response = await createSnapshot(resolveToken(token), data, resolveRuntimesUrl(baseUrl));
     return response.snapshot;
 }
 export async function deleteCodeSandboxSnapshot(snapshotId, token, baseUrl) {
-    return deleteSnapshot(resolveToken(token), snapshotId, baseUrl);
+    return deleteSnapshot(resolveToken(token), snapshotId, resolveRuntimesUrl(baseUrl));
 }
 export async function exportCodeSandboxSnapshot(..._args) {
     throw new Error('exportCodeSandboxSnapshot is not implemented in @datalayer/agent-runtimes/api yet.');

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

@@ -0,0 +1,41 @@
+/** One choice of the dropdown. */
+export type ICodeSandboxEnvironmentOption = {
+    /** Identity of the choice, as the host knows it. */
+    key: string;
+    /** What it is called. */
+    title: string;
+    /** The environment name, shown as a label beside the title. */
+    name?: string;
+    /** Who runs it — Datalayer, Kaggle, Modal, the Jupyter Server… */
+    providerTitle?: string;
+    /** Where it runs: `local`, `remote`, `browser`. */
+    location?: string;
+    /** Credits per second, when it costs any. */
+    burningRate?: number;
+    /** The GPU the environment carries, when it carries one. */
+    gpu?: string | boolean;
+    /** The heading this choice is listed under, when the list is grouped. */
+    group?: string;
+};
+export type ICodeSandboxEnvironmentSelectProps = {
+    /** The choices, in the order they should read. */
+    options: ICodeSandboxEnvironmentOption[];
+    /** The `key` of the chosen one, if any. */
+    selectedKey?: string;
+    /** Called with the `key` of the choice made. */
+    onSelect: (key: string) => void;
+    /** Whether the control refuses to open. */
+    disabled?: boolean;
+    /** What the trigger reads when nothing is chosen. */
+    placeholder?: string;
+    /**
+     * Width of the overlay, `xlarge` by default.
+     *
+     * Wide because the entries carry their labels on the same line as their
+     * name, and a priced one — the credits it burns, the environment, the
+     * provider, where it runs — is nearly as wide as the row itself.
+     */
+    overlayWidth?: 'small' | 'medium' | 'large' | 'xlarge' | 'auto';
+};
+export declare function CodeSandboxEnvironmentSelect(props: ICodeSandboxEnvironmentSelectProps): JSX.Element;
+export default CodeSandboxEnvironmentSelect;

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

@@ -0,0 +1,83 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The one dropdown for choosing where code runs.
+ *
+ * The launcher asks it of a new sandbox and the picker asks it of an editor
+ * that needs one; both are the same question, and were drawn twice — a menu
+ * here, a column of radio buttons there. This is that control, once: the
+ * chosen entry reads on the trigger exactly as the entries read in the list,
+ * name to the left and labels to the right, so the closed control and the
+ * open one show the same thing.
+ *
+ * An `ActionMenu` rather than a `<select>`: what tells two entries apart is
+ * their labels — the environment name, the provider, the credits it burns —
+ * and no `<option>` can carry those.
+ *
+ * @module components/code-sandboxes/CodeSandboxEnvironmentSelect
+ */
+import { ActionList, ActionMenu, Box, Label, Text } from '@primer/react';
+/**
+ * The labels of an option, on one line: cost, name, provider, where.
+ *
+ * The price is the widest of them — "0.0008 credits/second" outruns the
+ * name, the provider and the location together — so the room comes from the
+ * overlay rather than from a second line: see `overlayWidth`.
+ */
+function OptionLabels(props) {
+    const { option } = props;
+    return (_jsxs(Box, { as: "span", sx: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 1,
+            whiteSpace: 'nowrap',
+        }, children: [option.burningRate ? (_jsxs(Label, { size: "small", variant: "sponsors", children: [option.burningRate, " credits/second"] })) : null, option.gpu ? (_jsx(Label, { size: "small", variant: "success", children: "GPU" })) : null, option.name ? _jsx(Label, { size: "small", children: option.name }) : null, option.providerTitle ? (_jsx(Label, { size: "small", variant: "accent", children: option.providerTitle })) : null, option.location ? (_jsx(Label, { size: "small", variant: "secondary", children: option.location })) : null] }));
+}
+export function CodeSandboxEnvironmentSelect(props) {
+    const { disabled, onSelect, options, overlayWidth = 'xlarge', placeholder = 'Select an environment', selectedKey, } = props;
+    const selected = options.find(option => option.key === selectedKey);
+    /*
+     * What costs credits leads.
+     *
+     * The sandboxes of the platform and of its providers are the ones worth
+     * choosing between — a kernel of this server is the fallback, always
+     * there and free — so they are read first rather than found under a list
+     * of local specifications. A stable partition: within each half the order
+     * given by the caller is kept.
+     */
+    const ordered = [
+        ...options.filter(option => option.burningRate),
+        ...options.filter(option => !option.burningRate),
+    ];
+    const grouped = ordered.some(option => option.group);
+    const groups = grouped
+        ? Array.from(new Set(ordered.map(option => option.group ?? '')))
+        : [];
+    const rows = (subset) => subset.map(option => (_jsxs(ActionList.Item, { selected: option.key === selectedKey, onSelect: () => onSelect(option.key), children: [option.title, _jsx(ActionList.TrailingVisual, { children: _jsx(OptionLabels, { option: option }) })] }, option.key)));
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { block: true, disabled: disabled || ordered.length === 0, 
+                // The button centers its text by default; the trigger must read like
+                // the rows below it — name left, labels right.
+                sx: {
+                    // The content of a Primer button is a grid whose middle track is
+                    // content-sized, which hugs the labels against the title. The
+                    // template areas stay "leadingVisual text trailingVisual": only
+                    // that track changes, from content-sized to 1fr.
+                    '& [data-component="buttonContent"]': {
+                        flex: 1,
+                        gridTemplateColumns: 'min-content minmax(0, 1fr) min-content',
+                    },
+                    '& [data-component="text"]': { width: '100%', textAlign: 'left' },
+                }, children: selected ? (_jsxs(Box, { as: "span", sx: {
+                        display: 'flex',
+                        width: '100%',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        gap: 2,
+                    }, children: [_jsx(Text, { children: selected.title }), _jsx(OptionLabels, { option: selected })] })) : (placeholder) }), _jsx(ActionMenu.Overlay, { width: overlayWidth, children: _jsx(ActionList, { selectionVariant: "single", children: grouped
+                        ? groups.map(group => (_jsxs(ActionList.Group, { children: [group ? (_jsx(ActionList.GroupHeading, { children: group })) : null, rows(ordered.filter(option => (option.group ?? '') === group))] }, group || 'ungrouped')))
+                        : rows(ordered) }) })] }));
+}
+export default CodeSandboxEnvironmentSelect;

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

@@ -46,6 +46,17 @@ export interface ICodeSandboxLauncherProps {
      * Upgrade subscription URL
      */
     upgradeSubscription?: string;
+    /**
+     * Where "Add credits" navigates.
+     *
+     * ABSOLUTE, always: a relative route resolves against the CURRENT
+     * location — opened from `/…/code-sandboxes`, `usage` landed on
+     * `code-sandboxes/usage` and a `:sandboxId` route swallowed it as a
+     * sandbox called "usage". The default is the web application's `/plans`
+     * (which redirects to the plan overview); a nested surface passes its
+     * own (e.g. `/datalayer/jupyter-kernels/usage/plans`).
+     */
+    usageRoute?: string;
     /**
      * Optional submit button label override.
      */

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

@@ -5,15 +5,18 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  */
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useIsMounted } from 'usehooks-ts';
-import { Button, FormControl, Select, Spinner, Text, TextInput, ToggleSwitch, } from '@primer/react';
+import { Button, FormControl, Spinner, Text, TextInput, ToggleSwitch, } from '@primer/react';
 import { Dialog } from '@primer/react/experimental';
 import { Box } from '@datalayer/primer-addons';
 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 { isCodeSandboxProviderAvailable } from './codeSandboxProviders';
+import { CodeSandboxVariant, codeSandboxVariantOf, codeSandboxVariantTitle, } from '../../models/CodeSandboxVariant';
+import { CodeSandboxEnvironmentSelect, } from './CodeSandboxEnvironmentSelect';
 import { getCodeSandboxGivenName, listCodeSandboxGivenNames, nextCodeSandboxGivenName, setCodeSandboxGivenName, } from './CodeSandboxNames';
 import { iamStore, runtimesStore, useCoreStore, useIAMStore, } from '../../state/substates';
+import { createRuntime as createRuntimeRecord } from '../../runtimes/actions';
 import { createNotebook, sleep } from '@datalayer/core/lib/utils';
 import { Markdown } from '@datalayer/core/lib/components/display';
 import { Timer } from '@datalayer/core/lib/components/progress';
@@ -42,10 +45,20 @@ const NOT_AVAILABLE_RETRIES = 5;
  * The launcher of a new code sandbox.
  */
 export function CodeSandboxLauncher(props) {
-    const { dialogTitle, kernelSnapshot, manager, onSubmit, markdownParser, sanitizer, upgradeSubscription, submitLabel, startRuntime = true, } = props;
+    const { dialogTitle, kernelSnapshot, manager, onSubmit, markdownParser, sanitizer, upgradeSubscription, usageRoute = '/plans', submitLabel, startRuntime = true, } = props;
     const hasExample = startRuntime === 'with-example';
     const shouldStartRuntime = startRuntime !== 'defer';
     const user = iamStore.getState().user;
+    /*
+     * Where a sandbox may be launched: every provider that can be reached.
+     *
+     * The environments of the platform are offered wherever the account can
+     * reach it — withholding them inside JupyterLab left `ai-agents-env` off
+     * the list and no way to launch a remote sandbox from there. The Jupyter
+     * Server is the provider that depends on where this runs, and it is gated
+     * below.
+     */
+    const jupyterAvailable = isCodeSandboxProviderAvailable('local', runtimesStore.getState().multiServiceManager);
     const environments = manager.environments.get();
     /*
      * The sandboxes of this Jupyter Server, offered beside those of the platform.
@@ -57,6 +70,16 @@ export function CodeSandboxLauncher(props) {
      * prefixed, since a kernelspec and an environment are free to share a name.
      */
     const localSpecs = useMemo(() => {
+        /*
+         * ...and only inside JupyterLab.
+         *
+         * The rule cuts both ways: the web application talks to no Jupyter Server
+         * of its own, so a kernelspec of one is not something it can start — the
+         * entries read as choices that lead nowhere.
+         */
+        if (!jupyterAvailable) {
+            return [];
+        }
         const specs = runtimesStore.getState().multiServiceManager?.local?.kernelspecs.specs
             ?.kernelspecs ?? {};
         return Object.values(specs)
@@ -66,8 +89,29 @@ export function CodeSandboxLauncher(props) {
             title: spec.display_name,
             language: spec.language,
         }));
-    }, []);
+    }, [jupyterAvailable]);
     const LOCAL_PREFIX = 'local:';
+    /*
+     * The choices of the dropdown: what the platform and the external
+     * providers offer, then the kernelspecs of this Jupyter Server. Each says
+     * whose machine it is — two entries called "GPU" are told apart by nothing
+     * else.
+     */
+    const environmentOptions = useMemo(() => [
+        ...environments.map(spec => ({
+            key: spec.name,
+            title: spec.title || spec.name,
+            name: spec.name,
+            providerTitle: codeSandboxVariantTitle(codeSandboxVariantOf(spec?.owner)),
+            burningRate: spec.burning_rate,
+        })),
+        ...localSpecs.map(spec => ({
+            key: `${LOCAL_PREFIX}${spec.name}`,
+            title: spec.title || spec.name,
+            name: spec.name,
+            providerTitle: codeSandboxVariantTitle(CodeSandboxVariant.JupyterServer),
+        })),
+    ], [environments, localSpecs]);
     const localSpecOf = (value) => value.startsWith(LOCAL_PREFIX)
         ? localSpecs.find(spec => spec.name === value.slice(LOCAL_PREFIX.length))
         : undefined;
@@ -85,6 +129,18 @@ export function CodeSandboxLauncher(props) {
     const jupyterReactStore = useJupyterReactStore();
     const jupyterLabAdapter = jupyterReactStore.jupyterLabAdapter;
     const [selection, setSelection] = useState((kernelSnapshot?.environment || environments[0]?.name) ?? '');
+    /*
+     * Something is always selected.
+     *
+     * With the environments of the platform withheld, the first choice of the
+     * list is a sandbox of this server — and nothing was selected at all, so the
+     * launcher opened on an empty dropdown that could not be submitted.
+     */
+    useEffect(() => {
+        if (!selection && localSpecs.length) {
+            setSelection(`${LOCAL_PREFIX}${localSpecs[0].name}`);
+        }
+    }, [localSpecs, selection]);
     const [timeLimit, setTimeLimit] = useState(10);
     /*
      * The name the sandbox is given, and what is offered for it.
@@ -125,12 +181,11 @@ export function CodeSandboxLauncher(props) {
     const allowance = useNewCodeSandboxAllowance(burningRate);
     const effectiveMaxMinutes = allowance.effectiveMaxMinutes;
     const outOfCredits = shouldStartRuntime && allowance.outOfCredits;
-    const handleSelectionChange = useCallback((e) => {
-        const selection = e.target.value;
-        setSelection(selection);
+    const handleSelectionChange = useCallback((value) => {
+        setSelection(value);
         if (!hasCustomRuntimeName) {
-            const local = localSpecOf(selection);
-            setRuntimeName(givenNameFor(local ?? environments.find(env => env.name === selection)));
+            const local = localSpecOf(value);
+            setRuntimeName(givenNameFor(local ?? environments.find(env => env.name === value)));
         }
     }, [environments, givenNameFor, setSelection, hasCustomRuntimeName]);
     const handleSubmitRuntime = useCallback(async () => {
@@ -191,7 +246,36 @@ export function CodeSandboxLauncher(props) {
                 desc.params['capabilities'] = ['user_storage'];
             }
             let success = true;
-            if (shouldStartRuntime) {
+            const provider = codeSandboxVariantOf(spec?.owner);
+            if (shouldStartRuntime && provider !== CodeSandboxVariant.Datalayer) {
+                /*
+                 * An EXTERNAL environment — Kaggle, Modal. The platform RECORDS such
+                 * a sandbox rather than running it: the provider runs it under the
+                 * user's own credentials, and what comes back is a record with no
+                 * pod, no ingress and no kernel. Waiting for one, as the branch
+                 * below does, would time out and then delete the record as broken.
+                 */
+                success = false;
+                try {
+                    await createRuntimeRecord({
+                        environmentName: selection,
+                        type: 'notebook',
+                        givenName: runtimeName,
+                        creditsLimit,
+                    });
+                    await manager.runtimesManager.refresh();
+                    success = true;
+                }
+                catch (error) {
+                    console.error('Failed to record the external sandbox.', error);
+                    setFlashLevel('danger');
+                    setError(_jsxs(Text, { children: ["The ", codeSandboxVariantTitle(provider), " sandbox could not be created."] }));
+                }
+                finally {
+                    setWaitingForRuntime(false);
+                }
+            }
+            else if (shouldStartRuntime) {
                 success = false;
                 let availableTrial = 1;
                 let retryDelay = NOT_AVAILABLE_INIT_RETRY;
@@ -334,7 +418,7 @@ export function CodeSandboxLauncher(props) {
                     event.preventDefault();
                     handleSubmitRuntime();
                 }
-            }, 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 ? (
+            }, children: [_jsxs(FormControl, { disabled: !!kernelSnapshot?.environment || environments.length === 0, children: [_jsx(FormControl.Label, { children: "Environment" }), _jsx(CodeSandboxEnvironmentSelect, { disabled: !!kernelSnapshot?.environment || environments.length === 0, options: environmentOptions, selectedKey: selection, onSelect: handleSelectionChange }), _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.
@@ -351,7 +435,7 @@ export function CodeSandboxLauncher(props) {
                     // 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);
+                            navigate(usageRoute);
                         }
                         : 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 &&

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

@@ -32,25 +32,56 @@
  */
 /** 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;
-    }
+/** 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(STORAGE_KEY);
-        names = raw ? JSON.parse(raw) : {};
+        const raw = globalThis.localStorage?.getItem(key);
+        return raw ? JSON.parse(raw) : {};
     }
     catch {
-        // A browser that refuses its storage keeps the names for this page only.
-        names = {};
+        return undefined;
     }
-    return names;
 }
-function save() {
+/*
+ * 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(load()));
+        globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(names));
+        globalThis.localStorage?.setItem(STAMP_KEY, JSON.stringify(stamps));
     }
     catch {
         /* the names stay in memory */
@@ -71,14 +102,17 @@ export function getCodeSandboxGivenName(kernelId) {
  * @param givenName What to call it; empty forgets the name
  */
 export function setCodeSandboxGivenName(kernelId, givenName) {
-    const stored = load();
+    const names = load();
+    const stamps = loadStamps();
     if (givenName) {
-        stored[kernelId] = asGivenName(givenName);
+        names[kernelId] = asGivenName(givenName);
+        stamps[kernelId] = Date.now();
     }
     else {
-        delete stored[kernelId];
+        delete names[kernelId];
+        delete stamps[kernelId];
     }
-    save();
+    save(names, stamps);
 }
 /**
  * Drop the names of the sandboxes that are no longer running.
@@ -87,16 +121,27 @@ export function setCodeSandboxGivenName(kernelId, givenName) {
  */
 export function pruneCodeSandboxGivenNames(runningKernelIds) {
     const alive = new Set(runningKernelIds);
-    const stored = load();
+    const names = load();
+    const stamps = loadStamps();
+    const now = Date.now();
     let dropped = false;
-    Object.keys(stored).forEach(kernelId => {
-        if (!alive.has(kernelId)) {
-            delete stored[kernelId];
-            dropped = true;
+    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();
+        save(names, stamps);
     }
 }
 /**

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
      */