@followbin/dsh-selection 0.1.0 → 0.2.0

package/README.md

@@ -8,12 +8,20 @@ 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.
 
@@ -24,6 +32,7 @@ To install the newest code from GitHub instead, enter `https://github.com/follow
 ## 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,8 +12,16 @@
 
 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 侧边栏的「划词助手」里。
 
@@ -24,6 +32,7 @@
 ## 功能
 
 - **工具栏**：前几个技能直接显示，其余收进「⋯」菜单；菜单里还有「在此应用中禁用」和「更多设置…」。
+- **迷你模式**：工具栏换成一个小图标，鼠标停在上面就展开全部技能。在工具栏菜单或设置页里随时切换。
 - **内置技能**：翻译、总结、解释、问问 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,10 @@ window.__ModuleLoader__.load({
       'toolbar.trigger.auto': '选中文字后自动弹出',
       'toolbar.trigger.modifier': '按住 ⌥ / Alt 选中时才弹出',
       'toolbar.size': '工具栏上的技能数',
+      'toolbar.style': '样式',
+      'toolbar.style.full': '常规',
+      'toolbar.style.mini': '迷你',
+      'toolbar.style.hint': '迷你模式只显示一个图标，鼠标停在上面会展开全部技能。在工具栏的菜单里也能切换。',
       'language.title': '语言',
       'language.native': '我的母语',
       'language.translate': '翻译成',
@@ -158,6 +163,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 +191,10 @@ 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.',
       'language.title': 'Language',
       'language.native': 'My language',
       'language.translate': 'Translate into',
@@ -576,7 +586,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')))
         }
       })
@@ -868,11 +878,16 @@ window.__ModuleLoader__.load({
               h(Row, { label: t('enabled.label'), hint: t('enabled.hint') }, h(Switch, { checked: settings.enabled, label: t('enabled.label'), onChange: (enabled) => update({ enabled }) }))),
             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 +905,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 })
@@ -1013,7 +1028,7 @@ window.__ModuleLoader__.load({
     }
 
     // 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'
+    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', {

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/package.json

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

package/src/host/service.mjs

@@ -101,6 +101,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 +132,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 {

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

@@ -49,7 +49,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' })
   }
 
@@ -119,6 +123,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 +170,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

package/src/worker/overlay.mjs

@@ -57,6 +57,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.
@@ -179,7 +182,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) {

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

@@ -63,7 +63,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; }
@@ -101,6 +107,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 {
@@ -127,8 +134,11 @@ button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); o
 [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;
+  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); }

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,15 @@
 
   const emptyState = (requestId = null, pending = false) => ({ requestId, text: '', turn: null, pending, failure: null })
   let skills = { bar: [], more: [] }
+  let style = 'full'
+  let hoverTimer = 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()
   let state = emptyState()
   let renderTimer = null
   // Timers rather than requestAnimationFrame: the view can be occluded or the screen locked, and then
@@ -92,11 +106,13 @@
   function setMenu(open) {
     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,11 +167,22 @@
   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() {
+      clearTimeout(hoverTimer)
       delete body.dataset.pointer
       body.dataset.mode = 'bar'
       setMenu(false)
@@ -250,8 +277,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`
@@ -265,6 +292,7 @@
       queueSize()
     },
     reset() {
+      clearTimeout(hoverTimer)
       delete body.dataset.pointer
       body.dataset.mode = 'hidden'
       body.dataset.menu = 'closed'
@@ -339,7 +367,11 @@
 
   function resizeInput() {
     els.input.style.height = 'auto'
-    els.input.style.height = `${Math.min(els.input.scrollHeight, 96)}px`
+    const height = els.input.scrollHeight
+    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 +390,11 @@
       post({ type: 'skill', id: skill.dataset.skill })
       return
     }
+    if (event.target.closest('.mini-button')) {
+      clearTimeout(hoverTimer)
+      setMenu(true)
+      return
+    }
     if (event.target.closest('.more-button')) {
       setMenu(body.dataset.menu !== 'open')
       return
@@ -478,6 +515,29 @@
     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.