npm - @openhands/agent-canvas - Versions diffs - 1.0.0-alpha.7 → 1.0.0-alpha.9 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (745) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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 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/conversation-panel/skills-modal.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../types/agent-state.cjs`),r=require(`../../../api/agent-server-config.cjs`),i=require(`../../../hooks/use-agent-state.cjs`),a=require(`../../../hooks/query/use-skills.cjs`),o=require(`../../shared/modals/modal-backdrop.cjs`),s=require(`../../shared/modals/modal-body.cjs`),c=require(`../../../utils/skill-scope.cjs`),l=require(`./skills-modal-header.cjs`),u=require(`./skills-modal-section.cjs`),d=require(`./skills-runtime-waiting-state.cjs`),f=require(`./skills-loading-state.cjs`),p=require(`./skills-empty-state.cjs`),m=require(`./skill-item.cjs`);let h=require(`react`),g=require(`react/jsx-runtime`);var _={project:t.I18nKey.SKILLS_MODAL$SECTION_PROJECT,personal:t.I18nKey.SKILLS_MODAL$SECTION_USER,public:t.I18nKey.SKILLS_MODAL$SECTION_PUBLIC};function v({onClose:t}){let{t:v}=e.useTranslation(`openhands`),{curAgentState:y}=i.useAgentState(),b=r.getAgentServerWorkingDir(),[x,S]=(0,h.useState)({}),{data:C,isLoading:w,isError:T,refetch:E,isRefetching:D}=a.useSkills(),O=(0,h.useMemo)(()=>C?c.groupSkillsByScope(C,b):null,[C,b]),k=e=>{S(t=>({...t,[e]:!t[e]}))},A=![n.AgentState.LOADING,n.AgentState.INIT].includes(y);return(0,g.jsx)(o.ModalBackdrop,{onClose:t,children:(0,g.jsxs)(s.ModalBody,{width:`lg`,className:`relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]`,testID:`skills-modal`,children:[(0,g.jsx)(l.SkillsModalHeader,{isLoading:w,isRefetching:D,onRefresh:E,onClose:t}),(0,g.jsx)(`div`,{className:`w-full h-[60vh] overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always`,children:A?w?(0,g.jsx)(f.SkillsLoadingState,{}):T||!C||C.length===0?(0,g.jsx)(p.SkillsEmptyState,{isError:T}):O&&(0,g.jsx)(`div`,{className:`divide-y divide-[var(--oh-border)]`,children:c.SKILL_SCOPE_ORDER.map(e=>{let t=O[e];return t.length===0?null:(0,g.jsx)(u.SkillsModalSection,{title:v(_[e]),count:t.length,children:t.map(t=>(0,g.jsx)(m.SkillItem,{skill:t,isExpanded:x[t.name]||!1,onToggle:k},`${e}-${t.name}`))},e)})}):(0,g.jsx)(d.SkillsRuntimeWaitingState,{})})]})})}exports.SkillsModal=v;
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../types/agent-state.cjs`),r=require(`../../../api/agent-server-config.cjs`),i=require(`../../../hooks/use-agent-state.cjs`),a=require(`../../../hooks/query/use-conversation-skills.cjs`),o=require(`../../shared/modals/modal-backdrop.cjs`),s=require(`../../shared/modals/modal-body.cjs`),c=require(`../../../utils/skill-scope.cjs`),l=require(`./skills-modal-header.cjs`),u=require(`./skills-modal-section.cjs`),d=require(`./skills-runtime-waiting-state.cjs`),f=require(`./skills-loading-state.cjs`),p=require(`./skills-empty-state.cjs`),m=require(`./skill-item.cjs`);let h=require(`react`),g=require(`react/jsx-runtime`);var _={project:t.I18nKey.SKILLS_MODAL$SECTION_PROJECT,personal:t.I18nKey.SKILLS_MODAL$SECTION_USER,public:t.I18nKey.SKILLS_MODAL$SECTION_PUBLIC};function v({onClose:t}){let{t:v}=e.useTranslation(`openhands`),{curAgentState:y}=i.useAgentState(),b=r.getAgentServerWorkingDir(),[x,S]=(0,h.useState)({}),{data:C,isLoading:w,isError:T,refetch:E,isRefetching:D}=a.useConversationSkills(),O=(0,h.useMemo)(()=>C?c.groupSkillsByScope(C,b):null,[C,b]),k=e=>{S(t=>({...t,[e]:!t[e]}))},A=![n.AgentState.LOADING,n.AgentState.INIT].includes(y);return(0,g.jsx)(o.ModalBackdrop,{onClose:t,children:(0,g.jsxs)(s.ModalBody,{width:`lg`,className:`relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]`,testID:`skills-modal`,children:[(0,g.jsx)(l.SkillsModalHeader,{isLoading:w,isRefetching:D,onRefresh:E,onClose:t}),(0,g.jsx)(`div`,{className:`w-full h-[60vh] overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always`,children:A?w?(0,g.jsx)(f.SkillsLoadingState,{}):T||!C||C.length===0?(0,g.jsx)(p.SkillsEmptyState,{isError:T}):O&&(0,g.jsx)(`div`,{className:`divide-y divide-[var(--oh-border)]`,children:c.SKILL_SCOPE_ORDER.map(e=>{let t=O[e];return t.length===0?null:(0,g.jsx)(u.SkillsModalSection,{title:v(_[e]),count:t.length,children:t.map(t=>(0,g.jsx)(m.SkillItem,{skill:t,isExpanded:x[t.name]||!1,onToggle:k},`${e}-${t.name}`))},e)})}):(0,g.jsx)(d.SkillsRuntimeWaitingState,{})})]})})}exports.SkillsModal=v;
 //# sourceMappingURL=skills-modal.cjs.map

package/dist/components/features/conversation-panel/skills-modal.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skills-modal.cjs","names":[],"sources":["../../../../src/components/features/conversation-panel/skills-modal.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalBody } from \"#/components/shared/modals/modal-body\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { getAgentServerWorkingDir } from \"#/api/agent-server-config\";\nimport { ~~useSkills~~ } from \"#/hooks/query/use-skills\";\nimport { AgentState } from \"#/types/agent-state\";\nimport {\n groupSkillsByScope,\n SKILL_SCOPE_ORDER,\n type SkillScope,\n} from \"#/utils/skill-scope\";\nimport { SkillsModalHeader } from \"./skills-modal-header\";\nimport { SkillsModalSection } from \"./skills-modal-section\";\nimport { SkillsRuntimeWaitingState } from \"./skills-runtime-waiting-state\";\nimport { SkillsLoadingState } from \"./skills-loading-state\";\nimport { SkillsEmptyState } from \"./skills-empty-state\";\nimport { SkillItem } from \"./skill-item\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\n\ninterface SkillsModalProps {\n onClose: () => void;\n}\n\nconst SECTION_TITLE_KEY: Record<SkillScope, I18nKey> = {\n project: I18nKey.SKILLS_MODAL$SECTION_PROJECT,\n personal: I18nKey.SKILLS_MODAL$SECTION_USER,\n public: I18nKey.SKILLS_MODAL$SECTION_PUBLIC,\n};\n\nexport function SkillsModal({ onClose }: SkillsModalProps) {\n const { t } = useTranslation(\"openhands\");\n const { curAgentState } = useAgentState();\n const projectDir = getAgentServerWorkingDir();\n const [expandedAgents, setExpandedAgents] = useState<Record<string, boolean>>(\n {},\n );\n const {\n data: skills,\n isLoading,\n isError,\n refetch,\n isRefetching,\n } = ~~useSkills~~();\n\n const groupedSkills = useMemo(\n () => (skills ? groupSkillsByScope(skills, projectDir) : null),\n [skills, projectDir],\n );\n\n const toggleAgent = (agentName: string) => {\n setExpandedAgents((prev) => ({\n ...prev,\n [agentName]: !prev[agentName],\n }));\n };\n\n const isAgentReady = ![AgentState.LOADING, AgentState.INIT].includes(\n curAgentState,\n );\n\n return (\n <ModalBackdrop onClose={onClose}>\n <ModalBody\n width=\"lg\"\n className=\"relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]\"\n testID=\"skills-modal\"\n >\n <SkillsModalHeader\n isLoading={isLoading}\n isRefetching={isRefetching}\n onRefresh={refetch}\n onClose={onClose}\n />\n\n <div className=\"w-full h-[60vh] overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\">\n {!isAgentReady ? (\n <SkillsRuntimeWaitingState />\n ) : isLoading ? (\n <SkillsLoadingState />\n ) : isError \|\| !skills \|\| skills.length === 0 ? (\n <SkillsEmptyState isError={isError} />\n ) : (\n groupedSkills && (\n <div className=\"divide-y divide-[var(--oh-border)]\">\n {SKILL_SCOPE_ORDER.map((scope) => {\n const scopedSkills = groupedSkills[scope];\n if (scopedSkills.length === 0) {\n return null;\n }\n\n return (\n <SkillsModalSection\n key={scope}\n title={t(SECTION_TITLE_KEY[scope])}\n count={scopedSkills.length}\n >\n {scopedSkills.map((skill) => {\n const isExpanded = expandedAgents[skill.name] \|\| false;\n\n return (\n <SkillItem\n key={`${scope}-${skill.name}`}\n skill={skill}\n isExpanded={isExpanded}\n onToggle={toggleAgent}\n />\n );\n })}\n </SkillsModalSection>\n );\n })}\n </div>\n )\n )}\n </div>\n </ModalBody>\n </ModalBackdrop>\n );\n}\n"],"mappings":"~~gyBAyBA~~,IAAM,EAAiD,CACrD,QAAS,EAAA,QAAQ,6BACjB,SAAU,EAAA,QAAQ,0BAClB,OAAQ,EAAA,QAAQ,4BACjB,CAED,SAAgB,EAAY,CAAE,WAA6B,CACzD,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,iBAAkB,EAAA,eAAe,CACnC,EAAa,EAAA,0BAA0B,CACvC,CAAC,EAAgB,IAAA,EAAA,EAAA,UACrB,EAAE,CACH,~~CACK~~,CACJ,KAAM,EACN,YACA,UACA,UACA,gBACE,EAAA,~~WAAW~~,~~CAET~~,GAAA,EAAA,EAAA,aACG,EAAS,EAAA,mBAAmB,EAAQ,EAAW,CAAG,KACzD,CAAC,EAAQ,EAAW,CACrB,CAEK,EAAe,GAAsB,CACzC,EAAmB,IAAU,CAC3B,GAAG,GACF,GAAY,CAAC,EAAK,GACpB,EAAE,EAGC,EAAe,CAAC,CAAC,EAAA,WAAW,QAAS,EAAA,WAAW,KAAK,CAAC,SAC1D,EACD,CAED,OACE,EAAA,EAAA,KAAC,EAAA,cAAD,CAAwB,oBACtB,EAAA,EAAA,MAAC,EAAA,UAAD,CACE,MAAM,KACN,UAAU,mFACV,OAAO,wBAHT,EAKE,EAAA,EAAA,KAAC,EAAA,kBAAD,CACa,YACG,eACd,UAAW,EACF,UACT,CAAA,EAEF,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,+HACX,EAEE,GACF,EAAA,EAAA,KAAC,EAAA,mBAAD,EAAsB,CAAA,CACpB,GAAW,CAAC,GAAU,EAAO,SAAW,GAC1C,EAAA,EAAA,KAAC,EAAA,iBAAD,CAA2B,UAAW,CAAA,CAEtC,IACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,8CACZ,EAAA,kBAAkB,IAAK,GAAU,CAChC,IAAM,EAAe,EAAc,GAKnC,OAJI,EAAa,SAAW,EACnB,MAIP,EAAA,EAAA,KAAC,EAAA,mBAAD,CAEE,MAAO,EAAE,EAAkB,GAAO,CAClC,MAAO,EAAa,gBAEnB,EAAa,IAAK,IAIf,EAAA,EAAA,KAAC,EAAA,UAAD,CAES,QACK,WANG,EAAe,EAAM,OAAS,GAO7C,SAAU,EACV,CAJK,GAAG,EAAM,GAAG,EAAM,OAIvB,CAEJ,CACiB,CAhBd,EAgBc,EAEvB,CACE,CAAA,EAnCR,EAAA,EAAA,KAAC,EAAA,0BAAD,EAA6B,CAAA,CAsC3B,CAAA,CACI,GACE,CAAA"}
1	+ {"version":3,"file":"skills-modal.cjs","names":[],"sources":["../../../../src/components/features/conversation-panel/skills-modal.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalBody } from \"#/components/shared/modals/modal-body\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { getAgentServerWorkingDir } from \"#/api/agent-server-config\";\nimport { useConversationSkills } from \"#/hooks/query/use-conversation-skills\";\nimport { AgentState } from \"#/types/agent-state\";\nimport {\n groupSkillsByScope,\n SKILL_SCOPE_ORDER,\n type SkillScope,\n} from \"#/utils/skill-scope\";\nimport { SkillsModalHeader } from \"./skills-modal-header\";\nimport { SkillsModalSection } from \"./skills-modal-section\";\nimport { SkillsRuntimeWaitingState } from \"./skills-runtime-waiting-state\";\nimport { SkillsLoadingState } from \"./skills-loading-state\";\nimport { SkillsEmptyState } from \"./skills-empty-state\";\nimport { SkillItem } from \"./skill-item\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\n\ninterface SkillsModalProps {\n onClose: () => void;\n}\n\nconst SECTION_TITLE_KEY: Record<SkillScope, I18nKey> = {\n project: I18nKey.SKILLS_MODAL$SECTION_PROJECT,\n personal: I18nKey.SKILLS_MODAL$SECTION_USER,\n public: I18nKey.SKILLS_MODAL$SECTION_PUBLIC,\n};\n\nexport function SkillsModal({ onClose }: SkillsModalProps) {\n const { t } = useTranslation(\"openhands\");\n const { curAgentState } = useAgentState();\n const projectDir = getAgentServerWorkingDir();\n const [expandedAgents, setExpandedAgents] = useState<Record<string, boolean>>(\n {},\n );\n // Scope the catalog to this conversation's attached workspace so the listed\n // skills match the project skills actually loaded into the conversation.\n const {\n data: skills,\n isLoading,\n isError,\n refetch,\n isRefetching,\n } = useConversationSkills();\n\n const groupedSkills = useMemo(\n () => (skills ? groupSkillsByScope(skills, projectDir) : null),\n [skills, projectDir],\n );\n\n const toggleAgent = (agentName: string) => {\n setExpandedAgents((prev) => ({\n ...prev,\n [agentName]: !prev[agentName],\n }));\n };\n\n const isAgentReady = ![AgentState.LOADING, AgentState.INIT].includes(\n curAgentState,\n );\n\n return (\n <ModalBackdrop onClose={onClose}>\n <ModalBody\n width=\"lg\"\n className=\"relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]\"\n testID=\"skills-modal\"\n >\n <SkillsModalHeader\n isLoading={isLoading}\n isRefetching={isRefetching}\n onRefresh={refetch}\n onClose={onClose}\n />\n\n <div className=\"w-full h-[60vh] overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\">\n {!isAgentReady ? (\n <SkillsRuntimeWaitingState />\n ) : isLoading ? (\n <SkillsLoadingState />\n ) : isError \|\| !skills \|\| skills.length === 0 ? (\n <SkillsEmptyState isError={isError} />\n ) : (\n groupedSkills && (\n <div className=\"divide-y divide-[var(--oh-border)]\">\n {SKILL_SCOPE_ORDER.map((scope) => {\n const scopedSkills = groupedSkills[scope];\n if (scopedSkills.length === 0) {\n return null;\n }\n\n return (\n <SkillsModalSection\n key={scope}\n title={t(SECTION_TITLE_KEY[scope])}\n count={scopedSkills.length}\n >\n {scopedSkills.map((skill) => {\n const isExpanded = expandedAgents[skill.name] \|\| false;\n\n return (\n <SkillItem\n key={`${scope}-${skill.name}`}\n skill={skill}\n isExpanded={isExpanded}\n onToggle={toggleAgent}\n />\n );\n })}\n </SkillsModalSection>\n );\n })}\n </div>\n )\n )}\n </div>\n </ModalBody>\n </ModalBackdrop>\n );\n}\n"],"mappings":"6yBAyBA,IAAM,EAAiD,CACrD,QAAS,EAAA,QAAQ,6BACjB,SAAU,EAAA,QAAQ,0BAClB,OAAQ,EAAA,QAAQ,4BACjB,CAED,SAAgB,EAAY,CAAE,WAA6B,CACzD,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,iBAAkB,EAAA,eAAe,CACnC,EAAa,EAAA,0BAA0B,CACvC,CAAC,EAAgB,IAAA,EAAA,EAAA,UACrB,EAAE,CACH,CAGK,CACJ,KAAM,EACN,YACA,UACA,UACA,gBACE,EAAA,uBAAuB,CAErB,GAAA,EAAA,EAAA,aACG,EAAS,EAAA,mBAAmB,EAAQ,EAAW,CAAG,KACzD,CAAC,EAAQ,EAAW,CACrB,CAEK,EAAe,GAAsB,CACzC,EAAmB,IAAU,CAC3B,GAAG,GACF,GAAY,CAAC,EAAK,GACpB,EAAE,EAGC,EAAe,CAAC,CAAC,EAAA,WAAW,QAAS,EAAA,WAAW,KAAK,CAAC,SAC1D,EACD,CAED,OACE,EAAA,EAAA,KAAC,EAAA,cAAD,CAAwB,oBACtB,EAAA,EAAA,MAAC,EAAA,UAAD,CACE,MAAM,KACN,UAAU,mFACV,OAAO,wBAHT,EAKE,EAAA,EAAA,KAAC,EAAA,kBAAD,CACa,YACG,eACd,UAAW,EACF,UACT,CAAA,EAEF,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,+HACX,EAEE,GACF,EAAA,EAAA,KAAC,EAAA,mBAAD,EAAsB,CAAA,CACpB,GAAW,CAAC,GAAU,EAAO,SAAW,GAC1C,EAAA,EAAA,KAAC,EAAA,iBAAD,CAA2B,UAAW,CAAA,CAEtC,IACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,8CACZ,EAAA,kBAAkB,IAAK,GAAU,CAChC,IAAM,EAAe,EAAc,GAKnC,OAJI,EAAa,SAAW,EACnB,MAIP,EAAA,EAAA,KAAC,EAAA,mBAAD,CAEE,MAAO,EAAE,EAAkB,GAAO,CAClC,MAAO,EAAa,gBAEnB,EAAa,IAAK,IAIf,EAAA,EAAA,KAAC,EAAA,UAAD,CAES,QACK,WANG,EAAe,EAAM,OAAS,GAO7C,SAAU,EACV,CAJK,GAAG,EAAM,GAAG,EAAM,OAIvB,CAEJ,CACiB,CAhBd,EAgBc,EAEvB,CACE,CAAA,EAnCR,EAAA,EAAA,KAAC,EAAA,0BAAD,EAA6B,CAAA,CAsC3B,CAAA,CACI,GACE,CAAA"}

package/dist/components/features/conversation-panel/skills-modal.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { I18nKey as t } from "../../../i18n/declaration.js";
 import { AgentState as n } from "../../../types/agent-state.js";
 import { getAgentServerWorkingDir as r } from "../../../api/agent-server-config.js";
 import { useAgentState as i } from "../../../hooks/use-agent-state.js";
-import { useSkills as a } from "../../../hooks/query/use-skills.js";
+import { useConversationSkills as a } from "../../../hooks/query/use-conversation-skills.js";
 import { ModalBackdrop as o } from "../../shared/modals/modal-backdrop.js";
 import { ModalBody as s } from "../../shared/modals/modal-body.js";
 import { SKILL_SCOPE_ORDER as c, groupSkillsByScope as l } from "../../../utils/skill-scope.js";

package/dist/components/features/conversation-panel/skills-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skills-modal.js","names":[],"sources":["../../../../src/components/features/conversation-panel/skills-modal.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalBody } from \"#/components/shared/modals/modal-body\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { getAgentServerWorkingDir } from \"#/api/agent-server-config\";\nimport { ~~useSkills~~ } from \"#/hooks/query/use-skills\";\nimport { AgentState } from \"#/types/agent-state\";\nimport {\n groupSkillsByScope,\n SKILL_SCOPE_ORDER,\n type SkillScope,\n} from \"#/utils/skill-scope\";\nimport { SkillsModalHeader } from \"./skills-modal-header\";\nimport { SkillsModalSection } from \"./skills-modal-section\";\nimport { SkillsRuntimeWaitingState } from \"./skills-runtime-waiting-state\";\nimport { SkillsLoadingState } from \"./skills-loading-state\";\nimport { SkillsEmptyState } from \"./skills-empty-state\";\nimport { SkillItem } from \"./skill-item\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\n\ninterface SkillsModalProps {\n onClose: () => void;\n}\n\nconst SECTION_TITLE_KEY: Record<SkillScope, I18nKey> = {\n project: I18nKey.SKILLS_MODAL$SECTION_PROJECT,\n personal: I18nKey.SKILLS_MODAL$SECTION_USER,\n public: I18nKey.SKILLS_MODAL$SECTION_PUBLIC,\n};\n\nexport function SkillsModal({ onClose }: SkillsModalProps) {\n const { t } = useTranslation(\"openhands\");\n const { curAgentState } = useAgentState();\n const projectDir = getAgentServerWorkingDir();\n const [expandedAgents, setExpandedAgents] = useState<Record<string, boolean>>(\n {},\n );\n const {\n data: skills,\n isLoading,\n isError,\n refetch,\n isRefetching,\n } = ~~useSkills~~();\n\n const groupedSkills = useMemo(\n () => (skills ? groupSkillsByScope(skills, projectDir) : null),\n [skills, projectDir],\n );\n\n const toggleAgent = (agentName: string) => {\n setExpandedAgents((prev) => ({\n ...prev,\n [agentName]: !prev[agentName],\n }));\n };\n\n const isAgentReady = ![AgentState.LOADING, AgentState.INIT].includes(\n curAgentState,\n );\n\n return (\n <ModalBackdrop onClose={onClose}>\n <ModalBody\n width=\"lg\"\n className=\"relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]\"\n testID=\"skills-modal\"\n >\n <SkillsModalHeader\n isLoading={isLoading}\n isRefetching={isRefetching}\n onRefresh={refetch}\n onClose={onClose}\n />\n\n <div className=\"w-full h-[60vh] overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\">\n {!isAgentReady ? (\n <SkillsRuntimeWaitingState />\n ) : isLoading ? (\n <SkillsLoadingState />\n ) : isError \|\| !skills \|\| skills.length === 0 ? (\n <SkillsEmptyState isError={isError} />\n ) : (\n groupedSkills && (\n <div className=\"divide-y divide-[var(--oh-border)]\">\n {SKILL_SCOPE_ORDER.map((scope) => {\n const scopedSkills = groupedSkills[scope];\n if (scopedSkills.length === 0) {\n return null;\n }\n\n return (\n <SkillsModalSection\n key={scope}\n title={t(SECTION_TITLE_KEY[scope])}\n count={scopedSkills.length}\n >\n {scopedSkills.map((skill) => {\n const isExpanded = expandedAgents[skill.name] \|\| false;\n\n return (\n <SkillItem\n key={`${scope}-${skill.name}`}\n skill={skill}\n isExpanded={isExpanded}\n onToggle={toggleAgent}\n />\n );\n })}\n </SkillsModalSection>\n );\n })}\n </div>\n )\n )}\n </div>\n </ModalBody>\n </ModalBackdrop>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,IAAM,IAAiD;CACrD,SAAS,EAAQ;CACjB,UAAU,EAAQ;CAClB,QAAQ,EAAQ;CACjB;AAED,SAAgB,EAAY,EAAE,cAA6B;CACzD,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,qBAAkB,GAAe,EACnC,IAAa,GAA0B,EACvC,CAAC,GAAgB,KAAqB,EAC1C,EAAE,CACH,~~EACK~~,EACJ,MAAM,GACN,cACA,YACA,YACA,oBACE,~~GAAW~~,~~EAET~~,IAAgB,QACb,IAAS,EAAmB,GAAQ,EAAW,GAAG,MACzD,CAAC,GAAQ,EAAW,CACrB,EAEK,KAAe,MAAsB;AACzC,KAAmB,OAAU;GAC3B,GAAG;IACF,IAAY,CAAC,EAAK;GACpB,EAAE;IAGC,IAAe,CAAC,CAAC,EAAW,SAAS,EAAW,KAAK,CAAC,SAC1D,EACD;AAED,QACE,kBAAC,GAAD;EAAwB;YACtB,kBAAC,GAAD;GACE,OAAM;GACN,WAAU;GACV,QAAO;aAHT,CAKE,kBAAC,GAAD;IACa;IACG;IACd,WAAW;IACF;IACT,CAAA,EAEF,kBAAC,OAAD;IAAK,WAAU;cACX,IAEE,IACF,kBAAC,GAAD,EAAsB,CAAA,GACpB,KAAW,CAAC,KAAU,EAAO,WAAW,IAC1C,kBAAC,GAAD,EAA2B,YAAW,CAAA,GAEtC,KACE,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAkB,KAAK,MAAU;MAChC,IAAM,IAAe,EAAc;AAKnC,aAJI,EAAa,WAAW,IACnB,OAIP,kBAAC,GAAD;OAEE,OAAO,EAAE,EAAkB,GAAO;OAClC,OAAO,EAAa;iBAEnB,EAAa,KAAK,MAIf,kBAAC,GAAD;QAES;QACK,YANG,EAAe,EAAM,SAAS;QAO7C,UAAU;QACV,EAJK,GAAG,EAAM,GAAG,EAAM,OAIvB,CAEJ;OACiB,EAhBd,EAgBc;OAEvB;KACE,CAAA,GAnCR,kBAAC,GAAD,EAA6B,CAAA;IAsC3B,CAAA,CACI;;EACE,CAAA"}
1	+ {"version":3,"file":"skills-modal.js","names":[],"sources":["../../../../src/components/features/conversation-panel/skills-modal.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalBody } from \"#/components/shared/modals/modal-body\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { getAgentServerWorkingDir } from \"#/api/agent-server-config\";\nimport { useConversationSkills } from \"#/hooks/query/use-conversation-skills\";\nimport { AgentState } from \"#/types/agent-state\";\nimport {\n groupSkillsByScope,\n SKILL_SCOPE_ORDER,\n type SkillScope,\n} from \"#/utils/skill-scope\";\nimport { SkillsModalHeader } from \"./skills-modal-header\";\nimport { SkillsModalSection } from \"./skills-modal-section\";\nimport { SkillsRuntimeWaitingState } from \"./skills-runtime-waiting-state\";\nimport { SkillsLoadingState } from \"./skills-loading-state\";\nimport { SkillsEmptyState } from \"./skills-empty-state\";\nimport { SkillItem } from \"./skill-item\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\n\ninterface SkillsModalProps {\n onClose: () => void;\n}\n\nconst SECTION_TITLE_KEY: Record<SkillScope, I18nKey> = {\n project: I18nKey.SKILLS_MODAL$SECTION_PROJECT,\n personal: I18nKey.SKILLS_MODAL$SECTION_USER,\n public: I18nKey.SKILLS_MODAL$SECTION_PUBLIC,\n};\n\nexport function SkillsModal({ onClose }: SkillsModalProps) {\n const { t } = useTranslation(\"openhands\");\n const { curAgentState } = useAgentState();\n const projectDir = getAgentServerWorkingDir();\n const [expandedAgents, setExpandedAgents] = useState<Record<string, boolean>>(\n {},\n );\n // Scope the catalog to this conversation's attached workspace so the listed\n // skills match the project skills actually loaded into the conversation.\n const {\n data: skills,\n isLoading,\n isError,\n refetch,\n isRefetching,\n } = useConversationSkills();\n\n const groupedSkills = useMemo(\n () => (skills ? groupSkillsByScope(skills, projectDir) : null),\n [skills, projectDir],\n );\n\n const toggleAgent = (agentName: string) => {\n setExpandedAgents((prev) => ({\n ...prev,\n [agentName]: !prev[agentName],\n }));\n };\n\n const isAgentReady = ![AgentState.LOADING, AgentState.INIT].includes(\n curAgentState,\n );\n\n return (\n <ModalBackdrop onClose={onClose}>\n <ModalBody\n width=\"lg\"\n className=\"relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]\"\n testID=\"skills-modal\"\n >\n <SkillsModalHeader\n isLoading={isLoading}\n isRefetching={isRefetching}\n onRefresh={refetch}\n onClose={onClose}\n />\n\n <div className=\"w-full h-[60vh] overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\">\n {!isAgentReady ? (\n <SkillsRuntimeWaitingState />\n ) : isLoading ? (\n <SkillsLoadingState />\n ) : isError \|\| !skills \|\| skills.length === 0 ? (\n <SkillsEmptyState isError={isError} />\n ) : (\n groupedSkills && (\n <div className=\"divide-y divide-[var(--oh-border)]\">\n {SKILL_SCOPE_ORDER.map((scope) => {\n const scopedSkills = groupedSkills[scope];\n if (scopedSkills.length === 0) {\n return null;\n }\n\n return (\n <SkillsModalSection\n key={scope}\n title={t(SECTION_TITLE_KEY[scope])}\n count={scopedSkills.length}\n >\n {scopedSkills.map((skill) => {\n const isExpanded = expandedAgents[skill.name] \|\| false;\n\n return (\n <SkillItem\n key={`${scope}-${skill.name}`}\n skill={skill}\n isExpanded={isExpanded}\n onToggle={toggleAgent}\n />\n );\n })}\n </SkillsModalSection>\n );\n })}\n </div>\n )\n )}\n </div>\n </ModalBody>\n </ModalBackdrop>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,IAAM,IAAiD;CACrD,SAAS,EAAQ;CACjB,UAAU,EAAQ;CAClB,QAAQ,EAAQ;CACjB;AAED,SAAgB,EAAY,EAAE,cAA6B;CACzD,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,qBAAkB,GAAe,EACnC,IAAa,GAA0B,EACvC,CAAC,GAAgB,KAAqB,EAC1C,EAAE,CACH,EAGK,EACJ,MAAM,GACN,cACA,YACA,YACA,oBACE,GAAuB,EAErB,IAAgB,QACb,IAAS,EAAmB,GAAQ,EAAW,GAAG,MACzD,CAAC,GAAQ,EAAW,CACrB,EAEK,KAAe,MAAsB;AACzC,KAAmB,OAAU;GAC3B,GAAG;IACF,IAAY,CAAC,EAAK;GACpB,EAAE;IAGC,IAAe,CAAC,CAAC,EAAW,SAAS,EAAW,KAAK,CAAC,SAC1D,EACD;AAED,QACE,kBAAC,GAAD;EAAwB;YACtB,kBAAC,GAAD;GACE,OAAM;GACN,WAAU;GACV,QAAO;aAHT,CAKE,kBAAC,GAAD;IACa;IACG;IACd,WAAW;IACF;IACT,CAAA,EAEF,kBAAC,OAAD;IAAK,WAAU;cACX,IAEE,IACF,kBAAC,GAAD,EAAsB,CAAA,GACpB,KAAW,CAAC,KAAU,EAAO,WAAW,IAC1C,kBAAC,GAAD,EAA2B,YAAW,CAAA,GAEtC,KACE,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAkB,KAAK,MAAU;MAChC,IAAM,IAAe,EAAc;AAKnC,aAJI,EAAa,WAAW,IACnB,OAIP,kBAAC,GAAD;OAEE,OAAO,EAAE,EAAkB,GAAO;OAClC,OAAO,EAAa;iBAEnB,EAAa,KAAK,MAIf,kBAAC,GAAD;QAES;QACK,YANG,EAAe,EAAM,SAAS;QAO7C,UAAU;QACV,EAJK,GAAG,EAAM,GAAG,EAAM,OAIvB,CAEJ;OACiB,EAhBd,EAgBc;OAEvB;KACE,CAAA,GAnCR,kBAAC,GAAD,EAA6B,CAAA;IAsC3B,CAAA,CACI;;EACE,CAAA"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 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"}