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

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

@@ -3,20 +3,23 @@ import { I18nKey as t } from "../../../i18n/declaration.js";
 import { displaySuccessToast as n } from "../../../utils/custom-toast-handlers.js";
 import r from "../../../node_modules/uuid/dist/v4.js";
 import { ModalBackdrop as i } from "../../shared/modals/modal-backdrop.js";
-import { ModalCloseButton as a } from "../../shared/modals/modal-close-button.js";
-import { BrandButton as o } from "../settings/brand-button.js";
-import { SettingsInput as s } from "../settings/settings-input.js";
-import { retrieveAxiosErrorMessage as c } from "../../../utils/retrieve-axios-error-message.js";
-import { getInstallableMcpConnectionOption as l } from "../../../utils/mcp-marketplace-utils.js";
-import { McpLogoBadge as u } from "../mcp-logo-badge.js";
-import { useAddMcpServer as d } from "../../../hooks/mutation/use-add-mcp-server.js";
-import { useTestMcpServer as f } from "../../../hooks/mutation/use-test-mcp-server.js";
-import p from "react";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { modalTitleLgClassName as a } from "../../../utils/modal-classes.js";
+import { ModalCloseButton as o } from "../../shared/modals/modal-close-button.js";
+import { BrandButton as s } from "../settings/brand-button.js";
+import { SettingsInput as c } from "../settings/settings-input.js";
+import { retrieveAxiosErrorMessage as l } from "../../../utils/retrieve-axios-error-message.js";
+import { getInstallableMcpConnectionOption as u } from "../../../utils/mcp-marketplace-utils.js";
+import { McpLogoBadge as d } from "../mcp-logo-badge.js";
+import { SaveAsSecretToggle as f } from "./save-as-secret-toggle.js";
+import { useAddMcpServer as p } from "../../../hooks/mutation/use-add-mcp-server.js";
+import { useTestMcpServer as m } from "../../../hooks/mutation/use-test-mcp-server.js";
+import { useSaveFieldsAsSecrets as h } from "../../../hooks/mutation/use-save-fields-as-secrets.js";
+import g from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/components/features/mcp-page/install-server-modal.tsx
-function _(e) {
+function b(e) {
 	let t = /\[([^\]]+)\]\(([^)]+)\)/g, n = [], r = 0;
-	for (let i of e.matchAll(t)) i.index > r && n.push(e.slice(r, i.index)), n.push(/* @__PURE__ */ h("a", {
+	for (let i of e.matchAll(t)) i.index > r && n.push(e.slice(r, i.index)), n.push(/* @__PURE__ */ v("a", {
 		href: /^https?:\/\//i.test(i[2]) ? i[2] : "#",
 		target: "_blank",
 		rel: "noreferrer",
@@ -25,30 +28,34 @@ function _(e) {
 	}, i.index)), r = i.index + i[0].length;
 	return r < e.length && n.push(e.slice(r)), n;
 }
-function v(e) {
+function x(e) {
 	return e?.transport.kind !== "shttp" && e?.transport.kind !== "sse" ? !1 : [
 		"api_key",
 		"bearer",
 		"basic"
 	].includes(e.auth.strategy);
 }
-function y(e) {
+function S(e) {
 	return e.transport.kind === "stdio" ? e.auth.apiKeyOptional ?? !1 : e.auth.apiKeyOptional ?? e.transport.apiKeyOptional ?? !1;
 }
-function b(e) {
-	let t = {}, n = l(e), r = n?.transport;
-	if (r?.kind === "stdio") {
-		for (let e of r.envFields ?? []) t[e.key] = "";
-		for (let e of r.argFields ?? []) t[e.key] = "";
-	} else v(n) && (t.api_key = "");
+function C(e) {
+	let t = {}, n = {}, r = u(e), i = r?.transport;
+	if (i?.kind === "stdio") {
+		for (let e of i.envFields ?? []) t[e.key] = "", n[e.key] = e.type === "password";
+		for (let e of i.argFields ?? []) t[e.key] = "";
+	} else x(r) && (t.api_key = "");
 	return {
 		values: t,
-		errors: {}
+		errors: {},
+		savedAsSecret: n
 	};
 }
-function x({ entry: x, onClose: S, onSuccess: C }) {
-	let { t: w } = e("openhands"), { mutate: T, isPending: E } = d(), { mutate: D, isPending: O } = f(), [k, A] = p.useState(() => b(x)), [j, M] = p.useState(null), N = l(x), P = N?.transport, F = O || E, I = (e, t) => {
-		A((n) => ({
+function w({ entry: w, onClose: T, onSuccess: E }) {
+	let { t: D } = e("openhands"), { mutate: O, isPending: k } = p(), { mutate: A, isPending: j } = m(), M = h(), [N, P] = g.useState(() => C(w)), F = g.useRef(N);
+	F.current = N;
+	let [I, L] = g.useState(null), R = u(w), z = R?.transport, B = j || k, V = (e, t) => {
+		P((n) => ({
+			...n,
 			values: {
 				...n.values,
 				[e]: t
@@ -57,56 +64,64 @@ function x({ entry: x, onClose: S, onSuccess: C }) {
 				...n.errors,
 				[e]: null
 			}
-		})), M(null);
-	}, L = (e) => {
+		})), L(null);
+	}, H = (e, t) => {
+		P((n) => ({
+			...n,
+			savedAsSecret: {
+				...n.savedAsSecret,
+				[e]: t
+			}
+		}));
+	}, U = (e) => {
 		switch (e.error_kind) {
-			case "timeout": return w(t.MCP$TEST_ERROR_TIMEOUT);
-			case "connection": return w(t.MCP$TEST_ERROR_CONNECTION);
-			default: return w(t.MCP$TEST_ERROR_UNKNOWN, { error: e.error });
+			case "timeout": return D(t.MCP$TEST_ERROR_TIMEOUT);
+			case "connection": return D(t.MCP$TEST_ERROR_CONNECTION);
+			default: return D(t.MCP$TEST_ERROR_UNKNOWN, { error: e.error });
 		}
-	}, R = (e) => {
-		D(e, {
+	}, W = (e) => {
+		A(e, {
 			onSuccess: (r) => {
 				if (!r.ok) {
-					M(L(r));
+					L(U(r));
 					return;
 				}
-				T(e, {
+				O(e, {
 					onSuccess: () => {
-						n(w(t.MCP$INSTALL_SUCCESS)), C?.(x), S();
+						n(D(t.MCP$INSTALL_SUCCESS)), E?.(w), T(), z?.kind === "stdio" && M(z.envFields ?? [], F.current.values, F.current.savedAsSecret);
 					},
 					onError: (e) => {
-						M(c(e) || w(t.ERROR$GENERIC));
+						L(l(e) || D(t.ERROR$GENERIC));
 					}
 				});
 			},
 			onError: (e) => {
-				M(c(e) || w(t.ERROR$GENERIC));
+				L(l(e) || D(t.ERROR$GENERIC));
 			}
 		});
-	}, z = () => {
-		if (P?.kind !== "shttp" && P?.kind !== "sse" || !N) return;
-		let e = k.values.api_key?.trim() ?? "", n = v(N);
-		if (n && !y(N) && !e) {
-			A((e) => ({
+	}, G = () => {
+		if (z?.kind !== "shttp" && z?.kind !== "sse" || !R) return;
+		let e = N.values.api_key?.trim() ?? "", n = x(R);
+		if (n && !S(R) && !e) {
+			P((e) => ({
 				...e,
-				errors: { api_key: w(t.MCP$ERROR_FIELD_REQUIRED) }
+				errors: { api_key: D(t.MCP$ERROR_FIELD_REQUIRED) }
 			}));
 			return;
 		}
-		R({
-			id: `${P.kind}-${r()}`,
-			type: P.kind,
-			url: P.url,
+		W({
+			id: `${z.kind}-${r()}`,
+			type: z.kind,
+			url: z.url,
 			...n && e && { api_key: e }
 		});
-	}, B = () => {
-		if (P?.kind !== "stdio") return;
-		let e = P, n = {};
-		for (let r of e.envFields ?? []) r.required && !(k.values[r.key] ?? "").trim() && (n[r.key] = w(t.MCP$ERROR_FIELD_REQUIRED));
-		for (let r of e.argFields ?? []) r.required && !(k.values[r.key] ?? "").trim() && (n[r.key] = w(t.MCP$ERROR_FIELD_REQUIRED));
+	}, K = () => {
+		if (z?.kind !== "stdio") return;
+		let e = z, n = {};
+		for (let r of e.envFields ?? []) r.required && !(N.values[r.key] ?? "").trim() && (n[r.key] = D(t.MCP$ERROR_FIELD_REQUIRED));
+		for (let r of e.argFields ?? []) r.required && !(N.values[r.key] ?? "").trim() && (n[r.key] = D(t.MCP$ERROR_FIELD_REQUIRED));
 		if (Object.values(n).some(Boolean)) {
-			A((e) => ({
+			P((e) => ({
 				...e,
 				errors: n
 			}));
@@ -114,15 +129,15 @@ function x({ entry: x, onClose: S, onSuccess: C }) {
 		}
 		let i = {};
 		for (let t of e.envFields ?? []) {
-			let e = k.values[t.key]?.trim();
+			let e = N.values[t.key]?.trim();
 			e && (i[t.key] = e);
 		}
 		let a = [];
 		for (let t of e.argFields ?? []) {
-			let e = k.values[t.key]?.trim();
+			let e = N.values[t.key]?.trim();
 			if (e) for (let t of e.split(/\s+/)) t && a.push(t);
 		}
-		R({
+		W({
 			id: `stdio-${r()}`,
 			type: "stdio",
 			name: e.serverName,
@@ -131,162 +146,167 @@ function x({ entry: x, onClose: S, onSuccess: C }) {
 			...Object.keys(i).length > 0 && { env: i }
 		});
 	};
-	return /* @__PURE__ */ h(i, {
-		onClose: S,
-		"aria-label": x.name,
-		children: /* @__PURE__ */ g("form", {
+	return /* @__PURE__ */ v(i, {
+		onClose: T,
+		"aria-label": w.name,
+		children: /* @__PURE__ */ y("form", {
 			"data-testid": "mcp-install-modal",
-			"data-marketplace-id": x.id,
-			onSubmit: (e) => (e.preventDefault(), M(null), P?.kind === "shttp" || P?.kind === "sse" ? z() : B()),
+			"data-marketplace-id": w.id,
+			onSubmit: (e) => (e.preventDefault(), L(null), z?.kind === "shttp" || z?.kind === "sse" ? G() : K()),
 			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__ */ h(a, {
-					onClose: S,
+				/* @__PURE__ */ v(o, {
+					onClose: T,
 					testId: "mcp-install-modal-close",
-					disabled: F
+					disabled: B
 				}),
-				/* @__PURE__ */ g("div", {
+				/* @__PURE__ */ y("div", {
 					className: "flex items-start gap-3 pr-6",
-					children: [/* @__PURE__ */ h(u, { entry: x }), /* @__PURE__ */ g("div", {
+					children: [/* @__PURE__ */ v(d, { entry: w }), /* @__PURE__ */ y("div", {
 						className: "flex flex-col flex-1",
-						children: [/* @__PURE__ */ h("h2", {
-							className: "text-lg font-semibold",
-							children: x.name
-						}), /* @__PURE__ */ h("p", {
+						children: [/* @__PURE__ */ v("h2", {
+							className: a,
+							children: w.name
+						}), /* @__PURE__ */ v("p", {
 							className: "text-xs text-tertiary-light",
-							children: x.description
+							children: w.description
 						})]
 					})]
 				}),
-				x.installHint && /* @__PURE__ */ h("p", {
+				w.installHint && /* @__PURE__ */ v("p", {
 					className: "text-xs text-tertiary-light",
-					children: x.installHint
+					children: w.installHint
 				}),
-				x.docsUrl && /* @__PURE__ */ h("a", {
-					href: x.docsUrl,
+				w.docsUrl && /* @__PURE__ */ v("a", {
+					href: w.docsUrl,
 					target: "_blank",
 					rel: "noreferrer",
 					className: "text-xs text-[var(--oh-muted)] hover:text-white hover:underline self-start transition-colors",
-					children: w(t.MCP$VIEW_DOCS)
+					children: D(t.MCP$VIEW_DOCS)
 				}),
-				/* @__PURE__ */ h("div", {
+				/* @__PURE__ */ v("div", {
 					className: "flex flex-col gap-3",
 					children: (() => {
-						if (P?.kind === "shttp" || P?.kind === "sse") {
-							let e = v(N), n = N ? y(N) : !1;
-							return /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(s, {
+						if (z?.kind === "shttp" || z?.kind === "sse") {
+							let e = x(R), n = R ? S(R) : !1;
+							return /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(c, {
 								testId: "mcp-install-field-url",
 								name: "url",
 								type: "url",
-								label: w(t.SETTINGS$MCP_URL),
-								value: P.url,
+								label: D(t.SETTINGS$MCP_URL),
+								value: z.url,
 								onChange: () => {},
 								isDisabled: !0,
 								className: "w-full"
-							}), e ? /* @__PURE__ */ g("div", {
+							}), e ? /* @__PURE__ */ y("div", {
 								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ h(s, {
+								children: [/* @__PURE__ */ v(c, {
 									testId: "mcp-install-field-api_key",
 									name: "api_key",
 									type: "password",
-									label: w(t.SETTINGS$MCP_API_KEY),
-									value: k.values.api_key ?? "",
-									onChange: (e) => I("api_key", e),
-									placeholder: w(t.SETTINGS$MCP_API_KEY_PLACEHOLDER),
+									label: D(t.SETTINGS$MCP_API_KEY),
+									value: N.values.api_key ?? "",
+									onChange: (e) => V("api_key", e),
+									placeholder: D(t.SETTINGS$MCP_API_KEY_PLACEHOLDER),
 									showOptionalTag: n,
 									required: !n,
 									className: "w-full"
-								}), k.errors.api_key && /* @__PURE__ */ h("p", {
+								}), N.errors.api_key && /* @__PURE__ */ v("p", {
 									className: "text-xs text-red-500",
-									children: k.errors.api_key
+									children: N.errors.api_key
 								})]
 							}) : null] });
 						}
-						if (P?.kind !== "stdio") return null;
-						let e = P;
-						return /* @__PURE__ */ g(m, { children: [
-							/* @__PURE__ */ h(s, {
+						if (z?.kind !== "stdio") return null;
+						let e = z;
+						return /* @__PURE__ */ y(_, { children: [
+							/* @__PURE__ */ v(c, {
 								testId: "mcp-install-field-command-readonly",
 								name: "command-readonly",
 								type: "text",
-								label: w(t.MCP$COMMAND_LABEL),
+								label: D(t.MCP$COMMAND_LABEL),
 								value: `${e.command} ${e.args.join(" ")}`.trim(),
 								onChange: () => {},
 								isDisabled: !0,
 								className: "w-full"
 							}),
-							(e.envFields ?? []).map((e) => /* @__PURE__ */ g("div", {
+							(e.envFields ?? []).map((e) => /* @__PURE__ */ y("div", {
 								className: "flex flex-col gap-1",
 								children: [
-									/* @__PURE__ */ h(s, {
+									/* @__PURE__ */ v(c, {
 										testId: `mcp-install-field-${e.key}`,
 										name: e.key,
 										type: e.type === "password" ? "password" : "text",
 										label: e.label,
-										value: k.values[e.key] ?? "",
-										onChange: (t) => I(e.key, t),
+										value: N.values[e.key] ?? "",
+										onChange: (t) => V(e.key, t),
 										placeholder: e.placeholder,
 										required: e.required,
 										showOptionalTag: !e.required,
 										className: "w-full"
 									}),
-									e.helperText && /* @__PURE__ */ h("p", {
+									e.helperText && /* @__PURE__ */ v("p", {
 										className: "text-xs text-tertiary-alt",
-										children: _(e.helperText)
+										children: b(e.helperText)
 									}),
-									k.errors[e.key] && /* @__PURE__ */ h("p", {
+									N.errors[e.key] && /* @__PURE__ */ v("p", {
 										className: "text-xs text-red-500",
-										children: k.errors[e.key]
+										children: N.errors[e.key]
+									}),
+									e.key in N.savedAsSecret && /* @__PURE__ */ v(f, {
+										fieldKey: e.key,
+										checked: N.savedAsSecret[e.key],
+										onToggle: (t) => H(e.key, t)
 									})
 								]
 							}, e.key)),
-							(e.argFields ?? []).map((e) => /* @__PURE__ */ g("div", {
+							(e.argFields ?? []).map((e) => /* @__PURE__ */ y("div", {
 								className: "flex flex-col gap-1",
 								children: [
-									/* @__PURE__ */ h(s, {
+									/* @__PURE__ */ v(c, {
 										testId: `mcp-install-field-${e.key}`,
 										name: e.key,
 										type: e.type === "password" ? "password" : "text",
 										label: e.label,
-										value: k.values[e.key] ?? "",
-										onChange: (t) => I(e.key, t),
+										value: N.values[e.key] ?? "",
+										onChange: (t) => V(e.key, t),
 										placeholder: e.placeholder,
 										required: e.required,
 										showOptionalTag: !e.required,
 										className: "w-full"
 									}),
-									e.helperText && /* @__PURE__ */ h("p", {
+									e.helperText && /* @__PURE__ */ v("p", {
 										className: "text-xs text-tertiary-alt",
-										children: _(e.helperText)
+										children: b(e.helperText)
 									}),
-									k.errors[e.key] && /* @__PURE__ */ h("p", {
+									N.errors[e.key] && /* @__PURE__ */ v("p", {
 										className: "text-xs text-red-500",
-										children: k.errors[e.key]
+										children: N.errors[e.key]
 									})
 								]
 							}, e.key))
 						] });
 					})()
 				}),
-				j && /* @__PURE__ */ h("p", {
+				I && /* @__PURE__ */ v("p", {
 					"data-testid": "mcp-install-modal-error",
 					className: "text-sm text-red-500 whitespace-pre-wrap",
-					children: j
+					children: I
 				}),
-				/* @__PURE__ */ g("div", {
+				/* @__PURE__ */ y("div", {
 					className: "flex justify-end gap-2 mt-2",
-					children: [/* @__PURE__ */ h(o, {
+					children: [/* @__PURE__ */ v(s, {
 						type: "button",
 						variant: "secondary",
-						onClick: S,
+						onClick: T,
 						testId: "mcp-install-cancel",
-						children: w(t.BUTTON$CANCEL)
-					}), /* @__PURE__ */ h(o, {
+						children: D(t.BUTTON$CANCEL)
+					}), /* @__PURE__ */ v(s, {
 						type: "submit",
 						variant: "primary",
-						isDisabled: F,
+						isDisabled: B,
 						testId: "mcp-install-submit",
-						children: w(O ? t.MCP$VERIFYING : E ? t.SETTINGS$SAVING : t.MCP$INSTALL_BUTTON)
+						children: D(j ? t.MCP$VERIFYING : k ? t.SETTINGS$SAVING : t.MCP$INSTALL_BUTTON)
 					})]
 				})
 			]
@@ -294,6 +314,6 @@ function x({ entry: x, onClose: S, onSuccess: C }) {
 	});
 }
 //#endregion
-export { x as InstallServerModal };
+export { w 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 { v4 as uuidv4 } from \"uuid\";\nimport type { MCPTestFailure } from \"@openhands/typescript-client\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { SettingsInput } from \"#/components/features/settings/settings-input\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { IntegrationCatalogEntry as MarketplaceEntry } from \"@openhands/extensions/integrations\";\nimport { McpLogoBadge } from \"#/components/features/mcp-logo-badge\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport { useAddMcpServer } from \"#/hooks/mutation/use-add-mcp-server\";\nimport { useTestMcpServer } from \"#/hooks/mutation/use-test-mcp-server\";\nimport { displaySuccessToast } from \"#/utils/custom-toast-handlers\";\nimport {\n  getInstallableMcpConnectionOption,\n  type McpMarketplaceConnectionOption,\n} from \"#/utils/mcp-marketplace-utils\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\n\n/**\n * Renders a helperText string as React nodes, converting any `[text](url)`\n * markdown links into real `<a>` elements. Plain text segments are left as-is.\n * Only `http:` and `https:` URLs are rendered as links; anything else falls\n * back to `#` to guard against `javascript:` / `data:` XSS vectors.\n */\nfunction renderHelperText(text: string): React.ReactNode {\n  const linkPattern = /\\[([^\\]]+)\\]\\(([^)]+)\\)/g;\n  const parts: React.ReactNode[] = [];\n  let lastIndex = 0;\n  for (const match of text.matchAll(linkPattern)) {\n    if (match.index > lastIndex) {\n      parts.push(text.slice(lastIndex, match.index));\n    }\n    parts.push(\n      <a\n        key={match.index}\n        href={/^https?:\\/\\//i.test(match[2]) ? match[2] : \"#\"}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        className=\"underline hover:text-white transition-colors\"\n      >\n        {match[1]}\n      </a>,\n    );\n    lastIndex = match.index + match[0].length;\n  }\n  if (lastIndex < text.length) {\n    parts.push(text.slice(lastIndex));\n  }\n  return parts;\n}\n\ninterface InstallServerModalProps {\n  entry: MarketplaceEntry;\n  onClose: () => void;\n  onSuccess?: (entry: MarketplaceEntry) => void;\n}\n\ninterface FieldState {\n  values: Record<string, string>;\n  errors: Record<string, string | null>;\n}\n\nfunction optionNeedsCredentialField(\n  option: McpMarketplaceConnectionOption | undefined,\n): boolean {\n  if (option?.transport.kind !== \"shttp\" && option?.transport.kind !== \"sse\") {\n    return false;\n  }\n  return [\"api_key\", \"bearer\", \"basic\"].includes(option.auth.strategy);\n}\n\nfunction isCredentialOptional(option: McpMarketplaceConnectionOption): boolean {\n  if (option.transport.kind === \"stdio\") {\n    return option.auth.apiKeyOptional ?? false;\n  }\n  return option.auth.apiKeyOptional ?? option.transport.apiKeyOptional ?? false;\n}\n\nfunction makeInitialState(entry: MarketplaceEntry): FieldState {\n  const values: Record<string, string> = {};\n  const option = getInstallableMcpConnectionOption(entry);\n  const template = option?.transport;\n  if (template?.kind === \"stdio\") {\n    for (const field of template.envFields ?? []) {\n      values[field.key] = \"\";\n    }\n    for (const field of template.argFields ?? []) {\n      values[field.key] = \"\";\n    }\n  } else if (optionNeedsCredentialField(option)) {\n    values.api_key = \"\";\n  }\n  return { values, errors: {} };\n}\n\n// The marketplace install modal is intentionally add-only: clicking\n// a catalog tile always appends a new server (the user might want\n// two Slack workspaces, two Postgres connections, etc.) even when\n// one of the same template kind is already installed. Editing an\n// existing server is reached via the installed-server-card's edit\n// button, which opens `CustomServerEditor` instead.\nexport function InstallServerModal({\n  entry,\n  onClose,\n  onSuccess,\n}: InstallServerModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { mutate: addMcpServer, isPending: isAdding } = useAddMcpServer();\n  const { mutate: testMcpServer, isPending: isTesting } = useTestMcpServer();\n\n  const [state, setState] = React.useState<FieldState>(() =>\n    makeInitialState(entry),\n  );\n  const [globalError, setGlobalError] = React.useState<string | null>(null);\n  const option = getInstallableMcpConnectionOption(entry);\n  const template = option?.transport;\n\n  const isPending = isTesting || isAdding;\n\n  const setValue = (key: string, value: string) => {\n    setState((prev) => ({\n      values: { ...prev.values, [key]: value },\n      errors: { ...prev.errors, [key]: null },\n    }));\n    setGlobalError(null);\n  };\n\n  const makeTestErrorMessage = (failure: MCPTestFailure): string => {\n    switch (failure.error_kind) {\n      case \"timeout\":\n        return t(I18nKey.MCP$TEST_ERROR_TIMEOUT);\n      case \"connection\":\n        return t(I18nKey.MCP$TEST_ERROR_CONNECTION);\n      default:\n        return t(I18nKey.MCP$TEST_ERROR_UNKNOWN, { error: failure.error });\n    }\n  };\n\n  const submitServer = (payload: MCPServerConfig) => {\n    testMcpServer(payload, {\n      onSuccess: (result) => {\n        if (!result.ok) {\n          setGlobalError(makeTestErrorMessage(result));\n          // Modal stays open — do NOT call onClose.\n          return;\n        }\n        addMcpServer(payload, {\n          onSuccess: () => {\n            displaySuccessToast(t(I18nKey.MCP$INSTALL_SUCCESS));\n            onSuccess?.(entry);\n            onClose();\n          },\n          onError: (err: unknown) => {\n            const message = retrieveAxiosErrorMessage(err as AxiosError);\n            setGlobalError(message || t(I18nKey.ERROR$GENERIC));\n          },\n        });\n      },\n      onError: (err: unknown) => {\n        const message = retrieveAxiosErrorMessage(err as AxiosError);\n        setGlobalError(message || t(I18nKey.ERROR$GENERIC));\n      },\n    });\n  };\n\n  // ------------------------------------------------------------------\n  // Per-template submit handlers. Each is small and self-contained:\n  // validate user input, build the payload, then hand off to\n  // submitServer.\n  // ------------------------------------------------------------------\n  const handleHttpServerSubmit = () => {\n    // TS narrows this branch to shttp|sse; the equality guard is a\n    // runtime/defensive belt to make the helper safe in isolation.\n    if (template?.kind !== \"shttp\" && template?.kind !== \"sse\") {\n      return;\n    }\n    if (!option) return;\n    const apiKey = state.values.api_key?.trim() ?? \"\";\n    const needsCredential = optionNeedsCredentialField(option);\n    if (needsCredential && !isCredentialOptional(option) && !apiKey) {\n      setState((prev) => ({\n        ...prev,\n        errors: { api_key: t(I18nKey.MCP$ERROR_FIELD_REQUIRED) },\n      }));\n      return;\n    }\n    const payload: MCPServerConfig = {\n      id: `${template.kind}-${uuidv4()}`,\n      type: template.kind,\n      url: template.url,\n      ...(needsCredential && apiKey && { api_key: apiKey }),\n    };\n    submitServer(payload);\n  };\n\n  const handleStdioSubmit = () => {\n    if (template?.kind !== \"stdio\") return;\n    const stdio = template;\n    const errors: Record<string, string | null> = {};\n\n    for (const field of stdio.envFields ?? []) {\n      if (field.required && !(state.values[field.key] ?? \"\").trim()) {\n        errors[field.key] = t(I18nKey.MCP$ERROR_FIELD_REQUIRED);\n      }\n    }\n    for (const field of stdio.argFields ?? []) {\n      if (field.required && !(state.values[field.key] ?? \"\").trim()) {\n        errors[field.key] = t(I18nKey.MCP$ERROR_FIELD_REQUIRED);\n      }\n    }\n    if (Object.values(errors).some(Boolean)) {\n      setState((prev) => ({ ...prev, errors }));\n      return;\n    }\n\n    const env: Record<string, string> = {};\n    for (const field of stdio.envFields ?? []) {\n      const v = state.values[field.key]?.trim();\n      if (v) env[field.key] = v;\n    }\n    const extraArgs: string[] = [];\n    for (const field of stdio.argFields ?? []) {\n      const v = state.values[field.key]?.trim();\n      if (v) {\n        // Filesystem-style multi-token input: split on whitespace.\n        for (const token of v.split(/\\s+/)) {\n          if (token) extraArgs.push(token);\n        }\n      }\n    }\n\n    const payload: MCPServerConfig = {\n      id: `stdio-${uuidv4()}`,\n      type: \"stdio\",\n      name: stdio.serverName,\n      command: stdio.command,\n      args: [...stdio.args, ...extraArgs],\n      ...(Object.keys(env).length > 0 && { env }),\n    };\n    submitServer(payload);\n  };\n\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setGlobalError(null);\n    if (template?.kind === \"shttp\" || template?.kind === \"sse\") {\n      return handleHttpServerSubmit();\n    }\n    return handleStdioSubmit();\n  };\n\n  const renderFields = () => {\n    if (template?.kind === \"shttp\" || template?.kind === \"sse\") {\n      const shouldRenderCredential = optionNeedsCredentialField(option);\n      const apiKeyOptional = option ? isCredentialOptional(option) : false;\n      return (\n        <>\n          <SettingsInput\n            testId=\"mcp-install-field-url\"\n            name=\"url\"\n            type=\"url\"\n            label={t(I18nKey.SETTINGS$MCP_URL)}\n            value={template.url}\n            onChange={() => {}}\n            isDisabled\n            className=\"w-full\"\n          />\n          {shouldRenderCredential ? (\n            <div className=\"flex flex-col gap-1\">\n              <SettingsInput\n                testId=\"mcp-install-field-api_key\"\n                name=\"api_key\"\n                type=\"password\"\n                label={t(I18nKey.SETTINGS$MCP_API_KEY)}\n                value={state.values.api_key ?? \"\"}\n                onChange={(v) => setValue(\"api_key\", v)}\n                placeholder={t(I18nKey.SETTINGS$MCP_API_KEY_PLACEHOLDER)}\n                showOptionalTag={apiKeyOptional}\n                required={!apiKeyOptional}\n                className=\"w-full\"\n              />\n              {state.errors.api_key && (\n                <p className=\"text-xs text-red-500\">{state.errors.api_key}</p>\n              )}\n            </div>\n          ) : null}\n        </>\n      );\n    }\n\n    if (template?.kind !== \"stdio\") return null;\n    const stdio = template;\n    return (\n      <>\n        <SettingsInput\n          testId=\"mcp-install-field-command-readonly\"\n          name=\"command-readonly\"\n          type=\"text\"\n          label={t(I18nKey.MCP$COMMAND_LABEL)}\n          value={`${stdio.command} ${stdio.args.join(\" \")}`.trim()}\n          onChange={() => {}}\n          isDisabled\n          className=\"w-full\"\n        />\n        {(stdio.envFields ?? []).map((field) => (\n          <div key={field.key} className=\"flex flex-col gap-1\">\n            <SettingsInput\n              testId={`mcp-install-field-${field.key}`}\n              name={field.key}\n              type={field.type === \"password\" ? \"password\" : \"text\"}\n              label={field.label}\n              value={state.values[field.key] ?? \"\"}\n              onChange={(v) => setValue(field.key, v)}\n              placeholder={field.placeholder}\n              required={field.required}\n              showOptionalTag={!field.required}\n              className=\"w-full\"\n            />\n            {field.helperText && (\n              <p className=\"text-xs text-tertiary-alt\">\n                {renderHelperText(field.helperText)}\n              </p>\n            )}\n            {state.errors[field.key] && (\n              <p className=\"text-xs text-red-500\">{state.errors[field.key]}</p>\n            )}\n          </div>\n        ))}\n        {(stdio.argFields ?? []).map((field) => (\n          <div key={field.key} className=\"flex flex-col gap-1\">\n            <SettingsInput\n              testId={`mcp-install-field-${field.key}`}\n              name={field.key}\n              type={field.type === \"password\" ? \"password\" : \"text\"}\n              label={field.label}\n              value={state.values[field.key] ?? \"\"}\n              onChange={(v) => setValue(field.key, v)}\n              placeholder={field.placeholder}\n              required={field.required}\n              showOptionalTag={!field.required}\n              className=\"w-full\"\n            />\n            {field.helperText && (\n              <p className=\"text-xs text-tertiary-alt\">\n                {renderHelperText(field.helperText)}\n              </p>\n            )}\n            {state.errors[field.key] && (\n              <p className=\"text-xs text-red-500\">{state.errors[field.key]}</p>\n            )}\n          </div>\n        ))}\n      </>\n    );\n  };\n\n  return (\n    <ModalBackdrop onClose={onClose} aria-label={entry.name}>\n      <form\n        data-testid=\"mcp-install-modal\"\n        data-marketplace-id={entry.id}\n        onSubmit={handleSubmit}\n        className=\"relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[85vh] overflow-y-auto custom-scrollbar\"\n      >\n        <ModalCloseButton\n          onClose={onClose}\n          testId=\"mcp-install-modal-close\"\n          disabled={isPending}\n        />\n        <div className=\"flex items-start gap-3 pr-6\">\n          <McpLogoBadge entry={entry} />\n          <div className=\"flex flex-col flex-1\">\n            <h2 className=\"text-lg font-semibold\">{entry.name}</h2>\n            <p className=\"text-xs text-tertiary-light\">{entry.description}</p>\n          </div>\n        </div>\n\n        {entry.installHint && (\n          <p className=\"text-xs text-tertiary-light\">{entry.installHint}</p>\n        )}\n\n        {entry.docsUrl && (\n          <a\n            href={entry.docsUrl}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className=\"text-xs text-[var(--oh-muted)] hover:text-white hover:underline self-start transition-colors\"\n          >\n            {t(I18nKey.MCP$VIEW_DOCS)}\n          </a>\n        )}\n\n        <div className=\"flex flex-col gap-3\">{renderFields()}</div>\n\n        {globalError && (\n          <p\n            data-testid=\"mcp-install-modal-error\"\n            className=\"text-sm text-red-500 whitespace-pre-wrap\"\n          >\n            {globalError}\n          </p>\n        )}\n\n        <div className=\"flex justify-end gap-2 mt-2\">\n          <BrandButton\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={onClose}\n            testId=\"mcp-install-cancel\"\n          >\n            {t(I18nKey.BUTTON$CANCEL)}\n          </BrandButton>\n          <BrandButton\n            type=\"submit\"\n            variant=\"primary\"\n            isDisabled={isPending}\n            testId=\"mcp-install-submit\"\n          >\n            {isTesting\n              ? t(I18nKey.MCP$VERIFYING)\n              : isAdding\n                ? t(I18nKey.SETTINGS$SAVING)\n                : t(I18nKey.MCP$INSTALL_BUTTON)}\n          </BrandButton>\n        </div>\n      </form>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"install-server-modal.js","names":[],"sources":["../../../../src/components/features/mcp-page/install-server-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AxiosError } from \"axios\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport 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 { SaveAsSecretToggle } from \"#/components/features/mcp-page/save-as-secret-toggle\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { IntegrationCatalogEntry as MarketplaceEntry } from \"@openhands/extensions/integrations\";\nimport { McpLogoBadge } from \"#/components/features/mcp-logo-badge\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport { useAddMcpServer } from \"#/hooks/mutation/use-add-mcp-server\";\nimport { useTestMcpServer } from \"#/hooks/mutation/use-test-mcp-server\";\nimport { displaySuccessToast } from \"#/utils/custom-toast-handlers\";\nimport {\n  getInstallableMcpConnectionOption,\n  type McpMarketplaceConnectionOption,\n} from \"#/utils/mcp-marketplace-utils\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\nimport { useSaveFieldsAsSecrets } from \"#/hooks/mutation/use-save-fields-as-secrets\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\n\n/**\n * Renders a helperText string as React nodes, converting any `[text](url)`\n * markdown links into real `<a>` elements. Plain text segments are left as-is.\n * Only `http:` and `https:` URLs are rendered as links; anything else falls\n * back to `#` to guard against `javascript:` / `data:` XSS vectors.\n */\nfunction renderHelperText(text: string): React.ReactNode {\n  const linkPattern = /\\[([^\\]]+)\\]\\(([^)]+)\\)/g;\n  const parts: React.ReactNode[] = [];\n  let lastIndex = 0;\n  for (const match of text.matchAll(linkPattern)) {\n    if (match.index > lastIndex) {\n      parts.push(text.slice(lastIndex, match.index));\n    }\n    parts.push(\n      <a\n        key={match.index}\n        href={/^https?:\\/\\//i.test(match[2]) ? match[2] : \"#\"}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        className=\"underline hover:text-white transition-colors\"\n      >\n        {match[1]}\n      </a>,\n    );\n    lastIndex = match.index + match[0].length;\n  }\n  if (lastIndex < text.length) {\n    parts.push(text.slice(lastIndex));\n  }\n  return parts;\n}\n\ninterface InstallServerModalProps {\n  entry: MarketplaceEntry;\n  onClose: () => void;\n  onSuccess?: (entry: MarketplaceEntry) => void;\n}\n\ninterface FieldState {\n  values: Record<string, string>;\n  errors: Record<string, string | null>;\n  savedAsSecret: Record<string, boolean>;\n}\n\nfunction optionNeedsCredentialField(\n  option: McpMarketplaceConnectionOption | undefined,\n): boolean {\n  if (option?.transport.kind !== \"shttp\" && option?.transport.kind !== \"sse\") {\n    return false;\n  }\n  return [\"api_key\", \"bearer\", \"basic\"].includes(option.auth.strategy);\n}\n\nfunction isCredentialOptional(option: McpMarketplaceConnectionOption): boolean {\n  if (option.transport.kind === \"stdio\") {\n    return option.auth.apiKeyOptional ?? false;\n  }\n  return option.auth.apiKeyOptional ?? option.transport.apiKeyOptional ?? false;\n}\n\nfunction makeInitialState(entry: MarketplaceEntry): FieldState {\n  const values: Record<string, string> = {};\n  const savedAsSecret: Record<string, boolean> = {};\n  const option = getInstallableMcpConnectionOption(entry);\n  const template = option?.transport;\n  if (template?.kind === \"stdio\") {\n    for (const field of template.envFields ?? []) {\n      values[field.key] = \"\";\n      // Pre-check password fields; non-password fields default to off.\n      savedAsSecret[field.key] = field.type === \"password\";\n    }\n    for (const field of template.argFields ?? []) {\n      values[field.key] = \"\";\n    }\n  } else if (optionNeedsCredentialField(option)) {\n    values.api_key = \"\";\n  }\n  return { values, errors: {}, savedAsSecret };\n}\n\n// The marketplace install modal is intentionally add-only: clicking\n// a catalog tile always appends a new server (the user might want\n// two Slack workspaces, two Postgres connections, etc.) even when\n// one of the same template kind is already installed. Editing an\n// existing server is reached via the installed-server-card's edit\n// button, which opens `CustomServerEditor` instead.\nexport function InstallServerModal({\n  entry,\n  onClose,\n  onSuccess,\n}: InstallServerModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { mutate: addMcpServer, isPending: isAdding } = useAddMcpServer();\n  const { mutate: testMcpServer, isPending: isTesting } = useTestMcpServer();\n  const saveFieldsAsSecrets = useSaveFieldsAsSecrets();\n\n  const [state, setState] = React.useState<FieldState>(() =>\n    makeInitialState(entry),\n  );\n  // Always holds the latest state so async callbacks (onSuccess) never read\n  // stale closure values, even under React concurrent-mode scheduling.\n  const stateRef = React.useRef(state);\n  stateRef.current = state;\n\n  const [globalError, setGlobalError] = React.useState<string | null>(null);\n  const option = getInstallableMcpConnectionOption(entry);\n  const template = option?.transport;\n\n  const isPending = isTesting || isAdding;\n\n  const setValue = (key: string, value: string) => {\n    setState((prev) => ({\n      ...prev,\n      values: { ...prev.values, [key]: value },\n      errors: { ...prev.errors, [key]: null },\n    }));\n    setGlobalError(null);\n  };\n\n  const toggleSecret = (key: string, value: boolean) => {\n    setState((prev) => ({\n      ...prev,\n      savedAsSecret: { ...prev.savedAsSecret, [key]: value },\n    }));\n  };\n\n  const 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            // Save checked envFields as secrets in the background so the\n            // Automation Server can access them without a separate manual step.\n            // Runs after onClose so failures don't block the modal from closing.\n            // Uses stateRef.current to avoid reading a stale closure snapshot.\n            if (template?.kind === \"stdio\") {\n              saveFieldsAsSecrets(\n                template.envFields ?? [],\n                stateRef.current.values,\n                stateRef.current.savedAsSecret,\n              );\n            }\n          },\n          onError: (err: unknown) => {\n            const message = retrieveAxiosErrorMessage(err as AxiosError);\n            setGlobalError(message || t(I18nKey.ERROR$GENERIC));\n          },\n        });\n      },\n      onError: (err: unknown) => {\n        const message = retrieveAxiosErrorMessage(err as AxiosError);\n        setGlobalError(message || t(I18nKey.ERROR$GENERIC));\n      },\n    });\n  };\n\n  // ------------------------------------------------------------------\n  // Per-template submit handlers. Each is small and self-contained:\n  // validate user input, build the payload, then hand off to\n  // submitServer.\n  // ------------------------------------------------------------------\n  const handleHttpServerSubmit = () => {\n    // TS narrows this branch to shttp|sse; the equality guard is a\n    // runtime/defensive belt to make the helper safe in isolation.\n    if (template?.kind !== \"shttp\" && template?.kind !== \"sse\") {\n      return;\n    }\n    if (!option) return;\n    const apiKey = state.values.api_key?.trim() ?? \"\";\n    const needsCredential = optionNeedsCredentialField(option);\n    if (needsCredential && !isCredentialOptional(option) && !apiKey) {\n      setState((prev) => ({\n        ...prev,\n        errors: { api_key: t(I18nKey.MCP$ERROR_FIELD_REQUIRED) },\n      }));\n      return;\n    }\n    const payload: MCPServerConfig = {\n      id: `${template.kind}-${uuidv4()}`,\n      type: template.kind,\n      url: template.url,\n      ...(needsCredential && apiKey && { api_key: apiKey }),\n    };\n    submitServer(payload);\n  };\n\n  const handleStdioSubmit = () => {\n    if (template?.kind !== \"stdio\") return;\n    const stdio = template;\n    const errors: Record<string, string | null> = {};\n\n    for (const field of stdio.envFields ?? []) {\n      if (field.required && !(state.values[field.key] ?? \"\").trim()) {\n        errors[field.key] = t(I18nKey.MCP$ERROR_FIELD_REQUIRED);\n      }\n    }\n    for (const field of stdio.argFields ?? []) {\n      if (field.required && !(state.values[field.key] ?? \"\").trim()) {\n        errors[field.key] = t(I18nKey.MCP$ERROR_FIELD_REQUIRED);\n      }\n    }\n    if (Object.values(errors).some(Boolean)) {\n      setState((prev) => ({ ...prev, errors }));\n      return;\n    }\n\n    const env: Record<string, string> = {};\n    for (const field of stdio.envFields ?? []) {\n      const v = state.values[field.key]?.trim();\n      if (v) env[field.key] = v;\n    }\n    const extraArgs: string[] = [];\n    for (const field of stdio.argFields ?? []) {\n      const v = state.values[field.key]?.trim();\n      if (v) {\n        // Filesystem-style multi-token input: split on whitespace.\n        for (const token of v.split(/\\s+/)) {\n          if (token) extraArgs.push(token);\n        }\n      }\n    }\n\n    const payload: MCPServerConfig = {\n      id: `stdio-${uuidv4()}`,\n      type: \"stdio\",\n      name: stdio.serverName,\n      command: stdio.command,\n      args: [...stdio.args, ...extraArgs],\n      ...(Object.keys(env).length > 0 && { env }),\n    };\n    submitServer(payload);\n  };\n\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setGlobalError(null);\n    if (template?.kind === \"shttp\" || template?.kind === \"sse\") {\n      return handleHttpServerSubmit();\n    }\n    return handleStdioSubmit();\n  };\n\n  const renderFields = () => {\n    if (template?.kind === \"shttp\" || template?.kind === \"sse\") {\n      const shouldRenderCredential = optionNeedsCredentialField(option);\n      const apiKeyOptional = option ? isCredentialOptional(option) : false;\n      return (\n        <>\n          <SettingsInput\n            testId=\"mcp-install-field-url\"\n            name=\"url\"\n            type=\"url\"\n            label={t(I18nKey.SETTINGS$MCP_URL)}\n            value={template.url}\n            onChange={() => {}}\n            isDisabled\n            className=\"w-full\"\n          />\n          {shouldRenderCredential ? (\n            <div className=\"flex flex-col gap-1\">\n              <SettingsInput\n                testId=\"mcp-install-field-api_key\"\n                name=\"api_key\"\n                type=\"password\"\n                label={t(I18nKey.SETTINGS$MCP_API_KEY)}\n                value={state.values.api_key ?? \"\"}\n                onChange={(v) => setValue(\"api_key\", v)}\n                placeholder={t(I18nKey.SETTINGS$MCP_API_KEY_PLACEHOLDER)}\n                showOptionalTag={apiKeyOptional}\n                required={!apiKeyOptional}\n                className=\"w-full\"\n              />\n              {state.errors.api_key && (\n                <p className=\"text-xs text-red-500\">{state.errors.api_key}</p>\n              )}\n            </div>\n          ) : null}\n        </>\n      );\n    }\n\n    if (template?.kind !== \"stdio\") return null;\n    const stdio = template;\n    return (\n      <>\n        <SettingsInput\n          testId=\"mcp-install-field-command-readonly\"\n          name=\"command-readonly\"\n          type=\"text\"\n          label={t(I18nKey.MCP$COMMAND_LABEL)}\n          value={`${stdio.command} ${stdio.args.join(\" \")}`.trim()}\n          onChange={() => {}}\n          isDisabled\n          className=\"w-full\"\n        />\n        {(stdio.envFields ?? []).map((field) => (\n          <div key={field.key} className=\"flex flex-col gap-1\">\n            <SettingsInput\n              testId={`mcp-install-field-${field.key}`}\n              name={field.key}\n              type={field.type === \"password\" ? \"password\" : \"text\"}\n              label={field.label}\n              value={state.values[field.key] ?? \"\"}\n              onChange={(v) => setValue(field.key, v)}\n              placeholder={field.placeholder}\n              required={field.required}\n              showOptionalTag={!field.required}\n              className=\"w-full\"\n            />\n            {field.helperText && (\n              <p className=\"text-xs text-tertiary-alt\">\n                {renderHelperText(field.helperText)}\n              </p>\n            )}\n            {state.errors[field.key] && (\n              <p className=\"text-xs text-red-500\">{state.errors[field.key]}</p>\n            )}\n            {field.key in state.savedAsSecret && (\n              <SaveAsSecretToggle\n                fieldKey={field.key}\n                checked={state.savedAsSecret[field.key]}\n                onToggle={(v) => toggleSecret(field.key, v)}\n              />\n            )}\n          </div>\n        ))}\n        {/* argFields are CLI arguments, not credentials — they don't need\n            a \"save as secret\" toggle and are excluded from savedAsSecret. */}\n        {(stdio.argFields ?? []).map((field) => (\n          <div key={field.key} className=\"flex flex-col gap-1\">\n            <SettingsInput\n              testId={`mcp-install-field-${field.key}`}\n              name={field.key}\n              type={field.type === \"password\" ? \"password\" : \"text\"}\n              label={field.label}\n              value={state.values[field.key] ?? \"\"}\n              onChange={(v) => setValue(field.key, v)}\n              placeholder={field.placeholder}\n              required={field.required}\n              showOptionalTag={!field.required}\n              className=\"w-full\"\n            />\n            {field.helperText && (\n              <p className=\"text-xs text-tertiary-alt\">\n                {renderHelperText(field.helperText)}\n              </p>\n            )}\n            {state.errors[field.key] && (\n              <p className=\"text-xs text-red-500\">{state.errors[field.key]}</p>\n            )}\n          </div>\n        ))}\n      </>\n    );\n  };\n\n  return (\n    <ModalBackdrop onClose={onClose} aria-label={entry.name}>\n      <form\n        data-testid=\"mcp-install-modal\"\n        data-marketplace-id={entry.id}\n        onSubmit={handleSubmit}\n        className=\"relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[85vh] overflow-y-auto custom-scrollbar\"\n      >\n        <ModalCloseButton\n          onClose={onClose}\n          testId=\"mcp-install-modal-close\"\n          disabled={isPending}\n        />\n        <div className=\"flex items-start gap-3 pr-6\">\n          <McpLogoBadge entry={entry} />\n          <div className=\"flex flex-col flex-1\">\n            <h2 className={modalTitleLgClassName}>{entry.name}</h2>\n            <p className=\"text-xs text-tertiary-light\">{entry.description}</p>\n          </div>\n        </div>\n\n        {entry.installHint && (\n          <p className=\"text-xs text-tertiary-light\">{entry.installHint}</p>\n        )}\n\n        {entry.docsUrl && (\n          <a\n            href={entry.docsUrl}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className=\"text-xs text-[var(--oh-muted)] hover:text-white hover:underline self-start transition-colors\"\n          >\n            {t(I18nKey.MCP$VIEW_DOCS)}\n          </a>\n        )}\n\n        <div className=\"flex flex-col gap-3\">{renderFields()}</div>\n\n        {globalError && (\n          <p\n            data-testid=\"mcp-install-modal-error\"\n            className=\"text-sm text-red-500 whitespace-pre-wrap\"\n          >\n            {globalError}\n          </p>\n        )}\n\n        <div className=\"flex justify-end gap-2 mt-2\">\n          <BrandButton\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={onClose}\n            testId=\"mcp-install-cancel\"\n          >\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/save-as-secret-toggle.cjs

@@ -0,0 +1,2 @@
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../utils/utils.cjs`),r=require(`../../shared/buttons/styled-tooltip.cjs`);let i=require(`react/jsx-runtime`);function a({fieldKey:a,checked:o,onToggle:s}){let{t:c}=e.useTranslation(`openhands`);return(0,i.jsxs)(`label`,{"data-testid":`mcp-install-save-secret-${a}`,className:n.cn(`flex items-center gap-2 px-3 py-2 mt-0.5 rounded-lg border cursor-pointer transition-colors`,o?`border-green-500/35 bg-green-500/10`:`border-[var(--oh-border)] bg-transparent hover:bg-white/[0.03]`),children:[(0,i.jsx)(`input`,{className:`sr-only`,id:`mcp-save-secret-checkbox-${a}`,type:`checkbox`,checked:o,onChange:e=>s(e.target.checked)}),(0,i.jsx)(`span`,{"aria-hidden":`true`,className:n.cn(`relative inline-flex h-[22px] w-[40px] shrink-0 items-center rounded-full border transition-colors duration-200`,o?`border-green-500 bg-green-500`:`border-[var(--oh-border)] bg-surface-raised`),children:(0,i.jsx)(`span`,{className:n.cn(`inline-block size-4 rounded-full transition-transform duration-200`,o?`translate-x-[21px] bg-white`:`translate-x-[2px] bg-[var(--oh-muted)]`)})}),(0,i.jsx)(`span`,{className:`text-sm`,children:c(t.I18nKey.MCP$ALSO_SAVE_AS_SECRET)}),(0,i.jsx)(`code`,{className:n.cn(`ml-auto text-[11px] font-mono tracking-tight border rounded px-1.5 py-0.5`,o?`text-green-500 border-green-500/35 bg-white/[0.04]`:`text-tertiary-alt border-[var(--oh-border)]`),children:a}),(0,i.jsx)(r.StyledTooltip,{content:c(t.I18nKey.MCP$SAVE_AS_SECRET_TOOLTIP),placement:`top`,children:(0,i.jsx)(`button`,{type:`button`,"aria-label":c(t.I18nKey.MCP$SAVE_AS_SECRET_TOOLTIP),className:`flex items-center justify-center size-[15px] shrink-0 rounded-full border border-[var(--oh-muted)] text-tertiary-alt text-[9px] font-bold cursor-help`,onClick:e=>e.preventDefault(),children:`?`})})]})}exports.SaveAsSecretToggle=a;
+//# sourceMappingURL=save-as-secret-toggle.cjs.map

package/dist/components/features/mcp-page/save-as-secret-toggle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"save-as-secret-toggle.cjs","names":[],"sources":["../../../../src/components/features/mcp-page/save-as-secret-toggle.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\ninterface SaveAsSecretToggleProps {\n  fieldKey: string;\n  checked: boolean;\n  onToggle: (value: boolean) => void;\n}\n\nexport function SaveAsSecretToggle({\n  fieldKey,\n  checked,\n  onToggle,\n}: SaveAsSecretToggleProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <label\n      data-testid={`mcp-install-save-secret-${fieldKey}`}\n      className={cn(\n        \"flex items-center gap-2 px-3 py-2 mt-0.5 rounded-lg border cursor-pointer transition-colors\",\n        checked\n          ? \"border-green-500/35 bg-green-500/10\"\n          : \"border-[var(--oh-border)] bg-transparent hover:bg-white/[0.03]\",\n      )}\n    >\n      {/* sr-only keeps the real checkbox in the accessibility tree so AT\n          users can toggle it without seeing the custom visual track. */}\n      <input\n        className=\"sr-only\"\n        id={`mcp-save-secret-checkbox-${fieldKey}`}\n        type=\"checkbox\"\n        checked={checked}\n        onChange={(e) => onToggle(e.target.checked)}\n      />\n      {/* aria-hidden: purely decorative — the checkbox above is the semantic control. */}\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          \"relative inline-flex h-[22px] w-[40px] shrink-0 items-center rounded-full border transition-colors duration-200\",\n          checked\n            ? \"border-green-500 bg-green-500\"\n            : \"border-[var(--oh-border)] bg-surface-raised\",\n        )}\n      >\n        <span\n          className={cn(\n            \"inline-block size-4 rounded-full transition-transform duration-200\",\n            checked\n              ? \"translate-x-[21px] bg-white\"\n              : \"translate-x-[2px] bg-[var(--oh-muted)]\",\n          )}\n        />\n      </span>\n      <span className=\"text-sm\">{t(I18nKey.MCP$ALSO_SAVE_AS_SECRET)}</span>\n      <code\n        className={cn(\n          \"ml-auto text-[11px] font-mono tracking-tight border rounded px-1.5 py-0.5\",\n          checked\n            ? \"text-green-500 border-green-500/35 bg-white/[0.04]\"\n            : \"text-tertiary-alt border-[var(--oh-border)]\",\n        )}\n      >\n        {fieldKey}\n      </code>\n      <StyledTooltip\n        content={t(I18nKey.MCP$SAVE_AS_SECRET_TOOLTIP)}\n        placement=\"top\"\n      >\n        {/* button so the tooltip is keyboard-reachable; type=button prevents\n            accidental form submission when the user presses Enter. */}\n        <button\n          type=\"button\"\n          aria-label={t(I18nKey.MCP$SAVE_AS_SECRET_TOOLTIP)}\n          className=\"flex items-center justify-center size-[15px] shrink-0 rounded-full border border-[var(--oh-muted)] text-tertiary-alt text-[9px] font-bold cursor-help\"\n          onClick={(e) => e.preventDefault()}\n        >\n          ?\n        </button>\n      </StyledTooltip>\n    </label>\n  );\n}\n"],"mappings":"8SAWA,SAAgB,EAAmB,CACjC,WACA,UACA,YAC0B,CAC1B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CAEzC,OACE,EAAA,EAAA,MAAC,QAAD,CACE,cAAa,2BAA2B,IACxC,UAAW,EAAA,GACT,8FACA,EACI,sCACA,iEACL,UAPH,EAWE,EAAA,EAAA,KAAC,QAAD,CACE,UAAU,UACV,GAAI,4BAA4B,IAChC,KAAK,WACI,UACT,SAAW,GAAM,EAAS,EAAE,OAAO,QAAQ,CAC3C,CAAA,EAEF,EAAA,EAAA,KAAC,OAAD,CACE,cAAY,OACZ,UAAW,EAAA,GACT,kHACA,EACI,gCACA,8CACL,WAED,EAAA,EAAA,KAAC,OAAD,CACE,UAAW,EAAA,GACT,qEACA,EACI,8BACA,yCACL,CACD,CAAA,CACG,CAAA,EACP,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,mBAAW,EAAE,EAAA,QAAQ,wBAAwB,CAAQ,CAAA,EACrE,EAAA,EAAA,KAAC,OAAD,CACE,UAAW,EAAA,GACT,4EACA,EACI,qDACA,8CACL,UAEA,EACI,CAAA,EACP,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,QAAS,EAAE,EAAA,QAAQ,2BAA2B,CAC9C,UAAU,gBAIV,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,aAAY,EAAE,EAAA,QAAQ,2BAA2B,CACjD,UAAU,wJACV,QAAU,GAAM,EAAE,gBAAgB,UACnC,IAEQ,CAAA,CACK,CAAA,CACV"}

package/dist/components/features/mcp-page/save-as-secret-toggle.d.ts

@@ -0,0 +1,7 @@
+interface SaveAsSecretToggleProps {
+    fieldKey: string;
+    checked: boolean;
+    onToggle: (value: boolean) => void;
+}
+export declare function SaveAsSecretToggle({ fieldKey, checked, onToggle, }: SaveAsSecretToggleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/features/mcp-page/save-as-secret-toggle.js

@@ -0,0 +1,50 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { cn as n } from "../../../utils/utils.js";
+import { StyledTooltip as r } from "../../shared/buttons/styled-tooltip.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/features/mcp-page/save-as-secret-toggle.tsx
+function o({ fieldKey: o, checked: s, onToggle: c }) {
+	let { t: l } = e("openhands");
+	return /* @__PURE__ */ a("label", {
+		"data-testid": `mcp-install-save-secret-${o}`,
+		className: n("flex items-center gap-2 px-3 py-2 mt-0.5 rounded-lg border cursor-pointer transition-colors", s ? "border-green-500/35 bg-green-500/10" : "border-[var(--oh-border)] bg-transparent hover:bg-white/[0.03]"),
+		children: [
+			/* @__PURE__ */ i("input", {
+				className: "sr-only",
+				id: `mcp-save-secret-checkbox-${o}`,
+				type: "checkbox",
+				checked: s,
+				onChange: (e) => c(e.target.checked)
+			}),
+			/* @__PURE__ */ i("span", {
+				"aria-hidden": "true",
+				className: n("relative inline-flex h-[22px] w-[40px] shrink-0 items-center rounded-full border transition-colors duration-200", s ? "border-green-500 bg-green-500" : "border-[var(--oh-border)] bg-surface-raised"),
+				children: /* @__PURE__ */ i("span", { className: n("inline-block size-4 rounded-full transition-transform duration-200", s ? "translate-x-[21px] bg-white" : "translate-x-[2px] bg-[var(--oh-muted)]") })
+			}),
+			/* @__PURE__ */ i("span", {
+				className: "text-sm",
+				children: l(t.MCP$ALSO_SAVE_AS_SECRET)
+			}),
+			/* @__PURE__ */ i("code", {
+				className: n("ml-auto text-[11px] font-mono tracking-tight border rounded px-1.5 py-0.5", s ? "text-green-500 border-green-500/35 bg-white/[0.04]" : "text-tertiary-alt border-[var(--oh-border)]"),
+				children: o
+			}),
+			/* @__PURE__ */ i(r, {
+				content: l(t.MCP$SAVE_AS_SECRET_TOOLTIP),
+				placement: "top",
+				children: /* @__PURE__ */ i("button", {
+					type: "button",
+					"aria-label": l(t.MCP$SAVE_AS_SECRET_TOOLTIP),
+					className: "flex items-center justify-center size-[15px] shrink-0 rounded-full border border-[var(--oh-muted)] text-tertiary-alt text-[9px] font-bold cursor-help",
+					onClick: (e) => e.preventDefault(),
+					children: "?"
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { o as SaveAsSecretToggle };
+
+//# sourceMappingURL=save-as-secret-toggle.js.map