dsh-notify-me 1.7.0 → 1.9.0

package/lib/client.js

@@ -256,6 +256,19 @@
       // through the Service Worker half of this same file; where that cannot
       // run, the toast simply falls back to its plain form.
       quickActions: true,
+      // Where the alert is drawn. The OS toast always lands on the primary
+      // display — Windows offers no setting (and Chromium no API) to aim a
+      // banner at another monitor — so a user whose DSH window lives on a
+      // second screen never sees one. This option draws the same alert inside
+      // the page instead: it appears on whatever screen the window is on, needs
+      // no notification permission, and can carry the approval buttons even on
+      // the desktop shell (whose dsh-app:// page cannot run the Service Worker
+      // that OS action buttons need). Independent of `toast`; neither replaces
+      // the other, so "both" is a valid setup.
+      overlay: false,
+      // Which corner of this window the overlay cards stack in. The screen
+      // follows the window — the page cannot aim it anywhere else either.
+      overlayCorner: "bottom-right", // bottom-right | bottom-left | top-right | top-left
       // External forwarding: mirror every alert the plugin actually delivers to
       // webhook endpoints (Discord / Bark / Gotify / custom), so a phone or
       // another box can tell the user to come back. Off by default — nothing
@@ -287,6 +300,12 @@
     function setConfigLocal(patch) {
       config = writeConfig(patch);
       applyTitle();
+      // Overlay re-apply: switching it off takes the cards down at once and a
+      // new corner moves the layer without waiting for the next alert.
+      try {
+        if (!config.overlay) clearOverlays();
+        else if (overlayLayer) overlayLayer.className = "dnm-ov-layer dnm-ov-" + overlayCorner();
+      } catch (e) {}
       return config;
     }
 
@@ -341,9 +360,10 @@
         sep: "：",
         approve: "同意",
         reject: "拒绝",
+        dismiss: "关闭这条提醒",
         testAttention: "这是一条测试提醒：DSH 需要你的操作",
         testDone: "测试提醒 · 回复完成示例",
-        testApproval: "这是一条测试审批：点通知上的「同意 / 拒绝」按钮试试快捷裁决",
+        testApproval: "这是一条测试审批：点「同意 / 拒绝」试试快捷裁决",
         testApproved: "测试提醒 · 已模拟「同意」（仅测试，未改动任何会话）",
         testRejected: "测试提醒 · 已模拟「拒绝」（仅测试，未改动任何会话）",
         testExternalTitle: "外部通知测试",
@@ -367,9 +387,10 @@
         sep: ": ",
         approve: "Approve",
         reject: "Reject",
+        dismiss: "Dismiss this alert",
         testAttention: "This is a test alert: DSH is waiting for your input",
         testDone: "Test alert · reply-finished sample",
-        testApproval: "This is a test approval: try quick decisions with the Approve / Reject buttons on the toast",
+        testApproval: "This is a test approval: try the Approve / Reject buttons to settle it",
         testApproved: "Test alert · simulated \"Approve\" (test only, nothing changed)",
         testRejected: "Test alert · simulated \"Reject\" (test only, nothing changed)",
         testExternalTitle: "External notification test",
@@ -639,6 +660,7 @@
       if (!rec) return false; // already answered elsewhere, or a stale toast
       delete pendingActions[key];
       if (!rec.test) closeNotificationTag(rec.tag);
+      closeOverlayForKey(key);
       if (rec.test) {
         // Test toasts settle nothing real; the feedback toast IS the proof that
         // the button clicked all the way through the worker bridge.
@@ -660,7 +682,10 @@
     // they are the only kind whose decision is a plain binary, and the only one
     // whose object answers answer('allowed-once' | 'rejected').
     function quickFor(key, it, sessionId) {
-      if (!config.quickActions || !config.toast) return null;
+      // The overlay can settle approvals without a worker, so it counts as a
+      // button channel on its own — the desktop shell, where OS action buttons
+      // cannot render, gets them this way.
+      if (!config.quickActions || !(config.toast || config.overlay)) return null;
       if (!it || it.kind !== "approval" || typeof it.answer !== "function") return null;
       var q = {
         key: key,
@@ -734,6 +759,191 @@
         setTimeout(function () { n.close(); }, 15000);
       } catch (e) {}
     }
+
+    // ─────────────────── page overlay reminders ──────────────────────
+    // Windows draws notification banners on the primary display and exposes no
+    // way to aim them at another monitor; a user who keeps DSH on a second
+    // screen therefore never sees a toast. This overlay draws the same alert
+    // inside the page instead, so it lands on whatever screen the DSH window
+    // occupies. It also needs no notification permission, and — unlike OS
+    // action buttons, which require the Service Worker the desktop shell cannot
+    // run — it can carry the 同意/拒绝 buttons everywhere. Off by default;
+    // independent of the toast switch.
+    var OVERLAY_STYLE_ID = "dsh-notify-me/overlay";
+    var OVERLAY_ID = "dsh-notify-me-overlay";
+    var OVERLAY_MAX_CARDS = 4;
+    // An approval card is actionable and stays until it is answered or closed;
+    // the other kinds fade on the toast's own schedule (a toast closes at 15s).
+    var OVERLAY_TTL = { attention: 20000, done: 8000 };
+    var OVERLAY_CORNERS = ["bottom-right", "bottom-left", "top-right", "top-left"];
+    var OVERLAY_CSS = "" +
+      ".dnm-ov-layer{position:fixed;z-index:2147483000;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:calc(100vw - 24px)}" +
+      ".dnm-ov-bottom-right{right:16px;bottom:16px;align-items:flex-end}" +
+      ".dnm-ov-bottom-left{left:16px;bottom:16px;align-items:flex-start}" +
+      ".dnm-ov-top-right{right:16px;top:16px;align-items:flex-end}" +
+      ".dnm-ov-top-left{left:16px;top:16px;align-items:flex-start}" +
+      ".dnm-ov{pointer-events:auto;width:320px;max-width:calc(100vw - 32px);box-sizing:border-box;border-radius:12px;padding:10px 12px 11px;display:flex;flex-direction:column;gap:7px;font-size:13px;line-height:19px;color:var(--dsw-alias-label-primary,#f3f4f6);background:var(--dsw-alias-bg-layer-3,rgba(30,32,36,.97));border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.35));border-left-width:3px;box-shadow:0 12px 32px rgba(0,0,0,.32);cursor:pointer;animation:dnmOvIn .16s ease-out}" +
+      ".dnm-ov-attention{border-left-color:var(--dsw-alias-state-warning-primary,#f59e0b)}" +
+      ".dnm-ov-done{border-left-color:var(--dsw-alias-state-success-primary,#22c55e)}" +
+      ".dnm-ov-head{display:flex;align-items:center;gap:7px}" +
+      ".dnm-ov-dot{flex:none;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.55}" +
+      ".dnm-ov-attention .dnm-ov-dot{color:var(--dsw-alias-state-warning-primary,#f59e0b);opacity:1}" +
+      ".dnm-ov-done .dnm-ov-dot{color:var(--dsw-alias-state-success-primary,#22c55e);opacity:1}" +
+      ".dnm-ov-title{flex:1;min-width:0;font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}" +
+      ".dnm-ov-x{flex:none;border:0;background:transparent;color:inherit;opacity:.6;font-size:15px;line-height:15px;padding:0 2px;cursor:pointer;font-family:inherit}" +
+      ".dnm-ov-x:hover{opacity:1}" +
+      ".dnm-ov-body{color:var(--dsw-alias-label-secondary,rgba(220,222,226,.86));font-size:12px;line-height:18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}" +
+      ".dnm-ov-actions{display:flex;gap:8px;margin-top:2px}" +
+      ".dnm-ov-btn{flex:1;border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.4));background:var(--dsw-alias-bg-layer-1,rgba(255,255,255,.06));color:inherit;border-radius:8px;padding:5px 10px;font-size:12px;font-family:inherit;cursor:pointer}" +
+      ".dnm-ov-btn:hover{background:var(--dsw-alias-bg-layer-2,rgba(255,255,255,.12))}" +
+      ".dnm-ov-approve{border-color:transparent;background:var(--dsw-alias-state-business-primary,#3b82f6);color:#fff}" +
+      ".dnm-ov-approve:hover{background:var(--dsw-alias-state-business-primary,#3b82f6);filter:brightness(1.06)}" +
+      ".dnm-ov-reject{color:inherit}" +
+      "@keyframes dnmOvIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}";
+    var overlayLayer = null;
+    var overlayCards = Object.create(null); // id -> { card, key, kind, timer }
+    var overlaySeq = 0;
+    function overlayCorner() {
+      return OVERLAY_CORNERS.indexOf(config.overlayCorner) === -1 ? "bottom-right" : config.overlayCorner;
+    }
+    function injectOverlayStyle() {
+      try {
+        if (typeof document === "undefined" || typeof document.createElement !== "function") return;
+        if (!document.head && !document.documentElement) return;
+        var sel = "style[data-plugin-css=" + JSON.stringify(OVERLAY_STYLE_ID) + "]";
+        var seen = false;
+        try { seen = !!(document.querySelector && document.querySelector(sel)); } catch (e) {}
+        if (seen) return;
+        var s = document.createElement("style");
+        s.dataset.plugin = "dsh-notify-me";
+        s.dataset.pluginCss = OVERLAY_STYLE_ID;
+        s.textContent = OVERLAY_CSS;
+        (document.head || document.documentElement).appendChild(s);
+      } catch (e) {}
+    }
+    // The fixed layer lives directly under <body> so no ancestor transform or
+    // stacking context in the host app can drag the cards away from the corner.
+    function ensureOverlayLayer() {
+      try {
+        if (typeof document === "undefined" || typeof document.createElement !== "function" || !document.body) return null;
+        injectOverlayStyle();
+        if (!overlayLayer || !overlayLayer.parentNode) {
+          // A reload of this bundle can leave a previous layer behind; the id is
+          // the only handle an HMR-free page gives us.
+          var old = null;
+          try { old = document.getElementById && document.getElementById(OVERLAY_ID); } catch (e) {}
+          if (old && old.parentNode) old.parentNode.removeChild(old);
+          overlayLayer = document.createElement("div");
+          overlayLayer.id = OVERLAY_ID;
+          overlayLayer.setAttribute("role", "status");
+          overlayLayer.setAttribute("aria-live", "polite");
+          document.body.appendChild(overlayLayer);
+        }
+        overlayLayer.className = "dnm-ov-layer dnm-ov-" + overlayCorner();
+        return overlayLayer;
+      } catch (e) { return null; }
+    }
+    function dismissOverlay(id) {
+      var rec = overlayCards[id];
+      if (!rec) return;
+      delete overlayCards[id];
+      if (rec.timer) { try { clearTimeout(rec.timer); } catch (e) {} }
+      try { if (rec.card && rec.card.parentNode) rec.card.parentNode.removeChild(rec.card); } catch (e) {}
+    }
+    // An approval that gets answered elsewhere (the in-page card, another
+    // toast, a session switch) must not leave a stale overlay behind.
+    function closeOverlayForKey(key) {
+      if (!key) return;
+      var ids = Object.keys(overlayCards);
+      for (var i = 0; i < ids.length; i++) {
+        if (overlayCards[ids[i]].key === key) dismissOverlay(ids[i]);
+      }
+    }
+    function clearOverlays() {
+      var ids = Object.keys(overlayCards);
+      for (var i = 0; i < ids.length; i++) dismissOverlay(ids[i]);
+      if (overlayLayer) {
+        try { if (overlayLayer.parentNode) overlayLayer.parentNode.removeChild(overlayLayer); } catch (e) {}
+        overlayLayer = null;
+      }
+    }
+    function overlayCount() { return Object.keys(overlayCards).length; }
+    // Same inputs as showToast: `quick` is the approval record built by
+    // quickFor(), and it is what lets an overlay settle the request in place.
+    function showOverlay(kind, title, body, sessionId, quick) {
+      if (!config.overlay) return false;
+      var layer = ensureOverlayLayer();
+      if (!layer) return false;
+      var d = texts();
+      try {
+        var id = "ov" + (++overlaySeq);
+        var card = document.createElement("div");
+        card.className = "dnm-ov dnm-ov-" + (kind === "attention" ? "attention" : "done");
+        card.setAttribute("role", kind === "attention" ? "alert" : "status");
+        var head = document.createElement("div");
+        head.className = "dnm-ov-head";
+        var dot = document.createElement("span");
+        dot.className = "dnm-ov-dot";
+        var label = document.createElement("span");
+        label.className = "dnm-ov-title";
+        label.textContent = String(title == null ? "" : title);
+        var close = document.createElement("button");
+        close.type = "button";
+        close.className = "dnm-ov-x";
+        close.setAttribute("aria-label", d.dismiss);
+        close.textContent = "×";
+        close.onclick = function (ev) {
+          if (ev && ev.stopPropagation) ev.stopPropagation();
+          dismissOverlay(id);
+        };
+        head.appendChild(dot);
+        head.appendChild(label);
+        head.appendChild(close);
+        card.appendChild(head);
+        if (body) {
+          var bodyEl = document.createElement("div");
+          bodyEl.className = "dnm-ov-body";
+          bodyEl.textContent = String(body);
+          card.appendChild(bodyEl);
+        }
+        if (quick && typeof quick.key === "string") {
+          var actions = document.createElement("div");
+          actions.className = "dnm-ov-actions";
+          var actionBtn = function (cls, text, outcome) {
+            var b = document.createElement("button");
+            b.type = "button";
+            b.className = "dnm-ov-btn " + cls;
+            b.textContent = text;
+            b.onclick = function (ev) {
+              if (ev && ev.stopPropagation) ev.stopPropagation();
+              try { decidePending(quick.key, outcome); } catch (e) {}
+              dismissOverlay(id);
+            };
+            return b;
+          };
+          actions.appendChild(actionBtn("dnm-ov-approve", d.approve, "allowed-once"));
+          actions.appendChild(actionBtn("dnm-ov-reject", d.reject, "rejected"));
+          card.appendChild(actions);
+        }
+        // A click on the card body opens the conversation, exactly like a toast
+        // body click — and here it is an ordinary page gesture, so it reaches the
+        // desktop's dsh:// raise path even though a worker click would not.
+        card.onclick = function () {
+          if (config.autoFocus) focusSession(sessionId || null);
+          dismissOverlay(id);
+        };
+        layer.appendChild(card);
+        var rec = { card: card, key: (quick && quick.key) ? quick.key : null, kind: kind, timer: null };
+        overlayCards[id] = rec;
+        var ids = Object.keys(overlayCards);
+        for (var i = 0; i < ids.length - OVERLAY_MAX_CARDS; i++) dismissOverlay(ids[i]);
+        if (!(quick && typeof quick.key === "string")) {
+          var ttl = OVERLAY_TTL[kind === "attention" ? "attention" : "done"];
+          if (ttl) rec.timer = setTimeout(function () { dismissOverlay(id); }, ttl);
+        }
+        return true;
+      } catch (e) { return false; }
+    }
     // Sound: WebAudio beeps (no asset needed). The context only runs after a
     // user gesture; we unlock it on the first pointer/key event.
     var audioCtx = null;
@@ -1044,7 +1254,10 @@
       var rec = pendingActions[key];
       if (rec) {
         delete pendingActions[key];
-        if (!rec.test) closeNotificationTag(rec.tag);
+        if (!rec.test) {
+          closeNotificationTag(rec.tag);
+          closeOverlayForKey(key);
+        }
       }
       if (!attentionKeysMarked[key]) return;
       delete attentionKeysMarked[key];
@@ -1084,6 +1297,7 @@
     function deliver(kind, title, body, sessionId, quick) {
       if (!config.enabled) return;
       showToast(kind, title, body, sessionId, quick);
+      showOverlay(kind, title, body, sessionId, quick);
       if (kind === "attention") {
         playAttentionSound();
       } else {
@@ -1723,7 +1937,7 @@
       });
     } catch (e) {}
     // keep in sync with package.json "version" on every release
-    api.version = "1.7.0";
+    api.version = "1.9.0";
     api.setConfig = function (patch) { return setConfigLocal(patch); };
     api.resetConfig = function () {
       try {
@@ -1791,6 +2005,14 @@
         customSoundDone: !!readSound("done"),
         customSoundAttention: !!readSound("attention"),
         quickActions: config.quickActions,
+        // in-page overlay: the alert channel that follows the DSH window to
+        // whatever display it sits on, instead of the OS toast's fixed primary
+        // display. cards is the live stack, corner the configured anchor.
+        overlay: {
+          enabled: !!config.overlay,
+          corner: overlayCorner(),
+          cards: overlayCount()
+        },
         // external webhook forwarding: counts come from externalStat (tallied
         // on every send), targets is the raw vs validated count.
         external: {
@@ -1837,9 +2059,19 @@
     var NS = "dsh-notify-me";
     var UI_zh = {
       nav: "通知提醒",
-      blurb: "当模型停下来需要你操作（审批 / 方案待确认 / 提问），或回复在后台完成时，用系统通知、提示音和标签页标题提醒你。",
+      blurb: "模型停下来需要你操作，或回复在后台完成时提醒你。",
+      secWays: "提醒方式",
+      secWhen: "什么时候提醒",
+      secTest: "试一试",
+      advanced: "高级设置",
+      advancedHint: "音效来源 · 外部通知 · 运行环境",
+      secDiag: "运行环境与诊断",
+      expand: "展开",
+      collapse: "收起",
+      permHintInline: "尚未授权，允许一次即可。",
+      resetHint: "把上面所有选项还原成默认值（含已选的自定义音效）。",
       enable: "启用提醒",
-      enableHint: "总开关：关闭后不再弹系统通知、不播放提示音，也不再改动标签页标题。",
+      enableHint: "关闭后不弹通知、不响提示音，也不改标签页标题。",
       hostEnv: "运行环境",
       hostEnvHint: "默认自动识别：页面协议是 dsh-app:// 即桌面端（DSH Desktop），其余为 Web 端。识别不准时手动指定：桌面端点通知借 dsh:// 深链把窗口带到前台、快捷裁决按钮不可用；Web 端走 window.focus() 与 Service Worker 桥。",
       hostEnvAuto: "自动识别（推荐）",
@@ -1849,11 +2081,11 @@
       hostEnvMismatchTail: "」，手动选择会覆盖它）",
       hostEnvDesktopForcedNote: "（当前页面不是 dsh-app://：点通知会尝试唤起 dsh:// 协议，浏览器可能弹「打开应用」确认框）",
       toast: "系统通知",
-      toastHint: "经浏览器弹出系统 Toast（Windows 通知中心）；需要已授予通知权限。",
+      toastHint: "经浏览器弹系统通知（Windows 通知中心），需要通知权限。",
       sound: "提示音",
-      soundHint: "提示音总开关；具体播什么由下面的「音效来源」决定。",
+      soundHint: "提示音总开关；播什么由「高级设置 → 音效来源」决定。",
       soundSource: "音效来源",
-      soundSourceHint: "两类提醒各自选择声音来源，互不影响。默认是插件自带的内置合成音。",
+      soundSourceHint: "两类提醒各自选声音来源，互不影响；默认是插件内置合成音。",
       soundDoneLabel: "「回复完成」的声音",
       soundAttentionLabel: "「需要你」的声音",
       soundSynth: "内置合成音（默认）",
@@ -1876,7 +2108,7 @@
       soundOffHint: "「提示音」开关是关的：先打开它才能试听（关掉时提醒本身也确实不出声）。",
       soundPreviewSystem: "「系统通知音」是随通知由系统播放的，插件这边没有可播的音；已发一条测试提醒，声音就是它。",
       external: "外部通知",
-      externalHint: "把提醒同时推送到 Discord Webhook / Bark / Gotify / 自定义 Webhook，人不在电脑前也能收到「回来一下」。与本地提醒同一套触发规则（上面的可见性开关一并生效）。",
+      externalHint: "把提醒同时推到 Discord / Bark / Gotify / 自定义 Webhook，人不在电脑前也能收到。与本地提醒同一套触发规则。",
       externalEnable: "转发外部通知",
       externalEnableHint: "总开关：关闭后不向任何外部端点发送。",
       externalAttentionLabel: "转发「需要你」",
@@ -1907,21 +2139,30 @@
       externalNoTargets: "先添加至少一个推送目标。",
       externalOffHint: "先打开「转发外部通知」。",
       attentionVisible: "页面打开时也提醒「需要你」",
-      attentionVisibleHint: "默认开启：模型在等你审批 / 确认方案 / 回答问题（含提问弹窗）时，即使页面在最前也会提醒。",
+      attentionVisibleHint: "页面在最前也提醒。关掉后只有切到后台才提醒。",
       currentQuiet: "当前对话不弹通知",
-      currentQuietHint: "默认开启：等待就发生在你正看着的这个对话里时，只留标签页标记，不弹系统通知、不响提示音，免得挡住审批卡片；页面切到后台后照常提醒。",
+      currentQuietHint: "等待就发生在你正看着的对话里时只留标签页标记，免得挡住审批卡片；切到后台后照常提醒。",
       doneVisible: "页面打开时也提醒「回复完成」",
-      doneVisibleHint: "默认关闭：「完成」只在页面隐藏或切到后台时才提醒，避免打扰。",
+      doneVisibleHint: "页面在最前也提醒。默认只在切到后台时提醒，避免打扰。",
       subagentQuiet: "子代理会话不提醒",
-      subagentQuietHint: "默认开启：后台子代理（subagent）会话的「需要你」与「回复完成」都不提醒——它们是另一个对话的步骤，完成由所属主对话自己的提醒覆盖；你当前打开的那个子代理会话照常提醒。关掉后恢复逐会话提醒。",
+      subagentQuietHint: "跳过后台子代理会话（结果由所属主对话的提醒覆盖）；你正打开的那个照常提醒。",
       autoFocus: "点击通知回到对应对话",
-      autoFocusHint: "默认开启：点系统通知会把 DSH 带到前台，并直接切到这条提醒所属的对话；关掉后点击通知不做任何事。",
+      autoFocusHint: "点通知会切到这条提醒所属的对话；关掉后点击不做任何事。",
       quickActions: "审批通知上直接裁决",
-      quickActionsHint: "默认开启：权限审批的通知上带「同意 / 拒绝」按钮，点一下即按审批卡片的「允许一次 / 拒绝」直接完成裁决，不用切回页面。需要支持 Service Worker 的浏览器（http://127.0.0.1 或 https）；用不了时自动退回普通通知。",
+      quickActionsHint: "审批通知上带「同意 / 拒绝」，点一下即完成裁决，不用切回页面。需要 Service Worker（http://127.0.0.1 或 https），用不了时退回普通通知。",
       quickApprovalNote: "「同意」等价于审批卡片上的「允许一次」，只放行这一次。",
       bridgeOff: "快捷裁决按钮暂不可用（",
       bridgeOffTail: "）：审批通知会退回不带按钮的普通样式。",
       bridgeOffDesktop: "桌面端暂不支持快捷裁决按钮：dsh-app:// 页面无法注册 Service Worker，审批通知只能是不带按钮的普通样式，测试按钮同样只发普通通知。这是宿主限制，不是设置坏了。",
+      overlay: "页面浮层提醒",
+      overlayHint: "在页面角落画提醒卡片：窗口在哪块屏，它就在哪块屏。系统通知只会出现在主屏，主屏不看时用它。不需要通知权限，桌面端也能直接「同意 / 拒绝」，可与系统通知同开。",
+      overlayCorner: "浮层位置",
+      overlayCornerHint: "贴在 DSH 窗口的哪个角；窗口在哪块屏，浮层就出现在哪块屏。",
+      overlayPosTR: "右上",
+      overlayPosBR: "右下",
+      overlayPosTL: "左上",
+      overlayPosBL: "左下",
+      overlayQuickNote: "浮层上的「同意」同样等价于审批卡片上的「允许一次」，与通知按钮一致。",
       testApprovalNoBridge: "已发普通测试通知（快捷裁决按钮需要 Service Worker，当前环境没有，按钮渲染不了）。",
       testNeedsQuick: "先打开上面的「审批通知上直接裁决」才能测按钮。",
       volume: "音量",
@@ -1932,7 +2173,7 @@
       langAutoNote: "（跟随界面）",
       current: "界面当前语言",
       testTitle: "快速测试",
-      testHint: "用当前设置各发一条测试提醒（不受上面「页面打开时也提醒」开关限制）。",
+      testHint: "用当前设置各发一条，不受「什么时候提醒」里的开关限制。",
       testAttention: "测试「需要你」",
       testDone: "测试「回复完成」",
       testApprovalBtn: "测试「审批按钮」",
@@ -1945,9 +2186,19 @@
     };
     var UI_en = {
       nav: "Notify me",
-      blurb: "When the agent stops and needs your input (approval / plan review / question) or a reply finishes in the background, get a system notification, a sound, and a tab-title marker.",
+      blurb: "Get told when the agent needs your input, or when a reply finishes in the background.",
+      secWays: "How you get told",
+      secWhen: "When to alert",
+      secTest: "Try it",
+      advanced: "Advanced",
+      advancedHint: "Alert sounds · External forwarding · Runtime",
+      secDiag: "Runtime & diagnostics",
+      expand: "Show",
+      collapse: "Hide",
+      permHintInline: "Not granted yet — allow it once from the page.",
+      resetHint: "Put every option above back to its default (picked sound files included).",
       enable: "Enable reminders",
-      enableHint: "Master switch: when off, no toasts, no sounds, and the tab title is never modified.",
+      enableHint: "When off: no toasts, no sounds, and the tab title is left alone.",
       hostEnv: "Environment",
       hostEnvHint: "Auto-detect by default: a dsh-app:// page is the Desktop (DSH Desktop) shell, anything else is the Web. Override it if detection comes out wrong: on the Desktop a toast click raises the window through the dsh:// deep link and quick-decision buttons are unavailable; on the Web it is window.focus() plus the Service Worker bridge.",
       hostEnvAuto: "Auto-detect (recommended)",
@@ -1957,11 +2208,11 @@
       hostEnvMismatchTail: "\"; the manual choice overrides it)",
       hostEnvDesktopForcedNote: " (this page is not dsh-app://: a toast click will try to launch the dsh:// protocol and the browser may show an \"open app?\" prompt)",
       toast: "System notifications",
-      toastHint: "Native toasts via the browser (Windows notification center); requires notification permission.",
+      toastHint: "Native toasts through the browser (Windows notification center); needs notification permission.",
       sound: "Sound",
-      soundHint: "Master cue switch; what it actually plays comes from \"Alert sound\" below.",
+      soundHint: "Master cue switch; what it plays comes from Advanced → Alert sound.",
       soundSource: "Alert sound",
-      soundSourceHint: "Each alert kind picks its own sound source; the two never affect each other. The default is the plugin's built-in cue.",
+      soundSourceHint: "Each alert kind picks its own source; the two never affect each other. Default is the built-in cue.",
       soundDoneLabel: "\"Reply finished\" sound",
       soundAttentionLabel: "\"Needs you\" sound",
       soundSynth: "Built-in cue (default)",
@@ -1984,7 +2235,7 @@
       soundOffHint: "The Sound switch is off: turn it on to preview (with it off the alerts themselves stay silent too).",
       soundPreviewSystem: "The system sound plays with a toast, not from the plugin — a test alert was sent instead; that sound is it.",
       external: "External notifications",
-      externalHint: "Mirror alerts to a Discord webhook / Bark / Gotify / custom webhook so \"come back\" reaches you away from the machine. Same trigger rules as the local alerts (the visibility toggles above apply too).",
+      externalHint: "Also push alerts to Discord / Bark / Gotify / custom webhooks, so you hear about it away from the machine. Same trigger rules as local alerts.",
       externalEnable: "Forward to external targets",
       externalEnableHint: "Master switch: when off, nothing is sent to any external endpoint.",
       externalAttentionLabel: "Forward \"needs you\"",
@@ -2015,21 +2266,30 @@
       externalNoTargets: "Add at least one push target first.",
       externalOffHint: "Turn on \"Forward to external targets\" first.",
       attentionVisible: "Also alert \"needs you\" while the page is open",
-      attentionVisibleHint: "On by default: alert even in the foreground when the model waits for approval / plan review / a question.",
+      attentionVisibleHint: "Alert even while the page is in front. Turn off to hear only from the background.",
       currentQuiet: "Stay quiet for the conversation on screen",
-      currentQuietHint: "On by default: a wait inside the conversation you are looking at keeps only the tab marker — no toast or sound landing on the approval card. Backgrounding the page puts the alert back.",
+      currentQuietHint: "A wait belonging to the conversation on screen keeps only the tab marker, so the approval card stays readable; backgrounding restores alerts.",
       doneVisible: "Also alert \"reply finished\" while the page is open",
-      doneVisibleHint: "Off by default: \"done\" only alerts while the page is hidden or backgrounded, to avoid noise.",
+      doneVisibleHint: "Alert even while the page is in front. By default only background finishes alert.",
       subagentQuiet: "Ignore subagent sessions",
-      subagentQuietHint: "On by default: background sessions spawned by a subagent raise neither \"needs you\" nor \"reply finished\" alerts — they are steps of another conversation, already covered by that conversation's own alert. The subagent session you have open alerts as usual. Turn off to alert for every session.",
+      subagentQuietHint: "Skip sessions spawned by a subagent (the parent conversation covers them); the one you have open still alerts.",
       autoFocus: "Click a toast to open that conversation",
-      autoFocusHint: "On by default: clicking a toast brings DSH forward and switches to the conversation the alert came from. When off, clicking a toast does nothing.",
+      autoFocusHint: "A click switches to the conversation the alert came from; off means a click does nothing.",
       quickActions: "Decide approvals from the toast",
-      quickActionsHint: "On by default: approval notifications carry Approve / Reject buttons, and one click settles the request exactly like the Allow once / Reject buttons on the approval card. Needs a Service Worker capable browser (http://127.0.0.1 or https); falls back to plain toasts where unavailable.",
+      quickActionsHint: "Approval notifications carry Approve / Reject; one click settles the request without switching back. Needs a Service Worker browser (http://127.0.0.1 or https), else plain toasts.",
       quickApprovalNote: "\"Approve\" equals \"Allow once\" on the approval card — it allows that one call only.",
       bridgeOff: "Quick-decision buttons are unavailable right now (",
       bridgeOffTail: "); approval toasts fall back to their plain form.",
       bridgeOffDesktop: "Quick-decision buttons are unavailable on Desktop: dsh-app:// pages cannot register a Service Worker, so approval toasts fall back to their plain, button-less form and the test button only sends a plain notification. This is a host limitation, not a broken setting.",
+      overlay: "In-page overlay",
+      overlayHint: "Draw a card in the page corner, on whatever display the window sits on. System notifications only land on the primary display. No permission needed, and the Desktop shell can Approve / Reject right on the card. Can run with toasts on.",
+      overlayCorner: "Overlay position",
+      overlayCornerHint: "Which corner of the DSH window the cards stack in; they follow the window to whatever display it is on.",
+      overlayPosTR: "Top right",
+      overlayPosBR: "Bottom right",
+      overlayPosTL: "Top left",
+      overlayPosBL: "Bottom left",
+      overlayQuickNote: "\"Approve\" here equals \"Allow once\" on the approval card — the same decision the toast buttons send.",
       testApprovalNoBridge: "Plain test notification sent (quick-decision buttons need a Service Worker, which this environment lacks, so they cannot render).",
       testNeedsQuick: "Turn on \"Decide approvals from the toast\" above to test the buttons.",
       volume: "Volume",
@@ -2040,7 +2300,7 @@
       langAutoNote: " (follows the interface)",
       current: "Current interface language",
       testTitle: "Quick test",
-      testHint: "Send one test alert with the current settings (not limited by the \"while the page is open\" toggles above).",
+      testHint: "Send one of each with the current settings; the \"When to alert\" switches are bypassed.",
       testAttention: "Test \"needs you\"",
       testDone: "Test \"reply finished\"",
       testApprovalBtn: "Test approval buttons",
@@ -2082,7 +2342,27 @@
       ".dnm-targetRow+.dnm-targetRow{border-top:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.35))}" +
       ".dnm-input{flex:1;min-width:180px;border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.4));background:var(--dsw-alias-bg-layer-1,rgba(255,255,255,.03));color:var(--dsw-alias-label-primary,rgba(20,20,20,.9));border-radius:8px;padding:5px 8px;font-size:12px;font-family:inherit}" +
       ".dnm-hint{font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary,rgba(120,120,120,.9))}" +
-      ".dnm-feedback{font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary,rgba(120,120,120,.9));min-height:18px}";
+      ".dnm-feedback{font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary,rgba(120,120,120,.9));min-height:18px}" +
+      // Page header: mark + title + one-line purpose. The section titles below
+      // carry the grouping, so the header stays small.
+      ".dnm-head{display:flex;align-items:flex-start;gap:12px}" +
+      ".dnm-headIcon{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--dsw-alias-state-business-primary,#3b82f6);background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.24)}" +
+      ".dnm-headText{min-width:0;display:flex;flex-direction:column;gap:3px;padding-top:1px}" +
+      ".dnm-headTitle{font-size:15px;font-weight:600;line-height:21px;color:var(--dsw-alias-label-primary,rgba(20,20,20,.9))}" +
+      ".dnm-headSub{margin:0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary,rgba(120,120,120,.9))}" +
+      ".dnm-secTitle{margin:2px 0 -6px;padding:0 2px;font-size:12px;font-weight:600;line-height:18px;color:var(--dsw-alias-label-secondary,rgba(90,90,90,.9));letter-spacing:.02em}" +
+      // Sub-rows hang under the row they belong to (corner of the overlay,
+      // volume under Sound) instead of reading as siblings.
+      ".dnm-rowSub{padding-left:26px;background:var(--dsw-alias-bg-layer-2,rgba(128,128,128,.04))}" +
+      ".dnm-rowSub .dnm-rowLabel{font-weight:500}" +
+      ".dnm-rowStack{flex-direction:column;align-items:stretch;gap:10px}" +
+      ".dnm-rowStack .dnm-btnRow{justify-content:flex-start;flex-wrap:wrap}" +
+      ".dnm-advToggle{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.35));background:transparent;color:var(--dsw-alias-label-primary,rgba(20,20,20,.9));border-radius:10px;padding:10px 14px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:left}" +
+      ".dnm-advToggle:hover{background:var(--dsw-alias-bg-layer-1,rgba(128,128,128,.08))}" +
+      ".dnm-advToggle:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#3b82f6);outline-offset:2px}" +
+      ".dnm-advRight{display:flex;align-items:center;gap:8px;flex:none;font-weight:400;color:var(--dsw-alias-label-tertiary,rgba(120,120,120,.9))}" +
+      ".dnm-advChev{font-size:10px;translate:0 1px;transition:transform .15s ease}" +
+      ".dnm-advChev.open{transform:rotate(180deg)}";
     (function injectStyle() {
       try {
         if (typeof document === "undefined" || typeof document.createElement !== "function") return;
@@ -2366,43 +2646,75 @@
       else if (cfg.hostEnv !== "auto" && isDesktopShell() !== detectedDesktop()) {
         envHint += t("hostEnvMismatch") + (detectedDesktop() ? t("hostEnvDesktop") : t("hostEnvWeb")) + t("hostEnvMismatchTail");
       }
+      // Page header: the plugin's own mark instead of the host's generic
+      // settings gear, so the page is recognisable at a glance while the
+      // Settings nav row itself stays host-controlled.
+      function headIcon() {
+        return h("svg", { viewBox: "0 0 24 24", width: 22, height: 22, fill: "none", stroke: "currentColor", "stroke-width": 1.6, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, [
+          h("path", { d: "M12 3.4a5.1 5.1 0 0 0-5.1 5.1v3.1c0 .9-.3 1.7-.9 2.4l-1.1 1.3c-.5.6-.1 1.5.7 1.5h12.8c.8 0 1.2-.9.7-1.5l-1.1-1.3a3.8 3.8 0 0 1-.9-2.4V8.5A5.1 5.1 0 0 0 12 3.4Z" }),
+          h("path", { d: "M9.8 19.2a2.4 2.4 0 0 0 4.4 0" }),
+          h("circle", { cx: 18.3, cy: 5.3, r: 2.35, fill: "currentColor", stroke: "none" })
+        ]);
+      }
+      function secTitle(labelText) {
+        return h("div", { className: "dnm-secTitle" }, labelText);
+      }
+      // The permission state belongs on the System-notifications row it affects
+      // rather than in a footer note the user has to connect to it.
+      function toastHintText() {
+        return t("toastHint") + (permOK ? "" : " " + t("permHintInline"));
+      }
+      var advState = React.useState(false);
+      var advancedOpen = advState[0];
+      var setAdvancedOpen = advState[1];
+      var testRow = h("div", { className: "dnm-row dnm-rowStack" }, [
+        h("div", { className: "dnm-rowText" }, [
+          h("div", { className: "dnm-rowLabel" }, t("testTitle")),
+          h("div", { className: "dnm-rowHint" }, t("testHint"))
+        ]),
+        h("div", { className: "dnm-btnRow" }, [
+          h("button", { type: "button", className: "dnm-btn", disabled: !cfg.enabled, onClick: function () { runTest("attention"); } }, t("testAttention")),
+          h("button", { type: "button", className: "dnm-btn", disabled: !cfg.enabled, onClick: function () { runTest("done"); } }, t("testDone")),
+          h("button", { type: "button", className: "dnm-btn", disabled: !cfg.enabled || !cfg.quickActions, onClick: function () { runTest("approval"); } }, t("testApprovalBtn"))
+        ])
+      ]);
       return h("div", { className: "dnm-wrap" }, [
-        h("p", { className: "dnm-blurb" }, t("blurb")),
+        h("div", { className: "dnm-head" }, [
+          h("span", { className: "dnm-headIcon" }, headIcon()),
+          h("div", { className: "dnm-headText" }, [
+            h("div", { className: "dnm-headTitle" }, t("nav")),
+            h("p", { className: "dnm-headSub" }, t("blurb"))
+          ])
+        ]),
+        // 1) How the alert reaches you. Each channel owns its own row, and the
+        // row's dependent control (overlay corner, volume) hangs beneath it.
+        secTitle(t("secWays")),
         card([
           rowSwitch("enabled", t("enable"), t("enableHint"), cfg.enabled, function (v) {
             patch({ enabled: v });
             if (!v && attentionActive > 0) { attentionActive = 0; applyTitle(); }
           }),
-          h("div", { className: "dnm-row" }, [
+          rowSwitch("toast", t("toast"), toastHintText(), cfg.toast, function (v) { patch({ toast: v }); }),
+          rowSwitch("overlay", t("overlay"), t("overlayHint"), cfg.overlay, function (v) { patch({ overlay: v }); }),
+          cfg.overlay ? h("div", { className: "dnm-row dnm-rowSub" }, [
             h("div", { className: "dnm-rowText" }, [
-              h("div", { className: "dnm-rowLabel" }, t("hostEnv")),
-              h("div", { className: "dnm-rowHint" }, envHint)
+              h("div", { className: "dnm-rowLabel" }, t("overlayCorner")),
+              h("div", { className: "dnm-rowHint" }, t("overlayCornerHint"))
             ]),
             h("select", {
               className: "dnm-select",
-              value: cfg.hostEnv,
-              "aria-label": t("hostEnv"),
-              onChange: function (e) { patch({ hostEnv: e.currentTarget.value }); }
+              value: overlayCorner(),
+              "aria-label": t("overlayCorner"),
+              onChange: function (e) { patch({ overlayCorner: e.currentTarget.value }); }
             }, [
-              h("option", { value: "auto" }, t("hostEnvAuto")),
-              h("option", { value: "desktop" }, t("hostEnvDesktop")),
-              h("option", { value: "web" }, t("hostEnvWeb"))
+              h("option", { value: "top-right" }, t("overlayPosTR")),
+              h("option", { value: "bottom-right" }, t("overlayPosBR")),
+              h("option", { value: "top-left" }, t("overlayPosTL")),
+              h("option", { value: "bottom-left" }, t("overlayPosBL"))
             ])
-          ])
-        ]),
-        card([
-          rowSwitch("toast", t("toast"), t("toastHint"), cfg.toast, function (v) { patch({ toast: v }); }),
+          ]) : null,
           rowSwitch("sound", t("sound"), t("soundHint"), cfg.sound, function (v) { patch({ sound: v }); }),
-          rowSwitch("attentionVisible", t("attentionVisible"), t("attentionVisibleHint"), !cfg.attentionHiddenOnly, function (v) { patch({ attentionHiddenOnly: !v }); }),
-          rowSwitch("currentQuiet", t("currentQuiet"), t("currentQuietHint"), cfg.currentHiddenOnly, function (v) { patch({ currentHiddenOnly: v }); }),
-          rowSwitch("doneVisible", t("doneVisible"), t("doneVisibleHint"), !cfg.doneHiddenOnly, function (v) { patch({ doneHiddenOnly: !v }); }),
-          rowSwitch("subagentQuiet", t("subagentQuiet"), t("subagentQuietHint"), cfg.ignoreSubagent, function (v) { patch({ ignoreSubagent: v }); }),
-          rowSwitch("autoFocus", t("autoFocus"), t("autoFocusHint"), cfg.autoFocus, function (v) { patch({ autoFocus: v }); }),
-          rowSwitch("quickActions", t("quickActions"), t("quickActionsHint"), cfg.quickActions, function (v) {
-            patch({ quickActions: v });
-            if (v) ensureActionBridge();
-          }),
-          h("div", { className: "dnm-row" }, [
+          cfg.sound ? h("div", { className: "dnm-row dnm-rowSub" }, [
             h("div", { className: "dnm-rowText" }, [
               h("div", { className: "dnm-rowLabel" }, t("volume")),
               h("div", { className: "dnm-rowHint" }, String(Math.round(cfg.volume * 100)) + "%")
@@ -2415,126 +2727,159 @@
               "aria-label": t("volume"),
               onChange: function (e) { patch({ volume: Number(e.currentTarget.value) / 100 }); }
             })
-          ])
+          ]) : null,
+          rowSwitch("quickActions", t("quickActions"), t("quickActionsHint"), cfg.quickActions, function (v) {
+            patch({ quickActions: v });
+            if (v) ensureActionBridge();
+          })
         ]),
-        // Alert sound source: the built-in cue, a picked file, or the platform's
-        // own notification sound. Kept next to the Sound/volume card so the
-        // sound-related knobs read together, and re-read through soundBump
-        // because picked files live outside the config object.
-        card([].concat(
-          [h("div", { className: "dnm-row" }, [
-            h("div", { className: "dnm-rowText" }, [
-              h("div", { className: "dnm-rowLabel" }, t("soundSource")),
-              h("div", { className: "dnm-rowHint" }, t("soundSourceHint"))
-            ])
-          ])],
-          soundRows("done", t("soundDoneLabel")),
-          soundRows("attention", t("soundAttentionLabel"))
-        )),
-        // External forwarding: the same alerts, mirrored to the user's own
-        // webhook endpoints so "come back" reaches them away from the machine.
-        card([].concat(
-          [h("div", { className: "dnm-row" }, [
-            h("div", { className: "dnm-rowText" }, [
-              h("div", { className: "dnm-rowLabel" }, t("external")),
-              h("div", { className: "dnm-rowHint" }, t("externalHint"))
-            ])
-          ]),
-          rowSwitch("externalEnabled", t("externalEnable"), t("externalEnableHint"), cfg.externalEnabled, function (v) { patch({ externalEnabled: v }); }),
-          rowSwitch("externalAttention", t("externalAttentionLabel"), t("externalAttentionHint"), cfg.externalAttention, function (v) { patch({ externalAttention: v }); }),
-          rowSwitch("externalDone", t("externalDoneLabel"), t("externalDoneHint"), cfg.externalDone, function (v) { patch({ externalDone: v }); }),
-          h("div", { className: "dnm-row" }, [
-            h("div", { className: "dnm-rowText" }, [
-              h("div", { className: "dnm-rowLabel" }, t("externalTargetsLabel")),
-              h("div", { className: "dnm-rowHint" }, t("externalTargetsHint"))
-            ])
-          ])],
-          externalRows(),
-          [(Array.isArray(cfg.externalTargets) && cfg.externalTargets.length) ? h("div", { className: "dnm-row" }, [
-            h("div", { className: "dnm-rowText" }, [h("div", { className: "dnm-hint" }, t("externalPrivacy"))])
-          ]) : h("div", { className: "dnm-row" }, [
-            h("div", { className: "dnm-rowText" }, [h("div", { className: "dnm-hint" }, t("externalEmpty"))])
-          ]),
-          h("div", { className: "dnm-row" }, [
-            h("div", { className: "dnm-btnRow" }, [
-              h("button", {
-                type: "button",
-                className: "dnm-btn",
-                "aria-label": t("externalAdd"),
-                onClick: addTarget
-              }, t("externalAdd"))
-            ])
-          ]),
-          h("div", { className: "dnm-row" }, [
-            h("div", { className: "dnm-rowText" }, [
-              h("div", { className: "dnm-rowLabel" }, t("externalTestLabel")),
-              h("div", { className: "dnm-rowHint" }, t("externalTestHint"))
-            ]),
-            h("div", { className: "dnm-btnRow" }, [
-              h("button", {
-                type: "button",
-                className: "dnm-btn",
-                "aria-label": t("externalTestLabel"),
-                disabled: !cfg.enabled,
-                onClick: runExternalTest
-              }, t("externalTestBtn"))
-            ])
-          ])
-        ])),
+        // 2) Which events are worth interrupting for.
+        secTitle(t("secWhen")),
         card([
-          h("div", { className: "dnm-row" }, [
-            h("div", { className: "dnm-rowText" }, [
-              h("div", { className: "dnm-rowLabel" }, t("language")),
-              h("div", { className: "dnm-rowHint" }, resolvedLangName + (cfg.language === "auto" ? t("langAutoNote") : ""))
-            ]),
-            h("select", {
-              className: "dnm-select",
-              value: cfg.language,
-              "aria-label": t("language"),
-              onChange: function (e) { patch({ language: e.currentTarget.value }); }
-            }, [
-              h("option", { value: "auto" }, t("langAuto")),
-              h("option", { value: "zh" }, t("langZh")),
-              h("option", { value: "en" }, t("langEn"))
-            ])
-          ]),
-          h("div", { className: "dnm-row" }, [
-            h("div", { className: "dnm-rowText" }, [
-              h("div", { className: "dnm-rowLabel" }, t("testTitle")),
-              h("div", { className: "dnm-rowHint" }, t("testHint"))
-            ]),
-            h("div", { className: "dnm-btnRow" }, [
-              h("button", { type: "button", className: "dnm-btn", disabled: !cfg.enabled, onClick: function () { runTest("attention"); } }, t("testAttention")),
-              h("button", { type: "button", className: "dnm-btn", disabled: !cfg.enabled, onClick: function () { runTest("done"); } }, t("testDone")),
-              h("button", { type: "button", className: "dnm-btn", disabled: !cfg.enabled || !cfg.quickActions, onClick: function () { runTest("approval"); } }, t("testApprovalBtn"))
-            ])
-          ]),
-          cfg.quickActions && cfg.toast && !bridgeActive() ? h("div", { className: "dnm-row" }, [
-            h("div", { className: "dnm-rowText" }, [h("div", { className: "dnm-rowHint" }, isDesktopShell() ? t("bridgeOffDesktop") : t("bridgeOff") + swState + t("bridgeOffTail"))])
+          rowSwitch("attentionVisible", t("attentionVisible"), t("attentionVisibleHint"), !cfg.attentionHiddenOnly, function (v) { patch({ attentionHiddenOnly: !v }); }),
+          rowSwitch("currentQuiet", t("currentQuiet"), t("currentQuietHint"), cfg.currentHiddenOnly, function (v) { patch({ currentHiddenOnly: v }); }),
+          rowSwitch("doneVisible", t("doneVisible"), t("doneVisibleHint"), !cfg.doneHiddenOnly, function (v) { patch({ doneHiddenOnly: !v }); }),
+          rowSwitch("subagentQuiet", t("subagentQuiet"), t("subagentQuietHint"), cfg.ignoreSubagent, function (v) { patch({ ignoreSubagent: v }); }),
+          rowSwitch("autoFocus", t("autoFocus"), t("autoFocusHint"), cfg.autoFocus, function (v) { patch({ autoFocus: v }); })
+        ]),
+        // 3) Prove the setup works without leaving the page.
+        secTitle(t("secTest")),
+        card([
+          testRow,
+          !cfg.quickActions ? h("div", { className: "dnm-row" }, [
+            h("div", { className: "dnm-rowText" }, [h("div", { className: "dnm-rowHint" }, t("testNeedsQuick"))])
           ]) : h("div", { className: "dnm-row" }, [
-            h("div", { className: "dnm-rowText" }, [h("div", { className: "dnm-rowHint" }, cfg.quickActions ? t("quickApprovalNote") : t("testNeedsQuick"))])
+            h("div", { className: "dnm-rowText" }, [h("div", { className: "dnm-rowHint" }, cfg.overlay ? t("overlayQuickNote") : (cfg.toast && !bridgeActive() ? (isDesktopShell() ? t("bridgeOffDesktop") : t("bridgeOff") + swState + t("bridgeOffTail")) : t("quickApprovalNote")))])
           ]),
-          h("div", { className: "dnm-row" }, [
+          feedback ? h("div", { className: "dnm-row" }, [
             h("div", { className: "dnm-rowText" }, [h("div", { className: "dnm-feedback" }, feedback)])
-          ]),
-          h("div", { className: "dnm-row" }, [
-            h("div", { className: "dnm-rowText" }, [
-              h("div", { className: "dnm-rowLabel" }, t("reset")),
-              h("div", { className: "dnm-rowHint" }, " ")
-            ]),
-            h("button", { type: "button", className: "dnm-btn", onClick: function () {
-              // api.resetConfig() also drops the picked cue files, which are
-              // stored outside the config.
-              setCfg(api.resetConfig());
-              applyTitle();
-              setSoundBump(soundBump + 1);
-              setFeedback(t("resetDone"));
-            } }, t("reset"))
-          ]),
-          !permOK ? h("div", { className: "dnm-row" }, [
-            h("div", { className: "dnm-rowText" }, [h("div", { className: "dnm-rowHint" }, t("permHint"))])
           ]) : null
         ]),
+        // 4) Everything most users never touch, collapsed by default. It all
+        // stays mounted-on-demand (no hidden DOM work while closed).
+        h("button", {
+          type: "button",
+          className: "dnm-advToggle",
+          "aria-expanded": advancedOpen ? "true" : "false",
+          "aria-label": t("advanced"),
+          onClick: function () { setAdvancedOpen(!advancedOpen); }
+        }, [
+          h("span", null, t("advanced")),
+          h("span", { className: "dnm-advRight" }, [
+            h("span", null, advancedOpen ? t("collapse") : t("advancedHint")),
+            h("span", { className: "dnm-advChev" + (advancedOpen ? " open" : "") }, "▼")
+          ])
+        ]),
+        advancedOpen ? [
+          secTitle(t("soundSource")),
+          // Alert sound source: built-in cue, a picked file, or the platform's
+          // own sound. Re-read through soundBump because picked files live
+          // outside the config object.
+          card([].concat(
+            [h("div", { className: "dnm-row" }, [
+              h("div", { className: "dnm-rowText" }, [h("div", { className: "dnm-hint" }, t("soundSourceHint"))])
+            ])],
+            soundRows("done", t("soundDoneLabel")),
+            soundRows("attention", t("soundAttentionLabel"))
+          )),
+          secTitle(t("external")),
+          // External forwarding: the same alerts mirrored to the user's own
+          // webhook endpoints so "come back" reaches them away from the machine.
+          card([].concat(
+            [h("div", { className: "dnm-row" }, [
+              h("div", { className: "dnm-rowText" }, [h("div", { className: "dnm-hint" }, t("externalHint"))])
+            ])],
+            [rowSwitch("externalEnabled", t("externalEnable"), t("externalEnableHint"), cfg.externalEnabled, function (v) { patch({ externalEnabled: v }); })],
+            [rowSwitch("externalAttention", t("externalAttentionLabel"), t("externalAttentionHint"), cfg.externalAttention, function (v) { patch({ externalAttention: v }); })],
+            [rowSwitch("externalDone", t("externalDoneLabel"), t("externalDoneHint"), cfg.externalDone, function (v) { patch({ externalDone: v }); })],
+            [h("div", { className: "dnm-row" }, [
+              h("div", { className: "dnm-rowText" }, [
+                h("div", { className: "dnm-rowLabel" }, t("externalTargetsLabel")),
+                h("div", { className: "dnm-rowHint" }, t("externalTargetsHint"))
+              ])
+            ])],
+            externalRows(),
+            [(Array.isArray(cfg.externalTargets) && cfg.externalTargets.length) ? h("div", { className: "dnm-row" }, [
+              h("div", { className: "dnm-rowText" }, [h("div", { className: "dnm-hint" }, t("externalPrivacy"))])
+            ]) : h("div", { className: "dnm-row" }, [
+              h("div", { className: "dnm-rowText" }, [h("div", { className: "dnm-hint" }, t("externalEmpty"))])
+            ])],
+            [h("div", { className: "dnm-row" }, [
+              h("div", { className: "dnm-btnRow" }, [
+                h("button", {
+                  type: "button",
+                  className: "dnm-btn",
+                  "aria-label": t("externalAdd"),
+                  onClick: addTarget
+                }, t("externalAdd"))
+              ])
+            ])],
+            [h("div", { className: "dnm-row" }, [
+              h("div", { className: "dnm-rowText" }, [
+                h("div", { className: "dnm-rowLabel" }, t("externalTestLabel")),
+                h("div", { className: "dnm-rowHint" }, t("externalTestHint"))
+              ]),
+              h("div", { className: "dnm-btnRow" }, [
+                h("button", {
+                  type: "button",
+                  className: "dnm-btn",
+                  "aria-label": t("externalTestLabel"),
+                  disabled: !cfg.enabled,
+                  onClick: runExternalTest
+                }, t("externalTestBtn"))
+              ])
+            ])]
+          )),
+          secTitle(t("secDiag")),
+          card([
+            h("div", { className: "dnm-row" }, [
+              h("div", { className: "dnm-rowText" }, [
+                h("div", { className: "dnm-rowLabel" }, t("hostEnv")),
+                h("div", { className: "dnm-rowHint" }, envHint)
+              ]),
+              h("select", {
+                className: "dnm-select",
+                value: cfg.hostEnv,
+                "aria-label": t("hostEnv"),
+                onChange: function (e) { patch({ hostEnv: e.currentTarget.value }); }
+              }, [
+                h("option", { value: "auto" }, t("hostEnvAuto")),
+                h("option", { value: "desktop" }, t("hostEnvDesktop")),
+                h("option", { value: "web" }, t("hostEnvWeb"))
+              ])
+            ]),
+            h("div", { className: "dnm-row" }, [
+              h("div", { className: "dnm-rowText" }, [
+                h("div", { className: "dnm-rowLabel" }, t("language")),
+                h("div", { className: "dnm-rowHint" }, resolvedLangName + (cfg.language === "auto" ? t("langAutoNote") : ""))
+              ]),
+              h("select", {
+                className: "dnm-select",
+                value: cfg.language,
+                "aria-label": t("language"),
+                onChange: function (e) { patch({ language: e.currentTarget.value }); }
+              }, [
+                h("option", { value: "auto" }, t("langAuto")),
+                h("option", { value: "zh" }, t("langZh")),
+                h("option", { value: "en" }, t("langEn"))
+              ])
+            ]),
+            h("div", { className: "dnm-row" }, [
+              h("div", { className: "dnm-rowText" }, [
+                h("div", { className: "dnm-rowLabel" }, t("reset")),
+                h("div", { className: "dnm-rowHint" }, t("resetHint"))
+              ]),
+              h("button", { type: "button", className: "dnm-btn", onClick: function () {
+                // api.resetConfig() also drops the picked cue files, which are
+                // stored outside the config.
+                setCfg(api.resetConfig());
+                applyTitle();
+                setSoundBump(soundBump + 1);
+                setFeedback(t("resetDone"));
+              } }, t("reset"))
+            ])
+          ])
+        ] : null,
         // Always-visible version line at the page foot: bug reports need it,
         // and "which build am I on" should not require the console.
         h("p", { className: "dnm-hint" }, t("versionLine") + api.version)
@@ -2633,6 +2978,7 @@
           for (var i = 0; i < unsubs.length; i++) { try { unsubs[i](); } catch (e) {} }
           detachFace();
           detachUiSession();
+          clearOverlays();
         };
       }, "dsh-notify-me: watchers");
     }