From f0ef289a6b780ed8e529946d65d68a7be49b3c6d Mon Sep 17 00:00:00 2001
From: nowgnuesLee <seungwon@lablup.com>
Date: Thu, 18 Sep 2025 16:45:56 +0900
Subject: [PATCH] feat(FR-1448): allow user to select multi agents when
 creating multi-node session

---
 react/src/components/AgentSelect.tsx          | 23 ++++++++---
 .../ResourceAllocationFormItems.tsx           | 29 ++++++-------
 react/src/pages/SessionLauncherPage.tsx       | 41 ++++++++++++++-----
 src/lib/backend.ai-client-esm.ts              |  3 ++
 4 files changed, 64 insertions(+), 32 deletions(-)

diff --git a/react/src/components/AgentSelect.tsx b/react/src/components/AgentSelect.tsx
index 150318cfbd..696c343404 100644
--- a/react/src/components/AgentSelect.tsx
+++ b/react/src/components/AgentSelect.tsx
@@ -9,7 +9,7 @@ import React, { useDeferredValue, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery } from 'react-relay';
 
-interface Props extends SelectProps {
+interface Props extends Omit<SelectProps, 'options'> {
   autoSelectDefault?: boolean;
   fetchKey?: string;
   resourceGroup?: string | null;
@@ -122,9 +122,6 @@ const AgentSelect: React.FC<Props> = ({
     : undefined;
   return (
     <Select
-      onChange={(value, option) => {
-        setValue(value, option);
-      }}
       loading={searchStr !== deferredSearchStr}
       filterOption={false}
       showSearch
@@ -132,9 +129,23 @@ const AgentSelect: React.FC<Props> = ({
       onSearch={(v) => {
         setSearchStr(v);
       }}
-      {...selectProps}
-      value={value}
       options={filterOutEmpty([autoSelectIfMatch, ...agentOptions])}
+      //override props.onChange and props.value, it is handled by useControllableValue
+      {..._.omit(selectProps, ['value', 'onChange'])}
+      onChange={(value: unknown, option) => {
+        // multi-mode
+        if (_.isArray(value) && _.isArray(option)) {
+          if (_.last(value) === 'auto' || value.length === 0) {
+            value = ['auto'];
+            option = _.last(option);
+          } else if (value[0] === 'auto' && value.length > 1) {
+            value = value.slice(1);
+            option = option.slice(1);
+          }
+        }
+        setValue(value, option);
+      }}
+      value={value}
     />
   );
 };
diff --git a/react/src/components/SessionFormItems/ResourceAllocationFormItems.tsx b/react/src/components/SessionFormItems/ResourceAllocationFormItems.tsx
index 23dd702682..9197ab083e 100644
--- a/react/src/components/SessionFormItems/ResourceAllocationFormItems.tsx
+++ b/react/src/components/SessionFormItems/ResourceAllocationFormItems.tsx
@@ -46,7 +46,7 @@ export const RESOURCE_ALLOCATION_INITIAL_FORM_VALUES: DeepPartial<ResourceAlloca
     cluster_mode: 'single-node',
     cluster_size: 1,
     enabledAutomaticShmem: true,
-    agent: 'auto',
+    agent: ['auto'],
   };
 
 export const isMinOversMaxValue = (min: number, max: number) => {
@@ -67,7 +67,7 @@ export interface ResourceAllocationFormValue {
   cluster_size: number;
   enabledAutomaticShmem: boolean;
   allocationPreset?: string;
-  agent?: string;
+  agent?: string[] | string;
 }
 
 export type MergedResourceAllocationFormValue = ResourceAllocationFormValue &
@@ -1232,15 +1232,16 @@ const ResourceAllocationFormItems: React.FC<
                 <AgentSelect
                   resourceGroup={currentResourceGroupInForm}
                   fetchKey={agentFetchKey}
-                  onChange={(value, option) => {
-                    if (value !== 'auto') {
-                      form.setFieldsValue({
-                        cluster_mode: 'single-node',
-                        cluster_size: 1,
-                      });
-                    }
-                    // TODO: set cluster mode to single node and cluster size to 1 when agent value is not "auto"
-                  }}
+                  mode={
+                    baiClient.supports('multi-agents') ? 'multiple' : undefined
+                  }
+                  labelRender={
+                    baiClient.supports('multi-agents')
+                      ? ({ label, value }) => {
+                          return value === 'auto' ? label : value;
+                        }
+                      : undefined
+                  }
                 ></AgentSelect>
               </Form.Item>
             </Suspense>
@@ -1285,7 +1286,6 @@ const ResourceAllocationFormItems: React.FC<
                       onChange={(e) => {
                         form.validateFields().catch(() => {});
                       }}
-                      disabled={getFieldValue('agent') !== 'auto'}
                     >
                       <Radio.Button value="single-node">
                         {t('session.launcher.SingleNode')}
@@ -1348,10 +1348,7 @@ const ResourceAllocationFormItems: React.FC<
                                 ? derivedClusterSizeMaxLimit
                                 : undefined
                             }
-                            disabled={
-                              derivedClusterSizeMaxLimit === 1 ||
-                              getFieldValue('agent') !== 'auto'
-                            }
+                            disabled={derivedClusterSizeMaxLimit === 1}
                             sliderProps={{
                               marks: {
                                 1: '1',
diff --git a/react/src/pages/SessionLauncherPage.tsx b/react/src/pages/SessionLauncherPage.tsx
index b1c39f11c0..a33eeb715e 100644
--- a/react/src/pages/SessionLauncherPage.tsx
+++ b/react/src/pages/SessionLauncherPage.tsx
@@ -549,16 +549,37 @@ const SessionLauncherPage = () => {
               preopen_ports: transformPortValuesToNumbers(values.ports),
 
               // Agent selection (optional)
-              ...(baiClient.supports('agent-select') &&
-              !baiClient?._config?.hideAgents &&
-              values.agent !== 'auto'
-                ? {
-                    // Filter out undefined values
-                    agent_list: [values.agent].filter(
-                      (agent): agent is string => !!agent,
+              ...(() => {
+                if (values.agent === undefined) return {};
+
+                const agents = _.castArray(values.agent);
+
+                if (
+                  !baiClient.supports('agent-select') ||
+                  baiClient?._config?.hideAgents ||
+                  _.isEqual(agents, ['auto']) ||
+                  agents.length === 0
+                ) {
+                  return {};
+                }
+
+                if (
+                  !baiClient.supports('multi-agents') &&
+                  values.cluster_mode === 'multi-node'
+                ) {
+                  // The server now requires agents equivalent to the cluster size.
+                  return {
+                    agent_list: Array.from(
+                      { length: values.cluster_size },
+                      () => agents[0],
                     ),
-                  }
-                : undefined),
+                  };
+                }
+
+                return {
+                  agent_list: _.filter(agents, (item) => !!item),
+                };
+              })(),
             },
           },
         };
@@ -1546,7 +1567,7 @@ const SessionLauncherPage = () => {
                   command: undefined,
                   scheduleDate: undefined,
                 },
-                agent: 'auto', // Add the missing 'agent' property
+                agent: ['auto'], // Add the missing 'agent' property
               } as SessionLauncherFormData,
               formValue,
             );
diff --git a/src/lib/backend.ai-client-esm.ts b/src/lib/backend.ai-client-esm.ts
index 68afc7d17e..bcab3452c3 100644
--- a/src/lib/backend.ai-client-esm.ts
+++ b/src/lib/backend.ai-client-esm.ts
@@ -821,6 +821,9 @@ class Client {
     if (this.isManagerVersionCompatibleWith('25.12.0')) {
       this._features['reservoir'] = true;
     }
+    if (this.isManagerVersionCompatibleWith('25.15.0')) {
+      this._features['multi-agents'] = true;
+    }
   }
 
   /**