@elevasis/ui 2.21.0 → 2.23.0

package/dist/components/index.js

@@ -1,50 +1,51 @@
-import { useBreadcrumbs } from '../chunk-S7RL77QS.js';
-import '../chunk-6GUW5GGF.js';
-export { AllTasksPage, HealthStatusCard, MilestoneTimeline, ProjectDetailPage, ProjectsListPage, ProjectsSidebar, ProjectsSidebarMiddle, ProjectsSidebarTop, TaskCard, UpcomingMilestonesPage, calculateProgress, deliveryManifest, formatStatusLabel, milestoneStatusColors, noteTypeColors, projectStatusColors, taskStatusColors, taskTypeColors } from '../chunk-BJWIKEQG.js';
-export { LEAD_GEN_ROUTE_LINKS, LIST_TEMPLATE_OPTIONS, LeadGenCompaniesPage, LeadGenContactsPage, LeadGenListDetailPage, LeadGenListsPage, LeadGenOverviewPage, LeadGenRouteShell, LeadGenSidebar, LeadGenSidebarMiddle, LeadGenSidebarTop, buildListConfig, getEnrichmentColor, getStatusColor, leadGenManifest, useDeleteLists } from '../chunk-CZK67OHH.js';
-export { ActionModal, AgentDefinitionDisplay, AgentExecutionLogs, BaseExecutionLogs, BaseExecutionLogsHeader, BaseExecutionLogsStates, CheckpointGroup, CollapsibleJsonSection, CommandQueueSidebar, CommandQueueSidebarMiddle, CommandQueueSidebarTop, CommandQueueTaskRow, ConfigCard, ContentSections, ContextUsageBadge, ContractDisplay, ExecutionErrorSection, LogEntry, LogGroup, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, OperationsSidebar, OperationsSidebarMiddle, OperationsSidebarTop, ResourceDefinitionSection, ResourceErrorState, ResourceFilter, ResourceHeader, ResourceNotFoundState, SessionMemory, ToolsListDisplay, WorkflowDefinitionDisplay, WorkflowExecutionLogs, getExecutionStatusConfig, getIcon, getLogLevelConfig, iconMap, operationsManifest, useNewKnowledgeMapLayout } from '../chunk-LQU62KHD.js';
+import { useBreadcrumbs } from '../chunk-DDZOHLHB.js';
+import '../chunk-6Z3G4U2R.js';
+export { AllTasksPage, HealthStatusCard, MilestoneTimeline, ProjectDetailPage, ProjectsListPage, ProjectsSidebar, ProjectsSidebarMiddle, ProjectsSidebarTop, TaskCard, UpcomingMilestonesPage, calculateProgress, deliveryManifest, formatStatusLabel, milestoneStatusColors, noteTypeColors, projectStatusColors, taskStatusColors, taskTypeColors } from '../chunk-N6WLOWOD.js';
+export { LEAD_GEN_ROUTE_LINKS, LIST_TEMPLATE_OPTIONS, LeadGenCompaniesPage, LeadGenContactsPage, LeadGenListDetailPage, LeadGenListsPage, LeadGenOverviewPage, LeadGenRouteShell, LeadGenSidebar, LeadGenSidebarMiddle, LeadGenSidebarTop, buildListConfig, getEnrichmentColor, getStatusColor, leadGenManifest, useDeleteLists } from '../chunk-PXGSJNBH.js';
+export { ActionModal, AgentDefinitionDisplay, AgentExecutionLogs, BaseExecutionLogs, BaseExecutionLogsHeader, BaseExecutionLogsStates, CheckpointGroup, CollapsibleJsonSection, CommandQueueSidebar, CommandQueueSidebarMiddle, CommandQueueSidebarTop, CommandQueueTaskRow, ConfigCard, ContentSections, ContextUsageBadge, ContractDisplay, ExecutionErrorSection, LogEntry, LogGroup, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, OperationsSidebar, OperationsSidebarMiddle, OperationsSidebarTop, ResourceDefinitionSection, ResourceErrorState, ResourceFilter, ResourceHeader, ResourceNotFoundState, SessionMemory, ToolsListDisplay, WorkflowDefinitionDisplay, WorkflowExecutionLogs, getExecutionStatusConfig, getIcon, getLogLevelConfig, iconMap, operationsManifest, useNewKnowledgeMapLayout } from '../chunk-YU6MBDVO.js';
 import '../chunk-ROSMICXG.js';
 import '../chunk-3JCMO7SD.js';
 import '../chunk-ZTWA5H77.js';
-import { BaseNode, useGraphTheme, BaseEdge, GraphBackground, GraphLegend, GraphFitViewButton } from '../chunk-EGKNRM6P.js';
-export { AgentExecutionTimeline, AgentExecutionVisualizer, AgentIterationEdge, AgentIterationNode, BaseEdge, BaseNode, EmptyVisualizer, ExecutionStats, ExecutionStatusBadge, FormFieldRenderer, GraphBackground, GraphContainer, GraphFitViewButton, GraphFitViewHandler, GraphLegend, RunResourceButton, TimelineAxis, TimelineBar, TimelineContainer, TimelineRow, UnifiedWorkflowEdge, UnifiedWorkflowGraph, UnifiedWorkflowNode, VisualizerContainer, WorkflowExecutionTimeline, ZodFormRenderer, getGraphBackgroundStyles, useGraphBackgroundStyles, useGraphTheme } from '../chunk-EGKNRM6P.js';
+import { BaseNode, useGraphTheme, BaseEdge, GraphBackground, GraphLegend, GraphFitViewButton } from '../chunk-7PGEGSUM.js';
+export { AgentExecutionTimeline, AgentExecutionVisualizer, AgentIterationEdge, AgentIterationNode, BaseEdge, BaseNode, EmptyVisualizer, ExecutionStats, ExecutionStatusBadge, FormFieldRenderer, GraphBackground, GraphContainer, GraphFitViewButton, GraphFitViewHandler, GraphLegend, RunResourceButton, TimelineAxis, TimelineBar, TimelineContainer, TimelineRow, UnifiedWorkflowEdge, UnifiedWorkflowGraph, UnifiedWorkflowNode, VisualizerContainer, WorkflowExecutionTimeline, ZodFormRenderer, getGraphBackgroundStyles, useGraphBackgroundStyles, useGraphTheme } from '../chunk-7PGEGSUM.js';
 import '../chunk-442LZPIR.js';
-import { NotificationList } from '../chunk-ATEHYDL3.js';
-export { ActivityCard, ActivityFilters as ActivityFiltersBar, ActivityTable, BusinessImpactCard, CostBreakdownCard, CostByModelTable, CostMetricsCard, ErrorAnalysisCard, ErrorBreakdownTable, ExecutionBreakdownTable, ExecutionHealthCard, ExecutionLogsFilters as ExecutionLogsFilterBar, ExecutionLogsTable, NotificationItem, NotificationList, monitoringManifest } from '../chunk-ATEHYDL3.js';
-export { ResourceHealthPanel } from '../chunk-I5WRKH25.js';
+import { NotificationList } from '../chunk-FXWETLEB.js';
+export { ActivityCard, ActivityFilters as ActivityFiltersBar, ActivityTable, BusinessImpactCard, CostBreakdownCard, CostByModelTable, CostMetricsCard, ErrorAnalysisCard, ErrorBreakdownTable, ExecutionBreakdownTable, ExecutionHealthCard, ExecutionLogsFilters as ExecutionLogsFilterBar, ExecutionLogsTable, NotificationItem, NotificationList, monitoringManifest } from '../chunk-FXWETLEB.js';
+export { ResourceHealthPanel } from '../chunk-D3KQAABP.js';
 export { ResourceHealthChart, getHealthColor } from '../chunk-LGKLC5MG.js';
 import '../chunk-TSSKOQBX.js';
 export { SEOSidebar, SEOSidebarMiddle, SEOSidebarTop, seoManifest } from '../chunk-BIWHHWCJ.js';
-export { CreateCredentialModal, CredentialList, CredentialSettings, MembershipFeaturePanel, MembershipStatusBadge, OAuthConnectModal, OrganizationMembershipsList, WebhookUrlDisplayModal, settingsManifest } from '../chunk-XLZZOFGM.js';
+import { showAuthError } from '../chunk-PTUOINQ2.js';
+export { CreateCredentialModal, CredentialList, CredentialSettings, MembershipFeaturePanel, MembershipStatusBadge, OAuthConnectModal, OrganizationMembershipsList, WebhookUrlDisplayModal, settingsManifest, showAuthError } from '../chunk-PTUOINQ2.js';
 import { AppShellLoader } from '../chunk-M25JL54Z.js';
-export { ActivityFeedWidget, CrmOverview, CrmSidebar, CrmSidebarMiddle, CrmSidebarTop, DealDetailPage, DealsListPage, MetricsStrip, MyTasksPanel, PIPELINE_FUNNEL_ORDER, PipelineFunnelWidget, QuickCreateActions, SAVED_VIEW_PRESETS, SavedViewsPanel, TasksDueWidget, crmManifest, useCrmPipelineSummary, useCrmQuickMetrics, useRecentCrmActivity } from '../chunk-EDX6WIN3.js';
+export { ActivityFeedWidget, CrmOverview, CrmSidebar, CrmSidebarMiddle, CrmSidebarTop, DealDetailPage, DealsListPage, MetricsStrip, MyTasksPanel, PIPELINE_FUNNEL_ORDER, PipelineFunnelWidget, QuickCreateActions, SAVED_VIEW_PRESETS, SavedViewsPanel, TasksDueWidget, crmManifest, useCrmPipelineSummary, useCrmQuickMetrics, useRecentCrmActivity } from '../chunk-EPV7NU2E.js';
 import '../chunk-BZZCNLT6.js';
 export { SortableHeader, TableSelectionToolbar } from '../chunk-TUMSNGTX.js';
 import '../chunk-CEWTOKE7.js';
 import '../chunk-IIMU5YAJ.js';
 import { FilterBar } from '../chunk-PDHTXPSF.js';
 export { FilterBar } from '../chunk-PDHTXPSF.js';
-import { CustomModal } from '../chunk-GBMNCNHX.js';
-export { ConfirmationInputModal, ConfirmationModal, CustomModal } from '../chunk-GBMNCNHX.js';
-import '../chunk-TIIPYB2Z.js';
+import { CustomModal } from '../chunk-KVJ3LFH2.js';
+export { ConfirmationInputModal, ConfirmationModal, CustomModal } from '../chunk-KVJ3LFH2.js';
+import '../chunk-QZJM3RYI.js';
 export { CONTAINER_CONSTANTS, SHARED_VIZ_CONSTANTS } from '../chunk-E4WQGJNS.js';
 import '../chunk-7M2VOCYN.js';
-import { useCommandViewLayout, useUpdateApiKey, useDeleteApiKey, useCreateApiKey, useListApiKeys, usePaginationState, useActivateDeployment, useDeactivateDeployment, useDeleteDeployment, useListDeployments, useResources, useCreateSchedule, useListSchedules, usePauseSchedule, useResumeSchedule, useCancelSchedule, useDeleteSchedule, useDealNotes, useCreateDealNote, useDeals, useSyncDealStage, dealKeys, useMarkAllAsRead, useNotifications } from '../chunk-7GG6OSD7.js';
+import { useCommandViewLayout, useOrganizationPermissions, useCreateOrgRole, usePermissionCatalog, useUpdateApiKey, useDeleteApiKey, useCreateApiKey, useListApiKeys, usePaginationState, useActivateDeployment, useDeactivateDeployment, useDeleteDeployment, useListDeployments, useResources, useCreateSchedule, useListSchedules, usePauseSchedule, useResumeSchedule, useCancelSchedule, useDeleteSchedule, useDealNotes, useCreateDealNote, useDeals, useTransitionItem, dealKeys, useMarkAllAsRead, useNotifications } from '../chunk-GUJUK6EH.js';
 import '../chunk-BRXELOHC.js';
 import '../chunk-QSTH6T77.js';
-import { showErrorNotification, showSuccessNotification, showApiErrorNotification } from '../chunk-Z6FAH4XV.js';
+import { showSuccessNotification, showErrorNotification, showApiErrorNotification } from '../chunk-Z6FAH4XV.js';
 export { showApiErrorNotification, showErrorNotification, showInfoNotification, showSuccessNotification, showWarningNotification } from '../chunk-Z6FAH4XV.js';
 import { Graph_module_css_default, useDirectedChainHighlighting, useNodeSelection, GRAPH_CONSTANTS } from '../chunk-22UVE3RA.js';
 export { Graph_module_css_default as graphStyles } from '../chunk-22UVE3RA.js';
 import '../chunk-3ZMAGTWF.js';
-import '../chunk-ULZ2B3NC.js';
-import '../chunk-DMYELNGA.js';
-import '../chunk-Q5HC6ENG.js';
+import '../chunk-ZBCTB5CA.js';
+import '../chunk-3HEUGBOT.js';
+import '../chunk-XOTJNW4Q.js';
 import '../chunk-WLOQ4IBG.js';
-import '../chunk-KVW56ERD.js';
+import '../chunk-AXXTN44Z.js';
 import '../chunk-LVUCBY7X.js';
-import '../chunk-VQESMHQV.js';
-import { SubshellContentContainer } from '../chunk-RX4UWZZR.js';
+import '../chunk-LJWV4TWV.js';
+import { SubshellContentContainer } from '../chunk-TKAYX2SP.js';
 import { ListSkeleton, EmptyState, PageTitleCaption, StatCard, CenteredErrorState, CardHeader, ActivityTimeline } from '../chunk-XUYBOO32.js';
 export { APIErrorAlert, ActivityTimeline, CardHeader, CenteredErrorState, CollapsibleSection, ContextViewer, CustomSelector, DetailCardSkeleton, EmptyState, FeatureUnavailableState, GlowDot, JsonViewer, ListSkeleton, PageNotFound, PageTitleCaption, ResourceCard, StatCard, StatCardSkeleton, StatsCardSkeleton, StatusBadge, TabCountBadge, TimeRangeSelector, TrendIndicator, catalogItemToResourceDefinition } from '../chunk-XUYBOO32.js';
 export { ElevasisLoader } from '../chunk-SZHARWKU.js';
@@ -53,7 +54,7 @@ export { NavigationButton } from '../chunk-NYBEU5TE.js';
 import '../chunk-T6INEVX6.js';
 import '../chunk-2IFYDILW.js';
 import { useRouterContext } from '../chunk-Q7DJKLEN.js';
-import '../chunk-7YQKVWSD.js';
+export { RoleBadge } from '../chunk-SQ5JGELM.js';
 import '../chunk-6IA2OMAE.js';
 import { useAppearance } from '../chunk-QJ2KCHKX.js';
 import '../chunk-HQ7M6PBW.js';
@@ -68,14 +69,15 @@ import '../chunk-QHSW4WHM.js';
 import { useElevasisServices } from '../chunk-IRW7JMQ4.js';
 import '../chunk-BRJ3QZ4E.js';
 import '../chunk-I2KLQ2HA.js';
-import { Stack, Group, ThemeIcon, Text, Badge, Box, Title, TextInput, Alert, Button, Table, Tooltip, ActionIcon, Paper, Code, CopyButton, SimpleGrid, Loader, Pagination, SegmentedControl, Switch, Select, Textarea, Divider, Card, Menu, Timeline, Tabs, ScrollArea, Breadcrumbs as Breadcrumbs$1, Drawer, Center, Popover, Indicator } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
-import { IconBrain, IconDatabase, IconMessage, IconAlertCircle, IconCircleX, IconCircleCheck, IconBolt, IconHandClick, IconClock, IconWebhook, IconExternalLink, IconPencil, IconKey, IconCalendar, IconTrash, IconAlertTriangle, IconExclamationMark, IconShieldLock, IconCheck, IconCopy, IconPlus, IconRocket, IconRefresh, IconPower, IconPlayerPlay, IconTag, IconCalendarRepeat, IconCalendarEvent, IconCalendarTime, IconRobot, IconGitBranch, IconSettings, IconDotsVertical, IconPlayerPause, IconPlayerStop, IconCalendarDue, IconCalendarStats, IconCalendarOff, IconListCheck, IconBell } from '@tabler/icons-react';
-import { useQueryClient, useQuery } from '@tanstack/react-query';
-import { memo, forwardRef, useMemo, useImperativeHandle, useState, useEffect, useCallback, useRef } from 'react';
 import * as runtime from 'react/jsx-runtime';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Stack, Group, ThemeIcon, Text, Badge, Box, Card, Title, Checkbox, Tooltip, Center, TextInput, Textarea, Loader, Alert, Button, Table, ActionIcon, Paper, Code, CopyButton, SimpleGrid, Pagination, SegmentedControl, Switch, Select, Divider, Menu, Timeline, Tabs, ScrollArea, Breadcrumbs as Breadcrumbs$1, Drawer, Popover, Indicator } from '@mantine/core';
+import { IconBrain, IconDatabase, IconMessage, IconAlertCircle, IconCircleX, IconCircleCheck, IconBolt, IconHandClick, IconClock, IconWebhook, IconExternalLink, IconLock, IconPencil, IconKey, IconCalendar, IconTrash, IconAlertTriangle, IconExclamationMark, IconShieldLock, IconCheck, IconCopy, IconPlus, IconRocket, IconRefresh, IconPower, IconPlayerPlay, IconTag, IconCalendarRepeat, IconCalendarEvent, IconCalendarTime, IconRobot, IconGitBranch, IconSettings, IconDotsVertical, IconPlayerPause, IconPlayerStop, IconCalendarDue, IconCalendarStats, IconCalendarOff, IconListCheck, IconBell } from '@tabler/icons-react';
 import { useForm } from '@mantine/form';
+import { memo, forwardRef, useMemo, useImperativeHandle, useRef, useEffect, useState, useCallback } from 'react';
+import { z } from 'zod';
+import { useDisclosure } from '@mantine/hooks';
+import { useQueryClient, useQuery } from '@tanstack/react-query';
 import { useReactFlow, ReactFlow, ReactFlowProvider } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { Link, RichTextEditor as RichTextEditor$1 } from '@mantine/tiptap';
@@ -85,6 +87,210 @@ import StarterKit from '@tiptap/starter-kit';
 import { Prism } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
+function Can({ permission, fallback = null, children }) {
+  const { hasPermission, isReady } = useOrganizationPermissions();
+  if (!isReady) return null;
+  return hasPermission(permission) ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx(Fragment, { children: fallback });
+}
+function groupByDomain(catalog) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const row of catalog) {
+    const domain = row.key.split(".")[0] ?? row.key;
+    const existing = groups.get(domain);
+    if (existing) {
+      existing.push(row);
+    } else {
+      groups.set(domain, [row]);
+    }
+  }
+  return groups;
+}
+var DOMAIN_LABELS = {
+  org: "Organization",
+  members: "Members",
+  roles: "Roles",
+  secrets: "Secrets",
+  operations: "Operations",
+  work: "Work"
+};
+function domainLabel(domain) {
+  return DOMAIN_LABELS[domain] ?? domain.charAt(0).toUpperCase() + domain.slice(1);
+}
+function PermissionMatrix({ catalog, selectedKeys, onChange, systemLocked }) {
+  const groups = groupByDomain(catalog);
+  const isDisplayOnly = !onChange || systemLocked;
+  function handleToggle(key, checked) {
+    if (!onChange || systemLocked) return;
+    if (checked) {
+      onChange([...selectedKeys, key]);
+    } else {
+      onChange(selectedKeys.filter((k) => k !== key));
+    }
+  }
+  return /* @__PURE__ */ jsx(Stack, { gap: "md", children: Array.from(groups.entries()).map(([domain, rows]) => /* @__PURE__ */ jsxs(Card, { withBorder: true, padding: "md", children: [
+    /* @__PURE__ */ jsx(Title, { order: 5, mb: "sm", style: { textTransform: "capitalize" }, children: domainLabel(domain) }),
+    /* @__PURE__ */ jsx(Stack, { gap: "xs", children: rows.map((row) => {
+      const isLocked = !row.isOrgGrantable;
+      const isChecked = selectedKeys.includes(row.key);
+      const isDisabled = isDisplayOnly || isLocked;
+      const checkbox = /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: isChecked,
+          disabled: isDisabled,
+          onChange: (e) => handleToggle(row.key, e.currentTarget.checked),
+          label: /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", children: [
+            /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", c: isLocked ? "var(--color-text-subtle)" : void 0, children: row.key }),
+            isLocked && /* @__PURE__ */ jsx(IconLock, { size: 14, style: { color: "var(--color-text-subtle)", flexShrink: 0 } }),
+            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: row.description })
+          ] })
+        },
+        row.key
+      );
+      if (isLocked) {
+        return /* @__PURE__ */ jsx(Tooltip, { label: "Reserved for built-in roles", position: "right", children: /* @__PURE__ */ jsx("div", { children: checkbox }) }, row.key);
+      }
+      return checkbox;
+    }) })
+  ] }, domain)) });
+}
+function NoAccessState() {
+  return /* @__PURE__ */ jsx(Center, { style: { flex: 1, minHeight: "100%", width: "100%", padding: 24 }, children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: "xs", style: { maxWidth: 480, textAlign: "center" }, children: [
+    /* @__PURE__ */ jsx(IconLock, { size: 44, stroke: 1.8, color: "var(--color-text-subtle)" }),
+    /* @__PURE__ */ jsx(Title, { order: 3, children: "Access restricted" }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "You don't have permission to view this page. Contact an org admin if you need access." })
+  ] }) });
+}
+var CreateRoleFormSchema = z.object({
+  name: z.string().trim().min(2).max(50),
+  slug: z.string().regex(/^[a-z0-9-]+$/, "lowercase, numbers, dashes only").min(2).max(50),
+  description: z.string().max(200).optional(),
+  permissionKeys: z.array(z.string())
+});
+function toSlug(name) {
+  return name.toLowerCase().replace(/\s+/g, "-");
+}
+var nameSchema = CreateRoleFormSchema.shape.name;
+var slugSchema = CreateRoleFormSchema.shape.slug;
+var descriptionSchema = z.string().max(200);
+function extractError(result) {
+  return result.error.issues[0]?.message ?? "Invalid value";
+}
+function CreateRoleModal({ opened, onClose, onCreated }) {
+  const createMutation = useCreateOrgRole();
+  const catalog = usePermissionCatalog();
+  const slugDirtyRef = useRef(false);
+  const form = useForm({
+    initialValues: {
+      name: "",
+      slug: "",
+      description: "",
+      permissionKeys: []
+    },
+    validate: {
+      name: (value) => {
+        const r = nameSchema.safeParse(value);
+        return r.success ? null : extractError(r);
+      },
+      slug: (value) => {
+        const r = slugSchema.safeParse(value);
+        return r.success ? null : extractError(r);
+      },
+      description: (value) => {
+        if (!value) return null;
+        const r = descriptionSchema.safeParse(value);
+        return r.success ? null : extractError(r);
+      },
+      permissionKeys: () => null
+    }
+  });
+  useEffect(() => {
+    if (!slugDirtyRef.current) {
+      form.setFieldValue("slug", toSlug(form.values.name));
+    }
+  }, [form.values.name]);
+  const handleSlugChange = (e) => {
+    slugDirtyRef.current = true;
+    form.setFieldValue("slug", e.currentTarget.value);
+  };
+  const handleClose = () => {
+    if (!createMutation.isPending) {
+      form.reset();
+      slugDirtyRef.current = false;
+      onClose();
+    }
+  };
+  const onSubmit = form.onSubmit(async (values) => {
+    try {
+      const role = await createMutation.mutateAsync({
+        name: values.name,
+        slug: values.slug,
+        description: values.description || void 0,
+        permissionKeys: values.permissionKeys
+      });
+      showSuccessNotification(`Role "${role.name}" created.`);
+      onCreated?.(role.id);
+      handleClose();
+    } catch (err) {
+      showAuthError(err);
+    }
+  });
+  const grantableCatalog = (catalog.data?.permissions ?? []).filter((p) => p.isOrgGrantable);
+  return /* @__PURE__ */ jsx(CustomModal, { opened, onClose: handleClose, size: "lg", loading: createMutation.isPending, children: /* @__PURE__ */ jsx("form", { onSubmit, children: /* @__PURE__ */ jsxs(Stack, { p: "md", gap: "md", children: [
+    /* @__PURE__ */ jsx(Title, { order: 4, children: "Create custom role" }),
+    /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          label: "Display name",
+          placeholder: "e.g. Content Editor",
+          required: true,
+          disabled: createMutation.isPending,
+          ...form.getInputProps("name")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          label: "Slug",
+          placeholder: "e.g. content-editor",
+          description: "Lowercase letters, numbers, and dashes only",
+          required: true,
+          disabled: createMutation.isPending,
+          ...form.getInputProps("slug"),
+          onChange: handleSlugChange
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          label: "Description",
+          placeholder: "Optional description",
+          minRows: 2,
+          disabled: createMutation.isPending,
+          ...form.getInputProps("description")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+      /* @__PURE__ */ jsx(Title, { order: 5, children: "Permissions" }),
+      catalog.isLoading && /* @__PURE__ */ jsx(Loader, { size: "sm" }),
+      catalog.isError && /* @__PURE__ */ jsx(Alert, { color: "red", children: /* @__PURE__ */ jsx(Text, { size: "sm", children: "Failed to load permission catalog. Please close and try again." }) }),
+      !catalog.isLoading && !catalog.isError && /* @__PURE__ */ jsx(
+        PermissionMatrix,
+        {
+          catalog: grantableCatalog,
+          selectedKeys: form.values.permissionKeys,
+          onChange: (keys) => form.setFieldValue("permissionKeys", keys)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Group, { justify: "flex-end", mt: "md", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "default", onClick: handleClose, disabled: createMutation.isPending, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", loading: createMutation.isPending, children: "Create role" })
+    ] })
+  ] }) }) });
+}
 function EditApiKeyModal({ apiKey, onClose }) {
   const [name, setName] = useState("");
   const [nameError, setNameError] = useState(null);
@@ -3080,7 +3286,7 @@ function DealKanbanCard({ deal, config, onClick, onDragStart, onDragEnd }) {
   const companyName = deal.contact?.company?.name || deal.discovery_data?.company || deal.contact_email?.split("@")[1] || null;
   const hasInitialFee = typeof deal.initial_fee === "number" && deal.initial_fee > 0;
   const hasMonthlyFee = typeof deal.monthly_fee === "number" && deal.monthly_fee > 0;
-  const stageColor = (deal.cached_stage ? config[deal.cached_stage]?.color : null) ?? "gray";
+  const stageColor = (deal.stage_key ? config[deal.stage_key]?.color : null) ?? "gray";
   return /* @__PURE__ */ jsx(
     Paper,
     {
@@ -3130,7 +3336,7 @@ function DealDrawer({ deal, config, opened, onClose, renderActions }) {
   const displayName = contactName || deal.contact_email || "Unknown";
   const email = deal.contact?.email || deal.contact_email || null;
   const companyName = deal.contact?.company?.name || deal.discovery_data?.company || null;
-  const stage = deal.cached_stage;
+  const stage = deal.stage_key;
   const badgeColor = (stage ? config?.[stage]?.color : null) ?? "gray";
   const activityLog = deal.activity_log || [];
   const hasInitialFee = typeof deal.initial_fee === "number" && deal.initial_fee > 0;
@@ -3252,7 +3458,7 @@ function groupDealsByStage(deals, columns) {
   const map = /* @__PURE__ */ new Map();
   for (const stage of columns) map.set(stage, []);
   for (const deal of deals) {
-    const key = deal.cached_stage ?? UNSTAGED_KEY;
+    const key = deal.stage_key ?? UNSTAGED_KEY;
     const bucket = map.get(key);
     if (bucket) {
       bucket.push(deal);
@@ -3263,18 +3469,25 @@ function groupDealsByStage(deals, columns) {
   return map;
 }
 function KanbanBoard({ config, renderDrawerActions }) {
-  const { data: deals, total, isLoading, error } = useDeals({
+  const {
+    data: deals,
+    total,
+    isLoading,
+    error
+  } = useDeals({
     limit: KANBAN_FETCH_LIMIT,
     offset: 0
   });
-  const syncStage = useSyncDealStage();
+  const transitionItem = useTransitionItem();
   const queryClient = useQueryClient();
   const [selectedDeal, setSelectedDeal] = useState(null);
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [dragOverColumn, setDragOverColumn] = useState(null);
   const draggingDealRef = useRef(null);
   const resolvedConfig = config ?? {};
-  const configuredStages = Object.keys(resolvedConfig).filter((stage) => Boolean(resolvedConfig[stage]));
+  const configuredStages = Object.keys(resolvedConfig).filter(
+    (stage) => Boolean(resolvedConfig[stage])
+  );
   const columns = [...configuredStages, UNSTAGED_KEY];
   const hasConfig = configuredStages.length > 0;
   const groupedDeals = groupDealsByStage(deals ?? [], columns);
@@ -3303,17 +3516,17 @@ function KanbanBoard({ config, renderDrawerActions }) {
       const deal = draggingDealRef.current;
       draggingDealRef.current = null;
       if (!deal) return;
-      if (deal.cached_stage === targetStage) return;
+      if (deal.stage_key === targetStage) return;
       queryClient.setQueriesData({ queryKey: dealKeys.lists() }, (old) => {
         if (!old) return old;
         return {
           ...old,
-          data: old.data.map((d) => d.id === deal.id ? { ...d, cached_stage: targetStage } : d)
+          data: old.data.map((d) => d.id === deal.id ? { ...d, stage_key: targetStage } : d)
         };
       });
-      syncStage.mutate({ dealId: deal.id, stage: targetStage });
+      transitionItem.mutate({ dealId: deal.id, pipelineKey: "default", stageKey: targetStage });
     },
-    [queryClient, syncStage]
+    [queryClient, transitionItem]
   );
   const handleDragEnd = useCallback(() => {
     draggingDealRef.current = null;
@@ -3489,4 +3702,4 @@ function NotificationBell({ unreadCount, onNavigate }) {
   ] });
 }
 
-export { AbsoluteScheduleForm, ApiKeyDisplayModal, ApiKeyList, ApiKeySettings, Breadcrumbs, CommandViewEdge, CommandViewGraph, CommandViewNode, CrashErrorFallback, CreateApiKeyModal, CreateScheduleModal, DEAL_STAGES, DEFAULT_KANBAN_CONFIG, DealDrawer, DealKanbanCard, DeleteScheduleModal, DeploymentDetailModal, DeploymentList, DeploymentSettings, DeploymentStatusBadge, EditApiKeyModal, ErrorReportCard, KanbanBoard, MdxRenderer, NotificationBell, NotificationPanel, RecurringScheduleForm, RelativeScheduleForm, RichTextEditor, ScheduleCard, ScheduleDetailModal, ScheduleTypeSelector, TaskScheduler, buildErrorReport, mdxComponents };
+export { AbsoluteScheduleForm, ApiKeyDisplayModal, ApiKeyList, ApiKeySettings, Breadcrumbs, Can, CommandViewEdge, CommandViewGraph, CommandViewNode, CrashErrorFallback, CreateApiKeyModal, CreateRoleModal, CreateScheduleModal, DEAL_STAGES, DEFAULT_KANBAN_CONFIG, DealDrawer, DealKanbanCard, DeleteScheduleModal, DeploymentDetailModal, DeploymentList, DeploymentSettings, DeploymentStatusBadge, EditApiKeyModal, ErrorReportCard, KanbanBoard, MdxRenderer, NoAccessState, NotificationBell, NotificationPanel, PermissionMatrix, RecurringScheduleForm, RelativeScheduleForm, RichTextEditor, ScheduleCard, ScheduleDetailModal, ScheduleTypeSelector, TaskScheduler, buildErrorReport, mdxComponents };