@openhands/agent-canvas 1.13.0 → 1.15.0

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

@@ -0,0 +1,2 @@
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../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;
+//# sourceMappingURL=skill-card-pill-row.cjs.map

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

@@ -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

@@ -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

@@ -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

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

@@ -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

@@ -0,0 +1,2 @@
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../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;
+//# sourceMappingURL=skill-card.cjs.map

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

@@ -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

@@ -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

@@ -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

@@ -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

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

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

@@ -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

@@ -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

@@ -0,0 +1,2 @@
+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;
+//# sourceMappingURL=skill-facet-rail.cjs.map

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

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