@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/pages/VibeDeckPage.js

@@ -0,0 +1,884 @@
+import { useCreateVibeDeckButtonMutation as e, useCreateVibeDeckMutation as t, useDeleteVibeDeckButtonMutation as n, useDeleteVibeDeckMutation as r, useDuplicateVibeDeckMutation as i, useExecuteVibeDeckButtonMutation as ee, useGetVibeDeckQuery as te, useListAgentsQuery as ne, useListVibeDecksQuery as re, useMoveVibeDeckButtonMutation as ie, useSetDefaultVibeDeckMutation as ae, useUpdateVibeDeckButtonMutation as oe, useUpdateVibeDeckMutation as se } from "../generated/wspace-operations.js";
+import { useVibeNavigate as ce } from "../providers/VibeControlsProvider.js";
+import { useVibeControlsStore as le } from "../store/vibeControlsStore.js";
+import { PageHeader as ue } from "../components/shared/PageHeader.js";
+import { LoadingState as de } from "../components/shared/LoadingState.js";
+import { ErrorState as fe } from "../components/shared/ErrorState.js";
+import { ConfirmDialog as a } from "../components/shared/ConfirmDialog.js";
+import { QuotaExhaustedDialog as pe } from "../components/shared/QuotaExhaustedDialog.js";
+import { isQuotaExhaustedError as o } from "../utils/quotaUtils.js";
+import { isNative as me, nativeNotify as he } from "../utils/nativeBridge.js";
+import { EmptyState as ge } from "../components/shared/EmptyState.js";
+import { GetHelpButton as _e } from "../components/shared/GetHelpButton.js";
+import { SelectionCheckbox as ve } from "../components/shared/SelectionCheckbox.js";
+import "../components/shared/index.js";
+import { VIBE_PERMISSIONS as s } from "../constants/permissions.js";
+import { VibeDeckGrid as ye } from "../components/vibedeck/VibeDeckGrid.js";
+import { VibeDeckSwitcher as be } from "../components/vibedeck/VibeDeckSwitcher.js";
+import { VibeDeckForm as xe } from "../components/vibedeck/VibeDeckForm.js";
+import { VibeDeckButtonForm as Se } from "../components/vibedeck/VibeDeckButtonForm.js";
+import { VibeDeckShareDialog as Ce } from "../components/vibedeck/VibeDeckShareDialog.js";
+import { VibeDeckExecutionLog as we } from "../components/vibedeck/VibeDeckExecutionLog.js";
+import "../components/vibedeck/index.js";
+import { useCallback as c, useEffect as l, useMemo as u, useRef as Te, useState as d } from "react";
+import { useI18n as Ee } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Copy as De, Eye as Oe, Pencil as ke, Play as Ae, RefreshCw as je, Share2 as Me, Star as Ne, Trash2 as Pe } from "lucide-react";
+import { usePermissions as Fe } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AnimatePresence as Ie } from "framer-motion";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { MotionPage as m } from "@burdenoff/fe-libs/shared/motion";
+import { AccessDenied as Le } from "@burdenoff/fe-libs/shared/components";
+//#region src/pages/VibeDeckPage.tsx
+function Re() {
+	let Re = ce(), { hasPermission: h, isLoading: ze, permissions: g } = Fe(), Be = ((e) => (t, n) => {
+		let r = e.t(t);
+		return r === t ? n : r;
+	})(Ee()), _ = (Array.isArray(g) ? g : g?.permissionStrings)?.some?.((e) => e.startsWith("vibedeck:")), Ve = _ ? h(s.VIBEDECK_LIST) : !0, He = _ ? h(s.VIBEDECK_CREATE) : !0, Ue = _ ? h(s.VIBEDECK_UPDATE) : !0, We = _ ? h(s.VIBEDECK_DELETE) : !0, Ge = _ ? h(s.VIBEDECK_EXECUTE) : !0, Ke = ze, { activeVibeDeckId: v, setActiveVibeDeckId: y, vibeDeckMode: qe, setVibeDeckMode: Je } = le(), b = qe === "preview", Ye = b ? !1 : He, Xe = b ? !1 : Ue, Ze = b ? !1 : We, [x, S] = d({ type: "none" }), [Qe, $e] = d(null), [C, w] = d(/* @__PURE__ */ new Set()), [T, E] = d(/* @__PURE__ */ new Set()), [et, D] = d(null), [tt, O] = d(null), [k, A] = d(null), [nt, j] = d([]), M = Te(/* @__PURE__ */ new Map()), [rt, it] = d([]), [at, ot] = d(!0), [st, ct] = d(/* @__PURE__ */ new Map()), [lt, ut] = d(null), N = Te(/* @__PURE__ */ new Map());
+	l(() => {
+		let e = N.current;
+		return () => {
+			for (let t of e.values()) clearTimeout(t);
+		};
+	}, []);
+	let dt = c((e) => {
+		let t = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`, n = {
+			...e,
+			id: t
+		};
+		return it((e) => [...e.slice(-49), n]), t;
+	}, []), P = c((e, t) => {
+		it((n) => n.map((n) => n.id === e ? {
+			...n,
+			...t
+		} : n));
+	}, []), F = c((e, t) => {
+		if (ct((n) => {
+			let r = new Map(n);
+			return r.set(e, t), r;
+		}), t === "success" || t === "error") {
+			let n = setTimeout(() => {
+				ct((n) => {
+					let r = new Map(n);
+					return r.get(e) === t && r.delete(e), r;
+				}), N.current.delete(e);
+			}, 3e3), r = N.current.get(e);
+			r && clearTimeout(r), N.current.set(e, n);
+		}
+	}, []);
+	l(() => {
+		let e = M.current;
+		return () => {
+			for (let t of e.values()) clearTimeout(t);
+		};
+	}, []);
+	let I = c((e, t, n, r) => {
+		let i = Date.now() + Math.random();
+		j((r) => [...r, {
+			message: e,
+			variant: t,
+			detail: n,
+			id: i
+		}]);
+		let ee = setTimeout(() => {
+			j((e) => e.filter((e) => e.id !== i)), M.current.delete(i);
+		}, r ?? (t === "success" ? 1e4 : 3e4));
+		M.current.set(i, ee);
+	}, []), ft = c((e) => {
+		j((t) => t.filter((t) => t.id !== e));
+		let t = M.current.get(e);
+		t && (clearTimeout(t), M.current.delete(e));
+	}, []), L = c((e, t) => {
+		ut({
+			title: e,
+			message: t
+		});
+	}, []), { data: pt, loading: mt, error: ht, refetch: R } = re({
+		variables: { pagination: { limit: 50 } },
+		skip: Ke
+	}), z = u(() => pt?.vibeDecks?.items || [], [pt]), B = v || z.find((e) => e.isDefault)?.id || z[0]?.id || null, { data: gt, loading: _t, refetch: vt } = te({
+		variables: { id: B },
+		skip: !B || Ke
+	}), V = gt?.vibeDeck, H = u(() => z.filter((e) => C.has(e.id)), [z, C]), U = u(() => V?.buttons?.filter((e) => T.has(e.id)) ?? [], [V?.buttons, T]), yt = z.length > 0 && z.every((e) => C.has(e.id)), bt = z.some((e) => C.has(e.id)) && !yt, xt = (V?.buttons?.length ?? 0) > 0 && (V?.buttons ?? []).every((e) => T.has(e.id)), St = (V?.buttons ?? []).some((e) => T.has(e.id)) && !xt, { data: Ct } = ne({
+		variables: { pagination: { limit: 100 } },
+		fetchPolicy: "cache-and-network",
+		skip: Ke
+	}), wt = (Ct?.vibecontrolsAgents ?? []).map((e) => ({
+		id: e.id,
+		name: e.name,
+		isActive: e.isActive
+	})), [Tt, { loading: Et }] = t({ refetchQueries: ["ListVibeDecks"] }), [Dt, { loading: Ot }] = se({ refetchQueries: ["ListVibeDecks", "GetVibeDeck"] }), [W] = r({ refetchQueries: ["ListVibeDecks"] }), [G] = ae({ refetchQueries: ["ListVibeDecks", "GetVibeDeck"] }), [K] = i({ refetchQueries: ["ListVibeDecks"] }), [kt, { loading: At }] = e({ refetchQueries: ["GetVibeDeck"] }), [jt, { loading: Mt }] = oe({ refetchQueries: ["GetVibeDeck"] }), [q] = n({ refetchQueries: ["GetVibeDeck"] }), [Nt] = ie({ refetchQueries: ["GetVibeDeck"] }), [J] = ee();
+	l(() => {
+		E(/* @__PURE__ */ new Set());
+	}, [B]);
+	let Pt = c((e, t) => {
+		w((n) => {
+			let r = new Set(n);
+			return t ? r.add(e) : r.delete(e), r;
+		});
+	}, []), Ft = c((e) => {
+		w((t) => {
+			let n = new Set(t);
+			return z.forEach((t) => {
+				e ? n.add(t.id) : n.delete(t.id);
+			}), n;
+		});
+	}, [z]), Y = c(() => {
+		w(/* @__PURE__ */ new Set());
+	}, []);
+	c((e, t) => {
+		E((n) => {
+			let r = new Set(n);
+			return t ? r.add(e) : r.delete(e), r;
+		});
+	}, []);
+	let It = c((e) => {
+		E((t) => {
+			let n = new Set(t);
+			return (V?.buttons ?? []).forEach((t) => {
+				e ? n.add(t.id) : n.delete(t.id);
+			}), n;
+		});
+	}, [V?.buttons]), X = c(() => {
+		E(/* @__PURE__ */ new Set());
+	}, []), Lt = c(async (e) => {
+		try {
+			await Tt({ variables: { input: {
+				name: e.name,
+				description: e.description || null,
+				colorTheme: e.colorTheme || null,
+				gridColumns: e.gridColumns,
+				gridRows: e.gridRows
+			} } }), S({ type: "none" }), I("Deck created", "success");
+		} catch (e) {
+			if (o(e)) {
+				S({ type: "none" }), L("Vibe Deck Quota Reached", "You have reached the Vibe Deck limit for your current plan. Upgrade to create more decks.");
+				return;
+			}
+			I(e instanceof Error ? e.message : "Failed to create deck", "error");
+		}
+	}, [
+		Tt,
+		L,
+		I
+	]), Rt = c(async (e) => {
+		if (x.type === "editDeck") try {
+			await Dt({ variables: {
+				id: x.deckId,
+				input: {
+					name: e.name,
+					description: e.description || null,
+					colorTheme: e.colorTheme || null,
+					gridColumns: e.gridColumns,
+					gridRows: e.gridRows
+				}
+			} }), S({ type: "none" }), I("Deck updated", "success");
+		} catch (e) {
+			I(e instanceof Error ? e.message : "Failed to update deck", "error");
+		}
+	}, [
+		Dt,
+		x,
+		I
+	]), zt = c(async () => {
+		if (x.type === "confirmDelete") try {
+			x.target === "deck" ? (await W({ variables: { id: x.id } }), v === x.id && y(null), I("Deck deleted", "success")) : (await q({ variables: { id: x.id } }), I("Button deleted", "success")), S({ type: "none" }), me() && he("success");
+		} catch (e) {
+			I(e instanceof Error ? e.message : "Failed to delete", "error"), me() && he("error");
+		}
+	}, [
+		x,
+		W,
+		q,
+		v,
+		y,
+		I
+	]), Z = c(async (e) => {
+		let t = V?.buttons?.find((t) => t.id === e);
+		if (!t || !t.action) return;
+		let n = t.action, r = dt({
+			buttonId: e,
+			buttonLabel: t.label,
+			actionType: n.actionType,
+			command: n.actionType === "WEBHOOK" ? `POST ${n.webhookUrl || ""}` : n.command || void 0,
+			status: "running",
+			startedAt: /* @__PURE__ */ new Date()
+		});
+		$e(e), F(e, "executing");
+		try {
+			let t = (await J({ variables: { id: e } })).data?.executeVibeDeckButton;
+			if (t) {
+				let n = t.status === "success";
+				F(e, n ? "success" : "error"), P(r, {
+					status: n ? "success" : "error",
+					output: t.output,
+					exitCode: t.exitCode,
+					webhookStatusCode: t.webhookStatusCode,
+					completedAt: /* @__PURE__ */ new Date()
+				});
+			}
+		} catch (t) {
+			if (o(t)) {
+				F(e, "error"), P(r, {
+					status: "error",
+					error: "Usage quota exhausted",
+					completedAt: /* @__PURE__ */ new Date()
+				}), L("Execution Quota Reached", "You have used the execution quota for your current plan. Upgrade to continue running Vibe Deck actions.");
+				return;
+			}
+			let n = t instanceof Error ? t.message : "Execution failed";
+			F(e, "error"), P(r, {
+				status: "error",
+				error: n,
+				completedAt: /* @__PURE__ */ new Date()
+			});
+		} finally {
+			$e(null);
+		}
+	}, [
+		V,
+		J,
+		dt,
+		P,
+		F,
+		L
+	]), Bt = c(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 || "";
+				S({
+					type: "confirmExecute",
+					buttonId: e,
+					label: t.label,
+					detail: r
+				});
+				return;
+			}
+			await Z(e);
+		}
+	}, [V, Z]), Vt = c(async () => {
+		if (x.type !== "confirmExecute") return;
+		let e = x.buttonId;
+		S({ type: "none" }), await Z(e);
+	}, [x, Z]), Ht = c(async (e) => {
+		if (!(x.type !== "createButton" || !B)) try {
+			await kt({ variables: { input: {
+				vibeDeckId: B,
+				label: e.label,
+				actionId: e.actionId,
+				row: x.row,
+				column: x.column,
+				rowSpan: e.rowSpan,
+				colSpan: e.colSpan,
+				color: e.color || null,
+				category: e.category || null,
+				keyboardShortcut: e.keyboardShortcut || null,
+				confirmationRequired: e.confirmationRequired
+			} } }), S({ type: "none" }), I("Button created", "success");
+		} catch (e) {
+			I(e instanceof Error ? e.message : "Failed to create button", "error");
+		}
+	}, [
+		x,
+		kt,
+		B,
+		I
+	]), Ut = c(async (e) => {
+		if (x.type === "editButton") try {
+			await jt({ variables: {
+				id: x.buttonId,
+				input: {
+					label: e.label,
+					actionId: e.actionId,
+					color: e.color || null,
+					category: e.category || null,
+					keyboardShortcut: e.keyboardShortcut || null,
+					confirmationRequired: e.confirmationRequired,
+					rowSpan: e.rowSpan,
+					colSpan: e.colSpan
+				}
+			} }), S({ type: "none" }), I("Button updated", "success");
+		} catch (e) {
+			I(e instanceof Error ? e.message : "Failed to update button", "error");
+		}
+	}, [
+		x,
+		jt,
+		I
+	]), Wt = c(async (e, t, n) => {
+		try {
+			await Nt({ variables: {
+				id: e,
+				input: {
+					row: t,
+					column: n
+				}
+			} });
+		} catch (e) {
+			I(e instanceof Error ? e.message : "Failed to move button", "error");
+		}
+	}, [Nt, I]), Gt = c(async (e) => {
+		let t = z.find((t) => t.id === e);
+		if (t) try {
+			await K({ variables: {
+				id: e,
+				name: `${t.name} (Copy)`
+			} }), I("Deck duplicated", "success");
+		} catch (e) {
+			if (o(e)) {
+				L("Vibe Deck Quota Reached", "You have reached the Vibe Deck limit for your current plan. Upgrade to duplicate more decks.");
+				return;
+			}
+			I(e instanceof Error ? e.message : "Failed to duplicate deck", "error");
+		}
+	}, [
+		z,
+		K,
+		L,
+		I
+	]), Kt = c(async (e) => {
+		try {
+			await G({ variables: { id: e } }), I("Default deck set", "success");
+		} catch (e) {
+			I(e instanceof Error ? e.message : "Failed to set default", "error");
+		}
+	}, [G, I]), qt = c(async () => {
+		if (H.length === 1) {
+			A("setDefaultDeck");
+			try {
+				await G({ variables: { id: H[0].id } }), I("Default deck set", "success"), Y(), await R();
+			} catch (e) {
+				I(e instanceof Error ? e.message : "Failed to set default deck", "error");
+			} finally {
+				A(null);
+			}
+		}
+	}, [
+		H,
+		G,
+		I,
+		Y,
+		R
+	]), Jt = c(async () => {
+		if (H.length !== 0) {
+			A("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" && o(e.reason))) {
+					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, n = e.length - t;
+				I(`Duplicated ${t} deck${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`, n > 0 ? "error" : "success"), Y(), await R();
+			} catch (e) {
+				if (o(e)) {
+					L("Vibe Deck Quota Reached", "You have reached the Vibe Deck limit for your current plan. Upgrade to duplicate more decks.");
+					return;
+				}
+				I(e instanceof Error ? e.message : "Failed to duplicate decks", "error");
+			} finally {
+				A(null);
+			}
+		}
+	}, [
+		H,
+		K,
+		L,
+		I,
+		Y,
+		R
+	]), Yt = c(async () => {
+		if (H.length !== 0) {
+			A("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) && y(null), I(`Deleted ${t} deck${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`, n > 0 ? "error" : "success"), Y(), D(null), await R();
+			} catch (e) {
+				I(e instanceof Error ? e.message : "Failed to delete decks", "error");
+			} finally {
+				A(null);
+			}
+		}
+	}, [
+		H,
+		W,
+		v,
+		y,
+		I,
+		Y,
+		R
+	]), Xt = c(async () => {
+		if (U.length === 0) return;
+		A("executeButton");
+		let e = 0, t = 0;
+		try {
+			for (let n of U) try {
+				(await J({ variables: { id: n.id } })).data?.executeVibeDeckButton?.status === "success" ? e += 1 : t += 1;
+			} catch (e) {
+				if (o(e)) {
+					O(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;
+			}
+			I(`Executed ${e} button${e === 1 ? "" : "s"}${t > 0 ? ` • ${t} failed` : ""}`, t > 0 ? "error" : "success"), X(), O(null);
+		} catch (e) {
+			I(e instanceof Error ? e.message : "Failed to execute buttons", "error");
+		} finally {
+			A(null);
+		}
+	}, [
+		U,
+		J,
+		L,
+		I,
+		X
+	]), Zt = c(async () => {
+		if (U.length !== 0) {
+			A("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;
+				I(`Deleted ${t} button${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`, n > 0 ? "error" : "success"), X(), O(null), await vt();
+			} catch (e) {
+				I(e instanceof Error ? e.message : "Failed to delete buttons", "error");
+			} finally {
+				A(null);
+			}
+		}
+	}, [
+		U,
+		q,
+		I,
+		X,
+		vt
+	]);
+	if (!ze && g && g.permissionStrings?.length > 0 && !Ve) return /* @__PURE__ */ f(m, { children: /* @__PURE__ */ f(Le, {}) });
+	if (mt) return /* @__PURE__ */ f(m, { children: /* @__PURE__ */ f(de, { message: "Loading Vibe Decks..." }) });
+	if (ht) return /* @__PURE__ */ f(m, { children: /* @__PURE__ */ f(fe, {
+		message: ht.message,
+		onRetry: () => R()
+	}) });
+	let Q = x.type === "editButton" ? V?.buttons?.find((e) => e.id === x.buttonId) : null, $ = x.type === "editDeck" ? z.find((e) => e.id === x.deckId) : null;
+	return /* @__PURE__ */ p(m, {
+		className: "p-4 sm:p-6 space-y-6",
+		children: [
+			/* @__PURE__ */ f(ue, {
+				title: Be("nav.vibeDeck", "Vibe Deck"),
+				description: "Your digital command board — execute commands or trigger webhooks with one click",
+				actions: /* @__PURE__ */ p("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ p("div", {
+							className: "flex items-center rounded-lg border border-border-default bg-bg-secondary p-0.5",
+							children: [/* @__PURE__ */ p("button", {
+								onClick: () => Je("preview"),
+								className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-all ${b ? "bg-action-primary-bg text-action-primary-text shadow-sm" : "text-text-tertiary hover:text-text-primary"}`,
+								title: "Preview mode — execute only",
+								children: [/* @__PURE__ */ f(Oe, { size: 14 }), "Preview"]
+							}), /* @__PURE__ */ p("button", {
+								onClick: () => Je("edit"),
+								className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-all ${b ? "text-text-tertiary hover:text-text-primary" : "bg-action-primary-bg text-action-primary-text shadow-sm"}`,
+								title: "Edit mode — full editing",
+								children: [/* @__PURE__ */ f(ke, { size: 14 }), "Edit"]
+							})]
+						}),
+						B && V && /* @__PURE__ */ f("button", {
+							onClick: () => S({
+								type: "shareDeck",
+								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__ */ f(Me, { size: 16 })
+						}),
+						/* @__PURE__ */ f("button", {
+							onClick: () => {
+								R(), B && vt();
+							},
+							className: "p-2 rounded-lg hover:bg-bg-tertiary text-text-tertiary hover:text-text-primary transition-colors",
+							title: "Refresh",
+							children: /* @__PURE__ */ f(je, { size: 16 })
+						})
+					]
+				})
+			}),
+			!b && z.length > 0 && /* @__PURE__ */ f("div", {
+				className: "rounded-lg border border-border-default bg-bg-surface p-4",
+				children: /* @__PURE__ */ p("div", {
+					className: "flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between",
+					children: [/* @__PURE__ */ p("div", {
+						className: "flex flex-wrap items-center gap-3",
+						children: [/* @__PURE__ */ p("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ f(ve, {
+								checked: yt,
+								indeterminate: bt,
+								onChange: Ft,
+								ariaLabel: "Select all vibe decks"
+							}), /* @__PURE__ */ f("span", {
+								className: "text-sm font-medium text-text-primary",
+								children: "Select all decks"
+							})]
+						}), C.size > 0 && /* @__PURE__ */ f("button", {
+							onClick: Y,
+							className: "text-sm text-text-secondary hover:text-text-primary",
+							children: "Clear selection"
+						})]
+					}), /* @__PURE__ */ p("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [
+							/* @__PURE__ */ p("span", {
+								className: "rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary",
+								children: [C.size, " selected"]
+							}),
+							/* @__PURE__ */ f("button", {
+								onClick: qt,
+								disabled: H.length !== 1 || H[0]?.isDefault || k !== 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__ */ p("span", {
+									className: "inline-flex items-center gap-2",
+									children: [/* @__PURE__ */ f(Ne, { size: 14 }), "Set Selected Default"]
+								})
+							}),
+							/* @__PURE__ */ f("button", {
+								onClick: Jt,
+								disabled: H.length === 0 || k !== 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__ */ p("span", {
+									className: "inline-flex items-center gap-2",
+									children: [
+										/* @__PURE__ */ f(De, { size: 14 }),
+										"Duplicate Selected",
+										H.length > 0 ? ` (${H.length})` : ""
+									]
+								})
+							}),
+							/* @__PURE__ */ f("button", {
+								onClick: () => D("delete"),
+								disabled: H.length === 0 || k !== 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__ */ p("span", {
+									className: "inline-flex items-center gap-2",
+									children: [
+										/* @__PURE__ */ f(Pe, { size: 14 }),
+										"Delete Selected",
+										H.length > 0 ? ` (${H.length})` : ""
+									]
+								})
+							})
+						]
+					})]
+				})
+			}),
+			/* @__PURE__ */ f(be, {
+				decks: z.map((e) => ({
+					id: e.id,
+					name: e.name,
+					icon: e.icon || null,
+					colorTheme: e.colorTheme || null,
+					isDefault: e.isDefault
+				})),
+				activeDeckId: B,
+				selectedDeckIds: C,
+				onSelectDeck: (e) => y(e),
+				onToggleSelectDeck: Pt,
+				onCreateDeck: () => S({ type: "createDeck" }),
+				onSetDefault: Kt,
+				onDuplicate: (e) => Gt(e),
+				onDelete: (e) => {
+					S({
+						type: "confirmDelete",
+						target: "deck",
+						id: e,
+						name: z.find((t) => t.id === e)?.name || "this deck"
+					});
+				},
+				onEdit: (e) => S({
+					type: "editDeck",
+					deckId: e
+				}),
+				onShare: (e) => {
+					let t = z.find((t) => t.id === e);
+					t && S({
+						type: "shareDeck",
+						deckId: e,
+						deckName: t.name
+					});
+				},
+				canCreate: He,
+				canUpdate: Xe,
+				canDelete: Ze
+			}),
+			/* @__PURE__ */ p(Ie, {
+				mode: "wait",
+				children: [!V && !_t && z.length === 0 && /* @__PURE__ */ f(ge, {
+					title: "No Vibe Decks yet",
+					description: "Create your first Vibe Deck to start organizing your commands and webhooks",
+					action: /* @__PURE__ */ p("div", {
+						className: "flex items-center gap-2",
+						children: [He && /* @__PURE__ */ f("button", {
+							onClick: () => S({ 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__ */ f(_e, { prompt: "What is a VibeDeck and how do I use it to organise controls?" })]
+					})
+				}), _t && /* @__PURE__ */ f(de, { message: "Loading deck..." })]
+			}),
+			V && /* @__PURE__ */ p("div", {
+				className: "space-y-4",
+				children: [!b && (V.buttons?.length ?? 0) > 0 && /* @__PURE__ */ f("div", {
+					className: "rounded-lg border border-border-default bg-bg-surface p-4",
+					children: /* @__PURE__ */ p("div", {
+						className: "flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between",
+						children: [/* @__PURE__ */ p("div", {
+							className: "flex flex-wrap items-center gap-3",
+							children: [/* @__PURE__ */ p("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ f(ve, {
+									checked: xt,
+									indeterminate: St,
+									onChange: It,
+									ariaLabel: "Select all buttons in active deck"
+								}), /* @__PURE__ */ f("span", {
+									className: "text-sm font-medium text-text-primary",
+									children: "Select all buttons in this deck"
+								})]
+							}), T.size > 0 && /* @__PURE__ */ f("button", {
+								onClick: X,
+								className: "text-sm text-text-secondary hover:text-text-primary",
+								children: "Clear selection"
+							})]
+						}), /* @__PURE__ */ p("div", {
+							className: "flex flex-wrap items-center gap-2",
+							children: [
+								/* @__PURE__ */ p("span", {
+									className: "rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary",
+									children: [T.size, " selected"]
+								}),
+								/* @__PURE__ */ f("button", {
+									onClick: () => O("execute"),
+									disabled: U.length === 0 || k !== 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__ */ p("span", {
+										className: "inline-flex items-center gap-2",
+										children: [
+											/* @__PURE__ */ f(Ae, { size: 14 }),
+											"Execute Selected",
+											U.length > 0 ? ` (${U.length})` : ""
+										]
+									})
+								}),
+								/* @__PURE__ */ f("button", {
+									onClick: () => O("delete"),
+									disabled: U.length === 0 || k !== 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__ */ p("span", {
+										className: "inline-flex items-center gap-2",
+										children: [
+											/* @__PURE__ */ f(Pe, { size: 14 }),
+											"Delete Selected",
+											U.length > 0 ? ` (${U.length})` : ""
+										]
+									})
+								})
+							]
+						})]
+					})
+				}), /* @__PURE__ */ f(ye, {
+					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: Bt,
+					onEditButton: (e) => S({
+						type: "editButton",
+						buttonId: e
+					}),
+					onDeleteButton: (e) => {
+						let t = V.buttons?.find((t) => t.id === e);
+						S({
+							type: "confirmDelete",
+							target: "button",
+							id: e,
+							name: t?.label || "this button"
+						});
+					},
+					onDropButton: Wt,
+					onAddButton: (e, t) => S({
+						type: "createButton",
+						row: e,
+						column: t
+					}),
+					executingButtonId: Qe,
+					canCreate: Ye,
+					canUpdate: Xe,
+					canDelete: Ze,
+					canExecute: Ge
+				})]
+			}),
+			rt.length > 0 && /* @__PURE__ */ f(we, {
+				entries: rt,
+				expanded: at,
+				onToggleExpanded: () => ot((e) => !e),
+				onClear: () => it([])
+			}),
+			/* @__PURE__ */ f(Ie, { children: nt.length > 0 && /* @__PURE__ */ f("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: nt.slice(-3).map((e) => /* @__PURE__ */ p("div", {
+					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: () => ft(e.id),
+					children: [/* @__PURE__ */ f("div", {
+						className: "font-medium text-sm",
+						children: e.message
+					}), e.detail && /* @__PURE__ */ f("pre", {
+						className: "text-xs font-mono opacity-80 mt-1 max-h-20 overflow-y-auto whitespace-pre-wrap",
+						children: e.detail
+					})]
+				}, e.id))
+			}) }),
+			x.type === "createDeck" && /* @__PURE__ */ f(xe, {
+				title: "Create Vibe Deck",
+				onSubmit: Lt,
+				onCancel: () => S({ type: "none" }),
+				isLoading: Et
+			}),
+			x.type === "editDeck" && $ && /* @__PURE__ */ f(xe, {
+				title: "Edit Vibe Deck",
+				initialData: {
+					name: $.name,
+					description: $.description || "",
+					colorTheme: $.colorTheme || "",
+					gridColumns: $.gridColumns,
+					gridRows: $.gridRows
+				},
+				onSubmit: Rt,
+				onCancel: () => S({ type: "none" }),
+				isLoading: Ot
+			}),
+			x.type === "createButton" && /* @__PURE__ */ f(Se, {
+				title: "Add Button",
+				agents: wt,
+				onSubmit: Ht,
+				onCancel: () => S({ type: "none" }),
+				isLoading: At,
+				gridColumns: V?.gridColumns,
+				gridRows: V?.gridRows,
+				buttonRow: x.row,
+				buttonColumn: x.column
+			}),
+			x.type === "editButton" && Q && /* @__PURE__ */ f(Se, {
+				title: "Edit Button",
+				initialData: {
+					label: Q.label,
+					actionId: Q.actionId || "",
+					color: Q.color || "",
+					category: Q.category || "",
+					keyboardShortcut: Q.keyboardShortcut || "",
+					confirmationRequired: Q.confirmationRequired,
+					rowSpan: Q.rowSpan,
+					colSpan: Q.colSpan
+				},
+				agents: wt,
+				onSubmit: Ut,
+				onCancel: () => S({ type: "none" }),
+				isLoading: Mt,
+				gridColumns: V?.gridColumns,
+				gridRows: V?.gridRows,
+				buttonRow: Q.row,
+				buttonColumn: Q.column
+			}),
+			x.type === "confirmDelete" && /* @__PURE__ */ f(a, {
+				isOpen: !0,
+				title: `Delete ${x.target === "deck" ? "Vibe Deck" : "Button"}`,
+				message: `Are you sure you want to delete "${x.name}"?${x.target === "deck" ? " All buttons in this deck will also be deleted." : ""}`,
+				confirmLabel: "Delete",
+				variant: "danger",
+				onConfirm: zt,
+				onClose: () => S({ type: "none" })
+			}),
+			x.type === "confirmExecute" && /* @__PURE__ */ f(a, {
+				isOpen: !0,
+				title: `Execute: ${x.label}`,
+				message: `Are you sure you want to execute this action?\n\n${x.detail}`,
+				confirmLabel: "Execute",
+				variant: "warning",
+				onConfirm: Vt,
+				onClose: () => S({ type: "none" })
+			}),
+			/* @__PURE__ */ f(a, {
+				isOpen: et === "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: Yt,
+				onClose: () => D(null),
+				isLoading: k === "deleteDeck"
+			}),
+			/* @__PURE__ */ f(a, {
+				isOpen: tt === "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: Xt,
+				onClose: () => O(null),
+				isLoading: k === "executeButton"
+			}),
+			/* @__PURE__ */ f(a, {
+				isOpen: tt === "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: Zt,
+				onClose: () => O(null),
+				isLoading: k === "deleteButton"
+			}),
+			x.type === "shareDeck" && /* @__PURE__ */ f(Ce, {
+				vibeDeckId: x.deckId,
+				vibeDeckName: x.deckName,
+				onClose: () => S({ type: "none" })
+			}),
+			/* @__PURE__ */ f(pe, {
+				isOpen: lt !== null,
+				onClose: () => ut(null),
+				onConfirm: () => {
+					ut(null), Re("/billing");
+				},
+				title: lt?.title || "Quota Reached",
+				message: lt?.message || "Upgrade your plan to continue."
+			})
+		]
+	});
+}
+//#endregion
+export { Re as VibeDeckPage };
+
+//# sourceMappingURL=VibeDeckPage.js.map