@openhands/agent-canvas 1.1.0 → 1.2.1

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

@@ -3,46 +3,49 @@ 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 "../../../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 { ModalBackdrop as f } from "../../shared/modals/modal-backdrop.js";
-import { MODAL_MAX_WIDTH_VIEWPORT as p, modalWidthClassName as m } from "../../shared/modals/modal-body.js";
-import { modalTitleLgClassName as h, modalTitleLgMediumClassName as g } from "../../../utils/modal-classes.js";
-import { ModalCloseButton as _ } from "../../shared/modals/modal-close-button.js";
-import { BrandButton as v } from "../settings/brand-button.js";
-import { SettingsInput as y } from "../settings/settings-input.js";
-import { useBackendsHealth as b } from "../../../hooks/query/use-backends-health.js";
-import x from "../../../assets/branding/openhands-logo-white.js";
-import S from "../../../icons/chevron-down-small.js";
-import { getBackendStatusLabel as C } from "./backend-status-label.js";
-import { BackendStatusDot as w } from "./backend-status-dot.js";
-import { DeviceFlowAuth as T } from "./device-flow-auth.js";
-import E from "react";
-import { jsx as D, jsxs as O } from "react/jsx-runtime";
+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";
 //#region src/components/features/backends/backend-form-modal.tsx
-function k(e) {
-	let t = e.trim().toLowerCase();
-	return t.includes("all-hands.dev") || t.includes("openhands.dev") ? "cloud" : "local";
+function M(e) {
+	return w(e) ? "cloud" : "local";
 }
-function A(e) {
+function N(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 j(e) {
+function P(e) {
 	let t = e.trim().replace(/\/+$/, "");
 	if (!t) return "";
 	if (/^https?:\/\//i.test(t)) return t;
 	let n = t.match(/^\[([^\]]+)\]/);
-	return `${A(n ? n[1] : (t.match(/:/g) ?? []).length > 1 ? t : t.split(":")[0]) ? "http" : "https"}://${t}`;
+	return `${N(n ? n[1] : (t.match(/:/g) ?? []).length > 1 ? t : t.split(":")[0]) ? "http" : "https"}://${t}`;
 }
-function M(e) {
+function F(e) {
 	let t = e.trim();
 	if (!t || /\s/.test(t)) return !1;
-	let n = j(t);
+	let n = P(t);
 	if (!n) return !1;
 	try {
 		let e = new URL(n);
@@ -51,29 +54,29 @@ function M(e) {
 		return !1;
 	}
 }
-var N = "https://app.all-hands.dev";
-function P(e, n) {
+var I = "https://app.all-hands.dev";
+function L(e, n) {
 	return e(t.BACKEND$CONNECTION_TEST_FAILED, {
 		host: n,
 		interpolation: { escapeValue: !1 }
 	});
 }
-function F(e) {
+function R(e) {
 	return l(e);
 }
-function I(e, t) {
-	let n = F(t);
+function z(e, t) {
+	let n = R(t);
 	return n ? `${e}\n${n}` : e;
 }
-async function L(e) {
+async function B(e) {
 	e.kind === "local" && s(await new i(o({
 		host: e.host,
 		sessionApiKey: e.apiKey || null,
 		timeout: 5e3
 	})).getServerInfo());
 }
-function R({ backend: n, testIdRoot: r }) {
-	let { t: a } = e("openhands"), s = b([n])[n.id], l = s?.isConnected ?? null, d = s?.disabled === !0, f = s?.consecutiveFailures ?? 0, p = s?.lastError ?? null, { data: m } = u({
+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({
 		queryKey: [
 			"backend-version",
 			n.host,
@@ -87,46 +90,46 @@ function R({ backend: n, testIdRoot: r }) {
 		retry: !1,
 		staleTime: 6e4,
 		enabled: n.kind === "local" && !d
-	}), h = C(a, n, s), g = n.kind === "cloud" ? a(t.BACKEND$KIND_CLOUD) : a(t.BACKEND$KIND_LOCAL);
-	return /* @__PURE__ */ O("div", {
+	}), h = E(a, n, s), g = n.kind === "cloud" ? a(t.BACKEND$KIND_CLOUD) : a(t.BACKEND$KIND_LOCAL);
+	return /* @__PURE__ */ j("div", {
 		className: "flex flex-col gap-2",
-		children: [/* @__PURE__ */ O("div", {
+		children: [/* @__PURE__ */ j("div", {
 			"data-testid": `${r}-status`,
 			className: "flex items-center gap-3 text-sm",
 			children: [
-				/* @__PURE__ */ D(w, { isConnected: l }),
-				/* @__PURE__ */ D("span", {
+				/* @__PURE__ */ A(D, { isConnected: l }),
+				/* @__PURE__ */ A("span", {
 					className: "text-white",
 					"data-testid": `${r}-status-label`,
 					children: h
 				}),
-				/* @__PURE__ */ D("span", {
+				/* @__PURE__ */ A("span", {
 					className: "text-tertiary-alt",
 					children: "·"
 				}),
-				/* @__PURE__ */ D("span", {
+				/* @__PURE__ */ A("span", {
 					className: "text-[var(--oh-text-tertiary)]",
 					children: g
 				}),
-				m ? /* @__PURE__ */ D("span", {
+				m ? /* @__PURE__ */ A("span", {
 					className: "text-xs text-[var(--oh-muted)]",
 					"data-testid": `${r}-version`,
 					children: a(t.BACKEND$VERSION_LABEL, { version: m })
 				}) : null
 			]
-		}), d ? /* @__PURE__ */ O("div", {
+		}), d ? /* @__PURE__ */ j("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__ */ D("span", {
+				/* @__PURE__ */ A("span", {
 					className: "font-semibold text-red-300",
 					children: a(t.BACKEND$HEALTH_FAILED_TITLE)
 				}),
-				/* @__PURE__ */ D("span", {
+				/* @__PURE__ */ A("span", {
 					className: "text-xs text-[var(--oh-text-tertiary)]",
 					children: a(t.BACKEND$HEALTH_FAILED_DETAIL, { count: f })
 				}),
-				p ? /* @__PURE__ */ D("span", {
+				p ? /* @__PURE__ */ A("span", {
 					"data-testid": `${r}-status-error-message`,
 					className: "text-xs text-red-300 whitespace-pre-wrap break-words",
 					children: p
@@ -135,8 +138,8 @@ function R({ backend: n, testIdRoot: r }) {
 		}) : null]
 	});
 }
-function z({ initialName: t = "", initialHost: n = "", initialApiKey: r = "", onTestConnection: i, onSuccess: a, requireApiKey: o = !1, onSubmitOverride: s }) {
-	let { t: c } = e("openhands"), [l, u] = E.useState(t), [d, f] = E.useState(n), [p, m] = E.useState(r), [h, g] = E.useState(null), [_, v] = E.useState(!1), y = k(d), b = o || y !== "local", x = l.trim().length > 0 && M(d) && (!b || p.trim().length > 0);
+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);
 	return {
 		name: l,
 		setName: u,
@@ -147,31 +150,32 @@ function z({ initialName: t = "", initialHost: n = "", initialApiKey: r = "", on
 		connectionError: h,
 		setConnectionError: g,
 		isSubmitting: _,
-		kind: y,
-		canSubmit: x,
-		handleSubmit: E.useCallback(async (e) => {
-			if (e.preventDefault(), !x || _) return;
+		kind: x,
+		setKind: b,
+		canSubmit: C,
+		handleSubmit: k.useCallback(async (e) => {
+			if (e.preventDefault(), !C || _) return;
 			let t = {
 				name: l.trim(),
-				host: j(d),
+				host: P(d),
 				apiKey: p.trim(),
-				kind: y
+				kind: x
 			};
 			g(null), v(!0);
 			try {
 				s ? await s(t) : (await i(t), a());
 			} catch (e) {
-				g(I(P(c, t.host), e));
+				g(z(L(c, t.host), e));
 			} finally {
 				v(!1);
 			}
 		}, [
-			x,
+			C,
 			_,
 			l,
 			d,
 			p,
-			y,
+			x,
 			i,
 			a,
 			o,
@@ -180,139 +184,139 @@ function z({ initialName: t = "", initialHost: n = "", initialApiKey: r = "", on
 		])
 	};
 }
-function B({ 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: b, host: x, setHost: S, apiKey: C, setApiKey: w, connectionError: T, setConnectionError: k, isSubmitting: A, kind: P, handleSubmit: F } = z({
+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({
 		initialName: i?.name ?? "",
 		initialHost: i?.host ?? "",
 		initialApiKey: i?.apiKey ?? "",
-		onTestConnection: L,
+		onTestConnection: B,
 		onSuccess: async () => {
 			let e = {
 				name: _.trim(),
-				host: j(x),
+				host: P(x),
 				apiKey: C.trim(),
-				kind: g ?? P
+				kind: g ?? O
 			};
 			r === "edit" && i ? h(i.id, e) : m(e), a();
 		},
 		requireApiKey: l,
 		onSubmitOverride: f
-	}), [I, B] = E.useState(!1), [V, H] = E.useState(!1), U = g ?? P, W = s ?? (r === "edit" ? "edit-backend" : "add-backend"), G = l || U !== "local", K = _.trim().length > 0 && M(x) && (!G || C.trim().length > 0), q = I && !_.trim() ? p(t.BACKEND$NAME_REQUIRED) : void 0, J = V ? x.trim() ? M(x) ? void 0 : p(t.BACKEND$HOST_INVALID) : p(t.BACKEND$HOST_REQUIRED) : void 0;
-	return /* @__PURE__ */ O("form", {
+	}), [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", {
 		"data-testid": `${W}-form`,
 		onSubmit: async (e) => {
 			if (!K) {
-				B(!0), H(!0);
+				L(!0), z(!0);
 				return;
 			}
-			await F(e);
+			await M(e);
 		},
 		className: "flex flex-col gap-4",
-		children: [/* @__PURE__ */ O("div", {
+		children: [/* @__PURE__ */ j("div", {
 			"data-testid": `${W}-configuration-fields`,
 			className: n("flex flex-col gap-4", u && "hidden"),
 			children: [
-				/* @__PURE__ */ D(y, {
+				/* @__PURE__ */ A(b, {
 					testId: `${W}-name`,
 					name: `${W}-name`,
 					type: "text",
 					label: p(t.BACKEND$NAME_LABEL),
 					value: _,
 					onChange: (e) => {
-						b(e), k(null);
+						v(e), E(null);
 					},
-					onBlur: () => B(!0),
+					onBlur: () => L(!0),
 					placeholder: "Production",
 					className: "w-full",
 					showRequiredTag: !0,
 					error: q
 				}),
-				/* @__PURE__ */ D(y, {
+				/* @__PURE__ */ A(b, {
 					testId: `${W}-host`,
 					name: `${W}-host`,
 					type: "text",
 					label: p(t.BACKEND$HOST_LABEL),
 					value: x,
 					onChange: c ? void 0 : (e) => {
-						S(e), k(null);
+						S(e), E(null);
 					},
-					onBlur: () => H(!0),
-					placeholder: N,
+					onBlur: () => z(!0),
+					placeholder: I,
 					className: "w-full",
 					showRequiredTag: !0,
 					error: J,
 					isDisabled: c
 				}),
-				/* @__PURE__ */ D(y, {
+				/* @__PURE__ */ A(b, {
 					testId: `${W}-api-key`,
 					name: `${W}-api-key`,
 					type: "password",
 					label: p(t.BACKEND$KEY_LABEL),
 					value: C,
 					onChange: (e) => {
-						w(e), k(null);
+						w(e), E(null);
 					},
 					placeholder: "",
 					className: "w-full"
 				}),
-				T ? /* @__PURE__ */ D("div", {
+				T ? /* @__PURE__ */ A("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__ */ D(R, {
+				r === "edit" && i && /* @__PURE__ */ A(V, {
 					backend: i,
 					testIdRoot: W
 				})
 			]
 		}), o ? o({
-			canSubmit: K && !A,
-			isSubmitting: A,
+			canSubmit: K && !D,
+			isSubmitting: D,
 			testIdRoot: W
-		}) : /* @__PURE__ */ O("div", {
+		}) : /* @__PURE__ */ j("div", {
 			className: "flex justify-end gap-2 mt-2 w-full",
-			children: [/* @__PURE__ */ D(v, {
+			children: [/* @__PURE__ */ A(y, {
 				type: "button",
 				variant: "secondary",
 				onClick: a,
 				testId: `${W}-cancel`,
 				children: p(t.BUTTON$CANCEL)
-			}), /* @__PURE__ */ D(v, {
+			}), /* @__PURE__ */ A(y, {
 				type: "submit",
 				variant: "primary",
-				isDisabled: !K || A,
+				isDisabled: !K || D,
 				testId: `${W}-submit`,
 				children: p(t.BACKEND$SAVE)
 			})]
 		})]
 	});
 }
-function V() {
+function W() {
 	let { currentPath: e, navigate: t } = r();
-	return E.useCallback(() => {
+	return k.useCallback(() => {
 		/^\/automations\/[^/]+/.test(e) ? t("/automations") : /^\/conversations\/[^/]+/.test(e) && t("/conversations");
 	}, [e, t]);
 }
-function H({ onConnected: n, testIdRoot: r = "add-backend", initialManualBackend: i, requireManualApiKey: o = !1, manualSubmitLabel: s, manualSubmittingLabel: c, manualSubmitTestId: l }) {
+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__ */ D("div", {
+	return d ? /* @__PURE__ */ A("div", {
 		"data-testid": `${r}-connection-options`,
 		className: "flex justify-center",
-		children: /* @__PURE__ */ D("div", {
+		children: /* @__PURE__ */ A("div", {
 			className: "w-full",
-			children: /* @__PURE__ */ D(W, {
+			children: /* @__PURE__ */ A(q, {
 				onConnected: n,
 				testIdRoot: r,
 				lockedHost: d
 			})
 		})
-	}) : /* @__PURE__ */ O("div", {
+	}) : /* @__PURE__ */ j("div", {
 		"data-testid": `${r}-connection-options`,
 		className: "flex flex-col gap-6 md:flex-row",
-		children: [/* @__PURE__ */ D("div", {
+		children: [/* @__PURE__ */ A("div", {
 			className: "flex-1 min-w-0",
-			children: /* @__PURE__ */ D(U, {
+			children: /* @__PURE__ */ A(K, {
 				onConnected: n,
 				testIdRoot: r,
 				initialBackend: i,
@@ -321,39 +325,39 @@ function H({ onConnected: n, testIdRoot: r = "add-backend", initialManualBackend
 				submittingLabel: c ?? u(t.ONBOARDING$BACKEND_STATUS_CHECKING),
 				submitTestId: l
 			})
-		}), /* @__PURE__ */ D("div", {
+		}), /* @__PURE__ */ A("div", {
 			className: "flex-1 min-w-0",
-			children: /* @__PURE__ */ D(W, {
+			children: /* @__PURE__ */ A(q, {
 				onConnected: n,
 				testIdRoot: r
 			})
 		})]
 	});
 }
-function U({ 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: b, kind: x, canSubmit: S, handleSubmit: C } = z({
+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({
 		initialName: i?.name ?? "",
 		initialHost: i?.host ?? "",
 		initialApiKey: i?.apiKey ?? "",
-		onTestConnection: L,
+		onTestConnection: B,
 		onSuccess: () => {
 			n({
 				name: u.trim(),
-				host: j(f),
+				host: P(f),
 				apiKey: m.trim(),
 				kind: x
-			});
+			}, "manual");
 		},
 		requireApiKey: a
 	});
-	return /* @__PURE__ */ O("form", {
+	return /* @__PURE__ */ j("form", {
 		"data-testid": `${r}-form`,
-		onSubmit: C,
+		onSubmit: T,
 		className: "flex flex-col gap-4 flex-1 min-w-0",
 		children: [
-			/* @__PURE__ */ O("div", {
+			/* @__PURE__ */ j("div", {
 				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ D(y, {
+				children: [/* @__PURE__ */ A(b, {
 					testId: `${r}-name`,
 					name: `${r}-name`,
 					type: "text",
@@ -364,14 +368,14 @@ function U({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a,
 					},
 					placeholder: "e.g. My Server",
 					className: "w-full"
-				}), /* @__PURE__ */ D("p", {
+				}), /* @__PURE__ */ A("p", {
 					className: "text-xs text-[var(--oh-muted)]",
 					children: l(t.BACKEND$NAME_HELPER)
 				})]
 			}),
-			/* @__PURE__ */ O("div", {
+			/* @__PURE__ */ j("div", {
 				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ D(y, {
+				children: [/* @__PURE__ */ A(b, {
 					testId: `${r}-host`,
 					name: `${r}-host`,
 					type: "text",
@@ -382,13 +386,32 @@ function U({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a,
 					},
 					placeholder: "http://localhost:8000",
 					className: "w-full"
-				}), /* @__PURE__ */ D("p", {
+				}), /* @__PURE__ */ A("p", {
 					className: "text-xs text-[var(--oh-muted)]",
 					"data-testid": `${r}-host-helper`,
 					children: l(t.BACKEND$HOST_HELPER)
 				})]
 			}),
-			/* @__PURE__ */ D(y, {
+			/* @__PURE__ */ j("div", {
+				className: "flex flex-col items-start gap-2.5",
+				children: [/* @__PURE__ */ A("span", {
+					className: "text-sm",
+					children: l(t.BACKEND$KIND_LABEL)
+				}), /* @__PURE__ */ A(C, {
+					value: x,
+					options: [{
+						value: "local",
+						label: l(t.BACKEND$KIND_LOCAL)
+					}, {
+						value: "cloud",
+						label: l(t.BACKEND$KIND_CLOUD)
+					}],
+					onChange: (e) => S(e),
+					ariaLabel: l(t.BACKEND$KIND_LABEL),
+					testId: `${r}-kind`
+				})]
+			}),
+			/* @__PURE__ */ A(b, {
 				testId: `${r}-api-key`,
 				name: `${r}-api-key`,
 				type: "password",
@@ -400,81 +423,81 @@ function U({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a,
 				placeholder: "sk-••••••••••",
 				className: "w-full"
 			}),
-			g ? /* @__PURE__ */ D("div", {
+			g ? /* @__PURE__ */ A("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__ */ D(v, {
+			/* @__PURE__ */ A(y, {
 				type: "submit",
 				variant: "secondary",
-				isDisabled: !S || b,
+				isDisabled: !w || v,
 				testId: c ?? `${r}-submit`,
 				className: "w-full text-center",
-				children: b ? s : o
+				children: v ? s : o
 			})
 		]
 	});
 }
-function W({ onConnected: r, testIdRoot: i, lockedHost: a }) {
-	let { t: o } = e("openhands"), [s, c] = E.useState(!1), [l, u] = E.useState(""), d = a ?? (l.trim() || N);
-	return /* @__PURE__ */ O("div", {
-		className: "flex flex-1 min-w-0 flex-col items-center gap-3",
+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",
 		children: [
-			/* @__PURE__ */ O("div", {
+			/* @__PURE__ */ j("div", {
 				className: "flex flex-col items-center gap-1",
-				children: [/* @__PURE__ */ D(x, {
+				children: [/* @__PURE__ */ A(S, {
 					width: 56,
 					height: 56,
 					"aria-hidden": !0
-				}), /* @__PURE__ */ D("h4", {
-					className: g,
+				}), /* @__PURE__ */ A("h4", {
+					className: _,
 					"data-testid": `${i}-cloud-title`,
 					children: o(t.BACKEND$CLOUD_TITLE)
 				})]
 			}),
-			/* @__PURE__ */ D("p", {
+			/* @__PURE__ */ A("p", {
 				className: "text-center text-sm leading-relaxed text-[var(--oh-muted)]",
 				children: o(t.BACKEND$CLOUD_DESCRIPTION)
 			}),
-			/* @__PURE__ */ D(T, {
+			/* @__PURE__ */ A(O, {
 				host: d,
 				onSuccess: (e) => {
 					r({
 						name: "OpenHands Cloud",
-						host: j(d),
+						host: P(d),
 						apiKey: e,
 						kind: "cloud"
-					});
+					}, "cloud_login");
 				},
 				testIdRoot: i
 			}),
-			a ? null : /* @__PURE__ */ O("div", {
+			a ? null : /* @__PURE__ */ j("div", {
 				className: "w-full",
-				children: [/* @__PURE__ */ O("button", {
+				children: [/* @__PURE__ */ j("button", {
 					type: "button",
 					onClick: () => c((e) => !e),
 					"aria-expanded": s,
 					"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__ */ D("span", { children: o(t.BACKEND$ADVANCED) }), /* @__PURE__ */ D(S, {
+					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"),
 						"aria-hidden": !0
 					})]
-				}), /* @__PURE__ */ O("div", {
+				}), /* @__PURE__ */ j("div", {
 					className: n("pt-2", !s && "pointer-events-none invisible"),
 					"aria-hidden": !s,
-					children: [/* @__PURE__ */ D(y, {
+					children: [/* @__PURE__ */ A(b, {
 						testId: `${i}-cloud-host`,
 						name: `${i}-cloud-host`,
 						type: "text",
 						label: o(t.BACKEND$HOST_LABEL),
 						value: l,
 						onChange: u,
-						placeholder: N,
+						placeholder: I,
 						className: "w-full"
-					}), /* @__PURE__ */ D("p", {
+					}), /* @__PURE__ */ A("p", {
 						className: "mt-1 text-xs text-[var(--oh-muted)]",
 						children: o(t.BACKEND$LOGIN_CLOUD_HINT)
 					})]
@@ -483,72 +506,86 @@ function W({ onConnected: r, testIdRoot: i, lockedHost: a }) {
 		]
 	});
 }
-function G({ onClose: e }) {
-	let { addBackend: t } = d(), n = V();
-	return /* @__PURE__ */ D(H, { onConnected: E.useCallback((r) => {
-		t(r), n(), e();
+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();
 	}, [
-		t,
 		n,
-		e
+		r,
+		e,
+		i,
+		t
 	]) });
 }
-function K({ mode: r, backend: i, onClose: a }) {
-	let { t: o } = e("openhands");
-	if (r === "add") return /* @__PURE__ */ D(f, {
+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,
 		closeOnEscape: !1,
-		"aria-label": o(t.BACKEND$ADD_TITLE),
-		children: /* @__PURE__ */ O("div", {
+		"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", m("xl"), p),
+			className: n("relative rounded-xl border border-[var(--oh-border)] bg-base-secondary", h("xl"), m),
 			children: [
-				/* @__PURE__ */ D(_, {
+				/* @__PURE__ */ A(v, {
 					onClose: a,
 					testId: "add-backend-close"
 				}),
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ A("div", {
 					className: "px-6 pt-6 pb-2 pr-12",
-					children: /* @__PURE__ */ D("h2", {
-						className: h,
-						children: o(t.BACKEND$ADD_TITLE)
+					children: /* @__PURE__ */ A("h2", {
+						className: g,
+						children: s(t.BACKEND$ADD_TITLE)
 					})
 				}),
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ A("div", {
 					className: "px-6 pb-6 pt-2",
-					children: /* @__PURE__ */ D(G, { onClose: a })
+					children: /* @__PURE__ */ A(J, {
+						onClose: a,
+						source: o
+					})
 				})
 			]
 		})
 	});
-	let s = "edit-backend";
-	return /* @__PURE__ */ D(f, {
+	let c = "edit-backend";
+	return /* @__PURE__ */ A(p, {
 		onClose: a,
 		closeOnEscape: !1,
-		"aria-label": o(t.BACKEND$EDIT_TITLE),
-		children: /* @__PURE__ */ O("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)]", m("md")),
+		"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")),
 			children: [
-				/* @__PURE__ */ D(_, {
+				/* @__PURE__ */ A(v, {
 					onClose: a,
-					testId: `${s}-close`
+					testId: `${c}-close`
 				}),
-				/* @__PURE__ */ D("h2", {
-					className: n("pr-6", h),
-					children: o(t.BACKEND$EDIT_TITLE)
+				/* @__PURE__ */ A("h2", {
+					className: n("pr-6", g),
+					children: s(t.BACKEND$EDIT_TITLE)
 				}),
-				/* @__PURE__ */ D(B, {
+				/* @__PURE__ */ A(U, {
 					mode: "edit",
 					backend: i,
 					onSubmitted: a,
-					testIdRoot: s
+					testIdRoot: c
 				})
 			]
 		})
 	});
 }
 //#endregion
-export { K as BackendFormModal };
+export { Y as BackendFormModal };
 
 //# sourceMappingURL=backend-form-modal.js.map