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

package/dist/components/features/conversation/conversation-tabs/conversation-tabs.js

@@ -10,24 +10,24 @@ import { useAgentState as c } from "../../../../hooks/use-agent-state.js";
 import { mobileTopBarIconClassName as l } from "../../../../utils/mobile-top-bar-icon-button-classes.js";
 import { Typography as u } from "../../../../ui/typography.js";
 import d from "../../../../icons/lesson-plan.js";
-import ee from "../../../../icons/document.js";
-import { useHandleBuildPlanClick as te } from "../../../../hooks/use-handle-build-plan-click.js";
-import { useSelectConversationTab as ne } from "../../../../hooks/use-select-conversation-tab.js";
-import { EllipsisButton as f } from "../../conversation-panel/ellipsis-button.js";
-import { ChatActionTooltip as p } from "../../chat/chat-action-tooltip.js";
-import m from "../../../../icons/terminal.js";
+import f from "../../../../icons/document.js";
+import { useHandleBuildPlanClick as ee } from "../../../../hooks/use-handle-build-plan-click.js";
+import { useSelectConversationTab as te } from "../../../../hooks/use-select-conversation-tab.js";
+import { EllipsisButton as p } from "../../conversation-panel/ellipsis-button.js";
+import { ChatActionTooltip as m } from "../../chat/chat-action-tooltip.js";
+import ne from "../../../../icons/terminal.js";
 import h from "../../../../icons/globe.js";
 import g from "../../../../icons/vscode.js";
 import _ from "../../../../icons/double-check.js";
 import { ConversationTabNav as v } from "./conversation-tab-nav.js";
 import { VSCodeTooltipContent as y } from "./vscode-tooltip-content.js";
-import { useTaskList as re } from "../../../../hooks/use-task-list.js";
-import { ConversationTabsContextMenu as b } from "./conversation-tabs-context-menu.js";
+import { useTaskList as b } from "../../../../hooks/use-task-list.js";
+import { ConversationTabsContextMenu as re } from "./conversation-tabs-context-menu.js";
 import { useEffect as x, useLayoutEffect as S, useRef as C, useState as w } from "react";
 import { Fragment as ie, jsx as T, jsxs as E } from "react/jsx-runtime";
 //#region src/components/features/conversation/conversation-tabs/conversation-tabs.tsx
 function D({ variant: D = "default" }) {
-	let { conversationId: O } = i(), { setSelectedTab: k, planContent: A } = o(), [j, M] = w(!1), { state: N } = a(O), { hasTaskList: P } = re(), { backend: F } = s(), { handleBuildPlanClick: I } = te(), { curAgentState: L } = c(), { selectTab: R, isTabActive: z, onTabChange: B, selectedTab: V, isRightPanelShown: H } = ne();
+	let { conversationId: O } = i(), { setSelectedTab: k, planContent: A } = o(), [j, M] = w(!1), { state: N } = a(O), { hasTaskList: P } = b(), { backend: F } = s(), { handleBuildPlanClick: I } = ee(), { curAgentState: L } = c(), { selectTab: R, isTabActive: z, onTabChange: B, selectedTab: V, isRightPanelShown: H } = te();
 	x(() => {
 		k(N.selectedTab);
 	}, [k, N.selectedTab]), x(() => {
@@ -41,7 +41,7 @@ function D({ variant: D = "default" }) {
 		{
 			tabValue: "files",
 			isActive: z("files"),
-			icon: ee,
+			icon: f,
 			onClick: () => R("files"),
 			tooltipContent: U(t.COMMON$FILES),
 			tooltipAriaLabel: U(t.COMMON$FILES),
@@ -68,7 +68,7 @@ function D({ variant: D = "default" }) {
 		{
 			tabValue: "terminal",
 			isActive: z("terminal"),
-			icon: m,
+			icon: ne,
 			onClick: () => R("terminal"),
 			tooltipContent: U(t.COMMON$TERMINAL),
 			tooltipAriaLabel: U(t.COMMON$TERMINAL),
@@ -94,7 +94,7 @@ function D({ variant: D = "default" }) {
 		tooltipAriaLabel: U(t.COMMON$TASK_LIST),
 		label: U(t.COMMON$TASK_LIST)
 	});
-	let K = G.filter((e) => e.tabValue === "vscode" && F.kind !== "cloud" ? !1 : N.unpinnedTabs.includes(e.tabValue) ? V === e.tabValue : !0), q = N.unpinnedTabs.join(","), J = L === n.RUNNING || L === n.LOADING || !A, Y = C(null), X = C(null), Z = C(null), Q = C(null), [ae, $] = w(K.length);
+	let K = G.filter((e) => e.tabValue === "vscode" && F.kind !== "cloud" || e.tabValue === "planner" && F.kind !== "cloud" ? !1 : N.unpinnedTabs.includes(e.tabValue) ? V === e.tabValue : !0), q = N.unpinnedTabs.join(","), J = L === n.RUNNING || L === n.LOADING || !A, Y = C(null), X = C(null), Z = C(null), Q = C(null), [ae, $] = w(K.length);
 	S(() => {
 		let e = Y.current, t = X.current, n = Z.current;
 		if (!e || !t || !n) return;
@@ -139,7 +139,7 @@ function D({ variant: D = "default" }) {
 			ref: X,
 			"aria-hidden": !0,
 			className: "pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5",
-			children: K.map(({ tabValue: e, icon: t, isActive: n, tooltipContent: i, tooltipAriaLabel: a, label: o, className: s }, c) => /* @__PURE__ */ T(p, {
+			children: K.map(({ tabValue: e, icon: t, isActive: n, tooltipContent: i, tooltipAriaLabel: a, label: o, className: s }, c) => /* @__PURE__ */ T(m, {
 				tooltip: i,
 				ariaLabel: a,
 				children: /* @__PURE__ */ T(v, {
@@ -159,7 +159,7 @@ function D({ variant: D = "default" }) {
 				className: "flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5",
 				children: [/* @__PURE__ */ T("div", {
 					className: "flex min-w-0 flex-1 flex-nowrap items-center gap-1.5 overflow-x-hidden",
-					children: K.slice(0, oe).map(({ tabValue: e, icon: t, onClick: n, isActive: i, tooltipContent: a, tooltipAriaLabel: o, label: s, className: c }, l) => /* @__PURE__ */ T(p, {
+					children: K.slice(0, oe).map(({ tabValue: e, icon: t, onClick: n, isActive: i, tooltipContent: a, tooltipAriaLabel: o, label: s, className: c }, l) => /* @__PURE__ */ T(m, {
 						tooltip: a,
 						ariaLabel: o,
 						children: /* @__PURE__ */ T(v, {
@@ -174,12 +174,12 @@ function D({ variant: D = "default" }) {
 				}), /* @__PURE__ */ E("div", {
 					ref: Z,
 					className: "relative shrink-0",
-					children: [/* @__PURE__ */ T(f, {
+					children: [/* @__PURE__ */ T(p, {
 						ref: Q,
 						onClick: () => M(!j),
 						ariaLabel: U(t.COMMON$MORE_OPTIONS),
 						iconClassName: D === "compact" ? l : void 0
-					}), /* @__PURE__ */ T(b, {
+					}), /* @__PURE__ */ T(re, {
 						isOpen: j,
 						onClose: () => M(!1),
 						ignoreOutsideClickRef: Q

package/dist/components/features/conversation/conversation-tabs/conversation-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-tabs.js","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport TerminalIcon from \"#/icons/terminal.svg?react\";\nimport GlobeIcon from \"#/icons/globe.svg?react\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport VSCodeIcon from \"#/icons/vscode.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { EllipsisButton } from \"#/components/features/conversation-panel/ellipsis-button\";\nimport { cn } from \"#/utils/utils\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport { ConversationTabNav } from \"./conversation-tab-nav\";\nimport { ChatActionTooltip } from \"../../chat/chat-action-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { VSCodeTooltipContent } from \"./vscode-tooltip-content\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ConversationTabsContextMenu } from \"./conversation-tabs-context-menu\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useHandleBuildPlanClick } from \"#/hooks/use-handle-build-plan-click\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { Typography } from \"#/ui/typography\";\nimport { mobileTopBarIconClassName } from \"#/utils/mobile-top-bar-icon-button-classes\";\n\nexport function ConversationTabs({\n  variant = \"default\",\n}: {\n  variant?: \"default\" | \"compact\";\n}) {\n  const { conversationId } = useConversationId();\n  const { setSelectedTab, planContent } = useConversationStore();\n\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  const { state: persistedState } =\n    useConversationLocalStorageState(conversationId);\n\n  const { hasTaskList } = useTaskList();\n  const { backend } = useActiveBackend();\n\n  const { handleBuildPlanClick } = useHandleBuildPlanClick();\n  const { curAgentState } = useAgentState();\n\n  const {\n    selectTab,\n    isTabActive,\n    onTabChange,\n    selectedTab,\n    isRightPanelShown,\n  } = useSelectConversationTab();\n\n  // Restore the most-recently-used tab from localStorage so users don't\n  // lose their tab selection across reloads.\n  //\n  // Note: we deliberately do NOT mirror `rightPanelShown` from\n  // localStorage. The drawer's open/closed state is session-only — see\n  // the comment in `useConversationStore` and the schema note in\n  // `conversation-local-storage.ts` for the rationale.\n  useEffect(() => {\n    setSelectedTab(persistedState.selectedTab);\n  }, [setSelectedTab, persistedState.selectedTab]);\n\n  useEffect(() => {\n    const handlePanelVisibilityChange = () => {\n      if (isRightPanelShown) {\n        // If no tab is selected, default to files tab\n        if (!selectedTab) {\n          onTabChange(\"files\");\n        }\n      }\n    };\n\n    handlePanelVisibilityChange();\n  }, [isRightPanelShown, selectedTab, onTabChange]);\n\n  const { t, i18n } = useTranslation(\"openhands\");\n\n  // `files` is intentionally the leftmost tab — it's the primary entry\n  // point for inspecting agent output (workspace files + git diff).\n  const tabs = [\n    {\n      tabValue: \"files\",\n      isActive: isTabActive(\"files\"),\n      icon: DocumentIcon,\n      onClick: () => selectTab(\"files\"),\n      tooltipContent: t(I18nKey.COMMON$FILES),\n      tooltipAriaLabel: t(I18nKey.COMMON$FILES),\n      label: t(I18nKey.COMMON$FILES),\n    },\n    {\n      tabValue: \"planner\",\n      isActive: isTabActive(\"planner\"),\n      icon: LessonPlanIcon,\n      onClick: () => selectTab(\"planner\"),\n      tooltipContent: t(I18nKey.COMMON$PLANNER),\n      tooltipAriaLabel: t(I18nKey.COMMON$PLANNER),\n      label: t(I18nKey.COMMON$PLANNER),\n    },\n    {\n      tabValue: \"vscode\",\n      isActive: isTabActive(\"vscode\"),\n      icon: VSCodeIcon,\n      onClick: () => selectTab(\"vscode\"),\n      tooltipContent: <VSCodeTooltipContent />,\n      tooltipAriaLabel: t(I18nKey.COMMON$CODE),\n      label: t(I18nKey.COMMON$CODE),\n    },\n    {\n      tabValue: \"terminal\",\n      isActive: isTabActive(\"terminal\"),\n      icon: TerminalIcon,\n      onClick: () => selectTab(\"terminal\"),\n      tooltipContent: t(I18nKey.COMMON$TERMINAL),\n      tooltipAriaLabel: t(I18nKey.COMMON$TERMINAL),\n      label: t(I18nKey.COMMON$TERMINAL),\n      className: \"pl-2\",\n    },\n    {\n      tabValue: \"browser\",\n      isActive: isTabActive(\"browser\"),\n      icon: GlobeIcon,\n      onClick: () => selectTab(\"browser\"),\n      tooltipContent: t(I18nKey.COMMON$BROWSER),\n      tooltipAriaLabel: t(I18nKey.COMMON$BROWSER),\n      label: t(I18nKey.COMMON$BROWSER),\n    },\n  ];\n\n  if (hasTaskList) {\n    // Insert after `files` so the leftmost slot stays Files.\n    tabs.splice(1, 0, {\n      tabValue: \"tasklist\",\n      isActive: isTabActive(\"tasklist\"),\n      icon: DoubleCheckIcon,\n      onClick: () => selectTab(\"tasklist\"),\n      tooltipContent: t(I18nKey.COMMON$TASK_LIST),\n      tooltipAriaLabel: t(I18nKey.COMMON$TASK_LIST),\n      label: t(I18nKey.COMMON$TASK_LIST),\n    });\n  }\n\n  // Pinned tabs always show in the bar. Unpinned tabs stay hidden unless the\n  // user has that tab selected — then it appears while active so the bar\n  // matches the open panel. Hide VS Code on local backends (cloud-only URL).\n  const visibleTabs = tabs.filter((tab) => {\n    if (tab.tabValue === \"vscode\" && backend.kind !== \"cloud\") return false;\n    if (!persistedState.unpinnedTabs.includes(tab.tabValue)) return true;\n    return selectedTab === tab.tabValue;\n  });\n\n  const unpinnedSignature = persistedState.unpinnedTabs.join(\",\");\n\n  const isAgentRunning =\n    curAgentState === AgentState.RUNNING ||\n    curAgentState === AgentState.LOADING;\n  const isBuildDisabled = isAgentRunning || !planContent;\n\n  const tabsRowInnerRef = useRef<HTMLDivElement>(null);\n  const measureRowRef = useRef<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  const [inlineTabCount, setInlineTabCount] = useState(visibleTabs.length);\n\n  useLayoutEffect(() => {\n    const rowInner = tabsRowInnerRef.current;\n    const measureRow = measureRowRef.current;\n    const menuEl = menuRef.current;\n    if (!rowInner || !measureRow || !menuEl) return undefined;\n\n    const measure = () => {\n      const measureButtons = measureRow.querySelectorAll<HTMLButtonElement>(\n        '[data-tab-measure=\"true\"]',\n      );\n      const tabCount = measureButtons.length;\n\n      const rowWidth = rowInner.getBoundingClientRect().width;\n      if (rowWidth === 0) {\n        setInlineTabCount(tabCount);\n        return;\n      }\n\n      const widths = Array.from(measureButtons).map(\n        (button) => button.getBoundingClientRect().width,\n      );\n\n      if (widths.length !== tabCount || tabCount === 0) {\n        setInlineTabCount(Math.max(0, tabCount));\n        return;\n      }\n\n      const menuWidth = menuEl.getBoundingClientRect().width;\n      const gapCss =\n        getComputedStyle(rowInner).columnGap || getComputedStyle(rowInner).gap;\n      const gapPx = parseFloat(gapCss) || 6;\n\n      let nextCount = 0;\n      for (let k = tabCount; k >= 0; k -= 1) {\n        let total = menuWidth;\n        for (let i = 0; i < k; i += 1) {\n          total += widths[i] ?? 0;\n        }\n        if (k > 0) {\n          total += k * gapPx;\n        }\n        if (total <= rowWidth + 0.5) {\n          nextCount = k;\n          break;\n        }\n      }\n\n      setInlineTabCount((prev) => (prev === nextCount ? prev : nextCount));\n    };\n\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return undefined;\n    const ro = new ResizeObserver(measure);\n    ro.observe(rowInner);\n    return () => ro.disconnect();\n  }, [\n    unpinnedSignature,\n    visibleTabs.length,\n    hasTaskList,\n    backend.kind,\n    selectedTab,\n    isRightPanelShown,\n    i18n.language,\n  ]);\n\n  const safeInlineTabCount = Math.min(inlineTabCount, visibleTabs.length);\n\n  return (\n    <>\n      <div\n        className={cn(\n          \"relative w-full min-w-0\",\n          variant === \"compact\"\n            ? \"flex h-full min-h-0 items-center py-0 pl-0 pr-1\"\n            : \"min-h-10 p-1\",\n        )}\n      >\n        <div\n          ref={measureRowRef}\n          aria-hidden\n          className=\"pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5\"\n        >\n          {visibleTabs.map(\n            (\n              {\n                tabValue,\n                icon,\n                isActive,\n                tooltipContent,\n                tooltipAriaLabel,\n                label,\n                className: tabClassName,\n              },\n              index,\n            ) => (\n              <ChatActionTooltip\n                key={`measure-${tabValue}-${index}`}\n                tooltip={tooltipContent}\n                ariaLabel={tooltipAriaLabel}\n              >\n                <ConversationTabNav\n                  tabValue={tabValue}\n                  icon={icon}\n                  onClick={() => {}}\n                  isActive={isActive}\n                  label={label}\n                  className={cn(tabClassName, \"shrink-0\")}\n                  measureOnly\n                />\n              </ChatActionTooltip>\n            ),\n          )}\n        </div>\n        <div\n          ref={tabsRowInnerRef}\n          className=\"flex w-full min-w-0 flex-nowrap items-center justify-start\"\n        >\n          <div className=\"flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5\">\n            <div className=\"flex min-w-0 flex-1 flex-nowrap items-center gap-1.5 overflow-x-hidden\">\n              {visibleTabs\n                .slice(0, safeInlineTabCount)\n                .map(\n                  (\n                    {\n                      tabValue,\n                      icon,\n                      onClick,\n                      isActive,\n                      tooltipContent,\n                      tooltipAriaLabel,\n                      label,\n                      className: tabClassName,\n                    },\n                    index,\n                  ) => (\n                    <ChatActionTooltip\n                      key={`${tabValue}-${index}`}\n                      tooltip={tooltipContent}\n                      ariaLabel={tooltipAriaLabel}\n                    >\n                      <ConversationTabNav\n                        tabValue={tabValue}\n                        icon={icon}\n                        onClick={onClick}\n                        isActive={isActive}\n                        label={label}\n                        className={cn(tabClassName, \"shrink-0\")}\n                      />\n                    </ChatActionTooltip>\n                  ),\n                )}\n            </div>\n            <div ref={menuRef} className=\"relative shrink-0\">\n              <EllipsisButton\n                ref={anchorRef}\n                onClick={() => setIsMenuOpen(!isMenuOpen)}\n                ariaLabel={t(I18nKey.COMMON$MORE_OPTIONS)}\n                iconClassName={\n                  variant === \"compact\" ? mobileTopBarIconClassName : undefined\n                }\n              />\n              <ConversationTabsContextMenu\n                isOpen={isMenuOpen}\n                onClose={() => setIsMenuOpen(false)}\n                ignoreOutsideClickRef={anchorRef}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n      {isTabActive(\"planner\") && (\n        <div\n          className={cn(\n            \"flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1\",\n          )}\n        >\n          <button\n            type=\"button\"\n            onClick={handleBuildPlanClick}\n            disabled={isBuildDisabled}\n            className={cn(\n              \"flex h-5 min-w-17 items-center justify-center rounded bg-white px-2 transition-opacity\",\n              isBuildDisabled\n                ? \"cursor-not-allowed opacity-50\"\n                : \"cursor-pointer hover:opacity-90\",\n            )}\n            data-testid=\"planner-tab-build-button\"\n          >\n            <Typography.Text className=\"text-[11px] font-normal leading-5 text-black\">\n              {/* eslint-disable-next-line i18next/no-literal-string */}\n              {t(I18nKey.COMMON$BUILD)} ⌘↩\n            </Typography.Text>\n          </button>\n        </div>\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"conversation-tabs.js","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport TerminalIcon from \"#/icons/terminal.svg?react\";\nimport GlobeIcon from \"#/icons/globe.svg?react\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport VSCodeIcon from \"#/icons/vscode.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { EllipsisButton } from \"#/components/features/conversation-panel/ellipsis-button\";\nimport { cn } from \"#/utils/utils\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport { ConversationTabNav } from \"./conversation-tab-nav\";\nimport { ChatActionTooltip } from \"../../chat/chat-action-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { VSCodeTooltipContent } from \"./vscode-tooltip-content\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ConversationTabsContextMenu } from \"./conversation-tabs-context-menu\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useHandleBuildPlanClick } from \"#/hooks/use-handle-build-plan-click\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { Typography } from \"#/ui/typography\";\nimport { mobileTopBarIconClassName } from \"#/utils/mobile-top-bar-icon-button-classes\";\n\nexport function ConversationTabs({\n  variant = \"default\",\n}: {\n  variant?: \"default\" | \"compact\";\n}) {\n  const { conversationId } = useConversationId();\n  const { setSelectedTab, planContent } = useConversationStore();\n\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  const { state: persistedState } =\n    useConversationLocalStorageState(conversationId);\n\n  const { hasTaskList } = useTaskList();\n  const { backend } = useActiveBackend();\n\n  const { handleBuildPlanClick } = useHandleBuildPlanClick();\n  const { curAgentState } = useAgentState();\n\n  const {\n    selectTab,\n    isTabActive,\n    onTabChange,\n    selectedTab,\n    isRightPanelShown,\n  } = useSelectConversationTab();\n\n  // Restore the most-recently-used tab from localStorage so users don't\n  // lose their tab selection across reloads.\n  //\n  // Note: we deliberately do NOT mirror `rightPanelShown` from\n  // localStorage. The drawer's open/closed state is session-only — see\n  // the comment in `useConversationStore` and the schema note in\n  // `conversation-local-storage.ts` for the rationale.\n  useEffect(() => {\n    setSelectedTab(persistedState.selectedTab);\n  }, [setSelectedTab, persistedState.selectedTab]);\n\n  useEffect(() => {\n    const handlePanelVisibilityChange = () => {\n      if (isRightPanelShown) {\n        // If no tab is selected, default to files tab\n        if (!selectedTab) {\n          onTabChange(\"files\");\n        }\n      }\n    };\n\n    handlePanelVisibilityChange();\n  }, [isRightPanelShown, selectedTab, onTabChange]);\n\n  const { t, i18n } = useTranslation(\"openhands\");\n\n  // `files` is intentionally the leftmost tab — it's the primary entry\n  // point for inspecting agent output (workspace files + git diff).\n  const tabs = [\n    {\n      tabValue: \"files\",\n      isActive: isTabActive(\"files\"),\n      icon: DocumentIcon,\n      onClick: () => selectTab(\"files\"),\n      tooltipContent: t(I18nKey.COMMON$FILES),\n      tooltipAriaLabel: t(I18nKey.COMMON$FILES),\n      label: t(I18nKey.COMMON$FILES),\n    },\n    {\n      tabValue: \"planner\",\n      isActive: isTabActive(\"planner\"),\n      icon: LessonPlanIcon,\n      onClick: () => selectTab(\"planner\"),\n      tooltipContent: t(I18nKey.COMMON$PLANNER),\n      tooltipAriaLabel: t(I18nKey.COMMON$PLANNER),\n      label: t(I18nKey.COMMON$PLANNER),\n    },\n    {\n      tabValue: \"vscode\",\n      isActive: isTabActive(\"vscode\"),\n      icon: VSCodeIcon,\n      onClick: () => selectTab(\"vscode\"),\n      tooltipContent: <VSCodeTooltipContent />,\n      tooltipAriaLabel: t(I18nKey.COMMON$CODE),\n      label: t(I18nKey.COMMON$CODE),\n    },\n    {\n      tabValue: \"terminal\",\n      isActive: isTabActive(\"terminal\"),\n      icon: TerminalIcon,\n      onClick: () => selectTab(\"terminal\"),\n      tooltipContent: t(I18nKey.COMMON$TERMINAL),\n      tooltipAriaLabel: t(I18nKey.COMMON$TERMINAL),\n      label: t(I18nKey.COMMON$TERMINAL),\n      className: \"pl-2\",\n    },\n    {\n      tabValue: \"browser\",\n      isActive: isTabActive(\"browser\"),\n      icon: GlobeIcon,\n      onClick: () => selectTab(\"browser\"),\n      tooltipContent: t(I18nKey.COMMON$BROWSER),\n      tooltipAriaLabel: t(I18nKey.COMMON$BROWSER),\n      label: t(I18nKey.COMMON$BROWSER),\n    },\n  ];\n\n  if (hasTaskList) {\n    // Insert after `files` so the leftmost slot stays Files.\n    tabs.splice(1, 0, {\n      tabValue: \"tasklist\",\n      isActive: isTabActive(\"tasklist\"),\n      icon: DoubleCheckIcon,\n      onClick: () => selectTab(\"tasklist\"),\n      tooltipContent: t(I18nKey.COMMON$TASK_LIST),\n      tooltipAriaLabel: t(I18nKey.COMMON$TASK_LIST),\n      label: t(I18nKey.COMMON$TASK_LIST),\n    });\n  }\n\n  // Pinned tabs always show in the bar. Unpinned tabs stay hidden unless the\n  // user has that tab selected — then it appears while active so the bar\n  // matches the open panel. Hide VS Code and Planner on local backends —\n  // both are cloud-only (the planning agent isn't supported locally).\n  const visibleTabs = tabs.filter((tab) => {\n    if (tab.tabValue === \"vscode\" && backend.kind !== \"cloud\") return false;\n    if (tab.tabValue === \"planner\" && backend.kind !== \"cloud\") return false;\n    if (!persistedState.unpinnedTabs.includes(tab.tabValue)) return true;\n    return selectedTab === tab.tabValue;\n  });\n\n  const unpinnedSignature = persistedState.unpinnedTabs.join(\",\");\n\n  const isAgentRunning =\n    curAgentState === AgentState.RUNNING ||\n    curAgentState === AgentState.LOADING;\n  const isBuildDisabled = isAgentRunning || !planContent;\n\n  const tabsRowInnerRef = useRef<HTMLDivElement>(null);\n  const measureRowRef = useRef<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  const [inlineTabCount, setInlineTabCount] = useState(visibleTabs.length);\n\n  useLayoutEffect(() => {\n    const rowInner = tabsRowInnerRef.current;\n    const measureRow = measureRowRef.current;\n    const menuEl = menuRef.current;\n    if (!rowInner || !measureRow || !menuEl) return undefined;\n\n    const measure = () => {\n      const measureButtons = measureRow.querySelectorAll<HTMLButtonElement>(\n        '[data-tab-measure=\"true\"]',\n      );\n      const tabCount = measureButtons.length;\n\n      const rowWidth = rowInner.getBoundingClientRect().width;\n      if (rowWidth === 0) {\n        setInlineTabCount(tabCount);\n        return;\n      }\n\n      const widths = Array.from(measureButtons).map(\n        (button) => button.getBoundingClientRect().width,\n      );\n\n      if (widths.length !== tabCount || tabCount === 0) {\n        setInlineTabCount(Math.max(0, tabCount));\n        return;\n      }\n\n      const menuWidth = menuEl.getBoundingClientRect().width;\n      const gapCss =\n        getComputedStyle(rowInner).columnGap || getComputedStyle(rowInner).gap;\n      const gapPx = parseFloat(gapCss) || 6;\n\n      let nextCount = 0;\n      for (let k = tabCount; k >= 0; k -= 1) {\n        let total = menuWidth;\n        for (let i = 0; i < k; i += 1) {\n          total += widths[i] ?? 0;\n        }\n        if (k > 0) {\n          total += k * gapPx;\n        }\n        if (total <= rowWidth + 0.5) {\n          nextCount = k;\n          break;\n        }\n      }\n\n      setInlineTabCount((prev) => (prev === nextCount ? prev : nextCount));\n    };\n\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return undefined;\n    const ro = new ResizeObserver(measure);\n    ro.observe(rowInner);\n    return () => ro.disconnect();\n  }, [\n    unpinnedSignature,\n    visibleTabs.length,\n    hasTaskList,\n    backend.kind,\n    selectedTab,\n    isRightPanelShown,\n    i18n.language,\n  ]);\n\n  const safeInlineTabCount = Math.min(inlineTabCount, visibleTabs.length);\n\n  return (\n    <>\n      <div\n        className={cn(\n          \"relative w-full min-w-0\",\n          variant === \"compact\"\n            ? \"flex h-full min-h-0 items-center py-0 pl-0 pr-1\"\n            : \"min-h-10 p-1\",\n        )}\n      >\n        <div\n          ref={measureRowRef}\n          aria-hidden\n          className=\"pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5\"\n        >\n          {visibleTabs.map(\n            (\n              {\n                tabValue,\n                icon,\n                isActive,\n                tooltipContent,\n                tooltipAriaLabel,\n                label,\n                className: tabClassName,\n              },\n              index,\n            ) => (\n              <ChatActionTooltip\n                key={`measure-${tabValue}-${index}`}\n                tooltip={tooltipContent}\n                ariaLabel={tooltipAriaLabel}\n              >\n                <ConversationTabNav\n                  tabValue={tabValue}\n                  icon={icon}\n                  onClick={() => {}}\n                  isActive={isActive}\n                  label={label}\n                  className={cn(tabClassName, \"shrink-0\")}\n                  measureOnly\n                />\n              </ChatActionTooltip>\n            ),\n          )}\n        </div>\n        <div\n          ref={tabsRowInnerRef}\n          className=\"flex w-full min-w-0 flex-nowrap items-center justify-start\"\n        >\n          <div className=\"flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5\">\n            <div className=\"flex min-w-0 flex-1 flex-nowrap items-center gap-1.5 overflow-x-hidden\">\n              {visibleTabs\n                .slice(0, safeInlineTabCount)\n                .map(\n                  (\n                    {\n                      tabValue,\n                      icon,\n                      onClick,\n                      isActive,\n                      tooltipContent,\n                      tooltipAriaLabel,\n                      label,\n                      className: tabClassName,\n                    },\n                    index,\n                  ) => (\n                    <ChatActionTooltip\n                      key={`${tabValue}-${index}`}\n                      tooltip={tooltipContent}\n                      ariaLabel={tooltipAriaLabel}\n                    >\n                      <ConversationTabNav\n                        tabValue={tabValue}\n                        icon={icon}\n                        onClick={onClick}\n                        isActive={isActive}\n                        label={label}\n                        className={cn(tabClassName, \"shrink-0\")}\n                      />\n                    </ChatActionTooltip>\n                  ),\n                )}\n            </div>\n            <div ref={menuRef} className=\"relative shrink-0\">\n              <EllipsisButton\n                ref={anchorRef}\n                onClick={() => setIsMenuOpen(!isMenuOpen)}\n                ariaLabel={t(I18nKey.COMMON$MORE_OPTIONS)}\n                iconClassName={\n                  variant === \"compact\" ? mobileTopBarIconClassName : undefined\n                }\n              />\n              <ConversationTabsContextMenu\n                isOpen={isMenuOpen}\n                onClose={() => setIsMenuOpen(false)}\n                ignoreOutsideClickRef={anchorRef}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n      {isTabActive(\"planner\") && (\n        <div\n          className={cn(\n            \"flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1\",\n          )}\n        >\n          <button\n            type=\"button\"\n            onClick={handleBuildPlanClick}\n            disabled={isBuildDisabled}\n            className={cn(\n              \"flex h-5 min-w-17 items-center justify-center rounded bg-white px-2 transition-opacity\",\n              isBuildDisabled\n                ? \"cursor-not-allowed opacity-50\"\n                : \"cursor-pointer hover:opacity-90\",\n            )}\n            data-testid=\"planner-tab-build-button\"\n          >\n            <Typography.Text className=\"text-[11px] font-normal leading-5 text-black\">\n              {/* eslint-disable-next-line i18next/no-literal-string */}\n              {t(I18nKey.COMMON$BUILD)} ⌘↩\n            </Typography.Text>\n          </button>\n        </div>\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/mcp-logo-badge.cjs

@@ -1,2 +1,2 @@
-require(`../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../utils/utils.cjs`),t=require(`../../node_modules/@openhands/extensions/mcps/logos.cjs`);let n=require(`react/jsx-runtime`);var r={xs:`h-4 w-4 rounded [&>svg]:h-2.5 [&>svg]:w-2.5`,sm:`h-5 w-5 rounded-md [&>svg]:h-3 [&>svg]:w-3`,md:`h-10 w-10 rounded-lg [&>svg]:h-5 [&>svg]:w-5`};function i({entry:i,size:a=`md`,className:o,fallback:s,testId:c}){return(0,n.jsx)(`span`,{"aria-hidden":`true`,title:i?.name,"data-testid":c,className:e.cn(`inline-flex shrink-0 items-center justify-center overflow-hidden`,`border border-white/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]`,r[a],o),style:{backgroundColor:i?.iconBg??`var(--oh-color-tertiary)`,color:i?.iconColor??`#FFFFFF`},children:i?t.MCP_LOGOS[i.id]??s??t.MCP_FALLBACK_LOGO:s??t.MCP_FALLBACK_LOGO})}exports.McpLogoBadge=i;
+require(`../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../utils/utils.cjs`),t=require(`../../node_modules/@openhands/extensions/integrations/logos.cjs`);let n=require(`react/jsx-runtime`);var r={xs:`h-4 w-4 rounded [&>svg]:h-2.5 [&>svg]:w-2.5`,sm:`h-5 w-5 rounded-md [&>svg]:h-3 [&>svg]:w-3`,md:`h-10 w-10 rounded-lg [&>svg]:h-5 [&>svg]:w-5`};function i({entry:i,size:a=`md`,className:o,fallback:s,testId:c}){return(0,n.jsx)(`span`,{"aria-hidden":`true`,title:i?.name,"data-testid":c,className:e.cn(`inline-flex shrink-0 items-center justify-center overflow-hidden`,`border border-white/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]`,r[a],o),style:{backgroundColor:i?.iconBg??`var(--oh-color-tertiary)`,color:i?.iconColor??`#FFFFFF`},children:i?t.INTEGRATION_LOGOS[i.id]??s??t.INTEGRATION_FALLBACK_LOGO:s??t.INTEGRATION_FALLBACK_LOGO})}exports.McpLogoBadge=i;
 //# sourceMappingURL=mcp-logo-badge.cjs.map

package/dist/components/features/mcp-logo-badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-logo-badge.cjs","names":[],"sources":["../../../src/components/features/mcp-logo-badge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { McpCatalogEntry } from \"@openhands/extensions/mcps\";\nimport { MCP_FALLBACK_LOGO, MCP_LOGOS } from \"@openhands/extensions/mcps/logos\";\nimport { cn } from \"#/utils/utils\";\n\ntype McpLogoEntry = Pick<\n  McpCatalogEntry,\n  \"id\" | \"name\" | \"iconBg\" | \"iconColor\"\n>;\n\nexport type { McpLogoEntry };\n\ninterface McpLogoBadgeProps {\n  entry?: McpLogoEntry | null;\n  size?: \"xs\" | \"sm\" | \"md\";\n  className?: string;\n  fallback?: ReactNode;\n  testId?: string;\n}\n\nconst sizeClassNames = {\n  xs: \"h-4 w-4 rounded [&>svg]:h-2.5 [&>svg]:w-2.5\",\n  sm: \"h-5 w-5 rounded-md [&>svg]:h-3 [&>svg]:w-3\",\n  md: \"h-10 w-10 rounded-lg [&>svg]:h-5 [&>svg]:w-5\",\n};\n\nexport function McpLogoBadge({\n  entry,\n  size = \"md\",\n  className,\n  fallback,\n  testId,\n}: McpLogoBadgeProps) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      title={entry?.name}\n      data-testid={testId}\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center overflow-hidden\",\n        \"border border-white/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]\",\n        sizeClassNames[size],\n        className,\n      )}\n      style={{\n        backgroundColor: entry?.iconBg ?? \"var(--oh-color-tertiary)\",\n        color: entry?.iconColor ?? \"#FFFFFF\",\n      }}\n    >\n      {entry\n        ? (MCP_LOGOS[entry.id] ?? fallback ?? MCP_FALLBACK_LOGO)\n        : (fallback ?? MCP_FALLBACK_LOGO)}\n    </span>\n  );\n}\n"],"mappings":"iMAoBA,IAAM,EAAiB,CACrB,GAAI,8CACJ,GAAI,6CACJ,GAAI,+CACL,CAED,SAAgB,EAAa,CAC3B,QACA,OAAO,KACP,YACA,WACA,UACoB,CACpB,OACE,EAAA,EAAA,KAAC,OAAD,CACE,cAAY,OACZ,MAAO,GAAO,KACd,cAAa,EACb,UAAW,EAAA,GACT,mEACA,uEACA,EAAe,GACf,EACD,CACD,MAAO,CACL,gBAAiB,GAAO,QAAU,2BAClC,MAAO,GAAO,WAAa,UAC5B,UAEA,EACI,EAAA,UAAU,EAAM,KAAO,GAAY,EAAA,kBACnC,GAAY,EAAA,kBACZ,CAAA"}
+{"version":3,"file":"mcp-logo-badge.cjs","names":[],"sources":["../../../src/components/features/mcp-logo-badge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { IntegrationCatalogEntry } from \"@openhands/extensions/integrations\";\nimport {\n  INTEGRATION_FALLBACK_LOGO,\n  INTEGRATION_LOGOS,\n} from \"@openhands/extensions/integrations/logos\";\nimport { cn } from \"#/utils/utils\";\n\ntype McpLogoEntry = Pick<\n  IntegrationCatalogEntry,\n  \"id\" | \"name\" | \"iconBg\" | \"iconColor\"\n>;\n\nexport type { McpLogoEntry };\n\ninterface McpLogoBadgeProps {\n  entry?: McpLogoEntry | null;\n  size?: \"xs\" | \"sm\" | \"md\";\n  className?: string;\n  fallback?: ReactNode;\n  testId?: string;\n}\n\nconst sizeClassNames = {\n  xs: \"h-4 w-4 rounded [&>svg]:h-2.5 [&>svg]:w-2.5\",\n  sm: \"h-5 w-5 rounded-md [&>svg]:h-3 [&>svg]:w-3\",\n  md: \"h-10 w-10 rounded-lg [&>svg]:h-5 [&>svg]:w-5\",\n};\n\nexport function McpLogoBadge({\n  entry,\n  size = \"md\",\n  className,\n  fallback,\n  testId,\n}: McpLogoBadgeProps) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      title={entry?.name}\n      data-testid={testId}\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center overflow-hidden\",\n        \"border border-white/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]\",\n        sizeClassNames[size],\n        className,\n      )}\n      style={{\n        backgroundColor: entry?.iconBg ?? \"var(--oh-color-tertiary)\",\n        color: entry?.iconColor ?? \"#FFFFFF\",\n      }}\n    >\n      {entry\n        ? (INTEGRATION_LOGOS[entry.id] ?? fallback ?? INTEGRATION_FALLBACK_LOGO)\n        : (fallback ?? INTEGRATION_FALLBACK_LOGO)}\n    </span>\n  );\n}\n"],"mappings":"yMAuBA,IAAM,EAAiB,CACrB,GAAI,8CACJ,GAAI,6CACJ,GAAI,+CACL,CAED,SAAgB,EAAa,CAC3B,QACA,OAAO,KACP,YACA,WACA,UACoB,CACpB,OACE,EAAA,EAAA,KAAC,OAAD,CACE,cAAY,OACZ,MAAO,GAAO,KACd,cAAa,EACb,UAAW,EAAA,GACT,mEACA,uEACA,EAAe,GACf,EACD,CACD,MAAO,CACL,gBAAiB,GAAO,QAAU,2BAClC,MAAO,GAAO,WAAa,UAC5B,UAEA,EACI,EAAA,kBAAkB,EAAM,KAAO,GAAY,EAAA,0BAC3C,GAAY,EAAA,0BACZ,CAAA"}

package/dist/components/features/mcp-logo-badge.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
-import type { McpCatalogEntry } from "@openhands/extensions/mcps";
-type McpLogoEntry = Pick<McpCatalogEntry, "id" | "name" | "iconBg" | "iconColor">;
+import type { IntegrationCatalogEntry } from "@openhands/extensions/integrations";
+type McpLogoEntry = Pick<IntegrationCatalogEntry, "id" | "name" | "iconBg" | "iconColor">;
 export type { McpLogoEntry };
 interface McpLogoBadgeProps {
     entry?: McpLogoEntry | null;

package/dist/components/features/mcp-logo-badge.js

@@ -1,5 +1,5 @@
 import { cn as e } from "../../utils/utils.js";
-import { MCP_FALLBACK_LOGO as t, MCP_LOGOS as n } from "../../node_modules/@openhands/extensions/mcps/logos.js";
+import { INTEGRATION_FALLBACK_LOGO as t, INTEGRATION_LOGOS as n } from "../../node_modules/@openhands/extensions/integrations/logos.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/components/features/mcp-logo-badge.tsx
 var i = {

package/dist/components/features/mcp-logo-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-logo-badge.js","names":[],"sources":["../../../src/components/features/mcp-logo-badge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { McpCatalogEntry } from \"@openhands/extensions/mcps\";\nimport { MCP_FALLBACK_LOGO, MCP_LOGOS } from \"@openhands/extensions/mcps/logos\";\nimport { cn } from \"#/utils/utils\";\n\ntype McpLogoEntry = Pick<\n  McpCatalogEntry,\n  \"id\" | \"name\" | \"iconBg\" | \"iconColor\"\n>;\n\nexport type { McpLogoEntry };\n\ninterface McpLogoBadgeProps {\n  entry?: McpLogoEntry | null;\n  size?: \"xs\" | \"sm\" | \"md\";\n  className?: string;\n  fallback?: ReactNode;\n  testId?: string;\n}\n\nconst sizeClassNames = {\n  xs: \"h-4 w-4 rounded [&>svg]:h-2.5 [&>svg]:w-2.5\",\n  sm: \"h-5 w-5 rounded-md [&>svg]:h-3 [&>svg]:w-3\",\n  md: \"h-10 w-10 rounded-lg [&>svg]:h-5 [&>svg]:w-5\",\n};\n\nexport function McpLogoBadge({\n  entry,\n  size = \"md\",\n  className,\n  fallback,\n  testId,\n}: McpLogoBadgeProps) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      title={entry?.name}\n      data-testid={testId}\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center overflow-hidden\",\n        \"border border-white/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]\",\n        sizeClassNames[size],\n        className,\n      )}\n      style={{\n        backgroundColor: entry?.iconBg ?? \"var(--oh-color-tertiary)\",\n        color: entry?.iconColor ?? \"#FFFFFF\",\n      }}\n    >\n      {entry\n        ? (MCP_LOGOS[entry.id] ?? fallback ?? MCP_FALLBACK_LOGO)\n        : (fallback ?? MCP_FALLBACK_LOGO)}\n    </span>\n  );\n}\n"],"mappings":";;;;AAoBA,IAAM,IAAiB;CACrB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,SAAgB,EAAa,EAC3B,UACA,UAAO,MACP,cACA,aACA,aACoB;AACpB,QACE,kBAAC,QAAD;EACE,eAAY;EACZ,OAAO,GAAO;EACd,eAAa;EACb,WAAW,EACT,oEACA,wEACA,EAAe,IACf,EACD;EACD,OAAO;GACL,iBAAiB,GAAO,UAAU;GAClC,OAAO,GAAO,aAAa;GAC5B;YAEA,IACI,EAAU,EAAM,OAAO,KAAY,IACnC,KAAY;EACZ,CAAA"}
+{"version":3,"file":"mcp-logo-badge.js","names":[],"sources":["../../../src/components/features/mcp-logo-badge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { IntegrationCatalogEntry } from \"@openhands/extensions/integrations\";\nimport {\n  INTEGRATION_FALLBACK_LOGO,\n  INTEGRATION_LOGOS,\n} from \"@openhands/extensions/integrations/logos\";\nimport { cn } from \"#/utils/utils\";\n\ntype McpLogoEntry = Pick<\n  IntegrationCatalogEntry,\n  \"id\" | \"name\" | \"iconBg\" | \"iconColor\"\n>;\n\nexport type { McpLogoEntry };\n\ninterface McpLogoBadgeProps {\n  entry?: McpLogoEntry | null;\n  size?: \"xs\" | \"sm\" | \"md\";\n  className?: string;\n  fallback?: ReactNode;\n  testId?: string;\n}\n\nconst sizeClassNames = {\n  xs: \"h-4 w-4 rounded [&>svg]:h-2.5 [&>svg]:w-2.5\",\n  sm: \"h-5 w-5 rounded-md [&>svg]:h-3 [&>svg]:w-3\",\n  md: \"h-10 w-10 rounded-lg [&>svg]:h-5 [&>svg]:w-5\",\n};\n\nexport function McpLogoBadge({\n  entry,\n  size = \"md\",\n  className,\n  fallback,\n  testId,\n}: McpLogoBadgeProps) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      title={entry?.name}\n      data-testid={testId}\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center overflow-hidden\",\n        \"border border-white/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]\",\n        sizeClassNames[size],\n        className,\n      )}\n      style={{\n        backgroundColor: entry?.iconBg ?? \"var(--oh-color-tertiary)\",\n        color: entry?.iconColor ?? \"#FFFFFF\",\n      }}\n    >\n      {entry\n        ? (INTEGRATION_LOGOS[entry.id] ?? fallback ?? INTEGRATION_FALLBACK_LOGO)\n        : (fallback ?? INTEGRATION_FALLBACK_LOGO)}\n    </span>\n  );\n}\n"],"mappings":";;;;AAuBA,IAAM,IAAiB;CACrB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,SAAgB,EAAa,EAC3B,UACA,UAAO,MACP,cACA,aACA,aACoB;AACpB,QACE,kBAAC,QAAD;EACE,eAAY;EACZ,OAAO,GAAO;EACd,eAAa;EACb,WAAW,EACT,oEACA,wEACA,EAAe,IACf,EACD;EACD,OAAO;GACL,iBAAiB,GAAO,UAAU;GAClC,OAAO,GAAO,aAAa;GAC5B;YAEA,IACI,EAAkB,EAAM,OAAO,KAAY,IAC3C,KAAY;EACZ,CAAA"}

package/dist/components/features/mcp-page/custom-server-editor.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(`../../../utils/retrieve-axios-error-message.cjs`),s=require(`../../shared/modals/confirmation-modal.cjs`),c=require(`../../../hooks/mutation/use-delete-mcp-server.cjs`),l=require(`../../../hooks/mutation/use-add-mcp-server.cjs`),u=require(`../settings/mcp-settings/mcp-server-form.cjs`),d=require(`../../../hooks/mutation/use-update-mcp-server.cjs`);let f=require(`react`);f=e.__toESM(f,1);let p=require(`react/jsx-runtime`);function m({server:e,existingServers:m,onClose:h}){let{t:g}=t.useTranslation(`openhands`),{mutate:_,isPending:v}=l.useAddMcpServer(),{mutate:y,isPending:b}=d.useUpdateMcpServer(),{mutate:x,isPending:S}=c.useDeleteMcpServer(),[C,w]=f.default.useState(!1),T=!!e.id,E=v||b||S,D=E||C,O=e=>{r.displayErrorToast(o.retrieveAxiosErrorMessage(e)||g(n.I18nKey.ERROR$GENERIC))};return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(i.ModalBackdrop,{onClose:D?void 0:h,closeOnEscape:!D,"aria-label":g(T?n.I18nKey.MCP$EDIT_CUSTOM_TITLE:n.I18nKey.MCP$ADD_CUSTOM_TITLE),children:(0,p.jsxs)(`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:[(0,p.jsx)(a.ModalCloseButton,{onClose:h,testId:`mcp-custom-editor-close`,disabled:D}),(0,p.jsx)(`h2`,{className:`mb-4 pr-6 text-lg font-semibold`,children:g(T?n.I18nKey.MCP$EDIT_CUSTOM_TITLE:n.I18nKey.MCP$ADD_CUSTOM_TITLE)}),(0,p.jsx)(u.MCPServerForm,{mode:T?`edit`:`add`,server:T?e:void 0,existingServers:m,onSubmit:t=>{T?y({serverId:e.id,server:t},{onSuccess:h,onError:O}):_(t,{onSuccess:h,onError:O})},onCancel:h,onDelete:T?()=>w(!0):void 0,isActionDisabled:E})]})}),C?(0,p.jsx)(s.ConfirmationModal,{text:g(n.I18nKey.SETTINGS$MCP_CONFIRM_DELETE),onCancel:()=>w(!1),onConfirm:()=>{x(e,{onSuccess:()=>{r.displaySuccessToast(g(n.I18nKey.MCP$REMOVE_SUCCESS)),w(!1),h()},onError:e=>{O(e),w(!1)}})},isConfirming:S}):null]})}exports.CustomServerEditor=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(`../../../utils/retrieve-axios-error-message.cjs`),s=require(`../../shared/modals/confirmation-modal.cjs`),c=require(`../../../hooks/mutation/use-delete-mcp-server.cjs`),l=require(`../../../hooks/mutation/use-add-mcp-server.cjs`),u=require(`../../../hooks/mutation/use-test-mcp-server.cjs`),d=require(`../settings/mcp-settings/mcp-server-form.cjs`),f=require(`../../../hooks/mutation/use-update-mcp-server.cjs`);let p=require(`react`);p=e.__toESM(p,1);let m=require(`react/jsx-runtime`);function h({server:e,existingServers:h,onClose:g}){let{t:_}=t.useTranslation(`openhands`),{mutate:v,isPending:y}=l.useAddMcpServer(),{mutate:b,isPending:x}=f.useUpdateMcpServer(),{mutate:S,isPending:C}=c.useDeleteMcpServer(),{mutate:w,isPending:T,data:E,reset:D}=u.useTestMcpServer(),[O,k]=p.default.useState(!1),A=!!e.id,j=y||x||C,M=j||T||O,N=e=>{switch(e.error_kind){case`timeout`:return _(n.I18nKey.MCP$TEST_ERROR_TIMEOUT);case`connection`:return _(n.I18nKey.MCP$TEST_ERROR_CONNECTION);default:return _(n.I18nKey.MCP$TEST_ERROR_UNKNOWN,{error:e.error})}},P=p.default.useMemo(()=>E?E.ok?{ok:!0,text:_(n.I18nKey.MCP$TEST_SUCCESS,{count:E.tools.length})}:{ok:!1,text:N(E)}:null,[E,_]),F=e=>{r.displayErrorToast(o.retrieveAxiosErrorMessage(e)||_(n.I18nKey.ERROR$GENERIC))};return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(i.ModalBackdrop,{onClose:M?void 0:g,closeOnEscape:!M,"aria-label":_(A?n.I18nKey.MCP$EDIT_CUSTOM_TITLE:n.I18nKey.MCP$ADD_CUSTOM_TITLE),children:(0,m.jsxs)(`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:[(0,m.jsx)(a.ModalCloseButton,{onClose:g,testId:`mcp-custom-editor-close`,disabled:M}),(0,m.jsx)(`h2`,{className:`mb-4 pr-6 text-lg font-semibold`,children:_(A?n.I18nKey.MCP$EDIT_CUSTOM_TITLE:n.I18nKey.MCP$ADD_CUSTOM_TITLE)}),(0,m.jsx)(d.MCPServerForm,{mode:A?`edit`:`add`,server:A?e:void 0,existingServers:h,onSubmit:t=>{D(),w(t,{onSuccess:n=>{n.ok&&(A?b({serverId:e.id,server:t},{onSuccess:g,onError:F}):v(t,{onSuccess:g,onError:F}))},onError:F})},onCancel:g,onDelete:A?()=>k(!0):void 0,isActionDisabled:j,onTest:e=>{w(e)},isTestPending:T,testMessage:P})]})}),O?(0,m.jsx)(s.ConfirmationModal,{text:_(n.I18nKey.SETTINGS$MCP_CONFIRM_DELETE),onCancel:()=>k(!1),onConfirm:()=>{S(e,{onSuccess:()=>{r.displaySuccessToast(_(n.I18nKey.MCP$REMOVE_SUCCESS)),k(!1),g()},onError:e=>{F(e),k(!1)}})},isConfirming:C}):null]})}exports.CustomServerEditor=h;
 //# sourceMappingURL=custom-server-editor.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"custom-server-editor.cjs","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":"wwBA6BA,SAAgB,EAAmB,CACjC,SACA,kBACA,WAC0B,CAC1B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,OAAQ,EAAc,UAAW,GAAa,EAAA,iBAAiB,CACjE,CAAE,OAAQ,EAAiB,UAAW,GAC1C,EAAA,oBAAoB,CAChB,CAAE,OAAQ,EAAiB,UAAW,GAC1C,EAAA,oBAAoB,CAChB,CAAC,EAAmB,GAAwB,EAAA,QAAM,SAAS,GAAM,CAEjE,EAAY,CAAC,CAAC,EAAO,GACrB,EAAY,GAAY,GAAc,EACtC,EAAmB,GAAa,EAMhC,EAAe,GAAiB,CAEpC,EAAA,kBADgB,EAAA,0BAA0B,EACxB,EAAW,EAAE,EAAA,QAAQ,cAAc,CAAC,EA4BxD,OACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,cAAD,CAIE,QAAS,EAAmB,IAAA,GAAY,EACxC,cAAe,CAAC,EAChB,aAEM,EADJ,EACM,EAAA,QAAQ,sBACR,EAAA,QAAQ,qBAAqB,WAGrC,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,oBACZ,UAAU,2JAFZ,EAIE,EAAA,EAAA,KAAC,EAAA,iBAAD,CACW,UACT,OAAO,0BACP,SAAU,EACV,CAAA,EACF,EAAA,EAAA,KAAC,KAAD,CAAI,UAAU,2CAER,EADH,EACK,EAAA,QAAQ,sBACR,EAAA,QAAQ,qBAAqB,CAChC,CAAA,EACL,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,KAAM,EAAY,OAAS,MAC3B,OAAQ,EAAY,EAAS,IAAA,GACZ,kBACjB,SAzDY,GAA6B,CAC7C,EACF,EACE,CAAE,SAAU,EAAO,GAAI,OAAQ,EAAS,CACxC,CAAE,UAAW,EAAS,QAAS,EAAa,CAC7C,CAED,EAAa,EAAS,CAAE,UAAW,EAAS,QAAS,EAAa,CAAC,EAmD7D,SAAU,EACV,SAAU,MAAkB,EAAqB,GAAK,CAAG,IAAA,GACzD,iBAAkB,EAClB,CAAA,CACE,GACQ,CAAA,CAEf,GACC,EAAA,EAAA,KAAC,EAAA,kBAAD,CACE,KAAM,EAAE,EAAA,QAAQ,4BAA4B,CAC5C,aAAgB,EAAqB,GAAM,CAC3C,cA1D0B,CAChC,EAAgB,EAAQ,CACtB,cAAiB,CACf,EAAA,oBAAoB,EAAE,EAAA,QAAQ,mBAAmB,CAAC,CAClD,EAAqB,GAAM,CAC3B,GAAS,EAEX,QAAU,GAAQ,CAChB,EAAY,EAAI,CAChB,EAAqB,GAAM,EAE9B,CAAC,EAgDI,aAAc,EACd,CAAA,CACA,KACH,CAAA,CAAA"}
+{"version":3,"file":"custom-server-editor.cjs","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":"q0BAkCA,SAAgB,EAAmB,CACjC,SACA,kBACA,WAC0B,CAC1B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,OAAQ,EAAc,UAAW,GAAa,EAAA,iBAAiB,CACjE,CAAE,OAAQ,EAAiB,UAAW,GAC1C,EAAA,oBAAoB,CAChB,CAAE,OAAQ,EAAiB,UAAW,GAC1C,EAAA,oBAAoB,CAChB,CACJ,OAAQ,EACR,UAAW,EACX,KAAM,EACN,MAAO,GACL,EAAA,kBAAkB,CAChB,CAAC,EAAmB,GAAwB,EAAA,QAAM,SAAS,GAAM,CAEjE,EAAY,CAAC,CAAC,EAAO,GACrB,EAAY,GAAY,GAAc,EACtC,EAAmB,GAAa,GAAa,EAE7C,EAAwB,GAAoC,CAChE,OAAQ,EAAQ,WAAhB,CACE,IAAK,UACH,OAAO,EAAE,EAAA,QAAQ,uBAAuB,CAC1C,IAAK,aACH,OAAO,EAAE,EAAA,QAAQ,0BAA0B,CAC7C,QACE,OAAO,EAAE,EAAA,QAAQ,uBAAwB,CAAE,MAAO,EAAQ,MAAO,CAAC,GAIlE,EAAkC,EAAA,QAAM,YACvC,EACD,EAAW,GACN,CACL,GAAI,GACJ,KAAM,EAAE,EAAA,QAAQ,iBAAkB,CAAE,MAAO,EAAW,MAAM,OAAQ,CAAC,CACtE,CAEI,CAAE,GAAI,GAAO,KAAM,EAAqB,EAAW,CAAE,CAPpC,KAQvB,CAAC,EAAY,EAAE,CAAC,CAMb,EAAe,GAAiB,CAEpC,EAAA,kBADgB,EAAA,0BAA0B,EACxB,EAAW,EAAE,EAAA,QAAQ,cAAc,CAAC,EA0CxD,OACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,cAAD,CAIE,QAAS,EAAmB,IAAA,GAAY,EACxC,cAAe,CAAC,EAChB,aAEM,EADJ,EACM,EAAA,QAAQ,sBACR,EAAA,QAAQ,qBAAqB,WAGrC,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,oBACZ,UAAU,2JAFZ,EAIE,EAAA,EAAA,KAAC,EAAA,iBAAD,CACW,UACT,OAAO,0BACP,SAAU,EACV,CAAA,EACF,EAAA,EAAA,KAAC,KAAD,CAAI,UAAU,2CAER,EADH,EACK,EAAA,QAAQ,sBACR,EAAA,QAAQ,qBAAqB,CAChC,CAAA,EACL,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,KAAM,EAAY,OAAS,MAC3B,OAAQ,EAAY,EAAS,IAAA,GACZ,kBACjB,SAvEY,GAA6B,CACjD,GAAW,CACX,EAAW,EAAS,CAClB,UAAY,GAAW,CAChB,EAAO,KAIR,EACF,EACE,CAAE,SAAU,EAAO,GAAI,OAAQ,EAAS,CACxC,CAAE,UAAW,EAAS,QAAS,EAAa,CAC7C,CAED,EAAa,EAAS,CAAE,UAAW,EAAS,QAAS,EAAa,CAAC,GAGvE,QAAS,EACV,CAAC,EAsDM,SAAU,EACV,SAAU,MAAkB,EAAqB,GAAK,CAAG,IAAA,GACzD,iBAAkB,EAClB,OAtDe,GAA6B,CACpD,EAAW,EAAQ,EAsDX,cAAe,EACF,cACb,CAAA,CACE,GACQ,CAAA,CAEf,GACC,EAAA,EAAA,KAAC,EAAA,kBAAD,CACE,KAAM,EAAE,EAAA,QAAQ,4BAA4B,CAC5C,aAAgB,EAAqB,GAAM,CAC3C,cA7D0B,CAChC,EAAgB,EAAQ,CACtB,cAAiB,CACf,EAAA,oBAAoB,EAAE,EAAA,QAAQ,mBAAmB,CAAC,CAClD,EAAqB,GAAM,CAC3B,GAAS,EAEX,QAAU,GAAQ,CAChB,EAAY,EAAI,CAChB,EAAqB,GAAM,EAE9B,CAAC,EAmDI,aAAc,EACd,CAAA,CACA,KACH,CAAA,CAAA"}

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