@openhands/agent-canvas 1.14.0 → 1.15.0

package/dist/components/features/automations/recommended-automations-section.js

@@ -0,0 +1,198 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { cn as n } from "../../../utils/utils.js";
+import { getAutomationIcon as r, getAutomationLaunchPrompt as i, getIntegrationIds as a } from "../../../utils/automation-catalog.js";
+import o from "../../../node_modules/@openhands/extensions/automations/index.js";
+import { getFeaturedAutomationIds as s } from "../../../manifests/automation-interface.js";
+import { extensionModuleCardGridClassName as c, extensionModuleCardGridContainerClassName as l, extensionModuleCardInteractiveClassName as u, extensionModuleCardPillClassName as d, extensionModuleCardSurfaceClassName as f } from "../../../utils/extension-module-card-classes.js";
+import { SkillCardPillRow as p } from "../skills/skill-card-pill-row.js";
+import m from "../../../node_modules/@openhands/extensions/integrations/index.js";
+import { McpLogoBadge as h } from "../mcp-logo-badge.js";
+import { findInstalledEntryMatch as g, getMarketplaceEntryById as _, isMcpInstallableEntry as v } from "../../../utils/mcp-marketplace-utils.js";
+import { StatusBadge as y } from "./status-badge.js";
+import { getAutomationsByPopularity as b } from "../../../utils/recommended-automation-rail.js";
+import { McpLogoStackBadge as x } from "../mcp-page/mcp-logo-stack-badge.js";
+import { CirclePlusBadge as S } from "../../shared/buttons/circle-plus-check-toggle.js";
+import { createElement as C } from "react";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+//#region src/components/features/automations/recommended-automations-section.tsx
+var D = b(o);
+function O(e) {
+	return s().includes(e.id);
+}
+function k(e) {
+	return a(e).map((e) => {
+		let t = _(e, m);
+		return {
+			id: e,
+			entry: t,
+			mcpInstallable: !!t && v(t)
+		};
+	});
+}
+function A(e, t, n) {
+	let r = n.trim().toLowerCase();
+	return r ? [
+		e.name,
+		e.category,
+		e.description,
+		i(e),
+		...t.flatMap(({ entry: e, id: t }) => e ? [
+			e.name,
+			t,
+			...e.keywords ?? []
+		] : [t])
+	].join(" ").toLowerCase().includes(r) : !0;
+}
+function j(e, r, i, a) {
+	let o = e.map(({ id: e, entry: i, mcpInstallable: o }) => {
+		let s = !!i && g(i, r), c = i?.name ?? e;
+		return {
+			id: `integration-${e}`,
+			node: /* @__PURE__ */ E("span", {
+				className: n(d, "gap-1"),
+				children: [
+					/* @__PURE__ */ T(h, {
+						entry: i,
+						size: "xs"
+					}),
+					c,
+					s ? /* @__PURE__ */ T("span", {
+						className: "text-white",
+						children: a(t.RECOMMENDED_AUTOMATIONS$CONNECTED)
+					}) : i ? o ? null : /* @__PURE__ */ T("span", {
+						className: "text-tertiary-alt",
+						"data-testid": `automation-integration-external-${e}`,
+						children: a(t.RECOMMENDED_AUTOMATIONS$EXTERNAL_SETUP)
+					}) : /* @__PURE__ */ T("span", {
+						className: "text-tertiary-alt",
+						"data-testid": `recommended-automation-integration-${e}`,
+						children: a(t.RECOMMENDED_AUTOMATIONS$UNKNOWN_SETUP)
+					})
+				]
+			})
+		};
+	});
+	return i > 0 && o.push({
+		id: "missing-connect",
+		node: /* @__PURE__ */ T("span", {
+			className: d,
+			children: a(t.RECOMMENDED_AUTOMATIONS$MISSING_CONNECT, { count: i })
+		})
+	}), o;
+}
+function M({ automation: e, integrations: t, size: n, testId: i }) {
+	let a = r(e);
+	return a ? /* @__PURE__ */ T(h, {
+		entry: null,
+		size: n,
+		testId: i,
+		fallback: C(a, {
+			className: "h-5 w-5",
+			strokeWidth: 2.25
+		})
+	}) : /* @__PURE__ */ T(x, {
+		entries: t.flatMap(({ entry: e }) => e ? [e] : []),
+		testId: i
+	});
+}
+function N({ automations: e, installedServers: t, onSelect: r, translate: i }) {
+	return /* @__PURE__ */ T("div", {
+		className: n("mt-3", c),
+		children: e.map((e) => {
+			let a = k(e), o = a.filter(({ entry: e, mcpInstallable: n }) => !!e && n && !g(e, t)).length;
+			return /* @__PURE__ */ T("button", {
+				type: "button",
+				"data-testid": `recommended-automation-card-${e.id}`,
+				onClick: () => r(e),
+				className: n("flex min-w-0 overflow-hidden p-4 text-left", f, u),
+				children: /* @__PURE__ */ E("div", {
+					className: "flex min-w-0 flex-1 items-start gap-3",
+					children: [/* @__PURE__ */ T(M, {
+						automation: e,
+						integrations: a,
+						size: "md",
+						testId: `recommended-automation-icon-${e.id}`
+					}), /* @__PURE__ */ E("div", {
+						className: "flex min-w-0 flex-1 flex-col gap-3",
+						children: [
+							/* @__PURE__ */ E("header", {
+								className: "flex items-start justify-between gap-3",
+								children: [/* @__PURE__ */ E("div", {
+									className: "min-w-0 flex-1",
+									children: [/* @__PURE__ */ T("h3", {
+										className: "truncate text-sm font-semibold text-white",
+										children: e.name
+									}), /* @__PURE__ */ T("p", {
+										className: "mt-0.5 truncate text-xs text-tertiary-alt",
+										children: e.category
+									})]
+								}), /* @__PURE__ */ T(S, { testId: `recommended-automation-plus-${e.id}` })]
+							}),
+							/* @__PURE__ */ T("p", {
+								className: "line-clamp-2 text-xs leading-relaxed text-tertiary-light",
+								children: e.description
+							}),
+							/* @__PURE__ */ T(p, {
+								pills: j(a, t, o, i),
+								testId: `recommended-automation-pills-${e.id}`
+							})
+						]
+					})]
+				})
+			}, e.id);
+		})
+	});
+}
+function P({ backendKind: r, installedServers: i, query: a = "", onSelect: o, scrollableGrid: s = !1 }) {
+	let { t: c } = e("openhands"), u = D.filter((e) => A(e, k(e), a));
+	if (u.length === 0) return null;
+	let d = u.filter(O), f = u.filter((e) => !O(e));
+	return /* @__PURE__ */ T("section", {
+		"data-testid": "recommended-automations-section",
+		className: n(s && "flex min-h-0 flex-1 flex-col"),
+		children: /* @__PURE__ */ E("div", {
+			"data-testid": s ? "recommended-automations-scroll-area" : void 0,
+			className: n("mt-3", l, s && "min-h-0 flex-1 overflow-y-auto custom-scrollbar-always"),
+			children: [d.length > 0 && /* @__PURE__ */ E(w, { children: [
+				/* @__PURE__ */ E("div", {
+					className: "flex items-center",
+					children: [/* @__PURE__ */ T("h2", {
+						className: "text-base font-semibold text-foreground",
+						children: c(t.RECOMMENDED_AUTOMATIONS$SECTION_TITLE)
+					}), /* @__PURE__ */ T(y, { count: d.length })]
+				}),
+				/* @__PURE__ */ T("p", {
+					className: "mt-1 text-sm text-muted",
+					children: c(t.RECOMMENDED_AUTOMATIONS$SECTION_DESCRIPTION)
+				}),
+				/* @__PURE__ */ T(N, {
+					automations: d,
+					installedServers: i,
+					onSelect: o,
+					translate: c
+				})
+			] }), f.length > 0 && /* @__PURE__ */ E("section", {
+				"data-testid": "recommended-automations-beta-section",
+				className: n(d.length > 0 && "mt-8"),
+				children: [/* @__PURE__ */ E("div", {
+					"data-testid": "recommended-automations-beta-heading",
+					className: "flex items-center",
+					children: [/* @__PURE__ */ T("h2", {
+						className: "text-base font-semibold text-foreground",
+						children: c(t.RECOMMENDED_AUTOMATIONS$BETA_LABEL)
+					}), /* @__PURE__ */ T(y, { count: f.length })]
+				}), /* @__PURE__ */ T(N, {
+					automations: f,
+					installedServers: i,
+					onSelect: o,
+					translate: c
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { P as RecommendedAutomationsSection };
+
+//# sourceMappingURL=recommended-automations-section.js.map

package/dist/components/features/automations/recommended-automations-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recommended-automations-section.js","names":[],"sources":["../../../../src/components/features/automations/recommended-automations-section.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport type { TFunction } from \"i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport {\n  AUTOMATION_CATALOG,\n  type RecommendedAutomation,\n} from \"@openhands/extensions/automations\";\nimport {\n  INTEGRATION_CATALOG as MCP_MARKETPLACE,\n  type IntegrationCatalogEntry as MarketplaceEntry,\n} from \"@openhands/extensions/integrations\";\nimport { McpLogoStackBadge } from \"#/components/features/mcp-page/mcp-logo-stack-badge\";\nimport { McpLogoBadge } from \"#/components/features/mcp-logo-badge\";\nimport {\n  SkillCardPillRow,\n  type SkillCardPill,\n} from \"#/components/features/skills/skill-card-pill-row\";\nimport { CirclePlusBadge } from \"#/components/shared/buttons/circle-plus-check-toggle\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport {\n  findInstalledEntryMatch,\n  getMarketplaceEntryById,\n  isMcpInstallableEntry,\n} from \"#/utils/mcp-marketplace-utils\";\nimport { getFeaturedAutomationIds } from \"#/manifests/automation-interface\";\nimport {\n  getAutomationIcon,\n  getAutomationLaunchPrompt,\n  getIntegrationIds,\n} from \"#/utils/automation-catalog\";\nimport { getAutomationsByPopularity } from \"#/utils/recommended-automation-rail\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  extensionModuleCardInteractiveClassName,\n  extensionModuleCardGridClassName,\n  extensionModuleCardGridContainerClassName,\n  extensionModuleCardPillClassName,\n  extensionModuleCardSurfaceClassName,\n} from \"#/utils/extension-module-card-classes\";\nimport { StatusBadge } from \"./status-badge\";\n\ninterface RecommendedAutomationsSectionProps {\n  backendKind: \"local\" | \"cloud\";\n  installedServers: MCPServerConfig[];\n  query?: string;\n  onSelect: (automation: RecommendedAutomation) => void;\n  /** When true, title, description, and cards share one scroll area. */\n  scrollableGrid?: boolean;\n}\n\nexport { getAutomationsByPopularity };\n\nconst RECOMMENDED_AUTOMATIONS = getAutomationsByPopularity(AUTOMATION_CATALOG);\n\n// Proven automations are featured above the Beta group. The set is owned by\n// the interface manifest (falling back to the host default), not derived from\n// popularityRank: slack-standup-digest@94 outranks slack-channel-monitor@92\n// yet is Beta.\nfunction isProvenAutomation(automation: RecommendedAutomation): boolean {\n  return getFeaturedAutomationIds().includes(automation.id);\n}\n\nexport interface AutomationIntegration {\n  id: string;\n  entry?: MarketplaceEntry;\n  /** False when this backend has no MCP install flow for the entry. */\n  mcpInstallable: boolean;\n}\n\n/**\n * Every integration the automation declares, including the ones it is willing\n * to start without: the card describes what the automation uses, so an\n * optional integration still belongs on it. Entries are resolved against the\n * full catalog — an integration this backend cannot install as MCP (e.g.\n * Jira's HTTP-only option) is still a declared dependency and must stay\n * visible rather than being silently dropped. Unknown IDs are represented as\n * unresolved entries so catalog drift is visible to the user as well.\n */\nfunction getIntegrationEntries(\n  automation: RecommendedAutomation,\n): AutomationIntegration[] {\n  return getIntegrationIds(automation).map((id) => {\n    const entry = getMarketplaceEntryById(id, MCP_MARKETPLACE);\n    return {\n      id,\n      entry,\n      mcpInstallable: !!entry && isMcpInstallableEntry(entry),\n    };\n  });\n}\n\nfunction automationMatchesQuery(\n  automation: RecommendedAutomation,\n  integrations: AutomationIntegration[],\n  rawQuery: string,\n) {\n  const query = rawQuery.trim().toLowerCase();\n  if (!query) return true;\n  const haystack = [\n    automation.name,\n    automation.category,\n    automation.description,\n    getAutomationLaunchPrompt(automation),\n    ...integrations.flatMap(({ entry, id }) =>\n      entry ? [entry.name, id, ...(entry.keywords ?? [])] : [id],\n    ),\n  ]\n    .join(\" \")\n    .toLowerCase();\n  return haystack.includes(query);\n}\n\nfunction buildRecommendedAutomationPills(\n  integrations: AutomationIntegration[],\n  installedServers: MCPServerConfig[],\n  missingCount: number,\n  translate: TFunction,\n): SkillCardPill[] {\n  const pills: SkillCardPill[] = integrations.map(\n    ({ id, entry, mcpInstallable }) => {\n      const installed =\n        !!entry && findInstalledEntryMatch(entry, installedServers);\n      const name = entry?.name ?? id;\n\n      return {\n        id: `integration-${id}`,\n        node: (\n          <span className={cn(extensionModuleCardPillClassName, \"gap-1\")}>\n            <McpLogoBadge entry={entry} size=\"xs\" />\n            {name}\n            {installed ? (\n              <span className=\"text-white\">\n                {translate(I18nKey.RECOMMENDED_AUTOMATIONS$CONNECTED)}\n              </span>\n            ) : !entry ? (\n              <span\n                className=\"text-tertiary-alt\"\n                data-testid={`recommended-automation-integration-${id}`}\n              >\n                {translate(I18nKey.RECOMMENDED_AUTOMATIONS$UNKNOWN_SETUP)}\n              </span>\n            ) : !mcpInstallable ? (\n              <span\n                className=\"text-tertiary-alt\"\n                data-testid={`automation-integration-external-${id}`}\n              >\n                {translate(I18nKey.RECOMMENDED_AUTOMATIONS$EXTERNAL_SETUP)}\n              </span>\n            ) : null}\n          </span>\n        ),\n      };\n    },\n  );\n\n  if (missingCount > 0) {\n    pills.push({\n      id: \"missing-connect\",\n      node: (\n        <span className={extensionModuleCardPillClassName}>\n          {translate(I18nKey.RECOMMENDED_AUTOMATIONS$MISSING_CONNECT, {\n            count: missingCount,\n          })}\n        </span>\n      ),\n    });\n  }\n\n  return pills;\n}\n\n/**\n * A card's badge: the declared glyph when the entry names one, and its\n * integration logos otherwise. Both render into the same slot at the same\n * size, so a card is laid out the same either way.\n */\nfunction AutomationCardIcon({\n  automation,\n  integrations,\n  size,\n  testId,\n}: {\n  automation: RecommendedAutomation;\n  integrations: AutomationIntegration[];\n  size: \"base\" | \"md\";\n  testId: string;\n}) {\n  const Icon = getAutomationIcon(automation);\n  if (Icon) {\n    return (\n      <McpLogoBadge\n        entry={null}\n        size={size}\n        testId={testId}\n        fallback={createElement(Icon, {\n          className: \"h-5 w-5\",\n          strokeWidth: 2.25,\n        })}\n      />\n    );\n  }\n  return (\n    <McpLogoStackBadge\n      entries={integrations.flatMap(({ entry }) => (entry ? [entry] : []))}\n      testId={testId}\n    />\n  );\n}\n\ninterface AutomationCardGridProps {\n  automations: RecommendedAutomation[];\n  installedServers: MCPServerConfig[];\n  onSelect: (automation: RecommendedAutomation) => void;\n  translate: TFunction;\n}\n\nfunction AutomationCardGrid({\n  automations,\n  installedServers,\n  onSelect,\n  translate,\n}: AutomationCardGridProps) {\n  return (\n    <div className={cn(\"mt-3\", extensionModuleCardGridClassName)}>\n      {automations.map((automation) => {\n        const integrations = getIntegrationEntries(automation);\n        // \"N MCPs to connect\" only counts entries the install flow can\n        // actually connect; an external-setup integration is surfaced on its\n        // own pill instead.\n        const missingCount = integrations.filter(\n          ({ entry, mcpInstallable }) =>\n            !!entry &&\n            mcpInstallable &&\n            !findInstalledEntryMatch(entry, installedServers),\n        ).length;\n\n        return (\n          <button\n            key={automation.id}\n            type=\"button\"\n            data-testid={`recommended-automation-card-${automation.id}`}\n            onClick={() => onSelect(automation)}\n            className={cn(\n              \"flex min-w-0 overflow-hidden p-4 text-left\",\n              extensionModuleCardSurfaceClassName,\n              extensionModuleCardInteractiveClassName,\n            )}\n          >\n            <div className=\"flex min-w-0 flex-1 items-start gap-3\">\n              <AutomationCardIcon\n                automation={automation}\n                integrations={integrations}\n                size=\"md\"\n                testId={`recommended-automation-icon-${automation.id}`}\n              />\n              <div className=\"flex min-w-0 flex-1 flex-col gap-3\">\n                <header className=\"flex items-start justify-between gap-3\">\n                  <div className=\"min-w-0 flex-1\">\n                    <h3 className=\"truncate text-sm font-semibold text-white\">\n                      {automation.name}\n                    </h3>\n                    <p className=\"mt-0.5 truncate text-xs text-tertiary-alt\">\n                      {automation.category}\n                    </p>\n                  </div>\n                  <CirclePlusBadge\n                    testId={`recommended-automation-plus-${automation.id}`}\n                  />\n                </header>\n                <p className=\"line-clamp-2 text-xs leading-relaxed text-tertiary-light\">\n                  {automation.description}\n                </p>\n\n                <SkillCardPillRow\n                  pills={buildRecommendedAutomationPills(\n                    integrations,\n                    installedServers,\n                    missingCount,\n                    translate,\n                  )}\n                  testId={`recommended-automation-pills-${automation.id}`}\n                />\n              </div>\n            </div>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nexport function RecommendedAutomationsSection({\n  backendKind: _backendKind,\n  installedServers,\n  query = \"\",\n  onSelect,\n  scrollableGrid = false,\n}: RecommendedAutomationsSectionProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  // Only the query narrows the grid. An automation that declares no\n  // integration needs nothing connected, and one naming an integration this\n  // host cannot resolve is shown with that gap on its pill, so neither is a\n  // reason to hide a card the catalog ships.\n  const visibleAutomations = RECOMMENDED_AUTOMATIONS.filter((automation) =>\n    automationMatchesQuery(\n      automation,\n      getIntegrationEntries(automation),\n      query,\n    ),\n  );\n\n  if (visibleAutomations.length === 0) return null;\n\n  const provenAutomations = visibleAutomations.filter(isProvenAutomation);\n  const betaAutomations = visibleAutomations.filter(\n    (automation) => !isProvenAutomation(automation),\n  );\n\n  return (\n    <section\n      data-testid=\"recommended-automations-section\"\n      className={cn(scrollableGrid && \"flex min-h-0 flex-1 flex-col\")}\n    >\n      <div\n        data-testid={\n          scrollableGrid ? \"recommended-automations-scroll-area\" : undefined\n        }\n        className={cn(\n          \"mt-3\",\n          extensionModuleCardGridContainerClassName,\n          scrollableGrid &&\n            \"min-h-0 flex-1 overflow-y-auto custom-scrollbar-always\",\n        )}\n      >\n        {provenAutomations.length > 0 && (\n          <>\n            <div className=\"flex items-center\">\n              <h2 className=\"text-base font-semibold text-foreground\">\n                {t(I18nKey.RECOMMENDED_AUTOMATIONS$SECTION_TITLE)}\n              </h2>\n              <StatusBadge count={provenAutomations.length} />\n            </div>\n            <p className=\"mt-1 text-sm text-muted\">\n              {t(I18nKey.RECOMMENDED_AUTOMATIONS$SECTION_DESCRIPTION)}\n            </p>\n\n            <AutomationCardGrid\n              automations={provenAutomations}\n              installedServers={installedServers}\n              onSelect={onSelect}\n              translate={t}\n            />\n          </>\n        )}\n\n        {betaAutomations.length > 0 && (\n          <section\n            data-testid=\"recommended-automations-beta-section\"\n            className={cn(provenAutomations.length > 0 && \"mt-8\")}\n          >\n            <div\n              data-testid=\"recommended-automations-beta-heading\"\n              className=\"flex items-center\"\n            >\n              <h2 className=\"text-base font-semibold text-foreground\">\n                {t(I18nKey.RECOMMENDED_AUTOMATIONS$BETA_LABEL)}\n              </h2>\n              <StatusBadge count={betaAutomations.length} />\n            </div>\n\n            <AutomationCardGrid\n              automations={betaAutomations}\n              installedServers={installedServers}\n              onSelect={onSelect}\n              translate={t}\n            />\n          </section>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqDA,IAAM,IAA0B,EAA2B,CAAkB;AAM7E,SAAS,EAAmB,GAA4C;CACtE,OAAO,EAAyB,EAAE,SAAS,EAAW,EAAE;AAC1D;AAkBA,SAAS,EACP,GACyB;CACzB,OAAO,EAAkB,CAAU,EAAE,KAAK,MAAO;EAC/C,IAAM,IAAQ,EAAwB,GAAI,CAAe;EACzD,OAAO;GACL;GACA;GACA,gBAAgB,CAAC,CAAC,KAAS,EAAsB,CAAK;EACxD;CACF,CAAC;AACH;AAEA,SAAS,EACP,GACA,GACA,GACA;CACA,IAAM,IAAQ,EAAS,KAAK,EAAE,YAAY;CAa1C,OAZK,IACY;EACf,EAAW;EACX,EAAW;EACX,EAAW;EACX,EAA0B,CAAU;EACpC,GAAG,EAAa,SAAS,EAAE,UAAO,YAChC,IAAQ;GAAC,EAAM;GAAM;GAAI,GAAI,EAAM,YAAY,CAAC;EAAE,IAAI,CAAC,CAAE,CAC3D;CACF,EACG,KAAK,GAAG,EACR,YACI,EAAS,SAAS,CAAK,IAZX;AAarB;AAEA,SAAS,EACP,GACA,GACA,GACA,GACiB;CACjB,IAAM,IAAyB,EAAa,KACzC,EAAE,OAAI,UAAO,wBAAqB;EACjC,IAAM,IACJ,CAAC,CAAC,KAAS,EAAwB,GAAO,CAAgB,GACtD,IAAO,GAAO,QAAQ;EAE5B,OAAO;GACL,IAAI,eAAe;GACnB,MACE,kBAAC,QAAD;IAAM,WAAW,EAAG,GAAkC,OAAO;cAA7D;KACE,kBAAC,GAAD;MAAqB;MAAO,MAAK;KAAM,CAAA;KACtC;KACA,IACC,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAU,EAAQ,iCAAiC;KAChD,CAAA,IACH,IAOA,IAOD,OANF,kBAAC,QAAD;MACE,WAAU;MACV,eAAa,mCAAmC;gBAE/C,EAAU,EAAQ,sCAAsC;KACrD,CAAA,IAZN,kBAAC,QAAD;MACE,WAAU;MACV,eAAa,sCAAsC;gBAElD,EAAU,EAAQ,qCAAqC;KACpD,CAAA;IASJ;;EAEV;CACF,CACF;CAeA,OAbI,IAAe,KACjB,EAAM,KAAK;EACT,IAAI;EACJ,MACE,kBAAC,QAAD;GAAM,WAAW;aACd,EAAU,EAAQ,yCAAyC,EAC1D,OAAO,EACT,CAAC;EACG,CAAA;CAEV,CAAC,GAGI;AACT;AAOA,SAAS,EAAmB,EAC1B,eACA,iBACA,SACA,aAMC;CACD,IAAM,IAAO,EAAkB,CAAU;CAczC,OAbI,IAEA,kBAAC,GAAD;EACE,OAAO;EACD;EACE;EACR,UAAU,EAAc,GAAM;GAC5B,WAAW;GACX,aAAa;EACf,CAAC;CACF,CAAA,IAIH,kBAAC,GAAD;EACE,SAAS,EAAa,SAAS,EAAE,eAAa,IAAQ,CAAC,CAAK,IAAI,CAAC,CAAE;EAC3D;CACT,CAAA;AAEL;AASA,SAAS,EAAmB,EAC1B,gBACA,qBACA,aACA,gBAC0B;CAC1B,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,QAAQ,CAAgC;YACxD,EAAY,KAAK,MAAe;GAC/B,IAAM,IAAe,EAAsB,CAAU,GAI/C,IAAe,EAAa,QAC/B,EAAE,UAAO,wBACR,CAAC,CAAC,KACF,KACA,CAAC,EAAwB,GAAO,CAAgB,CACpD,EAAE;GAEF,OACE,kBAAC,UAAD;IAEE,MAAK;IACL,eAAa,+BAA+B,EAAW;IACvD,eAAe,EAAS,CAAU;IAClC,WAAW,EACT,8CACA,GACA,CACF;cAEA,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MACc;MACE;MACd,MAAK;MACL,QAAQ,+BAA+B,EAAW;KACnD,CAAA,GACD,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,UAAD;QAAQ,WAAU;kBAAlB,CACE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,MAAD;UAAI,WAAU;oBACX,EAAW;SACV,CAAA,GACJ,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAW;SACX,CAAA,CACA;YACL,kBAAC,GAAD,EACE,QAAQ,+BAA+B,EAAW,KACnD,CAAA,CACK;;OACR,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAW;OACX,CAAA;OAEH,kBAAC,GAAD;QACE,OAAO,EACL,GACA,GACA,GACA,CACF;QACA,QAAQ,gCAAgC,EAAW;OACpD,CAAA;MACE;OACF;;GACC,GA9CD,EAAW,EA8CV;EAEZ,CAAC;CACE,CAAA;AAET;AAEA,SAAgB,EAA8B,EAC5C,aAAa,GACb,qBACA,WAAQ,IACR,aACA,oBAAiB,MACoB;CACrC,IAAM,EAAE,SAAM,EAAe,WAAW,GAMlC,IAAqB,EAAwB,QAAQ,MACzD,EACE,GACA,EAAsB,CAAU,GAChC,CACF,CACF;CAEA,IAAI,EAAmB,WAAW,GAAG,OAAO;CAE5C,IAAM,IAAoB,EAAmB,OAAO,CAAkB,GAChE,IAAkB,EAAmB,QACxC,MAAe,CAAC,EAAmB,CAAU,CAChD;CAEA,OACE,kBAAC,WAAD;EACE,eAAY;EACZ,WAAW,EAAG,KAAkB,8BAA8B;YAE9D,kBAAC,OAAD;GACE,eACE,IAAiB,wCAAwC,KAAA;GAE3D,WAAW,EACT,QACA,GACA,KACE,wDACJ;aATF,CAWG,EAAkB,SAAS,KAC1B,kBAAA,GAAA,EAAA,UAAA;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAE,EAAQ,qCAAqC;KAC9C,CAAA,GACJ,kBAAC,GAAD,EAAa,OAAO,EAAkB,OAAS,CAAA,CAC5C;;IACL,kBAAC,KAAD;KAAG,WAAU;eACV,EAAE,EAAQ,2CAA2C;IACrD,CAAA;IAEH,kBAAC,GAAD;KACE,aAAa;KACK;KACR;KACV,WAAW;IACZ,CAAA;GACD,EAAA,CAAA,GAGH,EAAgB,SAAS,KACxB,kBAAC,WAAD;IACE,eAAY;IACZ,WAAW,EAAG,EAAkB,SAAS,KAAK,MAAM;cAFtD,CAIE,kBAAC,OAAD;KACE,eAAY;KACZ,WAAU;eAFZ,CAIE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAE,EAAQ,kCAAkC;KAC3C,CAAA,GACJ,kBAAC,GAAD,EAAa,OAAO,EAAgB,OAAS,CAAA,CAC1C;QAEL,kBAAC,GAAD;KACE,aAAa;KACK;KACR;KACV,WAAW;IACZ,CAAA,CACM;KAER;;CACE,CAAA;AAEb"}

package/dist/components/features/automations/responder-deployment-modal.cjs

@@ -0,0 +1,2 @@
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../../../utils/utils.cjs"),r=require("../../shared/modals/modal-backdrop.cjs"),i=require("../../../utils/modal-classes.cjs"),a=require("../../shared/modals/modal-close-button.cjs"),o=require("../settings/brand-button.cjs"),s=require("../../../utils/responder-deployment.cjs");let c=require("react/jsx-runtime");function l({isOpen:l,isPending:u,onClose:d,onContinueLocal:f,onOpenUrl:p}){let{t:m}=e.useTranslation(`openhands`);return l?(0,c.jsx)(r.ModalBackdrop,{onClose:d,closeOnEscape:!u,closeOnBackdropClick:!u,"aria-label":m(t.I18nKey.RESPONDER_DEPLOYMENT$TITLE),children:(0,c.jsxs)(`div`,{"data-testid":`responder-deployment-modal`,className:`relative flex w-full max-w-3xl flex-col rounded-xl border border-[var(--oh-border)] bg-base-secondary`,children:[(0,c.jsx)(a.ModalCloseButton,{onClose:d,testId:`responder-deployment-modal-close`,disabled:u}),(0,c.jsxs)(`header`,{className:`flex-shrink-0 px-6 pb-4 pt-6`,children:[(0,c.jsx)(`h2`,{className:n.cn(`pr-6`,i.modalTitleLgClassName),children:m(t.I18nKey.RESPONDER_DEPLOYMENT$TITLE)}),(0,c.jsx)(`p`,{className:`mt-2 text-sm text-muted`,children:m(t.I18nKey.RESPONDER_DEPLOYMENT$DESCRIPTION)})]}),(0,c.jsx)(`div`,{className:`flex flex-col gap-3 px-6 pb-6 sm:flex-row`,children:s.VISIBLE_RESPONDER_DEPLOYMENT_TARGETS.map(e=>{let t=s.resolveResponderDeploymentOption(e),{action:n}=t;return(0,c.jsxs)(`div`,{"data-testid":t.testId,className:`flex flex-1 flex-col gap-3 rounded-xl border border-[var(--oh-border)] bg-surface-raised p-4`,children:[(0,c.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[(0,c.jsx)(`h3`,{className:`text-sm font-semibold text-white`,children:m(t.titleKey)}),(0,c.jsx)(`p`,{className:`text-xs leading-relaxed text-tertiary-light`,children:m(t.descriptionKey)})]}),(0,c.jsx)(o.BrandButton,{type:`button`,variant:`primary`,className:`mt-auto`,testId:t.primaryActionTestId,isDisabled:u,"aria-busy":u&&n.kind===`launch-local`?!0:void 0,onClick:()=>{n.kind===`launch-local`?f():p(n.url)},children:m(t.primaryActionKey)})]},t.target)})})]})}):null}exports.ResponderDeploymentModal=l;
+//# sourceMappingURL=responder-deployment-modal.cjs.map

package/dist/components/features/automations/responder-deployment-modal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"responder-deployment-modal.cjs","names":[],"sources":["../../../../src/components/features/automations/responder-deployment-modal.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport {\n  VISIBLE_RESPONDER_DEPLOYMENT_TARGETS,\n  resolveResponderDeploymentOption,\n} from \"#/utils/responder-deployment\";\n\ninterface ResponderDeploymentModalProps {\n  isOpen: boolean;\n  isPending: boolean;\n  onClose: () => void;\n  /** Fired for the \"Continue with local setup\" action. */\n  onContinueLocal: () => void;\n  /** Fired for an external-URL action (e.g. OpenHands Cloud integrations). */\n  onOpenUrl: (url: string) => void;\n}\n\nexport function ResponderDeploymentModal({\n  isOpen,\n  isPending,\n  onClose,\n  onContinueLocal,\n  onOpenUrl,\n}: ResponderDeploymentModalProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (!isOpen) return null;\n\n  return (\n    <ModalBackdrop\n      onClose={onClose}\n      closeOnEscape={!isPending}\n      closeOnBackdropClick={!isPending}\n      aria-label={t(I18nKey.RESPONDER_DEPLOYMENT$TITLE)}\n    >\n      <div\n        data-testid=\"responder-deployment-modal\"\n        className=\"relative flex w-full max-w-3xl flex-col rounded-xl border border-[var(--oh-border)] bg-base-secondary\"\n      >\n        <ModalCloseButton\n          onClose={onClose}\n          testId=\"responder-deployment-modal-close\"\n          disabled={isPending}\n        />\n        <header className=\"flex-shrink-0 px-6 pb-4 pt-6\">\n          <h2 className={cn(\"pr-6\", modalTitleLgClassName)}>\n            {t(I18nKey.RESPONDER_DEPLOYMENT$TITLE)}\n          </h2>\n          <p className=\"mt-2 text-sm text-muted\">\n            {t(I18nKey.RESPONDER_DEPLOYMENT$DESCRIPTION)}\n          </p>\n        </header>\n        <div className=\"flex flex-col gap-3 px-6 pb-6 sm:flex-row\">\n          {VISIBLE_RESPONDER_DEPLOYMENT_TARGETS.map((target) => {\n            const option = resolveResponderDeploymentOption(target);\n            const { action } = option;\n            return (\n              <div\n                key={option.target}\n                data-testid={option.testId}\n                className=\"flex flex-1 flex-col gap-3 rounded-xl border border-[var(--oh-border)] bg-surface-raised p-4\"\n              >\n                <div className=\"flex flex-col gap-1\">\n                  <h3 className=\"text-sm font-semibold text-white\">\n                    {t(option.titleKey)}\n                  </h3>\n                  <p className=\"text-xs leading-relaxed text-tertiary-light\">\n                    {t(option.descriptionKey)}\n                  </p>\n                </div>\n                <BrandButton\n                  type=\"button\"\n                  variant=\"primary\"\n                  className=\"mt-auto\"\n                  testId={option.primaryActionTestId}\n                  isDisabled={isPending}\n                  aria-busy={\n                    isPending && action.kind === \"launch-local\"\n                      ? true\n                      : undefined\n                  }\n                  onClick={() => {\n                    if (action.kind === \"launch-local\") {\n                      onContinueLocal();\n                    } else {\n                      onOpenUrl(action.url);\n                    }\n                  }}\n                >\n                  {t(option.primaryActionKey)}\n                </BrandButton>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":"kfAsBA,SAAgB,EAAyB,CACvC,SACA,YACA,UACA,kBACA,aACgC,CAChC,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAIxC,OAFK,GAGH,EAAA,EAAA,KAAC,EAAA,cAAD,CACW,UACT,cAAe,CAAC,EAChB,qBAAsB,CAAC,EACvB,aAAY,EAAE,EAAA,QAAQ,0BAA0B,YAEhD,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,6BACZ,UAAU,iHAFZ,EAIE,EAAA,EAAA,KAAC,EAAA,iBAAD,CACW,UACT,OAAO,mCACP,SAAU,CACX,CAAA,GACD,EAAA,EAAA,MAAC,SAAD,CAAQ,UAAU,wCAAlB,EACE,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAA,GAAG,OAAQ,EAAA,qBAAqB,WAC5C,EAAE,EAAA,QAAQ,0BAA0B,CACnC,CAAA,GACJ,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,mCACV,EAAE,EAAA,QAAQ,gCAAgC,CAC1C,CAAA,CACG,KACR,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,qDACZ,EAAA,qCAAqC,IAAK,GAAW,CACpD,IAAM,EAAS,EAAA,iCAAiC,CAAM,EAChD,CAAE,UAAW,EACnB,OACE,EAAA,EAAA,MAAC,MAAD,CAEE,cAAa,EAAO,OACpB,UAAU,wGAHZ,EAKE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,+BAAf,EACE,EAAA,EAAA,KAAC,KAAD,CAAI,UAAU,4CACX,EAAE,EAAO,QAAQ,CAChB,CAAA,GACJ,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,uDACV,EAAE,EAAO,cAAc,CACvB,CAAA,CACA,KACL,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,KAAK,SACL,QAAQ,UACR,UAAU,UACV,OAAQ,EAAO,oBACf,WAAY,EACZ,YACE,GAAa,EAAO,OAAS,eACzB,GACA,IAAA,GAEN,YAAe,CACT,EAAO,OAAS,eAClB,EAAgB,EAEhB,EAAU,EAAO,GAAG,CAExB,WAEC,EAAE,EAAO,gBAAgB,CACf,CAAA,CACV,GAjCE,EAAO,MAiCT,CAET,CAAC,CACE,CAAA,CACF,GACQ,CAAA,EAtEG,IAwEtB"}

package/dist/components/features/automations/responder-deployment-modal.js

@@ -0,0 +1,75 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { cn as n } from "../../../utils/utils.js";
+import { ModalBackdrop as r } from "../../shared/modals/modal-backdrop.js";
+import { modalTitleLgClassName as i } from "../../../utils/modal-classes.js";
+import { ModalCloseButton as a } from "../../shared/modals/modal-close-button.js";
+import { BrandButton as o } from "../settings/brand-button.js";
+import { VISIBLE_RESPONDER_DEPLOYMENT_TARGETS as s, resolveResponderDeploymentOption as c } from "../../../utils/responder-deployment.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/features/automations/responder-deployment-modal.tsx
+function d({ isOpen: d, isPending: f, onClose: p, onContinueLocal: m, onOpenUrl: h }) {
+	let { t: g } = e("openhands");
+	return d ? /* @__PURE__ */ l(r, {
+		onClose: p,
+		closeOnEscape: !f,
+		closeOnBackdropClick: !f,
+		"aria-label": g(t.RESPONDER_DEPLOYMENT$TITLE),
+		children: /* @__PURE__ */ u("div", {
+			"data-testid": "responder-deployment-modal",
+			className: "relative flex w-full max-w-3xl flex-col rounded-xl border border-[var(--oh-border)] bg-base-secondary",
+			children: [
+				/* @__PURE__ */ l(a, {
+					onClose: p,
+					testId: "responder-deployment-modal-close",
+					disabled: f
+				}),
+				/* @__PURE__ */ u("header", {
+					className: "flex-shrink-0 px-6 pb-4 pt-6",
+					children: [/* @__PURE__ */ l("h2", {
+						className: n("pr-6", i),
+						children: g(t.RESPONDER_DEPLOYMENT$TITLE)
+					}), /* @__PURE__ */ l("p", {
+						className: "mt-2 text-sm text-muted",
+						children: g(t.RESPONDER_DEPLOYMENT$DESCRIPTION)
+					})]
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "flex flex-col gap-3 px-6 pb-6 sm:flex-row",
+					children: s.map((e) => {
+						let t = c(e), { action: n } = t;
+						return /* @__PURE__ */ u("div", {
+							"data-testid": t.testId,
+							className: "flex flex-1 flex-col gap-3 rounded-xl border border-[var(--oh-border)] bg-surface-raised p-4",
+							children: [/* @__PURE__ */ u("div", {
+								className: "flex flex-col gap-1",
+								children: [/* @__PURE__ */ l("h3", {
+									className: "text-sm font-semibold text-white",
+									children: g(t.titleKey)
+								}), /* @__PURE__ */ l("p", {
+									className: "text-xs leading-relaxed text-tertiary-light",
+									children: g(t.descriptionKey)
+								})]
+							}), /* @__PURE__ */ l(o, {
+								type: "button",
+								variant: "primary",
+								className: "mt-auto",
+								testId: t.primaryActionTestId,
+								isDisabled: f,
+								"aria-busy": f && n.kind === "launch-local" ? !0 : void 0,
+								onClick: () => {
+									n.kind === "launch-local" ? m() : h(n.url);
+								},
+								children: g(t.primaryActionKey)
+							})]
+						}, t.target);
+					})
+				})
+			]
+		})
+	}) : null;
+}
+//#endregion
+export { d as ResponderDeploymentModal };
+
+//# sourceMappingURL=responder-deployment-modal.js.map

package/dist/components/features/automations/responder-deployment-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responder-deployment-modal.js","names":[],"sources":["../../../../src/components/features/automations/responder-deployment-modal.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport {\n  VISIBLE_RESPONDER_DEPLOYMENT_TARGETS,\n  resolveResponderDeploymentOption,\n} from \"#/utils/responder-deployment\";\n\ninterface ResponderDeploymentModalProps {\n  isOpen: boolean;\n  isPending: boolean;\n  onClose: () => void;\n  /** Fired for the \"Continue with local setup\" action. */\n  onContinueLocal: () => void;\n  /** Fired for an external-URL action (e.g. OpenHands Cloud integrations). */\n  onOpenUrl: (url: string) => void;\n}\n\nexport function ResponderDeploymentModal({\n  isOpen,\n  isPending,\n  onClose,\n  onContinueLocal,\n  onOpenUrl,\n}: ResponderDeploymentModalProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (!isOpen) return null;\n\n  return (\n    <ModalBackdrop\n      onClose={onClose}\n      closeOnEscape={!isPending}\n      closeOnBackdropClick={!isPending}\n      aria-label={t(I18nKey.RESPONDER_DEPLOYMENT$TITLE)}\n    >\n      <div\n        data-testid=\"responder-deployment-modal\"\n        className=\"relative flex w-full max-w-3xl flex-col rounded-xl border border-[var(--oh-border)] bg-base-secondary\"\n      >\n        <ModalCloseButton\n          onClose={onClose}\n          testId=\"responder-deployment-modal-close\"\n          disabled={isPending}\n        />\n        <header className=\"flex-shrink-0 px-6 pb-4 pt-6\">\n          <h2 className={cn(\"pr-6\", modalTitleLgClassName)}>\n            {t(I18nKey.RESPONDER_DEPLOYMENT$TITLE)}\n          </h2>\n          <p className=\"mt-2 text-sm text-muted\">\n            {t(I18nKey.RESPONDER_DEPLOYMENT$DESCRIPTION)}\n          </p>\n        </header>\n        <div className=\"flex flex-col gap-3 px-6 pb-6 sm:flex-row\">\n          {VISIBLE_RESPONDER_DEPLOYMENT_TARGETS.map((target) => {\n            const option = resolveResponderDeploymentOption(target);\n            const { action } = option;\n            return (\n              <div\n                key={option.target}\n                data-testid={option.testId}\n                className=\"flex flex-1 flex-col gap-3 rounded-xl border border-[var(--oh-border)] bg-surface-raised p-4\"\n              >\n                <div className=\"flex flex-col gap-1\">\n                  <h3 className=\"text-sm font-semibold text-white\">\n                    {t(option.titleKey)}\n                  </h3>\n                  <p className=\"text-xs leading-relaxed text-tertiary-light\">\n                    {t(option.descriptionKey)}\n                  </p>\n                </div>\n                <BrandButton\n                  type=\"button\"\n                  variant=\"primary\"\n                  className=\"mt-auto\"\n                  testId={option.primaryActionTestId}\n                  isDisabled={isPending}\n                  aria-busy={\n                    isPending && action.kind === \"launch-local\"\n                      ? true\n                      : undefined\n                  }\n                  onClick={() => {\n                    if (action.kind === \"launch-local\") {\n                      onContinueLocal();\n                    } else {\n                      onOpenUrl(action.url);\n                    }\n                  }}\n                >\n                  {t(option.primaryActionKey)}\n                </BrandButton>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":";;;;;;;;;;AAsBA,SAAgB,EAAyB,EACvC,WACA,cACA,YACA,oBACA,gBACgC;CAChC,IAAM,EAAE,SAAM,EAAe,WAAW;CAIxC,OAFK,IAGH,kBAAC,GAAD;EACW;EACT,eAAe,CAAC;EAChB,sBAAsB,CAAC;EACvB,cAAY,EAAE,EAAQ,0BAA0B;YAEhD,kBAAC,OAAD;GACE,eAAY;GACZ,WAAU;aAFZ;IAIE,kBAAC,GAAD;KACW;KACT,QAAO;KACP,UAAU;IACX,CAAA;IACD,kBAAC,UAAD;KAAQ,WAAU;eAAlB,CACE,kBAAC,MAAD;MAAI,WAAW,EAAG,QAAQ,CAAqB;gBAC5C,EAAE,EAAQ,0BAA0B;KACnC,CAAA,GACJ,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAE,EAAQ,gCAAgC;KAC1C,CAAA,CACG;;IACR,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAqC,KAAK,MAAW;MACpD,IAAM,IAAS,EAAiC,CAAM,GAChD,EAAE,cAAW;MACnB,OACE,kBAAC,OAAD;OAEE,eAAa,EAAO;OACpB,WAAU;iBAHZ,CAKE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAE,EAAO,QAAQ;QAChB,CAAA,GACJ,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAE,EAAO,cAAc;QACvB,CAAA,CACA;WACL,kBAAC,GAAD;QACE,MAAK;QACL,SAAQ;QACR,WAAU;QACV,QAAQ,EAAO;QACf,YAAY;QACZ,aACE,KAAa,EAAO,SAAS,iBACzB,KACA,KAAA;QAEN,eAAe;SACb,AAAI,EAAO,SAAS,iBAClB,EAAgB,IAEhB,EAAU,EAAO,GAAG;QAExB;kBAEC,EAAE,EAAO,gBAAgB;OACf,CAAA,CACV;SAjCE,EAAO,MAiCT;KAET,CAAC;IACE,CAAA;GACF;;CACQ,CAAA,IAtEG;AAwEtB"}

package/dist/components/features/automations/status-badge.cjs

@@ -0,0 +1,2 @@
+require("../../../_virtual/_rolldown/runtime.cjs");let e=require("react/jsx-runtime");function t({count:t}){return(0,e.jsx)(`span`,{className:`ml-2 inline-flex items-center justify-center rounded-full bg-surface-raised px-2 py-0.5 text-xs text-foreground`,children:t})}exports.StatusBadge=t;
+//# sourceMappingURL=status-badge.cjs.map

package/dist/components/features/automations/status-badge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-badge.cjs","names":[],"sources":["../../../../src/components/features/automations/status-badge.tsx"],"sourcesContent":["interface StatusBadgeProps {\n  count: number;\n}\n\nexport function StatusBadge({ count }: StatusBadgeProps) {\n  return (\n    <span className=\"ml-2 inline-flex items-center justify-center rounded-full bg-surface-raised px-2 py-0.5 text-xs text-foreground\">\n      {count}\n    </span>\n  );\n}\n"],"mappings":"sFAIA,SAAgB,EAAY,CAAE,SAA2B,CACvD,OACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,2HACb,CACG,CAAA,CAEV"}

package/dist/components/features/automations/status-badge.js

@@ -0,0 +1,12 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/features/automations/status-badge.tsx
+function t({ count: t }) {
+	return /* @__PURE__ */ e("span", {
+		className: "ml-2 inline-flex items-center justify-center rounded-full bg-surface-raised px-2 py-0.5 text-xs text-foreground",
+		children: t
+	});
+}
+//#endregion
+export { t as StatusBadge };
+
+//# sourceMappingURL=status-badge.js.map

package/dist/components/features/automations/status-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-badge.js","names":[],"sources":["../../../../src/components/features/automations/status-badge.tsx"],"sourcesContent":["interface StatusBadgeProps {\n  count: number;\n}\n\nexport function StatusBadge({ count }: StatusBadgeProps) {\n  return (\n    <span className=\"ml-2 inline-flex items-center justify-center rounded-full bg-surface-raised px-2 py-0.5 text-xs text-foreground\">\n      {count}\n    </span>\n  );\n}\n"],"mappings":";;AAIA,SAAgB,EAAY,EAAE,YAA2B;CACvD,OACE,kBAAC,QAAD;EAAM,WAAU;YACb;CACG,CAAA;AAEV"}

package/dist/components/features/automations/to-latest-run-state.cjs

@@ -0,0 +1,2 @@
+require("../../../_virtual/_rolldown/runtime.cjs"),require("../../../manifests/automation-insights.cjs");var e={latestRun:null,recentRuns:[],isLoading:!1,isError:!1};function t(t){return t?{latestRun:t.summary?.latestRun??null,recentRuns:t.summary?.recentRuns??[],total:t.summary?.total,isLoading:t.isLoading,isError:t.isError}:e}exports.toLatestRunState=t;
+//# sourceMappingURL=to-latest-run-state.cjs.map

package/dist/components/features/automations/to-latest-run-state.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-latest-run-state.cjs","names":[],"sources":["../../../../src/components/features/automations/to-latest-run-state.ts"],"sourcesContent":["import type { LatestAutomationRunState } from \"#/hooks/query/use-latest-automation-runs\";\nimport {\n  summarizeAutomationRuns,\n  type RunSummaryState,\n} from \"#/manifests/automation-insights\";\n\nconst EMPTY_RUN_STATE: LatestAutomationRunState = {\n  latestRun: null,\n  recentRuns: [],\n  isLoading: false,\n  isError: false,\n};\n\n/** Maps dashboard run-summary query state onto the home card/row run shape. */\nexport function toLatestRunState(\n  state: RunSummaryState | undefined,\n): LatestAutomationRunState {\n  if (!state) return EMPTY_RUN_STATE;\n  return {\n    latestRun: state.summary?.latestRun ?? null,\n    recentRuns: state.summary?.recentRuns ?? [],\n    total: state.summary?.total,\n    isLoading: state.isLoading,\n    isError: state.isError,\n  };\n}\n\n/** Maps home run state onto the dashboard stats footer shape. */\nexport function toRunSummaryState(\n  state: LatestAutomationRunState,\n): RunSummaryState {\n  if (state.recentRuns.length === 0 && (state.isLoading || state.isError)) {\n    return {\n      summary: null,\n      isLoading: state.isLoading,\n      isError: state.isError,\n    };\n  }\n  return {\n    summary: summarizeAutomationRuns({\n      runs: state.recentRuns,\n      total: state.total ?? state.recentRuns.length,\n    }),\n    isLoading: state.isLoading,\n    isError: state.isError,\n  };\n}\n"],"mappings":"yGAMA,IAAM,EAA4C,CAChD,UAAW,KACX,WAAY,CAAC,EACb,UAAW,GACX,QAAS,EACX,EAGA,SAAgB,EACd,EAC0B,CAE1B,OADK,EACE,CACL,UAAW,EAAM,SAAS,WAAa,KACvC,WAAY,EAAM,SAAS,YAAc,CAAC,EAC1C,MAAO,EAAM,SAAS,MACtB,UAAW,EAAM,UACjB,QAAS,EAAM,OACjB,EAPmB,CAQrB"}

package/dist/components/features/automations/to-latest-run-state.d.ts

@@ -0,0 +1,6 @@
+import type { LatestAutomationRunState } from "#/hooks/query/use-latest-automation-runs";
+import { type RunSummaryState } from "#/manifests/automation-insights";
+/** Maps dashboard run-summary query state onto the home card/row run shape. */
+export declare function toLatestRunState(state: RunSummaryState | undefined): LatestAutomationRunState;
+/** Maps home run state onto the dashboard stats footer shape. */
+export declare function toRunSummaryState(state: LatestAutomationRunState): RunSummaryState;

package/dist/components/features/automations/to-latest-run-state.js

@@ -0,0 +1,21 @@
+import "../../../manifests/automation-insights.js";
+//#region src/components/features/automations/to-latest-run-state.ts
+var e = {
+	latestRun: null,
+	recentRuns: [],
+	isLoading: !1,
+	isError: !1
+};
+function t(t) {
+	return t ? {
+		latestRun: t.summary?.latestRun ?? null,
+		recentRuns: t.summary?.recentRuns ?? [],
+		total: t.summary?.total,
+		isLoading: t.isLoading,
+		isError: t.isError
+	} : e;
+}
+//#endregion
+export { t as toLatestRunState };
+
+//# sourceMappingURL=to-latest-run-state.js.map

package/dist/components/features/automations/to-latest-run-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-latest-run-state.js","names":[],"sources":["../../../../src/components/features/automations/to-latest-run-state.ts"],"sourcesContent":["import type { LatestAutomationRunState } from \"#/hooks/query/use-latest-automation-runs\";\nimport {\n  summarizeAutomationRuns,\n  type RunSummaryState,\n} from \"#/manifests/automation-insights\";\n\nconst EMPTY_RUN_STATE: LatestAutomationRunState = {\n  latestRun: null,\n  recentRuns: [],\n  isLoading: false,\n  isError: false,\n};\n\n/** Maps dashboard run-summary query state onto the home card/row run shape. */\nexport function toLatestRunState(\n  state: RunSummaryState | undefined,\n): LatestAutomationRunState {\n  if (!state) return EMPTY_RUN_STATE;\n  return {\n    latestRun: state.summary?.latestRun ?? null,\n    recentRuns: state.summary?.recentRuns ?? [],\n    total: state.summary?.total,\n    isLoading: state.isLoading,\n    isError: state.isError,\n  };\n}\n\n/** Maps home run state onto the dashboard stats footer shape. */\nexport function toRunSummaryState(\n  state: LatestAutomationRunState,\n): RunSummaryState {\n  if (state.recentRuns.length === 0 && (state.isLoading || state.isError)) {\n    return {\n      summary: null,\n      isLoading: state.isLoading,\n      isError: state.isError,\n    };\n  }\n  return {\n    summary: summarizeAutomationRuns({\n      runs: state.recentRuns,\n      total: state.total ?? state.recentRuns.length,\n    }),\n    isLoading: state.isLoading,\n    isError: state.isError,\n  };\n}\n"],"mappings":";;AAMA,IAAM,IAA4C;CAChD,WAAW;CACX,YAAY,CAAC;CACb,WAAW;CACX,SAAS;AACX;AAGA,SAAgB,EACd,GAC0B;CAE1B,OADK,IACE;EACL,WAAW,EAAM,SAAS,aAAa;EACvC,YAAY,EAAM,SAAS,cAAc,CAAC;EAC1C,OAAO,EAAM,SAAS;EACtB,WAAW,EAAM;EACjB,SAAS,EAAM;CACjB,IAPmB;AAQrB"}

package/dist/components/features/backends/backend-form-modal.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/globe.cjs"),a=require("../../../node_modules/lucide-react/dist/esm/icons/info.cjs"),o=require("../../../node_modules/lucide-react/dist/esm/icons/monitor.cjs"),s=require("../../../utils/utils.cjs"),c=require("../../../context/navigation-context.cjs"),l=require("../../../node_modules/@openhands/typescript-client/dist/client/server-client.cjs"),u=require("../../../node_modules/@openhands/typescript-client/dist/client/device-flow-client.cjs");require("../../../node_modules/@openhands/typescript-client/dist/clients.cjs");const d=require("../../../api/agent-server-config.cjs"),f=require("../../../utils/user-facing-error.cjs"),p=require("../../../api/agent-server-client-options.cjs"),m=require("../../../api/agent-server-compatibility.cjs"),h=require("../../../node_modules/@tanstack/react-query/build/modern/useQuery.cjs"),g=require("../../../contexts/active-backend-context.cjs"),_=require("../../../hooks/use-tracking.cjs"),v=require("../../shared/modals/modal-backdrop.cjs"),y=require("../../shared/modals/modal-body.cjs"),b=require("../../../utils/modal-classes.cjs"),x=require("../../shared/modals/modal-close-button.cjs"),S=require("../settings/brand-button.cjs"),C=require("../settings/settings-input.cjs"),w=require("../../../hooks/query/use-backends-health.cjs"),T=require("../../../assets/branding/openhands-logo-white.cjs"),E=require("../files-tab/segmented-toggle.cjs");require("../../../api/device-flow-client.cjs");const D=require("../../../icons/chevron-down-small.cjs"),O=require("../../../icons/external-link.cjs"),k=require("../../../icons/server.cjs"),A=require("./backend-status-label.cjs"),j=require("./backend-status-dot.cjs"),M=require("./device-flow-auth.cjs");let N=require("react");N=e.__toESM(N,1);let P=require("react/jsx-runtime");function F(e){return u.isOpenHandsCloudHost(e)?`cloud`:`local`}function I(e){let t=e.toLowerCase().replace(/^\[|\]$/g,``);return!!(t===`localhost`||t===`::1`||t===`::`||t===`0.0.0.0`||/^127\./.test(t)||/^::ffff:127\./i.test(t)||/^10\./.test(t)||/^192\.168\./.test(t)||/^172\.(1[6-9]|2\d|3[01])\./.test(t)||/^fe[89ab][0-9a-f]:/i.test(t)||/^f[cd][0-9a-f]{2}:/i.test(t)||t.endsWith(`.local`)||!t.includes(`.`)&&!t.includes(`:`))}function L(e){let t=e.trim().replace(/\/+$/,``);if(!t)return``;if(/^https?:\/\//i.test(t))return t;let n=t.match(/^\[([^\]]+)\]/);return`${I(n?n[1]:(t.match(/:/g)??[]).length>1?t:t.split(`:`)[0])?`http`:`https`}://${t}`}function R(e){let t=e.trim();if(!t||/\s/.test(t))return!1;let n=L(t);if(!n)return!1;try{let e=new URL(n);return(e.protocol===`http:`||e.protocol===`https:`)&&e.hostname.length>0}catch{return!1}}var z=`https://app.all-hands.dev`,B=`agent-canvas --backend-only --port 8001`,V=`https://github.com/OpenHands/OpenHands/blob/main/docs/DEVELOPMENT.md#alternative-development-workflows`,H=`https://github.com/OpenHands/OpenHands/blob/main/docs/SELF_HOSTING.md`,U=`https://docs.openhands.dev/overview/introduction`;function W(e,t){return e(n.I18nKey.BACKEND$CONNECTION_TEST_FAILED,{host:t,interpolation:{escapeValue:!1}})}function G(e){return f.getUserFacingConnectionErrorMessage(e)}function K(e,t){let n=G(t);return n?`${e}\n${n}`:e}async function q(e){if(e.kind!==`local`)return{agentServerVersion:null};let t=await new l.ServerClient(p.getAgentServerClientOptions({host:e.host,sessionApiKey:e.apiKey||null,timeout:5e3})).getServerInfo();return m.assertAgentServerVersionIsSupported(t),{agentServerVersion:m.getDisplayAgentServerVersion(t)}}function J({backend:e,testIdRoot:r}){let{t:i}=t.useTranslation(`openhands`),a=w.useBackendsHealth([e])[e.id],o=a?.isConnected??null,s=a?.disabled===!0,c=a?.consecutiveFailures??0,u=a?.lastError??null,{data:d}=h.useQuery({queryKey:[`backend-version`,e.host,e.apiKey],queryFn:async()=>m.getDisplayAgentServerVersion(await new l.ServerClient(p.getAgentServerClientOptions({host:e.host,sessionApiKey:e.apiKey||null,timeout:5e3})).getServerInfo()),retry:!1,staleTime:6e4,enabled:e.kind===`local`&&!s}),f=A.getBackendStatusLabel(i,e,a),g=e.kind===`cloud`?i(n.I18nKey.BACKEND$KIND_CLOUD):i(n.I18nKey.BACKEND$KIND_LOCAL);return(0,P.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,P.jsxs)(`div`,{"data-testid":`${r}-status`,className:`flex items-center gap-3 text-sm`,children:[(0,P.jsx)(j.BackendStatusDot,{isConnected:o}),(0,P.jsx)(`span`,{className:`text-white`,"data-testid":`${r}-status-label`,children:f}),(0,P.jsx)(`span`,{className:`text-tertiary-alt`,children:`·`}),(0,P.jsx)(`span`,{className:`text-[var(--oh-text-tertiary)]`,children:g}),d?(0,P.jsx)(`span`,{className:`text-xs text-[var(--oh-muted)]`,"data-testid":`${r}-version`,children:i(n.I18nKey.BACKEND$VERSION_LABEL,{version:d})}):null]}),s?(0,P.jsxs)(`div`,{"data-testid":`${r}-status-error`,className:`flex flex-col gap-1 rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm`,children:[(0,P.jsx)(`span`,{className:`font-semibold text-red-300`,children:i(n.I18nKey.BACKEND$HEALTH_FAILED_TITLE)}),(0,P.jsx)(`span`,{className:`text-xs text-[var(--oh-text-tertiary)]`,children:i(n.I18nKey.BACKEND$HEALTH_FAILED_DETAIL,{count:c})}),u?(0,P.jsx)(`span`,{"data-testid":`${r}-status-error-message`,className:`text-xs text-red-300 whitespace-pre-wrap break-words`,children:u}):null]}):null]})}function Y({initialName:e=``,initialHost:n=``,initialApiKey:r=``,onTestConnection:i,onSuccess:a,requireApiKey:o=!1,onSubmitOverride:s,fixedKind:c}){let{t:l}=t.useTranslation(`openhands`),[u,d]=N.default.useState(e),[f,p]=N.default.useState(n),[m,h]=N.default.useState(r),[g,_]=N.default.useState(null),[v,y]=N.default.useState(!1),[b,x]=N.default.useState(null),S=c??b??F(f),C=o||S!==`local`,w=u.trim().length>0&&R(f)&&(!C||m.trim().length>0);return{name:u,setName:d,host:f,setHost:p,apiKey:m,setApiKey:h,connectionError:g,setConnectionError:_,isSubmitting:v,kind:S,setKind:x,canSubmit:w,handleSubmit:N.default.useCallback(async e=>{if(e.preventDefault(),!w||v)return;let t={name:u.trim(),host:L(f),apiKey:m.trim(),kind:S};_(null),y(!0);try{s?await s(t):a(await i(t))}catch(e){_(K(W(l,t.host),e))}finally{y(!1)}},[w,v,u,f,m,S,i,a,o,s,c,l])}}function X({mode:e,backend:r,onSubmitted:i,renderActions:a,testIdRoot:o,hostReadOnly:c,requireApiKey:l,hideConfigurationFields:u=!1,onSubmitOverride:d}){let{t:f}=t.useTranslation(`openhands`),{addBackend:p,updateBackend:m}=g.useActiveBackendContext(),h=e===`edit`&&r?r.kind:null,{name:_,setName:v,host:y,setHost:b,apiKey:x,setApiKey:w,connectionError:T,setConnectionError:E,isSubmitting:D,kind:O,handleSubmit:k}=Y({initialName:r?.name??``,initialHost:r?.host??``,initialApiKey:r?.apiKey??``,onTestConnection:q,onSuccess:async()=>{let t={name:_.trim(),host:L(y),apiKey:x.trim(),kind:h??O};e===`edit`&&r?m(r.id,t):p(t),i()},requireApiKey:l,onSubmitOverride:d}),[A,j]=N.default.useState(!1),[M,F]=N.default.useState(!1),I=h??O,B=o??(e===`edit`?`edit-backend`:`add-backend`),V=l||I!==`local`,H=_.trim().length>0&&R(y)&&(!V||x.trim().length>0),U=A&&!_.trim()?f(n.I18nKey.BACKEND$NAME_REQUIRED):void 0,W=M?y.trim()?R(y)?void 0:f(n.I18nKey.BACKEND$HOST_INVALID):f(n.I18nKey.BACKEND$HOST_REQUIRED):void 0;return(0,P.jsxs)(`form`,{"data-testid":`${B}-form`,onSubmit:async e=>{if(!H){j(!0),F(!0);return}await k(e)},className:`flex flex-col gap-4`,children:[(0,P.jsxs)(`div`,{"data-testid":`${B}-configuration-fields`,className:s.cn(`flex flex-col gap-4`,u&&`hidden`),children:[(0,P.jsx)(C.SettingsInput,{testId:`${B}-name`,name:`${B}-name`,type:`text`,label:f(n.I18nKey.BACKEND$NAME_LABEL),value:_,onChange:e=>{v(e),E(null)},onBlur:()=>j(!0),placeholder:`Production`,className:`w-full`,showRequiredTag:!0,error:U}),(0,P.jsx)(C.SettingsInput,{testId:`${B}-host`,name:`${B}-host`,type:`text`,label:f(n.I18nKey.BACKEND$HOST_LABEL),value:y,onChange:c?void 0:e=>{b(e),E(null)},onBlur:()=>F(!0),placeholder:z,className:`w-full`,showRequiredTag:!0,error:W,isDisabled:c}),(0,P.jsx)(C.SettingsInput,{testId:`${B}-api-key`,name:`${B}-api-key`,type:`password`,label:f(n.I18nKey.BACKEND$KEY_LABEL),value:x,onChange:e=>{w(e),E(null)},placeholder:``,className:`w-full`}),T?(0,P.jsx)(`div`,{role:`alert`,"data-testid":`${B}-error`,className:`rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words`,children:T}):null,e===`edit`&&r&&(0,P.jsx)(J,{backend:r,testIdRoot:B})]}),a?a({canSubmit:H&&!D,isSubmitting:D,testIdRoot:B}):(0,P.jsxs)(`div`,{className:`flex justify-end gap-2 mt-2 w-full`,children:[(0,P.jsx)(S.BrandButton,{type:`button`,variant:`secondary`,onClick:i,testId:`${B}-cancel`,children:f(n.I18nKey.BUTTON$CANCEL)}),(0,P.jsx)(S.BrandButton,{type:`submit`,variant:`primary`,isDisabled:!H||D,testId:`${B}-submit`,children:f(n.I18nKey.BACKEND$SAVE)})]})]})}function Z(){let{currentPath:e,navigate:t}=c.useNavigation();return N.default.useCallback(()=>{/^\/automations\/[^/]+/.test(e)?t(`/automations`):/^\/conversations\/[^/]+/.test(e)&&t(`/conversations`)},[e,t])}function ee({onConnected:e,testIdRoot:r,initialBackend:i,requireApiKey:a,submitLabel:o,submittingLabel:s,submitTestId:c,fixedKind:l,showKindSelector:u=!0}){let{t:d}=t.useTranslation(`openhands`),{name:f,setName:p,host:m,setHost:h,apiKey:g,setApiKey:_,connectionError:v,setConnectionError:y,isSubmitting:b,kind:x,setKind:w,canSubmit:T,handleSubmit:D}=Y({initialName:i?.name??``,initialHost:i?.host??``,initialApiKey:i?.apiKey??``,onTestConnection:q,onSuccess:t=>{e({name:f.trim(),host:L(m),apiKey:g.trim(),kind:x},`manual`,t)},requireApiKey:a,fixedKind:l});return(0,P.jsxs)(`form`,{"data-testid":`${r}-form`,onSubmit:D,className:`flex flex-col gap-4 flex-1 min-w-0`,children:[(0,P.jsx)(C.SettingsInput,{testId:`${r}-name`,name:`${r}-name`,type:`text`,label:d(n.I18nKey.BACKEND$NAME_LABEL),hint:d(n.I18nKey.BACKEND$NAME_HELPER),value:f,onChange:e=>{p(e),y(null)},placeholder:`e.g. My Server`,className:`w-full`}),(0,P.jsx)(C.SettingsInput,{testId:`${r}-host`,name:`${r}-host`,type:`text`,label:d(n.I18nKey.BACKEND$HOST_LABEL),hint:d(n.I18nKey.BACKEND$HOST_HELPER),value:m,onChange:e=>{h(e),y(null)},placeholder:`http://localhost:8000`,className:`w-full`}),u?(0,P.jsxs)(`div`,{className:`flex flex-col items-start gap-2.5`,children:[(0,P.jsx)(`span`,{className:`text-sm`,children:d(n.I18nKey.BACKEND$KIND_LABEL)}),(0,P.jsx)(E.SegmentedToggle,{value:x,options:[{value:`local`,label:d(n.I18nKey.BACKEND$KIND_LOCAL)},{value:`cloud`,label:d(n.I18nKey.BACKEND$KIND_CLOUD)}],onChange:e=>w(e),ariaLabel:d(n.I18nKey.BACKEND$KIND_LABEL),testId:`${r}-kind`})]}):null,(0,P.jsx)(C.SettingsInput,{testId:`${r}-api-key`,name:`${r}-api-key`,type:`password`,label:d(n.I18nKey.BACKEND$KEY_LABEL),value:g,onChange:e=>{_(e),y(null)},placeholder:`sk-••••••••••`,className:`w-full`}),v?(0,P.jsx)(`div`,{role:`alert`,"data-testid":`${r}-error`,className:`rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words`,children:v}):null,(0,P.jsx)(S.BrandButton,{type:`submit`,variant:`secondary`,isDisabled:!T||b,testId:c??`${r}-submit`,className:`w-full text-center`,children:b?s:o})]})}function Q({onConnected:e,testIdRoot:r,lockedHost:i,analyticsSource:a,showBranding:o=!0}){let{t:c}=t.useTranslation(`openhands`),[l,u]=N.default.useState(!1),[d,f]=N.default.useState(``),p=`${r}-advanced-panel`,m=i??(d.trim()||z);return(0,P.jsxs)(`div`,{className:`flex w-full min-w-0 flex-col items-center gap-3`,children:[o?(0,P.jsxs)(`div`,{className:`flex flex-col items-center gap-1`,children:[(0,P.jsx)(T.default,{width:56,height:56,"aria-hidden":!0}),(0,P.jsx)(`h4`,{className:b.modalTitleLgMediumClassName,"data-testid":`${r}-cloud-title`,children:c(n.I18nKey.BACKEND$CLOUD_TITLE)})]}):null,(0,P.jsx)(M.DeviceFlowAuth,{host:m,onSuccess:t=>{e({name:`OpenHands Cloud`,host:L(m),apiKey:t,kind:`cloud`},`cloud_login`)},testIdRoot:r,analyticsSource:a,className:`w-full items-center`,idleDescription:(0,P.jsx)(`p`,{className:`text-center text-sm leading-relaxed text-[var(--oh-muted)]`,"data-testid":`${r}-cloud-description`,children:c(n.I18nKey.BACKEND$CLOUD_DESCRIPTION)}),idleFooter:i?null:(0,P.jsxs)(`div`,{className:`mx-auto w-full max-w-md`,children:[(0,P.jsxs)(`button`,{type:`button`,onClick:()=>u(e=>!e),"aria-expanded":l,"aria-controls":p,"data-testid":`${r}-advanced-toggle`,className:`flex w-full cursor-pointer items-center justify-center gap-1 text-center text-xs text-[var(--oh-muted)] transition-colors hover:text-content-2`,children:[(0,P.jsx)(`span`,{children:c(n.I18nKey.BACKEND$ADVANCED)}),(0,P.jsx)(D.default,{className:s.cn(`h-4 w-4 shrink-0 text-muted transition-transform duration-200 ease-out`,l&&`rotate-180`),"aria-hidden":!0})]}),(0,P.jsx)(`div`,{className:s.cn(`grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none`,l?`grid-rows-[1fr]`:`grid-rows-[0fr]`),children:(0,P.jsx)(`div`,{className:`overflow-hidden`,children:(0,P.jsxs)(`div`,{id:p,"data-testid":`${r}-advanced-panel`,"aria-hidden":!l,inert:l?void 0:!0,className:s.cn(`pt-3 transition-opacity duration-200 ease-out motion-reduce:transition-none`,l?`opacity-100`:`opacity-0`),children:[(0,P.jsx)(C.SettingsInput,{testId:`${r}-cloud-host`,name:`${r}-cloud-host`,type:`text`,label:c(n.I18nKey.BACKEND$HOST_LABEL),value:d,onChange:f,placeholder:z,className:`w-full`}),(0,P.jsx)(`p`,{className:`mt-1 text-xs text-[var(--oh-muted)]`,children:c(n.I18nKey.BACKEND$LOGIN_CLOUD_HINT)})]})})})]})})]})}function $({value:e,selectedValue:t,title:n,description:r,icon:i,onSelect:a,panelId:o,testId:c}){let l=e===t;return(0,P.jsxs)(`button`,{id:`${c}-tab`,type:`button`,role:`tab`,"aria-selected":l,"aria-controls":o,"data-testid":c,onClick:()=>a(e),className:s.cn(`relative flex min-h-16 w-full cursor-pointer items-center gap-3 px-3 py-3 text-left transition-colors`,`first:border-r first:border-r-[var(--oh-border)]`,`focus-visible:z-10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-300`,l?`bg-[var(--oh-surface-raised)] text-white after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-primary`:`text-[var(--oh-muted)] hover:bg-[var(--oh-surface-raised)] hover:text-white`),children:[(0,P.jsx)(`span`,{className:`flex size-8 shrink-0 items-center justify-center`,"aria-hidden":!0,children:i}),(0,P.jsxs)(`span`,{className:`min-w-0 flex-1`,children:[(0,P.jsx)(`span`,{className:`block truncate text-sm font-medium`,children:n}),(0,P.jsx)(`span`,{className:`mt-0.5 block text-xs leading-tight text-[var(--oh-muted)]`,children:r})]})]})}function te({children:e}){let t=N.default.useRef(null),[n,r]=N.default.useState();return N.default.useLayoutEffect(()=>{let e=t.current;if(!e)return;let n=()=>{let t=e.getBoundingClientRect().height;r(t>0?t:void 0)};if(n(),typeof ResizeObserver>`u`)return;let i=new ResizeObserver(n);return i.observe(e),()=>i.disconnect()},[]),(0,P.jsx)(`div`,{"data-testid":`add-backend-panel-height`,style:n===void 0?void 0:{height:n},className:`overflow-hidden transition-[height] duration-300 ease-in-out motion-reduce:transition-none`,children:(0,P.jsx)(`div`,{ref:t,children:e})})}function ne({location:e}){let{t:i}=t.useTranslation(`openhands`),[o,c]=N.default.useState(!1),l=e===`remote`,u=i(l?n.I18nKey.BACKEND$REMOTE_SETUP_TITLE:n.I18nKey.BACKEND$BEFORE_CONNECT_TITLE),d=i(l?n.I18nKey.BACKEND$REMOTE_SETUP_DESCRIPTION:n.I18nKey.BACKEND$LOCAL_SETUP_DESCRIPTION),f=l?H:V,p=i(l?n.I18nKey.BACKEND$REMOTE_SETUP_DOCS:n.I18nKey.BACKEND$LOCAL_SETUP_DOCS),m=l?`add-backend-remote`:`add-backend-local`,h=`${m}-guidance-toggle`,g=`${m}-guidance-body`;return(0,P.jsxs)(`aside`,{"data-testid":`${m}-guidance`,className:`rounded-lg bg-[var(--oh-surface-raised)] text-sm text-[var(--oh-muted)]`,children:[(0,P.jsx)(`h4`,{className:`text-white`,children:(0,P.jsxs)(`button`,{id:h,type:`button`,onClick:()=>c(e=>!e),"aria-expanded":o,"aria-controls":g,"data-testid":h,className:s.cn(`flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg px-3 py-2 text-left font-medium`,`transition-colors hover:bg-[var(--oh-interactive-hover)]`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-300`),children:[(0,P.jsxs)(`span`,{className:`flex min-w-0 items-center gap-2`,children:[(0,P.jsx)(a.Info,{className:`size-4 shrink-0 text-[var(--oh-muted)]`,"aria-hidden":!0}),(0,P.jsx)(`span`,{className:`truncate`,children:u})]}),(0,P.jsx)(r.ChevronDown,{className:s.cn(`size-5 shrink-0 text-[var(--oh-muted)] transition-transform duration-200 ease-out`,o&&`rotate-180`),"aria-hidden":!0})]})}),(0,P.jsx)(`div`,{className:s.cn(`grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none`,o?`grid-rows-[1fr]`:`grid-rows-[0fr]`),children:(0,P.jsx)(`div`,{className:`overflow-hidden`,children:(0,P.jsxs)(`div`,{id:g,"data-testid":g,role:`region`,"aria-labelledby":h,"aria-hidden":!o,inert:o?void 0:!0,className:s.cn(`flex flex-col gap-2 px-3 pb-3 transition-opacity duration-200 ease-out motion-reduce:transition-none`,o?`opacity-100`:`opacity-0`),children:[(0,P.jsx)(`p`,{className:`leading-5`,children:d}),l?(0,P.jsxs)(`div`,{children:[(0,P.jsx)(`h5`,{className:`font-medium text-white`,children:i(n.I18nKey.BACKEND$REMOTE_CONNECTION_TITLE)}),(0,P.jsx)(`p`,{className:`mt-1 leading-5`,children:i(n.I18nKey.BACKEND$REMOTE_CONNECTION_DESCRIPTION)})]}):(0,P.jsx)(`code`,{className:`block break-words font-mono text-xs text-white`,children:B}),(0,P.jsxs)(`a`,{href:f,target:`_blank`,rel:`noopener noreferrer`,"data-testid":`${m}-docs-link`,tabIndex:o?void 0:-1,className:`inline-flex w-fit items-center gap-1.5 text-primary hover:underline`,children:[(0,P.jsx)(`span`,{children:p}),(0,P.jsx)(O.default,{className:`size-4 shrink-0`,"aria-hidden":!0})]})]})})})]})}function re({onConnected:e,source:r}){let{t:a}=t.useTranslation(`openhands`),[c,l]=N.default.useState(`cloud`),[u,d]=N.default.useState(`local`),f=`add-backend-selected-panel`,p=`add-backend-option-${c}-tab`,m=c===`cloud`;return(0,P.jsxs)(`div`,{"data-testid":`add-backend-chooser`,className:`flex flex-col`,children:[(0,P.jsxs)(`div`,{role:`tablist`,"aria-label":a(n.I18nKey.BACKEND$CHOOSER_TITLE),className:`grid grid-cols-2 overflow-hidden rounded-lg border border-[var(--oh-border)]`,children:[(0,P.jsx)($,{value:`cloud`,selectedValue:c,title:a(n.I18nKey.BACKEND$CLOUD_TITLE),description:a(n.I18nKey.BACKEND$CLOUD_OPTION_DESCRIPTION),icon:(0,P.jsx)(T.default,{width:32,height:32,"data-testid":`add-backend-option-cloud-logo`}),onSelect:l,panelId:f,testId:`add-backend-option-cloud`}),(0,P.jsx)($,{value:`agent-server`,selectedValue:c,title:a(n.I18nKey.BACKEND$AGENT_SERVER_TITLE),description:a(n.I18nKey.BACKEND$AGENT_SERVER_OPTION_DESCRIPTION),icon:(0,P.jsx)(k.default,{className:`size-6`}),onSelect:l,panelId:f,testId:`add-backend-option-agent-server`})]}),(0,P.jsx)(`div`,{className:`mt-6`,children:(0,P.jsx)(te,{children:(0,P.jsx)(`section`,{id:f,role:`tabpanel`,"aria-labelledby":p,className:`min-w-0`,children:m?(0,P.jsx)(`div`,{"data-testid":`add-backend-cloud-panel`,className:s.cn(`relative isolate flex min-h-[13.5rem] w-full items-center justify-center rounded-xl border border-[var(--oh-border)] px-5 py-6`,`before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-xl`,`before:bg-[radial-gradient(75%_75%_at_50%_50%,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0)_70%)]`),children:(0,P.jsx)(Q,{onConnected:e,testIdRoot:`add-backend`,analyticsSource:r,showBranding:!1})}):(0,P.jsxs)(`div`,{"data-testid":`add-backend-agent-server-panel`,className:`mx-auto w-full max-w-xl`,children:[(0,P.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,P.jsx)(`span`,{className:`h-px flex-1 bg-[var(--oh-border)]`,"aria-hidden":!0}),(0,P.jsx)(E.SegmentedToggle,{value:u,options:[{value:`local`,label:a(n.I18nKey.BACKEND$KIND_LOCAL),icon:(0,P.jsx)(o.Monitor,{"aria-hidden":!0})},{value:`remote`,label:a(n.I18nKey.BACKEND$KIND_REMOTE),icon:(0,P.jsx)(i.Globe,{"aria-hidden":!0})}],onChange:d,ariaLabel:a(n.I18nKey.BACKEND$AGENT_SERVER_LOCATION),testId:`add-backend-location`}),(0,P.jsx)(`span`,{className:`h-px flex-1 bg-[var(--oh-border)]`,"aria-hidden":!0})]}),(0,P.jsxs)(`div`,{className:`mt-4 flex flex-col gap-4`,children:[(0,P.jsx)(ne,{location:u},u),(0,P.jsx)(ee,{onConnected:e,testIdRoot:`add-backend`,requireApiKey:u===`remote`,submitLabel:a(n.I18nKey.BACKEND$CONNECT),submittingLabel:a(n.I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING),fixedKind:`local`,showKindSelector:!1})]})]})})})})]})}function ie({onClose:e,source:t}){let{addBackend:n}=g.useActiveBackendContext(),r=Z(),{trackBackendAdded:i}=_.useTracking(),a=d.getLockedCloudHost(),o=N.default.useCallback((a,o,s)=>{n(a),i({backendKind:a.kind,connectionMethod:o,hasApiKey:!!a.apiKey,source:t,agentServerVersion:s?.agentServerVersion}),r(),e()},[n,r,e,i,t]);return a?(0,P.jsx)(Q,{onConnected:o,testIdRoot:`add-backend`,lockedHost:a,analyticsSource:t}):(0,P.jsx)(re,{onConnected:o,source:t})}function ae({mode:e,backend:r,onClose:i,source:a=`add_backend_modal`,hideCloseButton:o=!1}){let{t:c}=t.useTranslation(`openhands`);if(e===`add`)return(0,P.jsx)(v.ModalBackdrop,{onClose:o?void 0:i,closeOnEscape:!1,closeOnBackdropClick:!o,"aria-label":c(n.I18nKey.BACKEND$ADD_TITLE),children:(0,P.jsxs)(`div`,{"data-testid":o?`onboarding-modal`:`add-backend-modal`,className:s.cn(`relative max-h-[92vh] w-[720px] overflow-y-auto rounded-xl border border-[var(--oh-border)] bg-base-secondary p-6`,y.MODAL_MAX_WIDTH_VIEWPORT),children:[o?null:(0,P.jsx)(x.ModalCloseButton,{onClose:i,testId:`add-backend-close`}),o?null:(0,P.jsxs)(`div`,{className:`pr-8`,children:[(0,P.jsx)(`h2`,{className:b.modalTitleLgClassName,children:c(n.I18nKey.BACKEND$CHOOSER_TITLE)}),(0,P.jsxs)(`p`,{className:`mt-2 text-sm leading-6 text-[var(--oh-muted)]`,"data-testid":`add-backend-description`,children:[c(n.I18nKey.BACKEND$CHOOSER_DESCRIPTION),` `,(0,P.jsxs)(`a`,{href:U,target:`_blank`,rel:`noopener noreferrer`,"aria-label":c(n.I18nKey.BACKEND$DEPLOYMENT_OPTIONS),"data-testid":`add-backend-deployment-options-link`,className:`text-primary hover:underline`,children:[c(n.I18nKey.CTA$LEARN_MORE),(0,P.jsx)(O.default,{className:`ml-1 inline size-3.5 align-[-0.125em]`,"aria-hidden":!0})]})]})]}),(0,P.jsx)(`div`,{className:o?void 0:`mt-5`,children:(0,P.jsx)(ie,{onClose:i,source:a})})]})});let l=`edit-backend`;return(0,P.jsx)(v.ModalBackdrop,{onClose:i,closeOnEscape:!1,"aria-label":c(n.I18nKey.BACKEND$EDIT_TITLE),children:(0,P.jsxs)(`div`,{"data-testid":`${l}-modal`,className:s.cn(`relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]`,y.modalWidthClassName(`md`)),children:[(0,P.jsx)(x.ModalCloseButton,{onClose:i,testId:`${l}-close`}),(0,P.jsx)(`h2`,{className:s.cn(`pr-6`,b.modalTitleLgClassName),children:c(n.I18nKey.BACKEND$EDIT_TITLE)}),(0,P.jsx)(X,{mode:`edit`,backend:r,onSubmitted:i,testIdRoot:l})]})})}exports.BackendFormModal=ae;
+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/chevron-down.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/globe.cjs"),a=require("../../../node_modules/lucide-react/dist/esm/icons/info.cjs"),o=require("../../../node_modules/lucide-react/dist/esm/icons/monitor.cjs"),s=require("../../../utils/utils.cjs"),c=require("../../../context/navigation-context.cjs"),l=require("../../../node_modules/@openhands/typescript-client/dist/client/server-client.cjs"),u=require("../../../node_modules/@openhands/typescript-client/dist/client/device-flow-client.cjs");require("../../../node_modules/@openhands/typescript-client/dist/clients.cjs");const d=require("../../../api/agent-server-config.cjs"),f=require("../../../utils/user-facing-error.cjs"),p=require("../../../api/agent-server-client-options.cjs"),m=require("../../../api/agent-server-compatibility.cjs"),h=require("../../../node_modules/@tanstack/react-query/build/modern/useQuery.cjs"),g=require("../../../contexts/active-backend-context.cjs"),_=require("../../../hooks/use-tracking.cjs"),v=require("../../shared/modals/modal-backdrop.cjs"),y=require("../../shared/modals/modal-body.cjs"),b=require("../../../utils/modal-classes.cjs"),x=require("../../shared/modals/modal-close-button.cjs"),S=require("../settings/brand-button.cjs"),C=require("../settings/settings-input.cjs"),w=require("../files-tab/segmented-toggle.cjs"),T=require("../../../hooks/query/use-backends-health.cjs"),E=require("../../../assets/branding/openhands-logo-white.cjs");require("../../../api/device-flow-client.cjs");const D=require("../../../icons/chevron-down-small.cjs"),O=require("../../../icons/external-link.cjs"),k=require("../../../icons/server.cjs"),A=require("./backend-status-label.cjs"),j=require("./backend-status-dot.cjs"),M=require("./device-flow-auth.cjs");let N=require("react");N=e.__toESM(N,1);let P=require("react/jsx-runtime");function F(e){return u.isOpenHandsCloudHost(e)?`cloud`:`local`}function I(e){let t=e.toLowerCase().replace(/^\[|\]$/g,``);return!!(t===`localhost`||t===`::1`||t===`::`||t===`0.0.0.0`||/^127\./.test(t)||/^::ffff:127\./i.test(t)||/^10\./.test(t)||/^192\.168\./.test(t)||/^172\.(1[6-9]|2\d|3[01])\./.test(t)||/^fe[89ab][0-9a-f]:/i.test(t)||/^f[cd][0-9a-f]{2}:/i.test(t)||t.endsWith(`.local`)||!t.includes(`.`)&&!t.includes(`:`))}function L(e){let t=e.trim().replace(/\/+$/,``);if(!t)return``;if(/^https?:\/\//i.test(t))return t;let n=t.match(/^\[([^\]]+)\]/);return`${I(n?n[1]:(t.match(/:/g)??[]).length>1?t:t.split(`:`)[0])?`http`:`https`}://${t}`}function R(e){let t=e.trim();if(!t||/\s/.test(t))return!1;let n=L(t);if(!n)return!1;try{let e=new URL(n);return(e.protocol===`http:`||e.protocol===`https:`)&&e.hostname.length>0}catch{return!1}}var z=`https://app.all-hands.dev`,B=`agent-canvas --backend-only --port 8001`,V=`https://github.com/OpenHands/OpenHands/blob/main/docs/DEVELOPMENT.md#alternative-development-workflows`,H=`https://github.com/OpenHands/OpenHands/blob/main/docs/SELF_HOSTING.md`,U=`https://docs.openhands.dev/overview/introduction`;function W(e,t){return e(n.I18nKey.BACKEND$CONNECTION_TEST_FAILED,{host:t,interpolation:{escapeValue:!1}})}function G(e){return f.getUserFacingConnectionErrorMessage(e)}function K(e,t){let n=G(t);return n?`${e}\n${n}`:e}async function q(e){if(e.kind!==`local`)return{agentServerVersion:null};let t=await new l.ServerClient(p.getAgentServerClientOptions({host:e.host,sessionApiKey:e.apiKey||null,timeout:5e3})).getServerInfo();return m.assertAgentServerVersionIsSupported(t),{agentServerVersion:m.getDisplayAgentServerVersion(t)}}function J({backend:e,testIdRoot:r}){let{t:i}=t.useTranslation(`openhands`),a=T.useBackendsHealth([e])[e.id],o=a?.isConnected??null,s=a?.disabled===!0,c=a?.consecutiveFailures??0,u=a?.lastError??null,{data:d}=h.useQuery({queryKey:[`backend-version`,e.host,e.apiKey],queryFn:async()=>m.getDisplayAgentServerVersion(await new l.ServerClient(p.getAgentServerClientOptions({host:e.host,sessionApiKey:e.apiKey||null,timeout:5e3})).getServerInfo()),retry:!1,staleTime:6e4,enabled:e.kind===`local`&&!s}),f=A.getBackendStatusLabel(i,e,a),g=e.kind===`cloud`?i(n.I18nKey.BACKEND$KIND_CLOUD):i(n.I18nKey.BACKEND$KIND_LOCAL);return(0,P.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,P.jsxs)(`div`,{"data-testid":`${r}-status`,className:`flex items-center gap-3 text-sm`,children:[(0,P.jsx)(j.BackendStatusDot,{isConnected:o}),(0,P.jsx)(`span`,{className:`text-white`,"data-testid":`${r}-status-label`,children:f}),(0,P.jsx)(`span`,{className:`text-tertiary-alt`,children:`·`}),(0,P.jsx)(`span`,{className:`text-[var(--oh-text-tertiary)]`,children:g}),d?(0,P.jsx)(`span`,{className:`text-xs text-[var(--oh-muted)]`,"data-testid":`${r}-version`,children:i(n.I18nKey.BACKEND$VERSION_LABEL,{version:d})}):null]}),s?(0,P.jsxs)(`div`,{"data-testid":`${r}-status-error`,className:`flex flex-col gap-1 rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm`,children:[(0,P.jsx)(`span`,{className:`font-semibold text-red-300`,children:i(n.I18nKey.BACKEND$HEALTH_FAILED_TITLE)}),(0,P.jsx)(`span`,{className:`text-xs text-[var(--oh-text-tertiary)]`,children:i(n.I18nKey.BACKEND$HEALTH_FAILED_DETAIL,{count:c})}),u?(0,P.jsx)(`span`,{"data-testid":`${r}-status-error-message`,className:`text-xs text-red-300 whitespace-pre-wrap break-words`,children:u}):null]}):null]})}function Y({initialName:e=``,initialHost:n=``,initialApiKey:r=``,onTestConnection:i,onSuccess:a,requireApiKey:o=!1,onSubmitOverride:s,fixedKind:c}){let{t:l}=t.useTranslation(`openhands`),[u,d]=N.default.useState(e),[f,p]=N.default.useState(n),[m,h]=N.default.useState(r),[g,_]=N.default.useState(null),[v,y]=N.default.useState(!1),[b,x]=N.default.useState(null),S=c??b??F(f),C=o||S!==`local`,w=u.trim().length>0&&R(f)&&(!C||m.trim().length>0);return{name:u,setName:d,host:f,setHost:p,apiKey:m,setApiKey:h,connectionError:g,setConnectionError:_,isSubmitting:v,kind:S,setKind:x,canSubmit:w,handleSubmit:N.default.useCallback(async e=>{if(e.preventDefault(),!w||v)return;let t={name:u.trim(),host:L(f),apiKey:m.trim(),kind:S};_(null),y(!0);try{s?await s(t):a(await i(t))}catch(e){_(K(W(l,t.host),e))}finally{y(!1)}},[w,v,u,f,m,S,i,a,o,s,c,l])}}function X({mode:e,backend:r,onSubmitted:i,renderActions:a,testIdRoot:o,hostReadOnly:c,requireApiKey:l,hideConfigurationFields:u=!1,onSubmitOverride:d}){let{t:f}=t.useTranslation(`openhands`),{addBackend:p,updateBackend:m}=g.useActiveBackendContext(),h=e===`edit`&&r?r.kind:null,{name:_,setName:v,host:y,setHost:b,apiKey:x,setApiKey:w,connectionError:T,setConnectionError:E,isSubmitting:D,kind:O,handleSubmit:k}=Y({initialName:r?.name??``,initialHost:r?.host??``,initialApiKey:r?.apiKey??``,onTestConnection:q,onSuccess:async()=>{let t={name:_.trim(),host:L(y),apiKey:x.trim(),kind:h??O};e===`edit`&&r?m(r.id,t):p(t),i()},requireApiKey:l,onSubmitOverride:d}),[A,j]=N.default.useState(!1),[M,F]=N.default.useState(!1),I=h??O,B=o??(e===`edit`?`edit-backend`:`add-backend`),V=l||I!==`local`,H=_.trim().length>0&&R(y)&&(!V||x.trim().length>0),U=A&&!_.trim()?f(n.I18nKey.BACKEND$NAME_REQUIRED):void 0,W=M?y.trim()?R(y)?void 0:f(n.I18nKey.BACKEND$HOST_INVALID):f(n.I18nKey.BACKEND$HOST_REQUIRED):void 0;return(0,P.jsxs)(`form`,{"data-testid":`${B}-form`,onSubmit:async e=>{if(!H){j(!0),F(!0);return}await k(e)},className:`flex flex-col gap-4`,children:[(0,P.jsxs)(`div`,{"data-testid":`${B}-configuration-fields`,className:s.cn(`flex flex-col gap-4`,u&&`hidden`),children:[(0,P.jsx)(C.SettingsInput,{testId:`${B}-name`,name:`${B}-name`,type:`text`,label:f(n.I18nKey.BACKEND$NAME_LABEL),value:_,onChange:e=>{v(e),E(null)},onBlur:()=>j(!0),placeholder:`Production`,className:`w-full`,showRequiredTag:!0,error:U}),(0,P.jsx)(C.SettingsInput,{testId:`${B}-host`,name:`${B}-host`,type:`text`,label:f(n.I18nKey.BACKEND$HOST_LABEL),value:y,onChange:c?void 0:e=>{b(e),E(null)},onBlur:()=>F(!0),placeholder:z,className:`w-full`,showRequiredTag:!0,error:W,isDisabled:c}),(0,P.jsx)(C.SettingsInput,{testId:`${B}-api-key`,name:`${B}-api-key`,type:`password`,label:f(n.I18nKey.BACKEND$KEY_LABEL),value:x,onChange:e=>{w(e),E(null)},placeholder:``,className:`w-full`}),T?(0,P.jsx)(`div`,{role:`alert`,"data-testid":`${B}-error`,className:`rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words`,children:T}):null,e===`edit`&&r&&(0,P.jsx)(J,{backend:r,testIdRoot:B})]}),a?a({canSubmit:H&&!D,isSubmitting:D,testIdRoot:B}):(0,P.jsxs)(`div`,{className:`flex justify-end gap-2 mt-2 w-full`,children:[(0,P.jsx)(S.BrandButton,{type:`button`,variant:`secondary`,onClick:i,testId:`${B}-cancel`,children:f(n.I18nKey.BUTTON$CANCEL)}),(0,P.jsx)(S.BrandButton,{type:`submit`,variant:`primary`,isDisabled:!H||D,testId:`${B}-submit`,children:f(n.I18nKey.BACKEND$SAVE)})]})]})}function Z(){let{currentPath:e,navigate:t}=c.useNavigation();return N.default.useCallback(()=>{/^\/automations\/[^/]+/.test(e)?t(`/automations`):/^\/conversations\/[^/]+/.test(e)&&t(`/conversations`)},[e,t])}function ee({onConnected:e,testIdRoot:r,initialBackend:i,requireApiKey:a,submitLabel:o,submittingLabel:s,submitTestId:c,fixedKind:l,showKindSelector:u=!0}){let{t:d}=t.useTranslation(`openhands`),{name:f,setName:p,host:m,setHost:h,apiKey:g,setApiKey:_,connectionError:v,setConnectionError:y,isSubmitting:b,kind:x,setKind:T,canSubmit:E,handleSubmit:D}=Y({initialName:i?.name??``,initialHost:i?.host??``,initialApiKey:i?.apiKey??``,onTestConnection:q,onSuccess:t=>{e({name:f.trim(),host:L(m),apiKey:g.trim(),kind:x},`manual`,t)},requireApiKey:a,fixedKind:l});return(0,P.jsxs)(`form`,{"data-testid":`${r}-form`,onSubmit:D,className:`flex flex-col gap-4 flex-1 min-w-0`,children:[(0,P.jsx)(C.SettingsInput,{testId:`${r}-name`,name:`${r}-name`,type:`text`,label:d(n.I18nKey.BACKEND$NAME_LABEL),hint:d(n.I18nKey.BACKEND$NAME_HELPER),value:f,onChange:e=>{p(e),y(null)},placeholder:`e.g. My Server`,className:`w-full`}),(0,P.jsx)(C.SettingsInput,{testId:`${r}-host`,name:`${r}-host`,type:`text`,label:d(n.I18nKey.BACKEND$HOST_LABEL),hint:d(n.I18nKey.BACKEND$HOST_HELPER),value:m,onChange:e=>{h(e),y(null)},placeholder:`http://localhost:8000`,className:`w-full`}),u?(0,P.jsxs)(`div`,{className:`flex flex-col items-start gap-2.5`,children:[(0,P.jsx)(`span`,{className:`text-sm`,children:d(n.I18nKey.BACKEND$KIND_LABEL)}),(0,P.jsx)(w.SegmentedToggle,{value:x,options:[{value:`local`,label:d(n.I18nKey.BACKEND$KIND_LOCAL)},{value:`cloud`,label:d(n.I18nKey.BACKEND$KIND_CLOUD)}],onChange:e=>T(e),ariaLabel:d(n.I18nKey.BACKEND$KIND_LABEL),testId:`${r}-kind`})]}):null,(0,P.jsx)(C.SettingsInput,{testId:`${r}-api-key`,name:`${r}-api-key`,type:`password`,label:d(n.I18nKey.BACKEND$KEY_LABEL),value:g,onChange:e=>{_(e),y(null)},placeholder:`sk-••••••••••`,className:`w-full`}),v?(0,P.jsx)(`div`,{role:`alert`,"data-testid":`${r}-error`,className:`rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words`,children:v}):null,(0,P.jsx)(S.BrandButton,{type:`submit`,variant:`secondary`,isDisabled:!E||b,testId:c??`${r}-submit`,className:`w-full text-center`,children:b?s:o})]})}function Q({onConnected:e,testIdRoot:r,lockedHost:i,analyticsSource:a,showBranding:o=!0}){let{t:c}=t.useTranslation(`openhands`),[l,u]=N.default.useState(!1),[d,f]=N.default.useState(``),p=`${r}-advanced-panel`,m=i??(d.trim()||z);return(0,P.jsxs)(`div`,{className:`flex w-full min-w-0 flex-col items-center gap-3`,children:[o?(0,P.jsxs)(`div`,{className:`flex flex-col items-center gap-1`,children:[(0,P.jsx)(E.default,{width:56,height:56,"aria-hidden":!0}),(0,P.jsx)(`h4`,{className:b.modalTitleLgMediumClassName,"data-testid":`${r}-cloud-title`,children:c(n.I18nKey.BACKEND$CLOUD_TITLE)})]}):null,(0,P.jsx)(M.DeviceFlowAuth,{host:m,onSuccess:t=>{e({name:`OpenHands Cloud`,host:L(m),apiKey:t,kind:`cloud`},`cloud_login`)},testIdRoot:r,analyticsSource:a,className:`w-full items-center`,idleDescription:(0,P.jsx)(`p`,{className:`text-center text-sm leading-relaxed text-[var(--oh-muted)]`,"data-testid":`${r}-cloud-description`,children:c(n.I18nKey.BACKEND$CLOUD_DESCRIPTION)}),idleFooter:i?null:(0,P.jsxs)(`div`,{className:`mx-auto w-full max-w-md`,children:[(0,P.jsxs)(`button`,{type:`button`,onClick:()=>u(e=>!e),"aria-expanded":l,"aria-controls":p,"data-testid":`${r}-advanced-toggle`,className:`flex w-full cursor-pointer items-center justify-center gap-1 text-center text-xs text-[var(--oh-muted)] transition-colors hover:text-content-2`,children:[(0,P.jsx)(`span`,{children:c(n.I18nKey.BACKEND$ADVANCED)}),(0,P.jsx)(D.default,{className:s.cn(`h-4 w-4 shrink-0 text-muted transition-transform duration-200 ease-out`,l&&`rotate-180`),"aria-hidden":!0})]}),(0,P.jsx)(`div`,{className:s.cn(`grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none`,l?`grid-rows-[1fr]`:`grid-rows-[0fr]`),children:(0,P.jsx)(`div`,{className:`overflow-hidden`,children:(0,P.jsxs)(`div`,{id:p,"data-testid":`${r}-advanced-panel`,"aria-hidden":!l,inert:l?void 0:!0,className:s.cn(`pt-3 transition-opacity duration-200 ease-out motion-reduce:transition-none`,l?`opacity-100`:`opacity-0`),children:[(0,P.jsx)(C.SettingsInput,{testId:`${r}-cloud-host`,name:`${r}-cloud-host`,type:`text`,label:c(n.I18nKey.BACKEND$HOST_LABEL),value:d,onChange:f,placeholder:z,className:`w-full`}),(0,P.jsx)(`p`,{className:`mt-1 text-xs text-[var(--oh-muted)]`,children:c(n.I18nKey.BACKEND$LOGIN_CLOUD_HINT)})]})})})]})})]})}function $({value:e,selectedValue:t,title:n,description:r,icon:i,onSelect:a,panelId:o,testId:c}){let l=e===t;return(0,P.jsxs)(`button`,{id:`${c}-tab`,type:`button`,role:`tab`,"aria-selected":l,"aria-controls":o,"data-testid":c,onClick:()=>a(e),className:s.cn(`relative flex min-h-16 w-full cursor-pointer items-center gap-3 px-3 py-3 text-left transition-colors`,`first:border-r first:border-r-[var(--oh-border)]`,`focus-visible:z-10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-300`,l?`bg-[var(--oh-surface-raised)] text-white after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-primary`:`text-[var(--oh-muted)] hover:bg-[var(--oh-surface-raised)] hover:text-white`),children:[(0,P.jsx)(`span`,{className:`flex size-8 shrink-0 items-center justify-center`,"aria-hidden":!0,children:i}),(0,P.jsxs)(`span`,{className:`min-w-0 flex-1`,children:[(0,P.jsx)(`span`,{className:`block truncate text-sm font-medium`,children:n}),(0,P.jsx)(`span`,{className:`mt-0.5 block text-xs leading-tight text-[var(--oh-muted)]`,children:r})]})]})}function te({children:e}){let t=N.default.useRef(null),[n,r]=N.default.useState();return N.default.useLayoutEffect(()=>{let e=t.current;if(!e)return;let n=()=>{let t=e.getBoundingClientRect().height;r(t>0?t:void 0)};if(n(),typeof ResizeObserver>`u`)return;let i=new ResizeObserver(n);return i.observe(e),()=>i.disconnect()},[]),(0,P.jsx)(`div`,{"data-testid":`add-backend-panel-height`,style:n===void 0?void 0:{height:n},className:`overflow-hidden transition-[height] duration-300 ease-in-out motion-reduce:transition-none`,children:(0,P.jsx)(`div`,{ref:t,children:e})})}function ne({location:e}){let{t:i}=t.useTranslation(`openhands`),[o,c]=N.default.useState(!1),l=e===`remote`,u=i(l?n.I18nKey.BACKEND$REMOTE_SETUP_TITLE:n.I18nKey.BACKEND$BEFORE_CONNECT_TITLE),d=i(l?n.I18nKey.BACKEND$REMOTE_SETUP_DESCRIPTION:n.I18nKey.BACKEND$LOCAL_SETUP_DESCRIPTION),f=l?H:V,p=i(l?n.I18nKey.BACKEND$REMOTE_SETUP_DOCS:n.I18nKey.BACKEND$LOCAL_SETUP_DOCS),m=l?`add-backend-remote`:`add-backend-local`,h=`${m}-guidance-toggle`,g=`${m}-guidance-body`;return(0,P.jsxs)(`aside`,{"data-testid":`${m}-guidance`,className:`rounded-lg bg-[var(--oh-surface-raised)] text-sm text-[var(--oh-muted)]`,children:[(0,P.jsx)(`h4`,{className:`text-white`,children:(0,P.jsxs)(`button`,{id:h,type:`button`,onClick:()=>c(e=>!e),"aria-expanded":o,"aria-controls":g,"data-testid":h,className:s.cn(`flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg px-3 py-2 text-left font-medium`,`transition-colors hover:bg-[var(--oh-interactive-hover)]`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-300`),children:[(0,P.jsxs)(`span`,{className:`flex min-w-0 items-center gap-2`,children:[(0,P.jsx)(a.Info,{className:`size-4 shrink-0 text-[var(--oh-muted)]`,"aria-hidden":!0}),(0,P.jsx)(`span`,{className:`truncate`,children:u})]}),(0,P.jsx)(r.ChevronDown,{className:s.cn(`size-5 shrink-0 text-[var(--oh-muted)] transition-transform duration-200 ease-out`,o&&`rotate-180`),"aria-hidden":!0})]})}),(0,P.jsx)(`div`,{className:s.cn(`grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none`,o?`grid-rows-[1fr]`:`grid-rows-[0fr]`),children:(0,P.jsx)(`div`,{className:`overflow-hidden`,children:(0,P.jsxs)(`div`,{id:g,"data-testid":g,role:`region`,"aria-labelledby":h,"aria-hidden":!o,inert:o?void 0:!0,className:s.cn(`flex flex-col gap-2 px-3 pb-3 transition-opacity duration-200 ease-out motion-reduce:transition-none`,o?`opacity-100`:`opacity-0`),children:[(0,P.jsx)(`p`,{className:`leading-5`,children:d}),l?(0,P.jsxs)(`div`,{children:[(0,P.jsx)(`h5`,{className:`font-medium text-white`,children:i(n.I18nKey.BACKEND$REMOTE_CONNECTION_TITLE)}),(0,P.jsx)(`p`,{className:`mt-1 leading-5`,children:i(n.I18nKey.BACKEND$REMOTE_CONNECTION_DESCRIPTION)})]}):(0,P.jsx)(`code`,{className:`block break-words font-mono text-xs text-white`,children:B}),(0,P.jsxs)(`a`,{href:f,target:`_blank`,rel:`noopener noreferrer`,"data-testid":`${m}-docs-link`,tabIndex:o?void 0:-1,className:`inline-flex w-fit items-center gap-1.5 text-primary hover:underline`,children:[(0,P.jsx)(`span`,{children:p}),(0,P.jsx)(O.default,{className:`size-4 shrink-0`,"aria-hidden":!0})]})]})})})]})}function re({onConnected:e,source:r}){let{t:a}=t.useTranslation(`openhands`),[c,l]=N.default.useState(`cloud`),[u,d]=N.default.useState(`local`),f=`add-backend-selected-panel`,p=`add-backend-option-${c}-tab`,m=c===`cloud`;return(0,P.jsxs)(`div`,{"data-testid":`add-backend-chooser`,className:`flex flex-col`,children:[(0,P.jsxs)(`div`,{role:`tablist`,"aria-label":a(n.I18nKey.BACKEND$CHOOSER_TITLE),className:`grid grid-cols-2 overflow-hidden rounded-lg border border-[var(--oh-border)]`,children:[(0,P.jsx)($,{value:`cloud`,selectedValue:c,title:a(n.I18nKey.BACKEND$CLOUD_TITLE),description:a(n.I18nKey.BACKEND$CLOUD_OPTION_DESCRIPTION),icon:(0,P.jsx)(E.default,{width:32,height:32,"data-testid":`add-backend-option-cloud-logo`}),onSelect:l,panelId:f,testId:`add-backend-option-cloud`}),(0,P.jsx)($,{value:`agent-server`,selectedValue:c,title:a(n.I18nKey.BACKEND$AGENT_SERVER_TITLE),description:a(n.I18nKey.BACKEND$AGENT_SERVER_OPTION_DESCRIPTION),icon:(0,P.jsx)(k.default,{className:`size-6`}),onSelect:l,panelId:f,testId:`add-backend-option-agent-server`})]}),(0,P.jsx)(`div`,{className:`mt-6`,children:(0,P.jsx)(te,{children:(0,P.jsx)(`section`,{id:f,role:`tabpanel`,"aria-labelledby":p,className:`min-w-0`,children:m?(0,P.jsx)(`div`,{"data-testid":`add-backend-cloud-panel`,className:s.cn(`relative isolate flex min-h-[13.5rem] w-full items-center justify-center rounded-xl border border-[var(--oh-border)] px-5 py-6`,`before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-xl`,`before:bg-[radial-gradient(75%_75%_at_50%_50%,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0)_70%)]`),children:(0,P.jsx)(Q,{onConnected:e,testIdRoot:`add-backend`,analyticsSource:r,showBranding:!1})}):(0,P.jsxs)(`div`,{"data-testid":`add-backend-agent-server-panel`,className:`mx-auto w-full max-w-xl`,children:[(0,P.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,P.jsx)(`span`,{className:`h-px flex-1 bg-[var(--oh-border)]`,"aria-hidden":!0}),(0,P.jsx)(w.SegmentedToggle,{value:u,options:[{value:`local`,label:a(n.I18nKey.BACKEND$KIND_LOCAL),icon:(0,P.jsx)(o.Monitor,{"aria-hidden":!0})},{value:`remote`,label:a(n.I18nKey.BACKEND$KIND_REMOTE),icon:(0,P.jsx)(i.Globe,{"aria-hidden":!0})}],onChange:d,ariaLabel:a(n.I18nKey.BACKEND$AGENT_SERVER_LOCATION),testId:`add-backend-location`}),(0,P.jsx)(`span`,{className:`h-px flex-1 bg-[var(--oh-border)]`,"aria-hidden":!0})]}),(0,P.jsxs)(`div`,{className:`mt-4 flex flex-col gap-4`,children:[(0,P.jsx)(ne,{location:u},u),(0,P.jsx)(ee,{onConnected:e,testIdRoot:`add-backend`,requireApiKey:u===`remote`,submitLabel:a(n.I18nKey.BACKEND$CONNECT),submittingLabel:a(n.I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING),fixedKind:`local`,showKindSelector:!1})]})]})})})})]})}function ie({onClose:e,source:t}){let{addBackend:n}=g.useActiveBackendContext(),r=Z(),{trackBackendAdded:i}=_.useTracking(),a=d.getLockedCloudHost(),o=N.default.useCallback((a,o,s)=>{n(a),i({backendKind:a.kind,connectionMethod:o,hasApiKey:!!a.apiKey,source:t,agentServerVersion:s?.agentServerVersion}),r(),e()},[n,r,e,i,t]);return a?(0,P.jsx)(Q,{onConnected:o,testIdRoot:`add-backend`,lockedHost:a,analyticsSource:t}):(0,P.jsx)(re,{onConnected:o,source:t})}function ae({mode:e,backend:r,onClose:i,source:a=`add_backend_modal`,hideCloseButton:o=!1}){let{t:c}=t.useTranslation(`openhands`);if(e===`add`)return(0,P.jsx)(v.ModalBackdrop,{onClose:o?void 0:i,closeOnEscape:!1,closeOnBackdropClick:!o,"aria-label":c(n.I18nKey.BACKEND$ADD_TITLE),children:(0,P.jsxs)(`div`,{"data-testid":o?`onboarding-modal`:`add-backend-modal`,className:s.cn(`relative max-h-[92vh] w-[720px] overflow-y-auto rounded-xl border border-[var(--oh-border)] bg-base-secondary p-6`,y.MODAL_MAX_WIDTH_VIEWPORT),children:[o?null:(0,P.jsx)(x.ModalCloseButton,{onClose:i,testId:`add-backend-close`}),o?null:(0,P.jsxs)(`div`,{className:`pr-8`,children:[(0,P.jsx)(`h2`,{className:b.modalTitleLgClassName,children:c(n.I18nKey.BACKEND$CHOOSER_TITLE)}),(0,P.jsxs)(`p`,{className:`mt-2 text-sm leading-6 text-[var(--oh-muted)]`,"data-testid":`add-backend-description`,children:[c(n.I18nKey.BACKEND$CHOOSER_DESCRIPTION),` `,(0,P.jsxs)(`a`,{href:U,target:`_blank`,rel:`noopener noreferrer`,"aria-label":c(n.I18nKey.BACKEND$DEPLOYMENT_OPTIONS),"data-testid":`add-backend-deployment-options-link`,className:`text-primary hover:underline`,children:[c(n.I18nKey.CTA$LEARN_MORE),(0,P.jsx)(O.default,{className:`ml-1 inline size-3.5 align-[-0.125em]`,"aria-hidden":!0})]})]})]}),(0,P.jsx)(`div`,{className:o?void 0:`mt-5`,children:(0,P.jsx)(ie,{onClose:i,source:a})})]})});let l=`edit-backend`;return(0,P.jsx)(v.ModalBackdrop,{onClose:i,closeOnEscape:!1,"aria-label":c(n.I18nKey.BACKEND$EDIT_TITLE),children:(0,P.jsxs)(`div`,{"data-testid":`${l}-modal`,className:s.cn(`relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]`,y.modalWidthClassName(`md`)),children:[(0,P.jsx)(x.ModalCloseButton,{onClose:i,testId:`${l}-close`}),(0,P.jsx)(`h2`,{className:s.cn(`pr-6`,b.modalTitleLgClassName),children:c(n.I18nKey.BACKEND$EDIT_TITLE)}),(0,P.jsx)(X,{mode:`edit`,backend:r,onSubmitted:i,testIdRoot:l})]})})}exports.BackendFormModal=ae;
 //# sourceMappingURL=backend-form-modal.cjs.map

package/dist/components/features/backends/backend-form-modal.js

@@ -22,9 +22,9 @@ import { modalTitleLgClassName as x, modalTitleLgMediumClassName as S } from "..
 import { ModalCloseButton as C } from "../../shared/modals/modal-close-button.js";
 import { BrandButton as w } from "../settings/brand-button.js";
 import { SettingsInput as T } from "../settings/settings-input.js";
-import { useBackendsHealth as E } from "../../../hooks/query/use-backends-health.js";
-import D from "../../../assets/branding/openhands-logo-white.js";
-import { SegmentedToggle as O } from "../files-tab/segmented-toggle.js";
+import { SegmentedToggle as E } from "../files-tab/segmented-toggle.js";
+import { useBackendsHealth as D } from "../../../hooks/query/use-backends-health.js";
+import O from "../../../assets/branding/openhands-logo-white.js";
 import "../../../api/device-flow-client.js";
 import k from "../../../icons/chevron-down-small.js";
 import A from "../../../icons/external-link.js";
@@ -85,7 +85,7 @@ async function X(e) {
 	return p(t), { agentServerVersion: m(t) };
 }
 function ee({ backend: n, testIdRoot: r }) {
-	let { t: i } = e("openhands"), a = E([n])[n.id], o = a?.isConnected ?? null, s = a?.disabled === !0, l = a?.consecutiveFailures ?? 0, u = a?.lastError ?? null, { data: d } = h({
+	let { t: i } = e("openhands"), a = D([n])[n.id], o = a?.isConnected ?? null, s = a?.disabled === !0, l = a?.consecutiveFailures ?? 0, u = a?.lastError ?? null, { data: d } = h({
 		queryKey: [
 			"backend-version",
 			n.host,
@@ -309,7 +309,7 @@ function ne() {
 	}, [e, t]);
 }
 function re({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a, submitLabel: o, submittingLabel: s, submitTestId: c, fixedKind: l, showKindSelector: u = !0 }) {
-	let { t: d } = e("openhands"), { name: f, setName: p, host: m, setHost: h, apiKey: g, setApiKey: _, connectionError: v, setConnectionError: y, isSubmitting: b, kind: x, setKind: S, canSubmit: C, handleSubmit: E } = Z({
+	let { t: d } = e("openhands"), { name: f, setName: p, host: m, setHost: h, apiKey: g, setApiKey: _, connectionError: v, setConnectionError: y, isSubmitting: b, kind: x, setKind: S, canSubmit: C, handleSubmit: D } = Z({
 		initialName: i?.name ?? "",
 		initialHost: i?.host ?? "",
 		initialApiKey: i?.apiKey ?? "",
@@ -327,7 +327,7 @@ function re({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a
 	});
 	return /* @__PURE__ */ L("form", {
 		"data-testid": `${r}-form`,
-		onSubmit: E,
+		onSubmit: D,
 		className: "flex flex-col gap-4 flex-1 min-w-0",
 		children: [
 			/* @__PURE__ */ I(T, {
@@ -361,7 +361,7 @@ function re({ onConnected: n, testIdRoot: r, initialBackend: i, requireApiKey: a
 				children: [/* @__PURE__ */ I("span", {
 					className: "text-sm",
 					children: d(t.BACKEND$KIND_LABEL)
-				}), /* @__PURE__ */ I(O, {
+				}), /* @__PURE__ */ I(E, {
 					value: x,
 					options: [{
 						value: "local",
@@ -410,7 +410,7 @@ function Q({ onConnected: n, testIdRoot: r, lockedHost: i, analyticsSource: a, s
 		className: "flex w-full min-w-0 flex-col items-center gap-3",
 		children: [s ? /* @__PURE__ */ L("div", {
 			className: "flex flex-col items-center gap-1",
-			children: [/* @__PURE__ */ I(D, {
+			children: [/* @__PURE__ */ I(O, {
 				width: 56,
 				height: 56,
 				"aria-hidden": !0
@@ -617,7 +617,7 @@ function oe({ onConnected: n, source: i }) {
 				selectedValue: c,
 				title: s(t.BACKEND$CLOUD_TITLE),
 				description: s(t.BACKEND$CLOUD_OPTION_DESCRIPTION),
-				icon: /* @__PURE__ */ I(D, {
+				icon: /* @__PURE__ */ I(O, {
 					width: 32,
 					height: 32,
 					"data-testid": "add-backend-option-cloud-logo"
@@ -661,7 +661,7 @@ function oe({ onConnected: n, source: i }) {
 								className: "h-px flex-1 bg-[var(--oh-border)]",
 								"aria-hidden": !0
 							}),
-							/* @__PURE__ */ I(O, {
+							/* @__PURE__ */ I(E, {
 								value: u,
 								options: [{
 									value: "local",