npm - @openhands/agent-canvas - Versions diffs - 1.14.0 → 1.16.0 - Mend

@openhands/agent-canvas 1.14.0 → 1.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1855) hide show

package/dist/components/features/skills/build-skill-pills.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"build-skill-pills.js","names":[],"sources":["../../../../src/components/features/skills/build-skill-pills.tsx"],"sourcesContent":["import React from \"react\";\nimport type { TFunction } from \"i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { SkillInfo } from \"#/types/settings\";\nimport { cn } from \"#/utils/utils\";\nimport { SkillTypeBadge } from \"./skill-type-badge\";\nimport {\n SKILL_CARD_PILL_CLASS,\n type SkillCardPill,\n} from \"./skill-card-pill-row\";\nimport {\n getSkillCategory,\n SKILL_CATEGORY_LABEL_KEYS,\n UNCATEGORIZED_SKILL_CATEGORY,\n} from \"#/utils/skill-category\";\nimport { isRecommendedSkill } from \"#/utils/skill-enablement\";\n\ntype SkillPillVariant = \"card\" | \"detail\";\n\ninterface BuildSkillPillsOptions {\n variant?: SkillPillVariant;\n testIdPrefix?: string;\n}\n\nfunction pillTestId(\n prefix: string | undefined,\n skillName: string,\n suffix: string,\n) {\n if (prefix) {\n return `${prefix}-${skillName}-${suffix}`;\n }\n return undefined;\n}\n\nexport function buildSkillPills(\n skill: SkillInfo,\n translate: TFunction,\n options: BuildSkillPillsOptions = {},\n): SkillCardPill[] {\n const { variant = \"card\", testIdPrefix } = options;\n const category = getSkillCategory(skill);\n const pills: SkillCardPill[] = [\n {\n id: `type-${skill.type}`,\n node: <SkillTypeBadge type={skill.type} />,\n },\n ];\n\n if (isRecommendedSkill(skill.name)) {\n pills.push({\n id: \"recommended\",\n node: (\n <span\n data-testid={\n pillTestId(testIdPrefix, skill.name, \"recommended\") ??\n `skill-recommended-${skill.name}`\n }\n className={SKILL_CARD_PILL_CLASS}\n >\n {translate(I18nKey.SETTINGS$SKILLS_RECOMMENDED)}\n </span>\n ),\n });\n }\n\n // An \"Other\" pill says nothing, and every local skill would carry one:\n // only the catalog assigns categories.\n if (category !== UNCATEGORIZED_SKILL_CATEGORY) {\n pills.push({\n id: `category-${category}`,\n node: (\n <span\n data-testid={\n pillTestId(testIdPrefix, skill.name, \"category\") ??\n `skill-category-${skill.name}`\n }\n className={SKILL_CARD_PILL_CLASS}\n >\n {translate(SKILL_CATEGORY_LABEL_KEYS[category])}\n </span>\n ),\n });\n }\n\n if (skill.version) {\n pills.push({\n id: `version-${skill.version}`,\n node: (\n <span\n data-testid={\n pillTestId(testIdPrefix, skill.name, \"version\") ??\n `skill-version-${skill.name}`\n }\n className={SKILL_CARD_PILL_CLASS}\n >\n {translate(I18nKey.SETTINGS$SKILLS_VERSION, {\n version: skill.version,\n })}\n </span>\n ),\n });\n }\n\n if (variant === \"detail\" && skill.license) {\n pills.push({\n id: `license-${skill.license}`,\n node: (\n <span\n data-testid={pillTestId(testIdPrefix, skill.name, \"license\")}\n className={SKILL_CARD_PILL_CLASS}\n >\n {skill.license}\n </span>\n ),\n });\n }\n\n if (variant === \"detail\" && skill.compatibility) {\n pills.push({\n id: `compatibility-${skill.compatibility}`,\n node: (\n <span\n data-testid={pillTestId(testIdPrefix, skill.name, \"compatibility\")}\n className={SKILL_CARD_PILL_CLASS}\n >\n {skill.compatibility}\n </span>\n ),\n });\n }\n\n if (skill.disable_model_invocation) {\n pills.push({\n id: \"disable-model-invocation\",\n node: (\n <span\n data-testid={\n pillTestId(testIdPrefix, skill.name, \"disable-model-invocation\") ??\n `skill-disable-model-invocation-${skill.name}`\n }\n className=\"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border border-[rgba(248,113,113,0.35)] bg-[rgba(248,113,113,0.12)] px-2 py-0.5 text-[11px] font-medium leading-4 text-[#fca5a5]\"\n >\n <span className=\"size-1.5 rounded-full bg-[#fca5a5]\" />\n {translate(I18nKey.SETTINGS$SKILLS_DISABLE_MODEL_INVOCATION)}\n </span>\n ),\n });\n }\n\n if (variant === \"detail\" && skill.allowed_tools) {\n for (const tool of skill.allowed_tools) {\n pills.push({\n id: `allowed-tool-${tool}`,\n node: (\n <span\n data-testid={pillTestId(testIdPrefix, skill.name, `tool-${tool}`)}\n className={cn(SKILL_CARD_PILL_CLASS, \"font-mono\")}\n >\n {tool}\n </span>\n ),\n });\n }\n }\n\n if (variant === \"detail\" && skill.metadata) {\n for (const [key, value] of Object.entries(skill.metadata)) {\n pills.push({\n id: `metadata-${key}`,\n node: (\n <span\n data-testid={pillTestId(\n testIdPrefix,\n skill.name,\n `metadata-${key}`,\n )}\n className={SKILL_CARD_PILL_CLASS}\n >\n <span className=\"font-mono text-[10px] text-tertiary-light\">\n {key}:\n </span>{\" \"}\n {value}\n </span>\n ),\n });\n }\n }\n\n for (const trigger of skill.triggers ?? []) {\n pills.push({\n id: `trigger-${trigger}`,\n node: (\n <span\n data-testid={pillTestId(\n testIdPrefix,\n skill.name,\n `trigger-${trigger}`,\n )}\n className={SKILL_CARD_PILL_CLASS}\n >\n {trigger}\n </span>\n ),\n });\n }\n\n return pills;\n}\n"],"mappings":";;;;;;;;;AAwBA,SAAS,EACP,GACA,GACA,GACA;CACA,IAAI,GACF,OAAO,GAAG,EAAO,GAAG,EAAU,GAAG;AAGrC;AAEA,SAAgB,EACd,GACA,GACA,IAAkC,CAAC,GAClB;CACjB,IAAM,EAAE,aAAU,QAAQ,oBAAiB,GACrC,IAAW,EAAiB,CAAK,GACjC,IAAyB,CAC7B;EACE,IAAI,QAAQ,EAAM;EAClB,MAAM,kBAAC,GAAD,EAAgB,MAAM,EAAM,KAAO,CAAA;CAC3C,CACF;CAuGA,IArGI,EAAmB,EAAM,IAAI,KAC/B,EAAM,KAAK;EACT,IAAI;EACJ,MACE,kBAAC,QAAD;GACE,eACE,EAAW,GAAc,EAAM,MAAM,aAAa,KAClD,qBAAqB,EAAM;GAE7B,WAAW;aAEV,EAAU,EAAQ,2BAA2B;EAC1C,CAAA;CAEV,CAAC,GAKC,MAAA,WACF,EAAM,KAAK;EACT,IAAI,YAAY;EAChB,MACE,kBAAC,QAAD;GACE,eACE,EAAW,GAAc,EAAM,MAAM,UAAU,KAC/C,kBAAkB,EAAM;GAE1B,WAAW;aAEV,EAAU,EAA0B,EAAS;EAC1C,CAAA;CAEV,CAAC,GAGC,EAAM,WACR,EAAM,KAAK;EACT,IAAI,WAAW,EAAM;EACrB,MACE,kBAAC,QAAD;GACE,eACE,EAAW,GAAc,EAAM,MAAM,SAAS,KAC9C,iBAAiB,EAAM;GAEzB,WAAW;aAEV,EAAU,EAAQ,yBAAyB,EAC1C,SAAS,EAAM,QACjB,CAAC;EACG,CAAA;CAEV,CAAC,GAGC,MAAY,YAAY,EAAM,WAChC,EAAM,KAAK;EACT,IAAI,WAAW,EAAM;EACrB,MACE,kBAAC,QAAD;GACE,eAAa,EAAW,GAAc,EAAM,MAAM,SAAS;GAC3D,WAAW;aAEV,EAAM;EACH,CAAA;CAEV,CAAC,GAGC,MAAY,YAAY,EAAM,iBAChC,EAAM,KAAK;EACT,IAAI,iBAAiB,EAAM;EAC3B,MACE,kBAAC,QAAD;GACE,eAAa,EAAW,GAAc,EAAM,MAAM,eAAe;GACjE,WAAW;aAEV,EAAM;EACH,CAAA;CAEV,CAAC,GAGC,EAAM,4BACR,EAAM,KAAK;EACT,IAAI;EACJ,MACE,kBAAC,QAAD;GACE,eACE,EAAW,GAAc,EAAM,MAAM,0BAA0B,KAC/D,kCAAkC,EAAM;GAE1C,WAAU;aALZ,CAOE,kBAAC,QAAD,EAAM,WAAU,qCAAsC,CAAA,GACrD,EAAU,EAAQ,wCAAwC,CACvD;;CAEV,CAAC,GAGC,MAAY,YAAY,EAAM,eAChC,KAAK,IAAM,KAAQ,EAAM,eACvB,EAAM,KAAK;EACT,IAAI,gBAAgB;EACpB,MACE,kBAAC,QAAD;GACE,eAAa,EAAW,GAAc,EAAM,MAAM,QAAQ,GAAM;GAChE,WAAW,EAAG,GAAuB,WAAW;aAE/C;EACG,CAAA;CAEV,CAAC;CAIL,IAAI,MAAY,YAAY,EAAM,UAChC,KAAK,IAAM,CAAC,GAAK,MAAU,OAAO,QAAQ,EAAM,QAAQ,GACtD,EAAM,KAAK;EACT,IAAI,YAAY;EAChB,MACE,kBAAC,QAAD;GACE,eAAa,EACX,GACA,EAAM,MACN,YAAY,GACd;GACA,WAAW;aANb;IAQE,kBAAC,QAAD;KAAM,WAAU;eAAhB,CACG,GAAI,GACD;;IAAE;IACP;GACG;;CAEV,CAAC;CAIL,KAAK,IAAM,KAAW,EAAM,YAAY,CAAC,GACvC,EAAM,KAAK;EACT,IAAI,WAAW;EACf,MACE,kBAAC,QAAD;GACE,eAAa,EACX,GACA,EAAM,MACN,WAAW,GACb;GACA,WAAW;aAEV;EACG,CAAA;CAEV,CAAC;CAGH,OAAO;AACT"}

package/dist/components/features/skills/extensions-navigation.cjs CHANGED Viewed

@@ -1,2 +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("../../../node_modules/lucide-react/dist/esm/icons/external-link.cjs"),r=require("../../../utils/utils.cjs"),i=require("../../../api/backend-registry/active-store.cjs"),a=require("../../../contexts/active-backend-context.cjs"),o=require("../../shared/navigation-link.cjs"),s=require("../../../icons/skills.cjs"),c=require("../sidebar/sidebar-layout.cjs"),l=require("../settings/backend-synced-settings-badge.cjs"),u=require("../../../icons/server-process.cjs");let d=require("react/jsx-runtime");var f=`/skills`,p=`/plugins`,m=[{to:`/mcp`,label:`MCP Servers`,icon:(0,d.jsx)(u.default,{width:16,height:16}),end:!0},{to:`/skills`,label:`Skills`,icon:(0,d.jsx)(s.default,{width:16,height:16,"aria-hidden":`true`}),end:!0},{to:`/plugins`,label:`Plugins`,icon:(0,d.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,width:16,height:16,"aria-hidden":`true`,children:[(0,d.jsx)(`path`,{d:`M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z`}),(0,d.jsx)(`path`,{d:`m3.3 7 8.7 5 8.7-5`}),(0,d.jsx)(`path`,{d:`M12 22V12`})]}),end:!0}];function h(){let{t:s}=e.useTranslation(`openhands`),{active:u}=a.useActiveBackendContext(),{backend:h}=u,g=!i.isNoBackend(h)&&h.kind===`cloud`;return(0,d.jsxs)(`aside`,{"data-testid":`extensions-navbar-desktop`,className:`hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start`,children:[(0,d.jsx)(`span`,{className:`px-2 text-sm font-normal text-white`,children:s(t.I18nKey.NAV$CUSTOMIZE)}),(0,d.jsx)(`div`,{className:`flex flex-col gap-0.5 pt-0.5`,children:m.filter(e=>!(e.to===p&&g)).map(e=>{let i=e.to===f&&g,a=(0,d.jsx)(`span`,{className:`shrink-0 flex items-center justify-center`,children:e.icon}),l=(0,d.jsx)(`span`,{className:`truncate`,children:i?s(t.I18nKey.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK):e.label}),u=e.comingSoon&&(0,d.jsx)(`span`,{className:`ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]`,children:s(t.I18nKey.NAV$COMING_SOON)});if(i){let t=`${h.host.replace(/\/+$/,``)}/settings/skills`;return(0,d.jsxs)(`a`,{"data-testid":`sidebar-extensions-${e.to}`,href:t,target:`_blank`,rel:`noopener noreferrer`,className:r.cn(c.sidebarNavRowClassName(),`truncate`,c.SIDEBAR_ROW_INTERACTIVE_CLASS.idle),children:[a,l,(0,d.jsx)(n.ExternalLink,{className:`ml-auto size-4 shrink-0 text-[var(--oh-muted)]`,"aria-hidden":!0})]},e.to)}return(0,d.jsxs)(o.NavigationLink,{to:e.to,end:e.end,"data-testid":`sidebar-extensions-${e.to}`,className:({isActive:e})=>r.cn(c.sidebarNavRowClassName(),`truncate`,e?c.SIDEBAR_ROW_INTERACTIVE_CLASS.active:c.SIDEBAR_ROW_INTERACTIVE_CLASS.idle),children:[a,l,u]},e.to)})}),(0,d.jsx)(`div`,{className:`px-2 pt-3`,children:(0,d.jsx)(l.BackendSyncedSettingsBadge,{})})]})}exports.ExtensionsNavigation=h;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../../../node_modules/lucide-react/dist/esm/icons/blocks.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/external-link.cjs"),i=require("../../../utils/utils.cjs"),a=require("../../../api/backend-registry/active-store.cjs"),o=require("../../../contexts/active-backend-context.cjs"),s=require("../../shared/navigation-link.cjs"),c=require("../../../icons/skills.cjs"),l=require("../sidebar/sidebar-layout.cjs"),u=require("../settings/backend-synced-settings-badge.cjs"),d=require("../../../icons/server-process.cjs");let f=require("react/jsx-runtime");var p=`/skills`,m=new Set([`/plugins`,`/extensions`]),h=[{to:`/mcp`,label:`MCP Servers`,icon:(0,f.jsx)(d.default,{width:16,height:16}),end:!0},{to:`/skills`,label:`Skills`,icon:(0,f.jsx)(c.default,{width:16,height:16,"aria-hidden":`true`}),end:!0},{to:`/plugins`,label:`Plugins`,icon:(0,f.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,width:16,height:16,"aria-hidden":`true`,children:[(0,f.jsx)(`path`,{d:`M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z`}),(0,f.jsx)(`path`,{d:`m3.3 7 8.7 5 8.7-5`}),(0,f.jsx)(`path`,{d:`M12 22V12`})]}),end:!0},{to:`/extensions`,label:`Extensions`,icon:(0,f.jsx)(n.Blocks,{width:16,height:16,"aria-hidden":`true`}),end:!0}];function g(){let{t:n}=e.useTranslation(`openhands`),{active:c}=o.useActiveBackendContext(),{backend:d}=c,g=!a.isNoBackend(d)&&d.kind===`cloud`;return(0,f.jsxs)(`aside`,{"data-testid":`extensions-navbar-desktop`,className:`hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start`,children:[(0,f.jsx)(`span`,{className:`px-2 text-sm font-normal text-white`,children:n(t.I18nKey.NAV$CUSTOMIZE)}),(0,f.jsx)(`div`,{className:`flex flex-col gap-0.5 pt-0.5`,children:h.filter(e=>!(m.has(e.to)&&g)).map(e=>{let a=e.to===p&&g,o=(0,f.jsx)(`span`,{className:`shrink-0 flex items-center justify-center`,children:e.icon}),c=(0,f.jsx)(`span`,{className:`truncate`,children:a?n(t.I18nKey.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK):e.label}),u=e.comingSoon&&(0,f.jsx)(`span`,{className:`ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]`,children:n(t.I18nKey.NAV$COMING_SOON)});if(a){let t=`${d.host.replace(/\/+$/,``)}/settings/skills`;return(0,f.jsxs)(`a`,{"data-testid":`sidebar-extensions-${e.to}`,href:t,target:`_blank`,rel:`noopener noreferrer`,className:i.cn(l.sidebarNavRowClassName(),`truncate`,l.SIDEBAR_ROW_INTERACTIVE_CLASS.idle),children:[o,c,(0,f.jsx)(r.ExternalLink,{className:`ml-auto size-4 shrink-0 text-[var(--oh-muted)]`,"aria-hidden":!0})]},e.to)}return(0,f.jsxs)(s.NavigationLink,{to:e.to,end:e.end,"data-testid":`sidebar-extensions-${e.to}`,className:({isActive:e})=>i.cn(l.sidebarNavRowClassName(),`truncate`,e?l.SIDEBAR_ROW_INTERACTIVE_CLASS.active:l.SIDEBAR_ROW_INTERACTIVE_CLASS.idle),children:[o,c,u]},e.to)})}),(0,f.jsx)(`div`,{className:`px-2 pt-3`,children:(0,f.jsx)(u.BackendSyncedSettingsBadge,{})})]})}exports.ExtensionsNavigation=g;
 //# sourceMappingURL=extensions-navigation.cjs.map

package/dist/components/features/skills/extensions-navigation.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"extensions-navigation.cjs","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { ExternalLink } from \"lucide-react\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n SIDEBAR_ROW_INTERACTIVE_CLASS,\n sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\n\n/** Only the Skills item points to a cloud-hosted page today. /\nconst CLOUD_LINKED_EXTENSION_PATH = \"/skills\";\n/* ~~Plugins~~ are not available on Cloud backends, ~~so this item is hidden there~~. */\nconst ~~CLOUD_HIDDEN_EXTENSION_PATH~~ = \"/plugins\";\n\ninterface ExtensionNavItem {\n to: string;\n label: string;\n icon: React.ReactElement;\n end?: boolean;\n comingSoon?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n {\n to: \"/mcp\",\n label: \"MCP Servers\",\n icon: <ServerProcessIcon width={16} height={16} />,\n end: true,\n },\n {\n to: \"/skills\",\n label: \"Skills\",\n icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n end: true,\n },\n {\n to: \"/plugins\",\n label: \"Plugins\",\n icon: (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n width={16}\n height={16}\n aria-hidden=\"true\"\n >\n <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n <path d=\"m3.3 7 8.7 5 8.7-5\" />\n <path d=\"M12 22V12\" />\n </svg>\n ),\n end: true,\n },\n];\n\nexport function ExtensionsNavigation() {\n const { t } = useTranslation(\"openhands\");\n const { active } = useActiveBackendContext();\n const { backend } = active;\n const isCloudBackend = !isNoBackend(backend) && backend.kind === \"cloud\";\n\n return (\n <aside\n data-testid=\"extensions-navbar-desktop\"\n className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n >\n <span className=\"px-2 text-sm font-normal text-white\">\n {t(I18nKey.NAV$CUSTOMIZE)}\n </span>\n <div className=\"flex flex-col gap-0.5 pt-0.5\">\n {EXTENSIONS_NAV_ITEMS.filter(\n (item) =>\n !(item.to ~~=== CLOUD_HIDDEN_EXTENSION_PATH~~ && isCloudBackend),\n ).map((item) => {\n const isCloudSkillsLink =\n item.to === CLOUD_LINKED_EXTENSION_PATH && isCloudBackend;\n const baseRow = (\n <span className=\"shrink-0 flex items-center justify-center\">\n {item.icon}\n </span>\n );\n const label = (\n <span className=\"truncate\">\n {isCloudSkillsLink\n ? t(I18nKey.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK)\n : item.label}\n </span>\n );\n const comingSoonBadge = item.comingSoon && (\n <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n {t(I18nKey.NAV$COMING_SOON)}\n </span>\n );\n\n if (isCloudSkillsLink) {\n const cloudSkillsUrl = `${backend.host.replace(/\\/+$/, \"\")}/settings/skills`;\n return (\n <a\n key={item.to}\n data-testid={`sidebar-extensions-${item.to}`}\n href={cloudSkillsUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={cn(\n sidebarNavRowClassName(),\n \"truncate\",\n SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n )}\n >\n {baseRow}\n {label}\n <ExternalLink\n className=\"ml-auto size-4 shrink-0 text-[var(--oh-muted)]\"\n aria-hidden\n />\n </a>\n );\n }\n\n return (\n <NavigationLink\n key={item.to}\n to={item.to}\n end={item.end}\n data-testid={`sidebar-extensions-${item.to}`}\n className={({ isActive }) =>\n cn(\n sidebarNavRowClassName(),\n \"truncate\",\n isActive\n ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n )\n }\n >\n {baseRow}\n {label}\n {comingSoonBadge}\n </NavigationLink>\n );\n })}\n </div>\n <div className=\"px-2 pt-3\">\n <BackendSyncedSettingsBadge />\n </div>\n </aside>\n );\n}\n"],"mappings":"~~0qBAgBA~~,IAAM,EAA8B,UAE9B,~~EAA8B~~,~~WAUvB~~,EAA2C,CACtD,CACE,GAAI,OACJ,MAAO,cACP,MAAM,EAAA,EAAA,KAAC,EAAA,QAAD,CAAmB,MAAO,GAAI,OAAQ,EAAK,CAAA,EACjD,IAAK,EACP,EACA,CACE,GAAI,UACJ,MAAO,SACP,MAAM,EAAA,EAAA,KAAC,EAAA,QAAD,CAAY,MAAO,GAAI,OAAQ,GAAI,cAAY,MAAQ,CAAA,EAC7D,IAAK,EACP,EACA,CACE,GAAI,WACJ,MAAO,UACP,MACE,EAAA,EAAA,MAAC,MAAD,CACE,MAAM,6BACN,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QACf,MAAO,GACP,OAAQ,GACR,cAAY,gBAVd,EAYE,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,wHAA0H,CAAA,GAClI,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,oBAAsB,CAAA,GAC9B,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,WAAa,CAAA,CAClB,IAEP,IAAK,EACP,CACF,EAEA,SAAgB,GAAuB,CACrC,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAE,UAAW,EAAA,wBAAwB,EACrC,CAAE,WAAY,EACd,EAAiB,CAAC,EAAA,YAAY,CAAO,GAAK,EAAQ,OAAS,QAEjE,OACE,EAAA,EAAA,MAAC,QAAD,CACE,cAAY,4BACZ,UAAU,yGAFZ,EAIE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,+CACb,EAAE,EAAA,QAAQ,aAAa,CACpB,CAAA,GACN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,wCACZ,EAAqB,OACnB,GACC,EAAE,EAAK,~~KAAO~~,~~GAA+B~~,~~EACjD~~,EAAE,IAAK,GAAS,CACd,IAAM,EACJ,EAAK,KAAO,GAA+B,EACvC,GACJ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,qDACb,EAAK,IACF,CAAA,EAEF,GACJ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oBACb,EACG,EAAE,EAAA,QAAQ,qCAAqC,EAC/C,EAAK,KACL,CAAA,EAEF,EAAkB,EAAK,aAC3B,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,2IACb,EAAE,EAAA,QAAQ,eAAe,CACtB,CAAA,EAGR,GAAI,EAAmB,CACrB,IAAM,EAAiB,GAAG,EAAQ,KAAK,QAAQ,OAAQ,EAAE,EAAE,kBAC3D,OACE,EAAA,EAAA,MAAC,IAAD,CAEE,cAAa,sBAAsB,EAAK,KACxC,KAAM,EACN,OAAO,SACP,IAAI,sBACJ,UAAW,EAAA,GACT,EAAA,uBAAuB,EACvB,WACA,EAAA,8BAA8B,IAChC,WAVF,CAYG,EACA,GACD,EAAA,EAAA,KAAC,EAAA,aAAD,CACE,UAAU,iDACV,cAAA,EACD,CAAA,CACA,GAjBI,EAAK,EAiBT,CAEP,CAEA,OACE,EAAA,EAAA,MAAC,EAAA,eAAD,CAEE,GAAI,EAAK,GACT,IAAK,EAAK,IACV,cAAa,sBAAsB,EAAK,KACxC,WAAY,CAAE,cACZ,EAAA,GACE,EAAA,uBAAuB,EACvB,WACA,EACI,EAAA,8BAA8B,OAC9B,EAAA,8BAA8B,IACpC,WAZJ,CAeG,EACA,EACA,CACa,GAjBT,EAAK,EAiBI,CAEpB,CAAC,CACE,CAAA,GACL,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sBACb,EAAA,EAAA,KAAC,EAAA,2BAAD,CAA6B,CAAA,CAC1B,CAAA,CACA,GAEX"}
1	+ {"version":3,"file":"extensions-navigation.cjs","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { Blocks, ExternalLink } from \"lucide-react\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n SIDEBAR_ROW_INTERACTIVE_CLASS,\n sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\n\n/** Only the Skills item points to a cloud-hosted page today. /\nconst CLOUD_LINKED_EXTENSION_PATH = \"/skills\";\n/* Backend-installed artifacts are not available on Cloud backends yet. */\nconst CLOUD_HIDDEN_EXTENSION_PATHS = new Set([\"/plugins\", \"/extensions\"]);\n\ninterface ExtensionNavItem {\n to: string;\n label: string;\n icon: React.ReactElement;\n end?: boolean;\n comingSoon?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n {\n to: \"/mcp\",\n label: \"MCP Servers\",\n icon: <ServerProcessIcon width={16} height={16} />,\n end: true,\n },\n {\n to: \"/skills\",\n label: \"Skills\",\n icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n end: true,\n },\n {\n to: \"/plugins\",\n label: \"Plugins\",\n icon: (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n width={16}\n height={16}\n aria-hidden=\"true\"\n >\n <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n <path d=\"m3.3 7 8.7 5 8.7-5\" />\n <path d=\"M12 22V12\" />\n </svg>\n ),\n end: true,\n },\n {\n to: \"/extensions\",\n label: \"Extensions\",\n icon: <Blocks width={16} height={16} aria-hidden=\"true\" />,\n end: true,\n },\n];\n\nexport function ExtensionsNavigation() {\n const { t } = useTranslation(\"openhands\");\n const { active } = useActiveBackendContext();\n const { backend } = active;\n const isCloudBackend = !isNoBackend(backend) && backend.kind === \"cloud\";\n\n return (\n <aside\n data-testid=\"extensions-navbar-desktop\"\n className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n >\n <span className=\"px-2 text-sm font-normal text-white\">\n {t(I18nKey.NAV$CUSTOMIZE)}\n </span>\n <div className=\"flex flex-col gap-0.5 pt-0.5\">\n {EXTENSIONS_NAV_ITEMS.filter(\n (item) =>\n !(CLOUD_HIDDEN_EXTENSION_PATHS.has(item.to) && isCloudBackend),\n ).map((item) => {\n const isCloudSkillsLink =\n item.to === CLOUD_LINKED_EXTENSION_PATH && isCloudBackend;\n const baseRow = (\n <span className=\"shrink-0 flex items-center justify-center\">\n {item.icon}\n </span>\n );\n const label = (\n <span className=\"truncate\">\n {isCloudSkillsLink\n ? t(I18nKey.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK)\n : item.label}\n </span>\n );\n const comingSoonBadge = item.comingSoon && (\n <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n {t(I18nKey.NAV$COMING_SOON)}\n </span>\n );\n\n if (isCloudSkillsLink) {\n const cloudSkillsUrl = `${backend.host.replace(/\\/+$/, \"\")}/settings/skills`;\n return (\n <a\n key={item.to}\n data-testid={`sidebar-extensions-${item.to}`}\n href={cloudSkillsUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={cn(\n sidebarNavRowClassName(),\n \"truncate\",\n SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n )}\n >\n {baseRow}\n {label}\n <ExternalLink\n className=\"ml-auto size-4 shrink-0 text-[var(--oh-muted)]\"\n aria-hidden\n />\n </a>\n );\n }\n\n return (\n <NavigationLink\n key={item.to}\n to={item.to}\n end={item.end}\n data-testid={`sidebar-extensions-${item.to}`}\n className={({ isActive }) =>\n cn(\n sidebarNavRowClassName(),\n \"truncate\",\n isActive\n ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n )\n }\n >\n {baseRow}\n {label}\n {comingSoonBadge}\n </NavigationLink>\n );\n })}\n </div>\n <div className=\"px-2 pt-3\">\n <BackendSyncedSettingsBadge />\n </div>\n </aside>\n );\n}\n"],"mappings":"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"}

package/dist/components/features/skills/extensions-navigation.js CHANGED Viewed

@@ -1,21 +1,22 @@
 import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../i18n/declaration.js";
-import { ExternalLink as n } from "../../../node_modules/lucide-react/dist/esm/icons/external-link.js";
-import { cn as r } from "../../../utils/utils.js";
-import { isNoBackend as i } from "../../../api/backend-registry/active-store.js";
-import { useActiveBackendContext as a } from "../../../contexts/active-backend-context.js";
-import { NavigationLink as o } from "../../shared/navigation-link.js";
-import s from "../../../icons/skills.js";
-import { SIDEBAR_ROW_INTERACTIVE_CLASS as c, sidebarNavRowClassName as l } from "../sidebar/sidebar-layout.js";
-import { BackendSyncedSettingsBadge as u } from "../settings/backend-synced-settings-badge.js";
-import d from "../../../icons/server-process.js";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Blocks as n } from "../../../node_modules/lucide-react/dist/esm/icons/blocks.js";
+import { ExternalLink as r } from "../../../node_modules/lucide-react/dist/esm/icons/external-link.js";
+import { cn as i } from "../../../utils/utils.js";
+import { isNoBackend as a } from "../../../api/backend-registry/active-store.js";
+import { useActiveBackendContext as o } from "../../../contexts/active-backend-context.js";
+import { NavigationLink as s } from "../../shared/navigation-link.js";
+import c from "../../../icons/skills.js";
+import { SIDEBAR_ROW_INTERACTIVE_CLASS as l, sidebarNavRowClassName as u } from "../sidebar/sidebar-layout.js";
+import { BackendSyncedSettingsBadge as d } from "../settings/backend-synced-settings-badge.js";
+import f from "../../../icons/server-process.js";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/features/skills/extensions-navigation.tsx
-var m = "/skills", h = "/plugins", g = [
+var h = "/skills", g = new Set(["/plugins", "/extensions"]), _ = [
 	{
 		to: "/mcp",
 		label: "MCP Servers",
-		icon: /* @__PURE__ */ f(d, {
+		icon: /* @__PURE__ */ p(f, {
 			width: 16,
 			height: 16
 		}),
@@ -24,7 +25,7 @@ var m = "/skills", h = "/plugins", g = [
 	{
 		to: "/skills",
 		label: "Skills",
-		icon: /* @__PURE__ */ f(s, {
+		icon: /* @__PURE__ */ p(c, {
 			width: 16,
 			height: 16,
 			"aria-hidden": "true"
@@ -34,7 +35,7 @@ var m = "/skills", h = "/plugins", g = [
 	{
 		to: "/plugins",
 		label: "Plugins",
-		icon: /* @__PURE__ */ p("svg", {
+		icon: /* @__PURE__ */ m("svg", {
 			xmlns: "http://www.w3.org/2000/svg",
 			viewBox: "0 0 24 24",
 			fill: "none",
@@ -46,76 +47,86 @@ var m = "/skills", h = "/plugins", g = [
 			height: 16,
 			"aria-hidden": "true",
 			children: [
-				/* @__PURE__ */ f("path", { d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" }),
-				/* @__PURE__ */ f("path", { d: "m3.3 7 8.7 5 8.7-5" }),
-				/* @__PURE__ */ f("path", { d: "M12 22V12" })
+				/* @__PURE__ */ p("path", { d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" }),
+				/* @__PURE__ */ p("path", { d: "m3.3 7 8.7 5 8.7-5" }),
+				/* @__PURE__ */ p("path", { d: "M12 22V12" })
 			]
 		}),
 		end: !0
+	},
+	{
+		to: "/extensions",
+		label: "Extensions",
+		icon: /* @__PURE__ */ p(n, {
+			width: 16,
+			height: 16,
+			"aria-hidden": "true"
+		}),
+		end: !0
 	}
 ];
-function _() {
-	let { t: s } = e("openhands"), { active: d } = a(), { backend: _ } = d, v = !i(_) && _.kind === "cloud";
-	return /* @__PURE__ */ p("aside", {
+function v() {
+	let { t: n } = e("openhands"), { active: c } = o(), { backend: f } = c, v = !a(f) && f.kind === "cloud";
+	return /* @__PURE__ */ m("aside", {
 		"data-testid": "extensions-navbar-desktop",
 		className: "hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start",
 		children: [
-			/* @__PURE__ */ f("span", {
+			/* @__PURE__ */ p("span", {
 				className: "px-2 text-sm font-normal text-white",
-				children: s(t.NAV$CUSTOMIZE)
+				children: n(t.NAV$CUSTOMIZE)
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ p("div", {
 				className: "flex flex-col gap-0.5 pt-0.5",
-				children: g.filter((e) => !(e.to === h && v)).map((e) => {
-					let i = e.to === m && v, a = /* @__PURE__ */ f("span", {
+				children: _.filter((e) => !(g.has(e.to) && v)).map((e) => {
+					let a = e.to === h && v, o = /* @__PURE__ */ p("span", {
 						className: "shrink-0 flex items-center justify-center",
 						children: e.icon
-					}), u = /* @__PURE__ */ f("span", {
+					}), c = /* @__PURE__ */ p("span", {
 						className: "truncate",
-						children: i ? s(t.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK) : e.label
-					}), d = e.comingSoon && /* @__PURE__ */ f("span", {
+						children: a ? n(t.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK) : e.label
+					}), d = e.comingSoon && /* @__PURE__ */ p("span", {
 						className: "ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]",
-						children: s(t.NAV$COMING_SOON)
+						children: n(t.NAV$COMING_SOON)
 					});
-					if (i) {
-						let t = `${_.host.replace(/\/+$/, "")}/settings/skills`;
-						return /* @__PURE__ */ p("a", {
+					if (a) {
+						let t = `${f.host.replace(/\/+$/, "")}/settings/skills`;
+						return /* @__PURE__ */ m("a", {
 							"data-testid": `sidebar-extensions-${e.to}`,
 							href: t,
 							target: "_blank",
 							rel: "noopener noreferrer",
-							className: r(l(), "truncate", c.idle),
+							className: i(u(), "truncate", l.idle),
 							children: [
-								a,
-								u,
-								/* @__PURE__ */ f(n, {
+								o,
+								c,
+								/* @__PURE__ */ p(r, {
 									className: "ml-auto size-4 shrink-0 text-[var(--oh-muted)]",
 									"aria-hidden": !0
 								})
 							]
 						}, e.to);
 					}
-					return /* @__PURE__ */ p(o, {
+					return /* @__PURE__ */ m(s, {
 						to: e.to,
 						end: e.end,
 						"data-testid": `sidebar-extensions-${e.to}`,
-						className: ({ isActive: e }) => r(l(), "truncate", e ? c.active : c.idle),
+						className: ({ isActive: e }) => i(u(), "truncate", e ? l.active : l.idle),
 						children: [
-							a,
-							u,
+							o,
+							c,
 							d
 						]
 					}, e.to);
 				})
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ p("div", {
 				className: "px-2 pt-3",
-				children: /* @__PURE__ */ f(u, {})
+				children: /* @__PURE__ */ p(d, {})
 			})
 		]
 	});
 }
 //#endregion
-export { _ as ExtensionsNavigation };
+export { v as ExtensionsNavigation };
 //# sourceMappingURL=extensions-navigation.js.map

package/dist/components/features/skills/extensions-navigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"extensions-navigation.js","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { ExternalLink } from \"lucide-react\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n SIDEBAR_ROW_INTERACTIVE_CLASS,\n sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\n\n/** Only the Skills item points to a cloud-hosted page today. /\nconst CLOUD_LINKED_EXTENSION_PATH = \"/skills\";\n/* ~~Plugins~~ are not available on Cloud backends, ~~so this item is hidden there~~. */\nconst ~~CLOUD_HIDDEN_EXTENSION_PATH~~ = \"/plugins\";\n\ninterface ExtensionNavItem {\n to: string;\n label: string;\n icon: React.ReactElement;\n end?: boolean;\n comingSoon?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n {\n to: \"/mcp\",\n label: \"MCP Servers\",\n icon: <ServerProcessIcon width={16} height={16} />,\n end: true,\n },\n {\n to: \"/skills\",\n label: \"Skills\",\n icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n end: true,\n },\n {\n to: \"/plugins\",\n label: \"Plugins\",\n icon: (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n width={16}\n height={16}\n aria-hidden=\"true\"\n >\n <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n <path d=\"m3.3 7 8.7 5 8.7-5\" />\n <path d=\"M12 22V12\" />\n </svg>\n ),\n end: true,\n },\n];\n\nexport function ExtensionsNavigation() {\n const { t } = useTranslation(\"openhands\");\n const { active } = useActiveBackendContext();\n const { backend } = active;\n const isCloudBackend = !isNoBackend(backend) && backend.kind === \"cloud\";\n\n return (\n <aside\n data-testid=\"extensions-navbar-desktop\"\n className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n >\n <span className=\"px-2 text-sm font-normal text-white\">\n {t(I18nKey.NAV$CUSTOMIZE)}\n </span>\n <div className=\"flex flex-col gap-0.5 pt-0.5\">\n {EXTENSIONS_NAV_ITEMS.filter(\n (item) =>\n !(item.to ~~=== CLOUD_HIDDEN_EXTENSION_PATH~~ && isCloudBackend),\n ).map((item) => {\n const isCloudSkillsLink =\n item.to === CLOUD_LINKED_EXTENSION_PATH && isCloudBackend;\n const baseRow = (\n <span className=\"shrink-0 flex items-center justify-center\">\n {item.icon}\n </span>\n );\n const label = (\n <span className=\"truncate\">\n {isCloudSkillsLink\n ? t(I18nKey.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK)\n : item.label}\n </span>\n );\n const comingSoonBadge = item.comingSoon && (\n <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n {t(I18nKey.NAV$COMING_SOON)}\n </span>\n );\n\n if (isCloudSkillsLink) {\n const cloudSkillsUrl = `${backend.host.replace(/\\/+$/, \"\")}/settings/skills`;\n return (\n <a\n key={item.to}\n data-testid={`sidebar-extensions-${item.to}`}\n href={cloudSkillsUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={cn(\n sidebarNavRowClassName(),\n \"truncate\",\n SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n )}\n >\n {baseRow}\n {label}\n <ExternalLink\n className=\"ml-auto size-4 shrink-0 text-[var(--oh-muted)]\"\n aria-hidden\n />\n </a>\n );\n }\n\n return (\n <NavigationLink\n key={item.to}\n to={item.to}\n end={item.end}\n data-testid={`sidebar-extensions-${item.to}`}\n className={({ isActive }) =>\n cn(\n sidebarNavRowClassName(),\n \"truncate\",\n isActive\n ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n )\n }\n >\n {baseRow}\n {label}\n {comingSoonBadge}\n </NavigationLink>\n );\n })}\n </div>\n <div className=\"px-2 pt-3\">\n <BackendSyncedSettingsBadge />\n </div>\n </aside>\n );\n}\n"],"mappings":"~~;;;;;;;;;;;;;~~AAgBA,IAAM,IAA8B,WAE9B,~~IAA8B~~,~~YAUvB~~,IAA2C;CACtD;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAmB,OAAO;GAAI,QAAQ;EAAK,CAAA;EACjD,KAAK;CACP;CACA;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAY,OAAO;GAAI,QAAQ;GAAI,eAAY;EAAQ,CAAA;EAC7D,KAAK;CACP;CACA;EACE,IAAI;EACJ,OAAO;EACP,MACE,kBAAC,OAAD;GACE,OAAM;GACN,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,OAAO;GACP,QAAQ;GACR,eAAY;aAVd;IAYE,kBAAC,QAAD,EAAM,GAAE,yHAA0H,CAAA;IAClI,kBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA;IAC9B,kBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;GAClB;;EAEP,KAAK;CACP;AACF;AAEA,SAAgB,IAAuB;CACrC,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,EAAE,cAAW,EAAwB,GACrC,EAAE,eAAY,GACd,IAAiB,CAAC,EAAY,CAAO,KAAK,EAAQ,SAAS;CAEjE,OACE,kBAAC,SAAD;EACE,eAAY;EACZ,WAAU;YAFZ;GAIE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAE,EAAQ,aAAa;GACpB,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAqB,QACnB,MACC,EAAE,EAAK,~~OAAO~~,~~KAA+B~~,~~EACjD~~,EAAE,KAAK,MAAS;KACd,IAAM,IACJ,EAAK,OAAO,KAA+B,GACvC,IACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAK;KACF,CAAA,GAEF,IACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,IACG,EAAE,EAAQ,qCAAqC,IAC/C,EAAK;KACL,CAAA,GAEF,IAAkB,EAAK,cAC3B,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAE,EAAQ,eAAe;KACtB,CAAA;KAGR,IAAI,GAAmB;MACrB,IAAM,IAAiB,GAAG,EAAQ,KAAK,QAAQ,QAAQ,EAAE,EAAE;MAC3D,OACE,kBAAC,KAAD;OAEE,eAAa,sBAAsB,EAAK;OACxC,MAAM;OACN,QAAO;OACP,KAAI;OACJ,WAAW,EACT,EAAuB,GACvB,YACA,EAA8B,IAChC;iBAVF;QAYG;QACA;QACD,kBAAC,GAAD;SACE,WAAU;SACV,eAAA;QACD,CAAA;OACA;SAjBI,EAAK,EAiBT;KAEP;KAEA,OACE,kBAAC,GAAD;MAEE,IAAI,EAAK;MACT,KAAK,EAAK;MACV,eAAa,sBAAsB,EAAK;MACxC,YAAY,EAAE,kBACZ,EACE,EAAuB,GACvB,YACA,IACI,EAA8B,SAC9B,EAA8B,IACpC;gBAZJ;OAeG;OACA;OACA;MACa;QAjBT,EAAK,EAiBI;IAEpB,CAAC;GACE,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,CAA6B,CAAA;GAC1B,CAAA;EACA;;AAEX"}
1	+ {"version":3,"file":"extensions-navigation.js","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { Blocks, ExternalLink } from \"lucide-react\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n SIDEBAR_ROW_INTERACTIVE_CLASS,\n sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\n\n/** Only the Skills item points to a cloud-hosted page today. /\nconst CLOUD_LINKED_EXTENSION_PATH = \"/skills\";\n/* Backend-installed artifacts are not available on Cloud backends yet. */\nconst CLOUD_HIDDEN_EXTENSION_PATHS = new Set([\"/plugins\", \"/extensions\"]);\n\ninterface ExtensionNavItem {\n to: string;\n label: string;\n icon: React.ReactElement;\n end?: boolean;\n comingSoon?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n {\n to: \"/mcp\",\n label: \"MCP Servers\",\n icon: <ServerProcessIcon width={16} height={16} />,\n end: true,\n },\n {\n to: \"/skills\",\n label: \"Skills\",\n icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n end: true,\n },\n {\n to: \"/plugins\",\n label: \"Plugins\",\n icon: (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n width={16}\n height={16}\n aria-hidden=\"true\"\n >\n <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n <path d=\"m3.3 7 8.7 5 8.7-5\" />\n <path d=\"M12 22V12\" />\n </svg>\n ),\n end: true,\n },\n {\n to: \"/extensions\",\n label: \"Extensions\",\n icon: <Blocks width={16} height={16} aria-hidden=\"true\" />,\n end: true,\n },\n];\n\nexport function ExtensionsNavigation() {\n const { t } = useTranslation(\"openhands\");\n const { active } = useActiveBackendContext();\n const { backend } = active;\n const isCloudBackend = !isNoBackend(backend) && backend.kind === \"cloud\";\n\n return (\n <aside\n data-testid=\"extensions-navbar-desktop\"\n className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n >\n <span className=\"px-2 text-sm font-normal text-white\">\n {t(I18nKey.NAV$CUSTOMIZE)}\n </span>\n <div className=\"flex flex-col gap-0.5 pt-0.5\">\n {EXTENSIONS_NAV_ITEMS.filter(\n (item) =>\n !(CLOUD_HIDDEN_EXTENSION_PATHS.has(item.to) && isCloudBackend),\n ).map((item) => {\n const isCloudSkillsLink =\n item.to === CLOUD_LINKED_EXTENSION_PATH && isCloudBackend;\n const baseRow = (\n <span className=\"shrink-0 flex items-center justify-center\">\n {item.icon}\n </span>\n );\n const label = (\n <span className=\"truncate\">\n {isCloudSkillsLink\n ? t(I18nKey.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK)\n : item.label}\n </span>\n );\n const comingSoonBadge = item.comingSoon && (\n <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n {t(I18nKey.NAV$COMING_SOON)}\n </span>\n );\n\n if (isCloudSkillsLink) {\n const cloudSkillsUrl = `${backend.host.replace(/\\/+$/, \"\")}/settings/skills`;\n return (\n <a\n key={item.to}\n data-testid={`sidebar-extensions-${item.to}`}\n href={cloudSkillsUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={cn(\n sidebarNavRowClassName(),\n \"truncate\",\n SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n )}\n >\n {baseRow}\n {label}\n <ExternalLink\n className=\"ml-auto size-4 shrink-0 text-[var(--oh-muted)]\"\n aria-hidden\n />\n </a>\n );\n }\n\n return (\n <NavigationLink\n key={item.to}\n to={item.to}\n end={item.end}\n data-testid={`sidebar-extensions-${item.to}`}\n className={({ isActive }) =>\n cn(\n sidebarNavRowClassName(),\n \"truncate\",\n isActive\n ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n )\n }\n >\n {baseRow}\n {label}\n {comingSoonBadge}\n </NavigationLink>\n );\n })}\n </div>\n <div className=\"px-2 pt-3\">\n <BackendSyncedSettingsBadge />\n </div>\n </aside>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAM,IAA8B,WAE9B,IAA+B,IAAI,IAAI,CAAC,YAAY,aAAa,CAAC,GAU3D,IAA2C;CACtD;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAmB,OAAO;GAAI,QAAQ;EAAK,CAAA;EACjD,KAAK;CACP;CACA;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAY,OAAO;GAAI,QAAQ;GAAI,eAAY;EAAQ,CAAA;EAC7D,KAAK;CACP;CACA;EACE,IAAI;EACJ,OAAO;EACP,MACE,kBAAC,OAAD;GACE,OAAM;GACN,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,OAAO;GACP,QAAQ;GACR,eAAY;aAVd;IAYE,kBAAC,QAAD,EAAM,GAAE,yHAA0H,CAAA;IAClI,kBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA;IAC9B,kBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;GAClB;;EAEP,KAAK;CACP;CACA;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAQ,OAAO;GAAI,QAAQ;GAAI,eAAY;EAAQ,CAAA;EACzD,KAAK;CACP;AACF;AAEA,SAAgB,IAAuB;CACrC,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,EAAE,cAAW,EAAwB,GACrC,EAAE,eAAY,GACd,IAAiB,CAAC,EAAY,CAAO,KAAK,EAAQ,SAAS;CAEjE,OACE,kBAAC,SAAD;EACE,eAAY;EACZ,WAAU;YAFZ;GAIE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAE,EAAQ,aAAa;GACpB,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAqB,QACnB,MACC,EAAE,EAA6B,IAAI,EAAK,EAAE,KAAK,EACnD,EAAE,KAAK,MAAS;KACd,IAAM,IACJ,EAAK,OAAO,KAA+B,GACvC,IACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAK;KACF,CAAA,GAEF,IACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,IACG,EAAE,EAAQ,qCAAqC,IAC/C,EAAK;KACL,CAAA,GAEF,IAAkB,EAAK,cAC3B,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAE,EAAQ,eAAe;KACtB,CAAA;KAGR,IAAI,GAAmB;MACrB,IAAM,IAAiB,GAAG,EAAQ,KAAK,QAAQ,QAAQ,EAAE,EAAE;MAC3D,OACE,kBAAC,KAAD;OAEE,eAAa,sBAAsB,EAAK;OACxC,MAAM;OACN,QAAO;OACP,KAAI;OACJ,WAAW,EACT,EAAuB,GACvB,YACA,EAA8B,IAChC;iBAVF;QAYG;QACA;QACD,kBAAC,GAAD;SACE,WAAU;SACV,eAAA;QACD,CAAA;OACA;SAjBI,EAAK,EAiBT;KAEP;KAEA,OACE,kBAAC,GAAD;MAEE,IAAI,EAAK;MACT,KAAK,EAAK;MACV,eAAa,sBAAsB,EAAK;MACxC,YAAY,EAAE,kBACZ,EACE,EAAuB,GACvB,YACA,IACI,EAA8B,SAC9B,EAA8B,IACpC;gBAZJ;OAeG;OACA;OACA;MACa;QAjBT,EAAK,EAiBI;IAEpB,CAAC;GACE,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,CAA6B,CAAA;GAC1B,CAAA;EACA;;AAEX"}

package/dist/components/features/skills/get-skill-card-description.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ require("../../../_virtual/_rolldown/runtime.cjs");var e=/^---\r?\n([\s\S]?)\r?\n---\r?\n?/;function t(e){let t=e.match(/^description:\s\\|\s\r?\n((?:[ \t].(?:\r?\n\|$))+)/m);if(t)return t[1].replace(/^[ \t]+/gm,``).trim();let n=e.match(/^description:\s['"](.+?)['"]\s$/m);if(n)return n[1].trim();let r=e.match(/^description:\s(.+)\s$/m);return r?r[1].trim():null}function n(t){let n=t.match(e);return n?t.slice(n[0].length).trim():t.trim()}function r(e){let t=e.replace(/^#+\s+[^\n]+\n+/,``).trim();return t.split(/\n\s*\n/).map(e=>e.replace(/\s+/g,` `).trim()).find(e=>e.length>0)??t.replace(/\s+/g,` `).trim()}function i(i){let a=i.description?.trim();if(a)return a;let o=i.content?.trim();if(!o)return``;let s=o.match(e);if(s){let e=t(s[1]);if(e)return e}return r(n(o))}exports.getSkillCardDescription=i;
2	+ //# sourceMappingURL=get-skill-card-description.cjs.map

package/dist/components/features/skills/get-skill-card-description.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"get-skill-card-description.cjs","names":[],"sources":["../../../../src/components/features/skills/get-skill-card-description.ts"],"sourcesContent":["import type { SkillInfo } from \"#/types/settings\";\n\nconst FRONTMATTER_PATTERN = /^---\\r?\\n([\\s\\S]*?)\\r?\\n---\\r?\\n?/;\n\nfunction parseDescriptionFromFrontmatter(frontmatter: string): string | null {\n const blockMatch = frontmatter.match(\n /^description:\\s*\\|\\s*\\r?\\n((?:[ \\t].*(?:\\r?\\n|$))+)/m,\n );\n if (blockMatch) {\n return blockMatch[1]!.replace(/^[ \\t]+/gm, \"\").trim();\n }\n\n const quotedMatch = frontmatter.match(/^description:\\s*['\"](.+?)['\"]\\s*$/m);\n if (quotedMatch) {\n return quotedMatch[1]!.trim();\n }\n\n const inlineMatch = frontmatter.match(/^description:\\s*(.+)\\s*$/m);\n if (inlineMatch) {\n return inlineMatch[1]!.trim();\n }\n\n return null;\n}\n\nfunction stripFrontmatter(content: string): string {\n const match = content.match(FRONTMATTER_PATTERN);\n if (!match) return content.trim();\n return content.slice(match[0].length).trim();\n}\n\nfunction extractBodyPreview(body: string): string {\n const withoutTitle = body.replace(/^#+\\s+[^\\n]+\\n+/, \"\").trim();\n const paragraph =\n withoutTitle\n .split(/\\n\\s*\\n/)\n .map((part) => part.replace(/\\s+/g, \" \").trim())\n .find((part) => part.length > 0) ??\n withoutTitle.replace(/\\s+/g, \" \").trim();\n\n return paragraph;\n}\n\n/**\n * Subtitle text for skill cards: prefer API `description`, then YAML\n * frontmatter inside `content`, then the first body paragraph.\n */\nexport function getSkillCardDescription(skill: SkillInfo): string {\n const description = skill.description?.trim();\n if (description) return description;\n\n const content = skill.content?.trim();\n if (!content) return \"\";\n\n const frontmatterMatch = content.match(FRONTMATTER_PATTERN);\n if (frontmatterMatch) {\n const fromFrontmatter = parseDescriptionFromFrontmatter(\n frontmatterMatch[1]!,\n );\n if (fromFrontmatter) return fromFrontmatter;\n }\n\n return extractBodyPreview(stripFrontmatter(content));\n}\n"],"mappings":"mDAEA,IAAM,EAAsB,oCAE5B,SAAS,EAAgC,EAAoC,CAC3E,IAAM,EAAa,EAAY,MAC7B,sDACF,EACA,GAAI,EACF,OAAO,EAAW,GAAI,QAAQ,YAAa,EAAE,EAAE,KAAK,EAGtD,IAAM,EAAc,EAAY,MAAM,oCAAoC,EAC1E,GAAI,EACF,OAAO,EAAY,GAAI,KAAK,EAG9B,IAAM,EAAc,EAAY,MAAM,2BAA2B,EAKjE,OAJI,EACK,EAAY,GAAI,KAAK,EAGvB,IACT,CAEA,SAAS,EAAiB,EAAyB,CACjD,IAAM,EAAQ,EAAQ,MAAM,CAAmB,EAE/C,OADK,EACE,EAAQ,MAAM,EAAM,GAAG,MAAM,EAAE,KAAK,EADxB,EAAQ,KAAK,CAElC,CAEA,SAAS,EAAmB,EAAsB,CAChD,IAAM,EAAe,EAAK,QAAQ,kBAAmB,EAAE,EAAE,KAAK,EAQ9D,OANE,EACG,MAAM,SAAS,EACf,IAAK,GAAS,EAAK,QAAQ,OAAQ,GAAG,EAAE,KAAK,CAAC,EAC9C,KAAM,GAAS,EAAK,OAAS,CAAC,GACjC,EAAa,QAAQ,OAAQ,GAAG,EAAE,KAAK,CAG3C,CAMA,SAAgB,EAAwB,EAA0B,CAChE,IAAM,EAAc,EAAM,aAAa,KAAK,EAC5C,GAAI,EAAa,OAAO,EAExB,IAAM,EAAU,EAAM,SAAS,KAAK,EACpC,GAAI,CAAC,EAAS,MAAO,GAErB,IAAM,EAAmB,EAAQ,MAAM,CAAmB,EAC1D,GAAI,EAAkB,CACpB,IAAM,EAAkB,EACtB,EAAiB,EACnB,EACA,GAAI,EAAiB,OAAO,CAC9B,CAEA,OAAO,EAAmB,EAAiB,CAAO,CAAC,CACrD"}

package/dist/components/features/skills/get-skill-card-description.js ADDED Viewed

@@ -0,0 +1,34 @@
+//#region src/components/features/skills/get-skill-card-description.ts
+var e = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/;
+function t(e) {
+	let t = e.match(/^description:\s*\|\s*\r?\n((?:[ \t].*(?:\r?\n|$))+)/m);
+	if (t) return t[1].replace(/^[ \t]+/gm, "").trim();
+	let n = e.match(/^description:\s*['"](.+?)['"]\s*$/m);
+	if (n) return n[1].trim();
+	let r = e.match(/^description:\s*(.+)\s*$/m);
+	return r ? r[1].trim() : null;
+}
+function n(t) {
+	let n = t.match(e);
+	return n ? t.slice(n[0].length).trim() : t.trim();
+}
+function r(e) {
+	let t = e.replace(/^#+\s+[^\n]+\n+/, "").trim();
+	return t.split(/\n\s*\n/).map((e) => e.replace(/\s+/g, " ").trim()).find((e) => e.length > 0) ?? t.replace(/\s+/g, " ").trim();
+}
+function i(i) {
+	let a = i.description?.trim();
+	if (a) return a;
+	let o = i.content?.trim();
+	if (!o) return "";
+	let s = o.match(e);
+	if (s) {
+		let e = t(s[1]);
+		if (e) return e;
+	}
+	return r(n(o));
+}
+//#endregion
+export { i as getSkillCardDescription };
+//# sourceMappingURL=get-skill-card-description.js.map

package/dist/components/features/skills/get-skill-card-description.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"get-skill-card-description.js","names":[],"sources":["../../../../src/components/features/skills/get-skill-card-description.ts"],"sourcesContent":["import type { SkillInfo } from \"#/types/settings\";\n\nconst FRONTMATTER_PATTERN = /^---\\r?\\n([\\s\\S]*?)\\r?\\n---\\r?\\n?/;\n\nfunction parseDescriptionFromFrontmatter(frontmatter: string): string | null {\n const blockMatch = frontmatter.match(\n /^description:\\s*\\|\\s*\\r?\\n((?:[ \\t].*(?:\\r?\\n|$))+)/m,\n );\n if (blockMatch) {\n return blockMatch[1]!.replace(/^[ \\t]+/gm, \"\").trim();\n }\n\n const quotedMatch = frontmatter.match(/^description:\\s*['\"](.+?)['\"]\\s*$/m);\n if (quotedMatch) {\n return quotedMatch[1]!.trim();\n }\n\n const inlineMatch = frontmatter.match(/^description:\\s*(.+)\\s*$/m);\n if (inlineMatch) {\n return inlineMatch[1]!.trim();\n }\n\n return null;\n}\n\nfunction stripFrontmatter(content: string): string {\n const match = content.match(FRONTMATTER_PATTERN);\n if (!match) return content.trim();\n return content.slice(match[0].length).trim();\n}\n\nfunction extractBodyPreview(body: string): string {\n const withoutTitle = body.replace(/^#+\\s+[^\\n]+\\n+/, \"\").trim();\n const paragraph =\n withoutTitle\n .split(/\\n\\s*\\n/)\n .map((part) => part.replace(/\\s+/g, \" \").trim())\n .find((part) => part.length > 0) ??\n withoutTitle.replace(/\\s+/g, \" \").trim();\n\n return paragraph;\n}\n\n/**\n * Subtitle text for skill cards: prefer API `description`, then YAML\n * frontmatter inside `content`, then the first body paragraph.\n */\nexport function getSkillCardDescription(skill: SkillInfo): string {\n const description = skill.description?.trim();\n if (description) return description;\n\n const content = skill.content?.trim();\n if (!content) return \"\";\n\n const frontmatterMatch = content.match(FRONTMATTER_PATTERN);\n if (frontmatterMatch) {\n const fromFrontmatter = parseDescriptionFromFrontmatter(\n frontmatterMatch[1]!,\n );\n if (fromFrontmatter) return fromFrontmatter;\n }\n\n return extractBodyPreview(stripFrontmatter(content));\n}\n"],"mappings":";AAEA,IAAM,IAAsB;AAE5B,SAAS,EAAgC,GAAoC;CAC3E,IAAM,IAAa,EAAY,MAC7B,sDACF;CACA,IAAI,GACF,OAAO,EAAW,GAAI,QAAQ,aAAa,EAAE,EAAE,KAAK;CAGtD,IAAM,IAAc,EAAY,MAAM,oCAAoC;CAC1E,IAAI,GACF,OAAO,EAAY,GAAI,KAAK;CAG9B,IAAM,IAAc,EAAY,MAAM,2BAA2B;CAKjE,OAJI,IACK,EAAY,GAAI,KAAK,IAGvB;AACT;AAEA,SAAS,EAAiB,GAAyB;CACjD,IAAM,IAAQ,EAAQ,MAAM,CAAmB;CAE/C,OADK,IACE,EAAQ,MAAM,EAAM,GAAG,MAAM,EAAE,KAAK,IADxB,EAAQ,KAAK;AAElC;AAEA,SAAS,EAAmB,GAAsB;CAChD,IAAM,IAAe,EAAK,QAAQ,mBAAmB,EAAE,EAAE,KAAK;CAQ9D,OANE,EACG,MAAM,SAAS,EACf,KAAK,MAAS,EAAK,QAAQ,QAAQ,GAAG,EAAE,KAAK,CAAC,EAC9C,MAAM,MAAS,EAAK,SAAS,CAAC,KACjC,EAAa,QAAQ,QAAQ,GAAG,EAAE,KAAK;AAG3C;AAMA,SAAgB,EAAwB,GAA0B;CAChE,IAAM,IAAc,EAAM,aAAa,KAAK;CAC5C,IAAI,GAAa,OAAO;CAExB,IAAM,IAAU,EAAM,SAAS,KAAK;CACpC,IAAI,CAAC,GAAS,OAAO;CAErB,IAAM,IAAmB,EAAQ,MAAM,CAAmB;CAC1D,IAAI,GAAkB;EACpB,IAAM,IAAkB,EACtB,EAAiB,EACnB;EACA,IAAI,GAAiB,OAAO;CAC9B;CAEA,OAAO,EAAmB,EAAiB,CAAO,CAAC;AACrD"}

package/dist/components/features/skills/get-skill-chat-launch-message.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../constants/skills-docs.cjs");function t(t){return t.name===`add-skill`?e.ADD_SKILL_EXAMPLE_COMMAND:`/${t.name} `}exports.getSkillChatLaunchMessage=t;
2	+ //# sourceMappingURL=get-skill-chat-launch-message.cjs.map

package/dist/components/features/skills/get-skill-chat-launch-message.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"get-skill-chat-launch-message.cjs","names":[],"sources":["../../../../src/components/features/skills/get-skill-chat-launch-message.ts"],"sourcesContent":["import {\n ADD_SKILL_EXAMPLE_COMMAND,\n ADD_SKILL_SKILL_NAME,\n} from \"#/constants/skills-docs\";\nimport type { SkillInfo } from \"#/types/settings\";\n\nexport function getSkillChatLaunchMessage(\n skill: Pick<SkillInfo, \"name\">,\n): string {\n if (skill.name === ADD_SKILL_SKILL_NAME) {\n return ADD_SKILL_EXAMPLE_COMMAND;\n }\n\n return `/${skill.name} `;\n}\n"],"mappings":"yGAMA,SAAgB,EACd,EACQ,CAKR,OAJI,EAAM,OAAA,YACD,EAAA,0BAGF,IAAI,EAAM,KAAK,EACxB"}

package/dist/components/features/skills/get-skill-chat-launch-message.js ADDED Viewed

@@ -0,0 +1,9 @@
+import { ADD_SKILL_EXAMPLE_COMMAND as e } from "../../../constants/skills-docs.js";
+//#region src/components/features/skills/get-skill-chat-launch-message.ts
+function t(t) {
+	return t.name === "add-skill" ? e : `/${t.name} `;
+}
+//#endregion
+export { t as getSkillChatLaunchMessage };
+//# sourceMappingURL=get-skill-chat-launch-message.js.map

package/dist/components/features/skills/get-skill-chat-launch-message.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"get-skill-chat-launch-message.js","names":[],"sources":["../../../../src/components/features/skills/get-skill-chat-launch-message.ts"],"sourcesContent":["import {\n ADD_SKILL_EXAMPLE_COMMAND,\n ADD_SKILL_SKILL_NAME,\n} from \"#/constants/skills-docs\";\nimport type { SkillInfo } from \"#/types/settings\";\n\nexport function getSkillChatLaunchMessage(\n skill: Pick<SkillInfo, \"name\">,\n): string {\n if (skill.name === ADD_SKILL_SKILL_NAME) {\n return ADD_SKILL_EXAMPLE_COMMAND;\n }\n\n return `/${skill.name} `;\n}\n"],"mappings":";;AAMA,SAAgB,EACd,GACQ;CAKR,OAJI,EAAM,SAAA,cACD,IAGF,IAAI,EAAM,KAAK;AACxB"}

package/dist/components/features/skills/is-copyable-skill-source.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ require("../../../_virtual/_rolldown/runtime.cjs");function e(e){let t=e?.trim();return t?!!(/^https?:\/\//i.test(t)\|\|t.startsWith(`/`)\|\|t.startsWith(`./`)\|\|t.startsWith(`../`)\|\|t.startsWith(`~`)\|\|/^[A-Za-z]:[\\/]/.test(t)\|\|t.includes(`/`)\|\|t.includes(`\\`)):!1}exports.isCopyableSkillSource=e;
2	+ //# sourceMappingURL=is-copyable-skill-source.cjs.map

package/dist/components/features/skills/is-copyable-skill-source.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"is-copyable-skill-source.cjs","names":[],"sources":["../../../../src/components/features/skills/is-copyable-skill-source.ts"],"sourcesContent":["/** True when `source` is a filesystem path or URL worth copying (not a scope label like \"global\"). */\nexport function isCopyableSkillSource(\n source: string | null | undefined,\n): boolean {\n const trimmed = source?.trim();\n if (!trimmed) return false;\n\n if (/^https?:\\/\\//i.test(trimmed)) return true;\n if (\n trimmed.startsWith(\"/\") ||\n trimmed.startsWith(\"./\") ||\n trimmed.startsWith(\"../\") ||\n trimmed.startsWith(\"~\")\n ) {\n return true;\n }\n if (/^[A-Za-z]:[\\\\/]/.test(trimmed)) return true;\n if (trimmed.includes(\"/\") || trimmed.includes(\"\\\\\")) return true;\n\n return false;\n}\n"],"mappings":"mDACA,SAAgB,EACd,EACS,CACT,IAAM,EAAU,GAAQ,KAAK,EAe7B,OAdK,EAYL,GAVI,gBAAgB,KAAK,CAAO,GAE9B,EAAQ,WAAW,GAAG,GACtB,EAAQ,WAAW,IAAI,GACvB,EAAQ,WAAW,KAAK,GACxB,EAAQ,WAAW,GAAG,GAIpB,kBAAkB,KAAK,CAAO,GAC9B,EAAQ,SAAS,GAAG,GAAK,EAAQ,SAAS,IAAI,GAZ7B,EAevB"}

package/dist/components/features/skills/is-copyable-skill-source.js ADDED Viewed

@@ -0,0 +1,9 @@
+//#region src/components/features/skills/is-copyable-skill-source.ts
+function e(e) {
+	let t = e?.trim();
+	return t ? !!(/^https?:\/\//i.test(t) || t.startsWith("/") || t.startsWith("./") || t.startsWith("../") || t.startsWith("~") || /^[A-Za-z]:[\\/]/.test(t) || t.includes("/") || t.includes("\\")) : !1;
+}
+//#endregion
+export { e as isCopyableSkillSource };
+//# sourceMappingURL=is-copyable-skill-source.js.map

package/dist/components/features/skills/is-copyable-skill-source.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"is-copyable-skill-source.js","names":[],"sources":["../../../../src/components/features/skills/is-copyable-skill-source.ts"],"sourcesContent":["/** True when `source` is a filesystem path or URL worth copying (not a scope label like \"global\"). */\nexport function isCopyableSkillSource(\n source: string | null | undefined,\n): boolean {\n const trimmed = source?.trim();\n if (!trimmed) return false;\n\n if (/^https?:\\/\\//i.test(trimmed)) return true;\n if (\n trimmed.startsWith(\"/\") ||\n trimmed.startsWith(\"./\") ||\n trimmed.startsWith(\"../\") ||\n trimmed.startsWith(\"~\")\n ) {\n return true;\n }\n if (/^[A-Za-z]:[\\\\/]/.test(trimmed)) return true;\n if (trimmed.includes(\"/\") || trimmed.includes(\"\\\\\")) return true;\n\n return false;\n}\n"],"mappings":";AACA,SAAgB,EACd,GACS;CACT,IAAM,IAAU,GAAQ,KAAK;CAe7B,OAdK,IAYL,GAVI,gBAAgB,KAAK,CAAO,KAE9B,EAAQ,WAAW,GAAG,KACtB,EAAQ,WAAW,IAAI,KACvB,EAAQ,WAAW,KAAK,KACxB,EAAQ,WAAW,GAAG,KAIpB,kBAAkB,KAAK,CAAO,KAC9B,EAAQ,SAAS,GAAG,KAAK,EAAQ,SAAS,IAAI,KAZ7B;AAevB"}

package/dist/components/features/skills/skill-card-pill-row.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../utils/utils.cjs"),i=require("../../../utils/extension-module-card-classes.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime"),s=require("react-dom");var c=i.extensionModuleCardPillClassName,l=6,u=8,d=4;function f(e,t){let n=window.innerWidth-u-t,r=e.left;return r>n&&(r=e.right-t),r=Math.min(Math.max(u,r),Math.max(u,n)),{top:e.bottom+d,left:r}}function p(e,t){if(e.length===0\|\|t<=0)return 0;let n=0;for(let r=0;r<e.length;r+=1){let i=e[r],a=r>0?l:0,o=e.length-r-1>0?46:0;if(n+a+i+o>t)return Math.max(1,r);n+=a+i}return e.length}function m({pills:e,testId:c}){let{t:l}=t.useTranslation(`openhands`),u=a.default.useRef(null),d=a.default.useRef(null),m=a.default.useRef(null),h=a.default.useRef(null),[g,_]=a.default.useState(e.length),[v,y]=a.default.useState(!1),[b,x]=a.default.useState(null),S=a.default.useCallback(()=>{let e=u.current,t=d.current;!e\|\|!t\|\|_(p(Array.from(t.children).map(e=>e.offsetWidth),e.clientWidth))},[]),C=e.map(e=>e.id).join(``),w=a.default.useRef(null);a.default.useLayoutEffect(()=>{w.current!==C&&(w.current=C,y(!1),S())},[C,S]),a.default.useEffect(()=>{let e=u.current;if(!e\|\|typeof ResizeObserver>`u`)return;let t=new ResizeObserver(()=>S());return t.observe(e),()=>t.disconnect()},[S]);let T=a.default.useCallback(()=>{let e=m.current;if(!e)return;let t=f(e.getBoundingClientRect(),h.current?.offsetWidth??e.offsetWidth);x(e=>e?.top===t.top&&e?.left===t.left?e:t)},[]);if(a.default.useLayoutEffect(()=>{if(!v){x(null);return}return T(),window.addEventListener(`resize`,T),window.addEventListener(`scroll`,T,!0),()=>{window.removeEventListener(`resize`,T),window.removeEventListener(`scroll`,T,!0)}},[v,T]),a.default.useLayoutEffect(()=>{v&&b&&h.current&&T()},[v,T,b]),a.default.useEffect(()=>{if(!v)return;let e=e=>{let t=e.target;m.current?.contains(t)\|\|h.current?.contains(t)\|\|y(!1)},t=e=>{e.key===`Escape`&&y(!1)};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[v]),e.length===0)return null;let E=Math.max(0,e.length-g),D=e.slice(g),O=e=>{e.stopPropagation()};return(0,o.jsxs)(`div`,{"data-testid":`${c}-wrap`,className:`min-w-0 overflow-hidden`,children:[(0,o.jsx)(`div`,{ref:d,"aria-hidden":!0,className:`pointer-events-none fixed top-0 -left-[10000px] z-[-1] flex flex-nowrap items-center gap-1.5 opacity-0`,children:e.map(e=>(0,o.jsx)(`span`,{className:`inline-flex shrink-0`,children:e.node},e.id))}),(0,o.jsxs)(`div`,{ref:u,"data-testid":c,className:`flex w-full min-w-0 max-w-full flex-nowrap items-center gap-1.5 overflow-hidden`,children:[e.slice(0,g).map(e=>(0,o.jsx)(`span`,{className:`inline-flex shrink-0`,children:e.node},e.id)),E>0?(0,o.jsx)(`button`,{ref:m,type:`button`,"data-testid":`${c}-overflow`,"aria-expanded":v,"aria-haspopup":`dialog`,"aria-label":l(n.I18nKey.SETTINGS$SKILLS_PILLS_OVERFLOW_ARIA,{count:E}),onMouseDown:O,onClick:e=>{e.preventDefault(),e.stopPropagation(),y(e=>!e)},onKeyDown:O,className:r.cn(i.extensionModuleCardPillClassName,`cursor-pointer font-medium text-tertiary-alt hover:text-white`),children:l(n.I18nKey.SETTINGS$SKILLS_PILLS_MORE,{count:E})}):null]}),v&&b&&typeof document<`u`&&(0,s.createPortal)((0,o.jsx)(`div`,{ref:h,role:`dialog`,"data-testid":`${c}-overflow-popover`,className:r.cn(`z-[9999] flex w-max max-w-[20rem] flex-col gap-1.5`,`rounded-md border border-[var(--oh-border-subtle)]`,`bg-[var(--oh-surface)] p-2 shadow-lg`),style:{position:`fixed`,top:b.top,left:b.left},onMouseDown:O,onClick:e=>{e.preventDefault(),e.stopPropagation()},children:D.map(e=>(0,o.jsx)(`div`,{"data-testid":`${c}-overflow-item`,className:`min-w-0`,children:e.node},e.id))}),document.body)]})}exports.SKILL_CARD_PILL_CLASS=c,exports.SkillCardPillRow=m;
2	+ //# sourceMappingURL=skill-card-pill-row.cjs.map

package/dist/components/features/skills/skill-card-pill-row.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"skill-card-pill-row.cjs","names":[],"sources":["../../../../src/components/features/skills/skill-card-pill-row.tsx"],"sourcesContent":["import React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { extensionModuleCardPillClassName } from \"#/utils/extension-module-card-classes\";\n\n/** @deprecated Use {@link extensionModuleCardPillClassName} from `#/utils/extension-module-card-classes`. */\nexport const SKILL_CARD_PILL_CLASS = extensionModuleCardPillClassName;\n\nconst PILL_GAP_PX = 6;\nconst OVERFLOW_PILL_WIDTH_PX = 40;\nconst OVERFLOW_POPOVER_GUTTER_PX = 8;\nconst OVERFLOW_POPOVER_OFFSET_PX = 4;\n\nfunction placePopoverByTrigger(\n trigger: DOMRect,\n popoverWidth: number,\n): { top: number; left: number } {\n const maxLeft = window.innerWidth - OVERFLOW_POPOVER_GUTTER_PX - popoverWidth;\n let left = trigger.left;\n if (left > maxLeft) {\n left = trigger.right - popoverWidth;\n }\n left = Math.min(\n Math.max(OVERFLOW_POPOVER_GUTTER_PX, left),\n Math.max(OVERFLOW_POPOVER_GUTTER_PX, maxLeft),\n );\n return { top: trigger.bottom + OVERFLOW_POPOVER_OFFSET_PX, left };\n}\n\nexport interface SkillCardPill {\n id: string;\n node: React.ReactNode;\n}\n\nfunction computeVisiblePillCount(\n widths: number[],\n containerWidth: number,\n): number {\n if (widths.length === 0 || containerWidth <= 0) return 0;\n\n let used = 0;\n for (let i = 0; i < widths.length; i += 1) {\n const width = widths[i]!;\n const gap = i > 0 ? PILL_GAP_PX : 0;\n const remaining = widths.length - i - 1;\n const reserve = remaining > 0 ? OVERFLOW_PILL_WIDTH_PX + PILL_GAP_PX : 0;\n if (used + gap + width + reserve > containerWidth) {\n return Math.max(1, i);\n }\n used += gap + width;\n }\n return widths.length;\n}\n\ninterface SkillCardPillRowProps {\n pills: SkillCardPill[];\n testId: string;\n}\n\nexport function SkillCardPillRow({ pills, testId }: SkillCardPillRowProps) {\n const { t } = useTranslation(\"openhands\");\n const containerRef = React.useRef<HTMLDivElement>(null);\n const measureRef = React.useRef<HTMLDivElement>(null);\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const popoverRef = React.useRef<HTMLDivElement>(null);\n const [visibleCount, setVisibleCount] = React.useState(pills.length);\n const [isOverflowOpen, setIsOverflowOpen] = React.useState(false);\n const [popoverBox, setPopoverBox] = React.useState<{\n top: number;\n left: number;\n } | null>(null);\n\n const recomputeVisibleCount = React.useCallback(() => {\n const container = containerRef.current;\n const measure = measureRef.current;\n if (!container || !measure) return;\n\n const widths = Array.from(measure.children).map(\n (child) => (child as HTMLElement).offsetWidth,\n );\n setVisibleCount(computeVisiblePillCount(widths, container.clientWidth));\n }, []);\n\n // Recommended cards rebuild the pills array every render; compare ids so an\n // open +N popover is not slammed shut under the cursor.\n const pillsKey = pills.map((pill) => pill.id).join(\"\\u001f\");\n const lastPillsKeyRef = React.useRef<string | null>(null);\n\n React.useLayoutEffect(() => {\n if (lastPillsKeyRef.current === pillsKey) {\n return;\n }\n lastPillsKeyRef.current = pillsKey;\n setIsOverflowOpen(false);\n recomputeVisibleCount();\n }, [pillsKey, recomputeVisibleCount]);\n\n React.useEffect(() => {\n const container = containerRef.current;\n if (!container || typeof ResizeObserver === \"undefined\") return undefined;\n\n const observer = new ResizeObserver(() => recomputeVisibleCount());\n observer.observe(container);\n return () => observer.disconnect();\n }, [recomputeVisibleCount]);\n\n const measurePopover = React.useCallback(() => {\n const trigger = triggerRef.current;\n if (!trigger) {\n return;\n }\n const next = placePopoverByTrigger(\n trigger.getBoundingClientRect(),\n popoverRef.current?.offsetWidth ?? trigger.offsetWidth,\n );\n setPopoverBox((prev) =>\n prev?.top === next.top && prev?.left === next.left ? prev : next,\n );\n }, []);\n\n React.useLayoutEffect(() => {\n if (!isOverflowOpen) {\n setPopoverBox(null);\n return undefined;\n }\n measurePopover();\n window.addEventListener(\"resize\", measurePopover);\n window.addEventListener(\"scroll\", measurePopover, true);\n return () => {\n window.removeEventListener(\"resize\", measurePopover);\n window.removeEventListener(\"scroll\", measurePopover, true);\n };\n }, [isOverflowOpen, measurePopover]);\n\n React.useLayoutEffect(() => {\n if (isOverflowOpen && popoverBox && popoverRef.current) {\n measurePopover();\n }\n }, [isOverflowOpen, measurePopover, popoverBox]);\n\n React.useEffect(() => {\n if (!isOverflowOpen) {\n return undefined;\n }\n const onPointerDown = (event: MouseEvent) => {\n const target = event.target as Node;\n if (triggerRef.current?.contains(target)) {\n return;\n }\n if (popoverRef.current?.contains(target)) {\n return;\n }\n setIsOverflowOpen(false);\n };\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setIsOverflowOpen(false);\n }\n };\n // mousedown (not click) so the opening click cannot race-close the panel,\n // and so wrapping card/link activation is easier to cancel on the trigger.\n document.addEventListener(\"mousedown\", onPointerDown);\n document.addEventListener(\"keydown\", onKeyDown);\n return () => {\n document.removeEventListener(\"mousedown\", onPointerDown);\n document.removeEventListener(\"keydown\", onKeyDown);\n };\n }, [isOverflowOpen]);\n\n if (pills.length === 0) return null;\n\n const hiddenCount = Math.max(0, pills.length - visibleCount);\n const overflowPills = pills.slice(visibleCount);\n\n const stopCardActivation = (event: React.SyntheticEvent) => {\n event.stopPropagation();\n };\n\n const activateOverflow = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n setIsOverflowOpen((open) => !open);\n };\n\n return (\n <div data-testid={`${testId}-wrap`} className=\"min-w-0 overflow-hidden\">\n <div\n ref={measureRef}\n aria-hidden\n className=\"pointer-events-none fixed top-0 -left-[10000px] z-[-1] flex flex-nowrap items-center gap-1.5 opacity-0\"\n >\n {pills.map((pill) => (\n <span key={pill.id} className=\"inline-flex shrink-0\">\n {pill.node}\n </span>\n ))}\n </div>\n <div\n ref={containerRef}\n data-testid={testId}\n className=\"flex w-full min-w-0 max-w-full flex-nowrap items-center gap-1.5 overflow-hidden\"\n >\n {pills.slice(0, visibleCount).map((pill) => (\n <span key={pill.id} className=\"inline-flex shrink-0\">\n {pill.node}\n </span>\n ))}\n {hiddenCount > 0 ? (\n <button\n ref={triggerRef}\n type=\"button\"\n data-testid={`${testId}-overflow`}\n aria-expanded={isOverflowOpen}\n aria-haspopup=\"dialog\"\n aria-label={t(I18nKey.SETTINGS$SKILLS_PILLS_OVERFLOW_ARIA, {\n count: hiddenCount,\n })}\n onMouseDown={stopCardActivation}\n onClick={activateOverflow}\n onKeyDown={stopCardActivation}\n className={cn(\n extensionModuleCardPillClassName,\n \"cursor-pointer font-medium text-tertiary-alt hover:text-white\",\n )}\n >\n {t(I18nKey.SETTINGS$SKILLS_PILLS_MORE, { count: hiddenCount })}\n </button>\n ) : null}\n </div>\n\n {isOverflowOpen &&\n popoverBox &&\n typeof document !== \"undefined\" &&\n createPortal(\n // Stop card-level click activation when interacting with the list.\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- dialog surface must swallow clicks\n <div\n ref={popoverRef}\n role=\"dialog\"\n data-testid={`${testId}-overflow-popover`}\n className={cn(\n \"z-[9999] flex w-max max-w-[20rem] flex-col gap-1.5\",\n \"rounded-md border border-[var(--oh-border-subtle)]\",\n \"bg-[var(--oh-surface)] p-2 shadow-lg\",\n )}\n style={{\n position: \"fixed\",\n top: popoverBox.top,\n left: popoverBox.left,\n }}\n onMouseDown={stopCardActivation}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n >\n {overflowPills.map((pill) => (\n <div\n key={pill.id}\n data-testid={`${testId}-overflow-item`}\n className=\"min-w-0\"\n >\n {pill.node}\n </div>\n ))}\n </div>,\n document.body,\n )}\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/components/features/skills/skill-card-pill-row.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from "react";
 /** @deprecated Use {@link extensionModuleCardPillClassName} from `#/utils/extension-module-card-classes`. */
-export declare const SKILL_CARD_PILL_CLASS = "inline-flex max-w-full shrink-0 items-center whitespace-nowrap rounded-full border border-[var(--oh-border)] bg-[rgba(255,255,255,0.04)] px-2 py-0.5 text-[11px] leading-4 text-tertiary-light";
+export declare const SKILL_CARD_PILL_CLASS = "inline-flex max-w-full shrink-0 items-center whitespace-nowrap rounded-full bg-[rgba(255,255,255,0.04)] px-2 py-0.5 text-[11px] leading-4 text-tertiary-light";
 export interface SkillCardPill {
     id: string;
     node: React.ReactNode;

package/dist/components/features/skills/skill-card-pill-row.js ADDED Viewed

@@ -0,0 +1,137 @@
+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 { extensionModuleCardPillClassName as r } from "../../../utils/extension-module-card-classes.js";
+import i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createPortal as s } from "react-dom";
+//#region src/components/features/skills/skill-card-pill-row.tsx
+var c = r, l = 6, u = 8, d = 4;
+function f(e, t) {
+	let n = window.innerWidth - u - t, r = e.left;
+	return r > n && (r = e.right - t), r = Math.min(Math.max(u, r), Math.max(u, n)), {
+		top: e.bottom + d,
+		left: r
+	};
+}
+function p(e, t) {
+	if (e.length === 0 || t <= 0) return 0;
+	let n = 0;
+	for (let r = 0; r < e.length; r += 1) {
+		let i = e[r], a = r > 0 ? l : 0, o = e.length - r - 1 > 0 ? 46 : 0;
+		if (n + a + i + o > t) return Math.max(1, r);
+		n += a + i;
+	}
+	return e.length;
+}
+function m({ pills: c, testId: l }) {
+	let { t: u } = e("openhands"), d = i.useRef(null), m = i.useRef(null), h = i.useRef(null), g = i.useRef(null), [_, v] = i.useState(c.length), [y, b] = i.useState(!1), [x, S] = i.useState(null), C = i.useCallback(() => {
+		let e = d.current, t = m.current;
+		!e || !t || v(p(Array.from(t.children).map((e) => e.offsetWidth), e.clientWidth));
+	}, []), w = c.map((e) => e.id).join(""), T = i.useRef(null);
+	i.useLayoutEffect(() => {
+		T.current !== w && (T.current = w, b(!1), C());
+	}, [w, C]), i.useEffect(() => {
+		let e = d.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(() => C());
+		return t.observe(e), () => t.disconnect();
+	}, [C]);
+	let E = i.useCallback(() => {
+		let e = h.current;
+		if (!e) return;
+		let t = f(e.getBoundingClientRect(), g.current?.offsetWidth ?? e.offsetWidth);
+		S((e) => e?.top === t.top && e?.left === t.left ? e : t);
+	}, []);
+	if (i.useLayoutEffect(() => {
+		if (!y) {
+			S(null);
+			return;
+		}
+		return E(), window.addEventListener("resize", E), window.addEventListener("scroll", E, !0), () => {
+			window.removeEventListener("resize", E), window.removeEventListener("scroll", E, !0);
+		};
+	}, [y, E]), i.useLayoutEffect(() => {
+		y && x && g.current && E();
+	}, [
+		y,
+		E,
+		x
+	]), i.useEffect(() => {
+		if (!y) return;
+		let e = (e) => {
+			let t = e.target;
+			h.current?.contains(t) || g.current?.contains(t) || b(!1);
+		}, t = (e) => {
+			e.key === "Escape" && b(!1);
+		};
+		return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
+			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
+		};
+	}, [y]), c.length === 0) return null;
+	let D = Math.max(0, c.length - _), O = c.slice(_), k = (e) => {
+		e.stopPropagation();
+	};
+	return /* @__PURE__ */ o("div", {
+		"data-testid": `${l}-wrap`,
+		className: "min-w-0 overflow-hidden",
+		children: [
+			/* @__PURE__ */ a("div", {
+				ref: m,
+				"aria-hidden": !0,
+				className: "pointer-events-none fixed top-0 -left-[10000px] z-[-1] flex flex-nowrap items-center gap-1.5 opacity-0",
+				children: c.map((e) => /* @__PURE__ */ a("span", {
+					className: "inline-flex shrink-0",
+					children: e.node
+				}, e.id))
+			}),
+			/* @__PURE__ */ o("div", {
+				ref: d,
+				"data-testid": l,
+				className: "flex w-full min-w-0 max-w-full flex-nowrap items-center gap-1.5 overflow-hidden",
+				children: [c.slice(0, _).map((e) => /* @__PURE__ */ a("span", {
+					className: "inline-flex shrink-0",
+					children: e.node
+				}, e.id)), D > 0 ? /* @__PURE__ */ a("button", {
+					ref: h,
+					type: "button",
+					"data-testid": `${l}-overflow`,
+					"aria-expanded": y,
+					"aria-haspopup": "dialog",
+					"aria-label": u(t.SETTINGS$SKILLS_PILLS_OVERFLOW_ARIA, { count: D }),
+					onMouseDown: k,
+					onClick: (e) => {
+						e.preventDefault(), e.stopPropagation(), b((e) => !e);
+					},
+					onKeyDown: k,
+					className: n(r, "cursor-pointer font-medium text-tertiary-alt hover:text-white"),
+					children: u(t.SETTINGS$SKILLS_PILLS_MORE, { count: D })
+				}) : null]
+			}),
+			y && x && typeof document < "u" && s(/* @__PURE__ */ a("div", {
+				ref: g,
+				role: "dialog",
+				"data-testid": `${l}-overflow-popover`,
+				className: n("z-[9999] flex w-max max-w-[20rem] flex-col gap-1.5", "rounded-md border border-[var(--oh-border-subtle)]", "bg-[var(--oh-surface)] p-2 shadow-lg"),
+				style: {
+					position: "fixed",
+					top: x.top,
+					left: x.left
+				},
+				onMouseDown: k,
+				onClick: (e) => {
+					e.preventDefault(), e.stopPropagation();
+				},
+				children: O.map((e) => /* @__PURE__ */ a("div", {
+					"data-testid": `${l}-overflow-item`,
+					className: "min-w-0",
+					children: e.node
+				}, e.id))
+			}), document.body)
+		]
+	});
+}
+//#endregion
+export { c as SKILL_CARD_PILL_CLASS, m as SkillCardPillRow };
+//# sourceMappingURL=skill-card-pill-row.js.map