@openhands/agent-canvas 1.9.0 → 1.11.0

package/dist/components/features/settings/agent-canvas-version-modal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-canvas-version-modal.cjs","names":[],"sources":["../../../../src/components/features/settings/agent-canvas-version-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n  ArrowUpCircle,\n  Check,\n  CheckCircle2,\n  Copy,\n  ExternalLink,\n  RefreshCw,\n} from \"lucide-react\";\nimport {\n  AGENT_CANVAS_RELEASE_NOTES_URL,\n  AGENT_CANVAS_UPDATE_COMMANDS,\n} from \"#/api/agent-canvas-updates\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport DockerIcon from \"#/icons/docker.svg?react\";\nimport NpmIcon from \"#/icons/npm.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\nconst COPY_FEEDBACK_MS = 2000;\n\ntype UpdateCommandTab = \"npm\" | \"docker\";\n\nconst UPDATE_COMMAND_TABS: UpdateCommandTab[] = [\"npm\", \"docker\"];\n\ninterface AgentCanvasVersionModalProps {\n  installedVersion: string;\n  latestVersion: string | null;\n  updateAvailable: boolean;\n  isChecking: boolean;\n  onCheckForUpdates: () => void;\n  onClose: () => void;\n}\n\nfunction getUpdateCommandTabLabelKey(tab: UpdateCommandTab): I18nKey {\n  return tab === \"npm\"\n    ? I18nKey.SETTINGS$VERSION_NPM_RECOMMENDED\n    : I18nKey.SETTINGS$VERSION_DOCKER;\n}\n\nfunction UpdateCommandTabIcon({ tab }: { tab: UpdateCommandTab }) {\n  if (tab === \"npm\") {\n    return <NpmIcon className=\"size-4 shrink-0\" aria-hidden />;\n  }\n  return <DockerIcon className=\"size-5 shrink-0\" aria-hidden />;\n}\n\nexport function AgentCanvasVersionModal({\n  installedVersion,\n  latestVersion,\n  updateAvailable,\n  isChecking,\n  onCheckForUpdates,\n  onClose,\n}: AgentCanvasVersionModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [selectedTab, setSelectedTab] = React.useState<UpdateCommandTab>(\"npm\");\n  const [copied, setCopied] = React.useState(false);\n  const copiedTimeoutRef = React.useRef<number | null>(null);\n  const command =\n    selectedTab === \"npm\"\n      ? AGENT_CANVAS_UPDATE_COMMANDS.npm\n      : AGENT_CANVAS_UPDATE_COMMANDS.docker;\n\n  React.useEffect(\n    () => () => {\n      if (copiedTimeoutRef.current !== null) {\n        window.clearTimeout(copiedTimeoutRef.current);\n      }\n    },\n    [],\n  );\n\n  React.useEffect(() => {\n    setCopied(false);\n    if (copiedTimeoutRef.current !== null) {\n      window.clearTimeout(copiedTimeoutRef.current);\n      copiedTimeoutRef.current = null;\n    }\n  }, [selectedTab]);\n\n  const copyCommand = React.useCallback(() => {\n    void navigator.clipboard?.writeText(command);\n    setCopied(true);\n    if (copiedTimeoutRef.current !== null) {\n      window.clearTimeout(copiedTimeoutRef.current);\n    }\n    copiedTimeoutRef.current = window.setTimeout(() => {\n      setCopied(false);\n      copiedTimeoutRef.current = null;\n    }, COPY_FEEDBACK_MS);\n  }, [command]);\n\n  return (\n    <ModalBackdrop\n      onClose={onClose}\n      aria-label={t(I18nKey.SETTINGS$VERSION_MODAL_ARIA_LABEL)}\n    >\n      <section className=\"relative flex w-[520px] max-w-[90vw] flex-col gap-5 rounded-xl border border-[var(--oh-border)] bg-base-secondary p-6 shadow-xl\">\n        <ModalCloseButton\n          onClose={onClose}\n          testId=\"agent-canvas-version-modal-close\"\n        />\n\n        <header className=\"flex items-center gap-3 pr-8\">\n          {updateAvailable ? (\n            <ArrowUpCircle\n              className=\"size-7 shrink-0 text-[#3B82F6]\"\n              aria-hidden\n            />\n          ) : (\n            <CheckCircle2\n              className=\"size-7 shrink-0 text-[var(--oh-status-success)]\"\n              aria-hidden\n            />\n          )}\n          <h2 className=\"text-base font-semibold leading-6 text-white\">\n            {t(\n              updateAvailable\n                ? I18nKey.SETTINGS$VERSION_UPDATE_AVAILABLE\n                : I18nKey.SETTINGS$VERSION_UP_TO_DATE_TITLE,\n            )}\n          </h2>\n          {updateAvailable && latestVersion ? (\n            <span className=\"rounded-full bg-[#1E3A5F] px-2 py-0.5 text-xs font-semibold text-[#3B82F6]\">\n              {latestVersion}\n            </span>\n          ) : null}\n        </header>\n\n        <div className=\"flex flex-col gap-1\">\n          {updateAvailable && latestVersion ? (\n            <p className=\"text-sm text-[var(--oh-text)]\">\n              {t(I18nKey.SETTINGS$VERSION_UPDATE_MESSAGE, {\n                installed: installedVersion,\n                latest: latestVersion,\n              })}{\" \"}\n              <a\n                href={AGENT_CANVAS_RELEASE_NOTES_URL}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"inline-flex items-center gap-1.5 whitespace-nowrap font-medium text-white hover:text-[var(--oh-text)]\"\n              >\n                {t(I18nKey.SETTINGS$VERSION_RELEASE_NOTES)}\n                <ExternalLink className=\"size-4 shrink-0\" aria-hidden />\n              </a>\n            </p>\n          ) : (\n            <>\n              <p className=\"text-sm text-[var(--oh-text)]\">\n                {t(I18nKey.SETTINGS$VERSION_INSTALLED, {\n                  version: installedVersion,\n                })}\n              </p>\n              {latestVersion ? (\n                <p className=\"whitespace-nowrap text-sm text-[var(--oh-status-success)]\">\n                  {t(I18nKey.SETTINGS$VERSION_LATEST_MESSAGE)}{\" \"}\n                  <a\n                    href={AGENT_CANVAS_RELEASE_NOTES_URL}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    className=\"inline-flex items-center gap-1.5 font-medium text-white hover:text-[var(--oh-text)]\"\n                  >\n                    {t(I18nKey.SETTINGS$VERSION_RELEASE_NOTES)}\n                    <ExternalLink className=\"size-4 shrink-0\" aria-hidden />\n                  </a>\n                </p>\n              ) : (\n                <p className=\"text-sm text-[var(--oh-muted)]\">\n                  {t(I18nKey.SETTINGS$VERSION_CHECK_UNAVAILABLE)}\n                </p>\n              )}\n            </>\n          )}\n        </div>\n\n        {updateAvailable ? (\n          <div>\n            <div className=\"flex justify-center\">\n              {UPDATE_COMMAND_TABS.map((tab) => (\n                <button\n                  key={tab}\n                  type=\"button\"\n                  onClick={() => setSelectedTab(tab)}\n                  className={cn(\n                    \"inline-flex items-center gap-1.5 px-3 pb-2 text-sm font-medium\",\n                    selectedTab === tab\n                      ? \"border-b border-white text-white\"\n                      : \"text-[var(--oh-muted)] hover:text-white\",\n                  )}\n                >\n                  <UpdateCommandTabIcon tab={tab} />\n                  {t(getUpdateCommandTabLabelKey(tab))}\n                </button>\n              ))}\n            </div>\n            <div className=\"flex items-center gap-3 rounded-lg border border-[var(--oh-border)] bg-[var(--oh-surface-deep)] px-4 py-3\">\n              <code className=\"min-w-0 flex-1 overflow-visible whitespace-nowrap font-mono text-sm text-white\">\n                {command}\n              </code>\n              <button\n                type=\"button\"\n                onClick={copyCommand}\n                aria-label={t(\n                  copied\n                    ? I18nKey.BUTTON$COPIED\n                    : I18nKey.SETTINGS$VERSION_COPY_COMMAND,\n                )}\n                disabled={copied}\n                className=\"shrink-0 text-[var(--oh-muted)] hover:text-white disabled:hover:text-[var(--oh-muted)]\"\n              >\n                {copied ? (\n                  <Check\n                    className=\"size-4 text-[var(--oh-status-success)]\"\n                    aria-hidden\n                  />\n                ) : (\n                  <Copy className=\"size-4\" aria-hidden />\n                )}\n              </button>\n            </div>\n          </div>\n        ) : null}\n\n        {!updateAvailable ? (\n          <div className=\"flex flex-wrap gap-x-8 gap-y-3\">\n            <button\n              type=\"button\"\n              onClick={onCheckForUpdates}\n              className=\"inline-flex items-center gap-2 text-sm font-medium text-white hover:text-[var(--oh-text)] disabled:cursor-wait disabled:text-[var(--oh-muted)]\"\n              disabled={isChecking}\n            >\n              {t(I18nKey.SETTINGS$VERSION_CHECK_FOR_UPDATES)}\n              <RefreshCw\n                className={cn(\"size-4 shrink-0\", isChecking && \"animate-spin\")}\n                aria-hidden\n              />\n            </button>\n          </div>\n        ) : null}\n      </section>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/settings/agent-canvas-version-modal.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface AgentCanvasVersionModalProps {
+    installedVersion: string;
+    latestVersion: string | null;
+    updateAvailable: boolean;
+    isChecking: boolean;
+    onCheckForUpdates: () => void;
+    onClose: () => void;
+}
+export declare function AgentCanvasVersionModal({ installedVersion, latestVersion, updateAvailable, isChecking, onCheckForUpdates, onClose, }: AgentCanvasVersionModalProps): React.JSX.Element;
+export {};

package/dist/components/features/settings/agent-canvas-version-modal.js

@@ -0,0 +1,166 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { Check as n } from "../../../node_modules/lucide-react/dist/esm/icons/check.js";
+import { CircleArrowUp as r } from "../../../node_modules/lucide-react/dist/esm/icons/circle-arrow-up.js";
+import { CircleCheck as i } from "../../../node_modules/lucide-react/dist/esm/icons/circle-check.js";
+import { Copy as a } from "../../../node_modules/lucide-react/dist/esm/icons/copy.js";
+import { ExternalLink as o } from "../../../node_modules/lucide-react/dist/esm/icons/external-link.js";
+import { RefreshCw as s } from "../../../node_modules/lucide-react/dist/esm/icons/refresh-cw.js";
+import { cn as c } from "../../../utils/utils.js";
+import { ModalBackdrop as l } from "../../shared/modals/modal-backdrop.js";
+import { ModalCloseButton as u } from "../../shared/modals/modal-close-button.js";
+import { AGENT_CANVAS_RELEASE_NOTES_URL as d, AGENT_CANVAS_UPDATE_COMMANDS as f } from "../../../api/agent-canvas-updates.js";
+import p from "../../../icons/docker.js";
+import m from "../../../icons/npm.js";
+import h from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/features/settings/agent-canvas-version-modal.tsx
+var y = 2e3, b = ["npm", "docker"];
+function x(e) {
+	return e === "npm" ? t.SETTINGS$VERSION_NPM_RECOMMENDED : t.SETTINGS$VERSION_DOCKER;
+}
+function S({ tab: e }) {
+	return e === "npm" ? /* @__PURE__ */ _(m, {
+		className: "size-4 shrink-0",
+		"aria-hidden": !0
+	}) : /* @__PURE__ */ _(p, {
+		className: "size-5 shrink-0",
+		"aria-hidden": !0
+	});
+}
+function C({ installedVersion: p, latestVersion: m, updateAvailable: C, isChecking: w, onCheckForUpdates: T, onClose: E }) {
+	let { t: D } = e("openhands"), [O, k] = h.useState("npm"), [A, j] = h.useState(!1), M = h.useRef(null), N = O === "npm" ? f.npm : f.docker;
+	h.useEffect(() => () => {
+		M.current !== null && window.clearTimeout(M.current);
+	}, []), h.useEffect(() => {
+		j(!1), M.current !== null && (window.clearTimeout(M.current), M.current = null);
+	}, [O]);
+	let P = h.useCallback(() => {
+		navigator.clipboard?.writeText(N), j(!0), M.current !== null && window.clearTimeout(M.current), M.current = window.setTimeout(() => {
+			j(!1), M.current = null;
+		}, y);
+	}, [N]);
+	return /* @__PURE__ */ _(l, {
+		onClose: E,
+		"aria-label": D(t.SETTINGS$VERSION_MODAL_ARIA_LABEL),
+		children: /* @__PURE__ */ v("section", {
+			className: "relative flex w-[520px] max-w-[90vw] flex-col gap-5 rounded-xl border border-[var(--oh-border)] bg-base-secondary p-6 shadow-xl",
+			children: [
+				/* @__PURE__ */ _(u, {
+					onClose: E,
+					testId: "agent-canvas-version-modal-close"
+				}),
+				/* @__PURE__ */ v("header", {
+					className: "flex items-center gap-3 pr-8",
+					children: [
+						C ? /* @__PURE__ */ _(r, {
+							className: "size-7 shrink-0 text-[#3B82F6]",
+							"aria-hidden": !0
+						}) : /* @__PURE__ */ _(i, {
+							className: "size-7 shrink-0 text-[var(--oh-status-success)]",
+							"aria-hidden": !0
+						}),
+						/* @__PURE__ */ _("h2", {
+							className: "text-base font-semibold leading-6 text-white",
+							children: D(C ? t.SETTINGS$VERSION_UPDATE_AVAILABLE : t.SETTINGS$VERSION_UP_TO_DATE_TITLE)
+						}),
+						C && m ? /* @__PURE__ */ _("span", {
+							className: "rounded-full bg-[#1E3A5F] px-2 py-0.5 text-xs font-semibold text-[#3B82F6]",
+							children: m
+						}) : null
+					]
+				}),
+				/* @__PURE__ */ _("div", {
+					className: "flex flex-col gap-1",
+					children: C && m ? /* @__PURE__ */ v("p", {
+						className: "text-sm text-[var(--oh-text)]",
+						children: [
+							D(t.SETTINGS$VERSION_UPDATE_MESSAGE, {
+								installed: p,
+								latest: m
+							}),
+							" ",
+							/* @__PURE__ */ v("a", {
+								href: d,
+								target: "_blank",
+								rel: "noopener noreferrer",
+								className: "inline-flex items-center gap-1.5 whitespace-nowrap font-medium text-white hover:text-[var(--oh-text)]",
+								children: [D(t.SETTINGS$VERSION_RELEASE_NOTES), /* @__PURE__ */ _(o, {
+									className: "size-4 shrink-0",
+									"aria-hidden": !0
+								})]
+							})
+						]
+					}) : /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("p", {
+						className: "text-sm text-[var(--oh-text)]",
+						children: D(t.SETTINGS$VERSION_INSTALLED, { version: p })
+					}), m ? /* @__PURE__ */ v("p", {
+						className: "whitespace-nowrap text-sm text-[var(--oh-status-success)]",
+						children: [
+							D(t.SETTINGS$VERSION_LATEST_MESSAGE),
+							" ",
+							/* @__PURE__ */ v("a", {
+								href: d,
+								target: "_blank",
+								rel: "noopener noreferrer",
+								className: "inline-flex items-center gap-1.5 font-medium text-white hover:text-[var(--oh-text)]",
+								children: [D(t.SETTINGS$VERSION_RELEASE_NOTES), /* @__PURE__ */ _(o, {
+									className: "size-4 shrink-0",
+									"aria-hidden": !0
+								})]
+							})
+						]
+					}) : /* @__PURE__ */ _("p", {
+						className: "text-sm text-[var(--oh-muted)]",
+						children: D(t.SETTINGS$VERSION_CHECK_UNAVAILABLE)
+					})] })
+				}),
+				C ? /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("div", {
+					className: "flex justify-center",
+					children: b.map((e) => /* @__PURE__ */ v("button", {
+						type: "button",
+						onClick: () => k(e),
+						className: c("inline-flex items-center gap-1.5 px-3 pb-2 text-sm font-medium", O === e ? "border-b border-white text-white" : "text-[var(--oh-muted)] hover:text-white"),
+						children: [/* @__PURE__ */ _(S, { tab: e }), D(x(e))]
+					}, e))
+				}), /* @__PURE__ */ v("div", {
+					className: "flex items-center gap-3 rounded-lg border border-[var(--oh-border)] bg-[var(--oh-surface-deep)] px-4 py-3",
+					children: [/* @__PURE__ */ _("code", {
+						className: "min-w-0 flex-1 overflow-visible whitespace-nowrap font-mono text-sm text-white",
+						children: N
+					}), /* @__PURE__ */ _("button", {
+						type: "button",
+						onClick: P,
+						"aria-label": D(A ? t.BUTTON$COPIED : t.SETTINGS$VERSION_COPY_COMMAND),
+						disabled: A,
+						className: "shrink-0 text-[var(--oh-muted)] hover:text-white disabled:hover:text-[var(--oh-muted)]",
+						children: A ? /* @__PURE__ */ _(n, {
+							className: "size-4 text-[var(--oh-status-success)]",
+							"aria-hidden": !0
+						}) : /* @__PURE__ */ _(a, {
+							className: "size-4",
+							"aria-hidden": !0
+						})
+					})]
+				})] }) : null,
+				C ? null : /* @__PURE__ */ _("div", {
+					className: "flex flex-wrap gap-x-8 gap-y-3",
+					children: /* @__PURE__ */ v("button", {
+						type: "button",
+						onClick: T,
+						className: "inline-flex items-center gap-2 text-sm font-medium text-white hover:text-[var(--oh-text)] disabled:cursor-wait disabled:text-[var(--oh-muted)]",
+						disabled: w,
+						children: [D(t.SETTINGS$VERSION_CHECK_FOR_UPDATES), /* @__PURE__ */ _(s, {
+							className: c("size-4 shrink-0", w && "animate-spin"),
+							"aria-hidden": !0
+						})]
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { C as AgentCanvasVersionModal };
+
+//# sourceMappingURL=agent-canvas-version-modal.js.map

package/dist/components/features/settings/agent-canvas-version-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-canvas-version-modal.js","names":[],"sources":["../../../../src/components/features/settings/agent-canvas-version-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n  ArrowUpCircle,\n  Check,\n  CheckCircle2,\n  Copy,\n  ExternalLink,\n  RefreshCw,\n} from \"lucide-react\";\nimport {\n  AGENT_CANVAS_RELEASE_NOTES_URL,\n  AGENT_CANVAS_UPDATE_COMMANDS,\n} from \"#/api/agent-canvas-updates\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport DockerIcon from \"#/icons/docker.svg?react\";\nimport NpmIcon from \"#/icons/npm.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\nconst COPY_FEEDBACK_MS = 2000;\n\ntype UpdateCommandTab = \"npm\" | \"docker\";\n\nconst UPDATE_COMMAND_TABS: UpdateCommandTab[] = [\"npm\", \"docker\"];\n\ninterface AgentCanvasVersionModalProps {\n  installedVersion: string;\n  latestVersion: string | null;\n  updateAvailable: boolean;\n  isChecking: boolean;\n  onCheckForUpdates: () => void;\n  onClose: () => void;\n}\n\nfunction getUpdateCommandTabLabelKey(tab: UpdateCommandTab): I18nKey {\n  return tab === \"npm\"\n    ? I18nKey.SETTINGS$VERSION_NPM_RECOMMENDED\n    : I18nKey.SETTINGS$VERSION_DOCKER;\n}\n\nfunction UpdateCommandTabIcon({ tab }: { tab: UpdateCommandTab }) {\n  if (tab === \"npm\") {\n    return <NpmIcon className=\"size-4 shrink-0\" aria-hidden />;\n  }\n  return <DockerIcon className=\"size-5 shrink-0\" aria-hidden />;\n}\n\nexport function AgentCanvasVersionModal({\n  installedVersion,\n  latestVersion,\n  updateAvailable,\n  isChecking,\n  onCheckForUpdates,\n  onClose,\n}: AgentCanvasVersionModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [selectedTab, setSelectedTab] = React.useState<UpdateCommandTab>(\"npm\");\n  const [copied, setCopied] = React.useState(false);\n  const copiedTimeoutRef = React.useRef<number | null>(null);\n  const command =\n    selectedTab === \"npm\"\n      ? AGENT_CANVAS_UPDATE_COMMANDS.npm\n      : AGENT_CANVAS_UPDATE_COMMANDS.docker;\n\n  React.useEffect(\n    () => () => {\n      if (copiedTimeoutRef.current !== null) {\n        window.clearTimeout(copiedTimeoutRef.current);\n      }\n    },\n    [],\n  );\n\n  React.useEffect(() => {\n    setCopied(false);\n    if (copiedTimeoutRef.current !== null) {\n      window.clearTimeout(copiedTimeoutRef.current);\n      copiedTimeoutRef.current = null;\n    }\n  }, [selectedTab]);\n\n  const copyCommand = React.useCallback(() => {\n    void navigator.clipboard?.writeText(command);\n    setCopied(true);\n    if (copiedTimeoutRef.current !== null) {\n      window.clearTimeout(copiedTimeoutRef.current);\n    }\n    copiedTimeoutRef.current = window.setTimeout(() => {\n      setCopied(false);\n      copiedTimeoutRef.current = null;\n    }, COPY_FEEDBACK_MS);\n  }, [command]);\n\n  return (\n    <ModalBackdrop\n      onClose={onClose}\n      aria-label={t(I18nKey.SETTINGS$VERSION_MODAL_ARIA_LABEL)}\n    >\n      <section className=\"relative flex w-[520px] max-w-[90vw] flex-col gap-5 rounded-xl border border-[var(--oh-border)] bg-base-secondary p-6 shadow-xl\">\n        <ModalCloseButton\n          onClose={onClose}\n          testId=\"agent-canvas-version-modal-close\"\n        />\n\n        <header className=\"flex items-center gap-3 pr-8\">\n          {updateAvailable ? (\n            <ArrowUpCircle\n              className=\"size-7 shrink-0 text-[#3B82F6]\"\n              aria-hidden\n            />\n          ) : (\n            <CheckCircle2\n              className=\"size-7 shrink-0 text-[var(--oh-status-success)]\"\n              aria-hidden\n            />\n          )}\n          <h2 className=\"text-base font-semibold leading-6 text-white\">\n            {t(\n              updateAvailable\n                ? I18nKey.SETTINGS$VERSION_UPDATE_AVAILABLE\n                : I18nKey.SETTINGS$VERSION_UP_TO_DATE_TITLE,\n            )}\n          </h2>\n          {updateAvailable && latestVersion ? (\n            <span className=\"rounded-full bg-[#1E3A5F] px-2 py-0.5 text-xs font-semibold text-[#3B82F6]\">\n              {latestVersion}\n            </span>\n          ) : null}\n        </header>\n\n        <div className=\"flex flex-col gap-1\">\n          {updateAvailable && latestVersion ? (\n            <p className=\"text-sm text-[var(--oh-text)]\">\n              {t(I18nKey.SETTINGS$VERSION_UPDATE_MESSAGE, {\n                installed: installedVersion,\n                latest: latestVersion,\n              })}{\" \"}\n              <a\n                href={AGENT_CANVAS_RELEASE_NOTES_URL}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"inline-flex items-center gap-1.5 whitespace-nowrap font-medium text-white hover:text-[var(--oh-text)]\"\n              >\n                {t(I18nKey.SETTINGS$VERSION_RELEASE_NOTES)}\n                <ExternalLink className=\"size-4 shrink-0\" aria-hidden />\n              </a>\n            </p>\n          ) : (\n            <>\n              <p className=\"text-sm text-[var(--oh-text)]\">\n                {t(I18nKey.SETTINGS$VERSION_INSTALLED, {\n                  version: installedVersion,\n                })}\n              </p>\n              {latestVersion ? (\n                <p className=\"whitespace-nowrap text-sm text-[var(--oh-status-success)]\">\n                  {t(I18nKey.SETTINGS$VERSION_LATEST_MESSAGE)}{\" \"}\n                  <a\n                    href={AGENT_CANVAS_RELEASE_NOTES_URL}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    className=\"inline-flex items-center gap-1.5 font-medium text-white hover:text-[var(--oh-text)]\"\n                  >\n                    {t(I18nKey.SETTINGS$VERSION_RELEASE_NOTES)}\n                    <ExternalLink className=\"size-4 shrink-0\" aria-hidden />\n                  </a>\n                </p>\n              ) : (\n                <p className=\"text-sm text-[var(--oh-muted)]\">\n                  {t(I18nKey.SETTINGS$VERSION_CHECK_UNAVAILABLE)}\n                </p>\n              )}\n            </>\n          )}\n        </div>\n\n        {updateAvailable ? (\n          <div>\n            <div className=\"flex justify-center\">\n              {UPDATE_COMMAND_TABS.map((tab) => (\n                <button\n                  key={tab}\n                  type=\"button\"\n                  onClick={() => setSelectedTab(tab)}\n                  className={cn(\n                    \"inline-flex items-center gap-1.5 px-3 pb-2 text-sm font-medium\",\n                    selectedTab === tab\n                      ? \"border-b border-white text-white\"\n                      : \"text-[var(--oh-muted)] hover:text-white\",\n                  )}\n                >\n                  <UpdateCommandTabIcon tab={tab} />\n                  {t(getUpdateCommandTabLabelKey(tab))}\n                </button>\n              ))}\n            </div>\n            <div className=\"flex items-center gap-3 rounded-lg border border-[var(--oh-border)] bg-[var(--oh-surface-deep)] px-4 py-3\">\n              <code className=\"min-w-0 flex-1 overflow-visible whitespace-nowrap font-mono text-sm text-white\">\n                {command}\n              </code>\n              <button\n                type=\"button\"\n                onClick={copyCommand}\n                aria-label={t(\n                  copied\n                    ? I18nKey.BUTTON$COPIED\n                    : I18nKey.SETTINGS$VERSION_COPY_COMMAND,\n                )}\n                disabled={copied}\n                className=\"shrink-0 text-[var(--oh-muted)] hover:text-white disabled:hover:text-[var(--oh-muted)]\"\n              >\n                {copied ? (\n                  <Check\n                    className=\"size-4 text-[var(--oh-status-success)]\"\n                    aria-hidden\n                  />\n                ) : (\n                  <Copy className=\"size-4\" aria-hidden />\n                )}\n              </button>\n            </div>\n          </div>\n        ) : null}\n\n        {!updateAvailable ? (\n          <div className=\"flex flex-wrap gap-x-8 gap-y-3\">\n            <button\n              type=\"button\"\n              onClick={onCheckForUpdates}\n              className=\"inline-flex items-center gap-2 text-sm font-medium text-white hover:text-[var(--oh-text)] disabled:cursor-wait disabled:text-[var(--oh-muted)]\"\n              disabled={isChecking}\n            >\n              {t(I18nKey.SETTINGS$VERSION_CHECK_FOR_UPDATES)}\n              <RefreshCw\n                className={cn(\"size-4 shrink-0\", isChecking && \"animate-spin\")}\n                aria-hidden\n              />\n            </button>\n          </div>\n        ) : null}\n      </section>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/settings/agent-canvas-version-tile.cjs

@@ -0,0 +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("../../../node_modules/lucide-react/dist/esm/icons/circle-arrow-up.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/circle-check.cjs"),a=require("../../../utils/utils.cjs"),o=require("../../../api/agent-server-config.cjs"),s=require("../../../api/agent-server-compatibility.cjs"),c=require("../../../api/client-source.cjs"),l=require("../../../hooks/query/use-latest-agent-canvas-version.cjs"),u=require("./agent-canvas-version-modal.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("react/jsx-runtime");function p({className:e,hideWhenUpToDate:p=!1}){let{t:m}=t.useTranslation(`openhands`),[h,g]=d.default.useState(!1),_=o.getLockedCloudHost()!==null,v=l.useLatestAgentCanvasVersion({enabled:!_});if(_)return null;let y=c.AGENT_CANVAS_CLIENT_VERSION,b=v.data??null,x=(b===null?null:s.compareAgentServerVersions(b,y))===1;return p&&!x?null:(0,f.jsxs)(f.Fragment,{children:[(0,f.jsxs)(`button`,{type:`button`,"data-testid":`agent-canvas-version-tile`,onClick:()=>g(!0),"aria-label":m(n.I18nKey.SETTINGS$VERSION_TILE_ARIA_LABEL),className:a.cn(`flex w-full items-center gap-3 rounded-md border border-[var(--oh-border)] bg-base-secondary px-3 py-2 text-left hover:bg-[var(--oh-surface-raised)]`,e),children:[(0,f.jsxs)(`span`,{className:`min-w-0 flex-1`,children:[(0,f.jsx)(`span`,{className:`block truncate text-sm font-semibold leading-5 text-white`,children:m(x?n.I18nKey.SETTINGS$VERSION_TILE_NEW_VERSION:n.I18nKey.SETTINGS$VERSION_PRODUCT_NAME)}),(0,f.jsxs)(`span`,{className:`flex min-w-0 items-center gap-1.5 truncate text-xs leading-5`,children:[(0,f.jsx)(`span`,{className:`text-[var(--oh-muted)]`,children:m(n.I18nKey.SETTINGS$APP_UPDATE_VERSION_LABEL)}),(0,f.jsx)(`span`,{className:`truncate text-white`,children:x&&b?b:y})]})]}),x?(0,f.jsx)(r.CircleArrowUp,{className:`size-5 shrink-0 text-[#3B82F6]`,"aria-hidden":!0}):(0,f.jsx)(i.CircleCheck,{className:`size-5 shrink-0 text-[var(--oh-status-success)]`,"aria-hidden":!0})]}),h?(0,f.jsx)(u.AgentCanvasVersionModal,{installedVersion:y,latestVersion:b,updateAvailable:x,isChecking:v.isFetching,onCheckForUpdates:()=>{v.refetch()},onClose:()=>g(!1)}):null]})}exports.AgentCanvasVersionTile=p;
+//# sourceMappingURL=agent-canvas-version-tile.cjs.map

package/dist/components/features/settings/agent-canvas-version-tile.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-canvas-version-tile.cjs","names":[],"sources":["../../../../src/components/features/settings/agent-canvas-version-tile.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ArrowUpCircle, CheckCircle2 } from \"lucide-react\";\nimport { compareAgentServerVersions } from \"#/api/agent-server-compatibility\";\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { AGENT_CANVAS_CLIENT_VERSION } from \"#/api/client-source\";\nimport { useLatestAgentCanvasVersion } from \"#/hooks/query/use-latest-agent-canvas-version\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { AgentCanvasVersionModal } from \"./agent-canvas-version-modal\";\n\ninterface AgentCanvasVersionTileProps {\n  className?: string;\n  /** When true, the tile is omitted unless an update is available. */\n  hideWhenUpToDate?: boolean;\n}\n\n/**\n * Main-sidebar tile that opens the update-specific version modal.\n * Hidden when the install is already up to date; settings uses\n * AgentCanvasUpdateCard instead.\n */\nexport function AgentCanvasVersionTile({\n  className,\n  hideWhenUpToDate = false,\n}: AgentCanvasVersionTileProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [isModalOpen, setIsModalOpen] = React.useState(false);\n  const isLockedToCloud = getLockedCloudHost() !== null;\n  const latestVersionQuery = useLatestAgentCanvasVersion({\n    enabled: !isLockedToCloud,\n  });\n\n  if (isLockedToCloud) return null;\n\n  const installedVersion = AGENT_CANVAS_CLIENT_VERSION;\n  const latestVersion = latestVersionQuery.data ?? null;\n  const comparison =\n    latestVersion !== null\n      ? compareAgentServerVersions(latestVersion, installedVersion)\n      : null;\n  const updateAvailable = comparison === 1;\n\n  if (hideWhenUpToDate && !updateAvailable) return null;\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        data-testid=\"agent-canvas-version-tile\"\n        onClick={() => setIsModalOpen(true)}\n        aria-label={t(I18nKey.SETTINGS$VERSION_TILE_ARIA_LABEL)}\n        className={cn(\n          \"flex w-full items-center gap-3 rounded-md border border-[var(--oh-border)] bg-base-secondary px-3 py-2 text-left hover:bg-[var(--oh-surface-raised)]\",\n          className,\n        )}\n      >\n        <span className=\"min-w-0 flex-1\">\n          <span className=\"block truncate text-sm font-semibold leading-5 text-white\">\n            {updateAvailable\n              ? t(I18nKey.SETTINGS$VERSION_TILE_NEW_VERSION)\n              : t(I18nKey.SETTINGS$VERSION_PRODUCT_NAME)}\n          </span>\n          <span className=\"flex min-w-0 items-center gap-1.5 truncate text-xs leading-5\">\n            <span className=\"text-[var(--oh-muted)]\">\n              {t(I18nKey.SETTINGS$APP_UPDATE_VERSION_LABEL)}\n            </span>\n            <span className=\"truncate text-white\">\n              {updateAvailable && latestVersion\n                ? latestVersion\n                : installedVersion}\n            </span>\n          </span>\n        </span>\n        {updateAvailable ? (\n          <ArrowUpCircle\n            className=\"size-5 shrink-0 text-[#3B82F6]\"\n            aria-hidden\n          />\n        ) : (\n          <CheckCircle2\n            className=\"size-5 shrink-0 text-[var(--oh-status-success)]\"\n            aria-hidden\n          />\n        )}\n      </button>\n\n      {isModalOpen ? (\n        <AgentCanvasVersionModal\n          installedVersion={installedVersion}\n          latestVersion={latestVersion}\n          updateAvailable={updateAvailable}\n          isChecking={latestVersionQuery.isFetching}\n          onCheckForUpdates={() => {\n            void latestVersionQuery.refetch();\n          }}\n          onClose={() => setIsModalOpen(false)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"itBAsBA,SAAgB,EAAuB,CACrC,YACA,mBAAmB,IACW,CAC9B,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAC,EAAa,GAAkB,EAAA,QAAM,SAAS,EAAK,EACpD,EAAkB,EAAA,mBAAmB,IAAM,KAC3C,EAAqB,EAAA,4BAA4B,CACrD,QAAS,CAAC,CACZ,CAAC,EAED,GAAI,EAAiB,OAAO,KAE5B,IAAM,EAAmB,EAAA,4BACnB,EAAgB,EAAmB,MAAQ,KAK3C,GAHJ,IAAkB,KAEd,KADA,EAAA,2BAA2B,EAAe,CAAgB,KAEzB,EAIvC,OAFI,GAAoB,CAAC,EAAwB,MAG/C,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,cAAY,4BACZ,YAAe,EAAe,EAAI,EAClC,aAAY,EAAE,EAAA,QAAQ,gCAAgC,EACtD,UAAW,EAAA,GACT,uJACA,CACF,WARF,EAUE,EAAA,EAAA,MAAC,OAAD,CAAM,UAAU,0BAAhB,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,qEAEV,EADH,EACK,EAAA,QAAQ,kCACR,EAAA,QAAQ,6BAA6B,CACvC,CAAA,GACN,EAAA,EAAA,MAAC,OAAD,CAAM,UAAU,wEAAhB,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,kCACb,EAAE,EAAA,QAAQ,iCAAiC,CACxC,CAAA,GACN,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,+BACb,GAAmB,EAChB,EACA,CACA,CAAA,CACF,GACF,IACL,GACC,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,UAAU,iCACV,cAAA,EACD,CAAA,GAED,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,UAAU,kDACV,cAAA,EACD,CAAA,CAEG,IAEP,GACC,EAAA,EAAA,KAAC,EAAA,wBAAD,CACoB,mBACH,gBACE,kBACjB,WAAY,EAAmB,WAC/B,sBAAyB,CACvB,EAAwB,QAAQ,CAClC,EACA,YAAe,EAAe,EAAK,CACpC,CAAA,EACC,IACJ,CAAA,CAAA,CAEN"}

package/dist/components/features/settings/agent-canvas-version-tile.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface AgentCanvasVersionTileProps {
+    className?: string;
+    /** When true, the tile is omitted unless an update is available. */
+    hideWhenUpToDate?: boolean;
+}
+/**
+ * Main-sidebar tile that opens the update-specific version modal.
+ * Hidden when the install is already up to date; settings uses
+ * AgentCanvasUpdateCard instead.
+ */
+export declare function AgentCanvasVersionTile({ className, hideWhenUpToDate, }: AgentCanvasVersionTileProps): React.JSX.Element | null;
+export {};

package/dist/components/features/settings/agent-canvas-version-tile.js

@@ -0,0 +1,60 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { CircleArrowUp as n } from "../../../node_modules/lucide-react/dist/esm/icons/circle-arrow-up.js";
+import { CircleCheck as r } from "../../../node_modules/lucide-react/dist/esm/icons/circle-check.js";
+import { cn as i } from "../../../utils/utils.js";
+import { getLockedCloudHost as a } from "../../../api/agent-server-config.js";
+import { compareAgentServerVersions as o } from "../../../api/agent-server-compatibility.js";
+import { AGENT_CANVAS_CLIENT_VERSION as s } from "../../../api/client-source.js";
+import { useLatestAgentCanvasVersion as c } from "../../../hooks/query/use-latest-agent-canvas-version.js";
+import { AgentCanvasVersionModal as l } from "./agent-canvas-version-modal.js";
+import u from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/features/settings/agent-canvas-version-tile.tsx
+function m({ className: m, hideWhenUpToDate: h = !1 }) {
+	let { t: g } = e("openhands"), [_, v] = u.useState(!1), y = a() !== null, b = c({ enabled: !y });
+	if (y) return null;
+	let x = s, S = b.data ?? null, C = (S === null ? null : o(S, x)) === 1;
+	return h && !C ? null : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("button", {
+		type: "button",
+		"data-testid": "agent-canvas-version-tile",
+		onClick: () => v(!0),
+		"aria-label": g(t.SETTINGS$VERSION_TILE_ARIA_LABEL),
+		className: i("flex w-full items-center gap-3 rounded-md border border-[var(--oh-border)] bg-base-secondary px-3 py-2 text-left hover:bg-[var(--oh-surface-raised)]", m),
+		children: [/* @__PURE__ */ p("span", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ f("span", {
+				className: "block truncate text-sm font-semibold leading-5 text-white",
+				children: g(C ? t.SETTINGS$VERSION_TILE_NEW_VERSION : t.SETTINGS$VERSION_PRODUCT_NAME)
+			}), /* @__PURE__ */ p("span", {
+				className: "flex min-w-0 items-center gap-1.5 truncate text-xs leading-5",
+				children: [/* @__PURE__ */ f("span", {
+					className: "text-[var(--oh-muted)]",
+					children: g(t.SETTINGS$APP_UPDATE_VERSION_LABEL)
+				}), /* @__PURE__ */ f("span", {
+					className: "truncate text-white",
+					children: C && S ? S : x
+				})]
+			})]
+		}), C ? /* @__PURE__ */ f(n, {
+			className: "size-5 shrink-0 text-[#3B82F6]",
+			"aria-hidden": !0
+		}) : /* @__PURE__ */ f(r, {
+			className: "size-5 shrink-0 text-[var(--oh-status-success)]",
+			"aria-hidden": !0
+		})]
+	}), _ ? /* @__PURE__ */ f(l, {
+		installedVersion: x,
+		latestVersion: S,
+		updateAvailable: C,
+		isChecking: b.isFetching,
+		onCheckForUpdates: () => {
+			b.refetch();
+		},
+		onClose: () => v(!1)
+	}) : null] });
+}
+//#endregion
+export { m as AgentCanvasVersionTile };
+
+//# sourceMappingURL=agent-canvas-version-tile.js.map

package/dist/components/features/settings/agent-canvas-version-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-canvas-version-tile.js","names":[],"sources":["../../../../src/components/features/settings/agent-canvas-version-tile.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ArrowUpCircle, CheckCircle2 } from \"lucide-react\";\nimport { compareAgentServerVersions } from \"#/api/agent-server-compatibility\";\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { AGENT_CANVAS_CLIENT_VERSION } from \"#/api/client-source\";\nimport { useLatestAgentCanvasVersion } from \"#/hooks/query/use-latest-agent-canvas-version\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { AgentCanvasVersionModal } from \"./agent-canvas-version-modal\";\n\ninterface AgentCanvasVersionTileProps {\n  className?: string;\n  /** When true, the tile is omitted unless an update is available. */\n  hideWhenUpToDate?: boolean;\n}\n\n/**\n * Main-sidebar tile that opens the update-specific version modal.\n * Hidden when the install is already up to date; settings uses\n * AgentCanvasUpdateCard instead.\n */\nexport function AgentCanvasVersionTile({\n  className,\n  hideWhenUpToDate = false,\n}: AgentCanvasVersionTileProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [isModalOpen, setIsModalOpen] = React.useState(false);\n  const isLockedToCloud = getLockedCloudHost() !== null;\n  const latestVersionQuery = useLatestAgentCanvasVersion({\n    enabled: !isLockedToCloud,\n  });\n\n  if (isLockedToCloud) return null;\n\n  const installedVersion = AGENT_CANVAS_CLIENT_VERSION;\n  const latestVersion = latestVersionQuery.data ?? null;\n  const comparison =\n    latestVersion !== null\n      ? compareAgentServerVersions(latestVersion, installedVersion)\n      : null;\n  const updateAvailable = comparison === 1;\n\n  if (hideWhenUpToDate && !updateAvailable) return null;\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        data-testid=\"agent-canvas-version-tile\"\n        onClick={() => setIsModalOpen(true)}\n        aria-label={t(I18nKey.SETTINGS$VERSION_TILE_ARIA_LABEL)}\n        className={cn(\n          \"flex w-full items-center gap-3 rounded-md border border-[var(--oh-border)] bg-base-secondary px-3 py-2 text-left hover:bg-[var(--oh-surface-raised)]\",\n          className,\n        )}\n      >\n        <span className=\"min-w-0 flex-1\">\n          <span className=\"block truncate text-sm font-semibold leading-5 text-white\">\n            {updateAvailable\n              ? t(I18nKey.SETTINGS$VERSION_TILE_NEW_VERSION)\n              : t(I18nKey.SETTINGS$VERSION_PRODUCT_NAME)}\n          </span>\n          <span className=\"flex min-w-0 items-center gap-1.5 truncate text-xs leading-5\">\n            <span className=\"text-[var(--oh-muted)]\">\n              {t(I18nKey.SETTINGS$APP_UPDATE_VERSION_LABEL)}\n            </span>\n            <span className=\"truncate text-white\">\n              {updateAvailable && latestVersion\n                ? latestVersion\n                : installedVersion}\n            </span>\n          </span>\n        </span>\n        {updateAvailable ? (\n          <ArrowUpCircle\n            className=\"size-5 shrink-0 text-[#3B82F6]\"\n            aria-hidden\n          />\n        ) : (\n          <CheckCircle2\n            className=\"size-5 shrink-0 text-[var(--oh-status-success)]\"\n            aria-hidden\n          />\n        )}\n      </button>\n\n      {isModalOpen ? (\n        <AgentCanvasVersionModal\n          installedVersion={installedVersion}\n          latestVersion={latestVersion}\n          updateAvailable={updateAvailable}\n          isChecking={latestVersionQuery.isFetching}\n          onCheckForUpdates={() => {\n            void latestVersionQuery.refetch();\n          }}\n          onClose={() => setIsModalOpen(false)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAsBA,SAAgB,EAAuB,EACrC,cACA,sBAAmB,MACW;CAC9B,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,CAAC,GAAa,KAAkB,EAAM,SAAS,EAAK,GACpD,IAAkB,EAAmB,MAAM,MAC3C,IAAqB,EAA4B,EACrD,SAAS,CAAC,EACZ,CAAC;CAED,IAAI,GAAiB,OAAO;CAE5B,IAAM,IAAmB,GACnB,IAAgB,EAAmB,QAAQ,MAK3C,KAHJ,MAAkB,OAEd,OADA,EAA2B,GAAe,CAAgB,OAEzB;CAIvC,OAFI,KAAoB,CAAC,IAAwB,OAG/C,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,UAAD;EACE,MAAK;EACL,eAAY;EACZ,eAAe,EAAe,EAAI;EAClC,cAAY,EAAE,EAAQ,gCAAgC;EACtD,WAAW,EACT,wJACA,CACF;YARF,CAUE,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACE,kBAAC,QAAD;IAAM,WAAU;cAEV,EADH,IACK,EAAQ,oCACR,EAAQ,6BAA6B;GACvC,CAAA,GACN,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,QAAD;KAAM,WAAU;eACb,EAAE,EAAQ,iCAAiC;IACxC,CAAA,GACN,kBAAC,QAAD;KAAM,WAAU;eACb,KAAmB,IAChB,IACA;IACA,CAAA,CACF;KACF;MACL,IACC,kBAAC,GAAD;GACE,WAAU;GACV,eAAA;EACD,CAAA,IAED,kBAAC,GAAD;GACE,WAAU;GACV,eAAA;EACD,CAAA,CAEG;KAEP,IACC,kBAAC,GAAD;EACoB;EACH;EACE;EACjB,YAAY,EAAmB;EAC/B,yBAAyB;GACvB,EAAwB,QAAQ;EAClC;EACA,eAAe,EAAe,EAAK;CACpC,CAAA,IACC,IACJ,EAAA,CAAA;AAEN"}

package/dist/components/features/settings/agent-profiles/agent-profile-actions-menu.d.ts

@@ -12,5 +12,5 @@ interface AgentProfileActionsMenuProps {
      */
     anchorRef?: React.RefObject<HTMLElement | null>;
 }
-export declare function AgentProfileActionsMenu({ onEdit, onSetActive, onDelete, isActive, isActivating, onClose, anchorRef, }: AgentProfileActionsMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AgentProfileActionsMenu({ onEdit, onSetActive, onDelete, isActive, isActivating, onClose, anchorRef, }: AgentProfileActionsMenuProps): import("react").JSX.Element | null;
 export {};

package/dist/components/features/settings/agent-profiles/agent-profile-row.d.ts

@@ -9,5 +9,5 @@ interface AgentProfileRowProps {
     onDelete: (profile: AgentProfileSummary) => void;
     isActivating: boolean;
 }
-export declare function AgentProfileRow({ profile, isActive, canManage, onActivate, onEdit, onDelete, isActivating, }: AgentProfileRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentProfileRow({ profile, isActive, canManage, onActivate, onEdit, onDelete, isActivating, }: AgentProfileRowProps): import("react").JSX.Element;
 export {};

package/dist/components/features/settings/agent-profiles/agent-profiles-body.d.ts

@@ -11,5 +11,5 @@ interface AgentProfilesBodyProps {
     onDelete: (profile: AgentProfileSummary) => void;
     isActivating: boolean;
 }
-export declare function AgentProfilesBody({ isLoading, loadError, profiles, activeId, canManage, onActivate, onEdit, onDelete, isActivating, }: AgentProfilesBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentProfilesBody({ isLoading, loadError, profiles, activeId, canManage, onActivate, onEdit, onDelete, isActivating, }: AgentProfilesBodyProps): import("react").JSX.Element;
 export {};

package/dist/components/features/settings/agent-profiles/agent-profiles-local-view.d.ts

@@ -4,4 +4,4 @@
  * settings form (embedded) plus a profile name and — for OpenHands profiles —
  * an LLM-profile picker. Available on local backends only.
  */
-export declare function AgentProfilesLocalView(): import("react/jsx-runtime").JSX.Element;
+export declare function AgentProfilesLocalView(): import("react").JSX.Element;

package/dist/components/features/settings/agent-profiles/agent-profiles-manager.d.ts

@@ -3,5 +3,5 @@ interface AgentProfilesManagerProps {
     onAddProfile?: () => void;
     onEditProfile?: (profile: AgentProfileSummary) => void;
 }
-export declare function AgentProfilesManager({ onAddProfile, onEditProfile, }: AgentProfilesManagerProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentProfilesManager({ onAddProfile, onEditProfile, }: AgentProfilesManagerProps): import("react").JSX.Element;
 export {};

package/dist/components/features/settings/agent-profiles/delete-agent-profile-modal.d.ts

@@ -3,5 +3,5 @@ interface DeleteAgentProfileModalProps {
     profile: AgentProfileSummary | null;
     onClose: () => void;
 }
-export declare function DeleteAgentProfileModal({ profile, onClose, }: DeleteAgentProfileModalProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function DeleteAgentProfileModal({ profile, onClose, }: DeleteAgentProfileModalProps): import("react").JSX.Element | null;
 export {};

package/dist/components/features/settings/agent-server-onboarding.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 type AgentServerConnectionFormVariant = "settings" | "onboarding";
 interface AgentServerConnectionFormProps {
     className?: string;
@@ -5,5 +6,5 @@ interface AgentServerConnectionFormProps {
     variant?: AgentServerConnectionFormVariant;
     showSectionHeader?: boolean;
 }
-export declare function AgentServerConnectionForm({ className, formClassName, variant, showSectionHeader, }: AgentServerConnectionFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentServerConnectionForm({ className, formClassName, variant, showSectionHeader, }: AgentServerConnectionFormProps): React.JSX.Element;
 export {};

package/dist/components/features/settings/api-key-modal-base.d.ts

@@ -11,5 +11,5 @@ interface ApiKeyModalBaseProps {
     /** Ref to an element that should receive initial focus when modal opens */
     initialFocusRef?: React.RefObject<HTMLElement | null>;
 }
-export declare function ApiKeyModalBase({ isOpen, title, width, children, footer, onClose, initialFocusRef, }: ApiKeyModalBaseProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ApiKeyModalBase({ isOpen, title, width, children, footer, onClose, initialFocusRef, }: ApiKeyModalBaseProps): React.JSX.Element | null;
 export {};

package/dist/components/features/settings/app-settings/app-settings-inputs-skeleton.d.ts

@@ -1 +1 @@
-export declare function AppSettingsInputsSkeleton(): import("react/jsx-runtime").JSX.Element;
+export declare function AppSettingsInputsSkeleton(): import("react").JSX.Element;

package/dist/components/features/settings/app-settings/language-input.d.ts

@@ -3,5 +3,5 @@ interface LanguageInputProps {
     onChange: (value: string) => void;
     defaultKey: string;
 }
-export declare function LanguageInput({ defaultKey, onChange, name, }: LanguageInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function LanguageInput({ defaultKey, onChange, name, }: LanguageInputProps): import("react").JSX.Element;
 export {};

package/dist/components/features/settings/app-settings/theme-input.d.ts

@@ -1 +1,2 @@
-export declare function ThemeInput(): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+export declare function ThemeInput(): React.JSX.Element;

package/dist/components/features/settings/backend-synced-settings-badge.d.ts

@@ -1 +1 @@
-export declare function BackendSyncedSettingsBadge(): import("react/jsx-runtime").JSX.Element;
+export declare function BackendSyncedSettingsBadge(): import("react").JSX.Element;

package/dist/components/features/settings/banner-message.d.ts

@@ -2,5 +2,5 @@ interface BannerMessageProps {
     message: string;
     className?: string;
 }
-export declare function BannerMessage({ message, className }: BannerMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function BannerMessage({ message, className }: BannerMessageProps): import("react").JSX.Element;
 export {};

package/dist/components/features/settings/cloud-settings-link.d.ts

@@ -2,4 +2,4 @@
  * Renders only for cloud backends — local backends have no equivalent
  * hosted settings page.
  */
-export declare function CloudSettingsLink(): import("react/jsx-runtime").JSX.Element | null;
+export declare function CloudSettingsLink(): import("react").JSX.Element | null;

package/dist/components/features/settings/input-skeleton.d.ts

@@ -1 +1 @@
-export declare function InputSkeleton(): import("react/jsx-runtime").JSX.Element;
+export declare function InputSkeleton(): import("react").JSX.Element;

package/dist/components/features/settings/integrations-settings-link.d.ts

@@ -2,4 +2,4 @@
  * Renders only for cloud backends — local backends have no equivalent
  * hosted integrations settings page.
  */
-export declare function IntegrationsSettingsLink(): import("react/jsx-runtime").JSX.Element | null;
+export declare function IntegrationsSettingsLink(): import("react").JSX.Element | null;

package/dist/components/features/settings/key-status-icon.d.ts

@@ -2,5 +2,5 @@ interface KeyStatusIconProps {
     testId?: string;
     isSet: boolean;
 }
-export declare function KeyStatusIcon({ testId, isSet }: KeyStatusIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function KeyStatusIcon({ testId, isSet }: KeyStatusIconProps): import("react").JSX.Element;
 export {};

package/dist/components/features/settings/llm-profiles/delete-profile-modal.d.ts

@@ -3,5 +3,5 @@ interface DeleteProfileModalProps {
     profile: ProfileInfo | null;
     onClose: () => void;
 }
-export declare function DeleteProfileModal({ profile, onClose, }: DeleteProfileModalProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function DeleteProfileModal({ profile, onClose, }: DeleteProfileModalProps): import("react").JSX.Element | null;
 export {};

package/dist/components/features/settings/llm-profiles/llm-profiles-manager.d.ts

@@ -3,5 +3,5 @@ interface LlmProfilesManagerProps {
     onAddProfile?: () => void;
     onEditProfile?: (profile: ProfileInfo) => void;
 }
-export declare function LlmProfilesManager({ onAddProfile, onEditProfile, }: LlmProfilesManagerProps): import("react/jsx-runtime").JSX.Element;
+export declare function LlmProfilesManager({ onAddProfile, onEditProfile, }: LlmProfilesManagerProps): import("react").JSX.Element;
 export {};

package/dist/components/features/settings/llm-profiles/llm-settings-local-view.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 export declare function shouldReapplyProfileAfterSave({ activeProfileName, originalName, savedName, }: {
     activeProfileName: string | null | undefined;
     originalName: string | null | undefined;
@@ -12,4 +13,4 @@ export declare function shouldReapplyProfileAfterSave({ activeProfileName, origi
  * separate hooks (e.g., useProfileForm, useProfileSave) for better testability.
  * See PR review feedback for details.
  */
-export declare function LlmSettingsLocalView(): import("react/jsx-runtime").JSX.Element;
+export declare function LlmSettingsLocalView(): React.JSX.Element;

package/dist/components/features/settings/llm-profiles/profile-actions-menu-item.d.ts

@@ -8,5 +8,5 @@ interface MenuItemProps {
     disabled?: boolean;
     testId: string;
 }
-export declare function MenuItem({ index, icon, label, onClick, onKeyDown, menuItemsRef, disabled, testId, }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuItem({ index, icon, label, onClick, onKeyDown, menuItemsRef, disabled, testId, }: MenuItemProps): import("react").JSX.Element;
 export {};

package/dist/components/features/settings/llm-profiles/profile-actions-menu.d.ts

@@ -15,5 +15,5 @@ interface ProfileActionsMenuProps {
      */
     anchorRef?: React.RefObject<HTMLElement | null>;
 }
-export declare function ProfileActionsMenu({ onEdit, onRename, onDuplicate, onSetActive, onDelete, isActive, isActivating, onClose, anchorRef, }: ProfileActionsMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ProfileActionsMenu({ onEdit, onRename, onDuplicate, onSetActive, onDelete, isActive, isActivating, onClose, anchorRef, }: ProfileActionsMenuProps): import("react").JSX.Element | null;
 export {};

package/dist/components/features/settings/llm-profiles/profile-row.d.ts

@@ -11,5 +11,5 @@ interface ProfileRowProps {
     onDelete: (profile: ProfileInfo) => void;
     isActivating: boolean;
 }
-export declare function ProfileRow({ profile, isActive, canManage, onActivate, onEdit, onRename, onDuplicate, onDelete, isActivating, }: ProfileRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProfileRow({ profile, isActive, canManage, onActivate, onEdit, onRename, onDuplicate, onDelete, isActivating, }: ProfileRowProps): import("react").JSX.Element;
 export {};

package/dist/components/features/settings/llm-profiles/profiles-body.d.ts

@@ -13,5 +13,5 @@ interface ProfilesBodyProps {
     onDelete: (profile: ProfileInfo) => void;
     isActivating: boolean;
 }
-export declare function ProfilesBody({ isLoading, loadError, profiles, active, canManage, onActivate, onEdit, onRename, onDuplicate, onDelete, isActivating, }: ProfilesBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProfilesBody({ isLoading, loadError, profiles, active, canManage, onActivate, onEdit, onRename, onDuplicate, onDelete, isActivating, }: ProfilesBodyProps): import("react").JSX.Element;
 export {};

package/dist/components/features/settings/llm-profiles/rename-profile-modal.d.ts

@@ -3,5 +3,5 @@ interface RenameProfileModalProps {
     profile: ProfileInfo | null;
     onClose: () => void;
 }
-export declare function RenameProfileModal({ profile, onClose, }: RenameProfileModalProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function RenameProfileModal({ profile, onClose, }: RenameProfileModalProps): import("react").JSX.Element | null;
 export {};

package/dist/components/features/settings/llm-settings/llm-settings-inputs-skeleton.d.ts

@@ -1 +1 @@
-export declare function LlmSettingsInputsSkeleton(): import("react/jsx-runtime").JSX.Element;
+export declare function LlmSettingsInputsSkeleton(): import("react").JSX.Element;

package/dist/components/features/settings/llm-settings/openai-subscription-auth-card.d.ts

@@ -1,5 +1,6 @@
+import React from "react";
 interface OpenAISubscriptionAuthCardProps {
     isDisabled?: boolean;
 }
-export declare function OpenAISubscriptionAuthCard({ isDisabled, }: OpenAISubscriptionAuthCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function OpenAISubscriptionAuthCard({ isDisabled, }: OpenAISubscriptionAuthCardProps): React.JSX.Element;
 export {};

package/dist/components/features/settings/mcp-settings/mcp-server-form.cjs

@@ -1,7 +1,7 @@
 const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../../i18n/declaration.cjs"),r=require("../../../../node_modules/lucide-react/dist/esm/icons/trash-2.cjs"),i=require("../../../../utils/utils.cjs"),a=require("../../../../utils/mcp-server-name.cjs"),o=require("../../../../utils/form-control-classes.cjs"),s=require("../brand-button.cjs"),c=require("../optional-tag.cjs"),l=require("../settings-input.cjs"),u=require("../settings-dropdown-input.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("react/jsx-runtime");function p({mode:e,server:p,existingServers:m,onSubmit:h,onCancel:g,onDelete:_,isActionDisabled:v=!1,onTest:y,isTestPending:b=!1,testMessage:x=null}){let{t:S}=t.useTranslation(`openhands`),[C,w]=d.default.useState(p?.type||`sse`),[T,E]=d.default.useState(()=>p?.auth?.strategy===`oauth2`?`oauth2`:p?.auth?.strategy===`header`?`header`:p?.auth?.strategy===`bearer`||p?.auth?.strategy===`api_key`?`bearer`:`none`),[D,O]=d.default.useState(()=>p?.auth?.strategy===`oauth2`?p.auth.authentication?.client_auth_method??`auto`:`auto`),[k,A]=d.default.useState(null),j=d.default.useRef(null),M=[{key:`sse`,label:S(n.I18nKey.SETTINGS$MCP_SERVER_TYPE_SSE)},{key:`stdio`,label:S(n.I18nKey.SETTINGS$MCP_SERVER_TYPE_STDIO)},{key:`shttp`,label:S(n.I18nKey.SETTINGS$MCP_SERVER_TYPE_SHTTP)}],N=[{key:`none`,label:S(n.I18nKey.SETTINGS$MCP_AUTH_MODE_NONE)},{key:`bearer`,label:S(n.I18nKey.SETTINGS$MCP_AUTH_MODE_BEARER)},{key:`header`,label:S(n.I18nKey.SETTINGS$MCP_AUTH_MODE_HEADER)},{key:`oauth2`,label:S(n.I18nKey.SETTINGS$MCP_AUTH_MODE_OAUTH)}],P=[{key:`auto`,label:S(n.I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH_AUTO)},{key:`none`,label:S(n.I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH_NONE)},{key:`client_secret_post`,label:S(n.I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH_SECRET_POST)},{key:`client_secret_basic`,label:S(n.I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH_SECRET_BASIC)},{key:`private_key_jwt`,label:S(n.I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH_PRIVATE_KEY_JWT)}],F=e=>{if(!e)return S(n.I18nKey.SETTINGS$MCP_ERROR_URL_REQUIRED);try{let t=new URL(e);if(![`http:`,`https:`].includes(t.protocol))return S(n.I18nKey.SETTINGS$MCP_ERROR_URL_INVALID_PROTOCOL)}catch{return S(n.I18nKey.SETTINGS$MCP_ERROR_URL_INVALID)}return null},I=e=>e?a.isValidMcpServerName(e)?null:S(n.I18nKey.SETTINGS$MCP_ERROR_NAME_INVALID):S(n.I18nKey.SETTINGS$MCP_ERROR_NAME_REQUIRED),L=t=>!m||!(e===`add`||e===`edit`&&p?.name!==t)?null:m.filter(e=>e.type===`stdio`).map(e=>e.name).filter(Boolean).includes(t)?S(n.I18nKey.SETTINGS$MCP_ERROR_NAME_DUPLICATE):null,R=e=>e?e.includes(` `)?S(n.I18nKey.SETTINGS$MCP_ERROR_COMMAND_NO_SPACES):null:S(n.I18nKey.SETTINGS$MCP_ERROR_COMMAND_REQUIRED),z=t=>{if(!m)return null;let r=p?.url;return(e===`add`||e===`edit`&&r!==t)&&m.some(e=>(e.type===`sse`||e.type===`shttp`)&&e.url===t)?S(n.I18nKey.SETTINGS$MCP_ERROR_URL_DUPLICATE):null},B=e=>{if(!e.trim())return null;let t=e.split(`
 `);for(let e=0;e<t.length;e+=1){let r=t[e].trim();if(r){let e=r.indexOf(`=`);if(e===-1||!r.substring(0,e).trim())return S(n.I18nKey.SETTINGS$MCP_ERROR_ENV_INVALID_FORMAT)}}return null},V=e=>{if(T===`header`){let t=e.get(`headers`)?.toString()||``;return t.trim()?B(t):S(n.I18nKey.SETTINGS$MCP_ERROR_HEADER_REQUIRED)}if(T===`oauth2`){let t=e.get(`oauth_client_id`)?.toString().trim();if(e.get(`oauth_client_secret`)?.toString().trim()&&!t)return S(n.I18nKey.SETTINGS$MCP_ERROR_OAUTH_SECRET_REQUIRES_ID)}return null},H=e=>{if(!e.trim())return null;let t=parseInt(e.trim(),10);return Number.isNaN(t)?S(n.I18nKey.SETTINGS$MCP_ERROR_TIMEOUT_INVALID_NUMBER):t<=0?S(n.I18nKey.SETTINGS$MCP_ERROR_TIMEOUT_POSITIVE):t>3600?S(n.I18nKey.SETTINGS$MCP_ERROR_TIMEOUT_MAX_EXCEEDED):null},U=e=>{let t=e.get(`name`)?.toString().trim()||``,n=e.get(`command`)?.toString().trim()||``,r=e.get(`env`)?.toString()||``;return I(t)||L(t)||R(n)||B(r)||null},W=e=>{if(C===`sse`||C===`shttp`){let t=e.get(`url`)?.toString().trim()||``,r=F(t);if(r)return r;let i=z(t);if(i)return i;let o=e.get(`name`)?.toString().trim()||``;if(o&&!a.isValidMcpServerName(o))return S(n.I18nKey.SETTINGS$MCP_ERROR_NAME_INVALID);if(C===`shttp`){let t=H(e.get(`timeout`)?.toString()||``);if(t)return t}return V(e)}return C===`stdio`?U(e):null},G=e=>{let t={},n=e.trim();if(!n)return t;for(let e of n.split(`
 `)){let n=e.trim(),r=n.indexOf(`=`),i=r>=0?n.substring(0,r).trim():``;n&&r!==-1&&i&&(t[i]=n.substring(r+1).trim())}return t},K=e=>e?Object.entries(e).map(([e,t])=>`${e}=${t}`).join(`
-`):``,q=e=>e?.strategy===`bearer`||e?.strategy===`api_key`?e.value??``:``,J=e=>e?.strategy===`header`?K(e.headers):``,Y=p?.auth?.strategy===`oauth2`?p.auth.authentication:void 0,X=p?.auth?.strategy===`oauth2`?p.auth.state:void 0,Z=e=>{if(T===`none`)return;if(T===`bearer`){let t=e.get(`api_key`)?.toString().trim();return t?p?.auth?.strategy===`api_key`?{...p.auth,value:t}:{strategy:`bearer`,value:t}:void 0}if(T===`header`)return{strategy:`header`,headers:G(e.get(`headers`)?.toString()||``)};let t=e.get(`oauth_scopes`)?.toString().trim(),n=e.get(`oauth_client_id`)?.toString().trim(),r=e.get(`oauth_client_secret`)?.toString().trim();return{strategy:`oauth2`,authentication:{type:`oauth`,...D!==`auto`&&{client_auth_method:D},...t&&{scopes:t},...n&&{client_id:n},...r&&{client_secret:r}},...X&&{state:X}}},Q=e=>{let t={id:p?.id||`${C}-${Date.now()}`,type:C,...p?.enabled===!1&&{enabled:!1}};if(C===`sse`||C===`shttp`){let n=e.get(`name`)?.toString().trim(),r=e.get(`url`)?.toString().trim(),i=e.get(`timeout`)?.toString().trim(),a=Z(e),o={...t,...n&&{name:n},url:r,...a&&{auth:a}};if(C===`shttp`&&i){let e=parseInt(i,10);Number.isNaN(e)||(o.timeout=e)}return o}let n=e.get(`name`)?.toString().trim(),r=e.get(`command`)?.toString().trim(),i=e.get(`args`)?.toString().trim(),a=e.get(`env`)?.toString().trim(),o=i?i.split(`
+`):``,q=e=>e?.strategy===`bearer`||e?.strategy===`api_key`?e.value??``:``,J=e=>e?.strategy===`header`?K(e.headers):``,Y=p?.auth?.strategy===`oauth2`?p.auth.authentication:void 0,X=p?.auth?.strategy===`oauth2`?p.auth.state:void 0,Z=e=>{if(T===`none`)return;if(T===`bearer`){let t=e.get(`api_key`)?.toString().trim();return t?p?.auth?.strategy===`api_key`?{...p.auth,value:t}:{strategy:`bearer`,value:t}:void 0}if(T===`header`)return{strategy:`header`,headers:G(e.get(`headers`)?.toString()||``)};let t=e.get(`oauth_scopes`)?.toString().trim(),n=e.get(`oauth_client_id`)?.toString().trim(),r=e.get(`oauth_client_secret`)?.toString().trim();return{strategy:`oauth2`,authentication:{type:`oauth`,...D!==`auto`&&{client_auth_method:D},...t&&{scopes:t},...n&&{client_id:n},...r&&{client_secret:r}},...X&&{state:X}}},Q=e=>{let t={id:p?.id||``,type:C,...p?.enabled===!1&&{enabled:!1}};if(C===`sse`||C===`shttp`){let n=e.get(`name`)?.toString().trim(),r=e.get(`url`)?.toString().trim(),i=e.get(`timeout`)?.toString().trim(),a=Z(e),o={...t,...n&&{name:n},url:r,...p?.headers&&{headers:p.headers},...a&&{auth:a}};if(C===`shttp`&&i){let e=parseInt(i,10);Number.isNaN(e)||(o.timeout=e)}return o}let n=e.get(`name`)?.toString().trim(),r=e.get(`command`)?.toString().trim(),i=e.get(`args`)?.toString().trim(),a=e.get(`env`)?.toString().trim(),o=i?i.split(`
 `).map(e=>e.trim()).filter(Boolean):[],s=G(a||``);return{...t,name:n,command:r,...o.length>0&&{args:o},...Object.keys(s).length>0&&{env:s}}};return(0,f.jsxs)(`form`,{ref:j,"data-testid":e===`add`?`add-mcp-server-form`:`edit-mcp-server-form`,onSubmit:e=>{e.preventDefault(),A(null);let t=new FormData(e.currentTarget),n=W(t);if(n){A(n);return}h(Q(t))},className:`flex flex-col items-start gap-6`,noValidate:!0,children:[e===`add`&&(0,f.jsx)(u.SettingsDropdownInput,{testId:`server-type-dropdown`,name:`server-type`,label:S(n.I18nKey.SETTINGS$MCP_SERVER_TYPE),items:M,selectedKey:C,onSelectionChange:e=>w(e),onInputChange:()=>{},isClearable:!1,allowsCustomValue:!1,required:!0,wrapperClassName:`w-full min-w-0`}),k&&(0,f.jsx)(`p`,{className:`text-red-500 text-sm`,children:k}),(C===`sse`||C===`shttp`)&&(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(l.SettingsInput,{testId:`server-name-input`,name:`name`,type:`text`,label:S(n.I18nKey.SETTINGS$MCP_SERVER_NAME),className:`w-full min-w-0`,showOptionalTag:!0,defaultValue:p?.name||``,placeholder:`my_search_server`,pattern:a.MCP_SERVER_NAME_PATTERN.source}),(0,f.jsx)(l.SettingsInput,{testId:`url-input`,name:`url`,type:`url`,label:S(n.I18nKey.SETTINGS$MCP_URL),className:`w-full min-w-0`,required:!0,defaultValue:p?.url||``,placeholder:`https://api.example.com`}),(0,f.jsx)(u.SettingsDropdownInput,{testId:`auth-mode-dropdown`,name:`auth-mode`,label:S(n.I18nKey.SETTINGS$MCP_AUTHENTICATION),items:N,selectedKey:T,onSelectionChange:e=>E(e),onInputChange:()=>{},isClearable:!1,allowsCustomValue:!1,wrapperClassName:`w-full min-w-0`}),T===`bearer`&&(0,f.jsx)(l.SettingsInput,{testId:`api-key-input`,name:`api_key`,type:`password`,label:S(n.I18nKey.SETTINGS$MCP_API_KEY),className:`w-full min-w-0`,required:!0,defaultValue:q(p?.auth),placeholder:S(n.I18nKey.SETTINGS$MCP_API_KEY_PLACEHOLDER)}),T===`header`&&(0,f.jsxs)(`label`,{className:`flex flex-col gap-2.5 w-full min-w-0`,children:[(0,f.jsx)(`span`,{className:`text-sm`,children:S(n.I18nKey.SETTINGS$MCP_HEADERS)}),(0,f.jsx)(`textarea`,{"data-testid":`headers-input`,name:`headers`,rows:4,defaultValue:J(p?.auth),placeholder:S(n.I18nKey.SETTINGS$MCP_HEADERS_PLACEHOLDER),className:i.cn(o.formControlMultilineFieldClassName,`resize-none placeholder:italic`,`disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]`)})]}),T===`oauth2`&&(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(u.SettingsDropdownInput,{testId:`oauth-client-auth-method-dropdown`,name:`oauth_client_auth_method`,label:S(n.I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH),items:P,selectedKey:D,onSelectionChange:e=>O(e),onInputChange:()=>{},isClearable:!1,allowsCustomValue:!1,wrapperClassName:`w-full min-w-0`}),(0,f.jsx)(l.SettingsInput,{testId:`oauth-client-id-input`,name:`oauth_client_id`,type:`text`,label:S(n.I18nKey.SETTINGS$MCP_OAUTH_CLIENT_ID),className:`w-full min-w-0`,showOptionalTag:!0,defaultValue:Y?.client_id||``,placeholder:S(n.I18nKey.SETTINGS$MCP_OAUTH_CLIENT_ID_PLACEHOLDER)}),(0,f.jsx)(l.SettingsInput,{testId:`oauth-client-secret-input`,name:`oauth_client_secret`,type:`password`,label:S(n.I18nKey.SETTINGS$MCP_OAUTH_CLIENT_SECRET),className:`w-full min-w-0`,showOptionalTag:!0,defaultValue:Y?.client_secret||``,placeholder:S(n.I18nKey.SETTINGS$MCP_OAUTH_CLIENT_SECRET_PLACEHOLDER)}),(0,f.jsx)(l.SettingsInput,{testId:`oauth-scopes-input`,name:`oauth_scopes`,type:`text`,label:S(n.I18nKey.SETTINGS$MCP_OAUTH_SCOPES),className:`w-full min-w-0`,showOptionalTag:!0,defaultValue:Array.isArray(Y?.scopes)?Y.scopes.join(` `):Y?.scopes||``,placeholder:S(n.I18nKey.SETTINGS$MCP_OAUTH_SCOPES_PLACEHOLDER)})]}),C===`shttp`&&(0,f.jsx)(l.SettingsInput,{testId:`timeout-input`,name:`timeout`,type:`number`,label:S(n.I18nKey.SETTINGS$MCP_TIMEOUT_LABEL),className:`w-full min-w-0`,showOptionalTag:!0,defaultValue:p?.timeout?.toString()||``,placeholder:`60`,min:1,max:3600})]}),C===`stdio`&&(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(l.SettingsInput,{testId:`name-input`,name:`name`,type:`text`,label:S(n.I18nKey.SETTINGS$MCP_NAME),className:`w-full min-w-0`,required:!0,defaultValue:p?.name||``,placeholder:`my_mcp_server`,pattern:a.MCP_SERVER_NAME_PATTERN.source}),(0,f.jsx)(l.SettingsInput,{testId:`command-input`,name:`command`,type:`text`,label:S(n.I18nKey.SETTINGS$MCP_COMMAND),className:`w-full min-w-0`,required:!0,defaultValue:p?.command||``,placeholder:`npx`}),(0,f.jsxs)(`label`,{className:`flex flex-col gap-2.5 w-full min-w-0`,children:[(0,f.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,f.jsx)(`span`,{className:`text-sm`,children:S(n.I18nKey.SETTINGS$MCP_COMMAND_ARGUMENTS)}),(0,f.jsx)(c.OptionalTag,{})]}),(0,f.jsx)(`textarea`,{"data-testid":`args-input`,name:`args`,rows:3,defaultValue:p?.args?.join(`
 `)||``,placeholder:`arg1
 arg2