@openhands/agent-canvas 1.3.0 → 1.5.0

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

@@ -3,49 +3,51 @@ 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 "../../../node_modules/@openhands/typescript-client/dist/clients.js";
-import { getLockedCloudHost as a } from "../../../api/agent-server-config.js";
-import { getAgentServerClientOptions as o } from "../../../api/agent-server-client-options.js";
-import { assertAgentServerVersionIsSupported as s, getDisplayAgentServerVersion as c } from "../../../api/agent-server-compatibility.js";
-import { getUserFacingConnectionErrorMessage as l } from "../../../utils/user-facing-error.js";
-import { useQuery as u } from "../../../node_modules/@tanstack/react-query/build/modern/useQuery.js";
-import { useActiveBackendContext as d } from "../../../contexts/active-backend-context.js";
-import { useTracking as f } from "../../../hooks/use-tracking.js";
-import { ModalBackdrop as p } from "../../shared/modals/modal-backdrop.js";
-import { MODAL_MAX_WIDTH_VIEWPORT as m, modalWidthClassName as h } from "../../shared/modals/modal-body.js";
-import { modalTitleLgClassName as g, modalTitleLgMediumClassName as _ } from "../../../utils/modal-classes.js";
-import { ModalCloseButton as v } from "../../shared/modals/modal-close-button.js";
-import { BrandButton as y } from "../settings/brand-button.js";
-import { SettingsInput as b } from "../settings/settings-input.js";
-import { useBackendsHealth as x } from "../../../hooks/query/use-backends-health.js";
-import S from "../../../assets/branding/openhands-logo-white.js";
-import { SegmentedToggle as C } from "../files-tab/segmented-toggle.js";
-import { isOpenHandsCloudHost as w } from "../../../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 { getLockedCloudHost as o } from "../../../api/agent-server-config.js";
+import { getAgentServerClientOptions as s } from "../../../api/agent-server-client-options.js";
+import { assertAgentServerVersionIsSupported as c, getDisplayAgentServerVersion as l } from "../../../api/agent-server-compatibility.js";
+import { getUserFacingConnectionErrorMessage as u } from "../../../utils/user-facing-error.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 "../../../api/device-flow-client.js";
+import { trackCanvasBackendAdded as p } from "../../../services/cloud-funnel-analytics.js";
+import { useTracking as m } from "../../../hooks/use-tracking.js";
+import { ModalBackdrop as h } from "../../shared/modals/modal-backdrop.js";
+import { MODAL_MAX_WIDTH_VIEWPORT as g, modalWidthClassName as _ } from "../../shared/modals/modal-body.js";
+import { modalTitleLgClassName as v, modalTitleLgMediumClassName as y } from "../../../utils/modal-classes.js";
+import { ModalCloseButton as b } from "../../shared/modals/modal-close-button.js";
+import { BrandButton as x } from "../settings/brand-button.js";
+import { SettingsInput as S } from "../settings/settings-input.js";
+import { useBackendsHealth as C } from "../../../hooks/query/use-backends-health.js";
+import w from "../../../assets/branding/openhands-logo-white.js";
+import { SegmentedToggle as T } from "../files-tab/segmented-toggle.js";
+import E from "../../../icons/chevron-down-small.js";
+import { getBackendStatusLabel as D } from "./backend-status-label.js";
+import { BackendStatusDot as O } from "./backend-status-dot.js";
+import { DeviceFlowAuth as k } from "./device-flow-auth.js";
+import A from "react";
+import { jsx as j, jsxs as M } from "react/jsx-runtime";
 //#region src/components/features/backends/backend-form-modal.tsx
-function M(e) {
-	return w(e) ? "cloud" : "local";
-}
 function N(e) {
+	return a(e) ? "cloud" : "local";
+}
+function P(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 F(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 `${P(n ? n[1] : (t.match(/:/g) ?? []).length > 1 ? t : t.split(":")[0]) ? "http" : "https"}://${t}`;
 }
-function F(e) {
+function I(e) {
 	let t = e.trim();
 	if (!t || /\s/.test(t)) return !1;
-	let n = P(t);
+	let n = F(t);
 	if (!n) return !1;
 	try {
 		let e = new URL(n);
@@ -54,82 +56,82 @@ function F(e) {
 		return !1;
 	}
 }
-var I = "https://app.all-hands.dev";
-function L(e, n) {
+var L = "https://app.all-hands.dev";
+function R(e, n) {
 	return e(t.BACKEND$CONNECTION_TEST_FAILED, {
 		host: n,
 		interpolation: { escapeValue: !1 }
 	});
 }
-function R(e) {
-	return l(e);
+function z(e) {
+	return u(e);
 }
-function z(e, t) {
-	let n = R(t);
+function B(e, t) {
+	let n = z(t);
 	return n ? `${e}\n${n}` : e;
 }
-async function B(e) {
-	e.kind === "local" && s(await new i(o({
+async function V(e) {
+	e.kind === "local" && c(await new i(s({
 		host: e.host,
 		sessionApiKey: e.apiKey || null,
 		timeout: 5e3
 	})).getServerInfo());
 }
-function V({ backend: n, testIdRoot: r }) {
-	let { t: a } = e("openhands"), s = x([n])[n.id], l = s?.isConnected ?? null, d = s?.disabled === !0, f = s?.consecutiveFailures ?? 0, p = s?.lastError ?? null, { data: m } = u({
+function H({ backend: n, testIdRoot: r }) {
+	let { t: a } = e("openhands"), o = C([n])[n.id], c = o?.isConnected ?? null, u = o?.disabled === !0, f = o?.consecutiveFailures ?? 0, p = o?.lastError ?? null, { data: m } = d({
 		queryKey: [
 			"backend-version",
 			n.host,
 			n.apiKey
 		],
-		queryFn: async () => c(await new i(o({
+		queryFn: async () => l(await new i(s({
 			host: n.host,
 			sessionApiKey: n.apiKey || null,
 			timeout: 5e3
 		})).getServerInfo()),
 		retry: !1,
 		staleTime: 6e4,
-		enabled: n.kind === "local" && !d
-	}), h = E(a, n, s), g = n.kind === "cloud" ? a(t.BACKEND$KIND_CLOUD) : a(t.BACKEND$KIND_LOCAL);
-	return /* @__PURE__ */ j("div", {
+		enabled: n.kind === "local" && !u
+	}), h = D(a, n, o), g = n.kind === "cloud" ? a(t.BACKEND$KIND_CLOUD) : a(t.BACKEND$KIND_LOCAL);
+	return /* @__PURE__ */ M("div", {
 		className: "flex flex-col gap-2",
-		children: [/* @__PURE__ */ j("div", {
+		children: [/* @__PURE__ */ M("div", {
 			"data-testid": `${r}-status`,
 			className: "flex items-center gap-3 text-sm",
 			children: [
-				/* @__PURE__ */ A(D, { isConnected: l }),
-				/* @__PURE__ */ A("span", {
+				/* @__PURE__ */ j(O, { isConnected: c }),
+				/* @__PURE__ */ j("span", {
 					className: "text-white",
 					"data-testid": `${r}-status-label`,
 					children: h
 				}),
-				/* @__PURE__ */ A("span", {
+				/* @__PURE__ */ j("span", {
 					className: "text-tertiary-alt",
 					children: "·"
 				}),
-				/* @__PURE__ */ A("span", {
+				/* @__PURE__ */ j("span", {
 					className: "text-[var(--oh-text-tertiary)]",
 					children: g
 				}),
-				m ? /* @__PURE__ */ A("span", {
+				m ? /* @__PURE__ */ j("span", {
 					className: "text-xs text-[var(--oh-muted)]",
 					"data-testid": `${r}-version`,
 					children: a(t.BACKEND$VERSION_LABEL, { version: m })
 				}) : null
 			]
-		}), d ? /* @__PURE__ */ j("div", {
+		}), u ? /* @__PURE__ */ M("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__ */ j("span", {
 					className: "font-semibold text-red-300",
 					children: a(t.BACKEND$HEALTH_FAILED_TITLE)
 				}),
-				/* @__PURE__ */ A("span", {
+				/* @__PURE__ */ j("span", {
 					className: "text-xs text-[var(--oh-text-tertiary)]",
 					children: a(t.BACKEND$HEALTH_FAILED_DETAIL, { count: f })
 				}),
-				p ? /* @__PURE__ */ A("span", {
+				p ? /* @__PURE__ */ j("span", {
 					"data-testid": `${r}-status-error-message`,
 					className: "text-xs text-red-300 whitespace-pre-wrap break-words",
 					children: p
@@ -138,8 +140,8 @@ function V({ backend: n, testIdRoot: r }) {
 		}) : 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 U({ initialName: t = "", initialHost: n = "", initialApiKey: r = "", onTestConnection: i, onSuccess: a, requireApiKey: o = !1, onSubmitOverride: s }) {
+	let { t: c } = e("openhands"), [l, u] = A.useState(t), [d, f] = A.useState(n), [p, m] = A.useState(r), [h, g] = A.useState(null), [_, v] = A.useState(!1), [y, b] = A.useState(null), x = y ?? N(d), S = o || x !== "local", C = l.trim().length > 0 && I(d) && (!S || p.trim().length > 0);
 	return {
 		name: l,
 		setName: u,
@@ -153,11 +155,11 @@ function H({ initialName: t = "", initialHost: n = "", initialApiKey: r = "", on
 		kind: x,
 		setKind: b,
 		canSubmit: C,
-		handleSubmit: k.useCallback(async (e) => {
+		handleSubmit: A.useCallback(async (e) => {
 			if (e.preventDefault(), !C || _) return;
 			let t = {
 				name: l.trim(),
-				host: P(d),
+				host: F(d),
 				apiKey: p.trim(),
 				kind: x
 			};
@@ -165,7 +167,7 @@ function H({ initialName: t = "", initialHost: n = "", initialApiKey: r = "", on
 			try {
 				s ? await s(t) : (await i(t), a());
 			} catch (e) {
-				g(z(L(c, t.host), e));
+				g(B(R(c, t.host), e));
 			} finally {
 				v(!1);
 			}
@@ -184,39 +186,39 @@ function H({ initialName: t = "", initialHost: n = "", initialApiKey: r = "", on
 		])
 	};
 }
-function U({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot: s, hostReadOnly: c, requireApiKey: l, hideConfigurationFields: u = !1, onSubmitOverride: f }) {
-	let { t: p } = e("openhands"), { addBackend: m, updateBackend: h } = d(), g = r === "edit" && i ? i.kind : null, { name: _, setName: v, host: x, setHost: S, apiKey: C, setApiKey: w, connectionError: T, setConnectionError: E, isSubmitting: D, kind: O, handleSubmit: M } = H({
+function W({ 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: b, apiKey: C, setApiKey: w, connectionError: T, setConnectionError: E, isSubmitting: D, kind: O, handleSubmit: k } = U({
 		initialName: i?.name ?? "",
 		initialHost: i?.host ?? "",
 		initialApiKey: i?.apiKey ?? "",
-		onTestConnection: B,
+		onTestConnection: V,
 		onSuccess: async () => {
 			let e = {
 				name: _.trim(),
-				host: P(x),
+				host: F(y),
 				apiKey: C.trim(),
 				kind: g ?? O
 			};
 			r === "edit" && i ? h(i.id, e) : m(e), a();
 		},
 		requireApiKey: l,
-		onSubmitOverride: f
-	}), [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(x) && (!G || C.trim().length > 0), q = N && !_.trim() ? p(t.BACKEND$NAME_REQUIRED) : void 0, J = R ? x.trim() ? F(x) ? void 0 : p(t.BACKEND$HOST_INVALID) : p(t.BACKEND$HOST_REQUIRED) : void 0;
-	return /* @__PURE__ */ j("form", {
+		onSubmitOverride: d
+	}), [N, P] = A.useState(!1), [R, z] = A.useState(!1), B = g ?? O, W = s ?? (r === "edit" ? "edit-backend" : "add-backend"), G = l || B !== "local", K = _.trim().length > 0 && I(y) && (!G || C.trim().length > 0), q = N && !_.trim() ? p(t.BACKEND$NAME_REQUIRED) : void 0, J = R ? y.trim() ? I(y) ? void 0 : p(t.BACKEND$HOST_INVALID) : p(t.BACKEND$HOST_REQUIRED) : void 0;
+	return /* @__PURE__ */ M("form", {
 		"data-testid": `${W}-form`,
 		onSubmit: async (e) => {
 			if (!K) {
-				L(!0), z(!0);
+				P(!0), z(!0);
 				return;
 			}
-			await M(e);
+			await k(e);
 		},
 		className: "flex flex-col gap-4",
-		children: [/* @__PURE__ */ j("div", {
+		children: [/* @__PURE__ */ M("div", {
 			"data-testid": `${W}-configuration-fields`,
 			className: n("flex flex-col gap-4", u && "hidden"),
 			children: [
-				/* @__PURE__ */ A(b, {
+				/* @__PURE__ */ j(S, {
 					testId: `${W}-name`,
 					name: `${W}-name`,
 					type: "text",
@@ -225,29 +227,29 @@ function U({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot:
 					onChange: (e) => {
 						v(e), E(null);
 					},
-					onBlur: () => L(!0),
+					onBlur: () => P(!0),
 					placeholder: "Production",
 					className: "w-full",
 					showRequiredTag: !0,
 					error: q
 				}),
-				/* @__PURE__ */ A(b, {
+				/* @__PURE__ */ j(S, {
 					testId: `${W}-host`,
 					name: `${W}-host`,
 					type: "text",
 					label: p(t.BACKEND$HOST_LABEL),
-					value: x,
+					value: y,
 					onChange: c ? void 0 : (e) => {
-						S(e), E(null);
+						b(e), E(null);
 					},
 					onBlur: () => z(!0),
-					placeholder: I,
+					placeholder: L,
 					className: "w-full",
 					showRequiredTag: !0,
 					error: J,
 					isDisabled: c
 				}),
-				/* @__PURE__ */ A(b, {
+				/* @__PURE__ */ j(S, {
 					testId: `${W}-api-key`,
 					name: `${W}-api-key`,
 					type: "password",
@@ -259,13 +261,13 @@ function U({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot:
 					placeholder: "",
 					className: "w-full"
 				}),
-				T ? /* @__PURE__ */ A("div", {
+				T ? /* @__PURE__ */ j("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: T
 				}) : null,
-				r === "edit" && i && /* @__PURE__ */ A(V, {
+				r === "edit" && i && /* @__PURE__ */ j(H, {
 					backend: i,
 					testIdRoot: W
 				})
@@ -274,15 +276,15 @@ function U({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot:
 			canSubmit: K && !D,
 			isSubmitting: D,
 			testIdRoot: W
-		}) : /* @__PURE__ */ j("div", {
+		}) : /* @__PURE__ */ M("div", {
 			className: "flex justify-end gap-2 mt-2 w-full",
-			children: [/* @__PURE__ */ A(y, {
+			children: [/* @__PURE__ */ j(x, {
 				type: "button",
 				variant: "secondary",
 				onClick: a,
 				testId: `${W}-cancel`,
 				children: p(t.BUTTON$CANCEL)
-			}), /* @__PURE__ */ A(y, {
+			}), /* @__PURE__ */ j(x, {
 				type: "submit",
 				variant: "primary",
 				isDisabled: !K || D,
@@ -292,72 +294,74 @@ function U({ mode: r, backend: i, onSubmitted: a, renderActions: o, testIdRoot:
 		})]
 	});
 }
-function W() {
+function G() {
 	let { currentPath: e, navigate: t } = r();
-	return k.useCallback(() => {
+	return A.useCallback(() => {
 		/^\/automations\/[^/]+/.test(e) ? t("/automations") : /^\/conversations\/[^/]+/.test(e) && t("/conversations");
 	}, [e, t]);
 }
-function G({ onConnected: n, testIdRoot: r = "add-backend", initialManualBackend: i, requireManualApiKey: o = !1, manualSubmitLabel: s, manualSubmittingLabel: c, manualSubmitTestId: l }) {
-	let { t: u } = e("openhands"), d = a();
-	return d ? /* @__PURE__ */ A("div", {
+function K({ 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__ */ j("div", {
 		"data-testid": `${r}-connection-options`,
 		className: "flex justify-center",
-		children: /* @__PURE__ */ A("div", {
+		children: /* @__PURE__ */ j("div", {
 			className: "w-full",
-			children: /* @__PURE__ */ A(q, {
+			children: /* @__PURE__ */ j(J, {
 				onConnected: n,
 				testIdRoot: r,
-				lockedHost: d
+				lockedHost: f,
+				analyticsSource: u
 			})
 		})
-	}) : /* @__PURE__ */ j("div", {
+	}) : /* @__PURE__ */ M("div", {
 		"data-testid": `${r}-connection-options`,
 		className: "flex flex-col gap-6 md:flex-row",
-		children: [/* @__PURE__ */ A("div", {
+		children: [/* @__PURE__ */ j("div", {
 			className: "flex-1 min-w-0",
-			children: /* @__PURE__ */ A(K, {
+			children: /* @__PURE__ */ j(q, {
 				onConnected: n,
 				testIdRoot: r,
 				initialBackend: i,
-				requireApiKey: o,
-				submitLabel: s ?? u(t.BACKEND$CONNECT),
-				submittingLabel: c ?? u(t.ONBOARDING$BACKEND_STATUS_CHECKING),
+				requireApiKey: a,
+				submitLabel: s ?? d(t.BACKEND$CONNECT),
+				submittingLabel: c ?? d(t.ONBOARDING$BACKEND_STATUS_CHECKING),
 				submitTestId: l
 			})
-		}), /* @__PURE__ */ A("div", {
+		}), /* @__PURE__ */ j("div", {
 			className: "flex-1 min-w-0",
-			children: /* @__PURE__ */ A(q, {
+			children: /* @__PURE__ */ j(J, {
 				onConnected: n,
-				testIdRoot: r
+				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: x, setKind: S, canSubmit: w, handleSubmit: T } = H({
+function q({ 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: b, canSubmit: C, handleSubmit: w } = U({
 		initialName: i?.name ?? "",
 		initialHost: i?.host ?? "",
 		initialApiKey: i?.apiKey ?? "",
-		onTestConnection: B,
+		onTestConnection: V,
 		onSuccess: () => {
 			n({
 				name: u.trim(),
-				host: P(f),
+				host: F(f),
 				apiKey: m.trim(),
-				kind: x
+				kind: y
 			}, "manual");
 		},
 		requireApiKey: a
 	});
-	return /* @__PURE__ */ j("form", {
+	return /* @__PURE__ */ M("form", {
 		"data-testid": `${r}-form`,
-		onSubmit: T,
+		onSubmit: w,
 		className: "flex flex-col gap-4 flex-1 min-w-0",
 		children: [
-			/* @__PURE__ */ j("div", {
+			/* @__PURE__ */ M("div", {
 				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ A(b, {
+				children: [/* @__PURE__ */ j(S, {
 					testId: `${r}-name`,
 					name: `${r}-name`,
 					type: "text",
@@ -368,14 +372,14 @@ function K({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a,
 					},
 					placeholder: "e.g. My Server",
 					className: "w-full"
-				}), /* @__PURE__ */ A("p", {
+				}), /* @__PURE__ */ j("p", {
 					className: "text-xs text-[var(--oh-muted)]",
 					children: l(t.BACKEND$NAME_HELPER)
 				})]
 			}),
-			/* @__PURE__ */ j("div", {
+			/* @__PURE__ */ M("div", {
 				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ A(b, {
+				children: [/* @__PURE__ */ j(S, {
 					testId: `${r}-host`,
 					name: `${r}-host`,
 					type: "text",
@@ -386,19 +390,19 @@ function K({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a,
 					},
 					placeholder: "http://localhost:8000",
 					className: "w-full"
-				}), /* @__PURE__ */ A("p", {
+				}), /* @__PURE__ */ j("p", {
 					className: "text-xs text-[var(--oh-muted)]",
 					"data-testid": `${r}-host-helper`,
 					children: l(t.BACKEND$HOST_HELPER)
 				})]
 			}),
-			/* @__PURE__ */ j("div", {
+			/* @__PURE__ */ M("div", {
 				className: "flex flex-col items-start gap-2.5",
-				children: [/* @__PURE__ */ A("span", {
+				children: [/* @__PURE__ */ j("span", {
 					className: "text-sm",
 					children: l(t.BACKEND$KIND_LABEL)
-				}), /* @__PURE__ */ A(C, {
-					value: x,
+				}), /* @__PURE__ */ j(T, {
+					value: y,
 					options: [{
 						value: "local",
 						label: l(t.BACKEND$KIND_LOCAL)
@@ -406,12 +410,12 @@ function K({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a,
 						value: "cloud",
 						label: l(t.BACKEND$KIND_CLOUD)
 					}],
-					onChange: (e) => S(e),
+					onChange: (e) => b(e),
 					ariaLabel: l(t.BACKEND$KIND_LABEL),
 					testId: `${r}-kind`
 				})]
 			}),
-			/* @__PURE__ */ A(b, {
+			/* @__PURE__ */ j(S, {
 				testId: `${r}-api-key`,
 				name: `${r}-api-key`,
 				type: "password",
@@ -423,16 +427,16 @@ function K({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a,
 				placeholder: "sk-••••••••••",
 				className: "w-full"
 			}),
-			g ? /* @__PURE__ */ A("div", {
+			g ? /* @__PURE__ */ j("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
 			}) : null,
-			/* @__PURE__ */ A(y, {
+			/* @__PURE__ */ j(x, {
 				type: "submit",
 				variant: "secondary",
-				isDisabled: !w || v,
+				isDisabled: !C || v,
 				testId: c ?? `${r}-submit`,
 				className: "w-full text-center",
 				children: v ? s : o
@@ -440,117 +444,128 @@ function K({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a,
 		]
 	});
 }
-function q({ onConnected: r, testIdRoot: i, lockedHost: a }) {
-	let { t: o } = e("openhands"), [s, c] = k.useState(!1), [l, u] = k.useState(""), d = a ?? (l.trim() || I);
-	return /* @__PURE__ */ j("div", {
-		className: "flex flex-1 min-w-0 flex-col items-center gap-3 pb-7",
+function J({ onConnected: r, testIdRoot: i, lockedHost: a, analyticsSource: o }) {
+	let { t: s } = e("openhands"), [c, l] = A.useState(!1), [u, d] = A.useState(""), f = a ?? (u.trim() || L);
+	return /* @__PURE__ */ M("div", {
+		className: "flex flex-1 min-w-0 flex-col items-center gap-3 pb-8",
 		children: [
-			/* @__PURE__ */ j("div", {
+			/* @__PURE__ */ M("div", {
 				className: "flex flex-col items-center gap-1",
-				children: [/* @__PURE__ */ A(S, {
+				children: [/* @__PURE__ */ j(w, {
 					width: 56,
 					height: 56,
 					"aria-hidden": !0
-				}), /* @__PURE__ */ A("h4", {
-					className: _,
+				}), /* @__PURE__ */ j("h4", {
+					className: y,
 					"data-testid": `${i}-cloud-title`,
-					children: o(t.BACKEND$CLOUD_TITLE)
+					children: s(t.BACKEND$CLOUD_TITLE)
 				})]
 			}),
-			/* @__PURE__ */ A("p", {
+			/* @__PURE__ */ j("p", {
 				className: "text-center text-sm leading-relaxed text-[var(--oh-muted)]",
-				children: o(t.BACKEND$CLOUD_DESCRIPTION)
+				children: s(t.BACKEND$CLOUD_DESCRIPTION)
 			}),
-			/* @__PURE__ */ A(O, {
-				host: d,
+			/* @__PURE__ */ j(k, {
+				host: f,
 				onSuccess: (e) => {
 					r({
 						name: "OpenHands Cloud",
-						host: P(d),
+						host: F(f),
 						apiKey: e,
 						kind: "cloud"
 					}, "cloud_login");
 				},
-				testIdRoot: i
+				testIdRoot: i,
+				analyticsSource: o
 			}),
-			a ? null : /* @__PURE__ */ j("div", {
+			a ? null : /* @__PURE__ */ M("div", {
 				className: "w-full",
-				children: [/* @__PURE__ */ j("button", {
+				children: [/* @__PURE__ */ M("button", {
 					type: "button",
-					onClick: () => c((e) => !e),
-					"aria-expanded": s,
+					onClick: () => l((e) => !e),
+					"aria-expanded": c,
 					"data-testid": `${i}-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: o(t.BACKEND$ADVANCED) }), /* @__PURE__ */ A(T, {
-						className: n("h-4 w-4 shrink-0 text-muted transition-transform", s && "rotate-180"),
+					children: [/* @__PURE__ */ j("span", { children: s(t.BACKEND$ADVANCED) }), /* @__PURE__ */ j(E, {
+						className: n("h-4 w-4 shrink-0 text-muted transition-transform", c && "rotate-180"),
 						"aria-hidden": !0
 					})]
-				}), /* @__PURE__ */ j("div", {
-					className: n("pt-2", !s && "pointer-events-none invisible"),
-					"aria-hidden": !s,
-					children: [/* @__PURE__ */ A(b, {
+				}), /* @__PURE__ */ M("div", {
+					className: n("pt-2", !c && "pointer-events-none invisible"),
+					"aria-hidden": !c,
+					children: [/* @__PURE__ */ j(S, {
 						testId: `${i}-cloud-host`,
 						name: `${i}-cloud-host`,
 						type: "text",
-						label: o(t.BACKEND$HOST_LABEL),
-						value: l,
-						onChange: u,
-						placeholder: I,
+						label: s(t.BACKEND$HOST_LABEL),
+						value: u,
+						onChange: d,
+						placeholder: L,
 						className: "w-full"
-					}), /* @__PURE__ */ A("p", {
+					}), /* @__PURE__ */ j("p", {
 						className: "mt-1 text-xs text-[var(--oh-muted)]",
-						children: o(t.BACKEND$LOGIN_CLOUD_HINT)
+						children: s(t.BACKEND$LOGIN_CLOUD_HINT)
 					})]
 				})]
 			})
 		]
 	});
 }
-function J({ onClose: e, source: t }) {
-	let { addBackend: n } = d(), r = W(), { trackBackendAdded: i } = f();
-	return /* @__PURE__ */ A(G, { onConnected: k.useCallback((a, o) => {
-		n(a);
-		let s = a.host === I;
-		i({
-			backendKind: a.kind,
-			connectionMethod: o,
-			isOpenhandsCloud: s,
-			isCustomHost: !s,
-			hasApiKey: !!a.apiKey,
-			source: t
-		}), r(), e();
-	}, [
-		n,
-		r,
-		e,
-		i,
-		t
-	]) });
+function Y({ onClose: e, source: t }) {
+	let { addBackend: n } = f(), r = G(), { trackBackendAdded: i } = m();
+	return /* @__PURE__ */ j(K, {
+		onConnected: A.useCallback((o, s) => {
+			n(o);
+			let c = a(o.host);
+			p({
+				backendKind: o.kind,
+				connectionMethod: s,
+				host: o.host,
+				hasApiKey: !!o.apiKey,
+				source: t
+			}) || i({
+				backendKind: o.kind,
+				connectionMethod: s,
+				isOpenhandsCloud: c,
+				isCustomHost: !c,
+				hasApiKey: !!o.apiKey,
+				source: t
+			}), r(), e();
+		}, [
+			n,
+			r,
+			e,
+			i,
+			t
+		]),
+		analyticsSource: t
+	});
 }
-function Y({ mode: r, backend: i, onClose: a, source: o = "add_backend_modal" }) {
-	let { t: s } = e("openhands");
-	if (r === "add") return /* @__PURE__ */ A(p, {
-		onClose: a,
+function X({ mode: r, backend: i, onClose: a, source: o = "add_backend_modal", hideCloseButton: s = !1 }) {
+	let { t: c } = e("openhands");
+	if (r === "add") return /* @__PURE__ */ j(h, {
+		onClose: s ? void 0 : a,
 		closeOnEscape: !1,
-		"aria-label": s(t.BACKEND$ADD_TITLE),
-		children: /* @__PURE__ */ j("div", {
-			"data-testid": "add-backend-modal",
-			className: n("relative rounded-xl border border-[var(--oh-border)] bg-base-secondary", h("xl"), m),
+		closeOnBackdropClick: !s,
+		"aria-label": c(t.BACKEND$ADD_TITLE),
+		children: /* @__PURE__ */ M("div", {
+			"data-testid": s ? "onboarding-modal" : "add-backend-modal",
+			className: n("relative rounded-xl border border-[var(--oh-border)] bg-base-secondary", _("xl"), g),
 			children: [
-				/* @__PURE__ */ A(v, {
+				s ? null : /* @__PURE__ */ j(b, {
 					onClose: a,
 					testId: "add-backend-close"
 				}),
-				/* @__PURE__ */ A("div", {
+				s ? null : /* @__PURE__ */ j("div", {
 					className: "px-6 pt-6 pb-2 pr-12",
-					children: /* @__PURE__ */ A("h2", {
-						className: g,
-						children: s(t.BACKEND$ADD_TITLE)
+					children: /* @__PURE__ */ j("h2", {
+						className: v,
+						children: c(t.BACKEND$ADD_TITLE)
 					})
 				}),
-				/* @__PURE__ */ A("div", {
-					className: "px-6 pb-6 pt-2",
-					children: /* @__PURE__ */ A(J, {
+				/* @__PURE__ */ j("div", {
+					className: n("px-6 pb-6", s ? "pt-6" : "pt-2"),
+					children: /* @__PURE__ */ j(Y, {
 						onClose: a,
 						source: o
 					})
@@ -558,34 +573,34 @@ function Y({ mode: r, backend: i, onClose: a, source: o = "add_backend_modal" })
 			]
 		})
 	});
-	let c = "edit-backend";
-	return /* @__PURE__ */ A(p, {
+	let l = "edit-backend";
+	return /* @__PURE__ */ j(h, {
 		onClose: a,
 		closeOnEscape: !1,
-		"aria-label": s(t.BACKEND$EDIT_TITLE),
-		children: /* @__PURE__ */ j("div", {
-			"data-testid": `${c}-modal`,
-			className: n("relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]", h("md")),
+		"aria-label": c(t.BACKEND$EDIT_TITLE),
+		children: /* @__PURE__ */ M("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)]", _("md")),
 			children: [
-				/* @__PURE__ */ A(v, {
+				/* @__PURE__ */ j(b, {
 					onClose: a,
-					testId: `${c}-close`
+					testId: `${l}-close`
 				}),
-				/* @__PURE__ */ A("h2", {
-					className: n("pr-6", g),
-					children: s(t.BACKEND$EDIT_TITLE)
+				/* @__PURE__ */ j("h2", {
+					className: n("pr-6", v),
+					children: c(t.BACKEND$EDIT_TITLE)
 				}),
-				/* @__PURE__ */ A(U, {
+				/* @__PURE__ */ j(W, {
 					mode: "edit",
 					backend: i,
 					onSubmitted: a,
-					testIdRoot: c
+					testIdRoot: l
 				})
 			]
 		})
 	});
 }
 //#endregion
-export { Y as BackendFormModal };
+export { X as BackendFormModal };
 
 //# sourceMappingURL=backend-form-modal.js.map