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

package/dist/components/features/backends/manage-backends-modal.js

@@ -10,17 +10,18 @@ import { useQuery as c } from "../../../node_modules/@tanstack/react-query/build
 import { getAgentServerClientOptions as l } from "../../../api/agent-server-client-options.js";
 import { ModalBackdrop as u } from "../../shared/modals/modal-backdrop.js";
 import { MODAL_MAX_WIDTH_VIEWPORT as d, modalWidthClassName as f } from "../../shared/modals/modal-body.js";
-import { ModalCloseButton as p } from "../../shared/modals/modal-close-button.js";
-import { BrandButton as m } from "../settings/brand-button.js";
-import { ConfirmationModal as h } from "../../shared/modals/confirmation-modal.js";
-import { useBackendsHealth as g } from "../../../hooks/query/use-backends-health.js";
-import { BackendStatusDot as _ } from "./backend-status-dot.js";
-import { BackendFormModal as v } from "./backend-form-modal.js";
-import y from "react";
-import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { modalTitleLgClassName as p } from "../../../utils/modal-classes.js";
+import { ModalCloseButton as m } from "../../shared/modals/modal-close-button.js";
+import { BrandButton as h } from "../settings/brand-button.js";
+import { ConfirmationModal as g } from "../../shared/modals/confirmation-modal.js";
+import { isInvalidBackendApiKeyHealthError as _, useBackendsHealth as v } from "../../../hooks/query/use-backends-health.js";
+import { BackendStatusDot as y } from "./backend-status-dot.js";
+import { BackendFormModal as b } from "./backend-form-modal.js";
+import x from "react";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/components/features/backends/manage-backends-modal.tsx
-var C = "inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-muted transition-colors hover:bg-interactive-hover hover:text-white";
-function w({ backend: n }) {
+var T = "inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-muted transition-colors hover:bg-interactive-hover hover:text-white";
+function E({ backend: n }) {
 	let { t: r } = e("openhands"), { data: i } = c({
 		queryKey: [
 			"backend-version",
@@ -36,56 +37,66 @@ function w({ backend: n }) {
 		staleTime: 6e4,
 		enabled: n.kind === "local"
 	});
-	return i ? /* @__PURE__ */ x("span", {
+	return i ? /* @__PURE__ */ C("span", {
 		className: "inline-flex shrink-0 items-center rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-1.5 py-0.5 text-[10px] font-medium leading-none text-[var(--oh-text-dim)]",
 		"data-testid": `manage-backends-version-${n.name}`,
 		children: r(t.BACKEND$VERSION_LABEL, { version: i })
 	}) : null;
 }
-function T({ backend: n, health: r, onEdit: a, onRemove: s }) {
-	let { t: c } = e("openhands");
-	return /* @__PURE__ */ S("li", {
+function D({ backend: r, health: a, onEdit: s, onRemove: c }) {
+	let { t: l } = e("openhands"), u = _(a?.lastError), d, f = "text-[var(--oh-muted)]";
+	u ? (d = l(t.AUTH$INVALID_KEY), f = "text-red-300") : a?.isConnected === !0 ? (d = l(t.ONBOARDING$BACKEND_STATUS_CONNECTED), f = "text-green-300") : a?.isConnected === !1 ? (d = l(t.ONBOARDING$BACKEND_STATUS_DISCONNECTED), f = "text-red-300") : d = l(t.ONBOARDING$BACKEND_STATUS_CHECKING);
+	let p = u ? !1 : a?.isConnected ?? null;
+	return /* @__PURE__ */ w("li", {
 		className: "flex items-center gap-3 px-3 py-3",
-		"data-testid": `manage-backends-row-${n.name}`,
+		"data-testid": `manage-backends-row-${r.name}`,
 		children: [
-			/* @__PURE__ */ x(_, { isConnected: r?.isConnected ?? null }),
-			/* @__PURE__ */ S("div", {
+			/* @__PURE__ */ C(y, { isConnected: p }),
+			/* @__PURE__ */ w("div", {
 				className: "flex min-w-0 flex-1 flex-col",
-				children: [/* @__PURE__ */ S("div", {
-					className: "flex min-w-0 items-center gap-2",
-					children: [/* @__PURE__ */ x("span", {
-						className: "truncate text-sm text-white",
-						children: n.name
-					}), /* @__PURE__ */ x(w, { backend: n })]
-				}), /* @__PURE__ */ x("span", {
-					className: "truncate text-xs text-[var(--oh-muted)]",
-					children: n.host
-				})]
+				children: [
+					/* @__PURE__ */ w("div", {
+						className: "flex min-w-0 items-center gap-2",
+						children: [/* @__PURE__ */ C("span", {
+							className: "truncate text-sm text-white",
+							children: r.name
+						}), /* @__PURE__ */ C(E, { backend: r })]
+					}),
+					/* @__PURE__ */ C("span", {
+						className: "truncate text-xs text-[var(--oh-muted)]",
+						children: r.host
+					}),
+					/* @__PURE__ */ C("span", {
+						"data-testid": `manage-backends-status-${r.name}`,
+						className: n("truncate text-xs", f),
+						children: d
+					})
+				]
 			}),
-			/* @__PURE__ */ x("span", {
+			/* @__PURE__ */ C("span", {
 				className: "px-2 py-1 rounded-full text-[11px] uppercase tracking-wide text-[var(--oh-text-tertiary)] bg-[var(--oh-surface)] border border-[var(--oh-border)]",
-				children: n.kind === "cloud" ? c(t.BACKEND$KIND_CLOUD) : c(t.BACKEND$KIND_LOCAL)
+				children: r.kind === "cloud" ? l(t.BACKEND$KIND_CLOUD) : l(t.BACKEND$KIND_LOCAL)
 			}),
-			/* @__PURE__ */ S("div", {
+			/* @__PURE__ */ w("div", {
 				className: "flex shrink-0 items-center gap-0.5",
-				children: [/* @__PURE__ */ x("button", {
+				children: [/* @__PURE__ */ C("button", {
 					type: "button",
-					onClick: a,
-					"aria-label": c(t.BACKEND$EDIT),
-					"data-testid": `manage-backends-edit-${n.name}`,
-					className: C,
-					children: /* @__PURE__ */ x(i, {
+					onClick: s,
+					"aria-label": l(t.BACKEND$EDIT),
+					"data-testid": `manage-backends-edit-${r.name}`,
+					className: T,
+					children: /* @__PURE__ */ C(i, {
 						"aria-hidden": !0,
 						className: "size-4",
 						strokeWidth: 2
 					})
-				}), /* @__PURE__ */ x("button", {
+				}), /* @__PURE__ */ C("button", {
 					type: "button",
-					onClick: s,
-					"aria-label": c(t.BACKEND$REMOVE),
-					"data-testid": `manage-backends-remove-${n.name}`,
-					className: C,
-					children: /* @__PURE__ */ x(o, {
+					onClick: c,
+					"aria-label": l(t.BACKEND$REMOVE),
+					"data-testid": `manage-backends-remove-${r.name}`,
+					className: T,
+					children: /* @__PURE__ */ C(o, {
 						"aria-hidden": !0,
 						className: "size-4",
 						strokeWidth: 2
@@ -95,42 +106,42 @@ function T({ backend: n, health: r, onEdit: a, onRemove: s }) {
 		]
 	});
 }
-function E({ onClose: i }) {
-	let { t: o } = e("openhands"), { backends: s, removeBackend: c } = r(), l = g(s, { probeDisabledOnce: !0 }), [_, C] = y.useState(null), [w, E] = y.useState(null), [D, O] = y.useState(!1);
-	return /* @__PURE__ */ S(b, { children: [
-		/* @__PURE__ */ x(u, {
+function O({ onClose: i }) {
+	let { t: o } = e("openhands"), { backends: s, removeBackend: c } = r(), l = v(s, { probeDisabledOnce: !0 }), [_, y] = x.useState(null), [T, E] = x.useState(null), [O, k] = x.useState(!1);
+	return /* @__PURE__ */ w(S, { children: [
+		/* @__PURE__ */ C(u, {
 			onClose: i,
 			"aria-label": o(t.BACKEND$MANAGE_TITLE),
-			children: /* @__PURE__ */ S("div", {
+			children: /* @__PURE__ */ w("div", {
 				"data-testid": "manage-backends-modal",
 				className: n("relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl", f("lg"), d, "max-h-[70vh]"),
 				children: [
-					/* @__PURE__ */ x(p, {
+					/* @__PURE__ */ C(m, {
 						onClose: i,
 						testId: "close-manage-backends-modal"
 					}),
-					/* @__PURE__ */ x("div", {
+					/* @__PURE__ */ C("div", {
 						className: "p-5 pr-12",
-						children: /* @__PURE__ */ x("h2", {
-							className: "text-lg font-semibold",
+						children: /* @__PURE__ */ C("h2", {
+							className: p,
 							children: o(t.BACKEND$MANAGE_TITLE)
 						})
 					}),
-					/* @__PURE__ */ x("div", {
+					/* @__PURE__ */ C("div", {
 						className: "flex min-h-0 flex-1 flex-col px-5",
-						children: /* @__PURE__ */ x("div", {
+						children: /* @__PURE__ */ C("div", {
 							className: "flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always",
 							"data-testid": "manage-backends-list",
-							children: s.length === 0 ? /* @__PURE__ */ x("p", {
+							children: s.length === 0 ? /* @__PURE__ */ C("p", {
 								className: "px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]",
 								children: o(t.BACKEND$MANAGE_EMPTY)
-							}) : /* @__PURE__ */ x("ul", {
+							}) : /* @__PURE__ */ C("ul", {
 								className: "divide-y divide-[var(--oh-border)]",
-								children: s.map((e) => /* @__PURE__ */ x(T, {
+								children: s.map((e) => /* @__PURE__ */ C(D, {
 									backend: e,
 									health: l[e.id],
 									onEdit: () => E(e),
-									onRemove: () => C({
+									onRemove: () => y({
 										id: e.id,
 										name: e.name
 									})
@@ -138,19 +149,19 @@ function E({ onClose: i }) {
 							})
 						})
 					}),
-					/* @__PURE__ */ S("div", {
+					/* @__PURE__ */ w("div", {
 						className: "flex justify-end gap-2 p-5",
-						children: [/* @__PURE__ */ x(m, {
+						children: [/* @__PURE__ */ C(h, {
 							type: "button",
 							variant: "secondary",
-							onClick: () => O(!0),
+							onClick: () => k(!0),
 							testId: "manage-backends-add",
-							startContent: /* @__PURE__ */ x(a, {
+							startContent: /* @__PURE__ */ C(a, {
 								width: 14,
 								height: 14
 							}),
 							children: o(t.BACKEND$ADD)
-						}), /* @__PURE__ */ x(m, {
+						}), /* @__PURE__ */ C(h, {
 							type: "button",
 							variant: "primary",
 							onClick: i,
@@ -161,25 +172,25 @@ function E({ onClose: i }) {
 				]
 			})
 		}),
-		D ? /* @__PURE__ */ x(v, {
+		O ? /* @__PURE__ */ C(b, {
 			mode: "add",
-			onClose: () => O(!1)
+			onClose: () => k(!1)
 		}) : null,
-		w ? /* @__PURE__ */ x(v, {
+		T ? /* @__PURE__ */ C(b, {
 			mode: "edit",
-			backend: w,
+			backend: T,
 			onClose: () => E(null)
 		}) : null,
-		_ ? /* @__PURE__ */ x(h, {
+		_ ? /* @__PURE__ */ C(g, {
 			text: o(t.BACKEND$REMOVE_CONFIRMATION, { name: _.name }),
 			onConfirm: () => {
-				_ && (c(_.id), C(null));
+				_ && (c(_.id), y(null));
 			},
-			onCancel: () => C(null)
+			onCancel: () => y(null)
 		}) : null
 	] });
 }
 //#endregion
-export { E as ManageBackendsModal };
+export { O as ManageBackendsModal };
 
 //# sourceMappingURL=manage-backends-modal.js.map

package/dist/components/features/backends/manage-backends-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"manage-backends-modal.js","names":[],"sources":["../../../../src/components/features/backends/manage-backends-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { Pencil, Plus, Trash2 } from \"lucide-react\";\n\nimport { ServerClient } from \"@openhands/typescript-client/clients\";\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { getAgentServerClientOptions } from \"#/api/agent-server-client-options\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport {\n  MODAL_MAX_WIDTH_VIEWPORT,\n  modalWidthClassName,\n} from \"#/components/shared/modals/modal-body\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport {\n  useBackendsHealth,\n  type BackendHealth,\n} from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\n\nconst ROW_ACTION_BUTTON_CLASS =\n  \"inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-muted transition-colors hover:bg-interactive-hover hover:text-white\";\n\nfunction BackendVersion({ backend }: { backend: Backend }) {\n  const { t } = useTranslation(\"openhands\");\n  const { data: version } = useQuery({\n    queryKey: [\"backend-version\", backend.host, backend.apiKey],\n    queryFn: async () => {\n      const info = await new ServerClient(\n        getAgentServerClientOptions({\n          host: backend.host,\n          sessionApiKey: backend.apiKey || null,\n          timeout: 5000,\n        }),\n      ).getServerInfo();\n      return info.version ?? null;\n    },\n    retry: false,\n    staleTime: 60_000,\n    enabled: backend.kind === \"local\",\n  });\n\n  if (!version) return null;\n\n  return (\n    <span\n      className=\"inline-flex shrink-0 items-center rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-1.5 py-0.5 text-[10px] font-medium leading-none text-[var(--oh-text-dim)]\"\n      data-testid={`manage-backends-version-${backend.name}`}\n    >\n      {t(I18nKey.BACKEND$VERSION_LABEL, { version })}\n    </span>\n  );\n}\n\ninterface ManageBackendsModalProps {\n  onClose: () => void;\n}\n\ninterface PendingRemoval {\n  id: string;\n  name: string;\n}\n\ninterface BackendRowProps {\n  backend: Backend;\n  health: BackendHealth | undefined;\n  onEdit: () => void;\n  onRemove: () => void;\n}\n\nfunction BackendRow({ backend, health, onEdit, onRemove }: BackendRowProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <li\n      className=\"flex items-center gap-3 px-3 py-3\"\n      data-testid={`manage-backends-row-${backend.name}`}\n    >\n      <BackendStatusDot isConnected={health?.isConnected ?? null} />\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <span className=\"truncate text-sm text-white\">{backend.name}</span>\n          <BackendVersion backend={backend} />\n        </div>\n        <span className=\"truncate text-xs text-[var(--oh-muted)]\">\n          {backend.host}\n        </span>\n      </div>\n      <span className=\"px-2 py-1 rounded-full text-[11px] uppercase tracking-wide text-[var(--oh-text-tertiary)] bg-[var(--oh-surface)] border border-[var(--oh-border)]\">\n        {backend.kind === \"cloud\"\n          ? t(I18nKey.BACKEND$KIND_CLOUD)\n          : t(I18nKey.BACKEND$KIND_LOCAL)}\n      </span>\n      <div className=\"flex shrink-0 items-center gap-0.5\">\n        <button\n          type=\"button\"\n          onClick={onEdit}\n          aria-label={t(I18nKey.BACKEND$EDIT)}\n          data-testid={`manage-backends-edit-${backend.name}`}\n          className={ROW_ACTION_BUTTON_CLASS}\n        >\n          <Pencil aria-hidden className=\"size-4\" strokeWidth={2} />\n        </button>\n        <button\n          type=\"button\"\n          onClick={onRemove}\n          aria-label={t(I18nKey.BACKEND$REMOVE)}\n          data-testid={`manage-backends-remove-${backend.name}`}\n          className={ROW_ACTION_BUTTON_CLASS}\n        >\n          <Trash2 aria-hidden className=\"size-4\" strokeWidth={2} />\n        </button>\n      </div>\n    </li>\n  );\n}\n\nexport function ManageBackendsModal({ onClose }: ManageBackendsModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, removeBackend } = useActiveBackendContext();\n  const healthByBackendId = useBackendsHealth(backends, {\n    probeDisabledOnce: true,\n  });\n  const [pendingRemoval, setPendingRemoval] =\n    React.useState<PendingRemoval | null>(null);\n  const [editingBackend, setEditingBackend] = React.useState<Backend | null>(\n    null,\n  );\n  const [showAddForm, setShowAddForm] = React.useState(false);\n\n  const handleConfirmRemoval = () => {\n    if (!pendingRemoval) return;\n    removeBackend(pendingRemoval.id);\n    setPendingRemoval(null);\n  };\n\n  return (\n    <>\n      <ModalBackdrop\n        onClose={onClose}\n        aria-label={t(I18nKey.BACKEND$MANAGE_TITLE)}\n      >\n        <div\n          data-testid=\"manage-backends-modal\"\n          className={cn(\n            \"relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl\",\n            modalWidthClassName(\"lg\"),\n            MODAL_MAX_WIDTH_VIEWPORT,\n            \"max-h-[70vh]\",\n          )}\n        >\n          <ModalCloseButton\n            onClose={onClose}\n            testId=\"close-manage-backends-modal\"\n          />\n          <div className=\"p-5 pr-12\">\n            <h2 className=\"text-lg font-semibold\">\n              {t(I18nKey.BACKEND$MANAGE_TITLE)}\n            </h2>\n          </div>\n\n          <div className=\"flex min-h-0 flex-1 flex-col px-5\">\n            <div\n              className=\"flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\"\n              data-testid=\"manage-backends-list\"\n            >\n              {backends.length === 0 ? (\n                <p className=\"px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]\">\n                  {t(I18nKey.BACKEND$MANAGE_EMPTY)}\n                </p>\n              ) : (\n                <ul className=\"divide-y divide-[var(--oh-border)]\">\n                  {backends.map((backend) => (\n                    <BackendRow\n                      key={backend.id}\n                      backend={backend}\n                      health={healthByBackendId[backend.id]}\n                      onEdit={() => setEditingBackend(backend)}\n                      onRemove={() =>\n                        setPendingRemoval({\n                          id: backend.id,\n                          name: backend.name,\n                        })\n                      }\n                    />\n                  ))}\n                </ul>\n              )}\n            </div>\n          </div>\n\n          <div className=\"flex justify-end gap-2 p-5\">\n            <BrandButton\n              type=\"button\"\n              variant=\"secondary\"\n              onClick={() => setShowAddForm(true)}\n              testId=\"manage-backends-add\"\n              startContent={<Plus width={14} height={14} />}\n            >\n              {t(I18nKey.BACKEND$ADD)}\n            </BrandButton>\n            <BrandButton\n              type=\"button\"\n              variant=\"primary\"\n              onClick={onClose}\n              testId=\"manage-backends-done\"\n            >\n              {t(I18nKey.HOME$DONE)}\n            </BrandButton>\n          </div>\n        </div>\n      </ModalBackdrop>\n\n      {showAddForm ? (\n        <BackendFormModal mode=\"add\" onClose={() => setShowAddForm(false)} />\n      ) : null}\n\n      {editingBackend ? (\n        <BackendFormModal\n          mode=\"edit\"\n          backend={editingBackend}\n          onClose={() => setEditingBackend(null)}\n        />\n      ) : null}\n\n      {pendingRemoval ? (\n        <ConfirmationModal\n          text={t(I18nKey.BACKEND$REMOVE_CONFIRMATION, {\n            name: pendingRemoval.name,\n          })}\n          onConfirm={handleConfirmRemoval}\n          onCancel={() => setPendingRemoval(null)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"manage-backends-modal.js","names":[],"sources":["../../../../src/components/features/backends/manage-backends-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { Pencil, Plus, Trash2 } from \"lucide-react\";\n\nimport { ServerClient } from \"@openhands/typescript-client/clients\";\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { getAgentServerClientOptions } from \"#/api/agent-server-client-options\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport {\n  MODAL_MAX_WIDTH_VIEWPORT,\n  modalWidthClassName,\n} from \"#/components/shared/modals/modal-body\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport {\n  isInvalidBackendApiKeyHealthError,\n  useBackendsHealth,\n  type BackendHealth,\n} from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\n\nconst ROW_ACTION_BUTTON_CLASS =\n  \"inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-muted transition-colors hover:bg-interactive-hover hover:text-white\";\n\nfunction BackendVersion({ backend }: { backend: Backend }) {\n  const { t } = useTranslation(\"openhands\");\n  const { data: version } = useQuery({\n    queryKey: [\"backend-version\", backend.host, backend.apiKey],\n    queryFn: async () => {\n      const info = await new ServerClient(\n        getAgentServerClientOptions({\n          host: backend.host,\n          sessionApiKey: backend.apiKey || null,\n          timeout: 5000,\n        }),\n      ).getServerInfo();\n      return info.version ?? null;\n    },\n    retry: false,\n    staleTime: 60_000,\n    enabled: backend.kind === \"local\",\n  });\n\n  if (!version) return null;\n\n  return (\n    <span\n      className=\"inline-flex shrink-0 items-center rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-1.5 py-0.5 text-[10px] font-medium leading-none text-[var(--oh-text-dim)]\"\n      data-testid={`manage-backends-version-${backend.name}`}\n    >\n      {t(I18nKey.BACKEND$VERSION_LABEL, { version })}\n    </span>\n  );\n}\n\ninterface ManageBackendsModalProps {\n  onClose: () => void;\n}\n\ninterface PendingRemoval {\n  id: string;\n  name: string;\n}\n\ninterface BackendRowProps {\n  backend: Backend;\n  health: BackendHealth | undefined;\n  onEdit: () => void;\n  onRemove: () => void;\n}\n\nfunction BackendRow({ backend, health, onEdit, onRemove }: BackendRowProps) {\n  const { t } = useTranslation(\"openhands\");\n  const isInvalidApiKey = isInvalidBackendApiKeyHealthError(health?.lastError);\n  let statusLabel: string;\n  let statusClassName = \"text-[var(--oh-muted)]\";\n\n  if (isInvalidApiKey) {\n    statusLabel = t(I18nKey.AUTH$INVALID_KEY);\n    statusClassName = \"text-red-300\";\n  } else if (health?.isConnected === true) {\n    statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_CONNECTED);\n    statusClassName = \"text-green-300\";\n  } else if (health?.isConnected === false) {\n    statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_DISCONNECTED);\n    statusClassName = \"text-red-300\";\n  } else {\n    statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING);\n  }\n  const dotStatus = isInvalidApiKey ? false : (health?.isConnected ?? null);\n\n  return (\n    <li\n      className=\"flex items-center gap-3 px-3 py-3\"\n      data-testid={`manage-backends-row-${backend.name}`}\n    >\n      <BackendStatusDot isConnected={dotStatus} />\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <span className=\"truncate text-sm text-white\">{backend.name}</span>\n          <BackendVersion backend={backend} />\n        </div>\n        <span className=\"truncate text-xs text-[var(--oh-muted)]\">\n          {backend.host}\n        </span>\n        <span\n          data-testid={`manage-backends-status-${backend.name}`}\n          className={cn(\"truncate text-xs\", statusClassName)}\n        >\n          {statusLabel}\n        </span>\n      </div>\n      <span className=\"px-2 py-1 rounded-full text-[11px] uppercase tracking-wide text-[var(--oh-text-tertiary)] bg-[var(--oh-surface)] border border-[var(--oh-border)]\">\n        {backend.kind === \"cloud\"\n          ? t(I18nKey.BACKEND$KIND_CLOUD)\n          : t(I18nKey.BACKEND$KIND_LOCAL)}\n      </span>\n      <div className=\"flex shrink-0 items-center gap-0.5\">\n        <button\n          type=\"button\"\n          onClick={onEdit}\n          aria-label={t(I18nKey.BACKEND$EDIT)}\n          data-testid={`manage-backends-edit-${backend.name}`}\n          className={ROW_ACTION_BUTTON_CLASS}\n        >\n          <Pencil aria-hidden className=\"size-4\" strokeWidth={2} />\n        </button>\n        <button\n          type=\"button\"\n          onClick={onRemove}\n          aria-label={t(I18nKey.BACKEND$REMOVE)}\n          data-testid={`manage-backends-remove-${backend.name}`}\n          className={ROW_ACTION_BUTTON_CLASS}\n        >\n          <Trash2 aria-hidden className=\"size-4\" strokeWidth={2} />\n        </button>\n      </div>\n    </li>\n  );\n}\n\nexport function ManageBackendsModal({ onClose }: ManageBackendsModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, removeBackend } = useActiveBackendContext();\n  const healthByBackendId = useBackendsHealth(backends, {\n    probeDisabledOnce: true,\n  });\n  const [pendingRemoval, setPendingRemoval] =\n    React.useState<PendingRemoval | null>(null);\n  const [editingBackend, setEditingBackend] = React.useState<Backend | null>(\n    null,\n  );\n  const [showAddForm, setShowAddForm] = React.useState(false);\n\n  const handleConfirmRemoval = () => {\n    if (!pendingRemoval) return;\n    removeBackend(pendingRemoval.id);\n    setPendingRemoval(null);\n  };\n\n  return (\n    <>\n      <ModalBackdrop\n        onClose={onClose}\n        aria-label={t(I18nKey.BACKEND$MANAGE_TITLE)}\n      >\n        <div\n          data-testid=\"manage-backends-modal\"\n          className={cn(\n            \"relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl\",\n            modalWidthClassName(\"lg\"),\n            MODAL_MAX_WIDTH_VIEWPORT,\n            \"max-h-[70vh]\",\n          )}\n        >\n          <ModalCloseButton\n            onClose={onClose}\n            testId=\"close-manage-backends-modal\"\n          />\n          <div className=\"p-5 pr-12\">\n            <h2 className={modalTitleLgClassName}>\n              {t(I18nKey.BACKEND$MANAGE_TITLE)}\n            </h2>\n          </div>\n\n          <div className=\"flex min-h-0 flex-1 flex-col px-5\">\n            <div\n              className=\"flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\"\n              data-testid=\"manage-backends-list\"\n            >\n              {backends.length === 0 ? (\n                <p className=\"px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]\">\n                  {t(I18nKey.BACKEND$MANAGE_EMPTY)}\n                </p>\n              ) : (\n                <ul className=\"divide-y divide-[var(--oh-border)]\">\n                  {backends.map((backend) => (\n                    <BackendRow\n                      key={backend.id}\n                      backend={backend}\n                      health={healthByBackendId[backend.id]}\n                      onEdit={() => setEditingBackend(backend)}\n                      onRemove={() =>\n                        setPendingRemoval({\n                          id: backend.id,\n                          name: backend.name,\n                        })\n                      }\n                    />\n                  ))}\n                </ul>\n              )}\n            </div>\n          </div>\n\n          <div className=\"flex justify-end gap-2 p-5\">\n            <BrandButton\n              type=\"button\"\n              variant=\"secondary\"\n              onClick={() => setShowAddForm(true)}\n              testId=\"manage-backends-add\"\n              startContent={<Plus width={14} height={14} />}\n            >\n              {t(I18nKey.BACKEND$ADD)}\n            </BrandButton>\n            <BrandButton\n              type=\"button\"\n              variant=\"primary\"\n              onClick={onClose}\n              testId=\"manage-backends-done\"\n            >\n              {t(I18nKey.HOME$DONE)}\n            </BrandButton>\n          </div>\n        </div>\n      </ModalBackdrop>\n\n      {showAddForm ? (\n        <BackendFormModal mode=\"add\" onClose={() => setShowAddForm(false)} />\n      ) : null}\n\n      {editingBackend ? (\n        <BackendFormModal\n          mode=\"edit\"\n          backend={editingBackend}\n          onClose={() => setEditingBackend(null)}\n        />\n      ) : null}\n\n      {pendingRemoval ? (\n        <ConfirmationModal\n          text={t(I18nKey.BACKEND$REMOVE_CONFIRMATION, {\n            name: pendingRemoval.name,\n          })}\n          onConfirm={handleConfirmRemoval}\n          onCancel={() => setPendingRemoval(null)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/chat/change-agent-button.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(`../../../types/agent-state.cjs`),i=require(`../../../utils/utils.cjs`),a=require(`../../../hooks/use-conversation-id.cjs`),o=require(`../../../stores/conversation-store.cjs`),s=require(`../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.cjs`),c=require(`../../../hooks/query/use-active-conversation.cjs`),l=require(`../../../hooks/use-agent-state.cjs`),u=require(`../../shared/buttons/styled-tooltip.cjs`),d=require(`../../../hooks/use-unified-websocket-status.cjs`),f=require(`../../../hooks/query/use-sub-conversation-task-polling.cjs`),p=require(`../../../ui/typography.cjs`),m=require(`../../../ui/combobox-caret.cjs`),h=require(`../../../icons/lesson-plan.cjs`),g=require(`../../../icons/code-pill.cjs`),_=require(`./change-agent-context-menu.cjs`),v=require(`../../../hooks/use-handle-plan-click.cjs`);let y=require(`react`);y=e.__toESM(y,1);let b=require(`react/jsx-runtime`);function x(){let[e,x]=(0,y.useState)(!1),{conversationMode:S,setConversationMode:C,subConversationTaskId:w}=o.useConversationStore(),{conversationId:T}=a.useOptionalConversationId(),E=!T,D=d.useUnifiedWebSocketStatus()===`OPEN`,{curAgentState:O}=l.useAgentState(),{t:k}=t.useTranslation(`openhands`),A=O===r.AgentState.RUNNING,{data:j}=c.useActiveConversation(),M=s.useQueryClient(),N=(0,y.useRef)(null),{taskStatus:P,subConversationId:F}=f.useSubConversationTaskPolling(w,j?.id||null);(0,y.useEffect)(()=>{P===`READY`&&F&&j?.id&&w&&N.current!==w&&(N.current=w,M.invalidateQueries({queryKey:[`user`,`conversation`,j.id]}))},[P,F,j?.id,w,M]);let{handlePlanClick:I,isCreatingConversation:L}=v.useHandlePlanClick();(0,y.useEffect)(()=>{(A||!D)&&e&&x(!1)},[A,e,D]);let R=E||A||L||!D;(0,y.useEffect)(()=>{if(R)return;let e=e=>{if(e.shiftKey&&e.key===`Tab`){e.preventDefault(),e.stopPropagation();let t=S===`code`?`plan`:`code`;t===`plan`?I(e):C(t)}};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[R,S,C,I]);let z=t=>{t.preventDefault(),t.stopPropagation(),x(!e)},B=e=>{e.preventDefault(),e.stopPropagation(),C(`code`)},V=S===`code`,H=(0,y.useMemo)(()=>k(V?n.I18nKey.COMMON$CODE:n.I18nKey.COMMON$PLAN),[V,k]),U=(0,y.useMemo)(()=>V?(0,b.jsx)(g.CodePillIcon,{className:`h-[11px] w-[11px] shrink-0`}):(0,b.jsx)(h.default,{width:18,height:18,color:`currentColor`}),[V]),W=(0,b.jsxs)(`div`,{className:`relative`,children:[(0,b.jsxs)(`button`,{type:`button`,onClick:z,disabled:R,className:i.cn(`flex items-center rounded-[100px] transition-[border-color,color,opacity]`,V?`border border-transparent text-[var(--oh-muted)]`:`border border-[#597FF4] bg-[#4A67BD]`,!R&&V&&`cursor-pointer hover:text-white hover:bg-white/10`,!R&&!V&&`cursor-pointer text-white hover:bg-white/10`,R&&i.cn(`opacity-50 cursor-not-allowed`,V&&`border-transparent`)),children:[(0,b.jsxs)(`div`,{className:`flex items-center gap-1 pl-1.5`,children:[U,(0,b.jsx)(p.Typography.Text,{className:`text-2.75 not-italic font-normal leading-5`,children:H})]}),(0,b.jsx)(m.ComboboxCaretInline,{isOpen:e})]}),e&&(0,b.jsx)(_.ChangeAgentContextMenu,{onClose:()=>x(!1),onCodeClick:B,onPlanClick:I})]});return E?(0,b.jsx)(u.StyledTooltip,{content:k(n.I18nKey.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION),placement:`top`,children:W}):W}exports.ChangeAgentButton=x;
+const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../types/agent-state.cjs`),i=require(`../../../utils/utils.cjs`),a=require(`../../../hooks/use-conversation-id.cjs`),o=require(`../../../stores/conversation-store.cjs`),s=require(`../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.cjs`),c=require(`../../../hooks/query/use-active-conversation.cjs`),l=require(`../../../hooks/use-agent-state.cjs`),u=require(`../../../utils/form-control-classes.cjs`),d=require(`../../shared/buttons/styled-tooltip.cjs`),f=require(`../../../hooks/use-unified-websocket-status.cjs`),p=require(`../../../hooks/query/use-sub-conversation-task-polling.cjs`),m=require(`../../../ui/typography.cjs`),h=require(`../../../ui/combobox-caret.cjs`),g=require(`../../../icons/lesson-plan.cjs`),_=require(`../../../icons/code-pill.cjs`),v=require(`./change-agent-context-menu.cjs`),y=require(`../../../hooks/use-handle-plan-click.cjs`);let b=require(`react`);b=e.__toESM(b,1);let x=require(`react/jsx-runtime`);function S(){let[e,S]=(0,b.useState)(!1),{conversationMode:C,setConversationMode:w,subConversationTaskId:T}=o.useConversationStore(),{conversationId:E}=a.useOptionalConversationId(),D=!E,O=f.useUnifiedWebSocketStatus()===`OPEN`,{curAgentState:k}=l.useAgentState(),{t:A}=t.useTranslation(`openhands`),j=k===r.AgentState.RUNNING,{data:M}=c.useActiveConversation(),N=s.useQueryClient(),P=(0,b.useRef)(null),{taskStatus:F,subConversationId:I}=p.useSubConversationTaskPolling(T,M?.id||null);(0,b.useEffect)(()=>{F===`READY`&&I&&M?.id&&T&&P.current!==T&&(P.current=T,N.invalidateQueries({queryKey:[`user`,`conversation`,M.id]}))},[F,I,M?.id,T,N]);let{handlePlanClick:L,isCreatingConversation:R}=y.useHandlePlanClick();(0,b.useEffect)(()=>{(j||!O)&&e&&S(!1)},[j,e,O]);let z=D||j||R||!O;(0,b.useEffect)(()=>{if(z)return;let e=e=>{if(e.shiftKey&&e.key===`Tab`){e.preventDefault(),e.stopPropagation();let t=C===`code`?`plan`:`code`;t===`plan`?L(e):w(t)}};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[z,C,w,L]);let B=t=>{t.preventDefault(),t.stopPropagation(),S(!e)},V=e=>{e.preventDefault(),e.stopPropagation(),w(`code`)},H=C===`code`,U=(0,b.useMemo)(()=>A(H?n.I18nKey.COMMON$CODE:n.I18nKey.COMMON$PLAN),[H,A]),W=(0,b.useMemo)(()=>H?(0,x.jsx)(_.CodePillIcon,{className:`h-[11px] w-[11px] shrink-0`}):(0,x.jsx)(g.default,{width:18,height:18,color:`currentColor`}),[H]),G=(0,x.jsxs)(`div`,{className:`relative`,children:[(0,x.jsxs)(`button`,{type:`button`,onClick:B,disabled:z,className:i.cn(`flex items-center rounded-[100px]`,u.formControlTransitionClassName,H?`border border-transparent text-[var(--oh-muted)]`:`border border-[#597FF4] bg-[#4A67BD]`,!z&&H&&i.cn(`cursor-pointer`,`hover:text-white hover:bg-white/10`),!z&&!H&&`cursor-pointer text-white hover:bg-[#597FF4]`,z&&i.cn(`opacity-50 cursor-not-allowed`,H&&`border-transparent`)),children:[(0,x.jsxs)(`div`,{className:`flex items-center gap-1 pl-1.5`,children:[W,(0,x.jsx)(m.Typography.Text,{className:`text-2.75 not-italic font-normal leading-5`,children:U})]}),(0,x.jsx)(h.ComboboxCaretInline,{isOpen:e})]}),e&&(0,x.jsx)(v.ChangeAgentContextMenu,{activeMode:C,onClose:()=>S(!1),onCodeClick:V,onPlanClick:L})]});return D?(0,x.jsx)(d.StyledTooltip,{content:A(n.I18nKey.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION),placement:`top`,children:G}):G}exports.ChangeAgentButton=S;
 //# sourceMappingURL=change-agent-button.cjs.map

package/dist/components/features/chat/change-agent-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"change-agent-button.cjs","names":[],"sources":["../../../../src/components/features/chat/change-agent-button.tsx"],"sourcesContent":["import React, { useMemo, useEffect, useState, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport { CodePillIcon } from \"#/icons/code-pill\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ChangeAgentContextMenu } from \"./change-agent-context-menu\";\nimport { cn } from \"#/utils/utils\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUnifiedWebSocketStatus } from \"#/hooks/use-unified-websocket-status\";\nimport { useSubConversationTaskPolling } from \"#/hooks/query/use-sub-conversation-task-polling\";\nimport { useHandlePlanClick } from \"#/hooks/use-handle-plan-click\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\n\nexport function ChangeAgentButton() {\n  const [contextMenuOpen, setContextMenuOpen] = useState<boolean>(false);\n\n  const { conversationMode, setConversationMode, subConversationTaskId } =\n    useConversationStore();\n\n  const { conversationId } = useOptionalConversationId();\n\n  const isHomePage = !conversationId;\n\n  const webSocketStatus = useUnifiedWebSocketStatus();\n\n  const isWebSocketConnected = webSocketStatus === \"OPEN\";\n\n  const { curAgentState } = useAgentState();\n\n  const { t } = useTranslation(\"openhands\");\n\n  const isAgentRunning = curAgentState === AgentState.RUNNING;\n\n  const { data: conversation } = useActiveConversation();\n\n  const queryClient = useQueryClient();\n\n  // Track the last invalidated task ID to prevent duplicate invalidations\n  const lastInvalidatedTaskIdRef = useRef<string | null>(null);\n\n  // Poll sub-conversation task status\n  const { taskStatus, subConversationId } = useSubConversationTaskPolling(\n    subConversationTaskId,\n    conversation?.id || null,\n  );\n\n  // Invalidate parent conversation cache when task is ready (only once per task)\n  useEffect(() => {\n    if (\n      taskStatus === \"READY\" &&\n      subConversationId &&\n      conversation?.id &&\n      subConversationTaskId &&\n      lastInvalidatedTaskIdRef.current !== subConversationTaskId\n    ) {\n      // Mark this task as invalidated to prevent duplicate calls\n      lastInvalidatedTaskIdRef.current = subConversationTaskId;\n      // Invalidate the parent conversation to refetch with updated sub_conversation_ids\n      queryClient.invalidateQueries({\n        queryKey: [\"user\", \"conversation\", conversation.id],\n      });\n    }\n  }, [\n    taskStatus,\n    subConversationId,\n    conversation?.id,\n    subConversationTaskId,\n    queryClient,\n  ]);\n\n  // Get handlePlanClick and isCreatingConversation from custom hook\n  const { handlePlanClick, isCreatingConversation } = useHandlePlanClick();\n\n  // Close context menu when agent starts running\n  useEffect(() => {\n    if ((isAgentRunning || !isWebSocketConnected) && contextMenuOpen) {\n      setContextMenuOpen(false);\n    }\n  }, [isAgentRunning, contextMenuOpen, isWebSocketConnected]);\n\n  const isButtonDisabled =\n    isHomePage ||\n    isAgentRunning ||\n    isCreatingConversation ||\n    !isWebSocketConnected;\n\n  // Handle Shift + Tab keyboard shortcut to cycle through modes\n  useEffect(() => {\n    if (isButtonDisabled) {\n      return undefined;\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      // Check for Shift + Tab combination\n      if (event.shiftKey && event.key === \"Tab\") {\n        // Prevent default tab navigation behavior\n        event.preventDefault();\n        event.stopPropagation();\n\n        // Cycle between modes: code -> plan -> code\n        const nextMode = conversationMode === \"code\" ? \"plan\" : \"code\";\n        if (nextMode === \"plan\") {\n          handlePlanClick(event);\n        } else {\n          setConversationMode(nextMode);\n        }\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [\n    isButtonDisabled,\n    conversationMode,\n    setConversationMode,\n    handlePlanClick,\n  ]);\n\n  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setContextMenuOpen(!contextMenuOpen);\n  };\n\n  const handleCodeClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setConversationMode(\"code\");\n  };\n\n  const isExecutionAgent = conversationMode === \"code\";\n\n  const buttonLabel = useMemo(() => {\n    if (isExecutionAgent) {\n      return t(I18nKey.COMMON$CODE);\n    }\n    return t(I18nKey.COMMON$PLAN);\n  }, [isExecutionAgent, t]);\n\n  const buttonIcon = useMemo(() => {\n    if (isExecutionAgent) {\n      return <CodePillIcon className=\"h-[11px] w-[11px] shrink-0\" />;\n    }\n    return <LessonPlanIcon width={18} height={18} color=\"currentColor\" />;\n  }, [isExecutionAgent]);\n\n  const button = (\n    <div className=\"relative\">\n      <button\n        type=\"button\"\n        onClick={handleButtonClick}\n        disabled={isButtonDisabled}\n        className={cn(\n          \"flex items-center rounded-[100px] transition-[border-color,color,opacity]\",\n          isExecutionAgent\n            ? \"border border-transparent text-[var(--oh-muted)]\"\n            : \"border border-[#597FF4] bg-[#4A67BD]\",\n          !isButtonDisabled &&\n            isExecutionAgent &&\n            \"cursor-pointer hover:text-white hover:bg-white/10\",\n          !isButtonDisabled &&\n            !isExecutionAgent &&\n            \"cursor-pointer text-white hover:bg-white/10\",\n          isButtonDisabled &&\n            cn(\n              \"opacity-50 cursor-not-allowed\",\n              isExecutionAgent && \"border-transparent\",\n            ),\n        )}\n      >\n        <div className=\"flex items-center gap-1 pl-1.5\">\n          {buttonIcon}\n          <Typography.Text className=\"text-2.75 not-italic font-normal leading-5\">\n            {buttonLabel}\n          </Typography.Text>\n        </div>\n        <ComboboxCaretInline isOpen={contextMenuOpen} />\n      </button>\n      {contextMenuOpen && (\n        <ChangeAgentContextMenu\n          onClose={() => setContextMenuOpen(false)}\n          onCodeClick={handleCodeClick}\n          onPlanClick={handlePlanClick}\n        />\n      )}\n    </div>\n  );\n\n  if (isHomePage) {\n    return (\n      <StyledTooltip\n        content={t(I18nKey.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION)}\n        placement=\"top\"\n      >\n        {button}\n      </StyledTooltip>\n    );\n  }\n\n  return button;\n}\n"],"mappings":"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"}
+{"version":3,"file":"change-agent-button.cjs","names":[],"sources":["../../../../src/components/features/chat/change-agent-button.tsx"],"sourcesContent":["import React, { useMemo, useEffect, useState, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport { CodePillIcon } from \"#/icons/code-pill\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ChangeAgentContextMenu } from \"./change-agent-context-menu\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  formControlMutedHoverClassName,\n  formControlTransitionClassName,\n} from \"#/utils/form-control-classes\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUnifiedWebSocketStatus } from \"#/hooks/use-unified-websocket-status\";\nimport { useSubConversationTaskPolling } from \"#/hooks/query/use-sub-conversation-task-polling\";\nimport { useHandlePlanClick } from \"#/hooks/use-handle-plan-click\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\n\nexport function ChangeAgentButton() {\n  const [contextMenuOpen, setContextMenuOpen] = useState<boolean>(false);\n\n  const { conversationMode, setConversationMode, subConversationTaskId } =\n    useConversationStore();\n\n  const { conversationId } = useOptionalConversationId();\n\n  const isHomePage = !conversationId;\n\n  const webSocketStatus = useUnifiedWebSocketStatus();\n\n  const isWebSocketConnected = webSocketStatus === \"OPEN\";\n\n  const { curAgentState } = useAgentState();\n\n  const { t } = useTranslation(\"openhands\");\n\n  const isAgentRunning = curAgentState === AgentState.RUNNING;\n\n  const { data: conversation } = useActiveConversation();\n\n  const queryClient = useQueryClient();\n\n  // Track the last invalidated task ID to prevent duplicate invalidations\n  const lastInvalidatedTaskIdRef = useRef<string | null>(null);\n\n  // Poll sub-conversation task status\n  const { taskStatus, subConversationId } = useSubConversationTaskPolling(\n    subConversationTaskId,\n    conversation?.id || null,\n  );\n\n  // Invalidate parent conversation cache when task is ready (only once per task)\n  useEffect(() => {\n    if (\n      taskStatus === \"READY\" &&\n      subConversationId &&\n      conversation?.id &&\n      subConversationTaskId &&\n      lastInvalidatedTaskIdRef.current !== subConversationTaskId\n    ) {\n      // Mark this task as invalidated to prevent duplicate calls\n      lastInvalidatedTaskIdRef.current = subConversationTaskId;\n      // Invalidate the parent conversation to refetch with updated sub_conversation_ids\n      queryClient.invalidateQueries({\n        queryKey: [\"user\", \"conversation\", conversation.id],\n      });\n    }\n  }, [\n    taskStatus,\n    subConversationId,\n    conversation?.id,\n    subConversationTaskId,\n    queryClient,\n  ]);\n\n  // Get handlePlanClick and isCreatingConversation from custom hook\n  const { handlePlanClick, isCreatingConversation } = useHandlePlanClick();\n\n  // Close context menu when agent starts running\n  useEffect(() => {\n    if ((isAgentRunning || !isWebSocketConnected) && contextMenuOpen) {\n      setContextMenuOpen(false);\n    }\n  }, [isAgentRunning, contextMenuOpen, isWebSocketConnected]);\n\n  const isButtonDisabled =\n    isHomePage ||\n    isAgentRunning ||\n    isCreatingConversation ||\n    !isWebSocketConnected;\n\n  // Handle Shift + Tab keyboard shortcut to cycle through modes\n  useEffect(() => {\n    if (isButtonDisabled) {\n      return undefined;\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      // Check for Shift + Tab combination\n      if (event.shiftKey && event.key === \"Tab\") {\n        // Prevent default tab navigation behavior\n        event.preventDefault();\n        event.stopPropagation();\n\n        // Cycle between modes: code -> plan -> code\n        const nextMode = conversationMode === \"code\" ? \"plan\" : \"code\";\n        if (nextMode === \"plan\") {\n          handlePlanClick(event);\n        } else {\n          setConversationMode(nextMode);\n        }\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [\n    isButtonDisabled,\n    conversationMode,\n    setConversationMode,\n    handlePlanClick,\n  ]);\n\n  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setContextMenuOpen(!contextMenuOpen);\n  };\n\n  const handleCodeClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setConversationMode(\"code\");\n  };\n\n  const isExecutionAgent = conversationMode === \"code\";\n\n  const buttonLabel = useMemo(() => {\n    if (isExecutionAgent) {\n      return t(I18nKey.COMMON$CODE);\n    }\n    return t(I18nKey.COMMON$PLAN);\n  }, [isExecutionAgent, t]);\n\n  const buttonIcon = useMemo(() => {\n    if (isExecutionAgent) {\n      return <CodePillIcon className=\"h-[11px] w-[11px] shrink-0\" />;\n    }\n    return <LessonPlanIcon width={18} height={18} color=\"currentColor\" />;\n  }, [isExecutionAgent]);\n\n  const button = (\n    <div className=\"relative\">\n      <button\n        type=\"button\"\n        onClick={handleButtonClick}\n        disabled={isButtonDisabled}\n        className={cn(\n          \"flex items-center rounded-[100px]\",\n          formControlTransitionClassName,\n          isExecutionAgent\n            ? \"border border-transparent text-[var(--oh-muted)]\"\n            : \"border border-[#597FF4] bg-[#4A67BD]\",\n          !isButtonDisabled &&\n            isExecutionAgent &&\n            cn(\"cursor-pointer\", formControlMutedHoverClassName),\n          !isButtonDisabled &&\n            !isExecutionAgent &&\n            \"cursor-pointer text-white hover:bg-[#597FF4]\",\n          isButtonDisabled &&\n            cn(\n              \"opacity-50 cursor-not-allowed\",\n              isExecutionAgent && \"border-transparent\",\n            ),\n        )}\n      >\n        <div className=\"flex items-center gap-1 pl-1.5\">\n          {buttonIcon}\n          <Typography.Text className=\"text-2.75 not-italic font-normal leading-5\">\n            {buttonLabel}\n          </Typography.Text>\n        </div>\n        <ComboboxCaretInline isOpen={contextMenuOpen} />\n      </button>\n      {contextMenuOpen && (\n        <ChangeAgentContextMenu\n          activeMode={conversationMode}\n          onClose={() => setContextMenuOpen(false)}\n          onCodeClick={handleCodeClick}\n          onPlanClick={handlePlanClick}\n        />\n      )}\n    </div>\n  );\n\n  if (isHomePage) {\n    return (\n      <StyledTooltip\n        content={t(I18nKey.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION)}\n        placement=\"top\"\n      >\n        {button}\n      </StyledTooltip>\n    );\n  }\n\n  return button;\n}\n"],"mappings":"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"}

package/dist/components/features/chat/change-agent-button.js

@@ -7,95 +7,97 @@ import { useConversationStore as a } from "../../../stores/conversation-store.js
 import { useQueryClient as o } from "../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js";
 import { useActiveConversation as s } from "../../../hooks/query/use-active-conversation.js";
 import { useAgentState as c } from "../../../hooks/use-agent-state.js";
-import { StyledTooltip as l } from "../../shared/buttons/styled-tooltip.js";
-import { useUnifiedWebSocketStatus as u } from "../../../hooks/use-unified-websocket-status.js";
-import { useSubConversationTaskPolling as d } from "../../../hooks/query/use-sub-conversation-task-polling.js";
-import { Typography as f } from "../../../ui/typography.js";
-import { ComboboxCaretInline as p } from "../../../ui/combobox-caret.js";
-import m from "../../../icons/lesson-plan.js";
-import { CodePillIcon as h } from "../../../icons/code-pill.js";
-import { ChangeAgentContextMenu as g } from "./change-agent-context-menu.js";
-import { useHandlePlanClick as _ } from "../../../hooks/use-handle-plan-click.js";
-import { useEffect as v, useMemo as y, useRef as b, useState as x } from "react";
-import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { formControlTransitionClassName as l } from "../../../utils/form-control-classes.js";
+import { StyledTooltip as u } from "../../shared/buttons/styled-tooltip.js";
+import { useUnifiedWebSocketStatus as d } from "../../../hooks/use-unified-websocket-status.js";
+import { useSubConversationTaskPolling as f } from "../../../hooks/query/use-sub-conversation-task-polling.js";
+import { Typography as p } from "../../../ui/typography.js";
+import { ComboboxCaretInline as m } from "../../../ui/combobox-caret.js";
+import h from "../../../icons/lesson-plan.js";
+import { CodePillIcon as g } from "../../../icons/code-pill.js";
+import { ChangeAgentContextMenu as _ } from "./change-agent-context-menu.js";
+import { useHandlePlanClick as v } from "../../../hooks/use-handle-plan-click.js";
+import { useEffect as y, useMemo as b, useRef as x, useState as S } from "react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/components/features/chat/change-agent-button.tsx
-function w() {
-	let [w, T] = x(!1), { conversationMode: E, setConversationMode: D, subConversationTaskId: O } = a(), { conversationId: k } = i(), A = !k, j = u() === "OPEN", { curAgentState: M } = c(), { t: N } = e("openhands"), P = M === n.RUNNING, { data: F } = s(), I = o(), L = b(null), { taskStatus: R, subConversationId: z } = d(O, F?.id || null);
-	v(() => {
-		R === "READY" && z && F?.id && O && L.current !== O && (L.current = O, I.invalidateQueries({ queryKey: [
+function T() {
+	let [T, E] = S(!1), { conversationMode: D, setConversationMode: O, subConversationTaskId: k } = a(), { conversationId: A } = i(), j = !A, M = d() === "OPEN", { curAgentState: N } = c(), { t: P } = e("openhands"), F = N === n.RUNNING, { data: I } = s(), L = o(), R = x(null), { taskStatus: z, subConversationId: B } = f(k, I?.id || null);
+	y(() => {
+		z === "READY" && B && I?.id && k && R.current !== k && (R.current = k, L.invalidateQueries({ queryKey: [
 			"user",
 			"conversation",
-			F.id
+			I.id
 		] }));
 	}, [
-		R,
 		z,
-		F?.id,
-		O,
-		I
+		B,
+		I?.id,
+		k,
+		L
 	]);
-	let { handlePlanClick: B, isCreatingConversation: V } = _();
-	v(() => {
-		(P || !j) && w && T(!1);
+	let { handlePlanClick: V, isCreatingConversation: H } = v();
+	y(() => {
+		(F || !M) && T && E(!1);
 	}, [
-		P,
-		w,
-		j
+		F,
+		T,
+		M
 	]);
-	let H = A || P || V || !j;
-	v(() => {
-		if (H) return;
+	let U = j || F || H || !M;
+	y(() => {
+		if (U) return;
 		let e = (e) => {
 			if (e.shiftKey && e.key === "Tab") {
 				e.preventDefault(), e.stopPropagation();
-				let t = E === "code" ? "plan" : "code";
-				t === "plan" ? B(e) : D(t);
+				let t = D === "code" ? "plan" : "code";
+				t === "plan" ? V(e) : O(t);
 			}
 		};
 		return document.addEventListener("keydown", e), () => {
 			document.removeEventListener("keydown", e);
 		};
 	}, [
-		H,
-		E,
+		U,
 		D,
-		B
+		O,
+		V
 	]);
-	let U = (e) => {
-		e.preventDefault(), e.stopPropagation(), T(!w);
-	}, W = (e) => {
-		e.preventDefault(), e.stopPropagation(), D("code");
-	}, G = E === "code", K = y(() => N(G ? t.COMMON$CODE : t.COMMON$PLAN), [G, N]), q = y(() => G ? /* @__PURE__ */ S(h, { className: "h-[11px] w-[11px] shrink-0" }) : /* @__PURE__ */ S(m, {
+	let W = (e) => {
+		e.preventDefault(), e.stopPropagation(), E(!T);
+	}, G = (e) => {
+		e.preventDefault(), e.stopPropagation(), O("code");
+	}, K = D === "code", q = b(() => P(K ? t.COMMON$CODE : t.COMMON$PLAN), [K, P]), J = b(() => K ? /* @__PURE__ */ C(g, { className: "h-[11px] w-[11px] shrink-0" }) : /* @__PURE__ */ C(h, {
 		width: 18,
 		height: 18,
 		color: "currentColor"
-	}), [G]), J = /* @__PURE__ */ C("div", {
+	}), [K]), Y = /* @__PURE__ */ w("div", {
 		className: "relative",
-		children: [/* @__PURE__ */ C("button", {
+		children: [/* @__PURE__ */ w("button", {
 			type: "button",
-			onClick: U,
-			disabled: H,
-			className: r("flex items-center rounded-[100px] transition-[border-color,color,opacity]", G ? "border border-transparent text-[var(--oh-muted)]" : "border border-[#597FF4] bg-[#4A67BD]", !H && G && "cursor-pointer hover:text-white hover:bg-white/10", !H && !G && "cursor-pointer text-white hover:bg-white/10", H && r("opacity-50 cursor-not-allowed", G && "border-transparent")),
-			children: [/* @__PURE__ */ C("div", {
+			onClick: W,
+			disabled: U,
+			className: r("flex items-center rounded-[100px]", l, K ? "border border-transparent text-[var(--oh-muted)]" : "border border-[#597FF4] bg-[#4A67BD]", !U && K && r("cursor-pointer", "hover:text-white hover:bg-white/10"), !U && !K && "cursor-pointer text-white hover:bg-[#597FF4]", U && r("opacity-50 cursor-not-allowed", K && "border-transparent")),
+			children: [/* @__PURE__ */ w("div", {
 				className: "flex items-center gap-1 pl-1.5",
-				children: [q, /* @__PURE__ */ S(f.Text, {
+				children: [J, /* @__PURE__ */ C(p.Text, {
 					className: "text-2.75 not-italic font-normal leading-5",
-					children: K
+					children: q
 				})]
-			}), /* @__PURE__ */ S(p, { isOpen: w })]
-		}), w && /* @__PURE__ */ S(g, {
-			onClose: () => T(!1),
-			onCodeClick: W,
-			onPlanClick: B
+			}), /* @__PURE__ */ C(m, { isOpen: T })]
+		}), T && /* @__PURE__ */ C(_, {
+			activeMode: D,
+			onClose: () => E(!1),
+			onCodeClick: G,
+			onPlanClick: V
 		})]
 	});
-	return A ? /* @__PURE__ */ S(l, {
-		content: N(t.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION),
+	return j ? /* @__PURE__ */ C(u, {
+		content: P(t.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION),
 		placement: "top",
-		children: J
-	}) : J;
+		children: Y
+	}) : Y;
 }
 //#endregion
-export { w as ChangeAgentButton };
+export { T as ChangeAgentButton };
 
 //# sourceMappingURL=change-agent-button.js.map

package/dist/components/features/chat/change-agent-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"change-agent-button.js","names":[],"sources":["../../../../src/components/features/chat/change-agent-button.tsx"],"sourcesContent":["import React, { useMemo, useEffect, useState, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport { CodePillIcon } from \"#/icons/code-pill\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ChangeAgentContextMenu } from \"./change-agent-context-menu\";\nimport { cn } from \"#/utils/utils\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUnifiedWebSocketStatus } from \"#/hooks/use-unified-websocket-status\";\nimport { useSubConversationTaskPolling } from \"#/hooks/query/use-sub-conversation-task-polling\";\nimport { useHandlePlanClick } from \"#/hooks/use-handle-plan-click\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\n\nexport function ChangeAgentButton() {\n  const [contextMenuOpen, setContextMenuOpen] = useState<boolean>(false);\n\n  const { conversationMode, setConversationMode, subConversationTaskId } =\n    useConversationStore();\n\n  const { conversationId } = useOptionalConversationId();\n\n  const isHomePage = !conversationId;\n\n  const webSocketStatus = useUnifiedWebSocketStatus();\n\n  const isWebSocketConnected = webSocketStatus === \"OPEN\";\n\n  const { curAgentState } = useAgentState();\n\n  const { t } = useTranslation(\"openhands\");\n\n  const isAgentRunning = curAgentState === AgentState.RUNNING;\n\n  const { data: conversation } = useActiveConversation();\n\n  const queryClient = useQueryClient();\n\n  // Track the last invalidated task ID to prevent duplicate invalidations\n  const lastInvalidatedTaskIdRef = useRef<string | null>(null);\n\n  // Poll sub-conversation task status\n  const { taskStatus, subConversationId } = useSubConversationTaskPolling(\n    subConversationTaskId,\n    conversation?.id || null,\n  );\n\n  // Invalidate parent conversation cache when task is ready (only once per task)\n  useEffect(() => {\n    if (\n      taskStatus === \"READY\" &&\n      subConversationId &&\n      conversation?.id &&\n      subConversationTaskId &&\n      lastInvalidatedTaskIdRef.current !== subConversationTaskId\n    ) {\n      // Mark this task as invalidated to prevent duplicate calls\n      lastInvalidatedTaskIdRef.current = subConversationTaskId;\n      // Invalidate the parent conversation to refetch with updated sub_conversation_ids\n      queryClient.invalidateQueries({\n        queryKey: [\"user\", \"conversation\", conversation.id],\n      });\n    }\n  }, [\n    taskStatus,\n    subConversationId,\n    conversation?.id,\n    subConversationTaskId,\n    queryClient,\n  ]);\n\n  // Get handlePlanClick and isCreatingConversation from custom hook\n  const { handlePlanClick, isCreatingConversation } = useHandlePlanClick();\n\n  // Close context menu when agent starts running\n  useEffect(() => {\n    if ((isAgentRunning || !isWebSocketConnected) && contextMenuOpen) {\n      setContextMenuOpen(false);\n    }\n  }, [isAgentRunning, contextMenuOpen, isWebSocketConnected]);\n\n  const isButtonDisabled =\n    isHomePage ||\n    isAgentRunning ||\n    isCreatingConversation ||\n    !isWebSocketConnected;\n\n  // Handle Shift + Tab keyboard shortcut to cycle through modes\n  useEffect(() => {\n    if (isButtonDisabled) {\n      return undefined;\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      // Check for Shift + Tab combination\n      if (event.shiftKey && event.key === \"Tab\") {\n        // Prevent default tab navigation behavior\n        event.preventDefault();\n        event.stopPropagation();\n\n        // Cycle between modes: code -> plan -> code\n        const nextMode = conversationMode === \"code\" ? \"plan\" : \"code\";\n        if (nextMode === \"plan\") {\n          handlePlanClick(event);\n        } else {\n          setConversationMode(nextMode);\n        }\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [\n    isButtonDisabled,\n    conversationMode,\n    setConversationMode,\n    handlePlanClick,\n  ]);\n\n  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setContextMenuOpen(!contextMenuOpen);\n  };\n\n  const handleCodeClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setConversationMode(\"code\");\n  };\n\n  const isExecutionAgent = conversationMode === \"code\";\n\n  const buttonLabel = useMemo(() => {\n    if (isExecutionAgent) {\n      return t(I18nKey.COMMON$CODE);\n    }\n    return t(I18nKey.COMMON$PLAN);\n  }, [isExecutionAgent, t]);\n\n  const buttonIcon = useMemo(() => {\n    if (isExecutionAgent) {\n      return <CodePillIcon className=\"h-[11px] w-[11px] shrink-0\" />;\n    }\n    return <LessonPlanIcon width={18} height={18} color=\"currentColor\" />;\n  }, [isExecutionAgent]);\n\n  const button = (\n    <div className=\"relative\">\n      <button\n        type=\"button\"\n        onClick={handleButtonClick}\n        disabled={isButtonDisabled}\n        className={cn(\n          \"flex items-center rounded-[100px] transition-[border-color,color,opacity]\",\n          isExecutionAgent\n            ? \"border border-transparent text-[var(--oh-muted)]\"\n            : \"border border-[#597FF4] bg-[#4A67BD]\",\n          !isButtonDisabled &&\n            isExecutionAgent &&\n            \"cursor-pointer hover:text-white hover:bg-white/10\",\n          !isButtonDisabled &&\n            !isExecutionAgent &&\n            \"cursor-pointer text-white hover:bg-white/10\",\n          isButtonDisabled &&\n            cn(\n              \"opacity-50 cursor-not-allowed\",\n              isExecutionAgent && \"border-transparent\",\n            ),\n        )}\n      >\n        <div className=\"flex items-center gap-1 pl-1.5\">\n          {buttonIcon}\n          <Typography.Text className=\"text-2.75 not-italic font-normal leading-5\">\n            {buttonLabel}\n          </Typography.Text>\n        </div>\n        <ComboboxCaretInline isOpen={contextMenuOpen} />\n      </button>\n      {contextMenuOpen && (\n        <ChangeAgentContextMenu\n          onClose={() => setContextMenuOpen(false)}\n          onCodeClick={handleCodeClick}\n          onPlanClick={handlePlanClick}\n        />\n      )}\n    </div>\n  );\n\n  if (isHomePage) {\n    return (\n      <StyledTooltip\n        content={t(I18nKey.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION)}\n        placement=\"top\"\n      >\n        {button}\n      </StyledTooltip>\n    );\n  }\n\n  return button;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,SAAgB,IAAoB;CAClC,IAAM,CAAC,GAAiB,KAAsB,EAAkB,GAAM,EAEhE,EAAE,qBAAkB,wBAAqB,6BAC7C,GAAsB,EAElB,EAAE,sBAAmB,GAA2B,EAEhD,IAAa,CAAC,GAId,IAFkB,GAEK,KAAoB,QAE3C,EAAE,qBAAkB,GAAe,EAEnC,EAAE,SAAM,EAAe,YAAY,EAEnC,IAAiB,MAAkB,EAAW,SAE9C,EAAE,MAAM,MAAiB,GAAuB,EAEhD,IAAc,GAAgB,EAG9B,IAA2B,EAAsB,KAAK,EAGtD,EAAE,eAAY,yBAAsB,EACxC,GACA,GAAc,MAAM,KACrB;AAGD,SAAgB;AACd,EACE,MAAe,WACf,KACA,GAAc,MACd,KACA,EAAyB,YAAY,MAGrC,EAAyB,UAAU,GAEnC,EAAY,kBAAkB,EAC5B,UAAU;GAAC;GAAQ;GAAgB,EAAa;GAAG,EACpD,CAAC;IAEH;EACD;EACA;EACA,GAAc;EACd;EACA;EACD,CAAC;CAGF,IAAM,EAAE,oBAAiB,8BAA2B,GAAoB;AAGxE,SAAgB;AACd,GAAK,KAAkB,CAAC,MAAyB,KAC/C,EAAmB,GAAM;IAE1B;EAAC;EAAgB;EAAiB;EAAqB,CAAC;CAE3D,IAAM,IACJ,KACA,KACA,KACA,CAAC;AAGH,SAAgB;AACd,MAAI,EACF;EAGF,IAAM,KAAiB,MAAyB;AAE9C,OAAI,EAAM,YAAY,EAAM,QAAQ,OAAO;AAGzC,IADA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB;IAGvB,IAAM,IAAW,MAAqB,SAAS,SAAS;AACxD,IAAI,MAAa,SACf,EAAgB,EAAM,GAEtB,EAAoB,EAAS;;;AAOnC,SAFA,SAAS,iBAAiB,WAAW,EAAc,QAEtC;AACX,YAAS,oBAAoB,WAAW,EAAc;;IAEvD;EACD;EACA;EACA;EACA;EACD,CAAC;CAEF,IAAM,KAAqB,MAA+C;AAGxE,EAFA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,EAAmB,CAAC,EAAgB;IAGhC,KAAmB,MAA+C;AAGtE,EAFA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,EAAoB,OAAO;IAGvB,IAAmB,MAAqB,QAExC,IAAc,QAET,EADL,IACO,EAAQ,cAEV,EAAQ,YAFc,EAG9B,CAAC,GAAkB,EAAE,CAAC,EAEnB,IAAa,QACb,IACK,kBAAC,GAAD,EAAc,WAAU,8BAA+B,CAAA,GAEzD,kBAAC,GAAD;EAAgB,OAAO;EAAI,QAAQ;EAAI,OAAM;EAAiB,CAAA,EACpE,CAAC,EAAiB,CAAC,EAEhB,IACJ,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,UAAU;GACV,WAAW,EACT,6EACA,IACI,qDACA,wCACJ,CAAC,KACC,KACA,qDACF,CAAC,KACC,CAAC,KACD,+CACF,KACE,EACE,iCACA,KAAoB,qBACrB,CACJ;aApBH,CAsBE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,GACD,kBAAC,EAAW,MAAZ;KAAiB,WAAU;eACxB;KACe,CAAA,CACd;OACN,kBAAC,GAAD,EAAqB,QAAQ,GAAmB,CAAA,CACzC;MACR,KACC,kBAAC,GAAD;GACE,eAAe,EAAmB,GAAM;GACxC,aAAa;GACb,aAAa;GACb,CAAA,CAEA;;AAcR,QAXI,IAEA,kBAAC,GAAD;EACE,SAAS,EAAE,EAAQ,uCAAuC;EAC1D,WAAU;YAET;EACa,CAAA,GAIb"}
+{"version":3,"file":"change-agent-button.js","names":[],"sources":["../../../../src/components/features/chat/change-agent-button.tsx"],"sourcesContent":["import React, { useMemo, useEffect, useState, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport { CodePillIcon } from \"#/icons/code-pill\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ChangeAgentContextMenu } from \"./change-agent-context-menu\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  formControlMutedHoverClassName,\n  formControlTransitionClassName,\n} from \"#/utils/form-control-classes\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUnifiedWebSocketStatus } from \"#/hooks/use-unified-websocket-status\";\nimport { useSubConversationTaskPolling } from \"#/hooks/query/use-sub-conversation-task-polling\";\nimport { useHandlePlanClick } from \"#/hooks/use-handle-plan-click\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\n\nexport function ChangeAgentButton() {\n  const [contextMenuOpen, setContextMenuOpen] = useState<boolean>(false);\n\n  const { conversationMode, setConversationMode, subConversationTaskId } =\n    useConversationStore();\n\n  const { conversationId } = useOptionalConversationId();\n\n  const isHomePage = !conversationId;\n\n  const webSocketStatus = useUnifiedWebSocketStatus();\n\n  const isWebSocketConnected = webSocketStatus === \"OPEN\";\n\n  const { curAgentState } = useAgentState();\n\n  const { t } = useTranslation(\"openhands\");\n\n  const isAgentRunning = curAgentState === AgentState.RUNNING;\n\n  const { data: conversation } = useActiveConversation();\n\n  const queryClient = useQueryClient();\n\n  // Track the last invalidated task ID to prevent duplicate invalidations\n  const lastInvalidatedTaskIdRef = useRef<string | null>(null);\n\n  // Poll sub-conversation task status\n  const { taskStatus, subConversationId } = useSubConversationTaskPolling(\n    subConversationTaskId,\n    conversation?.id || null,\n  );\n\n  // Invalidate parent conversation cache when task is ready (only once per task)\n  useEffect(() => {\n    if (\n      taskStatus === \"READY\" &&\n      subConversationId &&\n      conversation?.id &&\n      subConversationTaskId &&\n      lastInvalidatedTaskIdRef.current !== subConversationTaskId\n    ) {\n      // Mark this task as invalidated to prevent duplicate calls\n      lastInvalidatedTaskIdRef.current = subConversationTaskId;\n      // Invalidate the parent conversation to refetch with updated sub_conversation_ids\n      queryClient.invalidateQueries({\n        queryKey: [\"user\", \"conversation\", conversation.id],\n      });\n    }\n  }, [\n    taskStatus,\n    subConversationId,\n    conversation?.id,\n    subConversationTaskId,\n    queryClient,\n  ]);\n\n  // Get handlePlanClick and isCreatingConversation from custom hook\n  const { handlePlanClick, isCreatingConversation } = useHandlePlanClick();\n\n  // Close context menu when agent starts running\n  useEffect(() => {\n    if ((isAgentRunning || !isWebSocketConnected) && contextMenuOpen) {\n      setContextMenuOpen(false);\n    }\n  }, [isAgentRunning, contextMenuOpen, isWebSocketConnected]);\n\n  const isButtonDisabled =\n    isHomePage ||\n    isAgentRunning ||\n    isCreatingConversation ||\n    !isWebSocketConnected;\n\n  // Handle Shift + Tab keyboard shortcut to cycle through modes\n  useEffect(() => {\n    if (isButtonDisabled) {\n      return undefined;\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      // Check for Shift + Tab combination\n      if (event.shiftKey && event.key === \"Tab\") {\n        // Prevent default tab navigation behavior\n        event.preventDefault();\n        event.stopPropagation();\n\n        // Cycle between modes: code -> plan -> code\n        const nextMode = conversationMode === \"code\" ? \"plan\" : \"code\";\n        if (nextMode === \"plan\") {\n          handlePlanClick(event);\n        } else {\n          setConversationMode(nextMode);\n        }\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [\n    isButtonDisabled,\n    conversationMode,\n    setConversationMode,\n    handlePlanClick,\n  ]);\n\n  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setContextMenuOpen(!contextMenuOpen);\n  };\n\n  const handleCodeClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setConversationMode(\"code\");\n  };\n\n  const isExecutionAgent = conversationMode === \"code\";\n\n  const buttonLabel = useMemo(() => {\n    if (isExecutionAgent) {\n      return t(I18nKey.COMMON$CODE);\n    }\n    return t(I18nKey.COMMON$PLAN);\n  }, [isExecutionAgent, t]);\n\n  const buttonIcon = useMemo(() => {\n    if (isExecutionAgent) {\n      return <CodePillIcon className=\"h-[11px] w-[11px] shrink-0\" />;\n    }\n    return <LessonPlanIcon width={18} height={18} color=\"currentColor\" />;\n  }, [isExecutionAgent]);\n\n  const button = (\n    <div className=\"relative\">\n      <button\n        type=\"button\"\n        onClick={handleButtonClick}\n        disabled={isButtonDisabled}\n        className={cn(\n          \"flex items-center rounded-[100px]\",\n          formControlTransitionClassName,\n          isExecutionAgent\n            ? \"border border-transparent text-[var(--oh-muted)]\"\n            : \"border border-[#597FF4] bg-[#4A67BD]\",\n          !isButtonDisabled &&\n            isExecutionAgent &&\n            cn(\"cursor-pointer\", formControlMutedHoverClassName),\n          !isButtonDisabled &&\n            !isExecutionAgent &&\n            \"cursor-pointer text-white hover:bg-[#597FF4]\",\n          isButtonDisabled &&\n            cn(\n              \"opacity-50 cursor-not-allowed\",\n              isExecutionAgent && \"border-transparent\",\n            ),\n        )}\n      >\n        <div className=\"flex items-center gap-1 pl-1.5\">\n          {buttonIcon}\n          <Typography.Text className=\"text-2.75 not-italic font-normal leading-5\">\n            {buttonLabel}\n          </Typography.Text>\n        </div>\n        <ComboboxCaretInline isOpen={contextMenuOpen} />\n      </button>\n      {contextMenuOpen && (\n        <ChangeAgentContextMenu\n          activeMode={conversationMode}\n          onClose={() => setContextMenuOpen(false)}\n          onCodeClick={handleCodeClick}\n          onPlanClick={handlePlanClick}\n        />\n      )}\n    </div>\n  );\n\n  if (isHomePage) {\n    return (\n      <StyledTooltip\n        content={t(I18nKey.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION)}\n        placement=\"top\"\n      >\n        {button}\n      </StyledTooltip>\n    );\n  }\n\n  return button;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwBA,SAAgB,IAAoB;CAClC,IAAM,CAAC,GAAiB,KAAsB,EAAkB,GAAM,EAEhE,EAAE,qBAAkB,wBAAqB,6BAC7C,GAAsB,EAElB,EAAE,sBAAmB,GAA2B,EAEhD,IAAa,CAAC,GAId,IAFkB,GAEK,KAAoB,QAE3C,EAAE,qBAAkB,GAAe,EAEnC,EAAE,SAAM,EAAe,YAAY,EAEnC,IAAiB,MAAkB,EAAW,SAE9C,EAAE,MAAM,MAAiB,GAAuB,EAEhD,IAAc,GAAgB,EAG9B,IAA2B,EAAsB,KAAK,EAGtD,EAAE,eAAY,yBAAsB,EACxC,GACA,GAAc,MAAM,KACrB;AAGD,SAAgB;AACd,EACE,MAAe,WACf,KACA,GAAc,MACd,KACA,EAAyB,YAAY,MAGrC,EAAyB,UAAU,GAEnC,EAAY,kBAAkB,EAC5B,UAAU;GAAC;GAAQ;GAAgB,EAAa;GAAG,EACpD,CAAC;IAEH;EACD;EACA;EACA,GAAc;EACd;EACA;EACD,CAAC;CAGF,IAAM,EAAE,oBAAiB,8BAA2B,GAAoB;AAGxE,SAAgB;AACd,GAAK,KAAkB,CAAC,MAAyB,KAC/C,EAAmB,GAAM;IAE1B;EAAC;EAAgB;EAAiB;EAAqB,CAAC;CAE3D,IAAM,IACJ,KACA,KACA,KACA,CAAC;AAGH,SAAgB;AACd,MAAI,EACF;EAGF,IAAM,KAAiB,MAAyB;AAE9C,OAAI,EAAM,YAAY,EAAM,QAAQ,OAAO;AAGzC,IADA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB;IAGvB,IAAM,IAAW,MAAqB,SAAS,SAAS;AACxD,IAAI,MAAa,SACf,EAAgB,EAAM,GAEtB,EAAoB,EAAS;;;AAOnC,SAFA,SAAS,iBAAiB,WAAW,EAAc,QAEtC;AACX,YAAS,oBAAoB,WAAW,EAAc;;IAEvD;EACD;EACA;EACA;EACA;EACD,CAAC;CAEF,IAAM,KAAqB,MAA+C;AAGxE,EAFA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,EAAmB,CAAC,EAAgB;IAGhC,KAAmB,MAA+C;AAGtE,EAFA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,EAAoB,OAAO;IAGvB,IAAmB,MAAqB,QAExC,IAAc,QAET,EADL,IACO,EAAQ,cAEV,EAAQ,YAFc,EAG9B,CAAC,GAAkB,EAAE,CAAC,EAEnB,IAAa,QACb,IACK,kBAAC,GAAD,EAAc,WAAU,8BAA+B,CAAA,GAEzD,kBAAC,GAAD;EAAgB,OAAO;EAAI,QAAQ;EAAI,OAAM;EAAiB,CAAA,EACpE,CAAC,EAAiB,CAAC,EAEhB,IACJ,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,UAAU;GACV,WAAW,EACT,qCACA,GACA,IACI,qDACA,wCACJ,CAAC,KACC,KACA,EAAG,kBAAA,qCAAiD,EACtD,CAAC,KACC,CAAC,KACD,gDACF,KACE,EACE,iCACA,KAAoB,qBACrB,CACJ;aArBH,CAuBE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,GACD,kBAAC,EAAW,MAAZ;KAAiB,WAAU;eACxB;KACe,CAAA,CACd;OACN,kBAAC,GAAD,EAAqB,QAAQ,GAAmB,CAAA,CACzC;MACR,KACC,kBAAC,GAAD;GACE,YAAY;GACZ,eAAe,EAAmB,GAAM;GACxC,aAAa;GACb,aAAa;GACb,CAAA,CAEA;;AAcR,QAXI,IAEA,kBAAC,GAAD;EACE,SAAS,EAAE,EAAQ,uCAAuC;EAC1D,WAAU;YAET;EACa,CAAA,GAIb"}