@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/pages/TargetsPage.js

@@ -0,0 +1,1113 @@
+import { useCreateTargetMutation as e, useDeleteTargetMutation as t, useGetInstallAgentJobStatusLazyQuery as n, useInstallAgentOnTargetMutation as ee, useListTargetsQuery as te, useStartTerminalMutation as ne, useTestTargetMutation as re, useUninstallAgentFromTargetMutation as ie, useUpdateTargetMutation as ae } from "../generated/wspace-operations.js";
+import { useVibeControls as oe, useVibeNavigate as se } from "../providers/VibeControlsProvider.js";
+import ce from "../hooks/useCachedInitialData.js";
+import { PageHeader as le } from "../components/shared/PageHeader.js";
+import { LoadingState as ue } from "../components/shared/LoadingState.js";
+import { ConfirmDialog as de } from "../components/shared/ConfirmDialog.js";
+import { getQuotaDialogContent as fe, isQuotaExhaustedError as pe } from "../utils/quotaUtils.js";
+import { isNative as me, nativeNotify as he } from "../utils/nativeBridge.js";
+import { EmptyState as ge } from "../components/shared/EmptyState.js";
+import { SearchInput as _e } from "../components/shared/SearchInput.js";
+import { FilterDropdown as ve } from "../components/shared/FilterDropdown.js";
+import { AgentSetupBanner as ye } from "../components/shared/AgentSetupBanner.js";
+import { GetHelpButton as be } from "../components/shared/GetHelpButton.js";
+import { SearchableSelect as xe } from "../components/shared/SearchableSelect.js";
+import "../components/shared/index.js";
+import { VIBE_PERMISSIONS as Se } from "../constants/permissions.js";
+import { TargetCard as Ce } from "../components/targets/TargetCard.js";
+import "../components/targets/index.js";
+import { useCallback as r, useEffect as we, useMemo as i, useState as a } from "react";
+import { useI18n as Te } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Check as Ee, CheckCircle as De, CheckSquare as Oe, Grid as ke, List as Ae, Loader2 as je, Pencil as Me, Plus as Ne, RefreshCw as Pe, Server as Fe, Trash2 as Ie, X as o, XCircle as Le, XSquare as Re } from "lucide-react";
+import { useSearchParams as ze } from "react-router-dom";
+import { usePermissions as Be } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AnimatePresence as Ve } from "framer-motion";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { MotionItem as He, MotionList as Ue, MotionPage as We } from "@burdenoff/fe-libs/shared/motion";
+//#region src/pages/TargetsPage.tsx
+function Ge(e) {
+	return e === "connected" ? "connected" : e === "disconnected" ? "disconnected" : "unknown";
+}
+var Ke = {
+	connect: "Connecting to server",
+	detect_os: "Detecting OS",
+	install_bun: "Installing Bun runtime",
+	install_agent: "Installing VibeControls Agent",
+	configure: "Configuring agent",
+	start: "Starting agent",
+	verify: "Verifying health",
+	retrieve: "Retrieving agent details",
+	register: "Registering with backend"
+}, qe = {
+	connected: { label: "Connected" },
+	disconnected: { label: "Disconnected" },
+	unknown: { label: "Unknown" }
+}, Je = {
+	DIRECT: "bg-action-primary-bg/10 text-action-primary-bg",
+	SSH: "bg-status-success-bg-subtle text-status-success-text"
+}, Ye = {
+	connected: "bg-status-success-bg-subtle text-status-success-text",
+	disconnected: "bg-status-error-bg-subtle text-status-error-text",
+	unknown: "bg-bg-sunken text-text-secondary"
+};
+function Xe(e) {
+	return e.agents.length > 0;
+}
+function u() {
+	let { t: u } = Te(), { workspaceId: d } = oe(), f = se(), { hasPermission: Ze, isLoading: Qe } = Be(), [$e] = ze(), p = $e.get("selectedTargetId"), [m, et] = a(""), [h, tt] = a(null), [g, nt] = a("all"), [_, rt] = a("all"), [it, at] = a("grid"), [ot, v] = a(!1), [y, b] = a(null), [st, ct] = a(!1), [x, S] = a(/* @__PURE__ */ new Set()), [C, lt] = a(null), [ut, w] = a(!1), T = r((e, t) => {
+		let n = u(e);
+		return n === e ? t : n;
+	}, [u]), [E, dt] = a(null), [D, ft] = a(null), [pt, O] = a(null), [k, A] = a(null), [j, mt] = a(!1), [ht, M] = a(null), [N, gt] = a(""), [_t, vt] = a(""), [yt, bt] = a(""), [xt, St] = a(22), [Ct, wt] = a(""), [P, Tt] = a("key"), [F, Et] = a(""), [I, Dt] = a(""), [L, Ot] = a(""), [R, kt] = a("DIRECT"), [z, At] = a(""), [B, jt] = a(""), [V, Mt] = a(""), [H, Nt] = a(""), [Pt, Ft] = a(22), [U, It] = a(""), [W, Lt] = a("key"), [Rt, zt] = a(""), [Bt, Vt] = a(""), [Ht, Ut] = a(""), [G, Wt] = a(""), { data: Gt, loading: K, refetch: q } = te({
+		variables: {
+			workspaceId: d || "",
+			limit: 50,
+			offset: 0
+		},
+		skip: !d,
+		fetchPolicy: "cache-first"
+	}), { agents: Kt, refetch: qt } = ce(), [Jt] = e(), [Yt] = ae(), [Xt] = re(), [Zt] = ne(), [J] = t(), [Qt] = ee(), [$t] = ie(), [en] = n({ fetchPolicy: "network-only" }), Y = i(() => (Gt?.targets?.items ?? []).map((e) => ({
+		id: e.id,
+		type: e.type || "DIRECT",
+		name: e.name,
+		label: e.label || null,
+		host: e.host || null,
+		port: e.port || null,
+		username: e.username || null,
+		status: Ge(e.status),
+		connectionId: e.connectionId || null,
+		tags: e.tags,
+		metadata: e.metadata ?? null,
+		createdAt: e.createdAt,
+		agents: (e.agents || []).map((e) => ({
+			id: e.id,
+			name: e.name,
+			version: e.version,
+			isActive: e.isActive
+		}))
+	})), [Gt]), X = i(() => Kt.map((e) => ({
+		id: e.id,
+		name: e.name,
+		isActive: e.isActive,
+		tunnelUrl: e.tunnelUrl ?? null,
+		agentApiKey: null
+	})), [Kt]), Z = i(() => {
+		let e = Y;
+		if (m) {
+			let t = m.toLowerCase();
+			e = e.filter((e) => e.name.toLowerCase().includes(t) || e.host?.toLowerCase().includes(t) || e.label?.toLowerCase().includes(t));
+		}
+		return h && (e = e.filter((e) => e.agents.some((e) => e.id === h))), g !== "all" && (e = e.filter((e) => e.type === g)), _ !== "all" && (e = e.filter((e) => e.status === _)), e;
+	}, [
+		Y,
+		m,
+		h,
+		g,
+		_
+	]);
+	we(() => {
+		if (!p || !Z.find((e) => e.id === p)) return;
+		let e = window.setTimeout(() => {
+			document.getElementById(`target-row-${p}`)?.scrollIntoView({
+				behavior: "smooth",
+				block: "center"
+			});
+		}, 150);
+		return () => window.clearTimeout(e);
+	}, [Z, p]);
+	let tn = Y.filter((e) => e.status === "connected").length, Q = Z.length > 0 && Z.every((e) => x.has(e.id)), nn = x.size > 0;
+	we(() => {
+		if (!pt || !E) return;
+		let e = !1, t = () => {
+			en({ variables: {
+				targetId: E.id,
+				jobId: pt
+			} }).then((t) => {
+				if (e) return;
+				let n = t.data?.installAgentJobStatus;
+				n && (n.steps ||= [], ft({
+					id: n.jobId,
+					status: n.status,
+					currentStep: n.currentStep ?? 0,
+					steps: n.steps ?? [],
+					result: n.result ?? void 0,
+					error: n.error ?? void 0
+				}), (n.status === "completed" || n.status === "failed") && n.status === "completed" && q());
+			}).catch(() => {});
+		};
+		t();
+		let n = setInterval(t, 2e3);
+		return () => {
+			e = !0, clearInterval(n);
+		};
+	}, [
+		pt,
+		E,
+		en,
+		q
+	]);
+	let rn = r(async () => {
+		if (!(!z || !d) && !(R !== "DIRECT" && (!V || !H || !U))) try {
+			await Jt({ variables: {
+				workspaceId: d,
+				input: {
+					type: R,
+					name: z,
+					sourceAgentId: R === "DIRECT" ? void 0 : V,
+					host: R === "DIRECT" ? void 0 : H,
+					port: R === "DIRECT" ? void 0 : Pt,
+					username: R === "DIRECT" ? void 0 : U,
+					password: R === "SSH" && W === "password" ? Rt : void 0,
+					privateKeyPath: R === "SSH" && W === "key" ? Bt : void 0,
+					label: Ht || void 0,
+					tags: G ? G.split(",").map((e) => e.trim()) : void 0,
+					metadata: B ? { description: B } : void 0
+				}
+			} }), v(!1), At(""), Nt(""), It(""), zt(""), Vt(""), Ut(""), Wt(""), q();
+		} catch (e) {
+			if (pe(e)) {
+				v(!1), w(!0);
+				return;
+			}
+			throw e;
+		}
+	}, [
+		z,
+		V,
+		H,
+		Pt,
+		U,
+		W,
+		Rt,
+		Bt,
+		Ht,
+		G,
+		B,
+		R,
+		d,
+		Jt,
+		q
+	]), an = r(async (e) => {
+		let t = (await Xt({ variables: { id: e } })).data?.testTarget;
+		t && (lt({
+			id: e,
+			success: t.success,
+			message: t.message || ""
+		}), setTimeout(() => lt(null), 5e3), q());
+	}, [Xt, q]), on = r(async (e) => {
+		try {
+			let t = await Zt({ variables: { targetId: e } });
+			if (t.error && pe(t.error)) {
+				w(!0);
+				return;
+			}
+			let n = t.data?.startTerminal;
+			n?.sessionId && f(`/sessions/${n.sessionId}`);
+		} catch (e) {
+			if (pe(e)) {
+				w(!0);
+				return;
+			}
+			throw e;
+		}
+	}, [Zt, f]), sn = r(async () => {
+		if (y) {
+			try {
+				await J({ variables: { id: y } }), me() && he("success");
+			} catch (e) {
+				throw me() && he("error"), e;
+			}
+			b(null), S((e) => {
+				let t = new Set(e);
+				return t.delete(y), t;
+			}), q();
+		}
+	}, [
+		y,
+		J,
+		q
+	]), cn = r(async () => {
+		let e = Array.from(x);
+		await Promise.all(e.map((e) => J({ variables: { id: e } }))), S(/* @__PURE__ */ new Set()), ct(!1), q();
+	}, [
+		x,
+		J,
+		q
+	]), ln = r(async (e) => {
+		dt(e), ft(null), O(null);
+		let t = X.find((e) => e.isActive);
+		if (!t) return;
+		let n = (await Qt({ variables: {
+			targetId: e.id,
+			sourceAgentId: t.id
+		} })).data?.installAgentOnTarget;
+		n?.jobId && O(n.jobId);
+	}, [Qt, X]), un = r(async (e) => {
+		await $t({ variables: { targetId: e.id } }), q();
+	}, [$t, q]), dn = r((e) => {
+		A(e), gt(e.name), vt(e.label ?? ""), bt(e.host ?? ""), St(e.port ?? 22), wt(e.username ?? ""), Tt("key"), Et(""), Dt(""), Ot(e.tags.join(", ")), M(null);
+	}, []), fn = r(async () => {
+		if (k) {
+			if (!N.trim()) {
+				M("Name is required");
+				return;
+			}
+			mt(!0), M(null);
+			try {
+				await Yt({ variables: {
+					id: k.id,
+					input: {
+						name: N.trim(),
+						label: _t.trim() || null,
+						host: yt.trim() || void 0,
+						port: xt || void 0,
+						username: Ct.trim() || void 0,
+						password: k.type === "SSH" && P === "password" && F ? F : void 0,
+						privateKeyPath: k.type === "SSH" && P === "key" && I ? I : void 0,
+						tags: L ? L.split(",").map((e) => e.trim()).filter(Boolean) : []
+					}
+				} }), A(null), q();
+			} catch (e) {
+				M(e instanceof Error ? e.message : "Failed to update target");
+			} finally {
+				mt(!1);
+			}
+		}
+	}, [
+		k,
+		N,
+		_t,
+		yt,
+		xt,
+		Ct,
+		P,
+		F,
+		I,
+		L,
+		Yt,
+		q
+	]), pn = r(() => {
+		dt(null), ft(null), O(null);
+	}, []), mn = r(() => {
+		S(Q ? (e) => {
+			let t = new Set(e);
+			return Z.forEach((e) => t.delete(e.id)), t;
+		} : (e) => {
+			let t = new Set(e);
+			return Z.forEach((e) => t.add(e.id)), t;
+		});
+	}, [Q, Z]), hn = r((e) => {
+		S((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	}, []), gn = {
+		total: Y.length,
+		connected: tn
+	}, _n = i(() => [
+		{
+			value: "all",
+			label: T("targets.filterTypeAll", "All Types")
+		},
+		{
+			value: "DIRECT",
+			label: T("targets.typeDirect", "Direct")
+		},
+		{
+			value: "SSH",
+			label: "SSH"
+		}
+	], [T]), vn = i(() => [
+		{
+			value: "all",
+			label: T("targets.filterStatusAll", "All Statuses")
+		},
+		{
+			value: "connected",
+			label: T("targets.connected", "Connected")
+		},
+		{
+			value: "disconnected",
+			label: T("targets.disconnected", "Disconnected")
+		},
+		{
+			value: "unknown",
+			label: T("targets.unknown", "Unknown")
+		}
+	], [T]), $ = m || h || g !== "all" || _ !== "all";
+	return Qe ? /* @__PURE__ */ c("div", {
+		className: "flex items-center justify-center min-h-[400px]",
+		children: /* @__PURE__ */ c("p", {
+			className: "text-text-secondary",
+			children: "Loading permissions..."
+		})
+	}) : Ze(Se.TARGET_LIST) ? K && Y.length === 0 ? /* @__PURE__ */ l(We, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: [/* @__PURE__ */ c(le, {
+			title: T("nav.targets", "Targets"),
+			description: T("targets.description", "Manage your servers, workstations, and environments.")
+		}), /* @__PURE__ */ c(ue, { message: T("targets.loading", "Loading targets...") })]
+	}) : /* @__PURE__ */ l(We, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: [
+			C && /* @__PURE__ */ l("div", {
+				className: `fixed top-4 right-4 z-[10000] rounded-md px-4 py-3 shadow-lg text-sm ${C.success ? "bg-status-success-bg text-status-success-text" : "bg-status-error-bg text-status-error-text"}`,
+				children: [
+					C.success ? T("targets.connectionSuccessful", "Connection successful") : T("targets.connectionFailed", "Connection failed"),
+					": ",
+					C.message
+				]
+			}),
+			/* @__PURE__ */ c(le, {
+				title: T("nav.targets", "Targets"),
+				description: `${gn.connected} of ${gn.total} targets online`,
+				actions: /* @__PURE__ */ l("div", {
+					className: "flex flex-col sm:flex-row items-stretch sm:items-center gap-2",
+					children: [/* @__PURE__ */ c("button", {
+						onClick: () => void q(),
+						disabled: K,
+						className: "flex items-center justify-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50",
+						title: T("targets.refreshTitle", "Refresh targets"),
+						children: /* @__PURE__ */ c(Pe, { className: `w-4 h-4 ${K ? "animate-spin" : ""}` })
+					}), /* @__PURE__ */ l("button", {
+						onClick: () => v(!0),
+						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__ */ c(Ne, { className: "w-4 h-4" }), T("targets.addTarget", "Add Target")]
+					})]
+				})
+			}),
+			X.length === 0 && !K && /* @__PURE__ */ c(ye, {
+				variant: "full",
+				dismissKey: "vibecontrols-targets-setup-banner"
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "space-y-3",
+				children: [/* @__PURE__ */ l("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ c(_e, {
+						value: m,
+						onChange: et,
+						placeholder: T("targets.searchPlaceholder", "Search targets..."),
+						className: "flex-1 sm:w-64 sm:flex-none"
+					}), /* @__PURE__ */ l("div", {
+						className: "flex items-center gap-1 bg-bg-sunken rounded-md p-1 flex-shrink-0",
+						children: [/* @__PURE__ */ c("button", {
+							onClick: () => at("grid"),
+							className: `p-1.5 sm:p-2 rounded ${it === "grid" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+							title: T("targets.gridViewTitle", "Grid view"),
+							children: /* @__PURE__ */ c(ke, { className: "w-4 h-4 text-text-secondary" })
+						}), /* @__PURE__ */ c("button", {
+							onClick: () => at("list"),
+							className: `p-1.5 sm:p-2 rounded ${it === "list" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+							title: T("targets.listViewTitle", "List view"),
+							children: /* @__PURE__ */ c(Ae, { className: "w-4 h-4 text-text-secondary" })
+						})]
+					})]
+				}), /* @__PURE__ */ l("div", {
+					className: "flex items-center gap-2 sm:gap-3 flex-wrap",
+					children: [
+						/* @__PURE__ */ c(ve, {
+							label: T("sessions.filterType", "Type"),
+							value: g,
+							options: _n,
+							onChange: nt
+						}),
+						/* @__PURE__ */ c(ve, {
+							label: T("sessions.filterStatus", "Status"),
+							value: _,
+							options: vn,
+							onChange: rt
+						}),
+						/* @__PURE__ */ c(xe, {
+							value: h ?? "",
+							onChange: (e) => tt(e || null),
+							options: X.map((e) => ({
+								value: e.id,
+								label: e.name
+							})),
+							placeholder: T("targets.allAgents", "All agents"),
+							className: "w-full sm:min-w-[180px] sm:w-auto",
+							dropdownAlign: "left",
+							clearable: !0
+						})
+					]
+				})]
+			}),
+			Z.length > 0 && /* @__PURE__ */ c("div", {
+				className: "flex items-center gap-2 flex-wrap",
+				children: /* @__PURE__ */ c("div", {
+					className: "ml-auto flex items-center gap-2",
+					children: /* @__PURE__ */ l("button", {
+						onClick: mn,
+						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__ */ c(Oe, { className: "w-3.5 h-3.5" }), Q ? T("targets.deselectAll", "Deselect All") : T("targets.selectAll", "Select All")]
+					})
+				})
+			}),
+			nn && /* @__PURE__ */ l("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__ */ l("span", {
+					className: "text-sm font-medium text-text-primary",
+					children: [
+						x.size,
+						" ",
+						T("nav.targets", "target"),
+						x.size === 1 ? "" : "s",
+						" ",
+						T("sessions.selected", "selected")
+					]
+				}), /* @__PURE__ */ l("div", {
+					className: "flex items-center gap-1.5 sm:ml-auto",
+					children: [/* @__PURE__ */ l("button", {
+						onClick: () => ct(!0),
+						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",
+						children: [
+							/* @__PURE__ */ c(Ie, { className: "w-3 h-3" }),
+							" ",
+							T("common.delete", "Delete")
+						]
+					}), /* @__PURE__ */ l("button", {
+						onClick: () => S(/* @__PURE__ */ new Set()),
+						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__ */ c(Re, { className: "w-3 h-3" }),
+							" ",
+							T("sessions.deselect", "Deselect")
+						]
+					})]
+				})]
+			}),
+			$ ? /* @__PURE__ */ l("p", {
+				className: "text-sm text-text-secondary",
+				children: [T("targets.showingResults", "Showing {{filtered}} of {{total}} targets").replace("{{filtered}}", String(Z.length)).replace("{{total}}", String(Y.length)), K && /* @__PURE__ */ l("span", {
+					className: "ml-2 text-text-muted",
+					children: [
+						"(",
+						T("sessions.refreshing", "refreshing..."),
+						")"
+					]
+				})]
+			}) : null,
+			Z.length > 0 ? /* @__PURE__ */ c(Ve, {
+				mode: "wait",
+				children: it === "grid" ? /* @__PURE__ */ c(Ue, {
+					stagger: .04,
+					className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
+					children: Z.map((e) => /* @__PURE__ */ c(He, { children: /* @__PURE__ */ c(Ce, {
+						target: e,
+						onTest: (e) => void an(e),
+						onTerminal: (e) => void on(e),
+						onOpenDetail: (e) => f(`/targets/${e}`),
+						onEdit: (e) => dn(e),
+						onInstallAgent: (e) => void ln(e),
+						onUninstallAgent: (e) => void un(e),
+						onDelete: (e) => b(e),
+						selected: x.has(e.id),
+						onToggleSelect: () => hn(e.id),
+						highlighted: p === e.id
+					}) }, e.id))
+				}, "grid-view") : /* @__PURE__ */ c(Ue, {
+					stagger: .04,
+					className: "space-y-2",
+					children: Z.map((e) => {
+						let t = Xe(e), n = p === e.id;
+						return /* @__PURE__ */ c(He, {
+							variant: "fadeRight",
+							children: /* @__PURE__ */ l("div", {
+								id: `target-row-${e.id}`,
+								className: `p-4 rounded-lg border transition-colors ${n ? "border-action-primary-bg bg-action-primary-bg/5 shadow-sm" : "border-border-default hover:bg-bg-sunken/30"}`,
+								children: [/* @__PURE__ */ l("div", {
+									className: "flex items-start gap-3",
+									children: [/* @__PURE__ */ c("input", {
+										type: "checkbox",
+										checked: x.has(e.id),
+										onChange: () => hn(e.id),
+										className: "rounded border-border-default mt-1"
+									}), /* @__PURE__ */ l("div", {
+										className: "flex min-w-0 flex-1 flex-wrap items-start gap-2",
+										children: [
+											/* @__PURE__ */ c("span", {
+												className: `inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded ${Je[e.type]}`,
+												children: e.type
+											}),
+											/* @__PURE__ */ c("span", {
+												className: `inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded ${Ye[e.status]}`,
+												children: T(`targets.status.${e.status}`, qe[e.status].label)
+											}),
+											/* @__PURE__ */ l("div", {
+												className: "min-w-0 basis-full",
+												children: [
+													/* @__PURE__ */ l("div", {
+														className: "flex items-center gap-2 flex-wrap",
+														children: [
+															/* @__PURE__ */ c("span", {
+																className: "font-medium",
+																children: e.name
+															}),
+															e.label && /* @__PURE__ */ c("span", {
+																className: "text-text-secondary text-sm",
+																children: e.label
+															}),
+															t && /* @__PURE__ */ l("span", {
+																className: "inline-flex items-center gap-1 rounded-full border border-status-success-border px-2 py-0.5 text-xs bg-status-success-bg-subtle text-status-success-text",
+																children: [/* @__PURE__ */ c(De, { size: 10 }), T("targets.agentInstalled", "Agent Installed")]
+															})
+														]
+													}),
+													/* @__PURE__ */ l("div", {
+														className: "mt-1 flex flex-wrap items-center gap-2 text-sm text-text-secondary sm:gap-3",
+														children: [e.host && /* @__PURE__ */ l("code", {
+															className: "text-xs",
+															children: [
+																e.username ? `${e.username}@` : "",
+																e.host,
+																e.port ? `:${e.port}` : ""
+															]
+														}), e.agents.length > 0 && /* @__PURE__ */ l("span", {
+															className: "text-text-tertiary",
+															children: [
+																T("targets.via", "via"),
+																" ",
+																e.agents[0].name
+															]
+														})]
+													}),
+													e.tags.length > 0 && /* @__PURE__ */ c("div", {
+														className: "mt-1.5 flex flex-wrap gap-1",
+														children: e.tags.map((e) => /* @__PURE__ */ c("span", {
+															className: "px-1.5 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded",
+															children: e
+														}, e))
+													})
+												]
+											})
+										]
+									})]
+								}), /* @__PURE__ */ l("div", {
+									className: "mt-3 flex flex-wrap items-center gap-2 pl-0 sm:pl-7",
+									children: [
+										/* @__PURE__ */ c("button", {
+											onClick: () => void an(e.id),
+											title: T("targets.testConnectivity", "Test connectivity"),
+											className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border border-border-default bg-bg-surface hover:bg-bg-sunken transition-colors",
+											children: T("targets.test", "Test")
+										}),
+										/* @__PURE__ */ c("button", {
+											onClick: () => void on(e.id),
+											title: T("targets.openTerminal", "Open terminal"),
+											className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border border-border-default bg-bg-surface hover:bg-bg-sunken transition-colors",
+											children: T("targets.terminal", "Terminal")
+										}),
+										/* @__PURE__ */ l("button", {
+											onClick: () => dn(e),
+											title: "Edit target configuration",
+											className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border border-border-default bg-bg-surface hover:bg-bg-sunken transition-colors",
+											children: [/* @__PURE__ */ c(Me, { size: 14 }), "Edit"]
+										}),
+										e.type !== "DIRECT" && !t && /* @__PURE__ */ c("button", {
+											onClick: () => void ln(e),
+											title: T("targets.installAgent", "Install agent"),
+											className: "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors",
+											children: T("targets.installAgent", "Install Agent")
+										}),
+										e.type !== "DIRECT" && t && /* @__PURE__ */ c("button", {
+											onClick: () => void un(e),
+											title: T("targets.uninstallAgent", "Uninstall agent"),
+											className: "flex items-center gap-1.5 rounded-md border border-status-error-text/20 px-3 py-1.5 text-xs font-medium text-status-error-text hover:bg-status-error-bg/80 transition-colors",
+											children: T("targets.uninstall", "Uninstall")
+										}),
+										/* @__PURE__ */ c("div", { className: "hidden flex-1 sm:block" }),
+										/* @__PURE__ */ l("button", {
+											onClick: () => b(e.id),
+											title: T("targets.deleteTarget", "Delete target"),
+											className: "flex items-center gap-1.5 rounded-md border border-status-error-border px-3 py-1.5 text-xs font-medium text-status-error-text hover:bg-status-error-bg/80 transition-colors",
+											children: [/* @__PURE__ */ c(o, { size: 14 }), T("common.delete", "Delete")]
+										})
+									]
+								})]
+							})
+						}, e.id);
+					})
+				}, "list-view")
+			}) : /* @__PURE__ */ c(ge, {
+				icon: /* @__PURE__ */ c(Fe, { className: "w-8 h-8 text-text-secondary" }),
+				title: $ ? T("targets.emptyNoTargetsFound", "No targets found") : T("targets.emptyNoTargetsConfigured", "No targets configured"),
+				description: $ ? T("targets.emptyAdjustSearch", "Try adjusting your search or filters") : T("targets.emptyDescription", "Add a target to start managing servers, workstations, and environments."),
+				action: $ ? void 0 : /* @__PURE__ */ l("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ l("button", {
+						onClick: () => v(!0),
+						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__ */ c(Ne, { className: "w-4 h-4" }), T("targets.addTarget", "Add Target")]
+					}), /* @__PURE__ */ c(be, { prompt: "What is a Target in VibeControls and how do I create one?" })]
+				})
+			}),
+			ot && /* @__PURE__ */ l("div", {
+				className: "fixed inset-0 z-50 flex items-start justify-center pt-16 overflow-y-auto",
+				children: [/* @__PURE__ */ c("div", {
+					className: "fixed inset-0 bg-bg-overlay backdrop-blur-sm",
+					onClick: () => v(!1)
+				}), /* @__PURE__ */ l("div", {
+					className: "relative bg-bg-elevated rounded-xl shadow-2xl border border-border-default max-w-lg w-full mx-4 p-6 space-y-4 mb-8",
+					onClick: (e) => e.stopPropagation(),
+					children: [
+						/* @__PURE__ */ l("div", {
+							className: "flex items-start justify-between gap-3",
+							children: [/* @__PURE__ */ c("h2", {
+								className: "text-lg font-semibold",
+								children: T("targets.addTarget", "Add Target")
+							}), /* @__PURE__ */ c("button", {
+								onClick: () => v(!1),
+								className: "p-1 rounded-lg hover:bg-bg-sunken transition-colors",
+								children: /* @__PURE__ */ c(o, { size: 18 })
+							})]
+						}),
+						/* @__PURE__ */ l("div", {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ l("div", { children: [
+									/* @__PURE__ */ c("label", {
+										className: "text-sm font-medium block mb-1.5",
+										children: T("targets.targetType", "Target Type")
+									}),
+									/* @__PURE__ */ c("div", {
+										className: "grid grid-cols-2 gap-2",
+										children: ["DIRECT", "SSH"].map((e) => /* @__PURE__ */ c("button", {
+											onClick: () => kt(e),
+											className: `px-3 py-2 text-sm font-medium rounded-lg border transition-colors ${R === e ? "border-action-primary-bg bg-action-primary-bg/10 text-action-primary-bg" : "border-border-default hover:bg-bg-sunken text-text-secondary"}`,
+											children: e
+										}, e))
+									}),
+									/* @__PURE__ */ c("p", {
+										className: "text-xs text-text-tertiary mt-1",
+										children: R === "DIRECT" ? T("targets.targetTypeDirectHint", "A local machine where you will install the agent manually.") : T("targets.targetTypeSshHint", "A remote server accessible via SSH.")
+									})
+								] }),
+								/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+									className: "text-sm font-medium",
+									children: T("webhooks.name", "Name")
+								}), /* @__PURE__ */ c("input", {
+									value: z,
+									onChange: (e) => At(e.target.value),
+									className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm",
+									placeholder: R === "DIRECT" ? T("targets.namePlaceholderDirect", "My Laptop") : T("targets.namePlaceholderServer", "Production Server")
+								})] }),
+								/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+									className: "text-sm font-medium",
+									children: T("targets.descriptionOptional", "Description (optional)")
+								}), /* @__PURE__ */ c("input", {
+									value: B,
+									onChange: (e) => jt(e.target.value),
+									className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm",
+									placeholder: T("targets.descriptionPlaceholder", "Brief description of this target")
+								})] }),
+								R !== "DIRECT" && /* @__PURE__ */ l(s, { children: [
+									/* @__PURE__ */ l("div", { children: [
+										/* @__PURE__ */ c("label", {
+											className: "text-sm font-medium",
+											children: T("targets.sourceAgent", "Source Agent")
+										}),
+										/* @__PURE__ */ l("select", {
+											value: V,
+											onChange: (e) => Mt(e.target.value),
+											className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm",
+											children: [/* @__PURE__ */ c("option", {
+												value: "",
+												children: T("targets.selectAgentConnectFrom", "Select an agent to connect from")
+											}), X.map((e) => /* @__PURE__ */ c("option", {
+												value: e.id,
+												children: e.name
+											}, e.id))]
+										}),
+										/* @__PURE__ */ l("p", {
+											className: "text-xs text-text-tertiary mt-0.5",
+											children: [
+												T("targets.agentConnectionHintPrefix", "The agent that will establish the"),
+												" ",
+												R,
+												" ",
+												T("targets.agentConnectionHintSuffix", "connection to this target.")
+											]
+										})
+									] }),
+									/* @__PURE__ */ l("div", {
+										className: "grid grid-cols-1 sm:grid-cols-2 gap-3",
+										children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+											className: "text-sm font-medium",
+											children: T("targets.host", "Host")
+										}), /* @__PURE__ */ c("input", {
+											value: H,
+											onChange: (e) => Nt(e.target.value),
+											className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm",
+											placeholder: T("targets.hostPlaceholder", "192.168.1.100")
+										})] }), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+											className: "text-sm font-medium",
+											children: T("tunnels.port", "Port")
+										}), /* @__PURE__ */ c("input", {
+											type: "number",
+											value: Pt,
+											onChange: (e) => Ft(Number(e.target.value)),
+											className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm"
+										})] })]
+									}),
+									/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+										className: "text-sm font-medium",
+										children: T("targets.username", "Username")
+									}), /* @__PURE__ */ c("input", {
+										value: U,
+										onChange: (e) => It(e.target.value),
+										className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm",
+										placeholder: T("targets.usernamePlaceholder", "root")
+									})] }),
+									R === "SSH" && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+										className: "text-sm font-medium",
+										children: T("targets.authentication", "Authentication")
+									}), /* @__PURE__ */ l("div", {
+										className: "flex gap-4 mt-1",
+										children: [/* @__PURE__ */ l("label", {
+											className: "flex items-center gap-2 cursor-pointer text-sm",
+											children: [/* @__PURE__ */ c("input", {
+												type: "radio",
+												checked: W === "password",
+												onChange: () => Lt("password")
+											}), T("targets.password", "Password")]
+										}), /* @__PURE__ */ l("label", {
+											className: "flex items-center gap-2 cursor-pointer text-sm",
+											children: [/* @__PURE__ */ c("input", {
+												type: "radio",
+												checked: W === "key",
+												onChange: () => Lt("key")
+											}), T("targets.privateKey", "Private Key")]
+										})]
+									})] }), W === "password" ? /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+										className: "text-sm font-medium",
+										children: T("targets.password", "Password")
+									}), /* @__PURE__ */ c("input", {
+										type: "password",
+										value: Rt,
+										onChange: (e) => zt(e.target.value),
+										className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm"
+									})] }) : /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+										className: "text-sm font-medium",
+										children: T("targets.privateKeyPath", "Private Key Path")
+									}), /* @__PURE__ */ c("input", {
+										value: Bt,
+										onChange: (e) => Vt(e.target.value),
+										className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm",
+										placeholder: T("targets.privateKeyPathPlaceholder", "~/.ssh/id_rsa")
+									})] })] })
+								] }),
+								/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+									className: "text-sm font-medium",
+									children: T("targets.labelOptional", "Label (optional)")
+								}), /* @__PURE__ */ c("input", {
+									value: Ht,
+									onChange: (e) => Ut(e.target.value),
+									className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm",
+									placeholder: T("targets.labelPlaceholder", "web-server-01")
+								})] }),
+								/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+									className: "text-sm font-medium",
+									children: T("targets.tagsCommaSeparated", "Tags (comma-separated)")
+								}), /* @__PURE__ */ c("input", {
+									value: G,
+									onChange: (e) => Wt(e.target.value),
+									className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm",
+									placeholder: T("targets.tagsPlaceholder", "production, web")
+								})] })
+							]
+						}),
+						/* @__PURE__ */ l("div", {
+							className: "flex justify-end gap-2 pt-2 border-t border-border-default",
+							children: [/* @__PURE__ */ c("button", {
+								onClick: () => v(!1),
+								className: "px-4 py-2 text-sm rounded-md border border-border-default hover:bg-bg-sunken transition-colors",
+								children: T("common.cancel", "Cancel")
+							}), /* @__PURE__ */ c("button", {
+								onClick: () => void rn(),
+								className: "px-4 py-2 text-sm rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors",
+								children: T("targets.addTarget", "Add Target")
+							})]
+						})
+					]
+				})]
+			}),
+			k && /* @__PURE__ */ l("div", {
+				className: "fixed inset-0 z-50 flex items-start justify-center pt-16 overflow-y-auto",
+				children: [/* @__PURE__ */ c("div", {
+					className: "fixed inset-0 bg-bg-overlay backdrop-blur-sm",
+					onClick: () => !j && A(null)
+				}), /* @__PURE__ */ l("div", {
+					className: "relative bg-bg-elevated rounded-xl shadow-2xl border border-border-default max-w-lg w-full mx-4 p-6 space-y-4 mb-8",
+					onClick: (e) => e.stopPropagation(),
+					children: [
+						/* @__PURE__ */ l("div", {
+							className: "flex items-start justify-between gap-3",
+							children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("h2", {
+								className: "text-lg font-semibold",
+								children: "Edit Target"
+							}), /* @__PURE__ */ c("p", {
+								className: "text-sm text-text-secondary mt-0.5",
+								children: k.name
+							})] }), /* @__PURE__ */ c("button", {
+								onClick: () => A(null),
+								disabled: j,
+								className: "p-1 rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-50",
+								children: /* @__PURE__ */ c(o, { size: 18 })
+							})]
+						}),
+						ht && /* @__PURE__ */ c("div", {
+							className: "rounded-lg border border-status-error-border bg-status-error-bg-subtle p-3 text-sm text-status-error-text",
+							children: ht
+						}),
+						/* @__PURE__ */ l("div", {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+									className: "text-sm font-medium",
+									children: "Name"
+								}), /* @__PURE__ */ c("input", {
+									value: N,
+									onChange: (e) => gt(e.target.value),
+									className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm",
+									placeholder: "Production Server"
+								})] }),
+								/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+									className: "text-sm font-medium",
+									children: "Label (optional)"
+								}), /* @__PURE__ */ c("input", {
+									value: _t,
+									onChange: (e) => vt(e.target.value),
+									className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm",
+									placeholder: "web-server-01"
+								})] }),
+								k.type !== "DIRECT" && /* @__PURE__ */ l(s, { children: [
+									/* @__PURE__ */ l("div", {
+										className: "grid grid-cols-2 gap-3",
+										children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+											className: "text-sm font-medium",
+											children: "Host"
+										}), /* @__PURE__ */ c("input", {
+											value: yt,
+											onChange: (e) => bt(e.target.value),
+											className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm",
+											placeholder: "192.168.1.100"
+										})] }), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+											className: "text-sm font-medium",
+											children: "Port"
+										}), /* @__PURE__ */ c("input", {
+											type: "number",
+											value: xt,
+											onChange: (e) => St(Number(e.target.value)),
+											className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm"
+										})] })]
+									}),
+									/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+										className: "text-sm font-medium",
+										children: "Username"
+									}), /* @__PURE__ */ c("input", {
+										value: Ct,
+										onChange: (e) => wt(e.target.value),
+										className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm",
+										placeholder: "root"
+									})] }),
+									k.type === "SSH" && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ l("div", { children: [
+										/* @__PURE__ */ c("label", {
+											className: "text-sm font-medium",
+											children: "Update credentials (optional)"
+										}),
+										/* @__PURE__ */ l("div", {
+											className: "flex gap-4 mt-1",
+											children: [/* @__PURE__ */ l("label", {
+												className: "flex items-center gap-2 cursor-pointer text-sm",
+												children: [/* @__PURE__ */ c("input", {
+													type: "radio",
+													checked: P === "password",
+													onChange: () => Tt("password")
+												}), "Password"]
+											}), /* @__PURE__ */ l("label", {
+												className: "flex items-center gap-2 cursor-pointer text-sm",
+												children: [/* @__PURE__ */ c("input", {
+													type: "radio",
+													checked: P === "key",
+													onChange: () => Tt("key")
+												}), "Private Key"]
+											})]
+										}),
+										/* @__PURE__ */ c("p", {
+											className: "text-xs text-text-tertiary mt-0.5",
+											children: "Leave blank to keep existing credentials."
+										})
+									] }), P === "password" ? /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+										className: "text-sm font-medium",
+										children: "New Password"
+									}), /* @__PURE__ */ c("input", {
+										type: "password",
+										value: F,
+										onChange: (e) => Et(e.target.value),
+										className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm",
+										placeholder: "Leave blank to keep current"
+									})] }) : /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+										className: "text-sm font-medium",
+										children: "New Private Key Path"
+									}), /* @__PURE__ */ c("input", {
+										value: I,
+										onChange: (e) => Dt(e.target.value),
+										className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm",
+										placeholder: "Leave blank to keep current (~/.ssh/id_rsa)"
+									})] })] })
+								] }),
+								/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+									className: "text-sm font-medium",
+									children: "Tags (comma-separated)"
+								}), /* @__PURE__ */ c("input", {
+									value: L,
+									onChange: (e) => Ot(e.target.value),
+									className: "w-full mt-1 px-3 py-2 rounded-lg border border-border-default bg-bg-elevated text-sm",
+									placeholder: "production, web"
+								})] })
+							]
+						}),
+						/* @__PURE__ */ l("div", {
+							className: "flex justify-end gap-2 pt-2 border-t border-border-default",
+							children: [/* @__PURE__ */ c("button", {
+								onClick: () => A(null),
+								disabled: j,
+								className: "px-4 py-2 text-sm rounded-lg border border-border-default hover:bg-bg-sunken transition-colors disabled:opacity-50",
+								children: "Cancel"
+							}), /* @__PURE__ */ c("button", {
+								onClick: () => void fn(),
+								disabled: j,
+								className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm text-action-primary-text transition-colors hover:bg-action-primary-bg-hover disabled:opacity-50",
+								children: j ? "Saving..." : "Save Changes"
+							})]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ c(de, {
+				isOpen: !!y,
+				onClose: () => b(null),
+				onConfirm: () => void sn(),
+				title: T("targets.deleteTarget", "Delete Target"),
+				message: T("targets.deleteTargetMessage", "This will remove the target and its connection from the agent. Active terminals will be disconnected."),
+				confirmLabel: T("common.delete", "Delete"),
+				variant: "danger"
+			}),
+			/* @__PURE__ */ c(de, {
+				isOpen: st,
+				onClose: () => ct(!1),
+				onConfirm: () => void cn(),
+				title: T("targets.deleteSelectedTargets", "Delete Selected Targets"),
+				message: `${T("targets.confirmDeleteSelectedPrefix", "Are you sure you want to delete")} ${x.size} ${T("nav.targets", "target")}${x.size === 1 ? "" : "s"}? ${T("targets.confirmDeleteSelectedSuffix", "This action cannot be undone.")}`,
+				confirmLabel: T("targets.deleteAll", "Delete All"),
+				variant: "danger"
+			}),
+			E && /* @__PURE__ */ c("div", {
+				className: "fixed inset-0 bg-bg-overlay flex items-center justify-center z-50",
+				children: /* @__PURE__ */ l("div", {
+					className: "bg-bg-elevated rounded-xl shadow-xl max-w-md w-full mx-4 p-6",
+					children: [
+						/* @__PURE__ */ l("div", {
+							className: "flex items-start justify-between gap-3",
+							children: [/* @__PURE__ */ l("h2", {
+								className: "text-lg font-semibold break-words",
+								children: [
+									T("targets.installingAgentOn", "Installing Agent on"),
+									" ",
+									E.name
+								]
+							}), D?.status !== "running" && /* @__PURE__ */ c("button", {
+								onClick: pn,
+								className: "p-1 rounded hover:bg-bg-sunken",
+								children: /* @__PURE__ */ c(o, { size: 16 })
+							})]
+						}),
+						/* @__PURE__ */ c("div", {
+							className: "space-y-2 mt-4",
+							children: D && D.steps ? D.steps.map((e, t) => /* @__PURE__ */ l("div", {
+								className: "flex items-center gap-3",
+								children: [
+									e.status === "running" && /* @__PURE__ */ c(je, {
+										className: "animate-spin text-action-primary-bg",
+										size: 16
+									}),
+									e.status === "completed" && /* @__PURE__ */ c(De, {
+										className: "text-status-success-text",
+										size: 16
+									}),
+									e.status === "failed" && /* @__PURE__ */ c(Le, {
+										className: "text-status-error-text",
+										size: 16
+									}),
+									e.status === "skipped" && /* @__PURE__ */ c(Ee, {
+										className: "text-text-tertiary",
+										size: 16
+									}),
+									e.status === "pending" && /* @__PURE__ */ c("div", { className: "w-4 h-4 rounded-full border-2 border-border-default" }),
+									/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("div", {
+										className: "text-sm font-medium",
+										children: T(`targets.installStep.${e.name}`, Ke[e.name] ?? e.name)
+									}), e.message && /* @__PURE__ */ c("div", {
+										className: "text-xs text-text-tertiary",
+										children: e.message
+									})] })
+								]
+							}, t)) : /* @__PURE__ */ l("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ c(je, {
+									className: "animate-spin text-action-primary-bg",
+									size: 16
+								}), /* @__PURE__ */ c("span", {
+									className: "text-sm",
+									children: T("targets.startingInstallJob", "Starting install job...")
+								})]
+							})
+						}),
+						D?.status === "completed" && /* @__PURE__ */ c("div", {
+							className: "mt-4 rounded-lg border border-status-success-border bg-status-success-bg-subtle p-3 text-sm text-status-success-text",
+							children: T("targets.agentInstalledSuccess", "Agent installed successfully!")
+						}),
+						D?.status === "failed" && /* @__PURE__ */ c("div", {
+							className: "mt-4 rounded-lg border border-status-error-border bg-status-error-bg-subtle p-3 text-sm text-status-error-text",
+							children: D.error ?? T("targets.installationFailed", "Installation failed.")
+						}),
+						/* @__PURE__ */ c("button", {
+							onClick: pn,
+							disabled: D?.status === "running",
+							className: "mt-4 w-full px-4 py-2 rounded-md border border-border-default hover:bg-bg-sunken transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium",
+							children: !D || D.status === "running" ? T("targets.installing", "Installing...") : T("common.close", "Close")
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ c(de, {
+				isOpen: ut,
+				onClose: () => w(!1),
+				onConfirm: () => {
+					w(!1), f("/billing");
+				},
+				title: fe("environment").title,
+				message: fe("environment").message,
+				confirmLabel: "View Billing",
+				cancelLabel: "Dismiss",
+				variant: "warning"
+			})
+		]
+	}) : /* @__PURE__ */ c("div", {
+		className: "flex items-center justify-center min-h-[400px]",
+		children: /* @__PURE__ */ l("div", {
+			className: "text-center space-y-2",
+			children: [/* @__PURE__ */ c("h2", {
+				className: "text-lg font-semibold text-foreground",
+				children: "Access Denied"
+			}), /* @__PURE__ */ c("p", {
+				className: "text-sm text-text-secondary",
+				children: "You don't have permission to access this page."
+			})]
+		})
+	});
+}
+//#endregion
+export { u as TargetsPage };
+
+//# sourceMappingURL=TargetsPage.js.map