@openhands/agent-canvas 1.5.1 → 1.6.1

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

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

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 Cloud's current org first, then fall back to the\n  // personal workspace (or, lacking a /me result, the first org). The\n  // selection is recorded locally only; the cloud request scope follows\n  // from the 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 currentOrg = entry.currentOrgId\n      ? entry.orgs.find((o) => o.id === entry.currentOrgId)\n      : undefined;\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 = currentOrg ?? 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":"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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 { getLockedCloudHost } from \"#/api/agent-server-config\";\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 Cloud's current org first, then fall back to the\n  // personal workspace (or, lacking a /me result, the first org). The\n  // selection is recorded locally only; the cloud request scope follows\n  // from the 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 currentOrg = entry.currentOrgId\n      ? entry.orgs.find((o) => o.id === entry.currentOrgId)\n      : undefined;\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 = currentOrg ?? 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 isLockedToCloud = getLockedCloudHost() !== null;\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      {isLockedToCloud ? null : (\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      )}\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(\n          isLockedToCloud\n            ? I18nKey.BACKEND$RECONNECT_CLOUD\n            : I18nKey.BACKEND$MANAGE,\n        )}\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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"}

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/plus.cjs`),i=require(`../../../utils/utils.cjs`),a=require(`../../../contexts/active-backend-context.cjs`),o=require(`../../shared/modals/modal-backdrop.cjs`),s=require(`../../shared/modals/modal-body.cjs`),c=require(`../../../utils/modal-classes.cjs`),l=require(`../../shared/modals/modal-close-button.cjs`),u=require(`../settings/brand-button.cjs`),d=require(`../../../hooks/query/use-cloud-organizations.cjs`),f=require(`../../../hooks/query/use-cloud-current-user-id.cjs`),p=require(`../../shared/modals/confirmation-modal.cjs`),m=require(`../../../hooks/query/use-backends-health.cjs`),h=require(`./backend-form-modal.cjs`),g=require(`./backend-row.cjs`);let _=require(`react`);_=e.__toESM(_,1);let v=require(`react/jsx-runtime`);function y(e,t,n,r){if(e.kind!==`cloud`)return;let i=t[e.id];if(!i||i.orgs.length===0)return;let a=n[e.id]?.userId??null;return i.orgs.map(e=>a&&a===e.id?r:e.name).join(`, `)}function b({onClose:e,recoveryMode:b=!1}){let{t:x}=t.useTranslation(`openhands`),{backends:S,active:C,removeBackend:w,setActive:T,updateBackend:E}=a.useActiveBackendContext(),D=m.useBackendsHealth(S,{probeDisabledOnce:!0}),O=d.useAllCloudOrganizations(),k=f.useCloudCurrentUserId(),A=x(n.I18nKey.BACKEND$PERSONAL_WORKSPACE),[j,M]=_.default.useState(null),[N,P]=_.default.useState(null),[F,I]=_.default.useState(!1),L=()=>{j&&(w(j.id),M(null))},R=_.default.useCallback(t=>{(C.backend.id!==t.id||C.orgId!==null)&&T(t.id),e()},[C.backend.id,C.orgId,e,T]),z=_.default.useCallback((e,t)=>{E(e.id,{apiKey:t})},[E]);return(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(o.ModalBackdrop,{onClose:b?void 0:e,closeOnEscape:!b,closeOnBackdropClick:!b,"aria-label":x(n.I18nKey.BACKEND$MANAGE_TITLE),children:(0,v.jsxs)(`div`,{"data-testid":`manage-backends-modal`,className:i.cn(`relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl`,s.modalWidthClassName(`lg`),s.MODAL_MAX_WIDTH_VIEWPORT,`max-h-[70vh]`),children:[b?null:(0,v.jsx)(l.ModalCloseButton,{onClose:e,testId:`close-manage-backends-modal`}),(0,v.jsx)(`div`,{className:i.cn(`p-5`,!b&&`pr-12`),children:(0,v.jsx)(`h2`,{className:c.modalTitleLgClassName,children:x(n.I18nKey.BACKEND$MANAGE_TITLE)})}),(0,v.jsx)(`div`,{className:`flex min-h-0 flex-1 flex-col px-5`,children:(0,v.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,v.jsx)(`p`,{className:`px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]`,children:x(n.I18nKey.BACKEND$MANAGE_EMPTY)}):(0,v.jsx)(`ul`,{className:`divide-y divide-[var(--oh-border)]`,children:S.map(e=>(0,v.jsx)(g.BackendRow,{backend:e,health:D[e.id],orgLabel:y(e,O,k,A),onSelect:()=>R(e),onEdit:()=>P(e),onRemove:()=>M({id:e.id,name:e.name}),onLogin:t=>z(e,t)},e.id))})})}),(0,v.jsxs)(`div`,{className:`flex justify-end gap-2 p-5`,children:[(0,v.jsx)(u.BrandButton,{type:`button`,variant:b?`primary`:`secondary`,onClick:()=>I(!0),testId:`manage-backends-add`,startContent:(0,v.jsx)(r.Plus,{width:14,height:14}),children:x(n.I18nKey.BACKEND$ADD)}),b?null:(0,v.jsx)(u.BrandButton,{type:`button`,variant:`primary`,onClick:e,testId:`manage-backends-done`,children:x(n.I18nKey.HOME$DONE)})]})]})}),F?(0,v.jsx)(h.BackendFormModal,{mode:`add`,source:`manage_backends_modal`,onClose:()=>I(!1)}):null,N?(0,v.jsx)(h.BackendFormModal,{mode:`edit`,backend:N,onClose:()=>P(null)}):null,j?(0,v.jsx)(p.ConfirmationModal,{text:x(n.I18nKey.BACKEND$REMOVE_CONFIRMATION,{name:j.name}),onConfirm:L,onCancel:()=>M(null)}):null]})}exports.ManageBackendsModal=b;
+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/plus.cjs`),i=require(`../../../utils/utils.cjs`),a=require(`../../../api/agent-server-config.cjs`),o=require(`../../../contexts/active-backend-context.cjs`),s=require(`../../shared/modals/modal-backdrop.cjs`),c=require(`../../shared/modals/modal-body.cjs`),l=require(`../../../utils/modal-classes.cjs`),u=require(`../../shared/modals/modal-close-button.cjs`),d=require(`../settings/brand-button.cjs`),f=require(`../../../hooks/query/use-cloud-organizations.cjs`),p=require(`../../../hooks/query/use-cloud-current-user-id.cjs`),m=require(`../../shared/modals/confirmation-modal.cjs`),h=require(`../../../hooks/query/use-backends-health.cjs`),g=require(`./device-flow-auth.cjs`),_=require(`./backend-form-modal.cjs`),v=require(`./backend-row.cjs`);let y=require(`react`);y=e.__toESM(y,1);let b=require(`react/jsx-runtime`);function x(e,t,n,r){if(e.kind!==`cloud`)return;let i=t[e.id];if(!i||i.orgs.length===0)return;let a=n[e.id]?.userId??null;return i.orgs.map(e=>a&&a===e.id?r:e.name).join(`, `)}function S({onClose:e,recoveryMode:S=!1}){let{t:C}=t.useTranslation(`openhands`),{backends:w,active:T,removeBackend:E,setActive:D,updateBackend:O}=o.useActiveBackendContext(),k=h.useBackendsHealth(w,{probeDisabledOnce:!0}),A=f.useAllCloudOrganizations(),j=p.useCloudCurrentUserId(),M=C(n.I18nKey.BACKEND$PERSONAL_WORKSPACE),N=a.getLockedCloudHost(),P=N!==null,F=P&&T.backend.kind===`cloud`?T.backend:null,I=N??F?.host??``,L=C(P?n.I18nKey.BACKEND$RECONNECT_CLOUD_TITLE:n.I18nKey.BACKEND$MANAGE_TITLE),[R,z]=y.default.useState(null),[B,V]=y.default.useState(null),[H,U]=y.default.useState(!1),W=()=>{R&&(E(R.id),z(null))},G=y.default.useCallback(t=>{(T.backend.id!==t.id||T.orgId!==null)&&D(t.id),e()},[T.backend.id,T.orgId,e,D]),K=y.default.useCallback((e,t)=>{O(e.id,{apiKey:t})},[O]),q=y.default.useCallback(e=>{F&&O(F.id,{apiKey:e})},[F,O]);return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(s.ModalBackdrop,{onClose:S?void 0:e,closeOnEscape:!S,closeOnBackdropClick:!S,"aria-label":L,children:(0,b.jsxs)(`div`,{"data-testid":`manage-backends-modal`,className:i.cn(`relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl`,c.modalWidthClassName(`lg`),c.MODAL_MAX_WIDTH_VIEWPORT,`max-h-[70vh]`),children:[S?null:(0,b.jsx)(u.ModalCloseButton,{onClose:e,testId:`close-manage-backends-modal`}),(0,b.jsx)(`div`,{className:i.cn(`p-5`,!S&&`pr-12`),children:(0,b.jsx)(`h2`,{className:l.modalTitleLgClassName,children:L})}),(0,b.jsx)(`div`,{className:`flex min-h-0 flex-1 flex-col px-5`,children:(0,b.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:w.length===0?(0,b.jsx)(`p`,{className:`px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]`,children:C(n.I18nKey.BACKEND$MANAGE_EMPTY)}):(0,b.jsx)(`ul`,{className:`divide-y divide-[var(--oh-border)]`,children:w.map(e=>(0,b.jsx)(v.BackendRow,{backend:e,health:k[e.id],orgLabel:x(e,A,j,M),onSelect:()=>G(e),onEdit:()=>V(e),onRemove:()=>z({id:e.id,name:e.name}),onLogin:t=>K(e,t)},e.id))})})}),(0,b.jsxs)(`div`,{className:`flex justify-end gap-2 p-5`,children:[P?F?(0,b.jsx)(g.DeviceFlowAuth,{host:I,onSuccess:q,testIdRoot:`manage-backends-reconnect-cloud`,idleButtonLabel:C(n.I18nKey.BACKEND$RECONNECT_CLOUD),className:`w-full sm:w-auto`,buttonClassName:`sm:w-auto`,statusDisplay:`modal`}):null:(0,b.jsx)(d.BrandButton,{type:`button`,variant:S?`primary`:`secondary`,onClick:()=>U(!0),testId:`manage-backends-add`,startContent:(0,b.jsx)(r.Plus,{width:14,height:14}),children:C(n.I18nKey.BACKEND$ADD)}),S?null:(0,b.jsx)(d.BrandButton,{type:`button`,variant:`primary`,onClick:e,testId:`manage-backends-done`,children:C(n.I18nKey.HOME$DONE)})]})]})}),H?(0,b.jsx)(_.BackendFormModal,{mode:`add`,source:`manage_backends_modal`,onClose:()=>U(!1)}):null,B?(0,b.jsx)(_.BackendFormModal,{mode:`edit`,backend:B,onClose:()=>V(null)}):null,R?(0,b.jsx)(m.ConfirmationModal,{text:C(n.I18nKey.BACKEND$REMOVE_CONFIRMATION,{name:R.name}),onConfirm:W,onCancel:()=>z(null)}):null]})}exports.ManageBackendsModal=S;
 //# 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 { Plus } from \"lucide-react\";\n\nimport { type Backend } from \"#/api/backend-registry/types\";\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 { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendRow } from \"./backend-row\";\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\n/**\n * Resolve the connected organization label for a backend row, mirroring the\n * per-org labelling used by the backend selector. Cloud API keys are bound to\n * a single org (legacy keys may expose several, joined here); local backends\n * and unresolved/errored lookups yield no label.\n */\nfunction resolveBackendOrgLabel(\n  backend: Backend,\n  cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n  currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n  personalWorkspaceLabel: string,\n): string | undefined {\n  if (backend.kind !== \"cloud\") return undefined;\n  const entry = cloudOrgs[backend.id];\n  if (!entry || entry.orgs.length === 0) return undefined;\n  const userId = currentUserIds[backend.id]?.userId ?? null;\n  return entry.orgs\n    .map((org) =>\n      !!userId && userId === org.id ? personalWorkspaceLabel : org.name,\n    )\n    .join(\", \");\n}\n\nexport function ManageBackendsModal({\n  onClose,\n  recoveryMode = false,\n}: ManageBackendsModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, active, removeBackend, setActive, updateBackend } =\n    useActiveBackendContext();\n  const healthByBackendId = useBackendsHealth(backends, {\n    probeDisabledOnce: true,\n  });\n  const cloudOrgs = useAllCloudOrganizations();\n  const currentUserIds = useCloudCurrentUserId();\n  const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\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  const handleCloudLogin = React.useCallback(\n    (backend: Backend, apiKey: string) => {\n      updateBackend(backend.id, { apiKey });\n    },\n    [updateBackend],\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                      orgLabel={resolveBackendOrgLabel(\n                        backend,\n                        cloudOrgs,\n                        currentUserIds,\n                        personalWorkspaceLabel,\n                      )}\n                      onSelect={() => handleSelectBackend(backend)}\n                      onEdit={() => setEditingBackend(backend)}\n                      onRemove={() =>\n                        setPendingRemoval({\n                          id: backend.id,\n                          name: backend.name,\n                        })\n                      }\n                      onLogin={(apiKey) => handleCloudLogin(backend, apiKey)}\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\n          mode=\"add\"\n          source=\"manage_backends_modal\"\n          onClose={() => setShowAddForm(false)}\n        />\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 { Plus } from \"lucide-react\";\n\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { type Backend } from \"#/api/backend-registry/types\";\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 { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendRow } from \"./backend-row\";\nimport { DeviceFlowAuth } from \"./device-flow-auth\";\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\n/**\n * Resolve the connected organization label for a backend row, mirroring the\n * per-org labelling used by the backend selector. Cloud API keys are bound to\n * a single org (legacy keys may expose several, joined here); local backends\n * and unresolved/errored lookups yield no label.\n */\nfunction resolveBackendOrgLabel(\n  backend: Backend,\n  cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n  currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n  personalWorkspaceLabel: string,\n): string | undefined {\n  if (backend.kind !== \"cloud\") return undefined;\n  const entry = cloudOrgs[backend.id];\n  if (!entry || entry.orgs.length === 0) return undefined;\n  const userId = currentUserIds[backend.id]?.userId ?? null;\n  return entry.orgs\n    .map((org) =>\n      !!userId && userId === org.id ? personalWorkspaceLabel : org.name,\n    )\n    .join(\", \");\n}\n\nexport function ManageBackendsModal({\n  onClose,\n  recoveryMode = false,\n}: ManageBackendsModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, active, removeBackend, setActive, updateBackend } =\n    useActiveBackendContext();\n  const healthByBackendId = useBackendsHealth(backends, {\n    probeDisabledOnce: true,\n  });\n  const cloudOrgs = useAllCloudOrganizations();\n  const currentUserIds = useCloudCurrentUserId();\n  const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n  const lockedCloudHost = getLockedCloudHost();\n  const isLockedToCloud = lockedCloudHost !== null;\n  const lockedCloudBackend =\n    isLockedToCloud && active.backend.kind === \"cloud\" ? active.backend : null;\n  const lockedCloudReconnectHost =\n    lockedCloudHost ?? lockedCloudBackend?.host ?? \"\";\n  const modalTitle = isLockedToCloud\n    ? t(I18nKey.BACKEND$RECONNECT_CLOUD_TITLE)\n    : t(I18nKey.BACKEND$MANAGE_TITLE);\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  const handleCloudLogin = React.useCallback(\n    (backend: Backend, apiKey: string) => {\n      updateBackend(backend.id, { apiKey });\n    },\n    [updateBackend],\n  );\n\n  const handleLockedCloudReconnect = React.useCallback(\n    (apiKey: string) => {\n      if (!lockedCloudBackend) return;\n      updateBackend(lockedCloudBackend.id, { apiKey });\n    },\n    [lockedCloudBackend, updateBackend],\n  );\n\n  return (\n    <>\n      <ModalBackdrop\n        onClose={recoveryMode ? undefined : onClose}\n        closeOnEscape={!recoveryMode}\n        closeOnBackdropClick={!recoveryMode}\n        aria-label={modalTitle}\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}>{modalTitle}</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                      orgLabel={resolveBackendOrgLabel(\n                        backend,\n                        cloudOrgs,\n                        currentUserIds,\n                        personalWorkspaceLabel,\n                      )}\n                      onSelect={() => handleSelectBackend(backend)}\n                      onEdit={() => setEditingBackend(backend)}\n                      onRemove={() =>\n                        setPendingRemoval({\n                          id: backend.id,\n                          name: backend.name,\n                        })\n                      }\n                      onLogin={(apiKey) => handleCloudLogin(backend, apiKey)}\n                    />\n                  ))}\n                </ul>\n              )}\n            </div>\n          </div>\n\n          <div className=\"flex justify-end gap-2 p-5\">\n            {isLockedToCloud ? (\n              lockedCloudBackend ? (\n                <DeviceFlowAuth\n                  host={lockedCloudReconnectHost}\n                  onSuccess={handleLockedCloudReconnect}\n                  testIdRoot=\"manage-backends-reconnect-cloud\"\n                  idleButtonLabel={t(I18nKey.BACKEND$RECONNECT_CLOUD)}\n                  className=\"w-full sm:w-auto\"\n                  buttonClassName=\"sm:w-auto\"\n                  statusDisplay=\"modal\"\n                />\n              ) : null\n            ) : (\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            )}\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\n          mode=\"add\"\n          source=\"manage_backends_modal\"\n          onClose={() => setShowAddForm(false)}\n        />\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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"}