@openhands/agent-canvas 1.13.0 → 1.15.0

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

@@ -0,0 +1,127 @@
+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, getIntegrationIds as i } from "../../../utils/automation-catalog.js";
+import { readScrollFadeState as a } from "../../../utils/scroll-fade-state.js";
+import { extensionModuleCardInteractiveClassName as o, extensionModuleCardSurfaceClassName as s } from "../../../utils/extension-module-card-classes.js";
+import c from "../../../node_modules/@openhands/extensions/integrations/index.js";
+import { McpLogoBadge as l } from "../mcp-logo-badge.js";
+import { getMarketplaceEntryById as u } from "../../../utils/mcp-marketplace-utils.js";
+import { flattenRecommendedRailGroups as d, getRecommendedRailGroups as f } from "../../../utils/recommended-automation-rail.js";
+import { useDragScroll as p } from "../../../hooks/use-drag-scroll.js";
+import { AUTOMATION_STACK_SECTION_BOTTOM_CLASS as m } from "../../../utils/automation-stack-section.js";
+import { createElement as h, useCallback as g, useLayoutEffect as _, useRef as v, useState as y } from "react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/features/automations/recommended-automations-rail.tsx
+var S = "flex h-10 items-start";
+function C(e) {
+	return i(e).flatMap((e) => {
+		let t = u(e, c);
+		return t ? [t] : [];
+	});
+}
+function w({ automation: e, entries: t, testId: i }) {
+	let a = t.slice(0, 4), o = a.length > 1, s = r(e);
+	return /* @__PURE__ */ b("span", {
+		"aria-hidden": "true",
+		"data-testid": i,
+		"data-layout": o && !s ? "overlap" : void 0,
+		className: n(S, o && !s && "-space-x-2"),
+		children: s ? /* @__PURE__ */ b(l, {
+			entry: null,
+			size: "base",
+			fallback: h(s, {
+				className: "h-5 w-5",
+				strokeWidth: 2.25
+			})
+		}) : a.length === 0 ? /* @__PURE__ */ b(l, {
+			entry: null,
+			size: "base"
+		}) : a.map((e) => /* @__PURE__ */ b(l, {
+			entry: e,
+			size: "base",
+			className: o ? "ring-2 ring-[var(--oh-color-base-secondary)]" : void 0
+		}, e.id))
+	});
+}
+function T({ installedAutomations: r, onSelect: i, className: c }) {
+	let { t: l } = e("openhands"), u = d(f(r)), h = v(null), { handleMouseDown: S, handleClickCapture: T, handleDragStart: E } = p(h), [D, O] = y({
+		left: !1,
+		right: !1
+	}), k = g(() => {
+		let e = h.current;
+		if (!e) return;
+		let t = a(e);
+		O((e) => e.left === t.left && e.right === t.right ? e : t);
+	}, []);
+	return _(() => {
+		k();
+		let e = h.current;
+		if (!e) return;
+		let t = new ResizeObserver(k);
+		return t.observe(e), Array.from(e.children).forEach((e) => {
+			t.observe(e);
+		}), () => t.disconnect();
+	}, [k, u.map((e) => e.id).join(",")]), u.length === 0 ? null : /* @__PURE__ */ x("section", {
+		"data-testid": "recommended-automations-rail",
+		"aria-label": l(t.RECOMMENDED_AUTOMATIONS$SECTION_LABEL),
+		className: n("w-full", m, c),
+		children: [/* @__PURE__ */ b("h2", {
+			className: "mb-2 text-sm font-medium text-[var(--oh-foreground)]",
+			children: l(t.RECOMMENDED_AUTOMATIONS$SECTION_LABEL)
+		}), /* @__PURE__ */ x("div", {
+			className: "relative",
+			children: [
+				/* @__PURE__ */ b("div", {
+					ref: h,
+					role: "list",
+					"data-testid": "recommended-automations-rail-scroll",
+					onScroll: k,
+					onMouseDown: S,
+					onClickCapture: T,
+					onDragStart: E,
+					className: "flex flex-nowrap gap-3 overflow-x-auto scrollbar-hide select-none",
+					children: u.map((e) => /* @__PURE__ */ b("div", {
+						role: "listitem",
+						children: /* @__PURE__ */ x("button", {
+							type: "button",
+							"data-testid": `recommended-automation-rail-card-${e.id}`,
+							onClick: () => i(e),
+							className: n("flex w-[220px] shrink-0 flex-col gap-3 p-3 text-left", s, o),
+							children: [/* @__PURE__ */ b(w, {
+								automation: e,
+								entries: C(e),
+								testId: `recommended-automation-rail-icon-${e.id}`
+							}), /* @__PURE__ */ x("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ b("h3", {
+									className: "truncate text-sm font-semibold text-white",
+									children: e.name
+								}), /* @__PURE__ */ b("p", {
+									className: "mt-0.5 line-clamp-2 text-xs leading-relaxed text-tertiary-light",
+									children: e.description
+								})]
+							})]
+						})
+					}, e.id))
+				}),
+				/* @__PURE__ */ b("div", {
+					"aria-hidden": !0,
+					"data-testid": "recommended-automations-rail-fade-left",
+					"data-visible": D.left ? "true" : "false",
+					className: n("pointer-events-none absolute inset-y-0 left-0 z-10 w-10", "bg-gradient-to-r from-[var(--oh-scroll-fade-from,var(--oh-color-base))] to-transparent", "transition-opacity duration-300 ease-out motion-reduce:transition-none", D.left ? "opacity-100" : "opacity-0")
+				}),
+				/* @__PURE__ */ b("div", {
+					"aria-hidden": !0,
+					"data-testid": "recommended-automations-rail-fade-right",
+					"data-visible": D.right ? "true" : "false",
+					className: n("pointer-events-none absolute inset-y-0 right-0 z-10 w-10", "bg-gradient-to-l from-[var(--oh-scroll-fade-from,var(--oh-color-base))] to-transparent", "transition-opacity duration-300 ease-out motion-reduce:transition-none", D.right ? "opacity-100" : "opacity-0")
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { T as RecommendedAutomationsRail };
+
+//# sourceMappingURL=recommended-automations-rail.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"recommended-automations-rail.js","names":[],"sources":["../../../../src/components/features/automations/recommended-automations-rail.tsx"],"sourcesContent":["import {\n  createElement,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport type { RecommendedAutomation } from \"@openhands/extensions/automations\";\nimport {\n  INTEGRATION_CATALOG as MCP_MARKETPLACE,\n  type IntegrationCatalogEntry as MarketplaceEntry,\n} from \"@openhands/extensions/integrations\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { McpLogoBadge } from \"#/components/features/mcp-logo-badge\";\nimport { getMarketplaceEntryById } from \"#/utils/mcp-marketplace-utils\";\nimport {\n  getAutomationIcon,\n  getIntegrationIds,\n} from \"#/utils/automation-catalog\";\nimport {\n  flattenRecommendedRailGroups,\n  getRecommendedRailGroups,\n} from \"#/utils/recommended-automation-rail\";\nimport { readScrollFadeState } from \"#/utils/scroll-fade-state\";\nimport { useDragScroll } from \"#/hooks/use-drag-scroll\";\nimport type { Automation } from \"#/types/automation\";\nimport { AUTOMATION_STACK_SECTION_BOTTOM_CLASS } from \"#/utils/automation-stack-section\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  extensionModuleCardInteractiveClassName,\n  extensionModuleCardSurfaceClassName,\n} from \"#/utils/extension-module-card-classes\";\n\ninterface RecommendedAutomationsRailProps {\n  installedAutomations: readonly Pick<Automation, \"name\">[];\n  onSelect: (automation: RecommendedAutomation) => void;\n  className?: string;\n}\n\n/** Current catalog tiles reserve 40px for the icon; keep that row height. */\nconst RAIL_ICON_ROW_CLASS_NAME = \"flex h-10 items-start\";\n\nfunction integrationEntries(\n  automation: RecommendedAutomation,\n): MarketplaceEntry[] {\n  return getIntegrationIds(automation).flatMap((id) => {\n    const entry = getMarketplaceEntryById(id, MCP_MARKETPLACE);\n    return entry ? [entry] : [];\n  });\n}\n\nfunction RailIntegrationIcons({\n  automation,\n  entries,\n  testId,\n}: {\n  automation: RecommendedAutomation;\n  entries: MarketplaceEntry[];\n  testId: string;\n}) {\n  const visibleEntries = entries.slice(0, 4);\n  const isOverlap = visibleEntries.length > 1;\n  // A declared glyph replaces the logos rather than joining them: it is the\n  // whole identity of an entry that names one.\n  const Icon = getAutomationIcon(automation);\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-testid={testId}\n      data-layout={isOverlap && !Icon ? \"overlap\" : undefined}\n      className={cn(\n        RAIL_ICON_ROW_CLASS_NAME,\n        isOverlap && !Icon && \"-space-x-2\",\n      )}\n    >\n      {Icon ? (\n        <McpLogoBadge\n          entry={null}\n          size=\"base\"\n          fallback={createElement(Icon, {\n            className: \"h-5 w-5\",\n            strokeWidth: 2.25,\n          })}\n        />\n      ) : visibleEntries.length === 0 ? (\n        <McpLogoBadge entry={null} size=\"base\" />\n      ) : (\n        visibleEntries.map((entry) => (\n          <McpLogoBadge\n            key={entry.id}\n            entry={entry}\n            size=\"base\"\n            className={\n              isOverlap\n                ? \"ring-2 ring-[var(--oh-color-base-secondary)]\"\n                : undefined\n            }\n          />\n        ))\n      )}\n    </span>\n  );\n}\n\nexport function RecommendedAutomationsRail({\n  installedAutomations,\n  onSelect,\n  className,\n}: RecommendedAutomationsRailProps) {\n  const { t } = useTranslation(\"openhands\");\n  const items = flattenRecommendedRailGroups(\n    getRecommendedRailGroups(installedAutomations),\n  );\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const { handleMouseDown, handleClickCapture, handleDragStart } =\n    useDragScroll(scrollRef);\n  const [fadeState, setFadeState] = useState({ left: false, right: false });\n\n  const updateFadeState = useCallback(() => {\n    const element = scrollRef.current;\n    if (!element) return;\n    const next = readScrollFadeState(element);\n    setFadeState((current) =>\n      current.left === next.left && current.right === next.right\n        ? current\n        : next,\n    );\n  }, []);\n\n  const itemIds = items.map((item) => item.id).join(\",\");\n\n  useLayoutEffect(() => {\n    updateFadeState();\n\n    const element = scrollRef.current;\n    if (!element) return undefined;\n\n    const resizeObserver = new ResizeObserver(updateFadeState);\n    resizeObserver.observe(element);\n    Array.from(element.children).forEach((child) => {\n      resizeObserver.observe(child);\n    });\n\n    return () => resizeObserver.disconnect();\n  }, [updateFadeState, itemIds]);\n\n  if (items.length === 0) return null;\n\n  return (\n    <section\n      data-testid=\"recommended-automations-rail\"\n      aria-label={t(I18nKey.RECOMMENDED_AUTOMATIONS$SECTION_LABEL)}\n      className={cn(\"w-full\", AUTOMATION_STACK_SECTION_BOTTOM_CLASS, className)}\n    >\n      <h2 className=\"mb-2 text-sm font-medium text-[var(--oh-foreground)]\">\n        {t(I18nKey.RECOMMENDED_AUTOMATIONS$SECTION_LABEL)}\n      </h2>\n\n      <div className=\"relative\">\n        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- mouse drag-to-scroll is a pointer convenience; keyboard users scroll the list natively via the focusable cards. */}\n        <div\n          ref={scrollRef}\n          role=\"list\"\n          data-testid=\"recommended-automations-rail-scroll\"\n          onScroll={updateFadeState}\n          onMouseDown={handleMouseDown}\n          onClickCapture={handleClickCapture}\n          onDragStart={handleDragStart}\n          className=\"flex flex-nowrap gap-3 overflow-x-auto scrollbar-hide select-none\"\n        >\n          {items.map((automation) => (\n            <div key={automation.id} role=\"listitem\">\n              <button\n                type=\"button\"\n                data-testid={`recommended-automation-rail-card-${automation.id}`}\n                onClick={() => onSelect(automation)}\n                className={cn(\n                  \"flex w-[220px] shrink-0 flex-col gap-3 p-3 text-left\",\n                  extensionModuleCardSurfaceClassName,\n                  extensionModuleCardInteractiveClassName,\n                )}\n              >\n                <RailIntegrationIcons\n                  automation={automation}\n                  entries={integrationEntries(automation)}\n                  testId={`recommended-automation-rail-icon-${automation.id}`}\n                />\n                <div className=\"min-w-0\">\n                  <h3 className=\"truncate text-sm font-semibold text-white\">\n                    {automation.name}\n                  </h3>\n                  <p className=\"mt-0.5 line-clamp-2 text-xs leading-relaxed text-tertiary-light\">\n                    {automation.description}\n                  </p>\n                </div>\n              </button>\n            </div>\n          ))}\n        </div>\n        <div\n          aria-hidden\n          data-testid=\"recommended-automations-rail-fade-left\"\n          data-visible={fadeState.left ? \"true\" : \"false\"}\n          className={cn(\n            \"pointer-events-none absolute inset-y-0 left-0 z-10 w-10\",\n            \"bg-gradient-to-r from-[var(--oh-scroll-fade-from,var(--oh-color-base))] to-transparent\",\n            \"transition-opacity duration-300 ease-out motion-reduce:transition-none\",\n            fadeState.left ? \"opacity-100\" : \"opacity-0\",\n          )}\n        />\n        <div\n          aria-hidden\n          data-testid=\"recommended-automations-rail-fade-right\"\n          data-visible={fadeState.right ? \"true\" : \"false\"}\n          className={cn(\n            \"pointer-events-none absolute inset-y-0 right-0 z-10 w-10\",\n            \"bg-gradient-to-l from-[var(--oh-scroll-fade-from,var(--oh-color-base))] to-transparent\",\n            \"transition-opacity duration-300 ease-out motion-reduce:transition-none\",\n            fadeState.right ? \"opacity-100\" : \"opacity-0\",\n          )}\n        />\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"recommended-automations-section.cjs","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":"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"}

package/dist/components/features/automations/recommended-automations-section.d.ts

@@ -1,6 +1,7 @@
 import { type RecommendedAutomation } from "@openhands/extensions/automations";
 import { type IntegrationCatalogEntry as MarketplaceEntry } from "@openhands/extensions/integrations";
 import { MCPServerConfig } from "#/types/mcp-server";
+import { getAutomationsByPopularity } from "#/utils/recommended-automation-rail";
 interface RecommendedAutomationsSectionProps {
     backendKind: "local" | "cloud";
     installedServers: MCPServerConfig[];
@@ -9,7 +10,7 @@ interface RecommendedAutomationsSectionProps {
     /** When true, title, description, and cards share one scroll area. */
     scrollableGrid?: boolean;
 }
-export declare function getAutomationsByPopularity(catalog: RecommendedAutomation[]): RecommendedAutomation[];
+export { getAutomationsByPopularity };
 export interface AutomationIntegration {
     id: string;
     entry?: MarketplaceEntry;
@@ -17,4 +18,3 @@ export interface AutomationIntegration {
     mcpInstallable: boolean;
 }
 export declare function RecommendedAutomationsSection({ backendKind: _backendKind, installedServers, query, onSelect, scrollableGrid, }: RecommendedAutomationsSectionProps): import("react").JSX.Element | null;
-export {};

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.d.ts

@@ -1,10 +1,11 @@
 interface ResponderDeploymentModalProps {
     isOpen: boolean;
+    isPending: boolean;
     onClose: () => void;
     /** Fired for the "Continue with local setup" action. */
     onContinueLocal: () => void;
     /** Fired for an external-URL action (e.g. OpenHands Cloud integrations). */
     onOpenUrl: (url: string) => void;
 }
-export declare function ResponderDeploymentModal({ isOpen, onClose, onContinueLocal, onOpenUrl, }: ResponderDeploymentModalProps): import("react").JSX.Element | null;
+export declare function ResponderDeploymentModal({ isOpen, isPending, onClose, onContinueLocal, onOpenUrl, }: ResponderDeploymentModalProps): import("react").JSX.Element | null;
 export {};

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"}