fix(FR-2684): fix review summary showing all '-' for pre-filled launcher

Two root causes fixed:

1. ReviewSummary had 'use memo' — the React Compiler memoized it on the
   stable `form` reference, so shouldUpdate re-renders were bailed out
   even after form.setFieldsValue() set the pre-fill values. Removed
   'use memo' so shouldUpdate correctly re-renders the summary.

2. Pre-fill params (resourceGroup, resourcePresetId) were read in
   DeploymentLauncherCreateView via searchParams and passed as props,
   which was fragile across Suspense boundaries. Now DeploymentLauncherPageContent
   reads all pre-fill params directly via nuqs useQueryStates so nuqs
   tracks and preserves them across step navigation URL updates.
   preFilledValues prop removed; prop drilling eliminated.

Author: agatha197

react/src/components/DeploymentLauncherPageContent.tsx

@@ -151,7 +151,7 @@ const ModelCardDrawer: React.FC<ModelCardDrawerProps> = ({
             // Flow 7 (FR-2684): [Deploy | ▼] split button backed by
             // useDeploymentLauncher. Primary action fires Quick Deploy via
             // createModelDeployment; the dropdown item navigates to the
-            // full launcher page at /deployments/new?model=<folderId>.
+            // full launcher page at /deployments/start?model=<folderId>.
             <Space.Compact>
               <BAIButton
                 type="primary"

react/src/components/ModelCardDrawer.tsx

@@ -19,7 +19,7 @@ import {
   BAIResourceNumberWithIcon,
 } from 'backend.ai-ui';
 import * as _ from 'lodash-es';
-import React, { useTransition } from 'react';
+import React, { useEffect, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery } from 'react-relay';
 
@@ -45,12 +45,14 @@ export interface ResourcePresetSelectProps extends Omit<
   showMinimumRequired?: boolean;
   showCustom?: boolean;
   resourceGroup?: string;
+  autoSelectDefault?: boolean;
 }
 const ResourcePresetSelect: React.FC<ResourcePresetSelectProps> = ({
   allocatablePresetNames,
   showCustom,
   showMinimumRequired,
   resourceGroup,
+  autoSelectDefault,
   ...selectProps
 }) => {
   const [fetchKey, updateFetchKey] = useUpdatableState('first');
@@ -98,6 +100,25 @@ const ResourcePresetSelect: React.FC<ResourcePresetSelectProps> = ({
       )
     : resource_presets;
 
+  const firstAvailablePresetName = [...(resourcePresets ?? [])]
+    .filter(
+      (p): p is NonNullable<typeof p> =>
+        p != null &&
+        (!allocatablePresetNames ||
+          allocatablePresetNames.includes(p.name ?? '')),
+    )
+    .sort((a, b) => localeCompare(a.name ?? '', b.name ?? ''))[0]?.name;
+
+  useEffect(() => {
+    if (autoSelectDefault && !controllableValue && firstAvailablePresetName) {
+      setControllableValue(firstAvailablePresetName, {
+        value: firstAvailablePresetName,
+        selectedLabel: firstAvailablePresetName,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoSelectDefault]);
+
   return (
     <Select
       loading={isPendingUpdate}
@@ -151,6 +172,7 @@ const ResourcePresetSelect: React.FC<ResourcePresetSelectProps> = ({
               : undefined;
             return {
               value: preset?.name,
+              selectedLabel: preset?.name,
               label: (
                 <BAIFlex direction="row" justify="between" gap={'xs'}>
                   {preset?.name}
@@ -206,11 +228,7 @@ const ResourcePresetSelect: React.FC<ResourcePresetSelectProps> = ({
       {...selectProps}
       value={controllableValue}
       onChange={setControllableValue}
-      optionLabelProp={
-        _.includes(['custom', 'minimum-required'], controllableValue)
-          ? 'selectedLabel'
-          : 'label'
-      }
+      optionLabelProp="selectedLabel"
       onOpenChange={(open) => {
         selectProps.onOpenChange && selectProps.onOpenChange(open);
         if (open) {

react/src/components/ResourcePresetSelect.tsx

@@ -30,7 +30,7 @@ const SessionLauncherValidationTour: React.FC<
       target: () =>
         (
           document.getElementsByClassName('bai-card-error')?.[0] as HTMLElement
-        )?.querySelector('.ant-card-extra') as HTMLElement,
+        )?.querySelector('.ant-card-head') as HTMLElement,
     },
     {
       title: t('tourGuide.neoSessionLauncher.ValidationErrorTitle'),

react/src/components/SessionLauncherErrorTourProps.tsx

@@ -380,7 +380,7 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
         {supportsQuickDeploy && vfolderId ? (
           // Flow 7 (FR-2684): [Deploy | ▼] split button. Primary fires
           // deployVfolderV2 with selected preset/resource group; the dropdown
-          // item navigates to the full launcher at /deployments/new?model=<id>.
+          // item navigates to the full launcher at /deployments/start?model=<id>.
           <Space.Compact>
             <BAIButton
               type="primary"
@@ -407,7 +407,10 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
                       openLauncher({
                         modelFolderId: vfolderId,
                         resourceGroup: effectiveResourceGroup,
-                        resourcePreset: effectivePresetId,
+                        // Pass name so ResourcePresetSelect can match it
+                        resourcePreset: availablePresets.find(
+                          (p) => toLocalId(p.id) === effectivePresetId,
+                        )?.name,
                       });
                     },
                   },

react/src/components/VFolderDeployModal.tsx

@@ -44,11 +44,11 @@ const VFolderLazyView: React.FC<VFolderLazyViewProps> = ({
           {clickable ? (
             <Typography.Link
               onClick={() => {
+                const searchParams = new URLSearchParams(location.search);
+                searchParams.set('folder', toLocalId(vfolder_node.id));
                 webuiNavigate({
                   pathname: location.pathname,
-                  search: new URLSearchParams({
-                    folder: toLocalId(vfolder_node.id),
-                  }).toString(),
+                  search: searchParams.toString(),
                 });
               }}
             >

react/src/components/VFolderLazyView.tsx

@@ -14,6 +14,7 @@ import { CustomThemeConfig } from 'src/helper/customThemeConfig';
 
 export interface UserSettings {
   has_opened_tour_neo_session_validation?: boolean;
+  has_opened_tour_neo_deployment_validation?: boolean;
   desktop_notification?: boolean;
   compact_sidebar?: boolean;
   preserve_login?: boolean;

react/src/hooks/useBAISetting.tsx

@@ -42,7 +42,7 @@ export interface DeployInstantlyResult {
  *   sensible defaults (replicas=1, openToPublic=false, current project +
  *   domain, current resource group as a fallback). Returns the new
  *   deployment id and raises a BAI notification on success/failure.
- * - `openLauncher`: navigates to `/deployments/new?model=<folderId>` so the
+ * - `openLauncher`: navigates to `/deployments/start?model=<folderId>` so the
  *   user can configure a deployment in the full launcher UI.
  *
  * The hook does not wrap the legacy REST-based `useModelServiceLauncher` —
@@ -236,7 +236,7 @@ export const useDeploymentLauncher = (): {
     if (input.resourceGroup && input.resourcePreset) {
       params.set('step', 'review');
     }
-    navigate(`/deployments/new?${params.toString()}`);
+    navigate(`/deployments/start?${params.toString()}`);
   };
 
   return {

react/src/hooks/useDeploymentLauncher.ts

@@ -19,22 +19,16 @@ import {
   useCurrentResourceGroupValue,
 } from '../hooks/useCurrentProject';
 import { App, Form, Skeleton, Typography, theme } from 'antd';
-import {
-  BAIButton,
-  BAIFlex,
-  toGlobalId,
-  toLocalId,
-  useBAILogger,
-} from 'backend.ai-ui';
+import { BAIFlex, toGlobalId, toLocalId, useBAILogger } from 'backend.ai-ui';
 import React, { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery, useMutation } from 'react-relay';
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 
 /**
  * DeploymentLauncherPage — page-level orchestrator for the deployment launcher.
  *
- * Handles both create (`/deployments/new`) and edit
+ * Handles both create (`/deployments/start`) and edit
  * (`/deployments/:deploymentId/edit`) routes. Owns:
  *   - Relay `useLazyLoadQuery` for the edit-mode deployment snapshot.
  *   - The antd `FormInstance` that the content component binds to.
@@ -63,31 +57,16 @@ const DeploymentLauncherPage: React.FC = () => {
 };
 
 /**
- * Create-mode view — no deployment fragment to pre-fill from. Reads URL
- * params forwarded by entry points (model store split button, VFolderDeployModal)
- * and builds a preFilledValues object passed down to the content component.
- * Supported params: `model`, `resourceGroup`, `resourcePresetId`.
+ * Create-mode view — no deployment fragment to pre-fill from. Pre-fill
+ * params (model, resourceGroup, resourcePresetId, step) are read directly
+ * from the URL inside DeploymentLauncherPageContent via nuqs so they are
+ * always in sync and never stripped by step navigation URL updates.
  */
 const DeploymentLauncherCreateView: React.FC = () => {
   'use memo';
-  const [searchParams] = useSearchParams();
   const [form] = Form.useForm<DeploymentLauncherFormValue>();
 
-  const preFilledValues: Partial<DeploymentLauncherFormValue> = {};
-  const model = searchParams.get('model');
-  const resourceGroup = searchParams.get('resourceGroup');
-  const resourcePresetId = searchParams.get('resourcePresetId');
-  if (model) preFilledValues.modelFolderId = model;
-  if (resourceGroup) preFilledValues.resourceGroup = resourceGroup;
-  if (resourcePresetId) preFilledValues.resourcePresetId = resourcePresetId;
-
-  return (
-    <DeploymentLauncherPageLayout
-      mode="create"
-      form={form}
-      preFilledValues={preFilledValues}
-    />
-  );
+  return <DeploymentLauncherPageLayout mode="create" form={form} />;
 };
 
 /**
@@ -139,7 +118,6 @@ interface DeploymentLauncherPageLayoutProps {
   deploymentFrgmt?: React.ComponentProps<
     typeof DeploymentLauncherPageContent
   >['deploymentFrgmt'];
-  preFilledValues?: Partial<DeploymentLauncherFormValue>;
 }
 
 /**
@@ -149,7 +127,7 @@ interface DeploymentLauncherPageLayoutProps {
  */
 const DeploymentLauncherPageLayout: React.FC<
   DeploymentLauncherPageLayoutProps
-> = ({ mode, form, deploymentId, deploymentFrgmt, preFilledValues }) => {
+> = ({ mode, form, deploymentId, deploymentFrgmt }) => {
   'use memo';
 
   const { t } = useTranslation();
@@ -396,25 +374,11 @@ const DeploymentLauncherPageLayout: React.FC<
         mode={mode}
         form={form}
         deploymentFrgmt={deploymentFrgmt}
-        preFilledValues={preFilledValues}
         onValuesChange={() => setIsDirty(true)}
+        onCancel={handleCancel}
+        onSubmit={handleSubmit}
+        isSubmitting={isSubmitting}
       />
-
-      <BAIFlex
-        direction="row"
-        justify="end"
-        gap="sm"
-        style={{ marginTop: token.marginLG }}
-      >
-        <BAIButton onClick={handleCancel} disabled={isSubmitting}>
-          {t('button.Cancel')}
-        </BAIButton>
-        <BAIButton type="primary" loading={isSubmitting} action={handleSubmit}>
-          {mode === 'edit'
-            ? t('deployment.UpdateDeployment')
-            : t('deployment.CreateDeployment')}
-        </BAIButton>
-      </BAIFlex>
     </BAIFlex>
   );
 };

react/src/pages/DeploymentLauncherPage.tsx

@@ -67,7 +67,7 @@ const FileUploadManager = React.lazy(
 );
 // FR-2675 — The legacy `ServiceLauncherCreatePage` / `ServiceLauncherUpdatePage`
 // routes have been redirected to the new Deployment launcher below so the
-// new `/deployments/new` + `/deployments/:deploymentId/edit` paths are the
+// new `/deployments/start` + `/deployments/:deploymentId/edit` paths are the
 // sole launcher entry points. The underlying `ServiceLauncherPageContent`
 // component is still imported transitively (by `useModelServiceLauncher`,
 // `LegacyModelTryContentButton`, etc.) and is scheduled for removal in a
@@ -301,7 +301,7 @@ export const mainLayoutChildRoutes: RouteObject[] = [
         },
       },
       {
-        path: 'new',
+        path: 'start',
         handle: { labelKey: 'modelService.StartNewService' },
         element: (
           <Suspense
@@ -380,12 +380,15 @@ export const mainLayoutChildRoutes: RouteObject[] = [
         element: <WebUINavigate to="/deployments" replace />,
       },
       {
-        // FR-2675 — Legacy `/service/start` → new `/deployments/new`.
+        // FR-2675 — Legacy `/service/start` → new `/deployments/start`.
         path: 'start',
         Component: () => {
           const location = useLocation();
           return (
-            <WebUINavigate to={'/deployments/new' + location.search} replace />
+            <WebUINavigate
+              to={'/deployments/start' + location.search}
+              replace
+            />
           );
         },
       },