@burdenoff/microfe-vibecontrols 2026.625.3 → 2026.626.2

package/dist/pages/WebhooksPage.js

@@ -11,23 +11,23 @@ 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 fe } from "../components/shared/SelectionCheckbox.js";
+import { SelectionCheckbox as o } from "../components/shared/SelectionCheckbox.js";
 import "../components/shared/index.js";
-import { isNative as pe, nativeImpact as me, nativeNotify as he } from "../utils/nativeBridge.js";
-import { VIBE_PERMISSIONS as o } from "../constants/permissions.js";
-import { PageSkeleton as ge } from "../components/shared/PageSkeleton.js";
-import { WEBHOOK_EVENTS as _e, isCustomEvent as s } from "../components/webhooks/types.js";
-import { useEffect as ve, useMemo as c, useRef as l, useState as u } from "react";
-import { useI18n as ye } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertTriangle as be, Bot as xe, Check as Se, Eye as Ce, EyeOff as we, Grid as Te, List as Ee, Play as De, Plus as d, RefreshCw as Oe, Trash2 as ke, Webhook as Ae, X as je } from "lucide-react";
-import { usePermissions as Me } from "@burdenoff/fe-libs/shared/providers/shell";
-import { AnimatePresence as Ne } from "framer-motion";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { Button as Pe, CTAOverflowMenu as Fe } from "@burdenoff/fe-libs/ui";
-import { AccessDenied as Ie, PermissionButton as Le } from "@burdenoff/fe-libs/shared/components";
-import { MotionItem as Re, MotionList as ze, MotionPage as m } from "@burdenoff/fe-libs/shared/motion";
+import { isNative as fe, 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";
+import { useEffect as _e, useMemo as l, useRef as u, useState as d } from "react";
+import { useI18n as ve } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertTriangle as ye, Bot as be, Check as xe, Eye as Se, EyeOff as Ce, Grid as we, List as Te, Play as Ee, Plus as f, RefreshCw as De, Trash2 as Oe, Webhook as p, X as ke } from "lucide-react";
+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";
 //#region src/pages/WebhooksPage.tsx
-var Be = [
+var ze = [
 	{
 		value: "all",
 		label: "All Statuses"
@@ -45,34 +45,34 @@ var Be = [
 		label: "Has Errors"
 	}
 ];
-function h() {
+function Be() {
 	ne();
-	let h = re(), { t: Ve } = ye(), { hasPermission: g, isLoading: _, permissions: v } = Me(), y = (e, t) => {
+	let Be = re(), { t: Ve } = ve(), { hasPermission: _, isLoading: He, permissions: Ue } = Ae(), v = (e, t) => {
 		let n = Ve(e);
 		return n === e ? t : n;
-	}, b = g(o.WEBHOOK_LIST), He = g(o.WEBHOOK_CREATE), Ue = _ || !b, [x, We] = u(""), [S, C] = u("all"), [w, Ge] = u("list"), [T, E] = u(!1), [Ke, qe] = u(null), [Je, D] = u(null), [O, k] = u(!1), [A, j] = u(null), [Ye, M] = u(null), [N, P] = u([]), [F, Xe] = u([]), [I, Ze] = u(!1), [L, R] = u(""), [z, B] = u(/* @__PURE__ */ new Set()), [V, H] = u(null), [U, W] = u(null);
-	ve(() => {
-		if (!A) return;
-		let e = window.setTimeout(() => j(null), 4e3);
+	}, 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);
+	_e(() => {
+		if (!D) return;
+		let e = window.setTimeout(() => O(null), 4e3);
 		return () => window.clearTimeout(e);
-	}, [A]), ve(() => {
-		if (!T) return;
+	}, [D]), _e(() => {
+		if (!S) return;
 		let e = (e) => {
-			e.key === "Escape" && !O && E(!1);
+			e.key === "Escape" && !E && C(!1);
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [O, T]);
-	let Qe = l(null), $e = l(null), et = l(null), tt = l(null), [nt] = e({ refetchQueries: ["ListWebhooks"] }), [rt] = i({ refetchQueries: ["ListWebhooks"] }), [it] = r({ refetchQueries: ["ListWebhooks"] }), [at] = t({ refetchQueries: ["ListWebhooks"] }), { agents: ot } = ie(), st = c(() => ot.map((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) => ({
 		id: e.id,
 		name: e.name
-	})), [ot]), { data: ct, loading: G, error: lt, refetch: K } = n({
+	})), [st]), { data: lt, loading: G, error: ut, refetch: K } = n({
 		variables: {
-			filter: { isActive: S === "active" ? !0 : S === "inactive" ? !1 : void 0 },
+			filter: { isActive: b === "active" ? !0 : b === "inactive" ? !1 : void 0 },
 			pagination: { limit: 50 }
 		},
 		fetchPolicy: "cache-and-network",
-		skip: Ue
-	}), q = c(() => (ct?.webhooks?.items ?? []).map((e) => ({
+		skip: Ke
+	}), q = l(() => (lt?.webhooks?.items ?? []).map((e) => ({
 		id: e.id,
 		workspaceId: e.workspaceId,
 		name: e.name,
@@ -89,302 +89,306 @@ function h() {
 		metadata: {},
 		createdAt: e.createdAt,
 		updatedAt: e.updatedAt
-	})), [ct?.webhooks?.items]), J = c(() => q.filter((e) => {
-		if (x) {
-			let t = x.toLowerCase();
+	})), [lt?.webhooks?.items]), J = l(() => q.filter((e) => {
+		if (y) {
+			let t = y.toLowerCase();
 			if (!(e.name.toLowerCase().includes(t) || e.url.toLowerCase().includes(t) || e.events.some((e) => e.toLowerCase().includes(t)))) return !1;
 		}
-		return !(S === "error" && !e.lastError);
+		return !(b === "error" && !e.lastError);
 	}), [
 		q,
-		x,
-		S
-	]), Y = c(() => q.filter((e) => z.has(e.id)), [q, z]), X = Y.filter((e) => e.isActive), Z = Y.filter((e) => !e.isActive), ut = J.length > 0 && J.every((e) => z.has(e.id)), dt = J.some((e) => z.has(e.id)) && !ut, ft = () => {
-		D(null), M(null), P([]), Xe([]), Ze(!1), R(""), E(!0);
-	}, pt = (e) => {
-		P((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
-	}, mt = async () => {
-		let e = Qe.current?.value?.trim(), t = $e.current?.value?.trim(), n = et.current?.value?.trim() || void 0, r = tt.current?.value?.trim() || void 0;
+		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);
+	}, mt = (e) => {
+		j((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;
 		if (!e) {
-			D(y("webhooks.nameRequired", "Name is required"));
+			T(v("webhooks.nameRequired", "Name is required"));
 			return;
 		}
 		if (!t) {
-			D(y("webhooks.urlRequired", "URL is required"));
+			T(v("webhooks.urlRequired", "URL is required"));
 			return;
 		}
 		try {
 			let e = new URL(t);
 			if (!["http:", "https:"].includes(e.protocol)) {
-				D(y("webhooks.urlProtocolRequired", "URL must use http:// or https:// protocol"));
+				T(v("webhooks.urlProtocolRequired", "URL must use http:// or https:// protocol"));
 				return;
 			}
 		} catch {
-			D(y("webhooks.urlInvalid", "Please enter a valid URL (e.g., https://example.com/webhook)"));
+			T(v("webhooks.urlInvalid", "Please enter a valid URL (e.g., https://example.com/webhook)"));
 			return;
 		}
-		if (N.length === 0) {
-			D(y("webhooks.eventRequired", "At least one event must be selected"));
+		if (A.length === 0) {
+			T(v("webhooks.eventRequired", "At least one event must be selected"));
 			return;
 		}
-		k(!0), D(null), M(null);
+		Qe(!0), T(null), k(null);
 		try {
-			await nt({ variables: { input: {
+			await rt({ variables: { input: {
 				name: e,
 				url: t,
-				events: N,
+				events: A,
 				secret: n,
 				...r ? { signingKey: r } : {},
-				...F.length > 0 ? { agentIds: F } : {}
-			} } }), E(!1), j(y("webhooks.createdSuccess", "Webhook created successfully")), setTimeout(() => j(null), 3e3);
+				...M.length > 0 ? { agentIds: M } : {}
+			} } }), C(!1), O(v("webhooks.createdSuccess", "Webhook created successfully")), setTimeout(() => O(null), 3e3);
 		} catch (e) {
 			if (te(e)) {
-				E(!1), W({
+				C(!1), U({
 					title: "Webhook Quota Reached",
 					message: "You have reached the webhook limit for your current plan. Upgrade to create more webhooks."
 				});
 				return;
 			}
-			D(e instanceof Error ? e.message : y("webhooks.failedCreate", "Failed to create webhook"));
+			T(e instanceof Error ? e.message : v("webhooks.failedCreate", "Failed to create webhook"));
 		} finally {
-			k(!1);
+			Qe(!1);
 		}
-	}, ht = async (e) => {
+	}, gt = async (e) => {
 		try {
-			M(null), await rt({ variables: {
+			k(null), await it({ variables: {
 				id: e.id,
 				input: { isActive: !e.isActive }
-			} }), j(e.isActive ? y("webhooks.disabledSuccess", "Webhook disabled successfully") : y("webhooks.enabledSuccess", "Webhook enabled successfully"));
+			} }), O(e.isActive ? v("webhooks.disabledSuccess", "Webhook disabled successfully") : v("webhooks.enabledSuccess", "Webhook enabled successfully"));
 		} catch (e) {
-			console.error("Failed to toggle webhook:", e), M(e instanceof Error ? e.message : y("webhooks.failedToggle", "Failed to update webhook state"));
+			console.error("Failed to toggle webhook:", e), k(e instanceof Error ? e.message : v("webhooks.failedToggle", "Failed to update webhook state"));
 		}
-	}, gt = async (e) => {
-		qe(e.id);
+	}, _t = async (e) => {
+		Xe(e.id);
 		try {
-			M(null), await it({ variables: { id: e.id } }), j(y("webhooks.testSuccess", "Webhook test delivery completed"));
+			k(null), await at({ variables: { id: e.id } }), O(v("webhooks.testSuccess", "Webhook test delivery completed"));
 		} catch (e) {
 			if (te(e)) {
-				W({
+				U({
 					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), M(e instanceof Error ? e.message : y("webhooks.failedTest", "Failed to test webhook"));
+			console.error("Failed to test webhook:", e), k(e instanceof Error ? e.message : v("webhooks.failedTest", "Failed to test webhook"));
 		} finally {
-			qe(null);
+			Xe(null);
 		}
-	}, _t = async (e) => {
+	}, vt = async (e) => {
 		try {
-			M(null), await at({ variables: { id: e.id } }), j(y("webhooks.deletedSuccess", "Webhook deleted successfully")), pe() && he("success");
+			k(null), await ot({ variables: { id: e.id } }), O(v("webhooks.deletedSuccess", "Webhook deleted successfully")), fe() && me("success");
 		} catch (e) {
-			console.error("Failed to delete webhook:", e), M(e instanceof Error ? e.message : y("webhooks.failedDelete", "Failed to delete webhook")), pe() && he("error");
+			console.error("Failed to delete webhook:", e), k(e instanceof Error ? e.message : v("webhooks.failedDelete", "Failed to delete webhook")), fe() && me("error");
 		}
-	}, vt = (e, t) => {
-		B((n) => {
+	}, yt = (e, t) => {
+		z((n) => {
 			let r = new Set(n);
 			return t ? r.add(e) : r.delete(e), r;
 		});
-	}, yt = (e) => {
-		B((t) => {
+	}, bt = (e) => {
+		z((t) => {
 			let n = new Set(t);
 			return J.forEach((t) => {
 				e ? n.add(t.id) : n.delete(t.id);
 			}), n;
 		});
-	}, Q = () => B(/* @__PURE__ */ new Set()), bt = async (e) => {
+	}, Q = () => z(/* @__PURE__ */ new Set()), xt = async (e) => {
 		let t = e ? Z : X;
 		if (t.length === 0) return;
-		let n = await Promise.allSettled(t.map((t) => rt({ variables: {
+		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;
-		j(`${e ? "Enabled" : "Disabled"} ${r} webhook${r === 1 ? "" : "s"}${i > 0 ? ` • ${i} failed` : ""}`), setTimeout(() => j(null), 4e3), H(null), Q(), await K();
-	}, xt = async () => {
+		O(`${e ? "Enabled" : "Disabled"} ${r} webhook${r === 1 ? "" : "s"}${i > 0 ? ` • ${i} failed` : ""}`), setTimeout(() => O(null), 4e3), V(null), Q(), await K();
+	}, St = async () => {
 		if (Y.length === 0) return;
-		let e = await Promise.allSettled(Y.map((e) => at({ variables: { id: e.id } }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.length - t;
-		j(`Deleted ${t} webhook${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`), setTimeout(() => j(null), 4e3), H(null), Q(), await K();
+		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();
 	}, $ = {
 		total: q.length,
 		active: q.filter((e) => e.isActive).length,
 		withErrors: q.filter((e) => e.lastError).length
-	}, St = (e) => {
-		if (!e) return y("webhooks.never", "Never");
+	}, Ct = (e) => {
+		if (!e) return v("webhooks.never", "Never");
 		let t = Date.now() - new Date(e).getTime();
-		return t < 6e4 ? y("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 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 _ ? /* @__PURE__ */ f(m, {
+	return He ? /* @__PURE__ */ m(g, {
 		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen",
-		children: /* @__PURE__ */ f(ge, {
+		children: /* @__PURE__ */ m(he, {
 			variant: "rows",
 			count: 6
 		})
-	}) : v && v.permissionStrings?.length > 0 && !b ? /* @__PURE__ */ f(m, {
+	}) : Ue && Ue.permissionStrings?.length > 0 && !We ? /* @__PURE__ */ m(g, {
 		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen",
-		children: /* @__PURE__ */ f(Ie, {
-			title: y("common.accessDeniedTitle", "Access Denied"),
-			description: y("webhooks.accessDeniedDescription", "You don't have permission to view webhooks."),
+		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"
 		})
-	}) : lt && q.length === 0 ? /* @__PURE__ */ f(m, {
+	}) : ut && q.length === 0 ? /* @__PURE__ */ m(g, {
 		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen",
-		children: /* @__PURE__ */ f(oe, {
-			title: y("webhooks.failedLoad", "Failed to load webhooks"),
-			message: lt.message,
+		children: /* @__PURE__ */ m(oe, {
+			title: v("webhooks.failedLoad", "Failed to load webhooks"),
+			message: ut.message,
 			onRetry: () => K()
 		})
-	}) : /* @__PURE__ */ p(m, {
+	}) : /* @__PURE__ */ h(g, {
 		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen",
 		children: [
-			A && /* @__PURE__ */ f("div", {
+			D && /* @__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: A
+				children: D
 			}),
-			Ye && /* @__PURE__ */ f("div", {
+			$e && /* @__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: Ye
+				children: $e
 			}),
-			/* @__PURE__ */ f(ae, {
-				title: y("nav.webhooks", "Webhooks"),
+			/* @__PURE__ */ m(ae, {
+				title: v("nav.webhooks", "Webhooks"),
 				description: `${$.active} of ${$.total} webhooks active`,
-				actions: /* @__PURE__ */ p("div", {
+				actions: /* @__PURE__ */ h("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ f(Le, {
-						permission: o.WEBHOOK_CREATE,
-						children: /* @__PURE__ */ p(Pe, {
+					children: [/* @__PURE__ */ m(Ie, {
+						permission: s.WEBHOOK_CREATE,
+						children: /* @__PURE__ */ h(Me, {
 							type: "button",
-							onClick: ft,
+							onClick: pt,
 							className: "gap-2",
-							children: [/* @__PURE__ */ f(d, { className: "size-4" }), y("webhooks.newWebhook", "New Webhook")]
+							children: [/* @__PURE__ */ m(f, { className: "size-4" }), v("webhooks.newWebhook", "New Webhook")]
 						})
-					}), /* @__PURE__ */ f(Fe, { actions: [{
-						label: y("webhooks.refreshTitle", "Refresh webhooks"),
+					}), /* @__PURE__ */ m(Ne, { actions: [{
+						label: v("webhooks.refreshTitle", "Refresh webhooks"),
 						onSelect: () => void K(),
 						disabled: G,
-						icon: /* @__PURE__ */ f(Oe, { className: `size-4 ${G ? "animate-spin" : ""}` })
+						icon: /* @__PURE__ */ m(De, { className: `size-4 ${G ? "animate-spin" : ""}` })
 					}] })]
 				})
 			}),
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ m(Pe, {
+				icon: /* @__PURE__ */ m(p, { className: "size-4" }),
+				children: v("webhooks.purpose", "Webhooks let outside systems notify VibeControls when something happens — a push to your repo, a CI build, an alert from another tool — and have it kick off work automatically. Add a webhook to wire an external event to an action or session, so your agents react to the rest of your stack without anyone clicking a button.")
+			}),
+			/* @__PURE__ */ h("div", {
 				className: "space-y-3",
-				children: [/* @__PURE__ */ p("div", {
+				children: [/* @__PURE__ */ h("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ f(ce, {
-						value: x,
-						onChange: We,
-						placeholder: y("webhooks.searchPlaceholder", "Search webhooks..."),
+					children: [/* @__PURE__ */ m(ce, {
+						value: y,
+						onChange: qe,
+						placeholder: v("webhooks.searchPlaceholder", "Search webhooks..."),
 						className: "flex-1 sm:w-64 sm:flex-none"
-					}), /* @__PURE__ */ p("div", {
+					}), /* @__PURE__ */ h("div", {
 						className: "flex items-center gap-1 bg-bg-sunken rounded-md p-1 flex-shrink-0",
-						children: [/* @__PURE__ */ f("button", {
+						children: [/* @__PURE__ */ m("button", {
 							type: "button",
-							onClick: () => Ge("grid"),
-							className: `p-1.5 sm:p-2 rounded ${w === "grid" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
-							title: y("webhooks.gridViewTitle", "Grid view"),
-							children: /* @__PURE__ */ f(Te, { className: "size-4 text-text-secondary" })
-						}), /* @__PURE__ */ f("button", {
+							onClick: () => Ye("grid"),
+							className: `p-1.5 sm:p-2 rounded ${x === "grid" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+							title: v("webhooks.gridViewTitle", "Grid view"),
+							children: /* @__PURE__ */ m(we, { className: "size-4 text-text-secondary" })
+						}), /* @__PURE__ */ m("button", {
 							type: "button",
-							onClick: () => Ge("list"),
-							className: `p-1.5 sm:p-2 rounded ${w === "list" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
-							title: y("webhooks.listViewTitle", "List view"),
-							children: /* @__PURE__ */ f(Ee, { className: "size-4 text-text-secondary" })
+							onClick: () => Ye("list"),
+							className: `p-1.5 sm:p-2 rounded ${x === "list" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+							title: v("webhooks.listViewTitle", "List view"),
+							children: /* @__PURE__ */ m(Te, { className: "size-4 text-text-secondary" })
 						})]
 					})]
-				}), /* @__PURE__ */ f("div", {
+				}), /* @__PURE__ */ m("div", {
 					className: "flex items-center gap-2 sm:gap-3",
-					children: /* @__PURE__ */ f(le, {
-						label: y("webhooks.status", "Status"),
-						value: S,
-						options: Be,
-						onChange: C
+					children: /* @__PURE__ */ m(le, {
+						label: v("webhooks.status", "Status"),
+						value: b,
+						options: ze,
+						onChange: Je
 					})
 				})]
 			}),
-			$.withErrors > 0 && /* @__PURE__ */ f("div", {
+			$.withErrors > 0 && /* @__PURE__ */ m("div", {
 				className: "flex items-center gap-2",
-				children: /* @__PURE__ */ p("button", {
+				children: /* @__PURE__ */ h("button", {
 					type: "button",
-					onClick: () => C("error"),
-					className: `flex items-center gap-2 px-3 py-1.5 text-sm rounded-full transition-colors ${S === "error" ? "bg-status-error-bg text-status-error-text" : "bg-bg-sunken text-text-secondary hover:bg-action-secondary-bg-hover"}`,
+					onClick: () => Je("error"),
+					className: `flex items-center gap-2 px-3 py-1.5 text-sm rounded-full transition-colors ${b === "error" ? "bg-status-error-bg text-status-error-text" : "bg-bg-sunken text-text-secondary hover:bg-action-secondary-bg-hover"}`,
 					children: [
-						/* @__PURE__ */ f(be, { className: "size-3" }),
-						y("webhooks.withErrors", "With Errors"),
+						/* @__PURE__ */ m(ye, { className: "size-3" }),
+						v("webhooks.withErrors", "With Errors"),
 						" (",
 						$.withErrors,
 						")"
 					]
 				})
 			}),
-			(x || S !== "all") && /* @__PURE__ */ p("p", {
+			(y || b !== "all") && /* @__PURE__ */ h("p", {
 				className: "text-sm text-text-secondary",
 				children: [
-					y("webhooks.showingResults", "Showing"),
+					v("webhooks.showingResults", "Showing"),
 					" ",
 					J.length,
 					" ",
-					y("webhooks.of", "of"),
+					v("webhooks.of", "of"),
 					" ",
 					q.length,
 					" ",
-					y("nav.webhooks", "webhooks"),
-					G && /* @__PURE__ */ p("span", {
+					v("nav.webhooks", "webhooks"),
+					G && /* @__PURE__ */ h("span", {
 						className: "ml-2 text-text-muted",
 						children: [
 							"(",
-							y("webhooks.refreshing", "refreshing..."),
+							v("webhooks.refreshing", "refreshing..."),
 							")"
 						]
 					})
 				]
 			}),
-			J.length > 0 && /* @__PURE__ */ f("div", {
+			J.length > 0 && /* @__PURE__ */ m("div", {
 				className: "rounded-lg border border-border-default bg-bg-surface p-4",
-				children: /* @__PURE__ */ p("div", {
+				children: /* @__PURE__ */ h("div", {
 					className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between",
-					children: [/* @__PURE__ */ p("div", {
+					children: [/* @__PURE__ */ h("div", {
 						className: "flex flex-wrap items-center gap-3",
-						children: [/* @__PURE__ */ p("div", {
+						children: [/* @__PURE__ */ h("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ f(fe, {
-								checked: ut,
-								indeterminate: dt,
-								onChange: yt,
+							children: [/* @__PURE__ */ m(o, {
+								checked: dt,
+								indeterminate: ft,
+								onChange: bt,
 								ariaLabel: "Select all visible webhooks"
-							}), /* @__PURE__ */ f("span", {
+							}), /* @__PURE__ */ m("span", {
 								className: "text-sm font-medium text-text-primary",
 								children: "Select all visible"
 							})]
-						}), z.size > 0 && /* @__PURE__ */ f("button", {
+						}), R.size > 0 && /* @__PURE__ */ m("button", {
 							type: "button",
 							onClick: Q,
 							className: "text-sm text-text-secondary hover:text-text-primary",
 							children: "Clear selection"
 						})]
-					}), /* @__PURE__ */ p("div", {
+					}), /* @__PURE__ */ h("div", {
 						className: "flex flex-wrap items-center gap-2",
 						children: [
-							/* @__PURE__ */ p("span", {
+							/* @__PURE__ */ h("span", {
 								className: "rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary",
-								children: [z.size, " selected"]
+								children: [R.size, " selected"]
 							}),
-							/* @__PURE__ */ p("button", {
+							/* @__PURE__ */ h("button", {
 								type: "button",
-								onClick: () => H("enable"),
+								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__ */ p("button", {
+							/* @__PURE__ */ h("button", {
 								type: "button",
-								onClick: () => H("disable"),
+								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__ */ p("button", {
+							/* @__PURE__ */ h("button", {
 								type: "button",
-								onClick: () => H("delete"),
+								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})` : ""]
@@ -393,317 +397,318 @@ function h() {
 					})]
 				})
 			}),
-			/* @__PURE__ */ f(Ne, {
+			/* @__PURE__ */ m(je, {
 				mode: "wait",
-				children: G && q.length === 0 ? /* @__PURE__ */ f(ge, {
+				children: G && q.length === 0 ? /* @__PURE__ */ m(he, {
 					variant: "rows",
 					count: 6
-				}) : J.length > 0 ? /* @__PURE__ */ f(ze, {
-					className: w === "grid" ? "grid grid-cols-1 gap-4 xl:grid-cols-2" : "space-y-4",
-					children: J.map((e) => /* @__PURE__ */ f(Re, {
+				}) : J.length > 0 ? /* @__PURE__ */ m(Re, {
+					className: x === "grid" ? "grid grid-cols-1 gap-4 xl:grid-cols-2" : "space-y-4",
+					children: J.map((e) => /* @__PURE__ */ m(Le, {
 						variant: "fadeRight",
-						children: /* @__PURE__ */ f(ue, {
+						children: /* @__PURE__ */ m(ue, {
 							className: "p-4",
-							children: /* @__PURE__ */ p("div", {
+							children: /* @__PURE__ */ h("div", {
 								className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4",
-								children: [/* @__PURE__ */ p("div", {
+								children: [/* @__PURE__ */ h("div", {
 									className: "flex items-start gap-4 flex-1 min-w-0",
 									children: [
-										/* @__PURE__ */ f("div", {
+										/* @__PURE__ */ m("div", {
 											onClick: (e) => e.stopPropagation(),
-											children: /* @__PURE__ */ f(fe, {
-												checked: z.has(e.id),
-												onChange: (t) => vt(e.id, t),
+											children: /* @__PURE__ */ m(o, {
+												checked: R.has(e.id),
+												onChange: (t) => yt(e.id, t),
 												ariaLabel: `Select webhook ${e.name}`,
 												className: "mt-2"
 											})
 										}),
-										/* @__PURE__ */ f("div", {
+										/* @__PURE__ */ m("div", {
 											className: `size-10 rounded-lg flex items-center justify-center flex-shrink-0 ${e.isActive ? "bg-status-success-bg text-status-success-text" : "bg-bg-sunken text-text-secondary"}`,
-											children: /* @__PURE__ */ f(Ae, { className: "size-5" })
+											children: /* @__PURE__ */ m(p, { className: "size-5" })
 										}),
-										/* @__PURE__ */ p("div", {
+										/* @__PURE__ */ h("div", {
 											className: "flex-1 min-w-0",
 											children: [
-												/* @__PURE__ */ p("div", {
+												/* @__PURE__ */ h("div", {
 													className: "flex items-center gap-2 flex-wrap",
 													children: [
-														/* @__PURE__ */ f("h3", {
+														/* @__PURE__ */ m("h3", {
 															className: "font-semibold text-text-primary",
 															children: e.name
 														}),
-														/* @__PURE__ */ f("span", {
+														/* @__PURE__ */ m("span", {
 															className: `px-2 py-0.5 text-xs rounded-full ${e.isActive ? "bg-status-success-bg text-status-success-text" : "bg-bg-sunken text-text-secondary"}`,
-															children: e.isActive ? y("webhooks.active", "Active") : y("webhooks.inactive", "Inactive")
+															children: e.isActive ? v("webhooks.active", "Active") : v("webhooks.inactive", "Inactive")
 														}),
-														e.lastError && /* @__PURE__ */ f("span", {
+														e.lastError && /* @__PURE__ */ m("span", {
 															className: "px-2 py-0.5 text-xs rounded-full bg-status-error-bg text-status-error-text",
-															children: y("webhooks.error", "Error")
+															children: v("webhooks.error", "Error")
 														})
 													]
 												}),
-												/* @__PURE__ */ f("p", {
+												/* @__PURE__ */ m("p", {
 													className: "text-sm text-text-secondary mt-1 font-mono truncate",
 													children: e.url
 												}),
-												/* @__PURE__ */ f("div", {
+												/* @__PURE__ */ m("div", {
 													className: "flex flex-wrap gap-1 mt-2",
-													children: e.events.map((e) => /* @__PURE__ */ f("span", {
-														className: `px-2 py-0.5 text-xs rounded ${s(e) ? "bg-[var(--color-accent-soft)] text-text-primary border border-dashed border-border-strong" : "bg-bg-sunken text-text-secondary"}`,
+													children: e.events.map((e) => /* @__PURE__ */ m("span", {
+														className: `px-2 py-0.5 text-xs rounded ${c(e) ? "bg-[var(--color-accent-soft)] text-text-primary border border-dashed border-border-strong" : "bg-bg-sunken text-text-secondary"}`,
 														children: e
 													}, e))
 												}),
-												e.agentIds.length > 0 && /* @__PURE__ */ p("div", {
+												e.agentIds.length > 0 && /* @__PURE__ */ h("div", {
 													className: "flex items-center gap-1 mt-2",
-													children: [/* @__PURE__ */ f(xe, { className: "size-3 text-text-muted" }), /* @__PURE__ */ p("span", {
+													children: [/* @__PURE__ */ m(be, { className: "size-3 text-text-muted" }), /* @__PURE__ */ h("span", {
 														className: "text-xs text-text-muted",
 														children: [
-															y("webhooks.scopedTo", "Scoped to"),
+															v("webhooks.scopedTo", "Scoped to"),
 															" ",
 															e.agentIds.length,
 															" ",
-															y("webhooks.agent", "agent"),
+															v("webhooks.agent", "agent"),
 															e.agentIds.length === 1 ? "" : "s"
 														]
 													})]
 												}),
-												e.lastError && /* @__PURE__ */ p("p", {
+												e.lastError && /* @__PURE__ */ h("p", {
 													className: "text-sm text-status-error-text mt-2",
 													children: [
-														y("webhooks.lastError", "Last error"),
+														v("webhooks.lastError", "Last error"),
 														": ",
 														e.lastError
 													]
 												}),
-												/* @__PURE__ */ p("div", {
+												/* @__PURE__ */ h("div", {
 													className: "flex items-center gap-4 mt-3 text-xs text-text-secondary flex-wrap",
-													children: [/* @__PURE__ */ p("span", { children: [
-														y("webhooks.lastDelivery", "Last delivery"),
+													children: [/* @__PURE__ */ h("span", { children: [
+														v("webhooks.lastDelivery", "Last delivery"),
 														":",
 														" ",
-														St(e.lastDelivery)
-													] }), /* @__PURE__ */ p("span", { children: [
+														Ct(e.lastDelivery)
+													] }), /* @__PURE__ */ h("span", { children: [
 														e.deliveryCount,
 														" ",
-														y("webhooks.deliveries", "deliveries"),
+														v("webhooks.deliveries", "deliveries"),
 														",",
 														" ",
 														e.failureCount,
 														" ",
-														y("webhooks.failures", "failures")
+														v("webhooks.failures", "failures")
 													] })]
 												})
 											]
 										})
 									]
-								}), /* @__PURE__ */ p("div", {
+								}), /* @__PURE__ */ h("div", {
 									className: "flex items-center gap-2 flex-shrink-0",
 									children: [
-										/* @__PURE__ */ p("button", {
+										/* @__PURE__ */ h("button", {
 											type: "button",
-											onClick: () => gt(e),
-											disabled: Ke === e.id,
+											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: [Ke === e.id ? /* @__PURE__ */ f(Oe, { className: "size-4 animate-spin" }) : /* @__PURE__ */ f(De, { className: "size-4" }), y("webhooks.test", "Test")]
+											children: [w === e.id ? /* @__PURE__ */ m(De, { className: "size-4 animate-spin" }) : /* @__PURE__ */ m(Ee, { className: "size-4" }), v("webhooks.test", "Test")]
 										}),
-										/* @__PURE__ */ f("button", {
+										/* @__PURE__ */ m("button", {
 											type: "button",
-											onClick: () => ht(e),
+											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 ? y("webhooks.disable", "Disable") : y("webhooks.enable", "Enable"),
-											children: e.isActive ? /* @__PURE__ */ f(Se, { className: "size-4" }) : /* @__PURE__ */ f(je, { className: "size-4" })
+											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__ */ f("button", {
+										/* @__PURE__ */ m("button", {
 											type: "button",
 											onClick: () => {
-												me("medium"), _t(e);
+												pe("medium"), vt(e);
 											},
 											className: "p-2 text-status-error-text hover:bg-status-error-bg rounded-md transition-colors",
-											title: y("common.delete", "Delete"),
-											children: /* @__PURE__ */ f(ke, { className: "size-4" })
+											title: v("common.delete", "Delete"),
+											children: /* @__PURE__ */ m(Oe, { className: "size-4" })
 										})
 									]
 								})]
 							})
 						})
 					}, e.id))
-				}, `webhook-list-${w}`) : /* @__PURE__ */ f(se, {
-					icon: /* @__PURE__ */ f(Ae, { className: "size-8 text-text-secondary" }),
-					title: x || S !== "all" ? y("webhooks.emptyFound", "No webhooks found") : y("webhooks.emptyConfigured", "No webhooks configured"),
-					description: x || S !== "all" ? y("webhooks.emptyAdjustSearch", "Try adjusting your search or filters") : y("webhooks.emptyDescription", "Create a webhook to receive notifications about events in your workspace"),
-					action: !x && S === "all" ? /* @__PURE__ */ p("div", {
+				}, `webhook-list-${x}`) : /* @__PURE__ */ m(se, {
+					icon: /* @__PURE__ */ m(p, { className: "size-8 text-text-secondary" }),
+					illustration: y || b !== "all" ? "empty-search" : "empty-data",
+					title: y || b !== "all" ? v("webhooks.emptyFound", "No webhooks found") : v("webhooks.emptyConfigured", "No webhooks configured"),
+					description: y || b !== "all" ? v("webhooks.emptyAdjustSearch", "Try adjusting your search or filters") : v("webhooks.emptyDescription", "Create a webhook to receive notifications about events in your workspace"),
+					action: !y && b === "all" ? /* @__PURE__ */ h("div", {
 						className: "flex items-center gap-2",
-						children: [He && /* @__PURE__ */ p("button", {
+						children: [Ge && /* @__PURE__ */ h("button", {
 							type: "button",
-							onClick: ft,
+							onClick: pt,
 							className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
-							children: [/* @__PURE__ */ f(d, { className: "size-4" }), y("webhooks.newWebhook", "New Webhook")]
-						}), /* @__PURE__ */ f(de, { prompt: "What is a Webhook in VibeControls and how do I configure one?" })]
+							children: [/* @__PURE__ */ m(f, { className: "size-4" }), v("webhooks.newWebhook", "New Webhook")]
+						}), /* @__PURE__ */ m(de, { prompt: "What is a Webhook in VibeControls and how do I configure one?" })]
 					}) : void 0
 				})
 			}),
-			T && /* @__PURE__ */ f("div", {
+			S && /* @__PURE__ */ m("div", {
 				className: "fixed inset-0 bg-bg-overlay flex items-center justify-center z-50 p-4",
-				children: /* @__PURE__ */ p("div", {
+				children: /* @__PURE__ */ h("div", {
 					role: "dialog",
 					"aria-modal": "true",
 					"aria-labelledby": "create-webhook-title",
 					className: "bg-bg-surface rounded-lg p-6 w-full max-w-lg max-h-[90vh] overflow-y-auto",
 					children: [
-						/* @__PURE__ */ f("h2", {
+						/* @__PURE__ */ m("h2", {
 							id: "create-webhook-title",
 							className: "text-lg font-semibold text-text-primary mb-4",
-							children: y("webhooks.newWebhook", "New Webhook")
+							children: v("webhooks.newWebhook", "New Webhook")
 						}),
-						Je && /* @__PURE__ */ f("div", {
+						Ze && /* @__PURE__ */ m("div", {
 							className: "mb-4 p-3 bg-status-error-bg text-status-error-text rounded-md text-sm",
-							children: Je
+							children: Ze
 						}),
-						/* @__PURE__ */ p("div", {
+						/* @__PURE__ */ h("div", {
 							className: "space-y-4",
 							children: [
-								/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
 									className: "block text-sm font-medium text-text-primary mb-1",
-									children: y("webhooks.name", "Name")
-								}), /* @__PURE__ */ f("input", {
+									children: v("webhooks.name", "Name")
+								}), /* @__PURE__ */ m("input", {
 									"aria-label": "control",
-									ref: Qe,
+									ref: et,
 									type: "text",
-									placeholder: y("webhooks.namePlaceholder", "Slack Notifications"),
+									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"
 								})] }),
-								/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
 									className: "block text-sm font-medium text-text-primary mb-1",
-									children: y("webhooks.url", "URL")
-								}), /* @__PURE__ */ f("input", {
+									children: v("webhooks.url", "URL")
+								}), /* @__PURE__ */ m("input", {
 									"aria-label": "control",
-									ref: $e,
+									ref: tt,
 									type: "url",
-									placeholder: y("webhooks.urlPlaceholder", "https://hooks.slack.com/services/..."),
+									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"
 								})] }),
-								/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
 									className: "block text-sm font-medium text-text-primary mb-1",
-									children: y("webhooks.secret", "Secret")
-								}), /* @__PURE__ */ f("input", {
+									children: v("webhooks.secret", "Secret")
+								}), /* @__PURE__ */ m("input", {
 									"aria-label": "control",
-									ref: et,
+									ref: nt,
 									type: "password",
-									placeholder: y("webhooks.secretPlaceholder", "Optional signing secret"),
+									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"
 								})] }),
-								/* @__PURE__ */ p("div", { children: [
-									/* @__PURE__ */ f("label", {
+								/* @__PURE__ */ h("div", { children: [
+									/* @__PURE__ */ m("label", {
 										className: "block text-sm font-medium text-text-primary mb-2",
-										children: y("webhooks.events", "Events")
+										children: v("webhooks.events", "Events")
 									}),
-									/* @__PURE__ */ f("div", {
+									/* @__PURE__ */ m("div", {
 										className: "space-y-2 max-h-40 overflow-y-auto",
-										children: _e.map((e) => /* @__PURE__ */ p("label", {
+										children: ge.map((e) => /* @__PURE__ */ h("label", {
 											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ f("input", {
+											children: [/* @__PURE__ */ m("input", {
 												"aria-label": "control",
 												type: "checkbox",
-												checked: N.includes(e),
-												onChange: () => pt(e),
+												checked: A.includes(e),
+												onChange: () => mt(e),
 												className: "size-4 rounded border-border-default"
-											}), /* @__PURE__ */ f("span", {
+											}), /* @__PURE__ */ m("span", {
 												className: "text-sm text-text-primary",
 												children: e
 											})]
 										}, e))
 									}),
-									N.filter(s).length > 0 && /* @__PURE__ */ f("div", {
+									A.filter(c).length > 0 && /* @__PURE__ */ m("div", {
 										className: "flex flex-wrap gap-1 mt-2",
-										children: N.filter(s).map((e) => /* @__PURE__ */ p("span", {
+										children: A.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__ */ f("button", {
+											children: [e, /* @__PURE__ */ m("button", {
 												type: "button",
-												onClick: () => P((t) => t.filter((t) => t !== e)),
+												onClick: () => j((t) => t.filter((t) => t !== e)),
 												className: "hover:text-status-error-text",
-												children: /* @__PURE__ */ f(je, { className: "size-3" })
+												children: /* @__PURE__ */ m(ke, { className: "size-3" })
 											})]
 										}, e))
 									}),
-									/* @__PURE__ */ p("div", {
+									/* @__PURE__ */ h("div", {
 										className: "flex items-center gap-2 mt-2",
-										children: [/* @__PURE__ */ f("input", {
+										children: [/* @__PURE__ */ m("input", {
 											"aria-label": "control",
 											type: "text",
-											value: L,
-											onChange: (e) => R(e.target.value),
-											placeholder: y("webhooks.customEventPlaceholder", "custom:event-name"),
+											value: I,
+											onChange: (e) => L(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 = L.trim();
-													/^[a-z][a-z0-9_-]*:[a-z][a-z0-9_.-]*$/.test(t) && !N.includes(t) && (P((e) => [...e, t]), R(""));
+													let t = I.trim();
+													/^[a-z][a-z0-9_-]*:[a-z][a-z0-9_.-]*$/.test(t) && !A.includes(t) && (j((e) => [...e, t]), L(""));
 												}
 											}
-										}), /* @__PURE__ */ f("button", {
+										}), /* @__PURE__ */ m("button", {
 											type: "button",
 											onClick: () => {
-												let e = L.trim();
-												/^[a-z][a-z0-9_-]*:[a-z][a-z0-9_.-]*$/.test(e) && !N.includes(e) && (P((t) => [...t, e]), R(""));
+												let e = I.trim();
+												/^[a-z][a-z0-9_-]*:[a-z][a-z0-9_.-]*$/.test(e) && !A.includes(e) && (j((t) => [...t, e]), L(""));
 											},
 											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__ */ f(d, { className: "size-4" })
+											children: /* @__PURE__ */ m(f, { className: "size-4" })
 										})]
 									}),
-									/* @__PURE__ */ f("p", {
+									/* @__PURE__ */ m("p", {
 										className: "text-xs text-text-muted mt-1",
-										children: y("webhooks.customEventHint", "Add custom events using namespace:event format (e.g., deploy:started)")
+										children: v("webhooks.customEventHint", "Add custom events using namespace:event format (e.g., deploy:started)")
 									})
 								] }),
-								/* @__PURE__ */ p("div", { children: [
-									/* @__PURE__ */ f("label", {
+								/* @__PURE__ */ h("div", { children: [
+									/* @__PURE__ */ m("label", {
 										className: "block text-sm font-medium text-text-primary mb-1",
-										children: y("webhooks.signingKey", "Signing Key")
+										children: v("webhooks.signingKey", "Signing Key")
 									}),
-									/* @__PURE__ */ p("div", {
+									/* @__PURE__ */ h("div", {
 										className: "relative",
-										children: [/* @__PURE__ */ f("input", {
+										children: [/* @__PURE__ */ m("input", {
 											"aria-label": "control",
-											ref: tt,
-											type: I ? "text" : "password",
-											placeholder: y("webhooks.signingKeyPlaceholder", "HMAC signing key for delivery verification"),
+											ref: W,
+											type: P ? "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__ */ f("button", {
+										}), /* @__PURE__ */ m("button", {
 											type: "button",
-											onClick: () => Ze(!I),
+											onClick: () => F(!P),
 											className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-bg-elevated transition-colors",
-											children: f(I ? we : Ce, { className: "size-4 text-text-secondary" })
+											children: m(P ? Ce : Se, { className: "size-4 text-text-secondary" })
 										})]
 									}),
-									/* @__PURE__ */ f("p", {
+									/* @__PURE__ */ m("p", {
 										className: "text-xs text-text-muted mt-1",
-										children: y("webhooks.signingKeyHint", "Used to sign payloads with HMAC-SHA256. Header: X-Webhook-Signature")
+										children: v("webhooks.signingKeyHint", "Used to sign payloads with HMAC-SHA256. Header: X-Webhook-Signature")
 									})
 								] }),
-								st.length > 0 && /* @__PURE__ */ p("div", { children: [
-									/* @__PURE__ */ f("label", {
+								ct.length > 0 && /* @__PURE__ */ h("div", { children: [
+									/* @__PURE__ */ m("label", {
 										className: "block text-sm font-medium text-text-primary mb-2",
-										children: y("webhooks.agentScope", "Agent Scope")
+										children: v("webhooks.agentScope", "Agent Scope")
 									}),
-									/* @__PURE__ */ f("p", {
+									/* @__PURE__ */ m("p", {
 										className: "text-xs text-text-muted mb-2",
-										children: y("webhooks.agentScopeHint", "Only fire for events from selected agents. Leave empty for all agents.")
+										children: v("webhooks.agentScopeHint", "Only fire for events from selected agents. Leave empty for all agents.")
 									}),
-									/* @__PURE__ */ f("div", {
+									/* @__PURE__ */ m("div", {
 										className: "space-y-2 max-h-32 overflow-y-auto",
-										children: st.map((e) => /* @__PURE__ */ p("label", {
+										children: ct.map((e) => /* @__PURE__ */ h("label", {
 											className: "flex items-center gap-2",
 											children: [
-												/* @__PURE__ */ f("input", {
+												/* @__PURE__ */ m("input", {
 													"aria-label": "control",
 													type: "checkbox",
-													checked: F.includes(e.id),
-													onChange: () => Xe((t) => t.includes(e.id) ? t.filter((t) => t !== e.id) : [...t, e.id]),
+													checked: M.includes(e.id),
+													onChange: () => N((t) => t.includes(e.id) ? t.filter((t) => t !== e.id) : [...t, e.id]),
 													className: "size-4 rounded border-border-default"
 												}),
-												/* @__PURE__ */ f(xe, { className: "size-3.5 text-text-secondary" }),
-												/* @__PURE__ */ f("span", {
+												/* @__PURE__ */ m(be, { className: "size-3.5 text-text-secondary" }),
+												/* @__PURE__ */ m("span", {
 													className: "text-sm text-text-primary",
 													children: e.name
 												})
@@ -713,65 +718,65 @@ function h() {
 								] })
 							]
 						}),
-						/* @__PURE__ */ p("div", {
+						/* @__PURE__ */ h("div", {
 							className: "flex flex-col-reverse sm:flex-row justify-end gap-3 mt-6",
-							children: [/* @__PURE__ */ f("button", {
+							children: [/* @__PURE__ */ m("button", {
 								type: "button",
-								onClick: () => E(!1),
-								disabled: O,
+								onClick: () => C(!1),
+								disabled: E,
 								className: "px-4 py-2 text-text-primary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50",
-								children: y("common.cancel", "Cancel")
-							}), /* @__PURE__ */ f("button", {
+								children: v("common.cancel", "Cancel")
+							}), /* @__PURE__ */ m("button", {
 								type: "button",
-								onClick: mt,
-								disabled: O,
+								onClick: ht,
+								disabled: E,
 								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: O ? y("webhooks.creating", "Creating...") : y("webhooks.createWebhook", "Create Webhook")
+								children: E ? v("webhooks.creating", "Creating...") : v("webhooks.createWebhook", "Create Webhook")
 							})]
 						})
 					]
 				})
 			}),
-			/* @__PURE__ */ f(a, {
-				isOpen: V === "enable",
-				onClose: () => H(null),
-				onConfirm: () => bt(!0),
+			/* @__PURE__ */ m(a, {
+				isOpen: B === "enable",
+				onClose: () => V(null),
+				onConfirm: () => xt(!0),
 				title: "Enable selected webhooks",
 				message: `Enable ${Z.length} selected webhook${Z.length === 1 ? "" : "s"}?`,
 				confirmLabel: "Enable",
 				variant: "default"
 			}),
-			/* @__PURE__ */ f(a, {
-				isOpen: V === "disable",
-				onClose: () => H(null),
-				onConfirm: () => bt(!1),
+			/* @__PURE__ */ m(a, {
+				isOpen: B === "disable",
+				onClose: () => V(null),
+				onConfirm: () => xt(!1),
 				title: "Disable selected webhooks",
 				message: `Disable ${X.length} selected webhook${X.length === 1 ? "" : "s"}?`,
 				confirmLabel: "Disable",
 				variant: "warning"
 			}),
-			/* @__PURE__ */ f(a, {
-				isOpen: V === "delete",
-				onClose: () => H(null),
-				onConfirm: xt,
+			/* @__PURE__ */ m(a, {
+				isOpen: B === "delete",
+				onClose: () => V(null),
+				onConfirm: St,
 				title: "Delete selected webhooks",
 				message: `Delete ${Y.length} selected webhook${Y.length === 1 ? "" : "s"}? This cannot be undone.`,
 				confirmLabel: "Delete",
 				variant: "danger"
 			}),
-			/* @__PURE__ */ f(ee, {
-				isOpen: U !== null,
-				onClose: () => W(null),
+			/* @__PURE__ */ m(ee, {
+				isOpen: H !== null,
+				onClose: () => U(null),
 				onConfirm: () => {
-					W(null), h("/billing/plans");
+					U(null), Be("/billing/plans");
 				},
-				title: U?.title || "Quota Reached",
-				message: U?.message || "Upgrade your plan to continue."
+				title: H?.title || "Quota Reached",
+				message: H?.message || "Upgrade your plan to continue."
 			})
 		]
 	});
 }
 //#endregion
-export { h as WebhooksPage };
+export { Be as WebhooksPage };
 
 //# sourceMappingURL=WebhooksPage.js.map