@falling-ts/dsh-web-ding 0.1.0 → 0.1.1

package/README.cn.md

@@ -13,7 +13,9 @@ Node/后端从不发声,也不走 Windows/系统通知。
 | 层 | 行为 |
 |----|------|
 | Host(`index.js` + `src/`) | 监听 `agent/status` 的 **idle 转变**(全部轮次与子代理结束、下一次人为对话之前;新建会话从未运行过的首次 idle 与重复 idle tick 都保持静默)。向 `falling-ts-web-ding` 设置命名空间写入 `{ phase:'done', at, sessionId }`。绝不发声、绝不调用系统。 |
-| 浏览器(`web/client.js`) | 经 `settingsScope` 实时镜像命名空间;收到 `at` 严格更新的 `done` 信号后用 Web Audio API 合成一声短"叮"(三个正弦振荡器 + 指数衰减包络),经标签页播放。 |
+| 浏览器(`web/client.js`) | 经 `settingsScope` 实时镜像命名空间;收到 `at` 严格更新的 `done` 信号后用 Web Audio API 合成一声短"叮",经标签页播放——同一瞬间在右下角弹出 Win11 风格 toast。点击 toast 展开右侧消息列表,展示全部回合结束消息(存在浏览器 localStorage,上限 100、按 signal `at` 去重),支持单条删除与全部删除。全程纯前端:后端不发声、不弹系统通知。 |
+
+除了提示音,每次回合结束还会在右下角弹出一条 Win11 风格 toast(6 秒自动消失)。点击它即可打开右侧消息列表:最近 100 条回合结束消息保存在浏览器 localStorage(键 falling-ts-web-ding.notify.v1),每条可单独删除,顶部"全部删除"按钮一键清空。消息记录纯前端——Host 不读也不写。
 
 ## 安装
 
@@ -56,6 +58,15 @@ dsh plugin --profile web add /path/to/dsh-web-ding
 插件自身规则见 `AGENTS.md`(纯 Host 监听器、后端不发声、不弹系统通知、只用
 官方 settings 镜像通道通向浏览器)。
 
+## 效果截图
+
+![设置页——「回合结束提示音」分区,各旋钮免重启实时可调](assets/setting-ding.png)
+
+*设置页——「回合结束提示音」分区:总开关、音量、频率、衰减时长全部免重启
+实时可调,并带"试听"按钮预热浏览器 AudioContext。*
+
+---
+
 ## License
 
 MIT

package/README.md

@@ -15,7 +15,7 @@ a pure-listener Host half + a browser client half connected by the official
 | Layer | What happens |
 |-------|--------------|
 | Host (`index.js` + `src/`) | Listens for the `agent/status` **idle transition** (all turns done, including sub-agents, before the next human turn; a fresh idle session that never ran, and repeated idle ticks, stay silent). Publishes `{ phase:'done', at, sessionId }` into the `falling-ts-web-ding` settings namespace. Never emits audio, never calls the OS. |
-| Browser (`web/client.js`) | Mirrors the namespace live via `settingsScope`. On a strictly-newer `done` signal it synthesizes a short `ding` (three sine oscillators + exponential decay envelopes) with the Web Audio API and plays it through the tab. |
+| Browser (`web/client.js`) | Mirrors the namespace live via `settingsScope`. On a strictly-newer `done` signal it synthesizes a short `ding` (three sine oscillators + exponential decay envelopes) with the Web Audio API and plays it through the tab — and, at the same moment, pops a Win11-style toast in the bottom-right corner. Clicking the toast slides in a notification drawer listing every turn-end message (kept in browser `localStorage`, capped at 100, deduped by signal `at`), with per-message delete and a clear-all button. Everything stays front-end: no backend audio, no OS notification. |
 
 ## Install
 
@@ -37,6 +37,13 @@ Requires the web app to ship the client bundle (the `dsh.client` declaration in
 
 Every session's agent turn end (transition to idle) rings; repeated idle ticks of an already-idle session and brand-new sessions that never ran stay silent.
 
+Besides the ring, each turn end drops a bottom-right toast (Win11-style,
+auto-dismisses after 6 s). Click it to open the right-side notification
+drawer: the last 100 turn-end messages are kept in the browser's
+`localStorage` (key `falling-ts-web-ding.notify.v1`), each row can be
+deleted individually, and a "全部删除" button clears them all. The message
+log is front-end only — the Host never reads or writes it.
+
 You can also adjust these from the **设置 → 回合结束提示音** panel, which
 includes a "试听" (preview) button.
 
@@ -61,6 +68,16 @@ See `AGENTS.md` for the plugin's own rules (pure Host listener, no backend
 audio, no OS notification, only sanctioned settings-mirror channel to the
 browser).
 
+## Screenshots
+
+![Settings page: the **ding** (回合结束提示音) section, live-editable controls](assets/setting-ding.png)
+
+*Settings page: the **回合结束提示音** section. Master switch, volume,
+frequency and decay length are all live-editable without a restart, with a
+**试听** (preview) button to warm the browser AudioContext.*
+
+---
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@falling-ts/dsh-web-ding",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "DSH Cordis plugin: announces the moment an agent finishes (turns idle) by pushing a 'done' signal from the Host half into the falling-ts-web-ding settings namespace, which the browser client half mirrors live and answers with a synthesized 'ding' tone via the Web Audio API. The tone is played ENTIRELY by front-end JS in the browser — the Host/node backend never emits audio and no Windows/system notification is used.",
   "type": "module",
   "main": "./index.js",
@@ -13,6 +13,7 @@
     "index.js",
     "src/",
     "web/",
+    "assets/",
     "cordis.patch.yml"
   ],
   "license": "MIT",

package/web/client.js

@@ -102,7 +102,357 @@ window.__ModuleLoader__.load({
       return true;
     }
 
-    // ── 命名空间快照 → 信号检测 → 播放 ------------------------------------------
+        // ── 回合结束消息缓存(浏览器侧,localStorage 持久化) ------------------------
+    // 每次回合结束写入一条消息:{ at, timeText, sessionId }。缓存按 at 去重、上限
+    // NOTIFY_CAP 条,存 localStorage;右下角弹窗与右侧消息列表通过 subscribeNotify
+    // 订阅变更。这是纯前端数据(零后端、零系统通知),与 Web Audio 播放同源。
+    const NOTIFY_KEY = "falling-ts-web-ding.notify.v1";
+    const NOTIFY_CAP = 100;
+    let notifyCache = null; // null = 尚未加载(惰性)
+    const notifyListeners = new Set();
+
+    function loadNotifyCache() {
+      if (notifyCache !== null) return notifyCache;
+      try {
+        const raw = window.localStorage.getItem(NOTIFY_KEY);
+        const arr = raw ? JSON.parse(raw) : [];
+        notifyCache = Array.isArray(arr) ? arr.filter((m) => m && typeof m.at === "number") : [];
+      } catch {
+        notifyCache = [];
+      }
+      return notifyCache;
+    }
+    function saveNotifyCache() {
+      try {
+        window.localStorage.setItem(NOTIFY_KEY, JSON.stringify(notifyCache.slice(0, NOTIFY_CAP)));
+      } catch { /* 无存储可用(private 模式等)时仅保留内存副本 */ }
+    }
+    function emitNotifyChange() {
+      notifyCache = loadNotifyCache();
+      const list = notifyCache;
+      notifyListeners.forEach((fn) => { try { fn(list); } catch {} });
+    }
+    function subscribeNotify(fn) {
+      notifyListeners.add(fn);
+      return () => notifyListeners.delete(fn);
+    }
+    /** 记录一条"回合结束"消息(同一 at 只记一次)。title 为会话真实标题(查不到时省略)。 */
+    function recordTurnEnd(at, sessionId, title) {
+      const list = loadNotifyCache();
+      if (list.some((m) => m.at === at)) return;
+      const d = new Date(at);
+      const pad = (n) => String(n).padStart(2, "0");
+      const timeText = d.getFullYear() + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate()) +
+        " " + pad(d.getHours()) + ":" + pad(d.getMinutes()) + ":" + pad(d.getSeconds());
+      list.unshift({
+        at,
+        timeText,
+        sessionId: typeof sessionId === "string" ? sessionId : undefined,
+        title: typeof title === "string" && title.trim() ? title : undefined,
+      });
+      if (list.length > NOTIFY_CAP) list.length = NOTIFY_CAP;
+      saveNotifyCache();
+      emitNotifyChange();
+    }
+    /**
+     * 通过 session.list 查询会话的真实标题(projections.values.title)。
+     * 信号里只有 sessionId,标题不在事件负载中;失败或未找到时返回
+     * undefined,调用方回退到无标题展示。
+     * @param {string|undefined} sessionId
+     * @returns {Promise<string|undefined>}
+     */
+    async function fetchSessionTitle(sessionId) {
+      if (!sessionId) return undefined;
+      try {
+        const res = await fetch(location.origin + "/api/session.list", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            type: "client-request",
+            rpcId: (window.crypto && window.crypto.randomUUID ? window.crypto.randomUUID() : String(Date.now())),
+            method: "session.list",
+            payload: {},
+          }),
+        });
+        const json = await res.json();
+        const result = json && json.result;
+        const items = result && result.ok && Array.isArray(result.value && result.value.items) ? result.value.items : [];
+        const row = items.find((it) => it && it.sessionId === sessionId);
+        const title = row && row.projections && row.projections.values && row.projections.values.title;
+        return typeof title === "string" && title.trim() ? title : undefined;
+      } catch {
+        return undefined;
+      }
+    }
+    /** 删除单条"回合结束"消息(按 at 匹配)。 */
+    function removeRecord(at) {
+      const list = loadNotifyCache();
+      const next = list.filter((m) => m.at !== at);
+      if (next.length === list.length) return;
+      notifyCache = next;
+      saveNotifyCache();
+      emitNotifyChange();
+    }
+    /** 清空全部"回合结束"消息。 */
+    function clearAllRecords() {
+      if (!loadNotifyCache().length) return;
+      notifyCache = [];
+      saveNotifyCache();
+      emitNotifyChange();
+    }
+
+    // ── 右下角通知弹窗(Win11 风格,纯内联样式/零资产) --------------------------
+    // 回合结束 ding 的同时弹出;6 秒自动消失,可手动关闭。点击主体在 C3 起
+    // 展开右侧消息列表。所有样式内联,不引入任何图片/CSS 资产。
+    const TOAST_TINT = "linear-gradient(135deg, rgba(0,120,212,0.16), rgba(0,120,212,0.05))";
+    let toastLayer = null;
+    function ensureToastLayer() {
+      if (toastLayer && document.body.contains(toastLayer)) return toastLayer;
+      toastLayer = document.createElement("div");
+      Object.assign(toastLayer.style, {
+        position: "fixed", right: "20px", bottom: "20px", zIndex: 2147483000,
+        display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "12px",
+        pointerEvents: "none",
+      });
+      document.body.appendChild(toastLayer);
+      return toastLayer;
+    }
+    function dismissToast(el) {
+      el.style.transition = "opacity 0.22s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1)";
+      el.style.opacity = "0";
+      el.style.transform = "translateX(28px) scale(0.97)";
+      window.setTimeout(() => { if (el.parentNode) el.parentNode.removeChild(el); }, 300);
+    }
+    function showTurnEndToast(msg) {
+      const layer = ensureToastLayer();
+      const d = new Date(msg.at);
+      const pad = (n) => String(n).padStart(2, "0");
+      const timeText = msg.timeText ||
+        (d.getFullYear() + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate()) +
+          " " + pad(d.getHours()) + ":" + pad(d.getMinutes()) + ":" + pad(d.getSeconds()));
+      const el = document.createElement("div");
+      Object.assign(el.style, {
+        pointerEvents: "auto", position: "relative", width: 360, minHeight: 88,
+        background: "rgba(255,255,255,0.88)", backdropFilter: "blur(20px) saturate(1.5)",
+        WebkitBackdropFilter: "blur(20px) saturate(1.5)",
+        border: "1px solid rgba(0,0,0,0.05)", borderRadius: 16,
+        boxShadow: "0 1px 2px rgba(0,0,0,0.04), 0 6px 16px rgba(0,0,0,0.08), 0 20px 48px rgba(0,0,0,0.14)",
+        overflow: "hidden",
+        display: "flex", alignItems: "stretch", cursor: "pointer",
+        opacity: "0", transform: "translateX(28px) scale(0.97)",
+        transition: "opacity 0.22s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)",
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Microsoft YaHei', sans-serif",
+        color: "#1f1f1f", fontSize: 13,
+      });
+      const accent = document.createElement("div");
+      Object.assign(accent.style, {
+        width: 4, flexShrink: 0, background: "#0078d4",
+      });
+      const body = document.createElement("div");
+      Object.assign(body.style, { padding: "17px 18px 16px", minWidth: 0 });
+      const head = document.createElement("div");
+      Object.assign(head.style, {
+        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10,
+      });
+      const title = document.createElement("span");
+      title.textContent = "回合结束";
+      Object.assign(title.style, { fontSize: 14, fontWeight: 600, letterSpacing: 0.2 });
+      const closeBtn = document.createElement("button");
+      closeBtn.type = "button";
+      closeBtn.textContent = "×";
+      Object.assign(closeBtn.style, {
+        border: "none", background: "transparent", cursor: "pointer",
+        fontSize: 17, lineHeight: 1, padding: "4px 8px", borderRadius: 8,
+        color: "rgba(0,0,0,0.55)", transition: "background 0.15s ease",
+      });
+      closeBtn.addEventListener("mouseenter", () => { closeBtn.style.background = "rgba(0,0,0,0.06)"; });
+      closeBtn.addEventListener("mouseleave", () => { closeBtn.style.background = "transparent"; });
+      closeBtn.addEventListener("click", (ev) => {
+        ev.stopPropagation();
+        window.clearTimeout(el._timer);
+        dismissToast(el);
+      });
+      head.appendChild(title);
+      head.appendChild(closeBtn);
+      const text = document.createElement("div");
+      text.textContent = msg.title ? msg.title + " 已完成" : "agent 已完成回合——浏览器播放一声“叮”。";
+      Object.assign(text.style, { marginTop: 10, lineHeight: 1.65, color: "rgba(0,0,0,0.66)" });
+      const foot = document.createElement("div");
+      foot.textContent = timeText;
+      Object.assign(foot.style, { marginTop: 12, fontSize: 12, color: "rgba(0,0,0,0.48)" });
+      body.appendChild(head);
+      body.appendChild(text);
+      body.appendChild(foot);
+      el.appendChild(accent);
+      el.appendChild(body);
+      layer.appendChild(el);
+      void el.offsetHeight; // force reflow → 触发进入动画
+      el.style.opacity = "1";
+      el.style.transform = "translateX(0) scale(1)";
+      el._timer = window.setTimeout(() => dismissToast(el), 6000);
+      el.addEventListener("click", () => {
+        window.clearTimeout(el._timer);
+        openNotifyDrawer();
+      });
+      return el;
+    }
+
+    // ── 右侧消息列表面板(点击 toast 展开;纯前端 DOM,零资产) ------------------
+    // 覆盖层 + 右侧滑入面板:列出缓存里的回合结束消息(时间、会话摘要),空态
+    // 提示;通过 subscribeNotify 订阅缓存变更实时重绘。点击遮罩或 × 关闭。
+    let drawerHost = null;
+    let drawerUnsub = null;
+    function closeNotifyDrawer() {
+      if (drawerUnsub) { drawerUnsub(); drawerUnsub = null; }
+      if (!drawerHost || !document.body.contains(drawerHost)) { drawerHost = null; return; }
+      const overlay = drawerHost;
+      const panel = overlay._panel;
+      panel.style.transform = "translateX(100%)";
+      overlay.style.opacity = "0";
+      window.setTimeout(() => {
+        if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
+        if (drawerHost === overlay) drawerHost = null;
+      }, 300);
+    }
+    function renderDrawerList(container) {
+      container.textContent = "";
+      const list = loadNotifyCache();
+      if (!list.length) {
+        const empty = document.createElement("div");
+        empty.textContent = "暂无回合结束消息";
+        Object.assign(empty.style, {
+          padding: "56px 20px", textAlign: "center",
+          color: "rgba(0,0,0,0.42)", fontSize: 13, lineHeight: 1.6,
+        });
+        container.appendChild(empty);
+        return;
+      }
+      list.forEach((m) => {
+        const row = document.createElement("div");
+        Object.assign(row.style, {
+          display: "flex", alignItems: "center", gap: 12,
+          padding: "14px 16px", borderRadius: 12,
+          marginBottom: 6, cursor: "default",
+          background: "rgba(0,0,0,0)", transition: "background 0.16s ease",
+        });
+        row.addEventListener("mouseenter", () => { row.style.background = "rgba(0,0,0,0.045)"; });
+        row.addEventListener("mouseleave", () => { row.style.background = "rgba(0,0,0,0)"; });
+        const info = document.createElement("div");
+        Object.assign(info.style, { flex: 1, minWidth: 0 });
+        const timeEl = document.createElement("div");
+        timeEl.textContent = m.timeText;
+        Object.assign(timeEl.style, { fontSize: 13, fontWeight: 600, fontVariantNumeric: "tabular-nums" });
+        const subEl = document.createElement("div");
+        subEl.textContent = m.title ? m.title + " 已完成" : (m.sessionId ? "会话 " + String(m.sessionId).slice(0, 12) + "…" : "回合结束");
+        Object.assign(subEl.style, { fontSize: 12.5, color: "rgba(0,0,0,0.5)", marginTop: 4 });
+        info.appendChild(timeEl);
+        info.appendChild(subEl);
+        const del = document.createElement("button");
+        del.type = "button";
+        del.textContent = "删除";
+        Object.assign(del.style, {
+          border: "1px solid rgba(0,0,0,0.14)", background: "transparent",
+          borderRadius: 8, padding: "5px 12px", cursor: "pointer",
+          fontSize: 12.5, color: "rgba(0,0,0,0.6)", flexShrink: 0,
+          transition: "background 0.16s ease, border-color 0.16s ease",
+        });
+        del.addEventListener("mouseenter", () => {
+          del.style.background = "rgba(0,0,0,0.06)";
+          del.style.borderColor = "rgba(0,0,0,0.26)";
+        });
+        del.addEventListener("mouseleave", () => {
+          del.style.background = "transparent";
+          del.style.borderColor = "rgba(0,0,0,0.14)";
+        });
+        del.addEventListener("click", (ev) => { ev.stopPropagation(); removeRecord(m.at); });
+        row.appendChild(info);
+        row.appendChild(del);
+        container.appendChild(row);
+      });
+    }
+    function openNotifyDrawer() {
+      if (drawerHost && document.body.contains(drawerHost)) { closeNotifyDrawer(); return; }
+      const overlay = document.createElement("div");
+      Object.assign(overlay.style, {
+        position: "fixed", inset: 0, zIndex: 2147483001,
+        background: "rgba(0,0,0,0.36)",
+        pointerEvents: "auto", opacity: 0,
+        transition: "opacity 0.2s ease",
+      });
+      overlay.addEventListener("click", closeNotifyDrawer);
+      const panel = document.createElement("div");
+      Object.assign(panel.style, {
+        position: "absolute", top: 0, right: 0, height: "100%", width: 400, maxWidth: "94vw",
+        background: "rgba(255,255,255,0.94)",
+        backdropFilter: "blur(24px) saturate(1.5)",
+        WebkitBackdropFilter: "blur(24px) saturate(1.5)",
+        boxShadow: "-2px 0 6px rgba(0,0,0,0.04), -10px 0 32px rgba(0,0,0,0.10), -32px 0 80px rgba(0,0,0,0.12)",
+        transform: "translateX(100%)",
+        transition: "transform 0.26s cubic-bezier(0.16, 1, 0.3, 1)",
+        display: "flex", flexDirection: "column",
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Microsoft YaHei', sans-serif",
+        color: "#1f1f1f",
+      });
+      const header = document.createElement("div");
+      Object.assign(header.style, {
+        display: "flex", alignItems: "center", justifyContent: "space-between",
+        padding: "18px 20px 16px", borderBottom: "1px solid rgba(0,0,0,0.07)",
+        flexShrink: 0,
+      });
+      const titleEl = document.createElement("span");
+      titleEl.textContent = "回合结束消息";
+      Object.assign(titleEl.style, { fontSize: 16, fontWeight: 700, letterSpacing: 0.2 });
+      const clearBtn = document.createElement("button");
+      clearBtn.type = "button";
+      clearBtn.textContent = "全部删除";
+      Object.assign(clearBtn.style, {
+        border: "1px solid rgba(0,0,0,0.14)", background: "transparent",
+        borderRadius: 8, padding: "5px 12px", cursor: "pointer",
+        fontSize: 12.5, color: "rgba(0,0,0,0.6)",
+        transition: "background 0.16s ease, border-color 0.16s ease",
+      });
+      clearBtn.addEventListener("mouseenter", () => {
+        clearBtn.style.background = "rgba(0,0,0,0.06)";
+        clearBtn.style.borderColor = "rgba(0,0,0,0.26)";
+      });
+      clearBtn.addEventListener("mouseleave", () => {
+        clearBtn.style.background = "transparent";
+        clearBtn.style.borderColor = "rgba(0,0,0,0.14)";
+      });
+      clearBtn.addEventListener("click", (ev) => { ev.stopPropagation(); clearAllRecords(); });
+      const closeBtn = document.createElement("button");
+      closeBtn.type = "button";
+      closeBtn.textContent = "×";
+      Object.assign(closeBtn.style, {
+        border: "none", background: "transparent", cursor: "pointer",
+        fontSize: 19, lineHeight: 1, padding: "4px 9px", borderRadius: 8,
+        color: "rgba(0,0,0,0.55)", transition: "background 0.15s ease",
+      });
+      closeBtn.addEventListener("mouseenter", () => { closeBtn.style.background = "rgba(0,0,0,0.06)"; });
+      closeBtn.addEventListener("mouseleave", () => { closeBtn.style.background = "transparent"; });
+      closeBtn.addEventListener("click", (ev) => { ev.stopPropagation(); closeNotifyDrawer(); });
+      const headerActions = document.createElement("div");
+      Object.assign(headerActions.style, { display: "flex", alignItems: "center", gap: 8 });
+      headerActions.appendChild(clearBtn);
+      headerActions.appendChild(closeBtn);
+      header.appendChild(titleEl);
+      header.appendChild(headerActions);
+      const listEl = document.createElement("div");
+      Object.assign(listEl.style, { flex: 1, overflowY: "auto", padding: "10px 12px 14px" });
+      panel.appendChild(header);
+      panel.appendChild(listEl);
+      overlay.appendChild(panel);
+      document.body.appendChild(overlay);
+      overlay._panel = panel;
+      drawerHost = overlay;
+      renderDrawerList(listEl);
+      drawerUnsub = subscribeNotify(() => renderDrawerList(listEl));
+      void overlay.offsetHeight;
+      overlay.style.opacity = "1";
+      panel.style.transform = "translateX(0)";
+    }
+
+// ── 命名空间快照 → 信号检测 → 播放 ------------------------------------------
     // lastAt:本页面最后响应过的 signal.at。首帧(页面加载时已存在的残留)只做
     // 基线、不播放;之后 at 严格增长的新 'done' 信号才叮一声。
     let lastAt = null;
@@ -120,6 +470,14 @@ window.__ModuleLoader__.load({
       lastAt = at;
       if (value.enabled !== false) {
         playDing({ volume: value.volume, freq: value.freq, decayMs: value.decayMs });
+        const sessionId = typeof sig.sessionId === "string" ? sig.sessionId : undefined;
+        // 信号里只有 sessionId:异步查一次真实标题再落缓存与弹 toast。
+        void (async () => {
+          const title = await fetchSessionTitle(sessionId);
+          const msg = { at, sessionId, title };
+          recordTurnEnd(at, sessionId, title);
+          showTurnEndToast(msg);
+        })();
       }
     }