@burdenoff/microfe-vibecontrols 2026.625.3 → 2026.626.2

package/dist/pages/AgentsPage.js

@@ -33,13 +33,13 @@ import { useSearchParams as Ue } from "react-router-dom";
 import { usePermissions as We } from "@burdenoff/fe-libs/shared/providers/shell";
 import { AnimatePresence as Ge } from "framer-motion";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { Button as Ke, Input as qe, ResponsiveDialog as Je, ResponsiveDialogContent as Ye, ResponsiveDialogDescription as Xe, ResponsiveDialogFooter as Ze, ResponsiveDialogHeader as Qe, ResponsiveDialogTitle as $e } from "@burdenoff/fe-libs/ui";
-import { useEventBus as et } from "@burdenoff/fe-libs/shared/events";
-import { AccessDenied as tt, PermissionButton as nt } from "@burdenoff/fe-libs/shared/components";
-import { MotionItem as rt, MotionList as it, MotionPage as g } from "@burdenoff/fe-libs/shared/motion";
+import { Button as Ke, Input as qe, PagePurpose as Je, ResponsiveDialog as Ye, ResponsiveDialogContent as Xe, ResponsiveDialogDescription as Ze, ResponsiveDialogFooter as Qe, ResponsiveDialogHeader as $e, ResponsiveDialogTitle as et } from "@burdenoff/fe-libs/ui";
+import { useEventBus as tt } from "@burdenoff/fe-libs/shared/events";
+import { AccessDenied as nt, PermissionButton as rt } from "@burdenoff/fe-libs/shared/components";
+import { MotionItem as it, MotionList as at, MotionPage as g } from "@burdenoff/fe-libs/shared/motion";
 //#region src/pages/AgentsPage.tsx
-function at() {
-	let { onAgentSelect: at, workspaceId: _ } = me(), v = he(), y = et(), { hasPermission: ot, isLoading: st, permissions: ct } = We(), b = ue(), lt = [
+function ot() {
+	let { onAgentSelect: ot, workspaceId: _ } = me(), v = he(), y = tt(), { hasPermission: st, isLoading: ct, permissions: lt } = We(), b = ue(), ut = [
 		{
 			value: "all",
 			label: b("agentsPage.statusAll", "All Statuses")
@@ -56,7 +56,7 @@ function at() {
 			value: "OFFLINE",
 			label: b("agentsPage.statusOffline", "Offline")
 		}
-	], ut = [
+	], dt = [
 		{
 			value: "all",
 			label: b("agentsPage.platformAll", "All Platforms")
@@ -73,17 +73,17 @@ function at() {
 			value: "windows",
 			label: b("agentsPage.platformWindows", "Windows")
 		}
-	], dt = ot(ke.AGENT_LIST), [x, ft] = f(""), [S, pt] = f("all"), [C, mt] = f("all"), [w, ht] = f("all"), [T, gt] = f("grid"), [_t, E] = f(!1), [vt, yt] = f(!1), [D, bt] = Ue();
+	], ft = st(ke.AGENT_LIST), [x, pt] = f(""), [S, mt] = f("all"), [C, ht] = f("all"), [w, gt] = f("all"), [T, _t] = f("grid"), [vt, E] = f(!1), [yt, bt] = f(!1), [D, xt] = Ue();
 	u(() => {
 		if (D.get("create") === "true") {
 			E(!0);
 			let e = new URLSearchParams(D);
-			e.delete("create"), bt(e, { replace: !0 });
+			e.delete("create"), xt(e, { replace: !0 });
 		}
-	}, [D, bt]);
-	let [O, k] = f(null), [A, xt] = f(!1), j = s((e) => e.connectingAgents), St = s((e) => e.markAgentConnecting), M = s((e) => e.clearAgentConnecting), Ct = d(() => new Set(Object.keys(j)), [j]), wt = Fe(/* @__PURE__ */ new Map());
+	}, [D, xt]);
+	let [O, k] = f(null), [A, St] = f(!1), j = s((e) => e.connectingAgents), Ct = s((e) => e.markAgentConnecting), M = s((e) => e.clearAgentConnecting), wt = d(() => new Set(Object.keys(j)), [j]), Tt = Fe(/* @__PURE__ */ new Map());
 	u(() => {
-		let e = wt.current;
+		let e = Tt.current;
 		for (let t of Object.keys(j)) {
 			if (e.has(t)) continue;
 			let n = setTimeout(() => {
@@ -97,7 +97,7 @@ function at() {
 			e.clear();
 		};
 	}, [j, M]);
-	let [N, P] = f(null), [Tt, F] = f(!1), Et = Fe(null), I = De({ hint: b("agentsPage.tunnelUrlHint", "Leave empty to clear. Agents with auto-tunnel report this automatically on startup.") }), [L, R] = f(/* @__PURE__ */ new Set()), [z, Dt] = f(!1), [Ot, B] = f(!1), [V, H] = f(null), [kt] = n({ refetchQueries: ["ListAgents"] }), { setDraftTagIds: At, flushTags: jt } = xe("VIBECONTROLS_AGENT"), [Mt] = e({ refetchQueries: ["ListAgents"] }), [U] = t({ refetchQueries: ["ListAgents"] }), [Nt] = i({ refetchQueries: ["ListAgents"] }), [Pt] = ie({ refetchQueries: ["ListAgents"] }), [Ft] = ae({ refetchQueries: ["ListAgents"] }), [It] = re({ refetchQueries: ["ListAgents"] }), { refetch: Lt } = ge(), { data: Rt, loading: zt, refetch: Bt } = ne({
+	let [N, P] = f(null), [Et, F] = f(!1), Dt = Fe(null), I = De({ hint: b("agentsPage.tunnelUrlHint", "Leave empty to clear. Agents with auto-tunnel report this automatically on startup.") }), [L, R] = f(/* @__PURE__ */ new Set()), [z, Ot] = f(!1), [kt, B] = f(!1), [V, H] = f(null), [At] = n({ refetchQueries: ["ListAgents"] }), { setDraftTagIds: jt, flushTags: Mt } = xe("VIBECONTROLS_AGENT"), [Nt] = e({ refetchQueries: ["ListAgents"] }), [Pt] = t({ refetchQueries: ["ListAgents"] }), [Ft] = i({ refetchQueries: ["ListAgents"] }), [It] = ie({ refetchQueries: ["ListAgents"] }), [Lt] = ae({ refetchQueries: ["ListAgents"] }), [Rt] = re({ refetchQueries: ["ListAgents"] }), { refetch: zt } = ge(), { data: Bt, loading: Vt, refetch: Ht } = ne({
 		variables: {
 			workspaceId: _ ?? "",
 			limit: 50,
@@ -105,13 +105,13 @@ function at() {
 		},
 		skip: !_,
 		fetchPolicy: "cache-and-network"
-	}), Vt = Rt?.targets?.items ?? [], Ht = Vt.length > 0, [Ut] = oe({ refetchQueries: ["ListAgents"] }), [Wt] = ee({ refetchQueries: ["ListAgents"] }), [Gt] = r({
+	}), Ut = Bt?.targets?.items ?? [], Wt = Ut.length > 0, [Gt] = oe({ refetchQueries: ["ListAgents"] }), [Kt] = ee({ refetchQueries: ["ListAgents"] }), [qt] = r({
 		refetchQueries: ["VibeControlsInitialData", "ListTargets"],
 		awaitRefetchQueries: !0
-	}), Kt = l(async (e) => {
+	}), Jt = l(async (e) => {
 		if (!_ || !e.trim()) return null;
 		try {
-			let t = await Gt({ variables: {
+			let t = await qt({ variables: {
 				workspaceId: _,
 				input: {
 					type: "DIRECT",
@@ -120,7 +120,7 @@ function at() {
 			} });
 			if (t.error && a(t.error)) throw o(), H("target"), t.error;
 			let n = t.data?.createTarget;
-			return n ? (Lt(), Bt(), {
+			return n ? (zt(), Ht(), {
 				id: n.id,
 				name: n.name,
 				type: n.type ?? "DIRECT",
@@ -131,11 +131,11 @@ function at() {
 			return null;
 		}
 	}, [
-		Gt,
-		Lt,
-		Bt,
+		qt,
+		zt,
+		Ht,
 		_
-	]), { data: qt, loading: W, error: Jt, refetch: G } = te({
+	]), { data: Yt, loading: U, error: Xt, refetch: W } = te({
 		variables: {
 			filter: {
 				isActive: S === "ACTIVE" ? !0 : S === "OFFLINE" ? !1 : void 0,
@@ -145,26 +145,26 @@ function at() {
 		},
 		fetchPolicy: "cache-first",
 		skip: !_
-	}), [Yt, Xt] = f(!1);
+	}), [Zt, Qt] = f(!1);
 	u(() => {
-		let e = window.setTimeout(() => Xt(!0), 0);
+		let e = window.setTimeout(() => Qt(!0), 0);
 		return () => window.clearTimeout(e);
 	}, []);
-	let K = le({
+	let G = le({
 		fetchPolicy: "cache-and-network",
 		nextFetchPolicy: "cache-first",
 		notifyOnNetworkStatusChange: !0,
-		skip: !_ || !Yt,
+		skip: !_ || !Zt,
 		pollInterval: 6e4
-	}), [Zt] = ce({ fetchPolicy: "network-only" }), { data: q } = se({ skip: !_ || !Yt }), Qt = K.data === void 0 && q === void 0, J = d(() => {
-		let e = /* @__PURE__ */ new Map(), t = q?.vibecontrolsAgentHealthProbeStream ?? K.data?.vibecontrolsAgentHealthProbes ?? [];
+	}), [$t] = ce({ fetchPolicy: "network-only" }), { data: K } = se({ skip: !_ || !Zt }), en = G.data === void 0 && K === void 0, q = d(() => {
+		let e = /* @__PURE__ */ new Map(), t = K?.vibecontrolsAgentHealthProbeStream ?? G.data?.vibecontrolsAgentHealthProbes ?? [];
 		for (let n of t) e.set(n.agentId, {
 			agentId: n.agentId,
 			healthy: n.healthy,
 			errorMessage: n.errorMessage
 		});
 		return e;
-	}, [K.data, q]), Y = d(() => (qt?.vibecontrolsAgents ?? []).map((e) => ({
+	}, [G.data, K]), J = d(() => (Yt?.vibecontrolsAgents ?? []).map((e) => ({
 		id: e.id,
 		workspaceId: e.workspaceId,
 		name: e.name,
@@ -173,12 +173,12 @@ function at() {
 		architecture: e.architecture,
 		version: e.version,
 		isActive: e.isActive,
-		status: Ct.has(e.id) ? "CONNECTING" : Pe({
+		status: wt.has(e.id) ? "CONNECTING" : Pe({
 			id: e.id,
 			isActive: e.isActive,
 			metadata: e.metadata
-		}, J, { probesLoading: Qt }),
-		healthError: J.get(e.id)?.errorMessage ?? (e.lastGatewayAuthPushStatus === "failed" ? e.lastGatewayAuthPushError ?? "Gateway-auth push failed" : null),
+		}, q, { probesLoading: en }),
+		healthError: q.get(e.id)?.errorMessage ?? (e.lastGatewayAuthPushStatus === "failed" ? e.lastGatewayAuthPushError ?? "Gateway-auth push failed" : null),
 		lastHeartbeat: e.lastHeartbeat || null,
 		tunnelUrl: e.tunnelUrl ?? null,
 		tunnelStatus: e.tunnelStatus ?? null,
@@ -201,10 +201,10 @@ function at() {
 			} : null
 		}))
 	})), [
-		qt?.vibecontrolsAgents,
-		J,
-		Qt,
-		Ct
+		Yt?.vibecontrolsAgents,
+		q,
+		en,
+		wt
 	]);
 	u(() => {
 		let e = Object.keys(j);
@@ -212,47 +212,47 @@ function at() {
 		let t = Date.now(), n = Infinity;
 		for (let r of e) {
 			let e = j[r];
-			e !== void 0 && (J.get(r)?.healthy === !0 && t >= e ? M(r) : e < n && (n = e));
+			e !== void 0 && (q.get(r)?.healthy === !0 && t >= e ? M(r) : e < n && (n = e));
 		}
 		if (n === Infinity) return;
 		let r = Math.max(0, n - t) + 50, i = setTimeout(() => {
 			let e = s.getState().connectingAgents;
 			for (let t of Object.keys(e)) {
 				let n = e[t];
-				n !== void 0 && J.get(t)?.healthy === !0 && Date.now() >= n && M(t);
+				n !== void 0 && q.get(t)?.healthy === !0 && Date.now() >= n && M(t);
 			}
 		}, r);
 		return () => clearTimeout(i);
 	}, [
-		J,
+		q,
 		j,
 		M
 	]);
-	let X = d(() => Y.filter((e) => {
+	let Y = d(() => J.filter((e) => {
 		if (x) {
 			let t = x.toLowerCase();
 			if (!(e.name.toLowerCase().includes(t) || e.hostname?.toLowerCase().includes(t) || e.id.toLowerCase().includes(t))) return !1;
 		}
 		return !(w !== "all" && !(e.tagAssignments ?? []).some((e) => e.tagId === w));
 	}), [
-		Y,
+		J,
 		x,
 		w
-	]), $t = (e) => {
-		v(`/agents/${e.id}`), at?.({
+	]), tn = (e) => {
+		v(`/agents/${e.id}`), ot?.({
 			id: e.id,
 			name: e.name,
 			type: e.platform || "unknown",
 			status: e.status || (e.isActive ? "ACTIVE" : "OFFLINE")
 		});
-	}, Z = () => {
+	}, X = () => {
 		E(!0), y.emitCustom("vibecontrols.agent.register_clicked", { workspaceId: _ ?? void 0 });
-	}, en = async (e) => {
+	}, nn = async (e) => {
 		try {
-			yt(!0);
+			bt(!0);
 			let t = e.tunnelUrl?.trim(), n = e.agentApiKey?.trim();
 			if (t && n) {
-				let r = await Mt({ variables: { input: {
+				let r = await Nt({ variables: { input: {
 					tunnelUrl: t,
 					apiKey: n,
 					...e.name ? { name: e.name } : {},
@@ -261,7 +261,7 @@ function at() {
 				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 await jt(i.agent.id), y.emitCustom("vibecontrols.agent.registered", {
+				if (i.agent?.id) return await Mt(i.agent.id), y.emitCustom("vibecontrols.agent.registered", {
 					workspaceId: _ ?? void 0,
 					agentId: i.agent.id
 				}), y.emitCustom("vibecontrols.agent.gateway_auth_setup", {
@@ -270,7 +270,7 @@ function at() {
 				}), { id: i.agent.id };
 				throw Error("Agent onboarding returned no agent record.");
 			}
-			let r = await kt({ variables: { input: {
+			let r = await At({ variables: { input: {
 				name: e.name,
 				hostname: e.hostname,
 				platform: e.platform,
@@ -280,7 +280,7 @@ function at() {
 				...e.tunnelUrl ? { tunnelUrl: e.tunnelUrl } : {},
 				...e.tunnelStatus ? { tunnelStatus: e.tunnelStatus } : {}
 			} } }), i = r.data?.createVibecontrolsAgent;
-			if (i?.id) return await jt(i.id), y.emitCustom("vibecontrols.agent.registered", {
+			if (i?.id) return await Mt(i.id), y.emitCustom("vibecontrols.agent.registered", {
 				workspaceId: _ ?? void 0,
 				agentId: i.id
 			}), { id: i.id };
@@ -292,57 +292,57 @@ function at() {
 			}
 			throw console.error("Failed to create agent:", e), e;
 		} finally {
-			yt(!1);
+			bt(!1);
 		}
-	}, tn = async (e) => {
+	}, Z = async (e) => {
 		try {
-			let t = (await Pt({ variables: { agentId: e.id } })).data?.startVibecontrolsAgent;
+			let t = (await It({ variables: { agentId: e.id } })).data?.startVibecontrolsAgent;
 			if (!t?.success) {
 				if (/not yet configured|awaiting[-\s_]config/i.test(t?.error ?? "")) {
-					let t = (await It({ variables: { input: { agentId: e.id } } })).data?.setupAgentGatewayAuth;
+					let t = (await Rt({ variables: { input: { agentId: e.id } } })).data?.setupAgentGatewayAuth;
 					if (t?.error) throw Error(`Agent needs credentials. Auto re-push failed: ${t.error}. Try "Re-push credentials" in Security tab.`);
 					if (!t) throw Error("Agent needs credentials. Auto re-push returned no result. Try \"Re-push credentials\" in Security tab.");
 					let n = t.agent?.lastGatewayAuthPushStatus, r = t.agent?.lastGatewayAuthPushError;
 					if (n === "failed") throw Error(`Credentials created but push to agent tunnel failed: ${r || "unknown error"}. Check that the agent can reach the workspace's gateway URLs from its host network.`);
-					let i = (await Pt({ variables: { agentId: e.id } })).data?.startVibecontrolsAgent;
+					let i = (await It({ variables: { agentId: e.id } })).data?.startVibecontrolsAgent;
 					if (!i?.success) throw Error(`Credentials pushed but lifecycle/start failed: ${i?.error || "unknown error"}. The agent has fresh credentials; try clicking Reconnect again or check vibe status on the host.`);
 					y.emitCustom("vibecontrols.agent.gateway_auth_setup", {
 						workspaceId: _ ?? void 0,
 						agentId: e.id
-					}), await U({ variables: { id: e.id } }), c.success(`Agent "${e.name}" re-credentialed and started.`);
+					}), await Pt({ variables: { id: e.id } }), c.success(`Agent "${e.name}" re-credentialed and started.`);
 					return;
 				}
 				throw Error(t?.error || "Failed to start agent");
 			}
-			await U({ variables: { id: e.id } }), c.success(`Agent "${e.name}" started`);
+			await Pt({ variables: { id: e.id } }), c.success(`Agent "${e.name}" started`);
 		} catch (e) {
 			console.error("Failed to start agent:", e), c.error(e instanceof Error ? e.message : "Failed to start agent");
 		}
-	}, nn = async (e) => {
+	}, rn = async (e) => {
 		try {
-			let t = (await Ft({ variables: { agentId: e.id } })).data?.stopVibecontrolsAgent;
+			let t = (await Lt({ variables: { agentId: e.id } })).data?.stopVibecontrolsAgent;
 			if (!t?.success) throw Error(t?.error || "Failed to stop agent");
-			await Nt({ variables: { id: e.id } }), c.success(`Agent "${e.name}" stopped`);
+			await Ft({ variables: { id: e.id } }), c.success(`Agent "${e.name}" stopped`);
 		} catch (e) {
 			console.error("Failed to stop agent:", e), c.error(e instanceof Error ? e.message : "Failed to stop agent");
 		}
-	}, rn = (e) => {
+	}, an = (e) => {
 		P(e);
-	}, an = async () => {
+	}, on = async () => {
 		if (!N) return;
 		let e = N;
 		F(!0);
 		try {
-			await Nt({
+			await Ft({
 				variables: { id: e.id },
 				refetchQueries: []
 			});
 		} catch (e) {
-			console.error("Failed to deactivate agent:", e), c.error(e instanceof Error ? e.message : "Failed to disconnect agent"), F(!1), P(null), await G();
+			console.error("Failed to deactivate agent:", e), c.error(e instanceof Error ? e.message : "Failed to disconnect agent"), F(!1), P(null), await W();
 			return;
 		}
 		try {
-			await Ut({
+			await Gt({
 				variables: {
 					id: e.id,
 					input: {
@@ -355,16 +355,16 @@ function at() {
 		} catch (e) {
 			console.error("Failed to clear tunnel fields:", e), c.error("Agent marked offline, but failed to clear connection fields — clear them manually in Settings.");
 		}
-		F(!1), P(null), await G();
-	}, on = (e) => {
-		v(`/agents/${e.id}`);
+		F(!1), P(null), await W();
 	}, sn = (e) => {
+		v(`/agents/${e.id}`);
+	}, cn = (e) => {
 		k(e);
-	}, cn = async () => {
+	}, ln = async () => {
 		if (!O) return;
-		let e = O.id, t = Et.current?.value?.trim() || "";
+		let e = O.id, t = Dt.current?.value?.trim() || "";
 		try {
-			xt(!0), await Ut({
+			St(!0), await Gt({
 				variables: {
 					id: e,
 					input: {
@@ -373,53 +373,53 @@ function at() {
 					}
 				},
 				refetchQueries: ["ListAgents", "VibecontrolsAgentHealthProbes"]
-			}), t && St(e), k(null);
+			}), t && Ct(e), k(null);
 		} catch (e) {
 			console.error("Failed to update tunnel settings:", e);
 		} finally {
-			xt(!1);
+			St(!1);
 		}
-	}, ln = l((e) => {
+	}, un = l((e) => {
 		R((t) => {
 			let n = new Set(t);
 			return n.has(e) ? n.delete(e) : n.add(e), n;
 		});
-	}, []), un = l(() => {
-		R(new Set(X.map((e) => e.id)));
-	}, [X]), Q = l(() => {
+	}, []), dn = l(() => {
+		R(new Set(Y.map((e) => e.id)));
+	}, [Y]), Q = l(() => {
 		R(/* @__PURE__ */ new Set());
-	}, []), $ = X.length > 0 && L.size === X.length, dn = L.size > 0, fn = l(async () => {
+	}, []), $ = Y.length > 0 && L.size === Y.length, fn = L.size > 0, pn = l(async () => {
 		if (L.size !== 0) {
-			Dt(!0);
+			Ot(!0);
 			try {
-				let e = await Promise.allSettled(Array.from(L).map((e) => Wt({ variables: { id: e } }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.filter((e) => e.status === "rejected").length;
+				let e = await Promise.allSettled(Array.from(L).map((e) => Kt({ variables: { id: e } }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.filter((e) => e.status === "rejected").length;
 				n > 0 ? c.error(`Removed ${t}, failed to remove ${n} agent${n === 1 ? "" : "s"}`) : c.success(`Removed ${t} agent${t === 1 ? "" : "s"}`), R(/* @__PURE__ */ new Set());
 			} catch (e) {
 				c.error(e instanceof Error ? e.message : "Failed to remove agents");
 			} finally {
-				Dt(!1), B(!1);
+				Ot(!1), B(!1);
 			}
 		}
-	}, [L, Wt]), pn = {
-		total: Y.length,
-		active: Y.filter((e) => e.status === "ACTIVE").length,
-		offline: Y.filter((e) => e.status !== "ACTIVE").length
+	}, [L, Kt]), mn = {
+		total: J.length,
+		active: J.filter((e) => e.status === "ACTIVE").length,
+		offline: J.filter((e) => e.status !== "ACTIVE").length
 	};
-	return st ? /* @__PURE__ */ m(g, {
+	return ct ? /* @__PURE__ */ m(g, {
 		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-full",
 		children: /* @__PURE__ */ m(ve, { message: b("agentsPage.loadingPermissions", "Loading permissions...") })
-	}) : ct && ct.permissionStrings?.length > 0 && !dt ? /* @__PURE__ */ m(g, {
+	}) : lt && lt.permissionStrings?.length > 0 && !ft ? /* @__PURE__ */ m(g, {
 		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-full",
-		children: /* @__PURE__ */ m(tt, {
+		children: /* @__PURE__ */ m(nt, {
 			title: b("agentsPage.accessDeniedTitle", "Access Denied"),
 			description: b("agentsPage.accessDeniedDescription", "You don't have permission to view agents. Contact your workspace administrator for access.")
 		})
-	}) : Jt && Y.length === 0 ? /* @__PURE__ */ m(g, {
+	}) : Xt && J.length === 0 ? /* @__PURE__ */ m(g, {
 		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-full",
 		children: /* @__PURE__ */ m(ye, {
 			title: b("agentsPage.failedLoad", "Failed to load agents"),
-			message: Jt.message,
-			onRetry: () => G()
+			message: Xt.message,
+			onRetry: () => W()
 		})
 	}) : /* @__PURE__ */ h(g, {
 		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-full",
@@ -427,47 +427,51 @@ function at() {
 			/* @__PURE__ */ m(_e, {
 				title: b("agentsPage.title", "Agents"),
 				description: b("agentsPage.descriptionOnline", "{{active}} of {{total}} agents online", {
-					active: pn.active,
-					total: pn.total
+					active: mn.active,
+					total: mn.total
 				}),
 				actions: /* @__PURE__ */ h("div", {
 					className: "flex w-full flex-col items-end gap-2 sm:w-auto sm:flex-row sm:items-center",
 					children: [/* @__PURE__ */ m("button", {
 						type: "button",
 						onClick: () => {
-							G(), Zt();
+							W(), $t();
 						},
-						disabled: W || K.loading,
+						disabled: U || G.loading,
 						className: "flex items-center justify-center gap-2 px-3 py-2 max-md:min-h-11 max-md:min-w-11 text-text-secondary hover:bg-bg-sunken hover:text-text-primary rounded-button transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 						"aria-label": b("agentsPage.refreshTitle", "Refresh agents"),
 						title: b("agentsPage.refreshTitle", "Refresh agents"),
 						children: /* @__PURE__ */ m(Be, {
 							"aria-hidden": "true",
-							className: `size-4 ${W || K.loading ? "animate-spin" : ""}`
+							className: `size-4 ${U || G.loading ? "animate-spin" : ""}`
 						})
-					}), Ht ? /* @__PURE__ */ m(nt, {
+					}), Wt ? /* @__PURE__ */ m(rt, {
 						permission: ke.AGENT_CREATE,
 						deniedBehavior: "disable",
 						deniedTooltip: b("agentsPage.deniedCreateTooltip", "You don't have permission to create agents"),
 						children: /* @__PURE__ */ h("button", {
 							type: "button",
-							onClick: Z,
+							onClick: X,
 							className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 							children: [/* @__PURE__ */ m(p, { className: "size-4" }), b("agentsPage.addAgent", "Add Agent")]
 						})
 					}) : /* @__PURE__ */ h("button", {
 						type: "button",
-						onClick: Z,
+						onClick: X,
 						className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 						children: [/* @__PURE__ */ m(p, { className: "size-4" }), b("agentsPage.addAgent", "Add Agent")]
 					})]
 				})
 			}),
-			Y.length === 0 && !W && /* @__PURE__ */ m(Te, {
+			/* @__PURE__ */ m(Je, {
+				icon: /* @__PURE__ */ m(Ie, { className: "size-4" }),
+				children: b("agentsPage.purpose", "Agents are the lightweight programs you install on your own machines (laptop, server, CI runner) that let VibeControls securely run terminal sessions and tasks there. Register an agent here, then attach it to a vibe to give that workspace a place to actually execute work — your code never leaves your hardware.")
+			}),
+			J.length === 0 && !U && /* @__PURE__ */ m(Te, {
 				variant: "full",
 				dismissKey: "vibecontrols-agents-setup-banner"
 			}),
-			Y.length > 0 && /* @__PURE__ */ m(Te, {
+			J.length > 0 && /* @__PURE__ */ m(Te, {
 				variant: "compact",
 				dismissKey: "vibecontrols-agents-compact-banner"
 			}),
@@ -477,7 +481,7 @@ function at() {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ m(Ce, {
 						value: x,
-						onChange: ft,
+						onChange: pt,
 						placeholder: b("agentsPage.searchPlaceholder", "Search agents..."),
 						className: "flex-1 sm:w-64 sm:flex-none"
 					}), /* @__PURE__ */ h("div", {
@@ -485,7 +489,7 @@ function at() {
 						children: [/* @__PURE__ */ m("button", {
 							type: "button",
 							onClick: () => {
-								gt("grid"), R(/* @__PURE__ */ new Set());
+								_t("grid"), R(/* @__PURE__ */ new Set());
 							},
 							className: `flex items-center justify-center p-1.5 sm:p-2 max-md:min-h-11 max-md:min-w-11 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${T === "grid" ? "bg-[var(--color-accent-soft)] text-text-primary" : "text-text-secondary hover:bg-bg-surface/60"}`,
 							"aria-label": b("agentsPage.gridViewTitle", "Grid view"),
@@ -498,7 +502,7 @@ function at() {
 						}), /* @__PURE__ */ m("button", {
 							type: "button",
 							onClick: () => {
-								gt("list"), R(/* @__PURE__ */ new Set());
+								_t("list"), R(/* @__PURE__ */ new Set());
 							},
 							className: `flex items-center justify-center p-1.5 sm:p-2 max-md:min-h-11 max-md:min-w-11 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${T === "list" ? "bg-[var(--color-accent-soft)] text-text-primary" : "text-text-secondary hover:bg-bg-surface/60"}`,
 							"aria-label": b("agentsPage.listViewTitle", "List view"),
@@ -516,28 +520,28 @@ function at() {
 						/* @__PURE__ */ m(we, {
 							label: b("agentsPage.filterStatus", "Status"),
 							value: S,
-							options: lt,
-							onChange: pt
+							options: ut,
+							onChange: mt
 						}),
 						/* @__PURE__ */ m(we, {
 							label: b("agentsPage.filterPlatform", "Platform"),
 							value: C,
-							options: ut,
-							onChange: mt
+							options: dt,
+							onChange: ht
 						}),
 						/* @__PURE__ */ m(Oe, {
 							label: b("agentsPage.filterTag", "Tag"),
 							value: w,
-							onChange: ht
+							onChange: gt
 						})
 					]
 				})]
 			}),
-			T === "grid" && X.length > 0 && /* @__PURE__ */ m("div", {
+			T === "grid" && Y.length > 0 && /* @__PURE__ */ m("div", {
 				className: "flex justify-end",
 				children: /* @__PURE__ */ h("button", {
 					type: "button",
-					onClick: $ ? Q : un,
+					onClick: $ ? Q : dn,
 					"aria-pressed": $,
 					className: "flex items-center gap-1.5 px-3 py-1.5 max-md:min-h-11 text-xs text-text-secondary hover:text-text-primary rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 					children: [/* @__PURE__ */ m(Le, {
@@ -546,7 +550,7 @@ function at() {
 					}), $ ? b("agentsPage.deselectAll", "Deselect All") : b("agentsPage.selectAll", "Select All")]
 				})
 			}),
-			dn && /* @__PURE__ */ h("div", {
+			fn && /* @__PURE__ */ h("div", {
 				className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 px-4 py-2.5 bg-[var(--color-accent-soft)] border border-border-subtle rounded-card",
 				children: [/* @__PURE__ */ m("span", {
 					className: "text-sm font-medium text-text-primary",
@@ -584,51 +588,51 @@ function at() {
 			x || S !== "all" || C !== "all" ? /* @__PURE__ */ h("p", {
 				className: "text-sm text-text-secondary",
 				children: [b("agentsPage.showingResults", "Showing {{filtered}} of {{total}} agents", {
-					filtered: X.length,
-					total: Y.length
-				}), W && /* @__PURE__ */ m("span", {
+					filtered: Y.length,
+					total: J.length
+				}), U && /* @__PURE__ */ m("span", {
 					className: "ml-2 text-text-muted",
 					children: b("agentsPage.refreshing", "(refreshing...)")
 				})]
 			}) : null,
-			W && Y.length === 0 ? /* @__PURE__ */ m(Ae, {
+			U && J.length === 0 ? /* @__PURE__ */ m(Ae, {
 				variant: "rows",
 				count: 6
-			}) : X.length > 0 ? /* @__PURE__ */ m(Ge, {
+			}) : Y.length > 0 ? /* @__PURE__ */ m(Ge, {
 				mode: "wait",
-				children: T === "grid" ? /* @__PURE__ */ m(it, {
+				children: T === "grid" ? /* @__PURE__ */ m(at, {
 					"data-tour": "agents-page-grid-header",
 					stagger: .04,
 					className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
-					children: X.map((e) => /* @__PURE__ */ m(rt, {
+					children: Y.map((e) => /* @__PURE__ */ m(it, {
 						className: "h-full",
 						children: /* @__PURE__ */ m(je, {
 							agent: e,
-							onSelect: $t,
-							onStart: tn,
-							onStop: nn,
-							onDisconnect: rn,
-							onConfigure: on,
-							onEditTunnelUrl: sn,
+							onSelect: tn,
+							onStart: Z,
+							onStop: rn,
+							onDisconnect: an,
+							onConfigure: sn,
+							onEditTunnelUrl: cn,
 							selected: L.has(e.id),
-							onToggleSelect: () => ln(e.id),
+							onToggleSelect: () => un(e.id),
 							healthErrorMessage: e.healthError ?? null
 						})
 					}, e.id))
-				}, "grid-view") : /* @__PURE__ */ m(it, {
+				}, "grid-view") : /* @__PURE__ */ m(at, {
 					stagger: .04,
-					children: /* @__PURE__ */ m(rt, {
+					children: /* @__PURE__ */ m(it, {
 						variant: "fadeRight",
 						children: /* @__PURE__ */ m(Me, {
-							agents: X,
-							onSelect: $t,
-							onStart: tn,
-							onStop: nn,
-							onDisconnect: rn,
-							onSettings: on,
+							agents: Y,
+							onSelect: tn,
+							onStart: Z,
+							onStop: rn,
+							onDisconnect: an,
+							onSettings: sn,
 							selectedIds: L,
-							onToggleSelect: ln,
-							onSelectAll: un,
+							onToggleSelect: un,
+							onSelectAll: dn,
 							onDeselectAll: Q
 						})
 					})
@@ -643,7 +647,7 @@ function at() {
 					children: [
 						/* @__PURE__ */ h("button", {
 							type: "button",
-							onClick: Z,
+							onClick: X,
 							className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 							children: [/* @__PURE__ */ m(p, { className: "size-4" }), b("agentsPage.addAgent", "Add Agent")]
 						}),
@@ -657,50 +661,50 @@ function at() {
 					]
 				}) : void 0
 			}),
-			_t && /* @__PURE__ */ m(Ne, {
-				onSubmit: en,
+			vt && /* @__PURE__ */ m(Ne, {
+				onSubmit: nn,
 				onCancel: () => E(!1),
-				isLoading: vt,
+				isLoading: yt,
 				onNavigate: (e) => {
 					E(!1), v(e);
 				},
-				targets: Vt.map((e) => ({
+				targets: Ut.map((e) => ({
 					id: e.id,
 					name: e.name,
 					type: e.type || "DIRECT",
 					status: e.status
 				})),
-				targetsLoading: zt,
-				onCreateTarget: Kt,
+				targetsLoading: Vt,
+				onCreateTarget: Jt,
 				extraSection: /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h3", {
 					className: "text-sm font-medium text-text-secondary mb-2",
 					children: b("agents.tags", "Tags")
 				}), /* @__PURE__ */ m(be, {
 					entityType: "VIBECONTROLS_AGENT",
-					onDraftChange: At
+					onDraftChange: jt
 				})] })
 			}),
 			/* @__PURE__ */ m(de, {
 				isOpen: N !== null,
 				onClose: () => {
-					Tt || P(null);
+					Et || P(null);
 				},
-				onConfirm: an,
+				onConfirm: on,
 				title: b("agentsPage.disconnectTitle", "Disconnect Agent"),
 				message: N ? Pe(N) === "OFFLINE" ? b("agentsPage.disconnectOfflineMessage", "Clear the stored tunnel connection for {{name}}? This will remove the tunnel URL and API key from this offline agent.", { name: N.name }) : b("agentsPage.disconnectActiveMessage", "Mark {{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.", { name: N.name }) : "",
 				confirmLabel: b("agentsPage.disconnectConfirm", "Disconnect"),
 				variant: "danger",
-				isLoading: Tt
+				isLoading: Et
 			}),
-			/* @__PURE__ */ m(Je, {
+			/* @__PURE__ */ m(Ye, {
 				open: O !== null,
 				onOpenChange: (e) => {
 					e || k(null);
 				},
-				children: O ? /* @__PURE__ */ h(Ye, {
+				children: O ? /* @__PURE__ */ h(Xe, {
 					className: "sm:max-w-md",
 					children: [
-						/* @__PURE__ */ h(Qe, { children: [/* @__PURE__ */ m($e, { children: b("agentsPage.editTunnelTitle", "Edit Tunnel") }), /* @__PURE__ */ m(Xe, { children: b("agentsPage.editTunnelDescription", "Configure the cloudflared tunnel URL and API key for {{name}}.", { name: O.name }) })] }),
+						/* @__PURE__ */ h($e, { children: [/* @__PURE__ */ m(et, { children: b("agentsPage.editTunnelTitle", "Edit Tunnel") }), /* @__PURE__ */ m(Ze, { children: b("agentsPage.editTunnelDescription", "Configure the cloudflared tunnel URL and API key for {{name}}.", { name: O.name }) })] }),
 						/* @__PURE__ */ h("div", {
 							className: "py-4",
 							children: [
@@ -711,7 +715,7 @@ function at() {
 								}),
 								/* @__PURE__ */ m(qe, {
 									...I.inputProps,
-									ref: Et,
+									ref: Dt,
 									type: "url",
 									defaultValue: O.tunnelUrl || "",
 									placeholder: b("agentsPage.tunnelUrlPlaceholder", "https://example.trycloudflare.com"),
@@ -724,7 +728,7 @@ function at() {
 								})
 							]
 						}),
-						/* @__PURE__ */ h(Ze, { children: [/* @__PURE__ */ m(Ke, {
+						/* @__PURE__ */ h(Qe, { children: [/* @__PURE__ */ m(Ke, {
 							type: "button",
 							variant: "outline",
 							onClick: () => k(null),
@@ -732,7 +736,7 @@ function at() {
 							children: b("agentsPage.cancel", "Cancel")
 						}), /* @__PURE__ */ m(Ke, {
 							type: "button",
-							onClick: cn,
+							onClick: ln,
 							disabled: A,
 							"aria-busy": A,
 							className: "max-md:min-h-11",
@@ -742,11 +746,11 @@ function at() {
 				}) : null
 			}),
 			/* @__PURE__ */ m(de, {
-				isOpen: Ot,
+				isOpen: kt,
 				onClose: () => {
 					z || B(!1);
 				},
-				onConfirm: fn,
+				onConfirm: pn,
 				title: b("agentsPage.bulkDeleteTitle", "Remove agents"),
 				message: b("agentsPage.bulkDeleteConfirm", "Are you sure you want to remove {{count}} agent(s)? This cannot be undone.", { count: L.size }),
 				confirmLabel: b("agentsPage.remove", "Remove"),
@@ -766,6 +770,6 @@ function at() {
 	});
 }
 //#endregion
-export { at as AgentsPage };
+export { ot as AgentsPage };
 
 //# sourceMappingURL=AgentsPage.js.map