@datalayer/agent-runtimes 1.0.28 → 1.0.29

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

@@ -16,17 +16,38 @@ import { isRuntimeRemote, } from '../../runtimes';
 import { useIAMStore } from '../../state/substates';
 import { getGroupedCodeSandboxDescs, } from './CodeSandboxUtils';
 import { listCodeSandboxGivenNames, nextCodeSandboxGivenName, } from './CodeSandboxNames';
+import { codeSandboxVariantTitle } from '../../models/CodeSandboxVariant';
 import { creditsLimitFor, NewCodeSandboxControls, useNewCodeSandboxAllowance, } from './NewCodeSandboxControls';
 import { CodeSandboxVariables, useCodeSandboxVariablesTransfer, } from './CodeSandboxVariables';
+import { CodeSandboxEnvironmentSelect, } from './CodeSandboxEnvironmentSelect';
 /**
  * Maximal runtime display name length after which it is trimmed.
  */
 const RUNTIME_DISPLAY_NAME_MAX_LENGTH = 25;
+/**
+ * Whether the choice is a sandbox that ALREADY RUNS.
+ *
+ * A running one is named by its kernel, or — where it runs at an external
+ * provider and has no kernel of this platform — by its pod. An environment
+ * to start a new one in has neither. Told apart by the kernel alone, every
+ * Kaggle and Modal sandbox read as an environment: they were offered under
+ * "Assign a new Code Sandbox" and never among the ones already running.
+ */
+function isRunningSandbox(desc) {
+    return !!desc.kernelId || !!desc.podName;
+}
+/** How a sandbox is identified among the choices; see `dropdownDescs`. */
+function codeSandboxDescKey(desc) {
+    // The pod stands in for the kernel of a sandbox that has none — the ones
+    // of an external provider. Without it two Modal sandboxes of the same
+    // environment answer to one key and the list shows a single row.
+    return `${desc.location}:${desc.kernelId ?? desc.podName ?? desc.name}`;
+}
 /**
  * The picker of a code sandbox: what runs already, and what could run.
  */
 export function CodeSandboxPicker(props) {
-    const { disabled, display, filterRuntime, multiServiceManager, onTransferChange, postActions, preActions, preference, sessionContext, translator, variant, withNewSandboxControls, withVariablesTransfer, } = props;
+    const { disabled, display, filterRuntime, multiServiceManager, onTransferChange, postActions, sandboxLayout = 'separated', preActions, preference, sessionContext, translator, variant, withNewSandboxControls, withVariablesTransfer, } = props;
     /*
      * The choice, held here when the host does not hold it.
      *
@@ -43,6 +64,91 @@ export function CodeSandboxPicker(props) {
         props.setRuntimeDesc?.(desc);
     }, [isControlled, props.setRuntimeDesc]);
     const [groupedRuntimeDescs, setGroupedRuntimeDescs] = useState(getGroupedCodeSandboxDescs(multiServiceManager, preference?.id, translator, filterRuntime, variant));
+    /*
+     * The same choices the radio column lists, as options of the dropdown.
+     *
+     * Keyed the way the radio column keys its rows — where the sandbox runs
+     * and which one it is — because a kernel already running and an
+     * environment to start one in are told apart by nothing else: two
+     * sandboxes of one environment share a name.
+     */
+    const dropdownDescs = useMemo(() => {
+        const byKey = new Map();
+        Object.values(groupedRuntimeDescs ?? {}).forEach(descs => descs.forEach(desc => byKey.set(codeSandboxDescKey(desc), desc)));
+        return byKey;
+    }, [groupedRuntimeDescs]);
+    const dropdownOptions = useMemo(() => Object.entries(groupedRuntimeDescs ?? {}).flatMap(([group, descs]) => descs.map(desc => ({
+        key: codeSandboxDescKey(desc),
+        title: desc.displayName ?? desc.name,
+        name: desc.name,
+        providerTitle: desc.provider
+            ? codeSandboxVariantTitle(desc.provider)
+            : undefined,
+        location: desc.location,
+        burningRate: desc.burningRate,
+        gpu: desc.gpu,
+        group,
+    }))), [groupedRuntimeDescs]);
+    /**
+     * The sandboxes as a column of radio buttons, group by group.
+     *
+     * Shared by the two layouts that show one: the whole list in the `radio`
+     * display, and the sandboxes that ALREADY RUN in the separated dropdown
+     * display, where the dropdown is left to the environments a new one is
+     * started in.
+     */
+    /*
+     * A sandbox that already runs is told from an environment by its KERNEL:
+     * a running one has one, an environment to start one in has none. Read
+     * from the data rather than from the heading, which is translated.
+     */
+    const runningEntries = useMemo(() => Object.entries(groupedRuntimeDescs ?? {})
+        .map(([group, descs]) => [
+        group,
+        descs.filter(isRunningSandbox),
+    ])
+        .filter(([, descs]) => descs.length > 0), [groupedRuntimeDescs]);
+    const environmentOnlyOptions = useMemo(() => dropdownOptions.filter(option => {
+        const desc = dropdownDescs.get(option.key);
+        return !desc || !isRunningSandbox(desc);
+    }), [dropdownDescs, dropdownOptions]);
+    const radioSections = (entries) => (_jsx(RadioGroup, { name: "kernel-options", "aria-labelledby": "kernel-options", children: entries.map(([group, runtimeDescs]) => (_jsxs(Box, { children: [_jsx(Box, { as: "h4", sx: {
+                        /*
+                         * The type of a form label, not of a heading.
+                         *
+                         * "Assign an existing Code Sandbox" and "Assign a
+                         * new Code Sandbox" name the two ways of answering
+                         * one question, and the second is the label of the
+                         * dropdown; set in the larger, heavier type of an
+                         * `h4`, the first read as a section above it rather
+                         * than as its pair. The values are the ones Primer
+                         * gives `FormControl.Label` — taken as the variables
+                         * it resolves rather than through the Primer scale,
+                         * whose `semibold` the JupyterLab theme redefines.
+                         */
+                        margin: 0,
+                        marginBottom: 2,
+                        color: 'fg.default',
+                        fontSize: 'var(--text-body-size-medium, 0.875rem)',
+                        fontWeight: 'var(--base-text-weight-semibold, 600)',
+                    }, children: group }), runtimeDescs.map(k => {
+                    return (
+                    // A kernel identifies a runtime that already runs; an
+                    // environment to start one in has none, and is named
+                    // by where it runs and what it runs.
+                    _jsxs(Box, { title: k.name, children: [_jsxs(FormControl, { children: [_jsx(Radio, { value: k.kernelId, onChange: () => {
+                                            setRuntimeDesc(k);
+                                        }, checked: (k.location === runtimeDesc?.location ||
+                                            (isRuntimeRemote(k.location) &&
+                                                isRuntimeRemote(runtimeDesc?.location ?? 'local'))) &&
+                                            (k.kernelId ?? k.name) ===
+                                                (runtimeDesc?.kernelId ?? runtimeDesc?.name) }), _jsx(FormControl.Label, { children: _jsxs(Box, { display: "flex", sx: { alignItems: 'baseline' }, children: [_jsx(Box, { children: k.displayName }), k.kernelId && (_jsx(Text, { sx: {
+                                                        ml: 2,
+                                                        fontSize: 0,
+                                                        color: 'fg.muted',
+                                                        fontFamily: 'mono'
+                                                    }, title: k.kernelId, children: k.kernelId.slice(0, 8) })), k.kernelId && k.location === 'remote' && (_jsx(Box, { ml: 3, mt: 1, children: _jsx(CreditsIndicator, { kernelId: k.kernelId, serviceManager: multiServiceManager.remote }, "credits-indicator") }))] }) }), _jsx(FormControl.Caption, { children: _jsxs(LabelGroup, { sx: { marginTop: 1 }, children: [_jsx(Label, { variant: "secondary", children: k.name }), k.provider && (_jsx(Label, { variant: "accent", sx: { marginLeft: 1 }, children: codeSandboxVariantTitle(k.provider) })), _jsx(Label, { variant: "secondary", sx: { marginLeft: 1 }, children: k.location }), k.burningRate && (_jsxs(Label, { variant: "sponsors", sx: { marginLeft: 1 }, children: [k.burningRate, " credits/second"] })), k.gpu && (_jsx(Label, { variant: "success", sx: { marginLeft: 1 }, children: "GPU" }))] }) })] }), _jsx(ActionList.Divider, {})] }, `${k.location}:${k.kernelId ?? k.name}`));
+                })] }, group))) }));
     const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
     const [defaultSet, setDefaultSet] = useState(false);
     const [remoteModelsReady, setRemoteModelsReady] = useState(!multiServiceManager.remote);
@@ -144,10 +250,30 @@ export function CodeSandboxPicker(props) {
                     }
                 }
             }
+            else if (display === 'dropdown') {
+                /*
+                 * Nothing assigned: the FIRST environment stands as the choice.
+                 *
+                 * A dropdown that opens on "Select an environment" reads as a
+                 * question already answered — the control looks filled — and the
+                 * dialog assigns nothing when it is accepted. A column of radio
+                 * buttons shows its emptiness plainly and is left alone. The list
+                 * must be settled first, or the choice would land on a local
+                 * kernelspec and move when the remote environments arrive.
+                 */
+                if (!remoteModelsReady) {
+                    return;
+                }
+                const first = Object.values(groupedRuntimeDescs).flat()[0];
+                if (first) {
+                    setRuntimeDesc(first);
+                }
+            }
         }
         setDefaultSet(true);
     }, [
         defaultSet,
+        display,
         groupedRuntimeDescs,
         remoteModelsReady,
         sessionContext,
@@ -302,29 +428,37 @@ export function CodeSandboxPicker(props) {
                                                         candidateRuntimeDesc.name) ===
                                                         (runtimeDesc?.kernelId ?? runtimeDesc?.name), onSelect: () => {
                                                     setRuntimeDesc(candidateRuntimeDesc);
-                                                }, children: [_jsx(ActionList.LeadingVisual, { children: candidateRuntimeDesc.location === 'local' ? (_jsx(LaptopSimpleIcon, {})) : candidateRuntimeDesc.location === 'browser' ? (_jsx(BrowserIcon, {})) : (_jsx(CloudUploadIcon, {})) }), displayName + annotation.slice(0, 10)] }, candidateRuntimeDesc.name));
-                                        })] }, group))), !!postActions && (_jsxs(_Fragment, { children: [_jsx(ActionList.Divider, {}), postActions] }))] }) })] })) : (
+                                                }, children: [_jsx(ActionList.LeadingVisual, { children: candidateRuntimeDesc.location === 'local' ? (_jsx(LaptopSimpleIcon, {})) : candidateRuntimeDesc.location === 'browser' ? (_jsx(BrowserIcon, {})) : (_jsx(CloudUploadIcon, {})) }), displayName + annotation.slice(0, 10), _jsxs(ActionList.TrailingVisual, { children: [candidateRuntimeDesc.name && (_jsx(Label, { size: "small", variant: "secondary", children: candidateRuntimeDesc.name })), ' ', candidateRuntimeDesc
+                                                                .provider && (_jsx(Label, { size: "small", variant: "accent", children: codeSandboxVariantTitle(candidateRuntimeDesc.provider) }))] })] }, candidateRuntimeDesc.name));
+                                        })] }, group))), !!postActions && (_jsxs(_Fragment, { children: [_jsx(ActionList.Divider, {}), postActions] }))] }) })] })) : display === 'dropdown' ? (
+            /*
+             * Section for the dropdown display.
+             *
+             * The same choices as the radio column, in the control the launcher
+             * uses — one question asked one way. A list of nine environments is
+             * nine rows of radio buttons before anything else on the dialog can
+             * be read; closed, it is one line.
+             */
+            _jsxs(_Fragment, { children: [defaultSet && sandboxLayout === 'separated' &&
+                        runningEntries.length > 0 &&
+                        radioSections(runningEntries), defaultSet && (
+                    // Room below: the controls of a new sandbox follow, and the
+                    // toggle of the user storage sat against the dropdown.
+                    _jsxs(FormControl, { sx: { marginBottom: 4 }, children: [_jsx(FormControl.Label, { children: sandboxLayout === 'separated'
+                                    ? 'Assign a new Code Sandbox'
+                                    : 'Environment' }), _jsx(CodeSandboxEnvironmentSelect, { disabled: disabled, options: sandboxLayout === 'separated'
+                                    ? environmentOnlyOptions
+                                    : dropdownOptions, selectedKey: runtimeDesc ? codeSandboxDescKey(runtimeDesc) : undefined, onSelect: key => {
+                                    const chosen = dropdownDescs.get(key);
+                                    if (chosen) {
+                                        setRuntimeDesc(chosen);
+                                    }
+                                } })] })), !!postActions && _jsx(_Fragment, { children: postActions })] })) : (
             /*
              * Section for Radio display.
              */
-            _jsxs(_Fragment, { children: [defaultSet && (_jsx(RadioGroup, { name: "kernel-options", "aria-labelledby": "kernel-options", children: Object.entries(groupedRuntimeDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(Box, { children: [_jsx(Box, { as: "h4", style: { marginTop: 0 }, children: group }), runtimeDescs.map(k => {
-                                    return (
-                                    // A kernel identifies a runtime that already runs; an
-                                    // environment to start one in has none, and is named
-                                    // by where it runs and what it runs.
-                                    _jsxs(Box, { title: k.name, children: [_jsxs(FormControl, { children: [_jsx(Radio, { value: k.kernelId, onChange: () => {
-                                                            setRuntimeDesc(k);
-                                                        }, checked: (k.location === runtimeDesc?.location ||
-                                                            (isRuntimeRemote(k.location) &&
-                                                                isRuntimeRemote(runtimeDesc?.location ?? 'local'))) &&
-                                                            (k.kernelId ?? k.name) ===
-                                                                (runtimeDesc?.kernelId ?? runtimeDesc?.name) }), _jsx(FormControl.Label, { children: _jsxs(Box, { display: "flex", sx: { alignItems: 'baseline' }, children: [_jsx(Box, { children: k.displayName }), k.kernelId && (_jsx(Text, { sx: {
-                                                                        ml: 2,
-                                                                        fontSize: 0,
-                                                                        color: 'fg.muted',
-                                                                        fontFamily: 'mono'
-                                                                    }, title: k.kernelId, children: k.kernelId.slice(0, 8) })), k.kernelId && k.location === 'remote' && (_jsx(Box, { ml: 3, mt: 1, children: _jsx(CreditsIndicator, { kernelId: k.kernelId, serviceManager: multiServiceManager.remote }, "credits-indicator") }))] }) }), _jsx(FormControl.Caption, { children: _jsxs(LabelGroup, { sx: { marginTop: 1 }, children: [_jsx(Label, { variant: "secondary", children: k.name }), _jsx(Label, { variant: "secondary", sx: { marginLeft: 1 }, children: k.location }), k.burningRate && (_jsxs(Label, { variant: "sponsors", sx: { marginLeft: 1 }, children: [k.burningRate, " credits/second"] })), k.gpu && (_jsx(Label, { variant: "success", sx: { marginLeft: 1 }, children: "GPU" }))] }) })] }), _jsx(ActionList.Divider, {})] }, `${k.location}:${k.kernelId ?? k.name}`));
-                                })] }, group))) })), !!postActions && _jsx(_Fragment, { children: postActions })] })), withNewSandboxControls && isNewSandbox && (
+            _jsxs(_Fragment, { children: [defaultSet &&
+                        radioSections(Object.entries(groupedRuntimeDescs ?? {})), !!postActions && _jsx(_Fragment, { children: postActions })] })), withNewSandboxControls && isNewSandbox && (
             // The user asked for a NEW sandbox: the questions are the launcher's,
             // asked through the launcher's own controls. A sandbox of this page
             // or of this server reserves nothing, so only the time of a remote

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

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

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

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

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

@@ -69,8 +69,8 @@ export function creditsLimitFor(timeLimitMinutes, burningRate) {
 export function NewCodeSandboxControls(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: [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 => {
+    return (_jsxs(_Fragment, { children: [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" })] }))] }));
+                        }, "aria-labelledby": "new-sandbox-user-storage-label" })] })), 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." })] }))] }));
 }

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

@@ -0,0 +1,29 @@
+import type { IMultiServiceManager } from '../../api';
+import type { IRuntimeLocation } from '../../models';
+/** A place sandboxes run, as this page knows it. */
+export type ICodeSandboxProvider = {
+    /** Identifier of the provider, which is where its sandboxes run. */
+    name: IRuntimeLocation;
+    /** What it is called, for a person. */
+    title: string;
+    /** Whether this page can reach it at all. */
+    available: boolean;
+    /** Why not, when it cannot. */
+    unavailableReason?: string;
+};
+/**
+ * Every provider this page knows, and whether it can be used.
+ *
+ * @param multiServiceManager The services of the page, which say what is
+ *   reachable: the platform when the account has it, the Jupyter Server when
+ *   the page is one, the browser when kernels run in it
+ */
+export declare function codeSandboxProviders(multiServiceManager: IMultiServiceManager | undefined): ICodeSandboxProvider[];
+/**
+ * Whether one provider can be used from this page.
+ *
+ * @param location Where the sandboxes of that provider run
+ * @param multiServiceManager The services of the page
+ */
+export declare function isCodeSandboxProviderAvailable(location: IRuntimeLocation, multiServiceManager: IMultiServiceManager | undefined): boolean;
+export default codeSandboxProviders;

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

@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The places a code sandbox can run, and which of them this page can use.
+ *
+ * A sandbox is not one kind of thing: it is a runtime of the platform, a
+ * kernel of a Jupyter Server, a kernel of the browser — and, on the Python
+ * side, a Kaggle session or a Modal container as well. Each of those is a
+ * PROVIDER, each ships the environments it offers (the platform ships
+ * `ai-agents-env`, Kaggle a CPU and a GPU session), and each is usable only
+ * where what it needs is at hand.
+ *
+ * That last rule was written three times over — in the picker, in the
+ * launcher, in the table of the sandboxes — and drifted every time it was
+ * touched: withholding the platform inside JupyterLab took `ai-agents-env`
+ * off the list and left no way to launch a remote sandbox there at all. It is
+ * stated once here, and the three read it.
+ *
+ * The same concept lives in `code_sandboxes.providers` on the Python side,
+ * where availability is decided by secrets rather than by services. Both
+ * answer the same question — which providers can be used from here — so the
+ * CLI, the web application and JupyterLab offer the same thing.
+ *
+ * @module components/code-sandboxes/codeSandboxProviders
+ */
+import { loadJupyterConfig } from '@datalayer/jupyter-react';
+/**
+ * Every provider this page knows, and whether it can be used.
+ *
+ * @param multiServiceManager The services of the page, which say what is
+ *   reachable: the platform when the account has it, the Jupyter Server when
+ *   the page is one, the browser when kernels run in it
+ */
+export function codeSandboxProviders(multiServiceManager) {
+    /*
+     * The Jupyter Server is the provider bound to WHERE the page runs.
+     *
+     * Its kernels belong to the server the page is talking to. Outside
+     * JupyterLab there is no such server — what a manager reports as "local" is
+     * somebody else's — so offering them promises what cannot be reached.
+     */
+    const insideJupyterLab = loadJupyterConfig().insideJupyterLab;
+    return [
+        {
+            name: 'remote',
+            title: 'Datalayer',
+            available: Boolean(multiServiceManager?.remote),
+            unavailableReason: multiServiceManager?.remote
+                ? undefined
+                : 'Sign in to Datalayer to launch a sandbox on the platform.'
+        },
+        {
+            name: 'local',
+            title: 'Jupyter Server',
+            available: insideJupyterLab && Boolean(multiServiceManager?.local),
+            unavailableReason: insideJupyterLab
+                ? undefined
+                : 'The kernels of a Jupyter Server are offered inside JupyterLab.'
+        },
+        {
+            name: 'browser',
+            title: 'Browser',
+            available: Boolean(multiServiceManager?.browser),
+            unavailableReason: multiServiceManager?.browser
+                ? undefined
+                : 'No kernel runs in this browser.'
+        }
+    ];
+}
+/**
+ * Whether one provider can be used from this page.
+ *
+ * @param location Where the sandboxes of that provider run
+ * @param multiServiceManager The services of the page
+ */
+export function isCodeSandboxProviderAvailable(location, multiServiceManager) {
+    return Boolean(codeSandboxProviders(multiServiceManager).find(provider => provider.name === location)?.available);
+}
+export default codeSandboxProviders;

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

@@ -11,12 +11,14 @@
  */
 export * from './CodeSandboxCellVariables';
 export * from './CodeSandboxCellVariablesDialog';
+export * from './CodeSandboxEnvironmentSelect';
 export * from './CodeSandboxLauncher';
 export * from './CodeSandboxPicker';
 export * from './CodeSandboxPickerCell';
 export * from './CodeSandboxReservationControl';
 export * from './CodeSandboxTransfer';
 export * from './CodeSandboxNames';
+export * from './codeSandboxProviders';
 export * from './CodeSandboxUtils';
 export * from './CodeSandboxVariables';
 export * from './NewCodeSandboxControls';

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

@@ -15,12 +15,14 @@
  */
 export * from './CodeSandboxCellVariables';
 export * from './CodeSandboxCellVariablesDialog';
+export * from './CodeSandboxEnvironmentSelect';
 export * from './CodeSandboxLauncher';
 export * from './CodeSandboxPicker';
 export * from './CodeSandboxPickerCell';
 export * from './CodeSandboxReservationControl';
 export * from './CodeSandboxTransfer';
 export * from './CodeSandboxNames';
+export * from './codeSandboxProviders';
 export * from './CodeSandboxUtils';
 export * from './CodeSandboxVariables';
 export * from './NewCodeSandboxControls';

package/lib/examples/AgentspecsExample.js

@@ -84,7 +84,7 @@ const GITHUB_CLIENT_ID = import.meta.env.VITE_GITHUB_CLIENT_ID || 'example-clien
 // Kaggle API token - set via environment variable
 // Get your token at: https://www.kaggle.com/settings/account (API section)
 // Download kaggle.json and use the "key" value
-const KAGGLE_TOKEN = import.meta.env.VITE_KAGGLE_TOKEN || '';
+const KAGGLE_API_TOKEN = import.meta.env.VITE_KAGGLE_API_TOKEN || '';
 const isPlainObject = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
 const yamlScalar = (value) => {
     if (value === null || value === undefined) {
@@ -252,11 +252,11 @@ const DEFAULT_IDENTITY_PROVIDERS = {
             },
         }
         : {}),
-    ...(KAGGLE_TOKEN
+    ...(KAGGLE_API_TOKEN
         ? {
             kaggle: {
                 type: 'token',
-                token: KAGGLE_TOKEN,
+                token: KAGGLE_API_TOKEN,
                 displayName: 'Kaggle',
                 iconUrl: 'https://www.kaggle.com/static/images/favicon.ico',
             },

package/lib/identity/index.d.ts

@@ -37,7 +37,7 @@
  * ```
  */
 export type { OAuthProvider, OAuthToken, Identity, ProviderUserInfo, OAuthProviderConfig, AuthorizationRequest, AuthorizationCallback, IdentityState, IdentityActions, IdentityStore, AuthType, TokenProviderConfig, OAuthIdentityProviderConfig, TokenIdentityProviderConfig, IdentityProviderConfig, IdentityProvidersConfig, } from './types';
-export { GITHUB_PROVIDER, GOOGLE_PROVIDER, KAGGLE_PROVIDER, KAGGLE_TOKEN_PROVIDER, } from './types';
+export { GITHUB_PROVIDER, GOOGLE_PROVIDER, KAGGLE_PROVIDER, KAGGLE_API_TOKEN_PROVIDER, } from './types';
 export { generateCodeVerifier, generateCodeChallenge, generateState, generatePKCEPair, } from './pkce';
 export { discoverAuthorizationServer, supportsDCR, registerClient, updateClientRegistration, deleteClientRegistration, getOrCreateDynamicClient, loadDynamicClient, saveDynamicClient, removeDynamicClient, getAllDynamicClients, clearAllDynamicClients, dynamicClientToProviderConfig, type AuthorizationServerMetadata, type ClientRegistrationRequest, type ClientRegistrationResponse, type ClientRegistrationError, type DynamicClient, } from './dcr';
 export { useIdentityStore, useConnectedIdentities, useConnectedProviders, useIdentity as useIdentitySelector, useIsProviderConnected, usePendingAuthorization, useIdentityLoading, useIdentityError, configureBuiltinProviders, } from './identityStore';

package/lib/identity/index.js

@@ -2,7 +2,7 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-export { GITHUB_PROVIDER, GOOGLE_PROVIDER, KAGGLE_PROVIDER, KAGGLE_TOKEN_PROVIDER, } from './types';
+export { GITHUB_PROVIDER, GOOGLE_PROVIDER, KAGGLE_PROVIDER, KAGGLE_API_TOKEN_PROVIDER, } from './types';
 // PKCE utilities
 export { generateCodeVerifier, generateCodeChallenge, generateState, generatePKCEPair, } from './pkce';
 // Dynamic Client Registration (DCR)

package/lib/identity/types.d.ts

@@ -237,7 +237,7 @@ export interface TokenProviderConfig {
  * Kaggle token-based provider configuration.
  * Generate token at: https://www.kaggle.com/settings/account (API section)
  */
-export declare const KAGGLE_TOKEN_PROVIDER: TokenProviderConfig;
+export declare const KAGGLE_API_TOKEN_PROVIDER: TokenProviderConfig;
 /**
  * OAuth provider configuration for identity providers.
  */

package/lib/identity/types.js

@@ -63,7 +63,7 @@ export const KAGGLE_PROVIDER = {
  * Kaggle token-based provider configuration.
  * Generate token at: https://www.kaggle.com/settings/account (API section)
  */
-export const KAGGLE_TOKEN_PROVIDER = {
+export const KAGGLE_API_TOKEN_PROVIDER = {
     provider: 'kaggle',
     displayName: 'Kaggle',
     iconUrl: 'https://www.kaggle.com/static/images/favicon.ico',