Merge branch 'dev' into feat/redirect-tables

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

@@ -524,6 +524,7 @@ export default function BillingPage() {
     };
 
     const currentPlanId = getCurrentPlanId();
+    const currentPlan = planOptions.find((p) => p.id === currentPlanId);
 
     const visiblePlanOptions = planOptions.filter(
         (plan) => plan.id !== "home" || currentPlanId === "home"
@@ -873,10 +874,8 @@ export default function BillingPage() {
             {/* Trial Banner */}
             {isTrial && (
                 <TrialBillingBanner
+                    tierName={currentPlan?.name ?? "Business"}
                     onUpgrade={() => {
-                        const currentPlan = planOptions.find(
-                            (p) => p.id === currentPlanId
-                        );
                         if (currentPlan?.tierType) {
                             handleStartSubscription(currentPlan.tierType);
                         }

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

@@ -34,6 +34,10 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import ActionBanner from "@app/components/ActionBanner";
 import { Shield, ShieldOff } from "lucide-react";
+import OrgRolesTagField from "@app/components/OrgRolesTagField";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
 
 const GeneralFormSchema = z.object({
     name: z.string().nonempty("Name is required"),
@@ -42,14 +46,40 @@ const GeneralFormSchema = z.object({
 
 type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
 
+const RolesFormSchema = z.object({
+    roles: z.array(
+        z.object({
+            id: z.string(),
+            text: z.string(),
+            isAdmin: z.boolean().optional()
+        })
+    )
+});
+
+type RolesFormValues = z.infer<typeof RolesFormSchema>;
+
 export default function GeneralPage() {
     const t = useTranslations();
     const { client, updateClient } = useClientContext();
-    const api = createApiClient(useEnvContext());
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
     const [loading, setLoading] = useState(false);
     const [isRefreshing, setIsRefreshing] = useState(false);
     const router = useRouter();
     const [, startTransition] = useTransition();
+    const [savingRoles, setSavingRoles] = useState(false);
+    const { isPaidUser } = usePaidStatus();
+    const canAssignRoles = isPaidUser(tierMatrix.fullRbac);
+
+    const rolesForm = useForm({
+        resolver: zodResolver(RolesFormSchema),
+        defaultValues: {
+            roles: (client?.roles ?? []).map((r) => ({
+                id: r.roleId.toString(),
+                text: r.name
+            }))
+        }
+    });
 
     const form = useForm({
         resolver: zodResolver(GeneralFormSchema),
@@ -113,6 +143,41 @@ export default function GeneralPage() {
         }
     }
 
+    async function onSubmitRoles(data: RolesFormValues) {
+        if (!client?.clientId) return;
+        setSavingRoles(true);
+
+        try {
+            const roleIds = data.roles.map((r) => parseInt(r.id, 10));
+            await api.post(`/client/${client.clientId}/roles`, { roleIds });
+
+            updateClient({
+                roles: data.roles.map((r) => ({
+                    roleId: parseInt(r.id, 10),
+                    name: r.text
+                }))
+            });
+
+            toast({
+                title: t("machineClientRolesUpdated"),
+                description: t("machineClientRolesUpdatedDescription")
+            });
+
+            router.refresh();
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: t("machineClientRolesUpdateFailed"),
+                description: formatAxiosError(
+                    e,
+                    t("machineClientRolesUpdateError")
+                )
+            });
+        } finally {
+            setSavingRoles(false);
+        }
+    }
+
     const handleUnblock = async () => {
         if (!client?.clientId) return;
         setIsRefreshing(true);
@@ -230,6 +295,56 @@ export default function GeneralPage() {
                     </Button>
                 </SettingsSectionFooter>
             </SettingsSection>
+
+            {!env.flags.disableEnterpriseFeatures && (
+                <SettingsSection>
+                    <SettingsSectionHeader>
+                        <SettingsSectionTitle>
+                            {t("roles")}
+                        </SettingsSectionTitle>
+                        <SettingsSectionDescription>
+                            {t("machineClientRolesDescription")}
+                        </SettingsSectionDescription>
+                    </SettingsSectionHeader>
+
+                    <SettingsSectionBody>
+                        <PaidFeaturesAlert tiers={tierMatrix.fullRbac} />
+
+                        <SettingsSectionForm>
+                            <Form {...rolesForm}>
+                                <form
+                                    onSubmit={rolesForm.handleSubmit(
+                                        onSubmitRoles
+                                    )}
+                                    className="space-y-4"
+                                    id="roles-settings-form"
+                                >
+                                    <OrgRolesTagField
+                                        form={rolesForm}
+                                        name="roles"
+                                        orgId={client.orgId}
+                                        supportsMultipleRolesPerUser={true}
+                                        showMultiRolePaywallMessage={false}
+                                        paywallMessage=""
+                                        disabled={!canAssignRoles}
+                                    />
+                                </form>
+                            </Form>
+                        </SettingsSectionForm>
+                    </SettingsSectionBody>
+
+                    <SettingsSectionFooter>
+                        <Button
+                            type="submit"
+                            form="roles-settings-form"
+                            loading={savingRoles}
+                            disabled={savingRoles || !canAssignRoles}
+                        >
+                            {t("saveSettings")}
+                        </Button>
+                    </SettingsSectionFooter>
+                </SettingsSection>
+            )}
         </SettingsContainer>
     );
 }

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

@@ -5,6 +5,7 @@ import MachineClientsBanner from "@app/components/MachineClientsBanner";
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { ListClientsResponse } from "@server/routers/client";
+import type { ListRolesResponse } from "@server/routers/role/listRoles";
 import { AxiosResponse } from "axios";
 import { getTranslations } from "next-intl/server";
 import type { Pagination } from "@server/types/Pagination";
@@ -34,17 +35,37 @@ export default async function ClientsPage(props: ClientsPageProps) {
         pageSize: 20
     };
 
-    try {
-        const machineRes = await internal.get<
-            AxiosResponse<ListClientsResponse>
-        >(
-            `/org/${params.orgId}/clients?${searchParams.toString()}`,
-            await authCookieHeader()
-        );
+    const cookieHeader = await authCookieHeader();
+
+    const [machineRes, rolesRes] = await Promise.all([
+        internal
+            .get<AxiosResponse<ListClientsResponse>>(
+                `/org/${params.orgId}/clients?${searchParams.toString()}`,
+                cookieHeader
+            )
+            .catch(() => {}),
+        internal
+            .get<AxiosResponse<ListRolesResponse>>(
+                `/org/${params.orgId}/roles?pageSize=500&page=1`,
+                cookieHeader
+            )
+            .catch(() => {})
+    ]);
+
+    if (machineRes && machineRes.status === 200) {
         const responseData = machineRes.data.data;
         machineClients = responseData.clients;
         pagination = responseData.pagination;
-    } catch (e) {}
+    }
+
+    const orgRoles =
+        rolesRes && rolesRes.status === 200
+            ? (rolesRes.data.data.roles ?? [])
+            : [];
+    const roleFilterOptions = orgRoles.map((r) => ({
+        value: String(r.roleId),
+        label: r.name
+    }));
 
     function formatSize(mb: number): string {
         if (mb >= 1024 * 1024) {
@@ -77,7 +98,8 @@ export default async function ClientsPage(props: ClientsPageProps) {
             archived: client.archived || false,
             blocked: client.blocked || false,
             approvalState: client.approvalState ?? "approved",
-            labels: client.labels ?? []
+            labels: client.labels ?? [],
+            roleLabels: (client.roles ?? []).map((r) => r.name)
         };
     };
 
@@ -96,6 +118,7 @@ export default async function ClientsPage(props: ClientsPageProps) {
                 machineClients={machineClientRows}
                 orgId={params.orgId}
                 rowCount={pagination.total}
+                roleFilterOptions={roleFilterOptions}
                 pagination={{
                     pageIndex: pagination.page - 1,
                     pageSize: pagination.pageSize

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

@@ -0,0 +1,106 @@
+"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 { createGatewayFormSchema } 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 "@app/components/PrivateResourceSitesField";
+import { useSaveSiteResource } from "@app/hooks/useSaveSiteResource";
+import { buildSelectedSitesForResource } from "@app/lib/privateResourceUtils";
+
+export default function PrivateResourceGatewayPage() {
+    const t = useTranslations();
+    const { save, siteResource } = useSaveSiteResource();
+    const [selectedSites, setSelectedSites] = useState(() =>
+        buildSelectedSitesForResource(siteResource)
+    );
+
+    const formSchema = useMemo(() => createGatewayFormSchema(t), [t]);
+    type FormValues = z.infer<typeof formSchema>;
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            siteIds: siteResource.siteIds,
+            mode: "gateway"
+        }
+    });
+
+    const [, formAction, saveLoading] = useActionState(async () => {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const data = form.getValues();
+        await save({
+            siteIds: data.siteIds,
+            mode: "gateway"
+        });
+    }, null);
+
+    return (
+        <SettingsContainer>
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("gatewaySettings")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t(
+                            "editInternalResourceDialogDestinationGatewayDescription"
+                        )}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+
+                <SettingsSectionBody>
+                    <SettingsSectionForm variant="half">
+                        <Form {...form}>
+                            <form
+                                action={formAction}
+                                id="private-resource-gateway-form"
+                            >
+                                <SettingsFormGrid>
+                                    <SettingsFormCell span="half">
+                                        <PrivateResourceSitesField
+                                            control={form.control}
+                                            orgId={siteResource.orgId}
+                                            selectedSites={selectedSites}
+                                            onSelectedSitesChange={
+                                                setSelectedSites
+                                            }
+                                        />
+                                    </SettingsFormCell>
+                                </SettingsFormGrid>
+                            </form>
+                        </Form>
+                    </SettingsSectionForm>
+                </SettingsSectionBody>
+
+                <SettingsSectionFooter>
+                    <Button
+                        type="submit"
+                        form="private-resource-gateway-form"
+                        loading={saveLoading}
+                    >
+                        {t("saveSettings")}
+                    </Button>
+                </SettingsSectionFooter>
+            </SettingsSection>
+        </SettingsContainer>
+    );
+}

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

@@ -53,7 +53,8 @@ export default async function PrivateResourceLayout(
         | "cidrSettings"
         | "httpSettings"
         | "sshSettings"
-        | "inferenceSettings";
+        | "inferenceSettings"
+        | "gatewaySettings";
 
     const navItems = [
         {

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

@@ -24,7 +24,7 @@ import { useActionState, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { PrivateResourceSshFields } from "@app/components/PrivateResourceSshFields";
-import type { Selectedsite } from "@app/components/site-selector";
+import type { SelectedSite } from "@app/components/site-selector";
 import { useSaveSiteResource } from "@app/hooks/useSaveSiteResource";
 import {
     asAnyControl,
@@ -84,7 +84,7 @@ export default function PrivateResourceSshPage() {
         setSelectedSites(first);
         form.setValue(
             "siteIds",
-            first.map((s: Selectedsite) => s.siteId),
+            first.map((s: SelectedSite) => s.siteId),
             { shouldValidate: true }
         );
     }

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

@@ -27,7 +27,7 @@ import {
     FormMessage
 } from "@app/components/ui/form";
 import { Input } from "@app/components/ui/input";
-import type { Selectedsite } from "@app/components/site-selector";
+import type { SelectedSite } from "@app/components/site-selector";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
@@ -37,7 +37,6 @@ import {
     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";
@@ -83,7 +82,7 @@ export default function CreatePrivateResourcePage() {
             ? Number(siteIdParam)
             : null;
 
-    const [selectedSites, setSelectedSites] = useState<Selectedsite[]>([]);
+    const [selectedSites, setSelectedSites] = useState<SelectedSite[]>([]);
     const [selectedProviders, setSelectedProviders] = useState<
         SelectedAiProvider[]
     >([]);
@@ -124,10 +123,10 @@ export default function CreatePrivateResourcePage() {
             .then((res) => {
                 const site = res.data.data;
                 if (!site || site.orgId !== orgId) return;
-                const selected: Selectedsite = {
+                const selected: SelectedSite = {
                     siteId: site.siteId,
                     name: site.name,
-                    type: site.type as Selectedsite["type"]
+                    type: site.type as SelectedSite["type"]
                 };
                 setSelectedSites([selected]);
                 form.setValue("siteIds", [site.siteId]);
@@ -164,6 +163,11 @@ export default function CreatePrivateResourcePage() {
             value: "inference" as const,
             title: t("createInternalResourceDialogModeInference"),
             description: t("resourceTypeInferenceDescription")
+        },
+        {
+            value: "gateway" as const,
+            title: t("createInternalResourceDialogModeGateway"),
+            description: t("resourceTypeGatewayDescription")
         }
     ];
 
@@ -345,6 +349,7 @@ export default function CreatePrivateResourcePage() {
                                                             placeholder={t(
                                                                 "noneSelected"
                                                             )}
+                                                            listClassName="max-h-[346px]"
                                                         />
                                                     </FormControl>
                                                     <FormMessage />
@@ -560,6 +565,38 @@ export default function CreatePrivateResourcePage() {
                         </SettingsSection>
                     )}
 
+                    {/* Gateway destination */}
+                    {mode === "gateway" && (
+                        <SettingsSection>
+                            <SettingsSectionHeader>
+                                <SettingsSectionTitle>
+                                    {t("gatewaySettings")}
+                                </SettingsSectionTitle>
+                                <SettingsSectionDescription>
+                                    {t(
+                                        "editInternalResourceDialogDestinationGatewayDescription"
+                                    )}
+                                </SettingsSectionDescription>
+                            </SettingsSectionHeader>
+                            <SettingsSectionBody>
+                                <SettingsSectionForm variant="half">
+                                    <SettingsFormGrid>
+                                        <SettingsFormCell span="half">
+                                            <PrivateResourceSitesField
+                                                control={form.control}
+                                                orgId={orgId}
+                                                selectedSites={selectedSites}
+                                                onSelectedSitesChange={
+                                                    setSelectedSites
+                                                }
+                                            />
+                                        </SettingsFormCell>
+                                    </SettingsFormGrid>
+                                </SettingsSectionForm>
+                            </SettingsSectionBody>
+                        </SettingsSection>
+                    )}
+
                     {/* HTTP configuration */}
                     {mode === "http" && (
                         <SettingsSection>

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

@@ -2,6 +2,13 @@
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "@app/components/ui/select";
 import { HeadersInput } from "@app/components/HeadersInput";
 import {
     SettingsContainer,
@@ -45,6 +52,8 @@ import { useActionState, useState, startTransition } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
+const LOAD_BALANCING_STRATEGIES = ["wrr", "p2c", "hrw", "leasttime"] as const;
+
 export default function ReverseProxyTargetsPage() {
     const params = useParams();
     const { resource, updateResource } = useResourceContext();
@@ -90,6 +99,7 @@ function ProxyResourceHttpForm({
 
     const httpSettingsSchema = z.object({
         stickySession: z.boolean(),
+        loadBalancingStrategy: z.enum(LOAD_BALANCING_STRATEGIES),
         ssl: z.boolean(),
         tlsServerName: z
             .string()
@@ -131,6 +141,7 @@ function ProxyResourceHttpForm({
         resolver: zodResolver(httpSettingsSchema),
         defaultValues: {
             stickySession: resource.stickySession,
+            loadBalancingStrategy: resource.loadBalancingStrategy,
             ssl: resource.ssl,
             tlsServerName: resource.tlsServerName || "",
             setHostHeader: resource.setHostHeader || "",
@@ -164,6 +175,7 @@ function ProxyResourceHttpForm({
                 `/resource/${resource.resourceId}`,
                 {
                     stickySession: data.stickySession,
+                    loadBalancingStrategy: data.loadBalancingStrategy,
                     ssl: data.ssl,
                     tlsServerName: data.tlsServerName || null,
                     setHostHeader: data.setHostHeader || null,
@@ -186,6 +198,7 @@ function ProxyResourceHttpForm({
             updateResource({
                 ...resource,
                 stickySession: data.stickySession,
+                loadBalancingStrategy: data.loadBalancingStrategy,
                 ssl: data.ssl,
                 tlsServerName: data.tlsServerName || null,
                 setHostHeader: data.setHostHeader || null,
@@ -305,6 +318,58 @@ function ProxyResourceHttpForm({
                                     />
                                 </SettingsFormCell>
 
+                                <SettingsFormCell span="half">
+                                    <FormField
+                                        control={form.control}
+                                        name="loadBalancingStrategy"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t(
+                                                        "loadBalancingStrategy"
+                                                    )}
+                                                </FormLabel>
+                                                <Select
+                                                    value={field.value}
+                                                    onValueChange={
+                                                        field.onChange
+                                                    }
+                                                >
+                                                    <FormControl>
+                                                        <SelectTrigger>
+                                                            <SelectValue />
+                                                        </SelectTrigger>
+                                                    </FormControl>
+                                                    <SelectContent>
+                                                        {LOAD_BALANCING_STRATEGIES.map(
+                                                            (strategy) => (
+                                                                <SelectItem
+                                                                    key={
+                                                                        strategy
+                                                                    }
+                                                                    value={
+                                                                        strategy
+                                                                    }
+                                                                >
+                                                                    {t(
+                                                                        `loadBalancingStrategy_${strategy}`
+                                                                    )}
+                                                                </SelectItem>
+                                                            )
+                                                        )}
+                                                    </SelectContent>
+                                                </Select>
+                                                <FormDescription>
+                                                    {t(
+                                                        `loadBalancingStrategy_${field.value}_description`
+                                                    )}
+                                                </FormDescription>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </SettingsFormCell>
+
                                 <SettingsFormCell span="half">
                                     <FormField
                                         control={form.control}

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

@@ -111,6 +111,13 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
                 href: `/{orgId}/settings/resources/public/{niceId}/maintenance`
             });
         }
+
+        if (!env.flags.disableEnterpriseFeatures && resource.mode === "http") {
+            navItems.push({
+                title: t("mtls"),
+                href: `/{orgId}/settings/resources/public/{niceId}/mtls`
+            });
+        }
     }
 
     if (resource.mode === "inference") {

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

@@ -0,0 +1,490 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { SwitchInput } from "@app/components/SwitchInput";
+import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
+import { Badge } from "@app/components/ui/badge";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+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 { resourceQueries } from "@app/lib/queries";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import type {
+    CreateResourceMtlsCertificateResponse,
+    DeleteResourceMtlsCertificateResponse,
+    UpdateResourceResponse
+} from "@server/routers/resource";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { AxiosResponse } from "axios";
+import { AlertCircle, FileKey2, Info, ShieldCheck, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+const EXPIRES_SOON_MS = 30 * DAY_MS;
+
+export default function ResourceMtlsPage() {
+    const params = useParams();
+    const router = useRouter();
+    const { env } = useEnvContext();
+    const { resource, updateResource } = useResourceContext();
+    const t = useTranslations();
+    const api = createApiClient({ env });
+    const queryClient = useQueryClient();
+    const { isPaidUser } = usePaidStatus();
+
+    const supportsMtls = resource.mode === "http";
+    const isMtlsDisabled = !isPaidUser(tierMatrix.mtls);
+
+    useEffect(() => {
+        if (env.flags.disableEnterpriseFeatures || !supportsMtls) {
+            router.replace(
+                `/${params.orgId}/settings/resources/public/${resource.niceId}/general`
+            );
+        }
+    }, [
+        env.flags.disableEnterpriseFeatures,
+        params.orgId,
+        resource.niceId,
+        router,
+        supportsMtls
+    ]);
+
+    const { data: certificates = [], isLoading: isLoadingCertificates } =
+        useQuery(
+            resourceQueries.resourceMtlsCertificates({
+                resourceId: resource.resourceId
+            })
+        );
+
+    const [name, setName] = useState("");
+    const [pem, setPem] = useState("");
+    const [adding, setAdding] = useState(false);
+    const [removingId, setRemovingId] = useState<number | null>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const [mtlsEnabled, setMtlsEnabled] = useState(resource.mtlsEnabled);
+    const [saving, setSaving] = useState(false);
+
+    // The server switches mTLS off when the last CA is removed.
+    useEffect(() => {
+        setMtlsEnabled(resource.mtlsEnabled);
+    }, [resource.mtlsEnabled]);
+
+    if (env.flags.disableEnterpriseFeatures || !supportsMtls) {
+        return null;
+    }
+
+    const hasCertificates = certificates.length > 0;
+    const canEnable = hasCertificates && resource.ssl;
+
+    async function invalidateCertificates() {
+        await queryClient.invalidateQueries(
+            resourceQueries.resourceMtlsCertificates({
+                resourceId: resource.resourceId
+            })
+        );
+    }
+
+    async function onFileSelected(e: React.ChangeEvent<HTMLInputElement>) {
+        const file = e.target.files?.[0];
+        e.target.value = "";
+        if (!file) return;
+        const text = await file.text();
+        setPem((prev) => (prev.trim() ? `${prev.trim()}\n${text}` : text));
+        if (!name && certificates.length === 0) {
+            setName(file.name.replace(/\.(pem|crt|cer|ca-bundle)$/i, ""));
+        }
+    }
+
+    async function onAddCertificate() {
+        if (!pem.trim()) return;
+        setAdding(true);
+        try {
+            await api.put<AxiosResponse<CreateResourceMtlsCertificateResponse>>(
+                `/resource/${resource.resourceId}/mtls/certificate`,
+                {
+                    certificate: pem,
+                    ...(name.trim() ? { name: name.trim() } : {})
+                }
+            );
+            setPem("");
+            setName("");
+            await invalidateCertificates();
+            toast({
+                title: t("mtlsCertificateAdded"),
+                description: t("mtlsCertificateAddedDescription")
+            });
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: t("mtlsCertificateErrorAdd"),
+                description: formatAxiosError(
+                    e,
+                    t("mtlsCertificateErrorAddDescription")
+                )
+            });
+        } finally {
+            setAdding(false);
+        }
+    }
+
+    async function onRemoveCertificate(mtlsCertificateId: number) {
+        setRemovingId(mtlsCertificateId);
+        try {
+            const res = await api.delete<
+                AxiosResponse<DeleteResourceMtlsCertificateResponse>
+            >(
+                `/resource/${resource.resourceId}/mtls/certificate/${mtlsCertificateId}`
+            );
+            await invalidateCertificates();
+
+            if (res.data.data.mtlsDisabled) {
+                updateResource({ mtlsEnabled: false });
+                toast({
+                    title: t("mtlsCertificateRemoved"),
+                    description: t("mtlsLastCertificateRemoved")
+                });
+            } else {
+                toast({ title: t("mtlsCertificateRemoved") });
+            }
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: t("mtlsCertificateErrorRemove"),
+                description: formatAxiosError(
+                    e,
+                    t("mtlsCertificateErrorRemoveDescription")
+                )
+            });
+        } finally {
+            setRemovingId(null);
+        }
+    }
+
+    async function onSaveEnforcement() {
+        setSaving(true);
+        try {
+            await api.post<AxiosResponse<UpdateResourceResponse>>(
+                `/resource/${resource.resourceId}`,
+                { mtlsEnabled }
+            );
+            updateResource({ mtlsEnabled });
+            toast({
+                title: t("resourceUpdated"),
+                description: t("resourceUpdatedDescription")
+            });
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: t("resourceErrorUpdate"),
+                description: formatAxiosError(
+                    e,
+                    t("resourceErrorUpdateDescription")
+                )
+            });
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <>
+            <PaidFeaturesAlert tiers={tierMatrix.mtls} />
+            <div
+                className={
+                    isMtlsDisabled
+                        ? "pointer-events-none opacity-50"
+                        : undefined
+                }
+            >
+                <SettingsContainer>
+                    <SettingsSection>
+                        <SettingsSectionHeader>
+                            <SettingsSectionTitle>
+                                {t("mtlsCaCertificates")}
+                            </SettingsSectionTitle>
+                            <SettingsSectionDescription>
+                                {t("mtlsCaCertificatesDescription")}
+                            </SettingsSectionDescription>
+                        </SettingsSectionHeader>
+
+                        <SettingsSectionBody>
+                            <div className="space-y-6">
+                                {isLoadingCertificates ? null : hasCertificates ? (
+                                    <ul className="divide-y rounded-lg border">
+                                        {certificates.map((cert) => {
+                                            const now = Date.now();
+                                            const expired =
+                                                cert.notAfter != null &&
+                                                cert.notAfter < now;
+                                            const expiresSoon =
+                                                !expired &&
+                                                cert.notAfter != null &&
+                                                cert.notAfter - now <
+                                                    EXPIRES_SOON_MS;
+                                            return (
+                                                <li
+                                                    key={cert.mtlsCertificateId}
+                                                    className="flex items-start justify-between gap-4 p-4"
+                                                >
+                                                    <div className="flex min-w-0 items-start gap-3">
+                                                        <FileKey2 className="mt-0.5 h-5 w-5 shrink-0 text-muted-foreground" />
+                                                        <div className="min-w-0 space-y-1">
+                                                            <div className="flex flex-wrap items-center gap-2">
+                                                                <span className="truncate font-medium">
+                                                                    {cert.name ||
+                                                                        cert.subject ||
+                                                                        t(
+                                                                            "mtlsCaCertificates"
+                                                                        )}
+                                                                </span>
+                                                                {expired && (
+                                                                    <Badge variant="red">
+                                                                        {t(
+                                                                            "mtlsExpired"
+                                                                        )}
+                                                                    </Badge>
+                                                                )}
+                                                                {expiresSoon && (
+                                                                    <Badge variant="yellow">
+                                                                        {t(
+                                                                            "mtlsExpiresSoon"
+                                                                        )}
+                                                                    </Badge>
+                                                                )}
+                                                            </div>
+                                                            {cert.name &&
+                                                                cert.subject && (
+                                                                    <p className="truncate text-sm text-muted-foreground">
+                                                                        {
+                                                                            cert.subject
+                                                                        }
+                                                                    </p>
+                                                                )}
+                                                            {cert.issuer && (
+                                                                <p className="truncate text-sm text-muted-foreground">
+                                                                    {t(
+                                                                        "mtlsIssuedBy",
+                                                                        {
+                                                                            issuer: cert.issuer
+                                                                        }
+                                                                    )}
+                                                                </p>
+                                                            )}
+                                                            {cert.notAfter !=
+                                                                null && (
+                                                                <p className="text-sm text-muted-foreground">
+                                                                    {t(
+                                                                        "mtlsExpiresOn",
+                                                                        {
+                                                                            date: new Date(
+                                                                                cert.notAfter
+                                                                            ).toLocaleDateString()
+                                                                        }
+                                                                    )}
+                                                                </p>
+                                                            )}
+                                                            {cert.fingerprint && (
+                                                                <p
+                                                                    className="truncate font-mono text-xs text-muted-foreground"
+                                                                    title={`${t("mtlsFingerprint")}: ${cert.fingerprint}`}
+                                                                >
+                                                                    {
+                                                                        cert.fingerprint
+                                                                    }
+                                                                </p>
+                                                            )}
+                                                        </div>
+                                                    </div>
+                                                    <Button
+                                                        type="button"
+                                                        variant="outline"
+                                                        size="icon"
+                                                        aria-label={t(
+                                                            "mtlsRemoveCertificate"
+                                                        )}
+                                                        title={t(
+                                                            "mtlsRemoveCertificate"
+                                                        )}
+                                                        loading={
+                                                            removingId ===
+                                                            cert.mtlsCertificateId
+                                                        }
+                                                        disabled={
+                                                            removingId !== null
+                                                        }
+                                                        onClick={() =>
+                                                            onRemoveCertificate(
+                                                                cert.mtlsCertificateId
+                                                            )
+                                                        }
+                                                    >
+                                                        <Trash2 className="h-4 w-4" />
+                                                    </Button>
+                                                </li>
+                                            );
+                                        })}
+                                    </ul>
+                                ) : (
+                                    <p className="text-sm text-muted-foreground">
+                                        {t("mtlsNoCertificates")}
+                                    </p>
+                                )}
+
+                                <div className="space-y-4">
+                                    <div className="space-y-2">
+                                        <Label htmlFor="mtls-cert-name">
+                                            {t("mtlsCertificateName")}
+                                        </Label>
+                                        <Input
+                                            id="mtls-cert-name"
+                                            value={name}
+                                            maxLength={255}
+                                            placeholder={t(
+                                                "mtlsCertificateNamePlaceholder"
+                                            )}
+                                            onChange={(e) =>
+                                                setName(e.target.value)
+                                            }
+                                        />
+                                    </div>
+                                    <div className="space-y-2">
+                                        <Label htmlFor="mtls-cert-pem">
+                                            {t("mtlsCertificatePem")}
+                                        </Label>
+                                        <Textarea
+                                            id="mtls-cert-pem"
+                                            value={pem}
+                                            rows={8}
+                                            spellCheck={false}
+                                            className="font-mono text-xs"
+                                            placeholder={
+                                                "-----BEGIN CERTIFICATE-----\n...\n-----END CERTIFICATE-----"
+                                            }
+                                            onChange={(e) =>
+                                                setPem(e.target.value)
+                                            }
+                                        />
+                                        <p className="text-sm text-muted-foreground">
+                                            {t("mtlsCertificatePemDescription")}
+                                        </p>
+                                    </div>
+                                    <div className="flex flex-wrap gap-2">
+                                        <input
+                                            ref={fileInputRef}
+                                            type="file"
+                                            accept=".pem,.crt,.cer,.ca-bundle"
+                                            className="hidden"
+                                            onChange={onFileSelected}
+                                        />
+                                        <Button
+                                            type="button"
+                                            variant="outline"
+                                            onClick={() =>
+                                                fileInputRef.current?.click()
+                                            }
+                                        >
+                                            {t("mtlsUploadFile")}
+                                        </Button>
+                                        <Button
+                                            type="button"
+                                            loading={adding}
+                                            disabled={adding || !pem.trim()}
+                                            onClick={onAddCertificate}
+                                        >
+                                            {t("mtlsAddCertificate")}
+                                        </Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </SettingsSectionBody>
+                    </SettingsSection>
+
+                    <SettingsSection>
+                        <SettingsSectionHeader>
+                            <SettingsSectionTitle>
+                                {t("mtlsEnforcement")}
+                            </SettingsSectionTitle>
+                            <SettingsSectionDescription>
+                                {t("mtlsEnforcementDescription")}
+                            </SettingsSectionDescription>
+                        </SettingsSectionHeader>
+
+                        <SettingsSectionBody>
+                            <div className="space-y-4">
+                                {!resource.ssl && (
+                                    <Alert variant="warning">
+                                        <AlertCircle className="h-4 w-4" />
+                                        <AlertDescription>
+                                            {t("mtlsRequiresSsl")}
+                                        </AlertDescription>
+                                    </Alert>
+                                )}
+                                {resource.ssl && !hasCertificates && (
+                                    <Alert variant="neutral">
+                                        <Info className="h-4 w-4" />
+                                        <AlertDescription>
+                                            {t("mtlsRequiresCertificate")}
+                                        </AlertDescription>
+                                    </Alert>
+                                )}
+
+                                <SwitchInput
+                                    id="enable-mtls"
+                                    checked={mtlsEnabled && canEnable}
+                                    disabled={!canEnable}
+                                    label={t("enableMtls")}
+                                    description={t("enableMtlsDescription")}
+                                    onCheckedChange={setMtlsEnabled}
+                                />
+
+                                <Alert variant="info">
+                                    <ShieldCheck className="h-4 w-4" />
+                                    <AlertTitle>
+                                        {t("mtlsForwardedHeadersTitle")}
+                                    </AlertTitle>
+                                    <AlertDescription>
+                                        {t("mtlsForwardedHeadersDescription")}{" "}
+                                        {t("mtlsHandshakeNote")}
+                                    </AlertDescription>
+                                </Alert>
+                            </div>
+                        </SettingsSectionBody>
+
+                        <SettingsSectionFooter>
+                            <Button
+                                type="button"
+                                loading={saving}
+                                disabled={
+                                    saving ||
+                                    (mtlsEnabled && canEnable) ===
+                                        resource.mtlsEnabled
+                                }
+                                onClick={onSaveEnforcement}
+                            >
+                                {t("saveSettings")}
+                            </Button>
+                        </SettingsSectionFooter>
+                    </SettingsSection>
+                </SettingsContainer>
+            </div>
+        </>
+    );
+}

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

@@ -28,7 +28,7 @@ import {
 import { BrowserGatewayTargetForm } from "@app/components/BrowserGatewayTargetForm";
 import {
     SitesSelector,
-    type Selectedsite
+    type SelectedSite
 } from "@app/components/site-selector";
 import { Button } from "@app/components/ui/button";
 import {
@@ -253,7 +253,7 @@ export default function Page() {
         "site" | "remote"
     >("site");
     const [nativeSelectedSite, setNativeSelectedSite] =
-        useState<Selectedsite | null>(null);
+        useState<SelectedSite | null>(null);
     const [nativeSiteOpen, setNativeSiteOpen] = useState(false);
 
     useEffect(() => {
@@ -1226,6 +1226,7 @@ export default function Page() {
                                                                 </PopoverTrigger>
                                                                 <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
                                                                     <SitesSelector
+                                                                        filterTypes={["newt"]}
                                                                         orgId={
                                                                             orgId as string
                                                                         }

src/app/auth/signup/page.tsx

@@ -44,7 +44,7 @@ export default async function Page(props: {
     let inviteToken;
     if (searchParams.redirect && isInvite) {
         const parts = searchParams.redirect.split("token=");
-        if (parts.length) {
+        if (parts.length > 1) {
             const token = parts[1];
             const tokenParts = token.split("-");
             if (tokenParts.length === 2) {

src/components/BrowserGatewayTargetForm.tsx

@@ -10,7 +10,7 @@ import {
     MultiSitesSelector,
     formatMultiSitesSelectorLabel
 } from "./multi-site-selector";
-import { SitesSelector, type Selectedsite } from "./site-selector";
+import { SitesSelector, type SelectedSite } from "./site-selector";
 import { Button } from "./ui/button";
 import {
     FormControl,
@@ -42,8 +42,7 @@ type SingleSiteFormProps<T extends FieldValues> = BaseProps<T> & {
 };
 
 export type BrowserGatewayTargetFormProps<T extends FieldValues = FieldValues> =
-    | MultiSiteFormProps<T>
-    | SingleSiteFormProps<T>;
+    MultiSiteFormProps<T> | SingleSiteFormProps<T>;
 
 export function BrowserGatewayTargetForm<T extends FieldValues>(
     props: BrowserGatewayTargetFormProps<T>
@@ -90,7 +89,7 @@ export function BrowserGatewayTargetForm<T extends FieldValues>(
 
     const showMultiSiteDisclaimer =
         props.multiSite === true &&
-        ((watchedSites as Selectedsite[] | undefined)?.length ?? 0) > 1;
+        ((watchedSites as SelectedSite[] | undefined)?.length ?? 0) > 1;
 
     return (
         <div className="space-y-2">
@@ -112,7 +111,7 @@ export function BrowserGatewayTargetForm<T extends FieldValues>(
                                                 "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
                                                 props.multiSite === true
                                                     ? (
-                                                          field.value as Selectedsite[]
+                                                          field.value as SelectedSite[]
                                                       )?.length === 0 &&
                                                           "text-muted-foreground"
                                                     : !field.value &&
@@ -122,12 +121,12 @@ export function BrowserGatewayTargetForm<T extends FieldValues>(
                                             <span className="truncate">
                                                 {props.multiSite === true
                                                     ? formatMultiSitesSelectorLabel(
-                                                          (field.value as Selectedsite[]) ??
+                                                          (field.value as SelectedSite[]) ??
                                                               [],
                                                           t
                                                       )
                                                     : ((
-                                                          field.value as Selectedsite | null
+                                                          field.value as SelectedSite | null
                                                       )?.name ??
                                                       t("siteSelect"))}
                                             </span>
@@ -140,7 +139,7 @@ export function BrowserGatewayTargetForm<T extends FieldValues>(
                                         <MultiSitesSelector
                                             orgId={props.orgId}
                                             selectedSites={
-                                                (field.value as Selectedsite[]) ??
+                                                (field.value as SelectedSite[]) ??
                                                 []
                                             }
                                             onSelectionChange={field.onChange}
@@ -150,7 +149,7 @@ export function BrowserGatewayTargetForm<T extends FieldValues>(
                                         <SitesSelector
                                             orgId={props.orgId}
                                             selectedSite={
-                                                field.value as Selectedsite | null
+                                                field.value as SelectedSite | null
                                             }
                                             onSelectSite={(site) => {
                                                 field.onChange(site);
@@ -179,8 +178,7 @@ export function BrowserGatewayTargetForm<T extends FieldValues>(
                                     onChange={field.onChange}
                                     value={
                                         (watchedDestination as
-                                            | string
-                                            | undefined) ?? ""
+                                            string | undefined) ?? ""
                                     }
                                 />
                             </FormControl>
@@ -205,9 +203,7 @@ export function BrowserGatewayTargetForm<T extends FieldValues>(
                                     onChange={field.onChange}
                                     value={
                                         (watchedDestinationPort as
-                                            | string
-                                            | number
-                                            | undefined) ?? ""
+                                            string | number | undefined) ?? ""
                                     }
                                 />
                             </FormControl>

src/components/DescribedSelect.tsx

@@ -33,6 +33,7 @@ type DescribedSelectProps<TValue extends string> = {
     placeholder?: string;
     disabled?: boolean;
     className?: string;
+    listClassName?: string;
 };
 
 export function DescribedSelect<TValue extends string>({
@@ -43,7 +44,8 @@ export function DescribedSelect<TValue extends string>({
     emptyMessage,
     placeholder,
     disabled,
-    className
+    className,
+    listClassName
 }: DescribedSelectProps<TValue>) {
     const [open, setOpen] = useState(false);
     const selected = options.find((option) => option.value === value);
@@ -75,7 +77,7 @@ export function DescribedSelect<TValue extends string>({
                 >
                     <Command>
                         <CommandInput placeholder={searchPlaceholder} />
-                        <CommandList>
+                        <CommandList className={listClassName}>
                             <CommandEmpty>{emptyMessage}</CommandEmpty>
                             <CommandGroup>
                                 {options.map((option) => (

src/components/DeviceAuthConfirmation.tsx

@@ -25,6 +25,7 @@ type DeviceAuthMetadata = {
 
 type DeviceAuthConfirmationProps = {
     metadata: DeviceAuthMetadata;
+    code: string;
     onConfirm: () => void;
     onCancel: () => void;
     loading: boolean;
@@ -32,6 +33,7 @@ type DeviceAuthConfirmationProps = {
 
 export function DeviceAuthConfirmation({
     metadata,
+    code,
     onConfirm,
     onCancel,
     loading
@@ -87,9 +89,18 @@ export function DeviceAuthConfirmation({
                 </Alert>
 
                 <div className="space-y-3">
+                    <div className="flex flex-col items-center gap-1 p-3 border rounded-md text-center">
+                        <p className="text-sm text-muted-foreground">
+                            {t("deviceCodeConfirmPrompt")}
+                        </p>
+                        <p className="text-2xl font-mono font-semibold tracking-widest">
+                            {code}
+                        </p>
+                    </div>
+
                     <div className="flex items-start gap-3 p-3 border rounded-md">
-                        <Monitor className="h-5 w-5 mt-0.5" />
-                        <div className="flex-1">
+                        <Monitor className="h-5 w-5 shrink-0 mt-0.5" />
+                        <div className="flex-1 min-w-0">
                             <p className="text-sm font-medium">
                                 {metadata.applicationName}
                             </p>
@@ -112,11 +123,11 @@ export function DeviceAuthConfirmation({
                         </p>
                         <div className="space-y-1 pl-4">
                             <div className="flex items-center gap-2 text-sm">
-                                <CheckCircle2 className="h-4 w-4 text-green-500" />
+                                <CheckCircle2 className="h-4 w-4 shrink-0 text-green-500" />
                                 <span>{t("deviceFullAccess")}</span>
                             </div>
                             <div className="flex items-center gap-2 text-sm">
-                                <CheckCircle2 className="h-4 w-4 text-green-500" />
+                                <CheckCircle2 className="h-4 w-4 shrink-0 text-green-500" />
                                 <span>{t("deviceOrganizationsAccess")}</span>
                             </div>
                         </div>

src/components/DeviceLoginForm.tsx

@@ -268,6 +268,7 @@ export default function DeviceLoginForm({
         return (
             <DeviceAuthConfirmation
                 metadata={metadata}
+                code={code}
                 onConfirm={onConfirm}
                 onCancel={onCancel}
                 loading={loading}
@@ -319,7 +320,9 @@ export default function DeviceLoginForm({
                                         <div className="flex justify-center">
                                             <InputOTP
                                                 maxLength={8}
-                                                pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
+                                                pattern={
+                                                    REGEXP_ONLY_DIGITS_AND_CHARS
+                                                }
                                                 {...field}
                                                 value={field.value
                                                     .replace(/-/g, "")
@@ -338,7 +341,9 @@ export default function DeviceLoginForm({
                                                             )
                                                             .toUpperCase()
                                                             .slice(0, 8);
-                                                    field.onChange(cleanedValue);
+                                                    field.onChange(
+                                                        cleanedValue
+                                                    );
                                                 }}
                                                 onChange={(value) => {
                                                     // Strip hyphens and convert to uppercase

src/components/ExportBlueprintModal.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Editor from "@monaco-editor/react";
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "@app/components/Credenza";
+import { Button } from "@app/components/ui/button";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { cn } from "@app/lib/cn";
+import { Download, Loader2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+type ExportBlueprintModalProps = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    endpoint: string;
+    resourceName: string;
+};
+
+export default function ExportBlueprintModal({
+    open,
+    setOpen,
+    endpoint,
+    resourceName
+}: ExportBlueprintModalProps) {
+    const t = useTranslations();
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
+
+    const [loading, setLoading] = useState(false);
+    const [contents, setContents] = useState<string | null>(null);
+    const [fileName, setFileName] = useState(resourceName);
+
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+
+        setContents(null);
+        setLoading(true);
+
+        api.get(endpoint)
+            .then((res) => {
+                setContents(res.data.data.contents);
+                setFileName(res.data.data.name || resourceName);
+            })
+            .catch((e) => {
+                toast({
+                    variant: "destructive",
+                    title: t("exportBlueprintError"),
+                    description: formatAxiosError(
+                        e,
+                        t("exportBlueprintError")
+                    )
+                });
+                setOpen(false);
+            })
+            .finally(() => setLoading(false));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, endpoint]);
+
+    function handleDownload() {
+        if (!contents) {
+            return;
+        }
+
+        const blob = new Blob([contents], { type: "application/x-yaml" });
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.setAttribute("download", `${fileName}.yaml`);
+        document.body.appendChild(link);
+        link.click();
+        link.parentNode?.removeChild(link);
+        window.URL.revokeObjectURL(url);
+    }
+
+    return (
+        <Credenza open={open} onOpenChange={setOpen}>
+            <CredenzaContent>
+                <CredenzaHeader>
+                    <CredenzaTitle>{t("exportBlueprintTitle")}</CredenzaTitle>
+                    <CredenzaDescription>
+                        {t("exportBlueprintDescription", {
+                            name: resourceName
+                        })}
+                    </CredenzaDescription>
+                </CredenzaHeader>
+                <CredenzaBody>
+                    <div
+                        className={cn(
+                            "resize-y h-64 min-h-64 overflow-y-auto overflow-x-clip max-w-full rounded-md border"
+                        )}
+                    >
+                        {loading ? (
+                            <div className="flex items-center justify-center w-full h-full">
+                                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                            </div>
+                        ) : (
+                            <Editor
+                                className="w-full h-full max-w-full"
+                                language="yaml"
+                                theme="vs-dark"
+                                value={contents ?? ""}
+                                options={{
+                                    minimap: { enabled: false },
+                                    readOnly: true
+                                }}
+                            />
+                        )}
+                    </div>
+                </CredenzaBody>
+                <CredenzaFooter>
+                    <CredenzaClose asChild>
+                        <Button variant="outline">{t("close")}</Button>
+                    </CredenzaClose>
+                    <Button
+                        onClick={handleDownload}
+                        disabled={!contents || loading}
+                    >
+                        <Download className="mr-2 h-4 w-4" />
+                        {t("download")}
+                    </Button>
+                </CredenzaFooter>
+            </CredenzaContent>
+        </Credenza>
+    );
+}

src/components/HealthCheckCredenza.tsx

@@ -46,7 +46,7 @@ import {
     PopoverTrigger
 } from "@/components/ui/popover";
 import { SitesSelector } from "@app/components/site-selector";
-import type { Selectedsite } from "@app/components/site-selector";
+import type { SelectedSite } from "@app/components/site-selector";
 import { CaretSortIcon } from "@radix-ui/react-icons";
 import { cn } from "@app/lib/cn";
 import { SwitchInput } from "@app/components/SwitchInput";
@@ -144,7 +144,7 @@ export function HealthCheckCredenza(props: HealthCheckCredenzaProps) {
     const t = useTranslations();
     const api = createApiClient(useEnvContext());
     const [loading, setLoading] = useState(false);
-    const [selectedSite, setSelectedSite] = useState<Selectedsite | null>(null);
+    const [selectedSite, setSelectedSite] = useState<SelectedSite | null>(null);
 
     const healthCheckSchema = z
         .object({
@@ -183,11 +183,9 @@ export function HealthCheckCredenza(props: HealthCheckCredenzaProps) {
                     { message: t("healthCheckPortInvalid") }
                 ),
             hcFollowRedirects: z.boolean(),
-            hcHostname: z
-                .string()
-                .refine((val) => !/\s/.test(val), {
-                    message: t("healthCheckHostnameInvalid")
-                }),
+            hcHostname: z.string().refine((val) => !/\s/.test(val), {
+                message: t("healthCheckHostnameInvalid")
+            }),
             hcMode: z.string(),
             hcUnhealthyInterval: z.int().positive().min(5),
             hcTlsServerName: z.string(),

src/components/HealthChecksTable.tsx

@@ -28,7 +28,7 @@ import { Switch } from "@app/components/ui/switch";
 import { toast } from "@app/hooks/useToast";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
-import { Selectedsite, SitesSelector } from "@app/components/site-selector";
+import { SelectedSite, SitesSelector } from "@app/components/site-selector";
 import {
     ResourceSelector,
     SelectedResource
@@ -59,7 +59,7 @@ type StandaloneHealthChecksTableProps = {
     healthChecks: HealthCheckRow[];
     rowCount: number;
     pagination: PaginationState;
-    initialFilterSite?: Selectedsite | null;
+    initialFilterSite?: SelectedSite | null;
     initialFilterResource?: SelectedResource | null;
 };
 
@@ -117,7 +117,7 @@ export default function HealthChecksTable({
 
     const siteIdQ = searchParams.get("siteId");
     const siteIdNum = siteIdQ ? parseInt(siteIdQ, 10) : NaN;
-    const selectedSite: Selectedsite | null = useMemo(() => {
+    const selectedSite: SelectedSite | null = useMemo(() => {
         if (!siteIdQ || !Number.isInteger(siteIdNum) || siteIdNum <= 0) {
             return null;
         }
@@ -227,7 +227,7 @@ export default function HealthChecksTable({
         setResourceFilterOpen(false);
     };
 
-    const onPickSite = (site: Selectedsite) => {
+    const onPickSite = (site: SelectedSite) => {
         handleFilterChange("siteId", String(site.siteId));
         setSiteFilterOpen(false);
     };

src/components/MachineClientsTable.tsx

@@ -32,6 +32,7 @@ import { useRouter } from "next/navigation";
 import { startTransition, useMemo, useState, useTransition } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { ColumnFilterButton } from "./ColumnFilterButton";
+import { ColumnMultiFilterButton } from "./ColumnMultiFilterButton";
 import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
 import { LabelsTableCell } from "./LabelsTableCell";
 import { Badge } from "./ui/badge";
@@ -43,6 +44,7 @@ import {
 import { useQuery } from "@tanstack/react-query";
 import semver from "semver";
 import { InfoPopup } from "./ui/info-popup";
+import UserRoleBadges from "./UserRoleBadges";
 
 export type ClientRow = {
     id: number;
@@ -68,20 +70,25 @@ export type ClientRow = {
         name: string;
         color: string;
     }>;
+    roleLabels: string[];
 };
 
+type FilterOption = { value: string; label: string };
+
 type ClientTableProps = {
     machineClients: ClientRow[];
     orgId: string;
     pagination: PaginationState;
     rowCount: number;
+    roleFilterOptions: FilterOption[];
 };
 
 export default function MachineClientsTable({
     machineClients,
     orgId,
     pagination,
-    rowCount
+    rowCount,
+    roleFilterOptions
 }: ClientTableProps) {
     const router = useRouter();
 
@@ -437,6 +444,27 @@ export default function MachineClientsTable({
                 friendlyName: t("address"),
                 header: () => <span className="px-3">{t("address")}</span>
             },
+            {
+                id: "role",
+                accessorFn: (row) => row.roleLabels.join(", "),
+                friendlyName: t("roles"),
+                header: () => (
+                    <ColumnMultiFilterButton
+                        options={roleFilterOptions}
+                        selectedValues={searchParams.getAll("role_id")}
+                        onSelectedValuesChange={(values) =>
+                            handleFilterChange("role_id", values)
+                        }
+                        searchPlaceholder={t("searchPlaceholder")}
+                        emptyMessage={t("emptySearchOptions")}
+                        label={t("roles")}
+                        className="p-3"
+                    />
+                ),
+                cell: ({ row }) => (
+                    <UserRoleBadges roleLabels={row.original.roleLabels} />
+                )
+            },
             {
                 id: "labels",
                 accessorKey: "labels",
@@ -540,7 +568,7 @@ export default function MachineClientsTable({
         }
 
         return baseColumns;
-    }, [hasRowsWithoutUserId, orgId, t, searchParams]);
+    }, [hasRowsWithoutUserId, orgId, t, searchParams, roleFilterOptions]);
 
     function handleFilterChange(
         column: string,

src/components/PaidFeaturesAlert.tsx

@@ -137,11 +137,16 @@ export function PaidFeaturesAlert({ tiers }: Props) {
                                 {requiredTiersLabel
                                     ? t.rich("upgradeToTierToUse", {
                                           tier: requiredTiersLabel,
-                                          tierLink: tierLinkRenderer
+                                          tierLink: tierLinkRenderer,
+                                          bookADemoLink: bookADemoLinkRenderer
                                       })
                                     : isActive
-                                      ? t("mustUpgradeToUse")
-                                      : t("subscriptionRequiredToUse")}
+                                      ? t.rich("mustUpgradeToUse", {
+                                            bookADemoLink: bookADemoLinkRenderer
+                                        })
+                                      : t.rich("subscriptionRequiredToUse", {
+                                            bookADemoLink: bookADemoLinkRenderer
+                                        })}
                             </span>
                         </div>
                     </CardContent>

src/components/PermissionsSelectBox.tsx

@@ -109,7 +109,10 @@ function getActionsCategories(root: boolean) {
             [t("actionUpdateRole")]: "updateRole",
             [t("actionListAllowedRoleResources")]: "listRoleResources",
             [t("actionAddUserRole")]: "addUserRole",
-            [t("actionRemoveUserRole")]: "removeUserRole"
+            [t("actionRemoveUserRole")]: "removeUserRole",
+            [t("actionAddClientRole")]: "addClientRole",
+            [t("actionRemoveClientRole")]: "removeClientRole",
+            [t("actionSetClientRoles")]: "setClientRoles"
         },
         "Access Token": {
             [t("actionGenerateAccessToken")]: "generateAccessToken",

src/components/PrivateResourceInfoBox.tsx

@@ -93,7 +93,8 @@ export function PrivateResourceInfoSections({
         cidr: t("editInternalResourceDialogModeCidr"),
         http: t("editInternalResourceDialogModeHttp"),
         ssh: t("editInternalResourceDialogModeSsh"),
-        inference: t("editInternalResourceDialogModeInference")
+        inference: t("editInternalResourceDialogModeInference"),
+        gateway: t("editInternalResourceDialogModeGateway")
     };
 
     const destination = formatSiteResourceDestinationDisplay({
@@ -107,15 +108,19 @@ export function PrivateResourceInfoSections({
         tcpPortRangeString: siteResource.tcpPortRangeString ?? "*",
         udpPortRangeString: siteResource.udpPortRangeString ?? "*"
     });
+    const showAccess = siteResource.mode !== "gateway";
     const showAlias =
         siteResource.mode !== "cidr" &&
         siteResource.mode !== "http" &&
-        siteResource.mode !== "inference";
+        siteResource.mode !== "inference" &&
+        siteResource.mode !== "gateway";
     const showDestination =
         !(
             siteResource.mode === "ssh" &&
             siteResource.authDaemonMode === "native"
-        ) && siteResource.mode !== "inference";
+        ) &&
+        siteResource.mode !== "inference" &&
+        siteResource.mode !== "gateway";
     const showCertificate = !!(
         (siteResource.mode === "http" || siteResource.mode === "inference") &&
         siteResource.ssl &&
@@ -128,7 +133,8 @@ export function PrivateResourceInfoSections({
         siteResource.mode !== "inference";
 
     const numSections =
-        2 +
+        1 +
+        (showAccess ? 1 : 0) +
         (showDestination ? 1 : 0) +
         (showAlias ? 1 : 0) +
         (showCertificate ? 1 : 0) +
@@ -143,17 +149,19 @@ export function PrivateResourceInfoSections({
                 </InfoSectionContent>
             </InfoSection>
 
-            <InfoSection>
-                <InfoSectionTitle>{t("access")}</InfoSectionTitle>
-                <InfoSectionContent>
-                    <AccessMethodContent
-                        accessDisplay={access.accessDisplay}
-                        accessCopyValue={access.accessCopyValue}
-                        accessUrl={access.accessUrl}
-                        className={accessClassName}
-                    />
-                </InfoSectionContent>
-            </InfoSection>
+            {showAccess ? (
+                <InfoSection>
+                    <InfoSectionTitle>{t("access")}</InfoSectionTitle>
+                    <InfoSectionContent>
+                        <AccessMethodContent
+                            accessDisplay={access.accessDisplay}
+                            accessCopyValue={access.accessCopyValue}
+                            accessUrl={access.accessUrl}
+                            className={accessClassName}
+                        />
+                    </InfoSectionContent>
+                </InfoSection>
+            ) : null}
 
             {showDestination ? (
                 <InfoSection>

src/components/PrivateResourceSitesField.tsx

@@ -5,7 +5,7 @@ import {
     formatMultiSitesSelectorLabel
 } from "@app/components/multi-site-selector";
 import { SitesSelector } from "@app/components/site-selector";
-import type { Selectedsite } from "@app/components/site-selector";
+import type { SelectedSite } from "@app/components/site-selector";
 import { Button } from "@app/components/ui/button";
 import {
     FormControl,
@@ -28,8 +28,8 @@ import { PrivateResourceMultiSiteRoutingHelp } from "@app/components/PrivateReso
 type PrivateResourceSitesFieldProps<T extends FieldValues> = {
     control: Control<T>;
     orgId: string;
-    selectedSites: Selectedsite[];
-    onSelectedSitesChange: (sites: Selectedsite[]) => void;
+    selectedSites: SelectedSite[];
+    onSelectedSitesChange: (sites: SelectedSite[]) => void;
     siteIdsFieldName?: FieldPath<T>;
     singleSite?: boolean;
 };

src/components/PrivateResourceSshFields.tsx

@@ -25,7 +25,7 @@ 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";
+import type { SelectedSite } from "@app/components/site-selector";
 
 type PrivateResourceSshFieldsProps = {
     control: Control<any>;
@@ -33,8 +33,8 @@ type PrivateResourceSshFieldsProps = {
     watch: UseFormWatch<any>;
     orgId?: string;
     disabled?: boolean;
-    selectedSites: Selectedsite[];
-    onSelectedSitesChange: (sites: Selectedsite[]) => void;
+    selectedSites: SelectedSite[];
+    onSelectedSitesChange: (sites: SelectedSite[]) => void;
     labelPrefix?: "create" | "edit";
     showSshSettings?: boolean;
     layout?: "default" | "wizard";
@@ -101,7 +101,7 @@ export function PrivateResourceSshFields({
         onSelectedSitesChange(first);
         setValue(
             "siteIds",
-            first.map((s: Selectedsite) => s.siteId),
+            first.map((s: SelectedSite) => s.siteId),
             { shouldValidate: true }
         );
     }

src/components/PrivateResourcesTable.tsx

@@ -2,12 +2,13 @@
 
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import CopyToClipboard from "@app/components/CopyToClipboard";
+import ExportBlueprintModal from "@app/components/ExportBlueprintModal";
 import { ResourceAccessCertIndicator } from "@app/components/ResourceAccessCertIndicator";
 import {
     ResourceSitesStatusCell,
     type ResourceSiteRow
 } from "@app/components/ResourceSitesStatusCell";
-import { Selectedsite, SitesSelector } from "@app/components/site-selector";
+import { SelectedSite, SitesSelector } from "@app/components/site-selector";
 import { Badge } from "@app/components/ui/badge";
 import { Button } from "@app/components/ui/button";
 import { ExtendedColumnDef } from "@app/components/ui/data-table";
@@ -171,6 +172,10 @@ export default function PrivateResourcesTable({
         useState<PrivateResourceRow | null>();
     const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
 
+    const [isExportModalOpen, setIsExportModalOpen] = useState(false);
+    const [exportResource, setExportResource] =
+        useState<PrivateResourceRow | null>(null);
+
     const [isRefreshing, startRefreshTransition] = useTransition();
 
     const { isPaidUser } = usePaidStatus();
@@ -357,6 +362,12 @@ export default function PrivateResourcesTable({
                                 label: t(
                                     "editInternalResourceDialogModeInference"
                                 )
+                            },
+                            {
+                                value: "gateway",
+                                label: t(
+                                    "editInternalResourceDialogModeGateway"
+                                )
                             }
                         ]}
                         selectedValue={searchParams.get("mode") ?? undefined}
@@ -376,7 +387,8 @@ export default function PrivateResourcesTable({
                         cidr: t("editInternalResourceDialogModeCidr"),
                         http: t("editInternalResourceDialogModeHttp"),
                         ssh: t("editInternalResourceDialogModeSsh"),
-                        inference: t("editInternalResourceDialogModeInference")
+                        inference: t("editInternalResourceDialogModeInference"),
+                        gateway: t("editInternalResourceDialogModeGateway")
                     };
                     return <span>{modeLabels[resourceRow.mode]}</span>;
                 }
@@ -392,7 +404,11 @@ export default function PrivateResourcesTable({
                 cell: ({ row }) => {
                     const resourceRow = row.original;
                     const display = formatDestinationDisplay(resourceRow);
-                    if (resourceRow.destination) {
+                    if (
+                        resourceRow.destination &&
+                        resourceRow.mode !== "gateway"
+                    ) {
+                        // don't show the gateway resource destination which is 0.0.0.0/0 to not confuse people
                         return (
                             <CopyToClipboard
                                 text={display}
@@ -566,6 +582,14 @@ export default function PrivateResourcesTable({
                                             {t("viewSettings")}
                                         </DropdownMenuItem>
                                     </Link>
+                                    <DropdownMenuItem
+                                        onClick={() => {
+                                            setExportResource(resourceRow);
+                                            setIsExportModalOpen(true);
+                                        }}
+                                    >
+                                        {t("exportAsBlueprint")}
+                                    </DropdownMenuItem>
                                     <DropdownMenuItem
                                         onClick={() => {
                                             setSelectedInternalResource(
@@ -668,6 +692,22 @@ export default function PrivateResourcesTable({
                 />
             )}
 
+            {exportResource && (
+                <ExportBlueprintModal
+                    open={isExportModalOpen}
+                    setOpen={(val) => {
+                        setIsExportModalOpen(val);
+                        if (!val) {
+                            setExportResource(null);
+                        }
+                    }}
+                    endpoint={`/site-resource/${exportResource.id}/blueprint`}
+                    resourceName={
+                        exportResource.niceId || exportResource.name
+                    }
+                />
+            )}
+
             <ControlledDataTable
                 columns={internalColumns}
                 rows={internalResources}

src/components/PublicResourcesTable.tsx

@@ -2,12 +2,13 @@
 
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import CopyToClipboard from "@app/components/CopyToClipboard";
+import ExportBlueprintModal from "@app/components/ExportBlueprintModal";
 import { ResourceAccessCertIndicator } from "@app/components/ResourceAccessCertIndicator";
 import {
     ResourceSitesStatusCell,
     type ResourceSiteRow
 } from "@app/components/ResourceSitesStatusCell";
-import { Selectedsite } from "@app/components/site-selector";
+import { SelectedSite } from "@app/components/site-selector";
 import { Button } from "@app/components/ui/button";
 import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import {
@@ -105,7 +106,7 @@ type ProxyResourcesTableProps = {
     orgId: string;
     pagination: PaginationState;
     rowCount: number;
-    initialFilterSite?: Selectedsite | null;
+    initialFilterSite?: SelectedSite | null;
     /** Certificates prefetched on the server, keyed by full domain. */
     initialCertificates?: GetBatchedCertificateResponse;
 };
@@ -140,6 +141,11 @@ export default function PublicResourcesTable({
     const [selectedResource, setSelectedResource] =
         useState<ResourceRow | null>();
 
+    const [isExportModalOpen, setIsExportModalOpen] = useState(false);
+    const [exportResource, setExportResource] = useState<ResourceRow | null>(
+        null
+    );
+
     const [isRefreshing, startTransition] = useTransition();
     const [isNavigatingToAddPage, startNavigation] = useTransition();
 
@@ -617,6 +623,14 @@ export default function PublicResourcesTable({
                                             {t("viewSettings")}
                                         </DropdownMenuItem>
                                     </Link>
+                                    <DropdownMenuItem
+                                        onClick={() => {
+                                            setExportResource(resourceRow);
+                                            setIsExportModalOpen(true);
+                                        }}
+                                    >
+                                        {t("exportAsBlueprint")}
+                                    </DropdownMenuItem>
                                     <DropdownMenuItem
                                         onClick={() => {
                                             setSelectedResource(resourceRow);
@@ -720,6 +734,20 @@ export default function PublicResourcesTable({
                 />
             )}
 
+            {exportResource && (
+                <ExportBlueprintModal
+                    open={isExportModalOpen}
+                    setOpen={(val) => {
+                        setIsExportModalOpen(val);
+                        if (!val) {
+                            setExportResource(null);
+                        }
+                    }}
+                    endpoint={`/resource/${exportResource.id}/blueprint`}
+                    resourceName={exportResource.nice || exportResource.name}
+                />
+            )}
+
             <ControlledDataTable
                 columns={proxyColumns}
                 rows={resources}

src/components/SiteResourcesOverview.tsx

@@ -71,7 +71,8 @@ function PrivateResourceMeta({ row }: { row: SiteResourceRow }) {
         cidr: t("editInternalResourceDialogModeCidr"),
         http: t("editInternalResourceDialogModeHttp"),
         ssh: t("editInternalResourceDialogModeSsh"),
-        inference: t("editInternalResourceDialogModeInference")
+        inference: t("editInternalResourceDialogModeInference"),
+        gateway: t("editInternalResourceDialogModeGateway")
     };
     const dest = formatSiteResourceDestinationDisplay({
         mode: row.mode,

src/components/SitesColumnFilterButton.tsx

@@ -3,7 +3,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { cn } from "@app/lib/cn";
 import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
 import { CheckIcon, Funnel } from "lucide-react";
-import { SiteOnlineStatus, type Selectedsite } from "./site-selector";
+import { SiteOnlineStatus, type SelectedSite } from "./site-selector";
 import { Button } from "./ui/button";
 import { useTranslations } from "next-intl";
 import { Badge } from "./ui/badge";
@@ -62,7 +62,7 @@ export function SitesColumnFilterButton({
 
     // always include the selected site in the list of sites shown
     const sitesShown = useMemo(() => {
-        const allSites: Array<Selectedsite> = [...sites];
+        const allSites: Array<SelectedSite> = [...sites];
         if (
             debouncedQuery.trim().length === 0 &&
             selectedSite &&

src/components/TrialBillingBanner.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import React from "react";
 import { Button } from "@app/components/ui/button";
 import { ClockIcon, ArrowRight } from "lucide-react";
 import { useTranslations } from "next-intl";
@@ -8,9 +7,13 @@ import DismissableBanner from "./DismissableBanner";
 
 type TrialBillingBannerProps = {
     onUpgrade: () => void;
+    tierName: string;
 };
 
-export const TrialBillingBanner = ({ onUpgrade }: TrialBillingBannerProps) => {
+export const TrialBillingBanner = ({
+    onUpgrade,
+    tierName
+}: TrialBillingBannerProps) => {
     const t = useTranslations();
 
     return (
@@ -19,7 +22,9 @@ export const TrialBillingBanner = ({ onUpgrade }: TrialBillingBannerProps) => {
             version={1}
             title={t("billingTrialBannerTitle")}
             titleIcon={<ClockIcon className="w-5 h-5 text-primary" />}
-            description={t("billingTrialBannerDescription")}
+            description={t("billingTrialBannerDescription", {
+                tier: tierName
+            })}
             dismissable={false}
         >
             <Button

src/components/multi-site-selector.tsx

@@ -12,12 +12,12 @@ import {
 import { Checkbox } from "./ui/checkbox";
 import { useTranslations } from "next-intl";
 import { useDebounce } from "use-debounce";
-import { SiteOnlineStatus, type Selectedsite } from "./site-selector";
+import { SiteOnlineStatus, type SelectedSite } from "./site-selector";
 
 export type MultiSitesSelectorProps = {
     orgId: string;
-    selectedSites: Selectedsite[];
-    onSelectionChange: (sites: Selectedsite[]) => void;
+    selectedSites: SelectedSite[];
+    onSelectionChange: (sites: SelectedSite[]) => void;
     filterTypes?: string[];
     scope?: "org" | "launcher";
     onClear?: () => void;
@@ -25,7 +25,7 @@ export type MultiSitesSelectorProps = {
 };
 
 export function formatMultiSitesSelectorLabel(
-    selectedSites: Selectedsite[],
+    selectedSites: SelectedSite[],
     t: (key: string, values?: { count: number }) => string
 ): string {
     if (selectedSites.length === 0) {
@@ -91,7 +91,7 @@ export function MultiSitesSelector({
         [selectedSites]
     );
 
-    const toggleSite = (site: Selectedsite) => {
+    const toggleSite = (site: SelectedSite) => {
         if (selectedIds.has(site.siteId)) {
             onSelectionChange(
                 selectedSites.filter((s) => s.siteId !== site.siteId)

src/components/resource-launcher/LauncherFilterPopover.tsx

@@ -23,13 +23,13 @@ import { useQuery } from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
 import { ChevronsUpDown, Funnel } from "lucide-react";
 import { useMemo, useState } from "react";
-import type { Selectedsite } from "@app/components/site-selector";
+import type { SelectedSite } from "@app/components/site-selector";
 
 type LauncherFilterPopoverProps = {
     orgId: string;
-    selectedSites: Selectedsite[];
+    selectedSites: SelectedSite[];
     selectedLabels: SelectedLabel[];
-    onSitesChange: (sites: Selectedsite[]) => void;
+    onSitesChange: (sites: SelectedSite[]) => void;
     onLabelsChange: (labels: SelectedLabel[]) => void;
 };
 
@@ -58,7 +58,7 @@ export function LauncherFilterPopover({
         })
     );
 
-    const resolvedSelectedSites: Selectedsite[] = useMemo(
+    const resolvedSelectedSites: SelectedSite[] = useMemo(
         () =>
             selectedSites.map((selected) => {
                 const found = sites.find(

src/components/resource-launcher/LauncherResourceAccess.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { isSafeUrlForLink } from "@app/lib/launcherResourceAccess";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { LauncherCopyIcon } from "./LauncherCopyIcon";
 
@@ -8,6 +9,7 @@ type LauncherResourceAccessProps = {
     accessDisplay: string;
     accessCopyValue: string;
     accessUrl?: string | null;
+    mode?: string;
     variant: "grid" | "list";
 };
 
@@ -15,15 +17,23 @@ export function LauncherResourceAccess({
     accessDisplay,
     accessCopyValue,
     accessUrl,
+    mode,
     variant
 }: LauncherResourceAccessProps) {
-    if (!accessDisplay) {
+    const t = useTranslations();
+    const isExitNode = mode === "gateway";
+    const display = isExitNode
+        ? t("resourceLauncherAllInternetTraffic")
+        : accessDisplay;
+
+    if (!display) {
         return null;
     }
 
     const href = accessUrl ?? undefined;
-    const canLink = href && isSafeUrlForLink(href);
+    const canLink = !isExitNode && href && isSafeUrlForLink(href);
     const copyValue = canLink ? href : accessCopyValue;
+    const showCopy = !isExitNode && Boolean(copyValue);
 
     if (variant === "list") {
         return (
@@ -35,14 +45,14 @@ export function LauncherResourceAccess({
                         rel="noopener noreferrer"
                         className="min-w-0 truncate text-sm text-muted-foreground hover:underline max-md:overflow-visible max-md:whitespace-nowrap"
                     >
-                        {accessDisplay}
+                        {display}
                     </Link>
                 ) : (
                     <span className="min-w-0 truncate text-sm text-muted-foreground max-md:overflow-visible max-md:whitespace-nowrap">
-                        {accessDisplay}
+                        {display}
                     </span>
                 )}
-                <LauncherCopyIcon text={copyValue} />
+                {showCopy ? <LauncherCopyIcon text={copyValue} /> : null}
             </div>
         );
     }
@@ -56,14 +66,14 @@ export function LauncherResourceAccess({
                     rel="noopener noreferrer"
                     className="min-w-0 flex-1 truncate text-sm text-muted-foreground hover:underline"
                 >
-                    {accessDisplay}
+                    {display}
                 </Link>
             ) : (
                 <span className="min-w-0 flex-1 truncate text-sm text-muted-foreground">
-                    {accessDisplay}
+                    {display}
                 </span>
             )}
-            <LauncherCopyIcon text={copyValue} />
+            {showCopy ? <LauncherCopyIcon text={copyValue} /> : null}
         </div>
     );
 }

src/components/resource-launcher/LauncherResourceCard.tsx

@@ -56,6 +56,7 @@ export function LauncherResourceCard({
                         accessDisplay={resource.accessDisplay}
                         accessCopyValue={resource.accessCopyValue}
                         accessUrl={resource.accessUrl}
+                        mode={resource.mode}
                         variant="grid"
                     />
                 </div>

src/components/resource-launcher/LauncherResourcePanel.tsx

@@ -654,6 +654,7 @@ function PrivateResourceDetails({
     const t = useTranslations();
     const isInference = resource.mode === "inference";
     const isSsh = resource.mode === "ssh";
+    const isExitNode = resource.mode === "gateway";
 
     return (
         <div className="space-y-4">
@@ -678,6 +679,18 @@ function PrivateResourceDetails({
                 </AlertDescription>
             </Alert>
 
+            {isExitNode ? (
+                <Alert variant="default">
+                    <AlertCircle className="size-4" />
+                    <AlertTitle>
+                        {t("resourceLauncherExitNodeTitle")}
+                    </AlertTitle>
+                    <AlertDescription>
+                        {t("resourceLauncherExitNodeDescription")}
+                    </AlertDescription>
+                </Alert>
+            ) : null}
+
             <SettingsSection>
                 <SettingsSectionHeader>
                     <SettingsSectionTitle>

src/components/resource-launcher/LauncherResourceRow.tsx

@@ -51,6 +51,7 @@ export function LauncherResourceRow({
                 accessDisplay={resource.accessDisplay}
                 accessCopyValue={resource.accessCopyValue}
                 accessUrl={resource.accessUrl}
+                mode={resource.mode}
                 variant="list"
             />
 

src/components/resource-launcher/ResourceLauncher.tsx

@@ -63,7 +63,7 @@ import {
     useTransition
 } from "react";
 import { useDebouncedCallback } from "use-debounce";
-import type { Selectedsite } from "@app/components/site-selector";
+import type { SelectedSite } from "@app/components/site-selector";
 import type { SelectedLabel } from "@app/components/labels-selector";
 import { useMediaQuery } from "@app/hooks/useMediaQuery";
 import { cn } from "@app/lib/cn";
@@ -256,7 +256,7 @@ export default function ResourceLauncher({
         (Boolean(defaultViewOverrides.personal) ||
             (isAdmin && Boolean(defaultViewOverrides.orgWide)));
 
-    const selectedSites: Selectedsite[] = useMemo(
+    const selectedSites: SelectedSite[] = useMemo(
         () =>
             config.siteIds.map((siteId) => ({
                 siteId,

src/components/resource-policy/PolicyAccessRulesTable.tsx

@@ -54,11 +54,15 @@ import {
     GripVertical,
     LockIcon
 } from "lucide-react";
+import { useCommandState } from "cmdk";
 import { useTranslations } from "next-intl";
 import {
     useCallback,
+    useEffect,
     useMemo,
+    useRef,
     useState,
+    type ComponentProps,
     type DragEvent,
     type ReactNode
 } from "react";
@@ -114,6 +118,36 @@ function getColumnClassName(columnId: string) {
     return "";
 }
 
+// cmdk keeps the list's scroll offset when the search text changes, so a
+// filtered list can be left scrolled past its (few) matches and look empty.
+// Jump back to the top whenever the search changes.
+function ResettingCommandList(props: ComponentProps<typeof CommandList>) {
+    const search = useCommandState((state) => state.search);
+    const listRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        listRef.current?.scrollTo({ top: 0 });
+    }, [search]);
+
+    return <CommandList ref={listRef} {...props} />;
+}
+
+// Plain case-insensitive substring match on the country name or code, with
+// prefix matches ranked first. cmdk's default fuzzy scorer matches unrelated
+// countries (e.g. "Russia") and buries the exact one.
+function filterCountry(value: string, search: string, keywords?: string[]) {
+    const query = search.trim().toLowerCase();
+    if (!query) {
+        return 1;
+    }
+    const name = value.toLowerCase();
+    const code = keywords?.[0]?.toLowerCase() ?? "";
+    if (name.startsWith(query) || code === query) {
+        return 1;
+    }
+    return name.includes(query) ? 0.5 : 0;
+}
+
 // A METHOD rule stores its methods as a comma-separated list in rule.value,
 // e.g. "POST,PUT". Only the common methods are offered here; a value set
 // through a blueprint or the API may contain other methods (the WebDAV verbs,
@@ -155,7 +189,9 @@ function RuleMethodSelect({
                     className="w-full min-w-0 justify-between"
                 >
                     <span className="truncate">
-                        {selected.length > 0 ? selected.join(", ") : placeholder}
+                        {selected.length > 0
+                            ? selected.join(", ")
+                            : placeholder}
                     </span>
                     <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                 </Button>
@@ -616,11 +652,11 @@ export function PolicyAccessRulesTable({
                                 </Button>
                             </PopoverTrigger>
                             <PopoverContent className="min-w-50 p-0">
-                                <Command>
+                                <Command filter={filterCountry}>
                                     <CommandInput
                                         placeholder={t("searchCountries")}
                                     />
-                                    <CommandList>
+                                    <ResettingCommandList>
                                         <CommandEmpty>
                                             {t("noCountryFound")}
                                         </CommandEmpty>
@@ -629,6 +665,7 @@ export function PolicyAccessRulesTable({
                                                 <CommandItem
                                                     key={country.code}
                                                     value={country.name}
+                                                    keywords={[country.code]}
                                                     onSelect={() =>
                                                         updateRule(
                                                             row.original.ruleId,
@@ -653,7 +690,7 @@ export function PolicyAccessRulesTable({
                                                 </CommandItem>
                                             ))}
                                         </CommandGroup>
-                                    </CommandList>
+                                    </ResettingCommandList>
                                 </Command>
                             </PopoverContent>
                         </Popover>
@@ -686,7 +723,7 @@ export function PolicyAccessRulesTable({
                             <PopoverContent className="min-w-50 p-0">
                                 <Command>
                                     <CommandInput placeholder="Search ASNs or enter custom..." />
-                                    <CommandList>
+                                    <ResettingCommandList>
                                         <CommandEmpty>
                                             No ASN found. Enter a custom ASN
                                             below.
@@ -714,7 +751,7 @@ export function PolicyAccessRulesTable({
                                                 </CommandItem>
                                             ))}
                                         </CommandGroup>
-                                    </CommandList>
+                                    </ResettingCommandList>
                                 </Command>
                                 <div className="border-t p-2">
                                     <Input
@@ -775,7 +812,7 @@ export function PolicyAccessRulesTable({
                                     <CommandInput
                                         placeholder={t("searchRegions")}
                                     />
-                                    <CommandList>
+                                    <ResettingCommandList>
                                         <CommandEmpty>
                                             {t("noRegionFound")}
                                         </CommandEmpty>
@@ -848,7 +885,7 @@ export function PolicyAccessRulesTable({
                                                 )}
                                             </CommandGroup>
                                         ))}
-                                    </CommandList>
+                                    </ResettingCommandList>
                                 </Command>
                             </PopoverContent>
                         </Popover>

src/components/site-selector.tsx

@@ -15,7 +15,7 @@ import { CheckIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useDebounce } from "use-debounce";
 
-export type Selectedsite = Pick<
+export type SelectedSite = Pick<
     ListSitesResponse["sites"][number],
     "name" | "siteId" | "type"
 > & {
@@ -24,8 +24,8 @@ export type Selectedsite = Pick<
 };
 
 type SiteOnlineStatusProps = {
-    type: Selectedsite["type"];
-    online: Selectedsite["online"];
+    type: SelectedSite["type"];
+    online: SelectedSite["online"];
 };
 
 /** Dot-only indicator matching `SitesTable` colors (newt/wireguard only; nothing for local or missing status). */
@@ -57,8 +57,8 @@ export function SiteOnlineStatus({ type, online }: SiteOnlineStatusProps) {
 
 export type SitesSelectorProps = {
     orgId: string;
-    selectedSite?: Selectedsite | null;
-    onSelectSite: (selected: Selectedsite) => void;
+    selectedSite?: SelectedSite | null;
+    onSelectSite: (selected: SelectedSite) => void;
     filterTypes?: string[];
 };
 
@@ -82,7 +82,7 @@ export function SitesSelector({
 
     // always include the selected site in the list of sites shown
     const sitesShown = useMemo(() => {
-        const allSites: Array<Selectedsite> = filterTypes
+        const allSites: Array<SelectedSite> = filterTypes
             ? sites.filter((s) => filterTypes.includes(s.type))
             : [...sites];
         if (

src/lib/launcherResourceAccess.ts

@@ -66,6 +66,16 @@ export function formatPublicResourceAccess(
 export function formatSiteResourceAccess(
     resource: SiteResourceAccessInput
 ): LauncherAccessFields {
+    // Exit node (gateway) destinations are always 0.0.0.0/0 — not useful to
+    // show or copy. Callers should render a localized capability label.
+    if (resource.mode === "gateway") {
+        return {
+            accessDisplay: "",
+            accessCopyValue: "",
+            accessUrl: null
+        };
+    }
+
     if (
         (resource.mode === "http" || resource.mode === "inference") &&
         resource.fullDomain

src/lib/privateResourceForm.ts

@@ -421,7 +421,14 @@ export function createCreateFormSchema(t: TranslateFn) {
                 .min(1, t("createInternalResourceDialogNameRequired"))
                 .max(255, t("createInternalResourceDialogNameMaxLength")),
             siteIds: z.array(z.number().int().positive()).optional(),
-            mode: z.enum(["host", "cidr", "http", "ssh", "inference"]),
+            mode: z.enum([
+                "host",
+                "cidr",
+                "http",
+                "ssh",
+                "inference",
+                "gateway"
+            ]),
             destination: z.string().nullish(),
             alias: z.string().nullish(),
             destinationPort: z
@@ -468,6 +475,7 @@ export function createCreateFormSchema(t: TranslateFn) {
             if (
                 data.mode !== "ssh" &&
                 data.mode !== "inference" &&
+                data.mode !== "gateway" &&
                 (!trimmedDestination || trimmedDestination.length < 1)
             ) {
                 ctx.addIssue({
@@ -652,6 +660,13 @@ export function createCidrFormSchema(t: TranslateFn) {
         .superRefine((data, ctx) => destinationRefine(data, ctx, t));
 }
 
+export function createGatewayFormSchema(t: TranslateFn) {
+    return z.object({
+        siteIds: z.array(z.number().int().positive()).min(1),
+        mode: z.literal("gateway")
+    });
+}
+
 export function createHttpFormSchema(t: TranslateFn) {
     return z
         .object({

src/lib/privateResourceUtils.ts

@@ -1,11 +1,11 @@
 "use client";
 
-import type { Selectedsite } from "@app/components/site-selector";
+import type { SelectedSite } from "@app/components/site-selector";
 import type { SiteResourceData } from "@app/lib/privateResourceForm";
 
 export function buildSelectedSitesForResource(
     resource: Pick<SiteResourceData, "siteIds" | "siteNames">
-): Selectedsite[] {
+): SelectedSite[] {
     return resource.siteIds.map((siteId, idx) => ({
         name: resource.siteNames[idx] ?? "",
         siteId,

src/lib/queries.ts

@@ -61,6 +61,7 @@ import type {
     GetResourcePoliciesResponse,
     GetResourceWhitelistResponse,
     ListResourceAiModelsResponse,
+    ListResourceMtlsCertificatesResponse,
     ListResourceNamesResponse,
     ListResourceRolesResponse,
     ListResourceRulesResponse,
@@ -1656,6 +1657,17 @@ export const resourceQueries = {
                 return res.data.data.whitelist;
             }
         }),
+    resourceMtlsCertificates: ({ resourceId }: { resourceId: number }) =>
+        queryOptions({
+            queryKey: ["RESOURCES", resourceId, "MTLS_CERTIFICATES"] as const,
+            queryFn: async ({ signal, meta }) => {
+                const res = await meta!.api.get<
+                    AxiosResponse<ListResourceMtlsCertificatesResponse>
+                >(`/resource/${resourceId}/mtls/certificates`, { signal });
+
+                return res.data.data.certificates;
+            }
+        }),
     policies: ({ resourceId }: { resourceId: number }) =>
         queryOptions({
             queryKey: ["RESOURCES", resourceId, "POLICIES"] as const,