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

package/dist/components/features/backends/backend-selector.js

@@ -8,48 +8,48 @@ import { isNoBackend as o } from "../../../api/backend-registry/active-store.js"
 import { useActiveBackendContext as s } from "../../../contexts/active-backend-context.js";
 import { formControlTransitionClassName as ee } from "../../../utils/form-control-classes.js";
 import { StyledTooltip as te } from "../../shared/buttons/styled-tooltip.js";
-import { dropdownFooterActionClassName as c, dropdownMenuListClassName as l, dropdownMenuRowIconWrapperClassName as u } from "../../../utils/dropdown-classes.js";
-import { NavigationLink as ne } from "../../shared/navigation-link.js";
-import { useAllCloudOrganizations as d } from "../../../hooks/query/use-cloud-organizations.js";
-import { useCloudCurrentUserId as f } from "../../../hooks/query/use-cloud-current-user-id.js";
-import { Dropdown as re } from "../../../ui/dropdown/dropdown.js";
-import { useBackendsHealth as ie } from "../../../hooks/query/use-backends-health.js";
-import { triggerEnvironmentSwitch as ae } from "./environment-switch-store.js";
+import { dropdownFooterActionClassName as c, dropdownMenuListClassName as ne, dropdownMenuRowIconWrapperClassName as l } from "../../../utils/dropdown-classes.js";
+import { NavigationLink as re } from "../../shared/navigation-link.js";
+import { useAllCloudOrganizations as ie } from "../../../hooks/query/use-cloud-organizations.js";
+import { useCloudCurrentUserId as ae } from "../../../hooks/query/use-cloud-current-user-id.js";
+import { Dropdown as u } from "../../../ui/dropdown/dropdown.js";
+import { useBackendsHealth as d } from "../../../hooks/query/use-backends-health.js";
+import { triggerEnvironmentSwitch as f } from "./environment-switch-store.js";
 import { BackendStatusDot as p } from "./backend-status-dot.js";
 import { AddBackendModal as oe } from "./add-backend-modal.js";
 import { ManageBackendsModal as se } from "./manage-backends-modal.js";
 import m from "react";
 import { Fragment as ce, jsx as h, jsxs as g } from "react/jsx-runtime";
-import { useMatch as _, useNavigate as v } from "react-router";
+import { useMatch as _, useNavigate as le } from "react-router";
 //#region src/components/features/backends/backend-selector.tsx
-var y = "::";
-function b(e, t) {
-	return t ? `${e}${y}${t}` : e;
+var v = "::";
+function y(e, t) {
+	return t ? `${e}${v}${t}` : e;
 }
-function x(e) {
-	let [t, n] = e.split(y);
+function ue(e) {
+	let [t, n] = e.split(v);
 	return {
 		backendId: t,
 		orgId: n ?? null
 	};
 }
-function S(e) {
+function b(e) {
 	return /* @__PURE__ */ h(p, { isConnected: e?.isConnected ?? null });
 }
-function C() {
+function de() {
 	return /* @__PURE__ */ h(p, { isConnected: "unavailable" });
 }
-function w(e, t, n, r, i) {
+function fe(e, t, n, r, i) {
 	let a = [], o = e.filter((e) => e.kind === "local"), s = e.filter((e) => e.kind === "cloud");
 	for (let e of o) a.push({
-		value: b(e.id, null),
+		value: y(e.id, null),
 		label: e.name,
-		prefix: S(i[e.id])
+		prefix: b(i[e.id])
 	});
 	for (let e of s) {
-		let o = n[e.id], s = S(i[e.id]);
+		let o = n[e.id], s = b(i[e.id]);
 		if (!o || o.orgs.length === 0) a.push({
-			value: b(e.id, null),
+			value: y(e.id, null),
 			label: e.name,
 			prefix: s
 		});
@@ -58,7 +58,7 @@ function w(e, t, n, r, i) {
 			for (let r of o.orgs) {
 				let i = n && n === r.id ? t : r.name;
 				a.push({
-					value: b(e.id, r.id),
+					value: y(e.id, r.id),
 					label: `${e.name} – ${i}`,
 					prefix: s
 				});
@@ -67,124 +67,136 @@ function w(e, t, n, r, i) {
 	}
 	return a;
 }
-function T({ openUpward: p = !1, hideTrigger: y = !1, defaultOpen: T = !1, onSelectOption: E, onOpenAddBackend: D, onOpenManageBackends: O, sidebarCollapsed: le = !1 } = {}) {
-	let { t: k } = e("openhands"), { backends: A, active: j, setActive: M } = s(), N = d(), P = f(), F = ie(A), I = v(), L = _("/settings"), R = _("/settings/*"), z = _("/conversations/:conversationId"), B = _("/automations/:automationId"), [V, H] = m.useState(!1), [U, W] = m.useState(!1), G = k(t.BACKEND$PERSONAL_WORKSPACE), K = m.useMemo(() => w(A, G, N, P, F), [
+function x({ openUpward: p = !1, hideTrigger: v = !1, defaultOpen: x = !1, onSelectOption: S, onOpenAddBackend: C, onOpenManageBackends: w, sidebarCollapsed: T = !1 } = {}) {
+	let { t: E } = e("openhands"), { backends: D, active: O, setActive: k } = s(), A = ie(), j = ae(), M = d(D), N = le(), P = _("/settings"), F = _("/settings/*"), I = _("/conversations/:conversationId"), L = _("/automations/:automationId"), [R, z] = m.useState(!1), [B, V] = m.useState(!1), H = E(t.BACKEND$PERSONAL_WORKSPACE), U = m.useMemo(() => fe(D, H, A, j, M), [
+		D,
+		H,
 		A,
-		G,
-		N,
-		P,
-		F
-	]), q = o(j.backend), J = k(t.BACKEND$NO_BACKEND_AVAILABLE), Y = b(j.backend.id, j.orgId), X = q ? void 0 : K.find((e) => e.value === Y), Z = !!(L || R), Q = k(t.SIDEBAR$SETTINGS), ue = a((e) => e.isRightPanelShown), de = !le || z && ue ? "top" : "left", fe = Object.values(N).some((e) => e.isLoading);
+		j,
+		M
+	]), W = o(O.backend), G = E(t.BACKEND$NO_BACKEND_AVAILABLE), K = y(O.backend.id, O.orgId), q = W ? void 0 : U.find((e) => e.value === K), J = !!(P || F), Y = E(t.SIDEBAR$SETTINGS), pe = a((e) => e.isRightPanelShown), me = !T || I && pe ? "top" : "left", he = Object.values(A).some((e) => e.isLoading);
 	m.useEffect(() => {
-		if (q || j.backend.kind !== "cloud" || j.orgId) return;
-		let { backend: e } = j, t = N[e.id];
+		if (W || O.backend.kind !== "cloud" || O.orgId) return;
+		let { backend: e } = O, t = A[e.id];
 		if (!t || t.orgs.length === 0) return;
-		let n = P[e.id]?.userId ?? null, r = (n ? t.orgs.find((e) => e.id === n) : void 0) ?? t.orgs[0];
-		r && M(e.id, r.id);
+		let n = j[e.id]?.userId ?? null, r = (n ? t.orgs.find((e) => e.id === n) : void 0) ?? t.orgs[0];
+		r && k(e.id, r.id);
 	}, [
+		O,
+		A,
 		j,
-		N,
-		P,
-		M,
-		q
+		k,
+		W
 	]);
-	let pe = m.useCallback(() => {
-		if (D) {
-			D(), E?.();
+	let X = m.useCallback(() => {
+		if (C) {
+			C(), S?.();
 			return;
 		}
-		H(!0);
-	}, [D, E]), me = m.useCallback(() => {
-		if (O) {
-			O(), E?.();
+		z(!0);
+	}, [C, S]), Z = m.useCallback(() => {
+		if (w) {
+			w(), S?.();
 			return;
 		}
-		W(!0);
-	}, [O, E]), $ = m.useCallback((e) => {
+		V(!0);
+	}, [w, S]), Q = m.useCallback((e) => {
 		e.preventDefault(), e.stopPropagation();
-	}, []), he = /* @__PURE__ */ g("div", {
-		className: l,
+	}, []), ge = m.useCallback((e) => {
+		Q(e), X();
+	}, [X, Q]), $ = m.useCallback((e) => {
+		Q(e), X();
+	}, [X, Q]), _e = m.useCallback((e) => {
+		Q(e), Z();
+	}, [Z, Q]), ve = m.useCallback((e) => {
+		Q(e), Z();
+	}, [Z, Q]), ye = /* @__PURE__ */ g("div", {
+		className: ne,
 		children: [/* @__PURE__ */ g("button", {
 			type: "button",
 			"data-testid": "add-backend-menu-item",
-			onMouseDown: $,
-			onClick: pe,
+			onMouseDown: Q,
+			onTouchStart: Q,
+			onTouchEnd: $,
+			onClick: ge,
 			className: i(c, "cursor-pointer rounded-md"),
 			children: [/* @__PURE__ */ h("span", {
-				className: u,
+				className: l,
 				"aria-hidden": !0,
 				children: /* @__PURE__ */ h(n, {
 					width: 16,
 					height: 16
 				})
-			}), k(t.BACKEND$ADD)]
+			}), E(t.BACKEND$ADD)]
 		}), /* @__PURE__ */ g("button", {
 			type: "button",
 			"data-testid": "manage-backends-menu-item",
-			onMouseDown: $,
-			onClick: me,
+			onMouseDown: Q,
+			onTouchStart: Q,
+			onTouchEnd: ve,
+			onClick: _e,
 			className: i(c, "cursor-pointer rounded-md"),
 			children: [/* @__PURE__ */ h("span", {
-				className: u,
+				className: l,
 				"aria-hidden": !0,
 				children: /* @__PURE__ */ h(r, {
 					width: 16,
 					height: 16
 				})
-			}), k(t.BACKEND$MANAGE)]
+			}), E(t.BACKEND$MANAGE)]
 		})]
-	}), ge = m.useCallback(async (e) => {
-		if (e === Y) return;
-		let { backendId: t, orgId: n } = x(e), r = A.find((e) => e.id === t);
-		r && (ae(K.find((t) => t.value === e)?.label ?? r.name), await new Promise((e) => {
+	}), be = m.useCallback(async (e) => {
+		if (e === K) return;
+		let { backendId: t, orgId: n } = ue(e), r = D.find((e) => e.id === t);
+		r && (f(U.find((t) => t.value === e)?.label ?? r.name), await new Promise((e) => {
 			setTimeout(e, 400);
-		}), z ? I("/conversations") : B && I("/automations"), M(r.id, n), E?.());
+		}), I ? N("/conversations") : L && N("/automations"), k(r.id, n), S?.());
 	}, [
-		Y,
-		A,
-		z,
-		B,
-		I,
 		K,
-		M,
+		D,
+		I,
+		L,
+		N,
+		U,
 		k,
-		E
+		E,
+		S
 	]);
 	return /* @__PURE__ */ g(ce, { children: [
 		/* @__PURE__ */ g("div", {
 			className: "flex items-center gap-2 w-full",
 			children: [/* @__PURE__ */ h("div", {
 				className: "flex-1 min-w-0",
-				children: /* @__PURE__ */ h(re, {
+				children: /* @__PURE__ */ h(u, {
 					testId: "backend-selector",
-					defaultValue: X ?? {
-						value: Y,
-						label: q ? J : j.backend.name,
-						prefix: q ? C() : S(F[j.backend.id])
+					defaultValue: q ?? {
+						value: K,
+						label: W ? G : O.backend.name,
+						prefix: W ? de() : b(M[O.backend.id])
 					},
-					footer: he,
+					footer: ye,
 					openUpward: p,
-					hideTrigger: y,
-					defaultOpen: T,
-					openOnHover: !y,
+					hideTrigger: v,
+					defaultOpen: x,
+					openOnHover: !v,
 					onChange: (e) => {
-						e && ge(e.value);
+						e && be(e.value);
 					},
-					placeholder: q ? J : j.backend.name,
-					loading: fe,
-					options: K,
+					placeholder: W ? G : O.backend.name,
+					loading: he,
+					options: U,
 					className: "h-10 px-2 py-0 bg-transparent border-transparent hover:bg-[var(--oh-surface-raised)] focus-within:bg-[var(--oh-surface-raised)] focus-within:border-transparent focus-within:ring-0"
-				}, `${Y}-${X?.label ?? ""}`)
-			}), y ? null : /* @__PURE__ */ h(te, {
-				content: Q,
-				placement: de,
+				}, `${K}-${q?.label ?? ""}`)
+			}), v ? null : /* @__PURE__ */ h(te, {
+				content: Y,
+				placement: me,
 				offset: 10,
-				children: /* @__PURE__ */ h(ne, {
+				children: /* @__PURE__ */ h(re, {
 					to: "/settings",
 					"data-testid": "backend-selector-settings-link",
-					"data-active": Z,
-					"aria-label": Q,
-					className: i(Z ? "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer" : "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer", ee),
+					"data-active": J,
+					"aria-label": Y,
+					className: i(J ? "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer" : "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer", ee),
 					children: /* @__PURE__ */ h(r, {
 						width: 16,
 						height: 16
@@ -192,11 +204,11 @@ function T({ openUpward: p = !1, hideTrigger: y = !1, defaultOpen: T = !1, onSel
 				})
 			})]
 		}),
-		V ? /* @__PURE__ */ h(oe, { onClose: () => H(!1) }) : null,
-		U ? /* @__PURE__ */ h(se, { onClose: () => W(!1) }) : null
+		R ? /* @__PURE__ */ h(oe, { onClose: () => z(!1) }) : null,
+		B ? /* @__PURE__ */ h(se, { onClose: () => V(!1) }) : null
 	] });
 }
 //#endregion
-export { T as BackendSelector };
+export { x as BackendSelector };
 
 //# sourceMappingURL=backend-selector.js.map

package/dist/components/features/backends/backend-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"backend-selector.js","names":[],"sources":["../../../../src/components/features/backends/backend-selector.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useMatch, useNavigate } from \"react-router\";\nimport { Plus, Settings } from \"lucide-react\";\nimport { Dropdown } from \"#/ui/dropdown/dropdown\";\nimport { DropdownOption } from \"#/ui/dropdown/types\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport {\n  useBackendsHealth,\n  type BackendHealth,\n} from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend } from \"#/api/backend-registry/types\";\n// Import the trigger helpers from the lightweight store, not the overlay\n// component, so the eagerly-mounted sidebar/backend-selector graph does not\n// pull in the overlay's render code (the overlay is lazy-loaded from\n// `routes/root-layout.tsx`).\nimport {\n  ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS,\n  triggerEnvironmentSwitch,\n} from \"#/components/features/backends/environment-switch-store\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { AddBackendModal } from \"./add-backend-modal\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { ManageBackendsModal } from \"./manage-backends-modal\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlTransitionClassName } from \"#/utils/form-control-classes\";\nimport {\n  dropdownFooterActionClassName,\n  dropdownMenuListClassName,\n  dropdownMenuRowIconWrapperClassName,\n} from \"#/utils/dropdown-classes\";\n\nconst VALUE_SEPARATOR = \"::\";\n\nfunction makeOptionValue(backendId: string, orgId: string | null): string {\n  return orgId ? `${backendId}${VALUE_SEPARATOR}${orgId}` : backendId;\n}\n\nfunction parseOptionValue(value: string): {\n  backendId: string;\n  orgId: string | null;\n} {\n  const [backendId, orgId] = value.split(VALUE_SEPARATOR);\n  return { backendId, orgId: orgId ?? null };\n}\n\nfunction buildStatusPrefix(health: BackendHealth | undefined) {\n  return <BackendStatusDot isConnected={health?.isConnected ?? null} />;\n}\n\nfunction buildNoBackendPrefix() {\n  return <BackendStatusDot isConnected=\"unavailable\" />;\n}\n\nfunction buildOptions(\n  registered: Backend[],\n  personalWorkspaceLabel: string,\n  cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n  currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n  healthByBackendId: Record<string, BackendHealth>,\n): DropdownOption[] {\n  const options: DropdownOption[] = [];\n\n  const locals = registered.filter((b) => b.kind === \"local\");\n  const clouds = registered.filter((b) => b.kind === \"cloud\");\n\n  for (const b of locals) {\n    options.push({\n      value: makeOptionValue(b.id, null),\n      label: b.name,\n      prefix: buildStatusPrefix(healthByBackendId[b.id]),\n    });\n  }\n\n  for (const b of clouds) {\n    const entry = cloudOrgs[b.id];\n    const prefix = buildStatusPrefix(healthByBackendId[b.id]);\n    if (!entry || entry.orgs.length === 0) {\n      options.push({\n        value: makeOptionValue(b.id, null),\n        label: b.name,\n        prefix,\n      });\n    } else {\n      // Personal-workspace rule (per the cloud contract): the org whose\n      // id matches the calling user's id is the user's personal\n      // workspace. We resolve `user_id` once per backend (via /me on any\n      // one org) and apply it across all orgs of that backend.\n      const userIdForBackend = currentUserIds[b.id]?.userId ?? null;\n\n      for (const org of entry.orgs) {\n        const isPersonal = !!userIdForBackend && userIdForBackend === org.id;\n        const orgLabel = isPersonal ? personalWorkspaceLabel : org.name;\n        options.push({\n          value: makeOptionValue(b.id, org.id),\n          label: `${b.name} – ${orgLabel}`,\n          // All org rows for the same cloud backend share that backend's\n          // single connectivity verdict — there is no per-org probe.\n          prefix,\n        });\n      }\n    }\n  }\n\n  return options;\n}\n\ninterface BackendSelectorProps {\n  /** Render the menu above the trigger (e.g. when pinned to bottom of sidebar). */\n  openUpward?: boolean;\n  /** Hide the selector input trigger and only render the dropdown menu. */\n  hideTrigger?: boolean;\n  /** Whether the dropdown menu should start open on mount. */\n  defaultOpen?: boolean;\n  /** Callback fired after selecting a backend/org option. */\n  onSelectOption?: () => void;\n  /**\n   * Override the internal Add Backend modal handling. When provided,\n   * clicking \"Add Backend\" calls this instead of opening BackendSelector's\n   * own modal. Useful when the selector is mounted inside an ephemeral\n   * container (e.g. the collapsed-sidebar popover) and the modal must\n   * survive the parent unmounting.\n   */\n  onOpenAddBackend?: () => void;\n  /** Same as onOpenAddBackend but for the Manage Backends modal. */\n  onOpenManageBackends?: () => void;\n  /**\n   * Whether the surrounding sidebar rail is in its collapsed variant. Passed\n   * down from `SidebarRailBody` so the mobile drawer (which always renders\n   * the expanded rail) can override the persisted desktop value.\n   */\n  sidebarCollapsed?: boolean;\n}\n\nexport function BackendSelector({\n  openUpward = false,\n  hideTrigger = false,\n  defaultOpen = false,\n  onSelectOption,\n  onOpenAddBackend,\n  onOpenManageBackends,\n  sidebarCollapsed = false,\n}: BackendSelectorProps = {}) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, active, setActive } = useActiveBackendContext();\n  const cloudOrgs = useAllCloudOrganizations();\n  const currentUserIds = useCloudCurrentUserId();\n  // Probe each registered backend every 10s.\n  const healthByBackendId = useBackendsHealth(backends);\n  const navigate = useNavigate();\n  const settingsMatch = useMatch(\"/settings\");\n  const settingsSubrouteMatch = useMatch(\"/settings/*\");\n  const conversationMatch = useMatch(\"/conversations/:conversationId\");\n  const automationDetailMatch = useMatch(\"/automations/:automationId\");\n  const [addBackendModalOpen, setAddBackendModalOpen] = React.useState(false);\n  const [manageBackendsModalOpen, setManageBackendsModalOpen] =\n    React.useState(false);\n\n  const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n\n  const options = React.useMemo(\n    () =>\n      buildOptions(\n        backends,\n        personalWorkspaceLabel,\n        cloudOrgs,\n        currentUserIds,\n        healthByBackendId,\n      ),\n    [\n      backends,\n      personalWorkspaceLabel,\n      cloudOrgs,\n      currentUserIds,\n      healthByBackendId,\n    ],\n  );\n\n  const noBackendSelected = isNoBackend(active.backend);\n  const noBackendLabel = t(I18nKey.BACKEND$NO_BACKEND_AVAILABLE);\n  const activeValue = makeOptionValue(active.backend.id, active.orgId);\n  const activeOption = noBackendSelected\n    ? undefined\n    : options.find((o) => o.value === activeValue);\n  const isSettingsActive = Boolean(settingsMatch || settingsSubrouteMatch);\n  const settingsLabel = t(I18nKey.SIDEBAR$SETTINGS);\n  const isRightPanelShown = useConversationStore(\n    (state) => state.isRightPanelShown,\n  );\n  // When the sidebar rail is expanded, `placement=\"left\"` hugs the main\n  // canvas and reads awkwardly; prefer above the control. When the rail is\n  // collapsed, keep left except on active conversation + open right drawer.\n  const settingsTooltipPlacement =\n    !sidebarCollapsed || (conversationMatch && isRightPanelShown)\n      ? \"top\"\n      : \"left\";\n\n  const someCloudLoading = Object.values(cloudOrgs).some((c) => c.isLoading);\n\n  // Self-heal a malformed `(cloudBackendId, null)` selection.\n  //\n  // Once a cloud backend's orgs resolve, the dropdown only renders\n  // per-org rows for it — the `(backendId, null)` row disappears, so\n  // selecting that shape would drift from what the dropdown can render\n  // (UI says \"Local\", APIs hit cloud). When we detect the drift, snap\n  // the selection onto the personal-workspace org (or, lacking a /me\n  // result, the first org). The selection is recorded locally only;\n  // the cloud request scope follows from the API key's bound org and the\n  // X-Org-Id header sent by `callCloudProxy`, so the cloud UI's\n  // org choice is never mutated as a side effect.\n  React.useEffect(() => {\n    if (noBackendSelected || active.backend.kind !== \"cloud\" || active.orgId)\n      return;\n    const { backend } = active;\n    const entry = cloudOrgs[backend.id];\n    if (!entry || entry.orgs.length === 0) return;\n\n    const userId = currentUserIds[backend.id]?.userId ?? null;\n    const personal = userId\n      ? entry.orgs.find((o) => o.id === userId)\n      : undefined;\n    const target = personal ?? entry.orgs[0];\n    if (target) {\n      setActive(backend.id, target.id);\n    }\n  }, [active, cloudOrgs, currentUserIds, setActive, noBackendSelected]);\n\n  const openAddBackendModal = React.useCallback(() => {\n    if (onOpenAddBackend) {\n      onOpenAddBackend();\n      onSelectOption?.();\n      return;\n    }\n    setAddBackendModalOpen(true);\n  }, [onOpenAddBackend, onSelectOption]);\n\n  const openManageBackendsModal = React.useCallback(() => {\n    if (onOpenManageBackends) {\n      onOpenManageBackends();\n      onSelectOption?.();\n      return;\n    }\n    setManageBackendsModalOpen(true);\n  }, [onOpenManageBackends, onSelectOption]);\n\n  const preventDropdownMenuClose = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  const addBackendFooter = (\n    <div className={dropdownMenuListClassName}>\n      <button\n        type=\"button\"\n        data-testid=\"add-backend-menu-item\"\n        onMouseDown={preventDropdownMenuClose}\n        onClick={openAddBackendModal}\n        className={cn(\n          dropdownFooterActionClassName,\n          \"cursor-pointer rounded-md\",\n        )}\n      >\n        <span className={dropdownMenuRowIconWrapperClassName} aria-hidden>\n          <Plus width={16} height={16} />\n        </span>\n        {t(I18nKey.BACKEND$ADD)}\n      </button>\n      <button\n        type=\"button\"\n        data-testid=\"manage-backends-menu-item\"\n        onMouseDown={preventDropdownMenuClose}\n        onClick={openManageBackendsModal}\n        className={cn(\n          dropdownFooterActionClassName,\n          \"cursor-pointer rounded-md\",\n        )}\n      >\n        <span className={dropdownMenuRowIconWrapperClassName} aria-hidden>\n          <Settings width={16} height={16} />\n        </span>\n        {t(I18nKey.BACKEND$MANAGE)}\n      </button>\n    </div>\n  );\n\n  const handleSelectBackend = React.useCallback(\n    async (value: string) => {\n      if (value === activeValue) return;\n\n      const { backendId, orgId } = parseOptionValue(value);\n      const target = backends.find((b) => b.id === backendId);\n      if (!target) return;\n\n      triggerEnvironmentSwitch(\n        options.find((option) => option.value === value)?.label ?? target.name,\n      );\n      await new Promise<void>((resolve) => {\n        setTimeout(resolve, ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS);\n      });\n\n      // @spec BM-002 — Switching backends keeps the user on the same page\n      if (conversationMatch) navigate(\"/conversations\");\n      else if (automationDetailMatch) navigate(\"/automations\");\n\n      setActive(target.id, orgId);\n      onSelectOption?.();\n    },\n    [\n      activeValue,\n      backends,\n      conversationMatch,\n      automationDetailMatch,\n      navigate,\n      options,\n      setActive,\n      t,\n      onSelectOption,\n    ],\n  );\n\n  return (\n    <>\n      <div className=\"flex items-center gap-2 w-full\">\n        <div className=\"flex-1 min-w-0\">\n          <Dropdown\n            testId=\"backend-selector\"\n            key={`${activeValue}-${activeOption?.label ?? \"\"}`}\n            defaultValue={\n              activeOption ?? {\n                value: activeValue,\n                label: noBackendSelected ? noBackendLabel : active.backend.name,\n                prefix: noBackendSelected\n                  ? buildNoBackendPrefix()\n                  : buildStatusPrefix(healthByBackendId[active.backend.id]),\n              }\n            }\n            footer={addBackendFooter}\n            openUpward={openUpward}\n            hideTrigger={hideTrigger}\n            defaultOpen={defaultOpen}\n            openOnHover={!hideTrigger}\n            onChange={(item) => {\n              if (!item) return;\n              void handleSelectBackend(item.value);\n            }}\n            placeholder={\n              noBackendSelected ? noBackendLabel : active.backend.name\n            }\n            loading={someCloudLoading}\n            options={options}\n            className=\"h-10 px-2 py-0 bg-transparent border-transparent hover:bg-[var(--oh-surface-raised)] focus-within:bg-[var(--oh-surface-raised)] focus-within:border-transparent focus-within:ring-0\"\n          />\n        </div>\n        {!hideTrigger ? (\n          <StyledTooltip\n            content={settingsLabel}\n            placement={settingsTooltipPlacement}\n            offset={10}\n          >\n            <NavigationLink\n              to=\"/settings\"\n              data-testid=\"backend-selector-settings-link\"\n              data-active={isSettingsActive}\n              aria-label={settingsLabel}\n              className={\n                isSettingsActive\n                  ? cn(\n                      \"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer\",\n                      formControlTransitionClassName,\n                    )\n                  : cn(\n                      \"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer\",\n                      formControlTransitionClassName,\n                    )\n              }\n            >\n              <Settings width={16} height={16} />\n            </NavigationLink>\n          </StyledTooltip>\n        ) : null}\n      </div>\n      {addBackendModalOpen ? (\n        <AddBackendModal onClose={() => setAddBackendModalOpen(false)} />\n      ) : null}\n      {manageBackendsModalOpen ? (\n        <ManageBackendsModal\n          onClose={() => setManageBackendsModalOpen(false)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"backend-selector.js","names":[],"sources":["../../../../src/components/features/backends/backend-selector.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useMatch, useNavigate } from \"react-router\";\nimport { Plus, Settings } from \"lucide-react\";\nimport { Dropdown } from \"#/ui/dropdown/dropdown\";\nimport { DropdownOption } from \"#/ui/dropdown/types\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport {\n  useBackendsHealth,\n  type BackendHealth,\n} from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend } from \"#/api/backend-registry/types\";\n// Import the trigger helpers from the lightweight store, not the overlay\n// component, so the eagerly-mounted sidebar/backend-selector graph does not\n// pull in the overlay's render code (the overlay is lazy-loaded from\n// `routes/root-layout.tsx`).\nimport {\n  ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS,\n  triggerEnvironmentSwitch,\n} from \"#/components/features/backends/environment-switch-store\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { AddBackendModal } from \"./add-backend-modal\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { ManageBackendsModal } from \"./manage-backends-modal\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlTransitionClassName } from \"#/utils/form-control-classes\";\nimport {\n  dropdownFooterActionClassName,\n  dropdownMenuListClassName,\n  dropdownMenuRowIconWrapperClassName,\n} from \"#/utils/dropdown-classes\";\n\nconst VALUE_SEPARATOR = \"::\";\n\nfunction makeOptionValue(backendId: string, orgId: string | null): string {\n  return orgId ? `${backendId}${VALUE_SEPARATOR}${orgId}` : backendId;\n}\n\nfunction parseOptionValue(value: string): {\n  backendId: string;\n  orgId: string | null;\n} {\n  const [backendId, orgId] = value.split(VALUE_SEPARATOR);\n  return { backendId, orgId: orgId ?? null };\n}\n\nfunction buildStatusPrefix(health: BackendHealth | undefined) {\n  return <BackendStatusDot isConnected={health?.isConnected ?? null} />;\n}\n\nfunction buildNoBackendPrefix() {\n  return <BackendStatusDot isConnected=\"unavailable\" />;\n}\n\nfunction buildOptions(\n  registered: Backend[],\n  personalWorkspaceLabel: string,\n  cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n  currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n  healthByBackendId: Record<string, BackendHealth>,\n): DropdownOption[] {\n  const options: DropdownOption[] = [];\n\n  const locals = registered.filter((b) => b.kind === \"local\");\n  const clouds = registered.filter((b) => b.kind === \"cloud\");\n\n  for (const b of locals) {\n    options.push({\n      value: makeOptionValue(b.id, null),\n      label: b.name,\n      prefix: buildStatusPrefix(healthByBackendId[b.id]),\n    });\n  }\n\n  for (const b of clouds) {\n    const entry = cloudOrgs[b.id];\n    const prefix = buildStatusPrefix(healthByBackendId[b.id]);\n    if (!entry || entry.orgs.length === 0) {\n      options.push({\n        value: makeOptionValue(b.id, null),\n        label: b.name,\n        prefix,\n      });\n    } else {\n      // Personal-workspace rule (per the cloud contract): the org whose\n      // id matches the calling user's id is the user's personal\n      // workspace. We resolve `user_id` once per backend (via /me on any\n      // one org) and apply it across all orgs of that backend.\n      const userIdForBackend = currentUserIds[b.id]?.userId ?? null;\n\n      for (const org of entry.orgs) {\n        const isPersonal = !!userIdForBackend && userIdForBackend === org.id;\n        const orgLabel = isPersonal ? personalWorkspaceLabel : org.name;\n        options.push({\n          value: makeOptionValue(b.id, org.id),\n          label: `${b.name} – ${orgLabel}`,\n          // All org rows for the same cloud backend share that backend's\n          // single connectivity verdict — there is no per-org probe.\n          prefix,\n        });\n      }\n    }\n  }\n\n  return options;\n}\n\ninterface BackendSelectorProps {\n  /** Render the menu above the trigger (e.g. when pinned to bottom of sidebar). */\n  openUpward?: boolean;\n  /** Hide the selector input trigger and only render the dropdown menu. */\n  hideTrigger?: boolean;\n  /** Whether the dropdown menu should start open on mount. */\n  defaultOpen?: boolean;\n  /** Callback fired after selecting a backend/org option. */\n  onSelectOption?: () => void;\n  /**\n   * Override the internal Add Backend modal handling. When provided,\n   * clicking \"Add Backend\" calls this instead of opening BackendSelector's\n   * own modal. Useful when the selector is mounted inside an ephemeral\n   * container (e.g. the collapsed-sidebar popover) and the modal must\n   * survive the parent unmounting.\n   */\n  onOpenAddBackend?: () => void;\n  /** Same as onOpenAddBackend but for the Manage Backends modal. */\n  onOpenManageBackends?: () => void;\n  /**\n   * Whether the surrounding sidebar rail is in its collapsed variant. Passed\n   * down from `SidebarRailBody` so the mobile drawer (which always renders\n   * the expanded rail) can override the persisted desktop value.\n   */\n  sidebarCollapsed?: boolean;\n}\n\nexport function BackendSelector({\n  openUpward = false,\n  hideTrigger = false,\n  defaultOpen = false,\n  onSelectOption,\n  onOpenAddBackend,\n  onOpenManageBackends,\n  sidebarCollapsed = false,\n}: BackendSelectorProps = {}) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, active, setActive } = useActiveBackendContext();\n  const cloudOrgs = useAllCloudOrganizations();\n  const currentUserIds = useCloudCurrentUserId();\n  // Probe each registered backend every 10s.\n  const healthByBackendId = useBackendsHealth(backends);\n  const navigate = useNavigate();\n  const settingsMatch = useMatch(\"/settings\");\n  const settingsSubrouteMatch = useMatch(\"/settings/*\");\n  const conversationMatch = useMatch(\"/conversations/:conversationId\");\n  const automationDetailMatch = useMatch(\"/automations/:automationId\");\n  const [addBackendModalOpen, setAddBackendModalOpen] = React.useState(false);\n  const [manageBackendsModalOpen, setManageBackendsModalOpen] =\n    React.useState(false);\n\n  const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n\n  const options = React.useMemo(\n    () =>\n      buildOptions(\n        backends,\n        personalWorkspaceLabel,\n        cloudOrgs,\n        currentUserIds,\n        healthByBackendId,\n      ),\n    [\n      backends,\n      personalWorkspaceLabel,\n      cloudOrgs,\n      currentUserIds,\n      healthByBackendId,\n    ],\n  );\n\n  const noBackendSelected = isNoBackend(active.backend);\n  const noBackendLabel = t(I18nKey.BACKEND$NO_BACKEND_AVAILABLE);\n  const activeValue = makeOptionValue(active.backend.id, active.orgId);\n  const activeOption = noBackendSelected\n    ? undefined\n    : options.find((o) => o.value === activeValue);\n  const isSettingsActive = Boolean(settingsMatch || settingsSubrouteMatch);\n  const settingsLabel = t(I18nKey.SIDEBAR$SETTINGS);\n  const isRightPanelShown = useConversationStore(\n    (state) => state.isRightPanelShown,\n  );\n  // When the sidebar rail is expanded, `placement=\"left\"` hugs the main\n  // canvas and reads awkwardly; prefer above the control. When the rail is\n  // collapsed, keep left except on active conversation + open right drawer.\n  const settingsTooltipPlacement =\n    !sidebarCollapsed || (conversationMatch && isRightPanelShown)\n      ? \"top\"\n      : \"left\";\n\n  const someCloudLoading = Object.values(cloudOrgs).some((c) => c.isLoading);\n\n  // Self-heal a malformed `(cloudBackendId, null)` selection.\n  //\n  // Once a cloud backend's orgs resolve, the dropdown only renders\n  // per-org rows for it — the `(backendId, null)` row disappears, so\n  // selecting that shape would drift from what the dropdown can render\n  // (UI says \"Local\", APIs hit cloud). When we detect the drift, snap\n  // the selection onto the personal-workspace org (or, lacking a /me\n  // result, the first org). The selection is recorded locally only;\n  // the cloud request scope follows from the API key's bound org and the\n  // X-Org-Id header sent by `callCloudProxy`, so the cloud UI's\n  // org choice is never mutated as a side effect.\n  React.useEffect(() => {\n    if (noBackendSelected || active.backend.kind !== \"cloud\" || active.orgId)\n      return;\n    const { backend } = active;\n    const entry = cloudOrgs[backend.id];\n    if (!entry || entry.orgs.length === 0) return;\n\n    const userId = currentUserIds[backend.id]?.userId ?? null;\n    const personal = userId\n      ? entry.orgs.find((o) => o.id === userId)\n      : undefined;\n    const target = personal ?? entry.orgs[0];\n    if (target) {\n      setActive(backend.id, target.id);\n    }\n  }, [active, cloudOrgs, currentUserIds, setActive, noBackendSelected]);\n\n  const openAddBackendModal = React.useCallback(() => {\n    if (onOpenAddBackend) {\n      onOpenAddBackend();\n      onSelectOption?.();\n      return;\n    }\n    setAddBackendModalOpen(true);\n  }, [onOpenAddBackend, onSelectOption]);\n\n  const openManageBackendsModal = React.useCallback(() => {\n    if (onOpenManageBackends) {\n      onOpenManageBackends();\n      onSelectOption?.();\n      return;\n    }\n    setManageBackendsModalOpen(true);\n  }, [onOpenManageBackends, onSelectOption]);\n\n  const preventDropdownMenuClose = React.useCallback(\n    (event: React.SyntheticEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  const handleAddBackendClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      preventDropdownMenuClose(event);\n      openAddBackendModal();\n    },\n    [openAddBackendModal, preventDropdownMenuClose],\n  );\n\n  const handleAddBackendTouchEnd = React.useCallback(\n    (event: React.TouchEvent<HTMLButtonElement>) => {\n      preventDropdownMenuClose(event);\n      openAddBackendModal();\n    },\n    [openAddBackendModal, preventDropdownMenuClose],\n  );\n\n  const handleManageBackendsClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      preventDropdownMenuClose(event);\n      openManageBackendsModal();\n    },\n    [openManageBackendsModal, preventDropdownMenuClose],\n  );\n\n  const handleManageBackendsTouchEnd = React.useCallback(\n    (event: React.TouchEvent<HTMLButtonElement>) => {\n      preventDropdownMenuClose(event);\n      openManageBackendsModal();\n    },\n    [openManageBackendsModal, preventDropdownMenuClose],\n  );\n\n  const addBackendFooter = (\n    <div className={dropdownMenuListClassName}>\n      <button\n        type=\"button\"\n        data-testid=\"add-backend-menu-item\"\n        onMouseDown={preventDropdownMenuClose}\n        onTouchStart={preventDropdownMenuClose}\n        onTouchEnd={handleAddBackendTouchEnd}\n        onClick={handleAddBackendClick}\n        className={cn(\n          dropdownFooterActionClassName,\n          \"cursor-pointer rounded-md\",\n        )}\n      >\n        <span className={dropdownMenuRowIconWrapperClassName} aria-hidden>\n          <Plus width={16} height={16} />\n        </span>\n        {t(I18nKey.BACKEND$ADD)}\n      </button>\n      <button\n        type=\"button\"\n        data-testid=\"manage-backends-menu-item\"\n        onMouseDown={preventDropdownMenuClose}\n        onTouchStart={preventDropdownMenuClose}\n        onTouchEnd={handleManageBackendsTouchEnd}\n        onClick={handleManageBackendsClick}\n        className={cn(\n          dropdownFooterActionClassName,\n          \"cursor-pointer rounded-md\",\n        )}\n      >\n        <span className={dropdownMenuRowIconWrapperClassName} aria-hidden>\n          <Settings width={16} height={16} />\n        </span>\n        {t(I18nKey.BACKEND$MANAGE)}\n      </button>\n    </div>\n  );\n\n  const handleSelectBackend = React.useCallback(\n    async (value: string) => {\n      if (value === activeValue) return;\n\n      const { backendId, orgId } = parseOptionValue(value);\n      const target = backends.find((b) => b.id === backendId);\n      if (!target) return;\n\n      triggerEnvironmentSwitch(\n        options.find((option) => option.value === value)?.label ?? target.name,\n      );\n      await new Promise<void>((resolve) => {\n        setTimeout(resolve, ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS);\n      });\n\n      // @spec BM-002 — Switching backends keeps the user on the same page\n      if (conversationMatch) navigate(\"/conversations\");\n      else if (automationDetailMatch) navigate(\"/automations\");\n\n      setActive(target.id, orgId);\n      onSelectOption?.();\n    },\n    [\n      activeValue,\n      backends,\n      conversationMatch,\n      automationDetailMatch,\n      navigate,\n      options,\n      setActive,\n      t,\n      onSelectOption,\n    ],\n  );\n\n  return (\n    <>\n      <div className=\"flex items-center gap-2 w-full\">\n        <div className=\"flex-1 min-w-0\">\n          <Dropdown\n            testId=\"backend-selector\"\n            key={`${activeValue}-${activeOption?.label ?? \"\"}`}\n            defaultValue={\n              activeOption ?? {\n                value: activeValue,\n                label: noBackendSelected ? noBackendLabel : active.backend.name,\n                prefix: noBackendSelected\n                  ? buildNoBackendPrefix()\n                  : buildStatusPrefix(healthByBackendId[active.backend.id]),\n              }\n            }\n            footer={addBackendFooter}\n            openUpward={openUpward}\n            hideTrigger={hideTrigger}\n            defaultOpen={defaultOpen}\n            openOnHover={!hideTrigger}\n            onChange={(item) => {\n              if (!item) return;\n              void handleSelectBackend(item.value);\n            }}\n            placeholder={\n              noBackendSelected ? noBackendLabel : active.backend.name\n            }\n            loading={someCloudLoading}\n            options={options}\n            className=\"h-10 px-2 py-0 bg-transparent border-transparent hover:bg-[var(--oh-surface-raised)] focus-within:bg-[var(--oh-surface-raised)] focus-within:border-transparent focus-within:ring-0\"\n          />\n        </div>\n        {!hideTrigger ? (\n          <StyledTooltip\n            content={settingsLabel}\n            placement={settingsTooltipPlacement}\n            offset={10}\n          >\n            <NavigationLink\n              to=\"/settings\"\n              data-testid=\"backend-selector-settings-link\"\n              data-active={isSettingsActive}\n              aria-label={settingsLabel}\n              className={\n                isSettingsActive\n                  ? cn(\n                      \"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer\",\n                      formControlTransitionClassName,\n                    )\n                  : cn(\n                      \"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer\",\n                      formControlTransitionClassName,\n                    )\n              }\n            >\n              <Settings width={16} height={16} />\n            </NavigationLink>\n          </StyledTooltip>\n        ) : null}\n      </div>\n      {addBackendModalOpen ? (\n        <AddBackendModal onClose={() => setAddBackendModalOpen(false)} />\n      ) : null}\n      {manageBackendsModalOpen ? (\n        <ManageBackendsModal\n          onClose={() => setManageBackendsModalOpen(false)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsCA,IAAM,IAAkB;AAExB,SAAS,EAAgB,GAAmB,GAA8B;AACxE,QAAO,IAAQ,GAAG,IAAY,IAAkB,MAAU;;AAG5D,SAAS,GAAiB,GAGxB;CACA,IAAM,CAAC,GAAW,KAAS,EAAM,MAAM,EAAgB;AACvD,QAAO;EAAE;EAAW,OAAO,KAAS;EAAM;;AAG5C,SAAS,EAAkB,GAAmC;AAC5D,QAAO,kBAAC,GAAD,EAAkB,aAAa,GAAQ,eAAe,MAAQ,CAAA;;AAGvE,SAAS,KAAuB;AAC9B,QAAO,kBAAC,GAAD,EAAkB,aAAY,eAAgB,CAAA;;AAGvD,SAAS,GACP,GACA,GACA,GACA,GACA,GACkB;CAClB,IAAM,IAA4B,EAAE,EAE9B,IAAS,EAAW,QAAQ,MAAM,EAAE,SAAS,QAAQ,EACrD,IAAS,EAAW,QAAQ,MAAM,EAAE,SAAS,QAAQ;AAE3D,MAAK,IAAM,KAAK,EACd,GAAQ,KAAK;EACX,OAAO,EAAgB,EAAE,IAAI,KAAK;EAClC,OAAO,EAAE;EACT,QAAQ,EAAkB,EAAkB,EAAE,IAAI;EACnD,CAAC;AAGJ,MAAK,IAAM,KAAK,GAAQ;EACtB,IAAM,IAAQ,EAAU,EAAE,KACpB,IAAS,EAAkB,EAAkB,EAAE,IAAI;AACzD,MAAI,CAAC,KAAS,EAAM,KAAK,WAAW,EAClC,GAAQ,KAAK;GACX,OAAO,EAAgB,EAAE,IAAI,KAAK;GAClC,OAAO,EAAE;GACT;GACD,CAAC;OACG;GAKL,IAAM,IAAmB,EAAe,EAAE,KAAK,UAAU;AAEzD,QAAK,IAAM,KAAO,EAAM,MAAM;IAE5B,IAAM,IADe,KAAoB,MAAqB,EAAI,KACpC,IAAyB,EAAI;AAC3D,MAAQ,KAAK;KACX,OAAO,EAAgB,EAAE,IAAI,EAAI,GAAG;KACpC,OAAO,GAAG,EAAE,KAAK,KAAK;KAGtB;KACD,CAAC;;;;AAKR,QAAO;;AA8BT,SAAgB,EAAgB,EAC9B,gBAAa,IACb,iBAAc,IACd,iBAAc,IACd,mBACA,qBACA,yBACA,sBAAmB,OACK,EAAE,EAAE;CAC5B,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,aAAU,WAAQ,iBAAc,GAAyB,EAC3D,IAAY,IAA0B,EACtC,IAAiB,IAAuB,EAExC,IAAoB,EAAkB,EAAS,EAC/C,IAAW,IAAa,EACxB,IAAgB,EAAS,YAAY,EACrC,IAAwB,EAAS,cAAc,EAC/C,IAAoB,EAAS,iCAAiC,EAC9D,IAAwB,EAAS,6BAA6B,EAC9D,CAAC,GAAqB,KAA0B,EAAM,SAAS,GAAM,EACrE,CAAC,GAAyB,KAC9B,EAAM,SAAS,GAAM,EAEjB,IAAyB,EAAE,EAAQ,2BAA2B,EAE9D,IAAU,EAAM,cAElB,GACE,GACA,GACA,GACA,GACA,EACD,EACH;EACE;EACA;EACA;EACA;EACA;EACD,CACF,EAEK,IAAoB,EAAY,EAAO,QAAQ,EAC/C,IAAiB,EAAE,EAAQ,6BAA6B,EACxD,IAAc,EAAgB,EAAO,QAAQ,IAAI,EAAO,MAAM,EAC9D,IAAe,IACjB,KAAA,IACA,EAAQ,MAAM,MAAM,EAAE,UAAU,EAAY,EAC1C,IAAmB,GAAQ,KAAiB,IAC5C,IAAgB,EAAE,EAAQ,iBAAiB,EAC3C,KAAoB,GACvB,MAAU,EAAM,kBAClB,EAIK,KACJ,CAAC,KAAqB,KAAqB,KACvC,QACA,QAEA,KAAmB,OAAO,OAAO,EAAU,CAAC,MAAM,MAAM,EAAE,UAAU;AAa1E,GAAM,gBAAgB;AACpB,MAAI,KAAqB,EAAO,QAAQ,SAAS,WAAW,EAAO,MACjE;EACF,IAAM,EAAE,eAAY,GACd,IAAQ,EAAU,EAAQ;AAChC,MAAI,CAAC,KAAS,EAAM,KAAK,WAAW,EAAG;EAEvC,IAAM,IAAS,EAAe,EAAQ,KAAK,UAAU,MAI/C,KAHW,IACb,EAAM,KAAK,MAAM,MAAM,EAAE,OAAO,EAAO,GACvC,KAAA,MACuB,EAAM,KAAK;AACtC,EAAI,KACF,EAAU,EAAQ,IAAI,EAAO,GAAG;IAEjC;EAAC;EAAQ;EAAW;EAAgB;EAAW;EAAkB,CAAC;CAErE,IAAM,IAAsB,EAAM,kBAAkB;AAClD,MAAI,GAAkB;AAEpB,GADA,GAAkB,EAClB,KAAkB;AAClB;;AAEF,IAAuB,GAAK;IAC3B,CAAC,GAAkB,EAAe,CAAC,EAEhC,IAA0B,EAAM,kBAAkB;AACtD,MAAI,GAAsB;AAExB,GADA,GAAsB,EACtB,KAAkB;AAClB;;AAEF,IAA2B,GAAK;IAC/B,CAAC,GAAsB,EAAe,CAAC,EAEpC,IAA2B,EAAM,aACpC,MAAmD;AAElD,EADA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB;IAEzB,EAAE,CACH,EAEK,KAAwB,EAAM,aACjC,MAA+C;AAE9C,EADA,EAAyB,EAAM,EAC/B,GAAqB;IAEvB,CAAC,GAAqB,EAAyB,CAChD,EAEK,IAA2B,EAAM,aACpC,MAA+C;AAE9C,EADA,EAAyB,EAAM,EAC/B,GAAqB;IAEvB,CAAC,GAAqB,EAAyB,CAChD,EAEK,KAA4B,EAAM,aACrC,MAA+C;AAE9C,EADA,EAAyB,EAAM,EAC/B,GAAyB;IAE3B,CAAC,GAAyB,EAAyB,CACpD,EAEK,KAA+B,EAAM,aACxC,MAA+C;AAE9C,EADA,EAAyB,EAAM,EAC/B,GAAyB;IAE3B,CAAC,GAAyB,EAAyB,CACpD,EAEK,KACJ,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAY;GACZ,aAAa;GACb,cAAc;GACd,YAAY;GACZ,SAAS;GACT,WAAW,EACT,GACA,4BACD;aAVH,CAYE,kBAAC,QAAD;IAAM,WAAW;IAAqC,eAAA;cACpD,kBAAC,GAAD;KAAM,OAAO;KAAI,QAAQ;KAAM,CAAA;IAC1B,CAAA,EACN,EAAE,EAAQ,YAAY,CAChB;MACT,kBAAC,UAAD;GACE,MAAK;GACL,eAAY;GACZ,aAAa;GACb,cAAc;GACd,YAAY;GACZ,SAAS;GACT,WAAW,EACT,GACA,4BACD;aAVH,CAYE,kBAAC,QAAD;IAAM,WAAW;IAAqC,eAAA;cACpD,kBAAC,GAAD;KAAU,OAAO;KAAI,QAAQ;KAAM,CAAA;IAC9B,CAAA,EACN,EAAE,EAAQ,eAAe,CACnB;KACL;KAGF,KAAsB,EAAM,YAChC,OAAO,MAAkB;AACvB,MAAI,MAAU,EAAa;EAE3B,IAAM,EAAE,cAAW,aAAU,GAAiB,EAAM,EAC9C,IAAS,EAAS,MAAM,MAAM,EAAE,OAAO,EAAU;AAClD,QAEL,EACE,EAAQ,MAAM,MAAW,EAAO,UAAU,EAAM,EAAE,SAAS,EAAO,KACnE,EACD,MAAM,IAAI,SAAe,MAAY;AACnC,cAAW,GAAA,IAA+C;IAC1D,EAGE,IAAmB,EAAS,iBAAiB,GACxC,KAAuB,EAAS,eAAe,EAExD,EAAU,EAAO,IAAI,EAAM,EAC3B,KAAkB;IAEpB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAED,QACE,kBAAA,IAAA,EAAA,UAAA;EACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KACE,QAAO;KAEP,cACE,KAAgB;MACd,OAAO;MACP,OAAO,IAAoB,IAAiB,EAAO,QAAQ;MAC3D,QAAQ,IACJ,IAAsB,GACtB,EAAkB,EAAkB,EAAO,QAAQ,IAAI;MAC5D;KAEH,QAAQ;KACI;KACC;KACA;KACb,aAAa,CAAC;KACd,WAAW,MAAS;AACb,WACA,GAAoB,EAAK,MAAM;;KAEtC,aACE,IAAoB,IAAiB,EAAO,QAAQ;KAEtD,SAAS;KACA;KACT,WAAU;KACV,EAzBK,GAAG,EAAY,GAAG,GAAc,SAAS,KAyB9C;IACE,CAAA,EACJ,IA0BE,OAzBF,kBAAC,IAAD;IACE,SAAS;IACT,WAAW;IACX,QAAQ;cAER,kBAAC,IAAD;KACE,IAAG;KACH,eAAY;KACZ,eAAa;KACb,cAAY;KACZ,WAEM,EADJ,IAEM,0HAIA,kKAHA,GAKD;eAGP,kBAAC,GAAD;MAAU,OAAO;MAAI,QAAQ;MAAM,CAAA;KACpB,CAAA;IACH,CAAA,CAEd;;EACL,IACC,kBAAC,IAAD,EAAiB,eAAe,EAAuB,GAAM,EAAI,CAAA,GAC/D;EACH,IACC,kBAAC,IAAD,EACE,eAAe,EAA2B,GAAM,EAChD,CAAA,GACA;EACH,EAAA,CAAA"}

package/dist/components/features/backends/manage-backends-modal.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../node_modules/lucide-react/dist/esm/icons/pencil.cjs`),i=require(`../../../node_modules/lucide-react/dist/esm/icons/plus.cjs`),a=require(`../../../node_modules/lucide-react/dist/esm/icons/trash-2.cjs`),o=require(`../../../utils/utils.cjs`),s=require(`../../../node_modules/@openhands/typescript-client/dist/client/server-client.cjs`),c=require(`../../../api/agent-server-client-options.cjs`),l=require(`../../../node_modules/@tanstack/react-query/build/modern/useQuery.cjs`),u=require(`../../../contexts/active-backend-context.cjs`),d=require(`../../shared/modals/modal-backdrop.cjs`),f=require(`../../shared/modals/modal-body.cjs`),p=require(`../../../utils/modal-classes.cjs`),m=require(`../../shared/modals/modal-close-button.cjs`),h=require(`../settings/brand-button.cjs`),g=require(`../../shared/modals/confirmation-modal.cjs`),_=require(`../../../hooks/query/use-backends-health.cjs`),v=require(`./backend-status-dot.cjs`),y=require(`./backend-form-modal.cjs`);let b=require(`react`);b=e.__toESM(b,1);let x=require(`react/jsx-runtime`);var S=`inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-muted transition-colors hover:bg-interactive-hover hover:text-white`;function C({backend:e}){let{t:r}=t.useTranslation(`openhands`),{data:i}=l.useQuery({queryKey:[`backend-version`,e.host,e.apiKey],queryFn:async()=>(await new s.ServerClient(c.getAgentServerClientOptions({host:e.host,sessionApiKey:e.apiKey||null,timeout:5e3})).getServerInfo()).version??null,retry:!1,staleTime:6e4,enabled:e.kind===`local`});return i?(0,x.jsx)(`span`,{className:`inline-flex shrink-0 items-center rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-1.5 py-0.5 text-[10px] font-medium leading-none text-[var(--oh-text-dim)]`,"data-testid":`manage-backends-version-${e.name}`,children:r(n.I18nKey.BACKEND$VERSION_LABEL,{version:i})}):null}function w({backend:e,health:i,onSelect:s,onEdit:c,onRemove:l}){let{t:u}=t.useTranslation(`openhands`),d=_.isInvalidBackendApiKeyHealthError(i?.lastError),f,p=`text-[var(--oh-muted)]`;d?(f=u(n.I18nKey.AUTH$INVALID_KEY),p=`text-red-300`):i?.isConnected===!0?(f=u(n.I18nKey.ONBOARDING$BACKEND_STATUS_CONNECTED),p=`text-green-300`):i?.isConnected===!1?(f=u(n.I18nKey.ONBOARDING$BACKEND_STATUS_DISCONNECTED),p=`text-red-300`):f=u(n.I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING);let m=d?!1:i?.isConnected??null,h=i?.isConnected===!0&&!d;return(0,x.jsxs)(`li`,{className:`flex items-stretch`,"data-testid":`manage-backends-row-${e.name}`,children:[(0,x.jsxs)(`button`,{type:`button`,disabled:!h,onClick:s,className:o.cn(`flex min-w-0 flex-1 items-center gap-3 px-3 py-3 text-left`,h?`cursor-pointer transition-colors hover:bg-interactive-hover focus-visible:bg-interactive-hover focus-visible:outline-none`:`cursor-default`),children:[(0,x.jsx)(v.BackendStatusDot,{isConnected:m}),(0,x.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col`,children:[(0,x.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[(0,x.jsx)(`span`,{className:`truncate text-sm text-white`,children:e.name}),(0,x.jsx)(C,{backend:e})]}),(0,x.jsx)(`span`,{className:`truncate text-xs text-[var(--oh-muted)]`,children:e.host}),(0,x.jsx)(`span`,{"data-testid":`manage-backends-status-${e.name}`,className:o.cn(`truncate text-xs`,p),children:f})]}),(0,x.jsx)(`span`,{className:`px-2 py-1 rounded-full text-[11px] uppercase tracking-wide text-[var(--oh-text-tertiary)] bg-[var(--oh-surface)] border border-[var(--oh-border)]`,children:e.kind===`cloud`?u(n.I18nKey.BACKEND$KIND_CLOUD):u(n.I18nKey.BACKEND$KIND_LOCAL)})]}),(0,x.jsxs)(`div`,{className:`flex shrink-0 items-center gap-0.5 px-3 py-3`,children:[(0,x.jsx)(`button`,{type:`button`,onClick:c,"aria-label":u(n.I18nKey.BACKEND$EDIT),"data-testid":`manage-backends-edit-${e.name}`,className:S,children:(0,x.jsx)(r.Pencil,{"aria-hidden":!0,className:`size-4`,strokeWidth:2})}),(0,x.jsx)(`button`,{type:`button`,onClick:l,"aria-label":u(n.I18nKey.BACKEND$REMOVE),"data-testid":`manage-backends-remove-${e.name}`,className:S,children:(0,x.jsx)(a.Trash2,{"aria-hidden":!0,className:`size-4`,strokeWidth:2})})]})]})}function T({onClose:e,recoveryMode:r=!1}){let{t:a}=t.useTranslation(`openhands`),{backends:s,active:c,removeBackend:l,setActive:v}=u.useActiveBackendContext(),S=_.useBackendsHealth(s,{probeDisabledOnce:!0}),[C,T]=b.default.useState(null),[E,D]=b.default.useState(null),[O,k]=b.default.useState(!1),A=()=>{C&&(l(C.id),T(null))},j=b.default.useCallback(t=>{(c.backend.id!==t.id||c.orgId!==null)&&v(t.id),e()},[c.backend.id,c.orgId,e,v]);return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(d.ModalBackdrop,{onClose:r?void 0:e,closeOnEscape:!r,closeOnBackdropClick:!r,"aria-label":a(n.I18nKey.BACKEND$MANAGE_TITLE),children:(0,x.jsxs)(`div`,{"data-testid":`manage-backends-modal`,className:o.cn(`relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl`,f.modalWidthClassName(`lg`),f.MODAL_MAX_WIDTH_VIEWPORT,`max-h-[70vh]`),children:[r?null:(0,x.jsx)(m.ModalCloseButton,{onClose:e,testId:`close-manage-backends-modal`}),(0,x.jsx)(`div`,{className:o.cn(`p-5`,!r&&`pr-12`),children:(0,x.jsx)(`h2`,{className:p.modalTitleLgClassName,children:a(n.I18nKey.BACKEND$MANAGE_TITLE)})}),(0,x.jsx)(`div`,{className:`flex min-h-0 flex-1 flex-col px-5`,children:(0,x.jsx)(`div`,{className:`flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always`,"data-testid":`manage-backends-list`,children:s.length===0?(0,x.jsx)(`p`,{className:`px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]`,children:a(n.I18nKey.BACKEND$MANAGE_EMPTY)}):(0,x.jsx)(`ul`,{className:`divide-y divide-[var(--oh-border)]`,children:s.map(e=>(0,x.jsx)(w,{backend:e,health:S[e.id],onSelect:()=>j(e),onEdit:()=>D(e),onRemove:()=>T({id:e.id,name:e.name})},e.id))})})}),(0,x.jsxs)(`div`,{className:`flex justify-end gap-2 p-5`,children:[(0,x.jsx)(h.BrandButton,{type:`button`,variant:r?`primary`:`secondary`,onClick:()=>k(!0),testId:`manage-backends-add`,startContent:(0,x.jsx)(i.Plus,{width:14,height:14}),children:a(n.I18nKey.BACKEND$ADD)}),r?null:(0,x.jsx)(h.BrandButton,{type:`button`,variant:`primary`,onClick:e,testId:`manage-backends-done`,children:a(n.I18nKey.HOME$DONE)})]})]})}),O?(0,x.jsx)(y.BackendFormModal,{mode:`add`,onClose:()=>k(!1)}):null,E?(0,x.jsx)(y.BackendFormModal,{mode:`edit`,backend:E,onClose:()=>D(null)}):null,C?(0,x.jsx)(g.ConfirmationModal,{text:a(n.I18nKey.BACKEND$REMOVE_CONFIRMATION,{name:C.name}),onConfirm:A,onCancel:()=>T(null)}):null]})}exports.ManageBackendsModal=T;
+const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../node_modules/lucide-react/dist/esm/icons/pencil.cjs`),i=require(`../../../node_modules/lucide-react/dist/esm/icons/plus.cjs`),a=require(`../../../node_modules/lucide-react/dist/esm/icons/trash-2.cjs`),o=require(`../../../utils/utils.cjs`),s=require(`../../../node_modules/@openhands/typescript-client/dist/client/server-client.cjs`),c=require(`../../../api/agent-server-client-options.cjs`),l=require(`../../../node_modules/@tanstack/react-query/build/modern/useQuery.cjs`),u=require(`../../../contexts/active-backend-context.cjs`),d=require(`../../shared/modals/modal-backdrop.cjs`),f=require(`../../shared/modals/modal-body.cjs`),p=require(`../../../utils/modal-classes.cjs`),m=require(`../../shared/modals/modal-close-button.cjs`),h=require(`../settings/brand-button.cjs`),g=require(`../../shared/modals/confirmation-modal.cjs`),_=require(`../../../hooks/query/use-backends-health.cjs`),v=require(`./backend-status-dot.cjs`),y=require(`./backend-form-modal.cjs`);let b=require(`react`);b=e.__toESM(b,1);let x=require(`react/jsx-runtime`);var S=`inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-muted transition-colors hover:bg-interactive-hover hover:text-white`;function C({backend:e}){let{t:r}=t.useTranslation(`openhands`),{data:i}=l.useQuery({queryKey:[`backend-version`,e.host,e.apiKey],queryFn:async()=>(await new s.ServerClient(c.getAgentServerClientOptions({host:e.host,sessionApiKey:e.apiKey||null,timeout:5e3})).getServerInfo()).version??null,retry:!1,staleTime:6e4,enabled:e.kind===`local`});return i?(0,x.jsx)(`span`,{className:`inline-flex shrink-0 items-center rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-1.5 py-0.5 text-[10px] font-medium leading-none text-[var(--oh-text-dim)]`,"data-testid":`manage-backends-version-${e.name}`,children:r(n.I18nKey.BACKEND$VERSION_LABEL,{version:i})}):null}function w({backend:e,health:i,onSelect:s,onEdit:c,onRemove:l}){let{t:u}=t.useTranslation(`openhands`),d=_.isInvalidBackendApiKeyHealthError(i?.lastError),f=!d&&i?.isConnected===!1&&i.lastError?i.lastError:null,p,m=`text-[var(--oh-muted)]`;d?(p=u(n.I18nKey.AUTH$INVALID_KEY),m=`text-red-300`):i?.isConnected===!0?(p=u(n.I18nKey.ONBOARDING$BACKEND_STATUS_CONNECTED),m=`text-green-300`):i?.isConnected===!1?(p=u(n.I18nKey.ONBOARDING$BACKEND_STATUS_DISCONNECTED),m=`text-red-300`):p=u(n.I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING);let h=d?!1:i?.isConnected??null,g=i?.isConnected===!0&&!d;return(0,x.jsxs)(`li`,{className:`flex items-stretch`,"data-testid":`manage-backends-row-${e.name}`,children:[(0,x.jsxs)(`button`,{type:`button`,disabled:!g,onClick:s,className:o.cn(`flex min-w-0 flex-1 items-center gap-3 px-3 py-3 text-left`,g?`cursor-pointer transition-colors hover:bg-interactive-hover focus-visible:bg-interactive-hover focus-visible:outline-none`:`cursor-default`),children:[(0,x.jsx)(v.BackendStatusDot,{isConnected:h}),(0,x.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col`,children:[(0,x.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[(0,x.jsx)(`span`,{className:`truncate text-sm text-white`,children:e.name}),(0,x.jsx)(C,{backend:e})]}),(0,x.jsx)(`span`,{className:`truncate text-xs text-[var(--oh-muted)]`,children:e.host}),(0,x.jsx)(`span`,{"data-testid":`manage-backends-status-${e.name}`,className:o.cn(`truncate text-xs`,m),children:p}),f?(0,x.jsx)(`span`,{"data-testid":`manage-backends-status-detail-${e.name}`,title:f,className:`text-xs text-red-300/80 whitespace-normal break-words`,children:f}):null]}),(0,x.jsx)(`span`,{className:`px-2 py-1 rounded-full text-[11px] uppercase tracking-wide text-[var(--oh-text-tertiary)] bg-[var(--oh-surface)] border border-[var(--oh-border)]`,children:e.kind===`cloud`?u(n.I18nKey.BACKEND$KIND_CLOUD):u(n.I18nKey.BACKEND$KIND_LOCAL)})]}),(0,x.jsxs)(`div`,{className:`flex shrink-0 items-center gap-0.5 px-3 py-3`,children:[(0,x.jsx)(`button`,{type:`button`,onClick:c,"aria-label":u(n.I18nKey.BACKEND$EDIT),"data-testid":`manage-backends-edit-${e.name}`,className:S,children:(0,x.jsx)(r.Pencil,{"aria-hidden":!0,className:`size-4`,strokeWidth:2})}),(0,x.jsx)(`button`,{type:`button`,onClick:l,"aria-label":u(n.I18nKey.BACKEND$REMOVE),"data-testid":`manage-backends-remove-${e.name}`,className:S,children:(0,x.jsx)(a.Trash2,{"aria-hidden":!0,className:`size-4`,strokeWidth:2})})]})]})}function T({onClose:e,recoveryMode:r=!1}){let{t:a}=t.useTranslation(`openhands`),{backends:s,active:c,removeBackend:l,setActive:v}=u.useActiveBackendContext(),S=_.useBackendsHealth(s,{probeDisabledOnce:!0}),[C,T]=b.default.useState(null),[E,D]=b.default.useState(null),[O,k]=b.default.useState(!1),A=()=>{C&&(l(C.id),T(null))},j=b.default.useCallback(t=>{(c.backend.id!==t.id||c.orgId!==null)&&v(t.id),e()},[c.backend.id,c.orgId,e,v]);return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(d.ModalBackdrop,{onClose:r?void 0:e,closeOnEscape:!r,closeOnBackdropClick:!r,"aria-label":a(n.I18nKey.BACKEND$MANAGE_TITLE),children:(0,x.jsxs)(`div`,{"data-testid":`manage-backends-modal`,className:o.cn(`relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl`,f.modalWidthClassName(`lg`),f.MODAL_MAX_WIDTH_VIEWPORT,`max-h-[70vh]`),children:[r?null:(0,x.jsx)(m.ModalCloseButton,{onClose:e,testId:`close-manage-backends-modal`}),(0,x.jsx)(`div`,{className:o.cn(`p-5`,!r&&`pr-12`),children:(0,x.jsx)(`h2`,{className:p.modalTitleLgClassName,children:a(n.I18nKey.BACKEND$MANAGE_TITLE)})}),(0,x.jsx)(`div`,{className:`flex min-h-0 flex-1 flex-col px-5`,children:(0,x.jsx)(`div`,{className:`flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always`,"data-testid":`manage-backends-list`,children:s.length===0?(0,x.jsx)(`p`,{className:`px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]`,children:a(n.I18nKey.BACKEND$MANAGE_EMPTY)}):(0,x.jsx)(`ul`,{className:`divide-y divide-[var(--oh-border)]`,children:s.map(e=>(0,x.jsx)(w,{backend:e,health:S[e.id],onSelect:()=>j(e),onEdit:()=>D(e),onRemove:()=>T({id:e.id,name:e.name})},e.id))})})}),(0,x.jsxs)(`div`,{className:`flex justify-end gap-2 p-5`,children:[(0,x.jsx)(h.BrandButton,{type:`button`,variant:r?`primary`:`secondary`,onClick:()=>k(!0),testId:`manage-backends-add`,startContent:(0,x.jsx)(i.Plus,{width:14,height:14}),children:a(n.I18nKey.BACKEND$ADD)}),r?null:(0,x.jsx)(h.BrandButton,{type:`button`,variant:`primary`,onClick:e,testId:`manage-backends-done`,children:a(n.I18nKey.HOME$DONE)})]})]})}),O?(0,x.jsx)(y.BackendFormModal,{mode:`add`,onClose:()=>k(!1)}):null,E?(0,x.jsx)(y.BackendFormModal,{mode:`edit`,backend:E,onClose:()=>D(null)}):null,C?(0,x.jsx)(g.ConfirmationModal,{text:a(n.I18nKey.BACKEND$REMOVE_CONFIRMATION,{name:C.name}),onConfirm:A,onCancel:()=>T(null)}):null]})}exports.ManageBackendsModal=T;
 //# sourceMappingURL=manage-backends-modal.cjs.map

package/dist/components/features/backends/manage-backends-modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"manage-backends-modal.cjs","names":[],"sources":["../../../../src/components/features/backends/manage-backends-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { Pencil, Plus, Trash2 } from \"lucide-react\";\n\nimport { ServerClient } from \"@openhands/typescript-client/clients\";\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { getAgentServerClientOptions } from \"#/api/agent-server-client-options\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport {\n  MODAL_MAX_WIDTH_VIEWPORT,\n  modalWidthClassName,\n} from \"#/components/shared/modals/modal-body\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport {\n  isInvalidBackendApiKeyHealthError,\n  useBackendsHealth,\n  type BackendHealth,\n} from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\n\nconst ROW_ACTION_BUTTON_CLASS =\n  \"inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-muted transition-colors hover:bg-interactive-hover hover:text-white\";\n\nfunction BackendVersion({ backend }: { backend: Backend }) {\n  const { t } = useTranslation(\"openhands\");\n  const { data: version } = useQuery({\n    queryKey: [\"backend-version\", backend.host, backend.apiKey],\n    queryFn: async () => {\n      const info = await new ServerClient(\n        getAgentServerClientOptions({\n          host: backend.host,\n          sessionApiKey: backend.apiKey || null,\n          timeout: 5000,\n        }),\n      ).getServerInfo();\n      return info.version ?? null;\n    },\n    retry: false,\n    staleTime: 60_000,\n    enabled: backend.kind === \"local\",\n  });\n\n  if (!version) return null;\n\n  return (\n    <span\n      className=\"inline-flex shrink-0 items-center rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-1.5 py-0.5 text-[10px] font-medium leading-none text-[var(--oh-text-dim)]\"\n      data-testid={`manage-backends-version-${backend.name}`}\n    >\n      {t(I18nKey.BACKEND$VERSION_LABEL, { version })}\n    </span>\n  );\n}\n\ninterface ManageBackendsModalProps {\n  onClose: () => void;\n  /**\n   * Recovery mode is used by the root unavailable-backend gate. There is no\n   * app shell behind the modal, so dismiss controls would be misleading.\n   */\n  recoveryMode?: boolean;\n}\n\ninterface PendingRemoval {\n  id: string;\n  name: string;\n}\n\ninterface BackendRowProps {\n  backend: Backend;\n  health: BackendHealth | undefined;\n  onSelect: () => void;\n  onEdit: () => void;\n  onRemove: () => void;\n}\n\nfunction BackendRow({\n  backend,\n  health,\n  onSelect,\n  onEdit,\n  onRemove,\n}: BackendRowProps) {\n  const { t } = useTranslation(\"openhands\");\n  const isInvalidApiKey = isInvalidBackendApiKeyHealthError(health?.lastError);\n  let statusLabel: string;\n  let statusClassName = \"text-[var(--oh-muted)]\";\n\n  if (isInvalidApiKey) {\n    statusLabel = t(I18nKey.AUTH$INVALID_KEY);\n    statusClassName = \"text-red-300\";\n  } else if (health?.isConnected === true) {\n    statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_CONNECTED);\n    statusClassName = \"text-green-300\";\n  } else if (health?.isConnected === false) {\n    statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_DISCONNECTED);\n    statusClassName = \"text-red-300\";\n  } else {\n    statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING);\n  }\n  const dotStatus = isInvalidApiKey ? false : (health?.isConnected ?? null);\n  const canSelect = health?.isConnected === true && !isInvalidApiKey;\n\n  return (\n    <li\n      className=\"flex items-stretch\"\n      data-testid={`manage-backends-row-${backend.name}`}\n    >\n      <button\n        type=\"button\"\n        disabled={!canSelect}\n        onClick={onSelect}\n        className={cn(\n          \"flex min-w-0 flex-1 items-center gap-3 px-3 py-3 text-left\",\n          canSelect\n            ? \"cursor-pointer transition-colors hover:bg-interactive-hover focus-visible:bg-interactive-hover focus-visible:outline-none\"\n            : \"cursor-default\",\n        )}\n      >\n        <BackendStatusDot isConnected={dotStatus} />\n        <div className=\"flex min-w-0 flex-1 flex-col\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            <span className=\"truncate text-sm text-white\">{backend.name}</span>\n            <BackendVersion backend={backend} />\n          </div>\n          <span className=\"truncate text-xs text-[var(--oh-muted)]\">\n            {backend.host}\n          </span>\n          <span\n            data-testid={`manage-backends-status-${backend.name}`}\n            className={cn(\"truncate text-xs\", statusClassName)}\n          >\n            {statusLabel}\n          </span>\n        </div>\n        <span className=\"px-2 py-1 rounded-full text-[11px] uppercase tracking-wide text-[var(--oh-text-tertiary)] bg-[var(--oh-surface)] border border-[var(--oh-border)]\">\n          {backend.kind === \"cloud\"\n            ? t(I18nKey.BACKEND$KIND_CLOUD)\n            : t(I18nKey.BACKEND$KIND_LOCAL)}\n        </span>\n      </button>\n      <div className=\"flex shrink-0 items-center gap-0.5 px-3 py-3\">\n        <button\n          type=\"button\"\n          onClick={onEdit}\n          aria-label={t(I18nKey.BACKEND$EDIT)}\n          data-testid={`manage-backends-edit-${backend.name}`}\n          className={ROW_ACTION_BUTTON_CLASS}\n        >\n          <Pencil aria-hidden className=\"size-4\" strokeWidth={2} />\n        </button>\n        <button\n          type=\"button\"\n          onClick={onRemove}\n          aria-label={t(I18nKey.BACKEND$REMOVE)}\n          data-testid={`manage-backends-remove-${backend.name}`}\n          className={ROW_ACTION_BUTTON_CLASS}\n        >\n          <Trash2 aria-hidden className=\"size-4\" strokeWidth={2} />\n        </button>\n      </div>\n    </li>\n  );\n}\n\nexport function ManageBackendsModal({\n  onClose,\n  recoveryMode = false,\n}: ManageBackendsModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, active, removeBackend, setActive } =\n    useActiveBackendContext();\n  const healthByBackendId = useBackendsHealth(backends, {\n    probeDisabledOnce: true,\n  });\n  const [pendingRemoval, setPendingRemoval] =\n    React.useState<PendingRemoval | null>(null);\n  const [editingBackend, setEditingBackend] = React.useState<Backend | null>(\n    null,\n  );\n  const [showAddForm, setShowAddForm] = React.useState(false);\n\n  const handleConfirmRemoval = () => {\n    if (!pendingRemoval) return;\n    removeBackend(pendingRemoval.id);\n    setPendingRemoval(null);\n  };\n\n  const handleSelectBackend = React.useCallback(\n    (backend: Backend) => {\n      if (active.backend.id !== backend.id || active.orgId !== null) {\n        setActive(backend.id);\n      }\n      onClose();\n    },\n    [active.backend.id, active.orgId, onClose, setActive],\n  );\n\n  return (\n    <>\n      <ModalBackdrop\n        onClose={recoveryMode ? undefined : onClose}\n        closeOnEscape={!recoveryMode}\n        closeOnBackdropClick={!recoveryMode}\n        aria-label={t(I18nKey.BACKEND$MANAGE_TITLE)}\n      >\n        <div\n          data-testid=\"manage-backends-modal\"\n          className={cn(\n            \"relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl\",\n            modalWidthClassName(\"lg\"),\n            MODAL_MAX_WIDTH_VIEWPORT,\n            \"max-h-[70vh]\",\n          )}\n        >\n          {recoveryMode ? null : (\n            <ModalCloseButton\n              onClose={onClose}\n              testId=\"close-manage-backends-modal\"\n            />\n          )}\n          <div className={cn(\"p-5\", !recoveryMode && \"pr-12\")}>\n            <h2 className={modalTitleLgClassName}>\n              {t(I18nKey.BACKEND$MANAGE_TITLE)}\n            </h2>\n          </div>\n\n          <div className=\"flex min-h-0 flex-1 flex-col px-5\">\n            <div\n              className=\"flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\"\n              data-testid=\"manage-backends-list\"\n            >\n              {backends.length === 0 ? (\n                <p className=\"px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]\">\n                  {t(I18nKey.BACKEND$MANAGE_EMPTY)}\n                </p>\n              ) : (\n                <ul className=\"divide-y divide-[var(--oh-border)]\">\n                  {backends.map((backend) => (\n                    <BackendRow\n                      key={backend.id}\n                      backend={backend}\n                      health={healthByBackendId[backend.id]}\n                      onSelect={() => handleSelectBackend(backend)}\n                      onEdit={() => setEditingBackend(backend)}\n                      onRemove={() =>\n                        setPendingRemoval({\n                          id: backend.id,\n                          name: backend.name,\n                        })\n                      }\n                    />\n                  ))}\n                </ul>\n              )}\n            </div>\n          </div>\n\n          <div className=\"flex justify-end gap-2 p-5\">\n            <BrandButton\n              type=\"button\"\n              variant={recoveryMode ? \"primary\" : \"secondary\"}\n              onClick={() => setShowAddForm(true)}\n              testId=\"manage-backends-add\"\n              startContent={<Plus width={14} height={14} />}\n            >\n              {t(I18nKey.BACKEND$ADD)}\n            </BrandButton>\n            {recoveryMode ? null : (\n              <BrandButton\n                type=\"button\"\n                variant=\"primary\"\n                onClick={onClose}\n                testId=\"manage-backends-done\"\n              >\n                {t(I18nKey.HOME$DONE)}\n              </BrandButton>\n            )}\n          </div>\n        </div>\n      </ModalBackdrop>\n\n      {showAddForm ? (\n        <BackendFormModal mode=\"add\" onClose={() => setShowAddForm(false)} />\n      ) : null}\n\n      {editingBackend ? (\n        <BackendFormModal\n          mode=\"edit\"\n          backend={editingBackend}\n          onClose={() => setEditingBackend(null)}\n        />\n      ) : null}\n\n      {pendingRemoval ? (\n        <ConfirmationModal\n          text={t(I18nKey.BACKEND$REMOVE_CONFIRMATION, {\n            name: pendingRemoval.name,\n          })}\n          onConfirm={handleConfirmRemoval}\n          onCancel={() => setPendingRemoval(null)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"manage-backends-modal.cjs","names":[],"sources":["../../../../src/components/features/backends/manage-backends-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { Pencil, Plus, Trash2 } from \"lucide-react\";\n\nimport { ServerClient } from \"@openhands/typescript-client/clients\";\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { getAgentServerClientOptions } from \"#/api/agent-server-client-options\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport {\n  MODAL_MAX_WIDTH_VIEWPORT,\n  modalWidthClassName,\n} from \"#/components/shared/modals/modal-body\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport {\n  isInvalidBackendApiKeyHealthError,\n  useBackendsHealth,\n  type BackendHealth,\n} from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\n\nconst ROW_ACTION_BUTTON_CLASS =\n  \"inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-muted transition-colors hover:bg-interactive-hover hover:text-white\";\n\nfunction BackendVersion({ backend }: { backend: Backend }) {\n  const { t } = useTranslation(\"openhands\");\n  const { data: version } = useQuery({\n    queryKey: [\"backend-version\", backend.host, backend.apiKey],\n    queryFn: async () => {\n      const info = await new ServerClient(\n        getAgentServerClientOptions({\n          host: backend.host,\n          sessionApiKey: backend.apiKey || null,\n          timeout: 5000,\n        }),\n      ).getServerInfo();\n      return info.version ?? null;\n    },\n    retry: false,\n    staleTime: 60_000,\n    enabled: backend.kind === \"local\",\n  });\n\n  if (!version) return null;\n\n  return (\n    <span\n      className=\"inline-flex shrink-0 items-center rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-1.5 py-0.5 text-[10px] font-medium leading-none text-[var(--oh-text-dim)]\"\n      data-testid={`manage-backends-version-${backend.name}`}\n    >\n      {t(I18nKey.BACKEND$VERSION_LABEL, { version })}\n    </span>\n  );\n}\n\ninterface ManageBackendsModalProps {\n  onClose: () => void;\n  /**\n   * Recovery mode is used by the root unavailable-backend gate. There is no\n   * app shell behind the modal, so dismiss controls would be misleading.\n   */\n  recoveryMode?: boolean;\n}\n\ninterface PendingRemoval {\n  id: string;\n  name: string;\n}\n\ninterface BackendRowProps {\n  backend: Backend;\n  health: BackendHealth | undefined;\n  onSelect: () => void;\n  onEdit: () => void;\n  onRemove: () => void;\n}\n\nfunction BackendRow({\n  backend,\n  health,\n  onSelect,\n  onEdit,\n  onRemove,\n}: BackendRowProps) {\n  const { t } = useTranslation(\"openhands\");\n  const isInvalidApiKey = isInvalidBackendApiKeyHealthError(health?.lastError);\n  const statusDetail =\n    !isInvalidApiKey && health?.isConnected === false && health.lastError\n      ? health.lastError\n      : null;\n  let statusLabel: string;\n  let statusClassName = \"text-[var(--oh-muted)]\";\n\n  if (isInvalidApiKey) {\n    statusLabel = t(I18nKey.AUTH$INVALID_KEY);\n    statusClassName = \"text-red-300\";\n  } else if (health?.isConnected === true) {\n    statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_CONNECTED);\n    statusClassName = \"text-green-300\";\n  } else if (health?.isConnected === false) {\n    statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_DISCONNECTED);\n    statusClassName = \"text-red-300\";\n  } else {\n    statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING);\n  }\n  const dotStatus = isInvalidApiKey ? false : (health?.isConnected ?? null);\n  const canSelect = health?.isConnected === true && !isInvalidApiKey;\n\n  return (\n    <li\n      className=\"flex items-stretch\"\n      data-testid={`manage-backends-row-${backend.name}`}\n    >\n      <button\n        type=\"button\"\n        disabled={!canSelect}\n        onClick={onSelect}\n        className={cn(\n          \"flex min-w-0 flex-1 items-center gap-3 px-3 py-3 text-left\",\n          canSelect\n            ? \"cursor-pointer transition-colors hover:bg-interactive-hover focus-visible:bg-interactive-hover focus-visible:outline-none\"\n            : \"cursor-default\",\n        )}\n      >\n        <BackendStatusDot isConnected={dotStatus} />\n        <div className=\"flex min-w-0 flex-1 flex-col\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            <span className=\"truncate text-sm text-white\">{backend.name}</span>\n            <BackendVersion backend={backend} />\n          </div>\n          <span className=\"truncate text-xs text-[var(--oh-muted)]\">\n            {backend.host}\n          </span>\n          <span\n            data-testid={`manage-backends-status-${backend.name}`}\n            className={cn(\"truncate text-xs\", statusClassName)}\n          >\n            {statusLabel}\n          </span>\n          {statusDetail ? (\n            <span\n              data-testid={`manage-backends-status-detail-${backend.name}`}\n              title={statusDetail}\n              className=\"text-xs text-red-300/80 whitespace-normal break-words\"\n            >\n              {statusDetail}\n            </span>\n          ) : null}\n        </div>\n        <span className=\"px-2 py-1 rounded-full text-[11px] uppercase tracking-wide text-[var(--oh-text-tertiary)] bg-[var(--oh-surface)] border border-[var(--oh-border)]\">\n          {backend.kind === \"cloud\"\n            ? t(I18nKey.BACKEND$KIND_CLOUD)\n            : t(I18nKey.BACKEND$KIND_LOCAL)}\n        </span>\n      </button>\n      <div className=\"flex shrink-0 items-center gap-0.5 px-3 py-3\">\n        <button\n          type=\"button\"\n          onClick={onEdit}\n          aria-label={t(I18nKey.BACKEND$EDIT)}\n          data-testid={`manage-backends-edit-${backend.name}`}\n          className={ROW_ACTION_BUTTON_CLASS}\n        >\n          <Pencil aria-hidden className=\"size-4\" strokeWidth={2} />\n        </button>\n        <button\n          type=\"button\"\n          onClick={onRemove}\n          aria-label={t(I18nKey.BACKEND$REMOVE)}\n          data-testid={`manage-backends-remove-${backend.name}`}\n          className={ROW_ACTION_BUTTON_CLASS}\n        >\n          <Trash2 aria-hidden className=\"size-4\" strokeWidth={2} />\n        </button>\n      </div>\n    </li>\n  );\n}\n\nexport function ManageBackendsModal({\n  onClose,\n  recoveryMode = false,\n}: ManageBackendsModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, active, removeBackend, setActive } =\n    useActiveBackendContext();\n  const healthByBackendId = useBackendsHealth(backends, {\n    probeDisabledOnce: true,\n  });\n  const [pendingRemoval, setPendingRemoval] =\n    React.useState<PendingRemoval | null>(null);\n  const [editingBackend, setEditingBackend] = React.useState<Backend | null>(\n    null,\n  );\n  const [showAddForm, setShowAddForm] = React.useState(false);\n\n  const handleConfirmRemoval = () => {\n    if (!pendingRemoval) return;\n    removeBackend(pendingRemoval.id);\n    setPendingRemoval(null);\n  };\n\n  const handleSelectBackend = React.useCallback(\n    (backend: Backend) => {\n      if (active.backend.id !== backend.id || active.orgId !== null) {\n        setActive(backend.id);\n      }\n      onClose();\n    },\n    [active.backend.id, active.orgId, onClose, setActive],\n  );\n\n  return (\n    <>\n      <ModalBackdrop\n        onClose={recoveryMode ? undefined : onClose}\n        closeOnEscape={!recoveryMode}\n        closeOnBackdropClick={!recoveryMode}\n        aria-label={t(I18nKey.BACKEND$MANAGE_TITLE)}\n      >\n        <div\n          data-testid=\"manage-backends-modal\"\n          className={cn(\n            \"relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl\",\n            modalWidthClassName(\"lg\"),\n            MODAL_MAX_WIDTH_VIEWPORT,\n            \"max-h-[70vh]\",\n          )}\n        >\n          {recoveryMode ? null : (\n            <ModalCloseButton\n              onClose={onClose}\n              testId=\"close-manage-backends-modal\"\n            />\n          )}\n          <div className={cn(\"p-5\", !recoveryMode && \"pr-12\")}>\n            <h2 className={modalTitleLgClassName}>\n              {t(I18nKey.BACKEND$MANAGE_TITLE)}\n            </h2>\n          </div>\n\n          <div className=\"flex min-h-0 flex-1 flex-col px-5\">\n            <div\n              className=\"flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\"\n              data-testid=\"manage-backends-list\"\n            >\n              {backends.length === 0 ? (\n                <p className=\"px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]\">\n                  {t(I18nKey.BACKEND$MANAGE_EMPTY)}\n                </p>\n              ) : (\n                <ul className=\"divide-y divide-[var(--oh-border)]\">\n                  {backends.map((backend) => (\n                    <BackendRow\n                      key={backend.id}\n                      backend={backend}\n                      health={healthByBackendId[backend.id]}\n                      onSelect={() => handleSelectBackend(backend)}\n                      onEdit={() => setEditingBackend(backend)}\n                      onRemove={() =>\n                        setPendingRemoval({\n                          id: backend.id,\n                          name: backend.name,\n                        })\n                      }\n                    />\n                  ))}\n                </ul>\n              )}\n            </div>\n          </div>\n\n          <div className=\"flex justify-end gap-2 p-5\">\n            <BrandButton\n              type=\"button\"\n              variant={recoveryMode ? \"primary\" : \"secondary\"}\n              onClick={() => setShowAddForm(true)}\n              testId=\"manage-backends-add\"\n              startContent={<Plus width={14} height={14} />}\n            >\n              {t(I18nKey.BACKEND$ADD)}\n            </BrandButton>\n            {recoveryMode ? null : (\n              <BrandButton\n                type=\"button\"\n                variant=\"primary\"\n                onClick={onClose}\n                testId=\"manage-backends-done\"\n              >\n                {t(I18nKey.HOME$DONE)}\n              </BrandButton>\n            )}\n          </div>\n        </div>\n      </ModalBackdrop>\n\n      {showAddForm ? (\n        <BackendFormModal mode=\"add\" onClose={() => setShowAddForm(false)} />\n      ) : null}\n\n      {editingBackend ? (\n        <BackendFormModal\n          mode=\"edit\"\n          backend={editingBackend}\n          onClose={() => setEditingBackend(null)}\n        />\n      ) : null}\n\n      {pendingRemoval ? (\n        <ConfirmationModal\n          text={t(I18nKey.BACKEND$REMOVE_CONFIRMATION, {\n            name: pendingRemoval.name,\n          })}\n          onConfirm={handleConfirmRemoval}\n          onCancel={() => setPendingRemoval(null)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/backends/manage-backends-modal.js

@@ -44,19 +44,19 @@ function E({ backend: n }) {
 	}) : null;
 }
 function D({ backend: r, health: o, onSelect: s, onEdit: c, onRemove: l }) {
-	let { t: u } = e("openhands"), d = _(o?.lastError), f, p = "text-[var(--oh-muted)]";
-	d ? (f = u(t.AUTH$INVALID_KEY), p = "text-red-300") : o?.isConnected === !0 ? (f = u(t.ONBOARDING$BACKEND_STATUS_CONNECTED), p = "text-green-300") : o?.isConnected === !1 ? (f = u(t.ONBOARDING$BACKEND_STATUS_DISCONNECTED), p = "text-red-300") : f = u(t.ONBOARDING$BACKEND_STATUS_CHECKING);
-	let m = d ? !1 : o?.isConnected ?? null, h = o?.isConnected === !0 && !d;
+	let { t: u } = e("openhands"), d = _(o?.lastError), f = !d && o?.isConnected === !1 && o.lastError ? o.lastError : null, p, m = "text-[var(--oh-muted)]";
+	d ? (p = u(t.AUTH$INVALID_KEY), m = "text-red-300") : o?.isConnected === !0 ? (p = u(t.ONBOARDING$BACKEND_STATUS_CONNECTED), m = "text-green-300") : o?.isConnected === !1 ? (p = u(t.ONBOARDING$BACKEND_STATUS_DISCONNECTED), m = "text-red-300") : p = u(t.ONBOARDING$BACKEND_STATUS_CHECKING);
+	let h = d ? !1 : o?.isConnected ?? null, g = o?.isConnected === !0 && !d;
 	return /* @__PURE__ */ w("li", {
 		className: "flex items-stretch",
 		"data-testid": `manage-backends-row-${r.name}`,
 		children: [/* @__PURE__ */ w("button", {
 			type: "button",
-			disabled: !h,
+			disabled: !g,
 			onClick: s,
-			className: a("flex min-w-0 flex-1 items-center gap-3 px-3 py-3 text-left", h ? "cursor-pointer transition-colors hover:bg-interactive-hover focus-visible:bg-interactive-hover focus-visible:outline-none" : "cursor-default"),
+			className: a("flex min-w-0 flex-1 items-center gap-3 px-3 py-3 text-left", g ? "cursor-pointer transition-colors hover:bg-interactive-hover focus-visible:bg-interactive-hover focus-visible:outline-none" : "cursor-default"),
 			children: [
-				/* @__PURE__ */ C(y, { isConnected: m }),
+				/* @__PURE__ */ C(y, { isConnected: h }),
 				/* @__PURE__ */ w("div", {
 					className: "flex min-w-0 flex-1 flex-col",
 					children: [
@@ -73,9 +73,15 @@ function D({ backend: r, health: o, onSelect: s, onEdit: c, onRemove: l }) {
 						}),
 						/* @__PURE__ */ C("span", {
 							"data-testid": `manage-backends-status-${r.name}`,
-							className: a("truncate text-xs", p),
+							className: a("truncate text-xs", m),
+							children: p
+						}),
+						f ? /* @__PURE__ */ C("span", {
+							"data-testid": `manage-backends-status-detail-${r.name}`,
+							title: f,
+							className: "text-xs text-red-300/80 whitespace-normal break-words",
 							children: f
-						})
+						}) : null
 					]
 				}),
 				/* @__PURE__ */ C("span", {