@burdenoff/microfe-vibecontrols 2026.520.1 → 2026.520.2

package/dist/pages/VibesPage.js

@@ -6,113 +6,115 @@ import { ErrorState as re } from "../components/shared/ErrorState.js";
 import { ConfirmDialog as ie } from "../components/shared/ConfirmDialog.js";
 import { QuotaExhaustedDialog as ae } from "../components/shared/QuotaExhaustedDialog.js";
 import { isQuotaExhaustedError as oe } from "../utils/quotaUtils.js";
-import { EmptyState as se } from "../components/shared/EmptyState.js";
-import { SearchInput as ce } from "../components/shared/SearchInput.js";
+import { EntityTagPicker as se } from "../components/shared/EntityTagPicker.js";
+import { useDraftEntityTags as ce } from "../hooks/useDraftEntityTags.js";
+import { EmptyState as le } from "../components/shared/EmptyState.js";
+import { SearchInput as ue } from "../components/shared/SearchInput.js";
 import { FilterDropdown as o } from "../components/shared/FilterDropdown.js";
-import { GetHelpButton as le } from "../components/shared/GetHelpButton.js";
-import { SelectionCheckbox as ue } from "../components/shared/SelectionCheckbox.js";
+import { GetHelpButton as de } from "../components/shared/GetHelpButton.js";
+import { SelectionCheckbox as fe } from "../components/shared/SelectionCheckbox.js";
 import "../components/shared/index.js";
 import { VIBE_PERMISSIONS as s } from "../constants/permissions.js";
-import { VibeCard as de } from "../components/vibes/VibeCard.js";
-import { VibeList as fe } from "../components/vibes/VibeList.js";
+import { VibeCard as pe } from "../components/vibes/VibeCard.js";
+import { VibeList as me } from "../components/vibes/VibeList.js";
 import "../components/vibes/index.js";
-import { useCallback as c, useEffect as pe, useMemo as l, useRef as u, useState as d } from "react";
-import { useI18n as me } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Archive as he, Grid as ge, List as _e, Play as ve, Plus as ye, RefreshCw as be, Zap as xe } from "lucide-react";
-import { usePermissions as Se } from "@burdenoff/fe-libs/shared/providers/shell";
-import { AnimatePresence as Ce } from "framer-motion";
-import { Fragment as we, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { MotionItem as Te, MotionList as Ee, MotionPage as De } from "@burdenoff/fe-libs/shared/motion";
-import { AccessDenied as Oe, PermissionButton as ke, PermissionGate as Ae } from "@burdenoff/fe-libs/shared/components";
+import { useCallback as he, useEffect as ge, useMemo as c, useRef as l, useState as u } from "react";
+import { useI18n as _e } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Archive as ve, Grid as ye, List as be, Play as xe, Plus as Se, RefreshCw as Ce, Zap as we } from "lucide-react";
+import { usePermissions as Te } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AnimatePresence as Ee } from "framer-motion";
+import { Fragment as De, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { MotionItem as Oe, MotionList as ke, MotionPage as Ae } from "@burdenoff/fe-libs/shared/motion";
+import { AccessDenied as je, PermissionButton as Me, PermissionGate as Ne } from "@burdenoff/fe-libs/shared/components";
 //#region src/pages/VibesPage.tsx
-function m() {
-	let { onVibeActivate: m } = a(), h = ee(), { hasPermission: g, isLoading: _, permissions: v } = Se(), { t: y } = me(), b = c((e, t, n) => {
-		let r = y(e, n), i = r === e ? t : r;
+function p() {
+	let { onVibeActivate: p } = a(), m = ee(), { hasPermission: h, isLoading: g, permissions: _ } = Te(), { t: v } = _e(), y = he((e, t, n) => {
+		let r = v(e, n), i = r === e ? t : r;
 		return n ? Object.entries(n).reduce((e, [t, n]) => e.replace(`{{${t}}}`, String(n)), i) : i;
-	}, [y]), je = [
+	}, [v]), Pe = [
 		{
 			value: "all",
-			label: b("vibesPage.statusAll", "All Statuses")
+			label: y("vibesPage.statusAll", "All Statuses")
 		},
 		{
 			value: "ACTIVE",
-			label: b("vibesPage.statusActive", "Active")
+			label: y("vibesPage.statusActive", "Active")
 		},
 		{
 			value: "INACTIVE",
-			label: b("vibesPage.statusInactive", "Inactive")
+			label: y("vibesPage.statusInactive", "Inactive")
 		},
 		{
 			value: "ARCHIVED",
-			label: b("vibesPage.statusArchived", "Archived")
+			label: y("vibesPage.statusArchived", "Archived")
 		},
 		{
 			value: "ERROR",
-			label: b("vibesPage.statusError", "Error")
+			label: y("vibesPage.statusError", "Error")
 		}
-	], Me = [
+	], Fe = [
 		{
 			value: "all",
-			label: b("vibesPage.typeAll", "All Types")
+			label: y("vibesPage.typeAll", "All Types")
 		},
 		{
 			value: "PROJECT",
-			label: b("vibesPage.typeProject", "Project")
+			label: y("vibesPage.typeProject", "Project")
 		},
 		{
 			value: "REPOSITORY",
-			label: b("vibesPage.typeRepository", "Repository")
+			label: y("vibesPage.typeRepository", "Repository")
 		},
 		{
 			value: "WORKSPACE",
-			label: b("vibesPage.typeWorkspace", "Workspace")
+			label: y("vibesPage.typeWorkspace", "Workspace")
 		},
 		{
 			value: "MONOREPO",
-			label: b("vibesPage.typeMonorepo", "Monorepo")
+			label: y("vibesPage.typeMonorepo", "Monorepo")
 		},
 		{
 			value: "PACKAGE",
-			label: b("vibesPage.typePackage", "Package")
+			label: y("vibesPage.typePackage", "Package")
 		},
 		{
 			value: "CUSTOM",
-			label: b("vibesPage.typeCustom", "Custom")
+			label: y("vibesPage.typeCustom", "Custom")
 		}
-	], x = g(s.VIBE_LIST), S = g(s.VIBE_UPDATE), C = _ || !x, [w, Ne] = d(""), [T, Pe] = d("all"), [E, Fe] = d("all"), [D, Ie] = d("all"), [O, k] = d("grid"), [Le, A] = d(!1), [j, M] = d(null), [N, Re] = d(!1), [ze, P] = d(null), [Be, F] = d(!1), [I, L] = d({}), [Ve, R] = d(null), [z, B] = d(/* @__PURE__ */ new Set()), [He, V] = d(null), H = u(null);
-	pe(() => () => {
-		H.current && clearTimeout(H.current);
+	], b = h(s.VIBE_LIST), x = h(s.VIBE_UPDATE), S = g || !b, [C, Ie] = u(""), [w, Le] = u("all"), [T, Re] = u("all"), [E, ze] = u("all"), [D, O] = u("grid"), [Be, k] = u(!1), [A, j] = u(null), [M, Ve] = u(!1), [He, N] = u(null), [Ue, P] = u(!1), [F, I] = u({}), [We, L] = u(null), [R, z] = u(/* @__PURE__ */ new Set()), [Ge, B] = u(null), V = l(null);
+	ge(() => () => {
+		V.current && clearTimeout(V.current);
 	}, []);
-	let Ue = c(() => {
-		R(null), H.current &&= (clearTimeout(H.current), null);
-	}, []), We = u(null), Ge = u(null), Ke = u(null), qe = u(null), [Je] = t(), [Ye] = i(), [Xe] = e(), { data: Ze, loading: U, error: Qe, refetch: W } = r({
-		variables: l(() => ({ filter: {
-			status: T === "all" ? void 0 : T,
-			type: E === "all" ? void 0 : E,
-			attachedAgentIds: D === "all" ? void 0 : [D]
+	let Ke = he(() => {
+		L(null), V.current &&= (clearTimeout(V.current), null);
+	}, []), qe = l(null), Je = l(null), Ye = l(null), Xe = l(null), [Ze] = t(), { setDraftTagIds: Qe, flushTags: $e } = ce("VIBECONTROLS_VIBE"), [et] = i(), [tt] = e(), { data: nt, loading: H, error: rt, refetch: U } = r({
+		variables: c(() => ({ filter: {
+			status: w === "all" ? void 0 : w,
+			type: T === "all" ? void 0 : T,
+			attachedAgentIds: E === "all" ? void 0 : [E]
 		} }), [
+			w,
 			T,
-			E,
-			D
+			E
 		]),
 		fetchPolicy: "cache-and-network",
 		nextFetchPolicy: "cache-first",
-		skip: C,
+		skip: S,
 		notifyOnNetworkStatusChange: !0
-	}), { data: $e } = n({
+	}), { data: it } = n({
 		variables: { pagination: { limit: 100 } },
 		fetchPolicy: "cache-first",
-		skip: C
-	}), et = l(() => {
-		let e = $e?.vibecontrolsAgents ?? [];
+		skip: S
+	}), at = c(() => {
+		let e = it?.vibecontrolsAgents ?? [];
 		return [{
 			value: "all",
-			label: b("vibesPage.allAgents", "All Agents")
+			label: y("vibesPage.allAgents", "All Agents")
 		}, ...e.map((e) => ({
 			value: e.id,
 			label: e.name
 		}))];
-	}, [$e?.vibecontrolsAgents, b]), G = l(() => (Ze?.vibes?.items ?? []).map((e) => ({
+	}, [it?.vibecontrolsAgents, y]), W = c(() => (nt?.vibes?.items ?? []).map((e) => ({
 		id: e.id,
 		workspaceId: e.workspaceId,
 		name: e.name,
@@ -135,20 +137,20 @@ function m() {
 			isActive: e.isActive,
 			ownerUserId: e.ownerUserId ?? null
 		}))
-	})), [Ze?.vibes?.items]), K = l(() => G.filter((e) => {
-		if (w) {
-			let t = w.toLowerCase();
+	})), [nt?.vibes?.items]), G = c(() => W.filter((e) => {
+		if (C) {
+			let t = C.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;
-	}), [G, w]), tt = l(() => G.filter((e) => z.has(e.id)), [G, z]), q = tt.filter((e) => e.status !== "ACTIVE"), J = tt.filter((e) => e.status !== "ARCHIVED"), Y = K.length > 0 && K.every((e) => z.has(e.id)), nt = K.some((e) => z.has(e.id)) && !Y, rt = (e) => {
-		h(`/vibes/${e.id}`);
-	}, it = async (e) => {
+	}), [W, C]), ot = c(() => W.filter((e) => R.has(e.id)), [W, R]), K = ot.filter((e) => e.status !== "ACTIVE"), q = ot.filter((e) => e.status !== "ARCHIVED"), J = G.length > 0 && G.every((e) => R.has(e.id)), st = G.some((e) => R.has(e.id)) && !J, ct = (e) => {
+		m(`/vibes/${e.id}`);
+	}, Y = async (e) => {
 		try {
-			(await Ye({ variables: {
+			(await et({ variables: {
 				id: e.id,
 				status: "ACTIVE"
-			} })).data?.updateVibeStatus && m?.({
+			} })).data?.updateVibeStatus && p?.({
 				id: e.id,
 				name: e.name,
 				type: e.type,
@@ -157,48 +159,48 @@ function m() {
 		} catch (e) {
 			console.error("Failed to activate vibe:", e);
 		}
-	}, at = async (e) => {
+	}, lt = async (e) => {
 		try {
-			await Xe({ variables: { id: e.id } });
+			await tt({ variables: { id: e.id } });
 		} catch (e) {
 			console.error("Failed to archive vibe:", e);
 		}
-	}, ot = (e) => {
-		e.path ? window.location.href = `vscode://file/${e.path}` : (R(b("vibesPage.openEditorPathMissing", "No path available to open in editor")), H.current = setTimeout(() => {
-			R(null), H.current = null;
+	}, ut = (e) => {
+		e.path ? window.location.href = `vscode://file/${e.path}` : (L(y("vibesPage.openEditorPathMissing", "No path available to open in editor")), V.current = setTimeout(() => {
+			L(null), V.current = null;
 		}, 3e3));
-	}, st = () => {
-		M(null), A(!0);
-	}, X = (e, t) => {
-		B((n) => {
+	}, dt = () => {
+		j(null), k(!0);
+	}, ft = (e, t) => {
+		z((n) => {
 			let r = new Set(n);
 			return t ? r.add(e.id) : r.delete(e.id), r;
 		});
-	}, ct = (e) => {
-		B((t) => {
+	}, pt = (e) => {
+		z((t) => {
 			let n = new Set(t);
-			return K.forEach((t) => {
+			return G.forEach((t) => {
 				e ? n.add(t.id) : n.delete(t.id);
 			}), n;
 		});
-	}, Z = () => B(/* @__PURE__ */ new Set()), lt = async () => {
-		if (q.length === 0) return;
-		let e = await Promise.allSettled(q.map((e) => Ye({ variables: {
+	}, X = () => z(/* @__PURE__ */ new Set()), mt = async () => {
+		if (K.length === 0) return;
+		let e = await Promise.allSettled(K.map((e) => et({ 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();
-	}, ut = async () => {
-		if (J.length === 0) return;
-		let e = await Promise.allSettled(J.map((e) => Xe({ 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();
-	}, dt = async () => {
-		let e = We.current?.value?.trim(), t = Ge.current?.value?.trim(), n = Ke.current?.value, r = qe.current?.value, i = {};
-		if (e || (i.name = b("vibesPage.nameRequired", "Name is required")), t || (i.path = b("vibesPage.pathRequired", "Path is required")), i.name || i.path) {
-			L(i), M(b("vibesPage.fillRequired", "Please fill in all required fields"));
+		N(`Activated ${t} vibe${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`), setTimeout(() => N(null), 4e3), X(), B(null), await U();
+	}, ht = async () => {
+		if (q.length === 0) return;
+		let e = await Promise.allSettled(q.map((e) => tt({ variables: { id: e.id } }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.length - t;
+		N(`Archived ${t} vibe${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`), setTimeout(() => N(null), 4e3), X(), B(null), await U();
+	}, gt = async () => {
+		let e = qe.current?.value?.trim(), t = Je.current?.value?.trim(), n = Ye.current?.value, r = Xe.current?.value, i = {};
+		if (e || (i.name = y("vibesPage.nameRequired", "Name is required")), t || (i.path = y("vibesPage.pathRequired", "Path is required")), i.name || i.path) {
+			I(i), j(y("vibesPage.fillRequired", "Please fill in all required fields"));
 			return;
 		}
-		L({});
+		I({});
 		let a = [
 			"PROJECT",
 			"REPOSITORY",
@@ -207,179 +209,180 @@ function m() {
 			"PACKAGE",
 			"CUSTOM"
 		].includes(r) ? r : "PROJECT";
-		Re(!0), M(null);
+		Ve(!0), j(null);
 		try {
-			if (!(await Je({ variables: { input: {
+			let r = await Ze({ variables: { input: {
 				name: e,
 				path: t,
 				type: a,
 				agentId: n || void 0
-			} } })).data?.createVibe?.id) throw Error(b("vibesPage.failedCreate", "Failed to create vibe"));
-			await W(), A(!1), P(b("vibesPage.createdSuccess", "Vibe created successfully")), setTimeout(() => P(null), 3e3);
+			} } });
+			if (!r.data?.createVibe?.id) throw Error(y("vibesPage.failedCreate", "Failed to create vibe"));
+			await $e(r.data.createVibe.id), await U(), k(!1), N(y("vibesPage.createdSuccess", "Vibe created successfully")), setTimeout(() => N(null), 3e3);
 		} catch (e) {
 			if (oe(e)) {
-				A(!1), M(null), L({}), F(!0);
+				k(!1), j(null), I({}), P(!0);
 				return;
 			}
-			M(e instanceof Error ? e.message : b("vibesPage.failedCreate", "Failed to create vibe"));
+			j(e instanceof Error ? e.message : y("vibesPage.failedCreate", "Failed to create vibe"));
 		} finally {
-			Re(!1);
+			Ve(!1);
 		}
-	}, ft = {
-		total: G.length,
-		active: G.filter((e) => e.status === "ACTIVE").length,
-		inactive: G.filter((e) => e.status === "INACTIVE").length
-	}, Q = _, $ = !_ && !!v && (v.permissionStrings?.length ?? 0) > 0 && !x, pt = !Q && !$ && U && G.length === 0, mt = !Q && !$ && !!Qe && G.length === 0, ht = !Q && !$ && !pt && !mt;
-	return /* @__PURE__ */ p(De, {
+	}, _t = {
+		total: W.length,
+		active: W.filter((e) => e.status === "ACTIVE").length,
+		inactive: W.filter((e) => e.status === "INACTIVE").length
+	}, Z = g, Q = !g && !!_ && (_.permissionStrings?.length ?? 0) > 0 && !b, vt = !Z && !Q && H && W.length === 0, $ = !Z && !Q && !!rt && W.length === 0, yt = !Z && !Q && !vt && !$;
+	return /* @__PURE__ */ f(Ae, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: [
-			Q && /* @__PURE__ */ f(ne, { message: b("vibesPage.loadingPermissions", "Loading permissions...") }),
-			$ && /* @__PURE__ */ f(Oe, {
-				title: b("vibesPage.accessDeniedTitle", "Access Denied"),
-				description: b("vibesPage.accessDeniedDescription", "You don't have permission to view vibes. Contact your workspace administrator for access.")
+			Z && /* @__PURE__ */ d(ne, { message: y("vibesPage.loadingPermissions", "Loading permissions...") }),
+			Q && /* @__PURE__ */ d(je, {
+				title: y("vibesPage.accessDeniedTitle", "Access Denied"),
+				description: y("vibesPage.accessDeniedDescription", "You don't have permission to view vibes. Contact your workspace administrator for access.")
 			}),
-			pt && /* @__PURE__ */ f(ne, { message: b("vibesPage.loadingVibes", "Loading vibes...") }),
-			mt && /* @__PURE__ */ f(re, {
-				title: b("vibesPage.failedLoad", "Failed to load vibes"),
-				message: Qe?.message ?? "",
-				onRetry: () => W()
+			vt && /* @__PURE__ */ d(ne, { message: y("vibesPage.loadingVibes", "Loading vibes...") }),
+			$ && /* @__PURE__ */ d(re, {
+				title: y("vibesPage.failedLoad", "Failed to load vibes"),
+				message: rt?.message ?? "",
+				onRetry: () => U()
 			}),
-			ht && /* @__PURE__ */ p(we, { children: [
-				/* @__PURE__ */ f(te, {
-					title: b("vibesPage.title", "Vibes"),
-					description: b("vibesPage.descriptionActive", "{{active}} of {{total}} vibes active", {
-						active: ft.active,
-						total: ft.total
+			yt && /* @__PURE__ */ f(De, { children: [
+				/* @__PURE__ */ d(te, {
+					title: y("vibesPage.title", "Vibes"),
+					description: y("vibesPage.descriptionActive", "{{active}} of {{total}} vibes active", {
+						active: _t.active,
+						total: _t.total
 					}),
-					actions: /* @__PURE__ */ p("div", {
+					actions: /* @__PURE__ */ f("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ f("button", {
-							onClick: () => W(),
-							disabled: U,
+						children: [/* @__PURE__ */ d("button", {
+							onClick: () => U(),
+							disabled: H,
 							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: b("vibesPage.refreshTitle", "Refresh vibes"),
-							children: /* @__PURE__ */ f(be, { className: `w-4 h-4 ${U ? "animate-spin" : ""}` })
-						}), /* @__PURE__ */ f(ke, {
+							title: y("vibesPage.refreshTitle", "Refresh vibes"),
+							children: /* @__PURE__ */ d(Ce, { className: `w-4 h-4 ${H ? "animate-spin" : ""}` })
+						}), /* @__PURE__ */ d(Me, {
 							permission: s.VIBE_CREATE,
 							deniedBehavior: "disable",
-							deniedTooltip: b("vibesPage.deniedCreateTooltip", "You don't have permission to create vibes"),
-							children: /* @__PURE__ */ p("button", {
-								onClick: st,
+							deniedTooltip: y("vibesPage.deniedCreateTooltip", "You don't have permission to create vibes"),
+							children: /* @__PURE__ */ f("button", {
+								onClick: dt,
 								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(ye, { className: "w-4 h-4" }), b("vibesPage.addVibe", "Add Vibe")]
+								children: [/* @__PURE__ */ d(Se, { className: "w-4 h-4" }), y("vibesPage.addVibe", "Add Vibe")]
 							})
 						})]
 					})
 				}),
-				/* @__PURE__ */ p("div", {
+				/* @__PURE__ */ f("div", {
 					className: "space-y-3",
-					children: [/* @__PURE__ */ p("div", {
+					children: [/* @__PURE__ */ f("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ f(ce, {
-							value: w,
-							onChange: Ne,
-							placeholder: b("vibesPage.searchPlaceholder", "Search vibes..."),
+						children: [/* @__PURE__ */ d(ue, {
+							value: C,
+							onChange: Ie,
+							placeholder: y("vibesPage.searchPlaceholder", "Search vibes..."),
 							className: "flex-1 sm:w-64 sm:flex-none"
-						}), /* @__PURE__ */ p("div", {
+						}), /* @__PURE__ */ f("div", {
 							className: "flex items-center gap-1 bg-bg-sunken rounded-md p-1 flex-shrink-0",
-							children: [/* @__PURE__ */ f("button", {
-								onClick: () => k("grid"),
-								className: `p-1.5 sm:p-2 rounded ${O === "grid" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
-								title: b("vibesPage.gridViewTitle", "Grid view"),
-								children: /* @__PURE__ */ f(ge, { className: "w-4 h-4 text-text-secondary" })
-							}), /* @__PURE__ */ f("button", {
-								onClick: () => k("list"),
-								className: `p-1.5 sm:p-2 rounded ${O === "list" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
-								title: b("vibesPage.listViewTitle", "List view"),
-								children: /* @__PURE__ */ f(_e, { className: "w-4 h-4 text-text-secondary" })
+							children: [/* @__PURE__ */ d("button", {
+								onClick: () => O("grid"),
+								className: `p-1.5 sm:p-2 rounded ${D === "grid" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+								title: y("vibesPage.gridViewTitle", "Grid view"),
+								children: /* @__PURE__ */ d(ye, { className: "w-4 h-4 text-text-secondary" })
+							}), /* @__PURE__ */ d("button", {
+								onClick: () => O("list"),
+								className: `p-1.5 sm:p-2 rounded ${D === "list" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+								title: y("vibesPage.listViewTitle", "List view"),
+								children: /* @__PURE__ */ d(be, { className: "w-4 h-4 text-text-secondary" })
 							})]
 						})]
-					}), /* @__PURE__ */ p("div", {
+					}), /* @__PURE__ */ f("div", {
 						className: "flex items-center gap-2 sm:gap-3 flex-wrap",
 						children: [
-							/* @__PURE__ */ f(o, {
-								label: b("vibesPage.filterStatus", "Status"),
+							/* @__PURE__ */ d(o, {
+								label: y("vibesPage.filterStatus", "Status"),
+								value: w,
+								options: Pe,
+								onChange: Le
+							}),
+							/* @__PURE__ */ d(o, {
+								label: y("vibesPage.filterType", "Type"),
 								value: T,
-								options: je,
-								onChange: Pe
+								options: Fe,
+								onChange: Re
 							}),
-							/* @__PURE__ */ f(o, {
-								label: b("vibesPage.filterType", "Type"),
+							/* @__PURE__ */ d(o, {
+								label: y("vibesPage.filterAgent", "Agent"),
 								value: E,
-								options: Me,
-								onChange: Fe
-							}),
-							/* @__PURE__ */ f(o, {
-								label: b("vibesPage.filterAgent", "Agent"),
-								value: D,
-								options: et,
-								onChange: Ie
+								options: at,
+								onChange: ze
 							})
 						]
 					})]
 				}),
-				w || T !== "all" || E !== "all" || D !== "all" ? /* @__PURE__ */ p("p", {
+				C || w !== "all" || T !== "all" || E !== "all" ? /* @__PURE__ */ f("p", {
 					className: "text-sm text-text-secondary",
-					children: [b("vibesPage.showingResults", "Showing {{filtered}} of {{total}} vibes", {
-						filtered: K.length,
-						total: G.length
-					}), U && /* @__PURE__ */ f("span", {
+					children: [y("vibesPage.showingResults", "Showing {{filtered}} of {{total}} vibes", {
+						filtered: G.length,
+						total: W.length
+					}), H && /* @__PURE__ */ d("span", {
 						className: "ml-2 text-text-muted",
-						children: b("vibesPage.refreshing", "(refreshing...)")
+						children: y("vibesPage.refreshing", "(refreshing...)")
 					})]
 				}) : null,
-				K.length > 0 && /* @__PURE__ */ f("div", {
+				G.length > 0 && /* @__PURE__ */ d("div", {
 					className: "rounded-lg border border-border-default bg-bg-surface p-4",
-					children: /* @__PURE__ */ p("div", {
+					children: /* @__PURE__ */ f("div", {
 						className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between",
-						children: [/* @__PURE__ */ p("div", {
+						children: [/* @__PURE__ */ f("div", {
 							className: "flex flex-wrap items-center gap-3",
-							children: [/* @__PURE__ */ p("div", {
+							children: [/* @__PURE__ */ f("div", {
 								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ f(ue, {
-									checked: Y,
-									indeterminate: nt,
-									onChange: ct,
+								children: [/* @__PURE__ */ d(fe, {
+									checked: J,
+									indeterminate: st,
+									onChange: pt,
 									ariaLabel: "Select all visible vibes"
-								}), /* @__PURE__ */ f("span", {
+								}), /* @__PURE__ */ d("span", {
 									className: "text-sm font-medium text-text-primary",
 									children: "Select all visible"
 								})]
-							}), z.size > 0 && /* @__PURE__ */ f("button", {
-								onClick: Z,
+							}), R.size > 0 && /* @__PURE__ */ d("button", {
+								onClick: X,
 								className: "text-sm text-text-secondary hover:text-text-primary",
 								children: "Clear selection"
 							})]
-						}), /* @__PURE__ */ p("div", {
+						}), /* @__PURE__ */ f("div", {
 							className: "flex flex-wrap items-center gap-2",
 							children: [
-								/* @__PURE__ */ p("span", {
+								/* @__PURE__ */ f("span", {
 									className: "rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary",
-									children: [z.size, " selected"]
+									children: [R.size, " selected"]
 								}),
-								/* @__PURE__ */ f("button", {
-									onClick: () => V("activate"),
-									disabled: q.length === 0,
+								/* @__PURE__ */ d("button", {
+									onClick: () => B("activate"),
+									disabled: K.length === 0,
 									className: "rounded-md border border-status-success-border px-3 py-2 text-sm font-medium text-status-success-text hover:bg-status-success-bg disabled:cursor-not-allowed disabled:opacity-50",
-									children: /* @__PURE__ */ p("span", {
+									children: /* @__PURE__ */ f("span", {
 										className: "inline-flex items-center gap-2",
 										children: [
-											/* @__PURE__ */ f(ve, { className: "w-4 h-4" }),
+											/* @__PURE__ */ d(xe, { className: "w-4 h-4" }),
 											"Activate Selected",
-											q.length > 0 ? ` (${q.length})` : ""
+											K.length > 0 ? ` (${K.length})` : ""
 										]
 									})
 								}),
-								/* @__PURE__ */ f("button", {
-									onClick: () => V("archive"),
-									disabled: J.length === 0,
+								/* @__PURE__ */ d("button", {
+									onClick: () => B("archive"),
+									disabled: q.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", {
+									children: /* @__PURE__ */ f("span", {
 										className: "inline-flex items-center gap-2",
 										children: [
-											/* @__PURE__ */ f(he, { className: "w-4 h-4" }),
+											/* @__PURE__ */ d(ve, { className: "w-4 h-4" }),
 											"Archive Selected",
-											J.length > 0 ? ` (${J.length})` : ""
+											q.length > 0 ? ` (${q.length})` : ""
 										]
 									})
 								})
@@ -387,206 +390,216 @@ function m() {
 						})]
 					})
 				}),
-				K.length > 0 ? /* @__PURE__ */ f(Ce, {
+				G.length > 0 ? /* @__PURE__ */ d(Ee, {
 					mode: "wait",
-					children: O === "grid" ? /* @__PURE__ */ f(Ee, {
+					children: D === "grid" ? /* @__PURE__ */ d(ke, {
 						stagger: .04,
 						className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
-						children: K.map((e) => /* @__PURE__ */ f(Te, { children: /* @__PURE__ */ f(de, {
+						children: G.map((e) => /* @__PURE__ */ d(Oe, { children: /* @__PURE__ */ d(pe, {
 							vibe: e,
-							onOpen: rt,
-							onActivate: S ? it : void 0,
-							onArchive: S ? at : void 0,
-							onOpenInEditor: ot,
-							selected: z.has(e.id),
-							onToggleSelect: (t) => X(e, t)
+							onOpen: ct,
+							onActivate: x ? Y : void 0,
+							onArchive: x ? lt : void 0,
+							onOpenInEditor: ut,
+							selected: R.has(e.id),
+							onToggleSelect: (t) => ft(e, t)
 						}) }, e.id))
-					}, "grid") : /* @__PURE__ */ f(Ee, { children: /* @__PURE__ */ f(fe, {
-						vibes: K,
-						onOpen: rt,
-						onActivate: it,
-						onArchive: at,
-						onOpenInEditor: ot,
-						selectedVibeIds: z,
-						onToggleSelect: X,
-						onToggleAllVisible: ct,
-						allVisibleSelected: Y,
-						partiallySelected: nt
+					}, "grid") : /* @__PURE__ */ d(ke, { children: /* @__PURE__ */ d(me, {
+						vibes: G,
+						onOpen: ct,
+						onActivate: Y,
+						onArchive: lt,
+						onOpenInEditor: ut,
+						selectedVibeIds: R,
+						onToggleSelect: ft,
+						onToggleAllVisible: pt,
+						allVisibleSelected: J,
+						partiallySelected: st
 					}) }, "list")
-				}) : /* @__PURE__ */ f(se, {
-					icon: /* @__PURE__ */ f(xe, { className: "w-8 h-8 text-text-secondary" }),
-					title: w || T !== "all" || E !== "all" || D !== "all" ? b("vibesPage.emptyNoVibesFound", "No vibes found") : b("vibesPage.emptyNoVibesConfigured", "No vibes configured"),
-					description: w || T !== "all" || E !== "all" || D !== "all" ? b("vibesPage.emptyAdjustSearch", "Try adjusting your search or filters") : b("vibesPage.emptyNoVibesDescription", "Add your first vibe to start managing your development projects"),
-					action: !w && T === "all" && E === "all" && D === "all" ? /* @__PURE__ */ p("div", {
+				}) : /* @__PURE__ */ d(le, {
+					icon: /* @__PURE__ */ d(we, { className: "w-8 h-8 text-text-secondary" }),
+					title: C || w !== "all" || T !== "all" || E !== "all" ? y("vibesPage.emptyNoVibesFound", "No vibes found") : y("vibesPage.emptyNoVibesConfigured", "No vibes configured"),
+					description: C || w !== "all" || T !== "all" || E !== "all" ? y("vibesPage.emptyAdjustSearch", "Try adjusting your search or filters") : y("vibesPage.emptyNoVibesDescription", "Add your first vibe to start managing your development projects"),
+					action: !C && w === "all" && T === "all" && E === "all" ? /* @__PURE__ */ f("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ f(Ae, {
+						children: [/* @__PURE__ */ d(Ne, {
 							permission: s.VIBE_CREATE,
-							children: /* @__PURE__ */ p("button", {
-								onClick: st,
+							children: /* @__PURE__ */ f("button", {
+								onClick: dt,
 								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(ye, { className: "w-4 h-4" }), b("vibesPage.addVibe", "Add Vibe")]
+								children: [/* @__PURE__ */ d(Se, { className: "w-4 h-4" }), y("vibesPage.addVibe", "Add Vibe")]
 							})
-						}), /* @__PURE__ */ f(le, { prompt: "What is a Vibe in VibeControls and how do I create one?" })]
+						}), /* @__PURE__ */ d(de, { prompt: "What is a Vibe in VibeControls and how do I create one?" })]
 					}) : void 0
 				}),
-				ze && /* @__PURE__ */ f("div", {
+				He && /* @__PURE__ */ d("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: ze
+					children: He
 				}),
-				/* @__PURE__ */ f(ie, {
-					isOpen: He === "activate",
-					onClose: () => V(null),
-					onConfirm: lt,
+				/* @__PURE__ */ d(ie, {
+					isOpen: Ge === "activate",
+					onClose: () => B(null),
+					onConfirm: mt,
 					title: "Activate selected vibes",
-					message: `Activate ${q.length} selected vibe${q.length === 1 ? "" : "s"}?`,
+					message: `Activate ${K.length} selected vibe${K.length === 1 ? "" : "s"}?`,
 					confirmLabel: "Activate",
 					variant: "default"
 				}),
-				/* @__PURE__ */ f(ie, {
-					isOpen: He === "archive",
-					onClose: () => V(null),
-					onConfirm: ut,
+				/* @__PURE__ */ d(ie, {
+					isOpen: Ge === "archive",
+					onClose: () => B(null),
+					onConfirm: ht,
 					title: "Archive selected vibes",
-					message: `Archive ${J.length} selected vibe${J.length === 1 ? "" : "s"}? Archived vibes will be hidden from active workflows.`,
+					message: `Archive ${q.length} selected vibe${q.length === 1 ? "" : "s"}? Archived vibes will be hidden from active workflows.`,
 					confirmLabel: "Archive",
 					variant: "warning"
 				}),
-				Ve && /* @__PURE__ */ p("div", {
+				We && /* @__PURE__ */ f("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: [Ve, /* @__PURE__ */ f("button", {
-						onClick: Ue,
+					children: [We, /* @__PURE__ */ d("button", {
+						onClick: Ke,
 						className: "ml-3 text-xs underline opacity-80 hover:opacity-100",
-						children: b("vibesPage.dismiss", "Dismiss")
+						children: y("vibesPage.dismiss", "Dismiss")
 					})]
 				}),
-				Le && /* @__PURE__ */ f("div", {
+				Be && /* @__PURE__ */ d("div", {
 					className: "fixed inset-0 bg-bg-overlay flex items-center justify-center z-50 p-4",
-					children: /* @__PURE__ */ p("div", {
+					children: /* @__PURE__ */ f("div", {
 						className: "bg-bg-surface rounded-lg p-6 w-full max-w-lg",
 						children: [
-							/* @__PURE__ */ f("h2", {
+							/* @__PURE__ */ d("h2", {
 								className: "text-lg font-semibold text-text-primary mb-4",
-								children: b("vibesPage.addNewVibe", "Add New Vibe")
+								children: y("vibesPage.addNewVibe", "Add New Vibe")
 							}),
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ f("div", {
 								className: "space-y-4",
 								children: [
-									j && /* @__PURE__ */ f("div", {
+									A && /* @__PURE__ */ d("div", {
 										className: "p-3 bg-status-error-bg text-status-error-text text-sm rounded-md",
-										children: j
+										children: A
 									}),
-									/* @__PURE__ */ p("div", { children: [
-										/* @__PURE__ */ f("label", {
+									/* @__PURE__ */ f("div", { children: [
+										/* @__PURE__ */ d("label", {
 											className: "block text-sm font-medium text-text-primary mb-1",
-											children: b("vibesPage.nameLabel", "Name *")
+											children: y("vibesPage.nameLabel", "Name *")
 										}),
-										/* @__PURE__ */ f("input", {
-											ref: We,
+										/* @__PURE__ */ d("input", {
+											ref: qe,
 											type: "text",
-											placeholder: b("vibesPage.namePlaceholder", "My Project"),
-											onChange: () => I.name && L((e) => ({
+											placeholder: y("vibesPage.namePlaceholder", "My Project"),
+											onChange: () => F.name && I((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 ${F.name ? "border-status-error-border" : "border-border-default"}`
 										}),
-										I.name && /* @__PURE__ */ f("p", {
+										F.name && /* @__PURE__ */ d("p", {
 											className: "mt-1 text-xs text-status-error-text",
-											children: I.name
+											children: F.name
 										})
 									] }),
-									/* @__PURE__ */ p("div", { children: [
-										/* @__PURE__ */ f("label", {
+									/* @__PURE__ */ f("div", { children: [
+										/* @__PURE__ */ d("label", {
 											className: "block text-sm font-medium text-text-primary mb-1",
-											children: b("vibesPage.pathLabel", "Path *")
+											children: y("vibesPage.pathLabel", "Path *")
 										}),
-										/* @__PURE__ */ f("input", {
-											ref: Ge,
+										/* @__PURE__ */ d("input", {
+											ref: Je,
 											type: "text",
-											placeholder: b("vibesPage.pathPlaceholder", "/path/to/project"),
-											onChange: () => I.path && L((e) => ({
+											placeholder: y("vibesPage.pathPlaceholder", "/path/to/project"),
+											onChange: () => F.path && I((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 ${F.path ? "border-status-error-border" : "border-border-default"}`
 										}),
-										I.path && /* @__PURE__ */ f("p", {
+										F.path && /* @__PURE__ */ d("p", {
 											className: "mt-1 text-xs text-status-error-text",
-											children: I.path
+											children: F.path
 										})
 									] }),
-									/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+									/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
 										className: "block text-sm font-medium text-text-primary mb-1",
-										children: b("vibesPage.agentLabel", "Agent")
-									}), /* @__PURE__ */ p("select", {
-										ref: Ke,
+										children: y("vibesPage.agentLabel", "Agent")
+									}), /* @__PURE__ */ f("select", {
+										ref: Ye,
 										className: "w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary",
-										children: [/* @__PURE__ */ f("option", {
+										children: [/* @__PURE__ */ d("option", {
 											value: "",
-											children: b("vibesPage.selectAgent", "Select an agent")
-										}), et.filter((e) => e.value !== "all").map((e) => /* @__PURE__ */ f("option", {
+											children: y("vibesPage.selectAgent", "Select an agent")
+										}), at.filter((e) => e.value !== "all").map((e) => /* @__PURE__ */ d("option", {
 											value: e.value,
 											children: e.label
 										}, e.value))]
 									})] }),
-									/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+									/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
 										className: "block text-sm font-medium text-text-primary mb-1",
-										children: b("vibesPage.typeLabel", "Type")
-									}), /* @__PURE__ */ p("select", {
-										ref: qe,
+										children: y("vibesPage.typeLabel", "Type")
+									}), /* @__PURE__ */ f("select", {
+										ref: Xe,
 										className: "w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary",
 										children: [
-											/* @__PURE__ */ f("option", {
+											/* @__PURE__ */ d("option", {
 												value: "PROJECT",
-												children: b("vibesPage.typeProject", "Project")
+												children: y("vibesPage.typeProject", "Project")
 											}),
-											/* @__PURE__ */ f("option", {
+											/* @__PURE__ */ d("option", {
 												value: "REPOSITORY",
-												children: b("vibesPage.typeRepository", "Repository")
+												children: y("vibesPage.typeRepository", "Repository")
 											}),
-											/* @__PURE__ */ f("option", {
+											/* @__PURE__ */ d("option", {
 												value: "WORKSPACE",
-												children: b("vibesPage.typeWorkspace", "Workspace")
+												children: y("vibesPage.typeWorkspace", "Workspace")
 											}),
-											/* @__PURE__ */ f("option", {
+											/* @__PURE__ */ d("option", {
 												value: "MONOREPO",
-												children: b("vibesPage.typeMonorepo", "Monorepo")
+												children: y("vibesPage.typeMonorepo", "Monorepo")
 											}),
-											/* @__PURE__ */ f("option", {
+											/* @__PURE__ */ d("option", {
 												value: "PACKAGE",
-												children: b("vibesPage.typePackage", "Package")
+												children: y("vibesPage.typePackage", "Package")
 											}),
-											/* @__PURE__ */ f("option", {
+											/* @__PURE__ */ d("option", {
 												value: "CUSTOM",
-												children: b("vibesPage.typeCustom", "Custom")
+												children: y("vibesPage.typeCustom", "Custom")
 											})
 										]
 									})] })
 								]
 							}),
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ f("div", {
+								className: "mt-4 border-t border-border-default pt-4",
+								children: [/* @__PURE__ */ d("h3", {
+									className: "text-sm font-medium text-text-secondary mb-2",
+									children: y("vibesPage.tags", "Tags")
+								}), /* @__PURE__ */ d(se, {
+									entityType: "VIBECONTROLS_VIBE",
+									onDraftChange: Qe
+								})]
+							}),
+							/* @__PURE__ */ f("div", {
 								className: "flex flex-col sm:flex-row justify-end gap-3 mt-6",
-								children: [/* @__PURE__ */ f("button", {
-									onClick: () => A(!1),
-									disabled: N,
+								children: [/* @__PURE__ */ d("button", {
+									onClick: () => k(!1),
+									disabled: M,
 									className: "px-4 py-2 text-text-primary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50",
-									children: b("vibesPage.cancel", "Cancel")
-								}), /* @__PURE__ */ f("button", {
-									onClick: dt,
-									disabled: N,
+									children: y("vibesPage.cancel", "Cancel")
+								}), /* @__PURE__ */ d("button", {
+									onClick: gt,
+									disabled: M,
 									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: N ? b("vibesPage.creating", "Creating...") : b("vibesPage.createVibe", "Create Vibe")
+									children: M ? y("vibesPage.creating", "Creating...") : y("vibesPage.createVibe", "Create Vibe")
 								})]
 							})
 						]
 					})
 				}),
-				/* @__PURE__ */ f(ae, {
-					isOpen: Be,
-					onClose: () => F(!1),
+				/* @__PURE__ */ d(ae, {
+					isOpen: Ue,
+					onClose: () => P(!1),
 					onConfirm: () => {
-						F(!1), h("/billing");
+						P(!1), m("/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."
@@ -596,6 +609,6 @@ function m() {
 	});
 }
 //#endregion
-export { m as VibesPage };
+export { p as VibesPage };
 
 //# sourceMappingURL=VibesPage.js.map