@weibaohui/skills-management 0.1.6 → 0.3.0

package/README.md

@@ -9,11 +9,11 @@
 
 ## 核心功能
 
-- **全来源扫描**：自动扫描本机各 coding agent 的技能目录（Claude、ZCode、Codex 等十余个执行器），统一在一个页面查看、查看详情、单文件预览
+- **全来源扫描**：自动扫描本机各 coding agent 的技能目录（Claude、ZCode、Codex、WorkBuddy 等十余个执行器），统一在一个页面查看、查看详情、单文件预览
 - **一键收编**：任意执行器的技能可一键复制进 DSH 用户库，供模型的 `skill` 工具直接调用
 - **技能市场**：内置 ntd 技能合集（6600+ 条），按来源分组浏览、搜索筛选、详情预览、一键安装
 - **模型可见性治理**：每个已装技能都有「模型可调用」开关，不想暴露给模型的技能一键隐藏/恢复
-- **输入框 ＋技能**：composer 工具行新增「＋技能」按钮，弹出技能候选菜单，选中即把 `/技能名` 写入草稿，发送时技能内容注入该条消息
+- **输入框 ＋ 技能**：composer 工具行新增「＋ 技能」按钮，弹出带搜索框的技能候选浮层（候选 = 宿主技能注册表，与 `/` 菜单同源；支持键盘 ↑/↓/Enter/Esc），选中即把 `/技能名` 写入草稿，发送时技能内容注入该条消息
 - **市场自动同步**：市场仓库自动克隆与每日更新（可关），支持 GitCode 私有仓库 access token
 - **稀疏检出**：ntd-resource 仓库同时携带专家/模板等子树，市场只检出 `skills` 子目录（git partial clone + sparse-checkout），省一半以上流量与磁盘；已有全量检出会在下次同步时原地转换
 - **软链布局兼容**：各执行器目录间软链共享的技能不会重复展示
@@ -28,7 +28,11 @@ dsh plugin --profile web add @weibaohui/skills-management -w
 
 ## 使用
 
-1. 打开 Web UI → 侧栏进入 **技能市场** 页面
+1. 打开 Web UI → **设置** → 左侧「技能市场」section 即完整管理页（可搭配 dsh-settings-ui 插件把设置窗口调大/全屏）
 2. 「已安装」视图管理本机技能；「市场」视图浏览/搜索/安装 ntd 合集技能；「执行器」视图按来源钻入查看各 coding agent 的技能
 3. 详情页可预览 SKILL.md 全文、安装到用户库、切换模型可调用开关
 4. ⚙ 设置面板里可配置市场仓库地址、分支、access token 与自动同步
+
+## 联系我 :飞书群
+
+![link](https://foruda.gitee.com/images/1774880015525784725/4fd67005_77493.png "link")

package/client/bundle.js

@@ -8,10 +8,114 @@ window.__ModuleLoader__.load({
     var exports = module.exports
     Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" })
     var React = require("react")
+    /**
+     * @weibaohui/dsh-plugin-kit — client source（由消费者构建脚本内联进 bundle，
+     * 不经 loader 运行时加载）。对外暴露 PluginKit：
+     *
+     *   PluginKit.substituteParams(template, params)   — {{key}} 模板插值
+     *   PluginKit.makeActionShareDialog(React, opts)   — 返回 ActionShareDialog 组件
+     *
+     * ActionShareDialog props：
+     *   title / hint / rows: [[label, value], ...] / initialPrompt
+     *   run: async (prompt) => { jobId }      — 发起执行
+     *   poll: async (jobId) => { status, output, code }
+     *   labels: { copy, copied, run, running, done, failed, outputLabel, close }
+     *   onClose
+     *
+     * 全部样式内联（主题 token + 回退值），消费者无需自带 CSS。
+     */
+    var PluginKit = (function () {
+      function substituteParams(template, params) {
+        var out = String(template || '')
+        for (var key in (params || {})) out = out.split('{{' + key + '}}').join(String(params[key]))
+        return out
+      }
+
+      function makeActionShareDialog(React, options) {
+        options = options || {}
+        var h = React.createElement
+        var useState = React.useState
+        var useEffect = React.useEffect
+        var doFetch = options.fetch || (typeof fetch !== 'undefined' ? fetch : null)
+        var inputStyle = { width: '100%', minHeight: 190, resize: 'vertical', fontFamily: 'var(--dsw-font-family)', lineHeight: 1.6, fontSize: 12, background: 'var(--dsw-alias-bg-layer-2,transparent)', color: 'inherit', border: '1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3))', borderRadius: '8px', padding: '10px', boxSizing: 'border-box' }
+        var btnStyle = { background: 'transparent', color: 'inherit', border: '1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3))', borderRadius: '8px', padding: '5px 12px', fontSize: 13, cursor: 'pointer', font: 'inherit' }
+        var primaryStyle = Object.assign({}, btnStyle, { background: 'var(--dsw-alias-brand-primary,#4a7dff)', borderColor: 'var(--dsw-alias-brand-primary,#4a7dff)', color: '#fff' })
+
+        return function ActionShareDialog(props) {
+          var title = props.title
+          var hint = props.hint
+          var labels = props.labels || {}
+          var _p = useState(props.initialPrompt || '')
+          var prompt = _p[0]; var setPrompt = _p[1]
+          var _j = useState(null)
+          var job = _j[0]; var setJob = _j[1]
+          var _b = useState(false)
+          var busy = _b[0]; var setBusy = _b[1]
+          var _c = useState(false)
+          var copied = _c[0]; var setCopied = _c[1]
+          var _e = useState('')
+          var error = _e[0]; var setError = _e[1]
+          var _d = useState(false)
+          var dirty = _d[0]; var setDirty = _d[1]
+
+          // initialPrompt 异步到位（如宿主先要下发真实路径）时跟随刷新；用户编辑过则不打断
+          useEffect(function () {
+            if (!dirty) setPrompt(props.initialPrompt || '')
+          }, [props.initialPrompt])
+
+          useEffect(function () {
+            if (job === null || job.status !== 'running' || typeof props.poll !== 'function') return
+            var timer = setInterval(function () {
+              props.poll(job.jobId).then(function (d) {
+                setJob({ jobId: job.jobId, status: d.status, output: d.output || '', code: d.code !== undefined ? d.code : null, sessionId: d.sessionId })
+              }).catch(function () {})
+            }, 1500)
+            return function () { clearInterval(timer) }
+          }, [job !== null && job.jobId])
+
+          var doRun = function () {
+            if (typeof props.run !== 'function') return
+            setBusy(true); setError('')
+            props.run(prompt).then(function (r) {
+              setJob({ jobId: r.jobId, status: 'running', output: '', code: null })
+            }).catch(function (e) { setError(String(e && e.message)) }).finally(function () { setBusy(false) })
+          }
+          var copy = function () {
+            if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText) {
+              navigator.clipboard.writeText(prompt).then(function () { setCopied(true); setTimeout(function () { setCopied(false) }, 1500) }).catch(function () {})
+            }
+          }
+          var statusText = job === null ? '' : job.status === 'running' ? (labels.running || 'running') : job.status === 'done' ? (labels.done || 'done') : (labels.failed || 'failed') + (job.code != null ? ' (' + job.code + ')' : '')
+
+          return h('div', { onClick: function (e) { if (e.target === e.currentTarget && props.onClose) props.onClose() }, style: { position: 'fixed', inset: 0, zIndex: 2147483000, background: 'rgba(0,0,0,.45)', display: 'flex', alignItems: 'center', justifyContent: 'center' } },
+            h('div', { style: { width: 'min(640px,92vw)', maxHeight: '86vh', overflow: 'auto', background: 'var(--dsw-alias-bg-layer-1,#fff)', border: '1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3))', borderRadius: '16px', padding: '20px', display: 'flex', flexDirection: 'column', gap: 12, color: 'var(--dsw-alias-label-primary,inherit)', font: 'var(--dsw-font-family,inherit)' } },
+              h('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } },
+                h('div', { style: { fontSize: 17, fontWeight: 600 } }, title || ''),
+                h('button', { onClick: props.onClose, style: Object.assign({}, btnStyle, { marginLeft: 'auto', width: 28, height: 28, padding: 0, borderRadius: 28 }) }, '✕')),
+              hint ? h('div', { style: { fontSize: 12, opacity: .7 } }, hint) : null,
+              (props.rows || []).length > 0 ? h('div', { style: { display: 'flex', flexDirection: 'column', gap: 4, fontSize: 13 } },
+                props.rows.map(function (r, i) {
+                  return r[1] ? h('div', { key: i }, h('b', null, r[0] + '：'), h('span', null, r[1])) : null
+                })) : null,
+              h('textarea', { value: prompt, onChange: function (e) { setDirty(true); setPrompt(e.target.value) }, spellCheck: false, style: inputStyle }),
+              error !== '' ? h('div', { style: { fontSize: 12, color: 'var(--dsw-alias-state-error,#c75050)' } }, error) : null,
+              job !== null ? h('div', null,
+                h('div', { style: { fontSize: 12, opacity: .7, margin: '4px 0' } }, (labels.outputLabel || 'Output') + ' · ' + statusText),
+                h('pre', { style: { maxHeight: 220, margin: 0, overflow: 'auto', whiteSpace: 'pre-wrap', fontSize: 12, background: 'var(--dsw-alias-bg-layer-2,transparent)', border: '1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.2))', borderRadius: '8px', padding: '8px' } }, job.output || '…')) : null,
+              h('div', { style: { display: 'flex', gap: 8 } },
+                h('button', { onClick: copy, style: btnStyle }, copied ? (labels.copied || 'Copied') : (labels.copy || 'Copy')),
+                h('button', { onClick: doRun, disabled: busy || (job !== null && job.status === 'running'), style: primaryStyle }, job !== null && job.status === 'running' ? (labels.running || 'Running…') : (labels.run || 'Run')))))
+        }
+      }
+
+      return { substituteParams: substituteParams, makeActionShareDialog: makeActionShareDialog }
+    })()
+
     /**
      * dsh-plugin-skills-management - Browser half.
      *
-     * One React app for every surface (sidebar overlay + settings section).
+     * One React app for every surface (settings section; the former sidebar
+     *  full-page entry was retired — pair with dsh-settings-ui for room).
      * All interactive controls are host primitives (@deepseek-ai/dsh-client-ui-
      * primitives); all colors come from the ui-theme `--dsw-*` token layers so
      * light/dark follows the shell; all copy comes from the locale registry
@@ -74,15 +178,24 @@ window.__ModuleLoader__.load({
     let sessionsApi = null
     const sessionsSvc = () => sessionsApi
 
-    // Composer services (inputTriggers + sessions) for the ＋技能 button: opens
-    // the `skill` source (registered by dsh-client-ui-skill) as a menu. Absence
-    // hides the button; nothing else depends on it.
+    // Composer services (inputTriggers + sessions) for the ＋ 技能 button plus
+    // the `connection` service for the picker's skill catalog: the button opens
+    // the plugin's own searchable picker popover (the host slash menu filters
+    // only by a typed query, which a button click cannot provide); the pick is
+    // written into the draft through the same scoped `slash/input-insert-text`
+    // event the host menu executes. Absence hides the button; nothing else
+    // depends on it.
     let composerScope = null
+    let connectionApi = null
 
     /**
      * Open one registered '/' source over a synthetic collapsed span appended at
      * the draft end (host toggleCommandMenu 同款调用形状；标准 kit 不暴露光标，
      * pick 依赖 span-CAS：点击后草稿若再变动则本次 pick 静默作废）。
+     *
+     * NOTE: the ＋ 技能 button no longer uses this — the host menu cannot offer
+     * a search box, so the button opens SkillPicker instead. Kept for the
+     * contract tests and as the documented toggleSource path.
      */
     function openTriggerSource(scope, sessionId, input, sourceName) {
       const inputTriggers = scope && scope.inputTriggers
@@ -105,6 +218,127 @@ window.__ModuleLoader__.load({
       return true
     }
 
+    /**
+     * Insert `text` at the end of the session draft through the same scoped
+     * event the host slash menu executes (`slash/input-insert-text`). The span
+     * CAS uses the freshest input snapshot handed to the slot props — while the
+     * picker popover is open the composer draft cannot move (focus is in the
+     * picker), so the splice applies; a stale snapshot quietly no-ops, same as
+     * the host menu's span-CAS.
+     */
+    function insertComposerText(scope, sessionId, input, text) {
+      const sessions = scope && scope.sessions
+      if (!sessions) return false
+      let actx
+      try { actx = sessions.scope(sessionId) } catch { return false }
+      if (actx === undefined || actx === null || typeof actx.bail !== 'function') return false
+      const draft = (input && input.draft) || ''
+      const at = draft.length
+      try {
+        return actx.bail(actx, 'slash/input-insert-text', {
+          text,
+          span: { start: at, end: at, draftRev: (input && input.draftRev) || 0 },
+        }) === true
+      } catch { return false }
+    }
+
+    /** Best-effort refocus of the composer textarea after the picker closes. */
+    function refocusComposer() {
+      try {
+        const card = document.querySelector('[data-composer-card]')
+        const ta = card && card.querySelector('textarea')
+        if (ta && typeof ta.focus === 'function') ta.focus()
+      } catch {}
+    }
+
+    /** Picker popover list cap — beyond this the search input is the filter. */
+    const PICKER_ROW_CAP = 200
+
+    /** Skill catalog cache for the picker (ui-skill 同源：connection.api.skills). */
+    let skillCatalog = { sessionId: null, at: 0, rows: null }
+    const SKILL_CATALOG_TTL = 60_000
+
+    /**
+     * Picker candidates from the host skill registry (the same list the `/`
+     * skill source shows). Subagent sessions have no catalog (ui-skill 同款守卫);
+     * a failed/absent connection rejects → the picker shows its empty state.
+     */
+    async function fetchSkillCandidates(connection, sessions, sessionId) {
+      try { if (sessions && typeof sessions.subagentAddress === 'function' && sessions.subagentAddress(sessionId) !== undefined) return [] } catch {}
+      const now = Date.now()
+      if (skillCatalog.rows !== null && skillCatalog.sessionId === sessionId && now - skillCatalog.at < SKILL_CATALOG_TTL) return skillCatalog.rows
+      const skills = connection && connection.api && connection.api.skills
+      if (!skills || typeof skills.list !== 'function') throw new Error('connection.api.skills unavailable')
+      const res = await skills.list({ sessionId })
+      const result = res && res.result
+      if (!result || result.ok !== true) throw new Error('skill.list failed')
+      const list = result.value && Array.isArray(result.value.skills) ? result.value.skills : []
+      const rows = list.map((s) => ({ name: s.name, description: s.description || '', modelInvocable: s.modelInvocable !== false }))
+      skillCatalog = { sessionId, at: now, rows }
+      return rows
+    }
+
+    /**
+     * ＋ 技能 picker：锚定在按钮上方、自带搜索框的候选浮层（portal 到 body）。
+     * 宿主斜杠菜单靠「输入的 query」过滤，按钮打开的菜单没有输入载体——候选
+     * 太多时无从筛选，所以浮层自带搜索框。键盘 ↑/↓/Enter/Esc，鼠标 hover+点击。
+     */
+    function SkillPicker(props) {
+      const t = props.t
+      const [query, setQuery] = useState('')
+      const [active, setActive] = useState(0)
+      const inputRef = useRef(null)
+      const listRef = useRef(null)
+      useEffect(() => { try { if (inputRef.current) inputRef.current.focus() } catch {} }, [])
+      useEffect(() => {
+        const onKey = (e) => { if (e.key === 'Escape' && !(e.isComposing === true)) props.onClose() }
+        try { document.addEventListener('keydown', onKey) } catch {}
+        return () => { try { document.removeEventListener('keydown', onKey) } catch {} }
+      }, [])
+      const lower = query.trim().toLowerCase()
+      const all = props.rows || []
+      const filtered = lower === '' ? all : all.filter((r) => matchSkill(r, lower))
+      const shown = filtered.slice(0, PICKER_ROW_CAP)
+      useEffect(() => { setActive(0) }, [lower, props.rows])
+      useEffect(() => {
+        const list = listRef.current
+        const el = list && list.children[active]
+        if (el && typeof el.scrollIntoView === 'function') { try { el.scrollIntoView({ block: 'nearest' }) } catch {} }
+      }, [active])
+      const onKeyDown = (e) => {
+        // IME 组词中的按键不触发选择（回车是选定拼音候选，不是 pick）
+        if (e.nativeEvent && e.nativeEvent.isComposing === true) return
+        if (e.key === 'ArrowDown') { e.preventDefault(); setActive((i) => Math.min(i + 1, shown.length - 1)) }
+        else if (e.key === 'ArrowUp') { e.preventDefault(); setActive((i) => Math.max(i - 1, 0)) }
+        else if (e.key === 'Enter') { e.preventDefault(); const row = shown[active]; if (row) props.onPick(row) }
+      }
+      const width = 400
+      const winW = typeof window !== 'undefined' ? window.innerWidth : 800
+      const winH = typeof window !== 'undefined' ? window.innerHeight : 600
+      const left = Math.max(8, Math.min(props.anchor.left, winW - width - 8))
+      const bottom = Math.max(8, winH - props.anchor.top + 6)
+      return h('div', { className: 'sk-picker-backdrop', onMouseDown: (e) => { if (e.target === e.currentTarget) props.onClose() } },
+        h('div', { className: 'sk-picker', style: { left, bottom, width }, role: 'dialog', 'aria-label': t('pickSkillTitle') },
+          h('input', {
+            ref: inputRef, className: 'sk-input sk-picker-input', value: query,
+            placeholder: t('pickerSearch'), onChange: (e) => setQuery(e.target.value), onKeyDown,
+          }),
+          h('div', { className: 'sk-picker-list', ref: listRef, role: 'listbox' },
+            props.rows === null
+              ? h('div', { className: 'sk-picker-empty' }, t('pickerLoading'))
+              : shown.length === 0
+                ? h('div', { className: 'sk-picker-empty' }, t('emptySearch'))
+                : shown.map((row, i) => h('button', {
+                    key: row.name, type: 'button', role: 'option', 'aria-selected': i === active,
+                    className: 'sk-picker-row', 'data-active': i === active,
+                    onMouseEnter: () => setActive(i),
+                    onMouseDown: (e) => { e.preventDefault(); props.onPick(row) },
+                  },
+                    h('span', { className: 'sk-picker-name' }, row.name),
+                    h('span', { className: 'sk-picker-desc' },
+                      row.modelInvocable ? row.description : `${t('pickerUserOnly')} · ${row.description}`))))))
+    }
+
     // ── Locale ───────────────────────────────────────────────────────────────
 
     const NS = 'skillsManagement'
@@ -136,7 +370,7 @@ window.__ModuleLoader__.load({
       saved: '设置已保存',
       gitMissing: '未检测到 git',
       repoDirLabel: '本地目录（同步内容存放处）',
-      tokenLabel: '访问令牌（私有仓库需要）',
+      tokenLabel: '访问令牌（分享到社区/私有仓库需要）',
       tokenConfigured: '已配置',
       clearToken: '清除',
       shareBtn: '分享',
@@ -214,8 +448,11 @@ window.__ModuleLoader__.load({
       invocationHint: '关闭后技能保留在库里，但不再注入对话目录（skill 工具也调不到）',
       pathLabel: '路径',
       meTag: '本机',
-      pickSkill: '＋技能',
+      pickSkill: '＋ 技能',
       pickSkillTitle: '选择一个技能，其内容将注入本条消息',
+      pickerSearch: '搜索技能名称或描述…',
+      pickerLoading: '正在加载技能目录…',
+      pickerUserOnly: '仅用户',
     }
 
     const EN = {
@@ -245,7 +482,7 @@ window.__ModuleLoader__.load({
       saved: 'Settings saved',
       gitMissing: 'git not found',
       repoDirLabel: 'Local directory (sync target)',
-      tokenLabel: 'Access token (private repos)',
+      tokenLabel: 'Access token (community sharing / private repos)',
       tokenConfigured: 'configured',
       clearToken: 'Clear',
       shareBtn: 'Share',
@@ -325,29 +562,24 @@ window.__ModuleLoader__.load({
       meTag: 'me',
       pickSkill: '+ Skill',
       pickSkillTitle: 'Pick a skill; its content is injected into this message',
+      pickerSearch: 'Search skills by name or description…',
+      pickerLoading: 'Loading skill catalog…',
+      pickerUserOnly: 'user-only',
     }
 
     // ── Pure helpers ────────────────────────────────────────────────────────
 
     /** ntd ActionButton 同款 {{key}} 替换:split/join 规避正则元字符 */
-    function substituteParams(template, params) {
-      let out = template
-      for (const [key, value] of Object.entries(params)) {
-        out = out.split(`{{${key}}}`).join(String(value))
-      }
-      return out
-    }
-
     const SHARE_PROMPT_ZH = [
       '请把本地技能「{{skillName}}」{{version}}打包提交到 GitCode 官方仓库，作为一个 PR 供维护者审核。',
       '',
       '## 关键信息',
       '- 技能目录：{{resourceDir}}（~ 表示当前用户家目录，执行前先展开为绝对路径）',
       '- 官方仓库：weibaohui/ntd-resource（GitCode，API base = https://api.gitcode.com）',
-      '- PAT 位置：~/.dsh/settings.yaml 中 skills-management.market 段的 token 字段（由技能市场设置面板保存）。',
+      '- PAT 位置：{{settingsFile}} 中 skills-management.market 段的 token 字段（由技能市场设置面板保存）。',
       '',
       '## 执行步骤（严格按顺序）',
-      '1. 读取 PAT：读取 ~/.dsh/settings.yaml，定位 skills-management.market 段下的 token 字段。token 是敏感凭据，读取后不要把明文打印到输出、日志或最终结果里。',
+      '1. 读取 PAT：读取 {{settingsFile}}，定位 skills-management.market 段下的 token 字段。token 是敏感凭据，读取后不要把明文打印到输出、日志或最终结果里。',
       '2. 展开技能目录为绝对路径，遍历该目录，收集每个文件的「相对该目录的路径」与内容；跳过 .downloaded_at、.clawhub、.git 三类同步元数据。',
       '3. 把第 1 步读到的 token 作为 HTTP 认证令牌，附加到下面每个 GitCode API 请求的认证头里（bearer 认证方式），不要写成占位符：',
       '   a. 验证用户：`GET https://api.gitcode.com/api/v5/user`，拿到返回的 login 字段——这是 token 真实所属的账号，后续所有 URL 里的 {owner} 一律用它。',
@@ -469,6 +701,15 @@ window.__ModuleLoader__.load({
     .sk-tabpill{background:transparent;border:none;color:var(--dsw-alias-label-secondary);font-family:var(--dsw-font-family)}
     .sk-chip{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:transparent;color:var(--dsw-alias-label-secondary);font-family:var(--dsw-font-family);font-size:12px;cursor:pointer;white-space:nowrap}
     .sk-chip:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+    .sk-picker-backdrop{position:fixed;inset:0;z-index:2147483200}
+    .sk-picker{position:fixed;z-index:2147483201;width:400px;max-width:92vw;max-height:360px;display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--dsw-specific-menu);border:1px solid var(--dsw-alias-border-inverted);border-radius:12px;box-shadow:var(--dsw-shadow-lv3)}
+    .sk-picker-input{flex:none;box-sizing:border-box;width:100%}
+    .sk-picker-list{display:flex;flex-direction:column;min-height:40px;overflow-y:auto}
+    .sk-picker-row{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--dsw-alias-label-primary);text-align:left;cursor:pointer;font-family:var(--dsw-font-family);font-size:13px}
+    .sk-picker-row[data-active="true"]{background:var(--dsw-alias-interactive-bg-hover)}
+    .sk-picker-name{flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
+    .sk-picker-desc{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-tertiary);font-size:12px}
+    .sk-picker-empty{padding:12px 10px;text-align:center;color:var(--dsw-alias-label-dimmed);font-size:13px}
     </style>`
 
     // ── Fetch layer ─────────────────────────────────────────────────────────
@@ -725,60 +966,31 @@ window.__ModuleLoader__.load({
       return h('div', { className: 'sk-toast' }, text)
     }
 
-    /** ntd ActionButton 同款分享抽屉:可编辑提示词 + 参数预览 + 复制到会话执行。 */
-    function ShareSkillDialog({ t, params, onClose, onToast }) {
-      const [prompt, setPrompt] = useState(substituteParams(SHARE_PROMPT_ZH, params))
-      const [hasToken, setHasToken] = useState(null)
-      const [job, setJob] = useState(null)   // {jobId,status,output,code}
-      const [busy, setBusy] = useState(false)
+    let _actionShareDialog = null
+    function getActionShareDialog() {
+      if (_actionShareDialog === null) _actionShareDialog = PluginKit.makeActionShareDialog(__React)
+      return _actionShareDialog
+    }
+
+    /** 分享抽屉：壳交给 PluginKit（ActionShareDialog），本插件只负责
+     *  hasToken 提示、settingsFile 插值与 run/poll 的 API 映射。 */
+    function ShareSkillDialog({ t, params, onClose }) {
+      const _st = useState(null)
+      const status = _st[0]; const setStatus = _st[1]
       useEffect(() => {
-        getJson(API + '/market/status').then(d => setHasToken(d.hasToken === true)).catch(() => setHasToken(false))
+        getJson(API + '/market/status').then((d) => setStatus(d)).catch(() => setStatus({ hasToken: false }))
       }, [])
-      // 轮询执行输出,直到关闭/结束
-      useEffect(() => {
-        if (job === null || job.status !== 'running') return
-        const timer = setInterval(() => {
-          getJson(API + '/share/run?id=' + encodeURIComponent(job.jobId))
-            .then(d => setJob(prev => prev && { ...prev, status: d.status, output: d.output || '', code: d.code, sessionId: d.sessionId || prev.sessionId }))
-            .catch(() => {})
-        }, 2000)
-        if (typeof timer.unref === 'function') timer.unref()
-        return () => clearInterval(timer)
-      }, [job && job.status])
-      const doRun = async () => {
-        setBusy(true)
-        try {
-          const r = await fetch(API + '/share/run', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt, dir: params.resourceDir }) })
-          const d = await r.json().catch(() => ({}))
-          if (!r.ok) throw new Error(d.error || 'HTTP ' + r.status)
-          setJob({ jobId: d.jobId, status: 'running', output: '', code: null })
-        } catch (e) { onToast(t('runFailed') + ': ' + e.message) } finally { setBusy(false) }
-      }
-      const row = (label, value) => h('div', { style: { display: 'flex', justifyContent: 'space-between', gap: 12, padding: '3px 0' } },
-        h('span', { className: 'sk-dir' }, label), h('span', { className: 'sk-hint', style: { wordBreak: 'break-all', textAlign: 'right' } }, value))
-      const copy = () => {
-        navigator.clipboard.writeText(prompt).then(() => onToast(t('promptCopied'))).catch(() => {})
-      }
-      return h(SkDialog, { title: t('shareTitle'), onClose, wide: true },
-        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10, minWidth: 380 } },
-          h('div', { className: 'sk-hint' }, hasToken === false ? t('shareHintPatMissing') : t('shareHint')),
-          h('div', null,
-            row(t('shareParamName'), params.skillName),
-            row(t('shareParamVersion'), params.version || '-'),
-            row(t('shareParamDir'), params.resourceDir),
-            row(t('shareParamRemote'), params.remotePath)),
-          h('textarea', { className: 'sk-input', value: prompt, onChange: e => setPrompt(e.target.value),
-            style: { width: '100%', minHeight: 190, resize: 'vertical', fontFamily: 'var(--dsw-font-family)', lineHeight: 1.6 } }),
-          job !== null && h('div', null,
-            h('div', { className: 'sk-dir', style: { margin: '4px 0' } },
-              t('outputLabel') + ' · ' + (job.status === 'running' ? t('running') : job.status === 'done' ? t('runDone') : t('runFailed') + (job.code != null ? ' (' + job.code + ')' : ''))),
-            h('pre', { className: 'sk-preview', style: { maxHeight: 220, margin: 0, whiteSpace: 'pre-wrap', fontSize: 12 } },
-              job.output || '…')),
-          h('div', { className: 'sk-dlg-foot', style: { marginTop: 0 } },
-            h(ButtonLite, { onClick: copy }, t('copyPrompt')),
-            job !== null && job.sessionId && sessionsSvc() && h(ButtonLite, { onClick: () => { if (openRunSession(job.sessionId)) onClose() } }, t('openChat')),
-            h(ButtonLite, { primary: true, disabled: busy || (job !== null && job.status === 'running'), onClick: doRun },
-              job !== null && job.status === 'running' ? t('running') : t('runBtn')))))
+      const hasToken = status ? status.hasToken === true : null
+      const hint = hasToken === false ? t('shareHintPatMissing') : t('shareHint')
+      const initialPrompt = PluginKit.substituteParams(SHARE_PROMPT_ZH, { ...params, settingsFile: (status && status.settingsFile) || '' })
+      return h(getActionShareDialog(), {
+        title: t('shareTitle'), hint, initialPrompt,
+        rows: [[t('shareParamName'), params.skillName], [t('shareParamVersion'), params.version || '-'], [t('shareParamDir'), params.resourceDir]],
+        labels: { copy: t('copyPrompt'), copied: t('copied'), run: t('runBtn'), running: t('running'), done: t('runDone'), failed: t('runFailed'), outputLabel: t('outputLabel') },
+        run: (prompt) => fetch(API + '/share/run', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt, dir: params.resourceDir }) }).then((r) => r.json()),
+        poll: (id) => fetch(API + '/share/run?id=' + encodeURIComponent(id)).then((r) => r.json()),
+        onClose,
+      })
     }
 
     /** Market sync settings: status card, sync action, editable url/branch. */
@@ -1259,61 +1471,16 @@ window.__ModuleLoader__.load({
 
     // ── Slot entries ─────────────────────────────────────────────────────────
 
-    function footerStyle() {
-      return { display: 'inline-flex', alignItems: 'center', gap: 6, margin: '4px 10px', padding: '8px 10px',
-        border: 'none', borderRadius: 8, background: 'transparent', color: 'var(--dsw-alias-label-secondary)',
-        font: 'inherit', fontSize: 13, cursor: 'pointer', width: 'calc(100% - 20px)', textAlign: 'left' }
-    }
-
-    /** Panel state lives OUTSIDE React: sidebar churn remounts slot entries,
-     *  and any state kept in them (the old bug) is torn down with them. */
-    const panelStore = {
-      open: false,
-      listeners: new Set(),
-      set(v) { panelStore.open = v; for (const fn of panelStore.listeners) fn(v) },
-      subscribe(fn) { panelStore.listeners.add(fn); return () => panelStore.listeners.delete(fn) },
-    }
-
     /** Jump to the run's conversation: open() is best-effort (it may reject
-     *  after the selection lands), but folding our overlay must always happen. */
+     *  after the selection lands). */
     function openRunSession(sessionId) {
       try {
         const svc = sessionsSvc()
         if (svc && typeof svc.open === 'function') svc.open(sessionId)
       } catch {}
-      panelStore.set(false)
       return true
     }
 
-    /** Footer slot entry: the button, and — when open — the whole market page
-     *  through the host primitives Modal (portal + overlay handled by the host's
-     *  own React tree; no custom createRoot, which never commits here). */
-    function FooterSlotComponent(props) {
-      const [open, setOpen] = useState(panelStore.open)
-      useEffect(() => panelStore.subscribe(setOpen), [])
-      useEffect(ensureStyles, [])
-
-      const t = props.__t
-      const labelText = t ? t('title') : 'Skills Market'
-      // The sidebar renders this entry with a `wide` owner prop: the collapsed
-      // rail passes false and shows the icon alone; expanded shows the label.
-      const wide = props.wide !== false
-      return h('span', { style: { display: 'contents' } },
-        h('button', { title: labelText, 'aria-label': labelText, onClick: () => panelStore.set(!panelStore.open),
-            style: footerStyle() },
-          P && P.IconSkillOutline16 ? h(P.IconSkillOutline16, { size: 16 }) : '\u{1F3AF}',
-          wide ? ' ' + labelText : ''),
-        open && (() => {
-          const page = h(SkillsPage, { t, embedded: false, onClose: () => panelStore.set(false) })
-          // Fullscreen: portal the fixed-position page to <body> so no sidebar
-          // ancestor (transform-containing or otherwise) can clip it.
-          if (RDP && typeof RDP.createPortal === 'function' && typeof document !== 'undefined') {
-            return RDP.createPortal(page, document.body)
-          }
-          return page // fallback: fixed positioning still applies from here
-        })())
-    }
-
     /** Settings section slot entry: render the page directly in the host tree. */
     function SettingsSlotComponent(props) {
       useEffect(ensureStyles, [])
@@ -1327,7 +1494,7 @@ window.__ModuleLoader__.load({
     module.exports = {
       name: CLIENT_NAME,
       inject: ['slots', 'locale'],
-      __internals: { NS, ZH, EN, matchSkill, formatSize, formatTime, openTriggerSource },
+      __internals: { NS, ZH, EN, matchSkill, formatSize, formatTime, openTriggerSource, insertComposerText, fetchSkillCandidates },
       /** Test/host helper: mount a standalone page into any container. */
       __boot(container, opts = {}) {
         ensureStyles()
@@ -1355,13 +1522,20 @@ window.__ModuleLoader__.load({
             })
           }
         } catch {}
-        // Composer services (inputTriggers + sessions) for the ＋技能 button;
+        // Composer services (inputTriggers + sessions) for the ＋ 技能 button;
         // absence hides the button only.
         try {
           if (typeof ctx.inject === 'function') {
             ctx.inject(['inputTriggers', 'sessions'], (scope) => { composerScope = scope })
           }
         } catch {}
+        // connection service for the picker skill catalog (host skill registry,
+        // ui-skill 同源); absence keeps the button hidden.
+        try {
+          if (typeof ctx.inject === 'function') {
+            ctx.inject(['connection'], (scope) => { connectionApi = scope && scope.connection })
+          }
+        } catch {}
         // Locale service is optional at boot order — degrade to EN until present
         let t = (key, vars) => {
           let out = EN[key] ?? key
@@ -1383,21 +1557,6 @@ window.__ModuleLoader__.load({
             }
           }
         } catch (e) { try { console.error('[skills-management] locale init:', e) } catch {} }
-        ctx.effect(() => {
-          try {
-          ctx.slots.inject('sidebar.footer.action', () => ctx.slots.register({
-            name: 'sidebar.footer.action',
-            id: CLIENT_NAME,
-            order: 50,
-            locale: NS,
-            label: () => t('title'),
-            inject: () => ({ t }),
-          }, function FooterSlot(apiProps) {
-            // ownerProps (the sidebar's wide flag) land here — forward them
-            return h(FooterSlotComponent, { __t: t, wide: apiProps && apiProps.wide })
-          }))
-          } catch (e) { (globalThis.__skErrors = globalThis.__skErrors || []).push('footer:' + (e && e.message)); throw e }
-        }, 'skills-management: sidebar footer action')
         ctx.effect(() => {
           try {
           ctx.slots.inject('settings.section', () => ctx.slots.register({
@@ -1424,7 +1583,7 @@ window.__ModuleLoader__.load({
             inject: () => ({ t }),
           }, function SkillButtonSlot(apiProps) {
             return h(ComposerButtonSlot, {
-              __t: t, icon: '⚡', label: t('pickSkill'), title: t('pickSkillTitle'),
+              __t: t, label: t('pickSkill'), title: t('pickSkillTitle'),
               source: 'skill', sessionId: apiProps && apiProps.sessionId, input: apiProps && apiProps.input,
             })
           }))
@@ -1433,18 +1592,49 @@ window.__ModuleLoader__.load({
       },
     }
 
-    /** Composer tool-row button: opens a registered '/' source (ui-skill's
-     *  `skill` source) over the session's trigger controller. Hidden while the
-     *  inputTriggers/sessions services are absent. */
+    /** Composer tool-row button: 加号+文字 chip，点击在按钮上方打开自带搜索的
+     *  技能 picker 浮层（候选 = 宿主技能注册表，ui-skill 同源）；pick 经
+     *  slash/input-insert-text 写入 `/<name> `。浮层背板盖住按钮以外的区域，
+     *  再点一次按钮会先落在背板上——天然形成开关切换。
+     *  connection 缺席（picker 无目录来源）时回退旧的 toggleSource 宿主菜单；
+     *  inputTriggers/sessions 缺席时按钮隐藏（与旧行为一致）。 */
     function ComposerButtonSlot(props) {
       useEffect(ensureStyles, [])
+      const [picker, setPicker] = useState(null) // {left, top} 锚点快照；null = 关闭
+      const [rows, setRows] = useState(null)     // null = 加载中
+      const btnRef = useRef(null)
+      const liveInput = useRef(props.input)
+      liveInput.current = props.input
       const ready = !!(composerScope && composerScope.inputTriggers && composerScope.sessions && props.sessionId)
       if (!ready) return null
+      const close = () => setPicker(null)
+      const open = () => {
+        // 目录来源缺席 → 退回宿主斜杠菜单（无搜索，但按钮不消失）
+        if (!connectionApi) { openTriggerSource(composerScope, props.sessionId, liveInput.current, props.source); return }
+        let anchor = { left: 16, top: 160 }
+        try { if (btnRef.current) anchor = btnRef.current.getBoundingClientRect() } catch {}
+        setPicker({ left: anchor.left, top: anchor.top })
+        setRows(null)
+        fetchSkillCandidates(connectionApi, composerScope.sessions, props.sessionId)
+          .then((list) => setRows(Array.isArray(list) ? list : []))
+          .catch(() => setRows([]))
+      }
+      const pick = (row) => {
+        insertComposerText(composerScope, props.sessionId, liveInput.current, `/${row.name} `)
+        close()
+        refocusComposer()
+      }
+      const popover = picker !== null && RDP && typeof RDP.createPortal === 'function'
+        ? RDP.createPortal(h(SkillPicker, { t: props.__t, anchor: picker, rows, onClose: close, onPick: pick }), document.body)
+        : null
       return h('button', {
         className: 'sk-chip',
+        ref: btnRef,
         title: props.title || props.label,
-        onClick: () => { openTriggerSource(composerScope, props.sessionId, props.input, props.source) },
-      }, `${props.icon || ''}${props.icon ? ' ' : ''}${props.label}`)
+        'aria-haspopup': 'dialog',
+        'aria-expanded': picker !== null,
+        onClick: open,
+      }, props.label, popover)
     }
 
     return module.exports