@co0ontty/wand 1.1.7 → 1.2.2

package/dist/web-ui/content/scripts.js

@@ -257,6 +257,24 @@
               }
               startPolling();
               refreshAll();
+              // Request browser notification permission after login
+              requestNotificationPermission();
+              // Show update bubble if server reports an available update
+              if (config.updateAvailable && config.latestVersion) {
+                showNotificationBubble({
+                  title: "\u53d1\u73b0\u65b0\u7248\u672c",
+                  body: "\u5f53\u524d " + (config.currentVersion || "-") + " \u2192 \u6700\u65b0 " + config.latestVersion,
+                  type: "info",
+                  icon: "\u2191",
+                  duration: 0,
+                  actionLabel: "\u53bb\u66f4\u65b0",
+                  action: function() {
+                    var settingsBtn = document.getElementById("open-settings-btn") || document.querySelector("[data-action='settings']");
+                    if (settingsBtn) settingsBtn.click();
+                  }
+                });
+                sendBrowserNotification("Wand \u53d1\u73b0\u65b0\u7248\u672c", "\u5f53\u524d " + (config.currentVersion || "-") + " \u2192 \u6700\u65b0 " + config.latestVersion, { tag: "wand-update" });
+              }
               // Auto-load claude history since section defaults to expanded
               if (state.claudeHistoryExpanded && !state.claudeHistoryLoaded) {
                 loadClaudeHistory();
@@ -331,22 +349,25 @@
         }
       }
 
+      function renderShortcutKeys() {
+        return '<button class="shortcut-key' + (state.modifiers.ctrl ? ' active' : '') + '" data-key="ctrl" type="button">Ctrl</button>' +
+          '<button class="shortcut-key' + (state.modifiers.alt ? ' active' : '') + '" data-key="alt" type="button">Alt</button>' +
+          '<span class="shortcut-sep">·</span>' +
+          '<button class="shortcut-key shortcut-dir" data-key="up" type="button">↑</button>' +
+          '<button class="shortcut-key shortcut-dir" data-key="down" type="button">↓</button>' +
+          '<button class="shortcut-key shortcut-dir" data-key="left" type="button">←</button>' +
+          '<button class="shortcut-key shortcut-dir" data-key="right" type="button">→</button>' +
+          '<span class="shortcut-sep">·</span>' +
+          '<button class="shortcut-key" data-key="enter" type="button">↵</button>' +
+          '<button class="shortcut-key" data-key="ctrl_enter" type="button">C-↵</button>' +
+          '<button class="shortcut-key" data-key="escape" type="button">Esc</button>';
+      }
+
       function renderInlineKeyboard() {
         if (!state.selectedId) return "";
         var isTerminal = state.currentView === "terminal";
         if (!isTerminal) return "";
-        var keys =
-            '<button class="shortcut-key' + (state.modifiers.ctrl ? ' active' : '') + '" data-key="ctrl" type="button">Ctrl</button>' +
-            '<button class="shortcut-key' + (state.modifiers.alt ? ' active' : '') + '" data-key="alt" type="button">Alt</button>' +
-            '<span class="shortcut-sep">·</span>' +
-            '<button class="shortcut-key shortcut-dir" data-key="up" type="button">↑</button>' +
-            '<button class="shortcut-key shortcut-dir" data-key="down" type="button">↓</button>' +
-            '<button class="shortcut-key shortcut-dir" data-key="left" type="button">←</button>' +
-            '<button class="shortcut-key shortcut-dir" data-key="right" type="button">→</button>' +
-            '<span class="shortcut-sep">·</span>' +
-            '<button class="shortcut-key" data-key="enter" type="button">↵</button>' +
-            '<button class="shortcut-key" data-key="ctrl_enter" type="button">C-↵</button>' +
-            '<button class="shortcut-key" data-key="escape" type="button">Esc</button>';
+        var keys = renderShortcutKeys();
         var arrow = state.shortcutsExpanded ? '›' : '‹';
         return '<div class="inline-shortcuts-wrap' + (state.shortcutsExpanded ? ' expanded' : '') + '">' +
             '<button class="shortcuts-toggle' + (state.shortcutsExpanded ? ' active' : '') + '" type="button" title="快捷键">' + arrow + '</button>' +
@@ -355,9 +376,11 @@
           '</div>';
       }
 
-      function renderMiniKeyboard() {
-        // Mini keyboard is now inline, rendered in input-composer-right
-        return "";
+      function renderExpandedShortcutsRow() {
+        if (!state.selectedId) return "";
+        var isTerminal = state.currentView === "terminal";
+        if (!isTerminal) return "";
+        return '<div class="inline-shortcuts-expanded-row' + (state.shortcutsExpanded ? ' visible' : '') + '">' + renderShortcutKeys() + '</div>';
       }
 
       function renderLogin() {
@@ -555,6 +578,7 @@
                       '</button>' +
                     '</div>' +
                   '</div>' +
+                  renderExpandedShortcutsRow() +
                   // Session info bar at bottom
                   '<div class="input-session-info-bar">' +
                     '<span id="session-cwd-display" class="session-cwd-display">' + (selectedSession && selectedSession.cwd ? escapeHtml(selectedSession.cwd) : '未设置目录') + '</span>' +
@@ -631,6 +655,18 @@
                   '</div>' +
                   '<p id="update-message" class="hint hidden"></p>' +
                 '</div>' +
+                '<div class="settings-notification-section">' +
+                  '<div class="settings-section-title">\u901a\u77e5\u72b6\u6001</div>' +
+                  '<div class="settings-about-row">' +
+                    '<span class="settings-label">\u6d4f\u89c8\u5668\u901a\u77e5</span>' +
+                    '<span class="settings-value" id="notification-permission-status">-</span>' +
+                  '</div>' +
+                  '<div class="settings-update-actions">' +
+                    '<button id="notification-request-btn" class="btn btn-ghost btn-sm hidden">\u6388\u6743\u901a\u77e5</button>' +
+                    '<button id="notification-test-btn" class="btn btn-ghost btn-sm">\u53d1\u9001\u6d4b\u8bd5\u901a\u77e5</button>' +
+                  '</div>' +
+                  '<p id="notification-test-message" class="hint hidden"></p>' +
+                '</div>' +
               '</div>' +
 
               // General config tab
@@ -1886,6 +1922,16 @@
         if (checkUpdateBtn) checkUpdateBtn.addEventListener("click", checkForUpdate);
         var doUpdateBtn = document.getElementById("do-update-button");
         if (doUpdateBtn) doUpdateBtn.addEventListener("click", performUpdate);
+        // Notification test section
+        var notifRequestBtn = document.getElementById("notification-request-btn");
+        if (notifRequestBtn) notifRequestBtn.addEventListener("click", function() {
+          if (typeof Notification !== "undefined") {
+            Notification.requestPermission().then(function() { updateNotificationStatus(); });
+          }
+        });
+        var notifTestBtn = document.getElementById("notification-test-btn");
+        if (notifTestBtn) notifTestBtn.addEventListener("click", testNotification);
+        updateNotificationStatus();
         var newSessBtn = document.getElementById("topbar-new-session-button");
         if (newSessBtn) newSessBtn.addEventListener("click", openSessionModal);
         var drawerNewSessBtn = document.getElementById("drawer-new-session-button");
@@ -1945,6 +1991,8 @@
         // Inline shortcuts click handler
         var inlineShortcutsWrap = document.querySelector(".inline-shortcuts-wrap");
         if (inlineShortcutsWrap) inlineShortcutsWrap.addEventListener("click", handleInlineKeyboardClick);
+        var expandedShortcutsRow = document.querySelector(".inline-shortcuts-expanded-row");
+        if (expandedShortcutsRow) expandedShortcutsRow.addEventListener("click", handleInlineKeyboardClick);
         // Shortcuts toggle (mobile fold/unfold)
         var shortcutsToggleBtn = document.querySelector(".shortcuts-toggle");
         if (shortcutsToggleBtn) shortcutsToggleBtn.addEventListener("click", function(e) {
@@ -1952,7 +2000,9 @@
           state.shortcutsExpanded = !state.shortcutsExpanded;
           var wrap = document.querySelector(".inline-shortcuts-wrap");
           var toggle = document.querySelector(".shortcuts-toggle");
+          var row = document.querySelector(".inline-shortcuts-expanded-row");
           if (wrap) wrap.classList.toggle("expanded", state.shortcutsExpanded);
+          if (row) row.classList.toggle("visible", state.shortcutsExpanded);
           if (toggle) {
             toggle.classList.toggle("active", state.shortcutsExpanded);
             toggle.textContent = state.shortcutsExpanded ? "\u203a" : "\u2039";
@@ -1962,9 +2012,12 @@
         document.addEventListener("click", function(e) {
           if (!state.shortcutsExpanded) return;
           var wrap = document.querySelector(".inline-shortcuts-wrap");
-          if (wrap && !wrap.contains(e.target)) {
+          var expandedRow = document.querySelector(".inline-shortcuts-expanded-row");
+          var clickedInsideRow = expandedRow && expandedRow.contains(e.target);
+          if (wrap && !wrap.contains(e.target) && !clickedInsideRow) {
             state.shortcutsExpanded = false;
             wrap.classList.remove("expanded");
+            if (expandedRow) expandedRow.classList.remove("visible");
             var toggle = document.querySelector(".shortcuts-toggle");
             if (toggle) {
               toggle.classList.remove("active");
@@ -3270,6 +3323,58 @@
         }
       }
 
+      function subscribeToSession(sessionId) {
+        if (!sessionId || !state.ws || state.ws.readyState !== WebSocket.OPEN) return;
+        state.ws.send(JSON.stringify({ type: "subscribe", sessionId: sessionId }));
+      }
+
+      function mergeServerSession(localSession, serverSession) {
+        if (!localSession) return serverSession;
+
+        var merged = Object.assign({}, localSession, serverSession);
+        var localOutput = localSession.output || "";
+        var serverOutput = serverSession.output || "";
+        var keepLocalOutput = localOutput.length > serverOutput.length;
+
+        if (keepLocalOutput) {
+          merged.output = localOutput;
+        }
+
+        if (localSession.id === state.selectedId) {
+          if (localSession.permissionBlocked && serverSession.permissionBlocked === false) {
+            // server explicitly resolved it; keep resolved state
+          } else if (localSession.permissionBlocked && !serverSession.permissionBlocked) {
+            merged.permissionBlocked = true;
+          }
+
+          if (localSession.pendingEscalation && !serverSession.pendingEscalation && serverSession.permissionBlocked !== false) {
+            merged.pendingEscalation = localSession.pendingEscalation;
+          }
+
+          if (localSession.messages && localSession.messages.length > 0 && (!serverSession.messages || serverSession.messages.length === 0)) {
+            merged.messages = localSession.messages;
+          }
+        }
+
+        return merged;
+      }
+
+      function getPreferredMessages(session, fallbackOutput, allowFallback) {
+        if (session && session.messages && session.messages.length > 0) {
+          return session.messages;
+        }
+        if (!allowFallback) {
+          return [];
+        }
+        var output = typeof fallbackOutput === "string"
+          ? fallbackOutput
+          : (session && session.output) || "";
+        if (!output) {
+          return [];
+        }
+        return parseMessages(output, session && session.command);
+      }
+
       function getPreferredSessionId(sessions) {
         if (!sessions || !sessions.length) return null;
         // Keep currently selected session as long as it still exists
@@ -3304,10 +3409,7 @@
 
             state.sessions = serverSessions.map(function(serverSession) {
               var localSession = state.sessions.find(function(s) { return s.id === serverSession.id; });
-              if (localSession && localSession.output && localSession.output.length > (serverSession.output || '').length) {
-                return localSession;
-              }
-              return serverSession;
+              return mergeServerSession(localSession, serverSession);
             });
 
             state.selectedId = getPreferredSessionId(state.sessions);
@@ -3431,7 +3533,7 @@
             updateShellChrome();
 
             var selectedSession = state.sessions.find(function(s) { return s.id === id; });
-            state.currentMessages = data.messages || [];
+            state.currentMessages = getPreferredMessages(selectedSession, data.output, false);
 
             if (state.terminal) {
               syncTerminalBuffer(id, data.output || "", { mode: "replace" });
@@ -3466,6 +3568,7 @@
           refreshFileExplorer();
         }
         loadOutput(id).then(function() { focusInputBox(true); });
+        subscribeToSession(id);
       }
 
       function updateDrawerState() {
@@ -3913,6 +4016,101 @@
         });
       }
 
+      // ── Notification Settings Helpers ──
+
+      function updateNotificationStatus() {
+        var statusEl = document.getElementById("notification-permission-status");
+        var requestBtn = document.getElementById("notification-request-btn");
+        var testMsgEl = document.getElementById("notification-test-message");
+        if (!statusEl) return;
+
+        if (typeof Notification === "undefined") {
+          statusEl.textContent = "\u4e0d\u652f\u6301";
+          statusEl.style.color = "var(--fg-muted)";
+          if (requestBtn) requestBtn.classList.add("hidden");
+          return;
+        }
+
+        var perm = Notification.permission;
+        if (perm === "granted") {
+          statusEl.textContent = "\u5df2\u6388\u6743 \u2713";
+          statusEl.style.color = "var(--success)";
+          if (requestBtn) requestBtn.classList.add("hidden");
+        } else if (perm === "denied") {
+          statusEl.textContent = "\u5df2\u62d2\u7edd";
+          statusEl.style.color = "var(--danger)";
+          if (requestBtn) requestBtn.classList.add("hidden");
+          if (testMsgEl) {
+            testMsgEl.textContent = "\u6d4f\u89c8\u5668\u5df2\u62d2\u7edd\u901a\u77e5\u6743\u9650\uff0c\u8bf7\u5728\u6d4f\u89c8\u5668\u8bbe\u7f6e\u4e2d\u624b\u52a8\u5f00\u542f";
+            testMsgEl.style.color = "var(--fg-muted)";
+            testMsgEl.classList.remove("hidden");
+          }
+        } else {
+          statusEl.textContent = "\u672a\u6388\u6743";
+          statusEl.style.color = "var(--warning)";
+          if (requestBtn) requestBtn.classList.remove("hidden");
+        }
+      }
+
+      function testNotification() {
+        var testMsgEl = document.getElementById("notification-test-message");
+
+        // Always show in-app bubble
+        showNotificationBubble({
+          title: "\u6d4b\u8bd5\u901a\u77e5",
+          body: "\u8fd9\u662f\u4e00\u6761\u6d4b\u8bd5\u901a\u77e5\uff0c\u5e94\u7528\u5185\u6c14\u6ce1\u5df2\u6b63\u5e38\u5de5\u4f5c\u3002",
+          type: "info",
+          icon: "\u266a",
+          duration: 5000,
+        });
+
+        // Test browser notification
+        if (typeof Notification === "undefined") {
+          if (testMsgEl) {
+            testMsgEl.textContent = "\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u901a\u77e5 API\uff0c\u4ec5\u53ef\u4f7f\u7528\u5e94\u7528\u5185\u6c14\u6ce1\u901a\u77e5\u3002";
+            testMsgEl.style.color = "var(--fg-muted)";
+            testMsgEl.classList.remove("hidden");
+          }
+          return;
+        }
+
+        if (Notification.permission === "granted") {
+          try {
+            var n = new Notification("Wand \u6d4b\u8bd5\u901a\u77e5", {
+              body: "\u6d4f\u89c8\u5668\u901a\u77e5\u5df2\u6b63\u5e38\u5de5\u4f5c\u3002",
+              icon: "/favicon.ico",
+              tag: "wand-test",
+            });
+            setTimeout(function() { n.close(); }, 5000);
+            if (testMsgEl) {
+              testMsgEl.textContent = "\u2713 \u6d4f\u89c8\u5668\u901a\u77e5 + \u5e94\u7528\u5185\u6c14\u6ce1\u5747\u5df2\u53d1\u9001";
+              testMsgEl.style.color = "var(--success)";
+              testMsgEl.classList.remove("hidden");
+            }
+          } catch (_e) {
+            if (testMsgEl) {
+              testMsgEl.textContent = "\u6d4f\u89c8\u5668\u901a\u77e5\u53d1\u9001\u5931\u8d25\uff0c\u53ef\u80fd\u9700\u8981 HTTPS";
+              testMsgEl.style.color = "var(--warning)";
+              testMsgEl.classList.remove("hidden");
+            }
+          }
+        } else {
+          // permission is "default" or "denied" — always try requesting
+          Notification.requestPermission().then(function(result) {
+            updateNotificationStatus();
+            if (result === "granted") {
+              testNotification();
+            } else if (result === "denied") {
+              if (testMsgEl) {
+                testMsgEl.textContent = "\u6d4f\u89c8\u5668\u5df2\u62d2\u7edd\u901a\u77e5\u6743\u9650\uff0c\u8bf7\u70b9\u51fb\u5730\u5740\u680f\u5de6\u4fa7\u9501\u56fe\u6807\u6216\u5728\u6d4f\u89c8\u5668\u8bbe\u7f6e\u4e2d\u624b\u52a8\u5f00\u542f";
+                testMsgEl.style.color = "var(--fg-muted)";
+                testMsgEl.classList.remove("hidden");
+              }
+            }
+          });
+        }
+      }
+
       function quickStartSession() {
         var command = getPreferredTool();
         var defaultCwd = getEffectiveCwd();
@@ -4418,9 +4616,7 @@
           switchToSessionView(data.id);
           updateSessionSnapshot(data);
           updateSessionsList();
-          if (state.ws && state.ws.readyState === WebSocket.OPEN) {
-            state.ws.send(JSON.stringify({ type: "subscribe", sessionId: data.id }));
-          }
+          subscribeToSession(data.id);
           loadOutput(data.id).then(function() {
             focusInputBox(true);
           });
@@ -4481,9 +4677,7 @@
           updateSessionSnapshot(data);
           updateSessionsList();
           // Subscribe to new session via WebSocket
-          if (state.ws && state.ws.readyState === WebSocket.OPEN) {
-            state.ws.send(JSON.stringify({ type: 'subscribe', sessionId: data.id }));
-          }
+          subscribeToSession(data.id);
           return loadOutput(data.id);
         })
         .catch(function(error) {
@@ -4656,9 +4850,7 @@
           updateSessionSnapshot(data);
           updateSessionsList();
           switchToSessionView(data.id);
-          if (state.ws && state.ws.readyState === WebSocket.OPEN) {
-            state.ws.send(JSON.stringify({ type: "subscribe", sessionId: data.id }));
-          }
+          subscribeToSession(data.id);
           return loadOutput(data.id).then(function() {
             focusInputBox(true);
             return data;
@@ -5371,9 +5563,7 @@
         switchToSessionView(data.id);
         updateSessionSnapshot(data);
         updateSessionsList();
-        if (state.ws && state.ws.readyState === WebSocket.OPEN) {
-          state.ws.send(JSON.stringify({ type: "subscribe", sessionId: data.id }));
-        }
+        subscribeToSession(data.id);
         return loadOutput(data.id).then(function() {
           focusInputBox(true);
         });
@@ -6587,9 +6777,7 @@
             state.ws = ws;
             state.wsConnected = true;
             // Subscribe to current session if any
-            if (state.selectedId) {
-              ws.send(JSON.stringify({ type: 'subscribe', sessionId: state.selectedId }));
-            }
+            subscribeToSession(state.selectedId);
             // Flush pending messages after reconnection
             flushPendingMessages();
           };
@@ -6639,9 +6827,7 @@
               }
               updateSessionSnapshot(snapshot);
               if (msg.sessionId === state.selectedId) {
-                if (msg.data.messages) {
-                  state.currentMessages = msg.data.messages;
-                }
+                state.currentMessages = getPreferredMessages(snapshot, msg.data.output, false);
                 updateTaskDisplay();
                 scheduleChatRender();
               }
@@ -6681,6 +6867,33 @@
             }
             updateSessionSnapshot(endedSnapshot);
 
+            // Notify user when a session completes (browser + in-app if backgrounded or not viewing)
+            var endedSession = state.sessions.find(function(s) { return s.id === msg.sessionId; });
+            var endedName = endedSession ? (endedSession.label || endedSession.command || msg.sessionId) : msg.sessionId;
+            var endedExitCode = msg.data && msg.data.exitCode;
+            var endedIsError = endedExitCode !== null && endedExitCode !== undefined && endedExitCode !== 0;
+            sendBrowserNotification(
+              endedIsError ? "\u4f1a\u8bdd\u5f02\u5e38\u7ed3\u675f" : "\u4f1a\u8bdd\u5df2\u5b8c\u6210",
+              endedName,
+              {
+                tag: "wand-ended-" + msg.sessionId,
+                onClick: function() {
+                  if (msg.sessionId !== state.selectedId) selectSession(msg.sessionId);
+                }
+              }
+            );
+            if (msg.sessionId !== state.selectedId || document.hidden) {
+              showNotificationBubble({
+                title: endedIsError ? "\u4f1a\u8bdd\u5f02\u5e38\u7ed3\u675f" : "\u4f1a\u8bdd\u5df2\u5b8c\u6210",
+                body: endedName,
+                type: endedIsError ? "warning" : "success",
+                icon: endedIsError ? "!" : "\u2713",
+                duration: 6000,
+                actionLabel: "\u67e5\u770b",
+                action: function() { selectSession(msg.sessionId); }
+              });
+            }
+
             // Clear stale queued inputs so they cannot race with the ended session.
             // Each queued item's postInput will hit the server and get an error, but
             // clearing the queues here prevents them from growing unbounded.
@@ -6738,6 +6951,35 @@
                   target: msg.data.permissionRequest.target,
                   reason: msg.data.permissionRequest.prompt
                 };
+                // Browser notification for permission waiting (background tab)
+                var permSession = state.sessions.find(function(s) { return s.id === msg.sessionId; });
+                var permSessionName = permSession ? (permSession.label || permSession.command || msg.sessionId) : msg.sessionId;
+                sendBrowserNotification(
+                  "\u4f1a\u8bdd\u7b49\u5f85\u6388\u6743",
+                  permSessionName + " \u2014 " + (msg.data.permissionRequest.prompt || "\u9700\u8981\u6743\u9650\u5ba1\u6279"),
+                  {
+                    tag: "wand-perm-" + msg.sessionId,
+                    onClick: function() {
+                      if (msg.sessionId !== state.selectedId) {
+                        selectSession(msg.sessionId);
+                      }
+                    }
+                  }
+                );
+                // In-app bubble if not currently viewing this session
+                if (msg.sessionId !== state.selectedId) {
+                  showNotificationBubble({
+                    title: "\u4f1a\u8bdd\u7b49\u5f85\u6388\u6743",
+                    body: permSessionName + " \u2014 " + (msg.data.permissionRequest.prompt || "\u9700\u8981\u6743\u9650\u5ba1\u6279"),
+                    type: "warning",
+                    icon: "!",
+                    duration: 0,
+                    actionLabel: "\u67e5\u770b",
+                    action: function() {
+                      selectSession(msg.sessionId);
+                    }
+                  });
+                }
               }
               if (msg.data.permissionBlocked === false) {
                 statusUpdate.pendingEscalation = null;
@@ -6748,6 +6990,29 @@
               }
             }
             break;
+          case 'notification':
+            if (msg.data) {
+              if (msg.data.kind === "update") {
+                showNotificationBubble({
+                  title: "\u53d1\u73b0\u65b0\u7248\u672c",
+                  body: "\u5f53\u524d " + (msg.data.current || "-") + " \u2192 \u6700\u65b0 " + (msg.data.latest || "-"),
+                  type: "info",
+                  icon: "\u2191",
+                  duration: 0,
+                  actionLabel: "\u53bb\u66f4\u65b0",
+                  action: function() {
+                    var settingsBtn = document.getElementById("open-settings-btn") || document.querySelector("[data-action='settings']");
+                    if (settingsBtn) settingsBtn.click();
+                  }
+                });
+                sendBrowserNotification(
+                  "Wand \u53d1\u73b0\u65b0\u7248\u672c",
+                  "\u5f53\u524d " + (msg.data.current || "-") + " \u2192 \u6700\u65b0 " + (msg.data.latest || "-"),
+                  { tag: "wand-update" }
+                );
+              }
+            }
+            break;
         }
       }
 
@@ -6905,12 +7170,7 @@
           // Re-parse messages from the latest session output (fallback for edge cases)
           var selectedSession = state.sessions.find(function(s) { return s.id === state.selectedId; });
           if (selectedSession) {
-            // Prefer structured messages from JSON chat mode
-            if (selectedSession.messages && selectedSession.messages.length > 0) {
-              state.currentMessages = selectedSession.messages;
-            } else if (selectedSession.output) {
-              state.currentMessages = parseMessages(selectedSession.output, selectedSession.command);
-            }
+            state.currentMessages = getPreferredMessages(selectedSession, selectedSession.output, true);
           }
           renderChat();
         }, 30);
@@ -8558,6 +8818,136 @@
         }, type === "error" ? 4000 : 2200);
       }
 
+      // ── Notification Bubble System ──
+
+      var notificationStack = [];
+      var notificationIdCounter = 0;
+      var NOTIFICATION_GAP = 8;
+      var NOTIFICATION_TOP = 24;
+
+      /**
+       * Show an in-app notification bubble at bottom-right.
+       * @param {object} opts
+       * @param {string} opts.title - Notification title
+       * @param {string} [opts.body] - Body text
+       * @param {string} [opts.type] - "info" | "warning" | "success" (default "info")
+       * @param {string} [opts.icon] - Icon character (default derived from type)
+       * @param {number} [opts.duration] - Auto-dismiss ms, 0 = manual only (default 8000)
+       * @param {string} [opts.actionLabel] - Action button label
+       * @param {function} [opts.action] - Action button callback
+       * @returns {{ dismiss: function }} handle
+       */
+      function showNotificationBubble(opts) {
+        var id = ++notificationIdCounter;
+        var type = opts.type || "info";
+        var icon = opts.icon || (type === "warning" ? "!" : type === "success" ? "\u2713" : "i");
+        var duration = opts.duration !== undefined ? opts.duration : 8000;
+
+        var bubble = document.createElement("div");
+        bubble.className = "notification-bubble";
+        bubble.setAttribute("data-nid", id);
+
+        var headerHtml =
+          '<div class="notification-bubble-header">' +
+            '<span class="notification-bubble-icon ' + type + '">' + icon + '</span>' +
+            '<span class="notification-bubble-title">' + escapeHtml(opts.title) + '</span>' +
+            '<button class="notification-bubble-close" title="\u5173\u95ed">\u00d7</button>' +
+          '</div>';
+
+        var bodyHtml = opts.body
+          ? '<div class="notification-bubble-body">' + escapeHtml(opts.body) + '</div>'
+          : '';
+
+        var actionsHtml = opts.actionLabel
+          ? '<div class="notification-bubble-actions">' +
+              '<button class="primary">' + escapeHtml(opts.actionLabel) + '</button>' +
+            '</div>'
+          : '';
+
+        bubble.innerHTML = headerHtml + bodyHtml + actionsHtml;
+        document.body.appendChild(bubble);
+
+        // Stack position
+        var entry = { id: id, el: bubble };
+        notificationStack.push(entry);
+        repositionNotifications();
+
+        // Wire close button
+        var closeBtn = bubble.querySelector(".notification-bubble-close");
+        if (closeBtn) closeBtn.onclick = function() { dismissNotification(id); };
+
+        // Wire action button
+        if (opts.actionLabel && opts.action) {
+          var actionBtn = bubble.querySelector(".notification-bubble-actions button");
+          if (actionBtn) actionBtn.onclick = function() {
+            opts.action();
+            dismissNotification(id);
+          };
+        }
+
+        // Auto-dismiss
+        var timer = null;
+        if (duration > 0) {
+          timer = setTimeout(function() { dismissNotification(id); }, duration);
+        }
+
+        return {
+          dismiss: function() { dismissNotification(id); }
+        };
+      }
+
+      function dismissNotification(id) {
+        var idx = -1;
+        for (var i = 0; i < notificationStack.length; i++) {
+          if (notificationStack[i].id === id) { idx = i; break; }
+        }
+        if (idx === -1) return;
+        var entry = notificationStack[idx];
+        entry.el.classList.add("slide-out");
+        notificationStack.splice(idx, 1);
+        repositionNotifications();
+        setTimeout(function() {
+          if (entry.el.parentNode) entry.el.parentNode.removeChild(entry.el);
+        }, 300);
+      }
+
+      function repositionNotifications() {
+        var top = NOTIFICATION_TOP;
+        for (var i = 0; i < notificationStack.length; i++) {
+          notificationStack[i].el.style.top = top + "px";
+          top += notificationStack[i].el.offsetHeight + NOTIFICATION_GAP;
+        }
+      }
+
+      // ── Browser Notification API ──
+
+      function requestNotificationPermission() {
+        if (typeof Notification !== "undefined" && Notification.permission === "default") {
+          Notification.requestPermission();
+        }
+      }
+
+      function sendBrowserNotification(title, body, opts) {
+        if (typeof Notification === "undefined" || Notification.permission !== "granted") return;
+        if (!document.hidden) return; // Only notify when tab is in background
+        try {
+          var n = new Notification(title, {
+            body: body || "",
+            icon: (opts && opts.icon) || "/favicon.ico",
+            tag: (opts && opts.tag) || undefined,
+          });
+          n.onclick = function() {
+            window.focus();
+            n.close();
+            if (opts && opts.onClick) opts.onClick();
+          };
+          // Auto-close after 10s
+          setTimeout(function() { n.close(); }, 10000);
+        } catch (_e) {
+          // Notification constructor may fail in some contexts (e.g. insecure origin)
+        }
+      }
+
       function escapeHtml(value) {
         return String(value)
           .replace(/&/g, "&amp;")