@datalayer/agent-runtimes 1.0.29 → 1.3.10

package/lib/client/mixins/RuntimesMixin.js

@@ -19,10 +19,10 @@ export function RuntimesMixin(Base) {
         // ========================================================================
         // Helper Functions
         // ========================================================================
-        _extractRuntimePodName(runtimePodNameOrInstance) {
-            return typeof runtimePodNameOrInstance === 'string'
-                ? runtimePodNameOrInstance
-                : runtimePodNameOrInstance.podName;
+        _extractRuntimeName(runtimeNameOrInstance) {
+            return typeof runtimeNameOrInstance === 'string'
+                ? runtimeNameOrInstance
+                : runtimeNameOrInstance.runtimeName;
         }
         _extractSnapshotId(snapshotIdOrInstance) {
             return typeof snapshotIdOrInstance === 'string'
@@ -49,13 +49,29 @@ export function RuntimesMixin(Base) {
         // ========================================================================
         /**
          * Create a new computational runtime.
-         * @param environmentName - Name of the environment to use
+         *
+         * Asked either with an options object — which is the only way to pin a
+         * version of a user environment (E1-19) — or with the positional arguments
+         * every caller used before there were versions.
+         *
+         * @param environmentNameOrOptions - The environment's name, or the options
          * @param type - Type of runtime
          * @param givenName - User-friendly name for the runtime
-         * @param creditsLimit - Credits limit
+         * @param minutesLimit - How long to reserve, in minutes
+         * @param fromSnapshotId - Snapshot to restore
          * @returns Created runtime
          */
-        async createRuntime(environmentName, type, givenName, minutesLimit, fromSnapshotId) {
+        async createRuntime(environmentNameOrOptions, type, givenName, minutesLimit, fromSnapshotId) {
+            const options = typeof environmentNameOrOptions === 'string'
+                ? {
+                    environmentName: environmentNameOrOptions,
+                    type,
+                    givenName,
+                    minutesLimit,
+                    fromSnapshotId,
+                }
+                : environmentNameOrOptions;
+            const { environmentName, environmentVersion } = options;
             if (!this.environments) {
                 await this.listEnvironments();
             }
@@ -67,15 +83,32 @@ export function RuntimesMixin(Base) {
                 else {
                     const token = this.getToken();
                     const runtimesUrl = this.getRuntimesUrl();
-                    const creditsLimit = this.calculateCreditsFromMinutes(minutesLimit, env.burningRate);
+                    /*
+                     * What a second costs is READ FROM THE LISTING, never written here:
+                     * a platform entry carries its pool's rate, a user environment the
+                     * rate of the size class its promoted version names (D-4, E1-19). A
+                     * class nothing prices is refused rather than reserved at zero,
+                     * which would ask for a runtime the platform will not start.
+                     */
+                    if (env.sizeClass && !env.burningRate) {
+                        throw new Error(`Environment "${environmentName}" runs on the size class "${env.sizeClass}", ` +
+                            'which has no burning rate: it cannot be priced, so no runtime is created.');
+                    }
+                    const creditsLimit = this.calculateCreditsFromMinutes(options.minutesLimit, env.burningRate);
                     const data = {
                         environment: {
                             name: environmentName,
+                            // Additive: without it this is the request runtimes have always
+                            // been created with, and the platform resolves the promoted
+                            // version itself (§7.6, E1-11).
+                            ...(environmentVersion !== undefined && environmentVersion !== ''
+                                ? { version: environmentVersion }
+                                : {}),
                         },
-                        type,
-                        given_name: givenName,
+                        type: options.type ?? 'notebook',
+                        given_name: options.givenName,
                         credits_limit: creditsLimit,
-                        from: fromSnapshotId,
+                        from: options.fromSnapshotId,
                     };
                     const response = await runtimes.createRuntime(token, data, runtimesUrl);
                     return new RuntimeDTO(response.runtime, this);
@@ -97,23 +130,23 @@ export function RuntimesMixin(Base) {
         }
         /**
          * Get details for a specific runtime by pod name.
-         * @param podName - Runtime pod name
+         * @param runtimeName - Runtime pod name
          * @returns Runtime details
          */
-        async getRuntime(podName) {
+        async getRuntime(runtimeName) {
             const token = this.getToken();
             const runtimesUrl = this.getRuntimesUrl();
-            const runtimeData = await runtimes.getRuntime(token, podName, runtimesUrl);
+            const runtimeData = await runtimes.getRuntime(token, runtimeName, runtimesUrl);
             return new RuntimeDTO(runtimeData, this);
         }
         /**
          * Delete a runtime permanently.
-         * @param podName - Runtime pod name
+         * @param runtimeName - Runtime pod name
          */
-        async deleteRuntime(podName) {
+        async deleteRuntime(runtimeName) {
             const token = this.getToken();
             const runtimesUrl = this.getRuntimesUrl();
-            await runtimes.deleteRuntime(token, podName, runtimesUrl);
+            await runtimes.deleteRuntime(token, runtimeName, runtimesUrl);
         }
         /**
          * List persisted memories for the authenticated caller.
@@ -147,7 +180,7 @@ export function RuntimesMixin(Base) {
             // List all runtimes
             const response = await runtimes.listRuntimes(token, runtimesUrl);
             // Delete all runtimes in parallel
-            const deletePromises = response.runtimes.map(runtime => runtimes.deleteRuntime(token, runtime.pod_name, runtimesUrl));
+            const deletePromises = response.runtimes.map(runtime => runtimes.deleteRuntime(token, runtime.runtime_name, runtimesUrl));
             return Promise.allSettled(deletePromises);
         }
         // ========================================================================
@@ -155,17 +188,17 @@ export function RuntimesMixin(Base) {
         // ========================================================================
         /**
          * Create a snapshot of a runtime.
-         * @param podName - Pod name of the runtime to snapshot
+         * @param runtimeName - Pod name of the runtime to snapshot
          * @param name - Name for the snapshot
          * @param description - Description of the snapshot
          * @param stop - Whether to stop the runtime after creating snapshot (defaults to false)
          * @returns Created snapshot
          */
-        async createSnapshot(podName, name, description, stop = false) {
+        async createSnapshot(runtimeName, name, description, stop = false) {
             const token = this.getToken();
             const runtimesUrl = this.getRuntimesUrl();
             const data = {
-                pod_name: podName,
+                runtime_name: runtimeName,
                 name,
                 description,
                 stop,

package/lib/components/a2ui/A2uiSurfaceComposed.d.ts

@@ -10,4 +10,4 @@ export interface A2uiSurfaceComposedProps {
  * basic semantic classes so application-level styles can consistently target
  * rendered A2UI HTML.
  */
-export declare function A2uiSurfaceComposed({ surface }: A2uiSurfaceComposedProps): import("react/jsx-runtime").JSX.Element;
+export declare function A2uiSurfaceComposed({ surface }: A2uiSurfaceComposedProps): import("react").JSX.Element;

package/lib/components/agents/AgentSummary.d.ts

@@ -3,6 +3,19 @@ export interface AgentSummaryData {
     agentName: string;
     location: string;
     specId?: string;
+    /**
+     * The framework turning this agent's loop, as its spec declares it —
+     * `pydantic-ai` server-side, `vercel-ai` in the page.
+     */
+    harness?: string;
+    /**
+     * The runtime variant the host chose: `<location>-<harness>`.
+     *
+     * Shown next to the harness rather than instead of it, because they answer
+     * different questions and can disagree: the harness is what the spec asked
+     * for, the variant is what it actually got.
+     */
+    variant?: string;
     status?: string;
     baseUrl?: string;
     sandboxBaseUrl?: string;

package/lib/components/agents/AgentSummary.js

@@ -36,11 +36,24 @@ const toSandboxStatusUrl = (value) => {
         return normalized.endsWith('/api') ? normalized : `${normalized}/api`;
     }
 };
+/** How wide the details card is; the side it opens on is chosen to fit it. */
+const OVERLAY_WIDTH = 360;
 /**
  * Compact agent summary badge with a hover overlay for details.
  */
 export const AgentSummary = ({ summary, title = 'Active Agent', }) => {
     const [isHovering, setIsHovering] = useState(false);
+    /*
+     * Which way the details card opens.
+     *
+     * It used to be pinned `right: 0` — growing leftward from the badge — which
+     * was right for a badge at the trailing edge of a header and wrong for this
+     * one, which sits in the leading cluster: 360px of card left the viewport
+     * entirely. Measured when the hover opens, because the badge does not know
+     * which header it is in.
+     */
+    const [opensLeftward, setOpensLeftward] = useState(false);
+    const badgeRef = useRef(null);
     const closeTimerRef = useRef(null);
     const clearCloseTimer = () => {
         if (closeTimerRef.current !== null) {
@@ -50,6 +63,10 @@ export const AgentSummary = ({ summary, title = 'Active Agent', }) => {
     };
     const handleMouseEnter = () => {
         clearCloseTimer();
+        const badge = badgeRef.current?.getBoundingClientRect();
+        // Grow rightward while there is room for the card, leftward only when
+        // the right edge would cut it off instead.
+        setOpensLeftward(Boolean(badge && badge.left + OVERLAY_WIDTH > window.innerWidth));
         setIsHovering(true);
     };
     const handleMouseLeave = () => {
@@ -91,7 +108,7 @@ export const AgentSummary = ({ summary, title = 'Active Agent', }) => {
     const shortAgentName = strip(summary.agentName, MAX_AGENT_NAME_LENGTH);
     const badgeLabel = `${summary.agentName} · ${summary.location}`;
     const badgeLabelShort = `${shortAgentName} · ${summary.location}`;
-    return (_jsxs(Box, { sx: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsxs(Box, { as: "button", type: "button", title: badgeLabel, sx: {
+    return (_jsxs(Box, { ref: badgeRef, sx: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsxs(Box, { as: "button", type: "button", title: badgeLabel, sx: {
                     px: 2,
                     py: '6px',
                     maxWidth: 280,
@@ -115,8 +132,8 @@ export const AgentSummary = ({ summary, title = 'Active Agent', }) => {
                         }, children: badgeLabelShort })] }), isHovering && (_jsxs(Box, { sx: {
                     position: 'absolute',
                     top: 'calc(100% + 8px)',
-                    right: 0,
-                    width: 360,
+                    ...(opensLeftward ? { right: 0 } : { left: 0 }),
+                    width: OVERLAY_WIDTH,
                     p: 2,
                     border: '1px solid',
                     borderColor: 'border.default',
@@ -126,7 +143,7 @@ export const AgentSummary = ({ summary, title = 'Active Agent', }) => {
                     zIndex: 120,
                     fontSize: 0,
                     color: 'fg.default',
-                }, children: [_jsx(Box, { sx: { mb: 1, fontWeight: 600 }, children: title }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Name: ", summary.agentName] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Location: ", summary.location] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Spec: ", summary.specId || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Status: ", isCreating ? 'creating' : summary.status || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Agent base URL: ", summary.baseUrl || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Code sandbox base URL:", ' ', summary.sandboxBaseUrl ? (_jsx(Box, { as: "a", href: summary.sandboxBaseUrl, target: "_blank", rel: "noopener noreferrer", sx: { color: 'accent.fg', textDecoration: 'underline' }, children: summary.sandboxBaseUrl })) : ('—')] }), _jsxs(Box, { sx: {
+                }, children: [_jsx(Box, { sx: { mb: 1, fontWeight: 600 }, children: title }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Name: ", summary.agentName] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Location: ", summary.location] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Spec: ", summary.specId || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Harness: ", summary.harness || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Variant: ", summary.variant || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Status: ", isCreating ? 'creating' : summary.status || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Agent base URL: ", summary.baseUrl || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Code sandbox base URL:", ' ', summary.sandboxBaseUrl ? (_jsx(Box, { as: "a", href: summary.sandboxBaseUrl, target: "_blank", rel: "noopener noreferrer", sx: { color: 'accent.fg', textDecoration: 'underline' }, children: summary.sandboxBaseUrl })) : ('—')] }), _jsxs(Box, { sx: {
                             color: 'fg.muted',
                             wordBreak: 'break-all',
                             display: 'flex',

package/lib/components/cards/NotificationEventCard.d.ts

@@ -4,5 +4,5 @@ export interface NotificationEventCardProps {
     onDelete: (event: any) => void;
     onOpenAgent?: (agentId: string) => void;
 }
-export declare function NotificationEventCard({ event, onToggleRead, onDelete, onOpenAgent, }: NotificationEventCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationEventCard({ event, onToggleRead, onDelete, onOpenAgent, }: NotificationEventCardProps): import("react").JSX.Element;
 export default NotificationEventCard;

package/lib/components/cards/OutputCard.d.ts

@@ -4,5 +4,5 @@ export interface OutputCardProps {
     onDelete: (event: any) => void;
     onOpenAgent?: (agentId: string) => void;
 }
-export declare function OutputCard({ event, onToggleRead, onDelete, onOpenAgent, }: OutputCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function OutputCard({ event, onToggleRead, onDelete, onOpenAgent, }: OutputCardProps): import("react").JSX.Element;
 export default OutputCard;

package/lib/components/cards/ToolApprovalCard.d.ts

@@ -1,4 +1,4 @@
-export type ApprovalStatus = 'pending' | 'approved' | 'approved_with_changes' | 'rejected';
+export type ApprovalStatus = 'pending' | 'approved' | 'approved_with_changes' | 'rejected' | 'expired';
 type RiskLevel = 'low' | 'medium' | 'high';
 export declare const TOOL_APPROVAL_STATUS_CONFIG: Record<ApprovalStatus, {
     label: string;
@@ -29,5 +29,5 @@ export interface ToolApprovalCardProps {
     onToggleRead?: (id: string, read: boolean) => void;
     onDelete?: (id: string) => void;
 }
-export declare function ToolApprovalCard({ approval, onApprove, onReject, onToggleRead, onDelete, }: ToolApprovalCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToolApprovalCard({ approval, onApprove, onReject, onToggleRead, onDelete, }: ToolApprovalCardProps): import("react").JSX.Element;
 export default ToolApprovalCard;

package/lib/components/cards/ToolApprovalCard.js

@@ -13,6 +13,7 @@ export const TOOL_APPROVAL_STATUS_CONFIG = {
     approved: { label: 'Approved', variant: 'success' },
     approved_with_changes: { label: 'Approved with Changes', variant: 'accent' },
     rejected: { label: 'Rejected', variant: 'danger' },
+    expired: { label: 'Expired', variant: 'secondary' },
 };
 const RISK_CONFIG = {
     low: { label: 'Low Risk', variant: 'success' },

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

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { ITranslator } from '@jupyterlab/translation';
 /**
  * {@link CodeSandboxCellVariables} properties

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

@@ -1,8 +1,4 @@
 import { 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, useRef, useState } from 'react';
 import { nullTranslator } from '@jupyterlab/translation';
 import { JSONExt } from '@lumino/coreutils';

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

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { ISessionContext } from '@jupyterlab/apputils';
 import { CodeCellModel } from '@jupyterlab/cells';
 import { ITranslator } from '@jupyterlab/translation';

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

@@ -1,8 +1,4 @@
 import { jsx as _jsx } 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 { Dialog } from '@primer/react/experimental';
 import { nullTranslator } from '@jupyterlab/translation';

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

@@ -1,3 +1,20 @@
+/**
+ * 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 type { JSX } from 'react';
 /** One choice of the dropdown. */
 export type ICodeSandboxEnvironmentOption = {
     /** Identity of the choice, as the host knows it. */
@@ -16,6 +33,24 @@ export type ICodeSandboxEnvironmentOption = {
     gpu?: string | boolean;
     /** The heading this choice is listed under, when the list is grouped. */
     group?: string;
+    /**
+     * The version this choice launches, written as it reads — `v3`. Only an
+     * environment somebody built has one (PLAN_ENV.md, E1-19).
+     */
+    version?: string;
+    /** The size class it runs on, which is what prices it (D-4). */
+    sizeClass?: string;
+    /**
+     * Whether the choice cannot be launched: a version whose Datalayer artifact
+     * was never built, or one nothing prices. Shown, rather than withheld, so
+     * the environment somebody is looking for is where they expect it.
+     */
+    disabled?: boolean;
+    /**
+     * Where to go to build the missing artifact: the version's own page. Offered
+     * beside a disabled choice whose only trouble is that nobody built it yet.
+     */
+    buildHref?: string;
 };
 export type ICodeSandboxEnvironmentSelectProps = {
     /** The choices, in the order they should read. */

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

@@ -1,25 +1,5 @@
 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';
+import { ActionList, ActionMenu, Box, Label, Link, Text } from '@primer/react';
 /**
  * The labels of an option, on one line: cost, name, provider, where.
  *
@@ -34,7 +14,7 @@ function OptionLabels(props) {
             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] }));
+        }, 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.version ? (_jsx(Label, { size: "small", variant: "secondary", children: option.version })) : null, option.sizeClass ? (_jsx(Label, { size: "small", variant: "secondary", children: option.sizeClass })) : 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;
@@ -48,15 +28,33 @@ export function CodeSandboxEnvironmentSelect(props) {
      * 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 priceFirst = (subset) => [
+        ...subset.filter(option => option.burningRate),
+        ...subset.filter(option => !option.burningRate),
     ];
-    const grouped = ordered.some(option => option.group);
+    const grouped = options.some(option => option.group);
+    /*
+     * Within a group when there are groups. A grouped list has already been put
+     * in the order its headings should read — what is yours, your organizations',
+     * then the platform's (E1-19) — and partitioning across the whole list would
+     * undo that: one unpriced environment of your own, which is exactly what an
+     * environment awaiting its first build is, would move your heading below the
+     * platform's.
+     */
+    const ordered = grouped ? options : priceFirst(options);
     const groups = grouped
-        ? Array.from(new Set(ordered.map(option => option.group ?? '')))
+        ? Array.from(new Set(options.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)));
+    const rows = (subset) => subset.map(option => (_jsxs(ActionList.Item, { selected: option.key === selectedKey, disabled: option.disabled, onSelect: () => {
+            // A choice that cannot be launched is shown, not chosen: selecting
+            // it would start a sandbox the platform refuses.
+            if (!option.disabled) {
+                onSelect(option.key);
+            }
+        }, children: [option.title, _jsx(ActionList.TrailingVisual, { children: _jsx(OptionLabels, { option: option }) }), option.disabled && option.buildHref ? (
+            // What to do about it, where it is noticed: the version's page is
+            // where a build for this variant is started (E1-21).
+            _jsx(ActionList.Description, { variant: "block", children: _jsx(Link, { href: option.buildHref, onClick: event => event.stopPropagation(), sx: { pointerEvents: 'auto' }, children: "Build for this variant" }) })) : null] }, 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.
@@ -77,7 +75,7 @@ export function CodeSandboxEnvironmentSelect(props) {
                         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')))
+                        ? groups.map(group => (_jsxs(ActionList.Group, { children: [group ? (_jsx(ActionList.GroupHeading, { children: group })) : null, rows(priceFirst(ordered.filter(option => (option.group ?? '') === group)))] }, group || 'ungrouped')))
                         : rows(ordered) }) })] }));
 }
 export default CodeSandboxEnvironmentSelect;

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

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { IMarkdownParser, IRenderMime } from '@jupyterlab/rendermime';
 import type { IRemoteServicesManager } from '../../runtimes';
 import type { ICodeSandboxSnapshot, IRuntimeDesc } from '../../models';

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

@@ -1,8 +1,4 @@
 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, Spinner, Text, TextInput, ToggleSwitch, } from '@primer/react';
@@ -14,6 +10,7 @@ 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 { codeSandboxEnvironmentOptions, codeSandboxEnvironmentVersion, firstLaunchableCodeSandboxEnvironment, } from './codeSandboxEnvironments';
 import { getCodeSandboxGivenName, listCodeSandboxGivenNames, nextCodeSandboxGivenName, setCodeSandboxGivenName, } from './CodeSandboxNames';
 import { iamStore, runtimesStore, useCoreStore, useIAMStore, } from '../../state/substates';
 import { createRuntime as createRuntimeRecord } from '../../runtimes/actions';
@@ -91,27 +88,31 @@ export function CodeSandboxLauncher(props) {
         }));
     }, [jupyterAvailable]);
     const LOCAL_PREFIX = 'local:';
+    /** Who is looking, which is what tells your environments from your organizations'. */
+    const viewer = useMemo(() => ({ uid: user?.uid, handle: user?.handle }), [user]);
     /*
      * 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.
+     *
+     * The environments come through `codeSandboxEnvironments`, so they read
+     * here exactly as they read in the picker: grouped as yours, your
+     * organizations' and the platform's, with the version and size class each
+     * runs, and disabled where there is nothing built to launch (E1-19).
      */
     const environmentOptions = useMemo(() => [
-        ...environments.map(spec => ({
-            key: spec.name,
-            title: spec.title || spec.name,
-            name: spec.name,
+        ...codeSandboxEnvironmentOptions(environments, viewer, spec => ({
             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),
+            group: 'This Jupyter Server',
         })),
-    ], [environments, localSpecs]);
+    ], [environments, localSpecs, viewer]);
     const localSpecOf = (value) => value.startsWith(LOCAL_PREFIX)
         ? localSpecs.find(spec => spec.name === value.slice(LOCAL_PREFIX.length))
         : undefined;
@@ -128,7 +129,12 @@ export function CodeSandboxLauncher(props) {
     }
     const jupyterReactStore = useJupyterReactStore();
     const jupyterLabAdapter = jupyterReactStore.jupyterLabAdapter;
-    const [selection, setSelection] = useState((kernelSnapshot?.environment || environments[0]?.name) ?? '');
+    const [selection, setSelection] = useState(
+    // Never an environment that cannot be launched — one whose variant was
+    // never built — or the dialog would open on a choice it must refuse.
+    (kernelSnapshot?.environment ||
+        firstLaunchableCodeSandboxEnvironment(environments)?.name) ??
+        '');
     /*
      * Something is always selected.
      *
@@ -159,10 +165,10 @@ export function CodeSandboxLauncher(props) {
         ...listCodeSandboxGivenNames(),
     ], [manager]);
     const givenNameFor = useCallback((spec) => nextCodeSandboxGivenName(spec?.runtime?.givenNameTemplate || spec?.title || '', takenGivenNames()), [takenGivenNames]);
-    const [runtimeName, setRuntimeName] = useState(() => givenNameFor(environments[0]));
+    const [runtimeName, setRuntimeName] = useState(() => givenNameFor(firstLaunchableCodeSandboxEnvironment(environments)));
     // Whether the runtim name has been changed by the user or not
     const [hasCustomRuntimeName, setHasCustomRuntimeName] = useState(false);
-    const [userStorage, setUserStorage] = useState(false);
+    const [homeFolder, setHomeFolder] = useState(false);
     const [openExample, setOpenExample] = useState(false);
     const [waitingForRuntime, setWaitingForRuntime] = useState(false);
     const [error, setError] = useState();
@@ -231,6 +237,17 @@ export function CodeSandboxLauncher(props) {
             setError(undefined);
             setWaitingForRuntime(shouldStartRuntime);
             const spec = environments.find(s => s.name === selection);
+            /*
+             * The version the dropdown showed is the version that launches.
+             *
+             * A user environment's entry says "v3", and sending that pins it: a
+             * promotion made while this dialog was open cannot change what the
+             * person accepted. A platform environment has no version, and the
+             * request is then the one it has always been (PLAN_ENV.md, E1-19).
+             */
+            const environmentVersion = spec
+                ? codeSandboxEnvironmentVersion(spec)
+                : undefined;
             const desc = {
                 name: selection,
                 language: spec?.language ?? '',
@@ -242,8 +259,8 @@ export function CodeSandboxLauncher(props) {
             if (startRuntime === 'defer') {
                 desc.params['creditsLimit'] = creditsLimit;
             }
-            if (userStorage) {
-                desc.params['capabilities'] = ['user_storage'];
+            if (homeFolder) {
+                desc.params['capabilities'] = ['home-folder'];
             }
             let success = true;
             const provider = codeSandboxVariantOf(spec?.owner);
@@ -259,6 +276,7 @@ export function CodeSandboxLauncher(props) {
                 try {
                     await createRuntimeRecord({
                         environmentName: selection,
+                        environmentVersion,
                         type: 'notebook',
                         givenName: runtimeName,
                         creditsLimit,
@@ -284,10 +302,11 @@ export function CodeSandboxLauncher(props) {
                     try {
                         const connection = await manager.runtimesManager.startNew({
                             environmentName: selection,
+                            environmentVersion,
                             type: 'notebook',
                             givenName: runtimeName,
                             creditsLimit: creditsLimit,
-                            capabilities: userStorage ? ['user_storage'] : undefined,
+                            capabilities: homeFolder ? ['home-folder'] : undefined,
                             snapshot: kernelSnapshot?.id,
                         }, {
                             username: user?.handle,
@@ -368,7 +387,7 @@ export function CodeSandboxLauncher(props) {
         startRuntime,
         runtimeName,
         onSubmit,
-        userStorage,
+        homeFolder,
         openExample,
         jupyterLabAdapter,
         timeLimit,
@@ -433,11 +452,15 @@ export function CodeSandboxLauncher(props) {
                 , { 
                     // 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
+                    withReservation: !!startRuntime && !isLocalSelection, withHomeFolder: !isLocalSelection, burningRate: burningRate, timeLimit: timeLimit, onTimeChange: setTimeLimit, max: effectiveMaxMinutes, 
+                    // Nothing to reserve or store until an environment is chosen.
+                    disabled: outOfCredits || !selection, storageDisabled: !selection, error: outOfCredits ? 'You must add credits to your account.' : undefined, addCredits: navigate
                         ? () => {
                             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 &&
+                        : undefined, homeFolder: homeFolder, onHomeFolderToggle: () => setHomeFolder(current => !current) }), _jsxs(FormControl, { sx: { paddingTop: '10px' }, children: [_jsx(FormControl.Label, { children: "Given Name" }), _jsx(TextInput, { name: "name", value: runtimeName, onChange: handleKernelNameChange, 
+                            // A sandbox is named only once there is one to name.
+                            disabled: !selection, 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.js

@@ -2,10 +2,6 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
 /**
  * The given name of a code sandbox of a Jupyter Server or of the browser.
  *
@@ -155,8 +151,13 @@ export function pruneCodeSandboxGivenNames(runningKernelIds) {
  */
 function asGivenName(base) {
     const stripped = (base ?? '')
-        // Pictographs, their skin tones, their joiners and their selectors.
-        .replace(/[\u{1F000}-\u{1FAFF}\u{2190}-\u{2BFF}\u{FE00}-\u{FE0F}\u{200D}]/gu, ' ')
+        /*
+         * Pictographs, their skin tones, their joiners and their selectors.
+         * Split into three alternatives rather than one class: a class whose next
+         * range starts on a combining mark (the variation selectors) reads to
+         * `no-misleading-character-class` as a base character followed by a mark.
+         */
+        .replace(/[\u{1F000}-\u{1FAFF}\u{2190}-\u{2BFF}]|[\u{FE00}-\u{FE0F}]|\u{200D}/gu, ' ')
         .replace(/\s+/g, ' ')
         .trim();
     return stripped || 'Code Sandbox';