@openhands/agent-canvas 1.4.0 → 1.5.0

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

@@ -6,14 +6,14 @@ 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 ee } from "../../../utils/form-control-classes.js";
-import { StyledTooltip as te } from "../../shared/buttons/styled-tooltip.js";
-import { dropdownFooterActionClassName as c, dropdownMenuListClassName as ne, dropdownMenuRowIconWrapperClassName as l } from "../../../utils/dropdown-classes.js";
-import { NavigationLink as re } from "../../shared/navigation-link.js";
-import { useAllCloudOrganizations as ie } from "../../../hooks/query/use-cloud-organizations.js";
-import { useCloudCurrentUserId as ae } from "../../../hooks/query/use-cloud-current-user-id.js";
-import { Dropdown as u } from "../../../ui/dropdown/dropdown.js";
-import { useBackendsHealth as d } from "../../../hooks/query/use-backends-health.js";
+import { 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";
@@ -39,7 +39,7 @@ function b(e) {
 function de() {
 	return /* @__PURE__ */ h(p, { isConnected: "unavailable" });
 }
-function fe(e, t, n, r, i) {
+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),
@@ -67,20 +67,20 @@ function fe(e, t, n, r, i) {
 	}
 	return a;
 }
-function x({ openUpward: p = !1, hideTrigger: v = !1, defaultOpen: x = !1, onSelectOption: S, onOpenAddBackend: C, onOpenManageBackends: w, sidebarCollapsed: T = !1 } = {}) {
-	let { t: E } = e("openhands"), { backends: D, active: O, setActive: k } = s(), A = ie(), j = ae(), M = d(D), N = le(), P = _("/settings"), F = _("/settings/*"), I = _("/conversations/:conversationId"), L = _("/automations/:automationId"), [R, z] = m.useState(!1), [B, V] = m.useState(!1), H = E(t.BACKEND$PERSONAL_WORKSPACE), U = m.useMemo(() => fe(D, H, A, j, M), [
+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), [
 		D,
 		H,
 		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), pe = a((e) => e.isRightPanelShown), me = !T || I && pe ? "top" : "left", he = Object.values(A).some((e) => e.isLoading);
+	]), 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;
 		let { backend: e } = O, t = A[e.id];
 		if (!t || t.orgs.length === 0) return;
-		let n = j[e.id]?.userId ?? null, r = (n ? t.orgs.find((e) => e.id === n) : void 0) ?? t.orgs[0];
-		r && k(e.id, r.id);
+		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];
+		a && k(e.id, a.id);
 	}, [
 		O,
 		A,
@@ -88,40 +88,40 @@ function x({ openUpward: p = !1, hideTrigger: v = !1, defaultOpen: x = !1, onSel
 		k,
 		W
 	]);
-	let X = m.useCallback(() => {
-		if (C) {
-			C(), S?.();
+	let Z = m.useCallback(() => {
+		if (w) {
+			w(), C?.();
 			return;
 		}
 		z(!0);
-	}, [C, S]), Z = m.useCallback(() => {
-		if (w) {
-			w(), S?.();
+	}, [w, C]), Q = m.useCallback(() => {
+		if (T) {
+			T(), C?.();
 			return;
 		}
 		V(!0);
-	}, [w, S]), Q = m.useCallback((e) => {
+	}, [T, C]), $ = m.useCallback((e) => {
 		e.preventDefault(), e.stopPropagation();
-	}, []), ge = m.useCallback((e) => {
-		Q(e), X();
-	}, [X, Q]), $ = m.useCallback((e) => {
-		Q(e), X();
-	}, [X, Q]), _e = m.useCallback((e) => {
-		Q(e), Z();
-	}, [Z, Q]), ve = m.useCallback((e) => {
-		Q(e), Z();
-	}, [Z, Q]), ye = /* @__PURE__ */ g("div", {
-		className: ne,
+	}, []), 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", {
 			type: "button",
 			"data-testid": "add-backend-menu-item",
-			onMouseDown: Q,
-			onTouchStart: Q,
-			onTouchEnd: $,
-			onClick: ge,
-			className: i(c, "cursor-pointer rounded-md"),
+			onMouseDown: $,
+			onTouchStart: $,
+			onTouchEnd: ge,
+			onClick: he,
+			className: i(l, "cursor-pointer rounded-md"),
 			children: [/* @__PURE__ */ h("span", {
-				className: l,
+				className: u,
 				"aria-hidden": !0,
 				children: /* @__PURE__ */ h(n, {
 					width: 16,
@@ -131,13 +131,13 @@ function x({ openUpward: p = !1, hideTrigger: v = !1, defaultOpen: x = !1, onSel
 		}), /* @__PURE__ */ g("button", {
 			type: "button",
 			"data-testid": "manage-backends-menu-item",
-			onMouseDown: Q,
-			onTouchStart: Q,
+			onMouseDown: $,
+			onTouchStart: $,
 			onTouchEnd: ve,
 			onClick: _e,
-			className: i(c, "cursor-pointer rounded-md"),
+			className: i(l, "cursor-pointer rounded-md"),
 			children: [/* @__PURE__ */ h("span", {
-				className: l,
+				className: u,
 				"aria-hidden": !0,
 				children: /* @__PURE__ */ h(r, {
 					width: 16,
@@ -150,7 +150,7 @@ function x({ openUpward: p = !1, hideTrigger: v = !1, defaultOpen: x = !1, onSel
 		let { backendId: t, orgId: n } = ue(e), r = D.find((e) => e.id === t);
 		r && (f(U.find((t) => t.value === e)?.label ?? r.name), await new Promise((e) => {
 			setTimeout(e, 400);
-		}), I ? N("/conversations") : L && N("/automations"), k(r.id, n), S?.());
+		}), I ? N("/conversations") : L && N("/automations"), k(r.id, n), C?.());
 	}, [
 		K,
 		D,
@@ -160,14 +160,14 @@ function x({ openUpward: p = !1, hideTrigger: v = !1, defaultOpen: x = !1, onSel
 		U,
 		k,
 		E,
-		S
+		C
 	]);
 	return /* @__PURE__ */ g(ce, { children: [
 		/* @__PURE__ */ g("div", {
 			className: "flex items-center gap-2 w-full",
 			children: [/* @__PURE__ */ h("div", {
 				className: "flex-1 min-w-0",
-				children: /* @__PURE__ */ h(u, {
+				children: /* @__PURE__ */ h(ie, {
 					testId: "backend-selector",
 					defaultValue: q ?? {
 						value: K,
@@ -177,26 +177,26 @@ function x({ openUpward: p = !1, hideTrigger: v = !1, defaultOpen: x = !1, onSel
 					footer: ye,
 					openUpward: p,
 					hideTrigger: v,
-					defaultOpen: x,
+					defaultOpen: S,
 					openOnHover: !v,
 					onChange: (e) => {
 						e && be(e.value);
 					},
 					placeholder: W ? G : O.backend.name,
-					loading: he,
+					loading: me,
 					options: U,
 					className: "h-10 px-2 py-0 bg-transparent border-transparent hover:bg-[var(--oh-surface-raised)] focus-within:bg-[var(--oh-surface-raised)] focus-within:border-transparent focus-within:ring-0"
 				}, `${K}-${q?.label ?? ""}`)
-			}), v ? null : /* @__PURE__ */ h(te, {
+			}), v ? null : /* @__PURE__ */ h(ee, {
 				content: Y,
-				placement: me,
+				placement: pe,
 				offset: 10,
-				children: /* @__PURE__ */ h(re, {
+				children: /* @__PURE__ */ h(ne, {
 					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", ee),
+					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, {
 						width: 16,
 						height: 16
@@ -209,6 +209,6 @@ function x({ openUpward: p = !1, hideTrigger: v = !1, defaultOpen: x = !1, onSel
 	] });
 }
 //#endregion
-export { x as BackendSelector };
+export { S as BackendSelector };
 
 //# sourceMappingURL=backend-selector.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"backend-selector.js","names":[],"sources":["../../../../src/components/features/backends/backend-selector.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useMatch, useNavigate } from \"react-router\";\nimport { Plus, Settings } from \"lucide-react\";\nimport { Dropdown } from \"#/ui/dropdown/dropdown\";\nimport { DropdownOption } from \"#/ui/dropdown/types\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport {\n  useBackendsHealth,\n  type BackendHealth,\n} from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend } from \"#/api/backend-registry/types\";\n// Import the trigger helpers from the lightweight store, not the overlay\n// component, so the eagerly-mounted sidebar/backend-selector graph does not\n// pull in the overlay's render code (the overlay is lazy-loaded from\n// `routes/root-layout.tsx`).\nimport {\n  ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS,\n  triggerEnvironmentSwitch,\n} from \"#/components/features/backends/environment-switch-store\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { AddBackendModal } from \"./add-backend-modal\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { ManageBackendsModal } from \"./manage-backends-modal\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlTransitionClassName } from \"#/utils/form-control-classes\";\nimport {\n  dropdownFooterActionClassName,\n  dropdownMenuListClassName,\n  dropdownMenuRowIconWrapperClassName,\n} from \"#/utils/dropdown-classes\";\n\nconst VALUE_SEPARATOR = \"::\";\n\nfunction makeOptionValue(backendId: string, orgId: string | null): string {\n  return orgId ? `${backendId}${VALUE_SEPARATOR}${orgId}` : backendId;\n}\n\nfunction parseOptionValue(value: string): {\n  backendId: string;\n  orgId: string | null;\n} {\n  const [backendId, orgId] = value.split(VALUE_SEPARATOR);\n  return { backendId, orgId: orgId ?? null };\n}\n\nfunction buildStatusPrefix(health: BackendHealth | undefined) {\n  return <BackendStatusDot isConnected={health?.isConnected ?? null} />;\n}\n\nfunction buildNoBackendPrefix() {\n  return <BackendStatusDot isConnected=\"unavailable\" />;\n}\n\nfunction buildOptions(\n  registered: Backend[],\n  personalWorkspaceLabel: string,\n  cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n  currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n  healthByBackendId: Record<string, BackendHealth>,\n): DropdownOption[] {\n  const options: DropdownOption[] = [];\n\n  const locals = registered.filter((b) => b.kind === \"local\");\n  const clouds = registered.filter((b) => b.kind === \"cloud\");\n\n  for (const b of locals) {\n    options.push({\n      value: makeOptionValue(b.id, null),\n      label: b.name,\n      prefix: buildStatusPrefix(healthByBackendId[b.id]),\n    });\n  }\n\n  for (const b of clouds) {\n    const entry = cloudOrgs[b.id];\n    const prefix = buildStatusPrefix(healthByBackendId[b.id]);\n    if (!entry || entry.orgs.length === 0) {\n      options.push({\n        value: makeOptionValue(b.id, null),\n        label: b.name,\n        prefix,\n      });\n    } else {\n      // Personal-workspace rule (per the cloud contract): the org whose\n      // id matches the calling user's id is the user's personal\n      // workspace. We resolve `user_id` once per backend (via /me on any\n      // one org) and apply it across all orgs of that backend.\n      const userIdForBackend = currentUserIds[b.id]?.userId ?? null;\n\n      for (const org of entry.orgs) {\n        const isPersonal = !!userIdForBackend && userIdForBackend === org.id;\n        const orgLabel = isPersonal ? personalWorkspaceLabel : org.name;\n        options.push({\n          value: makeOptionValue(b.id, org.id),\n          label: `${b.name} – ${orgLabel}`,\n          // All org rows for the same cloud backend share that backend's\n          // single connectivity verdict — there is no per-org probe.\n          prefix,\n        });\n      }\n    }\n  }\n\n  return options;\n}\n\ninterface BackendSelectorProps {\n  /** Render the menu above the trigger (e.g. when pinned to bottom of sidebar). */\n  openUpward?: boolean;\n  /** Hide the selector input trigger and only render the dropdown menu. */\n  hideTrigger?: boolean;\n  /** Whether the dropdown menu should start open on mount. */\n  defaultOpen?: boolean;\n  /** Callback fired after selecting a backend/org option. */\n  onSelectOption?: () => void;\n  /**\n   * Override the internal Add Backend modal handling. When provided,\n   * clicking \"Add Backend\" calls this instead of opening BackendSelector's\n   * own modal. Useful when the selector is mounted inside an ephemeral\n   * container (e.g. the collapsed-sidebar popover) and the modal must\n   * survive the parent unmounting.\n   */\n  onOpenAddBackend?: () => void;\n  /** Same as onOpenAddBackend but for the Manage Backends modal. */\n  onOpenManageBackends?: () => void;\n  /**\n   * Whether the surrounding sidebar rail is in its collapsed variant. Passed\n   * down from `SidebarRailBody` so the mobile drawer (which always renders\n   * the expanded rail) can override the persisted desktop value.\n   */\n  sidebarCollapsed?: boolean;\n}\n\nexport function BackendSelector({\n  openUpward = false,\n  hideTrigger = false,\n  defaultOpen = false,\n  onSelectOption,\n  onOpenAddBackend,\n  onOpenManageBackends,\n  sidebarCollapsed = false,\n}: BackendSelectorProps = {}) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, active, setActive } = useActiveBackendContext();\n  const cloudOrgs = useAllCloudOrganizations();\n  const currentUserIds = useCloudCurrentUserId();\n  // Probe each registered backend every 10s.\n  const healthByBackendId = useBackendsHealth(backends);\n  const navigate = useNavigate();\n  const settingsMatch = useMatch(\"/settings\");\n  const settingsSubrouteMatch = useMatch(\"/settings/*\");\n  const conversationMatch = useMatch(\"/conversations/:conversationId\");\n  const automationDetailMatch = useMatch(\"/automations/:automationId\");\n  const [addBackendModalOpen, setAddBackendModalOpen] = React.useState(false);\n  const [manageBackendsModalOpen, setManageBackendsModalOpen] =\n    React.useState(false);\n\n  const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n\n  const options = React.useMemo(\n    () =>\n      buildOptions(\n        backends,\n        personalWorkspaceLabel,\n        cloudOrgs,\n        currentUserIds,\n        healthByBackendId,\n      ),\n    [\n      backends,\n      personalWorkspaceLabel,\n      cloudOrgs,\n      currentUserIds,\n      healthByBackendId,\n    ],\n  );\n\n  const noBackendSelected = isNoBackend(active.backend);\n  const noBackendLabel = t(I18nKey.BACKEND$NO_BACKEND_AVAILABLE);\n  const activeValue = makeOptionValue(active.backend.id, active.orgId);\n  const activeOption = noBackendSelected\n    ? undefined\n    : options.find((o) => o.value === activeValue);\n  const isSettingsActive = Boolean(settingsMatch || settingsSubrouteMatch);\n  const settingsLabel = t(I18nKey.SIDEBAR$SETTINGS);\n  const isRightPanelShown = useConversationStore(\n    (state) => state.isRightPanelShown,\n  );\n  // When the sidebar rail is expanded, `placement=\"left\"` hugs the main\n  // canvas and reads awkwardly; prefer above the control. When the rail is\n  // collapsed, keep left except on active conversation + open right drawer.\n  const settingsTooltipPlacement =\n    !sidebarCollapsed || (conversationMatch && isRightPanelShown)\n      ? \"top\"\n      : \"left\";\n\n  const someCloudLoading = Object.values(cloudOrgs).some((c) => c.isLoading);\n\n  // Self-heal a malformed `(cloudBackendId, null)` selection.\n  //\n  // Once a cloud backend's orgs resolve, the dropdown only renders\n  // per-org rows for it — the `(backendId, null)` row disappears, so\n  // selecting that shape would drift from what the dropdown can render\n  // (UI says \"Local\", APIs hit cloud). When we detect the drift, snap\n  // the selection onto the personal-workspace org (or, lacking a /me\n  // result, the first org). The selection is recorded locally only;\n  // the cloud request scope follows from the API key's bound org and the\n  // X-Org-Id header sent by `callCloudProxy`, so the cloud UI's\n  // org choice is never mutated as a side effect.\n  React.useEffect(() => {\n    if (noBackendSelected || active.backend.kind !== \"cloud\" || active.orgId)\n      return;\n    const { backend } = active;\n    const entry = cloudOrgs[backend.id];\n    if (!entry || entry.orgs.length === 0) return;\n\n    const userId = currentUserIds[backend.id]?.userId ?? null;\n    const personal = userId\n      ? entry.orgs.find((o) => o.id === userId)\n      : undefined;\n    const target = personal ?? entry.orgs[0];\n    if (target) {\n      setActive(backend.id, target.id);\n    }\n  }, [active, cloudOrgs, currentUserIds, setActive, noBackendSelected]);\n\n  const openAddBackendModal = React.useCallback(() => {\n    if (onOpenAddBackend) {\n      onOpenAddBackend();\n      onSelectOption?.();\n      return;\n    }\n    setAddBackendModalOpen(true);\n  }, [onOpenAddBackend, onSelectOption]);\n\n  const openManageBackendsModal = React.useCallback(() => {\n    if (onOpenManageBackends) {\n      onOpenManageBackends();\n      onSelectOption?.();\n      return;\n    }\n    setManageBackendsModalOpen(true);\n  }, [onOpenManageBackends, onSelectOption]);\n\n  const preventDropdownMenuClose = React.useCallback(\n    (event: React.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 { 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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"}

package/dist/components/features/backends/device-flow-auth.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(`../../shared/modals/modal-backdrop.cjs`),a=require(`../../shared/modals/modal-body.cjs`),o=require(`../settings/brand-button.cjs`),s=require(`../../../hooks/use-device-flow.cjs`);let c=require(`react`);c=e.__toESM(c,1);let l=require(`react/jsx-runtime`);function u(e){try{return new URL(e).protocol===`https:`}catch{return!1}}function d({host:e,onSuccess:d,testIdRoot:p,isDisabled:m=!1,idleButtonLabel:h,idleButtonContent:g,className:_,buttonClassName:v,buttonVariant:y=`primary`,statusDisplay:b=`inline`}){let{t:x}=t.useTranslation(`openhands`),S=s.useDeviceFlow(),C=c.default.useRef(null);c.default.useEffect(()=>()=>{C.current?.close()},[]),c.default.useEffect(()=>{if(S.status===`awaiting_authorization`&&S.verificationUrl&&C.current&&!C.current.closed){if(!u(S.verificationUrl)){console.error(`Invalid verification URL protocol`);return}try{C.current.location.href=S.verificationUrl}catch{C.current=window.open(S.verificationUrl,`_blank`,`noopener,noreferrer`)}}},[S.status,S.verificationUrl]),c.default.useEffect(()=>{if(S.status===`success`&&S.apiKey)try{d(S.apiKey)}finally{S.reset(),C.current?.close()}},[S.status,S.apiKey,S.reset,d]);let w=()=>{let t=e.trim().replace(/\/+$/,``),n=/^https?:\/\//i.test(t)?t:`https://${t}`;try{let e=new URL(n);if(e.username||e.password)throw Error(`Invalid URL format`)}catch{return}C.current=window.open(`about:blank`,`_blank`),C.current||console.warn(`Popup blocked - user will need to use manual link`),S.start(n)},T=()=>{S.cancel(),C.current?.close()},E=(0,l.jsx)(f,{status:S.status,error:S.error,verificationUrl:S.verificationUrl,testIdRoot:p,onCancel:T,onRetry:w}),D=b===`modal`&&S.status!==`idle`,O=h??x(n.I18nKey.BACKEND$LOGIN_WITH_OPENHANDS);return(0,l.jsxs)(`div`,{"data-testid":`${p}-device-flow`,className:r.cn(`flex flex-col gap-3`,_),children:[S.status===`idle`&&y===`unstyled`&&(0,l.jsx)(`button`,{type:`button`,onClick:w,"data-testid":`${p}-login-button`,className:v,disabled:m,"aria-label":g?O:void 0,children:g??O}),S.status===`idle`&&y!==`unstyled`&&(0,l.jsx)(o.BrandButton,{type:`button`,variant:y,onClick:w,testId:`${p}-login-button`,className:r.cn(`w-full`,v),isDisabled:m,ariaLabel:g?O:void 0,children:g??O}),b===`inline`?E:null,D?(0,l.jsx)(i.ModalBackdrop,{onClose:T,"aria-label":x(n.I18nKey.BACKEND$LOGIN_WITH_OPENHANDS),closeOnBackdropClick:!1,children:(0,l.jsx)(a.ModalBody,{testID:`${p}-auth-modal`,width:`sm`,className:`items-stretch border border-[var(--oh-border)]`,children:E})}):null]})}function f({status:e,error:r,verificationUrl:i,testIdRoot:a,onCancel:s,onRetry:c}){let{t:d}=t.useTranslation(`openhands`);if(e===`idle`||e===`success`)return null;if(e===`starting`)return(0,l.jsxs)(`div`,{className:`flex items-center gap-2 rounded-lg bg-base-tertiary p-3`,"data-testid":`${a}-auth-starting`,role:`status`,"aria-live":`polite`,children:[(0,l.jsx)(p,{}),(0,l.jsx)(`span`,{className:`text-sm text-[var(--oh-text-tertiary)]`,children:d(n.I18nKey.BACKEND$AUTH_STARTING)})]});if(e===`awaiting_authorization`){let e=i&&u(i)?i:null;return(0,l.jsxs)(`div`,{className:`flex flex-col gap-4 rounded-lg bg-base-tertiary p-4`,"data-testid":`${a}-auth-awaiting`,role:`status`,"aria-live":`polite`,children:[(0,l.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,l.jsx)(p,{}),(0,l.jsx)(`span`,{className:`text-sm font-medium text-white`,children:d(n.I18nKey.BACKEND$AUTH_AWAITING)})]}),(0,l.jsx)(`p`,{className:`text-sm leading-5 text-[var(--oh-text-tertiary)]`,children:d(n.I18nKey.BACKEND$AUTH_BROWSER_OPENED)}),e?(0,l.jsxs)(`div`,{className:`flex flex-col gap-1 rounded-md border border-[var(--oh-border)] bg-[var(--oh-surface)] p-3 text-xs text-[var(--oh-muted)]`,children:[(0,l.jsx)(`p`,{children:d(n.I18nKey.BACKEND$AUTH_OPEN_MANUALLY)}),(0,l.jsx)(`a`,{href:e,target:`_blank`,rel:`noopener noreferrer`,className:`max-h-16 overflow-auto break-all text-blue-400 hover:underline`,children:e})]}):null,(0,l.jsx)(o.BrandButton,{type:`button`,variant:`secondary`,onClick:s,testId:`${a}-auth-cancel`,className:`w-full`,children:d(n.I18nKey.BACKEND$AUTH_CANCEL)})]})}return(0,l.jsxs)(`div`,{className:`flex flex-col gap-3 rounded-lg border border-red-700 bg-red-900/20 p-4`,"data-testid":`${a}-auth-error`,role:`alert`,children:[(0,l.jsx)(`p`,{className:`text-sm text-red-400`,children:r}),(0,l.jsx)(o.BrandButton,{type:`button`,variant:`secondary`,onClick:c,testId:`${a}-auth-retry`,className:`w-full`,children:d(n.I18nKey.BACKEND$AUTH_RETRY)})]})}function p(){return(0,l.jsx)(`svg`,{className:`animate-spin h-4 w-4 text-white`,xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 24 24`,"aria-hidden":`true`,children:(0,l.jsx)(`path`,{className:`opacity-75`,fill:`currentColor`,d:`M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z`})})}exports.DeviceFlowAuth=d;
+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(`../../shared/modals/modal-backdrop.cjs`),a=require(`../../shared/modals/modal-body.cjs`),o=require(`../settings/brand-button.cjs`),s=require(`../../../hooks/use-device-flow.cjs`);let c=require(`react`);c=e.__toESM(c,1);let l=require(`react/jsx-runtime`);function u(e){try{return new URL(e).protocol===`https:`}catch{return!1}}function d({host:e,onSuccess:d,testIdRoot:p,isDisabled:m=!1,idleButtonLabel:h,idleButtonContent:g,className:_,buttonClassName:v,buttonVariant:y=`primary`,statusDisplay:b=`inline`,analyticsSource:x}){let{t:S}=t.useTranslation(`openhands`),C=s.useDeviceFlow(),w=c.default.useRef(null);c.default.useEffect(()=>()=>{w.current?.close()},[]),c.default.useEffect(()=>{if(C.status===`awaiting_authorization`&&C.verificationUrl&&w.current&&!w.current.closed){if(!u(C.verificationUrl)){console.error(`Invalid verification URL protocol`);return}try{w.current.location.href=C.verificationUrl}catch{w.current=window.open(C.verificationUrl,`_blank`,`noopener,noreferrer`)}}},[C.status,C.verificationUrl]),c.default.useEffect(()=>{if(C.status===`success`&&C.apiKey)try{d(C.apiKey)}finally{C.reset(),w.current?.close()}},[C.status,C.apiKey,C.reset,d]);let T=()=>{let t=e.trim().replace(/\/+$/,``),n=/^https?:\/\//i.test(t)?t:`https://${t}`;try{let e=new URL(n);if(e.username||e.password)throw Error(`Invalid URL format`)}catch{return}w.current=window.open(`about:blank`,`_blank`),w.current||console.warn(`Popup blocked - user will need to use manual link`),C.start(n,x)},E=()=>{C.cancel(),w.current?.close()},D=(0,l.jsx)(f,{status:C.status,error:C.error,verificationUrl:C.verificationUrl,testIdRoot:p,onCancel:E,onRetry:T}),O=b===`modal`&&C.status!==`idle`,k=h??S(n.I18nKey.BACKEND$LOGIN_WITH_OPENHANDS);return(0,l.jsxs)(`div`,{"data-testid":`${p}-device-flow`,className:r.cn(`flex flex-col gap-3`,_),children:[C.status===`idle`&&y===`unstyled`&&(0,l.jsx)(`button`,{type:`button`,onClick:T,"data-testid":`${p}-login-button`,className:v,disabled:m,"aria-label":g?k:void 0,children:g??k}),C.status===`idle`&&y!==`unstyled`&&(0,l.jsx)(o.BrandButton,{type:`button`,variant:y,onClick:T,testId:`${p}-login-button`,className:r.cn(`w-full`,v),isDisabled:m,ariaLabel:g?k:void 0,children:g??k}),b===`inline`?D:null,O?(0,l.jsx)(i.ModalBackdrop,{onClose:E,"aria-label":S(n.I18nKey.BACKEND$LOGIN_WITH_OPENHANDS),closeOnBackdropClick:!1,children:(0,l.jsx)(a.ModalBody,{testID:`${p}-auth-modal`,width:`sm`,className:`items-stretch border border-[var(--oh-border)]`,children:D})}):null]})}function f({status:e,error:r,verificationUrl:i,testIdRoot:a,onCancel:s,onRetry:c}){let{t:d}=t.useTranslation(`openhands`);if(e===`idle`||e===`success`)return null;if(e===`starting`)return(0,l.jsxs)(`div`,{className:`flex items-center gap-2 rounded-lg bg-base-tertiary p-3`,"data-testid":`${a}-auth-starting`,role:`status`,"aria-live":`polite`,children:[(0,l.jsx)(p,{}),(0,l.jsx)(`span`,{className:`text-sm text-[var(--oh-text-tertiary)]`,children:d(n.I18nKey.BACKEND$AUTH_STARTING)})]});if(e===`awaiting_authorization`){let e=i&&u(i)?i:null;return(0,l.jsxs)(`div`,{className:`flex flex-col gap-4 rounded-lg bg-base-tertiary p-4`,"data-testid":`${a}-auth-awaiting`,role:`status`,"aria-live":`polite`,children:[(0,l.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,l.jsx)(p,{}),(0,l.jsx)(`span`,{className:`text-sm font-medium text-white`,children:d(n.I18nKey.BACKEND$AUTH_AWAITING)})]}),(0,l.jsx)(`p`,{className:`text-sm leading-5 text-[var(--oh-text-tertiary)]`,children:d(n.I18nKey.BACKEND$AUTH_BROWSER_OPENED)}),e?(0,l.jsxs)(`div`,{className:`flex flex-col gap-1 rounded-md border border-[var(--oh-border)] bg-[var(--oh-surface)] p-3 text-xs text-[var(--oh-muted)]`,children:[(0,l.jsx)(`p`,{children:d(n.I18nKey.BACKEND$AUTH_OPEN_MANUALLY)}),(0,l.jsx)(`a`,{href:e,target:`_blank`,rel:`noopener noreferrer`,className:`max-h-16 overflow-auto break-all text-blue-400 hover:underline`,children:e})]}):null,(0,l.jsx)(o.BrandButton,{type:`button`,variant:`secondary`,onClick:s,testId:`${a}-auth-cancel`,className:`w-full`,children:d(n.I18nKey.BACKEND$AUTH_CANCEL)})]})}return(0,l.jsxs)(`div`,{className:`flex flex-col gap-3 rounded-lg border border-red-700 bg-red-900/20 p-4`,"data-testid":`${a}-auth-error`,role:`alert`,children:[(0,l.jsx)(`p`,{className:`text-sm text-red-400`,children:r}),(0,l.jsx)(o.BrandButton,{type:`button`,variant:`secondary`,onClick:c,testId:`${a}-auth-retry`,className:`w-full`,children:d(n.I18nKey.BACKEND$AUTH_RETRY)})]})}function p(){return(0,l.jsx)(`svg`,{className:`animate-spin h-4 w-4 text-white`,xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 24 24`,"aria-hidden":`true`,children:(0,l.jsx)(`path`,{className:`opacity-75`,fill:`currentColor`,d:`M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z`})})}exports.DeviceFlowAuth=d;
 //# sourceMappingURL=device-flow-auth.cjs.map

package/dist/components/features/backends/device-flow-auth.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"device-flow-auth.cjs","names":[],"sources":["../../../../src/components/features/backends/device-flow-auth.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalBody } from \"#/components/shared/modals/modal-body\";\nimport { useDeviceFlow, type DeviceFlowStatus } from \"#/hooks/use-device-flow\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\ntype DeviceFlowButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"unstyled\";\ntype DeviceFlowStatusDisplay = \"inline\" | \"modal\";\n\ninterface DeviceFlowAuthProps {\n  /** The host URL for the cloud backend */\n  host: string;\n  /** Callback when authentication succeeds with the API key */\n  onSuccess: (apiKey: string) => void;\n  /** Test ID prefix for the component */\n  testIdRoot: string;\n  /** Whether the login button should be disabled (e.g., when no host is entered) */\n  isDisabled?: boolean;\n  /** Override for the idle button label and icon-only accessible name. */\n  idleButtonLabel?: string;\n  /** Optional visible content for the idle button. Defaults to the idle label. */\n  idleButtonContent?: React.ReactNode;\n  /** Optional classes for the root wrapper. */\n  className?: string;\n  /** Optional classes for the idle button. */\n  buttonClassName?: string;\n  /** Visual variant for the idle button. */\n  buttonVariant?: DeviceFlowButtonVariant;\n  /** Whether in-progress auth content should render inline or in a modal. */\n  statusDisplay?: DeviceFlowStatusDisplay;\n}\n\n/**\n * Device Flow authentication UI component.\n *\n * Shows a \"Login with OpenHands Cloud\" button that initiates OAuth 2.0 Device Flow\n * authentication. Displays status during the auth process and auto-opens\n * the browser for user authorization.\n */\n/**\n * Validate that a URL is safe to open in a popup.\n * Prevents XSS via javascript: URLs or other malicious schemes.\n */\nfunction isValidVerificationUrl(url: string): boolean {\n  try {\n    const parsed = new URL(url);\n    return parsed.protocol === \"https:\";\n  } catch {\n    return false;\n  }\n}\n\nexport function DeviceFlowAuth({\n  host,\n  onSuccess,\n  testIdRoot,\n  isDisabled = false,\n  idleButtonLabel,\n  idleButtonContent,\n  className,\n  buttonClassName,\n  buttonVariant = \"primary\",\n  statusDisplay = \"inline\",\n}: DeviceFlowAuthProps) {\n  const { t } = useTranslation(\"openhands\");\n  const deviceFlow = useDeviceFlow();\n  const popupRef = React.useRef<Window | null>(null);\n\n  // Close popup on unmount or when auth completes/errors\n  React.useEffect(() => {\n    return () => {\n      popupRef.current?.close();\n    };\n  }, []);\n\n  // Update popup URL when verification URL becomes available\n  React.useEffect(() => {\n    if (\n      deviceFlow.status === \"awaiting_authorization\" &&\n      deviceFlow.verificationUrl &&\n      popupRef.current &&\n      !popupRef.current.closed\n    ) {\n      // Validate URL before assigning to prevent XSS\n      if (!isValidVerificationUrl(deviceFlow.verificationUrl)) {\n        console.error(\"Invalid verification URL protocol\");\n        return;\n      }\n      try {\n        popupRef.current.location.href = deviceFlow.verificationUrl;\n      } catch {\n        // Cross-origin error - popup was navigated away\n        // Open a new one as fallback\n        popupRef.current = window.open(\n          deviceFlow.verificationUrl,\n          \"_blank\",\n          \"noopener,noreferrer\",\n        );\n      }\n    }\n  }, [deviceFlow.status, deviceFlow.verificationUrl]);\n\n  // Call onSuccess when authentication completes\n  React.useEffect(() => {\n    if (deviceFlow.status === \"success\" && deviceFlow.apiKey) {\n      try {\n        onSuccess(deviceFlow.apiKey);\n      } finally {\n        deviceFlow.reset();\n        popupRef.current?.close();\n      }\n    }\n  }, [deviceFlow.status, deviceFlow.apiKey, deviceFlow.reset, onSuccess]);\n\n  const handleStartAuth = () => {\n    // Normalize and validate the host URL\n    const normalizedHost = host.trim().replace(/\\/+$/, \"\");\n    const fullHost = /^https?:\\/\\//i.test(normalizedHost)\n      ? normalizedHost\n      : `https://${normalizedHost}`;\n\n    // Validate URL before proceeding\n    try {\n      const url = new URL(fullHost);\n      // Check for URL manipulation attacks\n      if (url.username || url.password) {\n        throw new Error(\"Invalid URL format\");\n      }\n    } catch {\n      return; // Invalid URL, don't proceed\n    }\n\n    // Open popup immediately on user click to avoid popup blocker\n    // Start with about:blank and update URL once we have verification URL\n    // Note: We intentionally don't use \"noopener\" here because we need to\n    // maintain a reference to update the popup's location when the\n    // verification URL becomes available\n    popupRef.current = window.open(\"about:blank\", \"_blank\");\n\n    if (!popupRef.current) {\n      // Popup was blocked - flow will still work, user can click manual link\n      console.warn(\"Popup blocked - user will need to use manual link\");\n    }\n\n    deviceFlow.start(fullHost);\n  };\n\n  const handleCancel = () => {\n    deviceFlow.cancel();\n    popupRef.current?.close();\n  };\n\n  const statusContent = (\n    <DeviceFlowStatusContent\n      status={deviceFlow.status}\n      error={deviceFlow.error}\n      verificationUrl={deviceFlow.verificationUrl}\n      testIdRoot={testIdRoot}\n      onCancel={handleCancel}\n      onRetry={handleStartAuth}\n    />\n  );\n  const showStatusModal =\n    statusDisplay === \"modal\" && deviceFlow.status !== \"idle\";\n  const idleLabel = idleButtonLabel ?? t(I18nKey.BACKEND$LOGIN_WITH_OPENHANDS);\n\n  return (\n    <div\n      data-testid={`${testIdRoot}-device-flow`}\n      className={cn(\"flex flex-col gap-3\", className)}\n    >\n      {deviceFlow.status === \"idle\" && buttonVariant === \"unstyled\" && (\n        <button\n          type=\"button\"\n          onClick={handleStartAuth}\n          data-testid={`${testIdRoot}-login-button`}\n          className={buttonClassName}\n          disabled={isDisabled}\n          aria-label={idleButtonContent ? idleLabel : undefined}\n        >\n          {idleButtonContent ?? idleLabel}\n        </button>\n      )}\n\n      {deviceFlow.status === \"idle\" && buttonVariant !== \"unstyled\" && (\n        <BrandButton\n          type=\"button\"\n          variant={buttonVariant}\n          onClick={handleStartAuth}\n          testId={`${testIdRoot}-login-button`}\n          className={cn(\"w-full\", buttonClassName)}\n          isDisabled={isDisabled}\n          ariaLabel={idleButtonContent ? idleLabel : undefined}\n        >\n          {idleButtonContent ?? idleLabel}\n        </BrandButton>\n      )}\n\n      {statusDisplay === \"inline\" ? statusContent : null}\n\n      {showStatusModal ? (\n        <ModalBackdrop\n          onClose={handleCancel}\n          aria-label={t(I18nKey.BACKEND$LOGIN_WITH_OPENHANDS)}\n          closeOnBackdropClick={false}\n        >\n          <ModalBody\n            testID={`${testIdRoot}-auth-modal`}\n            width=\"sm\"\n            className=\"items-stretch border border-[var(--oh-border)]\"\n          >\n            {statusContent}\n          </ModalBody>\n        </ModalBackdrop>\n      ) : null}\n    </div>\n  );\n}\n\ninterface DeviceFlowStatusContentProps {\n  status: DeviceFlowStatus;\n  error: string | null;\n  verificationUrl: string | null;\n  testIdRoot: string;\n  onCancel: () => void;\n  onRetry: () => void;\n}\n\nfunction DeviceFlowStatusContent({\n  status,\n  error,\n  verificationUrl,\n  testIdRoot,\n  onCancel,\n  onRetry,\n}: DeviceFlowStatusContentProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (status === \"idle\" || status === \"success\") return null;\n\n  if (status === \"starting\") {\n    return (\n      <div\n        className=\"flex items-center gap-2 rounded-lg bg-base-tertiary p-3\"\n        data-testid={`${testIdRoot}-auth-starting`}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <LoadingSpinner />\n        <span className=\"text-sm text-[var(--oh-text-tertiary)]\">\n          {t(I18nKey.BACKEND$AUTH_STARTING)}\n        </span>\n      </div>\n    );\n  }\n\n  if (status === \"awaiting_authorization\") {\n    const validVerificationUrl =\n      verificationUrl && isValidVerificationUrl(verificationUrl)\n        ? verificationUrl\n        : null;\n\n    return (\n      <div\n        className=\"flex flex-col gap-4 rounded-lg bg-base-tertiary p-4\"\n        data-testid={`${testIdRoot}-auth-awaiting`}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <div className=\"flex items-center gap-2\">\n          <LoadingSpinner />\n          <span className=\"text-sm font-medium text-white\">\n            {t(I18nKey.BACKEND$AUTH_AWAITING)}\n          </span>\n        </div>\n        <p className=\"text-sm leading-5 text-[var(--oh-text-tertiary)]\">\n          {t(I18nKey.BACKEND$AUTH_BROWSER_OPENED)}\n        </p>\n        {validVerificationUrl ? (\n          <div className=\"flex flex-col gap-1 rounded-md border border-[var(--oh-border)] bg-[var(--oh-surface)] p-3 text-xs text-[var(--oh-muted)]\">\n            <p>{t(I18nKey.BACKEND$AUTH_OPEN_MANUALLY)}</p>\n            <a\n              href={validVerificationUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"max-h-16 overflow-auto break-all text-blue-400 hover:underline\"\n            >\n              {validVerificationUrl}\n            </a>\n          </div>\n        ) : null}\n        <BrandButton\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onCancel}\n          testId={`${testIdRoot}-auth-cancel`}\n          className=\"w-full\"\n        >\n          {t(I18nKey.BACKEND$AUTH_CANCEL)}\n        </BrandButton>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"flex flex-col gap-3 rounded-lg border border-red-700 bg-red-900/20 p-4\"\n      data-testid={`${testIdRoot}-auth-error`}\n      role=\"alert\"\n    >\n      <p className=\"text-sm text-red-400\">{error}</p>\n      <BrandButton\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={onRetry}\n        testId={`${testIdRoot}-auth-retry`}\n        className=\"w-full\"\n      >\n        {t(I18nKey.BACKEND$AUTH_RETRY)}\n      </BrandButton>\n    </div>\n  );\n}\n\nfunction LoadingSpinner() {\n  return (\n    <svg\n      className=\"animate-spin h-4 w-4 text-white\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      />\n    </svg>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"device-flow-auth.cjs","names":[],"sources":["../../../../src/components/features/backends/device-flow-auth.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalBody } from \"#/components/shared/modals/modal-body\";\nimport { useDeviceFlow, type DeviceFlowStatus } from \"#/hooks/use-device-flow\";\nimport type { CloudConnectionSource } from \"#/services/cloud-funnel-analytics\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\ntype DeviceFlowButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"unstyled\";\ntype DeviceFlowStatusDisplay = \"inline\" | \"modal\";\n\ninterface DeviceFlowAuthProps {\n  /** The host URL for the cloud backend */\n  host: string;\n  /** Callback when authentication succeeds with the API key */\n  onSuccess: (apiKey: string) => void;\n  /** Test ID prefix for the component */\n  testIdRoot: string;\n  /** Whether the login button should be disabled (e.g., when no host is entered) */\n  isDisabled?: boolean;\n  /** Override for the idle button label and icon-only accessible name. */\n  idleButtonLabel?: string;\n  /** Optional visible content for the idle button. Defaults to the idle label. */\n  idleButtonContent?: React.ReactNode;\n  /** Optional classes for the root wrapper. */\n  className?: string;\n  /** Optional classes for the idle button. */\n  buttonClassName?: string;\n  /** Visual variant for the idle button. */\n  buttonVariant?: DeviceFlowButtonVariant;\n  /** Whether in-progress auth content should render inline or in a modal. */\n  statusDisplay?: DeviceFlowStatusDisplay;\n  /** Product surface that initiated this authorization attempt. */\n  analyticsSource?: CloudConnectionSource;\n}\n\n/**\n * Device Flow authentication UI component.\n *\n * Shows a \"Login with OpenHands Cloud\" button that initiates OAuth 2.0 Device Flow\n * authentication. Displays status during the auth process and auto-opens\n * the browser for user authorization.\n */\n/**\n * Validate that a URL is safe to open in a popup.\n * Prevents XSS via javascript: URLs or other malicious schemes.\n */\nfunction isValidVerificationUrl(url: string): boolean {\n  try {\n    const parsed = new URL(url);\n    return parsed.protocol === \"https:\";\n  } catch {\n    return false;\n  }\n}\n\nexport function DeviceFlowAuth({\n  host,\n  onSuccess,\n  testIdRoot,\n  isDisabled = false,\n  idleButtonLabel,\n  idleButtonContent,\n  className,\n  buttonClassName,\n  buttonVariant = \"primary\",\n  statusDisplay = \"inline\",\n  analyticsSource,\n}: DeviceFlowAuthProps) {\n  const { t } = useTranslation(\"openhands\");\n  const deviceFlow = useDeviceFlow();\n  const popupRef = React.useRef<Window | null>(null);\n\n  // Close popup on unmount or when auth completes/errors\n  React.useEffect(() => {\n    return () => {\n      popupRef.current?.close();\n    };\n  }, []);\n\n  // Update popup URL when verification URL becomes available\n  React.useEffect(() => {\n    if (\n      deviceFlow.status === \"awaiting_authorization\" &&\n      deviceFlow.verificationUrl &&\n      popupRef.current &&\n      !popupRef.current.closed\n    ) {\n      // Validate URL before assigning to prevent XSS\n      if (!isValidVerificationUrl(deviceFlow.verificationUrl)) {\n        console.error(\"Invalid verification URL protocol\");\n        return;\n      }\n      try {\n        popupRef.current.location.href = deviceFlow.verificationUrl;\n      } catch {\n        // Cross-origin error - popup was navigated away\n        // Open a new one as fallback\n        popupRef.current = window.open(\n          deviceFlow.verificationUrl,\n          \"_blank\",\n          \"noopener,noreferrer\",\n        );\n      }\n    }\n  }, [deviceFlow.status, deviceFlow.verificationUrl]);\n\n  // Call onSuccess when authentication completes\n  React.useEffect(() => {\n    if (deviceFlow.status === \"success\" && deviceFlow.apiKey) {\n      try {\n        onSuccess(deviceFlow.apiKey);\n      } finally {\n        deviceFlow.reset();\n        popupRef.current?.close();\n      }\n    }\n  }, [deviceFlow.status, deviceFlow.apiKey, deviceFlow.reset, onSuccess]);\n\n  const handleStartAuth = () => {\n    // Normalize and validate the host URL\n    const normalizedHost = host.trim().replace(/\\/+$/, \"\");\n    const fullHost = /^https?:\\/\\//i.test(normalizedHost)\n      ? normalizedHost\n      : `https://${normalizedHost}`;\n\n    // Validate URL before proceeding\n    try {\n      const url = new URL(fullHost);\n      // Check for URL manipulation attacks\n      if (url.username || url.password) {\n        throw new Error(\"Invalid URL format\");\n      }\n    } catch {\n      return; // Invalid URL, don't proceed\n    }\n\n    // Open popup immediately on user click to avoid popup blocker\n    // Start with about:blank and update URL once we have verification URL\n    // Note: We intentionally don't use \"noopener\" here because we need to\n    // maintain a reference to update the popup's location when the\n    // verification URL becomes available\n    popupRef.current = window.open(\"about:blank\", \"_blank\");\n\n    if (!popupRef.current) {\n      // Popup was blocked - flow will still work, user can click manual link\n      console.warn(\"Popup blocked - user will need to use manual link\");\n    }\n\n    deviceFlow.start(fullHost, analyticsSource);\n  };\n\n  const handleCancel = () => {\n    deviceFlow.cancel();\n    popupRef.current?.close();\n  };\n\n  const statusContent = (\n    <DeviceFlowStatusContent\n      status={deviceFlow.status}\n      error={deviceFlow.error}\n      verificationUrl={deviceFlow.verificationUrl}\n      testIdRoot={testIdRoot}\n      onCancel={handleCancel}\n      onRetry={handleStartAuth}\n    />\n  );\n  const showStatusModal =\n    statusDisplay === \"modal\" && deviceFlow.status !== \"idle\";\n  const idleLabel = idleButtonLabel ?? t(I18nKey.BACKEND$LOGIN_WITH_OPENHANDS);\n\n  return (\n    <div\n      data-testid={`${testIdRoot}-device-flow`}\n      className={cn(\"flex flex-col gap-3\", className)}\n    >\n      {deviceFlow.status === \"idle\" && buttonVariant === \"unstyled\" && (\n        <button\n          type=\"button\"\n          onClick={handleStartAuth}\n          data-testid={`${testIdRoot}-login-button`}\n          className={buttonClassName}\n          disabled={isDisabled}\n          aria-label={idleButtonContent ? idleLabel : undefined}\n        >\n          {idleButtonContent ?? idleLabel}\n        </button>\n      )}\n\n      {deviceFlow.status === \"idle\" && buttonVariant !== \"unstyled\" && (\n        <BrandButton\n          type=\"button\"\n          variant={buttonVariant}\n          onClick={handleStartAuth}\n          testId={`${testIdRoot}-login-button`}\n          className={cn(\"w-full\", buttonClassName)}\n          isDisabled={isDisabled}\n          ariaLabel={idleButtonContent ? idleLabel : undefined}\n        >\n          {idleButtonContent ?? idleLabel}\n        </BrandButton>\n      )}\n\n      {statusDisplay === \"inline\" ? statusContent : null}\n\n      {showStatusModal ? (\n        <ModalBackdrop\n          onClose={handleCancel}\n          aria-label={t(I18nKey.BACKEND$LOGIN_WITH_OPENHANDS)}\n          closeOnBackdropClick={false}\n        >\n          <ModalBody\n            testID={`${testIdRoot}-auth-modal`}\n            width=\"sm\"\n            className=\"items-stretch border border-[var(--oh-border)]\"\n          >\n            {statusContent}\n          </ModalBody>\n        </ModalBackdrop>\n      ) : null}\n    </div>\n  );\n}\n\ninterface DeviceFlowStatusContentProps {\n  status: DeviceFlowStatus;\n  error: string | null;\n  verificationUrl: string | null;\n  testIdRoot: string;\n  onCancel: () => void;\n  onRetry: () => void;\n}\n\nfunction DeviceFlowStatusContent({\n  status,\n  error,\n  verificationUrl,\n  testIdRoot,\n  onCancel,\n  onRetry,\n}: DeviceFlowStatusContentProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (status === \"idle\" || status === \"success\") return null;\n\n  if (status === \"starting\") {\n    return (\n      <div\n        className=\"flex items-center gap-2 rounded-lg bg-base-tertiary p-3\"\n        data-testid={`${testIdRoot}-auth-starting`}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <LoadingSpinner />\n        <span className=\"text-sm text-[var(--oh-text-tertiary)]\">\n          {t(I18nKey.BACKEND$AUTH_STARTING)}\n        </span>\n      </div>\n    );\n  }\n\n  if (status === \"awaiting_authorization\") {\n    const validVerificationUrl =\n      verificationUrl && isValidVerificationUrl(verificationUrl)\n        ? verificationUrl\n        : null;\n\n    return (\n      <div\n        className=\"flex flex-col gap-4 rounded-lg bg-base-tertiary p-4\"\n        data-testid={`${testIdRoot}-auth-awaiting`}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <div className=\"flex items-center gap-2\">\n          <LoadingSpinner />\n          <span className=\"text-sm font-medium text-white\">\n            {t(I18nKey.BACKEND$AUTH_AWAITING)}\n          </span>\n        </div>\n        <p className=\"text-sm leading-5 text-[var(--oh-text-tertiary)]\">\n          {t(I18nKey.BACKEND$AUTH_BROWSER_OPENED)}\n        </p>\n        {validVerificationUrl ? (\n          <div className=\"flex flex-col gap-1 rounded-md border border-[var(--oh-border)] bg-[var(--oh-surface)] p-3 text-xs text-[var(--oh-muted)]\">\n            <p>{t(I18nKey.BACKEND$AUTH_OPEN_MANUALLY)}</p>\n            <a\n              href={validVerificationUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"max-h-16 overflow-auto break-all text-blue-400 hover:underline\"\n            >\n              {validVerificationUrl}\n            </a>\n          </div>\n        ) : null}\n        <BrandButton\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onCancel}\n          testId={`${testIdRoot}-auth-cancel`}\n          className=\"w-full\"\n        >\n          {t(I18nKey.BACKEND$AUTH_CANCEL)}\n        </BrandButton>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"flex flex-col gap-3 rounded-lg border border-red-700 bg-red-900/20 p-4\"\n      data-testid={`${testIdRoot}-auth-error`}\n      role=\"alert\"\n    >\n      <p className=\"text-sm text-red-400\">{error}</p>\n      <BrandButton\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={onRetry}\n        testId={`${testIdRoot}-auth-retry`}\n        className=\"w-full\"\n      >\n        {t(I18nKey.BACKEND$AUTH_RETRY)}\n      </BrandButton>\n    </div>\n  );\n}\n\nfunction LoadingSpinner() {\n  return (\n    <svg\n      className=\"animate-spin h-4 w-4 text-white\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      />\n    </svg>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/backends/device-flow-auth.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { CloudConnectionSource } from "#/services/cloud-funnel-analytics";
 type DeviceFlowButtonVariant = "primary" | "secondary" | "tertiary" | "unstyled";
 type DeviceFlowStatusDisplay = "inline" | "modal";
 interface DeviceFlowAuthProps {
@@ -22,6 +23,8 @@ interface DeviceFlowAuthProps {
     buttonVariant?: DeviceFlowButtonVariant;
     /** Whether in-progress auth content should render inline or in a modal. */
     statusDisplay?: DeviceFlowStatusDisplay;
+    /** Product surface that initiated this authorization attempt. */
+    analyticsSource?: CloudConnectionSource;
 }
-export declare function DeviceFlowAuth({ host, onSuccess, testIdRoot, isDisabled, idleButtonLabel, idleButtonContent, className, buttonClassName, buttonVariant, statusDisplay, }: DeviceFlowAuthProps): import("react/jsx-runtime").JSX.Element;
+export declare function DeviceFlowAuth({ host, onSuccess, testIdRoot, isDisabled, idleButtonLabel, idleButtonContent, className, buttonClassName, buttonVariant, statusDisplay, analyticsSource, }: DeviceFlowAuthProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/features/backends/device-flow-auth.js

@@ -15,35 +15,35 @@ function u(e) {
 		return !1;
 	}
 }
-function d({ host: d, onSuccess: p, testIdRoot: m, isDisabled: h = !1, idleButtonLabel: g, idleButtonContent: _, className: v, buttonClassName: y, buttonVariant: b = "primary", statusDisplay: x = "inline" }) {
-	let { t: S } = e("openhands"), C = o(), w = s.useRef(null);
+function d({ host: d, onSuccess: p, testIdRoot: m, isDisabled: h = !1, idleButtonLabel: g, idleButtonContent: _, className: v, buttonClassName: y, buttonVariant: b = "primary", statusDisplay: x = "inline", analyticsSource: S }) {
+	let { t: C } = e("openhands"), w = o(), T = s.useRef(null);
 	s.useEffect(() => () => {
-		w.current?.close();
+		T.current?.close();
 	}, []), s.useEffect(() => {
-		if (C.status === "awaiting_authorization" && C.verificationUrl && w.current && !w.current.closed) {
-			if (!u(C.verificationUrl)) {
+		if (w.status === "awaiting_authorization" && w.verificationUrl && T.current && !T.current.closed) {
+			if (!u(w.verificationUrl)) {
 				console.error("Invalid verification URL protocol");
 				return;
 			}
 			try {
-				w.current.location.href = C.verificationUrl;
+				T.current.location.href = w.verificationUrl;
 			} catch {
-				w.current = window.open(C.verificationUrl, "_blank", "noopener,noreferrer");
+				T.current = window.open(w.verificationUrl, "_blank", "noopener,noreferrer");
 			}
 		}
-	}, [C.status, C.verificationUrl]), s.useEffect(() => {
-		if (C.status === "success" && C.apiKey) try {
-			p(C.apiKey);
+	}, [w.status, w.verificationUrl]), s.useEffect(() => {
+		if (w.status === "success" && w.apiKey) try {
+			p(w.apiKey);
 		} finally {
-			C.reset(), w.current?.close();
+			w.reset(), T.current?.close();
 		}
 	}, [
-		C.status,
-		C.apiKey,
-		C.reset,
+		w.status,
+		w.apiKey,
+		w.reset,
 		p
 	]);
-	let T = () => {
+	let E = () => {
 		let e = d.trim().replace(/\/+$/, ""), t = /^https?:\/\//i.test(e) ? e : `https://${e}`;
 		try {
 			let e = new URL(t);
@@ -51,50 +51,50 @@ function d({ host: d, onSuccess: p, testIdRoot: m, isDisabled: h = !1, idleButto
 		} catch {
 			return;
 		}
-		w.current = window.open("about:blank", "_blank"), w.current || console.warn("Popup blocked - user will need to use manual link"), C.start(t);
-	}, E = () => {
-		C.cancel(), w.current?.close();
-	}, D = /* @__PURE__ */ c(f, {
-		status: C.status,
-		error: C.error,
-		verificationUrl: C.verificationUrl,
+		T.current = window.open("about:blank", "_blank"), T.current || console.warn("Popup blocked - user will need to use manual link"), w.start(t, S);
+	}, D = () => {
+		w.cancel(), T.current?.close();
+	}, O = /* @__PURE__ */ c(f, {
+		status: w.status,
+		error: w.error,
+		verificationUrl: w.verificationUrl,
 		testIdRoot: m,
-		onCancel: E,
-		onRetry: T
-	}), O = x === "modal" && C.status !== "idle", k = g ?? S(t.BACKEND$LOGIN_WITH_OPENHANDS);
+		onCancel: D,
+		onRetry: E
+	}), k = x === "modal" && w.status !== "idle", A = g ?? C(t.BACKEND$LOGIN_WITH_OPENHANDS);
 	return /* @__PURE__ */ l("div", {
 		"data-testid": `${m}-device-flow`,
 		className: n("flex flex-col gap-3", v),
 		children: [
-			C.status === "idle" && b === "unstyled" && /* @__PURE__ */ c("button", {
+			w.status === "idle" && b === "unstyled" && /* @__PURE__ */ c("button", {
 				type: "button",
-				onClick: T,
+				onClick: E,
 				"data-testid": `${m}-login-button`,
 				className: y,
 				disabled: h,
-				"aria-label": _ ? k : void 0,
-				children: _ ?? k
+				"aria-label": _ ? A : void 0,
+				children: _ ?? A
 			}),
-			C.status === "idle" && b !== "unstyled" && /* @__PURE__ */ c(a, {
+			w.status === "idle" && b !== "unstyled" && /* @__PURE__ */ c(a, {
 				type: "button",
 				variant: b,
-				onClick: T,
+				onClick: E,
 				testId: `${m}-login-button`,
 				className: n("w-full", y),
 				isDisabled: h,
-				ariaLabel: _ ? k : void 0,
-				children: _ ?? k
+				ariaLabel: _ ? A : void 0,
+				children: _ ?? A
 			}),
-			x === "inline" ? D : null,
-			O ? /* @__PURE__ */ c(r, {
-				onClose: E,
-				"aria-label": S(t.BACKEND$LOGIN_WITH_OPENHANDS),
+			x === "inline" ? O : null,
+			k ? /* @__PURE__ */ c(r, {
+				onClose: D,
+				"aria-label": C(t.BACKEND$LOGIN_WITH_OPENHANDS),
 				closeOnBackdropClick: !1,
 				children: /* @__PURE__ */ c(i, {
 					testID: `${m}-auth-modal`,
 					width: "sm",
 					className: "items-stretch border border-[var(--oh-border)]",
-					children: D
+					children: O
 				})
 			}) : null
 		]