@openhands/agent-canvas 1.0.0-alpha.5 → 1.0.0-alpha.7

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

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

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

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

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

package/dist/components/features/chat/components/chat-input-actions.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(`../../../../types/agent-state.cjs`),i=require(`../../../../utils/utils.cjs`),a=require(`../../../../hooks/use-conversation-id.cjs`),o=require(`../../../../stores/conversation-store.cjs`),s=require(`../../../../contexts/active-backend-context.cjs`),c=require(`../../../../node_modules/lucide-react/dist/esm/icons/cpu.cjs`),ee=require(`../../../../constants/acp-providers.cjs`),te=require(`../../../../hooks/query/use-active-conversation.cjs`),ne=require(`../../../../hooks/use-agent-state.cjs`);require(`../../../../utils/form-control-classes.cjs`);const re=require(`../../../../hooks/use-unified-websocket-status.cjs`),l=require(`../../controls/agent-status.cjs`),ie=require(`../../../../icons/lesson-plan.cjs`),u=require(`../../../../icons/code-pill.cjs`),d=require(`../../../../ui/context-menu.cjs`),f=require(`../../context-menu/context-menu-list-item.cjs`),ae=require(`../../../../hooks/use-click-outside-element.cjs`),oe=require(`../../../../hooks/use-handle-plan-click.cjs`),se=require(`../change-agent-button.cjs`),ce=require(`../../../../hooks/use-acp-model-context.cjs`),le=require(`../../../../icons/settings-gear.cjs`),p=require(`../../../shared/navigation-link.cjs`),ue=require(`../../../../ui/divider.cjs`),de=require(`./chat-input-model.cjs`),fe=require(`../switch-profile-button.cjs`),pe=require(`../../../../hooks/mutation/use-unified-stop-conversation.cjs`),m=require(`../../../../icons/carret-right-fill.cjs`),h=require(`../../controls/tools-context-menu-icon-text.cjs`),me=require(`../chat-add-file-button.cjs`),he=require(`../chat-send-button.cjs`),ge=require(`../../../../icons/three-dots-vertical.cjs`),_e=require(`../../../../hooks/mutation/use-pause-conversation.cjs`),g=require(`../../../../hooks/mutation/use-resume-conversation.cjs`);let _=require(`react`);_=e.__toESM(_,1);let v=require(`react/jsx-runtime`),y=require(`react-dom`);y=e.__toESM(y,1);function b({disabled:e,canSubmit:b=!0,onAddFileClick:ve=()=>{},showButton:ye=!0,buttonClassName:be=``,handleSubmit:xe=()=>{}}){let{t:x}=t.useTranslation(`openhands`),Se=pe.useUnifiedPauseConversation(),S=_e.usePauseConversation(),Ce=g.useResumeConversation(),{conversationId:C}=a.useOptionalConversationId(),{data:w}=te.useActiveConversation(),{backend:T}=s.useActiveBackend(),E=T.kind===`cloud`,{isAcpContext:D,destinationPath:O,destinationLabel:k}=ce.useAcpModelContext(),A=D?ee.labelForAcpModel(w?.acp_server,w?.llm_model)??w?.llm_model:w?.llm_model,we=re.useUnifiedWebSocketStatus(),{curAgentState:Te}=ne.useAgentState(),{conversationMode:Ee,setConversationMode:De}=o.useConversationStore(),{handlePlanClick:Oe,isCreatingConversation:ke}=oe.useHandlePlanClick(),j=_.default.useRef(null),M=_.default.useRef(null),N=_.default.useRef(null),P=_.default.useRef(null),F=_.default.useRef(null),I=_.default.useRef(null),[L,Ae]=_.default.useState(1/0),[je,Me]=_.default.useState(0),[Ne,Pe]=_.default.useState(32),[R,Fe]=_.default.useState(96),[z,Ie]=_.default.useState(120),[B,V]=_.default.useState(!1),[H,U]=_.default.useState(null),[W,Le]=_.default.useState();_.default.useEffect(()=>{let e=j.current,t=M.current,n=N.current,r=P.current,i=F.current;if(!e||!t||!n||!i||E&&!r||typeof ResizeObserver>`u`)return;let a=()=>{let a=e.getBoundingClientRect().width,o=t.getBoundingClientRect().width,s=n.getBoundingClientRect().width,c=i.getBoundingClientRect().width;if(a>0&&Ae(a),o>0&&Me(o),s>0&&Pe(s),c>0&&Ie(c),r){let e=r.getBoundingClientRect().width;e>0&&Fe(e)}},o=new ResizeObserver(()=>{a()});return o.observe(e),o.observe(t),o.observe(n),o.observe(i),r&&o.observe(r),a(),()=>o.disconnect()},[E]);let Re=()=>{C&&S.mutate({conversationId:C})},ze=()=>{C&&Ce.mutate({conversationId:C})},Be=Se.isPending||S.isPending,G=_.default.useCallback(e=>{let t=e,n={showCodeInline:!1,showModelInline:!1};return E&&t>=R&&(n.showCodeInline=!0,t-=R+12),t>=z&&(n.showModelInline=!0),n},[E,R,z]),K=L-je-8-Ne-12,q=G(K),J=(!E||q.showCodeInline)&&q.showModelInline?q:G(K-28-12),Y=E?J.showCodeInline:!1,X=J.showModelInline,Ve=L>=360,Z=E&&!Y||!X;_.default.useEffect(()=>{Z||(V(!1),U(null))},[Z]);let He=ae.useClickOutsideElement(()=>{V(!1),U(null)}),Q=Te===r.AgentState.RUNNING||ke||we!==`OPEN`,$=()=>{U(null),V(!1)};_.default.useLayoutEffect(()=>{if(!B||!I.current)return;let e=I.current,t=()=>{let t=e.getBoundingClientRect();Le({position:`fixed`,top:t.top-8,left:t.left,transform:`translateY(-100%)`,zIndex:9999})};return t(),window.addEventListener(`resize`,t),window.addEventListener(`scroll`,t,!0),()=>{window.removeEventListener(`resize`,t),window.removeEventListener(`scroll`,t,!0)}},[B]);let Ue=(0,v.jsxs)(d.ContextMenu,{ref:He,testId:`chat-input-overflow-menu`,position:`top`,alignment:`left`,className:`!static !top-auto !bottom-auto !left-auto !right-auto !mt-0 overflow-visible min-w-[200px]`,children:[E&&!Y&&(0,v.jsxs)(`div`,{className:`relative group/overflow-agent`,children:[(0,v.jsx)(f.ContextMenuListItem,{testId:`overflow-agent-button`,onClick:()=>U(e=>e===`agent`?null:`agent`),isDisabled:Q,children:(0,v.jsx)(h.ToolsContextMenuIconText,{icon:(0,v.jsx)(u.CodePillIcon,{className:`h-[11px] w-[11px]`}),text:x(Ee===`code`?n.I18nKey.COMMON$CODE:n.I18nKey.COMMON$PLAN),rightIcon:(0,v.jsx)(m.default,{width:10,height:10})})}),!Q&&(0,v.jsx)(`div`,{className:i.cn(`absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]`,`group-hover/overflow-agent:opacity-100 group-hover/overflow-agent:visible group-hover/overflow-agent:pointer-events-auto`,`hover:opacity-100 hover:visible hover:pointer-events-auto`,H===`agent`&&`opacity-100 visible pointer-events-auto`),children:(0,v.jsxs)(d.ContextMenu,{testId:`overflow-agent-submenu`,className:`overflow-visible min-w-[195px] gap-0`,children:[(0,v.jsx)(f.ContextMenuListItem,{testId:`overflow-agent-code`,onClick:e=>{e.preventDefault(),e.stopPropagation(),De(`code`),$()},children:(0,v.jsx)(h.ToolsContextMenuIconText,{icon:(0,v.jsx)(u.CodePillIcon,{className:`h-[11px] w-[11px]`}),text:x(n.I18nKey.COMMON$CODE)})}),(0,v.jsx)(f.ContextMenuListItem,{testId:`overflow-agent-plan`,onClick:e=>{Oe(e),$()},children:(0,v.jsx)(h.ToolsContextMenuIconText,{icon:(0,v.jsx)(ie.default,{width:16,height:16,color:`currentColor`}),text:x(n.I18nKey.COMMON$PLAN)})})]})})]}),!X&&(0,v.jsxs)(`div`,{className:`relative group/overflow-model`,children:[(0,v.jsx)(f.ContextMenuListItem,{testId:`overflow-model-button`,onClick:()=>U(e=>e===`model`?null:`model`),children:(0,v.jsx)(h.ToolsContextMenuIconText,{icon:(0,v.jsx)(c.Cpu,{width:16,height:16,strokeWidth:2,"aria-hidden":!0}),text:`Model`,rightIcon:(0,v.jsx)(m.default,{width:10,height:10})})}),(0,v.jsx)(`div`,{className:i.cn(`absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]`,`group-hover/overflow-model:opacity-100 group-hover/overflow-model:visible group-hover/overflow-model:pointer-events-auto`,`hover:opacity-100 hover:visible hover:pointer-events-auto`,H===`model`&&`opacity-100 visible pointer-events-auto`),children:(0,v.jsxs)(d.ContextMenu,{testId:`overflow-model-submenu`,className:`overflow-visible min-w-[220px] max-w-[320px] gap-0`,children:[(0,v.jsx)(`li`,{className:`text-sm`,children:(0,v.jsx)(`div`,{className:`p-2 leading-5 text-[var(--oh-foreground)] break-all`,children:A})}),(0,v.jsx)(ue.Divider,{inset:`menu`}),(0,v.jsx)(`li`,{className:`text-sm`,children:(0,v.jsxs)(p.NavigationLink,{to:O,onClick:$,className:i.cn(`group flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]`,`transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none`),children:[(0,v.jsx)(le.default,{width:16,height:16,className:i.cn(`shrink-0 text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)]`,`transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none`),"aria-hidden":!0}),(0,v.jsx)(`span`,{children:k})]})})]})})]})]});return(0,v.jsxs)(`div`,{ref:j,className:`w-full min-w-0 flex items-center justify-between gap-2`,children:[(0,v.jsx)(`div`,{className:`flex min-w-0 items-center gap-1`,children:(0,v.jsxs)(`div`,{className:`flex min-w-0 items-center gap-3`,children:[(0,v.jsx)(`div`,{ref:N,className:i.cn(!1),children:(0,v.jsx)(me.ChatAddFileButton,{disabled:e,handleFileIconClick:ve})}),E&&(0,v.jsx)(`div`,{ref:P,className:i.cn(!Y&&`hidden`),children:(0,v.jsx)(se.ChangeAgentButton,{})}),(0,v.jsx)(`div`,{ref:F,className:i.cn(!X&&`hidden`),children:E||D?(0,v.jsx)(de.ChatInputModel,{}):(0,v.jsx)(fe.SwitchProfileButton,{})}),Z&&(0,v.jsxs)(`div`,{className:`relative shrink-0`,children:[(0,v.jsx)(`button`,{ref:I,type:`button`,className:i.cn(`flex size-6 items-center justify-center rounded-full text-[var(--oh-muted)]`,`transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none`,`hover:bg-white/10 hover:text-white cursor-pointer`),"aria-label":`More input actions`,"aria-expanded":B,"aria-haspopup":`menu`,onClick:e=>{e.preventDefault(),e.stopPropagation(),V(e=>!e)},children:(0,v.jsx)(ge.default,{width:16,height:16,color:`currentColor`})}),B&&typeof document<`u`&&W&&y.default.createPortal((0,v.jsx)(`div`,{style:W,children:Ue}),document.body)]})]})}),(0,v.jsxs)(`div`,{ref:M,className:`ml-auto flex shrink-0 items-center gap-2`,children:[Ve&&C&&(0,v.jsx)(l.default,{handleStop:Re,handleResumeAgent:ze,disabled:e,isPausing:Be}),ye&&(0,v.jsx)(he.ChatSendButton,{buttonClassName:be,handleSubmit:xe,disabled:e||!b})]})]})}exports.ChatInputActions=b;
+const e=require(`../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../../i18n/declaration.cjs`),r=require(`../../../../types/agent-state.cjs`),i=require(`../../../../utils/utils.cjs`),a=require(`../../../../hooks/use-conversation-id.cjs`),o=require(`../../../../stores/conversation-store.cjs`),s=require(`../../../../contexts/active-backend-context.cjs`),c=require(`../../../../node_modules/lucide-react/dist/esm/icons/cpu.cjs`),ee=require(`../../../../constants/acp-providers.cjs`),te=require(`../../../../hooks/query/use-active-conversation.cjs`),ne=require(`../../../../hooks/use-agent-state.cjs`);require(`../../../../utils/form-control-classes.cjs`);const re=require(`../../../../hooks/use-unified-websocket-status.cjs`),ie=require(`../../controls/agent-status.cjs`),ae=require(`../../../../icons/lesson-plan.cjs`),l=require(`../../../../icons/code-pill.cjs`),u=require(`../../../../ui/context-menu.cjs`),d=require(`../../context-menu/context-menu-list-item.cjs`),oe=require(`../../../../hooks/use-click-outside-element.cjs`),se=require(`../../../../hooks/use-handle-plan-click.cjs`),ce=require(`../change-agent-button.cjs`),le=require(`../../../../hooks/use-acp-model-context.cjs`),ue=require(`../../../../icons/settings-gear.cjs`),de=require(`../../../shared/navigation-link.cjs`),fe=require(`../../../../ui/divider.cjs`),pe=require(`./chat-input-model.cjs`),f=require(`../switch-profile-button.cjs`),p=require(`../../../../hooks/mutation/use-unified-stop-conversation.cjs`),m=require(`../../../../icons/carret-right-fill.cjs`),h=require(`../../controls/tools-context-menu-icon-text.cjs`),me=require(`../chat-add-file-button.cjs`),he=require(`../chat-send-button.cjs`),ge=require(`../../../../icons/three-dots-vertical.cjs`),_e=require(`../../../../hooks/mutation/use-pause-conversation.cjs`),ve=require(`../../../../hooks/mutation/use-resume-conversation.cjs`);let g=require(`react`);g=e.__toESM(g,1);let _=require(`react/jsx-runtime`),v=require(`react-dom`);v=e.__toESM(v,1);function y({disabled:e,canSubmit:y=!0,onAddFileClick:ye=()=>{},showButton:be=!0,buttonClassName:xe=``,handleSubmit:Se=()=>{}}){let{t:b}=t.useTranslation(`openhands`),Ce=p.useUnifiedPauseConversation(),x=_e.usePauseConversation(),we=ve.useResumeConversation(),{conversationId:S}=a.useOptionalConversationId(),{data:C}=te.useActiveConversation(),{backend:Te}=s.useActiveBackend(),w=Te.kind===`cloud`,{isAcpContext:T,destinationPath:E,destinationLabel:D}=le.useAcpModelContext(),O=T?ee.labelForAcpModel(C?.acp_server,C?.llm_model)??C?.llm_model:C?.llm_model,k=w&&!!S,Ee=re.useUnifiedWebSocketStatus(),{curAgentState:A}=ne.useAgentState(),{conversationMode:De,setConversationMode:Oe}=o.useConversationStore(),{handlePlanClick:ke,isCreatingConversation:Ae}=se.useHandlePlanClick(),j=g.default.useRef(null),M=g.default.useRef(null),N=g.default.useRef(null),P=g.default.useRef(null),F=g.default.useRef(null),I=g.default.useRef(null),[L,je]=g.default.useState(1/0),[Me,Ne]=g.default.useState(0),[Pe,Fe]=g.default.useState(32),[R,Ie]=g.default.useState(96),[z,Le]=g.default.useState(120),[B,V]=g.default.useState(!1),[H,U]=g.default.useState(null),[W,Re]=g.default.useState();g.default.useEffect(()=>{let e=j.current,t=M.current,n=N.current,r=P.current,i=F.current;if(!e||!t||!n||!i||k&&!r||typeof ResizeObserver>`u`)return;let a=()=>{let a=e.getBoundingClientRect().width,o=t.getBoundingClientRect().width,s=n.getBoundingClientRect().width,c=i.getBoundingClientRect().width;if(a>0&&je(a),o>0&&Ne(o),s>0&&Fe(s),c>0&&Le(c),r){let e=r.getBoundingClientRect().width;e>0&&Ie(e)}},o=new ResizeObserver(()=>{a()});return o.observe(e),o.observe(t),o.observe(n),o.observe(i),r&&o.observe(r),a(),()=>o.disconnect()},[k]);let ze=()=>{S&&x.mutate({conversationId:S})},Be=()=>{S&&we.mutate({conversationId:S})},Ve=Ce.isPending||x.isPending,G=g.default.useCallback(e=>{let t=e,n={showCodeInline:!1,showModelInline:!1};return k&&t>=R&&(n.showCodeInline=!0,t-=R+12),t>=z&&(n.showModelInline=!0),n},[k,R,z]),K=L-Me-8-Pe-12,q=G(K),J=(!k||q.showCodeInline)&&q.showModelInline?q:G(K-28-12),Y=k?J.showCodeInline:!1,X=J.showModelInline,He=L>=360,Z=k&&!Y||!X;g.default.useEffect(()=>{Z||(V(!1),U(null))},[Z]);let Ue=oe.useClickOutsideElement(()=>{V(!1),U(null)}),Q=A===r.AgentState.RUNNING||Ae||Ee!==`OPEN`,$=()=>{U(null),V(!1)};g.default.useLayoutEffect(()=>{if(!B||!I.current)return;let e=I.current,t=()=>{let t=e.getBoundingClientRect();Re({position:`fixed`,top:t.top-8,left:t.left,transform:`translateY(-100%)`,zIndex:9999})};return t(),window.addEventListener(`resize`,t),window.addEventListener(`scroll`,t,!0),()=>{window.removeEventListener(`resize`,t),window.removeEventListener(`scroll`,t,!0)}},[B]);let We=(0,_.jsxs)(u.ContextMenu,{ref:Ue,testId:`chat-input-overflow-menu`,position:`top`,alignment:`left`,className:`!static !top-auto !bottom-auto !left-auto !right-auto !mt-0 overflow-visible min-w-[200px]`,children:[k&&!Y&&(0,_.jsxs)(`div`,{className:`relative group/overflow-agent`,children:[(0,_.jsx)(d.ContextMenuListItem,{testId:`overflow-agent-button`,onClick:()=>U(e=>e===`agent`?null:`agent`),isDisabled:Q,children:(0,_.jsx)(h.ToolsContextMenuIconText,{icon:(0,_.jsx)(l.CodePillIcon,{className:`h-[11px] w-[11px]`}),text:b(De===`code`?n.I18nKey.COMMON$CODE:n.I18nKey.COMMON$PLAN),rightIcon:(0,_.jsx)(m.default,{width:10,height:10})})}),!Q&&(0,_.jsx)(`div`,{className:i.cn(`absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]`,`group-hover/overflow-agent:opacity-100 group-hover/overflow-agent:visible group-hover/overflow-agent:pointer-events-auto`,`hover:opacity-100 hover:visible hover:pointer-events-auto`,H===`agent`&&`opacity-100 visible pointer-events-auto`),children:(0,_.jsxs)(u.ContextMenu,{testId:`overflow-agent-submenu`,className:`overflow-visible min-w-[195px] gap-0`,children:[(0,_.jsx)(d.ContextMenuListItem,{testId:`overflow-agent-code`,onClick:e=>{e.preventDefault(),e.stopPropagation(),Oe(`code`),$()},children:(0,_.jsx)(h.ToolsContextMenuIconText,{icon:(0,_.jsx)(l.CodePillIcon,{className:`h-[11px] w-[11px]`}),text:b(n.I18nKey.COMMON$CODE)})}),(0,_.jsx)(d.ContextMenuListItem,{testId:`overflow-agent-plan`,onClick:e=>{ke(e),$()},children:(0,_.jsx)(h.ToolsContextMenuIconText,{icon:(0,_.jsx)(ae.default,{width:16,height:16,color:`currentColor`}),text:b(n.I18nKey.COMMON$PLAN)})})]})})]}),!X&&(0,_.jsxs)(`div`,{className:`relative group/overflow-model`,children:[(0,_.jsx)(d.ContextMenuListItem,{testId:`overflow-model-button`,onClick:()=>U(e=>e===`model`?null:`model`),children:(0,_.jsx)(h.ToolsContextMenuIconText,{icon:(0,_.jsx)(c.Cpu,{width:16,height:16,strokeWidth:2,"aria-hidden":!0}),text:`Model`,rightIcon:(0,_.jsx)(m.default,{width:10,height:10})})}),(0,_.jsx)(`div`,{className:i.cn(`absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]`,`group-hover/overflow-model:opacity-100 group-hover/overflow-model:visible group-hover/overflow-model:pointer-events-auto`,`hover:opacity-100 hover:visible hover:pointer-events-auto`,H===`model`&&`opacity-100 visible pointer-events-auto`),children:(0,_.jsxs)(u.ContextMenu,{testId:`overflow-model-submenu`,className:`overflow-visible min-w-[220px] max-w-[320px] gap-0`,children:[(0,_.jsx)(`li`,{className:`text-sm`,children:(0,_.jsx)(`div`,{className:`p-2 leading-5 text-[var(--oh-foreground)] break-all`,children:O})}),(0,_.jsx)(fe.Divider,{inset:`menu`}),(0,_.jsx)(`li`,{className:`text-sm`,children:(0,_.jsxs)(de.NavigationLink,{to:E,onClick:$,className:i.cn(`group flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]`,`transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none`),children:[(0,_.jsx)(ue.default,{width:16,height:16,className:i.cn(`shrink-0 text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)]`,`transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none`),"aria-hidden":!0}),(0,_.jsx)(`span`,{children:D})]})})]})})]})]});return(0,_.jsxs)(`div`,{ref:j,className:`w-full min-w-0 flex items-center justify-between gap-2`,children:[(0,_.jsx)(`div`,{className:`flex min-w-0 items-center gap-1`,children:(0,_.jsxs)(`div`,{className:`flex min-w-0 items-center gap-3`,children:[(0,_.jsx)(`div`,{ref:N,className:i.cn(!1),children:(0,_.jsx)(me.ChatAddFileButton,{disabled:e,handleFileIconClick:ye})}),k&&(0,_.jsx)(`div`,{ref:P,className:i.cn(!Y&&`hidden`),children:(0,_.jsx)(ce.ChangeAgentButton,{})}),(0,_.jsx)(`div`,{ref:F,className:i.cn(!X&&`hidden`),children:w||T?(0,_.jsx)(pe.ChatInputModel,{}):(0,_.jsx)(f.SwitchProfileButton,{})}),Z&&(0,_.jsxs)(`div`,{className:`relative shrink-0`,children:[(0,_.jsx)(`button`,{ref:I,type:`button`,className:i.cn(`flex size-6 items-center justify-center rounded-full text-[var(--oh-muted)]`,`transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none`,`hover:bg-white/10 hover:text-white cursor-pointer`),"aria-label":`More input actions`,"aria-expanded":B,"aria-haspopup":`menu`,onClick:e=>{e.preventDefault(),e.stopPropagation(),V(e=>!e)},children:(0,_.jsx)(ge.default,{width:16,height:16,color:`currentColor`})}),B&&typeof document<`u`&&W&&v.default.createPortal((0,_.jsx)(`div`,{style:W,children:We}),document.body)]})]})}),(0,_.jsxs)(`div`,{ref:M,className:`ml-auto flex shrink-0 items-center gap-2`,children:[He&&S&&(0,_.jsx)(ie.default,{handleStop:ze,handleResumeAgent:Be,disabled:e,isPausing:Ve}),be&&(0,_.jsx)(he.ChatSendButton,{buttonClassName:xe,handleSubmit:Se,disabled:e||!y})]})]})}exports.ChatInputActions=y;
 //# sourceMappingURL=chat-input-actions.cjs.map