dsh-skill-picker 0.4.0 → 0.5.4

package/README.md

@@ -17,7 +17,7 @@ DSH Web GUI 的技能选择器：在输入框（composer）工具行右侧加一
 
 English: A skill picker for the DSH Web GUI — a button in the composer's right tool row opens a searchable list of installed skills; picking one inserts the official `/skill-name` gesture into the draft, so DSH's native user-invocation path loads the skill with your message.
 
-当前版本：**v0.3.2**（`/` 补全 + ⚡ 面板均支持**拼音搜索**）
+当前版本：**v0.5.2**（⚡ 面板**置顶分组** + `/` 补全**自动增强补丁** + 拼音搜索）
 
 ## 为什么用它（vs 官方 `/` 补全）
 
@@ -104,19 +104,21 @@ DSH 的 [dsh-tool-skill](https://github.com/deepseek-ai/deepseek-harness) 在 `a
 
 **v0.2.0–0.3.4**：插件注册了一个独立的 `/` 候选源（`skill-fuzzy`），与官方 ui-skill 源**并列**——菜单里出现两个技能分组，搜索行为相互独立（冲突风险、视觉重复）。
 
-**v0.4.0 起**：**不再注册平行源**。改为给官方 `@deepseek-ai/dsh-client-ui-skill` 包的 candidates **打补丁**——其候选逻辑从 `skill.name.startsWith(query)`（前缀匹配）换成调用插件注入的全局函数 `window.__dshSkillPickerFuzzy`（fuzzysort 模糊 + pinyin-pro 拼音 + 最近/常用排行，与 ⚡ 面板同一套规则）。
+**v0.4.0 起**：**不再注册平行源**。改为给官方 `@deepseek-ai/dsh-client-ui-skill` 包的 candidates **打补丁**——其候选逻辑从 `skill.name.startsWith(query)`（前缀匹配）换成调用插件注入的全局函数 `window.__dshSkillPickerFuzzy`（fuzzysort 模糊 + pinyin-pro 拼音 + 最近/常用排行，与 ⚡ 面板同一套规则）。**v0.5.1 起，补丁由 host 端每次启动自动应用**（另加 `order: 2→-1`：技能组排在命令组之上），首次修改前自动备份 `.bak`，DSH 升级覆盖官方包后自动重打——**安装插件即生效，无需手动操作**。
 
-**效果**：官方「技能」分组**仍是唯一一个 `/` 技能列表**（官方规则全部保留：`userInvocable` 区分、菜单文案、排序基础），只是匹配行为被升级；插件不再产生第二列表。
+**效果**：官方「技能」分组**仍是唯一一个 `/` 技能列表**（官方规则全部保留：`userInvocable` 区分、菜单文案、排序基础），只是匹配行为被升级、分组排序被前移；插件不再产生第二列表。
 
-**Patch 部署姿势**（本机 `profiles/web/local/`，与其它 patch 插件同款）：
-1. 把官方包拷到 `profiles/web/local/dsh-client-ui-skill/`（`lib/client.js` 改 candidates 为 `window.__dshSkillPickerFuzzy` 优先，`startsWith` 兜底）
-2. profile package.json 加依赖 `"@deepseek-ai/dsh-client-ui-skill": "link:C:/Users/<user>/.dsh/profiles/web/local/dsh-client-ui-skill"`
-3. `pnpm install` 后重启 DSH
-
-> 官方 DSH 升级后（如 alpha.6），若 ui-skill 包变动：重拷新包覆盖 local 副本、重打补丁即可；插件本身逻辑不变。
+> 手动兜底（旧流程，一般不需要）：把官方包拷到 `profiles/web/local/dsh-client-ui-skill/`（`lib/client.js` 改 candidates 为 `window.__dshSkillPickerFuzzy` 优先、`order` 改 `-1`），profile package.json 加依赖 `"@deepseek-ai/dsh-client-ui-skill": "link:C:/Users/<user>/.dsh/profiles/web/local/dsh-client-ui-skill"`，`pnpm install` 后重启 DSH。自动补丁对 local 副本与 npm 安装两种形态都适用，升级后自愈，无需重复手动操作。
 
 ## 更新日志
 
+- **v0.5.4**：**斜杠选技能后 ⚡ 面板同步变「最近使用」**——修复双列表状态不同步：斜杠路径的 usage 记录此前只写 localStorage、面板组件不会刷新（React state 挂载后不再重读），现在 trackPick 写入后会广播 `usage-updated` 事件，⚡ 面板实时重读；面板每次打开时也强制刷新 usage。两条路径的选择现在**双向同步**
+- **v0.5.3**：**官方 `/` 列表与 ⚡ 面板排序同步**——搜索时 fuzzysort 只决定「哪些技能入围」，入围后的显示顺序统一按 ⚡ 面板规则（置顶 → 最近使用 → 常用 → 其余）；之前 `/` 列表按匹配分数排序、⚡ 面板按使用记录排序，同一技能在两个列表的相对位置不一致；候选上限 12 → 30
+- **v0.5.2**：**官方 `/` 菜单选技能也记录使用记录**——自愈补丁新增第三个 patch（`pick-tracking`）：官方 ui-skill 的 `onPick` 会调用插件的 `window.__dshSkillPickerTrack`，斜杠选中的技能与 ⚡ 面板点选一样进入「最近使用」排序（之前只有按钮路径记账，斜杠路径不记账）
+- **v0.5.1**：**host 端自愈补丁**——每次 DSH 启动自动扫描所有 profile 的官方 `ui-skill` 包（local 副本或 npm 安装），自动应用两个升级补丁（`order: 2→-1` 技能组排到命令组之上；candidates 前缀匹配→模糊+拼音匹配），首次修改前自动备份 `.bak`，幂等且 DSH 升级覆盖官方包后自动重打。安装本插件即可获得官方 `/` 补全的完整增强，无需手动改文件（旧版 v0.4.0 的手动 patch 流程退役）
+- **v0.5.0**：**⚡ 面板置顶分组 + 修复 alpha.5 草稿丢失 bug**
+  - 新增**手动置顶**：面板按「📌 置顶 → 🔥 最近使用 → 🗂️ 全部」分组展示（浏览时显示分组标题，搜索时折叠为置顶优先的单一列表）；每条技能右侧 📍 按钮一键置顶/取消，置顶顺序固定、持久化到 localStorage；`/` 补全候选同步置顶优先
+  - **修复严重 bug**：DSH alpha.5 重构后 `conversation.input.right` 插槽不再提供 `input` 快照，点选技能时误走「事件回调内调用 `useInput` hook」分支（违反 React 规则，抛错被吞 → 草稿读空 → **覆盖用户已输入的内容**）。改为渲染期把最新草稿同步到 ref，点击回调只读 ref——追加永远基于真实草稿
 - **v0.4.0**：**单列表模糊搜索**——不再注册独立 `/` 候选源，改为 patch 官方 ui-skill 的 candidates（模糊+拼音注入，官方列表是唯一来源，无并列列表、无搜索冲突）；实测 `/jiyi` → 官方「技能」组 backup-memory 排第一
 - **v0.3.4**：适配 DSH 0.1.2-alpha.5 —— 技能列表改用官方 `remote.skills` RPC（alpha.5 将 rc.x 的 `connection.api.skills` 改名），`/` 补全与 ⚡ 面板统一「官方 RPC → host 扫描兜底」；`dsh.client.inject` 声明 `dsh-client-ui-input-trigger`（alpha.5 装载器只给声明了提供者的插件暴露 `inputTriggers` 服务）。修复 alpha.5 下 `/` 模糊/拼音搜索失效（实测 `/jiyi` → backup-memory）
 - **v0.3.3**：兜底扫描对齐官方全部技能根——补扫 user-agents 层（`~/.agents/skills`，含 `DSH_AGENTS_HOME`），扫描顺序与官方 rank 一致（项目级优先于用户级）；走兜底时 ⚡ 面板显示「本地扫描」来源徽标便于排障（对应 issue #5）

package/lib/client.js

@@ -25766,6 +25766,23 @@ function pinyin(word, options) {
 var import_jsx_runtime = require("react/jsx-runtime");
 var inject = ["slots", "connection", "sessions", "inputTriggers"];
 var USAGE_KEY = "dsh-skill-picker:usage";
+var PINNED_KEY = "dsh-skill-picker:pinned";
+function loadPinned() {
+  try {
+    const raw = localStorage.getItem(PINNED_KEY);
+    if (raw === null) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed.filter((name) => typeof name === "string") : [];
+  } catch {
+    return [];
+  }
+}
+function savePinned(pinned) {
+  try {
+    localStorage.setItem(PINNED_KEY, JSON.stringify(pinned));
+  } catch {
+  }
+}
 function loadUsage() {
   try {
     const raw = localStorage.getItem(USAGE_KEY);
@@ -25795,6 +25812,23 @@ function rankByUsage(skills, usage) {
     return a.name.localeCompare(b.name);
   });
 }
+function groupByPinned(skills, usage, pinned) {
+  const pinnedSet = new Set(pinned);
+  const pinnedList = pinned.map((name) => skills.find((s) => s.name === name)).filter(Boolean);
+  const ranked = rankByUsage(skills, usage);
+  const recent = [];
+  const rest = [];
+  for (const skill of ranked) {
+    if (pinnedSet.has(skill.name)) continue;
+    if (usage[skill.name] !== void 0) recent.push(skill);
+    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 }
+  ].filter((group) => group.items.length > 0);
+}
 var pinyinCache = /* @__PURE__ */ new Map();
 function skillPinyinText(name, description = "") {
   const key = `${name}\0${description}`;
@@ -25942,9 +25976,25 @@ function SkillPickerButton(props) {
   const [source, setSource] = (0, import_react.useState)(void 0);
   const [query, setQuery] = (0, import_react.useState)("");
   const [usage, setUsage] = (0, import_react.useState)(() => loadUsage());
+  const [pinned, setPinned] = (0, import_react.useState)(() => loadPinned());
   const [active, setActive] = (0, import_react.useState)(0);
   const boxRef = (0, import_react.useRef)(null);
   const itemRefs = (0, import_react.useRef)([]);
+  (0, import_react.useEffect)(() => {
+    const onUsageUpdated = () => setUsage(loadUsage());
+    window.addEventListener("dsh-skill-picker:usage-updated", onUsageUpdated);
+    return () => window.removeEventListener("dsh-skill-picker:usage-updated", onUsageUpdated);
+  }, []);
+  const draftRef = (0, import_react.useRef)("");
+  if (typeof props.useInput === "function") {
+    try {
+      const state = props.useInput((s) => s);
+      if (state !== void 0 && typeof state.draft === "string") draftRef.current = state.draft;
+    } catch {
+    }
+  } else if (props.input !== void 0 && typeof props.input.draft === "string") {
+    draftRef.current = props.input.draft;
+  }
   const load = (0, import_react.useCallback)(async () => {
     if (skills !== void 0 || error !== void 0) return;
     try {
@@ -25969,21 +26019,14 @@ function SkillPickerButton(props) {
     }
   }, [skills, error, props.listSkills, props.session, props.cwd]);
   const toggle = () => {
-    if (!open) void load();
+    if (!open) {
+      setUsage(loadUsage());
+      void load();
+    }
     setOpen(!open);
   };
   const pick = (name) => {
-    let draft = "";
-    try {
-      if (props.input !== void 0 && typeof props.input.draft === "string") {
-        draft = props.input.draft;
-      } else if (typeof props.useInput === "function") {
-        const state = props.useInput((s) => s);
-        if (state !== void 0 && typeof state.draft === "string") draft = state.draft;
-      }
-    } catch (cause) {
-      console.error("[dsh-skill-picker] reading draft failed:", cause);
-    }
+    const draft = draftRef.current;
     const separator = draft === "" || draft.endsWith(" ") || draft.endsWith("\n") ? "" : " ";
     const next = `${draft}${separator}/${name} `;
     try {
@@ -26001,6 +26044,11 @@ function SkillPickerButton(props) {
     setOpen(false);
     setQuery("");
   };
+  const togglePin = (name) => {
+    const next = pinned.includes(name) ? pinned.filter((n) => n !== name) : [...pinned, name];
+    setPinned(next);
+    savePinned(next);
+  };
   (0, import_react.useEffect)(() => {
     if (!open) return;
     const onDown = (event) => {
@@ -26009,12 +26057,15 @@ function SkillPickerButton(props) {
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  const ordered = rankByUsage(skills ?? [], usage);
-  const filtered = ordered.filter((skill) => {
+  const groups = groupByPinned(skills ?? [], usage, pinned);
+  const flat = groups.flatMap((group) => group.items);
+  const filtered = flat.filter((skill) => {
     const q = query.trim().toLowerCase();
     if (q === "") return true;
     return skill.name.toLowerCase().includes(q) || String(skill.description ?? "").toLowerCase().includes(q) || skillPinyinText(skill.name, skill.description ?? "").toLowerCase().includes(q);
   }).slice(0, 60);
+  const showTitles = query.trim() === "" && groups.length > 1;
+  const filteredNames = new Set(filtered.map((skill) => skill.name));
   (0, import_react.useEffect)(() => {
     setActive(0);
   }, [query]);
@@ -26068,32 +26119,94 @@ function SkillPickerButton(props) {
         }
       ),
       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" }) : filtered.map((skill, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "button",
-          {
-            type: "button",
-            ref: (el) => {
-              itemRefs.current[index] = el;
+        /* @__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",
+            {
+              type: "button",
+              ref: (el) => {
+                itemRefs.current[index] = el;
+              },
+              onClick: () => pick(skill.name),
+              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 ?? "" })
+                ] }),
+                /* @__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);
+                    },
+                    style: {
+                      flex: "none",
+                      marginLeft: "6px",
+                      padding: "2px 4px",
+                      borderRadius: "6px",
+                      fontSize: "12px",
+                      lineHeight: "16px",
+                      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"
+                    },
+                    children: pinned.includes(skill.name) ? "\u{1F4CC}" : "\u{1F4CD}"
+                  }
+                )
+              ]
             },
-            onClick: () => pick(skill.name),
-            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,
-              ...index === active ? { background: "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.12))" } : {}
-            },
-            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
-        )) }),
+            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);
+          });
+        })() }),
         source === "host" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: sourceBadgeStyle, title: "\u5B98\u65B9\u6280\u80FD API \u4E0D\u53EF\u7528\uFF0C\u5217\u8868\u6765\u81EA\u672C\u5730\u76EE\u5F55\u626B\u63CF\uFF08\u4E0E\u5B98\u65B9 / \u8865\u5168\u540C\u6E90\uFF09", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: sourceBadgeTextStyle, children: "\u672C\u5730\u626B\u63CF" }) })
       ] })
     ] })
@@ -26142,23 +26255,35 @@ function apply(ctx) {
   }, "dsh-skill-picker: composer input slot");
   ctx.effect(() => {
     const fuzzyMatch = (skills, query = "") => {
-      const ordered = rankByUsage(skills, loadUsage());
+      const ordered = groupByPinned(skills, loadUsage(), loadPinned()).flatMap((group) => group.items);
       const q = String(query).trim().toLowerCase();
       if (q === "") return ordered;
+      const rankByName = new Map(ordered.map((skill, index) => [skill.name, index]));
       const targets = ordered.map((s) => ({
         s,
         search: `${s.name} ${s.description ?? ""} ${skillPinyinText(s.name, s.description ?? "")}`
       }));
       const results = fuzzysort_default.go(q, targets, {
         key: "search",
-        limit: 12,
+        limit: 30,
         threshold: -1e4
       });
-      return results.filter((r) => r.score > 0).map((r) => r.obj.s);
+      return results.filter((r) => r.score > 0).map((r) => r.obj.s).sort((a, b) => (rankByName.get(a.name) ?? 0) - (rankByName.get(b.name) ?? 0));
     };
     window.__dshSkillPickerFuzzy = fuzzyMatch;
+    const trackPick = (name) => {
+      const usage = loadUsage();
+      const nextUsage = { ...usage, [name]: { count: (usage[name]?.count ?? 0) + 1, lastUsed: Date.now() } };
+      saveUsage(nextUsage);
+      try {
+        window.dispatchEvent(new CustomEvent("dsh-skill-picker:usage-updated"));
+      } catch {
+      }
+    };
+    window.__dshSkillPickerTrack = trackPick;
     return () => {
       if (window.__dshSkillPickerFuzzy === fuzzyMatch) delete window.__dshSkillPickerFuzzy;
+      if (window.__dshSkillPickerTrack === trackPick) delete window.__dshSkillPickerTrack;
     };
   }, "dsh-skill-picker: fuzzy matcher for official / source");
 }