Merge branch 'dev' into #3001

src/app/[orgId]/layout.tsx

@@ -21,7 +21,6 @@ import { Layout } from "@app/components/Layout";
 import ApplyInternalRedirect from "@app/components/ApplyInternalRedirect";
 import SubscriptionViolation from "@app/components/SubscriptionViolation";
 
-
 export default async function OrgLayout(props: {
     children: React.ReactNode;
     params: Promise<{ orgId: string }>;
@@ -42,6 +41,26 @@ export default async function OrgLayout(props: {
         redirect(`/`);
     }
 
+    let orgs: ListUserOrgsResponse["orgs"] = [];
+    try {
+        const getOrgs = cache(async () =>
+            internal.get<AxiosResponse<ListUserOrgsResponse>>(
+                `/user/${user.userId}/orgs`,
+                await authCookieHeader()
+            )
+        );
+        const res = await getOrgs();
+        if (res && res.data.data.orgs) {
+            orgs = res.data.data.orgs;
+        }
+    } catch (e) {}
+
+    const primaryOrg = orgs.find((org) => org.isPrimaryOrg);
+    const canViewPrimaryBilling = Boolean(primaryOrg?.isOwner);
+    const primaryOrgBillingHref = primaryOrg
+        ? `/${primaryOrg.orgId}/settings/billing`
+        : null;
+
     let accessRes: CheckOrgUserAccessResponse | null = null;
     try {
         const checkOrgAccess = cache(() =>
@@ -58,19 +77,6 @@ export default async function OrgLayout(props: {
 
     if (!accessRes?.allowed) {
         // For non-admin users, show the member resources portal
-        let orgs: ListUserOrgsResponse["orgs"] = [];
-        try {
-            const getOrgs = cache(async () =>
-                internal.get<AxiosResponse<ListUserOrgsResponse>>(
-                    `/user/${user.userId}/orgs`,
-                    await authCookieHeader()
-                )
-            );
-            const res = await getOrgs();
-            if (res && res.data.data.orgs) {
-                orgs = res.data.data.orgs;
-            }
-        } catch (e) {}
         return (
             <UserProvider user={user}>
                 <ApplyInternalRedirect orgId={orgId} />
@@ -110,7 +116,12 @@ export default async function OrgLayout(props: {
         >
             <ApplyInternalRedirect orgId={orgId} />
             {props.children}
-            {build === "saas" && <SubscriptionViolation />}
+            {build === "saas" && (
+                <SubscriptionViolation
+                    canViewBilling={canViewPrimaryBilling}
+                    billingHref={primaryOrgBillingHref}
+                />
+            )}
 
             <SetLastOrgCookie orgId={orgId} />
         </SubscriptionStatusProvider>

src/app/[orgId]/loading.tsx

@@ -0,0 +1,9 @@
+import { Loader2 } from "lucide-react";
+
+export default function OrgPageLoading() {
+    return (
+        <div className="flex items-center justify-center py-16">
+            <Loader2 className="size-6 animate-spin text-muted-foreground" />
+        </div>
+    );
+}

src/app/[orgId]/page.tsx

@@ -1,7 +1,9 @@
 import { Layout } from "@app/components/Layout";
-import MemberResourcesPortal from "@app/components/MemberResourcesPortal";
+import ResourceLauncher from "@app/components/resource-launcher/ResourceLauncher";
+import { commandBarNavSections } from "@app/app/navigation";
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
+import { fetchLauncherPageData } from "@app/lib/launcherServerData";
 import { verifySession } from "@app/lib/auth/verifySession";
 import { pullEnv } from "@app/lib/pullEnv";
 import UserProvider from "@app/providers/UserProvider";
@@ -13,12 +15,14 @@ import { cache } from "react";
 
 type OrgPageProps = {
     params: Promise<{ orgId: string }>;
+    searchParams: Promise<Record<string, string>>;
 };
 
+export const dynamic = "force-dynamic";
+
 export default async function OrgPage(props: OrgPageProps) {
     const params = await props.params;
     const orgId = params.orgId;
-    const env = pullEnv();
 
     if (!orgId) {
         redirect(`/`);
@@ -40,12 +44,6 @@ export default async function OrgPage(props: OrgPageProps) {
         overview = res.data.data;
     } catch (e) {}
 
-    // If user is admin or owner, redirect to settings
-    if (overview?.isAdmin || overview?.isOwner) {
-        redirect(`/${orgId}/settings`);
-    }
-
-    // For non-admin users, show the member resources portal
     let orgs: ListUserOrgsResponse["orgs"] = [];
     try {
         const getOrgs = cache(async () =>
@@ -60,10 +58,46 @@ export default async function OrgPage(props: OrgPageProps) {
         }
     } catch (e) {}
 
+    const isAdminOrOwner = Boolean(overview?.isAdmin || overview?.isOwner);
+    const env = pullEnv();
+    const primaryOrg = orgs.find((o) => o.orgId === orgId)?.isPrimaryOrg;
+
+    const searchParams = new URLSearchParams(await props.searchParams);
+    const launcherData = overview
+        ? await fetchLauncherPageData(
+              orgId,
+              searchParams,
+              await authCookieHeader()
+          )
+        : null;
+
     return (
         <UserProvider user={user}>
-            <Layout orgId={orgId} navItems={[]} orgs={orgs}>
-                {overview && <MemberResourcesPortal orgId={orgId} />}
+            <Layout
+                orgId={orgId}
+                orgs={orgs}
+                navItems={[]}
+                commandNavItems={commandBarNavSections(env, {
+                    isPrimaryOrg: primaryOrg
+                })}
+                showSidebar={false}
+                launcherMode
+                showViewAsAdmin={isAdminOrOwner}
+            >
+                {overview && launcherData ? (
+                    <ResourceLauncher
+                        orgId={orgId}
+                        isAdmin={isAdminOrOwner}
+                        views={launcherData.views}
+                        defaultViewOverrides={launcherData.defaultViewOverrides}
+                        activeViewId={launcherData.activeViewId}
+                        config={launcherData.config}
+                        savedConfig={launcherData.savedConfig}
+                        scale={launcherData.scale}
+                        groups={launcherData.groups}
+                        groupsPagination={launcherData.groupsPagination}
+                    />
+                ) : null}
             </Layout>
         </UserProvider>
     );

src/app/[orgId]/settings/(private)/billing/page.tsx

@@ -10,12 +10,15 @@ import { formatAxiosError } from "@app/lib/api";
 import { AxiosResponse } from "axios";
 import {
     SettingsContainer,
+    SettingsFormCell,
+    SettingsFormGrid,
     SettingsSection,
     SettingsSectionHeader,
     SettingsSectionTitle,
     SettingsSectionDescription,
     SettingsSectionBody,
-    SettingsSectionFooter
+    SettingsSectionFooter,
+    SettingsSectionForm
 } from "@app/components/Settings";
 import {
     InfoSection,
@@ -55,7 +58,7 @@ import {
     tier2LimitSet,
     tier3LimitSet
 } from "@server/lib/billing/limitSet";
-import { FeatureId } from "@server/lib/billing/features";
+import { LimitId } from "@server/lib/billing/features";
 import TrialBillingBanner from "@app/components/TrialBillingBanner";
 
 // Plan tier definitions matching the mockup
@@ -155,42 +158,60 @@ const tierLimits: Record<
         domains: number;
         remoteNodes: number;
         organizations: number;
+        publicResources: number;
+        privateResources: number;
+        machineClients: number;
     }
 > = {
     basic: {
-        users: freeLimitSet[FeatureId.USERS]?.value ?? 0,
-        sites: freeLimitSet[FeatureId.SITES]?.value ?? 0,
-        domains: freeLimitSet[FeatureId.DOMAINS]?.value ?? 0,
-        remoteNodes: freeLimitSet[FeatureId.REMOTE_EXIT_NODES]?.value ?? 0,
-        organizations: freeLimitSet[FeatureId.ORGINIZATIONS]?.value ?? 0
+        users: freeLimitSet[LimitId.USERS]?.value ?? 0,
+        sites: freeLimitSet[LimitId.SITES]?.value ?? 0,
+        domains: freeLimitSet[LimitId.DOMAINS]?.value ?? 0,
+        remoteNodes: freeLimitSet[LimitId.REMOTE_EXIT_NODES]?.value ?? 0,
+        organizations: freeLimitSet[LimitId.ORGANIZATIONS]?.value ?? 0,
+        publicResources: freeLimitSet[LimitId.PUBLIC_RESOURCES]?.value ?? 0,
+        privateResources: freeLimitSet[LimitId.PRIVATE_RESOURCES]?.value ?? 0,
+        machineClients: freeLimitSet[LimitId.MACHINE_CLIENTS]?.value ?? 0
     },
     tier1: {
-        users: tier1LimitSet[FeatureId.USERS]?.value ?? 0,
-        sites: tier1LimitSet[FeatureId.SITES]?.value ?? 0,
-        domains: tier1LimitSet[FeatureId.DOMAINS]?.value ?? 0,
-        remoteNodes: tier1LimitSet[FeatureId.REMOTE_EXIT_NODES]?.value ?? 0,
-        organizations: tier1LimitSet[FeatureId.ORGINIZATIONS]?.value ?? 0
+        users: tier1LimitSet[LimitId.USERS]?.value ?? 0,
+        sites: tier1LimitSet[LimitId.SITES]?.value ?? 0,
+        domains: tier1LimitSet[LimitId.DOMAINS]?.value ?? 0,
+        remoteNodes: tier1LimitSet[LimitId.REMOTE_EXIT_NODES]?.value ?? 0,
+        organizations: tier1LimitSet[LimitId.ORGANIZATIONS]?.value ?? 0,
+        publicResources: tier1LimitSet[LimitId.PUBLIC_RESOURCES]?.value ?? 0,
+        privateResources: tier1LimitSet[LimitId.PRIVATE_RESOURCES]?.value ?? 0,
+        machineClients: tier1LimitSet[LimitId.MACHINE_CLIENTS]?.value ?? 0
     },
     tier2: {
-        users: tier2LimitSet[FeatureId.USERS]?.value ?? 0,
-        sites: tier2LimitSet[FeatureId.SITES]?.value ?? 0,
-        domains: tier2LimitSet[FeatureId.DOMAINS]?.value ?? 0,
-        remoteNodes: tier2LimitSet[FeatureId.REMOTE_EXIT_NODES]?.value ?? 0,
-        organizations: tier2LimitSet[FeatureId.ORGINIZATIONS]?.value ?? 0
+        users: tier2LimitSet[LimitId.USERS]?.value ?? 0,
+        sites: tier2LimitSet[LimitId.SITES]?.value ?? 0,
+        domains: tier2LimitSet[LimitId.DOMAINS]?.value ?? 0,
+        remoteNodes: tier2LimitSet[LimitId.REMOTE_EXIT_NODES]?.value ?? 0,
+        organizations: tier2LimitSet[LimitId.ORGANIZATIONS]?.value ?? 0,
+        publicResources: tier2LimitSet[LimitId.PUBLIC_RESOURCES]?.value ?? 0,
+        privateResources: tier2LimitSet[LimitId.PRIVATE_RESOURCES]?.value ?? 0,
+        machineClients: tier2LimitSet[LimitId.MACHINE_CLIENTS]?.value ?? 0
     },
     tier3: {
-        users: tier3LimitSet[FeatureId.USERS]?.value ?? 0,
-        sites: tier3LimitSet[FeatureId.SITES]?.value ?? 0,
-        domains: tier3LimitSet[FeatureId.DOMAINS]?.value ?? 0,
-        remoteNodes: tier3LimitSet[FeatureId.REMOTE_EXIT_NODES]?.value ?? 0,
-        organizations: tier3LimitSet[FeatureId.ORGINIZATIONS]?.value ?? 0
+        users: tier3LimitSet[LimitId.USERS]?.value ?? 0,
+        sites: tier3LimitSet[LimitId.SITES]?.value ?? 0,
+        domains: tier3LimitSet[LimitId.DOMAINS]?.value ?? 0,
+        remoteNodes: tier3LimitSet[LimitId.REMOTE_EXIT_NODES]?.value ?? 0,
+        organizations: tier3LimitSet[LimitId.ORGANIZATIONS]?.value ?? 0,
+        publicResources: tier3LimitSet[LimitId.PUBLIC_RESOURCES]?.value ?? 0,
+        privateResources: tier3LimitSet[LimitId.PRIVATE_RESOURCES]?.value ?? 0,
+        machineClients: tier3LimitSet[LimitId.MACHINE_CLIENTS]?.value ?? 0
     },
     enterprise: {
         users: 0, // Custom for enterprise
         sites: 0, // Custom for enterprise
         domains: 0, // Custom for enterprise
         remoteNodes: 0, // Custom for enterprise
-        organizations: 0 // Custom for enterprise
+        organizations: 0, // Custom for enterprise
+        publicResources: 0, // Custom for enterprise
+        privateResources: 0, // Custom for enterprise
+        machineClients: 0 // Custom for enterprise
     }
 };
 
@@ -231,6 +252,9 @@ export default function BillingPage() {
     const DOMAINS = "domains";
     const REMOTE_EXIT_NODES = "remoteExitNodes";
     const ORGINIZATIONS = "organizations";
+    const PUBLIC_RESOURCES = "publicResources";
+    const PRIVATE_RESOURCES = "privateResources";
+    const MACHINE_CLIENTS = "machineClients";
 
     // Confirmation dialog state
     const [showConfirmDialog, setShowConfirmDialog] = useState(false);
@@ -266,7 +290,13 @@ export default function BillingPage() {
                     setHasSubscription(
                         tierSub.subscription.status === "active"
                     );
-                    setIsTrial(tierSub.subscription.expiresAt != null);
+                    // expiresAt is only meaningful while the trial hasn't
+                    // actually run out yet; a stale row with a past
+                    // expiresAt should no longer be treated as a live trial
+                    const expiresAt = tierSub.subscription.expiresAt;
+                    setIsTrial(
+                        expiresAt != null && expiresAt * 1000 > Date.now()
+                    );
                 }
 
                 // Find license subscription
@@ -794,6 +824,45 @@ export default function BillingPage() {
             });
         }
 
+        // Check public resources
+        const publicResourcesUsage = getUsageValue(PUBLIC_RESOURCES);
+        if (
+            limits.publicResources > 0 &&
+            publicResourcesUsage > limits.publicResources
+        ) {
+            violations.push({
+                feature: "Public Resources",
+                currentUsage: publicResourcesUsage,
+                newLimit: limits.publicResources
+            });
+        }
+
+        // Check private resources
+        const privateResourcesUsage = getUsageValue(PRIVATE_RESOURCES);
+        if (
+            limits.privateResources > 0 &&
+            privateResourcesUsage > limits.privateResources
+        ) {
+            violations.push({
+                feature: "Private Resources",
+                currentUsage: privateResourcesUsage,
+                newLimit: limits.privateResources
+            });
+        }
+
+        // Check machine clients
+        const machineClientsUsage = getUsageValue(MACHINE_CLIENTS);
+        if (
+            limits.machineClients > 0 &&
+            machineClientsUsage > limits.machineClients
+        ) {
+            violations.push({
+                feature: "Machine Clients",
+                currentUsage: machineClientsUsage,
+                newLimit: limits.machineClients
+            });
+        }
+
         return violations;
     };
 
@@ -994,21 +1063,23 @@ export default function BillingPage() {
                     </SettingsSectionDescription>
                 </SettingsSectionHeader>
                 <SettingsSectionBody>
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                         {/* Current Usage */}
-                        <div className="border rounded-lg p-4">
+                        <div className="border rounded-lg p-4 md:col-span-1">
                             <div className="text-sm text-muted-foreground mb-2">
                                 {t("billingCurrentUsage") || "Current Usage"}
                             </div>
-                            <div className="flex items-baseline gap-2">
-                                <span className="text-3xl font-semibold">
-                                    {getUserCount()}
-                                </span>
-                                <span className="text-lg">
-                                    {t("billingUsers") || "Users"}
-                                </span>
+                            <div className="flex flex-col items-start gap-1">
+                                <div className="flex items-baseline gap-2">
+                                    <span className="text-3xl font-semibold">
+                                        {getUserCount()}
+                                    </span>
+                                    <span className="text-lg">
+                                        {t("billingUsers") || "Users"}
+                                    </span>
+                                </div>
                                 {hasSubscription && getPricePerUser() > 0 && (
-                                    <div className="text-sm text-muted-foreground mt-1">
+                                    <div className="text-sm text-muted-foreground">
                                         x ${getPricePerUser()} / month = $
                                         {getUserCount() * getPricePerUser()} /
                                         month
@@ -1018,11 +1089,11 @@ export default function BillingPage() {
                         </div>
 
                         {/* Maximum Limits */}
-                        <div className="border rounded-lg p-4">
+                        <div className="border rounded-lg p-4 md:col-span-3">
                             <div className="text-sm text-muted-foreground mb-3">
                                 {t("billingMaximumLimits") || "Maximum Limits"}
                             </div>
-                            <InfoSections cols={5}>
+                            <InfoSections cols={8}>
                                 <InfoSection>
                                     <InfoSectionTitle className="flex items-center gap-1 text-xs">
                                         {t("billingUsers") || "Users"}
@@ -1305,6 +1376,168 @@ export default function BillingPage() {
                                         )}
                                     </InfoSectionContent>
                                 </InfoSection>
+                                <InfoSection>
+                                    <InfoSectionTitle className="flex items-center gap-1 text-xs">
+                                        {t("billingPublicResources") ||
+                                            "Public Resources"}
+                                    </InfoSectionTitle>
+                                    <InfoSectionContent className="text-sm">
+                                        {isOverLimit(PUBLIC_RESOURCES) ? (
+                                            <Tooltip>
+                                                <TooltipTrigger className="flex items-center gap-1">
+                                                    <AlertTriangle className="h-3 w-3 text-orange-400" />
+                                                    <span
+                                                        className={cn(
+                                                            "text-orange-600 dark:text-orange-400 font-medium"
+                                                        )}
+                                                    >
+                                                        {getLimitValue(
+                                                            PUBLIC_RESOURCES
+                                                        ) ??
+                                                            t(
+                                                                "billingUnlimited"
+                                                            ) ??
+                                                            "∞"}
+                                                    </span>
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                    <p>
+                                                        {t(
+                                                            "billingUsageExceedsLimit",
+                                                            {
+                                                                current:
+                                                                    getUsageValue(
+                                                                        PUBLIC_RESOURCES
+                                                                    ),
+                                                                limit:
+                                                                    getLimitValue(
+                                                                        PUBLIC_RESOURCES
+                                                                    ) ?? 0
+                                                            }
+                                                        ) ||
+                                                            `Current usage (${getUsageValue(PUBLIC_RESOURCES)}) exceeds limit (${getLimitValue(PUBLIC_RESOURCES)})`}
+                                                    </p>
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        ) : (
+                                            <>
+                                                {getLimitValue(
+                                                    PUBLIC_RESOURCES
+                                                ) ??
+                                                    t("billingUnlimited") ??
+                                                    "∞"}
+                                            </>
+                                        )}
+                                    </InfoSectionContent>
+                                </InfoSection>
+                                <InfoSection>
+                                    <InfoSectionTitle className="flex items-center gap-1 text-xs">
+                                        {t("billingPrivateResources") ||
+                                            "Private Resources"}
+                                    </InfoSectionTitle>
+                                    <InfoSectionContent className="text-sm">
+                                        {isOverLimit(PRIVATE_RESOURCES) ? (
+                                            <Tooltip>
+                                                <TooltipTrigger className="flex items-center gap-1">
+                                                    <AlertTriangle className="h-3 w-3 text-orange-400" />
+                                                    <span
+                                                        className={cn(
+                                                            "text-orange-600 dark:text-orange-400 font-medium"
+                                                        )}
+                                                    >
+                                                        {getLimitValue(
+                                                            PRIVATE_RESOURCES
+                                                        ) ??
+                                                            t(
+                                                                "billingUnlimited"
+                                                            ) ??
+                                                            "∞"}
+                                                    </span>
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                    <p>
+                                                        {t(
+                                                            "billingUsageExceedsLimit",
+                                                            {
+                                                                current:
+                                                                    getUsageValue(
+                                                                        PRIVATE_RESOURCES
+                                                                    ),
+                                                                limit:
+                                                                    getLimitValue(
+                                                                        PRIVATE_RESOURCES
+                                                                    ) ?? 0
+                                                            }
+                                                        ) ||
+                                                            `Current usage (${getUsageValue(PRIVATE_RESOURCES)}) exceeds limit (${getLimitValue(PRIVATE_RESOURCES)})`}
+                                                    </p>
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        ) : (
+                                            <>
+                                                {getLimitValue(
+                                                    PRIVATE_RESOURCES
+                                                ) ??
+                                                    t("billingUnlimited") ??
+                                                    "∞"}
+                                            </>
+                                        )}
+                                    </InfoSectionContent>
+                                </InfoSection>
+                                <InfoSection>
+                                    <InfoSectionTitle className="flex items-center gap-1 text-xs">
+                                        {t("billingMachineClients") ||
+                                            "Machine Clients"}
+                                    </InfoSectionTitle>
+                                    <InfoSectionContent className="text-sm">
+                                        {isOverLimit(MACHINE_CLIENTS) ? (
+                                            <Tooltip>
+                                                <TooltipTrigger className="flex items-center gap-1">
+                                                    <AlertTriangle className="h-3 w-3 text-orange-400" />
+                                                    <span
+                                                        className={cn(
+                                                            "text-orange-600 dark:text-orange-400 font-medium"
+                                                        )}
+                                                    >
+                                                        {getLimitValue(
+                                                            MACHINE_CLIENTS
+                                                        ) ??
+                                                            t(
+                                                                "billingUnlimited"
+                                                            ) ??
+                                                            "∞"}
+                                                    </span>
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                    <p>
+                                                        {t(
+                                                            "billingUsageExceedsLimit",
+                                                            {
+                                                                current:
+                                                                    getUsageValue(
+                                                                        MACHINE_CLIENTS
+                                                                    ),
+                                                                limit:
+                                                                    getLimitValue(
+                                                                        MACHINE_CLIENTS
+                                                                    ) ?? 0
+                                                            }
+                                                        ) ||
+                                                            `Current usage (${getUsageValue(MACHINE_CLIENTS)}) exceeds limit (${getLimitValue(MACHINE_CLIENTS)})`}
+                                                    </p>
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        ) : (
+                                            <>
+                                                {getLimitValue(
+                                                    MACHINE_CLIENTS
+                                                ) ??
+                                                    t("billingUnlimited") ??
+                                                    "∞"}
+                                            </>
+                                        )}
+                                    </InfoSectionContent>
+                                </InfoSection>
                             </InfoSections>
                         </div>
                     </div>
@@ -1324,36 +1557,46 @@ export default function BillingPage() {
                         </SettingsSectionDescription>
                     </SettingsSectionHeader>
                     <SettingsSectionBody>
-                        <div className="w-full md:w-1/2">
-                            <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 border rounded-lg p-4">
-                                <div>
-                                    <div className="text-sm text-muted-foreground mb-1">
-                                        {t("billingCurrentKeys") ||
-                                            "Current Keys"}
+                        <SettingsSectionForm variant="half">
+                            <SettingsFormGrid>
+                                <SettingsFormCell span="full">
+                                    <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 border rounded-lg p-4">
+                                        <div>
+                                            <div className="text-sm text-muted-foreground mb-1">
+                                                {t("billingCurrentKeys") ||
+                                                    "Current Keys"}
+                                            </div>
+                                            <div className="flex items-baseline gap-2">
+                                                <span className="text-3xl font-semibold">
+                                                    {getLicenseKeyCount()}
+                                                </span>
+                                                <span className="text-lg">
+                                                    {getLicenseKeyCount() === 1
+                                                        ? "key"
+                                                        : "keys"}
+                                                </span>
+                                            </div>
+                                        </div>
+                                        <Button
+                                            variant="outline"
+                                            onClick={handleModifySubscription}
+                                            disabled={isLoading}
+                                            loading={isLoading}
+                                        >
+                                            <CreditCard className="mr-2 h-4 w-4" />
+                                            {t("billingModifyCurrentPlan") ||
+                                                "Modify Current Plan"}
+                                        </Button>
+                                        <p className="text-sm text-muted-foreground mt-2">
+                                            {t(
+                                                "billingManageLicenseSubscriptionDescription"
+                                            ) ||
+                                                "Manage your subscription for paid self-hosted license keys and download invoices."}
+                                        </p>
                                     </div>
-                                    <div className="flex items-baseline gap-2">
-                                        <span className="text-3xl font-semibold">
-                                            {getLicenseKeyCount()}
-                                        </span>
-                                        <span className="text-lg">
-                                            {getLicenseKeyCount() === 1
-                                                ? "key"
-                                                : "keys"}
-                                        </span>
-                                    </div>
-                                </div>
-                                <Button
-                                    variant="outline"
-                                    onClick={handleModifySubscription}
-                                    disabled={isLoading}
-                                    loading={isLoading}
-                                >
-                                    <CreditCard className="mr-2 h-4 w-4" />
-                                    {t("billingModifyCurrentPlan") ||
-                                        "Modify Current Plan"}
-                                </Button>
-                            </div>
-                        </div>
+                                </SettingsFormCell>
+                            </SettingsFormGrid>
+                        </SettingsSectionForm>
                     </SettingsSectionBody>
                 </SettingsSection>
             )}
@@ -1494,6 +1737,45 @@ export default function BillingPage() {
                                                         "Remote Nodes"}
                                                 </span>
                                             </div>
+                                            <div className="flex items-center gap-2">
+                                                <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/50 shrink-0" />
+                                                <span>
+                                                    {
+                                                        tierLimits[
+                                                            pendingTier.tier
+                                                        ].publicResources
+                                                    }{" "}
+                                                    {t(
+                                                        "billingPublicResources"
+                                                    ) || "Public Resources"}
+                                                </span>
+                                            </div>
+                                            <div className="flex items-center gap-2">
+                                                <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/50 shrink-0" />
+                                                <span>
+                                                    {
+                                                        tierLimits[
+                                                            pendingTier.tier
+                                                        ].privateResources
+                                                    }{" "}
+                                                    {t(
+                                                        "billingPrivateResources"
+                                                    ) || "Private Resources"}
+                                                </span>
+                                            </div>
+                                            <div className="flex items-center gap-2">
+                                                <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/50 shrink-0" />
+                                                <span>
+                                                    {
+                                                        tierLimits[
+                                                            pendingTier.tier
+                                                        ].machineClients
+                                                    }{" "}
+                                                    {t(
+                                                        "billingMachineClients"
+                                                    ) || "Machine Clients"}
+                                                </span>
+                                            </div>
                                         </div>
                                     </div>
                                 )}

src/app/[orgId]/settings/(private)/policies/layout.tsx

@@ -0,0 +1,23 @@
+import { getCachedOrg } from "@app/lib/api/getCachedOrg";
+import OrgProvider from "@app/providers/OrgProvider";
+import type { GetOrgResponse } from "@server/routers/org";
+import { redirect } from "next/navigation";
+
+export interface PolicyLayoutPageProps {
+    params: Promise<{ orgId: string }>;
+    children: React.ReactNode;
+}
+
+export default async function PolicyLayoutPage(props: PolicyLayoutPageProps) {
+    const params = await props.params;
+
+    let org: GetOrgResponse | null = null;
+    try {
+        const res = await getCachedOrg(params.orgId);
+        org = res.data.data;
+    } catch {
+        redirect(`/${params.orgId}/settings`);
+    }
+
+    return <OrgProvider org={org}>{props.children}</OrgProvider>;
+}

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

@@ -0,0 +1,7 @@
+"use client";
+
+import { EditPolicyForm } from "@app/components/resource-policy/EditPolicyForm";
+
+export default function EditPolicyAuthenticationPage() {
+    return <EditPolicyForm section="authentication" />;
+}

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

@@ -0,0 +1,7 @@
+"use client";
+
+import { EditPolicyForm } from "@app/components/resource-policy/EditPolicyForm";
+
+export default function EditPolicyGeneralPage() {
+    return <EditPolicyForm section="general" />;
+}

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

@@ -0,0 +1,85 @@
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
+import { Button } from "@app/components/ui/button";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { ResourcePolicyProvider } from "@app/providers/ResourcePolicyProvider";
+import type { GetResourcePolicyResponse } from "@server/routers/policy";
+import type { AxiosResponse } from "axios";
+import { getTranslations } from "next-intl/server";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Resource Policy"
+};
+
+export const dynamic = "force-dynamic";
+
+type EditPolicyLayoutProps = {
+    children: React.ReactNode;
+    params: Promise<{ niceId: string; orgId: string }>;
+};
+
+export default async function EditPolicyLayout(props: EditPolicyLayoutProps) {
+    const params = await props.params;
+    const t = await getTranslations();
+
+    let policyResponse: GetResourcePolicyResponse | null = null;
+    try {
+        const res = await internal.get<
+            AxiosResponse<GetResourcePolicyResponse>
+        >(
+            `/org/${params.orgId}/resource-policy/${params.niceId}`,
+            await authCookieHeader()
+        );
+        policyResponse = res.data.data;
+    } catch {
+        redirect(`/${params.orgId}/settings/policies/resources/public`);
+    }
+
+    if (!policyResponse) {
+        redirect(`/${params.orgId}/settings/policies/resources/public`);
+    }
+
+    const navItems = [
+        {
+            title: t("general"),
+            href: "/{orgId}/settings/policies/resources/public/{niceId}/general"
+        },
+        {
+            title: t("authentication"),
+            href: "/{orgId}/settings/policies/resources/public/{niceId}/authentication"
+        },
+        {
+            title: t("policyAccessRulesTitle"),
+            href: "/{orgId}/settings/policies/resources/public/{niceId}/rules"
+        }
+    ];
+
+    return (
+        <>
+            <div className="flex justify-between">
+                <SettingsSectionTitle
+                    title={t("resourcePolicySetting", {
+                        policyName: policyResponse.name
+                    })}
+                    description={t("resourcePolicySettingDescription")}
+                />
+
+                <Button asChild variant="outline">
+                    <Link
+                        href={`/${params.orgId}/settings/policies/resources/public`}
+                    >
+                        {t("resourcePoliciesSeeAll")}
+                    </Link>
+                </Button>
+            </div>
+
+            <ResourcePolicyProvider policy={policyResponse}>
+                <HorizontalTabs items={navItems}>{props.children}</HorizontalTabs>
+            </ResourcePolicyProvider>
+        </>
+    );
+}

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

@@ -0,0 +1,12 @@
+import { redirect } from "next/navigation";
+
+type EditPolicyPageProps = {
+    params: Promise<{ niceId: string; orgId: string }>;
+};
+
+export default async function EditPolicyPage(props: EditPolicyPageProps) {
+    const params = await props.params;
+    redirect(
+        `/${params.orgId}/settings/policies/resources/public/${params.niceId}/general`
+    );
+}

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

@@ -0,0 +1,7 @@
+"use client";
+
+import { EditPolicyForm } from "@app/components/resource-policy/EditPolicyForm";
+
+export default function EditPolicyRulesPage() {
+    return <EditPolicyForm section="rules" />;
+}

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

@@ -0,0 +1,37 @@
+import { CreatePolicyForm } from "@app/components/resource-policy/CreatePolicyForm";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { Button } from "@app/components/ui/button";
+import { getTranslations } from "next-intl/server";
+import Link from "next/link";
+
+export interface CreateResourcePolicyPageProps {
+    params: Promise<{ orgId: string }>;
+}
+
+export default async function CreateResourcePolicyPage(
+    props: CreateResourcePolicyPageProps
+) {
+    const params = await props.params;
+    const t = await getTranslations();
+
+    return (
+        <>
+            <div className="flex justify-between">
+                <SettingsSectionTitle
+                    title={t("resourcePoliciesCreate")}
+                    description={t("resourcePoliciesCreateDescription")}
+                />
+
+                <Button asChild variant="outline">
+                    <Link
+                        href={`/${params.orgId}/settings/policies/resources/public`}
+                    >
+                        {t("resourcePoliciesSeeAll")}
+                    </Link>
+                </Button>
+            </div>
+
+            <CreatePolicyForm />
+        </>
+    );
+}

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

@@ -0,0 +1,71 @@
+import ResourcePoliciesBanner from "@app/components/ResourcePoliciesBanner";
+import { ResourcePoliciesTable } from "@app/components/ResourcePoliciesTable";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { getCachedOrg } from "@app/lib/api/getCachedOrg";
+import type { GetOrgResponse } from "@server/routers/org";
+import type { ListResourcePoliciesResponse } from "@server/routers/resource/types";
+import type { AxiosResponse } from "axios";
+import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
+
+export interface ResourcePoliciesPageProps {
+    params: Promise<{ orgId: string }>;
+    searchParams: Promise<Record<string, string>>;
+}
+
+export default async function ResourcePoliciesPage(
+    props: ResourcePoliciesPageProps
+) {
+    const params = await props.params;
+    const t = await getTranslations();
+    const searchParams = new URLSearchParams(await props.searchParams);
+
+    let org: GetOrgResponse | null = null;
+    try {
+        const res = await getCachedOrg(params.orgId);
+        org = res.data.data;
+    } catch {
+        redirect(`/${params.orgId}/settings/resources`);
+    }
+
+    let policies: ListResourcePoliciesResponse["policies"] = [];
+    let pagination: ListResourcePoliciesResponse["pagination"] = {
+        total: 0,
+        page: 1,
+        pageSize: 20
+    };
+    try {
+        const res = await internal.get<
+            AxiosResponse<ListResourcePoliciesResponse>
+        >(
+            `/org/${params.orgId}/resource-policies?${searchParams.toString()}`,
+            await authCookieHeader()
+        );
+        const responseData = res.data.data;
+        policies = responseData.policies;
+        pagination = responseData.pagination;
+    } catch (e) {}
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t("resourcePoliciesTitle")}
+                description={t("resourcePoliciesDescription")}
+            />
+
+            <ResourcePoliciesBanner />
+
+            <ResourcePoliciesTable
+                policies={policies}
+                orgId={params.orgId}
+                rowCount={pagination.total}
+                pagination={{
+                    pageIndex: pagination.page - 1,
+                    pageSize: pagination.pageSize
+                }}
+            />
+        </>
+    );
+}

src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/layout.tsx

@@ -37,6 +37,10 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
         {
             title: t("credentials"),
             href: "/{orgId}/settings/remote-exit-nodes/{remoteExitNodeId}/credentials"
+        },
+        {
+            title: "Networking",
+            href: "/{orgId}/settings/remote-exit-nodes/{remoteExitNodeId}/networking"
         }
     ];
 

src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/networking/page.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import {
+    SettingsContainer,
+    SettingsFormCell,
+    SettingsFormGrid,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { Button } from "@app/components/ui/button";
+import { Label } from "@app/components/ui/label";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { useParams } from "next/navigation";
+import { AxiosResponse } from "axios";
+import { useRemoteExitNodeContext } from "@app/hooks/useRemoteExitNodeContext";
+import { TagInput, type Tag } from "@app/components/tags/tag-input";
+import { MultiSelectTagInput } from "@app/components/multi-select/multi-select-tag-input";
+import type { TagValue } from "@app/components/multi-select/multi-select-content";
+import { orgQueries } from "@app/lib/queries";
+import { useQuery } from "@tanstack/react-query";
+import { useDebounce } from "use-debounce";
+import type { ListRemoteExitNodeResourcesResponse } from "@server/routers/remoteExitNode";
+import type { SetRemoteExitNodeResourcesResponse } from "@server/routers/remoteExitNode";
+import type { ListRemoteExitNodePreferenceLabelsResponse } from "@server/routers/remoteExitNode";
+import type { SetRemoteExitNodePreferenceLabelsResponse } from "@server/routers/remoteExitNode";
+import { useTranslations } from "next-intl";
+import { ExternalLink } from "lucide-react";
+
+const cidrRegex =
+    /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(\/([0-9]|[1-2][0-9]|3[0-2]))$|^(([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]+|::(ffff(:0{1,4})?:)?((25[0-5]|(2[0-4]|1?[0-9])?[0-9])\.){3}(25[0-5]|(2[0-4]|1?[0-9])?[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1?[0-9])?[0-9])\.){3}(25[0-5]|(2[0-4]|1?[0-9])?[0-9]))(\/([0-9]|[1-9][0-9]|1[0-1][0-9]|12[0-8]))$/;
+
+export default function NetworkingPage() {
+    const t = useTranslations();
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
+    const { orgId } = useParams<{
+        orgId: string;
+        remoteExitNodeId: string;
+    }>();
+    const { remoteExitNode } = useRemoteExitNodeContext();
+
+    // Subnets state
+    const [subnets, setSubnets] = useState<Tag[]>([]);
+    const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
+    const [loadingSubnets, setLoadingSubnets] = useState(true);
+
+    // Labels state
+    const [selectedLabels, setSelectedLabels] = useState<TagValue[]>([]);
+    const [labelSearchQuery, setLabelSearchQuery] = useState("");
+    const [loadingLabels, setLoadingLabels] = useState(true);
+
+    const [saving, setSaving] = useState(false);
+
+    const [debouncedLabelQuery] = useDebounce(labelSearchQuery, 150);
+
+    const { data: availableLabels = [] } = useQuery(
+        orgQueries.labels({ orgId, query: debouncedLabelQuery, perPage: 10 })
+    );
+
+    const labelsShown = useMemo<TagValue[]>(() => {
+        const base: TagValue[] = availableLabels.map((l) => ({
+            id: l.labelId.toString(),
+            text: l.name,
+            color: l.color
+        }));
+        if (debouncedLabelQuery.trim().length === 0) {
+            for (const sel of selectedLabels) {
+                if (!base.find((b) => b.id === sel.id)) {
+                    base.unshift(sel);
+                }
+            }
+        }
+        return base;
+    }, [availableLabels, selectedLabels, debouncedLabelQuery]);
+
+    useEffect(() => {
+        async function loadSubnets() {
+            try {
+                const res = await api.get<
+                    AxiosResponse<ListRemoteExitNodeResourcesResponse>
+                >(
+                    `/org/${orgId}/remote-exit-node/${remoteExitNode.remoteExitNodeId}/resources`
+                );
+                setSubnets(
+                    res.data.data.resources.map((r) => ({
+                        id: r.destination,
+                        text: r.destination
+                    }))
+                );
+            } catch (error) {
+                toast({
+                    variant: "destructive",
+                    title: t("error"),
+                    description:
+                        formatAxiosError(error) ||
+                        t("remoteExitNodeNetworkingSubnetsLoadError")
+                });
+            } finally {
+                setLoadingSubnets(false);
+            }
+        }
+
+        async function loadLabels() {
+            try {
+                const res = await api.get<
+                    AxiosResponse<ListRemoteExitNodePreferenceLabelsResponse>
+                >(
+                    `/org/${orgId}/remote-exit-node/${remoteExitNode.remoteExitNodeId}/preference-labels`
+                );
+                setSelectedLabels(
+                    res.data.data.labels.map((l) => ({
+                        id: l.labelId.toString(),
+                        text: l.name,
+                        color: l.color
+                    }))
+                );
+            } catch (error) {
+                toast({
+                    variant: "destructive",
+                    title: t("error"),
+                    description:
+                        formatAxiosError(error) ||
+                        t("remoteExitNodeNetworkingLabelsLoadError")
+                });
+            } finally {
+                setLoadingLabels(false);
+            }
+        }
+
+        loadSubnets();
+        loadLabels();
+    }, [remoteExitNode.remoteExitNodeId]);
+
+    const handleSave = async () => {
+        setSaving(true);
+        try {
+            await Promise.all([
+                api.post<AxiosResponse<SetRemoteExitNodeResourcesResponse>>(
+                    `/org/${orgId}/remote-exit-node/${remoteExitNode.remoteExitNodeId}/resources`,
+                    { destinations: subnets.map((s) => s.text) }
+                ),
+                api.post<
+                    AxiosResponse<SetRemoteExitNodePreferenceLabelsResponse>
+                >(
+                    `/org/${orgId}/remote-exit-node/${remoteExitNode.remoteExitNodeId}/preference-labels`,
+                    { labelIds: selectedLabels.map((l) => parseInt(l.id)) }
+                )
+            ]);
+            toast({
+                title: t("remoteExitNodeNetworkingSaveSuccessTitle"),
+                description: t("remoteExitNodeNetworkingSaveSuccessDescription")
+            });
+        } catch (error) {
+            toast({
+                variant: "destructive",
+                title: t("error"),
+                description:
+                    formatAxiosError(error) ||
+                    t("remoteExitNodeNetworkingSaveError")
+            });
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    return (
+        <SettingsContainer>
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("remoteExitNodeNetworkingTitle")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t("remoteExitNodeNetworkingDescription")}
+                        <a
+                            href="https://docs.pangolin.net/placeholder"
+                            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>
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+                <SettingsSectionBody>
+                    <SettingsSectionForm variant="half">
+                        <SettingsFormGrid>
+                            <SettingsFormCell span="half">
+                                <div className="grid gap-2">
+                                    <Label>
+                                        {t(
+                                            "remoteExitNodeNetworkingSubnetsTitle"
+                                        )}
+                                    </Label>
+                                    <TagInput
+                                        tags={subnets}
+                                        setTags={setSubnets}
+                                        placeholder={t(
+                                            "remoteExitNodeNetworkingSubnetsPlaceholder"
+                                        )}
+                                        validateTag={(tag) =>
+                                            cidrRegex.test(tag.trim())
+                                        }
+                                        activeTagIndex={activeTagIndex}
+                                        setActiveTagIndex={setActiveTagIndex}
+                                        disabled={loadingSubnets}
+                                        allowDuplicates={false}
+                                        size="sm"
+                                        inlineTags={true}
+                                    />
+                                    <p className="text-sm text-muted-foreground">
+                                        {t.rich(
+                                            "remoteExitNodeNetworkingSubnetsDescription",
+                                            {
+                                                code: (chunks) => (
+                                                    <code>{chunks}</code>
+                                                )
+                                            }
+                                        )}{" "}
+                                    </p>
+                                </div>
+                            </SettingsFormCell>
+                            <SettingsFormCell span="half">
+                                <div className="grid gap-2">
+                                    <Label>
+                                        {t(
+                                            "remoteExitNodeNetworkingLabelsTitle"
+                                        )}
+                                    </Label>
+                                    <MultiSelectTagInput
+                                        value={selectedLabels}
+                                        options={labelsShown}
+                                        onChange={setSelectedLabels}
+                                        onSearch={setLabelSearchQuery}
+                                        searchQuery={labelSearchQuery}
+                                        disabled={loadingLabels}
+                                        buttonText={t(
+                                            "remoteExitNodeNetworkingLabelsButtonText"
+                                        )}
+                                        searchPlaceholder={t(
+                                            "remoteExitNodeNetworkingLabelsSearchPlaceholder"
+                                        )}
+                                    />
+                                    <p className="text-sm text-muted-foreground">
+                                        {t(
+                                            "remoteExitNodeNetworkingLabelsDescription"
+                                        )}
+                                    </p>
+                                </div>
+                            </SettingsFormCell>
+                        </SettingsFormGrid>
+                    </SettingsSectionForm>
+                </SettingsSectionBody>
+                <SettingsSectionFooter>
+                    <Button onClick={handleSave} loading={saving}>
+                        {t("remoteExitNodeNetworkingSave")}
+                    </Button>
+                </SettingsSectionFooter>
+            </SettingsSection>
+        </SettingsContainer>
+    );
+}

src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/page.tsx

@@ -10,6 +10,6 @@ export default async function RemoteExitNodePage(props: {
 }) {
     const params = await props.params;
     redirect(
-        `/${params.orgId}/settings/remote-exit-nodes/${params.remoteExitNodeId}/credentials`
+        `/${params.orgId}/settings/remote-exit-nodes/${params.remoteExitNodeId}/networking`
     );
 }

src/app/[orgId]/settings/(private)/remote-exit-nodes/create/page.tsx

@@ -35,8 +35,6 @@ import { toast } from "@app/hooks/useToast";
 import { AxiosResponse } from "axios";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
-import { InfoIcon } from "lucide-react";
 import HeaderTitle from "@app/components/SettingsSectionTitle";
 import { StrategySelect } from "@app/components/StrategySelect";
 

src/app/[orgId]/settings/access/users/[userId]/access-controls/page.tsx

@@ -111,7 +111,7 @@ export default function AccessControlsPage() {
         if (values.roles.length === 0) {
             toast({
                 variant: "destructive",
-                title: t("accessRoleErrorAdd"),
+                title: t("accessRoleRequired"),
                 description: t("accessRoleSelectPlease")
             });
             return;
@@ -173,15 +173,13 @@ export default function AccessControlsPage() {
         if (values.roles.length === 0) {
             toast({
                 variant: "destructive",
-                title: t("accessRoleErrorAdd"),
+                title: t("accessRoleRequired"),
                 description: t("accessRoleSelectPlease")
             });
             return;
         }
 
-        const willHaveAdminRole = values.roles.some(
-            (r) => r.isAdmin === true
-        );
+        const willHaveAdminRole = values.roles.some((r) => r.isAdmin === true);
 
         const isRemovingOwnAdmin =
             sessionUser.userId === user.userId &&
@@ -226,7 +224,9 @@ export default function AccessControlsPage() {
                     <SettingsSectionForm>
                         <Form {...form}>
                             <form
-                                onSubmit={(e) => void handleAccessControlsSubmit(e)}
+                                onSubmit={(e) =>
+                                    void handleAccessControlsSubmit(e)
+                                }
                                 className="space-y-4"
                                 id="access-controls-form"
                             >

src/app/[orgId]/settings/access/users/create/page.tsx

@@ -13,7 +13,7 @@ import { StrategyOption, StrategySelect } from "@app/components/StrategySelect";
 import HeaderTitle from "@app/components/SettingsSectionTitle";
 import { Button } from "@app/components/ui/button";
 import { useParams, useRouter } from "next/navigation";
-import { useActionState, useState } from "react";
+import { useActionState, useRef, useState } from "react";
 import {
     Form,
     FormControl,
@@ -205,23 +205,7 @@ export default function Page() {
         }
     });
 
-    useEffect(() => {
-        if (selectedOption === "internal") {
-            setSendEmail(env.email.emailEnabled);
-            internalForm.reset();
-            setInviteLink(null);
-            setExpiresInDays(1);
-        } else if (selectedOption && selectedOption !== "internal") {
-            googleAzureForm.reset();
-            genericOidcForm.reset();
-        }
-    }, [
-        selectedOption,
-        env.email.emailEnabled,
-        internalForm,
-        googleAzureForm,
-        genericOidcForm
-    ]);
+    const prevSelectedOptionRef = useRef(selectedOption);
 
     useEffect(() => {
         if (!selectedOption) {
@@ -315,19 +299,10 @@ export default function Page() {
         onSubmitInternal,
         null
     );
-    const [, submitGoogleAzureAction, isSubmittingGoogleAzure] = useActionState(
-        onSubmitGoogleAzure,
-        null
-    );
-    const [, submitGenericOidcAction, isSubmittingGenericOidc] = useActionState(
-        onSubmitGenericOidc,
-        null
-    );
+    const [isSubmittingExternal, setIsSubmittingExternal] = useState(false);
 
     const loading =
-        isSubmittingInternal ||
-        isSubmittingGoogleAzure ||
-        isSubmittingGenericOidc;
+        isSubmittingInternal || isSubmittingExternal;
 
     async function onSubmitInternal() {
         const isValid = await internalForm.trigger();
@@ -378,17 +353,16 @@ export default function Page() {
         }
     }
 
-    async function onSubmitGoogleAzure() {
-        const isValid = await googleAzureForm.trigger();
-        if (!isValid) return;
-
-        const values = googleAzureForm.getValues();
-
+    async function onSubmitGoogleAzure(
+        values: z.infer<typeof googleAzureFormSchema>
+    ) {
         const selectedUserOption = userOptions.find(
             (opt) => opt.id === selectedOption
         );
         if (!selectedUserOption?.idpId) return;
 
+        setIsSubmittingExternal(true);
+
         const roleIds = values.roles.map((r) => parseInt(r.id, 10));
 
         const res = await api
@@ -419,19 +393,20 @@ export default function Page() {
             });
             router.push(`/${orgId}/settings/access/users`);
         }
+
+        setIsSubmittingExternal(false);
     }
 
-    async function onSubmitGenericOidc() {
-        const isValid = await genericOidcForm.trigger();
-        if (!isValid) return;
-
-        const values = genericOidcForm.getValues();
-
+    async function onSubmitGenericOidc(
+        values: z.infer<typeof genericOidcFormSchema>
+    ) {
         const selectedUserOption = userOptions.find(
             (opt) => opt.id === selectedOption
         );
         if (!selectedUserOption?.idpId) return;
 
+        setIsSubmittingExternal(true);
+
         const roleIds = values.roles.map((r) => parseInt(r.id, 10));
 
         const res = await api
@@ -462,6 +437,27 @@ export default function Page() {
             });
             router.push(`/${orgId}/settings/access/users`);
         }
+
+        setIsSubmittingExternal(false);
+    }
+
+    function handleUserTypeChange(value: string) {
+        if (prevSelectedOptionRef.current === value) {
+            return;
+        }
+
+        prevSelectedOptionRef.current = value;
+        setSelectedOption(value);
+
+        if (value === "internal") {
+            setSendEmail(env.email.emailEnabled);
+            internalForm.reset();
+            setInviteLink(null);
+            setExpiresInDays(1);
+        } else {
+            googleAzureForm.reset();
+            genericOidcForm.reset();
+        }
     }
 
     return (
@@ -496,16 +492,8 @@ export default function Page() {
                             <SettingsSectionBody>
                                 <StrategySelect
                                     options={userOptions}
-                                    defaultValue={selectedOption || undefined}
-                                    onChange={(value) => {
-                                        setSelectedOption(value);
-                                        if (value === "internal") {
-                                            internalForm.reset();
-                                        } else {
-                                            googleAzureForm.reset();
-                                            genericOidcForm.reset();
-                                        }
-                                    }}
+                                    value={selectedOption}
+                                    onChange={handleUserTypeChange}
                                     cols={3}
                                 />
                             </SettingsSectionBody>
@@ -714,9 +702,9 @@ export default function Page() {
                                         })() && (
                                             <Form {...googleAzureForm}>
                                                 <form
-                                                    action={
-                                                        submitGoogleAzureAction
-                                                    }
+                                                    onSubmit={googleAzureForm.handleSubmit(
+                                                        onSubmitGoogleAzure
+                                                    )}
                                                     className="space-y-4"
                                                     id="create-user-form"
                                                 >
@@ -797,9 +785,9 @@ export default function Page() {
                                         })() && (
                                             <Form {...genericOidcForm}>
                                                 <form
-                                                    action={
-                                                        submitGenericOidcAction
-                                                    }
+                                                    onSubmit={genericOidcForm.handleSubmit(
+                                                        onSubmitGenericOidc
+                                                    )}
                                                     className="space-y-4"
                                                     id="create-user-form"
                                                 >

src/app/[orgId]/settings/blueprints/page.tsx

@@ -48,7 +48,7 @@ export default async function BluePrintsPage(props: BluePrintsPageProps) {
     return (
         <OrgProvider org={org}>
             <SettingsSectionTitle
-                title={t("blueprints")}
+                title={t("blueprintsLog")}
                 description={t("blueprintsDescription")}
             />
             <BlueprintsTable blueprints={blueprints} orgId={params.orgId} />

src/app/[orgId]/settings/clients/machine/create/page.tsx

@@ -9,9 +9,12 @@ import {
 } from "@app/components/InfoSection";
 import {
     SettingsContainer,
+    SettingsFormCell,
+    SettingsFormGrid,
     SettingsSection,
     SettingsSectionBody,
     SettingsSectionDescription,
+    SettingsSectionForm,
     SettingsSectionHeader,
     SettingsSectionTitle
 } from "@app/components/Settings";
@@ -250,89 +253,102 @@ export default function Page() {
                                 </SettingsSectionTitle>
                             </SettingsSectionHeader>
                             <SettingsSectionBody>
-                                <Form {...form}>
-                                    <form
-                                        onKeyDown={(e) => {
-                                            if (e.key === "Enter") {
-                                                e.preventDefault(); // block default enter refresh
-                                            }
-                                        }}
-                                        className="space-y-4 grid gap-4 grid-cols-1 md:grid-cols-2 items-start"
-                                        id="create-client-form"
-                                    >
-                                        <FormField
-                                            control={form.control}
-                                            name="name"
-                                            render={({ field }) => (
-                                                <FormItem>
-                                                    <FormLabel>
-                                                        {t("name")}
-                                                    </FormLabel>
-                                                    <FormControl>
-                                                        <Input
-                                                            autoComplete="off"
-                                                            {...field}
-                                                        />
-                                                    </FormControl>
-                                                    <FormMessage />
-                                                    <FormDescription>
-                                                        {t(
-                                                            "clientNameDescription"
-                                                        )}
-                                                    </FormDescription>
-                                                </FormItem>
-                                            )}
-                                        />
-                                        <div className="flex items-center justify-end md:col-start-2">
-                                            <Button
-                                                type="button"
-                                                variant="ghost"
-                                                size="sm"
-                                                onClick={() =>
-                                                    setShowAdvancedSettings(
-                                                        !showAdvancedSettings
-                                                    )
+                                <SettingsSectionForm variant="half">
+                                    <Form {...form}>
+                                        <form
+                                            onKeyDown={(e) => {
+                                                if (e.key === "Enter") {
+                                                    e.preventDefault(); // block default enter refresh
                                                 }
-                                                className="flex items-center gap-2"
-                                            >
-                                                {showAdvancedSettings ? (
-                                                    <ChevronUp className="h-4 w-4" />
-                                                ) : (
-                                                    <ChevronDown className="h-4 w-4" />
-                                                )}
-                                                {t("advancedSettings")}
-                                            </Button>
-                                        </div>
-                                        {showAdvancedSettings && (
-                                            <FormField
-                                                control={form.control}
-                                                name="subnet"
-                                                render={({ field }) => (
-                                                    <FormItem className="md:col-start-1 md:col-span-2">
-                                                        <FormLabel>
-                                                            {t("clientAddress")}
-                                                        </FormLabel>
-                                                        <FormControl>
-                                                            <Input
-                                                                autoComplete="off"
-                                                                placeholder={t(
-                                                                    "subnetPlaceholder"
-                                                                )}
-                                                                {...field}
-                                                            />
-                                                        </FormControl>
-                                                        <FormMessage />
-                                                        <FormDescription>
-                                                            {t(
-                                                                "addressDescription"
+                                            }}
+                                            id="create-client-form"
+                                        >
+                                            <SettingsFormGrid>
+                                                <SettingsFormCell span="half">
+                                                    <FormField
+                                                        control={form.control}
+                                                        name="name"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormLabel>
+                                                                    {t("name")}
+                                                                </FormLabel>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        autoComplete="off"
+                                                                        {...field}
+                                                                    />
+                                                                </FormControl>
+                                                                <FormMessage />
+                                                                <FormDescription>
+                                                                    {t(
+                                                                        "clientNameDescription"
+                                                                    )}
+                                                                </FormDescription>
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                </SettingsFormCell>
+                                                <SettingsFormCell span="full">
+                                                    <Button
+                                                        type="button"
+                                                        variant="ghost"
+                                                        size="sm"
+                                                        onClick={() =>
+                                                            setShowAdvancedSettings(
+                                                                !showAdvancedSettings
+                                                            )
+                                                        }
+                                                        className="flex items-center gap-2 -ml-3"
+                                                    >
+                                                        {showAdvancedSettings ? (
+                                                            <ChevronUp className="h-4 w-4" />
+                                                        ) : (
+                                                            <ChevronDown className="h-4 w-4" />
+                                                        )}
+                                                        {t("advancedSettings")}
+                                                    </Button>
+                                                </SettingsFormCell>
+                                                {showAdvancedSettings && (
+                                                    <SettingsFormCell span="half">
+                                                        <FormField
+                                                            control={
+                                                                form.control
+                                                            }
+                                                            name="subnet"
+                                                            render={({
+                                                                field
+                                                            }) => (
+                                                                <FormItem>
+                                                                    <FormLabel>
+                                                                        {t(
+                                                                            "clientAddress"
+                                                                        )}
+                                                                    </FormLabel>
+                                                                    <FormControl>
+                                                                        <Input
+                                                                            autoComplete="off"
+                                                                            placeholder={t(
+                                                                                "subnetPlaceholder"
+                                                                            )}
+                                                                            {...field}
+                                                                        />
+                                                                    </FormControl>
+                                                                    <FormMessage />
+                                                                    <FormDescription>
+                                                                        {t(
+                                                                            "addressDescription"
+                                                                        )}
+                                                                    </FormDescription>
+                                                                </FormItem>
                                                             )}
-                                                        </FormDescription>
-                                                    </FormItem>
+                                                        />
+                                                    </SettingsFormCell>
                                                 )}
-                                            />
-                                        )}
-                                    </form>
-                                </Form>
+                                            </SettingsFormGrid>
+                                        </form>
+                                    </Form>
+                                </SettingsSectionForm>
                             </SettingsSectionBody>
                         </SettingsSection>
 

src/app/[orgId]/settings/clients/machine/page.tsx

@@ -76,7 +76,8 @@ export default async function ClientsPage(props: ClientsPageProps) {
             agent: client.agent,
             archived: client.archived || false,
             blocked: client.blocked || false,
-            approvalState: client.approvalState ?? "approved"
+            approvalState: client.approvalState ?? "approved",
+            labels: client.labels ?? []
         };
     };
 

src/app/[orgId]/settings/clients/user/[niceId]/general/page.tsx

@@ -41,6 +41,13 @@ import { useParams } from "next/navigation";
 import { FaApple, FaWindows, FaLinux } from "react-icons/fa";
 import { SiAndroid } from "react-icons/si";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import {
+    productUpdatesQueries,
+    type LatestVersionResponse
+} from "@app/lib/queries";
+import { useQuery } from "@tanstack/react-query";
+import semver from "semver";
+import { InfoPopup } from "@app/components/ui/info-popup";
 
 function formatTimestamp(timestamp: number | null | undefined): string {
     if (!timestamp) return "-";
@@ -166,6 +173,38 @@ export default function GeneralPage() {
     }>(null);
     const [isCheckingCache, setIsCheckingCache] = useState(false);
     const [isRebuildingCache, setIsRebuildingCache] = useState(false);
+    const data = useQuery(productUpdatesQueries.latestVersion(true));
+    const latestPlatformVersions = data.data?.data;
+
+    const agentVersionMap: Record<string, string> = {
+        "Pangolin Windows": "windows",
+        "Pangolin Android": "android",
+        "Pangolin iOS": "ios",
+        "Pangolin iPadOS": "ios",
+        "Pangolin macOS": "mac",
+        "Pangolin CLI": "cli",
+        "Olm CLI": "olm"
+    };
+
+    let updateAvailable = false;
+    if (client.agent && client.olmVersion && latestPlatformVersions) {
+        const agent = agentVersionMap[
+            client.agent
+        ] as keyof LatestVersionResponse;
+
+        if (agent in latestPlatformVersions) {
+            const agentVersion = latestPlatformVersions[agent];
+
+            updateAvailable = Boolean(
+                semver.valid(client.olmVersion) &&
+                semver.lt(client.olmVersion, agentVersion.latestVersion)
+            );
+        }
+    }
+
+    // get "imp" from local storage to determine if we should show the verify button (imp = "1" means show)
+    const showVerifyButton =
+        typeof window !== "undefined" && localStorage.getItem("imp") === "1";
 
     const handleRebuildCache = async () => {
         if (!client.clientId) return;
@@ -447,11 +486,21 @@ export default function GeneralPage() {
                                         {t("agent")}
                                     </InfoSectionTitle>
                                     <InfoSectionContent>
-                                        <Badge variant="secondary">
-                                            {client.agent +
-                                                " v" +
-                                                client.olmVersion}
-                                        </Badge>
+                                        <div className="flex items-center">
+                                            <Badge variant="secondary">
+                                                {client.agent +
+                                                    " v" +
+                                                    client.olmVersion}
+                                            </Badge>
+
+                                            {updateAvailable && (
+                                                <InfoPopup
+                                                    info={t(
+                                                        "updateAvailableInfo"
+                                                    )}
+                                                />
+                                            )}
+                                        </div>
                                     </InfoSectionContent>
                                 </InfoSection>
                             </div>
@@ -904,74 +953,77 @@ export default function GeneralPage() {
                 </SettingsSection>
             )}
 
-            {/* Hidden cache verification — subtle button, dev/admin diagnostic */}
-            <div className="mt-8 flex flex-col gap-2 items-start opacity-30 hover:opacity-100 transition-opacity">
-                <button
-                    type="button"
-                    onClick={handleVerifyCache}
-                    disabled={isCheckingCache}
-                    className="text-xs text-muted-foreground underline disabled:opacity-50"
-                    title="Verify the client's site association cache against current permissions (read-only)"
-                >
-                    {isCheckingCache
-                        ? "Checking cache…"
-                        : "Verify association cache"}
-                </button>
-                {cacheCheck && (
-                    <div
-                        className={
-                            "text-xs rounded border px-2 py-1 " +
-                            (cacheCheck.consistent
-                                ? "border-green-600 text-green-700"
-                                : "border-red-600 text-red-700")
-                        }
+            {showVerifyButton && (
+                <div className="mt-8 flex flex-col gap-2 items-start opacity-30 hover:opacity-100 transition-opacity">
+                    <button
+                        type="button"
+                        onClick={handleVerifyCache}
+                        disabled={isCheckingCache}
+                        className="text-xs text-muted-foreground underline disabled:opacity-50"
+                        title="Verify the client's site association cache against current permissions (read-only)"
                     >
-                        {cacheCheck.consistent ? (
-                            <span className="flex items-center gap-1">
-                                <CheckCircle2 className="h-3 w-3" />
-                                Cache is consistent
-                            </span>
-                        ) : (
-                            <div className="space-y-2">
-                                <div className="flex items-center gap-1 font-semibold">
-                                    <XCircle className="h-3 w-3" />
-                                    Cache is INCONSISTENT
+                        {isCheckingCache
+                            ? "Checking cache…"
+                            : "Verify association cache"}
+                    </button>
+                    {cacheCheck && (
+                        <div
+                            className={
+                                "text-xs rounded border px-2 py-1 " +
+                                (cacheCheck.consistent
+                                    ? "border-green-600 text-green-700"
+                                    : "border-red-600 text-red-700")
+                            }
+                        >
+                            {cacheCheck.consistent ? (
+                                <span className="flex items-center gap-1">
+                                    <CheckCircle2 className="h-3 w-3" />
+                                    Cache is consistent
+                                </span>
+                            ) : (
+                                <div className="space-y-2">
+                                    <div className="flex items-center gap-1 font-semibold">
+                                        <XCircle className="h-3 w-3" />
+                                        Cache is INCONSISTENT
+                                    </div>
+                                    <div>
+                                        Missing site resources: [
+                                        {cacheCheck.missingSiteResourceIds.join(
+                                            ", "
+                                        )}
+                                        ]
+                                    </div>
+                                    <div>
+                                        Extra site resources: [
+                                        {cacheCheck.extraSiteResourceIds.join(
+                                            ", "
+                                        )}
+                                        ]
+                                    </div>
+                                    <div>
+                                        Missing sites: [
+                                        {cacheCheck.missingSiteIds.join(", ")}]
+                                    </div>
+                                    <div>
+                                        Extra sites: [
+                                        {cacheCheck.extraSiteIds.join(", ")}]
+                                    </div>
+                                    <button
+                                        type="button"
+                                        onClick={handleRebuildCache}
+                                        disabled={isRebuildingCache}
+                                        className="mt-1 text-xs underline font-semibold disabled:opacity-50"
+                                    >
+                                        {isRebuildingCache
+                                            ? "Rebuilding…"
+                                            : "Rebuild cache now"}
+                                    </button>
                                 </div>
-                                <div>
-                                    Missing site resources: [
-                                    {cacheCheck.missingSiteResourceIds.join(
-                                        ", "
-                                    )}
-                                    ]
-                                </div>
-                                <div>
-                                    Extra site resources: [
-                                    {cacheCheck.extraSiteResourceIds.join(", ")}
-                                    ]
-                                </div>
-                                <div>
-                                    Missing sites: [
-                                    {cacheCheck.missingSiteIds.join(", ")}]
-                                </div>
-                                <div>
-                                    Extra sites: [
-                                    {cacheCheck.extraSiteIds.join(", ")}]
-                                </div>
-                                <button
-                                    type="button"
-                                    onClick={handleRebuildCache}
-                                    disabled={isRebuildingCache}
-                                    className="mt-1 text-xs underline font-semibold disabled:opacity-50"
-                                >
-                                    {isRebuildingCache
-                                        ? "Rebuilding…"
-                                        : "Rebuild cache now"}
-                                </button>
-                            </div>
-                        )}
-                    </div>
-                )}
-            </div>
+                            )}
+                        </div>
+                    )}
+                </div>
+            )}
         </SettingsContainer>
     );
 }

src/app/[orgId]/settings/general/page.tsx

@@ -38,11 +38,18 @@ import { useUserContext } from "@app/hooks/useUserContext";
 import { useTranslations } from "next-intl";
 import { build } from "@server/build";
 import type { OrgContextType } from "@app/contexts/orgContext";
+import { SwitchInput } from "@app/components/SwitchInput";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { tierMatrix, TierFeature } from "@server/lib/billing/tierMatrix";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import { ExternalLink } from "lucide-react";
+import { env } from "process";
 
 // Schema for general organization settings
 const GeneralFormSchema = z.object({
     name: z.string(),
-    subnet: z.string().optional()
+    subnet: z.string().optional(),
+    settingsEnableGlobalNewtAutoUpdate: z.boolean().optional()
 });
 
 export default function GeneralPage() {
@@ -159,21 +166,29 @@ function DeleteForm({ org }: SectionFormProps) {
 
 function GeneralSectionForm({ org }: SectionFormProps) {
     const { updateOrg } = useOrgContext();
+    const { env } = useEnvContext();
     const form = useForm({
         resolver: zodResolver(
             GeneralFormSchema.pick({
                 name: true,
-                subnet: true
+                subnet: true,
+                settingsEnableGlobalNewtAutoUpdate: true
             })
         ),
         defaultValues: {
             name: org.name,
-            subnet: org.subnet || "" // Add default value for subnet
+            subnet: org.subnet || "",
+            settingsEnableGlobalNewtAutoUpdate:
+                org.settingsEnableGlobalNewtAutoUpdate ?? false
         },
         mode: "onChange"
     });
     const t = useTranslations();
     const router = useRouter();
+    const { isPaidUser } = usePaidStatus();
+    const hasAutoUpdateFeature = isPaidUser(
+        tierMatrix[TierFeature.NewtAutoUpdate]
+    );
 
     const [, formAction, loadingSave] = useActionState(performSave, null);
     const api = createApiClient(useEnvContext());
@@ -186,7 +201,9 @@ function GeneralSectionForm({ org }: SectionFormProps) {
 
         try {
             const reqData = {
-                name: data.name
+                name: data.name,
+                settingsEnableGlobalNewtAutoUpdate:
+                    data.settingsEnableGlobalNewtAutoUpdate
             } as any;
 
             // Update organization
@@ -194,13 +211,16 @@ function GeneralSectionForm({ org }: SectionFormProps) {
 
             // Update the org context to reflect the change in the info card
             updateOrg({
-                name: data.name
+                name: data.name,
+                settingsEnableGlobalNewtAutoUpdate:
+                    data.settingsEnableGlobalNewtAutoUpdate
             });
 
             toast({
                 title: t("orgUpdated"),
                 description: t("orgUpdatedDescription")
             });
+
             router.refresh();
         } catch (e) {
             toast({
@@ -243,6 +263,46 @@ function GeneralSectionForm({ org }: SectionFormProps) {
                                     </FormItem>
                                 )}
                             />
+
+                            <PaidFeaturesAlert
+                                tiers={tierMatrix.newtAutoUpdate}
+                            />
+                            {!env.flags.disableEnterpriseFeatures && (
+                                <FormField
+                                    control={form.control}
+                                    name="settingsEnableGlobalNewtAutoUpdate"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormControl>
+                                                <SwitchInput
+                                                    id="settings-enable-global-newt-auto-update"
+                                                    label={t("newtAutoUpdate")}
+                                                    checked={field.value}
+                                                    onCheckedChange={
+                                                        field.onChange
+                                                    }
+                                                    disabled={
+                                                        !hasAutoUpdateFeature
+                                                    }
+                                                />
+                                            </FormControl>
+                                            <FormDescription>
+                                                {t("newtAutoUpdateDescription")}{" "}
+                                                <a
+                                                    href="https://docs.pangolin.net/manage/sites/auto-update"
+                                                    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>
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                            )}
                         </form>
                     </Form>
                 </SettingsSectionForm>

src/app/[orgId]/settings/general/security/page.tsx

@@ -224,23 +224,39 @@ function LogRetentionSectionForm({ org }: SectionFormProps) {
                                                 <SelectContent>
                                                     {LOG_RETENTION_OPTIONS.filter(
                                                         (option) => {
-                                                            if (build != "saas") {
+                                                            if (
+                                                                build != "saas"
+                                                            ) {
                                                                 return true;
                                                             }
 
                                                             let maxDays: number;
 
-                                                            if (!subscriptionTier) {
+                                                            if (
+                                                                !subscriptionTier
+                                                            ) {
                                                                 // No tier
                                                                 maxDays = 3;
-                                                            } else if (subscriptionTier == "enterprise") {
+                                                            } else if (
+                                                                subscriptionTier ==
+                                                                "enterprise"
+                                                            ) {
                                                                 // Enterprise - no limit
                                                                 return true;
-                                                            } else if (subscriptionTier == "tier3") {
+                                                            } else if (
+                                                                subscriptionTier ==
+                                                                "tier3"
+                                                            ) {
                                                                 maxDays = 90;
-                                                            } else if (subscriptionTier == "tier2") {
+                                                            } else if (
+                                                                subscriptionTier ==
+                                                                "tier2"
+                                                            ) {
                                                                 maxDays = 30;
-                                                            } else if (subscriptionTier == "tier1") {
+                                                            } else if (
+                                                                subscriptionTier ==
+                                                                "tier1"
+                                                            ) {
                                                                 maxDays = 7;
                                                             } else {
                                                                 // Default to most restrictive
@@ -249,7 +265,12 @@ function LogRetentionSectionForm({ org }: SectionFormProps) {
 
                                                             // Filter out options that exceed the max
                                                             // Special values: -1 (forever) and 9001 (end of year) should be filtered
-                                                            if (option.value < 0 || option.value > maxDays) {
+                                                            if (
+                                                                option.value <
+                                                                    0 ||
+                                                                option.value >
+                                                                    maxDays
+                                                            ) {
                                                                 return false;
                                                             }
 
@@ -322,24 +343,43 @@ function LogRetentionSectionForm({ org }: SectionFormProps) {
                                                             </SelectTrigger>
                                                             <SelectContent>
                                                                 {LOG_RETENTION_OPTIONS.filter(
-                                                                    (option) => {
-                                                                        if (build != "saas") {
+                                                                    (
+                                                                        option
+                                                                    ) => {
+                                                                        if (
+                                                                            build !=
+                                                                            "saas"
+                                                                        ) {
                                                                             return true;
                                                                         }
 
                                                                         let maxDays: number;
 
-                                                                        if (!subscriptionTier) {
+                                                                        if (
+                                                                            !subscriptionTier
+                                                                        ) {
                                                                             // No tier
                                                                             maxDays = 3;
-                                                                        } else if (subscriptionTier == "enterprise") {
+                                                                        } else if (
+                                                                            subscriptionTier ==
+                                                                            "enterprise"
+                                                                        ) {
                                                                             // Enterprise - no limit
                                                                             return true;
-                                                                        } else if (subscriptionTier == "tier3") {
+                                                                        } else if (
+                                                                            subscriptionTier ==
+                                                                            "tier3"
+                                                                        ) {
                                                                             maxDays = 90;
-                                                                        } else if (subscriptionTier == "tier2") {
+                                                                        } else if (
+                                                                            subscriptionTier ==
+                                                                            "tier2"
+                                                                        ) {
                                                                             maxDays = 30;
-                                                                        } else if (subscriptionTier == "tier1") {
+                                                                        } else if (
+                                                                            subscriptionTier ==
+                                                                            "tier1"
+                                                                        ) {
                                                                             maxDays = 7;
                                                                         } else {
                                                                             // Default to most restrictive
@@ -348,7 +388,12 @@ function LogRetentionSectionForm({ org }: SectionFormProps) {
 
                                                                         // Filter out options that exceed the max
                                                                         // Special values: -1 (forever) and 9001 (end of year) should be filtered
-                                                                        if (option.value < 0 || option.value > maxDays) {
+                                                                        if (
+                                                                            option.value <
+                                                                                0 ||
+                                                                            option.value >
+                                                                                maxDays
+                                                                        ) {
                                                                             return false;
                                                                         }
 
@@ -423,24 +468,43 @@ function LogRetentionSectionForm({ org }: SectionFormProps) {
                                                             </SelectTrigger>
                                                             <SelectContent>
                                                                 {LOG_RETENTION_OPTIONS.filter(
-                                                                    (option) => {
-                                                                        if (build != "saas") {
+                                                                    (
+                                                                        option
+                                                                    ) => {
+                                                                        if (
+                                                                            build !=
+                                                                            "saas"
+                                                                        ) {
                                                                             return true;
                                                                         }
 
                                                                         let maxDays: number;
 
-                                                                        if (!subscriptionTier) {
+                                                                        if (
+                                                                            !subscriptionTier
+                                                                        ) {
                                                                             // No tier
                                                                             maxDays = 3;
-                                                                        } else if (subscriptionTier == "enterprise") {
+                                                                        } else if (
+                                                                            subscriptionTier ==
+                                                                            "enterprise"
+                                                                        ) {
                                                                             // Enterprise - no limit
                                                                             return true;
-                                                                        } else if (subscriptionTier == "tier3") {
+                                                                        } else if (
+                                                                            subscriptionTier ==
+                                                                            "tier3"
+                                                                        ) {
                                                                             maxDays = 90;
-                                                                        } else if (subscriptionTier == "tier2") {
+                                                                        } else if (
+                                                                            subscriptionTier ==
+                                                                            "tier2"
+                                                                        ) {
                                                                             maxDays = 30;
-                                                                        } else if (subscriptionTier == "tier1") {
+                                                                        } else if (
+                                                                            subscriptionTier ==
+                                                                            "tier1"
+                                                                        ) {
                                                                             maxDays = 7;
                                                                         } else {
                                                                             // Default to most restrictive
@@ -449,7 +513,12 @@ function LogRetentionSectionForm({ org }: SectionFormProps) {
 
                                                                         // Filter out options that exceed the max
                                                                         // Special values: -1 (forever) and 9001 (end of year) should be filtered
-                                                                        if (option.value < 0 || option.value > maxDays) {
+                                                                        if (
+                                                                            option.value <
+                                                                                0 ||
+                                                                            option.value >
+                                                                                maxDays
+                                                                        ) {
                                                                             return false;
                                                                         }
 
@@ -524,24 +593,43 @@ function LogRetentionSectionForm({ org }: SectionFormProps) {
                                                             </SelectTrigger>
                                                             <SelectContent>
                                                                 {LOG_RETENTION_OPTIONS.filter(
-                                                                    (option) => {
-                                                                        if (build != "saas") {
+                                                                    (
+                                                                        option
+                                                                    ) => {
+                                                                        if (
+                                                                            build !=
+                                                                            "saas"
+                                                                        ) {
                                                                             return true;
                                                                         }
 
                                                                         let maxDays: number;
 
-                                                                        if (!subscriptionTier) {
+                                                                        if (
+                                                                            !subscriptionTier
+                                                                        ) {
                                                                             // No tier
                                                                             maxDays = 3;
-                                                                        } else if (subscriptionTier == "enterprise") {
+                                                                        } else if (
+                                                                            subscriptionTier ==
+                                                                            "enterprise"
+                                                                        ) {
                                                                             // Enterprise - no limit
                                                                             return true;
-                                                                        } else if (subscriptionTier == "tier3") {
+                                                                        } else if (
+                                                                            subscriptionTier ==
+                                                                            "tier3"
+                                                                        ) {
                                                                             maxDays = 90;
-                                                                        } else if (subscriptionTier == "tier2") {
+                                                                        } else if (
+                                                                            subscriptionTier ==
+                                                                            "tier2"
+                                                                        ) {
                                                                             maxDays = 30;
-                                                                        } else if (subscriptionTier == "tier1") {
+                                                                        } else if (
+                                                                            subscriptionTier ==
+                                                                            "tier1"
+                                                                        ) {
                                                                             maxDays = 7;
                                                                         } else {
                                                                             // Default to most restrictive
@@ -550,7 +638,12 @@ function LogRetentionSectionForm({ org }: SectionFormProps) {
 
                                                                         // Filter out options that exceed the max
                                                                         // Special values: -1 (forever) and 9001 (end of year) should be filtered
-                                                                        if (option.value < 0 || option.value > maxDays) {
+                                                                        if (
+                                                                            option.value <
+                                                                                0 ||
+                                                                            option.value >
+                                                                                maxDays
+                                                                        ) {
                                                                             return false;
                                                                         }
 

src/app/[orgId]/settings/labels/page.tsx

@@ -0,0 +1,63 @@
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { ListOrgLabelsResponse } from "@server/routers/labels/types";
+import { AxiosResponse } from "axios";
+import OrgLabelsTable from "@app/components/OrgLabelsTable";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+
+export const metadata: Metadata = {
+    title: "Labels"
+};
+
+type Props = {
+    params: Promise<{ orgId: string }>;
+    searchParams: Promise<Record<string, string>>;
+};
+
+export const dynamic = "force-dynamic";
+
+export default async function LabelsPage({ params, searchParams }: Props) {
+    const { orgId } = await params;
+
+    const searchParamsObj = new URLSearchParams(await searchParams);
+
+    let labels: ListOrgLabelsResponse["labels"] = [];
+    let pagination: ListOrgLabelsResponse["pagination"] = {
+        total: 0,
+        page: 1,
+        pageSize: 20
+    };
+
+    try {
+        const res = await internal.get<AxiosResponse<ListOrgLabelsResponse>>(
+            `/org/${orgId}/labels?${searchParamsObj.toString()}`,
+            await authCookieHeader()
+        );
+        const responseData = res.data.data;
+        labels = responseData.labels;
+        pagination = responseData.pagination;
+    } catch (e) {}
+
+    const t = await getTranslations();
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t("labels")}
+                description={t("orgLabelsDescription")}
+            />
+
+            <OrgLabelsTable
+                labels={labels}
+                orgId={orgId}
+                rowCount={pagination.total}
+                pagination={{
+                    pageIndex: pagination.page - 1,
+                    pageSize: pagination.pageSize
+                }}
+            />
+        </>
+    );
+}

src/app/[orgId]/settings/layout.tsx

@@ -12,7 +12,8 @@ import UserProvider from "@app/providers/UserProvider";
 import { Layout } from "@app/components/Layout";
 import { getTranslations } from "next-intl/server";
 import { pullEnv } from "@app/lib/pullEnv";
-import { orgNavSections } from "@app/app/navigation";
+import { commandBarNavSections, orgNavSections } from "@app/app/navigation";
+import { getCachedOrgUser } from "@app/lib/api/getCachedOrgUser";
 
 export const dynamic = "force-dynamic";
 
@@ -48,13 +49,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
     const t = await getTranslations();
 
     try {
-        const getOrgUser = cache(() =>
-            internal.get<AxiosResponse<GetOrgUserResponse>>(
-                `/org/${params.orgId}/user/${user.userId}`,
-                cookie
-            )
-        );
-        const orgUser = await getOrgUser();
+        const orgUser = await getCachedOrgUser(params.orgId, user.userId);
 
         if (!orgUser.data.data.isAdmin && !orgUser.data.data.isOwner) {
             throw new Error(t("userErrorNotAdminOrOwner"));
@@ -87,6 +82,9 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
                 navItems={orgNavSections(env, {
                     isPrimaryOrg: primaryOrg
                 })}
+                commandNavItems={commandBarNavSections(env, {
+                    isPrimaryOrg: primaryOrg
+                })}
             >
                 {children}
             </Layout>

src/app/[orgId]/settings/logs/access/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Button } from "@app/components/ui/button";
 import { toast } from "@app/hooks/useToast";
-import { useState, useRef, useEffect, useTransition } from "react";
+import { useState, useTransition, useMemo } from "react";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
@@ -11,15 +11,19 @@ import { ColumnDef } from "@tanstack/react-table";
 import { DateTimeValue } from "@app/components/DateTimePicker";
 import { ArrowUpRight, Key, User } from "lucide-react";
 import Link from "next/link";
-import { ColumnFilter } from "@app/components/ColumnFilter";
+import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { build } from "@server/build";
 import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
+import { getPrivateResourceSettingsHref } from "@app/lib/launcherResourceAdminHref";
 import axios from "axios";
 import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { logQueries } from "@app/lib/queries";
+import { useQuery } from "@tanstack/react-query";
+import type { QueryAccessAuditLogResponse } from "@server/routers/auditLogs/types";
 
 export default function GeneralPage() {
     const router = useRouter();
@@ -30,23 +34,8 @@ export default function GeneralPage() {
 
     const { isPaidUser } = usePaidStatus();
 
-    const [rows, setRows] = useState<any[]>([]);
-    const [isRefreshing, setIsRefreshing] = useState(false);
     const [isExporting, startTransition] = useTransition();
-    const [filterAttributes, setFilterAttributes] = useState<{
-        actors: string[];
-        resources: {
-            id: number;
-            name: string | null;
-        }[];
-        locations: string[];
-    }>({
-        actors: [],
-        resources: [],
-        locations: []
-    });
 
-    // Filter states - unified object for all filters
     const [filters, setFilters] = useState<{
         action?: string;
         type?: string;
@@ -61,40 +50,21 @@ export default function GeneralPage() {
         actor: searchParams.get("actor") || undefined
     });
 
-    // Pagination state
-    const [totalCount, setTotalCount] = useState<number>(0);
     const [currentPage, setCurrentPage] = useState<number>(0);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // Initialize page size from storage or default
     const [pageSize, setPageSize] = useStoredPageSize("access-audit-logs", 20);
 
-    // Set default date range to last 24 hours
     const getDefaultDateRange = () => {
-        // if the time is in the url params, use that instead
         const startParam = searchParams.get("start");
         const endParam = searchParams.get("end");
         if (startParam && endParam) {
             return {
-                startDate: {
-                    date: new Date(startParam)
-                },
-                endDate: {
-                    date: new Date(endParam)
-                }
+                startDate: { date: new Date(startParam) },
+                endDate: { date: new Date(endParam) }
             };
         }
-
-        const now = new Date();
-        const lastWeek = getSevenDaysAgo();
-
         return {
-            startDate: {
-                date: lastWeek
-            },
-            endDate: {
-                date: now
-            }
+            startDate: { date: getSevenDaysAgo() },
+            endDate: { date: new Date() }
         };
     };
 
@@ -103,75 +73,95 @@ export default function GeneralPage() {
         endDate: DateTimeValue;
     }>(getDefaultDateRange());
 
-    // Trigger search with default values on component mount
-    useEffect(() => {
-        const defaultRange = getDefaultDateRange();
-        queryDateTime(
-            defaultRange.startDate,
-            defaultRange.endDate,
-            0,
-            pageSize
-        );
-    }, [orgId]); // Re-run if orgId changes
+    const queryFilters = useMemo(() => {
+        let timeStart: string | undefined;
+        let timeEnd: string | undefined;
+
+        if (dateRange.startDate?.date) {
+            const dt = new Date(dateRange.startDate.date);
+            if (dateRange.startDate.time) {
+                const [h, m, s] = dateRange.startDate.time
+                    .split(":")
+                    .map(Number);
+                dt.setHours(h, m, s || 0);
+            }
+            timeStart = dt.toISOString();
+        }
+
+        if (dateRange.endDate?.date) {
+            const dt = new Date(dateRange.endDate.date);
+            if (dateRange.endDate.time) {
+                const [h, m, s] = dateRange.endDate.time.split(":").map(Number);
+                dt.setHours(h, m, s || 0);
+            } else {
+                const now = new Date();
+                dt.setHours(
+                    now.getHours(),
+                    now.getMinutes(),
+                    now.getSeconds(),
+                    now.getMilliseconds()
+                );
+            }
+            timeEnd = dt.toISOString();
+        }
+
+        return {
+            timeStart,
+            timeEnd,
+            page: currentPage,
+            pageSize,
+            ...filters,
+            resourceId: filters.resourceId
+                ? Number(filters.resourceId)
+                : undefined
+        };
+    }, [dateRange, currentPage, pageSize, filters]);
+
+    const { data, isFetching, isLoading, refetch } = useQuery({
+        ...logQueries.access({
+            orgId: orgId as string,
+            filters: queryFilters
+        }),
+        enabled: isPaidUser(tierMatrix.accessLogs) && build !== "oss"
+    });
+
+    const rows = isLoading ? generateSampleAccessLogs() : (data?.log ?? []);
+    const totalCount = data?.pagination?.total ?? 0;
+    const filterAttributes = data?.filterAttributes ?? {
+        actors: [],
+        resources: [],
+        locations: []
+    };
 
     const handleDateRangeChange = (
         startDate: DateTimeValue,
         endDate: DateTimeValue
     ) => {
         setDateRange({ startDate, endDate });
-        setCurrentPage(0); // Reset to first page when filtering
-        // put the search params in the url for the time
+        setCurrentPage(0);
         updateUrlParamsForAllFilters({
             start: startDate.date?.toISOString() || "",
             end: endDate.date?.toISOString() || ""
         });
-
-        queryDateTime(startDate, endDate, 0, pageSize);
     };
 
-    // Handle page changes
     const handlePageChange = (newPage: number) => {
         setCurrentPage(newPage);
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            newPage,
-            pageSize
-        );
     };
 
-    // Handle page size changes
     const handlePageSizeChange = (newPageSize: number) => {
         setPageSize(newPageSize);
-        setCurrentPage(0); // Reset to first page when changing page size
-        queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize);
+        setCurrentPage(0);
     };
 
-    // Handle filter changes generically
     const handleFilterChange = (
         filterType: keyof typeof filters,
         value: string | undefined
     ) => {
-        // Create new filters object with updated value
-        const newFilters = {
-            ...filters,
-            [filterType]: value
-        };
-
+        const newFilters = { ...filters, [filterType]: value };
         setFilters(newFilters);
-        setCurrentPage(0); // Reset to first page when filtering
-
-        // Update URL params
+        setCurrentPage(0);
         updateUrlParamsForAllFilters(newFilters);
-
-        // Trigger new query with updated filters (pass directly to avoid async state issues)
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            0,
-            pageSize,
-            newFilters
-        );
     };
 
     const updateUrlParamsForAllFilters = (
@@ -193,118 +183,8 @@ export default function GeneralPage() {
         router.replace(`?${params.toString()}`, { scroll: false });
     };
 
-    const queryDateTime = async (
-        startDate: DateTimeValue,
-        endDate: DateTimeValue,
-        page: number = currentPage,
-        size: number = pageSize,
-        filtersParam?: {
-            action?: string;
-            type?: string;
-            resourceId?: string;
-            location?: string;
-            actor?: string;
-        }
-    ) => {
-        console.log("Date range changed:", { startDate, endDate, page, size });
-        if (!isPaidUser(tierMatrix.accessLogs) || build === "oss") {
-            console.log(
-                "Access denied: subscription inactive or license locked"
-            );
-            return;
-        }
-
-        setIsLoading(true);
-
-        try {
-            // Use the provided filters or fall back to current state
-            const activeFilters = filtersParam || filters;
-
-            // Convert the date/time values to API parameters
-            const params: any = {
-                limit: size,
-                offset: page * size,
-                ...activeFilters
-            };
-
-            if (startDate?.date) {
-                const startDateTime = new Date(startDate.date);
-                if (startDate.time) {
-                    const [hours, minutes, seconds] = startDate.time
-                        .split(":")
-                        .map(Number);
-                    startDateTime.setHours(hours, minutes, seconds || 0);
-                }
-                params.timeStart = startDateTime.toISOString();
-            }
-
-            if (endDate?.date) {
-                const endDateTime = new Date(endDate.date);
-                if (endDate.time) {
-                    const [hours, minutes, seconds] = endDate.time
-                        .split(":")
-                        .map(Number);
-                    endDateTime.setHours(hours, minutes, seconds || 0);
-                } else {
-                    // If no time is specified, set to NOW
-                    const now = new Date();
-                    endDateTime.setHours(
-                        now.getHours(),
-                        now.getMinutes(),
-                        now.getSeconds(),
-                        now.getMilliseconds()
-                    );
-                }
-                params.timeEnd = endDateTime.toISOString();
-            }
-
-            const res = await api.get(`/org/${orgId}/logs/access`, { params });
-            if (res.status === 200) {
-                setRows(res.data.data.log || []);
-                setTotalCount(res.data.data.pagination?.total || 0);
-                setFilterAttributes(res.data.data.filterAttributes);
-                console.log("Fetched logs:", res.data);
-            }
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("Failed to filter logs"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const refreshData = async () => {
-        console.log("Data refreshed");
-        setIsRefreshing(true);
-        try {
-            const endDate = searchParams.get("end")
-                ? dateRange.endDate
-                : { date: new Date() };
-            setDateRange((current) => ({ ...current, endDate }));
-            // Refresh data with current date range and pagination
-            await queryDateTime(
-                dateRange.startDate,
-                endDate,
-                currentPage,
-                pageSize
-            );
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("refreshError"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsRefreshing(false);
-        }
-    };
-
     const exportData = async () => {
         try {
-            // Prepare query params for export
             const params: any = {
                 timeStart: dateRange.startDate?.date
                     ? new Date(dateRange.startDate.date).toISOString()
@@ -320,7 +200,6 @@ export default function GeneralPage() {
                 params
             });
 
-            // Create a URL for the blob and trigger a download
             const url = window.URL.createObjectURL(new Blob([response.data]));
             const link = document.createElement("a");
             link.href = url;
@@ -338,7 +217,6 @@ export default function GeneralPage() {
                 const data = error.response.data;
 
                 if (data instanceof Blob && data.type === "application/json") {
-                    // Parse the Blob as JSON
                     const text = await data.text();
                     const errorData = JSON.parse(text);
                     apiErrorMessage = errorData.message;
@@ -355,8 +233,8 @@ export default function GeneralPage() {
     const columns: ColumnDef<any>[] = [
         {
             accessorKey: "timestamp",
-            header: ({ column }) => {
-                return t("timestamp");
+            header: () => {
+                return <span className="px-2">{t("timestamp")}</span>;
             },
             cell: ({ row }) => {
                 return (
@@ -370,22 +248,21 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "action",
-            header: ({ column }) => {
+            header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("action")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={[
                                 { value: "true", label: "Allowed" },
                                 { value: "false", label: "Denied" }
                             ]}
+                            label={t("action")}
                             selectedValue={filters.action}
                             onValueChange={(value) =>
                                 handleFilterChange("action", value)
                             }
-                            // placeholder=""
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -400,30 +277,27 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "ip",
-            header: ({ column }) => {
-                return t("ip");
-            }
+            header: () => <span className="px-2">{t("ip")}</span>
         },
         {
             accessorKey: "location",
-            header: ({ column }) => {
+            header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("location")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.locations.map(
                                 (location) => ({
                                     value: location,
                                     label: location
                                 })
                             )}
+                            label={t("location")}
                             selectedValue={filters.location}
                             onValueChange={(value) =>
                                 handleFilterChange("location", value)
                             }
-                            // placeholder=""
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -446,22 +320,21 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "resourceName",
-            header: ({ column }) => {
+            header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("resource")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.resources.map((res) => ({
                                 value: res.id.toString(),
                                 label: res.name || "Unnamed Resource"
                             }))}
+                            label={t("resource")}
                             selectedValue={filters.resourceId}
                             onValueChange={(value) =>
                                 handleFilterChange("resourceId", value)
                             }
-                            // placeholder=""
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -470,9 +343,12 @@ export default function GeneralPage() {
                 return (
                     <Link
                         href={
-                            row.original.type === "ssh"
-                                ? `/${row.original.orgId}/settings/resources/client?query=${row.original.resourceNiceId}`
-                                : `/${row.original.orgId}/settings/resources/proxy/${row.original.resourceNiceId}`
+                            row.original.siteResourceId != null
+                                ? getPrivateResourceSettingsHref(
+                                      row.original.orgId,
+                                      row.original.resourceNiceId
+                                  )
+                                : `/${row.original.orgId}/settings/resources/public/${row.original.resourceNiceId}`
                         }
                     >
                         <Button variant="outline" size="sm">
@@ -485,11 +361,10 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "type",
-            header: ({ column }) => {
+            header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("type")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={[
                                 { value: "password", label: "Password" },
                                 { value: "pincode", label: "Pincode" },
@@ -498,23 +373,27 @@ export default function GeneralPage() {
                                     value: "whitelistedEmail",
                                     label: "Whitelisted Email"
                                 },
-                                { value: "ssh", label: "SSH" }
+                                { value: "ssh", label: "SSH" },
+                                { value: "rdp", label: "RDP" },
+                                { value: "vnc", label: "VNC" }
                             ]}
+                            label={t("type")}
                             selectedValue={filters.type}
                             onValueChange={(value) =>
                                 handleFilterChange("type", value)
                             }
-                            // placeholder=""
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
             },
             cell: ({ row }) => {
                 const typeLabel =
-                    row.original.type === "ssh"
-                        ? "SSH"
+                    row.original.type === "ssh" ||
+                    row.original.type === "rdp" ||
+                    row.original.type === "vnc"
+                        ? row.original.type.toUpperCase()
                         : row.original.type.charAt(0).toUpperCase() +
                           row.original.type.slice(1);
                 return <span>{typeLabel || "-"}</span>;
@@ -522,22 +401,21 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "actor",
-            header: ({ column }) => {
+            header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("actor")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.actors.map((actor) => ({
                                 value: actor,
                                 label: actor
                             }))}
+                            label={t("actor")}
                             selectedValue={filters.actor}
                             onValueChange={(value) =>
                                 handleFilterChange("actor", value)
                             }
-                            // placeholder=""
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -563,16 +441,12 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "actorId",
-            header: ({ column }) => {
-                return t("actorId");
-            },
-            cell: ({ row }) => {
-                return (
-                    <span className="flex items-center gap-1">
-                        {row.original.actorId || "-"}
-                    </span>
-                );
-            }
+            header: () => <span className="px-2">{t("actorId")}</span>,
+            cell: ({ row }) => (
+                <span className="flex items-center gap-1">
+                    {row.original.actorId || "-"}
+                </span>
+            )
         }
     ];
 
@@ -618,13 +492,10 @@ export default function GeneralPage() {
                 columns={columns}
                 data={rows}
                 title={t("accessLogs")}
-                onRefresh={refreshData}
-                isRefreshing={isRefreshing}
+                onRefresh={() => refetch()}
+                isRefreshing={isFetching}
                 onExport={() => startTransition(exportData)}
                 isExporting={isExporting}
-                // isExportDisabled={ // not disabling this because the user should be able to click the button and get the feedback about needing to upgrade the plan
-                //     !isPaidUser(tierMatrix.accessLogs) || build === "oss"
-                // }
                 onDateRangeChange={handleDateRangeChange}
                 dateRange={{
                     start: dateRange.startDate,
@@ -634,14 +505,12 @@ export default function GeneralPage() {
                     id: "timestamp",
                     desc: true
                 }}
-                // Server-side pagination props
                 totalCount={totalCount}
                 currentPage={currentPage}
                 pageSize={pageSize}
                 onPageChange={handlePageChange}
                 onPageSizeChange={handlePageSizeChange}
                 isLoading={isLoading}
-                // Row expansion props
                 expandable={true}
                 renderExpandedRow={renderExpandedRow}
                 disabled={!isPaidUser(tierMatrix.accessLogs) || build === "oss"}
@@ -649,3 +518,50 @@ export default function GeneralPage() {
         </>
     );
 }
+
+function generateSampleAccessLogs(): QueryAccessAuditLogResponse["log"] {
+    const locations = ["US", "DE", "GB", "FR", "JP", "CA", "AU"];
+    const types = [
+        "password",
+        "pincode",
+        "login",
+        "whitelistedEmail",
+        "ssh",
+        "rdp",
+        "vnc"
+    ];
+    const actors = [
+        "alice@example.com",
+        "bob@example.com",
+        "carol@example.com",
+        null
+    ];
+
+    const now = Math.floor(Date.now() / 1000);
+    const sevenDaysAgo = now - 7 * 24 * 60 * 60;
+
+    return Array.from({ length: 10 }, (_, i) => {
+        const action = Math.random() > 0.3;
+        const actor = actors[Math.floor(Math.random() * actors.length)];
+
+        return {
+            timestamp: Math.floor(
+                sevenDaysAgo + Math.random() * (now - sevenDaysAgo)
+            ),
+            action,
+            orgId: "sample-org",
+            actorType: actor ? "user" : null,
+            actor,
+            actorId: actor ? `user-${i}` : null,
+            resourceId: Math.floor(Math.random() * 5) + 1,
+            siteResourceId: null,
+            resourceNiceId: `resource-${(i % 3) + 1}`,
+            resourceName: `Resource ${(i % 3) + 1}`,
+            ip: `${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`,
+            location: locations[Math.floor(Math.random() * locations.length)],
+            userAgent: "Mozilla/5.0",
+            metadata: null,
+            type: types[Math.floor(Math.random() * types.length)]
+        };
+    });
+}

src/app/[orgId]/settings/logs/action/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { ColumnFilter } from "@app/components/ColumnFilter";
+import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
 import { DateTimeValue } from "@app/components/DateTimePicker";
 import { LogDataTable } from "@app/components/LogDataTable";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
@@ -10,14 +10,17 @@ import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient } from "@app/lib/api";
 import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
+import { logQueries } from "@app/lib/queries";
 import { build } from "@server/build";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import type { QueryActionAuditLogResponse } from "@server/routers/auditLogs/types";
+import { useQuery } from "@tanstack/react-query";
 import { ColumnDef } from "@tanstack/react-table";
 import axios from "axios";
 import { Key, User } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState, useTransition } from "react";
+import { useMemo, useState, useTransition } from "react";
 
 export default function GeneralPage() {
     const router = useRouter();
@@ -28,18 +31,8 @@ export default function GeneralPage() {
 
     const { isPaidUser } = usePaidStatus();
 
-    const [rows, setRows] = useState<any[]>([]);
-    const [isRefreshing, setIsRefreshing] = useState(false);
     const [isExporting, startTransition] = useTransition();
-    const [filterAttributes, setFilterAttributes] = useState<{
-        actors: string[];
-        actions: string[];
-    }>({
-        actors: [],
-        actions: []
-    });
 
-    // Filter states - unified object for all filters
     const [filters, setFilters] = useState<{
         action?: string;
         actor?: string;
@@ -48,40 +41,21 @@ export default function GeneralPage() {
         actor: searchParams.get("actor") || undefined
     });
 
-    // Pagination state
-    const [totalCount, setTotalCount] = useState<number>(0);
     const [currentPage, setCurrentPage] = useState<number>(0);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // Initialize page size from storage or default
     const [pageSize, setPageSize] = useStoredPageSize("action-audit-logs", 20);
 
-    // Set default date range to last 24 hours
     const getDefaultDateRange = () => {
-        // if the time is in the url params, use that instead
         const startParam = searchParams.get("start");
         const endParam = searchParams.get("end");
         if (startParam && endParam) {
             return {
-                startDate: {
-                    date: new Date(startParam)
-                },
-                endDate: {
-                    date: new Date(endParam)
-                }
+                startDate: { date: new Date(startParam) },
+                endDate: { date: new Date(endParam) }
             };
         }
-
-        const now = new Date();
-        const lastWeek = getSevenDaysAgo();
-
         return {
-            startDate: {
-                date: lastWeek
-            },
-            endDate: {
-                date: now
-            }
+            startDate: { date: getSevenDaysAgo() },
+            endDate: { date: new Date() }
         };
     };
 
@@ -90,78 +64,90 @@ export default function GeneralPage() {
         endDate: DateTimeValue;
     }>(getDefaultDateRange());
 
-    // Trigger search with default values on component mount
-    useEffect(() => {
-        if (build === "oss") {
-            return;
+    const queryFilters = useMemo(() => {
+        let timeStart: string | undefined;
+        let timeEnd: string | undefined;
+
+        if (dateRange.startDate?.date) {
+            const dt = new Date(dateRange.startDate.date);
+            if (dateRange.startDate.time) {
+                const [h, m, s] = dateRange.startDate.time
+                    .split(":")
+                    .map(Number);
+                dt.setHours(h, m, s || 0);
+            }
+            timeStart = dt.toISOString();
         }
-        const defaultRange = getDefaultDateRange();
-        queryDateTime(
-            defaultRange.startDate,
-            defaultRange.endDate,
-            0,
-            pageSize
-        );
-    }, [orgId]); // Re-run if orgId changes
+
+        if (dateRange.endDate?.date) {
+            const dt = new Date(dateRange.endDate.date);
+            if (dateRange.endDate.time) {
+                const [h, m, s] = dateRange.endDate.time.split(":").map(Number);
+                dt.setHours(h, m, s || 0);
+            } else {
+                const now = new Date();
+                dt.setHours(
+                    now.getHours(),
+                    now.getMinutes(),
+                    now.getSeconds(),
+                    now.getMilliseconds()
+                );
+            }
+            timeEnd = dt.toISOString();
+        }
+
+        return {
+            timeStart,
+            timeEnd,
+            page: currentPage,
+            pageSize,
+            ...filters
+        };
+    }, [dateRange, currentPage, pageSize, filters]);
+
+    const { data, isFetching, isLoading, refetch } = useQuery({
+        ...logQueries.action({
+            orgId: orgId as string,
+            filters: queryFilters
+        }),
+        enabled: isPaidUser(tierMatrix.actionLogs) && build !== "oss"
+    });
+
+    const rows = isLoading ? generateSampleActionLogs() : (data?.log ?? []);
+    const totalCount = data?.pagination?.total ?? 0;
+    const filterAttributes = {
+        actors: data?.filterAttributes?.actors ?? []
+    };
 
     const handleDateRangeChange = (
         startDate: DateTimeValue,
         endDate: DateTimeValue
     ) => {
         setDateRange({ startDate, endDate });
-        setCurrentPage(0); // Reset to first page when filtering
-        // put the search params in the url for the time
+        setCurrentPage(0);
         updateUrlParamsForAllFilters({
             start: startDate.date?.toISOString() || "",
             end: endDate.date?.toISOString() || ""
         });
-
-        queryDateTime(startDate, endDate, 0, pageSize);
     };
 
-    // Handle page changes
     const handlePageChange = (newPage: number) => {
         setCurrentPage(newPage);
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            newPage,
-            pageSize
-        );
     };
 
-    // Handle page size changes
     const handlePageSizeChange = (newPageSize: number) => {
         setPageSize(newPageSize);
-        setCurrentPage(0); // Reset to first page when changing page size
-        queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize);
+        setCurrentPage(0);
     };
 
-    // Handle filter changes generically
     const handleFilterChange = (
         filterType: keyof typeof filters,
         value: string | undefined
     ) => {
-        // Create new filters object with updated value
-        const newFilters = {
-            ...filters,
-            [filterType]: value
-        };
-
+        const newFilters = { ...filters, [filterType]: value };
         setFilters(newFilters);
-        setCurrentPage(0); // Reset to first page when filtering
-
-        // Update URL params
+        setCurrentPage(0);
         updateUrlParamsForAllFilters(newFilters);
-
-        // Trigger new query with updated filters (pass directly to avoid async state issues)
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            0,
-            pageSize,
-            newFilters
-        );
     };
 
     const updateUrlParamsForAllFilters = (
@@ -183,114 +169,8 @@ export default function GeneralPage() {
         router.replace(`?${params.toString()}`, { scroll: false });
     };
 
-    const queryDateTime = async (
-        startDate: DateTimeValue,
-        endDate: DateTimeValue,
-        page: number = currentPage,
-        size: number = pageSize,
-        filtersParam?: {
-            action?: string;
-            actor?: string;
-        }
-    ) => {
-        console.log("Date range changed:", { startDate, endDate, page, size });
-        if (!isPaidUser(tierMatrix.actionLogs)) {
-            console.log(
-                "Access denied: subscription inactive or license locked"
-            );
-            return;
-        }
-        setIsLoading(true);
-
-        try {
-            // Use the provided filters or fall back to current state
-            const activeFilters = filtersParam || filters;
-
-            // Convert the date/time values to API parameters
-            const params: any = {
-                limit: size,
-                offset: page * size,
-                ...activeFilters
-            };
-
-            if (startDate?.date) {
-                const startDateTime = new Date(startDate.date);
-                if (startDate.time) {
-                    const [hours, minutes, seconds] = startDate.time
-                        .split(":")
-                        .map(Number);
-                    startDateTime.setHours(hours, minutes, seconds || 0);
-                }
-                params.timeStart = startDateTime.toISOString();
-            }
-
-            if (endDate?.date) {
-                const endDateTime = new Date(endDate.date);
-                if (endDate.time) {
-                    const [hours, minutes, seconds] = endDate.time
-                        .split(":")
-                        .map(Number);
-                    endDateTime.setHours(hours, minutes, seconds || 0);
-                } else {
-                    // If no time is specified, set to NOW
-                    const now = new Date();
-                    endDateTime.setHours(
-                        now.getHours(),
-                        now.getMinutes(),
-                        now.getSeconds(),
-                        now.getMilliseconds()
-                    );
-                }
-                params.timeEnd = endDateTime.toISOString();
-            }
-
-            const res = await api.get(`/org/${orgId}/logs/action`, { params });
-            if (res.status === 200) {
-                setRows(res.data.data.log || []);
-                setTotalCount(res.data.data.pagination?.total || 0);
-                setFilterAttributes(res.data.data.filterAttributes);
-                console.log("Fetched logs:", res.data);
-            }
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("Failed to filter logs"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const refreshData = async () => {
-        console.log("Data refreshed");
-        setIsRefreshing(true);
-        try {
-            const endDate = searchParams.get("end")
-                ? dateRange.endDate
-                : { date: new Date() };
-            setDateRange((current) => ({ ...current, endDate }));
-            // Refresh data with current date range and pagination
-            await queryDateTime(
-                dateRange.startDate,
-                endDate,
-                currentPage,
-                pageSize
-            );
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("refreshError"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsRefreshing(false);
-        }
-    };
-
     const exportData = async () => {
         try {
-            // Prepare query params for export
             const params: any = {
                 timeStart: dateRange.startDate?.date
                     ? new Date(dateRange.startDate.date).toISOString()
@@ -306,7 +186,6 @@ export default function GeneralPage() {
                 params
             });
 
-            // Create a URL for the blob and trigger a download
             const url = window.URL.createObjectURL(new Blob([response.data]));
             const link = document.createElement("a");
             link.href = url;
@@ -324,7 +203,6 @@ export default function GeneralPage() {
                 const data = error.response.data;
 
                 if (data instanceof Blob && data.type === "application/json") {
-                    // Parse the Blob as JSON
                     const text = await data.text();
                     const errorData = JSON.parse(text);
                     apiErrorMessage = errorData.message;
@@ -341,9 +219,7 @@ export default function GeneralPage() {
     const columns: ColumnDef<any>[] = [
         {
             accessorKey: "timestamp",
-            header: ({ column }) => {
-                return t("timestamp");
-            },
+            header: () => <span className="px-2">{t("timestamp")}</span>,
             cell: ({ row }) => {
                 return (
                     <div className="whitespace-nowrap">
@@ -356,24 +232,18 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "action",
-            header: ({ column }) => {
+            header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("action")}</span>
-                        <ColumnFilter
-                            options={filterAttributes.actions.map((action) => ({
-                                label:
-                                    action.charAt(0).toUpperCase() +
-                                    action.slice(1),
-                                value: action
-                            }))}
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
+                            options={[]}
+                            label={t("action")}
                             selectedValue={filters.action}
                             onValueChange={(value) =>
                                 handleFilterChange("action", value)
                             }
-                            // placeholder=""
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -389,22 +259,21 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "actor",
-            header: ({ column }) => {
+            header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("actor")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.actors.map((actor) => ({
                                 value: actor,
                                 label: actor
                             }))}
+                            label={t("actor")}
                             selectedValue={filters.actor}
                             onValueChange={(value) =>
                                 handleFilterChange("actor", value)
                             }
-                            // placeholder=""
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -424,9 +293,7 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "actorId",
-            header: ({ column }) => {
-                return t("actorId");
-            },
+            header: () => <span className="px-2">{t("actorId")}</span>,
             cell: ({ row }) => {
                 return (
                     <span className="flex items-center gap-1">
@@ -473,12 +340,9 @@ export default function GeneralPage() {
                 title={t("actionLogs")}
                 searchPlaceholder={t("searchLogs")}
                 searchColumn="action"
-                onRefresh={refreshData}
-                isRefreshing={isRefreshing}
+                onRefresh={() => refetch()}
+                isRefreshing={isFetching}
                 onExport={() => startTransition(exportData)}
-                // isExportDisabled={ // not disabling this because the user should be able to click the button and get the feedback about needing to upgrade the plan
-                //     !isPaidUser(tierMatrix.logExport) || build === "oss"
-                // }
                 isExporting={isExporting}
                 onDateRangeChange={handleDateRangeChange}
                 dateRange={{
@@ -489,14 +353,12 @@ export default function GeneralPage() {
                     id: "timestamp",
                     desc: true
                 }}
-                // Server-side pagination props
                 totalCount={totalCount}
                 currentPage={currentPage}
                 pageSize={pageSize}
                 onPageChange={handlePageChange}
                 onPageSizeChange={handlePageSizeChange}
                 isLoading={isLoading}
-                // Row expansion props
                 expandable={true}
                 renderExpandedRow={renderExpandedRow}
                 disabled={!isPaidUser(tierMatrix.actionLogs) || build === "oss"}
@@ -504,3 +366,39 @@ export default function GeneralPage() {
         </>
     );
 }
+
+function generateSampleActionLogs(): QueryActionAuditLogResponse["log"] {
+    const actions = [
+        "createResource",
+        "deleteResource",
+        "updateResource",
+        "createSite",
+        "deleteSite",
+        "inviteUser",
+        "removeUser"
+    ];
+    const actors = [
+        "alice@example.com",
+        "bob@example.com",
+        "carol@example.com"
+    ];
+
+    const now = Math.floor(Date.now() / 1000);
+    const sevenDaysAgo = now - 7 * 24 * 60 * 60;
+
+    return Array.from({ length: 10 }, (_, i) => {
+        const actor = actors[Math.floor(Math.random() * actors.length)];
+
+        return {
+            timestamp: Math.floor(
+                sevenDaysAgo + Math.random() * (now - sevenDaysAgo)
+            ),
+            action: actions[Math.floor(Math.random() * actions.length)],
+            orgId: "sample-org",
+            actorType: "user",
+            actor,
+            actorId: `user-${i}`,
+            metadata: null
+        };
+    });
+}

src/app/[orgId]/settings/logs/connection/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { Button } from "@app/components/ui/button";
-import { ColumnFilter } from "@app/components/ColumnFilter";
+import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
 import { DateTimeValue } from "@app/components/DateTimePicker";
 import { LogDataTable } from "@app/components/LogDataTable";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
@@ -11,24 +11,19 @@ import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient } from "@app/lib/api";
 import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
+import { getPrivateResourceSettingsHref } from "@app/lib/launcherResourceAdminHref";
+import { logQueries } from "@app/lib/queries";
 import { build } from "@server/build";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import type { QueryConnectionAuditLogResponse } from "@server/routers/auditLogs/types";
+import { useQuery } from "@tanstack/react-query";
 import { ColumnDef } from "@tanstack/react-table";
 import axios from "axios";
 import { ArrowUpRight, Laptop, User } from "lucide-react";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState, useTransition } from "react";
-
-function formatBytes(bytes: number | null): string {
-    if (bytes === null || bytes === undefined) return "-";
-    if (bytes === 0) return "0 B";
-    const units = ["B", "KB", "MB", "GB", "TB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(1024));
-    const value = bytes / Math.pow(1024, i);
-    return `${value.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
-}
+import { useMemo, useState, useTransition } from "react";
 
 function formatDuration(startedAt: number, endedAt: number | null): string {
     if (endedAt === null || endedAt === undefined) return "Active";
@@ -54,24 +49,8 @@ export default function ConnectionLogsPage() {
 
     const { isPaidUser } = usePaidStatus();
 
-    const [rows, setRows] = useState<any[]>([]);
-    const [isRefreshing, setIsRefreshing] = useState(false);
     const [isExporting, startTransition] = useTransition();
-    const [filterAttributes, setFilterAttributes] = useState<{
-        protocols: string[];
-        destAddrs: string[];
-        clients: { id: number; name: string }[];
-        resources: { id: number; name: string | null }[];
-        users: { id: string; email: string | null }[];
-    }>({
-        protocols: [],
-        destAddrs: [],
-        clients: [],
-        resources: [],
-        users: []
-    });
 
-    // Filter states - unified object for all filters
     const [filters, setFilters] = useState<{
         protocol?: string;
         destAddr?: string;
@@ -86,43 +65,24 @@ export default function ConnectionLogsPage() {
         userId: searchParams.get("userId") || undefined
     });
 
-    // Pagination state
-    const [totalCount, setTotalCount] = useState<number>(0);
     const [currentPage, setCurrentPage] = useState<number>(0);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // Initialize page size from storage or default
     const [pageSize, setPageSize] = useStoredPageSize(
         "connection-audit-logs",
         20
     );
 
-    // Set default date range to last 7 days
     const getDefaultDateRange = () => {
-        // if the time is in the url params, use that instead
         const startParam = searchParams.get("start");
         const endParam = searchParams.get("end");
         if (startParam && endParam) {
             return {
-                startDate: {
-                    date: new Date(startParam)
-                },
-                endDate: {
-                    date: new Date(endParam)
-                }
+                startDate: { date: new Date(startParam) },
+                endDate: { date: new Date(endParam) }
             };
         }
-
-        const now = new Date();
-        const lastWeek = getSevenDaysAgo();
-
         return {
-            startDate: {
-                date: lastWeek
-            },
-            endDate: {
-                date: now
-            }
+            startDate: { date: getSevenDaysAgo() },
+            endDate: { date: new Date() }
         };
     };
 
@@ -131,78 +91,98 @@ export default function ConnectionLogsPage() {
         endDate: DateTimeValue;
     }>(getDefaultDateRange());
 
-    // Trigger search with default values on component mount
-    useEffect(() => {
-        if (build === "oss") {
-            return;
+    const queryFilters = useMemo(() => {
+        let timeStart: string | undefined;
+        let timeEnd: string | undefined;
+
+        if (dateRange.startDate?.date) {
+            const dt = new Date(dateRange.startDate.date);
+            if (dateRange.startDate.time) {
+                const [h, m, s] = dateRange.startDate.time
+                    .split(":")
+                    .map(Number);
+                dt.setHours(h, m, s || 0);
+            }
+            timeStart = dt.toISOString();
         }
-        const defaultRange = getDefaultDateRange();
-        queryDateTime(
-            defaultRange.startDate,
-            defaultRange.endDate,
-            0,
-            pageSize
-        );
-    }, [orgId]); // Re-run if orgId changes
+
+        if (dateRange.endDate?.date) {
+            const dt = new Date(dateRange.endDate.date);
+            if (dateRange.endDate.time) {
+                const [h, m, s] = dateRange.endDate.time.split(":").map(Number);
+                dt.setHours(h, m, s || 0);
+            } else {
+                const now = new Date();
+                dt.setHours(
+                    now.getHours(),
+                    now.getMinutes(),
+                    now.getSeconds(),
+                    now.getMilliseconds()
+                );
+            }
+            timeEnd = dt.toISOString();
+        }
+
+        return {
+            timeStart,
+            timeEnd,
+            page: currentPage,
+            pageSize,
+            ...filters,
+            clientId: filters.clientId ? Number(filters.clientId) : undefined,
+            siteResourceId: filters.siteResourceId
+                ? Number(filters.siteResourceId)
+                : undefined
+        };
+    }, [dateRange, currentPage, pageSize, filters]);
+
+    const { data, isFetching, isLoading, refetch } = useQuery({
+        ...logQueries.connection({
+            orgId: orgId as string,
+            filters: queryFilters
+        }),
+        enabled: isPaidUser(tierMatrix.connectionLogs) && build !== "oss"
+    });
+
+    const rows = isLoading ? generateSampleConnectionLogs() : (data?.log ?? []);
+    const totalCount = data?.pagination?.total ?? 0;
+    const filterAttributes = data?.filterAttributes ?? {
+        protocols: [],
+        destAddrs: [],
+        clients: [],
+        resources: [],
+        users: []
+    };
 
     const handleDateRangeChange = (
         startDate: DateTimeValue,
         endDate: DateTimeValue
     ) => {
         setDateRange({ startDate, endDate });
-        setCurrentPage(0); // Reset to first page when filtering
-        // put the search params in the url for the time
+        setCurrentPage(0);
         updateUrlParamsForAllFilters({
             start: startDate.date?.toISOString() || "",
             end: endDate.date?.toISOString() || ""
         });
-
-        queryDateTime(startDate, endDate, 0, pageSize);
     };
 
-    // Handle page changes
     const handlePageChange = (newPage: number) => {
         setCurrentPage(newPage);
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            newPage,
-            pageSize
-        );
     };
 
-    // Handle page size changes
     const handlePageSizeChange = (newPageSize: number) => {
         setPageSize(newPageSize);
-        setCurrentPage(0); // Reset to first page when changing page size
-        queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize);
+        setCurrentPage(0);
     };
 
-    // Handle filter changes generically
     const handleFilterChange = (
         filterType: keyof typeof filters,
         value: string | undefined
     ) => {
-        // Create new filters object with updated value
-        const newFilters = {
-            ...filters,
-            [filterType]: value
-        };
-
+        const newFilters = { ...filters, [filterType]: value };
         setFilters(newFilters);
-        setCurrentPage(0); // Reset to first page when filtering
-
-        // Update URL params
+        setCurrentPage(0);
         updateUrlParamsForAllFilters(newFilters);
-
-        // Trigger new query with updated filters (pass directly to avoid async state issues)
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            0,
-            pageSize,
-            newFilters
-        );
     };
 
     const updateUrlParamsForAllFilters = (
@@ -224,113 +204,8 @@ export default function ConnectionLogsPage() {
         router.replace(`?${params.toString()}`, { scroll: false });
     };
 
-    const queryDateTime = async (
-        startDate: DateTimeValue,
-        endDate: DateTimeValue,
-        page: number = currentPage,
-        size: number = pageSize,
-        filtersParam?: typeof filters
-    ) => {
-        console.log("Date range changed:", { startDate, endDate, page, size });
-        if (!isPaidUser(tierMatrix.connectionLogs)) {
-            console.log(
-                "Access denied: subscription inactive or license locked"
-            );
-            return;
-        }
-        setIsLoading(true);
-
-        try {
-            // Use the provided filters or fall back to current state
-            const activeFilters = filtersParam || filters;
-
-            // Convert the date/time values to API parameters
-            const params: any = {
-                limit: size,
-                offset: page * size,
-                ...activeFilters
-            };
-
-            if (startDate?.date) {
-                const startDateTime = new Date(startDate.date);
-                if (startDate.time) {
-                    const [hours, minutes, seconds] = startDate.time
-                        .split(":")
-                        .map(Number);
-                    startDateTime.setHours(hours, minutes, seconds || 0);
-                }
-                params.timeStart = startDateTime.toISOString();
-            }
-
-            if (endDate?.date) {
-                const endDateTime = new Date(endDate.date);
-                if (endDate.time) {
-                    const [hours, minutes, seconds] = endDate.time
-                        .split(":")
-                        .map(Number);
-                    endDateTime.setHours(hours, minutes, seconds || 0);
-                } else {
-                    // If no time is specified, set to NOW
-                    const now = new Date();
-                    endDateTime.setHours(
-                        now.getHours(),
-                        now.getMinutes(),
-                        now.getSeconds(),
-                        now.getMilliseconds()
-                    );
-                }
-                params.timeEnd = endDateTime.toISOString();
-            }
-
-            const res = await api.get(`/org/${orgId}/logs/connection`, {
-                params
-            });
-            if (res.status === 200) {
-                setRows(res.data.data.log || []);
-                setTotalCount(res.data.data.pagination?.total || 0);
-                setFilterAttributes(res.data.data.filterAttributes);
-                console.log("Fetched connection logs:", res.data);
-            }
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("Failed to filter logs"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const refreshData = async () => {
-        console.log("Data refreshed");
-        setIsRefreshing(true);
-        try {
-            const endDate = searchParams.get("end")
-                ? dateRange.endDate
-                : { date: new Date() };
-            setDateRange((current) => ({ ...current, endDate }));
-            // Refresh data with current date range and pagination
-            await queryDateTime(
-                dateRange.startDate,
-                endDate,
-                currentPage,
-                pageSize
-            );
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("refreshError"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsRefreshing(false);
-        }
-    };
-
     const exportData = async () => {
         try {
-            // Prepare query params for export
             const params: any = {
                 timeStart: dateRange.startDate?.date
                     ? new Date(dateRange.startDate.date).toISOString()
@@ -349,7 +224,6 @@ export default function ConnectionLogsPage() {
                 }
             );
 
-            // Create a URL for the blob and trigger a download
             const url = window.URL.createObjectURL(new Blob([response.data]));
             const link = document.createElement("a");
             link.href = url;
@@ -367,7 +241,6 @@ export default function ConnectionLogsPage() {
                 const data = error.response.data;
 
                 if (data instanceof Blob && data.type === "application/json") {
-                    // Parse the Blob as JSON
                     const text = await data.text();
                     const errorData = JSON.parse(text);
                     apiErrorMessage = errorData.message;
@@ -384,9 +257,7 @@ export default function ConnectionLogsPage() {
     const columns: ColumnDef<any>[] = [
         {
             accessorKey: "startedAt",
-            header: ({ column }) => {
-                return t("timestamp");
-            },
+            header: () => <span className="px-2">{t("timestamp")}</span>,
             cell: ({ row }) => {
                 return (
                     <div className="whitespace-nowrap">
@@ -399,23 +270,23 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "protocol",
-            header: ({ column }) => {
+            header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("protocol")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.protocols.map(
                                 (protocol) => ({
                                     label: protocol.toUpperCase(),
                                     value: protocol
                                 })
                             )}
+                            label={t("protocol")}
                             selectedValue={filters.protocol}
                             onValueChange={(value) =>
                                 handleFilterChange("protocol", value)
                             }
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -430,21 +301,21 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "resourceName",
-            header: ({ column }) => {
+            header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("resource")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.resources.map((res) => ({
                                 value: res.id.toString(),
                                 label: res.name || "Unnamed Resource"
                             }))}
+                            label={t("resource")}
                             selectedValue={filters.siteResourceId}
                             onValueChange={(value) =>
                                 handleFilterChange("siteResourceId", value)
                             }
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -453,7 +324,10 @@ export default function ConnectionLogsPage() {
                 if (row.original.resourceName && row.original.resourceNiceId) {
                     return (
                         <Link
-                            href={`/${row.original.orgId}/settings/resources/client/?query=${row.original.resourceNiceId}`}
+                            href={getPrivateResourceSettingsHref(
+                                row.original.orgId,
+                                row.original.resourceNiceId
+                            )}
                         >
                             <Button variant="outline" size="sm">
                                 {row.original.resourceName}
@@ -471,21 +345,21 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "clientName",
-            header: ({ column }) => {
+            header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("client")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.clients.map((c) => ({
                                 value: c.id.toString(),
                                 label: c.name
                             }))}
+                            label={t("client")}
                             selectedValue={filters.clientId}
                             onValueChange={(value) =>
                                 handleFilterChange("clientId", value)
                             }
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -514,21 +388,21 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "userEmail",
-            header: ({ column }) => {
+            header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("user")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.users.map((u) => ({
                                 value: u.id,
                                 label: u.email || u.id
                             }))}
+                            label={t("user")}
                             selectedValue={filters.userId}
                             onValueChange={(value) =>
                                 handleFilterChange("userId", value)
                             }
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -547,9 +421,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "sourceAddr",
-            header: ({ column }) => {
-                return t("sourceAddress");
-            },
+            header: () => <span className="px-2">{t("sourceAddress")}</span>,
             cell: ({ row }) => {
                 return (
                     <span className="whitespace-nowrap font-mono text-xs">
@@ -560,21 +432,21 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "destAddr",
-            header: ({ column }) => {
+            header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("destinationAddress")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.destAddrs.map((addr) => ({
                                 value: addr,
                                 label: addr
                             }))}
+                            label={t("destinationAddress")}
                             selectedValue={filters.destAddr}
                             onValueChange={(value) =>
                                 handleFilterChange("destAddr", value)
                             }
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -589,9 +461,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "duration",
-            header: ({ column }) => {
-                return t("duration");
-            },
+            header: () => <span className="px-2">{t("duration")}</span>,
             cell: ({ row }) => {
                 return (
                     <span className="whitespace-nowrap">
@@ -610,9 +480,6 @@ export default function ConnectionLogsPage() {
             <div className="space-y-4">
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
                     <div className="space-y-2">
-                        {/*<div className="flex items-center gap-1 font-semibold text-sm mb-1">
-                            Connection Details
-                        </div>*/}
                         <div>
                             <strong>Session ID:</strong>{" "}
                             <span className="font-mono">
@@ -637,18 +504,6 @@ export default function ConnectionLogsPage() {
                         </div>
                     </div>
                     <div className="space-y-2">
-                        {/*<div className="flex items-center gap-1 font-semibold text-sm mb-1">
-                            Resource & Site
-                        </div>*/}
-                        {/*<div>
-                            <strong>Resource:</strong>{" "}
-                            {row.resourceName ?? "-"}
-                            {row.resourceNiceId && (
-                                <span className="text-muted-foreground ml-1">
-                                    ({row.resourceNiceId})
-                                </span>
-                            )}
-                        </div>*/}
                         <div>
                             <strong>Client Endpoint:</strong>{" "}
                             <span className="font-mono">
@@ -684,30 +539,8 @@ export default function ConnectionLogsPage() {
                             <strong>Duration:</strong>{" "}
                             {formatDuration(row.startedAt, row.endedAt)}
                         </div>
-                        {/*<div>
-                            <strong>Resource ID:</strong>{" "}
-                            {row.siteResourceId ?? "-"}
-                        </div>*/}
-                    </div>
-                    <div className="space-y-2">
-                        {/*<div className="flex items-center gap-1 font-semibold text-sm mb-1">
-                            Client & Transfer
-                        </div>*/}
-                        {/*<div>
-                            <strong>Bytes Sent (TX):</strong>{" "}
-                            {formatBytes(row.bytesTx)}
-                        </div>*/}
-                        {/*<div>
-                            <strong>Bytes Received (RX):</strong>{" "}
-                            {formatBytes(row.bytesRx)}
-                        </div>*/}
-                        {/*<div>
-                            <strong>Total Transfer:</strong>{" "}
-                            {formatBytes(
-                                (row.bytesTx ?? 0) + (row.bytesRx ?? 0)
-                            )}
-                        </div>*/}
                     </div>
+                    <div className="space-y-2" />
                 </div>
             </div>
         );
@@ -728,8 +561,8 @@ export default function ConnectionLogsPage() {
                 title={t("connectionLogs")}
                 searchPlaceholder={t("searchLogs")}
                 searchColumn="protocol"
-                onRefresh={refreshData}
-                isRefreshing={isRefreshing}
+                onRefresh={() => refetch()}
+                isRefreshing={isFetching}
                 onExport={() => startTransition(exportData)}
                 isExporting={isExporting}
                 onDateRangeChange={handleDateRangeChange}
@@ -741,14 +574,12 @@ export default function ConnectionLogsPage() {
                     id: "startedAt",
                     desc: true
                 }}
-                // Server-side pagination props
                 totalCount={totalCount}
                 currentPage={currentPage}
                 pageSize={pageSize}
                 onPageChange={handlePageChange}
                 onPageSizeChange={handlePageSizeChange}
                 isLoading={isLoading}
-                // Row expansion props
                 expandable={true}
                 renderExpandedRow={renderExpandedRow}
                 disabled={
@@ -758,3 +589,50 @@ export default function ConnectionLogsPage() {
         </>
     );
 }
+
+function generateSampleConnectionLogs(): QueryConnectionAuditLogResponse["log"] {
+    const protocols = ["tcp", "udp", "icmp"];
+    const destAddrs = [
+        "10.0.0.1:22",
+        "10.0.0.2:80",
+        "10.0.0.3:443",
+        "192.168.1.10:3306"
+    ];
+
+    const now = Math.floor(Date.now() / 1000);
+    const sevenDaysAgo = now - 7 * 24 * 60 * 60;
+
+    return Array.from({ length: 10 }, (_, i) => {
+        const startedAt = Math.floor(
+            sevenDaysAgo + Math.random() * (now - sevenDaysAgo)
+        );
+        const active = Math.random() > 0.3;
+
+        return {
+            sessionId: `session-${i}`,
+            siteResourceId: (i % 3) + 1,
+            orgId: "sample-org",
+            siteId: 1,
+            clientId: (i % 4) + 1,
+            clientEndpoint: `10.0.0.${i + 1}:51820`,
+            userId: i % 2 === 0 ? `user-${i}` : null,
+            sourceAddr: `192.168.1.${i + 1}:${40000 + i}`,
+            destAddr: destAddrs[Math.floor(Math.random() * destAddrs.length)],
+            protocol: protocols[Math.floor(Math.random() * protocols.length)],
+            startedAt,
+            endedAt: active
+                ? null
+                : startedAt + Math.floor(Math.random() * 3600),
+            bytesTx: active ? null : Math.floor(Math.random() * 1024 * 1024),
+            bytesRx: active ? null : Math.floor(Math.random() * 1024 * 1024),
+            resourceName: `Resource ${(i % 3) + 1}`,
+            resourceNiceId: `resource-${(i % 3) + 1}`,
+            siteName: "Sample Site",
+            siteNiceId: "sample-site",
+            clientName: `Client ${(i % 4) + 1}`,
+            clientNiceId: `client-${(i % 4) + 1}`,
+            clientType: i % 2 === 0 ? "user" : "machine",
+            userEmail: i % 2 === 0 ? `user${i}@example.com` : null
+        };
+    });
+}

src/app/[orgId]/settings/logs/request/page.tsx

@@ -9,14 +9,18 @@ import { toast } from "@app/hooks/useToast";
 import { createApiClient } from "@app/lib/api";
 import { useTranslations } from "next-intl";
 import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
+import { getPrivateResourceSettingsHref } from "@app/lib/launcherResourceAdminHref";
+import { logQueries } from "@app/lib/queries";
 import { ColumnDef } from "@tanstack/react-table";
+import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { ArrowUpRight, Key, Lock, Unlock, User } from "lucide-react";
 import Link from "next/link";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState, useTransition } from "react";
+import { useMemo, useState, useTransition } from "react";
 import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
-import { build } from "@server/build";
+import type { QueryRequestAuditLogResponse } from "@server/routers/auditLogs/types";
+import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
 
 export default function GeneralPage() {
     const router = useRouter();
@@ -25,36 +29,11 @@ export default function GeneralPage() {
     const { orgId } = useParams();
     const searchParams = useSearchParams();
 
-    const [rows, setRows] = useState<any[]>([]);
-    const [isRefreshing, setIsRefreshing] = useState(false);
     const [isExporting, startTransition] = useTransition();
 
-    // Pagination state
-    const [totalCount, setTotalCount] = useState<number>(0);
     const [currentPage, setCurrentPage] = useState<number>(0);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // Initialize page size from storage or default
     const [pageSize, setPageSize] = useStoredPageSize("request-audit-logs", 20);
 
-    const [filterAttributes, setFilterAttributes] = useState<{
-        actors: string[];
-        resources: {
-            id: number;
-            name: string | null;
-        }[];
-        locations: string[];
-        hosts: string[];
-        paths: string[];
-    }>({
-        actors: [],
-        resources: [],
-        locations: [],
-        hosts: [],
-        paths: []
-    });
-
-    // Filter states - unified object for all filters
     const [filters, setFilters] = useState<{
         action?: string;
         resourceId?: string;
@@ -75,32 +54,18 @@ export default function GeneralPage() {
         path: searchParams.get("path") || undefined
     });
 
-    // Set default date range to last 24 hours
     const getDefaultDateRange = () => {
-        // if the time is in the url params, use that instead
         const startParam = searchParams.get("start");
         const endParam = searchParams.get("end");
         if (startParam && endParam) {
             return {
-                startDate: {
-                    date: new Date(startParam)
-                },
-                endDate: {
-                    date: new Date(endParam)
-                }
+                startDate: { date: new Date(startParam) },
+                endDate: { date: new Date(endParam) }
             };
         }
-
-        const now = new Date();
-        const lastWeek = getSevenDaysAgo();
-
         return {
-            startDate: {
-                date: lastWeek
-            },
-            endDate: {
-                date: now
-            }
+            startDate: { date: getSevenDaysAgo() },
+            endDate: { date: new Date() }
         };
     };
 
@@ -109,80 +74,96 @@ export default function GeneralPage() {
         endDate: DateTimeValue;
     }>(getDefaultDateRange());
 
-    // Trigger search with default values on component mount
-    useEffect(() => {
-        if (build === "oss") {
-            return;
+    const queryFilters = useMemo(() => {
+        let timeStart: string | undefined;
+        let timeEnd: string | undefined;
+
+        if (dateRange.startDate?.date) {
+            const dt = new Date(dateRange.startDate.date);
+            if (dateRange.startDate.time) {
+                const [h, m, s] = dateRange.startDate.time
+                    .split(":")
+                    .map(Number);
+                dt.setHours(h, m, s || 0);
+            }
+            timeStart = dt.toISOString();
         }
-        const defaultRange = getDefaultDateRange();
-        queryDateTime(
-            defaultRange.startDate,
-            defaultRange.endDate,
-            0,
-            pageSize
-        );
-    }, [orgId]); // Re-run if orgId changes
+
+        if (dateRange.endDate?.date) {
+            const dt = new Date(dateRange.endDate.date);
+            if (dateRange.endDate.time) {
+                const [h, m, s] = dateRange.endDate.time.split(":").map(Number);
+                dt.setHours(h, m, s || 0);
+            } else {
+                const now = new Date();
+                dt.setHours(
+                    now.getHours(),
+                    now.getMinutes(),
+                    now.getSeconds(),
+                    now.getMilliseconds()
+                );
+            }
+            timeEnd = dt.toISOString();
+        }
+
+        return {
+            timeStart,
+            timeEnd,
+            page: currentPage,
+            pageSize,
+            ...filters,
+            resourceId: filters.resourceId
+                ? Number(filters.resourceId)
+                : undefined
+        };
+    }, [dateRange, currentPage, pageSize, filters]);
+
+    const { data, isFetching, isLoading, refetch } = useQuery({
+        ...logQueries.requests({
+            orgId: orgId as string,
+            filters: queryFilters
+        })
+    });
+
+    const rows = isLoading ? generateSampleRequestLogs() : (data?.log ?? []);
+    const totalCount = data?.pagination?.total ?? 0;
+    const filterAttributes = data?.filterAttributes ?? {
+        actors: [],
+        resources: [],
+        locations: [],
+        hosts: [],
+        paths: []
+    };
 
     const handleDateRangeChange = (
         startDate: DateTimeValue,
         endDate: DateTimeValue
     ) => {
         setDateRange({ startDate, endDate });
-        setCurrentPage(0); // Reset to first page when filtering
-        // put the search params in the url for the time
+        setCurrentPage(0);
         updateUrlParamsForAllFilters({
             start: startDate.date?.toISOString() || "",
             end: endDate.date?.toISOString() || ""
         });
-
-        queryDateTime(startDate, endDate, 0, pageSize);
     };
 
-    // Handle page changes
     const handlePageChange = (newPage: number) => {
         setCurrentPage(newPage);
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            newPage,
-            pageSize
-        );
     };
 
-    // Handle page size changes
     const handlePageSizeChange = (newPageSize: number) => {
         setPageSize(newPageSize);
-        setCurrentPage(0); // Reset to first page when changing page size
-        queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize);
+        setCurrentPage(0);
     };
 
-    // Handle filter changes generically
     const handleFilterChange = (
         filterType: keyof typeof filters,
         value: string | undefined
     ) => {
-        console.log(`${filterType} filter changed:`, value);
-
-        // Create new filters object with updated value
-        const newFilters = {
-            ...filters,
-            [filterType]: value
-        };
-
+        const newFilters = { ...filters, [filterType]: value };
         setFilters(newFilters);
-        setCurrentPage(0); // Reset to first page when filtering
-
-        // Update URL params
+        setCurrentPage(0);
         updateUrlParamsForAllFilters(newFilters);
-
-        // Trigger new query with updated filters (pass directly to avoid async state issues)
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            0,
-            pageSize,
-            newFilters
-        );
     };
 
     const updateUrlParamsForAllFilters = (
@@ -204,105 +185,6 @@ export default function GeneralPage() {
         router.replace(`?${params.toString()}`, { scroll: false });
     };
 
-    const queryDateTime = async (
-        startDate: DateTimeValue,
-        endDate: DateTimeValue,
-        page: number = currentPage,
-        size: number = pageSize,
-        filtersParam?: {
-            action?: string;
-            type?: string;
-        }
-    ) => {
-        console.log("Date range changed:", { startDate, endDate, page, size });
-        setIsLoading(true);
-
-        try {
-            // Use the provided filters or fall back to current state
-            const activeFilters = filtersParam || filters;
-
-            // Convert the date/time values to API parameters
-            const params: any = {
-                limit: size,
-                offset: page * size,
-                ...activeFilters
-            };
-
-            if (startDate?.date) {
-                const startDateTime = new Date(startDate.date);
-                if (startDate.time) {
-                    const [hours, minutes, seconds] = startDate.time
-                        .split(":")
-                        .map(Number);
-                    startDateTime.setHours(hours, minutes, seconds || 0);
-                }
-                params.timeStart = startDateTime.toISOString();
-            }
-
-            if (endDate?.date) {
-                const endDateTime = new Date(endDate.date);
-                if (endDate.time) {
-                    const [hours, minutes, seconds] = endDate.time
-                        .split(":")
-                        .map(Number);
-                    endDateTime.setHours(hours, minutes, seconds || 0);
-                } else {
-                    // If no time is specified, set to NOW
-                    const now = new Date();
-                    endDateTime.setHours(
-                        now.getHours(),
-                        now.getMinutes(),
-                        now.getSeconds(),
-                        now.getMilliseconds()
-                    );
-                }
-                params.timeEnd = endDateTime.toISOString();
-            }
-
-            const res = await api.get(`/org/${orgId}/logs/request`, { params });
-            if (res.status === 200) {
-                setRows(res.data.data.log || []);
-                setTotalCount(res.data.data.pagination?.total || 0);
-                setFilterAttributes(res.data.data.filterAttributes);
-                console.log("Fetched logs:", res.data);
-            }
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("Failed to filter logs"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const refreshData = async () => {
-        console.log("Data refreshed");
-        setIsRefreshing(true);
-        try {
-            const endDate = searchParams.get("end")
-                ? dateRange.endDate
-                : { date: new Date() };
-            setDateRange((current) => ({ ...current, endDate }));
-            // Refresh data with current date range and pagination
-            await queryDateTime(
-                dateRange.startDate,
-                endDate,
-                currentPage,
-                pageSize
-            );
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("refreshError"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsRefreshing(false);
-        }
-    };
-
     const exportData = async () => {
         try {
             // Prepare query params for export
@@ -402,9 +284,9 @@ export default function GeneralPage() {
     const columns: ColumnDef<any>[] = [
         {
             accessorKey: "timestamp",
-            header: ({ column }) => {
-                return t("timestamp");
-            },
+            header: ({ column }) => (
+                <span className="px-2">{t("timestamp")}</span>
+            ),
             cell: ({ row }) => {
                 return (
                     <div className="whitespace-nowrap">
@@ -417,22 +299,21 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "action",
-            header: ({ column }) => {
+            header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("action")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={[
                                 { value: "true", label: "Allowed" },
                                 { value: "false", label: "Denied" }
                             ]}
+                            label={t("action")}
                             selectedValue={filters.action}
                             onValueChange={(value) =>
                                 handleFilterChange("action", value)
                             }
-                            // placeholder=""
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -447,17 +328,14 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "ip",
-            header: ({ column }) => {
-                return t("ip");
-            }
+            header: ({ column }) => <span className="px-2">{t("ip")}</span>
         },
         {
             accessorKey: "location",
             header: ({ column }) => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("location")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.locations.map(
                                 (location) => ({
                                     value: location,
@@ -469,8 +347,9 @@ export default function GeneralPage() {
                                 handleFilterChange("location", value)
                             }
                             // placeholder=""
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            label={t("location")}
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -495,9 +374,8 @@ export default function GeneralPage() {
             accessorKey: "resourceName",
             header: ({ column }) => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("resource")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.resources.map((res) => ({
                                 value: res.id.toString(),
                                 label: res.name || "Unnamed Resource"
@@ -506,9 +384,9 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("resourceId", value)
                             }
-                            // placeholder=""
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            label={t("resource")}
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -518,8 +396,11 @@ export default function GeneralPage() {
                     <Link
                         href={
                             row.original.reason == 108 // for now the client will only have reason 108 so we know where to go
-                                ? `/${row.original.orgId}/settings/resources/client?query=${row.original.resourceNiceId}`
-                                : `/${row.original.orgId}/settings/resources/proxy/${row.original.resourceNiceId}`
+                                ? getPrivateResourceSettingsHref(
+                                      row.original.orgId,
+                                      row.original.resourceNiceId
+                                  )
+                                : `/${row.original.orgId}/settings/resources/public/${row.original.resourceNiceId}`
                         }
                         onClick={(e) => e.stopPropagation()}
                     >
@@ -535,9 +416,8 @@ export default function GeneralPage() {
             accessorKey: "host",
             header: ({ column }) => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("host")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.hosts.map((host) => ({
                                 value: host,
                                 label: host
@@ -546,9 +426,9 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("host", value)
                             }
-                            // placeholder=""
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            label={t("host")}
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -570,9 +450,8 @@ export default function GeneralPage() {
             accessorKey: "path",
             header: ({ column }) => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("path")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.paths.map((path) => ({
                                 value: path,
                                 label: path
@@ -581,9 +460,9 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("path", value)
                             }
-                            // placeholder=""
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            label={t("path")}
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -600,9 +479,8 @@ export default function GeneralPage() {
             accessorKey: "method",
             header: ({ column }) => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("method")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={[
                                 { value: "GET", label: "GET" },
                                 { value: "POST", label: "POST" },
@@ -616,9 +494,9 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("method", value)
                             }
-                            // placeholder=""
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            label={t("method")}
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -628,9 +506,8 @@ export default function GeneralPage() {
             accessorKey: "reason",
             header: ({ column }) => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("reason")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={[
                                 { value: "100", label: t("allowedByRule") },
                                 { value: "101", label: t("allowedNoAuth") },
@@ -655,9 +532,9 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("reason", value)
                             }
-                            // placeholder=""
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            label={t("reason")}
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -674,9 +551,8 @@ export default function GeneralPage() {
             accessorKey: "actor",
             header: ({ column }) => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("actor")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.actors.map((actor) => ({
                                 value: actor,
                                 label: actor
@@ -685,9 +561,9 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("actor", value)
                             }
-                            // placeholder=""
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            label={t("actor")}
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -785,8 +661,8 @@ export default function GeneralPage() {
                 title={t("requestLogs")}
                 searchPlaceholder={t("searchLogs")}
                 searchColumn="host"
-                onRefresh={refreshData}
-                isRefreshing={isRefreshing}
+                onRefresh={() => refetch()}
+                isRefreshing={isFetching}
                 onExport={() => startTransition(exportData)}
                 isExporting={isExporting}
                 onDateRangeChange={handleDateRangeChange}
@@ -798,7 +674,6 @@ export default function GeneralPage() {
                     id: "timestamp",
                     desc: true
                 }}
-                // Server-side pagination props
                 totalCount={totalCount}
                 currentPage={currentPage}
                 onPageChange={handlePageChange}
@@ -812,3 +687,63 @@ export default function GeneralPage() {
         </>
     );
 }
+
+function generateSampleRequestLogs(): QueryRequestAuditLogResponse["log"] {
+    const methods = ["GET", "POST", "PUT", "DELETE", "PATCH"];
+    const paths = [
+        "/api/v1/users",
+        "/dashboard",
+        "/settings",
+        "/health",
+        "/metrics"
+    ];
+    const hosts = ["app.example.com", "api.example.com", "admin.example.com"];
+    const locations = ["US", "DE", "GB", "FR", "JP", "CA", "AU"];
+    const allowedReasons = [100, 101, 102, 103, 104, 105, 106, 107, 108];
+    const deniedReasons = [201, 202, 203, 204, 205, 299];
+    const actors = [
+        "alice@example.com",
+        "bob@example.com",
+        "carol@example.com",
+        null
+    ];
+
+    const now = Math.floor(Date.now() / 1000);
+    const sevenDaysAgo = now - 7 * 24 * 60 * 60;
+
+    return Array.from({ length: 10 }, (_, i) => {
+        const action = Math.random() > 0.3;
+        const reason = action
+            ? allowedReasons[Math.floor(Math.random() * allowedReasons.length)]
+            : deniedReasons[Math.floor(Math.random() * deniedReasons.length)];
+        const actor = actors[Math.floor(Math.random() * actors.length)];
+
+        return {
+            timestamp: Math.floor(
+                sevenDaysAgo + Math.random() * (now - sevenDaysAgo)
+            ),
+            action,
+            reason,
+            orgId: "sample-org",
+            actorType: actor ? "user" : null,
+            actor,
+            actorId: actor ? `user-${i}` : null,
+            resourceId: Math.floor(Math.random() * 5) + 1,
+            siteResourceId: null,
+            resourceNiceId: `resource-${(i % 3) + 1}`,
+            resourceName: `Resource ${(i % 3) + 1}`,
+            ip: `${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`,
+            location: locations[Math.floor(Math.random() * locations.length)],
+            userAgent: "Mozilla/5.0",
+            metadata: null,
+            headers: null,
+            query: null,
+            originalRequestURL: null,
+            scheme: "https",
+            host: hosts[Math.floor(Math.random() * hosts.length)],
+            path: paths[Math.floor(Math.random() * paths.length)],
+            method: methods[Math.floor(Math.random() * methods.length)],
+            tls: true
+        };
+    });
+}

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

@@ -11,5 +11,5 @@ export interface ResourcesPageProps {
 
 export default async function ResourcesPage(props: ResourcesPageProps) {
     const params = await props.params;
-    redirect(`/${params.orgId}/settings/resources/proxy`);
+    redirect(`/${params.orgId}/settings/resources/public`);
 }

src/app/[orgId]/settings/resources/private/PrivateResourceAccessFields.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { MachinesSelector } from "@app/components/machines-selector";
+import { RolesSelector } from "@app/components/roles-selector";
+import { UsersSelector } from "@app/components/users-selector";
+import { SettingsFormCell, SettingsFormGrid } from "@app/components/Settings";
+import type { Tag } from "@app/components/tags/tag-input";
+import {
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import type { PrivateResourceClient } from "@app/lib/privateResourceForm";
+import { useTranslations } from "next-intl";
+import type { Control } from "react-hook-form";
+
+type AccessFormValues = {
+    roles?: Tag[];
+    users?: Tag[];
+    clients?: PrivateResourceClient[];
+};
+
+type PrivateResourceAccessFieldsProps = {
+    control: Control<AccessFormValues>;
+    orgId: string;
+    loading?: boolean;
+    hasMachineClients?: boolean;
+};
+
+export function PrivateResourceAccessFields({
+    control,
+    orgId,
+    loading = false,
+    hasMachineClients = false
+}: PrivateResourceAccessFieldsProps) {
+    const t = useTranslations();
+
+    if (loading) {
+        return (
+            <div className="text-sm text-muted-foreground">{t("loading")}</div>
+        );
+    }
+
+    return (
+        <SettingsFormGrid>
+            <SettingsFormCell span="full">
+                <FormField
+                    control={control}
+                    name="roles"
+                    render={({ field }) => (
+                        <FormItem className="flex flex-col items-start">
+                            <FormLabel>{t("roles")}</FormLabel>
+                            <FormControl>
+                                <RolesSelector
+                                    selectedRoles={field.value ?? []}
+                                    orgId={orgId}
+                                    restrictAdminRole
+                                    onSelectRoles={(newRoles) => {
+                                        field.onChange(newRoles);
+                                    }}
+                                />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+            </SettingsFormCell>
+            <SettingsFormCell span="full">
+                <FormField
+                    control={control}
+                    name="users"
+                    render={({ field }) => (
+                        <FormItem className="flex flex-col items-start">
+                            <FormLabel>{t("users")}</FormLabel>
+                            <UsersSelector
+                                selectedUsers={field.value ?? []}
+                                orgId={orgId}
+                                onSelectUsers={(newUsers) => {
+                                    field.onChange(newUsers);
+                                }}
+                            />
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+            </SettingsFormCell>
+            {hasMachineClients && (
+                <SettingsFormCell span="full">
+                    <FormField
+                        control={control}
+                        name="clients"
+                        render={({ field }) => (
+                            <FormItem className="flex flex-col items-start">
+                                <FormLabel>{t("machineClients")}</FormLabel>
+                                <MachinesSelector
+                                    selectedMachines={field.value ?? []}
+                                    orgId={orgId}
+                                    onSelectMachines={(machines) => {
+                                        field.onChange(machines);
+                                    }}
+                                />
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                </SettingsFormCell>
+            )}
+        </SettingsFormGrid>
+    );
+}

src/app/[orgId]/settings/resources/private/PrivateResourceDestinationFields.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { SettingsFormCell, SettingsFormGrid } from "@app/components/Settings";
+import {
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { Input } from "@app/components/ui/input";
+import { useTranslations } from "next-intl";
+import type { Control, UseFormWatch } from "react-hook-form";
+
+type PrivateResourceAliasFieldProps = {
+    control: Control<any>;
+    watch: UseFormWatch<any>;
+    labelPrefix?: "create" | "edit";
+    disabled?: boolean;
+};
+
+export function PrivateResourceAliasField({
+    control,
+    watch,
+    labelPrefix = "edit",
+    disabled = false
+}: PrivateResourceAliasFieldProps) {
+    const t = useTranslations();
+    const aliasLabelKey =
+        labelPrefix === "create"
+            ? "createInternalResourceDialogAlias"
+            : "editInternalResourceDialogAlias";
+    const aliasDescriptionKey =
+        labelPrefix === "create"
+            ? "createInternalResourceDialogAliasDescription"
+            : "editInternalResourceDialogAliasDescription";
+
+    const aliasValue = watch("alias");
+    const aliasEndsWithLocal =
+        typeof aliasValue === "string" &&
+        aliasValue.trim().toLowerCase().endsWith(".local");
+
+    return (
+        <FormField
+            control={control}
+            name="alias"
+            render={({ field }) => (
+                <FormItem>
+                    <FormLabel>{t(aliasLabelKey)}</FormLabel>
+                    <FormControl>
+                        <Input
+                            {...field}
+                            className="w-full"
+                            value={field.value ?? ""}
+                            disabled={disabled}
+                        />
+                    </FormControl>
+                    {aliasEndsWithLocal && (
+                        <p className="text-xs text-amber-700/80 mt-1">
+                            {t("internalResourceAliasLocalWarning")}
+                        </p>
+                    )}
+                    <FormMessage />
+                    <FormDescription>{t(aliasDescriptionKey)}</FormDescription>
+                </FormItem>
+            )}
+        />
+    );
+}
+
+type PrivateResourceHostDestinationFieldsProps = {
+    control: Control<any>;
+    watch: UseFormWatch<any>;
+    labelPrefix?: "create" | "edit";
+    hideAlias?: boolean;
+};
+
+export function PrivateResourceHostDestinationFields({
+    control,
+    watch,
+    labelPrefix = "edit",
+    hideAlias = false
+}: PrivateResourceHostDestinationFieldsProps) {
+    const t = useTranslations();
+    const destinationLabelKey =
+        labelPrefix === "create"
+            ? "createInternalResourceDialogDestination"
+            : "editInternalResourceDialogDestination";
+
+    const destinationField = (
+        <FormField
+            control={control}
+            name="destination"
+            render={({ field }) => (
+                <FormItem>
+                    <FormLabel>{t(destinationLabelKey)}</FormLabel>
+                    <FormControl>
+                        <Input
+                            {...field}
+                            className="w-full"
+                            value={field.value ?? ""}
+                            onChange={(e) =>
+                                field.onChange(
+                                    e.target.value === ""
+                                        ? null
+                                        : e.target.value
+                                )
+                            }
+                        />
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            )}
+        />
+    );
+
+    if (hideAlias) {
+        return destinationField;
+    }
+
+    return (
+        <SettingsFormGrid>
+            <SettingsFormCell span="half">{destinationField}</SettingsFormCell>
+            <SettingsFormCell span="half">
+                <PrivateResourceAliasField
+                    control={control}
+                    watch={watch}
+                    labelPrefix={labelPrefix}
+                />
+            </SettingsFormCell>
+        </SettingsFormGrid>
+    );
+}
+
+export function PrivateResourceCidrDestinationField({
+    control,
+    labelPrefix = "edit"
+}: {
+    control: Control<any>;
+    labelPrefix?: "create" | "edit";
+}) {
+    const t = useTranslations();
+    const destinationLabelKey =
+        labelPrefix === "create"
+            ? "createInternalResourceDialogDestination"
+            : "editInternalResourceDialogDestination";
+
+    return (
+        <FormField
+            control={control}
+            name="destination"
+            render={({ field }) => (
+                <FormItem>
+                    <FormLabel>{t(destinationLabelKey)}</FormLabel>
+                    <FormControl>
+                        <Input
+                            {...field}
+                            className="w-full"
+                            value={field.value ?? ""}
+                            onChange={(e) =>
+                                field.onChange(
+                                    e.target.value === ""
+                                        ? null
+                                        : e.target.value
+                                )
+                            }
+                        />
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            )}
+        />
+    );
+}

src/app/[orgId]/settings/resources/private/PrivateResourceHttpFields.tsx

@@ -0,0 +1,297 @@
+"use client";
+
+import DomainPicker from "@app/components/DomainPicker";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import {
+    SettingsFormCell,
+    SettingsFormGrid,
+    SettingsSubsectionDescription,
+    SettingsSubsectionHeader,
+    SettingsSubsectionTitle
+} from "@app/components/Settings";
+import { SwitchInput } from "@app/components/SwitchInput";
+import {
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { Input } from "@app/components/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "@app/components/ui/select";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { useTranslations } from "next-intl";
+import type { Control, UseFormSetValue, UseFormWatch } from "react-hook-form";
+
+type PrivateResourceHttpFieldsProps = {
+    control: Control<any>;
+    setValue: UseFormSetValue<any>;
+    orgId: string;
+    watch: UseFormWatch<any>;
+    disabled?: boolean;
+    siteResourceId?: number;
+    labelPrefix?: "create" | "edit";
+    hideDomainPicker?: boolean;
+    hidePaidFeaturesAlert?: boolean;
+};
+
+export function PrivateResourceHttpFields({
+    control,
+    setValue,
+    orgId,
+    watch,
+    disabled = false,
+    siteResourceId,
+    labelPrefix = "edit",
+    hideDomainPicker = false,
+    hidePaidFeaturesAlert = false
+}: PrivateResourceHttpFieldsProps) {
+    const t = useTranslations();
+    const schemeLabelKey =
+        labelPrefix === "create"
+            ? "createInternalResourceDialogScheme"
+            : "editInternalResourceDialogScheme";
+    const destinationLabelKey =
+        labelPrefix === "create"
+            ? "createInternalResourceDialogDestination"
+            : "editInternalResourceDialogDestination";
+    const destinationPortLabelKey =
+        labelPrefix === "create"
+            ? "createInternalResourceDialogModePort"
+            : "editInternalResourceDialogModePort";
+    const httpConfigurationTitleKey =
+        labelPrefix === "create"
+            ? "createInternalResourceDialogHttpConfiguration"
+            : "editInternalResourceDialogHttpConfiguration";
+    const httpConfigurationDescriptionKey =
+        labelPrefix === "create"
+            ? "createInternalResourceDialogHttpConfigurationDescription"
+            : "editInternalResourceDialogHttpConfigurationDescription";
+    const enableSslLabelKey =
+        labelPrefix === "create"
+            ? "createInternalResourceDialogEnableSsl"
+            : "editInternalResourceDialogEnableSsl";
+    const enableSslDescriptionKey =
+        labelPrefix === "create"
+            ? "createInternalResourceDialogEnableSslDescription"
+            : "editInternalResourceDialogEnableSslDescription";
+
+    const httpConfigSubdomain = watch("httpConfigSubdomain");
+    const httpConfigDomainId = watch("httpConfigDomainId");
+    const httpConfigFullDomain = watch("httpConfigFullDomain");
+
+    return (
+        <SettingsFormGrid>
+            {!hidePaidFeaturesAlert && (
+                <SettingsFormCell span="full">
+                    <PaidFeaturesAlert
+                        tiers={tierMatrix.advancedPrivateResources}
+                    />
+                </SettingsFormCell>
+            )}
+
+            <SettingsFormCell span="quarter">
+                <FormField
+                    control={control}
+                    name="scheme"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>{t(schemeLabelKey)}</FormLabel>
+                            <Select
+                                onValueChange={field.onChange}
+                                value={field.value ?? "http"}
+                                disabled={disabled}
+                            >
+                                <FormControl>
+                                    <SelectTrigger className="w-full">
+                                        <SelectValue />
+                                    </SelectTrigger>
+                                </FormControl>
+                                <SelectContent>
+                                    <SelectItem value="http">http</SelectItem>
+                                    <SelectItem value="https">https</SelectItem>
+                                </SelectContent>
+                            </Select>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+            </SettingsFormCell>
+            <SettingsFormCell span="half">
+                <FormField
+                    control={control}
+                    name="destination"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>{t(destinationLabelKey)}</FormLabel>
+                            <FormControl>
+                                <Input
+                                    {...field}
+                                    className="w-full"
+                                    value={field.value ?? ""}
+                                    disabled={disabled}
+                                    onChange={(e) =>
+                                        field.onChange(
+                                            e.target.value === ""
+                                                ? null
+                                                : e.target.value
+                                        )
+                                    }
+                                />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+            </SettingsFormCell>
+            <SettingsFormCell span="quarter">
+                <FormField
+                    control={control}
+                    name="destinationPort"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>{t(destinationPortLabelKey)}</FormLabel>
+                            <FormControl>
+                                <Input
+                                    className="w-full"
+                                    type="number"
+                                    min={1}
+                                    max={65535}
+                                    value={field.value ?? ""}
+                                    disabled={disabled}
+                                    onChange={(e) => {
+                                        const raw = e.target.value;
+                                        if (raw === "") {
+                                            field.onChange(null);
+                                            return;
+                                        }
+                                        const n = Number(raw);
+                                        field.onChange(
+                                            Number.isFinite(n) ? n : null
+                                        );
+                                    }}
+                                />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+            </SettingsFormCell>
+
+            {!hideDomainPicker && (
+                <>
+                    <SettingsFormCell span="full">
+                        <SettingsSubsectionHeader>
+                            <SettingsSubsectionTitle>
+                                {t(httpConfigurationTitleKey)}
+                            </SettingsSubsectionTitle>
+                            <SettingsSubsectionDescription>
+                                {t(httpConfigurationDescriptionKey)}
+                            </SettingsSubsectionDescription>
+                        </SettingsSubsectionHeader>
+                    </SettingsFormCell>
+                    <SettingsFormCell span="full">
+                        <div
+                            className={
+                                disabled
+                                    ? "pointer-events-none opacity-50"
+                                    : undefined
+                            }
+                        >
+                            <DomainPicker
+                                key={
+                                    siteResourceId
+                                        ? `http-domain-${siteResourceId}`
+                                        : "http-domain-create"
+                                }
+                                orgId={orgId}
+                                cols={2}
+                                hideFreeDomain
+                                defaultSubdomain={
+                                    httpConfigSubdomain ?? undefined
+                                }
+                                defaultDomainId={
+                                    httpConfigDomainId ?? undefined
+                                }
+                                defaultFullDomain={
+                                    httpConfigFullDomain ?? undefined
+                                }
+                                onDomainChange={(res) => {
+                                    if (res === null) {
+                                        setValue("httpConfigSubdomain", null);
+                                        setValue("httpConfigDomainId", null);
+                                        setValue("httpConfigFullDomain", null);
+                                        return;
+                                    }
+                                    setValue(
+                                        "httpConfigSubdomain",
+                                        res.subdomain ?? null
+                                    );
+                                    setValue(
+                                        "httpConfigDomainId",
+                                        res.domainId
+                                    );
+                                    setValue(
+                                        "httpConfigFullDomain",
+                                        res.fullDomain
+                                    );
+                                }}
+                            />
+                        </div>
+                    </SettingsFormCell>
+                    <SettingsFormCell span="half">
+                        <FormField
+                            control={control}
+                            name="ssl"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormControl>
+                                        <SwitchInput
+                                            id="private-resource-ssl"
+                                            label={t(enableSslLabelKey)}
+                                            description={t(
+                                                enableSslDescriptionKey
+                                            )}
+                                            checked={!!field.value}
+                                            onCheckedChange={field.onChange}
+                                            disabled={disabled}
+                                        />
+                                    </FormControl>
+                                </FormItem>
+                            )}
+                        />
+                    </SettingsFormCell>
+                </>
+            )}
+
+            {hideDomainPicker && (
+                <SettingsFormCell span="half">
+                    <FormField
+                        control={control}
+                        name="ssl"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormControl>
+                                    <SwitchInput
+                                        id="private-resource-ssl"
+                                        label={t(enableSslLabelKey)}
+                                        description={t(enableSslDescriptionKey)}
+                                        checked={!!field.value}
+                                        onCheckedChange={field.onChange}
+                                        disabled={disabled}
+                                    />
+                                </FormControl>
+                            </FormItem>
+                        )}
+                    />
+                </SettingsFormCell>
+            )}
+        </SettingsFormGrid>
+    );
+}

src/app/[orgId]/settings/resources/private/PrivateResourceMultiSiteRoutingHelp.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { ExternalLink } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+export function PrivateResourceMultiSiteRoutingHelp() {
+    const t = useTranslations();
+
+    return (
+        <p className="text-sm text-muted-foreground mt-2">
+            {t("internalResourceFormMultiSiteRoutingHelp")}{" "}
+            <a
+                href="https://docs.pangolin.net/manage/resources/private/multi-site-routing"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary hover:underline inline-flex items-center gap-1"
+            >
+                {t("internalResourceFormMultiSiteRoutingHelpLearnMore")}
+                <ExternalLink className="size-3.5 shrink-0" />
+            </a>
+            .
+        </p>
+    );
+}

src/app/[orgId]/settings/resources/private/PrivateResourcePortRanges.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import {
+    SettingsFormCell,
+    SettingsFormGrid,
+    SettingsSubsectionDescription,
+    SettingsSubsectionHeader,
+    SettingsSubsectionTitle
+} from "@app/components/Settings";
+import { SwitchInput } from "@app/components/SwitchInput";
+import {
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { Input } from "@app/components/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "@app/components/ui/select";
+import {
+    getPortModeFromString,
+    getPortStringFromMode,
+    type PortMode
+} from "@app/lib/privateResourceForm";
+import { useTranslations } from "next-intl";
+import { useEffect, useState, type ReactNode } from "react";
+import type { Control, UseFormSetValue } from "react-hook-form";
+
+type PrivateResourceNetworkAccessFieldsProps = {
+    control: Control<any>;
+    setValue: UseFormSetValue<any>;
+    showPortRanges?: boolean;
+    initialTcp?: string | null;
+    initialUdp?: string | null;
+    disabled?: boolean;
+    icmpId?: string;
+    embedInParentGrid?: boolean;
+};
+
+export function PrivateResourceAllowIcmpField({
+    control,
+    id = "private-resource-allow-icmp",
+    disabled = false
+}: {
+    control: Control<any>;
+    id?: string;
+    disabled?: boolean;
+}) {
+    const t = useTranslations();
+
+    return (
+        <FormField
+            control={control}
+            name="disableIcmp"
+            render={({ field }) => (
+                <FormItem>
+                    <FormControl>
+                        <SwitchInput
+                            id={id}
+                            label={t("privateResourceAllowIcmpPing")}
+                            checked={!field.value}
+                            onCheckedChange={(checked) =>
+                                field.onChange(!checked)
+                            }
+                            disabled={disabled}
+                        />
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            )}
+        />
+    );
+}
+
+function PrivateResourceNetworkAccessHeader() {
+    const t = useTranslations();
+
+    return (
+        <SettingsFormCell span="full">
+            <SettingsSubsectionHeader>
+                <SettingsSubsectionTitle>
+                    {t("privateResourceNetworkAccess")}
+                </SettingsSubsectionTitle>
+                <SettingsSubsectionDescription>
+                    {t("privateResourceNetworkAccessDescription")}
+                </SettingsSubsectionDescription>
+            </SettingsSubsectionHeader>
+        </SettingsFormCell>
+    );
+}
+
+export function PrivateResourceNetworkAccessFields({
+    control,
+    setValue,
+    showPortRanges = true,
+    initialTcp,
+    initialUdp,
+    disabled = false,
+    icmpId = "private-resource-allow-icmp",
+    embedInParentGrid = false
+}: PrivateResourceNetworkAccessFieldsProps) {
+    const t = useTranslations();
+    const [tcpPortMode, setTcpPortMode] = useState<PortMode>(() =>
+        getPortModeFromString(initialTcp)
+    );
+    const [udpPortMode, setUdpPortMode] = useState<PortMode>(() =>
+        getPortModeFromString(initialUdp)
+    );
+    const [tcpCustomPorts, setTcpCustomPorts] = useState(() =>
+        initialTcp && initialTcp !== "*" ? initialTcp : ""
+    );
+    const [udpCustomPorts, setUdpCustomPorts] = useState(() =>
+        initialUdp && initialUdp !== "*" ? initialUdp : ""
+    );
+
+    useEffect(() => {
+        if (!showPortRanges) return;
+
+        setValue(
+            "tcpPortRangeString",
+            getPortStringFromMode(tcpPortMode, tcpCustomPorts)
+        );
+    }, [showPortRanges, tcpPortMode, tcpCustomPorts, setValue]);
+
+    useEffect(() => {
+        if (!showPortRanges) return;
+
+        setValue(
+            "udpPortRangeString",
+            getPortStringFromMode(udpPortMode, udpCustomPorts)
+        );
+    }, [showPortRanges, udpPortMode, udpCustomPorts, setValue]);
+
+    const content: ReactNode = (
+        <>
+            <PrivateResourceNetworkAccessHeader />
+
+            {showPortRanges ? (
+                <>
+                    <SettingsFormCell span="full">
+                        <FormField
+                            control={control}
+                            name="tcpPortRangeString"
+                            render={() => (
+                                <FormItem>
+                                    <FormLabel>
+                                        {t("editInternalResourceDialogTcp")}
+                                    </FormLabel>
+                                    <div className="flex items-center gap-2">
+                                        <Select
+                                            value={tcpPortMode}
+                                            onValueChange={(v: PortMode) =>
+                                                setTcpPortMode(v)
+                                            }
+                                        >
+                                            <FormControl>
+                                                <SelectTrigger className="w-[110px]">
+                                                    <SelectValue />
+                                                </SelectTrigger>
+                                            </FormControl>
+                                            <SelectContent>
+                                                <SelectItem value="all">
+                                                    {t("allPorts")}
+                                                </SelectItem>
+                                                <SelectItem value="blocked">
+                                                    {t("blocked")}
+                                                </SelectItem>
+                                                <SelectItem value="custom">
+                                                    {t("custom")}
+                                                </SelectItem>
+                                            </SelectContent>
+                                        </Select>
+                                        {tcpPortMode === "custom" ? (
+                                            <FormControl>
+                                                <Input
+                                                    className="flex-1"
+                                                    placeholder="80,443,8000-9000"
+                                                    value={tcpCustomPorts}
+                                                    onChange={(e) =>
+                                                        setTcpCustomPorts(
+                                                            e.target.value
+                                                        )
+                                                    }
+                                                />
+                                            </FormControl>
+                                        ) : (
+                                            <Input
+                                                className="flex-1"
+                                                disabled
+                                                placeholder={
+                                                    tcpPortMode === "all"
+                                                        ? t("allPortsAllowed")
+                                                        : t("allPortsBlocked")
+                                                }
+                                            />
+                                        )}
+                                    </div>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                    </SettingsFormCell>
+
+                    <SettingsFormCell span="full">
+                        <FormField
+                            control={control}
+                            name="udpPortRangeString"
+                            render={() => (
+                                <FormItem>
+                                    <FormLabel>
+                                        {t("editInternalResourceDialogUdp")}
+                                    </FormLabel>
+                                    <div className="flex items-center gap-2">
+                                        <Select
+                                            value={udpPortMode}
+                                            onValueChange={(v: PortMode) =>
+                                                setUdpPortMode(v)
+                                            }
+                                        >
+                                            <FormControl>
+                                                <SelectTrigger className="w-[110px]">
+                                                    <SelectValue />
+                                                </SelectTrigger>
+                                            </FormControl>
+                                            <SelectContent>
+                                                <SelectItem value="all">
+                                                    {t("allPorts")}
+                                                </SelectItem>
+                                                <SelectItem value="blocked">
+                                                    {t("blocked")}
+                                                </SelectItem>
+                                                <SelectItem value="custom">
+                                                    {t("custom")}
+                                                </SelectItem>
+                                            </SelectContent>
+                                        </Select>
+                                        {udpPortMode === "custom" ? (
+                                            <FormControl>
+                                                <Input
+                                                    className="flex-1"
+                                                    placeholder="53,123,500-600"
+                                                    value={udpCustomPorts}
+                                                    onChange={(e) =>
+                                                        setUdpCustomPorts(
+                                                            e.target.value
+                                                        )
+                                                    }
+                                                />
+                                            </FormControl>
+                                        ) : (
+                                            <Input
+                                                className="flex-1"
+                                                disabled
+                                                placeholder={
+                                                    udpPortMode === "all"
+                                                        ? t("allPortsAllowed")
+                                                        : t("allPortsBlocked")
+                                                }
+                                            />
+                                        )}
+                                    </div>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                    </SettingsFormCell>
+                </>
+            ) : null}
+
+            <SettingsFormCell span="full">
+                <PrivateResourceAllowIcmpField
+                    control={control}
+                    id={icmpId}
+                    disabled={disabled}
+                />
+            </SettingsFormCell>
+        </>
+    );
+
+    if (embedInParentGrid) {
+        return content;
+    }
+
+    return <SettingsFormGrid>{content}</SettingsFormGrid>;
+}
+
+export function PrivateResourcePortRanges(
+    props: Omit<
+        PrivateResourceNetworkAccessFieldsProps,
+        "showPortRanges" | "embedInParentGrid"
+    >
+) {
+    return <PrivateResourceNetworkAccessFields showPortRanges {...props} />;
+}

src/app/[orgId]/settings/resources/private/PrivateResourceSitesField.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import {
+    MultiSitesSelector,
+    formatMultiSitesSelectorLabel
+} from "@app/components/multi-site-selector";
+import { SitesSelector } from "@app/components/site-selector";
+import type { Selectedsite } from "@app/components/site-selector";
+import { Button } from "@app/components/ui/button";
+import {
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { cn } from "@app/lib/cn";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
+import { ChevronsUpDown } from "lucide-react";
+import { useTranslations } from "next-intl";
+import type { Control, FieldPath, FieldValues } from "react-hook-form";
+import { PrivateResourceMultiSiteRoutingHelp } from "./PrivateResourceMultiSiteRoutingHelp";
+
+type PrivateResourceSitesFieldProps<T extends FieldValues> = {
+    control: Control<T>;
+    orgId: string;
+    selectedSites: Selectedsite[];
+    onSelectedSitesChange: (sites: Selectedsite[]) => void;
+    siteIdsFieldName?: FieldPath<T>;
+    singleSite?: boolean;
+};
+
+export function PrivateResourceSitesField<T extends FieldValues>({
+    control,
+    orgId,
+    selectedSites,
+    onSelectedSitesChange,
+    siteIdsFieldName = "siteIds" as FieldPath<T>,
+    singleSite = false
+}: PrivateResourceSitesFieldProps<T>) {
+    const t = useTranslations();
+
+    return (
+        <FormField
+            control={control}
+            name={siteIdsFieldName}
+            render={({ field }) => (
+                <FormItem className="flex flex-col">
+                    <FormLabel>{t("sites")}</FormLabel>
+                    {singleSite ? (
+                        <Popover>
+                            <PopoverTrigger asChild>
+                                <FormControl>
+                                    <Button
+                                        variant="outline"
+                                        role="combobox"
+                                        className={cn(
+                                            "w-full justify-between",
+                                            selectedSites.length === 0 &&
+                                                "text-muted-foreground"
+                                        )}
+                                    >
+                                        <span className="truncate text-left">
+                                            {selectedSites[0]?.name ??
+                                                t("selectSite")}
+                                        </span>
+                                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                    </Button>
+                                </FormControl>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-full p-0">
+                                <SitesSelector
+                                    orgId={orgId}
+                                    selectedSite={selectedSites[0] ?? null}
+                                    filterTypes={["newt"]}
+                                    onSelectSite={(site) => {
+                                        onSelectedSitesChange([site]);
+                                        field.onChange([site.siteId]);
+                                    }}
+                                />
+                            </PopoverContent>
+                        </Popover>
+                    ) : (
+                        <Popover>
+                            <PopoverTrigger asChild>
+                                <FormControl>
+                                    <Button
+                                        variant="outline"
+                                        role="combobox"
+                                        className={cn(
+                                            "w-full justify-between",
+                                            selectedSites.length === 0 &&
+                                                "text-muted-foreground"
+                                        )}
+                                    >
+                                        <span className="truncate text-left">
+                                            {formatMultiSitesSelectorLabel(
+                                                selectedSites,
+                                                t
+                                            )}
+                                        </span>
+                                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                    </Button>
+                                </FormControl>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-full p-0">
+                                <MultiSitesSelector
+                                    orgId={orgId}
+                                    selectedSites={selectedSites}
+                                    filterTypes={["newt"]}
+                                    onSelectionChange={(sites) => {
+                                        onSelectedSitesChange(sites);
+                                        field.onChange(
+                                            sites.map((s) => s.siteId)
+                                        );
+                                    }}
+                                />
+                            </PopoverContent>
+                        </Popover>
+                    )}
+                    <FormMessage />
+                    {!singleSite && selectedSites.length > 1 ? (
+                        <PrivateResourceMultiSiteRoutingHelp />
+                    ) : null}
+                </FormItem>
+            )}
+        />
+    );
+}

src/app/[orgId]/settings/resources/private/PrivateResourceSshFields.tsx

@@ -0,0 +1,333 @@
+"use client";
+
+import {
+    SettingsFormCell,
+    SettingsFormGrid,
+    SettingsSubsectionDescription,
+    SettingsSubsectionHeader,
+    SettingsSubsectionTitle
+} from "@app/components/Settings";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import { SshServerSettingsFields } from "@app/components/SshServerSettingsFields";
+import { PrivateResourceAliasField } from "./PrivateResourceDestinationFields";
+import { PrivateResourceSitesField } from "./PrivateResourceSitesField";
+import { getSshUseMultiSiteTargetForm } from "./privateResourceUtils";
+import { inferSshPamMode } from "@app/lib/privateResourceForm";
+import {
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { Input } from "@app/components/ui/input";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { useTranslations } from "next-intl";
+import { useState, type ReactNode } from "react";
+import type { Control, UseFormSetValue, UseFormWatch } from "react-hook-form";
+import type { Selectedsite } from "@app/components/site-selector";
+
+type PrivateResourceSshFieldsProps = {
+    control: Control<any>;
+    setValue: UseFormSetValue<any>;
+    watch: UseFormWatch<any>;
+    orgId?: string;
+    disabled?: boolean;
+    selectedSites: Selectedsite[];
+    onSelectedSitesChange: (sites: Selectedsite[]) => void;
+    labelPrefix?: "create" | "edit";
+    showSshSettings?: boolean;
+    layout?: "default" | "wizard";
+    showPaidFeaturesAlert?: boolean;
+    hideAlias?: boolean;
+    embedInParentGrid?: boolean;
+    isNativeSsh?: boolean;
+};
+
+export function PrivateResourceSshFields({
+    control,
+    setValue,
+    watch,
+    orgId,
+    disabled = false,
+    selectedSites,
+    onSelectedSitesChange,
+    labelPrefix = "edit",
+    showSshSettings = true,
+    layout = "default",
+    showPaidFeaturesAlert = true,
+    hideAlias = false,
+    embedInParentGrid = false,
+    isNativeSsh: isNativeSshProp
+}: PrivateResourceSshFieldsProps) {
+    const t = useTranslations();
+    const destinationLabelKey =
+        labelPrefix === "create"
+            ? "createInternalResourceDialogDestination"
+            : "editInternalResourceDialogDestination";
+    const destinationPortLabelKey =
+        labelPrefix === "create"
+            ? "createInternalResourceDialogModePort"
+            : "editInternalResourceDialogModePort";
+
+    const authDaemonMode = watch("authDaemonMode") ?? "site";
+    const pamMode = inferSshPamMode(authDaemonMode, watch("pamMode"));
+    const standardDaemonLocation =
+        watch("standardDaemonLocation") ??
+        (authDaemonMode === "remote" ? "remote" : "site");
+    const formAuthDaemonPort = watch("authDaemonPort");
+    const [authDaemonPortInput, setAuthDaemonPortInput] = useState(() =>
+        formAuthDaemonPort != null ? String(formAuthDaemonPort) : "22123"
+    );
+    const isEditLayout = layout === "default";
+
+    const [sshServerMode, setSshServerMode] = useState<"standard" | "native">(
+        () => (authDaemonMode === "native" ? "native" : "standard")
+    );
+
+    const isNative =
+        isNativeSshProp ??
+        (isEditLayout
+            ? authDaemonMode === "native"
+            : sshServerMode === "native");
+    const useMultiSiteTargetForm = getSshUseMultiSiteTargetForm(
+        isNative,
+        authDaemonMode,
+        pamMode
+    );
+
+    function trimSitesToFirst() {
+        if (selectedSites.length <= 1) return;
+
+        const first = selectedSites.slice(0, 1);
+        onSelectedSitesChange(first);
+        setValue(
+            "siteIds",
+            first.map((s: Selectedsite) => s.siteId),
+            { shouldValidate: true }
+        );
+    }
+
+    function handlePamModeChange(value: "passthrough" | "push") {
+        if (disabled) return;
+
+        setValue("pamMode", value, { shouldValidate: true });
+
+        if (value === "passthrough") {
+            setValue("authDaemonPort", null, { shouldValidate: true });
+            setAuthDaemonPortInput("22123");
+            return;
+        }
+
+        if (standardDaemonLocation !== "remote" && selectedSites.length > 1) {
+            trimSitesToFirst();
+        }
+    }
+
+    function handleDaemonLocationChange(value: "site" | "remote") {
+        if (disabled) return;
+
+        setValue("standardDaemonLocation", value, { shouldValidate: true });
+        setValue("authDaemonMode", value, { shouldValidate: true });
+
+        if (value === "site") {
+            setValue("authDaemonPort", null, { shouldValidate: true });
+            setAuthDaemonPortInput("22123");
+            trimSitesToFirst();
+        }
+    }
+
+    function handleAuthDaemonPortChange(value: string) {
+        if (disabled) return;
+
+        setAuthDaemonPortInput(value);
+        const trimmed = value.trim();
+        setValue("authDaemonPort", trimmed ? Number(trimmed) : null, {
+            shouldValidate: true
+        });
+    }
+
+    function handleServerModeChange(mode: "standard" | "native") {
+        if (disabled) return;
+
+        setSshServerMode(mode);
+        if (mode === "native") {
+            setValue("authDaemonMode", "native", { shouldValidate: true });
+            setValue("authDaemonPort", null, { shouldValidate: true });
+            setValue("destination", null, { shouldValidate: true });
+            setValue("destinationPort", null, { shouldValidate: true });
+            setAuthDaemonPortInput("22123");
+            trimSitesToFirst();
+            return;
+        }
+
+        setValue("authDaemonMode", standardDaemonLocation, {
+            shouldValidate: true
+        });
+        setValue("destinationPort", 22, { shouldValidate: true });
+    }
+
+    const aliasField = hideAlias ? null : (
+        <PrivateResourceAliasField
+            control={control}
+            watch={watch}
+            labelPrefix={labelPrefix}
+            disabled={disabled}
+        />
+    );
+
+    const standardSshTargetRow =
+        orgId && !isNative ? (
+            <div className="grid grid-cols-3 gap-4 items-start">
+                <PrivateResourceSitesField
+                    control={control}
+                    orgId={orgId}
+                    selectedSites={selectedSites}
+                    onSelectedSitesChange={onSelectedSitesChange}
+                    singleSite={!useMultiSiteTargetForm}
+                />
+                <FormField
+                    control={control}
+                    name="destination"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>{t(destinationLabelKey)}</FormLabel>
+                            <FormControl>
+                                <Input
+                                    {...field}
+                                    className="w-full"
+                                    value={field.value ?? ""}
+                                    disabled={disabled}
+                                    onChange={(e) =>
+                                        field.onChange(
+                                            e.target.value === ""
+                                                ? null
+                                                : e.target.value
+                                        )
+                                    }
+                                />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={control}
+                    name="destinationPort"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>{t(destinationPortLabelKey)}</FormLabel>
+                            <FormControl>
+                                <Input
+                                    className="w-full"
+                                    type="number"
+                                    min={1}
+                                    max={65535}
+                                    value={field.value ?? ""}
+                                    disabled={disabled}
+                                    onChange={(e) => {
+                                        const raw = e.target.value;
+                                        if (raw === "") {
+                                            field.onChange(null);
+                                            return;
+                                        }
+                                        const n = Number(raw);
+                                        field.onChange(
+                                            Number.isFinite(n) ? n : null
+                                        );
+                                    }}
+                                />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+            </div>
+        ) : null;
+
+    const sshSettingsFields = showSshSettings ? (
+        <SshServerSettingsFields
+            idPrefix={
+                layout === "wizard"
+                    ? "private-ssh-create"
+                    : "private-ssh-fields"
+            }
+            pamMode={pamMode}
+            standardDaemonLocation={standardDaemonLocation}
+            authDaemonPort={authDaemonPortInput}
+            onPamModeChange={handlePamModeChange}
+            onStandardDaemonLocationChange={handleDaemonLocationChange}
+            onAuthDaemonPortChange={handleAuthDaemonPortChange}
+            sshServerMode={sshServerMode}
+            serverModeDisplay={layout === "wizard" ? "select" : "badge"}
+            onServerModeChange={handleServerModeChange}
+        />
+    ) : null;
+
+    const destinationSection = (
+        <>
+            <SettingsFormCell span="full">
+                <SettingsSubsectionHeader>
+                    <SettingsSubsectionTitle>
+                        {t("sshServerDestination")}
+                    </SettingsSubsectionTitle>
+                    <SettingsSubsectionDescription>
+                        {t("sshServerDestinationDescription")}
+                    </SettingsSubsectionDescription>
+                </SettingsSubsectionHeader>
+            </SettingsFormCell>
+
+            {isNative && orgId ? (
+                <>
+                    <SettingsFormCell span="half">
+                        <PrivateResourceSitesField
+                            control={control}
+                            orgId={orgId}
+                            selectedSites={selectedSites}
+                            onSelectedSitesChange={onSelectedSitesChange}
+                            singleSite
+                        />
+                    </SettingsFormCell>
+                    <SettingsFormCell span="half">
+                        <PrivateResourceAliasField
+                            control={control}
+                            watch={watch}
+                            labelPrefix={labelPrefix}
+                            disabled={disabled}
+                        />
+                    </SettingsFormCell>
+                </>
+            ) : null}
+
+            {!isNative && orgId ? (
+                <SettingsFormCell span="full">
+                    {standardSshTargetRow}
+                </SettingsFormCell>
+            ) : null}
+
+            {!isNative && !hideAlias ? (
+                <SettingsFormCell span="half">{aliasField}</SettingsFormCell>
+            ) : null}
+        </>
+    );
+
+    const content: ReactNode = (
+        <>
+            {showPaidFeaturesAlert && layout === "default" && (
+                <SettingsFormCell span="full">
+                    <PaidFeaturesAlert
+                        tiers={tierMatrix.advancedPrivateResources}
+                    />
+                </SettingsFormCell>
+            )}
+            {sshSettingsFields}
+            {destinationSection}
+        </>
+    );
+
+    if (embedInParentGrid) {
+        return content;
+    }
+
+    return <SettingsFormGrid>{content}</SettingsFormGrid>;
+}

src/app/[orgId]/settings/resources/private/[niceId]/access/page.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { Button } from "@app/components/ui/button";
+import { Form } from "@app/components/ui/form";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useSiteResourceContext } from "@app/hooks/useSiteResourceContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import {
+    accessTagsToIds,
+    buildUpdateSiteResourcePayload,
+    createAccessFormSchema,
+    mergeFormValuesWithResource
+} from "@app/lib/privateResourceForm";
+import { resourceQueries, orgQueries } from "@app/lib/queries";
+import { useAccessFormDefaults } from "@app/providers/SiteResourceProvider";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useTranslations } from "next-intl";
+import { useActionState, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { PrivateResourceAccessFields } from "../../PrivateResourceAccessFields";
+
+export default function PrivateResourceAccessPage() {
+    const t = useTranslations();
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
+    const queryClient = useQueryClient();
+    const { siteResource, setAccess } = useSiteResourceContext();
+    const { loading, roles, users, clients, hasMachineClients } =
+        useAccessFormDefaults(siteResource.orgId, siteResource.id);
+
+    const machineClientsQuery = useQuery(
+        orgQueries.machineClients({
+            orgId: siteResource.orgId,
+            perPage: 1
+        })
+    );
+    const hasMachineClientsResolved =
+        (machineClientsQuery.data ?? []).filter((c) => !c.userId).length > 0;
+
+    const form = useForm({
+        resolver: zodResolver(createAccessFormSchema()),
+        defaultValues: {
+            roles: [] as typeof roles,
+            users: [] as typeof users,
+            clients: [] as typeof clients
+        }
+    });
+
+    useEffect(() => {
+        if (!loading) {
+            form.reset({ roles, users, clients });
+        }
+    }, [loading, roles, users, clients, form]);
+
+    const [, formAction, saveLoading] = useActionState(async () => {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const data = form.getValues();
+        const access = accessTagsToIds({
+            roles: data.roles,
+            users: data.users,
+            clients: data.clients
+        });
+
+        const merged = mergeFormValuesWithResource(siteResource, {});
+        const payload = buildUpdateSiteResourcePayload(merged, access);
+
+        try {
+            await api.post(`/site-resource/${siteResource.id}`, payload);
+            setAccess(access);
+
+            await Promise.all([
+                queryClient.invalidateQueries(
+                    resourceQueries.siteResourceRoles({
+                        siteResourceId: siteResource.id
+                    })
+                ),
+                queryClient.invalidateQueries(
+                    resourceQueries.siteResourceUsers({
+                        siteResourceId: siteResource.id
+                    })
+                ),
+                queryClient.invalidateQueries(
+                    resourceQueries.siteResourceClients({
+                        siteResourceId: siteResource.id
+                    })
+                )
+            ]);
+
+            toast({
+                title: t("editInternalResourceDialogSuccess"),
+                description: t(
+                    "editInternalResourceDialogInternalResourceUpdatedSuccessfully"
+                )
+            });
+        } catch (error) {
+            toast({
+                title: t("editInternalResourceDialogError"),
+                description: formatAxiosError(
+                    error,
+                    t(
+                        "editInternalResourceDialogFailedToUpdateInternalResource"
+                    )
+                ),
+                variant: "destructive"
+            });
+        }
+    }, null);
+
+    return (
+        <SettingsContainer>
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("authentication")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t(
+                            "editInternalResourceDialogAccessControlDescription"
+                        )}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+
+                <SettingsSectionBody>
+                    <SettingsSectionForm variant="half">
+                        <Form {...form}>
+                            <form
+                                action={formAction}
+                                id="private-resource-access-form"
+                            >
+                                <PrivateResourceAccessFields
+                                    control={form.control}
+                                    orgId={siteResource.orgId}
+                                    loading={loading}
+                                    hasMachineClients={
+                                        hasMachineClients ||
+                                        hasMachineClientsResolved
+                                    }
+                                />
+                            </form>
+                        </Form>
+                    </SettingsSectionForm>
+                </SettingsSectionBody>
+
+                <SettingsSectionFooter>
+                    <Button
+                        type="submit"
+                        form="private-resource-access-form"
+                        loading={saveLoading}
+                    >
+                        {t("saveSettings")}
+                    </Button>
+                </SettingsSectionFooter>
+            </SettingsSection>
+        </SettingsContainer>
+    );
+}

src/app/[orgId]/settings/resources/private/[niceId]/cidr/page.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import {
+    SettingsContainer,
+    SettingsFormCell,
+    SettingsFormGrid,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { Button } from "@app/components/ui/button";
+import { Form } from "@app/components/ui/form";
+import { createCidrFormSchema } from "@app/lib/privateResourceForm";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import { useActionState, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { PrivateResourceSitesField } from "../../PrivateResourceSitesField";
+import { PrivateResourceCidrDestinationField } from "../../PrivateResourceDestinationFields";
+import { PrivateResourcePortRanges } from "../../PrivateResourcePortRanges";
+import { buildSelectedSitesForResource } from "../../privateResourceUtils";
+import { asAnyControl, asAnySetValue } from "../../formControlUtils";
+import { useSaveSiteResource } from "../../useSaveSiteResource";
+
+export default function PrivateResourceCidrPage() {
+    const t = useTranslations();
+    const { save, siteResource } = useSaveSiteResource();
+    const [selectedSites, setSelectedSites] = useState(() =>
+        buildSelectedSitesForResource(siteResource)
+    );
+
+    const formSchema = useMemo(() => createCidrFormSchema(t), [t]);
+    type FormValues = z.infer<typeof formSchema>;
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            siteIds: siteResource.siteIds,
+            mode: "cidr",
+            destination: siteResource.destination ?? "",
+            tcpPortRangeString: siteResource.tcpPortRangeString ?? "*",
+            udpPortRangeString: siteResource.udpPortRangeString ?? "*",
+            disableIcmp: siteResource.disableIcmp ?? false
+        }
+    });
+
+    const [, formAction, saveLoading] = useActionState(async () => {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const data = form.getValues();
+        await save({
+            siteIds: data.siteIds,
+            mode: "cidr",
+            destination: data.destination,
+            tcpPortRangeString: data.tcpPortRangeString,
+            udpPortRangeString: data.udpPortRangeString,
+            disableIcmp: data.disableIcmp
+        });
+    }, null);
+
+    return (
+        <SettingsContainer>
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("cidrSettings")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t(
+                            "editInternalResourceDialogDestinationCidrDescription"
+                        )}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+
+                <SettingsSectionBody>
+                    <SettingsSectionForm variant="half">
+                        <Form {...form}>
+                            <form
+                                action={formAction}
+                                id="private-resource-cidr-form"
+                            >
+                                <SettingsFormGrid>
+                                    <SettingsFormCell span="half">
+                                        <PrivateResourceSitesField
+                                            control={form.control}
+                                            orgId={siteResource.orgId}
+                                            selectedSites={selectedSites}
+                                            onSelectedSitesChange={
+                                                setSelectedSites
+                                            }
+                                        />
+                                    </SettingsFormCell>
+
+                                    <SettingsFormCell span="half">
+                                        <PrivateResourceCidrDestinationField
+                                            control={asAnyControl(form.control)}
+                                        />
+                                    </SettingsFormCell>
+
+                                    <SettingsFormCell span="full">
+                                        <PrivateResourcePortRanges
+                                            control={asAnyControl(form.control)}
+                                            setValue={asAnySetValue(
+                                                form.setValue
+                                            )}
+                                            initialTcp={
+                                                siteResource.tcpPortRangeString
+                                            }
+                                            initialUdp={
+                                                siteResource.udpPortRangeString
+                                            }
+                                        />
+                                    </SettingsFormCell>
+                                </SettingsFormGrid>
+                            </form>
+                        </Form>
+                    </SettingsSectionForm>
+                </SettingsSectionBody>
+
+                <SettingsSectionFooter>
+                    <Button
+                        type="submit"
+                        form="private-resource-cidr-form"
+                        loading={saveLoading}
+                    >
+                        {t("saveSettings")}
+                    </Button>
+                </SettingsSectionFooter>
+            </SettingsSection>
+        </SettingsContainer>
+    );
+}

src/app/[orgId]/settings/resources/private/[niceId]/general/page.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import {
+    SettingsContainer,
+    SettingsFormCell,
+    SettingsFormGrid,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { Button } from "@app/components/ui/button";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { Input } from "@app/components/ui/input";
+import { createGeneralFormSchema } from "@app/lib/privateResourceForm";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import { useActionState, useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { useSaveSiteResource } from "../../useSaveSiteResource";
+
+export default function PrivateResourceGeneralPage() {
+    const t = useTranslations();
+    const { save, siteResource } = useSaveSiteResource();
+
+    const formSchema = useMemo(() => createGeneralFormSchema(t), [t]);
+    type FormValues = z.infer<typeof formSchema>;
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            name: siteResource.name,
+            niceId: siteResource.niceId
+        }
+    });
+
+    const [, formAction, saveLoading] = useActionState(async () => {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const data = form.getValues();
+        await save({
+            name: data.name,
+            niceId: data.niceId
+        });
+    }, null);
+
+    return (
+        <SettingsContainer>
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("resourceGeneral")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t("resourceGeneralDescription")}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+
+                <SettingsSectionBody>
+                    <SettingsSectionForm variant="half">
+                        <Form {...form}>
+                            <form
+                                action={formAction}
+                                id="private-resource-general-form"
+                            >
+                                <SettingsFormGrid>
+                                    <SettingsFormCell span="half">
+                                        <FormField
+                                            control={form.control}
+                                            name="name"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t(
+                                                            "editInternalResourceDialogName"
+                                                        )}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input {...field} />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </SettingsFormCell>
+                                    <SettingsFormCell span="half">
+                                        <FormField
+                                            control={form.control}
+                                            name="niceId"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t("identifier")}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input {...field} />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </SettingsFormCell>
+                                </SettingsFormGrid>
+                            </form>
+                        </Form>
+                    </SettingsSectionForm>
+                </SettingsSectionBody>
+
+                <SettingsSectionFooter>
+                    <Button
+                        type="submit"
+                        form="private-resource-general-form"
+                        loading={saveLoading}
+                    >
+                        {t("saveSettings")}
+                    </Button>
+                </SettingsSectionFooter>
+            </SettingsSection>
+        </SettingsContainer>
+    );
+}

src/app/[orgId]/settings/resources/private/[niceId]/host/page.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import {
+    SettingsContainer,
+    SettingsFormCell,
+    SettingsFormGrid,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { Button } from "@app/components/ui/button";
+import { Form } from "@app/components/ui/form";
+import { createHostFormSchema } from "@app/lib/privateResourceForm";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import { useActionState, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { PrivateResourceSitesField } from "../../PrivateResourceSitesField";
+import { PrivateResourceHostDestinationFields } from "../../PrivateResourceDestinationFields";
+import { PrivateResourcePortRanges } from "../../PrivateResourcePortRanges";
+import { buildSelectedSitesForResource } from "../../privateResourceUtils";
+import {
+    asAnyControl,
+    asAnySetValue,
+    asAnyWatch
+} from "../../formControlUtils";
+import { useSaveSiteResource } from "../../useSaveSiteResource";
+
+export default function PrivateResourceHostPage() {
+    const t = useTranslations();
+    const { save, siteResource } = useSaveSiteResource();
+    const [selectedSites, setSelectedSites] = useState(() =>
+        buildSelectedSitesForResource(siteResource)
+    );
+
+    const formSchema = useMemo(() => createHostFormSchema(t), [t]);
+    type FormValues = z.infer<typeof formSchema>;
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            siteIds: siteResource.siteIds,
+            mode: "host",
+            destination: siteResource.destination ?? "",
+            alias: siteResource.alias ?? null,
+            tcpPortRangeString: siteResource.tcpPortRangeString ?? "*",
+            udpPortRangeString: siteResource.udpPortRangeString ?? "*",
+            disableIcmp: siteResource.disableIcmp ?? false,
+            authDaemonMode: siteResource.authDaemonMode ?? "site",
+            authDaemonPort: siteResource.authDaemonPort ?? null
+        }
+    });
+
+    const [, formAction, saveLoading] = useActionState(async () => {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const data = form.getValues();
+        await save({
+            siteIds: data.siteIds,
+            mode: "host",
+            destination: data.destination,
+            alias: data.alias,
+            tcpPortRangeString: data.tcpPortRangeString,
+            udpPortRangeString: data.udpPortRangeString,
+            disableIcmp: data.disableIcmp,
+            authDaemonMode: data.authDaemonMode,
+            authDaemonPort: data.authDaemonPort
+        });
+    }, null);
+
+    return (
+        <SettingsContainer>
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("hostSettings")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t("editInternalResourceDialogDestinationDescription")}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+
+                <SettingsSectionBody>
+                    <SettingsSectionForm variant="half">
+                        <Form {...form}>
+                            <form
+                                action={formAction}
+                                id="private-resource-host-form"
+                            >
+                                <SettingsFormGrid>
+                                    <SettingsFormCell span="half">
+                                        <PrivateResourceSitesField
+                                            control={form.control}
+                                            orgId={siteResource.orgId}
+                                            selectedSites={selectedSites}
+                                            onSelectedSitesChange={
+                                                setSelectedSites
+                                            }
+                                        />
+                                    </SettingsFormCell>
+
+                                    <SettingsFormCell span="full">
+                                        <PrivateResourceHostDestinationFields
+                                            control={asAnyControl(form.control)}
+                                            watch={asAnyWatch(form.watch)}
+                                        />
+                                    </SettingsFormCell>
+
+                                    <SettingsFormCell span="full">
+                                        <PrivateResourcePortRanges
+                                            control={asAnyControl(form.control)}
+                                            setValue={asAnySetValue(
+                                                form.setValue
+                                            )}
+                                            initialTcp={
+                                                siteResource.tcpPortRangeString
+                                            }
+                                            initialUdp={
+                                                siteResource.udpPortRangeString
+                                            }
+                                        />
+                                    </SettingsFormCell>
+                                </SettingsFormGrid>
+                            </form>
+                        </Form>
+                    </SettingsSectionForm>
+                </SettingsSectionBody>
+
+                <SettingsSectionFooter>
+                    <Button
+                        type="submit"
+                        form="private-resource-host-form"
+                        loading={saveLoading}
+                    >
+                        {t("saveSettings")}
+                    </Button>
+                </SettingsSectionFooter>
+            </SettingsSection>
+        </SettingsContainer>
+    );
+}

src/app/[orgId]/settings/resources/private/[niceId]/http/page.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import {
+    SettingsContainer,
+    SettingsFormCell,
+    SettingsFormGrid,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { Button } from "@app/components/ui/button";
+import { Form } from "@app/components/ui/form";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { createHttpFormSchema } from "@app/lib/privateResourceForm";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { useTranslations } from "next-intl";
+import { useActionState, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { PrivateResourceSitesField } from "../../PrivateResourceSitesField";
+import { PrivateResourceHttpFields } from "../../PrivateResourceHttpFields";
+import { buildSelectedSitesForResource } from "../../privateResourceUtils";
+import {
+    asAnyControl,
+    asAnySetValue,
+    asAnyWatch
+} from "../../formControlUtils";
+import { useSaveSiteResource } from "../../useSaveSiteResource";
+
+export default function PrivateResourceHttpPage() {
+    const t = useTranslations();
+    const { save, siteResource } = useSaveSiteResource();
+    const { isPaidUser } = usePaidStatus();
+    const httpSectionDisabled = !isPaidUser(
+        tierMatrix.advancedPrivateResources
+    );
+    const [selectedSites, setSelectedSites] = useState(() =>
+        buildSelectedSitesForResource(siteResource)
+    );
+
+    const formSchema = useMemo(() => createHttpFormSchema(t), [t]);
+    type FormValues = z.infer<typeof formSchema>;
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            siteIds: siteResource.siteIds,
+            mode: "http",
+            destination: siteResource.destination ?? "",
+            destinationPort: siteResource.destinationPort ?? null,
+            scheme: siteResource.scheme ?? "http",
+            ssl: siteResource.ssl ?? false,
+            httpConfigSubdomain: siteResource.subdomain ?? null,
+            httpConfigDomainId: siteResource.domainId ?? null,
+            httpConfigFullDomain: siteResource.fullDomain ?? null
+        }
+    });
+
+    const [, formAction, saveLoading] = useActionState(async () => {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const data = form.getValues();
+        await save({
+            siteIds: data.siteIds,
+            mode: "http",
+            destination: data.destination,
+            destinationPort: data.destinationPort,
+            scheme: data.scheme,
+            ssl: data.ssl,
+            httpConfigSubdomain: data.httpConfigSubdomain,
+            httpConfigDomainId: data.httpConfigDomainId,
+            httpConfigFullDomain: data.httpConfigFullDomain
+        });
+    }, null);
+
+    return (
+        <SettingsContainer>
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("httpSettings")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t(
+                            "editInternalResourceDialogHttpConfigurationDescription"
+                        )}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+
+                <SettingsSectionBody>
+                    <SettingsSectionForm variant="half">
+                        <Form {...form}>
+                            <form
+                                action={formAction}
+                                id="private-resource-http-form"
+                            >
+                                <SettingsFormGrid>
+                                    <SettingsFormCell span="half">
+                                        <PrivateResourceSitesField
+                                            control={form.control}
+                                            orgId={siteResource.orgId}
+                                            selectedSites={selectedSites}
+                                            onSelectedSitesChange={
+                                                setSelectedSites
+                                            }
+                                        />
+                                    </SettingsFormCell>
+
+                                    <SettingsFormCell span="full">
+                                        <PrivateResourceHttpFields
+                                            control={asAnyControl(form.control)}
+                                            setValue={asAnySetValue(
+                                                form.setValue
+                                            )}
+                                            orgId={siteResource.orgId}
+                                            watch={asAnyWatch(form.watch)}
+                                            disabled={httpSectionDisabled}
+                                            siteResourceId={siteResource.id}
+                                        />
+                                    </SettingsFormCell>
+                                </SettingsFormGrid>
+                            </form>
+                        </Form>
+                    </SettingsSectionForm>
+                </SettingsSectionBody>
+
+                <SettingsSectionFooter>
+                    <Button
+                        type="submit"
+                        form="private-resource-http-form"
+                        loading={saveLoading}
+                        disabled={httpSectionDisabled}
+                    >
+                        {t("saveSettings")}
+                    </Button>
+                </SettingsSectionFooter>
+            </SettingsSection>
+        </SettingsContainer>
+    );
+}

src/app/[orgId]/settings/resources/private/[niceId]/layout.tsx

@@ -0,0 +1,93 @@
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { fetchSiteResourceByNiceId } from "@app/lib/fetchSiteResourceByNiceId";
+import { getCachedOrg } from "@app/lib/api/getCachedOrg";
+import OrgProvider from "@app/providers/OrgProvider";
+import SiteResourceProvider from "@app/providers/SiteResourceProvider";
+import SiteResourceInfoBox from "@app/components/SiteResourceInfoBox";
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
+
+export const metadata: Metadata = {
+    title: "Private Resource"
+};
+
+export const dynamic = "force-dynamic";
+
+type PrivateResourceLayoutProps = {
+    children: React.ReactNode;
+    params: Promise<{ niceId: string; orgId: string }>;
+};
+
+export default async function PrivateResourceLayout(
+    props: PrivateResourceLayoutProps
+) {
+    const params = await props.params;
+    const t = await getTranslations();
+    const { children } = props;
+
+    const siteResource = await fetchSiteResourceByNiceId(
+        params.orgId,
+        params.niceId
+    );
+
+    if (!siteResource) {
+        redirect(`/${params.orgId}/settings/resources/private`);
+    }
+
+    let org = null;
+    try {
+        const res = await getCachedOrg(params.orgId);
+        org = res.data.data;
+    } catch {
+        redirect(`/${params.orgId}/settings/resources/private`);
+    }
+
+    if (!org) {
+        redirect(`/${params.orgId}/settings/resources/private`);
+    }
+
+    const modeSettingsKey = `${siteResource.mode}Settings` as
+        | "hostSettings"
+        | "cidrSettings"
+        | "httpSettings"
+        | "sshSettings";
+
+    const navItems = [
+        {
+            title: t("general"),
+            href: `/{orgId}/settings/resources/private/{niceId}/general`
+        },
+        {
+            title: t(modeSettingsKey),
+            href: `/{orgId}/settings/resources/private/{niceId}/${siteResource.mode}`
+        },
+        {
+            title: t("authentication"),
+            href: `/{orgId}/settings/resources/private/{niceId}/access`
+        }
+    ];
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t("resourceSetting", {
+                    resourceName: siteResource.name
+                })}
+                description={t("resourceSettingDescription")}
+            />
+
+            <OrgProvider org={org}>
+                <SiteResourceProvider siteResource={siteResource}>
+                    <div className="space-y-6">
+                        <SiteResourceInfoBox />
+                        <HorizontalTabs items={navItems}>
+                            {children}
+                        </HorizontalTabs>
+                    </div>
+                </SiteResourceProvider>
+            </OrgProvider>
+        </>
+    );
+}

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

@@ -0,0 +1,15 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+
+export const metadata: Metadata = {
+    title: "Private Resource"
+};
+
+export default async function PrivateResourcePage(props: {
+    params: Promise<{ niceId: string; orgId: string }>;
+}) {
+    const params = await props.params;
+    redirect(
+        `/${params.orgId}/settings/resources/private/${params.niceId}/general`
+    );
+}

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

@@ -0,0 +1,229 @@
+"use client";
+
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle,
+    SettingsFormGrid
+} from "@app/components/Settings";
+import { SshServerSettingsFields } from "@app/components/SshServerSettingsFields";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import { Button } from "@app/components/ui/button";
+import { Form } from "@app/components/ui/form";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import {
+    createSshFormSchema,
+    inferSshPamMode
+} from "@app/lib/privateResourceForm";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { useTranslations } from "next-intl";
+import { useActionState, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { PrivateResourceSshFields } from "../../PrivateResourceSshFields";
+import { buildSelectedSitesForResource } from "../../privateResourceUtils";
+import {
+    asAnyControl,
+    asAnySetValue,
+    asAnyWatch
+} from "../../formControlUtils";
+import { useSaveSiteResource } from "../../useSaveSiteResource";
+import type { Selectedsite } from "@app/components/site-selector";
+
+export default function PrivateResourceSshPage() {
+    const t = useTranslations();
+    const { save, siteResource } = useSaveSiteResource();
+    const { isPaidUser } = usePaidStatus();
+    const sshSectionDisabled = !isPaidUser(tierMatrix.advancedPrivateResources);
+    const isNative = siteResource.authDaemonMode === "native";
+    const [sshServerMode] = useState<"standard" | "native">(
+        isNative ? "native" : "standard"
+    );
+    const [selectedSites, setSelectedSites] = useState(() =>
+        buildSelectedSitesForResource(siteResource)
+    );
+
+    const formSchema = useMemo(
+        () => createSshFormSchema(t, { isNative }),
+        [t, isNative]
+    );
+    type FormValues = z.infer<typeof formSchema>;
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            siteIds: siteResource.siteIds,
+            mode: "ssh",
+            destination: siteResource.destination ?? "",
+            alias: siteResource.alias ?? null,
+            destinationPort: siteResource.destinationPort ?? null,
+            pamMode: inferSshPamMode(
+                siteResource.authDaemonMode,
+                siteResource.pamMode
+            ),
+            standardDaemonLocation: isNative
+                ? "site"
+                : siteResource.authDaemonMode === "remote"
+                  ? "remote"
+                  : "site",
+            authDaemonPort: siteResource.authDaemonPort
+                ? String(siteResource.authDaemonPort)
+                : "22123"
+        }
+    });
+
+    const pamMode = form.watch("pamMode");
+    const standardDaemonLocation = form.watch("standardDaemonLocation");
+    const authDaemonPort = form.watch("authDaemonPort");
+
+    function trimSitesToFirst() {
+        if (selectedSites.length <= 1) return;
+
+        const first = selectedSites.slice(0, 1);
+        setSelectedSites(first);
+        form.setValue(
+            "siteIds",
+            first.map((s: Selectedsite) => s.siteId),
+            { shouldValidate: true }
+        );
+    }
+
+    function handlePamModeChange(value: "passthrough" | "push") {
+        form.setValue("pamMode", value, { shouldValidate: true });
+
+        if (value === "push") {
+            if (
+                standardDaemonLocation !== "remote" &&
+                selectedSites.length > 1
+            ) {
+                trimSitesToFirst();
+            }
+            return;
+        }
+
+        form.setValue("authDaemonPort", "22123", { shouldValidate: true });
+    }
+
+    function handleDaemonLocationChange(value: "site" | "remote") {
+        form.setValue("standardDaemonLocation", value, {
+            shouldValidate: true
+        });
+
+        if (value === "site") {
+            form.setValue("authDaemonPort", "22123", { shouldValidate: true });
+            trimSitesToFirst();
+        }
+    }
+
+    const [, formAction, saveLoading] = useActionState(async () => {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const data = form.getValues();
+        const effectiveAuthDaemonMode = isNative
+            ? "native"
+            : data.standardDaemonLocation;
+        const effectiveAuthDaemonPort =
+            !isNative &&
+            data.pamMode === "push" &&
+            data.standardDaemonLocation === "remote"
+                ? Number(data.authDaemonPort)
+                : null;
+
+        await save({
+            siteIds: data.siteIds,
+            mode: "ssh",
+            destination: isNative ? null : data.destination,
+            alias: data.alias,
+            destinationPort: isNative ? null : data.destinationPort,
+            authDaemonMode: effectiveAuthDaemonMode,
+            authDaemonPort: effectiveAuthDaemonPort,
+            pamMode: data.pamMode
+        });
+    }, null);
+
+    return (
+        <SettingsContainer>
+            <PaidFeaturesAlert tiers={tierMatrix.advancedPrivateResources} />
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("sshSettings")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t("editInternalResourceDialogDestinationDescription")}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+
+                <fieldset
+                    disabled={sshSectionDisabled}
+                    className={
+                        sshSectionDisabled
+                            ? "opacity-50 pointer-events-none"
+                            : ""
+                    }
+                >
+                    <Form {...form}>
+                        <SettingsSectionBody>
+                            <SettingsSectionForm variant="half">
+                                <SettingsFormGrid>
+                                    <SshServerSettingsFields
+                                        idPrefix="private-ssh-edit"
+                                        pamMode={pamMode}
+                                        standardDaemonLocation={
+                                            standardDaemonLocation
+                                        }
+                                        authDaemonPort={authDaemonPort}
+                                        onPamModeChange={handlePamModeChange}
+                                        onStandardDaemonLocationChange={
+                                            handleDaemonLocationChange
+                                        }
+                                        onAuthDaemonPortChange={(value) =>
+                                            form.setValue(
+                                                "authDaemonPort",
+                                                value,
+                                                { shouldValidate: true }
+                                            )
+                                        }
+                                        authDaemonPortError={
+                                            form.formState.errors.authDaemonPort
+                                                ?.message
+                                        }
+                                        sshServerMode={sshServerMode}
+                                        serverModeDisplay="badge"
+                                    />
+                                    <PrivateResourceSshFields
+                                        control={asAnyControl(form.control)}
+                                        setValue={asAnySetValue(form.setValue)}
+                                        watch={asAnyWatch(form.watch)}
+                                        orgId={siteResource.orgId}
+                                        selectedSites={selectedSites}
+                                        onSelectedSitesChange={setSelectedSites}
+                                        showSshSettings={false}
+                                        embedInParentGrid
+                                        showPaidFeaturesAlert={false}
+                                        isNativeSsh={isNative}
+                                    />
+                                </SettingsFormGrid>
+                            </SettingsSectionForm>
+                        </SettingsSectionBody>
+
+                        <SettingsSectionFooter>
+                            <form action={formAction}>
+                                <Button type="submit" loading={saveLoading}>
+                                    {t("saveSettings")}
+                                </Button>
+                            </form>
+                        </SettingsSectionFooter>
+                    </Form>
+                </fieldset>
+            </SettingsSection>
+        </SettingsContainer>
+    );
+}

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

@@ -0,0 +1,638 @@
+"use client";
+
+import {
+    SettingsFormCell,
+    SettingsFormGrid,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import HeaderTitle from "@app/components/SettingsSectionTitle";
+import {
+    OptionSelect,
+    type OptionSelectOption
+} from "@app/components/OptionSelect";
+import DomainPicker from "@app/components/DomainPicker";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import { Button } from "@app/components/ui/button";
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { Input } from "@app/components/ui/input";
+import type { Selectedsite } from "@app/components/site-selector";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import {
+    buildCreateSiteResourcePayload,
+    createCreateFormSchema,
+    type PrivateResourceMode
+} from "@app/lib/privateResourceForm";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import type { SiteResource } from "@server/db";
+import { GetSiteResponse } from "@server/routers/site/getSite";
+import type ResponseT from "@server/types/Response";
+import { AxiosResponse } from "axios";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useState, useTransition } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { PrivateResourceSitesField } from "../PrivateResourceSitesField";
+import { PrivateResourceHttpFields } from "../PrivateResourceHttpFields";
+import { PrivateResourceSshFields } from "../PrivateResourceSshFields";
+import { PrivateResourcePortRanges } from "../PrivateResourcePortRanges";
+import {
+    PrivateResourceAliasField,
+    PrivateResourceCidrDestinationField,
+    PrivateResourceHostDestinationFields
+} from "../PrivateResourceDestinationFields";
+import { asAnyControl, asAnySetValue, asAnyWatch } from "../formControlUtils";
+
+export default function CreatePrivateResourcePage() {
+    const params = useParams();
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    const t = useTranslations();
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
+    const orgId = params.orgId as string;
+    const disableEnterpriseFeatures = env.flags.disableEnterpriseFeatures;
+    const { isPaidUser } = usePaidStatus();
+    const httpSectionDisabled = !isPaidUser(
+        tierMatrix.advancedPrivateResources
+    );
+    const sshSectionDisabled = !isPaidUser(tierMatrix.advancedPrivateResources);
+    const [isSubmitting, startTransition] = useTransition();
+
+    const siteIdParam = searchParams.get("siteId");
+    const siteIdNumber =
+        siteIdParam && Number.isInteger(Number(siteIdParam))
+            ? Number(siteIdParam)
+            : null;
+
+    const [selectedSites, setSelectedSites] = useState<Selectedsite[]>([]);
+
+    const formSchema = useMemo(() => createCreateFormSchema(t), [t]);
+    type FormValues = z.infer<typeof formSchema>;
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            name: "",
+            siteIds: [],
+            mode: "host",
+            destination: "",
+            alias: null,
+            destinationPort: null,
+            scheme: "http",
+            ssl: true,
+            httpConfigSubdomain: null,
+            httpConfigDomainId: null,
+            httpConfigFullDomain: null,
+            authDaemonMode: "native",
+            standardDaemonLocation: "site",
+            authDaemonPort: null,
+            pamMode: "passthrough",
+            tcpPortRangeString: "*",
+            udpPortRangeString: "*",
+            disableIcmp: false
+        }
+    });
+
+    useEffect(() => {
+        if (!siteIdNumber) return;
+
+        void api
+            .get<ResponseT<GetSiteResponse>>(`/site/${siteIdNumber}`)
+            .then((res) => {
+                const site = res.data.data;
+                if (!site || site.orgId !== orgId) return;
+                const selected: Selectedsite = {
+                    siteId: site.siteId,
+                    name: site.name,
+                    type: site.type as Selectedsite["type"]
+                };
+                setSelectedSites([selected]);
+                form.setValue("siteIds", [site.siteId]);
+            })
+            .catch(() => {});
+    }, [api, form, orgId, siteIdNumber]);
+
+    const mode = form.watch("mode");
+    const authDaemonMode = form.watch("authDaemonMode");
+    const isNativeSsh = mode === "ssh" && authDaemonMode === "native";
+
+    const modeOptions: OptionSelectOption<PrivateResourceMode>[] = [
+        { value: "host", label: t("createInternalResourceDialogModeHost") },
+        { value: "cidr", label: t("createInternalResourceDialogModeCidr") },
+        ...(!disableEnterpriseFeatures
+            ? [
+                  {
+                      value: "http" as const,
+                      label: t("createInternalResourceDialogModeHttp")
+                  },
+                  {
+                      value: "ssh" as const,
+                      label: t("createInternalResourceDialogModeSsh")
+                  }
+              ]
+            : [])
+    ];
+
+    const submitDisabled =
+        isSubmitting ||
+        (mode === "http" && httpSectionDisabled) ||
+        (mode === "ssh" && sshSectionDisabled);
+
+    function onSubmit(values: FormValues) {
+        startTransition(async () => {
+            try {
+                const res = await api.put<
+                    AxiosResponse<ResponseT<SiteResource>>
+                >(
+                    `/org/${orgId}/site-resource`,
+                    buildCreateSiteResourcePayload({
+                        ...values,
+                        destination:
+                            values.destination?.trim() &&
+                            values.destination.trim().length > 0
+                                ? values.destination.trim()
+                                : null
+                    })
+                );
+
+                toast({
+                    title: t("createInternalResourceDialogSuccess"),
+                    description: t(
+                        "createInternalResourceDialogInternalResourceCreatedSuccessfully"
+                    )
+                });
+
+                const created = (res.data as unknown as ResponseT<SiteResource>)
+                    .data;
+                if (!created) {
+                    throw new Error("Failed to create private resource");
+                }
+
+                router.push(
+                    `/${orgId}/settings/resources/private/${created.niceId}/${created.mode}`
+                );
+            } catch (error) {
+                toast({
+                    title: t("createInternalResourceDialogError"),
+                    description: formatAxiosError(
+                        error,
+                        t(
+                            "createInternalResourceDialogFailedToCreateInternalResource"
+                        )
+                    ),
+                    variant: "destructive"
+                });
+            }
+        });
+    }
+
+    return (
+        <>
+            <div className="flex items-start justify-between gap-4">
+                <HeaderTitle
+                    title={t(
+                        "createInternalResourceDialogCreateClientResource"
+                    )}
+                    description={t(
+                        "createInternalResourceDialogCreateClientResourceDescription"
+                    )}
+                />
+                <Button variant="outline" asChild>
+                    <Link href={`/${orgId}/settings/resources/private`}>
+                        {t("privateResourceCreatePageSeeAll")}
+                    </Link>
+                </Button>
+            </div>
+
+            <Form {...form}>
+                <form
+                    id="create-private-resource-form"
+                    onSubmit={form.handleSubmit(onSubmit)}
+                    className="space-y-6"
+                >
+                    {/* General */}
+                    <SettingsSection>
+                        <SettingsSectionHeader>
+                            <SettingsSectionTitle>
+                                {t("resourceCreateGeneral")}
+                            </SettingsSectionTitle>
+                            <SettingsSectionDescription>
+                                {t("resourceCreateGeneralDescription")}
+                            </SettingsSectionDescription>
+                        </SettingsSectionHeader>
+                        <SettingsSectionBody>
+                            <SettingsSectionForm variant="half">
+                                <SettingsFormGrid>
+                                    <SettingsFormCell span="half">
+                                        <FormField
+                                            control={form.control}
+                                            name="name"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t("name")}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input {...field} />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                    <FormDescription>
+                                                        {t(
+                                                            "resourceNameDescription"
+                                                        )}
+                                                    </FormDescription>
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </SettingsFormCell>
+
+                                    <SettingsFormCell span="full">
+                                        <FormField
+                                            control={form.control}
+                                            name="mode"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t("type")}
+                                                    </FormLabel>
+                                                    <OptionSelect<PrivateResourceMode>
+                                                        options={modeOptions}
+                                                        value={field.value}
+                                                        onChange={(newMode) => {
+                                                            field.onChange(
+                                                                newMode
+                                                            );
+                                                            if (
+                                                                newMode ===
+                                                                "ssh"
+                                                            ) {
+                                                                form.setValue(
+                                                                    "authDaemonMode",
+                                                                    "native"
+                                                                );
+                                                                form.setValue(
+                                                                    "standardDaemonLocation",
+                                                                    "site"
+                                                                );
+                                                                form.setValue(
+                                                                    "destination",
+                                                                    null
+                                                                );
+                                                                form.setValue(
+                                                                    "destinationPort",
+                                                                    null
+                                                                );
+                                                            } else if (
+                                                                newMode ===
+                                                                "http"
+                                                            ) {
+                                                                form.setValue(
+                                                                    "destinationPort",
+                                                                    443
+                                                                );
+                                                            } else {
+                                                                form.setValue(
+                                                                    "destinationPort",
+                                                                    null
+                                                                );
+                                                            }
+                                                        }}
+                                                        cols={4}
+                                                    />
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </SettingsFormCell>
+
+                                    {mode === "http" && (
+                                        <SettingsFormCell span="full">
+                                            <FormItem>
+                                                <DomainPicker
+                                                    orgId={orgId}
+                                                    cols={2}
+                                                    hideFreeDomain
+                                                    onDomainChange={(res) => {
+                                                        if (!res) {
+                                                            form.setValue(
+                                                                "httpConfigSubdomain",
+                                                                null
+                                                            );
+                                                            form.setValue(
+                                                                "httpConfigDomainId",
+                                                                null
+                                                            );
+                                                            form.setValue(
+                                                                "httpConfigFullDomain",
+                                                                null
+                                                            );
+                                                            return;
+                                                        }
+                                                        form.setValue(
+                                                            "httpConfigSubdomain",
+                                                            res.subdomain ??
+                                                                null
+                                                        );
+                                                        form.setValue(
+                                                            "httpConfigDomainId",
+                                                            res.domainId
+                                                        );
+                                                        form.setValue(
+                                                            "httpConfigFullDomain",
+                                                            res.fullDomain
+                                                        );
+                                                    }}
+                                                />
+                                                <FormMessage />
+                                                <FormDescription>
+                                                    {t(
+                                                        "resourceDomainDescription"
+                                                    )}
+                                                </FormDescription>
+                                            </FormItem>
+                                        </SettingsFormCell>
+                                    )}
+
+                                    {(mode === "host" ||
+                                        (mode === "ssh" && !isNativeSsh)) && (
+                                        <SettingsFormCell span="half">
+                                            <PrivateResourceAliasField
+                                                control={asAnyControl(
+                                                    form.control
+                                                )}
+                                                watch={asAnyWatch(form.watch)}
+                                                labelPrefix="create"
+                                                disabled={
+                                                    mode === "ssh" &&
+                                                    sshSectionDisabled
+                                                }
+                                            />
+                                        </SettingsFormCell>
+                                    )}
+                                </SettingsFormGrid>
+                            </SettingsSectionForm>
+                        </SettingsSectionBody>
+                    </SettingsSection>
+
+                    {/* Host destination */}
+                    {mode === "host" && (
+                        <SettingsSection>
+                            <SettingsSectionHeader>
+                                <SettingsSectionTitle>
+                                    {t("hostSettings")}
+                                </SettingsSectionTitle>
+                                <SettingsSectionDescription>
+                                    {t(
+                                        "editInternalResourceDialogDestinationDescription"
+                                    )}
+                                </SettingsSectionDescription>
+                            </SettingsSectionHeader>
+                            <SettingsSectionBody>
+                                <SettingsSectionForm variant="half">
+                                    <SettingsFormGrid>
+                                        <SettingsFormCell span="half">
+                                            <PrivateResourceSitesField
+                                                control={form.control}
+                                                orgId={orgId}
+                                                selectedSites={selectedSites}
+                                                onSelectedSitesChange={
+                                                    setSelectedSites
+                                                }
+                                            />
+                                        </SettingsFormCell>
+                                        <SettingsFormCell span="half">
+                                            <PrivateResourceHostDestinationFields
+                                                control={asAnyControl(
+                                                    form.control
+                                                )}
+                                                watch={asAnyWatch(form.watch)}
+                                                labelPrefix="create"
+                                                hideAlias
+                                            />
+                                        </SettingsFormCell>
+                                        <SettingsFormCell span="full">
+                                            <PrivateResourcePortRanges
+                                                control={asAnyControl(
+                                                    form.control
+                                                )}
+                                                setValue={asAnySetValue(
+                                                    form.setValue
+                                                )}
+                                            />
+                                        </SettingsFormCell>
+                                    </SettingsFormGrid>
+                                </SettingsSectionForm>
+                            </SettingsSectionBody>
+                        </SettingsSection>
+                    )}
+
+                    {/* CIDR destination */}
+                    {mode === "cidr" && (
+                        <SettingsSection>
+                            <SettingsSectionHeader>
+                                <SettingsSectionTitle>
+                                    {t("cidrSettings")}
+                                </SettingsSectionTitle>
+                                <SettingsSectionDescription>
+                                    {t(
+                                        "editInternalResourceDialogDestinationCidrDescription"
+                                    )}
+                                </SettingsSectionDescription>
+                            </SettingsSectionHeader>
+                            <SettingsSectionBody>
+                                <SettingsSectionForm variant="half">
+                                    <SettingsFormGrid>
+                                        <SettingsFormCell span="half">
+                                            <PrivateResourceSitesField
+                                                control={form.control}
+                                                orgId={orgId}
+                                                selectedSites={selectedSites}
+                                                onSelectedSitesChange={
+                                                    setSelectedSites
+                                                }
+                                            />
+                                        </SettingsFormCell>
+                                        <SettingsFormCell span="half">
+                                            <PrivateResourceCidrDestinationField
+                                                control={asAnyControl(
+                                                    form.control
+                                                )}
+                                                labelPrefix="create"
+                                            />
+                                        </SettingsFormCell>
+                                        <SettingsFormCell span="full">
+                                            <PrivateResourcePortRanges
+                                                control={asAnyControl(
+                                                    form.control
+                                                )}
+                                                setValue={asAnySetValue(
+                                                    form.setValue
+                                                )}
+                                            />
+                                        </SettingsFormCell>
+                                    </SettingsFormGrid>
+                                </SettingsSectionForm>
+                            </SettingsSectionBody>
+                        </SettingsSection>
+                    )}
+
+                    {/* HTTP configuration */}
+                    {mode === "http" && (
+                        <SettingsSection>
+                            <PaidFeaturesAlert
+                                tiers={tierMatrix.advancedPrivateResources}
+                            />
+                            <SettingsSectionHeader>
+                                <SettingsSectionTitle>
+                                    {t("httpSettings")}
+                                </SettingsSectionTitle>
+                                <SettingsSectionDescription>
+                                    {t(
+                                        "editInternalResourceDialogHttpConfigurationDescription"
+                                    )}
+                                </SettingsSectionDescription>
+                            </SettingsSectionHeader>
+                            <fieldset
+                                disabled={httpSectionDisabled}
+                                className={
+                                    httpSectionDisabled
+                                        ? "opacity-50 pointer-events-none"
+                                        : ""
+                                }
+                            >
+                                <SettingsSectionBody>
+                                    <SettingsSectionForm variant="half">
+                                        <SettingsFormGrid>
+                                            <SettingsFormCell span="half">
+                                                <PrivateResourceSitesField
+                                                    control={form.control}
+                                                    orgId={orgId}
+                                                    selectedSites={
+                                                        selectedSites
+                                                    }
+                                                    onSelectedSitesChange={
+                                                        setSelectedSites
+                                                    }
+                                                />
+                                            </SettingsFormCell>
+                                            <SettingsFormCell span="full">
+                                                <PrivateResourceHttpFields
+                                                    control={asAnyControl(
+                                                        form.control
+                                                    )}
+                                                    setValue={asAnySetValue(
+                                                        form.setValue
+                                                    )}
+                                                    orgId={orgId}
+                                                    watch={asAnyWatch(
+                                                        form.watch
+                                                    )}
+                                                    disabled={
+                                                        httpSectionDisabled
+                                                    }
+                                                    labelPrefix="create"
+                                                    hideDomainPicker
+                                                    hidePaidFeaturesAlert
+                                                />
+                                            </SettingsFormCell>
+                                        </SettingsFormGrid>
+                                    </SettingsSectionForm>
+                                </SettingsSectionBody>
+                            </fieldset>
+                        </SettingsSection>
+                    )}
+
+                    {/* SSH server */}
+                    {mode === "ssh" && (
+                        <SettingsSection>
+                            <PaidFeaturesAlert
+                                tiers={tierMatrix.advancedPrivateResources}
+                            />
+                            <SettingsSectionHeader>
+                                <SettingsSectionTitle>
+                                    {t("sshServer")}
+                                </SettingsSectionTitle>
+                                <SettingsSectionDescription>
+                                    {t("sshServerDescription")}
+                                </SettingsSectionDescription>
+                            </SettingsSectionHeader>
+                            <fieldset
+                                disabled={sshSectionDisabled}
+                                className={
+                                    sshSectionDisabled
+                                        ? "opacity-50 pointer-events-none"
+                                        : ""
+                                }
+                            >
+                                <SettingsSectionBody>
+                                    <SettingsSectionForm variant="half">
+                                        <PrivateResourceSshFields
+                                            control={asAnyControl(form.control)}
+                                            setValue={asAnySetValue(
+                                                form.setValue
+                                            )}
+                                            watch={asAnyWatch(form.watch)}
+                                            orgId={orgId}
+                                            disabled={sshSectionDisabled}
+                                            selectedSites={selectedSites}
+                                            onSelectedSitesChange={
+                                                setSelectedSites
+                                            }
+                                            labelPrefix="create"
+                                            showSshSettings={true}
+                                            layout="wizard"
+                                            showPaidFeaturesAlert={false}
+                                            hideAlias
+                                        />
+                                    </SettingsSectionForm>
+                                </SettingsSectionBody>
+                            </fieldset>
+                        </SettingsSection>
+                    )}
+
+                    <div className="flex justify-end space-x-2 mt-8">
+                        <Button
+                            type="button"
+                            variant="outline"
+                            onClick={() =>
+                                router.push(
+                                    `/${orgId}/settings/resources/private`
+                                )
+                            }
+                            disabled={isSubmitting}
+                        >
+                            {t("createInternalResourceDialogCancel")}
+                        </Button>
+                        <Button
+                            type="submit"
+                            form="create-private-resource-form"
+                            disabled={submitDisabled}
+                            loading={isSubmitting}
+                        >
+                            {t("createInternalResourceDialogCreateResource")}
+                        </Button>
+                    </div>
+                </form>
+            </Form>
+        </>
+    );
+}

src/app/[orgId]/settings/resources/private/formControlUtils.ts

@@ -0,0 +1,24 @@
+import type {
+    Control,
+    FieldValues,
+    UseFormSetValue,
+    UseFormWatch
+} from "react-hook-form";
+
+export function asAnyControl<T extends FieldValues>(
+    control: Control<T>
+): Control<any> {
+    return control as Control<any>;
+}
+
+export function asAnySetValue<T extends FieldValues>(
+    setValue: UseFormSetValue<T>
+): UseFormSetValue<any> {
+    return setValue as UseFormSetValue<any>;
+}
+
+export function asAnyWatch<T extends FieldValues>(
+    watch: UseFormWatch<T>
+): UseFormWatch<any> {
+    return watch as UseFormWatch<any>;
+}

src/app/[orgId]/settings/resources/private/page.tsx

@@ -1,18 +1,15 @@
-import type { InternalResourceRow } from "@app/components/ClientResourcesTable";
-import ClientResourcesTable from "@app/components/ClientResourcesTable";
-import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import PrivateResourcesBanner from "@app/components/PrivateResourcesBanner";
+import type { InternalResourceRow } from "@app/components/PrivateResourcesTable";
+import PrivateResourcesTable from "@app/components/PrivateResourcesTable";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { getCachedOrg } from "@app/lib/api/getCachedOrg";
 import OrgProvider from "@app/providers/OrgProvider";
-import type { ListResourcesResponse } from "@server/routers/resource";
-import { GetSiteResponse } from "@server/routers/site/getSite";
 import type { ListAllSiteResourcesByOrgResponse } from "@server/routers/siteResource";
-import type ResponseT from "@server/types/Response";
 import type { AxiosResponse } from "axios";
-import { getTranslations } from "next-intl/server";
 import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 
 export const metadata: Metadata = {
@@ -24,13 +21,6 @@ export interface ClientResourcesPageProps {
     searchParams: Promise<Record<string, string>>;
 }
 
-function parsePositiveInt(s: string | undefined): number | undefined {
-    if (!s) return undefined;
-    const n = Number(s);
-    if (!Number.isInteger(n) || n <= 0) return undefined;
-    return n;
-}
-
 export default async function ClientResourcesPage(
     props: ClientResourcesPageProps
 ) {
@@ -39,7 +29,7 @@ export default async function ClientResourcesPage(
     const searchParams = new URLSearchParams(await props.searchParams);
 
     let siteResources: ListAllSiteResourcesByOrgResponse["siteResources"] = [];
-    let pagination: ListResourcesResponse["pagination"] = {
+    let pagination: ListAllSiteResourcesByOrgResponse["pagination"] = {
         total: 0,
         page: 1,
         pageSize: 20
@@ -56,32 +46,6 @@ export default async function ClientResourcesPage(
         pagination = responseData.pagination;
     } catch (e) {}
 
-    const siteIdParam = parsePositiveInt(searchParams.get("siteId") ?? undefined);
-
-    let initialFilterSite: {
-        siteId: number;
-        name: string;
-        type: string;
-    } | null = null;
-    if (siteIdParam) {
-        try {
-            const siteRes = await internal.get(
-                `/site/${siteIdParam}`,
-                await authCookieHeader()
-            );
-            const s = (siteRes.data as ResponseT<GetSiteResponse>).data;
-            if (s && s.orgId === params.orgId) {
-                initialFilterSite = {
-                    siteId: s.siteId,
-                    name: s.name,
-                    type: s.type
-                };
-            }
-        } catch {
-            // leave null
-        }
-    }
-
     let org = null;
     try {
         const res = await getCachedOrg(params.orgId);
@@ -115,19 +79,22 @@ export default async function ClientResourcesPage(
                 // proxyPort: siteResource.proxyPort,
                 siteIds: siteResource.siteIds,
                 destination: siteResource.destination,
-                httpHttpsPort: siteResource.destinationPort ?? null,
+                destinationPort: siteResource.destinationPort ?? null,
                 alias: siteResource.alias || null,
                 aliasAddress: siteResource.aliasAddress || null,
                 siteNiceIds: siteResource.siteNiceIds,
                 niceId: siteResource.niceId,
+                enabled: siteResource.enabled,
                 tcpPortRangeString: siteResource.tcpPortRangeString || null,
                 udpPortRangeString: siteResource.udpPortRangeString || null,
                 disableIcmp: siteResource.disableIcmp || false,
                 authDaemonMode: siteResource.authDaemonMode ?? null,
                 authDaemonPort: siteResource.authDaemonPort ?? null,
+                pamMode: siteResource.pamMode ?? null,
                 subdomain: siteResource.subdomain ?? null,
                 domainId: siteResource.domainId ?? null,
-                fullDomain: siteResource.fullDomain ?? null
+                fullDomain: siteResource.fullDomain ?? null,
+                labels: siteResource.labels ?? []
             };
         }
     );
@@ -141,7 +108,7 @@ export default async function ClientResourcesPage(
             <PrivateResourcesBanner orgId={params.orgId} />
 
             <OrgProvider org={org}>
-                <ClientResourcesTable
+                <PrivateResourcesTable
                     internalResources={internalResourceRows}
                     orgId={params.orgId}
                     rowCount={pagination.total}
@@ -149,7 +116,6 @@ export default async function ClientResourcesPage(
                         pageIndex: pagination.page - 1,
                         pageSize: pagination.pageSize
                     }}
-                    initialFilterSite={initialFilterSite}
                 />
             </OrgProvider>
         </>

src/app/[orgId]/settings/resources/private/privateResourceUtils.ts

@@ -0,0 +1,36 @@
+"use client";
+
+import type { Selectedsite } from "@app/components/site-selector";
+import type { SiteResourceData } from "@app/lib/privateResourceForm";
+
+export function buildSelectedSitesForResource(
+    resource: Pick<SiteResourceData, "siteIds" | "siteNames">
+): Selectedsite[] {
+    return resource.siteIds.map((siteId, idx) => ({
+        name: resource.siteNames[idx] ?? "",
+        siteId,
+        type: "newt" as const
+    }));
+}
+
+export function getSshSingleSiteMode(
+    authDaemonMode?: string | null,
+    pamMode?: string | null
+): boolean {
+    return (
+        authDaemonMode === "native" ||
+        (pamMode === "push" && authDaemonMode === "site")
+    );
+}
+
+export function getSshUseMultiSiteTargetForm(
+    isNative: boolean,
+    authDaemonMode?: string | null,
+    pamMode?: string | null
+): boolean {
+    if (isNative) {
+        return false;
+    }
+
+    return authDaemonMode !== "site" || pamMode === "passthrough";
+}

src/app/[orgId]/settings/resources/private/useSaveSiteResource.ts

@@ -0,0 +1,106 @@
+"use client";
+
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useSiteResourceContext } from "@app/hooks/useSiteResourceContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { getPrivateResourceSettingsHref } from "@app/lib/launcherResourceAdminHref";
+import {
+    buildUpdateSiteResourcePayload,
+    mergeFormValuesWithResource,
+    type PrivateResourceFormValues
+} from "@app/lib/privateResourceForm";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+
+export function useSaveSiteResource() {
+    const t = useTranslations();
+    const router = useRouter();
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
+    const { siteResource, updateSiteResource, access } =
+        useSiteResourceContext();
+
+    async function save(
+        partial: Partial<PrivateResourceFormValues>,
+        options?: { successMessage?: string }
+    ) {
+        const merged = mergeFormValuesWithResource(siteResource, partial);
+        const isNativeSsh =
+            merged.mode === "ssh" && merged.authDaemonMode === "native";
+        const trimmedDestination = merged.destination?.trim();
+
+        const payload = buildUpdateSiteResourcePayload(
+            {
+                ...merged,
+                destination: isNativeSsh
+                    ? null
+                    : trimmedDestination && trimmedDestination.length > 0
+                      ? trimmedDestination
+                      : null
+            },
+            access
+        );
+
+        try {
+            await api.post(`/site-resource/${siteResource.id}`, payload);
+
+            updateSiteResource({
+                name: merged.name,
+                niceId: merged.niceId ?? siteResource.niceId,
+                enabled: merged.enabled ?? siteResource.enabled,
+                siteIds: merged.siteIds,
+                mode: merged.mode,
+                destination: merged.destination ?? null,
+                alias: merged.alias ?? null,
+                destinationPort: merged.destinationPort ?? null,
+                scheme: merged.scheme ?? siteResource.scheme,
+                ssl: merged.ssl ?? siteResource.ssl,
+                subdomain: merged.httpConfigSubdomain ?? null,
+                domainId: merged.httpConfigDomainId ?? null,
+                fullDomain: merged.httpConfigFullDomain ?? null,
+                tcpPortRangeString: merged.tcpPortRangeString ?? null,
+                udpPortRangeString: merged.udpPortRangeString ?? null,
+                disableIcmp: merged.disableIcmp ?? false,
+                authDaemonMode: merged.authDaemonMode ?? null,
+                authDaemonPort: merged.authDaemonPort ?? null,
+                pamMode: merged.pamMode ?? null
+            });
+
+            toast({
+                title: t("editInternalResourceDialogSuccess"),
+                description:
+                    options?.successMessage ??
+                    t(
+                        "editInternalResourceDialogInternalResourceUpdatedSuccessfully"
+                    )
+            });
+
+            if (merged.niceId && merged.niceId !== siteResource.niceId) {
+                router.replace(
+                    getPrivateResourceSettingsHref(
+                        siteResource.orgId,
+                        merged.niceId
+                    )
+                );
+            }
+
+            router.refresh();
+            return true;
+        } catch (error) {
+            toast({
+                title: t("editInternalResourceDialogError"),
+                description: formatAxiosError(
+                    error,
+                    t(
+                        "editInternalResourceDialogFailedToUpdateInternalResource"
+                    )
+                ),
+                variant: "destructive"
+            });
+            return false;
+        }
+    }
+
+    return { save, siteResource, access };
+}

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

@@ -1,958 +0,0 @@
-"use client";
-
-import { RolesSelector } from "@app/components/roles-selector";
-import SetResourceHeaderAuthForm from "@app/components/SetResourceHeaderAuthForm";
-import SetResourcePincodeForm from "@app/components/SetResourcePincodeForm";
-import {
-    SettingsContainer,
-    SettingsSection,
-    SettingsSectionBody,
-    SettingsSectionDescription,
-    SettingsSectionFooter,
-    SettingsSectionForm,
-    SettingsSectionHeader,
-    SettingsSectionTitle
-} from "@app/components/Settings";
-import { SwitchInput } from "@app/components/SwitchInput";
-import { Tag, TagInput } from "@app/components/tags/tag-input";
-import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
-import { Button } from "@app/components/ui/button";
-import {
-    Form,
-    FormControl,
-    FormDescription,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage
-} from "@app/components/ui/form";
-import { InfoPopup } from "@app/components/ui/info-popup";
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue
-} from "@app/components/ui/select";
-import { UsersSelector } from "@app/components/users-selector";
-import type { ResourceContextType } from "@app/contexts/resourceContext";
-import { useEnvContext } from "@app/hooks/useEnvContext";
-import { useOrgContext } from "@app/hooks/useOrgContext";
-import { usePaidStatus } from "@app/hooks/usePaidStatus";
-import { useResourceContext } from "@app/hooks/useResourceContext";
-import { toast } from "@app/hooks/useToast";
-import { createApiClient, formatAxiosError } from "@app/lib/api";
-import { getUserDisplayName } from "@app/lib/getUserDisplayName";
-import { orgQueries, resourceQueries } from "@app/lib/queries";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { build } from "@server/build";
-import { tierMatrix } from "@server/lib/billing/tierMatrix";
-import { UserType } from "@server/types/UserTypes";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import SetResourcePasswordForm from "@app/components/SetResourcePasswordForm";
-import { Binary, Bot, InfoIcon, Key } from "lucide-react";
-import { useTranslations } from "next-intl";
-import { useRouter } from "next/navigation";
-import {
-    useActionState,
-    useEffect,
-    useMemo,
-    useRef,
-    useState,
-    useTransition
-} from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-const UsersRolesFormSchema = z.object({
-    roles: z.array(
-        z.object({
-            id: z.string(),
-            text: z.string()
-        })
-    ),
-    users: z.array(
-        z.object({
-            id: z.string(),
-            text: z.string()
-        })
-    )
-});
-
-const whitelistSchema = z.object({
-    emails: z.array(
-        z.object({
-            id: z.string(),
-            text: z.string()
-        })
-    )
-});
-
-export default function ResourceAuthenticationPage() {
-    const { org } = useOrgContext();
-    const { resource, updateResource, authInfo, updateAuthInfo } =
-        useResourceContext();
-
-    const { env } = useEnvContext();
-
-    const api = createApiClient({ env });
-    const router = useRouter();
-    const t = useTranslations();
-
-    const { isPaidUser } = usePaidStatus();
-
-    const queryClient = useQueryClient();
-    const { data: resourceRoles = [], isLoading: isLoadingResourceRoles } =
-        useQuery(
-            resourceQueries.resourceRoles({
-                resourceId: resource.resourceId
-            })
-        );
-    const { data: resourceUsers = [], isLoading: isLoadingResourceUsers } =
-        useQuery(
-            resourceQueries.resourceUsers({
-                resourceId: resource.resourceId
-            })
-        );
-
-    const { data: whitelist = [], isLoading: isLoadingWhiteList } = useQuery(
-        resourceQueries.resourceWhitelist({
-            resourceId: resource.resourceId
-        })
-    );
-
-    const { data: orgRoles = [], isLoading: isLoadingOrgRoles } = useQuery(
-        orgQueries.roles({
-            orgId: org.org.orgId
-        })
-    );
-    const { data: orgUsers = [], isLoading: isLoadingOrgUsers } = useQuery(
-        orgQueries.users({
-            orgId: org.org.orgId
-        })
-    );
-    const { data: orgIdps = [], isLoading: isLoadingOrgIdps } = useQuery({
-        ...orgQueries.identityProviders({
-            orgId: org.org.orgId,
-            useOrgOnlyIdp: env.app.identityProviderMode === "org"
-        })
-    });
-
-    const pageLoading =
-        isLoadingOrgRoles ||
-        isLoadingOrgUsers ||
-        isLoadingResourceRoles ||
-        isLoadingResourceUsers ||
-        isLoadingWhiteList ||
-        isLoadingOrgIdps;
-
-    const allRoles = useMemo(() => {
-        return orgRoles
-            .map((role) => ({
-                id: role.roleId.toString(),
-                text: role.name
-            }))
-            .filter((role) => role.text !== "Admin");
-    }, [orgRoles]);
-
-    const allUsers = useMemo(() => {
-        return orgUsers.map((user) => ({
-            id: user.id.toString(),
-            text: `${getUserDisplayName({
-                email: user.email,
-                username: user.username
-            })}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
-        }));
-    }, [orgUsers]);
-
-    const allIdps = useMemo(() => {
-        if (build === "saas") {
-            if (isPaidUser(tierMatrix.orgOidc)) {
-                return orgIdps.map((idp) => ({
-                    id: idp.idpId,
-                    text: idp.name
-                }));
-            }
-        } else {
-            return orgIdps.map((idp) => ({
-                id: idp.idpId,
-                text: idp.name
-            }));
-        }
-        return [];
-    }, [orgIdps]);
-
-    const [ssoEnabled, setSsoEnabled] = useState(resource.sso ?? false);
-
-    useEffect(() => {
-        setSsoEnabled(resource.sso ?? false);
-    }, [resource.sso]);
-
-    const [selectedIdpId, setSelectedIdpId] = useState<number | null>(
-        resource.skipToIdpId || null
-    );
-
-    const [loadingRemoveResourcePassword, setLoadingRemoveResourcePassword] =
-        useState(false);
-    const [loadingRemoveResourcePincode, setLoadingRemoveResourcePincode] =
-        useState(false);
-    const [
-        loadingRemoveResourceHeaderAuth,
-        setLoadingRemoveResourceHeaderAuth
-    ] = useState(false);
-
-    const [isSetPasswordOpen, setIsSetPasswordOpen] = useState(false);
-    const [isSetPincodeOpen, setIsSetPincodeOpen] = useState(false);
-    const [isSetHeaderAuthOpen, setIsSetHeaderAuthOpen] = useState(false);
-
-    const usersRolesForm = useForm({
-        resolver: zodResolver(UsersRolesFormSchema),
-        defaultValues: { roles: [], users: [] }
-    });
-
-    const whitelistForm = useForm({
-        resolver: zodResolver(whitelistSchema),
-        defaultValues: { emails: [] }
-    });
-
-    const hasInitializedRef = useRef(false);
-
-    useEffect(() => {
-        if (pageLoading || hasInitializedRef.current) return;
-
-        usersRolesForm.setValue(
-            "roles",
-            resourceRoles
-                .map((i) => ({
-                    id: i.roleId.toString(),
-                    text: i.name
-                }))
-                .filter((role) => role.text !== "Admin")
-        );
-        usersRolesForm.setValue(
-            "users",
-            resourceUsers.map((i) => ({
-                id: i.userId.toString(),
-                text: `${getUserDisplayName({
-                    email: i.email,
-                    username: i.username
-                })}${i.type !== UserType.Internal ? ` (${i.idpName})` : ""}`
-            }))
-        );
-
-        whitelistForm.setValue(
-            "emails",
-            whitelist.map((w) => ({
-                id: w.email,
-                text: w.email
-            }))
-        );
-        hasInitializedRef.current = true;
-    }, [pageLoading, resourceRoles, resourceUsers, whitelist, orgIdps]);
-
-    const [, submitUserRolesForm, loadingSaveUsersRoles] = useActionState(
-        onSubmitUsersRoles,
-        null
-    );
-
-    async function onSubmitUsersRoles() {
-        const isValid = usersRolesForm.trigger();
-        if (!isValid) return;
-
-        const data = usersRolesForm.getValues();
-
-        try {
-            const jobs = [
-                api.post(`/resource/${resource.resourceId}/roles`, {
-                    roleIds: data.roles.map((i) => parseInt(i.id))
-                }),
-                api.post(`/resource/${resource.resourceId}/users`, {
-                    userIds: data.users.map((i) => i.id)
-                }),
-                api.post(`/resource/${resource.resourceId}`, {
-                    sso: ssoEnabled,
-                    skipToIdpId: selectedIdpId
-                })
-            ];
-
-            await Promise.all(jobs);
-
-            updateResource({
-                sso: ssoEnabled,
-                skipToIdpId: selectedIdpId
-            });
-
-            updateAuthInfo({
-                sso: ssoEnabled
-            });
-
-            toast({
-                title: t("resourceAuthSettingsSave"),
-                description: t("resourceAuthSettingsSaveDescription")
-            });
-            // invalidate resource queries
-            await queryClient.invalidateQueries(
-                resourceQueries.resourceUsers({
-                    resourceId: resource.resourceId
-                })
-            );
-            await queryClient.invalidateQueries(
-                resourceQueries.resourceRoles({
-                    resourceId: resource.resourceId
-                })
-            );
-
-            router.refresh();
-        } catch (e) {
-            console.error(e);
-            toast({
-                variant: "destructive",
-                title: t("resourceErrorUsersRolesSave"),
-                description: formatAxiosError(
-                    e,
-                    t("resourceErrorUsersRolesSaveDescription")
-                )
-            });
-        }
-    }
-
-    function removeResourcePassword() {
-        setLoadingRemoveResourcePassword(true);
-
-        api.post(`/resource/${resource.resourceId}/password`, {
-            password: null
-        })
-            .then(() => {
-                toast({
-                    title: t("resourcePasswordRemove"),
-                    description: t("resourcePasswordRemoveDescription")
-                });
-
-                updateAuthInfo({
-                    password: false
-                });
-                router.refresh();
-            })
-            .catch((e) => {
-                toast({
-                    variant: "destructive",
-                    title: t("resourceErrorPasswordRemove"),
-                    description: formatAxiosError(
-                        e,
-                        t("resourceErrorPasswordRemoveDescription")
-                    )
-                });
-            })
-            .finally(() => setLoadingRemoveResourcePassword(false));
-    }
-
-    function removeResourcePincode() {
-        setLoadingRemoveResourcePincode(true);
-
-        api.post(`/resource/${resource.resourceId}/pincode`, {
-            pincode: null
-        })
-            .then(() => {
-                toast({
-                    title: t("resourcePincodeRemove"),
-                    description: t("resourcePincodeRemoveDescription")
-                });
-
-                updateAuthInfo({
-                    pincode: false
-                });
-                router.refresh();
-            })
-            .catch((e) => {
-                toast({
-                    variant: "destructive",
-                    title: t("resourceErrorPincodeRemove"),
-                    description: formatAxiosError(
-                        e,
-                        t("resourceErrorPincodeRemoveDescription")
-                    )
-                });
-            })
-            .finally(() => setLoadingRemoveResourcePincode(false));
-    }
-
-    function removeResourceHeaderAuth() {
-        setLoadingRemoveResourceHeaderAuth(true);
-
-        api.post(`/resource/${resource.resourceId}/header-auth`, {
-            user: null,
-            password: null,
-            extendedCompatibility: null
-        })
-            .then(() => {
-                toast({
-                    title: t("resourceHeaderAuthRemove"),
-                    description: t("resourceHeaderAuthRemoveDescription")
-                });
-
-                updateAuthInfo({
-                    headerAuth: false
-                });
-                router.refresh();
-            })
-            .catch((e) => {
-                toast({
-                    variant: "destructive",
-                    title: t("resourceErrorHeaderAuthRemove"),
-                    description: formatAxiosError(
-                        e,
-                        t("resourceErrorHeaderAuthRemoveDescription")
-                    )
-                });
-            })
-            .finally(() => setLoadingRemoveResourceHeaderAuth(false));
-    }
-
-    if (pageLoading) {
-        return <></>;
-    }
-
-    return (
-        <>
-            {isSetPasswordOpen && (
-                <SetResourcePasswordForm
-                    open={isSetPasswordOpen}
-                    setOpen={setIsSetPasswordOpen}
-                    resourceId={resource.resourceId}
-                    onSetPassword={() => {
-                        setIsSetPasswordOpen(false);
-                        updateAuthInfo({
-                            password: true
-                        });
-                    }}
-                />
-            )}
-
-            {isSetPincodeOpen && (
-                <SetResourcePincodeForm
-                    open={isSetPincodeOpen}
-                    setOpen={setIsSetPincodeOpen}
-                    resourceId={resource.resourceId}
-                    onSetPincode={() => {
-                        setIsSetPincodeOpen(false);
-                        updateAuthInfo({
-                            pincode: true
-                        });
-                    }}
-                />
-            )}
-
-            {isSetHeaderAuthOpen && (
-                <SetResourceHeaderAuthForm
-                    open={isSetHeaderAuthOpen}
-                    setOpen={setIsSetHeaderAuthOpen}
-                    resourceId={resource.resourceId}
-                    onSetHeaderAuth={() => {
-                        setIsSetHeaderAuthOpen(false);
-                        updateAuthInfo({
-                            headerAuth: true
-                        });
-                    }}
-                />
-            )}
-
-            <SettingsContainer>
-                <SettingsSection>
-                    <SettingsSectionHeader>
-                        <SettingsSectionTitle>
-                            {t("resourceUsersRoles")}
-                        </SettingsSectionTitle>
-                        <SettingsSectionDescription>
-                            {t("resourceUsersRolesDescription")}
-                        </SettingsSectionDescription>
-                    </SettingsSectionHeader>
-                    <SettingsSectionBody>
-                        <SettingsSectionForm>
-                            <SwitchInput
-                                id="sso-toggle"
-                                label={t("ssoUse")}
-                                checked={ssoEnabled}
-                                onCheckedChange={(val) => setSsoEnabled(val)}
-                            />
-
-                            <Form {...usersRolesForm}>
-                                <form
-                                    action={submitUserRolesForm}
-                                    id="users-roles-form"
-                                    className="space-y-4"
-                                >
-                                    {ssoEnabled && (
-                                        <>
-                                            <FormField
-                                                control={usersRolesForm.control}
-                                                name="roles"
-                                                render={({ field }) => (
-                                                    <FormItem className="flex flex-col items-start">
-                                                        <FormLabel>
-                                                            {t("roles")}
-                                                        </FormLabel>
-                                                        <FormControl>
-                                                            <RolesSelector
-                                                                selectedRoles={
-                                                                    field.value ??
-                                                                    []
-                                                                }
-                                                                restrictAdminRole
-                                                                orgId={
-                                                                    org.org
-                                                                        .orgId
-                                                                }
-                                                                onSelectRoles={(
-                                                                    newUsers
-                                                                ) => {
-                                                                    usersRolesForm.setValue(
-                                                                        "roles",
-                                                                        newUsers as [
-                                                                            Tag,
-                                                                            ...Tag[]
-                                                                        ]
-                                                                    );
-                                                                }}
-                                                            />
-                                                        </FormControl>
-                                                        <FormMessage />
-                                                        <FormDescription>
-                                                            {t(
-                                                                "resourceRoleDescription"
-                                                            )}
-                                                        </FormDescription>
-                                                    </FormItem>
-                                                )}
-                                            />
-                                            <FormField
-                                                control={usersRolesForm.control}
-                                                name="users"
-                                                render={({ field }) => (
-                                                    <FormItem className="flex flex-col items-start">
-                                                        <FormLabel>
-                                                            {t("users")}
-                                                        </FormLabel>
-                                                        <FormControl>
-                                                            <UsersSelector
-                                                                selectedUsers={
-                                                                    field.value ??
-                                                                    []
-                                                                }
-                                                                orgId={
-                                                                    org.org
-                                                                        .orgId
-                                                                }
-                                                                onSelectUsers={(
-                                                                    newUsers
-                                                                ) => {
-                                                                    usersRolesForm.setValue(
-                                                                        "users",
-                                                                        newUsers as [
-                                                                            Tag,
-                                                                            ...Tag[]
-                                                                        ]
-                                                                    );
-                                                                }}
-                                                            />
-                                                        </FormControl>
-                                                        <FormMessage />
-                                                    </FormItem>
-                                                )}
-                                            />
-                                        </>
-                                    )}
-
-                                    {ssoEnabled && allIdps.length > 0 && (
-                                        <div className="space-y-2">
-                                            <label className="text-sm font-medium">
-                                                {t("defaultIdentityProvider")}
-                                            </label>
-                                            <Select
-                                                onValueChange={(value) => {
-                                                    if (value === "none") {
-                                                        setSelectedIdpId(null);
-                                                    } else {
-                                                        setSelectedIdpId(
-                                                            parseInt(value)
-                                                        );
-                                                    }
-                                                }}
-                                                value={
-                                                    selectedIdpId
-                                                        ? selectedIdpId.toString()
-                                                        : "none"
-                                                }
-                                            >
-                                                <SelectTrigger className="w-full mt-1">
-                                                    <SelectValue
-                                                        placeholder={t(
-                                                            "selectIdpPlaceholder"
-                                                        )}
-                                                    />
-                                                </SelectTrigger>
-                                                <SelectContent>
-                                                    <SelectItem value="none">
-                                                        {t("none")}
-                                                    </SelectItem>
-                                                    {allIdps.map((idp) => (
-                                                        <SelectItem
-                                                            key={idp.id}
-                                                            value={idp.id.toString()}
-                                                        >
-                                                            {idp.text}
-                                                        </SelectItem>
-                                                    ))}
-                                                </SelectContent>
-                                            </Select>
-                                            <p className="text-sm text-muted-foreground">
-                                                {t(
-                                                    "defaultIdentityProviderDescription"
-                                                )}
-                                            </p>
-                                        </div>
-                                    )}
-                                </form>
-                            </Form>
-                        </SettingsSectionForm>
-                    </SettingsSectionBody>
-                    <SettingsSectionFooter>
-                        <Button
-                            type="submit"
-                            loading={loadingSaveUsersRoles}
-                            disabled={loadingSaveUsersRoles}
-                            form="users-roles-form"
-                        >
-                            {t("resourceUsersRolesSubmit")}
-                        </Button>
-                    </SettingsSectionFooter>
-                </SettingsSection>
-
-                <SettingsSection>
-                    <SettingsSectionHeader>
-                        <SettingsSectionTitle>
-                            {t("resourceAuthMethods")}
-                        </SettingsSectionTitle>
-                        <SettingsSectionDescription>
-                            {t("resourceAuthMethodsDescriptions")}
-                        </SettingsSectionDescription>
-                    </SettingsSectionHeader>
-                    <SettingsSectionBody>
-                        <SettingsSectionForm>
-                            {/* Password Protection */}
-                            <div className="flex items-center justify-between border rounded-md p-2 mb-4">
-                                <div
-                                    className={`flex items-center ${!authInfo.password ? "" : "text-green-500"} text-sm space-x-2`}
-                                >
-                                    <Key size="14" />
-                                    <span>
-                                        {t("resourcePasswordProtection", {
-                                            status: authInfo.password
-                                                ? t("enabled")
-                                                : t("disabled")
-                                        })}
-                                    </span>
-                                </div>
-                                <Button
-                                    variant="secondary"
-                                    size="sm"
-                                    onClick={
-                                        authInfo.password
-                                            ? removeResourcePassword
-                                            : () => setIsSetPasswordOpen(true)
-                                    }
-                                    loading={loadingRemoveResourcePassword}
-                                >
-                                    {authInfo.password
-                                        ? t("passwordRemove")
-                                        : t("passwordAdd")}
-                                </Button>
-                            </div>
-
-                            {/* PIN Code Protection */}
-                            <div className="flex items-center justify-between border rounded-md p-2">
-                                <div
-                                    className={`flex items-center ${!authInfo.pincode ? "" : "text-green-500"} space-x-2 text-sm`}
-                                >
-                                    <Binary size="14" />
-                                    <span>
-                                        {t("resourcePincodeProtection", {
-                                            status: authInfo.pincode
-                                                ? t("enabled")
-                                                : t("disabled")
-                                        })}
-                                    </span>
-                                </div>
-                                <Button
-                                    variant="secondary"
-                                    size="sm"
-                                    onClick={
-                                        authInfo.pincode
-                                            ? removeResourcePincode
-                                            : () => setIsSetPincodeOpen(true)
-                                    }
-                                    loading={loadingRemoveResourcePincode}
-                                >
-                                    {authInfo.pincode
-                                        ? t("pincodeRemove")
-                                        : t("pincodeAdd")}
-                                </Button>
-                            </div>
-
-                            {/* Header Authentication Protection */}
-                            <div className="flex items-center justify-between border rounded-md p-2">
-                                <div
-                                    className={`flex items-center ${!authInfo.headerAuth ? "" : "text-green-500"} space-x-2 text-sm`}
-                                >
-                                    <Bot size="14" />
-                                    <span>
-                                        {authInfo.headerAuth
-                                            ? t(
-                                                  "resourceHeaderAuthProtectionEnabled"
-                                              )
-                                            : t(
-                                                  "resourceHeaderAuthProtectionDisabled"
-                                              )}
-                                    </span>
-                                </div>
-                                <Button
-                                    variant="secondary"
-                                    size="sm"
-                                    onClick={
-                                        authInfo.headerAuth
-                                            ? removeResourceHeaderAuth
-                                            : () => setIsSetHeaderAuthOpen(true)
-                                    }
-                                    loading={loadingRemoveResourceHeaderAuth}
-                                >
-                                    {authInfo.headerAuth
-                                        ? t("headerAuthRemove")
-                                        : t("headerAuthAdd")}
-                                </Button>
-                            </div>
-                        </SettingsSectionForm>
-                    </SettingsSectionBody>
-                </SettingsSection>
-
-                <OneTimePasswordFormSection
-                    resource={resource}
-                    updateResource={updateResource}
-                    whitelist={whitelist}
-                    isLoadingWhiteList={isLoadingWhiteList}
-                />
-            </SettingsContainer>
-        </>
-    );
-}
-
-type OneTimePasswordFormSectionProps = Pick<
-    ResourceContextType,
-    "resource" | "updateResource"
-> & {
-    whitelist: Array<{ email: string }>;
-    isLoadingWhiteList: boolean;
-};
-
-function OneTimePasswordFormSection({
-    resource,
-    updateResource,
-    whitelist,
-    isLoadingWhiteList
-}: OneTimePasswordFormSectionProps) {
-    const { env } = useEnvContext();
-    const [whitelistEnabled, setWhitelistEnabled] = useState(
-        resource.emailWhitelistEnabled ?? false
-    );
-
-    useEffect(() => {
-        setWhitelistEnabled(resource.emailWhitelistEnabled);
-    }, [resource.emailWhitelistEnabled]);
-
-    const queryClient = useQueryClient();
-
-    const [loadingSaveWhitelist, startTransition] = useTransition();
-    const whitelistForm = useForm({
-        resolver: zodResolver(whitelistSchema),
-        defaultValues: { emails: [] }
-    });
-    const api = createApiClient({ env });
-    const router = useRouter();
-    const t = useTranslations();
-
-    const [activeEmailTagIndex, setActiveEmailTagIndex] = useState<
-        number | null
-    >(null);
-
-    useEffect(() => {
-        if (isLoadingWhiteList) return;
-
-        whitelistForm.setValue(
-            "emails",
-            whitelist.map((w) => ({
-                id: w.email,
-                text: w.email
-            }))
-        );
-    }, [isLoadingWhiteList, whitelist, whitelistForm]);
-
-    async function saveWhitelist() {
-        try {
-            await api.post(`/resource/${resource.resourceId}`, {
-                emailWhitelistEnabled: whitelistEnabled
-            });
-
-            if (whitelistEnabled) {
-                await api.post(`/resource/${resource.resourceId}/whitelist`, {
-                    emails: whitelistForm.getValues().emails.map((i) => i.text)
-                });
-            }
-
-            updateResource({
-                emailWhitelistEnabled: whitelistEnabled
-            });
-
-            toast({
-                title: t("resourceWhitelistSave"),
-                description: t("resourceWhitelistSaveDescription")
-            });
-            router.refresh();
-            await queryClient.invalidateQueries(
-                resourceQueries.resourceWhitelist({
-                    resourceId: resource.resourceId
-                })
-            );
-        } catch (e) {
-            console.error(e);
-            toast({
-                variant: "destructive",
-                title: t("resourceErrorWhitelistSave"),
-                description: formatAxiosError(
-                    e,
-                    t("resourceErrorWhitelistSaveDescription")
-                )
-            });
-        }
-    }
-
-    return (
-        <SettingsSection>
-            <SettingsSectionHeader>
-                <SettingsSectionTitle>
-                    {t("otpEmailTitle")}
-                </SettingsSectionTitle>
-                <SettingsSectionDescription>
-                    {t("otpEmailTitleDescription")}
-                </SettingsSectionDescription>
-            </SettingsSectionHeader>
-            <SettingsSectionBody>
-                <SettingsSectionForm>
-                    {!env.email.emailEnabled && (
-                        <Alert variant="neutral" className="mb-4">
-                            <InfoIcon className="h-4 w-4" />
-                            <AlertTitle className="font-semibold">
-                                {t("otpEmailSmtpRequired")}
-                            </AlertTitle>
-                            <AlertDescription>
-                                {t("otpEmailSmtpRequiredDescription")}
-                            </AlertDescription>
-                        </Alert>
-                    )}
-                    <SwitchInput
-                        id="whitelist-toggle"
-                        label={t("otpEmailWhitelist")}
-                        checked={whitelistEnabled}
-                        onCheckedChange={setWhitelistEnabled}
-                        disabled={!env.email.emailEnabled}
-                    />
-
-                    {whitelistEnabled && env.email.emailEnabled && (
-                        <Form {...whitelistForm}>
-                            <form id="whitelist-form">
-                                <FormField
-                                    control={whitelistForm.control}
-                                    name="emails"
-                                    render={({ field }) => (
-                                        <FormItem>
-                                            <FormLabel>
-                                                <InfoPopup
-                                                    text={t(
-                                                        "otpEmailWhitelistList"
-                                                    )}
-                                                    info={t(
-                                                        "otpEmailWhitelistListDescription"
-                                                    )}
-                                                />
-                                            </FormLabel>
-                                            <FormControl>
-                                                {/* @ts-ignore */}
-                                                <TagInput
-                                                    {...field}
-                                                    activeTagIndex={
-                                                        activeEmailTagIndex
-                                                    }
-                                                    size={"sm"}
-                                                    validateTag={(tag) => {
-                                                        return z
-                                                            .email()
-                                                            .or(
-                                                                z
-                                                                    .string()
-                                                                    .regex(
-                                                                        /^\*@[\w.-]+\.[a-zA-Z]{2,}$/,
-                                                                        {
-                                                                            message:
-                                                                                t(
-                                                                                    "otpEmailErrorInvalid"
-                                                                                )
-                                                                        }
-                                                                    )
-                                                            )
-                                                            .safeParse(tag)
-                                                            .success;
-                                                    }}
-                                                    setActiveTagIndex={
-                                                        setActiveEmailTagIndex
-                                                    }
-                                                    placeholder={t(
-                                                        "otpEmailEnter"
-                                                    )}
-                                                    tags={
-                                                        whitelistForm.getValues()
-                                                            .emails
-                                                    }
-                                                    setTags={(newRoles) => {
-                                                        whitelistForm.setValue(
-                                                            "emails",
-                                                            newRoles as [
-                                                                Tag,
-                                                                ...Tag[]
-                                                            ]
-                                                        );
-                                                    }}
-                                                    allowDuplicates={false}
-                                                    sortTags={true}
-                                                />
-                                            </FormControl>
-                                            <FormDescription>
-                                                {t("otpEmailEnterDescription")}
-                                            </FormDescription>
-                                        </FormItem>
-                                    )}
-                                />
-                            </form>
-                        </Form>
-                    )}
-                </SettingsSectionForm>
-            </SettingsSectionBody>
-            <SettingsSectionFooter>
-                <Button
-                    onClick={() => startTransition(saveWhitelist)}
-                    form="whitelist-form"
-                    loading={loadingSaveWhitelist}
-                    disabled={loadingSaveWhitelist}
-                >
-                    {t("otpEmailWhitelistSave")}
-                </Button>
-            </SettingsSectionFooter>
-        </SettingsSection>
-    );
-}

src/app/[orgId]/settings/resources/proxy/[niceId]/general/page.tsx

@@ -1,781 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import {
-    Form,
-    FormControl,
-    FormDescription,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { useResourceContext } from "@app/hooks/useResourceContext";
-import DomainPicker from "@app/components/DomainPicker";
-import {
-    SettingsContainer,
-    SettingsSection,
-    SettingsSectionBody,
-    SettingsSectionDescription,
-    SettingsSectionFooter,
-    SettingsSectionForm,
-    SettingsSectionHeader,
-    SettingsSectionTitle
-} from "@app/components/Settings";
-import { SwitchInput } from "@app/components/SwitchInput";
-import { Label } from "@app/components/ui/label";
-import { useEnvContext } from "@app/hooks/useEnvContext";
-import { toast } from "@app/hooks/useToast";
-import { createApiClient, formatAxiosError } from "@app/lib/api";
-import { finalizeSubdomainSanitize } from "@app/lib/subdomain-utils";
-import { UpdateResourceResponse } from "@server/routers/resource";
-import { AxiosResponse } from "axios";
-import { AlertCircle } from "lucide-react";
-import { useTranslations } from "next-intl";
-import { useParams, useRouter } from "next/navigation";
-import { toASCII, toUnicode } from "punycode";
-import { useActionState, useMemo, useState } from "react";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import z from "zod";
-import { Alert, AlertDescription } from "@app/components/ui/alert";
-import { RadioGroup, RadioGroupItem } from "@app/components/ui/radio-group";
-import {
-    Tooltip,
-    TooltipProvider,
-    TooltipTrigger
-} from "@app/components/ui/tooltip";
-import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
-import { GetResourceResponse } from "@server/routers/resource/getResource";
-import type { ResourceContextType } from "@app/contexts/resourceContext";
-import { usePaidStatus } from "@app/hooks/usePaidStatus";
-import { tierMatrix } from "@server/lib/billing/tierMatrix";
-import UptimeAlertSection from "@app/components/UptimeAlertSection";
-
-type MaintenanceSectionFormProps = {
-    resource: GetResourceResponse;
-    updateResource: ResourceContextType["updateResource"];
-};
-
-function MaintenanceSectionForm({
-    resource,
-    updateResource
-}: MaintenanceSectionFormProps) {
-    const { env } = useEnvContext();
-    const t = useTranslations();
-    const api = createApiClient({ env });
-    const { isPaidUser } = usePaidStatus();
-
-    const MaintenanceFormSchema = z.object({
-        maintenanceModeEnabled: z.boolean().optional(),
-        maintenanceModeType: z.enum(["forced", "automatic"]).optional(),
-        maintenanceTitle: z.string().max(255).optional(),
-        maintenanceMessage: z.string().max(2000).optional(),
-        maintenanceEstimatedTime: z.string().max(100).optional()
-    });
-
-    const maintenanceForm = useForm({
-        resolver: zodResolver(MaintenanceFormSchema),
-        defaultValues: {
-            maintenanceModeEnabled: resource.maintenanceModeEnabled || false,
-            maintenanceModeType: resource.maintenanceModeType || "automatic",
-            maintenanceTitle:
-                resource.maintenanceTitle || "We'll be back soon!",
-            maintenanceMessage:
-                resource.maintenanceMessage ||
-                "We are currently performing scheduled maintenance. Please check back soon.",
-            maintenanceEstimatedTime: resource.maintenanceEstimatedTime || ""
-        },
-        mode: "onChange"
-    });
-
-    const isMaintenanceEnabled = maintenanceForm.watch(
-        "maintenanceModeEnabled"
-    );
-    const maintenanceModeType = maintenanceForm.watch("maintenanceModeType");
-
-    const [, maintenanceFormAction, maintenanceSaveLoading] = useActionState(
-        onMaintenanceSubmit,
-        null
-    );
-
-    async function onMaintenanceSubmit() {
-        const isValid = await maintenanceForm.trigger();
-        if (!isValid) return;
-
-        const data = maintenanceForm.getValues();
-
-        const res = await api
-            .post<AxiosResponse<UpdateResourceResponse>>(
-                `resource/${resource?.resourceId}`,
-                {
-                    maintenanceModeEnabled: data.maintenanceModeEnabled,
-                    maintenanceModeType: data.maintenanceModeType,
-                    maintenanceTitle: data.maintenanceTitle || null,
-                    maintenanceMessage: data.maintenanceMessage || null,
-                    maintenanceEstimatedTime:
-                        data.maintenanceEstimatedTime || null
-                }
-            )
-            .catch((e) => {
-                toast({
-                    variant: "destructive",
-                    title: t("resourceErrorUpdate"),
-                    description: formatAxiosError(
-                        e,
-                        t("resourceErrorUpdateDescription")
-                    )
-                });
-            });
-
-        if (res && res.status === 200) {
-            updateResource({
-                maintenanceModeEnabled: data.maintenanceModeEnabled,
-                maintenanceModeType: data.maintenanceModeType,
-                maintenanceTitle: data.maintenanceTitle || null,
-                maintenanceMessage: data.maintenanceMessage || null,
-                maintenanceEstimatedTime: data.maintenanceEstimatedTime || null
-            });
-
-            toast({
-                title: t("resourceUpdated"),
-                description: t("resourceUpdatedDescription")
-            });
-        }
-    }
-
-    if (!resource.http) {
-        return null;
-    }
-
-    return (
-        <SettingsSection>
-            <SettingsSectionHeader>
-                <SettingsSectionTitle>
-                    {t("maintenanceMode")}
-                </SettingsSectionTitle>
-                <SettingsSectionDescription>
-                    {t("maintenanceModeDescription")}
-                </SettingsSectionDescription>
-            </SettingsSectionHeader>
-
-            <SettingsSectionBody>
-                <PaidFeaturesAlert tiers={tierMatrix.maintencePage} />
-                <SettingsSectionForm>
-                    <Form {...maintenanceForm}>
-                        <form
-                            action={maintenanceFormAction}
-                            className="space-y-4"
-                            id="maintenance-settings-form"
-                        >
-                            <FormField
-                                control={maintenanceForm.control}
-                                name="maintenanceModeEnabled"
-                                render={({ field }) => {
-                                    const isDisabled =
-                                        !isPaidUser(tierMatrix.maintencePage) ||
-                                        resource.http === false;
-
-                                    return (
-                                        <FormItem>
-                                            <div className="flex items-center space-x-2">
-                                                <FormControl>
-                                                    <TooltipProvider>
-                                                        <Tooltip>
-                                                            <TooltipTrigger
-                                                                asChild
-                                                            >
-                                                                <div className="flex items-center gap-2">
-                                                                    <SwitchInput
-                                                                        id="enable-maintenance"
-                                                                        checked={
-                                                                            field.value
-                                                                        }
-                                                                        label={t(
-                                                                            "enableMaintenanceMode"
-                                                                        )}
-                                                                        disabled={
-                                                                            isDisabled
-                                                                        }
-                                                                        onCheckedChange={(
-                                                                            val
-                                                                        ) => {
-                                                                            if (
-                                                                                !isDisabled
-                                                                            ) {
-                                                                                maintenanceForm.setValue(
-                                                                                    "maintenanceModeEnabled",
-                                                                                    val
-                                                                                );
-                                                                            }
-                                                                        }}
-                                                                    />
-                                                                </div>
-                                                            </TooltipTrigger>
-                                                        </Tooltip>
-                                                    </TooltipProvider>
-                                                </FormControl>
-                                            </div>
-                                            <FormMessage />
-                                        </FormItem>
-                                    );
-                                }}
-                            />
-
-                            {isMaintenanceEnabled && (
-                                <div className="space-y-4">
-                                    <FormField
-                                        control={maintenanceForm.control}
-                                        name="maintenanceModeType"
-                                        render={({ field }) => (
-                                            <FormItem className="space-y-3">
-                                                <FormLabel>
-                                                    {t("maintenanceModeType")}
-                                                </FormLabel>
-                                                <FormControl>
-                                                    <RadioGroup
-                                                        onValueChange={
-                                                            field.onChange
-                                                        }
-                                                        defaultValue={
-                                                            field.value
-                                                        }
-                                                        disabled={
-                                                            !isPaidUser(
-                                                                tierMatrix.maintencePage
-                                                            )
-                                                        }
-                                                        className="flex flex-col space-y-1"
-                                                    >
-                                                        <FormItem className="flex items-start space-x-3 space-y-0">
-                                                            <FormControl>
-                                                                <RadioGroupItem value="automatic" />
-                                                            </FormControl>
-                                                            <div className="space-y-1 leading-none">
-                                                                <FormLabel className="font-normal">
-                                                                    <strong>
-                                                                        {t(
-                                                                            "automatic"
-                                                                        )}
-                                                                    </strong>{" "}
-                                                                    (
-                                                                    {t(
-                                                                        "recommended"
-                                                                    )}
-                                                                    )
-                                                                </FormLabel>
-                                                                <FormDescription>
-                                                                    {t(
-                                                                        "automaticModeDescription"
-                                                                    )}
-                                                                </FormDescription>
-                                                            </div>
-                                                        </FormItem>
-                                                        <FormItem className="flex items-start space-x-3 space-y-0">
-                                                            <FormControl>
-                                                                <RadioGroupItem value="forced" />
-                                                            </FormControl>
-                                                            <div className="space-y-1 leading-none">
-                                                                <FormLabel className="font-normal">
-                                                                    <strong>
-                                                                        {t(
-                                                                            "forced"
-                                                                        )}
-                                                                    </strong>
-                                                                </FormLabel>
-                                                                <FormDescription>
-                                                                    {t(
-                                                                        "forcedModeDescription"
-                                                                    )}
-                                                                </FormDescription>
-                                                            </div>
-                                                        </FormItem>
-                                                    </RadioGroup>
-                                                </FormControl>
-                                                <FormMessage />
-                                            </FormItem>
-                                        )}
-                                    />
-
-                                    {maintenanceModeType === "forced" && (
-                                        <Alert variant={"neutral"}>
-                                            <AlertCircle className="h-4 w-4" />
-                                            <AlertDescription>
-                                                {t("forcedeModeWarning")}
-                                            </AlertDescription>
-                                        </Alert>
-                                    )}
-
-                                    <FormField
-                                        control={maintenanceForm.control}
-                                        name="maintenanceTitle"
-                                        render={({ field }) => (
-                                            <FormItem>
-                                                <FormLabel>
-                                                    {t("pageTitle")}
-                                                </FormLabel>
-                                                <FormControl>
-                                                    <Input
-                                                        {...field}
-                                                        disabled={
-                                                            !isPaidUser(
-                                                                tierMatrix.maintencePage
-                                                            )
-                                                        }
-                                                        placeholder="We'll be back soon!"
-                                                    />
-                                                </FormControl>
-                                                <FormDescription>
-                                                    {t("pageTitleDescription")}
-                                                </FormDescription>
-                                                <FormMessage />
-                                            </FormItem>
-                                        )}
-                                    />
-
-                                    <FormField
-                                        control={maintenanceForm.control}
-                                        name="maintenanceMessage"
-                                        render={({ field }) => (
-                                            <FormItem>
-                                                <FormLabel>
-                                                    {t(
-                                                        "maintenancePageMessage"
-                                                    )}
-                                                </FormLabel>
-                                                <FormControl>
-                                                    <Textarea
-                                                        {...field}
-                                                        rows={4}
-                                                        disabled={
-                                                            !isPaidUser(
-                                                                tierMatrix.maintencePage
-                                                            )
-                                                        }
-                                                        placeholder={t(
-                                                            "maintenancePageMessagePlaceholder"
-                                                        )}
-                                                    />
-                                                </FormControl>
-                                                <FormDescription>
-                                                    {t(
-                                                        "maintenancePageMessageDescription"
-                                                    )}
-                                                </FormDescription>
-                                                <FormMessage />
-                                            </FormItem>
-                                        )}
-                                    />
-
-                                    <FormField
-                                        control={maintenanceForm.control}
-                                        name="maintenanceEstimatedTime"
-                                        render={({ field }) => (
-                                            <FormItem>
-                                                <FormLabel>
-                                                    {t(
-                                                        "maintenancePageTimeTitle"
-                                                    )}
-                                                </FormLabel>
-                                                <FormControl>
-                                                    <Input
-                                                        {...field}
-                                                        disabled={
-                                                            !isPaidUser(
-                                                                tierMatrix.maintencePage
-                                                            )
-                                                        }
-                                                        placeholder={t(
-                                                            "maintenanceTime"
-                                                        )}
-                                                    />
-                                                </FormControl>
-                                                <FormDescription>
-                                                    {t(
-                                                        "maintenanceEstimatedTimeDescription"
-                                                    )}
-                                                </FormDescription>
-                                                <FormMessage />
-                                            </FormItem>
-                                        )}
-                                    />
-                                </div>
-                            )}
-                        </form>
-                    </Form>
-                </SettingsSectionForm>
-            </SettingsSectionBody>
-
-            <SettingsSectionFooter>
-                <Button
-                    type="submit"
-                    loading={maintenanceSaveLoading}
-                    disabled={
-                        maintenanceSaveLoading ||
-                        !isPaidUser(tierMatrix.maintencePage)
-                    }
-                    form="maintenance-settings-form"
-                >
-                    {t("saveSettings")}
-                </Button>
-            </SettingsSectionFooter>
-        </SettingsSection>
-    );
-}
-
-export default function GeneralForm() {
-    const params = useParams();
-    const { resource, updateResource } = useResourceContext();
-    const router = useRouter();
-    const t = useTranslations();
-
-    const { env } = useEnvContext();
-
-    const orgId = params.orgId;
-
-    const api = createApiClient({ env });
-
-    const [resourceFullDomain, setResourceFullDomain] = useState(
-        `${resource.ssl ? "https" : "http"}://${toUnicode(resource.fullDomain || "")}`
-    );
-
-    const resourceFullDomainName = useMemo(() => {
-        try {
-            const url = new URL(resourceFullDomain);
-            return url.hostname;
-        } catch {
-            return "";
-        }
-    }, [resourceFullDomain]);
-
-    const GeneralFormSchema = z
-        .object({
-            enabled: z.boolean(),
-            subdomain: z.string().optional(),
-            name: z.string().min(1).max(255),
-            niceId: z.string().min(1).max(255).optional(),
-            domainId: z.string().optional(),
-            proxyPort: z.number().int().min(1).max(65535).optional()
-        })
-        .refine(
-            (data) => {
-                // For non-HTTP resources, proxyPort should be defined
-                if (!resource.http) {
-                    return data.proxyPort !== undefined;
-                }
-                // For HTTP resources, proxyPort should be undefined
-                return data.proxyPort === undefined;
-            },
-            {
-                message: !resource.http
-                    ? "Port number is required for non-HTTP resources"
-                    : "Port number should not be set for HTTP resources",
-                path: ["proxyPort"]
-            }
-        );
-
-    type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
-
-    const form = useForm({
-        resolver: zodResolver(GeneralFormSchema),
-        defaultValues: {
-            enabled: resource.enabled,
-            name: resource.name,
-            niceId: resource.niceId,
-            subdomain: resource.subdomain ? resource.subdomain : undefined,
-            domainId: resource.domainId || undefined,
-            proxyPort: resource.proxyPort || undefined
-        },
-        mode: "onChange"
-    });
-
-    const [, formAction, saveLoading] = useActionState(onSubmit, null);
-
-    async function onSubmit() {
-        const isValid = await form.trigger();
-        if (!isValid) return;
-
-        const data = form.getValues();
-
-        const res = await api
-            .post<AxiosResponse<UpdateResourceResponse>>(
-                `resource/${resource?.resourceId}`,
-                {
-                    enabled: data.enabled,
-                    name: data.name,
-                    niceId: data.niceId,
-                    subdomain: data.subdomain
-                        ? toASCII(finalizeSubdomainSanitize(data.subdomain, true))
-                        : undefined,
-                    domainId: data.domainId,
-                    proxyPort: data.proxyPort
-                }
-            )
-            .catch((e) => {
-                toast({
-                    variant: "destructive",
-                    title: t("resourceErrorUpdate"),
-                    description: formatAxiosError(
-                        e,
-                        t("resourceErrorUpdateDescription")
-                    )
-                });
-            });
-
-        if (res && res.status === 200) {
-            const updated = res.data.data;
-
-            updateResource({
-                enabled: data.enabled,
-                name: data.name,
-                niceId: data.niceId,
-                subdomain: data.subdomain,
-                fullDomain: updated.fullDomain,
-                proxyPort: data.proxyPort,
-                domainId: data.domainId
-            });
-
-            toast({
-                title: t("resourceUpdated"),
-                description: t("resourceUpdatedDescription")
-            });
-
-            if (data.niceId && data.niceId !== resource?.niceId) {
-                router.replace(
-                    `/${updated.orgId}/settings/resources/proxy/${data.niceId}/general`
-                );
-            }
-
-            router.refresh();
-        }
-    }
-
-    return (
-        <>
-            <SettingsContainer>
-                {resource?.resourceId && resource?.orgId && (
-                    <UptimeAlertSection
-                        orgId={resource.orgId}
-                        resourceId={resource.resourceId}
-                        startingName={resource.name}
-                    />
-                )}
-                <SettingsSection>
-                    <SettingsSectionHeader>
-                        <SettingsSectionTitle>
-                            {t("resourceGeneral")}
-                        </SettingsSectionTitle>
-                        <SettingsSectionDescription>
-                            {t("resourceGeneralDescription")}
-                        </SettingsSectionDescription>
-                    </SettingsSectionHeader>
-
-                    <SettingsSectionBody>
-                        <SettingsSectionForm>
-                            <Form {...form}>
-                                <form
-                                    action={formAction}
-                                    className="space-y-4"
-                                    id="general-settings-form"
-                                >
-                                    <FormField
-                                        control={form.control}
-                                        name="name"
-                                        render={({ field }) => (
-                                            <FormItem>
-                                                <FormLabel>
-                                                    {t("name")}
-                                                </FormLabel>
-                                                <FormControl>
-                                                    <Input {...field} />
-                                                </FormControl>
-                                                <FormMessage />
-                                            </FormItem>
-                                        )}
-                                    />
-
-                                    <FormField
-                                        control={form.control}
-                                        name="niceId"
-                                        render={({ field }) => (
-                                            <FormItem>
-                                                <FormLabel>
-                                                    {t("identifier")}
-                                                </FormLabel>
-                                                <FormControl>
-                                                    <Input
-                                                        {...field}
-                                                        placeholder={t(
-                                                            "enterIdentifier"
-                                                        )}
-                                                        className="flex-1"
-                                                    />
-                                                </FormControl>
-                                                <FormMessage />
-                                            </FormItem>
-                                        )}
-                                    />
-
-                                    {!resource.http && (
-                                        <>
-                                            <FormField
-                                                control={form.control}
-                                                name="proxyPort"
-                                                render={({ field }) => (
-                                                    <FormItem>
-                                                        <FormLabel>
-                                                            {t(
-                                                                "resourcePortNumber"
-                                                            )}
-                                                        </FormLabel>
-                                                        <FormControl>
-                                                            <Input
-                                                                type="number"
-                                                                value={
-                                                                    field.value !==
-                                                                    undefined
-                                                                        ? String(
-                                                                              field.value
-                                                                          )
-                                                                        : ""
-                                                                }
-                                                                onChange={(e) =>
-                                                                    field.onChange(
-                                                                        e.target
-                                                                            .value
-                                                                            ? parseInt(
-                                                                                  e
-                                                                                      .target
-                                                                                      .value
-                                                                              )
-                                                                            : undefined
-                                                                    )
-                                                                }
-                                                            />
-                                                        </FormControl>
-                                                        <FormMessage />
-                                                        <FormDescription>
-                                                            {t(
-                                                                "resourcePortNumberDescription"
-                                                            )}
-                                                        </FormDescription>
-                                                    </FormItem>
-                                                )}
-                                            />
-                                        </>
-                                    )}
-
-                                    {resource.http && (
-                                        <div className="space-y-4">
-                                            <div id="resource-domain-picker">
-                                                <DomainPicker
-                                                    allowWildcard={true}
-                                                    key={resource.resourceId}
-                                                    orgId={orgId as string}
-                                                    cols={2}
-                                                    defaultSubdomain={
-                                                        form.watch(
-                                                            "subdomain"
-                                                        ) ?? undefined
-                                                    }
-                                                    defaultDomainId={
-                                                        form.watch(
-                                                            "domainId"
-                                                        ) ?? undefined
-                                                    }
-                                                    defaultFullDomain={
-                                                        resourceFullDomainName ||
-                                                        undefined
-                                                    }
-                                                    onDomainChange={(res) => {
-                                                        if (res === null) {
-                                                            form.setValue(
-                                                                "domainId",
-                                                                undefined
-                                                            );
-                                                            form.setValue(
-                                                                "subdomain",
-                                                                undefined
-                                                            );
-                                                            setResourceFullDomain(
-                                                                `${resource.ssl ? "https" : "http"}://`
-                                                            );
-                                                            return;
-                                                        }
-                                                        form.setValue(
-                                                            "domainId",
-                                                            res.domainId
-                                                        );
-                                                        form.setValue(
-                                                            "subdomain",
-                                                            res.subdomain ??
-                                                                undefined
-                                                        );
-                                                        setResourceFullDomain(
-                                                            `${resource.ssl ? "https" : "http"}://${toUnicode(res.fullDomain)}`
-                                                        );
-                                                    }}
-                                                />
-                                            </div>
-                                        </div>
-                                    )}
-
-                                    <FormField
-                                        control={form.control}
-                                        name="enabled"
-                                        render={() => (
-                                            <FormItem className="col-span-2">
-                                                <div className="flex items-center space-x-2">
-                                                    <FormControl>
-                                                        <SwitchInput
-                                                            id="enable-resource"
-                                                            defaultChecked={
-                                                                resource.enabled
-                                                            }
-                                                            label={t(
-                                                                "resourceEnable"
-                                                            )}
-                                                            onCheckedChange={(
-                                                                val
-                                                            ) =>
-                                                                form.setValue(
-                                                                    "enabled",
-                                                                    val
-                                                                )
-                                                            }
-                                                        />
-                                                    </FormControl>
-                                                </div>
-                                                <FormMessage />
-                                            </FormItem>
-                                        )}
-                                    />
-                                </form>
-                            </Form>
-                        </SettingsSectionForm>
-                    </SettingsSectionBody>
-
-                    <SettingsSectionFooter>
-                        <Button
-                            type="submit"
-                            loading={saveLoading}
-                            disabled={saveLoading}
-                            form="general-settings-form"
-                        >
-                            {t("saveSettings")}
-                        </Button>
-                    </SettingsSectionFooter>
-                </SettingsSection>
-
-                {!env.flags.disableEnterpriseFeatures && (
-                    <MaintenanceSectionForm
-                        resource={resource}
-                        updateResource={updateResource}
-                    />
-                )}
-            </SettingsContainer>
-        </>
-    );
-}

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

@@ -0,0 +1,989 @@
+"use client";
+
+import HealthCheckCredenza from "@/components/HealthCheckCredenza";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import {
+    PathMatchDisplay,
+    PathMatchModal,
+    PathRewriteDisplay,
+    PathRewriteModal
+} from "@app/components/PathMatchRenameModal";
+import {
+    ResourceTargetAddressItem,
+    ResourceTargetSiteItem
+} from "@app/components/resource-target-address-item";
+import {
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { DataTableEmptyState } from "@app/components/ui/data-table-empty-state";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow
+} from "@app/components/ui/table";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger
+} from "@app/components/ui/tooltip";
+import type { ResourceContextType } from "@app/contexts/resourceContext";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient } from "@app/lib/api";
+import { formatAxiosError } from "@app/lib/api/formatAxiosError";
+import { DockerManager, DockerState } from "@app/lib/docker";
+import { orgQueries, resourceQueries } from "@app/lib/queries";
+import { build } from "@server/build";
+import { type GetResourceResponse } from "@server/routers/resource";
+import { CreateTargetResponse } from "@server/routers/target";
+import { ListTargetsResponse } from "@server/routers/target/listTargets";
+import { ArrayElement } from "@server/types/ArrayElement";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    getFilteredRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    useReactTable
+} from "@tanstack/react-table";
+import { AxiosResponse } from "axios";
+import { ExternalLink, Info, Plus } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import {
+    useActionState,
+    useCallback,
+    useEffect,
+    useMemo,
+    useState
+} from "react";
+import { maxSize } from "zod";
+
+export type LocalTarget = Omit<
+    ArrayElement<ListTargetsResponse["targets"]> & {
+        new?: boolean;
+        updated?: boolean;
+        siteType: string | null;
+    },
+    "protocol"
+>;
+
+interface ProxyResourceTargetsFormProps {
+    orgId: string;
+    isHttp: boolean;
+    initialTargets?: LocalTarget[];
+    /** Edit mode: when provided, shows a save button and polls for health status */
+    resource?: GetResourceResponse;
+    updateResource?: ResourceContextType["updateResource"];
+    /** Create mode: called whenever the targets list changes */
+    onChange?: (targets: LocalTarget[]) => void;
+}
+
+export function ProxyResourceTargetsForm({
+    orgId,
+    isHttp,
+    initialTargets = [],
+    resource,
+    updateResource,
+    onChange
+}: ProxyResourceTargetsFormProps) {
+    const t = useTranslations();
+    const api = createApiClient(useEnvContext());
+
+    const [targets, setTargets] = useState<LocalTarget[]>(initialTargets);
+    const [targetsToRemove, setTargetsToRemove] = useState<number[]>([]);
+
+    // Notify parent of changes (create mode)
+    useEffect(() => {
+        onChange?.(targets);
+    }, [targets]);
+
+    // Poll health status only in edit mode
+    const { data: polledTargets } = useQuery({
+        ...resourceQueries.resourceTargets({
+            resourceId: resource?.resourceId ?? 0
+        }),
+        refetchInterval: 10_000,
+        enabled: !!resource
+    });
+
+    useEffect(() => {
+        if (!polledTargets) return;
+        setTargets((prev) =>
+            prev.map((t) => {
+                const fresh = polledTargets.find(
+                    (p) => p.targetId === t.targetId
+                );
+                if (!fresh) return t;
+                return {
+                    ...t,
+                    hcHealth: fresh.hcHealth,
+                    hcEnabled: t.updated ? t.hcEnabled : fresh.hcEnabled
+                };
+            })
+        );
+    }, [polledTargets]);
+
+    const [dockerStates, setDockerStates] = useState<Map<number, DockerState>>(
+        new Map()
+    );
+    const [healthCheckDialogOpen, setHealthCheckDialogOpen] = useState(false);
+    const [selectedTargetForHealthCheck, setSelectedTargetForHealthCheck] =
+        useState<LocalTarget | null>(null);
+
+    const initializeDockerForSite = async (siteId: number) => {
+        if (dockerStates.has(siteId)) {
+            return;
+        }
+        const dockerManager = new DockerManager(api, siteId);
+        const dockerState = await dockerManager.initializeDocker();
+        setDockerStates((prev) => new Map(prev.set(siteId, dockerState)));
+    };
+
+    const refreshContainersForSite = useCallback(
+        async (siteId: number) => {
+            const dockerManager = new DockerManager(api, siteId);
+            const containers = await dockerManager.fetchContainers();
+            setDockerStates((prev) => {
+                const newMap = new Map(prev);
+                const existingState = newMap.get(siteId);
+                if (existingState) {
+                    newMap.set(siteId, { ...existingState, containers });
+                }
+                return newMap;
+            });
+        },
+        [api]
+    );
+
+    const getDockerStateForSite = useCallback(
+        (siteId: number): DockerState => {
+            return (
+                dockerStates.get(siteId) || {
+                    isEnabled: false,
+                    isAvailable: false,
+                    containers: []
+                }
+            );
+        },
+        [dockerStates]
+    );
+
+    const [isAdvancedMode, setIsAdvancedMode] = useState(() => {
+        if (typeof window !== "undefined") {
+            const saved = localStorage.getItem("proxy-advanced-mode");
+            return saved === "true";
+        }
+        return false;
+    });
+
+    const removeTarget = useCallback((targetId: number) => {
+        setTargets((prevTargets) => {
+            const targetToRemove = prevTargets.find(
+                (target) => target.targetId === targetId
+            );
+            if (targetToRemove && !targetToRemove.new) {
+                setTargetsToRemove((prev) => [...prev, targetId]);
+            }
+            return prevTargets.filter((target) => target.targetId !== targetId);
+        });
+    }, []);
+
+    const { data: sites = [] } = useQuery(
+        orgQueries.sites({
+            orgId
+        })
+    );
+
+    const updateTarget = useCallback(
+        (targetId: number, data: Partial<LocalTarget>) => {
+            setTargets((prevTargets) => {
+                return prevTargets.map((target) =>
+                    target.targetId === targetId
+                        ? {
+                              ...target,
+                              ...data,
+                              updated: true
+                          }
+                        : target
+                );
+            });
+        },
+        [sites]
+    );
+
+    const openHealthCheckDialog = useCallback((target: LocalTarget) => {
+        setSelectedTargetForHealthCheck(target);
+        setHealthCheckDialogOpen(true);
+    }, []);
+
+    const columns = useMemo((): ColumnDef<LocalTarget>[] => {
+        const priorityColumn: ColumnDef<LocalTarget> = {
+            id: "priority",
+            header: () => (
+                <div className="flex items-center gap-2 p-3">
+                    {t("priority")}
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger>
+                                <Info className="h-4 w-4 text-muted-foreground" />
+                            </TooltipTrigger>
+                            <TooltipContent className="max-w-xs">
+                                <p>{t("priorityDescription")}</p>
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+                </div>
+            ),
+            cell: ({ row }) => {
+                return (
+                        <Input
+                            type="number"
+                            min="1"
+                            max="1000"
+                            onClick={(e) => e.currentTarget.focus()}
+                            defaultValue={row.original.priority || 100}
+                            className="w-full max-w-20"
+                            onBlur={(e) => {
+                                const value = parseInt(e.target.value, 10);
+                                if (value >= 1 && value <= 1000) {
+                                    updateTarget(row.original.targetId, {
+                                        ...row.original,
+                                        priority: value
+                                    });
+                                }
+                            }}
+                        />
+                );
+            },
+            size: 120,
+            minSize: 100,
+            maxSize: 150
+        };
+
+        const healthCheckColumn: ColumnDef<LocalTarget> = {
+            accessorKey: "healthCheck",
+            header: () => <span className="p-3">{t("healthCheck")}</span>,
+            cell: ({ row }) => {
+                const status = row.original.hcHealth || "unknown";
+
+                const getStatusText = (status: string) => {
+                    switch (status) {
+                        case "healthy":
+                            return t("healthCheckHealthy");
+                        case "unhealthy":
+                            return t("healthCheckUnhealthy");
+                        case "unknown":
+                        default:
+                            return t("healthCheckUnknown");
+                    }
+                };
+
+                return (
+                    <div className="flex items-center justify-center w-full">
+                        {row.original.siteType === "newt" ? (
+                            <Button
+                                variant="outline"
+                                className="flex items-center space-x-2 w-full text-left cursor-pointer"
+                                onClick={() =>
+                                    openHealthCheckDialog(row.original)
+                                }
+                            >
+                                <div
+                                    className={`w-2 h-2 rounded-full ${status === "healthy" ? "bg-green-500" : status === "unhealthy" ? "bg-destructive" : "bg-neutral-500"}`}
+                                ></div>
+                                <span>{getStatusText(status)}</span>
+                            </Button>
+                        ) : (
+                            <span>-</span>
+                        )}
+                    </div>
+                );
+            },
+            size: 200,
+            minSize: 180,
+            maxSize: 250
+        };
+
+        const matchPathColumn: ColumnDef<LocalTarget> = {
+            accessorKey: "path",
+            header: () => <span className="p-3">{t("matchPath")}</span>,
+            cell: ({ row }) => {
+                const hasPathMatch = !!(
+                    row.original.path || row.original.pathMatchType
+                );
+
+                return (
+                    <div className="flex items-center justify-center w-full">
+                        {hasPathMatch ? (
+                            <PathMatchModal
+                                value={{
+                                    path: row.original.path,
+                                    pathMatchType: row.original.pathMatchType
+                                }}
+                                onChange={(config) =>
+                                    updateTarget(
+                                        row.original.targetId,
+                                        config.path === null &&
+                                            config.pathMatchType === null
+                                            ? {
+                                                  ...config,
+                                                  rewritePath: null,
+                                                  rewritePathType: null
+                                              }
+                                            : config
+                                    )
+                                }
+                                trigger={
+                                    <Button
+                                        variant="outline"
+                                        className="flex items-center gap-2 p-2 w-full text-left cursor-pointer max-w-[200px]"
+                                    >
+                                        <PathMatchDisplay
+                                            value={{
+                                                path: row.original.path,
+                                                pathMatchType:
+                                                    row.original.pathMatchType
+                                            }}
+                                        />
+                                    </Button>
+                                }
+                            />
+                        ) : (
+                            <PathMatchModal
+                                value={{
+                                    path: row.original.path,
+                                    pathMatchType: row.original.pathMatchType
+                                }}
+                                onChange={(config) =>
+                                    updateTarget(
+                                        row.original.targetId,
+                                        config.path === null &&
+                                            config.pathMatchType === null
+                                            ? {
+                                                  ...config,
+                                                  rewritePath: null,
+                                                  rewritePathType: null
+                                              }
+                                            : config
+                                    )
+                                }
+                                trigger={
+                                    <Button
+                                        variant="outline"
+                                        className="w-full max-w-[200px]"
+                                    >
+                                        <Plus className="h-4 w-4 mr-2" />
+                                        {t("matchPath")}
+                                    </Button>
+                                }
+                            />
+                        )}
+                    </div>
+                );
+            },
+            size: 200,
+            minSize: 180,
+            maxSize: 200
+        };
+
+        const siteColumn: ColumnDef<LocalTarget> = {
+            accessorKey: "site",
+            header: () => <span className="p-3">{t("site")}</span>,
+            cell: ({ row }) => {
+                return (
+                    <ResourceTargetSiteItem
+                        orgId={orgId}
+                        getDockerStateForSite={getDockerStateForSite}
+                        proxyTarget={row.original}
+                        refreshContainersForSite={refreshContainersForSite}
+                        updateTarget={updateTarget}
+                    />
+                );
+            },
+            size: 220,
+            minSize: 180,
+            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> = {
+            accessorKey: "rewritePath",
+            header: () => <span className="p-3">{t("rewritePath")}</span>,
+            cell: ({ row }) => {
+                const hasRewritePath = !!(
+                    row.original.rewritePath || row.original.rewritePathType
+                );
+                const noPathMatch =
+                    !row.original.path && !row.original.pathMatchType;
+
+                return (
+                    <div className="flex items-center justify-center w-full">
+                        {hasRewritePath && !noPathMatch ? (
+                            <PathRewriteModal
+                                value={{
+                                    rewritePath: row.original.rewritePath,
+                                    rewritePathType:
+                                        row.original.rewritePathType
+                                }}
+                                onChange={(config) =>
+                                    updateTarget(row.original.targetId, config)
+                                }
+                                trigger={
+                                    <Button
+                                        variant="outline"
+                                        className="flex items-center gap-2 p-2 w-full text-left cursor-pointer max-w-[200px]"
+                                        disabled={noPathMatch}
+                                    >
+                                        <PathRewriteDisplay
+                                            value={{
+                                                rewritePath:
+                                                    row.original.rewritePath,
+                                                rewritePathType:
+                                                    row.original.rewritePathType
+                                            }}
+                                        />
+                                    </Button>
+                                }
+                            />
+                        ) : (
+                            <PathRewriteModal
+                                value={{
+                                    rewritePath: row.original.rewritePath,
+                                    rewritePathType:
+                                        row.original.rewritePathType
+                                }}
+                                onChange={(config) =>
+                                    updateTarget(row.original.targetId, config)
+                                }
+                                trigger={
+                                    <Button
+                                        variant="outline"
+                                        disabled={noPathMatch}
+                                        className="w-full max-w-[200px]"
+                                    >
+                                        <Plus className="h-4 w-4 mr-2" />
+                                        {t("rewritePath")}
+                                    </Button>
+                                }
+                                disabled={noPathMatch}
+                            />
+                        )}
+                    </div>
+                );
+            },
+            size: 200,
+            minSize: 180,
+            maxSize: 200
+        };
+
+        const enabledColumn: ColumnDef<LocalTarget> = {
+            accessorKey: "enabled",
+            header: () => <span className="p-3">{t("enabled")}</span>,
+            cell: ({ row }) => (
+                <div className="flex items-center w-full">
+                    <Switch
+                        defaultChecked={row.original.enabled}
+                        onCheckedChange={(val) =>
+                            updateTarget(row.original.targetId, {
+                                ...row.original,
+                                enabled: val
+                            })
+                        }
+                    />
+                </div>
+            ),
+            size: 100,
+            minSize: 80,
+            maxSize: 120
+        };
+
+        const actionsColumn: ColumnDef<LocalTarget> = {
+            id: "actions",
+            cell: ({ row }) => (
+                <div className="flex items-center justify-end w-full">
+                    <Button
+                        variant="outline"
+                        onClick={() => removeTarget(row.original.targetId)}
+                    >
+                        {t("delete")}
+                    </Button>
+                </div>
+            ),
+            size: 100,
+            minSize: 80,
+            maxSize: 120
+        };
+
+        if (isAdvancedMode) {
+            const cols = [
+                siteColumn,
+                addressColumn,
+                healthCheckColumn,
+                enabledColumn,
+                actionsColumn
+            ];
+
+            if (isHttp) {
+                cols.unshift(matchPathColumn);
+                cols.splice(4, 0, rewritePathColumn, priorityColumn);
+            }
+
+            return cols;
+        } else {
+            return [
+                siteColumn,
+                addressColumn,
+                healthCheckColumn,
+                enabledColumn,
+                actionsColumn
+            ];
+        }
+    }, [
+        isAdvancedMode,
+        isHttp,
+        sites,
+        updateTarget,
+        getDockerStateForSite,
+        refreshContainersForSite,
+        openHealthCheckDialog,
+        removeTarget,
+        t
+    ]);
+
+    function addNewTarget() {
+        const newTarget: LocalTarget = {
+            targetId: -Date.now(),
+            ip: "",
+            mode: ((resource?.mode as LocalTarget["mode"]) ??
+                (isHttp ? "http" : "tcp")) as LocalTarget["mode"],
+            method: isHttp ? "http" : null,
+            port: 0,
+            siteId: sites.length > 0 ? sites[0].siteId : 0,
+            siteName: sites.length > 0 ? sites[0].name : "",
+            path: null,
+            pathMatchType: null,
+            rewritePath: null,
+            rewritePathType: null,
+            priority: 100,
+            enabled: true,
+            resourceId: resource?.resourceId ?? 0,
+            hcEnabled: false,
+            hcPath: null,
+            hcMethod: null,
+            hcInterval: null,
+            hcTimeout: null,
+            hcHeaders: null,
+            hcFollowRedirects: null,
+            hcScheme: null,
+            hcHostname: null,
+            hcPort: null,
+            hcHealth: "unknown",
+            hcStatus: null,
+            hcMode: null,
+            hcUnhealthyInterval: null,
+            hcTlsServerName: null,
+            hcHealthyThreshold: null,
+            hcUnhealthyThreshold: null,
+            siteType: sites.length > 0 ? sites[0].type : null,
+            new: true,
+            updated: false
+        };
+
+        setTargets((prev) => [...prev, newTarget]);
+    }
+
+    function updateTargetHealthCheck(targetId: number, config: any) {
+        setTargets(
+            targets.map((target) =>
+                target.targetId === targetId
+                    ? {
+                          ...target,
+                          ...config,
+                          updated: true
+                      }
+                    : target
+            )
+        );
+    }
+
+    const table = useReactTable({
+        data: targets,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getRowId: (row) => String(row.targetId),
+        state: {
+            pagination: {
+                pageIndex: 0,
+                pageSize: 1000
+            }
+        }
+    });
+
+    const router = useRouter();
+    const queryClient = useQueryClient();
+
+    useEffect(() => {
+        const newtSites = sites.filter((site) => site.type === "newt");
+        for (const site of newtSites) {
+            initializeDockerForSite(site.siteId);
+        }
+    }, [sites]);
+
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            localStorage.setItem(
+                "proxy-advanced-mode",
+                isAdvancedMode.toString()
+            );
+        }
+    }, [isAdvancedMode]);
+
+    const [, formAction, isSubmitting] = useActionState(saveTargets, null);
+
+    const addTargetButton = (
+        <Button onClick={addNewTarget} variant="outline">
+            <Plus className="h-4 w-4 mr-2" />
+            {t("addTarget")}
+        </Button>
+    );
+
+    const hasTargets = targets.length > 0;
+
+    async function saveTargets() {
+        if (!resource) return;
+
+        const targetsWithInvalidFields = targets.filter(
+            (target) =>
+                !target.ip ||
+                target.ip.trim() === "" ||
+                !target.port ||
+                target.port <= 0 ||
+                isNaN(target.port)
+        );
+        if (targetsWithInvalidFields.length > 0) {
+            toast({
+                variant: "destructive",
+                title: t("targetErrorInvalidIp"),
+                description: t("targetErrorInvalidIpDescription")
+            });
+            return;
+        }
+
+        try {
+            await Promise.all(
+                targetsToRemove.map((targetId) =>
+                    api.delete(`/target/${targetId}`)
+                )
+            );
+
+            for (const target of targets) {
+                const data: any = {
+                    ip: target.ip,
+                    port: target.port,
+                    method: target.method,
+                    enabled: target.enabled,
+                    siteId: target.siteId,
+                    hcEnabled: target.hcEnabled,
+                    hcPath: target.hcPath || null,
+                    hcScheme: target.hcScheme || null,
+                    hcHostname: target.hcHostname || null,
+                    hcPort: target.hcPort || null,
+                    hcInterval: target.hcInterval || null,
+                    hcTimeout: target.hcTimeout || null,
+                    hcHeaders: target.hcHeaders || null,
+                    hcFollowRedirects: target.hcFollowRedirects || null,
+                    hcMethod: target.hcMethod || null,
+                    hcStatus: target.hcStatus || null,
+                    hcUnhealthyInterval: target.hcUnhealthyInterval || null,
+                    hcMode: target.hcMode || null,
+                    hcTlsServerName: target.hcTlsServerName,
+                    hcHealthyThreshold: target.hcHealthyThreshold || null,
+                    hcUnhealthyThreshold: target.hcUnhealthyThreshold || null
+                };
+
+                if (isHttp) {
+                    data.path = target.path;
+                    data.pathMatchType = target.pathMatchType;
+                    data.rewritePath = target.rewritePath;
+                    data.rewritePathType = target.rewritePathType;
+                    data.priority = target.priority;
+                }
+
+                if (target.new) {
+                    const res = await api.put<
+                        AxiosResponse<CreateTargetResponse>
+                    >(`/resource/${resource.resourceId}/target`, data);
+                    target.targetId = res.data.data.targetId;
+                    target.new = false;
+                } else if (target.updated) {
+                    await api.post(`/target/${target.targetId}`, data);
+                    target.updated = false;
+                }
+            }
+
+            toast({
+                title:
+                    targets.length === 0
+                        ? t("targetTargetsCleared")
+                        : t("settingsUpdated"),
+                description:
+                    targets.length === 0
+                        ? t("targetTargetsClearedDescription")
+                        : t("settingsUpdatedDescription")
+            });
+
+            setTargetsToRemove([]);
+            router.refresh();
+            await queryClient.invalidateQueries(
+                resourceQueries.resourceTargets({
+                    resourceId: resource.resourceId
+                })
+            );
+        } catch (err) {
+            console.error(err);
+            toast({
+                variant: "destructive",
+                title: t("settingsErrorUpdate"),
+                description: formatAxiosError(
+                    err,
+                    t("settingsErrorUpdateDescription")
+                )
+            });
+        }
+    }
+
+    return (
+        <>
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>{t("targets")}</SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t("targetsDescription")}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+                <SettingsSectionBody>
+                    <div className="overflow-x-auto">
+                        <Table>
+                            <TableHeader>
+                                {table.getHeaderGroups().map((headerGroup) => (
+                                    <TableRow key={headerGroup.id}>
+                                        {headerGroup.headers.map((header) => {
+                                            const isActionsColumn =
+                                                header.column.id === "actions";
+                                            const isSiteColumn =
+                                                header.column.id === "site";
+                                            return (
+                                                <TableHead
+                                                    key={header.id}
+                                                    className={
+                                                        isActionsColumn
+                                                            ? "sticky right-0 z-10 w-auto min-w-fit bg-card"
+                                                            : isSiteColumn
+                                                              ? "w-45"
+                                                              : ""
+                                                    }
+                                                >
+                                                    {header.isPlaceholder
+                                                        ? null
+                                                        : flexRender(
+                                                              header.column
+                                                                  .columnDef
+                                                                  .header,
+                                                              header.getContext()
+                                                          )}
+                                                </TableHead>
+                                            );
+                                        })}
+                                    </TableRow>
+                                ))}
+                            </TableHeader>
+                            <TableBody>
+                                {table.getRowModel().rows?.length ? (
+                                    table.getRowModel().rows.map((row) => (
+                                        <TableRow key={row.id}>
+                                            {row
+                                                .getVisibleCells()
+                                                .map((cell) => {
+                                                    const isActionsColumn =
+                                                        cell.column.id ===
+                                                        "actions";
+                                                    const isSiteColumn =
+                                                        cell.column.id ===
+                                                        "site";
+                                                    return (
+                                                        <TableCell
+                                                            key={cell.id}
+                                                            className={
+                                                                isActionsColumn
+                                                                    ? "sticky right-0 z-10 w-auto min-w-fit bg-card"
+                                                                    : isSiteColumn
+                                                                      ? "w-45"
+                                                                      : ""
+                                                            }
+                                                        >
+                                                            {flexRender(
+                                                                cell.column
+                                                                    .columnDef
+                                                                    .cell,
+                                                                cell.getContext()
+                                                            )}
+                                                        </TableCell>
+                                                    );
+                                                })}
+                                        </TableRow>
+                                    ))
+                                ) : (
+                                    <DataTableEmptyState
+                                        colSpan={columns.length}
+                                        message={t("targetNoOne")}
+                                        action={addTargetButton}
+                                    />
+                                )}
+                            </TableBody>
+                        </Table>
+                    </div>
+                    {hasTargets && (
+                        <div className="flex items-center justify-between mb-4">
+                            <div className="flex items-center justify-between w-full gap-2">
+                                {addTargetButton}
+                                <div className="flex items-center gap-2">
+                                    <Switch
+                                        id="advanced-mode-toggle"
+                                        checked={isAdvancedMode}
+                                        onCheckedChange={setIsAdvancedMode}
+                                    />
+                                    <label
+                                        htmlFor="advanced-mode-toggle"
+                                        className="text-sm"
+                                    >
+                                        {t("advancedMode")}
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    {build === "saas" &&
+                        targets.length > 1 &&
+                        new Set(targets.map((t) => t.siteId)).size > 1 && (
+                            <p className="text-sm text-muted-foreground mt-3">
+                                {t("proxyMultiSiteRoundRobinNodeHelp")}{" "}
+                                <a
+                                    href="https://docs.pangolin.net/manage/resources/public/targets#distributing-sites-load-across-servers"
+                                    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>
+                        )}
+                </SettingsSectionBody>
+
+                {/* Save button — only shown in edit mode */}
+                {resource && (
+                    <form className="self-end mt-4" action={formAction}>
+                        <Button
+                            disabled={isSubmitting}
+                            loading={isSubmitting}
+                            type="submit"
+                        >
+                            {t("saveResourceTargets")}
+                        </Button>
+                    </form>
+                )}
+            </SettingsSection>
+
+            {selectedTargetForHealthCheck && (
+                <HealthCheckCredenza
+                    mode="autoSave"
+                    open={healthCheckDialogOpen}
+                    setOpen={setHealthCheckDialogOpen}
+                    targetAddress={`${selectedTargetForHealthCheck.ip}:${selectedTargetForHealthCheck.port}`}
+                    targetMethod={
+                        selectedTargetForHealthCheck.method || undefined
+                    }
+                    initialConfig={{
+                        hcEnabled:
+                            selectedTargetForHealthCheck.hcEnabled || false,
+                        hcPath: selectedTargetForHealthCheck.hcPath || "/",
+                        hcMethod:
+                            selectedTargetForHealthCheck.hcMethod || "GET",
+                        hcInterval:
+                            selectedTargetForHealthCheck.hcInterval || 5,
+                        hcTimeout: selectedTargetForHealthCheck.hcTimeout || 5,
+                        hcHeaders:
+                            selectedTargetForHealthCheck.hcHeaders || undefined,
+                        hcScheme:
+                            selectedTargetForHealthCheck.hcScheme || undefined,
+                        hcHostname:
+                            selectedTargetForHealthCheck.hcHostname ||
+                            selectedTargetForHealthCheck.ip,
+                        hcPort:
+                            selectedTargetForHealthCheck.hcPort ||
+                            selectedTargetForHealthCheck.port,
+                        hcFollowRedirects:
+                            selectedTargetForHealthCheck.hcFollowRedirects ??
+                            true,
+                        hcStatus:
+                            selectedTargetForHealthCheck.hcStatus || undefined,
+                        hcMode: selectedTargetForHealthCheck.hcMode || "http",
+                        hcUnhealthyInterval:
+                            selectedTargetForHealthCheck.hcUnhealthyInterval ||
+                            30,
+                        hcTlsServerName:
+                            selectedTargetForHealthCheck.hcTlsServerName ||
+                            undefined,
+                        hcHealthyThreshold:
+                            selectedTargetForHealthCheck.hcHealthyThreshold ||
+                            1,
+                        hcUnhealthyThreshold:
+                            selectedTargetForHealthCheck.hcUnhealthyThreshold ||
+                            1
+                    }}
+                    onChanges={async (config) => {
+                        if (selectedTargetForHealthCheck) {
+                            updateTargetHealthCheck(
+                                selectedTargetForHealthCheck.targetId,
+                                config
+                            );
+                        }
+                    }}
+                />
+            )}
+        </>
+    );
+}

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

@@ -0,0 +1,7 @@
+"use client";
+
+import { ResourcePolicyEditForm } from "@app/components/resource-policy/ResourcePolicyEditForm";
+
+export default function ResourceAuthenticationPage() {
+    return <ResourcePolicyEditForm section="authentication" />;
+}

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

@@ -0,0 +1,545 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useResourceContext } from "@app/hooks/useResourceContext";
+import DomainPicker from "@app/components/DomainPicker";
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsFormGrid,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle,
+    SettingsSubsectionDescription,
+    SettingsSubsectionHeader,
+    SettingsSubsectionTitle,
+    SettingsFormCell
+} from "@app/components/Settings";
+import { SwitchInput } from "@app/components/SwitchInput";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { finalizeSubdomainSanitize } from "@app/lib/subdomain-utils";
+import {
+    GetResourceAuthInfoResponse,
+    UpdateResourceResponse
+} from "@server/routers/resource";
+import { AxiosResponse } from "axios";
+import { useTranslations } from "next-intl";
+import { useParams, useRouter } from "next/navigation";
+import { toASCII, toUnicode } from "punycode";
+import { useActionState, useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import z from "zod";
+import { SharedPolicySelect } from "@app/components/shared-policy-selector";
+import { useOrgContext } from "@app/hooks/useOrgContext";
+import { orgQueries } from "@app/lib/queries";
+import { useQuery } from "@tanstack/react-query";
+import Link from "next/link";
+import { build } from "@server/build";
+import { TierFeature } from "@server/lib/billing/tierMatrix";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import UptimeAlertSection from "@app/components/UptimeAlertSection";
+
+export default function GeneralForm() {
+    const params = useParams();
+    const { org } = useOrgContext();
+    const { resource, updateResource, updateAuthInfo } = useResourceContext();
+    const router = useRouter();
+    const t = useTranslations();
+
+    const { env } = useEnvContext();
+    const { isPaidUser } = usePaidStatus();
+
+    const orgId = params.orgId;
+
+    const api = createApiClient({ env });
+
+    const hasResourcePolicies =
+        build !== "oss" &&
+        isPaidUser(tierMatrix[TierFeature.ResourcePolicies]);
+
+    const [selectedSharedPolicyId, setSelectedSharedPolicyId] = useState<
+        number | null
+    >(resource.resourcePolicyId ?? null);
+
+    useEffect(() => {
+        setSelectedSharedPolicyId(resource.resourcePolicyId ?? null);
+    }, [resource.resourcePolicyId]);
+
+    const { data: selectedSharedPolicy } = useQuery({
+        ...orgQueries.resourcePolicy({
+            resourcePolicyId: selectedSharedPolicyId!
+        }),
+        enabled: hasResourcePolicies && selectedSharedPolicyId !== null
+    });
+
+    const [resourceFullDomain, setResourceFullDomain] = useState(
+        `${resource.ssl ? "https" : "http"}://${toUnicode(resource.fullDomain || "")}`
+    );
+
+    const resourceFullDomainName = useMemo(() => {
+        try {
+            const url = new URL(resourceFullDomain);
+            return url.hostname;
+        } catch {
+            return "";
+        }
+    }, [resourceFullDomain]);
+
+    const GeneralFormSchema = z
+        .object({
+            enabled: z.boolean(),
+            subdomain: z.string().optional(),
+            name: z.string().min(1).max(255),
+            niceId: z.string().min(1).max(255).optional(),
+            domainId: z.string().optional(),
+            proxyPort: z.number().int().min(1).max(65535).optional()
+        })
+        .refine(
+            (data) => {
+                // For non-HTTP resources, proxyPort should be defined
+                if (!["http", "ssh", "rdp", "vnc"].includes(resource.mode)) {
+                    return data.proxyPort !== undefined;
+                }
+                // For HTTP resources, proxyPort should be undefined
+                return data.proxyPort === undefined;
+            },
+            {
+                message: !["http", "ssh", "rdp", "vnc"].includes(resource.mode)
+                    ? "Port number is required for non-HTTP resources"
+                    : "Port number should not be set for HTTP resources",
+                path: ["proxyPort"]
+            }
+        );
+
+    type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
+
+    const form = useForm({
+        resolver: zodResolver(GeneralFormSchema),
+        defaultValues: {
+            enabled: resource.enabled,
+            name: resource.name,
+            niceId: resource.niceId,
+            subdomain: resource.subdomain ? resource.subdomain : undefined,
+            domainId: resource.domainId || undefined,
+            proxyPort: resource.proxyPort || undefined
+        },
+        mode: "onChange"
+    });
+
+    const [, formAction, saveLoading] = useActionState(onSubmit, null);
+
+    async function onSubmit() {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const data = form.getValues();
+
+        let resourcePolicyId: number | null | undefined;
+
+        if (!["tcp", "udp"].includes(resource.mode)) {
+            if (hasResourcePolicies || selectedSharedPolicyId === null) {
+                resourcePolicyId = selectedSharedPolicyId;
+            }
+        }
+
+        const res = await api
+            .post<AxiosResponse<UpdateResourceResponse>>(
+                `resource/${resource?.resourceId}`,
+                {
+                    enabled: data.enabled,
+                    name: data.name,
+                    niceId: data.niceId,
+                    subdomain: data.subdomain
+                        ? toASCII(
+                              finalizeSubdomainSanitize(data.subdomain, true)
+                          )
+                        : undefined,
+                    domainId: data.domainId,
+                    proxyPort: data.proxyPort,
+                    ...(resourcePolicyId !== undefined && { resourcePolicyId })
+                }
+            )
+            .catch((e) => {
+                toast({
+                    variant: "destructive",
+                    title: t("resourceErrorUpdate"),
+                    description: formatAxiosError(
+                        e,
+                        t("resourceErrorUpdateDescription")
+                    )
+                });
+            });
+
+        if (res && res.status === 200) {
+            const updated = res.data.data;
+
+            updateResource({
+                enabled: data.enabled,
+                name: data.name,
+                niceId: data.niceId,
+                subdomain: data.subdomain,
+                fullDomain: updated.fullDomain,
+                proxyPort: data.proxyPort,
+                domainId: data.domainId,
+                ...(resourcePolicyId !== undefined && {
+                    resourcePolicyId
+                })
+            });
+
+            if (resourcePolicyId !== undefined) {
+                const authRes = await api
+                    .get<AxiosResponse<GetResourceAuthInfoResponse>>(
+                        `/resource/${resource.resourceGuid}/auth`
+                    )
+                    .catch(() => null);
+
+                if (authRes?.status === 200) {
+                    updateAuthInfo(authRes.data.data);
+                }
+            }
+
+            toast({
+                title: t("resourceUpdated"),
+                description: t("resourceUpdatedDescription")
+            });
+
+            if (data.niceId && data.niceId !== resource?.niceId) {
+                router.replace(
+                    `/${updated.orgId}/settings/resources/public/${data.niceId}/general`
+                );
+            }
+
+            router.refresh();
+        }
+    }
+
+    return (
+        <>
+            <SettingsContainer>
+                {resource?.resourceId &&
+                    resource?.orgId &&
+                    resource.mode == "http" && (
+                        <UptimeAlertSection
+                            orgId={resource.orgId}
+                            resourceId={resource.resourceId}
+                            startingName={resource.name}
+                        />
+                    )}
+                <SettingsSection>
+                    <SettingsSectionHeader>
+                        <SettingsSectionTitle>
+                            {t("resourceGeneral")}
+                        </SettingsSectionTitle>
+                        <SettingsSectionDescription>
+                            {t("resourceGeneralDescription")}
+                        </SettingsSectionDescription>
+                    </SettingsSectionHeader>
+
+                    <SettingsSectionBody>
+                        <SettingsSectionForm variant="half">
+                            <Form {...form}>
+                                <form
+                                    action={formAction}
+                                    id="general-settings-form"
+                                >
+                                    <SettingsFormGrid>
+                                        <SettingsFormCell span="full">
+                                            <FormField
+                                                control={form.control}
+                                                name="enabled"
+                                                render={() => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <SwitchInput
+                                                                id="enable-resource"
+                                                                defaultChecked={
+                                                                    resource.enabled
+                                                                }
+                                                                label={t(
+                                                                    "resourceEnable"
+                                                                )}
+                                                                onCheckedChange={(
+                                                                    val
+                                                                ) =>
+                                                                    form.setValue(
+                                                                        "enabled",
+                                                                        val
+                                                                    )
+                                                                }
+                                                            />
+                                                        </FormControl>
+                                                        <FormDescription>
+                                                            {t(
+                                                                "disabledResourceDescription"
+                                                            )}
+                                                        </FormDescription>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </SettingsFormCell>
+
+                                        <SettingsFormCell span="half">
+                                            <FormField
+                                                control={form.control}
+                                                name="name"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormLabel>
+                                                            {t("name")}
+                                                        </FormLabel>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                            />
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </SettingsFormCell>
+
+                                        <SettingsFormCell span="half">
+                                            <FormField
+                                                control={form.control}
+                                                name="niceId"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormLabel>
+                                                            {t("identifier")}
+                                                        </FormLabel>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                placeholder={t(
+                                                                    "enterIdentifier"
+                                                                )}
+                                                            />
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </SettingsFormCell>
+
+                                        {!["http", "ssh", "rdp", "vnc"].includes(
+                                            resource.mode
+                                        ) && (
+                                            <SettingsFormCell span="half">
+                                                <FormField
+                                                    control={form.control}
+                                                    name="proxyPort"
+                                                    render={({ field }) => (
+                                                        <FormItem>
+                                                            <FormLabel>
+                                                                {t(
+                                                                    "resourcePortNumber"
+                                                                )}
+                                                            </FormLabel>
+                                                            <FormControl>
+                                                                <Input
+                                                                    type="number"
+                                                                    value={
+                                                                        field.value !==
+                                                                        undefined
+                                                                            ? String(
+                                                                                  field.value
+                                                                              )
+                                                                            : ""
+                                                                    }
+                                                                    onChange={(
+                                                                        e
+                                                                    ) =>
+                                                                        field.onChange(
+                                                                            e
+                                                                                .target
+                                                                                .value
+                                                                                ? parseInt(
+                                                                                      e
+                                                                                          .target
+                                                                                          .value
+                                                                                  )
+                                                                                : undefined
+                                                                        )
+                                                                    }
+                                                                />
+                                                            </FormControl>
+                                                            <FormMessage />
+                                                            <FormDescription>
+                                                                {t(
+                                                                    "resourcePortNumberDescription"
+                                                                )}
+                                                            </FormDescription>
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            </SettingsFormCell>
+                                        )}
+
+                                        {["http", "ssh", "rdp", "vnc"].includes(
+                                            resource.mode
+                                        ) && (
+                                            <SettingsFormCell span="full">
+                                                <div id="resource-domain-picker">
+                                                    <DomainPicker
+                                                        allowWildcard={true}
+                                                        key={
+                                                            resource.resourceId
+                                                        }
+                                                        orgId={orgId as string}
+                                                        cols={2}
+                                                        defaultSubdomain={
+                                                            form.watch(
+                                                                "subdomain"
+                                                            ) ?? undefined
+                                                        }
+                                                        defaultDomainId={
+                                                            form.watch(
+                                                                "domainId"
+                                                            ) ?? undefined
+                                                        }
+                                                        defaultFullDomain={
+                                                            resourceFullDomainName ||
+                                                            undefined
+                                                        }
+                                                        onDomainChange={(
+                                                            res
+                                                        ) => {
+                                                            if (res === null) {
+                                                                form.setValue(
+                                                                    "domainId",
+                                                                    undefined
+                                                                );
+                                                                form.setValue(
+                                                                    "subdomain",
+                                                                    undefined
+                                                                );
+                                                                setResourceFullDomain(
+                                                                    `${resource.ssl ? "https" : "http"}://`
+                                                                );
+                                                                return;
+                                                            }
+                                                            form.setValue(
+                                                                "domainId",
+                                                                res.domainId
+                                                            );
+                                                            form.setValue(
+                                                                "subdomain",
+                                                                res.subdomain ??
+                                                                    undefined
+                                                            );
+                                                            setResourceFullDomain(
+                                                                `${resource.ssl ? "https" : "http"}://${toUnicode(res.fullDomain)}`
+                                                            );
+                                                        }}
+                                                    />
+                                                </div>
+                                            </SettingsFormCell>
+                                        )}
+                                        { !["tcp", "udp"].includes(
+                                                resource.mode
+                                            ) && !env.flags.disableEnterpriseFeatures && (
+                                            <>
+                                                <SettingsFormCell span="full">
+                                                    <SettingsSubsectionHeader>
+                                                        <SettingsSubsectionTitle>
+                                                            {t(
+                                                                "resourceGeneralAuthenticationAccessSubsection"
+                                                            )}
+                                                        </SettingsSubsectionTitle>
+                                                        <SettingsSubsectionDescription>
+                                                            {t(
+                                                                "resourceGeneralAuthenticationAccessSubsectionDescription"
+                                                            )}
+                                                        </SettingsSubsectionDescription>
+                                                    </SettingsSubsectionHeader>
+                                                </SettingsFormCell>
+                                                <SettingsFormCell span="half">
+                                                    <div className="space-y-2">
+                                                        <FormLabel>
+                                                            {t("sharedPolicy")}
+                                                        </FormLabel>
+                                                        <SharedPolicySelect
+                                                        key={
+                                                            resource.resourcePolicyId ??
+                                                            "none"
+                                                        }
+                                                        orgId={org.org.orgId}
+                                                        value={
+                                                            selectedSharedPolicyId
+                                                        }
+                                                        onChange={
+                                                            setSelectedSharedPolicyId
+                                                        }
+                                                        />
+                                                        <FormDescription>
+                                                            {selectedSharedPolicyId ===
+                                                            null
+                                                                ? t(
+                                                                      "resourceSharedPolicyOwnDescription"
+                                                                  )
+                                                                : selectedSharedPolicy
+                                                                  ? t.rich(
+                                                                        "resourceSharedPolicyInheritedDescription",
+                                                                        {
+                                                                            policyName:
+                                                                                selectedSharedPolicy.name,
+                                                                            policyLink:
+                                                                                (
+                                                                                    chunks
+                                                                                ) => (
+                                                                                    <Link
+                                                                                        href={`/${org.org.orgId}/settings/policies/resources/public/${selectedSharedPolicy.niceId}/general`}
+                                                                                        className="text-primary hover:underline"
+                                                                                    >
+                                                                                        {
+                                                                                            chunks
+                                                                                        }
+                                                                                    </Link>
+                                                                                )
+                                                                        }
+                                                                    )
+                                                                  : null}
+                                                        </FormDescription>
+                                                    </div>
+                                                </SettingsFormCell>
+                                            </>
+                                        )}
+                                    </SettingsFormGrid>
+                                </form>
+                            </Form>
+                        </SettingsSectionForm>
+                    </SettingsSectionBody>
+
+                    <SettingsSectionFooter>
+                        <Button
+                            type="submit"
+                            loading={saveLoading}
+                            disabled={saveLoading}
+                            form="general-settings-form"
+                        >
+                            {t("saveSettings")}
+                        </Button>
+                    </SettingsSectionFooter>
+                </SettingsSection>
+            </SettingsContainer>
+        </>
+    );
+}

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

@@ -0,0 +1,365 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { HeadersInput } from "@app/components/HeadersInput";
+import {
+    SettingsContainer,
+    SettingsFormCell,
+    SettingsFormGrid,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { SwitchInput } from "@app/components/SwitchInput";
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import type { ResourceContextType } from "@app/contexts/resourceContext";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useResourceContext } from "@app/hooks/useResourceContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { resourceQueries } from "@app/lib/queries";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { UpdateResourceResponse } from "@server/routers/resource";
+import { tlsNameSchema } from "@server/lib/schemas";
+import { useQuery } from "@tanstack/react-query";
+import {
+    ProxyResourceTargetsForm
+} from "@app/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm";
+import { AxiosResponse } from "axios";
+import { useTranslations } from "next-intl";
+import { useParams, useRouter } from "next/navigation";
+import { useActionState, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+export default function ReverseProxyTargetsPage() {
+    const params = useParams();
+    const { resource, updateResource } = useResourceContext();
+
+    const { data: remoteTargets = [], isLoading: isLoadingTargets } = useQuery(
+        resourceQueries.resourceTargets({
+            resourceId: resource.resourceId
+        })
+    );
+
+    if (isLoadingTargets) {
+        return null;
+    }
+
+    return (
+        <SettingsContainer>
+            <ProxyResourceTargetsForm
+                orgId={params.orgId as string}
+                isHttp={["http", "ssh", "rdp", "vnc"].includes(resource.mode)}
+                initialTargets={remoteTargets}
+                resource={resource}
+                updateResource={updateResource}
+            />
+
+            {["http", "ssh", "rdp", "vnc"].includes(resource.mode) && (
+                <ProxyResourceHttpForm
+                    resource={resource}
+                    updateResource={updateResource}
+                />
+            )}
+        </SettingsContainer>
+    );
+}
+
+function ProxyResourceHttpForm({
+    resource,
+    updateResource
+}: Pick<ResourceContextType, "resource" | "updateResource">) {
+    const t = useTranslations();
+    const router = useRouter();
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
+
+    const httpSettingsSchema = z.object({
+        stickySession: z.boolean(),
+        ssl: z.boolean(),
+        tlsServerName: z
+            .string()
+            .optional()
+            .refine(
+                (data) => {
+                    if (data) {
+                        return tlsNameSchema.safeParse(data).success;
+                    }
+                    return true;
+                },
+                {
+                    message: t("proxyErrorTls")
+                }
+            ),
+        setHostHeader: z
+            .string()
+            .optional()
+            .refine(
+                (data) => {
+                    if (data) {
+                        return tlsNameSchema.safeParse(data).success;
+                    }
+                    return true;
+                },
+                {
+                    message: t("proxyErrorInvalidHeader")
+                }
+            ),
+        headers: z
+            .array(z.object({ name: z.string(), value: z.string() }))
+            .nullable()
+    });
+
+    const form = useForm({
+        resolver: zodResolver(httpSettingsSchema),
+        defaultValues: {
+            stickySession: resource.stickySession,
+            ssl: resource.ssl,
+            tlsServerName: resource.tlsServerName || "",
+            setHostHeader: resource.setHostHeader || "",
+            headers: resource.headers
+        },
+        mode: "onChange"
+    });
+
+    const [, formAction, saveLoading] = useActionState(onSubmit, null);
+    const [headersValid, setHeadersValid] = useState(true);
+
+    async function onSubmit() {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        if (!headersValid) {
+            toast({
+                variant: "destructive",
+                title: t("settingsErrorUpdate"),
+                description: t("headersValidationError")
+            });
+            return;
+        }
+
+        const data = form.getValues();
+
+        const res = await api
+            .post<AxiosResponse<UpdateResourceResponse>>(
+                `/resource/${resource.resourceId}`,
+                {
+                    stickySession: data.stickySession,
+                    ssl: data.ssl,
+                    tlsServerName: data.tlsServerName || null,
+                    setHostHeader: data.setHostHeader || null,
+                    headers: data.headers || null
+                }
+            )
+            .catch((err) => {
+                toast({
+                    variant: "destructive",
+                    title: t("settingsErrorUpdate"),
+                    description: formatAxiosError(
+                        err,
+                        t("settingsErrorUpdateDescription")
+                    )
+                });
+            });
+
+        if (res && res.status === 200) {
+            updateResource({
+                ...resource,
+                stickySession: data.stickySession,
+                ssl: data.ssl,
+                tlsServerName: data.tlsServerName || null,
+                setHostHeader: data.setHostHeader || null,
+                headers: data.headers || null
+            });
+
+            toast({
+                title: t("settingsUpdated"),
+                description: t("settingsUpdatedDescription")
+            });
+
+            router.refresh();
+        }
+    }
+
+    return (
+        <SettingsSection>
+            <SettingsSectionHeader>
+                <SettingsSectionTitle>
+                    {t("proxyAdditional")}
+                </SettingsSectionTitle>
+                <SettingsSectionDescription>
+                    {t("proxyAdditionalDescription")}
+                </SettingsSectionDescription>
+            </SettingsSectionHeader>
+
+            <SettingsSectionBody>
+                <SettingsSectionForm variant="half">
+                    <Form {...form}>
+                        <form action={formAction} id="http-settings-form">
+                            <SettingsFormGrid>
+                                {!env.flags.usePangolinDns && (
+                                    <SettingsFormCell span="full">
+                                        <FormField
+                                            control={form.control}
+                                            name="ssl"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormControl>
+                                                        <SwitchInput
+                                                            id="ssl-toggle"
+                                                            label={t(
+                                                                "proxyEnableSSL"
+                                                            )}
+                                                            description={t(
+                                                                "proxyEnableSSLDescription"
+                                                            )}
+                                                            checked={
+                                                                field.value
+                                                            }
+                                                            onCheckedChange={
+                                                                field.onChange
+                                                            }
+                                                        />
+                                                    </FormControl>
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </SettingsFormCell>
+                                )}
+
+                                <SettingsFormCell span="half">
+                                    <FormField
+                                        control={form.control}
+                                        name="tlsServerName"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t("targetTlsSni")}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input {...field} />
+                                                </FormControl>
+                                                <FormDescription>
+                                                    {t(
+                                                        "targetTlsSniDescription"
+                                                    )}
+                                                </FormDescription>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </SettingsFormCell>
+
+                                <SettingsFormCell span="full">
+                                    <FormField
+                                        control={form.control}
+                                        name="stickySession"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormControl>
+                                                    <SwitchInput
+                                                        id="sticky-toggle"
+                                                        label={t(
+                                                            "targetStickySessions"
+                                                        )}
+                                                        description={t(
+                                                            "targetStickySessionsDescription"
+                                                        )}
+                                                        checked={field.value}
+                                                        onCheckedChange={
+                                                            field.onChange
+                                                        }
+                                                    />
+                                                </FormControl>
+                                            </FormItem>
+                                        )}
+                                    />
+                                </SettingsFormCell>
+
+                                <SettingsFormCell span="half">
+                                    <FormField
+                                        control={form.control}
+                                        name="setHostHeader"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t("proxyCustomHeader")}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input {...field} />
+                                                </FormControl>
+                                                <FormDescription>
+                                                    {t(
+                                                        "proxyCustomHeaderDescription"
+                                                    )}
+                                                </FormDescription>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </SettingsFormCell>
+
+                                <SettingsFormCell span="full">
+                                    <FormField
+                                        control={form.control}
+                                        name="headers"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t("customHeaders")}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <HeadersInput
+                                                        value={field.value}
+                                                        onChange={
+                                                            field.onChange
+                                                        }
+                                                        onValidityChange={
+                                                            setHeadersValid
+                                                        }
+                                                        rows={4}
+                                                    />
+                                                </FormControl>
+                                                <FormDescription>
+                                                    {t(
+                                                        "customHeadersDescription"
+                                                    )}
+                                                </FormDescription>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </SettingsFormCell>
+                            </SettingsFormGrid>
+                        </form>
+                    </Form>
+                </SettingsSectionForm>
+            </SettingsSectionBody>
+
+            <SettingsSectionFooter>
+                <Button
+                    type="submit"
+                    loading={saveLoading}
+                    disabled={saveLoading || !headersValid}
+                    form="http-settings-form"
+                >
+                    {t("saveSettings")}
+                </Button>
+            </SettingsSectionFooter>
+        </SettingsSection>
+    );
+}

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

@@ -14,6 +14,7 @@ import OrgProvider from "@app/providers/OrgProvider";
 import { cache } from "react";
 import ResourceInfoBox from "@app/components/ResourceInfoBox";
 import { getTranslations } from "next-intl/server";
+import { pullEnv } from "@app/lib/pullEnv";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -30,6 +31,7 @@ interface ResourceLayoutProps {
 export default async function ResourceLayout(props: ResourceLayoutProps) {
     const params = await props.params;
     const t = await getTranslations();
+    const env = pullEnv();
 
     const { children } = props;
 
@@ -83,23 +85,32 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
     const navItems = [
         {
             title: t("general"),
-            href: `/{orgId}/settings/resources/proxy/{niceId}/general`
+            href: `/{orgId}/settings/resources/public/{niceId}/general`
         },
         {
-            title: t("proxy"),
-            href: `/{orgId}/settings/resources/proxy/{niceId}/proxy`
+            title: t(`${resource.mode}Settings`),
+            href: `/{orgId}/settings/resources/public/{niceId}/${resource.mode}`
         }
     ];
 
-    if (resource.http) {
-        navItems.push({
-            title: t("authentication"),
-            href: `/{orgId}/settings/resources/proxy/{niceId}/authentication`
-        });
-        navItems.push({
-            title: t("rules"),
-            href: `/{orgId}/settings/resources/proxy/{niceId}/rules`
-        });
+    if (["http", "ssh", "rdp", "vnc"].includes(resource.mode)) {
+        navItems.push(
+            {
+                title: t("authentication"),
+                href: `/{orgId}/settings/resources/public/{niceId}/authentication`
+            },
+            {
+                title: t("policyAccessRulesTitle"),
+                href: `/{orgId}/settings/resources/public/{niceId}/rules`
+            }
+        );
+
+        if (!env.flags.disableEnterpriseFeatures) {
+            navItems.push({
+                title: t("maintenanceMode"),
+                href: `/{orgId}/settings/resources/public/{niceId}/maintenance`
+            });
+        }
     }
 
     return (

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

@@ -0,0 +1,426 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { useResourceContext } from "@app/hooks/useResourceContext";
+import {
+    SettingsContainer,
+    SettingsFormCell,
+    SettingsFormGrid,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle,
+    SettingsSubsectionDescription,
+    SettingsSubsectionHeader,
+    SettingsSubsectionTitle
+} from "@app/components/Settings";
+import { SwitchInput } from "@app/components/SwitchInput";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { UpdateResourceResponse } from "@server/routers/resource";
+import { AxiosResponse } from "axios";
+import { AlertCircle } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useParams, useRouter } from "next/navigation";
+import { useActionState, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import z from "zod";
+import { Alert, AlertDescription } from "@app/components/ui/alert";
+import {
+    StrategySelect,
+    type StrategyOption
+} from "@app/components/StrategySelect";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
+
+const maintenanceSupportedModes = ["http", "ssh", "rdp", "vnc"];
+
+export default function ResourceMaintenancePage() {
+    const params = useParams();
+    const router = useRouter();
+    const { env } = useEnvContext();
+    const { resource, updateResource } = useResourceContext();
+    const t = useTranslations();
+    const api = createApiClient({ env });
+    const { isPaidUser } = usePaidStatus();
+
+    const supportsMaintenance = maintenanceSupportedModes.includes(
+        resource.mode
+    );
+
+    useEffect(() => {
+        if (env.flags.disableEnterpriseFeatures || !supportsMaintenance) {
+            router.replace(
+                `/${params.orgId}/settings/resources/public/${resource.niceId}/general`
+            );
+        }
+    }, [
+        env.flags.disableEnterpriseFeatures,
+        params.orgId,
+        resource.niceId,
+        router,
+        supportsMaintenance
+    ]);
+
+    const MaintenanceFormSchema = z.object({
+        maintenanceModeEnabled: z.boolean().optional(),
+        maintenanceModeType: z.enum(["forced", "automatic"]).optional(),
+        maintenanceTitle: z.string().max(255).optional(),
+        maintenanceMessage: z.string().max(2000).optional(),
+        maintenanceEstimatedTime: z.string().max(100).optional()
+    });
+
+    const maintenanceForm = useForm({
+        resolver: zodResolver(MaintenanceFormSchema),
+        defaultValues: {
+            maintenanceModeEnabled: resource.maintenanceModeEnabled || false,
+            maintenanceModeType: resource.maintenanceModeType || "automatic",
+            maintenanceTitle:
+                resource.maintenanceTitle || "We'll be back soon!",
+            maintenanceMessage:
+                resource.maintenanceMessage ||
+                "We are currently performing scheduled maintenance. Please check back soon.",
+            maintenanceEstimatedTime: resource.maintenanceEstimatedTime || ""
+        },
+        mode: "onChange"
+    });
+
+    const isMaintenanceEnabled = maintenanceForm.watch(
+        "maintenanceModeEnabled"
+    );
+    const maintenanceModeType = maintenanceForm.watch("maintenanceModeType");
+
+    const [, maintenanceFormAction, maintenanceSaveLoading] = useActionState(
+        onMaintenanceSubmit,
+        null
+    );
+
+    async function onMaintenanceSubmit() {
+        const isValid = await maintenanceForm.trigger();
+        if (!isValid) return;
+
+        const data = maintenanceForm.getValues();
+
+        const res = await api
+            .post<AxiosResponse<UpdateResourceResponse>>(
+                `resource/${resource?.resourceId}`,
+                {
+                    maintenanceModeEnabled: data.maintenanceModeEnabled,
+                    maintenanceModeType: data.maintenanceModeType,
+                    maintenanceTitle: data.maintenanceTitle || null,
+                    maintenanceMessage: data.maintenanceMessage || null,
+                    maintenanceEstimatedTime:
+                        data.maintenanceEstimatedTime || null
+                }
+            )
+            .catch((e) => {
+                toast({
+                    variant: "destructive",
+                    title: t("resourceErrorUpdate"),
+                    description: formatAxiosError(
+                        e,
+                        t("resourceErrorUpdateDescription")
+                    )
+                });
+            });
+
+        if (res && res.status === 200) {
+            updateResource({
+                maintenanceModeEnabled: data.maintenanceModeEnabled,
+                maintenanceModeType: data.maintenanceModeType,
+                maintenanceTitle: data.maintenanceTitle || null,
+                maintenanceMessage: data.maintenanceMessage || null,
+                maintenanceEstimatedTime: data.maintenanceEstimatedTime || null
+            });
+
+            toast({
+                title: t("resourceUpdated"),
+                description: t("resourceUpdatedDescription")
+            });
+        }
+    }
+
+    if (env.flags.disableEnterpriseFeatures || !supportsMaintenance) {
+        return null;
+    }
+
+    const isMaintenanceDisabled = !isPaidUser(tierMatrix.maintencePage);
+
+    const maintenanceModeTypeOptions: StrategyOption<
+        "automatic" | "forced"
+    >[] = [
+        {
+            id: "automatic",
+            title: `${t("automatic")} (${t("recommended")})`,
+            description: t("automaticModeDescription")
+        },
+        {
+            id: "forced",
+            title: t("forced"),
+            description: t("forcedModeDescription")
+        }
+    ];
+
+    return (
+        <>
+            <PaidFeaturesAlert tiers={tierMatrix.maintencePage} />
+            <div
+                className={
+                    isMaintenanceDisabled
+                        ? "pointer-events-none opacity-50"
+                        : undefined
+                }
+            >
+                <SettingsContainer>
+                    <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("maintenanceMode")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t("maintenanceModeDescription")}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+
+                <SettingsSectionBody>
+                    <SettingsSectionForm variant="half">
+                        <Form {...maintenanceForm}>
+                            <form
+                                action={maintenanceFormAction}
+                                id="maintenance-settings-form"
+                            >
+                                <SettingsFormGrid>
+                                    <SettingsFormCell span="full">
+                                        <FormField
+                                            control={maintenanceForm.control}
+                                            name="maintenanceModeEnabled"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormControl>
+                                                        <SwitchInput
+                                                            id="enable-maintenance"
+                                                            checked={
+                                                                field.value
+                                                            }
+                                                            label={t(
+                                                                "enableMaintenanceMode"
+                                                            )}
+                                                            description={t(
+                                                                "enableMaintenanceModeDescription"
+                                                            )}
+                                                            onCheckedChange={(
+                                                                val
+                                                            ) => {
+                                                                maintenanceForm.setValue(
+                                                                    "maintenanceModeEnabled",
+                                                                    val
+                                                                );
+                                                            }}
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </SettingsFormCell>
+
+                                    {isMaintenanceEnabled && (
+                                        <>
+                                            <SettingsFormCell span="full">
+                                                <FormField
+                                                    control={
+                                                        maintenanceForm.control
+                                                    }
+                                                    name="maintenanceModeType"
+                                                    render={({ field }) => (
+                                                        <FormItem>
+                                                            <FormLabel>
+                                                                {t(
+                                                                    "maintenanceModeType"
+                                                                )}
+                                                            </FormLabel>
+                                                            <FormControl>
+                                                                <StrategySelect<
+                                                                    | "automatic"
+                                                                    | "forced"
+                                                                >
+                                                                    value={
+                                                                        field.value
+                                                                    }
+                                                                    options={
+                                                                        maintenanceModeTypeOptions
+                                                                    }
+                                                                    onChange={
+                                                                        field.onChange
+                                                                    }
+                                                                    cols={2}
+                                                                />
+                                                            </FormControl>
+                                                            <FormMessage />
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            </SettingsFormCell>
+
+                                            {maintenanceModeType ===
+                                                "forced" && (
+                                                <SettingsFormCell span="full">
+                                                    <Alert variant="neutral">
+                                                        <AlertCircle className="h-4 w-4" />
+                                                        <AlertDescription>
+                                                            {t(
+                                                                "forcedeModeWarning"
+                                                            )}
+                                                        </AlertDescription>
+                                                    </Alert>
+                                                </SettingsFormCell>
+                                            )}
+
+                                            <SettingsFormCell span="full">
+                                                <SettingsSubsectionHeader>
+                                                    <SettingsSubsectionTitle>
+                                                        {t(
+                                                            "maintenancePageContentSubsection"
+                                                        )}
+                                                    </SettingsSubsectionTitle>
+                                                    <SettingsSubsectionDescription>
+                                                        {t(
+                                                            "maintenancePageContentSubsectionDescription"
+                                                        )}
+                                                    </SettingsSubsectionDescription>
+                                                </SettingsSubsectionHeader>
+                                            </SettingsFormCell>
+
+                                            <SettingsFormCell span="half">
+                                                <FormField
+                                                    control={
+                                                        maintenanceForm.control
+                                                    }
+                                                    name="maintenanceTitle"
+                                                    render={({ field }) => (
+                                                        <FormItem>
+                                                            <FormLabel>
+                                                                {t("pageTitle")}
+                                                            </FormLabel>
+                                                            <FormControl>
+                                                                <Input
+                                                                    {...field}
+                                                                    placeholder="We'll be back soon!"
+                                                                />
+                                                            </FormControl>
+                                                            <FormDescription>
+                                                                {t(
+                                                                    "pageTitleDescription"
+                                                                )}
+                                                            </FormDescription>
+                                                            <FormMessage />
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            </SettingsFormCell>
+
+                                            <SettingsFormCell span="full">
+                                                <FormField
+                                                    control={
+                                                        maintenanceForm.control
+                                                    }
+                                                    name="maintenanceMessage"
+                                                    render={({ field }) => (
+                                                        <FormItem>
+                                                            <FormLabel>
+                                                                {t(
+                                                                    "maintenancePageMessage"
+                                                                )}
+                                                            </FormLabel>
+                                                            <FormControl>
+                                                                <Textarea
+                                                                    {...field}
+                                                                    rows={4}
+                                                                    placeholder={t(
+                                                                        "maintenancePageMessagePlaceholder"
+                                                                    )}
+                                                                />
+                                                            </FormControl>
+                                                            <FormDescription>
+                                                                {t(
+                                                                    "maintenancePageMessageDescription"
+                                                                )}
+                                                            </FormDescription>
+                                                            <FormMessage />
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            </SettingsFormCell>
+
+                                            <SettingsFormCell span="half">
+                                                <FormField
+                                                    control={
+                                                        maintenanceForm.control
+                                                    }
+                                                    name="maintenanceEstimatedTime"
+                                                    render={({ field }) => (
+                                                        <FormItem>
+                                                            <FormLabel>
+                                                                {t(
+                                                                    "maintenancePageTimeTitle"
+                                                                )}
+                                                            </FormLabel>
+                                                            <FormControl>
+                                                                <Input
+                                                                    {...field}
+                                                                    placeholder={t(
+                                                                        "maintenanceTime"
+                                                                    )}
+                                                                />
+                                                            </FormControl>
+                                                            <FormDescription>
+                                                                {t(
+                                                                    "maintenanceEstimatedTimeDescription"
+                                                                )}
+                                                            </FormDescription>
+                                                            <FormMessage />
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            </SettingsFormCell>
+                                        </>
+                                    )}
+                                </SettingsFormGrid>
+                            </form>
+                        </Form>
+                    </SettingsSectionForm>
+                </SettingsSectionBody>
+
+                        <SettingsSectionFooter>
+                            <Button
+                                type="submit"
+                                loading={maintenanceSaveLoading}
+                                disabled={maintenanceSaveLoading}
+                                form="maintenance-settings-form"
+                            >
+                                {t("saveSettings")}
+                            </Button>
+                        </SettingsSectionFooter>
+                    </SettingsSection>
+                </SettingsContainer>
+            </div>
+        </>
+    );
+}

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

@@ -10,6 +10,6 @@ export default async function ResourcePage(props: {
 }) {
     const params = await props.params;
     redirect(
-        `/${params.orgId}/settings/resources/proxy/${params.niceId}/proxy`
+        `/${params.orgId}/settings/resources/public/${params.niceId}/general`
     );
 }

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

@@ -0,0 +1,250 @@
+"use client";
+
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { BrowserGatewayTargetForm } from "@app/components/BrowserGatewayTargetForm";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+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, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { GetResourceResponse } from "@server/routers/resource";
+import type { ResourceContextType } from "@app/contexts/resourceContext";
+
+type ExistingTarget = {
+    targetId: number;
+    siteId: number;
+};
+
+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
+                tiers={tierMatrix[TierFeature.AdvancedPublicResources]}
+            />
+            <RdpServerForm
+                orgId={params.orgId}
+                resource={resource}
+                updateResource={updateResource}
+                disabled={disabled}
+                targetsResponse={targetsResponse ?? { targets: [] }}
+            />
+        </SettingsContainer>
+    );
+}
+
+function RdpServerForm({
+    orgId,
+    resource,
+    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];
+
+    const formSchema = useMemo(
+        () => createBrowserGatewayTargetFormSchema(t),
+        [t]
+    );
+
+    const form = useForm<BrowserGatewayTargetFormValues>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            selectedSites: targets.map((target) => ({
+                siteId: target.siteId,
+                name: target.siteName ?? String(target.siteId),
+                type: "newt" as const
+            })),
+            destination: firstTarget?.ip ?? "",
+            destinationPort: firstTarget ? String(firstTarget.port) : "3389"
+        }
+    });
+
+    const [existingTargets, setExistingTargets] = useState<ExistingTarget[]>(
+        () =>
+            targets.map((target) => ({
+                targetId: target.targetId,
+                siteId: target.siteId
+            }))
+    );
+
+    const [, formAction, isSubmitting] = useActionState(save, null);
+
+    async function save() {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const { selectedSites, destination, destinationPort } =
+            form.getValues();
+
+        try {
+            const selectedSiteIds = new Set(selectedSites.map((s) => s.siteId));
+            const existingSiteIds = new Set(
+                existingTargets.map((t) => t.siteId)
+            );
+
+            const toDelete = existingTargets.filter(
+                (t) => !selectedSiteIds.has(t.siteId)
+            );
+            await Promise.all(toDelete.map((t) => api.delete(`/target/${t.targetId}`)));
+
+            const toUpdate = existingTargets.filter((t) =>
+                selectedSiteIds.has(t.siteId)
+            );
+            await Promise.all(
+                toUpdate.map((t) =>
+                    api.post(`/target/${t.targetId}`, {
+                        mode: "rdp",
+                        ip: destination,
+                        port: Number(destinationPort),
+                        siteId: t.siteId,
+                        hcEnabled: false
+                    })
+                )
+            );
+
+            const toCreate = selectedSites.filter(
+                (s) => !existingSiteIds.has(s.siteId)
+            );
+            const created = await Promise.all(
+                toCreate.map((s) =>
+                    api.put(`/resource/${resource.resourceId}/target`, {
+                        siteId: s.siteId,
+                        mode: "rdp",
+                        ip: destination,
+                        port: Number(destinationPort),
+                        hcEnabled: false
+                    })
+                )
+            );
+
+            const newTargets: ExistingTarget[] = created.map((res, i) => ({
+                targetId: res.data.data.targetId,
+                siteId: toCreate[i].siteId
+            }));
+            setExistingTargets([...toUpdate, ...newTargets]);
+
+            toast({
+                title: t("settingsUpdated"),
+                description: t("settingsUpdatedDescription")
+            });
+            router.refresh();
+        } catch (err) {
+            console.error(err);
+            toast({
+                variant: "destructive",
+                title: t("settingsErrorUpdate"),
+                description: formatAxiosError(
+                    err,
+                    t("settingsErrorUpdateDescription")
+                )
+            });
+        }
+    }
+
+    return (
+        <SettingsSection>
+            <SettingsSectionHeader>
+                <SettingsSectionTitle>{t("rdpServer")}</SettingsSectionTitle>
+                <SettingsSectionDescription>
+                    {t("rdpServerDescription")}
+                </SettingsSectionDescription>
+            </SettingsSectionHeader>
+            <fieldset
+                disabled={disabled}
+                className={disabled ? "opacity-50 pointer-events-none" : ""}
+            >
+                <Form {...form}>
+                    <SettingsSectionBody>
+                        <SettingsSectionForm variant="half">
+                            <BrowserGatewayTargetForm
+                                control={form.control}
+                                orgId={orgId}
+                                multiSite={true}
+                                sitesField="selectedSites"
+                                destinationField="destination"
+                                destinationPortField="destinationPort"
+                                learnMoreHref="https://docs.pangolin.net/manage/resources/public/rdp#site-and-host-configuration"
+                                defaultPort={3389}
+                            />
+                        </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]/rules/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { ResourcePolicyEditForm } from "@app/components/resource-policy/ResourcePolicyEditForm";
+
+export default function ResourcePolicyRulesPage() {
+    return <ResourcePolicyEditForm section="rules" />;
+}

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

@@ -0,0 +1,536 @@
+"use client";
+
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsFormCell,
+    SettingsFormGrid,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle,
+    SettingsSubsectionDescription,
+    SettingsSubsectionHeader,
+    SettingsSubsectionTitle
+} from "@app/components/Settings";
+import { SshServerSettingsFields } from "@app/components/SshServerSettingsFields";
+import { BrowserGatewayTargetForm } from "@app/components/BrowserGatewayTargetForm";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import { SitesSelector } 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";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
+import { ChevronsUpDown } from "lucide-react";
+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, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { GetResourceResponse } from "@server/routers/resource";
+import type { ResourceContextType } from "@app/contexts/resourceContext";
+
+type ExistingTarget = {
+    targetId: number;
+    siteId: number;
+};
+
+type TargetRow = {
+    targetId: number;
+    resourceId: number;
+    siteId: number;
+    siteName?: string;
+    mode: string | null;
+    ip: string;
+    port: number;
+};
+
+type ResourceTargetsResponse = {
+    targets: TargetRow[];
+};
+
+export default function SshSettingsPage(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, "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
+                tiers={tierMatrix[TierFeature.AdvancedPublicResources]}
+            />
+            <SshServerForm
+                orgId={params.orgId}
+                resource={resource}
+                updateResource={updateResource}
+                disabled={disabled}
+                targetsResponse={targetsResponse ?? { targets: [] }}
+            />
+        </SettingsContainer>
+    );
+}
+
+function SshServerForm({
+    orgId,
+    resource,
+    updateResource,
+    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] = useState<"standard" | "native">(
+        isNativeInitially ? "native" : "standard"
+    );
+    const isNative = sshServerMode === "native";
+
+    const formSchema = useMemo(
+        () => createSshSettingsFormSchema(t, { isNative }),
+        [t, isNative]
+    );
+
+    const form = useForm<SshSettingsFormValues>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            pamMode: initialPamMode,
+            standardDaemonLocation: initialStandardDaemonLocation,
+            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"
+        }
+    });
+
+    const [existingTargets, setExistingTargets] = useState<ExistingTarget[]>(
+        () =>
+            isNativeInitially
+                ? []
+                : targets.map((target) => ({
+                      targetId: target.targetId,
+                      siteId: target.siteId,
+                  }))
+    );
+
+    const [nativeExistingTarget, setNativeExistingTarget] =
+        useState<ExistingTarget | null>(() =>
+            isNativeInitially && firstTarget
+                ? {
+                      targetId: firstTarget.targetId,
+                      siteId: firstTarget.siteId,
+                  }
+                : null
+        );
+    const [nativeSiteOpen, setNativeSiteOpen] = useState(false);
+    const [, formAction, isSubmitting] = useActionState(save, null);
+
+    const pamMode = form.watch("pamMode");
+    const standardDaemonLocation = form.watch("standardDaemonLocation");
+    const authDaemonPort = form.watch("authDaemonPort");
+    const selectedNativeSite = form.watch("selectedNativeSite");
+
+    async function save() {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const values = form.getValues();
+        const effectiveMode = isNative ? "native" : values.standardDaemonLocation;
+        const effectivePort =
+            !isNative &&
+            values.standardDaemonLocation === "remote" &&
+            values.authDaemonPort
+                ? Number(values.authDaemonPort)
+                : null;
+
+        try {
+            await api.post(`/resource/${resource.resourceId}`, {
+                pamMode: values.pamMode,
+                authDaemonMode: effectiveMode,
+                authDaemonPort: effectivePort
+            });
+
+            updateResource({
+                ...resource,
+                pamMode: values.pamMode,
+                authDaemonMode: effectiveMode
+            });
+
+            if (isNative) {
+                const nativeSite = values.selectedNativeSite;
+                if (nativeSite) {
+                    if (nativeExistingTarget) {
+                        await api.post(
+                            `/target/${nativeExistingTarget.targetId}`,
+                            {
+                                mode: "ssh",
+                                ip: "localhost",
+                                port: 22,
+                                siteId: nativeSite.siteId,
+                                hcEnabled: false
+                            }
+                        );
+                        setNativeExistingTarget({
+                            ...nativeExistingTarget,
+                            siteId: nativeSite.siteId
+                        });
+                    } else {
+                        const res = await api.put(
+                            `/resource/${resource.resourceId}/target`,
+                            {
+                                siteId: nativeSite.siteId,
+                                mode: "ssh",
+                                ip: "localhost",
+                                port: 22,
+                                hcEnabled: false
+                            }
+                        );
+                        setNativeExistingTarget({
+                            targetId: res.data.data.targetId,
+                            siteId: nativeSite.siteId,
+                        });
+                    }
+                }
+            } else {
+                const useMultiSite =
+                    values.standardDaemonLocation !== "site" ||
+                    values.pamMode === "passthrough";
+                const activeSites = useMultiSite
+                    ? values.selectedSites
+                    : 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(
+                    (t) => !selectedSiteIds.has(t.siteId)
+                );
+                await Promise.all(
+                    toDelete.map((t) => api.delete(`/target/${t.targetId}`))
+                );
+
+                const toUpdate = existingTargets.filter((t) =>
+                    selectedSiteIds.has(t.siteId)
+                );
+                await Promise.all(
+                    toUpdate.map((t) =>
+                        api.post(`/target/${t.targetId}`, {
+                            mode: "ssh",
+                            ip: values.destination,
+                            port: Number(values.destinationPort),
+                            siteId: t.siteId,
+                            hcEnabled: false
+                        })
+                    )
+                );
+
+                const toCreate = activeSites.filter(
+                    (s) => !existingSiteIds.has(s.siteId)
+                );
+                const created = await Promise.all(
+                    toCreate.map((s) =>
+                        api.put(`/resource/${resource.resourceId}/target`, {
+                            siteId: s.siteId,
+                            mode: "ssh",
+                            ip: values.destination,
+                            port: Number(values.destinationPort),
+                            hcEnabled: false
+                        })
+                    )
+                );
+
+                const newTargets: ExistingTarget[] = created.map((res, i) => ({
+                    targetId: res.data.data.targetId,
+                    siteId: toCreate[i].siteId,
+                }));
+                setExistingTargets([...toUpdate, ...newTargets]);
+            }
+
+            toast({
+                title: t("settingsUpdated"),
+                description: t("settingsUpdatedDescription")
+            });
+            router.refresh();
+        } catch (err) {
+            console.error(err);
+            toast({
+                variant: "destructive",
+                title: t("settingsErrorUpdate"),
+                description: formatAxiosError(
+                    err,
+                    t("settingsErrorUpdateDescription")
+                )
+            });
+        }
+    }
+
+    const useMultiSiteTargetForm =
+        !isNative &&
+        (standardDaemonLocation !== "site" || pamMode === "passthrough");
+
+    return (
+        <SettingsSection>
+            <SettingsSectionHeader>
+                <SettingsSectionTitle>{t("sshServer")}</SettingsSectionTitle>
+                <SettingsSectionDescription>
+                    {t("sshServerDescription")}
+                </SettingsSectionDescription>
+            </SettingsSectionHeader>
+            <fieldset
+                disabled={disabled}
+                className={disabled ? "opacity-50 pointer-events-none" : ""}
+            >
+                <Form {...form}>
+                    <SettingsSectionBody>
+                        <SettingsSectionForm variant="half">
+                            <SettingsFormGrid>
+                                <SshServerSettingsFields
+                                    idPrefix="public-ssh-edit"
+                                    pamMode={pamMode}
+                                    standardDaemonLocation={
+                                        standardDaemonLocation
+                                    }
+                                    authDaemonPort={authDaemonPort}
+                                    onPamModeChange={(value) =>
+                                        form.setValue("pamMode", value, {
+                                            shouldValidate: true
+                                        })
+                                    }
+                                    onStandardDaemonLocationChange={(value) =>
+                                        form.setValue(
+                                            "standardDaemonLocation",
+                                            value,
+                                            { shouldValidate: true }
+                                        )
+                                    }
+                                    onAuthDaemonPortChange={(value) =>
+                                        form.setValue("authDaemonPort", value, {
+                                            shouldValidate: true
+                                        })
+                                    }
+                                    authDaemonPortError={
+                                        form.formState.errors.authDaemonPort
+                                            ?.message
+                                    }
+                                    sshServerMode={sshServerMode}
+                                    serverModeDisplay="badge"
+                                />
+
+                                <SettingsFormCell span="full">
+                                    <SettingsSubsectionHeader>
+                                        <SettingsSubsectionTitle>
+                                            {t("sshServerDestination")}
+                                        </SettingsSubsectionTitle>
+                                        <SettingsSubsectionDescription>
+                                            {t(
+                                                "sshServerDestinationDescription"
+                                            )}
+                                        </SettingsSubsectionDescription>
+                                    </SettingsSubsectionHeader>
+                                </SettingsFormCell>
+
+                                {isNative ? (
+                                    <SettingsFormCell span="half">
+                                        <FormField
+                                            control={form.control}
+                                            name="selectedNativeSite"
+                                            render={() => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t("sites")}
+                                                    </FormLabel>
+                                                    <Popover
+                                                        open={nativeSiteOpen}
+                                                        onOpenChange={
+                                                            setNativeSiteOpen
+                                                        }
+                                                    >
+                                                        <PopoverTrigger asChild>
+                                                            <FormControl>
+                                                                <Button
+                                                                    variant="outline"
+                                                                    role="combobox"
+                                                                    className="w-full 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>
+                                            )}
+                                        />
+                                    </SettingsFormCell>
+                                ) : useMultiSiteTargetForm ? (
+                                    <SettingsFormCell span="full">
+                                        <BrowserGatewayTargetForm
+                                            control={form.control}
+                                            orgId={orgId}
+                                            multiSite={true}
+                                            sitesField="selectedSites"
+                                            destinationField="destination"
+                                            destinationPortField="destinationPort"
+                                            learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh#site-and-host-configuration"
+                                            defaultPort={22}
+                                        />
+                                    </SettingsFormCell>
+                                ) : (
+                                    <SettingsFormCell span="full">
+                                        <BrowserGatewayTargetForm
+                                            control={form.control}
+                                            orgId={orgId}
+                                            multiSite={false}
+                                            siteField="selectedSite"
+                                            destinationField="destination"
+                                            destinationPortField="destinationPort"
+                                            learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh#site-and-host-configuration"
+                                            defaultPort={22}
+                                        />
+                                    </SettingsFormCell>
+                                )}
+                            </SettingsFormGrid>
+                        </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]/tcp/page.tsx

@@ -0,0 +1,320 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+    SettingsContainer,
+    SettingsFormCell,
+    SettingsFormGrid,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { SwitchInput } from "@app/components/SwitchInput";
+import {
+    StrategyOption,
+    StrategySelect
+} from "@app/components/StrategySelect";
+import { Alert, AlertDescription } from "@app/components/ui/alert";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import type { ResourceContextType } from "@app/contexts/resourceContext";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useResourceContext } from "@app/hooks/useResourceContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient } from "@app/lib/api";
+import { formatAxiosError } from "@app/lib/api/formatAxiosError";
+import { resourceQueries } from "@app/lib/queries";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { tlsNameSchema } from "@server/lib/schemas";
+import { useQuery } from "@tanstack/react-query";
+import {
+    ProxyResourceTargetsForm
+} from "@app/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm";
+import {
+    AlertTriangle,
+} from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import {
+    use,
+    useActionState,
+    useMemo
+} from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+export default function ReverseProxyTargetsPage(props: {
+    params: Promise<{ resourceId: number; orgId: string }>;
+}) {
+    const params = use(props.params);
+    const { resource, updateResource } = useResourceContext();
+
+    const { data: remoteTargets = [], isLoading: isLoadingTargets } = useQuery(
+        resourceQueries.resourceTargets({
+            resourceId: resource.resourceId
+        })
+    );
+
+    if (isLoadingTargets) {
+        return null;
+    }
+
+    return (
+        <SettingsContainer>
+            <ProxyResourceTargetsForm
+                orgId={params.orgId}
+                isHttp={["http", "ssh", "rdp", "vnc"].includes(resource.mode)}
+                initialTargets={remoteTargets}
+                resource={resource}
+                updateResource={updateResource}
+            />
+
+            {resource.mode == "tcp" && (
+                <ProxyResourceProtocolForm
+                    resource={resource}
+                    updateResource={updateResource}
+                />
+            )}
+        </SettingsContainer>
+    );
+}
+
+function ProxyResourceProtocolForm({
+    resource,
+    updateResource
+}: Pick<ResourceContextType, "resource" | "updateResource">) {
+    const t = useTranslations();
+
+    const api = createApiClient(useEnvContext());
+
+    const proxySettingsSchema = z.object({
+        setHostHeader: z
+            .string()
+            .optional()
+            .refine(
+                (data) => {
+                    if (data) {
+                        return tlsNameSchema.safeParse(data).success;
+                    }
+                    return true;
+                },
+                {
+                    message: t("proxyErrorInvalidHeader")
+                }
+            ),
+        headers: z
+            .array(z.object({ name: z.string(), value: z.string() }))
+            .nullable(),
+        proxyProtocol: z.boolean().optional(),
+        proxyProtocolVersion: z.int().min(1).max(2).optional()
+    });
+
+    const proxySettingsForm = useForm({
+        resolver: zodResolver(proxySettingsSchema),
+        defaultValues: {
+            setHostHeader: resource.setHostHeader || "",
+            headers: resource.headers,
+            proxyProtocol: resource.proxyProtocol || false,
+            proxyProtocolVersion: resource.proxyProtocolVersion || 1
+        }
+    });
+
+    const router = useRouter();
+
+    const proxyProtocolVersionOptions = useMemo(
+        (): StrategyOption<"1" | "2">[] => [
+            {
+                id: "1",
+                title: t("version1"),
+                description: t("version1Description")
+            },
+            {
+                id: "2",
+                title: t("version2"),
+                description: t("version2Description")
+            }
+        ],
+        [t]
+    );
+
+    const [, formAction, isSubmitting] = useActionState(
+        saveProtocolSettings,
+        null
+    );
+
+    async function saveProtocolSettings() {
+        const isValid = proxySettingsForm.trigger();
+        if (!isValid) return;
+
+        try {
+            // For TCP/UDP resources, save proxy protocol settings
+            const proxyData = proxySettingsForm.getValues();
+
+            const payload = {
+                proxyProtocol: proxyData.proxyProtocol || false,
+                proxyProtocolVersion: proxyData.proxyProtocolVersion || 1
+            };
+
+            await api.post(`/resource/${resource.resourceId}`, payload);
+
+            updateResource({
+                ...resource,
+                proxyProtocol: proxyData.proxyProtocol || false,
+                proxyProtocolVersion: proxyData.proxyProtocolVersion || 1
+            });
+
+            toast({
+                title: t("settingsUpdated"),
+                description: t("settingsUpdatedDescription")
+            });
+
+            router.refresh();
+        } catch (err) {
+            console.error(err);
+            toast({
+                variant: "destructive",
+                title: t("settingsErrorUpdate"),
+                description: formatAxiosError(
+                    err,
+                    t("settingsErrorUpdateDescription")
+                )
+            });
+        }
+    }
+
+    return (
+        <SettingsSection>
+            <SettingsSectionHeader>
+                <SettingsSectionTitle>
+                    {t("proxyProtocol")}
+                </SettingsSectionTitle>
+                <SettingsSectionDescription>
+                    {t("proxyProtocolDescription")}
+                </SettingsSectionDescription>
+            </SettingsSectionHeader>
+            <SettingsSectionBody>
+                <SettingsSectionForm variant="half">
+                    <Form {...proxySettingsForm}>
+                        <form
+                            action={formAction}
+                            id="proxy-protocol-settings-form"
+                        >
+                            <SettingsFormGrid>
+                                <SettingsFormCell span="full">
+                                    <FormField
+                                        control={proxySettingsForm.control}
+                                        name="proxyProtocol"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormControl>
+                                                    <SwitchInput
+                                                        id="proxy-protocol-toggle"
+                                                        label={t(
+                                                            "enableProxyProtocol"
+                                                        )}
+                                                        description={t(
+                                                            "proxyProtocolInfo"
+                                                        )}
+                                                        defaultChecked={
+                                                            field.value || false
+                                                        }
+                                                        onCheckedChange={(
+                                                            val
+                                                        ) => {
+                                                            field.onChange(val);
+                                                        }}
+                                                    />
+                                                </FormControl>
+                                            </FormItem>
+                                        )}
+                                    />
+                                </SettingsFormCell>
+
+                                {proxySettingsForm.watch("proxyProtocol") && (
+                                    <>
+                                        <SettingsFormCell span="full">
+                                            <Alert className="[&>svg]:self-start" variant="neutral">
+                                                <AlertTriangle className="h-4 w-4" />
+                                                <AlertDescription>
+                                                    <strong>
+                                                        {t("warning")}:
+                                                    </strong>{" "}
+                                                    {t("proxyProtocolWarning")}
+                                                </AlertDescription>
+                                            </Alert>
+                                        </SettingsFormCell>
+
+                                        <SettingsFormCell span="full">
+                                            <FormField
+                                                control={
+                                                    proxySettingsForm.control
+                                                }
+                                                name="proxyProtocolVersion"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormLabel>
+                                                            {t(
+                                                                "proxyProtocolVersion"
+                                                            )}
+                                                        </FormLabel>
+                                                        <FormControl>
+                                                            <StrategySelect<
+                                                                "1" | "2"
+                                                            >
+                                                                value={
+                                                                    field.value ===
+                                                                    2
+                                                                        ? "2"
+                                                                        : "1"
+                                                                }
+                                                                options={
+                                                                    proxyProtocolVersionOptions
+                                                                }
+                                                                onChange={(
+                                                                    value
+                                                                ) =>
+                                                                    field.onChange(
+                                                                        parseInt(
+                                                                            value,
+                                                                            10
+                                                                        )
+                                                                    )
+                                                                }
+                                                                cols={2}
+                                                            />
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </SettingsFormCell>
+                                    </>
+                                )}
+                            </SettingsFormGrid>
+                        </form>
+                    </Form>
+                </SettingsSectionForm>
+            </SettingsSectionBody>
+            <SettingsSectionFooter>
+                <Button
+                    disabled={isSubmitting}
+                    loading={isSubmitting}
+                    type="submit"
+                    form="proxy-protocol-settings-form"
+                >
+                    {t("saveProxyProtocol")}
+                </Button>
+            </SettingsSectionFooter>
+        </SettingsSection>
+    );
+}

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

@@ -0,0 +1,43 @@
+"use client";
+
+import {
+    SettingsContainer,
+} from "@app/components/Settings";
+import { useResourceContext } from "@app/hooks/useResourceContext";
+import { resourceQueries } from "@app/lib/queries";
+import { useQuery } from "@tanstack/react-query";
+import {
+    ProxyResourceTargetsForm
+} from "@app/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm";
+import {
+    use,
+} from "react";
+
+export default function ReverseProxyTargetsPage(props: {
+    params: Promise<{ resourceId: number; orgId: string }>;
+}) {
+    const params = use(props.params);
+    const { resource, updateResource } = useResourceContext();
+
+    const { data: remoteTargets = [], isLoading: isLoadingTargets } = useQuery(
+        resourceQueries.resourceTargets({
+            resourceId: resource.resourceId
+        })
+    );
+
+    if (isLoadingTargets) {
+        return null;
+    }
+
+    return (
+        <SettingsContainer>
+            <ProxyResourceTargetsForm
+                orgId={params.orgId}
+                isHttp={["http", "ssh", "rdp", "vnc"].includes(resource.mode)}
+                initialTargets={remoteTargets}
+                resource={resource}
+                updateResource={updateResource}
+            />
+        </SettingsContainer>
+    );
+}

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

@@ -0,0 +1,250 @@
+"use client";
+
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { BrowserGatewayTargetForm } from "@app/components/BrowserGatewayTargetForm";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+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, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { GetResourceResponse } from "@server/routers/resource";
+import type { ResourceContextType } from "@app/contexts/resourceContext";
+
+type ExistingTarget = {
+    targetId: number;
+    siteId: number;
+};
+
+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
+                tiers={tierMatrix[TierFeature.AdvancedPublicResources]}
+            />
+            <VncServerForm
+                orgId={params.orgId}
+                resource={resource}
+                updateResource={updateResource}
+                disabled={disabled}
+                targetsResponse={targetsResponse ?? { targets: [] }}
+            />
+        </SettingsContainer>
+    );
+}
+
+function VncServerForm({
+    orgId,
+    resource,
+    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];
+
+    const formSchema = useMemo(
+        () => createBrowserGatewayTargetFormSchema(t),
+        [t]
+    );
+
+    const form = useForm<BrowserGatewayTargetFormValues>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            selectedSites: targets.map((target) => ({
+                siteId: target.siteId,
+                name: target.siteName ?? String(target.siteId),
+                type: "newt" as const
+            })),
+            destination: firstTarget?.ip ?? "",
+            destinationPort: firstTarget ? String(firstTarget.port) : "5900"
+        }
+    });
+
+    const [existingTargets, setExistingTargets] = useState<ExistingTarget[]>(
+        () =>
+            targets.map((target) => ({
+                targetId: target.targetId,
+                siteId: target.siteId
+            }))
+    );
+
+    const [, formAction, isSubmitting] = useActionState(save, null);
+
+    async function save() {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const { selectedSites, destination, destinationPort } =
+            form.getValues();
+
+        try {
+            const selectedSiteIds = new Set(selectedSites.map((s) => s.siteId));
+            const existingSiteIds = new Set(
+                existingTargets.map((t) => t.siteId)
+            );
+
+            const toDelete = existingTargets.filter(
+                (t) => !selectedSiteIds.has(t.siteId)
+            );
+            await Promise.all(toDelete.map((t) => api.delete(`/target/${t.targetId}`)));
+
+            const toUpdate = existingTargets.filter((t) =>
+                selectedSiteIds.has(t.siteId)
+            );
+            await Promise.all(
+                toUpdate.map((t) =>
+                    api.post(`/target/${t.targetId}`, {
+                        mode: "vnc",
+                        ip: destination,
+                        port: Number(destinationPort),
+                        siteId: t.siteId,
+                        hcEnabled: false
+                    })
+                )
+            );
+
+            const toCreate = selectedSites.filter(
+                (s) => !existingSiteIds.has(s.siteId)
+            );
+            const created = await Promise.all(
+                toCreate.map((s) =>
+                    api.put(`/resource/${resource.resourceId}/target`, {
+                        siteId: s.siteId,
+                        mode: "vnc",
+                        ip: destination,
+                        port: Number(destinationPort),
+                        hcEnabled: false
+                    })
+                )
+            );
+
+            const newTargets: ExistingTarget[] = created.map((res, i) => ({
+                targetId: res.data.data.targetId,
+                siteId: toCreate[i].siteId
+            }));
+            setExistingTargets([...toUpdate, ...newTargets]);
+
+            toast({
+                title: t("settingsUpdated"),
+                description: t("settingsUpdatedDescription")
+            });
+            router.refresh();
+        } catch (err) {
+            console.error(err);
+            toast({
+                variant: "destructive",
+                title: t("settingsErrorUpdate"),
+                description: formatAxiosError(
+                    err,
+                    t("settingsErrorUpdateDescription")
+                )
+            });
+        }
+    }
+
+    return (
+        <SettingsSection>
+            <SettingsSectionHeader>
+                <SettingsSectionTitle>{t("vncServer")}</SettingsSectionTitle>
+                <SettingsSectionDescription>
+                    {t("vncServerDescription")}
+                </SettingsSectionDescription>
+            </SettingsSectionHeader>
+            <fieldset
+                disabled={disabled}
+                className={disabled ? "opacity-50 pointer-events-none" : ""}
+            >
+                <Form {...form}>
+                    <SettingsSectionBody>
+                        <SettingsSectionForm variant="half">
+                            <BrowserGatewayTargetForm
+                                control={form.control}
+                                orgId={orgId}
+                                multiSite={true}
+                                sitesField="selectedSites"
+                                destinationField="destination"
+                                destinationPortField="destinationPort"
+                                learnMoreHref="https://docs.pangolin.net/manage/resources/public/vnc"
+                                defaultPort={5900}
+                            />
+                        </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/page.tsx

@@ -1,7 +1,7 @@
-import type { ResourceRow } from "@app/components/ProxyResourcesTable";
-import ProxyResourcesTable from "@app/components/ProxyResourcesTable";
+import type { ResourceRow } from "@app/components/PublicResourcesTable";
+import PublicResourcesTable from "@app/components/PublicResourcesTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import ProxyResourcesBanner from "@app/components/ProxyResourcesBanner";
+import PublicResourcesBanner from "@app/components/PublicResourcesBanner";
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import OrgProvider from "@app/providers/OrgProvider";
@@ -108,10 +108,11 @@ export default async function ProxyResourcesPage(
             orgId: params.orgId,
             nice: resource.niceId,
             domain: `${resource.ssl ? "https://" : "http://"}${toUnicode(resource.fullDomain || "")}`,
-            protocol: resource.protocol,
             proxyPort: resource.proxyPort,
-            http: resource.http,
-            authState: !resource.http
+            labels: resource.labels,
+            authState: !["http", "ssh", "rdp", "vnc"].includes(
+                resource.mode || ""
+            )
                 ? "none"
                 : resource.sso ||
                     resource.pincodeId !== null ||
@@ -125,6 +126,7 @@ export default async function ProxyResourcesPage(
             fullDomain: resource.fullDomain ?? null,
             ssl: resource.ssl,
             wildcard: resource.wildcard,
+            mode: resource.mode,
             targets: resource.targets?.map((target) => ({
                 targetId: target.targetId,
                 ip: target.ip,
@@ -144,10 +146,10 @@ export default async function ProxyResourcesPage(
                 description={t("proxyResourceDescription")}
             />
 
-            <ProxyResourcesBanner />
+            <PublicResourcesBanner />
 
             <OrgProvider org={org}>
-                <ProxyResourcesTable
+                <PublicResourcesTable
                     resources={resourceRows}
                     orgId={params.orgId}
                     rowCount={pagination.total}

src/app/[orgId]/settings/sites/[niceId]/general/page.tsx

@@ -21,6 +21,8 @@ import { toast, useToast } from "@app/hooks/useToast";
 import { useRouter } from "next/navigation";
 import {
     SettingsContainer,
+    SettingsFormCell,
+    SettingsFormGrid,
     SettingsSection,
     SettingsSectionHeader,
     SettingsSectionTitle,
@@ -36,35 +38,53 @@ import { useState } from "react";
 import { SwitchInput } from "@app/components/SwitchInput";
 import { ExternalLink } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { useOrgContext } from "@app/hooks/useOrgContext";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { tierMatrix, TierFeature } from "@server/lib/billing/tierMatrix";
+import { Button as ButtonUI } from "@/components/ui/button";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 
 const GeneralFormSchema = z.object({
     name: z.string().nonempty("Name is required"),
     niceId: z.string().min(1).max(255).optional(),
-    dockerSocketEnabled: z.boolean().optional()
+    dockerSocketEnabled: z.boolean().optional(),
+    autoUpdateEnabled: z.boolean().optional(),
+    autoUpdateOverrideOrg: z.boolean().optional()
 });
 
 type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
 
 export default function GeneralPage() {
     const { site, updateSite } = useSiteContext();
+    const { org } = useOrgContext();
 
     const { env } = useEnvContext();
     const api = createApiClient(useEnvContext());
     const router = useRouter();
     const t = useTranslations();
     const { toast } = useToast();
+    const { isPaidUser } = usePaidStatus();
+    const hasAutoUpdateFeature = isPaidUser(
+        tierMatrix[TierFeature.NewtAutoUpdate]
+    );
 
     const [loading, setLoading] = useState(false);
     const [activeCidrTagIndex, setActiveCidrTagIndex] = useState<number | null>(
         null
     );
 
+    const orgAutoUpdate = org.org.settingsEnableGlobalNewtAutoUpdate ?? false;
+
     const form = useForm({
         resolver: zodResolver(GeneralFormSchema),
         defaultValues: {
             name: site?.name,
             niceId: site?.niceId || "",
-            dockerSocketEnabled: site?.dockerSocketEnabled ?? false
+            dockerSocketEnabled: site?.dockerSocketEnabled ?? false,
+            autoUpdateEnabled: site?.autoUpdateOverrideOrg
+                ? (site?.autoUpdateEnabled ?? false)
+                : orgAutoUpdate,
+            autoUpdateOverrideOrg: site?.autoUpdateOverrideOrg ?? false
         },
         mode: "onChange"
     });
@@ -76,13 +96,17 @@ export default function GeneralPage() {
             await api.post(`/site/${site?.siteId}`, {
                 name: data.name,
                 niceId: data.niceId,
-                dockerSocketEnabled: data.dockerSocketEnabled
+                dockerSocketEnabled: data.dockerSocketEnabled,
+                autoUpdateEnabled: data.autoUpdateEnabled,
+                autoUpdateOverrideOrg: data.autoUpdateOverrideOrg
             });
 
             updateSite({
                 name: data.name,
                 niceId: data.niceId,
-                dockerSocketEnabled: data.dockerSocketEnabled
+                dockerSocketEnabled: data.dockerSocketEnabled,
+                autoUpdateEnabled: data.autoUpdateEnabled,
+                autoUpdateOverrideOrg: data.autoUpdateOverrideOrg
             });
 
             if (data.niceId && data.niceId !== site?.niceId) {
@@ -131,48 +155,54 @@ export default function GeneralPage() {
                 </SettingsSectionHeader>
 
                 <SettingsSectionBody>
-                    <SettingsSectionForm>
+                    <SettingsSectionForm variant="half">
                         <Form {...form}>
                             <form
                                 onSubmit={form.handleSubmit(onSubmit)}
                                 className="space-y-6"
                                 id="general-settings-form"
                             >
-                                <FormField
-                                    control={form.control}
-                                    name="name"
-                                    render={({ field }) => (
-                                        <FormItem>
-                                            <FormLabel>{t("name")}</FormLabel>
-                                            <FormControl>
-                                                <Input {...field} />
-                                            </FormControl>
-                                            <FormMessage />
-                                        </FormItem>
-                                    )}
-                                />
-
-                                <FormField
-                                    control={form.control}
-                                    name="niceId"
-                                    render={({ field }) => (
-                                        <FormItem>
-                                            <FormLabel>
-                                                {t("identifier")}
-                                            </FormLabel>
-                                            <FormControl>
-                                                <Input
-                                                    {...field}
-                                                    placeholder={t(
-                                                        "enterIdentifier"
-                                                    )}
-                                                    className="flex-1"
-                                                />
-                                            </FormControl>
-                                            <FormMessage />
-                                        </FormItem>
-                                    )}
-                                />
+                                <SettingsFormGrid>
+                                    <SettingsFormCell span="half">
+                                        <FormField
+                                            control={form.control}
+                                            name="name"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t("name")}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input {...field} />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </SettingsFormCell>
+                                    <SettingsFormCell span="half">
+                                        <FormField
+                                            control={form.control}
+                                            name="niceId"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t("identifier")}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input
+                                                            {...field}
+                                                            placeholder={t(
+                                                                "enterIdentifier"
+                                                            )}
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </SettingsFormCell>
+                                </SettingsFormGrid>
 
                                 {site && site.type === "newt" && (
                                     <FormField
@@ -199,7 +229,9 @@ export default function GeneralPage() {
                                                     {t.rich(
                                                         "enableDockerSocketDescription",
                                                         {
-                                                            docsLink: (chunks) => (
+                                                            docsLink: (
+                                                                chunks
+                                                            ) => (
                                                                 <a
                                                                     href="https://docs.pangolin.net/manage/sites/configure-site#docker-socket-integration"
                                                                     target="_blank"
@@ -217,6 +249,91 @@ export default function GeneralPage() {
                                         )}
                                     />
                                 )}
+
+                                <PaidFeaturesAlert
+                                    tiers={tierMatrix.newtAutoUpdate}
+                                />
+                                {site &&
+                                    site.type === "newt" &&
+                                    !env.flags.disableEnterpriseFeatures && (
+                                        <FormField
+                                            control={form.control}
+                                            name="autoUpdateEnabled"
+                                            render={({ field }) => {
+                                                const isOverriding = form.watch(
+                                                    "autoUpdateOverrideOrg"
+                                                );
+                                                return (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <div className="">
+                                                                <SwitchInput
+                                                                    id="auto-update-enabled"
+                                                                    label={t(
+                                                                        "siteAutoUpdateLabel"
+                                                                    )}
+                                                                    checked={
+                                                                        field.value
+                                                                    }
+                                                                    onCheckedChange={(
+                                                                        checked
+                                                                    ) => {
+                                                                        field.onChange(
+                                                                            checked
+                                                                        );
+                                                                        form.setValue(
+                                                                            "autoUpdateOverrideOrg",
+                                                                            true
+                                                                        );
+                                                                    }}
+                                                                    disabled={
+                                                                        !hasAutoUpdateFeature
+                                                                    }
+                                                                />
+                                                                {isOverriding && (
+                                                                    <ButtonUI
+                                                                        type="button"
+                                                                        variant="link"
+                                                                        size="sm"
+                                                                        className="text-sm text-muted-foreground px-0"
+                                                                        onClick={() => {
+                                                                            form.setValue(
+                                                                                "autoUpdateOverrideOrg",
+                                                                                false
+                                                                            );
+                                                                            form.setValue(
+                                                                                "autoUpdateEnabled",
+                                                                                orgAutoUpdate
+                                                                            );
+                                                                        }}
+                                                                    >
+                                                                        {t(
+                                                                            "siteAutoUpdateResetToOrg"
+                                                                        )}
+                                                                    </ButtonUI>
+                                                                )}
+                                                            </div>
+                                                        </FormControl>
+                                                        <FormDescription>
+                                                            {t(
+                                                                "siteAutoUpdateDescription"
+                                                            )}{" "}
+                                                            <a
+                                                                href="https://docs.pangolin.net/manage/sites/auto-update"
+                                                                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>
+                                                        </FormDescription>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                );
+                                            }}
+                                        />
+                                    )}
                             </form>
                         </Form>
                     </SettingsSectionForm>

src/app/[orgId]/settings/sites/[niceId]/layout.tsx

@@ -1,6 +1,8 @@
 import SiteProvider from "@app/providers/SiteProvider";
+import OrgProvider from "@app/providers/OrgProvider";
 import { internal } from "@app/lib/api";
 import { GetSiteResponse } from "@server/routers/site";
+import { GetOrgResponse } from "@server/routers/org";
 import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
 import { authCookieHeader } from "@app/lib/api/cookies";
@@ -35,6 +37,17 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
         redirect(`/${params.orgId}/settings/sites`);
     }
 
+    let org = null;
+    try {
+        const res = await internal.get<AxiosResponse<GetOrgResponse>>(
+            `/org/${params.orgId}`,
+            await authCookieHeader()
+        );
+        org = res.data.data;
+    } catch {
+        redirect(`/${params.orgId}/settings/sites`);
+    }
+
     const t = await getTranslations();
 
     const navItems = [
@@ -64,10 +77,14 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
             />
 
             <SiteProvider site={site}>
-                <div className="space-y-4">
-                    <SiteInfoCard />
-                    <HorizontalTabs items={navItems}>{children}</HorizontalTabs>
-                </div>
+                <OrgProvider org={org}>
+                    <div className="space-y-4">
+                        <SiteInfoCard />
+                        <HorizontalTabs items={navItems}>
+                            {children}
+                        </HorizontalTabs>
+                    </div>
+                </OrgProvider>
             </SiteProvider>
         </>
     );

src/app/[orgId]/settings/sites/create/page.tsx

@@ -2,6 +2,8 @@
 
 import {
     SettingsContainer,
+    SettingsFormCell,
+    SettingsFormGrid,
     SettingsSection,
     SettingsSectionBody,
     SettingsSectionDescription,
@@ -21,7 +23,7 @@ import {
 } from "@app/components/ui/form";
 import HeaderTitle from "@app/components/SettingsSectionTitle";
 import { z } from "zod";
-import { createElement, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Input } from "@app/components/ui/input";
@@ -35,15 +37,6 @@ import {
     InfoSections,
     InfoSectionTitle
 } from "@app/components/InfoSection";
-import {
-    FaApple,
-    FaCubes,
-    FaDocker,
-    FaFreebsd,
-    FaWindows
-} from "react-icons/fa";
-import { SiNixos, SiKubernetes } from "react-icons/si";
-import { Checkbox, CheckboxWithLabel } from "@app/components/ui/checkbox";
 import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
 import { generateKeypair } from "../[niceId]/wireguardConfig";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
@@ -506,108 +499,122 @@ export default function Page() {
                                         />
                                     </>
                                 )}
-
-                                <Form {...form}>
-                                    <form
-                                        onKeyDown={(e) => {
-                                            if (e.key === "Enter") {
-                                                e.preventDefault(); // block default enter refresh
-                                            }
-                                        }}
-                                        className="space-y-4 grid gap-4 grid-cols-1 md:grid-cols-2 items-start"
-                                        id="create-site-form"
-                                    >
-                                        <FormField
-                                            control={form.control}
-                                            name="name"
-                                            render={({ field }) => (
-                                                <FormItem>
-                                                    <FormLabel>
-                                                        {t("name")}
-                                                    </FormLabel>
-                                                    <FormControl>
-                                                        <Input
-                                                            autoComplete="off"
-                                                            {...field}
-                                                        />
-                                                    </FormControl>
-                                                    <FormMessage />
-                                                    <FormDescription>
-                                                        {t(
-                                                            "siteNameDescription"
+                                <SettingsSectionForm variant="half">
+                                    <Form {...form}>
+                                        <form
+                                            onKeyDown={(e) => {
+                                                if (e.key === "Enter") {
+                                                    e.preventDefault(); // block default enter refresh
+                                                }
+                                            }}
+                                            id="create-site-form"
+                                        >
+                                            <SettingsFormGrid>
+                                                <SettingsFormCell span="half">
+                                                    <FormField
+                                                        control={form.control}
+                                                        name="name"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormLabel>
+                                                                    {t("name")}
+                                                                </FormLabel>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        autoComplete="off"
+                                                                        {...field}
+                                                                    />
+                                                                </FormControl>
+                                                                <FormMessage />
+                                                                <FormDescription>
+                                                                    {t(
+                                                                        "siteNameDescription"
+                                                                    )}
+                                                                </FormDescription>
+                                                            </FormItem>
                                                         )}
-                                                    </FormDescription>
-                                                </FormItem>
-                                            )}
-                                        />
-                                        {form.watch("method") === "newt" && (
-                                            <div className="flex items-center justify-end md:col-start-2">
-                                                <Button
-                                                    type="button"
-                                                    variant="ghost"
-                                                    size="sm"
-                                                    onClick={() =>
-                                                        setShowAdvancedSettings(
-                                                            !showAdvancedSettings
-                                                        )
-                                                    }
-                                                    className="flex items-center gap-2"
-                                                >
-                                                    {showAdvancedSettings ? (
-                                                        <ChevronUp className="h-4 w-4" />
-                                                    ) : (
-                                                        <ChevronDown className="h-4 w-4" />
-                                                    )}
-                                                    {t("advancedSettings")}
-                                                </Button>
-                                            </div>
-                                        )}
-                                        {form.watch("method") === "newt" &&
-                                            showAdvancedSettings && (
-                                                <FormField
-                                                    control={form.control}
-                                                    name="clientAddress"
-                                                    render={({ field }) => (
-                                                        <FormItem className="md:col-start-1 md:col-span-2">
-                                                            <FormLabel>
-                                                                {t(
-                                                                    "siteAddress"
+                                                    />
+                                                </SettingsFormCell>
+                                                {form.watch("method") ===
+                                                    "newt" && (
+                                                    <>
+                                                        <SettingsFormCell span="full">
+                                                            <Button
+                                                                type="button"
+                                                                variant="ghost"
+                                                                size="sm"
+                                                                onClick={() =>
+                                                                    setShowAdvancedSettings(
+                                                                        !showAdvancedSettings
+                                                                    )
+                                                                }
+                                                                className="mt-2 flex items-center gap-2 -ml-3"
+                                                            >
+                                                                {showAdvancedSettings ? (
+                                                                    <ChevronUp className="h-4 w-4" />
+                                                                ) : (
+                                                                    <ChevronDown className="h-4 w-4" />
                                                                 )}
-                                                            </FormLabel>
-                                                            <FormControl>
-                                                                <Input
-                                                                    autoComplete="off"
-                                                                    value={
-                                                                        clientAddress
+                                                                {t(
+                                                                    "advancedSettings"
+                                                                )}
+                                                            </Button>
+                                                        </SettingsFormCell>
+                                                        {showAdvancedSettings && (
+                                                            <SettingsFormCell span="half">
+                                                                <FormField
+                                                                    control={
+                                                                        form.control
                                                                     }
-                                                                    onChange={(
-                                                                        e
-                                                                    ) => {
-                                                                        setClientAddress(
-                                                                            e
-                                                                                .target
-                                                                                .value
-                                                                        );
-                                                                        field.onChange(
-                                                                            e
-                                                                                .target
-                                                                                .value
-                                                                        );
-                                                                    }}
+                                                                    name="clientAddress"
+                                                                    render={({
+                                                                        field
+                                                                    }) => (
+                                                                        <FormItem>
+                                                                            <FormLabel>
+                                                                                {t(
+                                                                                    "siteAddress"
+                                                                                )}
+                                                                            </FormLabel>
+                                                                            <FormControl>
+                                                                                <Input
+                                                                                    autoComplete="off"
+                                                                                    value={
+                                                                                        clientAddress
+                                                                                    }
+                                                                                    onChange={(
+                                                                                        e
+                                                                                    ) => {
+                                                                                        setClientAddress(
+                                                                                            e
+                                                                                                .target
+                                                                                                .value
+                                                                                        );
+                                                                                        field.onChange(
+                                                                                            e
+                                                                                                .target
+                                                                                                .value
+                                                                                        );
+                                                                                    }}
+                                                                                />
+                                                                            </FormControl>
+                                                                            <FormMessage />
+                                                                            <FormDescription>
+                                                                                {t(
+                                                                                    "siteAddressDescription"
+                                                                                )}
+                                                                            </FormDescription>
+                                                                        </FormItem>
+                                                                    )}
                                                                 />
-                                                            </FormControl>
-                                                            <FormMessage />
-                                                            <FormDescription>
-                                                                {t(
-                                                                    "siteAddressDescription"
-                                                                )}
-                                                            </FormDescription>
-                                                        </FormItem>
-                                                    )}
-                                                />
-                                            )}
-                                    </form>
-                                </Form>
+                                                            </SettingsFormCell>
+                                                        )}
+                                                    </>
+                                                )}
+                                            </SettingsFormGrid>
+                                        </form>
+                                    </Form>
+                                </SettingsSectionForm>
                             </SettingsSectionBody>
                         </SettingsSection>
 

src/app/[orgId]/settings/sites/page.tsx

@@ -60,6 +60,7 @@ export default async function SitesPage(props: SitesPageProps) {
         return {
             name: site.name,
             id: site.siteId,
+            labels: site.labels,
             nice: site.niceId.toString(),
             address: site.address?.split("/")[0],
             mbIn: formatSize(site.megabytesIn || 0, site.type),

src/app/admin/idp/create/page.tsx

@@ -243,10 +243,8 @@ export default function Page() {
                                 onCheckedChange={(checked) => {
                                     form.setValue("autoProvision", checked);
                                 }}
+                                description={t("idpAutoProvisionConfigureAfterCreate")}
                             />
-                            <p className="text-sm text-muted-foreground">
-                                {t("idpAutoProvisionConfigureAfterCreate")}
-                            </p>
                         </div>
                     </SettingsSectionBody>
                 </SettingsSection>

src/app/admin/layout.tsx

@@ -13,6 +13,7 @@ import { Layout } from "@app/components/Layout";
 import { adminNavSections } from "../navigation";
 import { pullEnv } from "@app/lib/pullEnv";
 import SubscriptionStatusProvider from "@app/providers/SubscriptionStatusProvider";
+import { build } from "@server/build";
 
 export const dynamic = "force-dynamic";
 
@@ -29,6 +30,11 @@ export default async function AdminLayout(props: LayoutProps) {
     const getUser = cache(verifySession);
     const user = await getUser();
 
+    // Disable the admin page on saas
+    if (build == "saas") {
+        redirect(`/`);
+    }
+
     const env = pullEnv();
 
     if (!user || !user.serverAdmin) {

src/app/admin/license/page.tsx

@@ -42,7 +42,14 @@ import {
     SettingsSectionFooter
 } from "@app/components/Settings";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import { ArrowRight, Check, ExternalLink, Heart, InfoIcon, TicketCheck } from "lucide-react";
+import {
+    ArrowRight,
+    Check,
+    ExternalLink,
+    Heart,
+    InfoIcon,
+    TicketCheck
+} from "lucide-react";
 import Link from "next/link";
 import DismissableBanner from "@app/components/DismissableBanner";
 import CopyTextBox from "@app/components/CopyTextBox";
@@ -50,7 +57,7 @@ import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { SitePriceCalculator } from "@app/components/SitePriceCalculator";
 import { Checkbox } from "@app/components/ui/checkbox";
 import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
-import { useSupporterStatusContext } from "@app/hooks/useSupporterStatusContext";
+// import { useSupporterStatusContext } from "@app/hooks/useSupporterStatusContext";
 import { useTranslations } from "next-intl";
 
 const ENTERPRISE_DOCS_URL =
@@ -82,7 +89,7 @@ export default function LicensePage() {
     const [isActivatingLicense, setIsActivatingLicense] = useState(false);
     const [isDeletingLicense, setIsDeletingLicense] = useState(false);
     const [isRecheckingLicense, setIsRecheckingLicense] = useState(false);
-    const { supporterStatus } = useSupporterStatusContext();
+    // const { supporterStatus } = useSupporterStatusContext();
 
     const t = useTranslations();
 
@@ -347,9 +354,7 @@ export default function LicensePage() {
                     storageKey="license-banner-dismissed"
                     version={1}
                     title={t("licenseBannerTitle")}
-                    titleIcon={
-                        <TicketCheck className="w-5 h-5 text-primary" />
-                    }
+                    titleIcon={<TicketCheck className="w-5 h-5 text-primary" />}
                     description={t("licenseBannerDescription")}
                 >
                     <Link

src/app/auth/layout.tsx

@@ -1,13 +1,6 @@
 import ThemeSwitcher from "@app/components/ThemeSwitcher";
-import { Separator } from "@app/components/ui/separator";
-import { priv } from "@app/lib/api";
-import { pullEnv } from "@app/lib/pullEnv";
-import { build } from "@server/build";
-import { GetLicenseStatusResponse } from "@server/routers/license/types";
-import { AxiosResponse } from "axios";
+import AuthFooter from "@app/components/AuthFooter";
 import { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
-import { cache } from "react";
 
 export const metadata: Metadata = {
     title: {
@@ -22,29 +15,6 @@ type AuthLayoutProps = {
 };
 
 export default async function AuthLayout({ children }: AuthLayoutProps) {
-    const env = pullEnv();
-    const t = await getTranslations();
-    let hideFooter = false;
-
-    let licenseStatus: GetLicenseStatusResponse | null = null;
-    if (build == "enterprise") {
-        const licenseStatusRes = await cache(
-            async () =>
-                await priv.get<AxiosResponse<GetLicenseStatusResponse>>(
-                    "/license/status"
-                )
-        )();
-        licenseStatus = licenseStatusRes.data.data;
-        if (
-            env.branding.hideAuthLayoutFooter &&
-            licenseStatusRes.data.data.isHostLicensed &&
-            licenseStatusRes.data.data.isLicenseValid &&
-            licenseStatusRes.data.data.tier !== "personal"
-        ) {
-            hideFooter = true;
-        }
-    }
-
     return (
         <div className="h-full flex flex-col">
             <div className="hidden md:flex justify-end items-center p-3 space-x-2">
@@ -55,89 +25,7 @@ export default async function AuthLayout({ children }: AuthLayoutProps) {
                 <div className="w-full max-w-md p-3">{children}</div>
             </div>
 
-            {!hideFooter && (
-                <footer className="hidden md:block w-full mt-12 py-3 mb-6 px-4">
-                    <div className="container mx-auto flex flex-wrap justify-center items-center h-3 space-x-4 text-xs text-neutral-400 dark:text-neutral-600">
-                        <a
-                            href="https://pangolin.net"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            aria-label="Built by Fossorial"
-                            className="flex items-center space-x-2 whitespace-nowrap"
-                        >
-                            <span>
-                                © {new Date().getFullYear()} Fossorial, Inc.
-                            </span>
-                        </a>
-                        {build !== "saas" && (
-                            <>
-                                <Separator orientation="vertical" />
-                                <a
-                                    href="https://pangolin.net"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    aria-label="Built by Fossorial"
-                                    className="flex items-center space-x-2 whitespace-nowrap"
-                                >
-                                    <span>
-                                        {process.env.BRANDING_APP_NAME ||
-                                            "Pangolin"}
-                                    </span>
-                                </a>
-                            </>
-                        )}
-                        <Separator orientation="vertical" />
-                        <span>
-                            {build === "oss"
-                                ? t("communityEdition")
-                                : build === "enterprise"
-                                  ? t("enterpriseEdition")
-                                  : t("pangolinCloud")}
-                        </span>
-                        {build === "enterprise" &&
-                        licenseStatus?.isHostLicensed &&
-                        licenseStatus?.isLicenseValid &&
-                        licenseStatus?.tier === "personal" ? (
-                            <>
-                                <Separator orientation="vertical" />
-                                <span>{t("personalUseOnly")}</span>
-                            </>
-                        ) : null}
-                        {build === "enterprise" &&
-                        (!licenseStatus?.isHostLicensed ||
-                            !licenseStatus?.isLicenseValid) ? (
-                            <>
-                                <Separator orientation="vertical" />
-                                <span>{t("unlicensed")}</span>
-                            </>
-                        ) : null}
-                        {build === "saas" && (
-                            <>
-                                <Separator orientation="vertical" />
-                                <a
-                                    href="https://pangolin.net/terms-of-service.html"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    aria-label="GitHub"
-                                    className="flex items-center space-x-2 whitespace-nowrap"
-                                >
-                                    <span>{t("termsOfService")}</span>
-                                </a>
-                                <Separator orientation="vertical" />
-                                <a
-                                    href="https://pangolin.net/privacy-policy.html"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    aria-label="GitHub"
-                                    className="flex items-center space-x-2 whitespace-nowrap"
-                                >
-                                    <span>{t("privacyPolicy")}</span>
-                                </a>
-                            </>
-                        )}
-                    </div>
-                </footer>
-            )}
+            <AuthFooter />
         </div>
     );
 }

src/app/auth/login/page.tsx

@@ -109,7 +109,7 @@ export default async function Page(props: {
                     {t.rich("loginLegalDisclaimer", {
                         termsOfService: (chunks) => (
                             <Link
-                                href="https://pangolin.net/terms-of-service.html"
+                                href="https://pangolin.net/tos"
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 className="underline"
@@ -119,7 +119,7 @@ export default async function Page(props: {
                         ),
                         privacyPolicy: (chunks) => (
                             <Link
-                                href="https://pangolin.net/privacy-policy.html"
+                                href="https://pangolin.net/privacy"
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 className="underline"

src/app/globals.css

@@ -57,7 +57,7 @@
     --accent-foreground: oklch(0.985 0 0);
     --destructive: oklch(0.5382 0.1949 22.216);
     --destructive-foreground: oklch(0.985 0 0);
-    --border: oklch(1 0 0 / 15%);
+    --border: oklch(1 0 0 / 18%);
     --input: oklch(1 0 0 / 18%);
     --ring: oklch(0.646 0.222 41.116);
     --chart-1: oklch(0.488 0.243 264.376);

src/app/layout.tsx

@@ -68,15 +68,15 @@ export default async function RootLayout({
     const env = pullEnv();
     const locale = await getLocale();
 
-    const supporterData = {
-        visible: true
-    } as any;
+    // const supporterData = {
+    //     visible: true
+    // } as any;
 
-    const res = await priv.get<AxiosResponse<IsSupporterKeyVisibleResponse>>(
-        "supporter-key/visible"
-    );
-    supporterData.visible = res.data.data.visible;
-    supporterData.tier = res.data.data.tier;
+    // const res = await priv.get<AxiosResponse<IsSupporterKeyVisibleResponse>>(
+    //     "supporter-key/visible"
+    // );
+    // supporterData.visible = res.data.data.visible;
+    // supporterData.tier = res.data.data.tier;
 
     let licenseStatus: GetLicenseStatusResponse;
     if (build === "enterprise") {
@@ -127,20 +127,20 @@ export default async function RootLayout({
                                     <LicenseStatusProvider
                                         licenseStatus={licenseStatus}
                                     >
-                                        <SupportStatusProvider
+                                        {/* <SupportStatusProvider
                                             supporterStatus={supporterData}
-                                        >
-                                            {/* Main content */}
-                                            <div className="h-full flex flex-col">
-                                                <div className="flex-1 overflow-auto">
-                                                    <SplashImage>
-                                                        <LicenseViolation />
-                                                        {children}
-                                                    </SplashImage>
+                                        > */}
+                                        {/* Main content */}
+                                        <div className="h-full flex flex-col">
+                                            <div className="flex-1 overflow-auto">
+                                                <SplashImage>
                                                     <LicenseViolation />
-                                                </div>
+                                                    {children}
+                                                </SplashImage>
+                                                <LicenseViolation />
                                             </div>
-                                        </SupportStatusProvider>
+                                        </div>
+                                        {/* </SupportStatusProvider> */}
                                     </LicenseStatusProvider>
                                     <Toaster />
                                 </TanstackQueryProvider>

src/app/maintenance-screen/page.tsx

@@ -28,7 +28,7 @@ export default async function MaintenanceScreen() {
 
     try {
         const headersList = await headers();
-        const host = headersList.get("host") || "";
+        const host = headersList.get("p-host") || headersList.get("host") || "";
         const hostname = host.split(":")[0];
 
         const res = await priv.get<AxiosResponse<GetMaintenanceInfoResponse>>(

src/app/navigation.tsx

@@ -11,9 +11,11 @@ import {
     CreditCard,
     Fingerprint,
     Globe,
+    GlobeIcon,
     GlobeLock,
     KeyRound,
     Laptop,
+    LayoutGrid,
     Link as LinkIcon,
     Logs,
     MonitorUp,
@@ -22,7 +24,9 @@ import {
     ScanEye,
     Server,
     Settings,
+    ShieldIcon,
     SquareMousePointer,
+    TagIcon,
     TicketCheck,
     Unplug,
     User,
@@ -46,7 +50,7 @@ export const orgLangingNavItems: SidebarNavItem[] = [
     {
         title: "sidebarAccount",
         href: "/{orgId}",
-        icon: <User className="size-4 flex-none" />
+        icon: <LayoutGrid className="size-4 flex-none" />
     }
 ];
 
@@ -68,12 +72,12 @@ export const orgNavSections = (
                 items: [
                     {
                         title: "sidebarProxyResources",
-                        href: "/{orgId}/settings/resources/proxy",
+                        href: "/{orgId}/settings/resources/public",
                         icon: <Globe className="size-4 flex-none" />
                     },
                     {
                         title: "sidebarClientResources",
-                        href: "/{orgId}/settings/resources/client",
+                        href: "/{orgId}/settings/resources/private",
                         icon: <GlobeLock className="size-4 flex-none" />
                     }
                 ]
@@ -99,7 +103,7 @@ export const orgNavSections = (
                 href: "/{orgId}/settings/domains",
                 icon: <Globe className="size-4 flex-none" />
             },
-            ...(build == "saas"
+            ...(build === "saas"
                 ? [
                       {
                           title: "sidebarRemoteExitNodes",
@@ -134,11 +138,30 @@ export const orgNavSections = (
                     }
                 ]
             },
+            ...(!env?.flags.disableEnterpriseFeatures
+                ? [
+                      {
+                          title: "sidebarPolicies",
+
+                          icon: <ShieldIcon className="size-4 flex-none" />,
+                          items: [
+                              {
+                                  title: "sidebarResourcePolicies",
+                                  href: "/{orgId}/settings/policies/resources/public",
+                                  icon: (
+                                      <GlobeIcon className="size-4 flex-none" />
+                                  )
+                              }
+                          ]
+                      }
+                  ]
+                : []),
             // PaidFeaturesAlert
-            ...((build === "oss" && !env?.flags.disableEnterpriseFeatures) ||
-            build === "saas" ||
-            env?.app.identityProviderMode === "org" ||
-            (env?.app.identityProviderMode === undefined && build !== "oss")
+            ...(!env?.flags.disableEnterpriseFeatures &&
+            (build === "saas" ||
+                env?.app.identityProviderMode === "org" ||
+                (env?.app.identityProviderMode === undefined &&
+                    build !== "oss"))
                 ? [
                       {
                           title: "sidebarIdentityProviders",
@@ -237,10 +260,19 @@ export const orgNavSections = (
                         title: "sidebarApiKeys",
                         href: "/{orgId}/settings/api-keys",
                         icon: <KeyRound className="size-4 flex-none" />
-                    }
+                    },
+                    ...(!env?.flags.disableEnterpriseFeatures
+                        ? [
+                              {
+                                  title: "labels",
+                                  href: "/{orgId}/settings/labels",
+                                  icon: <TagIcon className="size-4 flex-none" />
+                              }
+                          ]
+                        : [])
                 ]
             },
-            ...(build == "saas" && options?.isPrimaryOrg
+            ...(build === "saas" && options?.isPrimaryOrg
                 ? [
                       {
                           title: "sidebarBillingAndLicenses",
@@ -310,3 +342,245 @@ export const adminNavSections = (env?: Env): SidebarNavSection[] => [
         ]
     }
 ];
+
+export type CommandBarNavSection = {
+    // Added from 'dev' branch
+    heading: string;
+    items: CommandBarNavItem[];
+};
+
+export type CommandBarNavItem = {
+    href?: string;
+    title: string;
+    icon?: React.ReactNode;
+    showEE?: boolean;
+    isBeta?: boolean;
+};
+
+export const commandBarNavSections = (
+    env?: Env,
+    options?: OrgNavSectionsOptions
+): CommandBarNavSection[] => [
+    {
+        heading: "commandLauncher",
+        items: [
+            {
+                title: "commandResourceLauncher",
+                href: "/{orgId}",
+                icon: <LayoutGrid className="size-4 flex-none" />
+            }
+        ]
+    },
+    {
+        heading: "network",
+        items: [
+            {
+                title: "commandSites",
+                href: "/{orgId}/settings/sites",
+                icon: <Plug className="size-4 flex-none" />
+            },
+            {
+                title: "commandProxyResources",
+                href: "/{orgId}/settings/resources/public",
+                icon: <Globe className="size-4 flex-none" />
+            },
+            {
+                title: "commandClientResources",
+                href: "/{orgId}/settings/resources/private",
+                icon: <GlobeLock className="size-4 flex-none" />
+            },
+            {
+                href: "/{orgId}/settings/clients/user",
+                title: "commandUserDevices",
+                icon: <Laptop className="size-4 flex-none" />
+            },
+            {
+                href: "/{orgId}/settings/clients/machine",
+                title: "commandMachineClients",
+                icon: <Server className="size-4 flex-none" />
+            },
+            ...(build === "saas"
+                ? [
+                      {
+                          title: "commandRemoteExitNodes",
+                          href: "/{orgId}/settings/remote-exit-nodes",
+                          icon: <Server className="size-4 flex-none" />
+                      }
+                  ]
+                : [])
+        ]
+    },
+    {
+        heading: "commandTeam",
+        items: [
+            {
+                title: "commandUsers",
+                href: "/{orgId}/settings/access/users",
+                icon: <User className="size-4 flex-none" />
+            },
+            {
+                title: "commandRoles",
+                href: "/{orgId}/settings/access/roles",
+                icon: <Users className="size-4 flex-none" />
+            },
+            {
+                title: "commandInvitations",
+                href: "/{orgId}/settings/access/invitations",
+                icon: <TicketCheck className="size-4 flex-none" />
+            }
+        ]
+    },
+    {
+        heading: "accessControl",
+        items: [
+            ...(!env?.flags.disableEnterpriseFeatures
+                ? [
+                      {
+                          title: "commandResourcePolicies",
+                          href: "/{orgId}/settings/policies/resources/public",
+                          icon: <ShieldIcon className="size-4 flex-none" />
+                      }
+                  ]
+                : []),
+            // PaidFeaturesAlert
+            ...((build === "oss" && !env?.flags.disableEnterpriseFeatures) ||
+            build === "saas" ||
+            env?.app.identityProviderMode === "org" ||
+            (env?.app.identityProviderMode === undefined && build !== "oss")
+                ? [
+                      {
+                          title: "commandIdentityProviders",
+                          href: "/{orgId}/settings/idp",
+                          icon: <Fingerprint className="size-4 flex-none" />
+                      }
+                  ]
+                : []),
+            ...(!env?.flags.disableEnterpriseFeatures
+                ? [
+                      {
+                          title: "commandApprovals",
+                          href: "/{orgId}/settings/access/approvals",
+                          icon: <UserCog className="size-4 flex-none" />
+                      }
+                  ]
+                : []),
+            {
+                title: "commandShareableLinks",
+                href: "/{orgId}/settings/share-links",
+                icon: <LinkIcon className="size-4 flex-none" />
+            }
+        ]
+    },
+    {
+        heading: "commandLogsAndAnalytics",
+        items: [
+            {
+                title: "commandLogsAnalytics",
+                href: "/{orgId}/settings/logs/analytics",
+                icon: <ChartLine className="size-4 flex-none" />
+            },
+            {
+                title: "commandLogsRequest",
+                href: "/{orgId}/settings/logs/request",
+                icon: <SquareMousePointer className="size-4 flex-none" />
+            },
+            ...(!env?.flags.disableEnterpriseFeatures
+                ? [
+                      {
+                          title: "commandLogsAccess",
+                          href: "/{orgId}/settings/logs/access",
+                          icon: <ScanEye className="size-4 flex-none" />
+                      },
+                      {
+                          title: "commandLogsAction",
+                          href: "/{orgId}/settings/logs/action",
+                          icon: <Logs className="size-4 flex-none" />
+                      },
+                      {
+                          title: "commandLogsConnection",
+                          href: "/{orgId}/settings/logs/connection",
+                          icon: <Cable className="size-4 flex-none" />
+                      },
+                      {
+                          title: "commandLogsStreaming",
+                          href: "/{orgId}/settings/logs/streaming",
+                          icon: <Unplug className="size-4 flex-none" />
+                      }
+                  ]
+                : [])
+        ]
+    },
+    {
+        heading: "commandManagement",
+        items: [
+            ...(!env?.flags.disableEnterpriseFeatures
+                ? [
+                      {
+                          title: "commandAlerting",
+                          href: "/{orgId}/settings/alerting",
+                          icon: <BellRing className="size-4 flex-none" />
+                      },
+                      {
+                          title: "commandProvisioning",
+                          href: "/{orgId}/settings/provisioning",
+                          icon: <Boxes className="size-4 flex-none" />
+                      }
+                  ]
+                : []),
+            {
+                title: "commandBluePrints",
+                href: "/{orgId}/settings/blueprints",
+                icon: <ReceiptText className="size-4 flex-none" />
+            },
+            {
+                title: "commandApiKeys",
+                href: "/{orgId}/settings/api-keys",
+                icon: <KeyRound className="size-4 flex-none" />
+            },
+            ...(!env?.flags.disableEnterpriseFeatures
+                ? [
+                      {
+                          title: "labels",
+                          href: "/{orgId}/settings/labels",
+                          icon: <TagIcon className="size-4 flex-none" />
+                      }
+                  ]
+                : [])
+        ]
+    },
+
+    {
+        heading: "commandOrganization",
+        items: [
+            {
+                title: "commandSettings",
+                href: "/{orgId}/settings/general",
+                icon: <Settings className="size-4 flex-none" />
+            },
+            {
+                title: "commandDomains",
+                href: "/{orgId}/settings/domains",
+                icon: <Globe className="size-4 flex-none" />
+            }
+        ]
+    },
+    ...(build === "saas" && options?.isPrimaryOrg
+        ? [
+              {
+                  heading: "commandBillingAndLicenses",
+                  items: [
+                      {
+                          title: "commandBilling",
+                          href: "/{orgId}/settings/billing",
+                          icon: <CreditCard className="size-4 flex-none" />
+                      },
+                      {
+                          title: "commandEnterpriseLicenses",
+                          href: "/{orgId}/settings/license",
+                          icon: <TicketCheck className="size-4 flex-none" />
+                      }
+                  ]
+              }
+          ]
+        : [])
+];

src/app/page.tsx

@@ -21,9 +21,11 @@ export default async function Page(props: {
     searchParams: Promise<{
         redirect: string | undefined;
         t: string | undefined;
+        orgs?: string | undefined;
     }>;
 }) {
     const params = await props.searchParams; // this is needed to prevent static optimization
+    const showOrgPicker = params.orgs === "1";
 
     const env = pullEnv();
 
@@ -86,7 +88,7 @@ export default async function Page(props: {
         targetOrgId = lastOrgCookie;
     } else {
         let ownedOrg = orgs.find((org) => org.isOwner);
-        let primaryOrg = orgs.find((org) => org.isPrimaryOrg);
+        const primaryOrg = orgs.find((org) => org.isPrimaryOrg);
         if (!ownedOrg) {
             if (primaryOrg) {
                 ownedOrg = primaryOrg;
@@ -106,8 +108,16 @@ export default async function Page(props: {
         }
     }
 
-    if (targetOrgId) {
-        return <RedirectToOrg targetOrgId={targetOrgId} />;
+    if (targetOrgId && !showOrgPicker) {
+        const targetOrg = orgs.find((org) => org.orgId === targetOrgId);
+        return (
+            <RedirectToOrg
+                targetOrgId={targetOrgId}
+                isAdminOrOwner={Boolean(
+                    targetOrg?.isAdmin || targetOrg?.isOwner
+                )}
+            />
+        );
     }
 
     return (

src/app/private-maintenance-screen/page.tsx

@@ -16,9 +16,9 @@ export const metadata: Metadata = {
 export default async function MaintenanceScreen() {
     const t = await getTranslations();
 
-    let title = t("privateMaintenanceScreenTitle");
-    let message = t("privateMaintenanceScreenMessage");
-    let steps = t("privateMaintenanceScreenSteps");
+    const title = t("privateMaintenanceScreenTitle");
+    const message = t("privateMaintenanceScreenMessage");
+    const steps = t("privateMaintenanceScreenSteps");
 
     return (
         <div className="min-h-screen flex items-center justify-center p-4">

src/app/rdp/RdpClient.tsx

@@ -0,0 +1,585 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Button } from "@app/components/ui/button";
+import { Input } from "@app/components/ui/input";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { toast } from "@app/hooks/useToast";
+import type {
+    UserInteraction,
+    IronError,
+    FileTransferProvider
+} from "@devolutions/iron-remote-desktop/dist";
+import type {
+    RdpFileTransferProvider,
+    FileInfo
+} from "@devolutions/iron-remote-desktop-rdp/dist";
+import { GetBrowserTargetResponse } from "@server/routers/browserGatewayTarget";
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+    CardDescription
+} from "@app/components/ui/card";
+import { Alert, AlertDescription } from "@app/components/ui/alert";
+import BrandedAuthSurface from "@app/components/BrandedAuthSurface";
+import PoweredByPangolin from "@app/components/PoweredByPangolin";
+import AuthPageFooterNotices from "@app/components/AuthPageFooterNotices";
+import CollapsibleSessionToolbar from "@app/components/CollapsibleSessionToolbar";
+import { useTranslations } from "next-intl";
+import {
+    loadEncryptedLocalStorage,
+    saveEncryptedLocalStorage
+} from "@app/lib/secureLocalStorage";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "iron-remote-desktop": React.DetailedHTMLProps<
+                React.HTMLAttributes<HTMLElement> & {
+                    scale?: string;
+                    verbose?: string;
+                    flexcenter?: string;
+                    module?: unknown;
+                },
+                HTMLElement
+            >;
+        }
+    }
+}
+
+type RdpCredentialsForm = {
+    username: string;
+    password: string;
+    domain: string;
+    kdcProxyUrl: string;
+    pcb: string;
+    enableClipboard: boolean;
+};
+
+const DEFAULT_RDP_CREDENTIALS: RdpCredentialsForm = {
+    username: "",
+    password: "",
+    domain: "",
+    kdcProxyUrl: "",
+    pcb: "",
+    enableClipboard: true
+};
+
+const isIronError = (error: unknown): error is IronError => {
+    return (
+        typeof error === "object" &&
+        error !== null &&
+        typeof (error as IronError).backtrace === "function" &&
+        typeof (error as IronError).kind === "function"
+    );
+};
+
+export default function RdpClient({
+    target,
+    error,
+    primaryColor
+}: {
+    target: GetBrowserTargetResponse | null;
+    error: string | null;
+    primaryColor?: string | null;
+}) {
+    const t = useTranslations();
+    const api = createApiClient(useEnvContext());
+    const STORAGE_KEY = "pangolin_rdp_credentials";
+    const resourceName = target?.name?.trim() || null;
+
+    const formSchema = z.object({
+        username: z.string().min(1, { message: t("usernameRequired") }),
+        password: z.string().min(1, { message: t("passwordRequired") }),
+        domain: z.string(),
+        kdcProxyUrl: z.string(),
+        pcb: z.string(),
+        enableClipboard: z.boolean()
+    });
+
+    const form = useForm<RdpCredentialsForm>({
+        resolver: zodResolver(formSchema),
+        defaultValues: DEFAULT_RDP_CREDENTIALS
+    });
+
+    useEffect(() => {
+        let cancelled = false;
+
+        void loadEncryptedLocalStorage<RdpCredentialsForm>(
+            STORAGE_KEY,
+            target?.authToken
+        ).then((saved) => {
+            if (cancelled || !saved) return;
+            form.reset({ ...DEFAULT_RDP_CREDENTIALS, ...saved });
+        });
+
+        return () => {
+            cancelled = true;
+        };
+    }, [form, target?.authToken]);
+
+    const [showLogin, setShowLogin] = useState(true);
+    const [moduleReady, setModuleReady] = useState(false);
+    const [connecting, setConnecting] = useState(false);
+    const [submitError, setSubmitError] = useState<string | null>(null);
+    const [unicodeMode, setUnicodeMode] = useState(false);
+    const [cursorOverrideActive, setCursorOverrideActive] = useState(false);
+
+    const userInteractionRef = useRef<UserInteraction | null>(null);
+    const backendRef = useRef<unknown>(null);
+    // Holds the RdpFileTransferProvider constructor so we can create a fresh
+    // instance per session (avoids stale upload state across reconnects).
+    const fileTransferClassRef = useRef<typeof RdpFileTransferProvider | null>(
+        null
+    );
+    // Active session's provider instance; replaced on each connect.
+    const fileTransferRef = useRef<RdpFileTransferProvider | null>(null);
+    const extensionsRef = useRef<{
+        displayControl: (enable: boolean) => unknown;
+        preConnectionBlob: (pcb: string) => unknown;
+        kdcProxyUrl: (url: string) => unknown;
+    } | null>(null);
+
+    // Load the iron-remote-desktop modules client-side and register the
+    // `<iron-remote-desktop>` custom element.
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            const [coreMod, rdpMod] = await Promise.all([
+                import("@devolutions/iron-remote-desktop/dist"),
+                import("@devolutions/iron-remote-desktop-rdp/dist")
+            ]);
+            if (cancelled) return;
+
+            await rdpMod.init("INFO");
+
+            backendRef.current = rdpMod.Backend;
+            extensionsRef.current = {
+                displayControl: rdpMod.displayControl,
+                preConnectionBlob: rdpMod.preConnectionBlob,
+                kdcProxyUrl: rdpMod.kdcProxyUrl
+            };
+
+            // Store the class; a fresh instance is created per session.
+            fileTransferClassRef.current =
+                rdpMod.RdpFileTransferProvider as unknown as typeof RdpFileTransferProvider;
+
+            // Importing the package registers the custom element as a side
+            // effect. Touch the default export to avoid tree-shaking.
+            void coreMod;
+
+            setModuleReady(true);
+        })().catch((err) => {
+            console.error("Failed to load iron-remote-desktop modules", err);
+            toast({
+                variant: "destructive",
+                title: t("rdpFailedToLoadModule"),
+                description: `${err}`
+            });
+        });
+
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+
+    // Attach the "ready" listener synchronously the moment the custom
+    // element mounts. The custom element dispatches `ready` from its own
+    // `onMount`, so a deferred useEffect can race and miss it.
+    const remoteElementRef = (el: HTMLElement | null) => {
+        if (!el) return;
+        const onReady = (e: Event) => {
+            const event = e as CustomEvent;
+            userInteractionRef.current = event.detail.irgUserInteraction;
+        };
+        el.addEventListener("ready", onReady);
+    };
+
+    const startSession = async (values: RdpCredentialsForm) => {
+        setConnecting(true);
+        const userInteraction = userInteractionRef.current;
+        const exts = extensionsRef.current;
+        if (!userInteraction || !exts) {
+            setConnecting(false);
+            setSubmitError(t("rdpModuleInitializing"));
+            return;
+        }
+
+        userInteraction.setEnableClipboard(values.enableClipboard);
+
+        // Dispose any previous session's provider and create a fresh one so
+        // there is no stale upload state from a prior connection.
+        fileTransferRef.current?.dispose();
+        const ProviderClass = fileTransferClassRef.current;
+        const fileTransfer = ProviderClass ? new ProviderClass() : null;
+        fileTransferRef.current = fileTransfer;
+
+        if (fileTransfer) {
+            // Auto-download files when the remote copies them to clipboard.
+            fileTransfer.on("files-available", (files: FileInfo[]) => {
+                const downloadable = files.filter((f) => !f.isDirectory);
+                if (downloadable.length === 0) return;
+                toast({
+                    title: t("rdpDownloadingFiles", {
+                        count: downloadable.length
+                    })
+                });
+                for (let i = 0; i < files.length; i++) {
+                    const file = files[i];
+                    if (file.isDirectory) continue;
+                    const { completion } = fileTransfer.downloadFile(file, i);
+                    completion
+                        .then((blob) => {
+                            const url = URL.createObjectURL(blob);
+                            const a = document.createElement("a");
+                            a.href = url;
+                            a.download = file.name;
+                            a.click();
+                            URL.revokeObjectURL(url);
+                        })
+                        .catch((err) => {
+                            toast({
+                                variant: "destructive",
+                                title: t("rdpDownloadFailed", {
+                                    fileName: file.name
+                                }),
+                                description: `${err}`
+                            });
+                        });
+                }
+            });
+
+            // Notify when individual uploads complete (remote pasted a file).
+            fileTransfer.on("upload-complete", (file: File) => {
+                toast({ title: t("rdpUploaded", { fileName: file.name }) });
+            });
+
+            // Register with the web component so CLIPRDR extensions are
+            // wired up before connect() builds the session.
+            userInteraction.enableFileTransfer(
+                fileTransfer as unknown as FileTransferProvider
+            );
+        }
+
+        if (!target) {
+            setConnecting(false);
+            setSubmitError(t("rdpNoConnectionTarget"));
+            return;
+        }
+
+        const destination = `${target.ip}:${target.port}`;
+
+        const builder = userInteraction
+            .configBuilder()
+            .withUsername(values.username)
+            .withPassword(values.password)
+            .withDestination(destination)
+            .withProxyAddress(
+                `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/gateway/rdp`
+            )
+            .withServerDomain(values.domain)
+            .withAuthToken(target.authToken)
+            .withDesktopSize({
+                width: window.innerWidth,
+                height: window.innerHeight
+            })
+            .withExtension(exts.displayControl(true));
+
+        if (values.pcb !== "") {
+            builder.withExtension(exts.preConnectionBlob(values.pcb));
+        }
+        if (values.kdcProxyUrl !== "") {
+            builder.withExtension(exts.kdcProxyUrl(values.kdcProxyUrl));
+        }
+
+        try {
+            const sessionInfo = await userInteraction.connect(builder.build());
+
+            void saveEncryptedLocalStorage(
+                STORAGE_KEY,
+                values,
+                target.authToken
+            );
+            void api.post(`/org/${target.orgId}/logs/access/attempt`, {
+                resourceId: target.resourceId,
+                action: true,
+                type: "rdp"
+            });
+            setConnecting(false);
+            setShowLogin(false);
+            userInteraction.setVisibility(true);
+
+            const termInfo = await sessionInfo.run();
+            fileTransferRef.current?.dispose();
+            fileTransferRef.current = null;
+            setShowLogin(true);
+        } catch (err) {
+            void api.post(`/org/${target.orgId}/logs/access/attempt`, {
+                resourceId: target.resourceId,
+                action: false,
+                type: "rdp"
+            });
+            setConnecting(false);
+            setShowLogin(true);
+            if (isIronError(err)) {
+                setSubmitError(err.backtrace());
+            } else {
+                setSubmitError(`${err}`);
+            }
+        }
+    };
+
+    const onSubmit = (values: RdpCredentialsForm) => {
+        setSubmitError(null);
+        startSession(values);
+    };
+
+    const ui = () => userInteractionRef.current;
+
+    const toggleCursorKind = () => {
+        const u = ui();
+        if (!u) return;
+        if (cursorOverrideActive) {
+            u.setCursorStyleOverride(null);
+        } else {
+            u.setCursorStyleOverride('url("crosshair.png") 7 7, default');
+        }
+        setCursorOverrideActive((v) => !v);
+    };
+
+    if (error) {
+        return (
+            <BrandedAuthSurface primaryColor={primaryColor}>
+                <PoweredByPangolin />
+                <Card className="w-full">
+                    <CardHeader>
+                        <CardTitle>{t("rdpTitle")}</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <Alert variant="destructive">
+                            <AlertDescription>{error}</AlertDescription>
+                        </Alert>
+                    </CardContent>
+                </Card>
+            </BrandedAuthSurface>
+        );
+    }
+
+    return (
+        <>
+            {showLogin && (
+                <BrandedAuthSurface primaryColor={primaryColor}>
+                    <PoweredByPangolin />
+                    <Card className="w-full">
+                        <CardHeader>
+                            <CardTitle>{t("rdpSignInTitle")}</CardTitle>
+                            <CardDescription>
+                                {resourceName
+                                    ? `${t("rdpSignInDescription")} (${resourceName})`
+                                    : t("rdpSignInDescription")}
+                            </CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <Form {...form}>
+                                <form
+                                    onSubmit={form.handleSubmit(onSubmit)}
+                                    className="space-y-4"
+                                >
+                                    <FormField
+                                        control={form.control}
+                                        name="domain"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t("domain")}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input {...field} />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                    <FormField
+                                        control={form.control}
+                                        name="username"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t("username")}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input {...field} />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                    <FormField
+                                        control={form.control}
+                                        name="password"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t("password")}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input
+                                                        type="password"
+                                                        {...field}
+                                                    />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                    <Button
+                                        type="submit"
+                                        disabled={!moduleReady || connecting}
+                                        loading={connecting}
+                                        className="w-full"
+                                    >
+                                        {t("browserGatewayConnect")}
+                                    </Button>
+                                    {submitError && (
+                                        <Alert variant="destructive">
+                                            <AlertDescription>
+                                                {submitError}
+                                            </AlertDescription>
+                                        </Alert>
+                                    )}
+                                </form>
+                            </Form>
+                        </CardContent>
+                    </Card>
+                    <AuthPageFooterNotices />
+                </BrandedAuthSurface>
+            )}
+
+            <div
+                className="fixed inset-0 z-50 flex flex-col bg-neutral-900"
+                style={{ display: showLogin ? "none" : "flex" }}
+            >
+                <CollapsibleSessionToolbar>
+                    <Button
+                        size="sm"
+                        variant="destructive"
+                        onClick={() => {
+                            ui()?.shutdown();
+                            setShowLogin(true);
+                        }}
+                    >
+                        {t("sshTerminate")}
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => ui()?.ctrlAltDel()}
+                    >
+                        {t("browserGatewayCtrlAltDel")}
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => ui()?.metaKey()}
+                    >
+                        {t("rdpMeta")}
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={async () => {
+                            const ft = fileTransferRef.current;
+                            if (!ft) return;
+                            const files = await ft.showFilePicker({
+                                multiple: true
+                            });
+                            if (files.length === 0) return;
+                            try {
+                                ft.uploadFiles(files);
+                                toast({
+                                    title: t("rdpFilesReadyToPaste"),
+                                    description: t(
+                                        "rdpFilesReadyToPasteDescription",
+                                        { count: files.length }
+                                    )
+                                });
+                            } catch (err) {
+                                toast({
+                                    variant: "destructive",
+                                    title: t("rdpUploadFailed"),
+                                    description: `${err}`
+                                });
+                            }
+                        }}
+                    >
+                        {t("rdpUploadFiles")}
+                    </Button>
+                    {/* <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => ui()?.setScale(1)}
+                    >
+                        {t("rdpFit")}
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => ui()?.setScale(2)}
+                    >
+                        {t("rdpFull")}
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => ui()?.setScale(3)}
+                    >
+                        {t("rdpReal")}
+                    </Button> */}
+                    {/* <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={toggleCursorKind}
+                    >
+                        Toggle cursor
+                    </Button> */}
+                    <label className="ml-2 flex items-center gap-2">
+                        <input
+                            type="checkbox"
+                            checked={unicodeMode}
+                            onChange={(e) => {
+                                setUnicodeMode(e.target.checked);
+                                ui()?.setKeyboardUnicodeMode(e.target.checked);
+                            }}
+                        />
+                        {t("rdpUnicodeKeyboardMode")}
+                    </label>
+                </CollapsibleSessionToolbar>
+
+                {moduleReady && (
+                    <iron-remote-desktop
+                        ref={remoteElementRef}
+                        verbose="true"
+                        scale="fit"
+                        flexcenter="true"
+                        module={backendRef.current}
+                    />
+                )}
+            </div>
+        </>
+    );
+}

src/app/rdp/page.tsx

@@ -0,0 +1,36 @@
+import { generateBrowserGatewayMetadata } from "@app/lib/browserGatewayMetadata";
+import { getBrowserTargetForRequest } from "@app/lib/getBrowserTargetForRequest";
+import { loadOrgLoginPageBranding } from "@app/lib/loadOrgLoginPageBranding";
+import RdpClient from "./RdpClient";
+import AuthFooter from "@app/components/AuthFooter";
+import { getTranslations } from "next-intl/server";
+
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata() {
+    return generateBrowserGatewayMetadata("RDP");
+}
+
+export default async function RdpPage() {
+    const t = await getTranslations();
+    const { target } = await getBrowserTargetForRequest();
+    const error = target ? null : t("browserGatewayNoResourceForDomain");
+    const { primaryColor } = target
+        ? await loadOrgLoginPageBranding(target.orgId)
+        : { primaryColor: null };
+
+    return (
+        <div className="h-full flex flex-col">
+            <div className="flex-1 flex md:items-center justify-center">
+                <div className="w-full max-w-md p-3">
+                    <RdpClient
+                        target={target}
+                        error={error}
+                        primaryColor={primaryColor}
+                    />
+                </div>
+            </div>
+            <AuthFooter />
+        </div>
+    );
+}

src/app/ssh/SshClient.tsx

@@ -0,0 +1,724 @@
+"use client";
+
+import "@xterm/xterm/css/xterm.css";
+import { useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { Button } from "@app/components/ui/button";
+import { Input } from "@app/components/ui/input";
+import { Textarea } from "@app/components/ui/textarea";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { GetBrowserTargetResponse } from "@server/routers/browserGatewayTarget";
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+    CardDescription
+} from "@app/components/ui/card";
+import Link from "next/link";
+import { ExternalLink, Loader2 } from "lucide-react";
+import { Alert, AlertDescription } from "@app/components/ui/alert";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
+import type { SignSshKeyResponse } from "@server/routers/ssh/types";
+import { useTranslations } from "next-intl";
+import BrandedAuthSurface from "@app/components/BrandedAuthSurface";
+import PoweredByPangolin from "@app/components/PoweredByPangolin";
+import AuthPageFooterNotices from "@app/components/AuthPageFooterNotices";
+import {
+    loadEncryptedLocalStorage,
+    saveEncryptedLocalStorage
+} from "@app/lib/secureLocalStorage";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+
+type AuthTab = "password" | "privateKey";
+
+type SshCredentialsForm = {
+    username: string;
+    password: string;
+    privateKey: string;
+};
+
+type ConnectCredentials = {
+    username: string;
+    password?: string;
+    privateKey?: string;
+    certificate?: string;
+};
+
+const DEFAULT_SSH_CREDENTIALS: SshCredentialsForm = {
+    username: "",
+    password: "",
+    privateKey: ""
+};
+
+export default function SshClient({
+    target,
+    error,
+    signedKeyData,
+    privateKey: signedPrivateKey,
+    primaryColor
+}: {
+    target: GetBrowserTargetResponse | null;
+    error: string | null;
+    signedKeyData?: SignSshKeyResponse | null;
+    privateKey?: string | null;
+    primaryColor?: string | null;
+}) {
+    const STORAGE_KEY = "pangolin_ssh_credentials";
+    const t = useTranslations();
+    const api = createApiClient(useEnvContext());
+    const resourceName = target?.name?.trim() || null;
+
+    const passwordTabSchema = z.object({
+        username: z.string().min(1, { message: t("usernameRequired") }),
+        password: z.string().min(1, { message: t("passwordRequired") })
+    });
+
+    const privateKeyTabSchema = z.object({
+        username: z.string().min(1, { message: t("usernameRequired") }),
+        privateKey: z.string().min(1, { message: t("sshPrivateKeyRequired") })
+    });
+
+    const form = useForm<SshCredentialsForm>({
+        defaultValues: DEFAULT_SSH_CREDENTIALS
+    });
+
+    useEffect(() => {
+        let cancelled = false;
+
+        void loadEncryptedLocalStorage<SshCredentialsForm>(
+            STORAGE_KEY,
+            target?.authToken
+        ).then((saved) => {
+            if (cancelled || !saved) return;
+            form.reset({ ...DEFAULT_SSH_CREDENTIALS, ...saved });
+        });
+
+        return () => {
+            cancelled = true;
+        };
+    }, [form, target?.authToken]);
+
+    function handleKeyFile(e: React.ChangeEvent<HTMLInputElement>) {
+        const file = e.target.files?.[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = (ev) => {
+            const text = ev.target?.result;
+            if (typeof text === "string") {
+                form.setValue("privateKey", text, { shouldDirty: true });
+            }
+        };
+        reader.readAsText(file);
+        e.target.value = "";
+    }
+
+    const [connected, setConnected] = useState(false);
+    const [connecting, setConnecting] = useState(false);
+    const [connectError, setConnectError] = useState<string | null>(null);
+    const [sessionClosedCode, setSessionClosedCode] = useState<number | null>(
+        null
+    );
+
+    const terminalRef = useRef<HTMLDivElement>(null);
+    const xtermRef = useRef<import("@xterm/xterm").Terminal | null>(null);
+    const fitAddonRef = useRef<import("@xterm/addon-fit").FitAddon | null>(
+        null
+    );
+    const wsRef = useRef<WebSocket | null>(null);
+
+    // Mount the terminal div once connected.
+    useEffect(() => {
+        if (!connected || !terminalRef.current) return;
+
+        let cancelled = false;
+
+        (async () => {
+            const [{ Terminal }, { FitAddon }, { WebLinksAddon }] =
+                await Promise.all([
+                    import("@xterm/xterm"),
+                    import("@xterm/addon-fit"),
+                    import("@xterm/addon-web-links")
+                ]);
+            if (cancelled || !terminalRef.current) return;
+
+            const terminal = new Terminal({
+                cursorBlink: true,
+                fontSize: 14,
+                fontFamily: "Menlo, Monaco, 'Courier New', monospace",
+                theme: {
+                    background: "#0d0d0d",
+                    foreground: "#f0f0f0"
+                },
+                scrollback: 5000
+            });
+
+            const fitAddon = new FitAddon();
+            const webLinksAddon = new WebLinksAddon();
+            terminal.loadAddon(fitAddon);
+            terminal.loadAddon(webLinksAddon);
+
+            terminal.open(terminalRef.current);
+            fitAddon.fit();
+
+            xtermRef.current = terminal;
+            fitAddonRef.current = fitAddon;
+
+            terminal.onData((data) => {
+                if (wsRef.current?.readyState === WebSocket.OPEN) {
+                    wsRef.current.send(JSON.stringify({ type: "data", data }));
+                }
+            });
+
+            terminal.onResize(({ cols, rows }) => {
+                if (wsRef.current?.readyState === WebSocket.OPEN) {
+                    wsRef.current.send(
+                        JSON.stringify({ type: "resize", cols, rows })
+                    );
+                }
+            });
+
+            const { cols, rows } = terminal;
+            if (wsRef.current?.readyState === WebSocket.OPEN) {
+                wsRef.current.send(
+                    JSON.stringify({ type: "resize", cols, rows })
+                );
+            }
+        })().catch(console.error);
+
+        return () => {
+            cancelled = true;
+        };
+    }, [connected]);
+
+    useEffect(() => {
+        const onResize = () => fitAddonRef.current?.fit();
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, []);
+
+    useEffect(() => {
+        return () => {
+            wsRef.current?.close();
+            xtermRef.current?.dispose();
+        };
+    }, []);
+
+    useEffect(() => {
+        if (signedKeyData && signedPrivateKey && target) {
+            connect({
+                username: signedKeyData.sshUsername,
+                privateKey: signedPrivateKey,
+                certificate: signedKeyData.certificate
+            });
+        }
+    }, []);
+
+    function connect(
+        override?: ConnectCredentials,
+        authMethod: AuthTab = "password"
+    ) {
+        setConnecting(true);
+        setSessionClosedCode(null);
+        setConnectError(null);
+
+        if (!target) {
+            setConnectError(t("sshErrorNoTarget"));
+            setConnecting(false);
+            return;
+        }
+
+        const values = form.getValues();
+        const username = override?.username ?? values.username;
+        const password =
+            override?.password ??
+            (authMethod === "password" ? values.password : "");
+        const privateKey =
+            override?.privateKey ??
+            (authMethod === "privateKey" ? values.privateKey : "");
+        const certificate = override?.certificate;
+
+        const proxyAddress = `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/gateway/ssh`;
+        const url = new URL(proxyAddress);
+        url.searchParams.set(
+            "mode",
+            target.authDaemonMode === "native" ? "native" : "proxy"
+        );
+        if (target.authDaemonMode !== "native") {
+            url.searchParams.set("host", target.ip ?? "");
+            url.searchParams.set("port", String(target.port ?? 22));
+        }
+        url.searchParams.set("username", username);
+        url.searchParams.set("authToken", target.authToken ?? "");
+
+        const ws = new WebSocket(url.toString(), ["ssh"]);
+        wsRef.current = ws;
+
+        let authConfirmed = false;
+        let authErrorShown = false;
+        let socketOpened = false;
+        let auditLogged = false;
+
+        const logAudit = (action: boolean) => {
+            if (auditLogged || !target) return;
+            auditLogged = true;
+            void api.post(`/org/${target.orgId}/logs/access/attempt`, {
+                resourceId: target.resourceId,
+                action,
+                type: "ssh"
+            });
+        };
+
+        ws.onopen = () => {
+            socketOpened = true;
+            ws.send(
+                JSON.stringify({
+                    type: "auth",
+                    password,
+                    privateKey,
+                    certificate
+                })
+            );
+            if (!override) {
+                void saveEncryptedLocalStorage(
+                    STORAGE_KEY,
+                    form.getValues(),
+                    target.authToken
+                );
+            }
+        };
+
+        ws.onmessage = (evt) => {
+            if (typeof evt.data === "string") {
+                try {
+                    const msg = JSON.parse(evt.data as string) as {
+                        type: string;
+                        data?: string;
+                        error?: string;
+                    };
+                    if (msg.type === "data" && msg.data) {
+                        if (!authConfirmed) {
+                            authConfirmed = true;
+                            logAudit(true);
+                            setConnecting(false);
+                            setConnected(true);
+                        }
+                        xtermRef.current?.write(msg.data);
+                    } else if (msg.type === "error") {
+                        if (!authConfirmed) {
+                            authErrorShown = true;
+                            logAudit(false);
+                            setConnecting(false);
+                            setConnectError(
+                                msg.error ?? t("sshErrorAuthFailed")
+                            );
+                        } else {
+                            xtermRef.current?.writeln(
+                                `\r\n\x1b[31m${t("sshTerminalError", { error: msg.error ?? "" })}\x1b[0m\r\n`
+                            );
+                        }
+                    }
+                } catch {
+                    if (!authConfirmed) {
+                        authConfirmed = true;
+                        setConnecting(false);
+                        setConnected(true);
+                    }
+                    xtermRef.current?.write(evt.data);
+                }
+            } else if (evt.data instanceof Blob) {
+                evt.data.text().then((text) => {
+                    if (!authConfirmed) {
+                        authConfirmed = true;
+                        logAudit(true);
+                        setConnecting(false);
+                        setConnected(true);
+                    }
+                    xtermRef.current?.write(text);
+                });
+            }
+        };
+
+        ws.onerror = () => {
+            logAudit(false);
+            setConnecting(false);
+            setConnected(false);
+            setConnectError(t("sshErrorWebSocket"));
+        };
+
+        ws.onclose = (evt) => {
+            wsRef.current = null;
+            setConnecting(false);
+            const isCleanClose = evt.wasClean || evt.code === 1000;
+            if (isCleanClose && (authConfirmed || socketOpened)) {
+                xtermRef.current?.dispose();
+                xtermRef.current = null;
+                setConnected(false);
+                setSessionClosedCode(evt.code);
+                return;
+            }
+            if (authConfirmed) {
+                setConnected(false);
+                xtermRef.current?.writeln(
+                    `\r\n\x1b[33m${t("sshConnectionClosedCode", { code: evt.code })}\x1b[0m\r\n`
+                );
+            }
+            if (!authConfirmed && !authErrorShown) {
+                logAudit(false);
+                setConnectError(t("sshErrorConnectionClosed"));
+            }
+        };
+    }
+
+    function disconnect() {
+        wsRef.current?.close();
+        xtermRef.current?.dispose();
+        xtermRef.current = null;
+        setConnected(false);
+    }
+
+    function applyTabSchemaErrors(
+        schema: z.ZodObject<z.ZodRawShape>,
+        values: SshCredentialsForm
+    ) {
+        form.clearErrors();
+        const result = schema.safeParse(values);
+        if (result.success) return true;
+        for (const issue of result.error.issues) {
+            const field = issue.path[0];
+            if (typeof field === "string") {
+                form.setError(field as keyof SshCredentialsForm, {
+                    message: issue.message
+                });
+            }
+        }
+        return false;
+    }
+
+    function onPasswordSubmit(e: React.FormEvent) {
+        e.preventDefault();
+        setConnectError(null);
+        const values = form.getValues();
+        if (!applyTabSchemaErrors(passwordTabSchema, values)) return;
+        connect(undefined, "password");
+    }
+
+    function onPrivateKeySubmit(e: React.FormEvent) {
+        e.preventDefault();
+        setConnectError(null);
+        const values = form.getValues();
+        if (!applyTabSchemaErrors(privateKeyTabSchema, values)) return;
+        connect(undefined, "privateKey");
+    }
+
+    if (signedKeyData && signedPrivateKey) {
+        return (
+            <>
+                {!connected && (
+                    <div className="flex items-center justify-center">
+                        <Card className="w-full max-w-md">
+                            <CardHeader>
+                                <CardTitle>{t("sshTitle")}</CardTitle>
+                                <CardDescription>
+                                    {t("sshConnectingDescription")}
+                                </CardDescription>
+                            </CardHeader>
+                            <CardContent className="flex flex-col items-center space-y-4">
+                                {!connectError && (
+                                    <div className="flex items-center space-x-2">
+                                        <Loader2 className="h-5 w-5 animate-spin" />
+                                        <span>
+                                            {connecting
+                                                ? t("sshConnecting")
+                                                : t("sshInitializing")}
+                                        </span>
+                                    </div>
+                                )}
+                                {connectError && (
+                                    <Alert
+                                        variant="destructive"
+                                        className="w-full"
+                                    >
+                                        <AlertDescription>
+                                            {connectError}
+                                        </AlertDescription>
+                                    </Alert>
+                                )}
+                            </CardContent>
+                        </Card>
+                    </div>
+                )}
+                {connected && (
+                    <div className="fixed inset-0 z-50 flex flex-col bg-neutral-900">
+                        <div
+                            ref={terminalRef}
+                            className="flex-1 overflow-hidden"
+                            style={{ minHeight: 0 }}
+                        />
+                    </div>
+                )}
+            </>
+        );
+    }
+
+    if (error) {
+        return (
+            <BrandedAuthSurface primaryColor={primaryColor}>
+                <PoweredByPangolin />
+                <Card className="w-full">
+                    <CardHeader>
+                        <CardTitle>{t("sshTitle")}</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <Alert variant="destructive">
+                            <AlertDescription>{error}</AlertDescription>
+                        </Alert>
+                    </CardContent>
+                </Card>
+            </BrandedAuthSurface>
+        );
+    }
+
+    if (sessionClosedCode !== null) {
+        return (
+            <BrandedAuthSurface primaryColor={primaryColor}>
+                <PoweredByPangolin />
+                <Card className="w-full max-w-md">
+                    <CardHeader>
+                        <CardTitle>{t("sshTitle")}</CardTitle>
+                        <CardDescription>
+                            {t("sshConnectionClosedCode", {
+                                code: sessionClosedCode
+                            })}
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        <Alert>
+                            <AlertDescription>
+                                This session has ended. You can close this tab
+                                now.
+                            </AlertDescription>
+                        </Alert>
+                        <Button
+                            type="button"
+                            className="w-full"
+                            onClick={() => window.close()}
+                        >
+                            {t("close")}
+                        </Button>
+                    </CardContent>
+                </Card>
+                <AuthPageFooterNotices />
+            </BrandedAuthSurface>
+        );
+    }
+
+    return (
+        <>
+            {!connected && (
+                <BrandedAuthSurface primaryColor={primaryColor}>
+                    <PoweredByPangolin />
+                    <Card className="w-full">
+                        <CardHeader>
+                            <CardTitle>{t("sshSignInTitle")}</CardTitle>
+                            <CardDescription>
+                                {resourceName
+                                    ? `${t("sshSignInDescription")} (${resourceName})`
+                                    : t("sshSignInDescription")}
+                            </CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <Form {...form}>
+                                <HorizontalTabs
+                                    clientSide
+                                    defaultTab={0}
+                                    items={[
+                                        {
+                                            title: t("sshPasswordTab"),
+                                            href: "#"
+                                        },
+                                        {
+                                            title: t("sshPrivateKeyTab"),
+                                            href: "#"
+                                        }
+                                    ]}
+                                >
+                                    <form
+                                        onSubmit={onPasswordSubmit}
+                                        className="space-y-4 mt-4 p-1"
+                                    >
+                                        <FormField
+                                            control={form.control}
+                                            name="username"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t("username")}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input {...field} />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                        <FormField
+                                            control={form.control}
+                                            name="password"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t("password")}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input
+                                                            type="password"
+                                                            {...field}
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                        <div className="mt-4 space-y-3">
+                                            <Button
+                                                type="submit"
+                                                loading={connecting}
+                                                disabled={connecting}
+                                                className="w-full"
+                                            >
+                                                {t("sshAuthenticate")}
+                                            </Button>
+                                            {connectError && (
+                                                <Alert variant="destructive">
+                                                    <AlertDescription>
+                                                        {connectError}
+                                                    </AlertDescription>
+                                                </Alert>
+                                            )}
+                                        </div>
+                                    </form>
+
+                                    <form
+                                        onSubmit={onPrivateKeySubmit}
+                                        className="space-y-4 mt-4 p-1"
+                                    >
+                                        <p className="text-sm text-muted-foreground">
+                                            {t("sshPrivateKeyDisclaimer")}{" "}
+                                            <Link
+                                                href="https://docs.pangolin.net/manage/ssh#authentication-method"
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                className="text-primary hover:underline inline-flex items-center gap-1"
+                                            >
+                                                {t("sshLearnMore")}
+                                                <ExternalLink className="size-3.5 shrink-0" />
+                                            </Link>
+                                        </p>
+                                        <FormField
+                                            control={form.control}
+                                            name="username"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t("username")}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input {...field} />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                        <FormField
+                                            control={form.control}
+                                            name="privateKey"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t(
+                                                            "sshPrivateKeyField"
+                                                        )}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Textarea
+                                                            {...field}
+                                                            placeholder={t(
+                                                                "sshPrivateKeyPlaceholder"
+                                                            )}
+                                                            rows={5}
+                                                            className="font-mono text-xs"
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                        <FormItem>
+                                            <FormLabel>
+                                                {t("sshPrivateKeyFile")}
+                                            </FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    type="file"
+                                                    accept=".pem,.key,.pub,*"
+                                                    onChange={handleKeyFile}
+                                                />
+                                            </FormControl>
+                                        </FormItem>
+                                        <div className="mt-4 space-y-3">
+                                            <Button
+                                                type="submit"
+                                                loading={connecting}
+                                                disabled={connecting}
+                                                className="w-full"
+                                            >
+                                                {t("sshAuthenticate")}
+                                            </Button>
+                                            {connectError && (
+                                                <Alert variant="destructive">
+                                                    <AlertDescription>
+                                                        {connectError}
+                                                    </AlertDescription>
+                                                </Alert>
+                                            )}
+                                        </div>
+                                    </form>
+                                </HorizontalTabs>
+                            </Form>
+                        </CardContent>
+                    </Card>
+                    <AuthPageFooterNotices />
+                </BrandedAuthSurface>
+            )}
+
+            {connected && (
+                <div className="fixed inset-0 z-50 flex flex-col bg-neutral-900">
+                    {/* <div className="flex flex-wrap items-center gap-2 bg-black p-2 text-white">
+                        <Button
+                            size="sm"
+                            variant="destructive"
+                            onClick={disconnect}
+                        >
+                            {t("sshTerminate")}
+                        </Button>
+                    </div> */}
+                    <div
+                        ref={terminalRef}
+                        className="flex-1 overflow-hidden"
+                        style={{ minHeight: 0 }}
+                    />
+                </div>
+            )}
+        </>
+    );
+}

src/app/ssh/page.tsx

@@ -0,0 +1,184 @@
+import { headers } from "next/headers";
+import { priv } from "@app/lib/api";
+import { generateBrowserGatewayMetadata } from "@app/lib/browserGatewayMetadata";
+import { getBrowserTargetForRequest } from "@app/lib/getBrowserTargetForRequest";
+import { loadOrgLoginPageBranding } from "@app/lib/loadOrgLoginPageBranding";
+import axios, { AxiosResponse } from "axios";
+import { GetBrowserTargetResponse } from "@server/routers/browserGatewayTarget";
+import SshClient from "./SshClient";
+import crypto from "crypto";
+import AuthFooter from "@app/components/AuthFooter";
+import type { SignSshKeyResponse } from "@server/routers/ssh/types";
+import { getTranslations } from "next-intl/server";
+
+const pollInitialDelayMs = 250;
+const pollStartIntervalMs = 250;
+const pollBackoffSteps = 6;
+
+type RoundTripMessageResponse = {
+    messageId: number;
+    complete: boolean;
+    sentAt: number | string;
+    receivedAt: number | string | null;
+    error: string | null;
+};
+
+function sleep(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function waitForRoundTripCompletion(
+    messageIds: number[],
+    cookieHeader: string
+): Promise<void> {
+    if (messageIds.length === 0) {
+        return;
+    }
+
+    await sleep(pollInitialDelayMs);
+
+    let interval = pollStartIntervalMs;
+    for (let i = 0; i <= pollBackoffSteps; i++) {
+        for (const messageId of messageIds) {
+            const res = await priv.get<AxiosResponse<RoundTripMessageResponse>>(
+                `/ws/round-trip-message/${messageId}`,
+                {
+                    headers: {
+                        Cookie: cookieHeader
+                    }
+                }
+            );
+
+            const message = res.data.data;
+            if (message.complete) {
+                if (message.error) {
+                    throw new Error(message.error);
+                }
+                return;
+            }
+        }
+
+        if (i < pollBackoffSteps) {
+            await sleep(interval);
+            interval *= 2;
+        }
+    }
+
+    throw new Error("Timed out waiting for round-trip message completion");
+}
+
+function generateEphemeralKeyPair(): {
+    privateKeyPem: string;
+    publicKeyOpenSSH: string;
+} {
+    const { publicKey: pubKeyObj, privateKey: privKeyObj } =
+        crypto.generateKeyPairSync("ed25519");
+
+    const privateKeyPem = privKeyObj.export({
+        type: "pkcs8",
+        format: "pem"
+    }) as string;
+
+    // Build OpenSSH wire format: uint32-length-prefixed strings
+    const pubKeyDer = pubKeyObj.export({
+        type: "spki",
+        format: "der"
+    }) as Buffer;
+    const rawPubKey = pubKeyDer.subarray(pubKeyDer.length - 32); // last 32 bytes are the Ed25519 key
+
+    function encodeField(b: Buffer): Buffer {
+        const len = Buffer.allocUnsafe(4);
+        len.writeUInt32BE(b.length, 0);
+        return Buffer.concat([len, b]);
+    }
+
+    const keyBlob = Buffer.concat([
+        encodeField(Buffer.from("ssh-ed25519")),
+        encodeField(rawPubKey)
+    ]);
+    const publicKeyOpenSSH = `ssh-ed25519 ${keyBlob.toString("base64")}`;
+
+    return { privateKeyPem, publicKeyOpenSSH };
+}
+
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata() {
+    return generateBrowserGatewayMetadata("SSH");
+}
+
+export default async function SshPage() {
+    const t = await getTranslations();
+    const headersList = await headers();
+    const cookieHeader = headersList.get("cookie") || "";
+
+    let target: GetBrowserTargetResponse | null = null;
+    let signedKeyData: SignSshKeyResponse | null = null;
+    let privateKey: string | null = null;
+    let error: string | null = null;
+
+    const { target: browserTarget } = await getBrowserTargetForRequest();
+    target = browserTarget;
+
+    if (!target) {
+        error = t("browserGatewayNoResourceForDomain");
+    } else if (target.pamMode === "push") {
+        try {
+            const { privateKeyPem, publicKeyOpenSSH } =
+                generateEphemeralKeyPair();
+            privateKey = privateKeyPem;
+            const res = await priv.post<AxiosResponse<SignSshKeyResponse>>(
+                `/org/${target.orgId}/ssh/sign-key`,
+                {
+                    publicKey: publicKeyOpenSSH,
+                    resourceId: target.resourceId,
+                    type: "public"
+                },
+                {
+                    headers: {
+                        Cookie: cookieHeader
+                    }
+                }
+            );
+            signedKeyData = res.data.data;
+
+            const messageIds =
+                signedKeyData.messageIds.length > 0
+                    ? signedKeyData.messageIds
+                    : signedKeyData.messageId
+                      ? [signedKeyData.messageId]
+                      : [];
+
+            await waitForRoundTripCompletion(messageIds, cookieHeader);
+        } catch (err) {
+            console.error("Error signing SSH key:", err);
+            if (axios.isAxiosError(err) && err.response?.status === 403) {
+                error = t("accessDeniedDescription");
+            } else {
+                const detail = err instanceof Error ? err.message : String(err);
+                error = `${t("sshErrorSignKeyFailed")}: ${detail}`;
+            }
+        }
+    }
+
+    const { primaryColor } = target
+        ? await loadOrgLoginPageBranding(target.orgId)
+        : { primaryColor: null };
+
+    return (
+        <div className="h-full flex flex-col">
+            <div className="flex-1 flex md:items-center justify-center">
+                <div className="w-full max-w-md p-3">
+                    <SshClient
+                        target={target}
+                        error={error}
+                        signedKeyData={signedKeyData}
+                        privateKey={privateKey}
+                        primaryColor={primaryColor}
+                    />
+                </div>
+            </div>
+            <AuthFooter />
+        </div>
+    );
+}

src/app/vnc/VncClient.tsx

@@ -0,0 +1,408 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Button } from "@app/components/ui/button";
+import { Input } from "@app/components/ui/input";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { toast } from "@app/hooks/useToast";
+import { GetBrowserTargetResponse } from "@server/routers/browserGatewayTarget";
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+    CardDescription
+} from "@app/components/ui/card";
+import { Alert, AlertDescription } from "@app/components/ui/alert";
+import BrandedAuthSurface from "@app/components/BrandedAuthSurface";
+import PoweredByPangolin from "@app/components/PoweredByPangolin";
+import AuthPageFooterNotices from "@app/components/AuthPageFooterNotices";
+import CollapsibleSessionToolbar from "@app/components/CollapsibleSessionToolbar";
+import { useTranslations } from "next-intl";
+import {
+    loadEncryptedLocalStorage,
+    saveEncryptedLocalStorage
+} from "@app/lib/secureLocalStorage";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+
+type VncCredentialsForm = {
+    username: string;
+    password: string;
+};
+
+const DEFAULT_VNC_CREDENTIALS: VncCredentialsForm = {
+    username: "",
+    password: ""
+};
+
+export default function VncClient({
+    target,
+    error,
+    primaryColor
+}: {
+    target: GetBrowserTargetResponse | null;
+    error: string | null;
+    primaryColor?: string | null;
+}) {
+    const t = useTranslations();
+    const api = createApiClient(useEnvContext());
+    const STORAGE_KEY = "pangolin_vnc_credentials";
+    const resourceName = target?.name?.trim() || null;
+
+    const formSchema = z.object({
+        username: z.string(),
+        password: z.string()
+    });
+
+    const form = useForm<VncCredentialsForm>({
+        resolver: zodResolver(formSchema),
+        defaultValues: DEFAULT_VNC_CREDENTIALS
+    });
+
+    useEffect(() => {
+        let cancelled = false;
+
+        void loadEncryptedLocalStorage<VncCredentialsForm>(
+            STORAGE_KEY,
+            target?.authToken
+        ).then((saved) => {
+            if (cancelled || !saved) return;
+            form.reset({ ...DEFAULT_VNC_CREDENTIALS, ...saved });
+        });
+
+        return () => {
+            cancelled = true;
+        };
+    }, [form, target?.authToken]);
+
+    const [connected, setConnected] = useState(false);
+    const [connecting, setConnecting] = useState(false);
+    const [connectError, setConnectError] = useState<string | null>(null);
+    const rfbRef = useRef<any>(null);
+    const screenRef = useRef<HTMLDivElement>(null);
+
+    const disconnect = () => {
+        if (rfbRef.current) {
+            rfbRef.current.disconnect();
+            rfbRef.current = null;
+        }
+        setConnecting(false);
+        setConnected(false);
+    };
+
+    useEffect(() => {
+        return () => disconnect();
+    }, []);
+
+    const connect = async (values: VncCredentialsForm) => {
+        setConnecting(true);
+
+        if (!target) {
+            setConnectError(t("vncNoResourceTarget"));
+            setConnecting(false);
+            return;
+        }
+
+        if (!screenRef.current) {
+            setConnectError(t("sshErrorConnectionClosed"));
+            setConnecting(false);
+            return;
+        }
+
+        disconnect();
+
+        const proxyAddress = `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/gateway/vnc`;
+        const base = proxyAddress.replace(/\/$/, "");
+        const params = new URLSearchParams({
+            host: target.ip,
+            port: String(target.port),
+            authToken: target.authToken
+        });
+
+        // try {
+        //     const checkParams = new URLSearchParams(params);
+        //     checkParams.set("checkOnly", "1");
+        //     const response = await fetch(`${base}?${checkParams.toString()}`);
+        //     if (!response.ok) {
+        //         const detail = (await response.text()).trim();
+        //         setConnectError(detail || t("sshErrorConnectionClosed"));
+        //         setConnecting(false);
+        //         return;
+        //     }
+        // } catch {
+        //     setConnectError(t("sshErrorWebSocket"));
+        //     setConnecting(false);
+        //     return;
+        // }
+
+        let RFB: new (
+            target: HTMLElement,
+            url: string,
+            options?: Record<string, unknown>
+        ) => unknown;
+        try {
+            // @ts-expect-error — @novnc/novnc ships plain JS with no bundled types
+            const mod = await import("@novnc/novnc");
+            RFB = mod.default ?? mod;
+        } catch (err) {
+            setConnecting(false);
+            setConnectError(t("sshErrorWebSocket"));
+            toast({
+                variant: "destructive",
+                title: t("vncFailedToLoadNovnc"),
+                description: `${err}`
+            });
+            return;
+        }
+
+        const wsUrl = `${base}?${params.toString()}`;
+
+        screenRef.current.innerHTML = "";
+
+        const options: Record<string, unknown> = {};
+        if (values.username || values.password) {
+            options.credentials = {
+                username: values.username,
+                password: values.password
+            };
+        }
+
+        let rfb: any;
+        try {
+            rfb = new RFB(screenRef.current, wsUrl, options);
+        } catch {
+            setConnecting(false);
+            setConnectError(t("sshErrorWebSocket"));
+            return;
+        }
+
+        let authConfirmed = false;
+        let auditLogged = false;
+
+        rfb.scaleViewport = true;
+        rfb.resizeSession = true;
+
+        rfb.addEventListener("connect", () => {
+            void saveEncryptedLocalStorage(
+                STORAGE_KEY,
+                values,
+                target.authToken
+            );
+            authConfirmed = true;
+            auditLogged = true;
+            void api.post(`/org/${target.orgId}/logs/access/attempt`, {
+                resourceId: target.resourceId,
+                action: true,
+                type: "vnc"
+            });
+            setConnecting(false);
+            setConnected(true);
+        });
+
+        rfb.addEventListener(
+            "disconnect",
+            (e: { detail: { clean: boolean } }) => {
+                rfbRef.current = null;
+                setConnecting(false);
+                setConnected(false);
+                if (!authConfirmed && !e.detail.clean) {
+                    if (!auditLogged) {
+                        auditLogged = true;
+                        void api.post(
+                            `/org/${target.orgId}/logs/access/attempt`,
+                            {
+                                resourceId: target.resourceId,
+                                action: false,
+                                type: "vnc"
+                            }
+                        );
+                    }
+                    setConnectError(t("sshErrorConnectionClosed"));
+                }
+            }
+        );
+
+        rfb.addEventListener(
+            "securityfailure",
+            (e: { detail: { status: number; reason?: string } }) => {
+                auditLogged = true;
+                void api.post(`/org/${target.orgId}/logs/access/attempt`, {
+                    resourceId: target.resourceId,
+                    action: false,
+                    type: "vnc"
+                });
+                disconnect();
+                setConnectError(
+                    e.detail.reason ??
+                        t("vncAuthFailedStatus", {
+                            status: e.detail.status
+                        })
+                );
+            }
+        );
+
+        rfbRef.current = rfb;
+    };
+
+    const onSubmit = (values: VncCredentialsForm) => {
+        setConnectError(null);
+        connect(values);
+    };
+
+    if (error) {
+        return (
+            <BrandedAuthSurface primaryColor={primaryColor}>
+                <PoweredByPangolin />
+                <Card className="w-full">
+                    <CardHeader>
+                        <CardTitle>{t("vncTitle")}</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <Alert variant="destructive">
+                            <AlertDescription>{error}</AlertDescription>
+                        </Alert>
+                    </CardContent>
+                </Card>
+            </BrandedAuthSurface>
+        );
+    }
+
+    return (
+        <>
+            {!connected && (
+                <BrandedAuthSurface primaryColor={primaryColor}>
+                    <PoweredByPangolin />
+                    <Card className="w-full">
+                        <CardHeader>
+                            <CardTitle>{t("vncTitle")}</CardTitle>
+                            <CardDescription>
+                                {resourceName
+                                    ? `${t("vncSignInDescription")} (${resourceName})`
+                                    : t("vncSignInDescription")}
+                            </CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <Form {...form}>
+                                <form
+                                    onSubmit={form.handleSubmit(onSubmit)}
+                                    className="space-y-4"
+                                >
+                                    <FormField
+                                        control={form.control}
+                                        name="username"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t("vncUsernameOptional")}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input
+                                                        type="text"
+                                                        autoComplete="username"
+                                                        {...field}
+                                                    />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                    <FormField
+                                        control={form.control}
+                                        name="password"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t("vncPasswordOptional")}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input
+                                                        type="password"
+                                                        {...field}
+                                                    />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                    {connectError && (
+                                        <Alert variant="destructive">
+                                            <AlertDescription>
+                                                {connectError}
+                                            </AlertDescription>
+                                        </Alert>
+                                    )}
+                                    <Button
+                                        type="submit"
+                                        className="w-full"
+                                        loading={connecting}
+                                        disabled={connecting}
+                                    >
+                                        {t("browserGatewayConnect")}
+                                    </Button>
+                                </form>
+                            </Form>
+                        </CardContent>
+                    </Card>
+                    <AuthPageFooterNotices />
+                </BrandedAuthSurface>
+            )}
+
+            <div
+                className="fixed inset-0 z-50 flex flex-col bg-neutral-900"
+                style={{ display: connected ? "flex" : "none" }}
+            >
+                <CollapsibleSessionToolbar>
+                    <Button
+                        size="sm"
+                        variant="destructive"
+                        onClick={disconnect}
+                    >
+                        {t("sshTerminate")}
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => {
+                            if (rfbRef.current) {
+                                rfbRef.current.sendCtrlAltDel();
+                            }
+                        }}
+                    >
+                        {t("browserGatewayCtrlAltDel")}
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => {
+                            navigator.clipboard
+                                ?.readText()
+                                .then((text) => {
+                                    rfbRef.current?.clipboardPasteFrom(text);
+                                })
+                                .catch(() => {});
+                        }}
+                    >
+                        {t("vncPasteClipboard")}
+                    </Button>
+                </CollapsibleSessionToolbar>
+
+                <div
+                    ref={screenRef}
+                    className="flex-1 overflow-hidden"
+                    style={{ background: "#000" }}
+                />
+            </div>
+        </>
+    );
+}

src/app/vnc/page.tsx

@@ -0,0 +1,36 @@
+import { generateBrowserGatewayMetadata } from "@app/lib/browserGatewayMetadata";
+import { getBrowserTargetForRequest } from "@app/lib/getBrowserTargetForRequest";
+import { loadOrgLoginPageBranding } from "@app/lib/loadOrgLoginPageBranding";
+import VncClient from "./VncClient";
+import AuthFooter from "@app/components/AuthFooter";
+import { getTranslations } from "next-intl/server";
+
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata() {
+    return generateBrowserGatewayMetadata("VNC");
+}
+
+export default async function VncPage() {
+    const t = await getTranslations();
+    const { target } = await getBrowserTargetForRequest();
+    const error = target ? null : t("browserGatewayNoResourceForDomain");
+    const { primaryColor } = target
+        ? await loadOrgLoginPageBranding(target.orgId)
+        : { primaryColor: null };
+
+    return (
+        <div className="h-full flex flex-col">
+            <div className="flex-1 flex md:items-center justify-center">
+                <div className="w-full max-w-md p-3">
+                    <VncClient
+                        target={target}
+                        error={error}
+                        primaryColor={primaryColor}
+                    />
+                </div>
+            </div>
+            <AuthFooter />
+        </div>
+    );
+}

src/components/AuthFooter.tsx

@@ -0,0 +1,117 @@
+import { Separator } from "@app/components/ui/separator";
+import { priv } from "@app/lib/api";
+import { pullEnv } from "@app/lib/pullEnv";
+import { build } from "@server/build";
+import { GetLicenseStatusResponse } from "@server/routers/license/types";
+import { AxiosResponse } from "axios";
+import { getTranslations } from "next-intl/server";
+import { cache } from "react";
+
+export default async function AuthFooter() {
+    const env = pullEnv();
+    const t = await getTranslations();
+
+    let hideFooter = false;
+    let licenseStatus: GetLicenseStatusResponse | null = null;
+
+    if (build === "enterprise") {
+        const licenseStatusRes = await cache(
+            async () =>
+                await priv.get<AxiosResponse<GetLicenseStatusResponse>>(
+                    "/license/status"
+                )
+        )();
+        licenseStatus = licenseStatusRes.data.data;
+        if (
+            env.branding.hideAuthLayoutFooter &&
+            licenseStatusRes.data.data.isHostLicensed &&
+            licenseStatusRes.data.data.isLicenseValid &&
+            licenseStatusRes.data.data.tier !== "personal"
+        ) {
+            hideFooter = true;
+        }
+    }
+
+    if (hideFooter) return null;
+
+    return (
+        <footer className="hidden md:block w-full mt-12 py-3 mb-6 px-4">
+            <div className="container mx-auto flex flex-wrap justify-center items-center h-3 space-x-4 text-xs text-neutral-400 dark:text-neutral-600">
+                <a
+                    href="https://pangolin.net"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="Built by Fossorial"
+                    className="flex items-center space-x-2 whitespace-nowrap"
+                >
+                    <span>© {new Date().getFullYear()} Fossorial, Inc.</span>
+                </a>
+                {build !== "saas" && (
+                    <>
+                        <Separator orientation="vertical" />
+                        <a
+                            href="https://pangolin.net"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            aria-label="Built by Fossorial"
+                            className="flex items-center space-x-2 whitespace-nowrap"
+                        >
+                            <span>
+                                {process.env.BRANDING_APP_NAME || "Pangolin"}
+                            </span>
+                        </a>
+                    </>
+                )}
+                <Separator orientation="vertical" />
+                <span>
+                    {build === "oss"
+                        ? t("communityEdition")
+                        : build === "enterprise"
+                          ? t("enterpriseEdition")
+                          : t("pangolinCloud")}
+                </span>
+                {build === "enterprise" &&
+                licenseStatus?.isHostLicensed &&
+                licenseStatus?.isLicenseValid &&
+                licenseStatus?.tier === "personal" ? (
+                    <>
+                        <Separator orientation="vertical" />
+                        <span>{t("personalUseOnly")}</span>
+                    </>
+                ) : null}
+                {build === "enterprise" &&
+                (!licenseStatus?.isHostLicensed ||
+                    !licenseStatus?.isLicenseValid) ? (
+                    <>
+                        <Separator orientation="vertical" />
+                        <span>{t("unlicensed")}</span>
+                    </>
+                ) : null}
+                {build === "saas" && (
+                    <>
+                        <Separator orientation="vertical" />
+                        <a
+                            href="https://pangolin.net/tos"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            aria-label="GitHub"
+                            className="flex items-center space-x-2 whitespace-nowrap"
+                        >
+                            <span>{t("termsOfService")}</span>
+                        </a>
+                        <Separator orientation="vertical" />
+                        <a
+                            href="https://pangolin.net/privacy"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            aria-label="GitHub"
+                            className="flex items-center space-x-2 whitespace-nowrap"
+                        >
+                            <span>{t("privacyPolicy")}</span>
+                        </a>
+                    </>
+                )}
+            </div>
+        </footer>
+    );
+}

src/components/AuthPageBrandingForm.tsx

@@ -28,15 +28,14 @@ import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { build } from "@server/build";
+import { validateLocalPath } from "@app/lib/validateLocalPath";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import type { GetLoginPageBrandingResponse } from "@server/routers/loginPage/types";
 import { XIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { PaidFeaturesAlert } from "./PaidFeaturesAlert";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
-import { validateLocalPath } from "@app/lib/validateLocalPath";
-import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
-import { tierMatrix } from "@server/lib/billing/tierMatrix";
 
 export type AuthPageCustomizationProps = {
     orgId: string;
@@ -92,7 +91,7 @@ export default function AuthPageBrandingForm({
             orgSubtitle: branding?.orgSubtitle ?? `Log in to {{orgName}}`,
             resourceTitle:
                 branding?.resourceTitle ??
-                `Authenticate to access {{resourceName}}`,
+                `Authenticate to Access {{resourceName}}`,
             resourceSubtitle:
                 branding?.resourceSubtitle ??
                 `Choose your preferred authentication method for {{resourceName}}`,

src/components/AuthPageFooterNotices.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+// import { useSupporterStatusContext } from "@app/hooks/useSupporterStatusContext";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import { useTranslations } from "next-intl";
+import { build } from "@server/build";
+
+export default function AuthPageFooterNotices() {
+    const t = useTranslations();
+    // const { supporterStatus } = useSupporterStatusContext();
+    const { isUnlocked, licenseStatus } = useLicenseStatusContext();
+
+    return (
+        <>
+            {/* {supporterStatus?.visible && (
+                <div className="text-center mt-2">
+                    <span className="text-sm text-muted-foreground opacity-50">
+                        {t("noSupportKey")}
+                    </span>
+                </div>
+            )} */}
+            {build === "enterprise" && !isUnlocked() ? (
+                <div className="text-center mt-2">
+                    <span className="text-sm font-medium text-muted-foreground">
+                        {t("instanceIsUnlicensed")}
+                    </span>
+                </div>
+            ) : null}
+            {build === "enterprise" &&
+            isUnlocked() &&
+            licenseStatus?.tier === "personal" ? (
+                <div className="text-center mt-2">
+                    <span className="text-sm font-medium text-muted-foreground">
+                        {t("loginPageLicenseWatermark")}
+                    </span>
+                </div>
+            ) : null}
+        </>
+    );
+}

src/components/BrandedAuthSurface.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+
+type BrandedAuthSurfaceProps = {
+    primaryColor?: string | null;
+    children: React.ReactNode;
+};
+
+export default function BrandedAuthSurface({
+    primaryColor,
+    children
+}: BrandedAuthSurfaceProps) {
+    const { isUnlocked } = useLicenseStatusContext();
+
+    return (
+        <div
+            style={{
+                // @ts-expect-error CSS variable
+                "--primary": isUnlocked() ? primaryColor : null
+            }}
+        >
+            {children}
+        </div>
+    );
+}

src/components/BrowserGatewayTargetForm.tsx

@@ -0,0 +1,238 @@
+"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 BaseProps<T extends FieldValues> = {
+    control: Control<T>;
+    orgId: string;
+    destinationField: Path<T>;
+    destinationPortField: Path<T>;
+    learnMoreHref?: string;
+    defaultPort: number;
+};
+
+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>
+) {
+    // IDK MAN REMOVING THIS SEEMS TO CAUSE ISSUES
+    // Opt out of the React Compiler for this component.
+    //
+    // The parent (create page) shares a single `bgTargetForm` instance across
+    // multiple conditionally-rendered Form sections (SSH passthrough/push, RDP,
+    // VNC) and calls `bgTargetForm.reset(...)` in a useEffect when the
+    // resource type changes. react-hook-form's Controller uses an external
+    // subscription that the React Compiler cannot statically reason about, so
+    // with `reactCompiler: true` (see next.config.ts) the Compiler can memoize
+    // the render prop and skip re-rendering the <Input> elements when their
+    // bound form values change. The visible symptom is that typing into the
+    // destination/port inputs updates form state but the input itself never
+    // visually updates. The escape hatch is the canonical fix here.
+    "use no memo";
+    const t = useTranslations();
+    const [siteOpen, setSiteOpen] = useState(false);
+
+    const sitesFieldName =
+        props.multiSite === true ? props.sitesField : props.siteField;
+
+    // Subscribe to field values via useWatch and drive the controlled <Input>
+    // elements from these values rather than from the `field.value` returned
+    // by the Controller render prop. Combined with the "use no memo" directive
+    // above, this makes the inputs reliably re-render when their bound form
+    // values change.
+    const watchedSites = useWatch({
+        control: props.control,
+        name: sitesFieldName
+    });
+
+    const watchedDestination = useWatch({
+        control: props.control,
+        name: props.destinationField
+    });
+
+    const watchedDestinationPort = useWatch({
+        control: props.control,
+        name: props.destinationPortField
+    });
+
+    const showMultiSiteDisclaimer =
+        props.multiSite === true &&
+        ((watchedSites as Selectedsite[] | undefined)?.length ?? 0) > 1;
+
+    return (
+        <div className="space-y-2">
+            <div className="grid grid-cols-3 gap-4 items-start">
+                <FormField
+                    control={props.control}
+                    name={sitesFieldName}
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>{t("sites")}</FormLabel>
+                            <Popover open={siteOpen} onOpenChange={setSiteOpen}>
+                                <PopoverTrigger asChild>
+                                    <FormControl>
+                                        <Button
+                                            variant="outline"
+                                            role="combobox"
+                                            className={cn(
+                                                "w-full justify-between font-normal",
+                                                "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+                                                props.multiSite === true
+                                                    ? (
+                                                          field.value as Selectedsite[]
+                                                      )?.length === 0 &&
+                                                          "text-muted-foreground"
+                                                    : !field.value &&
+                                                          "text-muted-foreground"
+                                            )}
+                                        >
+                                            <span className="truncate">
+                                                {props.multiSite === true
+                                                    ? 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}
+                                            filterTypes={["newt"]}
+                                        />
+                                    ) : (
+                                        <SitesSelector
+                                            orgId={props.orgId}
+                                            selectedSite={
+                                                field.value as Selectedsite | null
+                                            }
+                                            onSelectSite={(site) => {
+                                                field.onChange(site);
+                                                setSiteOpen(false);
+                                            }}
+                                            filterTypes={["newt"]}
+                                        />
+                                    )}
+                                </PopoverContent>
+                            </Popover>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={props.control}
+                    name={props.destinationField}
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>{t("destination")}</FormLabel>
+                            <FormControl>
+                                <Input
+                                    name={field.name}
+                                    ref={field.ref}
+                                    onBlur={field.onBlur}
+                                    onChange={field.onChange}
+                                    value={
+                                        (watchedDestination as
+                                            | string
+                                            | undefined) ?? ""
+                                    }
+                                />
+                            </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}
+                                    name={field.name}
+                                    ref={field.ref}
+                                    onBlur={field.onBlur}
+                                    onChange={field.onChange}
+                                    value={
+                                        (watchedDestinationPort as
+                                            | string
+                                            | number
+                                            | undefined) ?? ""
+                                    }
+                                />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+            </div>
+            {showMultiSiteDisclaimer && (
+                <p className="text-sm text-muted-foreground">
+                    {t("bgTargetMultiSiteDisclaimer")}{" "}
+                    <a
+                        href={
+                            props.learnMoreHref ??
+                            "https://docs.pangolin.net/manage/resources/private/multi-site-routing"
+                        }
+                        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>
+    );
+}

src/components/ClientInfoCard.tsx

@@ -27,20 +27,18 @@ export default function SiteInfoCard({}: ClientInfoCardProps) {
     return (
         <Alert>
             <AlertDescription>
-                <InfoSections cols={3}>
+                <InfoSections cols={userDisplayName ? 3 : 2}>
                     <InfoSection>
                         <InfoSectionTitle>{t("name")}</InfoSectionTitle>
                         <InfoSectionContent>{client.name}</InfoSectionContent>
                     </InfoSection>
-                    <InfoSection>
-                        <InfoSectionTitle>
-                            {userDisplayName ? t("user") : t("identifier")}
-                        </InfoSectionTitle>
-                        <InfoSectionContent>
-                            <div className="flex flex-wrap items-center gap-2">
-                                <span>{userDisplayName || client.niceId}</span>
-                                {userDisplayName &&
-                                    (client.userType ?? "internal") !==
+                    {userDisplayName ? (
+                        <InfoSection>
+                            <InfoSectionTitle>{t("user")}</InfoSectionTitle>
+                            <InfoSectionContent>
+                                <div className="flex flex-wrap items-center gap-2">
+                                    <span>{userDisplayName}</span>
+                                    {(client.userType ?? "internal") !==
                                         "internal" && (
                                         <IdpTypeBadge
                                             type={client.userType ?? "oidc"}
@@ -54,9 +52,10 @@ export default function SiteInfoCard({}: ClientInfoCardProps) {
                                             }
                                         />
                                     )}
-                            </div>
-                        </InfoSectionContent>
-                    </InfoSection>
+                                </div>
+                            </InfoSectionContent>
+                        </InfoSection>
+                    ) : null}
                     <InfoSection>
                         <InfoSectionTitle>{t("status")}</InfoSectionTitle>
                         <InfoSectionContent>