select -> radio, update descriptions

client/src/Components/inputs/forms/FormRadioGroupField.tsx

@@ -8,6 +8,7 @@ import {
 } from "react-hook-form";
 import { LAYOUT } from "@/Utils/Theme/constants";
 import { RadioWithDescription } from "@/Components/inputs/Radio";
+import { FieldLabel } from "@/Components/inputs/FieldLabel";
 export interface FormRadioOption {
 	value: string;
 	label: string;
@@ -17,10 +18,12 @@ export interface FormRadioOption {
 interface FormRadioGroupProps<T extends FieldValues> {
 	name: FieldPath<T>;
 	options: FormRadioOption[];
+	fieldLabel?: string;
 }
 export const FormRadioGroup = <T extends FieldValues>({
 	name,
 	options,
+	fieldLabel,
 }: FormRadioGroupProps<T>) => {
 	const { control } = useFormContext<T>();
 	const theme = useTheme();
@@ -30,6 +33,7 @@ export const FormRadioGroup = <T extends FieldValues>({
 			control={control}
 			render={({ field, fieldState }) => (
 				<FormControl error={!!fieldState.error}>
+					{fieldLabel && <FieldLabel>{fieldLabel}</FieldLabel>}
 					<RadioGroup
 						{...field}
 						sx={{ gap: theme.spacing(LAYOUT.MD) }}

client/src/Pages/CreateMonitor/index.tsx

@@ -484,13 +484,31 @@ const CreateMonitorPage = () => {
 			})),
 		[t]
 	);
+	const globalProxyName =
+		appSettings?.settings?.globalProxyEnabled === true
+			? proxies?.find((proxy) => proxy.id === appSettings?.settings?.globalProxyId)?.name
+			: undefined;
+
 	const proxyModeOptions = useMemo(
 		() =>
-			ProxyModes.map((mode) => ({
-				value: mode,
-				label: t(`pages.createMonitor.form.general.option.proxyMode.value.${mode}`),
-			})),
-		[t]
+			ProxyModes.map((mode) => {
+				const key =
+					mode === "inherit"
+						? globalProxyName
+							? "inheritGlobal"
+							: "inheritDirect"
+						: mode;
+				return {
+					value: mode,
+					label: t(`pages.createMonitor.form.general.option.proxyMode.value.${key}`, {
+						name: globalProxyName,
+					}),
+					description: t(
+						`pages.createMonitor.form.general.option.proxyMode.description.${key}`
+					),
+				};
+			}),
+		[t, globalProxyName]
 	);
 
 	const proxyOptions = useMemo(
@@ -502,13 +520,6 @@ const CreateMonitorPage = () => {
 		[proxies]
 	);
 
-	const globalProxyName =
-		appSettings?.settings?.globalProxyEnabled === true
-			? proxies?.find((proxy) => proxy.id === appSettings?.settings?.globalProxyId)?.name
-			: undefined;
-
-	console.log({ appSettings });
-
 	return (
 		<FormProvider {...form}>
 			<BasePage
@@ -577,33 +588,13 @@ const CreateMonitorPage = () => {
 								{/* Proxy fields - only shown for HTTP */}
 								{generalSettingsConfig.showProxy && (
 									<>
-										<FormSelectField
+										<FormRadioGroup
 											name="proxyMode"
+											options={proxyModeOptions}
 											fieldLabel={t(
 												"pages.createMonitor.form.general.option.proxyMode.label"
 											)}
-											options={proxyModeOptions}
 										/>
-										{watchedProxyMode === "inherit" && (
-											<Typography
-												component="span"
-												color={
-													globalProxyName
-														? theme.palette.text.secondary
-														: theme.palette.warning.main
-												}
-												sx={{ opacity: 0.8 }}
-											>
-												{globalProxyName
-													? t(
-															"pages.createMonitor.form.general.option.proxyMode.effect.global",
-															{ name: globalProxyName }
-														)
-													: t(
-															"pages.createMonitor.form.general.option.proxyMode.effect.direct"
-														)}
-											</Typography>
-										)}
 										{watchedProxyMode === "custom" && (
 											<FormSelectField
 												name="proxyId"

client/src/locales/en.json

@@ -640,15 +640,18 @@
 							"placeholder": "https://www.google.com"
 						},
 						"proxyMode": {
-							"label": "Proxy mode",
+							"label": "Proxy",
 							"value": {
-								"inherit": "Use global proxy setting",
-								"none": "No proxy (direct connection)",
-								"custom": "Custom"
+								"inheritDirect": "Default (direct connection)",
+								"inheritGlobal": "Default (global proxy: {{name}})",
+								"none": "Never use a proxy",
+								"custom": "Custom proxy"
 							},
-							"effect": {
-								"global": "Checks currently go through the global proxy: {{name}}",
-								"direct": "Global proxy not enabled, will use direct connection"
+							"description": {
+								"inheritDirect": "No global proxy is configured, connect directly. If a global proxy is later configured, this monitor will use it.",
+								"inheritGlobal": "Follows the global proxy setting — changing it in Settings also changes this monitor's connection.",
+								"none": "Always connects directly even if a global proxy is enabled later.",
+								"custom": "Route this monitor's checks through a specific proxy. Overrides global proxy"
 							}
 						},
 						"proxy": {