@burdenoff/microfe-vibecontrols 2026.528.7 → 2026.528.8

package/dist/pages/VibeDeckPage.js

@@ -5,169 +5,172 @@ import { useCreateVibeDeckButtonMutation as i, useCreateVibeDeckMutation as ee,
 import { useVibeNavigate as fe } from "../providers/VibeControlsProvider.js";
 import { useVibeControlsStore as pe } from "../store/vibeControlsStore.js";
 import { PageHeader as me } from "../components/shared/PageHeader.js";
-import { LoadingState as a } from "../components/shared/LoadingState.js";
-import { ErrorState as he } from "../components/shared/ErrorState.js";
-import { EntityTagPicker as ge } from "../components/shared/EntityTagPicker.js";
-import { useDraftEntityTags as _e } from "../hooks/useDraftEntityTags.js";
-import { isNative as ve, nativeNotify as ye } from "../utils/nativeBridge.js";
-import { EmptyState as be } from "../components/shared/EmptyState.js";
-import { GetHelpButton as xe } from "../components/shared/GetHelpButton.js";
-import { SelectionCheckbox as Se } from "../components/shared/SelectionCheckbox.js";
+import { LoadingState as he } from "../components/shared/LoadingState.js";
+import { ErrorState as ge } from "../components/shared/ErrorState.js";
+import { EntityTagPicker as _e } from "../components/shared/EntityTagPicker.js";
+import { useDraftEntityTags as ve } from "../hooks/useDraftEntityTags.js";
+import { isNative as ye, nativeNotify as be } from "../utils/nativeBridge.js";
+import { EmptyState as xe } from "../components/shared/EmptyState.js";
+import { LINK_TO_VIBE_DEFAULT as a, LinkToVibePanel as Se } from "../components/shared/LinkToVibePanel.js";
+import { GetHelpButton as Ce } from "../components/shared/GetHelpButton.js";
+import { SelectionCheckbox as we } from "../components/shared/SelectionCheckbox.js";
 import "../components/shared/index.js";
 import { VIBE_PERMISSIONS as o } from "../constants/permissions.js";
-import { VibeDeckGrid as Ce } from "../components/vibedeck/VibeDeckGrid.js";
-import { VibeDeckSwitcher as we } from "../components/vibedeck/VibeDeckSwitcher.js";
-import { VibeDeckForm as Te } from "../components/vibedeck/VibeDeckForm.js";
-import { VibeDeckButtonForm as Ee } from "../components/vibedeck/VibeDeckButtonForm.js";
-import { VibeDeckShareDialog as De } from "../components/vibedeck/VibeDeckShareDialog.js";
-import { VibeDeckExecutionLog as Oe } from "../components/vibedeck/VibeDeckExecutionLog.js";
+import { VibeDeckGrid as Te } from "../components/vibedeck/VibeDeckGrid.js";
+import { VibeDeckSwitcher as Ee } from "../components/vibedeck/VibeDeckSwitcher.js";
+import { VibeDeckForm as De } from "../components/vibedeck/VibeDeckForm.js";
+import { VibeDeckButtonForm as Oe } from "../components/vibedeck/VibeDeckButtonForm.js";
+import { VibeDeckShareDialog as ke } from "../components/vibedeck/VibeDeckShareDialog.js";
+import { VibeDeckExecutionLog as Ae } from "../components/vibedeck/VibeDeckExecutionLog.js";
 import "../components/vibedeck/index.js";
-import { useCallback as s, useEffect as ke, useMemo as Ae, useRef as je, useState as c } from "react";
-import { useI18n as Me } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Copy as Ne, Eye as Pe, Pencil as Fe, Play as Ie, RefreshCw as Le, Share2 as Re, Star as ze, Trash2 as Be } from "lucide-react";
-import { usePermissions as Ve } from "@burdenoff/fe-libs/shared/providers/shell";
-import { AnimatePresence as He } from "framer-motion";
+import { useCallback as s, useEffect as je, useMemo as Me, useRef as Ne, useState as c } from "react";
+import { useI18n as Pe } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Copy as Fe, Eye as Ie, Pencil as Le, Play as Re, RefreshCw as ze, Share2 as Be, Star as Ve, Trash2 as He } from "lucide-react";
+import { usePermissions as Ue } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AnimatePresence as We } from "framer-motion";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { MotionPage as d } from "@burdenoff/fe-libs/shared/motion";
-import { AccessDenied as Ue } from "@burdenoff/fe-libs/shared/components";
+import { AccessDenied as Ge } from "@burdenoff/fe-libs/shared/components";
 //#region src/pages/VibeDeckPage.tsx
-function We() {
-	let We = fe(), { hasPermission: f, isLoading: Ge, permissions: p } = Ve(), m = ((e) => (t, n) => {
+function Ke() {
+	let Ke = fe(), { hasPermission: f, isLoading: qe, permissions: p } = Ue(), m = ((e) => (t, n) => {
 		let r = e.t(t);
 		return r === t ? n : r;
-	})(Me()), h = (Array.isArray(p) ? p : p?.permissionStrings)?.some?.((e) => e.startsWith("vibedeck:")), Ke = h ? f(o.VIBEDECK_LIST) : !0, g = h ? f(o.VIBEDECK_CREATE) : !0, qe = h ? f(o.VIBEDECK_UPDATE) : !0, Je = h ? f(o.VIBEDECK_DELETE) : !0, Ye = h ? f(o.VIBEDECK_EXECUTE) : !0, Xe = Ge, { activeVibeDeckId: _, setActiveVibeDeckId: v, vibeDeckMode: Ze, setVibeDeckMode: Qe } = pe(), y = Ze === "preview", $e = y ? !1 : g, et = y ? !1 : qe, tt = y ? !1 : Je, [b, x] = c({ type: "none" }), [nt, rt] = c(null), [S, C] = c(/* @__PURE__ */ new Set()), [w, T] = c(/* @__PURE__ */ new Set()), [it, at] = c(null), [ot, E] = c(null), [D, O] = c(null), [st, k] = c([]), A = je(/* @__PURE__ */ new Map()), [ct, lt] = c([]), [ut, dt] = c(!0), [ft, pt] = c(/* @__PURE__ */ new Map()), [mt, j] = c(null), M = je(/* @__PURE__ */ new Map());
-	ke(() => {
-		let e = M.current;
+	})(Pe()), h = (Array.isArray(p) ? p : p?.permissionStrings)?.some?.((e) => e.startsWith("vibedeck:")), Je = h ? f(o.VIBEDECK_LIST) : !0, Ye = h ? f(o.VIBEDECK_CREATE) : !0, Xe = h ? f(o.VIBEDECK_UPDATE) : !0, Ze = h ? f(o.VIBEDECK_DELETE) : !0, Qe = h ? f(o.VIBEDECK_EXECUTE) : !0, $e = qe, { activeVibeDeckId: g, setActiveVibeDeckId: _, vibeDeckMode: et, setVibeDeckMode: tt } = pe(), v = et === "preview", nt = v ? !1 : Ye, rt = v ? !1 : Xe, it = v ? !1 : Ze, [y, b] = c({ type: "none" }), [at, ot] = c(null), [x, st] = c(/* @__PURE__ */ new Set()), [S, C] = c(/* @__PURE__ */ new Set()), [ct, lt] = c(null), [ut, w] = c(null), [T, E] = c(null), [dt, D] = c([]), O = Ne(/* @__PURE__ */ new Map()), [k, A] = c(a), [ft, j] = c([]), [pt, mt] = c(!0), [ht, gt] = c(/* @__PURE__ */ new Map()), [M, _t] = c(null), N = Ne(/* @__PURE__ */ new Map());
+	je(() => {
+		let e = N.current;
 		return () => {
 			for (let t of e.values()) clearTimeout(t);
 		};
 	}, []);
-	let ht = s((e) => {
+	let vt = s((e) => {
 		let t = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`, n = {
 			...e,
 			id: t
 		};
-		return lt((e) => [...e.slice(-49), n]), t;
-	}, []), N = s((e, t) => {
-		lt((n) => n.map((n) => n.id === e ? {
+		return j((e) => [...e.slice(-49), n]), t;
+	}, []), P = s((e, t) => {
+		j((n) => n.map((n) => n.id === e ? {
 			...n,
 			...t
 		} : n));
-	}, []), P = s((e, t) => {
-		if (pt((n) => {
+	}, []), F = s((e, t) => {
+		if (gt((n) => {
 			let r = new Map(n);
 			return r.set(e, t), r;
 		}), t === "success" || t === "error") {
 			let n = setTimeout(() => {
-				pt((n) => {
+				gt((n) => {
 					let r = new Map(n);
 					return r.get(e) === t && r.delete(e), r;
-				}), M.current.delete(e);
-			}, 3e3), r = M.current.get(e);
-			r && clearTimeout(r), M.current.set(e, n);
+				}), N.current.delete(e);
+			}, 3e3), r = N.current.get(e);
+			r && clearTimeout(r), N.current.set(e, n);
 		}
 	}, []);
-	ke(() => {
-		let e = A.current;
+	je(() => {
+		let e = O.current;
 		return () => {
 			for (let t of e.values()) clearTimeout(t);
 		};
 	}, []);
-	let F = s((e, t, n, r) => {
+	let I = s((e, t, n, r) => {
 		let i = Date.now() + Math.random();
-		k((r) => [...r, {
+		D((r) => [...r, {
 			message: e,
 			variant: t,
 			detail: n,
 			id: i
 		}]);
 		let ee = setTimeout(() => {
-			k((e) => e.filter((e) => e.id !== i)), A.current.delete(i);
+			D((e) => e.filter((e) => e.id !== i)), O.current.delete(i);
 		}, r ?? (t === "success" ? 1e4 : 3e4));
-		A.current.set(i, ee);
-	}, []), gt = s((e) => {
-		k((t) => t.filter((t) => t.id !== e));
-		let t = A.current.get(e);
-		t && (clearTimeout(t), A.current.delete(e));
-	}, []), I = s((e, t) => {
-		r(), j({
+		O.current.set(i, ee);
+	}, []), yt = s((e) => {
+		D((t) => t.filter((t) => t.id !== e));
+		let t = O.current.get(e);
+		t && (clearTimeout(t), O.current.delete(e));
+	}, []), L = s((e, t) => {
+		r(), _t({
 			title: e,
 			message: t
 		});
-	}, []), { data: _t, loading: vt, error: yt, refetch: L } = se({
+	}, []), { data: bt, loading: xt, error: St, refetch: R } = se({
 		variables: { pagination: { limit: 50 } },
-		skip: Xe
-	}), R = Ae(() => _t?.vibeDecks?.items || [], [_t]), z = _ || R.find((e) => e.isDefault)?.id || R[0]?.id || null, { data: bt, loading: xt, refetch: B } = ae({
-		variables: { id: z },
-		skip: !z || Xe
-	}), V = bt?.vibeDeck, H = Ae(() => R.filter((e) => S.has(e.id)), [R, S]), U = Ae(() => V?.buttons?.filter((e) => w.has(e.id)) ?? [], [V?.buttons, w]), St = R.length > 0 && R.every((e) => S.has(e.id)), Ct = R.some((e) => S.has(e.id)) && !St, wt = (V?.buttons?.length ?? 0) > 0 && (V?.buttons ?? []).every((e) => w.has(e.id)), Tt = (V?.buttons ?? []).some((e) => w.has(e.id)) && !wt, { data: Et } = oe({
+		skip: $e
+	}), z = Me(() => bt?.vibeDecks?.items || [], [bt]), B = g || z.find((e) => e.isDefault)?.id || z[0]?.id || null, { data: Ct, loading: wt, refetch: Tt } = ae({
+		variables: { id: B },
+		skip: !B || $e
+	}), V = Ct?.vibeDeck, H = Me(() => z.filter((e) => x.has(e.id)), [z, x]), U = Me(() => V?.buttons?.filter((e) => S.has(e.id)) ?? [], [V?.buttons, S]), Et = z.length > 0 && z.every((e) => x.has(e.id)), Dt = z.some((e) => x.has(e.id)) && !Et, Ot = (V?.buttons?.length ?? 0) > 0 && (V?.buttons ?? []).every((e) => S.has(e.id)), kt = (V?.buttons ?? []).some((e) => S.has(e.id)) && !Ot, { data: At } = oe({
 		variables: { pagination: { limit: 100 } },
 		fetchPolicy: "cache-and-network",
-		skip: Xe
-	}), Dt = (Et?.vibecontrolsAgents ?? []).map((e) => ({
+		skip: $e
+	}), jt = (At?.vibecontrolsAgents ?? []).map((e) => ({
 		id: e.id,
 		name: e.name,
 		isActive: e.isActive
-	})), [Ot, { loading: kt }] = ee({ refetchQueries: ["ListVibeDecks"] }), { setDraftTagIds: At, flushTags: jt } = _e("VIBECONTROLS_VIBEDECK"), [Mt, { loading: Nt }] = de({ refetchQueries: ["ListVibeDecks", "GetVibeDeck"] }), [W] = ne({ refetchQueries: ["ListVibeDecks"] }), [G] = le({ refetchQueries: ["ListVibeDecks", "GetVibeDeck"] }), [K] = re({ refetchQueries: ["ListVibeDecks"] }), [Pt, { loading: Ft }] = i({ refetchQueries: ["GetVibeDeck"] }), [It, { loading: Lt }] = ue({ refetchQueries: ["GetVibeDeck"] }), [q] = te({ refetchQueries: ["GetVibeDeck"] }), [Rt] = ce({ refetchQueries: ["GetVibeDeck"] }), [J] = ie();
-	ke(() => {
-		T(/* @__PURE__ */ new Set());
-	}, [z]);
-	let zt = s((e, t) => {
-		C((n) => {
+	})), [Mt, { loading: Nt }] = ee({ refetchQueries: ["ListVibeDecks"] }), { setDraftTagIds: Pt, flushTags: Ft } = ve("VIBECONTROLS_VIBEDECK"), [It, { loading: Lt }] = de({ refetchQueries: ["ListVibeDecks", "GetVibeDeck"] }), [W] = ne({ refetchQueries: ["ListVibeDecks"] }), [G] = le({ refetchQueries: ["ListVibeDecks", "GetVibeDeck"] }), [K] = re({ refetchQueries: ["ListVibeDecks"] }), [Rt, { loading: zt }] = i({ refetchQueries: ["GetVibeDeck"] }), [Bt, { loading: Vt }] = ue({ refetchQueries: ["GetVibeDeck"] }), [q] = te({ refetchQueries: ["GetVibeDeck"] }), [Ht] = ce({ refetchQueries: ["GetVibeDeck"] }), [J] = ie();
+	je(() => {
+		C(/* @__PURE__ */ new Set());
+	}, [B]);
+	let Ut = s((e, t) => {
+		st((n) => {
 			let r = new Set(n);
 			return t ? r.add(e) : r.delete(e), r;
 		});
-	}, []), Bt = s((e) => {
-		C((t) => {
+	}, []), Wt = s((e) => {
+		st((t) => {
 			let n = new Set(t);
-			return R.forEach((t) => {
+			return z.forEach((t) => {
 				e ? n.add(t.id) : n.delete(t.id);
 			}), n;
 		});
-	}, [R]), Y = s(() => {
-		C(/* @__PURE__ */ new Set());
+	}, [z]), Y = s(() => {
+		st(/* @__PURE__ */ new Set());
 	}, []);
 	s((e, t) => {
-		T((n) => {
+		C((n) => {
 			let r = new Set(n);
 			return t ? r.add(e) : r.delete(e), r;
 		});
 	}, []);
-	let Vt = s((e) => {
-		T((t) => {
+	let Gt = s((e) => {
+		C((t) => {
 			let n = new Set(t);
 			return (V?.buttons ?? []).forEach((t) => {
 				e ? n.add(t.id) : n.delete(t.id);
 			}), n;
 		});
 	}, [V?.buttons]), X = s(() => {
-		T(/* @__PURE__ */ new Set());
-	}, []), Ht = s(async (e) => {
+		C(/* @__PURE__ */ new Set());
+	}, []), Kt = s(async (e) => {
 		try {
-			let t = (await Ot({ variables: { input: {
+			let t = {
 				name: e.name,
 				description: e.description || null,
 				colorTheme: e.colorTheme || null,
 				gridColumns: e.gridColumns,
 				gridRows: e.gridRows
-			} } })).data?.createVibeDeck?.id;
-			x({ type: "none" }), F("Deck created", "success"), t && await jt(t);
+			};
+			k.vibeId && (t.vibeId = k.vibeId, t.visibility = k.visibility);
+			let n = (await Mt({ variables: { input: t } })).data?.createVibeDeck?.id;
+			b({ type: "none" }), I("Deck created", "success"), A(a), n && await Ft(n);
 		} catch (e) {
 			if (n(e)) {
-				x({ type: "none" }), I("Vibe Deck Quota Reached", "You have reached the Vibe Deck limit for your current plan. Upgrade to create more decks.");
+				b({ type: "none" }), L("Vibe Deck Quota Reached", "You have reached the Vibe Deck limit for your current plan. Upgrade to create more decks.");
 				return;
 			}
-			F(e instanceof Error ? e.message : "Failed to create deck", "error");
+			I(e instanceof Error ? e.message : "Failed to create deck", "error");
 		}
 	}, [
-		Ot,
-		jt,
-		I,
-		F
-	]), Ut = s(async (e) => {
-		if (b.type === "editDeck") try {
-			await Mt({ variables: {
-				id: b.deckId,
+		Mt,
+		Ft,
+		L,
+		I
+	]), qt = s(async (e) => {
+		if (y.type === "editDeck") try {
+			await It({ variables: {
+				id: y.deckId,
 				input: {
 					name: e.name,
 					description: e.description || null,
@@ -175,31 +178,31 @@ function We() {
 					gridColumns: e.gridColumns,
 					gridRows: e.gridRows
 				}
-			} }), x({ type: "none" }), F("Deck updated", "success");
+			} }), b({ type: "none" }), I("Deck updated", "success");
 		} catch (e) {
-			F(e instanceof Error ? e.message : "Failed to update deck", "error");
+			I(e instanceof Error ? e.message : "Failed to update deck", "error");
 		}
 	}, [
-		Mt,
-		b,
-		F
-	]), Wt = s(async () => {
-		if (b.type === "confirmDelete") try {
-			b.target === "deck" ? (await W({ variables: { id: b.id } }), _ === b.id && v(null), F("Deck deleted", "success")) : (await q({ variables: { id: b.id } }), F("Button deleted", "success")), x({ type: "none" }), ve() && ye("success");
+		It,
+		y,
+		I
+	]), Jt = s(async () => {
+		if (y.type === "confirmDelete") try {
+			y.target === "deck" ? (await W({ variables: { id: y.id } }), g === y.id && _(null), I("Deck deleted", "success")) : (await q({ variables: { id: y.id } }), I("Button deleted", "success")), b({ type: "none" }), ye() && be("success");
 		} catch (e) {
-			F(e instanceof Error ? e.message : "Failed to delete", "error"), ve() && ye("error");
+			I(e instanceof Error ? e.message : "Failed to delete", "error"), ye() && be("error");
 		}
 	}, [
-		b,
+		y,
 		W,
 		q,
+		g,
 		_,
-		v,
-		F
+		I
 	]), Z = s(async (e) => {
 		let t = V?.buttons?.find((t) => t.id === e);
 		if (!t || !t.action) return;
-		let r = t.action, i = ht({
+		let r = t.action, i = vt({
 			buttonId: e,
 			buttonLabel: t.label,
 			actionType: r.actionType,
@@ -207,12 +210,12 @@ function We() {
 			status: "running",
 			startedAt: /* @__PURE__ */ new Date()
 		});
-		rt(e), P(e, "executing");
+		ot(e), F(e, "executing");
 		try {
 			let t = (await J({ variables: { id: e } })).data?.executeVibeDeckButton;
 			if (t) {
 				let n = t.status === "success";
-				P(e, n ? "success" : "error"), N(i, {
+				F(e, n ? "success" : "error"), P(i, {
 					status: n ? "success" : "error",
 					output: t.output,
 					exitCode: t.exitCode,
@@ -222,35 +225,35 @@ function We() {
 			}
 		} catch (t) {
 			if (n(t)) {
-				P(e, "error"), N(i, {
+				F(e, "error"), P(i, {
 					status: "error",
 					error: "Usage quota exhausted",
 					completedAt: /* @__PURE__ */ new Date()
-				}), I("Execution Quota Reached", "You have used the execution quota for your current plan. Upgrade to continue running Vibe Deck actions.");
+				}), L("Execution Quota Reached", "You have used the execution quota for your current plan. Upgrade to continue running Vibe Deck actions.");
 				return;
 			}
 			let r = t instanceof Error ? t.message : "Execution failed";
-			P(e, "error"), N(i, {
+			F(e, "error"), P(i, {
 				status: "error",
 				error: r,
 				completedAt: /* @__PURE__ */ new Date()
 			});
 		} finally {
-			rt(null);
+			ot(null);
 		}
 	}, [
 		V,
 		J,
-		ht,
-		N,
+		vt,
 		P,
-		I
-	]), Gt = s(async (e) => {
+		F,
+		L
+	]), Yt = s(async (e) => {
 		let t = V?.buttons?.find((t) => t.id === e);
 		if (t) {
 			if (t.confirmationRequired) {
 				let n = t.action, r = n?.actionType === "WEBHOOK" ? `POST ${n.webhookUrl || ""}` : n?.command || "";
-				x({
+				b({
 					type: "confirmExecute",
 					buttonId: e,
 					label: t.label,
@@ -260,37 +263,37 @@ function We() {
 			}
 			await Z(e);
 		}
-	}, [V, Z]), Kt = s(async () => {
-		if (b.type !== "confirmExecute") return;
-		let e = b.buttonId;
-		x({ type: "none" }), await Z(e);
-	}, [b, Z]), qt = s(async (e) => {
-		if (!(b.type !== "createButton" || !z)) try {
-			await Pt({ variables: { input: {
-				vibeDeckId: z,
+	}, [V, Z]), Xt = s(async () => {
+		if (y.type !== "confirmExecute") return;
+		let e = y.buttonId;
+		b({ type: "none" }), await Z(e);
+	}, [y, Z]), Zt = s(async (e) => {
+		if (!(y.type !== "createButton" || !B)) try {
+			await Rt({ variables: { input: {
+				vibeDeckId: B,
 				label: e.label,
 				actionId: e.actionId,
-				row: b.row,
-				column: b.column,
+				row: y.row,
+				column: y.column,
 				rowSpan: e.rowSpan,
 				colSpan: e.colSpan,
 				color: e.color || null,
 				category: e.category || null,
 				keyboardShortcut: e.keyboardShortcut || null,
 				confirmationRequired: e.confirmationRequired
-			} } }), x({ type: "none" }), F("Button created", "success");
+			} } }), b({ type: "none" }), I("Button created", "success");
 		} catch (e) {
-			F(e instanceof Error ? e.message : "Failed to create button", "error");
+			I(e instanceof Error ? e.message : "Failed to create button", "error");
 		}
 	}, [
-		b,
-		Pt,
-		z,
-		F
-	]), Jt = s(async (e) => {
-		if (b.type === "editButton") try {
-			await It({ variables: {
-				id: b.buttonId,
+		y,
+		Rt,
+		B,
+		I
+	]), Qt = s(async (e) => {
+		if (y.type === "editButton") try {
+			await Bt({ variables: {
+				id: y.buttonId,
 				input: {
 					label: e.label,
 					actionId: e.actionId,
@@ -301,17 +304,17 @@ function We() {
 					rowSpan: e.rowSpan,
 					colSpan: e.colSpan
 				}
-			} }), x({ type: "none" }), F("Button updated", "success");
+			} }), b({ type: "none" }), I("Button updated", "success");
 		} catch (e) {
-			F(e instanceof Error ? e.message : "Failed to update button", "error");
+			I(e instanceof Error ? e.message : "Failed to update button", "error");
 		}
 	}, [
-		b,
-		It,
-		F
-	]), Yt = s(async (e, t, n) => {
+		y,
+		Bt,
+		I
+	]), $t = s(async (e, t, n) => {
 		try {
-			await Rt({ variables: {
+			await Ht({ variables: {
 				id: e,
 				input: {
 					row: t,
@@ -319,154 +322,154 @@ function We() {
 				}
 			} });
 		} catch (e) {
-			F(e instanceof Error ? e.message : "Failed to move button", "error");
+			I(e instanceof Error ? e.message : "Failed to move button", "error");
 		}
-	}, [Rt, F]), Xt = s(async (e) => {
-		let t = R.find((t) => t.id === e);
+	}, [Ht, I]), en = s(async (e) => {
+		let t = z.find((t) => t.id === e);
 		if (t) try {
 			await K({ variables: {
 				id: e,
 				name: `${t.name} (Copy)`
-			} }), F("Deck duplicated", "success");
+			} }), I("Deck duplicated", "success");
 		} catch (e) {
 			if (n(e)) {
-				I("Vibe Deck Quota Reached", "You have reached the Vibe Deck limit for your current plan. Upgrade to duplicate more decks.");
+				L("Vibe Deck Quota Reached", "You have reached the Vibe Deck limit for your current plan. Upgrade to duplicate more decks.");
 				return;
 			}
-			F(e instanceof Error ? e.message : "Failed to duplicate deck", "error");
+			I(e instanceof Error ? e.message : "Failed to duplicate deck", "error");
 		}
 	}, [
-		R,
+		z,
 		K,
-		I,
-		F
-	]), Zt = s(async (e) => {
+		L,
+		I
+	]), tn = s(async (e) => {
 		try {
-			await G({ variables: { id: e } }), F("Default deck set", "success");
+			await G({ variables: { id: e } }), I("Default deck set", "success");
 		} catch (e) {
-			F(e instanceof Error ? e.message : "Failed to set default", "error");
+			I(e instanceof Error ? e.message : "Failed to set default", "error");
 		}
-	}, [G, F]), Qt = s(async () => {
+	}, [G, I]), nn = s(async () => {
 		if (H.length === 1) {
-			O("setDefaultDeck");
+			E("setDefaultDeck");
 			try {
-				await G({ variables: { id: H[0].id } }), F("Default deck set", "success"), Y(), await L();
+				await G({ variables: { id: H[0].id } }), I("Default deck set", "success"), Y(), await R();
 			} catch (e) {
-				F(e instanceof Error ? e.message : "Failed to set default deck", "error");
+				I(e instanceof Error ? e.message : "Failed to set default deck", "error");
 			} finally {
-				O(null);
+				E(null);
 			}
 		}
 	}, [
 		H,
 		G,
-		F,
+		I,
 		Y,
-		L
-	]), $t = s(async () => {
+		R
+	]), rn = s(async () => {
 		if (H.length !== 0) {
-			O("duplicateDeck");
+			E("duplicateDeck");
 			try {
 				let e = await Promise.allSettled(H.map((e) => K({ variables: {
 					id: e.id,
 					name: `${e.name} (Copy)`
 				} })));
 				if (e.some((e) => e.status === "rejected" && n(e.reason))) {
-					I("Vibe Deck Quota Reached", "You have reached the Vibe Deck limit for your current plan. Upgrade to duplicate more decks.");
+					L("Vibe Deck Quota Reached", "You have reached the Vibe Deck limit for your current plan. Upgrade to duplicate more decks.");
 					return;
 				}
 				let t = e.filter((e) => e.status === "fulfilled").length, r = e.length - t;
-				F(`Duplicated ${t} deck${t === 1 ? "" : "s"}${r > 0 ? ` • ${r} failed` : ""}`, r > 0 ? "error" : "success"), Y(), await L();
+				I(`Duplicated ${t} deck${t === 1 ? "" : "s"}${r > 0 ? ` • ${r} failed` : ""}`, r > 0 ? "error" : "success"), Y(), await R();
 			} catch (e) {
 				if (n(e)) {
-					I("Vibe Deck Quota Reached", "You have reached the Vibe Deck limit for your current plan. Upgrade to duplicate more decks.");
+					L("Vibe Deck Quota Reached", "You have reached the Vibe Deck limit for your current plan. Upgrade to duplicate more decks.");
 					return;
 				}
-				F(e instanceof Error ? e.message : "Failed to duplicate decks", "error");
+				I(e instanceof Error ? e.message : "Failed to duplicate decks", "error");
 			} finally {
-				O(null);
+				E(null);
 			}
 		}
 	}, [
 		H,
 		K,
+		L,
 		I,
-		F,
 		Y,
-		L
-	]), en = s(async () => {
+		R
+	]), an = s(async () => {
 		if (H.length !== 0) {
-			O("deleteDeck");
+			E("deleteDeck");
 			try {
 				let e = await Promise.allSettled(H.map((e) => W({ variables: { id: e.id } }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.length - t;
-				H.some((e) => e.id === _) && v(null), F(`Deleted ${t} deck${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`, n > 0 ? "error" : "success"), Y(), at(null), await L();
+				H.some((e) => e.id === g) && _(null), I(`Deleted ${t} deck${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`, n > 0 ? "error" : "success"), Y(), lt(null), await R();
 			} catch (e) {
-				F(e instanceof Error ? e.message : "Failed to delete decks", "error");
+				I(e instanceof Error ? e.message : "Failed to delete decks", "error");
 			} finally {
-				O(null);
+				E(null);
 			}
 		}
 	}, [
 		H,
 		W,
+		g,
 		_,
-		v,
-		F,
+		I,
 		Y,
-		L
-	]), tn = s(async () => {
+		R
+	]), on = s(async () => {
 		if (U.length === 0) return;
-		O("executeButton");
+		E("executeButton");
 		let e = 0, t = 0;
 		try {
 			for (let r of U) try {
 				(await J({ variables: { id: r.id } })).data?.executeVibeDeckButton?.status === "success" ? e += 1 : t += 1;
 			} catch (e) {
 				if (n(e)) {
-					E(null), I("Execution Quota Reached", "You have used the execution quota for your current plan. Upgrade to continue running Vibe Deck actions.");
+					w(null), L("Execution Quota Reached", "You have used the execution quota for your current plan. Upgrade to continue running Vibe Deck actions.");
 					return;
 				}
 				t += 1;
 			}
-			F(`Executed ${e} button${e === 1 ? "" : "s"}${t > 0 ? ` • ${t} failed` : ""}`, t > 0 ? "error" : "success"), X(), E(null);
+			I(`Executed ${e} button${e === 1 ? "" : "s"}${t > 0 ? ` • ${t} failed` : ""}`, t > 0 ? "error" : "success"), X(), w(null);
 		} catch (e) {
-			F(e instanceof Error ? e.message : "Failed to execute buttons", "error");
+			I(e instanceof Error ? e.message : "Failed to execute buttons", "error");
 		} finally {
-			O(null);
+			E(null);
 		}
 	}, [
 		U,
 		J,
+		L,
 		I,
-		F,
 		X
-	]), nn = s(async () => {
+	]), sn = s(async () => {
 		if (U.length !== 0) {
-			O("deleteButton");
+			E("deleteButton");
 			try {
 				let e = await Promise.allSettled(U.map((e) => q({ variables: { id: e.id } }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.length - t;
-				F(`Deleted ${t} button${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`, n > 0 ? "error" : "success"), X(), E(null), await B();
+				I(`Deleted ${t} button${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`, n > 0 ? "error" : "success"), X(), w(null), await Tt();
 			} catch (e) {
-				F(e instanceof Error ? e.message : "Failed to delete buttons", "error");
+				I(e instanceof Error ? e.message : "Failed to delete buttons", "error");
 			} finally {
-				O(null);
+				E(null);
 			}
 		}
 	}, [
 		U,
 		q,
-		F,
+		I,
 		X,
-		B
+		Tt
 	]);
-	if (Ge) return /* @__PURE__ */ l(d, { children: /* @__PURE__ */ l(a, { message: "Loading permissions..." }) });
-	if (p && (p.permissionStrings?.length ?? 0) > 0 && !Ke) return /* @__PURE__ */ l(d, { children: /* @__PURE__ */ l(Ue, {}) });
-	if (vt) return /* @__PURE__ */ l(d, { children: /* @__PURE__ */ l(a, { message: "Loading Vibe Decks..." }) });
-	if (yt) return /* @__PURE__ */ l(d, { children: /* @__PURE__ */ l(he, {
-		message: yt.message,
-		onRetry: () => L()
+	if (qe) return /* @__PURE__ */ l(d, { children: /* @__PURE__ */ l(he, { message: "Loading permissions..." }) });
+	if (p && (p.permissionStrings?.length ?? 0) > 0 && !Je) return /* @__PURE__ */ l(d, { children: /* @__PURE__ */ l(Ge, {}) });
+	if (xt) return /* @__PURE__ */ l(d, { children: /* @__PURE__ */ l(he, { message: "Loading Vibe Decks..." }) });
+	if (St) return /* @__PURE__ */ l(d, { children: /* @__PURE__ */ l(ge, {
+		message: St.message,
+		onRetry: () => R()
 	}) });
-	let Q = b.type === "editButton" ? V?.buttons?.find((e) => e.id === b.buttonId) : null, $ = b.type === "editDeck" ? R.find((e) => e.id === b.deckId) : null;
+	let Q = y.type === "editButton" ? V?.buttons?.find((e) => e.id === y.buttonId) : null, $ = y.type === "editDeck" ? z.find((e) => e.id === y.deckId) : null;
 	return /* @__PURE__ */ u(d, {
 		className: "p-4 sm:p-6 space-y-6",
 		children: [
@@ -480,42 +483,44 @@ function We() {
 							className: "flex items-center rounded-lg border border-border-default bg-bg-secondary p-0.5",
 							children: [/* @__PURE__ */ u("button", {
 								type: "button",
-								onClick: () => Qe("preview"),
-								className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-all ${y ? "bg-action-primary-bg text-action-primary-text shadow-sm" : "text-text-tertiary hover:text-text-primary"}`,
-								title: "Preview mode — execute only",
-								children: [/* @__PURE__ */ l(Pe, { size: 14 }), "Preview"]
+								onClick: () => tt("preview"),
+								className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-all ${v ? "bg-action-primary-bg text-action-primary-text shadow-sm" : "text-text-tertiary hover:text-text-primary"}`,
+								title: v ? "Preview mode — execute only" : "Switch to Preview mode",
+								"aria-pressed": v,
+								children: [/* @__PURE__ */ l(Ie, { size: 14 }), "Preview"]
 							}), /* @__PURE__ */ u("button", {
 								type: "button",
-								onClick: () => Qe("edit"),
-								className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-all ${y ? "text-text-tertiary hover:text-text-primary" : "bg-action-primary-bg text-action-primary-text shadow-sm"}`,
-								title: "Edit mode — full editing",
-								children: [/* @__PURE__ */ l(Fe, { size: 14 }), "Edit"]
+								onClick: () => tt("edit"),
+								className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-all ${v ? "text-text-tertiary hover:text-text-primary" : "bg-action-primary-bg text-action-primary-text shadow-sm"}`,
+								title: v ? "Switch to Edit mode" : "Edit mode — full editing",
+								"aria-pressed": !v,
+								children: [/* @__PURE__ */ l(Le, { size: 14 }), "Edit"]
 							})]
 						}),
-						z && V && /* @__PURE__ */ l("button", {
+						B && V && /* @__PURE__ */ l("button", {
 							type: "button",
-							onClick: () => x({
+							onClick: () => b({
 								type: "shareDeck",
-								deckId: z,
+								deckId: B,
 								deckName: V.name
 							}),
 							className: "p-2 rounded-lg hover:bg-bg-tertiary text-text-tertiary hover:text-text-primary transition-colors",
 							title: "Share deck",
-							children: /* @__PURE__ */ l(Re, { size: 16 })
+							children: /* @__PURE__ */ l(Be, { size: 16 })
 						}),
 						/* @__PURE__ */ l("button", {
 							type: "button",
 							onClick: () => {
-								L(), z && B();
+								R(), B && Tt();
 							},
 							className: "p-2 rounded-lg hover:bg-bg-tertiary text-text-tertiary hover:text-text-primary transition-colors",
 							title: "Refresh",
-							children: /* @__PURE__ */ l(Le, { size: 16 })
+							children: /* @__PURE__ */ l(ze, { size: 16 })
 						})
 					]
 				})
 			}),
-			!y && R.length > 0 && /* @__PURE__ */ l("div", {
+			!v && z.length > 0 && /* @__PURE__ */ l("div", {
 				className: "rounded-lg border border-border-default bg-bg-surface p-4",
 				children: /* @__PURE__ */ u("div", {
 					className: "flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between",
@@ -523,16 +528,16 @@ function We() {
 						className: "flex flex-wrap items-center gap-3",
 						children: [/* @__PURE__ */ u("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ l(Se, {
-								checked: St,
-								indeterminate: Ct,
-								onChange: Bt,
+							children: [/* @__PURE__ */ l(we, {
+								checked: Et,
+								indeterminate: Dt,
+								onChange: Wt,
 								ariaLabel: "Select all vibe decks"
 							}), /* @__PURE__ */ l("span", {
 								className: "text-sm font-medium text-text-primary",
 								children: "Select all decks"
 							})]
-						}), S.size > 0 && /* @__PURE__ */ l("button", {
+						}), x.size > 0 && /* @__PURE__ */ l("button", {
 							type: "button",
 							onClick: Y,
 							className: "text-sm text-text-secondary hover:text-text-primary",
@@ -543,27 +548,27 @@ function We() {
 						children: [
 							/* @__PURE__ */ u("span", {
 								className: "rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary",
-								children: [S.size, " selected"]
+								children: [x.size, " selected"]
 							}),
 							/* @__PURE__ */ l("button", {
 								type: "button",
-								onClick: Qt,
-								disabled: H.length !== 1 || H[0]?.isDefault || D !== null,
+								onClick: nn,
+								disabled: H.length !== 1 || H[0]?.isDefault || T !== null,
 								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-subtle disabled:cursor-not-allowed disabled:opacity-50",
 								children: /* @__PURE__ */ u("span", {
 									className: "inline-flex items-center gap-2",
-									children: [/* @__PURE__ */ l(ze, { size: 14 }), "Set Selected Default"]
+									children: [/* @__PURE__ */ l(Ve, { size: 14 }), "Set Selected Default"]
 								})
 							}),
 							/* @__PURE__ */ l("button", {
 								type: "button",
-								onClick: $t,
-								disabled: H.length === 0 || D !== null,
+								onClick: rn,
+								disabled: H.length === 0 || T !== null,
 								className: "rounded-md border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-50",
 								children: /* @__PURE__ */ u("span", {
 									className: "inline-flex items-center gap-2",
 									children: [
-										/* @__PURE__ */ l(Ne, { size: 14 }),
+										/* @__PURE__ */ l(Fe, { size: 14 }),
 										"Duplicate Selected",
 										H.length > 0 ? ` (${H.length})` : ""
 									]
@@ -571,13 +576,13 @@ function We() {
 							}),
 							/* @__PURE__ */ l("button", {
 								type: "button",
-								onClick: () => at("delete"),
-								disabled: H.length === 0 || D !== null,
+								onClick: () => lt("delete"),
+								disabled: H.length === 0 || T !== null,
 								className: "rounded-md border border-status-error-border 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: /* @__PURE__ */ u("span", {
 									className: "inline-flex items-center gap-2",
 									children: [
-										/* @__PURE__ */ l(Be, { size: 14 }),
+										/* @__PURE__ */ l(He, { size: 14 }),
 										"Delete Selected",
 										H.length > 0 ? ` (${H.length})` : ""
 									]
@@ -587,64 +592,64 @@ function We() {
 					})]
 				})
 			}),
-			/* @__PURE__ */ l(we, {
-				decks: R.map((e) => ({
+			/* @__PURE__ */ l(Ee, {
+				decks: z.map((e) => ({
 					id: e.id,
 					name: e.name,
 					icon: e.icon || null,
 					colorTheme: e.colorTheme || null,
 					isDefault: e.isDefault
 				})),
-				activeDeckId: z,
-				selectedDeckIds: S,
-				onSelectDeck: (e) => v(e),
-				onToggleSelectDeck: zt,
-				onCreateDeck: () => x({ type: "createDeck" }),
-				onSetDefault: Zt,
-				onDuplicate: (e) => Xt(e),
+				activeDeckId: B,
+				selectedDeckIds: x,
+				onSelectDeck: (e) => _(e),
+				onToggleSelectDeck: Ut,
+				onCreateDeck: () => b({ type: "createDeck" }),
+				onSetDefault: tn,
+				onDuplicate: (e) => en(e),
 				onDelete: (e) => {
-					x({
+					b({
 						type: "confirmDelete",
 						target: "deck",
 						id: e,
-						name: R.find((t) => t.id === e)?.name || "this deck"
+						name: z.find((t) => t.id === e)?.name || "this deck"
 					});
 				},
-				onEdit: (e) => x({
+				onEdit: (e) => b({
 					type: "editDeck",
 					deckId: e
 				}),
 				onShare: (e) => {
-					let t = R.find((t) => t.id === e);
-					t && x({
+					let t = z.find((t) => t.id === e);
+					t && b({
 						type: "shareDeck",
 						deckId: e,
 						deckName: t.name
 					});
 				},
-				canCreate: g,
-				canUpdate: et,
-				canDelete: tt
+				canCreate: Ye,
+				canUpdate: rt,
+				canDelete: it
 			}),
-			/* @__PURE__ */ u(He, {
+			/* @__PURE__ */ u(We, {
 				mode: "wait",
-				children: [!V && !xt && R.length === 0 && /* @__PURE__ */ l(be, {
+				children: [!V && !wt && z.length === 0 && /* @__PURE__ */ l(xe, {
 					title: "No Vibe Decks yet",
 					description: "Create your first Vibe Deck to start organizing your commands and webhooks",
 					action: /* @__PURE__ */ u("div", {
 						className: "flex items-center gap-2",
-						children: [g && /* @__PURE__ */ l("button", {
+						children: [Ye && /* @__PURE__ */ l("button", {
 							type: "button",
-							onClick: () => x({ type: "createDeck" }),
+							onClick: () => b({ type: "createDeck" }),
 							className: "px-4 py-2 rounded-lg bg-action-primary-bg text-action-primary-text hover:opacity-90 text-sm font-medium",
 							children: "Create Vibe Deck"
-						}), /* @__PURE__ */ l(xe, { prompt: "What is a VibeDeck and how do I use it to organise controls?" })]
+						}), /* @__PURE__ */ l(Ce, { prompt: "What is a VibeDeck and how do I use it to organise controls?" })]
 					})
-				}), xt && /* @__PURE__ */ l(a, { message: "Loading deck..." })]
+				}), wt && /* @__PURE__ */ l(he, { message: "Loading deck..." })]
 			}),
 			V && /* @__PURE__ */ u("div", {
 				className: "space-y-4",
-				children: [!y && (V.buttons?.length ?? 0) > 0 && /* @__PURE__ */ l("div", {
+				children: [!v && (V.buttons?.length ?? 0) > 0 && /* @__PURE__ */ l("div", {
 					className: "rounded-lg border border-border-default bg-bg-surface p-4",
 					children: /* @__PURE__ */ u("div", {
 						className: "flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between",
@@ -652,16 +657,16 @@ function We() {
 							className: "flex flex-wrap items-center gap-3",
 							children: [/* @__PURE__ */ u("div", {
 								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ l(Se, {
-									checked: wt,
-									indeterminate: Tt,
-									onChange: Vt,
+								children: [/* @__PURE__ */ l(we, {
+									checked: Ot,
+									indeterminate: kt,
+									onChange: Gt,
 									ariaLabel: "Select all buttons in active deck"
 								}), /* @__PURE__ */ l("span", {
 									className: "text-sm font-medium text-text-primary",
 									children: "Select all buttons in this deck"
 								})]
-							}), w.size > 0 && /* @__PURE__ */ l("button", {
+							}), S.size > 0 && /* @__PURE__ */ l("button", {
 								type: "button",
 								onClick: X,
 								className: "text-sm text-text-secondary hover:text-text-primary",
@@ -672,17 +677,17 @@ function We() {
 							children: [
 								/* @__PURE__ */ u("span", {
 									className: "rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary",
-									children: [w.size, " selected"]
+									children: [S.size, " selected"]
 								}),
 								/* @__PURE__ */ l("button", {
 									type: "button",
-									onClick: () => E("execute"),
-									disabled: U.length === 0 || D !== null,
+									onClick: () => w("execute"),
+									disabled: U.length === 0 || T !== null,
 									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: /* @__PURE__ */ u("span", {
 										className: "inline-flex items-center gap-2",
 										children: [
-											/* @__PURE__ */ l(Ie, { size: 14 }),
+											/* @__PURE__ */ l(Re, { size: 14 }),
 											"Execute Selected",
 											U.length > 0 ? ` (${U.length})` : ""
 										]
@@ -690,13 +695,13 @@ function We() {
 								}),
 								/* @__PURE__ */ l("button", {
 									type: "button",
-									onClick: () => E("delete"),
-									disabled: U.length === 0 || D !== null,
+									onClick: () => w("delete"),
+									disabled: U.length === 0 || T !== null,
 									className: "rounded-md border border-status-error-border 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: /* @__PURE__ */ u("span", {
 										className: "inline-flex items-center gap-2",
 										children: [
-											/* @__PURE__ */ l(Be, { size: 14 }),
+											/* @__PURE__ */ l(He, { size: 14 }),
 											"Delete Selected",
 											U.length > 0 ? ` (${U.length})` : ""
 										]
@@ -705,76 +710,100 @@ function We() {
 							]
 						})]
 					})
-				}), /* @__PURE__ */ l(Ce, {
-					gridColumns: V.gridColumns,
-					gridRows: V.gridRows,
-					buttons: (V.buttons || []).map((e) => ({
-						id: e.id,
-						label: e.label,
-						icon: e.icon || null,
-						color: e.color || null,
-						category: e.category || null,
-						confirmationRequired: e.confirmationRequired,
-						keyboardShortcut: e.keyboardShortcut || null,
-						actionId: e.actionId || null,
-						action: e.action ? {
-							id: e.action.id,
-							name: e.action.name,
-							displayName: e.action.displayName || null,
-							actionType: e.action.actionType,
-							command: e.action.command || null,
-							script: e.action.script || null,
-							webhookUrl: e.action.webhookUrl || null,
-							targetAgentId: e.action.targetAgentId || null
-						} : null,
-						row: e.row,
-						column: e.column,
-						rowSpan: e.rowSpan,
-						colSpan: e.colSpan
-					})),
-					onExecuteButton: Gt,
-					onEditButton: (e) => x({
-						type: "editButton",
-						buttonId: e
-					}),
-					onDeleteButton: (e) => {
-						let t = V.buttons?.find((t) => t.id === e);
-						x({
-							type: "confirmDelete",
-							target: "button",
-							id: e,
-							name: t?.label || "this button"
-						});
-					},
-					onDropButton: Yt,
-					onAddButton: (e, t) => x({
-						type: "createButton",
-						row: e,
-						column: t
-					}),
-					executingButtonId: nt,
-					canCreate: $e,
-					canUpdate: et,
-					canDelete: tt,
-					canExecute: Ye
+				}), /* @__PURE__ */ u("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ l(Te, {
+						gridColumns: V.gridColumns,
+						gridRows: V.gridRows,
+						buttons: (V.buttons || []).map((e) => ({
+							id: e.id,
+							label: e.label,
+							icon: e.icon || null,
+							color: e.color || null,
+							category: e.category || null,
+							confirmationRequired: e.confirmationRequired,
+							keyboardShortcut: e.keyboardShortcut || null,
+							actionId: e.actionId || null,
+							action: e.action ? {
+								id: e.action.id,
+								name: e.action.name,
+								displayName: e.action.displayName || null,
+								actionType: e.action.actionType,
+								command: e.action.command || null,
+								script: e.action.script || null,
+								webhookUrl: e.action.webhookUrl || null,
+								targetAgentId: e.action.targetAgentId || null
+							} : null,
+							row: e.row,
+							column: e.column,
+							rowSpan: e.rowSpan,
+							colSpan: e.colSpan
+						})),
+						onExecuteButton: Yt,
+						onEditButton: (e) => b({
+							type: "editButton",
+							buttonId: e
+						}),
+						onDeleteButton: (e) => {
+							let t = V.buttons?.find((t) => t.id === e);
+							b({
+								type: "confirmDelete",
+								target: "button",
+								id: e,
+								name: t?.label || "this button"
+							});
+						},
+						onDropButton: $t,
+						onAddButton: (e, t) => b({
+							type: "createButton",
+							row: e,
+							column: t
+						}),
+						executingButtonId: at,
+						canCreate: nt,
+						canUpdate: rt,
+						canDelete: it,
+						canExecute: Qe
+					}), (V.buttons?.length ?? 0) === 0 && v && /* @__PURE__ */ l("div", {
+						className: "absolute inset-0 flex items-center justify-center pointer-events-none",
+						children: /* @__PURE__ */ u("div", {
+							className: "bg-bg-elevated/90 backdrop-blur-md border border-border-default rounded-lg p-6 max-w-md pointer-events-auto shadow-xl text-center",
+							children: [
+								/* @__PURE__ */ l("h3", {
+									className: "text-lg font-semibold text-text-primary",
+									children: m("vibeDeck.emptyDeckTitle", "This deck is empty")
+								}),
+								/* @__PURE__ */ l("p", {
+									className: "text-sm text-text-secondary mt-2",
+									children: m("vibeDeck.emptyDeckDescription", "Switch to Edit mode to add buttons.")
+								}),
+								Xe && /* @__PURE__ */ l("button", {
+									type: "button",
+									onClick: () => tt("edit"),
+									className: "mt-4 inline-flex items-center gap-2 px-4 py-2 rounded-md bg-action-primary-bg text-action-primary-text text-sm font-medium hover:opacity-90 transition-opacity",
+									children: m("vibeDeck.editDeck", "Edit deck")
+								})
+							]
+						})
+					})]
 				})]
 			}),
-			ct.length > 0 && /* @__PURE__ */ l(Oe, {
-				entries: ct,
-				expanded: ut,
-				onToggleExpanded: () => dt((e) => !e),
-				onClear: () => lt([])
+			ft.length > 0 && /* @__PURE__ */ l(Ae, {
+				entries: ft,
+				expanded: pt,
+				onToggleExpanded: () => mt((e) => !e),
+				onClear: () => j([])
 			}),
-			/* @__PURE__ */ l(He, { children: st.length > 0 && /* @__PURE__ */ l("div", {
+			/* @__PURE__ */ l(We, { children: dt.length > 0 && /* @__PURE__ */ l("div", {
 				className: "fixed bottom-4 left-4 right-4 sm:left-auto sm:bottom-6 sm:right-6 z-50 flex flex-col gap-2 max-w-[calc(100vw-2rem)] sm:max-w-md",
-				children: st.slice(-3).map((e) => /* @__PURE__ */ u("div", {
+				children: dt.slice(-3).map((e) => /* @__PURE__ */ u("div", {
 					role: "button",
 					tabIndex: 0,
 					onKeyDown: (t) => {
-						(t.key === "Enter" || t.key === " ") && (t.preventDefault(), gt(e.id));
+						(t.key === "Enter" || t.key === " ") && (t.preventDefault(), yt(e.id));
 					},
 					className: `p-4 rounded-xl shadow-lg border cursor-pointer ${e.variant === "success" ? "bg-status-success-bg/10 border-status-success-border/30 text-status-success-text" : "bg-status-error-bg/10 border-status-error-border/30 text-status-error-text"}`,
-					onClick: () => gt(e.id),
+					onClick: () => yt(e.id),
 					children: [/* @__PURE__ */ l("div", {
 						className: "font-medium text-sm",
 						children: e.message
@@ -784,20 +813,28 @@ function We() {
 					})]
 				}, e.id))
 			}) }),
-			b.type === "createDeck" && /* @__PURE__ */ l(Te, {
+			y.type === "createDeck" && /* @__PURE__ */ l(De, {
 				title: "Create Vibe Deck",
-				onSubmit: Ht,
-				onCancel: () => x({ type: "none" }),
-				isLoading: kt,
-				extraSection: /* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("h3", {
-					className: "text-sm font-medium text-text-secondary mb-2",
-					children: m("vibeDeck.tags", "Tags")
-				}), /* @__PURE__ */ l(ge, {
-					entityType: "VIBECONTROLS_VIBEDECK",
-					onDraftChange: At
-				})] })
+				onSubmit: Kt,
+				onCancel: () => {
+					b({ type: "none" }), A(a);
+				},
+				isLoading: Nt,
+				extraSection: /* @__PURE__ */ u("div", {
+					className: "space-y-4",
+					children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("h3", {
+						className: "text-sm font-medium text-text-secondary mb-2",
+						children: m("vibeDeck.tags", "Tags")
+					}), /* @__PURE__ */ l(_e, {
+						entityType: "VIBECONTROLS_VIBEDECK",
+						onDraftChange: Pt
+					})] }), /* @__PURE__ */ l(Se, {
+						value: k,
+						onChange: A
+					})]
+				})
 			}),
-			b.type === "editDeck" && $ && /* @__PURE__ */ l(Te, {
+			y.type === "editDeck" && $ && /* @__PURE__ */ l(De, {
 				title: "Edit Vibe Deck",
 				initialData: {
 					name: $.name,
@@ -806,29 +843,29 @@ function We() {
 					gridColumns: $.gridColumns,
 					gridRows: $.gridRows
 				},
-				onSubmit: Ut,
-				onCancel: () => x({ type: "none" }),
-				isLoading: Nt,
+				onSubmit: qt,
+				onCancel: () => b({ type: "none" }),
+				isLoading: Lt,
 				extraSection: /* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("h3", {
 					className: "text-sm font-medium text-text-secondary mb-2",
 					children: m("vibeDeck.tags", "Tags")
-				}), /* @__PURE__ */ l(ge, {
+				}), /* @__PURE__ */ l(_e, {
 					entityType: "VIBECONTROLS_VIBEDECK",
 					entityId: $.id
 				})] })
 			}),
-			b.type === "createButton" && /* @__PURE__ */ l(Ee, {
+			y.type === "createButton" && /* @__PURE__ */ l(Oe, {
 				title: "Add Button",
-				agents: Dt,
-				onSubmit: qt,
-				onCancel: () => x({ type: "none" }),
-				isLoading: Ft,
+				agents: jt,
+				onSubmit: Zt,
+				onCancel: () => b({ type: "none" }),
+				isLoading: zt,
 				gridColumns: V?.gridColumns,
 				gridRows: V?.gridRows,
-				buttonRow: b.row,
-				buttonColumn: b.column
+				buttonRow: y.row,
+				buttonColumn: y.column
 			}),
-			b.type === "editButton" && Q && /* @__PURE__ */ l(Ee, {
+			y.type === "editButton" && Q && /* @__PURE__ */ l(Oe, {
 				title: "Edit Button",
 				initialData: {
 					label: Q.label,
@@ -840,81 +877,81 @@ function We() {
 					rowSpan: Q.rowSpan,
 					colSpan: Q.colSpan
 				},
-				agents: Dt,
-				onSubmit: Jt,
-				onCancel: () => x({ type: "none" }),
-				isLoading: Lt,
+				agents: jt,
+				onSubmit: Qt,
+				onCancel: () => b({ type: "none" }),
+				isLoading: Vt,
 				gridColumns: V?.gridColumns,
 				gridRows: V?.gridRows,
 				buttonRow: Q.row,
 				buttonColumn: Q.column
 			}),
-			b.type === "confirmDelete" && /* @__PURE__ */ l(e, {
+			y.type === "confirmDelete" && /* @__PURE__ */ l(e, {
 				isOpen: !0,
-				title: `Delete ${b.target === "deck" ? "Vibe Deck" : "Button"}`,
-				message: `Are you sure you want to delete "${b.name}"?${b.target === "deck" ? " All buttons in this deck will also be deleted." : ""}`,
+				title: `Delete ${y.target === "deck" ? "Vibe Deck" : "Button"}`,
+				message: `Are you sure you want to delete "${y.name}"?${y.target === "deck" ? " All buttons in this deck will also be deleted." : ""}`,
 				confirmLabel: "Delete",
 				variant: "danger",
-				onConfirm: Wt,
-				onClose: () => x({ type: "none" })
+				onConfirm: Jt,
+				onClose: () => b({ type: "none" })
 			}),
-			b.type === "confirmExecute" && /* @__PURE__ */ l(e, {
+			y.type === "confirmExecute" && /* @__PURE__ */ l(e, {
 				isOpen: !0,
-				title: `Execute: ${b.label}`,
-				message: `Are you sure you want to execute this action?\n\n${b.detail}`,
+				title: `Execute: ${y.label}`,
+				message: `Are you sure you want to execute this action?\n\n${y.detail}`,
 				confirmLabel: "Execute",
 				variant: "warning",
-				onConfirm: Kt,
-				onClose: () => x({ type: "none" })
+				onConfirm: Xt,
+				onClose: () => b({ type: "none" })
 			}),
 			/* @__PURE__ */ l(e, {
-				isOpen: it === "delete",
+				isOpen: ct === "delete",
 				title: "Delete Vibe Decks",
 				message: `Are you sure you want to delete ${H.length} selected deck${H.length === 1 ? "" : "s"}? All buttons in those decks will also be deleted.`,
 				confirmLabel: "Delete Decks",
 				variant: "danger",
-				onConfirm: en,
-				onClose: () => at(null),
-				isLoading: D === "deleteDeck"
+				onConfirm: an,
+				onClose: () => lt(null),
+				isLoading: T === "deleteDeck"
 			}),
 			/* @__PURE__ */ l(e, {
-				isOpen: ot === "execute",
+				isOpen: ut === "execute",
 				title: "Execute Vibe Deck Buttons",
 				message: `Execute ${U.length} selected button${U.length === 1 ? "" : "s"}? This may trigger commands, scripts, or webhooks immediately.`,
 				confirmLabel: "Execute Buttons",
 				variant: "warning",
-				onConfirm: tn,
-				onClose: () => E(null),
-				isLoading: D === "executeButton"
+				onConfirm: on,
+				onClose: () => w(null),
+				isLoading: T === "executeButton"
 			}),
 			/* @__PURE__ */ l(e, {
-				isOpen: ot === "delete",
+				isOpen: ut === "delete",
 				title: "Delete Vibe Deck Buttons",
 				message: `Delete ${U.length} selected button${U.length === 1 ? "" : "s"}? This cannot be undone.`,
 				confirmLabel: "Delete Buttons",
 				variant: "danger",
-				onConfirm: nn,
-				onClose: () => E(null),
-				isLoading: D === "deleteButton"
+				onConfirm: sn,
+				onClose: () => w(null),
+				isLoading: T === "deleteButton"
 			}),
-			b.type === "shareDeck" && /* @__PURE__ */ l(De, {
-				vibeDeckId: b.deckId,
-				vibeDeckName: b.deckName,
-				onClose: () => x({ type: "none" })
+			y.type === "shareDeck" && /* @__PURE__ */ l(ke, {
+				vibeDeckId: y.deckId,
+				vibeDeckName: y.deckName,
+				onClose: () => b({ type: "none" })
 			}),
 			/* @__PURE__ */ l(t, {
-				isOpen: mt !== null,
-				onClose: () => j(null),
+				isOpen: M !== null,
+				onClose: () => _t(null),
 				onConfirm: () => {
-					j(null), We("/billing");
+					_t(null), Ke("/billing");
 				},
-				title: mt?.title || "Quota Reached",
-				message: mt?.message || "Upgrade your plan to continue."
+				title: M?.title || "Quota Reached",
+				message: M?.message || "Upgrade your plan to continue."
 			})
 		]
 	});
 }
 //#endregion
-export { We as VibeDeckPage };
+export { Ke as VibeDeckPage };
 
 //# sourceMappingURL=VibeDeckPage.js.map