Merge branch 'dev' into refactor/loading-animation-on-request-logs

src/app/[orgId]/settings/(private)/idp/[idpId]/general/page.tsx

@@ -175,26 +175,6 @@ export default function GeneralPage() {
     }, [variant]);
 
     useEffect(() => {
-        async function fetchRoles() {
-            const res = await api
-                .get<AxiosResponse<ListRolesResponse>>(`/org/${orgId}/roles`)
-                .catch((e) => {
-                    console.error(e);
-                    toast({
-                        variant: "destructive",
-                        title: t("accessRoleErrorFetch"),
-                        description: formatAxiosError(
-                            e,
-                            t("accessRoleErrorFetchDescription")
-                        )
-                    });
-                });
-
-            if (res?.status === 200) {
-                setRoles(res.data.data.roles);
-            }
-        }
-
         const loadIdp = async (
             availableRoles: { roleId: number; name: string }[]
         ) => {
@@ -520,6 +500,7 @@ export default function GeneralPage() {
                                     onAutoProvisionChange={(checked) => {
                                         form.setValue("autoProvision", checked);
                                     }}
+                                    orgId={orgId as string}
                                     roleMappingMode={roleMappingMode}
                                     onRoleMappingModeChange={(data) => {
                                         setRoleMappingMode(data);

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

@@ -1,44 +1,42 @@
 "use client";
 
+import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
+import IdpTypeBadge from "@app/components/IdpTypeBadge";
+import OrgRolesTagField from "@app/components/OrgRolesTagField";
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { Button } from "@app/components/ui/button";
+import { Checkbox } from "@app/components/ui/checkbox";
 import {
     Form,
     FormControl,
     FormField,
     FormItem,
-    FormLabel,
-    FormMessage
+    FormLabel
 } from "@app/components/ui/form";
-import { Checkbox } from "@app/components/ui/checkbox";
-import OrgRolesTagField from "@app/components/OrgRolesTagField";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { userOrgUserContext } from "@app/hooks/useOrgUserContext";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { toast } from "@app/hooks/useToast";
+import { useUserContext } from "@app/hooks/useUserContext";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AxiosResponse } from "axios";
+import { build } from "@server/build";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { UserType } from "@server/types/UserTypes";
+import { useTranslations } from "next-intl";
+import { useParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
-import { ListRolesResponse } from "@server/routers/role";
-import { userOrgUserContext } from "@app/hooks/useOrgUserContext";
-import { useParams } from "next/navigation";
-import { Button } from "@app/components/ui/button";
-import {
-    SettingsContainer,
-    SettingsSection,
-    SettingsSectionHeader,
-    SettingsSectionTitle,
-    SettingsSectionDescription,
-    SettingsSectionBody,
-    SettingsSectionForm,
-    SettingsSectionFooter
-} from "@app/components/Settings";
-import { formatAxiosError } from "@app/lib/api";
-import { createApiClient } from "@app/lib/api";
-import { useEnvContext } from "@app/hooks/useEnvContext";
-import { useTranslations } from "next-intl";
-import IdpTypeBadge from "@app/components/IdpTypeBadge";
-import { UserType } from "@server/types/UserTypes";
-import { usePaidStatus } from "@app/hooks/usePaidStatus";
-import { tierMatrix } from "@server/lib/billing/tierMatrix";
-import { build } from "@server/build";
 
 const accessControlsFormSchema = z.object({
     username: z.string(),
@@ -46,25 +44,21 @@ const accessControlsFormSchema = z.object({
     roles: z.array(
         z.object({
             id: z.string(),
-            text: z.string()
+            text: z.string(),
+            isAdmin: z.boolean().optional()
         })
     )
 });
 
 export default function AccessControlsPage() {
     const { orgUser: user, updateOrgUser } = userOrgUserContext();
+    const { user: sessionUser } = useUserContext();
     const { env } = useEnvContext();
 
     const api = createApiClient({ env });
 
     const { orgId } = useParams();
 
-    const [loading, setLoading] = useState(false);
-    const [roles, setRoles] = useState<{ roleId: number; name: string }[]>([]);
-    const [activeRoleTagIndex, setActiveRoleTagIndex] = useState<number | null>(
-        null
-    );
-
     const t = useTranslations();
     const { isPaidUser } = usePaidStatus();
     const isPaid = isPaidUser(tierMatrix.fullRbac);
@@ -82,7 +76,8 @@ export default function AccessControlsPage() {
             autoProvisioned: user.autoProvisioned || false,
             roles: (user.roles ?? []).map((r) => ({
                 id: r.roleId.toString(),
-                text: r.name
+                text: r.name,
+                isAdmin: r.isAdmin === true
             }))
         }
     });
@@ -94,47 +89,25 @@ export default function AccessControlsPage() {
             "roles",
             (user.roles ?? []).map((r) => ({
                 id: r.roleId.toString(),
-                text: r.name
+                text: r.name,
+                isAdmin: r.isAdmin === true
             }))
         );
-    }, [user.userId, currentRoleIds.join(",")]);
-
-    useEffect(() => {
-        async function fetchRoles() {
-            const res = await api
-                .get<AxiosResponse<ListRolesResponse>>(`/org/${orgId}/roles`)
-                .catch((e) => {
-                    console.error(e);
-                    toast({
-                        variant: "destructive",
-                        title: t("accessRoleErrorFetch"),
-                        description: formatAxiosError(
-                            e,
-                            t("accessRoleErrorFetchDescription")
-                        )
-                    });
-                });
-
-            if (res?.status === 200) {
-                setRoles(res.data.data.roles);
-            }
-        }
-
-        fetchRoles();
         form.setValue("autoProvisioned", user.autoProvisioned || false);
-    }, []);
-
-    const allRoleOptions = roles.map((role) => ({
-        id: role.roleId.toString(),
-        text: role.name
-    }));
+    }, [user.userId, user.autoProvisioned, currentRoleIds.join(",")]);
 
     const paywallMessage =
         build === "saas"
             ? t("singleRolePerUserPlanNotice")
             : t("singleRolePerUserEditionNotice");
 
-    async function onSubmit(values: z.infer<typeof accessControlsFormSchema>) {
+    const [isSaving, setIsSaving] = useState(false);
+    const [confirmRemoveOwnAdminOpen, setConfirmRemoveOwnAdminOpen] =
+        useState(false);
+
+    async function executeSave() {
+        const values = form.getValues();
+
         if (values.roles.length === 0) {
             toast({
                 variant: "destructive",
@@ -144,7 +117,7 @@ export default function AccessControlsPage() {
             return;
         }
 
-        setLoading(true);
+        setIsSaving(true);
         try {
             const roleIds = values.roles.map((r) => parseInt(r.id, 10));
             const updateRoleRequest = supportsMultipleRolesPerUser
@@ -164,7 +137,8 @@ export default function AccessControlsPage() {
                 roleIds,
                 roles: values.roles.map((r) => ({
                     roleId: parseInt(r.id, 10),
-                    name: r.text
+                    name: r.text,
+                    isAdmin: r.isAdmin === true
                 })),
                 autoProvisioned: values.autoProvisioned
             });
@@ -183,12 +157,61 @@ export default function AccessControlsPage() {
                     t("accessRoleErrorAddDescription")
                 )
             });
+        } finally {
+            setIsSaving(false);
         }
-        setLoading(false);
+    }
+
+    async function handleAccessControlsSubmit(e: React.FormEvent) {
+        e.preventDefault();
+
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const values = form.getValues();
+
+        if (values.roles.length === 0) {
+            toast({
+                variant: "destructive",
+                title: t("accessRoleErrorAdd"),
+                description: t("accessRoleSelectPlease")
+            });
+            return;
+        }
+
+        const willHaveAdminRole = values.roles.some(
+            (r) => r.isAdmin === true
+        );
+
+        const isRemovingOwnAdmin =
+            sessionUser.userId === user.userId &&
+            user.isAdmin &&
+            !willHaveAdminRole;
+
+        if (isRemovingOwnAdmin) {
+            setConfirmRemoveOwnAdminOpen(true);
+            return;
+        }
+
+        await executeSave();
     }
 
     return (
         <SettingsContainer>
+            <ConfirmDeleteDialog
+                open={confirmRemoveOwnAdminOpen}
+                setOpen={setConfirmRemoveOwnAdminOpen}
+                title={t("removeOwnAdminRoleConfirmTitle")}
+                dialog={
+                    <div className="space-y-2">
+                        <p>{t("removeOwnAdminRoleConfirmDescription")}</p>
+                    </div>
+                }
+                buttonText={t("removeOwnAdminRoleConfirmButton")}
+                string={t("removeOwnAdminRoleConfirmPhrase")}
+                onConfirm={executeSave}
+            />
+
             <SettingsSection>
                 <SettingsSectionHeader>
                     <SettingsSectionTitle>
@@ -203,7 +226,7 @@ export default function AccessControlsPage() {
                     <SettingsSectionForm>
                         <Form {...form}>
                             <form
-                                onSubmit={form.handleSubmit(onSubmit)}
+                                onSubmit={(e) => void handleAccessControlsSubmit(e)}
                                 className="space-y-4"
                                 id="access-controls-form"
                             >
@@ -226,9 +249,7 @@ export default function AccessControlsPage() {
                                 <OrgRolesTagField
                                     form={form}
                                     name="roles"
-                                    label={t("roles")}
-                                    placeholder={t("accessRoleSelect2")}
-                                    allRoleOptions={allRoleOptions}
+                                    orgId={orgId as string}
                                     supportsMultipleRolesPerUser={
                                         supportsMultipleRolesPerUser
                                     }
@@ -236,9 +257,6 @@ export default function AccessControlsPage() {
                                         showMultiRolePaywallMessage
                                     }
                                     paywallMessage={paywallMessage}
-                                    loading={loading}
-                                    activeTagIndex={activeRoleTagIndex}
-                                    setActiveTagIndex={setActiveRoleTagIndex}
                                 />
 
                                 {user.idpAutoProvision && (
@@ -277,8 +295,8 @@ export default function AccessControlsPage() {
                 <SettingsSectionFooter>
                     <Button
                         type="submit"
-                        loading={loading}
-                        disabled={loading}
+                        loading={isSaving}
+                        disabled={isSaving}
                         form="access-controls-form"
                     >
                         {t("accessControlsSubmit")}

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

@@ -13,7 +13,7 @@ import { StrategyOption, StrategySelect } from "@app/components/StrategySelect";
 import HeaderTitle from "@app/components/SettingsSectionTitle";
 import { Button } from "@app/components/ui/button";
 import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
+import { useActionState, useState } from "react";
 import {
     Form,
     FormControl,
@@ -91,7 +91,7 @@ export default function Page() {
         "internal"
     );
     const [inviteLink, setInviteLink] = useState<string | null>(null);
-    const [loading, setLoading] = useState(false);
+
     const [expiresInDays, setExpiresInDays] = useState(1);
     const [roles, setRoles] = useState<{ roleId: number; name: string }[]>([]);
     const [idps, setIdps] = useState<IdpOption[]>([]);
@@ -311,10 +311,29 @@ export default function Page() {
         setUserOptions(options);
     }, [idps, t]);
 
-    async function onSubmitInternal(
-        values: z.infer<typeof internalFormSchema>
-    ) {
-        setLoading(true);
+    const [, submitInternalAction, isSubmittingInternal] = useActionState(
+        onSubmitInternal,
+        null
+    );
+    const [, submitGoogleAzureAction, isSubmittingGoogleAzure] = useActionState(
+        onSubmitGoogleAzure,
+        null
+    );
+    const [, submitGenericOidcAction, isSubmittingGenericOidc] = useActionState(
+        onSubmitGenericOidc,
+        null
+    );
+
+    const loading =
+        isSubmittingInternal ||
+        isSubmittingGoogleAzure ||
+        isSubmittingGenericOidc;
+
+    async function onSubmitInternal() {
+        const isValid = await internalForm.trigger();
+        if (!isValid) return;
+
+        const values = internalForm.getValues();
 
         const roleIds = values.roles.map((r) => parseInt(r.id, 10));
 
@@ -357,25 +376,24 @@ export default function Page() {
 
             setExpiresInDays(parseInt(values.validForHours) / 24);
         }
-
-        setLoading(false);
     }
 
-    async function onSubmitGoogleAzure(
-        values: z.infer<typeof googleAzureFormSchema>
-    ) {
+    async function onSubmitGoogleAzure() {
+        const isValid = await googleAzureForm.trigger();
+        if (!isValid) return;
+
+        const values = googleAzureForm.getValues();
+
         const selectedUserOption = userOptions.find(
             (opt) => opt.id === selectedOption
         );
         if (!selectedUserOption?.idpId) return;
 
-        setLoading(true);
-
         const roleIds = values.roles.map((r) => parseInt(r.id, 10));
 
         const res = await api
             .put(`/org/${orgId}/user`, {
-                username: values.email, // Use email as username for Google/Azure
+                username: values.email,
                 email: values.email || undefined,
                 name: values.name,
                 type: "oidc",
@@ -401,20 +419,19 @@ export default function Page() {
             });
             router.push(`/${orgId}/settings/access/users`);
         }
-
-        setLoading(false);
     }
 
-    async function onSubmitGenericOidc(
-        values: z.infer<typeof genericOidcFormSchema>
-    ) {
+    async function onSubmitGenericOidc() {
+        const isValid = await genericOidcForm.trigger();
+        if (!isValid) return;
+
+        const values = genericOidcForm.getValues();
+
         const selectedUserOption = userOptions.find(
             (opt) => opt.id === selectedOption
         );
         if (!selectedUserOption?.idpId) return;
 
-        setLoading(true);
-
         const roleIds = values.roles.map((r) => parseInt(r.id, 10));
 
         const res = await api
@@ -445,8 +462,6 @@ export default function Page() {
             });
             router.push(`/${orgId}/settings/access/users`);
         }
-
-        setLoading(false);
     }
 
     return (
@@ -513,9 +528,9 @@ export default function Page() {
                                         <SettingsSectionForm>
                                             <Form {...internalForm}>
                                                 <form
-                                                    onSubmit={internalForm.handleSubmit(
-                                                        onSubmitInternal
-                                                    )}
+                                                    action={
+                                                        submitInternalAction
+                                                    }
                                                     className="space-y-4"
                                                     id="create-user-form"
                                                 >
@@ -595,13 +610,7 @@ export default function Page() {
                                                     <OrgRolesTagField
                                                         form={internalForm}
                                                         name="roles"
-                                                        label={t("roles")}
-                                                        placeholder={t(
-                                                            "accessRoleSelect2"
-                                                        )}
-                                                        allRoleOptions={
-                                                            allRoleOptions
-                                                        }
+                                                        orgId={orgId as string}
                                                         supportsMultipleRolesPerUser={
                                                             supportsMultipleRolesPerUser
                                                         }
@@ -611,13 +620,6 @@ export default function Page() {
                                                         paywallMessage={
                                                             invitePaywallMessage
                                                         }
-                                                        loading={loading}
-                                                        activeTagIndex={
-                                                            activeInviteRoleTagIndex
-                                                        }
-                                                        setActiveTagIndex={
-                                                            setActiveInviteRoleTagIndex
-                                                        }
                                                     />
 
                                                     {env.email.emailEnabled && (
@@ -712,9 +714,9 @@ export default function Page() {
                                         })() && (
                                             <Form {...googleAzureForm}>
                                                 <form
-                                                    onSubmit={googleAzureForm.handleSubmit(
-                                                        onSubmitGoogleAzure
-                                                    )}
+                                                    action={
+                                                        submitGoogleAzureAction
+                                                    }
                                                     className="space-y-4"
                                                     id="create-user-form"
                                                 >
@@ -763,13 +765,7 @@ export default function Page() {
                                                     <OrgRolesTagField
                                                         form={googleAzureForm}
                                                         name="roles"
-                                                        label={t("roles")}
-                                                        placeholder={t(
-                                                            "accessRoleSelect2"
-                                                        )}
-                                                        allRoleOptions={
-                                                            allRoleOptions
-                                                        }
+                                                        orgId={orgId as string}
                                                         supportsMultipleRolesPerUser={
                                                             supportsMultipleRolesPerUser
                                                         }
@@ -779,13 +775,6 @@ export default function Page() {
                                                         paywallMessage={
                                                             invitePaywallMessage
                                                         }
-                                                        loading={loading}
-                                                        activeTagIndex={
-                                                            activeOidcRoleTagIndex
-                                                        }
-                                                        setActiveTagIndex={
-                                                            setActiveOidcRoleTagIndex
-                                                        }
                                                     />
                                                 </form>
                                             </Form>
@@ -808,9 +797,9 @@ export default function Page() {
                                         })() && (
                                             <Form {...genericOidcForm}>
                                                 <form
-                                                    onSubmit={genericOidcForm.handleSubmit(
-                                                        onSubmitGenericOidc
-                                                    )}
+                                                    action={
+                                                        submitGenericOidcAction
+                                                    }
                                                     className="space-y-4"
                                                     id="create-user-form"
                                                 >
@@ -888,13 +877,7 @@ export default function Page() {
                                                     <OrgRolesTagField
                                                         form={genericOidcForm}
                                                         name="roles"
-                                                        label={t("roles")}
-                                                        placeholder={t(
-                                                            "accessRoleSelect2"
-                                                        )}
-                                                        allRoleOptions={
-                                                            allRoleOptions
-                                                        }
+                                                        orgId={orgId as string}
                                                         supportsMultipleRolesPerUser={
                                                             supportsMultipleRolesPerUser
                                                         }
@@ -904,13 +887,6 @@ export default function Page() {
                                                         paywallMessage={
                                                             invitePaywallMessage
                                                         }
-                                                        loading={loading}
-                                                        activeTagIndex={
-                                                            activeOidcRoleTagIndex
-                                                        }
-                                                        setActiveTagIndex={
-                                                            setActiveOidcRoleTagIndex
-                                                        }
                                                     />
                                                 </form>
                                             </Form>

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

@@ -3,10 +3,12 @@
 import AlertRuleGraphEditor from "@app/components/alert-rule-editor/AlertRuleGraphEditor";
 import HeaderTitle from "@app/components/SettingsSectionTitle";
 import { defaultFormValues } from "@app/lib/alertRuleForm";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
+import { useEffect } from "react";
 
 export default function NewAlertRulePage() {
     const params = useParams();
@@ -14,6 +16,19 @@ export default function NewAlertRulePage() {
     const t = useTranslations();
     const { isPaidUser } = usePaidStatus();
     const isPaid = isPaidUser(tierMatrix.alertingRules);
+    const { env } = useEnvContext();
+    const router = useRouter();
+    const disableEnterpriseFeatures = env.flags.disableEnterpriseFeatures;
+
+    useEffect(() => {
+        if (disableEnterpriseFeatures) {
+            router.replace(`/${orgId}/settings/alerting/rules`);
+        }
+    }, [disableEnterpriseFeatures, orgId, router]);
+
+    if (disableEnterpriseFeatures) {
+        return null;
+    }
 
     return (
         <>

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

@@ -645,6 +645,12 @@ export default function ConnectionLogsPage() {
                                 </span>
                             )}
                         </div>*/}
+                        <div>
+                            <strong>Client Endpoint:</strong>{" "}
+                            <span className="font-mono">
+                                {row.clientEndpoint ?? "-"}
+                            </span>
+                        </div>
                         <div>
                             <strong>Site:</strong> {row.siteName ?? "-"}
                             {row.siteNiceId && (

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { useParams } from "next/navigation";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
@@ -22,7 +22,18 @@ import {
 } from "@app/components/Credenza";
 import { Button } from "@app/components/ui/button";
 import { Switch } from "@app/components/ui/switch";
-import { Globe, MoreHorizontal, Plus } from "lucide-react";
+import {
+    Globe,
+    MoreHorizontal,
+    Plus,
+    AlertCircle,
+    ChevronDown
+} from "lucide-react";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
 import { AxiosResponse } from "axios";
 import { build } from "@server/build";
 import Image from "next/image";
@@ -38,7 +49,10 @@ import {
     HttpDestinationCredenza,
     parseHttpConfig
 } from "@app/components/HttpDestinationCredenza";
-import { S3DestinationCredenza } from "@app/components/S3DestinationCredenza";
+import {
+    S3DestinationCredenza,
+    parseS3Config
+} from "@app/components/S3DestinationCredenza";
 import { DatadogDestinationCredenza } from "@app/components/DatadogDestinationCredenza";
 import { useTranslations } from "next-intl";
 
@@ -64,6 +78,42 @@ interface DestinationCardProps {
     disabled?: boolean;
 }
 
+function getDestinationDisplay(destination: Destination): {
+    name: string;
+    typeLabel: string;
+    detail: string;
+    icon: React.ReactNode;
+} {
+    if (destination.type === "s3") {
+        const cfg = parseS3Config(destination.config);
+        const detail = cfg.bucket
+            ? `s3://${cfg.bucket}${cfg.prefix ? `/${cfg.prefix.replace(/^\/+/, "")}` : ""}`
+            : "";
+        return {
+            name: cfg.name,
+            typeLabel: "Amazon S3",
+            detail,
+            icon: (
+                <Image
+                    src="/third-party/s3.png"
+                    alt="Amazon S3"
+                    width={16}
+                    height={16}
+                    className="rounded-sm"
+                />
+            )
+        };
+    }
+    // Default: HTTP
+    const cfg = parseHttpConfig(destination.config);
+    return {
+        name: cfg.name,
+        typeLabel: "HTTP",
+        detail: cfg.url,
+        icon: <Globe className="h-3.5 w-3.5 text-black" />
+    };
+}
+
 function DestinationCard({
     destination,
     onToggle,
@@ -73,25 +123,25 @@ function DestinationCard({
     disabled = false
 }: DestinationCardProps) {
     const t = useTranslations();
-    const cfg = parseHttpConfig(destination.config);
+    const { name, typeLabel, detail, icon } =
+        getDestinationDisplay(destination);
 
     return (
         <div className="relative flex flex-col rounded-lg border bg-card text-card-foreground p-5 gap-3">
             {/* Top row: icon + name/type + toggle */}
             <div className="flex items-start justify-between gap-3">
                 <div className="flex items-center gap-3 min-w-0">
-                    {/* Squirkle icon: gray outer → white inner → black globe */}
                     <div className="shrink-0 flex items-center justify-center w-10 h-10 rounded-2xl bg-muted">
                         <div className="flex items-center justify-center w-6 h-6 rounded-xl bg-white shadow-sm">
-                            <Globe className="h-3.5 w-3.5 text-black" />
+                            {icon}
                         </div>
                     </div>
                     <div className="min-w-0">
                         <p className="font-semibold text-sm leading-tight truncate">
-                            {cfg.name || t("streamingUnnamedDestination")}
+                            {name || t("streamingUnnamedDestination")}
                         </p>
                         <p className="text-xs text-muted-foreground truncate mt-0.5">
-                            HTTP
+                            {typeLabel}
                         </p>
                     </div>
                 </div>
@@ -105,15 +155,40 @@ function DestinationCard({
                 />
             </div>
 
-            {/* URL preview */}
+            {/* Detail preview (URL for HTTP, s3:// path for S3) */}
             <p className="text-xs text-muted-foreground truncate">
-                {cfg.url || (
+                {detail || (
                     <span className="italic">
                         {t("streamingNoUrlConfigured")}
                     </span>
                 )}
             </p>
 
+            {/* Error indicator */}
+            {destination.lastError && (
+                <Popover>
+                    <PopoverTrigger asChild>
+                        <button
+                            type="button"
+                            className="flex items-center gap-1.5 text-left cursor-pointer rounded px-0 hover:opacity-75 transition-opacity"
+                        >
+                            <AlertCircle className="h-3.5 w-3.5 text-destructive shrink-0" />
+                            <p className="text-xs text-destructive">
+                                {t("streamingLastSyncError")}
+                            </p>
+                            <ChevronDown className="h-3 w-3 text-destructive shrink-0 ml-auto" />
+                        </button>
+                    </PopoverTrigger>
+                    <PopoverContent
+                        side="bottom"
+                        align="end"
+                        className="w-80 text-xs break-words"
+                    >
+                        {destination.lastError}
+                    </PopoverContent>
+                </Popover>
+            )}
+
             {/* Footer: edit button + three-dots menu */}
             <div className="mt-auto pt-5 flex gap-2">
                 <Button
@@ -485,7 +560,7 @@ export default function StreamingDestinationsPage() {
                         if (!v) setDeleteTarget(null);
                     }}
                     string={
-                        parseHttpConfig(deleteTarget.config).name ||
+                        getDestinationDisplay(deleteTarget).name ||
                         t("streamingDeleteDialogThisDestination")
                     }
                     title={t("streamingDeleteTitle")}
@@ -493,7 +568,7 @@ export default function StreamingDestinationsPage() {
                         <p>
                             {t("streamingDeleteDialogAreYouSure")}{" "}
                             <span>
-                                {parseHttpConfig(deleteTarget.config).name ||
+                                {getDestinationDisplay(deleteTarget).name ||
                                     t("streamingDeleteDialogThisDestination")}
                             </span>
                             {t("streamingDeleteDialogPermanentlyRemoved")}

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { RolesSelector } from "@app/components/roles-selector";
 import SetResourceHeaderAuthForm from "@app/components/SetResourceHeaderAuthForm";
 import SetResourcePincodeForm from "@app/components/SetResourcePincodeForm";
 import {
@@ -33,6 +34,7 @@ import {
     SelectTrigger,
     SelectValue
 } from "@app/components/ui/select";
+import { UsersSelector } from "@app/components/users-selector";
 import type { ResourceContextType } from "@app/contexts/resourceContext";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useOrgContext } from "@app/hooks/useOrgContext";
@@ -180,13 +182,6 @@ export default function ResourceAuthenticationPage() {
         return [];
     }, [orgIdps]);
 
-    const [activeRolesTagIndex, setActiveRolesTagIndex] = useState<
-        number | null
-    >(null);
-    const [activeUsersTagIndex, setActiveUsersTagIndex] = useState<
-        number | null
-    >(null);
-
     const [ssoEnabled, setSsoEnabled] = useState(resource.sso ?? false);
 
     useEffect(() => {
@@ -497,46 +492,27 @@ export default function ResourceAuthenticationPage() {
                                                             {t("roles")}
                                                         </FormLabel>
                                                         <FormControl>
-                                                            <TagInput
-                                                                {...field}
-                                                                activeTagIndex={
-                                                                    activeRolesTagIndex
+                                                            <RolesSelector
+                                                                selectedRoles={
+                                                                    field.value ??
+                                                                    []
                                                                 }
-                                                                setActiveTagIndex={
-                                                                    setActiveRolesTagIndex
+                                                                restrictAdminRole
+                                                                orgId={
+                                                                    org.org
+                                                                        .orgId
                                                                 }
-                                                                placeholder={t(
-                                                                    "accessRoleSelect2"
-                                                                )}
-                                                                size="sm"
-                                                                tags={
-                                                                    usersRolesForm.getValues()
-                                                                        .roles
-                                                                }
-                                                                setTags={(
-                                                                    newRoles
+                                                                onSelectRoles={(
+                                                                    newUsers
                                                                 ) => {
                                                                     usersRolesForm.setValue(
                                                                         "roles",
-                                                                        newRoles as [
+                                                                        newUsers as [
                                                                             Tag,
                                                                             ...Tag[]
                                                                         ]
                                                                     );
                                                                 }}
-                                                                enableAutocomplete={
-                                                                    true
-                                                                }
-                                                                autocompleteOptions={
-                                                                    allRoles
-                                                                }
-                                                                allowDuplicates={
-                                                                    false
-                                                                }
-                                                                restrictTagsToAutocompleteOptions={
-                                                                    true
-                                                                }
-                                                                sortTags={true}
                                                             />
                                                         </FormControl>
                                                         <FormMessage />
@@ -557,23 +533,16 @@ export default function ResourceAuthenticationPage() {
                                                             {t("users")}
                                                         </FormLabel>
                                                         <FormControl>
-                                                            <TagInput
-                                                                {...field}
-                                                                activeTagIndex={
-                                                                    activeUsersTagIndex
+                                                            <UsersSelector
+                                                                selectedUsers={
+                                                                    field.value ??
+                                                                    []
                                                                 }
-                                                                setActiveTagIndex={
-                                                                    setActiveUsersTagIndex
+                                                                orgId={
+                                                                    org.org
+                                                                        .orgId
                                                                 }
-                                                                placeholder={t(
-                                                                    "accessUserSelect"
-                                                                )}
-                                                                tags={
-                                                                    usersRolesForm.getValues()
-                                                                        .users
-                                                                }
-                                                                size="sm"
-                                                                setTags={(
+                                                                onSelectUsers={(
                                                                     newUsers
                                                                 ) => {
                                                                     usersRolesForm.setValue(
@@ -584,19 +553,6 @@ export default function ResourceAuthenticationPage() {
                                                                         ]
                                                                     );
                                                                 }}
-                                                                enableAutocomplete={
-                                                                    true
-                                                                }
-                                                                autocompleteOptions={
-                                                                    allUsers
-                                                                }
-                                                                allowDuplicates={
-                                                                    false
-                                                                }
-                                                                restrictTagsToAutocompleteOptions={
-                                                                    true
-                                                                }
-                                                                sortTags={true}
                                                             />
                                                         </FormControl>
                                                         <FormMessage />

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

@@ -84,6 +84,7 @@ import {
     AlertTriangle,
     CircleCheck,
     CircleX,
+    ExternalLink,
     Info,
     Plus,
     Settings
@@ -652,6 +653,8 @@ function ProxyResourceTargetsForm({
             hcMode: null,
             hcUnhealthyInterval: null,
             hcTlsServerName: null,
+            hcHealthyThreshold: null,
+            hcUnhealthyThreshold: null,
             siteType: sites.length > 0 ? sites[0].type : null,
             new: true,
             updated: false
@@ -761,7 +764,9 @@ function ProxyResourceTargetsForm({
                     hcStatus: target.hcStatus || null,
                     hcUnhealthyInterval: target.hcUnhealthyInterval || null,
                     hcMode: target.hcMode || null,
-                    hcTlsServerName: target.hcTlsServerName
+                    hcTlsServerName: target.hcTlsServerName,
+                    hcHealthyThreshold: target.hcHealthyThreshold || null,
+                    hcUnhealthyThreshold: target.hcUnhealthyThreshold || null
                 };
 
                 // Only include path-related fields for HTTP resources
@@ -957,13 +962,18 @@ function ProxyResourceTargetsForm({
                     {build === "saas" &&
                         targets.length > 1 &&
                         new Set(targets.map((t) => t.siteId)).size > 1 && (
-                            <p className="text-sm text-muted-foreground mt-3 flex items-start gap-1.5">
-                                <AlertTriangle className="h-4 w-4 shrink-0 mt-0.5" />
-                                <span>
-                                    Round robin routing will not work between
-                                    sites that are not connected to the same
-                                    node, but failover will work.
-                                </span>
+                            <p className="text-sm text-muted-foreground mt-3">
+                                {t("proxyMultiSiteRoundRobinNodeHelp")}{" "}
+                                <a
+                                    href="https://docs.pangolin.net/manage/resources/public/targets#distributing-sites-load-across-servers"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="text-primary hover:underline inline-flex items-center gap-1"
+                                >
+                                    {t("learnMore")}
+                                    <ExternalLink className="size-3.5 shrink-0" />
+                                </a>
+                                .
                             </p>
                         )}
                 </SettingsSectionBody>
@@ -1018,7 +1028,13 @@ function ProxyResourceTargetsForm({
                             30,
                         hcTlsServerName:
                             selectedTargetForHealthCheck.hcTlsServerName ||
-                            undefined
+                            undefined,
+                        hcHealthyThreshold:
+                            selectedTargetForHealthCheck.hcHealthyThreshold ||
+                            1,
+                        hcUnhealthyThreshold:
+                            selectedTargetForHealthCheck.hcUnhealthyThreshold ||
+                            1
                     }}
                     onChanges={async (config) => {
                         if (selectedTargetForHealthCheck) {

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

@@ -82,8 +82,8 @@ import { AxiosResponse } from "axios";
 import {
     CircleCheck,
     CircleX,
+    ExternalLink,
     Info,
-    InfoIcon,
     Plus,
     Settings,
     SquareArrowOutUpRight
@@ -303,6 +303,8 @@ export default function Page() {
             hcMode: null,
             hcUnhealthyInterval: null,
             hcTlsServerName: null,
+            hcHealthyThreshold: null,
+            hcUnhealthyThreshold: null,
             siteType: sites.length > 0 ? sites[0].type : null,
             new: true,
             updated: false
@@ -552,7 +554,11 @@ export default function Page() {
                                 hcUnhealthyInterval:
                                     target.hcUnhealthyInterval || null,
                                 hcMode: target.hcMode || null,
-                                hcTlsServerName: target.hcTlsServerName
+                                hcTlsServerName: target.hcTlsServerName,
+                                hcHealthyThreshold:
+                                    target.hcHealthyThreshold || null,
+                                hcUnhealthyThreshold:
+                                    target.hcUnhealthyThreshold || null
                             };
 
                             // Only include path-related fields for HTTP resources
@@ -1419,16 +1425,22 @@ export default function Page() {
                                             </Button>
                                         </div>
                                     )}
-                                    {build === "enterprise" &&
+                                    {build === "saas" &&
                                         targets.length > 1 &&
-                                        new Set(targets.map((t) => t.siteId)).size > 1 && (
-                                            <p className="text-sm text-muted-foreground mt-3 flex items-start gap-1.5">
-                                                <InfoIcon className="h-4 w-4 shrink-0 mt-0.5" />
-                                                <span>
-                                                    Round robin routing will not work between
-                                                    sites that are not connected to the same
-                                                    node, but failover will work.
-                                                </span>
+                                        new Set(targets.map((t) => t.siteId)).size >
+                                            1 && (
+                                            <p className="text-sm text-muted-foreground mt-3">
+                                                {t("proxyMultiSiteRoundRobinNodeHelp")}{" "}
+                                                <a
+                                                    href="https://docs.pangolin.net/manage/resources/public/targets#distributing-sites-load-across-servers"
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                    className="text-primary hover:underline inline-flex items-center gap-1"
+                                                >
+                                                    {t("learnMore")}
+                                                    <ExternalLink className="size-3.5 shrink-0" />
+                                                </a>
+                                                .
                                             </p>
                                         )}
                                 </SettingsSectionBody>
@@ -1520,7 +1532,13 @@ export default function Page() {
                                             30,
                                         hcTlsServerName:
                                             selectedTargetForHealthCheck.hcTlsServerName ||
-                                            undefined
+                                            undefined,
+                                        hcHealthyThreshold:
+                                            selectedTargetForHealthCheck.hcHealthyThreshold ||
+                                            1,
+                                        hcUnhealthyThreshold:
+                                            selectedTargetForHealthCheck.hcUnhealthyThreshold ||
+                                            1
                                     }}
                                     onChanges={async (config) => {
                                         if (selectedTargetForHealthCheck) {

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

@@ -55,7 +55,9 @@ export default async function ProxyResourcesPage(
         pagination = responseData.pagination;
     } catch (e) {}
 
-    const siteIdParam = parsePositiveInt(searchParams.get("siteId") ?? undefined);
+    const siteIdParam = parsePositiveInt(
+        searchParams.get("siteId") ?? undefined
+    );
 
     let initialFilterSite: {
         siteId: number;
@@ -122,6 +124,7 @@ export default async function ProxyResourcesPage(
             domainId: resource.domainId || undefined,
             fullDomain: resource.fullDomain ?? null,
             ssl: resource.ssl,
+            wildcard: resource.wildcard,
             targets: resource.targets?.map((target) => ({
                 targetId: target.targetId,
                 ip: target.ip,

src/app/admin/idp/[idpId]/policies/page.tsx

@@ -681,6 +681,9 @@ export default function PoliciesPage() {
                                         control: form.control,
                                         name: "orgMapping"
                                     }}
+                                    orgId={
+                                        editingPolicy?.orgId || policyFormOrgId
+                                    }
                                     roleMappingFieldIdPrefix="admin-idp-policy-role"
                                     roleMappingMode={policyRoleMappingMode}
                                     onRoleMappingModeChange={

src/app/navigation.tsx

@@ -212,16 +212,22 @@ export const orgNavSections = (
                 title: "sidebarManagement",
                 icon: <Building2 className="size-4 flex-none" />,
                 items: [
-                    {
-                        title: "sidebarAlerting",
-                        href: "/{orgId}/settings/alerting",
-                        icon: <BellRing className="size-4 flex-none" />
-                    },
-                    {
-                        title: "sidebarProvisioning",
-                        href: "/{orgId}/settings/provisioning",
-                        icon: <Boxes className="size-4 flex-none" />
-                    },
+                    ...(!env?.flags.disableEnterpriseFeatures
+                        ? [
+                              {
+                                  title: "sidebarAlerting",
+                                  href: "/{orgId}/settings/alerting",
+                                  icon: (
+                                      <BellRing className="size-4 flex-none" />
+                                  )
+                              },
+                              {
+                                  title: "sidebarProvisioning",
+                                  href: "/{orgId}/settings/provisioning",
+                                  icon: <Boxes className="size-4 flex-none" />
+                              }
+                          ]
+                        : []),
                     {
                         title: "sidebarBluePrints",
                         href: "/{orgId}/settings/blueprints",

src/components/AlertingRulesTable.tsx

@@ -134,7 +134,9 @@ export default function AlertingRulesTable({
 }: AlertingRulesTableProps) {
     const router = useRouter();
     const t = useTranslations();
-    const api = createApiClient(useEnvContext());
+    const envContext = useEnvContext();
+    const api = createApiClient(envContext);
+    const { env } = envContext;
     const [isRefreshing, startRefresh] = useTransition();
     const { isPaidUser } = usePaidStatus();
     const isPaid = isPaidUser(tierMatrix.alertingRules);
@@ -426,9 +428,15 @@ export default function AlertingRulesTable({
                 searchQuery={query}
                 manualFiltering
                 manualSorting
-                onAdd={() => {
-                    router.push(`/${orgId}/settings/alerting/create`);
-                }}
+                onAdd={
+                    !env.flags.disableEnterpriseFeatures
+                        ? () => {
+                              router.push(
+                                  `/${orgId}/settings/alerting/create`
+                              );
+                          }
+                        : undefined
+                }
                 onRefresh={refreshList}
                 isRefreshing={isRefreshing || isFiltering}
                 addButtonText={t("alertingAddRule")}

src/components/AutoProvisionConfigWidget.tsx

@@ -47,6 +47,7 @@ type AutoProvisionConfigWidgetProps = {
     roleMappingFieldIdPrefix?: string;
     showFreeformRoleNamesHint?: boolean;
     autoProvisionSwitchId?: string;
+    orgId?: string;
 };
 
 export default function AutoProvisionConfigWidget({
@@ -67,7 +68,8 @@ export default function AutoProvisionConfigWidget({
     showAutoProvisionSwitch = true,
     roleMappingFieldIdPrefix = "org-idp-auto-provision",
     showFreeformRoleNamesHint = false,
-    autoProvisionSwitchId = "auto-provision-toggle"
+    autoProvisionSwitchId = "auto-provision-toggle",
+    orgId
 }: AutoProvisionConfigWidgetProps) {
     const t = useTranslations();
     const { isPaidUser } = usePaidStatus();
@@ -106,6 +108,7 @@ export default function AutoProvisionConfigWidget({
                             showFreeformRoleNamesHint={
                                 showFreeformRoleNamesHint
                             }
+                            orgId={orgId}
                             roleMappingMode={roleMappingMode}
                             onRoleMappingModeChange={onRoleMappingModeChange}
                             roles={roles}

src/components/CertificateStatus.tsx

@@ -31,8 +31,9 @@ export function CertificateStatusContent({
     const t = useTranslations();
 
     const labelClass =
-        "inline-flex shrink-0 items-center self-center text-sm font-medium leading-none";
-    const valueClass = "inline-flex items-center gap-2 text-sm leading-none";
+        "inline-flex shrink-0 items-center self-center text-sm font-medium leading-normal";
+    const valueClass =
+        "inline-flex items-center gap-2 text-sm leading-normal";
 
     const handleRefresh = async () => {
         await refreshCert();
@@ -133,14 +134,14 @@ export function CertificateStatusContent({
             {isPending && !disableRestartButton ? (
                 <Button
                     variant="ghost"
-                    className="h-auto min-h-0 shrink-0 p-0 text-sm font-normal leading-none inline-flex items-center self-center"
+                    className="h-auto min-h-0 shrink-0 p-0 text-sm font-normal leading-normal inline-flex items-center self-center"
                     onClick={handleRefresh}
                     disabled={refreshing}
                     title={t("restartCertificate", {
                         defaultValue: "Restart Certificate"
                     })}
                 >
-                    <span className="inline-flex items-center gap-2 leading-none">
+                    <span className="inline-flex items-center gap-2 leading-normal">
                         <FileBadge
                             className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
                             aria-hidden
@@ -148,7 +149,7 @@ export function CertificateStatusContent({
                         {cert.status.charAt(0).toUpperCase() +
                             cert.status.slice(1)}
                         <RotateCw
-                            className={`h-3 w-3 shrink-0 ${refreshing ? "animate-spin" : ""}`}
+                            className={`h-4 w-4 shrink-0 ${refreshing ? "animate-spin" : ""}`}
                         />
                     </span>
                 </Button>
@@ -164,7 +165,7 @@ export function CertificateStatusContent({
                         <Button
                             size="icon"
                             variant="ghost"
-                            className="inline-flex h-auto min-h-0 w-3 shrink-0 items-center justify-center self-center p-0"
+                            className="inline-flex h-4 w-4 min-h-0 shrink-0 items-center justify-center self-center p-0"
                             onClick={handleRefresh}
                             disabled={refreshing}
                             title={t("restartCertificate", {
@@ -172,7 +173,7 @@ export function CertificateStatusContent({
                             })}
                         >
                             <RotateCw
-                                className={`h-3 w-3 shrink-0 ${refreshing ? "animate-spin" : ""}`}
+                                className={`h-4 w-4 shrink-0 ${refreshing ? "animate-spin" : ""}`}
                             />
                         </Button>
                     ) : null}

src/components/CopyToClipboard.tsx

@@ -33,7 +33,7 @@ const CopyToClipboard = ({
         <div className="flex items-center space-x-2 min-w-0 max-w-full">
             <button
                 type="button"
-                className="h-6 w-6 p-0 flex items-center justify-center cursor-pointer flex-shrink-0"
+                className="h-4 w-4 p-0 flex items-center justify-center cursor-pointer flex-shrink-0"
                 onClick={handleCopy}
             >
                 {!copied ? (

src/components/Credenza.tsx

@@ -84,7 +84,7 @@ const CredenzaContent = ({ className, children, ...props }: CredenzaProps) => {
     return (
         <CredenzaContent
             className={cn(
-                "flex min-h-0 max-h-[100dvh] flex-col overflow-hidden md:top-[clamp(1.5rem,12vh,200px)] md:max-h-[calc(100vh-clamp(3rem,24vh,400px))] md:translate-y-0",
+                "flex min-h-0 max-h-[100dvh] flex-col overflow-y-auto md:top-[clamp(1.5rem,12vh,200px)] md:max-h-[calc(100vh-clamp(3rem,24vh,400px))] md:translate-y-0",
                 className
             )}
             {...props}

src/components/DomainPageClient.tsx

@@ -13,6 +13,8 @@ import DomainCertForm from "@app/components/DomainCertForm";
 import { build } from "@server/build";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useTranslations } from "next-intl";
+import { Lock } from "lucide-react";
+import { Badge } from "@app/components/ui/badge";
 
 interface DomainPageClientProps {
     initialDomain: GetDomainResponse;
@@ -49,7 +51,22 @@ export default function DomainPageClient({
         <>
             <div className="flex justify-between">
                 <SettingsSectionTitle
-                    title={domain.baseDomain}
+                    title={
+                        <span className="flex items-center gap-2">
+                            {domain.baseDomain}
+                            {domain.configManaged && (
+                                <Badge
+                                    variant="secondary"
+                                    className="flex items-center gap-1 text-sm font-normal"
+                                >
+                                    <Lock className="h-3 w-3" />
+                                    {t("configManaged", {
+                                        fallback: "Config Managed"
+                                    })}
+                                </Badge>
+                            )}
+                        </span>
+                    }
                     description={t("domainSettingDescription")}
                 />
                 {env.flags.usePangolinDns && domain.failed ? (
@@ -90,4 +107,4 @@ export default function DomainPageClient({
             </div>
         </>
     );
-}
+}

src/components/DomainsTable.tsx

@@ -16,6 +16,7 @@ import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { Badge } from "@app/components/ui/badge";
+import { Lock } from "lucide-react";
 import { useTranslations } from "next-intl";
 import CreateDomainForm from "@app/components/CreateDomainForm";
 import { useToast } from "@app/hooks/useToast";
@@ -72,7 +73,11 @@ export default function DomainsTable({ domains, orgId }: Props) {
     const { org } = useOrgContext();
     const queryClient = useQueryClient();
 
-    const { data: rawDomains, isRefetching, refetch } = useQuery({
+    const {
+        data: rawDomains,
+        isRefetching,
+        refetch
+    } = useQuery({
         ...orgQueries.domains({ orgId }),
         initialData: domains as any,
         refetchInterval: durationToMs(10, "seconds")
@@ -80,12 +85,15 @@ export default function DomainsTable({ domains, orgId }: Props) {
 
     const tableData = useMemo(
         () =>
-            (rawDomains ?? []).map((d) => ({
-                ...d,
-                baseDomain: toUnicode(d.baseDomain),
-                type: d.type ?? "",
-                errorMessage: d.errorMessage ?? null
-            } as DomainRow)),
+            (rawDomains ?? []).map(
+                (d) =>
+                    ({
+                        ...d,
+                        baseDomain: toUnicode(d.baseDomain),
+                        type: d.type ?? "",
+                        errorMessage: d.errorMessage ?? null
+                    }) as DomainRow
+            ),
         [rawDomains]
     );
 
@@ -198,12 +206,17 @@ export default function DomainsTable({ domains, orgId }: Props) {
                         <TooltipProvider>
                             <Tooltip>
                                 <TooltipTrigger asChild>
-                                    <Badge variant="red" className="cursor-help">
+                                    <Badge
+                                        variant="red"
+                                        className="cursor-help"
+                                    >
                                         {t("failed", { fallback: "Failed" })}
                                     </Badge>
                                 </TooltipTrigger>
                                 <TooltipContent className="max-w-xs">
-                                    <p className="break-words">{errorMessage}</p>
+                                    <p className="break-words">
+                                        {errorMessage}
+                                    </p>
                                 </TooltipContent>
                             </Tooltip>
                         </TooltipProvider>
@@ -220,12 +233,17 @@ export default function DomainsTable({ domains, orgId }: Props) {
                         <TooltipProvider>
                             <Tooltip>
                                 <TooltipTrigger asChild>
-                                    <Badge variant="yellow" className="cursor-help">
+                                    <Badge
+                                        variant="yellow"
+                                        className="cursor-help"
+                                    >
                                         {t("pending")}
                                     </Badge>
                                 </TooltipTrigger>
                                 <TooltipContent className="max-w-xs">
-                                    <p className="break-words">{errorMessage}</p>
+                                    <p className="break-words">
+                                        {errorMessage}
+                                    </p>
                                 </TooltipContent>
                             </Tooltip>
                         </TooltipProvider>
@@ -253,6 +271,25 @@ export default function DomainsTable({ domains, orgId }: Props) {
                         <ArrowUpDown className="ml-2 h-4 w-4" />
                     </Button>
                 );
+            },
+            cell: ({ row }) => {
+                const domain = row.original;
+                return (
+                    <span className="flex items-center gap-2">
+                        {domain.baseDomain}
+                        {domain.configManaged && (
+                            <Badge
+                                variant="secondary"
+                                className="flex items-center gap-1 text-xs font-normal"
+                            >
+                                <Lock className="h-3 w-3" />
+                                {t("configManaged", {
+                                    fallback: "Config Managed"
+                                })}
+                            </Badge>
+                        )}
+                    </span>
+                );
             }
         },
         ...(env.env.flags.usePangolinDns ? [typeColumn] : []),
@@ -283,16 +320,18 @@ export default function DomainsTable({ domains, orgId }: Props) {
                                         {t("viewSettings")}
                                     </DropdownMenuItem>
                                 </Link>
-                                <DropdownMenuItem
-                                    onClick={() => {
-                                        setSelectedDomain(domain);
-                                        setIsDeleteModalOpen(true);
-                                    }}
-                                >
-                                    <span className="text-red-500">
-                                        {t("delete")}
-                                    </span>
-                                </DropdownMenuItem>
+                                {!domain.configManaged && (
+                                    <DropdownMenuItem
+                                        onClick={() => {
+                                            setSelectedDomain(domain);
+                                            setIsDeleteModalOpen(true);
+                                        }}
+                                    >
+                                        <span className="text-red-500">
+                                            {t("delete")}
+                                        </span>
+                                    </DropdownMenuItem>
+                                )}
                             </DropdownMenuContent>
                         </DropdownMenu>
                         {domain.failed && (
@@ -315,7 +354,9 @@ export default function DomainsTable({ domains, orgId }: Props) {
                             href={`/${orgId}/settings/domains/${domain.domainId}`}
                         >
                             <Button variant={"outline"}>
-                                {t("edit")}
+                                {domain.configManaged
+                                    ? t("view", { fallback: "View" })
+                                    : t("edit")}
                                 <ArrowRight className="ml-2 w-4 h-4" />
                             </Button>
                         </Link>

src/components/HttpDestinationCredenza.tsx

@@ -19,7 +19,8 @@ import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import { RadioGroup, RadioGroupItem } from "@app/components/ui/radio-group";
 import { Textarea } from "@app/components/ui/textarea";
 import { Checkbox } from "@app/components/ui/checkbox";
-import { Plus, X } from "lucide-react";
+import { Plus, X, AlertCircle } from "lucide-react";
+import { Alert, AlertDescription } from "@app/components/ui/alert";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";
@@ -56,6 +57,8 @@ export interface Destination {
     sendActionLogs: boolean;
     sendConnectionLogs: boolean;
     sendRequestLogs: boolean;
+    lastError: string | null;
+    lastErrorAt: number | null;
     createdAt: number;
     updatedAt: number;
 }
@@ -122,9 +125,7 @@ function HeadersEditor({ headers, onChange }: HeadersEditorProps) {
                     />
                     <Input
                         value={h.value}
-                        onChange={(e) =>
-                            updateRow(i, "value", e.target.value)
-                        }
+                        onChange={(e) => updateRow(i, "value", e.target.value)}
                         placeholder={t("httpDestHeaderValuePlaceholder")}
                         className="flex-1"
                     />
@@ -200,10 +201,7 @@ export function HttpDestinationCredenza({
         if (!raw) return null;
         try {
             const parsed = new URL(raw);
-            if (
-                parsed.protocol !== "http:" &&
-                parsed.protocol !== "https:"
-            ) {
+            if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
                 return t("httpDestUrlErrorHttpRequired");
             }
             if (build === "saas" && parsed.protocol !== "https:") {
@@ -216,9 +214,7 @@ export function HttpDestinationCredenza({
     })();
 
     const isValid =
-        cfg.name.trim() !== "" &&
-        cfg.url.trim() !== "" &&
-        urlError === null;
+        cfg.name.trim() !== "" && cfg.url.trim() !== "" && urlError === null;
 
     async function handleSave() {
         if (!isValid) return;
@@ -253,10 +249,7 @@ export function HttpDestinationCredenza({
                 title: editing
                     ? t("httpDestUpdateFailed")
                     : t("httpDestCreateFailed"),
-                description: formatAxiosError(
-                    e,
-                    t("streamingUnexpectedError")
-                )
+                description: formatAxiosError(e, t("streamingUnexpectedError"))
             });
         } finally {
             setSaving(false);
@@ -280,6 +273,14 @@ export function HttpDestinationCredenza({
                 </CredenzaHeader>
 
                 <CredenzaBody>
+                    {editing?.lastError && (
+                        <Alert variant="destructive" className="mb-4">
+                            <AlertCircle className="h-4 w-4" />
+                            <AlertDescription className="break-words">
+                                {editing.lastError}
+                            </AlertDescription>
+                        </Alert>
+                    )}
                     <HorizontalTabs
                         clientSide
                         items={[
@@ -357,7 +358,9 @@ export function HttpDestinationCredenza({
                                                 {t("httpDestAuthNoneTitle")}
                                             </Label>
                                             <p className="text-xs text-muted-foreground mt-0.5">
-                                                {t("httpDestAuthNoneDescription")}
+                                                {t(
+                                                    "httpDestAuthNoneDescription"
+                                                )}
                                             </p>
                                         </div>
                                     </div>
@@ -375,15 +378,21 @@ export function HttpDestinationCredenza({
                                                     htmlFor="auth-bearer"
                                                     className="cursor-pointer font-medium"
                                                 >
-                                                    {t("httpDestAuthBearerTitle")}
+                                                    {t(
+                                                        "httpDestAuthBearerTitle"
+                                                    )}
                                                 </Label>
                                                 <p className="text-xs text-muted-foreground mt-0.5">
-                                                    {t("httpDestAuthBearerDescription")}
+                                                    {t(
+                                                        "httpDestAuthBearerDescription"
+                                                    )}
                                                 </p>
                                             </div>
                                             {cfg.authType === "bearer" && (
                                                 <Input
-                                                    placeholder={t("httpDestAuthBearerPlaceholder")}
+                                                    placeholder={t(
+                                                        "httpDestAuthBearerPlaceholder"
+                                                    )}
                                                     value={
                                                         cfg.bearerToken ?? ""
                                                     }
@@ -411,15 +420,21 @@ export function HttpDestinationCredenza({
                                                     htmlFor="auth-basic"
                                                     className="cursor-pointer font-medium"
                                                 >
-                                                    {t("httpDestAuthBasicTitle")}
+                                                    {t(
+                                                        "httpDestAuthBasicTitle"
+                                                    )}
                                                 </Label>
                                                 <p className="text-xs text-muted-foreground mt-0.5">
-                                                    {t("httpDestAuthBasicDescription")}
+                                                    {t(
+                                                        "httpDestAuthBasicDescription"
+                                                    )}
                                                 </p>
                                             </div>
                                             {cfg.authType === "basic" && (
                                                 <Input
-                                                    placeholder={t("httpDestAuthBasicPlaceholder")}
+                                                    placeholder={t(
+                                                        "httpDestAuthBasicPlaceholder"
+                                                    )}
                                                     value={
                                                         cfg.basicCredentials ??
                                                         ""
@@ -448,16 +463,22 @@ export function HttpDestinationCredenza({
                                                     htmlFor="auth-custom"
                                                     className="cursor-pointer font-medium"
                                                 >
-                                                    {t("httpDestAuthCustomTitle")}
+                                                    {t(
+                                                        "httpDestAuthCustomTitle"
+                                                    )}
                                                 </Label>
                                                 <p className="text-xs text-muted-foreground mt-0.5">
-                                                    {t("httpDestAuthCustomDescription")}
+                                                    {t(
+                                                        "httpDestAuthCustomDescription"
+                                                    )}
                                                 </p>
                                             </div>
                                             {cfg.authType === "custom" && (
                                                 <div className="flex gap-2">
                                                     <Input
-                                                        placeholder={t("httpDestAuthCustomHeaderNamePlaceholder")}
+                                                        placeholder={t(
+                                                            "httpDestAuthCustomHeaderNamePlaceholder"
+                                                        )}
                                                         value={
                                                             cfg.customHeaderName ??
                                                             ""
@@ -472,7 +493,9 @@ export function HttpDestinationCredenza({
                                                         className="flex-1"
                                                     />
                                                     <Input
-                                                        placeholder={t("httpDestAuthCustomHeaderValuePlaceholder")}
+                                                        placeholder={t(
+                                                            "httpDestAuthCustomHeaderValuePlaceholder"
+                                                        )}
                                                         value={
                                                             cfg.customHeaderValue ??
                                                             ""
@@ -593,10 +616,14 @@ export function HttpDestinationCredenza({
                                                 htmlFor="fmt-json-array"
                                                 className="cursor-pointer font-medium"
                                             >
-                                                {t("httpDestFormatJsonArrayTitle")}
+                                                {t(
+                                                    "httpDestFormatJsonArrayTitle"
+                                                )}
                                             </Label>
                                             <p className="text-xs text-muted-foreground mt-0.5">
-                                                {t("httpDestFormatJsonArrayDescription")}
+                                                {t(
+                                                    "httpDestFormatJsonArrayDescription"
+                                                )}
                                             </p>
                                         </div>
                                     </div>
@@ -616,7 +643,9 @@ export function HttpDestinationCredenza({
                                                 {t("httpDestFormatNdjsonTitle")}
                                             </Label>
                                             <p className="text-xs text-muted-foreground mt-0.5">
-                                                {t("httpDestFormatNdjsonDescription")}
+                                                {t(
+                                                    "httpDestFormatNdjsonDescription"
+                                                )}
                                             </p>
                                         </div>
                                     </div>
@@ -636,7 +665,9 @@ export function HttpDestinationCredenza({
                                                 {t("httpDestFormatSingleTitle")}
                                             </Label>
                                             <p className="text-xs text-muted-foreground mt-0.5">
-                                                {t("httpDestFormatSingleDescription")}
+                                                {t(
+                                                    "httpDestFormatSingleDescription"
+                                                )}
                                             </p>
                                         </div>
                                     </div>
@@ -717,7 +748,9 @@ export function HttpDestinationCredenza({
                                             {t("httpDestConnectionLogsTitle")}
                                         </label>
                                         <p className="text-xs text-muted-foreground mt-0.5">
-                                            {t("httpDestConnectionLogsDescription")}
+                                            {t(
+                                                "httpDestConnectionLogsDescription"
+                                            )}
                                         </p>
                                     </div>
                                 </div>
@@ -739,7 +772,9 @@ export function HttpDestinationCredenza({
                                             {t("httpDestRequestLogsTitle")}
                                         </label>
                                         <p className="text-xs text-muted-foreground mt-0.5">
-                                            {t("httpDestRequestLogsDescription")}
+                                            {t(
+                                                "httpDestRequestLogsDescription"
+                                            )}
                                         </p>
                                     </div>
                                 </div>
@@ -764,10 +799,12 @@ export function HttpDestinationCredenza({
                         loading={saving}
                         disabled={!isValid || saving}
                     >
-                        {editing ? t("httpDestSaveChanges") : t("httpDestCreateDestination")}
+                        {editing
+                            ? t("httpDestSaveChanges")
+                            : t("httpDestCreateDestination")}
                     </Button>
                 </CredenzaFooter>
             </CredenzaContent>
         </Credenza>
     );
-}
+}

src/components/IdpLoginButtons.tsx

@@ -104,7 +104,7 @@ export default function IdpLoginButtons({
                 </Alert>
             )}
 
-            <div className="space-y-2">
+            <div className="space-y-4">
                 {params.get("gotoapp") ? (
                     <>
                         <Button

src/components/InfoSection.tsx

@@ -19,7 +19,7 @@ export function InfoSections({
     return (
         <div
             className={cn(
-                "grid grid-cols-2 md:grid-cols-(--columns) md:space-x-16 gap-4 md:items-start",
+                "grid w-full min-w-0 grid-cols-2 md:grid-cols-(--columns) md:space-x-16 gap-4 md:items-start",
                 columnSizing === "content" &&
                     "md:justify-items-start md:justify-start"
             )}
@@ -41,7 +41,11 @@ export function InfoSection({
     children: React.ReactNode;
     className?: string;
 }) {
-    return <div className={cn("space-y-1", className)}>{children}</div>;
+    return (
+        <div className={cn("min-w-0 w-full max-w-full space-y-1", className)}>
+            {children}
+        </div>
+    );
 }
 
 export function InfoSectionTitle({
@@ -51,7 +55,11 @@ export function InfoSectionTitle({
     children: React.ReactNode;
     className?: string;
 }) {
-    return <div className={cn("font-semibold", className)}>{children}</div>;
+    return (
+        <div className={cn("min-w-0 truncate font-semibold", className)}>
+            {children}
+        </div>
+    );
 }
 
 export function InfoSectionContent({
@@ -62,8 +70,13 @@ export function InfoSectionContent({
     className?: string;
 }) {
     return (
-        <div className={cn("min-w-0 overflow-hidden", className)}>
-            <div className="w-full truncate [&>div.flex]:min-w-0 [&>div.flex]:!whitespace-normal [&>div.flex>span]:truncate [&>div.flex>a]:truncate">
+        <div
+            className={cn(
+                "w-full min-w-0 max-w-full overflow-hidden",
+                className
+            )}
+        >
+            <div className="w-full min-w-0 max-w-full truncate [&>div.flex]:min-w-0 [&>div.flex]:!whitespace-normal [&>div.flex>span]:truncate [&>div.flex>a]:truncate">
                 {children}
             </div>
         </div>

src/components/InternalResourceForm.tsx

@@ -40,7 +40,12 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import { UserType } from "@server/types/UserTypes";
 import { useQuery } from "@tanstack/react-query";
-import { ChevronsUpDown, ExternalLink } from "lucide-react";
+import {
+    ArrowDownIcon,
+    ChevronDownIcon,
+    ChevronsUpDown,
+    ExternalLink
+} from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -50,11 +55,13 @@ import {
     formatMultiSitesSelectorLabel
 } from "./multi-site-selector";
 import type { Selectedsite } from "./site-selector";
-import { CaretSortIcon } from "@radix-ui/react-icons";
+
 import { MachinesSelector } from "./machines-selector";
 import DomainPicker from "@app/components/DomainPicker";
 import { SwitchInput } from "@app/components/SwitchInput";
 import CertificateStatus from "@app/components/CertificateStatus";
+import { UsersSelector } from "./users-selector";
+import { RolesSelector } from "./roles-selector";
 import { build } from "@server/build";
 
 // --- Helpers (shared) ---
@@ -833,12 +840,16 @@ export function InternalResourceForm({
                                                                 modeCidrKey
                                                             )
                                                         },
-                                                        {
-                                                            value: "http",
-                                                            label: t(
-                                                                modeHttpKey
-                                                            )
-                                                        }
+                                                        ...(!disableEnterpriseFeatures
+                                                            ? [
+                                                                  {
+                                                                      value: "http" as const,
+                                                                      label: t(
+                                                                          modeHttpKey
+                                                                      )
+                                                                  }
+                                                              ]
+                                                            : [])
                                                     ];
                                                 return (
                                                     <FormItem>
@@ -1484,40 +1495,22 @@ export function InternalResourceForm({
                                         <FormItem className="flex flex-col items-start">
                                             <FormLabel>{t("roles")}</FormLabel>
                                             <FormControl>
-                                                <TagInput
-                                                    {...field}
-                                                    activeTagIndex={
-                                                        activeRolesTagIndex
+                                                <RolesSelector
+                                                    selectedRoles={
+                                                        field.value ?? []
                                                     }
-                                                    setActiveTagIndex={
-                                                        setActiveRolesTagIndex
-                                                    }
-                                                    placeholder={t(
-                                                        "accessRoleSelect2"
-                                                    )}
-                                                    size="sm"
-                                                    tags={
-                                                        form.getValues()
-                                                            .roles ?? []
-                                                    }
-                                                    setTags={(newRoles) =>
+                                                    orgId={orgId}
+                                                    onSelectRoles={(
+                                                        newUsers
+                                                    ) => {
                                                         form.setValue(
                                                             "roles",
-                                                            newRoles as [
+                                                            newUsers as [
                                                                 Tag,
                                                                 ...Tag[]
                                                             ]
-                                                        )
-                                                    }
-                                                    enableAutocomplete
-                                                    autocompleteOptions={
-                                                        allRoles
-                                                    }
-                                                    allowDuplicates={false}
-                                                    restrictTagsToAutocompleteOptions={
-                                                        true
-                                                    }
-                                                    sortTags={true}
+                                                        );
+                                                    }}
                                                 />
                                             </FormControl>
                                             <FormMessage />
@@ -1530,43 +1523,21 @@ export function InternalResourceForm({
                                     render={({ field }) => (
                                         <FormItem className="flex flex-col items-start">
                                             <FormLabel>{t("users")}</FormLabel>
-                                            <FormControl>
-                                                <TagInput
-                                                    {...field}
-                                                    activeTagIndex={
-                                                        activeUsersTagIndex
-                                                    }
-                                                    setActiveTagIndex={
-                                                        setActiveUsersTagIndex
-                                                    }
-                                                    placeholder={t(
-                                                        "accessUserSelect"
-                                                    )}
-                                                    tags={
-                                                        form.getValues()
-                                                            .users ?? []
-                                                    }
-                                                    size="sm"
-                                                    setTags={(newUsers) =>
-                                                        form.setValue(
-                                                            "users",
-                                                            newUsers as [
-                                                                Tag,
-                                                                ...Tag[]
-                                                            ]
-                                                        )
-                                                    }
-                                                    enableAutocomplete={true}
-                                                    autocompleteOptions={
-                                                        allUsers
-                                                    }
-                                                    allowDuplicates={false}
-                                                    restrictTagsToAutocompleteOptions={
-                                                        true
-                                                    }
-                                                    sortTags={true}
-                                                />
-                                            </FormControl>
+                                            <UsersSelector
+                                                selectedUsers={
+                                                    field.value ?? []
+                                                }
+                                                orgId={orgId}
+                                                onSelectUsers={(newUsers) => {
+                                                    form.setValue(
+                                                        "users",
+                                                        newUsers as [
+                                                            Tag,
+                                                            ...Tag[]
+                                                        ]
+                                                    );
+                                                }}
+                                            />
                                             <FormMessage />
                                         </FormItem>
                                     )}
@@ -1580,73 +1551,20 @@ export function InternalResourceForm({
                                                 <FormLabel>
                                                     {t("machineClients")}
                                                 </FormLabel>
-                                                <Popover>
-                                                    <PopoverTrigger asChild>
-                                                        <FormControl>
-                                                            <Button
-                                                                variant="outline"
-                                                                role="combobox"
-                                                                className={cn(
-                                                                    "justify-between w-full",
-                                                                    "text-muted-foreground pl-1.5"
-                                                                )}
-                                                            >
-                                                                <span
-                                                                    className={cn(
-                                                                        "inline-flex items-center gap-1",
-                                                                        "overflow-x-auto"
-                                                                    )}
-                                                                >
-                                                                    {(
-                                                                        field.value ??
-                                                                        []
-                                                                    ).map(
-                                                                        (
-                                                                            client
-                                                                        ) => (
-                                                                            <span
-                                                                                key={
-                                                                                    client.clientId
-                                                                                }
-                                                                                className={cn(
-                                                                                    "bg-muted-foreground/20 font-normal text-foreground rounded-sm",
-                                                                                    "py-1 px-1.5 text-xs"
-                                                                                )}
-                                                                            >
-                                                                                {
-                                                                                    client.name
-                                                                                }
-                                                                            </span>
-                                                                        )
-                                                                    )}
-                                                                    <span className="pl-1 font-normal">
-                                                                        {t(
-                                                                            "accessClientSelect"
-                                                                        )}
-                                                                    </span>
-                                                                </span>
-                                                                <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                                                            </Button>
-                                                        </FormControl>
-                                                    </PopoverTrigger>
-                                                    <PopoverContent className="p-0">
-                                                        <MachinesSelector
-                                                            selectedMachines={
-                                                                field.value ??
-                                                                []
-                                                            }
-                                                            orgId={orgId}
-                                                            onSelectMachines={(
-                                                                machines
-                                                            ) => {
-                                                                form.setValue(
-                                                                    "clients",
-                                                                    machines
-                                                                );
-                                                            }}
-                                                        />
-                                                    </PopoverContent>
-                                                </Popover>
+                                                <MachinesSelector
+                                                    selectedMachines={
+                                                        field.value ?? []
+                                                    }
+                                                    orgId={orgId}
+                                                    onSelectMachines={(
+                                                        machines
+                                                    ) => {
+                                                        form.setValue(
+                                                            "clients",
+                                                            machines
+                                                        );
+                                                    }}
+                                                />
                                                 <FormMessage />
                                             </FormItem>
                                         )}

src/components/InviteStatusCard.tsx

@@ -99,7 +99,7 @@ export default function InviteStatusCard({
                 router.push(redirectUrl);
             } else if (!user && type === "not_logged_in") {
                 const redirectUrl = email
-                    ? `/auth/login?redirect=/invite?token=${tokenParam}&email=${email}`
+                    ? `/auth/login?redirect=/invite?token=${tokenParam}&user=${email}`
                     : `/auth/login?redirect=/invite?token=${tokenParam}`;
                 router.push(redirectUrl);
             } else {
@@ -113,7 +113,7 @@ export default function InviteStatusCard({
     async function goToLogin() {
         await api.post("/auth/logout", {});
         const redirectUrl = email
-            ? `/auth/login?redirect=/invite?token=${tokenParam}&email=${email}`
+            ? `/auth/login?redirect=/invite?token=${tokenParam}&user=${email}`
             : `/auth/login?redirect=/invite?token=${tokenParam}`;
         router.push(redirectUrl);
     }

src/components/LayoutSidebar.tsx

@@ -129,9 +129,7 @@ export function LayoutSidebar({
         user.serverAdmin || Boolean(currentOrg?.isOwner || currentOrg?.isAdmin);
 
     const showTrial =
-        build === "saas" &&
-        Boolean(orgId) &&
-        subscriptionContext?.isTrial;
+        build === "saas" && Boolean(orgId) && subscriptionContext?.isTrial;
 
     return (
         <div
@@ -240,11 +238,16 @@ export function LayoutSidebar({
                     <div className="px-4">
                         <ProductUpdates isCollapsed={isSidebarCollapsed} />
                     </div>
-                ) : <div className="mt-0.2"></div>}
+                ) : (
+                    <div className="mt-0.2"></div>
+                )}
 
                 {showTrial && (
                     <div className="px-4">
-                        <ShowTrialCard isCollapsed={isSidebarCollapsed} />
+                        <ShowTrialCard
+                            isCollapsed={isSidebarCollapsed}
+                            isOwner={Boolean(currentOrg?.isOwner)}
+                        />
                     </div>
                 )}
 

src/components/LoginForm.tsx

@@ -368,7 +368,7 @@ export default function LoginForm({
 
                         {hasIdp && (
                             <>
-                                <div className="relative my-4">
+                                <div className="relative">
                                     <div className="absolute inset-0 flex items-center">
                                         <Separator />
                                     </div>

src/components/MemberResourcesPortal.tsx

@@ -40,6 +40,7 @@ import {
     TooltipProvider,
     TooltipTrigger
 } from "@/components/ui/tooltip";
+import CopyToClipboard from "@app/components/CopyToClipboard";
 
 // Update Resource type to include site information
 type Resource = {
@@ -64,6 +65,8 @@ type SiteResource = {
     destination: string;
     mode: string;
     protocol: string | null;
+    ssl: boolean;
+    fullDomain: string | null;
     enabled: boolean;
     alias: string | null;
     aliasAddress: string | null;
@@ -123,6 +126,7 @@ const ResourceFavicon = ({
 
 // Resource Info component
 const ResourceInfo = ({ resource }: { resource: Resource }) => {
+    const t = useTranslations();
     const hasAuthMethods =
         resource.sso ||
         resource.password ||
@@ -141,7 +145,9 @@ const ResourceInfo = ({ resource }: { resource: Resource }) => {
             {/* Site Information */}
             {resource.siteName && (
                 <div>
-                    <div className="text-xs font-medium mb-1.5">Site</div>
+                    <div className="text-xs font-medium mb-1.5">
+                        {t("site")}
+                    </div>
                     <div className="flex items-center gap-2">
                         <Combine className="h-4 w-4 text-foreground shrink-0" />
                         <span className="text-sm">{resource.siteName}</span>
@@ -157,7 +163,7 @@ const ResourceInfo = ({ resource }: { resource: Resource }) => {
                     }
                 >
                     <div className="text-xs font-medium mb-1.5">
-                        Authentication Methods
+                        {t("memberPortalAuthMethods")}
                     </div>
                     <div className="flex flex-col gap-1.5">
                         {resource.sso && (
@@ -166,7 +172,7 @@ const ResourceInfo = ({ resource }: { resource: Resource }) => {
                                     <Key className="h-3 w-3 text-blue-700 dark:text-blue-300" />
                                 </div>
                                 <span className="text-sm">
-                                    Single Sign-On (SSO)
+                                    {t("memberPortalSso")}
                                 </span>
                             </div>
                         )}
@@ -176,7 +182,7 @@ const ResourceInfo = ({ resource }: { resource: Resource }) => {
                                     <KeyRound className="h-3 w-3 text-purple-700 dark:text-purple-300" />
                                 </div>
                                 <span className="text-sm">
-                                    Password Protected
+                                    {t("memberPortalPasswordProtected")}
                                 </span>
                             </div>
                         )}
@@ -185,7 +191,9 @@ const ResourceInfo = ({ resource }: { resource: Resource }) => {
                                 <div className="h-5 w-5 rounded-full flex items-center justify-center bg-emerald-50/50 dark:bg-emerald-950/50">
                                     <Fingerprint className="h-3 w-3 text-emerald-700 dark:text-emerald-300" />
                                 </div>
-                                <span className="text-sm">PIN Code</span>
+                                <span className="text-sm">
+                                    {t("memberPortalPinCode")}
+                                </span>
                             </div>
                         )}
                         {resource.whitelist && (
@@ -193,7 +201,9 @@ const ResourceInfo = ({ resource }: { resource: Resource }) => {
                                 <div className="h-5 w-5 rounded-full flex items-center justify-center bg-amber-50/50 dark:bg-amber-950/50">
                                     <AtSign className="h-3 w-3 text-amber-700 dark:text-amber-300" />
                                 </div>
-                                <span className="text-sm">Email Whitelist</span>
+                                <span className="text-sm">
+                                    {t("memberPortalEmailWhitelist")}
+                                </span>
                             </div>
                         )}
                     </div>
@@ -208,7 +218,7 @@ const ResourceInfo = ({ resource }: { resource: Resource }) => {
                     <div className="flex items-center gap-2">
                         <AlertCircle className="h-4 w-4 text-destructive shrink-0" />
                         <span className="text-sm text-destructive">
-                            Resource Disabled
+                            {t("memberPortalResourceDisabled")}
                         </span>
                     </div>
                 </div>
@@ -233,6 +243,7 @@ const PaginationControls = ({
     totalItems: number;
     itemsPerPage: number;
 }) => {
+    const t = useTranslations();
     const startItem = (currentPage - 1) * itemsPerPage + 1;
     const endItem = Math.min(currentPage * itemsPerPage, totalItems);
 
@@ -241,7 +252,11 @@ const PaginationControls = ({
     return (
         <div className="flex flex-col sm:flex-row items-center justify-between gap-4 mt-8">
             <div className="text-sm text-muted-foreground">
-                Showing {startItem}-{endItem} of {totalItems} resources
+                {t("memberPortalShowingResources", {
+                    start: startItem,
+                    end: endItem,
+                    total: totalItems
+                })}
             </div>
 
             <div className="flex items-center gap-2">
@@ -253,7 +268,7 @@ const PaginationControls = ({
                     className="gap-1"
                 >
                     <ChevronLeft className="h-4 w-4" />
-                    Previous
+                    {t("memberPortalPrevious")}
                 </Button>
 
                 <div className="flex items-center gap-1">
@@ -309,7 +324,7 @@ const PaginationControls = ({
                     disabled={currentPage === totalPages}
                     className="gap-1"
                 >
-                    Next
+                    {t("memberPortalNext")}
                     <ChevronRight className="h-4 w-4" />
                 </Button>
             </div>
@@ -389,13 +404,11 @@ export default function MemberResourcesPortal({
                     response.data.data.siteResources || []
                 );
             } else {
-                setError("Failed to load resources");
+                setError(t("memberPortalFailedToLoad"));
             }
         } catch (err) {
             console.error("Error fetching user resources:", err);
-            setError(
-                "Failed to load resources. Please check your connection and try again."
-            );
+            setError(t("memberPortalFailedToLoadDescription"));
         } finally {
             setLoading(false);
             setRefreshing(false);
@@ -526,8 +539,8 @@ export default function MemberResourcesPortal({
         return (
             <div className="container mx-auto max-w-12xl">
                 <SettingsSectionTitle
-                    title="Resources"
-                    description="Resources you have access to in this organization"
+                    title={t("memberPortalTitle")}
+                    description={t("memberPortalDescription")}
                 />
 
                 {/* Search and Sort Controls - Skeleton */}
@@ -554,8 +567,8 @@ export default function MemberResourcesPortal({
         return (
             <div className="container mx-auto max-w-12xl">
                 <SettingsSectionTitle
-                    title="Resources"
-                    description="Resources you have access to in this organization"
+                    title={t("memberPortalTitle")}
+                    description={t("memberPortalDescription")}
                 />
                 <Card>
                     <CardContent className="flex flex-col items-center justify-center py-20 text-center">
@@ -563,7 +576,7 @@ export default function MemberResourcesPortal({
                             <AlertCircle className="h-16 w-16 text-destructive/60" />
                         </div>
                         <h3 className="text-xl font-semibold text-foreground mb-3">
-                            Unable to Load Resources
+                            {t("memberPortalUnableToLoad")}
                         </h3>
                         <p className="text-muted-foreground max-w-lg text-base mb-6">
                             {error}
@@ -574,7 +587,7 @@ export default function MemberResourcesPortal({
                             className="gap-2"
                         >
                             <RefreshCw className="h-4 w-4" />
-                            Try Again
+                            {t("memberPortalTryAgain")}
                         </Button>
                     </CardContent>
                 </Card>
@@ -585,8 +598,8 @@ export default function MemberResourcesPortal({
     return (
         <div className="container mx-auto max-w-12xl">
             <SettingsSectionTitle
-                title="Resources"
-                description="Resources you have access to in this organization"
+                title={t("memberPortalTitle")}
+                description={t("memberPortalDescription")}
             />
 
             {/* Search and Sort Controls with Refresh */}
@@ -595,7 +608,7 @@ export default function MemberResourcesPortal({
                     {/* Search */}
                     <div className="relative w-full sm:w-80">
                         <Input
-                            placeholder="Search resources..."
+                            placeholder={t("resourcesSearch")}
                             value={searchQuery}
                             onChange={(e) => setSearchQuery(e.target.value)}
                             className="w-full pl-8 bg-card"
@@ -607,26 +620,28 @@ export default function MemberResourcesPortal({
                     <div className="w-full sm:w-36">
                         <Select value={sortBy} onValueChange={setSortBy}>
                             <SelectTrigger className="bg-card">
-                                <SelectValue placeholder="Sort by..." />
+                                <SelectValue
+                                    placeholder={t("memberPortalSortBy")}
+                                />
                             </SelectTrigger>
                             <SelectContent>
                                 <SelectItem value="name-asc">
-                                    Name A-Z
+                                    {t("memberPortalSortNameAsc")}
                                 </SelectItem>
                                 <SelectItem value="name-desc">
-                                    Name Z-A
+                                    {t("memberPortalSortNameDesc")}
                                 </SelectItem>
                                 <SelectItem value="domain-asc">
-                                    Domain A-Z
+                                    {t("memberPortalSortDomainAsc")}
                                 </SelectItem>
                                 <SelectItem value="domain-desc">
-                                    Domain Z-A
+                                    {t("memberPortalSortDomainDesc")}
                                 </SelectItem>
                                 <SelectItem value="status-enabled">
-                                    Enabled First
+                                    {t("memberPortalSortEnabledFirst")}
                                 </SelectItem>
                                 <SelectItem value="status-disabled">
-                                    Disabled First
+                                    {t("memberPortalSortDisabledFirst")}
                                 </SelectItem>
                             </SelectContent>
                         </Select>
@@ -644,7 +659,7 @@ export default function MemberResourcesPortal({
                     <RefreshCw
                         className={`h-4 w-4 ${refreshing ? "animate-spin" : ""}`}
                     />
-                    Refresh
+                    {t("memberPortalRefresh")}
                 </Button>
             </div>
 
@@ -663,13 +678,15 @@ export default function MemberResourcesPortal({
                         </div>
                         <h3 className="text-2xl font-semibold text-foreground mb-3">
                             {searchQuery
-                                ? "No Resources Found"
-                                : "No Resources Available"}
+                                ? t("memberPortalNoResourcesFound")
+                                : t("memberPortalNoResourcesAvailable")}
                         </h3>
                         <p className="text-muted-foreground max-w-lg text-base mb-6">
                             {searchQuery
-                                ? `No resources match "${searchQuery}". Try adjusting your search terms or clearing the search to see all resources.`
-                                : "You don't have access to any resources yet. Contact your administrator to get access to resources you need."}
+                                ? t("memberPortalNoResourcesMatchSearch", {
+                                      query: searchQuery
+                                  })
+                                : t("memberPortalNoResourcesAccess")}
                         </p>
                         <div className="flex flex-col sm:flex-row gap-3">
                             {searchQuery ? (
@@ -678,7 +695,7 @@ export default function MemberResourcesPortal({
                                     variant="outline"
                                     className="gap-2"
                                 >
-                                    Clear Search
+                                    {t("memberPortalClearSearch")}
                                 </Button>
                             ) : (
                                 <Button
@@ -690,7 +707,7 @@ export default function MemberResourcesPortal({
                                     <RefreshCw
                                         className={`h-4 w-4 ${refreshing ? "animate-spin" : ""}`}
                                     />
-                                    Refresh Resources
+                                    {t("memberPortalRefreshResources")}
                                 </Button>
                             )}
                         </div>
@@ -704,11 +721,12 @@ export default function MemberResourcesPortal({
                             <div className="mb-4">
                                 <h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
                                     <Globe className="h-5 w-5" />
-                                    Public Resources
+                                    {t("memberPortalPublicResources")}
                                 </h3>
                                 <p className="text-sm text-muted-foreground mt-1">
-                                    Web applications and services accessible via
-                                    browser
+                                    {t(
+                                        "memberPortalPublicResourcesDescription"
+                                    )}
                                 </p>
                             </div>
                             <div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 auto-cols-fr mb-8">
@@ -768,9 +786,12 @@ export default function MemberResourcesPortal({
                                                             resource.domain
                                                         );
                                                         toast({
-                                                            title: "Copied to clipboard",
-                                                            description:
-                                                                "Resource URL has been copied to your clipboard.",
+                                                            title: t(
+                                                                "memberPortalCopiedToClipboard"
+                                                            ),
+                                                            description: t(
+                                                                "memberPortalCopiedUrlDescription"
+                                                            ),
                                                             duration: 2000
                                                         });
                                                     }}
@@ -791,7 +812,7 @@ export default function MemberResourcesPortal({
                                                 disabled={!resource.enabled}
                                             >
                                                 <ExternalLink className="h-3.5 w-3.5 mr-2" />
-                                                Open Resource
+                                                {t("memberPortalOpenResource")}
                                             </Button>
                                         </div>
                                     </Card>
@@ -806,11 +827,12 @@ export default function MemberResourcesPortal({
                             <div className="mb-4">
                                 <h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
                                     <Combine className="h-5 w-5" />
-                                    Private Resources
+                                    {t("memberPortalPrivateResources")}
                                 </h3>
                                 <p className="text-sm text-muted-foreground mt-1">
-                                    Internal network resources accessible via
-                                    client
+                                    {t(
+                                        "memberPortalPrivateResourcesDescription"
+                                    )}
                                 </p>
                             </div>
                             <div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 auto-cols-fr mb-8">
@@ -843,11 +865,16 @@ export default function MemberResourcesPortal({
                                                     <InfoPopup>
                                                         <div className="space-y-2 text-sm">
                                                             <div className="text-xs font-medium mb-1.5">
-                                                                Resource Details
+                                                                {t(
+                                                                    "memberPortalResourceDetails"
+                                                                )}
                                                             </div>
                                                             <div>
                                                                 <span className="font-medium">
-                                                                    Mode:
+                                                                    {t(
+                                                                        "memberPortalMode"
+                                                                    )}
+                                                                    :
                                                                 </span>
                                                                 <span className="ml-2 text-muted-foreground capitalize">
                                                                     {
@@ -858,7 +885,10 @@ export default function MemberResourcesPortal({
                                                             {siteResource.protocol && (
                                                                 <div>
                                                                     <span className="font-medium">
-                                                                        Protocol:
+                                                                        {t(
+                                                                            "protocol"
+                                                                        )}
+                                                                        :
                                                                     </span>
                                                                     <span className="ml-2 text-muted-foreground uppercase">
                                                                         {
@@ -869,7 +899,10 @@ export default function MemberResourcesPortal({
                                                             )}
                                                             <div>
                                                                 <span className="font-medium">
-                                                                    Destination:
+                                                                    {t(
+                                                                        "memberPortalDestination"
+                                                                    )}
+                                                                    :
                                                                 </span>
                                                                 <span className="ml-2 text-muted-foreground">
                                                                     {
@@ -880,7 +913,10 @@ export default function MemberResourcesPortal({
                                                             {siteResource.alias && (
                                                                 <div>
                                                                     <span className="font-medium">
-                                                                        Alias:
+                                                                        {t(
+                                                                            "memberPortalAlias"
+                                                                        )}
+                                                                        :
                                                                     </span>
                                                                     <span className="ml-2 text-muted-foreground">
                                                                         {
@@ -891,14 +927,21 @@ export default function MemberResourcesPortal({
                                                             )}
                                                             <div>
                                                                 <span className="font-medium">
-                                                                    Status:
+                                                                    {t(
+                                                                        "status"
+                                                                    )}
+                                                                    :
                                                                 </span>
                                                                 <span
                                                                     className={`ml-2 ${siteResource.enabled ? "text-green-600" : "text-red-600"}`}
                                                                 >
                                                                     {siteResource.enabled
-                                                                        ? "Enabled"
-                                                                        : "Disabled"}
+                                                                        ? t(
+                                                                              "enabled"
+                                                                          )
+                                                                        : t(
+                                                                              "disabled"
+                                                                          )}
                                                                 </span>
                                                             </div>
                                                         </div>
@@ -907,7 +950,14 @@ export default function MemberResourcesPortal({
                                             </div>
 
                                             <div className="mt-3">
-                                                {siteResource.alias ? (
+                                                {siteResource.mode === "http" &&
+                                                siteResource.fullDomain ? (
+                                                    /* HTTP mode - show as clickable link */
+                                                    <CopyToClipboard
+                                                        text={`${siteResource.ssl ? "https" : (siteResource.protocol ?? "http")}://${siteResource.fullDomain}`}
+                                                        isLink={true}
+                                                    />
+                                                ) : siteResource.alias ? (
                                                     <>
                                                         {/* Alias as primary */}
                                                         <div className="flex items-center gap-2 mb-1">
@@ -925,9 +975,13 @@ export default function MemberResourcesPortal({
                                                                         siteResource.alias!
                                                                     );
                                                                     toast({
-                                                                        title: "Copied to clipboard",
+                                                                        title: t(
+                                                                            "memberPortalCopiedToClipboard"
+                                                                        ),
                                                                         description:
-                                                                            "Resource alias has been copied to your clipboard.",
+                                                                            t(
+                                                                                "memberPortalCopiedAliasDescription"
+                                                                            ),
                                                                         duration: 2000
                                                                     });
                                                                 }}
@@ -959,9 +1013,13 @@ export default function MemberResourcesPortal({
                                                                     siteResource.destination
                                                                 );
                                                                 toast({
-                                                                    title: "Copied to clipboard",
+                                                                    title: t(
+                                                                        "memberPortalCopiedToClipboard"
+                                                                    ),
                                                                     description:
-                                                                        "Resource destination has been copied to your clipboard.",
+                                                                        t(
+                                                                            "memberPortalCopiedDestinationDescription"
+                                                                        ),
                                                                     duration: 2000
                                                                 });
                                                             }}
@@ -973,10 +1031,34 @@ export default function MemberResourcesPortal({
                                             </div>
                                         </div>
 
-                                        <div className="p-6 pt-0 mt-auto">
+                                        <div className="p-6 pt-0 mt-auto space-y-2">
+                                            {siteResource.mode === "http" &&
+                                            siteResource.fullDomain ? (
+                                                <Button
+                                                    onClick={() =>
+                                                        window.open(
+                                                            `${siteResource.ssl ? "https" : (siteResource.protocol ?? "http")}://${siteResource.fullDomain}`,
+                                                            "_blank"
+                                                        )
+                                                    }
+                                                    className="w-full h-9"
+                                                    variant="outline"
+                                                    size="sm"
+                                                    disabled={
+                                                        !siteResource.enabled
+                                                    }
+                                                >
+                                                    <ExternalLink className="h-3.5 w-3.5 mr-2" />
+                                                    {t(
+                                                        "memberPortalOpenResource"
+                                                    )}
+                                                </Button>
+                                            ) : null}
                                             <div className="flex items-center justify-center py-2 px-4 bg-muted/50 rounded text-sm text-muted-foreground">
                                                 <Combine className="h-3.5 w-3.5 mr-2" />
-                                                Requires Client Connection
+                                                {t(
+                                                    "memberPortalRequiresClientConnection"
+                                                )}
                                             </div>
                                         </div>
                                     </Card>

src/components/MfaInputForm.tsx

@@ -145,7 +145,7 @@ export default function MfaInputForm({
                 </Alert>
             )}
 
-            <div className="space-y-2">
+            <div className="space-y-4">
                 <Button
                     type="submit"
                     form={formId}

src/components/OrgLoginPage.tsx

@@ -16,6 +16,7 @@ import Link from "next/link";
 import { replacePlaceholder } from "@app/lib/replacePlaceholder";
 import { getTranslations } from "next-intl/server";
 import { pullEnv } from "@app/lib/pullEnv";
+import { build } from "@server/build";
 
 type OrgLoginPageProps = {
     loginPage: LoadLoginPageResponse | undefined;
@@ -52,19 +53,21 @@ export default async function OrgLoginPage({
     const t = await getTranslations();
     return (
         <div>
-            <div className="text-center mb-2">
-                <span className="text-sm text-muted-foreground">
-                    {t("poweredBy")}{" "}
-                    <Link
-                        href="https://pangolin.net/"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="underline"
-                    >
-                        {env.branding.appName || "Pangolin"}
-                    </Link>
-                </span>
-            </div>
+            {build !== "enterprise" || !env.branding.hidePoweredBy ? (
+                <div className="text-center mb-2">
+                    <span className="text-sm text-muted-foreground">
+                        {t("poweredBy")}{" "}
+                        <Link
+                            href="https://pangolin.net/"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="underline"
+                        >
+                            {env.branding.appName || "Pangolin"}
+                        </Link>
+                    </span>
+                </div>
+            ) : null}
             <Card className="w-full max-w-md">
                 <CardHeader>
                     {branding?.logoUrl && (

src/components/OrgRolesTagField.tsx

@@ -8,51 +8,42 @@ import {
     FormLabel,
     FormMessage
 } from "@app/components/ui/form";
-import { Tag, TagInput } from "@app/components/tags/tag-input";
+
 import { toast } from "@app/hooks/useToast";
 import { useTranslations } from "next-intl";
-import type { Dispatch, SetStateAction } from "react";
-import type { FieldValues, Path, UseFormReturn } from "react-hook-form";
 
-export type RoleTag = {
-    id: string;
-    text: string;
-};
+import type { FieldValues, Path, UseFormReturn } from "react-hook-form";
+import { RolesSelector, type SelectedRole } from "./roles-selector";
 
 type OrgRolesTagFieldProps<TFieldValues extends FieldValues> = {
-    form: Pick<UseFormReturn<TFieldValues>, "control" | "getValues" | "setValue">;
+    form: Pick<
+        UseFormReturn<TFieldValues>,
+        "control" | "getValues" | "setValue"
+    >;
+    orgId: string;
     /** Field in the form that holds Tag[] (role tags). Default: `"roles"`. */
     name?: Path<TFieldValues>;
-    label: string;
-    placeholder: string;
-    allRoleOptions: Tag[];
+    label?: string;
     supportsMultipleRolesPerUser: boolean;
     showMultiRolePaywallMessage: boolean;
     paywallMessage: string;
-    loading?: boolean;
-    activeTagIndex: number | null;
-    setActiveTagIndex: Dispatch<SetStateAction<number | null>>;
+    disabled?: boolean;
 };
 
 export default function OrgRolesTagField<TFieldValues extends FieldValues>({
     form,
     name = "roles" as Path<TFieldValues>,
     label,
-    placeholder,
-    allRoleOptions,
+    orgId,
     supportsMultipleRolesPerUser,
     showMultiRolePaywallMessage,
     paywallMessage,
-    loading = false,
-    activeTagIndex,
-    setActiveTagIndex
+    disabled
 }: OrgRolesTagFieldProps<TFieldValues>) {
     const t = useTranslations();
 
-    function setRoleTags(updater: Tag[] | ((prev: Tag[]) => Tag[])) {
-        const prev = form.getValues(name) as Tag[];
-        const nextValue =
-            typeof updater === "function" ? updater(prev) : updater;
+    function setRoleTags(nextValue: SelectedRole[]) {
+        const prev = form.getValues(name) as SelectedRole[];
         const next = supportsMultipleRolesPerUser
             ? nextValue
             : nextValue.length > 1
@@ -88,22 +79,13 @@ export default function OrgRolesTagField<TFieldValues extends FieldValues>({
             name={name}
             render={({ field }) => (
                 <FormItem className="flex flex-col items-start">
-                    <FormLabel>{label}</FormLabel>
+                    <FormLabel>{label ?? t("roles")}</FormLabel>
                     <FormControl>
-                        <TagInput
-                            {...field}
-                            activeTagIndex={activeTagIndex}
-                            setActiveTagIndex={setActiveTagIndex}
-                            placeholder={placeholder}
-                            size="sm"
-                            tags={field.value}
-                            setTags={setRoleTags}
-                            enableAutocomplete={true}
-                            autocompleteOptions={allRoleOptions}
-                            allowDuplicates={false}
-                            restrictTagsToAutocompleteOptions={true}
-                            sortTags={true}
-                            disabled={loading}
+                        <RolesSelector
+                            orgId={orgId}
+                            selectedRoles={field.value ?? []}
+                            onSelectRoles={setRoleTags}
+                            disabled={disabled}
                         />
                     </FormControl>
                     {showMultiRolePaywallMessage && (

src/components/ProxyResourcesTable.tsx

@@ -96,6 +96,7 @@ export type ResourceRow = {
     targets?: TargetHealth[];
     health?: "healthy" | "degraded" | "unhealthy" | "unknown";
     sites: ResourceSiteRow[];
+    wildcard?: boolean;
 };
 
 function StatusIcon({
@@ -570,10 +571,14 @@ export default function ProxyResourcesTable({
                             />
                         ) : null}
                         <div className="">
-                            <CopyToClipboard
-                                text={resourceRow.domain}
-                                isLink={true}
-                            />
+                            {!resourceRow.wildcard ? (
+                                <CopyToClipboard
+                                    text={resourceRow.domain}
+                                    isLink={true}
+                                />
+                            ) : (
+                                <span>{resourceRow.domain}</span>
+                            )}
                         </div>
                     </div>
                 );

src/components/ResetPasswordForm.tsx

@@ -528,7 +528,7 @@ export default function ResetPasswordForm({
                             )}
 
                             {state === "request" && (
-                                <div className="flex flex-col gap-2">
+                                <div className="flex flex-col gap-4">
                                     {env.email.emailEnabled && (
                                         <Button
                                             type="submit"

src/components/ResourceAuthPortal.tsx

@@ -375,7 +375,8 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
             {!accessDenied ? (
                 <div>
                     {isUnlocked() && build === "enterprise" ? (
-                        !env.branding.resourceAuthPage?.hidePoweredBy && (
+                        !env.branding.resourceAuthPage?.hidePoweredBy &&
+                        !env.branding.hidePoweredBy && (
                             <div className="text-center mb-2">
                                 <span className="text-sm text-muted-foreground">
                                     {t("poweredBy")}{" "}

src/components/ResourceInfoBox.tsx

@@ -40,7 +40,9 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                     <InfoSection>
                         <InfoSectionTitle>{t("identifier")}</InfoSectionTitle>
                         <InfoSectionContent>
-                            {resource.niceId}
+                            <span className="inline-flex items-center">
+                                {resource.niceId}
+                            </span>
                         </InfoSectionContent>
                     </InfoSection>
                     {resource.http ? (
@@ -49,7 +51,9 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                                 <InfoSectionTitle>URL</InfoSectionTitle>
                                 <InfoSectionContent>
                                     {resource.wildcard ? (
-                                        <span>{fullUrl}</span>
+                                        <span className="inline-flex items-center">
+                                            {fullUrl}
+                                        </span>
                                     ) : (
                                         <CopyToClipboard
                                             text={fullUrl}
@@ -68,7 +72,7 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                                     authInfo.sso ||
                                     authInfo.whitelist ||
                                     authInfo.headerAuth ? (
-                                        <div className="flex items-start space-x-2">
+                                        <div className="flex items-center space-x-2">
                                             <ShieldCheck className="w-4 h-4 flex-shrink-0 text-green-500" />
                                             <span>{t("protected")}</span>
                                         </div>
@@ -106,7 +110,9 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                                     {t("protocol")}
                                 </InfoSectionTitle>
                                 <InfoSectionContent>
-                                    {resource.protocol.toUpperCase()}
+                                    <span className="inline-flex items-center">
+                                        {resource.protocol.toUpperCase()}
+                                    </span>
                                 </InfoSectionContent>
                             </InfoSection>
                             <InfoSection>

src/components/RoleMappingConfigFields.tsx

@@ -16,6 +16,7 @@ import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import { build } from "@server/build";
+import { RolesSelector } from "./roles-selector";
 
 export type RoleMappingRoleOption = {
     roleId: number;
@@ -38,6 +39,8 @@ export type RoleMappingConfigFieldsProps = {
     fieldIdPrefix?: string;
     /** When true, show extra hint for global default policies (no org role list). */
     showFreeformRoleNamesHint?: boolean;
+    /** Org ID to use for role lookup. Falls back to URL params when not provided. */
+    orgId?: string;
 };
 
 export default function RoleMappingConfigFields({
@@ -53,14 +56,12 @@ export default function RoleMappingConfigFields({
     rawExpression,
     onRawExpressionChange,
     fieldIdPrefix = "role-mapping",
-    showFreeformRoleNamesHint = false
+    showFreeformRoleNamesHint = false,
+    orgId
 }: RoleMappingConfigFieldsProps) {
     const t = useTranslations();
     const { env } = useEnvContext();
     const { isPaidUser } = usePaidStatus();
-    const [activeFixedRoleTagIndex, setActiveFixedRoleTagIndex] = useState<
-        number | null
-    >(null);
 
     const supportsMultipleRolesPerUser = isPaidUser(tierMatrix.fullRbac);
     const showSingleRoleDisclaimer =
@@ -94,6 +95,10 @@ export default function RoleMappingConfigFields({
         }
     }, [supportsMultipleRolesPerUser, fixedRoleNames, onFixedRoleNamesChange]);
 
+    const [fixedRolesActiveTagIndex, setFixedRolesActiveTagIndex] = useState<
+        number | null
+    >(null);
+
     const fixedRadioId = `${fieldIdPrefix}-fixed-roles-mode`;
     const builderRadioId = `${fieldIdPrefix}-mapping-builder-mode`;
     const rawRadioId = `${fieldIdPrefix}-raw-expression-mode`;
@@ -160,58 +165,94 @@ export default function RoleMappingConfigFields({
 
             {roleMappingMode === "fixedRoles" && (
                 <div className="space-y-2 min-w-0 max-w-full">
-                    <TagInput
-                        tags={fixedRoleNames.map((name) => ({
-                            id: name,
-                            text: name
-                        }))}
-                        setTags={(nextTags) => {
-                            const prevTags = fixedRoleNames.map((name) => ({
+                    {restrictToOrgRoles ? (
+                        <RolesSelector
+                            selectedRoles={fixedRoleNames.map((name) => ({
                                 id: name,
                                 text: name
-                            }));
-                            const next =
-                                typeof nextTags === "function"
-                                    ? nextTags(prevTags)
-                                    : nextTags;
+                            }))}
+                            mapRolesByName
+                            orgId={orgId as string}
+                            onSelectRoles={(nextTags) => {
+                                let names = [
+                                    ...new Set(nextTags.map((tag) => tag.text))
+                                ];
 
-                            let names = [
-                                ...new Set(next.map((tag) => tag.text))
-                            ];
-
-                            if (!supportsMultipleRolesPerUser) {
-                                if (
-                                    names.length === 0 &&
-                                    fixedRoleNames.length > 0
-                                ) {
-                                    onFixedRoleNamesChange([
-                                        fixedRoleNames[
-                                            fixedRoleNames.length - 1
-                                        ]!
-                                    ]);
-                                    return;
+                                if (!supportsMultipleRolesPerUser) {
+                                    if (
+                                        names.length === 0 &&
+                                        fixedRoleNames.length > 0
+                                    ) {
+                                        onFixedRoleNamesChange([
+                                            fixedRoleNames[
+                                                fixedRoleNames.length - 1
+                                            ]!
+                                        ]);
+                                        return;
+                                    }
+                                    if (names.length > 1) {
+                                        names = [names[names.length - 1]!];
+                                    }
                                 }
-                                if (names.length > 1) {
-                                    names = [names[names.length - 1]!];
-                                }
-                            }
 
-                            onFixedRoleNamesChange(names);
-                        }}
-                        activeTagIndex={activeFixedRoleTagIndex}
-                        setActiveTagIndex={setActiveFixedRoleTagIndex}
-                        placeholder={
-                            restrictToOrgRoles
-                                ? t("roleMappingFixedRolesPlaceholderSelect")
-                                : t("roleMappingFixedRolesPlaceholderFreeform")
-                        }
-                        enableAutocomplete={restrictToOrgRoles}
-                        autocompleteOptions={roleOptions}
-                        restrictTagsToAutocompleteOptions={restrictToOrgRoles}
-                        allowDuplicates={false}
-                        sortTags={true}
-                        size="sm"
-                    />
+                                onFixedRoleNamesChange(names);
+                            }}
+                        />
+                    ) : (
+                        <TagInput
+                            tags={fixedRoleNames.map((name) => ({
+                                id: name,
+                                text: name
+                            }))}
+                            setTags={(nextTags) => {
+                                const prev = fixedRoleNames.map((name) => ({
+                                    id: name,
+                                    text: name
+                                }));
+                                const next =
+                                    typeof nextTags === "function"
+                                        ? nextTags(prev)
+                                        : nextTags;
+
+                                let names = [
+                                    ...new Set(next.map((tag) => tag.text))
+                                ];
+
+                                if (!supportsMultipleRolesPerUser) {
+                                    if (
+                                        names.length === 0 &&
+                                        fixedRoleNames.length > 0
+                                    ) {
+                                        onFixedRoleNamesChange([
+                                            fixedRoleNames[
+                                                fixedRoleNames.length - 1
+                                            ]!
+                                        ]);
+                                        return;
+                                    }
+                                    if (names.length > 1) {
+                                        names = [names[names.length - 1]!];
+                                    }
+                                }
+
+                                onFixedRoleNamesChange(names);
+                            }}
+                            activeTagIndex={fixedRolesActiveTagIndex}
+                            setActiveTagIndex={setFixedRolesActiveTagIndex}
+                            placeholder={t(
+                                "roleMappingAssignRolesPlaceholderFreeform"
+                            )}
+                            enableAutocomplete={false}
+                            autocompleteOptions={roleOptions}
+                            restrictTagsToAutocompleteOptions={false}
+                            allowDuplicates={false}
+                            sortTags={true}
+                            size="sm"
+                            styleClasses={{
+                                inlineTagsContainer: "min-w-0 max-w-full"
+                            }}
+                        />
+                    )}
                     <FormDescription>
                         {showFreeformRoleNamesHint
                             ? t("roleMappingFixedRolesDescriptionDefaultPolicy")
@@ -261,6 +302,7 @@ export default function RoleMappingConfigFields({
                                 showFreeformRoleNamesHint={
                                     showFreeformRoleNamesHint
                                 }
+                                orgId={orgId}
                                 supportsMultipleRolesPerUser={
                                     supportsMultipleRolesPerUser
                                 }
@@ -337,7 +379,8 @@ function BuilderRuleRow({
     supportsMultipleRolesPerUser,
     showRemoveButton,
     onChange,
-    onRemove
+    onRemove,
+    orgId
 }: {
     rule: MappingBuilderRule;
     roleOptions: Tag[];
@@ -349,6 +392,7 @@ function BuilderRuleRow({
     showRemoveButton: boolean;
     onChange: (rule: MappingBuilderRule) => void;
     onRemove: () => void;
+    orgId?: string;
 }) {
     const t = useTranslations();
     const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
@@ -378,67 +422,109 @@ function BuilderRuleRow({
                     {t("roleMappingAssignRoles")}
                 </FormLabel>
                 <div className="min-w-0 max-w-full">
-                    <TagInput
-                        tags={rule.roleNames.map((name) => ({
-                            id: name,
-                            text: name
-                        }))}
-                        setTags={(nextTags) => {
-                            const prevRoleTags = rule.roleNames.map((name) => ({
+                    {restrictToOrgRoles ? (
+                        <RolesSelector
+                            selectedRoles={rule.roleNames.map((name) => ({
                                 id: name,
                                 text: name
-                            }));
-                            const next =
-                                typeof nextTags === "function"
-                                    ? nextTags(prevRoleTags)
-                                    : nextTags;
+                            }))}
+                            buttonText={t("roleMappingAssignRoles")}
+                            mapRolesByName
+                            orgId={orgId as string}
+                            onSelectRoles={(nextTags) => {
+                                let names = [
+                                    ...new Set(nextTags.map((tag) => tag.text))
+                                ];
 
-                            let names = [
-                                ...new Set(next.map((tag) => tag.text))
-                            ];
-
-                            if (!supportsMultipleRolesPerUser) {
-                                if (
-                                    names.length === 0 &&
-                                    rule.roleNames.length > 0
-                                ) {
-                                    onChange({
-                                        ...rule,
-                                        roleNames: [
-                                            rule.roleNames[
-                                                rule.roleNames.length - 1
-                                            ]!
-                                        ]
-                                    });
-                                    return;
+                                if (!supportsMultipleRolesPerUser) {
+                                    if (
+                                        names.length === 0 &&
+                                        rule.roleNames.length > 0
+                                    ) {
+                                        onChange({
+                                            ...rule,
+                                            roleNames: [
+                                                rule.roleNames[
+                                                    rule.roleNames.length - 1
+                                                ]!
+                                            ]
+                                        });
+                                        return;
+                                    }
+                                    if (names.length > 1) {
+                                        names = [names[names.length - 1]!];
+                                    }
                                 }
-                                if (names.length > 1) {
-                                    names = [names[names.length - 1]!];
-                                }
-                            }
 
-                            onChange({
-                                ...rule,
-                                roleNames: names
-                            });
-                        }}
-                        activeTagIndex={activeTagIndex}
-                        setActiveTagIndex={setActiveTagIndex}
-                        placeholder={
-                            restrictToOrgRoles
-                                ? t("roleMappingAssignRoles")
-                                : t("roleMappingAssignRolesPlaceholderFreeform")
-                        }
-                        enableAutocomplete={restrictToOrgRoles}
-                        autocompleteOptions={roleOptions}
-                        restrictTagsToAutocompleteOptions={restrictToOrgRoles}
-                        allowDuplicates={false}
-                        sortTags={true}
-                        size="sm"
-                        styleClasses={{
-                            inlineTagsContainer: "min-w-0 max-w-full"
-                        }}
-                    />
+                                onChange({
+                                    ...rule,
+                                    roleNames: names
+                                });
+                            }}
+                        />
+                    ) : (
+                        <TagInput
+                            tags={rule.roleNames.map((name) => ({
+                                id: name,
+                                text: name
+                            }))}
+                            setTags={(nextTags) => {
+                                const prevRoleTags = rule.roleNames.map(
+                                    (name) => ({
+                                        id: name,
+                                        text: name
+                                    })
+                                );
+                                const next =
+                                    typeof nextTags === "function"
+                                        ? nextTags(prevRoleTags)
+                                        : nextTags;
+
+                                let names = [
+                                    ...new Set(next.map((tag) => tag.text))
+                                ];
+
+                                if (!supportsMultipleRolesPerUser) {
+                                    if (
+                                        names.length === 0 &&
+                                        rule.roleNames.length > 0
+                                    ) {
+                                        onChange({
+                                            ...rule,
+                                            roleNames: [
+                                                rule.roleNames[
+                                                    rule.roleNames.length - 1
+                                                ]!
+                                            ]
+                                        });
+                                        return;
+                                    }
+                                    if (names.length > 1) {
+                                        names = [names[names.length - 1]!];
+                                    }
+                                }
+
+                                onChange({
+                                    ...rule,
+                                    roleNames: names
+                                });
+                            }}
+                            activeTagIndex={activeTagIndex}
+                            setActiveTagIndex={setActiveTagIndex}
+                            placeholder={t(
+                                "roleMappingAssignRolesPlaceholderFreeform"
+                            )}
+                            enableAutocomplete={false}
+                            autocompleteOptions={roleOptions}
+                            restrictTagsToAutocompleteOptions={false}
+                            allowDuplicates={false}
+                            sortTags={true}
+                            size="sm"
+                            styleClasses={{
+                                inlineTagsContainer: "min-w-0 max-w-full"
+                            }}
+                        />
+                    )}
                 </div>
                 {showFreeformRoleNamesHint && (
                     <p className="text-sm text-muted-foreground">

src/components/S3DestinationCredenza.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-
+import { useState, useEffect } from "react";
 import {
     Credenza,
     CredenzaBody,
@@ -12,13 +12,64 @@ import {
     CredenzaTitle
 } from "@app/components/Credenza";
 import { Button } from "@app/components/ui/button";
-import { ContactSalesBanner } from "@app/components/ContactSalesBanner";
+import { Input } from "@app/components/ui/input";
+import { Label } from "@app/components/ui/label";
+import { Switch } from "@app/components/ui/switch";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
+import { RadioGroup, RadioGroupItem } from "@app/components/ui/radio-group";
+import { Checkbox } from "@app/components/ui/checkbox";
+import { AlertCircle } from "lucide-react";
+import { Alert, AlertDescription } from "@app/components/ui/alert";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
 import { useTranslations } from "next-intl";
+import { Destination } from "@app/components/HttpDestinationCredenza";
+
+// ── Types ──────────────────────────────────────────────────────────────────────
+
+export type S3PayloadFormat = "json_array" | "ndjson" | "csv";
+
+export interface S3Config {
+    name: string;
+    accessKeyId: string;
+    secretAccessKey: string;
+    region: string;
+    bucket: string;
+    prefix: string;
+    endpoint: string;
+    format: S3PayloadFormat;
+    gzip: boolean;
+}
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+
+export const defaultS3Config = (): S3Config => ({
+    name: "",
+    accessKeyId: "",
+    secretAccessKey: "",
+    region: "us-east-1",
+    bucket: "",
+    prefix: "",
+    endpoint: "",
+    format: "json_array",
+    gzip: false
+});
+
+export function parseS3Config(raw: string): S3Config {
+    try {
+        return { ...defaultS3Config(), ...JSON.parse(raw) };
+    } catch {
+        return defaultS3Config();
+    }
+}
+
+// ── Component ──────────────────────────────────────────────────────────────────
 
 export interface S3DestinationCredenzaProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
-    editing: any;
+    editing: Destination | null;
     orgId: string;
     onSaved: () => void;
 }
@@ -28,18 +79,84 @@ export function S3DestinationCredenza({
     onOpenChange,
     editing,
     orgId,
-    onSaved,
+    onSaved
 }: S3DestinationCredenzaProps) {
+    const api = createApiClient(useEnvContext());
     const t = useTranslations();
 
+    const [saving, setSaving] = useState(false);
+    const [cfg, setCfg] = useState<S3Config>(defaultS3Config());
+    const [sendAccessLogs, setSendAccessLogs] = useState(false);
+    const [sendActionLogs, setSendActionLogs] = useState(false);
+    const [sendConnectionLogs, setSendConnectionLogs] = useState(false);
+    const [sendRequestLogs, setSendRequestLogs] = useState(false);
+
+    useEffect(() => {
+        if (open) {
+            setCfg(editing ? parseS3Config(editing.config) : defaultS3Config());
+            setSendAccessLogs(editing?.sendAccessLogs ?? false);
+            setSendActionLogs(editing?.sendActionLogs ?? false);
+            setSendConnectionLogs(editing?.sendConnectionLogs ?? false);
+            setSendRequestLogs(editing?.sendRequestLogs ?? false);
+        }
+    }, [open, editing]);
+
+    const update = (patch: Partial<S3Config>) =>
+        setCfg((prev) => ({ ...prev, ...patch }));
+
+    const isValid =
+        cfg.name.trim() !== "" &&
+        cfg.accessKeyId.trim() !== "" &&
+        cfg.secretAccessKey.trim() !== "" &&
+        cfg.region.trim() !== "" &&
+        cfg.bucket.trim() !== "";
+
+    async function handleSave() {
+        if (!isValid) return;
+        setSaving(true);
+        try {
+            const payload = {
+                type: "s3",
+                config: JSON.stringify(cfg),
+                sendAccessLogs,
+                sendActionLogs,
+                sendConnectionLogs,
+                sendRequestLogs
+            };
+            if (editing) {
+                await api.post(
+                    `/org/${orgId}/event-streaming-destination/${editing.destinationId}`,
+                    payload
+                );
+                toast({ title: t("s3DestUpdatedSuccess") });
+            } else {
+                await api.put(
+                    `/org/${orgId}/event-streaming-destination`,
+                    payload
+                );
+                toast({ title: t("s3DestCreatedSuccess") });
+            }
+            onSaved();
+            onOpenChange(false);
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: editing
+                    ? t("s3DestUpdateFailed")
+                    : t("s3DestCreateFailed"),
+                description: formatAxiosError(e, t("streamingUnexpectedError"))
+            });
+        } finally {
+            setSaving(false);
+        }
+    }
+
     return (
         <Credenza open={open} onOpenChange={onOpenChange}>
             <CredenzaContent className="sm:max-w-2xl">
                 <CredenzaHeader>
                     <CredenzaTitle>
-                        {editing
-                            ? t("S3DestEditTitle")
-                            : t("S3DestAddTitle")}
+                        {editing ? t("S3DestEditTitle") : t("S3DestAddTitle")}
                     </CredenzaTitle>
                     <CredenzaDescription>
                         {editing
@@ -49,13 +166,375 @@ export function S3DestinationCredenza({
                 </CredenzaHeader>
 
                 <CredenzaBody>
-                    <ContactSalesBanner />
+                    {editing?.lastError && (
+                        <Alert variant="destructive" className="mb-4">
+                            <AlertCircle className="h-4 w-4" />
+                            <AlertDescription className="break-words">
+                                {editing.lastError}
+                            </AlertDescription>
+                        </Alert>
+                    )}
+                    <HorizontalTabs
+                        clientSide
+                        items={[
+                            { title: t("s3DestTabSettings"), href: "" },
+                            { title: t("s3DestTabFormat"), href: "" },
+                            { title: t("httpDestTabLogs"), href: "" }
+                        ]}
+                    >
+                        {/* ── Settings tab ────────────────────────────── */}
+                        <div className="space-y-6 mt-4 p-1">
+                            {/* Name */}
+                            <div className="space-y-2">
+                                <Label htmlFor="s3-name">
+                                    {t("s3DestNameLabel")}
+                                </Label>
+                                <Input
+                                    id="s3-name"
+                                    placeholder={t("s3DestNamePlaceholder")}
+                                    value={cfg.name}
+                                    onChange={(e) =>
+                                        update({ name: e.target.value })
+                                    }
+                                />
+                            </div>
+
+                            {/* AWS Access Key ID */}
+                            <div className="space-y-2">
+                                <Label htmlFor="s3-access-key-id">
+                                    {t("s3DestAccessKeyIdLabel")}
+                                </Label>
+                                <Input
+                                    id="s3-access-key-id"
+                                    placeholder="AKIAIOSFODNN7EXAMPLE"
+                                    value={cfg.accessKeyId}
+                                    onChange={(e) =>
+                                        update({
+                                            accessKeyId: e.target.value
+                                        })
+                                    }
+                                    autoComplete="off"
+                                />
+                            </div>
+
+                            {/* AWS Secret Access Key */}
+                            <div className="space-y-2">
+                                <Label htmlFor="s3-secret-key">
+                                    {t("s3DestSecretAccessKeyLabel")}
+                                </Label>
+                                <Input
+                                    id="s3-secret-key"
+                                    type="password"
+                                    placeholder={t(
+                                        "s3DestSecretAccessKeyPlaceholder"
+                                    )}
+                                    value={cfg.secretAccessKey}
+                                    onChange={(e) =>
+                                        update({
+                                            secretAccessKey: e.target.value
+                                        })
+                                    }
+                                    autoComplete="new-password"
+                                />
+                            </div>
+
+                            {/* Region */}
+                            <div className="space-y-2">
+                                <Label htmlFor="s3-region">
+                                    {t("s3DestRegionLabel")}
+                                </Label>
+                                <Input
+                                    id="s3-region"
+                                    placeholder="us-east-1"
+                                    value={cfg.region}
+                                    onChange={(e) =>
+                                        update({ region: e.target.value })
+                                    }
+                                />
+                            </div>
+
+                            {/* Bucket */}
+                            <div className="space-y-2">
+                                <Label htmlFor="s3-bucket">
+                                    {t("s3DestBucketLabel")}
+                                </Label>
+                                <Input
+                                    id="s3-bucket"
+                                    placeholder="my-logs-bucket"
+                                    value={cfg.bucket}
+                                    onChange={(e) =>
+                                        update({ bucket: e.target.value })
+                                    }
+                                />
+                            </div>
+
+                            {/* Prefix */}
+                            <div className="space-y-2">
+                                <Label htmlFor="s3-prefix">
+                                    {t("s3DestPrefixLabel")}
+                                </Label>
+                                <Input
+                                    id="s3-prefix"
+                                    placeholder="pangolin/logs"
+                                    value={cfg.prefix}
+                                    onChange={(e) =>
+                                        update({ prefix: e.target.value })
+                                    }
+                                />
+                                <p className="text-xs text-muted-foreground">
+                                    {t("s3DestPrefixDescription")}
+                                </p>
+                            </div>
+
+                            {/* Custom endpoint (optional – for S3-compatible storage) */}
+                            <div className="space-y-2">
+                                <Label htmlFor="s3-endpoint">
+                                    {t("s3DestEndpointLabel")}
+                                </Label>
+                                <Input
+                                    id="s3-endpoint"
+                                    placeholder="https://s3.example.com"
+                                    value={cfg.endpoint}
+                                    onChange={(e) =>
+                                        update({ endpoint: e.target.value })
+                                    }
+                                />
+                                <p className="text-xs text-muted-foreground">
+                                    {t("s3DestEndpointDescription")}
+                                </p>
+                            </div>
+                        </div>
+
+                        {/* ── Format tab ───────────────────────────────── */}
+                        <div className="space-y-6 mt-4 p-1">
+                            {/* Gzip compression toggle */}
+                            <div className="flex items-start gap-3 rounded-md border p-3">
+                                <Switch
+                                    id="s3-gzip"
+                                    checked={cfg.gzip}
+                                    onCheckedChange={(v) => update({ gzip: v })}
+                                    className="mt-0.5"
+                                />
+                                <div>
+                                    <Label
+                                        htmlFor="s3-gzip"
+                                        className="cursor-pointer font-medium"
+                                    >
+                                        {t("s3DestGzipLabel")}
+                                    </Label>
+                                    <p className="text-xs text-muted-foreground mt-0.5">
+                                        {t("s3DestGzipDescription")}
+                                    </p>
+                                </div>
+                            </div>
+
+                            {/* Payload format selector */}
+                            <div className="space-y-3">
+                                <div>
+                                    <label className="font-medium block">
+                                        {t("s3DestFormatTitle")}
+                                    </label>
+                                    <p className="text-sm text-muted-foreground mt-0.5">
+                                        {t("s3DestFormatDescription")}
+                                    </p>
+                                </div>
+
+                                <RadioGroup
+                                    value={cfg.format}
+                                    onValueChange={(v) =>
+                                        update({
+                                            format: v as S3PayloadFormat
+                                        })
+                                    }
+                                    className="gap-2"
+                                >
+                                    {/* JSON Array */}
+                                    <label className="flex items-start gap-3 rounded-md border p-3 cursor-pointer has-[:checked]:border-primary has-[:checked]:bg-primary/5">
+                                        <RadioGroupItem
+                                            value="json_array"
+                                            className="mt-0.5"
+                                        />
+                                        <div>
+                                            <p className="text-sm font-medium leading-none">
+                                                {t(
+                                                    "httpDestFormatJsonArrayTitle"
+                                                )}
+                                            </p>
+                                            <p className="text-xs text-muted-foreground mt-1">
+                                                {t(
+                                                    "s3DestFormatJsonArrayDescription"
+                                                )}
+                                            </p>
+                                        </div>
+                                    </label>
+
+                                    {/* NDJSON */}
+                                    <label className="flex items-start gap-3 rounded-md border p-3 cursor-pointer has-[:checked]:border-primary has-[:checked]:bg-primary/5">
+                                        <RadioGroupItem
+                                            value="ndjson"
+                                            className="mt-0.5"
+                                        />
+                                        <div>
+                                            <p className="text-sm font-medium leading-none">
+                                                {t("httpDestFormatNdjsonTitle")}
+                                            </p>
+                                            <p className="text-xs text-muted-foreground mt-1">
+                                                {t(
+                                                    "s3DestFormatNdjsonDescription"
+                                                )}
+                                            </p>
+                                        </div>
+                                    </label>
+
+                                    {/* CSV */}
+                                    <label className="flex items-start gap-3 rounded-md border p-3 cursor-pointer has-[:checked]:border-primary has-[:checked]:bg-primary/5">
+                                        <RadioGroupItem
+                                            value="csv"
+                                            className="mt-0.5"
+                                        />
+                                        <div>
+                                            <p className="text-sm font-medium leading-none">
+                                                {t("s3DestFormatCsvTitle")}
+                                            </p>
+                                            <p className="text-xs text-muted-foreground mt-1">
+                                                {t(
+                                                    "s3DestFormatCsvDescription"
+                                                )}
+                                            </p>
+                                        </div>
+                                    </label>
+                                </RadioGroup>
+                            </div>
+                        </div>
+
+                        {/* ── Logs tab ──────────────────────────────────── */}
+                        <div className="space-y-6 mt-4 p-1">
+                            <div>
+                                <label className="font-medium block">
+                                    {t("httpDestLogTypesTitle")}
+                                </label>
+                                <p className="text-sm text-muted-foreground mt-0.5">
+                                    {t("httpDestLogTypesDescription")}
+                                </p>
+                            </div>
+
+                            <div className="space-y-3">
+                                <div className="flex items-start gap-3 rounded-md border p-3">
+                                    <Checkbox
+                                        id="s3-log-access"
+                                        checked={sendAccessLogs}
+                                        onCheckedChange={(v) =>
+                                            setSendAccessLogs(v === true)
+                                        }
+                                        className="mt-0.5"
+                                    />
+                                    <div>
+                                        <Label
+                                            htmlFor="s3-log-access"
+                                            className="cursor-pointer font-medium"
+                                        >
+                                            {t("httpDestAccessLogsTitle")}
+                                        </Label>
+                                        <p className="text-xs text-muted-foreground mt-0.5">
+                                            {t("httpDestAccessLogsDescription")}
+                                        </p>
+                                    </div>
+                                </div>
+
+                                <div className="flex items-start gap-3 rounded-md border p-3">
+                                    <Checkbox
+                                        id="s3-log-action"
+                                        checked={sendActionLogs}
+                                        onCheckedChange={(v) =>
+                                            setSendActionLogs(v === true)
+                                        }
+                                        className="mt-0.5"
+                                    />
+                                    <div>
+                                        <Label
+                                            htmlFor="s3-log-action"
+                                            className="cursor-pointer font-medium"
+                                        >
+                                            {t("httpDestActionLogsTitle")}
+                                        </Label>
+                                        <p className="text-xs text-muted-foreground mt-0.5">
+                                            {t("httpDestActionLogsDescription")}
+                                        </p>
+                                    </div>
+                                </div>
+
+                                <div className="flex items-start gap-3 rounded-md border p-3">
+                                    <Checkbox
+                                        id="s3-log-connection"
+                                        checked={sendConnectionLogs}
+                                        onCheckedChange={(v) =>
+                                            setSendConnectionLogs(v === true)
+                                        }
+                                        className="mt-0.5"
+                                    />
+                                    <div>
+                                        <Label
+                                            htmlFor="s3-log-connection"
+                                            className="cursor-pointer font-medium"
+                                        >
+                                            {t("httpDestConnectionLogsTitle")}
+                                        </Label>
+                                        <p className="text-xs text-muted-foreground mt-0.5">
+                                            {t(
+                                                "httpDestConnectionLogsDescription"
+                                            )}
+                                        </p>
+                                    </div>
+                                </div>
+
+                                <div className="flex items-start gap-3 rounded-md border p-3">
+                                    <Checkbox
+                                        id="s3-log-request"
+                                        checked={sendRequestLogs}
+                                        onCheckedChange={(v) =>
+                                            setSendRequestLogs(v === true)
+                                        }
+                                        className="mt-0.5"
+                                    />
+                                    <div>
+                                        <Label
+                                            htmlFor="s3-log-request"
+                                            className="cursor-pointer font-medium"
+                                        >
+                                            {t("httpDestRequestLogsTitle")}
+                                        </Label>
+                                        <p className="text-xs text-muted-foreground mt-0.5">
+                                            {t(
+                                                "httpDestRequestLogsDescription"
+                                            )}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </HorizontalTabs>
                 </CredenzaBody>
 
                 <CredenzaFooter>
                     <CredenzaClose asChild>
-                        <Button variant="outline">{t("cancel")}</Button>
+                        <Button
+                            type="button"
+                            variant="outline"
+                            disabled={saving}
+                        >
+                            {t("cancel")}
+                        </Button>
                     </CredenzaClose>
+                    <Button
+                        type="button"
+                        onClick={handleSave}
+                        loading={saving}
+                        disabled={!isValid || saving}
+                    >
+                        {editing
+                            ? t("s3DestSaveChanges")
+                            : t("s3DestCreateDestination")}
+                    </Button>
                 </CredenzaFooter>
             </CredenzaContent>
         </Credenza>

src/components/ShareLinksTable.tsx

@@ -61,6 +61,8 @@ export default function ShareLinksTable({
     const api = createApiClient(useEnvContext());
 
     const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [selectedLink, setSelectedLink] = useState<ShareLinkRow | null>(null);
     const [rows, setRows] = useState<ShareLinkRow[]>(shareLinks);
 
     const [isRefreshing, setIsRefreshing] = useState(false);
@@ -92,6 +94,7 @@ export default function ShareLinksTable({
                 title: t("shareErrorDelete"),
                 description: formatAxiosError(e, t("shareErrorDeleteMessage"))
             });
+            throw e;
         });
 
         const newRows = rows.filter((r) => r.accessTokenId !== id);
@@ -293,9 +296,10 @@ export default function ShareLinksTable({
                         {/* </DropdownMenu> */}
                         <Button
                             variant={"outline"}
-                            onClick={() =>
-                                deleteSharelink(row.original.accessTokenId)
-                            }
+                            onClick={() => {
+                                setSelectedLink(resourceRow);
+                                setIsDeleteModalOpen(true);
+                            }}
                         >
                             {t("delete")}
                         </Button>
@@ -307,6 +311,30 @@ export default function ShareLinksTable({
 
     return (
         <>
+            {selectedLink && (
+                <ConfirmDeleteDialog
+                    open={isDeleteModalOpen}
+                    setOpen={(val) => {
+                        setIsDeleteModalOpen(val);
+                        if (!val) setSelectedLink(null);
+                    }}
+                    dialog={
+                        <div className="space-y-2">
+                            <p>{t("shareQuestionRemove")}</p>
+                            <p>{t("shareMessageRemove")}</p>
+                        </div>
+                    }
+                    buttonText={t("shareDeleteConfirm")}
+                    onConfirm={async () =>
+                        deleteSharelink(selectedLink.accessTokenId)
+                    }
+                    string={
+                        selectedLink.title || selectedLink.resourceName
+                    }
+                    title={t("shareDelete")}
+                />
+            )}
+
             <CreateShareLinkForm
                 open={isCreateModalOpen}
                 setOpen={setIsCreateModalOpen}

src/components/ShowTrialCard.tsx

@@ -17,9 +17,11 @@ import { useTranslations } from "next-intl";
 const TRIAL_DURATION_DAYS = 10;
 
 export default function ShowTrialCard({
-    isCollapsed
+    isCollapsed,
+    isOwner = false
 }: {
     isCollapsed?: boolean;
+    isOwner?: boolean;
 }) {
     const context = useSubscriptionStatusContext();
     const params = useParams();
@@ -32,53 +34,55 @@ export default function ShowTrialCard({
 
     const now = Date.now();
     const remainingMs = trialExpiresAt - now;
-    const remainingDays = Math.max(0, Math.ceil(remainingMs / (1000 * 60 * 60 * 24)));
+    const remainingDays = Math.max(
+        0,
+        Math.ceil(remainingMs / (1000 * 60 * 60 * 24))
+    );
     const totalMs = TRIAL_DURATION_DAYS * 24 * 60 * 60 * 1000;
-    const progressPct = Math.min(100, Math.max(0, ((now - (trialExpiresAt - totalMs)) / totalMs) * 100));
+    const progressPct = Math.min(
+        100,
+        Math.max(0, ((now - (trialExpiresAt - totalMs)) / totalMs) * 100)
+    );
     // Inverted: full bar at start, drains to empty as trial ends
     const displayPct = 100 - progressPct;
 
     const billingHref = orgId ? `/${orgId}/settings/billing` : "/";
 
     if (isCollapsed) {
-        return (
+        const icon = (
             <TooltipProvider>
                 <Tooltip>
                     <TooltipTrigger asChild>
-                        <Link
-                            href={billingHref}
-                            className="flex items-center justify-center rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 transition-colors"
-                        >
+                        <span className="flex items-center justify-center rounded-md p-2 text-muted-foreground">
                             <ClockIcon className="h-4 w-4 flex-none" />
-                        </Link>
+                        </span>
                     </TooltipTrigger>
                     <TooltipContent side="right" sideOffset={8}>
                         <p>
                             {remainingDays === 0
                                 ? t("trialExpired")
-                                : t("trialDaysLeftShort", { days: remainingDays })}
+                                : t("trialDaysLeftShort", {
+                                      days: remainingDays
+                                  })}
                         </p>
                     </TooltipContent>
                 </Tooltip>
             </TooltipProvider>
         );
+
+        if (isOwner) {
+            return <Link href={billingHref}>{icon}</Link>;
+        }
+
+        return icon;
     }
 
-    return (
-        <Link
-            href={billingHref}
-            className={cn(
-                "group cursor-pointer block",
-                "rounded-md border bg-secondary p-2 py-3 w-full flex flex-col gap-2 text-sm",
-                "transition duration-200 ease-in-out hover:bg-secondary/80 dark:hover:bg-secondary/60"
-            )}
-        >
+    const cardContent = (
+        <>
             <div className="flex items-center gap-2">
                 <ClockIcon className="flex-none size-4 text-muted-foreground" />
                 <p className="font-medium flex-1 leading-tight">
-                    {remainingDays === 0
-                        ? t("trialExpired")
-                        : t("trialActive")}
+                    {remainingDays === 0 ? t("trialExpired") : t("trialActive")}
                 </p>
             </div>
             <div className="flex flex-col gap-1.5">
@@ -88,11 +92,37 @@ export default function ShowTrialCard({
                         ? t("trialHasEnded")
                         : t("trialDaysRemaining", { count: remainingDays })}
                 </small>
-                <div className="inline-flex items-center gap-1 text-xs text-muted-foreground group-hover:text-foreground transition-colors">
-                    <span>{t("trialGoToBilling")}</span>
-                    <ArrowRight className="flex-none size-3" />
-                </div>
+                {isOwner && (
+                    <div className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+                        <span>{t("trialGoToBilling")}</span>
+                        <ArrowRight className="flex-none size-3" />
+                    </div>
+                )}
             </div>
-        </Link>
+        </>
+    );
+
+    if (isOwner) {
+        return (
+            <Link
+                href={billingHref}
+                className={cn(
+                    "group cursor-pointer block",
+                    "rounded-md border bg-secondary p-2 py-3 w-full flex flex-col gap-2 text-sm"
+                )}
+            >
+                {cardContent}
+            </Link>
+        );
+    }
+
+    return (
+        <div
+            className={cn(
+                "rounded-md border bg-secondary p-2 py-3 w-full flex flex-col gap-2 text-sm"
+            )}
+        >
+            {cardContent}
+        </div>
     );
 }

src/components/SmartLoginForm.tsx

@@ -284,7 +284,7 @@ export default function SmartLoginForm({
 
                 {orgSignIn && (
                     <>
-                        <div className="relative my-4">
+                        <div className="relative">
                             <div className="absolute inset-0 flex items-center">
                                 <Separator />
                             </div>

src/components/SmartLoginOrgSelector.tsx

@@ -147,7 +147,7 @@ export default function SmartLoginOrgSelector({
             const response = await generateOidcUrlProxy(
                 idpId,
                 safeRedirect,
-                orgId,
+                undefined,
                 forceLogin
             );
 
@@ -207,7 +207,7 @@ export default function SmartLoginOrgSelector({
             />
 
             {hasInternalAccount && (
-                <div className="mt-3">
+                <div className="mt-4">
                     <Button
                         type="button"
                         className="w-full"
@@ -237,7 +237,7 @@ export default function SmartLoginOrgSelector({
                         </div>
                     </div>
 
-                    <div className="space-y-2">
+                    <div className="space-y-4">
                         {params.get("gotoapp") ? (
                             <Button
                                 type="button"

src/components/UptimeAlertSection.tsx

@@ -1,18 +1,5 @@
 "use client";
 
-import { useState, useMemo } from "react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import Link from "next/link";
-import { BellPlus, BellRing } from "lucide-react";
-import {
-    SettingsSection,
-    SettingsSectionHeader,
-    SettingsSectionTitle,
-    SettingsSectionDescription,
-    SettingsSectionBody
-} from "@app/components/Settings";
-import UptimeBar from "@app/components/UptimeBar";
-import { Button } from "@app/components/ui/button";
 import {
     Credenza,
     CredenzaBody,
@@ -23,18 +10,32 @@ import {
     CredenzaHeader,
     CredenzaTitle
 } from "@app/components/Credenza";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import {
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import UptimeBar from "@app/components/UptimeBar";
+import { TagInput, type Tag } from "@app/components/tags/tag-input";
+import { Button } from "@app/components/ui/button";
 import { Input } from "@app/components/ui/input";
 import { Label } from "@app/components/ui/label";
-import { TagInput, type Tag } from "@app/components/tags/tag-input";
-import { getUserDisplayName } from "@app/lib/getUserDisplayName";
-import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
-import { toast } from "@app/hooks/useToast";
-import { orgQueries } from "@app/lib/queries";
-import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { orgQueries } from "@app/lib/queries";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { BellPlus, BellRing } from "lucide-react";
 import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { useState } from "react";
+import { RolesSelector } from "./roles-selector";
+import { UsersSelector } from "./users-selector";
 
 interface UptimeAlertSectionProps {
     orgId: string;
@@ -52,10 +53,12 @@ export default function UptimeAlertSection({
     days = 90
 }: UptimeAlertSectionProps) {
     const t = useTranslations();
-    const api = createApiClient(useEnvContext());
+    const envContext = useEnvContext();
+    const api = createApiClient(envContext);
     const queryClient = useQueryClient();
     const { isPaidUser } = usePaidStatus();
     const isPaid = isPaidUser(tierMatrix.alertingRules);
+    const { env } = envContext;
 
     const [open, setOpen] = useState(false);
     const [name, setName] = useState(
@@ -64,12 +67,7 @@ export default function UptimeAlertSection({
     const [userTags, setUserTags] = useState<Tag[]>([]);
     const [roleTags, setRoleTags] = useState<Tag[]>([]);
     const [emailTags, setEmailTags] = useState<Tag[]>([]);
-    const [activeUserTagIndex, setActiveUserTagIndex] = useState<number | null>(
-        null
-    );
-    const [activeRoleTagIndex, setActiveRoleTagIndex] = useState<number | null>(
-        null
-    );
+
     const [activeEmailTagIndex, setActiveEmailTagIndex] = useState<
         number | null
     >(null);
@@ -80,27 +78,6 @@ export default function UptimeAlertSection({
         enabled: isPaid
     });
 
-    const { data: orgUsers = [] } = useQuery(orgQueries.users({ orgId }));
-    const { data: orgRoles = [] } = useQuery(orgQueries.roles({ orgId }));
-
-    const allUsers = useMemo(
-        () =>
-            orgUsers.map((u) => ({
-                id: String(u.id),
-                text: getUserDisplayName({
-                    email: u.email,
-                    name: u.name,
-                    username: u.username
-                })
-            })),
-        [orgUsers]
-    );
-
-    const allRoles = useMemo(
-        () => orgRoles.map((r) => ({ id: String(r.roleId), text: r.name })),
-        [orgRoles]
-    );
-
     const hasRules = (alertRules?.length ?? 0) > 0;
 
     async function handleSubmit() {
@@ -201,7 +178,9 @@ export default function UptimeAlertSection({
                                 {t("uptimeSectionDescription", { days })}
                             </SettingsSectionDescription>
                         </div>
-                        {alertButton}
+                        {!env.flags.disableEnterpriseFeatures
+                            ? alertButton
+                            : null}
                     </div>
                 </SettingsSectionHeader>
                 <SettingsSectionBody>
@@ -227,10 +206,16 @@ export default function UptimeAlertSection({
                     </CredenzaHeader>
                     <CredenzaBody>
                         <div className="space-y-4">
-                            <PaidFeaturesAlert tiers={tierMatrix.alertingRules} />
+                            <PaidFeaturesAlert
+                                tiers={tierMatrix.alertingRules}
+                            />
                             <fieldset
                                 disabled={!isPaid}
-                                className={!isPaid ? "opacity-50 pointer-events-none" : ""}
+                                className={
+                                    !isPaid
+                                        ? "opacity-50 pointer-events-none"
+                                        : ""
+                                }
                             >
                                 <div className="space-y-4">
                                     <div className="space-y-2">
@@ -240,65 +225,53 @@ export default function UptimeAlertSection({
                                         <Input
                                             id="alert-name"
                                             value={name}
-                                            onChange={(e) => setName(e.target.value)}
-                                            placeholder={t("uptimeAlertNamePlaceholder")}
+                                            onChange={(e) =>
+                                                setName(e.target.value)
+                                            }
+                                            placeholder={t(
+                                                "uptimeAlertNamePlaceholder"
+                                            )}
                                         />
                                     </div>
                                     <div className="space-y-2">
-                                        <Label>{t("alertingNotifyUsers")}</Label>
-                                        <TagInput
-                                            activeTagIndex={activeUserTagIndex}
-                                            setActiveTagIndex={setActiveUserTagIndex}
-                                            placeholder={t("alertingSelectUsers")}
-                                            size="sm"
-                                            tags={userTags}
-                                            setTags={(newTags) => {
-                                                const next =
-                                                    typeof newTags === "function"
-                                                        ? newTags(userTags)
-                                                        : newTags;
-                                                setUserTags(next as Tag[]);
-                                            }}
-                                            enableAutocomplete
-                                            autocompleteOptions={allUsers}
-                                            restrictTagsToAutocompleteOptions
-                                            allowDuplicates={false}
-                                            sortTags
+                                        <Label>
+                                            {t("alertingNotifyUsers")}
+                                        </Label>
+                                        <UsersSelector
+                                            selectedUsers={userTags}
+                                            orgId={orgId}
+                                            onSelectUsers={setUserTags}
                                         />
                                     </div>
                                     <div className="space-y-2">
-                                        <Label>{t("alertingNotifyRoles")}</Label>
-                                        <TagInput
-                                            activeTagIndex={activeRoleTagIndex}
-                                            setActiveTagIndex={setActiveRoleTagIndex}
-                                            placeholder={t("alertingSelectRoles")}
-                                            size="sm"
-                                            tags={roleTags}
-                                            setTags={(newTags) => {
-                                                const next =
-                                                    typeof newTags === "function"
-                                                        ? newTags(roleTags)
-                                                        : newTags;
-                                                setRoleTags(next as Tag[]);
-                                            }}
-                                            enableAutocomplete
-                                            autocompleteOptions={allRoles}
-                                            restrictTagsToAutocompleteOptions
-                                            allowDuplicates={false}
-                                            sortTags
+                                        <Label>
+                                            {t("alertingNotifyRoles")}
+                                        </Label>
+                                        <RolesSelector
+                                            selectedRoles={roleTags}
+                                            restrictAdminRole
+                                            orgId={orgId}
+                                            onSelectRoles={setRoleTags}
                                         />
                                     </div>
                                     <div className="space-y-2">
-                                        <Label>{t("uptimeAdditionalEmails")}</Label>
+                                        <Label>
+                                            {t("uptimeAdditionalEmails")}
+                                        </Label>
                                         <TagInput
                                             activeTagIndex={activeEmailTagIndex}
-                                            setActiveTagIndex={setActiveEmailTagIndex}
-                                            placeholder={t("alertingEmailPlaceholder")}
+                                            setActiveTagIndex={
+                                                setActiveEmailTagIndex
+                                            }
+                                            placeholder={t(
+                                                "alertingEmailPlaceholder"
+                                            )}
                                             size="sm"
                                             tags={emailTags}
                                             setTags={(newTags) => {
                                                 const next =
-                                                    typeof newTags === "function"
+                                                    typeof newTags ===
+                                                    "function"
                                                         ? newTags(emailTags)
                                                         : newTags;
                                                 setEmailTags(next as Tag[]);
@@ -306,7 +279,9 @@ export default function UptimeAlertSection({
                                             allowDuplicates={false}
                                             sortTags
                                             validateTag={(tag) =>
-                                                /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(tag)
+                                                /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(
+                                                    tag
+                                                )
                                             }
                                             delimiterList={[",", "Enter"]}
                                         />

src/components/UsersTable.tsx

@@ -99,6 +99,14 @@ export default function UsersTable({
         ];
     }, [searchParams.toString()]);
 
+    const isRemovingSelf = useMemo(() => {
+        if (!selectedUser || !user) return false;
+        return (
+            `${selectedUser.username}-${selectedUser.idpId}` ===
+            `${user.username}-${user.idpId}`
+        );
+    }, [selectedUser, user]);
+
     function handleFilterChange(
         column: string,
         value: string | undefined | null
@@ -223,10 +231,7 @@ export default function UsersTable({
             header: () => <span className="p-3"></span>,
             cell: ({ row }) => {
                 const userRow = row.original;
-                const isCurrentUser =
-                    `${userRow.username}-${userRow.idpId}` ===
-                    `${user?.username}-${user?.idpId}`;
-                const isDisabled = userRow.isOwner || isCurrentUser;
+                const canRemoveFromOrg = !userRow.isOwner;
                 return (
                     <div className="flex items-center justify-end">
                         <div>
@@ -235,7 +240,6 @@ export default function UsersTable({
                                     <Button
                                         variant="ghost"
                                         className="h-8 w-8 p-0"
-                                        disabled={isDisabled}
                                     >
                                         <span className="sr-only">
                                             {t("openMenu")}
@@ -247,16 +251,12 @@ export default function UsersTable({
                                     <Link
                                         href={`/${org?.org.orgId}/settings/access/users/${userRow.id}`}
                                         className="block w-full"
-                                        aria-disabled={isDisabled}
-                                        onClick={(e) =>
-                                            isDisabled && e.preventDefault()
-                                        }
                                     >
-                                        <DropdownMenuItem disabled={isDisabled}>
+                                        <DropdownMenuItem>
                                             {t("accessUserManage")}
                                         </DropdownMenuItem>
                                     </Link>
-                                    {!isDisabled && (
+                                    {canRemoveFromOrg && (
                                         <DropdownMenuItem
                                             onClick={() => {
                                                 setIsDeleteModalOpen(true);
@@ -271,25 +271,14 @@ export default function UsersTable({
                                 </DropdownMenuContent>
                             </DropdownMenu>
                         </div>
-                        {isDisabled ? (
-                            <Button
-                                variant={"outline"}
-                                className="ml-2"
-                                disabled
-                            >
+                        <Link
+                            href={`/${org?.org.orgId}/settings/access/users/${userRow.id}`}
+                        >
+                            <Button variant={"outline"} className="ml-2">
                                 {t("manage")}
                                 <ArrowRight className="ml-2 w-4 h-4" />
                             </Button>
-                        ) : (
-                            <Link
-                                href={`/${org?.org.orgId}/settings/access/users/${userRow.id}`}
-                            >
-                                <Button variant={"outline"} className="ml-2">
-                                    {t("manage")}
-                                    <ArrowRight className="ml-2 w-4 h-4" />
-                                </Button>
-                            </Link>
-                        )}
+                        </Link>
                     </div>
                 );
             }
@@ -359,22 +348,45 @@ export default function UsersTable({
                 }}
                 dialog={
                     <div className="space-y-2">
-                        <p>{t("userQuestionOrgRemove")}</p>
-                        <p>{t("userMessageOrgRemove")}</p>
+                        <p>
+                            {t(
+                                isRemovingSelf
+                                    ? "userQuestionOrgRemoveSelf"
+                                    : "userQuestionOrgRemove"
+                            )}
+                        </p>
+                        <p>
+                            {t(
+                                isRemovingSelf
+                                    ? "userMessageOrgRemoveSelf"
+                                    : "userMessageOrgRemove"
+                            )}
+                        </p>
                     </div>
                 }
-                buttonText={t("userRemoveOrgConfirm")}
+                buttonText={t(
+                    isRemovingSelf
+                        ? "userRemoveOrgConfirmSelf"
+                        : "userRemoveOrgConfirm"
+                )}
+                warningText={
+                    isRemovingSelf ? t("userRemoveOrgSelfWarning") : undefined
+                }
                 onConfirm={async () => startTransition(removeUser)}
                 string={
-                    selectedUser
-                        ? getUserDisplayName({
-                              email: selectedUser.email,
-                              name: selectedUser.name,
-                              username: selectedUser.username
-                          })
-                        : ""
+                    isRemovingSelf
+                        ? t("userRemoveOrgConfirmPhraseSelf")
+                        : selectedUser
+                          ? getUserDisplayName({
+                                email: selectedUser.email,
+                                name: selectedUser.name,
+                                username: selectedUser.username
+                            })
+                          : ""
                 }
-                title={t("userRemoveOrg")}
+                title={t(
+                    isRemovingSelf ? "userRemoveOrgSelf" : "userRemoveOrg"
+                )}
             />
 
             <ControlledDataTable

src/components/ValidateOidcToken.tsx

@@ -17,6 +17,7 @@ import { Loader2, CheckCircle2, AlertCircle } from "lucide-react";
 import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
 import { useTranslations } from "next-intl";
 import { validateOidcUrlCallbackProxy } from "@app/actions/server";
+import { build } from "@server/build";
 
 type ValidateOidcTokenParams = {
     orgId: string;
@@ -96,7 +97,7 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
                 stateCookie: props.stateCookie
             });
 
-            if (isLicenseViolation()) {
+            if (build === "enterprise" && isLicenseViolation()) {
                 await new Promise((resolve) => setTimeout(resolve, 5000));
             }
 

src/components/alert-rule-editor/AlertRuleFields.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import { ContactSalesBanner } from "@app/components/ContactSalesBanner";
+import { StrategySelect } from "@app/components/StrategySelect";
+import { TagInput, type Tag } from "@app/components/tags/tag-input";
 import { Button } from "@app/components/ui/button";
 import { Checkbox } from "@app/components/ui/checkbox";
 import {
@@ -21,11 +24,13 @@ import {
 import { Input } from "@app/components/ui/input";
 import { Switch } from "@app/components/ui/switch";
 import { Textarea } from "@app/components/ui/textarea";
+import { Label } from "@app/components/ui/label";
 import {
     Popover,
     PopoverContent,
     PopoverTrigger
 } from "@app/components/ui/popover";
+import { RadioGroup, RadioGroupItem } from "@app/components/ui/radio-group";
 import {
     Select,
     SelectContent,
@@ -33,24 +38,21 @@ import {
     SelectTrigger,
     SelectValue
 } from "@app/components/ui/select";
-import { RadioGroup, RadioGroupItem } from "@app/components/ui/radio-group";
-import { Label } from "@app/components/ui/label";
-import { StrategySelect } from "@app/components/StrategySelect";
-import { TagInput, type Tag } from "@app/components/tags/tag-input";
-import { getUserDisplayName } from "@app/lib/getUserDisplayName";
 import {
     type AlertRuleFormAction,
     type AlertRuleFormValues
 } from "@app/lib/alertRuleForm";
+import { getUserDisplayName } from "@app/lib/getUserDisplayName";
 import { orgQueries } from "@app/lib/queries";
 import { useQuery } from "@tanstack/react-query";
-import { ContactSalesBanner } from "@app/components/ContactSalesBanner";
-import { Bell, Globe, ChevronsUpDown, Plus, Trash2 } from "lucide-react";
+import { Bell, ChevronsUpDown, Globe, Plus, Trash2 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useEffect, useMemo, useRef, useState } from "react";
 import type { Control, UseFormReturn } from "react-hook-form";
 import { useFormContext, useWatch } from "react-hook-form";
 import { useDebounce } from "use-debounce";
+import { RolesSelector } from "../roles-selector";
+import { UsersSelector } from "../users-selector";
 
 export function AddActionPanel({
     onAdd
@@ -498,12 +500,6 @@ function NotifyActionFields({
     const t = useTranslations();
 
     const [emailActiveIdx, setEmailActiveIdx] = useState<number | null>(null);
-    const [activeUsersTagIndex, setActiveUsersTagIndex] = useState<
-        number | null
-    >(null);
-    const [activeRolesTagIndex, setActiveRolesTagIndex] = useState<
-        number | null
-    >(null);
 
     const { data: orgUsers = [], isLoading: isLoadingUsers } = useQuery(
         orgQueries.users({ orgId })
@@ -574,14 +570,6 @@ function NotifyActionFields({
         hasResolvedTagsRef.current = true;
     }, [isLoadingUsers, isLoadingRoles, allUsers, allRoles]);
 
-    const userTags = (useWatch({
-        control,
-        name: `actions.${index}.userTags`
-    }) ?? []) as Tag[];
-    const roleTags = (useWatch({
-        control,
-        name: `actions.${index}.roleTags`
-    }) ?? []) as Tag[];
     const emailTags = (useWatch({
         control,
         name: `actions.${index}.emailTags`
@@ -596,29 +584,16 @@ function NotifyActionFields({
                     <FormItem className="flex flex-col items-start">
                         <FormLabel>{t("alertingNotifyUsers")}</FormLabel>
                         <FormControl>
-                            <TagInput
-                                {...field}
-                                activeTagIndex={activeUsersTagIndex}
-                                setActiveTagIndex={setActiveUsersTagIndex}
-                                placeholder={t("alertingSelectUsers")}
-                                size="sm"
-                                tags={userTags}
-                                setTags={(newTags) => {
-                                    const next =
-                                        typeof newTags === "function"
-                                            ? newTags(userTags)
-                                            : newTags;
+                            <UsersSelector
+                                selectedUsers={field.value ?? []}
+                                orgId={orgId}
+                                onSelectUsers={(newUsers) => {
                                     form.setValue(
                                         `actions.${index}.userTags`,
-                                        next as Tag[],
+                                        newUsers as [Tag, ...Tag[]],
                                         { shouldDirty: true }
                                     );
                                 }}
-                                enableAutocomplete={true}
-                                autocompleteOptions={allUsers}
-                                allowDuplicates={false}
-                                restrictTagsToAutocompleteOptions={true}
-                                sortTags={true}
                             />
                         </FormControl>
                         <FormMessage />
@@ -632,29 +607,17 @@ function NotifyActionFields({
                     <FormItem className="flex flex-col items-start">
                         <FormLabel>{t("alertingNotifyRoles")}</FormLabel>
                         <FormControl>
-                            <TagInput
-                                {...field}
-                                activeTagIndex={activeRolesTagIndex}
-                                setActiveTagIndex={setActiveRolesTagIndex}
-                                placeholder={t("alertingSelectRoles")}
-                                size="sm"
-                                tags={roleTags}
-                                setTags={(newTags) => {
-                                    const next =
-                                        typeof newTags === "function"
-                                            ? newTags(roleTags)
-                                            : newTags;
+                            <RolesSelector
+                                selectedRoles={field.value ?? []}
+                                restrictAdminRole
+                                orgId={orgId}
+                                onSelectRoles={(newUsers) => {
                                     form.setValue(
                                         `actions.${index}.roleTags`,
-                                        next as Tag[],
+                                        newUsers as [Tag, ...Tag[]],
                                         { shouldDirty: true }
                                     );
                                 }}
-                                enableAutocomplete={true}
-                                autocompleteOptions={allRoles}
-                                allowDuplicates={false}
-                                restrictTagsToAutocompleteOptions={true}
-                                sortTags={true}
                             />
                         </FormControl>
                         <FormMessage />

src/components/machines-selector.tsx

@@ -5,7 +5,7 @@ import { useMemo, useState } from "react";
 import { useDebounce } from "use-debounce";
 
 import { useTranslations } from "next-intl";
-import { MultiSelectTags } from "./multi-select-tags";
+import { MultiSelectTagInput } from "./multi-select/multi-select-tag-input";
 
 export type SelectedMachine = Pick<
     ListClientsResponse["clients"][number],
@@ -28,11 +28,13 @@ export function MachinesSelector({
 
     const [debouncedValue] = useDebounce(machineSearchQuery, 150);
 
+    const perPage = 7;
+
     const { data: machines = [] } = useQuery(
-        orgQueries.machineClients({ orgId, perPage: 10, query: debouncedValue })
+        orgQueries.machineClients({ orgId, perPage, query: debouncedValue })
     );
 
-    // always include the selected machines in the list of machines shown (if the user isn't searching)
+    // always include the selected machines in the list (if the user isn't searching)
     const machinesShown = useMemo(() => {
         const allMachines: Array<SelectedMachine> = [...machines];
         if (debouncedValue.trim().length === 0) {
@@ -44,75 +46,32 @@ export function MachinesSelector({
                 }
             }
         }
-
         return allMachines;
     }, [machines, selectedMachines, debouncedValue]);
 
-    // const selectedMachinesIds = new Set(
-    //     selectedMachines.map((m) => m.clientId)
-    // );
-
     return (
-        <MultiSelectTags
+        <MultiSelectTagInput
+            buttonText={t("accessClientSelect")}
+            searchPlaceholder={t("search")}
             emptyPlaceholder={t("machineNotFound")}
-            searchPlaceholder={t("machineSearch")}
-            value={selectedMachines.map((m) => ({
-                ...m,
-                text: m.name,
-                id: m.clientId.toString()
-            }))}
-            onChange={(values) => {
-                onSelectMachines(values);
-            }}
-            options={machinesShown.map((m) => ({
-                ...m,
-                id: m.clientId.toString(),
-                text: m.name
-            }))}
-            onSearch={setMachineSearchQuery}
             searchQuery={machineSearchQuery}
+            onSearch={setMachineSearchQuery}
+            options={machinesShown.map((mc) => ({
+                id: mc.clientId.toString(),
+                text: mc.name
+            }))}
+            value={selectedMachines.map((mc) => ({
+                id: mc.clientId.toString(),
+                text: mc.name
+            }))}
+            onChange={(newValues) => {
+                onSelectMachines(
+                    newValues.map((v) => ({
+                        clientId: Number(v.id),
+                        name: v.text
+                    }))
+                );
+            }}
         />
-        // <Command shouldFilter={false}>
-        //     <CommandInput
-        //         placeholder={t("machineSearch")}
-        //         value={machineSearchQuery}
-        //         onValueChange={setMachineSearchQuery}
-        //     />
-        //     <CommandList>
-        //         <CommandEmpty>{t("machineNotFound")}</CommandEmpty>
-        //         <CommandGroup>
-        //             {machinesShown.map((m) => (
-        //                 <CommandItem
-        //                     value={`${m.name}:${m.clientId}`}
-        //                     key={m.clientId}
-        //                     onSelect={() => {
-        //                         let newMachineClients = [];
-        //                         if (selectedMachinesIds.has(m.clientId)) {
-        //                             newMachineClients = selectedMachines.filter(
-        //                                 (mc) => mc.clientId !== m.clientId
-        //                             );
-        //                         } else {
-        //                             newMachineClients = [
-        //                                 ...selectedMachines,
-        //                                 m
-        //                             ];
-        //                         }
-        //                         onSelectMachines(newMachineClients);
-        //                     }}
-        //                 >
-        //                     <CheckIcon
-        //                         className={cn(
-        //                             "mr-2 h-4 w-4",
-        //                             selectedMachinesIds.has(m.clientId)
-        //                                 ? "opacity-100"
-        //                                 : "opacity-0"
-        //                         )}
-        //                     />
-        //                     {`${m.name}`}
-        //                 </CommandItem>
-        //             ))}
-        //         </CommandGroup>
-        //     </CommandList>
-        // </Command>
     );
 }

src/components/multi-select/multi-select-content.tsx

@@ -6,24 +6,26 @@ import {
     CommandInput,
     CommandItem,
     CommandList
-} from "./ui/command";
+} from "../ui/command";
 import { cn } from "@app/lib/cn";
 import { CheckIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
 
-export type TagValue = { text: string; id: string };
+export type TagValue = { text: string; id: string; isAdmin?: boolean };
 
 export type MultiSelectTagsProps<T extends TagValue> = {
-    emptyPlaceholder: string;
-    searchPlaceholder: string;
+    emptyPlaceholder?: string;
+    searchPlaceholder?: string;
     searchQuery?: string;
     options: Array<T>;
     value: Array<T>;
     onChange: (newValue: Array<T>) => void;
     onSearch: (query: string) => void;
     ref?: Ref<HTMLButtonElement>;
+    disabled?: boolean;
 };
 
-export function MultiSelectTags<T extends TagValue>({
+export function MultiSelectContent<T extends TagValue>({
     emptyPlaceholder,
     searchPlaceholder,
     searchQuery,
@@ -32,16 +34,19 @@ export function MultiSelectTags<T extends TagValue>({
     onSearch,
     onChange
 }: MultiSelectTagsProps<T>) {
+    const t = useTranslations();
     const selectedValues = new Set(value.map((v) => v.id));
     return (
         <Command shouldFilter={false}>
             <CommandInput
-                placeholder={searchPlaceholder}
+                placeholder={searchPlaceholder ?? t("search")}
                 value={searchQuery}
                 onValueChange={onSearch}
             />
             <CommandList>
-                <CommandEmpty>{emptyPlaceholder}</CommandEmpty>
+                <CommandEmpty className="text-muted-foreground">
+                    {emptyPlaceholder ?? t("noResults")}
+                </CommandEmpty>
                 <CommandGroup>
                     {options.map((option) => (
                         <CommandItem

src/components/multi-select/multi-select-tag-input.tsx

@@ -0,0 +1,98 @@
+import { buttonVariants } from "@app/components/ui/button";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
+import { cn } from "@app/lib/cn";
+import { ChevronDownIcon, XIcon } from "lucide-react";
+import {
+    type MultiSelectTagsProps,
+    type TagValue,
+    MultiSelectContent
+} from "./multi-select-content";
+
+export interface MultiSelectInputProps<
+    T extends TagValue
+> extends MultiSelectTagsProps<T> {
+    buttonText?: string;
+}
+
+export function MultiSelectTagInput<T extends TagValue>({
+    buttonText,
+    ...props
+}: MultiSelectInputProps<T>) {
+    const selectedValues = new Set(props.value.map((v) => v.id));
+
+    return (
+        <Popover
+            onOpenChange={(open) => {
+                if (!open) {
+                    // clear input when popover is closed
+                    props.onSearch("");
+                }
+            }}
+        >
+            <PopoverTrigger asChild>
+                <div
+                    role="combobox"
+                    className={cn(
+                        buttonVariants({
+                            variant: "outline"
+                        }),
+                        "justify-between w-full inline-flex",
+                        "text-muted-foreground pl-1.5 cursor-text",
+                        "hover:bg-transparent hover:text-muted-foreground",
+                        props.disabled && "pointer-events-none opacity-50"
+                    )}
+                >
+                    <span
+                        className={cn(
+                            "inline-flex items-center gap-1",
+                            "overflow-x-auto"
+                        )}
+                    >
+                        {props.value.map((option) => (
+                            <span
+                                key={option.id}
+                                className={cn(
+                                    "bg-muted-foreground/10 font-normal text-foreground rounded-sm",
+                                    "py-1 pl-1.5 pr-0.5 text-xs inline-flex items-center gap-0.5"
+                                )}
+                                onClick={(e) => e.stopPropagation()}
+                            >
+                                {option.text}
+                                <button
+                                    className="p-0.5 flex-none cursor-pointer"
+                                    type="button"
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        let newValues = [];
+                                        if (selectedValues.has(option.id)) {
+                                            newValues = props.value.filter(
+                                                (v) => v.id !== option.id
+                                            );
+                                        } else {
+                                            newValues = [
+                                                ...props.value,
+                                                option
+                                            ];
+                                        }
+                                        props.onChange(newValues);
+                                    }}
+                                >
+                                    <XIcon className="size-3.5" />
+                                </button>
+                            </span>
+                        ))}
+                        <span className="pl-1 font-normal">{buttonText}</span>
+                    </span>
+                    <ChevronDownIcon className="ml-2 h-4 w-4 shrink-0 text-muted-foreground" />
+                </div>
+            </PopoverTrigger>
+            <PopoverContent className="p-0">
+                <MultiSelectContent {...props} />
+            </PopoverContent>
+        </Popover>
+    );
+}

src/components/newt-install-commands.tsx

@@ -52,6 +52,10 @@ export function NewtSiteInstallCommands({
     const acceptClientsEnv = !acceptClients
         ? "\n      - DISABLE_CLIENTS=true"
         : "";
+    const acceptClientsHelmValue = acceptClients
+        ? ` \\
+      --set newtInstances[0].acceptClients=true`
+        : "";
 
     const commandList: Record<Platform, Record<string, CommandItem[]>> = {
         linux: {
@@ -162,13 +166,18 @@ sudo systemctl enable --now newt`
             "Helm Chart": [
                 `helm repo add fossorial https://charts.fossorial.io`,
                 `helm repo update fossorial`,
-                `helm install newt fossorial/newt \\
-    --create-namespace \\
-    --set newtInstances[0].name="main-tunnel" \\
-    --set newtInstances[0].enabled=true \\
-    --set-string newtInstances[0].auth.keys.endpointKey="${endpoint}" \\
-    --set-string newtInstances[0].auth.keys.idKey="${id}" \\
-    --set-string newtInstances[0].auth.keys.secretKey="${secret}"`
+                `kubectl create namespace newt --dry-run=client -o yaml | kubectl apply -f -`,
+                `kubectl create secret generic newt-main-tunnel-auth \\
+   -n newt \\
+  --from-literal=PANGOLIN_ENDPOINT="${endpoint}" \\
+  --from-literal=NEWT_ID="${id}" \\
+  --from-literal=NEWT_SECRET="${secret}" \\
+  --dry-run=client -o yaml | kubectl apply -f -`,
+                `helm upgrade --install newt fossorial/newt \\
+  -n newt \\
+  --set newtInstances[0].name="main-tunnel" \\
+  --set newtInstances[0].enabled=true \\
+  --set-string newtInstances[0].auth.existingSecretName="newt-main-tunnel-auth"${acceptClientsHelmValue}`
             ]
         },
         podman: {

src/components/roles-selector.tsx

@@ -0,0 +1,81 @@
+import { orgQueries } from "@app/lib/queries";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { useDebounce } from "use-debounce";
+
+import { useTranslations } from "next-intl";
+import { MultiSelectTagInput } from "./multi-select/multi-select-tag-input";
+
+export type SelectedRole = { id: string; text: string; isAdmin?: boolean };
+
+export type RolesSelectorProps = {
+    orgId: string;
+    selectedRoles?: SelectedRole[];
+    onSelectRoles: (roles: SelectedRole[]) => void;
+    disabled?: boolean;
+    restrictAdminRole?: boolean;
+    mapRolesByName?: boolean;
+    buttonText?: string;
+};
+
+export function RolesSelector({
+    orgId,
+    selectedRoles = [],
+    onSelectRoles,
+    disabled,
+    restrictAdminRole,
+    mapRolesByName,
+    buttonText
+}: RolesSelectorProps) {
+    const t = useTranslations();
+    const [roleSearchQuery, setRoleSearchQuery] = useState("");
+
+    const [debouncedValue] = useDebounce(roleSearchQuery, 150);
+
+    const { data: roles = [] } = useQuery(
+        orgQueries.roles({ orgId, perPage: 10, query: debouncedValue })
+    );
+
+    // always include the selected roles in the list (if the user isn't searching)
+    const rolesShown = useMemo(() => {
+        let allRoles: Array<SelectedRole & { isAdmin?: boolean }> = roles.map(
+            (r) => ({
+                id: mapRolesByName ? r.name : r.roleId.toString(),
+                text: r.name,
+                isAdmin: Boolean(r.isAdmin)
+            })
+        );
+
+        if (debouncedValue.trim().length === 0) {
+            for (const role of selectedRoles) {
+                if (!allRoles.find((r) => r.id === role.id)) {
+                    allRoles.unshift(role);
+                }
+            }
+        }
+
+        if (restrictAdminRole) {
+            allRoles = allRoles.filter((role) => !role.isAdmin);
+        }
+
+        return allRoles;
+    }, [
+        roles,
+        selectedRoles,
+        debouncedValue,
+        restrictAdminRole,
+        mapRolesByName
+    ]);
+
+    return (
+        <MultiSelectTagInput
+            buttonText={buttonText ?? t("alertingSelectRoles")}
+            searchQuery={roleSearchQuery}
+            onSearch={setRoleSearchQuery}
+            options={rolesShown}
+            value={selectedRoles}
+            onChange={onSelectRoles}
+            disabled={disabled}
+        />
+    );
+}

src/components/tags/autocomplete.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState
+} from "react";
 import { TagInputStyleClassesProps, type Tag as TagType } from "./tag-input";
 import {
     Command,
@@ -220,7 +226,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
             >
                 <PopoverAnchor asChild>
                     <div
-                        className="relative h-full flex items-center rounded-md border border-input bg-transparent pr-3"
+                        className="relative h-full flex items-center rounded-md border border-input bg-transparent pr-1"
                         ref={triggerContainerRef}
                     >
                         {childrenWithProps}
@@ -260,10 +266,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
                     side="bottom"
                     align="start"
                     forceMount
-                    className={cn(
-                        "p-0",
-                        classStyleProps?.popoverContent
-                    )}
+                    className={cn("p-0", classStyleProps?.popoverContent)}
                     style={{
                         width: `${popoverWidth}px`,
                         minWidth: `${popoverWidth}px`,
@@ -300,7 +303,9 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
                                             key={option.id}
                                             value={`${option.text} ${option.id}`}
                                             onSelect={() => toggleTag(option)}
-                                            className={classStyleProps?.commandItem}
+                                            className={
+                                                classStyleProps?.commandItem
+                                            }
                                         >
                                             <Check
                                                 className={cn(

src/components/tags/tag-input.tsx

@@ -85,6 +85,8 @@ export interface TagInputProps
     autocompleteFilter?: (option: string) => boolean;
     direction?: "row" | "column";
     onInputChange?: (value: string) => void;
+    searchQuery?: string;
+    onSearchQueryChange?: (value: string) => void;
     customTagRenderer?: (tag: Tag, isActiveTag: boolean) => React.ReactNode;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
@@ -157,10 +159,24 @@ export function TagInput({ ref, ...props }: TagInputProps) {
         disabled = false,
         usePortal = false,
         addOnPaste = false,
-        generateTagId = uuid
+        generateTagId = uuid,
+        searchQuery,
+        onSearchQueryChange
     } = props;
 
     const [inputValue, setInputValue] = React.useState("");
+    const isControlled = searchQuery !== undefined;
+    const effectiveQuery = isControlled ? searchQuery : inputValue;
+
+    const updateQuery = React.useCallback(
+        (action: React.SetStateAction<string>) => {
+            const resolved =
+                typeof action === "function" ? action(effectiveQuery) : action;
+            if (!isControlled) setInputValue(resolved);
+            onSearchQueryChange?.(resolved);
+        },
+        [isControlled, effectiveQuery, onSearchQueryChange]
+    );
     const [tagCount, setTagCount] = React.useState(Math.max(0, tags.length));
     const inputRef = React.useRef<HTMLInputElement>(null);
 
@@ -234,9 +250,9 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                     );
                 }
             });
-            setInputValue("");
+            updateQuery("");
         } else {
-            setInputValue(newValue);
+            updateQuery(newValue);
         }
         onInputChange?.(newValue);
     };
@@ -247,8 +263,8 @@ export function TagInput({ ref, ...props }: TagInputProps) {
     };
 
     const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {
-        if (addTagsOnBlur && inputValue.trim()) {
-            const newTagText = inputValue.trim();
+        if (addTagsOnBlur && effectiveQuery.trim()) {
+            const newTagText = effectiveQuery.trim();
 
             if (validateTag && !validateTag(newTagText)) {
                 return;
@@ -273,7 +289,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                 setTags([...tags, { id: newTagId, text: newTagText }]);
                 onTagAdd?.(newTagText);
                 setTagCount((prevTagCount) => prevTagCount + 1);
-                setInputValue("");
+                updateQuery("");
             }
         }
 
@@ -287,7 +303,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                 : e.key === delimiter || e.key === Delimiter.Enter
         ) {
             e.preventDefault();
-            const newTagText = inputValue.trim();
+            const newTagText = effectiveQuery.trim();
 
             // Check if the tag is in the autocomplete options if restrictTagsToAutocomplete is true
             if (
@@ -329,7 +345,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                 onTagAdd?.(newTagText);
                 setTagCount((prevTagCount) => prevTagCount + 1);
             }
-            setInputValue("");
+            updateQuery("");
         } else {
             switch (e.key) {
                 case "Delete":
@@ -419,9 +435,6 @@ export function TagInput({ ref, ...props }: TagInputProps) {
         onClearAll?.();
     };
 
-    // const filteredAutocompleteOptions = autocompleteFilter
-    //   ? autocompleteOptions?.filter((option) => autocompleteFilter(option.text))
-    //   : autocompleteOptions;
     const displayedTags = sortTags ? [...tags].sort() : tags;
 
     const truncatedTags = truncate
@@ -436,13 +449,15 @@ export function TagInput({ ref, ...props }: TagInputProps) {
 
     return (
         <div
-            className={`w-full flex ${!inlineTags && tags.length > 0 ? "gap-3" : ""} ${
+            className={cn(
+                `w-full flex`,
+                !inlineTags && tags.length > 0 && "gap-3",
                 inputFieldPosition === "bottom"
                     ? "flex-col"
                     : inputFieldPosition === "top"
                       ? "flex-col-reverse"
                       : "flex-row"
-            }`}
+            )}
         >
             {!usePopoverForTags &&
                 (!inlineTags ? (
@@ -515,14 +530,14 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                             ? placeholderWhenFull
                                             : placeholder
                                     }
-                                    value={inputValue}
+                                    value={effectiveQuery}
                                     onChange={handleInputChange}
                                     onKeyDown={handleKeyDown}
                                     onFocus={handleInputFocus}
                                     onBlur={handleInputBlur}
                                     {...inputProps}
                                     className={cn(
-                                        "border-0 px-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
+                                        "border-0 px-2 h-6 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
                                         // className,
                                         styleClasses?.input
                                     )}
@@ -544,16 +559,17 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                         </div>
                     )
                 ))}
+
             {enableAutocomplete ? (
                 <div className="w-full">
                     <Autocomplete
                         tags={tags}
                         setTags={setTags}
-                        setInputValue={setInputValue}
+                        setInputValue={updateQuery}
                         autocompleteOptions={
                             (autocompleteOptions || []) as Tag[]
                         }
-                        filterQuery={inputValue}
+                        filterQuery={effectiveQuery}
                         setTagCount={setTagCount}
                         maxTags={maxTags}
                         onTagAdd={onTagAdd}
@@ -579,7 +595,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                 // <CommandInput
                                 //   placeholder={maxTags !== undefined && tags.length >= maxTags ? placeholderWhenFull : placeholder}
                                 //   ref={inputRef}
-                                //   value={inputValue}
+                                //   value={effectiveQuery}
                                 //   disabled={disabled || (maxTags !== undefined && tags.length >= maxTags)}
                                 //   onChangeCapture={handleInputChange}
                                 //   onKeyDown={handleKeyDown}
@@ -601,14 +617,14 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                             ? placeholderWhenFull
                                             : placeholder
                                     }
-                                    value={inputValue}
+                                    value={effectiveQuery}
                                     onChange={handleInputChange}
                                     onKeyDown={handleKeyDown}
                                     onFocus={handleInputFocus}
                                     onBlur={handleInputBlur}
                                     {...inputProps}
                                     className={cn(
-                                        "border-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
+                                        "border-0 h-6 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
                                         // className,
                                         styleClasses?.input
                                     )}
@@ -662,7 +678,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                     {/* <CommandInput
                     placeholder={maxTags !== undefined && tags.length >= maxTags ? placeholderWhenFull : placeholder}
                     ref={inputRef}
-                    value={inputValue}
+                    value={effectiveQuery}
                     disabled={disabled || (maxTags !== undefined && tags.length >= maxTags)}
                     onChangeCapture={handleInputChange}
                     onKeyDown={handleKeyDown}
@@ -685,14 +701,14 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                                 ? placeholderWhenFull
                                                 : placeholder
                                         }
-                                        value={inputValue}
+                                        value={effectiveQuery}
                                         onChange={handleInputChange}
                                         onKeyDown={handleKeyDown}
                                         onFocus={handleInputFocus}
                                         onBlur={handleInputBlur}
                                         {...inputProps}
                                         className={cn(
-                                            "border-0 px-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
+                                            "border-0 px-2 h-6 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
                                             // className,
                                             styleClasses?.input
                                         )}
@@ -741,7 +757,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                 {/* <CommandInput
                   placeholder={maxTags !== undefined && tags.length >= maxTags ? placeholderWhenFull : placeholder}
                   ref={inputRef}
-                  value={inputValue}
+                  value={effectiveQuery}
                   disabled={disabled || (maxTags !== undefined && tags.length >= maxTags)}
                   onChangeCapture={handleInputChange}
                   onKeyDown={handleKeyDown}
@@ -763,14 +779,14 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                             ? placeholderWhenFull
                                             : placeholder
                                     }
-                                    value={inputValue}
+                                    value={effectiveQuery}
                                     onChange={handleInputChange}
                                     onKeyDown={handleKeyDown}
                                     onFocus={handleInputFocus}
                                     onBlur={handleInputBlur}
                                     {...inputProps}
                                     className={cn(
-                                        "border-0 px-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
+                                        "border-0 px-2 h-6 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
                                         // className,
                                         styleClasses?.input
                                     )}
@@ -806,7 +822,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                         ? placeholderWhenFull
                                         : placeholder
                                 }
-                                value={inputValue}
+                                value={effectiveQuery}
                                 onChange={handleInputChange}
                                 onKeyDown={handleKeyDown}
                                 onFocus={handleInputFocus}
@@ -866,7 +882,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                         ? placeholderWhenFull
                                         : placeholder
                                 }
-                                value={inputValue}
+                                value={effectiveQuery}
                                 onChange={handleInputChange}
                                 onKeyDown={handleKeyDown}
                                 onFocus={handleInputFocus}

src/components/ui/command.tsx

@@ -87,7 +87,7 @@ function CommandList({
         <CommandPrimitive.List
             data-slot="command-list"
             className={cn(
-                "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+                "max-h-[300px] scroll-py-1 overflow-x-clip overflow-y-auto",
                 className
             )}
             {...props}
@@ -96,12 +96,13 @@ function CommandList({
 }
 
 function CommandEmpty({
+    className,
     ...props
 }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
     return (
         <CommandPrimitive.Empty
             data-slot="command-empty"
-            className="py-6 text-center text-sm"
+            className={cn("py-6 text-center text-sm", className)}
             {...props}
         />
     );
@@ -115,7 +116,7 @@ function CommandGroup({
         <CommandPrimitive.Group
             data-slot="command-group"
             className={cn(
-                "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+                "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-y-auto p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
                 className
             )}
             {...props}

src/components/ui/controlled-data-table.tsx

@@ -566,7 +566,7 @@ export function ControlledDataTable<TData, TValue>({
                                 ))}
                             </TableHeader>
                             <TableBody>
-                                {table.getRowModel().rows?.length ? (
+                                {(table.getRowModel().rows ?? []).length > 0 ? (
                                     table.getRowModel().rows.map((row) => (
                                         <TableRow
                                             key={row.id}

src/components/users-selector.tsx

@@ -0,0 +1,63 @@
+import { orgQueries } from "@app/lib/queries";
+import type { ListUsersResponse } from "@server/routers/user";
+import { getUserDisplayName } from "@app/lib/getUserDisplayName";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { useDebounce } from "use-debounce";
+
+import { useTranslations } from "next-intl";
+import { MultiSelectTagInput } from "./multi-select/multi-select-tag-input";
+
+export type SelectedUser = {
+    id: string;
+    text: string;
+    ipdName?: string | null;
+};
+
+export type UsersSelectorProps = {
+    orgId: string;
+    selectedUsers?: SelectedUser[];
+    onSelectUsers: (users: SelectedUser[]) => void;
+};
+
+export function UsersSelector({
+    orgId,
+    selectedUsers = [],
+    onSelectUsers
+}: UsersSelectorProps) {
+    const t = useTranslations();
+    const [userSearchQuery, setUserSearchQuery] = useState("");
+
+    const [debouncedValue] = useDebounce(userSearchQuery, 150);
+
+    const { data: users = [] } = useQuery(
+        orgQueries.users({ orgId, perPage: 10, query: debouncedValue })
+    );
+
+    // always include the selected users in the list (if the user isn't searching)
+    const usersShown = useMemo(() => {
+        const allUsers: Array<SelectedUser> = users.map((u) => ({
+            id: u.id,
+            text: getUserDisplayName(u)
+        }));
+        if (debouncedValue.trim().length === 0) {
+            for (const user of selectedUsers) {
+                if (!allUsers.find((u) => u.id === user.id)) {
+                    allUsers.unshift(user);
+                }
+            }
+        }
+        return allUsers;
+    }, [users, selectedUsers, debouncedValue]);
+
+    return (
+        <MultiSelectTagInput
+            buttonText={t("alertingSelectUsers")}
+            searchQuery={userSearchQuery}
+            onSearch={setUserSearchQuery}
+            options={usersShown}
+            value={selectedUsers}
+            onChange={onSelectUsers}
+        />
+    );
+}

src/lib/getUserDisplayName.ts

@@ -8,6 +8,7 @@ type UserDisplayNameInput =
           email?: string | null;
           name?: string | null;
           username?: string | null;
+          idpName?: string | null;
       };
 
 /**
@@ -21,16 +22,25 @@ export function getUserDisplayName(input: UserDisplayNameInput): string {
     let email: string | null | undefined;
     let name: string | null | undefined;
     let username: string | null | undefined;
+    let idpName: string | null | undefined;
 
     if ("user" in input) {
         email = input.user.email;
         name = input.user.name;
         username = input.user.username;
+        idpName = input.user.idpName;
     } else {
         email = input.email;
         name = input.name;
         username = input.username;
+        idpName = input.idpName;
     }
 
-    return email || name || username || "";
+    let nameShown = email || name || username || "";
+
+    if (idpName) {
+        nameShown = `${nameShown} (${idpName})`;
+    }
+
+    return nameShown;
 }

src/lib/pullEnv.ts

@@ -81,6 +81,8 @@ export function pullEnv(): Env {
                 process.env.BRANDING_HIDE_AUTH_LAYOUT_FOOTER === "true"
                     ? true
                     : false,
+            hidePoweredBy:
+                process.env.BRANDING_HIDE_POWERED_BY === "true" ? true : false,
             logo: {
                 lightPath: process.env.BRANDING_LOGO_LIGHT_PATH as string,
                 darkPath: process.env.BRANDING_LOGO_DARK_PATH as string,

src/lib/queries.ts

@@ -126,24 +126,56 @@ export const orgQueries = {
                 return res.data.data.clients;
             }
         }),
-    users: ({ orgId }: { orgId: string }) =>
+    users: ({
+        orgId,
+        query,
+        perPage = 10_000
+    }: {
+        orgId: string;
+        query?: string;
+        perPage?: number;
+    }) =>
         queryOptions({
-            queryKey: ["ORG", orgId, "USERS"] as const,
+            queryKey: ["ORG", orgId, "USERS", { query, perPage }] as const,
             queryFn: async ({ signal, meta }) => {
+                const sp = new URLSearchParams({
+                    pageSize: perPage.toString()
+                });
+
+                if (query?.trim()) {
+                    sp.set("query", query);
+                }
+
                 const res = await meta!.api.get<
                     AxiosResponse<ListUsersResponse>
-                >(`/org/${orgId}/users`, { signal });
+                >(`/org/${orgId}/users?${sp.toString()}`, { signal });
 
                 return res.data.data.users;
             }
         }),
-    roles: ({ orgId }: { orgId: string }) =>
+    roles: ({
+        orgId,
+        query,
+        perPage = 10_000
+    }: {
+        orgId: string;
+        query?: string;
+        perPage?: number;
+    }) =>
         queryOptions({
-            queryKey: ["ORG", orgId, "ROLES"] as const,
+            queryKey: ["ORG", orgId, "ROLES", { query, perPage }] as const,
             queryFn: async ({ signal, meta }) => {
+                const sp = new URLSearchParams({
+                    pageSize: perPage.toString()
+                });
+
+                if (query?.trim()) {
+                    sp.set("query", query);
+                }
+
                 const res = await meta!.api.get<
                     AxiosResponse<ListRolesResponse>
-                >(`/org/${orgId}/roles`, { signal });
+                >(`/org/${orgId}/roles?${sp.toString()}`, { signal });
 
                 return res.data.data.roles;
             }

src/lib/types/env.ts

@@ -41,6 +41,7 @@ export type Env = {
         appName?: string;
         background_image_path?: string;
         hideAuthLayoutFooter?: boolean;
+        hidePoweredBy?: boolean;
         logo?: {
             lightPath?: string;
             darkPath?: string;