@openhands/agent-canvas 1.5.1 → 1.6.1

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

@@ -1 +1 @@
-{"version":3,"file":"install-server-modal.js","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 { 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 { SaveAsSecretToggle } from \"#/components/features/mcp-page/save-as-secret-toggle\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type {\n  IntegrationCatalogEntry as MarketplaceEntry,\n  MarketplaceField,\n} from \"@openhands/extensions/integrations\";\nimport { McpLogoBadge } from \"#/components/features/mcp-logo-badge\";\nimport { ExtendedMCPTestFailure, MCPServerConfig } from \"#/types/mcp-server\";\nimport type { MCPAuthCredential } from \"#/types/mcp-auth\";\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  getMcpOAuthAuthenticationConfig,\n  getInstallableMcpConnectionOption,\n  type McpMarketplaceConnectionOption,\n} from \"#/utils/mcp-marketplace-utils\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\nimport { useSaveFieldsAsSecrets } from \"#/hooks/mutation/use-save-fields-as-secrets\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport McpService from \"#/api/mcp-service/mcp-service.api\";\nimport { toMcpServerName } from \"#/utils/mcp-server-name\";\n\n/**\n * Renders a helperText string as React nodes, converting any `[text](url)`\n * markdown links into real `<a>` elements. Plain text segments are left as-is.\n * Only `http:` and `https:` URLs are rendered as links; anything else falls\n * back to `#` to guard against `javascript:` / `data:` XSS vectors.\n */\nfunction renderHelperText(text: string): React.ReactNode {\n  const linkPattern = /\\[([^\\]]+)\\]\\(([^)]+)\\)/g;\n  const parts: React.ReactNode[] = [];\n  let lastIndex = 0;\n  for (const match of text.matchAll(linkPattern)) {\n    if (match.index > lastIndex) {\n      parts.push(text.slice(lastIndex, match.index));\n    }\n    parts.push(\n      <a\n        key={match.index}\n        href={/^https?:\\/\\//i.test(match[2]) ? match[2] : \"#\"}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        className=\"underline hover:text-white transition-colors\"\n      >\n        {match[1]}\n      </a>,\n    );\n    lastIndex = match.index + match[0].length;\n  }\n  if (lastIndex < text.length) {\n    parts.push(text.slice(lastIndex));\n  }\n  return parts;\n}\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  savedAsSecret: Record<string, boolean>;\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\"].includes(option.auth.strategy);\n}\n\nfunction isOAuthOption(\n  option: McpMarketplaceConnectionOption | undefined,\n): boolean {\n  return !!option && option.auth.strategy === \"oauth2\";\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 getRemoteHeaderFields(\n  option: McpMarketplaceConnectionOption | undefined,\n): MarketplaceField[] {\n  if (option?.transport.kind !== \"shttp\" && option?.transport.kind !== \"sse\") {\n    return [];\n  }\n  return option.transport.headerFields ?? [];\n}\n\nfunction makeInitialState(entry: MarketplaceEntry): FieldState {\n  const values: Record<string, string> = {};\n  const savedAsSecret: Record<string, boolean> = {};\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      // Pre-check password fields; non-password fields default to off.\n      savedAsSecret[field.key] = field.type === \"password\";\n    }\n    for (const field of template.argFields ?? []) {\n      values[field.key] = \"\";\n    }\n  } else if (template?.kind === \"shttp\" || template?.kind === \"sse\") {\n    values.url = template.url;\n    for (const field of getRemoteHeaderFields(option)) {\n      values[field.key] = \"\";\n      savedAsSecret[field.key] = field.type === \"password\";\n    }\n    if (optionNeedsCredentialField(option)) {\n      values.api_key = \"\";\n      if (option?.auth.credentialSecretName) {\n        savedAsSecret.api_key =\n          option.auth.saveCredentialAsSecretByDefault ?? false;\n      }\n    }\n  }\n  return { values, errors: {}, savedAsSecret };\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 saveFieldsAsSecrets = useSaveFieldsAsSecrets();\n\n  const [state, setState] = React.useState<FieldState>(() =>\n    makeInitialState(entry),\n  );\n  // Always holds the latest state so async callbacks (onSuccess) never read\n  // stale closure values, even under React concurrent-mode scheduling.\n  const stateRef = React.useRef(state);\n  stateRef.current = state;\n\n  const [globalError, setGlobalError] = React.useState<string | null>(null);\n  const [isFinalizingInstall, setIsFinalizingInstall] = React.useState(false);\n  const [isAuthorizingOAuth, setIsAuthorizingOAuth] = React.useState(false);\n  const option = getInstallableMcpConnectionOption(entry);\n  const template = option?.transport;\n\n  const isPending =\n    isTesting || isAuthorizingOAuth || isAdding || isFinalizingInstall;\n\n  const setValue = (key: string, value: string) => {\n    setState((prev) => ({\n      ...prev,\n      values: { ...prev.values, [key]: value },\n      errors: { ...prev.errors, [key]: null },\n    }));\n    setGlobalError(null);\n  };\n\n  const toggleSecret = (key: string, value: boolean) => {\n    setState((prev) => ({\n      ...prev,\n      savedAsSecret: { ...prev.savedAsSecret, [key]: value },\n    }));\n  };\n\n  const saveHostedCredentialAsSecret = (): Promise<void> => {\n    const secretName = option?.auth.credentialSecretName;\n    const apiKey = stateRef.current.values.api_key?.trim();\n    if (!secretName || !apiKey || !stateRef.current.savedAsSecret.api_key) {\n      return Promise.resolve();\n    }\n\n    const field: MarketplaceField = {\n      key: secretName,\n      label: option.auth.credentialLabel ?? secretName,\n      type: \"password\",\n    };\n    return saveFieldsAsSecrets(\n      [field],\n      { [secretName]: apiKey },\n      { [secretName]: true },\n    );\n  };\n\n  const saveSelectedSecrets = (): Promise<void> => {\n    if (template?.kind === \"stdio\") {\n      return saveFieldsAsSecrets(\n        template.envFields ?? [],\n        stateRef.current.values,\n        stateRef.current.savedAsSecret,\n      );\n    }\n    if (template?.kind === \"shttp\" || template?.kind === \"sse\") {\n      return Promise.all([\n        saveHostedCredentialAsSecret(),\n        saveFieldsAsSecrets(\n          getRemoteHeaderFields(option),\n          stateRef.current.values,\n          stateRef.current.savedAsSecret,\n        ),\n      ]).then(() => undefined);\n    }\n    return Promise.resolve();\n  };\n\n  const makeTestErrorMessage = (failure: ExtendedMCPTestFailure): 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      case \"credentials\":\n        return t(I18nKey.MCP$TEST_ERROR_CREDENTIALS, { error: failure.error });\n      default:\n        return t(I18nKey.MCP$TEST_ERROR_UNKNOWN, { error: failure.error });\n    }\n  };\n\n  const submitServer = (payload: MCPServerConfig) => {\n    if (payload.auth?.strategy === \"oauth2\") {\n      setIsAuthorizingOAuth(true);\n      void McpService.authorizeOAuth(payload)\n        .then((result) => {\n          if (!result.ok) {\n            setGlobalError(makeTestErrorMessage(result));\n            return;\n          }\n          const serverToSave = result.oauth_state\n            ? {\n                ...payload,\n                auth: { ...payload.auth!, state: result.oauth_state },\n              }\n            : payload;\n          addMcpServer(serverToSave, {\n            onSuccess: () => {\n              displaySuccessToast(t(I18nKey.MCP$INSTALL_SUCCESS));\n              setIsFinalizingInstall(true);\n              void (async () => {\n                try {\n                  await saveSelectedSecrets();\n                } finally {\n                  onSuccess?.(entry);\n                  onClose();\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        .catch((err: unknown) => {\n          const message = retrieveAxiosErrorMessage(err as AxiosError);\n          setGlobalError(message || t(I18nKey.ERROR$GENERIC));\n        })\n        .finally(() => setIsAuthorizingOAuth(false));\n      return;\n    }\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        const serverToSave =\n          result.oauth_state && payload.auth?.strategy === \"oauth2\"\n            ? {\n                ...payload,\n                auth: { ...payload.auth, state: result.oauth_state },\n              }\n            : payload;\n        addMcpServer(serverToSave, {\n          onSuccess: () => {\n            displaySuccessToast(t(I18nKey.MCP$INSTALL_SUCCESS));\n            setIsFinalizingInstall(true);\n            void (async () => {\n              try {\n                await saveSelectedSecrets();\n              } finally {\n                onSuccess?.(entry);\n                onClose();\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      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 url = template.urlEditable\n      ? (state.values.url?.trim() ?? \"\")\n      : template.url;\n    const oauthMode = isOAuthOption(option);\n    const needsCredential = optionNeedsCredentialField(option);\n    const headerFields = getRemoteHeaderFields(option);\n    const headerErrors: Record<string, string | null> = {};\n    if (!url) {\n      headerErrors.url = t(I18nKey.SETTINGS$MCP_ERROR_URL_REQUIRED);\n    } else {\n      try {\n        const parsedUrl = new URL(url);\n        if (![\"http:\", \"https:\"].includes(parsedUrl.protocol)) {\n          headerErrors.url = t(I18nKey.SETTINGS$MCP_ERROR_URL_INVALID_PROTOCOL);\n        }\n      } catch {\n        headerErrors.url = t(I18nKey.SETTINGS$MCP_ERROR_URL_INVALID);\n      }\n    }\n    for (const field of headerFields) {\n      if (field.required && !(state.values[field.key] ?? \"\").trim()) {\n        headerErrors[field.key] = t(I18nKey.MCP$ERROR_FIELD_REQUIRED);\n      }\n    }\n    if (\n      !oauthMode &&\n      needsCredential &&\n      !isCredentialOptional(option) &&\n      !apiKey\n    ) {\n      headerErrors.api_key = t(I18nKey.MCP$ERROR_FIELD_REQUIRED);\n    }\n    if (Object.values(headerErrors).some(Boolean)) {\n      setState((prev) => ({ ...prev, errors: headerErrors }));\n      return;\n    }\n    const oauthAuthentication = oauthMode\n      ? getMcpOAuthAuthenticationConfig(option)\n      : undefined;\n    const fieldHeaders = Object.fromEntries(\n      headerFields\n        .map((field) => [field.key, state.values[field.key]?.trim() ?? \"\"])\n        .filter(([, value]) => value),\n    );\n    const hasFieldHeaders = Object.keys(fieldHeaders).length > 0;\n    let auth: MCPAuthCredential | undefined;\n    if (oauthMode) {\n      auth = {\n        strategy: \"oauth2\",\n        ...(oauthAuthentication && { authentication: oauthAuthentication }),\n      };\n    } else if (needsCredential && apiKey) {\n      auth =\n        option.auth.strategy === \"api_key\"\n          ? {\n              strategy: \"api_key\",\n              value: apiKey,\n              ...(option.auth.apiKeyHeaderName && {\n                header_name: option.auth.apiKeyHeaderName,\n              }),\n            }\n          : { strategy: \"bearer\", value: apiKey };\n    } else if (hasFieldHeaders) {\n      auth = { strategy: \"header\", headers: fieldHeaders };\n    }\n    const payload: MCPServerConfig = {\n      id: `${template.kind}-${uuidv4()}`,\n      type: template.kind,\n      // Name remote servers after the catalog slug (e.g. \"github\") so they\n      // get a referenceable, LLM-tool-safe mcp_config key instead of the\n      // auto-generated \"sse\"/\"shttp\" fallback. Stdio installs already carry\n      // serverName from the catalog.\n      name: toMcpServerName(entry.id),\n      url,\n      ...(auth && { auth }),\n      ...(hasFieldHeaders &&\n        auth?.strategy !== \"header\" && { headers: fieldHeaders }),\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 oauthMode = isOAuthOption(option);\n      const shouldRenderCredential = optionNeedsCredentialField(option);\n      const apiKeyOptional = option ? isCredentialOptional(option) : false;\n      const credentialSecretName = option?.auth.credentialSecretName;\n      const headerFields = getRemoteHeaderFields(option);\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={state.values.url ?? template.url}\n            onChange={(value) => setValue(\"url\", value)}\n            isDisabled={!template.urlEditable}\n            className=\"w-full\"\n          />\n          {state.errors.url && (\n            <p className=\"text-xs text-red-500\">{state.errors.url}</p>\n          )}\n          {headerFields.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\">\n                  {renderHelperText(field.helperText)}\n                </p>\n              )}\n              {state.errors[field.key] && (\n                <p className=\"text-xs text-red-500\">\n                  {state.errors[field.key]}\n                </p>\n              )}\n              {field.key in state.savedAsSecret && (\n                <SaveAsSecretToggle\n                  fieldKey={field.key}\n                  checked={state.savedAsSecret[field.key] ?? false}\n                  onToggle={(v) => toggleSecret(field.key, v)}\n                />\n              )}\n            </div>\n          ))}\n          {oauthMode ? (\n            <div\n              data-testid=\"mcp-install-oauth-info\"\n              className=\"flex flex-col gap-2 p-3 rounded-lg border border-[var(--oh-border)] bg-base-tertiary\"\n            >\n              <p className=\"text-sm text-secondary-light\">\n                {t(I18nKey.MCP$OAUTH_CONNECT_INFO)}\n              </p>\n              <p className=\"text-xs text-tertiary-alt\">\n                {t(I18nKey.MCP$OAUTH_CONNECT_HINT)}\n              </p>\n            </div>\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={\n                  option?.auth.credentialLabel ??\n                  t(I18nKey.SETTINGS$MCP_API_KEY)\n                }\n                value={state.values.api_key ?? \"\"}\n                onChange={(v) => setValue(\"api_key\", v)}\n                placeholder={\n                  option?.auth.credentialPlaceholder ??\n                  t(I18nKey.SETTINGS$MCP_API_KEY_PLACEHOLDER)\n                }\n                showOptionalTag={apiKeyOptional}\n                required={!apiKeyOptional}\n                className=\"w-full\"\n              />\n              {option?.auth.credentialHelp && (\n                <p className=\"text-xs text-tertiary-alt\">\n                  {renderHelperText(option.auth.credentialHelp)}\n                </p>\n              )}\n              {state.errors.api_key && (\n                <p className=\"text-xs text-red-500\">{state.errors.api_key}</p>\n              )}\n              {credentialSecretName && (\n                <SaveAsSecretToggle\n                  fieldKey={credentialSecretName}\n                  checked={state.savedAsSecret.api_key ?? false}\n                  onToggle={(v) => toggleSecret(\"api_key\", v)}\n                />\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\">\n                {renderHelperText(field.helperText)}\n              </p>\n            )}\n            {state.errors[field.key] && (\n              <p className=\"text-xs text-red-500\">{state.errors[field.key]}</p>\n            )}\n            {field.key in state.savedAsSecret && (\n              <SaveAsSecretToggle\n                fieldKey={field.key}\n                checked={state.savedAsSecret[field.key]}\n                onToggle={(v) => toggleSecret(field.key, v)}\n              />\n            )}\n          </div>\n        ))}\n        {/* argFields are CLI arguments, not credentials — they don't need\n            a \"save as secret\" toggle and are excluded from savedAsSecret. */}\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\">\n                {renderHelperText(field.helperText)}\n              </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={modalTitleLgClassName}>{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            isDisabled={isPending}\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 || isAuthorizingOAuth\n              ? t(I18nKey.MCP$VERIFYING)\n              : isAdding || isFinalizingInstall\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.js","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 { 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 { SaveAsSecretToggle } from \"#/components/features/mcp-page/save-as-secret-toggle\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type {\n  IntegrationCatalogEntry as MarketplaceEntry,\n  MarketplaceField,\n} from \"@openhands/extensions/integrations\";\nimport { McpLogoBadge } from \"#/components/features/mcp-logo-badge\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport type { MCPAuthCredential } from \"#/types/mcp-auth\";\nimport { seedMcpServerHealth } from \"#/api/mcp-health/probe-mcp-server-health\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\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  getMcpOAuthAuthenticationConfig,\n  getInstallableMcpConnectionOption,\n  type McpMarketplaceConnectionOption,\n} from \"#/utils/mcp-marketplace-utils\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\nimport { useSaveFieldsAsSecrets } from \"#/hooks/mutation/use-save-fields-as-secrets\";\nimport { makeMcpTestErrorMessage } from \"#/utils/mcp-test-error-message\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport McpService from \"#/api/mcp-service/mcp-service.api\";\nimport { toMcpServerName } from \"#/utils/mcp-server-name\";\n\n/**\n * Renders a helperText string as React nodes, converting any `[text](url)`\n * markdown links into real `<a>` elements. Plain text segments are left as-is.\n * Only `http:` and `https:` URLs are rendered as links; anything else falls\n * back to `#` to guard against `javascript:` / `data:` XSS vectors.\n */\nfunction renderHelperText(text: string): React.ReactNode {\n  const linkPattern = /\\[([^\\]]+)\\]\\(([^)]+)\\)/g;\n  const parts: React.ReactNode[] = [];\n  let lastIndex = 0;\n  for (const match of text.matchAll(linkPattern)) {\n    if (match.index > lastIndex) {\n      parts.push(text.slice(lastIndex, match.index));\n    }\n    parts.push(\n      <a\n        key={match.index}\n        href={/^https?:\\/\\//i.test(match[2]) ? match[2] : \"#\"}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        className=\"underline hover:text-white transition-colors\"\n      >\n        {match[1]}\n      </a>,\n    );\n    lastIndex = match.index + match[0].length;\n  }\n  if (lastIndex < text.length) {\n    parts.push(text.slice(lastIndex));\n  }\n  return parts;\n}\n\ninterface InstallServerModalProps {\n  entry: MarketplaceEntry;\n  /** Servers installed before this modal opened — guards health seeding. */\n  existingServers: MCPServerConfig[];\n  onClose: () => void;\n  onSuccess?: (entry: MarketplaceEntry) => void;\n}\n\ninterface FieldState {\n  values: Record<string, string>;\n  errors: Record<string, string | null>;\n  savedAsSecret: Record<string, boolean>;\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\"].includes(option.auth.strategy);\n}\n\nfunction isOAuthOption(\n  option: McpMarketplaceConnectionOption | undefined,\n): boolean {\n  return !!option && option.auth.strategy === \"oauth2\";\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 getRemoteHeaderFields(\n  option: McpMarketplaceConnectionOption | undefined,\n): MarketplaceField[] {\n  if (option?.transport.kind !== \"shttp\" && option?.transport.kind !== \"sse\") {\n    return [];\n  }\n  return option.transport.headerFields ?? [];\n}\n\nfunction makeInitialState(entry: MarketplaceEntry): FieldState {\n  const values: Record<string, string> = {};\n  const savedAsSecret: Record<string, boolean> = {};\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      // Pre-check password fields; non-password fields default to off.\n      savedAsSecret[field.key] = field.type === \"password\";\n    }\n    for (const field of template.argFields ?? []) {\n      values[field.key] = \"\";\n    }\n  } else if (template?.kind === \"shttp\" || template?.kind === \"sse\") {\n    values.url = template.url;\n    for (const field of getRemoteHeaderFields(option)) {\n      values[field.key] = \"\";\n      savedAsSecret[field.key] = field.type === \"password\";\n    }\n    if (optionNeedsCredentialField(option)) {\n      values.api_key = \"\";\n      if (option?.auth.credentialSecretName) {\n        savedAsSecret.api_key =\n          option.auth.saveCredentialAsSecretByDefault ?? false;\n      }\n    }\n  }\n  return { values, errors: {}, savedAsSecret };\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  existingServers,\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 saveFieldsAsSecrets = useSaveFieldsAsSecrets();\n  // Cloud backends get a synthetic test success (no local test endpoint);\n  // never seed card health from it.\n  const { backend } = useActiveBackend();\n  const isCloudBackend = backend.kind === \"cloud\";\n\n  const [state, setState] = React.useState<FieldState>(() =>\n    makeInitialState(entry),\n  );\n  // Always holds the latest state so async callbacks (onSuccess) never read\n  // stale closure values, even under React concurrent-mode scheduling.\n  const stateRef = React.useRef(state);\n  stateRef.current = state;\n\n  const [globalError, setGlobalError] = React.useState<string | null>(null);\n  const [isFinalizingInstall, setIsFinalizingInstall] = React.useState(false);\n  const [isAuthorizingOAuth, setIsAuthorizingOAuth] = React.useState(false);\n  const option = getInstallableMcpConnectionOption(entry);\n  const template = option?.transport;\n\n  const isPending =\n    isTesting || isAuthorizingOAuth || isAdding || isFinalizingInstall;\n\n  const setValue = (key: string, value: string) => {\n    setState((prev) => ({\n      ...prev,\n      values: { ...prev.values, [key]: value },\n      errors: { ...prev.errors, [key]: null },\n    }));\n    setGlobalError(null);\n  };\n\n  const toggleSecret = (key: string, value: boolean) => {\n    setState((prev) => ({\n      ...prev,\n      savedAsSecret: { ...prev.savedAsSecret, [key]: value },\n    }));\n  };\n\n  const saveHostedCredentialAsSecret = (): Promise<void> => {\n    const secretName = option?.auth.credentialSecretName;\n    const apiKey = stateRef.current.values.api_key?.trim();\n    if (!secretName || !apiKey || !stateRef.current.savedAsSecret.api_key) {\n      return Promise.resolve();\n    }\n\n    const field: MarketplaceField = {\n      key: secretName,\n      label: option.auth.credentialLabel ?? secretName,\n      type: \"password\",\n      required: true,\n    };\n    return saveFieldsAsSecrets(\n      [field],\n      { [secretName]: apiKey },\n      { [secretName]: true },\n    );\n  };\n\n  const saveSelectedSecrets = (): Promise<void> => {\n    if (template?.kind === \"stdio\") {\n      return saveFieldsAsSecrets(\n        template.envFields ?? [],\n        stateRef.current.values,\n        stateRef.current.savedAsSecret,\n      );\n    }\n    if (template?.kind === \"shttp\" || template?.kind === \"sse\") {\n      return Promise.all([\n        saveHostedCredentialAsSecret(),\n        saveFieldsAsSecrets(\n          getRemoteHeaderFields(option),\n          stateRef.current.values,\n          stateRef.current.savedAsSecret,\n        ),\n      ]).then(() => undefined);\n    }\n    return Promise.resolve();\n  };\n\n  const submitServer = (payload: MCPServerConfig) => {\n    if (payload.auth?.strategy === \"oauth2\") {\n      setIsAuthorizingOAuth(true);\n      void McpService.authorizeOAuth(payload)\n        .then((result) => {\n          if (!result.ok) {\n            setGlobalError(\n              makeMcpTestErrorMessage(t, result.error_kind, result.error),\n            );\n            return;\n          }\n          const serverToSave = result.oauth_state\n            ? {\n                ...payload,\n                auth: { ...payload.auth!, state: result.oauth_state },\n              }\n            : payload;\n          addMcpServer(serverToSave, {\n            onSuccess: () => {\n              if (!isCloudBackend) {\n                seedMcpServerHealth(serverToSave, result, existingServers);\n              }\n              displaySuccessToast(t(I18nKey.MCP$INSTALL_SUCCESS));\n              setIsFinalizingInstall(true);\n              void (async () => {\n                try {\n                  await saveSelectedSecrets();\n                } finally {\n                  onSuccess?.(entry);\n                  onClose();\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        .catch((err: unknown) => {\n          const message = retrieveAxiosErrorMessage(err as AxiosError);\n          setGlobalError(message || t(I18nKey.ERROR$GENERIC));\n        })\n        .finally(() => setIsAuthorizingOAuth(false));\n      return;\n    }\n    testMcpServer(payload, {\n      onSuccess: (result) => {\n        if (!result.ok) {\n          setGlobalError(\n            makeMcpTestErrorMessage(t, result.error_kind, result.error),\n          );\n          // Modal stays open — do NOT call onClose.\n          return;\n        }\n        const serverToSave =\n          result.oauth_state && payload.auth?.strategy === \"oauth2\"\n            ? {\n                ...payload,\n                auth: { ...payload.auth, state: result.oauth_state },\n              }\n            : payload;\n        addMcpServer(serverToSave, {\n          onSuccess: () => {\n            if (!isCloudBackend) {\n              seedMcpServerHealth(serverToSave, result, existingServers);\n            }\n            displaySuccessToast(t(I18nKey.MCP$INSTALL_SUCCESS));\n            setIsFinalizingInstall(true);\n            void (async () => {\n              try {\n                await saveSelectedSecrets();\n              } finally {\n                onSuccess?.(entry);\n                onClose();\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      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 url = template.urlEditable\n      ? (state.values.url?.trim() ?? \"\")\n      : template.url;\n    const oauthMode = isOAuthOption(option);\n    const needsCredential = optionNeedsCredentialField(option);\n    const headerFields = getRemoteHeaderFields(option);\n    const headerErrors: Record<string, string | null> = {};\n    if (!url) {\n      headerErrors.url = t(I18nKey.SETTINGS$MCP_ERROR_URL_REQUIRED);\n    } else {\n      try {\n        const parsedUrl = new URL(url);\n        if (![\"http:\", \"https:\"].includes(parsedUrl.protocol)) {\n          headerErrors.url = t(I18nKey.SETTINGS$MCP_ERROR_URL_INVALID_PROTOCOL);\n        }\n      } catch {\n        headerErrors.url = t(I18nKey.SETTINGS$MCP_ERROR_URL_INVALID);\n      }\n    }\n    for (const field of headerFields) {\n      if (field.required && !(state.values[field.key] ?? \"\").trim()) {\n        headerErrors[field.key] = t(I18nKey.MCP$ERROR_FIELD_REQUIRED);\n      }\n    }\n    if (\n      !oauthMode &&\n      needsCredential &&\n      !isCredentialOptional(option) &&\n      !apiKey\n    ) {\n      headerErrors.api_key = t(I18nKey.MCP$ERROR_FIELD_REQUIRED);\n    }\n    if (Object.values(headerErrors).some(Boolean)) {\n      setState((prev) => ({ ...prev, errors: headerErrors }));\n      return;\n    }\n    const oauthAuthentication = oauthMode\n      ? getMcpOAuthAuthenticationConfig(option)\n      : undefined;\n    const fieldHeaders = Object.fromEntries(\n      headerFields\n        .map((field) => [field.key, state.values[field.key]?.trim() ?? \"\"])\n        .filter(([, value]) => value),\n    );\n    const hasFieldHeaders = Object.keys(fieldHeaders).length > 0;\n    let auth: MCPAuthCredential | undefined;\n    if (oauthMode) {\n      auth = {\n        strategy: \"oauth2\",\n        ...(oauthAuthentication && { authentication: oauthAuthentication }),\n      };\n    } else if (needsCredential && apiKey) {\n      auth =\n        option.auth.strategy === \"api_key\"\n          ? {\n              strategy: \"api_key\",\n              value: apiKey,\n              ...(option.auth.apiKeyHeaderName && {\n                header_name: option.auth.apiKeyHeaderName,\n              }),\n            }\n          : { strategy: \"bearer\", value: apiKey };\n    } else if (hasFieldHeaders) {\n      auth = { strategy: \"header\", headers: fieldHeaders };\n    }\n    const payload: MCPServerConfig = {\n      id: `${template.kind}-${uuidv4()}`,\n      type: template.kind,\n      // Name remote servers after the catalog slug (e.g. \"github\") so they\n      // get a referenceable, LLM-tool-safe mcp_config key instead of the\n      // auto-generated \"sse\"/\"shttp\" fallback. Stdio installs already carry\n      // serverName from the catalog.\n      name: toMcpServerName(entry.id),\n      url,\n      ...(auth && { auth }),\n      ...(hasFieldHeaders &&\n        auth?.strategy !== \"header\" && { headers: fieldHeaders }),\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 oauthMode = isOAuthOption(option);\n      const shouldRenderCredential = optionNeedsCredentialField(option);\n      const apiKeyOptional = option ? isCredentialOptional(option) : false;\n      const credentialSecretName = option?.auth.credentialSecretName;\n      const headerFields = getRemoteHeaderFields(option);\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={state.values.url ?? template.url}\n            onChange={(value) => setValue(\"url\", value)}\n            isDisabled={!template.urlEditable}\n            className=\"w-full\"\n          />\n          {state.errors.url && (\n            <p className=\"text-xs text-red-500\">{state.errors.url}</p>\n          )}\n          {headerFields.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\">\n                  {renderHelperText(field.helperText)}\n                </p>\n              )}\n              {state.errors[field.key] && (\n                <p className=\"text-xs text-red-500\">\n                  {state.errors[field.key]}\n                </p>\n              )}\n              {field.key in state.savedAsSecret && (\n                <SaveAsSecretToggle\n                  fieldKey={field.key}\n                  checked={state.savedAsSecret[field.key] ?? false}\n                  onToggle={(v) => toggleSecret(field.key, v)}\n                />\n              )}\n            </div>\n          ))}\n          {oauthMode ? (\n            <div\n              data-testid=\"mcp-install-oauth-info\"\n              className=\"flex flex-col gap-2 p-3 rounded-lg border border-[var(--oh-border)] bg-base-tertiary\"\n            >\n              <p className=\"text-sm text-secondary-light\">\n                {t(I18nKey.MCP$OAUTH_CONNECT_INFO)}\n              </p>\n              <p className=\"text-xs text-tertiary-alt\">\n                {t(I18nKey.MCP$OAUTH_CONNECT_HINT)}\n              </p>\n            </div>\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={\n                  option?.auth.credentialLabel ??\n                  t(I18nKey.SETTINGS$MCP_API_KEY)\n                }\n                value={state.values.api_key ?? \"\"}\n                onChange={(v) => setValue(\"api_key\", v)}\n                placeholder={\n                  option?.auth.credentialPlaceholder ??\n                  t(I18nKey.SETTINGS$MCP_API_KEY_PLACEHOLDER)\n                }\n                showOptionalTag={apiKeyOptional}\n                required={!apiKeyOptional}\n                className=\"w-full\"\n              />\n              {option?.auth.credentialHelp && (\n                <p className=\"text-xs text-tertiary-alt\">\n                  {renderHelperText(option.auth.credentialHelp)}\n                </p>\n              )}\n              {state.errors.api_key && (\n                <p className=\"text-xs text-red-500\">{state.errors.api_key}</p>\n              )}\n              {credentialSecretName && (\n                <SaveAsSecretToggle\n                  fieldKey={credentialSecretName}\n                  checked={state.savedAsSecret.api_key ?? false}\n                  onToggle={(v) => toggleSecret(\"api_key\", v)}\n                />\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\">\n                {renderHelperText(field.helperText)}\n              </p>\n            )}\n            {state.errors[field.key] && (\n              <p className=\"text-xs text-red-500\">{state.errors[field.key]}</p>\n            )}\n            {field.key in state.savedAsSecret && (\n              <SaveAsSecretToggle\n                fieldKey={field.key}\n                checked={state.savedAsSecret[field.key]}\n                onToggle={(v) => toggleSecret(field.key, v)}\n              />\n            )}\n          </div>\n        ))}\n        {/* argFields are CLI arguments, not credentials — they don't need\n            a \"save as secret\" toggle and are excluded from savedAsSecret. */}\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\">\n                {renderHelperText(field.helperText)}\n              </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={modalTitleLgClassName}>{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            isDisabled={isPending}\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 || isAuthorizingOAuth\n              ? t(I18nKey.MCP$VERIFYING)\n              : isAdding || isFinalizingInstall\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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"}

package/dist/components/features/mcp-page/installed-server-card.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(`../../../node_modules/lucide-react/dist/esm/icons/puzzle.cjs`),i=require(`../../../utils/utils.cjs`),a=require(`../../../utils/extension-module-card-classes.cjs`),o=require(`../../../utils/mcp-marketplace-utils.cjs`),s=require(`../../../node_modules/@openhands/extensions/integrations/index.cjs`),c=require(`../mcp-logo-badge.cjs`),l=require(`../../shared/buttons/circle-plus-check-toggle.cjs`),u=require(`../../../utils/mcp-installed-server-display.cjs`);let d=require(`react`);d=e.__toESM(d,1);let f=require(`react/jsx-runtime`);function p(e){switch(e){case`sse`:return`SSE`;case`shttp`:return`HTTP`;case`stdio`:return`STDIO`;default:return e}}function m(e){if(e.type===`stdio`){let t=e.args&&e.args.length>0?` ${e.args.join(` `)}`:``;return`${e.command??``}${t}`.trim()}return e.url??``}function h({server:e,onEdit:d,onDelete:h}){let{t:g}=t.useTranslation(`openhands`),_=o.findCatalogEntryForServer(e,o.getMcpMarketplaceCatalog(s.default)),v=u.getInstalledServerTitle(e,_),y=m(e),b=p(e.type);return(0,f.jsx)(`div`,{"data-testid":`mcp-server-item`,"data-server-id":e.id,role:`button`,tabIndex:0,onClick:d,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),d())},"aria-label":g(n.I18nKey.MCP$EDIT_SERVER_ARIA,{name:v}),className:i.cn(`flex min-h-[132px] flex-col overflow-hidden p-4 text-left`,a.extensionModuleCardSurfaceClassName,a.extensionModuleCardInteractiveClassName),children:(0,f.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,f.jsx)(c.McpLogoBadge,{entry:_,fallback:(0,f.jsx)(r.Puzzle,{strokeWidth:2.25})}),(0,f.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-3`,children:[(0,f.jsxs)(`header`,{className:`flex items-start justify-between gap-3`,children:[(0,f.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,f.jsx)(`h3`,{className:`truncate text-sm font-semibold`,title:v,children:v}),(0,f.jsx)(`p`,{className:`mt-0.5 text-xs text-tertiary-alt`,children:b})]}),(0,f.jsx)(l.CirclePlusCheckToggle,{testId:`mcp-installed-toggle-${e.id}`,isSelected:!0,onToggle:e=>{e||h()},enableLabelKey:n.I18nKey.MCP$TOGGLE_ADD_SERVER,disableLabelKey:n.I18nKey.MCP$TOGGLE_REMOVE_SERVER})]}),_?.description?(0,f.jsx)(`p`,{"data-testid":`mcp-server-description-${e.id}`,className:`line-clamp-2 break-words text-xs leading-relaxed text-tertiary-light`,children:_.description}):null,y?(0,f.jsx)(`p`,{"data-testid":`mcp-server-detail-${e.id}`,className:`truncate text-xs text-tertiary-alt`,title:y,children:y}):null]})]})})}exports.InstalledServerCard=h;
+const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../node_modules/lucide-react/dist/esm/icons/puzzle.cjs`),i=require(`../../../utils/utils.cjs`),a=require(`../../../utils/extension-module-card-classes.cjs`),o=require(`../../../utils/mcp-marketplace-utils.cjs`),s=require(`../../../node_modules/@openhands/extensions/integrations/index.cjs`),c=require(`../mcp-logo-badge.cjs`),l=require(`../../shared/buttons/circle-plus-check-toggle.cjs`),u=require(`../../../utils/mcp-installed-server-display.cjs`),d=require(`./mcp-server-health.cjs`);let f=require(`react`);f=e.__toESM(f,1);let p=require(`react/jsx-runtime`);function m(e){switch(e){case`sse`:return`SSE`;case`shttp`:return`HTTP`;case`stdio`:return`STDIO`;default:return e}}function h(e){if(e.type===`stdio`){let t=e.args&&e.args.length>0?` ${e.args.join(` `)}`:``;return`${e.command??``}${t}`.trim()}return e.url??``}function g({server:e,onEdit:f,onDelete:g}){let{t:_}=t.useTranslation(`openhands`),v=o.findCatalogEntryForServer(e,o.getMcpMarketplaceCatalog(s.default)),y=u.getInstalledServerTitle(e,v),b=h(e),x=m(e.type);return(0,p.jsx)(`div`,{"data-testid":`mcp-server-item`,"data-server-id":e.id,role:`button`,tabIndex:0,onClick:f,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),f())},"aria-label":_(n.I18nKey.MCP$EDIT_SERVER_ARIA,{name:y}),className:i.cn(`flex min-h-[132px] flex-col overflow-hidden p-4 text-left`,a.extensionModuleCardSurfaceClassName,a.extensionModuleCardInteractiveClassName),children:(0,p.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,p.jsx)(c.McpLogoBadge,{entry:v,fallback:(0,p.jsx)(r.Puzzle,{strokeWidth:2.25})}),(0,p.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-3`,children:[(0,p.jsxs)(`header`,{className:`flex items-start justify-between gap-3`,children:[(0,p.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,p.jsx)(`h3`,{className:`truncate text-sm font-semibold`,title:y,children:y}),(0,p.jsx)(`p`,{className:`mt-0.5 text-xs text-tertiary-alt`,children:x})]}),(0,p.jsx)(l.CirclePlusCheckToggle,{testId:`mcp-installed-toggle-${e.id}`,isSelected:!0,onToggle:e=>{e||g()},enableLabelKey:n.I18nKey.MCP$TOGGLE_ADD_SERVER,disableLabelKey:n.I18nKey.MCP$TOGGLE_REMOVE_SERVER})]}),v?.description?(0,p.jsx)(`p`,{"data-testid":`mcp-server-description-${e.id}`,className:`line-clamp-2 break-words text-xs leading-relaxed text-tertiary-light`,children:v.description}):null,b?(0,p.jsx)(`p`,{"data-testid":`mcp-server-detail-${e.id}`,className:`truncate text-xs text-tertiary-alt`,title:b,children:b}):null,(0,p.jsx)(d.McpServerHealthSection,{server:e,catalog:v,onEdit:f})]})]})})}exports.InstalledServerCard=g;
 //# sourceMappingURL=installed-server-card.cjs.map

package/dist/components/features/mcp-page/installed-server-card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"installed-server-card.cjs","names":[],"sources":["../../../../src/components/features/mcp-page/installed-server-card.tsx"],"sourcesContent":["import React from \"react\";\nimport { Puzzle } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { McpLogoBadge } from \"#/components/features/mcp-logo-badge\";\nimport { CirclePlusCheckToggle } from \"#/components/shared/buttons/circle-plus-check-toggle\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport { INTEGRATION_CATALOG as MCP_MARKETPLACE } from \"@openhands/extensions/integrations\";\nimport {\n  findCatalogEntryForServer,\n  getMcpMarketplaceCatalog,\n} from \"#/utils/mcp-marketplace-utils\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  extensionModuleCardInteractiveClassName,\n  extensionModuleCardSurfaceClassName,\n} from \"#/utils/extension-module-card-classes\";\nimport { getInstalledServerTitle } from \"#/utils/mcp-installed-server-display\";\n\ninterface InstalledServerCardProps {\n  server: MCPServerConfig;\n  onEdit: () => void;\n  onDelete: () => void;\n}\n\nfunction getServerTransportLabel(type: MCPServerConfig[\"type\"]) {\n  switch (type) {\n    case \"sse\":\n      return \"SSE\";\n    case \"shttp\":\n      return \"HTTP\";\n    case \"stdio\":\n      return \"STDIO\";\n    default:\n      return type;\n  }\n}\n\nfunction getServerDetailLine(server: MCPServerConfig): string {\n  if (server.type === \"stdio\") {\n    const args =\n      server.args && server.args.length > 0 ? ` ${server.args.join(\" \")}` : \"\";\n    return `${server.command ?? \"\"}${args}`.trim();\n  }\n  return server.url ?? \"\";\n}\n\nexport function InstalledServerCard({\n  server,\n  onEdit,\n  onDelete,\n}: InstalledServerCardProps) {\n  const { t } = useTranslation(\"openhands\");\n  const catalog = findCatalogEntryForServer(\n    server,\n    getMcpMarketplaceCatalog(MCP_MARKETPLACE),\n  );\n\n  const title = getInstalledServerTitle(server, catalog);\n  const detailLine = getServerDetailLine(server);\n  const transport = getServerTransportLabel(server.type);\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      onEdit();\n    }\n  };\n\n  return (\n    <div\n      data-testid=\"mcp-server-item\"\n      data-server-id={server.id}\n      role=\"button\"\n      tabIndex={0}\n      onClick={onEdit}\n      onKeyDown={handleKeyDown}\n      aria-label={t(I18nKey.MCP$EDIT_SERVER_ARIA, { name: title })}\n      className={cn(\n        \"flex min-h-[132px] flex-col overflow-hidden p-4 text-left\",\n        extensionModuleCardSurfaceClassName,\n        extensionModuleCardInteractiveClassName,\n      )}\n    >\n      <div className=\"flex items-start gap-3\">\n        <McpLogoBadge\n          entry={catalog}\n          fallback={<Puzzle strokeWidth={2.25} />}\n        />\n\n        <div className=\"flex min-w-0 flex-1 flex-col gap-3\">\n          <header className=\"flex items-start justify-between gap-3\">\n            <div className=\"min-w-0 flex-1\">\n              <h3 className=\"truncate text-sm font-semibold\" title={title}>\n                {title}\n              </h3>\n              <p className=\"mt-0.5 text-xs text-tertiary-alt\">{transport}</p>\n            </div>\n            <CirclePlusCheckToggle\n              testId={`mcp-installed-toggle-${server.id}`}\n              isSelected\n              onToggle={(selected) => {\n                if (!selected) {\n                  onDelete();\n                }\n              }}\n              enableLabelKey={I18nKey.MCP$TOGGLE_ADD_SERVER}\n              disableLabelKey={I18nKey.MCP$TOGGLE_REMOVE_SERVER}\n            />\n          </header>\n\n          {catalog?.description ? (\n            <p\n              data-testid={`mcp-server-description-${server.id}`}\n              className=\"line-clamp-2 break-words text-xs leading-relaxed text-tertiary-light\"\n            >\n              {catalog.description}\n            </p>\n          ) : null}\n\n          {detailLine ? (\n            <p\n              data-testid={`mcp-server-detail-${server.id}`}\n              className=\"truncate text-xs text-tertiary-alt\"\n              title={detailLine}\n            >\n              {detailLine}\n            </p>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"gtBAyBA,SAAS,EAAwB,EAA+B,CAC9D,OAAQ,EAAR,CACE,IAAK,MACH,MAAO,MACT,IAAK,QACH,MAAO,OACT,IAAK,QACH,MAAO,QACT,QACE,OAAO,GAIb,SAAS,EAAoB,EAAiC,CAC5D,GAAI,EAAO,OAAS,QAAS,CAC3B,IAAM,EACJ,EAAO,MAAQ,EAAO,KAAK,OAAS,EAAI,IAAI,EAAO,KAAK,KAAK,IAAI,GAAK,GACxE,MAAO,GAAG,EAAO,SAAW,KAAK,IAAO,MAAM,CAEhD,OAAO,EAAO,KAAO,GAGvB,SAAgB,EAAoB,CAClC,SACA,SACA,YAC2B,CAC3B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,EAAU,EAAA,0BACd,EACA,EAAA,yBAAyB,EAAA,QAAgB,CAC1C,CAEK,EAAQ,EAAA,wBAAwB,EAAQ,EAAQ,CAChD,EAAa,EAAoB,EAAO,CACxC,EAAY,EAAwB,EAAO,KAAK,CAStD,OACE,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,kBACZ,iBAAgB,EAAO,GACvB,KAAK,SACL,SAAU,EACV,QAAS,EACT,UAdmB,GAA+B,EAChD,EAAM,MAAQ,SAAW,EAAM,MAAQ,OACzC,EAAM,gBAAgB,CACtB,GAAQ,GAYR,aAAY,EAAE,EAAA,QAAQ,qBAAsB,CAAE,KAAM,EAAO,CAAC,CAC5D,UAAW,EAAA,GACT,4DACA,EAAA,oCACA,EAAA,wCACD,WAED,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kCAAf,EACE,EAAA,EAAA,KAAC,EAAA,aAAD,CACE,MAAO,EACP,UAAU,EAAA,EAAA,KAAC,EAAA,OAAD,CAAQ,YAAa,KAAQ,CAAA,CACvC,CAAA,EAEF,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,8CAAf,EACE,EAAA,EAAA,MAAC,SAAD,CAAQ,UAAU,kDAAlB,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,0BAAf,EACE,EAAA,EAAA,KAAC,KAAD,CAAI,UAAU,iCAAwC,iBACnD,EACE,CAAA,EACL,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,4CAAoC,EAAc,CAAA,CAC3D,IACN,EAAA,EAAA,KAAC,EAAA,sBAAD,CACE,OAAQ,wBAAwB,EAAO,KACvC,WAAA,GACA,SAAW,GAAa,CACjB,GACH,GAAU,EAGd,eAAgB,EAAA,QAAQ,sBACxB,gBAAiB,EAAA,QAAQ,yBACzB,CAAA,CACK,GAER,GAAS,aACR,EAAA,EAAA,KAAC,IAAD,CACE,cAAa,0BAA0B,EAAO,KAC9C,UAAU,gFAET,EAAQ,YACP,CAAA,CACF,KAEH,GACC,EAAA,EAAA,KAAC,IAAD,CACE,cAAa,qBAAqB,EAAO,KACzC,UAAU,qCACV,MAAO,WAEN,EACC,CAAA,CACF,KACA,GACF,GACF,CAAA"}
+{"version":3,"file":"installed-server-card.cjs","names":[],"sources":["../../../../src/components/features/mcp-page/installed-server-card.tsx"],"sourcesContent":["import React from \"react\";\nimport { Puzzle } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { McpLogoBadge } from \"#/components/features/mcp-logo-badge\";\nimport { CirclePlusCheckToggle } from \"#/components/shared/buttons/circle-plus-check-toggle\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport { INTEGRATION_CATALOG as MCP_MARKETPLACE } from \"@openhands/extensions/integrations\";\nimport {\n  findCatalogEntryForServer,\n  getMcpMarketplaceCatalog,\n} from \"#/utils/mcp-marketplace-utils\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  extensionModuleCardInteractiveClassName,\n  extensionModuleCardSurfaceClassName,\n} from \"#/utils/extension-module-card-classes\";\nimport { getInstalledServerTitle } from \"#/utils/mcp-installed-server-display\";\nimport { McpServerHealthSection } from \"./mcp-server-health\";\n\ninterface InstalledServerCardProps {\n  server: MCPServerConfig;\n  onEdit: () => void;\n  onDelete: () => void;\n}\n\nfunction getServerTransportLabel(type: MCPServerConfig[\"type\"]) {\n  switch (type) {\n    case \"sse\":\n      return \"SSE\";\n    case \"shttp\":\n      return \"HTTP\";\n    case \"stdio\":\n      return \"STDIO\";\n    default:\n      return type;\n  }\n}\n\nfunction getServerDetailLine(server: MCPServerConfig): string {\n  if (server.type === \"stdio\") {\n    const args =\n      server.args && server.args.length > 0 ? ` ${server.args.join(\" \")}` : \"\";\n    return `${server.command ?? \"\"}${args}`.trim();\n  }\n  return server.url ?? \"\";\n}\n\nexport function InstalledServerCard({\n  server,\n  onEdit,\n  onDelete,\n}: InstalledServerCardProps) {\n  const { t } = useTranslation(\"openhands\");\n  const catalog = findCatalogEntryForServer(\n    server,\n    getMcpMarketplaceCatalog(MCP_MARKETPLACE),\n  );\n\n  const title = getInstalledServerTitle(server, catalog);\n  const detailLine = getServerDetailLine(server);\n  const transport = getServerTransportLabel(server.type);\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      onEdit();\n    }\n  };\n\n  return (\n    <div\n      data-testid=\"mcp-server-item\"\n      data-server-id={server.id}\n      role=\"button\"\n      tabIndex={0}\n      onClick={onEdit}\n      onKeyDown={handleKeyDown}\n      aria-label={t(I18nKey.MCP$EDIT_SERVER_ARIA, { name: title })}\n      className={cn(\n        \"flex min-h-[132px] flex-col overflow-hidden p-4 text-left\",\n        extensionModuleCardSurfaceClassName,\n        extensionModuleCardInteractiveClassName,\n      )}\n    >\n      <div className=\"flex items-start gap-3\">\n        <McpLogoBadge\n          entry={catalog}\n          fallback={<Puzzle strokeWidth={2.25} />}\n        />\n\n        <div className=\"flex min-w-0 flex-1 flex-col gap-3\">\n          <header className=\"flex items-start justify-between gap-3\">\n            <div className=\"min-w-0 flex-1\">\n              <h3 className=\"truncate text-sm font-semibold\" title={title}>\n                {title}\n              </h3>\n              <p className=\"mt-0.5 text-xs text-tertiary-alt\">{transport}</p>\n            </div>\n            <CirclePlusCheckToggle\n              testId={`mcp-installed-toggle-${server.id}`}\n              isSelected\n              onToggle={(selected) => {\n                if (!selected) {\n                  onDelete();\n                }\n              }}\n              enableLabelKey={I18nKey.MCP$TOGGLE_ADD_SERVER}\n              disableLabelKey={I18nKey.MCP$TOGGLE_REMOVE_SERVER}\n            />\n          </header>\n\n          {catalog?.description ? (\n            <p\n              data-testid={`mcp-server-description-${server.id}`}\n              className=\"line-clamp-2 break-words text-xs leading-relaxed text-tertiary-light\"\n            >\n              {catalog.description}\n            </p>\n          ) : null}\n\n          {detailLine ? (\n            <p\n              data-testid={`mcp-server-detail-${server.id}`}\n              className=\"truncate text-xs text-tertiary-alt\"\n              title={detailLine}\n            >\n              {detailLine}\n            </p>\n          ) : null}\n\n          <McpServerHealthSection\n            server={server}\n            catalog={catalog}\n            onEdit={onEdit}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"qvBA0BA,SAAS,EAAwB,EAA+B,CAC9D,OAAQ,EAAR,CACE,IAAK,MACH,MAAO,MACT,IAAK,QACH,MAAO,OACT,IAAK,QACH,MAAO,QACT,QACE,OAAO,GAIb,SAAS,EAAoB,EAAiC,CAC5D,GAAI,EAAO,OAAS,QAAS,CAC3B,IAAM,EACJ,EAAO,MAAQ,EAAO,KAAK,OAAS,EAAI,IAAI,EAAO,KAAK,KAAK,IAAI,GAAK,GACxE,MAAO,GAAG,EAAO,SAAW,KAAK,IAAO,MAAM,CAEhD,OAAO,EAAO,KAAO,GAGvB,SAAgB,EAAoB,CAClC,SACA,SACA,YAC2B,CAC3B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,EAAU,EAAA,0BACd,EACA,EAAA,yBAAyB,EAAA,QAAgB,CAC1C,CAEK,EAAQ,EAAA,wBAAwB,EAAQ,EAAQ,CAChD,EAAa,EAAoB,EAAO,CACxC,EAAY,EAAwB,EAAO,KAAK,CAStD,OACE,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,kBACZ,iBAAgB,EAAO,GACvB,KAAK,SACL,SAAU,EACV,QAAS,EACT,UAdmB,GAA+B,EAChD,EAAM,MAAQ,SAAW,EAAM,MAAQ,OACzC,EAAM,gBAAgB,CACtB,GAAQ,GAYR,aAAY,EAAE,EAAA,QAAQ,qBAAsB,CAAE,KAAM,EAAO,CAAC,CAC5D,UAAW,EAAA,GACT,4DACA,EAAA,oCACA,EAAA,wCACD,WAED,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kCAAf,EACE,EAAA,EAAA,KAAC,EAAA,aAAD,CACE,MAAO,EACP,UAAU,EAAA,EAAA,KAAC,EAAA,OAAD,CAAQ,YAAa,KAAQ,CAAA,CACvC,CAAA,EAEF,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,8CAAf,EACE,EAAA,EAAA,MAAC,SAAD,CAAQ,UAAU,kDAAlB,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,0BAAf,EACE,EAAA,EAAA,KAAC,KAAD,CAAI,UAAU,iCAAwC,iBACnD,EACE,CAAA,EACL,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,4CAAoC,EAAc,CAAA,CAC3D,IACN,EAAA,EAAA,KAAC,EAAA,sBAAD,CACE,OAAQ,wBAAwB,EAAO,KACvC,WAAA,GACA,SAAW,GAAa,CACjB,GACH,GAAU,EAGd,eAAgB,EAAA,QAAQ,sBACxB,gBAAiB,EAAA,QAAQ,yBACzB,CAAA,CACK,GAER,GAAS,aACR,EAAA,EAAA,KAAC,IAAD,CACE,cAAa,0BAA0B,EAAO,KAC9C,UAAU,gFAET,EAAQ,YACP,CAAA,CACF,KAEH,GACC,EAAA,EAAA,KAAC,IAAD,CACE,cAAa,qBAAqB,EAAO,KACzC,UAAU,qCACV,MAAO,WAEN,EACC,CAAA,CACF,MAEJ,EAAA,EAAA,KAAC,EAAA,uBAAD,CACU,SACC,UACD,SACR,CAAA,CACE,GACF,GACF,CAAA"}

package/dist/components/features/mcp-page/installed-server-card.js

@@ -8,10 +8,11 @@ import c from "../../../node_modules/@openhands/extensions/integrations/index.js
 import { McpLogoBadge as l } from "../mcp-logo-badge.js";
 import { CirclePlusCheckToggle as u } from "../../shared/buttons/circle-plus-check-toggle.js";
 import { getInstalledServerTitle as d } from "../../../utils/mcp-installed-server-display.js";
+import { McpServerHealthSection as f } from "./mcp-server-health.js";
 import "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/features/mcp-page/installed-server-card.tsx
-function m(e) {
+function h(e) {
 	switch (e) {
 		case "sse": return "SSE";
 		case "shttp": return "HTTP";
@@ -19,73 +20,78 @@ function m(e) {
 		default: return e;
 	}
 }
-function h(e) {
+function g(e) {
 	if (e.type === "stdio") {
 		let t = e.args && e.args.length > 0 ? ` ${e.args.join(" ")}` : "";
 		return `${e.command ?? ""}${t}`.trim();
 	}
 	return e.url ?? "";
 }
-function g({ server: g, onEdit: _, onDelete: v }) {
-	let { t: y } = e("openhands"), b = o(g, s(c)), x = d(g, b), S = h(g), C = m(g.type);
-	return /* @__PURE__ */ f("div", {
+function _({ server: _, onEdit: v, onDelete: y }) {
+	let { t: b } = e("openhands"), x = o(_, s(c)), S = d(_, x), C = g(_), w = h(_.type);
+	return /* @__PURE__ */ p("div", {
 		"data-testid": "mcp-server-item",
-		"data-server-id": g.id,
+		"data-server-id": _.id,
 		role: "button",
 		tabIndex: 0,
-		onClick: _,
+		onClick: v,
 		onKeyDown: (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), _());
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), v());
 		},
-		"aria-label": y(t.MCP$EDIT_SERVER_ARIA, { name: x }),
+		"aria-label": b(t.MCP$EDIT_SERVER_ARIA, { name: S }),
 		className: r("flex min-h-[132px] flex-col overflow-hidden p-4 text-left", a, i),
-		children: /* @__PURE__ */ p("div", {
+		children: /* @__PURE__ */ m("div", {
 			className: "flex items-start gap-3",
-			children: [/* @__PURE__ */ f(l, {
-				entry: b,
-				fallback: /* @__PURE__ */ f(n, { strokeWidth: 2.25 })
-			}), /* @__PURE__ */ p("div", {
+			children: [/* @__PURE__ */ p(l, {
+				entry: x,
+				fallback: /* @__PURE__ */ p(n, { strokeWidth: 2.25 })
+			}), /* @__PURE__ */ m("div", {
 				className: "flex min-w-0 flex-1 flex-col gap-3",
 				children: [
-					/* @__PURE__ */ p("header", {
+					/* @__PURE__ */ m("header", {
 						className: "flex items-start justify-between gap-3",
-						children: [/* @__PURE__ */ p("div", {
+						children: [/* @__PURE__ */ m("div", {
 							className: "min-w-0 flex-1",
-							children: [/* @__PURE__ */ f("h3", {
+							children: [/* @__PURE__ */ p("h3", {
 								className: "truncate text-sm font-semibold",
-								title: x,
-								children: x
-							}), /* @__PURE__ */ f("p", {
+								title: S,
+								children: S
+							}), /* @__PURE__ */ p("p", {
 								className: "mt-0.5 text-xs text-tertiary-alt",
-								children: C
+								children: w
 							})]
-						}), /* @__PURE__ */ f(u, {
-							testId: `mcp-installed-toggle-${g.id}`,
+						}), /* @__PURE__ */ p(u, {
+							testId: `mcp-installed-toggle-${_.id}`,
 							isSelected: !0,
 							onToggle: (e) => {
-								e || v();
+								e || y();
 							},
 							enableLabelKey: t.MCP$TOGGLE_ADD_SERVER,
 							disableLabelKey: t.MCP$TOGGLE_REMOVE_SERVER
 						})]
 					}),
-					b?.description ? /* @__PURE__ */ f("p", {
-						"data-testid": `mcp-server-description-${g.id}`,
+					x?.description ? /* @__PURE__ */ p("p", {
+						"data-testid": `mcp-server-description-${_.id}`,
 						className: "line-clamp-2 break-words text-xs leading-relaxed text-tertiary-light",
-						children: b.description
+						children: x.description
 					}) : null,
-					S ? /* @__PURE__ */ f("p", {
-						"data-testid": `mcp-server-detail-${g.id}`,
+					C ? /* @__PURE__ */ p("p", {
+						"data-testid": `mcp-server-detail-${_.id}`,
 						className: "truncate text-xs text-tertiary-alt",
-						title: S,
-						children: S
-					}) : null
+						title: C,
+						children: C
+					}) : null,
+					/* @__PURE__ */ p(f, {
+						server: _,
+						catalog: x,
+						onEdit: v
+					})
 				]
 			})]
 		})
 	});
 }
 //#endregion
-export { g as InstalledServerCard };
+export { _ as InstalledServerCard };
 
 //# sourceMappingURL=installed-server-card.js.map

package/dist/components/features/mcp-page/installed-server-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"installed-server-card.js","names":[],"sources":["../../../../src/components/features/mcp-page/installed-server-card.tsx"],"sourcesContent":["import React from \"react\";\nimport { Puzzle } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { McpLogoBadge } from \"#/components/features/mcp-logo-badge\";\nimport { CirclePlusCheckToggle } from \"#/components/shared/buttons/circle-plus-check-toggle\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport { INTEGRATION_CATALOG as MCP_MARKETPLACE } from \"@openhands/extensions/integrations\";\nimport {\n  findCatalogEntryForServer,\n  getMcpMarketplaceCatalog,\n} from \"#/utils/mcp-marketplace-utils\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  extensionModuleCardInteractiveClassName,\n  extensionModuleCardSurfaceClassName,\n} from \"#/utils/extension-module-card-classes\";\nimport { getInstalledServerTitle } from \"#/utils/mcp-installed-server-display\";\n\ninterface InstalledServerCardProps {\n  server: MCPServerConfig;\n  onEdit: () => void;\n  onDelete: () => void;\n}\n\nfunction getServerTransportLabel(type: MCPServerConfig[\"type\"]) {\n  switch (type) {\n    case \"sse\":\n      return \"SSE\";\n    case \"shttp\":\n      return \"HTTP\";\n    case \"stdio\":\n      return \"STDIO\";\n    default:\n      return type;\n  }\n}\n\nfunction getServerDetailLine(server: MCPServerConfig): string {\n  if (server.type === \"stdio\") {\n    const args =\n      server.args && server.args.length > 0 ? ` ${server.args.join(\" \")}` : \"\";\n    return `${server.command ?? \"\"}${args}`.trim();\n  }\n  return server.url ?? \"\";\n}\n\nexport function InstalledServerCard({\n  server,\n  onEdit,\n  onDelete,\n}: InstalledServerCardProps) {\n  const { t } = useTranslation(\"openhands\");\n  const catalog = findCatalogEntryForServer(\n    server,\n    getMcpMarketplaceCatalog(MCP_MARKETPLACE),\n  );\n\n  const title = getInstalledServerTitle(server, catalog);\n  const detailLine = getServerDetailLine(server);\n  const transport = getServerTransportLabel(server.type);\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      onEdit();\n    }\n  };\n\n  return (\n    <div\n      data-testid=\"mcp-server-item\"\n      data-server-id={server.id}\n      role=\"button\"\n      tabIndex={0}\n      onClick={onEdit}\n      onKeyDown={handleKeyDown}\n      aria-label={t(I18nKey.MCP$EDIT_SERVER_ARIA, { name: title })}\n      className={cn(\n        \"flex min-h-[132px] flex-col overflow-hidden p-4 text-left\",\n        extensionModuleCardSurfaceClassName,\n        extensionModuleCardInteractiveClassName,\n      )}\n    >\n      <div className=\"flex items-start gap-3\">\n        <McpLogoBadge\n          entry={catalog}\n          fallback={<Puzzle strokeWidth={2.25} />}\n        />\n\n        <div className=\"flex min-w-0 flex-1 flex-col gap-3\">\n          <header className=\"flex items-start justify-between gap-3\">\n            <div className=\"min-w-0 flex-1\">\n              <h3 className=\"truncate text-sm font-semibold\" title={title}>\n                {title}\n              </h3>\n              <p className=\"mt-0.5 text-xs text-tertiary-alt\">{transport}</p>\n            </div>\n            <CirclePlusCheckToggle\n              testId={`mcp-installed-toggle-${server.id}`}\n              isSelected\n              onToggle={(selected) => {\n                if (!selected) {\n                  onDelete();\n                }\n              }}\n              enableLabelKey={I18nKey.MCP$TOGGLE_ADD_SERVER}\n              disableLabelKey={I18nKey.MCP$TOGGLE_REMOVE_SERVER}\n            />\n          </header>\n\n          {catalog?.description ? (\n            <p\n              data-testid={`mcp-server-description-${server.id}`}\n              className=\"line-clamp-2 break-words text-xs leading-relaxed text-tertiary-light\"\n            >\n              {catalog.description}\n            </p>\n          ) : null}\n\n          {detailLine ? (\n            <p\n              data-testid={`mcp-server-detail-${server.id}`}\n              className=\"truncate text-xs text-tertiary-alt\"\n              title={detailLine}\n            >\n              {detailLine}\n            </p>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAyBA,SAAS,EAAwB,GAA+B;AAC9D,SAAQ,GAAR;EACE,KAAK,MACH,QAAO;EACT,KAAK,QACH,QAAO;EACT,KAAK,QACH,QAAO;EACT,QACE,QAAO;;;AAIb,SAAS,EAAoB,GAAiC;AAC5D,KAAI,EAAO,SAAS,SAAS;EAC3B,IAAM,IACJ,EAAO,QAAQ,EAAO,KAAK,SAAS,IAAI,IAAI,EAAO,KAAK,KAAK,IAAI,KAAK;AACxE,SAAO,GAAG,EAAO,WAAW,KAAK,IAAO,MAAM;;AAEhD,QAAO,EAAO,OAAO;;AAGvB,SAAgB,EAAoB,EAClC,WACA,WACA,eAC2B;CAC3B,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,IAAU,EACd,GACA,EAAyB,EAAgB,CAC1C,EAEK,IAAQ,EAAwB,GAAQ,EAAQ,EAChD,IAAa,EAAoB,EAAO,EACxC,IAAY,EAAwB,EAAO,KAAK;AAStD,QACE,kBAAC,OAAD;EACE,eAAY;EACZ,kBAAgB,EAAO;EACvB,MAAK;EACL,UAAU;EACV,SAAS;EACT,YAdmB,MAA+B;AACpD,IAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,gBAAgB,EACtB,GAAQ;;EAYR,cAAY,EAAE,EAAQ,sBAAsB,EAAE,MAAM,GAAO,CAAC;EAC5D,WAAW,EACT,6DACA,GACA,EACD;YAED,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IACE,OAAO;IACP,UAAU,kBAAC,GAAD,EAAQ,aAAa,MAAQ,CAAA;IACvC,CAAA,EAEF,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,UAAD;MAAQ,WAAU;gBAAlB,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,MAAD;QAAI,WAAU;QAAwC;kBACnD;QACE,CAAA,EACL,kBAAC,KAAD;QAAG,WAAU;kBAAoC;QAAc,CAAA,CAC3D;UACN,kBAAC,GAAD;OACE,QAAQ,wBAAwB,EAAO;OACvC,YAAA;OACA,WAAW,MAAa;AACtB,QAAK,KACH,GAAU;;OAGd,gBAAgB,EAAQ;OACxB,iBAAiB,EAAQ;OACzB,CAAA,CACK;;KAER,GAAS,cACR,kBAAC,KAAD;MACE,eAAa,0BAA0B,EAAO;MAC9C,WAAU;gBAET,EAAQ;MACP,CAAA,GACF;KAEH,IACC,kBAAC,KAAD;MACE,eAAa,qBAAqB,EAAO;MACzC,WAAU;MACV,OAAO;gBAEN;MACC,CAAA,GACF;KACA;MACF;;EACF,CAAA"}
+{"version":3,"file":"installed-server-card.js","names":[],"sources":["../../../../src/components/features/mcp-page/installed-server-card.tsx"],"sourcesContent":["import React from \"react\";\nimport { Puzzle } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { McpLogoBadge } from \"#/components/features/mcp-logo-badge\";\nimport { CirclePlusCheckToggle } from \"#/components/shared/buttons/circle-plus-check-toggle\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport { INTEGRATION_CATALOG as MCP_MARKETPLACE } from \"@openhands/extensions/integrations\";\nimport {\n  findCatalogEntryForServer,\n  getMcpMarketplaceCatalog,\n} from \"#/utils/mcp-marketplace-utils\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  extensionModuleCardInteractiveClassName,\n  extensionModuleCardSurfaceClassName,\n} from \"#/utils/extension-module-card-classes\";\nimport { getInstalledServerTitle } from \"#/utils/mcp-installed-server-display\";\nimport { McpServerHealthSection } from \"./mcp-server-health\";\n\ninterface InstalledServerCardProps {\n  server: MCPServerConfig;\n  onEdit: () => void;\n  onDelete: () => void;\n}\n\nfunction getServerTransportLabel(type: MCPServerConfig[\"type\"]) {\n  switch (type) {\n    case \"sse\":\n      return \"SSE\";\n    case \"shttp\":\n      return \"HTTP\";\n    case \"stdio\":\n      return \"STDIO\";\n    default:\n      return type;\n  }\n}\n\nfunction getServerDetailLine(server: MCPServerConfig): string {\n  if (server.type === \"stdio\") {\n    const args =\n      server.args && server.args.length > 0 ? ` ${server.args.join(\" \")}` : \"\";\n    return `${server.command ?? \"\"}${args}`.trim();\n  }\n  return server.url ?? \"\";\n}\n\nexport function InstalledServerCard({\n  server,\n  onEdit,\n  onDelete,\n}: InstalledServerCardProps) {\n  const { t } = useTranslation(\"openhands\");\n  const catalog = findCatalogEntryForServer(\n    server,\n    getMcpMarketplaceCatalog(MCP_MARKETPLACE),\n  );\n\n  const title = getInstalledServerTitle(server, catalog);\n  const detailLine = getServerDetailLine(server);\n  const transport = getServerTransportLabel(server.type);\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      onEdit();\n    }\n  };\n\n  return (\n    <div\n      data-testid=\"mcp-server-item\"\n      data-server-id={server.id}\n      role=\"button\"\n      tabIndex={0}\n      onClick={onEdit}\n      onKeyDown={handleKeyDown}\n      aria-label={t(I18nKey.MCP$EDIT_SERVER_ARIA, { name: title })}\n      className={cn(\n        \"flex min-h-[132px] flex-col overflow-hidden p-4 text-left\",\n        extensionModuleCardSurfaceClassName,\n        extensionModuleCardInteractiveClassName,\n      )}\n    >\n      <div className=\"flex items-start gap-3\">\n        <McpLogoBadge\n          entry={catalog}\n          fallback={<Puzzle strokeWidth={2.25} />}\n        />\n\n        <div className=\"flex min-w-0 flex-1 flex-col gap-3\">\n          <header className=\"flex items-start justify-between gap-3\">\n            <div className=\"min-w-0 flex-1\">\n              <h3 className=\"truncate text-sm font-semibold\" title={title}>\n                {title}\n              </h3>\n              <p className=\"mt-0.5 text-xs text-tertiary-alt\">{transport}</p>\n            </div>\n            <CirclePlusCheckToggle\n              testId={`mcp-installed-toggle-${server.id}`}\n              isSelected\n              onToggle={(selected) => {\n                if (!selected) {\n                  onDelete();\n                }\n              }}\n              enableLabelKey={I18nKey.MCP$TOGGLE_ADD_SERVER}\n              disableLabelKey={I18nKey.MCP$TOGGLE_REMOVE_SERVER}\n            />\n          </header>\n\n          {catalog?.description ? (\n            <p\n              data-testid={`mcp-server-description-${server.id}`}\n              className=\"line-clamp-2 break-words text-xs leading-relaxed text-tertiary-light\"\n            >\n              {catalog.description}\n            </p>\n          ) : null}\n\n          {detailLine ? (\n            <p\n              data-testid={`mcp-server-detail-${server.id}`}\n              className=\"truncate text-xs text-tertiary-alt\"\n              title={detailLine}\n            >\n              {detailLine}\n            </p>\n          ) : null}\n\n          <McpServerHealthSection\n            server={server}\n            catalog={catalog}\n            onEdit={onEdit}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA0BA,SAAS,EAAwB,GAA+B;AAC9D,SAAQ,GAAR;EACE,KAAK,MACH,QAAO;EACT,KAAK,QACH,QAAO;EACT,KAAK,QACH,QAAO;EACT,QACE,QAAO;;;AAIb,SAAS,EAAoB,GAAiC;AAC5D,KAAI,EAAO,SAAS,SAAS;EAC3B,IAAM,IACJ,EAAO,QAAQ,EAAO,KAAK,SAAS,IAAI,IAAI,EAAO,KAAK,KAAK,IAAI,KAAK;AACxE,SAAO,GAAG,EAAO,WAAW,KAAK,IAAO,MAAM;;AAEhD,QAAO,EAAO,OAAO;;AAGvB,SAAgB,EAAoB,EAClC,WACA,WACA,eAC2B;CAC3B,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,IAAU,EACd,GACA,EAAyB,EAAgB,CAC1C,EAEK,IAAQ,EAAwB,GAAQ,EAAQ,EAChD,IAAa,EAAoB,EAAO,EACxC,IAAY,EAAwB,EAAO,KAAK;AAStD,QACE,kBAAC,OAAD;EACE,eAAY;EACZ,kBAAgB,EAAO;EACvB,MAAK;EACL,UAAU;EACV,SAAS;EACT,YAdmB,MAA+B;AACpD,IAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,gBAAgB,EACtB,GAAQ;;EAYR,cAAY,EAAE,EAAQ,sBAAsB,EAAE,MAAM,GAAO,CAAC;EAC5D,WAAW,EACT,6DACA,GACA,EACD;YAED,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IACE,OAAO;IACP,UAAU,kBAAC,GAAD,EAAQ,aAAa,MAAQ,CAAA;IACvC,CAAA,EAEF,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,UAAD;MAAQ,WAAU;gBAAlB,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,MAAD;QAAI,WAAU;QAAwC;kBACnD;QACE,CAAA,EACL,kBAAC,KAAD;QAAG,WAAU;kBAAoC;QAAc,CAAA,CAC3D;UACN,kBAAC,GAAD;OACE,QAAQ,wBAAwB,EAAO;OACvC,YAAA;OACA,WAAW,MAAa;AACtB,QAAK,KACH,GAAU;;OAGd,gBAAgB,EAAQ;OACxB,iBAAiB,EAAQ;OACzB,CAAA,CACK;;KAER,GAAS,cACR,kBAAC,KAAD;MACE,eAAa,0BAA0B,EAAO;MAC9C,WAAU;gBAET,EAAQ;MACP,CAAA,GACF;KAEH,IACC,kBAAC,KAAD;MACE,eAAa,qBAAqB,EAAO;MACzC,WAAU;MACV,OAAO;gBAEN;MACC,CAAA,GACF;KAEJ,kBAAC,GAAD;MACU;MACC;MACD;MACR,CAAA;KACE;MACF;;EACF,CAAA"}

package/dist/components/features/mcp-page/mcp-server-health.cjs

@@ -0,0 +1,2 @@
+const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../utils/utils.cjs`),i=require(`../../../utils/retrieve-axios-error-message.cjs`),a=require(`../../../utils/custom-toast-handlers.cjs`),o=require(`../../../contexts/active-backend-context.cjs`),s=require(`../../../api/mcp-health/probe-mcp-server-health.cjs`),c=require(`../../../hooks/mutation/use-update-mcp-server.cjs`),l=require(`../../../hooks/use-mcp-server-health.cjs`),u=require(`../../../utils/mcp-test-error-message.cjs`);let d=require(`react`);d=e.__toESM(d,1);let f=require(`react/jsx-runtime`);var p={unchecked:`bg-[var(--oh-text-tertiary)]`,checking:`bg-[var(--oh-interactive-selected)] animate-pulse`,healthy:`bg-[var(--oh-status-success)]`,failed:`bg-red-500`},m=`text-xs text-[var(--oh-muted)] underline transition-colors hover:text-white disabled:cursor-not-allowed disabled:opacity-60`;function h(e){return e.status===`healthy`?e.verification===`verified`?`healthy`:`healthy-connectivity`:e.status}function g(e,t){switch(t.status){case`checking`:return e(n.I18nKey.MCP$HEALTH_STATUS_CHECKING);case`healthy`:return t.verification===`verified`?e(n.I18nKey.MCP$HEALTH_STATUS_VERIFIED,{count:t.toolCount}):e(n.I18nKey.MCP$HEALTH_STATUS_CONNECTIVITY_ONLY);case`failed`:return u.makeMcpTestErrorMessage(e,t.kind,t.error);default:return e(n.I18nKey.MCP$HEALTH_STATUS_UNCHECKED)}}function _({server:e,catalog:u,onEdit:d}){let{t:_}=t.useTranslation(`openhands`),{backend:v}=o.useActiveBackend(),{health:y,probe:b,reauthorize:x}=l.useMcpServerHealth(e),{mutate:S}=c.useUpdateMcpServer();if(v.kind===`cloud`)return null;let C=y.status===`checking`,w=y.status===`failed`,T=g(_,y),E=async()=>{let t=await x();if(!t?.ok||!t.oauth_state||e.auth?.strategy!==`oauth2`)return;let r={...e,auth:{...e.auth,state:t.oauth_state}};S({serverId:e.id,server:r},{onSuccess:()=>s.seedMcpServerHealth(r,t,[]),onError:e=>a.displayErrorToast(i.retrieveAxiosErrorMessage(e)||_(n.I18nKey.ERROR$GENERIC))})};return(0,f.jsxs)(`div`,{"data-testid":`mcp-server-health-${e.id}`,role:`presentation`,className:`flex flex-col gap-1.5`,onClick:e=>e.stopPropagation(),onKeyDown:e=>e.stopPropagation(),children:[(0,f.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,f.jsx)(`span`,{"data-testid":`mcp-health-dot`,"data-status":h(y),"aria-hidden":`true`,className:r.cn(`inline-block h-2 w-2 shrink-0 rounded-full`,p[y.status])}),(0,f.jsx)(`p`,{"data-testid":`mcp-health-label-${e.id}`,className:r.cn(`line-clamp-2 break-words text-xs`,w?`text-red-500`:`text-tertiary-alt`),title:T,children:T})]}),y.status===`healthy`&&y.verification===`connectivity-only`?(0,f.jsx)(`p`,{className:`text-xs text-tertiary-light`,children:_(n.I18nKey.MCP$HEALTH_CONNECTIVITY_ONLY_HINT)}):null,(0,f.jsxs)(`div`,{className:`flex flex-wrap items-center gap-3`,children:[(0,f.jsx)(`button`,{type:`button`,"data-testid":`mcp-health-probe-${e.id}`,className:m,onClick:()=>void b(),disabled:C,children:_(w?n.I18nKey.MCP$HEALTH_RETRY:n.I18nKey.MCP$TEST_BUTTON)}),w&&y.kind===`credentials`?(0,f.jsx)(`button`,{type:`button`,"data-testid":`mcp-health-update-credentials-${e.id}`,className:m,onClick:d,children:_(n.I18nKey.MCP$HEALTH_UPDATE_CREDENTIALS)}):null,w&&e.auth?.strategy===`oauth2`?(0,f.jsx)(`button`,{type:`button`,"data-testid":`mcp-health-reauthorize-${e.id}`,className:m,onClick:()=>void E(),children:_(n.I18nKey.MCP$HEALTH_REAUTHORIZE)}):null,w&&u?.docsUrl?(0,f.jsx)(`a`,{href:u.docsUrl,target:`_blank`,rel:`noreferrer`,className:m,children:_(n.I18nKey.MCP$VIEW_DOCS)}):null]})]})}exports.McpServerHealthSection=_;
+//# sourceMappingURL=mcp-server-health.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-server-health.cjs","names":[],"sources":["../../../../src/components/features/mcp-page/mcp-server-health.tsx"],"sourcesContent":["import React from \"react\";\nimport { AxiosError } from \"axios\";\nimport { useTranslation } from \"react-i18next\";\nimport type { TFunction } from \"i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { seedMcpServerHealth } from \"#/api/mcp-health/probe-mcp-server-health\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useUpdateMcpServer } from \"#/hooks/mutation/use-update-mcp-server\";\nimport { useMcpServerHealth } from \"#/hooks/use-mcp-server-health\";\nimport type { McpServerHealth } from \"#/types/mcp-health\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport { displayErrorToast } from \"#/utils/custom-toast-handlers\";\nimport type { MarketplaceEntry } from \"#/utils/mcp-marketplace-utils\";\nimport { makeMcpTestErrorMessage } from \"#/utils/mcp-test-error-message\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\nimport { cn } from \"#/utils/utils\";\n\ninterface McpServerHealthSectionProps {\n  server: MCPServerConfig;\n  catalog: MarketplaceEntry | undefined;\n  onEdit: () => void;\n}\n\nconst DOT_CLASS_BY_STATUS: Record<McpServerHealth[\"status\"], string> = {\n  unchecked: \"bg-[var(--oh-text-tertiary)]\",\n  checking: \"bg-[var(--oh-interactive-selected)] animate-pulse\",\n  healthy: \"bg-[var(--oh-status-success)]\",\n  failed: \"bg-red-500\",\n};\n\nconst actionClassName =\n  \"text-xs text-[var(--oh-muted)] underline transition-colors hover:text-white disabled:cursor-not-allowed disabled:opacity-60\";\n\nfunction getDotStatus(health: McpServerHealth): string {\n  if (health.status === \"healthy\") {\n    return health.verification === \"verified\"\n      ? \"healthy\"\n      : \"healthy-connectivity\";\n  }\n  return health.status;\n}\n\nfunction getStatusLabel(\n  t: TFunction<\"openhands\">,\n  health: McpServerHealth,\n): string {\n  switch (health.status) {\n    case \"checking\":\n      return t(I18nKey.MCP$HEALTH_STATUS_CHECKING);\n    case \"healthy\":\n      return health.verification === \"verified\"\n        ? t(I18nKey.MCP$HEALTH_STATUS_VERIFIED, { count: health.toolCount })\n        : t(I18nKey.MCP$HEALTH_STATUS_CONNECTIVITY_ONLY);\n    case \"failed\":\n      return makeMcpTestErrorMessage(t, health.kind, health.error);\n    default:\n      return t(I18nKey.MCP$HEALTH_STATUS_UNCHECKED);\n  }\n}\n\n/**\n * Connection-health row for an installed server card: status dot + label,\n * a Test connection / Retry action, and — on failure — the relevant\n * recovery actions (fix credentials, re-run OAuth, open the docs).\n *\n * Renders nothing for cloud backends: the test endpoint only exists on the\n * local agent-server (`McpService.testServer` short-circuits cloud with a\n * synthetic success that must not be presented as a health verdict).\n */\nexport function McpServerHealthSection({\n  server,\n  catalog,\n  onEdit,\n}: McpServerHealthSectionProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { backend } = useActiveBackend();\n  const { health, probe, reauthorize } = useMcpServerHealth(server);\n  const { mutate: updateMcpServer } = useUpdateMcpServer();\n\n  if (backend.kind === \"cloud\") return null;\n\n  const isChecking = health.status === \"checking\";\n  const isFailed = health.status === \"failed\";\n  const label = getStatusLabel(t, health);\n\n  const handleReauthorize = async () => {\n    const result = await reauthorize();\n    if (\n      !result?.ok ||\n      !result.oauth_state ||\n      server.auth?.strategy !== \"oauth2\"\n    ) {\n      return;\n    }\n    // Persist the refreshed tokens, mirroring the editor's OAuth save path.\n    const serverToSave: MCPServerConfig = {\n      ...server,\n      auth: { ...server.auth, state: result.oauth_state },\n    };\n    updateMcpServer(\n      { serverId: server.id, server: serverToSave },\n      {\n        // The update mutation clears this server's health entry; re-seed it\n        // from the probe that just succeeded so the verdict survives the save.\n        onSuccess: () => seedMcpServerHealth(serverToSave, result, []),\n        onError: (err: unknown) =>\n          displayErrorToast(\n            retrieveAxiosErrorMessage(err as AxiosError) ||\n              t(I18nKey.ERROR$GENERIC),\n          ),\n      },\n    );\n  };\n\n  return (\n    // Propagation stopper: the card root is a role=\"button\" that opens the\n    // editor on click/Enter; interactions inside the health row must not\n    // double as \"edit server\".\n    <div\n      data-testid={`mcp-server-health-${server.id}`}\n      role=\"presentation\"\n      className=\"flex flex-col gap-1.5\"\n      onClick={(event) => event.stopPropagation()}\n      onKeyDown={(event) => event.stopPropagation()}\n    >\n      <div className=\"flex items-center gap-2\">\n        <span\n          data-testid=\"mcp-health-dot\"\n          data-status={getDotStatus(health)}\n          aria-hidden=\"true\"\n          className={cn(\n            \"inline-block h-2 w-2 shrink-0 rounded-full\",\n            DOT_CLASS_BY_STATUS[health.status],\n          )}\n        />\n        <p\n          data-testid={`mcp-health-label-${server.id}`}\n          className={cn(\n            \"line-clamp-2 break-words text-xs\",\n            isFailed ? \"text-red-500\" : \"text-tertiary-alt\",\n          )}\n          title={label}\n        >\n          {label}\n        </p>\n      </div>\n\n      {health.status === \"healthy\" &&\n      health.verification === \"connectivity-only\" ? (\n        <p className=\"text-xs text-tertiary-light\">\n          {t(I18nKey.MCP$HEALTH_CONNECTIVITY_ONLY_HINT)}\n        </p>\n      ) : null}\n\n      <div className=\"flex flex-wrap items-center gap-3\">\n        <button\n          type=\"button\"\n          data-testid={`mcp-health-probe-${server.id}`}\n          className={actionClassName}\n          onClick={() => void probe()}\n          disabled={isChecking}\n        >\n          {isFailed ? t(I18nKey.MCP$HEALTH_RETRY) : t(I18nKey.MCP$TEST_BUTTON)}\n        </button>\n        {isFailed && health.kind === \"credentials\" ? (\n          <button\n            type=\"button\"\n            data-testid={`mcp-health-update-credentials-${server.id}`}\n            className={actionClassName}\n            onClick={onEdit}\n          >\n            {t(I18nKey.MCP$HEALTH_UPDATE_CREDENTIALS)}\n          </button>\n        ) : null}\n        {isFailed && server.auth?.strategy === \"oauth2\" ? (\n          <button\n            type=\"button\"\n            data-testid={`mcp-health-reauthorize-${server.id}`}\n            className={actionClassName}\n            onClick={() => void handleReauthorize()}\n          >\n            {t(I18nKey.MCP$HEALTH_REAUTHORIZE)}\n          </button>\n        ) : null}\n        {isFailed && catalog?.docsUrl ? (\n          <a\n            href={catalog.docsUrl}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className={actionClassName}\n          >\n            {t(I18nKey.MCP$VIEW_DOCS)}\n          </a>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/mcp-page/mcp-server-health.d.ts

@@ -0,0 +1,18 @@
+import { MCPServerConfig } from "#/types/mcp-server";
+import type { MarketplaceEntry } from "#/utils/mcp-marketplace-utils";
+interface McpServerHealthSectionProps {
+    server: MCPServerConfig;
+    catalog: MarketplaceEntry | undefined;
+    onEdit: () => void;
+}
+/**
+ * Connection-health row for an installed server card: status dot + label,
+ * a Test connection / Retry action, and — on failure — the relevant
+ * recovery actions (fix credentials, re-run OAuth, open the docs).
+ *
+ * Renders nothing for cloud backends: the test endpoint only exists on the
+ * local agent-server (`McpService.testServer` short-circuits cloud with a
+ * synthetic success that must not be presented as a health verdict).
+ */
+export declare function McpServerHealthSection({ server, catalog, onEdit, }: McpServerHealthSectionProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/features/mcp-page/mcp-server-health.js

@@ -0,0 +1,117 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { cn as n } from "../../../utils/utils.js";
+import { retrieveAxiosErrorMessage as r } from "../../../utils/retrieve-axios-error-message.js";
+import { displayErrorToast as i } from "../../../utils/custom-toast-handlers.js";
+import { useActiveBackend as a } from "../../../contexts/active-backend-context.js";
+import { seedMcpServerHealth as o } from "../../../api/mcp-health/probe-mcp-server-health.js";
+import { useUpdateMcpServer as s } from "../../../hooks/mutation/use-update-mcp-server.js";
+import { useMcpServerHealth as c } from "../../../hooks/use-mcp-server-health.js";
+import { makeMcpTestErrorMessage as l } from "../../../utils/mcp-test-error-message.js";
+import "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/features/mcp-page/mcp-server-health.tsx
+var f = {
+	unchecked: "bg-[var(--oh-text-tertiary)]",
+	checking: "bg-[var(--oh-interactive-selected)] animate-pulse",
+	healthy: "bg-[var(--oh-status-success)]",
+	failed: "bg-red-500"
+}, p = "text-xs text-[var(--oh-muted)] underline transition-colors hover:text-white disabled:cursor-not-allowed disabled:opacity-60";
+function m(e) {
+	return e.status === "healthy" ? e.verification === "verified" ? "healthy" : "healthy-connectivity" : e.status;
+}
+function h(e, n) {
+	switch (n.status) {
+		case "checking": return e(t.MCP$HEALTH_STATUS_CHECKING);
+		case "healthy": return n.verification === "verified" ? e(t.MCP$HEALTH_STATUS_VERIFIED, { count: n.toolCount }) : e(t.MCP$HEALTH_STATUS_CONNECTIVITY_ONLY);
+		case "failed": return l(e, n.kind, n.error);
+		default: return e(t.MCP$HEALTH_STATUS_UNCHECKED);
+	}
+}
+function g({ server: l, catalog: g, onEdit: _ }) {
+	let { t: v } = e("openhands"), { backend: y } = a(), { health: b, probe: x, reauthorize: S } = c(l), { mutate: C } = s();
+	if (y.kind === "cloud") return null;
+	let w = b.status === "checking", T = b.status === "failed", E = h(v, b), D = async () => {
+		let e = await S();
+		if (!e?.ok || !e.oauth_state || l.auth?.strategy !== "oauth2") return;
+		let n = {
+			...l,
+			auth: {
+				...l.auth,
+				state: e.oauth_state
+			}
+		};
+		C({
+			serverId: l.id,
+			server: n
+		}, {
+			onSuccess: () => o(n, e, []),
+			onError: (e) => i(r(e) || v(t.ERROR$GENERIC))
+		});
+	};
+	return /* @__PURE__ */ d("div", {
+		"data-testid": `mcp-server-health-${l.id}`,
+		role: "presentation",
+		className: "flex flex-col gap-1.5",
+		onClick: (e) => e.stopPropagation(),
+		onKeyDown: (e) => e.stopPropagation(),
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ u("span", {
+					"data-testid": "mcp-health-dot",
+					"data-status": m(b),
+					"aria-hidden": "true",
+					className: n("inline-block h-2 w-2 shrink-0 rounded-full", f[b.status])
+				}), /* @__PURE__ */ u("p", {
+					"data-testid": `mcp-health-label-${l.id}`,
+					className: n("line-clamp-2 break-words text-xs", T ? "text-red-500" : "text-tertiary-alt"),
+					title: E,
+					children: E
+				})]
+			}),
+			b.status === "healthy" && b.verification === "connectivity-only" ? /* @__PURE__ */ u("p", {
+				className: "text-xs text-tertiary-light",
+				children: v(t.MCP$HEALTH_CONNECTIVITY_ONLY_HINT)
+			}) : null,
+			/* @__PURE__ */ d("div", {
+				className: "flex flex-wrap items-center gap-3",
+				children: [
+					/* @__PURE__ */ u("button", {
+						type: "button",
+						"data-testid": `mcp-health-probe-${l.id}`,
+						className: p,
+						onClick: () => void x(),
+						disabled: w,
+						children: v(T ? t.MCP$HEALTH_RETRY : t.MCP$TEST_BUTTON)
+					}),
+					T && b.kind === "credentials" ? /* @__PURE__ */ u("button", {
+						type: "button",
+						"data-testid": `mcp-health-update-credentials-${l.id}`,
+						className: p,
+						onClick: _,
+						children: v(t.MCP$HEALTH_UPDATE_CREDENTIALS)
+					}) : null,
+					T && l.auth?.strategy === "oauth2" ? /* @__PURE__ */ u("button", {
+						type: "button",
+						"data-testid": `mcp-health-reauthorize-${l.id}`,
+						className: p,
+						onClick: () => void D(),
+						children: v(t.MCP$HEALTH_REAUTHORIZE)
+					}) : null,
+					T && g?.docsUrl ? /* @__PURE__ */ u("a", {
+						href: g.docsUrl,
+						target: "_blank",
+						rel: "noreferrer",
+						className: p,
+						children: v(t.MCP$VIEW_DOCS)
+					}) : null
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { g as McpServerHealthSection };
+
+//# sourceMappingURL=mcp-server-health.js.map

package/dist/components/features/mcp-page/mcp-server-health.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-server-health.js","names":[],"sources":["../../../../src/components/features/mcp-page/mcp-server-health.tsx"],"sourcesContent":["import React from \"react\";\nimport { AxiosError } from \"axios\";\nimport { useTranslation } from \"react-i18next\";\nimport type { TFunction } from \"i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { seedMcpServerHealth } from \"#/api/mcp-health/probe-mcp-server-health\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useUpdateMcpServer } from \"#/hooks/mutation/use-update-mcp-server\";\nimport { useMcpServerHealth } from \"#/hooks/use-mcp-server-health\";\nimport type { McpServerHealth } from \"#/types/mcp-health\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport { displayErrorToast } from \"#/utils/custom-toast-handlers\";\nimport type { MarketplaceEntry } from \"#/utils/mcp-marketplace-utils\";\nimport { makeMcpTestErrorMessage } from \"#/utils/mcp-test-error-message\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\nimport { cn } from \"#/utils/utils\";\n\ninterface McpServerHealthSectionProps {\n  server: MCPServerConfig;\n  catalog: MarketplaceEntry | undefined;\n  onEdit: () => void;\n}\n\nconst DOT_CLASS_BY_STATUS: Record<McpServerHealth[\"status\"], string> = {\n  unchecked: \"bg-[var(--oh-text-tertiary)]\",\n  checking: \"bg-[var(--oh-interactive-selected)] animate-pulse\",\n  healthy: \"bg-[var(--oh-status-success)]\",\n  failed: \"bg-red-500\",\n};\n\nconst actionClassName =\n  \"text-xs text-[var(--oh-muted)] underline transition-colors hover:text-white disabled:cursor-not-allowed disabled:opacity-60\";\n\nfunction getDotStatus(health: McpServerHealth): string {\n  if (health.status === \"healthy\") {\n    return health.verification === \"verified\"\n      ? \"healthy\"\n      : \"healthy-connectivity\";\n  }\n  return health.status;\n}\n\nfunction getStatusLabel(\n  t: TFunction<\"openhands\">,\n  health: McpServerHealth,\n): string {\n  switch (health.status) {\n    case \"checking\":\n      return t(I18nKey.MCP$HEALTH_STATUS_CHECKING);\n    case \"healthy\":\n      return health.verification === \"verified\"\n        ? t(I18nKey.MCP$HEALTH_STATUS_VERIFIED, { count: health.toolCount })\n        : t(I18nKey.MCP$HEALTH_STATUS_CONNECTIVITY_ONLY);\n    case \"failed\":\n      return makeMcpTestErrorMessage(t, health.kind, health.error);\n    default:\n      return t(I18nKey.MCP$HEALTH_STATUS_UNCHECKED);\n  }\n}\n\n/**\n * Connection-health row for an installed server card: status dot + label,\n * a Test connection / Retry action, and — on failure — the relevant\n * recovery actions (fix credentials, re-run OAuth, open the docs).\n *\n * Renders nothing for cloud backends: the test endpoint only exists on the\n * local agent-server (`McpService.testServer` short-circuits cloud with a\n * synthetic success that must not be presented as a health verdict).\n */\nexport function McpServerHealthSection({\n  server,\n  catalog,\n  onEdit,\n}: McpServerHealthSectionProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { backend } = useActiveBackend();\n  const { health, probe, reauthorize } = useMcpServerHealth(server);\n  const { mutate: updateMcpServer } = useUpdateMcpServer();\n\n  if (backend.kind === \"cloud\") return null;\n\n  const isChecking = health.status === \"checking\";\n  const isFailed = health.status === \"failed\";\n  const label = getStatusLabel(t, health);\n\n  const handleReauthorize = async () => {\n    const result = await reauthorize();\n    if (\n      !result?.ok ||\n      !result.oauth_state ||\n      server.auth?.strategy !== \"oauth2\"\n    ) {\n      return;\n    }\n    // Persist the refreshed tokens, mirroring the editor's OAuth save path.\n    const serverToSave: MCPServerConfig = {\n      ...server,\n      auth: { ...server.auth, state: result.oauth_state },\n    };\n    updateMcpServer(\n      { serverId: server.id, server: serverToSave },\n      {\n        // The update mutation clears this server's health entry; re-seed it\n        // from the probe that just succeeded so the verdict survives the save.\n        onSuccess: () => seedMcpServerHealth(serverToSave, result, []),\n        onError: (err: unknown) =>\n          displayErrorToast(\n            retrieveAxiosErrorMessage(err as AxiosError) ||\n              t(I18nKey.ERROR$GENERIC),\n          ),\n      },\n    );\n  };\n\n  return (\n    // Propagation stopper: the card root is a role=\"button\" that opens the\n    // editor on click/Enter; interactions inside the health row must not\n    // double as \"edit server\".\n    <div\n      data-testid={`mcp-server-health-${server.id}`}\n      role=\"presentation\"\n      className=\"flex flex-col gap-1.5\"\n      onClick={(event) => event.stopPropagation()}\n      onKeyDown={(event) => event.stopPropagation()}\n    >\n      <div className=\"flex items-center gap-2\">\n        <span\n          data-testid=\"mcp-health-dot\"\n          data-status={getDotStatus(health)}\n          aria-hidden=\"true\"\n          className={cn(\n            \"inline-block h-2 w-2 shrink-0 rounded-full\",\n            DOT_CLASS_BY_STATUS[health.status],\n          )}\n        />\n        <p\n          data-testid={`mcp-health-label-${server.id}`}\n          className={cn(\n            \"line-clamp-2 break-words text-xs\",\n            isFailed ? \"text-red-500\" : \"text-tertiary-alt\",\n          )}\n          title={label}\n        >\n          {label}\n        </p>\n      </div>\n\n      {health.status === \"healthy\" &&\n      health.verification === \"connectivity-only\" ? (\n        <p className=\"text-xs text-tertiary-light\">\n          {t(I18nKey.MCP$HEALTH_CONNECTIVITY_ONLY_HINT)}\n        </p>\n      ) : null}\n\n      <div className=\"flex flex-wrap items-center gap-3\">\n        <button\n          type=\"button\"\n          data-testid={`mcp-health-probe-${server.id}`}\n          className={actionClassName}\n          onClick={() => void probe()}\n          disabled={isChecking}\n        >\n          {isFailed ? t(I18nKey.MCP$HEALTH_RETRY) : t(I18nKey.MCP$TEST_BUTTON)}\n        </button>\n        {isFailed && health.kind === \"credentials\" ? (\n          <button\n            type=\"button\"\n            data-testid={`mcp-health-update-credentials-${server.id}`}\n            className={actionClassName}\n            onClick={onEdit}\n          >\n            {t(I18nKey.MCP$HEALTH_UPDATE_CREDENTIALS)}\n          </button>\n        ) : null}\n        {isFailed && server.auth?.strategy === \"oauth2\" ? (\n          <button\n            type=\"button\"\n            data-testid={`mcp-health-reauthorize-${server.id}`}\n            className={actionClassName}\n            onClick={() => void handleReauthorize()}\n          >\n            {t(I18nKey.MCP$HEALTH_REAUTHORIZE)}\n          </button>\n        ) : null}\n        {isFailed && catalog?.docsUrl ? (\n          <a\n            href={catalog.docsUrl}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className={actionClassName}\n          >\n            {t(I18nKey.MCP$VIEW_DOCS)}\n          </a>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}