dsh-skill-picker 0.5.23 → 0.5.25

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.5.23",
+  "version": "0.5.25",
   "type": "module",
   "main": "lib/index.js",
   "exports": {

package/src/client/index.jsx

@@ -274,10 +274,21 @@ const buttonStyle = {
   flex: 'none',
 }
 
+/**
+ * Panel placement.
+ *
+ * Fixed (not absolute) and anchored to the RIGHT EDGE OF THE WINDOW, with the
+ * vertical offset measured from the ⚡ button so it still opens just above the
+ * composer.
+ *
+ * Why not `absolute; right: 0` on the button's own wrapper — which is what it
+ * used to be: the ⚡ sits next to the model picker, well left of the composer's
+ * right edge, so the panel was right-aligned to *that* and threw itself across
+ * the middle of the conversation, covering the text. 国豪 spotted it.
+ */
 const popoverStyle = {
-  position: 'absolute',
-  bottom: 'calc(100% + 8px)',
-  right: '0',
+  position: 'fixed',
+  right: '24px',
   width: '340px',
   maxHeight: '320px',
   display: 'flex',
@@ -409,26 +420,6 @@ const menuItemStyle = {
   whiteSpace: 'nowrap',
 }
 
-/** Lightweight source badge shown only when the list came from the host scan fallback (official API unavailable). */
-const sourceBadgeStyle = {
-  display: 'inline-flex',
-  alignItems: 'center',
-  alignSelf: 'flex-start',
-  margin: '0 8px 8px',
-  padding: '2px 8px',
-  border: '1px solid rgba(255, 193, 7, 0.35)',
-  borderRadius: '999px',
-  background: 'rgba(255, 193, 7, 0.1)',
-  color: '#d9a520',
-  fontSize: '11px',
-  lineHeight: '16px',
-  flex: 'none',
-}
-
-const sourceBadgeTextStyle = {
-  fontFamily: 'var(--ds-font-family-code, ui-monospace, monospace)',
-}
-
 /** The picker's bolt glyph: DeepSeek palette gradient + slim stroke. */
 function BoltIcon() {
   return (
@@ -486,6 +477,12 @@ function SkillPickerButton(props) {
   const itemRefs = useRef([])
   /** Pending long-press timer for the touch path (see the menu below). */
   const longPressRef = useRef(0)
+  /**
+   * Distance from the window bottom to the panel's bottom edge, measured from
+   * the ⚡ button each time the panel opens. See `popoverStyle`: the horizontal
+   * anchor is the window's right edge, only the height follows the button.
+   */
+  const [panelBottom, setPanelBottom] = useState(88)
 
   // The usage store is shared with the official `/` menu: picks made there go
   // through window.__dshSkillPickerTrack (localStorage only). Refresh this
@@ -670,8 +667,34 @@ function SkillPickerButton(props) {
     }
   }, [menu])
 
+  /**
+   * The panel used to show "本地扫描" / "/ 增强：运行时接管" as badges under the
+   * list. They are diagnostics for whoever is debugging, not something a user
+   * needs on screen — they occupied two rows and said nothing useful day to day
+   * (国豪's call, and he was right).
+   *
+   * They are not simply dropped: "the plugin is fine" and "the plugin is not
+   * running at all" look identical without them, which is the whole lesson
+   * behind issue #14. So they moved here (one console line per panel open) and
+   * into the ⚡ button's tooltip.
+   */
+  useEffect(() => {
+    if (skills === undefined) return
+    console.info(
+      `[dsh-skill-picker] 技能列表 ${skills.length} 条，来源：${source === 'host' ? '本地扫描（官方 skills API 不可用）' : '官方 API'}`
+      + `；/ 增强：${slashEnhancementMode() === 'runtime' ? '运行时接管，已生效' : '未生效（见 issue #14）'}`,
+    )
+  }, [skills, source])
+
   const toggle = () => {
     if (!open) {
+      // Measure before opening so the panel is already in place on its first
+      // paint (no visible jump).
+      const el = boxRef.current
+      if (el !== null) {
+        const rect = el.getBoundingClientRect()
+        setPanelBottom(Math.max(64, Math.round(window.innerHeight - rect.top + 8)))
+      }
       // Pull first: a pin or a pick made on another client (desktop ↔ web ↔
       // phone) should be visible the moment this panel opens. The pull fires
       // SHARED_STATE_EVENT, which is what refreshes `usage`/`pinned` here.
@@ -782,7 +805,7 @@ function SkillPickerButton(props) {
       <button
         type="button"
         onClick={toggle}
-        title="选择技能（插入 /技能名 到发送框）"
+        title={`选择技能（插入 /技能名 到发送框）${source === 'host' ? '　·　列表来自本地扫描' : ''}${slashEnhancementMode() === 'runtime' ? '　·　/ 增强：运行时接管' : ''}`}
         aria-label="选择技能"
         style={{
           ...buttonStyle,
@@ -792,7 +815,7 @@ function SkillPickerButton(props) {
         <BoltIcon />
       </button>
       {open && (
-        <div style={popoverStyle}>
+        <div style={{ ...popoverStyle, bottom: `${panelBottom}px` }}>
           <input
             value={query}
             onChange={(event) => setQuery(event.target.value)}
@@ -998,19 +1021,6 @@ function SkillPickerButton(props) {
                   ))}
                 </div>
               )}
-              {source === 'host' && (
-                <div style={sourceBadgeStyle} title="官方技能 API 不可用，列表来自本地目录扫描（与官方 / 补全同源）">
-                  <span style={sourceBadgeTextStyle}>本地扫描</span>
-                </div>
-              )}
-              {slashEnhancementMode() === 'runtime' && (
-                <div
-                  style={sourceBadgeStyle}
-                  title="`/` 菜单的模糊+拼音搜索由本插件在运行时接管官方技能源（不依赖改写任何文件，issue #14）"
-                >
-                  <span style={sourceBadgeTextStyle}>/ 增强：运行时接管</span>
-                </div>
-              )}
               <div style={{ margin: '0 10px 8px', fontSize: '11px', color: 'var(--dsw-alias-label-tertiary, #8a94a6)' }}>
                 右键技能 = 置顶 / 关闭 / 定位 / 卸载（手机长按）
               </div>