@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/components/agents/AgentForm.js

@@ -0,0 +1,593 @@
+import { useProbeAgentTunnelLazyQuery as e } from "../../generated/wspace-operations.js";
+import { SearchableSelect as t } from "../shared/SearchableSelect.js";
+import "../shared/index.js";
+import { useCallback as n, useState as r } from "react";
+import { useI18n as ee } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Check as i, CheckCircle2 as a, ChevronLeft as te, ChevronRight as o, Copy as ne, Download as re, Eye as ie, EyeOff as ae, Loader2 as s, Plus as c, RefreshCw as l, Terminal as oe, X as se, XCircle as u } from "lucide-react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/agents/AgentForm.tsx
+function m({ onSubmit: m, onCancel: h, isLoading: g, onNavigate: _, targets: v, targetsLoading: y, onCreateTarget: b }) {
+	let { t: ce } = ee(), x = (e, t) => {
+		let n = ce(e);
+		return n === e ? t : n;
+	}, [S, C] = r("details"), [w, le] = r(!1), [T, ue] = r(!1), [de, fe] = r(null), [E, pe] = r(""), [D, O] = r(""), [k, A] = r(""), [j, M] = r(""), [N, P] = r(!1), [F, I] = r(""), [L, R] = r(!1), [z, B] = r(null), [V, H] = r(!1), [U, W] = r(null), [G, K] = r(null), [q, me] = r(""), [J, Y] = r("linux"), [he, ge] = r("x86_64"), [_e, ve] = r("1.0.0"), [ye, X] = r(null), [be] = e(), xe = n((e, t) => {
+		navigator.clipboard.writeText(e), fe(t), setTimeout(() => fe(null), 2e3);
+	}, []), Se = (e) => {
+		let t = e.trim();
+		return t.endsWith("/") && (t = t.slice(0, -1)), t;
+	}, Ce = async () => {
+		let e = Se(D);
+		if (e) {
+			H(!0), W(null), K(null);
+			try {
+				let { data: t, error: n } = await be({ variables: {
+					url: e,
+					agentApiKey: k || void 0
+				} });
+				if (n) {
+					W({
+						ok: !1,
+						error: n.message
+					}), K({
+						ok: !1,
+						error: n.message
+					}), H(!1);
+					return;
+				}
+				let r = t?.probeAgentTunnel;
+				if (!r) {
+					W({
+						ok: !1,
+						error: "No response from probe"
+					}), K({
+						ok: !1,
+						error: "No response from probe"
+					}), H(!1);
+					return;
+				}
+				if (r.healthOk ? (W({
+					ok: !0,
+					data: {
+						status: r.healthStatus || "healthy",
+						version: r.agentVersion || "unknown",
+						uptime: r.uptime || 0
+					}
+				}), r.agentVersion && ve(r.agentVersion)) : W({
+					ok: !1,
+					error: r.healthError || "Health check failed"
+				}), r.identityOk) {
+					let e = r.hostname || "", t = r.platform || "linux", n = r.architecture || "x86_64";
+					K({
+						ok: !0,
+						data: {
+							hostname: e,
+							platform: t,
+							arch: n
+						}
+					}), e && me(e), t && Y(t), n && ge(n), !E && e && pe(e);
+				} else K({
+					ok: !1,
+					error: r.identityError || "Identity check failed"
+				});
+			} catch (e) {
+				let t = e instanceof Error ? e.message : "Probe request failed";
+				W({
+					ok: !1,
+					error: t
+				}), K({
+					ok: !1,
+					error: t
+				});
+			}
+			H(!1);
+		}
+	}, we = async () => {
+		X(null);
+		let e = {
+			name: E || q || "Unnamed Agent",
+			hostname: q || "unknown",
+			platform: J,
+			architecture: he,
+			version: _e,
+			tunnelUrl: Se(D),
+			tunnelStatus: "ACTIVE",
+			agentApiKey: k,
+			...j ? { targetId: j } : {}
+		};
+		try {
+			let t = (await m(e))?.id || null;
+			if (!t) {
+				X("Agent creation returned no ID. The agent may already exist.");
+				return;
+			}
+			_ ? _(`/agents/${t}`) : h();
+		} catch (e) {
+			X(e instanceof Error ? e.message : "Failed to create agent");
+		}
+	}, Te = U?.ok && G?.ok, Z = v && v.length > 0, Ee = (b || Z) && j.length === 0, De = D.trim().length > 0 && !Ee, Oe = n(async () => {
+		if (!(!b || !F.trim())) {
+			R(!0), B(null);
+			try {
+				let e = await b(F.trim());
+				e ? (M(e.id), P(!1), I("")) : B(x("agentsPage.inlineTargetFailed", "Failed to create target. Please try again."));
+			} catch (e) {
+				B(e instanceof Error ? e.message : "Failed to create target");
+			} finally {
+				R(!1);
+			}
+		}
+	}, [
+		b,
+		F,
+		x
+	]), ke = ({ text: e, id: t }) => /* @__PURE__ */ f("button", {
+		type: "button",
+		onClick: () => xe(e, t),
+		className: "p-1 rounded hover:bg-bg-elevated transition-colors",
+		title: x("agentsPage.copy", "Copy"),
+		children: de === t ? /* @__PURE__ */ f(i, { className: "w-3.5 h-3.5 text-status-success-text" }) : /* @__PURE__ */ f(ne, { className: "w-3.5 h-3.5 text-text-secondary" })
+	}), Q = [{
+		key: "details",
+		label: "Setup"
+	}, {
+		key: "validate",
+		label: "Validate"
+	}], $ = Q.findIndex((e) => e.key === S);
+	return /* @__PURE__ */ f("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay",
+		children: /* @__PURE__ */ p("div", {
+			className: "w-full max-w-xl bg-bg-surface rounded-lg shadow-xl max-h-[90vh] overflow-y-auto",
+			children: [
+				/* @__PURE__ */ p("div", {
+					className: "flex items-center justify-between px-6 py-4 border-b border-border-default sticky top-0 bg-bg-surface z-10",
+					children: [/* @__PURE__ */ f("h2", {
+						className: "text-lg font-semibold text-text-primary",
+						children: x("agentsPage.addNewAgent", "Add New Agent")
+					}), /* @__PURE__ */ f("button", {
+						onClick: h,
+						className: "p-1 rounded hover:bg-bg-sunken transition-colors",
+						children: /* @__PURE__ */ f(se, { className: "w-5 h-5 text-text-secondary" })
+					})]
+				}),
+				/* @__PURE__ */ f("div", {
+					className: "flex items-center gap-2 px-6 pt-4 pb-2",
+					children: Q.map((e, t) => /* @__PURE__ */ p("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ f("div", {
+								className: `flex items-center justify-center w-7 h-7 rounded-full text-xs font-semibold transition-colors ${t < $ ? "bg-status-success-bg text-status-success-text" : t === $ ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary"}`,
+								children: t < $ ? /* @__PURE__ */ f(a, { className: "w-4 h-4" }) : t + 1
+							}),
+							/* @__PURE__ */ f("span", {
+								className: `text-sm ${t === $ ? "font-medium text-text-primary" : "text-text-secondary"}`,
+								children: e.label
+							}),
+							t < Q.length - 1 && /* @__PURE__ */ f(o, { className: "w-4 h-4 text-text-muted" })
+						]
+					}, e.key))
+				}),
+				/* @__PURE__ */ p("div", {
+					className: "p-6",
+					children: [S === "details" && /* @__PURE__ */ p("div", {
+						className: "space-y-4",
+						children: [
+							/* @__PURE__ */ p("div", {
+								className: "border border-border-default rounded-lg overflow-hidden",
+								children: [/* @__PURE__ */ p("button", {
+									type: "button",
+									onClick: () => ue(!T),
+									className: "w-full flex items-center justify-between px-4 py-3 bg-bg-sunken hover:bg-bg-sunken/80 transition-colors",
+									children: [/* @__PURE__ */ p("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ f(re, { className: "w-4 h-4 text-action-primary-bg" }), /* @__PURE__ */ f("span", {
+											className: "text-sm font-medium text-text-primary",
+											children: x("agentsPage.installInstructions", "Agent Install Instructions")
+										})]
+									}), /* @__PURE__ */ f(o, { className: `w-4 h-4 text-text-secondary transition-transform ${T ? "rotate-90" : ""}` })]
+								}), T && /* @__PURE__ */ f("div", {
+									className: "px-4 py-3 space-y-3 border-t border-border-default",
+									children: /* @__PURE__ */ f("div", {
+										className: "space-y-2",
+										children: [
+											{
+												label: x("agentsPage.installStep1", "1. Install the agent CLI"),
+												cmd: "npm install -g @vibecontrols/agent@latest"
+											},
+											{
+												label: x("agentsPage.installStep2", "2. Start the agent"),
+												cmd: "vibe start"
+											},
+											{
+												label: x("agentsPage.installStep3", "3. Get the API key"),
+												cmd: "vibe key"
+											},
+											{
+												label: x("agentsPage.installStep4", "4. Start the tunnel"),
+												cmd: "vibe tunnel agent --start"
+											}
+										].map((e) => /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
+											className: "text-xs text-text-secondary mb-1",
+											children: e.label
+										}), /* @__PURE__ */ p("div", {
+											className: "flex items-center gap-2 bg-bg-sunken rounded-md px-3 py-1.5 font-mono text-xs text-text-primary",
+											children: [
+												/* @__PURE__ */ f(oe, { className: "w-3 h-3 text-text-muted flex-shrink-0" }),
+												/* @__PURE__ */ f("code", {
+													className: "flex-1",
+													children: e.cmd
+												}),
+												/* @__PURE__ */ f(ke, {
+													text: e.cmd,
+													id: e.cmd
+												})
+											]
+										})] }, e.cmd))
+									})
+								})]
+							}),
+							/* @__PURE__ */ p("div", { children: [
+								/* @__PURE__ */ p("label", {
+									className: "block text-sm font-medium text-text-primary mb-1",
+									children: [
+										x("agentsPage.target", "Target"),
+										" ",
+										/* @__PURE__ */ f("span", {
+											className: "text-status-error-text",
+											children: "*"
+										})
+									]
+								}),
+								Z && !N && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(t, {
+									placeholder: x("agentsPage.selectTarget", "Select a target..."),
+									searchPlaceholder: x("agentsPage.searchTargets", "Search targets..."),
+									options: (v ?? []).map((e) => ({
+										value: e.id,
+										label: e.name,
+										description: `${e.type}${e.status ? ` · ${e.status}` : ""}`
+									})),
+									value: j,
+									onChange: M,
+									clearable: !0
+								}), /* @__PURE__ */ p("p", {
+									className: "mt-1 text-xs text-text-muted",
+									children: [
+										x("agentsPage.targetDescription", "The target machine this agent will be installed on."),
+										" ",
+										b && /* @__PURE__ */ p("button", {
+											type: "button",
+											onClick: () => {
+												P(!0), I(E.trim() || "");
+											},
+											className: "text-action-primary-bg hover:underline inline-flex items-center gap-1",
+											children: [/* @__PURE__ */ f(c, { className: "w-3 h-3" }), x("agentsPage.createNewTarget", "Create a new target")]
+										})
+									]
+								})] }),
+								!Z && !y && b && !N && /* @__PURE__ */ p("div", {
+									className: "p-3 bg-bg-sunken border border-border-default rounded-lg",
+									children: [/* @__PURE__ */ f("p", {
+										className: "text-sm text-text-secondary mb-2",
+										children: x("agentsPage.noTargetsInlinePrompt", "You don't have any targets yet. Create one now to install this agent on it.")
+									}), /* @__PURE__ */ p("button", {
+										type: "button",
+										onClick: () => {
+											P(!0), I(E.trim() || "");
+										},
+										className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:opacity-90",
+										children: [/* @__PURE__ */ f(c, { className: "w-4 h-4" }), x("agentsPage.createFirstTarget", "Create first target")]
+									})]
+								}),
+								N && b && /* @__PURE__ */ p("div", {
+									className: "p-3 bg-bg-sunken border border-border-default rounded-lg space-y-2",
+									children: [
+										/* @__PURE__ */ f("p", {
+											className: "text-xs font-medium text-text-secondary",
+											children: x("agentsPage.newDirectTarget", "New target (Direct — you can change the type later)")
+										}),
+										/* @__PURE__ */ f("input", {
+											type: "text",
+											value: F,
+											onChange: (e) => I(e.target.value),
+											placeholder: x("agentsPage.targetName", "Target name"),
+											className: "w-full px-3 py-2 text-sm bg-bg-elevated border border-border-default rounded-md text-text-primary placeholder-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+											autoFocus: !0,
+											onKeyDown: (e) => {
+												e.key === "Enter" && (e.preventDefault(), Oe());
+											}
+										}),
+										z && /* @__PURE__ */ f("p", {
+											className: "text-xs text-status-error-text",
+											children: z
+										}),
+										/* @__PURE__ */ p("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ p("button", {
+												type: "button",
+												onClick: () => void Oe(),
+												disabled: !F.trim() || L,
+												className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:opacity-90 disabled:opacity-50",
+												children: [L ? /* @__PURE__ */ f(s, { className: "w-3.5 h-3.5 animate-spin" }) : /* @__PURE__ */ f(i, { className: "w-3.5 h-3.5" }), x("agentsPage.create", "Create")]
+											}), /* @__PURE__ */ f("button", {
+												type: "button",
+												onClick: () => {
+													P(!1), I(""), B(null);
+												},
+												className: "px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary",
+												children: x("agentsPage.cancel", "Cancel")
+											})]
+										})
+									]
+								}),
+								y && !Z && /* @__PURE__ */ p("div", {
+									className: "p-3 bg-bg-sunken border border-border-default rounded-lg flex items-center gap-2 text-sm text-text-secondary",
+									children: [/* @__PURE__ */ f(s, { className: "w-4 h-4 animate-spin" }), x("agentsPage.loadingTargets", "Loading targets...")]
+								})
+							] }),
+							/* @__PURE__ */ p("div", { children: [
+								/* @__PURE__ */ p("label", {
+									className: "block text-sm font-medium text-text-primary mb-1",
+									children: [
+										x("agentsPage.apiTunnelUrl", "API / Tunnel URL"),
+										" ",
+										/* @__PURE__ */ f("span", {
+											className: "text-status-error-text",
+											children: "*"
+										})
+									]
+								}),
+								/* @__PURE__ */ f("input", {
+									type: "url",
+									value: D,
+									onChange: (e) => O(e.target.value),
+									placeholder: "https://your-tunnel.trycloudflare.com",
+									required: !0,
+									className: "w-full px-3 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg font-mono"
+								}),
+								/* @__PURE__ */ f("p", {
+									className: "mt-1 text-xs text-text-muted",
+									children: x("agentsPage.tunnelUrlHint", "The agent's tunnel URL or local API URL (e.g. http://localhost:3005)")
+								})
+							] }),
+							/* @__PURE__ */ p("div", { children: [
+								/* @__PURE__ */ p("label", {
+									className: "block text-sm font-medium text-text-primary mb-1",
+									children: [
+										x("agentsPage.agentApiKey", "Agent API Key"),
+										" ",
+										/* @__PURE__ */ f("span", {
+											className: "text-status-error-text",
+											children: "*"
+										})
+									]
+								}),
+								/* @__PURE__ */ p("div", {
+									className: "relative",
+									children: [/* @__PURE__ */ f("input", {
+										type: w ? "text" : "password",
+										value: k,
+										onChange: (e) => A(e.target.value),
+										placeholder: "vcak_...",
+										required: !0,
+										className: "w-full px-3 py-2 pr-10 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg font-mono"
+									}), /* @__PURE__ */ f("button", {
+										type: "button",
+										onClick: () => le(!w),
+										className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-bg-elevated transition-colors",
+										children: f(w ? ae : ie, { className: "w-4 h-4 text-text-secondary" })
+									})]
+								}),
+								/* @__PURE__ */ p("p", {
+									className: "mt-1 text-xs text-text-muted",
+									children: [
+										x("agentsPage.apiKeyHint", "Run"),
+										" ",
+										/* @__PURE__ */ f("code", {
+											className: "bg-bg-sunken px-1 rounded",
+											children: "vibe key"
+										}),
+										" ",
+										x("agentsPage.apiKeyHintSuffix", "on the agent to get this. Changes on restart.")
+									]
+								})
+							] }),
+							/* @__PURE__ */ p("div", {
+								className: "flex items-center justify-between pt-4",
+								children: [/* @__PURE__ */ f("button", {
+									type: "button",
+									onClick: h,
+									className: "px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-md hover:bg-bg-elevated transition-colors",
+									children: x("agentsPage.cancel", "Cancel")
+								}), /* @__PURE__ */ p("button", {
+									type: "button",
+									disabled: !De,
+									onClick: () => {
+										C("validate"), Ce();
+									},
+									className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50",
+									children: [x("agentsPage.nextValidate", "Next: Validate"), /* @__PURE__ */ f(o, { className: "w-4 h-4" })]
+								})]
+							})
+						]
+					}), S === "validate" && /* @__PURE__ */ p("div", {
+						className: "space-y-4",
+						children: [
+							/* @__PURE__ */ p("div", {
+								className: "space-y-3",
+								children: [/* @__PURE__ */ p("div", {
+									className: `flex items-center gap-3 p-3 rounded-lg border ${U === null ? "border-border-default bg-bg-sunken" : U.ok ? "border-status-success-text/20 bg-status-success-bg/30" : "border-status-error-text/20 bg-status-error-bg/30"}`,
+									children: [V && !U ? /* @__PURE__ */ f(s, { className: "w-5 h-5 text-text-secondary animate-spin" }) : U?.ok ? /* @__PURE__ */ f(a, { className: "w-5 h-5 text-status-success-text" }) : U ? /* @__PURE__ */ f(u, { className: "w-5 h-5 text-status-error-text" }) : /* @__PURE__ */ f("div", { className: "w-5 h-5 rounded-full border-2 border-border-default" }), /* @__PURE__ */ p("div", {
+										className: "flex-1",
+										children: [
+											/* @__PURE__ */ f("p", {
+												className: "text-sm font-medium text-text-primary",
+												children: x("agentsPage.healthCheck", "Health Check")
+											}),
+											U?.ok && U.data && /* @__PURE__ */ p("p", {
+												className: "text-xs text-text-secondary",
+												children: [
+													"Status: ",
+													U.data.status,
+													" | Version: ",
+													U.data.version,
+													" | Uptime: ",
+													Math.round(U.data.uptime),
+													"s"
+												]
+											}),
+											U && !U.ok && /* @__PURE__ */ f("p", {
+												className: "text-xs text-status-error-text",
+												children: U.error
+											})
+										]
+									})]
+								}), /* @__PURE__ */ p("div", {
+									className: `flex items-center gap-3 p-3 rounded-lg border ${G === null ? "border-border-default bg-bg-sunken" : G.ok ? "border-status-success-text/20 bg-status-success-bg/30" : "border-status-error-text/20 bg-status-error-bg/30"}`,
+									children: [V && !G ? /* @__PURE__ */ f(s, { className: "w-5 h-5 text-text-secondary animate-spin" }) : G?.ok ? /* @__PURE__ */ f(a, { className: "w-5 h-5 text-status-success-text" }) : G ? /* @__PURE__ */ f(u, { className: "w-5 h-5 text-status-error-text" }) : /* @__PURE__ */ f("div", { className: "w-5 h-5 rounded-full border-2 border-border-default" }), /* @__PURE__ */ p("div", {
+										className: "flex-1",
+										children: [
+											/* @__PURE__ */ f("p", {
+												className: "text-sm font-medium text-text-primary",
+												children: x("agentsPage.apiAccess", "API Access")
+											}),
+											G?.ok && G.data && /* @__PURE__ */ p("p", {
+												className: "text-xs text-text-secondary",
+												children: [
+													"Host: ",
+													G.data.hostname,
+													" | ",
+													G.data.platform,
+													" /",
+													" ",
+													G.data.arch
+												]
+											}),
+											G && !G.ok && /* @__PURE__ */ f("p", {
+												className: "text-xs text-status-error-text",
+												children: G.error
+											})
+										]
+									})]
+								})]
+							}),
+							!V && (!U?.ok || !G?.ok) && /* @__PURE__ */ p("button", {
+								type: "button",
+								onClick: Ce,
+								className: "flex items-center gap-2 px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors",
+								children: [/* @__PURE__ */ f(l, { className: "w-3.5 h-3.5" }), x("agentsPage.retryValidation", "Retry validation")]
+							}),
+							Te && /* @__PURE__ */ p("div", {
+								className: "space-y-3 pt-2",
+								children: [
+									/* @__PURE__ */ f("p", {
+										className: "text-sm font-medium text-text-primary",
+										children: x("agentsPage.detectedAgentInfo", "Detected Agent Info")
+									}),
+									/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+										className: "block text-xs font-medium text-text-secondary mb-1",
+										children: x("agentsPage.name", "Name")
+									}), /* @__PURE__ */ f("input", {
+										type: "text",
+										value: E,
+										onChange: (e) => pe(e.target.value),
+										placeholder: q,
+										className: "w-full px-3 py-1.5 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg"
+									})] }),
+									/* @__PURE__ */ p("div", {
+										className: "grid grid-cols-2 gap-3",
+										children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+											className: "block text-xs font-medium text-text-secondary mb-1",
+											children: x("agentsPage.platform", "Platform")
+										}), /* @__PURE__ */ p("select", {
+											value: J,
+											onChange: (e) => Y(e.target.value),
+											className: "w-full px-3 py-1.5 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+											children: [
+												/* @__PURE__ */ f("option", {
+													value: "linux",
+													children: "Linux"
+												}),
+												/* @__PURE__ */ f("option", {
+													value: "darwin",
+													children: "macOS"
+												}),
+												/* @__PURE__ */ f("option", {
+													value: "windows",
+													children: "Windows"
+												})
+											]
+										})] }), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+											className: "block text-xs font-medium text-text-secondary mb-1",
+											children: x("agentsPage.architecture", "Architecture")
+										}), /* @__PURE__ */ p("select", {
+											value: he,
+											onChange: (e) => ge(e.target.value),
+											className: "w-full px-3 py-1.5 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+											children: [
+												/* @__PURE__ */ f("option", {
+													value: "x86_64",
+													children: "x86_64"
+												}),
+												/* @__PURE__ */ f("option", {
+													value: "arm64",
+													children: "arm64"
+												}),
+												/* @__PURE__ */ f("option", {
+													value: "aarch64",
+													children: "aarch64"
+												})
+											]
+										})] })]
+									})
+								]
+							}),
+							ye && /* @__PURE__ */ p("div", {
+								className: "p-3 bg-status-error-bg/30 border border-status-error-text/20 rounded-lg",
+								children: [/* @__PURE__ */ p("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ f(u, { className: "w-5 h-5 text-status-error-text flex-shrink-0" }), /* @__PURE__ */ f("p", {
+										className: "text-sm text-status-error-text",
+										children: ye
+									})]
+								}), /* @__PURE__ */ p("div", {
+									className: "flex items-center gap-2 mt-3",
+									children: [/* @__PURE__ */ p("button", {
+										type: "button",
+										onClick: () => {
+											X(null), C("details"), O(""), A(""), W(null), K(null);
+										},
+										className: "flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-md hover:bg-bg-elevated transition-colors",
+										children: [/* @__PURE__ */ f(l, { className: "w-3.5 h-3.5" }), x("agentsPage.tryDifferentAgent", "Try Different Agent")]
+									}), /* @__PURE__ */ f("button", {
+										type: "button",
+										onClick: h,
+										className: "px-3 py-1.5 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors",
+										children: x("agentsPage.close", "Close")
+									})]
+								})]
+							}),
+							/* @__PURE__ */ p("div", {
+								className: "flex items-center justify-between pt-4",
+								children: [/* @__PURE__ */ p("button", {
+									type: "button",
+									onClick: () => C("details"),
+									className: "flex items-center gap-1 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-md hover:bg-bg-elevated transition-colors",
+									children: [/* @__PURE__ */ f(te, { className: "w-4 h-4" }), x("agentsPage.back", "Back")]
+								}), /* @__PURE__ */ f("button", {
+									type: "button",
+									disabled: !Te || g || V,
+									onClick: we,
+									className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50",
+									children: g ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(s, { className: "w-4 h-4 animate-spin" }), x("agentsPage.adding", "Adding...")] }) : /* @__PURE__ */ p(d, { children: [x("agentsPage.addAgent", "Add Agent"), /* @__PURE__ */ f(o, { className: "w-4 h-4" })] })
+								})]
+							})
+						]
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { m as AgentForm };
+
+//# sourceMappingURL=AgentForm.js.map