@openhands/agent-canvas 1.0.0-alpha.8 → 1.0.0-beta.1

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 { useActiveBackendContext } from \"#/contexts/active-backend-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 { 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\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 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    testIdRoot: string;\n  }) => React.ReactNode;\n  /** Used to disambiguate test ids across the same screen. */\n  testIdRoot?: string;\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}: 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\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 canSubmit =\n    name.trim().length > 0 &&\n    isValidHostUrl(host) &&\n    (kind === \"local\" || 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 = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\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 = {\n      name: name.trim(),\n      host: normalizeHost(host),\n      apiKey: apiKey.trim(),\n      kind,\n    };\n\n    if (mode === \"edit\" && backend) {\n      updateBackend(backend.id, payload);\n    } else {\n      addBackend(payload);\n    }\n\n    onSubmitted();\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={setName}\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={setHost}\n        onBlur={() => setHostTouched(true)}\n        placeholder={DEFAULT_OPENHANDS_CLOUD_HOST}\n        className=\"w-full\"\n        showRequiredTag\n        error={hostError}\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={setApiKey}\n        placeholder=\"\"\n        className=\"w-full\"\n      />\n\n      {mode === \"edit\" && backend && (\n        <BackendStatusBadge backend={backend} testIdRoot={testIdRoot} />\n      )}\n\n      {renderActions ? (\n        renderActions({ canSubmit, testIdRoot })\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}\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 * 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\n  const [name, setName] = React.useState(\"\");\n  const [host, setHost] = React.useState(\"\");\n  const [apiKey, setApiKey] = React.useState(\"\");\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 = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    if (!canSubmit) return;\n    addBackend({\n      name: name.trim(),\n      host: normalizeHost(host),\n      apiKey: apiKey.trim(),\n      kind,\n    });\n    onClose();\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={setName}\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={setHost}\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={setApiKey}\n        placeholder=\"sk-••••••••••\"\n        className=\"w-full\"\n      />\n\n      <BrandButton\n        type=\"submit\"\n        variant=\"secondary\"\n        isDisabled={!canSubmit}\n        testId=\"add-backend-submit\"\n        className=\"w-full text-center\"\n      >\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\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    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=\"text-lg font-medium text-white\"\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=\"text-lg font-semibold\">\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=\"pr-6 text-lg font-semibold\">\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 { 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 { 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\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    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\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 (!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    if (onSubmitOverride) {\n      await onSubmitOverride(payload);\n      return;\n    }\n\n    if (mode === \"edit\" && backend) {\n      updateBackend(backend.id, payload);\n    } else {\n      addBackend(payload);\n    }\n\n    onSubmitted();\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={setName}\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={hostReadOnly ? undefined : setHost}\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={setApiKey}\n        placeholder=\"\"\n        className=\"w-full\"\n      />\n\n      {mode === \"edit\" && backend && (\n        <BackendStatusBadge backend={backend} testIdRoot={testIdRoot} />\n      )}\n\n      {renderActions ? (\n        renderActions({ canSubmit, testIdRoot })\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}\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\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 = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    if (!canSubmit) return;\n    addBackend({\n      name: name.trim(),\n      host: normalizeHost(host),\n      apiKey: apiKey.trim(),\n      kind,\n    });\n    redirectAfterAdd();\n    onClose();\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={setName}\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={setHost}\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={setApiKey}\n        placeholder=\"sk-••••••••••\"\n        className=\"w-full\"\n      />\n\n      <BrandButton\n        type=\"submit\"\n        variant=\"secondary\"\n        isDisabled={!canSubmit}\n        testId=\"add-backend-submit\"\n        className=\"w-full text-center\"\n      >\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=\"text-lg font-medium text-white\"\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=\"text-lg font-semibold\">\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=\"pr-6 text-lg font-semibold\">\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/browser/browser.cjs

@@ -1,2 +1,2 @@
-require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`./browser-snapshot.cjs`),t=require(`./empty-browser-message.cjs`),n=require(`../../../hooks/use-conversation-id.cjs`),r=require(`../../../stores/browser-store.cjs`);let i=require(`react`),a=require(`react/jsx-runtime`);function o(){let{url:o,screenshotSrc:s,reset:c}=r.useBrowserStore(),{conversationId:l}=n.useConversationId();(0,i.useEffect)(()=>{c()},[l,c]);let u=s?.startsWith(`data:image/png;base64,`)?s:`data:image/png;base64,${s??``}`;return(0,a.jsxs)(`div`,{className:`h-full w-full flex flex-col text-[var(--oh-muted)]`,children:[(0,a.jsx)(`div`,{className:`w-full p-2 truncate border-b border-[var(--oh-border)]`,children:o}),(0,a.jsx)(`div`,{className:`overflow-y-auto grow scrollbar-hide rounded-xl`,children:s?(0,a.jsx)(e.BrowserSnapshot,{src:u}):(0,a.jsx)(t.EmptyBrowserMessage,{})})]})}exports.BrowserPanel=o;
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`./browser-snapshot.cjs`),t=require(`./empty-browser-message.cjs`),n=require(`../../../stores/browser-store.cjs`);let r=require(`react/jsx-runtime`);function i(){let{url:i,screenshotSrc:a}=n.useBrowserStore(),o=a?.startsWith(`data:image/png;base64,`)?a:`data:image/png;base64,${a??``}`;return(0,r.jsxs)(`div`,{className:`h-full w-full flex flex-col text-[var(--oh-muted)]`,children:[(0,r.jsx)(`div`,{className:`w-full p-2 truncate border-b border-[var(--oh-border)]`,children:i}),(0,r.jsx)(`div`,{className:`overflow-y-auto grow scrollbar-hide rounded-xl`,children:a?(0,r.jsx)(e.BrowserSnapshot,{src:o}):(0,r.jsx)(t.EmptyBrowserMessage,{})})]})}exports.BrowserPanel=i;
 //# sourceMappingURL=browser.cjs.map

package/dist/components/features/browser/browser.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"browser.cjs","names":[],"sources":["../../../../src/components/features/browser/browser.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { BrowserSnapshot } from \"./browser-snapshot\";\nimport { EmptyBrowserMessage } from \"./empty-browser-message\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useBrowserStore } from \"#/stores/browser-store\";\n\nexport function BrowserPanel() {\n  const { url, screenshotSrc, reset } = useBrowserStore();\n  const { conversationId } = useConversationId();\n\n  useEffect(() => {\n    reset();\n  }, [conversationId, reset]);\n\n  const imgSrc = screenshotSrc?.startsWith(\"data:image/png;base64,\")\n    ? screenshotSrc\n    : `data:image/png;base64,${screenshotSrc ?? \"\"}`;\n\n  return (\n    <div className=\"h-full w-full flex flex-col text-[var(--oh-muted)]\">\n      <div className=\"w-full p-2 truncate border-b border-[var(--oh-border)]\">\n        {url}\n      </div>\n      <div className=\"overflow-y-auto grow scrollbar-hide rounded-xl\">\n        {screenshotSrc ? (\n          <BrowserSnapshot src={imgSrc} />\n        ) : (\n          <EmptyBrowserMessage />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"+RAMA,SAAgB,GAAe,CAC7B,GAAM,CAAE,MAAK,gBAAe,SAAU,EAAA,iBAAiB,CACjD,CAAE,kBAAmB,EAAA,mBAAmB,EAE9C,EAAA,EAAA,eAAgB,CACd,GAAO,EACN,CAAC,EAAgB,EAAM,CAAC,CAE3B,IAAM,EAAS,GAAe,WAAW,yBAAyB,CAC9D,EACA,yBAAyB,GAAiB,KAE9C,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,8DAAf,EACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,kEACZ,EACG,CAAA,EACN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,0DACZ,GACC,EAAA,EAAA,KAAC,EAAA,gBAAD,CAAiB,IAAK,EAAU,CAAA,EAEhC,EAAA,EAAA,KAAC,EAAA,oBAAD,EAAuB,CAAA,CAErB,CAAA,CACF"}
+{"version":3,"file":"browser.cjs","names":[],"sources":["../../../../src/components/features/browser/browser.tsx"],"sourcesContent":["import { BrowserSnapshot } from \"./browser-snapshot\";\nimport { EmptyBrowserMessage } from \"./empty-browser-message\";\nimport { useBrowserStore } from \"#/stores/browser-store\";\n\nexport function BrowserPanel() {\n  const { url, screenshotSrc } = useBrowserStore();\n\n  const imgSrc = screenshotSrc?.startsWith(\"data:image/png;base64,\")\n    ? screenshotSrc\n    : `data:image/png;base64,${screenshotSrc ?? \"\"}`;\n\n  return (\n    <div className=\"h-full w-full flex flex-col text-[var(--oh-muted)]\">\n      <div className=\"w-full p-2 truncate border-b border-[var(--oh-border)]\">\n        {url}\n      </div>\n      <div className=\"overflow-y-auto grow scrollbar-hide rounded-xl\">\n        {screenshotSrc ? (\n          <BrowserSnapshot src={imgSrc} />\n        ) : (\n          <EmptyBrowserMessage />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"wNAIA,SAAgB,GAAe,CAC7B,GAAM,CAAE,MAAK,iBAAkB,EAAA,iBAAiB,CAE1C,EAAS,GAAe,WAAW,yBAAyB,CAC9D,EACA,yBAAyB,GAAiB,KAE9C,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,8DAAf,EACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,kEACZ,EACG,CAAA,EACN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,0DACZ,GACC,EAAA,EAAA,KAAC,EAAA,gBAAD,CAAiB,IAAK,EAAU,CAAA,EAEhC,EAAA,EAAA,KAAC,EAAA,oBAAD,EAAuB,CAAA,CAErB,CAAA,CACF"}

package/dist/components/features/browser/browser.js

@@ -1,28 +1,22 @@
 import { BrowserSnapshot as e } from "./browser-snapshot.js";
 import { EmptyBrowserMessage as t } from "./empty-browser-message.js";
-import { useConversationId as n } from "../../../hooks/use-conversation-id.js";
-import { useBrowserStore as r } from "../../../stores/browser-store.js";
-import { useEffect as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useBrowserStore as n } from "../../../stores/browser-store.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/features/browser/browser.tsx
-function s() {
-	let { url: s, screenshotSrc: c, reset: l } = r(), { conversationId: u } = n();
-	i(() => {
-		l();
-	}, [u, l]);
-	let d = c?.startsWith("data:image/png;base64,") ? c : `data:image/png;base64,${c ?? ""}`;
-	return /* @__PURE__ */ o("div", {
+function a() {
+	let { url: a, screenshotSrc: o } = n(), s = o?.startsWith("data:image/png;base64,") ? o : `data:image/png;base64,${o ?? ""}`;
+	return /* @__PURE__ */ i("div", {
 		className: "h-full w-full flex flex-col text-[var(--oh-muted)]",
-		children: [/* @__PURE__ */ a("div", {
+		children: [/* @__PURE__ */ r("div", {
 			className: "w-full p-2 truncate border-b border-[var(--oh-border)]",
-			children: s
-		}), /* @__PURE__ */ a("div", {
+			children: a
+		}), /* @__PURE__ */ r("div", {
 			className: "overflow-y-auto grow scrollbar-hide rounded-xl",
-			children: c ? /* @__PURE__ */ a(e, { src: d }) : /* @__PURE__ */ a(t, {})
+			children: o ? /* @__PURE__ */ r(e, { src: s }) : /* @__PURE__ */ r(t, {})
 		})]
 	});
 }
 //#endregion
-export { s as BrowserPanel };
+export { a as BrowserPanel };
 
 //# sourceMappingURL=browser.js.map

package/dist/components/features/browser/browser.js.map

@@ -1 +1 @@
-{"version":3,"file":"browser.js","names":[],"sources":["../../../../src/components/features/browser/browser.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { BrowserSnapshot } from \"./browser-snapshot\";\nimport { EmptyBrowserMessage } from \"./empty-browser-message\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useBrowserStore } from \"#/stores/browser-store\";\n\nexport function BrowserPanel() {\n  const { url, screenshotSrc, reset } = useBrowserStore();\n  const { conversationId } = useConversationId();\n\n  useEffect(() => {\n    reset();\n  }, [conversationId, reset]);\n\n  const imgSrc = screenshotSrc?.startsWith(\"data:image/png;base64,\")\n    ? screenshotSrc\n    : `data:image/png;base64,${screenshotSrc ?? \"\"}`;\n\n  return (\n    <div className=\"h-full w-full flex flex-col text-[var(--oh-muted)]\">\n      <div className=\"w-full p-2 truncate border-b border-[var(--oh-border)]\">\n        {url}\n      </div>\n      <div className=\"overflow-y-auto grow scrollbar-hide rounded-xl\">\n        {screenshotSrc ? (\n          <BrowserSnapshot src={imgSrc} />\n        ) : (\n          <EmptyBrowserMessage />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAMA,SAAgB,IAAe;CAC7B,IAAM,EAAE,QAAK,kBAAe,aAAU,GAAiB,EACjD,EAAE,sBAAmB,GAAmB;AAE9C,SAAgB;AACd,KAAO;IACN,CAAC,GAAgB,EAAM,CAAC;CAE3B,IAAM,IAAS,GAAe,WAAW,yBAAyB,GAC9D,IACA,yBAAyB,KAAiB;AAE9C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aACZ;GACG,CAAA,EACN,kBAAC,OAAD;GAAK,WAAU;aACZ,IACC,kBAAC,GAAD,EAAiB,KAAK,GAAU,CAAA,GAEhC,kBAAC,GAAD,EAAuB,CAAA;GAErB,CAAA,CACF"}
+{"version":3,"file":"browser.js","names":[],"sources":["../../../../src/components/features/browser/browser.tsx"],"sourcesContent":["import { BrowserSnapshot } from \"./browser-snapshot\";\nimport { EmptyBrowserMessage } from \"./empty-browser-message\";\nimport { useBrowserStore } from \"#/stores/browser-store\";\n\nexport function BrowserPanel() {\n  const { url, screenshotSrc } = useBrowserStore();\n\n  const imgSrc = screenshotSrc?.startsWith(\"data:image/png;base64,\")\n    ? screenshotSrc\n    : `data:image/png;base64,${screenshotSrc ?? \"\"}`;\n\n  return (\n    <div className=\"h-full w-full flex flex-col text-[var(--oh-muted)]\">\n      <div className=\"w-full p-2 truncate border-b border-[var(--oh-border)]\">\n        {url}\n      </div>\n      <div className=\"overflow-y-auto grow scrollbar-hide rounded-xl\">\n        {screenshotSrc ? (\n          <BrowserSnapshot src={imgSrc} />\n        ) : (\n          <EmptyBrowserMessage />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAIA,SAAgB,IAAe;CAC7B,IAAM,EAAE,QAAK,qBAAkB,GAAiB,EAE1C,IAAS,GAAe,WAAW,yBAAyB,GAC9D,IACA,yBAAyB,KAAiB;AAE9C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aACZ;GACG,CAAA,EACN,kBAAC,OAAD;GAAK,WAAU;aACZ,IACC,kBAAC,GAAD,EAAiB,KAAK,GAAU,CAAA,GAEhC,kBAAC,GAAD,EAAuB,CAAA;GAErB,CAAA,CACF"}

package/dist/components/features/conversation-panel/skills-modal.cjs

@@ -1,2 +1,2 @@
-require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../types/agent-state.cjs`),r=require(`../../../api/agent-server-config.cjs`),i=require(`../../../hooks/use-agent-state.cjs`),a=require(`../../../hooks/query/use-skills.cjs`),o=require(`../../shared/modals/modal-backdrop.cjs`),s=require(`../../shared/modals/modal-body.cjs`),c=require(`../../../utils/skill-scope.cjs`),l=require(`./skills-modal-header.cjs`),u=require(`./skills-modal-section.cjs`),d=require(`./skills-runtime-waiting-state.cjs`),f=require(`./skills-loading-state.cjs`),p=require(`./skills-empty-state.cjs`),m=require(`./skill-item.cjs`);let h=require(`react`),g=require(`react/jsx-runtime`);var _={project:t.I18nKey.SKILLS_MODAL$SECTION_PROJECT,personal:t.I18nKey.SKILLS_MODAL$SECTION_USER,public:t.I18nKey.SKILLS_MODAL$SECTION_PUBLIC};function v({onClose:t}){let{t:v}=e.useTranslation(`openhands`),{curAgentState:y}=i.useAgentState(),b=r.getAgentServerWorkingDir(),[x,S]=(0,h.useState)({}),{data:C,isLoading:w,isError:T,refetch:E,isRefetching:D}=a.useSkills(),O=(0,h.useMemo)(()=>C?c.groupSkillsByScope(C,b):null,[C,b]),k=e=>{S(t=>({...t,[e]:!t[e]}))},A=![n.AgentState.LOADING,n.AgentState.INIT].includes(y);return(0,g.jsx)(o.ModalBackdrop,{onClose:t,children:(0,g.jsxs)(s.ModalBody,{width:`lg`,className:`relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]`,testID:`skills-modal`,children:[(0,g.jsx)(l.SkillsModalHeader,{isLoading:w,isRefetching:D,onRefresh:E,onClose:t}),(0,g.jsx)(`div`,{className:`w-full h-[60vh] overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always`,children:A?w?(0,g.jsx)(f.SkillsLoadingState,{}):T||!C||C.length===0?(0,g.jsx)(p.SkillsEmptyState,{isError:T}):O&&(0,g.jsx)(`div`,{className:`divide-y divide-[var(--oh-border)]`,children:c.SKILL_SCOPE_ORDER.map(e=>{let t=O[e];return t.length===0?null:(0,g.jsx)(u.SkillsModalSection,{title:v(_[e]),count:t.length,children:t.map(t=>(0,g.jsx)(m.SkillItem,{skill:t,isExpanded:x[t.name]||!1,onToggle:k},`${e}-${t.name}`))},e)})}):(0,g.jsx)(d.SkillsRuntimeWaitingState,{})})]})})}exports.SkillsModal=v;
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../types/agent-state.cjs`),r=require(`../../../api/agent-server-config.cjs`),i=require(`../../../hooks/use-agent-state.cjs`),a=require(`../../../hooks/query/use-conversation-skills.cjs`),o=require(`../../shared/modals/modal-backdrop.cjs`),s=require(`../../shared/modals/modal-body.cjs`),c=require(`../../../utils/skill-scope.cjs`),l=require(`./skills-modal-header.cjs`),u=require(`./skills-modal-section.cjs`),d=require(`./skills-runtime-waiting-state.cjs`),f=require(`./skills-loading-state.cjs`),p=require(`./skills-empty-state.cjs`),m=require(`./skill-item.cjs`);let h=require(`react`),g=require(`react/jsx-runtime`);var _={project:t.I18nKey.SKILLS_MODAL$SECTION_PROJECT,personal:t.I18nKey.SKILLS_MODAL$SECTION_USER,public:t.I18nKey.SKILLS_MODAL$SECTION_PUBLIC};function v({onClose:t}){let{t:v}=e.useTranslation(`openhands`),{curAgentState:y}=i.useAgentState(),b=r.getAgentServerWorkingDir(),[x,S]=(0,h.useState)({}),{data:C,isLoading:w,isError:T,refetch:E,isRefetching:D}=a.useConversationSkills(),O=(0,h.useMemo)(()=>C?c.groupSkillsByScope(C,b):null,[C,b]),k=e=>{S(t=>({...t,[e]:!t[e]}))},A=![n.AgentState.LOADING,n.AgentState.INIT].includes(y);return(0,g.jsx)(o.ModalBackdrop,{onClose:t,children:(0,g.jsxs)(s.ModalBody,{width:`lg`,className:`relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]`,testID:`skills-modal`,children:[(0,g.jsx)(l.SkillsModalHeader,{isLoading:w,isRefetching:D,onRefresh:E,onClose:t}),(0,g.jsx)(`div`,{className:`w-full h-[60vh] overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always`,children:A?w?(0,g.jsx)(f.SkillsLoadingState,{}):T||!C||C.length===0?(0,g.jsx)(p.SkillsEmptyState,{isError:T}):O&&(0,g.jsx)(`div`,{className:`divide-y divide-[var(--oh-border)]`,children:c.SKILL_SCOPE_ORDER.map(e=>{let t=O[e];return t.length===0?null:(0,g.jsx)(u.SkillsModalSection,{title:v(_[e]),count:t.length,children:t.map(t=>(0,g.jsx)(m.SkillItem,{skill:t,isExpanded:x[t.name]||!1,onToggle:k},`${e}-${t.name}`))},e)})}):(0,g.jsx)(d.SkillsRuntimeWaitingState,{})})]})})}exports.SkillsModal=v;
 //# sourceMappingURL=skills-modal.cjs.map

package/dist/components/features/conversation-panel/skills-modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"skills-modal.cjs","names":[],"sources":["../../../../src/components/features/conversation-panel/skills-modal.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalBody } from \"#/components/shared/modals/modal-body\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { getAgentServerWorkingDir } from \"#/api/agent-server-config\";\nimport { useSkills } from \"#/hooks/query/use-skills\";\nimport { AgentState } from \"#/types/agent-state\";\nimport {\n  groupSkillsByScope,\n  SKILL_SCOPE_ORDER,\n  type SkillScope,\n} from \"#/utils/skill-scope\";\nimport { SkillsModalHeader } from \"./skills-modal-header\";\nimport { SkillsModalSection } from \"./skills-modal-section\";\nimport { SkillsRuntimeWaitingState } from \"./skills-runtime-waiting-state\";\nimport { SkillsLoadingState } from \"./skills-loading-state\";\nimport { SkillsEmptyState } from \"./skills-empty-state\";\nimport { SkillItem } from \"./skill-item\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\n\ninterface SkillsModalProps {\n  onClose: () => void;\n}\n\nconst SECTION_TITLE_KEY: Record<SkillScope, I18nKey> = {\n  project: I18nKey.SKILLS_MODAL$SECTION_PROJECT,\n  personal: I18nKey.SKILLS_MODAL$SECTION_USER,\n  public: I18nKey.SKILLS_MODAL$SECTION_PUBLIC,\n};\n\nexport function SkillsModal({ onClose }: SkillsModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { curAgentState } = useAgentState();\n  const projectDir = getAgentServerWorkingDir();\n  const [expandedAgents, setExpandedAgents] = useState<Record<string, boolean>>(\n    {},\n  );\n  const {\n    data: skills,\n    isLoading,\n    isError,\n    refetch,\n    isRefetching,\n  } = useSkills();\n\n  const groupedSkills = useMemo(\n    () => (skills ? groupSkillsByScope(skills, projectDir) : null),\n    [skills, projectDir],\n  );\n\n  const toggleAgent = (agentName: string) => {\n    setExpandedAgents((prev) => ({\n      ...prev,\n      [agentName]: !prev[agentName],\n    }));\n  };\n\n  const isAgentReady = ![AgentState.LOADING, AgentState.INIT].includes(\n    curAgentState,\n  );\n\n  return (\n    <ModalBackdrop onClose={onClose}>\n      <ModalBody\n        width=\"lg\"\n        className=\"relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]\"\n        testID=\"skills-modal\"\n      >\n        <SkillsModalHeader\n          isLoading={isLoading}\n          isRefetching={isRefetching}\n          onRefresh={refetch}\n          onClose={onClose}\n        />\n\n        <div className=\"w-full h-[60vh] overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\">\n          {!isAgentReady ? (\n            <SkillsRuntimeWaitingState />\n          ) : isLoading ? (\n            <SkillsLoadingState />\n          ) : isError || !skills || skills.length === 0 ? (\n            <SkillsEmptyState isError={isError} />\n          ) : (\n            groupedSkills && (\n              <div className=\"divide-y divide-[var(--oh-border)]\">\n                {SKILL_SCOPE_ORDER.map((scope) => {\n                  const scopedSkills = groupedSkills[scope];\n                  if (scopedSkills.length === 0) {\n                    return null;\n                  }\n\n                  return (\n                    <SkillsModalSection\n                      key={scope}\n                      title={t(SECTION_TITLE_KEY[scope])}\n                      count={scopedSkills.length}\n                    >\n                      {scopedSkills.map((skill) => {\n                        const isExpanded = expandedAgents[skill.name] || false;\n\n                        return (\n                          <SkillItem\n                            key={`${scope}-${skill.name}`}\n                            skill={skill}\n                            isExpanded={isExpanded}\n                            onToggle={toggleAgent}\n                          />\n                        );\n                      })}\n                    </SkillsModalSection>\n                  );\n                })}\n              </div>\n            )\n          )}\n        </div>\n      </ModalBody>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":"gyBAyBA,IAAM,EAAiD,CACrD,QAAS,EAAA,QAAQ,6BACjB,SAAU,EAAA,QAAQ,0BAClB,OAAQ,EAAA,QAAQ,4BACjB,CAED,SAAgB,EAAY,CAAE,WAA6B,CACzD,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,iBAAkB,EAAA,eAAe,CACnC,EAAa,EAAA,0BAA0B,CACvC,CAAC,EAAgB,IAAA,EAAA,EAAA,UACrB,EAAE,CACH,CACK,CACJ,KAAM,EACN,YACA,UACA,UACA,gBACE,EAAA,WAAW,CAET,GAAA,EAAA,EAAA,aACG,EAAS,EAAA,mBAAmB,EAAQ,EAAW,CAAG,KACzD,CAAC,EAAQ,EAAW,CACrB,CAEK,EAAe,GAAsB,CACzC,EAAmB,IAAU,CAC3B,GAAG,GACF,GAAY,CAAC,EAAK,GACpB,EAAE,EAGC,EAAe,CAAC,CAAC,EAAA,WAAW,QAAS,EAAA,WAAW,KAAK,CAAC,SAC1D,EACD,CAED,OACE,EAAA,EAAA,KAAC,EAAA,cAAD,CAAwB,oBACtB,EAAA,EAAA,MAAC,EAAA,UAAD,CACE,MAAM,KACN,UAAU,mFACV,OAAO,wBAHT,EAKE,EAAA,EAAA,KAAC,EAAA,kBAAD,CACa,YACG,eACd,UAAW,EACF,UACT,CAAA,EAEF,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,+HACX,EAEE,GACF,EAAA,EAAA,KAAC,EAAA,mBAAD,EAAsB,CAAA,CACpB,GAAW,CAAC,GAAU,EAAO,SAAW,GAC1C,EAAA,EAAA,KAAC,EAAA,iBAAD,CAA2B,UAAW,CAAA,CAEtC,IACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,8CACZ,EAAA,kBAAkB,IAAK,GAAU,CAChC,IAAM,EAAe,EAAc,GAKnC,OAJI,EAAa,SAAW,EACnB,MAIP,EAAA,EAAA,KAAC,EAAA,mBAAD,CAEE,MAAO,EAAE,EAAkB,GAAO,CAClC,MAAO,EAAa,gBAEnB,EAAa,IAAK,IAIf,EAAA,EAAA,KAAC,EAAA,UAAD,CAES,QACK,WANG,EAAe,EAAM,OAAS,GAO7C,SAAU,EACV,CAJK,GAAG,EAAM,GAAG,EAAM,OAIvB,CAEJ,CACiB,CAhBd,EAgBc,EAEvB,CACE,CAAA,EAnCR,EAAA,EAAA,KAAC,EAAA,0BAAD,EAA6B,CAAA,CAsC3B,CAAA,CACI,GACE,CAAA"}
+{"version":3,"file":"skills-modal.cjs","names":[],"sources":["../../../../src/components/features/conversation-panel/skills-modal.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalBody } from \"#/components/shared/modals/modal-body\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { getAgentServerWorkingDir } from \"#/api/agent-server-config\";\nimport { useConversationSkills } from \"#/hooks/query/use-conversation-skills\";\nimport { AgentState } from \"#/types/agent-state\";\nimport {\n  groupSkillsByScope,\n  SKILL_SCOPE_ORDER,\n  type SkillScope,\n} from \"#/utils/skill-scope\";\nimport { SkillsModalHeader } from \"./skills-modal-header\";\nimport { SkillsModalSection } from \"./skills-modal-section\";\nimport { SkillsRuntimeWaitingState } from \"./skills-runtime-waiting-state\";\nimport { SkillsLoadingState } from \"./skills-loading-state\";\nimport { SkillsEmptyState } from \"./skills-empty-state\";\nimport { SkillItem } from \"./skill-item\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\n\ninterface SkillsModalProps {\n  onClose: () => void;\n}\n\nconst SECTION_TITLE_KEY: Record<SkillScope, I18nKey> = {\n  project: I18nKey.SKILLS_MODAL$SECTION_PROJECT,\n  personal: I18nKey.SKILLS_MODAL$SECTION_USER,\n  public: I18nKey.SKILLS_MODAL$SECTION_PUBLIC,\n};\n\nexport function SkillsModal({ onClose }: SkillsModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { curAgentState } = useAgentState();\n  const projectDir = getAgentServerWorkingDir();\n  const [expandedAgents, setExpandedAgents] = useState<Record<string, boolean>>(\n    {},\n  );\n  // Scope the catalog to this conversation's attached workspace so the listed\n  // skills match the project skills actually loaded into the conversation.\n  const {\n    data: skills,\n    isLoading,\n    isError,\n    refetch,\n    isRefetching,\n  } = useConversationSkills();\n\n  const groupedSkills = useMemo(\n    () => (skills ? groupSkillsByScope(skills, projectDir) : null),\n    [skills, projectDir],\n  );\n\n  const toggleAgent = (agentName: string) => {\n    setExpandedAgents((prev) => ({\n      ...prev,\n      [agentName]: !prev[agentName],\n    }));\n  };\n\n  const isAgentReady = ![AgentState.LOADING, AgentState.INIT].includes(\n    curAgentState,\n  );\n\n  return (\n    <ModalBackdrop onClose={onClose}>\n      <ModalBody\n        width=\"lg\"\n        className=\"relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]\"\n        testID=\"skills-modal\"\n      >\n        <SkillsModalHeader\n          isLoading={isLoading}\n          isRefetching={isRefetching}\n          onRefresh={refetch}\n          onClose={onClose}\n        />\n\n        <div className=\"w-full h-[60vh] overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\">\n          {!isAgentReady ? (\n            <SkillsRuntimeWaitingState />\n          ) : isLoading ? (\n            <SkillsLoadingState />\n          ) : isError || !skills || skills.length === 0 ? (\n            <SkillsEmptyState isError={isError} />\n          ) : (\n            groupedSkills && (\n              <div className=\"divide-y divide-[var(--oh-border)]\">\n                {SKILL_SCOPE_ORDER.map((scope) => {\n                  const scopedSkills = groupedSkills[scope];\n                  if (scopedSkills.length === 0) {\n                    return null;\n                  }\n\n                  return (\n                    <SkillsModalSection\n                      key={scope}\n                      title={t(SECTION_TITLE_KEY[scope])}\n                      count={scopedSkills.length}\n                    >\n                      {scopedSkills.map((skill) => {\n                        const isExpanded = expandedAgents[skill.name] || false;\n\n                        return (\n                          <SkillItem\n                            key={`${scope}-${skill.name}`}\n                            skill={skill}\n                            isExpanded={isExpanded}\n                            onToggle={toggleAgent}\n                          />\n                        );\n                      })}\n                    </SkillsModalSection>\n                  );\n                })}\n              </div>\n            )\n          )}\n        </div>\n      </ModalBody>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":"6yBAyBA,IAAM,EAAiD,CACrD,QAAS,EAAA,QAAQ,6BACjB,SAAU,EAAA,QAAQ,0BAClB,OAAQ,EAAA,QAAQ,4BACjB,CAED,SAAgB,EAAY,CAAE,WAA6B,CACzD,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,iBAAkB,EAAA,eAAe,CACnC,EAAa,EAAA,0BAA0B,CACvC,CAAC,EAAgB,IAAA,EAAA,EAAA,UACrB,EAAE,CACH,CAGK,CACJ,KAAM,EACN,YACA,UACA,UACA,gBACE,EAAA,uBAAuB,CAErB,GAAA,EAAA,EAAA,aACG,EAAS,EAAA,mBAAmB,EAAQ,EAAW,CAAG,KACzD,CAAC,EAAQ,EAAW,CACrB,CAEK,EAAe,GAAsB,CACzC,EAAmB,IAAU,CAC3B,GAAG,GACF,GAAY,CAAC,EAAK,GACpB,EAAE,EAGC,EAAe,CAAC,CAAC,EAAA,WAAW,QAAS,EAAA,WAAW,KAAK,CAAC,SAC1D,EACD,CAED,OACE,EAAA,EAAA,KAAC,EAAA,cAAD,CAAwB,oBACtB,EAAA,EAAA,MAAC,EAAA,UAAD,CACE,MAAM,KACN,UAAU,mFACV,OAAO,wBAHT,EAKE,EAAA,EAAA,KAAC,EAAA,kBAAD,CACa,YACG,eACd,UAAW,EACF,UACT,CAAA,EAEF,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,+HACX,EAEE,GACF,EAAA,EAAA,KAAC,EAAA,mBAAD,EAAsB,CAAA,CACpB,GAAW,CAAC,GAAU,EAAO,SAAW,GAC1C,EAAA,EAAA,KAAC,EAAA,iBAAD,CAA2B,UAAW,CAAA,CAEtC,IACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,8CACZ,EAAA,kBAAkB,IAAK,GAAU,CAChC,IAAM,EAAe,EAAc,GAKnC,OAJI,EAAa,SAAW,EACnB,MAIP,EAAA,EAAA,KAAC,EAAA,mBAAD,CAEE,MAAO,EAAE,EAAkB,GAAO,CAClC,MAAO,EAAa,gBAEnB,EAAa,IAAK,IAIf,EAAA,EAAA,KAAC,EAAA,UAAD,CAES,QACK,WANG,EAAe,EAAM,OAAS,GAO7C,SAAU,EACV,CAJK,GAAG,EAAM,GAAG,EAAM,OAIvB,CAEJ,CACiB,CAhBd,EAgBc,EAEvB,CACE,CAAA,EAnCR,EAAA,EAAA,KAAC,EAAA,0BAAD,EAA6B,CAAA,CAsC3B,CAAA,CACI,GACE,CAAA"}

package/dist/components/features/conversation-panel/skills-modal.js

@@ -3,7 +3,7 @@ import { I18nKey as t } from "../../../i18n/declaration.js";
 import { AgentState as n } from "../../../types/agent-state.js";
 import { getAgentServerWorkingDir as r } from "../../../api/agent-server-config.js";
 import { useAgentState as i } from "../../../hooks/use-agent-state.js";
-import { useSkills as a } from "../../../hooks/query/use-skills.js";
+import { useConversationSkills as a } from "../../../hooks/query/use-conversation-skills.js";
 import { ModalBackdrop as o } from "../../shared/modals/modal-backdrop.js";
 import { ModalBody as s } from "../../shared/modals/modal-body.js";
 import { SKILL_SCOPE_ORDER as c, groupSkillsByScope as l } from "../../../utils/skill-scope.js";

package/dist/components/features/conversation-panel/skills-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"skills-modal.js","names":[],"sources":["../../../../src/components/features/conversation-panel/skills-modal.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalBody } from \"#/components/shared/modals/modal-body\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { getAgentServerWorkingDir } from \"#/api/agent-server-config\";\nimport { useSkills } from \"#/hooks/query/use-skills\";\nimport { AgentState } from \"#/types/agent-state\";\nimport {\n  groupSkillsByScope,\n  SKILL_SCOPE_ORDER,\n  type SkillScope,\n} from \"#/utils/skill-scope\";\nimport { SkillsModalHeader } from \"./skills-modal-header\";\nimport { SkillsModalSection } from \"./skills-modal-section\";\nimport { SkillsRuntimeWaitingState } from \"./skills-runtime-waiting-state\";\nimport { SkillsLoadingState } from \"./skills-loading-state\";\nimport { SkillsEmptyState } from \"./skills-empty-state\";\nimport { SkillItem } from \"./skill-item\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\n\ninterface SkillsModalProps {\n  onClose: () => void;\n}\n\nconst SECTION_TITLE_KEY: Record<SkillScope, I18nKey> = {\n  project: I18nKey.SKILLS_MODAL$SECTION_PROJECT,\n  personal: I18nKey.SKILLS_MODAL$SECTION_USER,\n  public: I18nKey.SKILLS_MODAL$SECTION_PUBLIC,\n};\n\nexport function SkillsModal({ onClose }: SkillsModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { curAgentState } = useAgentState();\n  const projectDir = getAgentServerWorkingDir();\n  const [expandedAgents, setExpandedAgents] = useState<Record<string, boolean>>(\n    {},\n  );\n  const {\n    data: skills,\n    isLoading,\n    isError,\n    refetch,\n    isRefetching,\n  } = useSkills();\n\n  const groupedSkills = useMemo(\n    () => (skills ? groupSkillsByScope(skills, projectDir) : null),\n    [skills, projectDir],\n  );\n\n  const toggleAgent = (agentName: string) => {\n    setExpandedAgents((prev) => ({\n      ...prev,\n      [agentName]: !prev[agentName],\n    }));\n  };\n\n  const isAgentReady = ![AgentState.LOADING, AgentState.INIT].includes(\n    curAgentState,\n  );\n\n  return (\n    <ModalBackdrop onClose={onClose}>\n      <ModalBody\n        width=\"lg\"\n        className=\"relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]\"\n        testID=\"skills-modal\"\n      >\n        <SkillsModalHeader\n          isLoading={isLoading}\n          isRefetching={isRefetching}\n          onRefresh={refetch}\n          onClose={onClose}\n        />\n\n        <div className=\"w-full h-[60vh] overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\">\n          {!isAgentReady ? (\n            <SkillsRuntimeWaitingState />\n          ) : isLoading ? (\n            <SkillsLoadingState />\n          ) : isError || !skills || skills.length === 0 ? (\n            <SkillsEmptyState isError={isError} />\n          ) : (\n            groupedSkills && (\n              <div className=\"divide-y divide-[var(--oh-border)]\">\n                {SKILL_SCOPE_ORDER.map((scope) => {\n                  const scopedSkills = groupedSkills[scope];\n                  if (scopedSkills.length === 0) {\n                    return null;\n                  }\n\n                  return (\n                    <SkillsModalSection\n                      key={scope}\n                      title={t(SECTION_TITLE_KEY[scope])}\n                      count={scopedSkills.length}\n                    >\n                      {scopedSkills.map((skill) => {\n                        const isExpanded = expandedAgents[skill.name] || false;\n\n                        return (\n                          <SkillItem\n                            key={`${scope}-${skill.name}`}\n                            skill={skill}\n                            isExpanded={isExpanded}\n                            onToggle={toggleAgent}\n                          />\n                        );\n                      })}\n                    </SkillsModalSection>\n                  );\n                })}\n              </div>\n            )\n          )}\n        </div>\n      </ModalBody>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,IAAM,IAAiD;CACrD,SAAS,EAAQ;CACjB,UAAU,EAAQ;CAClB,QAAQ,EAAQ;CACjB;AAED,SAAgB,EAAY,EAAE,cAA6B;CACzD,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,qBAAkB,GAAe,EACnC,IAAa,GAA0B,EACvC,CAAC,GAAgB,KAAqB,EAC1C,EAAE,CACH,EACK,EACJ,MAAM,GACN,cACA,YACA,YACA,oBACE,GAAW,EAET,IAAgB,QACb,IAAS,EAAmB,GAAQ,EAAW,GAAG,MACzD,CAAC,GAAQ,EAAW,CACrB,EAEK,KAAe,MAAsB;AACzC,KAAmB,OAAU;GAC3B,GAAG;IACF,IAAY,CAAC,EAAK;GACpB,EAAE;IAGC,IAAe,CAAC,CAAC,EAAW,SAAS,EAAW,KAAK,CAAC,SAC1D,EACD;AAED,QACE,kBAAC,GAAD;EAAwB;YACtB,kBAAC,GAAD;GACE,OAAM;GACN,WAAU;GACV,QAAO;aAHT,CAKE,kBAAC,GAAD;IACa;IACG;IACd,WAAW;IACF;IACT,CAAA,EAEF,kBAAC,OAAD;IAAK,WAAU;cACX,IAEE,IACF,kBAAC,GAAD,EAAsB,CAAA,GACpB,KAAW,CAAC,KAAU,EAAO,WAAW,IAC1C,kBAAC,GAAD,EAA2B,YAAW,CAAA,GAEtC,KACE,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAkB,KAAK,MAAU;MAChC,IAAM,IAAe,EAAc;AAKnC,aAJI,EAAa,WAAW,IACnB,OAIP,kBAAC,GAAD;OAEE,OAAO,EAAE,EAAkB,GAAO;OAClC,OAAO,EAAa;iBAEnB,EAAa,KAAK,MAIf,kBAAC,GAAD;QAES;QACK,YANG,EAAe,EAAM,SAAS;QAO7C,UAAU;QACV,EAJK,GAAG,EAAM,GAAG,EAAM,OAIvB,CAEJ;OACiB,EAhBd,EAgBc;OAEvB;KACE,CAAA,GAnCR,kBAAC,GAAD,EAA6B,CAAA;IAsC3B,CAAA,CACI;;EACE,CAAA"}
+{"version":3,"file":"skills-modal.js","names":[],"sources":["../../../../src/components/features/conversation-panel/skills-modal.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalBody } from \"#/components/shared/modals/modal-body\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { getAgentServerWorkingDir } from \"#/api/agent-server-config\";\nimport { useConversationSkills } from \"#/hooks/query/use-conversation-skills\";\nimport { AgentState } from \"#/types/agent-state\";\nimport {\n  groupSkillsByScope,\n  SKILL_SCOPE_ORDER,\n  type SkillScope,\n} from \"#/utils/skill-scope\";\nimport { SkillsModalHeader } from \"./skills-modal-header\";\nimport { SkillsModalSection } from \"./skills-modal-section\";\nimport { SkillsRuntimeWaitingState } from \"./skills-runtime-waiting-state\";\nimport { SkillsLoadingState } from \"./skills-loading-state\";\nimport { SkillsEmptyState } from \"./skills-empty-state\";\nimport { SkillItem } from \"./skill-item\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\n\ninterface SkillsModalProps {\n  onClose: () => void;\n}\n\nconst SECTION_TITLE_KEY: Record<SkillScope, I18nKey> = {\n  project: I18nKey.SKILLS_MODAL$SECTION_PROJECT,\n  personal: I18nKey.SKILLS_MODAL$SECTION_USER,\n  public: I18nKey.SKILLS_MODAL$SECTION_PUBLIC,\n};\n\nexport function SkillsModal({ onClose }: SkillsModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { curAgentState } = useAgentState();\n  const projectDir = getAgentServerWorkingDir();\n  const [expandedAgents, setExpandedAgents] = useState<Record<string, boolean>>(\n    {},\n  );\n  // Scope the catalog to this conversation's attached workspace so the listed\n  // skills match the project skills actually loaded into the conversation.\n  const {\n    data: skills,\n    isLoading,\n    isError,\n    refetch,\n    isRefetching,\n  } = useConversationSkills();\n\n  const groupedSkills = useMemo(\n    () => (skills ? groupSkillsByScope(skills, projectDir) : null),\n    [skills, projectDir],\n  );\n\n  const toggleAgent = (agentName: string) => {\n    setExpandedAgents((prev) => ({\n      ...prev,\n      [agentName]: !prev[agentName],\n    }));\n  };\n\n  const isAgentReady = ![AgentState.LOADING, AgentState.INIT].includes(\n    curAgentState,\n  );\n\n  return (\n    <ModalBackdrop onClose={onClose}>\n      <ModalBody\n        width=\"lg\"\n        className=\"relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]\"\n        testID=\"skills-modal\"\n      >\n        <SkillsModalHeader\n          isLoading={isLoading}\n          isRefetching={isRefetching}\n          onRefresh={refetch}\n          onClose={onClose}\n        />\n\n        <div className=\"w-full h-[60vh] overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\">\n          {!isAgentReady ? (\n            <SkillsRuntimeWaitingState />\n          ) : isLoading ? (\n            <SkillsLoadingState />\n          ) : isError || !skills || skills.length === 0 ? (\n            <SkillsEmptyState isError={isError} />\n          ) : (\n            groupedSkills && (\n              <div className=\"divide-y divide-[var(--oh-border)]\">\n                {SKILL_SCOPE_ORDER.map((scope) => {\n                  const scopedSkills = groupedSkills[scope];\n                  if (scopedSkills.length === 0) {\n                    return null;\n                  }\n\n                  return (\n                    <SkillsModalSection\n                      key={scope}\n                      title={t(SECTION_TITLE_KEY[scope])}\n                      count={scopedSkills.length}\n                    >\n                      {scopedSkills.map((skill) => {\n                        const isExpanded = expandedAgents[skill.name] || false;\n\n                        return (\n                          <SkillItem\n                            key={`${scope}-${skill.name}`}\n                            skill={skill}\n                            isExpanded={isExpanded}\n                            onToggle={toggleAgent}\n                          />\n                        );\n                      })}\n                    </SkillsModalSection>\n                  );\n                })}\n              </div>\n            )\n          )}\n        </div>\n      </ModalBody>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,IAAM,IAAiD;CACrD,SAAS,EAAQ;CACjB,UAAU,EAAQ;CAClB,QAAQ,EAAQ;CACjB;AAED,SAAgB,EAAY,EAAE,cAA6B;CACzD,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,qBAAkB,GAAe,EACnC,IAAa,GAA0B,EACvC,CAAC,GAAgB,KAAqB,EAC1C,EAAE,CACH,EAGK,EACJ,MAAM,GACN,cACA,YACA,YACA,oBACE,GAAuB,EAErB,IAAgB,QACb,IAAS,EAAmB,GAAQ,EAAW,GAAG,MACzD,CAAC,GAAQ,EAAW,CACrB,EAEK,KAAe,MAAsB;AACzC,KAAmB,OAAU;GAC3B,GAAG;IACF,IAAY,CAAC,EAAK;GACpB,EAAE;IAGC,IAAe,CAAC,CAAC,EAAW,SAAS,EAAW,KAAK,CAAC,SAC1D,EACD;AAED,QACE,kBAAC,GAAD;EAAwB;YACtB,kBAAC,GAAD;GACE,OAAM;GACN,WAAU;GACV,QAAO;aAHT,CAKE,kBAAC,GAAD;IACa;IACG;IACd,WAAW;IACF;IACT,CAAA,EAEF,kBAAC,OAAD;IAAK,WAAU;cACX,IAEE,IACF,kBAAC,GAAD,EAAsB,CAAA,GACpB,KAAW,CAAC,KAAU,EAAO,WAAW,IAC1C,kBAAC,GAAD,EAA2B,YAAW,CAAA,GAEtC,KACE,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAkB,KAAK,MAAU;MAChC,IAAM,IAAe,EAAc;AAKnC,aAJI,EAAa,WAAW,IACnB,OAIP,kBAAC,GAAD;OAEE,OAAO,EAAE,EAAkB,GAAO;OAClC,OAAO,EAAa;iBAEnB,EAAa,KAAK,MAIf,kBAAC,GAAD;QAES;QACK,YANG,EAAe,EAAM,SAAS;QAO7C,UAAU;QACV,EAJK,GAAG,EAAM,GAAG,EAAM,OAIvB,CAEJ;OACiB,EAhBd,EAgBc;OAEvB;KACE,CAAA,GAnCR,kBAAC,GAAD,EAA6B,CAAA;IAsC3B,CAAA,CACI;;EACE,CAAA"}

package/dist/components/features/mcp-page/install-server-modal.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../utils/custom-toast-handlers.cjs`),i=require(`../../shared/modals/modal-backdrop.cjs`),a=require(`../../shared/modals/modal-close-button.cjs`),o=require(`../settings/brand-button.cjs`),s=require(`../settings/settings-input.cjs`),c=require(`../../../utils/retrieve-axios-error-message.cjs`),l=require(`../../../utils/mcp-marketplace-utils.cjs`),u=require(`../mcp-logo-badge.cjs`),d=require(`../../../hooks/mutation/use-add-mcp-server.cjs`),f=require(`../../../hooks/mutation/use-test-mcp-server.cjs`);let p=require(`react`);p=e.__toESM(p,1);let m=require(`react/jsx-runtime`);function h(e){let t={},n=l.getInstallableTemplate(e);if(!n)return{values:t,errors:{}};if(n.kind===`stdio`){for(let e of n.envFields??[])t[e.key]=``;for(let e of n.argFields??[])t[e.key]=``}else (n.kind===`shttp`||n.kind===`sse`)&&(t.api_key=``);return{values:t,errors:{}}}function g({entry:e,onClose:g,onSuccess:_}){let{t:v}=t.useTranslation(`openhands`),{mutate:y,isPending:b}=d.useAddMcpServer(),{mutate:x,isPending:S}=f.useTestMcpServer(),C=(0,p.useId)(),[w,T]=p.default.useState(()=>h(e)),[E,D]=p.default.useState(null),O=S||b,k=(e,t)=>{T(n=>({values:{...n.values,[e]:t},errors:{...n.errors,[e]:null}})),D(null)},A=e=>{switch(e.error_kind){case`timeout`:return v(n.I18nKey.MCP$TEST_ERROR_TIMEOUT);case`connection`:return v(n.I18nKey.MCP$TEST_ERROR_CONNECTION);default:return v(n.I18nKey.MCP$TEST_ERROR_UNKNOWN,{error:e.error})}},j=t=>{x(t,{onSuccess:i=>{if(!i.ok){D(A(i));return}y(t,{onSuccess:()=>{r.displaySuccessToast(v(n.I18nKey.MCP$INSTALL_SUCCESS)),_?.(e),g()},onError:e=>{D(c.retrieveAxiosErrorMessage(e)||v(n.I18nKey.ERROR$GENERIC))}})},onError:e=>{D(c.retrieveAxiosErrorMessage(e)||v(n.I18nKey.ERROR$GENERIC))}})},M=l.getInstallableTemplate(e),N=()=>{if(!M||M.kind!==`shttp`&&M.kind!==`sse`)return;let e=w.values.api_key?.trim()??``;if(!M.apiKeyOptional&&!e){T(e=>({...e,errors:{api_key:v(n.I18nKey.MCP$ERROR_FIELD_REQUIRED)}}));return}j({id:`${M.kind}-${C}`,type:M.kind,url:M.url,...e&&{api_key:e}})},P=()=>{if(M?.kind!==`stdio`)return;let e=M,t={};for(let r of e.envFields??[])r.required&&!(w.values[r.key]??``).trim()&&(t[r.key]=v(n.I18nKey.MCP$ERROR_FIELD_REQUIRED));for(let r of e.argFields??[])r.required&&!(w.values[r.key]??``).trim()&&(t[r.key]=v(n.I18nKey.MCP$ERROR_FIELD_REQUIRED));if(Object.values(t).some(Boolean)){T(e=>({...e,errors:t}));return}let r={};for(let t of e.envFields??[]){let e=w.values[t.key]?.trim();e&&(r[t.key]=e)}let i=[];for(let t of e.argFields??[]){let e=w.values[t.key]?.trim();if(e)for(let t of e.split(/\s+/))t&&i.push(t)}j({id:`stdio-${C}`,type:`stdio`,name:e.serverName,command:e.command,args:[...e.args,...i],...Object.keys(r).length>0&&{env:r}})};return(0,m.jsx)(i.ModalBackdrop,{onClose:g,"aria-label":e.name,children:(0,m.jsxs)(`form`,{"data-testid":`mcp-install-modal`,"data-marketplace-id":e.id,onSubmit:e=>(e.preventDefault(),D(null),M?.kind===`shttp`||M?.kind===`sse`?N():P()),className:`relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[85vh] overflow-y-auto custom-scrollbar`,children:[(0,m.jsx)(a.ModalCloseButton,{onClose:g,testId:`mcp-install-modal-close`,disabled:O}),(0,m.jsxs)(`div`,{className:`flex items-start gap-3 pr-6`,children:[(0,m.jsx)(u.McpLogoBadge,{entry:e}),(0,m.jsxs)(`div`,{className:`flex flex-col flex-1`,children:[(0,m.jsx)(`h2`,{className:`text-lg font-semibold`,children:e.name}),(0,m.jsx)(`p`,{className:`text-xs text-tertiary-light`,children:e.description})]})]}),e.installHint&&(0,m.jsx)(`p`,{className:`text-xs text-tertiary-light`,children:e.installHint}),e.docsUrl&&(0,m.jsx)(`a`,{href:e.docsUrl,target:`_blank`,rel:`noreferrer`,className:`text-xs text-[var(--oh-muted)] hover:text-white hover:underline self-start transition-colors`,children:v(n.I18nKey.MCP$VIEW_DOCS)}),(0,m.jsx)(`div`,{className:`flex flex-col gap-3`,children:(()=>{if(!M)return null;if(M.kind===`shttp`||M.kind===`sse`){let e=M.apiKeyOptional??!1;return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(s.SettingsInput,{testId:`mcp-install-field-url`,name:`url`,type:`url`,label:v(n.I18nKey.SETTINGS$MCP_URL),value:M.url,onChange:()=>{},isDisabled:!0,className:`w-full`}),(0,m.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[(0,m.jsx)(s.SettingsInput,{testId:`mcp-install-field-api_key`,name:`api_key`,type:`password`,label:v(n.I18nKey.SETTINGS$MCP_API_KEY),value:w.values.api_key??``,onChange:e=>k(`api_key`,e),placeholder:v(n.I18nKey.SETTINGS$MCP_API_KEY_PLACEHOLDER),showOptionalTag:e,required:!e,className:`w-full`}),w.errors.api_key&&(0,m.jsx)(`p`,{className:`text-xs text-red-500`,children:w.errors.api_key})]})]})}let e=M;return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(s.SettingsInput,{testId:`mcp-install-field-command-readonly`,name:`command-readonly`,type:`text`,label:v(n.I18nKey.MCP$COMMAND_LABEL),value:`${e.command} ${e.args.join(` `)}`.trim(),onChange:()=>{},isDisabled:!0,className:`w-full`}),(e.envFields??[]).map(e=>(0,m.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[(0,m.jsx)(s.SettingsInput,{testId:`mcp-install-field-${e.key}`,name:e.key,type:e.type===`password`?`password`:`text`,label:e.label,value:w.values[e.key]??``,onChange:t=>k(e.key,t),placeholder:e.placeholder,required:e.required,showOptionalTag:!e.required,className:`w-full`}),e.helperText&&(0,m.jsx)(`p`,{className:`text-xs text-tertiary-alt`,children:e.helperText}),w.errors[e.key]&&(0,m.jsx)(`p`,{className:`text-xs text-red-500`,children:w.errors[e.key]})]},e.key)),(e.argFields??[]).map(e=>(0,m.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[(0,m.jsx)(s.SettingsInput,{testId:`mcp-install-field-${e.key}`,name:e.key,type:e.type===`password`?`password`:`text`,label:e.label,value:w.values[e.key]??``,onChange:t=>k(e.key,t),placeholder:e.placeholder,required:e.required,showOptionalTag:!e.required,className:`w-full`}),e.helperText&&(0,m.jsx)(`p`,{className:`text-xs text-tertiary-alt`,children:e.helperText}),w.errors[e.key]&&(0,m.jsx)(`p`,{className:`text-xs text-red-500`,children:w.errors[e.key]})]},e.key))]})})()}),E&&(0,m.jsx)(`p`,{"data-testid":`mcp-install-modal-error`,className:`text-sm text-red-500 whitespace-pre-wrap`,children:E}),(0,m.jsxs)(`div`,{className:`flex justify-end gap-2 mt-2`,children:[(0,m.jsx)(o.BrandButton,{type:`button`,variant:`secondary`,onClick:g,testId:`mcp-install-cancel`,children:v(n.I18nKey.BUTTON$CANCEL)}),(0,m.jsx)(o.BrandButton,{type:`submit`,variant:`primary`,isDisabled:O,testId:`mcp-install-submit`,children:v(S?n.I18nKey.MCP$VERIFYING:b?n.I18nKey.SETTINGS$SAVING:n.I18nKey.MCP$INSTALL_BUTTON)})]})]})})}exports.InstallServerModal=g;
+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/custom-toast-handlers.cjs`),i=require(`../../../node_modules/uuid/dist/v4.cjs`),a=require(`../../shared/modals/modal-backdrop.cjs`),o=require(`../../shared/modals/modal-close-button.cjs`),s=require(`../settings/brand-button.cjs`),c=require(`../settings/settings-input.cjs`),l=require(`../../../utils/retrieve-axios-error-message.cjs`),u=require(`../../../utils/mcp-marketplace-utils.cjs`),d=require(`../mcp-logo-badge.cjs`),f=require(`../../../hooks/mutation/use-add-mcp-server.cjs`),p=require(`../../../hooks/mutation/use-test-mcp-server.cjs`);let m=require(`react`);m=e.__toESM(m,1);let h=require(`react/jsx-runtime`);function g(e){return e?.transport.kind!==`shttp`&&e?.transport.kind!==`sse`?!1:[`api_key`,`bearer`,`basic`].includes(e.auth.strategy)}function _(e){return e.transport.kind===`stdio`?e.auth.apiKeyOptional??!1:e.auth.apiKeyOptional??e.transport.apiKeyOptional??!1}function v(e){let t={},n=u.getInstallableMcpConnectionOption(e),r=n?.transport;if(r?.kind===`stdio`){for(let e of r.envFields??[])t[e.key]=``;for(let e of r.argFields??[])t[e.key]=``}else g(n)&&(t.api_key=``);return{values:t,errors:{}}}function y({entry:e,onClose:y,onSuccess:b}){let{t:x}=t.useTranslation(`openhands`),{mutate:S,isPending:C}=f.useAddMcpServer(),{mutate:w,isPending:T}=p.useTestMcpServer(),[E,D]=m.default.useState(()=>v(e)),[O,k]=m.default.useState(null),A=u.getInstallableMcpConnectionOption(e),j=A?.transport,M=T||C,N=(e,t)=>{D(n=>({values:{...n.values,[e]:t},errors:{...n.errors,[e]:null}})),k(null)},P=e=>{switch(e.error_kind){case`timeout`:return x(n.I18nKey.MCP$TEST_ERROR_TIMEOUT);case`connection`:return x(n.I18nKey.MCP$TEST_ERROR_CONNECTION);default:return x(n.I18nKey.MCP$TEST_ERROR_UNKNOWN,{error:e.error})}},F=t=>{w(t,{onSuccess:i=>{if(!i.ok){k(P(i));return}S(t,{onSuccess:()=>{r.displaySuccessToast(x(n.I18nKey.MCP$INSTALL_SUCCESS)),b?.(e),y()},onError:e=>{k(l.retrieveAxiosErrorMessage(e)||x(n.I18nKey.ERROR$GENERIC))}})},onError:e=>{k(l.retrieveAxiosErrorMessage(e)||x(n.I18nKey.ERROR$GENERIC))}})},I=()=>{if(j?.kind!==`shttp`&&j?.kind!==`sse`||!A)return;let e=E.values.api_key?.trim()??``,t=g(A);if(t&&!_(A)&&!e){D(e=>({...e,errors:{api_key:x(n.I18nKey.MCP$ERROR_FIELD_REQUIRED)}}));return}F({id:`${j.kind}-${i.default()}`,type:j.kind,url:j.url,...t&&e&&{api_key:e}})},L=()=>{if(j?.kind!==`stdio`)return;let e=j,t={};for(let r of e.envFields??[])r.required&&!(E.values[r.key]??``).trim()&&(t[r.key]=x(n.I18nKey.MCP$ERROR_FIELD_REQUIRED));for(let r of e.argFields??[])r.required&&!(E.values[r.key]??``).trim()&&(t[r.key]=x(n.I18nKey.MCP$ERROR_FIELD_REQUIRED));if(Object.values(t).some(Boolean)){D(e=>({...e,errors:t}));return}let r={};for(let t of e.envFields??[]){let e=E.values[t.key]?.trim();e&&(r[t.key]=e)}let a=[];for(let t of e.argFields??[]){let e=E.values[t.key]?.trim();if(e)for(let t of e.split(/\s+/))t&&a.push(t)}F({id:`stdio-${i.default()}`,type:`stdio`,name:e.serverName,command:e.command,args:[...e.args,...a],...Object.keys(r).length>0&&{env:r}})};return(0,h.jsx)(a.ModalBackdrop,{onClose:y,"aria-label":e.name,children:(0,h.jsxs)(`form`,{"data-testid":`mcp-install-modal`,"data-marketplace-id":e.id,onSubmit:e=>(e.preventDefault(),k(null),j?.kind===`shttp`||j?.kind===`sse`?I():L()),className:`relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[85vh] overflow-y-auto custom-scrollbar`,children:[(0,h.jsx)(o.ModalCloseButton,{onClose:y,testId:`mcp-install-modal-close`,disabled:M}),(0,h.jsxs)(`div`,{className:`flex items-start gap-3 pr-6`,children:[(0,h.jsx)(d.McpLogoBadge,{entry:e}),(0,h.jsxs)(`div`,{className:`flex flex-col flex-1`,children:[(0,h.jsx)(`h2`,{className:`text-lg font-semibold`,children:e.name}),(0,h.jsx)(`p`,{className:`text-xs text-tertiary-light`,children:e.description})]})]}),e.installHint&&(0,h.jsx)(`p`,{className:`text-xs text-tertiary-light`,children:e.installHint}),e.docsUrl&&(0,h.jsx)(`a`,{href:e.docsUrl,target:`_blank`,rel:`noreferrer`,className:`text-xs text-[var(--oh-muted)] hover:text-white hover:underline self-start transition-colors`,children:x(n.I18nKey.MCP$VIEW_DOCS)}),(0,h.jsx)(`div`,{className:`flex flex-col gap-3`,children:(()=>{if(j?.kind===`shttp`||j?.kind===`sse`){let e=g(A),t=A?_(A):!1;return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c.SettingsInput,{testId:`mcp-install-field-url`,name:`url`,type:`url`,label:x(n.I18nKey.SETTINGS$MCP_URL),value:j.url,onChange:()=>{},isDisabled:!0,className:`w-full`}),e?(0,h.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[(0,h.jsx)(c.SettingsInput,{testId:`mcp-install-field-api_key`,name:`api_key`,type:`password`,label:x(n.I18nKey.SETTINGS$MCP_API_KEY),value:E.values.api_key??``,onChange:e=>N(`api_key`,e),placeholder:x(n.I18nKey.SETTINGS$MCP_API_KEY_PLACEHOLDER),showOptionalTag:t,required:!t,className:`w-full`}),E.errors.api_key&&(0,h.jsx)(`p`,{className:`text-xs text-red-500`,children:E.errors.api_key})]}):null]})}if(j?.kind!==`stdio`)return null;let e=j;return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c.SettingsInput,{testId:`mcp-install-field-command-readonly`,name:`command-readonly`,type:`text`,label:x(n.I18nKey.MCP$COMMAND_LABEL),value:`${e.command} ${e.args.join(` `)}`.trim(),onChange:()=>{},isDisabled:!0,className:`w-full`}),(e.envFields??[]).map(e=>(0,h.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[(0,h.jsx)(c.SettingsInput,{testId:`mcp-install-field-${e.key}`,name:e.key,type:e.type===`password`?`password`:`text`,label:e.label,value:E.values[e.key]??``,onChange:t=>N(e.key,t),placeholder:e.placeholder,required:e.required,showOptionalTag:!e.required,className:`w-full`}),e.helperText&&(0,h.jsx)(`p`,{className:`text-xs text-tertiary-alt`,children:e.helperText}),E.errors[e.key]&&(0,h.jsx)(`p`,{className:`text-xs text-red-500`,children:E.errors[e.key]})]},e.key)),(e.argFields??[]).map(e=>(0,h.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[(0,h.jsx)(c.SettingsInput,{testId:`mcp-install-field-${e.key}`,name:e.key,type:e.type===`password`?`password`:`text`,label:e.label,value:E.values[e.key]??``,onChange:t=>N(e.key,t),placeholder:e.placeholder,required:e.required,showOptionalTag:!e.required,className:`w-full`}),e.helperText&&(0,h.jsx)(`p`,{className:`text-xs text-tertiary-alt`,children:e.helperText}),E.errors[e.key]&&(0,h.jsx)(`p`,{className:`text-xs text-red-500`,children:E.errors[e.key]})]},e.key))]})})()}),O&&(0,h.jsx)(`p`,{"data-testid":`mcp-install-modal-error`,className:`text-sm text-red-500 whitespace-pre-wrap`,children:O}),(0,h.jsxs)(`div`,{className:`flex justify-end gap-2 mt-2`,children:[(0,h.jsx)(s.BrandButton,{type:`button`,variant:`secondary`,onClick:y,testId:`mcp-install-cancel`,children:x(n.I18nKey.BUTTON$CANCEL)}),(0,h.jsx)(s.BrandButton,{type:`submit`,variant:`primary`,isDisabled:M,testId:`mcp-install-submit`,children:x(T?n.I18nKey.MCP$VERIFYING:C?n.I18nKey.SETTINGS$SAVING:n.I18nKey.MCP$INSTALL_BUTTON)})]})]})})}exports.InstallServerModal=y;
 //# sourceMappingURL=install-server-modal.cjs.map

package/dist/components/features/mcp-page/install-server-modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"install-server-modal.cjs","names":[],"sources":["../../../../src/components/features/mcp-page/install-server-modal.tsx"],"sourcesContent":["import React, { useId } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AxiosError } from \"axios\";\nimport type { MCPTestFailure } from \"@openhands/typescript-client\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\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 { I18nKey } from \"#/i18n/declaration\";\nimport type { IntegrationCatalogEntry as MarketplaceEntry } from \"@openhands/extensions/integrations\";\nimport { McpLogoBadge } from \"#/components/features/mcp-logo-badge\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport { useAddMcpServer } from \"#/hooks/mutation/use-add-mcp-server\";\nimport { useTestMcpServer } from \"#/hooks/mutation/use-test-mcp-server\";\nimport { displaySuccessToast } from \"#/utils/custom-toast-handlers\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\nimport { getInstallableTemplate } from \"#/utils/mcp-marketplace-utils\";\n\ninterface InstallServerModalProps {\n  entry: MarketplaceEntry;\n  onClose: () => void;\n  onSuccess?: (entry: MarketplaceEntry) => void;\n}\n\ninterface FieldState {\n  values: Record<string, string>;\n  errors: Record<string, string | null>;\n}\n\nfunction makeInitialState(entry: MarketplaceEntry): FieldState {\n  const values: Record<string, string> = {};\n  const template = getInstallableTemplate(entry);\n  if (!template) return { values, errors: {} };\n  if (template.kind === \"stdio\") {\n    for (const field of template.envFields ?? []) {\n      values[field.key] = \"\";\n    }\n    for (const field of template.argFields ?? []) {\n      values[field.key] = \"\";\n    }\n  } else if (template.kind === \"shttp\" || template.kind === \"sse\") {\n    values.api_key = \"\";\n  }\n  return { values, errors: {} };\n}\n\n// The marketplace install modal is intentionally add-only: clicking\n// a catalog tile always appends a new server (the user might want\n// two Slack workspaces, two Postgres connections, etc.) even when\n// one of the same template kind is already installed. Editing an\n// existing server is reached via the installed-server-card's edit\n// button, which opens `CustomServerEditor` instead.\nexport function InstallServerModal({\n  entry,\n  onClose,\n  onSuccess,\n}: InstallServerModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { mutate: addMcpServer, isPending: isAdding } = useAddMcpServer();\n  const { mutate: testMcpServer, isPending: isTesting } = useTestMcpServer();\n  const instanceId = useId();\n\n  const [state, setState] = React.useState<FieldState>(() =>\n    makeInitialState(entry),\n  );\n  const [globalError, setGlobalError] = React.useState<string | null>(null);\n\n  const isPending = isTesting || isAdding;\n\n  const setValue = (key: string, value: string) => {\n    setState((prev) => ({\n      values: { ...prev.values, [key]: value },\n      errors: { ...prev.errors, [key]: null },\n    }));\n    setGlobalError(null);\n  };\n\n  const makeTestErrorMessage = (failure: MCPTestFailure): string => {\n    switch (failure.error_kind) {\n      case \"timeout\":\n        return t(I18nKey.MCP$TEST_ERROR_TIMEOUT);\n      case \"connection\":\n        return t(I18nKey.MCP$TEST_ERROR_CONNECTION);\n      default:\n        return t(I18nKey.MCP$TEST_ERROR_UNKNOWN, { error: failure.error });\n    }\n  };\n\n  const submitServer = (payload: MCPServerConfig) => {\n    testMcpServer(payload, {\n      onSuccess: (result) => {\n        if (!result.ok) {\n          setGlobalError(makeTestErrorMessage(result));\n          // Modal stays open — do NOT call onClose.\n          return;\n        }\n        addMcpServer(payload, {\n          onSuccess: () => {\n            displaySuccessToast(t(I18nKey.MCP$INSTALL_SUCCESS));\n            onSuccess?.(entry);\n            onClose();\n          },\n          onError: (err: unknown) => {\n            const message = retrieveAxiosErrorMessage(err as AxiosError);\n            setGlobalError(message || t(I18nKey.ERROR$GENERIC));\n          },\n        });\n      },\n      onError: (err: unknown) => {\n        const message = retrieveAxiosErrorMessage(err as AxiosError);\n        setGlobalError(message || t(I18nKey.ERROR$GENERIC));\n      },\n    });\n  };\n\n  const template = getInstallableTemplate(entry);\n\n  // ------------------------------------------------------------------\n  // Per-template submit handlers. Each is small and self-contained:\n  // validate user input, build the payload, then hand off to\n  // submitServer.\n  // ------------------------------------------------------------------\n  const handleHttpServerSubmit = () => {\n    // TS narrows this branch to shttp|sse; the equality guard is a\n    // runtime/defensive belt to make the helper safe in isolation.\n    if (!template || (template.kind !== \"shttp\" && template.kind !== \"sse\")) {\n      return;\n    }\n    const apiKey = state.values.api_key?.trim() ?? \"\";\n    if (!template.apiKeyOptional && !apiKey) {\n      setState((prev) => ({\n        ...prev,\n        errors: { api_key: t(I18nKey.MCP$ERROR_FIELD_REQUIRED) },\n      }));\n      return;\n    }\n    const payload: MCPServerConfig = {\n      id: `${template.kind}-${instanceId}`,\n      type: template.kind,\n      url: template.url,\n      ...(apiKey && { api_key: apiKey }),\n    };\n    submitServer(payload);\n  };\n\n  const handleStdioSubmit = () => {\n    if (template?.kind !== \"stdio\") return;\n    const stdio = template;\n    const errors: Record<string, string | null> = {};\n\n    for (const field of stdio.envFields ?? []) {\n      if (field.required && !(state.values[field.key] ?? \"\").trim()) {\n        errors[field.key] = t(I18nKey.MCP$ERROR_FIELD_REQUIRED);\n      }\n    }\n    for (const field of stdio.argFields ?? []) {\n      if (field.required && !(state.values[field.key] ?? \"\").trim()) {\n        errors[field.key] = t(I18nKey.MCP$ERROR_FIELD_REQUIRED);\n      }\n    }\n    if (Object.values(errors).some(Boolean)) {\n      setState((prev) => ({ ...prev, errors }));\n      return;\n    }\n\n    const env: Record<string, string> = {};\n    for (const field of stdio.envFields ?? []) {\n      const v = state.values[field.key]?.trim();\n      if (v) env[field.key] = v;\n    }\n    const extraArgs: string[] = [];\n    for (const field of stdio.argFields ?? []) {\n      const v = state.values[field.key]?.trim();\n      if (v) {\n        // Filesystem-style multi-token input: split on whitespace.\n        for (const token of v.split(/\\s+/)) {\n          if (token) extraArgs.push(token);\n        }\n      }\n    }\n\n    const payload: MCPServerConfig = {\n      id: `stdio-${instanceId}`,\n      type: \"stdio\",\n      name: stdio.serverName,\n      command: stdio.command,\n      args: [...stdio.args, ...extraArgs],\n      ...(Object.keys(env).length > 0 && { env }),\n    };\n    submitServer(payload);\n  };\n\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setGlobalError(null);\n    if (template?.kind === \"shttp\" || template?.kind === \"sse\") {\n      return handleHttpServerSubmit();\n    }\n    return handleStdioSubmit();\n  };\n\n  const renderFields = () => {\n    if (!template) return null;\n    if (template.kind === \"shttp\" || template.kind === \"sse\") {\n      const apiKeyOptional = template.apiKeyOptional ?? false;\n      return (\n        <>\n          <SettingsInput\n            testId=\"mcp-install-field-url\"\n            name=\"url\"\n            type=\"url\"\n            label={t(I18nKey.SETTINGS$MCP_URL)}\n            value={template.url}\n            onChange={() => {}}\n            isDisabled\n            className=\"w-full\"\n          />\n          <div className=\"flex flex-col gap-1\">\n            <SettingsInput\n              testId=\"mcp-install-field-api_key\"\n              name=\"api_key\"\n              type=\"password\"\n              label={t(I18nKey.SETTINGS$MCP_API_KEY)}\n              value={state.values.api_key ?? \"\"}\n              onChange={(v) => setValue(\"api_key\", v)}\n              placeholder={t(I18nKey.SETTINGS$MCP_API_KEY_PLACEHOLDER)}\n              showOptionalTag={apiKeyOptional}\n              required={!apiKeyOptional}\n              className=\"w-full\"\n            />\n            {state.errors.api_key && (\n              <p className=\"text-xs text-red-500\">{state.errors.api_key}</p>\n            )}\n          </div>\n        </>\n      );\n    }\n\n    const stdio = template;\n    return (\n      <>\n        <SettingsInput\n          testId=\"mcp-install-field-command-readonly\"\n          name=\"command-readonly\"\n          type=\"text\"\n          label={t(I18nKey.MCP$COMMAND_LABEL)}\n          value={`${stdio.command} ${stdio.args.join(\" \")}`.trim()}\n          onChange={() => {}}\n          isDisabled\n          className=\"w-full\"\n        />\n        {(stdio.envFields ?? []).map((field) => (\n          <div key={field.key} className=\"flex flex-col gap-1\">\n            <SettingsInput\n              testId={`mcp-install-field-${field.key}`}\n              name={field.key}\n              type={field.type === \"password\" ? \"password\" : \"text\"}\n              label={field.label}\n              value={state.values[field.key] ?? \"\"}\n              onChange={(v) => setValue(field.key, v)}\n              placeholder={field.placeholder}\n              required={field.required}\n              showOptionalTag={!field.required}\n              className=\"w-full\"\n            />\n            {field.helperText && (\n              <p className=\"text-xs text-tertiary-alt\">{field.helperText}</p>\n            )}\n            {state.errors[field.key] && (\n              <p className=\"text-xs text-red-500\">{state.errors[field.key]}</p>\n            )}\n          </div>\n        ))}\n        {(stdio.argFields ?? []).map((field) => (\n          <div key={field.key} className=\"flex flex-col gap-1\">\n            <SettingsInput\n              testId={`mcp-install-field-${field.key}`}\n              name={field.key}\n              type={field.type === \"password\" ? \"password\" : \"text\"}\n              label={field.label}\n              value={state.values[field.key] ?? \"\"}\n              onChange={(v) => setValue(field.key, v)}\n              placeholder={field.placeholder}\n              required={field.required}\n              showOptionalTag={!field.required}\n              className=\"w-full\"\n            />\n            {field.helperText && (\n              <p className=\"text-xs text-tertiary-alt\">{field.helperText}</p>\n            )}\n            {state.errors[field.key] && (\n              <p className=\"text-xs text-red-500\">{state.errors[field.key]}</p>\n            )}\n          </div>\n        ))}\n      </>\n    );\n  };\n\n  return (\n    <ModalBackdrop onClose={onClose} aria-label={entry.name}>\n      <form\n        data-testid=\"mcp-install-modal\"\n        data-marketplace-id={entry.id}\n        onSubmit={handleSubmit}\n        className=\"relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[85vh] overflow-y-auto custom-scrollbar\"\n      >\n        <ModalCloseButton\n          onClose={onClose}\n          testId=\"mcp-install-modal-close\"\n          disabled={isPending}\n        />\n        <div className=\"flex items-start gap-3 pr-6\">\n          <McpLogoBadge entry={entry} />\n          <div className=\"flex flex-col flex-1\">\n            <h2 className=\"text-lg font-semibold\">{entry.name}</h2>\n            <p className=\"text-xs text-tertiary-light\">{entry.description}</p>\n          </div>\n        </div>\n\n        {entry.installHint && (\n          <p className=\"text-xs text-tertiary-light\">{entry.installHint}</p>\n        )}\n\n        {entry.docsUrl && (\n          <a\n            href={entry.docsUrl}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className=\"text-xs text-[var(--oh-muted)] hover:text-white hover:underline self-start transition-colors\"\n          >\n            {t(I18nKey.MCP$VIEW_DOCS)}\n          </a>\n        )}\n\n        <div className=\"flex flex-col gap-3\">{renderFields()}</div>\n\n        {globalError && (\n          <p\n            data-testid=\"mcp-install-modal-error\"\n            className=\"text-sm text-red-500 whitespace-pre-wrap\"\n          >\n            {globalError}\n          </p>\n        )}\n\n        <div className=\"flex justify-end gap-2 mt-2\">\n          <BrandButton\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={onClose}\n            testId=\"mcp-install-cancel\"\n          >\n            {t(I18nKey.BUTTON$CANCEL)}\n          </BrandButton>\n          <BrandButton\n            type=\"submit\"\n            variant=\"primary\"\n            isDisabled={isPending}\n            testId=\"mcp-install-submit\"\n          >\n            {isTesting\n              ? t(I18nKey.MCP$VERIFYING)\n              : isAdding\n                ? t(I18nKey.SETTINGS$SAVING)\n                : t(I18nKey.MCP$INSTALL_BUTTON)}\n          </BrandButton>\n        </div>\n      </form>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"install-server-modal.cjs","names":[],"sources":["../../../../src/components/features/mcp-page/install-server-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AxiosError } from \"axios\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport type { MCPTestFailure } from \"@openhands/typescript-client\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\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 { I18nKey } from \"#/i18n/declaration\";\nimport type { IntegrationCatalogEntry as MarketplaceEntry } from \"@openhands/extensions/integrations\";\nimport { McpLogoBadge } from \"#/components/features/mcp-logo-badge\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport { useAddMcpServer } from \"#/hooks/mutation/use-add-mcp-server\";\nimport { useTestMcpServer } from \"#/hooks/mutation/use-test-mcp-server\";\nimport { displaySuccessToast } from \"#/utils/custom-toast-handlers\";\nimport {\n  getInstallableMcpConnectionOption,\n  type McpMarketplaceConnectionOption,\n} from \"#/utils/mcp-marketplace-utils\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\n\ninterface InstallServerModalProps {\n  entry: MarketplaceEntry;\n  onClose: () => void;\n  onSuccess?: (entry: MarketplaceEntry) => void;\n}\n\ninterface FieldState {\n  values: Record<string, string>;\n  errors: Record<string, string | null>;\n}\n\nfunction optionNeedsCredentialField(\n  option: McpMarketplaceConnectionOption | undefined,\n): boolean {\n  if (option?.transport.kind !== \"shttp\" && option?.transport.kind !== \"sse\") {\n    return false;\n  }\n  return [\"api_key\", \"bearer\", \"basic\"].includes(option.auth.strategy);\n}\n\nfunction isCredentialOptional(option: McpMarketplaceConnectionOption): boolean {\n  if (option.transport.kind === \"stdio\") {\n    return option.auth.apiKeyOptional ?? false;\n  }\n  return option.auth.apiKeyOptional ?? option.transport.apiKeyOptional ?? false;\n}\n\nfunction makeInitialState(entry: MarketplaceEntry): FieldState {\n  const values: Record<string, string> = {};\n  const option = getInstallableMcpConnectionOption(entry);\n  const template = option?.transport;\n  if (template?.kind === \"stdio\") {\n    for (const field of template.envFields ?? []) {\n      values[field.key] = \"\";\n    }\n    for (const field of template.argFields ?? []) {\n      values[field.key] = \"\";\n    }\n  } else if (optionNeedsCredentialField(option)) {\n    values.api_key = \"\";\n  }\n  return { values, errors: {} };\n}\n\n// The marketplace install modal is intentionally add-only: clicking\n// a catalog tile always appends a new server (the user might want\n// two Slack workspaces, two Postgres connections, etc.) even when\n// one of the same template kind is already installed. Editing an\n// existing server is reached via the installed-server-card's edit\n// button, which opens `CustomServerEditor` instead.\nexport function InstallServerModal({\n  entry,\n  onClose,\n  onSuccess,\n}: InstallServerModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { mutate: addMcpServer, isPending: isAdding } = useAddMcpServer();\n  const { mutate: testMcpServer, isPending: isTesting } = useTestMcpServer();\n\n  const [state, setState] = React.useState<FieldState>(() =>\n    makeInitialState(entry),\n  );\n  const [globalError, setGlobalError] = React.useState<string | null>(null);\n  const option = getInstallableMcpConnectionOption(entry);\n  const template = option?.transport;\n\n  const isPending = isTesting || isAdding;\n\n  const setValue = (key: string, value: string) => {\n    setState((prev) => ({\n      values: { ...prev.values, [key]: value },\n      errors: { ...prev.errors, [key]: null },\n    }));\n    setGlobalError(null);\n  };\n\n  const makeTestErrorMessage = (failure: MCPTestFailure): string => {\n    switch (failure.error_kind) {\n      case \"timeout\":\n        return t(I18nKey.MCP$TEST_ERROR_TIMEOUT);\n      case \"connection\":\n        return t(I18nKey.MCP$TEST_ERROR_CONNECTION);\n      default:\n        return t(I18nKey.MCP$TEST_ERROR_UNKNOWN, { error: failure.error });\n    }\n  };\n\n  const submitServer = (payload: MCPServerConfig) => {\n    testMcpServer(payload, {\n      onSuccess: (result) => {\n        if (!result.ok) {\n          setGlobalError(makeTestErrorMessage(result));\n          // Modal stays open — do NOT call onClose.\n          return;\n        }\n        addMcpServer(payload, {\n          onSuccess: () => {\n            displaySuccessToast(t(I18nKey.MCP$INSTALL_SUCCESS));\n            onSuccess?.(entry);\n            onClose();\n          },\n          onError: (err: unknown) => {\n            const message = retrieveAxiosErrorMessage(err as AxiosError);\n            setGlobalError(message || t(I18nKey.ERROR$GENERIC));\n          },\n        });\n      },\n      onError: (err: unknown) => {\n        const message = retrieveAxiosErrorMessage(err as AxiosError);\n        setGlobalError(message || t(I18nKey.ERROR$GENERIC));\n      },\n    });\n  };\n\n  // ------------------------------------------------------------------\n  // Per-template submit handlers. Each is small and self-contained:\n  // validate user input, build the payload, then hand off to\n  // submitServer.\n  // ------------------------------------------------------------------\n  const handleHttpServerSubmit = () => {\n    // TS narrows this branch to shttp|sse; the equality guard is a\n    // runtime/defensive belt to make the helper safe in isolation.\n    if (template?.kind !== \"shttp\" && template?.kind !== \"sse\") {\n      return;\n    }\n    if (!option) return;\n    const apiKey = state.values.api_key?.trim() ?? \"\";\n    const needsCredential = optionNeedsCredentialField(option);\n    if (needsCredential && !isCredentialOptional(option) && !apiKey) {\n      setState((prev) => ({\n        ...prev,\n        errors: { api_key: t(I18nKey.MCP$ERROR_FIELD_REQUIRED) },\n      }));\n      return;\n    }\n    const payload: MCPServerConfig = {\n      id: `${template.kind}-${uuidv4()}`,\n      type: template.kind,\n      url: template.url,\n      ...(needsCredential && apiKey && { api_key: apiKey }),\n    };\n    submitServer(payload);\n  };\n\n  const handleStdioSubmit = () => {\n    if (template?.kind !== \"stdio\") return;\n    const stdio = template;\n    const errors: Record<string, string | null> = {};\n\n    for (const field of stdio.envFields ?? []) {\n      if (field.required && !(state.values[field.key] ?? \"\").trim()) {\n        errors[field.key] = t(I18nKey.MCP$ERROR_FIELD_REQUIRED);\n      }\n    }\n    for (const field of stdio.argFields ?? []) {\n      if (field.required && !(state.values[field.key] ?? \"\").trim()) {\n        errors[field.key] = t(I18nKey.MCP$ERROR_FIELD_REQUIRED);\n      }\n    }\n    if (Object.values(errors).some(Boolean)) {\n      setState((prev) => ({ ...prev, errors }));\n      return;\n    }\n\n    const env: Record<string, string> = {};\n    for (const field of stdio.envFields ?? []) {\n      const v = state.values[field.key]?.trim();\n      if (v) env[field.key] = v;\n    }\n    const extraArgs: string[] = [];\n    for (const field of stdio.argFields ?? []) {\n      const v = state.values[field.key]?.trim();\n      if (v) {\n        // Filesystem-style multi-token input: split on whitespace.\n        for (const token of v.split(/\\s+/)) {\n          if (token) extraArgs.push(token);\n        }\n      }\n    }\n\n    const payload: MCPServerConfig = {\n      id: `stdio-${uuidv4()}`,\n      type: \"stdio\",\n      name: stdio.serverName,\n      command: stdio.command,\n      args: [...stdio.args, ...extraArgs],\n      ...(Object.keys(env).length > 0 && { env }),\n    };\n    submitServer(payload);\n  };\n\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setGlobalError(null);\n    if (template?.kind === \"shttp\" || template?.kind === \"sse\") {\n      return handleHttpServerSubmit();\n    }\n    return handleStdioSubmit();\n  };\n\n  const renderFields = () => {\n    if (template?.kind === \"shttp\" || template?.kind === \"sse\") {\n      const shouldRenderCredential = optionNeedsCredentialField(option);\n      const apiKeyOptional = option ? isCredentialOptional(option) : false;\n      return (\n        <>\n          <SettingsInput\n            testId=\"mcp-install-field-url\"\n            name=\"url\"\n            type=\"url\"\n            label={t(I18nKey.SETTINGS$MCP_URL)}\n            value={template.url}\n            onChange={() => {}}\n            isDisabled\n            className=\"w-full\"\n          />\n          {shouldRenderCredential ? (\n            <div className=\"flex flex-col gap-1\">\n              <SettingsInput\n                testId=\"mcp-install-field-api_key\"\n                name=\"api_key\"\n                type=\"password\"\n                label={t(I18nKey.SETTINGS$MCP_API_KEY)}\n                value={state.values.api_key ?? \"\"}\n                onChange={(v) => setValue(\"api_key\", v)}\n                placeholder={t(I18nKey.SETTINGS$MCP_API_KEY_PLACEHOLDER)}\n                showOptionalTag={apiKeyOptional}\n                required={!apiKeyOptional}\n                className=\"w-full\"\n              />\n              {state.errors.api_key && (\n                <p className=\"text-xs text-red-500\">{state.errors.api_key}</p>\n              )}\n            </div>\n          ) : null}\n        </>\n      );\n    }\n\n    if (template?.kind !== \"stdio\") return null;\n    const stdio = template;\n    return (\n      <>\n        <SettingsInput\n          testId=\"mcp-install-field-command-readonly\"\n          name=\"command-readonly\"\n          type=\"text\"\n          label={t(I18nKey.MCP$COMMAND_LABEL)}\n          value={`${stdio.command} ${stdio.args.join(\" \")}`.trim()}\n          onChange={() => {}}\n          isDisabled\n          className=\"w-full\"\n        />\n        {(stdio.envFields ?? []).map((field) => (\n          <div key={field.key} className=\"flex flex-col gap-1\">\n            <SettingsInput\n              testId={`mcp-install-field-${field.key}`}\n              name={field.key}\n              type={field.type === \"password\" ? \"password\" : \"text\"}\n              label={field.label}\n              value={state.values[field.key] ?? \"\"}\n              onChange={(v) => setValue(field.key, v)}\n              placeholder={field.placeholder}\n              required={field.required}\n              showOptionalTag={!field.required}\n              className=\"w-full\"\n            />\n            {field.helperText && (\n              <p className=\"text-xs text-tertiary-alt\">{field.helperText}</p>\n            )}\n            {state.errors[field.key] && (\n              <p className=\"text-xs text-red-500\">{state.errors[field.key]}</p>\n            )}\n          </div>\n        ))}\n        {(stdio.argFields ?? []).map((field) => (\n          <div key={field.key} className=\"flex flex-col gap-1\">\n            <SettingsInput\n              testId={`mcp-install-field-${field.key}`}\n              name={field.key}\n              type={field.type === \"password\" ? \"password\" : \"text\"}\n              label={field.label}\n              value={state.values[field.key] ?? \"\"}\n              onChange={(v) => setValue(field.key, v)}\n              placeholder={field.placeholder}\n              required={field.required}\n              showOptionalTag={!field.required}\n              className=\"w-full\"\n            />\n            {field.helperText && (\n              <p className=\"text-xs text-tertiary-alt\">{field.helperText}</p>\n            )}\n            {state.errors[field.key] && (\n              <p className=\"text-xs text-red-500\">{state.errors[field.key]}</p>\n            )}\n          </div>\n        ))}\n      </>\n    );\n  };\n\n  return (\n    <ModalBackdrop onClose={onClose} aria-label={entry.name}>\n      <form\n        data-testid=\"mcp-install-modal\"\n        data-marketplace-id={entry.id}\n        onSubmit={handleSubmit}\n        className=\"relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[85vh] overflow-y-auto custom-scrollbar\"\n      >\n        <ModalCloseButton\n          onClose={onClose}\n          testId=\"mcp-install-modal-close\"\n          disabled={isPending}\n        />\n        <div className=\"flex items-start gap-3 pr-6\">\n          <McpLogoBadge entry={entry} />\n          <div className=\"flex flex-col flex-1\">\n            <h2 className=\"text-lg font-semibold\">{entry.name}</h2>\n            <p className=\"text-xs text-tertiary-light\">{entry.description}</p>\n          </div>\n        </div>\n\n        {entry.installHint && (\n          <p className=\"text-xs text-tertiary-light\">{entry.installHint}</p>\n        )}\n\n        {entry.docsUrl && (\n          <a\n            href={entry.docsUrl}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className=\"text-xs text-[var(--oh-muted)] hover:text-white hover:underline self-start transition-colors\"\n          >\n            {t(I18nKey.MCP$VIEW_DOCS)}\n          </a>\n        )}\n\n        <div className=\"flex flex-col gap-3\">{renderFields()}</div>\n\n        {globalError && (\n          <p\n            data-testid=\"mcp-install-modal-error\"\n            className=\"text-sm text-red-500 whitespace-pre-wrap\"\n          >\n            {globalError}\n          </p>\n        )}\n\n        <div className=\"flex justify-end gap-2 mt-2\">\n          <BrandButton\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={onClose}\n            testId=\"mcp-install-cancel\"\n          >\n            {t(I18nKey.BUTTON$CANCEL)}\n          </BrandButton>\n          <BrandButton\n            type=\"submit\"\n            variant=\"primary\"\n            isDisabled={isPending}\n            testId=\"mcp-install-submit\"\n          >\n            {isTesting\n              ? t(I18nKey.MCP$VERIFYING)\n              : isAdding\n                ? t(I18nKey.SETTINGS$SAVING)\n                : t(I18nKey.MCP$INSTALL_BUTTON)}\n          </BrandButton>\n        </div>\n      </form>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":"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"}