@burdenoff/microfe-vibecontrols 2026.709.2 → 2026.710.1

package/dist/pages/WebhooksPage.js

@@ -11,9 +11,9 @@ import { SearchInput as ce } from "../components/shared/SearchInput.js";
 import { FilterDropdown as le } from "../components/shared/FilterDropdown.js";
 import { Card as ue } from "../components/shared/Card.js";
 import { GetHelpButton as de } from "../components/shared/GetHelpButton.js";
-import { SelectionCheckbox as o } from "../components/shared/SelectionCheckbox.js";
+import { SelectionCheckbox as fe } from "../components/shared/SelectionCheckbox.js";
 import "../components/shared/index.js";
-import { isNative as fe, nativeImpact as pe, nativeNotify as me } from "../utils/nativeBridge.js";
+import { isNative as o, nativeImpact as pe, nativeNotify as me } from "../utils/nativeBridge.js";
 import { VIBE_PERMISSIONS as s } from "../constants/permissions.js";
 import { PageSkeleton as he } from "../components/shared/PageSkeleton.js";
 import { WEBHOOK_EVENTS as ge, isCustomEvent as c } from "../components/webhooks/types.js";
@@ -24,10 +24,10 @@ import { usePermissions as Ae } from "@burdenoff/fe-libs/shared/providers/shell"
 import { AnimatePresence as je } from "framer-motion";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 import { Button as Me, CTAOverflowMenu as Ne, PagePurpose as Pe } from "@burdenoff/fe-libs/ui";
-import { AccessDenied as Fe, PermissionButton as Ie } from "@burdenoff/fe-libs/shared/components";
-import { MotionItem as Le, MotionList as Re, MotionPage as g } from "@burdenoff/fe-libs/shared/motion";
+import { AccessDenied as Fe, PermissionButton as g } from "@burdenoff/fe-libs/shared/components";
+import { MotionItem as Ie, MotionList as Le, MotionPage as _ } from "@burdenoff/fe-libs/shared/motion";
 //#region src/pages/WebhooksPage.tsx
-var ze = [
+var Re = [
 	{
 		value: "all",
 		label: "All Statuses"
@@ -45,24 +45,24 @@ var ze = [
 		label: "Has Errors"
 	}
 ];
-function Be() {
+function ze() {
 	ne();
-	let Be = re(), { t: Ve } = ve(), { hasPermission: _, isLoading: He, permissions: Ue } = Ae(), v = (e, t) => {
-		let n = Ve(e);
+	let ze = re(), { t: Be } = ve(), { hasPermission: Ve, isLoading: He, permissions: Ue } = Ae(), v = (e, t) => {
+		let n = Be(e);
 		return n === e ? t : n;
-	}, We = _(s.WEBHOOK_LIST), Ge = _(s.WEBHOOK_CREATE), Ke = He || !We, [y, qe] = d(""), [b, Je] = d("all"), [x, Ye] = d("list"), [S, C] = d(!1), [w, Xe] = d(null), [Ze, T] = d(null), [E, Qe] = d(!1), [D, O] = d(null), [$e, k] = d(null), [A, j] = d([]), [M, N] = d([]), [P, F] = d(!1), [I, L] = d(""), [R, z] = d(/* @__PURE__ */ new Set()), [B, V] = d(null), [H, U] = d(null);
+	}, We = Ve(s.WEBHOOK_LIST), Ge = Ve(s.WEBHOOK_CREATE), Ke = He || !We, [y, qe] = d(""), [b, Je] = d("all"), [x, Ye] = d("list"), [S, C] = d(!1), [w, T] = d(null), [Xe, E] = d(null), [D, Ze] = d(!1), [O, k] = d(null), [Qe, A] = d(null), [j, M] = d([]), [N, P] = d([]), [F, I] = d(!1), [L, R] = d(""), [z, B] = d(/* @__PURE__ */ new Set()), [V, H] = d(null), [U, W] = d(null);
 	_e(() => {
-		if (!D) return;
-		let e = window.setTimeout(() => O(null), 4e3);
+		if (!O) return;
+		let e = window.setTimeout(() => k(null), 4e3);
 		return () => window.clearTimeout(e);
-	}, [D]), _e(() => {
+	}, [O]), _e(() => {
 		if (!S) return;
 		let e = (e) => {
-			e.key === "Escape" && !E && C(!1);
+			e.key === "Escape" && !D && C(!1);
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [E, S]);
-	let et = u(null), tt = u(null), nt = u(null), W = u(null), [rt] = e({ refetchQueries: ["ListWebhooks"] }), [it] = i({ refetchQueries: ["ListWebhooks"] }), [at] = r({ refetchQueries: ["ListWebhooks"] }), [ot] = t({ refetchQueries: ["ListWebhooks"] }), { agents: st } = ie(), ct = l(() => st.map((e) => ({
+	}, [D, S]);
+	let $e = u(null), et = u(null), tt = u(null), nt = u(null), [rt] = e({ refetchQueries: ["ListWebhooks"] }), [it] = i({ refetchQueries: ["ListWebhooks"] }), [at] = r({ refetchQueries: ["ListWebhooks"] }), [ot] = t({ refetchQueries: ["ListWebhooks"] }), { agents: st } = ie(), ct = l(() => st.map((e) => ({
 		id: e.id,
 		name: e.name
 	})), [st]), { data: lt, loading: G, error: ut, refetch: K } = n({
@@ -99,111 +99,111 @@ function Be() {
 		q,
 		y,
 		b
-	]), Y = l(() => q.filter((e) => R.has(e.id)), [q, R]), X = Y.filter((e) => e.isActive), Z = Y.filter((e) => !e.isActive), dt = J.length > 0 && J.every((e) => R.has(e.id)), ft = J.some((e) => R.has(e.id)) && !dt, pt = () => {
-		T(null), k(null), j([]), N([]), F(!1), L(""), C(!0);
+	]), Y = l(() => q.filter((e) => z.has(e.id)), [q, z]), X = Y.filter((e) => e.isActive), Z = Y.filter((e) => !e.isActive), dt = J.length > 0 && J.every((e) => z.has(e.id)), ft = J.some((e) => z.has(e.id)) && !dt, pt = () => {
+		E(null), A(null), M([]), P([]), I(!1), R(""), C(!0);
 	}, mt = (e) => {
-		j((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+		M((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
 	}, ht = async () => {
-		let e = et.current?.value?.trim(), t = tt.current?.value?.trim(), n = nt.current?.value?.trim() || void 0, r = W.current?.value?.trim() || void 0;
+		let e = $e.current?.value?.trim(), t = et.current?.value?.trim(), n = tt.current?.value?.trim() || void 0, r = nt.current?.value?.trim() || void 0;
 		if (!e) {
-			T(v("webhooks.nameRequired", "Name is required"));
+			E(v("webhooks.nameRequired", "Name is required"));
 			return;
 		}
 		if (!t) {
-			T(v("webhooks.urlRequired", "URL is required"));
+			E(v("webhooks.urlRequired", "URL is required"));
 			return;
 		}
 		try {
 			let e = new URL(t);
 			if (!["http:", "https:"].includes(e.protocol)) {
-				T(v("webhooks.urlProtocolRequired", "URL must use http:// or https:// protocol"));
+				E(v("webhooks.urlProtocolRequired", "URL must use http:// or https:// protocol"));
 				return;
 			}
 		} catch {
-			T(v("webhooks.urlInvalid", "Please enter a valid URL (e.g., https://example.com/webhook)"));
+			E(v("webhooks.urlInvalid", "Please enter a valid URL (e.g., https://example.com/webhook)"));
 			return;
 		}
-		if (A.length === 0) {
-			T(v("webhooks.eventRequired", "At least one event must be selected"));
+		if (j.length === 0) {
+			E(v("webhooks.eventRequired", "At least one event must be selected"));
 			return;
 		}
-		Qe(!0), T(null), k(null);
+		Ze(!0), E(null), A(null);
 		try {
 			await rt({ variables: { input: {
 				name: e,
 				url: t,
-				events: A,
+				events: j,
 				secret: n,
 				...r ? { signingKey: r } : {},
-				...M.length > 0 ? { agentIds: M } : {}
-			} } }), C(!1), O(v("webhooks.createdSuccess", "Webhook created successfully")), setTimeout(() => O(null), 3e3);
+				...N.length > 0 ? { agentIds: N } : {}
+			} } }), C(!1), k(v("webhooks.createdSuccess", "Webhook created successfully")), setTimeout(() => k(null), 3e3);
 		} catch (e) {
 			if (te(e)) {
-				C(!1), U({
+				C(!1), W({
 					title: "Webhook Quota Reached",
 					message: "You have reached the webhook limit for your current plan. Upgrade to create more webhooks."
 				});
 				return;
 			}
-			T(e instanceof Error ? e.message : v("webhooks.failedCreate", "Failed to create webhook"));
+			E(e instanceof Error ? e.message : v("webhooks.failedCreate", "Failed to create webhook"));
 		} finally {
-			Qe(!1);
+			Ze(!1);
 		}
 	}, gt = async (e) => {
 		try {
-			k(null), await it({ variables: {
+			A(null), await it({ variables: {
 				id: e.id,
 				input: { isActive: !e.isActive }
-			} }), O(e.isActive ? v("webhooks.disabledSuccess", "Webhook disabled successfully") : v("webhooks.enabledSuccess", "Webhook enabled successfully"));
+			} }), k(e.isActive ? v("webhooks.disabledSuccess", "Webhook disabled successfully") : v("webhooks.enabledSuccess", "Webhook enabled successfully"));
 		} catch (e) {
-			console.error("Failed to toggle webhook:", e), k(e instanceof Error ? e.message : v("webhooks.failedToggle", "Failed to update webhook state"));
+			console.error("Failed to toggle webhook:", e), A(e instanceof Error ? e.message : v("webhooks.failedToggle", "Failed to update webhook state"));
 		}
 	}, _t = async (e) => {
-		Xe(e.id);
+		T(e.id);
 		try {
-			k(null), await at({ variables: { id: e.id } }), O(v("webhooks.testSuccess", "Webhook test delivery completed"));
+			A(null), await at({ variables: { id: e.id } }), k(v("webhooks.testSuccess", "Webhook test delivery completed"));
 		} catch (e) {
 			if (te(e)) {
-				U({
+				W({
 					title: "Webhook Test Quota Reached",
 					message: "You have used the webhook test quota for your current plan. Upgrade to continue testing deliveries."
 				});
 				return;
 			}
-			console.error("Failed to test webhook:", e), k(e instanceof Error ? e.message : v("webhooks.failedTest", "Failed to test webhook"));
+			console.error("Failed to test webhook:", e), A(e instanceof Error ? e.message : v("webhooks.failedTest", "Failed to test webhook"));
 		} finally {
-			Xe(null);
+			T(null);
 		}
 	}, vt = async (e) => {
 		try {
-			k(null), await ot({ variables: { id: e.id } }), O(v("webhooks.deletedSuccess", "Webhook deleted successfully")), fe() && me("success");
+			A(null), await ot({ variables: { id: e.id } }), k(v("webhooks.deletedSuccess", "Webhook deleted successfully")), o() && me("success");
 		} catch (e) {
-			console.error("Failed to delete webhook:", e), k(e instanceof Error ? e.message : v("webhooks.failedDelete", "Failed to delete webhook")), fe() && me("error");
+			console.error("Failed to delete webhook:", e), A(e instanceof Error ? e.message : v("webhooks.failedDelete", "Failed to delete webhook")), o() && me("error");
 		}
 	}, yt = (e, t) => {
-		z((n) => {
+		B((n) => {
 			let r = new Set(n);
 			return t ? r.add(e) : r.delete(e), r;
 		});
 	}, bt = (e) => {
-		z((t) => {
+		B((t) => {
 			let n = new Set(t);
 			return J.forEach((t) => {
 				e ? n.add(t.id) : n.delete(t.id);
 			}), n;
 		});
-	}, Q = () => z(/* @__PURE__ */ new Set()), xt = async (e) => {
+	}, Q = () => B(/* @__PURE__ */ new Set()), xt = async (e) => {
 		let t = e ? Z : X;
 		if (t.length === 0) return;
 		let n = await Promise.allSettled(t.map((t) => it({ variables: {
 			id: t.id,
 			input: { isActive: e }
 		} }))), r = n.filter((e) => e.status === "fulfilled").length, i = n.length - r;
-		O(`${e ? "Enabled" : "Disabled"} ${r} webhook${r === 1 ? "" : "s"}${i > 0 ? ` • ${i} failed` : ""}`), setTimeout(() => O(null), 4e3), V(null), Q(), await K();
+		k(`${e ? "Enabled" : "Disabled"} ${r} webhook${r === 1 ? "" : "s"}${i > 0 ? ` • ${i} failed` : ""}`), setTimeout(() => k(null), 4e3), H(null), Q(), await K();
 	}, St = async () => {
 		if (Y.length === 0) return;
 		let e = await Promise.allSettled(Y.map((e) => ot({ variables: { id: e.id } }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.length - t;
-		O(`Deleted ${t} webhook${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`), setTimeout(() => O(null), 4e3), V(null), Q(), await K();
+		k(`Deleted ${t} webhook${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`), setTimeout(() => k(null), 4e3), H(null), Q(), await K();
 	}, $ = {
 		total: q.length,
 		active: q.filter((e) => e.isActive).length,
@@ -213,44 +213,44 @@ function Be() {
 		let t = Date.now() - new Date(e).getTime();
 		return t < 6e4 ? v("webhooks.justNow", "Just now") : t < 36e5 ? `${Math.floor(t / 6e4)}m ago` : t < 864e5 ? `${Math.floor(t / 36e5)}h ago` : `${Math.floor(t / 864e5)}d ago`;
 	};
-	return He ? /* @__PURE__ */ m(g, {
+	return He ? /* @__PURE__ */ m(_, {
 		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen",
 		children: /* @__PURE__ */ m(he, {
 			variant: "rows",
 			count: 6
 		})
-	}) : Ue && Ue.permissionStrings?.length > 0 && !We ? /* @__PURE__ */ m(g, {
+	}) : Ue && Ue.permissionStrings?.length > 0 && !We ? /* @__PURE__ */ m(_, {
 		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen",
 		children: /* @__PURE__ */ m(Fe, {
 			title: v("common.accessDeniedTitle", "Access Denied"),
 			description: v("webhooks.accessDeniedDescription", "You don't have permission to view webhooks."),
 			details: "Required permission: webhook:list"
 		})
-	}) : ut && q.length === 0 ? /* @__PURE__ */ m(g, {
+	}) : ut && q.length === 0 ? /* @__PURE__ */ m(_, {
 		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen",
 		children: /* @__PURE__ */ m(oe, {
 			title: v("webhooks.failedLoad", "Failed to load webhooks"),
 			message: ut.message,
 			onRetry: () => K()
 		})
-	}) : /* @__PURE__ */ h(g, {
+	}) : /* @__PURE__ */ h(_, {
 		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen",
 		children: [
-			D && /* @__PURE__ */ m("div", {
+			O && /* @__PURE__ */ m("div", {
 				className: "fixed top-4 left-4 right-4 sm:left-auto z-50 bg-status-success-bg text-status-success-text px-4 py-3 rounded-md shadow-lg",
-				children: D
+				children: O
 			}),
-			$e && /* @__PURE__ */ m("div", {
+			Qe && /* @__PURE__ */ m("div", {
 				role: "alert",
 				className: "rounded-card border border-status-error-border bg-status-error-bg-subtle px-4 py-3 text-sm text-status-error-text",
-				children: $e
+				children: Qe
 			}),
 			/* @__PURE__ */ m(ae, {
 				title: v("nav.webhooks", "Webhooks"),
 				description: `${$.active} of ${$.total} webhooks active`,
 				actions: /* @__PURE__ */ h("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ m(Ie, {
+					children: [/* @__PURE__ */ m(g, {
 						permission: s.WEBHOOK_CREATE,
 						children: /* @__PURE__ */ h(Me, {
 							type: "button",
@@ -300,7 +300,7 @@ function Be() {
 					children: /* @__PURE__ */ m(le, {
 						label: v("webhooks.status", "Status"),
 						value: b,
-						options: ze,
+						options: Re,
 						onChange: Je
 					})
 				})]
@@ -350,7 +350,7 @@ function Be() {
 						className: "flex flex-wrap items-center gap-3",
 						children: [/* @__PURE__ */ h("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ m(o, {
+							children: [/* @__PURE__ */ m(fe, {
 								checked: dt,
 								indeterminate: ft,
 								onChange: bt,
@@ -359,7 +359,7 @@ function Be() {
 								className: "text-sm font-medium text-text-primary",
 								children: "Select all visible"
 							})]
-						}), R.size > 0 && /* @__PURE__ */ m("button", {
+						}), z.size > 0 && /* @__PURE__ */ m("button", {
 							type: "button",
 							onClick: Q,
 							className: "text-sm text-text-secondary hover:text-text-primary",
@@ -370,28 +370,40 @@ function Be() {
 						children: [
 							/* @__PURE__ */ h("span", {
 								className: "rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary",
-								children: [R.size, " selected"]
+								children: [z.size, " selected"]
 							}),
-							/* @__PURE__ */ h("button", {
-								type: "button",
-								onClick: () => V("enable"),
-								disabled: Z.length === 0,
-								className: "rounded-md border border-status-success-border px-3 py-2 text-sm font-medium text-status-success-text hover:bg-status-success-bg disabled:cursor-not-allowed disabled:opacity-50",
-								children: ["Enable Selected", Z.length > 0 ? ` (${Z.length})` : ""]
+							/* @__PURE__ */ m(g, {
+								permission: s.WEBHOOK_UPDATE,
+								deniedBehavior: "hide",
+								children: /* @__PURE__ */ h("button", {
+									type: "button",
+									onClick: () => H("enable"),
+									disabled: Z.length === 0,
+									className: "rounded-md border border-status-success-border px-3 py-2 text-sm font-medium text-status-success-text hover:bg-status-success-bg disabled:cursor-not-allowed disabled:opacity-50",
+									children: ["Enable Selected", Z.length > 0 ? ` (${Z.length})` : ""]
+								})
 							}),
-							/* @__PURE__ */ h("button", {
-								type: "button",
-								onClick: () => V("disable"),
-								disabled: X.length === 0,
-								className: "rounded-md border border-status-warning-border px-3 py-2 text-sm font-medium text-status-warning-text hover:bg-status-warning-bg disabled:cursor-not-allowed disabled:opacity-50",
-								children: ["Disable Selected", X.length > 0 ? ` (${X.length})` : ""]
+							/* @__PURE__ */ m(g, {
+								permission: s.WEBHOOK_UPDATE,
+								deniedBehavior: "hide",
+								children: /* @__PURE__ */ h("button", {
+									type: "button",
+									onClick: () => H("disable"),
+									disabled: X.length === 0,
+									className: "rounded-md border border-status-warning-border px-3 py-2 text-sm font-medium text-status-warning-text hover:bg-status-warning-bg disabled:cursor-not-allowed disabled:opacity-50",
+									children: ["Disable Selected", X.length > 0 ? ` (${X.length})` : ""]
+								})
 							}),
-							/* @__PURE__ */ h("button", {
-								type: "button",
-								onClick: () => V("delete"),
-								disabled: Y.length === 0,
-								className: "rounded-md border border-status-error-bg px-3 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg disabled:cursor-not-allowed disabled:opacity-50",
-								children: ["Delete Selected", Y.length > 0 ? ` (${Y.length})` : ""]
+							/* @__PURE__ */ m(g, {
+								permission: s.WEBHOOK_DELETE,
+								deniedBehavior: "hide",
+								children: /* @__PURE__ */ h("button", {
+									type: "button",
+									onClick: () => H("delete"),
+									disabled: Y.length === 0,
+									className: "rounded-md border border-status-error-bg px-3 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg disabled:cursor-not-allowed disabled:opacity-50",
+									children: ["Delete Selected", Y.length > 0 ? ` (${Y.length})` : ""]
+								})
 							})
 						]
 					})]
@@ -402,9 +414,9 @@ function Be() {
 				children: G && q.length === 0 ? /* @__PURE__ */ m(he, {
 					variant: "rows",
 					count: 6
-				}) : J.length > 0 ? /* @__PURE__ */ m(Re, {
+				}) : J.length > 0 ? /* @__PURE__ */ m(Le, {
 					className: x === "grid" ? "grid grid-cols-1 gap-4 xl:grid-cols-2" : "space-y-4",
-					children: J.map((e) => /* @__PURE__ */ m(Le, {
+					children: J.map((e) => /* @__PURE__ */ m(Ie, {
 						variant: "fadeRight",
 						children: /* @__PURE__ */ m(ue, {
 							className: "p-4",
@@ -415,8 +427,8 @@ function Be() {
 									children: [
 										/* @__PURE__ */ m("div", {
 											onClick: (e) => e.stopPropagation(),
-											children: /* @__PURE__ */ m(o, {
-												checked: R.has(e.id),
+											children: /* @__PURE__ */ m(fe, {
+												checked: z.has(e.id),
 												onChange: (t) => yt(e.id, t),
 												ariaLabel: `Select webhook ${e.name}`,
 												className: "mt-2"
@@ -503,28 +515,40 @@ function Be() {
 								}), /* @__PURE__ */ h("div", {
 									className: "flex items-center gap-2 flex-shrink-0",
 									children: [
-										/* @__PURE__ */ h("button", {
-											type: "button",
-											onClick: () => _t(e),
-											disabled: w === e.id,
-											className: "flex items-center gap-1 px-3 py-1.5 text-sm bg-bg-sunken text-text-primary hover:bg-action-secondary-bg-hover rounded-md transition-colors disabled:opacity-50",
-											children: [w === e.id ? /* @__PURE__ */ m(De, { className: "size-4 animate-spin" }) : /* @__PURE__ */ m(Ee, { className: "size-4" }), v("webhooks.test", "Test")]
+										/* @__PURE__ */ m(g, {
+											permission: s.WEBHOOK_EXECUTE,
+											deniedBehavior: "hide",
+											children: /* @__PURE__ */ h("button", {
+												type: "button",
+												onClick: () => _t(e),
+												disabled: w === e.id,
+												className: "flex items-center gap-1 px-3 py-1.5 text-sm bg-bg-sunken text-text-primary hover:bg-action-secondary-bg-hover rounded-md transition-colors disabled:opacity-50",
+												children: [w === e.id ? /* @__PURE__ */ m(De, { className: "size-4 animate-spin" }) : /* @__PURE__ */ m(Ee, { className: "size-4" }), v("webhooks.test", "Test")]
+											})
 										}),
-										/* @__PURE__ */ m("button", {
-											type: "button",
-											onClick: () => gt(e),
-											className: `p-2 rounded-button transition-colors ${e.isActive ? "bg-status-success-bg-subtle text-status-success-text hover:bg-bg-sunken" : "bg-bg-sunken text-text-secondary hover:bg-action-secondary-bg-hover"}`,
-											title: e.isActive ? v("webhooks.disable", "Disable") : v("webhooks.enable", "Enable"),
-											children: e.isActive ? /* @__PURE__ */ m(xe, { className: "size-4" }) : /* @__PURE__ */ m(ke, { className: "size-4" })
+										/* @__PURE__ */ m(g, {
+											permission: s.WEBHOOK_UPDATE,
+											deniedBehavior: "hide",
+											children: /* @__PURE__ */ m("button", {
+												type: "button",
+												onClick: () => gt(e),
+												className: `p-2 rounded-button transition-colors ${e.isActive ? "bg-status-success-bg-subtle text-status-success-text hover:bg-bg-sunken" : "bg-bg-sunken text-text-secondary hover:bg-action-secondary-bg-hover"}`,
+												title: e.isActive ? v("webhooks.disable", "Disable") : v("webhooks.enable", "Enable"),
+												children: e.isActive ? /* @__PURE__ */ m(xe, { className: "size-4" }) : /* @__PURE__ */ m(ke, { className: "size-4" })
+											})
 										}),
-										/* @__PURE__ */ m("button", {
-											type: "button",
-											onClick: () => {
-												pe("medium"), vt(e);
-											},
-											className: "p-2 text-status-error-text hover:bg-status-error-bg rounded-md transition-colors",
-											title: v("common.delete", "Delete"),
-											children: /* @__PURE__ */ m(Oe, { className: "size-4" })
+										/* @__PURE__ */ m(g, {
+											permission: s.WEBHOOK_DELETE,
+											deniedBehavior: "hide",
+											children: /* @__PURE__ */ m("button", {
+												type: "button",
+												onClick: () => {
+													pe("medium"), vt(e);
+												},
+												className: "p-2 text-status-error-text hover:bg-status-error-bg rounded-md transition-colors",
+												title: v("common.delete", "Delete"),
+												children: /* @__PURE__ */ m(Oe, { className: "size-4" })
+											})
 										})
 									]
 								})]
@@ -560,9 +584,9 @@ function Be() {
 							className: "text-lg font-semibold text-text-primary mb-4",
 							children: v("webhooks.newWebhook", "New Webhook")
 						}),
-						Ze && /* @__PURE__ */ m("div", {
+						Xe && /* @__PURE__ */ m("div", {
 							className: "mb-4 p-3 bg-status-error-bg text-status-error-text rounded-md text-sm",
-							children: Ze
+							children: Xe
 						}),
 						/* @__PURE__ */ h("div", {
 							className: "space-y-4",
@@ -572,7 +596,7 @@ function Be() {
 									children: v("webhooks.name", "Name")
 								}), /* @__PURE__ */ m("input", {
 									"aria-label": "control",
-									ref: et,
+									ref: $e,
 									type: "text",
 									placeholder: v("webhooks.namePlaceholder", "Slack Notifications"),
 									className: "w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder"
@@ -582,7 +606,7 @@ function Be() {
 									children: v("webhooks.url", "URL")
 								}), /* @__PURE__ */ m("input", {
 									"aria-label": "control",
-									ref: tt,
+									ref: et,
 									type: "url",
 									placeholder: v("webhooks.urlPlaceholder", "https://hooks.slack.com/services/..."),
 									className: "w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder"
@@ -592,7 +616,7 @@ function Be() {
 									children: v("webhooks.secret", "Secret")
 								}), /* @__PURE__ */ m("input", {
 									"aria-label": "control",
-									ref: nt,
+									ref: tt,
 									type: "password",
 									placeholder: v("webhooks.secretPlaceholder", "Optional signing secret"),
 									className: "w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder"
@@ -609,7 +633,7 @@ function Be() {
 											children: [/* @__PURE__ */ m("input", {
 												"aria-label": "control",
 												type: "checkbox",
-												checked: A.includes(e),
+												checked: j.includes(e),
 												onChange: () => mt(e),
 												className: "size-4 rounded border-border-default"
 											}), /* @__PURE__ */ m("span", {
@@ -618,13 +642,13 @@ function Be() {
 											})]
 										}, e))
 									}),
-									A.filter(c).length > 0 && /* @__PURE__ */ m("div", {
+									j.filter(c).length > 0 && /* @__PURE__ */ m("div", {
 										className: "flex flex-wrap gap-1 mt-2",
-										children: A.filter(c).map((e) => /* @__PURE__ */ h("span", {
+										children: j.filter(c).map((e) => /* @__PURE__ */ h("span", {
 											className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-[var(--color-accent-soft)] text-text-primary border border-dashed border-border-strong rounded",
 											children: [e, /* @__PURE__ */ m("button", {
 												type: "button",
-												onClick: () => j((t) => t.filter((t) => t !== e)),
+												onClick: () => M((t) => t.filter((t) => t !== e)),
 												className: "hover:text-status-error-text",
 												children: /* @__PURE__ */ m(ke, { className: "size-3" })
 											})]
@@ -635,22 +659,22 @@ function Be() {
 										children: [/* @__PURE__ */ m("input", {
 											"aria-label": "control",
 											type: "text",
-											value: I,
-											onChange: (e) => L(e.target.value),
+											value: L,
+											onChange: (e) => R(e.target.value),
 											placeholder: v("webhooks.customEventPlaceholder", "custom:event-name"),
 											className: "flex-1 px-3 py-1.5 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder font-mono",
 											onKeyDown: (e) => {
 												if (e.key === "Enter") {
 													e.preventDefault();
-													let t = I.trim();
-													/^[a-z][a-z0-9_-]*:[a-z][a-z0-9_.-]*$/.test(t) && !A.includes(t) && (j((e) => [...e, t]), L(""));
+													let t = L.trim();
+													/^[a-z][a-z0-9_-]*:[a-z][a-z0-9_.-]*$/.test(t) && !j.includes(t) && (M((e) => [...e, t]), R(""));
 												}
 											}
 										}), /* @__PURE__ */ m("button", {
 											type: "button",
 											onClick: () => {
-												let e = I.trim();
-												/^[a-z][a-z0-9_-]*:[a-z][a-z0-9_.-]*$/.test(e) && !A.includes(e) && (j((t) => [...t, e]), L(""));
+												let e = L.trim();
+												/^[a-z][a-z0-9_-]*:[a-z][a-z0-9_.-]*$/.test(e) && !j.includes(e) && (M((t) => [...t, e]), R(""));
 											},
 											className: "px-3 py-1.5 text-sm bg-bg-sunken text-text-primary hover:bg-action-secondary-bg-hover rounded-md transition-colors",
 											children: /* @__PURE__ */ m(f, { className: "size-4" })
@@ -670,15 +694,15 @@ function Be() {
 										className: "relative",
 										children: [/* @__PURE__ */ m("input", {
 											"aria-label": "control",
-											ref: W,
-											type: P ? "text" : "password",
+											ref: nt,
+											type: F ? "text" : "password",
 											placeholder: v("webhooks.signingKeyPlaceholder", "HMAC signing key for delivery verification"),
 											className: "w-full px-3 py-2 pr-10 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder font-mono text-sm"
 										}), /* @__PURE__ */ m("button", {
 											type: "button",
-											onClick: () => F(!P),
+											onClick: () => I(!F),
 											className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-bg-elevated transition-colors",
-											children: m(P ? Ce : Se, { className: "size-4 text-text-secondary" })
+											children: m(F ? Ce : Se, { className: "size-4 text-text-secondary" })
 										})]
 									}),
 									/* @__PURE__ */ m("p", {
@@ -703,8 +727,8 @@ function Be() {
 												/* @__PURE__ */ m("input", {
 													"aria-label": "control",
 													type: "checkbox",
-													checked: M.includes(e.id),
-													onChange: () => N((t) => t.includes(e.id) ? t.filter((t) => t !== e.id) : [...t, e.id]),
+													checked: N.includes(e.id),
+													onChange: () => P((t) => t.includes(e.id) ? t.filter((t) => t !== e.id) : [...t, e.id]),
 													className: "size-4 rounded border-border-default"
 												}),
 												/* @__PURE__ */ m(be, { className: "size-3.5 text-text-secondary" }),
@@ -723,23 +747,23 @@ function Be() {
 							children: [/* @__PURE__ */ m("button", {
 								type: "button",
 								onClick: () => C(!1),
-								disabled: E,
+								disabled: D,
 								className: "px-4 py-2 text-text-primary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50",
 								children: v("common.cancel", "Cancel")
 							}), /* @__PURE__ */ m("button", {
 								type: "button",
 								onClick: ht,
-								disabled: E,
+								disabled: D,
 								className: "px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50",
-								children: E ? v("webhooks.creating", "Creating...") : v("webhooks.createWebhook", "Create Webhook")
+								children: D ? v("webhooks.creating", "Creating...") : v("webhooks.createWebhook", "Create Webhook")
 							})]
 						})
 					]
 				})
 			}),
 			/* @__PURE__ */ m(a, {
-				isOpen: B === "enable",
-				onClose: () => V(null),
+				isOpen: V === "enable",
+				onClose: () => H(null),
 				onConfirm: () => xt(!0),
 				title: "Enable selected webhooks",
 				message: `Enable ${Z.length} selected webhook${Z.length === 1 ? "" : "s"}?`,
@@ -747,8 +771,8 @@ function Be() {
 				variant: "default"
 			}),
 			/* @__PURE__ */ m(a, {
-				isOpen: B === "disable",
-				onClose: () => V(null),
+				isOpen: V === "disable",
+				onClose: () => H(null),
 				onConfirm: () => xt(!1),
 				title: "Disable selected webhooks",
 				message: `Disable ${X.length} selected webhook${X.length === 1 ? "" : "s"}?`,
@@ -756,8 +780,8 @@ function Be() {
 				variant: "warning"
 			}),
 			/* @__PURE__ */ m(a, {
-				isOpen: B === "delete",
-				onClose: () => V(null),
+				isOpen: V === "delete",
+				onClose: () => H(null),
 				onConfirm: St,
 				title: "Delete selected webhooks",
 				message: `Delete ${Y.length} selected webhook${Y.length === 1 ? "" : "s"}? This cannot be undone.`,
@@ -765,18 +789,18 @@ function Be() {
 				variant: "danger"
 			}),
 			/* @__PURE__ */ m(ee, {
-				isOpen: H !== null,
-				onClose: () => U(null),
+				isOpen: U !== null,
+				onClose: () => W(null),
 				onConfirm: () => {
-					U(null), Be("/billing/plans");
+					W(null), ze("/billing/plans");
 				},
-				title: H?.title || "Quota Reached",
-				message: H?.message || "Upgrade your plan to continue."
+				title: U?.title || "Quota Reached",
+				message: U?.message || "Upgrade your plan to continue."
 			})
 		]
 	});
 }
 //#endregion
-export { Be as WebhooksPage };
+export { ze as WebhooksPage };
 
 //# sourceMappingURL=WebhooksPage.js.map