@elevasis/ui 2.74.0 → 2.76.0

package/dist/{chunk-4MXNHJTA.js → chunk-NAPXMYFW.js}

@@ -1,58 +1,25 @@
-import { useAvailablePresets } from './chunk-ZFISGKYW.js';
-import { MEMBERSHIP_STATUS_COLORS, PROVISIONING_STATE_DISPLAY, transformMembershipToTableRow, useUserMemberships, useUpdateWebhookEndpoint, useDeleteWebhookEndpoint, useCreateWebhookEndpoint, useListWebhookEndpoints, useOrgRoles, useAssignRole, useRevokeRole, useOrganizationMembers, usePermissionCatalog } from './chunk-ARAFQBNI.js';
-import { useDeleteCredential, useCreateCredential, useCredentials, useUpdateCredential, CredentialSchemas } from './chunk-3LOKYZJC.js';
-import { AppShellLoader } from './chunk-E6YGA5WH.js';
+import { useAvailablePresets } from './chunk-IIEZXXDD.js';
+import { MEMBERSHIP_STATUS_COLORS, PROVISIONING_STATE_DISPLAY, transformMembershipToTableRow, useUserMemberships, useUpdateWebhookEndpoint, useDeleteWebhookEndpoint, useCreateWebhookEndpoint, useListWebhookEndpoints, useOrgRoles, useAssignRole, useRevokeRole, useOrganizationMembers, usePermissionCatalog } from './chunk-73G3I5HJ.js';
+import { AppShellLoader } from './chunk-EFQLXRYT.js';
 import { FilterBar } from './chunk-PDHTXPSF.js';
-import { ListSkeleton, EmptyState, CustomModal, PageTitleCaption, APIErrorAlert, useResources, StatCard, useAccess, AccessKeys, AccessGuard } from './chunk-6JN2TLV2.js';
-import { showApiErrorNotification, showErrorNotification, showSuccessNotification } from './chunk-HYQOGRWG.js';
+import { CustomModal, APIErrorAlert, EmptyState, PageTitleCaption, useResources, ListSkeleton, StatCard, useAccess, AccessKeys, AccessGuard } from './chunk-K55TU6CC.js';
+import { showApiErrorNotification, showErrorNotification, showSuccessNotification } from './chunk-KXNRTJAE.js';
 import { CardHeader } from './chunk-62GVNH5U.js';
 import { useInitialization } from './chunk-P45GQ3ZW.js';
 import { RoleBadge } from './chunk-UD657ICS.js';
 import { useOrganization } from './chunk-DD3CCMCZ.js';
-import { isAPIClientError, formatDateTime, OAUTH_FLOW_TIMEOUT } from './chunk-R5UGIFYU.js';
+import { isAPIClientError, formatDateTime, OAUTH_FLOW_TIMEOUT } from './chunk-5ZK7K7YP.js';
 import { useElevasisServices } from './chunk-BI5VDO2K.js';
-import { brandSupabaseOrgId } from './chunk-MQZE7SUI.js';
 import { useAuthContext } from './chunk-BRJ3QZ4E.js';
-import { createUseExternalEvents, Text, Table, Group, Tooltip, ActionIcon, Stack, Title, Button, Select, TextInput, Alert, PasswordInput, Anchor, Paper, Badge, Center, Loader, Box, Code, CopyButton, ThemeIcon, SimpleGrid, UnstyledButton, Card, Switch, Divider, Textarea, MultiSelect } from '@mantine/core';
-import { IconShieldOff, IconKey, IconCalendar, IconPencil, IconTrash, IconAlertTriangle, IconInfoCircle, IconExclamationMark, IconPlus, IconAlertCircle, IconUsers, IconSearch, IconBuilding, IconWebhook, IconCheck, IconCopy, IconUser, IconMail, IconPalette, IconEye, IconSparkles, IconTrendingUp, IconClock, IconPlayerPause, IconPlayerPlay, IconActivity, IconShieldLock, IconStar, IconUserCog, IconUsersGroup, IconSettings, IconRefresh, IconBrandDropbox, IconBrandGoogleDrive, IconPlug, IconEdit, IconUserX, IconUserCheck } from '@tabler/icons-react';
-import { randomId } from '@mantine/hooks';
+import { Text, Stack, Title, Alert, TextInput, Group, Button, Paper, SimpleGrid, Card, ThemeIcon, Badge, Tooltip, Select, Table, Center, Loader, Box, Code, CopyButton, ActionIcon, UnstyledButton, Switch, Divider, Textarea, MultiSelect } from '@mantine/core';
+import { IconShieldOff, IconAlertCircle, IconBrandDropbox, IconBrandGoogleDrive, IconPlug, IconUsers, IconSearch, IconBuilding, IconWebhook, IconCheck, IconCopy, IconUser, IconMail, IconPalette, IconEye, IconSparkles, IconTrendingUp, IconExclamationMark, IconPencil, IconClock, IconPlayerPause, IconPlayerPlay, IconTrash, IconAlertTriangle, IconPlus, IconActivity, IconShieldLock, IconStar, IconUserCog, IconUsersGroup, IconSettings, IconEdit, IconUserX, IconUserCheck } from '@tabler/icons-react';
+import { modals } from '@mantine/modals';
 import { notifications } from '@mantine/notifications';
-import { z } from 'zod';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { useForm } from '@mantine/form';
-import { create } from 'zustand';
 import { useQueryClient } from '@tanstack/react-query';
-
-var [useModalsEvents, createEvent] = createUseExternalEvents("mantine-modals");
-var openModal = (payload) => {
-  const id = payload.modalId || randomId();
-  createEvent("openModal")({ ...payload, modalId: id });
-  return id;
-};
-var openConfirmModal = (payload) => {
-  const id = payload.modalId || randomId();
-  createEvent("openConfirmModal")({ ...payload, modalId: id });
-  return id;
-};
-var openContextModal = (payload) => {
-  const id = payload.modalId || randomId();
-  createEvent("openContextModal")({ ...payload, modalId: id });
-  return id;
-};
-var closeModal = createEvent("closeModal");
-var closeAllModals = createEvent("closeAllModals");
-var updateModal = (payload) => createEvent("updateModal")(payload);
-var updateContextModal = (payload) => createEvent("updateContextModal")(payload);
-var modals = {
-  open: openModal,
-  close: closeModal,
-  closeAll: closeAllModals,
-  openConfirmModal,
-  openContextModal,
-  updateModal,
-  updateContextModal
-};
+import { create } from 'zustand';
+import { useForm } from '@mantine/form';
 
 // ../core/src/integrations/oauth/provider-registry.ts
 var OAUTH_PROVIDERS = {
@@ -115,178 +82,6 @@ var OAUTH_PROVIDERS = {
     ]
   }
 };
-var CredentialFieldSchema = z.object({
-  key: z.string(),
-  label: z.string(),
-  type: z.enum(["password", "text"]),
-  required: z.boolean(),
-  placeholder: z.string().optional(),
-  description: z.string().optional()
-});
-var CredentialSchemaZod = z.object({
-  type: z.string(),
-  label: z.string(),
-  description: z.string(),
-  fields: z.array(CredentialFieldSchema).optional(),
-  docsUrl: z.string().url().optional(),
-  nameSuggestions: z.array(z.string()),
-  oauthProvider: z.string().optional()
-});
-var CREDENTIAL_SCHEMAS = {
-  "google-sheets": {
-    type: "oauth",
-    label: "Google Sheets",
-    description: "Google Sheets OAuth integration",
-    oauthProvider: "google-sheets",
-    nameSuggestions: ["google-sheets-prod", "google-sheets-dev", "sheets-workspace"]
-  },
-  dropbox: {
-    type: "oauth",
-    label: "Dropbox",
-    description: "Dropbox OAuth integration",
-    oauthProvider: "dropbox",
-    nameSuggestions: ["dropbox-prod", "dropbox-dev", "elevasis-dropbox"]
-  },
-  oauth: {
-    type: "oauth",
-    label: "OAuth",
-    description: "Generic OAuth credential",
-    nameSuggestions: []
-  },
-  "api-key": {
-    type: "single_field",
-    label: "API Key",
-    description: "Single-field API key credential",
-    fields: [
-      {
-        key: "apiKey",
-        label: "API Key",
-        type: "password",
-        required: true,
-        placeholder: "Enter your API key",
-        description: "API key for the service"
-      }
-    ],
-    nameSuggestions: ["service-prod", "service-dev", "api-key"]
-  },
-  "webhook-secret": {
-    type: "single_field",
-    label: "Webhook Secret",
-    description: "Webhook signing secret for signature validation",
-    fields: [
-      {
-        key: "signingSecret",
-        label: "Signing Secret",
-        type: "password",
-        required: true,
-        placeholder: "whsec_...",
-        description: "Webhook signing secret from provider dashboard"
-      }
-    ],
-    nameSuggestions: ["my-org-cal-com-webhook", "my-org-stripe-webhook", "my-org-signature-api-webhook"]
-  },
-  "api-key-secret": {
-    type: "api-key-secret",
-    label: "API Key + Secret",
-    description: "API key and secret pair authentication",
-    fields: [
-      {
-        key: "apiKey",
-        label: "API Key",
-        type: "password",
-        required: true
-      },
-      {
-        key: "apiSecret",
-        label: "API Secret",
-        type: "password",
-        required: true
-      }
-    ],
-    nameSuggestions: []
-  },
-  apify: {
-    type: "single_field",
-    label: "Apify",
-    description: "Apify API token for running web-scraping actors (e.g. website crawl, Google Places scrape).",
-    fields: [
-      {
-        key: "apiKey",
-        label: "API Token",
-        type: "password",
-        required: true,
-        placeholder: "apify_api_...",
-        description: "Personal API token from https://console.apify.com/account/integrations"
-      }
-    ],
-    docsUrl: "https://docs.apify.com/platform/integrations/api",
-    nameSuggestions: ["elevasis-apify", "apify-prod", "apify-dev"]
-  },
-  clickup: {
-    type: "single_field",
-    label: "ClickUp",
-    description: "ClickUp personal API token for creating tasks in tenant-managed ClickUp workspaces.",
-    fields: [
-      {
-        key: "apiToken",
-        label: "API Token",
-        type: "password",
-        required: true,
-        placeholder: "pk_...",
-        description: "Personal API token from ClickUp settings. Personal tokens start with pk_."
-      }
-    ],
-    docsUrl: "https://developer.clickup.com/docs/authentication",
-    nameSuggestions: ["clickup-demo", "clickup-prod", "clickup-dev"]
-  },
-  instagram: {
-    type: "single_field",
-    label: "Instagram",
-    description: "Long-lived Instagram access token for publishing through Meta\u2019s Content Publishing API.",
-    fields: [
-      {
-        key: "accessToken",
-        label: "Access Token",
-        type: "password",
-        required: true,
-        placeholder: "IGAA...",
-        description: "Long-lived token from the Meta app dashboard. Valid 60 days from issue or last refresh."
-      },
-      {
-        key: "igUserId",
-        label: "Instagram User ID",
-        type: "text",
-        required: true,
-        placeholder: "17841400000000000",
-        description: "The Instagram professional account id shown beside the token on the same Meta screen."
-      }
-    ],
-    docsUrl: "https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/content-publishing",
-    nameSuggestions: ["elevasis-instagram", "instagram-prod", "instagram-dev"]
-  }
-};
-function getCredentialSchema(type) {
-  const schema = CREDENTIAL_SCHEMAS[type] || CREDENTIAL_SCHEMAS["api-key"];
-  return CredentialSchemaZod.parse(schema);
-}
-
-// ../core/src/integrations/credentials/utils.ts
-function buildCredentialValue(type, formValues) {
-  const schema = getCredentialSchema(type);
-  if (schema.type === "oauth") {
-    throw new Error(`buildCredentialValue should not be used for OAuth type: ${type}`);
-  }
-  const value = {};
-  if (schema.fields) {
-    for (const field of schema.fields) {
-      const fieldValue = formValues[field.key];
-      if (fieldValue !== void 0 && fieldValue !== null) {
-        value[field.key] = fieldValue.trim();
-      }
-    }
-  }
-  return value;
-}
 function showAuthError(error) {
   if (isAPIClientError(error)) {
     if (error.code === "LAST_OWNER_PROTECTED") {
@@ -315,282 +110,6 @@ function showAuthError(error) {
   }
   showApiErrorNotification(error);
 }
-function CredentialList({ credentials, isLoading, onEdit }) {
-  const [deleteCredential, setDeleteCredential] = useState(null);
-  const deleteMutation = useDeleteCredential();
-  const handleDelete = () => {
-    if (deleteCredential) {
-      deleteMutation.mutate(deleteCredential.id);
-      setDeleteCredential(null);
-    }
-  };
-  const handleCloseDelete = () => {
-    if (!deleteMutation.isPending) {
-      setDeleteCredential(null);
-    }
-  };
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(ListSkeleton, { rows: 3, rowHeight: 60 });
-  }
-  if (credentials.length === 0) {
-    return /* @__PURE__ */ jsx(
-      EmptyState,
-      {
-        icon: IconKey,
-        title: "No credentials yet",
-        description: "Create your first credential to enable external service integrations"
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
-        /* @__PURE__ */ jsx(Table.Th, { children: "Name" }),
-        /* @__PURE__ */ jsx(Table.Th, { children: "Created" }),
-        /* @__PURE__ */ jsx(Table.Th, { w: 100 })
-      ] }) }),
-      /* @__PURE__ */ jsx(Table.Tbody, { children: credentials.map((credential) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
-        /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-          /* @__PURE__ */ jsx(IconKey, { size: 16, style: { opacity: 0.6 } }),
-          /* @__PURE__ */ jsx(Text, { fw: 500, children: credential.name })
-        ] }) }),
-        /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
-          /* @__PURE__ */ jsx(IconCalendar, { size: 14, style: { opacity: 0.5 } }),
-          /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: formatDateTime(credential.createdAt) })
-        ] }) }),
-        /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", justify: "flex-end", children: [
-          onEdit && /* @__PURE__ */ jsx(Tooltip, { label: "Edit credential", children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              variant: "subtle",
-              color: "gray",
-              onClick: () => onEdit(credential),
-              disabled: deleteMutation.isPending,
-              children: /* @__PURE__ */ jsx(IconPencil, { size: 16 })
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Tooltip, { label: "Delete credential", position: "left", children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              variant: "subtle",
-              color: "red",
-              onClick: () => setDeleteCredential(credential),
-              disabled: deleteMutation.isPending,
-              children: /* @__PURE__ */ jsx(IconTrash, { size: 16 })
-            }
-          ) })
-        ] }) })
-      ] }, credential.id)) })
-    ] }),
-    /* @__PURE__ */ jsx(CustomModal, { opened: !!deleteCredential, onClose: handleCloseDelete, size: "md", loading: deleteMutation.isPending, children: /* @__PURE__ */ jsxs(Stack, { children: [
-      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-        /* @__PURE__ */ jsx(IconAlertTriangle, { size: 24, color: "var(--color-error)" }),
-        /* @__PURE__ */ jsx(Title, { order: 3, children: "Delete Credential" })
-      ] }),
-      /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
-        "Are you sure you want to delete",
-        " ",
-        /* @__PURE__ */ jsxs(Text, { span: true, fw: 600, children: [
-          '"',
-          deleteCredential?.name,
-          '"'
-        ] }),
-        "?"
-      ] }),
-      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "This action cannot be undone. Any agents or tools using this credential will stop working immediately." }),
-      /* @__PURE__ */ jsxs(Group, { justify: "space-between", gap: "sm", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "light", onClick: handleCloseDelete, disabled: deleteMutation.isPending, children: "Cancel" }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            color: "red",
-            onClick: handleDelete,
-            loading: deleteMutation.isPending,
-            leftSection: /* @__PURE__ */ jsx(IconTrash, { size: 16 }),
-            children: "Delete Credential"
-          }
-        )
-      ] })
-    ] }) })
-  ] });
-}
-function CreateCredentialModal({ opened, onClose, onSuccess }) {
-  const createCredential = useCreateCredential();
-  const [selectedType, setSelectedType] = useState("api-key");
-  const [schema, setSchema] = useState(getCredentialSchema("api-key"));
-  useEffect(() => {
-    setSchema(getCredentialSchema(selectedType));
-  }, [selectedType]);
-  const getInitialValues = (currentSchema) => {
-    const values = { name: "" };
-    if (currentSchema.fields) {
-      currentSchema.fields.forEach((field) => {
-        values[field.key] = "";
-      });
-    }
-    return values;
-  };
-  const getValidation = (currentSchema) => {
-    const validation = {
-      name: (value) => {
-        const result = CredentialSchemas.CreateRequest.shape.name.safeParse(value);
-        return result.success ? null : result.error.issues[0]?.message || "Invalid credential name";
-      }
-    };
-    if (currentSchema.fields) {
-      currentSchema.fields.forEach((field) => {
-        if (field.required) {
-          validation[field.key] = (value) => !value.trim() ? `${field.label} is required` : null;
-        }
-      });
-    }
-    return validation;
-  };
-  const form = useForm({
-    initialValues: getInitialValues(schema),
-    validate: getValidation(schema)
-  });
-  useEffect(() => {
-    const newValues = getInitialValues(schema);
-    form.setValues(newValues);
-    form.setFieldValue("name", form.values.name || "");
-    form.resetDirty();
-  }, [selectedType]);
-  const handleSubmit = async (values) => {
-    if (schema.type === "oauth") {
-      console.error("OAuth credentials cannot be created via this modal");
-      return;
-    }
-    const data = {
-      name: values.name.trim(),
-      type: selectedType,
-      value: buildCredentialValue(selectedType, values)
-    };
-    const validationResult = CredentialSchemas.CreateRequest.safeParse(data);
-    if (!validationResult.success) {
-      console.error("Validation failed:", validationResult.error);
-      return;
-    }
-    try {
-      const result = await createCredential.mutateAsync(data);
-      form.reset();
-      setSelectedType("api-key");
-      onSuccess(result);
-    } catch (error) {
-      console.error("Failed to create credential:", error);
-    }
-  };
-  const handleClose = () => {
-    if (!createCredential.isPending) {
-      form.reset();
-      setSelectedType("api-key");
-      onClose();
-    }
-  };
-  return /* @__PURE__ */ jsx(CustomModal, { opened, onClose: handleClose, size: "lg", loading: createCredential.isPending, children: /* @__PURE__ */ jsx("form", { onSubmit: form.onSubmit(handleSubmit), children: /* @__PURE__ */ jsxs(Stack, { children: [
-    /* @__PURE__ */ jsx(Title, { order: 3, children: "Create New Credential" }),
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        label: "Credential Type",
-        description: "Select the integration type",
-        placeholder: "Select credential type",
-        data: Object.entries(CREDENTIAL_SCHEMAS).filter(([_, s]) => s.type !== "oauth").map(([key, s]) => ({ value: key, label: s.label })),
-        value: selectedType,
-        onChange: (value) => setSelectedType(value || "api-key"),
-        required: true,
-        disabled: createCredential.isPending
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      TextInput,
-      {
-        label: "Credential Name",
-        description: schema.nameSuggestions.length > 0 ? `Suggested: ${schema.nameSuggestions.join(", ")}` : "Lowercase letters, numbers, and hyphens only (e.g., service-dev, service-prod)",
-        placeholder: schema.nameSuggestions[0] || "e.g., service-prod",
-        leftSection: /* @__PURE__ */ jsx(IconKey, { size: 16 }),
-        maxLength: 100,
-        required: true,
-        ...form.getInputProps("name"),
-        disabled: createCredential.isPending
-      }
-    ),
-    schema.type === "oauth" ? /* @__PURE__ */ jsxs(Alert, { icon: /* @__PURE__ */ jsx(IconInfoCircle, { size: 16 }), color: "blue", children: [
-      schema.label,
-      " uses OAuth authentication. Please go to the OAuth Integrations page to connect your",
-      " ",
-      schema.label,
-      " account."
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      schema.fields?.map((field) => {
-        const Input = field.type === "text" ? TextInput : PasswordInput;
-        return /* @__PURE__ */ jsx(
-          Input,
-          {
-            label: field.label,
-            description: field.description,
-            placeholder: field.placeholder,
-            required: field.required,
-            value: form.values[field.key] || "",
-            onChange: (e) => form.setFieldValue(field.key, e.target.value),
-            error: form.errors[field.key],
-            disabled: createCredential.isPending
-          },
-          field.key
-        );
-      }),
-      schema.docsUrl && /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
-        "Get credentials from",
-        " ",
-        /* @__PURE__ */ jsx(Anchor, { href: schema.docsUrl, target: "_blank", rel: "noopener noreferrer", children: schema.docsUrl })
-      ] })
-    ] }),
-    createCredential.error && /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconExclamationMark, { size: 16 }), color: "red", children: createCredential.error instanceof Error ? createCredential.error.message : "An error occurred while creating the credential" }),
-    /* @__PURE__ */ jsxs(Group, { justify: "flex-end", gap: "sm", children: [
-      /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: handleClose, disabled: createCredential.isPending, children: "Cancel" }),
-      /* @__PURE__ */ jsx(Button, { type: "submit", loading: createCredential.isPending, leftSection: /* @__PURE__ */ jsx(IconKey, { size: 16 }), children: "Create Credential" })
-    ] })
-  ] }) }) });
-}
-function CredentialSettings({ oauthSection }) {
-  const { organizationReady } = useInitialization();
-  const [showCreateModal, setShowCreateModal] = useState(false);
-  const { data: credentials = [], isLoading } = useCredentials();
-  if (!organizationReady) return /* @__PURE__ */ jsx(AppShellLoader, {});
-  const handleCredentialCreated = () => {
-    setShowCreateModal(false);
-  };
-  return /* @__PURE__ */ jsxs(Stack, { children: [
-    /* @__PURE__ */ jsx(
-      PageTitleCaption,
-      {
-        title: "Organization Credentials",
-        caption: "Manage encrypted credentials for third-party service integrations"
-      }
-    ),
-    oauthSection,
-    /* @__PURE__ */ jsxs(Paper, { withBorder: true, children: [
-      /* @__PURE__ */ jsx(
-        CardHeader,
-        {
-          icon: /* @__PURE__ */ jsx(IconKey, { size: 18 }),
-          title: "Credentials",
-          subtitle: "Configured API keys and credentials",
-          rightSection: /* @__PURE__ */ jsx(Button, { leftSection: /* @__PURE__ */ jsx(IconPlus, { size: 16 }), onClick: () => setShowCreateModal(true), variant: "light", children: "Create Credential" })
-        }
-      ),
-      /* @__PURE__ */ jsx(CredentialList, { credentials, isLoading })
-    ] }),
-    /* @__PURE__ */ jsx(
-      CreateCredentialModal,
-      {
-        opened: showCreateModal,
-        onClose: () => setShowCreateModal(false),
-        onSuccess: handleCredentialCreated
-      }
-    )
-  ] });
-}
 function OAuthConnectModal({ opened, onClose, provider, onConnect, error, isLoading }) {
   const [credentialName, setCredentialName] = useState("");
   useEffect(() => {
@@ -648,80 +167,291 @@ function OAuthConnectModal({ opened, onClose, provider, onConnect, error, isLoad
     ] })
   ] }) });
 }
-function MembershipStatusBadge({ status, size = "sm", variant = "light" }) {
-  const getStatusLabel = (status2) => {
-    switch (status2) {
-      case "active":
-        return "Active";
-      case "inactive":
-        return "Inactive";
-      default:
-        return status2;
-    }
-  };
-  return /* @__PURE__ */ jsx(Badge, { color: MEMBERSHIP_STATUS_COLORS[status], size, variant, children: getStatusLabel(status) });
-}
-function ProvisioningStateBadge({ state, size = "sm", variant = "light" }) {
-  if (!state || state === "linked") {
-    return null;
-  }
-  const display = PROVISIONING_STATE_DISPLAY[state];
-  return /* @__PURE__ */ jsx(Tooltip, { label: display.description, multiline: true, w: 280, children: /* @__PURE__ */ jsx(Badge, { color: display.color, size, variant, children: display.label }) });
-}
-function OrganizationMembershipsList({
-  memberships,
-  loading,
-  error,
-  onEditRole,
-  onLeaveOrganization
-}) {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [statusFilter, setStatusFilter] = useState("");
-  const tableRows = memberships?.map(transformMembershipToTableRow) || [];
-  const filteredRows = tableRows.filter((row) => {
-    const matchesSearch = row.organizationName.toLowerCase().includes(searchTerm.toLowerCase()) || row.role.toLowerCase().includes(searchTerm.toLowerCase());
-    const matchesStatus = !statusFilter || row.status === statusFilter;
-    return matchesSearch && matchesStatus;
-  });
-  const renderActions = (row) => {
-    if (!onEditRole && !onLeaveOrganization) {
-      return /* @__PURE__ */ jsx(ActionIcon, { variant: "light", size: "sm", color: "gray", title: "Configure member access", children: /* @__PURE__ */ jsx(IconSettings, { size: 14 }) });
-    }
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      row.canEdit && onEditRole && /* @__PURE__ */ jsx(
-        ActionIcon,
-        {
-          variant: "subtle",
-          size: "sm",
-          color: "blue",
-          onClick: () => onEditRole(row.id),
-          disabled: row.status !== "active",
-          children: /* @__PURE__ */ jsx(IconEdit, { size: 16 })
-        }
-      ),
-      row.canRemove && onLeaveOrganization && row.status === "active" && /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", color: "red", onClick: () => onLeaveOrganization(row.id), children: /* @__PURE__ */ jsx(IconUserX, { size: 16 }) }),
-      row.status === "inactive" && /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", color: "green", disabled: true, title: "Contact admin to reactivate", children: /* @__PURE__ */ jsx(IconUserCheck, { size: 16 }) })
-    ] });
-  };
-  if (error) {
-    return /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(APIErrorAlert, { error, title: "Failed to load memberships" }) });
-  }
-  return /* @__PURE__ */ jsxs(Paper, { withBorder: true, children: [
-    /* @__PURE__ */ jsx(
-      CardHeader,
-      {
-        icon: /* @__PURE__ */ jsx(IconUsers, { size: 18 }),
-        title: `Your Organizations (${loading ? "..." : filteredRows.length})`,
-        subtitle: loading ? "Loading memberships..." : `Showing ${filteredRows.length} ${filteredRows.length === 1 ? "membership" : "memberships"}`
-      }
-    ),
-    /* @__PURE__ */ jsxs(Stack, { children: [
-      /* @__PURE__ */ jsxs(FilterBar, { children: [
-        /* @__PURE__ */ jsx(
-          TextInput,
-          {
-            placeholder: "Search organizations or roles...",
-            leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 16 }),
+var OAUTH_COMPLETION_CHANNEL = "elevasis-oauth";
+var OAUTH_COMPLETION_STORAGE_KEY = "elevasis:oauth-complete";
+function useOAuthFlow({ apiUrl: apiUrlOverride } = {}) {
+  const [isAuthorizing, setIsAuthorizing] = useState(false);
+  const [error, setError] = useState(null);
+  const { isReady, apiUrl: contextApiUrl } = useElevasisServices();
+  const { getAccessToken, organizationId } = useAuthContext();
+  const apiUrl = apiUrlOverride ?? contextApiUrl;
+  const authorize = useCallback(
+    async (provider, credentialName) => {
+      if (!isReady || !organizationId) {
+        setError("Organization context not ready");
+        return;
+      }
+      setIsAuthorizing(true);
+      setError(null);
+      const width = 600;
+      const height = 700;
+      const left = Math.round(window.screen.width / 2 - width / 2);
+      const top = Math.round(window.screen.height / 2 - height / 2);
+      const popup = window.open(
+        "about:blank",
+        `oauth-${provider}`,
+        `width=${width},height=${height},left=${left},top=${top}`
+      );
+      if (!popup) {
+        setIsAuthorizing(false);
+        setError("Please enable popups and try again");
+        return;
+      }
+      let token;
+      try {
+        token = await getAccessToken();
+      } catch {
+        popup.close();
+        setIsAuthorizing(false);
+        setError("Authorization failed. Please sign in again.");
+        return;
+      }
+      try {
+        const authorizeUrl = new URL(`${apiUrl}/api/oauth/authorize/${provider}`);
+        authorizeUrl.searchParams.set("credentialName", credentialName);
+        authorizeUrl.searchParams.set("token", token);
+        authorizeUrl.searchParams.set("orgId", organizationId);
+        authorizeUrl.searchParams.set("appOrigin", window.location.origin);
+        popup.location.href = authorizeUrl.toString();
+        await waitForOAuthCallback(popup, Date.now());
+      } catch (err) {
+        const rawError = err instanceof Error ? err.message : "unknown";
+        if (rawError.includes("popup_blocked")) {
+          setError("Please enable popups and try again");
+        } else if (rawError.includes("timeout")) {
+          setError("Authorization timed out. Please try again.");
+        } else if (rawError.includes("popup_closed")) {
+          setError("Authorization was cancelled.");
+        } else if (rawError.includes("token_exchange_failed")) {
+          setError("Failed to obtain access token. Please try again.");
+        } else if (rawError.includes("invalid_state")) {
+          setError("Security validation failed. Please try again.");
+        } else if (rawError.includes("state_expired")) {
+          setError("Authorization expired. Please try again.");
+        } else {
+          setError(`Failed to connect: ${rawError}`);
+        }
+        throw err;
+      } finally {
+        setIsAuthorizing(false);
+      }
+    },
+    [isReady, organizationId, apiUrl, getAccessToken]
+  );
+  const waitForOAuthCallback = (popup, startedAt) => {
+    return new Promise((resolve, reject) => {
+      let broadcastChannel = null;
+      const complete = (data) => {
+        const payload = parseOAuthCompletionPayload(data, startedAt);
+        if (!payload) return;
+        cleanup();
+        if (payload.status === "success") {
+          resolve();
+        } else {
+          reject(new Error(payload.error || "oauth_failed"));
+        }
+      };
+      const messageHandler = (event) => {
+        if (!isTrustedCallbackOrigin(event.origin)) return;
+        complete(event.data);
+      };
+      const storageHandler = (event) => {
+        if (event.key !== OAUTH_COMPLETION_STORAGE_KEY || !event.newValue) return;
+        try {
+          complete(JSON.parse(event.newValue));
+        } catch {
+        }
+      };
+      const rejectIfPopupClosed = () => {
+        if (popup.closed) {
+          cleanup();
+          reject(new Error("popup_closed"));
+        }
+      };
+      window.addEventListener("message", messageHandler);
+      window.addEventListener("storage", storageHandler);
+      window.addEventListener("focus", rejectIfPopupClosed);
+      if ("BroadcastChannel" in window) {
+        broadcastChannel = new BroadcastChannel(OAUTH_COMPLETION_CHANNEL);
+        broadcastChannel.onmessage = (event) => complete(event.data);
+      }
+      const timeout = setTimeout(() => {
+        cleanup();
+        reject(new Error("timeout"));
+      }, OAUTH_FLOW_TIMEOUT);
+      const cleanup = () => {
+        clearTimeout(timeout);
+        broadcastChannel?.close();
+        window.removeEventListener("focus", rejectIfPopupClosed);
+        window.removeEventListener("storage", storageHandler);
+        window.removeEventListener("message", messageHandler);
+      };
+    });
+  };
+  return { authorize, isAuthorizing, error };
+}
+function parseOAuthCompletionPayload(data, startedAt) {
+  if (!data || typeof data !== "object") return null;
+  const payload = data;
+  if (payload.type !== "oauth-complete") return null;
+  if (payload.completedAt && payload.completedAt < startedAt) return null;
+  return payload;
+}
+function isTrustedCallbackOrigin(origin) {
+  if (origin === window.location.origin || origin === "https://app.elevasis.io") {
+    return true;
+  }
+  try {
+    const url = new URL(origin);
+    return url.protocol === "http:" && ["localhost", "127.0.0.1", "[::1]"].includes(url.hostname);
+  } catch {
+    return false;
+  }
+}
+var PROVIDER_ICONS = {
+  "google-sheets": IconBrandGoogleDrive,
+  dropbox: IconBrandDropbox
+};
+function OAuthIntegrationsCard({ apiUrl } = {}) {
+  const [selectedProviderId, setSelectedProviderId] = useState(null);
+  const [modalOpened, setModalOpened] = useState(false);
+  const { authorize, isAuthorizing, error } = useOAuthFlow({ apiUrl });
+  const queryClient = useQueryClient();
+  const handleConnect = async (credentialName) => {
+    if (!selectedProviderId) return;
+    try {
+      await authorize(selectedProviderId, credentialName);
+      setModalOpened(false);
+      setSelectedProviderId(null);
+      queryClient.invalidateQueries({ queryKey: ["credentials"] });
+    } catch (err) {
+      console.error("OAuth flow failed:", err);
+    }
+  };
+  const handleOpenModal = (providerId) => {
+    setSelectedProviderId(providerId);
+    setModalOpened(true);
+  };
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const requested = params.get("connect");
+    if (requested && OAUTH_PROVIDERS[requested]) {
+      handleOpenModal(requested);
+      params.delete("connect");
+      const remaining = params.toString();
+      const newUrl = window.location.pathname + (remaining ? `?${remaining}` : "") + window.location.hash;
+      window.history.replaceState({}, "", newUrl);
+    }
+  }, []);
+  const providers = Object.values(OAUTH_PROVIDERS);
+  const selectedProvider = selectedProviderId ? OAUTH_PROVIDERS[selectedProviderId] : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsx(Group, { justify: "space-between", children: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Title, { order: 3, children: "OAuth Integrations" }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", mt: 4, children: "Connect third-party services using OAuth 2.0" })
+      ] }) }),
+      /* @__PURE__ */ jsx(SimpleGrid, { cols: { base: 1, sm: 2, md: 3 }, children: providers.map((provider) => {
+        const Icon = PROVIDER_ICONS[provider.id] || IconPlug;
+        return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { children: [
+          /* @__PURE__ */ jsx(Group, { justify: "space-between", align: "flex-start", children: /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+            /* @__PURE__ */ jsx(ThemeIcon, { size: "lg", variant: "light", children: /* @__PURE__ */ jsx(Icon, { size: 20 }) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: provider.name }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(Button, { variant: "filled", size: "sm", onClick: () => handleOpenModal(provider.id), fullWidth: true, children: "Connect" })
+        ] }) }, provider.id);
+      }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      OAuthConnectModal,
+      {
+        opened: modalOpened,
+        onClose: () => {
+          setModalOpened(false);
+          setSelectedProviderId(null);
+        },
+        provider: selectedProvider,
+        onConnect: handleConnect,
+        error,
+        isLoading: isAuthorizing
+      }
+    )
+  ] });
+}
+function MembershipStatusBadge({ status, size = "sm", variant = "light" }) {
+  const getStatusLabel = (status2) => {
+    switch (status2) {
+      case "active":
+        return "Active";
+      case "inactive":
+        return "Inactive";
+      default:
+        return status2;
+    }
+  };
+  return /* @__PURE__ */ jsx(Badge, { color: MEMBERSHIP_STATUS_COLORS[status], size, variant, children: getStatusLabel(status) });
+}
+function ProvisioningStateBadge({ state, size = "sm", variant = "light" }) {
+  if (!state || state === "linked") {
+    return null;
+  }
+  const display = PROVISIONING_STATE_DISPLAY[state];
+  return /* @__PURE__ */ jsx(Tooltip, { label: display.description, multiline: true, w: 280, children: /* @__PURE__ */ jsx(Badge, { color: display.color, size, variant, children: display.label }) });
+}
+function OrganizationMembershipsList({
+  memberships,
+  loading,
+  error,
+  onEditRole,
+  onLeaveOrganization
+}) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [statusFilter, setStatusFilter] = useState("");
+  const tableRows = memberships?.map(transformMembershipToTableRow) || [];
+  const filteredRows = tableRows.filter((row) => {
+    const matchesSearch = row.organizationName.toLowerCase().includes(searchTerm.toLowerCase()) || row.role.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesStatus = !statusFilter || row.status === statusFilter;
+    return matchesSearch && matchesStatus;
+  });
+  const renderActions = (row) => {
+    if (!onEditRole && !onLeaveOrganization) {
+      return /* @__PURE__ */ jsx(ActionIcon, { variant: "light", size: "sm", color: "gray", title: "Configure member access", children: /* @__PURE__ */ jsx(IconSettings, { size: 14 }) });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      row.canEdit && onEditRole && /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          variant: "subtle",
+          size: "sm",
+          color: "blue",
+          onClick: () => onEditRole(row.id),
+          disabled: row.status !== "active",
+          children: /* @__PURE__ */ jsx(IconEdit, { size: 16 })
+        }
+      ),
+      row.canRemove && onLeaveOrganization && row.status === "active" && /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", color: "red", onClick: () => onLeaveOrganization(row.id), children: /* @__PURE__ */ jsx(IconUserX, { size: 16 }) }),
+      row.status === "inactive" && /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", color: "green", disabled: true, title: "Contact admin to reactivate", children: /* @__PURE__ */ jsx(IconUserCheck, { size: 16 }) })
+    ] });
+  };
+  if (error) {
+    return /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(APIErrorAlert, { error, title: "Failed to load memberships" }) });
+  }
+  return /* @__PURE__ */ jsxs(Paper, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        icon: /* @__PURE__ */ jsx(IconUsers, { size: 18 }),
+        title: `Your Organizations (${loading ? "..." : filteredRows.length})`,
+        subtitle: loading ? "Loading memberships..." : `Showing ${filteredRows.length} ${filteredRows.length === 1 ? "membership" : "memberships"}`
+      }
+    ),
+    /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsxs(FilterBar, { children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            placeholder: "Search organizations or roles...",
+            leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 16 }),
             value: searchTerm,
             onChange: (event) => setSearchTerm(event.currentTarget.value),
             style: { flex: 1 },
@@ -1109,264 +839,34 @@ function AppearanceSettings({ initialTheme, onThemeChange }) {
               /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: row.last }) })
             ] }, row.name)) })
           ] }) })
-        ] }) }),
-        /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
-          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", tt: "uppercase", fw: 600, children: "Alerts" }),
-          /* @__PURE__ */ jsx(Alert, { variant: "light", color: "blue", icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), title: "Informational", children: "This is how informational alerts look with your current theme." }),
-          /* @__PURE__ */ jsx(Alert, { variant: "light", color: "green", icon: /* @__PURE__ */ jsx(IconCheck, { size: 16 }), title: "Success", children: "Operation completed successfully." })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(CustomModal, { opened: modalOpen, onClose: () => setModalOpen(false), size: "md", children: /* @__PURE__ */ jsxs(Stack, { gap: "md", p: "md", children: [
-      /* @__PURE__ */ jsx(Title, { order: 3, children: "Modal Preview" }),
-      /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
-        "Modals should sit visibly above the page background. Elevation comes from the",
-        " ",
-        /* @__PURE__ */ jsx(Text, { span: true, ff: "monospace", size: "sm", children: "--color-elevated" }),
-        " ",
-        "token, which every preset defines as an opaque surface."
-      ] }),
-      /* @__PURE__ */ jsx(TextInput, { label: "Example field", placeholder: "Type something...", size: "xs" }),
-      /* @__PURE__ */ jsxs(Group, { justify: "flex-end", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "default", size: "xs", onClick: () => setModalOpen(false), children: "Cancel" }),
-        /* @__PURE__ */ jsx(Button, { size: "xs", onClick: () => setModalOpen(false), children: "Confirm" })
-      ] })
-    ] }) })
-  ] });
-}
-function EditWebhookEndpointModal({ opened, endpoint, onClose }) {
-  const updateEndpoint = useUpdateWebhookEndpoint();
-  const { data: resourcesData } = useResources();
-  const resourceOptions = useMemo(() => {
-    if (!resourcesData) return [];
-    const workflowOptions = (resourcesData.workflows || []).filter((w) => w?.resourceId).map((w) => ({
-      value: w.resourceId,
-      label: `Workflow: ${w.resourceId}`
-    }));
-    const agentOptions = (resourcesData.agents || []).filter((a) => a?.resourceId).map((a) => ({
-      value: a.resourceId,
-      label: `Agent: ${a.resourceId}`
-    }));
-    return [...workflowOptions, ...agentOptions];
-  }, [resourcesData]);
-  const form = useForm({
-    initialValues: {
-      name: "",
-      resourceId: ""
-    },
-    validate: {
-      name: (value) => {
-        if (!value.trim()) return "Name is required";
-        if (value.trim().length < 2) return "Name must be at least 2 characters";
-        if (value.trim().length > 100) return "Name must be less than 100 characters";
-        return null;
-      }
-    }
-  });
-  useEffect(() => {
-    if (endpoint && opened) {
-      form.setValues({
-        name: endpoint.name,
-        resourceId: endpoint.resourceId ?? ""
-      });
-    }
-  }, [endpoint, opened]);
-  const handleSubmit = async (values) => {
-    if (!endpoint) return;
-    try {
-      await updateEndpoint.mutateAsync({
-        endpointId: endpoint.id,
-        data: {
-          name: values.name.trim(),
-          resourceId: values.resourceId || void 0
-        }
-      });
-      onClose();
-    } catch (error) {
-      console.error("Failed to update webhook endpoint:", error);
-    }
-  };
-  const handleClose = () => {
-    if (!updateEndpoint.isPending) {
-      onClose();
-    }
-  };
-  return /* @__PURE__ */ jsx(CustomModal, { opened, onClose: handleClose, size: "md", loading: updateEndpoint.isPending, children: /* @__PURE__ */ jsx("form", { onSubmit: form.onSubmit(handleSubmit), children: /* @__PURE__ */ jsxs(Stack, { children: [
-    /* @__PURE__ */ jsx(Title, { order: 3, children: "Edit Webhook Endpoint" }),
-    /* @__PURE__ */ jsx(
-      TextInput,
-      {
-        label: "Name",
-        description: "A descriptive label for this endpoint",
-        leftSection: /* @__PURE__ */ jsx(IconWebhook, { size: 16 }),
-        required: true,
-        ...form.getInputProps("name"),
-        disabled: updateEndpoint.isPending
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        label: "Target Resource",
-        description: "The workflow or agent to trigger on each inbound request",
-        placeholder: resourcesData ? "Select a workflow or agent" : "Loading resources...",
-        data: resourceOptions,
-        searchable: true,
-        clearable: true,
-        ...form.getInputProps("resourceId"),
-        disabled: !resourcesData || updateEndpoint.isPending
-      }
-    ),
-    updateEndpoint.error && /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconExclamationMark, { size: 16 }), color: "red", children: updateEndpoint.error instanceof Error ? updateEndpoint.error.message : "An error occurred while updating the webhook endpoint" }),
-    /* @__PURE__ */ jsxs(Group, { justify: "flex-end", gap: "sm", children: [
-      /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: handleClose, disabled: updateEndpoint.isPending, children: "Cancel" }),
-      /* @__PURE__ */ jsx(Button, { type: "submit", loading: updateEndpoint.isPending, leftSection: /* @__PURE__ */ jsx(IconPencil, { size: 16 }), children: "Save Changes" })
-    ] })
-  ] }) }) });
-}
-function formatKeyDisplay(keyPrefix) {
-  if (!keyPrefix) return "Unavailable";
-  return `${keyPrefix}...`;
-}
-function WebhookEndpointList({ endpoints, isLoading }) {
-  const [deleteTarget, setDeleteTarget] = useState(null);
-  const [editTarget, setEditTarget] = useState(null);
-  const deleteMutation = useDeleteWebhookEndpoint();
-  const updateMutation = useUpdateWebhookEndpoint();
-  const handleDelete = () => {
-    if (deleteTarget) {
-      deleteMutation.mutate(deleteTarget.id);
-      setDeleteTarget(null);
-    }
-  };
-  const handleCloseDelete = () => {
-    if (!deleteMutation.isPending) {
-      setDeleteTarget(null);
-    }
-  };
-  const handleToggleStatus = (endpoint) => {
-    const newStatus = endpoint.status === "active" ? "paused" : "active";
-    updateMutation.mutate({ endpointId: endpoint.id, data: { status: newStatus } });
-  };
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(ListSkeleton, { rows: 3, rowHeight: 50 });
-  }
-  if (endpoints.length === 0) {
-    return /* @__PURE__ */ jsx(
-      EmptyState,
-      {
-        icon: IconWebhook,
-        title: "No webhook endpoints yet",
-        description: "Create your first webhook endpoint to let third-party apps trigger your resources"
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
-        /* @__PURE__ */ jsx(Table.Th, { children: "Name" }),
-        /* @__PURE__ */ jsx(Table.Th, { children: "Status" }),
-        /* @__PURE__ */ jsx(Table.Th, { children: "Target Resource" }),
-        /* @__PURE__ */ jsx(Table.Th, { children: "Key" }),
-        /* @__PURE__ */ jsx(Table.Th, { children: "Last Triggered" }),
-        /* @__PURE__ */ jsx(Table.Th, { children: "Requests" }),
-        /* @__PURE__ */ jsx(Table.Th, { w: 120 })
-      ] }) }),
-      /* @__PURE__ */ jsx(Table.Tbody, { children: endpoints.map((endpoint) => {
-        const keyDisplay = formatKeyDisplay(endpoint.keyPrefix);
-        const isToggling = updateMutation.isPending;
-        return /* @__PURE__ */ jsxs(Table.Tr, { children: [
-          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-            /* @__PURE__ */ jsx(IconWebhook, { size: 16, style: { opacity: 0.6 } }),
-            /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
-              /* @__PURE__ */ jsx(Text, { fw: 500, children: endpoint.name }),
-              endpoint.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: endpoint.description })
-            ] })
-          ] }) }),
-          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { color: endpoint.status === "active" ? "teal" : "gray", variant: "light", children: endpoint.status }) }),
-          /* @__PURE__ */ jsx(Table.Td, { children: endpoint.resourceId ? /* @__PURE__ */ jsx(Code, { children: endpoint.resourceId }) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "Not configured" }) }),
-          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              label: "Full URL is shown only at creation. Use the prefix to identify which endpoint this is.",
-              position: "top",
-              children: /* @__PURE__ */ jsx(Paper, { withBorder: true, style: { display: "inline-flex", alignItems: "center", padding: "2px 8px" }, children: /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", ff: "monospace", style: { userSelect: "all" }, children: keyDisplay }) })
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
-            /* @__PURE__ */ jsx(IconClock, { size: 14, style: { opacity: 0.5 } }),
-            /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: formatDateTime(endpoint.lastTriggeredAt) })
-          ] }) }),
-          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: endpoint.requestCount.toLocaleString() }) }),
-          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", justify: "flex-end", children: [
-            /* @__PURE__ */ jsx(Tooltip, { label: "Edit endpoint", position: "left", children: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", color: "blue", onClick: () => setEditTarget(endpoint), children: /* @__PURE__ */ jsx(IconPencil, { size: 16 }) }) }),
-            /* @__PURE__ */ jsx(
-              Tooltip,
-              {
-                label: endpoint.status === "active" ? "Pause endpoint" : "Resume endpoint",
-                position: "left",
-                children: /* @__PURE__ */ jsx(
-                  ActionIcon,
-                  {
-                    variant: "subtle",
-                    color: endpoint.status === "active" ? "yellow" : "teal",
-                    onClick: () => handleToggleStatus(endpoint),
-                    disabled: isToggling,
-                    children: endpoint.status === "active" ? /* @__PURE__ */ jsx(IconPlayerPause, { size: 16 }) : /* @__PURE__ */ jsx(IconPlayerPlay, { size: 16 })
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(Tooltip, { label: "Delete endpoint", position: "left", children: /* @__PURE__ */ jsx(
-              ActionIcon,
-              {
-                variant: "subtle",
-                color: "red",
-                onClick: () => setDeleteTarget(endpoint),
-                disabled: deleteMutation.isPending,
-                children: /* @__PURE__ */ jsx(IconTrash, { size: 16 })
-              }
-            ) })
-          ] }) })
-        ] }, endpoint.id);
-      }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", tt: "uppercase", fw: 600, children: "Alerts" }),
+          /* @__PURE__ */ jsx(Alert, { variant: "light", color: "blue", icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), title: "Informational", children: "This is how informational alerts look with your current theme." }),
+          /* @__PURE__ */ jsx(Alert, { variant: "light", color: "green", icon: /* @__PURE__ */ jsx(IconCheck, { size: 16 }), title: "Success", children: "Operation completed successfully." })
+        ] })
+      ] })
     ] }),
-    /* @__PURE__ */ jsx(EditWebhookEndpointModal, { opened: !!editTarget, endpoint: editTarget, onClose: () => setEditTarget(null) }),
-    /* @__PURE__ */ jsx(CustomModal, { opened: !!deleteTarget, onClose: handleCloseDelete, size: "md", loading: deleteMutation.isPending, children: /* @__PURE__ */ jsxs(Stack, { children: [
-      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-        /* @__PURE__ */ jsx(IconAlertTriangle, { size: 24, color: "var(--color-error)" }),
-        /* @__PURE__ */ jsx(Title, { order: 3, children: "Delete Webhook Endpoint" })
-      ] }),
+    /* @__PURE__ */ jsx(CustomModal, { opened: modalOpen, onClose: () => setModalOpen(false), size: "md", children: /* @__PURE__ */ jsxs(Stack, { gap: "md", p: "md", children: [
+      /* @__PURE__ */ jsx(Title, { order: 3, children: "Modal Preview" }),
       /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
-        "Are you sure you want to delete",
+        "Modals should sit visibly above the page background. Elevation comes from the",
         " ",
-        /* @__PURE__ */ jsxs(Text, { span: true, fw: 600, children: [
-          '"',
-          deleteTarget?.name,
-          '"'
-        ] }),
-        "?"
+        /* @__PURE__ */ jsx(Text, { span: true, ff: "monospace", size: "sm", children: "--color-elevated" }),
+        " ",
+        "token, which every preset defines as an opaque surface."
       ] }),
-      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "This action cannot be undone. Any third-party apps posting to this URL will receive a 404. The URL and its key will be permanently revoked." }),
-      /* @__PURE__ */ jsxs(Group, { justify: "space-between", gap: "sm", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "light", onClick: handleCloseDelete, disabled: deleteMutation.isPending, children: "Cancel" }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            color: "red",
-            onClick: handleDelete,
-            loading: deleteMutation.isPending,
-            leftSection: /* @__PURE__ */ jsx(IconTrash, { size: 16 }),
-            children: "Delete Endpoint"
-          }
-        )
+      /* @__PURE__ */ jsx(TextInput, { label: "Example field", placeholder: "Type something...", size: "xs" }),
+      /* @__PURE__ */ jsxs(Group, { justify: "flex-end", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "default", size: "xs", onClick: () => setModalOpen(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { size: "xs", onClick: () => setModalOpen(false), children: "Confirm" })
       ] })
     ] }) })
   ] });
 }
-function CreateWebhookEndpointModal({ opened, onClose, onSuccess }) {
-  const createEndpoint = useCreateWebhookEndpoint();
+function EditWebhookEndpointModal({ opened, endpoint, onClose }) {
+  const updateEndpoint = useUpdateWebhookEndpoint();
   const { data: resourcesData } = useResources();
   const resourceOptions = useMemo(() => {
     if (!resourcesData) return [];
@@ -1383,8 +883,7 @@ function CreateWebhookEndpointModal({ opened, onClose, onSuccess }) {
   const form = useForm({
     initialValues: {
       name: "",
-      resourceId: "",
-      description: ""
+      resourceId: ""
     },
     validate: {
       name: (value) => {
@@ -1395,833 +894,703 @@ function CreateWebhookEndpointModal({ opened, onClose, onSuccess }) {
       }
     }
   });
+  useEffect(() => {
+    if (endpoint && opened) {
+      form.setValues({
+        name: endpoint.name,
+        resourceId: endpoint.resourceId ?? ""
+      });
+    }
+  }, [endpoint, opened]);
   const handleSubmit = async (values) => {
+    if (!endpoint) return;
     try {
-      const result = await createEndpoint.mutateAsync({
-        name: values.name.trim(),
-        ...values.resourceId ? { resourceId: values.resourceId } : {},
-        ...values.description.trim() ? { description: values.description.trim() } : {}
+      await updateEndpoint.mutateAsync({
+        endpointId: endpoint.id,
+        data: {
+          name: values.name.trim(),
+          resourceId: values.resourceId || void 0
+        }
       });
-      form.reset();
-      onSuccess(result);
+      onClose();
     } catch (error) {
-      console.error("Failed to create webhook endpoint:", error);
+      console.error("Failed to update webhook endpoint:", error);
     }
   };
   const handleClose = () => {
-    if (!createEndpoint.isPending) {
-      form.reset();
+    if (!updateEndpoint.isPending) {
       onClose();
     }
   };
-  return /* @__PURE__ */ jsx(CustomModal, { opened, onClose: handleClose, size: "md", loading: createEndpoint.isPending, children: /* @__PURE__ */ jsx("form", { onSubmit: form.onSubmit(handleSubmit), children: /* @__PURE__ */ jsxs(Stack, { children: [
-    /* @__PURE__ */ jsx(Title, { order: 3, children: "Create Webhook Endpoint" }),
-    /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconExclamationMark, { size: 16 }), color: "blue", children: "A unique URL will be generated that any third-party app can POST to, triggering your target resource. The URL contains a secret key \u2014 treat it like a credential." }),
+  return /* @__PURE__ */ jsx(CustomModal, { opened, onClose: handleClose, size: "md", loading: updateEndpoint.isPending, children: /* @__PURE__ */ jsx("form", { onSubmit: form.onSubmit(handleSubmit), children: /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(Title, { order: 3, children: "Edit Webhook Endpoint" }),
     /* @__PURE__ */ jsx(
       TextInput,
-      {
-        label: "Name",
-        description: "A descriptive label for this endpoint",
-        placeholder: "e.g., Zapier Lead Intake, Typeform Responses",
-        leftSection: /* @__PURE__ */ jsx(IconWebhook, { size: 16 }),
-        required: true,
-        ...form.getInputProps("name"),
-        disabled: createEndpoint.isPending
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        label: "Target Resource",
-        description: "The workflow or agent to trigger on each inbound request (can be set later)",
-        placeholder: resourcesData ? "Select a workflow or agent" : "Loading resources...",
-        data: resourceOptions,
-        searchable: true,
-        clearable: true,
-        ...form.getInputProps("resourceId"),
-        disabled: !resourcesData || createEndpoint.isPending
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        label: "Description",
-        description: "Optional notes about what this endpoint is for",
-        placeholder: "e.g., Receives new lead submissions from Zapier",
-        rows: 3,
-        ...form.getInputProps("description"),
-        disabled: createEndpoint.isPending
-      }
-    ),
-    createEndpoint.error && /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconExclamationMark, { size: 16 }), color: "red", children: createEndpoint.error instanceof Error ? createEndpoint.error.message : "An error occurred while creating the webhook endpoint" }),
-    /* @__PURE__ */ jsxs(Group, { justify: "flex-end", gap: "sm", children: [
-      /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: handleClose, disabled: createEndpoint.isPending, children: "Cancel" }),
-      /* @__PURE__ */ jsx(Button, { type: "submit", loading: createEndpoint.isPending, leftSection: /* @__PURE__ */ jsx(IconWebhook, { size: 16 }), children: "Create Endpoint" })
-    ] })
-  ] }) }) });
-}
-function getWebhookUrl(apiUrl, key) {
-  return `${apiUrl}/api/webhooks/inbound/${key}`;
-}
-function WebhookEndpointSettings({ apiUrl }) {
-  const { organizationReady } = useInitialization();
-  const [showCreateModal, setShowCreateModal] = useState(false);
-  const [newEndpoint, setNewEndpoint] = useState(null);
-  const { data: endpoints = [], isLoading } = useListWebhookEndpoints();
-  if (!organizationReady) return /* @__PURE__ */ jsx(AppShellLoader, {});
-  const handleEndpointCreated = (endpoint) => {
-    setNewEndpoint(endpoint);
-    setShowCreateModal(false);
-  };
-  const activeCount = endpoints.filter((e) => e.status === "active").length;
-  const totalRequests = endpoints.reduce((sum, e) => sum + e.requestCount, 0);
-  return /* @__PURE__ */ jsxs(Stack, { children: [
-    /* @__PURE__ */ jsx(
-      PageTitleCaption,
-      {
-        title: "Webhooks",
-        caption: "Create webhook URLs that third-party apps can send data to, triggering your resources.",
-        rightSection: /* @__PURE__ */ jsx(Button, { leftSection: /* @__PURE__ */ jsx(IconPlus, { size: 16 }), onClick: () => setShowCreateModal(true), variant: "light", children: "Create Endpoint" })
-      }
-    ),
-    /* @__PURE__ */ jsxs(SimpleGrid, { cols: 2, children: [
-      /* @__PURE__ */ jsx(
-        StatCard,
-        {
-          variant: "hero",
-          icon: IconWebhook,
-          value: activeCount,
-          label: "Active Endpoints",
-          isLoading
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        StatCard,
-        {
-          variant: "hero",
-          icon: IconActivity,
-          value: totalRequests,
-          label: "Total Requests",
-          isLoading
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(WebhookEndpointList, { endpoints, isLoading }) }),
-    /* @__PURE__ */ jsx(
-      CreateWebhookEndpointModal,
-      {
-        opened: showCreateModal,
-        onClose: () => setShowCreateModal(false),
-        onSuccess: handleEndpointCreated
-      }
-    ),
-    newEndpoint && newEndpoint.key && /* @__PURE__ */ jsx(
-      WebhookUrlDisplayModal,
-      {
-        opened: true,
-        endpoint: newEndpoint,
-        webhookUrl: getWebhookUrl(apiUrl, newEndpoint.key),
-        onClose: () => setNewEndpoint(null)
-      }
-    )
-  ] });
-}
-function diffRoles(current, next) {
-  const adds = next.filter((id) => !current.includes(id));
-  const removes = current.filter((id) => !next.includes(id));
-  return { adds, removes };
-}
-function MemberAccessModal({ opened, onClose, orgId, member, defaultTab = "roles" }) {
-  const [activeTab, setActiveTab] = useState(defaultTab);
-  useEffect(() => {
-    if (opened) setActiveTab(defaultTab);
-  }, [opened, defaultTab]);
-  const handleClose = () => {
-    onClose();
-  };
-  if (!member) return null;
-  return /* @__PURE__ */ jsx(CustomModal, { opened, onClose: handleClose, size: "xl", children: /* @__PURE__ */ jsxs(Stack, { p: "md", gap: "md", children: [
-    /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
-      /* @__PURE__ */ jsx(Title, { order: 3, children: "Member access" }),
-      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-        /* @__PURE__ */ jsx(Text, { fw: 500, children: member.name }),
-        /* @__PURE__ */ jsx(Badge, { variant: "light", size: "sm", children: member.role })
-      ] }),
-      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: member.email })
-    ] }),
-    activeTab === "roles" && /* @__PURE__ */ jsx(RolesTabPanel, { orgId, member, onSaved: onClose })
-  ] }) });
-}
-function RolesTabPanel({ orgId, member, onSaved }) {
-  const { data: rolesData, isLoading: rolesLoading } = useOrgRoles(orgId ? brandSupabaseOrgId(orgId) : void 0);
-  const assignMutation = useAssignRole();
-  const revokeMutation = useRevokeRole();
-  const canManagePrivileged = useAccess(AccessKeys.rolesManage).allowed;
-  const allRoles = rolesData?.roles ?? [];
-  const currentRoleIds = useMemo(() => {
-    const matched = allRoles.find((r) => r.slug === member.role);
-    return matched ? [matched.id] : [];
-  }, [allRoles, member.role]);
-  const [selectedIds, setSelectedIds] = useState(currentRoleIds);
-  const [saving, setSaving] = useState(false);
-  useEffect(() => {
-    setSelectedIds(currentRoleIds);
-  }, [currentRoleIds, member.id]);
-  const options = allRoles.map((r) => ({
-    value: r.id,
-    label: r.name + (r.is_system ? " (built-in)" : ""),
-    disabled: !canManagePrivileged && (r.slug === "owner" || r.slug === "admin")
-  }));
-  const hasZeroRoles = selectedIds.length === 0;
-  const isUnchanged = selectedIds.length === currentRoleIds.length && selectedIds.every((id) => currentRoleIds.includes(id));
-  async function handleSave() {
-    if (hasZeroRoles || isUnchanged) return;
-    setSaving(true);
-    try {
-      const { adds, removes } = diffRoles(currentRoleIds, selectedIds);
-      await Promise.all([
-        ...adds.map((roleId) => assignMutation.mutateAsync({ membershipId: member.id, roleId })),
-        ...removes.map((roleId) => revokeMutation.mutateAsync({ membershipId: member.id, roleId }))
-      ]);
-      showSuccessNotification("Roles updated");
-      onSaved();
-    } catch (err) {
-      showAuthError(err);
-    } finally {
-      setSaving(false);
-    }
-  }
-  return /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
-    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Select the roles assigned to this member. Each role grants a bundle of permissions; the member's effective permissions are the union of all assigned roles." }),
+      {
+        label: "Name",
+        description: "A descriptive label for this endpoint",
+        leftSection: /* @__PURE__ */ jsx(IconWebhook, { size: 16 }),
+        required: true,
+        ...form.getInputProps("name"),
+        disabled: updateEndpoint.isPending
+      }
+    ),
     /* @__PURE__ */ jsx(
-      MultiSelect,
+      Select,
       {
-        data: options,
-        value: selectedIds,
-        onChange: setSelectedIds,
-        placeholder: rolesLoading ? "Loading roles..." : "Select roles",
-        disabled: saving || rolesLoading,
+        label: "Target Resource",
+        description: "The workflow or agent to trigger on each inbound request",
+        placeholder: resourcesData ? "Select a workflow or agent" : "Loading resources...",
+        data: resourceOptions,
         searchable: true,
-        clearable: false
+        clearable: true,
+        ...form.getInputProps("resourceId"),
+        disabled: !resourcesData || updateEndpoint.isPending
       }
     ),
-    !canManagePrivileged && /* @__PURE__ */ jsxs(Alert, { color: "blue", variant: "light", children: [
-      "Only owners (with ",
-      /* @__PURE__ */ jsx("code", { children: "roles.manage" }),
-      ") can grant or revoke the owner / admin system roles."
-    ] }),
-    !rolesLoading && hasZeroRoles && currentRoleIds.length > 0 && /* @__PURE__ */ jsx(Text, { size: "xs", c: "red", children: "At least one role is required for an active membership." }),
-    /* @__PURE__ */ jsxs(Group, { justify: "flex-end", mt: "md", children: [
-      /* @__PURE__ */ jsx(Button, { variant: "default", onClick: onSaved, disabled: saving, children: "Cancel" }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          leftSection: /* @__PURE__ */ jsx(IconCheck, { size: 14 }),
-          loading: saving,
-          disabled: hasZeroRoles || isUnchanged,
-          onClick: handleSave,
-          children: "Save roles"
-        }
-      )
+    updateEndpoint.error && /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconExclamationMark, { size: 16 }), color: "red", children: updateEndpoint.error instanceof Error ? updateEndpoint.error.message : "An error occurred while updating the webhook endpoint" }),
+    /* @__PURE__ */ jsxs(Group, { justify: "flex-end", gap: "sm", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: handleClose, disabled: updateEndpoint.isPending, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", loading: updateEndpoint.isPending, leftSection: /* @__PURE__ */ jsx(IconPencil, { size: 16 }), children: "Save Changes" })
     ] })
-  ] });
+  ] }) }) });
 }
-function transformMemberForModal(member) {
-  const firstName = member.user?.firstName || "";
-  const lastName = member.user?.lastName || "";
-  const name = firstName && lastName ? `${firstName} ${lastName}` : member.user?.email || "Unknown User";
-  return {
-    id: member.id,
-    name,
-    email: member.user?.email || "Unknown",
-    role: member.role.slug
-  };
+function formatKeyDisplay(keyPrefix) {
+  if (!keyPrefix) return "Unavailable";
+  return `${keyPrefix}...`;
 }
-function OrgMembersList({ orgId }) {
-  const { data: members, isLoading, error } = useOrganizationMembers(brandSupabaseOrgId(orgId));
-  const [selectedMember, setSelectedMember] = useState(null);
-  const [modalOpened, setModalOpened] = useState(false);
-  const [defaultTab, setDefaultTab] = useState("roles");
-  const openModal2 = (member, tab) => {
-    setSelectedMember(member);
-    setDefaultTab(tab);
-    setModalOpened(true);
+function WebhookEndpointList({ endpoints, isLoading }) {
+  const [deleteTarget, setDeleteTarget] = useState(null);
+  const [editTarget, setEditTarget] = useState(null);
+  const deleteMutation = useDeleteWebhookEndpoint();
+  const updateMutation = useUpdateWebhookEndpoint();
+  const handleDelete = () => {
+    if (deleteTarget) {
+      deleteMutation.mutate(deleteTarget.id);
+      setDeleteTarget(null);
+    }
   };
-  const handleModalClose = () => {
-    setModalOpened(false);
-    setSelectedMember(null);
+  const handleCloseDelete = () => {
+    if (!deleteMutation.isPending) {
+      setDeleteTarget(null);
+    }
+  };
+  const handleToggleStatus = (endpoint) => {
+    const newStatus = endpoint.status === "active" ? "paused" : "active";
+    updateMutation.mutate({ endpointId: endpoint.id, data: { status: newStatus } });
   };
   if (isLoading) {
-    return /* @__PURE__ */ jsx(Center, { py: "xl", children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: "sm", children: [
-      /* @__PURE__ */ jsx(Loader, { size: "md" }),
-      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Loading members..." })
-    ] }) });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsx(APIErrorAlert, { error, title: "Error loading members" });
+    return /* @__PURE__ */ jsx(ListSkeleton, { rows: 3, rowHeight: 50 });
   }
-  if (!members || members.length === 0) {
-    return /* @__PURE__ */ jsx(EmptyState, { icon: IconUsers, title: "No members found" });
+  if (endpoints.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: IconWebhook,
+        title: "No webhook endpoints yet",
+        description: "Create your first webhook endpoint to let third-party apps trigger your resources"
+      }
+    );
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Table.ScrollContainer, { minWidth: 500, children: /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsxs(Table, { children: [
       /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
         /* @__PURE__ */ jsx(Table.Th, { children: "Name" }),
-        /* @__PURE__ */ jsx(Table.Th, { children: "Email" }),
-        /* @__PURE__ */ jsx(Table.Th, { children: "Role" }),
         /* @__PURE__ */ jsx(Table.Th, { children: "Status" }),
-        /* @__PURE__ */ jsx(Table.Th, { children: "Actions" })
+        /* @__PURE__ */ jsx(Table.Th, { children: "Target Resource" }),
+        /* @__PURE__ */ jsx(Table.Th, { children: "Key" }),
+        /* @__PURE__ */ jsx(Table.Th, { children: "Last Triggered" }),
+        /* @__PURE__ */ jsx(Table.Th, { children: "Requests" }),
+        /* @__PURE__ */ jsx(Table.Th, { w: 120 })
       ] }) }),
-      /* @__PURE__ */ jsx(Table.Tbody, { children: members.map((member) => {
-        const firstName = member.user?.firstName || "";
-        const lastName = member.user?.lastName || "";
-        const displayName = firstName && lastName ? `${firstName} ${lastName}` : member.user?.email || "Unknown User";
+      /* @__PURE__ */ jsx(Table.Tbody, { children: endpoints.map((endpoint) => {
+        const keyDisplay = formatKeyDisplay(endpoint.keyPrefix);
+        const isToggling = updateMutation.isPending;
         return /* @__PURE__ */ jsxs(Table.Tr, { children: [
-          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { fw: 500, size: "sm", children: displayName }) }),
-          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: member.user?.email || "Unknown" }) }),
-          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(
-            RoleBadge,
-            {
-              slug: member.role.slug,
-              name: member.role.slug.charAt(0).toUpperCase() + member.role.slug.slice(1),
-              isSystem: true
-            }
-          ) }),
           /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-            /* @__PURE__ */ jsx(MembershipStatusBadge, { status: member.status }),
-            /* @__PURE__ */ jsx(ProvisioningStateBadge, { state: member.provisioningState })
+            /* @__PURE__ */ jsx(IconWebhook, { size: 16, style: { opacity: 0.6 } }),
+            /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+              /* @__PURE__ */ jsx(Text, { fw: 500, children: endpoint.name }),
+              endpoint.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: endpoint.description })
+            ] })
           ] }) }),
-          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Tooltip, { label: "Edit member access", withArrow: true, children: /* @__PURE__ */ jsx(ActionIcon, { variant: "light", size: "sm", color: "gray", onClick: () => openModal2(member, "roles"), children: /* @__PURE__ */ jsx(IconPencil, { size: 14 }) }) }) })
-        ] }, member.id);
-      }) })
-    ] }) }),
-    /* @__PURE__ */ jsx(
-      MemberAccessModal,
-      {
-        opened: modalOpened,
-        onClose: handleModalClose,
-        orgId,
-        member: selectedMember ? transformMemberForModal(selectedMember) : null,
-        defaultTab
-      }
-    )
-  ] });
-}
-function OrganizationSettings({ user, currentMembership, isOrgAdmin }) {
-  return /* @__PURE__ */ jsxs(Stack, { children: [
-    /* @__PURE__ */ jsx(PageTitleCaption, { title: "Organization Settings", caption: "Manage your current organization" }),
-    currentMembership?.organization && /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
-      /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
-        /* @__PURE__ */ jsx(ThemeIcon, { size: "lg", variant: "light", color: "green", children: /* @__PURE__ */ jsx(IconBuilding, { size: 18 }) }),
-        /* @__PURE__ */ jsxs(Stack, { gap: 2, style: { flex: 1 }, children: [
-          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Current Organization" }),
-          /* @__PURE__ */ jsx(Text, { size: "lg", fw: 600, style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, children: currentMembership.organization.name })
-        ] }),
-        /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-          /* @__PURE__ */ jsx(Code, { children: currentMembership.organization.id }),
-          /* @__PURE__ */ jsx(CopyButton, { value: currentMembership.organization.id, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied!" : "Copy ID", withArrow: true, position: "top", children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              color: copied ? "teal" : "gray",
-              variant: copied ? "filled" : "subtle",
-              onClick: copy,
-              size: "sm",
-              children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy, { size: 14 })
-            }
-          ) }) })
-        ] })
-      ] }),
-      user && /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
-        /* @__PURE__ */ jsx(ThemeIcon, { size: "lg", variant: "light", color: "blue", children: /* @__PURE__ */ jsx(IconUsers, { size: 18 }) }),
-        /* @__PURE__ */ jsxs(Stack, { gap: 2, style: { flex: 1 }, children: [
-          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Signed in as" }),
-          /* @__PURE__ */ jsxs(Text, { size: "lg", fw: 600, style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, children: [
-            user.firstName,
-            " ",
-            user.lastName,
-            " \u2022 ",
-            user.email
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-          /* @__PURE__ */ jsx(Code, { children: currentMembership.userId }),
-          /* @__PURE__ */ jsx(CopyButton, { value: currentMembership.userId, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied!" : "Copy User ID", withArrow: true, position: "top", children: /* @__PURE__ */ jsx(
-            ActionIcon,
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { color: endpoint.status === "active" ? "teal" : "gray", variant: "light", children: endpoint.status }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: endpoint.resourceId ? /* @__PURE__ */ jsx(Code, { children: endpoint.resourceId }) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "Not configured" }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(
+            Tooltip,
             {
-              color: copied ? "teal" : "gray",
-              variant: copied ? "filled" : "subtle",
-              onClick: copy,
-              size: "sm",
-              children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy, { size: 14 })
+              label: "Full URL is shown only at creation. Use the prefix to identify which endpoint this is.",
+              position: "top",
+              children: /* @__PURE__ */ jsx(Paper, { withBorder: true, style: { display: "inline-flex", alignItems: "center", padding: "2px 8px" }, children: /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", ff: "monospace", style: { userSelect: "all" }, children: keyDisplay }) })
             }
-          ) }) })
-        ] })
-      ] })
-    ] }) }),
-    isOrgAdmin && currentMembership?.organization && /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { children: [
-      /* @__PURE__ */ jsx(
-        CardHeader,
-        {
-          icon: /* @__PURE__ */ jsx(IconUsers, { size: 18 }),
-          title: "Manage Members",
-          subtitle: "Configure feature access for organization members."
-        }
-      ),
-      /* @__PURE__ */ jsx(OrgMembersList, { orgId: currentMembership.organization.id })
-    ] }) })
-  ] });
-}
-function capitalize(value) {
-  return value.charAt(0).toUpperCase() + value.slice(1);
-}
-function MyRolesPage({ onManageMembers, onManageOrganizationRoles }) {
-  const { currentMembership } = useOrganization();
-  const orgName = currentMembership?.organization?.name ?? "this organization";
-  const access = useAccess("platform");
-  const { permissions, isReady: permissionsReady, isPlatformAdmin } = access;
-  const catalogQuery = usePermissionCatalog();
-  const catalogMap = new Map(
-    (catalogQuery.data?.permissions ?? []).map((permission) => [permission.key, permission.description])
-  );
-  const roleSlug = currentMembership?.role?.slug ?? null;
-  const isLoading = !permissionsReady || catalogQuery.isLoading;
-  const showManagePanel = Boolean(onManageMembers || onManageOrganizationRoles);
-  const groupedPermissions = permissions.reduce((groups, key) => {
-    const domain = key.split(".")[0] ?? "general";
-    groups[domain] ??= [];
-    groups[domain].push(key);
-    return groups;
-  }, {});
-  return /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
-    /* @__PURE__ */ jsx(PageTitleCaption, { title: "My Roles", caption: `Roles assigned to you in ${orgName} and what each one lets you do.` }),
-    /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", children: /* @__PURE__ */ jsxs(Stack, { children: [
-      /* @__PURE__ */ jsx(
-        CardHeader,
-        {
-          icon: /* @__PURE__ */ jsx(IconShieldLock, { size: 18 }),
-          title: "Your roles",
-          subtitle: `Roles assigned to your membership in ${orgName}.`
-        }
-      ),
+          ) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+            /* @__PURE__ */ jsx(IconClock, { size: 14, style: { opacity: 0.5 } }),
+            /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: formatDateTime(endpoint.lastTriggeredAt) })
+          ] }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: endpoint.requestCount.toLocaleString() }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", justify: "flex-end", children: [
+            /* @__PURE__ */ jsx(Tooltip, { label: "Edit endpoint", position: "left", children: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", color: "blue", onClick: () => setEditTarget(endpoint), children: /* @__PURE__ */ jsx(IconPencil, { size: 16 }) }) }),
+            /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                label: endpoint.status === "active" ? "Pause endpoint" : "Resume endpoint",
+                position: "left",
+                children: /* @__PURE__ */ jsx(
+                  ActionIcon,
+                  {
+                    variant: "subtle",
+                    color: endpoint.status === "active" ? "yellow" : "teal",
+                    onClick: () => handleToggleStatus(endpoint),
+                    disabled: isToggling,
+                    children: endpoint.status === "active" ? /* @__PURE__ */ jsx(IconPlayerPause, { size: 16 }) : /* @__PURE__ */ jsx(IconPlayerPlay, { size: 16 })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip, { label: "Delete endpoint", position: "left", children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                variant: "subtle",
+                color: "red",
+                onClick: () => setDeleteTarget(endpoint),
+                disabled: deleteMutation.isPending,
+                children: /* @__PURE__ */ jsx(IconTrash, { size: 16 })
+              }
+            ) })
+          ] }) })
+        ] }, endpoint.id);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx(EditWebhookEndpointModal, { opened: !!editTarget, endpoint: editTarget, onClose: () => setEditTarget(null) }),
+    /* @__PURE__ */ jsx(CustomModal, { opened: !!deleteTarget, onClose: handleCloseDelete, size: "md", loading: deleteMutation.isPending, children: /* @__PURE__ */ jsxs(Stack, { children: [
       /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-        roleSlug ? /* @__PURE__ */ jsx(RoleBadge, { slug: roleSlug, name: capitalize(roleSlug), isSystem: true }) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No roles assigned yet." }),
-        isPlatformAdmin && /* @__PURE__ */ jsx(Badge, { color: "grape", variant: "light", leftSection: /* @__PURE__ */ jsx(IconStar, { size: 12 }), children: "Platform admin" })
+        /* @__PURE__ */ jsx(IconAlertTriangle, { size: 24, color: "var(--color-error)" }),
+        /* @__PURE__ */ jsx(Title, { order: 3, children: "Delete Webhook Endpoint" })
       ] }),
-      isPlatformAdmin && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Platform admin bypasses every org-level permission check; you have full access regardless of role." })
-    ] }) }),
-    /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", children: /* @__PURE__ */ jsxs(Stack, { children: [
-      /* @__PURE__ */ jsx(
-        CardHeader,
-        {
-          icon: /* @__PURE__ */ jsx(IconCheck, { size: 18 }),
-          title: "What you can do",
-          subtitle: isPlatformAdmin ? "Showing all platform permissions (platform admin bypass)." : "Permissions granted by your assigned roles."
-        }
-      ),
-      isLoading ? /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(Loader, {}) }) : permissions.length === 0 ? /* @__PURE__ */ jsx(Alert, { color: "yellow", children: "You don't have any permissions in this organization yet. Ask an admin to assign you a role." }) : /* @__PURE__ */ jsx(Stack, { gap: "md", children: Object.entries(groupedPermissions).map(([domain, keys]) => /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
-        /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, children: capitalize(domain) }),
-        keys.map((key) => /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-          /* @__PURE__ */ jsx(IconCheck, { size: 14, color: "var(--color-success)" }),
-          /* @__PURE__ */ jsx(Code, { children: key }),
-          /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: catalogMap.get(key) ?? "" })
-        ] }, key))
-      ] }, domain)) })
-    ] }) }),
-    showManagePanel && /* @__PURE__ */ jsx(AccessGuard, { accessKey: AccessKeys.membersManage, children: /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", children: /* @__PURE__ */ jsxs(Stack, { children: [
-      /* @__PURE__ */ jsx(
-        CardHeader,
-        {
-          icon: /* @__PURE__ */ jsx(IconUserCog, { size: 18 }),
-          title: "Manage roles & members",
-          subtitle: "Assign roles to members, create custom roles, and edit permission sets."
-        }
-      ),
-      /* @__PURE__ */ jsxs(Group, { children: [
-        onManageMembers ? /* @__PURE__ */ jsx(Button, { variant: "light", leftSection: /* @__PURE__ */ jsx(IconUsersGroup, { size: 14 }), onClick: onManageMembers, children: "Members" }) : null,
-        onManageOrganizationRoles ? /* @__PURE__ */ jsx(AccessGuard, { accessKey: AccessKeys.organizationManage, children: /* @__PURE__ */ jsx(Button, { variant: "light", leftSection: /* @__PURE__ */ jsx(IconShieldLock, { size: 14 }), onClick: onManageOrganizationRoles, children: "Organization roles" }) }) : null
+      /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+        "Are you sure you want to delete",
+        " ",
+        /* @__PURE__ */ jsxs(Text, { span: true, fw: 600, children: [
+          '"',
+          deleteTarget?.name,
+          '"'
+        ] }),
+        "?"
+      ] }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "This action cannot be undone. Any third-party apps posting to this URL will receive a 404. The URL and its key will be permanently revoked." }),
+      /* @__PURE__ */ jsxs(Group, { justify: "space-between", gap: "sm", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "light", onClick: handleCloseDelete, disabled: deleteMutation.isPending, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            color: "red",
+            onClick: handleDelete,
+            loading: deleteMutation.isPending,
+            leftSection: /* @__PURE__ */ jsx(IconTrash, { size: 16 }),
+            children: "Delete Endpoint"
+          }
+        )
       ] })
-    ] }) }) })
+    ] }) })
   ] });
 }
-var OAUTH_COMPLETION_CHANNEL = "elevasis-oauth";
-var OAUTH_COMPLETION_STORAGE_KEY = "elevasis:oauth-complete";
-function useOAuthFlow({ apiUrl }) {
-  const [isAuthorizing, setIsAuthorizing] = useState(false);
-  const [error, setError] = useState(null);
-  const { isReady } = useElevasisServices();
-  const { getAccessToken, organizationId } = useAuthContext();
-  const authorize = useCallback(
-    async (provider, credentialName) => {
-      if (!isReady || !organizationId) {
-        setError("Organization context not ready");
-        return;
+function CreateWebhookEndpointModal({ opened, onClose, onSuccess }) {
+  const createEndpoint = useCreateWebhookEndpoint();
+  const { data: resourcesData } = useResources();
+  const resourceOptions = useMemo(() => {
+    if (!resourcesData) return [];
+    const workflowOptions = (resourcesData.workflows || []).filter((w) => w?.resourceId).map((w) => ({
+      value: w.resourceId,
+      label: `Workflow: ${w.resourceId}`
+    }));
+    const agentOptions = (resourcesData.agents || []).filter((a) => a?.resourceId).map((a) => ({
+      value: a.resourceId,
+      label: `Agent: ${a.resourceId}`
+    }));
+    return [...workflowOptions, ...agentOptions];
+  }, [resourcesData]);
+  const form = useForm({
+    initialValues: {
+      name: "",
+      resourceId: "",
+      description: ""
+    },
+    validate: {
+      name: (value) => {
+        if (!value.trim()) return "Name is required";
+        if (value.trim().length < 2) return "Name must be at least 2 characters";
+        if (value.trim().length > 100) return "Name must be less than 100 characters";
+        return null;
       }
-      setIsAuthorizing(true);
-      setError(null);
-      const width = 600;
-      const height = 700;
-      const left = Math.round(window.screen.width / 2 - width / 2);
-      const top = Math.round(window.screen.height / 2 - height / 2);
-      const popup = window.open(
-        "about:blank",
-        `oauth-${provider}`,
-        `width=${width},height=${height},left=${left},top=${top}`
-      );
-      if (!popup) {
-        setIsAuthorizing(false);
-        setError("Please enable popups and try again");
-        return;
+    }
+  });
+  const handleSubmit = async (values) => {
+    try {
+      const result = await createEndpoint.mutateAsync({
+        name: values.name.trim(),
+        ...values.resourceId ? { resourceId: values.resourceId } : {},
+        ...values.description.trim() ? { description: values.description.trim() } : {}
+      });
+      form.reset();
+      onSuccess(result);
+    } catch (error) {
+      console.error("Failed to create webhook endpoint:", error);
+    }
+  };
+  const handleClose = () => {
+    if (!createEndpoint.isPending) {
+      form.reset();
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(CustomModal, { opened, onClose: handleClose, size: "md", loading: createEndpoint.isPending, children: /* @__PURE__ */ jsx("form", { onSubmit: form.onSubmit(handleSubmit), children: /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(Title, { order: 3, children: "Create Webhook Endpoint" }),
+    /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconExclamationMark, { size: 16 }), color: "blue", children: "A unique URL will be generated that any third-party app can POST to, triggering your target resource. The URL contains a secret key \u2014 treat it like a credential." }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        label: "Name",
+        description: "A descriptive label for this endpoint",
+        placeholder: "e.g., Zapier Lead Intake, Typeform Responses",
+        leftSection: /* @__PURE__ */ jsx(IconWebhook, { size: 16 }),
+        required: true,
+        ...form.getInputProps("name"),
+        disabled: createEndpoint.isPending
       }
-      let token;
-      try {
-        token = await getAccessToken();
-      } catch {
-        popup.close();
-        setIsAuthorizing(false);
-        setError("Authorization failed. Please sign in again.");
-        return;
+    ),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        label: "Target Resource",
+        description: "The workflow or agent to trigger on each inbound request (can be set later)",
+        placeholder: resourcesData ? "Select a workflow or agent" : "Loading resources...",
+        data: resourceOptions,
+        searchable: true,
+        clearable: true,
+        ...form.getInputProps("resourceId"),
+        disabled: !resourcesData || createEndpoint.isPending
       }
-      try {
-        const authorizeUrl = new URL(`${apiUrl}/api/oauth/authorize/${provider}`);
-        authorizeUrl.searchParams.set("credentialName", credentialName);
-        authorizeUrl.searchParams.set("token", token);
-        authorizeUrl.searchParams.set("orgId", organizationId);
-        popup.location.href = authorizeUrl.toString();
-        await waitForOAuthCallback(popup, Date.now());
-      } catch (err) {
-        const rawError = err instanceof Error ? err.message : "unknown";
-        if (rawError.includes("popup_blocked")) {
-          setError("Please enable popups and try again");
-        } else if (rawError.includes("timeout")) {
-          setError("Authorization timed out. Please try again.");
-        } else if (rawError.includes("popup_closed")) {
-          setError("Authorization was cancelled.");
-        } else if (rawError.includes("token_exchange_failed")) {
-          setError("Failed to obtain access token. Please try again.");
-        } else if (rawError.includes("invalid_state")) {
-          setError("Security validation failed. Please try again.");
-        } else if (rawError.includes("state_expired")) {
-          setError("Authorization expired. Please try again.");
-        } else {
-          setError(`Failed to connect: ${rawError}`);
-        }
-        throw err;
-      } finally {
-        setIsAuthorizing(false);
+    ),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        label: "Description",
+        description: "Optional notes about what this endpoint is for",
+        placeholder: "e.g., Receives new lead submissions from Zapier",
+        rows: 3,
+        ...form.getInputProps("description"),
+        disabled: createEndpoint.isPending
+      }
+    ),
+    createEndpoint.error && /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconExclamationMark, { size: 16 }), color: "red", children: createEndpoint.error instanceof Error ? createEndpoint.error.message : "An error occurred while creating the webhook endpoint" }),
+    /* @__PURE__ */ jsxs(Group, { justify: "flex-end", gap: "sm", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: handleClose, disabled: createEndpoint.isPending, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", loading: createEndpoint.isPending, leftSection: /* @__PURE__ */ jsx(IconWebhook, { size: 16 }), children: "Create Endpoint" })
+    ] })
+  ] }) }) });
+}
+function getWebhookUrl(apiUrl, key) {
+  return `${apiUrl}/api/webhooks/inbound/${key}`;
+}
+function WebhookEndpointSettings({ apiUrl }) {
+  const { organizationReady } = useInitialization();
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [newEndpoint, setNewEndpoint] = useState(null);
+  const { data: endpoints = [], isLoading } = useListWebhookEndpoints();
+  if (!organizationReady) return /* @__PURE__ */ jsx(AppShellLoader, {});
+  const handleEndpointCreated = (endpoint) => {
+    setNewEndpoint(endpoint);
+    setShowCreateModal(false);
+  };
+  const activeCount = endpoints.filter((e) => e.status === "active").length;
+  const totalRequests = endpoints.reduce((sum, e) => sum + e.requestCount, 0);
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(
+      PageTitleCaption,
+      {
+        title: "Webhooks",
+        caption: "Create webhook URLs that third-party apps can send data to, triggering your resources.",
+        rightSection: /* @__PURE__ */ jsx(Button, { leftSection: /* @__PURE__ */ jsx(IconPlus, { size: 16 }), onClick: () => setShowCreateModal(true), variant: "light", children: "Create Endpoint" })
       }
-    },
-    [isReady, organizationId, apiUrl, getAccessToken]
-  );
-  const waitForOAuthCallback = (popup, startedAt) => {
-    return new Promise((resolve, reject) => {
-      let broadcastChannel = null;
-      const complete = (data) => {
-        const payload = parseOAuthCompletionPayload(data, startedAt);
-        if (!payload) return;
-        cleanup();
-        if (payload.status === "success") {
-          resolve();
-        } else {
-          reject(new Error(payload.error || "oauth_failed"));
-        }
-      };
-      const messageHandler = (event) => {
-        if (!isTrustedCallbackOrigin(event.origin)) return;
-        complete(event.data);
-      };
-      const storageHandler = (event) => {
-        if (event.key !== OAUTH_COMPLETION_STORAGE_KEY || !event.newValue) return;
-        try {
-          complete(JSON.parse(event.newValue));
-        } catch {
+    ),
+    /* @__PURE__ */ jsxs(SimpleGrid, { cols: 2, children: [
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconWebhook,
+          value: activeCount,
+          label: "Active Endpoints",
+          isLoading
         }
-      };
-      const rejectIfPopupClosed = () => {
-        if (popup.closed) {
-          cleanup();
-          reject(new Error("popup_closed"));
+      ),
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconActivity,
+          value: totalRequests,
+          label: "Total Requests",
+          isLoading
         }
-      };
-      window.addEventListener("message", messageHandler);
-      window.addEventListener("storage", storageHandler);
-      window.addEventListener("focus", rejectIfPopupClosed);
-      if ("BroadcastChannel" in window) {
-        broadcastChannel = new BroadcastChannel(OAUTH_COMPLETION_CHANNEL);
-        broadcastChannel.onmessage = (event) => complete(event.data);
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(WebhookEndpointList, { endpoints, isLoading }) }),
+    /* @__PURE__ */ jsx(
+      CreateWebhookEndpointModal,
+      {
+        opened: showCreateModal,
+        onClose: () => setShowCreateModal(false),
+        onSuccess: handleEndpointCreated
       }
-      const timeout = setTimeout(() => {
-        cleanup();
-        reject(new Error("timeout"));
-      }, OAUTH_FLOW_TIMEOUT);
-      const cleanup = () => {
-        clearTimeout(timeout);
-        broadcastChannel?.close();
-        window.removeEventListener("focus", rejectIfPopupClosed);
-        window.removeEventListener("storage", storageHandler);
-        window.removeEventListener("message", messageHandler);
-      };
-    });
-  };
-  return { authorize, isAuthorizing, error };
-}
-function parseOAuthCompletionPayload(data, startedAt) {
-  if (!data || typeof data !== "object") return null;
-  const payload = data;
-  if (payload.type !== "oauth-complete") return null;
-  if (payload.completedAt && payload.completedAt < startedAt) return null;
-  return payload;
+    ),
+    newEndpoint && newEndpoint.key && /* @__PURE__ */ jsx(
+      WebhookUrlDisplayModal,
+      {
+        opened: true,
+        endpoint: newEndpoint,
+        webhookUrl: getWebhookUrl(apiUrl, newEndpoint.key),
+        onClose: () => setNewEndpoint(null)
+      }
+    )
+  ] });
 }
-function isTrustedCallbackOrigin(origin) {
-  if (origin === window.location.origin || origin === "https://app.elevasis.io") {
-    return true;
-  }
-  try {
-    const url = new URL(origin);
-    return url.protocol === "http:" && ["localhost", "127.0.0.1", "[::1]"].includes(url.hostname);
-  } catch {
-    return false;
-  }
+function diffRoles(current, next) {
+  const adds = next.filter((id) => !current.includes(id));
+  const removes = current.filter((id) => !next.includes(id));
+  return { adds, removes };
 }
-function EditCredentialModal({ apiUrl, credential, onClose }) {
-  const [credentialName, setCredentialName] = useState("");
-  const [nameError, setNameError] = useState(null);
-  const [fieldValues, setFieldValues] = useState({});
-  const { authorize, isAuthorizing, error: oauthError } = useOAuthFlow({ apiUrl });
-  const updateMutation = useUpdateCredential();
+function MemberAccessModal({ opened, onClose, orgId, member, defaultTab = "roles" }) {
+  const [activeTab, setActiveTab] = useState(defaultTab);
   useEffect(() => {
-    if (credential) {
-      setCredentialName(credential.name);
-    }
-  }, [credential]);
-  if (!credential) return null;
-  const credentialType = credential.type || "api-key";
-  const schema = getCredentialSchema(credentialType);
-  const provider = credential.provider;
-  const isOAuth = !!provider || schema.type === "oauth";
-  const hasMetadataChanged = credentialName !== credential.name;
-  const isPending = isAuthorizing || updateMutation.isPending;
+    if (opened) setActiveTab(defaultTab);
+  }, [opened, defaultTab]);
   const handleClose = () => {
-    if (!isPending) {
-      onClose();
-    }
-  };
-  const handleOAuthReconnect = async () => {
-    if (!provider) return;
-    try {
-      await authorize(provider, credential.name);
-      onClose();
-    } catch (err) {
-      console.error("Reconnect failed:", err);
-    }
-  };
-  const handleSaveChanges = async () => {
-    const nameValidation = CredentialSchemas.UpdateRequest.shape.name.safeParse(credentialName);
-    if (!nameValidation.success) {
-      setNameError(nameValidation.error.issues[0]?.message || "Invalid credential name");
-      return;
-    }
-    setNameError(null);
-    const updateData = { name: credentialName };
-    const validationResult = CredentialSchemas.UpdateRequest.safeParse(updateData);
-    if (!validationResult.success) {
-      console.error("Validation failed:", validationResult.error);
-      return;
-    }
-    try {
-      await updateMutation.mutateAsync({
-        credentialId: credential.id,
-        updates: updateData
-      });
-      onClose();
-    } catch (err) {
-      console.error("Save changes failed:", err);
-    }
+    onClose();
   };
-  const handleCredentialUpdate = async () => {
-    const hasValues = Object.values(fieldValues).some((v) => v.trim());
-    if (!hasValues) return;
+  if (!member) return null;
+  return /* @__PURE__ */ jsx(CustomModal, { opened, onClose: handleClose, size: "xl", children: /* @__PURE__ */ jsxs(Stack, { p: "md", gap: "md", children: [
+    /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+      /* @__PURE__ */ jsx(Title, { order: 3, children: "Member access" }),
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(Text, { fw: 500, children: member.name }),
+        /* @__PURE__ */ jsx(Badge, { variant: "light", size: "sm", children: member.role })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: member.email })
+    ] }),
+    activeTab === "roles" && /* @__PURE__ */ jsx(RolesTabPanel, { orgId, member, onSaved: onClose })
+  ] }) });
+}
+function RolesTabPanel({ orgId, member, onSaved }) {
+  const { data: rolesData, isLoading: rolesLoading } = useOrgRoles(orgId ?? void 0);
+  const assignMutation = useAssignRole();
+  const revokeMutation = useRevokeRole();
+  const canManagePrivileged = useAccess(AccessKeys.rolesManage).allowed;
+  const allRoles = rolesData?.roles ?? [];
+  const currentRoleIds = useMemo(() => {
+    const matched = allRoles.find((r) => r.slug === member.role);
+    return matched ? [matched.id] : [];
+  }, [allRoles, member.role]);
+  const [selectedIds, setSelectedIds] = useState(currentRoleIds);
+  const [saving, setSaving] = useState(false);
+  useEffect(() => {
+    setSelectedIds(currentRoleIds);
+  }, [currentRoleIds, member.id]);
+  const options = allRoles.map((r) => ({
+    value: r.id,
+    label: r.name + (r.is_system ? " (built-in)" : ""),
+    disabled: !canManagePrivileged && (r.slug === "owner" || r.slug === "admin")
+  }));
+  const hasZeroRoles = selectedIds.length === 0;
+  const isUnchanged = selectedIds.length === currentRoleIds.length && selectedIds.every((id) => currentRoleIds.includes(id));
+  async function handleSave() {
+    if (hasZeroRoles || isUnchanged) return;
+    setSaving(true);
     try {
-      const credentialValue = buildCredentialValue(credentialType, fieldValues);
-      const updateData = { value: credentialValue };
-      const validationResult = CredentialSchemas.UpdateRequest.safeParse(updateData);
-      if (!validationResult.success) {
-        console.error("Validation failed:", validationResult.error);
-        return;
-      }
-      await updateMutation.mutateAsync({
-        credentialId: credential.id,
-        updates: updateData
-      });
-      onClose();
+      const { adds, removes } = diffRoles(currentRoleIds, selectedIds);
+      await Promise.all([
+        ...adds.map((roleId) => assignMutation.mutateAsync({ membershipId: member.id, roleId })),
+        ...removes.map((roleId) => revokeMutation.mutateAsync({ membershipId: member.id, roleId }))
+      ]);
+      showSuccessNotification("Roles updated");
+      onSaved();
     } catch (err) {
-      console.error("Update failed:", err);
+      showAuthError(err);
+    } finally {
+      setSaving(false);
     }
-  };
-  const handleFieldChange = (key, value) => {
-    setFieldValues((prev) => ({ ...prev, [key]: value }));
-  };
-  const handleNameChange = (value) => {
-    setCredentialName(value);
-    if (nameError) setNameError(null);
-  };
-  const hasFieldValues = Object.values(fieldValues).some((v) => v.trim());
-  return /* @__PURE__ */ jsx(CustomModal, { opened: true, onClose: handleClose, loading: isPending, children: /* @__PURE__ */ jsxs(Stack, { children: [
-    /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-      /* @__PURE__ */ jsx(IconSettings, { size: 24 }),
-      /* @__PURE__ */ jsx(Title, { order: 3, children: isOAuth ? "Manage OAuth Credential" : "Edit API Key" })
-    ] }),
-    /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: "Type:" }),
-      /* @__PURE__ */ jsx(Badge, { variant: "light", size: "sm", children: schema.label })
-    ] }),
+  }
+  return /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Select the roles assigned to this member. Each role grants a bundle of permissions; the member's effective permissions are the union of all assigned roles." }),
     /* @__PURE__ */ jsx(
-      TextInput,
+      MultiSelect,
       {
-        label: "Name",
-        value: credentialName,
-        onChange: (e) => handleNameChange(e.target.value),
-        disabled: isPending,
-        maxLength: 100,
-        description: "Lowercase letters, numbers, and hyphens only (e.g., gmail-dev, notion-prod)",
-        error: nameError
+        data: options,
+        value: selectedIds,
+        onChange: setSelectedIds,
+        placeholder: rolesLoading ? "Loading roles..." : "Select roles",
+        disabled: saving || rolesLoading,
+        searchable: true,
+        clearable: false
       }
     ),
-    isOAuth && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: 'OAuth credentials are managed by the provider. You can update the name above, or click "Reconnect" to refresh your connection and update access tokens.' }),
-      oauthError && /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), color: "red", title: "Connection Failed", children: oauthError }),
-      /* @__PURE__ */ jsxs(Group, { justify: "space-between", gap: "sm", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "light", onClick: handleClose, disabled: isPending, children: "Cancel" }),
-        /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "light",
-              onClick: handleSaveChanges,
-              loading: updateMutation.isPending,
-              disabled: !hasMetadataChanged || isAuthorizing,
-              children: "Save Changes"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              color: "blue",
-              onClick: handleOAuthReconnect,
-              loading: isAuthorizing,
-              leftSection: /* @__PURE__ */ jsx(IconRefresh, { size: 16 }),
-              disabled: updateMutation.isPending,
-              children: "Reconnect OAuth"
-            }
-          )
-        ] })
-      ] })
+    !canManagePrivileged && /* @__PURE__ */ jsxs(Alert, { color: "blue", variant: "light", children: [
+      "Only owners (with ",
+      /* @__PURE__ */ jsx("code", { children: "roles.manage" }),
+      ") can grant or revoke the owner / admin system roles."
     ] }),
-    !isOAuth && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Current values are encrypted and cannot be displayed. Enter new values below to replace them." }),
-      schema.fields?.map((field) => {
-        const Input = field.type === "text" ? TextInput : PasswordInput;
-        return /* @__PURE__ */ jsx(
-          Input,
-          {
-            label: `New ${field.label}`,
-            placeholder: field.placeholder || `Enter new ${field.label.toLowerCase()}`,
-            value: fieldValues[field.key] || "",
-            onChange: (e) => handleFieldChange(field.key, e.target.value),
-            description: field.description,
-            disabled: isPending
-          },
-          field.key
-        );
-      }),
-      updateMutation.error && /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), color: "red", title: "Update Failed", children: "Failed to update credential" }),
-      /* @__PURE__ */ jsxs(Group, { justify: "space-between", gap: "sm", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "light", onClick: handleClose, disabled: isPending, children: "Cancel" }),
-        /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "light",
-              onClick: handleSaveChanges,
-              loading: updateMutation.isPending,
-              disabled: !hasMetadataChanged,
-              children: "Save Name"
-            }
-          ),
-          /* @__PURE__ */ jsx(Button, { onClick: handleCredentialUpdate, loading: updateMutation.isPending, disabled: !hasFieldValues, children: "Save Credential" })
-        ] })
-      ] })
+    !rolesLoading && hasZeroRoles && currentRoleIds.length > 0 && /* @__PURE__ */ jsx(Text, { size: "xs", c: "red", children: "At least one role is required for an active membership." }),
+    /* @__PURE__ */ jsxs(Group, { justify: "flex-end", mt: "md", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "default", onClick: onSaved, disabled: saving, children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          leftSection: /* @__PURE__ */ jsx(IconCheck, { size: 14 }),
+          loading: saving,
+          disabled: hasZeroRoles || isUnchanged,
+          onClick: handleSave,
+          children: "Save roles"
+        }
+      )
     ] })
-  ] }) });
+  ] });
 }
-var PROVIDER_ICONS = {
-  "google-sheets": IconBrandGoogleDrive,
-  dropbox: IconBrandDropbox
-};
-function OAuthIntegrationsCard({ apiUrl }) {
-  const [selectedProviderId, setSelectedProviderId] = useState(null);
-  const [modalOpened, setModalOpened] = useState(false);
-  const { authorize, isAuthorizing, error } = useOAuthFlow({ apiUrl });
-  const queryClient = useQueryClient();
-  const handleConnect = async (credentialName) => {
-    if (!selectedProviderId) return;
-    try {
-      await authorize(selectedProviderId, credentialName);
-      setModalOpened(false);
-      setSelectedProviderId(null);
-      queryClient.invalidateQueries({ queryKey: ["credentials"] });
-    } catch (err) {
-      console.error("OAuth flow failed:", err);
-    }
+function transformMemberForModal(member) {
+  const firstName = member.user?.firstName || "";
+  const lastName = member.user?.lastName || "";
+  const name = firstName && lastName ? `${firstName} ${lastName}` : member.user?.email || "Unknown User";
+  return {
+    id: member.id,
+    name,
+    email: member.user?.email || "Unknown",
+    role: member.role.slug
   };
-  const handleOpenModal = (providerId) => {
-    setSelectedProviderId(providerId);
+}
+function OrgMembersList({ orgId }) {
+  const { data: members, isLoading, error } = useOrganizationMembers(orgId);
+  const [selectedMember, setSelectedMember] = useState(null);
+  const [modalOpened, setModalOpened] = useState(false);
+  const [defaultTab, setDefaultTab] = useState("roles");
+  const openModal = (member, tab) => {
+    setSelectedMember(member);
+    setDefaultTab(tab);
     setModalOpened(true);
   };
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const requested = params.get("connect");
-    if (requested && OAUTH_PROVIDERS[requested]) {
-      handleOpenModal(requested);
-      params.delete("connect");
-      const remaining = params.toString();
-      const newUrl = window.location.pathname + (remaining ? `?${remaining}` : "") + window.location.hash;
-      window.history.replaceState({}, "", newUrl);
-    }
-  }, []);
-  const providers = Object.values(OAUTH_PROVIDERS);
-  const selectedProvider = selectedProviderId ? OAUTH_PROVIDERS[selectedProviderId] : null;
+  const handleModalClose = () => {
+    setModalOpened(false);
+    setSelectedMember(null);
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Center, { py: "xl", children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: "sm", children: [
+      /* @__PURE__ */ jsx(Loader, { size: "md" }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Loading members..." })
+    ] }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(APIErrorAlert, { error, title: "Error loading members" });
+  }
+  if (!members || members.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyState, { icon: IconUsers, title: "No members found" });
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { children: [
-      /* @__PURE__ */ jsx(Group, { justify: "space-between", children: /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Title, { order: 3, children: "OAuth Integrations" }),
-        /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", mt: 4, children: "Connect third-party services using OAuth 2.0" })
+    /* @__PURE__ */ jsx(Table.ScrollContainer, { minWidth: 500, children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+        /* @__PURE__ */ jsx(Table.Th, { children: "Name" }),
+        /* @__PURE__ */ jsx(Table.Th, { children: "Email" }),
+        /* @__PURE__ */ jsx(Table.Th, { children: "Role" }),
+        /* @__PURE__ */ jsx(Table.Th, { children: "Status" }),
+        /* @__PURE__ */ jsx(Table.Th, { children: "Actions" })
       ] }) }),
-      /* @__PURE__ */ jsx(SimpleGrid, { cols: { base: 1, sm: 2, md: 3 }, children: providers.map((provider) => {
-        const Icon = PROVIDER_ICONS[provider.id] || IconPlug;
-        return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { children: [
-          /* @__PURE__ */ jsx(Group, { justify: "space-between", align: "flex-start", children: /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
-            /* @__PURE__ */ jsx(ThemeIcon, { size: "lg", variant: "light", color: "blue", children: /* @__PURE__ */ jsx(Icon, { size: 20 }) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: provider.name }) })
+      /* @__PURE__ */ jsx(Table.Tbody, { children: members.map((member) => {
+        const firstName = member.user?.firstName || "";
+        const lastName = member.user?.lastName || "";
+        const displayName = firstName && lastName ? `${firstName} ${lastName}` : member.user?.email || "Unknown User";
+        return /* @__PURE__ */ jsxs(Table.Tr, { children: [
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { fw: 500, size: "sm", children: displayName }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: member.user?.email || "Unknown" }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(
+            RoleBadge,
+            {
+              slug: member.role.slug,
+              name: member.role.slug.charAt(0).toUpperCase() + member.role.slug.slice(1),
+              isSystem: true
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+            /* @__PURE__ */ jsx(MembershipStatusBadge, { status: member.status }),
+            /* @__PURE__ */ jsx(ProvisioningStateBadge, { state: member.provisioningState })
           ] }) }),
-          /* @__PURE__ */ jsx(Button, { variant: "filled", size: "sm", onClick: () => handleOpenModal(provider.id), fullWidth: true, children: "Connect" })
-        ] }) }, provider.id);
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Tooltip, { label: "Edit member access", withArrow: true, children: /* @__PURE__ */ jsx(ActionIcon, { variant: "light", size: "sm", color: "gray", onClick: () => openModal(member, "roles"), children: /* @__PURE__ */ jsx(IconPencil, { size: 14 }) }) }) })
+        ] }, member.id);
       }) })
     ] }) }),
     /* @__PURE__ */ jsx(
-      OAuthConnectModal,
+      MemberAccessModal,
       {
         opened: modalOpened,
-        onClose: () => {
-          setModalOpened(false);
-          setSelectedProviderId(null);
-        },
-        provider: selectedProvider,
-        onConnect: handleConnect,
-        error,
-        isLoading: isAuthorizing
+        onClose: handleModalClose,
+        orgId,
+        member: selectedMember ? transformMemberForModal(selectedMember) : null,
+        defaultTab
       }
     )
   ] });
 }
+function OrganizationSettings({
+  user,
+  currentMembership,
+  organizationId,
+  isOrgAdmin
+}) {
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(PageTitleCaption, { title: "Organization Settings", caption: "Manage your current organization" }),
+    currentMembership?.organization && /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+        /* @__PURE__ */ jsx(ThemeIcon, { size: "lg", variant: "light", color: "green", children: /* @__PURE__ */ jsx(IconBuilding, { size: 18 }) }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Current Organization" }),
+          /* @__PURE__ */ jsx(Text, { size: "lg", fw: 600, style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, children: currentMembership.organization.name })
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          /* @__PURE__ */ jsx(Code, { children: currentMembership.organization.id }),
+          /* @__PURE__ */ jsx(CopyButton, { value: currentMembership.organization.id, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied!" : "Copy ID", withArrow: true, position: "top", children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              color: copied ? "teal" : "gray",
+              variant: copied ? "filled" : "subtle",
+              onClick: copy,
+              size: "sm",
+              children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy, { size: 14 })
+            }
+          ) }) })
+        ] })
+      ] }),
+      user && /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+        /* @__PURE__ */ jsx(ThemeIcon, { size: "lg", variant: "light", color: "blue", children: /* @__PURE__ */ jsx(IconUsers, { size: 18 }) }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Signed in as" }),
+          /* @__PURE__ */ jsxs(Text, { size: "lg", fw: 600, style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, children: [
+            user.firstName,
+            " ",
+            user.lastName,
+            " \u2022 ",
+            user.email
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          /* @__PURE__ */ jsx(Code, { children: currentMembership.userId }),
+          /* @__PURE__ */ jsx(CopyButton, { value: currentMembership.userId, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied!" : "Copy User ID", withArrow: true, position: "top", children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              color: copied ? "teal" : "gray",
+              variant: copied ? "filled" : "subtle",
+              onClick: copy,
+              size: "sm",
+              children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy, { size: 14 })
+            }
+          ) }) })
+        ] })
+      ] })
+    ] }) }),
+    isOrgAdmin && organizationId && /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsx(
+        CardHeader,
+        {
+          icon: /* @__PURE__ */ jsx(IconUsers, { size: 18 }),
+          title: "Manage Members",
+          subtitle: "Configure feature access for organization members."
+        }
+      ),
+      /* @__PURE__ */ jsx(OrgMembersList, { orgId: organizationId })
+    ] }) })
+  ] });
+}
+function capitalize(value) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function MyRolesPage({ onManageMembers, onManageOrganizationRoles }) {
+  const { currentMembership } = useOrganization();
+  const orgName = currentMembership?.organization?.name ?? "this organization";
+  const access = useAccess("platform");
+  const { permissions, isReady: permissionsReady, isPlatformAdmin } = access;
+  const catalogQuery = usePermissionCatalog();
+  const catalogMap = new Map(
+    (catalogQuery.data?.permissions ?? []).map((permission) => [permission.key, permission.description])
+  );
+  const roleSlug = currentMembership?.role?.slug ?? null;
+  const isLoading = !permissionsReady || catalogQuery.isLoading;
+  const showManagePanel = Boolean(onManageMembers || onManageOrganizationRoles);
+  const groupedPermissions = permissions.reduce((groups, key) => {
+    const domain = key.split(".")[0] ?? "general";
+    groups[domain] ??= [];
+    groups[domain].push(key);
+    return groups;
+  }, {});
+  return /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+    /* @__PURE__ */ jsx(
+      PageTitleCaption,
+      {
+        title: "My Roles",
+        caption: `Roles assigned to you in ${orgName} and what each one lets you do.`
+      }
+    ),
+    /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", children: /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsx(
+        CardHeader,
+        {
+          icon: /* @__PURE__ */ jsx(IconShieldLock, { size: 18 }),
+          title: "Your roles",
+          subtitle: `Roles assigned to your membership in ${orgName}.`
+        }
+      ),
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        roleSlug ? /* @__PURE__ */ jsx(RoleBadge, { slug: roleSlug, name: capitalize(roleSlug), isSystem: true }) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No roles assigned yet." }),
+        isPlatformAdmin && /* @__PURE__ */ jsx(Badge, { color: "grape", variant: "light", leftSection: /* @__PURE__ */ jsx(IconStar, { size: 12 }), children: "Platform admin" })
+      ] }),
+      isPlatformAdmin && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Platform admin bypasses every org-level permission check; you have full access regardless of role." })
+    ] }) }),
+    /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", children: /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsx(
+        CardHeader,
+        {
+          icon: /* @__PURE__ */ jsx(IconCheck, { size: 18 }),
+          title: "What you can do",
+          subtitle: isPlatformAdmin ? "Showing all platform permissions (platform admin bypass)." : "Permissions granted by your assigned roles."
+        }
+      ),
+      isLoading ? /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(Loader, {}) }) : permissions.length === 0 ? /* @__PURE__ */ jsx(Alert, { color: "yellow", children: "You don't have any permissions in this organization yet. Ask an admin to assign you a role." }) : /* @__PURE__ */ jsx(Stack, { gap: "md", children: Object.entries(groupedPermissions).map(([domain, keys]) => /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, children: capitalize(domain) }),
+        keys.map((key) => /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          /* @__PURE__ */ jsx(IconCheck, { size: 14, color: "var(--color-success)" }),
+          /* @__PURE__ */ jsx(Code, { children: key }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: catalogMap.get(key) ?? "" })
+        ] }, key))
+      ] }, domain)) })
+    ] }) }),
+    showManagePanel && /* @__PURE__ */ jsx(AccessGuard, { accessKey: AccessKeys.membersManage, children: /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", children: /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsx(
+        CardHeader,
+        {
+          icon: /* @__PURE__ */ jsx(IconUserCog, { size: 18 }),
+          title: "Manage roles & members",
+          subtitle: "Assign roles to members, create custom roles, and edit permission sets."
+        }
+      ),
+      /* @__PURE__ */ jsxs(Group, { children: [
+        onManageMembers ? /* @__PURE__ */ jsx(Button, { variant: "light", leftSection: /* @__PURE__ */ jsx(IconUsersGroup, { size: 14 }), onClick: onManageMembers, children: "Members" }) : null,
+        onManageOrganizationRoles ? /* @__PURE__ */ jsx(AccessGuard, { accessKey: AccessKeys.organizationManage, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "light",
+            leftSection: /* @__PURE__ */ jsx(IconShieldLock, { size: 14 }),
+            onClick: onManageOrganizationRoles,
+            children: "Organization roles"
+          }
+        ) }) : null
+      ] })
+    ] }) }) })
+  ] });
+}
 
-export { AccountSettings, AppearanceSettings, CreateCredentialModal, CreateWebhookEndpointModal, CredentialList, CredentialSettings, EditCredentialModal, EditWebhookEndpointModal, MemberAccessModal, MembershipStatusBadge, MyRolesPage, OAuthConnectModal, OAuthIntegrationsCard, OrgMembersList, OrganizationMembershipsList, OrganizationSettings, ProvisioningStateBadge, WebhookEndpointList, WebhookEndpointSettings, WebhookUrlDisplayModal, showAuthError };
+export { AccountSettings, AppearanceSettings, CreateWebhookEndpointModal, EditWebhookEndpointModal, MemberAccessModal, MembershipStatusBadge, MyRolesPage, OAuthConnectModal, OAuthIntegrationsCard, OrgMembersList, OrganizationMembershipsList, OrganizationSettings, ProvisioningStateBadge, WebhookEndpointList, WebhookEndpointSettings, WebhookUrlDisplayModal, showAuthError };