@burdenoff/microfe-vibecontrols 2026.511.1 → 2026.512.1

package/dist/pages/AgentsPage.js

@@ -1,90 +1,112 @@
 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 { useVibeControlsStore as a } from "../store/vibeControlsStore.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 { LoadingState as o } 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 { FilterDropdown as ge } from "../components/shared/FilterDropdown.js";
+import { AgentSetupBanner as _e } from "../components/shared/AgentSetupBanner.js";
+import { GetHelpButton as ve } from "../components/shared/GetHelpButton.js";
+import { TagFilter as ye } 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 { VIBE_PERMISSIONS as be } from "../constants/permissions.js";
+import { AgentCard as xe } from "../components/agents/AgentCard.js";
+import { AgentList as Se } from "../components/agents/AgentList.js";
+import { AgentForm as Ce } from "../components/agents/AgentForm.js";
 import "../components/agents/index.js";
-import { deriveAgentStatus as Ce } from "../utils/agentStatus.js";
+import { deriveAgentStatus as we } 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";
+import { useI18n as Te } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Bot as Ee, CheckSquare as De, Grid as Oe, List as ke, Plus as f, RefreshCw as Ae, Trash2 as je, XSquare as Me } from "lucide-react";
+import { usePermissions as Ne } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AnimatePresence as p, motion as Pe } from "framer-motion";
+import { Fragment as Fe, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { MotionItem as g, MotionList as _, MotionPage as v } from "@burdenoff/fe-libs/shared/motion";
+import { AccessDenied as Ie, PermissionButton as Le } 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) => {
+function y() {
+	let { onAgentSelect: y, workspaceId: b } = se(), x = ce(), { hasPermission: Re, isLoading: ze, permissions: Be } = Ne(), { t: Ve } = Te(), S = 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")
+			label: S("agentsPage.statusAll", "All Statuses")
 		},
 		{
 			value: "ACTIVE",
-			label: x("agentsPage.statusActive", "Active")
+			label: S("agentsPage.statusActive", "Active")
 		},
 		{
 			value: "STOPPED",
-			label: x("agentsPage.statusStopped", "Stopped")
+			label: S("agentsPage.statusStopped", "Stopped")
 		},
 		{
 			value: "OFFLINE",
-			label: x("agentsPage.statusOffline", "Offline")
+			label: S("agentsPage.statusOffline", "Offline")
 		}
 	], Ue = [
 		{
 			value: "all",
-			label: x("agentsPage.platformAll", "All Platforms")
+			label: S("agentsPage.platformAll", "All Platforms")
 		},
 		{
 			value: "darwin",
-			label: x("agentsPage.platformMac", "macOS")
+			label: S("agentsPage.platformMac", "macOS")
 		},
 		{
 			value: "linux",
-			label: x("agentsPage.platformLinux", "Linux")
+			label: S("agentsPage.platformLinux", "Linux")
 		},
 		{
 			value: "windows",
-			label: x("agentsPage.platformWindows", "Windows")
+			label: S("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);
+	], We = Re(be.AGENT_LIST), [C, Ge] = d(""), [w, Ke] = d("all"), [T, qe] = d("all"), [E, Je] = d("all"), [D, Ye] = d("grid"), [Xe, O] = d(!1), [Ze, Qe] = d(!1), [k, A] = d(null), [$e, et] = d(!1), j = a((e) => e.connectingAgents), tt = a((e) => e.markAgentConnecting), M = a((e) => e.clearAgentConnecting), nt = l(() => new Set(Object.keys(j)), [j]), rt = u(/* @__PURE__ */ new Map());
+	c(() => {
+		let e = rt.current;
+		for (let t of Object.keys(j)) {
+			if (e.has(t)) continue;
+			let n = setTimeout(() => {
+				M(t), e.delete(t);
+			}, 3e4);
+			e.set(t, n);
+		}
+		for (let [t, n] of e.entries()) t in j || (clearTimeout(n), e.delete(t));
+	}, [j, M]), c(() => {
+		let e = rt.current;
+		return () => {
+			for (let t of e.values()) clearTimeout(t);
+			e.clear();
+		};
+	}, []);
+	let [N, P] = d(null), [F, I] = d(!1), it = u(null), at = u(null), [L, R] = d(/* @__PURE__ */ new Set()), [ot, st] = d(!1), [ct, z] = d(null), [lt, B] = d(null), [ut, V] = d(!1), H = u(null);
 	c(() => () => {
-		U.current && clearTimeout(U.current);
+		H.current && clearTimeout(H.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;
+	let U = s((e) => {
+		H.current && clearTimeout(H.current), B(null), z(e), H.current = setTimeout(() => z(null), 3e3);
+	}, []), W = s((e) => {
+		H.current && clearTimeout(H.current), z(null), B(e), H.current = setTimeout(() => B(null), 5e3);
+	}, []), [dt] = n({ refetchQueries: ["ListAgents"] }), [ft] = e({ refetchQueries: ["ListAgents"] }), [pt] = t({ refetchQueries: ["ListAgents"] }), [mt] = i({ refetchQueries: ["ListAgents"] }), [ht] = ne({ refetchQueries: ["ListAgents"] }), [gt] = re({ refetchQueries: ["ListAgents"] }), { targets: _t, loading: vt, refetch: yt } = le(), bt = _t, xt = vt, St = bt.length > 0, [Ct] = ie({ refetchQueries: ["ListAgents"] }), [wt] = ee({ refetchQueries: ["ListAgents"] }), [Tt] = r({
+		refetchQueries: ["VibeControlsInitialData", "ListTargets"],
+		awaitRefetchQueries: !0
+	}), Et = s(async (e) => {
+		if (!b || !e.trim()) return null;
 		try {
-			let { data: t } = await vt({ variables: {
-				workspaceId: y,
+			let { data: t } = await Tt({ variables: {
+				workspaceId: b,
 				input: {
 					type: "DIRECT",
 					name: e.trim()
 				}
 			} }), n = t?.createTarget;
-			return n ? (ft(), {
+			return n ? (yt(), {
 				id: n.id,
 				name: n.name,
 				type: n.type ?? "DIRECT",
@@ -94,31 +116,33 @@ function Le() {
 			return null;
 		}
 	}, [
-		vt,
-		ft,
-		y
-	]), { data: bt, loading: K, error: xt, refetch: q } = te({
+		Tt,
+		yt,
+		b
+	]), { data: Dt, loading: G, error: Ot, refetch: K } = te({
 		variables: {
 			filter: {
-				isActive: C === "ACTIVE" ? !0 : C === "OFFLINE" ? !1 : void 0,
-				platform: w === "all" ? void 0 : w
+				isActive: w === "ACTIVE" ? !0 : w === "OFFLINE" ? !1 : void 0,
+				platform: T === "all" ? void 0 : T
 			},
 			pagination: { limit: 100 }
 		},
-		fetchPolicy: "cache-first"
-	}), J = oe({
+		fetchPolicy: "cache-first",
+		skip: !b
+	}), q = 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 ?? [];
+		notifyOnNetworkStatusChange: !0,
+		skip: !b
+	}), { data: J } = ae({ skip: !b }), kt = q.data === void 0 && J === void 0, Y = l(() => {
+		let e = /* @__PURE__ */ new Map(), t = J?.vibecontrolsAgentHealthProbeStream ?? q.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) => ({
+	}, [q.data, J]), X = l(() => (Dt?.vibecontrolsAgents ?? []).map((e) => ({
 		id: e.id,
 		workspaceId: e.workspaceId,
 		name: e.name,
@@ -127,12 +151,12 @@ function Le() {
 		architecture: e.architecture,
 		version: e.version,
 		isActive: e.isActive,
-		status: Ce({
+		status: nt.has(e.id) ? "CONNECTING" : we({
 			id: e.id,
 			isActive: e.isActive,
 			metadata: e.metadata
-		}, Ct, { probesLoading: St }),
-		healthError: Ct.get(e.id)?.errorMessage ?? null,
+		}, Y, { probesLoading: kt }),
+		healthError: Y.get(e.id)?.errorMessage ?? null,
 		lastHeartbeat: e.lastHeartbeat || null,
 		tunnelUrl: e.tunnelUrl ?? null,
 		tunnelStatus: e.tunnelStatus ?? null,
@@ -155,35 +179,63 @@ function Le() {
 				color: e.tagInfo.color ?? null
 			} : null
 		}))
-	})), [bt?.vibecontrolsAgents]), Z = l(() => X.filter((e) => {
-		if (S) {
-			let t = S.toLowerCase();
+	})), [
+		Dt?.vibecontrolsAgents,
+		Y,
+		kt,
+		nt
+	]);
+	c(() => {
+		let e = Object.keys(j);
+		if (e.length === 0) return;
+		let t = Date.now(), n = Infinity;
+		for (let r of e) {
+			let e = j[r];
+			e !== void 0 && (Y.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 = a.getState().connectingAgents;
+			for (let t of Object.keys(e)) {
+				let n = e[t];
+				n !== void 0 && Y.get(t)?.healthy === !0 && Date.now() >= n && M(t);
+			}
+		}, r);
+		return () => clearTimeout(i);
+	}, [
+		Y,
+		j,
+		M
+	]);
+	let Z = l(() => X.filter((e) => {
+		if (C) {
+			let t = C.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));
+		return !(E !== "all" && !(e.tagAssignments ?? []).some((e) => e.tagId === E));
 	}), [
 		X,
-		S,
-		T
+		C,
+		E
 	]);
 	c(() => () => {
-		U.current && clearTimeout(U.current);
+		H.current && clearTimeout(H.current);
 	}, []);
-	let wt = (e) => {
-		b(`/agents/${e.id}`), Le?.({
+	let At = (e) => {
+		x(`/agents/${e.id}`), y?.({
 			id: e.id,
 			name: e.name,
 			type: e.platform || "unknown",
 			status: e.status || (e.isActive ? "ACTIVE" : "OFFLINE")
 		});
 	}, Q = () => {
-		D(!0);
-	}, Tt = async (e) => {
+		O(!0);
+	}, jt = async (e) => {
 		try {
 			Qe(!0);
 			let t = e.tunnelUrl?.trim(), n = e.agentApiKey?.trim();
 			if (t && n) {
-				let r = await at({ variables: { input: {
+				let r = await ft({ variables: { input: {
 					tunnelUrl: t,
 					apiKey: n,
 					...e.name ? { name: e.name } : {},
@@ -195,7 +247,7 @@ function Le() {
 				if (i.agent?.id) return { id: i.agent.id };
 				throw Error("Agent onboarding returned no agent record.");
 			}
-			let r = await it({ variables: { input: {
+			let r = await dt({ variables: { input: {
 				name: e.name,
 				hostname: e.hostname,
 				platform: e.platform,
@@ -209,46 +261,46 @@ function Le() {
 			throw r.error ? r.error : Error("Agent creation failed — no data returned from the server.");
 		} catch (e) {
 			if (pe(e)) {
-				H(!0), D(!1);
+				V(!0), O(!1);
 				return;
 			}
 			throw console.error("Failed to create agent:", e), e;
 		} finally {
 			Qe(!1);
 		}
-	}, Et = async (e) => {
+	}, Mt = async (e) => {
 		try {
-			let t = (await ct({ variables: { agentId: e.id } })).data?.startVibecontrolsAgent;
+			let t = (await ht({ 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`);
+			await pt({ variables: { id: e.id } }), U(`Agent "${e.name}" started`);
 		} catch (e) {
-			console.error("Failed to start agent:", e), G(e instanceof Error ? e.message : "Failed to start agent");
+			console.error("Failed to start agent:", e), W(e instanceof Error ? e.message : "Failed to start agent");
 		}
-	}, Dt = async (e) => {
+	}, Nt = async (e) => {
 		try {
-			let t = (await lt({ variables: { agentId: e.id } })).data?.stopVibecontrolsAgent;
+			let t = (await gt({ 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`);
+			await mt({ variables: { id: e.id } }), U(`Agent "${e.name}" stopped`);
 		} catch (e) {
-			console.error("Failed to stop agent:", e), G(e instanceof Error ? e.message : "Failed to stop agent");
+			console.error("Failed to stop agent:", e), W(e instanceof Error ? e.message : "Failed to stop agent");
 		}
 	}, $ = (e) => {
-		j(e);
-	}, Ot = async () => {
-		if (!A) return;
-		let e = A;
-		N(!0);
+		P(e);
+	}, Pt = async () => {
+		if (!N) return;
+		let e = N;
+		I(!0);
 		try {
-			await st({
+			await mt({
 				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();
+			console.error("Failed to deactivate agent:", e), W(e instanceof Error ? e.message : "Failed to disconnect agent"), I(!1), P(null), await K();
 			return;
 		}
 		try {
-			await gt({
+			await Ct({
 				variables: {
 					id: e.id,
 					input: {
@@ -258,300 +310,304 @@ function Le() {
 					}
 				},
 				refetchQueries: []
-			}), W(`Agent "${e.name}" disconnected`);
+			}), U(`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.");
+			console.error("Failed to clear tunnel fields:", e), W("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() || "";
+		I(!1), P(null), await K();
+	}, Ft = (e) => {
+		x(`/agents/${e.id}`);
+	}, It = (e) => {
+		A(e);
+	}, Lt = async () => {
+		if (!k) return;
+		let e = k.id, t = it.current?.value?.trim() || "", n = at.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);
+			et(!0), await Ct({
+				variables: {
+					id: e,
+					input: {
+						tunnelUrl: t || null,
+						tunnelStatus: t ? "ACTIVE" : null,
+						agentApiKey: n || null
+					}
+				},
+				refetchQueries: ["ListAgents", "VibecontrolsAgentHealthProbes"]
+			}), t && tt(e), A(null);
 		} catch (e) {
 			console.error("Failed to update tunnel settings:", e);
 		} finally {
 			et(!1);
 		}
-	}, Mt = s((e) => {
-		I((t) => {
+	}, Rt = s((e) => {
+		R((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);
+	}, []), zt = s(() => {
+		R(new Set(Z.map((e) => e.id)));
+	}, [Z]), Bt = s(() => {
+		R(/* @__PURE__ */ new Set());
+	}, []), Vt = Z.length > 0 && L.size === Z.length, Ht = L.size > 0, Ut = s(async () => {
+		if (L.size !== 0 && window.confirm(S("agentsPage.bulkDeleteConfirm", "Are you sure you want to remove {{count}} agent(s)? This cannot be undone.", { count: L.size }))) {
+			st(!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());
+				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;
+				n > 0 ? W(`Removed ${t}, failed to remove ${n} agent${n === 1 ? "" : "s"}`) : U(`Removed ${t} agent${t === 1 ? "" : "s"}`), R(/* @__PURE__ */ new Set());
 			} catch (e) {
-				G(e instanceof Error ? e.message : "Failed to remove agents");
+				W(e instanceof Error ? e.message : "Failed to remove agents");
 			} finally {
-				L(!1);
+				st(!1);
 			}
 		}
 	}, [
-		F,
-		_t,
-		G,
-		W
-	]), Rt = {
+		L,
+		wt,
+		W,
+		U
+	]), Wt = {
 		total: X.length,
 		active: X.filter((e) => e.isActive).length,
 		offline: X.filter((e) => !e.isActive).length
 	};
-	return ze ? /* @__PURE__ */ g(v, {
+	return ze ? /* @__PURE__ */ m(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, {
+		children: /* @__PURE__ */ m(o, { message: S("agentsPage.loadingPermissions", "Loading permissions...") })
+	}) : Be && Be.permissionStrings?.length > 0 && !We ? /* @__PURE__ */ m(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.")
+		children: /* @__PURE__ */ m(Ie, {
+			title: S("agentsPage.accessDeniedTitle", "Access Denied"),
+			description: S("agentsPage.accessDeniedDescription", "You don't have permission to view agents. Contact your workspace administrator for access.")
 		})
-	}) : K && X.length === 0 ? /* @__PURE__ */ g(v, {
+	}) : G && X.length === 0 ? /* @__PURE__ */ m(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, {
+		children: /* @__PURE__ */ m(o, { message: S("agentsPage.loadingAgents", "Loading agents...") })
+	}) : Ot && X.length === 0 ? /* @__PURE__ */ m(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()
+		children: /* @__PURE__ */ m(de, {
+			title: S("agentsPage.failedLoad", "Failed to load agents"),
+			message: Ot.message,
+			onRetry: () => K()
 		})
-	}) : /* @__PURE__ */ _(v, {
+	}) : /* @__PURE__ */ h(v, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: [
-			R && /* @__PURE__ */ g("div", {
+			ct && /* @__PURE__ */ m("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
+				children: ct
 			}),
-			B && /* @__PURE__ */ g("div", {
+			lt && /* @__PURE__ */ m("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
+				children: lt
 			}),
-			/* @__PURE__ */ g(ue, {
-				title: x("agentsPage.title", "Agents"),
-				description: x("agentsPage.descriptionOnline", "{{active}} of {{total}} agents online", {
-					active: Rt.active,
-					total: Rt.total
+			/* @__PURE__ */ m(ue, {
+				title: S("agentsPage.title", "Agents"),
+				description: S("agentsPage.descriptionOnline", "{{active}} of {{total}} agents online", {
+					active: Wt.active,
+					total: Wt.total
 				}),
-				actions: /* @__PURE__ */ _("div", {
+				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__ */ g("button", {
-						onClick: () => q(),
-						disabled: K,
+					children: [/* @__PURE__ */ m("button", {
+						onClick: () => K(),
+						disabled: G,
 						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,
+						title: S("agentsPage.refreshTitle", "Refresh agents"),
+						children: /* @__PURE__ */ m(Ae, { className: `w-4 h-4 ${G ? "animate-spin" : ""}` })
+					}), St ? /* @__PURE__ */ m(Le, {
+						permission: be.AGENT_CREATE,
 						deniedBehavior: "disable",
-						deniedTooltip: x("agentsPage.deniedCreateTooltip", "You don't have permission to create agents"),
-						children: /* @__PURE__ */ _("button", {
+						deniedTooltip: S("agentsPage.deniedCreateTooltip", "You don't have permission to create agents"),
+						children: /* @__PURE__ */ h("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")]
+							children: [/* @__PURE__ */ m(f, { className: "w-4 h-4" }), S("agentsPage.addAgent", "Add Agent")]
 						})
-					}) : /* @__PURE__ */ _("button", {
+					}) : /* @__PURE__ */ h("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")]
+						children: [/* @__PURE__ */ m(f, { className: "w-4 h-4" }), S("agentsPage.addAgent", "Add Agent")]
 					})]
 				})
 			}),
-			X.length === 0 && !K && /* @__PURE__ */ g(ge, {
+			X.length === 0 && !G && /* @__PURE__ */ m(_e, {
 				variant: "full",
 				dismissKey: "vibecontrols-agents-setup-banner"
 			}),
-			X.length > 0 && /* @__PURE__ */ g(ge, {
+			X.length > 0 && /* @__PURE__ */ m(_e, {
 				variant: "compact",
 				dismissKey: "vibecontrols-agents-compact-banner"
 			}),
-			/* @__PURE__ */ _("div", {
+			/* @__PURE__ */ h("div", {
 				className: "space-y-3",
-				children: [/* @__PURE__ */ _("div", {
+				children: [/* @__PURE__ */ h("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ g(he, {
-						value: S,
+					children: [/* @__PURE__ */ m(he, {
+						value: C,
 						onChange: Ge,
-						placeholder: x("agentsPage.searchPlaceholder", "Search agents..."),
+						placeholder: S("agentsPage.searchPlaceholder", "Search agents..."),
 						className: "flex-1 sm:w-64 sm:flex-none"
-					}), /* @__PURE__ */ _("div", {
+					}), /* @__PURE__ */ h("div", {
 						className: "flex items-center gap-1 bg-bg-sunken rounded-md p-1 flex-shrink-0",
-						children: [/* @__PURE__ */ g("button", {
+						children: [/* @__PURE__ */ m("button", {
 							onClick: () => {
-								Ye("grid"), I(/* @__PURE__ */ new Set());
+								Ye("grid"), R(/* @__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", {
+							className: `p-1.5 sm:p-2 rounded ${D === "grid" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+							title: S("agentsPage.gridViewTitle", "Grid view"),
+							children: /* @__PURE__ */ m(Oe, { className: "w-4 h-4 text-text-secondary" })
+						}), /* @__PURE__ */ m("button", {
 							onClick: () => {
-								Ye("list"), I(/* @__PURE__ */ new Set());
+								Ye("list"), R(/* @__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" })
+							className: `p-1.5 sm:p-2 rounded ${D === "list" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+							title: S("agentsPage.listViewTitle", "List view"),
+							children: /* @__PURE__ */ m(ke, { className: "w-4 h-4 text-text-secondary" })
 						})]
 					})]
-				}), /* @__PURE__ */ _("div", {
+				}), /* @__PURE__ */ h("div", {
 					className: "flex items-center gap-2 sm:gap-3 flex-wrap",
 					children: [
-						/* @__PURE__ */ g(o, {
-							label: x("agentsPage.filterStatus", "Status"),
-							value: C,
+						/* @__PURE__ */ m(ge, {
+							label: S("agentsPage.filterStatus", "Status"),
+							value: w,
 							options: He,
 							onChange: Ke
 						}),
-						/* @__PURE__ */ g(o, {
-							label: x("agentsPage.filterPlatform", "Platform"),
-							value: w,
+						/* @__PURE__ */ m(ge, {
+							label: S("agentsPage.filterPlatform", "Platform"),
+							value: T,
 							options: Ue,
 							onChange: qe
 						}),
-						/* @__PURE__ */ g(ve, {
-							label: x("agentsPage.filterTag", "Tag"),
-							value: T,
+						/* @__PURE__ */ m(ye, {
+							label: S("agentsPage.filterTag", "Tag"),
+							value: E,
 							onChange: Je
 						})
 					]
 				})]
 			}),
-			Z.length > 0 && /* @__PURE__ */ g("div", {
+			Z.length > 0 && /* @__PURE__ */ m("div", {
 				className: "flex items-center gap-2 flex-wrap",
-				children: /* @__PURE__ */ g("div", {
+				children: /* @__PURE__ */ m("div", {
 					className: "ml-auto flex items-center gap-2",
-					children: /* @__PURE__ */ _("button", {
-						onClick: Ft ? Pt : Nt,
+					children: /* @__PURE__ */ h("button", {
+						onClick: Vt ? Bt : zt,
 						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")]
+						children: [/* @__PURE__ */ m(De, { className: "w-3.5 h-3.5" }), Vt ? S("agentsPage.deselectAll", "Deselect All") : S("agentsPage.selectAll", "Select All")]
 					})
 				})
 			}),
-			It && /* @__PURE__ */ _("div", {
+			Ht && /* @__PURE__ */ h("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", {
+				children: [/* @__PURE__ */ m("span", {
 					className: "text-sm font-medium text-text-primary",
-					children: x("agentsPage.selectedCount", "{{count}} agents selected", { count: F.size })
-				}), /* @__PURE__ */ _("div", {
+					children: S("agentsPage.selectedCount", "{{count}} agents selected", { count: L.size })
+				}), /* @__PURE__ */ h("div", {
 					className: "flex items-center gap-1.5 sm:ml-auto",
-					children: [/* @__PURE__ */ _("button", {
-						onClick: Lt,
-						disabled: nt,
+					children: [/* @__PURE__ */ h("button", {
+						onClick: Ut,
+						disabled: ot,
 						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" }),
+							/* @__PURE__ */ m(je, { className: "w-3 h-3" }),
 							" ",
-							x("agentsPage.remove", "Remove")
+							S("agentsPage.remove", "Remove")
 						]
-					}), /* @__PURE__ */ _("button", {
-						onClick: Pt,
+					}), /* @__PURE__ */ h("button", {
+						onClick: Bt,
 						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" }),
+							/* @__PURE__ */ m(Me, { className: "w-3 h-3" }),
 							" ",
-							x("agentsPage.deselect", "Deselect")
+							S("agentsPage.deselect", "Deselect")
 						]
 					})]
 				})]
 			}),
-			S || C !== "all" || w !== "all" ? /* @__PURE__ */ _("p", {
+			C || w !== "all" || T !== "all" ? /* @__PURE__ */ h("p", {
 				className: "text-sm text-text-secondary",
-				children: [x("agentsPage.showingResults", "Showing {{filtered}} of {{total}} agents", {
+				children: [S("agentsPage.showingResults", "Showing {{filtered}} of {{total}} agents", {
 					filtered: Z.length,
 					total: X.length
-				}), K && /* @__PURE__ */ g("span", {
+				}), G && /* @__PURE__ */ m("span", {
 					className: "ml-2 text-text-muted",
-					children: x("agentsPage.refreshing", "(refreshing...)")
+					children: S("agentsPage.refreshing", "(refreshing...)")
 				})]
 			}) : null,
-			Z.length > 0 ? /* @__PURE__ */ g(p, {
+			Z.length > 0 ? /* @__PURE__ */ m(p, {
 				mode: "wait",
-				children: E === "grid" ? /* @__PURE__ */ g(Pe, {
+				children: D === "grid" ? /* @__PURE__ */ m(_, {
 					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, {
+					children: Z.map((e) => /* @__PURE__ */ m(g, { children: /* @__PURE__ */ m(xe, {
 						agent: e,
-						onSelect: wt,
-						onStart: Et,
-						onStop: Dt,
+						onSelect: At,
+						onStart: Mt,
+						onStop: Nt,
 						onDisconnect: $,
-						onConfigure: kt,
-						onEditTunnelUrl: At,
-						selected: F.has(e.id),
-						onToggleSelect: () => Mt(e.id)
+						onConfigure: Ft,
+						onEditTunnelUrl: It,
+						selected: L.has(e.id),
+						onToggleSelect: () => Rt(e.id),
+						healthErrorMessage: e.healthError ?? null
 					}) }, e.id))
-				}, "grid-view") : /* @__PURE__ */ g(Pe, {
+				}, "grid-view") : /* @__PURE__ */ m(_, {
 					stagger: .04,
-					children: /* @__PURE__ */ g(Ne, {
+					children: /* @__PURE__ */ m(g, {
 						variant: "fadeRight",
-						children: /* @__PURE__ */ g(xe, {
+						children: /* @__PURE__ */ m(Se, {
 							agents: Z,
-							onSelect: wt,
-							onStart: Et,
-							onStop: Dt,
+							onSelect: At,
+							onStart: Mt,
+							onStop: Nt,
 							onDisconnect: $,
-							onSettings: kt
+							onSettings: Ft
 						})
 					})
 				}, "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", {
+			}) : /* @__PURE__ */ m(me, {
+				icon: /* @__PURE__ */ m(Ee, { className: "w-8 h-8 text-text-secondary" }),
+				title: C || w !== "all" || T !== "all" ? S("agentsPage.emptyNoAgentsFound", "No agents found") : S("agentsPage.emptyNoAgentsConfigured", "No agents configured"),
+				description: C || w !== "all" || T !== "all" ? S("agentsPage.emptyAdjustSearch", "Try adjusting your search or filters") : S("agentsPage.emptyNoAgentsDescription", "Install the CLI agent on your machine, then add it here. You can create a target inline while adding the agent."),
+				action: !C && w === "all" && T === "all" ? /* @__PURE__ */ h("div", {
 					className: "flex flex-wrap items-center gap-3",
 					children: [
-						/* @__PURE__ */ _("button", {
+						/* @__PURE__ */ h("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")]
+							children: [/* @__PURE__ */ m(f, { className: "w-4 h-4" }), S("agentsPage.addAgent", "Add Agent")]
 						}),
-						/* @__PURE__ */ g("button", {
-							onClick: () => b("/getting-started"),
+						/* @__PURE__ */ m("button", {
+							onClick: () => x("/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")
+							children: S("agentsPage.setupGuide", "Setup guide")
 						}),
-						/* @__PURE__ */ g(_e, { prompt: "What is an Agent in VibeControls and how do I add one?" })
+						/* @__PURE__ */ m(ve, { prompt: "What is an Agent in VibeControls and how do I add one?" })
 					]
 				}) : void 0
 			}),
-			Xe && /* @__PURE__ */ g(Se, {
-				onSubmit: Tt,
-				onCancel: () => D(!1),
+			Xe && /* @__PURE__ */ m(Ce, {
+				onSubmit: jt,
+				onCancel: () => O(!1),
 				isLoading: Ze,
 				onNavigate: (e) => {
-					D(!1), b(e);
+					O(!1), x(e);
 				},
-				targets: pt.map((e) => ({
+				targets: bt.map((e) => ({
 					id: e.id,
 					name: e.name,
 					type: e.type || "DIRECT",
 					status: e.status
 				})),
-				targetsLoading: mt,
-				onCreateTarget: yt
+				targetsLoading: xt,
+				onCreateTarget: Et
 			}),
-			/* @__PURE__ */ g(p, { children: A && /* @__PURE__ */ g("div", {
+			/* @__PURE__ */ m(p, { children: N && /* @__PURE__ */ m("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, {
+				onClick: () => !F && P(null),
+				children: /* @__PURE__ */ h(Pe.div, {
 					initial: {
 						opacity: 0,
 						scale: .95
@@ -568,44 +624,44 @@ function Le() {
 					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", {
+						/* @__PURE__ */ m("h3", {
 							className: "text-lg font-semibold text-text-primary mb-1",
 							children: "Disconnect Agent"
 						}),
-						/* @__PURE__ */ g("p", {
+						/* @__PURE__ */ m("p", {
 							className: "text-sm text-text-secondary mb-4",
-							children: Ce(A) === "OFFLINE" ? /* @__PURE__ */ _(h, { children: [
+							children: we(N) === "OFFLINE" ? /* @__PURE__ */ h(Fe, { children: [
 								"Clear the stored tunnel connection for",
 								" ",
-								/* @__PURE__ */ g("strong", { children: A.name }),
+								/* @__PURE__ */ m("strong", { children: N.name }),
 								"? This will remove the tunnel URL and API key from this offline agent."
-							] }) : /* @__PURE__ */ _(h, { children: [
+							] }) : /* @__PURE__ */ h(Fe, { children: [
 								"Mark ",
-								/* @__PURE__ */ g("strong", { children: A.name }),
+								/* @__PURE__ */ m("strong", { children: N.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", {
+						/* @__PURE__ */ h("div", {
 							className: "flex justify-end gap-2",
-							children: [/* @__PURE__ */ g("button", {
-								onClick: () => j(null),
-								disabled: M,
+							children: [/* @__PURE__ */ m("button", {
+								onClick: () => P(null),
+								disabled: F,
 								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,
+							}), /* @__PURE__ */ m("button", {
+								onClick: Pt,
+								disabled: F,
 								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"
+								children: F ? "Disconnecting..." : "Disconnect"
 							})]
 						})
 					]
 				})
 			}) }),
-			/* @__PURE__ */ g(p, { children: O && /* @__PURE__ */ g("div", {
+			/* @__PURE__ */ m(p, { children: k && /* @__PURE__ */ m("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, {
+				onClick: () => A(null),
+				children: /* @__PURE__ */ h(Pe.div, {
 					initial: {
 						opacity: 0,
 						scale: .95
@@ -622,72 +678,72 @@ function Le() {
 					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", {
+						/* @__PURE__ */ m("h3", {
 							className: "text-lg font-semibold text-text-primary mb-1",
-							children: x("agentsPage.editTunnelTitle", "Edit Tunnel")
+							children: S("agentsPage.editTunnelTitle", "Edit Tunnel")
 						}),
-						/* @__PURE__ */ g("p", {
+						/* @__PURE__ */ m("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 })
+							children: S("agentsPage.editTunnelDescription", "Configure the cloudflared tunnel URL and API key for {{name}}.", { name: k.name })
 						}),
-						/* @__PURE__ */ _("div", {
+						/* @__PURE__ */ h("div", {
 							className: "space-y-4",
-							children: [/* @__PURE__ */ _("div", { children: [
-								/* @__PURE__ */ g("label", {
+							children: [/* @__PURE__ */ h("div", { children: [
+								/* @__PURE__ */ m("label", {
 									className: "block text-sm font-medium text-text-primary mb-1",
-									children: x("agentsPage.tunnelUrlLabel", "Tunnel URL")
+									children: S("agentsPage.tunnelUrlLabel", "Tunnel URL")
 								}),
-								/* @__PURE__ */ g("input", {
-									ref: tt,
+								/* @__PURE__ */ m("input", {
+									ref: it,
 									type: "url",
-									defaultValue: O.tunnelUrl || "",
-									placeholder: x("agentsPage.tunnelUrlPlaceholder", "https://example.trycloudflare.com"),
+									defaultValue: k.tunnelUrl || "",
+									placeholder: S("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", {
+								/* @__PURE__ */ m("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.")
+									children: S("agentsPage.tunnelUrlHint", "Leave empty to clear. Agents with auto-tunnel report this automatically on startup.")
 								})
-							] }), /* @__PURE__ */ _("div", { children: [
-								/* @__PURE__ */ g("label", {
+							] }), /* @__PURE__ */ h("div", { children: [
+								/* @__PURE__ */ m("label", {
 									className: "block text-sm font-medium text-text-primary mb-1",
-									children: x("agentsPage.agentApiKeyLabel", "Agent API Key")
+									children: S("agentsPage.agentApiKeyLabel", "Agent API Key")
 								}),
-								/* @__PURE__ */ g("input", {
-									ref: P,
+								/* @__PURE__ */ m("input", {
+									ref: at,
 									type: "text",
-									defaultValue: O.agentApiKey || "",
-									placeholder: x("agentsPage.agentApiKeyPlaceholder", "sk-agent-..."),
+									defaultValue: k.agentApiKey || "",
+									placeholder: S("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", {
+								/* @__PURE__ */ m("p", {
 									className: "text-xs text-text-muted mt-1",
-									children: x("agentsPage.agentApiKeyHint", "Authenticates requests to the agent. Typically changes on each agent restart.")
+									children: S("agentsPage.agentApiKeyHint", "Authenticates requests to the agent. Typically changes on each agent restart.")
 								})
 							] })]
 						}),
-						/* @__PURE__ */ _("div", {
+						/* @__PURE__ */ h("div", {
 							className: "flex justify-end gap-2 mt-5",
-							children: [/* @__PURE__ */ g("button", {
-								onClick: () => k(null),
+							children: [/* @__PURE__ */ m("button", {
+								onClick: () => A(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,
+								children: S("agentsPage.cancel", "Cancel")
+							}), /* @__PURE__ */ m("button", {
+								onClick: Lt,
 								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")
+								children: $e ? S("agentsPage.saving", "Saving...") : S("agentsPage.save", "Save")
 							})]
 						})
 					]
 				})
 			}) }),
-			/* @__PURE__ */ g(fe, {
-				isOpen: rt,
-				onClose: () => H(!1),
+			/* @__PURE__ */ m(fe, {
+				isOpen: ut,
+				onClose: () => V(!1),
 				onConfirm: () => {
-					H(!1), b("/billing");
+					V(!1), x("/billing");
 				},
 				title: "Agent Quota Reached",
 				message: "You've used all available agent slots on your current plan. Upgrade your plan to register more agents."
@@ -696,6 +752,6 @@ function Le() {
 	});
 }
 //#endregion
-export { Le as AgentsPage };
+export { y as AgentsPage };
 
 //# sourceMappingURL=AgentsPage.js.map