fix(ui): make Z-Image model selects mutually exclusive

VAE and Qwen3 Encoder selects are disabled when Qwen3 Source is selected,
and vice versa. This prevents invalid model combinations.

Author: Pfannkuchensack

invokeai/frontend/web/src/features/parameters/components/Advanced/ParamZImageQwen3VaeModelSelect.tsx

@@ -17,13 +17,18 @@ import type { MainModelConfig, Qwen3EncoderModelConfig, VAEModelConfig } from 's
 
 /**
  * Z-Image VAE Model Select - uses FLUX VAE models
+ * Disabled when Qwen3 Source is selected (mutually exclusive)
  */
 const ParamZImageVaeModelSelect = memo(() => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const zImageVaeModel = useAppSelector(selectZImageVaeModel);
+  const zImageQwen3SourceModel = useAppSelector(selectZImageQwen3SourceModel);
   const [modelConfigs, { isLoading }] = useFluxVAEModels();
 
+  // Disable when Qwen3 Source is selected
+  const isDisabled = zImageQwen3SourceModel !== null;
+
   const _onChange = useCallback(
     (model: VAEModelConfig | null) => {
       if (model) {
@@ -43,14 +48,15 @@ const ParamZImageVaeModelSelect = memo(() => {
   });
 
   return (
-    <FormControl minW={0} flexGrow={1} gap={2}>
+    <FormControl minW={0} flexGrow={1} gap={2} isDisabled={isDisabled}>
       <FormLabel m={0}>{t('modelManager.zImageVae')}</FormLabel>
       <Combobox
         value={value}
         options={options}
         onChange={onChange}
         noOptionsMessage={noOptionsMessage}
         isClearable
+        isDisabled={isDisabled}
         placeholder={t('modelManager.zImageVaePlaceholder')}
       />
     </FormControl>
@@ -61,13 +67,18 @@ ParamZImageVaeModelSelect.displayName = 'ParamZImageVaeModelSelect';
 
 /**
  * Z-Image Qwen3 Encoder Model Select
+ * Disabled when Qwen3 Source is selected (mutually exclusive)
  */
 const ParamZImageQwen3EncoderModelSelect = memo(() => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const zImageQwen3EncoderModel = useAppSelector(selectZImageQwen3EncoderModel);
+  const zImageQwen3SourceModel = useAppSelector(selectZImageQwen3SourceModel);
   const [modelConfigs, { isLoading }] = useQwen3EncoderModels();
 
+  // Disable when Qwen3 Source is selected
+  const isDisabled = zImageQwen3SourceModel !== null;
+
   const _onChange = useCallback(
     (model: Qwen3EncoderModelConfig | null) => {
       if (model) {
@@ -87,14 +98,15 @@ const ParamZImageQwen3EncoderModelSelect = memo(() => {
   });
 
   return (
-    <FormControl minW={0} flexGrow={1} gap={2}>
+    <FormControl minW={0} flexGrow={1} gap={2} isDisabled={isDisabled}>
       <FormLabel m={0}>{t('modelManager.zImageQwen3Encoder')}</FormLabel>
       <Combobox
         value={value}
         options={options}
         onChange={onChange}
         noOptionsMessage={noOptionsMessage}
         isClearable
+        isDisabled={isDisabled}
         placeholder={t('modelManager.zImageQwen3EncoderPlaceholder')}
       />
     </FormControl>
@@ -105,13 +117,19 @@ ParamZImageQwen3EncoderModelSelect.displayName = 'ParamZImageQwen3EncoderModelSe
 
 /**
  * Z-Image Qwen3 Source Model Select - Diffusers Z-Image models for fallback
+ * Disabled when VAE or Qwen3 Encoder is selected (mutually exclusive)
  */
 const ParamZImageQwen3SourceModelSelect = memo(() => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const zImageQwen3SourceModel = useAppSelector(selectZImageQwen3SourceModel);
+  const zImageVaeModel = useAppSelector(selectZImageVaeModel);
+  const zImageQwen3EncoderModel = useAppSelector(selectZImageQwen3EncoderModel);
   const [modelConfigs, { isLoading }] = useZImageDiffusersModels();
 
+  // Disable when VAE or Qwen3 Encoder is selected
+  const isDisabled = zImageVaeModel !== null || zImageQwen3EncoderModel !== null;
+
   const _onChange = useCallback(
     (model: MainModelConfig | null) => {
       if (model) {
@@ -131,14 +149,15 @@ const ParamZImageQwen3SourceModelSelect = memo(() => {
   });
 
   return (
-    <FormControl minW={0} flexGrow={1} gap={2}>
+    <FormControl minW={0} flexGrow={1} gap={2} isDisabled={isDisabled}>
       <FormLabel m={0}>{t('modelManager.zImageQwen3Source')}</FormLabel>
       <Combobox
         value={value}
         options={options}
         onChange={onChange}
         noOptionsMessage={noOptionsMessage}
         isClearable
+        isDisabled={isDisabled}
         placeholder={t('modelManager.zImageQwen3SourcePlaceholder')}
       />
     </FormControl>