@elevasis/ui 1.19.0 → 1.20.1

package/dist/features/settings/index.js

@@ -0,0 +1,1437 @@
+import { useAvailablePresets } from '../../chunk-COTI2QPO.js';
+import { OrganizationMembershipsList, WebhookUrlDisplayModal, MembershipFeaturePanel, MembershipStatusBadge, getCredentialSchema, OAuthConnectModal, buildCredentialValue } from '../../chunk-JZEXFQ6N.js';
+import '../../chunk-PDHTXPSF.js';
+import { CustomModal } from '../../chunk-GBMNCNHX.js';
+import { PageTitleCaption, EmptyState, CardHeader, ListSkeleton, StatCard } from '../../chunk-AWMZCYKH.js';
+import '../../chunk-NNKKBSJN.js';
+import { AppShellLoader } from '../../chunk-WWEMNIHW.js';
+import '../../chunk-QJ2S46NI.js';
+import { useUserMemberships, useUpdateWebhookEndpoint, useDeleteWebhookEndpoint, useCreateWebhookEndpoint, useListWebhookEndpoints, useUpdateMemberConfig, useOrganizationMembers, useUpdateCredential, CredentialSchemas, showErrorNotification } from '../../chunk-XOTN3X3Z.js';
+import { useResources } from '../../chunk-AQ5MQDSS.js';
+import '../../chunk-NJJ3NQ7B.js';
+import '../../chunk-LXHZYSMQ.js';
+import '../../chunk-MHW43EOH.js';
+import '../../chunk-F6RBK7NJ.js';
+import '../../chunk-ELJIFLCB.js';
+import '../../chunk-L4XXM55J.js';
+import '../../chunk-SLVC5OJ2.js';
+import '../../chunk-RNP5R5I3.js';
+import '../../chunk-VLTVZXP6.js';
+import '../../chunk-R3R367QY.js';
+import '../../chunk-SZHARWKU.js';
+import '../../chunk-OFAXUZPZ.js';
+import '../../chunk-3DIU726S.js';
+import '../../chunk-R7WLWGPO.js';
+import '../../chunk-NVOCKXUQ.js';
+import '../../chunk-V7XHGJQZ.js';
+import '../../chunk-QJ2KCHKX.js';
+import { formatDateTime, OAUTH_POPUP_CHECK_INTERVAL, OAUTH_FLOW_TIMEOUT } from '../../chunk-IOKL7BKE.js';
+import '../../chunk-RWQIFKMJ.js';
+import '../../chunk-ALA56RGZ.js';
+import { useInitialization } from '../../chunk-TUXTSEAF.js';
+import '../../chunk-DD3CCMCZ.js';
+import { useElevasisServices } from '../../chunk-QEPXAWE2.js';
+import '../../chunk-BRJ3QZ4E.js';
+import '../../chunk-Q7DJKLEN.js';
+import { Paper, Stack, Group, ThemeIcon, Text, Code, CopyButton, Tooltip, ActionIcon, Button, Alert, useMantineColorScheme, SimpleGrid, UnstyledButton, Card, Title, Badge, TextInput, Switch, Table, Divider, Select, Textarea, Center, Loader, PasswordInput } from '@mantine/core';
+import { IconUser, IconCheck, IconCopy, IconMail, IconRefresh, IconAlertCircle, IconBuilding, IconPalette, IconSun, IconEye, IconSparkles, IconTrendingUp, IconSearch, IconWebhook, IconExclamationMark, IconPencil, IconClock, IconPlayerPause, IconPlayerPlay, IconTrash, IconAlertTriangle, IconPlus, IconActivity, IconUsers, IconSettings, IconBrandDropbox, IconRocket, IconBrandGithub, IconBrandGmail, IconBrandGoogleDrive, IconPlug, IconBrandSlack, IconMoon, IconDeviceDesktop } from '@tabler/icons-react';
+import { notifications } from '@mantine/notifications';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect, useMemo, useState, useCallback } from 'react';
+import { create } from 'zustand';
+import { useForm } from '@mantine/form';
+
+// ../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"]
+  }
+};
+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 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(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." })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+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
+      }
+    )
+  ] });
+}
+
+export { AccountSettings, AppearanceSettings, CreateWebhookEndpointModal, EditCredentialModal, EditWebhookEndpointModal, MemberConfigModal, OAuthIntegrationsCard, OrgMembersList, OrganizationSettings, WebhookEndpointList, WebhookEndpointSettings };