Merge branch 'dev' of github.com:fosrl/pangolin into dev

messages/en-US.json

@@ -2032,13 +2032,13 @@
     "healthCheckUnknown": "Unknown",
     "healthCheck": "Health Check",
     "configureHealthCheck": "Configure Health Check",
-    "configureHealthCheckDescription": "Set up health monitoring for {target}",
+    "configureHealthCheckDescription": "Set up monitoring for your resource to ensure it is always available",
     "enableHealthChecks": "Enable Health Checks",
     "healthCheckDisabledStateDescription": "When disabled, the site will not perform health checks and the state will be considered unknown.",
     "enableHealthChecksDescription": "Monitor the health of this target. You can monitor a different endpoint than the target if required.",
     "healthScheme": "Method",
     "healthSelectScheme": "Select Method",
-    "healthCheckPortInvalid": "Health check port must be between 1 and 65535",
+    "healthCheckPortInvalid": "Port must be between 1 and 65535",
     "healthCheckPath": "Path",
     "healthHostname": "IP / Host",
     "healthPort": "Port",
@@ -2080,6 +2080,11 @@
     "sshServerDestination": "Server Destination",
     "sshServerDestinationDescription": "Configure the destination of the SSH server",
     "destination": "Destination",
+    "destinationRequired": "Destination is required.",
+    "domainRequired": "Domain is required.",
+    "proxyPortRequired": "Port is required.",
+    "invalidPathConfiguration": "Invalid path configuration.",
+    "invalidRewritePathConfiguration": "Invalid rewrite path configuration.",
     "bgTargetMultiSiteDisclaimer": "Selecting multiple sites enables resilient routing and failover for high availability.",
     "roleAllowSsh": "Allow SSH",
     "roleAllowSshAllow": "Allow",

src/app/[orgId]/settings/(private)/policies/resources/public/[niceId]/page.tsx

@@ -28,11 +28,11 @@ export default async function EditPolicyPage(props: EditPolicyPageProps) {
         );
         policyResponse = res.data.data;
     } catch {
-        redirect(`/${params.orgId}/settings/policies/resource`);
+        redirect(`/${params.orgId}/settings/policies/resources/public`);
     }
 
     if (!policyResponse) {
-        redirect(`/${params.orgId}/settings/policies/resource`);
+        redirect(`/${params.orgId}/settings/policies/resources/public`);
     }
 
     return (
@@ -46,7 +46,9 @@ export default async function EditPolicyPage(props: EditPolicyPageProps) {
                 />
 
                 <Button asChild variant="outline">
-                    <Link href={`/${params.orgId}/settings/policies/resource`}>
+                    <Link
+                        href={`/${params.orgId}/settings/policies/resources/public`}
+                    >
                         {t("resourcePoliciesSeeAll")}
                     </Link>
                 </Button>

src/app/[orgId]/settings/(private)/policies/resources/public/create/page.tsx

@@ -23,7 +23,9 @@ export default async function CreateResourcePolicyPage(
                 />
 
                 <Button asChild variant="outline">
-                    <Link href={`/${params.orgId}/settings/policies/resource`}>
+                    <Link
+                        href={`/${params.orgId}/settings/policies/resources/public`}
+                    >
                         {t("resourcePoliciesSeeAll")}
                     </Link>
                 </Button>

src/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm.tsx

@@ -10,7 +10,10 @@ import {
     PathRewriteDisplay,
     PathRewriteModal
 } from "@app/components/PathMatchRenameModal";
-import { ResourceTargetAddressItem } from "@app/components/resource-target-address-item";
+import {
+    ResourceTargetAddressItem,
+    ResourceTargetSiteItem
+} from "@app/components/resource-target-address-item";
 import {
     SettingsSection,
     SettingsSectionBody,
@@ -65,6 +68,7 @@ import {
     useMemo,
     useState
 } from "react";
+import { maxSize } from "zod";
 
 export type LocalTarget = Omit<
     ArrayElement<ListTargetsResponse["targets"]> & {
@@ -228,7 +232,7 @@ export function ProxyResourceTargetsForm({
         const priorityColumn: ColumnDef<LocalTarget> = {
             id: "priority",
             header: () => (
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 p-3">
                     {t("priority")}
                     <TooltipProvider>
                         <Tooltip>
@@ -244,7 +248,6 @@ export function ProxyResourceTargetsForm({
             ),
             cell: ({ row }) => {
                 return (
-                    <div className="flex items-center justify-center w-full">
                         <Input
                             type="number"
                             min="1"
@@ -262,7 +265,6 @@ export function ProxyResourceTargetsForm({
                                 }
                             }}
                         />
-                    </div>
                 );
             },
             size: 120,
@@ -396,13 +398,12 @@ export function ProxyResourceTargetsForm({
             maxSize: 200
         };
 
-        const addressColumn: ColumnDef<LocalTarget> = {
+        const siteColumn: ColumnDef<LocalTarget> = {
-            accessorKey: "address",
+            accessorKey: "site",
-            header: () => <span className="p-3">{t("address")}</span>,
+            header: () => <span className="p-3">{t("site")}</span>,
             cell: ({ row }) => {
                 return (
-                    <ResourceTargetAddressItem
+                    <ResourceTargetSiteItem
-                        isHttp={isHttp}
                         orgId={orgId}
                         getDockerStateForSite={getDockerStateForSite}
                         proxyTarget={row.original}
@@ -411,9 +412,26 @@ export function ProxyResourceTargetsForm({
                     />
                 );
             },
-            size: 400,
+            size: 220,
-            minSize: 350,
+            minSize: 180,
-            maxSize: 500
+            maxSize: 280
+        };
+
+        const addressColumn: ColumnDef<LocalTarget> = {
+            accessorKey: "address",
+            header: () => <span className="p-3">{t("address")}</span>,
+            cell: ({ row }) => {
+                return (
+                    <ResourceTargetAddressItem
+                        isHttp={isHttp}
+                        proxyTarget={row.original}
+                        updateTarget={updateTarget}
+                    />
+                );
+            },
+            size: 350,
+            minSize: 300,
+            maxSize: 450
         };
 
         const rewritePathColumn: ColumnDef<LocalTarget> = {
@@ -526,6 +544,7 @@ export function ProxyResourceTargetsForm({
 
         if (isAdvancedMode) {
             const cols = [
+                siteColumn,
                 addressColumn,
                 healthCheckColumn,
                 enabledColumn,
@@ -534,12 +553,13 @@ export function ProxyResourceTargetsForm({
 
             if (isHttp) {
                 cols.unshift(matchPathColumn);
-                cols.splice(3, 0, rewritePathColumn, priorityColumn);
+                cols.splice(4, 0, rewritePathColumn, priorityColumn);
             }
 
             return cols;
         } else {
             return [
+                siteColumn,
                 addressColumn,
                 healthCheckColumn,
                 enabledColumn,
@@ -779,6 +799,10 @@ export function ProxyResourceTargetsForm({
                                                                 header.column
                                                                     .id ===
                                                                 "actions";
+                                                            const isSiteColumn =
+                                                                header.column
+                                                                    .id ===
+                                                                "site";
                                                             return (
                                                                 <TableHead
                                                                     key={
@@ -787,7 +811,9 @@ export function ProxyResourceTargetsForm({
                                                                     className={
                                                                         isActionsColumn
                                                                             ? "sticky right-0 z-10 w-auto min-w-fit bg-card"
-                                                                            : ""
+                                                                            : isSiteColumn
+                                                                              ? "w-45"
+                                                                              : ""
                                                                     }
                                                                 >
                                                                     {header.isPlaceholder
@@ -819,6 +845,10 @@ export function ProxyResourceTargetsForm({
                                                                     cell.column
                                                                         .id ===
                                                                     "actions";
+                                                                const isSiteColumn =
+                                                                    cell.column
+                                                                        .id ===
+                                                                    "site";
                                                                 return (
                                                                     <TableCell
                                                                         key={
@@ -827,7 +857,9 @@ export function ProxyResourceTargetsForm({
                                                                         className={
                                                                             isActionsColumn
                                                                                 ? "sticky right-0 z-10 w-auto min-w-fit bg-card"
-                                                                                : ""
+                                                                                : isSiteColumn
+                                                                                  ? "w-45"
+                                                                                  : ""
                                                                         }
                                                                     >
                                                                         {flexRender(

src/app/[orgId]/settings/resources/public/[niceId]/authentication/page.tsx

@@ -330,7 +330,7 @@ export default function ResourceAuthenticationPage() {
                                         asChild
                                     >
                                         <Link
-                                            href={`/${org.org.orgId}/settings/policies/resource/${policies.sharedPolicy.niceId}`}
+                                            href={`/${org.org.orgId}/settings/policies/resources/public/${policies.sharedPolicy.niceId}`}
                                         >
                                             {t("editSharedPolicy")}
                                             <ArrowRightIcon className="size-4" />

src/app/[orgId]/settings/resources/public/[niceId]/rdp/page.tsx

@@ -11,22 +11,23 @@ import {
 } from "@app/components/Settings";
 import { BrowserGatewayTargetForm } from "@app/components/BrowserGatewayTargetForm";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
-import { type Selectedsite } from "@app/components/site-selector";
 import { Button } from "@app/components/ui/button";
+import { Form } from "@app/components/ui/form";
 import { toast } from "@app/hooks/useToast";
 import { useResourceContext } from "@app/hooks/useResourceContext";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { createBrowserGatewayTargetFormSchema } from "@app/lib/browserGatewayTargetFormSchema";
+import type { BrowserGatewayTargetFormValues } from "@app/lib/browserGatewayTargetFormSchema";
 import { tierMatrix, TierFeature } from "@server/lib/billing/tierMatrix";
 import { createApiClient } from "@app/lib/api";
 import { formatAxiosError } from "@app/lib/api/formatAxiosError";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
-import { use, useActionState, useEffect, useState } from "react";
+import { use, useActionState, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { GetResourceResponse } from "@server/routers/resource";
 import type { ResourceContextType } from "@app/contexts/resourceContext";
 
@@ -35,16 +36,43 @@ type ExistingTarget = {
     siteId: number;
 };
 
-export default function SshSettingsPage(props: {
+type TargetRow = {
+    targetId: number;
+    resourceId: number;
+    siteId: number;
+    siteName?: string;
+    mode: string | null;
+    ip: string;
+    port: number;
+};
+
+type ResourceTargetsResponse = {
+    targets: TargetRow[];
+};
+
+export default function RdpSettingsPage(props: {
     params: Promise<{ orgId: string }>;
 }) {
     const params = use(props.params);
     const { resource, updateResource } = useResourceContext();
     const { isPaidUser } = usePaidStatus();
+    const api = createApiClient(useEnvContext());
     const disabled = !isPaidUser(
         tierMatrix[TierFeature.AdvancedPublicResources]
     );
 
+    const { data: targetsResponse, isLoading: isLoadingTargets } = useQuery({
+        queryKey: ["resourceTargets", resource.resourceId, params.orgId, "rdp"],
+        queryFn: async () => {
+            const res = await api.get(`/resource/${resource.resourceId}/targets`);
+            return res.data.data as ResourceTargetsResponse;
+        }
+    });
+
+    if (isLoadingTargets) {
+        return null;
+    }
+
     return (
         <SettingsContainer>
             <PaidFeaturesAlert
@@ -55,6 +83,7 @@ export default function SshSettingsPage(props: {
                 resource={resource}
                 updateResource={updateResource}
                 disabled={disabled}
+                targetsResponse={targetsResponse ?? { targets: [] }}
             />
         </SettingsContainer>
     );
@@ -63,138 +92,103 @@ export default function SshSettingsPage(props: {
 function RdpServerForm({
     orgId,
     resource,
-    updateResource,
+    disabled,
-    disabled
+    targetsResponse
 }: {
     orgId: string;
     resource: GetResourceResponse;
     updateResource: ResourceContextType["updateResource"];
     disabled: boolean;
+    targetsResponse: ResourceTargetsResponse;
 }) {
     const t = useTranslations();
     const api = createApiClient(useEnvContext());
     const router = useRouter();
+    const targets = targetsResponse.targets.filter((t) => t.mode === "rdp");
+    const firstTarget = targets[0];
 
-    // Standard mode: multi-site
+    const formSchema = useMemo(
-    const [selectedSites, setSelectedSites] = useState<Selectedsite[]>([]);
+        () => createBrowserGatewayTargetFormSchema(t),
-    const [bgDestination, setBgDestination] = useState("");
+        [t]
-    const [bgDestinationPort, setBgDestinationPort] = useState("22");
-    const [existingTargets, setExistingTargets] = useState<ExistingTarget[]>(
-        []
     );
 
-    // Native mode: single site
+    const form = useForm<BrowserGatewayTargetFormValues>({
-    const [selectedNativeSite, setSelectedNativeSite] =
+        resolver: zodResolver(formSchema),
-        useState<Selectedsite | null>(null);
+        defaultValues: {
-    const [nativeExistingTarget, setNativeExistingTarget] =
+            selectedSites: targets.map((target) => ({
-        useState<ExistingTarget | null>(null);
+                siteId: target.siteId,
-
+                name: target.siteName ?? String(target.siteId),
-    const { data: bgTargetsResponse } = useQuery({
+                type: "newt" as const
-        queryKey: ["resourceTargets", resource.resourceId, orgId, "rdp"],
+            })),
-        queryFn: async () => {
+            destination: firstTarget?.ip ?? "",
-            const res = await api.get(`/resource/${resource.resourceId}/targets`);
+            destinationPort: firstTarget ? String(firstTarget.port) : "3389"
-            return res.data.data as {
-                targets: Array<{
-                    targetId: number;
-                    resourceId: number;
-                    siteId: number;
-                    siteName?: string;
-                    mode: string | null;
-                    ip: string;
-                    port: number;
-                }>;
-            };
         }
     });
 
-    useEffect(() => {
+    const [existingTargets, setExistingTargets] = useState<ExistingTarget[]>(
-        if (!bgTargetsResponse?.targets?.length) return;
+        () =>
-        const targets = bgTargetsResponse.targets.filter(
+            targets.map((target) => ({
-            (t) => t.mode === "rdp"
+                targetId: target.targetId,
-        );
+                siteId: target.siteId
-        if (!targets.length) return;
-        const first = targets[0];
-
-        setBgDestination(first.ip);
-        setBgDestinationPort(String(first.port));
-        setExistingTargets(
-            targets.map((t) => ({
-                targetId: t.targetId,
-                siteId: t.siteId
             }))
-        );
+    );
-        setSelectedSites(
-            targets.map((t) => ({
-                siteId: t.siteId,
-                name: t.siteName ?? String(t.siteId),
-                type: "newt" as const
-            }))
-        );
-    }, [bgTargetsResponse]);
 
     const [, formAction, isSubmitting] = useActionState(save, null);
 
     async function save() {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const { selectedSites, destination, destinationPort } =
+            form.getValues();
+
         try {
-            if (bgDestination && bgDestinationPort) {
+            const selectedSiteIds = new Set(selectedSites.map((s) => s.siteId));
-                const selectedSiteIds = new Set(
+            const existingSiteIds = new Set(
-                    selectedSites.map((s) => s.siteId)
+                existingTargets.map((t) => t.siteId)
-                );
+            );
-                const existingSiteIds = new Set(
-                    existingTargets.map((t) => t.siteId)
-                );
 
-                const toDelete = existingTargets.filter(
+            const toDelete = existingTargets.filter(
-                    (t) => !selectedSiteIds.has(t.siteId)
+                (t) => !selectedSiteIds.has(t.siteId)
-                );
+            );
-                await Promise.all(
+            await Promise.all(toDelete.map((t) => api.delete(`/target/${t.targetId}`)));
-                    toDelete.map((t) =>
-                        api.delete(`/target/${t.targetId}`)
-                    )
-                );
 
-                const toUpdate = existingTargets.filter((t) =>
+            const toUpdate = existingTargets.filter((t) =>
-                    selectedSiteIds.has(t.siteId)
+                selectedSiteIds.has(t.siteId)
-                );
+            );
-                await Promise.all(
+            await Promise.all(
-                    toUpdate.map((t) =>
+                toUpdate.map((t) =>
-                        api.post(
+                    api.post(`/target/${t.targetId}`, {
-                            `/target/${t.targetId}`,
+                        mode: "rdp",
-                            {
+                        ip: destination,
-                                mode: "rdp",
+                        port: Number(destinationPort),
-                                ip: bgDestination,
+                        siteId: t.siteId,
-                                port: Number(bgDestinationPort),
+                        hcEnabled: false
-                                siteId: t.siteId,
+                    })
-                                hcEnabled: false
+                )
-                            }
+            );
-                        )
-                    )
-                );
 
-                const toCreate = selectedSites.filter(
+            const toCreate = selectedSites.filter(
-                    (s) => !existingSiteIds.has(s.siteId)
+                (s) => !existingSiteIds.has(s.siteId)
-                );
+            );
-                const created = await Promise.all(
+            const created = await Promise.all(
-                    toCreate.map((s) =>
+                toCreate.map((s) =>
-                        api.put(
+                    api.put(`/resource/${resource.resourceId}/target`, {
-                            `/resource/${resource.resourceId}/target`,
+                        siteId: s.siteId,
-                            {
+                        mode: "rdp",
-                                siteId: s.siteId,
+                        ip: destination,
-                                mode: "rdp",
+                        port: Number(destinationPort),
-                                ip: bgDestination,
+                        authToken: null,
-                                port: Number(bgDestinationPort),
+                        hcEnabled: false
-                                hcEnabled: false
+                    })
-                            }
+                )
-                        )
+            );
-                    )
-                );
 
-                const newTargets: ExistingTarget[] = created.map((res, i) => ({
+            const newTargets: ExistingTarget[] = created.map((res, i) => ({
-                    targetId: res.data.data.targetId,
+                targetId: res.data.data.targetId,
-                    siteId: toCreate[i].siteId
+                siteId: toCreate[i].siteId
-                }));
+            }));
-                setExistingTargets([...toUpdate, ...newTargets]);
+            setExistingTargets([...toUpdate, ...newTargets]);
-            }
 
             toast({
                 title: t("settingsUpdated"),
@@ -226,31 +220,31 @@ function RdpServerForm({
                 disabled={disabled}
                 className={disabled ? "opacity-50 pointer-events-none" : ""}
             >
-                <SettingsSectionBody>
+                <Form {...form}>
-                    <SettingsSectionForm variant="half">
+                    <SettingsSectionBody>
-                        <BrowserGatewayTargetForm
+                        <SettingsSectionForm variant="half">
-                            orgId={orgId}
+                            <BrowserGatewayTargetForm
-                            multiSite={true}
+                                control={form.control}
-                            selectedSites={selectedSites}
+                                orgId={orgId}
-                            onSitesChange={setSelectedSites}
+                                multiSite={true}
-                            destination={bgDestination}
+                                sitesField="selectedSites"
-                            destinationPort={bgDestinationPort}
+                                destinationField="destination"
-                            onDestinationChange={setBgDestination}
+                                destinationPortField="destinationPort"
-                            onDestinationPortChange={setBgDestinationPort}
+                                learnMoreHref="https://docs.pangolin.net/manage/resources/public/rdp"
-                            learnMoreHref="https://docs.pangolin.net/manage/resources/public/rdp"
+                                defaultPort={3389}
-                            defaultPort={3389}
+                            />
-                        />
+                        </SettingsSectionForm>
-                    </SettingsSectionForm>
+                    </SettingsSectionBody>
-                </SettingsSectionBody>
+                    <form action={formAction} className="flex justify-end mt-4">
-                <form action={formAction} className="flex justify-end mt-4">
+                        <Button
-                    <Button
+                            disabled={isSubmitting}
-                        disabled={isSubmitting}
+                            loading={isSubmitting}
-                        loading={isSubmitting}
+                            type="submit"
-                        type="submit"
+                        >
-                    >
+                            {t("saveSettings")}
-                        {t("saveSettings")}
+                        </Button>
-                    </Button>
+                    </form>
-                </form>
+                </Form>
             </fieldset>
         </SettingsSection>
     );

src/app/[orgId]/settings/resources/public/[niceId]/ssh/page.tsx

@@ -15,10 +15,7 @@ import {
 import { StrategySelect, StrategyOption } from "@app/components/StrategySelect";
 import { BrowserGatewayTargetForm } from "@app/components/BrowserGatewayTargetForm";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
-import {
+import { SitesSelector } from "@app/components/site-selector";
-    SitesSelector,
-    type Selectedsite
-} from "@app/components/site-selector";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { tierMatrix, TierFeature } from "@server/lib/billing/tierMatrix";
 import { Button } from "@app/components/ui/button";
@@ -41,15 +38,16 @@ import { Badge } from "@app/components/ui/badge";
 import { toast } from "@app/hooks/useToast";
 import { useResourceContext } from "@app/hooks/useResourceContext";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { createSshSettingsFormSchema } from "@app/lib/browserGatewayTargetFormSchema";
+import type { SshSettingsFormValues } from "@app/lib/browserGatewayTargetFormSchema";
 import { createApiClient } from "@app/lib/api";
 import { formatAxiosError } from "@app/lib/api/formatAxiosError";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
-import { use, useActionState, useEffect, useState } from "react";
+import { use, useActionState, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { GetResourceResponse } from "@server/routers/resource";
 import type { ResourceContextType } from "@app/contexts/resourceContext";
 
@@ -59,16 +57,20 @@ type ExistingTarget = {
     authToken?: string | null;
 };
 
-const sshFormSchema = z.object({
+type TargetRow = {
-    authDaemonPort: z.string().refine(
+    targetId: number;
-        (val) => {
+    resourceId: number;
-            if (!val) return true;
+    siteId: number;
-            const n = Number(val);
+    siteName?: string;
-            return Number.isInteger(n) && n >= 1 && n <= 65535;
+    mode: string | null;
-        },
+    ip: string;
-        { message: "Port must be between 1 and 65535" }
+    port: number;
-    )
+    authToken?: string | null;
-});
+};
+
+type ResourceTargetsResponse = {
+    targets: TargetRow[];
+};
 
 export default function SshSettingsPage(props: {
     params: Promise<{ orgId: string }>;
@@ -76,10 +78,23 @@ export default function SshSettingsPage(props: {
     const params = use(props.params);
     const { resource, updateResource } = useResourceContext();
     const { isPaidUser } = usePaidStatus();
+    const api = createApiClient(useEnvContext());
     const disabled = !isPaidUser(
         tierMatrix[TierFeature.AdvancedPublicResources]
     );
 
+    const { data: targetsResponse, isLoading: isLoadingTargets } = useQuery({
+        queryKey: ["resourceTargets", resource.resourceId, params.orgId, "ssh"],
+        queryFn: async () => {
+            const res = await api.get(`/resource/${resource.resourceId}/targets`);
+            return res.data.data as ResourceTargetsResponse;
+        }
+    });
+
+    if (isLoadingTargets) {
+        return null;
+    }
+
     return (
         <SettingsContainer>
             <PaidFeaturesAlert
@@ -90,6 +105,7 @@ export default function SshSettingsPage(props: {
                 resource={resource}
                 updateResource={updateResource}
                 disabled={disabled}
+                targetsResponse={targetsResponse ?? { targets: [] }}
             />
         </SettingsContainer>
     );
@@ -99,146 +115,145 @@ function SshServerForm({
     orgId,
     resource,
     updateResource,
-    disabled
+    disabled,
+    targetsResponse
 }: {
     orgId: string;
     resource: GetResourceResponse;
     updateResource: ResourceContextType["updateResource"];
     disabled: boolean;
+    targetsResponse: ResourceTargetsResponse;
 }) {
     const t = useTranslations();
     const api = createApiClient(useEnvContext());
     const router = useRouter();
 
     const isNativeInitially = resource.authDaemonMode === "native";
+    const targets = targetsResponse.targets.filter((t) => t.mode === "ssh");
+    const firstTarget = targets[0];
+    const initialPamMode =
+        (resource.pamMode as "passthrough" | "push") || "passthrough";
+    const initialStandardDaemonLocation = isNativeInitially
+        ? "site"
+        : ((resource.authDaemonMode as "site" | "remote") || "site");
+    const useSingleSiteOnLoad =
+        !isNativeInitially &&
+        initialPamMode === "push" &&
+        initialStandardDaemonLocation === "site";
 
-    const [sshServerMode, setSshServerMode] = useState<"standard" | "native">(
+    const [sshServerMode] = useState<"standard" | "native">(
         isNativeInitially ? "native" : "standard"
     );
     const isNative = sshServerMode === "native";
 
-    const [pamMode, setPamMode] = useState<"passthrough" | "push">(
+    const formSchema = useMemo(
-        (resource.pamMode as "passthrough" | "push") || "passthrough"
+        () => createSshSettingsFormSchema(t, { isNative }),
+        [t, isNative]
     );
 
-    const [standardDaemonLocation, setStandardDaemonLocation] = useState<
+    const form = useForm<SshSettingsFormValues>({
-        "site" | "remote"
+        resolver: zodResolver(formSchema),
-    >(
-        isNativeInitially
-            ? "site"
-            : (resource.authDaemonMode as "site" | "remote") || "site"
-    );
-
-    const form = useForm({
-        resolver: zodResolver(sshFormSchema),
         defaultValues: {
-            authDaemonPort: (resource as any).authDaemonPort
+            pamMode: initialPamMode,
-                ? String((resource as any).authDaemonPort)
+            standardDaemonLocation: initialStandardDaemonLocation,
-                : "22123"
+            authDaemonPort: (resource as { authDaemonPort?: number })
+                .authDaemonPort
+                ? String((resource as { authDaemonPort?: number }).authDaemonPort)
+                : "22123",
+            selectedSites:
+                isNativeInitially || useSingleSiteOnLoad
+                    ? []
+                    : targets.map((target) => ({
+                          siteId: target.siteId,
+                          name: target.siteName ?? String(target.siteId),
+                          type: "newt" as const
+                      })),
+            selectedSite:
+                useSingleSiteOnLoad && firstTarget
+                    ? {
+                          siteId: firstTarget.siteId,
+                          name:
+                              firstTarget.siteName ??
+                              String(firstTarget.siteId),
+                          type: "newt" as const
+                      }
+                    : null,
+            selectedNativeSite:
+                isNativeInitially && firstTarget
+                    ? {
+                          siteId: firstTarget.siteId,
+                          name:
+                              firstTarget.siteName ??
+                              String(firstTarget.siteId),
+                          type: "newt" as const
+                      }
+                    : null,
+            destination: isNativeInitially
+                ? ""
+                                : (firstTarget?.ip ?? ""),
+            destinationPort: isNativeInitially
+                ? "22"
+                : firstTarget
+                                    ? String(firstTarget.port)
+                  : "22"
         }
     });
 
-    // Standard mode: multi-site
-    const [selectedSites, setSelectedSites] = useState<Selectedsite[]>([]);
-    const [selectedSite, setSelectedSite] = useState<Selectedsite | null>(null);
-    const [bgDestination, setBgDestination] = useState("");
-    const [bgDestinationPort, setBgDestinationPort] = useState("22");
     const [existingTargets, setExistingTargets] = useState<ExistingTarget[]>(
-        []
+        () =>
+            isNativeInitially
+                ? []
+                : targets.map((target) => ({
+                      targetId: target.targetId,
+                      siteId: target.siteId
+                  }))
     );
 
-    // Native mode: single site
-    const [selectedNativeSite, setSelectedNativeSite] =
-        useState<Selectedsite | null>(null);
     const [nativeExistingTarget, setNativeExistingTarget] =
-        useState<ExistingTarget | null>(null);
+        useState<ExistingTarget | null>(() =>
-    const [nativeSiteOpen, setNativeSiteOpen] = useState(false);
+            isNativeInitially && firstTarget
-
+                ? {
-    const { data: bgTargetsResponse } = useQuery({
+                      targetId: firstTarget.targetId,
-        queryKey: ["resourceTargets", resource.resourceId, orgId, "ssh"],
+                      siteId: firstTarget.siteId,
-        queryFn: async () => {
+                      authToken: firstTarget.authToken
-            const res = await api.get(`/resource/${resource.resourceId}/targets`);
+                  }
-            return res.data.data as {
+                : null
-                targets: Array<{
-                    targetId: number;
-                    resourceId: number;
-                    siteId: number;
-                    siteName?: string;
-                    mode: string | null;
-                    ip: string;
-                    port: number;
-                    authToken?: string | null;
-                }>;
-            };
-        }
-    });
-
-    useEffect(() => {
-        if (!bgTargetsResponse?.targets?.length) return;
-        const targets = bgTargetsResponse.targets.filter(
-            (t) => t.mode === "ssh"
         );
-        if (!targets.length) return;
+    const [nativeSiteOpen, setNativeSiteOpen] = useState(false);
-        const first = targets[0];
-        if (isNativeInitially) {
-            setSelectedNativeSite({
-                siteId: first.siteId,
-                name: first.siteName ?? String(first.siteId),
-                type: "newt" as const
-            });
-            setNativeExistingTarget({
-                targetId: first.targetId,
-                siteId: first.siteId,
-                authToken: first.authToken
-            });
-        } else {
-            setBgDestination(first.ip);
-            setBgDestinationPort(String(first.port));
-            setExistingTargets(
-                targets.map((t) => ({
-                    targetId: t.targetId,
-                    siteId: t.siteId,
-                    authToken: t.authToken
-                }))
-            );
-            setSelectedSites(
-                targets.map((t) => ({
-                    siteId: t.siteId,
-                    name: t.siteName ?? String(t.siteId),
-                    type: "newt" as const
-                }))
-            );
-        }
-    }, [bgTargetsResponse]);
-
     const [, formAction, isSubmitting] = useActionState(save, null);
 
+    const pamMode = form.watch("pamMode");
+    const standardDaemonLocation = form.watch("standardDaemonLocation");
+    const selectedNativeSite = form.watch("selectedNativeSite");
+
     async function save() {
         const isValid = await form.trigger();
         if (!isValid) return;
 
-        const effectiveMode = isNative ? "native" : standardDaemonLocation;
+        const values = form.getValues();
-        const portVal = form.getValues().authDaemonPort;
+        const effectiveMode = isNative ? "native" : values.standardDaemonLocation;
         const effectivePort =
-            !isNative && standardDaemonLocation === "remote" && portVal
+            !isNative &&
-                ? Number(portVal)
+            values.standardDaemonLocation === "remote" &&
+            values.authDaemonPort
+                ? Number(values.authDaemonPort)
                 : null;
 
         try {
             await api.post(`/resource/${resource.resourceId}`, {
-                pamMode,
+                pamMode: values.pamMode,
                 authDaemonMode: effectiveMode,
                 authDaemonPort: effectivePort
             });
 
             updateResource({
                 ...resource,
-                pamMode,
+                pamMode: values.pamMode,
                 authDaemonMode: effectiveMode
             });
 
             if (isNative) {
-                if (selectedNativeSite) {
+                if (values.selectedNativeSite) {
                     if (nativeExistingTarget) {
                         await api.post(
                             `/target/${nativeExistingTarget.targetId}`,
@@ -270,23 +285,34 @@ function SshServerForm({
                     }
                 }
             } else {
-                if (bgDestination && bgDestinationPort) {
+                const useMultiSite =
-                    const selectedSiteIds = new Set(
+                    values.standardDaemonLocation !== "site" ||
-                        selectedSites.map((s) => s.siteId)
+                    values.pamMode === "passthrough";
-                    );
+                const activeSites = useMultiSite
-                    const existingSiteIds = new Set(
+                    ? values.selectedSites
-                        existingTargets.map((t) => t.siteId)
+                    : values.selectedSite
-                    );
+                      ? [values.selectedSite]
+                      : [];
+                const selectedSiteIds = new Set(
+                    activeSites.map((s) => s.siteId)
+                );
+                const existingSiteIds = new Set(
+                    existingTargets.map((t) => t.siteId)
+                );
 
-                    const toDelete = existingTargets.filter(
+                const toDelete = existingTargets.filter(
-                        (t) => !selectedSiteIds.has(t.siteId)
+                    (t) => !selectedSiteIds.has(t.siteId)
-                    );
+                );
-                    await Promise.all(
+                await Promise.all(
-                        toDelete.map((t) =>
+                    toDelete.map((t) =>
-                            api.delete(`/target/${t.targetId}`)
+                        api.delete(
+                            `/org/${orgId}/browser-gateway-target/${t.browserGatewayTargetId}`
+>>>>>>> 8ee520dbb58f6bd4009581c79322f77b17ff6757
                         )
-                    );
+                    )
+                );
 
+<<<<<<< HEAD
                     const toUpdate = existingTargets.filter((t) =>
                         selectedSiteIds.has(t.siteId)
                     );
@@ -297,60 +323,52 @@ function SshServerForm({
                                 {
                                     mode: "ssh",
                                     ip: bgDestination,
-                                    port: Number(bgDestinationPort),
+                                    api.delete(`/target/${t.targetId}`)
-                                    siteId: t.siteId,
-                                    authToken: t.authToken,
-                                    hcEnabled: false
                                 }
                             )
-                        )
+                );
-                    );
 
+<<<<<<< HEAD
                     const toCreate = selectedSites.filter(
                         (s) => !existingSiteIds.has(s.siteId)
                     );
-                    const created = await Promise.all(
+                                        `/target/${t.targetId}`,
                         toCreate.map((s) =>
-                            api.put(
+                                            mode: "ssh",
-                                `/resource/${resource.resourceId}/target`,
+                                            ip: values.destination,
-                                {
+                                            port: Number(values.destinationPort),
-                                    siteId: s.siteId,
+                                            siteId: t.siteId,
-                                    mode: "ssh",
+                                            authToken: t.authToken,
-                                    ip: bgDestination,
+                                            hcEnabled: false
                                     port: Number(bgDestinationPort),
                                     hcEnabled: false
-                                }
+                                )
-                            )
+                            );
-                        )
-                    );
 
+                    )
+                );
+
+<<<<<<< HEAD
                     const newTargets: ExistingTarget[] = created.map(
                         (res, i) => ({
-                            targetId: res.data.data.targetId,
+                                        `/resource/${resource.resourceId}/target`,
                             siteId: toCreate[i].siteId,
                             authToken: res.data.data.authToken
-                        })
+                                            mode: "ssh",
-                    );
+                                            ip: values.destination,
-                    setExistingTargets([...toUpdate, ...newTargets]);
+                                            port: Number(values.destinationPort),
-                }
+                                            hcEnabled: false
-            }
+                const newTargets: ExistingTarget[] = created.map((res, i) => ({
-
+                    browserGatewayTargetId:
-            toast({
+                                )
-                title: t("settingsUpdated"),
+                            );
-                description: t("settingsUpdatedDescription")
             });
-            router.refresh();
+                            const newTargets: ExistingTarget[] = created.map((res, i) => ({
-        } catch (err) {
+                                targetId: res.data.data.targetId,
-            console.error(err);
+                                siteId: toCreate[i].siteId,
-            toast({
+                                authToken: res.data.data.authToken
-                variant: "destructive",
+                            }));
-                title: t("settingsErrorUpdate"),
+                            setExistingTargets([...toUpdate, ...newTargets]);
-                description: formatAxiosError(
-                    err,
-                    t("settingsErrorUpdateDescription")
-                )
-            });
-        }
     }
 
     const authMethodOptions: StrategyOption<"passthrough" | "push">[] = [
@@ -382,6 +400,9 @@ function SshServerForm({
     const showDaemonLocation = !isNative && pamMode === "push";
     const showDaemonPort =
         !isNative && pamMode === "push" && standardDaemonLocation === "remote";
+    const useMultiSiteTargetForm =
+        !isNative &&
+        (standardDaemonLocation !== "site" || pamMode === "passthrough");
 
     return (
         <SettingsSection>
@@ -395,160 +416,189 @@ function SshServerForm({
                 disabled={disabled}
                 className={disabled ? "opacity-50 pointer-events-none" : ""}
             >
-            <SettingsSectionBody>
+                <Form {...form}>
-                <SettingsSectionForm variant="half">
+                    <SettingsSectionBody>
-                    <div className="space-y-3">
+                        <SettingsSectionForm variant="half">
-                        <SettingsSubsectionTitle>
+                            <div className="space-y-2">
-                            {t("sshServerMode")}
+                                <p className="font-semibold text-sm">{t("sshServerMode")}</p>
-                        </SettingsSubsectionTitle>
+                                <Badge variant="secondary">
-                        <Badge variant="secondary">
+                                    {sshServerMode == "standard"
-                            {sshServerMode == "standard"
+                                        ? t("sshServerModeStandard")
-                                ? t("sshServerModeStandard")
+                                        : t("sshServerModePangolin")}
-                                : t("sshServerModePangolin")}
+                                </Badge>
-                        </Badge>
+                            </div>
-                    </div>
 
-                    <div className="space-y-3">
+                            <div className="space-y-2">
-                        <SettingsSubsectionTitle>
+                                <p className="font-semibold text-sm">{t("sshAuthenticationMethod")}</p>
-                            {t("sshAuthenticationMethod")}
+                                <StrategySelect<"passthrough" | "push">
-                        </SettingsSubsectionTitle>
+                                    value={pamMode}
-                        <StrategySelect<"passthrough" | "push">
+                                    options={authMethodOptions}
-                            value={pamMode}
+                                    onChange={(value) =>
-                            options={authMethodOptions}
+                                        form.setValue("pamMode", value, {
-                            onChange={setPamMode}
+                                            shouldValidate: true
-                            cols={2}
+                                        })
-                        />
+                                    }
-                    </div>
+                                    cols={2}
+                                />
+                            </div>
 
-                    {showDaemonLocation && (
+                            {showDaemonLocation && (
-                        <div className="space-y-3">
+                                <div className="space-y-2">
-                            <SettingsSubsectionTitle>
+                                    <p className="font-semibold text-sm">{t("sshAuthDaemonLocation")}</p>
-                                {t("sshAuthDaemonLocation")}
+                                    <StrategySelect<"site" | "remote">
-                            </SettingsSubsectionTitle>
+                                        value={standardDaemonLocation}
-                            <StrategySelect<"site" | "remote">
+                                        options={daemonLocationOptions}
-                                value={standardDaemonLocation}
+                                        onChange={(value) =>
-                                options={daemonLocationOptions}
+                                            form.setValue(
-                                onChange={setStandardDaemonLocation}
+                                                "standardDaemonLocation",
-                                cols={2}
+                                                value,
-                            />
+                                                { shouldValidate: true }
-                            <p className="text-sm text-muted-foreground">
+                                            )
-                                {t("sshDaemonDisclaimer")}{" "}
+                                        }
-                                <a
+                                        cols={2}
-                                    href="https://docs.pangolin.net/manage/resources/public/ssh"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="text-primary hover:underline inline-flex items-center gap-1"
-                                >
-                                    {t("learnMore")}
-                                    <ExternalLink className="size-3.5 shrink-0" />
-                                </a>
-                            </p>
-                        </div>
-                    )}
-
-                    {showDaemonPort && (
-                        <Form {...form}>
-                            <FormField
-                                control={form.control}
-                                name="authDaemonPort"
-                                render={({ field }) => (
-                                    <FormItem>
-                                        <FormLabel>
-                                            {t("sshDaemonPort")}
-                                        </FormLabel>
-                                        <FormControl>
-                                            <Input
-                                                type="number"
-                                                min={1}
-                                                max={65535}
-                                                {...field}
-                                            />
-                                        </FormControl>
-                                        <FormMessage />
-                                    </FormItem>
-                                )}
-                            />
-                        </Form>
-                    )}
-
-                    <div className="space-y-3">
-                        <SettingsSubsectionHeader>
-                            <SettingsSubsectionTitle>
-                                {t("sshServerDestination")}
-                            </SettingsSubsectionTitle>
-                            <SettingsSubsectionDescription>
-                                {t("sshServerDestinationDescription")}
-                            </SettingsSubsectionDescription>
-                        </SettingsSubsectionHeader>
-                        {isNative ? (
-                            <Popover
-                                open={nativeSiteOpen}
-                                onOpenChange={setNativeSiteOpen}
-                            >
-                                <PopoverTrigger asChild>
-                                    <Button
-                                        variant="outline"
-                                        role="combobox"
-                                        className="w-full max-w-xs justify-between font-normal"
-                                    >
-                                        <span className="truncate">
-                                            {selectedNativeSite?.name ??
-                                                t("siteSelect")}
-                                        </span>
-                                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                                    </Button>
-                                </PopoverTrigger>
-                                <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
-                                    <SitesSelector
-                                        orgId={orgId}
-                                        selectedSite={selectedNativeSite}
-                                        onSelectSite={(site) => {
-                                            setSelectedNativeSite(site);
-                                            setNativeSiteOpen(false);
-                                        }}
                                     />
-                                </PopoverContent>
+                                    <p className="text-sm text-muted-foreground">
-                            </Popover>
+                                        {t("sshDaemonDisclaimer")}{" "}
-                        ) : standardDaemonLocation !== "site" ||
+                                        <a
-                          pamMode === "passthrough" ? (
+                                            href="https://docs.pangolin.net/manage/resources/public/ssh"
-                            <BrowserGatewayTargetForm
+                                            target="_blank"
-                                orgId={orgId}
+                                            rel="noopener noreferrer"
-                                multiSite={true}
+                                            className="text-primary hover:underline inline-flex items-center gap-1"
-                                selectedSites={selectedSites}
+                                        >
-                                onSitesChange={setSelectedSites}
+                                            {t("learnMore")}
-                                destination={bgDestination}
+                                            <ExternalLink className="size-3.5 shrink-0" />
-                                destinationPort={bgDestinationPort}
+                                        </a>
-                                onDestinationChange={setBgDestination}
+                                    </p>
-                                onDestinationPortChange={setBgDestinationPort}
+                                </div>
-                                learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh"
+                            )}
-                                defaultPort={22}
+
-                            />
+                            {showDaemonPort && (
-                        ) : (
+                                <div className="w-full md:w-1/2">
-                            <BrowserGatewayTargetForm
+                                    <FormField
-                                orgId={orgId}
+                                        control={form.control}
-                                multiSite={false}
+                                        name="authDaemonPort"
-                                selectedSite={selectedSite}
+                                        render={({ field }) => (
-                                onSiteChange={setSelectedSite}
+                                            <FormItem>
-                                destination={bgDestination}
+                                                <FormLabel>
-                                destinationPort={bgDestinationPort}
+                                                    {t("sshDaemonPort")}
-                                onDestinationChange={setBgDestination}
+                                                </FormLabel>
-                                onDestinationPortChange={setBgDestinationPort}
+                                                <FormControl>
-                                learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh"
+                                                    <Input
-                                defaultPort={22}
+                                                        type="number"
-                            />
+                                                        min={1}
-                        )}
+                                                        max={65535}
-                    </div>
+                                                        {...field}
-                </SettingsSectionForm>
+                                                    />
-            </SettingsSectionBody>
+                                                </FormControl>
-            <form action={formAction} className="flex justify-end mt-4">
+                                                <FormMessage />
-                <Button
+                                            </FormItem>
-                    disabled={isSubmitting}
+                                        )}
-                    loading={isSubmitting}
+                                    />
-                    type="submit"
+                                </div>
-                >
+                            )}
-                    {t("saveSettings")}
+
-                </Button>
+                            <div className="space-y-3">
-            </form>
+                                <SettingsSubsectionHeader>
+                                    <SettingsSubsectionTitle>
+                                        {t("sshServerDestination")}
+                                    </SettingsSubsectionTitle>
+                                    <SettingsSubsectionDescription>
+                                        {t("sshServerDestinationDescription")}
+                                    </SettingsSubsectionDescription>
+                                </SettingsSubsectionHeader>
+                                {isNative ? (
+                                    <FormField
+                                        control={form.control}
+                                        name="selectedNativeSite"
+                                        render={() => (
+                                            <FormItem>
+                                                <Popover
+                                                    open={nativeSiteOpen}
+                                                    onOpenChange={
+                                                        setNativeSiteOpen
+                                                    }
+                                                >
+                                                    <PopoverTrigger asChild>
+                                                        <FormControl>
+                                                            <Button
+                                                                variant="outline"
+                                                                role="combobox"
+                                                                className="w-full max-w-xs justify-between font-normal"
+                                                            >
+                                                                <span className="truncate">
+                                                                    {selectedNativeSite?.name ??
+                                                                        t(
+                                                                            "siteSelect"
+                                                                        )}
+                                                                </span>
+                                                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                                            </Button>
+                                                        </FormControl>
+                                                    </PopoverTrigger>
+                                                    <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+                                                        <SitesSelector
+                                                            orgId={orgId}
+                                                            selectedSite={
+                                                                selectedNativeSite
+                                                            }
+                                                            onSelectSite={(
+                                                                site
+                                                            ) => {
+                                                                form.setValue(
+                                                                    "selectedNativeSite",
+                                                                    site,
+                                                                    {
+                                                                        shouldValidate:
+                                                                            true
+                                                                    }
+                                                                );
+                                                                setNativeSiteOpen(
+                                                                    false
+                                                                );
+                                                            }}
+                                                        />
+                                                    </PopoverContent>
+                                                </Popover>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                ) : useMultiSiteTargetForm ? (
+                                    <BrowserGatewayTargetForm
+                                        control={form.control}
+                                        orgId={orgId}
+                                        multiSite={true}
+                                        sitesField="selectedSites"
+                                        destinationField="destination"
+                                        destinationPortField="destinationPort"
+                                        learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh"
+                                        defaultPort={22}
+                                    />
+                                ) : (
+                                    <BrowserGatewayTargetForm
+                                        control={form.control}
+                                        orgId={orgId}
+                                        multiSite={false}
+                                        siteField="selectedSite"
+                                        destinationField="destination"
+                                        destinationPortField="destinationPort"
+                                        learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh"
+                                        defaultPort={22}
+                                    />
+                                )}
+                            </div>
+                        </SettingsSectionForm>
+                    </SettingsSectionBody>
+                    <form action={formAction} className="flex justify-end mt-4">
+                        <Button
+                            disabled={isSubmitting}
+                            loading={isSubmitting}
+                            type="submit"
+                        >
+                            {t("saveSettings")}
+                        </Button>
+                    </form>
+                </Form>
             </fieldset>
         </SettingsSection>
     );

src/app/[orgId]/settings/resources/public/[niceId]/vnc/page.tsx

@@ -11,20 +11,23 @@ import {
 } from "@app/components/Settings";
 import { BrowserGatewayTargetForm } from "@app/components/BrowserGatewayTargetForm";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
-import { type Selectedsite } from "@app/components/site-selector";
 import { Button } from "@app/components/ui/button";
+import { Form } from "@app/components/ui/form";
 import { toast } from "@app/hooks/useToast";
 import { useResourceContext } from "@app/hooks/useResourceContext";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { createBrowserGatewayTargetFormSchema } from "@app/lib/browserGatewayTargetFormSchema";
+import type { BrowserGatewayTargetFormValues } from "@app/lib/browserGatewayTargetFormSchema";
 import { tierMatrix, TierFeature } from "@server/lib/billing/tierMatrix";
 import { createApiClient } from "@app/lib/api";
 import { formatAxiosError } from "@app/lib/api/formatAxiosError";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
-import { use, useActionState, useEffect, useState } from "react";
+import { use, useActionState, useMemo, useState } from "react";
-import { z } from "zod";
+import { useForm } from "react-hook-form";
 import { GetResourceResponse } from "@server/routers/resource";
 import type { ResourceContextType } from "@app/contexts/resourceContext";
 
@@ -33,16 +36,43 @@ type ExistingTarget = {
     siteId: number;
 };
 
-export default function SshSettingsPage(props: {
+type TargetRow = {
+    targetId: number;
+    resourceId: number;
+    siteId: number;
+    siteName?: string;
+    mode: string | null;
+    ip: string;
+    port: number;
+};
+
+type ResourceTargetsResponse = {
+    targets: TargetRow[];
+};
+
+export default function VncSettingsPage(props: {
     params: Promise<{ orgId: string }>;
 }) {
     const params = use(props.params);
     const { resource, updateResource } = useResourceContext();
     const { isPaidUser } = usePaidStatus();
+    const api = createApiClient(useEnvContext());
     const disabled = !isPaidUser(
         tierMatrix[TierFeature.AdvancedPublicResources]
     );
 
+    const { data: targetsResponse, isLoading: isLoadingTargets } = useQuery({
+        queryKey: ["resourceTargets", resource.resourceId, params.orgId, "vnc"],
+        queryFn: async () => {
+            const res = await api.get(`/resource/${resource.resourceId}/targets`);
+            return res.data.data as ResourceTargetsResponse;
+        }
+    });
+
+    if (isLoadingTargets) {
+        return null;
+    }
+
     return (
         <SettingsContainer>
             <PaidFeaturesAlert
@@ -53,6 +83,7 @@ export default function SshSettingsPage(props: {
                 resource={resource}
                 updateResource={updateResource}
                 disabled={disabled}
+                targetsResponse={targetsResponse ?? { targets: [] }}
             />
         </SettingsContainer>
     );
@@ -61,138 +92,103 @@ export default function SshSettingsPage(props: {
 function VncServerForm({
     orgId,
     resource,
-    updateResource,
+    disabled,
-    disabled
+    targetsResponse
 }: {
     orgId: string;
     resource: GetResourceResponse;
     updateResource: ResourceContextType["updateResource"];
     disabled: boolean;
+    targetsResponse: ResourceTargetsResponse;
 }) {
     const t = useTranslations();
     const api = createApiClient(useEnvContext());
     const router = useRouter();
+    const targets = targetsResponse.targets.filter((t) => t.mode === "vnc");
+    const firstTarget = targets[0];
 
-    // Standard mode: multi-site
+    const formSchema = useMemo(
-    const [selectedSites, setSelectedSites] = useState<Selectedsite[]>([]);
+        () => createBrowserGatewayTargetFormSchema(t),
-    const [bgDestination, setBgDestination] = useState("");
+        [t]
-    const [bgDestinationPort, setBgDestinationPort] = useState("22");
-    const [existingTargets, setExistingTargets] = useState<ExistingTarget[]>(
-        []
     );
 
-    // Native mode: single site
+    const form = useForm<BrowserGatewayTargetFormValues>({
-    const [selectedNativeSite, setSelectedNativeSite] =
+        resolver: zodResolver(formSchema),
-        useState<Selectedsite | null>(null);
+        defaultValues: {
-    const [nativeExistingTarget, setNativeExistingTarget] =
+            selectedSites: targets.map((target) => ({
-        useState<ExistingTarget | null>(null);
+                siteId: target.siteId,
-
+                name: target.siteName ?? String(target.siteId),
-    const { data: bgTargetsResponse } = useQuery({
+                type: "newt" as const
-        queryKey: ["resourceTargets", resource.resourceId, orgId, "vnc"],
+            })),
-        queryFn: async () => {
+            destination: firstTarget?.ip ?? "",
-            const res = await api.get(`/resource/${resource.resourceId}/targets`);
+            destinationPort: firstTarget ? String(firstTarget.port) : "5900"
-            return res.data.data as {
-                targets: Array<{
-                    targetId: number;
-                    resourceId: number;
-                    siteId: number;
-                    siteName?: string;
-                    mode: string | null;
-                    ip: string;
-                    port: number;
-                }>;
-            };
         }
     });
 
-    useEffect(() => {
+    const [existingTargets, setExistingTargets] = useState<ExistingTarget[]>(
-        if (!bgTargetsResponse?.targets?.length) return;
+        () =>
-        const targets = bgTargetsResponse.targets.filter(
+            targets.map((target) => ({
-            (t) => t.mode === "vnc"
+                targetId: target.targetId,
-        );
+                siteId: target.siteId
-        if (!targets.length) return;
-        const first = targets[0];
-
-        setBgDestination(first.ip);
-        setBgDestinationPort(String(first.port));
-        setExistingTargets(
-            targets.map((t) => ({
-                targetId: t.targetId,
-                siteId: t.siteId
             }))
-        );
+    );
-        setSelectedSites(
-            targets.map((t) => ({
-                siteId: t.siteId,
-                name: t.siteName ?? String(t.siteId),
-                type: "newt" as const
-            }))
-        );
-    }, [bgTargetsResponse]);
 
     const [, formAction, isSubmitting] = useActionState(save, null);
 
     async function save() {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const { selectedSites, destination, destinationPort } =
+            form.getValues();
+
         try {
-            if (bgDestination && bgDestinationPort) {
+            const selectedSiteIds = new Set(selectedSites.map((s) => s.siteId));
-                const selectedSiteIds = new Set(
+            const existingSiteIds = new Set(
-                    selectedSites.map((s) => s.siteId)
+                existingTargets.map((t) => t.siteId)
-                );
+            );
-                const existingSiteIds = new Set(
-                    existingTargets.map((t) => t.siteId)
-                );
 
-                const toDelete = existingTargets.filter(
+            const toDelete = existingTargets.filter(
-                    (t) => !selectedSiteIds.has(t.siteId)
+                (t) => !selectedSiteIds.has(t.siteId)
-                );
+            );
-                await Promise.all(
+            await Promise.all(toDelete.map((t) => api.delete(`/target/${t.targetId}`)));
-                    toDelete.map((t) =>
-                        api.delete(`/target/${t.targetId}`)
-                    )
-                );
 
-                const toUpdate = existingTargets.filter((t) =>
+            const toUpdate = existingTargets.filter((t) =>
-                    selectedSiteIds.has(t.siteId)
+                selectedSiteIds.has(t.siteId)
-                );
+            );
-                await Promise.all(
+            await Promise.all(
-                    toUpdate.map((t) =>
+                toUpdate.map((t) =>
-                        api.post(
+                    api.post(`/target/${t.targetId}`, {
-                            `/target/${t.targetId}`,
+                        mode: "vnc",
-                            {
+                        ip: destination,
-                                mode: "vnc",
+                        port: Number(destinationPort),
-                                ip: bgDestination,
+                        siteId: t.siteId,
-                                port: Number(bgDestinationPort),
+                        hcEnabled: false
-                                siteId: t.siteId,
+                    })
-                                hcEnabled: false
+                )
-                            }
+            );
-                        )
-                    )
-                );
 
-                const toCreate = selectedSites.filter(
+            const toCreate = selectedSites.filter(
-                    (s) => !existingSiteIds.has(s.siteId)
+                (s) => !existingSiteIds.has(s.siteId)
-                );
+            );
-                const created = await Promise.all(
+            const created = await Promise.all(
-                    toCreate.map((s) =>
+                toCreate.map((s) =>
-                        api.put(
+                    api.put(`/resource/${resource.resourceId}/target`, {
-                            `/resource/${resource.resourceId}/target`,
+                        siteId: s.siteId,
-                            {
+                        mode: "vnc",
-                                siteId: s.siteId,
+                        ip: destination,
-                                mode: "vnc",
+                        port: Number(destinationPort),
-                                ip: bgDestination,
+                        authToken: null,
-                                port: Number(bgDestinationPort),
+                        hcEnabled: false
-                                hcEnabled: false
+                    })
-                            }
+                )
-                        )
+            );
-                    )
-                );
 
-                const newTargets: ExistingTarget[] = created.map((res, i) => ({
+            const newTargets: ExistingTarget[] = created.map((res, i) => ({
-                    targetId: res.data.data.targetId,
+                targetId: res.data.data.targetId,
-                    siteId: toCreate[i].siteId
+                siteId: toCreate[i].siteId
-                }));
+            }));
-                setExistingTargets([...toUpdate, ...newTargets]);
+            setExistingTargets([...toUpdate, ...newTargets]);
-            }
 
             toast({
                 title: t("settingsUpdated"),
@@ -224,31 +220,31 @@ function VncServerForm({
                 disabled={disabled}
                 className={disabled ? "opacity-50 pointer-events-none" : ""}
             >
-                <SettingsSectionBody>
+                <Form {...form}>
-                    <SettingsSectionForm variant="half">
+                    <SettingsSectionBody>
-                        <BrowserGatewayTargetForm
+                        <SettingsSectionForm variant="half">
-                            orgId={orgId}
+                            <BrowserGatewayTargetForm
-                            multiSite={true}
+                                control={form.control}
-                            selectedSites={selectedSites}
+                                orgId={orgId}
-                            onSitesChange={setSelectedSites}
+                                multiSite={true}
-                            destination={bgDestination}
+                                sitesField="selectedSites"
-                            destinationPort={bgDestinationPort}
+                                destinationField="destination"
-                            onDestinationChange={setBgDestination}
+                                destinationPortField="destinationPort"
-                            onDestinationPortChange={setBgDestinationPort}
+                                learnMoreHref="https://docs.pangolin.net/manage/resources/public/vnc"
-                            learnMoreHref="https://docs.pangolin.net/manage/resources/public/vnc"
+                                defaultPort={5900}
-                            defaultPort={5900}
+                            />
-                        />
+                        </SettingsSectionForm>
-                    </SettingsSectionForm>
+                    </SettingsSectionBody>
-                </SettingsSectionBody>
+                    <form action={formAction} className="flex justify-end mt-4">
-                <form action={formAction} className="flex justify-end mt-4">
+                        <Button
-                    <Button
+                            disabled={isSubmitting}
-                        disabled={isSubmitting}
+                            loading={isSubmitting}
-                        loading={isSubmitting}
+                            type="submit"
-                        type="submit"
+                        >
-                    >
+                            {t("saveSettings")}
-                        {t("saveSettings")}
+                        </Button>
-                    </Button>
+                    </form>
-                </form>
+                </Form>
             </fieldset>
         </SettingsSection>
     );

src/app/[orgId]/settings/resources/public/create/page.tsx

@@ -50,6 +50,12 @@ import { toast } from "@app/hooks/useToast";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import { tierMatrix, TierFeature } from "@server/lib/billing/tierMatrix";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
+import {
+    createBrowserGatewayTargetFormSchema,
+    createSshSettingsFormSchema,
+    selectedSiteSchema,
+    type SshSettingsFormValues
+} from "@app/lib/browserGatewayTargetFormSchema";
 import { DockerManager, DockerState } from "@app/lib/docker";
 import { orgQueries } from "@app/lib/queries";
 import { finalizeSubdomainSanitize } from "@app/lib/subdomain-utils";
@@ -79,100 +85,134 @@ import {
     useTransition,
     useEffect
 } from "react";
-import { useForm } from "react-hook-form";
+import { useForm, type Resolver } from "react-hook-form";
 import { z } from "zod";
 
-const baseResourceFormSchema = z.object({
+type TranslateFn = (key: string) => string;
-    name: z.string().min(1).max(255),
-    http: z.boolean()
-});
 
-const httpResourceFormSchema = z.object({
+function createBaseResourceFormSchema(t: TranslateFn) {
-    domainId: z.string().nonempty(),
+    return z.object({
-    subdomain: z.string().optional()
+        name: z
-});
+            .string()
+            .min(1, { message: t("nameRequired") })
+            .max(255, {
+                message: t("createInternalResourceDialogNameMaxLength")
+            }),
+        http: z.boolean()
+    });
+}
 
-const tcpUdpResourceFormSchema = z.object({
+function createHttpResourceFormSchema(t: TranslateFn) {
-    protocol: z.string(),
+    return z.object({
-    proxyPort: z.int().min(1).max(65535)
+        domainId: z.string().min(1, { message: t("domainRequired") }),
-});
+        subdomain: z.string().optional()
+    });
+}
 
-const sshDaemonPortSchema = z.object({
+function createTcpUdpResourceFormSchema(t: TranslateFn) {
-    authDaemonPort: z.string().refine(
+    return z.object({
-        (val) => {
+        protocol: z.string(),
-            if (!val) return true;
+        proxyPort: z
-            const n = Number(val);
+            .number({ error: t("proxyPortRequired") })
-            return Number.isInteger(n) && n >= 1 && n <= 65535;
+            .int({ error: t("healthCheckPortInvalid") })
-        },
+            .min(1, { message: t("healthCheckPortInvalid") })
-        { message: "Port must be between 1 and 65535" }
+            .max(65535, { message: t("healthCheckPortInvalid") })
-    )
+    });
-});
+}
 
-const addTargetSchema = z
+function createSshDaemonPortSchema(t: TranslateFn) {
-    .object({
+    return z.object({
-        ip: z.string().refine(isTargetValid),
+        authDaemonPort: z.string().refine(
-        method: z.string().nullable(),
+            (val) => {
-        port: z.coerce.number<number>().int().positive(),
+                if (!val) return true;
-        siteId: z.int().positive(),
+                const n = Number(val);
-        path: z.string().optional().nullable(),
+                return Number.isInteger(n) && n >= 1 && n <= 65535;
-        pathMatchType: z
+            },
-            .enum(["exact", "prefix", "regex"])
+            { message: t("healthCheckPortInvalid") }
-            .optional()
+        )
-            .nullable(),
+    });
-        rewritePath: z.string().optional().nullable(),
+}
-        rewritePathType: z
+
-            .enum(["exact", "prefix", "regex", "stripPrefix"])
+function createAddTargetSchema(t: TranslateFn) {
-            .optional()
+    return z
-            .nullable(),
+        .object({
-        priority: z.int().min(1).max(1000).optional()
+            ip: z.string().refine(isTargetValid, {
-    })
+                message: t("targetErrorInvalidIpDescription")
-    .refine(
+            }),
-        (data) => {
+            method: z.string().nullable(),
-            if (data.path && !data.pathMatchType) {
+            port: z.coerce
-                return false;
+                .number<number>({ error: t("targetErrorInvalidPortDescription") })
-            }
+                .int({ error: t("targetErrorInvalidPortDescription") })
-            if (data.pathMatchType && !data.path) {
+                .positive({ error: t("targetErrorInvalidPortDescription") }),
-                return false;
+            siteId: z
-            }
+                .int({ error: t("siteRequired") })
-            if (data.path && data.pathMatchType) {
+                .positive({ error: t("siteRequired") }),
-                switch (data.pathMatchType) {
+            path: z.string().optional().nullable(),
-                    case "exact":
+            pathMatchType: z
-                    case "prefix":
+                .enum(["exact", "prefix", "regex"])
-                        return data.path.startsWith("/");
+                .optional()
-                    case "regex":
+                .nullable(),
-                        try {
+            rewritePath: z.string().optional().nullable(),
-                            new RegExp(data.path);
+            rewritePathType: z
-                            return true;
+                .enum(["exact", "prefix", "regex", "stripPrefix"])
-                        } catch {
+                .optional()
-                            return false;
+                .nullable(),
-                        }
+            priority: z
-                }
+                .int()
-            }
+                .min(1, { message: t("healthCheckPortInvalid") })
-            return true;
+                .max(1000, { message: t("healthCheckPortInvalid") })
-        },
+                .optional()
-        {
+        })
-            error: "Invalid path configuration"
+        .refine(
-        }
+            (data) => {
-    )
+                if (data.path && !data.pathMatchType) {
-    .refine(
-        (data) => {
-            if (data.rewritePath && !data.rewritePathType) {
-                return false;
-            }
-            if (data.rewritePathType && !data.rewritePath) {
-                if (data.rewritePathType !== "stripPrefix") {
                     return false;
                 }
+                if (data.pathMatchType && !data.path) {
+                    return false;
+                }
+                if (data.path && data.pathMatchType) {
+                    switch (data.pathMatchType) {
+                        case "exact":
+                        case "prefix":
+                            return data.path.startsWith("/");
+                        case "regex":
+                            try {
+                                new RegExp(data.path);
+                                return true;
+                            } catch {
+                                return false;
+                            }
+                    }
+                }
+                return true;
+            },
+            {
+                message: t("invalidPathConfiguration")
             }
-            return true;
+        )
-        },
+        .refine(
-        {
+            (data) => {
-            error: "Invalid rewrite path configuration"
+                if (data.rewritePath && !data.rewritePathType) {
-        }
+                    return false;
-    );
+                }
+                if (data.rewritePathType && !data.rewritePath) {
+                    if (data.rewritePathType !== "stripPrefix") {
+                        return false;
+                    }
+                }
+                return true;
+            },
+            {
+                message: t("invalidRewritePathConfiguration")
+            }
+        );
+}
 
 type NewResourceType = "http" | "ssh" | "rdp" | "vnc" | "tcp" | "udp";
 
+type CreateBgTargetFormValues = SshSettingsFormValues;
+
 export default function Page() {
     const { env } = useEnvContext();
     const api = createApiClient({ env });
@@ -223,29 +263,6 @@ export default function Page() {
         useState<Selectedsite | null>(null);
     const [nativeSiteOpen, setNativeSiteOpen] = useState(false);
 
-    // Browser-gateway targets state (SSH standard, RDP, VNC)
-    const [bgSelectedSites, setBgSelectedSites] = useState<Selectedsite[]>([]);
-    const [bgSelectedSite, setBgSelectedSite] = useState<Selectedsite | null>(
-        null
-    );
-    const [bgDestination, setBgDestination] = useState("");
-    const [bgDestinationPort, setBgDestinationPort] = useState("22");
-
-    // Reset BG state when resource type changes
-    useEffect(() => {
-        if (resourceType === "rdp") {
-            setBgDestinationPort("3389");
-        } else if (resourceType === "vnc") {
-            setBgDestinationPort("5900");
-        } else if (resourceType === "ssh") {
-            setBgDestinationPort("22");
-        }
-        setBgDestination("");
-        setBgSelectedSites([]);
-        setBgSelectedSite(null);
-        setNativeSelectedSite(null);
-    }, [resourceType]);
-
     useEffect(() => {
         if (build !== "saas") return;
 
@@ -278,6 +295,39 @@ export default function Page() {
         pamMode === "push" &&
         standardDaemonLocation === "remote";
 
+    const bgTargetFormSchema = useMemo(() => {
+        if (resourceType === "ssh" && !isNative) {
+            return createSshSettingsFormSchema(t, { isNative: false });
+        }
+        if (resourceType === "rdp" || resourceType === "vnc") {
+            return createBrowserGatewayTargetFormSchema(t);
+        }
+        return z.object({
+            selectedSites: z.array(selectedSiteSchema),
+            selectedSite: selectedSiteSchema.nullable(),
+            destination: z.string(),
+            destinationPort: z.string(),
+            pamMode: z.enum(["passthrough", "push"]),
+            standardDaemonLocation: z.enum(["site", "remote"])
+        });
+    }, [resourceType, isNative, t]);
+
+    const bgTargetForm = useForm<CreateBgTargetFormValues>({
+        resolver: zodResolver(
+            bgTargetFormSchema
+        ) as unknown as Resolver<CreateBgTargetFormValues>,
+        defaultValues: {
+            selectedSites: [],
+            selectedSite: null,
+            selectedNativeSite: null,
+            destination: "",
+            destinationPort: "22",
+            pamMode: "passthrough",
+            standardDaemonLocation: "site",
+            authDaemonPort: "22123"
+        }
+    });
+
     // Whether raw (TCP/UDP) resources are available
     const rawResourcesAllowed =
         env.flags.allowRawResources &&
@@ -302,6 +352,24 @@ export default function Page() {
         }
     }, [availableTypes, resourceType]);
 
+    const baseResourceFormSchema = useMemo(
+        () => createBaseResourceFormSchema(t),
+        [t]
+    );
+    const httpResourceFormSchema = useMemo(
+        () => createHttpResourceFormSchema(t),
+        [t]
+    );
+    const tcpUdpResourceFormSchema = useMemo(
+        () => createTcpUdpResourceFormSchema(t),
+        [t]
+    );
+    const sshDaemonPortSchema = useMemo(
+        () => createSshDaemonPortSchema(t),
+        [t]
+    );
+    const addTargetSchema = useMemo(() => createAddTargetSchema(t), [t]);
+
     const baseForm = useForm({
         resolver: zodResolver(baseResourceFormSchema),
         defaultValues: {
@@ -330,6 +398,31 @@ export default function Page() {
         }
     });
 
+    useEffect(() => {
+        const defaultPort =
+            resourceType === "rdp"
+                ? "3389"
+                : resourceType === "vnc"
+                  ? "5900"
+                  : "22";
+        bgTargetForm.reset({
+            selectedSites: [],
+            selectedSite: null,
+            selectedNativeSite: null,
+            destination: "",
+            destinationPort: defaultPort,
+            pamMode,
+            standardDaemonLocation,
+            authDaemonPort: sshDaemonPortForm.getValues().authDaemonPort
+        });
+        setNativeSelectedSite(null);
+    }, [resourceType]);
+
+    useEffect(() => {
+        bgTargetForm.setValue("pamMode", pamMode);
+        bgTargetForm.setValue("standardDaemonLocation", standardDaemonLocation);
+    }, [pamMode, standardDaemonLocation]);
+
     // Sync form http field with resourceType
     useEffect(() => {
         baseForm.setValue("http", isHttpResource);
@@ -509,20 +602,23 @@ export default function Page() {
                             );
                         }
                     } else {
-                        const sitesToCreate =
+                        const bgValues = bgTargetForm.getValues();
-                            standardDaemonLocation !== "site"
+                        const useMultiSite =
-                                ? bgSelectedSites
+                            standardDaemonLocation !== "site" ||
-                                : bgSelectedSite
+                            pamMode === "passthrough";
-                                  ? [bgSelectedSite]
+                        const sitesToCreate = useMultiSite
-                                  : [];
+                            ? bgValues.selectedSites
+                            : bgValues.selectedSite
+                              ? [bgValues.selectedSite]
+                              : [];
                         for (const site of sitesToCreate) {
                             await api.put(
                                 `/resource/${id}/target`,
                                 {
                                     siteId: site.siteId,
                                     mode: "ssh",
-                                    ip: bgDestination,
+                                    ip: bgValues.destination,
-                                    port: Number(bgDestinationPort),
+                                    port: Number(bgValues.destinationPort),
                                     hcEnabled: false
                                 }
                             );
@@ -533,18 +629,19 @@ export default function Page() {
                         `/${orgId}/settings/resources/public/${newNiceId}`
                     );
                 } else if (resourceType === "rdp" || resourceType === "vnc") {
-                    for (const site of bgSelectedSites) {
+                    const bgValues = bgTargetForm.getValues();
+                    for (const site of bgValues.selectedSites) {
                         await api.put(
                             `/resource/${id}/target`,
                             {
                                 siteId: site.siteId,
                                 mode: resourceType,
-                                ip: bgDestination,
+                                ip: bgValues.destination,
-                                port: Number(bgDestinationPort),
+                                port: Number(bgValues.destinationPort),
                                 authToken: null,
                                 hcEnabled: false
                             }
-                        );
+                         );
                     }
 
                     router.push(
@@ -764,32 +861,56 @@ export default function Page() {
 
                                         {/* Domain/Subdomain (HTTP-based types) */}
                                         {isHttpResource && (
-                                            <div className="space-y-2">
+                                            <Form {...httpForm}>
-                                                <DomainPicker
+                                                <FormField
-                                                    allowWildcard={true}
+                                                    control={httpForm.control}
-                                                    orgId={orgId as string}
+                                                    name="domainId"
-                                                    warnOnProvidedDomain={
+                                                    render={() => (
-                                                        remoteExitNodes.length >=
+                                                        <FormItem>
-                                                        1
+                                                            <DomainPicker
-                                                    }
+                                                                allowWildcard={
-                                                    onDomainChange={(res) => {
+                                                                    true
-                                                        if (!res) return;
+                                                                }
-                                                        httpForm.setValue(
+                                                                orgId={
-                                                            "subdomain",
+                                                                    orgId as string
-                                                            res.subdomain
+                                                                }
-                                                        );
+                                                                warnOnProvidedDomain={
-                                                        httpForm.setValue(
+                                                                    remoteExitNodes.length >=
-                                                            "domainId",
+                                                                    1
-                                                            res.domainId
+                                                                }
-                                                        );
+                                                                onDomainChange={(
-                                                    }}
+                                                                    res
-                                                />
+                                                                ) => {
-                                                <p className="text-sm text-muted-foreground">
+                                                                    if (!res)
-                                                    {t(
+                                                                        return;
-                                                        "resourceDomainDescription"
+                                                                    httpForm.setValue(
+                                                                        "subdomain",
+                                                                        res.subdomain,
+                                                                        {
+                                                                            shouldValidate:
+                                                                                true
+                                                                        }
+                                                                    );
+                                                                    httpForm.setValue(
+                                                                        "domainId",
+                                                                        res.domainId,
+                                                                        {
+                                                                            shouldValidate:
+                                                                                true
+                                                                        }
+                                                                    );
+                                                                }}
+                                                            />
+                                                            <FormMessage />
+                                                            <FormDescription>
+                                                                {t(
+                                                                    "resourceDomainDescription"
+                                                                )}
+                                                            </FormDescription>
+                                                        </FormItem>
                                                     )}
-                                                </p>
+                                                />
-                                            </div>
+                                            </Form>
                                         )}
 
                                         {/* Proxy Port (TCP/UDP types) */}
@@ -887,9 +1008,7 @@ export default function Page() {
                                         <SettingsSectionForm variant="half">
                                             {/* Mode */}
                                             <div className="space-y-2">
-                                                <SettingsSubsectionTitle>
+                                                <p className="font-semibold text-sm">{t("sshServerMode")}</p>
-                                                    {t("sshServerMode")}
-                                                </SettingsSubsectionTitle>
                                                 <StrategySelect<
                                                     "standard" | "native"
                                                 >
@@ -901,11 +1020,7 @@ export default function Page() {
                                             </div>
 
                                             <div className="space-y-2">
-                                                <SettingsSubsectionTitle>
+                                                <p className="font-semibold text-sm">{t("sshAuthenticationMethod")}</p>
-                                                    {t(
-                                                        "sshAuthenticationMethod"
-                                                    )}
-                                                </SettingsSubsectionTitle>
                                                 <StrategySelect<
                                                     "passthrough" | "push"
                                                 >
@@ -921,11 +1036,7 @@ export default function Page() {
                                             {/* Daemon Location (standard + push) */}
                                             {showDaemonLocation && (
                                                 <div className="space-y-2">
-                                                    <SettingsSubsectionTitle>
+                                                    <p className="font-semibold text-sm">{t("sshAuthDaemonLocation")}</p>
-                                                        {t(
-                                                            "sshAuthDaemonLocation"
-                                                        )}
-                                                    </SettingsSubsectionTitle>
                                                     <StrategySelect<
                                                         "site" | "remote"
                                                     >
@@ -1056,55 +1167,39 @@ export default function Page() {
                                                       "site" ||
                                                   pamMode ===
                                                       "passthrough" ? (
-                                                    <BrowserGatewayTargetForm
+                                                    <Form {...bgTargetForm}>
-                                                        orgId={orgId as string}
+                                                        <BrowserGatewayTargetForm
-                                                        multiSite={true}
+                                                            control={
-                                                        selectedSites={
+                                                                bgTargetForm.control
-                                                            bgSelectedSites
+                                                            }
-                                                        }
+                                                            orgId={
-                                                        onSitesChange={
+                                                                orgId as string
-                                                            setBgSelectedSites
+                                                            }
-                                                        }
+                                                            multiSite={true}
-                                                        destination={
+                                                            sitesField="selectedSites"
-                                                            bgDestination
+                                                            destinationField="destination"
-                                                        }
+                                                            destinationPortField="destinationPort"
-                                                        destinationPort={
+                                                            learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh"
-                                                            bgDestinationPort
+                                                            defaultPort={22}
-                                                        }
+                                                        />
-                                                        onDestinationChange={
+                                                    </Form>
-                                                            setBgDestination
-                                                        }
-                                                        onDestinationPortChange={
-                                                            setBgDestinationPort
-                                                        }
-                                                        learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh"
-                                                        defaultPort={22}
-                                                    />
                                                 ) : (
-                                                    <BrowserGatewayTargetForm
+                                                    <Form {...bgTargetForm}>
-                                                        orgId={orgId as string}
+                                                        <BrowserGatewayTargetForm
-                                                        multiSite={false}
+                                                            control={
-                                                        selectedSite={
+                                                                bgTargetForm.control
-                                                            bgSelectedSite
+                                                            }
-                                                        }
+                                                            orgId={
-                                                        onSiteChange={
+                                                                orgId as string
-                                                            setBgSelectedSite
+                                                            }
-                                                        }
+                                                            multiSite={false}
-                                                        destination={
+                                                            siteField="selectedSite"
-                                                            bgDestination
+                                                            destinationField="destination"
-                                                        }
+                                                            destinationPortField="destinationPort"
-                                                        destinationPort={
+                                                            learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh"
-                                                            bgDestinationPort
+                                                            defaultPort={22}
-                                                        }
+                                                        />
-                                                        onDestinationChange={
+                                                    </Form>
-                                                            setBgDestination
-                                                        }
-                                                        onDestinationPortChange={
-                                                            setBgDestinationPort
-                                                        }
-                                                        learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh"
-                                                        defaultPort={22}
-                                                    />
                                                 )}
                                             </div>
                                         </SettingsSectionForm>
@@ -1142,26 +1237,18 @@ export default function Page() {
                                     >
                                     <SettingsSectionBody>
                                         <SettingsSectionForm variant="half">
-                                            <BrowserGatewayTargetForm
+                                            <Form {...bgTargetForm}>
-                                                orgId={orgId as string}
+                                                <BrowserGatewayTargetForm
-                                                multiSite={true}
+                                                    control={bgTargetForm.control}
-                                                selectedSites={bgSelectedSites}
+                                                    orgId={orgId as string}
-                                                onSitesChange={
+                                                    multiSite={true}
-                                                    setBgSelectedSites
+                                                    sitesField="selectedSites"
-                                                }
+                                                    destinationField="destination"
-                                                destination={bgDestination}
+                                                    destinationPortField="destinationPort"
-                                                destinationPort={
+                                                    learnMoreHref="https://docs.pangolin.net/manage/resources/public/rdp"
-                                                    bgDestinationPort
+                                                    defaultPort={3389}
-                                                }
+                                                />
-                                                onDestinationChange={
+                                            </Form>
-                                                    setBgDestination
-                                                }
-                                                onDestinationPortChange={
-                                                    setBgDestinationPort
-                                                }
-                                                learnMoreHref="https://docs.pangolin.net/manage/resources/public/rdp"
-                                                defaultPort={3389}
-                                            />
                                         </SettingsSectionForm>
                                     </SettingsSectionBody>
                                     </fieldset>
@@ -1197,26 +1284,18 @@ export default function Page() {
                                     >
                                     <SettingsSectionBody>
                                         <SettingsSectionForm variant="half">
-                                            <BrowserGatewayTargetForm
+                                            <Form {...bgTargetForm}>
-                                                orgId={orgId as string}
+                                                <BrowserGatewayTargetForm
-                                                multiSite={true}
+                                                    control={bgTargetForm.control}
-                                                selectedSites={bgSelectedSites}
+                                                    orgId={orgId as string}
-                                                onSitesChange={
+                                                    multiSite={true}
-                                                    setBgSelectedSites
+                                                    sitesField="selectedSites"
-                                                }
+                                                    destinationField="destination"
-                                                destination={bgDestination}
+                                                    destinationPortField="destinationPort"
-                                                destinationPort={
+                                                    learnMoreHref="https://docs.pangolin.net/manage/resources/public/vnc"
-                                                    bgDestinationPort
+                                                    defaultPort={5900}
-                                                }
+                                                />
-                                                onDestinationChange={
+                                            </Form>
-                                                    setBgDestination
-                                                }
-                                                onDestinationPortChange={
-                                                    setBgDestinationPort
-                                                }
-                                                learnMoreHref="https://docs.pangolin.net/manage/resources/public/vnc"
-                                                defaultPort={5900}
-                                            />
                                         </SettingsSectionForm>
                                     </SettingsSectionBody>
                                     </fieldset>
@@ -1257,15 +1336,31 @@ export default function Page() {
                                         const tcpValid = !isHttpResource
                                             ? await tcpUdpForm.trigger()
                                             : true;
-                                        const sshPortValid = showDaemonPort
+
-                                            ? await sshDaemonPortForm.trigger()
+                                        if (
-                                            : true;
+                                            resourceType === "ssh" &&
+                                            !isNative
+                                        ) {
+                                            bgTargetForm.setValue(
+                                                "authDaemonPort",
+                                                sshDaemonPortForm.getValues()
+                                                    .authDaemonPort
+                                            );
+                                        }
+
+                                        const bgValid =
+                                            resourceType === "rdp" ||
+                                            resourceType === "vnc" ||
+                                            (resourceType === "ssh" &&
+                                                !isNative)
+                                                ? await bgTargetForm.trigger()
+                                                : true;
 
                                         if (
                                             baseValid &&
                                             domainValid &&
                                             tcpValid &&
-                                            sshPortValid
+                                            bgValid
                                         ) {
                                             onSubmit();
                                         }

src/app/navigation.tsx

@@ -146,7 +146,7 @@ export const orgNavSections = (
                           items: [
                               {
                                   title: "sidebarResourcePolicies",
-                                  href: "/{orgId}/settings/policies/resource",
+                                  href: "/{orgId}/settings/policies/resources/public",
                                   icon: (
                                       <GlobeIcon className="size-4 flex-none" />
                                   )

src/components/BrowserGatewayTargetForm.tsx

@@ -1,128 +1,173 @@
 "use client";
 
+import { cn } from "@app/lib/cn";
 import { ChevronsUpDown, ExternalLink } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
+import type { Control, FieldValues, Path } from "react-hook-form";
+import { useWatch } from "react-hook-form";
 import {
     MultiSitesSelector,
     formatMultiSitesSelectorLabel
 } from "./multi-site-selector";
 import { SitesSelector, type Selectedsite } from "./site-selector";
 import { Button } from "./ui/button";
+import {
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "./ui/form";
 import { Input } from "./ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 
-type SingleSiteProps = {
+type BaseProps<T extends FieldValues> = {
-    multiSite?: false;
+    control: Control<T>;
-    selectedSite: Selectedsite | null;
-    onSiteChange: (site: Selectedsite | null) => void;
-};
-
-type MultiSiteProps = {
-    multiSite: true;
-    selectedSites: Selectedsite[];
-    onSitesChange: (sites: Selectedsite[]) => void;
-};
-
-export type BrowserGatewayTargetFormProps = {
     orgId: string;
-    destination: string;
+    destinationField: Path<T>;
-    defaultPort: number;
+    destinationPortField: Path<T>;
-    destinationPort: string;
-    onDestinationChange: (v: string) => void;
-    onDestinationPortChange: (v: string) => void;
     learnMoreHref?: string;
-} & (SingleSiteProps | MultiSiteProps);
+    defaultPort: number;
+};
 
-export function BrowserGatewayTargetForm(props: BrowserGatewayTargetFormProps) {
+type MultiSiteFormProps<T extends FieldValues> = BaseProps<T> & {
+    multiSite: true;
+    sitesField: Path<T>;
+};
+
+type SingleSiteFormProps<T extends FieldValues> = BaseProps<T> & {
+    multiSite?: false;
+    siteField: Path<T>;
+};
+
+export type BrowserGatewayTargetFormProps<T extends FieldValues = FieldValues> =
+    | MultiSiteFormProps<T>
+    | SingleSiteFormProps<T>;
+
+export function BrowserGatewayTargetForm<T extends FieldValues>(
+    props: BrowserGatewayTargetFormProps<T>
+) {
     const t = useTranslations();
     const [siteOpen, setSiteOpen] = useState(false);
 
-    const siteSelector =
+    const sitesFieldName =
-        props.multiSite === true ? (
+        props.multiSite === true ? props.sitesField : props.siteField;
-            <Popover open={siteOpen} onOpenChange={setSiteOpen}>
+
-                <PopoverTrigger asChild>
+    const watchedSites = useWatch({
-                    <Button
+        control: props.control,
-                        variant="outline"
+        name: sitesFieldName
-                        role="combobox"
+    });
-                        className="w-full justify-between font-normal"
+
-                    >
+    const showMultiSiteDisclaimer =
-                        <span className="truncate">
+        props.multiSite === true &&
-                            {formatMultiSitesSelectorLabel(
+        ((watchedSites as Selectedsite[] | undefined)?.length ?? 0) > 1;
-                                props.selectedSites,
-                                t
-                            )}
-                        </span>
-                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                    </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
-                    <MultiSitesSelector
-                        orgId={props.orgId}
-                        selectedSites={props.selectedSites}
-                        onSelectionChange={props.onSitesChange}
-                    />
-                </PopoverContent>
-            </Popover>
-        ) : (
-            <Popover open={siteOpen} onOpenChange={setSiteOpen}>
-                <PopoverTrigger asChild>
-                    <Button
-                        variant="outline"
-                        role="combobox"
-                        className="w-full justify-between font-normal"
-                    >
-                        <span className="truncate">
-                            {props.selectedSite?.name ?? t("siteSelect")}
-                        </span>
-                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                    </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
-                    <SitesSelector
-                        orgId={props.orgId}
-                        selectedSite={props.selectedSite}
-                        onSelectSite={(site) => {
-                            props.onSiteChange(site);
-                            setSiteOpen(false);
-                        }}
-                    />
-                </PopoverContent>
-            </Popover>
-        );
 
     return (
         <div className="space-y-2">
-            <div className="grid grid-cols-3 gap-4">
+            <div className="grid grid-cols-3 gap-4 items-start">
-                <div className="space-y-2">
+                <FormField
-                    <label className="text-sm font-semibold">
+                    control={props.control}
-                        {t("sites")}
+                    name={sitesFieldName}
-                    </label>
+                    render={({ field }) => (
-                    {siteSelector}
+                        <FormItem>
-                </div>
+                            <FormLabel>{t("sites")}</FormLabel>
-                <div className="space-y-2">
+                            <Popover open={siteOpen} onOpenChange={setSiteOpen}>
-                    <label className="text-sm font-semibold">
+                                <PopoverTrigger asChild>
-                        {t("destination")}
+                                    <FormControl>
-                    </label>
+                                        <Button
-                    <Input
+                                            variant="outline"
-                        value={props.destination}
+                                            role="combobox"
-                        onChange={(e) =>
+                                            className={cn(
-                            props.onDestinationChange(e.target.value)
+                                                "w-full justify-between font-normal",
-                        }
+                                                "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-                    />
+                                                props.multiSite === true
-                </div>
+                                                    ? (
-                <div className="space-y-2">
+                                                          field.value as Selectedsite[]
-                    <label className="text-sm font-semibold">{t("port")}</label>
+                                                      )?.length === 0 &&
-                    <Input
+                                                          "text-muted-foreground"
-                        type="number"
+                                                    : !field.value &&
-                        value={props.destinationPort}
+                                                          "text-muted-foreground"
-                        onChange={(e) =>
+                                            )}
-                            props.onDestinationPortChange(e.target.value)
+                                        >
-                        }
+                                            <span className="truncate">
-                    />
+                                                {props.multiSite === true
-                </div>
+                                                    ? formatMultiSitesSelectorLabel(
+                                                          (field.value as Selectedsite[]) ??
+                                                              [],
+                                                          t
+                                                      )
+                                                    : ((
+                                                          field.value as Selectedsite | null
+                                                      )?.name ??
+                                                      t("siteSelect"))}
+                                            </span>
+                                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                        </Button>
+                                    </FormControl>
+                                </PopoverTrigger>
+                                <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+                                    {props.multiSite === true ? (
+                                        <MultiSitesSelector
+                                            orgId={props.orgId}
+                                            selectedSites={
+                                                (field.value as Selectedsite[]) ??
+                                                []
+                                            }
+                                            onSelectionChange={field.onChange}
+                                        />
+                                    ) : (
+                                        <SitesSelector
+                                            orgId={props.orgId}
+                                            selectedSite={
+                                                field.value as Selectedsite | null
+                                            }
+                                            onSelectSite={(site) => {
+                                                field.onChange(site);
+                                                setSiteOpen(false);
+                                            }}
+                                        />
+                                    )}
+                                </PopoverContent>
+                            </Popover>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={props.control}
+                    name={props.destinationField}
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>{t("destination")}</FormLabel>
+                            <FormControl>
+                                <Input {...field} value={field.value ?? ""} />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={props.control}
+                    name={props.destinationPortField}
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>{t("port")}</FormLabel>
+                            <FormControl>
+                                <Input
+                                    type="number"
+                                    min={1}
+                                    max={65535}
+                                    {...field}
+                                    value={field.value ?? ""}
+                                />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
             </div>
-            {props.multiSite === true && props.selectedSites.length > 1 && (
+            {showMultiSiteDisclaimer && (
                 <p className="text-sm text-muted-foreground">
                     {t("bgTargetMultiSiteDisclaimer")}{" "}
                     <a

src/components/HealthCheckCredenza.tsx

@@ -408,12 +408,7 @@ export function HealthCheckCredenza(props: HealthCheckCredenzaProps) {
               ? t("standaloneHcEditTitle")
               : t("standaloneHcCreateTitle");
 
-    const description =
+    const description = t("configureHealthCheckDescription");
-        mode === "autoSave"
-            ? t("configureHealthCheckDescription", {
-                  target: (props as any).targetAddress
-              })
-            : t("standaloneHcDescription");
 
     const disableTabInputs = mode === "autoSave" && !watchedEnabled;
     const isSnmpOrIcmp = watchedMode === "snmp" || watchedMode === "icmp";

src/components/PrivateResourceForm.tsx

@@ -1813,9 +1813,9 @@ export function PrivateResourceForm({
 
                             {/* Mode */}
                             <div className="space-y-2">
-                                <SettingsSubsectionTitle>
+                                <p className="font-semibold text-sm">
                                     {t("sshServerMode")}
-                                </SettingsSubsectionTitle>
+                                </p>
                                 <StrategySelect<"standard" | "native">
                                     value={sshServerMode}
                                     options={[
@@ -1870,9 +1870,9 @@ export function PrivateResourceForm({
                             </div>
 
                             <div className="space-y-2">
-                                <SettingsSubsectionTitle>
+                                <p className="font-semibold text-sm">
                                     {t("sshAuthenticationMethod")}
-                                </SettingsSubsectionTitle>
+                                </p>
                                 <FormField
                                     control={form.control}
                                     name="pamMode"
@@ -1965,9 +1965,9 @@ export function PrivateResourceForm({
                             {/* Daemon Location (standard + push) */}
                             {showDaemonLocation && (
                                 <div className="space-y-2">
-                                    <SettingsSubsectionTitle>
+                                    <p className="font-semibold text-sm">
                                         {t("sshAuthDaemonLocation")}
-                                    </SettingsSubsectionTitle>
+                                    </p>
                                     <FormField
                                         control={form.control}
                                         name="authDaemonMode"

src/components/ResourceInfoBox.tsx

@@ -90,7 +90,7 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                                     </InfoSectionTitle>
                                     <InfoSectionContent>
                                         <span className="inline-flex items-center">
-                                            {resource.mode!.toUpperCase()}
+                                            {resource.ssl ? "HTTPS" : "HTTP"}
                                         </span>
                                     </InfoSectionContent>
                                 </InfoSection>

src/components/ResourcePoliciesTable.tsx

@@ -200,7 +200,7 @@ export function ResourcePoliciesTable({
                             <DropdownMenuContent align="end">
                                 <Link
                                     className="block w-full"
-                                    href={`/${policyRow.orgId}/settings/policies/resource/${policyRow.niceId}`}
+                                    href={`/${policyRow.orgId}/settings/policies/resources/public/${policyRow.niceId}`}
                                 >
                                     <DropdownMenuItem>
                                         {t("viewSettings")}
@@ -219,7 +219,7 @@ export function ResourcePoliciesTable({
                             </DropdownMenuContent>
                         </DropdownMenu>
                         <Link
-                            href={`/${policyRow.orgId}/settings/policies/resource/${policyRow.niceId}`}
+                            href={`/${policyRow.orgId}/settings/policies/resources/public/${policyRow.niceId}`}
                         >
                             <Button variant={"outline"}>
                                 {t("edit")}
@@ -288,7 +288,7 @@ export function ResourcePoliciesTable({
                 onAdd={() =>
                     startNavigation(() =>
                         router.push(
-                            `/${orgId}/settings/policies/resource/create`
+                            `/${orgId}/settings/policies/resources/public/create`
                         )
                     )
                 }

src/components/Settings.tsx

@@ -70,7 +70,7 @@ export function SettingsSubsectionHeader({
     children: React.ReactNode;
     className?: string;
 }) {
-    return <div className={cn("space-y-0.5", className)}>{children}</div>;
+    return <div className={cn("py-3 space-y-0.5", className)}>{children}</div>;
 }
 
 export function SettingsSubsectionTitle({
@@ -80,9 +80,7 @@ export function SettingsSubsectionTitle({
     children: React.ReactNode;
     className?: string;
 }) {
-    return (
+    return <h3 className={cn("font-semibold", className)}>{children}</h3>;
-        <h3 className={cn("text-sm font-semibold", className)}>{children}</h3>
-    );
 }
 
 export function SettingsSubsectionDescription({

src/components/labels-selector.tsx

@@ -157,7 +157,7 @@ export function LabelsSelector({
                                 />
 
                                 <Select defaultValue={randomColor} name="color">
-                                    <SelectTrigger className="w-18 [&_[data-name]]:hidden [&_[svg]]:hidden!">
+                                    <SelectTrigger className="w-auto min-w-24">
                                         <SelectValue
                                             placeholder={t("selectColor")}
                                         />

src/components/resource-policy/CreatePolicyForm.tsx

@@ -140,7 +140,7 @@ export function CreatePolicyForm({}: CreatePolicyFormProps) {
             if (res && res.status === 201) {
                 const niceId = res.data.data.niceId;
                 router.push(
-                    `/${org.org.orgId}/settings/policies/resource/${niceId}`
+                    `/${org.org.orgId}/settings/policies/resources/public/${niceId}`
                 );
                 toast({
                     title: t("success"),

src/components/resource-policy/EditPolicyNameSectionForm.tsx

@@ -109,7 +109,7 @@ export function EditPolicyNameSectionForm({
 
                 if (payload.niceId && payload.niceId !== policy.niceId) {
                     router.replace(
-                        `/${org.org.orgId}/settings/policies/resource/${payload.niceId}`
+                        `/${org.org.orgId}/settings/policies/resources/public/${payload.niceId}`
                     );
                 }
 

src/components/resource-target-address-item.tsx

@@ -1,15 +1,12 @@
 import { cn } from "@app/lib/cn";
 import type { DockerState } from "@app/lib/docker";
 import { parseHostTarget } from "@app/lib/parseHostTarget";
-import { orgQueries } from "@app/lib/queries";
 import { CaretSortIcon } from "@radix-ui/react-icons";
 import type { ListSitesResponse } from "@server/routers/site";
 import { type ListTargetsResponse } from "@server/routers/target";
 import type { ArrayElement } from "@server/types/ArrayElement";
-import { useQuery } from "@tanstack/react-query";
-import { CheckIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { ContainersSelector } from "./ContainersSelector";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
@@ -28,23 +25,21 @@ export type LocalTarget = Omit<
     "protocol"
 >;
 
-export type ResourceTargetAddressItemProps = {
+export type ResourceTargetSiteItemProps = {
     getDockerStateForSite: (siteId: number) => DockerState;
     updateTarget: (targetId: number, data: Partial<LocalTarget>) => void;
     orgId: string;
     proxyTarget: LocalTarget;
-    isHttp: boolean;
     refreshContainersForSite: (siteId: number) => void;
 };
 
-export function ResourceTargetAddressItem({
+export function ResourceTargetSiteItem({
     orgId,
     getDockerStateForSite,
     updateTarget,
     proxyTarget,
-    isHttp,
     refreshContainersForSite
-}: ResourceTargetAddressItemProps) {
+}: ResourceTargetSiteItemProps) {
     const t = useTranslations();
 
     const [selectedSite, setSelectedSite] = useState<Pick<
@@ -76,62 +71,78 @@ export function ResourceTargetAddressItem({
         });
     };
 
+    return (
+        <div
+            className="flex w-full min-w-0 items-center h-9 border border-input rounded-md"
+            key={proxyTarget.targetId}
+        >
+            {selectedSite && selectedSite.type === "newt" && (
+                <ContainersSelector
+                    site={selectedSite}
+                    containers={
+                        getDockerStateForSite(selectedSite.siteId).containers
+                    }
+                    isAvailable={
+                        getDockerStateForSite(selectedSite.siteId).isAvailable
+                    }
+                    onContainerSelect={handleContainerSelectForTarget}
+                    onRefresh={() =>
+                        refreshContainersForSite(selectedSite.siteId)
+                    }
+                />
+            )}
+
+            <Popover>
+                <PopoverTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        role="combobox"
+                        className={cn(
+                            "h-9 min-w-0 flex-1 justify-between px-3 rounded-none hover:bg-transparent",
+                            !proxyTarget.siteId && "text-muted-foreground"
+                        )}
+                    >
+                        <span className="truncate">
+                            {proxyTarget.siteId
+                                ? selectedSite?.name
+                                : t("siteSelect")}
+                        </span>
+                        <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent className="p-0">
+                    <SitesSelector
+                        orgId={orgId}
+                        selectedSite={selectedSite}
+                        onSelectSite={(site) => {
+                            updateTarget(proxyTarget.targetId, {
+                                siteId: site.siteId,
+                                siteType: site.type,
+                                siteName: site.name
+                            });
+                            setSelectedSite(site);
+                        }}
+                    />
+                </PopoverContent>
+            </Popover>
+        </div>
+    );
+}
+
+export type ResourceTargetAddressItemProps = {
+    updateTarget: (targetId: number, data: Partial<LocalTarget>) => void;
+    proxyTarget: LocalTarget;
+    isHttp: boolean;
+};
+
+export function ResourceTargetAddressItem({
+    updateTarget,
+    proxyTarget,
+    isHttp
+}: ResourceTargetAddressItemProps) {
     return (
         <div className="flex items-center w-full" key={proxyTarget.targetId}>
             <div className="flex items-center w-full justify-start py-0 space-x-2 px-0 cursor-default border border-input rounded-md">
-                {selectedSite && selectedSite.type === "newt" && (
-                    <ContainersSelector
-                        site={selectedSite}
-                        containers={
-                            getDockerStateForSite(selectedSite.siteId)
-                                .containers
-                        }
-                        isAvailable={
-                            getDockerStateForSite(selectedSite.siteId)
-                                .isAvailable
-                        }
-                        onContainerSelect={handleContainerSelectForTarget}
-                        onRefresh={() =>
-                            refreshContainersForSite(selectedSite.siteId)
-                        }
-                    />
-                )}
-
-                <Popover>
-                    <PopoverTrigger asChild>
-                        <Button
-                            variant="ghost"
-                            role="combobox"
-                            className={cn(
-                                "w-45 justify-between text-sm border-r pr-4 rounded-none h-8 hover:bg-transparent",
-                                "",
-                                !proxyTarget.siteId && "text-muted-foreground"
-                            )}
-                        >
-                            <span className="truncate max-w-37.5">
-                                {proxyTarget.siteId
-                                    ? selectedSite?.name
-                                    : t("siteSelect")}
-                            </span>
-                            <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                        </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="p-0">
-                        <SitesSelector
-                            orgId={orgId}
-                            selectedSite={selectedSite}
-                            onSelectSite={(site) => {
-                                updateTarget(proxyTarget.targetId, {
-                                    siteId: site.siteId,
-                                    siteType: site.type,
-                                    siteName: site.name
-                                });
-                                setSelectedSite(site);
-                            }}
-                        />
-                    </PopoverContent>
-                </Popover>
-
                 {isHttp && (
                     <Select
                         defaultValue={proxyTarget.method ?? "http"}
@@ -142,7 +153,7 @@ export function ResourceTargetAddressItem({
                             })
                         }
                     >
-                        <SelectTrigger className="h-8 px-2 w-17.5 border-none bg-transparent shadow-none data-[state=open]:bg-transparent rounded-none">
+                        <SelectTrigger className="h-9 w-17.5 border-none bg-transparent shadow-none data-[state=open]:bg-transparent rounded-none mr-0 pr-0">
                             {proxyTarget.method || "http"}
                         </SelectTrigger>
                         <SelectContent>
@@ -154,7 +165,7 @@ export function ResourceTargetAddressItem({
                 )}
 
                 {isHttp && (
-                    <div className="flex items-center justify-center px-2 h-9">
+                    <div className="flex items-center justify-center h-9 mr-0 pl-1">
                         {"://"}
                     </div>
                 )}
@@ -162,7 +173,7 @@ export function ResourceTargetAddressItem({
                 <Input
                     defaultValue={proxyTarget.ip}
                     placeholder="Host"
-                    className="flex-1 min-w-30 px-2 border-none placeholder-gray-400 rounded-xs"
+                    className="flex-1 min-w-30 border-none placeholder-gray-400 rounded-xs"
                     onBlur={(e) => {
                         const input = e.target.value.trim();
                         const hasProtocol = /^(https?|h2c):\/\//.test(input);
@@ -195,7 +206,7 @@ export function ResourceTargetAddressItem({
                         }
                     }}
                 />
-                <div className="flex items-center justify-center px-2 h-9">
+                <div className="flex items-center justify-center h-9 mr-0">
                     {":"}
                 </div>
                 <Input

src/lib/browserGatewayTargetFormSchema.ts

@@ -0,0 +1,140 @@
+import { z } from "zod";
+
+type TranslateFn = (key: string) => string;
+
+export const selectedSiteSchema = z.object({
+    siteId: z.number().int().positive(),
+    name: z.string(),
+    type: z.string()
+});
+
+export type SelectedSiteFormValue = z.infer<typeof selectedSiteSchema>;
+
+export function createPortStringSchema(t: TranslateFn) {
+    return z.string().refine(
+        (val) => {
+            if (!val) return false;
+            const n = Number(val);
+            return Number.isInteger(n) && n >= 1 && n <= 65535;
+        },
+        { message: t("healthCheckPortInvalid") }
+    );
+}
+
+function createOptionalAuthDaemonPortSchema(t: TranslateFn) {
+    return z.string().refine(
+        (val) => {
+            if (!val) return true;
+            const n = Number(val);
+            return Number.isInteger(n) && n >= 1 && n <= 65535;
+        },
+        { message: t("healthCheckPortInvalid") }
+    );
+}
+
+export function createBrowserGatewayTargetFormSchema(t: TranslateFn) {
+    return z.object({
+        selectedSites: z.array(selectedSiteSchema).min(1, {
+            message: t("siteRequired")
+        }),
+        destination: z.string().min(1, {
+            message: t("destinationRequired")
+        }),
+        destinationPort: createPortStringSchema(t)
+    });
+}
+
+export type BrowserGatewayTargetFormValues = z.infer<
+    ReturnType<typeof createBrowserGatewayTargetFormSchema>
+>;
+
+export function createSshSettingsFormSchema(
+    t: TranslateFn,
+    options: { isNative: boolean }
+) {
+    const { isNative } = options;
+    const portSchema = createPortStringSchema(t);
+    const optionalAuthDaemonPortSchema = createOptionalAuthDaemonPortSchema(t);
+
+    return z
+        .object({
+            pamMode: z.enum(["passthrough", "push"]),
+            standardDaemonLocation: z.enum(["site", "remote"]),
+            authDaemonPort: z.string(),
+            selectedSites: z.array(selectedSiteSchema),
+            selectedSite: selectedSiteSchema.nullable(),
+            selectedNativeSite: selectedSiteSchema.nullable(),
+            destination: z.string(),
+            destinationPort: z.string()
+        })
+        .superRefine((data, ctx) => {
+            if (isNative) {
+                if (!data.selectedNativeSite) {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        path: ["selectedNativeSite"],
+                        message: t("siteRequired")
+                    });
+                }
+                return;
+            }
+
+            const useMultiSite =
+                data.standardDaemonLocation !== "site" ||
+                data.pamMode === "passthrough";
+
+            if (useMultiSite) {
+                if (data.selectedSites.length === 0) {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        path: ["selectedSites"],
+                        message: t("siteRequired")
+                    });
+                }
+            } else if (!data.selectedSite) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    path: ["selectedSite"],
+                    message: t("siteRequired")
+                });
+            }
+
+            if (!data.destination.trim()) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    path: ["destination"],
+                    message: t("destinationRequired")
+                });
+            }
+
+            const portResult = portSchema.safeParse(data.destinationPort);
+            if (!portResult.success) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    path: ["destinationPort"],
+                    message: t("healthCheckPortInvalid")
+                });
+            }
+
+            const showDaemonPort =
+                data.pamMode === "push" &&
+                data.standardDaemonLocation === "remote";
+
+            if (showDaemonPort) {
+                const authPortResult = optionalAuthDaemonPortSchema.safeParse(
+                    data.authDaemonPort
+                );
+                if (!data.authDaemonPort.trim() || !authPortResult.success) {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        path: ["authDaemonPort"],
+                        message: t("healthCheckPortInvalid")
+                    });
+                }
+            }
+        });
+}
+
+export type SshSettingsFormValues = z.infer<
+    ReturnType<typeof createSshSettingsFormSchema>
+>;