dsh-skill-picker 0.5.24 → 0.5.26

package/lib/client.js

@@ -26169,6 +26169,38 @@ async function skillOp(action, payload = {}) {
     return { ok: false, error: String(cause?.message ?? cause) };
   }
 }
+function focusComposer(from, onlyIfFocused = false) {
+  try {
+    let node = from;
+    for (let depth = 0; depth < 8 && node !== null && node !== void 0; depth += 1) {
+      const editor = typeof node.querySelector === "function" ? node.querySelector('[contenteditable="true"], textarea') : null;
+      if (editor !== null && editor !== void 0) {
+        if (onlyIfFocused && document.activeElement !== editor) return false;
+        if (typeof editor.focus === "function") editor.focus();
+        try {
+          if (editor.isContentEditable === true) {
+            const range = document.createRange();
+            range.selectNodeContents(editor);
+            range.collapse(false);
+            const selection = window.getSelection();
+            if (selection !== null && selection !== void 0) {
+              selection.removeAllRanges();
+              selection.addRange(range);
+            }
+          } else if (typeof editor.setSelectionRange === "function") {
+            const end = String(editor.value ?? "").length;
+            editor.setSelectionRange(end, end);
+          }
+        } catch {
+        }
+        return true;
+      }
+      node = node.parentElement;
+    }
+  } catch {
+  }
+  return false;
+}
 function isUserFacingSkill(skill) {
   const flag = skill?.userInvocable ?? skill?.invocation?.userInvocable;
   return flag !== false;
@@ -26198,9 +26230,12 @@ function groupByPinned(skills, usage, pinned) {
     else rest.push(skill);
   }
   return [
-    { title: "\u{1F4CC} \u7F6E\u9876", items: pinnedList },
-    { title: "\u{1F525} \u6700\u8FD1\u4F7F\u7528", items: recent },
-    { title: "\u{1F5C2}\uFE0F \u5168\u90E8", items: rest }
+    // Plain titles, no emoji: these are section headings, and DSH's own
+    // headings (侧栏的「工作区」/「会话」) are plain text. 国豪: "加图标，那前面
+    // 一团火，这种图标看着不像 DSH 的风格".
+    { title: "\u7F6E\u9876", items: pinnedList },
+    { title: "\u6700\u8FD1\u4F7F\u7528", items: recent },
+    { title: "\u5168\u90E8", items: rest }
   ].filter((group) => group.items.length > 0);
 }
 var pinyinCache = /* @__PURE__ */ new Map();
@@ -26272,10 +26307,10 @@ var buttonStyle = {
   lineHeight: "1",
   flex: "none"
 };
+var FONT_FAMILY = 'var(--dsw-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif)';
 var popoverStyle = {
-  position: "absolute",
-  bottom: "calc(100% + 8px)",
-  right: "0",
+  position: "fixed",
+  right: "24px",
   width: "340px",
   maxHeight: "320px",
   display: "flex",
@@ -26285,20 +26320,34 @@ var popoverStyle = {
   borderRadius: "12px",
   boxShadow: "0 8px 28px rgba(0,0,0,0.35)",
   overflow: "hidden",
-  zIndex: 1e3
+  zIndex: 1e3,
+  fontFamily: FONT_FAMILY,
+  fontSize: "14px",
+  lineHeight: "24px"
 };
 var searchStyle = {
   boxSizing: "border-box",
   width: "calc(100% - 16px)",
+  height: "32px",
+  // The panel is a column flex container with a max-height, so any child that
+  // can shrink will: the field measured 21px instead of the declared height
+  // until this was pinned. The list below is the thing that should scroll.
+  flex: "none",
   margin: "8px",
-  padding: "6px 10px",
-  border: "1px solid var(--dsw-alias-border-l1, rgba(128,128,128,0.3))",
+  padding: "0 10px",
+  border: "1px solid transparent",
   borderRadius: "8px",
   background: "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.1))",
   color: "var(--dsw-alias-label-primary, #e6ebf2)",
-  fontSize: "13px",
+  fontFamily: FONT_FAMILY,
+  fontSize: "14px",
+  lineHeight: "20px",
   outline: "none"
 };
+var searchFocusStyle = {
+  background: "var(--dsw-alias-interactive-bg-active, var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16)))",
+  boxShadow: "0 0 0 1px var(--dsw-alias-border-l2, rgba(128,128,128,0.35))"
+};
 var listStyle = {
   overflowY: "auto",
   flex: "auto",
@@ -26316,15 +26365,22 @@ var itemStyle = {
   background: "transparent",
   color: "var(--dsw-alias-label-primary, #e6ebf2)",
   cursor: "pointer",
-  textAlign: "left"
+  textAlign: "left",
+  // Explicit: a bare <button> keeps the browser's own 13.3333px / Arial.
+  fontFamily: FONT_FAMILY,
+  fontSize: "14px",
+  lineHeight: "22px",
+  fontWeight: 400
 };
 var nameStyle = {
-  fontFamily: "var(--ds-font-family-code, ui-monospace, monospace)",
-  fontSize: "13px",
-  fontWeight: 500
+  fontFamily: FONT_FAMILY,
+  fontSize: "14px",
+  fontWeight: 400,
+  lineHeight: "22px"
 };
 var descStyle = {
   color: "var(--dsw-alias-label-tertiary, #8a94a6)",
+  fontFamily: FONT_FAMILY,
   fontSize: "12px",
   lineHeight: "16px",
   overflow: "hidden",
@@ -26335,20 +26391,9 @@ var descStyle = {
 var statusStyle = {
   padding: "12px",
   color: "var(--dsw-alias-label-tertiary, #8a94a6)",
+  fontFamily: FONT_FAMILY,
   fontSize: "13px"
 };
-var actionSpanStyle = {
-  flex: "none",
-  marginLeft: "6px",
-  padding: "2px 4px",
-  borderRadius: "6px",
-  fontSize: "12px",
-  lineHeight: "16px",
-  cursor: "pointer",
-  color: "var(--dsw-alias-label-tertiary, #8a94a6)",
-  opacity: 0.55,
-  userSelect: "none"
-};
 var noticeStyle = {
   display: "flex",
   alignItems: "center",
@@ -26367,18 +26412,21 @@ var menuStyle = {
   minWidth: "196px",
   padding: "4px",
   borderRadius: "10px",
-  border: "1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,0.24))",
-  background: "var(--dsw-alias-bg-elevated, #23262e)",
+  border: "1px solid var(--dsw-alias-border-l1, rgba(128,128,128,0.35))",
+  background: "var(--dsw-specific-tip, #23262e)",
+  backdropFilter: "blur(8px)",
   boxShadow: "0 8px 28px rgba(0,0,0,0.36)",
-  color: "var(--dsw-alias-label-primary, #e6e9ef)",
-  fontSize: "13px",
+  color: "var(--dsw-alias-label-primary, #e6ebf2)",
+  fontFamily: FONT_FAMILY,
+  fontSize: "14px",
+  lineHeight: "24px",
   userSelect: "none"
 };
 var menuHeaderStyle = {
   padding: "6px 10px 4px",
-  fontSize: "11px",
+  fontSize: "12px",
   color: "var(--dsw-alias-label-tertiary, #8a94a6)",
-  borderBottom: "1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,0.18))",
+  borderBottom: "1px solid var(--dsw-alias-border-l1, rgba(128,128,128,0.28))",
   marginBottom: "4px",
   overflow: "hidden",
   textOverflow: "ellipsis",
@@ -26390,6 +26438,14 @@ var menuItemStyle = {
   cursor: "pointer",
   whiteSpace: "nowrap"
 };
+var menuItemHandlers = {
+  onMouseEnter: (event) => {
+    event.currentTarget.style.background = "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))";
+  },
+  onMouseLeave: (event) => {
+    event.currentTarget.style.background = "transparent";
+  }
+};
 function BoltIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", width: "16", height: "16", "aria-hidden": "true", style: { display: "block" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "dsh-sp-bolt-grad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
@@ -26416,7 +26472,14 @@ function SkillPickerButton(props) {
   const [disabledSkills, setDisabledSkills] = (0, import_react.useState)([]);
   const [busySkill, setBusySkill] = (0, import_react.useState)("");
   const [notice, setNotice] = (0, import_react.useState)(void 0);
+  (0, import_react.useEffect)(() => {
+    if (notice === void 0) return void 0;
+    const timer = window.setTimeout(() => setNotice(void 0), notice.undo === void 0 ? 2600 : 1e4);
+    return () => window.clearTimeout(timer);
+  }, [notice]);
   const [menu, setMenu] = (0, import_react.useState)(void 0);
+  const [view, setView] = (0, import_react.useState)("all");
+  const [searchFocus, setSearchFocus] = (0, import_react.useState)(false);
   const [query, setQuery] = (0, import_react.useState)("");
   const [usage, setUsage] = (0, import_react.useState)(() => loadUsage());
   const [pinned, setPinned] = (0, import_react.useState)(() => loadPinned());
@@ -26424,6 +26487,7 @@ function SkillPickerButton(props) {
   const boxRef = (0, import_react.useRef)(null);
   const itemRefs = (0, import_react.useRef)([]);
   const longPressRef = (0, import_react.useRef)(0);
+  const [panelBottom, setPanelBottom] = (0, import_react.useState)(88);
   (0, import_react.useEffect)(() => {
     const onUsageUpdated = () => setUsage(loadUsage());
     window.addEventListener("dsh-skill-picker:usage-updated", onUsageUpdated);
@@ -26470,7 +26534,8 @@ function SkillPickerButton(props) {
       const res = await fetch(`/dsh-skill-picker/skills${cwd}`, { headers: { accept: "application/json" } });
       const json = await res.json();
       if (!json.ok) throw new Error(json.error || "bad response");
-      setSkills((Array.isArray(json.skills) ? json.skills : []).filter(isUserFacingSkill));
+      const listed = Array.isArray(json.skills) ? json.skills : [];
+      setSkills(listed.filter((skill) => isUserFacingSkill(skill) && skill.disabled !== true));
       setSource("host");
     } catch (cause) {
       setError(String(cause?.message ?? cause));
@@ -26552,8 +26617,15 @@ function SkillPickerButton(props) {
   }, [skills, source]);
   const toggle = () => {
     if (!open) {
+      const el = boxRef.current;
+      if (el !== null) {
+        const rect = el.getBoundingClientRect();
+        setPanelBottom(Math.max(64, Math.round(window.innerHeight - rect.top + 8)));
+      }
       void syncSharedState();
       setUsage(loadUsage());
+      setNotice(void 0);
+      setView("all");
       void load();
       void loadDisabled();
     }
@@ -26577,6 +26649,11 @@ function SkillPickerButton(props) {
     saveUsage(nextUsage);
     setOpen(false);
     setQuery("");
+    const from = boxRef.current;
+    window.requestAnimationFrame(() => {
+      focusComposer(from);
+      window.setTimeout(() => focusComposer(from, true), 60);
+    });
   };
   const togglePin = (name) => {
     const next = pinned.includes(name) ? pinned.filter((n) => n !== name) : [...pinned, name];
@@ -26591,7 +26668,12 @@ function SkillPickerButton(props) {
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  const groups = groupByPinned(skills ?? [], usage, pinned);
+  const disabledNames = new Set(disabledSkills.map((skill) => skill.name));
+  const groups = groupByPinned(
+    (skills ?? []).filter((skill) => !disabledNames.has(skill.name)),
+    usage,
+    pinned
+  );
   const flat = groups.flatMap((group) => group.items);
   const filtered = (() => {
     const q = query.trim().toLowerCase();
@@ -26600,6 +26682,11 @@ function SkillPickerButton(props) {
   })();
   const showTitles = query.trim() === "" && groups.length > 1;
   const filteredNames = new Set(filtered.map((skill) => skill.name));
+  const offFiltered = (() => {
+    const q = query.trim().toLowerCase();
+    if (q === "") return disabledSkills;
+    return disabledSkills.filter((skill) => matchRank(skill, q) < 4);
+  })();
   (0, import_react.useEffect)(() => {
     setActive(0);
   }, [query]);
@@ -26625,291 +26712,277 @@ function SkillPickerButton(props) {
       setOpen(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: boxRef, style: { position: "relative", display: "inline-flex", flex: "none" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        type: "button",
-        onClick: toggle,
-        title: `\u9009\u62E9\u6280\u80FD\uFF08\u63D2\u5165 /\u6280\u80FD\u540D \u5230\u53D1\u9001\u6846\uFF09${source === "host" ? "\u3000\xB7\u3000\u5217\u8868\u6765\u81EA\u672C\u5730\u626B\u63CF" : ""}${slashEnhancementMode() === "runtime" ? "\u3000\xB7\u3000/ \u589E\u5F3A\uFF1A\u8FD0\u884C\u65F6\u63A5\u7BA1" : ""}`,
-        "aria-label": "\u9009\u62E9\u6280\u80FD",
-        style: {
-          ...buttonStyle,
-          ...open ? { color: "var(--dsw-alias-label-primary-bluish, #4cc9f0)" } : {}
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoltIcon, {})
-      }
-    ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: popoverStyle, children: [
+  return (
+    // The marker is how dsh-pocket's mobile "file open guard" learns to leave
+    // this panel alone: its rows are <button>s whose text starts with "/技能名",
+    // which its looksLikeFilePath() reads as a Windows path, so it swallowed the
+    // click and popped "手机上无法直接打开电脑上的文件" (see the pocket patch of
+    // 2026-10-02). Guarded there, marked here.
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: boxRef, "data-dsh-skill-picker": "1", style: { position: "relative", display: "inline-flex", flex: "none" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "input",
+        "button",
         {
-          value: query,
-          onChange: (event) => setQuery(event.target.value),
-          onKeyDown,
-          placeholder: "\u641C\u7D22\u6280\u80FD\u2026\uFF08\u2191\u2193 \u9009\u62E9\uFF0CEnter \u63D2\u5165\uFF09",
-          style: searchStyle,
-          autoFocus: true
+          type: "button",
+          onClick: toggle,
+          title: `\u9009\u62E9\u6280\u80FD\uFF08\u63D2\u5165 /\u6280\u80FD\u540D \u5230\u53D1\u9001\u6846\uFF09${source === "host" ? "\u3000\xB7\u3000\u5217\u8868\u6765\u81EA\u672C\u5730\u626B\u63CF" : ""}${slashEnhancementMode() === "runtime" ? "\u3000\xB7\u3000/ \u589E\u5F3A\uFF1A\u8FD0\u884C\u65F6\u63A5\u7BA1" : ""}`,
+          "aria-label": "\u9009\u62E9\u6280\u80FD",
+          style: {
+            ...buttonStyle,
+            ...open ? { color: "var(--dsw-alias-label-primary-bluish, #4cc9f0)" } : {}
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoltIcon, {})
         }
       ),
-      error !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: statusStyle, children: `\u52A0\u8F7D\u5931\u8D25\uFF1A${error}` }) : skills === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: statusStyle, children: "\u52A0\u8F7D\u4E2D\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: listStyle, children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: statusStyle, children: "\u6CA1\u6709\u5339\u914D\u7684\u6280\u80FD" }) : (() => {
-          let itemIndex = 0;
-          const renderItem = (skill, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            "button",
+      open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...popoverStyle, bottom: `${panelBottom}px` }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            value: query,
+            onChange: (event) => setQuery(event.target.value),
+            onKeyDown,
+            onFocus: () => setSearchFocus(true),
+            onBlur: () => setSearchFocus(false),
+            placeholder: "\u641C\u7D22\u6280\u80FD\u2026\uFF08\u2191\u2193 \u9009\u62E9\uFF0CEnter \u63D2\u5165\uFF09",
+            style: { ...searchStyle, ...searchFocus ? searchFocusStyle : {} },
+            autoFocus: true
+          }
+        ),
+        error !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: statusStyle, children: `\u52A0\u8F7D\u5931\u8D25\uFF1A${error}` }) : skills === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: statusStyle, children: "\u52A0\u8F7D\u4E2D\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: listStyle, children: view === "off" ? offFiltered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: statusStyle, children: query.trim() === "" ? "\u6CA1\u6709\u88AB\u5173\u95ED\u7684\u6280\u80FD" : "\u6CA1\u6709\u5339\u914D\u7684\u5DF2\u5173\u95ED\u6280\u80FD" }) : offFiltered.map((skill) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
             {
-              type: "button",
-              ref: (el) => {
-                itemRefs.current[index] = el;
-              },
-              onClick: () => pick(skill.name),
               onContextMenu: (event) => {
                 event.preventDefault();
                 event.stopPropagation();
-                openMenu(event, skill, false);
+                openMenu(event, skill, true);
               },
               onTouchStart: (event) => {
                 const touch = event.touches?.[0];
                 if (touch === void 0) return;
                 longPressRef.current = window.setTimeout(
-                  () => openMenu({ clientX: touch.clientX, clientY: touch.clientY }, skill, false),
+                  () => openMenu({ clientX: touch.clientX, clientY: touch.clientY }, skill, true),
                   500
                 );
               },
               onTouchEnd: () => window.clearTimeout(longPressRef.current),
               onTouchMove: () => window.clearTimeout(longPressRef.current),
-              onMouseEnter: (event) => {
-                setActive(index);
-                event.currentTarget.style.background = "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.12))";
-              },
-              onMouseLeave: (event) => {
-                event.currentTarget.style.background = "transparent";
+              style: { ...itemStyle, flexDirection: "column", alignItems: "flex-start", opacity: 0.6 },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: nameStyle, children: `/${skill.name}` }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: descStyle, children: skill.description ?? "" })
+              ]
+            },
+            `off-${skill.name}`
+          )) : filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: statusStyle, children: "\u6CA1\u6709\u5339\u914D\u7684\u6280\u80FD" }) : (() => {
+            let itemIndex = 0;
+            const renderItem = (skill, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                ref: (el) => {
+                  itemRefs.current[index] = el;
+                },
+                onClick: () => pick(skill.name),
+                onContextMenu: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  openMenu(event, skill, false);
+                },
+                onTouchStart: (event) => {
+                  const touch = event.touches?.[0];
+                  if (touch === void 0) return;
+                  longPressRef.current = window.setTimeout(
+                    () => openMenu({ clientX: touch.clientX, clientY: touch.clientY }, skill, false),
+                    500
+                  );
+                },
+                onTouchEnd: () => window.clearTimeout(longPressRef.current),
+                onTouchMove: () => window.clearTimeout(longPressRef.current),
+                onMouseEnter: (event) => {
+                  setActive(index);
+                  event.currentTarget.style.background = "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.12))";
+                },
+                onMouseLeave: (event) => {
+                  event.currentTarget.style.background = "transparent";
+                },
+                style: {
+                  ...itemStyle,
+                  flexDirection: "row",
+                  alignItems: "center",
+                  ...index === active ? { background: "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.12))" } : {}
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "2px", flex: "1", minWidth: "0" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: nameStyle, children: `/${skill.name}` }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: descStyle, children: skill.description ?? "" })
+                ] })
               },
+              skill.name
+            );
+            if (!showTitles) {
+              return filtered.map((skill) => renderItem(skill, itemIndex++));
+            }
+            return groups.map((group) => {
+              const items = group.items.filter((skill) => filteredNames.has(skill.name));
+              if (items.length === 0) return null;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      padding: "6px 10px 2px",
+                      color: "var(--dsw-alias-label-tertiary, #8a94a6)",
+                      // Measured against DSH's own sidebar heading
+                      // (「工作区」): it is 14px / weight 400 / normal
+                      // letter-spacing. Mine had been 11px / 600 / 0.04em,
+                      // which is exactly what made it look foreign.
+                      fontSize: "14px",
+                      fontWeight: 400,
+                      letterSpacing: "normal",
+                      lineHeight: "24px"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: group.title }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { opacity: 0.7 }, children: items.length })
+                    ]
+                  }
+                ),
+                items.map((skill) => renderItem(skill, itemIndex++))
+              ] }, group.title);
+            });
+          })() }),
+          notice !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: noticeStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flex: "1", color: notice.kind === "err" ? "var(--dsw-alias-label-error, #ff7b72)" : void 0 }, children: notice.text }),
+            typeof notice.undo === "string" && notice.undo !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                role: "button",
+                tabIndex: -1,
+                onClick: () => void undoUninstall(notice.undo),
+                style: { cursor: "pointer", textDecoration: "underline", flex: "none" },
+                children: "\u64A4\u56DE"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
               style: {
-                ...itemStyle,
-                flexDirection: "row",
+                display: "flex",
                 alignItems: "center",
-                ...index === active ? { background: "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.12))" } : {}
+                justifyContent: "flex-end",
+                gap: "8px",
+                margin: "0 12px 8px 16px",
+                fontSize: "12px",
+                lineHeight: "18px",
+                color: "var(--dsw-alias-label-tertiary, #8a94a6)"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "2px", flex: "1", minWidth: "0" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: nameStyle, children: `/${skill.name}` }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: descStyle, children: skill.description ?? "" })
-                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { minWidth: "0", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: view === "off" ? "\u53F3\u952E\u53EF\u5F00\u542F \xB7 \u624B\u673A\u957F\u6309" : "\u53F3\u952E\u53EF\u7BA1\u7406 \xB7 \u624B\u673A\u957F\u6309" }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "span",
                   {
                     role: "button",
                     tabIndex: -1,
-                    title: pinned.includes(skill.name) ? "\u53D6\u6D88\u7F6E\u9876" : "\u7F6E\u9876\u5230\u5217\u8868\u9876\u90E8",
-                    "aria-label": pinned.includes(skill.name) ? "\u53D6\u6D88\u7F6E\u9876" : "\u7F6E\u9876",
-                    onClick: (event) => {
-                      event.stopPropagation();
-                      togglePin(skill.name);
+                    title: view === "off" ? "\u56DE\u5230\u5168\u90E8\u6280\u80FD" : "\u67E5\u770B\u88AB\u5173\u95ED\u7684\u6280\u80FD",
+                    onClick: () => {
+                      setView(view === "off" ? "all" : "off");
+                      setQuery("");
                     },
                     style: {
                       flex: "none",
-                      marginLeft: "6px",
-                      padding: "2px 4px",
-                      borderRadius: "6px",
-                      fontSize: "12px",
-                      lineHeight: "16px",
+                      marginLeft: "auto",
+                      padding: "2px 8px",
+                      borderRadius: "999px",
+                      border: "1px solid var(--dsw-alias-border-l1, rgba(128,128,128,0.35))",
                       cursor: "pointer",
-                      color: pinned.includes(skill.name) ? "var(--dsw-alias-label-primary-bluish, #4cc9f0)" : "var(--dsw-alias-label-tertiary, #8a94a6)",
-                      opacity: pinned.includes(skill.name) ? 1 : 0.55,
-                      userSelect: "none"
+                      whiteSpace: "nowrap"
                     },
-                    children: pinned.includes(skill.name) ? "\u{1F4CC}" : "\u{1F4CD}"
+                    children: view === "off" ? "\u2190 \u5168\u90E8\u6280\u80FD" : `\u5DF2\u5173\u95ED ${disabledSkills.length}`
                   }
                 )
               ]
-            },
-            skill.name
-          );
-          if (!showTitles) {
-            return filtered.map((skill) => renderItem(skill, itemIndex++));
-          }
-          return groups.map((group) => {
-            const items = group.items.filter((skill) => filteredNames.has(skill.name));
-            if (items.length === 0) return null;
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    padding: "6px 10px 2px",
-                    color: "var(--dsw-alias-label-tertiary, #8a94a6)",
-                    fontSize: "11px",
-                    fontWeight: 600,
-                    letterSpacing: "0.04em"
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: group.title }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { opacity: 0.7 }, children: items.length })
-                  ]
-                }
-              ),
-              items.map((skill) => renderItem(skill, itemIndex++))
-            ] }, group.title);
-          });
-        })() }),
-        notice !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: noticeStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flex: "1", color: notice.kind === "err" ? "var(--dsw-alias-label-error, #ff7b72)" : void 0 }, children: notice.text }),
-          typeof notice.undo === "string" && notice.undo !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "span",
-            {
-              role: "button",
-              tabIndex: -1,
-              onClick: () => void undoUninstall(notice.undo),
-              style: { cursor: "pointer", textDecoration: "underline", flex: "none" },
-              children: "\u64A4\u56DE"
-            }
-          )
-        ] }),
-        disabledSkills.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: "4px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                padding: "6px 10px 2px",
-                color: "var(--dsw-alias-label-tertiary, #8a94a6)",
-                fontSize: "11px",
-                fontWeight: 600,
-                letterSpacing: "0.04em"
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u23FB \u5DF2\u5173\u95ED" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { opacity: 0.7 }, children: disabledSkills.length })
-              ]
             }
           ),
-          disabledSkills.map((skill) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          menu !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             "div",
             {
-              onContextMenu: (event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                openMenu(event, skill, true);
-              },
-              style: {
-                ...itemStyle,
-                flexDirection: "row",
-                alignItems: "center",
-                opacity: 0.55
-              },
+              style: { ...menuStyle, left: `${menu.x}px`, top: `${menu.y}px` },
+              onPointerDown: (event) => event.stopPropagation(),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "2px", flex: "1", minWidth: "0" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: nameStyle, children: `/${skill.name}` }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: descStyle, children: skill.description ?? "" })
-                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: menuHeaderStyle, children: `/${menu.skill.name}` }),
+                !menu.disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    style: menuItemStyle,
+                    role: "button",
+                    tabIndex: -1,
+                    ...menuItemHandlers,
+                    onClick: () => {
+                      setMenu(void 0);
+                      togglePin(menu.skill.name);
+                    },
+                    children: pinned.includes(menu.skill.name) ? "\u53D6\u6D88\u7F6E\u9876" : "\u7F6E\u9876\u5230\u9876\u90E8"
+                  }
+                ),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "span",
+                  "div",
                   {
+                    style: menuItemStyle,
                     role: "button",
                     tabIndex: -1,
-                    title: "\u91CD\u65B0\u5F00\u542F\uFF08\u628A SKILL.md.disabled \u6539\u56DE SKILL.md\uFF09",
-                    "aria-label": "\u91CD\u65B0\u5F00\u542F",
-                    onClick: () => void runSkillOp("enable", skill),
-                    style: actionSpanStyle,
-                    children: busySkill === skill.name ? "\u2026" : "\u23FB \u5F00\u542F"
+                    ...menuItemHandlers,
+                    onClick: () => {
+                      const target = menu.skill;
+                      const turningOff = !menu.disabled;
+                      setMenu(void 0);
+                      void runSkillOp(turningOff ? "disable" : "enable", target);
+                    },
+                    children: menu.disabled ? "\u5F00\u542F" : "\u5173\u95ED\uFF08agent \u4E5F\u4E0D\u518D\u52A0\u8F7D\uFF09"
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "span",
+                  "div",
                   {
+                    style: menuItemStyle,
                     role: "button",
                     tabIndex: -1,
-                    title: "\u5728\u6587\u4EF6\u7BA1\u7406\u5668\u4E2D\u5B9A\u4F4D",
-                    "aria-label": "\u5728\u6587\u4EF6\u7BA1\u7406\u5668\u4E2D\u5B9A\u4F4D",
-                    onClick: () => void runSkillOp("reveal", skill),
-                    style: actionSpanStyle,
-                    children: "\u{1F4C2}"
+                    ...menuItemHandlers,
+                    onClick: () => {
+                      const target = menu.skill;
+                      setMenu(void 0);
+                      void runSkillOp("reveal", target);
+                    },
+                    children: "\u5728\u6587\u4EF6\u7BA1\u7406\u5668\u4E2D\u5B9A\u4F4D"
                   }
-                )
-              ]
-            },
-            `off-${skill.name}`
-          ))
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { margin: "0 10px 8px", fontSize: "11px", color: "var(--dsw-alias-label-tertiary, #8a94a6)" }, children: "\u53F3\u952E\u6280\u80FD = \u7F6E\u9876 / \u5173\u95ED / \u5B9A\u4F4D / \u5378\u8F7D\uFF08\u624B\u673A\u957F\u6309\uFF09" }),
-        menu !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
-          {
-            style: { ...menuStyle, left: `${menu.x}px`, top: `${menu.y}px` },
-            onPointerDown: (event) => event.stopPropagation(),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: menuHeaderStyle, children: `/${menu.skill.name}` }),
-              !menu.disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "div",
-                {
-                  style: menuItemStyle,
-                  role: "button",
-                  tabIndex: -1,
-                  onClick: () => {
-                    setMenu(void 0);
-                    togglePin(menu.skill.name);
-                  },
-                  children: pinned.includes(menu.skill.name) ? "\u{1F4CC} \u53D6\u6D88\u7F6E\u9876" : "\u{1F4CC} \u7F6E\u9876\u5230\u9876\u90E8"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "div",
-                {
-                  style: menuItemStyle,
-                  role: "button",
-                  tabIndex: -1,
-                  onClick: () => {
-                    const target = menu.skill;
-                    const turningOff = !menu.disabled;
-                    setMenu(void 0);
-                    void runSkillOp(turningOff ? "disable" : "enable", target);
-                  },
-                  children: menu.disabled ? "\u23FB \u5F00\u542F" : "\u23FB \u5173\u95ED\uFF08agent \u4E5F\u4E0D\u518D\u52A0\u8F7D\uFF09"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "div",
-                {
-                  style: menuItemStyle,
-                  role: "button",
-                  tabIndex: -1,
-                  onClick: () => {
-                    const target = menu.skill;
-                    setMenu(void 0);
-                    void runSkillOp("reveal", target);
-                  },
-                  children: "\u{1F4C2} \u5728\u6587\u4EF6\u7BA1\u7406\u5668\u4E2D\u5B9A\u4F4D"
-                }
-              ),
-              !menu.disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "div",
-                {
-                  style: { ...menuItemStyle, color: "var(--dsw-alias-label-error, #ff7b72)" },
-                  role: "button",
-                  tabIndex: -1,
-                  onClick: () => {
-                    const target = menu.skill;
-                    setMenu(void 0);
-                    if (!window.confirm(`\u5378\u8F7D /${target.name}\uFF1F
+                ),
+                !menu.disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    style: { ...menuItemStyle, color: "var(--dsw-alias-label-error, #e5534b)" },
+                    role: "button",
+                    tabIndex: -1,
+                    ...menuItemHandlers,
+                    onClick: () => {
+                      const target = menu.skill;
+                      setMenu(void 0);
+                      if (!window.confirm(`\u5378\u8F7D /${target.name}\uFF1F
 
 \u5B83\u4F1A\u88AB\u79FB\u8FDB\u5907\u4EFD\u76EE\u5F55\uFF08\u4E0D\u662F\u5220\u9664\uFF09\uFF0C\u9762\u677F\u91CC\u53EF\u4EE5\u64A4\u56DE\u3002`)) return;
-                    void runSkillOp("uninstall", target);
-                  },
-                  children: "\u{1F5D1} \u5378\u8F7D\uFF08\u79FB\u5165\u5907\u4EFD\uFF0C\u53EF\u64A4\u56DE\uFF09"
-                }
-              )
-            ]
-          }
-        )
+                      void runSkillOp("uninstall", target);
+                    },
+                    children: "\u5378\u8F7D\uFF08\u79FB\u5165\u5907\u4EFD\uFF0C\u53EF\u64A4\u56DE\uFF09"
+                  }
+                )
+              ]
+            }
+          )
+        ] })
       ] })
     ] })
-  ] });
+  );
 }
 function apply(ctx) {
   void syncSharedState();