@openhands/agent-canvas 1.0.0-alpha.8 → 1.0.0-beta.1

package/dist/routes/conversation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"conversation.cjs","names":[],"sources":["../../src/routes/conversation.tsx"],"sourcesContent":["import React from \"react\";\nimport { useNavigate, useLocation, useMatch } from \"react-router\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useCommandStore } from \"#/stores/command-store\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentStore } from \"#/stores/agent-store\";\nimport { useConversationStateStore } from \"#/stores/conversation-state-store\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport {\n  clearLastConversationId,\n  setLastConversationId,\n} from \"#/api/backend-registry/last-conversation-store\";\nimport { AgentState } from \"#/types/agent-state\";\n\nimport { EventHandler } from \"../wrapper/event-handler\";\n\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useTaskPolling } from \"#/hooks/query/use-task-polling\";\n\nimport { displayErrorToast } from \"#/utils/custom-toast-handlers\";\nimport { useIsAuthed } from \"#/hooks/query/use-is-authed\";\nimport {\n  ConversationMain,\n  ConversationMobilePanelPage,\n} from \"#/components/features/conversation/conversation-main/conversation-main\";\n\nimport { WebSocketProviderWrapper } from \"#/contexts/websocket-provider-wrapper\";\nimport { useErrorMessageStore } from \"#/stores/error-message-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useEventStore } from \"#/stores/use-event-store\";\nimport { resumeCloudSandbox } from \"#/api/cloud/conversation-service.api\";\n\nfunction AppContent() {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useConversationId();\n  const panelViewMatch = useMatch(\"/conversations/:conversationId/panel\");\n  const clearEvents = useEventStore((state) => state.clearEvents);\n\n  const { isTask, taskStatus, taskDetail } = useTaskPolling();\n\n  // The conversationId in the URL belongs to whichever backend was\n  // active when the route first mounted. If the user switches backends\n  // while this route is still mounted, the id is meaningless under the\n  // new backend — disable the active-conversation fetch (and its 404\n  // toast) so we don't fire a request that the BackendSelector's\n  // redirect will immediately navigate away from anyway. Mirrors the\n  // same guard in `routes/automation-detail.tsx`.\n  const active = useActiveBackend();\n  const mountedBackendId = React.useRef(active.backend.id);\n  const mountedOrgId = React.useRef(active.orgId);\n  const backendChanged =\n    mountedBackendId.current !== active.backend.id ||\n    mountedOrgId.current !== active.orgId;\n\n  const { data: conversation, isFetched } = useActiveConversation();\n  const { data: isAuthed } = useIsAuthed();\n  const { resetConversationState } = useConversationStore();\n  const navigate = useNavigate();\n  const location = useLocation();\n  const clearTerminal = useCommandStore((state) => state.clearTerminal);\n  const resetConversationRuntimeState = useConversationStateStore(\n    (state) => state.reset,\n  );\n  const setCurrentAgentState = useAgentStore(\n    (state) => state.setCurrentAgentState,\n  );\n  const removeErrorMessage = useErrorMessageStore(\n    (state) => state.removeErrorMessage,\n  );\n\n  React.useEffect(() => {\n    clearTerminal();\n    resetConversationState();\n    resetConversationRuntimeState();\n    setCurrentAgentState(AgentState.LOADING);\n    removeErrorMessage();\n    clearEvents();\n  }, [\n    conversationId,\n    clearTerminal,\n    resetConversationState,\n    resetConversationRuntimeState,\n    setCurrentAgentState,\n    removeErrorMessage,\n    clearEvents,\n  ]);\n\n  React.useEffect(() => {\n    if (isTask && taskStatus === \"ERROR\") {\n      displayErrorToast(\n        taskDetail || t(I18nKey.CONVERSATION$FAILED_TO_START_FROM_TASK),\n      );\n      // Navigate back to the original conversation when a resume task fails so\n      // the user isn't stranded at the dead task-{id} URL. The resume effect's\n      // ref prevents it from immediately retrying once we land there.\n      const resumedFrom = (location.state as Record<string, unknown> | null)\n        ?.resumedFromConversationId as string | undefined;\n      navigate(\n        resumedFrom ? `/conversations/${resumedFrom}` : \"/conversations\",\n        { replace: true },\n      );\n    }\n  }, [isTask, taskStatus, taskDetail, t, navigate, location.state]);\n\n  React.useEffect(() => {\n    if (!isFetched || !isAuthed) return;\n    // The BackendSelector is in the middle of redirecting us away from\n    // this route — don't toast/navigate based on a 404 that's just\n    // \"this id doesn't exist on the new backend\".\n    if (backendChanged) return;\n\n    if (!conversation) {\n      // Clear the per-backend \"last selected\" slot so the next switch\n      // to this backend doesn't try to revisit a stale id.\n      clearLastConversationId(active.backend.id, active.orgId);\n      displayErrorToast(t(I18nKey.CONVERSATION$NOT_EXIST_OR_NO_PERMISSION));\n      navigate(\"/conversations\");\n    }\n  }, [\n    conversation,\n    isFetched,\n    isAuthed,\n    navigate,\n    t,\n    backendChanged,\n    active.backend.id,\n    active.orgId,\n  ]);\n\n  // Remember the most recently selected conversation for the current\n  // (backend, org) so flipping back to this backend later restores the\n  // user to where they left off. Skip while a backend switch is in\n  // flight: the id in the URL is from the previous backend and would\n  // otherwise overwrite the new backend's memory.\n  React.useEffect(() => {\n    if (backendChanged) return;\n    if (!conversationId) return;\n    if (conversationId.startsWith(\"task-\")) return;\n    setLastConversationId(active.backend.id, active.orgId, conversationId);\n  }, [conversationId, backendChanged, active.backend.id, active.orgId]);\n\n  // Cloud conversation resume: mirrors OpenHands' useSandboxRecovery.\n  //\n  // When the cloud API reports sandbox_status === \"PAUSED\" the sandbox is\n  // sleeping. The correct wake-up call is POST /api/v1/sandboxes/{id}/resume\n  // (a lightweight unpause). The previous approach — creating a new start task\n  // via POST /api/v1/app-conversations — was wrong: it tries to provision a\n  // fresh conversation in the sandbox and is subject to a 120-second cold-start\n  // timeout that can fail. The resume endpoint simply unpauses the existing one.\n  //\n  // After calling resume we stay on the current URL. The 3-second refetch\n  // interval in useActiveConversation (active while conversation_url is null)\n  // polls until conversation_url populates, then the WebSocket connects.\n  //\n  // A ref guards against duplicate triggers per unique conversation.id within\n  // the same route-mount lifetime.\n  const resumeTriggeredForRef = React.useRef<string | null>(null);\n  React.useEffect(() => {\n    if (!isFetched || !conversation) return;\n    if (active.backend.kind !== \"cloud\") return;\n    if (conversation.sandbox_status !== \"PAUSED\") return; // only resume PAUSED sandboxes\n    if (!conversation.sandbox_id) return; // no sandbox to resume\n    if (resumeTriggeredForRef.current === conversation.id) return; // already sent\n\n    resumeTriggeredForRef.current = conversation.id;\n\n    resumeCloudSandbox(conversation.sandbox_id).catch(() => {\n      displayErrorToast(t(I18nKey.CONVERSATION$FAILED_TO_START_FROM_TASK));\n    });\n  }, [\n    isFetched,\n    conversation?.id,\n    conversation?.sandbox_status,\n    conversation?.sandbox_id,\n    active.backend.kind,\n    t,\n  ]);\n\n  const content = (\n    <EventHandler>\n      <div data-testid=\"app-route\" className=\"flex h-full flex-col\">\n        {panelViewMatch ? (\n          <ConversationMobilePanelPage\n            onNavigateBack={() => navigate(`/conversations/${conversationId}`)}\n          />\n        ) : (\n          <ConversationMain />\n        )}\n      </div>\n    </EventHandler>\n  );\n\n  return (\n    <WebSocketProviderWrapper conversationId={conversationId}>\n      {content}\n    </WebSocketProviderWrapper>\n  );\n}\n\nexport function ConversationView() {\n  return <AppContent />;\n}\n\nexport default ConversationView;\n"],"mappings":"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"}
+{"version":3,"file":"conversation.cjs","names":[],"sources":["../../src/routes/conversation.tsx"],"sourcesContent":["import React from \"react\";\nimport { useNavigate, useLocation, useMatch } from \"react-router\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useCommandStore } from \"#/stores/command-store\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentStore } from \"#/stores/agent-store\";\nimport { useConversationStateStore } from \"#/stores/conversation-state-store\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport {\n  clearLastConversationId,\n  setLastConversationId,\n} from \"#/api/backend-registry/last-conversation-store\";\nimport { AgentState } from \"#/types/agent-state\";\n\nimport { EventHandler } from \"../wrapper/event-handler\";\n\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useTaskPolling } from \"#/hooks/query/use-task-polling\";\n\nimport { displayErrorToast } from \"#/utils/custom-toast-handlers\";\nimport { useIsAuthed } from \"#/hooks/query/use-is-authed\";\nimport {\n  ConversationMain,\n  ConversationMobilePanelPage,\n} from \"#/components/features/conversation/conversation-main/conversation-main\";\n\nimport { WebSocketProviderWrapper } from \"#/contexts/websocket-provider-wrapper\";\nimport { useErrorMessageStore } from \"#/stores/error-message-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { resumeCloudSandbox } from \"#/api/cloud/conversation-service.api\";\n\nfunction AppContent() {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useConversationId();\n  const panelViewMatch = useMatch(\"/conversations/:conversationId/panel\");\n\n  const { isTask, taskStatus, taskDetail } = useTaskPolling();\n\n  // The conversationId in the URL belongs to whichever backend was\n  // active when the route first mounted. If the user switches backends\n  // while this route is still mounted, the id is meaningless under the\n  // new backend — disable the active-conversation fetch (and its 404\n  // toast) so we don't fire a request that the BackendSelector's\n  // redirect will immediately navigate away from anyway. Mirrors the\n  // same guard in `routes/automation-detail.tsx`.\n  const active = useActiveBackend();\n  const mountedBackendId = React.useRef(active.backend.id);\n  const mountedOrgId = React.useRef(active.orgId);\n  const backendChanged =\n    mountedBackendId.current !== active.backend.id ||\n    mountedOrgId.current !== active.orgId;\n\n  const { data: conversation, isFetched } = useActiveConversation();\n  const { data: isAuthed } = useIsAuthed();\n  const { resetConversationState } = useConversationStore();\n  const navigate = useNavigate();\n  const location = useLocation();\n  const clearTerminal = useCommandStore((state) => state.clearTerminal);\n  const resetConversationRuntimeState = useConversationStateStore(\n    (state) => state.reset,\n  );\n  const setCurrentAgentState = useAgentStore(\n    (state) => state.setCurrentAgentState,\n  );\n  const removeErrorMessage = useErrorMessageStore(\n    (state) => state.removeErrorMessage,\n  );\n\n  // Per-conversation UI/runtime resets. The event store is cleared separately,\n  // inside ConversationWebSocketProvider, so the clear is ordered *before* the\n  // preloaded-history re-seed (see the note there) — clearing it here would run\n  // too late and wipe the freshly seeded history on a conversation switch.\n  React.useEffect(() => {\n    clearTerminal();\n    resetConversationState();\n    resetConversationRuntimeState();\n    setCurrentAgentState(AgentState.LOADING);\n    removeErrorMessage();\n  }, [\n    conversationId,\n    clearTerminal,\n    resetConversationState,\n    resetConversationRuntimeState,\n    setCurrentAgentState,\n    removeErrorMessage,\n  ]);\n\n  React.useEffect(() => {\n    if (isTask && taskStatus === \"ERROR\") {\n      displayErrorToast(\n        taskDetail || t(I18nKey.CONVERSATION$FAILED_TO_START_FROM_TASK),\n      );\n      // Navigate back to the original conversation when a resume task fails so\n      // the user isn't stranded at the dead task-{id} URL. The resume effect's\n      // ref prevents it from immediately retrying once we land there.\n      const resumedFrom = (location.state as Record<string, unknown> | null)\n        ?.resumedFromConversationId as string | undefined;\n      navigate(\n        resumedFrom ? `/conversations/${resumedFrom}` : \"/conversations\",\n        { replace: true },\n      );\n    }\n  }, [isTask, taskStatus, taskDetail, t, navigate, location.state]);\n\n  React.useEffect(() => {\n    if (!isFetched || !isAuthed) return;\n    // The BackendSelector is in the middle of redirecting us away from\n    // this route — don't toast/navigate based on a 404 that's just\n    // \"this id doesn't exist on the new backend\".\n    if (backendChanged) return;\n\n    if (!conversation) {\n      // Clear the per-backend \"last selected\" slot so the next switch\n      // to this backend doesn't try to revisit a stale id.\n      clearLastConversationId(active.backend.id, active.orgId);\n      displayErrorToast(t(I18nKey.CONVERSATION$NOT_EXIST_OR_NO_PERMISSION));\n      navigate(\"/conversations\");\n    }\n  }, [\n    conversation,\n    isFetched,\n    isAuthed,\n    navigate,\n    t,\n    backendChanged,\n    active.backend.id,\n    active.orgId,\n  ]);\n\n  // Remember the most recently selected conversation for the current\n  // (backend, org) so flipping back to this backend later restores the\n  // user to where they left off. Skip while a backend switch is in\n  // flight: the id in the URL is from the previous backend and would\n  // otherwise overwrite the new backend's memory.\n  React.useEffect(() => {\n    if (backendChanged) return;\n    if (!conversationId) return;\n    if (conversationId.startsWith(\"task-\")) return;\n    setLastConversationId(active.backend.id, active.orgId, conversationId);\n  }, [conversationId, backendChanged, active.backend.id, active.orgId]);\n\n  // Cloud conversation resume: mirrors OpenHands' useSandboxRecovery.\n  //\n  // When the cloud API reports sandbox_status === \"PAUSED\" the sandbox is\n  // sleeping. The correct wake-up call is POST /api/v1/sandboxes/{id}/resume\n  // (a lightweight unpause). The previous approach — creating a new start task\n  // via POST /api/v1/app-conversations — was wrong: it tries to provision a\n  // fresh conversation in the sandbox and is subject to a 120-second cold-start\n  // timeout that can fail. The resume endpoint simply unpauses the existing one.\n  //\n  // After calling resume we stay on the current URL. The 3-second refetch\n  // interval in useActiveConversation (active while conversation_url is null)\n  // polls until conversation_url populates, then the WebSocket connects.\n  //\n  // A ref guards against duplicate triggers per unique conversation.id within\n  // the same route-mount lifetime.\n  const resumeTriggeredForRef = React.useRef<string | null>(null);\n  React.useEffect(() => {\n    if (!isFetched || !conversation) return;\n    if (active.backend.kind !== \"cloud\") return;\n    if (conversation.sandbox_status !== \"PAUSED\") return; // only resume PAUSED sandboxes\n    if (!conversation.sandbox_id) return; // no sandbox to resume\n    if (resumeTriggeredForRef.current === conversation.id) return; // already sent\n\n    resumeTriggeredForRef.current = conversation.id;\n\n    resumeCloudSandbox(conversation.sandbox_id).catch(() => {\n      displayErrorToast(t(I18nKey.CONVERSATION$FAILED_TO_START_FROM_TASK));\n    });\n  }, [\n    isFetched,\n    conversation?.id,\n    conversation?.sandbox_status,\n    conversation?.sandbox_id,\n    active.backend.kind,\n    t,\n  ]);\n\n  const content = (\n    <EventHandler>\n      <div data-testid=\"app-route\" className=\"flex h-full flex-col\">\n        {panelViewMatch ? (\n          <ConversationMobilePanelPage\n            onNavigateBack={() => navigate(`/conversations/${conversationId}`)}\n          />\n        ) : (\n          <ConversationMain />\n        )}\n      </div>\n    </EventHandler>\n  );\n\n  return (\n    <WebSocketProviderWrapper conversationId={conversationId}>\n      {content}\n    </WebSocketProviderWrapper>\n  );\n}\n\nexport function ConversationView() {\n  return <AppContent />;\n}\n\nexport default ConversationView;\n"],"mappings":"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"}

package/dist/routes/conversation.js

@@ -9,88 +9,86 @@ import { useConversationStateStore as s } from "../stores/conversation-state-sto
 import { useActiveBackend as c } from "../contexts/active-backend-context.js";
 import { clearLastConversationId as l, setLastConversationId as u } from "../api/backend-registry/last-conversation-store.js";
 import { displayErrorToast as d } from "../utils/custom-toast-handlers.js";
-import { useEventStore as f } from "../stores/use-event-store.js";
-import { useErrorMessageStore as p } from "../stores/error-message-store.js";
-import { resumeCloudSandbox as m } from "../api/cloud/conversation-service.api.js";
-import { useActiveConversation as h } from "../hooks/query/use-active-conversation.js";
-import { EventHandler as g } from "../wrapper/event-handler.js";
-import { useTaskPolling as _ } from "../hooks/query/use-task-polling.js";
-import { useIsAuthed as v } from "../hooks/query/use-is-authed.js";
-import { ConversationMain as y, ConversationMobilePanelPage as b } from "../components/features/conversation/conversation-main/conversation-main.js";
-import { WebSocketProviderWrapper as x } from "../contexts/websocket-provider-wrapper.js";
-import S from "react";
-import { jsx as C } from "react/jsx-runtime";
-import { useLocation as w, useMatch as T, useNavigate as E } from "react-router";
+import { useErrorMessageStore as f } from "../stores/error-message-store.js";
+import { resumeCloudSandbox as p } from "../api/cloud/conversation-service.api.js";
+import { useActiveConversation as m } from "../hooks/query/use-active-conversation.js";
+import { EventHandler as h } from "../wrapper/event-handler.js";
+import { useTaskPolling as g } from "../hooks/query/use-task-polling.js";
+import { useIsAuthed as _ } from "../hooks/query/use-is-authed.js";
+import { ConversationMain as v, ConversationMobilePanelPage as y } from "../components/features/conversation/conversation-main/conversation-main.js";
+import { WebSocketProviderWrapper as b } from "../contexts/websocket-provider-wrapper.js";
+import x from "react";
+import { jsx as S } from "react/jsx-runtime";
+import { useLocation as C, useMatch as w, useNavigate as T } from "react-router";
 //#region src/routes/conversation.tsx
-function D() {
-	let { t: D } = e("openhands"), { conversationId: O } = r(), k = T("/conversations/:conversationId/panel"), A = f((e) => e.clearEvents), { isTask: j, taskStatus: M, taskDetail: N } = _(), P = c(), F = S.useRef(P.backend.id), I = S.useRef(P.orgId), L = F.current !== P.backend.id || I.current !== P.orgId, { data: R, isFetched: z } = h(), { data: B } = v(), { resetConversationState: V } = a(), H = E(), U = w(), W = i((e) => e.clearTerminal), G = s((e) => e.reset), K = o((e) => e.setCurrentAgentState), q = p((e) => e.removeErrorMessage);
-	S.useEffect(() => {
-		W(), V(), G(), K(n.LOADING), q(), A();
+function E() {
+	let { t: E } = e("openhands"), { conversationId: D } = r(), O = w("/conversations/:conversationId/panel"), { isTask: k, taskStatus: A, taskDetail: j } = g(), M = c(), N = x.useRef(M.backend.id), P = x.useRef(M.orgId), F = N.current !== M.backend.id || P.current !== M.orgId, { data: I, isFetched: L } = m(), { data: R } = _(), { resetConversationState: z } = a(), B = T(), V = C(), H = i((e) => e.clearTerminal), U = s((e) => e.reset), W = o((e) => e.setCurrentAgentState), G = f((e) => e.removeErrorMessage);
+	x.useEffect(() => {
+		H(), z(), U(), W(n.LOADING), G();
 	}, [
-		O,
+		D,
+		H,
+		z,
+		U,
 		W,
-		V,
-		G,
-		K,
-		q,
-		A
-	]), S.useEffect(() => {
-		if (j && M === "ERROR") {
-			d(N || D(t.CONVERSATION$FAILED_TO_START_FROM_TASK));
-			let e = U.state?.resumedFromConversationId;
-			H(e ? `/conversations/${e}` : "/conversations", { replace: !0 });
+		G
+	]), x.useEffect(() => {
+		if (k && A === "ERROR") {
+			d(j || E(t.CONVERSATION$FAILED_TO_START_FROM_TASK));
+			let e = V.state?.resumedFromConversationId;
+			B(e ? `/conversations/${e}` : "/conversations", { replace: !0 });
 		}
 	}, [
+		k,
+		A,
 		j,
-		M,
-		N,
-		D,
-		H,
-		U.state
-	]), S.useEffect(() => {
-		!z || !B || L || R || (l(P.backend.id, P.orgId), d(D(t.CONVERSATION$NOT_EXIST_OR_NO_PERMISSION)), H("/conversations"));
+		E,
+		B,
+		V.state
+	]), x.useEffect(() => {
+		!L || !R || F || I || (l(M.backend.id, M.orgId), d(E(t.CONVERSATION$NOT_EXIST_OR_NO_PERMISSION)), B("/conversations"));
 	}, [
+		I,
+		L,
 		R,
-		z,
 		B,
-		H,
-		D,
-		L,
-		P.backend.id,
-		P.orgId
-	]), S.useEffect(() => {
-		L || O && (O.startsWith("task-") || u(P.backend.id, P.orgId, O));
+		E,
+		F,
+		M.backend.id,
+		M.orgId
+	]), x.useEffect(() => {
+		F || D && (D.startsWith("task-") || u(M.backend.id, M.orgId, D));
 	}, [
-		O,
-		L,
-		P.backend.id,
-		P.orgId
+		D,
+		F,
+		M.backend.id,
+		M.orgId
 	]);
-	let J = S.useRef(null);
-	return S.useEffect(() => {
-		!z || !R || P.backend.kind === "cloud" && R.sandbox_status === "PAUSED" && R.sandbox_id && J.current !== R.id && (J.current = R.id, m(R.sandbox_id).catch(() => {
-			d(D(t.CONVERSATION$FAILED_TO_START_FROM_TASK));
+	let K = x.useRef(null);
+	return x.useEffect(() => {
+		!L || !I || M.backend.kind === "cloud" && I.sandbox_status === "PAUSED" && I.sandbox_id && K.current !== I.id && (K.current = I.id, p(I.sandbox_id).catch(() => {
+			d(E(t.CONVERSATION$FAILED_TO_START_FROM_TASK));
 		}));
 	}, [
-		z,
-		R?.id,
-		R?.sandbox_status,
-		R?.sandbox_id,
-		P.backend.kind,
-		D
-	]), /* @__PURE__ */ C(x, {
-		conversationId: O,
-		children: /* @__PURE__ */ C(g, { children: /* @__PURE__ */ C("div", {
+		L,
+		I?.id,
+		I?.sandbox_status,
+		I?.sandbox_id,
+		M.backend.kind,
+		E
+	]), /* @__PURE__ */ S(b, {
+		conversationId: D,
+		children: /* @__PURE__ */ S(h, { children: /* @__PURE__ */ S("div", {
 			"data-testid": "app-route",
 			className: "flex h-full flex-col",
-			children: k ? /* @__PURE__ */ C(b, { onNavigateBack: () => H(`/conversations/${O}`) }) : /* @__PURE__ */ C(y, {})
+			children: O ? /* @__PURE__ */ S(y, { onNavigateBack: () => B(`/conversations/${D}`) }) : /* @__PURE__ */ S(v, {})
 		}) })
 	});
 }
-function O() {
-	return /* @__PURE__ */ C(D, {});
+function D() {
+	return /* @__PURE__ */ S(E, {});
 }
 //#endregion
-export { O as default };
+export { D as default };
 
 //# sourceMappingURL=conversation.js.map

package/dist/routes/conversation.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation.js","names":[],"sources":["../../src/routes/conversation.tsx"],"sourcesContent":["import React from \"react\";\nimport { useNavigate, useLocation, useMatch } from \"react-router\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useCommandStore } from \"#/stores/command-store\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentStore } from \"#/stores/agent-store\";\nimport { useConversationStateStore } from \"#/stores/conversation-state-store\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport {\n  clearLastConversationId,\n  setLastConversationId,\n} from \"#/api/backend-registry/last-conversation-store\";\nimport { AgentState } from \"#/types/agent-state\";\n\nimport { EventHandler } from \"../wrapper/event-handler\";\n\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useTaskPolling } from \"#/hooks/query/use-task-polling\";\n\nimport { displayErrorToast } from \"#/utils/custom-toast-handlers\";\nimport { useIsAuthed } from \"#/hooks/query/use-is-authed\";\nimport {\n  ConversationMain,\n  ConversationMobilePanelPage,\n} from \"#/components/features/conversation/conversation-main/conversation-main\";\n\nimport { WebSocketProviderWrapper } from \"#/contexts/websocket-provider-wrapper\";\nimport { useErrorMessageStore } from \"#/stores/error-message-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useEventStore } from \"#/stores/use-event-store\";\nimport { resumeCloudSandbox } from \"#/api/cloud/conversation-service.api\";\n\nfunction AppContent() {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useConversationId();\n  const panelViewMatch = useMatch(\"/conversations/:conversationId/panel\");\n  const clearEvents = useEventStore((state) => state.clearEvents);\n\n  const { isTask, taskStatus, taskDetail } = useTaskPolling();\n\n  // The conversationId in the URL belongs to whichever backend was\n  // active when the route first mounted. If the user switches backends\n  // while this route is still mounted, the id is meaningless under the\n  // new backend — disable the active-conversation fetch (and its 404\n  // toast) so we don't fire a request that the BackendSelector's\n  // redirect will immediately navigate away from anyway. Mirrors the\n  // same guard in `routes/automation-detail.tsx`.\n  const active = useActiveBackend();\n  const mountedBackendId = React.useRef(active.backend.id);\n  const mountedOrgId = React.useRef(active.orgId);\n  const backendChanged =\n    mountedBackendId.current !== active.backend.id ||\n    mountedOrgId.current !== active.orgId;\n\n  const { data: conversation, isFetched } = useActiveConversation();\n  const { data: isAuthed } = useIsAuthed();\n  const { resetConversationState } = useConversationStore();\n  const navigate = useNavigate();\n  const location = useLocation();\n  const clearTerminal = useCommandStore((state) => state.clearTerminal);\n  const resetConversationRuntimeState = useConversationStateStore(\n    (state) => state.reset,\n  );\n  const setCurrentAgentState = useAgentStore(\n    (state) => state.setCurrentAgentState,\n  );\n  const removeErrorMessage = useErrorMessageStore(\n    (state) => state.removeErrorMessage,\n  );\n\n  React.useEffect(() => {\n    clearTerminal();\n    resetConversationState();\n    resetConversationRuntimeState();\n    setCurrentAgentState(AgentState.LOADING);\n    removeErrorMessage();\n    clearEvents();\n  }, [\n    conversationId,\n    clearTerminal,\n    resetConversationState,\n    resetConversationRuntimeState,\n    setCurrentAgentState,\n    removeErrorMessage,\n    clearEvents,\n  ]);\n\n  React.useEffect(() => {\n    if (isTask && taskStatus === \"ERROR\") {\n      displayErrorToast(\n        taskDetail || t(I18nKey.CONVERSATION$FAILED_TO_START_FROM_TASK),\n      );\n      // Navigate back to the original conversation when a resume task fails so\n      // the user isn't stranded at the dead task-{id} URL. The resume effect's\n      // ref prevents it from immediately retrying once we land there.\n      const resumedFrom = (location.state as Record<string, unknown> | null)\n        ?.resumedFromConversationId as string | undefined;\n      navigate(\n        resumedFrom ? `/conversations/${resumedFrom}` : \"/conversations\",\n        { replace: true },\n      );\n    }\n  }, [isTask, taskStatus, taskDetail, t, navigate, location.state]);\n\n  React.useEffect(() => {\n    if (!isFetched || !isAuthed) return;\n    // The BackendSelector is in the middle of redirecting us away from\n    // this route — don't toast/navigate based on a 404 that's just\n    // \"this id doesn't exist on the new backend\".\n    if (backendChanged) return;\n\n    if (!conversation) {\n      // Clear the per-backend \"last selected\" slot so the next switch\n      // to this backend doesn't try to revisit a stale id.\n      clearLastConversationId(active.backend.id, active.orgId);\n      displayErrorToast(t(I18nKey.CONVERSATION$NOT_EXIST_OR_NO_PERMISSION));\n      navigate(\"/conversations\");\n    }\n  }, [\n    conversation,\n    isFetched,\n    isAuthed,\n    navigate,\n    t,\n    backendChanged,\n    active.backend.id,\n    active.orgId,\n  ]);\n\n  // Remember the most recently selected conversation for the current\n  // (backend, org) so flipping back to this backend later restores the\n  // user to where they left off. Skip while a backend switch is in\n  // flight: the id in the URL is from the previous backend and would\n  // otherwise overwrite the new backend's memory.\n  React.useEffect(() => {\n    if (backendChanged) return;\n    if (!conversationId) return;\n    if (conversationId.startsWith(\"task-\")) return;\n    setLastConversationId(active.backend.id, active.orgId, conversationId);\n  }, [conversationId, backendChanged, active.backend.id, active.orgId]);\n\n  // Cloud conversation resume: mirrors OpenHands' useSandboxRecovery.\n  //\n  // When the cloud API reports sandbox_status === \"PAUSED\" the sandbox is\n  // sleeping. The correct wake-up call is POST /api/v1/sandboxes/{id}/resume\n  // (a lightweight unpause). The previous approach — creating a new start task\n  // via POST /api/v1/app-conversations — was wrong: it tries to provision a\n  // fresh conversation in the sandbox and is subject to a 120-second cold-start\n  // timeout that can fail. The resume endpoint simply unpauses the existing one.\n  //\n  // After calling resume we stay on the current URL. The 3-second refetch\n  // interval in useActiveConversation (active while conversation_url is null)\n  // polls until conversation_url populates, then the WebSocket connects.\n  //\n  // A ref guards against duplicate triggers per unique conversation.id within\n  // the same route-mount lifetime.\n  const resumeTriggeredForRef = React.useRef<string | null>(null);\n  React.useEffect(() => {\n    if (!isFetched || !conversation) return;\n    if (active.backend.kind !== \"cloud\") return;\n    if (conversation.sandbox_status !== \"PAUSED\") return; // only resume PAUSED sandboxes\n    if (!conversation.sandbox_id) return; // no sandbox to resume\n    if (resumeTriggeredForRef.current === conversation.id) return; // already sent\n\n    resumeTriggeredForRef.current = conversation.id;\n\n    resumeCloudSandbox(conversation.sandbox_id).catch(() => {\n      displayErrorToast(t(I18nKey.CONVERSATION$FAILED_TO_START_FROM_TASK));\n    });\n  }, [\n    isFetched,\n    conversation?.id,\n    conversation?.sandbox_status,\n    conversation?.sandbox_id,\n    active.backend.kind,\n    t,\n  ]);\n\n  const content = (\n    <EventHandler>\n      <div data-testid=\"app-route\" className=\"flex h-full flex-col\">\n        {panelViewMatch ? (\n          <ConversationMobilePanelPage\n            onNavigateBack={() => navigate(`/conversations/${conversationId}`)}\n          />\n        ) : (\n          <ConversationMain />\n        )}\n      </div>\n    </EventHandler>\n  );\n\n  return (\n    <WebSocketProviderWrapper conversationId={conversationId}>\n      {content}\n    </WebSocketProviderWrapper>\n  );\n}\n\nexport function ConversationView() {\n  return <AppContent />;\n}\n\nexport default ConversationView;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAS,IAAa;CACpB,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,sBAAmB,GAAmB,EACxC,IAAiB,EAAS,uCAAuC,EACjE,IAAc,GAAe,MAAU,EAAM,YAAY,EAEzD,EAAE,WAAQ,eAAY,kBAAe,GAAgB,EASrD,IAAS,GAAkB,EAC3B,IAAmB,EAAM,OAAO,EAAO,QAAQ,GAAG,EAClD,IAAe,EAAM,OAAO,EAAO,MAAM,EACzC,IACJ,EAAiB,YAAY,EAAO,QAAQ,MAC5C,EAAa,YAAY,EAAO,OAE5B,EAAE,MAAM,GAAc,iBAAc,GAAuB,EAC3D,EAAE,MAAM,MAAa,GAAa,EAClC,EAAE,8BAA2B,GAAsB,EACnD,IAAW,GAAa,EACxB,IAAW,GAAa,EACxB,IAAgB,GAAiB,MAAU,EAAM,cAAc,EAC/D,IAAgC,GACnC,MAAU,EAAM,MAClB,EACK,IAAuB,GAC1B,MAAU,EAAM,qBAClB,EACK,IAAqB,GACxB,MAAU,EAAM,mBAClB;AAkED,CAhEA,EAAM,gBAAgB;AAMpB,EALA,GAAe,EACf,GAAwB,EACxB,GAA+B,EAC/B,EAAqB,EAAW,QAAQ,EACxC,GAAoB,EACpB,GAAa;IACZ;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,EAEF,EAAM,gBAAgB;AACpB,MAAI,KAAU,MAAe,SAAS;AACpC,KACE,KAAc,EAAE,EAAQ,uCAAuC,CAChE;GAID,IAAM,IAAe,EAAS,OAC1B;AACJ,KACE,IAAc,kBAAkB,MAAgB,kBAChD,EAAE,SAAS,IAAM,CAClB;;IAEF;EAAC;EAAQ;EAAY;EAAY;EAAG;EAAU,EAAS;EAAM,CAAC,EAEjE,EAAM,gBAAgB;AAChB,GAAC,KAAa,CAAC,KAIf,KAEC,MAGH,EAAwB,EAAO,QAAQ,IAAI,EAAO,MAAM,EACxD,EAAkB,EAAE,EAAQ,wCAAwC,CAAC,EACrE,EAAS,iBAAiB;IAE3B;EACD;EACA;EACA;EACA;EACA;EACA;EACA,EAAO,QAAQ;EACf,EAAO;EACR,CAAC,EAOF,EAAM,gBAAgB;AAChB,OACC,MACD,EAAe,WAAW,QAAQ,IACtC,EAAsB,EAAO,QAAQ,IAAI,EAAO,OAAO,EAAe;IACrE;EAAC;EAAgB;EAAgB,EAAO,QAAQ;EAAI,EAAO;EAAM,CAAC;CAiBrE,IAAM,IAAwB,EAAM,OAAsB,KAAK;AAoC/D,QAnCA,EAAM,gBAAgB;AAChB,GAAC,KAAa,CAAC,KACf,EAAO,QAAQ,SAAS,WACxB,EAAa,mBAAmB,YAC/B,EAAa,cACd,EAAsB,YAAY,EAAa,OAEnD,EAAsB,UAAU,EAAa,IAE7C,EAAmB,EAAa,WAAW,CAAC,YAAY;AACtD,KAAkB,EAAE,EAAQ,uCAAuC,CAAC;IACpE;IACD;EACD;EACA,GAAc;EACd,GAAc;EACd,GAAc;EACd,EAAO,QAAQ;EACf;EACD,CAAC,EAiBA,kBAAC,GAAD;EAA0C;YAd1C,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;GAAK,eAAY;GAAY,WAAU;aACpC,IACC,kBAAC,GAAD,EACE,sBAAsB,EAAS,kBAAkB,IAAiB,EAClE,CAAA,GAEF,kBAAC,GAAD,EAAoB,CAAA;GAElB,CAAA,EACO,CAKZ;EACwB,CAAA;;AAI/B,SAAgB,IAAmB;AACjC,QAAO,kBAAC,GAAD,EAAc,CAAA"}
+{"version":3,"file":"conversation.js","names":[],"sources":["../../src/routes/conversation.tsx"],"sourcesContent":["import React from \"react\";\nimport { useNavigate, useLocation, useMatch } from \"react-router\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useCommandStore } from \"#/stores/command-store\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentStore } from \"#/stores/agent-store\";\nimport { useConversationStateStore } from \"#/stores/conversation-state-store\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport {\n  clearLastConversationId,\n  setLastConversationId,\n} from \"#/api/backend-registry/last-conversation-store\";\nimport { AgentState } from \"#/types/agent-state\";\n\nimport { EventHandler } from \"../wrapper/event-handler\";\n\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useTaskPolling } from \"#/hooks/query/use-task-polling\";\n\nimport { displayErrorToast } from \"#/utils/custom-toast-handlers\";\nimport { useIsAuthed } from \"#/hooks/query/use-is-authed\";\nimport {\n  ConversationMain,\n  ConversationMobilePanelPage,\n} from \"#/components/features/conversation/conversation-main/conversation-main\";\n\nimport { WebSocketProviderWrapper } from \"#/contexts/websocket-provider-wrapper\";\nimport { useErrorMessageStore } from \"#/stores/error-message-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { resumeCloudSandbox } from \"#/api/cloud/conversation-service.api\";\n\nfunction AppContent() {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useConversationId();\n  const panelViewMatch = useMatch(\"/conversations/:conversationId/panel\");\n\n  const { isTask, taskStatus, taskDetail } = useTaskPolling();\n\n  // The conversationId in the URL belongs to whichever backend was\n  // active when the route first mounted. If the user switches backends\n  // while this route is still mounted, the id is meaningless under the\n  // new backend — disable the active-conversation fetch (and its 404\n  // toast) so we don't fire a request that the BackendSelector's\n  // redirect will immediately navigate away from anyway. Mirrors the\n  // same guard in `routes/automation-detail.tsx`.\n  const active = useActiveBackend();\n  const mountedBackendId = React.useRef(active.backend.id);\n  const mountedOrgId = React.useRef(active.orgId);\n  const backendChanged =\n    mountedBackendId.current !== active.backend.id ||\n    mountedOrgId.current !== active.orgId;\n\n  const { data: conversation, isFetched } = useActiveConversation();\n  const { data: isAuthed } = useIsAuthed();\n  const { resetConversationState } = useConversationStore();\n  const navigate = useNavigate();\n  const location = useLocation();\n  const clearTerminal = useCommandStore((state) => state.clearTerminal);\n  const resetConversationRuntimeState = useConversationStateStore(\n    (state) => state.reset,\n  );\n  const setCurrentAgentState = useAgentStore(\n    (state) => state.setCurrentAgentState,\n  );\n  const removeErrorMessage = useErrorMessageStore(\n    (state) => state.removeErrorMessage,\n  );\n\n  // Per-conversation UI/runtime resets. The event store is cleared separately,\n  // inside ConversationWebSocketProvider, so the clear is ordered *before* the\n  // preloaded-history re-seed (see the note there) — clearing it here would run\n  // too late and wipe the freshly seeded history on a conversation switch.\n  React.useEffect(() => {\n    clearTerminal();\n    resetConversationState();\n    resetConversationRuntimeState();\n    setCurrentAgentState(AgentState.LOADING);\n    removeErrorMessage();\n  }, [\n    conversationId,\n    clearTerminal,\n    resetConversationState,\n    resetConversationRuntimeState,\n    setCurrentAgentState,\n    removeErrorMessage,\n  ]);\n\n  React.useEffect(() => {\n    if (isTask && taskStatus === \"ERROR\") {\n      displayErrorToast(\n        taskDetail || t(I18nKey.CONVERSATION$FAILED_TO_START_FROM_TASK),\n      );\n      // Navigate back to the original conversation when a resume task fails so\n      // the user isn't stranded at the dead task-{id} URL. The resume effect's\n      // ref prevents it from immediately retrying once we land there.\n      const resumedFrom = (location.state as Record<string, unknown> | null)\n        ?.resumedFromConversationId as string | undefined;\n      navigate(\n        resumedFrom ? `/conversations/${resumedFrom}` : \"/conversations\",\n        { replace: true },\n      );\n    }\n  }, [isTask, taskStatus, taskDetail, t, navigate, location.state]);\n\n  React.useEffect(() => {\n    if (!isFetched || !isAuthed) return;\n    // The BackendSelector is in the middle of redirecting us away from\n    // this route — don't toast/navigate based on a 404 that's just\n    // \"this id doesn't exist on the new backend\".\n    if (backendChanged) return;\n\n    if (!conversation) {\n      // Clear the per-backend \"last selected\" slot so the next switch\n      // to this backend doesn't try to revisit a stale id.\n      clearLastConversationId(active.backend.id, active.orgId);\n      displayErrorToast(t(I18nKey.CONVERSATION$NOT_EXIST_OR_NO_PERMISSION));\n      navigate(\"/conversations\");\n    }\n  }, [\n    conversation,\n    isFetched,\n    isAuthed,\n    navigate,\n    t,\n    backendChanged,\n    active.backend.id,\n    active.orgId,\n  ]);\n\n  // Remember the most recently selected conversation for the current\n  // (backend, org) so flipping back to this backend later restores the\n  // user to where they left off. Skip while a backend switch is in\n  // flight: the id in the URL is from the previous backend and would\n  // otherwise overwrite the new backend's memory.\n  React.useEffect(() => {\n    if (backendChanged) return;\n    if (!conversationId) return;\n    if (conversationId.startsWith(\"task-\")) return;\n    setLastConversationId(active.backend.id, active.orgId, conversationId);\n  }, [conversationId, backendChanged, active.backend.id, active.orgId]);\n\n  // Cloud conversation resume: mirrors OpenHands' useSandboxRecovery.\n  //\n  // When the cloud API reports sandbox_status === \"PAUSED\" the sandbox is\n  // sleeping. The correct wake-up call is POST /api/v1/sandboxes/{id}/resume\n  // (a lightweight unpause). The previous approach — creating a new start task\n  // via POST /api/v1/app-conversations — was wrong: it tries to provision a\n  // fresh conversation in the sandbox and is subject to a 120-second cold-start\n  // timeout that can fail. The resume endpoint simply unpauses the existing one.\n  //\n  // After calling resume we stay on the current URL. The 3-second refetch\n  // interval in useActiveConversation (active while conversation_url is null)\n  // polls until conversation_url populates, then the WebSocket connects.\n  //\n  // A ref guards against duplicate triggers per unique conversation.id within\n  // the same route-mount lifetime.\n  const resumeTriggeredForRef = React.useRef<string | null>(null);\n  React.useEffect(() => {\n    if (!isFetched || !conversation) return;\n    if (active.backend.kind !== \"cloud\") return;\n    if (conversation.sandbox_status !== \"PAUSED\") return; // only resume PAUSED sandboxes\n    if (!conversation.sandbox_id) return; // no sandbox to resume\n    if (resumeTriggeredForRef.current === conversation.id) return; // already sent\n\n    resumeTriggeredForRef.current = conversation.id;\n\n    resumeCloudSandbox(conversation.sandbox_id).catch(() => {\n      displayErrorToast(t(I18nKey.CONVERSATION$FAILED_TO_START_FROM_TASK));\n    });\n  }, [\n    isFetched,\n    conversation?.id,\n    conversation?.sandbox_status,\n    conversation?.sandbox_id,\n    active.backend.kind,\n    t,\n  ]);\n\n  const content = (\n    <EventHandler>\n      <div data-testid=\"app-route\" className=\"flex h-full flex-col\">\n        {panelViewMatch ? (\n          <ConversationMobilePanelPage\n            onNavigateBack={() => navigate(`/conversations/${conversationId}`)}\n          />\n        ) : (\n          <ConversationMain />\n        )}\n      </div>\n    </EventHandler>\n  );\n\n  return (\n    <WebSocketProviderWrapper conversationId={conversationId}>\n      {content}\n    </WebSocketProviderWrapper>\n  );\n}\n\nexport function ConversationView() {\n  return <AppContent />;\n}\n\nexport default ConversationView;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiCA,SAAS,IAAa;CACpB,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,sBAAmB,GAAmB,EACxC,IAAiB,EAAS,uCAAuC,EAEjE,EAAE,WAAQ,eAAY,kBAAe,GAAgB,EASrD,IAAS,GAAkB,EAC3B,IAAmB,EAAM,OAAO,EAAO,QAAQ,GAAG,EAClD,IAAe,EAAM,OAAO,EAAO,MAAM,EACzC,IACJ,EAAiB,YAAY,EAAO,QAAQ,MAC5C,EAAa,YAAY,EAAO,OAE5B,EAAE,MAAM,GAAc,iBAAc,GAAuB,EAC3D,EAAE,MAAM,MAAa,GAAa,EAClC,EAAE,8BAA2B,GAAsB,EACnD,IAAW,GAAa,EACxB,IAAW,GAAa,EACxB,IAAgB,GAAiB,MAAU,EAAM,cAAc,EAC/D,IAAgC,GACnC,MAAU,EAAM,MAClB,EACK,IAAuB,GAC1B,MAAU,EAAM,qBAClB,EACK,IAAqB,GACxB,MAAU,EAAM,mBAClB;AAoED,CA9DA,EAAM,gBAAgB;AAKpB,EAJA,GAAe,EACf,GAAwB,EACxB,GAA+B,EAC/B,EAAqB,EAAW,QAAQ,EACxC,GAAoB;IACnB;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,EAEF,EAAM,gBAAgB;AACpB,MAAI,KAAU,MAAe,SAAS;AACpC,KACE,KAAc,EAAE,EAAQ,uCAAuC,CAChE;GAID,IAAM,IAAe,EAAS,OAC1B;AACJ,KACE,IAAc,kBAAkB,MAAgB,kBAChD,EAAE,SAAS,IAAM,CAClB;;IAEF;EAAC;EAAQ;EAAY;EAAY;EAAG;EAAU,EAAS;EAAM,CAAC,EAEjE,EAAM,gBAAgB;AAChB,GAAC,KAAa,CAAC,KAIf,KAEC,MAGH,EAAwB,EAAO,QAAQ,IAAI,EAAO,MAAM,EACxD,EAAkB,EAAE,EAAQ,wCAAwC,CAAC,EACrE,EAAS,iBAAiB;IAE3B;EACD;EACA;EACA;EACA;EACA;EACA;EACA,EAAO,QAAQ;EACf,EAAO;EACR,CAAC,EAOF,EAAM,gBAAgB;AAChB,OACC,MACD,EAAe,WAAW,QAAQ,IACtC,EAAsB,EAAO,QAAQ,IAAI,EAAO,OAAO,EAAe;IACrE;EAAC;EAAgB;EAAgB,EAAO,QAAQ;EAAI,EAAO;EAAM,CAAC;CAiBrE,IAAM,IAAwB,EAAM,OAAsB,KAAK;AAoC/D,QAnCA,EAAM,gBAAgB;AAChB,GAAC,KAAa,CAAC,KACf,EAAO,QAAQ,SAAS,WACxB,EAAa,mBAAmB,YAC/B,EAAa,cACd,EAAsB,YAAY,EAAa,OAEnD,EAAsB,UAAU,EAAa,IAE7C,EAAmB,EAAa,WAAW,CAAC,YAAY;AACtD,KAAkB,EAAE,EAAQ,uCAAuC,CAAC;IACpE;IACD;EACD;EACA,GAAc;EACd,GAAc;EACd,GAAc;EACd,EAAO,QAAQ;EACf;EACD,CAAC,EAiBA,kBAAC,GAAD;EAA0C;YAd1C,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;GAAK,eAAY;GAAY,WAAU;aACpC,IACC,kBAAC,GAAD,EACE,sBAAsB,EAAS,kBAAkB,IAAiB,EAClE,CAAA,GAEF,kBAAC,GAAD,EAAoB,CAAA;GAElB,CAAA,EACO,CAKZ;EACwB,CAAA;;AAI/B,SAAgB,IAAmB;AACjC,QAAO,kBAAC,GAAD,EAAc,CAAA"}

package/dist/routes/mcp.cjs

@@ -1,2 +1,2 @@
-const e=require(`../_virtual/_rolldown/runtime.cjs`),t=require(`../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../i18n/declaration.cjs`),r=require(`../contexts/active-backend-context.cjs`),i=require(`../utils/custom-toast-handlers.cjs`),a=require(`../utils/mcp-config.cjs`),o=require(`../hooks/query/use-settings.cjs`),s=require(`../components/features/settings/brand-button.cjs`),c=require(`../utils/settings-like-page-layout-classes.cjs`),l=require(`../utils/retrieve-axios-error-message.cjs`),u=require(`../components/features/skills/extensions-navigation.cjs`),d=require(`../components/shared/modals/confirmation-modal.cjs`),f=require(`../hooks/mutation/use-delete-mcp-server.cjs`);require(`../utils/acp-route-guard.cjs`);const p=require(`../utils/mcp-marketplace-utils.cjs`),m=require(`../node_modules/@openhands/extensions/integrations/index.cjs`),h=require(`../utils/mcp-installed-servers.cjs`),g=require(`../components/features/mcp-page/installed-servers-section.cjs`),_=require(`../components/features/mcp-page/marketplace-section.cjs`),v=require(`../components/features/mcp-page/install-server-modal.cjs`),y=require(`../components/features/mcp-page/custom-server-editor.cjs`),b=require(`../components/features/mcp-page/mcp-toolbar.cjs`);require(`../components/features/mcp-page/index.cjs`);let x=require(`react`);x=e.__toESM(x,1);let S=require(`react/jsx-runtime`);function C(){let{t:e}=t.useTranslation(`openhands`),{data:C,isLoading:w}=o.useSettings(),{mutate:T,isPending:E}=f.useDeleteMcpServer(),D=r.useActiveBackend().backend.kind,[O,k]=x.default.useState(null),[A,j]=x.default.useState(null),[M,N]=x.default.useState(null),[P,F]=x.default.useState(``),[I,L]=x.default.useState(`all`),R=h.flattenMcpConfig(a.parseMcpConfig(C?.agent_settings?.mcp_config)),z=R.filter(e=>p.installedServerMatchesQuery(e,p.findCatalogEntryForServer(e,m.default),P)),B=e=>{k(e)};return w||!C?(0,S.jsxs)(`div`,{"data-testid":`mcp-page`,className:`flex h-full gap-4 md:gap-6 md:pl-8 lg:gap-10 lg:pl-10`,children:[(0,S.jsx)(u.ExtensionsNavigation,{}),(0,S.jsx)(`div`,{className:`flex h-full flex-1 items-center justify-center px-4 md:px-0`,children:(0,S.jsx)(`div`,{className:`h-8 w-8 rounded-full border-2 border-[var(--oh-border)] border-t-white animate-spin`})})]}):(0,S.jsxs)(`div`,{"data-testid":`mcp-page`,className:`flex h-full gap-4 md:gap-6 md:pl-8 lg:gap-10 lg:pl-10`,children:[(0,S.jsx)(u.ExtensionsNavigation,{}),(0,S.jsxs)(`main`,{className:c.settingsLikeMainScrollClassName,children:[(0,S.jsxs)(`div`,{className:`mx-auto flex w-full min-w-0 max-w-[800px] flex-col gap-6`,children:[(0,S.jsx)(`div`,{className:`min-w-0`,children:(0,S.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,S.jsxs)(`div`,{className:`space-y-1`,children:[(0,S.jsx)(`h2`,{className:`text-xl font-medium leading-6 text-foreground`,children:e(n.I18nKey.SETTINGS$MCP_TITLE)}),(0,S.jsx)(`div`,{className:`max-w-2xl text-sm text-tertiary-light`,children:e(n.I18nKey.MCP$PAGE_DESCRIPTION)})]}),(0,S.jsx)(s.BrandButton,{type:`button`,variant:`secondary`,testId:`mcp-add-custom-server`,className:`flex-shrink-0 whitespace-nowrap`,onClick:()=>j({id:``,type:`sse`}),children:e(n.I18nKey.MCP$ADD_CUSTOM)})]})}),(0,S.jsx)(b.McpToolbar,{search:P,onSearchChange:F,sectionFilter:I,onSectionFilterChange:L}),I===`library`?null:(0,S.jsxs)(`section`,{className:`flex flex-col gap-3`,children:[(0,S.jsx)(`h2`,{className:`text-base font-semibold text-foreground`,children:e(n.I18nKey.MCP$INSTALLED_TITLE)}),(0,S.jsx)(g.InstalledServersSection,{servers:z,hasAnyInstalled:R.length>0,query:P,onEdit:e=>{j(e)},onDelete:e=>{let t=R.find(t=>t.id===e);t&&N(t)}})]}),I===`installed`?null:(0,S.jsx)(_.MarketplaceSection,{backendKind:D,onSelect:B,onAdd:B,query:P})]}),O&&(0,S.jsx)(v.InstallServerModal,{entry:O,onClose:()=>k(null)}),A&&(0,S.jsx)(y.CustomServerEditor,{server:A,existingServers:R,onClose:()=>j(null)}),M&&(0,S.jsx)(d.ConfirmationModal,{text:e(n.I18nKey.SETTINGS$MCP_CONFIRM_DELETE),onCancel:()=>N(null),onConfirm:()=>{M&&T(M,{onSuccess:()=>{i.displaySuccessToast(e(n.I18nKey.MCP$REMOVE_SUCCESS)),N(null)},onError:t=>{i.displayErrorToast(l.retrieveAxiosErrorMessage(t)||e(n.I18nKey.ERROR$GENERIC)),N(null)}})},isConfirming:E})]})]})}exports.default=C;
+const e=require(`../_virtual/_rolldown/runtime.cjs`),t=require(`../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../i18n/declaration.cjs`),r=require(`../contexts/active-backend-context.cjs`),i=require(`../utils/custom-toast-handlers.cjs`),a=require(`../utils/mcp-config.cjs`),o=require(`../hooks/query/use-settings.cjs`),s=require(`../components/features/settings/brand-button.cjs`),c=require(`../utils/settings-like-page-layout-classes.cjs`),l=require(`../utils/retrieve-axios-error-message.cjs`),u=require(`../components/features/skills/extensions-navigation.cjs`),d=require(`../components/shared/modals/confirmation-modal.cjs`),f=require(`../hooks/mutation/use-delete-mcp-server.cjs`);require(`../utils/acp-route-guard.cjs`);const p=require(`../utils/mcp-marketplace-utils.cjs`),m=require(`../node_modules/@openhands/extensions/integrations/index.cjs`),h=require(`../utils/mcp-installed-servers.cjs`),g=require(`../components/features/mcp-page/installed-servers-section.cjs`),_=require(`../components/features/mcp-page/marketplace-section.cjs`),v=require(`../components/features/mcp-page/install-server-modal.cjs`),y=require(`../components/features/mcp-page/custom-server-editor.cjs`),b=require(`../components/features/mcp-page/mcp-toolbar.cjs`);require(`../components/features/mcp-page/index.cjs`);let x=require(`react`);x=e.__toESM(x,1);let S=require(`react/jsx-runtime`);function C(){let{t:e}=t.useTranslation(`openhands`),{data:C,isLoading:w}=o.useSettings(),{mutate:T,isPending:E}=f.useDeleteMcpServer(),D=r.useActiveBackend().backend.kind,[O,k]=x.default.useState(null),[A,j]=x.default.useState(null),[M,N]=x.default.useState(null),[P,F]=x.default.useState(``),[I,L]=x.default.useState(`all`),R=h.flattenMcpConfig(a.parseMcpConfig(C?.agent_settings?.mcp_config)),z=p.getMcpMarketplaceCatalog(m.default),B=R.filter(e=>p.installedServerMatchesQuery(e,p.findCatalogEntryForServer(e,z),P)),V=e=>{k(e)};return w||!C?(0,S.jsxs)(`div`,{"data-testid":`mcp-page`,className:`flex h-full gap-4 md:gap-6 md:pl-8 lg:gap-10 lg:pl-10`,children:[(0,S.jsx)(u.ExtensionsNavigation,{}),(0,S.jsx)(`div`,{className:`flex h-full flex-1 items-center justify-center px-4 md:px-0`,children:(0,S.jsx)(`div`,{className:`h-8 w-8 rounded-full border-2 border-[var(--oh-border)] border-t-white animate-spin`})})]}):(0,S.jsxs)(`div`,{"data-testid":`mcp-page`,className:`flex h-full gap-4 md:gap-6 md:pl-8 lg:gap-10 lg:pl-10`,children:[(0,S.jsx)(u.ExtensionsNavigation,{}),(0,S.jsxs)(`main`,{className:c.settingsLikeMainScrollClassName,children:[(0,S.jsxs)(`div`,{className:`mx-auto flex w-full min-w-0 max-w-[800px] flex-col gap-6`,children:[(0,S.jsx)(`div`,{className:`min-w-0`,children:(0,S.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,S.jsxs)(`div`,{className:`space-y-1`,children:[(0,S.jsx)(`h2`,{className:`text-xl font-medium leading-6 text-foreground`,children:e(n.I18nKey.SETTINGS$MCP_TITLE)}),(0,S.jsx)(`div`,{className:`max-w-2xl text-sm text-tertiary-light`,children:e(n.I18nKey.MCP$PAGE_DESCRIPTION)})]}),(0,S.jsx)(s.BrandButton,{type:`button`,variant:`secondary`,testId:`mcp-add-custom-server`,className:`flex-shrink-0 whitespace-nowrap`,onClick:()=>j({id:``,type:`sse`}),children:e(n.I18nKey.MCP$ADD_CUSTOM)})]})}),(0,S.jsx)(b.McpToolbar,{search:P,onSearchChange:F,sectionFilter:I,onSectionFilterChange:L}),I===`library`?null:(0,S.jsxs)(`section`,{className:`flex flex-col gap-3`,children:[(0,S.jsx)(`h2`,{className:`text-base font-semibold text-foreground`,children:e(n.I18nKey.MCP$INSTALLED_TITLE)}),(0,S.jsx)(g.InstalledServersSection,{servers:B,hasAnyInstalled:R.length>0,query:P,onEdit:e=>{j(e)},onDelete:e=>{let t=R.find(t=>t.id===e);t&&N(t)}})]}),I===`installed`?null:(0,S.jsx)(_.MarketplaceSection,{backendKind:D,onSelect:V,onAdd:V,query:P})]}),O&&(0,S.jsx)(v.InstallServerModal,{entry:O,onClose:()=>k(null)}),A&&(0,S.jsx)(y.CustomServerEditor,{server:A,existingServers:R,onClose:()=>j(null)}),M&&(0,S.jsx)(d.ConfirmationModal,{text:e(n.I18nKey.SETTINGS$MCP_CONFIRM_DELETE),onCancel:()=>N(null),onConfirm:()=>{M&&T(M,{onSuccess:()=>{i.displaySuccessToast(e(n.I18nKey.MCP$REMOVE_SUCCESS)),N(null)},onError:t=>{i.displayErrorToast(l.retrieveAxiosErrorMessage(t)||e(n.I18nKey.ERROR$GENERIC)),N(null)}})},isConfirming:E})]})]})}exports.default=C;
 //# sourceMappingURL=mcp.cjs.map

package/dist/routes/mcp.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"mcp.cjs","names":[],"sources":["../../src/routes/mcp.tsx"],"sourcesContent":["import React from \"react\";\nimport { AxiosError } from \"axios\";\nimport { ExtensionsNavigation } from \"#/components/features/skills/extensions-navigation\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { useSettings } from \"#/hooks/query/use-settings\";\nimport { useDeleteMcpServer } from \"#/hooks/mutation/use-delete-mcp-server\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { parseMcpConfig } from \"#/utils/mcp-config\";\nimport { redirectIfAcpActive } from \"#/utils/acp-route-guard\";\nimport {\n  displayErrorToast,\n  displaySuccessToast,\n} from \"#/utils/custom-toast-handlers\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\nimport { settingsLikeMainScrollClassName } from \"#/utils/settings-like-page-layout-classes\";\nimport {\n  findCatalogEntryForServer,\n  installedServerMatchesQuery,\n} from \"#/utils/mcp-marketplace-utils\";\nimport {\n  INTEGRATION_CATALOG as INTEGRATION_MARKETPLACE,\n  type IntegrationCatalogEntry as MarketplaceEntry,\n} from \"@openhands/extensions/integrations\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport { flattenMcpConfig } from \"#/utils/mcp-installed-servers\";\nimport {\n  InstalledServersSection,\n  McpToolbar,\n  MarketplaceSection,\n  InstallServerModal,\n  CustomServerEditor,\n  type McpSectionFilter,\n} from \"#/components/features/mcp-page\";\n\n// ACP guard: the ACP sub-agent owns its own MCP server configuration —\n// the SDK explicitly rejects `mcp_config` on ACPAgent init, and\n// `agent-server-adapter` already strips it from start payloads. The\n// Settings → Agent page is where the user configures the ACP server, so\n// bouncing there is consistent with how `/settings` and\n// `/settings/condenser` already behave under ACP.\n//\n// Declared with no parameters (rather than typed as Route.ClientLoaderArgs)\n// so the lib build doesn't pull generated React Router types out of rootDir.\nexport const clientLoader = async () => redirectIfAcpActive();\n\nexport default function MCPPage() {\n  const { t } = useTranslation(\"openhands\");\n  const { data: settings, isLoading } = useSettings();\n  const { mutate: deleteMcpServer, isPending: isDeleting } =\n    useDeleteMcpServer();\n  const activeBackend = useActiveBackend();\n  const backendKind = activeBackend.backend.kind;\n\n  const [installEntry, setInstallEntry] =\n    React.useState<MarketplaceEntry | null>(null);\n  const [editingServer, setEditingServer] =\n    React.useState<MCPServerConfig | null>(null);\n  const [serverToDelete, setServerToDelete] =\n    React.useState<MCPServerConfig | null>(null);\n  const [searchQuery, setSearchQuery] = React.useState(\"\");\n  const [sectionFilter, setSectionFilter] =\n    React.useState<McpSectionFilter>(\"all\");\n\n  const mcpConfig = parseMcpConfig(settings?.agent_settings?.mcp_config);\n  const allServers = flattenMcpConfig(mcpConfig);\n\n  // Filter installed servers by the search query. We pair each server\n  // with its catalog entry (if any) so the search can match friendly\n  // names like \"Slack\" against a stdio server whose own `.name` is\n  // just \"slack\".\n  const filteredInstalledServers = allServers.filter((server) =>\n    installedServerMatchesQuery(\n      server,\n      findCatalogEntryForServer(server, INTEGRATION_MARKETPLACE),\n      searchQuery,\n    ),\n  );\n\n  const handleMarketplaceInstall = (entry: MarketplaceEntry) => {\n    setInstallEntry(entry);\n  };\n\n  const handleEdit = (server: MCPServerConfig) => {\n    setEditingServer(server);\n  };\n\n  const handleDeleteClick = (serverId: string) => {\n    const target = allServers.find((s) => s.id === serverId);\n    if (target) setServerToDelete(target);\n  };\n\n  const handleConfirmDelete = () => {\n    if (!serverToDelete) return;\n    // Pass the full server config — useDeleteMcpServer re-resolves its\n    // position against the fresh settings at mutation time, so a\n    // background refresh between this click and confirm cannot point\n    // us at the wrong index.\n    deleteMcpServer(serverToDelete, {\n      onSuccess: () => {\n        displaySuccessToast(t(I18nKey.MCP$REMOVE_SUCCESS));\n        setServerToDelete(null);\n      },\n      onError: (err) => {\n        const message = retrieveAxiosErrorMessage(err as AxiosError);\n        displayErrorToast(message || t(I18nKey.ERROR$GENERIC));\n        setServerToDelete(null);\n      },\n    });\n  };\n\n  if (isLoading || !settings) {\n    return (\n      <div\n        data-testid=\"mcp-page\"\n        className=\"flex h-full gap-4 md:gap-6 md:pl-8 lg:gap-10 lg:pl-10\"\n      >\n        <ExtensionsNavigation />\n        <div className=\"flex h-full flex-1 items-center justify-center px-4 md:px-0\">\n          <div className=\"h-8 w-8 rounded-full border-2 border-[var(--oh-border)] border-t-white animate-spin\" />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"mcp-page\"\n      className=\"flex h-full gap-4 md:gap-6 md:pl-8 lg:gap-10 lg:pl-10\"\n    >\n      <ExtensionsNavigation />\n      <main className={settingsLikeMainScrollClassName}>\n        <div className=\"mx-auto flex w-full min-w-0 max-w-[800px] flex-col gap-6\">\n          <div className=\"min-w-0\">\n            <div className=\"flex items-start justify-between gap-4\">\n              <div className=\"space-y-1\">\n                <h2 className=\"text-xl font-medium leading-6 text-foreground\">\n                  {t(I18nKey.SETTINGS$MCP_TITLE)}\n                </h2>\n                <div className=\"max-w-2xl text-sm text-tertiary-light\">\n                  {t(I18nKey.MCP$PAGE_DESCRIPTION)}\n                </div>\n              </div>\n              <BrandButton\n                type=\"button\"\n                variant=\"secondary\"\n                testId=\"mcp-add-custom-server\"\n                className=\"flex-shrink-0 whitespace-nowrap\"\n                onClick={() => setEditingServer({ id: \"\", type: \"sse\" })}\n              >\n                {t(I18nKey.MCP$ADD_CUSTOM)}\n              </BrandButton>\n            </div>\n          </div>\n\n          <McpToolbar\n            search={searchQuery}\n            onSearchChange={setSearchQuery}\n            sectionFilter={sectionFilter}\n            onSectionFilterChange={setSectionFilter}\n          />\n\n          {sectionFilter !== \"library\" ? (\n            <section className=\"flex flex-col gap-3\">\n              <h2 className=\"text-base font-semibold text-foreground\">\n                {t(I18nKey.MCP$INSTALLED_TITLE)}\n              </h2>\n              <InstalledServersSection\n                servers={filteredInstalledServers}\n                hasAnyInstalled={allServers.length > 0}\n                query={searchQuery}\n                onEdit={handleEdit}\n                onDelete={handleDeleteClick}\n              />\n            </section>\n          ) : null}\n\n          {sectionFilter !== \"installed\" ? (\n            <MarketplaceSection\n              backendKind={backendKind}\n              onSelect={handleMarketplaceInstall}\n              onAdd={handleMarketplaceInstall}\n              query={searchQuery}\n            />\n          ) : null}\n        </div>\n\n        {installEntry && (\n          <InstallServerModal\n            entry={installEntry}\n            onClose={() => setInstallEntry(null)}\n          />\n        )}\n\n        {/* Custom (or non-marketplace) server editor. The empty-id\n            sentinel (`{ id: \"\", type: \"sse\" }`) means \"add new\". */}\n        {editingServer && (\n          <CustomServerEditor\n            server={editingServer}\n            existingServers={allServers}\n            onClose={() => setEditingServer(null)}\n          />\n        )}\n\n        {serverToDelete && (\n          <ConfirmationModal\n            text={t(I18nKey.SETTINGS$MCP_CONFIRM_DELETE)}\n            onCancel={() => setServerToDelete(null)}\n            onConfirm={handleConfirmDelete}\n            isConfirming={isDeleting}\n          />\n        )}\n      </main>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"mcp.cjs","names":[],"sources":["../../src/routes/mcp.tsx"],"sourcesContent":["import React from \"react\";\nimport { AxiosError } from \"axios\";\nimport { ExtensionsNavigation } from \"#/components/features/skills/extensions-navigation\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { useSettings } from \"#/hooks/query/use-settings\";\nimport { useDeleteMcpServer } from \"#/hooks/mutation/use-delete-mcp-server\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { parseMcpConfig } from \"#/utils/mcp-config\";\nimport { redirectIfAcpActive } from \"#/utils/acp-route-guard\";\nimport {\n  displayErrorToast,\n  displaySuccessToast,\n} from \"#/utils/custom-toast-handlers\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\nimport { settingsLikeMainScrollClassName } from \"#/utils/settings-like-page-layout-classes\";\nimport {\n  findCatalogEntryForServer,\n  getMcpMarketplaceCatalog,\n  installedServerMatchesQuery,\n} from \"#/utils/mcp-marketplace-utils\";\nimport {\n  INTEGRATION_CATALOG as MCP_MARKETPLACE,\n  type IntegrationCatalogEntry as MarketplaceEntry,\n} from \"@openhands/extensions/integrations\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport { flattenMcpConfig } from \"#/utils/mcp-installed-servers\";\nimport {\n  InstalledServersSection,\n  McpToolbar,\n  MarketplaceSection,\n  InstallServerModal,\n  CustomServerEditor,\n  type McpSectionFilter,\n} from \"#/components/features/mcp-page\";\n\n// ACP guard: the ACP sub-agent owns its own MCP server configuration —\n// the SDK explicitly rejects `mcp_config` on ACPAgent init, and\n// `agent-server-adapter` already strips it from start payloads. The\n// Settings → Agent page is where the user configures the ACP server, so\n// bouncing there is consistent with how `/settings` and\n// `/settings/condenser` already behave under ACP.\n//\n// Declared with no parameters (rather than typed as Route.ClientLoaderArgs)\n// so the lib build doesn't pull generated React Router types out of rootDir.\nexport const clientLoader = async () => redirectIfAcpActive();\n\nexport default function MCPPage() {\n  const { t } = useTranslation(\"openhands\");\n  const { data: settings, isLoading } = useSettings();\n  const { mutate: deleteMcpServer, isPending: isDeleting } =\n    useDeleteMcpServer();\n  const activeBackend = useActiveBackend();\n  const backendKind = activeBackend.backend.kind;\n\n  const [installEntry, setInstallEntry] =\n    React.useState<MarketplaceEntry | null>(null);\n  const [editingServer, setEditingServer] =\n    React.useState<MCPServerConfig | null>(null);\n  const [serverToDelete, setServerToDelete] =\n    React.useState<MCPServerConfig | null>(null);\n  const [searchQuery, setSearchQuery] = React.useState(\"\");\n  const [sectionFilter, setSectionFilter] =\n    React.useState<McpSectionFilter>(\"all\");\n\n  const mcpConfig = parseMcpConfig(settings?.agent_settings?.mcp_config);\n  const allServers = flattenMcpConfig(mcpConfig);\n  const mcpMarketplace = getMcpMarketplaceCatalog(MCP_MARKETPLACE);\n\n  // Filter installed servers by the search query. We pair each server\n  // with its catalog entry (if any) so the search can match friendly\n  // names like \"Slack\" against a stdio server whose own `.name` is\n  // just \"slack\".\n  const filteredInstalledServers = allServers.filter((server) =>\n    installedServerMatchesQuery(\n      server,\n      findCatalogEntryForServer(server, mcpMarketplace),\n      searchQuery,\n    ),\n  );\n\n  const handleMarketplaceInstall = (entry: MarketplaceEntry) => {\n    setInstallEntry(entry);\n  };\n\n  const handleEdit = (server: MCPServerConfig) => {\n    setEditingServer(server);\n  };\n\n  const handleDeleteClick = (serverId: string) => {\n    const target = allServers.find((s) => s.id === serverId);\n    if (target) setServerToDelete(target);\n  };\n\n  const handleConfirmDelete = () => {\n    if (!serverToDelete) return;\n    // Pass the full server config — useDeleteMcpServer re-resolves its\n    // position against the fresh settings at mutation time, so a\n    // background refresh between this click and confirm cannot point\n    // us at the wrong index.\n    deleteMcpServer(serverToDelete, {\n      onSuccess: () => {\n        displaySuccessToast(t(I18nKey.MCP$REMOVE_SUCCESS));\n        setServerToDelete(null);\n      },\n      onError: (err) => {\n        const message = retrieveAxiosErrorMessage(err as AxiosError);\n        displayErrorToast(message || t(I18nKey.ERROR$GENERIC));\n        setServerToDelete(null);\n      },\n    });\n  };\n\n  if (isLoading || !settings) {\n    return (\n      <div\n        data-testid=\"mcp-page\"\n        className=\"flex h-full gap-4 md:gap-6 md:pl-8 lg:gap-10 lg:pl-10\"\n      >\n        <ExtensionsNavigation />\n        <div className=\"flex h-full flex-1 items-center justify-center px-4 md:px-0\">\n          <div className=\"h-8 w-8 rounded-full border-2 border-[var(--oh-border)] border-t-white animate-spin\" />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"mcp-page\"\n      className=\"flex h-full gap-4 md:gap-6 md:pl-8 lg:gap-10 lg:pl-10\"\n    >\n      <ExtensionsNavigation />\n      <main className={settingsLikeMainScrollClassName}>\n        <div className=\"mx-auto flex w-full min-w-0 max-w-[800px] flex-col gap-6\">\n          <div className=\"min-w-0\">\n            <div className=\"flex items-start justify-between gap-4\">\n              <div className=\"space-y-1\">\n                <h2 className=\"text-xl font-medium leading-6 text-foreground\">\n                  {t(I18nKey.SETTINGS$MCP_TITLE)}\n                </h2>\n                <div className=\"max-w-2xl text-sm text-tertiary-light\">\n                  {t(I18nKey.MCP$PAGE_DESCRIPTION)}\n                </div>\n              </div>\n              <BrandButton\n                type=\"button\"\n                variant=\"secondary\"\n                testId=\"mcp-add-custom-server\"\n                className=\"flex-shrink-0 whitespace-nowrap\"\n                onClick={() => setEditingServer({ id: \"\", type: \"sse\" })}\n              >\n                {t(I18nKey.MCP$ADD_CUSTOM)}\n              </BrandButton>\n            </div>\n          </div>\n\n          <McpToolbar\n            search={searchQuery}\n            onSearchChange={setSearchQuery}\n            sectionFilter={sectionFilter}\n            onSectionFilterChange={setSectionFilter}\n          />\n\n          {sectionFilter !== \"library\" ? (\n            <section className=\"flex flex-col gap-3\">\n              <h2 className=\"text-base font-semibold text-foreground\">\n                {t(I18nKey.MCP$INSTALLED_TITLE)}\n              </h2>\n              <InstalledServersSection\n                servers={filteredInstalledServers}\n                hasAnyInstalled={allServers.length > 0}\n                query={searchQuery}\n                onEdit={handleEdit}\n                onDelete={handleDeleteClick}\n              />\n            </section>\n          ) : null}\n\n          {sectionFilter !== \"installed\" ? (\n            <MarketplaceSection\n              backendKind={backendKind}\n              onSelect={handleMarketplaceInstall}\n              onAdd={handleMarketplaceInstall}\n              query={searchQuery}\n            />\n          ) : null}\n        </div>\n\n        {installEntry && (\n          <InstallServerModal\n            entry={installEntry}\n            onClose={() => setInstallEntry(null)}\n          />\n        )}\n\n        {/* Custom (or non-marketplace) server editor. The empty-id\n            sentinel (`{ id: \"\", type: \"sse\" }`) means \"add new\". */}\n        {editingServer && (\n          <CustomServerEditor\n            server={editingServer}\n            existingServers={allServers}\n            onClose={() => setEditingServer(null)}\n          />\n        )}\n\n        {serverToDelete && (\n          <ConfirmationModal\n            text={t(I18nKey.SETTINGS$MCP_CONFIRM_DELETE)}\n            onCancel={() => setServerToDelete(null)}\n            onConfirm={handleConfirmDelete}\n            isConfirming={isDeleting}\n          />\n        )}\n      </main>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/routes/mcp.js

@@ -11,125 +11,125 @@ import { ExtensionsNavigation as u } from "../components/features/skills/extensi
 import { ConfirmationModal as d } from "../components/shared/modals/confirmation-modal.js";
 import { useDeleteMcpServer as f } from "../hooks/mutation/use-delete-mcp-server.js";
 import "../utils/acp-route-guard.js";
-import { findCatalogEntryForServer as p, installedServerMatchesQuery as m } from "../utils/mcp-marketplace-utils.js";
-import h from "../node_modules/@openhands/extensions/integrations/index.js";
-import { flattenMcpConfig as g } from "../utils/mcp-installed-servers.js";
-import { InstalledServersSection as _ } from "../components/features/mcp-page/installed-servers-section.js";
-import { MarketplaceSection as v } from "../components/features/mcp-page/marketplace-section.js";
-import { InstallServerModal as y } from "../components/features/mcp-page/install-server-modal.js";
-import { CustomServerEditor as b } from "../components/features/mcp-page/custom-server-editor.js";
-import { McpToolbar as x } from "../components/features/mcp-page/mcp-toolbar.js";
+import { findCatalogEntryForServer as p, getMcpMarketplaceCatalog as m, installedServerMatchesQuery as h } from "../utils/mcp-marketplace-utils.js";
+import g from "../node_modules/@openhands/extensions/integrations/index.js";
+import { flattenMcpConfig as _ } from "../utils/mcp-installed-servers.js";
+import { InstalledServersSection as v } from "../components/features/mcp-page/installed-servers-section.js";
+import { MarketplaceSection as y } from "../components/features/mcp-page/marketplace-section.js";
+import { InstallServerModal as b } from "../components/features/mcp-page/install-server-modal.js";
+import { CustomServerEditor as x } from "../components/features/mcp-page/custom-server-editor.js";
+import { McpToolbar as S } from "../components/features/mcp-page/mcp-toolbar.js";
 import "../components/features/mcp-page/index.js";
-import S from "react";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import C from "react";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region src/routes/mcp.tsx
-function T() {
-	let { t: T } = e("openhands"), { data: E, isLoading: D } = o(), { mutate: O, isPending: k } = f(), A = n().backend.kind, [j, M] = S.useState(null), [N, P] = S.useState(null), [F, I] = S.useState(null), [L, R] = S.useState(""), [z, B] = S.useState("all"), V = g(a(E?.agent_settings?.mcp_config)), H = V.filter((e) => m(e, p(e, h), L)), U = (e) => {
-		M(e);
+function E() {
+	let { t: E } = e("openhands"), { data: D, isLoading: O } = o(), { mutate: k, isPending: A } = f(), j = n().backend.kind, [M, N] = C.useState(null), [P, F] = C.useState(null), [I, L] = C.useState(null), [R, z] = C.useState(""), [B, V] = C.useState("all"), H = _(a(D?.agent_settings?.mcp_config)), U = m(g), W = H.filter((e) => h(e, p(e, U), R)), G = (e) => {
+		N(e);
 	};
-	return D || !E ? /* @__PURE__ */ w("div", {
+	return O || !D ? /* @__PURE__ */ T("div", {
 		"data-testid": "mcp-page",
 		className: "flex h-full gap-4 md:gap-6 md:pl-8 lg:gap-10 lg:pl-10",
-		children: [/* @__PURE__ */ C(u, {}), /* @__PURE__ */ C("div", {
+		children: [/* @__PURE__ */ w(u, {}), /* @__PURE__ */ w("div", {
 			className: "flex h-full flex-1 items-center justify-center px-4 md:px-0",
-			children: /* @__PURE__ */ C("div", { className: "h-8 w-8 rounded-full border-2 border-[var(--oh-border)] border-t-white animate-spin" })
+			children: /* @__PURE__ */ w("div", { className: "h-8 w-8 rounded-full border-2 border-[var(--oh-border)] border-t-white animate-spin" })
 		})]
-	}) : /* @__PURE__ */ w("div", {
+	}) : /* @__PURE__ */ T("div", {
 		"data-testid": "mcp-page",
 		className: "flex h-full gap-4 md:gap-6 md:pl-8 lg:gap-10 lg:pl-10",
-		children: [/* @__PURE__ */ C(u, {}), /* @__PURE__ */ w("main", {
+		children: [/* @__PURE__ */ w(u, {}), /* @__PURE__ */ T("main", {
 			className: c,
 			children: [
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ T("div", {
 					className: "mx-auto flex w-full min-w-0 max-w-[800px] flex-col gap-6",
 					children: [
-						/* @__PURE__ */ C("div", {
+						/* @__PURE__ */ w("div", {
 							className: "min-w-0",
-							children: /* @__PURE__ */ w("div", {
+							children: /* @__PURE__ */ T("div", {
 								className: "flex items-start justify-between gap-4",
-								children: [/* @__PURE__ */ w("div", {
+								children: [/* @__PURE__ */ T("div", {
 									className: "space-y-1",
-									children: [/* @__PURE__ */ C("h2", {
+									children: [/* @__PURE__ */ w("h2", {
 										className: "text-xl font-medium leading-6 text-foreground",
-										children: T(t.SETTINGS$MCP_TITLE)
-									}), /* @__PURE__ */ C("div", {
+										children: E(t.SETTINGS$MCP_TITLE)
+									}), /* @__PURE__ */ w("div", {
 										className: "max-w-2xl text-sm text-tertiary-light",
-										children: T(t.MCP$PAGE_DESCRIPTION)
+										children: E(t.MCP$PAGE_DESCRIPTION)
 									})]
-								}), /* @__PURE__ */ C(s, {
+								}), /* @__PURE__ */ w(s, {
 									type: "button",
 									variant: "secondary",
 									testId: "mcp-add-custom-server",
 									className: "flex-shrink-0 whitespace-nowrap",
-									onClick: () => P({
+									onClick: () => F({
 										id: "",
 										type: "sse"
 									}),
-									children: T(t.MCP$ADD_CUSTOM)
+									children: E(t.MCP$ADD_CUSTOM)
 								})]
 							})
 						}),
-						/* @__PURE__ */ C(x, {
-							search: L,
-							onSearchChange: R,
-							sectionFilter: z,
-							onSectionFilterChange: B
+						/* @__PURE__ */ w(S, {
+							search: R,
+							onSearchChange: z,
+							sectionFilter: B,
+							onSectionFilterChange: V
 						}),
-						z === "library" ? null : /* @__PURE__ */ w("section", {
+						B === "library" ? null : /* @__PURE__ */ T("section", {
 							className: "flex flex-col gap-3",
-							children: [/* @__PURE__ */ C("h2", {
+							children: [/* @__PURE__ */ w("h2", {
 								className: "text-base font-semibold text-foreground",
-								children: T(t.MCP$INSTALLED_TITLE)
-							}), /* @__PURE__ */ C(_, {
-								servers: H,
-								hasAnyInstalled: V.length > 0,
-								query: L,
+								children: E(t.MCP$INSTALLED_TITLE)
+							}), /* @__PURE__ */ w(v, {
+								servers: W,
+								hasAnyInstalled: H.length > 0,
+								query: R,
 								onEdit: (e) => {
-									P(e);
+									F(e);
 								},
 								onDelete: (e) => {
-									let t = V.find((t) => t.id === e);
-									t && I(t);
+									let t = H.find((t) => t.id === e);
+									t && L(t);
 								}
 							})]
 						}),
-						z === "installed" ? null : /* @__PURE__ */ C(v, {
-							backendKind: A,
-							onSelect: U,
-							onAdd: U,
-							query: L
+						B === "installed" ? null : /* @__PURE__ */ w(y, {
+							backendKind: j,
+							onSelect: G,
+							onAdd: G,
+							query: R
 						})
 					]
 				}),
-				j && /* @__PURE__ */ C(y, {
-					entry: j,
-					onClose: () => M(null)
+				M && /* @__PURE__ */ w(b, {
+					entry: M,
+					onClose: () => N(null)
 				}),
-				N && /* @__PURE__ */ C(b, {
-					server: N,
-					existingServers: V,
-					onClose: () => P(null)
+				P && /* @__PURE__ */ w(x, {
+					server: P,
+					existingServers: H,
+					onClose: () => F(null)
 				}),
-				F && /* @__PURE__ */ C(d, {
-					text: T(t.SETTINGS$MCP_CONFIRM_DELETE),
-					onCancel: () => I(null),
+				I && /* @__PURE__ */ w(d, {
+					text: E(t.SETTINGS$MCP_CONFIRM_DELETE),
+					onCancel: () => L(null),
 					onConfirm: () => {
-						F && O(F, {
+						I && k(I, {
 							onSuccess: () => {
-								i(T(t.MCP$REMOVE_SUCCESS)), I(null);
+								i(E(t.MCP$REMOVE_SUCCESS)), L(null);
 							},
 							onError: (e) => {
-								r(l(e) || T(t.ERROR$GENERIC)), I(null);
+								r(l(e) || E(t.ERROR$GENERIC)), L(null);
 							}
 						});
 					},
-					isConfirming: k
+					isConfirming: A
 				})
 			]
 		})]
 	});
 }
 //#endregion
-export { T as default };
+export { E as default };
 
 //# sourceMappingURL=mcp.js.map

package/dist/routes/mcp.js.map

@@ -1 +1 @@
-{"version":3,"file":"mcp.js","names":[],"sources":["../../src/routes/mcp.tsx"],"sourcesContent":["import React from \"react\";\nimport { AxiosError } from \"axios\";\nimport { ExtensionsNavigation } from \"#/components/features/skills/extensions-navigation\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { useSettings } from \"#/hooks/query/use-settings\";\nimport { useDeleteMcpServer } from \"#/hooks/mutation/use-delete-mcp-server\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { parseMcpConfig } from \"#/utils/mcp-config\";\nimport { redirectIfAcpActive } from \"#/utils/acp-route-guard\";\nimport {\n  displayErrorToast,\n  displaySuccessToast,\n} from \"#/utils/custom-toast-handlers\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\nimport { settingsLikeMainScrollClassName } from \"#/utils/settings-like-page-layout-classes\";\nimport {\n  findCatalogEntryForServer,\n  installedServerMatchesQuery,\n} from \"#/utils/mcp-marketplace-utils\";\nimport {\n  INTEGRATION_CATALOG as INTEGRATION_MARKETPLACE,\n  type IntegrationCatalogEntry as MarketplaceEntry,\n} from \"@openhands/extensions/integrations\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport { flattenMcpConfig } from \"#/utils/mcp-installed-servers\";\nimport {\n  InstalledServersSection,\n  McpToolbar,\n  MarketplaceSection,\n  InstallServerModal,\n  CustomServerEditor,\n  type McpSectionFilter,\n} from \"#/components/features/mcp-page\";\n\n// ACP guard: the ACP sub-agent owns its own MCP server configuration —\n// the SDK explicitly rejects `mcp_config` on ACPAgent init, and\n// `agent-server-adapter` already strips it from start payloads. The\n// Settings → Agent page is where the user configures the ACP server, so\n// bouncing there is consistent with how `/settings` and\n// `/settings/condenser` already behave under ACP.\n//\n// Declared with no parameters (rather than typed as Route.ClientLoaderArgs)\n// so the lib build doesn't pull generated React Router types out of rootDir.\nexport const clientLoader = async () => redirectIfAcpActive();\n\nexport default function MCPPage() {\n  const { t } = useTranslation(\"openhands\");\n  const { data: settings, isLoading } = useSettings();\n  const { mutate: deleteMcpServer, isPending: isDeleting } =\n    useDeleteMcpServer();\n  const activeBackend = useActiveBackend();\n  const backendKind = activeBackend.backend.kind;\n\n  const [installEntry, setInstallEntry] =\n    React.useState<MarketplaceEntry | null>(null);\n  const [editingServer, setEditingServer] =\n    React.useState<MCPServerConfig | null>(null);\n  const [serverToDelete, setServerToDelete] =\n    React.useState<MCPServerConfig | null>(null);\n  const [searchQuery, setSearchQuery] = React.useState(\"\");\n  const [sectionFilter, setSectionFilter] =\n    React.useState<McpSectionFilter>(\"all\");\n\n  const mcpConfig = parseMcpConfig(settings?.agent_settings?.mcp_config);\n  const allServers = flattenMcpConfig(mcpConfig);\n\n  // Filter installed servers by the search query. We pair each server\n  // with its catalog entry (if any) so the search can match friendly\n  // names like \"Slack\" against a stdio server whose own `.name` is\n  // just \"slack\".\n  const filteredInstalledServers = allServers.filter((server) =>\n    installedServerMatchesQuery(\n      server,\n      findCatalogEntryForServer(server, INTEGRATION_MARKETPLACE),\n      searchQuery,\n    ),\n  );\n\n  const handleMarketplaceInstall = (entry: MarketplaceEntry) => {\n    setInstallEntry(entry);\n  };\n\n  const handleEdit = (server: MCPServerConfig) => {\n    setEditingServer(server);\n  };\n\n  const handleDeleteClick = (serverId: string) => {\n    const target = allServers.find((s) => s.id === serverId);\n    if (target) setServerToDelete(target);\n  };\n\n  const handleConfirmDelete = () => {\n    if (!serverToDelete) return;\n    // Pass the full server config — useDeleteMcpServer re-resolves its\n    // position against the fresh settings at mutation time, so a\n    // background refresh between this click and confirm cannot point\n    // us at the wrong index.\n    deleteMcpServer(serverToDelete, {\n      onSuccess: () => {\n        displaySuccessToast(t(I18nKey.MCP$REMOVE_SUCCESS));\n        setServerToDelete(null);\n      },\n      onError: (err) => {\n        const message = retrieveAxiosErrorMessage(err as AxiosError);\n        displayErrorToast(message || t(I18nKey.ERROR$GENERIC));\n        setServerToDelete(null);\n      },\n    });\n  };\n\n  if (isLoading || !settings) {\n    return (\n      <div\n        data-testid=\"mcp-page\"\n        className=\"flex h-full gap-4 md:gap-6 md:pl-8 lg:gap-10 lg:pl-10\"\n      >\n        <ExtensionsNavigation />\n        <div className=\"flex h-full flex-1 items-center justify-center px-4 md:px-0\">\n          <div className=\"h-8 w-8 rounded-full border-2 border-[var(--oh-border)] border-t-white animate-spin\" />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"mcp-page\"\n      className=\"flex h-full gap-4 md:gap-6 md:pl-8 lg:gap-10 lg:pl-10\"\n    >\n      <ExtensionsNavigation />\n      <main className={settingsLikeMainScrollClassName}>\n        <div className=\"mx-auto flex w-full min-w-0 max-w-[800px] flex-col gap-6\">\n          <div className=\"min-w-0\">\n            <div className=\"flex items-start justify-between gap-4\">\n              <div className=\"space-y-1\">\n                <h2 className=\"text-xl font-medium leading-6 text-foreground\">\n                  {t(I18nKey.SETTINGS$MCP_TITLE)}\n                </h2>\n                <div className=\"max-w-2xl text-sm text-tertiary-light\">\n                  {t(I18nKey.MCP$PAGE_DESCRIPTION)}\n                </div>\n              </div>\n              <BrandButton\n                type=\"button\"\n                variant=\"secondary\"\n                testId=\"mcp-add-custom-server\"\n                className=\"flex-shrink-0 whitespace-nowrap\"\n                onClick={() => setEditingServer({ id: \"\", type: \"sse\" })}\n              >\n                {t(I18nKey.MCP$ADD_CUSTOM)}\n              </BrandButton>\n            </div>\n          </div>\n\n          <McpToolbar\n            search={searchQuery}\n            onSearchChange={setSearchQuery}\n            sectionFilter={sectionFilter}\n            onSectionFilterChange={setSectionFilter}\n          />\n\n          {sectionFilter !== \"library\" ? (\n            <section className=\"flex flex-col gap-3\">\n              <h2 className=\"text-base font-semibold text-foreground\">\n                {t(I18nKey.MCP$INSTALLED_TITLE)}\n              </h2>\n              <InstalledServersSection\n                servers={filteredInstalledServers}\n                hasAnyInstalled={allServers.length > 0}\n                query={searchQuery}\n                onEdit={handleEdit}\n                onDelete={handleDeleteClick}\n              />\n            </section>\n          ) : null}\n\n          {sectionFilter !== \"installed\" ? (\n            <MarketplaceSection\n              backendKind={backendKind}\n              onSelect={handleMarketplaceInstall}\n              onAdd={handleMarketplaceInstall}\n              query={searchQuery}\n            />\n          ) : null}\n        </div>\n\n        {installEntry && (\n          <InstallServerModal\n            entry={installEntry}\n            onClose={() => setInstallEntry(null)}\n          />\n        )}\n\n        {/* Custom (or non-marketplace) server editor. The empty-id\n            sentinel (`{ id: \"\", type: \"sse\" }`) means \"add new\". */}\n        {editingServer && (\n          <CustomServerEditor\n            server={editingServer}\n            existingServers={allServers}\n            onClose={() => setEditingServer(null)}\n          />\n        )}\n\n        {serverToDelete && (\n          <ConfirmationModal\n            text={t(I18nKey.SETTINGS$MCP_CONFIRM_DELETE)}\n            onCancel={() => setServerToDelete(null)}\n            onConfirm={handleConfirmDelete}\n            isConfirming={isDeleting}\n          />\n        )}\n      </main>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"mcp.js","names":[],"sources":["../../src/routes/mcp.tsx"],"sourcesContent":["import React from \"react\";\nimport { AxiosError } from \"axios\";\nimport { ExtensionsNavigation } from \"#/components/features/skills/extensions-navigation\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { useSettings } from \"#/hooks/query/use-settings\";\nimport { useDeleteMcpServer } from \"#/hooks/mutation/use-delete-mcp-server\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { parseMcpConfig } from \"#/utils/mcp-config\";\nimport { redirectIfAcpActive } from \"#/utils/acp-route-guard\";\nimport {\n  displayErrorToast,\n  displaySuccessToast,\n} from \"#/utils/custom-toast-handlers\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\nimport { settingsLikeMainScrollClassName } from \"#/utils/settings-like-page-layout-classes\";\nimport {\n  findCatalogEntryForServer,\n  getMcpMarketplaceCatalog,\n  installedServerMatchesQuery,\n} from \"#/utils/mcp-marketplace-utils\";\nimport {\n  INTEGRATION_CATALOG as MCP_MARKETPLACE,\n  type IntegrationCatalogEntry as MarketplaceEntry,\n} from \"@openhands/extensions/integrations\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport { flattenMcpConfig } from \"#/utils/mcp-installed-servers\";\nimport {\n  InstalledServersSection,\n  McpToolbar,\n  MarketplaceSection,\n  InstallServerModal,\n  CustomServerEditor,\n  type McpSectionFilter,\n} from \"#/components/features/mcp-page\";\n\n// ACP guard: the ACP sub-agent owns its own MCP server configuration —\n// the SDK explicitly rejects `mcp_config` on ACPAgent init, and\n// `agent-server-adapter` already strips it from start payloads. The\n// Settings → Agent page is where the user configures the ACP server, so\n// bouncing there is consistent with how `/settings` and\n// `/settings/condenser` already behave under ACP.\n//\n// Declared with no parameters (rather than typed as Route.ClientLoaderArgs)\n// so the lib build doesn't pull generated React Router types out of rootDir.\nexport const clientLoader = async () => redirectIfAcpActive();\n\nexport default function MCPPage() {\n  const { t } = useTranslation(\"openhands\");\n  const { data: settings, isLoading } = useSettings();\n  const { mutate: deleteMcpServer, isPending: isDeleting } =\n    useDeleteMcpServer();\n  const activeBackend = useActiveBackend();\n  const backendKind = activeBackend.backend.kind;\n\n  const [installEntry, setInstallEntry] =\n    React.useState<MarketplaceEntry | null>(null);\n  const [editingServer, setEditingServer] =\n    React.useState<MCPServerConfig | null>(null);\n  const [serverToDelete, setServerToDelete] =\n    React.useState<MCPServerConfig | null>(null);\n  const [searchQuery, setSearchQuery] = React.useState(\"\");\n  const [sectionFilter, setSectionFilter] =\n    React.useState<McpSectionFilter>(\"all\");\n\n  const mcpConfig = parseMcpConfig(settings?.agent_settings?.mcp_config);\n  const allServers = flattenMcpConfig(mcpConfig);\n  const mcpMarketplace = getMcpMarketplaceCatalog(MCP_MARKETPLACE);\n\n  // Filter installed servers by the search query. We pair each server\n  // with its catalog entry (if any) so the search can match friendly\n  // names like \"Slack\" against a stdio server whose own `.name` is\n  // just \"slack\".\n  const filteredInstalledServers = allServers.filter((server) =>\n    installedServerMatchesQuery(\n      server,\n      findCatalogEntryForServer(server, mcpMarketplace),\n      searchQuery,\n    ),\n  );\n\n  const handleMarketplaceInstall = (entry: MarketplaceEntry) => {\n    setInstallEntry(entry);\n  };\n\n  const handleEdit = (server: MCPServerConfig) => {\n    setEditingServer(server);\n  };\n\n  const handleDeleteClick = (serverId: string) => {\n    const target = allServers.find((s) => s.id === serverId);\n    if (target) setServerToDelete(target);\n  };\n\n  const handleConfirmDelete = () => {\n    if (!serverToDelete) return;\n    // Pass the full server config — useDeleteMcpServer re-resolves its\n    // position against the fresh settings at mutation time, so a\n    // background refresh between this click and confirm cannot point\n    // us at the wrong index.\n    deleteMcpServer(serverToDelete, {\n      onSuccess: () => {\n        displaySuccessToast(t(I18nKey.MCP$REMOVE_SUCCESS));\n        setServerToDelete(null);\n      },\n      onError: (err) => {\n        const message = retrieveAxiosErrorMessage(err as AxiosError);\n        displayErrorToast(message || t(I18nKey.ERROR$GENERIC));\n        setServerToDelete(null);\n      },\n    });\n  };\n\n  if (isLoading || !settings) {\n    return (\n      <div\n        data-testid=\"mcp-page\"\n        className=\"flex h-full gap-4 md:gap-6 md:pl-8 lg:gap-10 lg:pl-10\"\n      >\n        <ExtensionsNavigation />\n        <div className=\"flex h-full flex-1 items-center justify-center px-4 md:px-0\">\n          <div className=\"h-8 w-8 rounded-full border-2 border-[var(--oh-border)] border-t-white animate-spin\" />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"mcp-page\"\n      className=\"flex h-full gap-4 md:gap-6 md:pl-8 lg:gap-10 lg:pl-10\"\n    >\n      <ExtensionsNavigation />\n      <main className={settingsLikeMainScrollClassName}>\n        <div className=\"mx-auto flex w-full min-w-0 max-w-[800px] flex-col gap-6\">\n          <div className=\"min-w-0\">\n            <div className=\"flex items-start justify-between gap-4\">\n              <div className=\"space-y-1\">\n                <h2 className=\"text-xl font-medium leading-6 text-foreground\">\n                  {t(I18nKey.SETTINGS$MCP_TITLE)}\n                </h2>\n                <div className=\"max-w-2xl text-sm text-tertiary-light\">\n                  {t(I18nKey.MCP$PAGE_DESCRIPTION)}\n                </div>\n              </div>\n              <BrandButton\n                type=\"button\"\n                variant=\"secondary\"\n                testId=\"mcp-add-custom-server\"\n                className=\"flex-shrink-0 whitespace-nowrap\"\n                onClick={() => setEditingServer({ id: \"\", type: \"sse\" })}\n              >\n                {t(I18nKey.MCP$ADD_CUSTOM)}\n              </BrandButton>\n            </div>\n          </div>\n\n          <McpToolbar\n            search={searchQuery}\n            onSearchChange={setSearchQuery}\n            sectionFilter={sectionFilter}\n            onSectionFilterChange={setSectionFilter}\n          />\n\n          {sectionFilter !== \"library\" ? (\n            <section className=\"flex flex-col gap-3\">\n              <h2 className=\"text-base font-semibold text-foreground\">\n                {t(I18nKey.MCP$INSTALLED_TITLE)}\n              </h2>\n              <InstalledServersSection\n                servers={filteredInstalledServers}\n                hasAnyInstalled={allServers.length > 0}\n                query={searchQuery}\n                onEdit={handleEdit}\n                onDelete={handleDeleteClick}\n              />\n            </section>\n          ) : null}\n\n          {sectionFilter !== \"installed\" ? (\n            <MarketplaceSection\n              backendKind={backendKind}\n              onSelect={handleMarketplaceInstall}\n              onAdd={handleMarketplaceInstall}\n              query={searchQuery}\n            />\n          ) : null}\n        </div>\n\n        {installEntry && (\n          <InstallServerModal\n            entry={installEntry}\n            onClose={() => setInstallEntry(null)}\n          />\n        )}\n\n        {/* Custom (or non-marketplace) server editor. The empty-id\n            sentinel (`{ id: \"\", type: \"sse\" }`) means \"add new\". */}\n        {editingServer && (\n          <CustomServerEditor\n            server={editingServer}\n            existingServers={allServers}\n            onClose={() => setEditingServer(null)}\n          />\n        )}\n\n        {serverToDelete && (\n          <ConfirmationModal\n            text={t(I18nKey.SETTINGS$MCP_CONFIRM_DELETE)}\n            onCancel={() => setServerToDelete(null)}\n            onConfirm={handleConfirmDelete}\n            isConfirming={isDeleting}\n          />\n        )}\n      </main>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/stores/browser-store.cjs

@@ -1,2 +1,2 @@
-require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../node_modules/zustand/esm/react.cjs`);var t={url:`https://github.com/OpenHands/OpenHands`,screenshotSrc:``},n=e.create(e=>({...t,setUrl:t=>e({url:t}),setScreenshotSrc:t=>e({screenshotSrc:t}),reset:()=>e(t)}));exports.useBrowserStore=n;
+require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../node_modules/zustand/esm/react.cjs`);var t={url:``,screenshotSrc:``},n=e.create(e=>({...t,setUrl:t=>e({url:t}),setScreenshotSrc:t=>e({screenshotSrc:t}),reset:()=>e(t)}));exports.useBrowserStore=n;
 //# sourceMappingURL=browser-store.cjs.map