@followbin/dsh-selection 0.2.0 → 0.2.1

package/README.md

@@ -27,7 +27,7 @@ Now select some text in any app. Settings are under **Selection assistant** in D
 
 To install the newest code from GitHub instead, enter `https://github.com/followbin/dsh-selection` in step 2.
 
-**Updating**: when a new version is published, the plugin's page under **Plugins** lists it in **Versions**; click **Update**. A copy installed from GitHub or a local folder has no **Versions** section: uninstall it and install it again. Your settings and usage are kept, because they are stored in `~/.dsh/selection`, outside the plugin.
+**Updating**: when a new version is published, **General → Version** on the plugin's settings page offers **Update to x.y.z**. It is the same update as **Versions → Update** on the plugin's page under **Plugins**: DSH stops the old version, installs the new one and puts the old one back if that fails. A copy installed from GitHub or a local folder cannot update this way: uninstall it and install it again. Your settings and usage are kept, because they are stored in `~/.dsh/selection`, outside the plugin.
 
 ## Features
 

package/README.zh-CN.md

@@ -27,7 +27,7 @@
 
 想装 GitHub 上的最新代码，第 2 步改填 `https://github.com/followbin/dsh-selection`。
 
-**更新**：发布新版本后，在「插件」里打开它，「版本」一栏会列出新版本，点「更新」即可。从 GitHub 或本地目录装的没有「版本」一栏，要先卸载再重新安装。设置和用量存在 `~/.dsh/selection`，不在插件目录里，卸载不会丢。
+**更新**：发布新版本后，插件设置页「常规 → 版本」里会出现「更新到 x.y.z」，点一下就更新。这和在「插件」里打开它、点「版本 → 更新」是同一个操作：DSH 先停掉旧版、装上新版，失败会还原。从 GitHub 或本地目录装的不能这样更新，要先卸载再重新安装。设置和用量存在 `~/.dsh/selection`，不在插件目录里，卸载不会丢。
 
 ## 功能
 

package/client.js

@@ -68,6 +68,21 @@ window.__ModuleLoader__.load({
       'toolbar.style.full': '常规',
       'toolbar.style.mini': '迷你',
       'toolbar.style.hint': '迷你模式只显示一个图标，鼠标停在上面会展开全部技能。在工具栏的菜单里也能切换。',
+      'version.label': '版本',
+      'version.current': '当前 {version}',
+      'version.latest': '当前 {version}，已是最新版本',
+      'version.available': '当前 {installed}，可以更新到 {version}',
+      'version.needsDsh': '当前 {installed}；新版本 {version} 需要先更新 DSH',
+      'version.notUpdatable': '当前 {version}。从 GitHub 或本地目录安装的版本不能在这里更新，可以到「插件」页卸载后重新安装',
+      'version.checkFailed': '当前 {version}；检查更新失败：{reason}',
+      'version.updating': '正在更新到 {version}，工具栏会短暂停止',
+      'version.updated': '已更新到 {version}，新版本已经在运行',
+      'version.restart': '已安装 {version}，重启 DSH 后生效',
+      'version.failed': '更新到 {version} 失败：{reason}。可以到「插件」页查看详情',
+      'version.check': '检查更新',
+      'version.checking': '正在检查…',
+      'version.update': '更新到 {version}',
+      'version.updatingShort': '正在更新…',
       'language.title': '语言',
       'language.native': '我的母语',
       'language.translate': '翻译成',
@@ -195,6 +210,21 @@ window.__ModuleLoader__.load({
       'toolbar.style.full': 'Full',
       'toolbar.style.mini': 'Mini',
       'toolbar.style.hint': 'The mini toolbar is a single icon; rest the pointer on it to see every skill. You can also switch from the toolbar’s menu.',
+      'version.label': 'Version',
+      'version.current': 'Version {version}',
+      'version.latest': 'Version {version}, the latest',
+      'version.available': 'Version {installed}; {version} is available',
+      'version.needsDsh': 'Version {installed}; {version} needs a newer DSH',
+      'version.notUpdatable': 'Version {version}. A copy installed from GitHub or a local folder cannot be updated here; uninstall it on the Plugins page and install it again',
+      'version.checkFailed': 'Version {version}; checking for updates failed: {reason}',
+      'version.updating': 'Updating to {version}; the toolbar stops for a moment',
+      'version.updated': 'Updated to {version}; the new version is running',
+      'version.restart': '{version} is installed and takes effect after DSH restarts',
+      'version.failed': 'Updating to {version} failed: {reason}. The Plugins page has the details',
+      'version.check': 'Check for updates',
+      'version.checking': 'Checking…',
+      'version.update': 'Update to {version}',
+      'version.updatingShort': 'Updating…',
       'language.title': 'Language',
       'language.native': 'My language',
       'language.translate': 'Translate into',
@@ -717,6 +747,104 @@ window.__ModuleLoader__.load({
 
     // ---------- Page ----------
 
+    // Updates go through DSH's plugin manager, reached the way DSH's own Plugins page reaches it: it stops
+    // this version, installs the new one and puts the old one back if that fails. Null where this DSH
+    // does not let a page reach it.
+    const PACKAGE = '@followbin/dsh-selection'
+    const updates = (() => {
+      let manager = null
+      let state = { phase: 'none' }
+      const listeners = new Set()
+      const set = (next) => {
+        state = next
+        for (const listener of listeners) listener(state)
+      }
+      const reasonOf = (value) => String(value?.message ?? value ?? 'unknown')
+      return {
+        get: () => state,
+        subscribe(listener) {
+          listeners.add(listener)
+          return () => listeners.delete(listener)
+        },
+        attach(next) {
+          manager = next
+          if (state.phase !== 'updating') set({ phase: next ? 'idle' : 'none' })
+        },
+        async check() {
+          if (!manager || state.phase === 'checking' || state.phase === 'updating') return
+          set({ phase: 'checking' })
+          let list
+          try {
+            const answer = await manager.listVersions(PACKAGE, {})
+            list = answer.ok ? answer.value : { status: 'refused', problem: 'unknown', reason: reasonOf(answer.error) }
+          } catch (error) {
+            list = { status: 'refused', problem: 'unknown', reason: reasonOf(error) }
+          }
+          if (list.status === 'listed') {
+            // Newest first; a prerelease, a deprecated version or one without a bundle is never offered.
+            const usable = list.versions.filter((entry) => entry.bundle && !entry.prerelease && !entry.deprecated)
+            const next = usable.find((entry) => !entry.incompatible)
+            const blocked = usable.find((entry) => entry.incompatible)
+            if (next) set({ phase: 'available', installed: list.installed, version: next.version, registry: list.registry })
+            else if (blocked) set({ phase: 'needs-dsh', installed: list.installed, version: blocked.version })
+            else set({ phase: 'latest', installed: list.installed })
+          } else {
+            set(list.problem === 'not-updatable' ? { phase: 'not-updatable' } : { phase: 'check-failed', reason: list.reason || list.problem })
+          }
+        },
+        async update() {
+          if (!manager || state.phase !== 'available') return
+          const { version, registry } = state
+          set({ phase: 'updating', version })
+          const requestId = globalThis.crypto?.randomUUID?.() ?? `dss-${Date.now()}-${Math.random().toString(36).slice(2)}`
+          let answer
+          try {
+            answer = await manager.updateBundle(PACKAGE, version, { registry, requestId })
+          } catch (error) {
+            answer = { ok: false, error }
+          }
+          // Once applied, DSH replaces this page with the new version's.
+          const result = answer.ok ? answer.value.result : null
+          if (result?.application === 'applied') set({ phase: 'updated', version })
+          else if (result?.application === 'restart-required') set({ phase: 'restart', version })
+          else set({ phase: 'failed', version, reason: answer.ok ? (result?.error?.code ?? result?.application ?? 'unknown') : reasonOf(answer.error) })
+        },
+      }
+    })()
+
+    function VersionRow({ t, version }) {
+      const [state, setState] = useState(updates.get())
+      useEffect(() => updates.subscribe(setState), [])
+      // Checks once when the page opens, or when DSH's plugin manager arrives after it.
+      useEffect(() => {
+        if (state.phase === 'idle') void updates.check()
+      }, [state.phase])
+      const installed = state.installed || version
+      const hint = {
+        none: fill(t('version.current'), { version }),
+        idle: fill(t('version.current'), { version }),
+        checking: fill(t('version.current'), { version }),
+        latest: fill(t('version.latest'), { version: installed }),
+        available: fill(t('version.available'), { installed, version: state.version }),
+        'needs-dsh': fill(t('version.needsDsh'), { installed, version: state.version }),
+        'not-updatable': fill(t('version.notUpdatable'), { version }),
+        'check-failed': fill(t('version.checkFailed'), { version, reason: state.reason }),
+        updating: fill(t('version.updating'), { version: state.version }),
+        updated: fill(t('version.updated'), { version: state.version }),
+        restart: fill(t('version.restart'), { version: state.version }),
+        failed: fill(t('version.failed'), { version: state.version, reason: state.reason }),
+      }[state.phase]
+      let action = null
+      if (state.phase === 'available') {
+        action = h('button', { type: 'button', className: 'dss-button primary', onClick: () => void updates.update() }, fill(t('version.update'), { version: state.version }))
+      } else if (state.phase === 'checking' || state.phase === 'updating') {
+        action = h('button', { type: 'button', className: 'dss-button', disabled: true }, t(state.phase === 'checking' ? 'version.checking' : 'version.updatingShort'))
+      } else if (['latest', 'needs-dsh', 'check-failed', 'failed'].includes(state.phase)) {
+        action = h('button', { type: 'button', className: 'dss-button', onClick: () => void updates.check() }, t('version.check'))
+      }
+      return h(Row, { label: t('version.label'), hint }, action)
+    }
+
     function SettingsPage(props) {
       const t = typeof props.t === 'function' ? props.t : (key) => zh[key] || key
       const [state, setState] = useState(null)
@@ -875,7 +1003,8 @@ window.__ModuleLoader__.load({
 
           panel('general',
             h('div', { className: 'dss-card', style: { marginTop: 20 } },
-              h(Row, { label: t('enabled.label'), hint: t('enabled.hint') }, h(Switch, { checked: settings.enabled, label: t('enabled.label'), onChange: (enabled) => update({ enabled }) }))),
+              h(Row, { label: t('enabled.label'), hint: t('enabled.hint') }, h(Switch, { checked: settings.enabled, label: t('enabled.label'), onChange: (enabled) => update({ enabled }) })),
+              h(VersionRow, { t, version: state.version })),
             h(Section, { title: t('toolbar.title') },
             h('div', { className: 'dss-card' },
               h(Row, { label: t('toolbar.style'), hint: t('toolbar.style.hint') },
@@ -1027,7 +1156,7 @@ window.__ModuleLoader__.load({
       return h(PageBoundary, props, h(SettingsPage, props))
     }
 
-    // Dashed selection frame around lines of text (Lucide "text-select", ISC).
+    // The plugin's mark as a line drawing; src/shared/icons.mjs has the same path as BRAND_LINE.
     const SIDEBAR_ICON = 'M4 8V6a2 2 0 0 1 2-2h2M16 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M8 20H6a2 2 0 0 1-2-2v-2M12 6.8c.47 2.87 2.33 4.73 5.2 5.2-2.87.47-4.73 2.33-5.2 5.2-.47-2.87-2.33-4.73-5.2-5.2 2.87-.47 4.73-2.33 5.2-5.2Z'
 
     function SidebarIcon({ size = 18, active }) {
@@ -1054,6 +1183,15 @@ window.__ModuleLoader__.load({
           'dsh-selection: settings page',
         )
         ctx.effect(() => events.start(), 'dsh-selection: event stream')
+        // Updates need DSH's plugin manager; a DSH that gives a page none still shows everything else.
+        if (typeof ctx.inject === 'function') {
+          ctx.inject(['remote', 'remote.pluginManager'], (sub) => {
+            sub.effect(() => {
+              updates.attach(sub.remote.pluginManager)
+              return () => updates.attach(null)
+            }, 'dsh-selection: updates')
+          })
+        }
         // "More settings…" in the toolbar menu asks the Host to bring DSH forward on this page.
         ctx.effect(() => events.subscribe((event) => {
           if (event !== 'navigate') return

package/index.js

@@ -1,11 +1,15 @@
 // DSH plugin entry (Host side). Starts the selection service and mounts its HTTP API.
 // The settings page lives in client.js; the toolbar runs in a worker process (src/worker).
+import { readFileSync } from 'node:fs'
 import { join } from 'node:path'
 import { createHttpHandler, ROUTE } from './src/host/http.mjs'
 import { createLogger } from './src/host/log.mjs'
 import { createSelectionService } from './src/host/service.mjs'
 import { dataDirectory } from './src/shared/paths.mjs'
 
+// Shown on the settings page beside the update check.
+const { version } = JSON.parse(readFileSync(new URL('./package.json', import.meta.url), 'utf8'))
+
 export const name = 'dsh-selection'
 export const inject = ['webServer', 'connection']
 
@@ -26,6 +30,7 @@ export function apply(ctx, config = {}) {
     dataDir,
     desktop,
     promptForPermission: config.promptForPermission !== false,
+    version,
   })
   log('info', 'plugin started', { platform: process.platform, desktop })
   ctx.effect(() => () => service.dispose(), 'dsh-selection: service')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@followbin/dsh-selection",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Select text in any app and let DSH translate, summarize, explain, answer or read it aloud.",
   "keywords": [
     "dsh",

package/src/host/service.mjs

@@ -30,12 +30,14 @@ export class BadRequest extends Error {}
  *   platform?: string,
  *   startWorker?: typeof startWorker,
  *   openExternal?: (url: string) => void,
+ *   version?: string,
  * }} options `desktop` is false when the Host is not on the user's machine (e.g. a remote web Host).
  *   Tests replace `platform`, `startWorker` and `openExternal`.
  */
 export function createSelectionService({
   getLlm, log, dataDir = dataDirectory(), desktop, promptForPermission = true,
   platform = process.platform, startWorker: launchWorker = startWorker, openExternal = (url) => openWithSystem(url, log),
+  version = '',
 }) {
   const settings = createSettingsStore({ file: join(dataDir, 'settings.json'), log })
   const model = createModelClient({ getLlm, log })
@@ -241,6 +243,7 @@ export function createSelectionService({
         defaults: defaultSettings(),
         status,
         recentApps: [...recentApps],
+        version,
         catalog: {
           builtins: BUILTIN_SKILLS,
           languages: LANGUAGES,

package/src/worker/controller.mjs

@@ -20,12 +20,14 @@ const SEARCH_MAX_LENGTH = 2000
  *   idPrefix: string,
  *   now?: () => number,
  *   later?: (callback: () => void, ms: number) => unknown,
+ *   trackPointer?: (on: boolean) => void,
  * }} options `positions` are selection-hook's INVALID_COORDINATE and PositionLevel.SEL_FULL.
  *   `idPrefix` must differ between worker processes, so a late answer never lands in a new panel.
+ *   `trackPointer` turns the hook's mouse moves on while the overlay shows, and off again.
  */
 export function createController({
   overlay, speech, send, log, writeClipboard, openUrl, positions, idPrefix,
-  now = Date.now, later = setTimeout,
+  now = Date.now, later = setTimeout, trackPointer = () => {},
 }) {
   let config = null
   /** `text` goes to the model and the panel; `full` is what Copy, Read aloud and Search use. */
@@ -75,6 +77,7 @@ export function createController({
     selection = { id: ++nextSelection, text: cut(text, config.maxTextLength), full: text, app: data.programName }
     shownAt = now()
     overlay.showBar(anchor)
+    trackPointer(true)
     // The text stays here until the user picks an action; the Host only learns which app it came from.
     send({ type: 'selection', app: data.programName })
   }
@@ -93,6 +96,10 @@ export function createController({
     if (overlay.mode !== 'hidden' && !pressedOnOverlay) dismiss({ reason: 'click-outside', point })
   }
 
+  function onMouseMove(point) {
+    if (overlay.mode !== 'hidden') overlay.pointer(point)
+  }
+
   function onMouseWheel(point) {
     if (overlay.mode === 'bar' && !overlay.contains(point)) dismiss({ reason: 'scroll-outside', point })
   }
@@ -261,9 +268,10 @@ export function createController({
     panel = null
     overlay.setKeyable(false)
     overlay.hide()
+    trackPointer(false)
   }
 
-  return { configure, onSelection, onMouseDown, onMouseWheel, onKeyDown, onKeyUp, onPage, onResult }
+  return { configure, onSelection, onMouseDown, onMouseMove, onMouseWheel, onKeyDown, onKeyUp, onPage, onResult }
 }
 
 /** Shortens text without splitting a surrogate pair, which encodeURIComponent and JSON would reject. */

package/src/worker/main.mjs

@@ -61,12 +61,15 @@ controller = createController({
   openUrl: (url) => openUrl(url, log),
   positions: { invalid: SelectionHook.INVALID_COORDINATE, fullSelection: SelectionHook.PositionLevel.SEL_FULL },
   idPrefix: String(process.pid),
+  // Mouse moves cost CPU on every move anywhere, so the hook reports them only while the overlay shows.
+  trackPointer: (on) => (on ? hook.enableMouseMoveEvent() : hook.disableMouseMoveEvent()),
 })
 applyConfig(config)
 
 hook.on('text-selection', guarded('selection', (data) => controller.onSelection(data)))
 hook.on('mouse-down', guarded('mouse-down', (point) => controller.onMouseDown(point)))
 hook.on('mouse-wheel', guarded('mouse-wheel', (point) => controller.onMouseWheel(point)))
+hook.on('mouse-move', guarded('mouse-move', (point) => controller.onMouseMove(point)))
 hook.on('key-down', guarded('key-down', ({ uniKey }) => {
   if (uniKey === 'Alt' && !altDown) {
     altDown = true

package/src/worker/overlay.mjs

@@ -10,6 +10,8 @@ import { fitWindow, place, roomBelow } from './placement.mjs'
 const PUMP_VISIBLE_MS = 16
 const PUMP_HIDDEN_MS = 250
 const PAGE_READY_TIMEOUT_MS = 5000
+// Pointer updates for hover: one per frame is as often as the page can draw them.
+const POINTER_INTERVAL_MS = 16
 // The least height a panel gets for its answer before it scrolls: about eight lines plus the header and
 // the follow-up box. Below the selection it may grow further, down to the bottom of the screen.
 const PANEL_MIN_ROOM = 280
@@ -79,6 +81,10 @@ export async function createOverlay({ onMessage, log }) {
   let bounds = null
   // How tall the panel was last allowed to grow, and whether to fill that at once, as told to the page.
   let room = null
+  // The pointer as passed to the page: at most once a frame, and once more when it leaves the window.
+  let pointerTimer = null
+  let pointerNext = null
+  let pointerInside = false
   // Once the user drags the window it stays where they put it: later size changes keep its top-left.
   let moved = false
   let drag = null
@@ -232,6 +238,9 @@ export async function createOverlay({ onMessage, log }) {
     },
     hide() {
       if (mode === 'hidden') return
+      clearTimeout(pointerTimer)
+      pointerTimer = null
+      pointerInside = false
       overlayWindow.hide()
       mode = 'hidden'
       placement = null
@@ -242,6 +251,23 @@ export async function createOverlay({ onMessage, log }) {
       call('reset')
       setPump(PUMP_HIDDEN_MS)
     },
+    /**
+     * Passes the pointer (selection-hook coordinates) to the page while the window shows: macOS sends
+     * no mouse moves to the window of a background process, so the page draws hover from these.
+     */
+    pointer(point) {
+      if (mode === 'hidden' || !bounds) return
+      const { x, y } = toLogical(point)
+      const inside = x >= bounds.x && x < bounds.x + bounds.width && y >= bounds.y && y < bounds.y + bounds.height
+      if (!inside && !pointerInside) return
+      pointerInside = inside
+      pointerNext = inside ? { x: Math.round(x - bounds.x), y: Math.round(y - bounds.y) } : null
+      if (pointerTimer) return
+      pointerTimer = setTimeout(() => {
+        pointerTimer = null
+        if (mode !== 'hidden') call('pointer', pointerNext)
+      }, POINTER_INTERVAL_MS)
+    },
     get mode() { return mode },
     /** Where the window was placed, in the same coordinates as `contains` (self tests and diagnostics). */
     get bounds() { return bounds },

package/ui/toolbar.css

@@ -49,9 +49,10 @@ svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; s
 
 button, select, textarea { font: inherit; color: inherit; }
 button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; border-radius: 8px; cursor: default; }
-/* Hover waits for a real pointer movement after each show (data-pointer, see toolbar.js). */
-[data-pointer] button:hover { background: var(--hover); }
-button:active, [data-pointer] button:active { background: var(--press); }
+/* Hover is data-hover, set from the pointer the worker reports (see bar.pointer in toolbar.js): macOS
+   sends no mouse moves to the window of a background process, so :hover would never apply. */
+button[data-hover] { background: var(--hover); }
+button:active { background: var(--press); }
 button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 .icon-button { width: 30px; height: 30px; padding: 0; color: var(--text); }
 .icon-button[disabled] { opacity: 0.35; pointer-events: none; }
@@ -96,10 +97,10 @@ button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); o
   color: var(--text); font-size: 12px; font-weight: 500; line-height: 26px; cursor: default;
   text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
 }
-[data-pointer] .panel-language:hover { background-color: var(--press); }
+.panel-language[data-hover] { background-color: var(--press); }
 [data-kind="translate"] .panel-language { display: inline-block; }
 .tool { width: 28px; height: 28px; color: var(--muted); }
-[data-pointer] .tool:hover { color: var(--text); }
+.tool[data-hover] { color: var(--text); }
 .tool[aria-pressed="true"] { color: var(--accent); background: var(--hover); }
 .tool.done { color: #1f9d55; }
 [data-kind="ask"] .tool[data-tool="retry"] { display: none; }
@@ -133,7 +134,7 @@ button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); o
 .composer { flex: none; display: none; align-items: flex-end; gap: 6px; padding: 8px 10px 10px 14px; border-top: 1px solid var(--hairline); }
 [data-kind="ask"] .composer, [data-composer="shown"] .composer { display: flex; }
 .composer textarea {
-  flex: 1; min-height: 22px; max-height: 96px; padding: 4px 0; border: 0; outline: 0; resize: none; background: transparent;
+  flex: 1; min-height: 28px; max-height: 96px; padding: 4px 0; border: 0; outline: 0; resize: none; background: transparent;
   overflow-y: hidden; scrollbar-width: none;
   line-height: 1.5; user-select: text; -webkit-user-select: text; cursor: text;
 }
@@ -141,7 +142,7 @@ button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); o
 .composer textarea::-webkit-scrollbar { display: none; }
 .composer textarea::placeholder { color: var(--muted); }
 .send { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; }
-[data-pointer] .send:hover { background: var(--accent); filter: brightness(1.08); }
+.send[data-hover] { background: var(--accent); filter: brightness(1.08); }
 .send[disabled] { opacity: 0.35; }
 
 /* Model output */
@@ -155,7 +156,7 @@ button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); o
 .markdown pre code { padding: 0; background: none; font-size: 12px; line-height: 1.5; }
 .markdown blockquote { padding-left: 10px; border-left: 3px solid var(--hairline); color: var(--muted); }
 .markdown a { color: var(--accent); text-decoration: none; cursor: pointer; }
-[data-pointer] .markdown a:hover { text-decoration: underline; }
+.markdown a[data-hover] { text-decoration: underline; }
 .markdown table { border-collapse: collapse; font-size: 12.5px; }
 .markdown th, .markdown td { padding: 4px 8px; border: 1px solid var(--hairline); text-align: left; vertical-align: top; }
 .markdown th { background: var(--soft); font-weight: 600; }

package/ui/toolbar.js

@@ -79,7 +79,14 @@
   const emptyState = (requestId = null, pending = false) => ({ requestId, text: '', turn: null, pending, failure: null })
   let skills = { bar: [], more: [] }
   let style = 'full'
-  let hoverTimer = null
+  // The mini toolbar opens its menu once the pointer rests on the icon, and closes it once the pointer
+  // has been out of the window for a moment.
+  const HOVER_OPEN_MS = 120
+  const HOVER_CLOSE_MS = 300
+  let openTimer = null
+  let closeTimer = null
+  /** The control drawn as hovered. */
+  let hovered = null
 
   // The menu offers whichever style is not in use.
   function drawStyleItem() {
@@ -87,6 +94,18 @@
     els.styleItem.querySelector('span').textContent = style === 'mini' ? t.fullStyle : t.miniStyle
   }
   drawStyleItem()
+
+  function stopHoverTimers() {
+    clearTimeout(openTimer)
+    clearTimeout(closeTimer)
+    openTimer = null
+    closeTimer = null
+  }
+
+  function clearHover() {
+    hovered?.removeAttribute('data-hover')
+    hovered = null
+  }
   let state = emptyState()
   let renderTimer = null
   // Timers rather than requestAnimationFrame: the view can be occluded or the screen locked, and then
@@ -104,6 +123,7 @@
   }
 
   function setMenu(open) {
+    stopHoverTimers()
     if (open) {
       const bar = $('.bar')
       const button = style === 'mini' ? els.mini : els.more
@@ -182,8 +202,8 @@
       queueSize()
     },
     showBar() {
-      clearTimeout(hoverTimer)
-      delete body.dataset.pointer
+      stopHoverTimers()
+      clearHover()
       body.dataset.mode = 'bar'
       setMenu(false)
     },
@@ -191,7 +211,7 @@
       if (body.dataset.mode === 'bar') setMenu(Boolean(open))
     },
     showPanel({ skill, text, app, languages, translateTarget }) {
-      delete body.dataset.pointer
+      clearHover()
       body.dataset.mode = 'panel'
       body.dataset.menu = 'closed'
       body.dataset.kind = skill.kind === 'ask' ? 'ask' : skill.id === 'translate' ? 'translate' : 'prompt'
@@ -260,6 +280,7 @@
       if (requestId !== state.requestId) return
       state.pending = false
       body.dataset.composer = 'shown'
+      resizeInput()
       scheduleRender()
     },
     fail(requestId, failure) {
@@ -291,9 +312,36 @@
       else delete body.dataset.fill
       queueSize()
     },
+    /**
+     * Where the pointer is in the window, or null once it has left, from the worker's global mouse
+     * hook: macOS sends no mouse moves to the window of a background process, so hover is drawn here.
+     */
+    pointer(point) {
+      const target = point ? document.elementFromPoint(point.x, point.y) : null
+      const control = target?.closest('button, select, a') ?? null
+      if (control !== hovered) {
+        clearHover()
+        control?.setAttribute('data-hover', '')
+        hovered = control
+      }
+      if (style !== 'mini' || body.dataset.mode !== 'bar') return
+      if (body.dataset.menu !== 'open') {
+        if (!target?.closest('.mini-button') || press) {
+          clearTimeout(openTimer)
+          openTimer = null
+        } else if (openTimer === null) {
+          openTimer = setTimeout(() => setMenu(true), HOVER_OPEN_MS)
+        }
+      } else if (point) {
+        clearTimeout(closeTimer)
+        closeTimer = null
+      } else if (closeTimer === null) {
+        closeTimer = setTimeout(() => setMenu(false), HOVER_CLOSE_MS)
+      }
+    },
     reset() {
-      clearTimeout(hoverTimer)
-      delete body.dataset.pointer
+      stopHoverTimers()
+      clearHover()
       body.dataset.mode = 'hidden'
       body.dataset.menu = 'closed'
       if (document.activeElement) document.activeElement.blur()
@@ -310,6 +358,7 @@
         type: 'probe',
         mode: body.dataset.mode,
         menu: body.dataset.menu,
+        hovered: hovered ? hovered.getAttribute('aria-label') || hovered.textContent.trim() : null,
         viewport: { width: innerWidth, height: innerHeight },
         card: { width: Math.round(box.width), height: Math.round(box.height) },
         buttons: buttons.map((button) => button.getAttribute('aria-label') || button.textContent.trim()),
@@ -368,7 +417,8 @@
   function resizeInput() {
     els.input.style.height = 'auto'
     const height = els.input.scrollHeight
-    els.input.style.height = `${Math.min(height, 96)}px`
+    // A hidden box measures nothing; it is measured again when it shows.
+    if (height) els.input.style.height = `${Math.min(height, 96)}px`
     // Scrollable only past its tallest size: at fractional display scaling one line can overflow by a
     // fraction of a pixel, which would otherwise let it scroll.
     els.input.style.overflowY = height > 96 ? 'auto' : 'hidden'
@@ -391,7 +441,6 @@
       return
     }
     if (event.target.closest('.mini-button')) {
-      clearTimeout(hoverTimer)
       setMenu(true)
       return
     }
@@ -515,36 +564,6 @@
     if (body.dataset.mode === 'panel') post({ type: 'keyboard', needed: true })
   })
 
-  // The mini toolbar opens its menu once the pointer rests on the icon, and closes it once the pointer
-  // has left the window for a moment. Leaving the icon alone is not enough: a menu that does not fit
-  // below makes the worker move the whole window, which can take the icon from under the pointer.
-  const HOVER_OPEN_MS = 120
-  const HOVER_CLOSE_MS = 300
-  els.mini.addEventListener('pointerenter', () => {
-    clearTimeout(hoverTimer)
-    if (style !== 'mini' || body.dataset.menu === 'open' || press) return
-    hoverTimer = setTimeout(() => setMenu(true), HOVER_OPEN_MS)
-  })
-  els.mini.addEventListener('pointerleave', () => {
-    if (body.dataset.menu !== 'open') clearTimeout(hoverTimer)
-  })
-  els.mini.addEventListener('pointerdown', () => clearTimeout(hoverTimer))
-  document.addEventListener('pointerout', (event) => {
-    if (event.relatedTarget || style !== 'mini' || body.dataset.menu !== 'open') return
-    clearTimeout(hoverTimer)
-    hoverTimer = setTimeout(() => setMenu(false), HOVER_CLOSE_MS)
-  })
-  document.addEventListener('pointerover', () => {
-    if (body.dataset.menu === 'open') clearTimeout(hoverTimer)
-  })
-
-  // WebKit keeps :hover on whatever was under the pointer when it last saw one, through hiding and
-  // showing the window, and this process is never the active app, so a pointer that does not move
-  // over the page is not tracked. Hover styles therefore wait for a real movement after each show.
-  document.addEventListener('pointermove', () => {
-    if (!('pointer' in body.dataset)) body.dataset.pointer = ''
-  })
-
   // Dropping a link or file would navigate the view away from this page.
   for (const type of ['dragover', 'drop']) document.addEventListener(type, (event) => event.preventDefault())
   window.addEventListener('error', (event) => post({ type: 'page-error', message: String(event.message) }))