feat(FR-2801): pre-populate deployment launcher form fields from deployment preset (#7224)

Resolves #7223 ([FR-2801](https://lablup.atlassian.net/browse/FR-2801))

## Summary
- Add `launcherFormValues` field to `QuickDeployInput` in `useDeploymentLauncher`, serialized to the `formValues` URL parameter when navigating to the launcher
- Extend the GraphQL fragment/query in `ModelCardDrawer` and `VFolderDeployModal` to fetch `runtimeVariant`, `execution`, `cluster`, and `deploymentDefaults` fields from deployment presets
- Pass all preset values (startup command, runtime variant, cluster mode, cluster size, replica count, open-to-public) via `launcherFormValues` when the user clicks "Configure and Deploy" from either entry point

[FR-2801]: https://lablup.atlassian.net/browse/FR-2801?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: agatha197

react/src/components/ModelCardDrawer.tsx

@@ -102,6 +102,21 @@ const ModelCardDrawer: React.FC<ModelCardDrawerProps> = ({
               description
               rank
               runtimeVariantId
+              runtimeVariant {
+                name
+              }
+              execution {
+                imageId
+                startupCommand
+              }
+              cluster {
+                clusterMode
+                clusterSize
+              }
+              deploymentDefaults {
+                openToPublic
+                replicaCount
+              }
             }
           }
         }
@@ -181,12 +196,41 @@ const ModelCardDrawer: React.FC<ModelCardDrawerProps> = ({
                     {
                       key: 'configure',
                       label: t('modelStore.QuickDeployDetailed'),
+                      // TODO(FR-2762): Always uses the top-ranked preset
+                      // (presets[0]). If a model card has multiple presets
+                      // with different runtime variants, the launcher is
+                      // always pre-filled with the first one (e.g. vllm).
+                      // Consider letting the user pick a preset when
+                      // multiple are available.
                       onClick: () => {
                         const modelFolderId = toLocalId(
                           modelCard.vfolder?.id ?? '',
                         );
                         if (!modelFolderId) return;
-                        openLauncher({ modelFolderId });
+                        openLauncher({
+                          modelFolderId,
+                          launcherFormValues: {
+                            imageId:
+                              presets[0]?.execution?.imageId ?? undefined,
+                            startCommand:
+                              presets[0]?.execution?.startupCommand ??
+                              undefined,
+                            runtimeVariant:
+                              presets[0]?.runtimeVariant?.name ?? undefined,
+                            runtimeVariantId:
+                              presets[0]?.runtimeVariantId ?? undefined,
+                            clusterMode:
+                              presets[0]?.cluster?.clusterMode ?? undefined,
+                            clusterSize:
+                              presets[0]?.cluster?.clusterSize ?? undefined,
+                            desiredReplicaCount:
+                              presets[0]?.deploymentDefaults?.replicaCount ??
+                              undefined,
+                            openToPublic:
+                              presets[0]?.deploymentDefaults?.openToPublic ??
+                              undefined,
+                          },
+                        });
                       },
                     },
                   ],

react/src/components/VFolderDeployModal.tsx

@@ -134,6 +134,21 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
                 description
                 rank
                 runtimeVariantId
+                runtimeVariant {
+                  name
+                }
+                execution {
+                  imageId
+                  startupCommand
+                }
+                cluster {
+                  clusterMode
+                  clusterSize
+                }
+                deploymentDefaults {
+                  openToPublic
+                  replicaCount
+                }
                 ...DeploymentPresetDetailContentFragment
               }
             }
@@ -468,10 +483,34 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
                     key: 'configure',
                     label: t('modelStore.QuickDeployDetailed'),
                     onClick: () => {
+                      const selectedPreset = availablePresets.find(
+                        (p) => toLocalId(p.id) === effectivePresetId,
+                      );
                       openLauncher({
                         modelFolderId: vfolderId,
                         resourceGroup: effectiveResourceGroup,
                         revisionPresetId: effectivePresetId,
+                        launcherFormValues: {
+                          imageId:
+                            selectedPreset?.execution?.imageId ?? undefined,
+                          startCommand:
+                            selectedPreset?.execution?.startupCommand ??
+                            undefined,
+                          runtimeVariant:
+                            selectedPreset?.runtimeVariant?.name ?? undefined,
+                          runtimeVariantId:
+                            selectedPreset?.runtimeVariantId ?? undefined,
+                          clusterMode:
+                            selectedPreset?.cluster?.clusterMode ?? undefined,
+                          clusterSize:
+                            selectedPreset?.cluster?.clusterSize ?? undefined,
+                          desiredReplicaCount:
+                            selectedPreset?.deploymentDefaults?.replicaCount ??
+                            undefined,
+                          openToPublic:
+                            selectedPreset?.deploymentDefaults?.openToPublic ??
+                            undefined,
+                        },
                       });
                     },
                   },

react/src/hooks/useDeploymentLauncher.ts

@@ -3,6 +3,7 @@
  Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
  */
 import { useDeploymentLauncherDeployVFolderMutation } from '../__generated__/useDeploymentLauncherDeployVFolderMutation.graphql';
+import { useDeploymentLauncherImageCanonicalNameQuery } from '../__generated__/useDeploymentLauncherImageCanonicalNameQuery.graphql';
 import { useSuspendedBackendaiClient, useWebUINavigate } from '../hooks';
 import { useSetBAINotification } from '../hooks/useBAINotification';
 import {
@@ -12,7 +13,12 @@ import {
 import { useBAILogger } from 'backend.ai-ui';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { graphql, useMutation } from 'react-relay';
+import {
+  fetchQuery,
+  graphql,
+  useMutation,
+  useRelayEnvironment,
+} from 'react-relay';
 
 export interface QuickDeployInput {
   /** Virtual folder (model folder) id that backs the deployment. */
@@ -25,6 +31,22 @@ export interface QuickDeployInput {
   replicas?: number;
   /** Public endpoint toggle (default: false). */
   openToPublic?: boolean;
+  /** Pre-populate form fields in the launcher from a preset (create mode only). */
+  launcherFormValues?: {
+    startCommand?: string;
+    runtimeVariant?: string;
+    runtimeVariantId?: string;
+    clusterMode?: string;
+    clusterSize?: number;
+    desiredReplicaCount?: number;
+    openToPublic?: boolean;
+    /**
+     * Image UUID from the preset's execution spec. Resolved to the canonical
+     * name string (registry/ns:tag@arch) before being serialized into
+     * `environments.version` in the URL — the launcher's form field name.
+     */
+    imageId?: string;
+  };
 }
 
 export interface DeployInstantlyResult {
@@ -42,9 +64,19 @@ export interface DeployInstantlyResult {
  * - `openLauncher`: navigates to `/deployments/start?model=<folderId>` so the
  *   user can configure a deployment in the full launcher UI.
  */
+const imageCanonicalNameQuery = graphql`
+  query useDeploymentLauncherImageCanonicalNameQuery($id: ID!) {
+    imageV2(id: $id) {
+      identity {
+        canonicalName
+      }
+    }
+  }
+`;
+
 export const useDeploymentLauncher = (): {
   deployInstantly: (input: QuickDeployInput) => Promise<DeployInstantlyResult>;
-  openLauncher: (input: QuickDeployInput) => void;
+  openLauncher: (input: QuickDeployInput) => Promise<void>;
   isDeploying: boolean;
   supportsQuickDeploy: boolean;
 } => {
@@ -58,6 +90,8 @@ export const useDeploymentLauncher = (): {
   const { upsertNotification } = useSetBAINotification();
   const { logger } = useBAILogger();
 
+  const relayEnvironment = useRelayEnvironment();
+
   const [isDeploying, setIsDeploying] = useState<boolean>(false);
 
   const [commitDeployVFolder] =
@@ -185,11 +219,44 @@ export const useDeploymentLauncher = (): {
     });
   };
 
-  const openLauncher = (input: QuickDeployInput): void => {
+  const openLauncher = async (input: QuickDeployInput): Promise<void> => {
     const params = new URLSearchParams({ model: input.modelFolderId });
     if (input.resourceGroup) params.set('resourceGroup', input.resourceGroup);
     if (input.revisionPresetId)
       params.set('revisionPresetId', input.revisionPresetId);
+
+    if (
+      input.launcherFormValues &&
+      Object.keys(input.launcherFormValues).length > 0
+    ) {
+      const { imageId, ...restFormValues } = input.launcherFormValues;
+      const urlFormValues: Record<string, unknown> = { ...restFormValues };
+
+      if (imageId) {
+        try {
+          const result =
+            await fetchQuery<useDeploymentLauncherImageCanonicalNameQuery>(
+              relayEnvironment,
+              imageCanonicalNameQuery,
+              { id: imageId },
+              { fetchPolicy: 'store-or-network' },
+            ).toPromise();
+          const canonicalName = result?.imageV2?.identity?.canonicalName;
+          if (canonicalName) {
+            urlFormValues.environments = { version: canonicalName };
+          }
+        } catch (e) {
+          logger.warn(
+            '[useDeploymentLauncher] Failed to resolve imageId to canonical name',
+            e,
+          );
+        }
+      }
+
+      if (Object.keys(urlFormValues).length > 0)
+        params.set('formValues', JSON.stringify(urlFormValues));
+    }
+
     navigate(`/deployments/start?${params.toString()}`);
   };