dsh-claude-workbench 0.1.1 → 0.2.2

package/README.en.md

@@ -1,16 +1,21 @@
 # dsh-claude-workbench
 
-A Claude-flavoured workbench enhancement for the **DeepSeek Harness (DSH)** Web GUI — one plugin, four features:
+[![npm version](https://img.shields.io/npm/v/dsh-claude-workbench.svg)](https://www.npmjs.com/package/dsh-claude-workbench) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+
+A Claude-flavoured workbench enhancement for the **DeepSeek Harness (DSH)** Web GUI — one plugin, six features:
 
 1. **Claude skin** — warm cream canvas, warm stone surfaces and clay accents; serif **Crimson Pro** prose / **DM Sans** UI (fonts inlined, works offline), complete light/dark/system support.
 2. **Split view** — the “◫ Split view” pill at the bottom-right splits the window into 2–3 full DSH panes, each with its own session view (the same idea as Claude’s Split view).
 3. **Side chat** — select text in a conversation → right-click → **“在旁聊中提问”**; a docked right-hand panel boots a fork of the current session with the selection quoted in the composer. Closing archives the fork.
 4. **Quick appearance switch** — a theme button at the top-right of the session header toggles follow-system / light / dark (same as Settings → General → Appearance, persisted).
+5. **Completion chime** — a short, crisp chime when a turn finishes (like OpenCode’s completion sound); toggle it in the appearance menu, adjust its **volume** with the slider (0–250%, default 150%, previews while dragging), and the choice is remembered.
+6. **Inline next-step chips** — the assistant ends a message with a `suggestions` fenced block (a JSON array); the plugin renders it as clickable chips under the message and clicking one sends its prompt directly — the Claude-style next-step buttons. Blocking choices still use the built-in `ask_user_question` form card.
 
 ![Claude skin (light)](preview/light.png)
 ![Split view](preview/panes-2col.png)
 ![Side chat](preview/sidechat.png)
 ![Quick appearance switch](preview/theme-menu.png)
+![Inline suggestions](preview/suggestions.png)
 
 > Preview images are **synthetic renders** (plugin styles + mock data), not real conversations.
 

package/README.md

@@ -1,11 +1,17 @@
 # dsh-claude-workbench
 
-给 **DeepSeek Harness（DSH）Web GUI** 的 Claude 风格工作台增强包 —— 一个插件，四件事：
+[![npm version](https://img.shields.io/npm/v/dsh-claude-workbench.svg)](https://www.npmjs.com/package/dsh-claude-workbench) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+
+给 **DeepSeek Harness（DSH）Web GUI** 的 Claude 风格工作台增强包 —— 一个插件，六件事：
 
 1. **Claude 皮肤**：暖米白画布 + 暖石灰 + 陶土色，正文/标题用衬线 **Crimson Pro**、界面用 **DM Sans**（字体已内联，离线可用），浅色/深色/跟随系统都完整适配；
 2. **Split view（并排会话）**：右下角「◫ Split view」→ 把窗口切成 **2 栏或 3 栏**，每栏是一个完整 DSH 界面，可各自打开/切换不同会话（对应 Claude 里的 Split view）；
 3. **旁聊（side chat）**：在对话里**选中文字 → 右键 → 「在旁聊中提问」**，右侧 dock 出当前会话的 fork（继承上下文），选中的内容以引用形式预填进输入框；关闭时自动归档该 fork；
-4. **外观快切**：右上角主题按钮，一键在 **跟随系统 / 浅色 / 深色** 之间切换（与「设置 → 通用 → 外观」等价、持久化）。
+4. **外观快切**：右上角主题按钮，一键在 **跟随系统 / 浅色 / 深色** 之间切换（与「设置 → 通用 → 外观」等价、持久化）；
+5. **完成提示音**：一轮对话结束时播放一声清脆提示音（类似 OpenCode 的完成提醒），可在右上角外观菜单里开关、并可拖动**音量滑块**（0–250%，默认 150%，调节时会试听），设置会记住。
+6. **下一步建议（内联 chips）**：助手在消息末尾输出一个 `suggestions` 代码块（JSON 数组），插件把它渲染成**消息下方的可点按钮**，点一下直接把对应 prompt 发出去 —— 和 Claude 里的下一步建议同款。
+
+> 两种"下一步"并存：**内联 chips** 用于非阻塞的 2–3 个建议（点了直接发）；**表单**（内置 `ask_user_question` 卡片）用于需要阻塞确认的决策。
 
 ![Claude 皮肤（浅色）](preview/light.png)
 ![Split view](preview/panes-2col.png)
@@ -41,7 +47,9 @@ dsh plugin --profile web add github:<owner>/dsh-claude-workbench
 
 - **Split view**：点右下角「◫ Split view」→ 默认 2 栏；顶部可切 2/3 栏、退出；每栏像平常一样点左侧会话列表即可显示不同对话。
 - **旁聊**：选中对话内容 → 右键 →「◧ 在旁聊中提问」；面板左缘可拖动调宽；「在主对话打开」把 fork 提为主对话；关闭自动归档 fork。
-- **外观**：会话 header 右上角按钮（右侧栏展开按钮左边），点开选 跟随系统/浅色/深色。
+- **外观**：会话 header 右上角按钮（右侧栏展开按钮左边），点开选 跟随系统/浅色/深色；菜单里还有「完成提示音」开关。
+- **完成提示音**：默认开启；对话完成（运行中 → 空闲）时响一声；子代理会话不响。
+- **下一步建议**：只要让我"给下一步建议"，我就会在消息末尾输出 `suggestions` 块，插件渲染成按钮；点按钮直接发送。
 
 ## 兼容性
 

package/lib/client.js

@@ -3,7 +3,9 @@ window.__ModuleLoader__.load({
 	factory: (require) => {
 		var module = { exports: {} };
 		var exports = module.exports;
-		const inject = [];
+		const inject = ["slots", "sessions"];
+		const react = require("react");
+		const jsxRuntime = require("react/jsx-runtime");
 		function panesUi(boot, ctx) {
   try {
     if (window.self !== window.top) return;
@@ -103,10 +105,22 @@ window.__ModuleLoader__.load({
       '#dsh-theme-menu button svg{width:14px;height:14px;flex:none;color:var(--dsw-alias-label-secondary,#666)}',
       '#dsh-theme-menu .dsh-theme-check{width:14px;height:14px;flex:none;margin-left:auto;color:var(--dsw-alias-state-business-primary,#c6613f);visibility:hidden}',
       '#dsh-theme-menu button[data-active="1"] .dsh-theme-check{visibility:visible}',
+      '#dsh-theme-menu .dsh-theme-sep{height:1px;margin:4px 6px;background:var(--dsw-alias-border-l2,#0001)}',
+      '#dsh-theme-menu .dsh-theme-volume{display:flex;align-items:center;gap:8px;padding:2px 9px 7px;color:var(--dsw-alias-label-secondary,#555);font:500 12px/1 var(--dsw-font-family,system-ui)}',
+      '#dsh-theme-menu .dsh-theme-volume-label{flex:none}',
+      '#dsh-theme-menu .dsh-theme-volume input{flex:1;min-width:84px;height:14px;margin:0;accent-color:var(--dsw-alias-state-business-primary,#c6613f);cursor:pointer}',
+      '#dsh-theme-menu .dsh-theme-volume-value{flex:none;width:38px;text-align:right;color:var(--dsw-alias-label-caption,#999);font-variant-numeric:tabular-nums}',
       '#dsh-sidechat-menu{position:fixed;z-index:2147483002;display:none;min-width:196px;padding:4px;border-radius:10px;background:var(--dsw-menu-surface-fill,#fff);border:.5px solid var(--dsw-alias-border-l3,#0002);box-shadow:0 8px 24px #00000022,0 2px 6px #00000012;backdrop-filter:blur(20px);font-family:var(--dsw-font-family,system-ui)}',
       '#dsh-sidechat-menu button{display:flex;align-items:center;gap:8px;width:100%;height:30px;padding:0 9px;border:0;border-radius:6px;background:transparent;color:var(--dsw-alias-label-primary,#111);font:500 12px/1 var(--dsw-font-family,system-ui);cursor:pointer;text-align:left}',
       '#dsh-sidechat-menu button:hover{background:var(--dsw-alias-interactive-bg-hover,#00000012)}',
-      '#dsh-sidechat-menu .dsh-ctx-icon{width:16px;text-align:center;color:var(--dsw-alias-label-tertiary,#888)}'
+      '#dsh-sidechat-menu .dsh-ctx-icon{width:16px;text-align:center;color:var(--dsw-alias-label-tertiary,#888)}',
+      '#dsh-suggestions,.dsh-suggestions{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;margin:1em 0 .35em}',
+      '.dsh-suggestions button{display:inline-flex;align-items:center;gap:.5em;min-height:2.4em;padding:.45em 1em;border-radius:.5em;border:1px solid var(--dsw-alias-border-l3,#0002);background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-primary,#111);font-family:var(--dsw-font-family,system-ui);font-weight:500;font-size:.95em;line-height:1.3;cursor:pointer;transition:background .15s ease,border-color .15s ease,opacity .15s ease}',
+      '.dsh-suggestions button:hover{background:var(--dsw-alias-interactive-bg-hover,#00000010);border-color:var(--dsw-alias-border-l2,#0003)}',
+      '.dsh-suggestions button.dsh-suggestion-primary{background:var(--dsw-alias-label-primary,#141413);color:var(--dsw-alias-bg-base,#fbfaf6);border-color:transparent}',
+      '.dsh-suggestions button.dsh-suggestion-primary:hover{background:var(--dsw-alias-label-primary,#141413);opacity:.92}',
+      '.dsh-suggestions[data-sent="1"] button{opacity:.55;pointer-events:none}',
+      '.dsh-suggestions .dsh-suggestion-hint{font-family:var(--dsw-font-family-code,ui-monospace,SFMono-Regular,monospace);font-weight:500;font-size:.72em;line-height:1;opacity:.6}'
     ].join("\n");
     document.head.appendChild(style);
     document.body.setAttribute("data-dsh-sidechat", "0");
@@ -554,6 +568,9 @@ window.__ModuleLoader__.load({
         '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.4 9.6A5.9 5.9 0 0 1 6.4 2.6 6 6 0 1 0 13.4 9.6Z"/></svg>'
     };
 
+    var SOUND_ICON =
+      '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11V7a4 4 0 0 1 8 0v4l1.2 1.6H2.8L4 11Z"/><path d="M6.2 13.2a1.9 1.9 0 0 0 3.6 0"/></svg>';
+
     var themeButton = document.createElement("button");
     themeButton.id = "dsh-theme-toggle";
     themeButton.type = "button";
@@ -566,7 +583,10 @@ window.__ModuleLoader__.load({
     themeMenu.innerHTML =
       '<button type="button" data-pref="system"><span class="dsh-theme-icon"></span><span>跟随系统</span><span class="dsh-theme-check">✓</span></button>' +
       '<button type="button" data-pref="light"><span class="dsh-theme-icon"></span><span>浅色</span><span class="dsh-theme-check">✓</span></button>' +
-      '<button type="button" data-pref="dark"><span class="dsh-theme-icon"></span><span>深色</span><span class="dsh-theme-check">✓</span></button>';
+      '<button type="button" data-pref="dark"><span class="dsh-theme-icon"></span><span>深色</span><span class="dsh-theme-check">✓</span></button>' +
+      '<div class="dsh-theme-sep"></div>' +
+      '<button type="button" data-sound="1"><span class="dsh-theme-icon">' + SOUND_ICON + '</span><span>完成提示音</span><span class="dsh-theme-check">✓</span></button>' +
+      '<div class="dsh-theme-volume"><span class="dsh-theme-volume-label">音量</span><input id="dsh-theme-volume" type="range" min="0" max="250" step="10" aria-label="完成提示音音量"><span class="dsh-theme-volume-value"></span></div>';
     document.body.appendChild(themeMenu);
     var themeMenuItems = Array.prototype.slice.call(themeMenu.querySelectorAll("button[data-pref]"));
     themeMenuItems.forEach(function (button) {
@@ -574,6 +594,173 @@ window.__ModuleLoader__.load({
       if (icon !== null) icon.innerHTML = THEME_ICONS[button.getAttribute("data-pref")] || "";
     });
 
+    // ------------------------------------------ completion sound (turn finished)
+    var CHIME_KEY = "dsh-workbench.completion-sound";
+    var CHIME_VOLUME_KEY = "dsh-workbench.chime-volume";
+    var chimeEnabled = true;
+    try { if (localStorage.getItem(CHIME_KEY) === "0") chimeEnabled = false; } catch (error) { /* ignore */ }
+    var chimeVolume = 1.5;
+    try {
+      var storedChimeVolumeRaw = localStorage.getItem(CHIME_VOLUME_KEY);
+      if (storedChimeVolumeRaw !== null && storedChimeVolumeRaw !== "") {
+        var storedChimeVolume = Number(storedChimeVolumeRaw);
+        if (Number.isFinite(storedChimeVolume) && storedChimeVolume >= 0 && storedChimeVolume <= 2.5) chimeVolume = storedChimeVolume;
+      }
+    } catch (error) {
+      /* ignore */
+    }
+    var chimeLog = [];
+    var chimeAttachAttempts = 0;
+    var chimeUnsubscribe = null;
+    var chimeAudioContext = null;
+    var chimeLastPlayedAt = 0;
+    var chimePreviousRunning = new Map();
+    var soundButton = themeMenu.querySelector("button[data-sound]");
+    var volumeInput = themeMenu.querySelector("#dsh-theme-volume");
+    var volumeValueLabel = themeMenu.querySelector(".dsh-theme-volume-value");
+
+    function refreshVolumeControl() {
+      var percent = Math.round(chimeVolume * 100);
+      if (volumeInput !== null) volumeInput.value = String(percent);
+      if (volumeValueLabel !== null) volumeValueLabel.textContent = percent + "%";
+    }
+
+    refreshVolumeControl();
+    if (volumeInput !== null) {
+      var volumePreviewTimer = null;
+      volumeInput.addEventListener("input", function () {
+        var nextVolume = Number(volumeInput.value) / 100;
+        if (!Number.isFinite(nextVolume)) return;
+        chimeVolume = Math.max(0, Math.min(2.5, nextVolume));
+        try { localStorage.setItem(CHIME_VOLUME_KEY, String(chimeVolume)); } catch (error) { /* ignore */ }
+        refreshVolumeControl();
+        if (chimeEnabled) {
+          clearTimeout(volumePreviewTimer);
+          volumePreviewTimer = setTimeout(function () { playCompletionChime(); }, 350);
+        }
+      });
+    }
+
+    function ensureChimeAudio() {
+      try {
+        var AudioCtor = window.AudioContext || window.webkitAudioContext;
+        if (AudioCtor === undefined) return null;
+        if (chimeAudioContext === null) chimeAudioContext = new AudioCtor();
+        if (chimeAudioContext.state === "suspended" && typeof chimeAudioContext.resume === "function") {
+          chimeAudioContext.resume().catch(function () { /* waits for the next user gesture */ });
+        }
+        return chimeAudioContext;
+      } catch (error) {
+        return null;
+      }
+    }
+
+    function playCompletionChime() {
+      chimeLog.push(Date.now());
+      if (chimeLog.length > 50) chimeLog.shift();
+      if (!chimeEnabled) return;
+      var audio = ensureChimeAudio();
+      if (audio === null) return;
+      try {
+        var start = audio.currentTime + 0.01;
+        var master = audio.createGain();
+        master.gain.value = chimeVolume;
+        master.connect(audio.destination);
+        function tone(frequency, offset, duration, peak, type) {
+          var oscillator = audio.createOscillator();
+          var gain = audio.createGain();
+          oscillator.type = type === undefined ? "sine" : type;
+          oscillator.frequency.value = frequency;
+          gain.gain.setValueAtTime(0.0001, start + offset);
+          gain.gain.exponentialRampToValueAtTime(peak, start + offset + 0.006);
+          gain.gain.exponentialRampToValueAtTime(0.0001, start + offset + duration);
+          oscillator.connect(gain);
+          gain.connect(master);
+          oscillator.start(start + offset);
+          oscillator.stop(start + offset + duration + 0.03);
+        }
+        tone(1046.5, 0, 0.34, 0.16, "sine");
+        tone(1567.98, 0.07, 0.3, 0.11, "sine");
+        tone(3135.96, 0.07, 0.14, 0.03, "sine");
+      } catch (error) {
+        /* audio is best effort */
+      }
+    }
+
+    function triggerCompletionChime() {
+      var now = Date.now();
+      if (now - chimeLastPlayedAt < 750) return;
+      chimeLastPlayedAt = now;
+      playCompletionChime();
+    }
+
+    function isSubagentChimeSession(sessionId) {
+      try {
+        var sessions = getService("sessions");
+        if (sessions === undefined || sessions.list === undefined || sessions.list.getSnapshot === undefined) return false;
+        var row = (sessions.list.getSnapshot().byId || {})[sessionId];
+        return row !== undefined && row !== null && row.subagent !== undefined && row.subagent !== null;
+      } catch (error) {
+        return false;
+      }
+    }
+
+    function onSessionRunningChanged(sessionId, running) {
+      var value = chimePreviousRunning.get(sessionId) === true;
+      chimePreviousRunning.set(sessionId, running);
+      if (!value || running) return;
+      if (isSubagentChimeSession(sessionId)) return;
+      triggerCompletionChime();
+    }
+
+    function installCompletionChime() {
+      var uiSession = getService("uiSession");
+      var status = uiSession === undefined || uiSession === null ? undefined : uiSession.sessionStatus;
+      if (status === undefined || status === null || typeof status.subscribe !== "function") {
+        chimeAttachAttempts += 1;
+        if (chimeAttachAttempts < 100) setTimeout(installCompletionChime, 300);
+        return;
+      }
+      try {
+        var initial = status.getSnapshot();
+        initial.forEach(function (value, id) {
+          chimePreviousRunning.set(id, value !== undefined && value !== null && value.running === true);
+        });
+        chimeUnsubscribe = status.subscribe(function () {
+          try {
+            // Client stores notify subscribers without passing the snapshot; read it.
+            var snapshot = status.getSnapshot();
+            snapshot.forEach(function (value, id) {
+              onSessionRunningChanged(id, value !== undefined && value !== null && value.running === true);
+            });
+          } catch (error) {
+            /* ignore */
+          }
+        });
+      } catch (error) {
+        console.error("[claude-workbench] completion sound subscription failed", error);
+      }
+    }
+
+    function toggleCompletionSound() {
+      chimeEnabled = !chimeEnabled;
+      try { localStorage.setItem(CHIME_KEY, chimeEnabled ? "1" : "0"); } catch (error) { /* ignore */ }
+      if (chimeEnabled) {
+        ensureChimeAudio();
+        if (soundButton !== null) soundButton.setAttribute("data-active", "1");
+        playCompletionChime();
+      }
+      refreshThemeButton();
+    }
+
+    function unlockChimeAudio() {
+      ensureChimeAudio();
+    }
+
+    document.addEventListener("pointerdown", unlockChimeAudio, true);
+    document.addEventListener("keydown", unlockChimeAudio, true);
+    installCompletionChime();
+
     function themeService() {
       return getService("theme");
     }
@@ -604,6 +791,10 @@ window.__ModuleLoader__.load({
       themeMenuItems.forEach(function (button) {
         button.setAttribute("data-active", button.getAttribute("data-pref") === preference ? "1" : "0");
       });
+      if (soundButton !== null) {
+        soundButton.setAttribute("data-active", chimeEnabled ? "1" : "0");
+        soundButton.title = chimeEnabled ? "完成提示音：开（点击关闭）" : "完成提示音：关（点击开启）";
+      }
     }
 
     function closeThemeMenu() {
@@ -631,6 +822,10 @@ window.__ModuleLoader__.load({
     themeMenu.addEventListener("click", function (event) {
       var target = event.target;
       if (!(target instanceof Element)) return;
+      if (target.closest("button[data-sound]") !== null) {
+        toggleCompletionSound();
+        return;
+      }
       var button = target.closest("button[data-pref]");
       if (button === null) return;
       var preference = button.getAttribute("data-pref");
@@ -689,6 +884,12 @@ window.__ModuleLoader__.load({
     try {
       globalThis.__dshPanesTeardown = function () {
         try { clearInterval(themeMountTimer); } catch (error) { /* ignore */ }
+        try { if (typeof chimeUnsubscribe === "function") chimeUnsubscribe(); } catch (error) { /* ignore */ }
+        chimeUnsubscribe = null;
+        document.removeEventListener("pointerdown", unlockChimeAudio, true);
+        document.removeEventListener("keydown", unlockChimeAudio, true);
+        try { if (chimeAudioContext !== null && typeof chimeAudioContext.close === "function") chimeAudioContext.close(); } catch (error) { /* ignore */ }
+        chimeAudioContext = null;
         closeThemeMenu();
         if (themeButton.parentElement !== null) themeButton.remove();
         themeMenu.remove();
@@ -720,7 +921,17 @@ window.__ModuleLoader__.load({
         archiveSession: function (id) {
           var workspaceService = getService("uiWorkspace");
           return workspaceService.archiveSession(id);
-        }
+        },
+        playChime: playCompletionChime,
+        chimeInfo: function () {
+          return {
+            enabled: chimeEnabled,
+            attached: typeof chimeUnsubscribe === "function",
+            volume: Math.round(chimeVolume * 100),
+            log: chimeLog.slice()
+          };
+        },
+        toggleChime: toggleCompletionSound
       };
     } catch (error) {
       /* debug hook is optional */
@@ -729,6 +940,240 @@ window.__ModuleLoader__.load({
     console.error("[dsh-panes] initialization failed", error);
   }
 }
+		function suggestionChips(ctx, runtime) {
+  try {
+    var react = runtime.react;
+    var jsx = runtime.jsxRuntime.jsx;
+    var jsxs = runtime.jsxRuntime.jsxs;
+    var CURRENT_KEY = "dsh.sessions.current";
+    var MAX_ITEMS = 6;
+    var attachAttempts = 0;
+    var slotState = { found: false, registered: false, error: null, attempts: 0 };
+
+    function getService(name) {
+      try {
+        return ctx === undefined || ctx === null || typeof ctx.get !== "function" ? undefined : ctx.get(name);
+      } catch (error) {
+        return undefined;
+      }
+    }
+
+    function currentSessionId() {
+      var sessions = getService("sessions");
+      try {
+        if (sessions !== undefined && sessions.list !== undefined && sessions.list.getSnapshot !== undefined) {
+          var list = sessions.list.getSnapshot();
+          var byId = (list && list.byId) || {};
+          var ids = Object.keys(byId);
+          for (var index = 0; index < ids.length; index += 1) {
+            var summary = byId[ids[index]];
+            var retained = summary && summary.retainedBy;
+            if (retained !== undefined && retained !== null && (retained.mainView || 0) > 0) {
+              return summary.id !== undefined ? summary.id : summary.sessionId;
+            }
+          }
+        }
+      } catch (error) {
+        /* fall through to persisted selection */
+      }
+      try {
+        var raw = localStorage.getItem(CURRENT_KEY);
+        if (raw !== null) {
+          var parsed = JSON.parse(raw);
+          if (parsed !== null && typeof parsed === "object" && typeof parsed.sessionId === "string") return parsed.sessionId;
+        }
+      } catch (error) {
+        /* ignore malformed persisted selection */
+      }
+      return null;
+    }
+
+    /**
+     * Parse the fence body into suggestion items.
+     * @param {string} code - raw fence text.
+     * @returns {Array<{label: string, prompt: string}>|null} parsed items, or null when invalid.
+     */
+    function parseSuggestions(code) {
+      try {
+        var data = JSON.parse(String(code === undefined || code === null ? "" : code));
+        if (!Array.isArray(data)) return null;
+        var items = [];
+        for (var index = 0; index < data.length && items.length < MAX_ITEMS; index += 1) {
+          var item = data[index];
+          if (item === null || typeof item !== "object") continue;
+          var label = typeof item.label === "string" ? item.label.trim() : "";
+          var prompt = typeof item.prompt === "string" ? item.prompt.trim() : "";
+          if (label.length === 0 || prompt.length === 0) continue;
+          items.push({ label: label, prompt: prompt });
+        }
+        return items.length === 0 ? null : items;
+      } catch (error) {
+        return null;
+      }
+    }
+
+    /**
+     * Send one suggestion as the next user message.
+     * @param {string} prompt - text submitted on click.
+     * @returns {boolean} whether a submission path was found.
+     */
+    function sendPrompt(prompt) {
+      var sessions = getService("sessions");
+      var sessionId = currentSessionId();
+      try {
+        if (sessionId !== null && sessions !== undefined && typeof sessions.binding === "function") {
+          var binding = sessions.binding(sessionId);
+          var live = binding === undefined || binding === null ? undefined : binding.session;
+          if (live !== undefined && live !== null && typeof live.prompt === "function") {
+            var signal = typeof AbortController === "function" ? new AbortController().signal : undefined;
+            var result = live.prompt([{ type: "text", text: prompt }], "queue", signal);
+            if (result !== undefined && result !== null && typeof result.catch === "function") result.catch(function () {});
+            return true;
+          }
+        }
+      } catch (error) {
+        console.error("[claude-workbench] suggestion prompt failed", error);
+      }
+      // Fallback: type into the composer and press Enter.
+      try {
+        var editor = document.querySelector('[contenteditable="true"]');
+        if (editor === null) return false;
+        editor.focus();
+        var selection = window.getSelection();
+        if (selection !== null) {
+          var range = document.createRange();
+          range.selectNodeContents(editor);
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+        document.execCommand("insertText", false, prompt);
+        editor.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: "Enter",
+            code: "Enter",
+            keyCode: 13,
+            which: 13,
+            bubbles: true,
+            cancelable: true
+          })
+        );
+        return true;
+      } catch (error) {
+        console.error("[claude-workbench] composer fallback failed", error);
+        return false;
+      }
+    }
+
+    var SUGGESTION_LANGS = { suggestions: true, suggestion: true, chips: true, next: true, "next-steps": true };
+
+    function fenceTakesOver(fence, items) {
+      if (items === null) return false;
+      var lang = typeof fence.lang === "string" ? fence.lang.trim().toLowerCase() : "";
+      if (lang !== "") return SUGGESTION_LANGS[lang] === true;
+      // The renderer can drop an unknown info string; fall back to content
+      // detection only for fences that clearly contain our JSON pair shape.
+      return true;
+    }
+
+    function SuggestionChips(props) {
+      var fence = props === undefined || props === null ? {} : props;
+      var ownerContent = fence.children;
+      var items = parseSuggestions(fence.code);
+      if (!fenceTakesOver(fence, items)) return ownerContent === undefined ? null : ownerContent;
+      var state = react.useState(-1);
+      var sentIndex = state[0];
+      var setSentIndex = state[1];
+      var lang = typeof fence.lang === "string" ? fence.lang.trim().toLowerCase() : "";
+      if (lang !== "" && SUGGESTION_LANGS[lang] !== true) return ownerContent === undefined ? null : ownerContent;
+      var children = [];
+      for (var index = 0; index < items.length; index += 1) {
+        children.push(renderChip(items[index], index, sentIndex, setSentIndex));
+      }
+      return jsx("div", {
+        className: "dsh-suggestions",
+        "data-sent": sentIndex >= 0 ? "1" : "0",
+        children: children
+      });
+    }
+
+    function renderChip(item, index, sentIndex, setSentIndex) {
+      var primary = index === 0;
+      return jsx(
+        "button",
+        {
+          type: "button",
+          className: primary ? "dsh-suggestion dsh-suggestion-primary" : "dsh-suggestion",
+          title: item.prompt,
+          onClick: function (event) {
+            if (event !== undefined) {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+            if (sentIndex >= 0) return;
+            setSentIndex(sendPrompt(item.prompt) ? index : -2);
+          },
+          children: primary
+            ? jsxs("span", {
+                className: "dsh-suggestion-content",
+                children: [
+                  jsx("span", { className: "dsh-suggestion-label", children: item.label }),
+                  jsx("span", { className: "dsh-suggestion-hint", children: "⌘↵" })
+                ]
+              })
+            : jsx("span", { className: "dsh-suggestion-label", children: item.label })
+        },
+        item.label + "#" + index
+      );
+    }
+
+    function attachSlot() {
+      var slots;
+      try {
+        slots = ctx !== undefined && ctx !== null && ctx.slots !== undefined ? ctx.slots : getService("slots");
+      } catch (error) {
+        slots = undefined;
+      }
+      slotState.found = slots !== undefined && slots !== null;
+      if (slots === undefined || slots === null || typeof slots.inject !== "function") {
+        attachAttempts += 1;
+        slotState.attempts = attachAttempts;
+        if (attachAttempts < 150) setTimeout(attachSlot, 200);
+        return;
+      }
+      try {
+        slots.inject("conversation.chat.markdown.fence", function () {
+          return slots.register(
+            {
+              name: "conversation.chat.markdown.fence",
+              id: "dsh-claude-workbench/fence/suggestions"
+            },
+            SuggestionChips
+          );
+        });
+        slotState.registered = true;
+      } catch (error) {
+        slotState.error = String(error && error.message ? error.message : error);
+        console.error("[claude-workbench] suggestion slot registration failed", error);
+      }
+    }
+
+    try {
+      globalThis.__dshPanesSuggestions = {
+        parse: parseSuggestions,
+        send: sendPrompt,
+        state: function () {
+          return { found: slotState.found, registered: slotState.registered, error: slotState.error, attempts: slotState.attempts };
+        }
+      };
+    } catch (error) {
+      /* debug hook is optional */
+    }
+
+    attachSlot();
+  } catch (error) {
+    console.error("[claude-workbench] suggestion chips initialization failed", error);
+  }
+}
 
 		let started = false;
 		async function start(ctx) {
@@ -746,6 +1191,7 @@ window.__ModuleLoader__.load({
 
 		function apply(ctx) {
 			start(ctx);
+			try { suggestionChips(ctx, { react: react, jsxRuntime: jsxRuntime }); } catch (error) { console.error("[claude-workbench] suggestion chips failed", error); }
 			if (typeof ctx.effect === "function") {
 				ctx.effect(() => () => {
 					try { globalThis.__dshPanesTeardown?.(); } catch (error) { /* ignore */ }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-claude-workbench",
-  "version": "0.1.1",
-  "description": "Claude-inspired workbench for the DeepSeek Harness Web GUI: warm editorial skin (Crimson Pro/DM Sans), split view with 2-3 side-by-side conversations, selection-based side chat, and a top-right light/dark switch.",
+  "version": "0.2.2",
+  "description": "Claude-inspired workbench for the DeepSeek Harness Web GUI: warm editorial skin (Crimson Pro/DM Sans), split view with 2-3 side-by-side conversations, selection-based side chat, a top-right light/dark switch, and a completion chime when a turn finishes.",
   "type": "module",
   "main": "lib/index.js",
   "exports": {
@@ -30,7 +30,10 @@
     "split-view",
     "splitview",
     "side-by-side",
-    "claude-style"
+    "claude-style",
+    "notification",
+    "chime",
+    "completion-sound"
   ],
   "license": "MIT",
   "dsh": {
@@ -42,7 +45,9 @@
         "@deepseek-ai/dsh-api-session-controller",
         "@deepseek-ai/dsh-client-ui-workspace",
         "@deepseek-ai/dsh-client-ui-theme",
-        "@deepseek-ai/dsh-client-ui-conversation"
+        "@deepseek-ai/dsh-client-ui-conversation",
+        "@deepseek-ai/dsh-client-ui-slots",
+        "@deepseek-ai/dsh-client-ui-chat"
       ],
       "platform": "web",
       "immediately": true