@openhands/agent-canvas 1.0.0-beta.6 → 1.0.0-beta.8

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

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

package/dist/components/features/backends/backend-status-dot.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../utils/utils.cjs`);let n=require(`react`);n=e.__toESM(n,1);let r=require(`react/jsx-runtime`);function i({isConnected:e,className:n}){let i,a,o;return e===!0?(i=`bg-[var(--oh-status-success)]`,a=`Connected`,o=`connected`):e===!1?(i=`bg-red-500`,a=`Disconnected`,o=`disconnected`):(i=`bg-[var(--oh-interactive-selected)]`,a=`Checking connection`,o=`checking`),(0,r.jsx)(`span`,{"data-testid":`backend-status-dot`,"data-status":o,"aria-label":a,title:a,role:`status`,className:t.cn(`inline-block w-2 h-2 rounded-full shrink-0`,i,n)})}exports.BackendStatusDot=i;
+const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../utils/utils.cjs`);let n=require(`react`);n=e.__toESM(n,1);let r=require(`react/jsx-runtime`);function i({isConnected:e,className:n}){let i,a,o;return e===`unavailable`?(i=`bg-[var(--oh-text-tertiary)]`,a=`No Backend Available`,o=`unavailable`):e===!0?(i=`bg-[var(--oh-status-success)]`,a=`Connected`,o=`connected`):e===!1?(i=`bg-red-500`,a=`Disconnected`,o=`disconnected`):(i=`bg-[var(--oh-interactive-selected)]`,a=`Checking connection`,o=`checking`),(0,r.jsx)(`span`,{"data-testid":`backend-status-dot`,"data-status":o,"aria-label":a,title:a,role:`status`,className:t.cn(`inline-block w-2 h-2 rounded-full shrink-0`,i,n)})}exports.BackendStatusDot=i;
 //# sourceMappingURL=backend-status-dot.cjs.map

package/dist/components/features/backends/backend-status-dot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"backend-status-dot.cjs","names":[],"sources":["../../../../src/components/features/backends/backend-status-dot.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface BackendStatusDotProps {\n  /** `null` while the first probe is in flight. */\n  isConnected: boolean | null;\n  className?: string;\n}\n\n/**\n * Small colored dot that reflects backend reachability:\n *   - green when connected\n *   - red when disconnected\n *   - dim gray while the first probe is in flight\n */\nexport function BackendStatusDot({\n  isConnected,\n  className,\n}: BackendStatusDotProps) {\n  let color: string;\n  let label: string;\n  let status: string;\n  if (isConnected === true) {\n    color = \"bg-[var(--oh-status-success)]\";\n    label = \"Connected\";\n    status = \"connected\";\n  } else if (isConnected === false) {\n    color = \"bg-red-500\";\n    label = \"Disconnected\";\n    status = \"disconnected\";\n  } else {\n    color = \"bg-[var(--oh-interactive-selected)]\";\n    label = \"Checking connection\";\n    status = \"checking\";\n  }\n\n  return (\n    <span\n      data-testid=\"backend-status-dot\"\n      data-status={status}\n      aria-label={label}\n      title={label}\n      role=\"status\"\n      className={cn(\n        \"inline-block w-2 h-2 rounded-full shrink-0\",\n        color,\n        className,\n      )}\n    />\n  );\n}\n"],"mappings":"4KAeA,SAAgB,EAAiB,CAC/B,cACA,aACwB,CACxB,IAAI,EACA,EACA,EAeJ,OAdI,IAAgB,IAClB,EAAQ,gCACR,EAAQ,YACR,EAAS,aACA,IAAgB,IACzB,EAAQ,aACR,EAAQ,eACR,EAAS,iBAET,EAAQ,sCACR,EAAQ,sBACR,EAAS,aAIT,EAAA,EAAA,KAAC,OAAD,CACE,cAAY,qBACZ,cAAa,EACb,aAAY,EACZ,MAAO,EACP,KAAK,SACL,UAAW,EAAA,GACT,6CACA,EACA,EACD,CACD,CAAA"}
+{"version":3,"file":"backend-status-dot.cjs","names":[],"sources":["../../../../src/components/features/backends/backend-status-dot.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface BackendStatusDotProps {\n  /** `null` while the first probe is in flight. */\n  isConnected: boolean | null | \"unavailable\";\n  className?: string;\n}\n\n/**\n * Small colored dot that reflects backend reachability:\n *   - green when connected\n *   - red when disconnected\n *   - dim gray while the first probe is in flight\n */\nexport function BackendStatusDot({\n  isConnected,\n  className,\n}: BackendStatusDotProps) {\n  let color: string;\n  let label: string;\n  let status: string;\n  if (isConnected === \"unavailable\") {\n    color = \"bg-[var(--oh-text-tertiary)]\";\n    label = \"No Backend Available\";\n    status = \"unavailable\";\n  } else if (isConnected === true) {\n    color = \"bg-[var(--oh-status-success)]\";\n    label = \"Connected\";\n    status = \"connected\";\n  } else if (isConnected === false) {\n    color = \"bg-red-500\";\n    label = \"Disconnected\";\n    status = \"disconnected\";\n  } else {\n    color = \"bg-[var(--oh-interactive-selected)]\";\n    label = \"Checking connection\";\n    status = \"checking\";\n  }\n\n  return (\n    <span\n      data-testid=\"backend-status-dot\"\n      data-status={status}\n      aria-label={label}\n      title={label}\n      role=\"status\"\n      className={cn(\n        \"inline-block w-2 h-2 rounded-full shrink-0\",\n        color,\n        className,\n      )}\n    />\n  );\n}\n"],"mappings":"4KAeA,SAAgB,EAAiB,CAC/B,cACA,aACwB,CACxB,IAAI,EACA,EACA,EAmBJ,OAlBI,IAAgB,eAClB,EAAQ,+BACR,EAAQ,uBACR,EAAS,eACA,IAAgB,IACzB,EAAQ,gCACR,EAAQ,YACR,EAAS,aACA,IAAgB,IACzB,EAAQ,aACR,EAAQ,eACR,EAAS,iBAET,EAAQ,sCACR,EAAQ,sBACR,EAAS,aAIT,EAAA,EAAA,KAAC,OAAD,CACE,cAAY,qBACZ,cAAa,EACb,aAAY,EACZ,MAAO,EACP,KAAK,SACL,UAAW,EAAA,GACT,6CACA,EACA,EACD,CACD,CAAA"}

package/dist/components/features/backends/backend-status-dot.d.ts

@@ -1,6 +1,6 @@
 interface BackendStatusDotProps {
     /** `null` while the first probe is in flight. */
-    isConnected: boolean | null;
+    isConnected: boolean | null | "unavailable";
     className?: string;
 }
 /**

package/dist/components/features/backends/backend-status-dot.js

@@ -4,7 +4,7 @@ import { jsx as t } from "react/jsx-runtime";
 //#region src/components/features/backends/backend-status-dot.tsx
 function n({ isConnected: n, className: r }) {
 	let i, a, o;
-	return n === !0 ? (i = "bg-[var(--oh-status-success)]", a = "Connected", o = "connected") : n === !1 ? (i = "bg-red-500", a = "Disconnected", o = "disconnected") : (i = "bg-[var(--oh-interactive-selected)]", a = "Checking connection", o = "checking"), /* @__PURE__ */ t("span", {
+	return n === "unavailable" ? (i = "bg-[var(--oh-text-tertiary)]", a = "No Backend Available", o = "unavailable") : n === !0 ? (i = "bg-[var(--oh-status-success)]", a = "Connected", o = "connected") : n === !1 ? (i = "bg-red-500", a = "Disconnected", o = "disconnected") : (i = "bg-[var(--oh-interactive-selected)]", a = "Checking connection", o = "checking"), /* @__PURE__ */ t("span", {
 		"data-testid": "backend-status-dot",
 		"data-status": o,
 		"aria-label": a,

package/dist/components/features/backends/backend-status-dot.js.map

@@ -1 +1 @@
-{"version":3,"file":"backend-status-dot.js","names":[],"sources":["../../../../src/components/features/backends/backend-status-dot.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface BackendStatusDotProps {\n  /** `null` while the first probe is in flight. */\n  isConnected: boolean | null;\n  className?: string;\n}\n\n/**\n * Small colored dot that reflects backend reachability:\n *   - green when connected\n *   - red when disconnected\n *   - dim gray while the first probe is in flight\n */\nexport function BackendStatusDot({\n  isConnected,\n  className,\n}: BackendStatusDotProps) {\n  let color: string;\n  let label: string;\n  let status: string;\n  if (isConnected === true) {\n    color = \"bg-[var(--oh-status-success)]\";\n    label = \"Connected\";\n    status = \"connected\";\n  } else if (isConnected === false) {\n    color = \"bg-red-500\";\n    label = \"Disconnected\";\n    status = \"disconnected\";\n  } else {\n    color = \"bg-[var(--oh-interactive-selected)]\";\n    label = \"Checking connection\";\n    status = \"checking\";\n  }\n\n  return (\n    <span\n      data-testid=\"backend-status-dot\"\n      data-status={status}\n      aria-label={label}\n      title={label}\n      role=\"status\"\n      className={cn(\n        \"inline-block w-2 h-2 rounded-full shrink-0\",\n        color,\n        className,\n      )}\n    />\n  );\n}\n"],"mappings":";;;;AAeA,SAAgB,EAAiB,EAC/B,gBACA,gBACwB;CACxB,IAAI,GACA,GACA;AAeJ,QAdI,MAAgB,MAClB,IAAQ,iCACR,IAAQ,aACR,IAAS,eACA,MAAgB,MACzB,IAAQ,cACR,IAAQ,gBACR,IAAS,mBAET,IAAQ,uCACR,IAAQ,uBACR,IAAS,aAIT,kBAAC,QAAD;EACE,eAAY;EACZ,eAAa;EACb,cAAY;EACZ,OAAO;EACP,MAAK;EACL,WAAW,EACT,8CACA,GACA,EACD;EACD,CAAA"}
+{"version":3,"file":"backend-status-dot.js","names":[],"sources":["../../../../src/components/features/backends/backend-status-dot.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface BackendStatusDotProps {\n  /** `null` while the first probe is in flight. */\n  isConnected: boolean | null | \"unavailable\";\n  className?: string;\n}\n\n/**\n * Small colored dot that reflects backend reachability:\n *   - green when connected\n *   - red when disconnected\n *   - dim gray while the first probe is in flight\n */\nexport function BackendStatusDot({\n  isConnected,\n  className,\n}: BackendStatusDotProps) {\n  let color: string;\n  let label: string;\n  let status: string;\n  if (isConnected === \"unavailable\") {\n    color = \"bg-[var(--oh-text-tertiary)]\";\n    label = \"No Backend Available\";\n    status = \"unavailable\";\n  } else if (isConnected === true) {\n    color = \"bg-[var(--oh-status-success)]\";\n    label = \"Connected\";\n    status = \"connected\";\n  } else if (isConnected === false) {\n    color = \"bg-red-500\";\n    label = \"Disconnected\";\n    status = \"disconnected\";\n  } else {\n    color = \"bg-[var(--oh-interactive-selected)]\";\n    label = \"Checking connection\";\n    status = \"checking\";\n  }\n\n  return (\n    <span\n      data-testid=\"backend-status-dot\"\n      data-status={status}\n      aria-label={label}\n      title={label}\n      role=\"status\"\n      className={cn(\n        \"inline-block w-2 h-2 rounded-full shrink-0\",\n        color,\n        className,\n      )}\n    />\n  );\n}\n"],"mappings":";;;;AAeA,SAAgB,EAAiB,EAC/B,gBACA,gBACwB;CACxB,IAAI,GACA,GACA;AAmBJ,QAlBI,MAAgB,iBAClB,IAAQ,gCACR,IAAQ,wBACR,IAAS,iBACA,MAAgB,MACzB,IAAQ,iCACR,IAAQ,aACR,IAAS,eACA,MAAgB,MACzB,IAAQ,cACR,IAAQ,gBACR,IAAS,mBAET,IAAQ,uCACR,IAAQ,uBACR,IAAS,aAIT,kBAAC,QAAD;EACE,eAAY;EACZ,eAAa;EACb,cAAY;EACZ,OAAO;EACP,MAAK;EACL,WAAW,EACT,8CACA,GACA,EACD;EACD,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(`../../../utils/utils.cjs`),i=require(`../../../contexts/active-backend-context.cjs`),a=require(`../../../node_modules/lucide-react/dist/esm/icons/pencil.cjs`),o=require(`../../../node_modules/lucide-react/dist/esm/icons/plus.cjs`),s=require(`../../../node_modules/lucide-react/dist/esm/icons/trash-2.cjs`),c=require(`../../../node_modules/@openhands/typescript-client/dist/client/server-client.cjs`),l=require(`../../../node_modules/@tanstack/react-query/build/modern/useQuery.cjs`),u=require(`../../../api/agent-server-client-options.cjs`),d=require(`../../shared/modals/modal-backdrop.cjs`),f=require(`../../shared/modals/modal-body.cjs`),p=require(`../../shared/modals/modal-close-button.cjs`),m=require(`../settings/brand-button.cjs`),h=require(`../../shared/modals/confirmation-modal.cjs`),g=require(`../../../hooks/query/use-backends-health.cjs`),_=require(`./backend-status-dot.cjs`),v=require(`./backend-form-modal.cjs`);let y=require(`react`);y=e.__toESM(y,1);let b=require(`react/jsx-runtime`);var x=`inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-muted transition-colors hover:bg-interactive-hover hover:text-white`;function S({backend:e}){let{t:r}=t.useTranslation(`openhands`),{data:i}=l.useQuery({queryKey:[`backend-version`,e.host,e.apiKey],queryFn:async()=>(await new c.ServerClient(u.getAgentServerClientOptions({host:e.host,sessionApiKey:e.apiKey||null,timeout:5e3})).getServerInfo()).version??null,retry:!1,staleTime:6e4,enabled:e.kind===`local`});return i?(0,b.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 C({backend:e,health:r,onEdit:i,onRemove:o}){let{t:c}=t.useTranslation(`openhands`);return(0,b.jsxs)(`li`,{className:`flex items-center gap-3 px-3 py-3`,"data-testid":`manage-backends-row-${e.name}`,children:[(0,b.jsx)(_.BackendStatusDot,{isConnected:r?.isConnected??null}),(0,b.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col`,children:[(0,b.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[(0,b.jsx)(`span`,{className:`truncate text-sm text-white`,children:e.name}),(0,b.jsx)(S,{backend:e})]}),(0,b.jsx)(`span`,{className:`truncate text-xs text-[var(--oh-muted)]`,children:e.host})]}),(0,b.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`?c(n.I18nKey.BACKEND$KIND_CLOUD):c(n.I18nKey.BACKEND$KIND_LOCAL)}),(0,b.jsxs)(`div`,{className:`flex shrink-0 items-center gap-0.5`,children:[(0,b.jsx)(`button`,{type:`button`,onClick:i,"aria-label":c(n.I18nKey.BACKEND$EDIT),"data-testid":`manage-backends-edit-${e.name}`,className:x,children:(0,b.jsx)(a.Pencil,{"aria-hidden":!0,className:`size-4`,strokeWidth:2})}),(0,b.jsx)(`button`,{type:`button`,onClick:o,"aria-label":c(n.I18nKey.BACKEND$REMOVE),"data-testid":`manage-backends-remove-${e.name}`,className:x,children:(0,b.jsx)(s.Trash2,{"aria-hidden":!0,className:`size-4`,strokeWidth:2})})]})]})}function w({onClose:e}){let{t:a}=t.useTranslation(`openhands`),{backends:s,removeBackend:c}=i.useActiveBackendContext(),l=g.useBackendsHealth(s,{probeDisabledOnce:!0}),[u,_]=y.default.useState(null),[x,S]=y.default.useState(null),[w,T]=y.default.useState(!1);return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(d.ModalBackdrop,{onClose:e,"aria-label":a(n.I18nKey.BACKEND$MANAGE_TITLE),children:(0,b.jsxs)(`div`,{"data-testid":`manage-backends-modal`,className:r.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:[(0,b.jsx)(p.ModalCloseButton,{onClose:e,testId:`close-manage-backends-modal`}),(0,b.jsx)(`div`,{className:`p-5 pr-12`,children:(0,b.jsx)(`h2`,{className:`text-lg font-semibold`,children:a(n.I18nKey.BACKEND$MANAGE_TITLE)})}),(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:s.length===0?(0,b.jsx)(`p`,{className:`px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]`,children:a(n.I18nKey.BACKEND$MANAGE_EMPTY)}):(0,b.jsx)(`ul`,{className:`divide-y divide-[var(--oh-border)]`,children:s.map(e=>(0,b.jsx)(C,{backend:e,health:l[e.id],onEdit:()=>S(e),onRemove:()=>_({id:e.id,name:e.name})},e.id))})})}),(0,b.jsxs)(`div`,{className:`flex justify-end gap-2 p-5`,children:[(0,b.jsx)(m.BrandButton,{type:`button`,variant:`secondary`,onClick:()=>T(!0),testId:`manage-backends-add`,startContent:(0,b.jsx)(o.Plus,{width:14,height:14}),children:a(n.I18nKey.BACKEND$ADD)}),(0,b.jsx)(m.BrandButton,{type:`button`,variant:`primary`,onClick:e,testId:`manage-backends-done`,children:a(n.I18nKey.HOME$DONE)})]})]})}),w?(0,b.jsx)(v.BackendFormModal,{mode:`add`,onClose:()=>T(!1)}):null,x?(0,b.jsx)(v.BackendFormModal,{mode:`edit`,backend:x,onClose:()=>S(null)}):null,u?(0,b.jsx)(h.ConfirmationModal,{text:a(n.I18nKey.BACKEND$REMOVE_CONFIRMATION,{name:u.name}),onConfirm:()=>{u&&(c(u.id),_(null))},onCancel:()=>_(null)}):null]})}exports.ManageBackendsModal=w;
+const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../utils/utils.cjs`),i=require(`../../../contexts/active-backend-context.cjs`),a=require(`../../../node_modules/lucide-react/dist/esm/icons/pencil.cjs`),o=require(`../../../node_modules/lucide-react/dist/esm/icons/plus.cjs`),s=require(`../../../node_modules/lucide-react/dist/esm/icons/trash-2.cjs`),c=require(`../../../node_modules/@openhands/typescript-client/dist/client/server-client.cjs`),l=require(`../../../node_modules/@tanstack/react-query/build/modern/useQuery.cjs`),u=require(`../../../api/agent-server-client-options.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 c.ServerClient(u.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,onEdit:o,onRemove:c}){let{t:l}=t.useTranslation(`openhands`),u=_.isInvalidBackendApiKeyHealthError(i?.lastError),d,f=`text-[var(--oh-muted)]`;u?(d=l(n.I18nKey.AUTH$INVALID_KEY),f=`text-red-300`):i?.isConnected===!0?(d=l(n.I18nKey.ONBOARDING$BACKEND_STATUS_CONNECTED),f=`text-green-300`):i?.isConnected===!1?(d=l(n.I18nKey.ONBOARDING$BACKEND_STATUS_DISCONNECTED),f=`text-red-300`):d=l(n.I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING);let p=u?!1:i?.isConnected??null;return(0,x.jsxs)(`li`,{className:`flex items-center gap-3 px-3 py-3`,"data-testid":`manage-backends-row-${e.name}`,children:[(0,x.jsx)(v.BackendStatusDot,{isConnected:p}),(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:r.cn(`truncate text-xs`,f),children:d})]}),(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`?l(n.I18nKey.BACKEND$KIND_CLOUD):l(n.I18nKey.BACKEND$KIND_LOCAL)}),(0,x.jsxs)(`div`,{className:`flex shrink-0 items-center gap-0.5`,children:[(0,x.jsx)(`button`,{type:`button`,onClick:o,"aria-label":l(n.I18nKey.BACKEND$EDIT),"data-testid":`manage-backends-edit-${e.name}`,className:S,children:(0,x.jsx)(a.Pencil,{"aria-hidden":!0,className:`size-4`,strokeWidth:2})}),(0,x.jsx)(`button`,{type:`button`,onClick:c,"aria-label":l(n.I18nKey.BACKEND$REMOVE),"data-testid":`manage-backends-remove-${e.name}`,className:S,children:(0,x.jsx)(s.Trash2,{"aria-hidden":!0,className:`size-4`,strokeWidth:2})})]})]})}function T({onClose:e}){let{t:a}=t.useTranslation(`openhands`),{backends:s,removeBackend:c}=i.useActiveBackendContext(),l=_.useBackendsHealth(s,{probeDisabledOnce:!0}),[u,v]=b.default.useState(null),[S,C]=b.default.useState(null),[T,E]=b.default.useState(!1);return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(d.ModalBackdrop,{onClose:e,"aria-label":a(n.I18nKey.BACKEND$MANAGE_TITLE),children:(0,x.jsxs)(`div`,{"data-testid":`manage-backends-modal`,className:r.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:[(0,x.jsx)(m.ModalCloseButton,{onClose:e,testId:`close-manage-backends-modal`}),(0,x.jsx)(`div`,{className:`p-5 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:l[e.id],onEdit:()=>C(e),onRemove:()=>v({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:`secondary`,onClick:()=>E(!0),testId:`manage-backends-add`,startContent:(0,x.jsx)(o.Plus,{width:14,height:14}),children:a(n.I18nKey.BACKEND$ADD)}),(0,x.jsx)(h.BrandButton,{type:`button`,variant:`primary`,onClick:e,testId:`manage-backends-done`,children:a(n.I18nKey.HOME$DONE)})]})]})}),T?(0,x.jsx)(y.BackendFormModal,{mode:`add`,onClose:()=>E(!1)}):null,S?(0,x.jsx)(y.BackendFormModal,{mode:`edit`,backend:S,onClose:()=>C(null)}):null,u?(0,x.jsx)(g.ConfirmationModal,{text:a(n.I18nKey.BACKEND$REMOVE_CONFIRMATION,{name:u.name}),onConfirm:()=>{u&&(c(u.id),v(null))},onCancel:()=>v(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  useBackendsHealth,\n  type BackendHealth,\n} from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\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\ninterface PendingRemoval {\n  id: string;\n  name: string;\n}\n\ninterface BackendRowProps {\n  backend: Backend;\n  health: BackendHealth | undefined;\n  onEdit: () => void;\n  onRemove: () => void;\n}\n\nfunction BackendRow({ backend, health, onEdit, onRemove }: BackendRowProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <li\n      className=\"flex items-center gap-3 px-3 py-3\"\n      data-testid={`manage-backends-row-${backend.name}`}\n    >\n      <BackendStatusDot isConnected={health?.isConnected ?? null} />\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      </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      <div className=\"flex shrink-0 items-center gap-0.5\">\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({ onClose }: ManageBackendsModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, removeBackend } = 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  return (\n    <>\n      <ModalBackdrop\n        onClose={onClose}\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          <ModalCloseButton\n            onClose={onClose}\n            testId=\"close-manage-backends-modal\"\n          />\n          <div className=\"p-5 pr-12\">\n            <h2 className=\"text-lg font-semibold\">\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                      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=\"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            <BrandButton\n              type=\"button\"\n              variant=\"primary\"\n              onClick={onClose}\n              testId=\"manage-backends-done\"\n            >\n              {t(I18nKey.HOME$DONE)}\n            </BrandButton>\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\ninterface PendingRemoval {\n  id: string;\n  name: string;\n}\n\ninterface BackendRowProps {\n  backend: Backend;\n  health: BackendHealth | undefined;\n  onEdit: () => void;\n  onRemove: () => void;\n}\n\nfunction BackendRow({ backend, health, onEdit, onRemove }: 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\n  return (\n    <li\n      className=\"flex items-center gap-3 px-3 py-3\"\n      data-testid={`manage-backends-row-${backend.name}`}\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      <div className=\"flex shrink-0 items-center gap-0.5\">\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({ onClose }: ManageBackendsModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, removeBackend } = 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  return (\n    <>\n      <ModalBackdrop\n        onClose={onClose}\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          <ModalCloseButton\n            onClose={onClose}\n            testId=\"close-manage-backends-modal\"\n          />\n          <div className=\"p-5 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                      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=\"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            <BrandButton\n              type=\"button\"\n              variant=\"primary\"\n              onClick={onClose}\n              testId=\"manage-backends-done\"\n            >\n              {t(I18nKey.HOME$DONE)}\n            </BrandButton>\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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"}