dsh-skill-picker 0.2.0 → 0.2.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-skill-picker",
   "description": "DSH Web GUI skill picker: a button beside the composer opens a searchable list of installed skills; picking one inserts the official `/skill-name` gesture into the input box, so the skill loads with your message (WorkBuddy-style skill invocation for DeepSeek Harness).",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "main": "lib/index.js",
   "exports": {
@@ -13,7 +13,8 @@
     "build": "node build.mjs"
   },
   "devDependencies": {
-    "esbuild": "^0.25.0"
+    "esbuild": "^0.25.0",
+    "fuzzysort": "^4.0.2"
   },
   "dsh": {
     "bundle": {
@@ -25,16 +26,29 @@
         "@deepseek-ai/dsh-client-locale"
       ],
       "platform": "web"
+    },
+    "compatibility": {
+      "dshReleases": {
+        "0.1.1-rc.1": "unknown",
+        "0.1.1-rc.2": "compatible",
+        "0.1.2-alpha.2": "compatible",
+        "0.1.2-alpha.3": "compatible",
+        "0.1.2-alpha.4": "compatible",
+        "0.1.2-alpha.5": "compatible"
+      }
     }
   },
+  "engines": {
+    "node": ">=22"
+  },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
     "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.6",
     "@deepseek-ai/dsh-skill": "^0.1.0-rc.6",
     "@deepseek-ai/dsh-system-prompt": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
     "react": "^18.2.0"
   },
   "files": [
@@ -47,5 +61,8 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/a735624258/dsh-skill-picker.git"
+  },
+  "dependencies": {
+    "pinyin-pro": "^3.29.3"
   }
 }

package/src/client/index.jsx

@@ -16,6 +16,8 @@
  */
 
 import React, { useCallback, useEffect, useRef, useState } from 'react'
+import fuzzysort from 'fuzzysort'
+import { pinyin } from 'pinyin-pro'
 
 /** Required services: slot registry, host connection (official skills API), sessions (workspace cwd fallback), input triggers (/ fuzzy source). */
 export const inject = ['slots', 'connection', 'sessions', 'inputTriggers']
@@ -44,13 +46,64 @@ function saveUsage(usage) {
   }
 }
 
+/**
+ * Shared usage ordering — the single rule used by BOTH the ⚡ panel and the
+ * `/` completion: last picked first, then most frequent, then by name.
+ * A fresh copy is returned; the input array is untouched.
+ */
+function rankByUsage(skills, usage) {
+  return skills.slice().sort((a, b) => {
+    const ua = usage[a.name]
+    const ub = usage[b.name]
+    const la = ua?.lastUsed ?? 0
+    const lb = ub?.lastUsed ?? 0
+    if (la !== lb) return lb - la
+    const ca = ua?.count ?? 0
+    const cb = ub?.count ?? 0
+    if (ca !== cb) return cb - ca
+    return a.name.localeCompare(b.name)
+  })
+}
+
+/**
+ * Pinyin search text for a skill name/description: spaced full pinyin
+ * (`ji yi`), joined (`jiyi`), and initials (`jy`) for the name, plus joined
+ * full pinyin and initials for the description — so either the `/` fuzzy
+ * completion or the ⚡ panel matches queries like `ji yi`, `jiyi`, or `jy`
+ * against 记忆/知识库/每日打卡-ish Chinese text. Cached per (name, desc)
+ * pair; never throws (falls back to '').
+ */
+const pinyinCache = new Map()
+function skillPinyinText(name, description = '') {
+  const key = `${name}\u0000${description}`
+  const cached = pinyinCache.get(key)
+  if (cached !== undefined) return cached
+  let text = ''
+  try {
+    const base = { toneType: 'none', nonZh: 'consecutive' }
+    const nameSpaced = pinyin(name, base)
+    const nameJoined = pinyin(name, { ...base, separator: '' })
+    const nameFirstSpaced = pinyin(name, { ...base, pattern: 'first' })
+    const nameFirstJoined = pinyin(name, { ...base, pattern: 'first', separator: '' })
+    const descSpaced = pinyin(description, base)
+    const descJoined = pinyin(description, { ...base, separator: '' })
+    const descFirstSpaced = pinyin(description, { ...base, pattern: 'first' })
+    const descFirstJoined = pinyin(description, { ...base, pattern: 'first', separator: '' })
+    text = `${nameSpaced} ${nameJoined} ${nameFirstSpaced} ${nameFirstJoined} ${descSpaced} ${descJoined} ${descFirstSpaced} ${descFirstJoined}`
+  } catch {
+    text = ''
+  }
+  pinyinCache.set(key, text)
+  return text
+}
+
 /** Row height matches the resident chrome (access mode, plan, attach, model). */
 const buttonStyle = {
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
-  width: '28px',
-  height: '28px',
+  width: '24px',
+  height: '24px',
   margin: '0 2px',
   padding: '0',
   border: '1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.25))',
@@ -138,7 +191,7 @@ const statusStyle = {
 /** The picker's bolt glyph: DeepSeek palette gradient + slim stroke. */
 function BoltIcon() {
   return (
-    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" style={{ display: 'block' }}>
+    <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" style={{ display: 'block' }}>
       <defs>
         <linearGradient id="dsh-sp-bolt-grad" x1="0" y1="0" x2="0" y2="1">
           <stop offset="0%" stopColor="var(--dsw-static-deepseek-400, rgb(103, 158, 254))" />
@@ -149,7 +202,7 @@ function BoltIcon() {
         d="M11 21h-1l1-7H7.5c-.58 0-.57-.32-.38-.66.19-.34.05-.08.07-.12C8.48 10.94 10.42 7.54 13 3h1l-1 7h3.5c.49 0 .56.33.47.51l-.07.15C12.96 17.55 11 21 11 21z"
         fill="url(#dsh-sp-bolt-grad)"
         stroke="var(--dsw-static-deepseek-600, rgb(72, 104, 178))"
-        strokeWidth="0.8"
+        strokeWidth="1"
         strokeLinejoin="round"
       />
     </svg>
@@ -167,7 +220,9 @@ function SkillPickerButton(props) {
   const [error, setError] = useState(undefined)
   const [query, setQuery] = useState('')
   const [usage, setUsage] = useState(() => loadUsage())
+  const [active, setActive] = useState(0)
   const boxRef = useRef(null)
+  const itemRefs = useRef([])
 
   const load = useCallback(async () => {
     if (skills !== undefined || error !== undefined) return
@@ -243,27 +298,53 @@ function SkillPickerButton(props) {
     return () => document.removeEventListener('mousedown', onDown)
   }, [open])
 
-  // Usage ordering: last picked first, then most frequent, then by name.
-  const ordered = (skills ?? []).slice().sort((a, b) => {
-    const ua = usage[a.name]
-    const ub = usage[b.name]
-    const la = ua?.lastUsed ?? 0
-    const lb = ub?.lastUsed ?? 0
-    if (la !== lb) return lb - la
-    const ca = ua?.count ?? 0
-    const cb = ub?.count ?? 0
-    if (ca !== cb) return cb - ca
-    return a.name.localeCompare(b.name)
-  })
+  // Usage ordering: last picked first, then most frequent, then by name
+  // (shared with the `/` completion — one rule everywhere).
+  const ordered = rankByUsage(skills ?? [], usage)
 
   const filtered = ordered
     .filter((skill) => {
       const q = query.trim().toLowerCase()
       if (q === '') return true
-      return skill.name.toLowerCase().includes(q) || String(skill.description ?? '').toLowerCase().includes(q)
+      return (
+        skill.name.toLowerCase().includes(q) ||
+        String(skill.description ?? '').toLowerCase().includes(q) ||
+        skillPinyinText(skill.name, skill.description ?? '').toLowerCase().includes(q)
+      )
     })
     .slice(0, 60)
 
+  // Keyboard navigation (#1): reset highlight when the query changes, keep it
+  // in range when the result list shrinks, and keep the highlighted row visible.
+  useEffect(() => {
+    setActive(0)
+  }, [query])
+
+  useEffect(() => {
+    setActive((cur) => Math.min(cur, Math.max(0, filtered.length - 1)))
+  }, [filtered.length])
+
+  useEffect(() => {
+    itemRefs.current[active]?.scrollIntoView({ block: 'nearest' })
+  }, [active, filtered.length])
+
+  const onKeyDown = (event) => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      setActive((i) => Math.min(i + 1, filtered.length - 1))
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      setActive((i) => Math.max(i - 1, 0))
+    } else if (event.key === 'Enter') {
+      event.preventDefault()
+      const skill = filtered[active]
+      if (skill !== undefined) pick(skill.name)
+    } else if (event.key === 'Escape') {
+      event.preventDefault()
+      setOpen(false)
+    }
+  }
+
   return (
     <div ref={boxRef} style={{ position: 'relative', display: 'inline-flex', flex: 'none' }}>
       <button
@@ -283,7 +364,8 @@ function SkillPickerButton(props) {
           <input
             value={query}
             onChange={(event) => setQuery(event.target.value)}
-            placeholder="搜索技能…"
+            onKeyDown={onKeyDown}
+            placeholder="搜索技能…（↑↓ 选择，Enter 插入）"
             style={searchStyle}
             autoFocus
           />
@@ -296,18 +378,27 @@ function SkillPickerButton(props) {
               {filtered.length === 0 ? (
                 <div style={statusStyle}>没有匹配的技能</div>
               ) : (
-                filtered.map((skill) => (
+                filtered.map((skill, index) => (
                   <button
                     key={skill.name}
                     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}
+                    style={{
+                      ...itemStyle,
+                      ...(index === active
+                        ? { background: 'var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.12))' }
+                        : {}),
+                    }}
                   >
                     <span style={nameStyle}>{`/${skill.name}`}</span>
                     <span style={descStyle}>{skill.description ?? ''}</span>
@@ -375,6 +466,25 @@ export function apply(ctx) {
   // official ui-skill prefix source too — typing `/` matches name AND
   // description anywhere, with usage ordering (same rule as the ⚡ panel).
   ctx.effect(() => {
+    // Skills cache per session, so both candidates and the lexicon (chip
+    // decoration of `/skill-name` in the draft) have the same names.
+    const namesCache = new Map() // sessionId -> string[] (skill names)
+    const lexiconListeners = new Map() // sessionId -> Set<listener>
+    const notifyLexicon = (sessionId) => {
+      for (const fn of [...(lexiconListeners.get(sessionId) ?? [])]) {
+        try { fn() } catch (err) { console.error('[dsh-skill-picker] lexicon listener failed:', err) }
+      }
+    }
+    const refreshNames = async (sessionId) => {
+      try {
+        const skills = await listSkills(sessionId)
+        namesCache.set(sessionId, (Array.isArray(skills) ? skills : []).map((s) => s.name))
+        notifyLexicon(sessionId)
+      } catch {
+        /* keep last cache; lexicon stays empty until a successful fetch */
+      }
+    }
+
     const source = {
       trigger: '/',
       name: 'skill-fuzzy',
@@ -382,43 +492,70 @@ export function apply(ctx) {
       async candidates(session, { query, signal }) {
         const skills = await listSkills(session.sessionId)
         if (signal.aborted) return []
-        const usage = loadUsage()
-        // Usage ordering: last picked first, then most frequent, then by name
-        // (same rule as the ⚡ panel, read fresh so picks show up immediately).
-        const ordered = skills.slice().sort((a, b) => {
-          const ua = usage[a.name]
-          const ub = usage[b.name]
-          const la = ua?.lastUsed ?? 0
-          const lb = ub?.lastUsed ?? 0
-          if (la !== lb) return lb - la
-          const ca = ua?.count ?? 0
-          const cb = ub?.count ?? 0
-          if (ca !== cb) return cb - ca
-          return a.name.localeCompare(b.name)
-        })
+        namesCache.set(session.sessionId, skills.map((s) => s.name))
+        notifyLexicon(session.sessionId)
+        const ordered = rankByUsage(skills, loadUsage())
         const q = String(query ?? '').trim().toLowerCase()
-        const matches =
-          q === ''
-            ? ordered
-            : ordered.filter(
-                (s) =>
-                  s.name.toLowerCase().includes(q) ||
-                  String(s.description ?? '').toLowerCase().includes(q),
-              )
-        // Empty `/` shows ALL skills (usage-ordered); typing fuzzy-filters.
-        // Keep a generous cap so very large skill sets stay snappy.
-        return matches.slice(0, 50).map((s) => ({ name: s.name, description: s.description }))
+        if (q === '') {
+          // Empty `/` surfaces ALL skills, usage first (same rule as ⚡ panel).
+          return ordered.map((s) => ({ name: s.name, description: s.description }))
+        }
+        // Typing uses fuzzysort (subsequence matching + relevance score) over
+        // name AND description, so partial/gappy queries and keywords match.
+        // The search string also carries the skill's pinyin forms (spaced,
+        // joined, initials — name and description), so `ji yi` / `jiyi` / `jy`
+        // match Chinese skill names & descriptions.
+        const targets = ordered.map((s) => ({
+          s,
+          search: `${s.name} ${s.description ?? ''} ${skillPinyinText(s.name, s.description ?? '')}`,
+        }))
+        const results = fuzzysort.go(q, targets, {
+          key: 'search',
+          limit: 12,
+          threshold: -10000,
+        })
+        return results
+          .filter((r) => r.score > 0)
+          .map((r) => ({ name: r.obj.s.name, description: r.obj.s.description }))
       },
       warm(session) {
-        listSkills(session.sessionId).catch(() => {})
+        refreshNames(session.sessionId)
+      },
+      lexicon(session) {
+        return namesCache.get(session.sessionId)
+      },
+      subscribeLexicon(session, listener) {
+        const key = session.sessionId
+        const set = lexiconListeners.get(key) ?? new Set()
+        set.add(listener)
+        lexiconListeners.set(key, set)
+        return () => {
+          const cur = lexiconListeners.get(key)
+          if (cur !== undefined) {
+            cur.delete(listener)
+            if (cur.size === 0) lexiconListeners.delete(key)
+          }
+        }
       },
       onPick({ candidate }) {
+        // Record usage (same rule as the ⚡ panel) so slash-picked skills
+        // rank higher the next time they open `/`.
+        try {
+          const usage = loadUsage()
+          const name = candidate.name
+          const next = { ...usage, [name]: { count: (usage[name]?.count ?? 0) + 1, lastUsed: Date.now() } }
+          saveUsage(next)
+        } catch {
+          /* usage recording is best-effort */
+        }
         return { text: `/${candidate.name} ` }
       },
     }
     const unregister = ctx.inputTriggers.registerSource(source)
     return () => {
       unregister()
+      namesCache.clear()
+      lexiconListeners.clear()
     }
   }, 'dsh-skill-picker: fuzzy / source')
 }