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

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

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

@@ -0,0 +1,81 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { ActionList, ActionMenu, Box, Label, Link, Text } from '@primer/react';
+/**
+ * The labels of an option, on one line: cost, name, provider, where.
+ *
+ * The price is the widest of them — "0.0008 credits/second" outruns the
+ * name, the provider and the location together — so the room comes from the
+ * overlay rather than from a second line: see `overlayWidth`.
+ */
+function OptionLabels(props) {
+    const { option } = props;
+    return (_jsxs(Box, { as: "span", sx: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 1,
+            whiteSpace: 'nowrap',
+        }, children: [option.burningRate ? (_jsxs(Label, { size: "small", variant: "sponsors", children: [option.burningRate, " credits/second"] })) : null, option.gpu ? (_jsx(Label, { size: "small", variant: "success", children: "GPU" })) : null, option.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;
+    const selected = options.find(option => option.key === selectedKey);
+    /*
+     * What costs credits leads.
+     *
+     * The sandboxes of the platform and of its providers are the ones worth
+     * choosing between — a kernel of this server is the fallback, always
+     * there and free — so they are read first rather than found under a list
+     * of local specifications. A stable partition: within each half the order
+     * given by the caller is kept.
+     */
+    const priceFirst = (subset) => [
+        ...subset.filter(option => option.burningRate),
+        ...subset.filter(option => !option.burningRate),
+    ];
+    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(options.map(option => option.group ?? '')))
+        : [];
+    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.
+                sx: {
+                    // The content of a Primer button is a grid whose middle track is
+                    // content-sized, which hugs the labels against the title. The
+                    // template areas stay "leadingVisual text trailingVisual": only
+                    // that track changes, from content-sized to 1fr.
+                    '& [data-component="buttonContent"]': {
+                        flex: 1,
+                        gridTemplateColumns: 'min-content minmax(0, 1fr) min-content',
+                    },
+                    '& [data-component="text"]': { width: '100%', textAlign: 'left' },
+                }, children: selected ? (_jsxs(Box, { as: "span", sx: {
+                        display: 'flex',
+                        width: '100%',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        gap: 2,
+                    }, children: [_jsx(Text, { children: selected.title }), _jsx(OptionLabels, { option: selected })] })) : (placeholder) }), _jsx(ActionMenu.Overlay, { width: overlayWidth, children: _jsx(ActionList, { selectionVariant: "single", children: grouped
+                        ? groups.map(group => (_jsxs(ActionList.Group, { children: [group ? (_jsx(ActionList.GroupHeading, { children: group })) : null, rows(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';
@@ -46,6 +47,17 @@ export interface ICodeSandboxLauncherProps {
      * Upgrade subscription URL
      */
     upgradeSubscription?: string;
+    /**
+     * Where "Add credits" navigates.
+     *
+     * ABSOLUTE, always: a relative route resolves against the CURRENT
+     * location — opened from `/…/code-sandboxes`, `usage` landed on
+     * `code-sandboxes/usage` and a `:sandboxId` route swallowed it as a
+     * sandbox called "usage". The default is the web application's `/plans`
+     * (which redirects to the plan overview); a nested surface passes its
+     * own (e.g. `/datalayer/jupyter-kernels/usage/plans`).
+     */
+    usageRoute?: string;
     /**
      * Optional submit button label override.
      */