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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import type { McpCatalogEntry as MarketplaceEntry } from "@openhands/extensions/mcps";
+import type { IntegrationCatalogEntry as MarketplaceEntry } from "@openhands/extensions/integrations";
 interface InstallServerModalProps {
     entry: MarketplaceEntry;
     onClose: () => void;

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

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

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