@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/pages/VibesPage.js

@@ -0,0 +1,600 @@
+import { useArchiveVibeMutation as e, useCreateVibeMutation as t, useListAgentsQuery as n, useListVibesQuery as r, useUpdateVibeStatusMutation as i } from "../generated/wspace-operations.js";
+import { useVibeControls as a, useVibeNavigate as ee } from "../providers/VibeControlsProvider.js";
+import { PageHeader as te } from "../components/shared/PageHeader.js";
+import { LoadingState as ne } from "../components/shared/LoadingState.js";
+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 { 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 "../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 "../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";
+//#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;
+		return n ? Object.entries(n).reduce((e, [t, n]) => e.replace(`{{${t}}}`, String(n)), i) : i;
+	}, [y]), je = [
+		{
+			value: "all",
+			label: b("vibesPage.statusAll", "All Statuses")
+		},
+		{
+			value: "ACTIVE",
+			label: b("vibesPage.statusActive", "Active")
+		},
+		{
+			value: "INACTIVE",
+			label: b("vibesPage.statusInactive", "Inactive")
+		},
+		{
+			value: "ARCHIVED",
+			label: b("vibesPage.statusArchived", "Archived")
+		},
+		{
+			value: "ERROR",
+			label: b("vibesPage.statusError", "Error")
+		}
+	], Me = [
+		{
+			value: "all",
+			label: b("vibesPage.typeAll", "All Types")
+		},
+		{
+			value: "PROJECT",
+			label: b("vibesPage.typeProject", "Project")
+		},
+		{
+			value: "REPOSITORY",
+			label: b("vibesPage.typeRepository", "Repository")
+		},
+		{
+			value: "WORKSPACE",
+			label: b("vibesPage.typeWorkspace", "Workspace")
+		},
+		{
+			value: "MONOREPO",
+			label: b("vibesPage.typeMonorepo", "Monorepo")
+		},
+		{
+			value: "PACKAGE",
+			label: b("vibesPage.typePackage", "Package")
+		},
+		{
+			value: "CUSTOM",
+			label: b("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);
+	}, []);
+	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,
+			agentId: D === "all" ? void 0 : D
+		} }), [
+			T,
+			E,
+			D
+		]),
+		fetchPolicy: "cache-and-network",
+		nextFetchPolicy: "cache-first",
+		skip: C,
+		notifyOnNetworkStatusChange: !0
+	}), { data: $e } = n({
+		variables: { pagination: { limit: 100 } },
+		fetchPolicy: "cache-first",
+		skip: C
+	}), et = l(() => {
+		let e = $e?.vibecontrolsAgents ?? [];
+		return [{
+			value: "all",
+			label: b("vibesPage.allAgents", "All Agents")
+		}, ...e.map((e) => ({
+			value: e.id,
+			label: e.name
+		}))];
+	}, [$e?.vibecontrolsAgents, b]), G = l(() => (Ze?.vibes?.items ?? []).map((e) => ({
+		id: e.id,
+		workspaceId: e.workspaceId,
+		name: e.name,
+		description: e.description || null,
+		type: e.type,
+		status: e.status,
+		path: e.path || null,
+		agentId: e.agentId || null,
+		parentId: e.parentId || null,
+		gitBranch: e.gitBranch || null,
+		gitRemote: e.gitRemote || null,
+		gitStatus: e.gitStatus ? typeof e.gitStatus == "string" ? e.gitStatus : typeof e.gitStatus == "object" && e.gitStatus !== null && "status" in e.gitStatus ? String(e.gitStatus.status) : JSON.stringify(e.gitStatus) : null,
+		environmentVariables: e.environmentVariables || {},
+		tags: e.tags || [],
+		metadata: e.metadata || {},
+		createdAt: e.createdAt,
+		updatedAt: e.updatedAt,
+		agent: e.agent ? {
+			id: e.agent.id,
+			name: e.agent.name
+		} : void 0
+	})), [Ze?.vibes?.items]), K = l(() => G.filter((e) => {
+		if (w) {
+			let t = w.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) => {
+		try {
+			(await Ye({ variables: {
+				id: e.id,
+				status: "ACTIVE"
+			} })).data?.updateVibeStatus && m?.({
+				id: e.id,
+				name: e.name,
+				type: e.type,
+				status: "ACTIVE"
+			});
+		} catch (e) {
+			console.error("Failed to activate vibe:", e);
+		}
+	}, at = async (e) => {
+		try {
+			await Xe({ 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;
+		}, 3e3));
+	}, st = () => {
+		M(null), A(!0);
+	}, X = (e, t) => {
+		B((n) => {
+			let r = new Set(n);
+			return t ? r.add(e.id) : r.delete(e.id), r;
+		});
+	}, ct = (e) => {
+		B((t) => {
+			let n = new Set(t);
+			return K.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: {
+			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"));
+			return;
+		}
+		L({});
+		let a = [
+			"PROJECT",
+			"REPOSITORY",
+			"WORKSPACE",
+			"MONOREPO",
+			"PACKAGE",
+			"CUSTOM"
+		].includes(r) ? r : "PROJECT";
+		Re(!0), M(null);
+		try {
+			if (!(await Je({ 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);
+		} catch (e) {
+			if (oe(e)) {
+				A(!1), M(null), L({}), F(!0);
+				return;
+			}
+			M(e instanceof Error ? e.message : b("vibesPage.failedCreate", "Failed to create vibe"));
+		} finally {
+			Re(!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, {
+		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.")
+			}),
+			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()
+			}),
+			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
+					}),
+					actions: /* @__PURE__ */ p("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ f("button", {
+							onClick: () => W(),
+							disabled: U,
+							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, {
+							permission: s.VIBE_CREATE,
+							deniedBehavior: "disable",
+							deniedTooltip: b("vibesPage.deniedCreateTooltip", "You don't have permission to create vibes"),
+							children: /* @__PURE__ */ p("button", {
+								onClick: st,
+								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")]
+							})
+						})]
+					})
+				}),
+				/* @__PURE__ */ p("div", {
+					className: "space-y-3",
+					children: [/* @__PURE__ */ p("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ f(ce, {
+							value: w,
+							onChange: Ne,
+							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", {
+								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" })
+							})]
+						})]
+					}), /* @__PURE__ */ p("div", {
+						className: "flex items-center gap-2 sm:gap-3 flex-wrap",
+						children: [
+							/* @__PURE__ */ f(o, {
+								label: b("vibesPage.filterStatus", "Status"),
+								value: T,
+								options: je,
+								onChange: Pe
+							}),
+							/* @__PURE__ */ f(o, {
+								label: b("vibesPage.filterType", "Type"),
+								value: E,
+								options: Me,
+								onChange: Fe
+							}),
+							/* @__PURE__ */ f(o, {
+								label: b("vibesPage.filterAgent", "Agent"),
+								value: D,
+								options: et,
+								onChange: Ie
+							})
+						]
+					})]
+				}),
+				w || T !== "all" || E !== "all" || D !== "all" ? /* @__PURE__ */ p("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", {
+						className: "ml-2 text-text-muted",
+						children: b("vibesPage.refreshing", "(refreshing...)")
+					})]
+				}) : null,
+				K.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",
+						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(ue, {
+									checked: Y,
+									indeterminate: nt,
+									onChange: ct,
+									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", {
+								onClick: Z,
+								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: [z.size, " selected"]
+								}),
+								/* @__PURE__ */ f("button", {
+									onClick: () => V("activate"),
+									disabled: q.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", {
+										className: "inline-flex items-center gap-2",
+										children: [
+											/* @__PURE__ */ f(ve, { className: "w-4 h-4" }),
+											"Activate Selected",
+											q.length > 0 ? ` (${q.length})` : ""
+										]
+									})
+								}),
+								/* @__PURE__ */ f("button", {
+									onClick: () => V("archive"),
+									disabled: J.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(he, { className: "w-4 h-4" }),
+											"Archive Selected",
+											J.length > 0 ? ` (${J.length})` : ""
+										]
+									})
+								})
+							]
+						})]
+					})
+				}),
+				K.length > 0 ? /* @__PURE__ */ f(Ce, {
+					mode: "wait",
+					children: O === "grid" ? /* @__PURE__ */ f(Ee, {
+						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, {
+							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)
+						}) }, 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
+					}) }, "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", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ f(Ae, {
+							permission: s.VIBE_CREATE,
+							children: /* @__PURE__ */ p("button", {
+								onClick: st,
+								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")]
+							})
+						}), /* @__PURE__ */ f(le, { prompt: "What is a Vibe in VibeControls and how do I create one?" })]
+					}) : void 0
+				}),
+				ze && /* @__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: ze
+				}),
+				/* @__PURE__ */ f(ie, {
+					isOpen: He === "activate",
+					onClose: () => V(null),
+					onConfirm: lt,
+					title: "Activate selected vibes",
+					message: `Activate ${q.length} selected vibe${q.length === 1 ? "" : "s"}?`,
+					confirmLabel: "Activate",
+					variant: "default"
+				}),
+				/* @__PURE__ */ f(ie, {
+					isOpen: He === "archive",
+					onClose: () => V(null),
+					onConfirm: ut,
+					title: "Archive selected vibes",
+					message: `Archive ${J.length} selected vibe${J.length === 1 ? "" : "s"}? Archived vibes will be hidden from active workflows.`,
+					confirmLabel: "Archive",
+					variant: "warning"
+				}),
+				Ve && /* @__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: [Ve, /* @__PURE__ */ f("button", {
+						onClick: Ue,
+						className: "ml-3 text-xs underline opacity-80 hover:opacity-100",
+						children: b("vibesPage.dismiss", "Dismiss")
+					})]
+				}),
+				Le && /* @__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: b("vibesPage.addNewVibe", "Add New Vibe")
+							}),
+							/* @__PURE__ */ p("div", {
+								className: "space-y-4",
+								children: [
+									j && /* @__PURE__ */ f("div", {
+										className: "p-3 bg-status-error-bg text-status-error-text text-sm rounded-md",
+										children: j
+									}),
+									/* @__PURE__ */ p("div", { children: [
+										/* @__PURE__ */ f("label", {
+											className: "block text-sm font-medium text-text-primary mb-1",
+											children: b("vibesPage.nameLabel", "Name *")
+										}),
+										/* @__PURE__ */ f("input", {
+											ref: We,
+											type: "text",
+											placeholder: b("vibesPage.namePlaceholder", "My Project"),
+											onChange: () => I.name && L((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"}`
+										}),
+										I.name && /* @__PURE__ */ f("p", {
+											className: "mt-1 text-xs text-status-error-text",
+											children: I.name
+										})
+									] }),
+									/* @__PURE__ */ p("div", { children: [
+										/* @__PURE__ */ f("label", {
+											className: "block text-sm font-medium text-text-primary mb-1",
+											children: b("vibesPage.pathLabel", "Path *")
+										}),
+										/* @__PURE__ */ f("input", {
+											ref: Ge,
+											type: "text",
+											placeholder: b("vibesPage.pathPlaceholder", "/path/to/project"),
+											onChange: () => I.path && L((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"}`
+										}),
+										I.path && /* @__PURE__ */ f("p", {
+											className: "mt-1 text-xs text-status-error-text",
+											children: I.path
+										})
+									] }),
+									/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+										className: "block text-sm font-medium text-text-primary mb-1",
+										children: b("vibesPage.agentLabel", "Agent")
+									}), /* @__PURE__ */ p("select", {
+										ref: Ke,
+										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: b("vibesPage.selectAgent", "Select an agent")
+										}), et.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: b("vibesPage.typeLabel", "Type")
+									}), /* @__PURE__ */ p("select", {
+										ref: qe,
+										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: b("vibesPage.typeProject", "Project")
+											}),
+											/* @__PURE__ */ f("option", {
+												value: "REPOSITORY",
+												children: b("vibesPage.typeRepository", "Repository")
+											}),
+											/* @__PURE__ */ f("option", {
+												value: "WORKSPACE",
+												children: b("vibesPage.typeWorkspace", "Workspace")
+											}),
+											/* @__PURE__ */ f("option", {
+												value: "MONOREPO",
+												children: b("vibesPage.typeMonorepo", "Monorepo")
+											}),
+											/* @__PURE__ */ f("option", {
+												value: "PACKAGE",
+												children: b("vibesPage.typePackage", "Package")
+											}),
+											/* @__PURE__ */ f("option", {
+												value: "CUSTOM",
+												children: b("vibesPage.typeCustom", "Custom")
+											})
+										]
+									})] })
+								]
+							}),
+							/* @__PURE__ */ p("div", {
+								className: "flex flex-col sm:flex-row justify-end gap-3 mt-6",
+								children: [/* @__PURE__ */ f("button", {
+									onClick: () => A(!1),
+									disabled: N,
+									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,
+									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")
+								})]
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ f(ae, {
+					isOpen: Be,
+					onClose: () => F(!1),
+					onConfirm: () => {
+						F(!1), h("/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."
+				})
+			] })
+		]
+	});
+}
+//#endregion
+export { m as VibesPage };
+
+//# sourceMappingURL=VibesPage.js.map