Add GPU toggle, env password handling, and wizard polish

peterschmidt85 · cursoragent · peterschmidt85 · commit de850ef9bfc9 · 2026-02-24T13:57:59.000+01:00
Resources step: GPU toggle (off by default) inside OfferList header
with disabled prop to skip API/hide content when off. Generates
resources.gpu:0 when disabled, passes backends only from user filter.

Env params: respect $random-password, password input with copy-before-
proceed validation, info panel, dynamic env variable name in YAML.

Also: fix useFilters permanentFilters dep, add onChangeBackendFilter
callback, FormToggle errorText support, configuration info panel with
concept links.

Co-authored-by: Cursor &lt;cursoragent@cursor.com&gt;
diff --git a/frontend/src/components/form/Toogle/index.tsx b/frontend/src/components/form/Toogle/index.tsx
@@ -23,6 +23,7 @@ export const FormToggle = <T extends FieldValues>({
     onChange: onChangeProp,
     toggleDescription,
     toggleInfo,
+    errorText: externalErrorText,
     ...props
 }: FormToggleProps<T>) => {
     return (
@@ -40,7 +41,7 @@ export const FormToggle = <T extends FieldValues>({
                         stretch={stretch}
                         constraintText={constraintText}
                         secondaryControl={secondaryControl}
-                        errorText={error?.message}
+                        errorText={error?.message || externalErrorText}
                     >
                         {leftContent}
 
diff --git a/frontend/src/components/form/Toogle/types.ts b/frontend/src/components/form/Toogle/types.ts
@@ -4,7 +4,7 @@ import { FormFieldProps } from '@cloudscape-design/components/form-field';
 import { ToggleProps } from '@cloudscape-design/components/toggle';
 
 export type FormToggleProps<T extends FieldValues> = Omit<ToggleProps, 'value' | 'checked' | 'name'> &
-    Omit<FormFieldProps, 'errorText'> &
+    FormFieldProps &
     Pick<ControllerProps<T>, 'control' | 'name' | 'rules' | 'defaultValue'> & {
         toggleDescription?: ReactNode;
         leftContent?: ReactNode;
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
@@ -486,6 +486,8 @@
                 "template_loading": "Loading options",
                 "template_placeholder": "Select a project to select a template",
                 "template_card_type": "Type",
+                "gpu": "GPU",
+                "gpu_description": "Enable to select a GPU offer. Disable to run without a GPU.",
                 "offer": "Offer",
                 "offer_description": "Select an offer for the run.",
                 "name": "Name",
diff --git a/frontend/src/pages/Offers/List/hooks/useFilters.ts b/frontend/src/pages/Offers/List/hooks/useFilters.ts
@@ -241,7 +241,7 @@ export const useFilters = ({ gpus, withSearchParams = true, permanentFilters = {
             ...params,
             ...permanentFilters,
         };
-    }, [propertyFilterQuery]);
+    }, [propertyFilterQuery, permanentFilters]);
 
     useEffect(() => {
         if (!projectNameIsChecked.current && projectOptions.length) {
diff --git a/frontend/src/pages/Offers/List/index.tsx b/frontend/src/pages/Offers/List/index.tsx
@@ -69,12 +69,16 @@ const getRequestParams = ({
 type OfferListProps = Pick<CardsProps, 'variant' | 'header' | 'onSelectionChange' | 'selectedItems' | 'selectionType'> &
     Pick<UseFiltersArgs, 'permanentFilters' | 'defaultFilters'> & {
         withSearchParams?: boolean;
+        disabled?: boolean;
         onChangeProjectName?: (value: string) => void;
+        onChangeBackendFilter?: (backends: string[]) => void;
     };
 
 export const OfferList: React.FC<OfferListProps> = ({
     withSearchParams,
+    disabled,
     onChangeProjectName,
+    onChangeBackendFilter,
     permanentFilters,
     defaultFilters,
     ...props
@@ -87,7 +91,7 @@ export const OfferList: React.FC<OfferListProps> = ({
         // @ts-expect-error
         requestParams,
         {
-            skip: !requestParams || !requestParams['project_name'] || !requestParams['group_by']?.length,
+            skip: disabled || !requestParams || !requestParams['project_name'] || !requestParams['group_by']?.length,
         },
     );
 
@@ -118,6 +122,11 @@ export const OfferList: React.FC<OfferListProps> = ({
         onChangeProjectName?.(filteringRequestParams.project_name ?? '');
     }, [filteringRequestParams.project_name]);
 
+    useEffect(() => {
+        const backend = filteringRequestParams.backend;
+        onChangeBackendFilter?.(backend ? (Array.isArray(backend) ? backend : [backend]) : []);
+    }, [filteringRequestParams.backend]);
+
     const { renderEmptyMessage, renderNoMatchMessage } = useEmptyMessages({
         clearFilter,
         projectNameSelected: Boolean(requestParams?.['project_name']),
@@ -208,15 +217,15 @@ export const OfferList: React.FC<OfferListProps> = ({
             {...collectionProps}
             {...props}
             entireCardClickable
-            items={items}
+            items={disabled ? [] : items}
             cardDefinition={{
                 header: (gpu) => gpu.name,
                 sections,
             }}
-            loading={isLoading || isFetching}
+            loading={!disabled && (isLoading || isFetching)}
             loadingText={t('common.loading')}
             stickyHeader={true}
-            filter={
+            filter={disabled ? undefined : (
                 <div className={styles.selectFilters}>
                     <div className={styles.propertyFilter}>
                         <PropertyFilter
@@ -247,7 +256,7 @@ export const OfferList: React.FC<OfferListProps> = ({
                         />
                     </div>
                 </div>
-            }
+            )}
         />
     );
 };
diff --git a/frontend/src/pages/Runs/CreateDevEnvironment/constants.tsx b/frontend/src/pages/Runs/CreateDevEnvironment/constants.tsx
@@ -51,6 +51,7 @@ export const PASSWORD_INFO = {
 export const FORM_FIELD_NAMES = {
     project: 'project',
     template: 'template',
+    gpu_enabled: 'gpu_enabled',
     offer: 'offer',
     name: 'name',
     ide: 'ide',
diff --git a/frontend/src/pages/Runs/CreateDevEnvironment/hooks/useGenerateYaml.ts b/frontend/src/pages/Runs/CreateDevEnvironment/hooks/useGenerateYaml.ts
@@ -9,11 +9,14 @@ export type UseGenerateYamlArgs = {
     formValues: IRunEnvironmentFormValues;
     configuration?: ITemplate['configuration'];
     envParam?: TTemplateParam;
+    backends?: string[];
 };
 
-export const useGenerateYaml = ({ formValues, configuration, envParam }: UseGenerateYamlArgs) => {
+export const useGenerateYaml = ({ formValues, configuration, envParam, backends }: UseGenerateYamlArgs) => {
     return useMemo(() => {
-        const { name, ide, image, python, offer, docker, repo_url, repo_path, working_dir, password } = formValues;
+        const { name, ide, image, python, offer, docker, repo_url, repo_path, working_dir, password, gpu_enabled } =
+            formValues;
+        const gpuEnabled = gpu_enabled === true;
 
         const envEntries: string[] = [];
         if (envParam?.name && password) {
@@ -33,17 +36,18 @@ export const useGenerateYaml = ({ formValues, configuration, envParam }: UseGene
             ...(python ? { python } : {}),
             ...(envEntries.length > 0 ? { env: envEntries } : {}),
 
-            ...(offer
+            ...(gpuEnabled && offer
                 ? {
                       resources: {
                           gpu: `${offer.name}:${round(convertMiBToGB(offer.memory_mib))}GB:${renderRange(offer.count)}`,
                       },
 
-                      backends: offer.backends,
+                      ...(backends && backends.length > 0 ? { backends } : {}),
                       ...(offer.spot.length === 1 ? { spot_policy: offer.spot[0] } : {}),
                       ...(offer.spot.length > 1 ? { spot_policy: 'auto' } : {}),
                   }
                 : {}),
+            ...(!gpuEnabled ? { resources: { gpu: 0 } } : {}),
 
             ...(repo_url || repo_path
                 ? {
@@ -53,5 +57,5 @@ export const useGenerateYaml = ({ formValues, configuration, envParam }: UseGene
 
             ...(working_dir ? { working_dir } : {}),
         });
-    }, [formValues, configuration, envParam]);
+    }, [formValues, configuration, envParam, backends]);
 };
diff --git a/frontend/src/pages/Runs/CreateDevEnvironment/hooks/useValidationResolver.ts b/frontend/src/pages/Runs/CreateDevEnvironment/hooks/useValidationResolver.ts
@@ -33,7 +33,10 @@ export const useYupValidationResolver = (template?: ITemplate) => {
                     case 'resources':
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                         // @ts-expect-error
-                        schema['offer'] = yup.object().required(requiredFieldError);
+                        schema['offer'] = yup.object().when('gpu_enabled', {
+                            is: true,
+                            then: yup.object().required(requiredFieldError),
+                        });
                         break;
 
                     case 'python_or_docker':
diff --git a/frontend/src/pages/Runs/CreateDevEnvironment/index.tsx b/frontend/src/pages/Runs/CreateDevEnvironment/index.tsx
@@ -13,6 +13,7 @@ import {
     FormField,
     FormSelect,
     FormSelectProps,
+    FormToggle,
     InfoLink,
     SpaceBetween,
     Wizard,
@@ -64,6 +65,7 @@ export const CreateDevEnvironment: React.FC = () => {
     const [activeStepIndex, setActiveStepIndex] = useState(0);
     const [selectedOffers, setSelectedOffers] = useState<IGpu[]>([]);
     const [selectedTemplate, setSelectedTemplate] = useState<ITemplate | undefined>();
+    const [selectedBackends, setSelectedBackends] = useState<string[]>([]);
     const { projectOptions, isLoadingProjectOptions } = useProjectFilter({ localStorePrefix: 'run-env-list-projects' });
 
     const [applyRun, { isLoading: isApplying }] = useApplyRunMutation();
@@ -234,7 +236,12 @@ export const CreateDevEnvironment: React.FC = () => {
     };
 
     const envParam = selectedTemplate?.parameters?.find((p) => p.type === 'env');
-    const yaml = useGenerateYaml({ formValues, configuration: selectedTemplate?.configuration, envParam });
+    const yaml = useGenerateYaml({
+        formValues,
+        configuration: selectedTemplate?.configuration,
+        envParam,
+        backends: selectedBackends,
+    });
 
     useEffect(() => {
         setValue(FORM_FIELD_NAMES.config_yaml, yaml);
@@ -324,24 +331,30 @@ export const CreateDevEnvironment: React.FC = () => {
                     {
                         title: 'Resources',
                         content: (
-                            <>
-                                <FormField
-                                    label={t('runs.dev_env.wizard.offer')}
-                                    description={t('runs.dev_env.wizard.offer_description')}
-                                    errorText={formState.errors.offer?.message}
-                                />
-
-                                {formState.errors.offer?.message && <br />}
-
-                                <OfferList
-                                    selectionType="single"
-                                    withSearchParams={false}
-                                    selectedItems={selectedOffers}
-                                    onSelectionChange={onChangeOffer}
-                                    permanentFilters={{ project_name: formValues.project ?? '' }}
-                                    defaultFilters={{ spot_policy: 'on-demand' }}
-                                />
-                            </>
+                            <OfferList
+                                selectionType="single"
+                                disabled={!formValues.gpu_enabled}
+                                withSearchParams={false}
+                                selectedItems={selectedOffers}
+                                onSelectionChange={onChangeOffer}
+                                onChangeBackendFilter={setSelectedBackends}
+                                permanentFilters={{ project_name: formValues.project ?? '' }}
+                                defaultFilters={{ spot_policy: 'on-demand' }}
+                                header={
+                                    <FormToggle
+                                        control={control}
+                                        defaultValue={false}
+                                        toggleLabel={t('runs.dev_env.wizard.gpu')}
+                                        toggleDescription={t('runs.dev_env.wizard.gpu_description')}
+                                        errorText={
+                                            formValues.gpu_enabled
+                                                ? formState.errors.offer?.message
+                                                : undefined
+                                        }
+                                        name={FORM_FIELD_NAMES.gpu_enabled}
+                                    />
+                                }
+                            />
                         ),
                     },
 
diff --git a/frontend/src/pages/Runs/CreateDevEnvironment/types.ts b/frontend/src/pages/Runs/CreateDevEnvironment/types.ts
@@ -1,6 +1,7 @@
 export interface IRunEnvironmentFormValues {
     project: IProject['project_name'];
     template: string[];
+    gpu_enabled?: boolean;
     offer: IGpu;
     name: string;
     ide: 'cursor' | 'vscode' | 'windsurf' | 'coder';
