@burdenoff/microfe-vibecontrols 2026.519.6 → 2026.520.2

package/dist/pages/AgentsPage.js

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