@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/pages/AgentsPage.js

@@ -0,0 +1,701 @@
+import { useAddAgentFromTunnelMutation as e, useAgentHeartbeatMutation as t, useCreateAgentMutation as n, useCreateTargetMutation as r, useDeactivateAgentMutation as i, useDeleteAgentMutation as ee, useListAgentsQuery as te, useStartVibecontrolsAgentMutation as ne, useStopVibecontrolsAgentMutation as re, useUpdateAgentMutation as ie, useVibecontrolsAgentHealthProbeStreamSubscription as ae, useVibecontrolsAgentHealthProbesQuery as oe } from "../generated/wspace-operations.js";
+import { useVibeControls as se, useVibeNavigate as ce } from "../providers/VibeControlsProvider.js";
+import le from "../hooks/useCachedInitialData.js";
+import { PageHeader as ue } from "../components/shared/PageHeader.js";
+import { LoadingState as a } from "../components/shared/LoadingState.js";
+import { ErrorState as de } from "../components/shared/ErrorState.js";
+import { QuotaExhaustedDialog as fe } from "../components/shared/QuotaExhaustedDialog.js";
+import { isQuotaExhaustedError as pe } from "../utils/quotaUtils.js";
+import { EmptyState as me } from "../components/shared/EmptyState.js";
+import { SearchInput as he } from "../components/shared/SearchInput.js";
+import { FilterDropdown as o } from "../components/shared/FilterDropdown.js";
+import { AgentSetupBanner as ge } from "../components/shared/AgentSetupBanner.js";
+import { GetHelpButton as _e } from "../components/shared/GetHelpButton.js";
+import { TagFilter as ve } from "../components/shared/TagFilter.js";
+import "../components/shared/index.js";
+import { VIBE_PERMISSIONS as ye } from "../constants/permissions.js";
+import { AgentCard as be } from "../components/agents/AgentCard.js";
+import { AgentList as xe } from "../components/agents/AgentList.js";
+import { AgentForm as Se } from "../components/agents/AgentForm.js";
+import "../components/agents/index.js";
+import { deriveAgentStatus as Ce } from "../utils/agentStatus.js";
+import { useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
+import { useI18n as we } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Bot as Te, CheckSquare as Ee, Grid as De, List as Oe, Plus as f, RefreshCw as ke, Trash2 as Ae, XSquare as je } from "lucide-react";
+import { usePermissions as Me } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AnimatePresence as p, motion as m } from "framer-motion";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { MotionItem as Ne, MotionList as Pe, MotionPage as v } from "@burdenoff/fe-libs/shared/motion";
+import { AccessDenied as Fe, PermissionButton as Ie } from "@burdenoff/fe-libs/shared/components";
+//#region src/pages/AgentsPage.tsx
+function Le() {
+	let { onAgentSelect: Le, workspaceId: y } = se(), b = ce(), { hasPermission: Re, isLoading: ze, permissions: Be } = Me(), { t: Ve } = we(), x = s((e, t, n) => {
+		let r = Ve(e, n), i = r === e ? t : r;
+		return n ? Object.entries(n).reduce((e, [t, n]) => e.replace(`{{${t}}}`, String(n)), i) : i;
+	}, [Ve]), He = [
+		{
+			value: "all",
+			label: x("agentsPage.statusAll", "All Statuses")
+		},
+		{
+			value: "ACTIVE",
+			label: x("agentsPage.statusActive", "Active")
+		},
+		{
+			value: "STOPPED",
+			label: x("agentsPage.statusStopped", "Stopped")
+		},
+		{
+			value: "OFFLINE",
+			label: x("agentsPage.statusOffline", "Offline")
+		}
+	], Ue = [
+		{
+			value: "all",
+			label: x("agentsPage.platformAll", "All Platforms")
+		},
+		{
+			value: "darwin",
+			label: x("agentsPage.platformMac", "macOS")
+		},
+		{
+			value: "linux",
+			label: x("agentsPage.platformLinux", "Linux")
+		},
+		{
+			value: "windows",
+			label: x("agentsPage.platformWindows", "Windows")
+		}
+	], We = Re(ye.AGENT_LIST), [S, Ge] = d(""), [C, Ke] = d("all"), [w, qe] = d("all"), [T, Je] = d("all"), [E, Ye] = d("grid"), [Xe, D] = d(!1), [Ze, Qe] = d(!1), [O, k] = d(null), [$e, et] = d(!1), [A, j] = d(null), [M, N] = d(!1), tt = u(null), P = u(null), [F, I] = d(/* @__PURE__ */ new Set()), [nt, L] = d(!1), [R, z] = d(null), [B, V] = d(null), [rt, H] = d(!1), U = u(null);
+	c(() => () => {
+		U.current && clearTimeout(U.current);
+	}, []);
+	let W = s((e) => {
+		U.current && clearTimeout(U.current), V(null), z(e), U.current = setTimeout(() => z(null), 3e3);
+	}, []), G = s((e) => {
+		U.current && clearTimeout(U.current), z(null), V(e), U.current = setTimeout(() => V(null), 5e3);
+	}, []), [it] = n({ refetchQueries: ["ListAgents"] }), [at] = e({ refetchQueries: ["ListAgents"] }), [ot] = t({ refetchQueries: ["ListAgents"] }), [st] = i({ refetchQueries: ["ListAgents"] }), [ct] = ne({ refetchQueries: ["ListAgents"] }), [lt] = re({ refetchQueries: ["ListAgents"] }), { targets: ut, loading: dt, refetch: ft } = le(), pt = ut, mt = dt, ht = pt.length > 0, [gt] = ie({ refetchQueries: ["ListAgents"] }), [_t] = ee({ refetchQueries: ["ListAgents"] }), [vt] = r(), yt = s(async (e) => {
+		if (!y || !e.trim()) return null;
+		try {
+			let { data: t } = await vt({ variables: {
+				workspaceId: y,
+				input: {
+					type: "DIRECT",
+					name: e.trim()
+				}
+			} }), n = t?.createTarget;
+			return n ? (ft(), {
+				id: n.id,
+				name: n.name,
+				type: n.type ?? "DIRECT",
+				status: n.status ?? "unknown"
+			}) : null;
+		} catch {
+			return null;
+		}
+	}, [
+		vt,
+		ft,
+		y
+	]), { data: bt, loading: K, error: xt, refetch: q } = te({
+		variables: {
+			filter: {
+				isActive: C === "ACTIVE" ? !0 : C === "OFFLINE" ? !1 : void 0,
+				platform: w === "all" ? void 0 : w
+			},
+			pagination: { limit: 100 }
+		},
+		fetchPolicy: "cache-first"
+	}), J = oe({
+		fetchPolicy: "cache-and-network",
+		nextFetchPolicy: "cache-first",
+		notifyOnNetworkStatusChange: !0
+	}), { data: Y } = ae(), St = J.data === void 0 && Y === void 0, Ct = l(() => {
+		let e = /* @__PURE__ */ new Map(), t = Y?.vibecontrolsAgentHealthProbeStream ?? J.data?.vibecontrolsAgentHealthProbes ?? [];
+		for (let n of t) e.set(n.agentId, {
+			agentId: n.agentId,
+			healthy: n.healthy,
+			errorMessage: n.errorMessage
+		});
+		return e;
+	}, [J.data, Y]), X = l(() => (bt?.vibecontrolsAgents ?? []).map((e) => ({
+		id: e.id,
+		workspaceId: e.workspaceId,
+		name: e.name,
+		hostname: e.hostname,
+		platform: e.platform,
+		architecture: e.architecture,
+		version: e.version,
+		isActive: e.isActive,
+		status: Ce({
+			id: e.id,
+			isActive: e.isActive,
+			metadata: e.metadata
+		}, Ct, { probesLoading: St }),
+		healthError: Ct.get(e.id)?.errorMessage ?? null,
+		lastHeartbeat: e.lastHeartbeat || null,
+		tunnelUrl: e.tunnelUrl ?? null,
+		tunnelStatus: e.tunnelStatus ?? null,
+		agentApiKey: e.agentApiKey ?? null,
+		configuration: e.configuration || {},
+		capabilities: Array.isArray(e.capabilities) ? e.capabilities : typeof e.capabilities == "object" && e.capabilities !== null ? (() => {
+			let t = e.capabilities, n = Object.keys(t);
+			return n.length > 0 && n.every((e) => /^\d+$/.test(e)) ? Object.values(t) : n;
+		})() : [],
+		metadata: e.metadata || {},
+		createdAt: e.createdAt,
+		updatedAt: e.updatedAt,
+		tagAssignments: (e.tagAssignments ?? []).map((e) => ({
+			id: e.id,
+			tagId: e.tagId,
+			tag: e.tagInfo ? {
+				id: e.tagInfo.id,
+				key: e.tagInfo.key ?? null,
+				label: e.tagInfo.label ?? null,
+				color: e.tagInfo.color ?? null
+			} : null
+		}))
+	})), [bt?.vibecontrolsAgents]), Z = l(() => X.filter((e) => {
+		if (S) {
+			let t = S.toLowerCase();
+			if (!(e.name.toLowerCase().includes(t) || e.hostname?.toLowerCase().includes(t) || e.id.toLowerCase().includes(t))) return !1;
+		}
+		return !(T !== "all" && !(e.tagAssignments ?? []).some((e) => e.tagId === T));
+	}), [
+		X,
+		S,
+		T
+	]);
+	c(() => () => {
+		U.current && clearTimeout(U.current);
+	}, []);
+	let wt = (e) => {
+		b(`/agents/${e.id}`), Le?.({
+			id: e.id,
+			name: e.name,
+			type: e.platform || "unknown",
+			status: e.status || (e.isActive ? "ACTIVE" : "OFFLINE")
+		});
+	}, Q = () => {
+		D(!0);
+	}, Tt = async (e) => {
+		try {
+			Qe(!0);
+			let t = e.tunnelUrl?.trim(), n = e.agentApiKey?.trim();
+			if (t && n) {
+				let r = await at({ variables: { input: {
+					tunnelUrl: t,
+					apiKey: n,
+					...e.name ? { name: e.name } : {},
+					...e.targetId ? { targetId: e.targetId } : {}
+				} } });
+				if (r.error) throw r.error;
+				let i = r.data?.addVibecontrolsAgentFromTunnel;
+				if (!i?.success) throw Error(i?.error || "Failed to onboard agent — probe or OAuth setup failed.");
+				if (i.agent?.id) return { id: i.agent.id };
+				throw Error("Agent onboarding returned no agent record.");
+			}
+			let r = await it({ variables: { input: {
+				name: e.name,
+				hostname: e.hostname,
+				platform: e.platform,
+				architecture: e.architecture,
+				version: e.version,
+				...e.targetId ? { targetId: e.targetId } : {},
+				...e.tunnelUrl ? { tunnelUrl: e.tunnelUrl } : {},
+				...e.tunnelStatus ? { tunnelStatus: e.tunnelStatus } : {}
+			} } }), i = r.data?.createVibecontrolsAgent;
+			if (i?.id) return { id: i.id };
+			throw r.error ? r.error : Error("Agent creation failed — no data returned from the server.");
+		} catch (e) {
+			if (pe(e)) {
+				H(!0), D(!1);
+				return;
+			}
+			throw console.error("Failed to create agent:", e), e;
+		} finally {
+			Qe(!1);
+		}
+	}, Et = async (e) => {
+		try {
+			let t = (await ct({ variables: { agentId: e.id } })).data?.startVibecontrolsAgent;
+			if (!t?.success) throw Error(t?.error || "Failed to start agent");
+			await ot({ variables: { id: e.id } }), W(`Agent "${e.name}" started`);
+		} catch (e) {
+			console.error("Failed to start agent:", e), G(e instanceof Error ? e.message : "Failed to start agent");
+		}
+	}, Dt = async (e) => {
+		try {
+			let t = (await lt({ variables: { agentId: e.id } })).data?.stopVibecontrolsAgent;
+			if (!t?.success) throw Error(t?.error || "Failed to stop agent");
+			await st({ variables: { id: e.id } }), W(`Agent "${e.name}" stopped`);
+		} catch (e) {
+			console.error("Failed to stop agent:", e), G(e instanceof Error ? e.message : "Failed to stop agent");
+		}
+	}, $ = (e) => {
+		j(e);
+	}, Ot = async () => {
+		if (!A) return;
+		let e = A;
+		N(!0);
+		try {
+			await st({
+				variables: { id: e.id },
+				refetchQueries: []
+			});
+		} catch (e) {
+			console.error("Failed to deactivate agent:", e), G(e instanceof Error ? e.message : "Failed to disconnect agent"), N(!1), j(null), await q();
+			return;
+		}
+		try {
+			await gt({
+				variables: {
+					id: e.id,
+					input: {
+						tunnelUrl: null,
+						tunnelStatus: null,
+						agentApiKey: null
+					}
+				},
+				refetchQueries: []
+			}), W(`Agent "${e.name}" disconnected`);
+		} catch (e) {
+			console.error("Failed to clear tunnel fields:", e), G("Agent marked offline, but failed to clear connection fields — clear them manually in Settings.");
+		}
+		N(!1), j(null), await q();
+	}, kt = (e) => {
+		b(`/agents/${e.id}`);
+	}, At = (e) => {
+		k(e);
+	}, jt = async () => {
+		if (!O) return;
+		let e = tt.current?.value?.trim() || "", t = P.current?.value?.trim() || "";
+		try {
+			et(!0), await gt({ variables: {
+				id: O.id,
+				input: {
+					tunnelUrl: e || null,
+					tunnelStatus: e ? "ACTIVE" : null,
+					agentApiKey: t || null
+				}
+			} }), k(null);
+		} catch (e) {
+			console.error("Failed to update tunnel settings:", e);
+		} finally {
+			et(!1);
+		}
+	}, Mt = s((e) => {
+		I((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	}, []), Nt = s(() => {
+		I(new Set(Z.map((e) => e.id)));
+	}, [Z]), Pt = s(() => {
+		I(/* @__PURE__ */ new Set());
+	}, []), Ft = Z.length > 0 && F.size === Z.length, It = F.size > 0, Lt = s(async () => {
+		if (F.size !== 0 && window.confirm(x("agentsPage.bulkDeleteConfirm", "Are you sure you want to remove {{count}} agent(s)? This cannot be undone.", { count: F.size }))) {
+			L(!0);
+			try {
+				let e = await Promise.allSettled(Array.from(F).map((e) => _t({ variables: { id: e } }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.filter((e) => e.status === "rejected").length;
+				n > 0 ? G(`Removed ${t}, failed to remove ${n} agent${n === 1 ? "" : "s"}`) : W(`Removed ${t} agent${t === 1 ? "" : "s"}`), I(/* @__PURE__ */ new Set());
+			} catch (e) {
+				G(e instanceof Error ? e.message : "Failed to remove agents");
+			} finally {
+				L(!1);
+			}
+		}
+	}, [
+		F,
+		_t,
+		G,
+		W
+	]), Rt = {
+		total: X.length,
+		active: X.filter((e) => e.isActive).length,
+		offline: X.filter((e) => !e.isActive).length
+	};
+	return ze ? /* @__PURE__ */ g(v, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: /* @__PURE__ */ g(a, { message: x("agentsPage.loadingPermissions", "Loading permissions...") })
+	}) : Be && Be.permissionStrings?.length > 0 && !We ? /* @__PURE__ */ g(v, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: /* @__PURE__ */ g(Fe, {
+			title: x("agentsPage.accessDeniedTitle", "Access Denied"),
+			description: x("agentsPage.accessDeniedDescription", "You don't have permission to view agents. Contact your workspace administrator for access.")
+		})
+	}) : K && X.length === 0 ? /* @__PURE__ */ g(v, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: /* @__PURE__ */ g(a, { message: x("agentsPage.loadingAgents", "Loading agents...") })
+	}) : xt && X.length === 0 ? /* @__PURE__ */ g(v, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: /* @__PURE__ */ g(de, {
+			title: x("agentsPage.failedLoad", "Failed to load agents"),
+			message: xt.message,
+			onRetry: () => q()
+		})
+	}) : /* @__PURE__ */ _(v, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: [
+			R && /* @__PURE__ */ g("div", {
+				className: "fixed top-4 left-4 right-4 sm:left-auto z-50 bg-status-success-bg text-status-success-text px-4 py-3 rounded-md shadow-lg text-sm",
+				children: R
+			}),
+			B && /* @__PURE__ */ g("div", {
+				className: "fixed top-4 right-4 z-50 bg-status-error-bg text-status-error-text px-4 py-3 rounded-md shadow-lg text-sm",
+				children: B
+			}),
+			/* @__PURE__ */ g(ue, {
+				title: x("agentsPage.title", "Agents"),
+				description: x("agentsPage.descriptionOnline", "{{active}} of {{total}} agents online", {
+					active: Rt.active,
+					total: Rt.total
+				}),
+				actions: /* @__PURE__ */ _("div", {
+					className: "flex w-full flex-col items-end gap-2 sm:w-auto sm:flex-row sm:items-center",
+					children: [/* @__PURE__ */ g("button", {
+						onClick: () => q(),
+						disabled: K,
+						className: "flex items-center justify-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50",
+						title: x("agentsPage.refreshTitle", "Refresh agents"),
+						children: /* @__PURE__ */ g(ke, { className: `w-4 h-4 ${K ? "animate-spin" : ""}` })
+					}), ht ? /* @__PURE__ */ g(Ie, {
+						permission: ye.AGENT_CREATE,
+						deniedBehavior: "disable",
+						deniedTooltip: x("agentsPage.deniedCreateTooltip", "You don't have permission to create agents"),
+						children: /* @__PURE__ */ _("button", {
+							onClick: Q,
+							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__ */ g(f, { className: "w-4 h-4" }), x("agentsPage.addAgent", "Add Agent")]
+						})
+					}) : /* @__PURE__ */ _("button", {
+						onClick: Q,
+						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__ */ g(f, { className: "w-4 h-4" }), x("agentsPage.addAgent", "Add Agent")]
+					})]
+				})
+			}),
+			X.length === 0 && !K && /* @__PURE__ */ g(ge, {
+				variant: "full",
+				dismissKey: "vibecontrols-agents-setup-banner"
+			}),
+			X.length > 0 && /* @__PURE__ */ g(ge, {
+				variant: "compact",
+				dismissKey: "vibecontrols-agents-compact-banner"
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "space-y-3",
+				children: [/* @__PURE__ */ _("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ g(he, {
+						value: S,
+						onChange: Ge,
+						placeholder: x("agentsPage.searchPlaceholder", "Search agents..."),
+						className: "flex-1 sm:w-64 sm:flex-none"
+					}), /* @__PURE__ */ _("div", {
+						className: "flex items-center gap-1 bg-bg-sunken rounded-md p-1 flex-shrink-0",
+						children: [/* @__PURE__ */ g("button", {
+							onClick: () => {
+								Ye("grid"), I(/* @__PURE__ */ new Set());
+							},
+							className: `p-1.5 sm:p-2 rounded ${E === "grid" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+							title: x("agentsPage.gridViewTitle", "Grid view"),
+							children: /* @__PURE__ */ g(De, { className: "w-4 h-4 text-text-secondary" })
+						}), /* @__PURE__ */ g("button", {
+							onClick: () => {
+								Ye("list"), I(/* @__PURE__ */ new Set());
+							},
+							className: `p-1.5 sm:p-2 rounded ${E === "list" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+							title: x("agentsPage.listViewTitle", "List view"),
+							children: /* @__PURE__ */ g(Oe, { className: "w-4 h-4 text-text-secondary" })
+						})]
+					})]
+				}), /* @__PURE__ */ _("div", {
+					className: "flex items-center gap-2 sm:gap-3 flex-wrap",
+					children: [
+						/* @__PURE__ */ g(o, {
+							label: x("agentsPage.filterStatus", "Status"),
+							value: C,
+							options: He,
+							onChange: Ke
+						}),
+						/* @__PURE__ */ g(o, {
+							label: x("agentsPage.filterPlatform", "Platform"),
+							value: w,
+							options: Ue,
+							onChange: qe
+						}),
+						/* @__PURE__ */ g(ve, {
+							label: x("agentsPage.filterTag", "Tag"),
+							value: T,
+							onChange: Je
+						})
+					]
+				})]
+			}),
+			Z.length > 0 && /* @__PURE__ */ g("div", {
+				className: "flex items-center gap-2 flex-wrap",
+				children: /* @__PURE__ */ g("div", {
+					className: "ml-auto flex items-center gap-2",
+					children: /* @__PURE__ */ _("button", {
+						onClick: Ft ? Pt : Nt,
+						className: "flex items-center gap-1.5 px-3 py-1.5 text-xs text-text-secondary hover:text-text-primary transition-colors",
+						children: [/* @__PURE__ */ g(Ee, { className: "w-3.5 h-3.5" }), Ft ? x("agentsPage.deselectAll", "Deselect All") : x("agentsPage.selectAll", "Select All")]
+					})
+				})
+			}),
+			It && /* @__PURE__ */ _("div", {
+				className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 px-4 py-2 bg-action-primary-bg/10 border border-action-primary-bg/20 rounded-lg",
+				children: [/* @__PURE__ */ g("span", {
+					className: "text-sm font-medium text-text-primary",
+					children: x("agentsPage.selectedCount", "{{count}} agents selected", { count: F.size })
+				}), /* @__PURE__ */ _("div", {
+					className: "flex items-center gap-1.5 sm:ml-auto",
+					children: [/* @__PURE__ */ _("button", {
+						onClick: Lt,
+						disabled: nt,
+						className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-status-error-text bg-status-error-bg border border-status-error-text/20 rounded-md hover:bg-status-error-bg/80 transition-colors disabled:opacity-50",
+						children: [
+							/* @__PURE__ */ g(Ae, { className: "w-3 h-3" }),
+							" ",
+							x("agentsPage.remove", "Remove")
+						]
+					}), /* @__PURE__ */ _("button", {
+						onClick: Pt,
+						className: "flex items-center gap-1.5 px-3 py-1.5 text-xs text-text-secondary hover:text-text-primary transition-colors",
+						children: [
+							/* @__PURE__ */ g(je, { className: "w-3 h-3" }),
+							" ",
+							x("agentsPage.deselect", "Deselect")
+						]
+					})]
+				})]
+			}),
+			S || C !== "all" || w !== "all" ? /* @__PURE__ */ _("p", {
+				className: "text-sm text-text-secondary",
+				children: [x("agentsPage.showingResults", "Showing {{filtered}} of {{total}} agents", {
+					filtered: Z.length,
+					total: X.length
+				}), K && /* @__PURE__ */ g("span", {
+					className: "ml-2 text-text-muted",
+					children: x("agentsPage.refreshing", "(refreshing...)")
+				})]
+			}) : null,
+			Z.length > 0 ? /* @__PURE__ */ g(p, {
+				mode: "wait",
+				children: E === "grid" ? /* @__PURE__ */ g(Pe, {
+					stagger: .04,
+					className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
+					children: Z.map((e) => /* @__PURE__ */ g(Ne, { children: /* @__PURE__ */ g(be, {
+						agent: e,
+						onSelect: wt,
+						onStart: Et,
+						onStop: Dt,
+						onDisconnect: $,
+						onConfigure: kt,
+						onEditTunnelUrl: At,
+						selected: F.has(e.id),
+						onToggleSelect: () => Mt(e.id)
+					}) }, e.id))
+				}, "grid-view") : /* @__PURE__ */ g(Pe, {
+					stagger: .04,
+					children: /* @__PURE__ */ g(Ne, {
+						variant: "fadeRight",
+						children: /* @__PURE__ */ g(xe, {
+							agents: Z,
+							onSelect: wt,
+							onStart: Et,
+							onStop: Dt,
+							onDisconnect: $,
+							onSettings: kt
+						})
+					})
+				}, "list-view")
+			}) : /* @__PURE__ */ g(me, {
+				icon: /* @__PURE__ */ g(Te, { className: "w-8 h-8 text-text-secondary" }),
+				title: S || C !== "all" || w !== "all" ? x("agentsPage.emptyNoAgentsFound", "No agents found") : x("agentsPage.emptyNoAgentsConfigured", "No agents configured"),
+				description: S || C !== "all" || w !== "all" ? x("agentsPage.emptyAdjustSearch", "Try adjusting your search or filters") : x("agentsPage.emptyNoAgentsDescription", "Install the CLI agent on your machine, then add it here. You can create a target inline while adding the agent."),
+				action: !S && C === "all" && w === "all" ? /* @__PURE__ */ _("div", {
+					className: "flex flex-wrap items-center gap-3",
+					children: [
+						/* @__PURE__ */ _("button", {
+							onClick: Q,
+							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__ */ g(f, { className: "w-4 h-4" }), x("agentsPage.addAgent", "Add Agent")]
+						}),
+						/* @__PURE__ */ g("button", {
+							onClick: () => b("/getting-started"),
+							className: "flex items-center gap-2 px-4 py-2 border border-border-default text-text-primary rounded-md hover:bg-bg-sunken transition-colors text-sm",
+							children: x("agentsPage.setupGuide", "Setup guide")
+						}),
+						/* @__PURE__ */ g(_e, { prompt: "What is an Agent in VibeControls and how do I add one?" })
+					]
+				}) : void 0
+			}),
+			Xe && /* @__PURE__ */ g(Se, {
+				onSubmit: Tt,
+				onCancel: () => D(!1),
+				isLoading: Ze,
+				onNavigate: (e) => {
+					D(!1), b(e);
+				},
+				targets: pt.map((e) => ({
+					id: e.id,
+					name: e.name,
+					type: e.type || "DIRECT",
+					status: e.status
+				})),
+				targetsLoading: mt,
+				onCreateTarget: yt
+			}),
+			/* @__PURE__ */ g(p, { children: A && /* @__PURE__ */ g("div", {
+				className: "fixed inset-0 bg-bg-overlay flex items-center justify-center z-50 p-4 sm:p-6",
+				onClick: () => !M && j(null),
+				children: /* @__PURE__ */ _(m.div, {
+					initial: {
+						opacity: 0,
+						scale: .95
+					},
+					animate: {
+						opacity: 1,
+						scale: 1
+					},
+					exit: {
+						opacity: 0,
+						scale: .95
+					},
+					transition: { duration: .15 },
+					className: "bg-bg-surface border border-border-default rounded-lg shadow-xl w-full max-w-sm p-4 sm:p-6",
+					onClick: (e) => e.stopPropagation(),
+					children: [
+						/* @__PURE__ */ g("h3", {
+							className: "text-lg font-semibold text-text-primary mb-1",
+							children: "Disconnect Agent"
+						}),
+						/* @__PURE__ */ g("p", {
+							className: "text-sm text-text-secondary mb-4",
+							children: Ce(A) === "OFFLINE" ? /* @__PURE__ */ _(h, { children: [
+								"Clear the stored tunnel connection for",
+								" ",
+								/* @__PURE__ */ g("strong", { children: A.name }),
+								"? This will remove the tunnel URL and API key from this offline agent."
+							] }) : /* @__PURE__ */ _(h, { children: [
+								"Mark ",
+								/* @__PURE__ */ g("strong", { children: A.name }),
+								" as offline and clear its tunnel connection? The agent process will not be stopped automatically — you may need to stop it manually on the host machine."
+							] })
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "flex justify-end gap-2",
+							children: [/* @__PURE__ */ g("button", {
+								onClick: () => j(null),
+								disabled: M,
+								className: "px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50",
+								children: "Cancel"
+							}), /* @__PURE__ */ g("button", {
+								onClick: Ot,
+								disabled: M,
+								className: "px-4 py-2 text-sm bg-action-danger-bg text-action-danger-text rounded-md hover:bg-action-danger-bg-hover transition-colors disabled:opacity-50",
+								children: M ? "Disconnecting..." : "Disconnect"
+							})]
+						})
+					]
+				})
+			}) }),
+			/* @__PURE__ */ g(p, { children: O && /* @__PURE__ */ g("div", {
+				className: "fixed inset-0 bg-bg-overlay flex items-center justify-center z-50 p-4 sm:p-6",
+				onClick: () => k(null),
+				children: /* @__PURE__ */ _(m.div, {
+					initial: {
+						opacity: 0,
+						scale: .95
+					},
+					animate: {
+						opacity: 1,
+						scale: 1
+					},
+					exit: {
+						opacity: 0,
+						scale: .95
+					},
+					transition: { duration: .15 },
+					className: "bg-bg-surface border border-border-default rounded-lg shadow-xl w-full max-w-md p-4 sm:p-6",
+					onClick: (e) => e.stopPropagation(),
+					children: [
+						/* @__PURE__ */ g("h3", {
+							className: "text-lg font-semibold text-text-primary mb-1",
+							children: x("agentsPage.editTunnelTitle", "Edit Tunnel")
+						}),
+						/* @__PURE__ */ g("p", {
+							className: "text-sm text-text-secondary mb-4",
+							children: x("agentsPage.editTunnelDescription", "Configure the cloudflared tunnel URL and API key for {{name}}.", { name: O.name })
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "space-y-4",
+							children: [/* @__PURE__ */ _("div", { children: [
+								/* @__PURE__ */ g("label", {
+									className: "block text-sm font-medium text-text-primary mb-1",
+									children: x("agentsPage.tunnelUrlLabel", "Tunnel URL")
+								}),
+								/* @__PURE__ */ g("input", {
+									ref: tt,
+									type: "url",
+									defaultValue: O.tunnelUrl || "",
+									placeholder: x("agentsPage.tunnelUrlPlaceholder", "https://example.trycloudflare.com"),
+									className: "w-full px-3 py-2 border border-border-default rounded-md bg-bg-sunken text-text-primary placeholder:text-text-placeholder focus:outline-none focus:border-border-strong",
+									autoFocus: !0
+								}),
+								/* @__PURE__ */ g("p", {
+									className: "text-xs text-text-muted mt-1",
+									children: x("agentsPage.tunnelUrlHint", "Leave empty to clear. Agents with auto-tunnel report this automatically on startup.")
+								})
+							] }), /* @__PURE__ */ _("div", { children: [
+								/* @__PURE__ */ g("label", {
+									className: "block text-sm font-medium text-text-primary mb-1",
+									children: x("agentsPage.agentApiKeyLabel", "Agent API Key")
+								}),
+								/* @__PURE__ */ g("input", {
+									ref: P,
+									type: "text",
+									defaultValue: O.agentApiKey || "",
+									placeholder: x("agentsPage.agentApiKeyPlaceholder", "sk-agent-..."),
+									className: "w-full px-3 py-2 border border-border-default rounded-md bg-bg-sunken text-text-primary font-mono text-sm placeholder:text-text-placeholder focus:outline-none focus:border-border-strong"
+								}),
+								/* @__PURE__ */ g("p", {
+									className: "text-xs text-text-muted mt-1",
+									children: x("agentsPage.agentApiKeyHint", "Authenticates requests to the agent. Typically changes on each agent restart.")
+								})
+							] })]
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "flex justify-end gap-2 mt-5",
+							children: [/* @__PURE__ */ g("button", {
+								onClick: () => k(null),
+								className: "px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken rounded-md transition-colors",
+								children: x("agentsPage.cancel", "Cancel")
+							}), /* @__PURE__ */ g("button", {
+								onClick: jt,
+								disabled: $e,
+								className: "px-4 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50",
+								children: $e ? x("agentsPage.saving", "Saving...") : x("agentsPage.save", "Save")
+							})]
+						})
+					]
+				})
+			}) }),
+			/* @__PURE__ */ g(fe, {
+				isOpen: rt,
+				onClose: () => H(!1),
+				onConfirm: () => {
+					H(!1), b("/billing");
+				},
+				title: "Agent Quota Reached",
+				message: "You've used all available agent slots on your current plan. Upgrade your plan to register more agents."
+			})
+		]
+	});
+}
+//#endregion
+export { Le as AgentsPage };
+
+//# sourceMappingURL=AgentsPage.js.map