@burdenoff/microfe-vibecontrols 2026.528.4 → 2026.528.6

package/dist/pages/VibesPage.js

@@ -26,81 +26,82 @@ import { useCallback as c, useEffect as Ce, useMemo as l, useRef as u, useState
 import { useI18n as we } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { useUpgradePrompt as Te } from "@burdenoff/fe-libs/shared/hooks";
 import { Archive as Ee, Grid as De, List as Oe, Play as ke, Plus as Ae, RefreshCw as je, Zap as Me } from "lucide-react";
-import { usePermissions as Ne } from "@burdenoff/fe-libs/shared/providers/shell";
-import { AnimatePresence as Pe } from "framer-motion";
-import { Fragment as Fe, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { MotionItem as Ie, MotionList as m, MotionPage as Le } from "@burdenoff/fe-libs/shared/motion";
-import { AccessDenied as Re, PermissionButton as ze, PermissionGate as Be } from "@burdenoff/fe-libs/shared/components";
+import { useSearchParams as Ne } from "react-router-dom";
+import { usePermissions as Pe } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AnimatePresence as Fe } from "framer-motion";
+import { Fragment as Ie, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { MotionItem as Le, MotionList as m, MotionPage as Re } from "@burdenoff/fe-libs/shared/motion";
+import { AccessDenied as ze, PermissionButton as Be, PermissionGate as Ve } from "@burdenoff/fe-libs/shared/components";
 //#region src/pages/VibesPage.tsx
 function h() {
-	let { onVibeActivate: h } = re(), g = ie(), { hasPermission: _, isLoading: v, permissions: y } = Ne(), { t: b } = we(), { isFree: Ve, approachingLimits: He } = Te({ resource: "vibes" }), x = He[0], S = c((e, t, n) => {
-		let r = b(e, n), i = r === e ? t : r;
+	let { onVibeActivate: h } = re(), g = ie(), { hasPermission: _, isLoading: v, permissions: He } = Pe(), { t: Ue } = we(), { isFree: We, approachingLimits: Ge } = Te({ resource: "vibes" }), y = Ge[0], b = c((e, t, n) => {
+		let r = Ue(e, n), i = r === e ? t : r;
 		return n ? Object.entries(n).reduce((e, [t, n]) => e.replace(`{{${t}}}`, String(n)), i) : i;
-	}, [b]), Ue = [
+	}, [Ue]), Ke = [
 		{
 			value: "all",
-			label: S("vibesPage.statusAll", "All Statuses")
+			label: b("vibesPage.statusAll", "All Statuses")
 		},
 		{
 			value: "ACTIVE",
-			label: S("vibesPage.statusActive", "Active")
+			label: b("vibesPage.statusActive", "Active")
 		},
 		{
 			value: "INACTIVE",
-			label: S("vibesPage.statusInactive", "Inactive")
+			label: b("vibesPage.statusInactive", "Inactive")
 		},
 		{
 			value: "ARCHIVED",
-			label: S("vibesPage.statusArchived", "Archived")
+			label: b("vibesPage.statusArchived", "Archived")
 		},
 		{
 			value: "ERROR",
-			label: S("vibesPage.statusError", "Error")
+			label: b("vibesPage.statusError", "Error")
 		}
 	];
-	S("vibesPage.typeAll", "All Types"), S("vibesPage.typeProject", "Project"), S("vibesPage.typeRepository", "Repository"), S("vibesPage.typeWorkspace", "Workspace"), S("vibesPage.typeMonorepo", "Monorepo"), S("vibesPage.typePackage", "Package"), S("vibesPage.typeCustom", "Custom");
-	let C = _(s.VIBE_LIST), We = _(s.VIBE_UPDATE), w = v || !C, [T, Ge] = d(""), [E, Ke] = d("all"), [D, qe] = d("all"), [O, Je] = d("all"), [k, Ye] = d("grid"), [Xe, A] = d(!1), [Ze, j] = d(null), [M, Qe] = d(!1), [N, P] = d(null), [$e, F] = d(!1), [I, L] = d({}), [et, R] = d(null), [z, B] = d(/* @__PURE__ */ new Set()), [tt, V] = d(null), H = u(null);
+	b("vibesPage.typeAll", "All Types"), b("vibesPage.typeProject", "Project"), b("vibesPage.typeRepository", "Repository"), b("vibesPage.typeWorkspace", "Workspace"), b("vibesPage.typeMonorepo", "Monorepo"), b("vibesPage.typePackage", "Package"), b("vibesPage.typeCustom", "Custom");
+	let qe = _(s.VIBE_LIST), Je = _(s.VIBE_UPDATE), x = v || !qe, [S, Ye] = d(""), [C, Xe] = d("all"), [w, Ze] = d("all"), [T, Qe] = d("all"), [E, D] = d("grid"), [$e, O] = d(!1), [et, k] = d(null), [A, tt] = d(!1), [nt, j] = d(null), [rt, M] = d(!1), [N, P] = d({}), [it, F] = d(null), [I, L] = d(/* @__PURE__ */ new Set()), [at, R] = d(null), z = u(null);
 	Ce(() => () => {
-		H.current && clearTimeout(H.current);
+		z.current && clearTimeout(z.current);
 	}, []);
-	let nt = c(() => {
-		R(null), H.current &&= (clearTimeout(H.current), null);
-	}, []), rt = u(null), it = u(null), at = u(null), ot = u(null), [st] = o(), [ct] = a(), { setDraftTagIds: lt, flushTags: ut } = de("VIBECONTROLS_VIBE"), [dt] = ne(), [ft] = i(), { data: pt, loading: U, error: mt, refetch: W } = te({
+	let ot = c(() => {
+		F(null), z.current &&= (clearTimeout(z.current), null);
+	}, []), st = u(null), ct = u(null), lt = u(null), ut = u(null), [dt] = o(), [ft] = a(), { setDraftTagIds: pt, flushTags: mt } = de("VIBECONTROLS_VIBE"), [ht] = ne(), [gt] = i(), { data: _t, loading: B, error: vt, refetch: V } = te({
 		variables: l(() => ({ filter: {
-			status: E === "all" ? void 0 : E,
-			type: D === "all" ? void 0 : D,
-			attachedAgentIds: O === "all" ? void 0 : [O]
+			status: C === "all" ? void 0 : C,
+			type: w === "all" ? void 0 : w,
+			attachedAgentIds: T === "all" ? void 0 : [T]
 		} }), [
-			E,
-			D,
-			O
+			C,
+			w,
+			T
 		]),
-		fetchPolicy: E === "all" && D === "all" && O === "all" ? "cache-first" : "cache-and-network",
+		fetchPolicy: C === "all" && w === "all" && T === "all" ? "cache-first" : "cache-and-network",
 		nextFetchPolicy: "cache-first",
-		skip: w,
+		skip: x,
 		notifyOnNetworkStatusChange: !0
-	}), { agents: ht } = oe(), [gt, { data: _t }] = ee({ fetchPolicy: "cache-first" }), vt = u(!1), G = c(() => {
-		vt.current || w || (vt.current = !0, gt({ variables: { pagination: { limit: 100 } } }));
-	}, [gt, w]), yt = l(() => {
-		let e = _t?.vibecontrolsAgents ?? null, t = e ? e.map((e) => ({
+	}), { agents: yt } = oe(), [bt, { data: xt }] = ee({ fetchPolicy: "cache-first" }), St = u(!1), H = c(() => {
+		St.current || x || (St.current = !0, bt({ variables: { pagination: { limit: 100 } } }));
+	}, [bt, x]), Ct = l(() => {
+		let e = xt?.vibecontrolsAgents ?? null, t = e ? e.map((e) => ({
 			id: e.id,
 			name: e.name
-		})) : ht.map((e) => ({
+		})) : yt.map((e) => ({
 			id: e.id,
 			name: e.name
 		}));
 		return [{
 			value: "all",
-			label: S("vibesPage.allAgents", "All Agents")
+			label: b("vibesPage.allAgents", "All Agents")
 		}, ...t.map((e) => ({
 			value: e.id,
 			label: e.name
 		}))];
 	}, [
-		_t?.vibecontrolsAgents,
-		ht,
-		S
-	]), K = l(() => (pt?.vibes?.items ?? []).map((e) => ({
+		xt?.vibecontrolsAgents,
+		yt,
+		b
+	]), U = l(() => (_t?.vibes?.items ?? []).map((e) => ({
 		id: e.id,
 		workspaceId: e.workspaceId,
 		name: e.name,
@@ -123,17 +124,17 @@ function h() {
 			isActive: e.isActive,
 			ownerUserId: e.ownerUserId ?? null
 		}))
-	})), [pt?.vibes?.items]), q = l(() => K.filter((e) => {
-		if (T) {
-			let t = T.toLowerCase();
+	})), [_t?.vibes?.items]), W = l(() => U.filter((e) => {
+		if (S) {
+			let t = S.toLowerCase();
 			if (!(e.name.toLowerCase().includes(t) || e.description?.toLowerCase().includes(t) || e.path?.toLowerCase().includes(t) || e.tags?.some((e) => e.toLowerCase().includes(t)))) return !1;
 		}
 		return !0;
-	}), [K, T]), bt = l(() => K.filter((e) => z.has(e.id)), [K, z]), J = bt.filter((e) => e.status !== "ACTIVE"), Y = bt.filter((e) => e.status !== "ARCHIVED"), X = q.length > 0 && q.every((e) => z.has(e.id)), xt = q.some((e) => z.has(e.id)) && !X, St = (e) => {
+	}), [U, S]), wt = l(() => U.filter((e) => I.has(e.id)), [U, I]), G = wt.filter((e) => e.status !== "ACTIVE"), K = wt.filter((e) => e.status !== "ARCHIVED"), q = W.length > 0 && W.every((e) => I.has(e.id)), Tt = W.some((e) => I.has(e.id)) && !q, Et = (e) => {
 		g(`/vibes/${e.id}`);
-	}, Ct = async (e) => {
+	}, Dt = async (e) => {
 		try {
-			(await dt({ variables: {
+			(await ht({ variables: {
 				id: e.id,
 				status: "ACTIVE"
 			} })).data?.updateVibeStatus && h?.({
@@ -145,55 +146,67 @@ function h() {
 		} catch (e) {
 			console.error("Failed to activate vibe:", e);
 		}
-	}, wt = async (e) => {
+	}, Ot = async (e) => {
 		try {
-			await ft({ variables: { id: e.id } });
+			await gt({ variables: { id: e.id } });
 		} catch (e) {
 			console.error("Failed to archive vibe:", e);
 		}
-	}, Tt = ae((e) => e.preferredIdeCommand), Et = ae((e) => e.vibeIdeOverrides), Dt = (e) => {
+	}, kt = ae((e) => e.preferredIdeCommand), At = ae((e) => e.vibeIdeOverrides), jt = (e) => {
 		if (!e.path) {
-			R(S("vibesPage.openEditorPathMissing", "No path available to open in editor")), H.current = setTimeout(() => {
-				R(null), H.current = null;
+			F(b("vibesPage.openEditorPathMissing", "No path available to open in editor")), z.current = setTimeout(() => {
+				F(null), z.current = null;
 			}, 3e3);
 			return;
 		}
-		let t = be(e.id, Tt, Et), n = ye(t), r = n ? ve(n, e.path) : `vscode://file/${e.path}`;
-		r ? window.location.href = r : (R(S("vibesPage.openEditorNoProtocol", `${n?.label ?? t} has no URL handler — open this Vibe and use the editor menu.`)), H.current = setTimeout(() => {
-			R(null), H.current = null;
+		let t = be(e.id, kt, At), n = ye(t), r = n ? ve(n, e.path) : `vscode://file/${e.path}`;
+		r ? window.location.href = r : (F(b("vibesPage.openEditorNoProtocol", `${n?.label ?? t} has no URL handler — open this Vibe and use the editor menu.`)), z.current = setTimeout(() => {
+			F(null), z.current = null;
 		}, 4e3));
-	}, Ot = () => {
-		j(null), A(!0), G();
-	}, kt = (e, t) => {
-		B((n) => {
+	}, J = c(() => {
+		k(null), O(!0), H();
+	}, [H]), [Y, Mt] = Ne();
+	Ce(() => {
+		if (Y.get("create") === "true") {
+			J();
+			let e = new URLSearchParams(Y);
+			e.delete("create"), Mt(e, { replace: !0 });
+		}
+	}, [
+		Y,
+		Mt,
+		J
+	]);
+	let Nt = (e, t) => {
+		L((n) => {
 			let r = new Set(n);
 			return t ? r.add(e.id) : r.delete(e.id), r;
 		});
-	}, At = (e) => {
-		B((t) => {
+	}, Pt = (e) => {
+		L((t) => {
 			let n = new Set(t);
-			return q.forEach((t) => {
+			return W.forEach((t) => {
 				e ? n.add(t.id) : n.delete(t.id);
 			}), n;
 		});
-	}, Z = () => B(/* @__PURE__ */ new Set()), jt = async () => {
-		if (J.length === 0) return;
-		let e = await Promise.allSettled(J.map((e) => dt({ variables: {
+	}, X = () => L(/* @__PURE__ */ new Set()), Ft = async () => {
+		if (G.length === 0) return;
+		let e = await Promise.allSettled(G.map((e) => ht({ variables: {
 			id: e.id,
 			status: "ACTIVE"
 		} }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.length - t;
-		P(`Activated ${t} vibe${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`), setTimeout(() => P(null), 4e3), Z(), V(null), await W();
-	}, Mt = async () => {
-		if (Y.length === 0) return;
-		let e = await Promise.allSettled(Y.map((e) => ft({ variables: { id: e.id } }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.length - t;
-		P(`Archived ${t} vibe${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`), setTimeout(() => P(null), 4e3), Z(), V(null), await W();
-	}, Nt = async () => {
-		let e = rt.current?.value?.trim(), t = it.current?.value?.trim(), i = at.current?.value, a = ot.current?.value, o = {};
-		if (e || (o.name = S("vibesPage.nameRequired", "Name is required")), t || (o.path = S("vibesPage.pathRequired", "Path is required")), o.name || o.path) {
-			L(o), j(S("vibesPage.fillRequired", "Please fill in all required fields"));
+		j(`Activated ${t} vibe${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`), setTimeout(() => j(null), 4e3), X(), R(null), await V();
+	}, It = async () => {
+		if (K.length === 0) return;
+		let e = await Promise.allSettled(K.map((e) => gt({ variables: { id: e.id } }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.length - t;
+		j(`Archived ${t} vibe${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`), setTimeout(() => j(null), 4e3), X(), R(null), await V();
+	}, Lt = async () => {
+		let e = st.current?.value?.trim(), t = ct.current?.value?.trim(), i = lt.current?.value, a = ut.current?.value, o = {};
+		if (e || (o.name = b("vibesPage.nameRequired", "Name is required")), t || (o.path = b("vibesPage.pathRequired", "Path is required")), o.name || o.path) {
+			P(o), k(b("vibesPage.fillRequired", "Please fill in all required fields"));
 			return;
 		}
-		L({});
+		P({});
 		let ee = [
 			"PROJECT",
 			"REPOSITORY",
@@ -202,85 +215,85 @@ function h() {
 			"PACKAGE",
 			"CUSTOM"
 		].includes(a) ? a : "PROJECT";
-		Qe(!0), j(null);
+		tt(!0), k(null);
 		try {
-			let n = await st({ variables: { input: {
+			let n = await dt({ variables: { input: {
 				name: e,
 				path: t,
 				type: ee
 			} } });
-			if (!n.data?.createVibe?.id) throw Error(S("vibesPage.failedCreate", "Failed to create vibe"));
+			if (!n.data?.createVibe?.id) throw Error(b("vibesPage.failedCreate", "Failed to create vibe"));
 			let r = n.data.createVibe.id;
 			if (i) try {
-				await ct({ variables: { input: {
+				await ft({ variables: { input: {
 					vibeId: r,
 					agentId: i
 				} } });
 			} catch {}
-			A(!1), P(S("vibesPage.createdSuccess", "Vibe created successfully")), await ut(r), await W(), setTimeout(() => P(null), 3e3);
+			O(!1), j(b("vibesPage.createdSuccess", "Vibe created successfully")), await mt(r), await V(), setTimeout(() => j(null), 3e3);
 		} catch (e) {
 			if (n(e)) {
-				A(!1), j(null), L({}), r(), F(!0);
+				O(!1), k(null), P({}), r(), M(!0);
 				return;
 			}
-			j(e instanceof Error ? e.message : S("vibesPage.failedCreate", "Failed to create vibe"));
+			k(e instanceof Error ? e.message : b("vibesPage.failedCreate", "Failed to create vibe"));
 		} finally {
-			Qe(!1);
+			tt(!1);
 		}
-	}, Pt = {
-		total: K.length,
-		active: K.filter((e) => e.status === "ACTIVE").length,
-		inactive: K.filter((e) => e.status === "INACTIVE").length
-	}, Q = v, $ = !v && !!y && (y.permissionStrings?.length ?? 0) > 0 && !C, Ft = !Q && !$ && U && K.length === 0, It = !Q && !$ && !!mt && K.length === 0, Lt = !Q && !$ && !It;
-	return /* @__PURE__ */ p(Le, {
+	}, Rt = {
+		total: U.length,
+		active: U.filter((e) => e.status === "ACTIVE").length,
+		inactive: U.filter((e) => e.status === "INACTIVE").length
+	}, Z = v, Q = !v && !!He && (He.permissionStrings?.length ?? 0) > 0 && !qe, zt = !Z && !Q && B && U.length === 0, $ = !Z && !Q && !!vt && U.length === 0, Bt = !Z && !Q && !$;
+	return /* @__PURE__ */ p(Re, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: [
-			Q && /* @__PURE__ */ f(ce, { message: S("vibesPage.loadingPermissions", "Loading permissions...") }),
-			$ && /* @__PURE__ */ f(Re, {
-				title: S("vibesPage.accessDeniedTitle", "Access Denied"),
-				description: S("vibesPage.accessDeniedDescription", "You don't have permission to view vibes. Contact your workspace administrator for access.")
+			Z && /* @__PURE__ */ f(ce, { message: b("vibesPage.loadingPermissions", "Loading permissions...") }),
+			Q && /* @__PURE__ */ f(ze, {
+				title: b("vibesPage.accessDeniedTitle", "Access Denied"),
+				description: b("vibesPage.accessDeniedDescription", "You don't have permission to view vibes. Contact your workspace administrator for access.")
 			}),
-			It && /* @__PURE__ */ f(le, {
-				title: S("vibesPage.failedLoad", "Failed to load vibes"),
-				message: mt?.message ?? "",
-				onRetry: () => W()
+			$ && /* @__PURE__ */ f(le, {
+				title: b("vibesPage.failedLoad", "Failed to load vibes"),
+				message: vt?.message ?? "",
+				onRetry: () => V()
 			}),
-			Lt && /* @__PURE__ */ p(Fe, { children: [
+			Bt && /* @__PURE__ */ p(Ie, { children: [
 				/* @__PURE__ */ f(se, {
-					title: S("vibesPage.title", "Vibes"),
-					description: S("vibesPage.descriptionActive", "{{active}} of {{total}} vibes active", {
-						active: Pt.active,
-						total: Pt.total
+					title: b("vibesPage.title", "Vibes"),
+					description: b("vibesPage.descriptionActive", "{{active}} of {{total}} vibes active", {
+						active: Rt.active,
+						total: Rt.total
 					}),
 					actions: /* @__PURE__ */ p("div", {
 						className: "flex items-center gap-2",
 						children: [
-							Ve && x && typeof x.limit == "number" && /* @__PURE__ */ f("a", {
+							We && y && typeof y.limit == "number" && /* @__PURE__ */ f("a", {
 								href: "/billing/plans",
-								className: `inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md border ${x.current >= x.limit ? "border-status-error-border bg-status-error-bg-subtle text-status-error-text" : "border-status-warning-border bg-status-warning-bg-subtle text-status-warning-text"}`,
-								title: S("vibesPage.upgradeChipTooltip", "Free plan limit — upgrade for more vibes"),
-								children: S("vibesPage.usageChip", "{{current}} of {{limit}} vibes used", {
-									current: x.current,
-									limit: x.limit
+								className: `inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md border ${y.current >= y.limit ? "border-status-error-border bg-status-error-bg-subtle text-status-error-text" : "border-status-warning-border bg-status-warning-bg-subtle text-status-warning-text"}`,
+								title: b("vibesPage.upgradeChipTooltip", "Free plan limit — upgrade for more vibes"),
+								children: b("vibesPage.usageChip", "{{current}} of {{limit}} vibes used", {
+									current: y.current,
+									limit: y.limit
 								})
 							}),
 							/* @__PURE__ */ f("button", {
 								type: "button",
-								onClick: () => W(),
-								disabled: U,
+								onClick: () => V(),
+								disabled: B,
 								className: "flex items-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50",
-								title: S("vibesPage.refreshTitle", "Refresh vibes"),
-								children: /* @__PURE__ */ f(je, { className: `size-4 ${U ? "animate-spin" : ""}` })
+								title: b("vibesPage.refreshTitle", "Refresh vibes"),
+								children: /* @__PURE__ */ f(je, { className: `size-4 ${B ? "animate-spin" : ""}` })
 							}),
-							/* @__PURE__ */ f(ze, {
+							/* @__PURE__ */ f(Be, {
 								permission: s.VIBE_CREATE,
 								deniedBehavior: "disable",
-								deniedTooltip: S("vibesPage.deniedCreateTooltip", "You don't have permission to create vibes"),
+								deniedTooltip: b("vibesPage.deniedCreateTooltip", "You don't have permission to create vibes"),
 								children: /* @__PURE__ */ p("button", {
 									type: "button",
-									onClick: Ot,
+									onClick: J,
 									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 disabled:opacity-50 disabled:cursor-not-allowed",
-									children: [/* @__PURE__ */ f(Ae, { className: "size-4" }), S("vibesPage.addVibe", "Add Vibe")]
+									children: [/* @__PURE__ */ f(Ae, { className: "size-4" }), b("vibesPage.addVibe", "Add Vibe")]
 								})
 							})
 						]
@@ -291,56 +304,56 @@ function h() {
 					children: [/* @__PURE__ */ p("div", {
 						className: "flex items-center gap-2",
 						children: [/* @__PURE__ */ f(pe, {
-							value: T,
-							onChange: Ge,
-							placeholder: S("vibesPage.searchPlaceholder", "Search vibes..."),
+							value: S,
+							onChange: Ye,
+							placeholder: b("vibesPage.searchPlaceholder", "Search vibes..."),
 							className: "flex-1 sm:w-64 sm:flex-none"
 						}), /* @__PURE__ */ p("div", {
 							className: "flex items-center gap-1 bg-bg-sunken rounded-md p-1 flex-shrink-0",
 							children: [/* @__PURE__ */ f("button", {
 								type: "button",
-								onClick: () => Ye("grid"),
-								className: `p-1.5 sm:p-2 rounded ${k === "grid" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
-								title: S("vibesPage.gridViewTitle", "Grid view"),
+								onClick: () => D("grid"),
+								className: `p-1.5 sm:p-2 rounded ${E === "grid" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+								title: b("vibesPage.gridViewTitle", "Grid view"),
 								children: /* @__PURE__ */ f(De, { className: "size-4 text-text-secondary" })
 							}), /* @__PURE__ */ f("button", {
 								type: "button",
-								onClick: () => Ye("list"),
-								className: `p-1.5 sm:p-2 rounded ${k === "list" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
-								title: S("vibesPage.listViewTitle", "List view"),
+								onClick: () => D("list"),
+								className: `p-1.5 sm:p-2 rounded ${E === "list" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+								title: b("vibesPage.listViewTitle", "List view"),
 								children: /* @__PURE__ */ f(Oe, { className: "size-4 text-text-secondary" })
 							})]
 						})]
 					}), /* @__PURE__ */ p("div", {
 						className: "flex items-center gap-2 sm:gap-3 flex-wrap",
 						children: [/* @__PURE__ */ f(me, {
-							label: S("vibesPage.filterStatus", "Status"),
-							value: E,
-							options: Ue,
-							onChange: Ke
+							label: b("vibesPage.filterStatus", "Status"),
+							value: C,
+							options: Ke,
+							onChange: Xe
 						}), /* @__PURE__ */ f("div", {
-							onMouseDown: G,
-							onFocus: G,
+							onMouseDown: H,
+							onFocus: H,
 							children: /* @__PURE__ */ f(me, {
-								label: S("vibesPage.filterAgent", "Agent"),
-								value: O,
-								options: yt,
-								onChange: Je
+								label: b("vibesPage.filterAgent", "Agent"),
+								value: T,
+								options: Ct,
+								onChange: Qe
 							})
 						})]
 					})]
 				}),
-				T || E !== "all" || D !== "all" || O !== "all" ? /* @__PURE__ */ p("p", {
+				S || C !== "all" || w !== "all" || T !== "all" ? /* @__PURE__ */ p("p", {
 					className: "text-sm text-text-secondary",
-					children: [S("vibesPage.showingResults", "Showing {{filtered}} of {{total}} vibes", {
-						filtered: q.length,
-						total: K.length
-					}), U && /* @__PURE__ */ f("span", {
+					children: [b("vibesPage.showingResults", "Showing {{filtered}} of {{total}} vibes", {
+						filtered: W.length,
+						total: U.length
+					}), B && /* @__PURE__ */ f("span", {
 						className: "ml-2 text-text-muted",
-						children: S("vibesPage.refreshing", "(refreshing...)")
+						children: b("vibesPage.refreshing", "(refreshing...)")
 					})]
 				}) : null,
-				q.length > 0 && /* @__PURE__ */ f("div", {
+				W.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 lg:flex-row lg:items-center lg:justify-between",
@@ -349,17 +362,17 @@ function h() {
 							children: [/* @__PURE__ */ p("div", {
 								className: "flex items-center gap-2",
 								children: [/* @__PURE__ */ f(ge, {
-									checked: X,
-									indeterminate: xt,
-									onChange: At,
+									checked: q,
+									indeterminate: Tt,
+									onChange: Pt,
 									ariaLabel: "Select all visible vibes"
 								}), /* @__PURE__ */ f("span", {
 									className: "text-sm font-medium text-text-primary",
 									children: "Select all visible"
 								})]
-							}), z.size > 0 && /* @__PURE__ */ f("button", {
+							}), I.size > 0 && /* @__PURE__ */ f("button", {
 								type: "button",
-								onClick: Z,
+								onClick: X,
 								className: "text-sm text-text-secondary hover:text-text-primary",
 								children: "Clear selection"
 							})]
@@ -368,12 +381,12 @@ function h() {
 							children: [
 								/* @__PURE__ */ p("span", {
 									className: "rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary",
-									children: [z.size, " selected"]
+									children: [I.size, " selected"]
 								}),
 								/* @__PURE__ */ f("button", {
 									type: "button",
-									onClick: () => V("activate"),
-									disabled: J.length === 0,
+									onClick: () => R("activate"),
+									disabled: G.length === 0,
 									title: "Mark selected vibes as ACTIVE so they appear in the default vibe list and can run sessions/tunnels via their attached agent(s).",
 									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", {
@@ -381,21 +394,21 @@ function h() {
 										children: [
 											/* @__PURE__ */ f(ke, { className: "size-4" }),
 											"Activate Selected",
-											J.length > 0 ? ` (${J.length})` : ""
+											G.length > 0 ? ` (${G.length})` : ""
 										]
 									})
 								}),
 								/* @__PURE__ */ f("button", {
 									type: "button",
-									onClick: () => V("archive"),
-									disabled: Y.length === 0,
+									onClick: () => R("archive"),
+									disabled: K.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: /* @__PURE__ */ p("span", {
 										className: "inline-flex items-center gap-2",
 										children: [
 											/* @__PURE__ */ f(Ee, { className: "size-4" }),
 											"Archive Selected",
-											Y.length > 0 ? ` (${Y.length})` : ""
+											K.length > 0 ? ` (${K.length})` : ""
 										]
 									})
 								})
@@ -403,186 +416,186 @@ function h() {
 						})]
 					})
 				}),
-				Ft ? /* @__PURE__ */ f(_e, {
+				zt ? /* @__PURE__ */ f(_e, {
 					variant: "cards",
 					count: 6
-				}) : q.length > 0 ? /* @__PURE__ */ f(Pe, {
+				}) : W.length > 0 ? /* @__PURE__ */ f(Fe, {
 					mode: "wait",
-					children: k === "grid" ? /* @__PURE__ */ f(m, {
+					children: E === "grid" ? /* @__PURE__ */ f(m, {
 						stagger: .04,
 						className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
-						children: q.map((e) => /* @__PURE__ */ f(Ie, { children: /* @__PURE__ */ f(xe, {
+						children: W.map((e) => /* @__PURE__ */ f(Le, { children: /* @__PURE__ */ f(xe, {
 							vibe: e,
-							onOpen: St,
-							onActivate: We ? Ct : void 0,
-							onArchive: We ? wt : void 0,
-							onOpenInEditor: Dt,
-							selected: z.has(e.id),
-							onToggleSelect: (t) => kt(e, t)
+							onOpen: Et,
+							onActivate: Je ? Dt : void 0,
+							onArchive: Je ? Ot : void 0,
+							onOpenInEditor: jt,
+							selected: I.has(e.id),
+							onToggleSelect: (t) => Nt(e, t)
 						}) }, e.id))
 					}, "grid") : /* @__PURE__ */ f(m, { children: /* @__PURE__ */ f(Se, {
-						vibes: q,
-						onOpen: St,
-						onActivate: Ct,
-						onArchive: wt,
-						onOpenInEditor: Dt,
-						selectedVibeIds: z,
-						onToggleSelect: kt,
-						onToggleAllVisible: At,
-						allVisibleSelected: X,
-						partiallySelected: xt
+						vibes: W,
+						onOpen: Et,
+						onActivate: Dt,
+						onArchive: Ot,
+						onOpenInEditor: jt,
+						selectedVibeIds: I,
+						onToggleSelect: Nt,
+						onToggleAllVisible: Pt,
+						allVisibleSelected: q,
+						partiallySelected: Tt
 					}) }, "list")
 				}) : /* @__PURE__ */ f(fe, {
 					icon: /* @__PURE__ */ f(Me, { className: "size-8 text-text-secondary" }),
-					title: T || E !== "all" || D !== "all" || O !== "all" ? S("vibesPage.emptyNoVibesFound", "No vibes found") : S("vibesPage.emptyNoVibesConfigured", "No vibes configured"),
-					description: T || E !== "all" || D !== "all" || O !== "all" ? S("vibesPage.emptyAdjustSearch", "Try adjusting your search or filters") : S("vibesPage.emptyNoVibesDescription", "Add your first vibe to start managing your development projects"),
-					action: !T && E === "all" && D === "all" && O === "all" ? /* @__PURE__ */ p("div", {
+					title: S || C !== "all" || w !== "all" || T !== "all" ? b("vibesPage.emptyNoVibesFound", "No vibes found") : b("vibesPage.emptyNoVibesConfigured", "No vibes configured"),
+					description: S || C !== "all" || w !== "all" || T !== "all" ? b("vibesPage.emptyAdjustSearch", "Try adjusting your search or filters") : b("vibesPage.emptyNoVibesDescription", "Add your first vibe to start managing your development projects"),
+					action: !S && C === "all" && w === "all" && T === "all" ? /* @__PURE__ */ p("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ f(Be, {
+						children: [/* @__PURE__ */ f(Ve, {
 							permission: s.VIBE_CREATE,
 							children: /* @__PURE__ */ p("button", {
 								type: "button",
-								onClick: Ot,
+								onClick: J,
 								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(Ae, { className: "size-4" }), S("vibesPage.addVibe", "Add Vibe")]
+								children: [/* @__PURE__ */ f(Ae, { className: "size-4" }), b("vibesPage.addVibe", "Add Vibe")]
 							})
 						}), /* @__PURE__ */ f(he, { prompt: "What is a Vibe in VibeControls and how do I create one?" })]
 					}) : void 0
 				}),
-				N && /* @__PURE__ */ f("div", {
+				nt && /* @__PURE__ */ f("div", {
 					className: "fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-success-bg text-status-success-text rounded-md shadow-lg text-sm",
-					children: N
+					children: nt
 				}),
 				/* @__PURE__ */ f(e, {
-					isOpen: tt === "activate",
-					onClose: () => V(null),
-					onConfirm: jt,
+					isOpen: at === "activate",
+					onClose: () => R(null),
+					onConfirm: Ft,
 					title: "Activate selected vibes",
-					message: `Activate ${J.length} selected vibe${J.length === 1 ? "" : "s"}?`,
+					message: `Activate ${G.length} selected vibe${G.length === 1 ? "" : "s"}?`,
 					confirmLabel: "Activate",
 					variant: "default"
 				}),
 				/* @__PURE__ */ f(e, {
-					isOpen: tt === "archive",
-					onClose: () => V(null),
-					onConfirm: Mt,
+					isOpen: at === "archive",
+					onClose: () => R(null),
+					onConfirm: It,
 					title: "Archive selected vibes",
-					message: `Archive ${Y.length} selected vibe${Y.length === 1 ? "" : "s"}? Archived vibes will be hidden from active workflows.`,
+					message: `Archive ${K.length} selected vibe${K.length === 1 ? "" : "s"}? Archived vibes will be hidden from active workflows.`,
 					confirmLabel: "Archive",
 					variant: "warning"
 				}),
-				et && /* @__PURE__ */ p("div", {
+				it && /* @__PURE__ */ p("div", {
 					role: "alert",
 					className: "fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-error-bg text-status-error-text rounded-md shadow-lg text-sm",
-					children: [et, /* @__PURE__ */ f("button", {
+					children: [it, /* @__PURE__ */ f("button", {
 						type: "button",
-						onClick: nt,
+						onClick: ot,
 						className: "ml-3 text-xs underline opacity-80 hover:opacity-100",
-						children: S("vibesPage.dismiss", "Dismiss")
+						children: b("vibesPage.dismiss", "Dismiss")
 					})]
 				}),
-				Xe && /* @__PURE__ */ f("div", {
+				$e && /* @__PURE__ */ f("div", {
 					className: "fixed inset-0 bg-bg-overlay flex items-center justify-center z-50 p-4",
 					children: /* @__PURE__ */ p("div", {
 						className: "bg-bg-surface rounded-lg p-6 w-full max-w-lg",
 						children: [
 							/* @__PURE__ */ f("h2", {
 								className: "text-lg font-semibold text-text-primary mb-4",
-								children: S("vibesPage.addNewVibe", "Add New Vibe")
+								children: b("vibesPage.addNewVibe", "Add New Vibe")
 							}),
 							/* @__PURE__ */ p("div", {
 								className: "space-y-4",
 								children: [
-									Ze && /* @__PURE__ */ f("div", {
+									et && /* @__PURE__ */ f("div", {
 										className: "p-3 bg-status-error-bg text-status-error-text text-sm rounded-md",
-										children: Ze
+										children: et
 									}),
 									/* @__PURE__ */ p("div", { children: [
 										/* @__PURE__ */ f("label", {
 											className: "block text-sm font-medium text-text-primary mb-1",
-											children: S("vibesPage.nameLabel", "Name *")
+											children: b("vibesPage.nameLabel", "Name *")
 										}),
 										/* @__PURE__ */ f("input", {
 											"aria-label": "control",
-											ref: rt,
+											ref: st,
 											type: "text",
-											placeholder: S("vibesPage.namePlaceholder", "My Project"),
-											onChange: () => I.name && L((e) => ({
+											placeholder: b("vibesPage.namePlaceholder", "My Project"),
+											onChange: () => N.name && P((e) => ({
 												...e,
 												name: void 0
 											})),
-											className: `w-full px-3 py-2 bg-bg-sunken border rounded-md text-text-primary placeholder:text-text-placeholder ${I.name ? "border-status-error-border" : "border-border-default"}`
+											className: `w-full px-3 py-2 bg-bg-sunken border rounded-md text-text-primary placeholder:text-text-placeholder ${N.name ? "border-status-error-border" : "border-border-default"}`
 										}),
-										I.name && /* @__PURE__ */ f("p", {
+										N.name && /* @__PURE__ */ f("p", {
 											className: "mt-1 text-xs text-status-error-text",
-											children: I.name
+											children: N.name
 										})
 									] }),
 									/* @__PURE__ */ p("div", { children: [
 										/* @__PURE__ */ f("label", {
 											className: "block text-sm font-medium text-text-primary mb-1",
-											children: S("vibesPage.pathLabel", "Path *")
+											children: b("vibesPage.pathLabel", "Path *")
 										}),
 										/* @__PURE__ */ f("input", {
 											"aria-label": "control",
-											ref: it,
+											ref: ct,
 											type: "text",
-											placeholder: S("vibesPage.pathPlaceholder", "/path/to/project"),
-											onChange: () => I.path && L((e) => ({
+											placeholder: b("vibesPage.pathPlaceholder", "/path/to/project"),
+											onChange: () => N.path && P((e) => ({
 												...e,
 												path: void 0
 											})),
-											className: `w-full px-3 py-2 bg-bg-sunken border rounded-md text-text-primary placeholder:text-text-placeholder ${I.path ? "border-status-error-border" : "border-border-default"}`
+											className: `w-full px-3 py-2 bg-bg-sunken border rounded-md text-text-primary placeholder:text-text-placeholder ${N.path ? "border-status-error-border" : "border-border-default"}`
 										}),
-										I.path && /* @__PURE__ */ f("p", {
+										N.path && /* @__PURE__ */ f("p", {
 											className: "mt-1 text-xs text-status-error-text",
-											children: I.path
+											children: N.path
 										})
 									] }),
 									/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
 										className: "block text-sm font-medium text-text-primary mb-1",
-										children: S("vibesPage.agentLabel", "Agent")
+										children: b("vibesPage.agentLabel", "Agent")
 									}), /* @__PURE__ */ p("select", {
-										ref: at,
+										ref: lt,
 										className: "w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary",
 										children: [/* @__PURE__ */ f("option", {
 											value: "",
-											children: S("vibesPage.selectAgent", "Select an agent")
-										}), yt.filter((e) => e.value !== "all").map((e) => /* @__PURE__ */ f("option", {
+											children: b("vibesPage.selectAgent", "Select an agent")
+										}), Ct.filter((e) => e.value !== "all").map((e) => /* @__PURE__ */ f("option", {
 											value: e.value,
 											children: e.label
 										}, e.value))]
 									})] }),
 									/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
 										className: "block text-sm font-medium text-text-primary mb-1",
-										children: S("vibesPage.typeLabel", "Type")
+										children: b("vibesPage.typeLabel", "Type")
 									}), /* @__PURE__ */ p("select", {
-										ref: ot,
+										ref: ut,
 										className: "w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary",
 										children: [
 											/* @__PURE__ */ f("option", {
 												value: "PROJECT",
-												children: S("vibesPage.typeProject", "Project")
+												children: b("vibesPage.typeProject", "Project")
 											}),
 											/* @__PURE__ */ f("option", {
 												value: "REPOSITORY",
-												children: S("vibesPage.typeRepository", "Repository")
+												children: b("vibesPage.typeRepository", "Repository")
 											}),
 											/* @__PURE__ */ f("option", {
 												value: "WORKSPACE",
-												children: S("vibesPage.typeWorkspace", "Workspace")
+												children: b("vibesPage.typeWorkspace", "Workspace")
 											}),
 											/* @__PURE__ */ f("option", {
 												value: "MONOREPO",
-												children: S("vibesPage.typeMonorepo", "Monorepo")
+												children: b("vibesPage.typeMonorepo", "Monorepo")
 											}),
 											/* @__PURE__ */ f("option", {
 												value: "PACKAGE",
-												children: S("vibesPage.typePackage", "Package")
+												children: b("vibesPage.typePackage", "Package")
 											}),
 											/* @__PURE__ */ f("option", {
 												value: "CUSTOM",
-												children: S("vibesPage.typeCustom", "Custom")
+												children: b("vibesPage.typeCustom", "Custom")
 											})
 										]
 									})] })
@@ -592,36 +605,36 @@ function h() {
 								className: "mt-4 border-t border-border-default pt-4",
 								children: [/* @__PURE__ */ f("h3", {
 									className: "text-sm font-medium text-text-secondary mb-2",
-									children: S("vibesPage.tags", "Tags")
+									children: b("vibesPage.tags", "Tags")
 								}), /* @__PURE__ */ f(ue, {
 									entityType: "VIBECONTROLS_VIBE",
-									onDraftChange: lt
+									onDraftChange: pt
 								})]
 							}),
 							/* @__PURE__ */ p("div", {
 								className: "flex flex-col sm:flex-row justify-end gap-3 mt-6",
 								children: [/* @__PURE__ */ f("button", {
 									type: "button",
-									onClick: () => A(!1),
-									disabled: M,
+									onClick: () => O(!1),
+									disabled: A,
 									className: "px-4 py-2 text-text-primary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50",
-									children: S("vibesPage.cancel", "Cancel")
+									children: b("vibesPage.cancel", "Cancel")
 								}), /* @__PURE__ */ f("button", {
 									type: "button",
-									onClick: Nt,
-									disabled: M,
+									onClick: Lt,
+									disabled: A,
 									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: M ? S("vibesPage.creating", "Creating...") : S("vibesPage.createVibe", "Create Vibe")
+									children: A ? b("vibesPage.creating", "Creating...") : b("vibesPage.createVibe", "Create Vibe")
 								})]
 							})
 						]
 					})
 				}),
 				/* @__PURE__ */ f(t, {
-					isOpen: $e,
-					onClose: () => F(!1),
+					isOpen: rt,
+					onClose: () => M(!1),
 					onConfirm: () => {
-						F(!1), g("/billing");
+						M(!1), g("/billing");
 					},
 					title: "Vibe Quota Reached",
 					message: "You've used all available vibe creation quota on your current plan. Upgrade your plan to create more vibes."