@openhands/agent-canvas 1.0.0-beta.7 → 1.0.0-beta.9

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

@@ -1 +1 @@
-{"version":3,"file":"backend-form-modal.cjs","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 { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { getAgentServerClientOptions } from \"#/api/agent-server-client-options\";\nimport ChevronDownSmallIcon from \"#/icons/chevron-down-small.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend, BackendKind } from \"#/api/backend-registry/types\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  modalTitleLgClassName,\n  modalTitleLgMediumClassName,\n} from \"#/utils/modal-classes\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { DeviceFlowAuth } from \"./device-flow-auth\";\n\nexport type BackendFormMode = \"add\" | \"edit\";\n\ninterface BackendFormModalProps {\n  mode: BackendFormMode;\n  /** Required when `mode === \"edit\"`. */\n  backend?: Backend;\n  onClose: () => void;\n}\n\nfunction inferKindFromHost(host: string): BackendKind {\n  const trimmed = host.trim().toLowerCase();\n  if (trimmed.includes(\"all-hands.dev\") || trimmed.includes(\"openhands.dev\")) {\n    return \"cloud\";\n  }\n  return \"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\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  if (error instanceof Error) return error.message;\n  if (typeof error === \"string\") return error;\n  return null;\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<void> {\n  // Cloud backends authenticate via OAuth; preflight GET is not applicable.\n  if (backend.kind !== \"local\") return;\n\n  await new ServerClient(\n    getAgentServerClientOptions({\n      host: backend.host,\n      sessionApiKey: backend.apiKey || null,\n      timeout: 5000,\n    }),\n  ).getServerInfo();\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 info.version ?? null;\n    },\n    retry: false,\n    staleTime: 60_000,\n    enabled: backend.kind === \"local\" && !disabled,\n  });\n\n  let statusLabel: string;\n  if (isConnected === true) {\n    statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_CONNECTED);\n  } else if (isConnected === false) {\n    statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_DISCONNECTED);\n  } else {\n    statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING);\n  }\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\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   * 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  onSubmitOverride,\n}: BackendFormProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { addBackend, updateBackend } = useActiveBackendContext();\n\n  const [name, setName] = React.useState(backend?.name ?? \"\");\n  const [host, setHost] = React.useState(backend?.host ?? \"\");\n  const [apiKey, setApiKey] = React.useState(backend?.apiKey ?? \"\");\n  const [connectionError, setConnectionError] = React.useState<string | null>(\n    null,\n  );\n  const [isSubmitting, setIsSubmitting] = React.useState(false);\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  // Kind is inferred from the host on every change.\n  const kind: BackendKind = inferKindFromHost(host);\n\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    event.preventDefault();\n    if (isSubmitting) return;\n\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\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      if (onSubmitOverride) {\n        await onSubmitOverride(payload);\n        return;\n      }\n\n      await testBackendConnection(payload);\n\n      if (mode === \"edit\" && backend) {\n        updateBackend(backend.id, payload);\n      } else {\n        addBackend(payload);\n      }\n\n      onSubmitted();\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  return (\n    <form\n      data-testid={`${testIdRoot}-form`}\n      onSubmit={handleSubmit}\n      className=\"flex flex-col gap-4\"\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        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\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\n/**\n * Left column of the \"Add a Backend\" modal: manual connection via\n * Host + API Key. Designed for self-hosted agent servers and\n * self-hosted OpenHands Cloud with API key auth.\n */\nfunction ManualConnectionColumn({ onClose }: { onClose: () => void }) {\n  const { t } = useTranslation(\"openhands\");\n  const { addBackend } = useActiveBackendContext();\n  const redirectAfterAdd = useRedirectAfterAddBackend();\n\n  const [name, setName] = React.useState(\"\");\n  const [host, setHost] = React.useState(\"\");\n  const [apiKey, setApiKey] = React.useState(\"\");\n  const [connectionError, setConnectionError] = React.useState<string | null>(\n    null,\n  );\n  const [isSubmitting, setIsSubmitting] = React.useState(false);\n\n  const kind: BackendKind = inferKindFromHost(host);\n  const canSubmit =\n    name.trim().length > 0 &&\n    isValidHostUrl(host) &&\n    (kind === \"local\" || apiKey.trim().length > 0);\n\n  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    if (!canSubmit || isSubmitting) return;\n\n    const payload = {\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      await testBackendConnection(payload);\n      addBackend(payload);\n      redirectAfterAdd();\n      onClose();\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  return (\n    <form\n      data-testid=\"add-backend-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=\"add-backend-name\"\n          name=\"add-backend-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          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=\"add-backend-host\"\n          name=\"add-backend-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          placeholder=\"http://localhost:8000\"\n          className=\"w-full\"\n        />\n        <p\n          className=\"text-xs text-[var(--oh-muted)]\"\n          data-testid=\"add-backend-host-helper\"\n        >\n          {t(I18nKey.BACKEND$HOST_HELPER)}\n        </p>\n      </div>\n\n      <SettingsInput\n        testId=\"add-backend-api-key\"\n        name=\"add-backend-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=\"sk-••••••••••\"\n        className=\"w-full\"\n      />\n\n      {connectionError ? (\n        <div\n          role=\"alert\"\n          data-testid=\"add-backend-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=\"add-backend-submit\"\n        className=\"w-full text-center\"\n      >\n        {isSubmitting\n          ? t(I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING)\n          : t(I18nKey.BACKEND$CONNECT)}\n      </BrandButton>\n    </form>\n  );\n}\n\n/**\n * Right column of the \"Add a Backend\" modal: one-click OAuth login\n * with OpenHands Cloud. Includes an \"Advanced\" disclosure for\n * users who self-host OpenHands Cloud and need to override the host.\n */\nfunction CloudLoginColumn({ onClose }: { onClose: () => void }) {\n  const { t } = useTranslation(\"openhands\");\n  const { addBackend } = useActiveBackendContext();\n  const redirectAfterAdd = useRedirectAfterAddBackend();\n\n  const [advancedOpen, setAdvancedOpen] = React.useState(false);\n  const [customHost, setCustomHost] = React.useState(\"\");\n\n  const effectiveHost = customHost.trim() || DEFAULT_OPENHANDS_CLOUD_HOST;\n\n  const handleLoginSuccess = (apiKey: string) => {\n    addBackend({\n      name: \"OpenHands Cloud\",\n      host: normalizeHost(effectiveHost),\n      apiKey,\n      kind: \"cloud\",\n    });\n    redirectAfterAdd();\n    onClose();\n  };\n\n  return (\n    <div className=\"flex flex-1 min-w-0 flex-col items-center gap-3\">\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=\"add-backend-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=\"add-backend\"\n      />\n\n      <div className=\"w-full\">\n        <button\n          type=\"button\"\n          onClick={() => setAdvancedOpen((open) => !open)}\n          aria-expanded={advancedOpen}\n          data-testid=\"add-backend-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=\"add-backend-cloud-host\"\n            name=\"add-backend-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  );\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}: BackendFormModalProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (mode === \"add\") {\n    return (\n      <ModalBackdrop\n        onClose={onClose}\n        closeOnEscape={false}\n        aria-label={t(I18nKey.BACKEND$ADD_TITLE)}\n      >\n        <div\n          data-testid=\"add-backend-modal\"\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          <ModalCloseButton onClose={onClose} testId=\"add-backend-close\" />\n          {/* Header */}\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          {/* Two-column body */}\n          <div className=\"flex gap-6 px-6 pb-6 pt-2\">\n            {/* Left: manual connection */}\n            <div className=\"flex-1 min-w-0\">\n              <ManualConnectionColumn onClose={onClose} />\n            </div>\n\n            {/* Vertical OR divider */}\n            <div className=\"flex shrink-0 flex-col items-center\">\n              <div className=\"flex-1 w-px bg-[var(--oh-border)]\" />\n              <span className=\"py-3 text-xs uppercase text-[var(--oh-muted)]\">\n                {t(I18nKey.BACKEND$LOGIN_OR)}\n              </span>\n              <div className=\"flex-1 w-px bg-[var(--oh-border)]\" />\n            </div>\n\n            {/* Right: cloud login */}\n            <div className=\"flex-1 min-w-0\">\n              <CloudLoginColumn onClose={onClose} />\n            </div>\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.cjs","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 { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { getAgentServerClientOptions } from \"#/api/agent-server-client-options\";\nimport ChevronDownSmallIcon from \"#/icons/chevron-down-small.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend, BackendKind } from \"#/api/backend-registry/types\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  modalTitleLgClassName,\n  modalTitleLgMediumClassName,\n} from \"#/utils/modal-classes\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { DeviceFlowAuth } from \"./device-flow-auth\";\n\nexport type BackendFormMode = \"add\" | \"edit\";\n\ninterface BackendFormModalProps {\n  mode: BackendFormMode;\n  /** Required when `mode === \"edit\"`. */\n  backend?: Backend;\n  onClose: () => void;\n}\n\nfunction inferKindFromHost(host: string): BackendKind {\n  const trimmed = host.trim().toLowerCase();\n  if (trimmed.includes(\"all-hands.dev\") || trimmed.includes(\"openhands.dev\")) {\n    return \"cloud\";\n  }\n  return \"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\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  if (error instanceof Error) return error.message;\n  if (typeof error === \"string\") return error;\n  return null;\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<void> {\n  // Cloud backends authenticate via OAuth; preflight GET is not applicable.\n  if (backend.kind !== \"local\") return;\n\n  await new ServerClient(\n    getAgentServerClientOptions({\n      host: backend.host,\n      sessionApiKey: backend.apiKey || null,\n      timeout: 5000,\n    }),\n  ).getServerInfo();\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 info.version ?? null;\n    },\n    retry: false,\n    staleTime: 60_000,\n    enabled: backend.kind === \"local\" && !disabled,\n  });\n\n  let statusLabel: string;\n  if (isConnected === true) {\n    statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_CONNECTED);\n  } else if (isConnected === false) {\n    statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_DISCONNECTED);\n  } else {\n    statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING);\n  }\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\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  const [name, setName] = React.useState(backend?.name ?? \"\");\n  const [host, setHost] = React.useState(backend?.host ?? \"\");\n  const [apiKey, setApiKey] = React.useState(backend?.apiKey ?? \"\");\n  const [connectionError, setConnectionError] = React.useState<string | null>(\n    null,\n  );\n  const [isSubmitting, setIsSubmitting] = React.useState(false);\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  // Kind is inferred from the host on every change.\n  const kind: BackendKind = inferKindFromHost(host);\n\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    event.preventDefault();\n    if (isSubmitting) return;\n\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\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      if (onSubmitOverride) {\n        await onSubmitOverride(payload);\n        return;\n      }\n\n      await testBackendConnection(payload);\n\n      if (mode === \"edit\" && backend) {\n        updateBackend(backend.id, payload);\n      } else {\n        addBackend(payload);\n      }\n\n      onSubmitted();\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  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          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\n/**\n * Left column of the \"Add a Backend\" modal: manual connection via\n * Host + API Key. Designed for self-hosted agent servers and\n * self-hosted OpenHands Cloud with API key auth.\n */\nfunction ManualConnectionColumn({ onClose }: { onClose: () => void }) {\n  const { t } = useTranslation(\"openhands\");\n  const { addBackend } = useActiveBackendContext();\n  const redirectAfterAdd = useRedirectAfterAddBackend();\n\n  const [name, setName] = React.useState(\"\");\n  const [host, setHost] = React.useState(\"\");\n  const [apiKey, setApiKey] = React.useState(\"\");\n  const [connectionError, setConnectionError] = React.useState<string | null>(\n    null,\n  );\n  const [isSubmitting, setIsSubmitting] = React.useState(false);\n\n  const kind: BackendKind = inferKindFromHost(host);\n  const canSubmit =\n    name.trim().length > 0 &&\n    isValidHostUrl(host) &&\n    (kind === \"local\" || apiKey.trim().length > 0);\n\n  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    if (!canSubmit || isSubmitting) return;\n\n    const payload = {\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      await testBackendConnection(payload);\n      addBackend(payload);\n      redirectAfterAdd();\n      onClose();\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  return (\n    <form\n      data-testid=\"add-backend-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=\"add-backend-name\"\n          name=\"add-backend-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          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=\"add-backend-host\"\n          name=\"add-backend-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          placeholder=\"http://localhost:8000\"\n          className=\"w-full\"\n        />\n        <p\n          className=\"text-xs text-[var(--oh-muted)]\"\n          data-testid=\"add-backend-host-helper\"\n        >\n          {t(I18nKey.BACKEND$HOST_HELPER)}\n        </p>\n      </div>\n\n      <SettingsInput\n        testId=\"add-backend-api-key\"\n        name=\"add-backend-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=\"sk-••••••••••\"\n        className=\"w-full\"\n      />\n\n      {connectionError ? (\n        <div\n          role=\"alert\"\n          data-testid=\"add-backend-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=\"add-backend-submit\"\n        className=\"w-full text-center\"\n      >\n        {isSubmitting\n          ? t(I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING)\n          : t(I18nKey.BACKEND$CONNECT)}\n      </BrandButton>\n    </form>\n  );\n}\n\n/**\n * Right column of the \"Add a Backend\" modal: one-click OAuth login\n * with OpenHands Cloud. Includes an \"Advanced\" disclosure for\n * users who self-host OpenHands Cloud and need to override the host.\n */\nfunction CloudLoginColumn({ onClose }: { onClose: () => void }) {\n  const { t } = useTranslation(\"openhands\");\n  const { addBackend } = useActiveBackendContext();\n  const redirectAfterAdd = useRedirectAfterAddBackend();\n\n  const [advancedOpen, setAdvancedOpen] = React.useState(false);\n  const [customHost, setCustomHost] = React.useState(\"\");\n\n  const effectiveHost = customHost.trim() || DEFAULT_OPENHANDS_CLOUD_HOST;\n\n  const handleLoginSuccess = (apiKey: string) => {\n    addBackend({\n      name: \"OpenHands Cloud\",\n      host: normalizeHost(effectiveHost),\n      apiKey,\n      kind: \"cloud\",\n    });\n    redirectAfterAdd();\n    onClose();\n  };\n\n  return (\n    <div className=\"flex flex-1 min-w-0 flex-col items-center gap-3\">\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=\"add-backend-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=\"add-backend\"\n      />\n\n      <div className=\"w-full\">\n        <button\n          type=\"button\"\n          onClick={() => setAdvancedOpen((open) => !open)}\n          aria-expanded={advancedOpen}\n          data-testid=\"add-backend-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=\"add-backend-cloud-host\"\n            name=\"add-backend-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  );\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}: BackendFormModalProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (mode === \"add\") {\n    return (\n      <ModalBackdrop\n        onClose={onClose}\n        closeOnEscape={false}\n        aria-label={t(I18nKey.BACKEND$ADD_TITLE)}\n      >\n        <div\n          data-testid=\"add-backend-modal\"\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          <ModalCloseButton onClose={onClose} testId=\"add-backend-close\" />\n          {/* Header */}\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          {/* Two-column body */}\n          <div className=\"flex gap-6 px-6 pb-6 pt-2\">\n            {/* Left: manual connection */}\n            <div className=\"flex-1 min-w-0\">\n              <ManualConnectionColumn onClose={onClose} />\n            </div>\n\n            {/* Vertical OR divider */}\n            <div className=\"flex shrink-0 flex-col items-center\">\n              <div className=\"flex-1 w-px bg-[var(--oh-border)]\" />\n              <span className=\"py-3 text-xs uppercase text-[var(--oh-muted)]\">\n                {t(I18nKey.BACKEND$LOGIN_OR)}\n              </span>\n              <div className=\"flex-1 w-px bg-[var(--oh-border)]\" />\n            </div>\n\n            {/* Right: cloud login */}\n            <div className=\"flex-1 min-w-0\">\n              <CloudLoginColumn onClose={onClose} />\n            </div>\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":"mpCAqCA,SAAS,EAAkB,EAA2B,CACpD,IAAM,EAAU,EAAK,MAAM,CAAC,aAAa,CAIzC,OAHI,EAAQ,SAAS,gBAAgB,EAAI,EAAQ,SAAS,gBAAgB,CACjE,QAEF,QAOT,SAAS,EAAe,EAA2B,CAEjD,IAAM,EAAI,EAAS,aAAa,CAAC,QAAQ,WAAY,GAAG,CAkBxD,MADA,GAfI,IAAM,aAAe,IAAM,OAAS,IAAM,MAAQ,IAAM,WAGxD,SAAS,KAAK,EAAE,EAAI,iBAAiB,KAAK,EAAE,EAE5C,QAAQ,KAAK,EAAE,EACf,cAAc,KAAK,EAAE,EACrB,6BAA6B,KAAK,EAAE,EAEpC,sBAAsB,KAAK,EAAE,EAC7B,sBAAsB,KAAK,EAAE,EAE7B,EAAE,SAAS,SAAS,EAGpB,CAAC,EAAE,SAAS,IAAI,EAAI,CAAC,EAAE,SAAS,IAAI,EAI1C,SAAS,EAAc,EAAsB,CAC3C,IAAM,EAAU,EAAK,MAAM,CAAC,QAAQ,OAAQ,GAAG,CAC/C,GAAI,CAAC,EAAS,MAAO,GAErB,GAAI,gBAAgB,KAAK,EAAQ,CAAE,OAAO,EAK1C,IAAM,EAAe,EAAQ,MAAM,gBAAgB,CAOnD,MAAO,GADQ,EALE,EACb,EAAa,IACZ,EAAQ,MAAM,KAAK,EAAI,EAAE,EAAE,OAAS,EACnC,EACA,EAAQ,MAAM,IAAI,CAAC,GACc,CAAG,OAAS,QAClC,KAAK,IAYxB,SAAS,EAAe,EAAuB,CAC7C,IAAM,EAAU,EAAK,MAAM,CAG3B,GAFI,CAAC,GAED,KAAK,KAAK,EAAQ,CAAE,MAAO,GAC/B,IAAM,EAAa,EAAc,EAAQ,CACzC,GAAI,CAAC,EAAY,MAAO,GACxB,GAAI,CACF,IAAM,EAAM,IAAI,IAAI,EAAW,CAC/B,OACG,EAAI,WAAa,SAAW,EAAI,WAAa,WAC9C,EAAI,SAAS,OAAS,OAElB,CACN,MAAO,IAIX,IAAM,EAA+B,4BAErC,SAAS,EACP,EACA,EACQ,CACR,OAAO,EAAE,EAAA,QAAQ,+BAAgC,CAC/C,OACA,cAAe,CAAE,YAAa,GAAO,CACtC,CAAC,CAGJ,SAAS,EAAyB,EAA+B,CAG/D,OAFI,aAAiB,MAAc,EAAM,QACrC,OAAO,GAAU,SAAiB,EAC/B,KAGT,SAAS,EAA+B,EAAe,EAAwB,CAC7E,IAAM,EAAS,EAAyB,EAAM,CAC9C,OAAO,EAAS,GAAG,EAAM,IAAI,IAAW,EAG1C,eAAe,EACb,EACe,CAEX,EAAQ,OAAS,SAErB,MAAM,IAAI,EAAA,aACR,EAAA,4BAA4B,CAC1B,KAAM,EAAQ,KACd,cAAe,EAAQ,QAAU,KACjC,QAAS,IACV,CAAC,CACH,CAAC,eAAe,CASnB,SAAS,EAAmB,CAC1B,UACA,cAIC,CACD,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CAEnC,EADoB,EAAA,kBAAkB,CAAC,EAAQ,CACtC,CAAkB,EAAQ,IACnC,EAAc,GAAQ,aAAe,KACrC,EAAW,GAAQ,WAAa,GAChC,EAAsB,GAAQ,qBAAuB,EACrD,EAAY,GAAQ,WAAa,KAEjC,CAAE,KAAM,GAAY,EAAA,SAAS,CACjC,SAAU,CAAC,kBAAmB,EAAQ,KAAM,EAAQ,OAAO,CAC3D,QAAS,UAQA,MAPY,IAAI,EAAA,aACrB,EAAA,4BAA4B,CAC1B,KAAM,EAAQ,KACd,cAAe,EAAQ,QAAU,KACjC,QAAS,IACV,CAAC,CACH,CAAC,eAAe,EACL,SAAW,KAEzB,MAAO,GACP,UAAW,IACX,QAAS,EAAQ,OAAS,SAAW,CAAC,EACvC,CAAC,CAEE,EACJ,AAKE,EAJc,EADZ,IAAgB,GACF,EAAA,QAAQ,oCACf,IAAgB,GACT,EAAA,QAAQ,uCAER,EAAA,QAAQ,mCAAmC,CAG7D,IAAM,EACJ,EAAQ,OAAS,QACb,EAAE,EAAA,QAAQ,mBAAmB,CAC7B,EAAE,EAAA,QAAQ,mBAAmB,CAEnC,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,+BAAf,EACE,EAAA,EAAA,MAAC,MAAD,CACE,cAAa,GAAG,EAAW,SAC3B,UAAU,2CAFZ,EAIE,EAAA,EAAA,KAAC,EAAA,iBAAD,CAA+B,cAAe,CAAA,EAC9C,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,aAAa,cAAa,GAAG,EAAW,wBACrD,EACI,CAAA,EACP,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,6BAAoB,IAAQ,CAAA,EAC5C,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,0CAAkC,EAAiB,CAAA,CAClE,GACC,EAAA,EAAA,KAAC,OAAD,CACE,UAAU,iCACV,cAAa,GAAG,EAAW,mBAE1B,EAAE,EAAA,QAAQ,sBAAuB,CAAE,UAAS,CAAC,CACzC,CAAA,CACL,KACA,GAEL,GACC,EAAA,EAAA,MAAC,MAAD,CACE,cAAa,GAAG,EAAW,eAC3B,UAAU,6FAFZ,EAIE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,sCACb,EAAE,EAAA,QAAQ,4BAA4B,CAClC,CAAA,EACP,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,kDACb,EAAE,EAAA,QAAQ,6BAA8B,CACvC,MAAO,EACR,CAAC,CACG,CAAA,CACN,GACC,EAAA,EAAA,KAAC,OAAD,CACE,cAAa,GAAG,EAAW,uBAC3B,UAAU,gEAET,EACI,CAAA,CACL,KACA,GACJ,KACA,GAoEV,SAAgB,EAAY,CAC1B,OACA,UACA,cACA,gBACA,WAAY,EACZ,eACA,gBACA,0BAA0B,GAC1B,oBACmB,CACnB,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,aAAY,iBAAkB,EAAA,yBAAyB,CAEzD,CAAC,EAAM,GAAW,EAAA,QAAM,SAAS,GAAS,MAAQ,GAAG,CACrD,CAAC,EAAM,GAAW,EAAA,QAAM,SAAS,GAAS,MAAQ,GAAG,CACrD,CAAC,EAAQ,GAAa,EAAA,QAAM,SAAS,GAAS,QAAU,GAAG,CAC3D,CAAC,EAAiB,GAAsB,EAAA,QAAM,SAClD,KACD,CACK,CAAC,EAAc,GAAmB,EAAA,QAAM,SAAS,GAAM,CAGvD,CAAC,EAAa,GAAkB,EAAA,QAAM,SAAS,GAAM,CACrD,CAAC,EAAa,GAAkB,EAAA,QAAM,SAAS,GAAM,CAGrD,EAAoB,EAAkB,EAAK,CAE3C,EACJ,IAAuB,IAAS,OAAS,eAAiB,eAEtD,EAAc,GAAiB,IAAS,QACxC,EACJ,EAAK,MAAM,CAAC,OAAS,GACrB,EAAe,EAAK,GACnB,CAAC,GAAe,EAAO,MAAM,CAAC,OAAS,GAGpC,EACJ,GAAe,CAAC,EAAK,MAAM,CAAG,EAAE,EAAA,QAAQ,sBAAsB,CAAG,IAAA,GAC7D,EAAY,EACb,EAAK,MAAM,CAET,EAAe,EAAK,CAEnB,IAAA,GADA,EAAE,EAAA,QAAQ,qBAAqB,CAFjC,EAAE,EAAA,QAAQ,sBAAsB,CAIlC,IAAA,GAmDJ,OACE,EAAA,EAAA,MAAC,OAAD,CACE,cAAa,GAAG,EAAW,OAC3B,SAAU,KApDc,IAA4C,CAEtE,GADA,EAAM,gBAAgB,CAClB,EAAc,OAElB,GAAI,CAAC,EAAW,CAGd,EAAe,GAAK,CACpB,EAAe,GAAK,CACpB,OAGF,IAAM,EAAoC,CACxC,KAAM,EAAK,MAAM,CACjB,KAAM,EAAc,EAAK,CACzB,OAAQ,EAAO,MAAM,CACrB,OACD,CAED,EAAmB,KAAK,CACxB,EAAgB,GAAK,CAErB,GAAI,CACF,GAAI,EAAkB,CACpB,MAAM,EAAiB,EAAQ,CAC/B,OAGF,MAAM,EAAsB,EAAQ,CAEhC,IAAS,QAAU,EACrB,EAAc,EAAQ,GAAI,EAAQ,CAElC,EAAW,EAAQ,CAGrB,GAAa,OACN,EAAO,CACd,EACE,EACE,EAA6B,EAAG,EAAQ,KAAK,CAC7C,EACD,CACF,QACO,CACR,EAAgB,GAAM,GAQtB,UAAU,+BAHZ,EAKE,EAAA,EAAA,MAAC,MAAD,CACE,cAAa,GAAG,EAAW,uBAC3B,UAAW,EAAA,GACT,sBACA,GAA2B,SAC5B,UALH,EAOE,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,OAAQ,GAAG,EAAW,OACtB,KAAM,GAAG,EAAW,OACpB,KAAK,OACL,MAAO,EAAE,EAAA,QAAQ,mBAAmB,CACpC,MAAO,EACP,SAAW,GAAU,CACnB,EAAQ,EAAM,CACd,EAAmB,KAAK,EAE1B,WAAc,EAAe,GAAK,CAClC,YAAY,aACZ,UAAU,SACV,gBAAA,GACA,MAAO,EACP,CAAA,EAEF,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,OAAQ,GAAG,EAAW,OACtB,KAAM,GAAG,EAAW,OACpB,KAAK,OACL,MAAO,EAAE,EAAA,QAAQ,mBAAmB,CACpC,MAAO,EACP,SACE,EACI,IAAA,GACC,GAAU,CACT,EAAQ,EAAM,CACd,EAAmB,KAAK,EAGhC,WAAc,EAAe,GAAK,CAClC,YAAa,EACb,UAAU,SACV,gBAAA,GACA,MAAO,EACP,WAAY,EACZ,CAAA,EAEF,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,OAAQ,GAAG,EAAW,UACtB,KAAM,GAAG,EAAW,UACpB,KAAK,WACL,MAAO,EAAE,EAAA,QAAQ,kBAAkB,CACnC,MAAO,EACP,SAAW,GAAU,CACnB,EAAU,EAAM,CAChB,EAAmB,KAAK,EAE1B,YAAY,GACZ,UAAU,SACV,CAAA,CAED,GACC,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,QACL,cAAa,GAAG,EAAW,QAC3B,UAAU,sHAET,EACG,CAAA,CACJ,KAEH,IAAS,QAAU,IAClB,EAAA,EAAA,KAAC,EAAD,CAA6B,UAAqB,aAAc,CAAA,CAE9D,GAEL,EACC,EAAc,CACZ,UAAW,GAAa,CAAC,EACzB,eACA,aACD,CAAC,EAEF,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,8CAAf,EACE,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,KAAK,SACL,QAAQ,YACR,QAAS,EACT,OAAQ,GAAG,EAAW,kBAErB,EAAE,EAAA,QAAQ,cAAc,CACb,CAAA,EACd,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,KAAK,SACL,QAAQ,UACR,WAAY,CAAC,GAAa,EAC1B,OAAQ,GAAG,EAAW,kBAErB,EAAE,EAAA,QAAQ,aAAa,CACZ,CAAA,CACV,GAEH,GAYX,SAAS,GAA6B,CACpC,GAAM,CAAE,cAAa,YAAa,EAAA,eAAe,CACjD,OAAO,EAAA,QAAM,gBAAkB,CACzB,wBAAwB,KAAK,EAAY,CAAE,EAAS,eAAe,CAC9D,0BAA0B,KAAK,EAAY,EAClD,EAAS,iBAAiB,EAC3B,CAAC,EAAa,EAAS,CAAC,CAQ7B,SAAS,EAAuB,CAAE,WAAoC,CACpE,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,cAAe,EAAA,yBAAyB,CAC1C,EAAmB,GAA4B,CAE/C,CAAC,EAAM,GAAW,EAAA,QAAM,SAAS,GAAG,CACpC,CAAC,EAAM,GAAW,EAAA,QAAM,SAAS,GAAG,CACpC,CAAC,EAAQ,GAAa,EAAA,QAAM,SAAS,GAAG,CACxC,CAAC,EAAiB,GAAsB,EAAA,QAAM,SAClD,KACD,CACK,CAAC,EAAc,GAAmB,EAAA,QAAM,SAAS,GAAM,CAEvD,EAAoB,EAAkB,EAAK,CAC3C,EACJ,EAAK,MAAM,CAAC,OAAS,GACrB,EAAe,EAAK,GACnB,IAAS,SAAW,EAAO,MAAM,CAAC,OAAS,GAiC9C,OACE,EAAA,EAAA,MAAC,OAAD,CACE,cAAY,mBACZ,SAAU,KAlCc,IAAwC,CAElE,GADA,EAAE,gBAAgB,CACd,CAAC,GAAa,EAAc,OAEhC,IAAM,EAAU,CACd,KAAM,EAAK,MAAM,CACjB,KAAM,EAAc,EAAK,CACzB,OAAQ,EAAO,MAAM,CACrB,OACD,CAED,EAAmB,KAAK,CACxB,EAAgB,GAAK,CAErB,GAAI,CACF,MAAM,EAAsB,EAAQ,CACpC,EAAW,EAAQ,CACnB,GAAkB,CAClB,GAAS,OACF,EAAO,CACd,EACE,EACE,EAA6B,EAAG,EAAQ,KAAK,CAC7C,EACD,CACF,QACO,CACR,EAAgB,GAAM,GAQtB,UAAU,8CAHZ,EAKE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,+BAAf,EACE,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,OAAO,mBACP,KAAK,mBACL,KAAK,OACL,MAAO,EAAE,EAAA,QAAQ,mBAAmB,CACpC,MAAO,EACP,SAAW,GAAU,CACnB,EAAQ,EAAM,CACd,EAAmB,KAAK,EAE1B,YAAY,iBACZ,UAAU,SACV,CAAA,EACF,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,0CACV,EAAE,EAAA,QAAQ,oBAAoB,CAC7B,CAAA,CACA,IAEN,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,+BAAf,EACE,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,OAAO,mBACP,KAAK,mBACL,KAAK,OACL,MAAO,EAAE,EAAA,QAAQ,mBAAmB,CACpC,MAAO,EACP,SAAW,GAAU,CACnB,EAAQ,EAAM,CACd,EAAmB,KAAK,EAE1B,YAAY,wBACZ,UAAU,SACV,CAAA,EACF,EAAA,EAAA,KAAC,IAAD,CACE,UAAU,iCACV,cAAY,mCAEX,EAAE,EAAA,QAAQ,oBAAoB,CAC7B,CAAA,CACA,IAEN,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,OAAO,sBACP,KAAK,sBACL,KAAK,WACL,MAAO,EAAE,EAAA,QAAQ,kBAAkB,CACnC,MAAO,EACP,SAAW,GAAU,CACnB,EAAU,EAAM,CAChB,EAAmB,KAAK,EAE1B,YAAY,gBACZ,UAAU,SACV,CAAA,CAED,GACC,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,QACL,cAAY,oBACZ,UAAU,sHAET,EACG,CAAA,CACJ,MAEJ,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,KAAK,SACL,QAAQ,YACR,WAAY,CAAC,GAAa,EAC1B,OAAO,qBACP,UAAU,8BAGN,EADH,EACK,EAAA,QAAQ,mCACR,EAAA,QAAQ,gBAAgB,CAClB,CAAA,CACT,GASX,SAAS,EAAiB,CAAE,WAAoC,CAC9D,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,cAAe,EAAA,yBAAyB,CAC1C,EAAmB,GAA4B,CAE/C,CAAC,EAAc,GAAmB,EAAA,QAAM,SAAS,GAAM,CACvD,CAAC,EAAY,GAAiB,EAAA,QAAM,SAAS,GAAG,CAEhD,EAAgB,EAAW,MAAM,EAAI,EAa3C,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,2DAAf,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,4CAAf,EACE,EAAA,EAAA,KAAC,EAAA,QAAD,CAAoB,MAAO,GAAI,OAAQ,GAAI,cAAA,GAAc,CAAA,EAEzD,EAAA,EAAA,KAAC,KAAD,CACE,UAAW,EAAA,4BACX,cAAY,mCAEX,EAAE,EAAA,QAAQ,oBAAoB,CAC5B,CAAA,CACD,IAEN,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,sEACV,EAAE,EAAA,QAAQ,0BAA0B,CACnC,CAAA,EAEJ,EAAA,EAAA,KAAC,EAAA,eAAD,CACE,KAAM,EACN,UA9BsB,GAAmB,CAC7C,EAAW,CACT,KAAM,kBACN,KAAM,EAAc,EAAc,CAClC,SACA,KAAM,QACP,CAAC,CACF,GAAkB,CAClB,GAAS,EAuBL,WAAW,cACX,CAAA,EAEF,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kBAAf,EACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,YAAe,EAAiB,GAAS,CAAC,EAAK,CAC/C,gBAAe,EACf,cAAY,8BACZ,UAAU,0JALZ,EAOE,EAAA,EAAA,KAAC,OAAD,CAAA,SAAO,EAAE,EAAA,QAAQ,iBAAiB,CAAQ,CAAA,EAC1C,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,UAAW,EAAA,GACT,mDACA,GAAgB,aACjB,CACD,cAAA,GACA,CAAA,CACK,IACT,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,EAAA,GACT,OACA,CAAC,GAAgB,gCAClB,CACD,cAAa,CAAC,WALhB,EAOE,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,OAAO,yBACP,KAAK,yBACL,KAAK,OACL,MAAO,EAAE,EAAA,QAAQ,mBAAmB,CACpC,MAAO,EACP,SAAU,EACV,YAAa,EACb,UAAU,SACV,CAAA,EACF,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,+CACV,EAAE,EAAA,QAAQ,yBAAyB,CAClC,CAAA,CACA,GACF,GACF,GAWV,SAAgB,EAAiB,CAC/B,OACA,UACA,WACwB,CACxB,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CAEzC,GAAI,IAAS,MACX,OACE,EAAA,EAAA,KAAC,EAAA,cAAD,CACW,UACT,cAAe,GACf,aAAY,EAAE,EAAA,QAAQ,kBAAkB,WAExC,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,oBACZ,UAAW,EAAA,GACT,yEACA,EAAA,oBAAoB,KAAK,CACzB,EAAA,yBACD,UANH,EAQE,EAAA,EAAA,KAAC,EAAA,iBAAD,CAA2B,UAAS,OAAO,oBAAsB,CAAA,EAEjE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,iCACb,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAA,+BACZ,EAAE,EAAA,QAAQ,kBAAkB,CAC1B,CAAA,CACD,CAAA,EAGN,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,qCAAf,EAEE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,2BACb,EAAA,EAAA,KAAC,EAAD,CAAiC,UAAW,CAAA,CACxC,CAAA,EAGN,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,+CAAf,EACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,oCAAsC,CAAA,EACrD,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,yDACb,EAAE,EAAA,QAAQ,iBAAiB,CACvB,CAAA,EACP,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,oCAAsC,CAAA,CACjD,IAGN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,2BACb,EAAA,EAAA,KAAC,EAAD,CAA2B,UAAW,CAAA,CAClC,CAAA,CACF,GACF,GACQ,CAAA,CAKpB,IAAM,EAAa,eACnB,OACE,EAAA,EAAA,KAAC,EAAA,cAAD,CACW,UACT,cAAe,GACf,aAAY,EAAE,EAAA,QAAQ,mBAAmB,WAEzC,EAAA,EAAA,MAAC,MAAD,CACE,cAAa,GAAG,EAAW,QAC3B,UAAW,EAAA,GACT,iGACA,EAAA,oBAAoB,KAAK,CAC1B,UALH,EAOE,EAAA,EAAA,KAAC,EAAA,iBAAD,CAA2B,UAAS,OAAQ,GAAG,EAAW,QAAW,CAAA,EACrE,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAA,GAAG,OAAQ,EAAA,sBAAsB,UAC7C,EAAE,EAAA,QAAQ,mBAAmB,CAC3B,CAAA,EACL,EAAA,EAAA,KAAC,EAAD,CACE,KAAK,OACI,UACT,YAAa,EACD,aACZ,CAAA,CACE,GACQ,CAAA"}

package/dist/components/features/backends/backend-form-modal.d.ts

@@ -45,6 +45,12 @@ export interface BackendFormProps {
      * keys for local backends; the auth-gate screen needs to enforce one.
      */
     requireApiKey?: boolean;
+    /**
+     * When true, hides the name/host/API-key inputs (and related inline
+     * errors) while keeping the action row visible — used by onboarding
+     * after a successful connection probe.
+     */
+    hideConfigurationFields?: boolean;
     /**
      * Replace the default synchronous add/update-and-close submit with a
      * custom async handler.  The form builds the payload, validates
@@ -63,7 +69,7 @@ export interface BackendFormProps {
  * element — but submission flows through the standard form submit so
  * Enter-to-submit still works.
  */
-export declare function BackendForm({ mode, backend, onSubmitted, renderActions, testIdRoot: explicitTestIdRoot, hostReadOnly, requireApiKey, onSubmitOverride, }: BackendFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function BackendForm({ mode, backend, onSubmitted, renderActions, testIdRoot: explicitTestIdRoot, hostReadOnly, requireApiKey, hideConfigurationFields, onSubmitOverride, }: BackendFormProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Modal wrapper. In **add** mode it renders a two-column layout
  * (manual connection | OR | Cloud login). In **edit** mode it wraps

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

@@ -133,111 +133,114 @@ function N({ backend: n, testIdRoot: r }) {
 		}) : null]
 	});
 }
-function P({ mode: n, backend: r, onSubmitted: a, renderActions: o, testIdRoot: s, hostReadOnly: c, requireApiKey: l, onSubmitOverride: u }) {
-	let { t: d } = e("openhands"), { addBackend: f, updateBackend: p } = i(), [g, _] = x.useState(r?.name ?? ""), [v, y] = x.useState(r?.host ?? ""), [b, T] = x.useState(r?.apiKey ?? ""), [A, P] = x.useState(null), [F, I] = x.useState(!1), [L, R] = x.useState(!1), [z, B] = x.useState(!1), V = w(v), H = s ?? (n === "edit" ? "edit-backend" : "add-backend"), U = l || V !== "local", W = g.trim().length > 0 && D(v) && (!U || b.trim().length > 0), G = L && !g.trim() ? d(t.BACKEND$NAME_REQUIRED) : void 0, K = z ? v.trim() ? D(v) ? void 0 : d(t.BACKEND$HOST_INVALID) : d(t.BACKEND$HOST_REQUIRED) : void 0;
+function P({ mode: r, backend: a, onSubmitted: o, renderActions: s, testIdRoot: c, hostReadOnly: l, requireApiKey: u, hideConfigurationFields: d = !1, onSubmitOverride: f }) {
+	let { t: p } = e("openhands"), { addBackend: g, updateBackend: _ } = i(), [v, y] = x.useState(a?.name ?? ""), [b, T] = x.useState(a?.host ?? ""), [A, P] = x.useState(a?.apiKey ?? ""), [F, I] = x.useState(null), [L, R] = x.useState(!1), [z, B] = x.useState(!1), [V, H] = x.useState(!1), U = w(b), W = c ?? (r === "edit" ? "edit-backend" : "add-backend"), G = u || U !== "local", K = v.trim().length > 0 && D(b) && (!G || A.trim().length > 0), q = z && !v.trim() ? p(t.BACKEND$NAME_REQUIRED) : void 0, J = V ? b.trim() ? D(b) ? void 0 : p(t.BACKEND$HOST_INVALID) : p(t.BACKEND$HOST_REQUIRED) : void 0;
 	return /* @__PURE__ */ C("form", {
-		"data-testid": `${H}-form`,
+		"data-testid": `${W}-form`,
 		onSubmit: async (e) => {
-			if (e.preventDefault(), F) return;
-			if (!W) {
-				R(!0), B(!0);
+			if (e.preventDefault(), L) return;
+			if (!K) {
+				B(!0), H(!0);
 				return;
 			}
 			let t = {
-				name: g.trim(),
-				host: E(v),
-				apiKey: b.trim(),
-				kind: V
+				name: v.trim(),
+				host: E(b),
+				apiKey: A.trim(),
+				kind: U
 			};
-			P(null), I(!0);
+			I(null), R(!0);
 			try {
-				if (u) {
-					await u(t);
+				if (f) {
+					await f(t);
 					return;
 				}
-				await M(t), n === "edit" && r ? p(r.id, t) : f(t), a();
+				await M(t), r === "edit" && a ? _(a.id, t) : g(t), o();
 			} catch (e) {
-				P(j(k(d, t.host), e));
+				I(j(k(p, t.host), e));
 			} finally {
-				I(!1);
+				R(!1);
 			}
 		},
 		className: "flex flex-col gap-4",
-		children: [
-			/* @__PURE__ */ S(h, {
-				testId: `${H}-name`,
-				name: `${H}-name`,
-				type: "text",
-				label: d(t.BACKEND$NAME_LABEL),
-				value: g,
-				onChange: (e) => {
-					_(e), P(null);
-				},
-				onBlur: () => R(!0),
-				placeholder: "Production",
-				className: "w-full",
-				showRequiredTag: !0,
-				error: G
-			}),
-			/* @__PURE__ */ S(h, {
-				testId: `${H}-host`,
-				name: `${H}-host`,
-				type: "text",
-				label: d(t.BACKEND$HOST_LABEL),
-				value: v,
-				onChange: c ? void 0 : (e) => {
-					y(e), P(null);
-				},
-				onBlur: () => B(!0),
-				placeholder: O,
-				className: "w-full",
-				showRequiredTag: !0,
-				error: K,
-				isDisabled: c
-			}),
-			/* @__PURE__ */ S(h, {
-				testId: `${H}-api-key`,
-				name: `${H}-api-key`,
-				type: "password",
-				label: d(t.BACKEND$KEY_LABEL),
-				value: b,
-				onChange: (e) => {
-					T(e), P(null);
-				},
-				placeholder: "",
-				className: "w-full"
-			}),
-			A ? /* @__PURE__ */ S("div", {
-				role: "alert",
-				"data-testid": `${H}-error`,
-				className: "rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words",
-				children: A
-			}) : null,
-			n === "edit" && r && /* @__PURE__ */ S(N, {
-				backend: r,
-				testIdRoot: H
-			}),
-			o ? o({
-				canSubmit: W && !F,
-				isSubmitting: F,
-				testIdRoot: H
-			}) : /* @__PURE__ */ C("div", {
-				className: "flex justify-end gap-2 mt-2 w-full",
-				children: [/* @__PURE__ */ S(m, {
-					type: "button",
-					variant: "secondary",
-					onClick: a,
-					testId: `${H}-cancel`,
-					children: d(t.BUTTON$CANCEL)
-				}), /* @__PURE__ */ S(m, {
-					type: "submit",
-					variant: "primary",
-					isDisabled: !W || F,
-					testId: `${H}-submit`,
-					children: d(t.BACKEND$SAVE)
-				})]
-			})
-		]
+		children: [/* @__PURE__ */ C("div", {
+			"data-testid": `${W}-configuration-fields`,
+			className: n("flex flex-col gap-4", d && "hidden"),
+			children: [
+				/* @__PURE__ */ S(h, {
+					testId: `${W}-name`,
+					name: `${W}-name`,
+					type: "text",
+					label: p(t.BACKEND$NAME_LABEL),
+					value: v,
+					onChange: (e) => {
+						y(e), I(null);
+					},
+					onBlur: () => B(!0),
+					placeholder: "Production",
+					className: "w-full",
+					showRequiredTag: !0,
+					error: q
+				}),
+				/* @__PURE__ */ S(h, {
+					testId: `${W}-host`,
+					name: `${W}-host`,
+					type: "text",
+					label: p(t.BACKEND$HOST_LABEL),
+					value: b,
+					onChange: l ? void 0 : (e) => {
+						T(e), I(null);
+					},
+					onBlur: () => H(!0),
+					placeholder: O,
+					className: "w-full",
+					showRequiredTag: !0,
+					error: J,
+					isDisabled: l
+				}),
+				/* @__PURE__ */ S(h, {
+					testId: `${W}-api-key`,
+					name: `${W}-api-key`,
+					type: "password",
+					label: p(t.BACKEND$KEY_LABEL),
+					value: A,
+					onChange: (e) => {
+						P(e), I(null);
+					},
+					placeholder: "",
+					className: "w-full"
+				}),
+				F ? /* @__PURE__ */ S("div", {
+					role: "alert",
+					"data-testid": `${W}-error`,
+					className: "rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words",
+					children: F
+				}) : null,
+				r === "edit" && a && /* @__PURE__ */ S(N, {
+					backend: a,
+					testIdRoot: W
+				})
+			]
+		}), s ? s({
+			canSubmit: K && !L,
+			isSubmitting: L,
+			testIdRoot: W
+		}) : /* @__PURE__ */ C("div", {
+			className: "flex justify-end gap-2 mt-2 w-full",
+			children: [/* @__PURE__ */ S(m, {
+				type: "button",
+				variant: "secondary",
+				onClick: o,
+				testId: `${W}-cancel`,
+				children: p(t.BUTTON$CANCEL)
+			}), /* @__PURE__ */ S(m, {
+				type: "submit",
+				variant: "primary",
+				isDisabled: !K || L,
+				testId: `${W}-submit`,
+				children: p(t.BACKEND$SAVE)
+			})]
+		})]
 	});
 }
 function F() {