@followbin/dsh-selection 0.1.0 → 0.2.1

package/README.md

@@ -8,22 +8,31 @@ Select text in any app and a small toolbar appears next to it: translate, summar
 
 ## Install
 
-You need DSH Desktop 0.2.2 or later on macOS 14 or later. Windows support is written but not tested yet; see [Known limitations](#known-limitations).
+You need DSH Desktop 0.2.2 or later on macOS 14 or later. Windows support is written but not tested yet; see [Known limitations](#known-limitations). The screenshots below show DSH in Chinese; the English interface is laid out the same way.
 
 1. In DSH, open **Plugins** in the sidebar and click **Add plugin**.
 2. Enter `@followbin/dsh-selection` and click **Install**.
+
+   <img src="docs/images/zh/install-add.webp" alt="The Add plugin dialog with @followbin/dsh-selection entered" width="430">
+
 3. When the dialog says **Installed**, click **Enable now**.
-4. macOS asks whether "DeepSeek Harness" may control your computer using accessibility features. Choose *Open System Settings* and switch DeepSeek Harness on ([why](#permissions-macos)).
+
+   <img src="docs/images/zh/install-enable.webp" alt="The Installed dialog with its Enable now button" width="430">
+
+4. macOS asks whether "DeepSeek Harness" may control your computer using accessibility features. Choose *Open System Settings* (the highlighted default button is *Deny*) and switch DeepSeek Harness on ([why](#permissions-macos)).
+
+   <img src="docs/images/zh/install-permission.webp" alt="macOS asking whether DeepSeek Harness may use accessibility features, with Selection assistant now in DSH's sidebar" width="700">
 
 Now select some text in any app. Settings are under **Selection assistant** in DSH's sidebar.
 
 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
 
 - **Toolbar**: the first few skills sit on the toolbar, the rest live in the ⋯ menu together with "Disable in this app" and "More settings…".
+- **Mini toolbar**: a single icon instead; rest the pointer on it and every skill drops down. Switch between the two from the toolbar's menu or the settings page.
 - **Built-in skills**: Translate, Summarize, Explain, Ask DSH, Read aloud, Copy, Polish, Search.
 - **Custom skills**: a name, an icon and an instruction. Try them on sample text before saving.
 - **Answers stream in** with Markdown, can be copied, regenerated, translated into another language or pinned on screen. When an answer is complete, a box below it takes follow-up questions, for every skill.
@@ -44,11 +53,12 @@ Windows needs no extra permission.
 ![The toolbar below a selection](docs/images/en/toolbar.png)
 
 - Select text and the toolbar appears below the selection. Press **Esc**, click elsewhere or start typing to dismiss it.
+- With the mini toolbar, rest the pointer on the icon (or click it) to open the skills; they close once the pointer has left.
 - **Ask DSH** opens a small chat about the selection. Type a question and press Enter; follow-up questions keep the context.
 - Drag the toolbar, or a panel by its header, to move it; it stays where you put it.
 - In a result panel, the pin keeps it open while you click elsewhere (a new selection still replaces it); the language menu re-translates into another language. Click into the answer to select part of it and copy with ⌘C.
 - Once an answer is complete, type a follow-up in the box below it, for example "more formal" after a translation. Regenerating, or choosing another language, starts the conversation over.
-- **⋯ → Disable in this app** stops the toolbar in the current app. **⋯ → More settings…** opens the settings page in DSH.
+- **⋯ → Use the mini toolbar** turns the toolbar into a single icon, and **Use the full toolbar** in its menu turns it back. **⋯ → Disable in this app** stops the toolbar in the current app. **⋯ → More settings…** opens the settings page in DSH.
 
 ![An explanation, then a follow-up question and its answer](docs/images/en/follow-up.png)
 
@@ -65,8 +75,9 @@ Open **Selection assistant** in DSH's sidebar. The page has tabs: General, Skill
 | --- | --- | --- |
 | Show the toolbar when text is selected | on | |
 | Skills, their order, on/off | 8 built-ins | Drag, or focus the handle and press ↑ ↓. Custom skills can be edited and deleted. |
+| Toolbar style | full | Mini is a single icon whose menu holds every skill. Also switchable from the toolbar's menu. |
 | Show the toolbar | automatically | Or only while holding ⌥ / Alt during the selection. |
-| Skills on the toolbar | 5 | The rest go into the ⋯ menu. |
+| Skills on the toolbar | 5 | The rest go into the ⋯ menu. Full toolbar only. |
 | My language | 简体中文 | Auto translation goes into this language, or into English if the text is already in it. |
 | Translate into | auto | |
 | Summaries, explanations and answers in | my language | Or the language of the selected text, or a fixed language. |
@@ -131,7 +142,7 @@ After changing `src/worker/` or `ui/`, click **Restart the assistant** on the se
 | `pnpm test` | Unit tests for the Host (settings, prompts, model client, HTTP guards, worker messages), the worker's rules, the toolbar page and the settings page (the pages run in jsdom). Plain Node 20 or later is fine. |
 | `pnpm selftest` | Opens the toolbar, the ⋯ menu and both panel types, then checks native window state, layout and that the frontmost app never changes. No permission needed. Add `--interactive` to click around for 20 seconds. |
 | `pnpm dev` | Runs the real toolbar outside DSH with a demo model. Settings go to `~/.dsh/selection-dev`. On macOS the accessibility prompt is for your terminal app. |
-| `pnpm screenshots` | Redraws the images in `docs/images/` from the real toolbar page and settings page with sample text. Add `en` or `zh` for one language. Needs Google Chrome and ffmpeg. |
+| `pnpm screenshots` | Redraws the toolbar, follow-up, settings and walkthrough images in `docs/images/` from the real pages with sample text; the install screenshots are taken by hand. Add `en` or `zh` for one language. Needs Google Chrome and ffmpeg. |
 | `pnpm vendor:selection-hook [version]` | Refreshes `vendor/selection-hook` from npm. |
 
 How the pieces fit together, and why some unusual choices were made, is in [docs/architecture.md](docs/architecture.md).

package/README.zh-CN.md

@@ -12,18 +12,27 @@
 
 1. 在 DSH 侧边栏打开「插件」，点「添加插件」。
 2. 输入 `@followbin/dsh-selection`，点「安装」。
+
+   <img src="docs/images/zh/install-add.webp" alt="「添加插件」里填好 @followbin/dsh-selection" width="430">
+
 3. 显示「已安装」后，点「立即启用」。
-4. macOS 会询问是否允许「DeepSeek Harness」使用辅助功能控制这台电脑。点「打开系统设置」，把 DeepSeek Harness 打开（[为什么需要](#权限macos)）。
+
+   <img src="docs/images/zh/install-enable.webp" alt="安装完成，点「立即启用」" width="430">
+
+4. macOS 会询问是否允许「DeepSeek Harness」使用辅助功能控制这台电脑。点「打开系统设置」（高亮的默认按钮是「拒绝」，别直接按回车），把 DeepSeek Harness 打开（[为什么需要](#权限macos)）。
+
+   <img src="docs/images/zh/install-permission.webp" alt="macOS 请求辅助功能权限，DSH 侧边栏已出现「划词助手」" width="700">
 
 然后在任意应用里选中一段文字试试。设置在 DSH 侧边栏的「划词助手」里。
 
 想装 GitHub 上的最新代码，第 2 步改填 `https://github.com/followbin/dsh-selection`。
 
-**更新**：发布新版本后，在「插件」里打开它，「版本」一栏会列出新版本，点「更新」即可。从 GitHub 或本地目录装的没有「版本」一栏，要先卸载再重新安装。设置和用量存在 `~/.dsh/selection`，不在插件目录里，卸载不会丢。
+**更新**：发布新版本后，插件设置页「常规 → 版本」里会出现「更新到 x.y.z」，点一下就更新。这和在「插件」里打开它、点「版本 → 更新」是同一个操作：DSH 先停掉旧版、装上新版，失败会还原。从 GitHub 或本地目录装的不能这样更新，要先卸载再重新安装。设置和用量存在 `~/.dsh/selection`，不在插件目录里，卸载不会丢。
 
 ## 功能
 
 - **工具栏**：前几个技能直接显示，其余收进「⋯」菜单；菜单里还有「在此应用中禁用」和「更多设置…」。
+- **迷你模式**：工具栏换成一个小图标，鼠标停在上面就展开全部技能。在工具栏菜单或设置页里随时切换。
 - **内置技能**：翻译、总结、解释、问问 DSH、朗读、复制、润色、搜索。
 - **自定义技能**：起个名字、选个图标、写一句指令，保存前可以拿示例文字试一试。
 - **结果面板**：流式显示，支持 Markdown，可以复制、重新生成、切换翻译语言、固定在屏幕上。每个技能回答完后，下面都有输入框可以接着问。
@@ -44,11 +53,12 @@ Windows 不需要额外权限。
 ![选区下方的工具栏](docs/images/zh/toolbar.png)
 
 - 选中文字后，工具栏出现在选区下方。按 **Esc**、点别处或开始打字都会收起它。
+- 迷你模式下，鼠标停在图标上（或点一下）就展开技能，移开后自动收起。
 - **问问 DSH** 会打开一个针对这段文字的小对话框。输入问题后按回车，追问会保留上下文。
 - 按住工具栏，或按住面板的标题栏拖动，可以把它移开；放下后就停在那里。
 - 结果面板上的图钉可以把面板固定住，点别处也不会收起（再次划词仍会替换它）；翻译面板的语言下拉框可以换一种语言重新翻译。在回答里点一下，就能选中其中一部分并用 ⌘C 复制。
 - 回答完成后，可以在下方输入框里接着问，比如翻译完问「再正式一点」。点重新生成或换一种语言时，对话会从头开始。
-- **⋯ → 在此应用中禁用** 会让当前应用里不再弹出；**⋯ → 更多设置…** 会打开 DSH 里的设置页。
+- **⋯ → 切换为迷你模式** 把工具栏换成一个图标，图标菜单里的 **切换为常规模式** 换回来；**⋯ → 在此应用中禁用** 会让当前应用里不再弹出；**⋯ → 更多设置…** 会打开 DSH 里的设置页。
 
 ![翻译完成后接着追问](docs/images/zh/follow-up.png)
 
@@ -65,8 +75,9 @@ Windows 不需要额外权限。
 | --- | --- | --- |
 | 选中文字时显示工具栏 | 开 | |
 | 技能、顺序与开关 | 8 个内置技能 | 拖动排序，也可以聚焦拖动把手后按 ↑ ↓。自定义技能可以编辑、删除。 |
+| 工具栏样式 | 常规 | 迷你模式只有一个图标，菜单里是全部技能；也可以在工具栏菜单里切换。 |
 | 弹出方式 | 选中后自动弹出 | 也可以设为按住 ⌥ / Alt 选中时才弹出。 |
-| 工具栏上的技能数 | 5 | 其余收进「⋯」菜单。 |
+| 工具栏上的技能数 | 5 | 其余收进「⋯」菜单。只在常规模式下有效。 |
 | 我的母语 | 简体中文 | 自动翻译会译成母语；原文已经是母语时译成英文。 |
 | 翻译成 | 自动 | |
 | 总结、解释和回答使用 | 我的母语 | 也可以跟随原文的语言，或固定某种语言。 |
@@ -131,7 +142,7 @@ env ELECTRON_RUN_AS_NODE=1 "/Applications/DeepSeek Harness.app/Contents/MacOS/De
 | `pnpm test` | 单元测试：Host（设置、提示词、模型调用、HTTP 防护、worker 消息）、worker 的行为规则、工具栏页面和设置页（页面跑在 jsdom 里）。普通 Node 20 及以上就能跑。 |
 | `pnpm selftest` | 依次打开工具栏、「⋯」菜单和两种结果面板，检查原生窗口状态、布局，以及前台应用始终没变。不需要权限。加 `--interactive` 可以手动点 20 秒。 |
 | `pnpm dev` | 不经过 DSH、用演示模型运行真实的工具栏，设置存在 `~/.dsh/selection-dev`。在 macOS 上，授权弹窗针对的是你的终端应用。 |
-| `pnpm screenshots` | 用真实的工具栏页面和设置页、配上示例文字，重新生成 `docs/images/` 里的图。加 `en` 或 `zh` 只生成一种语言。需要 Google Chrome 和 ffmpeg。 |
+| `pnpm screenshots` | 用真实的工具栏页面和设置页、配上示例文字，重新生成 `docs/images/` 里的工具栏、追问、设置页截图和动图；安装步骤的截图是手工截的。加 `en` 或 `zh` 只生成一种语言。需要 Google Chrome 和 ffmpeg。 |
 | `pnpm vendor:selection-hook [版本]` | 从 npm 更新 `vendor/selection-hook`。 |
 
 各部分怎么协作、为什么有些做法不寻常，见 [docs/architecture.md](docs/architecture.md)。

package/THIRD_PARTY_NOTICES.md

@@ -7,7 +7,7 @@ dsh-selection ships or depends on the following software. Each is used under its
 | [selection-hook](https://github.com/0xfullex/selection-hook) 2.1.2 | Vendored in `vendor/selection-hook` (JavaScript loader and N-API prebuilds for macOS and Windows): global input hooks and reading the selected text | MIT | © 2025 0xfullex |
 | [@webviewjs/webview](https://github.com/webviewjs/webview) 0.6.0 | npm dependency: system web view windows (built on tao and wry) | MIT | © 2024 Twilight |
 | [koffi](https://koffi.dev/) 3.3.6 (`@koromix/koffi-*` platform packages) | npm dependency: calling macOS and Windows system APIs | MIT | © 2026 Niels Martignène |
-| [Lucide](https://lucide.dev/) icons | Path data copied into `src/shared/icons.mjs`, `client.js` and `icon.svg` | ISC (portions MIT, from Feather) | © Lucide Contributors 2022; portions © Cole Bemis 2013–2022 |
+| [Lucide](https://lucide.dev/) icons | Path data copied into `src/shared/icons.mjs` | ISC (portions MIT, from Feather) | © Lucide Contributors 2022; portions © Cole Bemis 2013–2022 |
 
 The full MIT text for selection-hook is in `vendor/selection-hook/LICENSE`; the other packages include their license files in `node_modules`.
 

package/client.js

@@ -36,6 +36,7 @@ window.__ModuleLoader__.load({
       'enabled.hint': '关掉后划词助手不会再弹出，设置保留。',
       'skills.title': '技能',
       'skills.hint': '前 {count} 个启用的技能显示在工具栏上，其余收进 ⋯ 菜单。拖动或用方向键调整顺序。',
+      'skills.hintMini': '迷你模式下，所有启用的技能都在图标展开的菜单里。拖动或用方向键调整顺序。',
       'skills.overflow': '以下收进 ⋯ 菜单',
       'skills.custom': '自定义',
       'skills.add': '新建技能',
@@ -63,6 +64,25 @@ window.__ModuleLoader__.load({
       'toolbar.trigger.auto': '选中文字后自动弹出',
       'toolbar.trigger.modifier': '按住 ⌥ / Alt 选中时才弹出',
       'toolbar.size': '工具栏上的技能数',
+      'toolbar.style': '样式',
+      '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': '翻译成',
@@ -158,6 +178,7 @@ window.__ModuleLoader__.load({
       'enabled.hint': 'Turning this off hides the assistant and keeps your settings.',
       'skills.title': 'Skills',
       'skills.hint': 'The first {count} enabled skills sit on the toolbar; the rest go into the ⋯ menu. Drag or use the arrow keys to reorder.',
+      'skills.hintMini': 'With the mini toolbar, every enabled skill is in the icon’s menu. Drag or use the arrow keys to reorder.',
       'skills.overflow': 'In the ⋯ menu',
       'skills.custom': 'Custom',
       'skills.add': 'New skill',
@@ -185,6 +206,25 @@ window.__ModuleLoader__.load({
       'toolbar.trigger.auto': 'Automatically after selecting text',
       'toolbar.trigger.modifier': 'Only while holding ⌥ / Alt during selection',
       'toolbar.size': 'Skills on the toolbar',
+      'toolbar.style': 'Style',
+      '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',
@@ -576,7 +616,7 @@ window.__ModuleLoader__.load({
           checked: entry.enabled, label: nameOf(entry),
           onChange: (enabled) => update({ skills: settings.skills.map((skill) => (skill.id === entry.id ? { ...skill, enabled } : skill)) }),
         })))
-        if (entry.enabled && enabledSeen === settings.toolbarSize && index < settings.skills.length - 1) {
+        if (settings.toolbarStyle !== 'mini' && entry.enabled && enabledSeen === settings.toolbarSize && index < settings.skills.length - 1) {
           rows.push(h('div', { key: '__overflow', className: 'dss-overflow' }, t('skills.overflow')))
         }
       })
@@ -707,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)
@@ -865,14 +1003,20 @@ 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') },
+                h('div', { className: 'dss-segmented', role: 'group', 'aria-label': t('toolbar.style'), style: { marginTop: 0 } },
+                  ['full', 'mini'].map((style) => h('button', {
+                    key: style, type: 'button', 'aria-pressed': String(settings.toolbarStyle === style), onClick: () => update({ toolbarStyle: style }),
+                  }, t(`toolbar.style.${style}`))))),
               h(Row, { label: t('toolbar.trigger') },
                 h('select', { className: 'dss-select', value: settings.trigger, onChange: (event) => update({ trigger: event.target.value }) },
                   h('option', { value: 'auto' }, t('toolbar.trigger.auto')),
                   h('option', { value: 'modifier' }, t('toolbar.trigger.modifier')))),
-              h(Row, { label: t('toolbar.size') },
+              settings.toolbarStyle === 'mini' ? null : h(Row, { label: t('toolbar.size') },
                 h(NumberInput, { value: settings.toolbarSize, min: limits.toolbarSize.min, max: limits.toolbarSize.max, label: t('toolbar.size'), onChange: (toolbarSize) => update({ toolbarSize }) })))),
             h(Section, { title: t('language.title') },
             h('div', { className: 'dss-card' },
@@ -890,7 +1034,7 @@ window.__ModuleLoader__.load({
                   catalog.languages.map((language) => h('option', { key: language.code, value: language.code }, language.name))))))),
 
           panel('skills',
-            h(Section, { title: t('skills.title'), hint: fill(t('skills.hint'), { count: settings.toolbarSize }) },
+            h(Section, { title: t('skills.title'), hint: settings.toolbarStyle === 'mini' ? t('skills.hintMini') : fill(t('skills.hint'), { count: settings.toolbarSize }) },
             h(SkillList, { t, settings, catalog, update, onEdit: (entry) => setEditing(entry) }),
             editing
               ? h(SkillEditor, { key: editing.id || 'new', t, catalog, limits, initial: editing.id ? editing : null, onSave: saveSkill, onCancel: () => setEditing(null), prepare: saveNow })
@@ -1012,8 +1156,8 @@ window.__ModuleLoader__.load({
       return h(PageBoundary, props, h(SettingsPage, props))
     }
 
-    // Dashed selection frame around lines of text (Lucide "text-select", ISC).
-    const SIDEBAR_ICON = 'M5 3a2 2 0 0 0-2 2 M19 3a2 2 0 0 1 2 2 M21 19a2 2 0 0 1-2 2 M5 21a2 2 0 0 1-2-2 M9 3h1 M9 21h1 M14 3h1 M14 21h1 M3 9v1 M21 9v1 M3 14v1 M21 14v1 M7 8h10 M7 12h10 M7 16h6'
+    // 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 }) {
       return h('svg', {
@@ -1039,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/icon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#4d6bfe" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3a2 2 0 0 0-2 2"/><path d="M19 3a2 2 0 0 1 2 2"/><path d="M21 19a2 2 0 0 1-2 2"/><path d="M5 21a2 2 0 0 1-2-2"/><path d="M9 3h1"/><path d="M9 21h1"/><path d="M14 3h1"/><path d="M14 21h1"/><path d="M3 9v1"/><path d="M21 9v1"/><path d="M3 14v1"/><path d="M21 14v1"/><path d="M7 8h10"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><path d="M7.5 12.5V10C7.5 8.62 8.62 7.5 10 7.5H12.5M23.5 7.5H26C27.38 7.5 28.5 8.62 28.5 10V12.5M28.5 23.5V26C28.5 27.38 27.38 28.5 26 28.5H23.5M12.5 28.5H10C8.62 28.5 7.5 27.38 7.5 26V23.5" stroke="url(#dsh-selection-frame)" stroke-width="2.4" stroke-linecap="round"/><path d="M18 10.8C18.655 14.77 21.23 17.345 25.2 18C21.23 18.655 18.655 21.23 18 25.2C17.345 21.23 14.77 18.655 10.8 18C14.77 17.345 17.345 14.77 18 10.8Z" fill="url(#dsh-selection-spark)" stroke="none"/><defs><linearGradient id="dsh-selection-frame" x1="7.5" y1="7.5" x2="28.5" y2="28.5" gradientUnits="userSpaceOnUse"><stop stop-color="#6AECB6"/><stop offset="1" stop-color="#37A6B1"/></linearGradient><linearGradient id="dsh-selection-spark" x1="10.8" y1="10.8" x2="25.2" y2="25.2" gradientUnits="userSpaceOnUse"><stop stop-color="#7CB7FF"/><stop offset="1" stop-color="#145AF3"/></linearGradient></defs></svg>

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.1.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 })
@@ -101,6 +103,7 @@ export function createSelectionService({
       enabled: current.enabled,
       trigger: current.trigger,
       toolbarSize: current.toolbarSize,
+      toolbarStyle: current.toolbarStyle,
       skills: enabledSkills(current),
       disabledApps: current.disabledApps,
       clipboardFallback: current.clipboardFallback,
@@ -131,6 +134,15 @@ export function createSelectionService({
       case 'cancel':
         runs.get(message.requestId)?.abort()
         break
+      case 'toolbar-style':
+        if (message.style === 'full' || message.style === 'mini') {
+          try {
+            settings.update((current) => ({ ...current, toolbarStyle: message.style }))
+          } catch (error) {
+            log('error', 'saving settings failed', { error: String(error?.message ?? error) })
+          }
+        }
+        break
       case 'disable-app':
         if (typeof message.app === 'string' && message.app) {
           try {
@@ -231,6 +243,7 @@ export function createSelectionService({
         defaults: defaultSettings(),
         status,
         recentApps: [...recentApps],
+        version,
         catalog: {
           builtins: BUILTIN_SKILLS,
           languages: LANGUAGES,

package/src/host/settings.mjs

@@ -57,6 +57,7 @@ export function defaultSettings() {
     enabled: true,
     trigger: 'auto',
     toolbarSize: 5,
+    toolbarStyle: 'full',
     skills: BUILTIN_SKILLS.map((skill) => ({ id: skill.id, enabled: true })),
     disabledApps: [],
     nativeLanguage: 'zh-CN',
@@ -83,6 +84,7 @@ export function normalizeSettings(input) {
     enabled: typeof value.enabled === 'boolean' ? value.enabled : defaults.enabled,
     trigger: value.trigger === 'modifier' ? 'modifier' : 'auto',
     toolbarSize: clampInt(value.toolbarSize, LIMITS.toolbarSize, defaults.toolbarSize),
+    toolbarStyle: value.toolbarStyle === 'mini' ? 'mini' : 'full',
     skills: normalizeSkills(value.skills),
     disabledApps: normalizeApps(value.disabledApps),
     nativeLanguage: LANGUAGE_CODES.has(value.nativeLanguage) ? value.nativeLanguage : defaults.nativeLanguage,
@@ -266,6 +268,7 @@ function isObject(value) {
  * @property {boolean} enabled Show the toolbar when text is selected.
  * @property {'auto' | 'modifier'} trigger `modifier` shows it only while ⌥ / Alt is held.
  * @property {number} toolbarSize How many enabled skills sit on the toolbar; the rest go to the ⋯ menu.
+ * @property {'full' | 'mini'} toolbarStyle Full: skill buttons on the toolbar. Mini: one icon whose menu holds every skill.
  * @property {Array<{ id: string, enabled: boolean, custom?: true, name?: string, icon?: string, prompt?: string }>} skills
  * @property {string[]} disabledApps Program names (as reported by the OS) where the toolbar never shows.
  * @property {string} nativeLanguage Language the user reads best; auto translation flips around it.

package/src/shared/icons.mjs

@@ -35,8 +35,31 @@ export const ICONS = Object.freeze({
   plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
   edit: '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>',
   cursor: '<path d="M17 22h-1a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h1"/><path d="M7 22h1a4 4 0 0 0 4-4v-1"/><path d="M7 2h1a4 4 0 0 1 4 4v1"/>',
+  minimize: '<path d="m14 10 7-7"/><path d="M20 10h-6V4"/><path d="m3 21 7-7"/><path d="M4 14h6v6"/>',
+  maximize: '<path d="M15 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/>',
 })
 
+const BRAND_FRAME = 'M7.5 12.5V10C7.5 8.62 8.62 7.5 10 7.5H12.5M23.5 7.5H26C27.38 7.5 28.5 8.62 28.5 10V12.5M28.5 23.5V26C28.5 27.38 27.38 28.5 26 28.5H23.5M12.5 28.5H10C8.62 28.5 7.5 27.38 7.5 26V23.5'
+const BRAND_SPARK = 'M18 10.8C18.655 14.77 21.23 17.345 25.2 18C21.23 18.655 18.655 21.23 18 25.2C17.345 21.23 14.77 18.655 10.8 18C14.77 17.345 17.345 14.77 18 10.8Z'
+
+/**
+ * The plugin's own mark, drawn for it rather than taken from Lucide: a selection frame around a spark,
+ * in the colours of DSH's plugin icons. `id` prefixes the gradient ids, which a document needs unique.
+ * The full view box keeps the margin DSH's own plugin icons have; a cropped one fits a small button.
+ */
+export function brandIcon(id, viewBox = '0 0 36 36') {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="${viewBox}" fill="none">`
+    + `<path d="${BRAND_FRAME}" stroke="url(#${id}-frame)" stroke-width="2.4" stroke-linecap="round"/>`
+    + `<path d="${BRAND_SPARK}" fill="url(#${id}-spark)" stroke="none"/>`
+    + '<defs>'
+    + `<linearGradient id="${id}-frame" x1="7.5" y1="7.5" x2="28.5" y2="28.5" gradientUnits="userSpaceOnUse"><stop stop-color="#6AECB6"/><stop offset="1" stop-color="#37A6B1"/></linearGradient>`
+    + `<linearGradient id="${id}-spark" x1="10.8" y1="10.8" x2="25.2" y2="25.2" gradientUnits="userSpaceOnUse"><stop stop-color="#7CB7FF"/><stop offset="1" stop-color="#145AF3"/></linearGradient>`
+    + '</defs></svg>'
+}
+
+/** The same mark as a one-colour line drawing on a 24×24 grid, for DSH's sidebar. */
+export const BRAND_LINE = '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'
+
 /** Icons a user may pick for a custom skill. */
 export const CUSTOM_SKILL_ICONS = Object.freeze([
   'sparkles', 'star', 'heart', 'zap', 'lightbulb', 'list', 'quote', 'globe', 'link', 'code', 'polish', 'summarize', 'explain', 'ask',

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. */
@@ -49,7 +51,11 @@ export function createController({
 
   function configure(next) {
     config = next
-    overlay.configure({ bar: next.skills.slice(0, next.toolbarSize), more: next.skills.slice(next.toolbarSize) })
+    overlay.configure({
+      bar: next.skills.slice(0, next.toolbarSize),
+      more: next.skills.slice(next.toolbarSize),
+      style: next.toolbarStyle === 'mini' ? 'mini' : 'full',
+    })
     if (!next.enabled) dismiss({ force: true, reason: 'disabled' })
   }
 
@@ -71,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 })
   }
@@ -89,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 })
   }
@@ -119,6 +130,7 @@ export function createController({
       case 'skill':
         return runSkill(message.id)
       case 'menu':
+        if (message.action === 'toolbar-style') return switchStyle()
         if (message.action !== 'disable-app' && message.action !== 'settings') return
         if (message.action === 'disable-app' && selection) send({ type: 'disable-app', app: selection.app })
         if (message.action === 'settings') send({ type: 'open-settings' })
@@ -165,6 +177,14 @@ export function createController({
     }
   }
 
+  /** Swaps the full toolbar and the mini icon where they are, and has the Host save the choice. */
+  function switchStyle() {
+    if (!config) return
+    const style = config.toolbarStyle === 'mini' ? 'full' : 'mini'
+    configure({ ...config, toolbarStyle: style })
+    send({ type: 'toolbar-style', style })
+  }
+
   function runSkill(id) {
     const skill = config?.skills.find((candidate) => candidate.id === id)
     if (!skill || !selection) return
@@ -248,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
@@ -57,6 +59,9 @@ export async function createOverlay({ onMessage, log }) {
     focused: false,
     alwaysOnTop: true,
     windowsSkipTaskbar: true,
+    // tao keeps a system shadow on undecorated windows unless told not to; on Windows it outlines the
+    // whole transparent window with a 1px border and adds hidden insets around the client area.
+    windowsUndecoratedShadow: false,
     macosHasShadow: false,
   })
   // WebView2 defaults its data folder next to the executable, i.e. inside the DSH install directory.
@@ -76,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
@@ -179,7 +188,7 @@ export async function createOverlay({ onMessage, log }) {
   }
 
   return {
-    /** @param {{ bar: object[], more: object[] }} toolbar Skills on the toolbar and in the ⋯ menu. */
+    /** @param {{ bar: object[], more: object[], style: 'full' | 'mini' }} toolbar Skills on the toolbar and in its menu, and how the toolbar is drawn. */
     configure: (toolbar) => call('configure', toolbar),
     /** @param {Anchor} point In selection-hook coordinates. */
     showBar(point) {
@@ -229,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
@@ -239,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/src/worker/page.mjs

@@ -1,14 +1,14 @@
 // The toolbar page as one HTML string: the web view loads it with no file or network access.
 // Kept apart from overlay.mjs, which loads the native web view, so tests can load the same page.
 import { readFileSync } from 'node:fs'
-import { ICONS } from '../shared/icons.mjs'
+import { ICONS, brandIcon } from '../shared/icons.mjs'
 
 /** Inlines the page's stylesheet, scripts and icon table. */
 export function pageHtml() {
   const read = (name) => readFileSync(new URL(`../../ui/${name}`, import.meta.url), 'utf8')
   return read('toolbar.html')
     .replace('<link rel="stylesheet" href="toolbar.css">', () => `<style>${read('toolbar.css')}</style>`)
-    .replace('<script src="icons.js"></script>', () => `<script>window.DSH_ICONS = ${JSON.stringify(ICONS)}</script>`)
+    .replace('<script src="icons.js"></script>', () => `<script>window.DSH_ICONS = ${JSON.stringify(ICONS)}; window.DSH_BRAND = ${JSON.stringify(brandIcon('brand', '5 5 26 26'))}</script>`)
     .replace('<script src="markdown.js"></script>', () => `<script>${read('markdown.js')}</script>`)
     .replace('<script src="toolbar.js"></script>', () => `<script>${read('toolbar.js')}</script>`)
 }

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; }
@@ -63,7 +64,13 @@ button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); o
 .skill { height: 32px; padding: 0 10px 0 9px; font-weight: 500; letter-spacing: 0.1px; }
 .skill.done svg { color: #1f9d55; }
 .divider { width: 1px; height: 16px; margin: 0 4px; background: var(--hairline); }
-.more-button[aria-expanded="true"] { background: var(--press); }
+.more-button[aria-expanded="true"], .mini-button[aria-expanded="true"] { background: var(--press); }
+/* Mini toolbar: one icon, and every skill in its menu. */
+.mini-button { display: none; color: var(--accent); }
+.mini-button svg { width: 20px; height: 20px; }
+[data-style="mini"] .bar { padding: 3px; border-radius: 10px; }
+[data-style="mini"] .bar-skills, [data-style="mini"] .divider, [data-style="mini"] .more-button { display: none; }
+[data-style="mini"] .mini-button { display: inline-flex; }
 
 /* ⋯ menu, opened below the more button */
 .menu { display: none; position: absolute; min-width: 190px; padding: 6px; border-radius: 12px; z-index: 1; }
@@ -90,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; }
@@ -101,6 +108,7 @@ button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); o
 .panel-body { flex: 0 1 auto; min-height: 0; padding: 0 16px 14px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
 [data-fill] .panel { height: var(--room); }
 [data-fill] .panel-body { flex-grow: 1; max-height: none; }
+/* A styled scrollbar, so Windows draws a thin bar without its classic arrow buttons. */
 .panel-body::-webkit-scrollbar { width: 8px; }
 .panel-body::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; border: 2px solid var(--surface); }
 .source {
@@ -126,12 +134,15 @@ 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;
 }
+/* Past its tallest size it scrolls with the wheel and the caret, without a bar. */
+.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 */
@@ -145,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.html

@@ -13,11 +13,13 @@
       <div class="bar-skills"></div>
       <span class="divider" aria-hidden="true"></span>
       <button type="button" class="icon-button more-button" data-i18n-label="more" aria-haspopup="menu" aria-expanded="false"></button>
+      <button type="button" class="icon-button mini-button" data-i18n-label="assistant" aria-haspopup="menu" aria-expanded="false"></button>
     </div>
 
     <div class="card menu" role="menu">
       <div class="menu-skills"></div>
       <div class="menu-divider" aria-hidden="true"></div>
+      <button type="button" class="menu-item plain" role="menuitem" data-menu-action="toolbar-style"></button>
       <button type="button" class="menu-item plain" role="menuitem" data-menu-action="disable-app" data-i18n="disableApp"></button>
       <button type="button" class="menu-item plain" role="menuitem" data-menu-action="settings" data-i18n="settings"></button>
     </div>

package/ui/toolbar.js

@@ -3,6 +3,7 @@
   const STRINGS = {
     zh: {
       more: '更多', disableApp: '在此应用中禁用', settings: '更多设置…', copied: '已复制', stop: '停止',
+      assistant: '划词助手', miniStyle: '切换为迷你模式', fullStyle: '切换为常规模式',
       close: '关闭', copyResult: '复制结果', retry: '重新生成', pin: '固定窗口', translateTo: '译为', auto: '自动',
       askPlaceholder: '就这段内容问点什么…', followPlaceholder: '接着问…', send: '发送', waiting: '正在生成', retryShort: '重试', from: '来自 {app}',
       errors: {
@@ -15,6 +16,7 @@
     },
     en: {
       more: 'More', disableApp: 'Disable in this app', settings: 'More settings…', copied: 'Copied', stop: 'Stop',
+      assistant: 'Selection assistant', miniStyle: 'Use the mini toolbar', fullStyle: 'Use the full toolbar',
       close: 'Close', copyResult: 'Copy result', retry: 'Regenerate', pin: 'Keep open', translateTo: 'Translate to', auto: 'Auto',
       askPlaceholder: 'Ask something about this text…', followPlaceholder: 'Ask a follow-up…', send: 'Send', waiting: 'Generating', retryShort: 'Retry', from: 'from {app}',
       errors: {
@@ -38,8 +40,10 @@
   const els = {
     barSkills: $('.bar-skills'),
     more: $('.more-button'),
+    mini: $('.mini-button'),
     menu: $('.menu'),
     menuSkills: $('.menu-skills'),
+    styleItem: $('[data-menu-action="toolbar-style"]'),
     panel: $('.panel'),
     panelIcon: $('.panel-icon'),
     panelTitle: $('.panel-title'),
@@ -64,6 +68,7 @@
   })
   document.querySelectorAll('[data-i18n-placeholder]').forEach((node) => { node.placeholder = t[node.dataset.i18nPlaceholder] })
   els.more.innerHTML = icon('more')
+  els.mini.innerHTML = window.DSH_BRAND || icon('sparkles')
   $('[data-menu-action="disable-app"]').insertAdjacentHTML('afterbegin', icon('ban'))
   $('[data-menu-action="settings"]').insertAdjacentHTML('afterbegin', icon('settings'))
   for (const [tool, name] of [['pin', 'pin'], ['copy', 'copy'], ['retry', 'retry'], ['close', 'close']]) {
@@ -73,6 +78,34 @@
 
   const emptyState = (requestId = null, pending = false) => ({ requestId, text: '', turn: null, pending, failure: null })
   let skills = { bar: [], more: [] }
+  let style = 'full'
+  // 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() {
+    els.styleItem.innerHTML = `${icon(style === 'mini' ? 'maximize' : 'minimize')}<span></span>`
+    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
@@ -90,13 +123,16 @@
   }
 
   function setMenu(open) {
+    stopHoverTimers()
     if (open) {
       const bar = $('.bar')
-      els.menu.style.left = `${bar.offsetLeft + els.more.offsetLeft - 6}px`
+      const button = style === 'mini' ? els.mini : els.more
+      els.menu.style.left = `${bar.offsetLeft + button.offsetLeft - 6}px`
       els.menu.style.top = `${bar.offsetTop + bar.offsetHeight + 6}px`
     }
     body.dataset.menu = open ? 'open' : 'closed'
-    els.more.setAttribute('aria-expanded', String(open))
+    els.more.setAttribute('aria-expanded', String(open && style === 'full'))
+    els.mini.setAttribute('aria-expanded', String(open && style === 'mini'))
     queueSize()
   }
 
@@ -151,12 +187,23 @@
   window.bar = {
     configure(next) {
       skills = next
-      els.barSkills.replaceChildren(...next.bar.map((skill) => skillButton(skill, 'skill')))
-      els.menuSkills.replaceChildren(...next.more.map((skill) => skillButton(skill, 'menu-item')))
+      const nextStyle = next.style === 'mini' ? 'mini' : 'full'
+      if (nextStyle !== style) {
+        setMenu(false)
+        style = nextStyle
+      }
+      body.dataset.style = style
+      // The mini toolbar has no skill buttons of its own: every skill is in its menu.
+      const onBar = style === 'mini' ? [] : next.bar
+      const inMenu = style === 'mini' ? [...next.bar, ...next.more] : next.more
+      els.barSkills.replaceChildren(...onBar.map((skill) => skillButton(skill, 'skill')))
+      els.menuSkills.replaceChildren(...inMenu.map((skill) => skillButton(skill, 'menu-item')))
+      drawStyleItem()
       queueSize()
     },
     showBar() {
-      delete body.dataset.pointer
+      stopHoverTimers()
+      clearHover()
       body.dataset.mode = 'bar'
       setMenu(false)
     },
@@ -164,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'
@@ -233,6 +280,7 @@
       if (requestId !== state.requestId) return
       state.pending = false
       body.dataset.composer = 'shown'
+      resizeInput()
       scheduleRender()
     },
     fail(requestId, failure) {
@@ -250,8 +298,8 @@
       queueSize()
     },
     flash(skillId) {
-      // A skill run from the ⋯ menu confirms on the ⋯ button: the menu has closed by then.
-      flashDone(els.barSkills.querySelector(`[data-skill="${skillId}"]`) || els.more, t.copied)
+      // A skill run from the menu confirms on the button that opens the menu: the menu has closed by then.
+      flashDone(els.barSkills.querySelector(`[data-skill="${skillId}"]`) || (style === 'mini' ? els.mini : els.more), t.copied)
     },
     /**
      * How tall the panel may grow before it scrolls inside, from the worker's placement. With `fill`
@@ -264,8 +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() {
-      delete body.dataset.pointer
+      stopHoverTimers()
+      clearHover()
       body.dataset.mode = 'hidden'
       body.dataset.menu = 'closed'
       if (document.activeElement) document.activeElement.blur()
@@ -282,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()),
@@ -339,7 +416,12 @@
 
   function resizeInput() {
     els.input.style.height = 'auto'
-    els.input.style.height = `${Math.min(els.input.scrollHeight, 96)}px`
+    const height = els.input.scrollHeight
+    // 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'
     els.send.disabled = !els.input.value.trim()
   }
 
@@ -358,6 +440,10 @@
       post({ type: 'skill', id: skill.dataset.skill })
       return
     }
+    if (event.target.closest('.mini-button')) {
+      setMenu(true)
+      return
+    }
     if (event.target.closest('.more-button')) {
       setMenu(body.dataset.menu !== 'open')
       return
@@ -478,13 +564,6 @@
     if (body.dataset.mode === 'panel') post({ type: 'keyboard', needed: true })
   })
 
-  // 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) }))