@datalayer/agent-runtimes 1.0.29 → 1.3.11

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';
@@ -61,6 +62,14 @@ export interface ICodeSandboxLauncherProps {
      * Optional submit button label override.
      */
     submitLabel?: string;
+    /**
+     * A published environment to offer and select: the version uid of its
+     * publication, as the Library page that sent the reader here names it.
+     * Nobody's listing holds another account's environment, so it is read from
+     * the publication, offered under *Library* and priced by the rate the
+     * publication carries (D-12, E2-19).
+     */
+    libraryVersionUid?: string;
 }
 /**
  * The launcher of a new code sandbox.