@openhands/agent-canvas 1.0.0-alpha.6 → 1.0.0-alpha.8

package/dist/components/features/mcp-page/custom-server-editor.js

@@ -7,71 +7,94 @@ import { retrieveAxiosErrorMessage as o } from "../../../utils/retrieve-axios-er
 import { ConfirmationModal as s } from "../../shared/modals/confirmation-modal.js";
 import { useDeleteMcpServer as c } from "../../../hooks/mutation/use-delete-mcp-server.js";
 import { useAddMcpServer as l } from "../../../hooks/mutation/use-add-mcp-server.js";
-import { MCPServerForm as u } from "../settings/mcp-settings/mcp-server-form.js";
-import { useUpdateMcpServer as d } from "../../../hooks/mutation/use-update-mcp-server.js";
-import f from "react";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useTestMcpServer as u } from "../../../hooks/mutation/use-test-mcp-server.js";
+import { MCPServerForm as d } from "../settings/mcp-settings/mcp-server-form.js";
+import { useUpdateMcpServer as f } from "../../../hooks/mutation/use-update-mcp-server.js";
+import p from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/features/mcp-page/custom-server-editor.tsx
-function g({ server: g, existingServers: _, onClose: v }) {
-	let { t: y } = e("openhands"), { mutate: b, isPending: x } = l(), { mutate: S, isPending: C } = d(), { mutate: w, isPending: T } = c(), [E, D] = f.useState(!1), O = !!g.id, k = x || C || T, A = k || E, j = (e) => {
-		n(o(e) || y(t.ERROR$GENERIC));
+function _({ server: _, existingServers: v, onClose: y }) {
+	let { t: b } = e("openhands"), { mutate: x, isPending: S } = l(), { mutate: C, isPending: w } = f(), { mutate: T, isPending: E } = c(), { mutate: D, isPending: O, data: k, reset: A } = u(), [j, M] = p.useState(!1), N = !!_.id, P = S || w || E, F = P || O || j, I = (e) => {
+		switch (e.error_kind) {
+			case "timeout": return b(t.MCP$TEST_ERROR_TIMEOUT);
+			case "connection": return b(t.MCP$TEST_ERROR_CONNECTION);
+			default: return b(t.MCP$TEST_ERROR_UNKNOWN, { error: e.error });
+		}
+	}, L = p.useMemo(() => k ? k.ok ? {
+		ok: !0,
+		text: b(t.MCP$TEST_SUCCESS, { count: k.tools.length })
+	} : {
+		ok: !1,
+		text: I(k)
+	} : null, [k, b]), R = (e) => {
+		n(o(e) || b(t.ERROR$GENERIC));
 	};
-	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(i, {
-		onClose: A ? void 0 : v,
-		closeOnEscape: !A,
-		"aria-label": y(O ? t.MCP$EDIT_CUSTOM_TITLE : t.MCP$ADD_CUSTOM_TITLE),
-		children: /* @__PURE__ */ h("div", {
+	return /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(i, {
+		onClose: F ? void 0 : y,
+		closeOnEscape: !F,
+		"aria-label": b(N ? t.MCP$EDIT_CUSTOM_TITLE : t.MCP$ADD_CUSTOM_TITLE),
+		children: /* @__PURE__ */ g("div", {
 			"data-testid": "mcp-custom-editor",
 			className: "relative bg-base-secondary p-6 rounded-xl border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[90vh] overflow-y-auto custom-scrollbar",
 			children: [
-				/* @__PURE__ */ m(a, {
-					onClose: v,
+				/* @__PURE__ */ h(a, {
+					onClose: y,
 					testId: "mcp-custom-editor-close",
-					disabled: A
+					disabled: F
 				}),
-				/* @__PURE__ */ m("h2", {
+				/* @__PURE__ */ h("h2", {
 					className: "mb-4 pr-6 text-lg font-semibold",
-					children: y(O ? t.MCP$EDIT_CUSTOM_TITLE : t.MCP$ADD_CUSTOM_TITLE)
+					children: b(N ? t.MCP$EDIT_CUSTOM_TITLE : t.MCP$ADD_CUSTOM_TITLE)
 				}),
-				/* @__PURE__ */ m(u, {
-					mode: O ? "edit" : "add",
-					server: O ? g : void 0,
-					existingServers: _,
+				/* @__PURE__ */ h(d, {
+					mode: N ? "edit" : "add",
+					server: N ? _ : void 0,
+					existingServers: v,
 					onSubmit: (e) => {
-						O ? S({
-							serverId: g.id,
-							server: e
-						}, {
-							onSuccess: v,
-							onError: j
-						}) : b(e, {
-							onSuccess: v,
-							onError: j
+						A(), D(e, {
+							onSuccess: (t) => {
+								t.ok && (N ? C({
+									serverId: _.id,
+									server: e
+								}, {
+									onSuccess: y,
+									onError: R
+								}) : x(e, {
+									onSuccess: y,
+									onError: R
+								}));
+							},
+							onError: R
 						});
 					},
-					onCancel: v,
-					onDelete: O ? () => D(!0) : void 0,
-					isActionDisabled: k
+					onCancel: y,
+					onDelete: N ? () => M(!0) : void 0,
+					isActionDisabled: P,
+					onTest: (e) => {
+						D(e);
+					},
+					isTestPending: O,
+					testMessage: L
 				})
 			]
 		})
-	}), E ? /* @__PURE__ */ m(s, {
-		text: y(t.SETTINGS$MCP_CONFIRM_DELETE),
-		onCancel: () => D(!1),
+	}), j ? /* @__PURE__ */ h(s, {
+		text: b(t.SETTINGS$MCP_CONFIRM_DELETE),
+		onCancel: () => M(!1),
 		onConfirm: () => {
-			w(g, {
+			T(_, {
 				onSuccess: () => {
-					r(y(t.MCP$REMOVE_SUCCESS)), D(!1), v();
+					r(b(t.MCP$REMOVE_SUCCESS)), M(!1), y();
 				},
 				onError: (e) => {
-					j(e), D(!1);
+					R(e), M(!1);
 				}
 			});
 		},
-		isConfirming: T
+		isConfirming: E
 	}) : null] });
 }
 //#endregion
-export { g as CustomServerEditor };
+export { _ as CustomServerEditor };
 
 //# sourceMappingURL=custom-server-editor.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"custom-server-editor.js","names":[],"sources":["../../../../src/components/features/mcp-page/custom-server-editor.tsx"],"sourcesContent":["import React from \"react\";\nimport { AxiosError } from \"axios\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { MCPServerForm } from \"#/components/features/settings/mcp-settings/mcp-server-form\";\nimport { useAddMcpServer } from \"#/hooks/mutation/use-add-mcp-server\";\nimport { useUpdateMcpServer } from \"#/hooks/mutation/use-update-mcp-server\";\nimport { useDeleteMcpServer } from \"#/hooks/mutation/use-delete-mcp-server\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport {\n  displayErrorToast,\n  displaySuccessToast,\n} from \"#/utils/custom-toast-handlers\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\n\ninterface CustomServerEditorProps {\n  server: MCPServerConfig;\n  existingServers: MCPServerConfig[];\n  onClose: () => void;\n}\n\n/**\n * Modal wrapper around `MCPServerForm` so users can hand-author\n * arbitrary stdio / SSE / SHTTP entries without reaching for raw JSON.\n * An empty `server.id` means \"Add new\".\n */\nexport function CustomServerEditor({\n  server,\n  existingServers,\n  onClose,\n}: CustomServerEditorProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { mutate: addMcpServer, isPending: isAdding } = useAddMcpServer();\n  const { mutate: updateMcpServer, isPending: isUpdating } =\n    useUpdateMcpServer();\n  const { mutate: deleteMcpServer, isPending: isDeleting } =\n    useDeleteMcpServer();\n  const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);\n\n  const isEditing = !!server.id;\n  const isPending = isAdding || isUpdating || isDeleting;\n  const isDismissBlocked = isPending || showDeleteConfirm;\n\n  // Shared error handler so both add and update surface backend errors\n  // as a toast instead of failing silently — previously these calls\n  // had no `onError` and the modal closed even on a 4xx/5xx, leaving\n  // the user to discover the failure on the next page load.\n  const handleError = (err: unknown) => {\n    const message = retrieveAxiosErrorMessage(err as AxiosError);\n    displayErrorToast(message || t(I18nKey.ERROR$GENERIC));\n  };\n\n  const handleSubmit = (payload: MCPServerConfig) => {\n    if (isEditing) {\n      updateMcpServer(\n        { serverId: server.id, server: payload },\n        { onSuccess: onClose, onError: handleError },\n      );\n    } else {\n      addMcpServer(payload, { onSuccess: onClose, onError: handleError });\n    }\n  };\n\n  const handleConfirmDelete = () => {\n    deleteMcpServer(server, {\n      onSuccess: () => {\n        displaySuccessToast(t(I18nKey.MCP$REMOVE_SUCCESS));\n        setShowDeleteConfirm(false);\n        onClose();\n      },\n      onError: (err) => {\n        handleError(err);\n        setShowDeleteConfirm(false);\n      },\n    });\n  };\n\n  return (\n    <>\n      <ModalBackdrop\n        // Block backdrop-click / Escape from dismissing the modal while\n        // a mutation is in flight — closing mid-request would orphan\n        // the request and leave the user with no error feedback.\n        onClose={isDismissBlocked ? undefined : onClose}\n        closeOnEscape={!isDismissBlocked}\n        aria-label={\n          isEditing\n            ? t(I18nKey.MCP$EDIT_CUSTOM_TITLE)\n            : t(I18nKey.MCP$ADD_CUSTOM_TITLE)\n        }\n      >\n        <div\n          data-testid=\"mcp-custom-editor\"\n          className=\"relative bg-base-secondary p-6 rounded-xl border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[90vh] overflow-y-auto custom-scrollbar\"\n        >\n          <ModalCloseButton\n            onClose={onClose}\n            testId=\"mcp-custom-editor-close\"\n            disabled={isDismissBlocked}\n          />\n          <h2 className=\"mb-4 pr-6 text-lg font-semibold\">\n            {isEditing\n              ? t(I18nKey.MCP$EDIT_CUSTOM_TITLE)\n              : t(I18nKey.MCP$ADD_CUSTOM_TITLE)}\n          </h2>\n          <MCPServerForm\n            mode={isEditing ? \"edit\" : \"add\"}\n            server={isEditing ? server : undefined}\n            existingServers={existingServers}\n            onSubmit={handleSubmit}\n            onCancel={onClose}\n            onDelete={isEditing ? () => setShowDeleteConfirm(true) : undefined}\n            isActionDisabled={isPending}\n          />\n        </div>\n      </ModalBackdrop>\n\n      {showDeleteConfirm ? (\n        <ConfirmationModal\n          text={t(I18nKey.SETTINGS$MCP_CONFIRM_DELETE)}\n          onCancel={() => setShowDeleteConfirm(false)}\n          onConfirm={handleConfirmDelete}\n          isConfirming={isDeleting}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA6BA,SAAgB,EAAmB,EACjC,WACA,oBACA,cAC0B;CAC1B,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,QAAQ,GAAc,WAAW,MAAa,GAAiB,EACjE,EAAE,QAAQ,GAAiB,WAAW,MAC1C,GAAoB,EAChB,EAAE,QAAQ,GAAiB,WAAW,MAC1C,GAAoB,EAChB,CAAC,GAAmB,KAAwB,EAAM,SAAS,GAAM,EAEjE,IAAY,CAAC,CAAC,EAAO,IACrB,IAAY,KAAY,KAAc,GACtC,IAAmB,KAAa,GAMhC,KAAe,MAAiB;AAEpC,IADgB,EAA0B,EACxB,IAAW,EAAE,EAAQ,cAAc,CAAC;;AA4BxD,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAIE,SAAS,IAAmB,KAAA,IAAY;EACxC,eAAe,CAAC;EAChB,cAEM,EADJ,IACM,EAAQ,wBACR,EAAQ,qBAAqB;YAGrC,kBAAC,OAAD;GACE,eAAY;GACZ,WAAU;aAFZ;IAIE,kBAAC,GAAD;KACW;KACT,QAAO;KACP,UAAU;KACV,CAAA;IACF,kBAAC,MAAD;KAAI,WAAU;eAER,EADH,IACK,EAAQ,wBACR,EAAQ,qBAAqB;KAChC,CAAA;IACL,kBAAC,GAAD;KACE,MAAM,IAAY,SAAS;KAC3B,QAAQ,IAAY,IAAS,KAAA;KACZ;KACjB,WAzDY,MAA6B;AACjD,MAAI,IACF,EACE;OAAE,UAAU,EAAO;OAAI,QAAQ;OAAS,EACxC;OAAE,WAAW;OAAS,SAAS;OAAa,CAC7C,GAED,EAAa,GAAS;OAAE,WAAW;OAAS,SAAS;OAAa,CAAC;;KAmD7D,UAAU;KACV,UAAU,UAAkB,EAAqB,GAAK,GAAG,KAAA;KACzD,kBAAkB;KAClB,CAAA;IACE;;EACQ,CAAA,EAEf,IACC,kBAAC,GAAD;EACE,MAAM,EAAE,EAAQ,4BAA4B;EAC5C,gBAAgB,EAAqB,GAAM;EAC3C,iBA1D0B;AAChC,KAAgB,GAAQ;IACtB,iBAAiB;AAGf,KAFA,EAAoB,EAAE,EAAQ,mBAAmB,CAAC,EAClD,EAAqB,GAAM,EAC3B,GAAS;;IAEX,UAAU,MAAQ;AAEhB,KADA,EAAY,EAAI,EAChB,EAAqB,GAAM;;IAE9B,CAAC;;EAgDI,cAAc;EACd,CAAA,GACA,KACH,EAAA,CAAA"}
+{"version":3,"file":"custom-server-editor.js","names":[],"sources":["../../../../src/components/features/mcp-page/custom-server-editor.tsx"],"sourcesContent":["import React from \"react\";\nimport { AxiosError } from \"axios\";\nimport { useTranslation } from \"react-i18next\";\nimport type { MCPTestFailure } from \"@openhands/typescript-client\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport {\n  MCPServerForm,\n  type TestMessage,\n} from \"#/components/features/settings/mcp-settings/mcp-server-form\";\nimport { useAddMcpServer } from \"#/hooks/mutation/use-add-mcp-server\";\nimport { useUpdateMcpServer } from \"#/hooks/mutation/use-update-mcp-server\";\nimport { useDeleteMcpServer } from \"#/hooks/mutation/use-delete-mcp-server\";\nimport { useTestMcpServer } from \"#/hooks/mutation/use-test-mcp-server\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport {\n  displayErrorToast,\n  displaySuccessToast,\n} from \"#/utils/custom-toast-handlers\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\n\ninterface CustomServerEditorProps {\n  server: MCPServerConfig;\n  existingServers: MCPServerConfig[];\n  onClose: () => void;\n}\n\n/**\n * Modal wrapper around `MCPServerForm` so users can hand-author\n * arbitrary stdio / SSE / SHTTP entries without reaching for raw JSON.\n * An empty `server.id` means \"Add new\".\n */\nexport function CustomServerEditor({\n  server,\n  existingServers,\n  onClose,\n}: CustomServerEditorProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { mutate: addMcpServer, isPending: isAdding } = useAddMcpServer();\n  const { mutate: updateMcpServer, isPending: isUpdating } =\n    useUpdateMcpServer();\n  const { mutate: deleteMcpServer, isPending: isDeleting } =\n    useDeleteMcpServer();\n  const {\n    mutate: testServer,\n    isPending: isTesting,\n    data: testResult,\n    reset: resetTest,\n  } = useTestMcpServer();\n  const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);\n\n  const isEditing = !!server.id;\n  const isPending = isAdding || isUpdating || isDeleting;\n  const isDismissBlocked = isPending || isTesting || showDeleteConfirm;\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 testMessage: TestMessage | null = React.useMemo(() => {\n    if (!testResult) return null;\n    if (testResult.ok) {\n      return {\n        ok: true,\n        text: t(I18nKey.MCP$TEST_SUCCESS, { count: testResult.tools.length }),\n      };\n    }\n    return { ok: false, text: makeTestErrorMessage(testResult) };\n  }, [testResult, t]);\n\n  // Shared error handler so both add and update surface backend errors\n  // as a toast instead of failing silently — previously these calls\n  // had no `onError` and the modal closed even on a 4xx/5xx, leaving\n  // the user to discover the failure on the next page load.\n  const handleError = (err: unknown) => {\n    const message = retrieveAxiosErrorMessage(err as AxiosError);\n    displayErrorToast(message || t(I18nKey.ERROR$GENERIC));\n  };\n\n  const handleSubmit = (payload: MCPServerConfig) => {\n    resetTest();\n    testServer(payload, {\n      onSuccess: (result) => {\n        if (!result.ok) {\n          // Test failed — modal stays open, error shown via testMessage.\n          return;\n        }\n        if (isEditing) {\n          updateMcpServer(\n            { serverId: server.id, server: payload },\n            { onSuccess: onClose, onError: handleError },\n          );\n        } else {\n          addMcpServer(payload, { onSuccess: onClose, onError: handleError });\n        }\n      },\n      onError: handleError,\n    });\n  };\n\n  const handleTestClick = (payload: MCPServerConfig) => {\n    testServer(payload);\n  };\n\n  const handleConfirmDelete = () => {\n    deleteMcpServer(server, {\n      onSuccess: () => {\n        displaySuccessToast(t(I18nKey.MCP$REMOVE_SUCCESS));\n        setShowDeleteConfirm(false);\n        onClose();\n      },\n      onError: (err) => {\n        handleError(err);\n        setShowDeleteConfirm(false);\n      },\n    });\n  };\n\n  return (\n    <>\n      <ModalBackdrop\n        // Block backdrop-click / Escape from dismissing the modal while\n        // a mutation is in flight — closing mid-request would orphan\n        // the request and leave the user with no error feedback.\n        onClose={isDismissBlocked ? undefined : onClose}\n        closeOnEscape={!isDismissBlocked}\n        aria-label={\n          isEditing\n            ? t(I18nKey.MCP$EDIT_CUSTOM_TITLE)\n            : t(I18nKey.MCP$ADD_CUSTOM_TITLE)\n        }\n      >\n        <div\n          data-testid=\"mcp-custom-editor\"\n          className=\"relative bg-base-secondary p-6 rounded-xl border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[90vh] overflow-y-auto custom-scrollbar\"\n        >\n          <ModalCloseButton\n            onClose={onClose}\n            testId=\"mcp-custom-editor-close\"\n            disabled={isDismissBlocked}\n          />\n          <h2 className=\"mb-4 pr-6 text-lg font-semibold\">\n            {isEditing\n              ? t(I18nKey.MCP$EDIT_CUSTOM_TITLE)\n              : t(I18nKey.MCP$ADD_CUSTOM_TITLE)}\n          </h2>\n          <MCPServerForm\n            mode={isEditing ? \"edit\" : \"add\"}\n            server={isEditing ? server : undefined}\n            existingServers={existingServers}\n            onSubmit={handleSubmit}\n            onCancel={onClose}\n            onDelete={isEditing ? () => setShowDeleteConfirm(true) : undefined}\n            isActionDisabled={isPending}\n            onTest={handleTestClick}\n            isTestPending={isTesting}\n            testMessage={testMessage}\n          />\n        </div>\n      </ModalBackdrop>\n\n      {showDeleteConfirm ? (\n        <ConfirmationModal\n          text={t(I18nKey.SETTINGS$MCP_CONFIRM_DELETE)}\n          onCancel={() => setShowDeleteConfirm(false)}\n          onConfirm={handleConfirmDelete}\n          isConfirming={isDeleting}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkCA,SAAgB,EAAmB,EACjC,WACA,oBACA,cAC0B;CAC1B,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,QAAQ,GAAc,WAAW,MAAa,GAAiB,EACjE,EAAE,QAAQ,GAAiB,WAAW,MAC1C,GAAoB,EAChB,EAAE,QAAQ,GAAiB,WAAW,MAC1C,GAAoB,EAChB,EACJ,QAAQ,GACR,WAAW,GACX,MAAM,GACN,OAAO,MACL,GAAkB,EAChB,CAAC,GAAmB,KAAwB,EAAM,SAAS,GAAM,EAEjE,IAAY,CAAC,CAAC,EAAO,IACrB,IAAY,KAAY,KAAc,GACtC,IAAmB,KAAa,KAAa,GAE7C,KAAwB,MAAoC;AAChE,UAAQ,EAAQ,YAAhB;GACE,KAAK,UACH,QAAO,EAAE,EAAQ,uBAAuB;GAC1C,KAAK,aACH,QAAO,EAAE,EAAQ,0BAA0B;GAC7C,QACE,QAAO,EAAE,EAAQ,wBAAwB,EAAE,OAAO,EAAQ,OAAO,CAAC;;IAIlE,IAAkC,EAAM,cACvC,IACD,EAAW,KACN;EACL,IAAI;EACJ,MAAM,EAAE,EAAQ,kBAAkB,EAAE,OAAO,EAAW,MAAM,QAAQ,CAAC;EACtE,GAEI;EAAE,IAAI;EAAO,MAAM,EAAqB,EAAW;EAAE,GAPpC,MAQvB,CAAC,GAAY,EAAE,CAAC,EAMb,KAAe,MAAiB;AAEpC,IADgB,EAA0B,EACxB,IAAW,EAAE,EAAQ,cAAc,CAAC;;AA0CxD,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAIE,SAAS,IAAmB,KAAA,IAAY;EACxC,eAAe,CAAC;EAChB,cAEM,EADJ,IACM,EAAQ,wBACR,EAAQ,qBAAqB;YAGrC,kBAAC,OAAD;GACE,eAAY;GACZ,WAAU;aAFZ;IAIE,kBAAC,GAAD;KACW;KACT,QAAO;KACP,UAAU;KACV,CAAA;IACF,kBAAC,MAAD;KAAI,WAAU;eAER,EADH,IACK,EAAQ,wBACR,EAAQ,qBAAqB;KAChC,CAAA;IACL,kBAAC,GAAD;KACE,MAAM,IAAY,SAAS;KAC3B,QAAQ,IAAY,IAAS,KAAA;KACZ;KACjB,WAvEY,MAA6B;AAEjD,MADA,GAAW,EACX,EAAW,GAAS;OAClB,YAAY,MAAW;AAChB,UAAO,OAIR,IACF,EACE;SAAE,UAAU,EAAO;SAAI,QAAQ;SAAS,EACxC;SAAE,WAAW;SAAS,SAAS;SAAa,CAC7C,GAED,EAAa,GAAS;SAAE,WAAW;SAAS,SAAS;SAAa,CAAC;;OAGvE,SAAS;OACV,CAAC;;KAsDM,UAAU;KACV,UAAU,UAAkB,EAAqB,GAAK,GAAG,KAAA;KACzD,kBAAkB;KAClB,SAtDe,MAA6B;AACpD,QAAW,EAAQ;;KAsDX,eAAe;KACF;KACb,CAAA;IACE;;EACQ,CAAA,EAEf,IACC,kBAAC,GAAD;EACE,MAAM,EAAE,EAAQ,4BAA4B;EAC5C,gBAAgB,EAAqB,GAAM;EAC3C,iBA7D0B;AAChC,KAAgB,GAAQ;IACtB,iBAAiB;AAGf,KAFA,EAAoB,EAAE,EAAQ,mBAAmB,CAAC,EAClD,EAAqB,GAAM,EAC3B,GAAS;;IAEX,UAAU,MAAQ;AAEhB,KADA,EAAY,EAAI,EAChB,EAAqB,GAAM;;IAE9B,CAAC;;EAmDI,cAAc;EACd,CAAA,GACA,KACH,EAAA,CAAA"}

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

@@ -1,2 +1,2 @@
-const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../utils/custom-toast-handlers.cjs`),i=require(`../../shared/modals/modal-backdrop.cjs`),a=require(`../../shared/modals/modal-close-button.cjs`),o=require(`../settings/brand-button.cjs`),s=require(`../settings/settings-input.cjs`),c=require(`../../../utils/retrieve-axios-error-message.cjs`),l=require(`../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;