@openhands/agent-canvas 1.16.0 → 1.17.0

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

@@ -1 +1 @@
-{"version":3,"file":"backend-selector.cjs","names":[],"sources":["../../../../src/components/features/backends/backend-selector.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useMatch, useNavigate } from \"react-router\";\nimport { Plus, Settings } from \"lucide-react\";\nimport { Dropdown } from \"#/ui/dropdown/dropdown\";\nimport { DropdownOption } from \"#/ui/dropdown/types\";\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport {\n  useBackendsHealth,\n  type BackendHealth,\n} from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend } from \"#/api/backend-registry/types\";\n// Import the trigger helpers from the lightweight store, not the overlay\n// component, so the eagerly-mounted sidebar/backend-selector graph does not\n// pull in the overlay's render code (the overlay is lazy-loaded from\n// `routes/root-layout.tsx`).\nimport {\n  ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS,\n  triggerEnvironmentSwitch,\n} from \"#/components/features/backends/environment-switch-store\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { AddBackendModal } from \"./add-backend-modal\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { ManageBackendsModal } from \"./manage-backends-modal\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlTransitionClassName } from \"#/utils/form-control-classes\";\nimport {\n  dropdownFooterActionClassName,\n  dropdownMenuListClassName,\n  dropdownMenuRowIconWrapperClassName,\n} from \"#/utils/dropdown-classes\";\n\nconst VALUE_SEPARATOR = \"::\";\n\nfunction makeOptionValue(backendId: string, orgId: string | null): string {\n  return orgId ? `${backendId}${VALUE_SEPARATOR}${orgId}` : backendId;\n}\n\nfunction parseOptionValue(value: string): {\n  backendId: string;\n  orgId: string | null;\n} {\n  const [backendId, orgId] = value.split(VALUE_SEPARATOR);\n  return { backendId, orgId: orgId ?? null };\n}\n\nfunction buildStatusPrefix(health: BackendHealth | undefined) {\n  return <BackendStatusDot isConnected={health?.isConnected ?? null} />;\n}\n\nfunction buildNoBackendPrefix() {\n  return <BackendStatusDot isConnected=\"unavailable\" />;\n}\n\nfunction buildOptions(\n  registered: Backend[],\n  personalWorkspaceLabel: string,\n  cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n  currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n  healthByBackendId: Record<string, BackendHealth>,\n): DropdownOption[] {\n  const options: DropdownOption[] = [];\n\n  const locals = registered.filter((b) => b.kind === \"local\");\n  const clouds = registered.filter((b) => b.kind === \"cloud\");\n\n  for (const b of locals) {\n    options.push({\n      value: makeOptionValue(b.id, null),\n      label: b.name,\n      prefix: buildStatusPrefix(healthByBackendId[b.id]),\n    });\n  }\n\n  for (const b of clouds) {\n    const entry = cloudOrgs[b.id];\n    const prefix = buildStatusPrefix(healthByBackendId[b.id]);\n    if (!entry || entry.orgs.length === 0) {\n      options.push({\n        value: makeOptionValue(b.id, null),\n        label: b.name,\n        prefix,\n      });\n    } else {\n      // Personal-workspace rule (per the cloud contract): the org whose\n      // id matches the calling user's id is the user's personal\n      // workspace. We resolve `user_id` once per backend (via /me on any\n      // one org) and apply it across all orgs of that backend.\n      const userIdForBackend = currentUserIds[b.id]?.userId ?? null;\n\n      for (const org of entry.orgs) {\n        const isPersonal = !!userIdForBackend && userIdForBackend === org.id;\n        const orgLabel = isPersonal ? personalWorkspaceLabel : org.name;\n        options.push({\n          value: makeOptionValue(b.id, org.id),\n          label: `${b.name} – ${orgLabel}`,\n          // All org rows for the same cloud backend share that backend's\n          // single connectivity verdict — there is no per-org probe.\n          prefix,\n        });\n      }\n    }\n  }\n\n  return options;\n}\n\ninterface BackendSelectorProps {\n  /** Render the menu above the trigger (e.g. when pinned to bottom of sidebar). */\n  openUpward?: boolean;\n  /** Hide the selector input trigger and only render the dropdown menu. */\n  hideTrigger?: boolean;\n  /** Whether the dropdown menu should start open on mount. */\n  defaultOpen?: boolean;\n  /** Callback fired after selecting a backend/org option. */\n  onSelectOption?: () => void;\n  /**\n   * Override the internal Add Backend modal handling. When provided,\n   * clicking \"Add Backend\" calls this instead of opening BackendSelector's\n   * own modal. Useful when the selector is mounted inside an ephemeral\n   * container (e.g. the collapsed-sidebar popover) and the modal must\n   * survive the parent unmounting.\n   */\n  onOpenAddBackend?: () => void;\n  /** Same as onOpenAddBackend but for the Manage Backends modal. */\n  onOpenManageBackends?: () => void;\n  /**\n   * Whether the surrounding sidebar rail is in its collapsed variant. Passed\n   * down from `SidebarRailBody` so the mobile drawer (which always renders\n   * the expanded rail) can override the persisted desktop value.\n   */\n  sidebarCollapsed?: boolean;\n}\n\nexport function BackendSelector({\n  openUpward = false,\n  hideTrigger = false,\n  defaultOpen = false,\n  onSelectOption,\n  onOpenAddBackend,\n  onOpenManageBackends,\n  sidebarCollapsed = false,\n}: BackendSelectorProps = {}) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, active, setActive } = useActiveBackendContext();\n  const cloudOrgs = useAllCloudOrganizations();\n  const currentUserIds = useCloudCurrentUserId();\n  // Probe each registered backend every 10s.\n  const healthByBackendId = useBackendsHealth(backends);\n  const navigate = useNavigate();\n  const settingsMatch = useMatch(\"/settings\");\n  const settingsSubrouteMatch = useMatch(\"/settings/*\");\n  const conversationMatch = useMatch(\"/conversations/:conversationId\");\n  const automationDetailMatch = useMatch(\"/automations/:automationId\");\n  const [addBackendModalOpen, setAddBackendModalOpen] = React.useState(false);\n  const [manageBackendsModalOpen, setManageBackendsModalOpen] =\n    React.useState(false);\n\n  const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n\n  const options = React.useMemo(\n    () =>\n      buildOptions(\n        backends,\n        personalWorkspaceLabel,\n        cloudOrgs,\n        currentUserIds,\n        healthByBackendId,\n      ),\n    [\n      backends,\n      personalWorkspaceLabel,\n      cloudOrgs,\n      currentUserIds,\n      healthByBackendId,\n    ],\n  );\n\n  const noBackendSelected = isNoBackend(active.backend);\n  const noBackendLabel = t(I18nKey.BACKEND$NO_BACKEND_AVAILABLE);\n  const activeValue = makeOptionValue(active.backend.id, active.orgId);\n  const activeOption = noBackendSelected\n    ? undefined\n    : options.find((o) => o.value === activeValue);\n  const isSettingsActive = Boolean(settingsMatch || settingsSubrouteMatch);\n  const settingsLabel = t(I18nKey.SIDEBAR$SETTINGS);\n  const isRightPanelShown = useConversationStore(\n    (state) => state.isRightPanelShown,\n  );\n  // When the sidebar rail is expanded, `placement=\"left\"` hugs the main\n  // canvas and reads awkwardly; prefer above the control. When the rail is\n  // collapsed, keep left except on active conversation + open right drawer.\n  const settingsTooltipPlacement =\n    !sidebarCollapsed || (conversationMatch && isRightPanelShown)\n      ? \"top\"\n      : \"left\";\n\n  const someCloudLoading = Object.values(cloudOrgs).some((c) => c.isLoading);\n\n  // Self-heal a malformed `(cloudBackendId, null)` selection.\n  //\n  // Once a cloud backend's orgs resolve, the dropdown only renders\n  // per-org rows for it — the `(backendId, null)` row disappears, so\n  // selecting that shape would drift from what the dropdown can render\n  // (UI says \"Local\", APIs hit cloud). When we detect the drift, snap\n  // the selection onto Cloud's current org first, then fall back to the\n  // personal workspace (or, lacking a /me result, the first org). The\n  // selection is recorded locally only; the cloud request scope follows\n  // from the X-Org-Id header sent by `callCloudProxy`, so the cloud UI's\n  // org choice is never mutated as a side effect.\n  React.useEffect(() => {\n    if (noBackendSelected || active.backend.kind !== \"cloud\" || active.orgId)\n      return;\n    const { backend } = active;\n    const entry = cloudOrgs[backend.id];\n    if (!entry || entry.orgs.length === 0) return;\n\n    const currentOrg = entry.currentOrgId\n      ? entry.orgs.find((o) => o.id === entry.currentOrgId)\n      : undefined;\n    const userId = currentUserIds[backend.id]?.userId ?? null;\n    const personal = userId\n      ? entry.orgs.find((o) => o.id === userId)\n      : undefined;\n    const target = currentOrg ?? personal ?? entry.orgs[0];\n    if (target) {\n      setActive(backend.id, target.id);\n    }\n  }, [active, cloudOrgs, currentUserIds, setActive, noBackendSelected]);\n\n  const openAddBackendModal = React.useCallback(() => {\n    if (onOpenAddBackend) {\n      onOpenAddBackend();\n      onSelectOption?.();\n      return;\n    }\n    setAddBackendModalOpen(true);\n  }, [onOpenAddBackend, onSelectOption]);\n\n  const openManageBackendsModal = React.useCallback(() => {\n    if (onOpenManageBackends) {\n      onOpenManageBackends();\n      onSelectOption?.();\n      return;\n    }\n    setManageBackendsModalOpen(true);\n  }, [onOpenManageBackends, onSelectOption]);\n\n  const isLockedToCloud = getLockedCloudHost() !== null;\n\n  const preventDropdownMenuClose = React.useCallback(\n    (event: React.SyntheticEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  const handleAddBackendClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      preventDropdownMenuClose(event);\n      openAddBackendModal();\n    },\n    [openAddBackendModal, preventDropdownMenuClose],\n  );\n\n  const handleAddBackendTouchEnd = React.useCallback(\n    (event: React.TouchEvent<HTMLButtonElement>) => {\n      preventDropdownMenuClose(event);\n      openAddBackendModal();\n    },\n    [openAddBackendModal, preventDropdownMenuClose],\n  );\n\n  const handleManageBackendsClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      preventDropdownMenuClose(event);\n      openManageBackendsModal();\n    },\n    [openManageBackendsModal, preventDropdownMenuClose],\n  );\n\n  const handleManageBackendsTouchEnd = React.useCallback(\n    (event: React.TouchEvent<HTMLButtonElement>) => {\n      preventDropdownMenuClose(event);\n      openManageBackendsModal();\n    },\n    [openManageBackendsModal, preventDropdownMenuClose],\n  );\n\n  const addBackendFooter = (\n    <div className={dropdownMenuListClassName}>\n      {isLockedToCloud ? null : (\n        <button\n          type=\"button\"\n          data-testid=\"add-backend-menu-item\"\n          onMouseDown={preventDropdownMenuClose}\n          onTouchStart={preventDropdownMenuClose}\n          onTouchEnd={handleAddBackendTouchEnd}\n          onClick={handleAddBackendClick}\n          className={cn(\n            dropdownFooterActionClassName,\n            \"cursor-pointer rounded-md\",\n          )}\n        >\n          <span className={dropdownMenuRowIconWrapperClassName} aria-hidden>\n            <Plus width={16} height={16} />\n          </span>\n          {t(I18nKey.BACKEND$ADD)}\n        </button>\n      )}\n      <button\n        type=\"button\"\n        data-testid=\"manage-backends-menu-item\"\n        onMouseDown={preventDropdownMenuClose}\n        onTouchStart={preventDropdownMenuClose}\n        onTouchEnd={handleManageBackendsTouchEnd}\n        onClick={handleManageBackendsClick}\n        className={cn(\n          dropdownFooterActionClassName,\n          \"cursor-pointer rounded-md\",\n        )}\n      >\n        <span className={dropdownMenuRowIconWrapperClassName} aria-hidden>\n          <Settings width={16} height={16} />\n        </span>\n        {t(\n          isLockedToCloud\n            ? I18nKey.BACKEND$RECONNECT_CLOUD\n            : I18nKey.BACKEND$MANAGE,\n        )}\n      </button>\n    </div>\n  );\n\n  const handleSelectBackend = React.useCallback(\n    async (value: string) => {\n      if (value === activeValue) return;\n\n      const { backendId, orgId } = parseOptionValue(value);\n      const target = backends.find((b) => b.id === backendId);\n      if (!target) return;\n\n      triggerEnvironmentSwitch(\n        options.find((option) => option.value === value)?.label ?? target.name,\n      );\n      await new Promise<void>((resolve) => {\n        setTimeout(resolve, ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS);\n      });\n\n      // @spec BM-002 — Switching backends keeps the user on the same page\n      if (conversationMatch) navigate(\"/conversations\");\n      else if (automationDetailMatch) navigate(\"/automations\");\n\n      setActive(target.id, orgId);\n      onSelectOption?.();\n    },\n    [\n      activeValue,\n      backends,\n      conversationMatch,\n      automationDetailMatch,\n      navigate,\n      options,\n      setActive,\n      t,\n      onSelectOption,\n    ],\n  );\n\n  return (\n    <>\n      <div className=\"flex items-center gap-2 w-full\">\n        <div className=\"flex-1 min-w-0\">\n          <Dropdown\n            testId=\"backend-selector\"\n            key={`${activeValue}-${activeOption?.label ?? \"\"}`}\n            defaultValue={\n              activeOption ?? {\n                value: activeValue,\n                label: noBackendSelected ? noBackendLabel : active.backend.name,\n                prefix: noBackendSelected\n                  ? buildNoBackendPrefix()\n                  : buildStatusPrefix(healthByBackendId[active.backend.id]),\n              }\n            }\n            footer={addBackendFooter}\n            openUpward={openUpward}\n            hideTrigger={hideTrigger}\n            defaultOpen={defaultOpen}\n            openOnHover={!hideTrigger}\n            onChange={(item) => {\n              if (!item) return;\n              void handleSelectBackend(item.value);\n            }}\n            placeholder={\n              noBackendSelected ? noBackendLabel : active.backend.name\n            }\n            loading={someCloudLoading}\n            options={options}\n            className=\"h-10 px-2 py-0 bg-transparent border-transparent hover:bg-[var(--oh-surface-raised)] focus-within:bg-[var(--oh-surface-raised)] focus-within:border-transparent focus-within:ring-0\"\n          />\n        </div>\n        {!hideTrigger ? (\n          <StyledTooltip\n            content={settingsLabel}\n            placement={settingsTooltipPlacement}\n            offset={10}\n          >\n            <NavigationLink\n              to=\"/settings\"\n              data-testid=\"backend-selector-settings-link\"\n              data-active={isSettingsActive}\n              aria-label={settingsLabel}\n              className={\n                isSettingsActive\n                  ? cn(\n                      \"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer\",\n                      formControlTransitionClassName,\n                    )\n                  : cn(\n                      \"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer\",\n                      formControlTransitionClassName,\n                    )\n              }\n            >\n              <Settings width={16} height={16} />\n            </NavigationLink>\n          </StyledTooltip>\n        ) : null}\n      </div>\n      {addBackendModalOpen ? (\n        <AddBackendModal onClose={() => setAddBackendModalOpen(false)} />\n      ) : null}\n      {manageBackendsModalOpen ? (\n        <ManageBackendsModal\n          onClose={() => setManageBackendsModalOpen(false)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"backend-selector.cjs","names":[],"sources":["../../../../src/components/features/backends/backend-selector.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useMatch, useNavigate } from \"react-router\";\nimport { Plus, Settings } from \"lucide-react\";\nimport { Dropdown } from \"#/ui/dropdown/dropdown\";\nimport { DropdownOption } from \"#/ui/dropdown/types\";\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport {\n  useBackendsHealth,\n  type BackendHealth,\n} from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend } from \"#/api/backend-registry/types\";\n// Import the trigger helpers from the lightweight store, not the overlay\n// component, so the eagerly-mounted sidebar/backend-selector graph does not\n// pull in the overlay's render code (the overlay is lazy-loaded from\n// `routes/root-layout.tsx`).\nimport {\n  ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS,\n  triggerEnvironmentSwitch,\n} from \"#/components/features/backends/environment-switch-store\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { AddBackendModal } from \"./add-backend-modal\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { ManageBackendsModal } from \"./manage-backends-modal\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlTransitionClassName } from \"#/utils/form-control-classes\";\nimport {\n  dropdownFooterActionClassName,\n  dropdownMenuListClassName,\n  dropdownMenuRowIconWrapperClassName,\n} from \"#/utils/dropdown-classes\";\n\nconst VALUE_SEPARATOR = \"::\";\n\nfunction makeOptionValue(backendId: string, orgId: string | null): string {\n  return orgId ? `${backendId}${VALUE_SEPARATOR}${orgId}` : backendId;\n}\n\nfunction parseOptionValue(value: string): {\n  backendId: string;\n  orgId: string | null;\n} {\n  const [backendId, orgId] = value.split(VALUE_SEPARATOR);\n  return { backendId, orgId: orgId ?? null };\n}\n\nfunction buildStatusPrefix(health: BackendHealth | undefined) {\n  return <BackendStatusDot isConnected={health?.isConnected ?? null} />;\n}\n\nfunction buildNoBackendPrefix() {\n  return <BackendStatusDot isConnected=\"unavailable\" />;\n}\n\nfunction buildOptions(\n  registered: Backend[],\n  personalWorkspaceLabel: string,\n  cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n  currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n  healthByBackendId: Record<string, BackendHealth>,\n): DropdownOption[] {\n  const options: DropdownOption[] = [];\n\n  const locals = registered.filter((b) => b.kind === \"local\");\n  const clouds = registered.filter((b) => b.kind === \"cloud\");\n\n  for (const b of locals) {\n    options.push({\n      value: makeOptionValue(b.id, null),\n      label: b.name,\n      prefix: buildStatusPrefix(healthByBackendId[b.id]),\n    });\n  }\n\n  for (const b of clouds) {\n    const entry = cloudOrgs[b.id];\n    const prefix = buildStatusPrefix(healthByBackendId[b.id]);\n    if (!entry || entry.orgs.length === 0) {\n      options.push({\n        value: makeOptionValue(b.id, null),\n        label: b.name,\n        prefix,\n      });\n    } else {\n      // Personal-workspace rule (per the cloud contract): the org whose\n      // id matches the calling user's id is the user's personal\n      // workspace. We resolve `user_id` once per backend (via /me on any\n      // one org) and apply it across all orgs of that backend.\n      const userIdForBackend = currentUserIds[b.id]?.userId ?? null;\n\n      for (const org of entry.orgs) {\n        const isPersonal = !!userIdForBackend && userIdForBackend === org.id;\n        const orgLabel = isPersonal ? personalWorkspaceLabel : org.name;\n        options.push({\n          value: makeOptionValue(b.id, org.id),\n          label: `${b.name} – ${orgLabel}`,\n          // All org rows for the same cloud backend share that backend's\n          // single connectivity verdict — there is no per-org probe.\n          prefix,\n        });\n      }\n    }\n  }\n\n  return options;\n}\n\ninterface BackendSelectorProps {\n  /** Render the menu above the trigger (e.g. when pinned to bottom of sidebar). */\n  openUpward?: boolean;\n  /** Hide the selector input trigger and only render the dropdown menu. */\n  hideTrigger?: boolean;\n  /** Whether the dropdown menu should start open on mount. */\n  defaultOpen?: boolean;\n  /** Callback fired after selecting a backend/org option. */\n  onSelectOption?: () => void;\n  /**\n   * Override the internal Add Backend modal handling. When provided,\n   * clicking \"Add Backend\" calls this instead of opening BackendSelector's\n   * own modal. Useful when the selector is mounted inside an ephemeral\n   * container (e.g. the collapsed-sidebar popover) and the modal must\n   * survive the parent unmounting.\n   */\n  onOpenAddBackend?: () => void;\n  /** Same as onOpenAddBackend but for the Manage Backends modal. */\n  onOpenManageBackends?: () => void;\n  /**\n   * Whether the surrounding sidebar rail is in its collapsed variant. Passed\n   * down from `SidebarRailBody` so the mobile drawer (which always renders\n   * the expanded rail) can override the persisted desktop value.\n   */\n  sidebarCollapsed?: boolean;\n}\n\nexport function BackendSelector({\n  openUpward = false,\n  hideTrigger = false,\n  defaultOpen = false,\n  onSelectOption,\n  onOpenAddBackend,\n  onOpenManageBackends,\n  sidebarCollapsed = false,\n}: BackendSelectorProps = {}) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, active, setActive } = useActiveBackendContext();\n  const cloudOrgs = useAllCloudOrganizations();\n  const currentUserIds = useCloudCurrentUserId();\n  // Probe each registered backend every 10s.\n  const healthByBackendId = useBackendsHealth(backends);\n  const navigate = useNavigate();\n  const settingsMatch = useMatch(\"/settings\");\n  const settingsSubrouteMatch = useMatch(\"/settings/*\");\n  const conversationMatch = useMatch(\"/conversations/:conversationId\");\n  const automationDetailMatch = useMatch(\"/automations/:automationId\");\n  const [addBackendModalOpen, setAddBackendModalOpen] = React.useState(false);\n  const [manageBackendsModalOpen, setManageBackendsModalOpen] =\n    React.useState(false);\n\n  const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n\n  const options = React.useMemo(\n    () =>\n      buildOptions(\n        backends,\n        personalWorkspaceLabel,\n        cloudOrgs,\n        currentUserIds,\n        healthByBackendId,\n      ),\n    [\n      backends,\n      personalWorkspaceLabel,\n      cloudOrgs,\n      currentUserIds,\n      healthByBackendId,\n    ],\n  );\n\n  const noBackendSelected = isNoBackend(active.backend);\n  const noBackendLabel = t(I18nKey.BACKEND$NO_BACKEND_AVAILABLE);\n  const activeValue = makeOptionValue(active.backend.id, active.orgId);\n  const activeOption = noBackendSelected\n    ? undefined\n    : options.find((o) => o.value === activeValue);\n  const isSettingsActive = Boolean(settingsMatch || settingsSubrouteMatch);\n  const settingsLabel = t(I18nKey.SIDEBAR$SETTINGS);\n  const isRightPanelShown = useConversationStore(\n    (state) => state.isRightPanelShown,\n  );\n  // When the sidebar rail is expanded, `placement=\"left\"` hugs the main\n  // canvas and reads awkwardly; prefer above the control. When the rail is\n  // collapsed, keep left except on active conversation + open right drawer.\n  const settingsTooltipPlacement =\n    !sidebarCollapsed || (conversationMatch && isRightPanelShown)\n      ? \"top\"\n      : \"left\";\n\n  const someCloudLoading = Object.values(cloudOrgs).some((c) => c.isLoading);\n\n  // Self-heal a malformed `(cloudBackendId, null)` selection.\n  //\n  // Once a cloud backend's orgs resolve, the dropdown only renders\n  // per-org rows for it — the `(backendId, null)` row disappears, so\n  // selecting that shape would drift from what the dropdown can render\n  // (UI says \"Local\", APIs hit cloud). When we detect the drift, snap\n  // the selection onto Cloud's current org first, then fall back to the\n  // personal workspace (or, lacking a /me result, the first org). The\n  // selection is recorded locally only; the cloud request scope follows\n  // from the X-Org-Id header sent by `callCloudProxy`, so the cloud UI's\n  // org choice is never mutated as a side effect.\n  React.useEffect(() => {\n    if (noBackendSelected || active.backend.kind !== \"cloud\" || active.orgId)\n      return;\n    const { backend } = active;\n    const entry = cloudOrgs[backend.id];\n    if (!entry || entry.orgs.length === 0) return;\n\n    const currentOrg = entry.currentOrgId\n      ? entry.orgs.find((o) => o.id === entry.currentOrgId)\n      : undefined;\n    const userId = currentUserIds[backend.id]?.userId ?? null;\n    const personal = userId\n      ? entry.orgs.find((o) => o.id === userId)\n      : undefined;\n    const target = currentOrg ?? personal ?? entry.orgs[0];\n    if (target) {\n      setActive(backend.id, target.id);\n    }\n  }, [active, cloudOrgs, currentUserIds, setActive, noBackendSelected]);\n\n  const openAddBackendModal = React.useCallback(() => {\n    if (onOpenAddBackend) {\n      onOpenAddBackend();\n      onSelectOption?.();\n      return;\n    }\n    setAddBackendModalOpen(true);\n  }, [onOpenAddBackend, onSelectOption]);\n\n  const openManageBackendsModal = React.useCallback(() => {\n    if (onOpenManageBackends) {\n      onOpenManageBackends();\n      onSelectOption?.();\n      return;\n    }\n    setManageBackendsModalOpen(true);\n  }, [onOpenManageBackends, onSelectOption]);\n\n  const isLockedToCloud = getLockedCloudHost() !== null;\n  // A cookie-auth (OHE-hosted) Canvas has nothing to add, manage, or\n  // reconnect — its single locked backend is owned by the main-app session.\n  const hideBackendFooter =\n    isLockedToCloud && active.backend.authMode === \"cookie\";\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 = hideBackendFooter ? undefined : (\n    <div className={dropdownMenuListClassName}>\n      {isLockedToCloud ? null : (\n        <button\n          type=\"button\"\n          data-testid=\"add-backend-menu-item\"\n          onMouseDown={preventDropdownMenuClose}\n          onTouchStart={preventDropdownMenuClose}\n          onTouchEnd={handleAddBackendTouchEnd}\n          onClick={handleAddBackendClick}\n          className={cn(\n            dropdownFooterActionClassName,\n            \"cursor-pointer rounded-md\",\n          )}\n        >\n          <span className={dropdownMenuRowIconWrapperClassName} aria-hidden>\n            <Plus width={16} height={16} />\n          </span>\n          {t(I18nKey.BACKEND$ADD)}\n        </button>\n      )}\n      <button\n        type=\"button\"\n        data-testid=\"manage-backends-menu-item\"\n        onMouseDown={preventDropdownMenuClose}\n        onTouchStart={preventDropdownMenuClose}\n        onTouchEnd={handleManageBackendsTouchEnd}\n        onClick={handleManageBackendsClick}\n        className={cn(\n          dropdownFooterActionClassName,\n          \"cursor-pointer rounded-md\",\n        )}\n      >\n        <span className={dropdownMenuRowIconWrapperClassName} aria-hidden>\n          <Settings width={16} height={16} />\n        </span>\n        {t(\n          isLockedToCloud\n            ? I18nKey.BACKEND$RECONNECT_CLOUD\n            : I18nKey.BACKEND$MANAGE,\n        )}\n      </button>\n    </div>\n  );\n\n  const handleSelectBackend = React.useCallback(\n    async (value: string) => {\n      if (value === activeValue) return;\n\n      const { backendId, orgId } = parseOptionValue(value);\n      const target = backends.find((b) => b.id === backendId);\n      if (!target) return;\n\n      triggerEnvironmentSwitch(\n        options.find((option) => option.value === value)?.label ?? target.name,\n      );\n      await new Promise<void>((resolve) => {\n        setTimeout(resolve, ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS);\n      });\n\n      // @spec BM-002 — Switching backends keeps the user on the same page\n      if (conversationMatch) navigate(\"/conversations\");\n      else if (automationDetailMatch) navigate(\"/automations\");\n\n      setActive(target.id, orgId);\n      onSelectOption?.();\n    },\n    [\n      activeValue,\n      backends,\n      conversationMatch,\n      automationDetailMatch,\n      navigate,\n      options,\n      setActive,\n      t,\n      onSelectOption,\n    ],\n  );\n\n  return (\n    <>\n      <div className=\"flex items-center gap-2 w-full\">\n        <div className=\"flex-1 min-w-0\">\n          <Dropdown\n            testId=\"backend-selector\"\n            key={`${activeValue}-${activeOption?.label ?? \"\"}`}\n            defaultValue={\n              activeOption ?? {\n                value: activeValue,\n                label: noBackendSelected ? noBackendLabel : active.backend.name,\n                prefix: noBackendSelected\n                  ? buildNoBackendPrefix()\n                  : buildStatusPrefix(healthByBackendId[active.backend.id]),\n              }\n            }\n            footer={addBackendFooter}\n            openUpward={openUpward}\n            hideTrigger={hideTrigger}\n            defaultOpen={defaultOpen}\n            openOnHover={!hideTrigger}\n            onChange={(item) => {\n              if (!item) return;\n              void handleSelectBackend(item.value);\n            }}\n            placeholder={\n              noBackendSelected ? noBackendLabel : active.backend.name\n            }\n            loading={someCloudLoading}\n            options={options}\n            className=\"h-10 px-2 py-0 bg-transparent border-transparent hover:bg-[var(--oh-surface-raised)] focus-within:bg-[var(--oh-surface-raised)] focus-within:border-transparent focus-within:ring-0\"\n          />\n        </div>\n        {!hideTrigger ? (\n          <StyledTooltip\n            content={settingsLabel}\n            placement={settingsTooltipPlacement}\n            offset={10}\n          >\n            {active.backend.kind === \"cloud\" ? (\n              <a\n                href={`${active.backend.host.replace(/\\/+$/, \"\")}/settings`}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                data-testid=\"backend-selector-settings-link\"\n                aria-label={settingsLabel}\n                className={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                <Settings width={16} height={16} />\n              </a>\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            )}\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-selector.js

@@ -7,50 +7,50 @@ import { useConversationStore as a } from "../../../stores/conversation-store.js
 import { getLockedCloudHost as o } from "../../../api/agent-server-config.js";
 import { isNoBackend as s } from "../../../api/backend-registry/active-store.js";
 import { useActiveBackendContext as ee } from "../../../contexts/active-backend-context.js";
-import { formControlTransitionClassName as te } from "../../../utils/form-control-classes.js";
-import { StyledTooltip as ne } from "../../shared/buttons/styled-tooltip.js";
-import { dropdownFooterActionClassName as c, dropdownMenuListClassName as l, dropdownMenuRowIconWrapperClassName as u } from "../../../utils/dropdown-classes.js";
-import { NavigationLink as re } from "../../shared/navigation-link.js";
-import { useAllCloudOrganizations as ie } from "../../../hooks/query/use-cloud-organizations.js";
-import { useCloudCurrentUserId as ae } from "../../../hooks/query/use-cloud-current-user-id.js";
-import { Dropdown as oe } from "../../../ui/dropdown/dropdown.js";
-import { useBackendsHealth as se } from "../../../hooks/query/use-backends-health.js";
-import { triggerEnvironmentSwitch as ce } from "./environment-switch-store.js";
-import { BackendStatusDot as d } from "./backend-status-dot.js";
-import { AddBackendModal as f } from "./add-backend-modal.js";
-import { ManageBackendsModal as le } from "./manage-backends-modal.js";
-import p from "react";
-import { Fragment as ue, jsx as m, jsxs as h } from "react/jsx-runtime";
-import { useMatch as g, useNavigate as de } from "react-router";
+import { StyledTooltip as te } from "../../shared/buttons/styled-tooltip.js";
+import { formControlTransitionClassName as c } from "../../../utils/form-control-classes.js";
+import { dropdownFooterActionClassName as l, dropdownMenuListClassName as ne, dropdownMenuRowIconWrapperClassName as u } from "../../../utils/dropdown-classes.js";
+import { NavigationLink as d } from "../../shared/navigation-link.js";
+import { useAllCloudOrganizations as re } from "../../../hooks/query/use-cloud-organizations.js";
+import { useCloudCurrentUserId as ie } from "../../../hooks/query/use-cloud-current-user-id.js";
+import { Dropdown as ae } from "../../../ui/dropdown/dropdown.js";
+import { useBackendsHealth as oe } 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 se } from "./add-backend-modal.js";
+import { ManageBackendsModal as m } from "./manage-backends-modal.js";
+import h from "react";
+import { Fragment as ce, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { useMatch as v, useNavigate as le } from "react-router";
 //#region src/components/features/backends/backend-selector.tsx
-var _ = "::";
-function v(e, t) {
-	return t ? `${e}${_}${t}` : e;
+var y = "::";
+function b(e, t) {
+	return t ? `${e}${y}${t}` : e;
 }
-function fe(e) {
-	let [t, n] = e.split(_);
+function x(e) {
+	let [t, n] = e.split(y);
 	return {
 		backendId: t,
 		orgId: n ?? null
 	};
 }
-function y(e) {
-	return /* @__PURE__ */ m(d, { isConnected: e?.isConnected ?? null });
+function S(e) {
+	return /* @__PURE__ */ g(p, { isConnected: e?.isConnected ?? null });
 }
-function b() {
-	return /* @__PURE__ */ m(d, { isConnected: "unavailable" });
+function ue() {
+	return /* @__PURE__ */ g(p, { isConnected: "unavailable" });
 }
-function x(e, t, n, r, i) {
+function de(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: v(e.id, null),
+		value: b(e.id, null),
 		label: e.name,
-		prefix: y(i[e.id])
+		prefix: S(i[e.id])
 	});
 	for (let e of s) {
-		let o = n[e.id], s = y(i[e.id]);
+		let o = n[e.id], s = S(i[e.id]);
 		if (!o || o.orgs.length === 0) a.push({
-			value: v(e.id, null),
+			value: b(e.id, null),
 			label: e.name,
 			prefix: s
 		});
@@ -59,7 +59,7 @@ function x(e, t, n, r, i) {
 			for (let r of o.orgs) {
 				let i = n && n === r.id ? t : r.name;
 				a.push({
-					value: v(e.id, r.id),
+					value: b(e.id, r.id),
 					label: `${e.name} – ${i}`,
 					prefix: s
 				});
@@ -68,148 +68,159 @@ function x(e, t, n, r, i) {
 	}
 	return a;
 }
-function S({ openUpward: d = !1, hideTrigger: _ = !1, defaultOpen: S = !1, onSelectOption: C, onOpenAddBackend: w, onOpenManageBackends: T, sidebarCollapsed: pe = !1 } = {}) {
-	let { t: E } = e("openhands"), { backends: D, active: O, setActive: k } = ee(), A = ie(), j = ae(), M = se(D), N = de(), P = g("/settings"), F = g("/settings/*"), I = g("/conversations/:conversationId"), L = g("/automations/:automationId"), [R, z] = p.useState(!1), [me, B] = p.useState(!1), V = E(t.BACKEND$PERSONAL_WORKSPACE), H = p.useMemo(() => x(D, V, A, j, M), [
-		D,
-		V,
-		A,
-		j,
-		M
-	]), U = s(O.backend), W = E(t.BACKEND$NO_BACKEND_AVAILABLE), G = v(O.backend.id, O.orgId), K = U ? void 0 : H.find((e) => e.value === G), q = !!(P || F), J = E(t.SIDEBAR$SETTINGS), he = a((e) => e.isRightPanelShown), ge = !pe || I && he ? "top" : "left", _e = Object.values(A).some((e) => e.isLoading);
-	p.useEffect(() => {
-		if (U || O.backend.kind !== "cloud" || O.orgId) return;
-		let { backend: e } = O, t = A[e.id];
+function C({ openUpward: p = !1, hideTrigger: y = !1, defaultOpen: C = !1, onSelectOption: w, onOpenAddBackend: T, onOpenManageBackends: E, sidebarCollapsed: D = !1 } = {}) {
+	let { t: O } = e("openhands"), { backends: k, active: A, setActive: j } = ee(), M = re(), N = ie(), P = oe(k), F = le(), fe = v("/settings"), I = v("/settings/*"), L = v("/conversations/:conversationId"), R = v("/automations/:automationId"), [z, B] = h.useState(!1), [pe, V] = h.useState(!1), H = O(t.BACKEND$PERSONAL_WORKSPACE), U = h.useMemo(() => de(k, H, M, N, P), [
+		k,
+		H,
+		M,
+		N,
+		P
+	]), W = s(A.backend), G = O(t.BACKEND$NO_BACKEND_AVAILABLE), K = b(A.backend.id, A.orgId), q = W ? void 0 : U.find((e) => e.value === K), J = !!(fe || I), Y = O(t.SIDEBAR$SETTINGS), me = a((e) => e.isRightPanelShown), he = !D || L && me ? "top" : "left", ge = Object.values(M).some((e) => e.isLoading);
+	h.useEffect(() => {
+		if (W || A.backend.kind !== "cloud" || A.orgId) return;
+		let { backend: e } = A, t = M[e.id];
 		if (!t || t.orgs.length === 0) return;
-		let n = t.currentOrgId ? t.orgs.find((e) => e.id === t.currentOrgId) : void 0, r = j[e.id]?.userId ?? null, i = r ? t.orgs.find((e) => e.id === r) : void 0, a = n ?? i ?? t.orgs[0];
-		a && k(e.id, a.id);
+		let n = t.currentOrgId ? t.orgs.find((e) => e.id === t.currentOrgId) : void 0, r = N[e.id]?.userId ?? null, i = r ? t.orgs.find((e) => e.id === r) : void 0, a = n ?? i ?? t.orgs[0];
+		a && j(e.id, a.id);
 	}, [
-		O,
 		A,
+		M,
+		N,
 		j,
-		k,
-		U
+		W
 	]);
-	let Y = p.useCallback(() => {
-		if (w) {
-			w(), C?.();
-			return;
-		}
-		z(!0);
-	}, [w, C]), X = p.useCallback(() => {
+	let X = h.useCallback(() => {
 		if (T) {
-			T(), C?.();
+			T(), w?.();
 			return;
 		}
 		B(!0);
-	}, [T, C]), Z = o() !== null, Q = p.useCallback((e) => {
+	}, [T, w]), Z = h.useCallback(() => {
+		if (E) {
+			E(), w?.();
+			return;
+		}
+		V(!0);
+	}, [E, w]), Q = o() !== null, _e = Q && A.backend.authMode === "cookie", $ = h.useCallback((e) => {
 		e.preventDefault(), e.stopPropagation();
-	}, []), ve = p.useCallback((e) => {
-		Q(e), Y();
-	}, [Y, Q]), ye = p.useCallback((e) => {
-		Q(e), Y();
-	}, [Y, Q]), be = p.useCallback((e) => {
-		Q(e), X();
-	}, [X, Q]), $ = p.useCallback((e) => {
-		Q(e), X();
-	}, [X, Q]), xe = /* @__PURE__ */ h("div", {
-		className: l,
-		children: [Z ? null : /* @__PURE__ */ h("button", {
+	}, []), ve = h.useCallback((e) => {
+		$(e), X();
+	}, [X, $]), ye = h.useCallback((e) => {
+		$(e), X();
+	}, [X, $]), be = h.useCallback((e) => {
+		$(e), Z();
+	}, [Z, $]), xe = h.useCallback((e) => {
+		$(e), Z();
+	}, [Z, $]), Se = _e ? void 0 : /* @__PURE__ */ _("div", {
+		className: ne,
+		children: [Q ? null : /* @__PURE__ */ _("button", {
 			type: "button",
 			"data-testid": "add-backend-menu-item",
-			onMouseDown: Q,
-			onTouchStart: Q,
+			onMouseDown: $,
+			onTouchStart: $,
 			onTouchEnd: ye,
 			onClick: ve,
-			className: i(c, "cursor-pointer rounded-md"),
-			children: [/* @__PURE__ */ m("span", {
+			className: i(l, "cursor-pointer rounded-md"),
+			children: [/* @__PURE__ */ g("span", {
 				className: u,
 				"aria-hidden": !0,
-				children: /* @__PURE__ */ m(n, {
+				children: /* @__PURE__ */ g(n, {
 					width: 16,
 					height: 16
 				})
-			}), E(t.BACKEND$ADD)]
-		}), /* @__PURE__ */ h("button", {
+			}), O(t.BACKEND$ADD)]
+		}), /* @__PURE__ */ _("button", {
 			type: "button",
 			"data-testid": "manage-backends-menu-item",
-			onMouseDown: Q,
-			onTouchStart: Q,
-			onTouchEnd: $,
+			onMouseDown: $,
+			onTouchStart: $,
+			onTouchEnd: xe,
 			onClick: be,
-			className: i(c, "cursor-pointer rounded-md"),
-			children: [/* @__PURE__ */ m("span", {
+			className: i(l, "cursor-pointer rounded-md"),
+			children: [/* @__PURE__ */ g("span", {
 				className: u,
 				"aria-hidden": !0,
-				children: /* @__PURE__ */ m(r, {
+				children: /* @__PURE__ */ g(r, {
 					width: 16,
 					height: 16
 				})
-			}), E(Z ? t.BACKEND$RECONNECT_CLOUD : t.BACKEND$MANAGE)]
+			}), O(Q ? t.BACKEND$RECONNECT_CLOUD : t.BACKEND$MANAGE)]
 		})]
-	}), Se = p.useCallback(async (e) => {
-		if (e === G) return;
-		let { backendId: t, orgId: n } = fe(e), r = D.find((e) => e.id === t);
-		r && (ce(H.find((t) => t.value === e)?.label ?? r.name), await new Promise((e) => {
+	}), Ce = h.useCallback(async (e) => {
+		if (e === K) return;
+		let { backendId: t, orgId: n } = x(e), r = k.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), C?.());
+		}), L ? F("/conversations") : R && F("/automations"), j(r.id, n), w?.());
 	}, [
-		G,
-		D,
-		I,
-		L,
-		N,
-		H,
+		K,
 		k,
-		E,
-		C
+		L,
+		R,
+		F,
+		U,
+		j,
+		O,
+		w
 	]);
-	return /* @__PURE__ */ h(ue, { children: [
-		/* @__PURE__ */ h("div", {
+	return /* @__PURE__ */ _(ce, { children: [
+		/* @__PURE__ */ _("div", {
 			className: "flex items-center gap-2 w-full",
-			children: [/* @__PURE__ */ m("div", {
+			children: [/* @__PURE__ */ g("div", {
 				className: "flex-1 min-w-0",
-				children: /* @__PURE__ */ m(oe, {
+				children: /* @__PURE__ */ g(ae, {
 					testId: "backend-selector",
-					defaultValue: K ?? {
-						value: G,
-						label: U ? W : O.backend.name,
-						prefix: U ? b() : y(M[O.backend.id])
+					defaultValue: q ?? {
+						value: K,
+						label: W ? G : A.backend.name,
+						prefix: W ? ue() : S(P[A.backend.id])
 					},
-					footer: xe,
-					openUpward: d,
-					hideTrigger: _,
-					defaultOpen: S,
-					openOnHover: !_,
+					footer: Se,
+					openUpward: p,
+					hideTrigger: y,
+					defaultOpen: C,
+					openOnHover: !y,
 					onChange: (e) => {
-						e && Se(e.value);
+						e && Ce(e.value);
 					},
-					placeholder: U ? W : O.backend.name,
-					loading: _e,
-					options: H,
+					placeholder: W ? G : A.backend.name,
+					loading: ge,
+					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"
-				}, `${G}-${K?.label ?? ""}`)
-			}), _ ? null : /* @__PURE__ */ m(ne, {
-				content: J,
-				placement: ge,
+				}, `${K}-${q?.label ?? ""}`)
+			}), y ? null : /* @__PURE__ */ g(te, {
+				content: Y,
+				placement: he,
 				offset: 10,
-				children: /* @__PURE__ */ m(re, {
+				children: A.backend.kind === "cloud" ? /* @__PURE__ */ g("a", {
+					href: `${A.backend.host.replace(/\/+$/, "")}/settings`,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					"data-testid": "backend-selector-settings-link",
+					"aria-label": Y,
+					className: i("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__ */ g(r, {
+						width: 16,
+						height: 16
+					})
+				}) : /* @__PURE__ */ g(d, {
 					to: "/settings",
 					"data-testid": "backend-selector-settings-link",
-					"data-active": q,
-					"aria-label": J,
-					className: i(q ? "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer" : "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer", te),
-					children: /* @__PURE__ */ m(r, {
+					"data-active": J,
+					"aria-label": Y,
+					className: i(J ? "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer" : "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer", c),
+					children: /* @__PURE__ */ g(r, {
 						width: 16,
 						height: 16
 					})
 				})
 			})]
 		}),
-		R ? /* @__PURE__ */ m(f, { onClose: () => z(!1) }) : null,
-		me ? /* @__PURE__ */ m(le, { onClose: () => B(!1) }) : null
+		z ? /* @__PURE__ */ g(se, { onClose: () => B(!1) }) : null,
+		pe ? /* @__PURE__ */ g(m, { onClose: () => V(!1) }) : null
 	] });
 }
 //#endregion
-export { S as BackendSelector };
+export { C 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 { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport {\n  useBackendsHealth,\n  type BackendHealth,\n} from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend } from \"#/api/backend-registry/types\";\n// Import the trigger helpers from the lightweight store, not the overlay\n// component, so the eagerly-mounted sidebar/backend-selector graph does not\n// pull in the overlay's render code (the overlay is lazy-loaded from\n// `routes/root-layout.tsx`).\nimport {\n  ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS,\n  triggerEnvironmentSwitch,\n} from \"#/components/features/backends/environment-switch-store\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { AddBackendModal } from \"./add-backend-modal\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { ManageBackendsModal } from \"./manage-backends-modal\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlTransitionClassName } from \"#/utils/form-control-classes\";\nimport {\n  dropdownFooterActionClassName,\n  dropdownMenuListClassName,\n  dropdownMenuRowIconWrapperClassName,\n} from \"#/utils/dropdown-classes\";\n\nconst VALUE_SEPARATOR = \"::\";\n\nfunction makeOptionValue(backendId: string, orgId: string | null): string {\n  return orgId ? `${backendId}${VALUE_SEPARATOR}${orgId}` : backendId;\n}\n\nfunction parseOptionValue(value: string): {\n  backendId: string;\n  orgId: string | null;\n} {\n  const [backendId, orgId] = value.split(VALUE_SEPARATOR);\n  return { backendId, orgId: orgId ?? null };\n}\n\nfunction buildStatusPrefix(health: BackendHealth | undefined) {\n  return <BackendStatusDot isConnected={health?.isConnected ?? null} />;\n}\n\nfunction buildNoBackendPrefix() {\n  return <BackendStatusDot isConnected=\"unavailable\" />;\n}\n\nfunction buildOptions(\n  registered: Backend[],\n  personalWorkspaceLabel: string,\n  cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n  currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n  healthByBackendId: Record<string, BackendHealth>,\n): DropdownOption[] {\n  const options: DropdownOption[] = [];\n\n  const locals = registered.filter((b) => b.kind === \"local\");\n  const clouds = registered.filter((b) => b.kind === \"cloud\");\n\n  for (const b of locals) {\n    options.push({\n      value: makeOptionValue(b.id, null),\n      label: b.name,\n      prefix: buildStatusPrefix(healthByBackendId[b.id]),\n    });\n  }\n\n  for (const b of clouds) {\n    const entry = cloudOrgs[b.id];\n    const prefix = buildStatusPrefix(healthByBackendId[b.id]);\n    if (!entry || entry.orgs.length === 0) {\n      options.push({\n        value: makeOptionValue(b.id, null),\n        label: b.name,\n        prefix,\n      });\n    } else {\n      // Personal-workspace rule (per the cloud contract): the org whose\n      // id matches the calling user's id is the user's personal\n      // workspace. We resolve `user_id` once per backend (via /me on any\n      // one org) and apply it across all orgs of that backend.\n      const userIdForBackend = currentUserIds[b.id]?.userId ?? null;\n\n      for (const org of entry.orgs) {\n        const isPersonal = !!userIdForBackend && userIdForBackend === org.id;\n        const orgLabel = isPersonal ? personalWorkspaceLabel : org.name;\n        options.push({\n          value: makeOptionValue(b.id, org.id),\n          label: `${b.name} – ${orgLabel}`,\n          // All org rows for the same cloud backend share that backend's\n          // single connectivity verdict — there is no per-org probe.\n          prefix,\n        });\n      }\n    }\n  }\n\n  return options;\n}\n\ninterface BackendSelectorProps {\n  /** Render the menu above the trigger (e.g. when pinned to bottom of sidebar). */\n  openUpward?: boolean;\n  /** Hide the selector input trigger and only render the dropdown menu. */\n  hideTrigger?: boolean;\n  /** Whether the dropdown menu should start open on mount. */\n  defaultOpen?: boolean;\n  /** Callback fired after selecting a backend/org option. */\n  onSelectOption?: () => void;\n  /**\n   * Override the internal Add Backend modal handling. When provided,\n   * clicking \"Add Backend\" calls this instead of opening BackendSelector's\n   * own modal. Useful when the selector is mounted inside an ephemeral\n   * container (e.g. the collapsed-sidebar popover) and the modal must\n   * survive the parent unmounting.\n   */\n  onOpenAddBackend?: () => void;\n  /** Same as onOpenAddBackend but for the Manage Backends modal. */\n  onOpenManageBackends?: () => void;\n  /**\n   * Whether the surrounding sidebar rail is in its collapsed variant. Passed\n   * down from `SidebarRailBody` so the mobile drawer (which always renders\n   * the expanded rail) can override the persisted desktop value.\n   */\n  sidebarCollapsed?: boolean;\n}\n\nexport function BackendSelector({\n  openUpward = false,\n  hideTrigger = false,\n  defaultOpen = false,\n  onSelectOption,\n  onOpenAddBackend,\n  onOpenManageBackends,\n  sidebarCollapsed = false,\n}: BackendSelectorProps = {}) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, active, setActive } = useActiveBackendContext();\n  const cloudOrgs = useAllCloudOrganizations();\n  const currentUserIds = useCloudCurrentUserId();\n  // Probe each registered backend every 10s.\n  const healthByBackendId = useBackendsHealth(backends);\n  const navigate = useNavigate();\n  const settingsMatch = useMatch(\"/settings\");\n  const settingsSubrouteMatch = useMatch(\"/settings/*\");\n  const conversationMatch = useMatch(\"/conversations/:conversationId\");\n  const automationDetailMatch = useMatch(\"/automations/:automationId\");\n  const [addBackendModalOpen, setAddBackendModalOpen] = React.useState(false);\n  const [manageBackendsModalOpen, setManageBackendsModalOpen] =\n    React.useState(false);\n\n  const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n\n  const options = React.useMemo(\n    () =>\n      buildOptions(\n        backends,\n        personalWorkspaceLabel,\n        cloudOrgs,\n        currentUserIds,\n        healthByBackendId,\n      ),\n    [\n      backends,\n      personalWorkspaceLabel,\n      cloudOrgs,\n      currentUserIds,\n      healthByBackendId,\n    ],\n  );\n\n  const noBackendSelected = isNoBackend(active.backend);\n  const noBackendLabel = t(I18nKey.BACKEND$NO_BACKEND_AVAILABLE);\n  const activeValue = makeOptionValue(active.backend.id, active.orgId);\n  const activeOption = noBackendSelected\n    ? undefined\n    : options.find((o) => o.value === activeValue);\n  const isSettingsActive = Boolean(settingsMatch || settingsSubrouteMatch);\n  const settingsLabel = t(I18nKey.SIDEBAR$SETTINGS);\n  const isRightPanelShown = useConversationStore(\n    (state) => state.isRightPanelShown,\n  );\n  // When the sidebar rail is expanded, `placement=\"left\"` hugs the main\n  // canvas and reads awkwardly; prefer above the control. When the rail is\n  // collapsed, keep left except on active conversation + open right drawer.\n  const settingsTooltipPlacement =\n    !sidebarCollapsed || (conversationMatch && isRightPanelShown)\n      ? \"top\"\n      : \"left\";\n\n  const someCloudLoading = Object.values(cloudOrgs).some((c) => c.isLoading);\n\n  // Self-heal a malformed `(cloudBackendId, null)` selection.\n  //\n  // Once a cloud backend's orgs resolve, the dropdown only renders\n  // per-org rows for it — the `(backendId, null)` row disappears, so\n  // selecting that shape would drift from what the dropdown can render\n  // (UI says \"Local\", APIs hit cloud). When we detect the drift, snap\n  // the selection onto Cloud's current org first, then fall back to the\n  // personal workspace (or, lacking a /me result, the first org). The\n  // selection is recorded locally only; the cloud request scope follows\n  // from the X-Org-Id header sent by `callCloudProxy`, so the cloud UI's\n  // org choice is never mutated as a side effect.\n  React.useEffect(() => {\n    if (noBackendSelected || active.backend.kind !== \"cloud\" || active.orgId)\n      return;\n    const { backend } = active;\n    const entry = cloudOrgs[backend.id];\n    if (!entry || entry.orgs.length === 0) return;\n\n    const currentOrg = entry.currentOrgId\n      ? entry.orgs.find((o) => o.id === entry.currentOrgId)\n      : undefined;\n    const userId = currentUserIds[backend.id]?.userId ?? null;\n    const personal = userId\n      ? entry.orgs.find((o) => o.id === userId)\n      : undefined;\n    const target = currentOrg ?? personal ?? entry.orgs[0];\n    if (target) {\n      setActive(backend.id, target.id);\n    }\n  }, [active, cloudOrgs, currentUserIds, setActive, noBackendSelected]);\n\n  const openAddBackendModal = React.useCallback(() => {\n    if (onOpenAddBackend) {\n      onOpenAddBackend();\n      onSelectOption?.();\n      return;\n    }\n    setAddBackendModalOpen(true);\n  }, [onOpenAddBackend, onSelectOption]);\n\n  const openManageBackendsModal = React.useCallback(() => {\n    if (onOpenManageBackends) {\n      onOpenManageBackends();\n      onSelectOption?.();\n      return;\n    }\n    setManageBackendsModalOpen(true);\n  }, [onOpenManageBackends, onSelectOption]);\n\n  const isLockedToCloud = getLockedCloudHost() !== null;\n\n  const preventDropdownMenuClose = React.useCallback(\n    (event: React.SyntheticEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  const handleAddBackendClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      preventDropdownMenuClose(event);\n      openAddBackendModal();\n    },\n    [openAddBackendModal, preventDropdownMenuClose],\n  );\n\n  const handleAddBackendTouchEnd = React.useCallback(\n    (event: React.TouchEvent<HTMLButtonElement>) => {\n      preventDropdownMenuClose(event);\n      openAddBackendModal();\n    },\n    [openAddBackendModal, preventDropdownMenuClose],\n  );\n\n  const handleManageBackendsClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      preventDropdownMenuClose(event);\n      openManageBackendsModal();\n    },\n    [openManageBackendsModal, preventDropdownMenuClose],\n  );\n\n  const handleManageBackendsTouchEnd = React.useCallback(\n    (event: React.TouchEvent<HTMLButtonElement>) => {\n      preventDropdownMenuClose(event);\n      openManageBackendsModal();\n    },\n    [openManageBackendsModal, preventDropdownMenuClose],\n  );\n\n  const addBackendFooter = (\n    <div className={dropdownMenuListClassName}>\n      {isLockedToCloud ? null : (\n        <button\n          type=\"button\"\n          data-testid=\"add-backend-menu-item\"\n          onMouseDown={preventDropdownMenuClose}\n          onTouchStart={preventDropdownMenuClose}\n          onTouchEnd={handleAddBackendTouchEnd}\n          onClick={handleAddBackendClick}\n          className={cn(\n            dropdownFooterActionClassName,\n            \"cursor-pointer rounded-md\",\n          )}\n        >\n          <span className={dropdownMenuRowIconWrapperClassName} aria-hidden>\n            <Plus width={16} height={16} />\n          </span>\n          {t(I18nKey.BACKEND$ADD)}\n        </button>\n      )}\n      <button\n        type=\"button\"\n        data-testid=\"manage-backends-menu-item\"\n        onMouseDown={preventDropdownMenuClose}\n        onTouchStart={preventDropdownMenuClose}\n        onTouchEnd={handleManageBackendsTouchEnd}\n        onClick={handleManageBackendsClick}\n        className={cn(\n          dropdownFooterActionClassName,\n          \"cursor-pointer rounded-md\",\n        )}\n      >\n        <span className={dropdownMenuRowIconWrapperClassName} aria-hidden>\n          <Settings width={16} height={16} />\n        </span>\n        {t(\n          isLockedToCloud\n            ? I18nKey.BACKEND$RECONNECT_CLOUD\n            : I18nKey.BACKEND$MANAGE,\n        )}\n      </button>\n    </div>\n  );\n\n  const handleSelectBackend = React.useCallback(\n    async (value: string) => {\n      if (value === activeValue) return;\n\n      const { backendId, orgId } = parseOptionValue(value);\n      const target = backends.find((b) => b.id === backendId);\n      if (!target) return;\n\n      triggerEnvironmentSwitch(\n        options.find((option) => option.value === value)?.label ?? target.name,\n      );\n      await new Promise<void>((resolve) => {\n        setTimeout(resolve, ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS);\n      });\n\n      // @spec BM-002 — Switching backends keeps the user on the same page\n      if (conversationMatch) navigate(\"/conversations\");\n      else if (automationDetailMatch) navigate(\"/automations\");\n\n      setActive(target.id, orgId);\n      onSelectOption?.();\n    },\n    [\n      activeValue,\n      backends,\n      conversationMatch,\n      automationDetailMatch,\n      navigate,\n      options,\n      setActive,\n      t,\n      onSelectOption,\n    ],\n  );\n\n  return (\n    <>\n      <div className=\"flex items-center gap-2 w-full\">\n        <div className=\"flex-1 min-w-0\">\n          <Dropdown\n            testId=\"backend-selector\"\n            key={`${activeValue}-${activeOption?.label ?? \"\"}`}\n            defaultValue={\n              activeOption ?? {\n                value: activeValue,\n                label: noBackendSelected ? noBackendLabel : active.backend.name,\n                prefix: noBackendSelected\n                  ? buildNoBackendPrefix()\n                  : buildStatusPrefix(healthByBackendId[active.backend.id]),\n              }\n            }\n            footer={addBackendFooter}\n            openUpward={openUpward}\n            hideTrigger={hideTrigger}\n            defaultOpen={defaultOpen}\n            openOnHover={!hideTrigger}\n            onChange={(item) => {\n              if (!item) return;\n              void handleSelectBackend(item.value);\n            }}\n            placeholder={\n              noBackendSelected ? noBackendLabel : active.backend.name\n            }\n            loading={someCloudLoading}\n            options={options}\n            className=\"h-10 px-2 py-0 bg-transparent border-transparent hover:bg-[var(--oh-surface-raised)] focus-within:bg-[var(--oh-surface-raised)] focus-within:border-transparent focus-within:ring-0\"\n          />\n        </div>\n        {!hideTrigger ? (\n          <StyledTooltip\n            content={settingsLabel}\n            placement={settingsTooltipPlacement}\n            offset={10}\n          >\n            <NavigationLink\n              to=\"/settings\"\n              data-testid=\"backend-selector-settings-link\"\n              data-active={isSettingsActive}\n              aria-label={settingsLabel}\n              className={\n                isSettingsActive\n                  ? cn(\n                      \"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer\",\n                      formControlTransitionClassName,\n                    )\n                  : cn(\n                      \"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer\",\n                      formControlTransitionClassName,\n                    )\n              }\n            >\n              <Settings width={16} height={16} />\n            </NavigationLink>\n          </StyledTooltip>\n        ) : null}\n      </div>\n      {addBackendModalOpen ? (\n        <AddBackendModal onClose={() => setAddBackendModalOpen(false)} />\n      ) : null}\n      {manageBackendsModalOpen ? (\n        <ManageBackendsModal\n          onClose={() => setManageBackendsModalOpen(false)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"backend-selector.js","names":[],"sources":["../../../../src/components/features/backends/backend-selector.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useMatch, useNavigate } from \"react-router\";\nimport { Plus, Settings } from \"lucide-react\";\nimport { Dropdown } from \"#/ui/dropdown/dropdown\";\nimport { DropdownOption } from \"#/ui/dropdown/types\";\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport {\n  useBackendsHealth,\n  type BackendHealth,\n} from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend } from \"#/api/backend-registry/types\";\n// Import the trigger helpers from the lightweight store, not the overlay\n// component, so the eagerly-mounted sidebar/backend-selector graph does not\n// pull in the overlay's render code (the overlay is lazy-loaded from\n// `routes/root-layout.tsx`).\nimport {\n  ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS,\n  triggerEnvironmentSwitch,\n} from \"#/components/features/backends/environment-switch-store\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { AddBackendModal } from \"./add-backend-modal\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { ManageBackendsModal } from \"./manage-backends-modal\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlTransitionClassName } from \"#/utils/form-control-classes\";\nimport {\n  dropdownFooterActionClassName,\n  dropdownMenuListClassName,\n  dropdownMenuRowIconWrapperClassName,\n} from \"#/utils/dropdown-classes\";\n\nconst VALUE_SEPARATOR = \"::\";\n\nfunction makeOptionValue(backendId: string, orgId: string | null): string {\n  return orgId ? `${backendId}${VALUE_SEPARATOR}${orgId}` : backendId;\n}\n\nfunction parseOptionValue(value: string): {\n  backendId: string;\n  orgId: string | null;\n} {\n  const [backendId, orgId] = value.split(VALUE_SEPARATOR);\n  return { backendId, orgId: orgId ?? null };\n}\n\nfunction buildStatusPrefix(health: BackendHealth | undefined) {\n  return <BackendStatusDot isConnected={health?.isConnected ?? null} />;\n}\n\nfunction buildNoBackendPrefix() {\n  return <BackendStatusDot isConnected=\"unavailable\" />;\n}\n\nfunction buildOptions(\n  registered: Backend[],\n  personalWorkspaceLabel: string,\n  cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n  currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n  healthByBackendId: Record<string, BackendHealth>,\n): DropdownOption[] {\n  const options: DropdownOption[] = [];\n\n  const locals = registered.filter((b) => b.kind === \"local\");\n  const clouds = registered.filter((b) => b.kind === \"cloud\");\n\n  for (const b of locals) {\n    options.push({\n      value: makeOptionValue(b.id, null),\n      label: b.name,\n      prefix: buildStatusPrefix(healthByBackendId[b.id]),\n    });\n  }\n\n  for (const b of clouds) {\n    const entry = cloudOrgs[b.id];\n    const prefix = buildStatusPrefix(healthByBackendId[b.id]);\n    if (!entry || entry.orgs.length === 0) {\n      options.push({\n        value: makeOptionValue(b.id, null),\n        label: b.name,\n        prefix,\n      });\n    } else {\n      // Personal-workspace rule (per the cloud contract): the org whose\n      // id matches the calling user's id is the user's personal\n      // workspace. We resolve `user_id` once per backend (via /me on any\n      // one org) and apply it across all orgs of that backend.\n      const userIdForBackend = currentUserIds[b.id]?.userId ?? null;\n\n      for (const org of entry.orgs) {\n        const isPersonal = !!userIdForBackend && userIdForBackend === org.id;\n        const orgLabel = isPersonal ? personalWorkspaceLabel : org.name;\n        options.push({\n          value: makeOptionValue(b.id, org.id),\n          label: `${b.name} – ${orgLabel}`,\n          // All org rows for the same cloud backend share that backend's\n          // single connectivity verdict — there is no per-org probe.\n          prefix,\n        });\n      }\n    }\n  }\n\n  return options;\n}\n\ninterface BackendSelectorProps {\n  /** Render the menu above the trigger (e.g. when pinned to bottom of sidebar). */\n  openUpward?: boolean;\n  /** Hide the selector input trigger and only render the dropdown menu. */\n  hideTrigger?: boolean;\n  /** Whether the dropdown menu should start open on mount. */\n  defaultOpen?: boolean;\n  /** Callback fired after selecting a backend/org option. */\n  onSelectOption?: () => void;\n  /**\n   * Override the internal Add Backend modal handling. When provided,\n   * clicking \"Add Backend\" calls this instead of opening BackendSelector's\n   * own modal. Useful when the selector is mounted inside an ephemeral\n   * container (e.g. the collapsed-sidebar popover) and the modal must\n   * survive the parent unmounting.\n   */\n  onOpenAddBackend?: () => void;\n  /** Same as onOpenAddBackend but for the Manage Backends modal. */\n  onOpenManageBackends?: () => void;\n  /**\n   * Whether the surrounding sidebar rail is in its collapsed variant. Passed\n   * down from `SidebarRailBody` so the mobile drawer (which always renders\n   * the expanded rail) can override the persisted desktop value.\n   */\n  sidebarCollapsed?: boolean;\n}\n\nexport function BackendSelector({\n  openUpward = false,\n  hideTrigger = false,\n  defaultOpen = false,\n  onSelectOption,\n  onOpenAddBackend,\n  onOpenManageBackends,\n  sidebarCollapsed = false,\n}: BackendSelectorProps = {}) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, active, setActive } = useActiveBackendContext();\n  const cloudOrgs = useAllCloudOrganizations();\n  const currentUserIds = useCloudCurrentUserId();\n  // Probe each registered backend every 10s.\n  const healthByBackendId = useBackendsHealth(backends);\n  const navigate = useNavigate();\n  const settingsMatch = useMatch(\"/settings\");\n  const settingsSubrouteMatch = useMatch(\"/settings/*\");\n  const conversationMatch = useMatch(\"/conversations/:conversationId\");\n  const automationDetailMatch = useMatch(\"/automations/:automationId\");\n  const [addBackendModalOpen, setAddBackendModalOpen] = React.useState(false);\n  const [manageBackendsModalOpen, setManageBackendsModalOpen] =\n    React.useState(false);\n\n  const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n\n  const options = React.useMemo(\n    () =>\n      buildOptions(\n        backends,\n        personalWorkspaceLabel,\n        cloudOrgs,\n        currentUserIds,\n        healthByBackendId,\n      ),\n    [\n      backends,\n      personalWorkspaceLabel,\n      cloudOrgs,\n      currentUserIds,\n      healthByBackendId,\n    ],\n  );\n\n  const noBackendSelected = isNoBackend(active.backend);\n  const noBackendLabel = t(I18nKey.BACKEND$NO_BACKEND_AVAILABLE);\n  const activeValue = makeOptionValue(active.backend.id, active.orgId);\n  const activeOption = noBackendSelected\n    ? undefined\n    : options.find((o) => o.value === activeValue);\n  const isSettingsActive = Boolean(settingsMatch || settingsSubrouteMatch);\n  const settingsLabel = t(I18nKey.SIDEBAR$SETTINGS);\n  const isRightPanelShown = useConversationStore(\n    (state) => state.isRightPanelShown,\n  );\n  // When the sidebar rail is expanded, `placement=\"left\"` hugs the main\n  // canvas and reads awkwardly; prefer above the control. When the rail is\n  // collapsed, keep left except on active conversation + open right drawer.\n  const settingsTooltipPlacement =\n    !sidebarCollapsed || (conversationMatch && isRightPanelShown)\n      ? \"top\"\n      : \"left\";\n\n  const someCloudLoading = Object.values(cloudOrgs).some((c) => c.isLoading);\n\n  // Self-heal a malformed `(cloudBackendId, null)` selection.\n  //\n  // Once a cloud backend's orgs resolve, the dropdown only renders\n  // per-org rows for it — the `(backendId, null)` row disappears, so\n  // selecting that shape would drift from what the dropdown can render\n  // (UI says \"Local\", APIs hit cloud). When we detect the drift, snap\n  // the selection onto Cloud's current org first, then fall back to the\n  // personal workspace (or, lacking a /me result, the first org). The\n  // selection is recorded locally only; the cloud request scope follows\n  // from the X-Org-Id header sent by `callCloudProxy`, so the cloud UI's\n  // org choice is never mutated as a side effect.\n  React.useEffect(() => {\n    if (noBackendSelected || active.backend.kind !== \"cloud\" || active.orgId)\n      return;\n    const { backend } = active;\n    const entry = cloudOrgs[backend.id];\n    if (!entry || entry.orgs.length === 0) return;\n\n    const currentOrg = entry.currentOrgId\n      ? entry.orgs.find((o) => o.id === entry.currentOrgId)\n      : undefined;\n    const userId = currentUserIds[backend.id]?.userId ?? null;\n    const personal = userId\n      ? entry.orgs.find((o) => o.id === userId)\n      : undefined;\n    const target = currentOrg ?? personal ?? entry.orgs[0];\n    if (target) {\n      setActive(backend.id, target.id);\n    }\n  }, [active, cloudOrgs, currentUserIds, setActive, noBackendSelected]);\n\n  const openAddBackendModal = React.useCallback(() => {\n    if (onOpenAddBackend) {\n      onOpenAddBackend();\n      onSelectOption?.();\n      return;\n    }\n    setAddBackendModalOpen(true);\n  }, [onOpenAddBackend, onSelectOption]);\n\n  const openManageBackendsModal = React.useCallback(() => {\n    if (onOpenManageBackends) {\n      onOpenManageBackends();\n      onSelectOption?.();\n      return;\n    }\n    setManageBackendsModalOpen(true);\n  }, [onOpenManageBackends, onSelectOption]);\n\n  const isLockedToCloud = getLockedCloudHost() !== null;\n  // A cookie-auth (OHE-hosted) Canvas has nothing to add, manage, or\n  // reconnect — its single locked backend is owned by the main-app session.\n  const hideBackendFooter =\n    isLockedToCloud && active.backend.authMode === \"cookie\";\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 = hideBackendFooter ? undefined : (\n    <div className={dropdownMenuListClassName}>\n      {isLockedToCloud ? null : (\n        <button\n          type=\"button\"\n          data-testid=\"add-backend-menu-item\"\n          onMouseDown={preventDropdownMenuClose}\n          onTouchStart={preventDropdownMenuClose}\n          onTouchEnd={handleAddBackendTouchEnd}\n          onClick={handleAddBackendClick}\n          className={cn(\n            dropdownFooterActionClassName,\n            \"cursor-pointer rounded-md\",\n          )}\n        >\n          <span className={dropdownMenuRowIconWrapperClassName} aria-hidden>\n            <Plus width={16} height={16} />\n          </span>\n          {t(I18nKey.BACKEND$ADD)}\n        </button>\n      )}\n      <button\n        type=\"button\"\n        data-testid=\"manage-backends-menu-item\"\n        onMouseDown={preventDropdownMenuClose}\n        onTouchStart={preventDropdownMenuClose}\n        onTouchEnd={handleManageBackendsTouchEnd}\n        onClick={handleManageBackendsClick}\n        className={cn(\n          dropdownFooterActionClassName,\n          \"cursor-pointer rounded-md\",\n        )}\n      >\n        <span className={dropdownMenuRowIconWrapperClassName} aria-hidden>\n          <Settings width={16} height={16} />\n        </span>\n        {t(\n          isLockedToCloud\n            ? I18nKey.BACKEND$RECONNECT_CLOUD\n            : I18nKey.BACKEND$MANAGE,\n        )}\n      </button>\n    </div>\n  );\n\n  const handleSelectBackend = React.useCallback(\n    async (value: string) => {\n      if (value === activeValue) return;\n\n      const { backendId, orgId } = parseOptionValue(value);\n      const target = backends.find((b) => b.id === backendId);\n      if (!target) return;\n\n      triggerEnvironmentSwitch(\n        options.find((option) => option.value === value)?.label ?? target.name,\n      );\n      await new Promise<void>((resolve) => {\n        setTimeout(resolve, ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS);\n      });\n\n      // @spec BM-002 — Switching backends keeps the user on the same page\n      if (conversationMatch) navigate(\"/conversations\");\n      else if (automationDetailMatch) navigate(\"/automations\");\n\n      setActive(target.id, orgId);\n      onSelectOption?.();\n    },\n    [\n      activeValue,\n      backends,\n      conversationMatch,\n      automationDetailMatch,\n      navigate,\n      options,\n      setActive,\n      t,\n      onSelectOption,\n    ],\n  );\n\n  return (\n    <>\n      <div className=\"flex items-center gap-2 w-full\">\n        <div className=\"flex-1 min-w-0\">\n          <Dropdown\n            testId=\"backend-selector\"\n            key={`${activeValue}-${activeOption?.label ?? \"\"}`}\n            defaultValue={\n              activeOption ?? {\n                value: activeValue,\n                label: noBackendSelected ? noBackendLabel : active.backend.name,\n                prefix: noBackendSelected\n                  ? buildNoBackendPrefix()\n                  : buildStatusPrefix(healthByBackendId[active.backend.id]),\n              }\n            }\n            footer={addBackendFooter}\n            openUpward={openUpward}\n            hideTrigger={hideTrigger}\n            defaultOpen={defaultOpen}\n            openOnHover={!hideTrigger}\n            onChange={(item) => {\n              if (!item) return;\n              void handleSelectBackend(item.value);\n            }}\n            placeholder={\n              noBackendSelected ? noBackendLabel : active.backend.name\n            }\n            loading={someCloudLoading}\n            options={options}\n            className=\"h-10 px-2 py-0 bg-transparent border-transparent hover:bg-[var(--oh-surface-raised)] focus-within:bg-[var(--oh-surface-raised)] focus-within:border-transparent focus-within:ring-0\"\n          />\n        </div>\n        {!hideTrigger ? (\n          <StyledTooltip\n            content={settingsLabel}\n            placement={settingsTooltipPlacement}\n            offset={10}\n          >\n            {active.backend.kind === \"cloud\" ? (\n              <a\n                href={`${active.backend.host.replace(/\\/+$/, \"\")}/settings`}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                data-testid=\"backend-selector-settings-link\"\n                aria-label={settingsLabel}\n                className={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                <Settings width={16} height={16} />\n              </a>\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            )}\n          </StyledTooltip>\n        ) : null}\n      </div>\n      {addBackendModalOpen ? (\n        <AddBackendModal onClose={() => setAddBackendModalOpen(false)} />\n      ) : null}\n      {manageBackendsModalOpen ? (\n        <ManageBackendsModal\n          onClose={() => setManageBackendsModalOpen(false)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/plus.cjs"),i=require("../../../utils/utils.cjs"),a=require("../../../api/agent-server-config.cjs"),o=require("../../../contexts/active-backend-context.cjs"),s=require("../../shared/modals/modal-backdrop.cjs"),c=require("../../shared/modals/modal-body.cjs"),l=require("../../../utils/modal-classes.cjs"),u=require("../../shared/modals/modal-close-button.cjs"),d=require("../settings/brand-button.cjs"),f=require("../../shared/modals/confirmation-modal.cjs"),p=require("../../../hooks/query/use-cloud-organizations.cjs"),m=require("../../../hooks/query/use-cloud-current-user-id.cjs"),h=require("../../../hooks/query/use-backends-health.cjs"),g=require("./device-flow-auth.cjs"),_=require("./backend-form-modal.cjs"),v=require("./backend-row.cjs");let y=require("react");y=e.__toESM(y,1);let b=require("react/jsx-runtime");function x(e,t,n,r){if(e.kind!==`cloud`)return;let i=t[e.id];if(!i||i.orgs.length===0)return;let a=n[e.id]?.userId??null;return i.orgs.map(e=>a&&a===e.id?r:e.name).join(`, `)}function S({onClose:e,recoveryMode:S=!1}){let{t:C}=t.useTranslation(`openhands`),{backends:w,active:T,removeBackend:E,setActive:D,updateBackend:O}=o.useActiveBackendContext(),k=h.useBackendsHealth(w,{probeDisabledOnce:!0}),A=p.useAllCloudOrganizations(),j=m.useCloudCurrentUserId(),M=C(n.I18nKey.BACKEND$PERSONAL_WORKSPACE),N=a.getLockedCloudHost(),P=N!==null,F=P&&T.backend.kind===`cloud`?T.backend:null,I=N??F?.host??``,L=C(P?n.I18nKey.BACKEND$RECONNECT_CLOUD_TITLE:n.I18nKey.BACKEND$MANAGE_TITLE),[R,z]=y.default.useState(null),[B,V]=y.default.useState(null),[H,U]=y.default.useState(!1),W=()=>{R&&(E(R.id),z(null))},G=y.default.useCallback(t=>{(T.backend.id!==t.id||T.orgId!==null)&&D(t.id),e()},[T.backend.id,T.orgId,e,D]),K=y.default.useCallback((e,t)=>{O(e.id,{apiKey:t})},[O]),q=y.default.useCallback(e=>{F&&O(F.id,{apiKey:e})},[F,O]);return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(s.ModalBackdrop,{onClose:S?void 0:e,closeOnEscape:!S,closeOnBackdropClick:!S,"aria-label":L,children:(0,b.jsxs)(`div`,{"data-testid":`manage-backends-modal`,className:i.cn(`relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl`,c.modalWidthClassName(`lg`),c.MODAL_MAX_WIDTH_VIEWPORT,`max-h-[70vh]`),children:[S?null:(0,b.jsx)(u.ModalCloseButton,{onClose:e,testId:`close-manage-backends-modal`}),(0,b.jsx)(`div`,{className:i.cn(`p-5`,!S&&`pr-12`),children:(0,b.jsx)(`h2`,{className:l.modalTitleLgClassName,children:L})}),(0,b.jsx)(`div`,{className:`flex min-h-0 flex-1 flex-col px-5`,children:(0,b.jsx)(`div`,{className:`flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always`,"data-testid":`manage-backends-list`,children:w.length===0?(0,b.jsx)(`p`,{className:`px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]`,children:C(n.I18nKey.BACKEND$MANAGE_EMPTY)}):(0,b.jsx)(`ul`,{className:`divide-y divide-[var(--oh-border)]`,children:w.map(e=>(0,b.jsx)(v.BackendRow,{backend:e,health:k[e.id],orgLabel:x(e,A,j,M),onSelect:()=>G(e),onEdit:()=>V(e),onRemove:()=>z({id:e.id,name:e.name}),onLogin:t=>K(e,t)},e.id))})})}),(0,b.jsxs)(`div`,{className:`flex justify-end gap-2 p-5`,children:[P?F?(0,b.jsx)(g.DeviceFlowAuth,{host:I,onSuccess:q,testIdRoot:`manage-backends-reconnect-cloud`,idleButtonLabel:C(n.I18nKey.BACKEND$RECONNECT_CLOUD),className:`w-full sm:w-auto`,buttonClassName:`w-full sm:w-auto`,statusDisplay:`modal`}):null:(0,b.jsx)(d.BrandButton,{type:`button`,variant:S?`primary`:`secondary`,onClick:()=>U(!0),testId:`manage-backends-add`,startContent:(0,b.jsx)(r.Plus,{width:14,height:14}),children:C(n.I18nKey.BACKEND$ADD)}),S?null:(0,b.jsx)(d.BrandButton,{type:`button`,variant:`primary`,onClick:e,testId:`manage-backends-done`,children:C(n.I18nKey.HOME$DONE)})]})]})}),H?(0,b.jsx)(_.BackendFormModal,{mode:`add`,source:`manage_backends_modal`,onClose:()=>U(!1)}):null,B?(0,b.jsx)(_.BackendFormModal,{mode:`edit`,backend:B,onClose:()=>V(null)}):null,R?(0,b.jsx)(f.ConfirmationModal,{text:C(n.I18nKey.BACKEND$REMOVE_CONFIRMATION,{name:R.name}),onConfirm:W,onCancel:()=>z(null)}):null]})}exports.ManageBackendsModal=S;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/plus.cjs"),i=require("../../../utils/utils.cjs"),a=require("../../../api/agent-server-config.cjs"),o=require("../../../contexts/active-backend-context.cjs"),s=require("../../shared/modals/modal-backdrop.cjs"),c=require("../../shared/modals/modal-body.cjs"),l=require("../../../utils/modal-classes.cjs"),u=require("../../shared/modals/modal-close-button.cjs"),d=require("../settings/brand-button.cjs"),f=require("../../../hooks/query/use-cloud-organizations.cjs"),p=require("../../../hooks/query/use-cloud-current-user-id.cjs"),m=require("../../shared/modals/confirmation-modal.cjs"),h=require("../../../hooks/query/use-backends-health.cjs"),g=require("./device-flow-auth.cjs"),_=require("./backend-form-modal.cjs"),v=require("./backend-row.cjs");let y=require("react");y=e.__toESM(y,1);let b=require("react/jsx-runtime");function x(e,t,n,r){if(e.kind!==`cloud`)return;let i=t[e.id];if(!i||i.orgs.length===0)return;let a=n[e.id]?.userId??null;return i.orgs.map(e=>a&&a===e.id?r:e.name).join(`, `)}function S({onClose:e,recoveryMode:S=!1}){let{t:C}=t.useTranslation(`openhands`),{backends:w,active:T,removeBackend:E,setActive:D,updateBackend:O}=o.useActiveBackendContext(),k=h.useBackendsHealth(w,{probeDisabledOnce:!0}),A=f.useAllCloudOrganizations(),j=p.useCloudCurrentUserId(),M=C(n.I18nKey.BACKEND$PERSONAL_WORKSPACE),N=a.getLockedCloudHost(),P=N!==null,F=T.backend.authMode===`cookie`,I=P&&!F&&T.backend.kind===`cloud`?T.backend:null,L=N??I?.host??``,R=C(P&&!F?n.I18nKey.BACKEND$RECONNECT_CLOUD_TITLE:n.I18nKey.BACKEND$MANAGE_TITLE),[z,B]=y.default.useState(null),[V,H]=y.default.useState(null),[U,W]=y.default.useState(!1),G=()=>{z&&(E(z.id),B(null))},K=y.default.useCallback(t=>{(T.backend.id!==t.id||T.orgId!==null)&&D(t.id),e()},[T.backend.id,T.orgId,e,D]),q=y.default.useCallback((e,t)=>{O(e.id,{apiKey:t})},[O]),J=y.default.useCallback(e=>{I&&O(I.id,{apiKey:e})},[I,O]);return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(s.ModalBackdrop,{onClose:S?void 0:e,closeOnEscape:!S,closeOnBackdropClick:!S,"aria-label":R,children:(0,b.jsxs)(`div`,{"data-testid":`manage-backends-modal`,className:i.cn(`relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl`,c.modalWidthClassName(`lg`),c.MODAL_MAX_WIDTH_VIEWPORT,`max-h-[70vh]`),children:[S?null:(0,b.jsx)(u.ModalCloseButton,{onClose:e,testId:`close-manage-backends-modal`}),(0,b.jsx)(`div`,{className:i.cn(`p-5`,!S&&`pr-12`),children:(0,b.jsx)(`h2`,{className:l.modalTitleLgClassName,children:R})}),(0,b.jsx)(`div`,{className:`flex min-h-0 flex-1 flex-col px-5`,children:(0,b.jsx)(`div`,{className:`flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always`,"data-testid":`manage-backends-list`,children:w.length===0?(0,b.jsx)(`p`,{className:`px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]`,children:C(n.I18nKey.BACKEND$MANAGE_EMPTY)}):(0,b.jsx)(`ul`,{className:`divide-y divide-[var(--oh-border)]`,children:w.map(e=>(0,b.jsx)(v.BackendRow,{backend:e,health:k[e.id],orgLabel:x(e,A,j,M),onSelect:()=>K(e),onEdit:()=>H(e),onRemove:()=>B({id:e.id,name:e.name}),onLogin:e.authMode===`cookie`?void 0:t=>q(e,t)},e.id))})})}),(0,b.jsxs)(`div`,{className:`flex justify-end gap-2 p-5`,children:[P?I?(0,b.jsx)(g.DeviceFlowAuth,{host:L,onSuccess:J,testIdRoot:`manage-backends-reconnect-cloud`,idleButtonLabel:C(n.I18nKey.BACKEND$RECONNECT_CLOUD),className:`w-full sm:w-auto`,buttonClassName:`w-full sm:w-auto`,statusDisplay:`modal`}):null:(0,b.jsx)(d.BrandButton,{type:`button`,variant:S?`primary`:`secondary`,onClick:()=>W(!0),testId:`manage-backends-add`,startContent:(0,b.jsx)(r.Plus,{width:14,height:14}),children:C(n.I18nKey.BACKEND$ADD)}),S?null:(0,b.jsx)(d.BrandButton,{type:`button`,variant:`primary`,onClick:e,testId:`manage-backends-done`,children:C(n.I18nKey.HOME$DONE)})]})]})}),U?(0,b.jsx)(_.BackendFormModal,{mode:`add`,source:`manage_backends_modal`,onClose:()=>W(!1)}):null,V?(0,b.jsx)(_.BackendFormModal,{mode:`edit`,backend:V,onClose:()=>H(null)}):null,z?(0,b.jsx)(m.ConfirmationModal,{text:C(n.I18nKey.BACKEND$REMOVE_CONFIRMATION,{name:z.name}),onConfirm:G,onCancel:()=>B(null)}):null]})}exports.ManageBackendsModal=S;
 //# sourceMappingURL=manage-backends-modal.cjs.map