@openhands/agent-canvas 1.0.0-rc.8 → 1.0.0

package/dist/components/features/backends/backend-form-modal.js

@@ -4,41 +4,42 @@ import { cn as n } from "../../../utils/utils.js";
 import { useNavigation as r } from "../../../context/navigation-context.js";
 import { ServerClient as i } from "../../../node_modules/@openhands/typescript-client/dist/client/server-client.js";
 import { getAgentServerClientOptions as a } from "../../../api/agent-server-client-options.js";
-import { useQuery as o } from "../../../node_modules/@tanstack/react-query/build/modern/useQuery.js";
-import { useActiveBackendContext as s } from "../../../contexts/active-backend-context.js";
-import { ModalBackdrop as c } from "../../shared/modals/modal-backdrop.js";
-import { MODAL_MAX_WIDTH_VIEWPORT as l, modalWidthClassName as u } from "../../shared/modals/modal-body.js";
-import { modalTitleLgClassName as d, modalTitleLgMediumClassName as f } from "../../../utils/modal-classes.js";
-import { ModalCloseButton as p } from "../../shared/modals/modal-close-button.js";
-import { BrandButton as m } from "../settings/brand-button.js";
-import { SettingsInput as h } from "../settings/settings-input.js";
-import { useBackendsHealth as g } from "../../../hooks/query/use-backends-health.js";
-import _ from "../../../assets/branding/openhands-logo-white.js";
-import v from "../../../icons/chevron-down-small.js";
-import { BackendStatusDot as y } from "./backend-status-dot.js";
-import { DeviceFlowAuth as b } from "./device-flow-auth.js";
-import x from "react";
-import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { assertAgentServerVersionIsSupported as o } from "../../../api/agent-server-compatibility.js";
+import { useQuery as s } from "../../../node_modules/@tanstack/react-query/build/modern/useQuery.js";
+import { useActiveBackendContext as c } from "../../../contexts/active-backend-context.js";
+import { ModalBackdrop as l } from "../../shared/modals/modal-backdrop.js";
+import { MODAL_MAX_WIDTH_VIEWPORT as u, modalWidthClassName as d } from "../../shared/modals/modal-body.js";
+import { modalTitleLgClassName as f, modalTitleLgMediumClassName as p } from "../../../utils/modal-classes.js";
+import { ModalCloseButton as m } from "../../shared/modals/modal-close-button.js";
+import { BrandButton as h } from "../settings/brand-button.js";
+import { SettingsInput as g } from "../settings/settings-input.js";
+import { useBackendsHealth as _ } from "../../../hooks/query/use-backends-health.js";
+import v from "../../../assets/branding/openhands-logo-white.js";
+import y from "../../../icons/chevron-down-small.js";
+import { BackendStatusDot as b } from "./backend-status-dot.js";
+import { DeviceFlowAuth as x } from "./device-flow-auth.js";
+import S from "react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/components/features/backends/backend-form-modal.tsx
-function w(e) {
+function T(e) {
 	let t = e.trim().toLowerCase();
 	return t.includes("all-hands.dev") || t.includes("openhands.dev") ? "cloud" : "local";
 }
-function T(e) {
+function E(e) {
 	let t = e.toLowerCase().replace(/^\[|\]$/g, "");
 	return !!(t === "localhost" || t === "::1" || t === "::" || t === "0.0.0.0" || /^127\./.test(t) || /^::ffff:127\./i.test(t) || /^10\./.test(t) || /^192\.168\./.test(t) || /^172\.(1[6-9]|2\d|3[01])\./.test(t) || /^fe[89ab][0-9a-f]:/i.test(t) || /^f[cd][0-9a-f]{2}:/i.test(t) || t.endsWith(".local") || !t.includes(".") && !t.includes(":"));
 }
-function E(e) {
+function D(e) {
 	let t = e.trim().replace(/\/+$/, "");
 	if (!t) return "";
 	if (/^https?:\/\//i.test(t)) return t;
 	let n = t.match(/^\[([^\]]+)\]/);
-	return `${T(n ? n[1] : (t.match(/:/g) ?? []).length > 1 ? t : t.split(":")[0]) ? "http" : "https"}://${t}`;
+	return `${E(n ? n[1] : (t.match(/:/g) ?? []).length > 1 ? t : t.split(":")[0]) ? "http" : "https"}://${t}`;
 }
-function D(e) {
+function O(e) {
 	let t = e.trim();
 	if (!t || /\s/.test(t)) return !1;
-	let n = E(t);
+	let n = D(t);
 	if (!n) return !1;
 	try {
 		let e = new URL(n);
@@ -47,29 +48,29 @@ function D(e) {
 		return !1;
 	}
 }
-var O = "https://app.all-hands.dev";
-function k(e, n) {
+var k = "https://app.all-hands.dev";
+function A(e, n) {
 	return e(t.BACKEND$CONNECTION_TEST_FAILED, {
 		host: n,
 		interpolation: { escapeValue: !1 }
 	});
 }
-function A(e) {
+function j(e) {
 	return e instanceof Error ? e.message : typeof e == "string" ? e : null;
 }
-function j(e, t) {
-	let n = A(t);
+function M(e, t) {
+	let n = j(t);
 	return n ? `${e}\n${n}` : e;
 }
-async function M(e) {
-	e.kind === "local" && await new i(a({
+async function N(e) {
+	e.kind === "local" && o(await new i(a({
 		host: e.host,
 		sessionApiKey: e.apiKey || null,
 		timeout: 5e3
-	})).getServerInfo();
+	})).getServerInfo());
 }
-function N({ backend: n, testIdRoot: r }) {
-	let { t: s } = e("openhands"), c = g([n])[n.id], l = c?.isConnected ?? null, u = c?.disabled === !0, d = c?.consecutiveFailures ?? 0, f = c?.lastError ?? null, { data: p } = o({
+function P({ backend: n, testIdRoot: r }) {
+	let { t: o } = e("openhands"), c = _([n])[n.id], l = c?.isConnected ?? null, u = c?.disabled === !0, d = c?.consecutiveFailures ?? 0, f = c?.lastError ?? null, { data: p } = s({
 		queryKey: [
 			"backend-version",
 			n.host,
@@ -84,47 +85,47 @@ function N({ backend: n, testIdRoot: r }) {
 		staleTime: 6e4,
 		enabled: n.kind === "local" && !u
 	}), m;
-	m = s(l === !0 ? t.ONBOARDING$BACKEND_STATUS_CONNECTED : l === !1 ? t.ONBOARDING$BACKEND_STATUS_DISCONNECTED : t.ONBOARDING$BACKEND_STATUS_CHECKING);
-	let h = n.kind === "cloud" ? s(t.BACKEND$KIND_CLOUD) : s(t.BACKEND$KIND_LOCAL);
-	return /* @__PURE__ */ C("div", {
+	m = o(l === !0 ? t.ONBOARDING$BACKEND_STATUS_CONNECTED : l === !1 ? t.ONBOARDING$BACKEND_STATUS_DISCONNECTED : t.ONBOARDING$BACKEND_STATUS_CHECKING);
+	let h = n.kind === "cloud" ? o(t.BACKEND$KIND_CLOUD) : o(t.BACKEND$KIND_LOCAL);
+	return /* @__PURE__ */ w("div", {
 		className: "flex flex-col gap-2",
-		children: [/* @__PURE__ */ C("div", {
+		children: [/* @__PURE__ */ w("div", {
 			"data-testid": `${r}-status`,
 			className: "flex items-center gap-3 text-sm",
 			children: [
-				/* @__PURE__ */ S(y, { isConnected: l }),
-				/* @__PURE__ */ S("span", {
+				/* @__PURE__ */ C(b, { isConnected: l }),
+				/* @__PURE__ */ C("span", {
 					className: "text-white",
 					"data-testid": `${r}-status-label`,
 					children: m
 				}),
-				/* @__PURE__ */ S("span", {
+				/* @__PURE__ */ C("span", {
 					className: "text-tertiary-alt",
 					children: "·"
 				}),
-				/* @__PURE__ */ S("span", {
+				/* @__PURE__ */ C("span", {
 					className: "text-[var(--oh-text-tertiary)]",
 					children: h
 				}),
-				p ? /* @__PURE__ */ S("span", {
+				p ? /* @__PURE__ */ C("span", {
 					className: "text-xs text-[var(--oh-muted)]",
 					"data-testid": `${r}-version`,
-					children: s(t.BACKEND$VERSION_LABEL, { version: p })
+					children: o(t.BACKEND$VERSION_LABEL, { version: p })
 				}) : null
 			]
-		}), u ? /* @__PURE__ */ C("div", {
+		}), u ? /* @__PURE__ */ w("div", {
 			"data-testid": `${r}-status-error`,
 			className: "flex flex-col gap-1 rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm",
 			children: [
-				/* @__PURE__ */ S("span", {
+				/* @__PURE__ */ C("span", {
 					className: "font-semibold text-red-300",
-					children: s(t.BACKEND$HEALTH_FAILED_TITLE)
+					children: o(t.BACKEND$HEALTH_FAILED_TITLE)
 				}),
-				/* @__PURE__ */ S("span", {
+				/* @__PURE__ */ C("span", {
 					className: "text-xs text-[var(--oh-text-tertiary)]",
-					children: s(t.BACKEND$HEALTH_FAILED_DETAIL, { count: d })
+					children: o(t.BACKEND$HEALTH_FAILED_DETAIL, { count: d })
 				}),
-				f ? /* @__PURE__ */ S("span", {
+				f ? /* @__PURE__ */ C("span", {
 					"data-testid": `${r}-status-error-message`,
 					className: "text-xs text-red-300 whitespace-pre-wrap break-words",
 					children: f
@@ -133,9 +134,9 @@ function N({ backend: n, testIdRoot: r }) {
 		}) : null]
 	});
 }
-function P({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot: c, hostReadOnly: l, requireApiKey: u, hideConfigurationFields: d = !1, onSubmitOverride: f }) {
-	let { t: p } = e("openhands"), { addBackend: g, updateBackend: _ } = s(), [v, y] = x.useState(i?.name ?? ""), [b, T] = x.useState(i?.host ?? ""), [A, P] = x.useState(i?.apiKey ?? ""), [F, I] = x.useState(null), [L, R] = x.useState(!1), [z, B] = x.useState(!1), [V, H] = x.useState(!1), U = r === "edit" && i ? i.kind : w(b), W = c ?? (r === "edit" ? "edit-backend" : "add-backend"), G = u || U !== "local", K = v.trim().length > 0 && D(b) && (!G || A.trim().length > 0), q = z && !v.trim() ? p(t.BACKEND$NAME_REQUIRED) : void 0, J = V ? b.trim() ? D(b) ? void 0 : p(t.BACKEND$HOST_INVALID) : p(t.BACKEND$HOST_REQUIRED) : void 0;
-	return /* @__PURE__ */ C("form", {
+function F({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot: s, hostReadOnly: l, requireApiKey: u, hideConfigurationFields: d = !1, onSubmitOverride: f }) {
+	let { t: p } = e("openhands"), { addBackend: m, updateBackend: _ } = c(), [v, y] = S.useState(i?.name ?? ""), [b, x] = S.useState(i?.host ?? ""), [E, j] = S.useState(i?.apiKey ?? ""), [F, I] = S.useState(null), [L, R] = S.useState(!1), [z, B] = S.useState(!1), [V, H] = S.useState(!1), U = r === "edit" && i ? i.kind : T(b), W = s ?? (r === "edit" ? "edit-backend" : "add-backend"), G = u || U !== "local", K = v.trim().length > 0 && O(b) && (!G || E.trim().length > 0), q = z && !v.trim() ? p(t.BACKEND$NAME_REQUIRED) : void 0, J = V ? b.trim() ? O(b) ? void 0 : p(t.BACKEND$HOST_INVALID) : p(t.BACKEND$HOST_REQUIRED) : void 0;
+	return /* @__PURE__ */ w("form", {
 		"data-testid": `${W}-form`,
 		onSubmit: async (e) => {
 			if (e.preventDefault(), L) return;
@@ -145,8 +146,8 @@ function P({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot:
 			}
 			let t = {
 				name: v.trim(),
-				host: E(b),
-				apiKey: A.trim(),
+				host: D(b),
+				apiKey: E.trim(),
 				kind: U
 			};
 			I(null), R(!0);
@@ -155,19 +156,19 @@ function P({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot:
 					await f(t);
 					return;
 				}
-				await M(t), r === "edit" && i ? _(i.id, t) : g(t), a();
+				await N(t), r === "edit" && i ? _(i.id, t) : m(t), a();
 			} catch (e) {
-				I(j(k(p, t.host), e));
+				I(M(A(p, t.host), e));
 			} finally {
 				R(!1);
 			}
 		},
 		className: "flex flex-col gap-4",
-		children: [/* @__PURE__ */ C("div", {
+		children: [/* @__PURE__ */ w("div", {
 			"data-testid": `${W}-configuration-fields`,
 			className: n("flex flex-col gap-4", d && "hidden"),
 			children: [
-				/* @__PURE__ */ S(h, {
+				/* @__PURE__ */ C(g, {
 					testId: `${W}-name`,
 					name: `${W}-name`,
 					type: "text",
@@ -182,41 +183,41 @@ function P({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot:
 					showRequiredTag: !0,
 					error: q
 				}),
-				/* @__PURE__ */ S(h, {
+				/* @__PURE__ */ C(g, {
 					testId: `${W}-host`,
 					name: `${W}-host`,
 					type: "text",
 					label: p(t.BACKEND$HOST_LABEL),
 					value: b,
 					onChange: l ? void 0 : (e) => {
-						T(e), I(null);
+						x(e), I(null);
 					},
 					onBlur: () => H(!0),
-					placeholder: O,
+					placeholder: k,
 					className: "w-full",
 					showRequiredTag: !0,
 					error: J,
 					isDisabled: l
 				}),
-				/* @__PURE__ */ S(h, {
+				/* @__PURE__ */ C(g, {
 					testId: `${W}-api-key`,
 					name: `${W}-api-key`,
 					type: "password",
 					label: p(t.BACKEND$KEY_LABEL),
-					value: A,
+					value: E,
 					onChange: (e) => {
-						P(e), I(null);
+						j(e), I(null);
 					},
 					placeholder: "",
 					className: "w-full"
 				}),
-				F ? /* @__PURE__ */ S("div", {
+				F ? /* @__PURE__ */ C("div", {
 					role: "alert",
 					"data-testid": `${W}-error`,
 					className: "rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words",
 					children: F
 				}) : null,
-				r === "edit" && i && /* @__PURE__ */ S(N, {
+				r === "edit" && i && /* @__PURE__ */ C(P, {
 					backend: i,
 					testIdRoot: W
 				})
@@ -225,15 +226,15 @@ function P({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot:
 			canSubmit: K && !L,
 			isSubmitting: L,
 			testIdRoot: W
-		}) : /* @__PURE__ */ C("div", {
+		}) : /* @__PURE__ */ w("div", {
 			className: "flex justify-end gap-2 mt-2 w-full",
-			children: [/* @__PURE__ */ S(m, {
+			children: [/* @__PURE__ */ C(h, {
 				type: "button",
 				variant: "secondary",
 				onClick: a,
 				testId: `${W}-cancel`,
 				children: p(t.BUTTON$CANCEL)
-			}), /* @__PURE__ */ S(m, {
+			}), /* @__PURE__ */ C(h, {
 				type: "submit",
 				variant: "primary",
 				isDisabled: !K || L,
@@ -243,91 +244,91 @@ function P({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot:
 		})]
 	});
 }
-function F() {
+function I() {
 	let { currentPath: e, navigate: t } = r();
-	return x.useCallback(() => {
+	return S.useCallback(() => {
 		/^\/automations\/[^/]+/.test(e) ? t("/automations") : /^\/conversations\/[^/]+/.test(e) && t("/conversations");
 	}, [e, t]);
 }
-function I({ onClose: n }) {
-	let { t: r } = e("openhands"), { addBackend: i } = s(), a = F(), [o, c] = x.useState(""), [l, u] = x.useState(""), [d, f] = x.useState(""), [p, g] = x.useState(null), [_, v] = x.useState(!1), y = w(l), b = o.trim().length > 0 && D(l) && (y === "local" || d.trim().length > 0);
-	return /* @__PURE__ */ C("form", {
+function L({ onClose: n }) {
+	let { t: r } = e("openhands"), { addBackend: i } = c(), a = I(), [o, s] = S.useState(""), [l, u] = S.useState(""), [d, f] = S.useState(""), [p, m] = S.useState(null), [_, v] = S.useState(!1), y = T(l), b = o.trim().length > 0 && O(l) && (y === "local" || d.trim().length > 0);
+	return /* @__PURE__ */ w("form", {
 		"data-testid": "add-backend-form",
 		onSubmit: async (e) => {
 			if (e.preventDefault(), !b || _) return;
 			let t = {
 				name: o.trim(),
-				host: E(l),
+				host: D(l),
 				apiKey: d.trim(),
 				kind: y
 			};
-			g(null), v(!0);
+			m(null), v(!0);
 			try {
-				await M(t), i(t), a(), n();
+				await N(t), i(t), a(), n();
 			} catch (e) {
-				g(j(k(r, t.host), e));
+				m(M(A(r, t.host), e));
 			} finally {
 				v(!1);
 			}
 		},
 		className: "flex flex-col gap-4 flex-1 min-w-0",
 		children: [
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ w("div", {
 				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ S(h, {
+				children: [/* @__PURE__ */ C(g, {
 					testId: "add-backend-name",
 					name: "add-backend-name",
 					type: "text",
 					label: r(t.BACKEND$NAME_LABEL),
 					value: o,
 					onChange: (e) => {
-						c(e), g(null);
+						s(e), m(null);
 					},
 					placeholder: "e.g. My Server",
 					className: "w-full"
-				}), /* @__PURE__ */ S("p", {
+				}), /* @__PURE__ */ C("p", {
 					className: "text-xs text-[var(--oh-muted)]",
 					children: r(t.BACKEND$NAME_HELPER)
 				})]
 			}),
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ w("div", {
 				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ S(h, {
+				children: [/* @__PURE__ */ C(g, {
 					testId: "add-backend-host",
 					name: "add-backend-host",
 					type: "text",
 					label: r(t.BACKEND$HOST_LABEL),
 					value: l,
 					onChange: (e) => {
-						u(e), g(null);
+						u(e), m(null);
 					},
 					placeholder: "http://localhost:8000",
 					className: "w-full"
-				}), /* @__PURE__ */ S("p", {
+				}), /* @__PURE__ */ C("p", {
 					className: "text-xs text-[var(--oh-muted)]",
 					"data-testid": "add-backend-host-helper",
 					children: r(t.BACKEND$HOST_HELPER)
 				})]
 			}),
-			/* @__PURE__ */ S(h, {
+			/* @__PURE__ */ C(g, {
 				testId: "add-backend-api-key",
 				name: "add-backend-api-key",
 				type: "password",
 				label: r(t.BACKEND$KEY_LABEL),
 				value: d,
 				onChange: (e) => {
-					f(e), g(null);
+					f(e), m(null);
 				},
 				placeholder: "sk-••••••••••",
 				className: "w-full"
 			}),
-			p ? /* @__PURE__ */ S("div", {
+			p ? /* @__PURE__ */ C("div", {
 				role: "alert",
 				"data-testid": "add-backend-error",
 				className: "rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words",
 				children: p
 			}) : null,
-			/* @__PURE__ */ S(m, {
+			/* @__PURE__ */ C(h, {
 				type: "submit",
 				variant: "secondary",
 				isDisabled: !b || _,
@@ -338,64 +339,64 @@ function I({ onClose: n }) {
 		]
 	});
 }
-function L({ onClose: r }) {
-	let { t: i } = e("openhands"), { addBackend: a } = s(), o = F(), [c, l] = x.useState(!1), [u, d] = x.useState(""), p = u.trim() || O;
-	return /* @__PURE__ */ C("div", {
+function R({ onClose: r }) {
+	let { t: i } = e("openhands"), { addBackend: a } = c(), o = I(), [s, l] = S.useState(!1), [u, d] = S.useState(""), f = u.trim() || k;
+	return /* @__PURE__ */ w("div", {
 		className: "flex flex-1 min-w-0 flex-col items-center gap-3",
 		children: [
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ w("div", {
 				className: "flex flex-col items-center gap-1",
-				children: [/* @__PURE__ */ S(_, {
+				children: [/* @__PURE__ */ C(v, {
 					width: 56,
 					height: 56,
 					"aria-hidden": !0
-				}), /* @__PURE__ */ S("h4", {
-					className: f,
+				}), /* @__PURE__ */ C("h4", {
+					className: p,
 					"data-testid": "add-backend-cloud-title",
 					children: i(t.BACKEND$CLOUD_TITLE)
 				})]
 			}),
-			/* @__PURE__ */ S("p", {
+			/* @__PURE__ */ C("p", {
 				className: "text-center text-sm leading-relaxed text-[var(--oh-muted)]",
 				children: i(t.BACKEND$CLOUD_DESCRIPTION)
 			}),
-			/* @__PURE__ */ S(b, {
-				host: p,
+			/* @__PURE__ */ C(x, {
+				host: f,
 				onSuccess: (e) => {
 					a({
 						name: "OpenHands Cloud",
-						host: E(p),
+						host: D(f),
 						apiKey: e,
 						kind: "cloud"
 					}), o(), r();
 				},
 				testIdRoot: "add-backend"
 			}),
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ w("div", {
 				className: "w-full",
-				children: [/* @__PURE__ */ C("button", {
+				children: [/* @__PURE__ */ w("button", {
 					type: "button",
 					onClick: () => l((e) => !e),
-					"aria-expanded": c,
+					"aria-expanded": s,
 					"data-testid": "add-backend-advanced-toggle",
 					className: "flex w-full cursor-pointer items-center justify-center gap-1 text-center text-xs text-[var(--oh-muted)] transition-colors hover:text-content-2",
-					children: [/* @__PURE__ */ S("span", { children: i(t.BACKEND$ADVANCED) }), /* @__PURE__ */ S(v, {
-						className: n("h-4 w-4 shrink-0 text-muted transition-transform", c && "rotate-180"),
+					children: [/* @__PURE__ */ C("span", { children: i(t.BACKEND$ADVANCED) }), /* @__PURE__ */ C(y, {
+						className: n("h-4 w-4 shrink-0 text-muted transition-transform", s && "rotate-180"),
 						"aria-hidden": !0
 					})]
-				}), /* @__PURE__ */ C("div", {
-					className: n("pt-2", !c && "pointer-events-none invisible"),
-					"aria-hidden": !c,
-					children: [/* @__PURE__ */ S(h, {
+				}), /* @__PURE__ */ w("div", {
+					className: n("pt-2", !s && "pointer-events-none invisible"),
+					"aria-hidden": !s,
+					children: [/* @__PURE__ */ C(g, {
 						testId: "add-backend-cloud-host",
 						name: "add-backend-cloud-host",
 						type: "text",
 						label: i(t.BACKEND$HOST_LABEL),
 						value: u,
 						onChange: d,
-						placeholder: O,
+						placeholder: k,
 						className: "w-full"
-					}), /* @__PURE__ */ S("p", {
+					}), /* @__PURE__ */ C("p", {
 						className: "mt-1 text-xs text-[var(--oh-muted)]",
 						children: i(t.BACKEND$LOGIN_CLOUD_HINT)
 					})]
@@ -404,48 +405,48 @@ function L({ onClose: r }) {
 		]
 	});
 }
-function R({ mode: r, backend: i, onClose: a }) {
+function z({ mode: r, backend: i, onClose: a }) {
 	let { t: o } = e("openhands");
-	if (r === "add") return /* @__PURE__ */ S(c, {
+	if (r === "add") return /* @__PURE__ */ C(l, {
 		onClose: a,
 		closeOnEscape: !1,
 		"aria-label": o(t.BACKEND$ADD_TITLE),
-		children: /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ w("div", {
 			"data-testid": "add-backend-modal",
-			className: n("relative rounded-xl border border-[var(--oh-border)] bg-base-secondary", u("xl"), l),
+			className: n("relative rounded-xl border border-[var(--oh-border)] bg-base-secondary", d("xl"), u),
 			children: [
-				/* @__PURE__ */ S(p, {
+				/* @__PURE__ */ C(m, {
 					onClose: a,
 					testId: "add-backend-close"
 				}),
-				/* @__PURE__ */ S("div", {
+				/* @__PURE__ */ C("div", {
 					className: "px-6 pt-6 pb-2 pr-12",
-					children: /* @__PURE__ */ S("h2", {
-						className: d,
+					children: /* @__PURE__ */ C("h2", {
+						className: f,
 						children: o(t.BACKEND$ADD_TITLE)
 					})
 				}),
-				/* @__PURE__ */ C("div", {
+				/* @__PURE__ */ w("div", {
 					className: "flex gap-6 px-6 pb-6 pt-2",
 					children: [
-						/* @__PURE__ */ S("div", {
+						/* @__PURE__ */ C("div", {
 							className: "flex-1 min-w-0",
-							children: /* @__PURE__ */ S(I, { onClose: a })
+							children: /* @__PURE__ */ C(L, { onClose: a })
 						}),
-						/* @__PURE__ */ C("div", {
+						/* @__PURE__ */ w("div", {
 							className: "flex shrink-0 flex-col items-center",
 							children: [
-								/* @__PURE__ */ S("div", { className: "flex-1 w-px bg-[var(--oh-border)]" }),
-								/* @__PURE__ */ S("span", {
+								/* @__PURE__ */ C("div", { className: "flex-1 w-px bg-[var(--oh-border)]" }),
+								/* @__PURE__ */ C("span", {
 									className: "py-3 text-xs uppercase text-[var(--oh-muted)]",
 									children: o(t.BACKEND$LOGIN_OR)
 								}),
-								/* @__PURE__ */ S("div", { className: "flex-1 w-px bg-[var(--oh-border)]" })
+								/* @__PURE__ */ C("div", { className: "flex-1 w-px bg-[var(--oh-border)]" })
 							]
 						}),
-						/* @__PURE__ */ S("div", {
+						/* @__PURE__ */ C("div", {
 							className: "flex-1 min-w-0",
-							children: /* @__PURE__ */ S(L, { onClose: a })
+							children: /* @__PURE__ */ C(R, { onClose: a })
 						})
 					]
 				})
@@ -453,23 +454,23 @@ function R({ mode: r, backend: i, onClose: a }) {
 		})
 	});
 	let s = "edit-backend";
-	return /* @__PURE__ */ S(c, {
+	return /* @__PURE__ */ C(l, {
 		onClose: a,
 		closeOnEscape: !1,
 		"aria-label": o(t.BACKEND$EDIT_TITLE),
-		children: /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ w("div", {
 			"data-testid": `${s}-modal`,
-			className: n("relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]", u("md")),
+			className: n("relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]", d("md")),
 			children: [
-				/* @__PURE__ */ S(p, {
+				/* @__PURE__ */ C(m, {
 					onClose: a,
 					testId: `${s}-close`
 				}),
-				/* @__PURE__ */ S("h2", {
-					className: n("pr-6", d),
+				/* @__PURE__ */ C("h2", {
+					className: n("pr-6", f),
 					children: o(t.BACKEND$EDIT_TITLE)
 				}),
-				/* @__PURE__ */ S(P, {
+				/* @__PURE__ */ C(F, {
 					mode: "edit",
 					backend: i,
 					onSubmitted: a,
@@ -480,6 +481,6 @@ function R({ mode: r, backend: i, onClose: a }) {
 	});
 }
 //#endregion
-export { R as BackendFormModal };
+export { z as BackendFormModal };
 
 //# sourceMappingURL=backend-form-modal.js.map