npm - @openhands/agent-canvas - Versions diffs - 1.1.0 → 1.2.0 - Mend

@openhands/agent-canvas 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1373) hide show

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

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

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

@@ -6,8 +6,8 @@ import { cn as i } from "../../../utils/utils.js";
 import { useConversationStore as a } from "../../../stores/conversation-store.js";
 import { isNoBackend as o } from "../../../api/backend-registry/active-store.js";
 import { useActiveBackendContext as s } from "../../../contexts/active-backend-context.js";
-import { StyledTooltip as ee } from "../../shared/buttons/styled-tooltip.js";
-import { formControlTransitionClassName as te } from "../../../utils/form-control-classes.js";
+import { formControlTransitionClassName as ee } from "../../../utils/form-control-classes.js";
+import { StyledTooltip as te } from "../../shared/buttons/styled-tooltip.js";
 import { dropdownFooterActionClassName as c, dropdownMenuListClassName as ne, dropdownMenuRowIconWrapperClassName as l } from "../../../utils/dropdown-classes.js";
 import { NavigationLink as re } from "../../shared/navigation-link.js";
 import { useAllCloudOrganizations as ie } from "../../../hooks/query/use-cloud-organizations.js";
@@ -187,7 +187,7 @@ function x({ openUpward: p = !1, hideTrigger: v = !1, defaultOpen: x = !1, onSel
 					options: U,
 					className: "h-10 px-2 py-0 bg-transparent border-transparent hover:bg-[var(--oh-surface-raised)] focus-within:bg-[var(--oh-surface-raised)] focus-within:border-transparent focus-within:ring-0"
 				}, `${K}-${q?.label ?? ""}`)
-			}), v ? null : /* @__PURE__ */ h(ee, {
+			}), v ? null : /* @__PURE__ */ h(te, {
 				content: Y,
 				placement: me,
 				offset: 10,
@@ -196,7 +196,7 @@ function x({ openUpward: p = !1, hideTrigger: v = !1, defaultOpen: x = !1, onSel
 					"data-testid": "backend-selector-settings-link",
 					"data-active": J,
 					"aria-label": Y,
-					className: i(J ? "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer" : "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer", te),
+					className: i(J ? "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer" : "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer", ee),
 					children: /* @__PURE__ */ h(r, {
 						width: 16,
 						height: 16

package/dist/components/features/backends/backend-version.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../node_modules/@openhands/typescript-client/dist/client/server-client.cjs`),r=require(`../../../api/agent-server-client-options.cjs`),i=require(`../../../api/agent-server-compatibility.cjs`),a=require(`../../../node_modules/@tanstack/react-query/build/modern/useQuery.cjs`);let o=require(`react/jsx-runtime`);function s({backend:s}){let{t:c}=e.useTranslation(`openhands`),{data:l}=a.useQuery({queryKey:[`backend-version`,s.host,s.apiKey],queryFn:async()=>i.getDisplayAgentServerVersion(await new n.ServerClient(r.getAgentServerClientOptions({host:s.host,sessionApiKey:s.apiKey||null,timeout:5e3})).getServerInfo()),retry:!1,staleTime:6e4,enabled:s.kind===`local`});return l?(0,o.jsx)(`span`,{className:`inline-flex shrink-0 items-center rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-1.5 py-0.5 text-[10px] font-medium leading-none text-[var(--oh-text-dim)]`,"data-testid":`manage-backends-version-${s.name}`,children:c(t.I18nKey.BACKEND$VERSION_LABEL,{version:l})}):null}exports.BackendVersion=s;
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../node_modules/@openhands/typescript-client/dist/client/server-client.cjs`);require(`../../../node_modules/@openhands/typescript-client/dist/clients.cjs`);const r=require(`../../../api/agent-server-client-options.cjs`),i=require(`../../../api/agent-server-compatibility.cjs`),a=require(`../../../node_modules/@tanstack/react-query/build/modern/useQuery.cjs`);let o=require(`react/jsx-runtime`);function s({backend:s}){let{t:c}=e.useTranslation(`openhands`),{data:l}=a.useQuery({queryKey:[`backend-version`,s.host,s.apiKey],queryFn:async()=>i.getDisplayAgentServerVersion(await new n.ServerClient(r.getAgentServerClientOptions({host:s.host,sessionApiKey:s.apiKey||null,timeout:5e3})).getServerInfo()),retry:!1,staleTime:6e4,enabled:s.kind===`local`});return l?(0,o.jsx)(`span`,{className:`inline-flex shrink-0 items-center rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-1.5 py-0.5 text-[10px] font-medium leading-none text-[var(--oh-text-dim)]`,"data-testid":`manage-backends-version-${s.name}`,children:c(t.I18nKey.BACKEND$VERSION_LABEL,{version:l})}):null}exports.BackendVersion=s;
 //# sourceMappingURL=backend-version.cjs.map

package/dist/components/features/backends/backend-version.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"backend-version.cjs","names":[],"sources":["../../../../src/components/features/backends/backend-version.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { useQuery } from \"@tanstack/react-query\";\n\nimport { ServerClient } from \"@openhands/typescript-client/clients\";\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { getAgentServerClientOptions } from \"#/api/agent-server-client-options\";\nimport { getDisplayAgentServerVersion } from \"#/api/agent-server-compatibility\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\nexport function BackendVersion({ backend }: { backend: Backend }) {\n const { t } = useTranslation(\"openhands\");\n const { data: version } = useQuery({\n queryKey: [\"backend-version\", backend.host, backend.apiKey],\n queryFn: async () => {\n const info = await new ServerClient(\n getAgentServerClientOptions({\n host: backend.host,\n sessionApiKey: backend.apiKey \|\| null,\n timeout: 5000,\n }),\n ).getServerInfo();\n return getDisplayAgentServerVersion(info);\n },\n retry: false,\n staleTime: 60_000,\n enabled: backend.kind === \"local\",\n });\n\n if (!version) return null;\n\n return (\n <span\n className=\"inline-flex shrink-0 items-center rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-1.5 py-0.5 text-[10px] font-medium leading-none text-[var(--oh-text-dim)]\"\n data-testid={`manage-backends-version-${backend.name}`}\n >\n {t(I18nKey.BACKEND$VERSION_LABEL, { version })}\n </span>\n );\n}\n"],"mappings":"~~ufASA~~,SAAgB,EAAe,CAAE,WAAiC,CAChE,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,KAAM,GAAY,EAAA,SAAS,CACjC,SAAU,CAAC,kBAAmB,EAAQ,KAAM,EAAQ,OAAO,CAC3D,QAAS,SAQA,EAAA,6BAA6B,MAPjB,IAAI,EAAA,aACrB,EAAA,4BAA4B,CAC1B,KAAM,EAAQ,KACd,cAAe,EAAQ,QAAU,KACjC,QAAS,IACV,CAAC,CACH,CAAC,eAAe,CACwB,CAE3C,MAAO,GACP,UAAW,IACX,QAAS,EAAQ,OAAS,QAC3B,CAAC,CAIF,OAFK,GAGH,EAAA,EAAA,KAAC,OAAD,CACE,UAAU,sLACV,cAAa,2BAA2B,EAAQ,gBAE/C,EAAE,EAAA,QAAQ,sBAAuB,CAAE,UAAS,CAAC,CACzC,CAAA,CARY"}
1	+ {"version":3,"file":"backend-version.cjs","names":[],"sources":["../../../../src/components/features/backends/backend-version.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { useQuery } from \"@tanstack/react-query\";\n\nimport { ServerClient } from \"@openhands/typescript-client/clients\";\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { getAgentServerClientOptions } from \"#/api/agent-server-client-options\";\nimport { getDisplayAgentServerVersion } from \"#/api/agent-server-compatibility\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\nexport function BackendVersion({ backend }: { backend: Backend }) {\n const { t } = useTranslation(\"openhands\");\n const { data: version } = useQuery({\n queryKey: [\"backend-version\", backend.host, backend.apiKey],\n queryFn: async () => {\n const info = await new ServerClient(\n getAgentServerClientOptions({\n host: backend.host,\n sessionApiKey: backend.apiKey \|\| null,\n timeout: 5000,\n }),\n ).getServerInfo();\n return getDisplayAgentServerVersion(info);\n },\n retry: false,\n staleTime: 60_000,\n enabled: backend.kind === \"local\",\n });\n\n if (!version) return null;\n\n return (\n <span\n className=\"inline-flex shrink-0 items-center rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-1.5 py-0.5 text-[10px] font-medium leading-none text-[var(--oh-text-dim)]\"\n data-testid={`manage-backends-version-${backend.name}`}\n >\n {t(I18nKey.BACKEND$VERSION_LABEL, { version })}\n </span>\n );\n}\n"],"mappings":"4kBASA,SAAgB,EAAe,CAAE,WAAiC,CAChE,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,KAAM,GAAY,EAAA,SAAS,CACjC,SAAU,CAAC,kBAAmB,EAAQ,KAAM,EAAQ,OAAO,CAC3D,QAAS,SAQA,EAAA,6BAA6B,MAPjB,IAAI,EAAA,aACrB,EAAA,4BAA4B,CAC1B,KAAM,EAAQ,KACd,cAAe,EAAQ,QAAU,KACjC,QAAS,IACV,CAAC,CACH,CAAC,eAAe,CACwB,CAE3C,MAAO,GACP,UAAW,IACX,QAAS,EAAQ,OAAS,QAC3B,CAAC,CAIF,OAFK,GAGH,EAAA,EAAA,KAAC,OAAD,CACE,UAAU,sLACV,cAAa,2BAA2B,EAAQ,gBAE/C,EAAE,EAAA,QAAQ,sBAAuB,CAAE,UAAS,CAAC,CACzC,CAAA,CARY"}

package/dist/components/features/backends/backend-version.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../i18n/declaration.js";
 import { ServerClient as n } from "../../../node_modules/@openhands/typescript-client/dist/client/server-client.js";
+import "../../../node_modules/@openhands/typescript-client/dist/clients.js";
 import { getAgentServerClientOptions as r } from "../../../api/agent-server-client-options.js";
 import { getDisplayAgentServerVersion as i } from "../../../api/agent-server-compatibility.js";
 import { useQuery as a } from "../../../node_modules/@tanstack/react-query/build/modern/useQuery.js";

package/dist/components/features/backends/backend-version.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"backend-version.js","names":[],"sources":["../../../../src/components/features/backends/backend-version.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { useQuery } from \"@tanstack/react-query\";\n\nimport { ServerClient } from \"@openhands/typescript-client/clients\";\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { getAgentServerClientOptions } from \"#/api/agent-server-client-options\";\nimport { getDisplayAgentServerVersion } from \"#/api/agent-server-compatibility\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\nexport function BackendVersion({ backend }: { backend: Backend }) {\n const { t } = useTranslation(\"openhands\");\n const { data: version } = useQuery({\n queryKey: [\"backend-version\", backend.host, backend.apiKey],\n queryFn: async () => {\n const info = await new ServerClient(\n getAgentServerClientOptions({\n host: backend.host,\n sessionApiKey: backend.apiKey \|\| null,\n timeout: 5000,\n }),\n ).getServerInfo();\n return getDisplayAgentServerVersion(info);\n },\n retry: false,\n staleTime: 60_000,\n enabled: backend.kind === \"local\",\n });\n\n if (!version) return null;\n\n return (\n <span\n className=\"inline-flex shrink-0 items-center rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-1.5 py-0.5 text-[10px] font-medium leading-none text-[var(--oh-text-dim)]\"\n data-testid={`manage-backends-version-${backend.name}`}\n >\n {t(I18nKey.BACKEND$VERSION_LABEL, { version })}\n </span>\n );\n}\n"],"mappings":"~~;;;;;;;;~~AASA,SAAgB,EAAe,EAAE,cAAiC;CAChE,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,MAAM,MAAY,EAAS;EACjC,UAAU;GAAC;GAAmB,EAAQ;GAAM,EAAQ;GAAO;EAC3D,SAAS,YAQA,EAA6B,MAPjB,IAAI,EACrB,EAA4B;GAC1B,MAAM,EAAQ;GACd,eAAe,EAAQ,UAAU;GACjC,SAAS;GACV,CAAC,CACH,CAAC,eAAe,CACwB;EAE3C,OAAO;EACP,WAAW;EACX,SAAS,EAAQ,SAAS;EAC3B,CAAC;AAIF,QAFK,IAGH,kBAAC,QAAD;EACE,WAAU;EACV,eAAa,2BAA2B,EAAQ;YAE/C,EAAE,EAAQ,uBAAuB,EAAE,YAAS,CAAC;EACzC,CAAA,GARY"}
1	+ {"version":3,"file":"backend-version.js","names":[],"sources":["../../../../src/components/features/backends/backend-version.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { useQuery } from \"@tanstack/react-query\";\n\nimport { ServerClient } from \"@openhands/typescript-client/clients\";\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { getAgentServerClientOptions } from \"#/api/agent-server-client-options\";\nimport { getDisplayAgentServerVersion } from \"#/api/agent-server-compatibility\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\nexport function BackendVersion({ backend }: { backend: Backend }) {\n const { t } = useTranslation(\"openhands\");\n const { data: version } = useQuery({\n queryKey: [\"backend-version\", backend.host, backend.apiKey],\n queryFn: async () => {\n const info = await new ServerClient(\n getAgentServerClientOptions({\n host: backend.host,\n sessionApiKey: backend.apiKey \|\| null,\n timeout: 5000,\n }),\n ).getServerInfo();\n return getDisplayAgentServerVersion(info);\n },\n retry: false,\n staleTime: 60_000,\n enabled: backend.kind === \"local\",\n });\n\n if (!version) return null;\n\n return (\n <span\n className=\"inline-flex shrink-0 items-center rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-1.5 py-0.5 text-[10px] font-medium leading-none text-[var(--oh-text-dim)]\"\n data-testid={`manage-backends-version-${backend.name}`}\n >\n {t(I18nKey.BACKEND$VERSION_LABEL, { version })}\n </span>\n );\n}\n"],"mappings":";;;;;;;;;AASA,SAAgB,EAAe,EAAE,cAAiC;CAChE,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,MAAM,MAAY,EAAS;EACjC,UAAU;GAAC;GAAmB,EAAQ;GAAM,EAAQ;GAAO;EAC3D,SAAS,YAQA,EAA6B,MAPjB,IAAI,EACrB,EAA4B;GAC1B,MAAM,EAAQ;GACd,eAAe,EAAQ,UAAU;GACjC,SAAS;GACV,CAAC,CACH,CAAC,eAAe,CACwB;EAE3C,OAAO;EACP,WAAW;EACX,SAAS,EAAQ,SAAS;EAC3B,CAAC;AAIF,QAFK,IAGH,kBAAC,QAAD;EACE,WAAU;EACV,eAAa,2BAA2B,EAAQ;YAE/C,EAAE,EAAQ,uBAAuB,EAAE,YAAS,CAAC;EACzC,CAAA,GARY"}

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

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

package/dist/components/features/backends/manage-backends-modal.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"manage-backends-modal.cjs","names":[],"sources":["../../../../src/components/features/backends/manage-backends-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Plus } from \"lucide-react\";\n\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport {\n MODAL_MAX_WIDTH_VIEWPORT,\n modalWidthClassName,\n} from \"#/components/shared/modals/modal-body\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendRow } from \"./backend-row\";\n\ninterface ManageBackendsModalProps {\n onClose: () => void;\n /*\n Recovery mode is used by the root unavailable-backend gate. There is no\n * app shell behind the modal, so dismiss controls would be misleading.\n */\n recoveryMode?: boolean;\n}\n\ninterface PendingRemoval {\n id: string;\n name: string;\n}\n\nexport function ManageBackendsModal({\n onClose,\n recoveryMode = false,\n}: ManageBackendsModalProps) {\n const { t } = useTranslation(\"openhands\");\n const { backends, active, removeBackend, setActive, updateBackend } =\n useActiveBackendContext();\n const healthByBackendId = useBackendsHealth(backends, {\n probeDisabledOnce: true,\n });\n const [pendingRemoval, setPendingRemoval] =\n React.useState<PendingRemoval \| null>(null);\n const [editingBackend, setEditingBackend] = React.useState<Backend \| null>(\n null,\n );\n const [showAddForm, setShowAddForm] = React.useState(false);\n\n const handleConfirmRemoval = () => {\n if (!pendingRemoval) return;\n removeBackend(pendingRemoval.id);\n setPendingRemoval(null);\n };\n\n const handleSelectBackend = React.useCallback(\n (backend: Backend) => {\n if (active.backend.id !== backend.id \|\| active.orgId !== null) {\n setActive(backend.id);\n }\n onClose();\n },\n [active.backend.id, active.orgId, onClose, setActive],\n );\n\n const handleCloudLogin = React.useCallback(\n (backend: Backend, apiKey: string) => {\n updateBackend(backend.id, { apiKey });\n },\n [updateBackend],\n );\n\n return (\n <>\n <ModalBackdrop\n onClose={recoveryMode ? undefined : onClose}\n closeOnEscape={!recoveryMode}\n closeOnBackdropClick={!recoveryMode}\n aria-label={t(I18nKey.BACKEND$MANAGE_TITLE)}\n >\n <div\n data-testid=\"manage-backends-modal\"\n className={cn(\n \"relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl\",\n modalWidthClassName(\"lg\"),\n MODAL_MAX_WIDTH_VIEWPORT,\n \"max-h-[70vh]\",\n )}\n >\n {recoveryMode ? null : (\n <ModalCloseButton\n onClose={onClose}\n testId=\"close-manage-backends-modal\"\n />\n )}\n <div className={cn(\"p-5\", !recoveryMode && \"pr-12\")}>\n <h2 className={modalTitleLgClassName}>\n {t(I18nKey.BACKEND$MANAGE_TITLE)}\n </h2>\n </div>\n\n <div className=\"flex min-h-0 flex-1 flex-col px-5\">\n <div\n className=\"flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\"\n data-testid=\"manage-backends-list\"\n >\n {backends.length === 0 ? (\n <p className=\"px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]\">\n {t(I18nKey.BACKEND$MANAGE_EMPTY)}\n </p>\n ) : (\n <ul className=\"divide-y divide-[var(--oh-border)]\">\n {backends.map((backend) => (\n <BackendRow\n key={backend.id}\n backend={backend}\n health={healthByBackendId[backend.id]}\n onSelect={() => handleSelectBackend(backend)}\n onEdit={() => setEditingBackend(backend)}\n onRemove={() =>\n setPendingRemoval({\n id: backend.id,\n name: backend.name,\n })\n }\n onLogin={(apiKey) => handleCloudLogin(backend, apiKey)}\n />\n ))}\n </ul>\n )}\n </div>\n </div>\n\n <div className=\"flex justify-end gap-2 p-5\">\n <BrandButton\n type=\"button\"\n variant={recoveryMode ? \"primary\" : \"secondary\"}\n onClick={() => setShowAddForm(true)}\n testId=\"manage-backends-add\"\n startContent={<Plus width={14} height={14} />}\n >\n {t(I18nKey.BACKEND$ADD)}\n </BrandButton>\n {recoveryMode ? null : (\n <BrandButton\n type=\"button\"\n variant=\"primary\"\n onClick={onClose}\n testId=\"manage-backends-done\"\n >\n {t(I18nKey.HOME$DONE)}\n </BrandButton>\n )}\n </div>\n </div>\n </ModalBackdrop>\n\n {showAddForm ? (\n <BackendFormModal mode=\"add\" onClose={() => setShowAddForm(false)} />\n ) : null}\n\n {editingBackend ? (\n <BackendFormModal\n mode=\"edit\"\n backend={editingBackend}\n onClose={() => setEditingBackend(null)}\n />\n ) : null}\n\n {pendingRemoval ? (\n <ConfirmationModal\n text={t(I18nKey.BACKEND$REMOVE_CONFIRMATION, {\n name: pendingRemoval.name,\n })}\n onConfirm={handleConfirmRemoval}\n onCancel={() => setPendingRemoval(null)}\n />\n ) : null}\n </>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"manage-backends-modal.cjs","names":[],"sources":["../../../../src/components/features/backends/manage-backends-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Plus } from \"lucide-react\";\n\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport {\n MODAL_MAX_WIDTH_VIEWPORT,\n modalWidthClassName,\n} from \"#/components/shared/modals/modal-body\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendRow } from \"./backend-row\";\n\ninterface ManageBackendsModalProps {\n onClose: () => void;\n /*\n Recovery mode is used by the root unavailable-backend gate. There is no\n * app shell behind the modal, so dismiss controls would be misleading.\n /\n recoveryMode?: boolean;\n}\n\ninterface PendingRemoval {\n id: string;\n name: string;\n}\n\n/\n Resolve the connected organization label for a backend row, mirroring the\n * per-org labelling used by the backend selector. Cloud API keys are bound to\n * a single org (legacy keys may expose several, joined here); local backends\n * and unresolved/errored lookups yield no label.\n */\nfunction resolveBackendOrgLabel(\n backend: Backend,\n cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n personalWorkspaceLabel: string,\n): string \| undefined {\n if (backend.kind !== \"cloud\") return undefined;\n const entry = cloudOrgs[backend.id];\n if (!entry \|\| entry.orgs.length === 0) return undefined;\n const userId = currentUserIds[backend.id]?.userId ?? null;\n return entry.orgs\n .map((org) =>\n !!userId && userId === org.id ? personalWorkspaceLabel : org.name,\n )\n .join(\", \");\n}\n\nexport function ManageBackendsModal({\n onClose,\n recoveryMode = false,\n}: ManageBackendsModalProps) {\n const { t } = useTranslation(\"openhands\");\n const { backends, active, removeBackend, setActive, updateBackend } =\n useActiveBackendContext();\n const healthByBackendId = useBackendsHealth(backends, {\n probeDisabledOnce: true,\n });\n const cloudOrgs = useAllCloudOrganizations();\n const currentUserIds = useCloudCurrentUserId();\n const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n const [pendingRemoval, setPendingRemoval] =\n React.useState<PendingRemoval \| null>(null);\n const [editingBackend, setEditingBackend] = React.useState<Backend \| null>(\n null,\n );\n const [showAddForm, setShowAddForm] = React.useState(false);\n\n const handleConfirmRemoval = () => {\n if (!pendingRemoval) return;\n removeBackend(pendingRemoval.id);\n setPendingRemoval(null);\n };\n\n const handleSelectBackend = React.useCallback(\n (backend: Backend) => {\n if (active.backend.id !== backend.id \|\| active.orgId !== null) {\n setActive(backend.id);\n }\n onClose();\n },\n [active.backend.id, active.orgId, onClose, setActive],\n );\n\n const handleCloudLogin = React.useCallback(\n (backend: Backend, apiKey: string) => {\n updateBackend(backend.id, { apiKey });\n },\n [updateBackend],\n );\n\n return (\n <>\n <ModalBackdrop\n onClose={recoveryMode ? undefined : onClose}\n closeOnEscape={!recoveryMode}\n closeOnBackdropClick={!recoveryMode}\n aria-label={t(I18nKey.BACKEND$MANAGE_TITLE)}\n >\n <div\n data-testid=\"manage-backends-modal\"\n className={cn(\n \"relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl\",\n modalWidthClassName(\"lg\"),\n MODAL_MAX_WIDTH_VIEWPORT,\n \"max-h-[70vh]\",\n )}\n >\n {recoveryMode ? null : (\n <ModalCloseButton\n onClose={onClose}\n testId=\"close-manage-backends-modal\"\n />\n )}\n <div className={cn(\"p-5\", !recoveryMode && \"pr-12\")}>\n <h2 className={modalTitleLgClassName}>\n {t(I18nKey.BACKEND$MANAGE_TITLE)}\n </h2>\n </div>\n\n <div className=\"flex min-h-0 flex-1 flex-col px-5\">\n <div\n className=\"flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\"\n data-testid=\"manage-backends-list\"\n >\n {backends.length === 0 ? (\n <p className=\"px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]\">\n {t(I18nKey.BACKEND$MANAGE_EMPTY)}\n </p>\n ) : (\n <ul className=\"divide-y divide-[var(--oh-border)]\">\n {backends.map((backend) => (\n <BackendRow\n key={backend.id}\n backend={backend}\n health={healthByBackendId[backend.id]}\n orgLabel={resolveBackendOrgLabel(\n backend,\n cloudOrgs,\n currentUserIds,\n personalWorkspaceLabel,\n )}\n onSelect={() => handleSelectBackend(backend)}\n onEdit={() => setEditingBackend(backend)}\n onRemove={() =>\n setPendingRemoval({\n id: backend.id,\n name: backend.name,\n })\n }\n onLogin={(apiKey) => handleCloudLogin(backend, apiKey)}\n />\n ))}\n </ul>\n )}\n </div>\n </div>\n\n <div className=\"flex justify-end gap-2 p-5\">\n <BrandButton\n type=\"button\"\n variant={recoveryMode ? \"primary\" : \"secondary\"}\n onClick={() => setShowAddForm(true)}\n testId=\"manage-backends-add\"\n startContent={<Plus width={14} height={14} />}\n >\n {t(I18nKey.BACKEND$ADD)}\n </BrandButton>\n {recoveryMode ? null : (\n <BrandButton\n type=\"button\"\n variant=\"primary\"\n onClick={onClose}\n testId=\"manage-backends-done\"\n >\n {t(I18nKey.HOME$DONE)}\n </BrandButton>\n )}\n </div>\n </div>\n </ModalBackdrop>\n\n {showAddForm ? (\n <BackendFormModal\n mode=\"add\"\n source=\"manage_backends_modal\"\n onClose={() => setShowAddForm(false)}\n />\n ) : null}\n\n {editingBackend ? (\n <BackendFormModal\n mode=\"edit\"\n backend={editingBackend}\n onClose={() => setEditingBackend(null)}\n />\n ) : null}\n\n {pendingRemoval ? (\n <ConfirmationModal\n text={t(I18nKey.BACKEND$REMOVE_CONFIRMATION, {\n name: pendingRemoval.name,\n })}\n onConfirm={handleConfirmRemoval}\n onCancel={() => setPendingRemoval(null)}\n />\n ) : null}\n </>\n );\n}\n"],"mappings":"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"}

package/dist/components/features/backends/manage-backends-modal.js CHANGED Viewed

@@ -8,111 +8,122 @@ import { MODAL_MAX_WIDTH_VIEWPORT as o, modalWidthClassName as s } from "../../s
 import { modalTitleLgClassName as c } from "../../../utils/modal-classes.js";
 import { ModalCloseButton as l } from "../../shared/modals/modal-close-button.js";
 import { BrandButton as u } from "../settings/brand-button.js";
-import { ConfirmationModal as d } from "../../shared/modals/confirmation-modal.js";
-import { useBackendsHealth as f } from "../../../hooks/query/use-backends-health.js";
-import { BackendFormModal as p } from "./backend-form-modal.js";
-import { BackendRow as m } from "./backend-row.js";
-import h from "react";
-import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useAllCloudOrganizations as d } from "../../../hooks/query/use-cloud-organizations.js";
+import { useCloudCurrentUserId as f } from "../../../hooks/query/use-cloud-current-user-id.js";
+import { ConfirmationModal as p } from "../../shared/modals/confirmation-modal.js";
+import { useBackendsHealth as m } from "../../../hooks/query/use-backends-health.js";
+import { BackendFormModal as h } from "./backend-form-modal.js";
+import { BackendRow as g } from "./backend-row.js";
+import _ from "react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
 //#region src/components/features/backends/manage-backends-modal.tsx
-function y({ onClose: y, recoveryMode: b = !1 }) {
-	let { t: x } = e("openhands"), { backends: S, active: C, removeBackend: w, setActive: T, updateBackend: E } = i(), D = f(S, { probeDisabledOnce: !0 }), [O, k] = h.useState(null), [A, j] = h.useState(null), [M, N] = h.useState(!1), P = () => {
-		O && (w(O.id), k(null));
-	}, F = h.useCallback((e) => {
-		(C.backend.id !== e.id || C.orgId !== null) && T(e.id), y();
+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: S, recoveryMode: C = !1 }) {
+	let { t: w } = e("openhands"), { backends: T, active: E, removeBackend: D, setActive: O, updateBackend: k } = i(), A = m(T, { probeDisabledOnce: !0 }), j = d(), M = f(), N = w(t.BACKEND$PERSONAL_WORKSPACE), [P, F] = _.useState(null), [I, L] = _.useState(null), [R, z] = _.useState(!1), B = () => {
+		P && (D(P.id), F(null));
+	}, V = _.useCallback((e) => {
+		(E.backend.id !== e.id || E.orgId !== null) && O(e.id), S();
 	}, [
-		C.backend.id,
-		C.orgId,
-		y,
-		T
-	]), I = h.useCallback((e, t) => {
-		E(e.id, { apiKey: t });
-	}, [E]);
-	return /* @__PURE__ */ v(g, { children: [
-		/* @__PURE__ */ _(a, {
-			onClose: b ? void 0 : y,
-			closeOnEscape: !b,
-			closeOnBackdropClick: !b,
-			"aria-label": x(t.BACKEND$MANAGE_TITLE),
-			children: /* @__PURE__ */ v("div", {
+		E.backend.id,
+		E.orgId,
+		S,
+		O
+	]), H = _.useCallback((e, t) => {
+		k(e.id, { apiKey: t });
+	}, [k]);
+	return /* @__PURE__ */ b(v, { children: [
+		/* @__PURE__ */ y(a, {
+			onClose: C ? void 0 : S,
+			closeOnEscape: !C,
+			closeOnBackdropClick: !C,
+			"aria-label": w(t.BACKEND$MANAGE_TITLE),
+			children: /* @__PURE__ */ b("div", {
 				"data-testid": "manage-backends-modal",
 				className: r("relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl", s("lg"), o, "max-h-[70vh]"),
 				children: [
-					b ? null : /* @__PURE__ */ _(l, {
-						onClose: y,
+					C ? null : /* @__PURE__ */ y(l, {
+						onClose: S,
 						testId: "close-manage-backends-modal"
 					}),
-					/* @__PURE__ */ _("div", {
-						className: r("p-5", !b && "pr-12"),
-						children: /* @__PURE__ */ _("h2", {
+					/* @__PURE__ */ y("div", {
+						className: r("p-5", !C && "pr-12"),
+						children: /* @__PURE__ */ y("h2", {
 							className: c,
-							children: x(t.BACKEND$MANAGE_TITLE)
+							children: w(t.BACKEND$MANAGE_TITLE)
 						})
 					}),
-					/* @__PURE__ */ _("div", {
+					/* @__PURE__ */ y("div", {
 						className: "flex min-h-0 flex-1 flex-col px-5",
-						children: /* @__PURE__ */ _("div", {
+						children: /* @__PURE__ */ y("div", {
 							className: "flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always",
 							"data-testid": "manage-backends-list",
-							children: S.length === 0 ? /* @__PURE__ */ _("p", {
+							children: T.length === 0 ? /* @__PURE__ */ y("p", {
 								className: "px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]",
-								children: x(t.BACKEND$MANAGE_EMPTY)
-							}) : /* @__PURE__ */ _("ul", {
+								children: w(t.BACKEND$MANAGE_EMPTY)
+							}) : /* @__PURE__ */ y("ul", {
 								className: "divide-y divide-[var(--oh-border)]",
-								children: S.map((e) => /* @__PURE__ */ _(m, {
+								children: T.map((e) => /* @__PURE__ */ y(g, {
 									backend: e,
-									health: D[e.id],
-									onSelect: () => F(e),
-									onEdit: () => j(e),
-									onRemove: () => k({
+									health: A[e.id],
+									orgLabel: x(e, j, M, N),
+									onSelect: () => V(e),
+									onEdit: () => L(e),
+									onRemove: () => F({
 										id: e.id,
 										name: e.name
 									}),
-									onLogin: (t) => I(e, t)
+									onLogin: (t) => H(e, t)
 								}, e.id))
 							})
 						})
 					}),
-					/* @__PURE__ */ v("div", {
+					/* @__PURE__ */ b("div", {
 						className: "flex justify-end gap-2 p-5",
-						children: [/* @__PURE__ */ _(u, {
+						children: [/* @__PURE__ */ y(u, {
 							type: "button",
-							variant: b ? "primary" : "secondary",
-							onClick: () => N(!0),
+							variant: C ? "primary" : "secondary",
+							onClick: () => z(!0),
 							testId: "manage-backends-add",
-							startContent: /* @__PURE__ */ _(n, {
+							startContent: /* @__PURE__ */ y(n, {
 								width: 14,
 								height: 14
 							}),
-							children: x(t.BACKEND$ADD)
-						}), b ? null : /* @__PURE__ */ _(u, {
+							children: w(t.BACKEND$ADD)
+						}), C ? null : /* @__PURE__ */ y(u, {
 							type: "button",
 							variant: "primary",
-							onClick: y,
+							onClick: S,
 							testId: "manage-backends-done",
-							children: x(t.HOME$DONE)
+							children: w(t.HOME$DONE)
 						})]
 					})
 				]
 			})
 		}),
-		M ? /* @__PURE__ */ _(p, {
+		R ? /* @__PURE__ */ y(h, {
 			mode: "add",
-			onClose: () => N(!1)
+			source: "manage_backends_modal",
+			onClose: () => z(!1)
 		}) : null,
-		A ? /* @__PURE__ */ _(p, {
+		I ? /* @__PURE__ */ y(h, {
 			mode: "edit",
-			backend: A,
-			onClose: () => j(null)
+			backend: I,
+			onClose: () => L(null)
 		}) : null,
-		O ? /* @__PURE__ */ _(d, {
-			text: x(t.BACKEND$REMOVE_CONFIRMATION, { name: O.name }),
-			onConfirm: P,
-			onCancel: () => k(null)
+		P ? /* @__PURE__ */ y(p, {
+			text: w(t.BACKEND$REMOVE_CONFIRMATION, { name: P.name }),
+			onConfirm: B,
+			onCancel: () => F(null)
 		}) : null
 	] });
 }
 //#endregion
-export { y as ManageBackendsModal };
+export { S as ManageBackendsModal };
 //# sourceMappingURL=manage-backends-modal.js.map

package/dist/components/features/backends/manage-backends-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"manage-backends-modal.js","names":[],"sources":["../../../../src/components/features/backends/manage-backends-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Plus } from \"lucide-react\";\n\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport {\n MODAL_MAX_WIDTH_VIEWPORT,\n modalWidthClassName,\n} from \"#/components/shared/modals/modal-body\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendRow } from \"./backend-row\";\n\ninterface ManageBackendsModalProps {\n onClose: () => void;\n /*\n Recovery mode is used by the root unavailable-backend gate. There is no\n * app shell behind the modal, so dismiss controls would be misleading.\n */\n recoveryMode?: boolean;\n}\n\ninterface PendingRemoval {\n id: string;\n name: string;\n}\n\nexport function ManageBackendsModal({\n onClose,\n recoveryMode = false,\n}: ManageBackendsModalProps) {\n const { t } = useTranslation(\"openhands\");\n const { backends, active, removeBackend, setActive, updateBackend } =\n useActiveBackendContext();\n const healthByBackendId = useBackendsHealth(backends, {\n probeDisabledOnce: true,\n });\n const [pendingRemoval, setPendingRemoval] =\n React.useState<PendingRemoval \| null>(null);\n const [editingBackend, setEditingBackend] = React.useState<Backend \| null>(\n null,\n );\n const [showAddForm, setShowAddForm] = React.useState(false);\n\n const handleConfirmRemoval = () => {\n if (!pendingRemoval) return;\n removeBackend(pendingRemoval.id);\n setPendingRemoval(null);\n };\n\n const handleSelectBackend = React.useCallback(\n (backend: Backend) => {\n if (active.backend.id !== backend.id \|\| active.orgId !== null) {\n setActive(backend.id);\n }\n onClose();\n },\n [active.backend.id, active.orgId, onClose, setActive],\n );\n\n const handleCloudLogin = React.useCallback(\n (backend: Backend, apiKey: string) => {\n updateBackend(backend.id, { apiKey });\n },\n [updateBackend],\n );\n\n return (\n <>\n <ModalBackdrop\n onClose={recoveryMode ? undefined : onClose}\n closeOnEscape={!recoveryMode}\n closeOnBackdropClick={!recoveryMode}\n aria-label={t(I18nKey.BACKEND$MANAGE_TITLE)}\n >\n <div\n data-testid=\"manage-backends-modal\"\n className={cn(\n \"relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl\",\n modalWidthClassName(\"lg\"),\n MODAL_MAX_WIDTH_VIEWPORT,\n \"max-h-[70vh]\",\n )}\n >\n {recoveryMode ? null : (\n <ModalCloseButton\n onClose={onClose}\n testId=\"close-manage-backends-modal\"\n />\n )}\n <div className={cn(\"p-5\", !recoveryMode && \"pr-12\")}>\n <h2 className={modalTitleLgClassName}>\n {t(I18nKey.BACKEND$MANAGE_TITLE)}\n </h2>\n </div>\n\n <div className=\"flex min-h-0 flex-1 flex-col px-5\">\n <div\n className=\"flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\"\n data-testid=\"manage-backends-list\"\n >\n {backends.length === 0 ? (\n <p className=\"px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]\">\n {t(I18nKey.BACKEND$MANAGE_EMPTY)}\n </p>\n ) : (\n <ul className=\"divide-y divide-[var(--oh-border)]\">\n {backends.map((backend) => (\n <BackendRow\n key={backend.id}\n backend={backend}\n health={healthByBackendId[backend.id]}\n onSelect={() => handleSelectBackend(backend)}\n onEdit={() => setEditingBackend(backend)}\n onRemove={() =>\n setPendingRemoval({\n id: backend.id,\n name: backend.name,\n })\n }\n onLogin={(apiKey) => handleCloudLogin(backend, apiKey)}\n />\n ))}\n </ul>\n )}\n </div>\n </div>\n\n <div className=\"flex justify-end gap-2 p-5\">\n <BrandButton\n type=\"button\"\n variant={recoveryMode ? \"primary\" : \"secondary\"}\n onClick={() => setShowAddForm(true)}\n testId=\"manage-backends-add\"\n startContent={<Plus width={14} height={14} />}\n >\n {t(I18nKey.BACKEND$ADD)}\n </BrandButton>\n {recoveryMode ? null : (\n <BrandButton\n type=\"button\"\n variant=\"primary\"\n onClick={onClose}\n testId=\"manage-backends-done\"\n >\n {t(I18nKey.HOME$DONE)}\n </BrandButton>\n )}\n </div>\n </div>\n </ModalBackdrop>\n\n {showAddForm ? (\n <BackendFormModal mode=\"add\" onClose={() => setShowAddForm(false)} />\n ) : null}\n\n {editingBackend ? (\n <BackendFormModal\n mode=\"edit\"\n backend={editingBackend}\n onClose={() => setEditingBackend(null)}\n />\n ) : null}\n\n {pendingRemoval ? (\n <ConfirmationModal\n text={t(I18nKey.BACKEND$REMOVE_CONFIRMATION, {\n name: pendingRemoval.name,\n })}\n onConfirm={handleConfirmRemoval}\n onCancel={() => setPendingRemoval(null)}\n />\n ) : null}\n </>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAmCA,SAAgB,EAAoB,EAClC,YACA,kBAAe,MACY;CAC3B,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,aAAU,WAAQ,kBAAe,cAAW,qBAClD,GAAyB,EACrB,IAAoB,EAAkB,GAAU,EACpD,mBAAmB,IACpB,CAAC,EACI,CAAC,GAAgB,KACrB,EAAM,SAAgC,KAAK,EACvC,CAAC,GAAgB,KAAqB,EAAM,SAChD,KACD,EACK,CAAC,GAAa,KAAkB,EAAM,SAAS,GAAM,EAErD,UAA6B;AAC5B,QACL,EAAc,EAAe,GAAG,EAChC,EAAkB,KAAK;IAGnB,IAAsB,EAAM,aAC/B,MAAqB;AAIpB,GAHI,EAAO,QAAQ,OAAO,EAAQ,MAAM,EAAO,UAAU,SACvD,EAAU,EAAQ,GAAG,EAEvB,GAAS;IAEX;EAAC,EAAO,QAAQ;EAAI,EAAO;EAAO;EAAS;EAAU,CACtD,EAEK,IAAmB,EAAM,aAC5B,GAAkB,MAAmB;AACpC,IAAc,EAAQ,IAAI,EAAE,WAAQ,CAAC;IAEvC,CAAC,EAAc,CAChB;AAED,QACE,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GACE,SAAS,IAAe,KAAA,IAAY;GACpC,eAAe,CAAC;GAChB,sBAAsB,CAAC;GACvB,cAAY,EAAE,EAAQ,qBAAqB;aAE3C,kBAAC,OAAD;IACE,eAAY;IACZ,WAAW,EACT,6FACA,EAAoB,KAAK,EACzB,GACA,eACD;cAPH;KASG,IAAe,OACd,kBAAC,GAAD;MACW;MACT,QAAO;MACP,CAAA;KAEJ,kBAAC,OAAD;MAAK,WAAW,EAAG,OAAO,CAAC,KAAgB,QAAQ;gBACjD,kBAAC,MAAD;OAAI,WAAW;iBACZ,EAAE,EAAQ,qBAAqB;OAC7B,CAAA;MACD,CAAA;KAEN,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,OAAD;OACE,WAAU;OACV,eAAY;iBAEX,EAAS,WAAW,IACnB,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAE,EAAQ,qBAAqB;QAC9B,CAAA,GAEJ,kBAAC,MAAD;QAAI,WAAU;kBACX,EAAS,KAAK,MACb,kBAAC,GAAD;SAEW;SACT,QAAQ,EAAkB,EAAQ;SAClC,gBAAgB,EAAoB,EAAQ;SAC5C,cAAc,EAAkB,EAAQ;SACxC,gBACE,EAAkB;UAChB,IAAI,EAAQ;UACZ,MAAM,EAAQ;UACf,CAAC;SAEJ,UAAU,MAAW,EAAiB,GAAS,EAAO;SACtD,EAZK,EAAQ,GAYb,CACF;QACC,CAAA;OAEH,CAAA;MACF,CAAA;KAEN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD;OACE,MAAK;OACL,SAAS,IAAe,YAAY;OACpC,eAAe,EAAe,GAAK;OACnC,QAAO;OACP,cAAc,kBAAC,GAAD;QAAM,OAAO;QAAI,QAAQ;QAAM,CAAA;iBAE5C,EAAE,EAAQ,YAAY;OACX,CAAA,EACb,IAAe,OACd,kBAAC,GAAD;OACE,MAAK;OACL,SAAQ;OACR,SAAS;OACT,QAAO;iBAEN,EAAE,EAAQ,UAAU;OACT,CAAA,CAEZ;;KACF;;GACQ,CAAA;EAEf,IACC,kBAAC,GAAD;GAAkB,MAAK;GAAM,eAAe,EAAe,GAAM;GAAI,CAAA,GACnE;EAEH,IACC,kBAAC,GAAD;GACE,MAAK;GACL,SAAS;GACT,eAAe,EAAkB,KAAK;GACtC,CAAA,GACA;EAEH,IACC,kBAAC,GAAD;GACE,MAAM,EAAE,EAAQ,6BAA6B,EAC3C,MAAM,EAAe,MACtB,CAAC;GACF,WAAW;GACX,gBAAgB,EAAkB,KAAK;GACvC,CAAA,GACA;EACH,EAAA,CAAA"}
1	+ {"version":3,"file":"manage-backends-modal.js","names":[],"sources":["../../../../src/components/features/backends/manage-backends-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Plus } from \"lucide-react\";\n\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport {\n MODAL_MAX_WIDTH_VIEWPORT,\n modalWidthClassName,\n} from \"#/components/shared/modals/modal-body\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendRow } from \"./backend-row\";\n\ninterface ManageBackendsModalProps {\n onClose: () => void;\n /*\n Recovery mode is used by the root unavailable-backend gate. There is no\n * app shell behind the modal, so dismiss controls would be misleading.\n /\n recoveryMode?: boolean;\n}\n\ninterface PendingRemoval {\n id: string;\n name: string;\n}\n\n/\n Resolve the connected organization label for a backend row, mirroring the\n * per-org labelling used by the backend selector. Cloud API keys are bound to\n * a single org (legacy keys may expose several, joined here); local backends\n * and unresolved/errored lookups yield no label.\n */\nfunction resolveBackendOrgLabel(\n backend: Backend,\n cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n personalWorkspaceLabel: string,\n): string \| undefined {\n if (backend.kind !== \"cloud\") return undefined;\n const entry = cloudOrgs[backend.id];\n if (!entry \|\| entry.orgs.length === 0) return undefined;\n const userId = currentUserIds[backend.id]?.userId ?? null;\n return entry.orgs\n .map((org) =>\n !!userId && userId === org.id ? personalWorkspaceLabel : org.name,\n )\n .join(\", \");\n}\n\nexport function ManageBackendsModal({\n onClose,\n recoveryMode = false,\n}: ManageBackendsModalProps) {\n const { t } = useTranslation(\"openhands\");\n const { backends, active, removeBackend, setActive, updateBackend } =\n useActiveBackendContext();\n const healthByBackendId = useBackendsHealth(backends, {\n probeDisabledOnce: true,\n });\n const cloudOrgs = useAllCloudOrganizations();\n const currentUserIds = useCloudCurrentUserId();\n const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n const [pendingRemoval, setPendingRemoval] =\n React.useState<PendingRemoval \| null>(null);\n const [editingBackend, setEditingBackend] = React.useState<Backend \| null>(\n null,\n );\n const [showAddForm, setShowAddForm] = React.useState(false);\n\n const handleConfirmRemoval = () => {\n if (!pendingRemoval) return;\n removeBackend(pendingRemoval.id);\n setPendingRemoval(null);\n };\n\n const handleSelectBackend = React.useCallback(\n (backend: Backend) => {\n if (active.backend.id !== backend.id \|\| active.orgId !== null) {\n setActive(backend.id);\n }\n onClose();\n },\n [active.backend.id, active.orgId, onClose, setActive],\n );\n\n const handleCloudLogin = React.useCallback(\n (backend: Backend, apiKey: string) => {\n updateBackend(backend.id, { apiKey });\n },\n [updateBackend],\n );\n\n return (\n <>\n <ModalBackdrop\n onClose={recoveryMode ? undefined : onClose}\n closeOnEscape={!recoveryMode}\n closeOnBackdropClick={!recoveryMode}\n aria-label={t(I18nKey.BACKEND$MANAGE_TITLE)}\n >\n <div\n data-testid=\"manage-backends-modal\"\n className={cn(\n \"relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl\",\n modalWidthClassName(\"lg\"),\n MODAL_MAX_WIDTH_VIEWPORT,\n \"max-h-[70vh]\",\n )}\n >\n {recoveryMode ? null : (\n <ModalCloseButton\n onClose={onClose}\n testId=\"close-manage-backends-modal\"\n />\n )}\n <div className={cn(\"p-5\", !recoveryMode && \"pr-12\")}>\n <h2 className={modalTitleLgClassName}>\n {t(I18nKey.BACKEND$MANAGE_TITLE)}\n </h2>\n </div>\n\n <div className=\"flex min-h-0 flex-1 flex-col px-5\">\n <div\n className=\"flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\"\n data-testid=\"manage-backends-list\"\n >\n {backends.length === 0 ? (\n <p className=\"px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]\">\n {t(I18nKey.BACKEND$MANAGE_EMPTY)}\n </p>\n ) : (\n <ul className=\"divide-y divide-[var(--oh-border)]\">\n {backends.map((backend) => (\n <BackendRow\n key={backend.id}\n backend={backend}\n health={healthByBackendId[backend.id]}\n orgLabel={resolveBackendOrgLabel(\n backend,\n cloudOrgs,\n currentUserIds,\n personalWorkspaceLabel,\n )}\n onSelect={() => handleSelectBackend(backend)}\n onEdit={() => setEditingBackend(backend)}\n onRemove={() =>\n setPendingRemoval({\n id: backend.id,\n name: backend.name,\n })\n }\n onLogin={(apiKey) => handleCloudLogin(backend, apiKey)}\n />\n ))}\n </ul>\n )}\n </div>\n </div>\n\n <div className=\"flex justify-end gap-2 p-5\">\n <BrandButton\n type=\"button\"\n variant={recoveryMode ? \"primary\" : \"secondary\"}\n onClick={() => setShowAddForm(true)}\n testId=\"manage-backends-add\"\n startContent={<Plus width={14} height={14} />}\n >\n {t(I18nKey.BACKEND$ADD)}\n </BrandButton>\n {recoveryMode ? null : (\n <BrandButton\n type=\"button\"\n variant=\"primary\"\n onClick={onClose}\n testId=\"manage-backends-done\"\n >\n {t(I18nKey.HOME$DONE)}\n </BrandButton>\n )}\n </div>\n </div>\n </ModalBackdrop>\n\n {showAddForm ? (\n <BackendFormModal\n mode=\"add\"\n source=\"manage_backends_modal\"\n onClose={() => setShowAddForm(false)}\n />\n ) : null}\n\n {editingBackend ? (\n <BackendFormModal\n mode=\"edit\"\n backend={editingBackend}\n onClose={() => setEditingBackend(null)}\n />\n ) : null}\n\n {pendingRemoval ? (\n <ConfirmationModal\n text={t(I18nKey.BACKEND$REMOVE_CONFIRMATION, {\n name: pendingRemoval.name,\n })}\n onConfirm={handleConfirmRemoval}\n onCancel={() => setPendingRemoval(null)}\n />\n ) : null}\n </>\n );\n}\n"],"mappings":"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"}

package/dist/components/features/chat/change-agent-button.cjs CHANGED Viewed

@@ -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(`../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.cjs`),c=require(`../../../hooks/query/use-active-conversation.cjs`),l=require(`../../../hooks/use-agent-state.cjs`),u=require(`../../shared/buttons/styled-tooltip.cjs`),d=require(`../../../hooks/use-unified-websocket-status.cjs`),f=require(`../../../hooks/query/use-sub-conversation-task-polling.cjs`),p=require(`../../../ui/typography.cjs`),m=require(`../../../utils/form-control-classes.cjs`),h=require(`../../../ui/combobox-caret.cjs`),g=require(`../../../icons/lesson-plan.cjs`),_=require(`../../../icons/code-pill.cjs`),v=require(`./change-agent-context-menu.cjs`),y=require(`../../../hooks/use-handle-plan-click.cjs`);let b=require(`react`);b=e.__toESM(b,1);let x=require(`react/jsx-runtime`);function S(){let[e,S]=(0,b.useState)(!1),{conversationMode:C,setConversationMode:w,subConversationTaskId:T}=o.useConversationStore(),{conversationId:E}=a.useOptionalConversationId(),D=!E,O=d.useUnifiedWebSocketStatus()===`OPEN`,{curAgentState:k}=l.useAgentState(),{t:A}=t.useTranslation(`openhands`),j=k===r.AgentState.RUNNING,{data:M}=c.useActiveConversation(),N=s.useQueryClient(),P=(0,b.useRef)(null),{taskStatus:F,subConversationId:I}=f.useSubConversationTaskPolling(T,M?.id||null);(0,b.useEffect)(()=>{F===`READY`&&I&&M?.id&&T&&P.current!==T&&(P.current=T,N.invalidateQueries({queryKey:[`user`,`conversation`,M.id]}))},[F,I,M?.id,T,N]);let{handlePlanClick:L,isCreatingConversation:R}=y.useHandlePlanClick();(0,b.useEffect)(()=>{(j||!O)&&e&&S(!1)},[j,e,O]);let z=D||j||R||!O;(0,b.useEffect)(()=>{if(z)return;let e=e=>{if(e.shiftKey&&e.key===`Tab`){e.preventDefault(),e.stopPropagation();let t=C===`code`?`plan`:`code`;t===`plan`?L(e):w(t)}};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[z,C,w,L]);let B=t=>{t.preventDefault(),t.stopPropagation(),S(!e)},V=e=>{e.preventDefault(),e.stopPropagation(),w(`code`)},H=C===`code`,U=(0,b.useMemo)(()=>A(H?n.I18nKey.COMMON$CODE:n.I18nKey.COMMON$PLAN),[H,A]),W=(0,b.useMemo)(()=>H?(0,x.jsx)(_.CodePillIcon,{className:`h-[11px] w-[11px] shrink-0`}):(0,x.jsx)(g.default,{width:18,height:18,color:`currentColor`}),[H]),G=(0,x.jsxs)(`div`,{className:`relative`,children:[(0,x.jsxs)(`button`,{type:`button`,onClick:B,disabled:z,className:i.cn(`flex items-center rounded-[100px]`,m.formControlTransitionClassName,H?`border border-transparent text-[var(--oh-muted)]`:`border border-[#597FF4] bg-[#4A67BD]`,!z&&H&&i.cn(`cursor-pointer`,`hover:text-white hover:bg-white/10`),!z&&!H&&`cursor-pointer text-white hover:bg-[#597FF4]`,z&&i.cn(`opacity-50 cursor-not-allowed`,H&&`border-transparent`)),children:[(0,x.jsxs)(`div`,{className:`flex items-center gap-1 pl-1.5`,children:[W,(0,x.jsx)(p.Typography.Text,{className:`text-2.75 not-italic font-normal leading-5`,children:U})]}),(0,x.jsx)(h.ComboboxCaretInline,{isOpen:e})]}),e&&(0,x.jsx)(v.ChangeAgentContextMenu,{activeMode:C,onClose:()=>S(!1),onCodeClick:V,onPlanClick:L})]});return D?(0,x.jsx)(u.StyledTooltip,{content:A(n.I18nKey.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION),placement:`top`,children:G}):G}exports.ChangeAgentButton=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(`../../../types/agent-state.cjs`),i=require(`../../../utils/utils.cjs`),a=require(`../../../hooks/use-conversation-id.cjs`),o=require(`../../../stores/conversation-store.cjs`),s=require(`../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.cjs`),c=require(`../../../hooks/query/use-active-conversation.cjs`),l=require(`../../../hooks/use-agent-state.cjs`),u=require(`../../../utils/form-control-classes.cjs`),d=require(`../../shared/buttons/styled-tooltip.cjs`),f=require(`../../../hooks/use-unified-websocket-status.cjs`),p=require(`../../../hooks/query/use-sub-conversation-task-polling.cjs`),m=require(`../../../ui/typography.cjs`),h=require(`../../../ui/combobox-caret.cjs`),g=require(`../../../icons/lesson-plan.cjs`),_=require(`../../../icons/code-pill.cjs`),v=require(`./change-agent-context-menu.cjs`),y=require(`../../../hooks/use-handle-plan-click.cjs`);let b=require(`react`);b=e.__toESM(b,1);let x=require(`react/jsx-runtime`);function S(){let[e,S]=(0,b.useState)(!1),{conversationMode:C,setConversationMode:w,subConversationTaskId:T}=o.useConversationStore(),{conversationId:E}=a.useOptionalConversationId(),D=!E,O=f.useUnifiedWebSocketStatus()===`OPEN`,{curAgentState:k}=l.useAgentState(),{t:A}=t.useTranslation(`openhands`),j=k===r.AgentState.RUNNING,{data:M}=c.useActiveConversation(),N=s.useQueryClient(),P=(0,b.useRef)(null),{taskStatus:F,subConversationId:I}=p.useSubConversationTaskPolling(T,M?.id||null);(0,b.useEffect)(()=>{F===`READY`&&I&&M?.id&&T&&P.current!==T&&(P.current=T,N.invalidateQueries({queryKey:[`user`,`conversation`,M.id]}))},[F,I,M?.id,T,N]);let{handlePlanClick:L,isCreatingConversation:R}=y.useHandlePlanClick();(0,b.useEffect)(()=>{(j||!O)&&e&&S(!1)},[j,e,O]);let z=D||j||R||!O;(0,b.useEffect)(()=>{if(z)return;let e=e=>{if(e.shiftKey&&e.key===`Tab`){e.preventDefault(),e.stopPropagation();let t=C===`code`?`plan`:`code`;t===`plan`?L(e):w(t)}};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[z,C,w,L]);let B=t=>{t.preventDefault(),t.stopPropagation(),S(!e)},V=e=>{e.preventDefault(),e.stopPropagation(),w(`code`)},H=C===`code`,U=(0,b.useMemo)(()=>A(H?n.I18nKey.COMMON$CODE:n.I18nKey.COMMON$PLAN),[H,A]),W=(0,b.useMemo)(()=>H?(0,x.jsx)(_.CodePillIcon,{className:`h-[11px] w-[11px] shrink-0`}):(0,x.jsx)(g.default,{width:18,height:18,color:`currentColor`}),[H]),G=(0,x.jsxs)(`div`,{className:`relative`,children:[(0,x.jsxs)(`button`,{type:`button`,onClick:B,disabled:z,className:i.cn(`flex items-center rounded-[100px]`,u.formControlTransitionClassName,H?`border border-transparent text-[var(--oh-muted)]`:`border border-[#597FF4] bg-[#4A67BD]`,!z&&H&&i.cn(`cursor-pointer`,`hover:text-white hover:bg-white/10`),!z&&!H&&`cursor-pointer text-white hover:bg-[#597FF4]`,z&&i.cn(`opacity-50 cursor-not-allowed`,H&&`border-transparent`)),children:[(0,x.jsxs)(`div`,{className:`flex items-center gap-1 pl-1.5`,children:[W,(0,x.jsx)(m.Typography.Text,{className:`text-2.75 not-italic font-normal leading-5`,children:U})]}),(0,x.jsx)(h.ComboboxCaretInline,{isOpen:e})]}),e&&(0,x.jsx)(v.ChangeAgentContextMenu,{activeMode:C,onClose:()=>S(!1),onCodeClick:V,onPlanClick:L})]});return D?(0,x.jsx)(d.StyledTooltip,{content:A(n.I18nKey.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION),placement:`top`,children:G}):G}exports.ChangeAgentButton=S;
 //# sourceMappingURL=change-agent-button.cjs.map

package/dist/components/features/chat/change-agent-button.js CHANGED Viewed

@@ -7,11 +7,11 @@ import { useConversationStore as a } from "../../../stores/conversation-store.js
 import { useQueryClient as o } from "../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js";
 import { useActiveConversation as s } from "../../../hooks/query/use-active-conversation.js";
 import { useAgentState as c } from "../../../hooks/use-agent-state.js";
-import { StyledTooltip as l } from "../../shared/buttons/styled-tooltip.js";
-import { useUnifiedWebSocketStatus as u } from "../../../hooks/use-unified-websocket-status.js";
-import { useSubConversationTaskPolling as d } from "../../../hooks/query/use-sub-conversation-task-polling.js";
-import { Typography as f } from "../../../ui/typography.js";
-import { formControlTransitionClassName as p } from "../../../utils/form-control-classes.js";
+import { formControlTransitionClassName as l } from "../../../utils/form-control-classes.js";
+import { StyledTooltip as u } from "../../shared/buttons/styled-tooltip.js";
+import { useUnifiedWebSocketStatus as d } from "../../../hooks/use-unified-websocket-status.js";
+import { useSubConversationTaskPolling as f } from "../../../hooks/query/use-sub-conversation-task-polling.js";
+import { Typography as p } from "../../../ui/typography.js";
 import { ComboboxCaretInline as m } from "../../../ui/combobox-caret.js";
 import h from "../../../icons/lesson-plan.js";
 import { CodePillIcon as g } from "../../../icons/code-pill.js";
@@ -21,7 +21,7 @@ import { useEffect as y, useMemo as b, useRef as x, useState as S } from "react"
 import { jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/components/features/chat/change-agent-button.tsx
 function T() {
-	let [T, E] = S(!1), { conversationMode: D, setConversationMode: O, subConversationTaskId: k } = a(), { conversationId: A } = i(), j = !A, M = u() === "OPEN", { curAgentState: N } = c(), { t: P } = e("openhands"), F = N === n.RUNNING, { data: I } = s(), L = o(), R = x(null), { taskStatus: z, subConversationId: B } = d(k, I?.id || null);
+	let [T, E] = S(!1), { conversationMode: D, setConversationMode: O, subConversationTaskId: k } = a(), { conversationId: A } = i(), j = !A, M = d() === "OPEN", { curAgentState: N } = c(), { t: P } = e("openhands"), F = N === n.RUNNING, { data: I } = s(), L = o(), R = x(null), { taskStatus: z, subConversationId: B } = f(k, I?.id || null);
 	y(() => {
 		z === "READY" && B && I?.id && k && R.current !== k && (R.current = k, L.invalidateQueries({ queryKey: [
 			"user",
@@ -76,10 +76,10 @@ function T() {
 			type: "button",
 			onClick: W,
 			disabled: U,
-			className: r("flex items-center rounded-[100px]", p, K ? "border border-transparent text-[var(--oh-muted)]" : "border border-[#597FF4] bg-[#4A67BD]", !U && K && r("cursor-pointer", "hover:text-white hover:bg-white/10"), !U && !K && "cursor-pointer text-white hover:bg-[#597FF4]", U && r("opacity-50 cursor-not-allowed", K && "border-transparent")),
+			className: r("flex items-center rounded-[100px]", l, K ? "border border-transparent text-[var(--oh-muted)]" : "border border-[#597FF4] bg-[#4A67BD]", !U && K && r("cursor-pointer", "hover:text-white hover:bg-white/10"), !U && !K && "cursor-pointer text-white hover:bg-[#597FF4]", U && r("opacity-50 cursor-not-allowed", K && "border-transparent")),
 			children: [/* @__PURE__ */ w("div", {
 				className: "flex items-center gap-1 pl-1.5",
-				children: [J, /* @__PURE__ */ C(f.Text, {
+				children: [J, /* @__PURE__ */ C(p.Text, {
 					className: "text-2.75 not-italic font-normal leading-5",
 					children: q
 				})]
@@ -91,7 +91,7 @@ function T() {
 			onPlanClick: V
 		})]
 	});
-	return j ? /* @__PURE__ */ C(l, {
+	return j ? /* @__PURE__ */ C(u, {
 		content: P(t.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION),
 		placement: "top",
 		children: Y