@datalayer/agent-runtimes 1.0.26 → 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

@@ -1,18 +1,22 @@
-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.
  */
 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 { iamStore, useCoreStore, useIAMStore } from '../../state/substates';
+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';
@@ -41,11 +45,76 @@ 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.
+     *
+     * 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(() => {
+        /*
+         * ...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)
+            .filter(Boolean)
+            .map(spec => ({
+            name: spec.name,
+            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;
     const { configuration } = useCoreStore();
     const { refreshCredits } = useIAMStore();
     let navigate;
@@ -60,8 +129,37 @@ 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);
-    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 +173,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;
@@ -82,15 +181,52 @@ 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 spec = environments.find(env => env.name === selection);
-            setRuntimeName(spec?.runtime?.givenNameTemplate || spec?.title || '');
+            const local = localSpecOf(value);
+            setRuntimeName(givenNameFor(local ?? environments.find(env => env.name === value)));
         }
-    }, [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);
@@ -110,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;
@@ -195,6 +360,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 +418,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" }), _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.
@@ -260,11 +427,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);
+                            navigate(usageRoute);
                         }
-                        : 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;