@openhands/agent-canvas 1.8.0 → 1.10.0

package/dist/components/features/backends/backend-form-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"backend-form-modal.js","names":[],"sources":["../../../../src/components/features/backends/backend-form-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { useTranslation } from \"react-i18next\";\nimport { ServerClient } from \"@openhands/typescript-client/clients\";\nimport OpenHandsLogoWhite from \"#/assets/branding/openhands-logo-white.svg?react\";\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 { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { SettingsInput } from \"#/components/features/settings/settings-input\";\nimport { SegmentedToggle } from \"#/components/features/files-tab/segmented-toggle\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { useTracking } from \"#/hooks/use-tracking\";\nimport type { CloudConnectionSource } from \"#/services/cloud-funnel-analytics\";\nimport { getAgentServerClientOptions } from \"#/api/agent-server-client-options\";\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { isOpenHandsCloudHost } from \"#/api/device-flow-client\";\nimport {\n  assertAgentServerVersionIsSupported,\n  getDisplayAgentServerVersion,\n} from \"#/api/agent-server-compatibility\";\nimport ChevronDownSmallIcon from \"#/icons/chevron-down-small.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend, BackendKind } from \"#/api/backend-registry/types\";\nimport { getUserFacingConnectionErrorMessage } from \"#/utils/user-facing-error\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  modalTitleLgClassName,\n  modalTitleLgMediumClassName,\n} from \"#/utils/modal-classes\";\nimport { getBackendStatusLabel } from \"./backend-status-label\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { DeviceFlowAuth } from \"./device-flow-auth\";\n\nexport type BackendFormMode = \"add\" | \"edit\";\n\ninterface BackendConnectionTestMetadata {\n  agentServerVersion: string | null;\n}\n\ninterface BackendFormModalProps {\n  mode: BackendFormMode;\n  /** Required when `mode === \"edit\"`. */\n  backend?: Backend;\n  onClose: () => void;\n  /** Analytics surface for the `backend_added` event (add mode only). */\n  source?: BackendAddedSource;\n  /** Hide the close button and disable backdrop/escape dismissal. Used for locked Cloud first-run. */\n  hideCloseButton?: boolean;\n}\n\n/**\n * Seed the default backend kind from the host. Uses proper hostname-suffix\n * matching (via {@link isOpenHandsCloudHost}) rather than a substring test, so\n * a look-alike host such as `all-hands-testing.dev` isn't misread as cloud.\n *\n * This is only a *default*: a self-hosted OpenHands Cloud/Enterprise instance\n * on a truly custom domain is indistinguishable from a local agent-server by\n * host alone, so the manual add form lets the user override the kind\n * explicitly (see the Type selector in ManualConnectionColumn).\n */\nfunction inferKindFromHost(host: string): BackendKind {\n  return isOpenHandsCloudHost(host) ? \"cloud\" : \"local\";\n}\n\n/**\n * Returns true for hostnames that represent a local / private-network address.\n * Used by normalizeHost to choose http:// instead of https://.\n */\nfunction isLocalAddress(hostname: string): boolean {\n  // Strip IPv6 bracket notation: [::1] → ::1\n  const h = hostname.toLowerCase().replace(/^\\[|\\]$/g, \"\");\n  // IPv6 loopback, any-address, and named loopback\n  if (h === \"localhost\" || h === \"::1\" || h === \"::\" || h === \"0.0.0.0\")\n    return true;\n  // 127.x.x.x loopback range + IPv4-mapped loopback (::ffff:127.x.x.x)\n  if (/^127\\./.test(h) || /^::ffff:127\\./i.test(h)) return true;\n  // RFC 1918 private ranges\n  if (/^10\\./.test(h)) return true;\n  if (/^192\\.168\\./.test(h)) return true;\n  if (/^172\\.(1[6-9]|2\\d|3[01])\\./.test(h)) return true;\n  // IPv6 link-local (fe80::/10) and unique local (fc00::/7)\n  if (/^fe[89ab][0-9a-f]:/i.test(h)) return true;\n  if (/^f[cd][0-9a-f]{2}:/i.test(h)) return true;\n  // mDNS / Bonjour (.local)\n  if (h.endsWith(\".local\")) return true;\n  // Single-label hostnames (no dots, no colons) are local network names.\n  // Colons are excluded so bare IPv6 addresses don't accidentally match.\n  if (!h.includes(\".\") && !h.includes(\":\")) return true;\n  return false;\n}\n\nfunction normalizeHost(host: string): string {\n  const trimmed = host.trim().replace(/\\/+$/, \"\");\n  if (!trimmed) return \"\";\n  // Already has an explicit scheme — respect it.\n  if (/^https?:\\/\\//i.test(trimmed)) return trimmed;\n  // Extract the pure hostname for scheme selection, handling three cases:\n  //   [::1]:8080  → bracket IPv6 notation → extract ::1\n  //   ::1         → bare IPv6 (multiple colons, no bracket) → whole string\n  //   host:port   → regular host:port → part before the colon\n  const bracketMatch = trimmed.match(/^\\[([^\\]]+)\\]/);\n  const hostname = bracketMatch\n    ? bracketMatch[1]\n    : (trimmed.match(/:/g) ?? []).length > 1\n      ? trimmed\n      : trimmed.split(\":\")[0];\n  const scheme = isLocalAddress(hostname) ? \"http\" : \"https\";\n  return `${scheme}://${trimmed}`;\n}\n\n/**\n * Returns true when `host` represents a reachable backend URL.\n *\n * Rules (applied in order):\n *   1. Must be non-empty after trimming.\n *   2. Must contain no whitespace — spaces can never appear in a host/port.\n *   3. After normalisation (bare hosts get `https://` prepended), must parse\n *      as a valid http or https URL with a non-empty hostname.\n */\nfunction isValidHostUrl(host: string): boolean {\n  const trimmed = host.trim();\n  if (!trimmed) return false;\n  // Spaces anywhere in the input are an immediate rejection.\n  if (/\\s/.test(trimmed)) return false;\n  const normalized = normalizeHost(trimmed);\n  if (!normalized) return false;\n  try {\n    const url = new URL(normalized);\n    return (\n      (url.protocol === \"http:\" || url.protocol === \"https:\") &&\n      url.hostname.length > 0\n    );\n  } catch {\n    return false;\n  }\n}\n\nconst DEFAULT_OPENHANDS_CLOUD_HOST = \"https://app.all-hands.dev\";\n\nexport type BackendConnectionMethod = \"manual\" | \"cloud_login\";\n\nexport type BackendAddedSource = CloudConnectionSource;\n\nfunction getConnectionTestFailedTitle(\n  t: ReturnType<typeof useTranslation>[\"t\"],\n  host: string,\n): string {\n  return t(I18nKey.BACKEND$CONNECTION_TEST_FAILED, {\n    host,\n    interpolation: { escapeValue: false },\n  });\n}\n\nfunction getConnectionErrorDetail(error: unknown): string | null {\n  return getUserFacingConnectionErrorMessage(error);\n}\n\nfunction getConnectionTestFailedMessage(title: string, error: unknown): string {\n  const detail = getConnectionErrorDetail(error);\n  return detail ? `${title}\\n${detail}` : title;\n}\n\nasync function testBackendConnection(\n  backend: Pick<Backend, \"host\" | \"apiKey\" | \"kind\">,\n): Promise<BackendConnectionTestMetadata> {\n  // Cloud backends authenticate via OAuth; preflight GET is not applicable.\n  if (backend.kind !== \"local\") return { agentServerVersion: null };\n\n  const serverInfo = await new ServerClient(\n    getAgentServerClientOptions({\n      host: backend.host,\n      sessionApiKey: backend.apiKey || null,\n      timeout: 5000,\n    }),\n  ).getServerInfo();\n  assertAgentServerVersionIsSupported(serverInfo);\n  return { agentServerVersion: getDisplayAgentServerVersion(serverInfo) };\n}\n\n/**\n * Live status row for the edit form: shows a connection dot, a\n * \"Local\"/\"Cloud\" label, and the agent server's reported version when\n * available. Replaces the legacy local/cloud radio fieldset (kind is\n * now inferred from the host).\n */\nfunction BackendStatusBadge({\n  backend,\n  testIdRoot,\n}: {\n  backend: Backend;\n  testIdRoot: string;\n}) {\n  const { t } = useTranslation(\"openhands\");\n  const healthByBackendId = useBackendsHealth([backend]);\n  const health = healthByBackendId[backend.id];\n  const isConnected = health?.isConnected ?? null;\n  const disabled = health?.disabled === true;\n  const consecutiveFailures = health?.consecutiveFailures ?? 0;\n  const lastError = health?.lastError ?? null;\n\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\" && !disabled,\n  });\n\n  const statusLabel = getBackendStatusLabel(t, backend, health);\n\n  const kindLabel =\n    backend.kind === \"cloud\"\n      ? t(I18nKey.BACKEND$KIND_CLOUD)\n      : t(I18nKey.BACKEND$KIND_LOCAL);\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div\n        data-testid={`${testIdRoot}-status`}\n        className=\"flex items-center gap-3 text-sm\"\n      >\n        <BackendStatusDot isConnected={isConnected} />\n        <span className=\"text-white\" data-testid={`${testIdRoot}-status-label`}>\n          {statusLabel}\n        </span>\n        <span className=\"text-tertiary-alt\">·</span>\n        <span className=\"text-[var(--oh-text-tertiary)]\">{kindLabel}</span>\n        {version ? (\n          <span\n            className=\"text-xs text-[var(--oh-muted)]\"\n            data-testid={`${testIdRoot}-version`}\n          >\n            {t(I18nKey.BACKEND$VERSION_LABEL, { version })}\n          </span>\n        ) : null}\n      </div>\n\n      {disabled ? (\n        <div\n          data-testid={`${testIdRoot}-status-error`}\n          className=\"flex flex-col gap-1 rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm\"\n        >\n          <span className=\"font-semibold text-red-300\">\n            {t(I18nKey.BACKEND$HEALTH_FAILED_TITLE)}\n          </span>\n          <span className=\"text-xs text-[var(--oh-text-tertiary)]\">\n            {t(I18nKey.BACKEND$HEALTH_FAILED_DETAIL, {\n              count: consecutiveFailures,\n            })}\n          </span>\n          {lastError ? (\n            <span\n              data-testid={`${testIdRoot}-status-error-message`}\n              className=\"text-xs text-red-300 whitespace-pre-wrap break-words\"\n            >\n              {lastError}\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport interface BackendFormSubmitPayload {\n  name: string;\n  host: string;\n  apiKey: string;\n  kind: BackendKind;\n}\n\ninterface UseBackendFormOptions {\n  initialName?: string;\n  initialHost?: string;\n  initialApiKey?: string;\n  /**\n   * Called to test the connection. The hook does NOT call\n   * `testBackendConnection` directly so callers can inject a\n   * wrapped version (e.g. with extra logging or different timeout).\n   * Should throw on failure.\n   */\n  onTestConnection: (\n    payload: BackendFormSubmitPayload,\n  ) => Promise<BackendConnectionTestMetadata>;\n  /** Called after a successful connection test and persistence. */\n  onSuccess: (metadata: BackendConnectionTestMetadata) => void;\n  /** Require a non-empty API key even when the host looks local. */\n  requireApiKey?: boolean;\n  /**\n   * When provided, completely replaces the default submit flow\n   * (onTestConnection + onSuccess). The hook still manages form state\n   * and canSubmit validation, but the caller owns error handling and\n   * success side effects. Should throw on failure.\n   */\n  onSubmitOverride?: (payload: BackendFormSubmitPayload) => Promise<void>;\n}\n\n/**\n * Shared hook for the backend-form state used by both `BackendForm`\n * (edit/add mode) and `ManualConnectionColumn` (add-mode-only column).\n * Encapsulates name / host / apiKey fields, `connectionError`,\n * `isSubmitting`, and the shared `handleSubmit` flow.\n */\nfunction useBackendForm({\n  initialName = \"\",\n  initialHost = \"\",\n  initialApiKey = \"\",\n  onTestConnection,\n  onSuccess,\n  requireApiKey = false,\n  onSubmitOverride,\n}: UseBackendFormOptions) {\n  const { t } = useTranslation(\"openhands\");\n\n  const [name, setName] = React.useState(initialName);\n  const [host, setHost] = React.useState(initialHost);\n  const [apiKey, setApiKey] = React.useState(initialApiKey);\n  const [connectionError, setConnectionError] = React.useState<string | null>(\n    null,\n  );\n  const [isSubmitting, setIsSubmitting] = React.useState(false);\n  const [kindOverride, setKindOverride] = React.useState<BackendKind | null>(\n    null,\n  );\n\n  // Kind follows host inference until the user explicitly picks a type, then\n  // respects that choice. A custom-domain OHE can't be distinguished from a\n  // custom-domain local agent-server by host alone, so ManualConnectionColumn\n  // exposes `setKind` (a Type selector) to let the user declare it.\n  const kind = kindOverride ?? inferKindFromHost(host);\n  const needsApiKey = requireApiKey || kind !== \"local\";\n  const canSubmit =\n    name.trim().length > 0 &&\n    isValidHostUrl(host) &&\n    (!needsApiKey || apiKey.trim().length > 0);\n\n  const handleSubmit = React.useCallback(\n    async (e: React.FormEvent<HTMLFormElement>) => {\n      e.preventDefault();\n      if (!canSubmit || isSubmitting) return;\n\n      const payload: BackendFormSubmitPayload = {\n        name: name.trim(),\n        host: normalizeHost(host),\n        apiKey: apiKey.trim(),\n        kind,\n      };\n\n      setConnectionError(null);\n      setIsSubmitting(true);\n\n      try {\n        // When onSubmitOverride is provided, it completely replaces the\n        // default flow (onTestConnection + onSuccess).\n        if (onSubmitOverride) {\n          await onSubmitOverride(payload);\n        } else {\n          const metadata = await onTestConnection(payload);\n          onSuccess(metadata);\n        }\n      } catch (error) {\n        setConnectionError(\n          getConnectionTestFailedMessage(\n            getConnectionTestFailedTitle(t, payload.host),\n            error,\n          ),\n        );\n      } finally {\n        setIsSubmitting(false);\n      }\n    },\n    [\n      canSubmit,\n      isSubmitting,\n      name,\n      host,\n      apiKey,\n      kind,\n      onTestConnection,\n      onSuccess,\n      requireApiKey,\n      onSubmitOverride,\n      t,\n    ],\n  );\n\n  return {\n    name,\n    setName,\n    host,\n    setHost,\n    apiKey,\n    setApiKey,\n    connectionError,\n    setConnectionError,\n    isSubmitting,\n    kind,\n    setKind: setKindOverride,\n    canSubmit,\n    handleSubmit,\n  };\n}\n\nexport interface BackendFormProps {\n  mode: BackendFormMode;\n  /** Required when `mode === \"edit\"`. */\n  backend?: Backend;\n  /**\n   * Called after the form is submitted and the backend has been\n   * persisted. Use this to dismiss a containing modal, advance an\n   * onboarding step, etc.\n   */\n  onSubmitted: () => void;\n  /**\n   * Optional render slot rendered in place of the default\n   * Save / Cancel button row, so callers (e.g. the onboarding flow)\n   * can re-skin the action area while still owning submission via the\n   * standard `<form onSubmit>` flow. Receives the form's submit-ready\n   * state.\n   */\n  renderActions?: (state: {\n    canSubmit: boolean;\n    isSubmitting: boolean;\n    testIdRoot: string;\n  }) => React.ReactNode;\n  /** Used to disambiguate test ids across the same screen. */\n  testIdRoot?: string;\n  /** When true, the host field is pre-filled and disabled. */\n  hostReadOnly?: boolean;\n  /**\n   * When true, a non-empty API key is required for submission regardless\n   * of the inferred backend kind.  The standard add form allows empty\n   * keys for local backends; the auth-gate screen needs to enforce one.\n   */\n  requireApiKey?: boolean;\n  /**\n   * When true, hides the name/host/API-key inputs (and related inline\n   * errors) while keeping the action row visible — used by onboarding\n   * after a successful connection probe.\n   */\n  hideConfigurationFields?: boolean;\n  /**\n   * Replace the default synchronous add/update-and-close submit with a\n   * custom async handler.  The form builds the payload, validates\n   * client-side, then hands it to this callback. If the callback throws,\n   * the form remains open so the caller can surface errors.\n   */\n  onSubmitOverride?: (payload: BackendFormSubmitPayload) => Promise<void>;\n}\n\n/**\n * Reusable form body for adding / editing a backend. Renders the\n * common name / host / API-key inputs plus the kind selector\n * (radio buttons in `add` mode, status badge in `edit` mode).\n *\n * Rendered as a `<form>`, so consumers should put any extra controls\n * either inside `renderActions` or as siblings inside a wrapping\n * element — but submission flows through the standard form submit so\n * Enter-to-submit still works.\n */\nexport function BackendForm({\n  mode,\n  backend,\n  onSubmitted,\n  renderActions,\n  testIdRoot: explicitTestIdRoot,\n  hostReadOnly,\n  requireApiKey,\n  hideConfigurationFields = false,\n  onSubmitOverride,\n}: BackendFormProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { addBackend, updateBackend } = useActiveBackendContext();\n\n  // In edit mode preserve the existing backend's kind so that renaming or\n  // rotating the API key on a cloud backend (e.g. an OHE/enterprise instance\n  // on a custom domain) does not silently downgrade it to \"local\" and switch\n  // the auth header from `Authorization: Bearer` to `X-Session-API-Key`.\n  // Only infer from the host when adding a new backend.\n  const fixedKind: BackendKind | null =\n    mode === \"edit\" && backend ? backend.kind : null;\n\n  const {\n    name,\n    setName,\n    host,\n    setHost,\n    apiKey,\n    setApiKey,\n    connectionError,\n    setConnectionError,\n    isSubmitting,\n    kind: inferredKind,\n    handleSubmit: runSubmit,\n  } = useBackendForm({\n    initialName: backend?.name ?? \"\",\n    initialHost: backend?.host ?? \"\",\n    initialApiKey: backend?.apiKey ?? \"\",\n    onTestConnection: testBackendConnection,\n    onSuccess: async () => {\n      const payload: BackendFormSubmitPayload = {\n        name: name.trim(),\n        host: normalizeHost(host),\n        apiKey: apiKey.trim(),\n        kind: fixedKind ?? inferredKind,\n      };\n      if (mode === \"edit\" && backend) {\n        updateBackend(backend.id, payload);\n      } else {\n        addBackend(payload);\n      }\n      onSubmitted();\n    },\n    requireApiKey,\n    onSubmitOverride,\n  });\n\n  // Inline validation: only show errors after the user has left a field.\n  const [nameTouched, setNameTouched] = React.useState(false);\n  const [hostTouched, setHostTouched] = React.useState(false);\n\n  const kind = fixedKind ?? inferredKind;\n  const testIdRoot =\n    explicitTestIdRoot ?? (mode === \"edit\" ? \"edit-backend\" : \"add-backend\");\n\n  const needsApiKey = requireApiKey || kind !== \"local\";\n  const canSubmit =\n    name.trim().length > 0 &&\n    isValidHostUrl(host) &&\n    (!needsApiKey || apiKey.trim().length > 0);\n\n  // Error messages — only surfaced after the user has blurred the field.\n  const nameError =\n    nameTouched && !name.trim() ? t(I18nKey.BACKEND$NAME_REQUIRED) : undefined;\n  const hostError = hostTouched\n    ? !host.trim()\n      ? t(I18nKey.BACKEND$HOST_REQUIRED)\n      : !isValidHostUrl(host)\n        ? t(I18nKey.BACKEND$HOST_INVALID)\n        : undefined\n    : undefined;\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    if (!canSubmit) {\n      // Mark all validated fields as touched so inline errors become visible\n      // (e.g. user pressed Enter before filling required fields).\n      setNameTouched(true);\n      setHostTouched(true);\n      return;\n    }\n    await runSubmit(event);\n  };\n\n  return (\n    <form\n      data-testid={`${testIdRoot}-form`}\n      onSubmit={handleSubmit}\n      className=\"flex flex-col gap-4\"\n    >\n      <div\n        data-testid={`${testIdRoot}-configuration-fields`}\n        className={cn(\n          \"flex flex-col gap-4\",\n          hideConfigurationFields && \"hidden\",\n        )}\n      >\n        <SettingsInput\n          testId={`${testIdRoot}-name`}\n          name={`${testIdRoot}-name`}\n          type=\"text\"\n          label={t(I18nKey.BACKEND$NAME_LABEL)}\n          value={name}\n          onChange={(value) => {\n            setName(value);\n            setConnectionError(null);\n          }}\n          onBlur={() => setNameTouched(true)}\n          // eslint-disable-next-line i18next/no-literal-string -- example placeholder, not user-facing copy\n          placeholder=\"Production\"\n          className=\"w-full\"\n          showRequiredTag\n          error={nameError}\n        />\n\n        <SettingsInput\n          testId={`${testIdRoot}-host`}\n          name={`${testIdRoot}-host`}\n          type=\"text\"\n          label={t(I18nKey.BACKEND$HOST_LABEL)}\n          value={host}\n          onChange={\n            hostReadOnly\n              ? undefined\n              : (value) => {\n                  setHost(value);\n                  setConnectionError(null);\n                }\n          }\n          onBlur={() => setHostTouched(true)}\n          placeholder={DEFAULT_OPENHANDS_CLOUD_HOST}\n          className=\"w-full\"\n          showRequiredTag\n          error={hostError}\n          isDisabled={hostReadOnly}\n        />\n\n        <SettingsInput\n          testId={`${testIdRoot}-api-key`}\n          name={`${testIdRoot}-api-key`}\n          type=\"password\"\n          label={t(I18nKey.BACKEND$KEY_LABEL)}\n          value={apiKey}\n          onChange={(value) => {\n            setApiKey(value);\n            setConnectionError(null);\n          }}\n          placeholder=\"\"\n          className=\"w-full\"\n        />\n\n        {connectionError ? (\n          <div\n            role=\"alert\"\n            data-testid={`${testIdRoot}-error`}\n            className=\"rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words\"\n          >\n            {connectionError}\n          </div>\n        ) : null}\n\n        {mode === \"edit\" && backend && (\n          <BackendStatusBadge backend={backend} testIdRoot={testIdRoot} />\n        )}\n      </div>\n\n      {renderActions ? (\n        renderActions({\n          canSubmit: canSubmit && !isSubmitting,\n          isSubmitting,\n          testIdRoot,\n        })\n      ) : (\n        <div className=\"flex justify-end gap-2 mt-2 w-full\">\n          <BrandButton\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={onSubmitted}\n            testId={`${testIdRoot}-cancel`}\n          >\n            {t(I18nKey.BUTTON$CANCEL)}\n          </BrandButton>\n          <BrandButton\n            type=\"submit\"\n            variant=\"primary\"\n            isDisabled={!canSubmit || isSubmitting}\n            testId={`${testIdRoot}-submit`}\n          >\n            {t(I18nKey.BACKEND$SAVE)}\n          </BrandButton>\n        </div>\n      )}\n    </form>\n  );\n}\n\n// ── Add-mode two-column layout ──────────────────────────────────────\n\n/**\n * @spec BM-002 — Adding a backend auto-switches the active selection to it\n * (BM-001), so a backend-scoped detail page the user is viewing now belongs\n * to the previous backend. Redirect to that section's list so they never see\n * stale data, mirroring the switch-backend redirect in BackendSelector.\n */\nfunction useRedirectAfterAddBackend() {\n  const { currentPath, navigate } = useNavigation();\n  return React.useCallback(() => {\n    if (/^\\/automations\\/[^/]+/.test(currentPath)) navigate(\"/automations\");\n    else if (/^\\/conversations\\/[^/]+/.test(currentPath))\n      navigate(\"/conversations\");\n  }, [currentPath, navigate]);\n}\n\ninterface BackendConnectionOptionsProps {\n  onConnected: (\n    payload: BackendFormSubmitPayload,\n    connectionMethod: BackendConnectionMethod,\n    metadata?: BackendConnectionTestMetadata,\n  ) => void;\n  testIdRoot?: string;\n  initialManualBackend?: Partial<\n    Pick<BackendFormSubmitPayload, \"name\" | \"host\" | \"apiKey\">\n  >;\n  requireManualApiKey?: boolean;\n  manualSubmitLabel?: React.ReactNode;\n  manualSubmittingLabel?: React.ReactNode;\n  manualSubmitTestId?: string;\n  analyticsSource?: CloudConnectionSource;\n}\n\n/**\n * Manual agent-server connection plus OpenHands Cloud OAuth login.\n * Used by both the Add Backend modal and the onboarding backend step so\n * supported backend choices stay consistent across first-run and settings UI.\n */\nexport function BackendConnectionOptions({\n  onConnected,\n  testIdRoot = \"add-backend\",\n  initialManualBackend,\n  requireManualApiKey = false,\n  manualSubmitLabel,\n  manualSubmittingLabel,\n  manualSubmitTestId,\n  analyticsSource,\n}: BackendConnectionOptionsProps) {\n  const { t } = useTranslation(\"openhands\");\n  const lockedCloudHost = getLockedCloudHost();\n\n  if (lockedCloudHost) {\n    return (\n      <div\n        data-testid={`${testIdRoot}-connection-options`}\n        className=\"flex justify-center\"\n      >\n        <div className=\"w-full\">\n          <CloudLoginColumn\n            onConnected={onConnected}\n            testIdRoot={testIdRoot}\n            lockedHost={lockedCloudHost}\n            analyticsSource={analyticsSource}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-testid={`${testIdRoot}-connection-options`}\n      className=\"flex flex-col gap-6 md:flex-row\"\n    >\n      <div className=\"flex-1 min-w-0\">\n        <ManualConnectionColumn\n          onConnected={onConnected}\n          testIdRoot={testIdRoot}\n          initialBackend={initialManualBackend}\n          requireApiKey={requireManualApiKey}\n          submitLabel={manualSubmitLabel ?? t(I18nKey.BACKEND$CONNECT)}\n          submittingLabel={\n            manualSubmittingLabel ??\n            t(I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING)\n          }\n          submitTestId={manualSubmitTestId}\n        />\n      </div>\n\n      <div className=\"flex-1 min-w-0\">\n        <CloudLoginColumn\n          onConnected={onConnected}\n          testIdRoot={testIdRoot}\n          analyticsSource={analyticsSource}\n        />\n      </div>\n    </div>\n  );\n}\n\ninterface ManualConnectionColumnProps {\n  onConnected: (\n    payload: BackendFormSubmitPayload,\n    connectionMethod: BackendConnectionMethod,\n    metadata?: BackendConnectionTestMetadata,\n  ) => void;\n  testIdRoot: string;\n  initialBackend?: Partial<\n    Pick<BackendFormSubmitPayload, \"name\" | \"host\" | \"apiKey\">\n  >;\n  requireApiKey: boolean;\n  submitLabel: React.ReactNode;\n  submittingLabel: React.ReactNode;\n  submitTestId?: string;\n}\n\n/**\n * Manual connection via Host + API Key. Designed for self-hosted agent servers\n * and self-hosted OpenHands Cloud with API key auth.\n */\nfunction ManualConnectionColumn({\n  onConnected,\n  testIdRoot,\n  initialBackend,\n  requireApiKey,\n  submitLabel,\n  submittingLabel,\n  submitTestId,\n}: ManualConnectionColumnProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  const {\n    name,\n    setName,\n    host,\n    setHost,\n    apiKey,\n    setApiKey,\n    connectionError,\n    setConnectionError,\n    isSubmitting,\n    kind,\n    setKind,\n    canSubmit,\n    handleSubmit,\n  } = useBackendForm({\n    initialName: initialBackend?.name ?? \"\",\n    initialHost: initialBackend?.host ?? \"\",\n    initialApiKey: initialBackend?.apiKey ?? \"\",\n    onTestConnection: testBackendConnection,\n    onSuccess: (metadata) => {\n      onConnected(\n        {\n          name: name.trim(),\n          host: normalizeHost(host),\n          apiKey: apiKey.trim(),\n          kind,\n        },\n        \"manual\",\n        metadata,\n      );\n    },\n    requireApiKey,\n  });\n\n  return (\n    <form\n      data-testid={`${testIdRoot}-form`}\n      onSubmit={handleSubmit}\n      className=\"flex flex-col gap-4 flex-1 min-w-0\"\n    >\n      <div className=\"flex flex-col gap-1\">\n        <SettingsInput\n          testId={`${testIdRoot}-name`}\n          name={`${testIdRoot}-name`}\n          type=\"text\"\n          label={t(I18nKey.BACKEND$NAME_LABEL)}\n          value={name}\n          onChange={(value) => {\n            setName(value);\n            setConnectionError(null);\n          }}\n          // eslint-disable-next-line i18next/no-literal-string -- example placeholder, not user-facing copy\n          placeholder=\"e.g. My Server\"\n          className=\"w-full\"\n        />\n        <p className=\"text-xs text-[var(--oh-muted)]\">\n          {t(I18nKey.BACKEND$NAME_HELPER)}\n        </p>\n      </div>\n\n      <div className=\"flex flex-col gap-1\">\n        <SettingsInput\n          testId={`${testIdRoot}-host`}\n          name={`${testIdRoot}-host`}\n          type=\"text\"\n          label={t(I18nKey.BACKEND$HOST_LABEL)}\n          value={host}\n          onChange={(value) => {\n            setHost(value);\n            setConnectionError(null);\n          }}\n          // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n          placeholder=\"http://localhost:8000\"\n          className=\"w-full\"\n        />\n        <p\n          className=\"text-xs text-[var(--oh-muted)]\"\n          data-testid={`${testIdRoot}-host-helper`}\n        >\n          {t(I18nKey.BACKEND$HOST_HELPER)}\n        </p>\n      </div>\n\n      <div className=\"flex flex-col items-start gap-2.5\">\n        <span className=\"text-sm\">{t(I18nKey.BACKEND$KIND_LABEL)}</span>\n        <SegmentedToggle<BackendKind>\n          value={kind}\n          options={[\n            { value: \"local\", label: t(I18nKey.BACKEND$KIND_LOCAL) },\n            { value: \"cloud\", label: t(I18nKey.BACKEND$KIND_CLOUD) },\n          ]}\n          onChange={(value) => setKind(value)}\n          ariaLabel={t(I18nKey.BACKEND$KIND_LABEL)}\n          testId={`${testIdRoot}-kind`}\n        />\n      </div>\n\n      <SettingsInput\n        testId={`${testIdRoot}-api-key`}\n        name={`${testIdRoot}-api-key`}\n        type=\"password\"\n        label={t(I18nKey.BACKEND$KEY_LABEL)}\n        value={apiKey}\n        onChange={(value) => {\n          setApiKey(value);\n          setConnectionError(null);\n        }}\n        // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n        placeholder=\"sk-••••••••••\"\n        className=\"w-full\"\n      />\n\n      {connectionError ? (\n        <div\n          role=\"alert\"\n          data-testid={`${testIdRoot}-error`}\n          className=\"rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words\"\n        >\n          {connectionError}\n        </div>\n      ) : null}\n\n      <BrandButton\n        type=\"submit\"\n        variant=\"secondary\"\n        isDisabled={!canSubmit || isSubmitting}\n        testId={submitTestId ?? `${testIdRoot}-submit`}\n        className=\"w-full text-center\"\n      >\n        {isSubmitting ? submittingLabel : submitLabel}\n      </BrandButton>\n    </form>\n  );\n}\n\ninterface CloudLoginColumnProps {\n  onConnected: (\n    payload: BackendFormSubmitPayload,\n    connectionMethod: BackendConnectionMethod,\n    metadata?: BackendConnectionTestMetadata,\n  ) => void;\n  testIdRoot: string;\n  lockedHost?: string;\n  analyticsSource?: CloudConnectionSource;\n}\n\n/**\n * One-click OAuth login with OpenHands Cloud. Includes an \"Advanced\"\n * disclosure for users who self-host OpenHands Cloud and need to override the\n * host.\n */\nfunction CloudLoginColumn({\n  onConnected,\n  testIdRoot,\n  lockedHost,\n  analyticsSource,\n}: CloudLoginColumnProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  const [advancedOpen, setAdvancedOpen] = React.useState(false);\n  const [customHost, setCustomHost] = React.useState(\"\");\n\n  const effectiveHost =\n    lockedHost ?? (customHost.trim() || DEFAULT_OPENHANDS_CLOUD_HOST);\n\n  const handleLoginSuccess = (apiKey: string) => {\n    onConnected(\n      {\n        name: \"OpenHands Cloud\",\n        host: normalizeHost(effectiveHost),\n        apiKey,\n        kind: \"cloud\",\n      },\n      \"cloud_login\",\n    );\n  };\n\n  return (\n    <div className=\"flex flex-1 min-w-0 flex-col items-center gap-3 pb-8\">\n      <div className=\"flex flex-col items-center gap-1\">\n        <OpenHandsLogoWhite width={56} height={56} aria-hidden />\n\n        <h4\n          className={modalTitleLgMediumClassName}\n          data-testid={`${testIdRoot}-cloud-title`}\n        >\n          {t(I18nKey.BACKEND$CLOUD_TITLE)}\n        </h4>\n      </div>\n\n      <p className=\"text-center text-sm leading-relaxed text-[var(--oh-muted)]\">\n        {t(I18nKey.BACKEND$CLOUD_DESCRIPTION)}\n      </p>\n\n      <DeviceFlowAuth\n        host={effectiveHost}\n        onSuccess={handleLoginSuccess}\n        testIdRoot={testIdRoot}\n        analyticsSource={analyticsSource}\n      />\n\n      {lockedHost ? null : (\n        <div className=\"w-full\">\n          <button\n            type=\"button\"\n            onClick={() => setAdvancedOpen((open) => !open)}\n            aria-expanded={advancedOpen}\n            data-testid={`${testIdRoot}-advanced-toggle`}\n            className=\"flex w-full cursor-pointer items-center justify-center gap-1 text-center text-xs text-[var(--oh-muted)] transition-colors hover:text-content-2\"\n          >\n            <span>{t(I18nKey.BACKEND$ADVANCED)}</span>\n            <ChevronDownSmallIcon\n              className={cn(\n                \"h-4 w-4 shrink-0 text-muted transition-transform\",\n                advancedOpen && \"rotate-180\",\n              )}\n              aria-hidden\n            />\n          </button>\n          <div\n            className={cn(\n              \"pt-2\",\n              !advancedOpen && \"pointer-events-none invisible\",\n            )}\n            aria-hidden={!advancedOpen}\n          >\n            <SettingsInput\n              testId={`${testIdRoot}-cloud-host`}\n              name={`${testIdRoot}-cloud-host`}\n              type=\"text\"\n              label={t(I18nKey.BACKEND$HOST_LABEL)}\n              value={customHost}\n              onChange={setCustomHost}\n              placeholder={DEFAULT_OPENHANDS_CLOUD_HOST}\n              className=\"w-full\"\n            />\n            <p className=\"mt-1 text-xs text-[var(--oh-muted)]\">\n              {t(I18nKey.BACKEND$LOGIN_CLOUD_HINT)}\n            </p>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction AddBackendConnectionOptions({\n  onClose,\n  source,\n}: {\n  onClose: () => void;\n  source: BackendAddedSource;\n}) {\n  const { addBackend } = useActiveBackendContext();\n  const redirectAfterAdd = useRedirectAfterAddBackend();\n  const { trackBackendAdded } = useTracking();\n\n  const handleConnected = React.useCallback(\n    (\n      payload: BackendFormSubmitPayload,\n      connectionMethod: BackendConnectionMethod,\n      metadata?: BackendConnectionTestMetadata,\n    ) => {\n      addBackend(payload);\n      trackBackendAdded({\n        backendKind: payload.kind,\n        connectionMethod,\n        hasApiKey: Boolean(payload.apiKey),\n        source,\n        agentServerVersion: metadata?.agentServerVersion,\n      });\n      redirectAfterAdd();\n      onClose();\n    },\n    [addBackend, redirectAfterAdd, onClose, trackBackendAdded, source],\n  );\n\n  return (\n    <BackendConnectionOptions\n      onConnected={handleConnected}\n      analyticsSource={source}\n    />\n  );\n}\n\n// ── Modal wrappers ──────────────────────────────────────────────────\n\n/**\n * Modal wrapper. In **add** mode it renders a two-column layout\n * (manual connection | OR | Cloud login). In **edit** mode it wraps\n * the standard `BackendForm`.\n */\nexport function BackendFormModal({\n  mode,\n  backend,\n  onClose,\n  source = \"add_backend_modal\",\n  hideCloseButton = false,\n}: BackendFormModalProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (mode === \"add\") {\n    return (\n      <ModalBackdrop\n        onClose={hideCloseButton ? undefined : onClose}\n        closeOnEscape={false}\n        closeOnBackdropClick={!hideCloseButton}\n        aria-label={t(I18nKey.BACKEND$ADD_TITLE)}\n      >\n        <div\n          data-testid={\n            hideCloseButton ? \"onboarding-modal\" : \"add-backend-modal\"\n          }\n          className={cn(\n            \"relative rounded-xl border border-[var(--oh-border)] bg-base-secondary\",\n            modalWidthClassName(\"xl\"),\n            MODAL_MAX_WIDTH_VIEWPORT,\n          )}\n        >\n          {hideCloseButton ? null : (\n            <ModalCloseButton onClose={onClose} testId=\"add-backend-close\" />\n          )}\n          {/* Header - hide in locked Cloud first-run mode for cleaner UX */}\n          {hideCloseButton ? null : (\n            <div className=\"px-6 pt-6 pb-2 pr-12\">\n              <h2 className={modalTitleLgClassName}>\n                {t(I18nKey.BACKEND$ADD_TITLE)}\n              </h2>\n            </div>\n          )}\n\n          <div className={cn(\"px-6 pb-6\", hideCloseButton ? \"pt-6\" : \"pt-2\")}>\n            <AddBackendConnectionOptions onClose={onClose} source={source} />\n          </div>\n        </div>\n      </ModalBackdrop>\n    );\n  }\n\n  // Edit mode — single-column form (unchanged)\n  const testIdRoot = \"edit-backend\";\n  return (\n    <ModalBackdrop\n      onClose={onClose}\n      closeOnEscape={false}\n      aria-label={t(I18nKey.BACKEND$EDIT_TITLE)}\n    >\n      <div\n        data-testid={`${testIdRoot}-modal`}\n        className={cn(\n          \"relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]\",\n          modalWidthClassName(\"md\"),\n        )}\n      >\n        <ModalCloseButton onClose={onClose} testId={`${testIdRoot}-close`} />\n        <h2 className={cn(\"pr-6\", modalTitleLgClassName)}>\n          {t(I18nKey.BACKEND$EDIT_TITLE)}\n        </h2>\n        <BackendForm\n          mode=\"edit\"\n          backend={backend}\n          onSubmitted={onClose}\n          testIdRoot={testIdRoot}\n        />\n      </div>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"backend-form-modal.js","names":[],"sources":["../../../../src/components/features/backends/backend-form-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { useTranslation } from \"react-i18next\";\nimport { ChevronDown, Globe, Info, Monitor } from \"lucide-react\";\nimport { ServerClient } from \"@openhands/typescript-client/clients\";\nimport OpenHandsLogoWhite from \"#/assets/branding/openhands-logo-white.svg?react\";\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 { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { SettingsInput } from \"#/components/features/settings/settings-input\";\nimport { SegmentedToggle } from \"#/components/features/files-tab/segmented-toggle\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { useTracking } from \"#/hooks/use-tracking\";\nimport type { CloudConnectionSource } from \"#/services/cloud-funnel-analytics\";\nimport { getAgentServerClientOptions } from \"#/api/agent-server-client-options\";\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { isOpenHandsCloudHost } from \"#/api/device-flow-client\";\nimport {\n  assertAgentServerVersionIsSupported,\n  getDisplayAgentServerVersion,\n} from \"#/api/agent-server-compatibility\";\nimport ChevronDownSmallIcon from \"#/icons/chevron-down-small.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend, BackendKind } from \"#/api/backend-registry/types\";\nimport { getUserFacingConnectionErrorMessage } from \"#/utils/user-facing-error\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  modalTitleLgClassName,\n  modalTitleLgMediumClassName,\n} from \"#/utils/modal-classes\";\nimport ExternalLinkIcon from \"#/icons/external-link.svg?react\";\nimport ServerIcon from \"#/icons/server.svg?react\";\nimport { getBackendStatusLabel } from \"./backend-status-label\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { DeviceFlowAuth } from \"./device-flow-auth\";\n\nexport type BackendFormMode = \"add\" | \"edit\";\n\ninterface BackendConnectionTestMetadata {\n  agentServerVersion: string | null;\n}\n\ninterface BackendFormModalProps {\n  mode: BackendFormMode;\n  /** Required when `mode === \"edit\"`. */\n  backend?: Backend;\n  onClose: () => void;\n  /** Analytics surface for the `backend_added` event (add mode only). */\n  source?: BackendAddedSource;\n  /** Hide the close button and disable backdrop/escape dismissal. Used for locked Cloud first-run. */\n  hideCloseButton?: boolean;\n}\n\n/**\n * Seed the default backend kind from the host. Uses proper hostname-suffix\n * matching (via {@link isOpenHandsCloudHost}) rather than a substring test, so\n * a look-alike host such as `all-hands-testing.dev` isn't misread as cloud.\n *\n * This is only a *default*: a self-hosted OpenHands Cloud/Enterprise instance\n * on a truly custom domain is indistinguishable from a local agent-server by\n * host alone, so the manual add form lets the user override the kind\n * explicitly (see the Type selector in ManualConnectionColumn).\n */\nfunction inferKindFromHost(host: string): BackendKind {\n  return isOpenHandsCloudHost(host) ? \"cloud\" : \"local\";\n}\n\n/**\n * Returns true for hostnames that represent a local / private-network address.\n * Used by normalizeHost to choose http:// instead of https://.\n */\nfunction isLocalAddress(hostname: string): boolean {\n  // Strip IPv6 bracket notation: [::1] → ::1\n  const h = hostname.toLowerCase().replace(/^\\[|\\]$/g, \"\");\n  // IPv6 loopback, any-address, and named loopback\n  if (h === \"localhost\" || h === \"::1\" || h === \"::\" || h === \"0.0.0.0\")\n    return true;\n  // 127.x.x.x loopback range + IPv4-mapped loopback (::ffff:127.x.x.x)\n  if (/^127\\./.test(h) || /^::ffff:127\\./i.test(h)) return true;\n  // RFC 1918 private ranges\n  if (/^10\\./.test(h)) return true;\n  if (/^192\\.168\\./.test(h)) return true;\n  if (/^172\\.(1[6-9]|2\\d|3[01])\\./.test(h)) return true;\n  // IPv6 link-local (fe80::/10) and unique local (fc00::/7)\n  if (/^fe[89ab][0-9a-f]:/i.test(h)) return true;\n  if (/^f[cd][0-9a-f]{2}:/i.test(h)) return true;\n  // mDNS / Bonjour (.local)\n  if (h.endsWith(\".local\")) return true;\n  // Single-label hostnames (no dots, no colons) are local network names.\n  // Colons are excluded so bare IPv6 addresses don't accidentally match.\n  if (!h.includes(\".\") && !h.includes(\":\")) return true;\n  return false;\n}\n\nfunction normalizeHost(host: string): string {\n  const trimmed = host.trim().replace(/\\/+$/, \"\");\n  if (!trimmed) return \"\";\n  // Already has an explicit scheme — respect it.\n  if (/^https?:\\/\\//i.test(trimmed)) return trimmed;\n  // Extract the pure hostname for scheme selection, handling three cases:\n  //   [::1]:8080  → bracket IPv6 notation → extract ::1\n  //   ::1         → bare IPv6 (multiple colons, no bracket) → whole string\n  //   host:port   → regular host:port → part before the colon\n  const bracketMatch = trimmed.match(/^\\[([^\\]]+)\\]/);\n  const hostname = bracketMatch\n    ? bracketMatch[1]\n    : (trimmed.match(/:/g) ?? []).length > 1\n      ? trimmed\n      : trimmed.split(\":\")[0];\n  const scheme = isLocalAddress(hostname) ? \"http\" : \"https\";\n  return `${scheme}://${trimmed}`;\n}\n\n/**\n * Returns true when `host` represents a reachable backend URL.\n *\n * Rules (applied in order):\n *   1. Must be non-empty after trimming.\n *   2. Must contain no whitespace — spaces can never appear in a host/port.\n *   3. After normalisation (bare hosts get `https://` prepended), must parse\n *      as a valid http or https URL with a non-empty hostname.\n */\nfunction isValidHostUrl(host: string): boolean {\n  const trimmed = host.trim();\n  if (!trimmed) return false;\n  // Spaces anywhere in the input are an immediate rejection.\n  if (/\\s/.test(trimmed)) return false;\n  const normalized = normalizeHost(trimmed);\n  if (!normalized) return false;\n  try {\n    const url = new URL(normalized);\n    return (\n      (url.protocol === \"http:\" || url.protocol === \"https:\") &&\n      url.hostname.length > 0\n    );\n  } catch {\n    return false;\n  }\n}\n\nconst DEFAULT_OPENHANDS_CLOUD_HOST = \"https://app.all-hands.dev\";\nconst LOCAL_BACKEND_COMMAND = \"agent-canvas --backend-only --port 8001\";\nconst LOCAL_AGENT_SERVER_DOCS_URL =\n  \"https://github.com/OpenHands/OpenHands/blob/main/docs/DEVELOPMENT.md#alternative-development-workflows\";\nconst REMOTE_AGENT_SERVER_DOCS_URL =\n  \"https://github.com/OpenHands/OpenHands/blob/main/docs/SELF_HOSTING.md\";\nconst DEPLOYMENT_OPTIONS_URL =\n  \"https://docs.openhands.dev/overview/introduction\";\nexport type BackendConnectionMethod = \"manual\" | \"cloud_login\";\n\nexport type BackendAddedSource = CloudConnectionSource;\ntype AddBackendOption = \"cloud\" | \"agent-server\";\ntype AgentServerLocation = \"local\" | \"remote\";\n\nfunction getConnectionTestFailedTitle(\n  t: ReturnType<typeof useTranslation>[\"t\"],\n  host: string,\n): string {\n  return t(I18nKey.BACKEND$CONNECTION_TEST_FAILED, {\n    host,\n    interpolation: { escapeValue: false },\n  });\n}\n\nfunction getConnectionErrorDetail(error: unknown): string | null {\n  return getUserFacingConnectionErrorMessage(error);\n}\n\nfunction getConnectionTestFailedMessage(title: string, error: unknown): string {\n  const detail = getConnectionErrorDetail(error);\n  return detail ? `${title}\\n${detail}` : title;\n}\n\nasync function testBackendConnection(\n  backend: Pick<Backend, \"host\" | \"apiKey\" | \"kind\">,\n): Promise<BackendConnectionTestMetadata> {\n  // Cloud backends authenticate via OAuth; preflight GET is not applicable.\n  if (backend.kind !== \"local\") return { agentServerVersion: null };\n\n  const serverInfo = await new ServerClient(\n    getAgentServerClientOptions({\n      host: backend.host,\n      sessionApiKey: backend.apiKey || null,\n      timeout: 5000,\n    }),\n  ).getServerInfo();\n  assertAgentServerVersionIsSupported(serverInfo);\n  return { agentServerVersion: getDisplayAgentServerVersion(serverInfo) };\n}\n\n/**\n * Live status row for the edit form: shows a connection dot, a\n * \"Local\"/\"Cloud\" label, and the agent server's reported version when\n * available. Replaces the legacy local/cloud radio fieldset (kind is\n * now inferred from the host).\n */\nfunction BackendStatusBadge({\n  backend,\n  testIdRoot,\n}: {\n  backend: Backend;\n  testIdRoot: string;\n}) {\n  const { t } = useTranslation(\"openhands\");\n  const healthByBackendId = useBackendsHealth([backend]);\n  const health = healthByBackendId[backend.id];\n  const isConnected = health?.isConnected ?? null;\n  const disabled = health?.disabled === true;\n  const consecutiveFailures = health?.consecutiveFailures ?? 0;\n  const lastError = health?.lastError ?? null;\n\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\" && !disabled,\n  });\n\n  const statusLabel = getBackendStatusLabel(t, backend, health);\n\n  const kindLabel =\n    backend.kind === \"cloud\"\n      ? t(I18nKey.BACKEND$KIND_CLOUD)\n      : t(I18nKey.BACKEND$KIND_LOCAL);\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div\n        data-testid={`${testIdRoot}-status`}\n        className=\"flex items-center gap-3 text-sm\"\n      >\n        <BackendStatusDot isConnected={isConnected} />\n        <span className=\"text-white\" data-testid={`${testIdRoot}-status-label`}>\n          {statusLabel}\n        </span>\n        <span className=\"text-tertiary-alt\">·</span>\n        <span className=\"text-[var(--oh-text-tertiary)]\">{kindLabel}</span>\n        {version ? (\n          <span\n            className=\"text-xs text-[var(--oh-muted)]\"\n            data-testid={`${testIdRoot}-version`}\n          >\n            {t(I18nKey.BACKEND$VERSION_LABEL, { version })}\n          </span>\n        ) : null}\n      </div>\n\n      {disabled ? (\n        <div\n          data-testid={`${testIdRoot}-status-error`}\n          className=\"flex flex-col gap-1 rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm\"\n        >\n          <span className=\"font-semibold text-red-300\">\n            {t(I18nKey.BACKEND$HEALTH_FAILED_TITLE)}\n          </span>\n          <span className=\"text-xs text-[var(--oh-text-tertiary)]\">\n            {t(I18nKey.BACKEND$HEALTH_FAILED_DETAIL, {\n              count: consecutiveFailures,\n            })}\n          </span>\n          {lastError ? (\n            <span\n              data-testid={`${testIdRoot}-status-error-message`}\n              className=\"text-xs text-red-300 whitespace-pre-wrap break-words\"\n            >\n              {lastError}\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport interface BackendFormSubmitPayload {\n  name: string;\n  host: string;\n  apiKey: string;\n  kind: BackendKind;\n}\n\ninterface UseBackendFormOptions {\n  initialName?: string;\n  initialHost?: string;\n  initialApiKey?: string;\n  /**\n   * Called to test the connection. The hook does NOT call\n   * `testBackendConnection` directly so callers can inject a\n   * wrapped version (e.g. with extra logging or different timeout).\n   * Should throw on failure.\n   */\n  onTestConnection: (\n    payload: BackendFormSubmitPayload,\n  ) => Promise<BackendConnectionTestMetadata>;\n  /** Called after a successful connection test and persistence. */\n  onSuccess: (metadata: BackendConnectionTestMetadata) => void;\n  /** Require a non-empty API key even when the host looks local. */\n  requireApiKey?: boolean;\n  /**\n   * When provided, completely replaces the default submit flow\n   * (onTestConnection + onSuccess). The hook still manages form state\n   * and canSubmit validation, but the caller owns error handling and\n   * success side effects. Should throw on failure.\n   */\n  onSubmitOverride?: (payload: BackendFormSubmitPayload) => Promise<void>;\n  /** Fix the persisted backend kind instead of inferring it from the host. */\n  fixedKind?: BackendKind;\n}\n\n/**\n * Shared hook for the backend-form state used by both `BackendForm`\n * (edit/add mode) and `ManualConnectionColumn` (add-mode-only column).\n * Encapsulates name / host / apiKey fields, `connectionError`,\n * `isSubmitting`, and the shared `handleSubmit` flow.\n */\nfunction useBackendForm({\n  initialName = \"\",\n  initialHost = \"\",\n  initialApiKey = \"\",\n  onTestConnection,\n  onSuccess,\n  requireApiKey = false,\n  onSubmitOverride,\n  fixedKind,\n}: UseBackendFormOptions) {\n  const { t } = useTranslation(\"openhands\");\n\n  const [name, setName] = React.useState(initialName);\n  const [host, setHost] = React.useState(initialHost);\n  const [apiKey, setApiKey] = React.useState(initialApiKey);\n  const [connectionError, setConnectionError] = React.useState<string | null>(\n    null,\n  );\n  const [isSubmitting, setIsSubmitting] = React.useState(false);\n  const [kindOverride, setKindOverride] = React.useState<BackendKind | null>(\n    null,\n  );\n\n  // Kind follows host inference until the user explicitly picks a type, then\n  // respects that choice. A custom-domain OHE can't be distinguished from a\n  // custom-domain local agent-server by host alone, so ManualConnectionColumn\n  // exposes `setKind` (a Type selector) to let the user declare it.\n  const kind = fixedKind ?? kindOverride ?? inferKindFromHost(host);\n  const needsApiKey = requireApiKey || kind !== \"local\";\n  const canSubmit =\n    name.trim().length > 0 &&\n    isValidHostUrl(host) &&\n    (!needsApiKey || apiKey.trim().length > 0);\n\n  const handleSubmit = React.useCallback(\n    async (e: React.FormEvent<HTMLFormElement>) => {\n      e.preventDefault();\n      if (!canSubmit || isSubmitting) return;\n\n      const payload: BackendFormSubmitPayload = {\n        name: name.trim(),\n        host: normalizeHost(host),\n        apiKey: apiKey.trim(),\n        kind,\n      };\n\n      setConnectionError(null);\n      setIsSubmitting(true);\n\n      try {\n        // When onSubmitOverride is provided, it completely replaces the\n        // default flow (onTestConnection + onSuccess).\n        if (onSubmitOverride) {\n          await onSubmitOverride(payload);\n        } else {\n          const metadata = await onTestConnection(payload);\n          onSuccess(metadata);\n        }\n      } catch (error) {\n        setConnectionError(\n          getConnectionTestFailedMessage(\n            getConnectionTestFailedTitle(t, payload.host),\n            error,\n          ),\n        );\n      } finally {\n        setIsSubmitting(false);\n      }\n    },\n    [\n      canSubmit,\n      isSubmitting,\n      name,\n      host,\n      apiKey,\n      kind,\n      onTestConnection,\n      onSuccess,\n      requireApiKey,\n      onSubmitOverride,\n      fixedKind,\n      t,\n    ],\n  );\n\n  return {\n    name,\n    setName,\n    host,\n    setHost,\n    apiKey,\n    setApiKey,\n    connectionError,\n    setConnectionError,\n    isSubmitting,\n    kind,\n    setKind: setKindOverride,\n    canSubmit,\n    handleSubmit,\n  };\n}\n\nexport interface BackendFormProps {\n  mode: BackendFormMode;\n  /** Required when `mode === \"edit\"`. */\n  backend?: Backend;\n  /**\n   * Called after the form is submitted and the backend has been\n   * persisted. Use this to dismiss a containing modal, advance an\n   * onboarding step, etc.\n   */\n  onSubmitted: () => void;\n  /**\n   * Optional render slot rendered in place of the default\n   * Save / Cancel button row, so callers (e.g. the onboarding flow)\n   * can re-skin the action area while still owning submission via the\n   * standard `<form onSubmit>` flow. Receives the form's submit-ready\n   * state.\n   */\n  renderActions?: (state: {\n    canSubmit: boolean;\n    isSubmitting: boolean;\n    testIdRoot: string;\n  }) => React.ReactNode;\n  /** Used to disambiguate test ids across the same screen. */\n  testIdRoot?: string;\n  /** When true, the host field is pre-filled and disabled. */\n  hostReadOnly?: boolean;\n  /**\n   * When true, a non-empty API key is required for submission regardless\n   * of the inferred backend kind.  The standard add form allows empty\n   * keys for local backends; the auth-gate screen needs to enforce one.\n   */\n  requireApiKey?: boolean;\n  /**\n   * When true, hides the name/host/API-key inputs (and related inline\n   * errors) while keeping the action row visible — used by onboarding\n   * after a successful connection probe.\n   */\n  hideConfigurationFields?: boolean;\n  /**\n   * Replace the default synchronous add/update-and-close submit with a\n   * custom async handler.  The form builds the payload, validates\n   * client-side, then hands it to this callback. If the callback throws,\n   * the form remains open so the caller can surface errors.\n   */\n  onSubmitOverride?: (payload: BackendFormSubmitPayload) => Promise<void>;\n}\n\n/**\n * Reusable form body for adding / editing a backend. Renders the\n * common name / host / API-key inputs plus the kind selector\n * (radio buttons in `add` mode, status badge in `edit` mode).\n *\n * Rendered as a `<form>`, so consumers should put any extra controls\n * either inside `renderActions` or as siblings inside a wrapping\n * element — but submission flows through the standard form submit so\n * Enter-to-submit still works.\n */\nexport function BackendForm({\n  mode,\n  backend,\n  onSubmitted,\n  renderActions,\n  testIdRoot: explicitTestIdRoot,\n  hostReadOnly,\n  requireApiKey,\n  hideConfigurationFields = false,\n  onSubmitOverride,\n}: BackendFormProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { addBackend, updateBackend } = useActiveBackendContext();\n\n  // In edit mode preserve the existing backend's kind so that renaming or\n  // rotating the API key on a cloud backend (e.g. an OHE/enterprise instance\n  // on a custom domain) does not silently downgrade it to \"local\" and switch\n  // the auth header from `Authorization: Bearer` to `X-Session-API-Key`.\n  // Only infer from the host when adding a new backend.\n  const fixedKind: BackendKind | null =\n    mode === \"edit\" && backend ? backend.kind : null;\n\n  const {\n    name,\n    setName,\n    host,\n    setHost,\n    apiKey,\n    setApiKey,\n    connectionError,\n    setConnectionError,\n    isSubmitting,\n    kind: inferredKind,\n    handleSubmit: runSubmit,\n  } = useBackendForm({\n    initialName: backend?.name ?? \"\",\n    initialHost: backend?.host ?? \"\",\n    initialApiKey: backend?.apiKey ?? \"\",\n    onTestConnection: testBackendConnection,\n    onSuccess: async () => {\n      const payload: BackendFormSubmitPayload = {\n        name: name.trim(),\n        host: normalizeHost(host),\n        apiKey: apiKey.trim(),\n        kind: fixedKind ?? inferredKind,\n      };\n      if (mode === \"edit\" && backend) {\n        updateBackend(backend.id, payload);\n      } else {\n        addBackend(payload);\n      }\n      onSubmitted();\n    },\n    requireApiKey,\n    onSubmitOverride,\n  });\n\n  // Inline validation: only show errors after the user has left a field.\n  const [nameTouched, setNameTouched] = React.useState(false);\n  const [hostTouched, setHostTouched] = React.useState(false);\n\n  const kind = fixedKind ?? inferredKind;\n  const testIdRoot =\n    explicitTestIdRoot ?? (mode === \"edit\" ? \"edit-backend\" : \"add-backend\");\n\n  const needsApiKey = requireApiKey || kind !== \"local\";\n  const canSubmit =\n    name.trim().length > 0 &&\n    isValidHostUrl(host) &&\n    (!needsApiKey || apiKey.trim().length > 0);\n\n  // Error messages — only surfaced after the user has blurred the field.\n  const nameError =\n    nameTouched && !name.trim() ? t(I18nKey.BACKEND$NAME_REQUIRED) : undefined;\n  const hostError = hostTouched\n    ? !host.trim()\n      ? t(I18nKey.BACKEND$HOST_REQUIRED)\n      : !isValidHostUrl(host)\n        ? t(I18nKey.BACKEND$HOST_INVALID)\n        : undefined\n    : undefined;\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    if (!canSubmit) {\n      // Mark all validated fields as touched so inline errors become visible\n      // (e.g. user pressed Enter before filling required fields).\n      setNameTouched(true);\n      setHostTouched(true);\n      return;\n    }\n    await runSubmit(event);\n  };\n\n  return (\n    <form\n      data-testid={`${testIdRoot}-form`}\n      onSubmit={handleSubmit}\n      className=\"flex flex-col gap-4\"\n    >\n      <div\n        data-testid={`${testIdRoot}-configuration-fields`}\n        className={cn(\n          \"flex flex-col gap-4\",\n          hideConfigurationFields && \"hidden\",\n        )}\n      >\n        <SettingsInput\n          testId={`${testIdRoot}-name`}\n          name={`${testIdRoot}-name`}\n          type=\"text\"\n          label={t(I18nKey.BACKEND$NAME_LABEL)}\n          value={name}\n          onChange={(value) => {\n            setName(value);\n            setConnectionError(null);\n          }}\n          onBlur={() => setNameTouched(true)}\n          // eslint-disable-next-line i18next/no-literal-string -- example placeholder, not user-facing copy\n          placeholder=\"Production\"\n          className=\"w-full\"\n          showRequiredTag\n          error={nameError}\n        />\n\n        <SettingsInput\n          testId={`${testIdRoot}-host`}\n          name={`${testIdRoot}-host`}\n          type=\"text\"\n          label={t(I18nKey.BACKEND$HOST_LABEL)}\n          value={host}\n          onChange={\n            hostReadOnly\n              ? undefined\n              : (value) => {\n                  setHost(value);\n                  setConnectionError(null);\n                }\n          }\n          onBlur={() => setHostTouched(true)}\n          placeholder={DEFAULT_OPENHANDS_CLOUD_HOST}\n          className=\"w-full\"\n          showRequiredTag\n          error={hostError}\n          isDisabled={hostReadOnly}\n        />\n\n        <SettingsInput\n          testId={`${testIdRoot}-api-key`}\n          name={`${testIdRoot}-api-key`}\n          type=\"password\"\n          label={t(I18nKey.BACKEND$KEY_LABEL)}\n          value={apiKey}\n          onChange={(value) => {\n            setApiKey(value);\n            setConnectionError(null);\n          }}\n          placeholder=\"\"\n          className=\"w-full\"\n        />\n\n        {connectionError ? (\n          <div\n            role=\"alert\"\n            data-testid={`${testIdRoot}-error`}\n            className=\"rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words\"\n          >\n            {connectionError}\n          </div>\n        ) : null}\n\n        {mode === \"edit\" && backend && (\n          <BackendStatusBadge backend={backend} testIdRoot={testIdRoot} />\n        )}\n      </div>\n\n      {renderActions ? (\n        renderActions({\n          canSubmit: canSubmit && !isSubmitting,\n          isSubmitting,\n          testIdRoot,\n        })\n      ) : (\n        <div className=\"flex justify-end gap-2 mt-2 w-full\">\n          <BrandButton\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={onSubmitted}\n            testId={`${testIdRoot}-cancel`}\n          >\n            {t(I18nKey.BUTTON$CANCEL)}\n          </BrandButton>\n          <BrandButton\n            type=\"submit\"\n            variant=\"primary\"\n            isDisabled={!canSubmit || isSubmitting}\n            testId={`${testIdRoot}-submit`}\n          >\n            {t(I18nKey.BACKEND$SAVE)}\n          </BrandButton>\n        </div>\n      )}\n    </form>\n  );\n}\n\n// ── Add-mode two-column layout ──────────────────────────────────────\n\n/**\n * @spec BM-002 — Adding a backend auto-switches the active selection to it\n * (BM-001), so a backend-scoped detail page the user is viewing now belongs\n * to the previous backend. Redirect to that section's list so they never see\n * stale data, mirroring the switch-backend redirect in BackendSelector.\n */\nfunction useRedirectAfterAddBackend() {\n  const { currentPath, navigate } = useNavigation();\n  return React.useCallback(() => {\n    if (/^\\/automations\\/[^/]+/.test(currentPath)) navigate(\"/automations\");\n    else if (/^\\/conversations\\/[^/]+/.test(currentPath))\n      navigate(\"/conversations\");\n  }, [currentPath, navigate]);\n}\n\ninterface BackendConnectionOptionsProps {\n  onConnected: (\n    payload: BackendFormSubmitPayload,\n    connectionMethod: BackendConnectionMethod,\n    metadata?: BackendConnectionTestMetadata,\n  ) => void;\n  testIdRoot?: string;\n  initialManualBackend?: Partial<\n    Pick<BackendFormSubmitPayload, \"name\" | \"host\" | \"apiKey\">\n  >;\n  requireManualApiKey?: boolean;\n  manualSubmitLabel?: React.ReactNode;\n  manualSubmittingLabel?: React.ReactNode;\n  manualSubmitTestId?: string;\n  analyticsSource?: CloudConnectionSource;\n}\n\n/**\n * Manual agent-server connection plus OpenHands Cloud OAuth login.\n * Used by both the Add Backend modal and the onboarding backend step so\n * supported backend choices stay consistent across first-run and settings UI.\n */\nexport function BackendConnectionOptions({\n  onConnected,\n  testIdRoot = \"add-backend\",\n  initialManualBackend,\n  requireManualApiKey = false,\n  manualSubmitLabel,\n  manualSubmittingLabel,\n  manualSubmitTestId,\n  analyticsSource,\n}: BackendConnectionOptionsProps) {\n  const { t } = useTranslation(\"openhands\");\n  const lockedCloudHost = getLockedCloudHost();\n\n  if (lockedCloudHost) {\n    return (\n      <div\n        data-testid={`${testIdRoot}-connection-options`}\n        className=\"flex justify-center\"\n      >\n        <div className=\"w-full\">\n          <CloudLoginColumn\n            onConnected={onConnected}\n            testIdRoot={testIdRoot}\n            lockedHost={lockedCloudHost}\n            analyticsSource={analyticsSource}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-testid={`${testIdRoot}-connection-options`}\n      className=\"flex flex-col gap-6 md:flex-row\"\n    >\n      <div className=\"flex-1 min-w-0\">\n        <ManualConnectionColumn\n          onConnected={onConnected}\n          testIdRoot={testIdRoot}\n          initialBackend={initialManualBackend}\n          requireApiKey={requireManualApiKey}\n          submitLabel={manualSubmitLabel ?? t(I18nKey.BACKEND$CONNECT)}\n          submittingLabel={\n            manualSubmittingLabel ??\n            t(I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING)\n          }\n          submitTestId={manualSubmitTestId}\n        />\n      </div>\n\n      <div className=\"flex-1 min-w-0\">\n        <CloudLoginColumn\n          onConnected={onConnected}\n          testIdRoot={testIdRoot}\n          analyticsSource={analyticsSource}\n        />\n      </div>\n    </div>\n  );\n}\n\ninterface ManualConnectionColumnProps {\n  onConnected: (\n    payload: BackendFormSubmitPayload,\n    connectionMethod: BackendConnectionMethod,\n    metadata?: BackendConnectionTestMetadata,\n  ) => void;\n  testIdRoot: string;\n  initialBackend?: Partial<\n    Pick<BackendFormSubmitPayload, \"name\" | \"host\" | \"apiKey\">\n  >;\n  requireApiKey: boolean;\n  submitLabel: React.ReactNode;\n  submittingLabel: React.ReactNode;\n  submitTestId?: string;\n  fixedKind?: BackendKind;\n  showKindSelector?: boolean;\n}\n\n/**\n * Manual connection via Host + API Key. Designed for self-hosted agent servers\n * and self-hosted OpenHands Cloud with API key auth.\n */\nfunction ManualConnectionColumn({\n  onConnected,\n  testIdRoot,\n  initialBackend,\n  requireApiKey,\n  submitLabel,\n  submittingLabel,\n  submitTestId,\n  fixedKind,\n  showKindSelector = true,\n}: ManualConnectionColumnProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  const {\n    name,\n    setName,\n    host,\n    setHost,\n    apiKey,\n    setApiKey,\n    connectionError,\n    setConnectionError,\n    isSubmitting,\n    kind,\n    setKind,\n    canSubmit,\n    handleSubmit,\n  } = useBackendForm({\n    initialName: initialBackend?.name ?? \"\",\n    initialHost: initialBackend?.host ?? \"\",\n    initialApiKey: initialBackend?.apiKey ?? \"\",\n    onTestConnection: testBackendConnection,\n    onSuccess: (metadata) => {\n      onConnected(\n        {\n          name: name.trim(),\n          host: normalizeHost(host),\n          apiKey: apiKey.trim(),\n          kind,\n        },\n        \"manual\",\n        metadata,\n      );\n    },\n    requireApiKey,\n    fixedKind,\n  });\n\n  return (\n    <form\n      data-testid={`${testIdRoot}-form`}\n      onSubmit={handleSubmit}\n      className=\"flex flex-col gap-4 flex-1 min-w-0\"\n    >\n      <SettingsInput\n        testId={`${testIdRoot}-name`}\n        name={`${testIdRoot}-name`}\n        type=\"text\"\n        label={t(I18nKey.BACKEND$NAME_LABEL)}\n        hint={t(I18nKey.BACKEND$NAME_HELPER)}\n        value={name}\n        onChange={(value) => {\n          setName(value);\n          setConnectionError(null);\n        }}\n        // eslint-disable-next-line i18next/no-literal-string -- example placeholder, not user-facing copy\n        placeholder=\"e.g. My Server\"\n        className=\"w-full\"\n      />\n\n      <SettingsInput\n        testId={`${testIdRoot}-host`}\n        name={`${testIdRoot}-host`}\n        type=\"text\"\n        label={t(I18nKey.BACKEND$HOST_LABEL)}\n        hint={t(I18nKey.BACKEND$HOST_HELPER)}\n        value={host}\n        onChange={(value) => {\n          setHost(value);\n          setConnectionError(null);\n        }}\n        // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n        placeholder=\"http://localhost:8000\"\n        className=\"w-full\"\n      />\n\n      {showKindSelector ? (\n        <div className=\"flex flex-col items-start gap-2.5\">\n          <span className=\"text-sm\">{t(I18nKey.BACKEND$KIND_LABEL)}</span>\n          <SegmentedToggle<BackendKind>\n            value={kind}\n            options={[\n              { value: \"local\", label: t(I18nKey.BACKEND$KIND_LOCAL) },\n              { value: \"cloud\", label: t(I18nKey.BACKEND$KIND_CLOUD) },\n            ]}\n            onChange={(value) => setKind(value)}\n            ariaLabel={t(I18nKey.BACKEND$KIND_LABEL)}\n            testId={`${testIdRoot}-kind`}\n          />\n        </div>\n      ) : null}\n\n      <SettingsInput\n        testId={`${testIdRoot}-api-key`}\n        name={`${testIdRoot}-api-key`}\n        type=\"password\"\n        label={t(I18nKey.BACKEND$KEY_LABEL)}\n        value={apiKey}\n        onChange={(value) => {\n          setApiKey(value);\n          setConnectionError(null);\n        }}\n        // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n        placeholder=\"sk-••••••••••\"\n        className=\"w-full\"\n      />\n\n      {connectionError ? (\n        <div\n          role=\"alert\"\n          data-testid={`${testIdRoot}-error`}\n          className=\"rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words\"\n        >\n          {connectionError}\n        </div>\n      ) : null}\n\n      <BrandButton\n        type=\"submit\"\n        variant=\"secondary\"\n        isDisabled={!canSubmit || isSubmitting}\n        testId={submitTestId ?? `${testIdRoot}-submit`}\n        className=\"w-full text-center\"\n      >\n        {isSubmitting ? submittingLabel : submitLabel}\n      </BrandButton>\n    </form>\n  );\n}\n\ninterface CloudLoginColumnProps {\n  onConnected: (\n    payload: BackendFormSubmitPayload,\n    connectionMethod: BackendConnectionMethod,\n    metadata?: BackendConnectionTestMetadata,\n  ) => void;\n  testIdRoot: string;\n  lockedHost?: string;\n  analyticsSource?: CloudConnectionSource;\n  /** Omit repeated branding when a surrounding chooser already names Cloud. */\n  showBranding?: boolean;\n}\n\n/**\n * One-click OAuth login with OpenHands Cloud. Includes an \"Advanced\"\n * disclosure for users who self-host OpenHands Cloud and need to override the\n * host.\n */\nfunction CloudLoginColumn({\n  onConnected,\n  testIdRoot,\n  lockedHost,\n  analyticsSource,\n  showBranding = true,\n}: CloudLoginColumnProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  const [advancedOpen, setAdvancedOpen] = React.useState(false);\n  const [customHost, setCustomHost] = React.useState(\"\");\n  const advancedPanelId = `${testIdRoot}-advanced-panel`;\n\n  const effectiveHost =\n    lockedHost ?? (customHost.trim() || DEFAULT_OPENHANDS_CLOUD_HOST);\n\n  const handleLoginSuccess = (apiKey: string) => {\n    onConnected(\n      {\n        name: \"OpenHands Cloud\",\n        host: normalizeHost(effectiveHost),\n        apiKey,\n        kind: \"cloud\",\n      },\n      \"cloud_login\",\n    );\n  };\n\n  return (\n    <div className=\"flex w-full min-w-0 flex-col items-center gap-3\">\n      {showBranding ? (\n        <div className=\"flex flex-col items-center gap-1\">\n          <OpenHandsLogoWhite width={56} height={56} aria-hidden />\n\n          <h4\n            className={modalTitleLgMediumClassName}\n            data-testid={`${testIdRoot}-cloud-title`}\n          >\n            {t(I18nKey.BACKEND$CLOUD_TITLE)}\n          </h4>\n        </div>\n      ) : null}\n\n      <DeviceFlowAuth\n        host={effectiveHost}\n        onSuccess={handleLoginSuccess}\n        testIdRoot={testIdRoot}\n        analyticsSource={analyticsSource}\n        className=\"w-full items-center\"\n        idleDescription={\n          <p\n            className=\"text-center text-sm leading-relaxed text-[var(--oh-muted)]\"\n            data-testid={`${testIdRoot}-cloud-description`}\n          >\n            {t(I18nKey.BACKEND$CLOUD_DESCRIPTION)}\n          </p>\n        }\n        // Host overriding only matters before the flow starts, so it rides the\n        // same idle-only slot as the description instead of sitting under the\n        // authorization status.\n        idleFooter={\n          lockedHost ? null : (\n            // Keep the Advanced disclosure at the original compact width even\n            // though the surrounding cloud panel spans the full chooser.\n            <div className=\"mx-auto w-full max-w-md\">\n              <button\n                type=\"button\"\n                onClick={() => setAdvancedOpen((open) => !open)}\n                aria-expanded={advancedOpen}\n                aria-controls={advancedPanelId}\n                data-testid={`${testIdRoot}-advanced-toggle`}\n                className=\"flex w-full cursor-pointer items-center justify-center gap-1 text-center text-xs text-[var(--oh-muted)] transition-colors hover:text-content-2\"\n              >\n                <span>{t(I18nKey.BACKEND$ADVANCED)}</span>\n                <ChevronDownSmallIcon\n                  className={cn(\n                    \"h-4 w-4 shrink-0 text-muted transition-transform duration-200 ease-out\",\n                    advancedOpen && \"rotate-180\",\n                  )}\n                  aria-hidden\n                />\n              </button>\n              {/* Height animates through `grid-template-rows` (0fr ↔ 1fr) so no\n                  max-height guess is needed; the inner clip is what makes `0fr`\n                  collapse. Content stays mounted so a typed host survives, and\n                  `inert` keeps the collapsed field out of the tab order. */}\n              <div\n                className={cn(\n                  \"grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none\",\n                  advancedOpen ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n                )}\n              >\n                <div className=\"overflow-hidden\">\n                  <div\n                    id={advancedPanelId}\n                    data-testid={`${testIdRoot}-advanced-panel`}\n                    aria-hidden={!advancedOpen}\n                    inert={!advancedOpen ? true : undefined}\n                    className={cn(\n                      \"pt-3 transition-opacity duration-200 ease-out motion-reduce:transition-none\",\n                      advancedOpen ? \"opacity-100\" : \"opacity-0\",\n                    )}\n                  >\n                    <SettingsInput\n                      testId={`${testIdRoot}-cloud-host`}\n                      name={`${testIdRoot}-cloud-host`}\n                      type=\"text\"\n                      label={t(I18nKey.BACKEND$HOST_LABEL)}\n                      value={customHost}\n                      onChange={setCustomHost}\n                      placeholder={DEFAULT_OPENHANDS_CLOUD_HOST}\n                      className=\"w-full\"\n                    />\n                    <p className=\"mt-1 text-xs text-[var(--oh-muted)]\">\n                      {t(I18nKey.BACKEND$LOGIN_CLOUD_HINT)}\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          )\n        }\n      />\n    </div>\n  );\n}\n\ninterface BackendOptionTabProps {\n  value: AddBackendOption;\n  selectedValue: AddBackendOption;\n  title: string;\n  description: string;\n  icon: React.ReactNode;\n  onSelect: (value: AddBackendOption) => void;\n  panelId: string;\n  testId: string;\n}\n\n/**\n * Presents a connection-method tab: icon, title, and a one-line subtitle.\n *\n * The shared tablist owns the outer border, so these buttons meet cleanly at\n * the center. Selection uses a bottom bar instead of recoloring the full\n * outline, preserving the group as one visual control.\n */\nfunction BackendOptionTab({\n  value,\n  selectedValue,\n  title,\n  description,\n  icon,\n  onSelect,\n  panelId,\n  testId,\n}: BackendOptionTabProps) {\n  const isSelected = value === selectedValue;\n  const tabId = `${testId}-tab`;\n\n  return (\n    <button\n      id={tabId}\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={isSelected}\n      aria-controls={panelId}\n      data-testid={testId}\n      onClick={() => onSelect(value)}\n      className={cn(\n        \"relative flex min-h-16 w-full cursor-pointer items-center gap-3 px-3 py-3 text-left transition-colors\",\n        \"first:border-r first:border-r-[var(--oh-border)]\",\n        \"focus-visible:z-10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-300\",\n        isSelected\n          ? \"bg-[var(--oh-surface-raised)] text-white after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-primary\"\n          : \"text-[var(--oh-muted)] hover:bg-[var(--oh-surface-raised)] hover:text-white\",\n      )}\n    >\n      <span\n        className=\"flex size-8 shrink-0 items-center justify-center\"\n        aria-hidden\n      >\n        {icon}\n      </span>\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block truncate text-sm font-medium\">{title}</span>\n        <span className=\"mt-0.5 block text-xs leading-tight text-[var(--oh-muted)]\">\n          {description}\n        </span>\n      </span>\n    </button>\n  );\n}\n\ninterface AnimatedPanelHeightProps {\n  children: React.ReactNode;\n}\n\n/**\n * Animates a panel between content-driven heights.\n *\n * A ResizeObserver keeps the wrapper synchronized as tabs or nested\n * disclosures change. The transition class remains mounted before the\n * observer publishes a new height; adding it in the same render as the height\n * would give the browser no previous painted value to interpolate from.\n */\nfunction AnimatedPanelHeight({ children }: AnimatedPanelHeightProps) {\n  const contentRef = React.useRef<HTMLDivElement>(null);\n  const [height, setHeight] = React.useState<number>();\n\n  React.useLayoutEffect(() => {\n    const content = contentRef.current;\n    if (!content) return undefined;\n\n    const measure = () => {\n      const nextHeight = content.getBoundingClientRect().height;\n      // jsdom reports zero-sized layout boxes; leaving height automatic there\n      // keeps component tests representative without changing browser behavior.\n      setHeight(nextHeight > 0 ? nextHeight : undefined);\n    };\n\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return undefined;\n\n    const observer = new ResizeObserver(measure);\n    observer.observe(content);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div\n      data-testid=\"add-backend-panel-height\"\n      style={height === undefined ? undefined : { height }}\n      className=\"overflow-hidden transition-[height] duration-300 ease-in-out motion-reduce:transition-none\"\n    >\n      <div ref={contentRef}>{children}</div>\n    </div>\n  );\n}\n\n/**\n * Collects every setup instruction for the selected location into one\n * collapsible note.\n *\n * All of the guidance lives here — the intro, the example command (local) or\n * the host formats to use with a tunnel (remote), and the docs link — so users\n * never have to leave the modal to find out what belongs in the host field.\n * It starts collapsed so the connection form remains compact; users can\n * reveal the complete instructions without leaving the modal.\n *\n * Open/close uses a `grid-template-rows` transition (`0fr` ↔ `1fr`) so the\n * height animates without a fixed `max-height` guess. Content stays mounted\n * so the toggle does not remount the docs link on every expand.\n */\nfunction AgentServerGuidance({ location }: { location: AgentServerLocation }) {\n  const { t } = useTranslation(\"openhands\");\n  const [isExpanded, setIsExpanded] = React.useState(false);\n  const isRemote = location === \"remote\";\n  const title = isRemote\n    ? t(I18nKey.BACKEND$REMOTE_SETUP_TITLE)\n    : t(I18nKey.BACKEND$BEFORE_CONNECT_TITLE);\n  const description = isRemote\n    ? t(I18nKey.BACKEND$REMOTE_SETUP_DESCRIPTION)\n    : t(I18nKey.BACKEND$LOCAL_SETUP_DESCRIPTION);\n  const docsHref = isRemote\n    ? REMOTE_AGENT_SERVER_DOCS_URL\n    : LOCAL_AGENT_SERVER_DOCS_URL;\n  const docsLabel = isRemote\n    ? t(I18nKey.BACKEND$REMOTE_SETUP_DOCS)\n    : t(I18nKey.BACKEND$LOCAL_SETUP_DOCS);\n  const testIdRoot = isRemote ? \"add-backend-remote\" : \"add-backend-local\";\n  const toggleId = `${testIdRoot}-guidance-toggle`;\n  const bodyId = `${testIdRoot}-guidance-body`;\n\n  return (\n    <aside\n      data-testid={`${testIdRoot}-guidance`}\n      className=\"rounded-lg bg-[var(--oh-surface-raised)] text-sm text-[var(--oh-muted)]\"\n    >\n      {/* Heading wraps the button so the accordion keeps a real heading in the\n          document outline while the whole row stays clickable. */}\n      <h4 className=\"text-white\">\n        <button\n          id={toggleId}\n          type=\"button\"\n          onClick={() => setIsExpanded((expanded) => !expanded)}\n          aria-expanded={isExpanded}\n          aria-controls={bodyId}\n          data-testid={toggleId}\n          className={cn(\n            // Padding lives on the button rather than the card so the hover\n            // fill spans the full row.\n            \"flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg px-3 py-2 text-left font-medium\",\n            \"transition-colors hover:bg-[var(--oh-interactive-hover)]\",\n            \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-300\",\n          )}\n        >\n          <span className=\"flex min-w-0 items-center gap-2\">\n            <Info\n              className=\"size-4 shrink-0 text-[var(--oh-muted)]\"\n              aria-hidden\n            />\n            <span className=\"truncate\">{title}</span>\n          </span>\n          <ChevronDown\n            className={cn(\n              \"size-5 shrink-0 text-[var(--oh-muted)] transition-transform duration-200 ease-out\",\n              isExpanded && \"rotate-180\",\n            )}\n            aria-hidden\n          />\n        </button>\n      </h4>\n\n      {/* Outer grid owns the height animation; the inner overflow clip is\n          required so `1fr` measures the content while `0fr` fully collapses. */}\n      <div\n        className={cn(\n          \"grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none\",\n          isExpanded ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n        )}\n      >\n        <div className=\"overflow-hidden\">\n          <div\n            id={bodyId}\n            data-testid={bodyId}\n            role=\"region\"\n            aria-labelledby={toggleId}\n            aria-hidden={!isExpanded}\n            inert={!isExpanded ? true : undefined}\n            className={cn(\n              \"flex flex-col gap-2 px-3 pb-3 transition-opacity duration-200 ease-out motion-reduce:transition-none\",\n              isExpanded ? \"opacity-100\" : \"opacity-0\",\n            )}\n          >\n            <p className=\"leading-5\">{description}</p>\n\n            {isRemote ? (\n              <div>\n                <h5 className=\"font-medium text-white\">\n                  {t(I18nKey.BACKEND$REMOTE_CONNECTION_TITLE)}\n                </h5>\n                <p className=\"mt-1 leading-5\">\n                  {t(I18nKey.BACKEND$REMOTE_CONNECTION_DESCRIPTION)}\n                </p>\n              </div>\n            ) : (\n              <code className=\"block break-words font-mono text-xs text-white\">\n                {LOCAL_BACKEND_COMMAND}\n              </code>\n            )}\n\n            <a\n              href={docsHref}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              data-testid={`${testIdRoot}-docs-link`}\n              tabIndex={isExpanded ? undefined : -1}\n              className=\"inline-flex w-fit items-center gap-1.5 text-primary hover:underline\"\n            >\n              <span>{docsLabel}</span>\n              <ExternalLinkIcon className=\"size-4 shrink-0\" aria-hidden />\n            </a>\n          </div>\n        </div>\n      </div>\n    </aside>\n  );\n}\n\nfunction AddBackendChooser({\n  onConnected,\n  source,\n}: {\n  onConnected: (\n    payload: BackendFormSubmitPayload,\n    connectionMethod: BackendConnectionMethod,\n    metadata?: BackendConnectionTestMetadata,\n  ) => void;\n  source: BackendAddedSource;\n}) {\n  const { t } = useTranslation(\"openhands\");\n  const [selectedOption, setSelectedOption] =\n    React.useState<AddBackendOption>(\"cloud\");\n  const [agentServerLocation, setAgentServerLocation] =\n    React.useState<AgentServerLocation>(\"local\");\n  const panelId = \"add-backend-selected-panel\";\n  const selectedTabId = `add-backend-option-${selectedOption}-tab`;\n  const isCloudSelected = selectedOption === \"cloud\";\n\n  return (\n    <div data-testid=\"add-backend-chooser\" className=\"flex flex-col\">\n      <div\n        role=\"tablist\"\n        aria-label={t(I18nKey.BACKEND$CHOOSER_TITLE)}\n        className=\"grid grid-cols-2 overflow-hidden rounded-lg border border-[var(--oh-border)]\"\n      >\n        <BackendOptionTab\n          value=\"cloud\"\n          selectedValue={selectedOption}\n          title={t(I18nKey.BACKEND$CLOUD_TITLE)}\n          description={t(I18nKey.BACKEND$CLOUD_OPTION_DESCRIPTION)}\n          icon={\n            <OpenHandsLogoWhite\n              width={32}\n              height={32}\n              data-testid=\"add-backend-option-cloud-logo\"\n            />\n          }\n          onSelect={setSelectedOption}\n          panelId={panelId}\n          testId=\"add-backend-option-cloud\"\n        />\n        <BackendOptionTab\n          value=\"agent-server\"\n          selectedValue={selectedOption}\n          title={t(I18nKey.BACKEND$AGENT_SERVER_TITLE)}\n          description={t(I18nKey.BACKEND$AGENT_SERVER_OPTION_DESCRIPTION)}\n          icon={<ServerIcon className=\"size-6\" />}\n          onSelect={setSelectedOption}\n          panelId={panelId}\n          testId=\"add-backend-option-agent-server\"\n        />\n      </div>\n\n      <div className=\"mt-6\">\n        <AnimatedPanelHeight>\n          <section\n            id={panelId}\n            role=\"tabpanel\"\n            aria-labelledby={selectedTabId}\n            className=\"min-w-0\"\n          >\n            {isCloudSelected ? (\n              /* Padding keeps the CTA and Advanced host field from hugging the\n                 border; when Advanced expands the panel grows with the content\n                 instead of squeezing it into the reserved min-height. */\n              <div\n                data-testid=\"add-backend-cloud-panel\"\n                className={cn(\n                  \"relative isolate flex min-h-[13.5rem] w-full items-center justify-center rounded-xl border border-[var(--oh-border)] px-5 py-6\",\n                  // A soft greyscale halo sits behind the CTA; -z-10 keeps it under the\n                  // content rather than washing over it.\n                  \"before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-xl\",\n                  \"before:bg-[radial-gradient(75%_75%_at_50%_50%,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0)_70%)]\",\n                )}\n              >\n                <CloudLoginColumn\n                  onConnected={onConnected}\n                  testIdRoot=\"add-backend\"\n                  analyticsSource={source}\n                  showBranding={false}\n                />\n              </div>\n            ) : (\n              <div\n                data-testid=\"add-backend-agent-server-panel\"\n                className=\"mx-auto w-full max-w-xl\"\n              >\n                {/* Rules on either side center the toggle and read as a\n                    divider between the chooser and the connection form. */}\n                <div className=\"flex items-center gap-3\">\n                  <span\n                    className=\"h-px flex-1 bg-[var(--oh-border)]\"\n                    aria-hidden\n                  />\n                  <SegmentedToggle<AgentServerLocation>\n                    value={agentServerLocation}\n                    options={[\n                      {\n                        value: \"local\",\n                        label: t(I18nKey.BACKEND$KIND_LOCAL),\n                        icon: <Monitor aria-hidden />,\n                      },\n                      {\n                        value: \"remote\",\n                        label: t(I18nKey.BACKEND$KIND_REMOTE),\n                        icon: <Globe aria-hidden />,\n                      },\n                    ]}\n                    onChange={setAgentServerLocation}\n                    ariaLabel={t(I18nKey.BACKEND$AGENT_SERVER_LOCATION)}\n                    testId=\"add-backend-location\"\n                  />\n                  <span\n                    className=\"h-px flex-1 bg-[var(--oh-border)]\"\n                    aria-hidden\n                  />\n                </div>\n\n                <div className=\"mt-4 flex flex-col gap-4\">\n                  <AgentServerGuidance\n                    key={agentServerLocation}\n                    location={agentServerLocation}\n                  />\n                  <ManualConnectionColumn\n                    onConnected={onConnected}\n                    testIdRoot=\"add-backend\"\n                    requireApiKey={agentServerLocation === \"remote\"}\n                    submitLabel={t(I18nKey.BACKEND$CONNECT)}\n                    submittingLabel={t(\n                      I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING,\n                    )}\n                    fixedKind=\"local\"\n                    showKindSelector={false}\n                  />\n                </div>\n              </div>\n            )}\n          </section>\n        </AnimatedPanelHeight>\n      </div>\n    </div>\n  );\n}\n\nfunction AddBackendConnectionOptions({\n  onClose,\n  source,\n}: {\n  onClose: () => void;\n  source: BackendAddedSource;\n}) {\n  const { addBackend } = useActiveBackendContext();\n  const redirectAfterAdd = useRedirectAfterAddBackend();\n  const { trackBackendAdded } = useTracking();\n  const lockedCloudHost = getLockedCloudHost();\n\n  const handleConnected = React.useCallback(\n    (\n      payload: BackendFormSubmitPayload,\n      connectionMethod: BackendConnectionMethod,\n      metadata?: BackendConnectionTestMetadata,\n    ) => {\n      addBackend(payload);\n      trackBackendAdded({\n        backendKind: payload.kind,\n        connectionMethod,\n        hasApiKey: Boolean(payload.apiKey),\n        source,\n        agentServerVersion: metadata?.agentServerVersion,\n      });\n      redirectAfterAdd();\n      onClose();\n    },\n    [addBackend, redirectAfterAdd, onClose, trackBackendAdded, source],\n  );\n\n  if (lockedCloudHost) {\n    return (\n      <CloudLoginColumn\n        onConnected={handleConnected}\n        testIdRoot=\"add-backend\"\n        lockedHost={lockedCloudHost}\n        analyticsSource={source}\n      />\n    );\n  }\n\n  return <AddBackendChooser onConnected={handleConnected} source={source} />;\n}\n\n// ── Modal wrappers ──────────────────────────────────────────────────\n\n/**\n * Modal wrapper. In **add** mode it renders a two-column layout\n * (manual connection | OR | Cloud login). In **edit** mode it wraps\n * the standard `BackendForm`.\n */\nexport function BackendFormModal({\n  mode,\n  backend,\n  onClose,\n  source = \"add_backend_modal\",\n  hideCloseButton = false,\n}: BackendFormModalProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (mode === \"add\") {\n    return (\n      <ModalBackdrop\n        onClose={hideCloseButton ? undefined : onClose}\n        closeOnEscape={false}\n        closeOnBackdropClick={!hideCloseButton}\n        aria-label={t(I18nKey.BACKEND$ADD_TITLE)}\n      >\n        <div\n          data-testid={\n            hideCloseButton ? \"onboarding-modal\" : \"add-backend-modal\"\n          }\n          className={cn(\n            \"relative max-h-[92vh] w-[720px] overflow-y-auto rounded-xl border border-[var(--oh-border)] bg-base-secondary p-6\",\n            MODAL_MAX_WIDTH_VIEWPORT,\n          )}\n        >\n          {hideCloseButton ? null : (\n            <ModalCloseButton onClose={onClose} testId=\"add-backend-close\" />\n          )}\n          {hideCloseButton ? null : (\n            <div className=\"pr-8\">\n              <h2 className={modalTitleLgClassName}>\n                {t(I18nKey.BACKEND$CHOOSER_TITLE)}\n              </h2>\n              <p\n                className=\"mt-2 text-sm leading-6 text-[var(--oh-muted)]\"\n                data-testid=\"add-backend-description\"\n              >\n                {t(I18nKey.BACKEND$CHOOSER_DESCRIPTION)}{\" \"}\n                <a\n                  href={DEPLOYMENT_OPTIONS_URL}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  aria-label={t(I18nKey.BACKEND$DEPLOYMENT_OPTIONS)}\n                  data-testid=\"add-backend-deployment-options-link\"\n                  className=\"text-primary hover:underline\"\n                >\n                  {t(I18nKey.CTA$LEARN_MORE)}\n                  <ExternalLinkIcon\n                    className=\"ml-1 inline size-3.5 align-[-0.125em]\"\n                    aria-hidden\n                  />\n                </a>\n              </p>\n            </div>\n          )}\n\n          <div className={hideCloseButton ? undefined : \"mt-5\"}>\n            <AddBackendConnectionOptions onClose={onClose} source={source} />\n          </div>\n        </div>\n      </ModalBackdrop>\n    );\n  }\n\n  // Edit mode — single-column form (unchanged)\n  const testIdRoot = \"edit-backend\";\n  return (\n    <ModalBackdrop\n      onClose={onClose}\n      closeOnEscape={false}\n      aria-label={t(I18nKey.BACKEND$EDIT_TITLE)}\n    >\n      <div\n        data-testid={`${testIdRoot}-modal`}\n        className={cn(\n          \"relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]\",\n          modalWidthClassName(\"md\"),\n        )}\n      >\n        <ModalCloseButton onClose={onClose} testId={`${testIdRoot}-close`} />\n        <h2 className={cn(\"pr-6\", modalTitleLgClassName)}>\n          {t(I18nKey.BACKEND$EDIT_TITLE)}\n        </h2>\n        <BackendForm\n          mode=\"edit\"\n          backend={backend}\n          onSubmitted={onClose}\n          testIdRoot={testIdRoot}\n        />\n      </div>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/backends/backend-row.d.ts

@@ -9,5 +9,5 @@ interface BackendRowProps {
     onRemove: () => void;
     onLogin?: (apiKey: string) => void;
 }
-export declare function BackendRow({ backend, health, orgLabel, onSelect, onEdit, onRemove, onLogin, }: BackendRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function BackendRow({ backend, health, orgLabel, onSelect, onEdit, onRemove, onLogin, }: BackendRowProps): import("react").JSX.Element;
 export {};

package/dist/components/features/backends/backend-selector.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 interface BackendSelectorProps {
     /** Render the menu above the trigger (e.g. when pinned to bottom of sidebar). */
     openUpward?: boolean;
@@ -24,5 +25,5 @@ interface BackendSelectorProps {
      */
     sidebarCollapsed?: boolean;
 }
-export declare function BackendSelector({ openUpward, hideTrigger, defaultOpen, onSelectOption, onOpenAddBackend, onOpenManageBackends, sidebarCollapsed, }?: BackendSelectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function BackendSelector({ openUpward, hideTrigger, defaultOpen, onSelectOption, onOpenAddBackend, onOpenManageBackends, sidebarCollapsed, }?: BackendSelectorProps): React.JSX.Element;
 export {};

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

@@ -1,3 +1,4 @@
+import React from "react";
 interface BackendStatusDotProps {
     /** `null` while the first probe is in flight. */
     isConnected: boolean | null | "unavailable";
@@ -9,5 +10,5 @@ interface BackendStatusDotProps {
  *   - red when disconnected
  *   - dim gray while the first probe is in flight
  */
-export declare function BackendStatusDot({ isConnected, className, }: BackendStatusDotProps): import("react/jsx-runtime").JSX.Element;
+export declare function BackendStatusDot({ isConnected, className, }: BackendStatusDotProps): React.JSX.Element;
 export {};

package/dist/components/features/backends/backend-version.d.ts

@@ -1,4 +1,4 @@
 import { type Backend } from "#/api/backend-registry/types";
 export declare function BackendVersion({ backend }: {
     backend: Backend;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react").JSX.Element | null;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"device-flow-auth.cjs","names":[],"sources":["../../../../src/components/features/backends/device-flow-auth.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalBody } from \"#/components/shared/modals/modal-body\";\nimport { useDeviceFlow, type DeviceFlowStatus } from \"#/hooks/use-device-flow\";\nimport type { CloudConnectionSource } from \"#/services/cloud-funnel-analytics\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\ntype DeviceFlowButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"unstyled\";\ntype DeviceFlowStatusDisplay = \"inline\" | \"modal\";\n\ninterface DeviceFlowAuthProps {\n  /** The host URL for the cloud backend */\n  host: string;\n  /** Callback when authentication succeeds with the API key */\n  onSuccess: (apiKey: string) => void;\n  /** Test ID prefix for the component */\n  testIdRoot: string;\n  /** Whether the login button should be disabled (e.g., when no host is entered) */\n  isDisabled?: boolean;\n  /** Override for the idle button label and icon-only accessible name. */\n  idleButtonLabel?: string;\n  /** Optional visible content for the idle button. Defaults to the idle label. */\n  idleButtonContent?: React.ReactNode;\n  /** Optional classes for the root wrapper. */\n  className?: string;\n  /** Optional classes for the idle button. */\n  buttonClassName?: string;\n  /** Visual variant for the idle button. */\n  buttonVariant?: DeviceFlowButtonVariant;\n  /** Whether in-progress auth content should render inline or in a modal. */\n  statusDisplay?: DeviceFlowStatusDisplay;\n  /** Product surface that initiated this authorization attempt. */\n  analyticsSource?: CloudConnectionSource;\n}\n\n/**\n * Device Flow authentication UI component.\n *\n * Shows a \"Login with OpenHands Cloud\" button that initiates OAuth 2.0 Device Flow\n * authentication. Displays status during the auth process and auto-opens\n * the browser for user authorization.\n */\n/**\n * Validate that a URL is safe to open in a popup.\n * Prevents XSS via javascript: URLs or other malicious schemes.\n */\nfunction isValidVerificationUrl(url: string): boolean {\n  try {\n    const parsed = new URL(url);\n    return parsed.protocol === \"https:\";\n  } catch {\n    return false;\n  }\n}\n\nexport function DeviceFlowAuth({\n  host,\n  onSuccess,\n  testIdRoot,\n  isDisabled = false,\n  idleButtonLabel,\n  idleButtonContent,\n  className,\n  buttonClassName,\n  buttonVariant = \"primary\",\n  statusDisplay = \"inline\",\n  analyticsSource,\n}: DeviceFlowAuthProps) {\n  const { t } = useTranslation(\"openhands\");\n  const deviceFlow = useDeviceFlow();\n  const popupRef = React.useRef<Window | null>(null);\n\n  // Close popup on unmount or when auth completes/errors\n  React.useEffect(() => {\n    return () => {\n      popupRef.current?.close();\n    };\n  }, []);\n\n  // Update popup URL when verification URL becomes available\n  React.useEffect(() => {\n    if (\n      deviceFlow.status === \"awaiting_authorization\" &&\n      deviceFlow.verificationUrl &&\n      popupRef.current &&\n      !popupRef.current.closed\n    ) {\n      // Validate URL before assigning to prevent XSS\n      if (!isValidVerificationUrl(deviceFlow.verificationUrl)) {\n        console.error(\"Invalid verification URL protocol\");\n        return;\n      }\n      try {\n        popupRef.current.location.href = deviceFlow.verificationUrl;\n      } catch {\n        // Cross-origin error - popup was navigated away\n        // Open a new one as fallback\n        popupRef.current = window.open(\n          deviceFlow.verificationUrl,\n          \"_blank\",\n          \"noopener,noreferrer\",\n        );\n      }\n    }\n  }, [deviceFlow.status, deviceFlow.verificationUrl]);\n\n  // Call onSuccess when authentication completes\n  React.useEffect(() => {\n    if (deviceFlow.status === \"success\" && deviceFlow.apiKey) {\n      try {\n        onSuccess(deviceFlow.apiKey);\n      } finally {\n        deviceFlow.reset();\n        popupRef.current?.close();\n      }\n    }\n  }, [deviceFlow.status, deviceFlow.apiKey, deviceFlow.reset, onSuccess]);\n\n  const handleStartAuth = () => {\n    // Normalize and validate the host URL\n    const normalizedHost = host.trim().replace(/\\/+$/, \"\");\n    const fullHost = /^https?:\\/\\//i.test(normalizedHost)\n      ? normalizedHost\n      : `https://${normalizedHost}`;\n\n    // Validate URL before proceeding\n    try {\n      const url = new URL(fullHost);\n      // Check for URL manipulation attacks\n      if (url.username || url.password) {\n        throw new Error(\"Invalid URL format\");\n      }\n    } catch {\n      return; // Invalid URL, don't proceed\n    }\n\n    // Open popup immediately on user click to avoid popup blocker\n    // Start with about:blank and update URL once we have verification URL\n    // Note: We intentionally don't use \"noopener\" here because we need to\n    // maintain a reference to update the popup's location when the\n    // verification URL becomes available\n    popupRef.current = window.open(\"about:blank\", \"_blank\");\n\n    if (!popupRef.current) {\n      // Popup was blocked - flow will still work, user can click manual link\n      console.warn(\"Popup blocked - user will need to use manual link\");\n    }\n\n    deviceFlow.start(fullHost, analyticsSource);\n  };\n\n  const handleCancel = () => {\n    deviceFlow.cancel();\n    popupRef.current?.close();\n  };\n\n  const statusContent = (\n    <DeviceFlowStatusContent\n      status={deviceFlow.status}\n      error={deviceFlow.error}\n      verificationUrl={deviceFlow.verificationUrl}\n      testIdRoot={testIdRoot}\n      onCancel={handleCancel}\n      onRetry={handleStartAuth}\n    />\n  );\n  const showStatusModal =\n    statusDisplay === \"modal\" && deviceFlow.status !== \"idle\";\n  const idleLabel = idleButtonLabel ?? t(I18nKey.BACKEND$LOGIN_WITH_OPENHANDS);\n\n  return (\n    <div\n      data-testid={`${testIdRoot}-device-flow`}\n      className={cn(\"flex flex-col gap-3\", className)}\n    >\n      {deviceFlow.status === \"idle\" && buttonVariant === \"unstyled\" && (\n        <button\n          type=\"button\"\n          onClick={handleStartAuth}\n          data-testid={`${testIdRoot}-login-button`}\n          className={buttonClassName}\n          disabled={isDisabled}\n          aria-label={idleButtonContent ? idleLabel : undefined}\n        >\n          {idleButtonContent ?? idleLabel}\n        </button>\n      )}\n\n      {deviceFlow.status === \"idle\" && buttonVariant !== \"unstyled\" && (\n        <BrandButton\n          type=\"button\"\n          variant={buttonVariant}\n          onClick={handleStartAuth}\n          testId={`${testIdRoot}-login-button`}\n          className={cn(\"w-full\", buttonClassName)}\n          isDisabled={isDisabled}\n          ariaLabel={idleButtonContent ? idleLabel : undefined}\n        >\n          {idleButtonContent ?? idleLabel}\n        </BrandButton>\n      )}\n\n      {statusDisplay === \"inline\" ? statusContent : null}\n\n      {showStatusModal ? (\n        <ModalBackdrop\n          onClose={handleCancel}\n          aria-label={t(I18nKey.BACKEND$LOGIN_WITH_OPENHANDS)}\n          closeOnBackdropClick={false}\n        >\n          <ModalBody\n            testID={`${testIdRoot}-auth-modal`}\n            width=\"sm\"\n            className=\"items-stretch border border-[var(--oh-border)]\"\n          >\n            {statusContent}\n          </ModalBody>\n        </ModalBackdrop>\n      ) : null}\n    </div>\n  );\n}\n\ninterface DeviceFlowStatusContentProps {\n  status: DeviceFlowStatus;\n  error: string | null;\n  verificationUrl: string | null;\n  testIdRoot: string;\n  onCancel: () => void;\n  onRetry: () => void;\n}\n\nfunction DeviceFlowStatusContent({\n  status,\n  error,\n  verificationUrl,\n  testIdRoot,\n  onCancel,\n  onRetry,\n}: DeviceFlowStatusContentProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (status === \"idle\" || status === \"success\") return null;\n\n  if (status === \"starting\") {\n    return (\n      <div\n        className=\"flex items-center gap-2 rounded-lg bg-base-tertiary p-3\"\n        data-testid={`${testIdRoot}-auth-starting`}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <LoadingSpinner />\n        <span className=\"text-sm text-[var(--oh-text-tertiary)]\">\n          {t(I18nKey.BACKEND$AUTH_STARTING)}\n        </span>\n      </div>\n    );\n  }\n\n  if (status === \"awaiting_authorization\") {\n    const validVerificationUrl =\n      verificationUrl && isValidVerificationUrl(verificationUrl)\n        ? verificationUrl\n        : null;\n\n    return (\n      <div\n        className=\"flex flex-col gap-4 rounded-lg bg-base-tertiary p-4\"\n        data-testid={`${testIdRoot}-auth-awaiting`}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <div className=\"flex items-center gap-2\">\n          <LoadingSpinner />\n          <span className=\"text-sm font-medium text-white\">\n            {t(I18nKey.BACKEND$AUTH_AWAITING)}\n          </span>\n        </div>\n        <p className=\"text-sm leading-5 text-[var(--oh-text-tertiary)]\">\n          {t(I18nKey.BACKEND$AUTH_BROWSER_OPENED)}\n        </p>\n        {validVerificationUrl ? (\n          <div className=\"flex flex-col gap-1 rounded-md border border-[var(--oh-border)] bg-[var(--oh-surface)] p-3 text-xs text-[var(--oh-muted)]\">\n            <p>{t(I18nKey.BACKEND$AUTH_OPEN_MANUALLY)}</p>\n            <a\n              href={validVerificationUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"max-h-16 overflow-auto break-all text-blue-400 hover:underline\"\n            >\n              {validVerificationUrl}\n            </a>\n          </div>\n        ) : null}\n        <BrandButton\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onCancel}\n          testId={`${testIdRoot}-auth-cancel`}\n          className=\"w-full\"\n        >\n          {t(I18nKey.BACKEND$AUTH_CANCEL)}\n        </BrandButton>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"flex flex-col gap-3 rounded-lg border border-red-700 bg-red-900/20 p-4\"\n      data-testid={`${testIdRoot}-auth-error`}\n      role=\"alert\"\n    >\n      <p className=\"text-sm text-red-400\">{error}</p>\n      <BrandButton\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={onRetry}\n        testId={`${testIdRoot}-auth-retry`}\n        className=\"w-full\"\n      >\n        {t(I18nKey.BACKEND$AUTH_RETRY)}\n      </BrandButton>\n    </div>\n  );\n}\n\nfunction LoadingSpinner() {\n  return (\n    <svg\n      className=\"animate-spin h-4 w-4 text-white\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      />\n    </svg>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"device-flow-auth.cjs","names":[],"sources":["../../../../src/components/features/backends/device-flow-auth.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalBody } from \"#/components/shared/modals/modal-body\";\nimport { useDeviceFlow, type DeviceFlowStatus } from \"#/hooks/use-device-flow\";\nimport type { CloudConnectionSource } from \"#/services/cloud-funnel-analytics\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\ntype DeviceFlowButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"unstyled\";\ntype DeviceFlowStatusDisplay = \"inline\" | \"modal\";\n\ninterface DeviceFlowAuthProps {\n  /** The host URL for the cloud backend */\n  host: string;\n  /** Callback when authentication succeeds with the API key */\n  onSuccess: (apiKey: string) => void;\n  /** Test ID prefix for the component */\n  testIdRoot: string;\n  /** Whether the login button should be disabled (e.g., when no host is entered) */\n  isDisabled?: boolean;\n  /** Override for the idle button label and icon-only accessible name. */\n  idleButtonLabel?: string;\n  /** Optional visible content for the idle button. Defaults to the idle label. */\n  idleButtonContent?: React.ReactNode;\n  /** Optional content shown only before authentication starts. */\n  idleDescription?: React.ReactNode;\n  /**\n   * Optional content rendered under the idle button and, like\n   * `idleDescription`, only before authentication starts — so secondary\n   * controls step aside once the flow takes over the surface.\n   */\n  idleFooter?: React.ReactNode;\n  /** Optional classes for the root wrapper. */\n  className?: string;\n  /** Optional classes for the idle button. */\n  buttonClassName?: string;\n  /** Visual variant for the idle button. */\n  buttonVariant?: DeviceFlowButtonVariant;\n  /** Whether in-progress auth content should render inline or in a modal. */\n  statusDisplay?: DeviceFlowStatusDisplay;\n  /** Product surface that initiated this authorization attempt. */\n  analyticsSource?: CloudConnectionSource;\n}\n\n/**\n * Device Flow authentication UI component.\n *\n * Shows a \"Connect to OpenHands\" button that initiates OAuth 2.0 Device Flow\n * authentication. Displays status during the auth process and auto-opens\n * the browser for user authorization.\n */\n/**\n * Validate that a URL is safe to open in a popup.\n * Prevents XSS via javascript: URLs or other malicious schemes.\n */\nfunction isValidVerificationUrl(url: string): boolean {\n  try {\n    const parsed = new URL(url);\n    return parsed.protocol === \"https:\";\n  } catch {\n    return false;\n  }\n}\n\nexport function DeviceFlowAuth({\n  host,\n  onSuccess,\n  testIdRoot,\n  isDisabled = false,\n  idleButtonLabel,\n  idleButtonContent,\n  idleDescription,\n  idleFooter,\n  className,\n  buttonClassName,\n  buttonVariant = \"primary\",\n  statusDisplay = \"inline\",\n  analyticsSource,\n}: DeviceFlowAuthProps) {\n  const { t } = useTranslation(\"openhands\");\n  const deviceFlow = useDeviceFlow();\n  const popupRef = React.useRef<Window | null>(null);\n\n  // Close popup on unmount or when auth completes/errors\n  React.useEffect(() => {\n    return () => {\n      popupRef.current?.close();\n    };\n  }, []);\n\n  // Update popup URL when verification URL becomes available\n  React.useEffect(() => {\n    if (\n      deviceFlow.status === \"awaiting_authorization\" &&\n      deviceFlow.verificationUrl &&\n      popupRef.current &&\n      !popupRef.current.closed\n    ) {\n      // Validate URL before assigning to prevent XSS\n      if (!isValidVerificationUrl(deviceFlow.verificationUrl)) {\n        console.error(\"Invalid verification URL protocol\");\n        return;\n      }\n      try {\n        popupRef.current.location.href = deviceFlow.verificationUrl;\n      } catch {\n        // Cross-origin error - popup was navigated away\n        // Open a new one as fallback\n        popupRef.current = window.open(\n          deviceFlow.verificationUrl,\n          \"_blank\",\n          \"noopener,noreferrer\",\n        );\n      }\n    }\n  }, [deviceFlow.status, deviceFlow.verificationUrl]);\n\n  // Call onSuccess when authentication completes\n  React.useEffect(() => {\n    if (deviceFlow.status === \"success\" && deviceFlow.apiKey) {\n      try {\n        onSuccess(deviceFlow.apiKey);\n      } finally {\n        deviceFlow.reset();\n        popupRef.current?.close();\n      }\n    }\n  }, [deviceFlow.status, deviceFlow.apiKey, deviceFlow.reset, onSuccess]);\n\n  const handleStartAuth = () => {\n    // Normalize and validate the host URL\n    const normalizedHost = host.trim().replace(/\\/+$/, \"\");\n    const fullHost = /^https?:\\/\\//i.test(normalizedHost)\n      ? normalizedHost\n      : `https://${normalizedHost}`;\n\n    // Validate URL before proceeding\n    try {\n      const url = new URL(fullHost);\n      // Check for URL manipulation attacks\n      if (url.username || url.password) {\n        throw new Error(\"Invalid URL format\");\n      }\n    } catch {\n      return; // Invalid URL, don't proceed\n    }\n\n    // Open popup immediately on user click to avoid popup blocker\n    // Start with about:blank and update URL once we have verification URL\n    // Note: We intentionally don't use \"noopener\" here because we need to\n    // maintain a reference to update the popup's location when the\n    // verification URL becomes available\n    popupRef.current = window.open(\"about:blank\", \"_blank\");\n\n    if (!popupRef.current) {\n      // Popup was blocked - flow will still work, user can click manual link\n      console.warn(\"Popup blocked - user will need to use manual link\");\n    }\n\n    deviceFlow.start(fullHost, analyticsSource);\n  };\n\n  const handleCancel = () => {\n    deviceFlow.cancel();\n    popupRef.current?.close();\n  };\n\n  const statusContent = (\n    <DeviceFlowStatusContent\n      status={deviceFlow.status}\n      error={deviceFlow.error}\n      verificationUrl={deviceFlow.verificationUrl}\n      testIdRoot={testIdRoot}\n      onCancel={handleCancel}\n      onRetry={handleStartAuth}\n    />\n  );\n  const showStatusModal =\n    statusDisplay === \"modal\" && deviceFlow.status !== \"idle\";\n  const idleLabel = idleButtonLabel ?? t(I18nKey.BACKEND$LOGIN_WITH_OPENHANDS);\n\n  return (\n    <div\n      data-testid={`${testIdRoot}-device-flow`}\n      className={cn(\"flex flex-col gap-3\", className)}\n    >\n      {deviceFlow.status === \"idle\" ? idleDescription : null}\n\n      {deviceFlow.status === \"idle\" && buttonVariant === \"unstyled\" && (\n        <button\n          type=\"button\"\n          onClick={handleStartAuth}\n          data-testid={`${testIdRoot}-login-button`}\n          className={buttonClassName}\n          disabled={isDisabled}\n          aria-label={idleButtonContent ? idleLabel : undefined}\n        >\n          {idleButtonContent ?? idleLabel}\n        </button>\n      )}\n\n      {deviceFlow.status === \"idle\" && buttonVariant !== \"unstyled\" && (\n        <BrandButton\n          type=\"button\"\n          variant={buttonVariant}\n          onClick={handleStartAuth}\n          testId={`${testIdRoot}-login-button`}\n          className={buttonClassName}\n          isDisabled={isDisabled}\n          ariaLabel={idleButtonContent ? idleLabel : undefined}\n        >\n          {idleButtonContent ?? idleLabel}\n        </BrandButton>\n      )}\n\n      {deviceFlow.status === \"idle\" ? idleFooter : null}\n\n      {statusDisplay === \"inline\" ? statusContent : null}\n\n      {showStatusModal ? (\n        <ModalBackdrop\n          onClose={handleCancel}\n          aria-label={t(I18nKey.BACKEND$LOGIN_WITH_OPENHANDS)}\n          closeOnBackdropClick={false}\n        >\n          <ModalBody\n            testID={`${testIdRoot}-auth-modal`}\n            width=\"sm\"\n            className=\"items-stretch border border-[var(--oh-border)]\"\n          >\n            {statusContent}\n          </ModalBody>\n        </ModalBackdrop>\n      ) : null}\n    </div>\n  );\n}\n\ninterface DeviceFlowStatusContentProps {\n  status: DeviceFlowStatus;\n  error: string | null;\n  verificationUrl: string | null;\n  testIdRoot: string;\n  onCancel: () => void;\n  onRetry: () => void;\n}\n\nfunction DeviceFlowStatusContent({\n  status,\n  error,\n  verificationUrl,\n  testIdRoot,\n  onCancel,\n  onRetry,\n}: DeviceFlowStatusContentProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (status === \"idle\" || status === \"success\") return null;\n\n  if (status === \"starting\") {\n    return (\n      <div\n        className=\"flex items-center justify-center gap-2\"\n        data-testid={`${testIdRoot}-auth-starting`}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <LoadingSpinner />\n        <span className=\"text-sm text-[var(--oh-text-tertiary)]\">\n          {t(I18nKey.BACKEND$AUTH_STARTING)}\n        </span>\n      </div>\n    );\n  }\n\n  if (status === \"awaiting_authorization\") {\n    const validVerificationUrl =\n      verificationUrl && isValidVerificationUrl(verificationUrl)\n        ? verificationUrl\n        : null;\n\n    return (\n      <div\n        className=\"flex flex-col gap-4\"\n        data-testid={`${testIdRoot}-auth-awaiting`}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <div className=\"flex items-center justify-center gap-2\">\n          <LoadingSpinner />\n          <span className=\"text-sm font-medium text-white\">\n            {t(I18nKey.BACKEND$AUTH_AWAITING)}\n          </span>\n        </div>\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-center text-sm leading-5 text-[var(--oh-text-tertiary)]\">\n            {validVerificationUrl\n              ? `${t(I18nKey.BACKEND$AUTH_BROWSER_OPENED)} ${t(I18nKey.BACKEND$AUTH_OPEN_MANUALLY)}`\n              : t(I18nKey.BACKEND$AUTH_BROWSER_OPENED)}\n          </p>\n          {validVerificationUrl ? (\n            <a\n              href={validVerificationUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"max-h-16 overflow-auto break-all text-center text-xs text-blue-400 hover:underline\"\n            >\n              {validVerificationUrl}\n            </a>\n          ) : null}\n        </div>\n        <BrandButton\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onCancel}\n          testId={`${testIdRoot}-auth-cancel`}\n          className=\"w-full\"\n        >\n          {t(I18nKey.BACKEND$AUTH_CANCEL)}\n        </BrandButton>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"flex flex-col gap-3 rounded-lg border border-red-700 bg-red-900/20 p-4\"\n      data-testid={`${testIdRoot}-auth-error`}\n      role=\"alert\"\n    >\n      <p className=\"text-sm text-red-400\">{error}</p>\n      <BrandButton\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={onRetry}\n        testId={`${testIdRoot}-auth-retry`}\n        className=\"w-full\"\n      >\n        {t(I18nKey.BACKEND$AUTH_RETRY)}\n      </BrandButton>\n    </div>\n  );\n}\n\nfunction LoadingSpinner() {\n  return (\n    <svg\n      className=\"animate-spin h-4 w-4 text-white\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      />\n    </svg>\n  );\n}\n"],"mappings":"ieA6DA,SAAS,EAAuB,EAAsB,CACpD,GAAI,CAEF,OAAO,IADY,IAAI,CAChB,EAAO,WAAa,QAC7B,MAAQ,CACN,MAAO,EACT,CACF,CAEA,SAAgB,EAAe,CAC7B,OACA,YACA,aACA,aAAa,GACb,kBACA,oBACA,kBACA,aACA,YACA,kBACA,gBAAgB,UAChB,gBAAgB,SAChB,mBACsB,CACtB,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EAAa,EAAA,cAAc,EAC3B,EAAW,EAAA,QAAM,OAAsB,IAAI,EAGjD,EAAA,QAAM,kBACS,CACX,EAAS,SAAS,MAAM,CAC1B,EACC,CAAC,CAAC,EAGL,EAAA,QAAM,cAAgB,CACpB,GACE,EAAW,SAAW,0BACtB,EAAW,iBACX,EAAS,SACT,CAAC,EAAS,QAAQ,OAClB,CAEA,GAAI,CAAC,EAAuB,EAAW,eAAe,EAAG,CACvD,QAAQ,MAAM,mCAAmC,EACjD,MACF,CACA,GAAI,CACF,EAAS,QAAQ,SAAS,KAAO,EAAW,eAC9C,MAAQ,CAGN,EAAS,QAAU,OAAO,KACxB,EAAW,gBACX,SACA,qBACF,CACF,CACF,CACF,EAAG,CAAC,EAAW,OAAQ,EAAW,eAAe,CAAC,EAGlD,EAAA,QAAM,cAAgB,CACpB,GAAI,EAAW,SAAW,WAAa,EAAW,OAChD,GAAI,CACF,EAAU,EAAW,MAAM,CAC7B,QAAU,CACR,EAAW,MAAM,EACjB,EAAS,SAAS,MAAM,CAC1B,CAEJ,EAAG,CAAC,EAAW,OAAQ,EAAW,OAAQ,EAAW,MAAO,CAAS,CAAC,EAEtE,IAAM,MAAwB,CAE5B,IAAM,EAAiB,EAAK,KAAK,EAAE,QAAQ,OAAQ,EAAE,EAC/C,EAAW,gBAAgB,KAAK,CAAc,EAChD,EACA,WAAW,IAGf,GAAI,CACF,IAAM,EAAM,IAAI,IAAI,CAAQ,EAE5B,GAAI,EAAI,UAAY,EAAI,SACtB,MAAU,MAAM,oBAAoB,CAExC,MAAQ,CACN,MACF,CAOA,EAAS,QAAU,OAAO,KAAK,cAAe,QAAQ,EAEjD,EAAS,SAEZ,QAAQ,KAAK,mDAAmD,EAGlE,EAAW,MAAM,EAAU,CAAe,CAC5C,EAEM,MAAqB,CACzB,EAAW,OAAO,EAClB,EAAS,SAAS,MAAM,CAC1B,EAEM,GACJ,EAAA,EAAA,KAAC,EAAD,CACE,OAAQ,EAAW,OACnB,MAAO,EAAW,MAClB,gBAAiB,EAAW,gBAChB,aACZ,SAAU,EACV,QAAS,CACV,CAAA,EAEG,EACJ,IAAkB,SAAW,EAAW,SAAW,OAC/C,EAAY,GAAmB,EAAE,EAAA,QAAQ,4BAA4B,EAE3E,OACE,EAAA,EAAA,MAAC,MAAD,CACE,cAAa,GAAG,EAAW,cAC3B,UAAW,EAAA,GAAG,sBAAuB,CAAS,WAFhD,CAIG,EAAW,SAAW,OAAS,EAAkB,KAEjD,EAAW,SAAW,QAAU,IAAkB,aACjD,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,cAAa,GAAG,EAAW,eAC3B,UAAW,EACX,SAAU,EACV,aAAY,EAAoB,EAAY,IAAA,YAE3C,GAAqB,CAChB,CAAA,EAGT,EAAW,SAAW,QAAU,IAAkB,aACjD,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,KAAK,SACL,QAAS,EACT,QAAS,EACT,OAAQ,GAAG,EAAW,eACtB,UAAW,EACC,aACZ,UAAW,EAAoB,EAAY,IAAA,YAE1C,GAAqB,CACX,CAAA,EAGd,EAAW,SAAW,OAAS,EAAa,KAE5C,IAAkB,SAAW,EAAgB,KAE7C,GACC,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,QAAS,EACT,aAAY,EAAE,EAAA,QAAQ,4BAA4B,EAClD,qBAAsB,aAEtB,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,OAAQ,GAAG,EAAW,aACtB,MAAM,KACN,UAAU,0DAET,CACQ,CAAA,CACE,CAAA,EACb,IACD,GAET,CAWA,SAAS,EAAwB,CAC/B,SACA,QACA,kBACA,aACA,WACA,WAC+B,CAC/B,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAExC,GAAI,IAAW,QAAU,IAAW,UAAW,OAAO,KAEtD,GAAI,IAAW,WACb,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,yCACV,cAAa,GAAG,EAAW,gBAC3B,KAAK,SACL,YAAU,kBAJZ,EAME,EAAA,EAAA,KAAC,EAAD,CAAiB,CAAA,GACjB,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,kDACb,EAAE,EAAA,QAAQ,qBAAqB,CAC5B,CAAA,CACH,IAIT,GAAI,IAAW,yBAA0B,CACvC,IAAM,EACJ,GAAmB,EAAuB,CAAe,EACrD,EACA,KAEN,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,sBACV,cAAa,GAAG,EAAW,gBAC3B,KAAK,SACL,YAAU,kBAJZ,EAME,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kDAAf,EACE,EAAA,EAAA,KAAC,EAAD,CAAiB,CAAA,GACjB,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,0CACb,EAAE,EAAA,QAAQ,qBAAqB,CAC5B,CAAA,CACH,KACL,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,+BAAf,EACE,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,wEACV,EACG,GAAG,EAAE,EAAA,QAAQ,2BAA2B,EAAE,GAAG,EAAE,EAAA,QAAQ,0BAA0B,IACjF,EAAE,EAAA,QAAQ,2BAA2B,CACxC,CAAA,EACF,GACC,EAAA,EAAA,KAAC,IAAD,CACE,KAAM,EACN,OAAO,SACP,IAAI,sBACJ,UAAU,8FAET,CACA,CAAA,EACD,IACD,KACL,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,KAAK,SACL,QAAQ,YACR,QAAS,EACT,OAAQ,GAAG,EAAW,cACtB,UAAU,kBAET,EAAE,EAAA,QAAQ,mBAAmB,CACnB,CAAA,CACV,GAET,CAEA,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,yEACV,cAAa,GAAG,EAAW,aAC3B,KAAK,iBAHP,EAKE,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,gCAAwB,CAAS,CAAA,GAC9C,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,KAAK,SACL,QAAQ,YACR,QAAS,EACT,OAAQ,GAAG,EAAW,aACtB,UAAU,kBAET,EAAE,EAAA,QAAQ,kBAAkB,CAClB,CAAA,CACV,GAET,CAEA,SAAS,GAAiB,CACxB,OACE,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,kCACV,MAAM,6BACN,KAAK,OACL,QAAQ,YACR,cAAY,iBAEZ,EAAA,EAAA,KAAC,OAAD,CACE,UAAU,aACV,KAAK,eACL,EAAE,iHACH,CAAA,CACE,CAAA,CAET"}

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

@@ -15,6 +15,14 @@ interface DeviceFlowAuthProps {
     idleButtonLabel?: string;
     /** Optional visible content for the idle button. Defaults to the idle label. */
     idleButtonContent?: React.ReactNode;
+    /** Optional content shown only before authentication starts. */
+    idleDescription?: React.ReactNode;
+    /**
+     * Optional content rendered under the idle button and, like
+     * `idleDescription`, only before authentication starts — so secondary
+     * controls step aside once the flow takes over the surface.
+     */
+    idleFooter?: React.ReactNode;
     /** Optional classes for the root wrapper. */
     className?: string;
     /** Optional classes for the idle button. */
@@ -26,5 +34,5 @@ interface DeviceFlowAuthProps {
     /** Product surface that initiated this authorization attempt. */
     analyticsSource?: CloudConnectionSource;
 }
-export declare function DeviceFlowAuth({ host, onSuccess, testIdRoot, isDisabled, idleButtonLabel, idleButtonContent, className, buttonClassName, buttonVariant, statusDisplay, analyticsSource, }: DeviceFlowAuthProps): import("react/jsx-runtime").JSX.Element;
+export declare function DeviceFlowAuth({ host, onSuccess, testIdRoot, isDisabled, idleButtonLabel, idleButtonContent, idleDescription, idleFooter, className, buttonClassName, buttonVariant, statusDisplay, analyticsSource, }: DeviceFlowAuthProps): React.JSX.Element;
 export {};