@elevasis/ui 1.26.0 → 1.27.0

package/dist/chunk-WJ7W7JU4.js

@@ -0,0 +1,2115 @@
+import { FilterBar } from './chunk-PDHTXPSF.js';
+import { CustomModal } from './chunk-GBMNCNHX.js';
+import { ListSkeleton, EmptyState, PageTitleCaption, CardHeader, APIErrorAlert, StatCard } from './chunk-MCA6LOGM.js';
+import { AppShellLoader } from './chunk-YYBM5LNJ.js';
+import { useAvailablePresets } from './chunk-QTD5HPKD.js';
+import { useDeleteCredential, useCreateCredential, useCredentials, MEMBERSHIP_STATUS_COLORS, transformMembershipToTableRow, useUserMemberships, useUpdateWebhookEndpoint, useDeleteWebhookEndpoint, useCreateWebhookEndpoint, useListWebhookEndpoints, useUpdateMemberConfig, useOrganizationMembers, useUpdateCredential, CredentialSchemas } from './chunk-WLNEJ6JJ.js';
+import { useResources, showErrorNotification } from './chunk-RCQPWA5X.js';
+import { formatDateTime, OAUTH_POPUP_CHECK_INTERVAL, OAUTH_FLOW_TIMEOUT } from './chunk-IOKL7BKE.js';
+import { useInitialization } from './chunk-TUXTSEAF.js';
+import { useElevasisServices } from './chunk-QEPXAWE2.js';
+import { Table, Group, Text, Tooltip, ActionIcon, Stack, Title, Button, Select, TextInput, Alert, PasswordInput, Anchor, Paper, Card, Switch, Badge, Center, Loader, Box, Code, CopyButton, ThemeIcon, useMantineColorScheme, SimpleGrid, UnstyledButton, Divider, Textarea } from '@mantine/core';
+import { IconSettings, IconKey, IconCalendar, IconPencil, IconTrash, IconAlertTriangle, IconInfoCircle, IconExclamationMark, IconPlus, IconAlertCircle, IconUsers, IconSearch, IconBuilding, IconEdit, IconUserX, IconUserCheck, IconWebhook, IconCheck, IconCopy, IconUser, IconMail, IconRefresh, IconPalette, IconSun, IconEye, IconSparkles, IconTrendingUp, IconClock, IconPlayerPause, IconPlayerPlay, IconActivity, IconBrandDropbox, IconRocket, IconBrandGithub, IconBrandGmail, IconBrandGoogleDrive, IconPlug, IconBrandSlack, IconMoon, IconDeviceDesktop } from '@tabler/icons-react';
+import { z } from 'zod';
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useForm } from '@mantine/form';
+import { notifications } from '@mantine/notifications';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { create } from 'zustand';
+
+// ../core/src/integrations/oauth/provider-registry.ts
+var OAUTH_PROVIDERS = {
+  "google-sheets": {
+    id: "google-sheets",
+    name: "Google Sheets",
+    authUrl: "https://accounts.google.com/o/oauth2/v2/auth",
+    tokenUrl: "https://oauth2.googleapis.com/token",
+    authParams: {
+      access_type: "offline",
+      // Required for refresh token
+      prompt: "consent"
+      // Force consent to get refresh token on reconnect
+    },
+    tokenExchange: "form-encoded",
+    scopes: ["https://www.googleapis.com/auth/spreadsheets"]
+  },
+  dropbox: {
+    id: "dropbox",
+    name: "Dropbox",
+    authUrl: "https://www.dropbox.com/oauth2/authorize",
+    tokenUrl: "https://api.dropboxapi.com/oauth2/token",
+    authParams: {
+      token_access_type: "offline"
+      // Required for refresh token
+    },
+    tokenExchange: "form-encoded",
+    scopes: ["files.content.write", "files.content.read", "files.metadata.write"]
+  }
+};
+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: []
+  }
+};
+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 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) => /* @__PURE__ */ jsx(
+        PasswordInput,
+        {
+          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 = (result) => {
+    console.log("Credential created:", result);
+    setShowCreateModal(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { 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(() => {
+    if (opened && provider) {
+      setCredentialName(`${provider.id}-prod`);
+    }
+  }, [opened, provider]);
+  useEffect(() => {
+    if (!opened) {
+      setCredentialName("");
+    }
+  }, [opened]);
+  const handleConnect = async () => {
+    if (!credentialName.trim() || !provider) return;
+    await onConnect(credentialName);
+  };
+  const handleClose = () => {
+    if (!isLoading) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(CustomModal, { opened: opened && !!provider, onClose: handleClose, size: "md", loading: isLoading, children: provider && /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsxs(Title, { order: 3, children: [
+      "Connect ",
+      provider.name
+    ] }),
+    /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+      "Authorize Elevasis to access your ",
+      provider.name,
+      " account"
+    ] }),
+    provider.scopes && provider.scopes.length > 0 && /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+      "Permissions requested: ",
+      provider.scopes.join(", ")
+    ] }),
+    error && /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), color: "red", title: "Connection Failed", children: error }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        label: "Credential Name",
+        placeholder: `${provider.id}-prod`,
+        value: credentialName,
+        onChange: (e) => setCredentialName(e.target.value),
+        required: true,
+        disabled: isLoading,
+        description: "Use naming convention to indicate environment (e.g., notion-dev, slack-prod)"
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", mt: "md", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "light", onClick: handleClose, disabled: isLoading, children: "Cancel" }),
+      /* @__PURE__ */ jsxs(Button, { onClick: handleConnect, loading: isLoading, disabled: !credentialName.trim(), children: [
+        "Connect ",
+        provider.name
+      ] })
+    ] })
+  ] }) });
+}
+var FEATURES = [
+  { key: "acquisition", label: "Acquisition" },
+  { key: "calibration", label: "Calibration" },
+  { key: "seo", label: "SEO" }
+];
+function MembershipFeaturePanel({
+  currentConfig,
+  onConfigChange,
+  disabled = false
+}) {
+  const handleFeatureToggle = (featureKey, enabled) => {
+    const newConfig = {
+      ...currentConfig,
+      features: {
+        ...currentConfig?.features,
+        [featureKey]: enabled
+      }
+    };
+    onConfigChange(newConfig);
+  };
+  return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Toggle features this member can access." }),
+    FEATURES.map(({ key, label }) => {
+      const isEnabled = currentConfig?.features?.[key] !== false;
+      return /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", children: label }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: isEnabled,
+            onChange: (e) => handleFeatureToggle(key, e.currentTarget.checked),
+            disabled,
+            size: "md"
+          }
+        )
+      ] }, key);
+    })
+  ] }) });
+}
+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 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;
+  });
+  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 },
+            disabled: loading
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            placeholder: "Filter by status",
+            value: statusFilter,
+            onChange: (value) => setStatusFilter(value),
+            data: [
+              { value: "", label: "All Statuses" },
+              { value: "active", label: "Active" },
+              { value: "inactive", label: "Inactive" }
+            ],
+            style: { minWidth: 150 },
+            clearable: true,
+            disabled: loading
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Table.ScrollContainer, { minWidth: 700, children: /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+          /* @__PURE__ */ jsx(Table.Th, { children: "Organization" }),
+          /* @__PURE__ */ jsx(Table.Th, { children: "Role" }),
+          /* @__PURE__ */ jsx(Table.Th, { children: "Status" }),
+          /* @__PURE__ */ jsx(Table.Th, { children: "Joined" }),
+          /* @__PURE__ */ jsx(Table.Th, { align: "right", children: "Actions" })
+        ] }) }),
+        /* @__PURE__ */ jsx(Table.Tbody, { children: loading ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: 5, children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) }) }) : filteredRows.length === 0 ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: 5, children: /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            icon: IconBuilding,
+            title: "No memberships found",
+            description: searchTerm || statusFilter ? "Try adjusting your search or filter criteria" : "You are not a member of any organizations yet"
+          }
+        ) }) }) : filteredRows.map((row) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+            /* @__PURE__ */ jsx(IconBuilding, { size: 16 }),
+            /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { fw: 500, size: "sm", children: row.organizationName }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { variant: "light", color: "blue", size: "sm", children: row.role }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(MembershipStatusBadge, { status: row.status }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: row.joinedAt.toLocaleDateString() }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", 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 })
+              }
+            )
+          ] }) })
+        ] }, row.id)) })
+      ] }) })
+    ] })
+  ] });
+}
+function WebhookUrlDisplayModal({ opened, endpoint, webhookUrl, onClose }) {
+  return /* @__PURE__ */ jsx(CustomModal, { opened, onClose, size: "lg", loading: false, children: /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+      /* @__PURE__ */ jsx(IconWebhook, { size: 24, color: "var(--color-success)" }),
+      /* @__PURE__ */ jsx(Title, { order: 3, children: "Webhook Endpoint Created" })
+    ] }),
+    /* @__PURE__ */ jsxs(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, {}), color: "yellow", variant: "light", children: [
+      /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Save this URL \u2014 it contains your secret key." }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", mt: 4, children: "The URL includes a unique key that acts as the credential for this endpoint. Treat it like a password. You can always copy it again from the Webhooks settings page." })
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+      /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 500, children: [
+        "Webhook URL for ",
+        /* @__PURE__ */ jsx("strong", { children: endpoint.name }),
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(IconWebhook, { size: 16, style: { opacity: 0.6, flexShrink: 0 } }),
+        /* @__PURE__ */ jsx(
+          Code,
+          {
+            block: true,
+            style: {
+              fontSize: "13px",
+              wordBreak: "break-all",
+              backgroundColor: "transparent",
+              padding: 0,
+              flex: 1
+            },
+            children: webhookUrl
+          }
+        ),
+        /* @__PURE__ */ jsx(CopyButton, { value: webhookUrl, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            color: copied ? "teal" : "gray",
+            variant: copied ? "filled" : "subtle",
+            onClick: copy,
+            size: "lg",
+            children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 18 }) : /* @__PURE__ */ jsx(IconCopy, { size: 18 })
+          }
+        ) })
+      ] }) })
+    ] }),
+    endpoint.resourceId && /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: "Target resource:" }),
+      /* @__PURE__ */ jsx(Code, { block: true, style: { fontSize: "13px", backgroundColor: "transparent", padding: "8px" }, children: endpoint.resourceId })
+    ] }),
+    /* @__PURE__ */ jsx(Group, { justify: "right", children: /* @__PURE__ */ jsx(Button, { onClick: onClose, size: "sm", leftSection: /* @__PURE__ */ jsx(IconCheck, { size: 16 }), children: "Done" }) })
+  ] }) });
+}
+function AccountSettings({
+  user,
+  userProfile,
+  profileLoading,
+  onRefetchProfile,
+  onNavigate
+}) {
+  const { apiRequest } = useElevasisServices();
+  const userConfig = userProfile?.config;
+  const hasCompletedOnboarding = userConfig?.onboarding?.completed;
+  const resetWelcomeFlow = useMutation({
+    mutationFn: async () => {
+      return apiRequest("/users/me", {
+        method: "PATCH",
+        body: JSON.stringify({
+          config: {
+            onboarding: {
+              completed: false,
+              completedAt: null,
+              role: null,
+              primaryUseCase: null,
+              experienceLevel: null
+            }
+          }
+        })
+      });
+    },
+    onSuccess: async () => {
+      notifications.show({
+        title: "Welcome Flow Reset",
+        message: "Redirecting to the welcome flow...",
+        color: "teal"
+      });
+      await onRefetchProfile();
+      onNavigate("/welcome");
+    },
+    onError: (err) => {
+      notifications.show({
+        title: "Error",
+        message: err instanceof Error ? err.message : "Failed to reset welcome flow",
+        color: "red"
+      });
+    }
+  });
+  const { data: memberships = [], isLoading, error } = useUserMemberships(user?.id || "");
+  const handleEditRole = (_membershipId) => {
+    notifications.show({
+      title: "Edit Role",
+      message: "Role editing functionality coming soon",
+      color: "blue"
+    });
+  };
+  const handleLeaveOrganization = (_membershipId) => {
+    notifications.show({
+      title: "Leave Organization",
+      message: "Leave organization functionality coming soon",
+      color: "orange"
+    });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PageTitleCaption, { title: "Account Settings", caption: "Manage your account and organization memberships" }),
+    user && /* @__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", children: /* @__PURE__ */ jsx(IconUser, { size: 18 }) }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Name" }),
+          /* @__PURE__ */ jsxs(Text, { size: "lg", fw: 600, style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, children: [
+            user.firstName,
+            " ",
+            user.lastName
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          /* @__PURE__ */ jsx(Code, { children: user.id }),
+          /* @__PURE__ */ jsx(CopyButton, { value: user.id, 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 })
+            }
+          ) }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+        /* @__PURE__ */ jsx(ThemeIcon, { size: "lg", variant: "light", color: "green", children: /* @__PURE__ */ jsx(IconMail, { size: 18 }) }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Email" }),
+          /* @__PURE__ */ jsx(Text, { size: "lg", fw: 600, style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, children: user.email })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", children: [
+        /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+          /* @__PURE__ */ jsx(ThemeIcon, { size: "lg", variant: "light", color: "teal", children: /* @__PURE__ */ jsx(IconRefresh, { size: 18 }) }),
+          /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+            /* @__PURE__ */ jsx(Text, { fw: 600, children: "Welcome Flow" }),
+            /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: hasCompletedOnboarding ? "Re-run the onboarding flow to update your preferences" : "You have not completed the welcome flow yet" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "light",
+            leftSection: profileLoading ? void 0 : /* @__PURE__ */ jsx(IconRefresh, { size: 16 }),
+            onClick: () => resetWelcomeFlow.mutate(),
+            loading: profileLoading || resetWelcomeFlow.isPending,
+            disabled: profileLoading,
+            children: profileLoading ? "" : hasCompletedOnboarding ? "Reset & Redo" : "Start"
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      OrganizationMembershipsList,
+      {
+        memberships,
+        loading: isLoading,
+        error,
+        onEditRole: handleEditRole,
+        onLeaveOrganization: handleLeaveOrganization
+      }
+    ),
+    error && /* @__PURE__ */ jsxs(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), title: "Error", color: "red", children: [
+      "Failed to load organization memberships: ",
+      error.message
+    ] }),
+    !isLoading && !error && memberships.length === 0 && /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: IconBuilding,
+        title: "No Organization Memberships",
+        description: "You are not currently a member of any organizations. Contact an administrator to be added to an organization."
+      }
+    ) })
+  ] });
+}
+var useInternalThemeStore = create((set) => ({
+  preset: "default",
+  colorScheme: "auto",
+  setPreset: (preset) => set({ preset }),
+  setColorScheme: (colorScheme) => set({ colorScheme }),
+  setTheme: (theme) => set(theme)
+}));
+
+// src/hooks/operations/settings/useUpdateThemePreference.ts
+var DEBOUNCE_MS = 500;
+function useUpdateThemePreference() {
+  const { apiRequest } = useElevasisServices();
+  const setTheme = useInternalThemeStore((s) => s.setTheme);
+  const timerRef = useRef(null);
+  const updateTheme = useCallback(
+    (theme) => {
+      if (theme.preset !== void 0 && theme.colorScheme !== void 0) {
+        setTheme({ preset: theme.preset, colorScheme: theme.colorScheme });
+      } else {
+        const current = useInternalThemeStore.getState();
+        setTheme({
+          preset: theme.preset ?? current.preset,
+          colorScheme: theme.colorScheme ?? current.colorScheme
+        });
+      }
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(async () => {
+        try {
+          await apiRequest("/users/me", {
+            method: "PATCH",
+            body: JSON.stringify({ config: { theme } })
+          });
+        } catch (error) {
+          showErrorNotification(error instanceof Error ? error : new Error("Failed to update appearance"));
+        }
+      }, DEBOUNCE_MS);
+    },
+    [apiRequest, setTheme]
+  );
+  return { updateTheme };
+}
+var COLOR_SCHEMES = [
+  { value: "light", label: "Light", icon: /* @__PURE__ */ jsx(IconSun, { size: 16 }) },
+  { value: "dark", label: "Dark", icon: /* @__PURE__ */ jsx(IconMoon, { size: 16 }) },
+  { value: "auto", label: "System", icon: /* @__PURE__ */ jsx(IconDeviceDesktop, { size: 16 }) }
+];
+function AppearanceSettings({ initialTheme, onThemeChange }) {
+  const preset = useInternalThemeStore((s) => s.preset);
+  const colorScheme = useInternalThemeStore((s) => s.colorScheme);
+  const setInternalTheme = useInternalThemeStore((s) => s.setTheme);
+  const { updateTheme } = useUpdateThemePreference();
+  const { setColorScheme: setMantineColorScheme } = useMantineColorScheme();
+  const availablePresets = useAvailablePresets();
+  const [modalOpen, setModalOpen] = useState(false);
+  const hydratedRef = useRef(false);
+  if (!hydratedRef.current) {
+    setInternalTheme(initialTheme);
+    hydratedRef.current = true;
+  }
+  useEffect(() => {
+    if (!hydratedRef.current) return;
+    onThemeChange?.({ preset, colorScheme });
+  }, [preset, colorScheme]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PageTitleCaption, { title: "Appearance", caption: "Customize how the command center looks" }),
+    /* @__PURE__ */ jsxs(Paper, { withBorder: true, children: [
+      /* @__PURE__ */ jsx(
+        CardHeader,
+        {
+          icon: /* @__PURE__ */ jsx(IconPalette, { size: 18 }),
+          title: "Theme",
+          subtitle: "Choose a color palette for the command center"
+        }
+      ),
+      /* @__PURE__ */ jsx(Stack, { gap: "md", children: /* @__PURE__ */ jsx(SimpleGrid, { cols: { base: 2, sm: 3, md: 4 }, children: availablePresets.map((p) => {
+        const isActive = p.value === preset;
+        return /* @__PURE__ */ jsx(
+          UnstyledButton,
+          {
+            onClick: () => {
+              if (!isActive) {
+                updateTheme({ preset: p.value, colorScheme });
+              }
+            },
+            children: /* @__PURE__ */ jsx(
+              Card,
+              {
+                style: {
+                  cursor: "pointer",
+                  border: isActive ? "var(--active-border)" : "1px solid var(--color-border)",
+                  backgroundColor: isActive ? "var(--active-background)" : "var(--color-surface)",
+                  transition: `all var(--duration-fast) var(--easing)`
+                },
+                children: /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+                  /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", children: [
+                    /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", children: p.label }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          width: 14,
+                          height: 14,
+                          borderRadius: "50%",
+                          backgroundColor: p.colors[0],
+                          border: "1px solid var(--color-border)",
+                          flexShrink: 0
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: p.description })
+                ] })
+              }
+            )
+          },
+          p.value
+        );
+      }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Paper, { withBorder: true, children: [
+      /* @__PURE__ */ jsx(
+        CardHeader,
+        {
+          icon: /* @__PURE__ */ jsx(IconSun, { size: 18 }),
+          title: "Color Scheme",
+          subtitle: "Light, dark, or match your system preference"
+        }
+      ),
+      /* @__PURE__ */ jsx(Stack, { gap: "md", children: /* @__PURE__ */ jsx(SimpleGrid, { cols: 3, children: COLOR_SCHEMES.map((s) => {
+        const isActive = s.value === colorScheme;
+        return /* @__PURE__ */ jsx(
+          UnstyledButton,
+          {
+            onClick: () => {
+              if (!isActive) {
+                setMantineColorScheme(s.value);
+                updateTheme({ preset, colorScheme: s.value });
+              }
+            },
+            style: { borderRadius: "var(--mantine-radius-md)" },
+            children: /* @__PURE__ */ jsx(
+              Card,
+              {
+                padding: "md",
+                style: {
+                  cursor: "pointer",
+                  border: isActive ? "var(--active-border)" : "1px solid var(--color-border)",
+                  backgroundColor: isActive ? "var(--active-background)" : "var(--color-surface)",
+                  transition: `all var(--duration-fast) var(--easing)`
+                },
+                children: /* @__PURE__ */ jsxs(Group, { gap: 6, justify: "center", wrap: "nowrap", children: [
+                  s.icon,
+                  /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", children: s.label }),
+                  isActive && /* @__PURE__ */ jsx(IconCheck, { size: 14, color: "var(--color-primary)", style: { flexShrink: 0 } })
+                ] })
+              }
+            )
+          },
+          s.value
+        );
+      }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Paper, { withBorder: true, children: [
+      /* @__PURE__ */ jsx(
+        CardHeader,
+        {
+          icon: /* @__PURE__ */ jsx(IconEye, { size: 18 }),
+          title: "Preview",
+          subtitle: "See how common UI elements look with your current theme"
+        }
+      ),
+      /* @__PURE__ */ jsxs(Stack, { gap: "lg", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", tt: "uppercase", fw: 600, children: "Page Layout" }),
+          /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+            /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
+              /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+                /* @__PURE__ */ jsx(Title, { order: 3, children: "Operations Overview" }),
+                /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Monitor recent activity across your workspace" })
+              ] }),
+              /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+                /* @__PURE__ */ jsx(Button, { variant: "default", size: "xs", children: "Export" }),
+                /* @__PURE__ */ jsx(Button, { size: "xs", leftSection: /* @__PURE__ */ jsx(IconSparkles, { size: 14 }), children: "New Workflow" }),
+                /* @__PURE__ */ jsx(Button, { variant: "light", size: "xs", onClick: () => setModalOpen(true), children: "Open Modal Preview" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(SimpleGrid, { cols: { base: 1, sm: 3 }, spacing: "sm", children: [
+              { label: "Active Workflows", value: "24", trend: "+12%" },
+              { label: "Executions Today", value: "1,284", trend: "+8.3%" },
+              { label: "Success Rate", value: "98.2%", trend: "+0.4%" }
+            ].map((stat) => /* @__PURE__ */ jsx(
+              Card,
+              {
+                padding: "sm",
+                withBorder: true,
+                style: {
+                  transition: `all var(--duration-fast) var(--easing)`
+                },
+                children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+                  /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", tt: "uppercase", fw: 600, children: stat.label }),
+                  /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "flex-end", wrap: "nowrap", children: [
+                    /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, children: stat.value }),
+                    /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: "green", leftSection: /* @__PURE__ */ jsx(IconTrendingUp, { size: 10 }), children: stat.trend })
+                  ] })
+                ] })
+              },
+              stat.label
+            )) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 1, md: 2 }, spacing: "md", children: [
+          /* @__PURE__ */ jsx(Card, { padding: "md", withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", tt: "uppercase", fw: 600, children: "Buttons" }),
+            /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+              /* @__PURE__ */ jsx(Button, { size: "xs", children: "Primary" }),
+              /* @__PURE__ */ jsx(Button, { size: "xs", variant: "light", children: "Light" }),
+              /* @__PURE__ */ jsx(Button, { size: "xs", variant: "outline", children: "Outline" }),
+              /* @__PURE__ */ jsx(Button, { size: "xs", variant: "default", children: "Default" }),
+              /* @__PURE__ */ jsx(Button, { size: "xs", variant: "subtle", children: "Subtle" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(Card, { padding: "md", withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", tt: "uppercase", fw: 600, children: "Status Badges" }),
+            /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+              /* @__PURE__ */ jsx(Badge, { variant: "light", children: "Active" }),
+              /* @__PURE__ */ jsx(Badge, { variant: "light", color: "green", children: "Success" }),
+              /* @__PURE__ */ jsx(Badge, { variant: "light", color: "yellow", children: "Pending" }),
+              /* @__PURE__ */ jsx(Badge, { variant: "light", color: "red", children: "Failed" }),
+              /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Draft" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(Card, { padding: "md", withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", tt: "uppercase", fw: 600, children: "Inputs" }),
+            /* @__PURE__ */ jsx(TextInput, { placeholder: "Search workflows...", leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 14 }), size: "xs" }),
+            /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+              /* @__PURE__ */ jsx(Text, { size: "sm", children: "Enable notifications" }),
+              /* @__PURE__ */ jsx(Switch, { defaultChecked: true, size: "sm" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(Card, { padding: "md", withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", tt: "uppercase", fw: 600, children: "Typography" }),
+            /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+              /* @__PURE__ */ jsx(Title, { order: 4, children: "Section Heading" }),
+              /* @__PURE__ */ jsx(Text, { size: "sm", children: "The quick brown fox jumps over the lazy dog." }),
+              /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Secondary text with dimmed color for less emphasis." }),
+              /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+                /* @__PURE__ */ jsx(Text, { span: true, c: "var(--color-primary)", fw: 600, inherit: true, children: "Link" }),
+                " ",
+                "styled with primary color token."
+              ] })
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx(Card, { padding: "md", withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", tt: "uppercase", fw: 600, children: "Table" }),
+          /* @__PURE__ */ jsx(Table.ScrollContainer, { minWidth: 400, children: /* @__PURE__ */ jsxs(Table, { verticalSpacing: "xs", horizontalSpacing: "sm", children: [
+            /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+              /* @__PURE__ */ jsx(Table.Th, { children: "Workflow" }),
+              /* @__PURE__ */ jsx(Table.Th, { children: "Status" }),
+              /* @__PURE__ */ jsx(Table.Th, { children: "Runs" }),
+              /* @__PURE__ */ jsx(Table.Th, { children: "Last Run" })
+            ] }) }),
+            /* @__PURE__ */ jsx(Table.Tbody, { children: [
+              { name: "deal-enrichment", status: "Active", color: "green", runs: "482", last: "2m ago" },
+              { name: "ist-campaign-review", status: "Active", color: "green", runs: "156", last: "14m ago" },
+              { name: "tomba-email-finder", status: "Paused", color: "yellow", runs: "89", last: "3h ago" }
+            ].map((row) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
+              /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", children: row.name }) }),
+              /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { variant: "light", color: row.color, size: "xs", children: row.status }) }),
+              /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: row.runs }) }),
+              /* @__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 getWebhookUrl(apiUrl, key) {
+  return `${apiUrl}/api/webhooks/inbound/${key}`;
+}
+function WebhookEndpointList({ endpoints, isLoading, apiUrl }) {
+  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: "URL" }),
+        /* @__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 webhookUrl = getWebhookUrl(apiUrl, endpoint.key);
+        const truncatedUrl = webhookUrl.length > 50 ? `...${endpoint.key.slice(-16)}` : webhookUrl;
+        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__ */ jsxs(Paper, { withBorder: true, style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
+            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", ff: "monospace", style: { userSelect: "all" }, children: truncatedUrl }),
+            /* @__PURE__ */ jsx(CopyButton, { value: webhookUrl, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied!" : "Copy URL", position: "top", children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                color: copied ? "teal" : "gray",
+                variant: copied ? "filled" : "subtle",
+                onClick: copy,
+                size: "sm",
+                children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 12 }) : /* @__PURE__ */ jsx(IconCopy, { size: 12 })
+              }
+            ) }) })
+          ] }) }),
+          /* @__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: [
+        /* @__PURE__ */ jsx(IconAlertTriangle, { size: 24, color: "var(--color-error)" }),
+        /* @__PURE__ */ jsx(Title, { order: 3, children: "Delete Webhook Endpoint" })
+      ] }),
+      /* @__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"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+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;
+      }
+    }
+  });
+  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
+      }
+    ),
+    /* @__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 getWebhookUrl2(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(Fragment, { 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, apiUrl }) }),
+    /* @__PURE__ */ jsx(
+      CreateWebhookEndpointModal,
+      {
+        opened: showCreateModal,
+        onClose: () => setShowCreateModal(false),
+        onSuccess: handleEndpointCreated
+      }
+    ),
+    newEndpoint && /* @__PURE__ */ jsx(
+      WebhookUrlDisplayModal,
+      {
+        opened: true,
+        endpoint: newEndpoint,
+        webhookUrl: getWebhookUrl2(apiUrl, newEndpoint.key),
+        onClose: () => setNewEndpoint(null)
+      }
+    )
+  ] });
+}
+function MemberConfigModal({ opened, onClose, member }) {
+  const [localConfig, setLocalConfig] = useState(void 0);
+  const mutation = useUpdateMemberConfig();
+  useEffect(() => {
+    if (member) {
+      setLocalConfig(member.config);
+    }
+  }, [member]);
+  useEffect(() => {
+    if (!opened) {
+      setLocalConfig(void 0);
+    }
+  }, [opened]);
+  if (!member) return null;
+  const handleSave = async () => {
+    if (!localConfig) {
+      onClose();
+      return;
+    }
+    try {
+      await mutation.mutateAsync({
+        membershipId: member.id,
+        config: localConfig
+      });
+      onClose();
+    } catch {
+    }
+  };
+  const handleClose = () => {
+    if (!mutation.isPending) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(CustomModal, { opened, onClose: handleClose, size: "md", loading: mutation.isPending, children: /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(Title, { order: 3, children: "Configure 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 }),
+    /* @__PURE__ */ jsx(
+      MembershipFeaturePanel,
+      {
+        currentConfig: localConfig ?? member.config,
+        onConfigChange: (newConfig) => setLocalConfig(newConfig),
+        disabled: mutation.isPending
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", mt: "md", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "light", onClick: handleClose, disabled: mutation.isPending, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleSave, loading: mutation.isPending, 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,
+    config: member.config
+  };
+}
+function OrgMembersList({ orgId }) {
+  const { data: members, isLoading, error } = useOrganizationMembers(orgId);
+  const [selectedMember, setSelectedMember] = useState(null);
+  const [modalOpened, setModalOpened] = useState(false);
+  const handleConfigClick = (member) => {
+    setSelectedMember(member);
+    setModalOpened(true);
+  };
+  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(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), title: "Error loading members", color: "red", variant: "light", children: error.message || "Failed to load organization members. Please try again." });
+  }
+  if (!members || members.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyState, { icon: IconUsers, title: "No members found" });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__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(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(Badge, { variant: "light", color: "blue", size: "sm", children: member.role.slug }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(MembershipStatusBadge, { status: member.status }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Group, { gap: "xs", children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              variant: "light",
+              size: "sm",
+              color: "gray",
+              onClick: () => handleConfigClick(member),
+              title: "Configure member access",
+              children: /* @__PURE__ */ jsx(IconSettings, { size: 14 })
+            }
+          ) }) })
+        ] }, member.id);
+      }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      MemberConfigModal,
+      {
+        opened: modalOpened,
+        onClose: handleModalClose,
+        member: selectedMember ? transformMemberForModal(selectedMember) : null
+      }
+    )
+  ] });
+}
+function OrganizationSettings({ user, currentMembership, isOrgAdmin }) {
+  return /* @__PURE__ */ jsxs(Fragment, { 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 && currentMembership?.organization && /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+      /* @__PURE__ */ jsx(Title, { order: 3, children: "Manage Members" }),
+      /* @__PURE__ */ jsx(Text, { c: "dimmed", size: "sm", children: "Configure feature access for organization members." }),
+      /* @__PURE__ */ jsx(OrgMembersList, { orgId: currentMembership.organization.id })
+    ] }) })
+  ] });
+}
+function useOAuthFlow({ apiUrl }) {
+  const [isAuthorizing, setIsAuthorizing] = useState(false);
+  const [error, setError] = useState(null);
+  const { organizationId, isReady } = useElevasisServices();
+  const authorize = useCallback(
+    async (provider, credentialName) => {
+      if (!isReady || !organizationId) {
+        setError("Organization context not ready");
+        return;
+      }
+      setIsAuthorizing(true);
+      setError(null);
+      try {
+        const authorizeUrl = new URL(`${apiUrl}/api/oauth/authorize/${provider}`);
+        authorizeUrl.searchParams.set("credentialName", credentialName);
+        authorizeUrl.searchParams.set("organizationId", organizationId);
+        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(
+          authorizeUrl.toString(),
+          `oauth-${provider}`,
+          `width=${width},height=${height},left=${left},top=${top}`
+        );
+        if (!popup) {
+          throw new Error("popup_blocked");
+        }
+        await waitForOAuthCallback(popup);
+      } 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("cancelled")) {
+          setError("Authorization cancelled");
+        } else if (rawError.includes("timeout")) {
+          setError("Authorization timed out. Please try again.");
+        } 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]
+  );
+  const waitForOAuthCallback = (popup) => {
+    return new Promise((resolve, reject) => {
+      const messageHandler = (event) => {
+        const expectedOrigin = window.location.origin;
+        if (event.origin !== expectedOrigin) {
+          return;
+        }
+        if (event.data.type === "oauth-complete") {
+          cleanup();
+          if (event.data.status === "success") {
+            resolve();
+          } else {
+            reject(new Error(event.data.error || "oauth_failed"));
+          }
+        }
+      };
+      window.addEventListener("message", messageHandler);
+      const checkClosed = setInterval(() => {
+        if (popup.closed) {
+          cleanup();
+          reject(new Error("cancelled"));
+        }
+      }, OAUTH_POPUP_CHECK_INTERVAL);
+      const timeout = setTimeout(() => {
+        cleanup();
+        popup.close();
+        reject(new Error("timeout"));
+      }, OAUTH_FLOW_TIMEOUT);
+      const cleanup = () => {
+        clearInterval(checkClosed);
+        clearTimeout(timeout);
+        window.removeEventListener("message", messageHandler);
+      };
+    });
+  };
+  return { authorize, isAuthorizing, error };
+}
+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();
+  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;
+  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);
+    }
+  };
+  const handleCredentialUpdate = async () => {
+    const hasValues = Object.values(fieldValues).some((v) => v.trim());
+    if (!hasValues) return;
+    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();
+    } catch (err) {
+      console.error("Update failed:", err);
+    }
+  };
+  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 })
+    ] }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        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
+      }
+    ),
+    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"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    !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) => /* @__PURE__ */ jsx(
+        PasswordInput,
+        {
+          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" })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+var PROVIDER_ICONS = {
+  slack: IconBrandSlack,
+  attio: IconPlug,
+  // Attio doesn't have a brand icon
+  "google-sheets": IconBrandGoogleDrive,
+  gmail: IconBrandGmail,
+  github: IconBrandGithub,
+  linear: IconRocket,
+  dropbox: IconBrandDropbox
+};
+var MOCK_PROVIDERS = [
+  { id: "google-sheets", name: "Google Sheets", available: false },
+  { id: "gmail", name: "Gmail", available: false },
+  { id: "github", name: "GitHub", available: false },
+  { id: "linear", name: "Linear", available: false }
+];
+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);
+  };
+  const realProviders = Object.values(OAUTH_PROVIDERS).map((p) => ({
+    ...p,
+    available: true
+  }));
+  const allProviders = [...realProviders, ...MOCK_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: allProviders.map((provider) => {
+        const Icon = PROVIDER_ICONS[provider.id] || IconPlug;
+        return /* @__PURE__ */ jsx(
+          Card,
+          {
+            withBorder: true,
+            style: {
+              opacity: provider.available ? 1 : 0.6
+            },
+            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: provider.available ? "blue" : "gray", children: /* @__PURE__ */ jsx(Icon, { size: 20 }) }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Text, { fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: provider.name }),
+                  !provider.available && /* @__PURE__ */ jsx(Badge, { color: "gray", variant: "light", size: "xs", mt: 4, children: "Coming Soon" })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "filled",
+                  size: "sm",
+                  onClick: () => handleOpenModal(provider.id),
+                  disabled: !provider.available,
+                  fullWidth: true,
+                  children: "Connect"
+                }
+              )
+            ] })
+          },
+          provider.id
+        );
+      }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      OAuthConnectModal,
+      {
+        opened: modalOpened,
+        onClose: () => {
+          setModalOpened(false);
+          setSelectedProviderId(null);
+        },
+        provider: selectedProvider,
+        onConnect: handleConnect,
+        error,
+        isLoading: isAuthorizing
+      }
+    )
+  ] });
+}
+var settingsManifest = {
+  key: "settings",
+  label: "Settings",
+  navEntry: {
+    label: "Settings",
+    icon: IconSettings,
+    link: "/settings",
+    dataOnboardingTourId: "settings-gear",
+    links: [
+      { label: "Account", link: "/settings/account" },
+      { label: "Appearance", link: "/settings/appearance" },
+      { label: "Organization", link: "/settings/organization" },
+      { label: "Credentials", link: "/settings/credentials" },
+      { label: "API Keys", link: "/settings/api-keys" },
+      { label: "Webhooks", link: "/settings/webhooks" },
+      { label: "Deployments", link: "/settings/deployments" }
+    ]
+  }
+};
+
+export { AccountSettings, AppearanceSettings, CreateCredentialModal, CreateWebhookEndpointModal, CredentialList, CredentialSettings, EditCredentialModal, EditWebhookEndpointModal, MemberConfigModal, MembershipFeaturePanel, MembershipStatusBadge, OAuthConnectModal, OAuthIntegrationsCard, OrgMembersList, OrganizationMembershipsList, OrganizationSettings, WebhookEndpointList, WebhookEndpointSettings, WebhookUrlDisplayModal, settingsManifest };