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/skill-card-pill-row.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"skill-card-pill-row.js","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.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("../../../icons/checkmark.cjs"),a=require("../../../icons/copy.cjs"),o=require("../../../utils/extension-module-card-classes.cjs"),s=require("./skill-card-pill-row.cjs"),c=require("../../shared/buttons/circle-plus-check-toggle.cjs"),l=require("./skill-icon-badge.cjs"),u=require("./get-skill-card-description.cjs"),d=require("./build-skill-pills.cjs"),f=require("./is-copyable-skill-source.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");function h({skill:e,enabled:h,onOpen:g,onToggle:_}){let{t:v}=t.useTranslation(`openhands`),[y,b]=p.default.useState(!1),x=u.getSkillCardDescription(e),S=p.default.useMemo(()=>d.buildSkillPills(e,v),[e,v]),C=f.isCopyableSkillSource(e.source);return p.default.useEffect(()=>{if(!y)return;let e=setTimeout(()=>b(!1),2e3);return()=>clearTimeout(e)},[y]),(0,m.jsx)(`div`,{"data-testid":`skill-card-${e.name}`,role:`button`,tabIndex:0,onClick:g,onKeyDown:e=>{(e.key===`Enter`\|\|e.key===` `)&&(e.preventDefault(),g())},className:r.cn(`flex min-w-0 flex-col gap-3 overflow-hidden p-4`,o.extensionModuleCardSurfaceClassName,o.extensionModuleCardInteractiveClassName),children:(0,m.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,m.jsx)(l.SkillIconBadge,{skillName:e.name}),(0,m.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-3`,children:[(0,m.jsxs)(`header`,{className:`flex items-start justify-between gap-3`,children:[(0,m.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,m.jsx)(`h3`,{"data-testid":`skill-name-${e.name}`,className:`truncate text-sm font-semibold text-white`,children:e.name}),e.source?(0,m.jsxs)(`div`,{className:`mt-0.5 flex min-w-0 items-center gap-1`,children:[(0,m.jsx)(`p`,{"data-testid":`skill-source-${e.name}`,className:`min-w-0 flex-1 truncate text-xs text-tertiary-alt`,title:e.source,children:e.source}),C?(0,m.jsx)(`button`,{type:`button`,"data-testid":`skill-copy-source-${e.name}`,"aria-label":v(y?n.I18nKey.BUTTON$COPIED:n.I18nKey.SETTINGS$SKILLS_COPY_PATH),disabled:y,onClick:async t=>{t.stopPropagation(),e.source&&(await navigator.clipboard.writeText(e.source),b(!0))},className:`shrink-0 cursor-pointer border-0 bg-transparent p-0.5 text-tertiary-alt hover:text-white disabled:cursor-default [&_path]:fill-current`,children:y?(0,m.jsx)(i.default,{width:12,height:12}):(0,m.jsx)(a.default,{width:12,height:12})}):null]}):null]}),(0,m.jsx)(c.CirclePlusCheckToggle,{testId:`skill-toggle-${e.name}`,isSelected:h,onToggle:_,disableTooltipKey:n.I18nKey.COMMON$DISABLE})]}),x?(0,m.jsx)(`div`,{"data-testid":`skill-description-${e.name}`,className:`min-w-0`,children:(0,m.jsx)(`p`,{className:`line-clamp-2 break-words text-xs leading-relaxed text-tertiary-light`,children:x})}):null,S.length>0?(0,m.jsx)(s.SkillCardPillRow,{pills:S,testId:`skill-triggers-${e.name}`}):null]})]})})}exports.SkillCard=h;
2	+ //# sourceMappingURL=skill-card.cjs.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"skill-card.cjs","names":[],"sources":["../../../../src/components/features/skills/skill-card.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { SkillInfo } from \"#/types/settings\";\nimport { cn } from \"#/utils/utils\";\nimport CopyIcon from \"#/icons/copy.svg?react\";\nimport CheckmarkIcon from \"#/icons/checkmark.svg?react\";\nimport { CirclePlusCheckToggle } from \"#/components/shared/buttons/circle-plus-check-toggle\";\nimport { SkillIconBadge } from \"./skill-icon-badge\";\nimport { SkillCardPillRow } from \"./skill-card-pill-row\";\nimport { getSkillCardDescription } from \"./get-skill-card-description\";\nimport { buildSkillPills } from \"./build-skill-pills\";\nimport { isCopyableSkillSource } from \"./is-copyable-skill-source\";\nimport {\n extensionModuleCardInteractiveClassName,\n extensionModuleCardSurfaceClassName,\n} from \"#/utils/extension-module-card-classes\";\n\ninterface SkillCardProps {\n skill: SkillInfo;\n enabled: boolean;\n onOpen: () => void;\n onToggle: (enabled: boolean) => void;\n}\n\nexport function SkillCard({\n skill,\n enabled,\n onOpen,\n onToggle,\n}: SkillCardProps) {\n const { t } = useTranslation(\"openhands\");\n const [sourceCopied, setSourceCopied] = React.useState(false);\n\n const description = getSkillCardDescription(skill);\n const pills = React.useMemo(() => buildSkillPills(skill, t), [skill, t]);\n const showCopySource = isCopyableSkillSource(skill.source);\n\n const handleCopySource = async (event: React.MouseEvent) => {\n event.stopPropagation();\n if (!skill.source) {\n return;\n }\n\n await navigator.clipboard.writeText(skill.source);\n setSourceCopied(true);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n onOpen();\n }\n };\n\n React.useEffect(() => {\n if (!sourceCopied) {\n return undefined;\n }\n\n const timeout = setTimeout(() => setSourceCopied(false), 2000);\n return () => clearTimeout(timeout);\n }, [sourceCopied]);\n\n return (\n <div\n data-testid={`skill-card-${skill.name}`}\n role=\"button\"\n tabIndex={0}\n onClick={onOpen}\n onKeyDown={handleKeyDown}\n className={cn(\n \"flex min-w-0 flex-col gap-3 overflow-hidden p-4\",\n extensionModuleCardSurfaceClassName,\n extensionModuleCardInteractiveClassName,\n )}\n >\n <div className=\"flex items-start gap-3\">\n <SkillIconBadge skillName={skill.name} />\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\n data-testid={`skill-name-${skill.name}`}\n className=\"truncate text-sm font-semibold text-white\"\n >\n {skill.name}\n </h3>\n {skill.source ? (\n <div className=\"mt-0.5 flex min-w-0 items-center gap-1\">\n <p\n data-testid={`skill-source-${skill.name}`}\n className=\"min-w-0 flex-1 truncate text-xs text-tertiary-alt\"\n title={skill.source}\n >\n {skill.source}\n </p>\n {showCopySource ? (\n <button\n type=\"button\"\n data-testid={`skill-copy-source-${skill.name}`}\n aria-label={t(\n sourceCopied\n ? I18nKey.BUTTON$COPIED\n : I18nKey.SETTINGS$SKILLS_COPY_PATH,\n )}\n disabled={sourceCopied}\n onClick={handleCopySource}\n className=\"shrink-0 cursor-pointer border-0 bg-transparent p-0.5 text-tertiary-alt hover:text-white disabled:cursor-default [&_path]:fill-current\"\n >\n {sourceCopied ? (\n <CheckmarkIcon width={12} height={12} />\n ) : (\n <CopyIcon width={12} height={12} />\n )}\n </button>\n ) : null}\n </div>\n ) : null}\n </div>\n <CirclePlusCheckToggle\n testId={`skill-toggle-${skill.name}`}\n isSelected={enabled}\n onToggle={onToggle}\n disableTooltipKey={I18nKey.COMMON$DISABLE}\n />\n </header>\n\n {description ? (\n <div\n data-testid={`skill-description-${skill.name}`}\n className=\"min-w-0\"\n >\n <p className=\"line-clamp-2 break-words text-xs leading-relaxed text-tertiary-light\">\n {description}\n </p>\n </div>\n ) : null}\n\n {pills.length > 0 ? (\n <SkillCardPillRow\n pills={pills}\n testId={`skill-triggers-${skill.name}`}\n />\n ) : null}\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":"yrBAyBA,SAAgB,EAAU,CACxB,QACA,UACA,SACA,YACiB,CACjB,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAC,EAAc,GAAmB,EAAA,QAAM,SAAS,EAAK,EAEtD,EAAc,EAAA,wBAAwB,CAAK,EAC3C,EAAQ,EAAA,QAAM,YAAc,EAAA,gBAAgB,EAAO,CAAC,EAAG,CAAC,EAAO,CAAC,CAAC,EACjE,EAAiB,EAAA,sBAAsB,EAAM,MAAM,EA4BzD,OATA,EAAA,QAAM,cAAgB,CACpB,GAAI,CAAC,EACH,OAGF,IAAM,EAAU,eAAiB,EAAgB,EAAK,EAAG,GAAI,EAC7D,UAAa,aAAa,CAAO,CACnC,EAAG,CAAC,CAAY,CAAC,GAGf,EAAA,EAAA,KAAC,MAAD,CACE,cAAa,cAAc,EAAM,OACjC,KAAK,SACL,SAAU,EACV,QAAS,EACT,UAtBmB,GAA+B,EAChD,EAAM,MAAQ,SAAW,EAAM,MAAQ,OACzC,EAAM,eAAe,EACrB,EAAO,EAEX,EAkBI,UAAW,EAAA,GACT,kDACA,EAAA,oCACA,EAAA,uCACF,YAEA,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kCAAf,EACE,EAAA,EAAA,KAAC,EAAA,eAAD,CAAgB,UAAW,EAAM,IAAO,CAAA,GACxC,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,8CAAf,EACE,EAAA,EAAA,MAAC,SAAD,CAAQ,UAAU,kDAAlB,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,0BAAf,EACE,EAAA,EAAA,KAAC,KAAD,CACE,cAAa,cAAc,EAAM,OACjC,UAAU,qDAET,EAAM,IACL,CAAA,EACH,EAAM,QACL,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kDAAf,EACE,EAAA,EAAA,KAAC,IAAD,CACE,cAAa,gBAAgB,EAAM,OACnC,UAAU,oDACV,MAAO,EAAM,gBAEZ,EAAM,MACN,CAAA,EACF,GACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,cAAa,qBAAqB,EAAM,OACxC,aAAY,EACV,EACI,EAAA,QAAQ,cACR,EAAA,QAAQ,yBACd,EACA,SAAU,EACV,QAAS,KArEG,IAA4B,CAC1D,EAAM,gBAAgB,EACjB,EAAM,SAIX,MAAM,UAAU,UAAU,UAAU,EAAM,MAAM,EAChD,EAAgB,EAAI,EACtB,EA8DoB,UAAU,kJAET,GACC,EAAA,EAAA,KAAC,EAAA,QAAD,CAAe,MAAO,GAAI,OAAQ,EAAK,CAAA,GAEvC,EAAA,EAAA,KAAC,EAAA,QAAD,CAAU,MAAO,GAAI,OAAQ,EAAK,CAAA,CAE9B,CAAA,EACN,IACD,IACH,IACD,KACL,EAAA,EAAA,KAAC,EAAA,sBAAD,CACE,OAAQ,gBAAgB,EAAM,OAC9B,WAAY,EACF,WACV,kBAAmB,EAAA,QAAQ,cAC5B,CAAA,CACK,IAEP,GACC,EAAA,EAAA,KAAC,MAAD,CACE,cAAa,qBAAqB,EAAM,OACxC,UAAU,oBAEV,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,gFACV,CACA,CAAA,CACA,CAAA,EACH,KAEH,EAAM,OAAS,GACd,EAAA,EAAA,KAAC,EAAA,iBAAD,CACS,QACP,OAAQ,kBAAkB,EAAM,MACjC,CAAA,EACC,IACD,GACF,GACF,CAAA,CAET"}

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

@@ -0,0 +1,93 @@
+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 r from "../../../icons/checkmark.js";
+import i from "../../../icons/copy.js";
+import { extensionModuleCardInteractiveClassName as a, extensionModuleCardSurfaceClassName as o } from "../../../utils/extension-module-card-classes.js";
+import { SkillCardPillRow as s } from "./skill-card-pill-row.js";
+import { CirclePlusCheckToggle as c } from "../../shared/buttons/circle-plus-check-toggle.js";
+import { SkillIconBadge as l } from "./skill-icon-badge.js";
+import { getSkillCardDescription as u } from "./get-skill-card-description.js";
+import { buildSkillPills as d } from "./build-skill-pills.js";
+import { isCopyableSkillSource as f } from "./is-copyable-skill-source.js";
+import p from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/features/skills/skill-card.tsx
+function g({ skill: g, enabled: _, onOpen: v, onToggle: y }) {
+	let { t: b } = e("openhands"), [x, S] = p.useState(!1), C = u(g), w = p.useMemo(() => d(g, b), [g, b]), T = f(g.source);
+	return p.useEffect(() => {
+		if (!x) return;
+		let e = setTimeout(() => S(!1), 2e3);
+		return () => clearTimeout(e);
+	}, [x]), /* @__PURE__ */ m("div", {
+		"data-testid": `skill-card-${g.name}`,
+		role: "button",
+		tabIndex: 0,
+		onClick: v,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), v());
+		},
+		className: n("flex min-w-0 flex-col gap-3 overflow-hidden p-4", o, a),
+		children: /* @__PURE__ */ h("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ m(l, { skillName: g.name }), /* @__PURE__ */ h("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-3",
+				children: [
+					/* @__PURE__ */ h("header", {
+						className: "flex items-start justify-between gap-3",
+						children: [/* @__PURE__ */ h("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ m("h3", {
+								"data-testid": `skill-name-${g.name}`,
+								className: "truncate text-sm font-semibold text-white",
+								children: g.name
+							}), g.source ? /* @__PURE__ */ h("div", {
+								className: "mt-0.5 flex min-w-0 items-center gap-1",
+								children: [/* @__PURE__ */ m("p", {
+									"data-testid": `skill-source-${g.name}`,
+									className: "min-w-0 flex-1 truncate text-xs text-tertiary-alt",
+									title: g.source,
+									children: g.source
+								}), T ? /* @__PURE__ */ m("button", {
+									type: "button",
+									"data-testid": `skill-copy-source-${g.name}`,
+									"aria-label": b(x ? t.BUTTON$COPIED : t.SETTINGS$SKILLS_COPY_PATH),
+									disabled: x,
+									onClick: async (e) => {
+										e.stopPropagation(), g.source && (await navigator.clipboard.writeText(g.source), S(!0));
+									},
+									className: "shrink-0 cursor-pointer border-0 bg-transparent p-0.5 text-tertiary-alt hover:text-white disabled:cursor-default [&_path]:fill-current",
+									children: m(x ? r : i, {
+										width: 12,
+										height: 12
+									})
+								}) : null]
+							}) : null]
+						}), /* @__PURE__ */ m(c, {
+							testId: `skill-toggle-${g.name}`,
+							isSelected: _,
+							onToggle: y,
+							disableTooltipKey: t.COMMON$DISABLE
+						})]
+					}),
+					C ? /* @__PURE__ */ m("div", {
+						"data-testid": `skill-description-${g.name}`,
+						className: "min-w-0",
+						children: /* @__PURE__ */ m("p", {
+							className: "line-clamp-2 break-words text-xs leading-relaxed text-tertiary-light",
+							children: C
+						})
+					}) : null,
+					w.length > 0 ? /* @__PURE__ */ m(s, {
+						pills: w,
+						testId: `skill-triggers-${g.name}`
+					}) : null
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { g as SkillCard };
+//# sourceMappingURL=skill-card.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"skill-card.js","names":[],"sources":["../../../../src/components/features/skills/skill-card.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { SkillInfo } from \"#/types/settings\";\nimport { cn } from \"#/utils/utils\";\nimport CopyIcon from \"#/icons/copy.svg?react\";\nimport CheckmarkIcon from \"#/icons/checkmark.svg?react\";\nimport { CirclePlusCheckToggle } from \"#/components/shared/buttons/circle-plus-check-toggle\";\nimport { SkillIconBadge } from \"./skill-icon-badge\";\nimport { SkillCardPillRow } from \"./skill-card-pill-row\";\nimport { getSkillCardDescription } from \"./get-skill-card-description\";\nimport { buildSkillPills } from \"./build-skill-pills\";\nimport { isCopyableSkillSource } from \"./is-copyable-skill-source\";\nimport {\n extensionModuleCardInteractiveClassName,\n extensionModuleCardSurfaceClassName,\n} from \"#/utils/extension-module-card-classes\";\n\ninterface SkillCardProps {\n skill: SkillInfo;\n enabled: boolean;\n onOpen: () => void;\n onToggle: (enabled: boolean) => void;\n}\n\nexport function SkillCard({\n skill,\n enabled,\n onOpen,\n onToggle,\n}: SkillCardProps) {\n const { t } = useTranslation(\"openhands\");\n const [sourceCopied, setSourceCopied] = React.useState(false);\n\n const description = getSkillCardDescription(skill);\n const pills = React.useMemo(() => buildSkillPills(skill, t), [skill, t]);\n const showCopySource = isCopyableSkillSource(skill.source);\n\n const handleCopySource = async (event: React.MouseEvent) => {\n event.stopPropagation();\n if (!skill.source) {\n return;\n }\n\n await navigator.clipboard.writeText(skill.source);\n setSourceCopied(true);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n onOpen();\n }\n };\n\n React.useEffect(() => {\n if (!sourceCopied) {\n return undefined;\n }\n\n const timeout = setTimeout(() => setSourceCopied(false), 2000);\n return () => clearTimeout(timeout);\n }, [sourceCopied]);\n\n return (\n <div\n data-testid={`skill-card-${skill.name}`}\n role=\"button\"\n tabIndex={0}\n onClick={onOpen}\n onKeyDown={handleKeyDown}\n className={cn(\n \"flex min-w-0 flex-col gap-3 overflow-hidden p-4\",\n extensionModuleCardSurfaceClassName,\n extensionModuleCardInteractiveClassName,\n )}\n >\n <div className=\"flex items-start gap-3\">\n <SkillIconBadge skillName={skill.name} />\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\n data-testid={`skill-name-${skill.name}`}\n className=\"truncate text-sm font-semibold text-white\"\n >\n {skill.name}\n </h3>\n {skill.source ? (\n <div className=\"mt-0.5 flex min-w-0 items-center gap-1\">\n <p\n data-testid={`skill-source-${skill.name}`}\n className=\"min-w-0 flex-1 truncate text-xs text-tertiary-alt\"\n title={skill.source}\n >\n {skill.source}\n </p>\n {showCopySource ? (\n <button\n type=\"button\"\n data-testid={`skill-copy-source-${skill.name}`}\n aria-label={t(\n sourceCopied\n ? I18nKey.BUTTON$COPIED\n : I18nKey.SETTINGS$SKILLS_COPY_PATH,\n )}\n disabled={sourceCopied}\n onClick={handleCopySource}\n className=\"shrink-0 cursor-pointer border-0 bg-transparent p-0.5 text-tertiary-alt hover:text-white disabled:cursor-default [&_path]:fill-current\"\n >\n {sourceCopied ? (\n <CheckmarkIcon width={12} height={12} />\n ) : (\n <CopyIcon width={12} height={12} />\n )}\n </button>\n ) : null}\n </div>\n ) : null}\n </div>\n <CirclePlusCheckToggle\n testId={`skill-toggle-${skill.name}`}\n isSelected={enabled}\n onToggle={onToggle}\n disableTooltipKey={I18nKey.COMMON$DISABLE}\n />\n </header>\n\n {description ? (\n <div\n data-testid={`skill-description-${skill.name}`}\n className=\"min-w-0\"\n >\n <p className=\"line-clamp-2 break-words text-xs leading-relaxed text-tertiary-light\">\n {description}\n </p>\n </div>\n ) : null}\n\n {pills.length > 0 ? (\n <SkillCardPillRow\n pills={pills}\n testId={`skill-triggers-${skill.name}`}\n />\n ) : null}\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAyBA,SAAgB,EAAU,EACxB,UACA,YACA,WACA,eACiB;CACjB,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,CAAC,GAAc,KAAmB,EAAM,SAAS,EAAK,GAEtD,IAAc,EAAwB,CAAK,GAC3C,IAAQ,EAAM,cAAc,EAAgB,GAAO,CAAC,GAAG,CAAC,GAAO,CAAC,CAAC,GACjE,IAAiB,EAAsB,EAAM,MAAM;CA4BzD,OATA,EAAM,gBAAgB;EACpB,IAAI,CAAC,GACH;EAGF,IAAM,IAAU,iBAAiB,EAAgB,EAAK,GAAG,GAAI;EAC7D,aAAa,aAAa,CAAO;CACnC,GAAG,CAAC,CAAY,CAAC,GAGf,kBAAC,OAAD;EACE,eAAa,cAAc,EAAM;EACjC,MAAK;EACL,UAAU;EACV,SAAS;EACT,YAtBmB,MAA+B;GACpD,CAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,eAAe,GACrB,EAAO;EAEX;EAkBI,WAAW,EACT,mDACA,GACA,CACF;YAEA,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD,EAAgB,WAAW,EAAM,KAAO,CAAA,GACxC,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,UAAD;MAAQ,WAAU;gBAAlB,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,MAAD;QACE,eAAa,cAAc,EAAM;QACjC,WAAU;kBAET,EAAM;OACL,CAAA,GACH,EAAM,SACL,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,KAAD;SACE,eAAa,gBAAgB,EAAM;SACnC,WAAU;SACV,OAAO,EAAM;mBAEZ,EAAM;QACN,CAAA,GACF,IACC,kBAAC,UAAD;SACE,MAAK;SACL,eAAa,qBAAqB,EAAM;SACxC,cAAY,EACV,IACI,EAAQ,gBACR,EAAQ,yBACd;SACA,UAAU;SACV,SAAS,OArEG,MAA4B;UAC1D,EAAM,gBAAgB,GACjB,EAAM,WAIX,MAAM,UAAU,UAAU,UAAU,EAAM,MAAM,GAChD,EAAgB,EAAI;SACtB;SA8DoB,WAAU;mBAGR,EADD,IACE,IAEA,GAFD;UAAe,OAAO;UAAI,QAAQ;SAAK,CAEL;QAE9B,CAAA,IACN,IACD;YACH,IACD;UACL,kBAAC,GAAD;OACE,QAAQ,gBAAgB,EAAM;OAC9B,YAAY;OACF;OACV,mBAAmB,EAAQ;MAC5B,CAAA,CACK;;KAEP,IACC,kBAAC,OAAD;MACE,eAAa,qBAAqB,EAAM;MACxC,WAAU;gBAEV,kBAAC,KAAD;OAAG,WAAU;iBACV;MACA,CAAA;KACA,CAAA,IACH;KAEH,EAAM,SAAS,IACd,kBAAC,GAAD;MACS;MACP,QAAQ,kBAAkB,EAAM;KACjC,CAAA,IACC;IACD;KACF;;CACF,CAAA;AAET"}

package/dist/components/features/skills/skill-detail-modal.cjs ADDED Viewed

@@ -0,0 +1,3 @@
+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("../../../icons/checkmark.cjs"),a=require("../../../icons/copy.cjs"),o=require("../../shared/modals/modal-backdrop.cjs"),s=require("../../../utils/modal-classes.cjs"),c=require("../../shared/modals/modal-close-button.cjs"),l=require("../settings/brand-button.cjs"),u=require("./skill-card-pill-row.cjs"),d=require("../../../icons/message-square-share.cjs"),f=require("../../../hooks/use-launch-skill-in-chat.cjs"),p=require("./skill-icon-badge.cjs"),m=require("./get-skill-card-description.cjs"),h=require("./build-skill-pills.cjs"),g=require("./is-copyable-skill-source.cjs"),_=require("../settings/settings-switch.cjs"),v=require("./get-skill-chat-launch-message.cjs");let y=require("react");y=e.__toESM(y,1);let b=require("react/jsx-runtime");function x({testId:e,label:t,value:n}){return(0,b.jsxs)(`label`,{className:`flex min-w-0 w-full flex-col gap-2.5`,children:[(0,b.jsx)(`span`,{className:`text-sm`,children:t}),(0,b.jsx)(`textarea`,{"data-testid":e,readOnly:!0,value:n,rows:Math.min(12,Math.max(4,n.split(`
+`).length)),className:r.cn(`bg-[var(--oh-surface-raised)] border border-[var(--oh-border-subtle)] w-full min-w-0 rounded-sm p-2 text-sm`,`cursor-not-allowed resize-none custom-scrollbar`)})]})}function S({skill:e,enabled:r,onToggle:S,onClose:C}){let{t:w}=t.useTranslation(`openhands`),T=f.useLaunchSkillInChat(),[E,D]=y.default.useState(!1),O=y.default.useMemo(()=>v.getSkillChatLaunchMessage(e),[e]),k=m.getSkillCardDescription(e),A=y.default.useMemo(()=>h.buildSkillPills(e,w,{variant:`detail`,testIdPrefix:`skill-modal-pill`}),[e,w]),j=g.isCopyableSkillSource(e.source);return y.default.useEffect(()=>{if(!E)return;let e=setTimeout(()=>D(!1),2e3);return()=>clearTimeout(e)},[E]),(0,b.jsx)(o.ModalBackdrop,{onClose:C,"aria-label":e.name,children:(0,b.jsxs)(`div`,{"data-testid":`skill-detail-modal`,"data-skill-name":e.name,className:`relative flex w-[520px] max-w-[90vw] max-h-[85vh] flex-col overflow-hidden rounded-xl border border-[var(--oh-border)] bg-base-secondary`,children:[(0,b.jsx)(c.ModalCloseButton,{onClose:C,testId:`skill-detail-modal-close`}),(0,b.jsxs)(`header`,{className:`flex flex-shrink-0 items-start gap-3 pb-4 pl-6 pr-12 pt-6`,children:[(0,b.jsx)(p.SkillIconBadge,{skillName:e.name}),(0,b.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,b.jsx)(`h2`,{"data-testid":`skill-modal-name-${e.name}`,className:s.modalTitleLgClassName,children:e.name}),e.source?(0,b.jsxs)(`div`,{className:`mt-0.5 flex min-w-0 items-center gap-1`,children:[(0,b.jsx)(`p`,{"data-testid":`skill-modal-source-${e.name}`,className:`min-w-0 flex-1 truncate text-xs text-tertiary-alt`,title:e.source,children:e.source}),j?(0,b.jsx)(`button`,{type:`button`,"data-testid":`skill-modal-copy-source-${e.name}`,"aria-label":w(E?n.I18nKey.BUTTON$COPIED:n.I18nKey.SETTINGS$SKILLS_COPY_PATH),disabled:E,onClick:async()=>{e.source&&(await navigator.clipboard.writeText(e.source),D(!0))},className:`shrink-0 cursor-pointer border-0 bg-transparent p-0.5 text-tertiary-alt hover:text-white disabled:cursor-default [&_path]:fill-current`,children:E?(0,b.jsx)(i.default,{width:12,height:12}):(0,b.jsx)(a.default,{width:12,height:12})}):null]}):null]})]}),(0,b.jsxs)(`div`,{"data-testid":`skill-detail-modal-content`,className:`flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain px-6 custom-scrollbar-always`,children:[(0,b.jsx)(`div`,{"data-testid":`skill-modal-enable-row-${e.name}`,className:`flex w-full items-center rounded-lg border border-[var(--oh-border)] bg-[rgba(255,255,255,0.04)] px-3 py-2.5`,children:(0,b.jsx)(_.SettingsSwitch,{testId:`skill-modal-toggle-${e.name}`,isToggled:r,onToggle:S,togglePosition:`right`,children:w(r?n.I18nKey.SETTINGS$SKILLS_ENABLED:n.I18nKey.SETTINGS$SKILLS_DISABLED)})}),k?(0,b.jsx)(`p`,{"data-testid":`skill-modal-description-${e.name}`,className:`break-words whitespace-pre-line text-xs text-tertiary-light`,children:k}):null,A.length>0?(0,b.jsx)(u.SkillCardPillRow,{pills:A,testId:`skill-modal-pills-${e.name}`}):null,e.content?(0,b.jsx)(x,{testId:`skill-modal-field-content-${e.name}`,label:w(n.I18nKey.SETTINGS$SKILLS_CONTENT),value:e.content}):null]}),(0,b.jsxs)(`footer`,{"data-testid":`skill-detail-modal-actions`,className:`flex flex-shrink-0 justify-end gap-2 px-6 pb-6 pt-4`,children:[(0,b.jsx)(l.BrandButton,{type:`button`,variant:`secondary`,onClick:C,testId:`skill-detail-close`,children:w(n.I18nKey.BUTTON$CLOSE)}),(0,b.jsx)(l.BrandButton,{type:`button`,variant:`primary`,isDisabled:!r,onClick:()=>T(O,C),testId:`skill-detail-use-skill-${e.name}`,startContent:(0,b.jsx)(d.default,{className:`size-4`,"aria-hidden":!0}),children:w(n.I18nKey.SETTINGS$SKILLS_USE_SKILL_BUTTON)})]})]})})}exports.SkillDetailModal=S;
+//# sourceMappingURL=skill-detail-modal.cjs.map

package/dist/components/features/skills/skill-detail-modal.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"skill-detail-modal.cjs","names":[],"sources":["../../../../src/components/features/skills/skill-detail-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { SettingsSwitch } from \"#/components/features/settings/settings-switch\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { SkillInfo } from \"#/types/settings\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport CopyIcon from \"#/icons/copy.svg?react\";\nimport CheckmarkIcon from \"#/icons/checkmark.svg?react\";\nimport MessageSquareShareIcon from \"#/icons/message-square-share.svg?react\";\nimport { SkillIconBadge } from \"./skill-icon-badge\";\nimport { getSkillCardDescription } from \"./get-skill-card-description\";\nimport { buildSkillPills } from \"./build-skill-pills\";\nimport { isCopyableSkillSource } from \"./is-copyable-skill-source\";\nimport { SkillCardPillRow } from \"./skill-card-pill-row\";\nimport { getSkillChatLaunchMessage } from \"./get-skill-chat-launch-message\";\nimport { useLaunchSkillInChat } from \"#/hooks/use-launch-skill-in-chat\";\n\ninterface SkillDetailModalProps {\n skill: SkillInfo;\n enabled: boolean;\n onToggle: (enabled: boolean) => void;\n onClose: () => void;\n}\n\nfunction ReadonlyTextArea({\n testId,\n label,\n value,\n}: {\n testId: string;\n label: string;\n value: string;\n}) {\n return (\n <label className=\"flex min-w-0 w-full flex-col gap-2.5\">\n <span className=\"text-sm\">{label}</span>\n <textarea\n data-testid={testId}\n readOnly\n value={value}\n rows={Math.min(12, Math.max(4, value.split(\"\\n\").length))}\n className={cn(\n \"bg-[var(--oh-surface-raised)] border border-[var(--oh-border-subtle)] w-full min-w-0 rounded-sm p-2 text-sm\",\n \"cursor-not-allowed resize-none custom-scrollbar\",\n )}\n />\n </label>\n );\n}\n\nexport function SkillDetailModal({\n skill,\n enabled,\n onToggle,\n onClose,\n}: SkillDetailModalProps) {\n const { t } = useTranslation(\"openhands\");\n const launchSkillInChat = useLaunchSkillInChat();\n const [sourceCopied, setSourceCopied] = React.useState(false);\n const chatLaunchMessage = React.useMemo(\n () => getSkillChatLaunchMessage(skill),\n [skill],\n );\n\n const description = getSkillCardDescription(skill);\n const pills = React.useMemo(\n () =>\n buildSkillPills(skill, t, {\n variant: \"detail\",\n testIdPrefix: \"skill-modal-pill\",\n }),\n [skill, t],\n );\n const showCopySource = isCopyableSkillSource(skill.source);\n\n const handleCopySource = async () => {\n if (!skill.source) {\n return;\n }\n\n await navigator.clipboard.writeText(skill.source);\n setSourceCopied(true);\n };\n\n React.useEffect(() => {\n if (!sourceCopied) {\n return undefined;\n }\n\n const timeout = setTimeout(() => setSourceCopied(false), 2000);\n return () => clearTimeout(timeout);\n }, [sourceCopied]);\n\n return (\n <ModalBackdrop onClose={onClose} aria-label={skill.name}>\n <div\n data-testid=\"skill-detail-modal\"\n data-skill-name={skill.name}\n className=\"relative flex w-[520px] max-w-[90vw] max-h-[85vh] flex-col overflow-hidden rounded-xl border border-[var(--oh-border)] bg-base-secondary\"\n >\n <ModalCloseButton onClose={onClose} testId=\"skill-detail-modal-close\" />\n <header className=\"flex flex-shrink-0 items-start gap-3 pb-4 pl-6 pr-12 pt-6\">\n <SkillIconBadge skillName={skill.name} />\n <div className=\"min-w-0 flex-1\">\n <h2\n data-testid={`skill-modal-name-${skill.name}`}\n className={modalTitleLgClassName}\n >\n {skill.name}\n </h2>\n {skill.source ? (\n <div className=\"mt-0.5 flex min-w-0 items-center gap-1\">\n <p\n data-testid={`skill-modal-source-${skill.name}`}\n className=\"min-w-0 flex-1 truncate text-xs text-tertiary-alt\"\n title={skill.source}\n >\n {skill.source}\n </p>\n {showCopySource ? (\n <button\n type=\"button\"\n data-testid={`skill-modal-copy-source-${skill.name}`}\n aria-label={t(\n sourceCopied\n ? I18nKey.BUTTON$COPIED\n : I18nKey.SETTINGS$SKILLS_COPY_PATH,\n )}\n disabled={sourceCopied}\n onClick={handleCopySource}\n className=\"shrink-0 cursor-pointer border-0 bg-transparent p-0.5 text-tertiary-alt hover:text-white disabled:cursor-default [&_path]:fill-current\"\n >\n {sourceCopied ? (\n <CheckmarkIcon width={12} height={12} />\n ) : (\n <CopyIcon width={12} height={12} />\n )}\n </button>\n ) : null}\n </div>\n ) : null}\n </div>\n </header>\n\n <div\n data-testid=\"skill-detail-modal-content\"\n className=\"flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain px-6 custom-scrollbar-always\"\n >\n <div\n data-testid={`skill-modal-enable-row-${skill.name}`}\n className=\"flex w-full items-center rounded-lg border border-[var(--oh-border)] bg-[rgba(255,255,255,0.04)] px-3 py-2.5\"\n >\n <SettingsSwitch\n testId={`skill-modal-toggle-${skill.name}`}\n isToggled={enabled}\n onToggle={onToggle}\n togglePosition=\"right\"\n >\n {t(\n enabled\n ? I18nKey.SETTINGS$SKILLS_ENABLED\n : I18nKey.SETTINGS$SKILLS_DISABLED,\n )}\n </SettingsSwitch>\n </div>\n\n {description ? (\n <p\n data-testid={`skill-modal-description-${skill.name}`}\n className=\"break-words whitespace-pre-line text-xs text-tertiary-light\"\n >\n {description}\n </p>\n ) : null}\n\n {pills.length > 0 ? (\n <SkillCardPillRow\n pills={pills}\n testId={`skill-modal-pills-${skill.name}`}\n />\n ) : null}\n\n {skill.content ? (\n <ReadonlyTextArea\n testId={`skill-modal-field-content-${skill.name}`}\n label={t(I18nKey.SETTINGS$SKILLS_CONTENT)}\n value={skill.content}\n />\n ) : null}\n </div>\n\n <footer\n data-testid=\"skill-detail-modal-actions\"\n className=\"flex flex-shrink-0 justify-end gap-2 px-6 pb-6 pt-4\"\n >\n <BrandButton\n type=\"button\"\n variant=\"secondary\"\n onClick={onClose}\n testId=\"skill-detail-close\"\n >\n {t(I18nKey.BUTTON$CLOSE)}\n </BrandButton>\n <BrandButton\n type=\"button\"\n variant=\"primary\"\n isDisabled={!enabled}\n onClick={() => launchSkillInChat(chatLaunchMessage, onClose)}\n testId={`skill-detail-use-skill-${skill.name}`}\n startContent={\n <MessageSquareShareIcon className=\"size-4\" aria-hidden />\n }\n >\n {t(I18nKey.SETTINGS$SKILLS_USE_SKILL_BUTTON)}\n </BrandButton>\n </footer>\n </div>\n </ModalBackdrop>\n );\n}\n"],"mappings":"48BA4BA,SAAS,EAAiB,CACxB,SACA,QACA,SAKC,CACD,OACE,EAAA,EAAA,MAAC,QAAD,CAAO,UAAU,gDAAjB,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,mBAAW,CAAY,CAAA,GACvC,EAAA,EAAA,KAAC,WAAD,CACE,cAAa,EACb,SAAA,GACO,QACP,KAAM,KAAK,IAAI,GAAI,KAAK,IAAI,EAAG,EAAM,MAAM;CAAI,EAAE,MAAM,CAAC,EACxD,UAAW,EAAA,GACT,8GACA,iDACF,CACD,CAAA,CACI,GAEX,CAEA,SAAgB,EAAiB,CAC/B,QACA,UACA,WACA,WACwB,CACxB,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EAAoB,EAAA,qBAAqB,EACzC,CAAC,EAAc,GAAmB,EAAA,QAAM,SAAS,EAAK,EACtD,EAAoB,EAAA,QAAM,YACxB,EAAA,0BAA0B,CAAK,EACrC,CAAC,CAAK,CACR,EAEM,EAAc,EAAA,wBAAwB,CAAK,EAC3C,EAAQ,EAAA,QAAM,YAEhB,EAAA,gBAAgB,EAAO,EAAG,CACxB,QAAS,SACT,aAAc,kBAChB,CAAC,EACH,CAAC,EAAO,CAAC,CACX,EACM,EAAiB,EAAA,sBAAsB,EAAM,MAAM,EAoBzD,OATA,EAAA,QAAM,cAAgB,CACpB,GAAI,CAAC,EACH,OAGF,IAAM,EAAU,eAAiB,EAAgB,EAAK,EAAG,GAAI,EAC7D,UAAa,aAAa,CAAO,CACnC,EAAG,CAAC,CAAY,CAAC,GAGf,EAAA,EAAA,KAAC,EAAA,cAAD,CAAwB,UAAS,aAAY,EAAM,eACjD,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,qBACZ,kBAAiB,EAAM,KACvB,UAAU,oJAHZ,EAKE,EAAA,EAAA,KAAC,EAAA,iBAAD,CAA2B,UAAS,OAAO,0BAA4B,CAAA,GACvE,EAAA,EAAA,MAAC,SAAD,CAAQ,UAAU,qEAAlB,EACE,EAAA,EAAA,KAAC,EAAA,eAAD,CAAgB,UAAW,EAAM,IAAO,CAAA,GACxC,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,0BAAf,EACE,EAAA,EAAA,KAAC,KAAD,CACE,cAAa,oBAAoB,EAAM,OACvC,UAAW,EAAA,+BAEV,EAAM,IACL,CAAA,EACH,EAAM,QACL,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kDAAf,EACE,EAAA,EAAA,KAAC,IAAD,CACE,cAAa,sBAAsB,EAAM,OACzC,UAAU,oDACV,MAAO,EAAM,gBAEZ,EAAM,MACN,CAAA,EACF,GACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,cAAa,2BAA2B,EAAM,OAC9C,aAAY,EACV,EACI,EAAA,QAAQ,cACR,EAAA,QAAQ,yBACd,EACA,SAAU,EACV,QAAS,SAtDU,CAC9B,EAAM,SAIX,MAAM,UAAU,UAAU,UAAU,EAAM,MAAM,EAChD,EAAgB,EAAI,EACtB,EAgDkB,UAAU,kJAET,GACC,EAAA,EAAA,KAAC,EAAA,QAAD,CAAe,MAAO,GAAI,OAAQ,EAAK,CAAA,GAEvC,EAAA,EAAA,KAAC,EAAA,QAAD,CAAU,MAAO,GAAI,OAAQ,EAAK,CAAA,CAE9B,CAAA,EACN,IACD,IACH,IACD,GACC,KAER,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,6BACZ,UAAU,8GAFZ,EAIE,EAAA,EAAA,KAAC,MAAD,CACE,cAAa,0BAA0B,EAAM,OAC7C,UAAU,yHAEV,EAAA,EAAA,KAAC,EAAA,eAAD,CACE,OAAQ,sBAAsB,EAAM,OACpC,UAAW,EACD,WACV,eAAe,iBAEd,EACC,EACI,EAAA,QAAQ,wBACR,EAAA,QAAQ,wBACd,CACc,CAAA,CACb,CAAA,EAEJ,GACC,EAAA,EAAA,KAAC,IAAD,CACE,cAAa,2BAA2B,EAAM,OAC9C,UAAU,uEAET,CACA,CAAA,EACD,KAEH,EAAM,OAAS,GACd,EAAA,EAAA,KAAC,EAAA,iBAAD,CACS,QACP,OAAQ,qBAAqB,EAAM,MACpC,CAAA,EACC,KAEH,EAAM,SACL,EAAA,EAAA,KAAC,EAAD,CACE,OAAQ,6BAA6B,EAAM,OAC3C,MAAO,EAAE,EAAA,QAAQ,uBAAuB,EACxC,MAAO,EAAM,OACd,CAAA,EACC,IACD,KAEL,EAAA,EAAA,MAAC,SAAD,CACE,cAAY,6BACZ,UAAU,+DAFZ,EAIE,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,KAAK,SACL,QAAQ,YACR,QAAS,EACT,OAAO,8BAEN,EAAE,EAAA,QAAQ,YAAY,CACZ,CAAA,GACb,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,KAAK,SACL,QAAQ,UACR,WAAY,CAAC,EACb,YAAe,EAAkB,EAAmB,CAAO,EAC3D,OAAQ,0BAA0B,EAAM,OACxC,cACE,EAAA,EAAA,KAAC,EAAA,QAAD,CAAwB,UAAU,SAAS,cAAA,EAAa,CAAA,WAGzD,EAAE,EAAA,QAAQ,gCAAgC,CAChC,CAAA,CACP,GACL,GACQ,CAAA,CAEnB"}

package/dist/components/features/skills/skill-detail-modal.js ADDED Viewed

@@ -0,0 +1,150 @@
+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 r from "../../../icons/checkmark.js";
+import i from "../../../icons/copy.js";
+import { ModalBackdrop as a } from "../../shared/modals/modal-backdrop.js";
+import { modalTitleLgClassName as o } from "../../../utils/modal-classes.js";
+import { ModalCloseButton as s } from "../../shared/modals/modal-close-button.js";
+import { BrandButton as c } from "../settings/brand-button.js";
+import { SkillCardPillRow as l } from "./skill-card-pill-row.js";
+import u from "../../../icons/message-square-share.js";
+import { useLaunchSkillInChat as d } from "../../../hooks/use-launch-skill-in-chat.js";
+import { SkillIconBadge as f } from "./skill-icon-badge.js";
+import { getSkillCardDescription as p } from "./get-skill-card-description.js";
+import { buildSkillPills as m } from "./build-skill-pills.js";
+import { isCopyableSkillSource as h } from "./is-copyable-skill-source.js";
+import { SettingsSwitch as g } from "../settings/settings-switch.js";
+import { getSkillChatLaunchMessage as _ } from "./get-skill-chat-launch-message.js";
+import v from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/components/features/skills/skill-detail-modal.tsx
+function x({ testId: e, label: t, value: r }) {
+	return /* @__PURE__ */ b("label", {
+		className: "flex min-w-0 w-full flex-col gap-2.5",
+		children: [/* @__PURE__ */ y("span", {
+			className: "text-sm",
+			children: t
+		}), /* @__PURE__ */ y("textarea", {
+			"data-testid": e,
+			readOnly: !0,
+			value: r,
+			rows: Math.min(12, Math.max(4, r.split("\n").length)),
+			className: n("bg-[var(--oh-surface-raised)] border border-[var(--oh-border-subtle)] w-full min-w-0 rounded-sm p-2 text-sm", "cursor-not-allowed resize-none custom-scrollbar")
+		})]
+	});
+}
+function S({ skill: n, enabled: S, onToggle: C, onClose: w }) {
+	let { t: T } = e("openhands"), E = d(), [D, O] = v.useState(!1), k = v.useMemo(() => _(n), [n]), A = p(n), j = v.useMemo(() => m(n, T, {
+		variant: "detail",
+		testIdPrefix: "skill-modal-pill"
+	}), [n, T]), M = h(n.source);
+	return v.useEffect(() => {
+		if (!D) return;
+		let e = setTimeout(() => O(!1), 2e3);
+		return () => clearTimeout(e);
+	}, [D]), /* @__PURE__ */ y(a, {
+		onClose: w,
+		"aria-label": n.name,
+		children: /* @__PURE__ */ b("div", {
+			"data-testid": "skill-detail-modal",
+			"data-skill-name": n.name,
+			className: "relative flex w-[520px] max-w-[90vw] max-h-[85vh] flex-col overflow-hidden rounded-xl border border-[var(--oh-border)] bg-base-secondary",
+			children: [
+				/* @__PURE__ */ y(s, {
+					onClose: w,
+					testId: "skill-detail-modal-close"
+				}),
+				/* @__PURE__ */ b("header", {
+					className: "flex flex-shrink-0 items-start gap-3 pb-4 pl-6 pr-12 pt-6",
+					children: [/* @__PURE__ */ y(f, { skillName: n.name }), /* @__PURE__ */ b("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ y("h2", {
+							"data-testid": `skill-modal-name-${n.name}`,
+							className: o,
+							children: n.name
+						}), n.source ? /* @__PURE__ */ b("div", {
+							className: "mt-0.5 flex min-w-0 items-center gap-1",
+							children: [/* @__PURE__ */ y("p", {
+								"data-testid": `skill-modal-source-${n.name}`,
+								className: "min-w-0 flex-1 truncate text-xs text-tertiary-alt",
+								title: n.source,
+								children: n.source
+							}), M ? /* @__PURE__ */ y("button", {
+								type: "button",
+								"data-testid": `skill-modal-copy-source-${n.name}`,
+								"aria-label": T(D ? t.BUTTON$COPIED : t.SETTINGS$SKILLS_COPY_PATH),
+								disabled: D,
+								onClick: async () => {
+									n.source && (await navigator.clipboard.writeText(n.source), O(!0));
+								},
+								className: "shrink-0 cursor-pointer border-0 bg-transparent p-0.5 text-tertiary-alt hover:text-white disabled:cursor-default [&_path]:fill-current",
+								children: y(D ? r : i, {
+									width: 12,
+									height: 12
+								})
+							}) : null]
+						}) : null]
+					})]
+				}),
+				/* @__PURE__ */ b("div", {
+					"data-testid": "skill-detail-modal-content",
+					className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain px-6 custom-scrollbar-always",
+					children: [
+						/* @__PURE__ */ y("div", {
+							"data-testid": `skill-modal-enable-row-${n.name}`,
+							className: "flex w-full items-center rounded-lg border border-[var(--oh-border)] bg-[rgba(255,255,255,0.04)] px-3 py-2.5",
+							children: /* @__PURE__ */ y(g, {
+								testId: `skill-modal-toggle-${n.name}`,
+								isToggled: S,
+								onToggle: C,
+								togglePosition: "right",
+								children: T(S ? t.SETTINGS$SKILLS_ENABLED : t.SETTINGS$SKILLS_DISABLED)
+							})
+						}),
+						A ? /* @__PURE__ */ y("p", {
+							"data-testid": `skill-modal-description-${n.name}`,
+							className: "break-words whitespace-pre-line text-xs text-tertiary-light",
+							children: A
+						}) : null,
+						j.length > 0 ? /* @__PURE__ */ y(l, {
+							pills: j,
+							testId: `skill-modal-pills-${n.name}`
+						}) : null,
+						n.content ? /* @__PURE__ */ y(x, {
+							testId: `skill-modal-field-content-${n.name}`,
+							label: T(t.SETTINGS$SKILLS_CONTENT),
+							value: n.content
+						}) : null
+					]
+				}),
+				/* @__PURE__ */ b("footer", {
+					"data-testid": "skill-detail-modal-actions",
+					className: "flex flex-shrink-0 justify-end gap-2 px-6 pb-6 pt-4",
+					children: [/* @__PURE__ */ y(c, {
+						type: "button",
+						variant: "secondary",
+						onClick: w,
+						testId: "skill-detail-close",
+						children: T(t.BUTTON$CLOSE)
+					}), /* @__PURE__ */ y(c, {
+						type: "button",
+						variant: "primary",
+						isDisabled: !S,
+						onClick: () => E(k, w),
+						testId: `skill-detail-use-skill-${n.name}`,
+						startContent: /* @__PURE__ */ y(u, {
+							className: "size-4",
+							"aria-hidden": !0
+						}),
+						children: T(t.SETTINGS$SKILLS_USE_SKILL_BUTTON)
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { S as SkillDetailModal };
+//# sourceMappingURL=skill-detail-modal.js.map

package/dist/components/features/skills/skill-detail-modal.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"skill-detail-modal.js","names":[],"sources":["../../../../src/components/features/skills/skill-detail-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { SettingsSwitch } from \"#/components/features/settings/settings-switch\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { SkillInfo } from \"#/types/settings\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport CopyIcon from \"#/icons/copy.svg?react\";\nimport CheckmarkIcon from \"#/icons/checkmark.svg?react\";\nimport MessageSquareShareIcon from \"#/icons/message-square-share.svg?react\";\nimport { SkillIconBadge } from \"./skill-icon-badge\";\nimport { getSkillCardDescription } from \"./get-skill-card-description\";\nimport { buildSkillPills } from \"./build-skill-pills\";\nimport { isCopyableSkillSource } from \"./is-copyable-skill-source\";\nimport { SkillCardPillRow } from \"./skill-card-pill-row\";\nimport { getSkillChatLaunchMessage } from \"./get-skill-chat-launch-message\";\nimport { useLaunchSkillInChat } from \"#/hooks/use-launch-skill-in-chat\";\n\ninterface SkillDetailModalProps {\n skill: SkillInfo;\n enabled: boolean;\n onToggle: (enabled: boolean) => void;\n onClose: () => void;\n}\n\nfunction ReadonlyTextArea({\n testId,\n label,\n value,\n}: {\n testId: string;\n label: string;\n value: string;\n}) {\n return (\n <label className=\"flex min-w-0 w-full flex-col gap-2.5\">\n <span className=\"text-sm\">{label}</span>\n <textarea\n data-testid={testId}\n readOnly\n value={value}\n rows={Math.min(12, Math.max(4, value.split(\"\\n\").length))}\n className={cn(\n \"bg-[var(--oh-surface-raised)] border border-[var(--oh-border-subtle)] w-full min-w-0 rounded-sm p-2 text-sm\",\n \"cursor-not-allowed resize-none custom-scrollbar\",\n )}\n />\n </label>\n );\n}\n\nexport function SkillDetailModal({\n skill,\n enabled,\n onToggle,\n onClose,\n}: SkillDetailModalProps) {\n const { t } = useTranslation(\"openhands\");\n const launchSkillInChat = useLaunchSkillInChat();\n const [sourceCopied, setSourceCopied] = React.useState(false);\n const chatLaunchMessage = React.useMemo(\n () => getSkillChatLaunchMessage(skill),\n [skill],\n );\n\n const description = getSkillCardDescription(skill);\n const pills = React.useMemo(\n () =>\n buildSkillPills(skill, t, {\n variant: \"detail\",\n testIdPrefix: \"skill-modal-pill\",\n }),\n [skill, t],\n );\n const showCopySource = isCopyableSkillSource(skill.source);\n\n const handleCopySource = async () => {\n if (!skill.source) {\n return;\n }\n\n await navigator.clipboard.writeText(skill.source);\n setSourceCopied(true);\n };\n\n React.useEffect(() => {\n if (!sourceCopied) {\n return undefined;\n }\n\n const timeout = setTimeout(() => setSourceCopied(false), 2000);\n return () => clearTimeout(timeout);\n }, [sourceCopied]);\n\n return (\n <ModalBackdrop onClose={onClose} aria-label={skill.name}>\n <div\n data-testid=\"skill-detail-modal\"\n data-skill-name={skill.name}\n className=\"relative flex w-[520px] max-w-[90vw] max-h-[85vh] flex-col overflow-hidden rounded-xl border border-[var(--oh-border)] bg-base-secondary\"\n >\n <ModalCloseButton onClose={onClose} testId=\"skill-detail-modal-close\" />\n <header className=\"flex flex-shrink-0 items-start gap-3 pb-4 pl-6 pr-12 pt-6\">\n <SkillIconBadge skillName={skill.name} />\n <div className=\"min-w-0 flex-1\">\n <h2\n data-testid={`skill-modal-name-${skill.name}`}\n className={modalTitleLgClassName}\n >\n {skill.name}\n </h2>\n {skill.source ? (\n <div className=\"mt-0.5 flex min-w-0 items-center gap-1\">\n <p\n data-testid={`skill-modal-source-${skill.name}`}\n className=\"min-w-0 flex-1 truncate text-xs text-tertiary-alt\"\n title={skill.source}\n >\n {skill.source}\n </p>\n {showCopySource ? (\n <button\n type=\"button\"\n data-testid={`skill-modal-copy-source-${skill.name}`}\n aria-label={t(\n sourceCopied\n ? I18nKey.BUTTON$COPIED\n : I18nKey.SETTINGS$SKILLS_COPY_PATH,\n )}\n disabled={sourceCopied}\n onClick={handleCopySource}\n className=\"shrink-0 cursor-pointer border-0 bg-transparent p-0.5 text-tertiary-alt hover:text-white disabled:cursor-default [&_path]:fill-current\"\n >\n {sourceCopied ? (\n <CheckmarkIcon width={12} height={12} />\n ) : (\n <CopyIcon width={12} height={12} />\n )}\n </button>\n ) : null}\n </div>\n ) : null}\n </div>\n </header>\n\n <div\n data-testid=\"skill-detail-modal-content\"\n className=\"flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain px-6 custom-scrollbar-always\"\n >\n <div\n data-testid={`skill-modal-enable-row-${skill.name}`}\n className=\"flex w-full items-center rounded-lg border border-[var(--oh-border)] bg-[rgba(255,255,255,0.04)] px-3 py-2.5\"\n >\n <SettingsSwitch\n testId={`skill-modal-toggle-${skill.name}`}\n isToggled={enabled}\n onToggle={onToggle}\n togglePosition=\"right\"\n >\n {t(\n enabled\n ? I18nKey.SETTINGS$SKILLS_ENABLED\n : I18nKey.SETTINGS$SKILLS_DISABLED,\n )}\n </SettingsSwitch>\n </div>\n\n {description ? (\n <p\n data-testid={`skill-modal-description-${skill.name}`}\n className=\"break-words whitespace-pre-line text-xs text-tertiary-light\"\n >\n {description}\n </p>\n ) : null}\n\n {pills.length > 0 ? (\n <SkillCardPillRow\n pills={pills}\n testId={`skill-modal-pills-${skill.name}`}\n />\n ) : null}\n\n {skill.content ? (\n <ReadonlyTextArea\n testId={`skill-modal-field-content-${skill.name}`}\n label={t(I18nKey.SETTINGS$SKILLS_CONTENT)}\n value={skill.content}\n />\n ) : null}\n </div>\n\n <footer\n data-testid=\"skill-detail-modal-actions\"\n className=\"flex flex-shrink-0 justify-end gap-2 px-6 pb-6 pt-4\"\n >\n <BrandButton\n type=\"button\"\n variant=\"secondary\"\n onClick={onClose}\n testId=\"skill-detail-close\"\n >\n {t(I18nKey.BUTTON$CLOSE)}\n </BrandButton>\n <BrandButton\n type=\"button\"\n variant=\"primary\"\n isDisabled={!enabled}\n onClick={() => launchSkillInChat(chatLaunchMessage, onClose)}\n testId={`skill-detail-use-skill-${skill.name}`}\n startContent={\n <MessageSquareShareIcon className=\"size-4\" aria-hidden />\n }\n >\n {t(I18nKey.SETTINGS$SKILLS_USE_SKILL_BUTTON)}\n </BrandButton>\n </footer>\n </div>\n </ModalBackdrop>\n );\n}\n"],"mappings":"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"}

package/dist/components/features/skills/skill-facet-rail.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../utils/utils.cjs"),n=require("../../../utils/skill-category.cjs"),r=require("./skill-facet-row.cjs");let i=require("react/jsx-runtime");function a(e,t){if(e===`category`)return n.SKILL_CATEGORY_ICONS[t]}function o({groups:n,onToggle:o,className:s}){let{t:c}=e.useTranslation(`openhands`);return n.length===0?null:(0,i.jsx)(`div`,{"data-testid":`skill-facet-rail`,className:t.cn(`flex min-w-0 flex-col gap-5`,s),children:n.map(e=>{let t=`skill-facet-group-${e.id}-title`;return(0,i.jsxs)(`div`,{"data-testid":`skill-facet-group-${e.id}`,role:`group`,"aria-labelledby":t,className:`flex flex-col gap-1.5`,children:[(0,i.jsx)(`span`,{id:t,className:`px-1 text-[11px] font-semibold uppercase tracking-wider text-tertiary-alt`,children:c(e.labelKey)}),e.rows.map(t=>(0,i.jsx)(r.SkillFacetRow,{testId:`skill-facet-${e.id}-${t.value}`,labelKey:t.labelKey,count:t.count,checked:t.checked,disabled:t.disabled,icon:a(e.id,t.value),onToggle:()=>o(e.id,t.value)},t.value))]},e.id)})})}exports.SkillFacetRail=o;
2	+ //# sourceMappingURL=skill-facet-rail.cjs.map

package/dist/components/features/skills/skill-facet-rail.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"skill-facet-rail.cjs","names":[],"sources":["../../../../src/components/features/skills/skill-facet-rail.tsx"],"sourcesContent":["import type { SkillCategoryId } from \"@openhands/extensions/skills\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { SKILL_CATEGORY_ICONS } from \"#/utils/skill-category\";\nimport { SkillFacetRow } from \"./skill-facet-row\";\nimport type { SkillFacetGroup, SkillFacetGroupId } from \"./skill-filter\";\n\ninterface SkillFacetRailProps {\n groups: SkillFacetGroup[];\n onToggle: (groupId: SkillFacetGroupId, value: string) => void;\n className?: string;\n}\n\n/** Only the category group carries an icon; the rest are plain rows. */\nfunction iconFor(\n groupId: SkillFacetGroupId,\n value: string,\n): LucideIcon | undefined {\n if (groupId !== \"category\") return undefined;\n return SKILL_CATEGORY_ICONS[value as SkillCategoryId];\n}\n\nexport function SkillFacetRail({\n groups,\n onToggle,\n className,\n}: SkillFacetRailProps) {\n const { t } = useTranslation(\"openhands\");\n\n if (groups.length === 0) return null;\n\n return (\n <div\n data-testid=\"skill-facet-rail\"\n className={cn(\"flex min-w-0 flex-col gap-5\", className)}\n >\n {groups.map((group) => {\n const titleId = `skill-facet-group-${group.id}-title`;\n return (\n <div\n key={group.id}\n data-testid={`skill-facet-group-${group.id}`}\n role=\"group\"\n aria-labelledby={titleId}\n className=\"flex flex-col gap-1.5\"\n >\n <span\n id={titleId}\n className=\"px-1 text-[11px] font-semibold uppercase tracking-wider text-tertiary-alt\"\n >\n {t(group.labelKey)}\n </span>\n {group.rows.map((row) => (\n <SkillFacetRow\n key={row.value}\n testId={`skill-facet-${group.id}-${row.value}`}\n labelKey={row.labelKey}\n count={row.count}\n checked={row.checked}\n disabled={row.disabled}\n icon={iconFor(group.id, row.value)}\n onToggle={() => onToggle(group.id, row.value)}\n />\n ))}\n </div>\n );\n })}\n </div>\n );\n}\n"],"mappings":"gSAeA,SAAS,EACP,EACA,EACwB,CACpB,OAAY,WAChB,OAAO,EAAA,qBAAqB,EAC9B,CAEA,SAAgB,EAAe,CAC7B,SACA,WACA,aACsB,CACtB,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAIxC,OAFI,EAAO,SAAW,EAAU,MAG9B,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,mBACZ,UAAW,EAAA,GAAG,8BAA+B,CAAS,WAErD,EAAO,IAAK,GAAU,CACrB,IAAM,EAAU,qBAAqB,EAAM,GAAG,QAC9C,OACE,EAAA,EAAA,MAAC,MAAD,CAEE,cAAa,qBAAqB,EAAM,KACxC,KAAK,QACL,kBAAiB,EACjB,UAAU,iCALZ,EAOE,EAAA,EAAA,KAAC,OAAD,CACE,GAAI,EACJ,UAAU,qFAET,EAAE,EAAM,QAAQ,CACb,CAAA,EACL,EAAM,KAAK,IAAK,IACf,EAAA,EAAA,KAAC,EAAA,cAAD,CAEE,OAAQ,eAAe,EAAM,GAAG,GAAG,EAAI,QACvC,SAAU,EAAI,SACd,MAAO,EAAI,MACX,QAAS,EAAI,QACb,SAAU,EAAI,SACd,KAAM,EAAQ,EAAM,GAAI,EAAI,KAAK,EACjC,aAAgB,EAAS,EAAM,GAAI,EAAI,KAAK,CAC7C,EARM,EAAI,KAQV,CACF,CACE,GAxBE,EAAM,EAwBR,CAET,CAAC,CACE,CAAA,CAET"}

package/dist/components/features/skills/skill-facet-rail.js ADDED Viewed

@@ -0,0 +1,42 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { cn as t } from "../../../utils/utils.js";
+import { SKILL_CATEGORY_ICONS as n } from "../../../utils/skill-category.js";
+import { SkillFacetRow as r } from "./skill-facet-row.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/features/skills/skill-facet-rail.tsx
+function o(e, t) {
+	if (e === "category") return n[t];
+}
+function s({ groups: n, onToggle: s, className: c }) {
+	let { t: l } = e("openhands");
+	return n.length === 0 ? null : /* @__PURE__ */ i("div", {
+		"data-testid": "skill-facet-rail",
+		className: t("flex min-w-0 flex-col gap-5", c),
+		children: n.map((e) => {
+			let t = `skill-facet-group-${e.id}-title`;
+			return /* @__PURE__ */ a("div", {
+				"data-testid": `skill-facet-group-${e.id}`,
+				role: "group",
+				"aria-labelledby": t,
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ i("span", {
+					id: t,
+					className: "px-1 text-[11px] font-semibold uppercase tracking-wider text-tertiary-alt",
+					children: l(e.labelKey)
+				}), e.rows.map((t) => /* @__PURE__ */ i(r, {
+					testId: `skill-facet-${e.id}-${t.value}`,
+					labelKey: t.labelKey,
+					count: t.count,
+					checked: t.checked,
+					disabled: t.disabled,
+					icon: o(e.id, t.value),
+					onToggle: () => s(e.id, t.value)
+				}, t.value))]
+			}, e.id);
+		})
+	});
+}
+//#endregion
+export { s as SkillFacetRail };
+//# sourceMappingURL=skill-facet-rail.js.map

package/dist/components/features/skills/skill-facet-rail.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"skill-facet-rail.js","names":[],"sources":["../../../../src/components/features/skills/skill-facet-rail.tsx"],"sourcesContent":["import type { SkillCategoryId } from \"@openhands/extensions/skills\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { SKILL_CATEGORY_ICONS } from \"#/utils/skill-category\";\nimport { SkillFacetRow } from \"./skill-facet-row\";\nimport type { SkillFacetGroup, SkillFacetGroupId } from \"./skill-filter\";\n\ninterface SkillFacetRailProps {\n groups: SkillFacetGroup[];\n onToggle: (groupId: SkillFacetGroupId, value: string) => void;\n className?: string;\n}\n\n/** Only the category group carries an icon; the rest are plain rows. */\nfunction iconFor(\n groupId: SkillFacetGroupId,\n value: string,\n): LucideIcon | undefined {\n if (groupId !== \"category\") return undefined;\n return SKILL_CATEGORY_ICONS[value as SkillCategoryId];\n}\n\nexport function SkillFacetRail({\n groups,\n onToggle,\n className,\n}: SkillFacetRailProps) {\n const { t } = useTranslation(\"openhands\");\n\n if (groups.length === 0) return null;\n\n return (\n <div\n data-testid=\"skill-facet-rail\"\n className={cn(\"flex min-w-0 flex-col gap-5\", className)}\n >\n {groups.map((group) => {\n const titleId = `skill-facet-group-${group.id}-title`;\n return (\n <div\n key={group.id}\n data-testid={`skill-facet-group-${group.id}`}\n role=\"group\"\n aria-labelledby={titleId}\n className=\"flex flex-col gap-1.5\"\n >\n <span\n id={titleId}\n className=\"px-1 text-[11px] font-semibold uppercase tracking-wider text-tertiary-alt\"\n >\n {t(group.labelKey)}\n </span>\n {group.rows.map((row) => (\n <SkillFacetRow\n key={row.value}\n testId={`skill-facet-${group.id}-${row.value}`}\n labelKey={row.labelKey}\n count={row.count}\n checked={row.checked}\n disabled={row.disabled}\n icon={iconFor(group.id, row.value)}\n onToggle={() => onToggle(group.id, row.value)}\n />\n ))}\n </div>\n );\n })}\n </div>\n );\n}\n"],"mappings":";;;;;;AAeA,SAAS,EACP,GACA,GACwB;CACpB,UAAY,YAChB,OAAO,EAAqB;AAC9B;AAEA,SAAgB,EAAe,EAC7B,WACA,aACA,gBACsB;CACtB,IAAM,EAAE,SAAM,EAAe,WAAW;CAIxC,OAFI,EAAO,WAAW,IAAU,OAG9B,kBAAC,OAAD;EACE,eAAY;EACZ,WAAW,EAAG,+BAA+B,CAAS;YAErD,EAAO,KAAK,MAAU;GACrB,IAAM,IAAU,qBAAqB,EAAM,GAAG;GAC9C,OACE,kBAAC,OAAD;IAEE,eAAa,qBAAqB,EAAM;IACxC,MAAK;IACL,mBAAiB;IACjB,WAAU;cALZ,CAOE,kBAAC,QAAD;KACE,IAAI;KACJ,WAAU;eAET,EAAE,EAAM,QAAQ;IACb,CAAA,GACL,EAAM,KAAK,KAAK,MACf,kBAAC,GAAD;KAEE,QAAQ,eAAe,EAAM,GAAG,GAAG,EAAI;KACvC,UAAU,EAAI;KACd,OAAO,EAAI;KACX,SAAS,EAAI;KACb,UAAU,EAAI;KACd,MAAM,EAAQ,EAAM,IAAI,EAAI,KAAK;KACjC,gBAAgB,EAAS,EAAM,IAAI,EAAI,KAAK;IAC7C,GARM,EAAI,KAQV,CACF,CACE;MAxBE,EAAM,EAwBR;EAET,CAAC;CACE,CAAA;AAET"}

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

	@@ -0,0 +1,2 @@
1	+ require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../node_modules/lucide-react/dist/esm/icons/check.cjs"),n=require("../../../utils/utils.cjs");let r=require("react/jsx-runtime");function i({labelKey:i,count:a,checked:o,disabled:s,icon:c,testId:l,onToggle:u}){let{t:d}=e.useTranslation(`openhands`),f=d(i);return(0,r.jsxs)(`button`,{type:`button`,role:`checkbox`,"aria-checked":o,"data-testid":l,disabled:s,onClick:u,className:n.cn(`flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-left text-sm`,s?`cursor-default text-tertiary-alt/40`:`cursor-pointer hover:bg-[var(--oh-surface-raised)] hover:text-white`,o?`text-white`:`text-tertiary-light`),children:[(0,r.jsx)(`span`,{"aria-hidden":!0,className:n.cn(`flex size-3.5 shrink-0 items-center justify-center rounded-[3px] border`,o?`border-white bg-white text-black`:`border-[var(--oh-border)]`),children:o?(0,r.jsx)(t.Check,{className:`size-2.5`,strokeWidth:3}):null}),c?(0,r.jsx)(c,{className:`size-3.5 shrink-0`,"aria-hidden":!0}):null,(0,r.jsx)(`span`,{title:f,className:`min-w-0 flex-1 truncate`,children:f}),(0,r.jsx)(`span`,{className:`shrink-0 text-xs text-tertiary-alt`,children:a})]})}exports.SkillFacetRow=i;
2	+ //# sourceMappingURL=skill-facet-row.cjs.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"skill-facet-row.cjs","names":[],"sources":["../../../../src/components/features/skills/skill-facet-row.tsx"],"sourcesContent":["import { Check, type LucideIcon } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\ninterface SkillFacetRowProps {\n labelKey: I18nKey;\n count: number;\n checked: boolean;\n disabled: boolean;\n icon?: LucideIcon;\n testId: string;\n onToggle: () => void;\n}\n\nexport function SkillFacetRow({\n labelKey,\n count,\n checked,\n disabled,\n icon: Icon,\n testId,\n onToggle,\n}: SkillFacetRowProps) {\n const { t } = useTranslation(\"openhands\");\n const label = t(labelKey);\n\n return (\n <button\n type=\"button\"\n role=\"checkbox\"\n aria-checked={checked}\n data-testid={testId}\n disabled={disabled}\n onClick={onToggle}\n className={cn(\n \"flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-left text-sm\",\n disabled\n ? \"cursor-default text-tertiary-alt/40\"\n : // Same hover pair as the extensions nav links: a raised surface the\n // label brightens against, rather than a light fill it sinks into.\n \"cursor-pointer hover:bg-[var(--oh-surface-raised)] hover:text-white\",\n checked ? \"text-white\" : \"text-tertiary-light\",\n )}\n >\n <span\n aria-hidden\n className={cn(\n \"flex size-3.5 shrink-0 items-center justify-center rounded-[3px] border\",\n checked\n ? \"border-white bg-white text-black\"\n : \"border-[var(--oh-border)]\",\n )}\n >\n {checked ? <Check className=\"size-2.5\" strokeWidth={3} /> : null}\n </span>\n {Icon ? <Icon className=\"size-3.5 shrink-0\" aria-hidden /> : null}\n {/* The rail cannot be wide enough for every locale, so a truncated label stays readable on hover. */}\n <span title={label} className=\"min-w-0 flex-1 truncate\">\n {label}\n </span>\n <span className=\"shrink-0 text-xs text-tertiary-alt\">{count}</span>\n </button>\n );\n}\n"],"mappings":"uRAeA,SAAgB,EAAc,CAC5B,WACA,QACA,UACA,WACA,KAAM,EACN,SACA,YACqB,CACrB,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EAAQ,EAAE,CAAQ,EAExB,OACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,KAAK,WACL,eAAc,EACd,cAAa,EACH,WACV,QAAS,EACT,UAAW,EAAA,GACT,0EACA,EACI,sCAGA,sEACJ,EAAU,aAAe,qBAC3B,WAfF,EAiBE,EAAA,EAAA,KAAC,OAAD,CACE,cAAA,GACA,UAAW,EAAA,GACT,0EACA,EACI,mCACA,2BACN,WAEC,GAAU,EAAA,EAAA,KAAC,EAAA,MAAD,CAAO,UAAU,WAAW,YAAa,CAAI,CAAA,EAAI,IACxD,CAAA,EACL,GAAO,EAAA,EAAA,KAAC,EAAD,CAAM,UAAU,oBAAoB,cAAA,EAAa,CAAA,EAAI,MAE7D,EAAA,EAAA,KAAC,OAAD,CAAM,MAAO,EAAO,UAAU,mCAC3B,CACG,CAAA,GACN,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,8CAAsC,CAAY,CAAA,CAC5D,GAEZ"}

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

@@ -0,0 +1,44 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { Check as t } from "../../../node_modules/lucide-react/dist/esm/icons/check.js";
+import { cn as n } from "../../../utils/utils.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/features/skills/skill-facet-row.tsx
+function a({ labelKey: a, count: o, checked: s, disabled: c, icon: l, testId: u, onToggle: d }) {
+	let { t: f } = e("openhands"), p = f(a);
+	return /* @__PURE__ */ i("button", {
+		type: "button",
+		role: "checkbox",
+		"aria-checked": s,
+		"data-testid": u,
+		disabled: c,
+		onClick: d,
+		className: n("flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-left text-sm", c ? "cursor-default text-tertiary-alt/40" : "cursor-pointer hover:bg-[var(--oh-surface-raised)] hover:text-white", s ? "text-white" : "text-tertiary-light"),
+		children: [
+			/* @__PURE__ */ r("span", {
+				"aria-hidden": !0,
+				className: n("flex size-3.5 shrink-0 items-center justify-center rounded-[3px] border", s ? "border-white bg-white text-black" : "border-[var(--oh-border)]"),
+				children: s ? /* @__PURE__ */ r(t, {
+					className: "size-2.5",
+					strokeWidth: 3
+				}) : null
+			}),
+			l ? /* @__PURE__ */ r(l, {
+				className: "size-3.5 shrink-0",
+				"aria-hidden": !0
+			}) : null,
+			/* @__PURE__ */ r("span", {
+				title: p,
+				className: "min-w-0 flex-1 truncate",
+				children: p
+			}),
+			/* @__PURE__ */ r("span", {
+				className: "shrink-0 text-xs text-tertiary-alt",
+				children: o
+			})
+		]
+	});
+}
+//#endregion
+export { a as SkillFacetRow };
+//# sourceMappingURL=skill-facet-row.js.map

package/dist/components/features/skills/skill-facet-row.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"skill-facet-row.js","names":[],"sources":["../../../../src/components/features/skills/skill-facet-row.tsx"],"sourcesContent":["import { Check, type LucideIcon } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\ninterface SkillFacetRowProps {\n labelKey: I18nKey;\n count: number;\n checked: boolean;\n disabled: boolean;\n icon?: LucideIcon;\n testId: string;\n onToggle: () => void;\n}\n\nexport function SkillFacetRow({\n labelKey,\n count,\n checked,\n disabled,\n icon: Icon,\n testId,\n onToggle,\n}: SkillFacetRowProps) {\n const { t } = useTranslation(\"openhands\");\n const label = t(labelKey);\n\n return (\n <button\n type=\"button\"\n role=\"checkbox\"\n aria-checked={checked}\n data-testid={testId}\n disabled={disabled}\n onClick={onToggle}\n className={cn(\n \"flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-left text-sm\",\n disabled\n ? \"cursor-default text-tertiary-alt/40\"\n : // Same hover pair as the extensions nav links: a raised surface the\n // label brightens against, rather than a light fill it sinks into.\n \"cursor-pointer hover:bg-[var(--oh-surface-raised)] hover:text-white\",\n checked ? \"text-white\" : \"text-tertiary-light\",\n )}\n >\n <span\n aria-hidden\n className={cn(\n \"flex size-3.5 shrink-0 items-center justify-center rounded-[3px] border\",\n checked\n ? \"border-white bg-white text-black\"\n : \"border-[var(--oh-border)]\",\n )}\n >\n {checked ? <Check className=\"size-2.5\" strokeWidth={3} /> : null}\n </span>\n {Icon ? <Icon className=\"size-3.5 shrink-0\" aria-hidden /> : null}\n {/* The rail cannot be wide enough for every locale, so a truncated label stays readable on hover. */}\n <span title={label} className=\"min-w-0 flex-1 truncate\">\n {label}\n </span>\n <span className=\"shrink-0 text-xs text-tertiary-alt\">{count}</span>\n </button>\n );\n}\n"],"mappings":";;;;;AAeA,SAAgB,EAAc,EAC5B,aACA,UACA,YACA,aACA,MAAM,GACN,WACA,eACqB;CACrB,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,IAAQ,EAAE,CAAQ;CAExB,OACE,kBAAC,UAAD;EACE,MAAK;EACL,MAAK;EACL,gBAAc;EACd,eAAa;EACH;EACV,SAAS;EACT,WAAW,EACT,2EACA,IACI,wCAGA,uEACJ,IAAU,eAAe,qBAC3B;YAfF;GAiBE,kBAAC,QAAD;IACE,eAAA;IACA,WAAW,EACT,2EACA,IACI,qCACA,2BACN;cAEC,IAAU,kBAAC,GAAD;KAAO,WAAU;KAAW,aAAa;IAAI,CAAA,IAAI;GACxD,CAAA;GACL,IAAO,kBAAC,GAAD;IAAM,WAAU;IAAoB,eAAA;GAAa,CAAA,IAAI;GAE7D,kBAAC,QAAD;IAAM,OAAO;IAAO,WAAU;cAC3B;GACG,CAAA;GACN,kBAAC,QAAD;IAAM,WAAU;cAAsC;GAAY,CAAA;EAC5D;;AAEZ"}

package/dist/components/features/skills/skill-filter.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../i18n/declaration.cjs"),t=require("../../../utils/skill-enablement.cjs"),n=require("../../../utils/skill-scope.cjs"),r=require("./get-skill-card-description.cjs"),i=require("../../../utils/skill-category.cjs");var a=`source`,o=`category`,s=`type`,c=`state`,l=`recommendation`,u=[`enabled`,`disabled`],d=[`recommended`,`other`],f=[`agentskills`,`knowledge`,`repo`],p={query:``,sources:new Set,categories:new Set,types:new Set,states:new Set,recommendations:new Set};function m(e,t){return e.map(e=>({value:e,labelKey:t[e]}))}function h(e,t){return new Set(e.filter(e=>t.has(e)))}var g={project:e.I18nKey.SETTINGS$SKILLS_SOURCE_PROJECT,personal:e.I18nKey.SETTINGS$SKILLS_SOURCE_PERSONAL,public:e.I18nKey.SETTINGS$SKILLS_SOURCE_PUBLIC},_={agentskills:e.I18nKey.SETTINGS$SKILLS_TYPE_AGENTSKILLS,knowledge:e.I18nKey.SETTINGS$SKILLS_TYPE_KNOWLEDGE,repo:e.I18nKey.SETTINGS$SKILLS_TYPE_REPO},v={enabled:e.I18nKey.SETTINGS$SKILLS_ENABLED,disabled:e.I18nKey.SETTINGS$SKILLS_DISABLED},y={recommended:e.I18nKey.SETTINGS$SKILLS_RECOMMENDED,other:e.I18nKey.SETTINGS$SKILLS_RECOMMENDATION_OTHER},b=[{id:`state`,labelKey:e.I18nKey.SETTINGS$SKILLS_FACET_STATE,param:c,values:m(u,v),valueOf:(e,t)=>t(e)?`enabled`:`disabled`,selected:e=>e.states,withSelected:(e,t)=>({...e,states:h(u,t)})},{id:`recommendation`,labelKey:e.I18nKey.SETTINGS$SKILLS_FACET_RECOMMENDATION,param:l,values:m(d,y),valueOf:e=>t.isRecommendedSkill(e.name)?`recommended`:`other`,selected:e=>e.recommendations,withSelected:(e,t)=>({...e,recommendations:h(d,t)})},{id:`source`,labelKey:e.I18nKey.SETTINGS$SKILLS_FACET_SOURCE,param:a,values:m(n.SKILL_SCOPE_ORDER,g),valueOf:e=>n.getSkillScope(e),selected:e=>e.sources,withSelected:(e,t)=>({...e,sources:h(n.SKILL_SCOPE_ORDER,t)})},{id:`category`,labelKey:e.I18nKey.SETTINGS$SKILLS_FACET_CATEGORY,param:o,values:m(i.SKILL_CATEGORY_ORDER,i.SKILL_CATEGORY_LABEL_KEYS),valueOf:e=>i.getSkillCategory(e),selected:e=>e.categories,withSelected:(e,t)=>({...e,categories:h(i.SKILL_CATEGORY_ORDER,t)})},{id:`type`,labelKey:e.I18nKey.SETTINGS$SKILLS_FACET_TYPE,param:s,values:m(f,_),valueOf:e=>e.type,selected:e=>e.types,withSelected:(e,t)=>({...e,types:h(f,t)})}];function x(e){let t=b.find(t=>t.id===e);if(!t)throw Error(`Unknown skill facet group: ${e}`);return t}function S(e,t){let n=t.trim();if(!n)return!0;let i=[e.name,r.getSkillCardDescription(e),e.description??``,e.content??``,e.license??``,e.compatibility??``,...e.triggers??[],...e.allowed_tools??[]],a=n.toLowerCase();return i.some(e=>e.toLowerCase().includes(a))}function C(e,t,n,r){return b.every(i=>{if(i.id===r)return!0;let a=i.selected(n);return a.size===0?!0:a.has(i.valueOf(e,t))})}function w(e,t,n){return e.filter(e=>S(e,n.query)&&C(e,t,n))}function T(e,t,n){let r={};for(let i of e){let e=t.valueOf(i,n);r[e]=(r[e]??0)+1}return r}function E(e,t,n,r,i){let a=T(t,e,r),o=e.values.filter(({value:e})=>(a[e]??0)>0),s=e.selected(i);if(o.length<2&&s.size===0)return null;let c=e.values.filter(({value:e})=>(a[e]??0)>0\|\|s.has(e)),l=T(n.filter(t=>C(t,r,i,e.id)),e,r);return{id:e.id,labelKey:e.labelKey,rows:c.map(({value:e,labelKey:t})=>{let n=l[e]??0,r=s.has(e);return{value:e,labelKey:t,count:n,checked:r,disabled:n===0&&!r}})}}function D(e,t,n){let r=e.filter(e=>S(e,n.query));return b.map(i=>E(i,e,r,t,n)).filter(e=>e!==null)}function O(e,t,n){let r=x(t);if(!r.values.some(e=>e.value===n))return e;let i=new Set(r.selected(e));return i.has(n)?i.delete(n):i.add(n),r.withSelected(e,i)}function k(e){return{...p,query:e.query}}function A(e){return b.reduce((t,n)=>t+n.selected(e).size,0)}exports.EMPTY_SKILL_FILTER_STATE=p,exports.applySkillFilters=w,exports.buildSkillFacetGroups=D,exports.clearSkillFilterFacets=k,exports.countActiveFilters=A,exports.toggleSkillFilterValue=O;
2	+ //# sourceMappingURL=skill-filter.cjs.map

package/dist/components/features/skills/skill-filter.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"skill-filter.cjs","names":[],"sources":["../../../../src/components/features/skills/skill-filter.ts"],"sourcesContent":["import type { SkillCategoryId } from \"@openhands/extensions/skills\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { SkillInfo, SkillType } from \"#/types/settings\";\nimport {\n getSkillCategory,\n SKILL_CATEGORY_LABEL_KEYS,\n SKILL_CATEGORY_ORDER,\n} from \"#/utils/skill-category\";\nimport {\n getSkillScope,\n SKILL_SCOPE_ORDER,\n type SkillScope,\n} from \"#/utils/skill-scope\";\nimport { isRecommendedSkill } from \"#/utils/skill-enablement\";\nimport { getSkillCardDescription } from \"./get-skill-card-description\";\n\nexport const SKILL_FILTER_QUERY_PARAM = \"q\";\nconst SOURCE_PARAM = \"source\";\nconst CATEGORY_PARAM = \"category\";\nconst TYPE_PARAM = \"type\";\nconst STATE_PARAM = \"state\";\nconst RECOMMENDATION_PARAM = \"recommendation\";\n\nexport type SkillEnabledState = \"enabled\" | \"disabled\";\nexport type SkillRecommendation = \"recommended\" | \"other\";\nexport type SkillFacetGroupId =\n | \"state\"\n | \"recommendation\"\n | \"source\"\n | \"category\"\n | \"type\";\n\nconst SKILL_ENABLED_STATE_ORDER: readonly SkillEnabledState[] = [\n \"enabled\",\n \"disabled\",\n];\nconst SKILL_RECOMMENDATION_ORDER: readonly SkillRecommendation[] = [\n \"recommended\",\n \"other\",\n];\nconst SKILL_TYPE_ORDER: readonly SkillType[] = [\n \"agentskills\",\n \"knowledge\",\n \"repo\",\n];\n\nexport interface SkillFilterState {\n query: string;\n sources: Set<SkillScope>;\n categories: Set<SkillCategoryId>;\n types: Set<SkillType>;\n states: Set<SkillEnabledState>;\n recommendations: Set<SkillRecommendation>;\n}\n\nexport interface SkillFacetRowModel {\n value: string;\n labelKey: I18nKey;\n count: number;\n checked: boolean;\n disabled: boolean;\n}\n\nexport interface SkillFacetGroup {\n id: SkillFacetGroupId;\n labelKey: I18nKey;\n rows: SkillFacetRowModel[];\n}\n\nexport const EMPTY_SKILL_FILTER_STATE: SkillFilterState = {\n query: \"\",\n sources: new Set(),\n categories: new Set(),\n types: new Set(),\n states: new Set(),\n recommendations: new Set(),\n};\n\n/** Carrying `labelKey`s rather than translated strings keeps this module pure, so its tests need no i18n. */\ninterface GroupValue {\n value: string;\n labelKey: I18nKey;\n}\n\nfunction labelledValues<TValue extends string>(\n order: readonly TValue[],\n labelKeys: Record<TValue, I18nKey>,\n): readonly GroupValue[] {\n return order.map((value) => ({ value, labelKey: labelKeys[value] }));\n}\n\n/** Resolving the two lists behind enablement is the caller's job, not this module's. */\ntype SkillEnabledPredicate = (skill: SkillInfo) => boolean;\n\n/** A new facet group is declared here and nowhere else: `selected` / `withSelected` are what keep every operation below driven by this table alone. */\ninterface GroupDef {\n id: SkillFacetGroupId;\n labelKey: I18nKey;\n param: string;\n values: readonly GroupValue[];\n valueOf: (skill: SkillInfo, isEnabled: SkillEnabledPredicate) => string;\n selected: (state: SkillFilterState) => Set<string>;\n withSelected: (\n state: SkillFilterState,\n next: Set<string>,\n ) => SkillFilterState;\n}\n\n/** Rebuilding rather than casting keeps every writer below cast-free: a value the group does not declare cannot survive. */\nfunction narrowSet<TValue extends string>(\n order: readonly TValue[],\n next: Set<string>,\n): Set<TValue> {\n return new Set(order.filter((value) => next.has(value)));\n}\n\nconst SOURCE_LABEL_KEYS: Record<SkillScope, I18nKey> = {\n project: I18nKey.SETTINGS$SKILLS_SOURCE_PROJECT,\n personal: I18nKey.SETTINGS$SKILLS_SOURCE_PERSONAL,\n public: I18nKey.SETTINGS$SKILLS_SOURCE_PUBLIC,\n};\n\nconst TYPE_LABEL_KEYS: Record<SkillType, I18nKey> = {\n agentskills: I18nKey.SETTINGS$SKILLS_TYPE_AGENTSKILLS,\n knowledge: I18nKey.SETTINGS$SKILLS_TYPE_KNOWLEDGE,\n repo: I18nKey.SETTINGS$SKILLS_TYPE_REPO,\n};\n\nconst STATE_LABEL_KEYS: Record<SkillEnabledState, I18nKey> = {\n enabled: I18nKey.SETTINGS$SKILLS_ENABLED,\n disabled: I18nKey.SETTINGS$SKILLS_DISABLED,\n};\n\nconst RECOMMENDATION_LABEL_KEYS: Record<SkillRecommendation, I18nKey> = {\n recommended: I18nKey.SETTINGS$SKILLS_RECOMMENDED,\n other: I18nKey.SETTINGS$SKILLS_RECOMMENDATION_OTHER,\n};\n\nconst GROUP_DEFS: readonly GroupDef[] = [\n {\n id: \"state\",\n labelKey: I18nKey.SETTINGS$SKILLS_FACET_STATE,\n param: STATE_PARAM,\n values: labelledValues(SKILL_ENABLED_STATE_ORDER, STATE_LABEL_KEYS),\n valueOf: (skill, isEnabled) => (isEnabled(skill) ? \"enabled\" : \"disabled\"),\n selected: (state) => state.states,\n withSelected: (state, next) => ({\n ...state,\n states: narrowSet(SKILL_ENABLED_STATE_ORDER, next),\n }),\n },\n {\n id: \"recommendation\",\n labelKey: I18nKey.SETTINGS$SKILLS_FACET_RECOMMENDATION,\n param: RECOMMENDATION_PARAM,\n values: labelledValues(\n SKILL_RECOMMENDATION_ORDER,\n RECOMMENDATION_LABEL_KEYS,\n ),\n valueOf: (skill) =>\n isRecommendedSkill(skill.name) ? \"recommended\" : \"other\",\n selected: (state) => state.recommendations,\n withSelected: (state, next) => ({\n ...state,\n recommendations: narrowSet(SKILL_RECOMMENDATION_ORDER, next),\n }),\n },\n {\n id: \"source\",\n labelKey: I18nKey.SETTINGS$SKILLS_FACET_SOURCE,\n param: SOURCE_PARAM,\n values: labelledValues(SKILL_SCOPE_ORDER, SOURCE_LABEL_KEYS),\n valueOf: (skill) => getSkillScope(skill),\n selected: (state) => state.sources,\n withSelected: (state, next) => ({\n ...state,\n sources: narrowSet(SKILL_SCOPE_ORDER, next),\n }),\n },\n {\n id: \"category\",\n labelKey: I18nKey.SETTINGS$SKILLS_FACET_CATEGORY,\n param: CATEGORY_PARAM,\n values: labelledValues(SKILL_CATEGORY_ORDER, SKILL_CATEGORY_LABEL_KEYS),\n valueOf: (skill) => getSkillCategory(skill),\n selected: (state) => state.categories,\n withSelected: (state, next) => ({\n ...state,\n categories: narrowSet(SKILL_CATEGORY_ORDER, next),\n }),\n },\n {\n id: \"type\",\n labelKey: I18nKey.SETTINGS$SKILLS_FACET_TYPE,\n param: TYPE_PARAM,\n values: labelledValues(SKILL_TYPE_ORDER, TYPE_LABEL_KEYS),\n valueOf: (skill) => skill.type,\n selected: (state) => state.types,\n withSelected: (state, next) => ({\n ...state,\n types: narrowSet(SKILL_TYPE_ORDER, next),\n }),\n },\n];\n\nfunction groupDef(id: SkillFacetGroupId): GroupDef {\n const def = GROUP_DEFS.find((candidate) => candidate.id === id);\n if (!def) throw new Error(`Unknown skill facet group: ${id}`);\n return def;\n}\n\n/** Unknown values are dropped, so a hand-edited URL cannot smuggle one in. */\nfunction parseSet(raw: string[], def: GroupDef): Set<string> {\n const legal = new Set(def.values.map(({ value }) => value));\n return new Set(\n raw.map((value) => value.trim()).filter((value) => legal.has(value)),\n );\n}\n\nexport function parseSkillFilterState(\n params: URLSearchParams,\n): SkillFilterState {\n return GROUP_DEFS.reduce<SkillFilterState>(\n (state, def) =>\n def.withSelected(state, parseSet(params.getAll(def.param), def)),\n {\n ...EMPTY_SKILL_FILTER_STATE,\n query: params.get(SKILL_FILTER_QUERY_PARAM) ?? \"\",\n },\n );\n}\n\nexport function toSkillFilterSearchParams(\n state: SkillFilterState,\n): URLSearchParams {\n const params = new URLSearchParams();\n if (state.query) params.set(SKILL_FILTER_QUERY_PARAM, state.query);\n\n // Canonical order keeps URLs deterministic regardless of click order.\n for (const def of GROUP_DEFS) {\n const selected = def.selected(state);\n for (const { value } of def.values) {\n if (selected.has(value)) params.append(def.param, value);\n }\n }\n\n return params;\n}\n\nfunction matchesQuery(skill: SkillInfo, query: string): boolean {\n const trimmed = query.trim();\n if (!trimmed) return true;\n\n const haystacks = [\n skill.name,\n getSkillCardDescription(skill),\n skill.description ?? \"\",\n skill.content ?? \"\",\n skill.license ?? \"\",\n skill.compatibility ?? \"\",\n ...(skill.triggers ?? []),\n ...(skill.allowed_tools ?? []),\n ];\n\n const lowered = trimmed.toLowerCase();\n return haystacks.some((value) => value.toLowerCase().includes(lowered));\n}\n\n/**\n * `exclude` omits one group's own selection so its rows stay counted against the other groups alone.\n * A row therefore reads \"this many skills carry this value, under your other filters\" — the usual disjunctive facet count — and not \"your result set will be this big\": the group ORs its values together, so on a group that already has a selection the two differ.\n */\nfunction matchesFacets(\n skill: SkillInfo,\n isEnabled: SkillEnabledPredicate,\n state: SkillFilterState,\n exclude?: SkillFacetGroupId,\n): boolean {\n return GROUP_DEFS.every((def) => {\n if (def.id === exclude) return true;\n const selected = def.selected(state);\n if (selected.size === 0) return true;\n return selected.has(def.valueOf(skill, isEnabled));\n });\n}\n\nexport function applySkillFilters(\n skills: SkillInfo[],\n isEnabled: SkillEnabledPredicate,\n state: SkillFilterState,\n): SkillInfo[] {\n return skills.filter(\n (skill) =>\n matchesQuery(skill, state.query) &&\n matchesFacets(skill, isEnabled, state),\n );\n}\n\nfunction countByValue(\n skills: SkillInfo[],\n def: GroupDef,\n isEnabled: SkillEnabledPredicate,\n): Record<string, number> {\n const counts: Record<string, number> = {};\n for (const skill of skills) {\n const value = def.valueOf(skill, isEnabled);\n counts[value] = (counts[value] ?? 0) + 1;\n }\n return counts;\n}\n\nfunction buildGroup(\n def: GroupDef,\n allSkills: SkillInfo[],\n searched: SkillInfo[],\n isEnabled: SkillEnabledPredicate,\n state: SkillFilterState,\n): SkillFacetGroup | null {\n // Visibility and the row set come from the raw list so the rail's shape\n // depends only on what the user has, never on the active filters. If they\n // tracked filtered counts, narrowing could make a group vanish mid-click.\n const rawCounts = countByValue(allSkills, def, isEnabled);\n const discriminating = def.values.filter(\n ({ value }) => (rawCounts[value] ?? 0) > 0,\n );\n const selected = def.selected(state);\n // A group with only one (or zero) discriminating values is normally hidden,\n // but a selection can still be carried in from the URL for a value that has\n // no matches for this user. Hiding the group then would enforce the filter\n // invisibly, with no row left to explain or undo it.\n if (discriminating.length < 2 && selected.size === 0) return null;\n\n const visibleValues = def.values.filter(\n ({ value }) => (rawCounts[value] ?? 0) > 0 || selected.has(value),\n );\n\n const candidates = searched.filter((skill) =>\n matchesFacets(skill, isEnabled, state, def.id),\n );\n const counts = countByValue(candidates, def, isEnabled);\n\n return {\n id: def.id,\n labelKey: def.labelKey,\n rows: visibleValues.map(({ value, labelKey }) => {\n const count = counts[value] ?? 0;\n const checked = selected.has(value);\n return {\n value,\n labelKey,\n count,\n checked,\n disabled: count === 0 && !checked,\n };\n }),\n };\n}\n\nexport function buildSkillFacetGroups(\n skills: SkillInfo[],\n isEnabled: SkillEnabledPredicate,\n state: SkillFilterState,\n): SkillFacetGroup[] {\n const searched = skills.filter((skill) => matchesQuery(skill, state.query));\n\n return GROUP_DEFS.map((def) =>\n buildGroup(def, skills, searched, isEnabled, state),\n ).filter((group): group is SkillFacetGroup => group !== null);\n}\n\nexport function toggleSkillFilterValue(\n state: SkillFilterState,\n groupId: SkillFacetGroupId,\n value: string,\n): SkillFilterState {\n const def = groupDef(groupId);\n // `withSelected` would drop an unknown value anyway; returning the same\n // state object keeps a no-op toggle from re-rendering or rewriting the URL.\n if (!def.values.some((candidate) => candidate.value === value)) return state;\n\n const next = new Set(def.selected(state));\n if (next.has(value)) {\n next.delete(value);\n } else {\n next.add(value);\n }\n\n return def.withSelected(state, next);\n}\n\nexport function clearSkillFilterFacets(\n state: SkillFilterState,\n): SkillFilterState {\n return { ...EMPTY_SKILL_FILTER_STATE, query: state.query };\n}\n\nexport function countActiveFilters(state: SkillFilterState): number {\n // The query is excluded: it is already visible in its own input, so counting\n // it would double-report in both the Filters badge and the summary row.\n return GROUP_DEFS.reduce((total, def) => total + def.selected(state).size, 0);\n}\n"],"mappings":"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"}