@openhands/agent-canvas 1.14.0 → 1.15.0

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

@@ -3,6 +3,12 @@ interface RecommendedAutomationsLauncherProps {
     onLaunched?: () => void;
     /** When true, only the automation card grid scrolls inside its section. */
     scrollableGrid?: boolean;
+    /**
+     * Compact discovery rail for New Chat and the automations dashboard.
+     * The templates page keeps the full catalog section.
+     */
+    variant?: "catalog" | "rail";
+    className?: string;
 }
-export declare function RecommendedAutomationsLauncher({ query, onLaunched, scrollableGrid, }: RecommendedAutomationsLauncherProps): import("react").JSX.Element | null;
+export declare function RecommendedAutomationsLauncher({ query, onLaunched, scrollableGrid, variant, className, }: RecommendedAutomationsLauncherProps): import("react").JSX.Element | null;
 export {};

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

@@ -0,0 +1,134 @@
+import { useNavigation as e } from "../../../context/navigation-context.js";
+import { setConversationState as t, setPendingTaskDraft as ee } from "../../../utils/conversation-local-storage.js";
+import { useConversationStore as n } from "../../../stores/conversation-store.js";
+import { useActiveBackend as r } from "../../../contexts/active-backend-context.js";
+import { parseMcpConfig as i } from "../../../utils/mcp-config.js";
+import { getAutomationLaunchPrompt as te, getRequiredIntegrationIds as a } from "../../../utils/automation-catalog.js";
+import { SETUP_REGISTRY as o } from "../../../manifests/manifest-sources.js";
+import { automationSetupPath as s, hasAutomationInterface as c } from "../../../manifests/automation-interface.js";
+import { useTracking as ne } from "../../../hooks/use-tracking.js";
+import { useSettings as l } from "../../../hooks/query/use-settings.js";
+import { useCreateConversation as re } from "../../../hooks/mutation/use-create-conversation.js";
+import { useIsCreatingConversation as ie } from "../../../hooks/use-is-creating-conversation.js";
+import u from "../../../node_modules/@openhands/extensions/integrations/index.js";
+import { findInstalledEntryMatch as d, getMarketplaceEntryById as f, isMcpInstallableEntry as p } from "../../../utils/mcp-marketplace-utils.js";
+import { useAutomations as m } from "../../../hooks/query/use-automations.js";
+import { useResponderUrlSecret as h } from "../../../hooks/use-responder-url-secret.js";
+import { flattenMcpConfig as g } from "../../../utils/mcp-installed-servers.js";
+import { InstallServerModal as _ } from "../mcp-page/install-server-modal.js";
+import { isResponderAutomation as v } from "../../../utils/responder-deployment.js";
+import { RecommendedAutomationsRail as y } from "./recommended-automations-rail.js";
+import { RecommendedAutomationsSection as b } from "./recommended-automations-section.js";
+import { ResponderDeploymentModal as x } from "./responder-deployment-modal.js";
+import { useCallback as S, useMemo as C, useRef as w, useState as T } from "react";
+import { Fragment as ae, jsx as E, jsxs as oe } from "react/jsx-runtime";
+//#region src/components/features/automations/recommended-automations-launcher.tsx
+function se(e) {
+	return a(e).map((e) => f(e, u)).filter((e) => !!e).filter(p);
+}
+function D({ query: a, onLaunched: u, scrollableGrid: f = !1, variant: p = "catalog", className: D }) {
+	let O = r(), { navigate: k } = e(), { data: A } = l(), { trackPrebuiltAutomationEnabled: j } = ne(), M = re(), N = h(), P = ie(), F = n((e) => e.setMessageToSend), [I, L] = T(null), [R, z] = T(null), [B, V] = T([]), H = w(!1), U = w(!1), W = w(!1), [G, K] = T(!1), q = p === "rail", { data: ce, isLoading: le } = m({ enabled: q && O.backend.kind === "local" }), J = C(() => g(A?.mcp_config ?? i(A?.agent_settings?.mcp_config)).filter((e) => e.enabled !== !1), [A?.agent_settings?.mcp_config, A?.mcp_config]), Y = S((e) => {
+		if (U.current || M.isPending || P) return;
+		if (U.current = !0, o.findById(e.id)) {
+			k?.(s(e.id)), u?.();
+			return;
+		}
+		let n = te(e);
+		M.mutate({}, {
+			onSuccess: (r) => {
+				j({
+					automationName: e.name,
+					automationCategory: e.category
+				}), r.conversation_id.startsWith("task-") && r.task_id ? ee(r.task_id, n) : t(r.conversation_id, { draftMessage: n }), k?.(`/conversations/${r.conversation_id}`), u?.(), window.setTimeout(() => F(n), 0);
+			},
+			onError: () => {
+				U.current = !1;
+			}
+		});
+	}, [
+		O.backend.kind,
+		M,
+		P,
+		k,
+		u,
+		F,
+		j
+	]), ue = S((e) => se(e).filter((e) => !d(e, J)), [J]), X = (e) => {
+		let t = ue(e);
+		if (t.length === 0) {
+			Y(e);
+			return;
+		}
+		L(e), V(t);
+	}, Z = (e) => {
+		if (!(U.current || M.isPending || P || B.length > 0 || R !== null)) {
+			if (v(e)) {
+				z(e);
+				return;
+			}
+			X(e);
+		}
+	}, de = async () => {
+		let e = R;
+		if (!(!e || W.current)) {
+			W.current = !0, K(!0);
+			try {
+				if (!await N()) return;
+				z(null), X(e);
+			} finally {
+				W.current = !1, K(!1);
+			}
+		}
+	}, Q = (e) => {
+		z(null), window.open(e, "_blank", "noopener,noreferrer");
+	}, fe = () => {
+		z(null);
+	}, pe = () => {
+		if (H.current) {
+			H.current = !1;
+			return;
+		}
+		L(null), V([]);
+	}, me = () => {
+		H.current = !0, V((e) => {
+			let t = e.slice(1);
+			if (t.length === 0) {
+				let e = I;
+				window.setTimeout(() => {
+					L(null), e && Y(e);
+				}, 0);
+			}
+			return t;
+		});
+	}, $ = B[0] ?? null;
+	return !c() || O.backend.kind === "cloud" || q && le ? null : /* @__PURE__ */ oe(ae, { children: [
+		q ? /* @__PURE__ */ E(y, {
+			className: D,
+			installedAutomations: ce?.automations ?? [],
+			onSelect: Z
+		}) : /* @__PURE__ */ E(b, {
+			backendKind: O.backend.kind,
+			installedServers: J,
+			query: a,
+			onSelect: Z,
+			scrollableGrid: f
+		}),
+		$ && /* @__PURE__ */ E(_, {
+			entry: $,
+			existingServers: J,
+			onClose: pe,
+			onSuccess: me
+		}, $.id),
+		/* @__PURE__ */ E(x, {
+			isOpen: R !== null,
+			isPending: G,
+			onClose: fe,
+			onContinueLocal: de,
+			onOpenUrl: Q
+		})
+	] });
+}
+//#endregion
+export { D as RecommendedAutomationsLauncher };
+
+//# sourceMappingURL=recommended-automations-launcher.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"recommended-automations-launcher.js","names":[],"sources":["../../../../src/components/features/automations/recommended-automations-launcher.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from \"react\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { useCreateConversation } from \"#/hooks/mutation/use-create-conversation\";\nimport { useSettings } from \"#/hooks/query/use-settings\";\nimport { useIsCreatingConversation } from \"#/hooks/use-is-creating-conversation\";\nimport { useResponderUrlSecret } from \"#/hooks/use-responder-url-secret\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport {\n  setConversationState,\n  setPendingTaskDraft,\n} from \"#/utils/conversation-local-storage\";\nimport type { RecommendedAutomation } from \"@openhands/extensions/automations\";\nimport { parseMcpConfig } from \"#/utils/mcp-config\";\nimport { flattenMcpConfig } from \"#/utils/mcp-installed-servers\";\nimport {\n  INTEGRATION_CATALOG as MCP_MARKETPLACE,\n  type IntegrationCatalogEntry as MarketplaceEntry,\n} from \"@openhands/extensions/integrations\";\nimport {\n  findInstalledEntryMatch,\n  getMarketplaceEntryById,\n  isMcpInstallableEntry,\n} from \"#/utils/mcp-marketplace-utils\";\nimport { InstallServerModal } from \"#/components/features/mcp-page/install-server-modal\";\nimport { useTracking } from \"#/hooks/use-tracking\";\nimport {\n  automationSetupPath,\n  hasAutomationInterface,\n} from \"#/manifests/automation-interface\";\nimport { SETUP_REGISTRY } from \"#/manifests/manifest-sources\";\nimport {\n  getAutomationLaunchPrompt,\n  getRequiredIntegrationIds,\n} from \"#/utils/automation-catalog\";\nimport { isResponderAutomation } from \"#/utils/responder-deployment\";\nimport { useAutomations } from \"#/hooks/query/use-automations\";\nimport { RecommendedAutomationsRail } from \"./recommended-automations-rail\";\nimport { RecommendedAutomationsSection } from \"./recommended-automations-section\";\nimport { ResponderDeploymentModal } from \"./responder-deployment-modal\";\n\ninterface RecommendedAutomationsLauncherProps {\n  query?: string;\n  onLaunched?: () => void;\n  /** When true, only the automation card grid scrolls inside its section. */\n  scrollableGrid?: boolean;\n  /**\n   * Compact discovery rail for New Chat and the automations dashboard.\n   * The templates page keeps the full catalog section.\n   */\n  variant?: \"catalog\" | \"rail\";\n  className?: string;\n}\n\n/**\n * The marketplace entries a launch waits on. An integration the automation is\n * willing to start without is deliberately absent, so it never queues an\n * install modal the user has to dismiss.\n *\n * A required integration this backend cannot install as MCP (e.g. Jira's\n * HTTP-only option) is also excluded here — the install queue can't do\n * anything with it — but it is not silently dropped from the product: the\n * automation card keeps it visible and labels it as needing external setup.\n */\nfunction getRequiredEntries(automation: RecommendedAutomation) {\n  return getRequiredIntegrationIds(automation)\n    .map((id) => getMarketplaceEntryById(id, MCP_MARKETPLACE))\n    .filter((entry): entry is MarketplaceEntry => !!entry)\n    .filter(isMcpInstallableEntry);\n}\n\nexport function RecommendedAutomationsLauncher({\n  query,\n  onLaunched,\n  scrollableGrid = false,\n  variant = \"catalog\",\n  className,\n}: RecommendedAutomationsLauncherProps) {\n  const activeBackend = useActiveBackend();\n  const { navigate } = useNavigation();\n  const { data: settings } = useSettings();\n  const { trackPrebuiltAutomationEnabled } = useTracking();\n  const createConversation = useCreateConversation();\n  const ensureResponderUrlSecret = useResponderUrlSecret();\n  const isCreatingConversation = useIsCreatingConversation();\n  const setMessageToSend = useConversationStore(\n    (state) => state.setMessageToSend,\n  );\n  const [pendingAutomation, setPendingAutomation] =\n    useState<RecommendedAutomation | null>(null);\n  const [deploymentChoiceAutomation, setDeploymentChoiceAutomation] =\n    useState<RecommendedAutomation | null>(null);\n  const [installQueue, setInstallQueue] = useState<MarketplaceEntry[]>([]);\n  const completedInstallRef = useRef(false);\n  const launchInFlightRef = useRef(false);\n  const localSetupInFlightRef = useRef(false);\n  const [isPreparingLocalResponder, setIsPreparingLocalResponder] =\n    useState(false);\n  const isRail = variant === \"rail\";\n  const { data: automationsData, isLoading: isAutomationsLoading } =\n    useAutomations({\n      enabled: isRail && activeBackend.backend.kind === \"local\",\n    });\n\n  const installedMcpConfig = useMemo(\n    () =>\n      flattenMcpConfig(\n        settings?.mcp_config ??\n          parseMcpConfig(settings?.agent_settings?.mcp_config),\n      ).filter((server) => server.enabled !== false),\n    [settings?.agent_settings?.mcp_config, settings?.mcp_config],\n  );\n\n  const launchAutomation = useCallback(\n    (automation: RecommendedAutomation) => {\n      if (\n        launchInFlightRef.current ||\n        createConversation.isPending ||\n        isCreatingConversation\n      ) {\n        return;\n      }\n      launchInFlightRef.current = true;\n\n      // An automation that ships a setup experience is configured from its own\n      // form, so the answers are collected before anything is created. The rest\n      // still hand a slash command to an agent to interpret.\n      if (SETUP_REGISTRY.findById(automation.id)) {\n        navigate?.(automationSetupPath(automation.id));\n        onLaunched?.();\n        return;\n      }\n\n      const prompt = getAutomationLaunchPrompt(automation);\n\n      createConversation.mutate(\n        {},\n        {\n          onSuccess: (conversation) => {\n            trackPrebuiltAutomationEnabled({\n              automationName: automation.name,\n              automationCategory: automation.category,\n            });\n            if (\n              conversation.conversation_id.startsWith(\"task-\") &&\n              conversation.task_id\n            ) {\n              setPendingTaskDraft(conversation.task_id, prompt);\n            } else {\n              setConversationState(conversation.conversation_id, {\n                draftMessage: prompt,\n              });\n            }\n            navigate?.(`/conversations/${conversation.conversation_id}`);\n            onLaunched?.();\n            window.setTimeout(() => setMessageToSend(prompt), 0);\n          },\n          onError: () => {\n            launchInFlightRef.current = false;\n          },\n        },\n      );\n    },\n    [\n      activeBackend.backend.kind,\n      createConversation,\n      isCreatingConversation,\n      navigate,\n      onLaunched,\n      setMessageToSend,\n      trackPrebuiltAutomationEnabled,\n    ],\n  );\n\n  const getMissingEntries = useCallback(\n    (automation: RecommendedAutomation) =>\n      getRequiredEntries(automation).filter(\n        (entry) => !findInstalledEntryMatch(entry, installedMcpConfig),\n      ),\n    [installedMcpConfig],\n  );\n\n  const proceedWithLocalLaunch = (automation: RecommendedAutomation) => {\n    const missingEntries = getMissingEntries(automation);\n    if (missingEntries.length === 0) {\n      launchAutomation(automation);\n      return;\n    }\n\n    setPendingAutomation(automation);\n    setInstallQueue(missingEntries);\n  };\n\n  const handleSelectAutomation = (automation: RecommendedAutomation) => {\n    if (\n      launchInFlightRef.current ||\n      createConversation.isPending ||\n      isCreatingConversation ||\n      installQueue.length > 0 ||\n      deploymentChoiceAutomation !== null\n    ) {\n      return;\n    }\n\n    // GitHub/Slack responders poll continuously; let the user choose where the\n    // responder runs before committing to the local setup flow.\n    if (isResponderAutomation(automation)) {\n      setDeploymentChoiceAutomation(automation);\n      return;\n    }\n\n    proceedWithLocalLaunch(automation);\n  };\n\n  const handleDeploymentContinueLocal = async () => {\n    const automation = deploymentChoiceAutomation;\n    if (!automation || localSetupInFlightRef.current) return;\n\n    localSetupInFlightRef.current = true;\n    setIsPreparingLocalResponder(true);\n\n    try {\n      const isSecretReady = await ensureResponderUrlSecret();\n      if (!isSecretReady) return;\n\n      setDeploymentChoiceAutomation(null);\n      proceedWithLocalLaunch(automation);\n    } finally {\n      localSetupInFlightRef.current = false;\n      setIsPreparingLocalResponder(false);\n    }\n  };\n\n  const handleDeploymentOpenUrl = (url: string) => {\n    setDeploymentChoiceAutomation(null);\n    window.open(url, \"_blank\", \"noopener,noreferrer\");\n  };\n\n  const handleDeploymentClose = () => {\n    setDeploymentChoiceAutomation(null);\n  };\n\n  const cancelInstallFlow = () => {\n    if (completedInstallRef.current) {\n      completedInstallRef.current = false;\n      return;\n    }\n    setPendingAutomation(null);\n    setInstallQueue([]);\n  };\n\n  const handleInstallSuccess = () => {\n    completedInstallRef.current = true;\n\n    setInstallQueue((currentQueue) => {\n      const nextQueue = currentQueue.slice(1);\n\n      if (nextQueue.length === 0) {\n        const automation = pendingAutomation;\n        window.setTimeout(() => {\n          setPendingAutomation(null);\n          if (automation) launchAutomation(automation);\n        }, 0);\n      }\n\n      return nextQueue;\n    });\n  };\n\n  const installEntry = installQueue[0] ?? null;\n\n  // Like every automation surface, the launcher renders only behind the\n  // interface-manifest gate; New Chat mounts it outside the gated routes.\n  if (!hasAutomationInterface()) return null;\n\n  // Recommended automations are a local-backend-only feature; cloud\n  // automations are managed elsewhere.\n  if (activeBackend.backend.kind === \"cloud\") return null;\n\n  if (isRail && isAutomationsLoading) return null;\n\n  return (\n    <>\n      {isRail ? (\n        <RecommendedAutomationsRail\n          className={className}\n          installedAutomations={automationsData?.automations ?? []}\n          onSelect={handleSelectAutomation}\n        />\n      ) : (\n        <RecommendedAutomationsSection\n          backendKind={activeBackend.backend.kind}\n          installedServers={installedMcpConfig}\n          query={query}\n          onSelect={handleSelectAutomation}\n          scrollableGrid={scrollableGrid}\n        />\n      )}\n\n      {installEntry && (\n        <InstallServerModal\n          key={installEntry.id}\n          entry={installEntry}\n          existingServers={installedMcpConfig}\n          onClose={cancelInstallFlow}\n          onSuccess={handleInstallSuccess}\n        />\n      )}\n\n      <ResponderDeploymentModal\n        isOpen={deploymentChoiceAutomation !== null}\n        isPending={isPreparingLocalResponder}\n        onClose={handleDeploymentClose}\n        onContinueLocal={handleDeploymentContinueLocal}\n        onOpenUrl={handleDeploymentOpenUrl}\n      />\n    </>\n  );\n}\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1,9 @@
+import type { RecommendedAutomation } from "@openhands/extensions/automations";
+import type { Automation } from "#/types/automation";
+interface RecommendedAutomationsRailProps {
+    installedAutomations: readonly Pick<Automation, "name">[];
+    onSelect: (automation: RecommendedAutomation) => void;
+    className?: string;
+}
+export declare function RecommendedAutomationsRail({ installedAutomations, onSelect, className, }: RecommendedAutomationsRailProps): import("react").JSX.Element | null;
+export {};

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":";;;;;;;;;;;;;;;AAyCA,IAAM,IAA2B;AAEjC,SAAS,EACP,GACoB;CACpB,OAAO,EAAkB,CAAU,EAAE,SAAS,MAAO;EACnD,IAAM,IAAQ,EAAwB,GAAI,CAAe;EACzD,OAAO,IAAQ,CAAC,CAAK,IAAI,CAAC;CAC5B,CAAC;AACH;AAEA,SAAS,EAAqB,EAC5B,eACA,YACA,aAKC;CACD,IAAM,IAAiB,EAAQ,MAAM,GAAG,CAAC,GACnC,IAAY,EAAe,SAAS,GAGpC,IAAO,EAAkB,CAAU;CAEzC,OACE,kBAAC,QAAD;EACE,eAAY;EACZ,eAAa;EACb,eAAa,KAAa,CAAC,IAAO,YAAY,KAAA;EAC9C,WAAW,EACT,GACA,KAAa,CAAC,KAAQ,YACxB;YAEC,IACC,kBAAC,GAAD;GACE,OAAO;GACP,MAAK;GACL,UAAU,EAAc,GAAM;IAC5B,WAAW;IACX,aAAa;GACf,CAAC;EACF,CAAA,IACC,EAAe,WAAW,IAC5B,kBAAC,GAAD;GAAc,OAAO;GAAM,MAAK;EAAQ,CAAA,IAExC,EAAe,KAAK,MAClB,kBAAC,GAAD;GAES;GACP,MAAK;GACL,WACE,IACI,iDACA,KAAA;EAEP,GARM,EAAM,EAQZ,CACF;CAEC,CAAA;AAEV;AAEA,SAAgB,EAA2B,EACzC,yBACA,aACA,gBACkC;CAClC,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,IAAQ,EACZ,EAAyB,CAAoB,CAC/C,GACM,IAAY,EAAuB,IAAI,GACvC,EAAE,oBAAiB,uBAAoB,uBAC3C,EAAc,CAAS,GACnB,CAAC,GAAW,KAAgB,EAAS;EAAE,MAAM;EAAO,OAAO;CAAM,CAAC,GAElE,IAAkB,QAAkB;EACxC,IAAM,IAAU,EAAU;EAC1B,IAAI,CAAC,GAAS;EACd,IAAM,IAAO,EAAoB,CAAO;EACxC,GAAc,MACZ,EAAQ,SAAS,EAAK,QAAQ,EAAQ,UAAU,EAAK,QACjD,IACA,CACN;CACF,GAAG,CAAC,CAAC;CAqBL,OAjBA,QAAsB;EACpB,EAAgB;EAEhB,IAAM,IAAU,EAAU;EAC1B,IAAI,CAAC,GAAS;EAEd,IAAM,IAAiB,IAAI,eAAe,CAAe;EAMzD,OALA,EAAe,QAAQ,CAAO,GAC9B,MAAM,KAAK,EAAQ,QAAQ,EAAE,SAAS,MAAU;GAC9C,EAAe,QAAQ,CAAK;EAC9B,CAAC,SAEY,EAAe,WAAW;CACzC,GAAG,CAAC,GAfY,EAAM,KAAK,MAAS,EAAK,EAAE,EAAE,KAAK,GAe7B,CAAO,CAAC,GAEzB,EAAM,WAAW,IAAU,OAG7B,kBAAC,WAAD;EACE,eAAY;EACZ,cAAY,EAAE,EAAQ,qCAAqC;EAC3D,WAAW,EAAG,UAAU,GAAuC,CAAS;YAH1E,CAKE,kBAAC,MAAD;GAAI,WAAU;aACX,EAAE,EAAQ,qCAAqC;EAC9C,CAAA,GAEJ,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KACE,KAAK;KACL,MAAK;KACL,eAAY;KACZ,UAAU;KACV,aAAa;KACb,gBAAgB;KAChB,aAAa;KACb,WAAU;eAET,EAAM,KAAK,MACV,kBAAC,OAAD;MAAyB,MAAK;gBAC5B,kBAAC,UAAD;OACE,MAAK;OACL,eAAa,oCAAoC,EAAW;OAC5D,eAAe,EAAS,CAAU;OAClC,WAAW,EACT,wDACA,GACA,CACF;iBARF,CAUE,kBAAC,GAAD;QACc;QACZ,SAAS,EAAmB,CAAU;QACtC,QAAQ,oCAAoC,EAAW;OACxD,CAAA,GACD,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAW;QACV,CAAA,GACJ,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAW;QACX,CAAA,CACA;SACC;;KACL,GAzBK,EAAW,EAyBhB,CACN;IACE,CAAA;IACL,kBAAC,OAAD;KACE,eAAA;KACA,eAAY;KACZ,gBAAc,EAAU,OAAO,SAAS;KACxC,WAAW,EACT,2DACA,0FACA,0EACA,EAAU,OAAO,gBAAgB,WACnC;IACD,CAAA;IACD,kBAAC,OAAD;KACE,eAAA;KACA,eAAY;KACZ,gBAAc,EAAU,QAAQ,SAAS;KACzC,WAAW,EACT,4DACA,0FACA,0EACA,EAAU,QAAQ,gBAAgB,WACpC;IACD,CAAA;GACE;IACE;;AAEb"}

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 {};