@openhands/agent-canvas 1.7.2 → 1.9.0

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

@@ -1,52 +1,58 @@
 import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../i18n/declaration.js";
-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 { isOpenHandsCloudHost as a } from "../../../node_modules/@openhands/typescript-client/dist/client/device-flow-client.js";
+import { ChevronDown as n } from "../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+import { Globe as r } from "../../../node_modules/lucide-react/dist/esm/icons/globe.js";
+import { Info as i } from "../../../node_modules/lucide-react/dist/esm/icons/info.js";
+import { Monitor as a } from "../../../node_modules/lucide-react/dist/esm/icons/monitor.js";
+import { cn as o } from "../../../utils/utils.js";
+import { useNavigation as s } from "../../../context/navigation-context.js";
+import { ServerClient as c } from "../../../node_modules/@openhands/typescript-client/dist/client/server-client.js";
+import { isOpenHandsCloudHost as l } from "../../../node_modules/@openhands/typescript-client/dist/client/device-flow-client.js";
 import "../../../node_modules/@openhands/typescript-client/dist/clients.js";
-import { getLockedCloudHost as o } from "../../../api/agent-server-config.js";
-import { getUserFacingConnectionErrorMessage as s } from "../../../utils/user-facing-error.js";
-import { getAgentServerClientOptions as c } from "../../../api/agent-server-client-options.js";
-import { assertAgentServerVersionIsSupported as l, getDisplayAgentServerVersion as u } from "../../../api/agent-server-compatibility.js";
-import { useQuery as d } from "../../../node_modules/@tanstack/react-query/build/modern/useQuery.js";
-import { useActiveBackendContext as f } from "../../../contexts/active-backend-context.js";
-import { useTracking as p } from "../../../hooks/use-tracking.js";
-import { ModalBackdrop as m } from "../../shared/modals/modal-backdrop.js";
-import { MODAL_MAX_WIDTH_VIEWPORT as h, modalWidthClassName as g } from "../../shared/modals/modal-body.js";
-import { modalTitleLgClassName as _, modalTitleLgMediumClassName as v } from "../../../utils/modal-classes.js";
-import { ModalCloseButton as y } from "../../shared/modals/modal-close-button.js";
-import { BrandButton as b } from "../settings/brand-button.js";
-import { SettingsInput as x } from "../settings/settings-input.js";
-import { useBackendsHealth as S } from "../../../hooks/query/use-backends-health.js";
-import C from "../../../assets/branding/openhands-logo-white.js";
-import { SegmentedToggle as w } from "../files-tab/segmented-toggle.js";
+import { getLockedCloudHost as u } from "../../../api/agent-server-config.js";
+import { getUserFacingConnectionErrorMessage as d } from "../../../utils/user-facing-error.js";
+import { getAgentServerClientOptions as f } from "../../../api/agent-server-client-options.js";
+import { assertAgentServerVersionIsSupported as p, getDisplayAgentServerVersion as m } from "../../../api/agent-server-compatibility.js";
+import { useQuery as h } from "../../../node_modules/@tanstack/react-query/build/modern/useQuery.js";
+import { useActiveBackendContext as g } from "../../../contexts/active-backend-context.js";
+import { useTracking as _ } from "../../../hooks/use-tracking.js";
+import { ModalBackdrop as v } from "../../shared/modals/modal-backdrop.js";
+import { MODAL_MAX_WIDTH_VIEWPORT as y, modalWidthClassName as b } from "../../shared/modals/modal-body.js";
+import { modalTitleLgClassName as x, modalTitleLgMediumClassName as S } from "../../../utils/modal-classes.js";
+import { ModalCloseButton as C } from "../../shared/modals/modal-close-button.js";
+import { BrandButton as w } from "../settings/brand-button.js";
+import { SettingsInput as T } from "../settings/settings-input.js";
+import { useBackendsHealth as E } from "../../../hooks/query/use-backends-health.js";
+import D from "../../../assets/branding/openhands-logo-white.js";
+import { SegmentedToggle as O } from "../files-tab/segmented-toggle.js";
 import "../../../api/device-flow-client.js";
-import T from "../../../icons/chevron-down-small.js";
-import { getBackendStatusLabel as E } from "./backend-status-label.js";
-import { BackendStatusDot as D } from "./backend-status-dot.js";
-import { DeviceFlowAuth as O } from "./device-flow-auth.js";
-import k from "react";
-import { jsx as A, jsxs as j } from "react/jsx-runtime";
+import k from "../../../icons/chevron-down-small.js";
+import A from "../../../icons/external-link.js";
+import j from "../../../icons/server.js";
+import { getBackendStatusLabel as M } from "./backend-status-label.js";
+import { BackendStatusDot as N } from "./backend-status-dot.js";
+import { DeviceFlowAuth as P } from "./device-flow-auth.js";
+import F from "react";
+import { jsx as I, jsxs as L } from "react/jsx-runtime";
 //#region src/components/features/backends/backend-form-modal.tsx
-function M(e) {
-	return a(e) ? "cloud" : "local";
+function R(e) {
+	return l(e) ? "cloud" : "local";
 }
-function N(e) {
+function z(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 P(e) {
+function B(e) {
 	let t = e.trim().replace(/\/+$/, "");
 	if (!t) return "";
 	if (/^https?:\/\//i.test(t)) return t;
 	let n = t.match(/^\[([^\]]+)\]/);
-	return `${N(n ? n[1] : (t.match(/:/g) ?? []).length > 1 ? t : t.split(":")[0]) ? "http" : "https"}://${t}`;
+	return `${z(n ? n[1] : (t.match(/:/g) ?? []).length > 1 ? t : t.split(":")[0]) ? "http" : "https"}://${t}`;
 }
-function F(e) {
+function V(e) {
 	let t = e.trim();
 	if (!t || /\s/.test(t)) return !1;
-	let n = P(t);
+	let n = B(t);
 	if (!n) return !1;
 	try {
 		let e = new URL(n);
@@ -55,537 +61,741 @@ function F(e) {
 		return !1;
 	}
 }
-var I = "https://app.all-hands.dev";
-function L(e, n) {
+var H = "https://app.all-hands.dev", U = "agent-canvas --backend-only --port 8001", W = "https://github.com/OpenHands/OpenHands/blob/main/docs/DEVELOPMENT.md#alternative-development-workflows", G = "https://github.com/OpenHands/OpenHands/blob/main/docs/SELF_HOSTING.md", K = "https://docs.openhands.dev/overview/introduction";
+function q(e, n) {
 	return e(t.BACKEND$CONNECTION_TEST_FAILED, {
 		host: n,
 		interpolation: { escapeValue: !1 }
 	});
 }
-function R(e) {
-	return s(e);
+function J(e) {
+	return d(e);
 }
-function z(e, t) {
-	let n = R(t);
+function Y(e, t) {
+	let n = J(t);
 	return n ? `${e}\n${n}` : e;
 }
-async function B(e) {
+async function X(e) {
 	if (e.kind !== "local") return { agentServerVersion: null };
-	let t = await new i(c({
+	let t = await new c(f({
 		host: e.host,
 		sessionApiKey: e.apiKey || null,
 		timeout: 5e3
 	})).getServerInfo();
-	return l(t), { agentServerVersion: u(t) };
+	return p(t), { agentServerVersion: m(t) };
 }
-function V({ backend: n, testIdRoot: r }) {
-	let { t: a } = e("openhands"), o = S([n])[n.id], s = o?.isConnected ?? null, l = o?.disabled === !0, f = o?.consecutiveFailures ?? 0, p = o?.lastError ?? null, { data: m } = d({
+function ee({ backend: n, testIdRoot: r }) {
+	let { t: i } = e("openhands"), a = E([n])[n.id], o = a?.isConnected ?? null, s = a?.disabled === !0, l = a?.consecutiveFailures ?? 0, u = a?.lastError ?? null, { data: d } = h({
 		queryKey: [
 			"backend-version",
 			n.host,
 			n.apiKey
 		],
-		queryFn: async () => u(await new i(c({
+		queryFn: async () => m(await new c(f({
 			host: n.host,
 			sessionApiKey: n.apiKey || null,
 			timeout: 5e3
 		})).getServerInfo()),
 		retry: !1,
 		staleTime: 6e4,
-		enabled: n.kind === "local" && !l
-	}), h = E(a, n, o), g = n.kind === "cloud" ? a(t.BACKEND$KIND_CLOUD) : a(t.BACKEND$KIND_LOCAL);
-	return /* @__PURE__ */ j("div", {
+		enabled: n.kind === "local" && !s
+	}), p = M(i, n, a), g = n.kind === "cloud" ? i(t.BACKEND$KIND_CLOUD) : i(t.BACKEND$KIND_LOCAL);
+	return /* @__PURE__ */ L("div", {
 		className: "flex flex-col gap-2",
-		children: [/* @__PURE__ */ j("div", {
+		children: [/* @__PURE__ */ L("div", {
 			"data-testid": `${r}-status`,
 			className: "flex items-center gap-3 text-sm",
 			children: [
-				/* @__PURE__ */ A(D, { isConnected: s }),
-				/* @__PURE__ */ A("span", {
+				/* @__PURE__ */ I(N, { isConnected: o }),
+				/* @__PURE__ */ I("span", {
 					className: "text-white",
 					"data-testid": `${r}-status-label`,
-					children: h
+					children: p
 				}),
-				/* @__PURE__ */ A("span", {
+				/* @__PURE__ */ I("span", {
 					className: "text-tertiary-alt",
 					children: "·"
 				}),
-				/* @__PURE__ */ A("span", {
+				/* @__PURE__ */ I("span", {
 					className: "text-[var(--oh-text-tertiary)]",
 					children: g
 				}),
-				m ? /* @__PURE__ */ A("span", {
+				d ? /* @__PURE__ */ I("span", {
 					className: "text-xs text-[var(--oh-muted)]",
 					"data-testid": `${r}-version`,
-					children: a(t.BACKEND$VERSION_LABEL, { version: m })
+					children: i(t.BACKEND$VERSION_LABEL, { version: d })
 				}) : null
 			]
-		}), l ? /* @__PURE__ */ j("div", {
+		}), s ? /* @__PURE__ */ L("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__ */ A("span", {
+				/* @__PURE__ */ I("span", {
 					className: "font-semibold text-red-300",
-					children: a(t.BACKEND$HEALTH_FAILED_TITLE)
+					children: i(t.BACKEND$HEALTH_FAILED_TITLE)
 				}),
-				/* @__PURE__ */ A("span", {
+				/* @__PURE__ */ I("span", {
 					className: "text-xs text-[var(--oh-text-tertiary)]",
-					children: a(t.BACKEND$HEALTH_FAILED_DETAIL, { count: f })
+					children: i(t.BACKEND$HEALTH_FAILED_DETAIL, { count: l })
 				}),
-				p ? /* @__PURE__ */ A("span", {
+				u ? /* @__PURE__ */ I("span", {
 					"data-testid": `${r}-status-error-message`,
 					className: "text-xs text-red-300 whitespace-pre-wrap break-words",
-					children: p
+					children: u
 				}) : null
 			]
 		}) : null]
 	});
 }
-function H({ initialName: t = "", initialHost: n = "", initialApiKey: r = "", onTestConnection: i, onSuccess: a, requireApiKey: o = !1, onSubmitOverride: s }) {
-	let { t: c } = e("openhands"), [l, u] = k.useState(t), [d, f] = k.useState(n), [p, m] = k.useState(r), [h, g] = k.useState(null), [_, v] = k.useState(!1), [y, b] = k.useState(null), x = y ?? M(d), S = o || x !== "local", C = l.trim().length > 0 && F(d) && (!S || p.trim().length > 0);
+function Z({ initialName: t = "", initialHost: n = "", initialApiKey: r = "", onTestConnection: i, onSuccess: a, requireApiKey: o = !1, onSubmitOverride: s, fixedKind: c }) {
+	let { t: l } = e("openhands"), [u, d] = F.useState(t), [f, p] = F.useState(n), [m, h] = F.useState(r), [g, _] = F.useState(null), [v, y] = F.useState(!1), [b, x] = F.useState(null), S = c ?? b ?? R(f), C = o || S !== "local", w = u.trim().length > 0 && V(f) && (!C || m.trim().length > 0);
 	return {
-		name: l,
-		setName: u,
-		host: d,
-		setHost: f,
-		apiKey: p,
-		setApiKey: m,
-		connectionError: h,
-		setConnectionError: g,
-		isSubmitting: _,
-		kind: x,
-		setKind: b,
-		canSubmit: C,
-		handleSubmit: k.useCallback(async (e) => {
-			if (e.preventDefault(), !C || _) return;
+		name: u,
+		setName: d,
+		host: f,
+		setHost: p,
+		apiKey: m,
+		setApiKey: h,
+		connectionError: g,
+		setConnectionError: _,
+		isSubmitting: v,
+		kind: S,
+		setKind: x,
+		canSubmit: w,
+		handleSubmit: F.useCallback(async (e) => {
+			if (e.preventDefault(), !w || v) return;
 			let t = {
-				name: l.trim(),
-				host: P(d),
-				apiKey: p.trim(),
-				kind: x
+				name: u.trim(),
+				host: B(f),
+				apiKey: m.trim(),
+				kind: S
 			};
-			g(null), v(!0);
+			_(null), y(!0);
 			try {
 				s ? await s(t) : a(await i(t));
 			} catch (e) {
-				g(z(L(c, t.host), e));
+				_(Y(q(l, t.host), e));
 			} finally {
-				v(!1);
+				y(!1);
 			}
 		}, [
-			C,
-			_,
-			l,
-			d,
-			p,
-			x,
+			w,
+			v,
+			u,
+			f,
+			m,
+			S,
 			i,
 			a,
 			o,
 			s,
-			c
+			c,
+			l
 		])
 	};
 }
-function U({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot: s, hostReadOnly: c, requireApiKey: l, hideConfigurationFields: u = !1, onSubmitOverride: d }) {
-	let { t: p } = e("openhands"), { addBackend: m, updateBackend: h } = f(), g = r === "edit" && i ? i.kind : null, { name: _, setName: v, host: y, setHost: S, apiKey: C, setApiKey: w, connectionError: T, setConnectionError: E, isSubmitting: D, kind: O, handleSubmit: M } = H({
-		initialName: i?.name ?? "",
-		initialHost: i?.host ?? "",
-		initialApiKey: i?.apiKey ?? "",
-		onTestConnection: B,
+function te({ mode: n, backend: r, onSubmitted: i, renderActions: a, testIdRoot: s, hostReadOnly: c, requireApiKey: l, hideConfigurationFields: u = !1, onSubmitOverride: d }) {
+	let { t: f } = e("openhands"), { addBackend: p, updateBackend: m } = g(), h = n === "edit" && r ? r.kind : null, { name: _, setName: v, host: y, setHost: b, apiKey: x, setApiKey: S, connectionError: C, setConnectionError: E, isSubmitting: D, kind: O, handleSubmit: k } = Z({
+		initialName: r?.name ?? "",
+		initialHost: r?.host ?? "",
+		initialApiKey: r?.apiKey ?? "",
+		onTestConnection: X,
 		onSuccess: async () => {
 			let e = {
 				name: _.trim(),
-				host: P(y),
-				apiKey: C.trim(),
-				kind: g ?? O
+				host: B(y),
+				apiKey: x.trim(),
+				kind: h ?? O
 			};
-			r === "edit" && i ? h(i.id, e) : m(e), a();
+			n === "edit" && r ? m(r.id, e) : p(e), i();
 		},
 		requireApiKey: l,
 		onSubmitOverride: d
-	}), [N, L] = k.useState(!1), [R, z] = k.useState(!1), U = g ?? O, W = s ?? (r === "edit" ? "edit-backend" : "add-backend"), G = l || U !== "local", K = _.trim().length > 0 && F(y) && (!G || C.trim().length > 0), q = N && !_.trim() ? p(t.BACKEND$NAME_REQUIRED) : void 0, J = R ? y.trim() ? F(y) ? void 0 : p(t.BACKEND$HOST_INVALID) : p(t.BACKEND$HOST_REQUIRED) : void 0;
-	return /* @__PURE__ */ j("form", {
-		"data-testid": `${W}-form`,
+	}), [A, j] = F.useState(!1), [M, N] = F.useState(!1), P = h ?? O, R = s ?? (n === "edit" ? "edit-backend" : "add-backend"), z = l || P !== "local", U = _.trim().length > 0 && V(y) && (!z || x.trim().length > 0), W = A && !_.trim() ? f(t.BACKEND$NAME_REQUIRED) : void 0, G = M ? y.trim() ? V(y) ? void 0 : f(t.BACKEND$HOST_INVALID) : f(t.BACKEND$HOST_REQUIRED) : void 0;
+	return /* @__PURE__ */ L("form", {
+		"data-testid": `${R}-form`,
 		onSubmit: async (e) => {
-			if (!K) {
-				L(!0), z(!0);
+			if (!U) {
+				j(!0), N(!0);
 				return;
 			}
-			await M(e);
+			await k(e);
 		},
 		className: "flex flex-col gap-4",
-		children: [/* @__PURE__ */ j("div", {
-			"data-testid": `${W}-configuration-fields`,
-			className: n("flex flex-col gap-4", u && "hidden"),
+		children: [/* @__PURE__ */ L("div", {
+			"data-testid": `${R}-configuration-fields`,
+			className: o("flex flex-col gap-4", u && "hidden"),
 			children: [
-				/* @__PURE__ */ A(x, {
-					testId: `${W}-name`,
-					name: `${W}-name`,
+				/* @__PURE__ */ I(T, {
+					testId: `${R}-name`,
+					name: `${R}-name`,
 					type: "text",
-					label: p(t.BACKEND$NAME_LABEL),
+					label: f(t.BACKEND$NAME_LABEL),
 					value: _,
 					onChange: (e) => {
 						v(e), E(null);
 					},
-					onBlur: () => L(!0),
+					onBlur: () => j(!0),
 					placeholder: "Production",
 					className: "w-full",
 					showRequiredTag: !0,
-					error: q
+					error: W
 				}),
-				/* @__PURE__ */ A(x, {
-					testId: `${W}-host`,
-					name: `${W}-host`,
+				/* @__PURE__ */ I(T, {
+					testId: `${R}-host`,
+					name: `${R}-host`,
 					type: "text",
-					label: p(t.BACKEND$HOST_LABEL),
+					label: f(t.BACKEND$HOST_LABEL),
 					value: y,
 					onChange: c ? void 0 : (e) => {
-						S(e), E(null);
+						b(e), E(null);
 					},
-					onBlur: () => z(!0),
-					placeholder: I,
+					onBlur: () => N(!0),
+					placeholder: H,
 					className: "w-full",
 					showRequiredTag: !0,
-					error: J,
+					error: G,
 					isDisabled: c
 				}),
-				/* @__PURE__ */ A(x, {
-					testId: `${W}-api-key`,
-					name: `${W}-api-key`,
+				/* @__PURE__ */ I(T, {
+					testId: `${R}-api-key`,
+					name: `${R}-api-key`,
 					type: "password",
-					label: p(t.BACKEND$KEY_LABEL),
-					value: C,
+					label: f(t.BACKEND$KEY_LABEL),
+					value: x,
 					onChange: (e) => {
-						w(e), E(null);
+						S(e), E(null);
 					},
 					placeholder: "",
 					className: "w-full"
 				}),
-				T ? /* @__PURE__ */ A("div", {
+				C ? /* @__PURE__ */ I("div", {
 					role: "alert",
-					"data-testid": `${W}-error`,
+					"data-testid": `${R}-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: T
+					children: C
 				}) : null,
-				r === "edit" && i && /* @__PURE__ */ A(V, {
-					backend: i,
-					testIdRoot: W
+				n === "edit" && r && /* @__PURE__ */ I(ee, {
+					backend: r,
+					testIdRoot: R
 				})
 			]
-		}), o ? o({
-			canSubmit: K && !D,
+		}), a ? a({
+			canSubmit: U && !D,
 			isSubmitting: D,
-			testIdRoot: W
-		}) : /* @__PURE__ */ j("div", {
+			testIdRoot: R
+		}) : /* @__PURE__ */ L("div", {
 			className: "flex justify-end gap-2 mt-2 w-full",
-			children: [/* @__PURE__ */ A(b, {
+			children: [/* @__PURE__ */ I(w, {
 				type: "button",
 				variant: "secondary",
-				onClick: a,
-				testId: `${W}-cancel`,
-				children: p(t.BUTTON$CANCEL)
-			}), /* @__PURE__ */ A(b, {
+				onClick: i,
+				testId: `${R}-cancel`,
+				children: f(t.BUTTON$CANCEL)
+			}), /* @__PURE__ */ I(w, {
 				type: "submit",
 				variant: "primary",
-				isDisabled: !K || D,
-				testId: `${W}-submit`,
-				children: p(t.BACKEND$SAVE)
+				isDisabled: !U || D,
+				testId: `${R}-submit`,
+				children: f(t.BACKEND$SAVE)
 			})]
 		})]
 	});
 }
-function W() {
-	let { currentPath: e, navigate: t } = r();
-	return k.useCallback(() => {
+function ne() {
+	let { currentPath: e, navigate: t } = s();
+	return F.useCallback(() => {
 		/^\/automations\/[^/]+/.test(e) ? t("/automations") : /^\/conversations\/[^/]+/.test(e) && t("/conversations");
 	}, [e, t]);
 }
-function G({ onConnected: n, testIdRoot: r = "add-backend", initialManualBackend: i, requireManualApiKey: a = !1, manualSubmitLabel: s, manualSubmittingLabel: c, manualSubmitTestId: l, analyticsSource: u }) {
-	let { t: d } = e("openhands"), f = o();
-	return f ? /* @__PURE__ */ A("div", {
-		"data-testid": `${r}-connection-options`,
-		className: "flex justify-center",
-		children: /* @__PURE__ */ A("div", {
-			className: "w-full",
-			children: /* @__PURE__ */ A(q, {
-				onConnected: n,
-				testIdRoot: r,
-				lockedHost: f,
-				analyticsSource: u
-			})
-		})
-	}) : /* @__PURE__ */ j("div", {
-		"data-testid": `${r}-connection-options`,
-		className: "flex flex-col gap-6 md:flex-row",
-		children: [/* @__PURE__ */ A("div", {
-			className: "flex-1 min-w-0",
-			children: /* @__PURE__ */ A(K, {
-				onConnected: n,
-				testIdRoot: r,
-				initialBackend: i,
-				requireApiKey: a,
-				submitLabel: s ?? d(t.BACKEND$CONNECT),
-				submittingLabel: c ?? d(t.ONBOARDING$BACKEND_STATUS_CHECKING),
-				submitTestId: l
-			})
-		}), /* @__PURE__ */ A("div", {
-			className: "flex-1 min-w-0",
-			children: /* @__PURE__ */ A(q, {
-				onConnected: n,
-				testIdRoot: r,
-				analyticsSource: u
-			})
-		})]
-	});
-}
-function K({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a, submitLabel: o, submittingLabel: s, submitTestId: c }) {
-	let { t: l } = e("openhands"), { name: u, setName: d, host: f, setHost: p, apiKey: m, setApiKey: h, connectionError: g, setConnectionError: _, isSubmitting: v, kind: y, setKind: S, canSubmit: C, handleSubmit: T } = H({
+function re({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a, submitLabel: o, submittingLabel: s, submitTestId: c, fixedKind: l, showKindSelector: u = !0 }) {
+	let { t: d } = e("openhands"), { name: f, setName: p, host: m, setHost: h, apiKey: g, setApiKey: _, connectionError: v, setConnectionError: y, isSubmitting: b, kind: x, setKind: S, canSubmit: C, handleSubmit: E } = Z({
 		initialName: i?.name ?? "",
 		initialHost: i?.host ?? "",
 		initialApiKey: i?.apiKey ?? "",
-		onTestConnection: B,
+		onTestConnection: X,
 		onSuccess: (e) => {
 			n({
-				name: u.trim(),
-				host: P(f),
-				apiKey: m.trim(),
-				kind: y
+				name: f.trim(),
+				host: B(m),
+				apiKey: g.trim(),
+				kind: x
 			}, "manual", e);
 		},
-		requireApiKey: a
+		requireApiKey: a,
+		fixedKind: l
 	});
-	return /* @__PURE__ */ j("form", {
+	return /* @__PURE__ */ L("form", {
 		"data-testid": `${r}-form`,
-		onSubmit: T,
+		onSubmit: E,
 		className: "flex flex-col gap-4 flex-1 min-w-0",
 		children: [
-			/* @__PURE__ */ j("div", {
-				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ A(x, {
-					testId: `${r}-name`,
-					name: `${r}-name`,
-					type: "text",
-					label: l(t.BACKEND$NAME_LABEL),
-					value: u,
-					onChange: (e) => {
-						d(e), _(null);
-					},
-					placeholder: "e.g. My Server",
-					className: "w-full"
-				}), /* @__PURE__ */ A("p", {
-					className: "text-xs text-[var(--oh-muted)]",
-					children: l(t.BACKEND$NAME_HELPER)
-				})]
+			/* @__PURE__ */ I(T, {
+				testId: `${r}-name`,
+				name: `${r}-name`,
+				type: "text",
+				label: d(t.BACKEND$NAME_LABEL),
+				hint: d(t.BACKEND$NAME_HELPER),
+				value: f,
+				onChange: (e) => {
+					p(e), y(null);
+				},
+				placeholder: "e.g. My Server",
+				className: "w-full"
 			}),
-			/* @__PURE__ */ j("div", {
-				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ A(x, {
-					testId: `${r}-host`,
-					name: `${r}-host`,
-					type: "text",
-					label: l(t.BACKEND$HOST_LABEL),
-					value: f,
-					onChange: (e) => {
-						p(e), _(null);
-					},
-					placeholder: "http://localhost:8000",
-					className: "w-full"
-				}), /* @__PURE__ */ A("p", {
-					className: "text-xs text-[var(--oh-muted)]",
-					"data-testid": `${r}-host-helper`,
-					children: l(t.BACKEND$HOST_HELPER)
-				})]
+			/* @__PURE__ */ I(T, {
+				testId: `${r}-host`,
+				name: `${r}-host`,
+				type: "text",
+				label: d(t.BACKEND$HOST_LABEL),
+				hint: d(t.BACKEND$HOST_HELPER),
+				value: m,
+				onChange: (e) => {
+					h(e), y(null);
+				},
+				placeholder: "http://localhost:8000",
+				className: "w-full"
 			}),
-			/* @__PURE__ */ j("div", {
+			u ? /* @__PURE__ */ L("div", {
 				className: "flex flex-col items-start gap-2.5",
-				children: [/* @__PURE__ */ A("span", {
+				children: [/* @__PURE__ */ I("span", {
 					className: "text-sm",
-					children: l(t.BACKEND$KIND_LABEL)
-				}), /* @__PURE__ */ A(w, {
-					value: y,
+					children: d(t.BACKEND$KIND_LABEL)
+				}), /* @__PURE__ */ I(O, {
+					value: x,
 					options: [{
 						value: "local",
-						label: l(t.BACKEND$KIND_LOCAL)
+						label: d(t.BACKEND$KIND_LOCAL)
 					}, {
 						value: "cloud",
-						label: l(t.BACKEND$KIND_CLOUD)
+						label: d(t.BACKEND$KIND_CLOUD)
 					}],
 					onChange: (e) => S(e),
-					ariaLabel: l(t.BACKEND$KIND_LABEL),
+					ariaLabel: d(t.BACKEND$KIND_LABEL),
 					testId: `${r}-kind`
 				})]
-			}),
-			/* @__PURE__ */ A(x, {
+			}) : null,
+			/* @__PURE__ */ I(T, {
 				testId: `${r}-api-key`,
 				name: `${r}-api-key`,
 				type: "password",
-				label: l(t.BACKEND$KEY_LABEL),
-				value: m,
+				label: d(t.BACKEND$KEY_LABEL),
+				value: g,
 				onChange: (e) => {
-					h(e), _(null);
+					_(e), y(null);
 				},
 				placeholder: "sk-••••••••••",
 				className: "w-full"
 			}),
-			g ? /* @__PURE__ */ A("div", {
+			v ? /* @__PURE__ */ I("div", {
 				role: "alert",
 				"data-testid": `${r}-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: g
+				children: v
 			}) : null,
-			/* @__PURE__ */ A(b, {
+			/* @__PURE__ */ I(w, {
 				type: "submit",
 				variant: "secondary",
-				isDisabled: !C || v,
+				isDisabled: !C || b,
 				testId: c ?? `${r}-submit`,
 				className: "w-full text-center",
-				children: v ? s : o
+				children: b ? s : o
 			})
 		]
 	});
 }
-function q({ onConnected: r, testIdRoot: i, lockedHost: a, analyticsSource: o }) {
-	let { t: s } = e("openhands"), [c, l] = k.useState(!1), [u, d] = k.useState(""), f = a ?? (u.trim() || I);
-	return /* @__PURE__ */ j("div", {
-		className: "flex flex-1 min-w-0 flex-col items-center gap-3 pb-8",
-		children: [
-			/* @__PURE__ */ j("div", {
-				className: "flex flex-col items-center gap-1",
-				children: [/* @__PURE__ */ A(C, {
-					width: 56,
-					height: 56,
-					"aria-hidden": !0
-				}), /* @__PURE__ */ A("h4", {
-					className: v,
-					"data-testid": `${i}-cloud-title`,
-					children: s(t.BACKEND$CLOUD_TITLE)
-				})]
-			}),
-			/* @__PURE__ */ A("p", {
+function Q({ onConnected: n, testIdRoot: r, lockedHost: i, analyticsSource: a, showBranding: s = !0 }) {
+	let { t: c } = e("openhands"), [l, u] = F.useState(!1), [d, f] = F.useState(""), p = `${r}-advanced-panel`, m = i ?? (d.trim() || H);
+	return /* @__PURE__ */ L("div", {
+		className: "flex w-full min-w-0 flex-col items-center gap-3",
+		children: [s ? /* @__PURE__ */ L("div", {
+			className: "flex flex-col items-center gap-1",
+			children: [/* @__PURE__ */ I(D, {
+				width: 56,
+				height: 56,
+				"aria-hidden": !0
+			}), /* @__PURE__ */ I("h4", {
+				className: S,
+				"data-testid": `${r}-cloud-title`,
+				children: c(t.BACKEND$CLOUD_TITLE)
+			})]
+		}) : null, /* @__PURE__ */ I(P, {
+			host: m,
+			onSuccess: (e) => {
+				n({
+					name: "OpenHands Cloud",
+					host: B(m),
+					apiKey: e,
+					kind: "cloud"
+				}, "cloud_login");
+			},
+			testIdRoot: r,
+			analyticsSource: a,
+			className: "w-full items-center",
+			idleDescription: /* @__PURE__ */ I("p", {
 				className: "text-center text-sm leading-relaxed text-[var(--oh-muted)]",
-				children: s(t.BACKEND$CLOUD_DESCRIPTION)
+				"data-testid": `${r}-cloud-description`,
+				children: c(t.BACKEND$CLOUD_DESCRIPTION)
 			}),
-			/* @__PURE__ */ A(O, {
-				host: f,
-				onSuccess: (e) => {
-					r({
-						name: "OpenHands Cloud",
-						host: P(f),
-						apiKey: e,
-						kind: "cloud"
-					}, "cloud_login");
-				},
-				testIdRoot: i,
-				analyticsSource: o
-			}),
-			a ? null : /* @__PURE__ */ j("div", {
-				className: "w-full",
-				children: [/* @__PURE__ */ j("button", {
+			idleFooter: i ? null : /* @__PURE__ */ L("div", {
+				className: "mx-auto w-full max-w-md",
+				children: [/* @__PURE__ */ L("button", {
 					type: "button",
-					onClick: () => l((e) => !e),
-					"aria-expanded": c,
-					"data-testid": `${i}-advanced-toggle`,
+					onClick: () => u((e) => !e),
+					"aria-expanded": l,
+					"aria-controls": p,
+					"data-testid": `${r}-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__ */ A("span", { children: s(t.BACKEND$ADVANCED) }), /* @__PURE__ */ A(T, {
-						className: n("h-4 w-4 shrink-0 text-muted transition-transform", c && "rotate-180"),
+					children: [/* @__PURE__ */ I("span", { children: c(t.BACKEND$ADVANCED) }), /* @__PURE__ */ I(k, {
+						className: o("h-4 w-4 shrink-0 text-muted transition-transform duration-200 ease-out", l && "rotate-180"),
 						"aria-hidden": !0
 					})]
-				}), /* @__PURE__ */ j("div", {
-					className: n("pt-2", !c && "pointer-events-none invisible"),
-					"aria-hidden": !c,
-					children: [/* @__PURE__ */ A(x, {
-						testId: `${i}-cloud-host`,
-						name: `${i}-cloud-host`,
-						type: "text",
-						label: s(t.BACKEND$HOST_LABEL),
-						value: u,
-						onChange: d,
-						placeholder: I,
-						className: "w-full"
-					}), /* @__PURE__ */ A("p", {
-						className: "mt-1 text-xs text-[var(--oh-muted)]",
-						children: s(t.BACKEND$LOGIN_CLOUD_HINT)
+				}), /* @__PURE__ */ I("div", {
+					className: o("grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none", l ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
+					children: /* @__PURE__ */ I("div", {
+						className: "overflow-hidden",
+						children: /* @__PURE__ */ L("div", {
+							id: p,
+							"data-testid": `${r}-advanced-panel`,
+							"aria-hidden": !l,
+							inert: l ? void 0 : !0,
+							className: o("pt-3 transition-opacity duration-200 ease-out motion-reduce:transition-none", l ? "opacity-100" : "opacity-0"),
+							children: [/* @__PURE__ */ I(T, {
+								testId: `${r}-cloud-host`,
+								name: `${r}-cloud-host`,
+								type: "text",
+								label: c(t.BACKEND$HOST_LABEL),
+								value: d,
+								onChange: f,
+								placeholder: H,
+								className: "w-full"
+							}), /* @__PURE__ */ I("p", {
+								className: "mt-1 text-xs text-[var(--oh-muted)]",
+								children: c(t.BACKEND$LOGIN_CLOUD_HINT)
+							})]
+						})
+					})
+				})]
+			})
+		})]
+	});
+}
+function $({ value: e, selectedValue: t, title: n, description: r, icon: i, onSelect: a, panelId: s, testId: c }) {
+	let l = e === t;
+	return /* @__PURE__ */ L("button", {
+		id: `${c}-tab`,
+		type: "button",
+		role: "tab",
+		"aria-selected": l,
+		"aria-controls": s,
+		"data-testid": c,
+		onClick: () => a(e),
+		className: o("relative flex min-h-16 w-full cursor-pointer items-center gap-3 px-3 py-3 text-left transition-colors", "first:border-r first:border-r-[var(--oh-border)]", "focus-visible:z-10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-300", l ? "bg-[var(--oh-surface-raised)] text-white after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-primary" : "text-[var(--oh-muted)] hover:bg-[var(--oh-surface-raised)] hover:text-white"),
+		children: [/* @__PURE__ */ I("span", {
+			className: "flex size-8 shrink-0 items-center justify-center",
+			"aria-hidden": !0,
+			children: i
+		}), /* @__PURE__ */ L("span", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ I("span", {
+				className: "block truncate text-sm font-medium",
+				children: n
+			}), /* @__PURE__ */ I("span", {
+				className: "mt-0.5 block text-xs leading-tight text-[var(--oh-muted)]",
+				children: r
+			})]
+		})]
+	});
+}
+function ie({ children: e }) {
+	let t = F.useRef(null), [n, r] = F.useState();
+	return F.useLayoutEffect(() => {
+		let e = t.current;
+		if (!e) return;
+		let n = () => {
+			let t = e.getBoundingClientRect().height;
+			r(t > 0 ? t : void 0);
+		};
+		if (n(), typeof ResizeObserver > "u") return;
+		let i = new ResizeObserver(n);
+		return i.observe(e), () => i.disconnect();
+	}, []), /* @__PURE__ */ I("div", {
+		"data-testid": "add-backend-panel-height",
+		style: n === void 0 ? void 0 : { height: n },
+		className: "overflow-hidden transition-[height] duration-300 ease-in-out motion-reduce:transition-none",
+		children: /* @__PURE__ */ I("div", {
+			ref: t,
+			children: e
+		})
+	});
+}
+function ae({ location: r }) {
+	let { t: a } = e("openhands"), [s, c] = F.useState(!1), l = r === "remote", u = a(l ? t.BACKEND$REMOTE_SETUP_TITLE : t.BACKEND$BEFORE_CONNECT_TITLE), d = a(l ? t.BACKEND$REMOTE_SETUP_DESCRIPTION : t.BACKEND$LOCAL_SETUP_DESCRIPTION), f = l ? G : W, p = a(l ? t.BACKEND$REMOTE_SETUP_DOCS : t.BACKEND$LOCAL_SETUP_DOCS), m = l ? "add-backend-remote" : "add-backend-local", h = `${m}-guidance-toggle`, g = `${m}-guidance-body`;
+	return /* @__PURE__ */ L("aside", {
+		"data-testid": `${m}-guidance`,
+		className: "rounded-lg bg-[var(--oh-surface-raised)] text-sm text-[var(--oh-muted)]",
+		children: [/* @__PURE__ */ I("h4", {
+			className: "text-white",
+			children: /* @__PURE__ */ L("button", {
+				id: h,
+				type: "button",
+				onClick: () => c((e) => !e),
+				"aria-expanded": s,
+				"aria-controls": g,
+				"data-testid": h,
+				className: o("flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg px-3 py-2 text-left font-medium", "transition-colors hover:bg-[var(--oh-interactive-hover)]", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-300"),
+				children: [/* @__PURE__ */ L("span", {
+					className: "flex min-w-0 items-center gap-2",
+					children: [/* @__PURE__ */ I(i, {
+						className: "size-4 shrink-0 text-[var(--oh-muted)]",
+						"aria-hidden": !0
+					}), /* @__PURE__ */ I("span", {
+						className: "truncate",
+						children: u
 					})]
+				}), /* @__PURE__ */ I(n, {
+					className: o("size-5 shrink-0 text-[var(--oh-muted)] transition-transform duration-200 ease-out", s && "rotate-180"),
+					"aria-hidden": !0
 				})]
 			})
-		]
+		}), /* @__PURE__ */ I("div", {
+			className: o("grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none", s ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
+			children: /* @__PURE__ */ I("div", {
+				className: "overflow-hidden",
+				children: /* @__PURE__ */ L("div", {
+					id: g,
+					"data-testid": g,
+					role: "region",
+					"aria-labelledby": h,
+					"aria-hidden": !s,
+					inert: s ? void 0 : !0,
+					className: o("flex flex-col gap-2 px-3 pb-3 transition-opacity duration-200 ease-out motion-reduce:transition-none", s ? "opacity-100" : "opacity-0"),
+					children: [
+						/* @__PURE__ */ I("p", {
+							className: "leading-5",
+							children: d
+						}),
+						l ? /* @__PURE__ */ L("div", { children: [/* @__PURE__ */ I("h5", {
+							className: "font-medium text-white",
+							children: a(t.BACKEND$REMOTE_CONNECTION_TITLE)
+						}), /* @__PURE__ */ I("p", {
+							className: "mt-1 leading-5",
+							children: a(t.BACKEND$REMOTE_CONNECTION_DESCRIPTION)
+						})] }) : /* @__PURE__ */ I("code", {
+							className: "block break-words font-mono text-xs text-white",
+							children: U
+						}),
+						/* @__PURE__ */ L("a", {
+							href: f,
+							target: "_blank",
+							rel: "noopener noreferrer",
+							"data-testid": `${m}-docs-link`,
+							tabIndex: s ? void 0 : -1,
+							className: "inline-flex w-fit items-center gap-1.5 text-primary hover:underline",
+							children: [/* @__PURE__ */ I("span", { children: p }), /* @__PURE__ */ I(A, {
+								className: "size-4 shrink-0",
+								"aria-hidden": !0
+							})]
+						})
+					]
+				})
+			})
+		})]
 	});
 }
-function J({ onClose: e, source: t }) {
-	let { addBackend: n } = f(), r = W(), { trackBackendAdded: i } = p();
-	return /* @__PURE__ */ A(G, {
-		onConnected: k.useCallback((a, o, s) => {
-			n(a), i({
-				backendKind: a.kind,
-				connectionMethod: o,
-				hasApiKey: !!a.apiKey,
-				source: t,
-				agentServerVersion: s?.agentServerVersion
-			}), r(), e();
-		}, [
-			n,
-			r,
-			e,
-			i,
-			t
-		]),
+function oe({ onConnected: n, source: i }) {
+	let { t: s } = e("openhands"), [c, l] = F.useState("cloud"), [u, d] = F.useState("local"), f = "add-backend-selected-panel", p = `add-backend-option-${c}-tab`, m = c === "cloud";
+	return /* @__PURE__ */ L("div", {
+		"data-testid": "add-backend-chooser",
+		className: "flex flex-col",
+		children: [/* @__PURE__ */ L("div", {
+			role: "tablist",
+			"aria-label": s(t.BACKEND$CHOOSER_TITLE),
+			className: "grid grid-cols-2 overflow-hidden rounded-lg border border-[var(--oh-border)]",
+			children: [/* @__PURE__ */ I($, {
+				value: "cloud",
+				selectedValue: c,
+				title: s(t.BACKEND$CLOUD_TITLE),
+				description: s(t.BACKEND$CLOUD_OPTION_DESCRIPTION),
+				icon: /* @__PURE__ */ I(D, {
+					width: 32,
+					height: 32,
+					"data-testid": "add-backend-option-cloud-logo"
+				}),
+				onSelect: l,
+				panelId: f,
+				testId: "add-backend-option-cloud"
+			}), /* @__PURE__ */ I($, {
+				value: "agent-server",
+				selectedValue: c,
+				title: s(t.BACKEND$AGENT_SERVER_TITLE),
+				description: s(t.BACKEND$AGENT_SERVER_OPTION_DESCRIPTION),
+				icon: /* @__PURE__ */ I(j, { className: "size-6" }),
+				onSelect: l,
+				panelId: f,
+				testId: "add-backend-option-agent-server"
+			})]
+		}), /* @__PURE__ */ I("div", {
+			className: "mt-6",
+			children: /* @__PURE__ */ I(ie, { children: /* @__PURE__ */ I("section", {
+				id: f,
+				role: "tabpanel",
+				"aria-labelledby": p,
+				className: "min-w-0",
+				children: m ? /* @__PURE__ */ I("div", {
+					"data-testid": "add-backend-cloud-panel",
+					className: o("relative isolate flex min-h-[13.5rem] w-full items-center justify-center rounded-xl border border-[var(--oh-border)] px-5 py-6", "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-xl", "before:bg-[radial-gradient(75%_75%_at_50%_50%,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0)_70%)]"),
+					children: /* @__PURE__ */ I(Q, {
+						onConnected: n,
+						testIdRoot: "add-backend",
+						analyticsSource: i,
+						showBranding: !1
+					})
+				}) : /* @__PURE__ */ L("div", {
+					"data-testid": "add-backend-agent-server-panel",
+					className: "mx-auto w-full max-w-xl",
+					children: [/* @__PURE__ */ L("div", {
+						className: "flex items-center gap-3",
+						children: [
+							/* @__PURE__ */ I("span", {
+								className: "h-px flex-1 bg-[var(--oh-border)]",
+								"aria-hidden": !0
+							}),
+							/* @__PURE__ */ I(O, {
+								value: u,
+								options: [{
+									value: "local",
+									label: s(t.BACKEND$KIND_LOCAL),
+									icon: /* @__PURE__ */ I(a, { "aria-hidden": !0 })
+								}, {
+									value: "remote",
+									label: s(t.BACKEND$KIND_REMOTE),
+									icon: /* @__PURE__ */ I(r, { "aria-hidden": !0 })
+								}],
+								onChange: d,
+								ariaLabel: s(t.BACKEND$AGENT_SERVER_LOCATION),
+								testId: "add-backend-location"
+							}),
+							/* @__PURE__ */ I("span", {
+								className: "h-px flex-1 bg-[var(--oh-border)]",
+								"aria-hidden": !0
+							})
+						]
+					}), /* @__PURE__ */ L("div", {
+						className: "mt-4 flex flex-col gap-4",
+						children: [/* @__PURE__ */ I(ae, { location: u }, u), /* @__PURE__ */ I(re, {
+							onConnected: n,
+							testIdRoot: "add-backend",
+							requireApiKey: u === "remote",
+							submitLabel: s(t.BACKEND$CONNECT),
+							submittingLabel: s(t.ONBOARDING$BACKEND_STATUS_CHECKING),
+							fixedKind: "local",
+							showKindSelector: !1
+						})]
+					})]
+				})
+			}) })
+		})]
+	});
+}
+function se({ onClose: e, source: t }) {
+	let { addBackend: n } = g(), r = ne(), { trackBackendAdded: i } = _(), a = u(), o = F.useCallback((a, o, s) => {
+		n(a), i({
+			backendKind: a.kind,
+			connectionMethod: o,
+			hasApiKey: !!a.apiKey,
+			source: t,
+			agentServerVersion: s?.agentServerVersion
+		}), r(), e();
+	}, [
+		n,
+		r,
+		e,
+		i,
+		t
+	]);
+	return a ? /* @__PURE__ */ I(Q, {
+		onConnected: o,
+		testIdRoot: "add-backend",
+		lockedHost: a,
 		analyticsSource: t
+	}) : /* @__PURE__ */ I(oe, {
+		onConnected: o,
+		source: t
 	});
 }
-function Y({ mode: r, backend: i, onClose: a, source: o = "add_backend_modal", hideCloseButton: s = !1 }) {
+function ce({ mode: n, backend: r, onClose: i, source: a = "add_backend_modal", hideCloseButton: s = !1 }) {
 	let { t: c } = e("openhands");
-	if (r === "add") return /* @__PURE__ */ A(m, {
-		onClose: s ? void 0 : a,
+	if (n === "add") return /* @__PURE__ */ I(v, {
+		onClose: s ? void 0 : i,
 		closeOnEscape: !1,
 		closeOnBackdropClick: !s,
 		"aria-label": c(t.BACKEND$ADD_TITLE),
-		children: /* @__PURE__ */ j("div", {
+		children: /* @__PURE__ */ L("div", {
 			"data-testid": s ? "onboarding-modal" : "add-backend-modal",
-			className: n("relative rounded-xl border border-[var(--oh-border)] bg-base-secondary", g("xl"), h),
+			className: o("relative max-h-[92vh] w-[720px] overflow-y-auto rounded-xl border border-[var(--oh-border)] bg-base-secondary p-6", y),
 			children: [
-				s ? null : /* @__PURE__ */ A(y, {
-					onClose: a,
+				s ? null : /* @__PURE__ */ I(C, {
+					onClose: i,
 					testId: "add-backend-close"
 				}),
-				s ? null : /* @__PURE__ */ A("div", {
-					className: "px-6 pt-6 pb-2 pr-12",
-					children: /* @__PURE__ */ A("h2", {
-						className: _,
-						children: c(t.BACKEND$ADD_TITLE)
-					})
+				s ? null : /* @__PURE__ */ L("div", {
+					className: "pr-8",
+					children: [/* @__PURE__ */ I("h2", {
+						className: x,
+						children: c(t.BACKEND$CHOOSER_TITLE)
+					}), /* @__PURE__ */ L("p", {
+						className: "mt-2 text-sm leading-6 text-[var(--oh-muted)]",
+						"data-testid": "add-backend-description",
+						children: [
+							c(t.BACKEND$CHOOSER_DESCRIPTION),
+							" ",
+							/* @__PURE__ */ L("a", {
+								href: K,
+								target: "_blank",
+								rel: "noopener noreferrer",
+								"aria-label": c(t.BACKEND$DEPLOYMENT_OPTIONS),
+								"data-testid": "add-backend-deployment-options-link",
+								className: "text-primary hover:underline",
+								children: [c(t.CTA$LEARN_MORE), /* @__PURE__ */ I(A, {
+									className: "ml-1 inline size-3.5 align-[-0.125em]",
+									"aria-hidden": !0
+								})]
+							})
+						]
+					})]
 				}),
-				/* @__PURE__ */ A("div", {
-					className: n("px-6 pb-6", s ? "pt-6" : "pt-2"),
-					children: /* @__PURE__ */ A(J, {
-						onClose: a,
-						source: o
+				/* @__PURE__ */ I("div", {
+					className: s ? void 0 : "mt-5",
+					children: /* @__PURE__ */ I(se, {
+						onClose: i,
+						source: a
 					})
 				})
 			]
 		})
 	});
 	let l = "edit-backend";
-	return /* @__PURE__ */ A(m, {
-		onClose: a,
+	return /* @__PURE__ */ I(v, {
+		onClose: i,
 		closeOnEscape: !1,
 		"aria-label": c(t.BACKEND$EDIT_TITLE),
-		children: /* @__PURE__ */ j("div", {
+		children: /* @__PURE__ */ L("div", {
 			"data-testid": `${l}-modal`,
-			className: n("relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]", g("md")),
+			className: o("relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]", b("md")),
 			children: [
-				/* @__PURE__ */ A(y, {
-					onClose: a,
+				/* @__PURE__ */ I(C, {
+					onClose: i,
 					testId: `${l}-close`
 				}),
-				/* @__PURE__ */ A("h2", {
-					className: n("pr-6", _),
+				/* @__PURE__ */ I("h2", {
+					className: o("pr-6", x),
 					children: c(t.BACKEND$EDIT_TITLE)
 				}),
-				/* @__PURE__ */ A(U, {
+				/* @__PURE__ */ I(te, {
 					mode: "edit",
-					backend: i,
-					onSubmitted: a,
+					backend: r,
+					onSubmitted: i,
 					testIdRoot: l
 				})
 			]
@@ -593,6 +803,6 @@ function Y({ mode: r, backend: i, onClose: a, source: o = "add_backend_modal", h
 	});
 }
 //#endregion
-export { Y as BackendFormModal };
+export { ce as BackendFormModal };
 
 //# sourceMappingURL=backend-form-modal.js.map