dsh-composer-predictions 1.2.3 → 1.2.5

package/CHANGELOG.md

@@ -6,6 +6,28 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [1.2.5] - 2026-10-25
+
+### Changed
+
+- The **Settings → General** row draws its own switch instead of loading
+  `@deepseek-ai/dsh-client-ui-primitives`. A harness-side change to that package
+  could previously fail the whole plugin at load; the markup, theme tokens and
+  behaviour are unchanged.
+- The README comparison table names the Settings switch.
+
+
+## [1.2.4] - 2026-10-25
+
+### Fixed
+
+- The ghost is anchored to the composer card that owns the overlay, found
+  through the overlay's own DOM ancestry. It previously measured the first
+  `[data-composer-card]` in the document, so with more than one composer
+  mounted (another panel, a transition, a second window) the suggestion could
+  paint over another conversation and Tab would consult the wrong card.
+- Switching Sessions also clears the measured box, not just the suggestion.
+
 ## [1.2.3] - 2026-10-25
 
 ### Changed

package/README.md

@@ -7,7 +7,7 @@
 AI autocomplete and ghost-text suggestions for the composer in **DeepSeek
 Harness desktop and the Web GUI**.
 
-**Current release: 1.2.2** · [Install or update](#install) · [中文说明](#中文说明)
+**Current release: [latest on npm](https://www.npmjs.com/package/dsh-composer-predictions)** · [Install or update](#install) · [中文说明](#中文说明)
 
 - **Next message** — after the agent replies, the empty composer shows a
   streamed suggestion for your likely next message. **Tab** accepts it as an
@@ -40,9 +40,10 @@ for you.
 | Streamed rendering | ✅ SSE (`/v2`) | not documented | ✅ | ✅ |
 | Recent tool calls and outcomes in the prompt | ✅ | — | — | — |
 | Cache | ✅ per turn + per draft | ✅ | ✅ | not documented |
+| Switch off in Settings, no uninstall | ✅ Settings → General | ✅ Settings section | not documented | not documented |
 
 "—" means the feature is not mentioned in that package's README as of
-2026-10-24, not that it is impossible. If all you want is an after-turn
+2026-10-25, not that it is impossible. If all you want is an after-turn
 suggestion, `dsh-composer-prediction` is a perfectly good, more established
 choice — this plugin is for people who also want the caret continuation and
 keyboard-only candidate switching.
@@ -100,12 +101,12 @@ https://raw.githubusercontent.com/Stijnus/dsh-composer-predictions/main/market-i
 `Tab` 采纳已完成的候选为可编辑草稿，不会自动发送；`Alt+↓/↑` 切换最多三个候选，
 `Esc` 关闭。设置 → 通用 → 输入预测可开关，设置保存在当前设备的浏览器中。
 
-安装或更新：**插件 → 安装 → `dsh-composer-predictions@1.2.2`**，然后重启 Harness。
-CLI 用户可运行 `dsh plugin --profile web add dsh-composer-predictions@1.2.2`，
+安装或更新：**插件 → 安装 → `dsh-composer-predictions`**，然后重启 Harness。
+CLI 用户可运行 `dsh plugin --profile web add dsh-composer-predictions`，
 把 `web` 换成自己的 profile。预测会调用会话模型并消耗 token，虽然不会出现在会话日志和 token 统计中。
 
 也可以把上方 [Install](#install) 中的市场索引添加到「插件 → 发现」。
-演示、完整配置与限制见本页；[1.2.2 发布说明](https://github.com/Stijnus/dsh-composer-predictions/releases/tag/v1.2.2)。
+演示、完整配置与限制见本页；[最新发布说明](https://github.com/Stijnus/dsh-composer-predictions/releases/latest)。
 
 ## How it works
 

package/client.js

@@ -20,7 +20,38 @@ window.__ModuleLoader__.load({
   factory(require) {
     const React = require('react')
     const h = React.createElement
-    const { Switch } = require('@deepseek-ai/dsh-client-ui-primitives')
+
+    /**
+     * Local switch button. The host's own switch is a harness Client package,
+     * which a bundle must not load: it can change without notice, and a throw
+     * would take the whole plugin down. This reproduces its markup, CSS and
+     * behaviour with plugin-owned classes and theme tokens only.
+     */
+    const SWITCH_CSS = [
+      '.cp-switch{box-sizing:border-box;position:relative;flex:0 0 auto;width:36px;height:20px;padding:2px;border:0;border-radius:999px;background:var(--dsw-alias-border-l3);cursor:pointer}',
+      '.cp-switch[aria-checked="true"]{background:var(--dsw-alias-brand-primary)}',
+      '.cp-switch:disabled{cursor:default;opacity:.5}',
+      '.cp-switch:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}',
+      '.cp-switch__thumb{display:block;width:16px;height:16px;border-radius:50%;background:var(--dsw-alias-label-primary-foreground);transition:transform .12s}',
+      '.cp-switch[aria-checked="false"] .cp-switch__thumb{background:var(--dsw-alias-switch-thumb)}',
+      '.cp-switch[aria-checked="true"] .cp-switch__thumb{transform:translate(16px)}',
+    ].join('')
+
+    function Switch({ checked, label, onChange, disabled }) {
+      return h(
+        'button',
+        {
+          type: 'button',
+          role: 'switch',
+          'aria-checked': checked === true ? 'true' : 'false',
+          'aria-label': label,
+          className: 'cp-switch',
+          disabled: disabled === true,
+          onClick: () => onChange(checked !== true),
+        },
+        h('span', { className: 'cp-switch__thumb', 'aria-hidden': 'true' }),
+      )
+    }
 
     const NS = 'composer-predictions'
     const ENDPOINT = '/composer-prediction/v2'
@@ -92,6 +123,7 @@ window.__ModuleLoader__.load({
     function PredictionsSetting({ t }) {
       const checked = useEnabled()
       return h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, padding: '16px 0', borderBottom: '0.5px solid var(--dsw-alias-border-l2)' } },
+        h('style', null, SWITCH_CSS),
         h('div', null,
           h('div', { style: { fontSize: 14, lineHeight: '20px' } }, t('enabled')),
           h('div', { style: { fontSize: 12, lineHeight: '18px', marginTop: 4, color: 'var(--dsw-alias-label-secondary)' } }, t('description')),
@@ -162,10 +194,18 @@ window.__ModuleLoader__.load({
       opacity: 0.8,
     }
 
-    /** Locate the resident composer card and its editable root. */
-    function composerElements() {
+    /**
+     * Locate the composer card this overlay actually belongs to.
+     *
+     * The seat is rendered inside the resident composer card, so the anchor node
+     * is an ancestor-scoped key: a global `querySelector` would pick whichever
+     * card happens to be first in the document and paint that conversation's
+     * ghost over another one.
+     */
+    function composerElementsNear(anchor) {
       if (typeof document === 'undefined') return null
-      const card = document.querySelector('[data-composer-card]')
+      if (anchor === null || anchor === undefined || !anchor.isConnected) return null
+      const card = anchor.closest('[data-composer-card]')
       if (card === null) return null
       const editor = card.querySelector('[contenteditable="true"]') || card.querySelector('[role="textbox"]')
       return editor === null ? null : { card, editor }
@@ -364,6 +404,8 @@ window.__ModuleLoader__.load({
       const [box, setBox] = React.useState(null)
       const [compositionEnd, setCompositionEnd] = React.useState(0)
 
+      const anchorRef = React.useRef(null)
+      const elements = () => composerElementsNear(anchorRef.current)
       const abortRef = React.useRef(null)
       const composingRef = React.useRef(false)
       const dismissedRef = React.useRef(null)
@@ -484,6 +526,7 @@ window.__ModuleLoader__.load({
         dismissedRef.current = null
         abortRef.current?.abort()
         setGhost(NO_GHOST)
+        setBox(null)
         return () => abortRef.current?.abort()
       }, [sessionId])
 
@@ -524,7 +567,7 @@ window.__ModuleLoader__.load({
         if (dismissedRef.current !== null && dismissedRef.current.draft === draft) return undefined
         const timer = setTimeout(() => {
           if (composingRef.current) return
-          const found = composerElements()
+          const found = elements()
           if (found === null) return
           if (caretAtEnd(found.editor, draft) === null) return
           void request('continue', draft.slice(-MAX_DRAFT_CHARS))
@@ -564,7 +607,7 @@ window.__ModuleLoader__.load({
       React.useLayoutEffect(() => {
         if (ghost.mode !== 'next') return undefined
         const measure = () => {
-          const found = composerElements()
+          const found = elements()
           if (found === null) {
             setBox((previous) => (previous === null ? previous : null))
             return
@@ -590,7 +633,7 @@ window.__ModuleLoader__.load({
           setBox((previous) => (sameBox(previous, next) ? previous : next))
         }
         measure()
-        const found = composerElements()
+        const found = elements()
         let observer
         if (found !== null && typeof ResizeObserver === 'function') {
           observer = new ResizeObserver(measure)
@@ -610,7 +653,7 @@ window.__ModuleLoader__.load({
         let frame = 0
         const measure = () => {
           frame = 0
-          const found = composerElements()
+          const found = elements()
           if (found === null) {
             setBox((previous) => (previous === null ? previous : null))
             return
@@ -661,7 +704,7 @@ window.__ModuleLoader__.load({
         measure()
         document.addEventListener('selectionchange', schedule)
         document.addEventListener('scroll', schedule, true)
-        const found = composerElements()
+        const found = elements()
         window.addEventListener('resize', schedule)
         let observer
         if (found !== null && typeof ResizeObserver === 'function') {
@@ -694,7 +737,7 @@ window.__ModuleLoader__.load({
         }
         // Accepting leaves an editable draft: hand the keyboard back to the editor.
         try {
-          const found = composerElements()
+          const found = elements()
           if (found !== null && !found.card.contains(document.activeElement)) found.editor.focus()
         } catch {
           // Focus is a courtesy, never a failure.
@@ -717,7 +760,7 @@ window.__ModuleLoader__.load({
           if (event.defaultPrevented) return
           // An IME candidate window owns the keyboard while composing.
           if (event.isComposing === true || event.keyCode === 229) return
-          const found = composerElements()
+          const found = elements()
           if (found === null) return
           const target = typeof Node !== 'undefined' && event.target instanceof Node ? event.target : null
           const inEditor = found.editor.contains(document.activeElement)
@@ -755,7 +798,14 @@ window.__ModuleLoader__.load({
         return () => document.removeEventListener('keydown', onKeyDown, true)
       }, [visible, draft, ghost.items.length, ghost.active, ghost.mode])
 
-      if (!visible || box === null) return null
+      const anchor = h('span', {
+        ref: anchorRef,
+        'data-composer-prediction-anchor': '',
+        'aria-hidden': 'true',
+        style: { display: 'none' },
+      })
+
+      if (!visible || box === null) return anchor
 
       const continuation = ghost.mode === 'continue'
       const style = continuation ? CONTINUE_GHOST_STYLE : NEXT_GHOST_STYLE
@@ -775,6 +825,7 @@ window.__ModuleLoader__.load({
           showBadge ? h('span', { style: BADGE_STYLE, title: t('more') }, `${ghost.index + 1}/${ghost.items.length}`) : null,
           showKeycap ? h('kbd', { style: KEYCAP_STYLE, title: t('accept') }, 'Tab') : null,
         ),
+        anchor,
       )
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-composer-predictions",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "Tab autocomplete for the DeepSeek Harness desktop and web composer: next-message ghost text, inline draft completion and keyboard candidate cycling",
   "type": "module",
   "license": "MIT",