@openhands/agent-canvas 1.0.0-beta.6 → 1.0.0-beta.8

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

@@ -8,36 +8,37 @@ import { useQuery as o } from "../../../node_modules/@tanstack/react-query/build
 import { getAgentServerClientOptions as s } from "../../../api/agent-server-client-options.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 { ModalCloseButton as d } from "../../shared/modals/modal-close-button.js";
-import { BrandButton as f } from "../settings/brand-button.js";
-import { SettingsInput as p } from "../settings/settings-input.js";
-import { useBackendsHealth as m } from "../../../hooks/query/use-backends-health.js";
-import h from "../../../assets/branding/openhands-logo-white.js";
-import g from "../../../icons/chevron-down-small.js";
-import { BackendStatusDot as _ } from "./backend-status-dot.js";
-import { DeviceFlowAuth as v } from "./device-flow-auth.js";
-import y from "react";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
+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";
 //#region src/components/features/backends/backend-form-modal.tsx
-function S(e) {
+function w(e) {
 	let t = e.trim().toLowerCase();
 	return t.includes("all-hands.dev") || t.includes("openhands.dev") ? "cloud" : "local";
 }
-function C(e) {
+function T(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 w(e) {
+function E(e) {
 	let t = e.trim().replace(/\/+$/, "");
 	if (!t) return "";
 	if (/^https?:\/\//i.test(t)) return t;
 	let n = t.match(/^\[([^\]]+)\]/);
-	return `${C(n ? n[1] : (t.match(/:/g) ?? []).length > 1 ? t : t.split(":")[0]) ? "http" : "https"}://${t}`;
+	return `${T(n ? n[1] : (t.match(/:/g) ?? []).length > 1 ? t : t.split(":")[0]) ? "http" : "https"}://${t}`;
 }
-function T(e) {
+function D(e) {
 	let t = e.trim();
 	if (!t || /\s/.test(t)) return !1;
-	let n = w(t);
+	let n = E(t);
 	if (!n) return !1;
 	try {
 		let e = new URL(n);
@@ -46,9 +47,29 @@ function T(e) {
 		return !1;
 	}
 }
-var E = "https://app.all-hands.dev";
-function D({ backend: n, testIdRoot: r }) {
-	let { t: i } = e("openhands"), c = m([n])[n.id], l = c?.isConnected ?? null, u = c?.disabled === !0, d = c?.consecutiveFailures ?? 0, f = c?.lastError ?? null, { data: p } = o({
+var O = "https://app.all-hands.dev";
+function k(e, n) {
+	return e(t.BACKEND$CONNECTION_TEST_FAILED, {
+		host: n,
+		interpolation: { escapeValue: !1 }
+	});
+}
+function A(e) {
+	return e instanceof Error ? e.message : typeof e == "string" ? e : null;
+}
+function j(e, t) {
+	let n = A(t);
+	return n ? `${e}\n${n}` : e;
+}
+async function M(e) {
+	e.kind === "local" && await new a(s({
+		host: e.host,
+		sessionApiKey: e.apiKey || null,
+		timeout: 5e3
+	})).getServerInfo();
+}
+function N({ backend: n, testIdRoot: r }) {
+	let { t: i } = 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({
 		queryKey: [
 			"backend-version",
 			n.host,
@@ -62,48 +83,48 @@ function D({ backend: n, testIdRoot: r }) {
 		retry: !1,
 		staleTime: 6e4,
 		enabled: n.kind === "local" && !u
-	}), h;
-	h = i(l === !0 ? t.ONBOARDING$BACKEND_STATUS_CONNECTED : l === !1 ? t.ONBOARDING$BACKEND_STATUS_DISCONNECTED : t.ONBOARDING$BACKEND_STATUS_CHECKING);
-	let g = n.kind === "cloud" ? i(t.BACKEND$KIND_CLOUD) : i(t.BACKEND$KIND_LOCAL);
-	return /* @__PURE__ */ x("div", {
+	}), m;
+	m = i(l === !0 ? t.ONBOARDING$BACKEND_STATUS_CONNECTED : l === !1 ? t.ONBOARDING$BACKEND_STATUS_DISCONNECTED : t.ONBOARDING$BACKEND_STATUS_CHECKING);
+	let h = n.kind === "cloud" ? i(t.BACKEND$KIND_CLOUD) : i(t.BACKEND$KIND_LOCAL);
+	return /* @__PURE__ */ C("div", {
 		className: "flex flex-col gap-2",
-		children: [/* @__PURE__ */ x("div", {
+		children: [/* @__PURE__ */ C("div", {
 			"data-testid": `${r}-status`,
 			className: "flex items-center gap-3 text-sm",
 			children: [
-				/* @__PURE__ */ b(_, { isConnected: l }),
-				/* @__PURE__ */ b("span", {
+				/* @__PURE__ */ S(y, { isConnected: l }),
+				/* @__PURE__ */ S("span", {
 					className: "text-white",
 					"data-testid": `${r}-status-label`,
-					children: h
+					children: m
 				}),
-				/* @__PURE__ */ b("span", {
+				/* @__PURE__ */ S("span", {
 					className: "text-tertiary-alt",
 					children: "·"
 				}),
-				/* @__PURE__ */ b("span", {
+				/* @__PURE__ */ S("span", {
 					className: "text-[var(--oh-text-tertiary)]",
-					children: g
+					children: h
 				}),
-				p ? /* @__PURE__ */ b("span", {
+				p ? /* @__PURE__ */ S("span", {
 					className: "text-xs text-[var(--oh-muted)]",
 					"data-testid": `${r}-version`,
 					children: i(t.BACKEND$VERSION_LABEL, { version: p })
 				}) : null
 			]
-		}), u ? /* @__PURE__ */ x("div", {
+		}), u ? /* @__PURE__ */ C("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__ */ b("span", {
+				/* @__PURE__ */ S("span", {
 					className: "font-semibold text-red-300",
 					children: i(t.BACKEND$HEALTH_FAILED_TITLE)
 				}),
-				/* @__PURE__ */ b("span", {
+				/* @__PURE__ */ S("span", {
 					className: "text-xs text-[var(--oh-text-tertiary)]",
 					children: i(t.BACKEND$HEALTH_FAILED_DETAIL, { count: d })
 				}),
-				f ? /* @__PURE__ */ b("span", {
+				f ? /* @__PURE__ */ S("span", {
 					"data-testid": `${r}-status-error-message`,
 					className: "text-xs text-red-300 whitespace-pre-wrap break-words",
 					children: f
@@ -112,224 +133,266 @@ function D({ backend: n, testIdRoot: r }) {
 		}) : null]
 	});
 }
-function O({ mode: n, backend: r, onSubmitted: a, renderActions: o, testIdRoot: s, hostReadOnly: c, requireApiKey: l, onSubmitOverride: u }) {
-	let { t: d } = e("openhands"), { addBackend: m, updateBackend: h } = i(), [g, _] = y.useState(r?.name ?? ""), [v, C] = y.useState(r?.host ?? ""), [O, k] = y.useState(r?.apiKey ?? ""), [A, j] = y.useState(!1), [M, N] = y.useState(!1), P = S(v), F = s ?? (n === "edit" ? "edit-backend" : "add-backend"), I = l || P !== "local", L = g.trim().length > 0 && T(v) && (!I || O.trim().length > 0), R = A && !g.trim() ? d(t.BACKEND$NAME_REQUIRED) : void 0, z = M ? v.trim() ? T(v) ? void 0 : d(t.BACKEND$HOST_INVALID) : d(t.BACKEND$HOST_REQUIRED) : void 0;
-	return /* @__PURE__ */ x("form", {
-		"data-testid": `${F}-form`,
+function P({ mode: n, backend: r, onSubmitted: a, renderActions: o, testIdRoot: s, hostReadOnly: c, requireApiKey: l, onSubmitOverride: u }) {
+	let { t: d } = e("openhands"), { addBackend: f, updateBackend: p } = i(), [g, _] = x.useState(r?.name ?? ""), [v, y] = x.useState(r?.host ?? ""), [b, T] = x.useState(r?.apiKey ?? ""), [A, P] = x.useState(null), [F, I] = x.useState(!1), [L, R] = x.useState(!1), [z, B] = x.useState(!1), V = w(v), H = s ?? (n === "edit" ? "edit-backend" : "add-backend"), U = l || V !== "local", W = g.trim().length > 0 && D(v) && (!U || b.trim().length > 0), G = L && !g.trim() ? d(t.BACKEND$NAME_REQUIRED) : void 0, K = z ? v.trim() ? D(v) ? void 0 : d(t.BACKEND$HOST_INVALID) : d(t.BACKEND$HOST_REQUIRED) : void 0;
+	return /* @__PURE__ */ C("form", {
+		"data-testid": `${H}-form`,
 		onSubmit: async (e) => {
-			if (e.preventDefault(), !L) {
-				j(!0), N(!0);
+			if (e.preventDefault(), F) return;
+			if (!W) {
+				R(!0), B(!0);
 				return;
 			}
 			let t = {
 				name: g.trim(),
-				host: w(v),
-				apiKey: O.trim(),
-				kind: P
+				host: E(v),
+				apiKey: b.trim(),
+				kind: V
 			};
-			if (u) {
-				await u(t);
-				return;
+			P(null), I(!0);
+			try {
+				if (u) {
+					await u(t);
+					return;
+				}
+				await M(t), n === "edit" && r ? p(r.id, t) : f(t), a();
+			} catch (e) {
+				P(j(k(d, t.host), e));
+			} finally {
+				I(!1);
 			}
-			n === "edit" && r ? h(r.id, t) : m(t), a();
 		},
 		className: "flex flex-col gap-4",
 		children: [
-			/* @__PURE__ */ b(p, {
-				testId: `${F}-name`,
-				name: `${F}-name`,
+			/* @__PURE__ */ S(h, {
+				testId: `${H}-name`,
+				name: `${H}-name`,
 				type: "text",
 				label: d(t.BACKEND$NAME_LABEL),
 				value: g,
-				onChange: _,
-				onBlur: () => j(!0),
+				onChange: (e) => {
+					_(e), P(null);
+				},
+				onBlur: () => R(!0),
 				placeholder: "Production",
 				className: "w-full",
 				showRequiredTag: !0,
-				error: R
+				error: G
 			}),
-			/* @__PURE__ */ b(p, {
-				testId: `${F}-host`,
-				name: `${F}-host`,
+			/* @__PURE__ */ S(h, {
+				testId: `${H}-host`,
+				name: `${H}-host`,
 				type: "text",
 				label: d(t.BACKEND$HOST_LABEL),
 				value: v,
-				onChange: c ? void 0 : C,
-				onBlur: () => N(!0),
-				placeholder: E,
+				onChange: c ? void 0 : (e) => {
+					y(e), P(null);
+				},
+				onBlur: () => B(!0),
+				placeholder: O,
 				className: "w-full",
 				showRequiredTag: !0,
-				error: z,
+				error: K,
 				isDisabled: c
 			}),
-			/* @__PURE__ */ b(p, {
-				testId: `${F}-api-key`,
-				name: `${F}-api-key`,
+			/* @__PURE__ */ S(h, {
+				testId: `${H}-api-key`,
+				name: `${H}-api-key`,
 				type: "password",
 				label: d(t.BACKEND$KEY_LABEL),
-				value: O,
-				onChange: k,
+				value: b,
+				onChange: (e) => {
+					T(e), P(null);
+				},
 				placeholder: "",
 				className: "w-full"
 			}),
-			n === "edit" && r && /* @__PURE__ */ b(D, {
+			A ? /* @__PURE__ */ S("div", {
+				role: "alert",
+				"data-testid": `${H}-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: A
+			}) : null,
+			n === "edit" && r && /* @__PURE__ */ S(N, {
 				backend: r,
-				testIdRoot: F
+				testIdRoot: H
 			}),
 			o ? o({
-				canSubmit: L,
-				testIdRoot: F
-			}) : /* @__PURE__ */ x("div", {
+				canSubmit: W && !F,
+				isSubmitting: F,
+				testIdRoot: H
+			}) : /* @__PURE__ */ C("div", {
 				className: "flex justify-end gap-2 mt-2 w-full",
-				children: [/* @__PURE__ */ b(f, {
+				children: [/* @__PURE__ */ S(m, {
 					type: "button",
 					variant: "secondary",
 					onClick: a,
-					testId: `${F}-cancel`,
+					testId: `${H}-cancel`,
 					children: d(t.BUTTON$CANCEL)
-				}), /* @__PURE__ */ b(f, {
+				}), /* @__PURE__ */ S(m, {
 					type: "submit",
 					variant: "primary",
-					isDisabled: !L,
-					testId: `${F}-submit`,
+					isDisabled: !W || F,
+					testId: `${H}-submit`,
 					children: d(t.BACKEND$SAVE)
 				})]
 			})
 		]
 	});
 }
-function k() {
+function F() {
 	let { currentPath: e, navigate: t } = r();
-	return y.useCallback(() => {
+	return x.useCallback(() => {
 		/^\/automations\/[^/]+/.test(e) ? t("/automations") : /^\/conversations\/[^/]+/.test(e) && t("/conversations");
 	}, [e, t]);
 }
-function A({ onClose: n }) {
-	let { t: r } = e("openhands"), { addBackend: a } = i(), o = k(), [s, c] = y.useState(""), [l, u] = y.useState(""), [d, m] = y.useState(""), h = S(l), g = s.trim().length > 0 && T(l) && (h === "local" || d.trim().length > 0);
-	return /* @__PURE__ */ x("form", {
+function I({ onClose: n }) {
+	let { t: r } = e("openhands"), { addBackend: a } = i(), o = F(), [s, c] = x.useState(""), [l, u] = x.useState(""), [d, f] = x.useState(""), [p, g] = x.useState(null), [_, v] = x.useState(!1), y = w(l), b = s.trim().length > 0 && D(l) && (y === "local" || d.trim().length > 0);
+	return /* @__PURE__ */ C("form", {
 		"data-testid": "add-backend-form",
-		onSubmit: (e) => {
-			e.preventDefault(), g && (a({
+		onSubmit: async (e) => {
+			if (e.preventDefault(), !b || _) return;
+			let t = {
 				name: s.trim(),
-				host: w(l),
+				host: E(l),
 				apiKey: d.trim(),
-				kind: h
-			}), o(), n());
+				kind: y
+			};
+			g(null), v(!0);
+			try {
+				await M(t), a(t), o(), n();
+			} catch (e) {
+				g(j(k(r, t.host), e));
+			} finally {
+				v(!1);
+			}
 		},
 		className: "flex flex-col gap-4 flex-1 min-w-0",
 		children: [
-			/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ C("div", {
 				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ b(p, {
+				children: [/* @__PURE__ */ S(h, {
 					testId: "add-backend-name",
 					name: "add-backend-name",
 					type: "text",
 					label: r(t.BACKEND$NAME_LABEL),
 					value: s,
-					onChange: c,
+					onChange: (e) => {
+						c(e), g(null);
+					},
 					placeholder: "e.g. My Server",
 					className: "w-full"
-				}), /* @__PURE__ */ b("p", {
+				}), /* @__PURE__ */ S("p", {
 					className: "text-xs text-[var(--oh-muted)]",
 					children: r(t.BACKEND$NAME_HELPER)
 				})]
 			}),
-			/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ C("div", {
 				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ b(p, {
+				children: [/* @__PURE__ */ S(h, {
 					testId: "add-backend-host",
 					name: "add-backend-host",
 					type: "text",
 					label: r(t.BACKEND$HOST_LABEL),
 					value: l,
-					onChange: u,
+					onChange: (e) => {
+						u(e), g(null);
+					},
 					placeholder: "http://localhost:8000",
 					className: "w-full"
-				}), /* @__PURE__ */ b("p", {
+				}), /* @__PURE__ */ S("p", {
 					className: "text-xs text-[var(--oh-muted)]",
 					"data-testid": "add-backend-host-helper",
 					children: r(t.BACKEND$HOST_HELPER)
 				})]
 			}),
-			/* @__PURE__ */ b(p, {
+			/* @__PURE__ */ S(h, {
 				testId: "add-backend-api-key",
 				name: "add-backend-api-key",
 				type: "password",
 				label: r(t.BACKEND$KEY_LABEL),
 				value: d,
-				onChange: m,
+				onChange: (e) => {
+					f(e), g(null);
+				},
 				placeholder: "sk-••••••••••",
 				className: "w-full"
 			}),
-			/* @__PURE__ */ b(f, {
+			p ? /* @__PURE__ */ S("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, {
 				type: "submit",
 				variant: "secondary",
-				isDisabled: !g,
+				isDisabled: !b || _,
 				testId: "add-backend-submit",
 				className: "w-full text-center",
-				children: r(t.BACKEND$CONNECT)
+				children: r(_ ? t.ONBOARDING$BACKEND_STATUS_CHECKING : t.BACKEND$CONNECT)
 			})
 		]
 	});
 }
-function j({ onClose: r }) {
-	let { t: a } = e("openhands"), { addBackend: o } = i(), s = k(), [c, l] = y.useState(!1), [u, d] = y.useState(""), f = u.trim() || E;
-	return /* @__PURE__ */ x("div", {
+function L({ onClose: r }) {
+	let { t: a } = e("openhands"), { addBackend: o } = i(), s = F(), [c, l] = x.useState(!1), [u, d] = x.useState(""), p = u.trim() || O;
+	return /* @__PURE__ */ C("div", {
 		className: "flex flex-1 min-w-0 flex-col items-center gap-3",
 		children: [
-			/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ C("div", {
 				className: "flex flex-col items-center gap-1",
-				children: [/* @__PURE__ */ b(h, {
+				children: [/* @__PURE__ */ S(_, {
 					width: 56,
 					height: 56,
 					"aria-hidden": !0
-				}), /* @__PURE__ */ b("h4", {
-					className: "text-lg font-medium text-white",
+				}), /* @__PURE__ */ S("h4", {
+					className: f,
 					"data-testid": "add-backend-cloud-title",
 					children: a(t.BACKEND$CLOUD_TITLE)
 				})]
 			}),
-			/* @__PURE__ */ b("p", {
+			/* @__PURE__ */ S("p", {
 				className: "text-center text-sm leading-relaxed text-[var(--oh-muted)]",
 				children: a(t.BACKEND$CLOUD_DESCRIPTION)
 			}),
-			/* @__PURE__ */ b(v, {
-				host: f,
+			/* @__PURE__ */ S(b, {
+				host: p,
 				onSuccess: (e) => {
 					o({
 						name: "OpenHands Cloud",
-						host: w(f),
+						host: E(p),
 						apiKey: e,
 						kind: "cloud"
 					}), s(), r();
 				},
 				testIdRoot: "add-backend"
 			}),
-			/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ C("div", {
 				className: "w-full",
-				children: [/* @__PURE__ */ x("button", {
+				children: [/* @__PURE__ */ C("button", {
 					type: "button",
 					onClick: () => l((e) => !e),
 					"aria-expanded": c,
 					"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__ */ b("span", { children: a(t.BACKEND$ADVANCED) }), /* @__PURE__ */ b(g, {
+					children: [/* @__PURE__ */ S("span", { children: a(t.BACKEND$ADVANCED) }), /* @__PURE__ */ S(v, {
 						className: n("h-4 w-4 shrink-0 text-muted transition-transform", c && "rotate-180"),
 						"aria-hidden": !0
 					})]
-				}), /* @__PURE__ */ x("div", {
+				}), /* @__PURE__ */ C("div", {
 					className: n("pt-2", !c && "pointer-events-none invisible"),
 					"aria-hidden": !c,
-					children: [/* @__PURE__ */ b(p, {
+					children: [/* @__PURE__ */ S(h, {
 						testId: "add-backend-cloud-host",
 						name: "add-backend-cloud-host",
 						type: "text",
 						label: a(t.BACKEND$HOST_LABEL),
 						value: u,
 						onChange: d,
-						placeholder: E,
+						placeholder: O,
 						className: "w-full"
-					}), /* @__PURE__ */ b("p", {
+					}), /* @__PURE__ */ S("p", {
 						className: "mt-1 text-xs text-[var(--oh-muted)]",
 						children: a(t.BACKEND$LOGIN_CLOUD_HINT)
 					})]
@@ -338,48 +401,48 @@ function j({ onClose: r }) {
 		]
 	});
 }
-function M({ mode: r, backend: i, onClose: a }) {
+function R({ mode: r, backend: i, onClose: a }) {
 	let { t: o } = e("openhands");
-	if (r === "add") return /* @__PURE__ */ b(c, {
+	if (r === "add") return /* @__PURE__ */ S(c, {
 		onClose: a,
 		closeOnEscape: !1,
 		"aria-label": o(t.BACKEND$ADD_TITLE),
-		children: /* @__PURE__ */ x("div", {
+		children: /* @__PURE__ */ C("div", {
 			"data-testid": "add-backend-modal",
 			className: n("relative rounded-xl border border-[var(--oh-border)] bg-base-secondary", u("xl"), l),
 			children: [
-				/* @__PURE__ */ b(d, {
+				/* @__PURE__ */ S(p, {
 					onClose: a,
 					testId: "add-backend-close"
 				}),
-				/* @__PURE__ */ b("div", {
+				/* @__PURE__ */ S("div", {
 					className: "px-6 pt-6 pb-2 pr-12",
-					children: /* @__PURE__ */ b("h2", {
-						className: "text-lg font-semibold",
+					children: /* @__PURE__ */ S("h2", {
+						className: d,
 						children: o(t.BACKEND$ADD_TITLE)
 					})
 				}),
-				/* @__PURE__ */ x("div", {
+				/* @__PURE__ */ C("div", {
 					className: "flex gap-6 px-6 pb-6 pt-2",
 					children: [
-						/* @__PURE__ */ b("div", {
+						/* @__PURE__ */ S("div", {
 							className: "flex-1 min-w-0",
-							children: /* @__PURE__ */ b(A, { onClose: a })
+							children: /* @__PURE__ */ S(I, { onClose: a })
 						}),
-						/* @__PURE__ */ x("div", {
+						/* @__PURE__ */ C("div", {
 							className: "flex shrink-0 flex-col items-center",
 							children: [
-								/* @__PURE__ */ b("div", { className: "flex-1 w-px bg-[var(--oh-border)]" }),
-								/* @__PURE__ */ b("span", {
+								/* @__PURE__ */ S("div", { className: "flex-1 w-px bg-[var(--oh-border)]" }),
+								/* @__PURE__ */ S("span", {
 									className: "py-3 text-xs uppercase text-[var(--oh-muted)]",
 									children: o(t.BACKEND$LOGIN_OR)
 								}),
-								/* @__PURE__ */ b("div", { className: "flex-1 w-px bg-[var(--oh-border)]" })
+								/* @__PURE__ */ S("div", { className: "flex-1 w-px bg-[var(--oh-border)]" })
 							]
 						}),
-						/* @__PURE__ */ b("div", {
+						/* @__PURE__ */ S("div", {
 							className: "flex-1 min-w-0",
-							children: /* @__PURE__ */ b(j, { onClose: a })
+							children: /* @__PURE__ */ S(L, { onClose: a })
 						})
 					]
 				})
@@ -387,23 +450,23 @@ function M({ mode: r, backend: i, onClose: a }) {
 		})
 	});
 	let s = "edit-backend";
-	return /* @__PURE__ */ b(c, {
+	return /* @__PURE__ */ S(c, {
 		onClose: a,
 		closeOnEscape: !1,
 		"aria-label": o(t.BACKEND$EDIT_TITLE),
-		children: /* @__PURE__ */ x("div", {
+		children: /* @__PURE__ */ C("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")),
 			children: [
-				/* @__PURE__ */ b(d, {
+				/* @__PURE__ */ S(p, {
 					onClose: a,
 					testId: `${s}-close`
 				}),
-				/* @__PURE__ */ b("h2", {
-					className: "pr-6 text-lg font-semibold",
+				/* @__PURE__ */ S("h2", {
+					className: n("pr-6", d),
 					children: o(t.BACKEND$EDIT_TITLE)
 				}),
-				/* @__PURE__ */ b(O, {
+				/* @__PURE__ */ S(P, {
 					mode: "edit",
 					backend: i,
 					onSubmitted: a,
@@ -414,6 +477,6 @@ function M({ mode: r, backend: i, onClose: a }) {
 	});
 }
 //#endregion
-export { M as BackendFormModal };
+export { R as BackendFormModal };
 
 //# sourceMappingURL=backend-form-modal.js.map