@luckydraw/cumulus 0.28.4 → 0.28.6

package/dist/gateway/static/widget.js

@@ -234,10 +234,13 @@
     '  display: inline-flex; align-items: center; gap: 0.3em;',
     '  background: #2a3a4a; color: #d4e8f8; border: 1px solid #3a5060;',
     '  border-radius: 1em; padding: 0.15em 0.6em; font-size: 0.82em;',
-    '  cursor: default; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;',
+    '  cursor: default; max-width: 32ch;',
+    '}',
+    '.cumulus-interaction-chip .chip-label {',
+    '  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;',
     '}',
     '.cumulus-interaction-chip .chip-dismiss {',
-    '  cursor: pointer; opacity: 0.6; font-size: 0.9em; margin-left: 0.2em;',
+    '  cursor: pointer; opacity: 0.6; font-size: 0.9em; margin-left: 0.2em; flex-shrink: 0;',
     '}',
     '.cumulus-interaction-chip .chip-dismiss:hover { opacity: 1; }',
 
@@ -246,10 +249,13 @@
     '  display: inline-flex; align-items: center; gap: 0.3em;',
     '  background: #2a3a2a; color: #b8e6b8; border: 1px solid #3a6040;',
     '  border-radius: 1em; padding: 0.15em 0.6em; font-size: 0.82em;',
-    '  cursor: default; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;',
+    '  cursor: default; max-width: 40ch;',
+    '}',
+    '.cumulus-annotation-chip .chip-label {',
+    '  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;',
     '}',
     '.cumulus-annotation-chip .chip-dismiss {',
-    '  cursor: pointer; opacity: 0.6; font-size: 0.9em; margin-left: 0.2em;',
+    '  cursor: pointer; opacity: 0.6; font-size: 0.9em; margin-left: 0.2em; flex-shrink: 0;',
     '}',
     '.cumulus-annotation-chip .chip-dismiss:hover { opacity: 1; }',
 
@@ -363,6 +369,46 @@
     '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;',
     '}',
     '.code-block-copy-btn:hover { border-color: #0066cc; color: #ddd; }',
+    '.code-block-edit-btn {',
+    '  background: transparent;',
+    '  border: 1px solid #555;',
+    '  border-radius: 0.3em;',
+    '  color: #aaa;',
+    '  font-size: 0.8em;',
+    '  padding: 0.15em 0.55em;',
+    '  cursor: pointer;',
+    '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;',
+    '}',
+    '.code-block-edit-btn:hover { border-color: #0066cc; color: #ddd; }',
+    '.texitool-embed-container {',
+    '  border: 1px solid #3a3a3a;',
+    '  border-radius: 0.4em;',
+    '  overflow: hidden;',
+    '  margin: 0.6em 0;',
+    '  background: #1e1e1e;',
+    '}',
+    '.texitool-embed-container iframe {',
+    '  width: 100%; border: none;',
+    '  min-height: 400px;',
+    '  display: block;',
+    '}',
+    '.texitool-embed-actions {',
+    '  padding: 0.4em 0.85em;',
+    '  background: #3d3d3d;',
+    '  border-top: 1px solid #4a4a4a;',
+    '  display: flex; gap: 8px;',
+    '}',
+    '.texitool-embed-actions button {',
+    '  background: transparent;',
+    '  border: 1px solid #555;',
+    '  border-radius: 0.3em;',
+    '  color: #aaa;',
+    '  font-size: 0.8em;',
+    '  padding: 0.25em 0.65em;',
+    '  cursor: pointer;',
+    '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;',
+    '}',
+    '.texitool-embed-actions button:hover { border-color: #0066cc; color: #ddd; }',
     '.code-block-wrapper pre {',
     '  padding: 1em 1.15em; margin: 0;',
     '  overflow-x: auto;',
@@ -1228,7 +1274,23 @@
 
   // Per-thread store for blex interaction values (poll answers, confirm clicks, etc.)
   // Key: "threadName" → Map<"msgTimestamp:blockIdx", interactionValue>
+  // Backed by localStorage for persistence across page refreshes
+  var BLEX_STORE_KEY = 'cumulus-blex-interactions';
   var blexInteractionStore = {};
+  try {
+    var saved = localStorage.getItem(BLEX_STORE_KEY);
+    if (saved) blexInteractionStore = JSON.parse(saved);
+  } catch (e) {
+    /* ignore corrupt/missing localStorage */
+  }
+
+  function _flushBlexStore() {
+    try {
+      localStorage.setItem(BLEX_STORE_KEY, JSON.stringify(blexInteractionStore));
+    } catch (e) {
+      /* quota exceeded or private browsing */
+    }
+  }
 
   // Extract ~~~blex:TYPE\n{json}\n~~~ fences from text
   // Returns { text: string (with placeholders), blocks: Array<{type, json, idx}> }
@@ -1288,9 +1350,10 @@
               if (handle && handle.onInteraction) {
                 // Wire interaction handler
                 handle.onInteraction(function (interaction) {
-                  // Store the interaction value for persistence across re-renders
+                  // Store the interaction value for persistence across re-renders + refreshes
                   if (store && storeKey && interaction.value !== undefined) {
                     store[storeKey] = interaction.value;
+                    _flushBlexStore();
                   }
 
                   // Find the panel — try el.closest first, fall back to document query
@@ -1319,8 +1382,8 @@
                         sendBtn.click();
                       }
                     } else {
-                      // Deferred: add to chip tray
-                      addInteractionChip(panel, interaction, handle);
+                      // Deferred: add to chip tray (sourceId deduplicates rapid-fire from same block)
+                      addInteractionChip(panel, interaction, handle, block.type + '-' + idx);
                     }
                   }
                 });
@@ -1360,36 +1423,45 @@
   }
 
   // Add a deferred interaction chip to the chip tray
-  function addInteractionChip(panel, interaction, handle) {
+  // If a chip from the same source already exists, replace it (prevents spam from rapid interactions)
+  function addInteractionChip(panel, interaction, handle, sourceId) {
     if (!panel) return;
     var tray = panel.querySelector('.cumulus-chip-tray');
     if (!tray) return;
 
+    // Replace existing chip from same source instead of appending
+    if (sourceId) {
+      var existing = tray.querySelector(
+        '.cumulus-interaction-chip[data-source="' + sourceId + '"]'
+      );
+      if (existing) existing.remove();
+    }
+
     var chip = document.createElement('span');
     chip.className = 'cumulus-interaction-chip';
     chip.setAttribute('data-serialized', interaction.serialized || '');
+    if (sourceId) chip.setAttribute('data-source', sourceId);
 
     var label = document.createElement('span');
+    label.className = 'chip-label';
     label.textContent =
       (interaction.icon || '\u2022') +
       ' ' +
       (interaction.summary || interaction.serialized || '').substring(0, 40);
     chip.appendChild(label);
 
-    if (interaction.revertable) {
-      var dismiss = document.createElement('span');
-      dismiss.className = 'chip-dismiss';
-      dismiss.textContent = '\u00d7';
-      dismiss.addEventListener('click', function () {
-        if (handle && handle.revertInteraction) {
-          try {
-            handle.revertInteraction(interaction);
-          } catch (e) {}
-        }
-        chip.remove();
-      });
-      chip.appendChild(dismiss);
-    }
+    var dismiss = document.createElement('span');
+    dismiss.className = 'chip-dismiss';
+    dismiss.textContent = '\u00d7';
+    dismiss.addEventListener('click', function () {
+      if (interaction.revertable && handle && handle.revertInteraction) {
+        try {
+          handle.revertInteraction(interaction);
+        } catch (e) {}
+      }
+      chip.remove();
+    });
+    chip.appendChild(dismiss);
 
     tray.appendChild(chip);
   }
@@ -1435,17 +1507,30 @@
     var chip = document.createElement('span');
     chip.className = 'cumulus-annotation-chip';
     chip.setAttribute('data-serialized', serialized);
+    chip.setAttribute('data-quote', quote);
+    chip.setAttribute('data-comment', comment);
+    chip.setAttribute('data-is-code', isCodeBlock ? '1' : '');
+    chip.setAttribute('data-code-lang', codeLang || '');
     chip.title = '"' + quote + '"\n\n' + comment;
 
     var label = document.createElement('span');
+    label.className = 'chip-label';
     label.textContent =
       '\uD83D\uDCDD \u201C' + truncatedQuote + '\u201D \u2192 ' + truncatedComment;
     chip.appendChild(label);
 
+    // Click label to edit
+    label.style.cursor = 'pointer';
+    label.addEventListener('click', function (e) {
+      e.stopPropagation();
+      showAnnotationEditPopover(panel, chip);
+    });
+
     var dismiss = document.createElement('span');
     dismiss.className = 'chip-dismiss';
     dismiss.textContent = '\u00d7';
-    dismiss.addEventListener('click', function () {
+    dismiss.addEventListener('click', function (e) {
+      e.stopPropagation();
       chip.remove();
     });
     chip.appendChild(dismiss);
@@ -1453,6 +1538,104 @@
     tray.appendChild(chip);
   }
 
+  // Show the annotation popover near a chip for editing
+  function showAnnotationEditPopover(panel, chip) {
+    dismissAnnotationPopover(panel);
+
+    var quote = chip.getAttribute('data-quote') || '';
+    var comment = chip.getAttribute('data-comment') || '';
+    var isCodeBlock = chip.getAttribute('data-is-code') === '1';
+    var codeLang = chip.getAttribute('data-code-lang') || '';
+
+    var popover = document.createElement('div');
+    popover.className = 'cumulus-annotation-popover';
+
+    // Position near the chip
+    var panelRect = panel.getBoundingClientRect();
+    var chipRect = chip.getBoundingClientRect();
+    var top = chipRect.top - panelRect.top + panel.scrollTop - 160;
+    if (top < 4) top = chipRect.bottom - panelRect.top + panel.scrollTop + 4;
+    var left = chipRect.left - panelRect.left;
+    if (left + 260 > panelRect.width) left = panelRect.width - 270;
+    if (left < 4) left = 4;
+    popover.style.top = top + 'px';
+    popover.style.left = left + 'px';
+
+    var quoteEl = document.createElement('div');
+    quoteEl.className = 'annotation-quote';
+    quoteEl.textContent = '\u201C' + quote + '\u201D';
+    popover.appendChild(quoteEl);
+
+    var textarea = document.createElement('textarea');
+    textarea.placeholder = 'Edit comment\u2026';
+    textarea.rows = 4;
+    textarea.value = comment;
+    textarea.setAttribute('data-testid', 'annotation-edit-comment');
+    popover.appendChild(textarea);
+
+    var actions = document.createElement('div');
+    actions.className = 'annotation-actions';
+
+    var cancelBtn = document.createElement('button');
+    cancelBtn.className = 'annotation-cancel';
+    cancelBtn.textContent = 'Cancel';
+    cancelBtn.addEventListener('click', function () {
+      dismissAnnotationPopover(panel);
+    });
+
+    var submitBtn = document.createElement('button');
+    submitBtn.className = 'annotation-submit';
+    submitBtn.textContent = 'Update';
+    submitBtn.setAttribute('data-testid', 'annotation-edit-submit');
+    submitBtn.addEventListener('click', function () {
+      var newComment = textarea.value.trim();
+      if (!newComment) {
+        dismissAnnotationPopover(panel);
+        return;
+      }
+      // Update chip data
+      var newSerialized;
+      if (isCodeBlock) {
+        newSerialized =
+          '```' +
+          (codeLang && codeLang !== 'text' ? codeLang : '') +
+          '\n' +
+          quote +
+          '\n```\n' +
+          newComment;
+      } else {
+        newSerialized = '> ' + quote.replace(/\n/g, '\n> ') + '\n' + newComment;
+      }
+      chip.setAttribute('data-serialized', newSerialized);
+      chip.setAttribute('data-comment', newComment);
+      var truncQ = quote.length > 30 ? quote.substring(0, 30) + '\u2026' : quote;
+      var truncC = newComment.length > 30 ? newComment.substring(0, 30) + '\u2026' : newComment;
+      var labelEl = chip.querySelector('.chip-label');
+      if (labelEl) {
+        labelEl.textContent = '\uD83D\uDCDD \u201C' + truncQ + '\u201D \u2192 ' + truncC;
+      }
+      chip.title = '"' + quote + '"\n\n' + newComment;
+      dismissAnnotationPopover(panel);
+    });
+
+    actions.appendChild(cancelBtn);
+    actions.appendChild(submitBtn);
+    popover.appendChild(actions);
+
+    textarea.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        submitBtn.click();
+      } else if (e.key === 'Escape') {
+        dismissAnnotationPopover(panel);
+      }
+    });
+
+    panel.appendChild(popover);
+    textarea.focus();
+    textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+  }
+
   // Show the annotation popover near a text selection
   function showAnnotationPopover(panel, selectedText, anchorRect, isCodeBlock, codeLang) {
     // Remove any existing popover
@@ -1597,7 +1780,7 @@
       var langLabel = lang.trim() || 'text';
       var escapedCode = escapeHtml(code.replace(/\n$/, '')); // trim trailing newline
       var tokenId = 'cb' + idx;
-      codeBlocks.push(buildCodeBlock(langLabel, escapedCode, tokenId));
+      codeBlocks.push(buildCodeBlock(langLabel, escapedCode, tokenId, code));
       return TOKEN_PREFIX + idx + '\x00';
     });
 
@@ -1671,16 +1854,36 @@
     return { html: html, blexBlocks: blexBlocks };
   }
 
-  function buildCodeBlock(lang, escapedCode, tokenId) {
+  function looksLikeUnicodeArt(text) {
+    var boxChars = /[┌┐└┘├┤┬┴┼│─╔╗╚╝╠╣╦╩╬║═┏┓┗┛┣┫┳┻╋┃━╭╮╰╯░▒▓█▶◀▲▼→←↑↓]/;
+    var lines = text.split('\n');
+    var hitCount = 0;
+    for (var i = 0; i < lines.length; i++) {
+      if (boxChars.test(lines[i])) hitCount++;
+    }
+    return hitCount >= 3;
+  }
+
+  function buildCodeBlock(lang, escapedCode, tokenId, rawCode) {
+    var editBtn = '';
+    if (rawCode && looksLikeUnicodeArt(rawCode)) {
+      editBtn =
+        '<button class="code-block-edit-btn" data-edit-target="' +
+        tokenId +
+        '" data-testid="webchat-edit-code">Edit ✎</button>';
+    }
     return (
       '<div class="code-block-wrapper">' +
       '<div class="code-block-header">' +
       '<span class="code-block-language">' +
       escapeHtml(lang) +
       '</span>' +
+      '<span style="display:flex;gap:6px;">' +
+      editBtn +
       '<button class="code-block-copy-btn" data-copy-target="' +
       tokenId +
       '" data-testid="webchat-copy-code">Copy</button>' +
+      '</span>' +
       '</div>' +
       '<pre><code data-code-id="' +
       tokenId +
@@ -1691,6 +1894,146 @@
     );
   }
 
+  // Texitool embed URL — change this if self-hosting
+  var TEXITOOL_EMBED_URL = 'https://texi.soapko.com';
+
+  function openTexitoolEditor(wrapper) {
+    var codeEl = wrapper.querySelector('code');
+    if (!codeEl) return;
+    var rawText = codeEl.textContent || '';
+
+    // Build iframe container
+    var container = document.createElement('div');
+    container.className = 'texitool-embed-container';
+
+    var iframe = document.createElement('iframe');
+    var encodedContent = btoa(unescape(encodeURIComponent(rawText)));
+    iframe.src = TEXITOOL_EMBED_URL + '?embed=true&content=' + encodedContent;
+    iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
+    iframe.setAttribute('data-testid', 'texitool-embed');
+    container.appendChild(iframe);
+
+    // Action bar
+    var actions = document.createElement('div');
+    actions.className = 'texitool-embed-actions';
+    var saveBtn = document.createElement('button');
+    saveBtn.textContent = 'Save';
+    saveBtn.setAttribute('data-testid', 'texitool-save');
+    var cancelBtn = document.createElement('button');
+    cancelBtn.textContent = 'Cancel';
+    cancelBtn.setAttribute('data-testid', 'texitool-cancel');
+    actions.appendChild(saveBtn);
+    actions.appendChild(cancelBtn);
+    container.appendChild(actions);
+
+    // Store original wrapper for restore
+    var parent = wrapper.parentNode;
+    parent.replaceChild(container, wrapper);
+
+    // Listen for postMessage from Texitool
+    function onMessage(e) {
+      if (!e.data || typeof e.data !== 'object') return;
+      if (e.data.type === 'texitool:save' && e.data.content) {
+        finishEdit(e.data.content);
+      } else if (e.data.type === 'texitool:cancel') {
+        cancelEdit();
+      }
+    }
+    window.addEventListener('message', onMessage);
+
+    function finishEdit(newContent) {
+      window.removeEventListener('message', onMessage);
+      // Rebuild the code block with updated content
+      var newWrapper = document.createElement('div');
+      newWrapper.innerHTML = buildCodeBlock(
+        'text',
+        escapeHtml(newContent),
+        'edited-' + Date.now(),
+        newContent
+      );
+      var built = newWrapper.firstChild;
+      parent.replaceChild(built, container);
+      wireEditButtons(built);
+      wireCopyButtons(built);
+      // Chip the edited content to the input tray
+      chipEditedContent(newContent, parent);
+    }
+
+    function cancelEdit() {
+      window.removeEventListener('message', onMessage);
+      parent.replaceChild(wrapper, container);
+    }
+
+    // Wire save/cancel buttons as fallback (in case postMessage isn't available)
+    saveBtn.addEventListener('click', function () {
+      // Try to get content from iframe via postMessage request
+      iframe.contentWindow.postMessage({ type: 'texitool:requestSave' }, '*');
+      // Fallback: if no response in 500ms, use original content
+      setTimeout(function () {
+        if (container.parentNode) cancelEdit(); // still mounted = no response
+      }, 500);
+    });
+
+    cancelBtn.addEventListener('click', cancelEdit);
+  }
+
+  function chipEditedContent(content, contextEl) {
+    // Find the nearest thread panel and chip tray
+    var panel = contextEl.closest('.cumulus-thread-panel');
+    if (!panel) panel = document.querySelector('.cumulus-thread-panel');
+    if (!panel) return;
+    var tray = panel.querySelector('.cumulus-chip-tray');
+    if (!tray) return;
+    // Add as an annotation chip with the edited diagram
+    var chip = document.createElement('span');
+    chip.className = 'cumulus-chip cumulus-annotation-chip';
+    chip.style.cssText = 'display:inline-flex;align-items:center;gap:4px;max-width:200px;';
+    var label = document.createElement('span');
+    label.className = 'chip-label';
+    label.style.cssText = 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
+    label.textContent = '✎ edited diagram';
+    chip.appendChild(label);
+    var dismiss = document.createElement('span');
+    dismiss.textContent = '×';
+    dismiss.className = 'chip-dismiss';
+    dismiss.style.cssText = 'cursor:pointer;opacity:0.6;flex-shrink:0;';
+    dismiss.addEventListener('click', function () {
+      chip.remove();
+    });
+    chip.appendChild(dismiss);
+    // Store the content on the chip for collectAndClearChips
+    chip.setAttribute('data-annotation', '```\n' + content + '\n```\nEdited diagram');
+    tray.appendChild(chip);
+    tray.style.display = 'flex';
+  }
+
+  function wireEditButtons(el) {
+    el.querySelectorAll('.code-block-edit-btn').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        var wrapper = btn.closest('.code-block-wrapper');
+        if (wrapper) openTexitoolEditor(wrapper);
+      });
+    });
+  }
+
+  function wireCopyButtons(el) {
+    el.querySelectorAll('.code-block-copy-btn').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        var targetId = btn.getAttribute('data-copy-target');
+        var codeEl = el.querySelector('[data-code-id="' + targetId + '"]');
+        if (!codeEl) codeEl = btn.closest('.code-block-wrapper').querySelector('code');
+        if (codeEl && navigator.clipboard) {
+          navigator.clipboard.writeText(codeEl.textContent || '').then(function () {
+            btn.textContent = 'Copied!';
+            setTimeout(function () {
+              btn.textContent = 'Copy';
+            }, 2000);
+          });
+        }
+      });
+    });
+  }
+
   function renderTables(html) {
     // Split on double newlines to find table blocks
     // A table block: lines where most lines start with |
@@ -2254,20 +2597,8 @@
           if (!isStreaming) {
             renderBlexBlocks(el, mdResult.blexBlocks, false, msgKey, threadName);
           }
-          el.querySelectorAll('.code-block-copy-btn').forEach(function (btn) {
-            btn.addEventListener('click', function () {
-              var targetId = btn.getAttribute('data-copy-target');
-              var codeEl = el.querySelector('[data-code-id="' + targetId + '"]');
-              if (codeEl && navigator.clipboard) {
-                navigator.clipboard.writeText(codeEl.textContent || '').then(function () {
-                  btn.textContent = 'Copied!';
-                  setTimeout(function () {
-                    btn.textContent = 'Copy';
-                  }, 2000);
-                });
-              }
-            });
-          });
+          wireCopyButtons(el);
+          wireEditButtons(el);
         } else if (isStreaming) {
           el.innerHTML =
             '<span class="cumulus-typing-dots"><span></span><span></span><span></span></span>';
@@ -3820,20 +4151,8 @@
           if (!isStreaming) {
             renderBlexBlocks(el, mdResult.blexBlocks, false, msgKey, threadName);
           }
-          el.querySelectorAll('.code-block-copy-btn').forEach(function (btn) {
-            btn.addEventListener('click', function () {
-              var targetId = btn.getAttribute('data-copy-target');
-              var codeEl = el.querySelector('[data-code-id="' + targetId + '"]');
-              if (codeEl && navigator.clipboard) {
-                navigator.clipboard.writeText(codeEl.textContent || '').then(function () {
-                  btn.textContent = 'Copied!';
-                  setTimeout(function () {
-                    btn.textContent = 'Copy';
-                  }, 2000);
-                });
-              }
-            });
-          });
+          wireCopyButtons(el);
+          wireEditButtons(el);
         } else if (isStreaming) {
           el.innerHTML =
             '<span class="cumulus-typing-dots"><span></span><span></span><span></span></span>';
@@ -4587,55 +4906,72 @@
     // ── Push notification subscription ──
     function registerPushNotifications() {
       if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
-        console.log('[Cumulus] Push notifications not supported');
+        console.log('[Cumulus] Push notifications not supported in this browser');
         return;
       }
 
-      navigator.serviceWorker
-        .register('/sw.js')
-        .then(function (registration) {
-          console.log('[Cumulus] Service worker registered');
-
-          // Check existing subscription
-          return registration.pushManager.getSubscription().then(function (existing) {
-            if (existing) {
-              // Already subscribed — send to server in case it's new/different
-              sendPushSubscription(existing);
-              return;
-            }
+      if (!('Notification' in window)) {
+        console.log('[Cumulus] Notification API not available');
+        return;
+      }
 
-            // Get VAPID key from server
-            var loc = window.location;
-            var apiUrl = loc.protocol + '//' + loc.host;
-            fetch(apiUrl + '/api/push/vapid-key')
-              .then(function (r) {
-                return r.json();
-              })
-              .then(function (data) {
-                if (!data.publicKey) {
-                  console.log('[Cumulus] Push not configured on server');
+      // Must request permission explicitly (required for iOS PWA)
+      Notification.requestPermission().then(function (permission) {
+        console.log('[Cumulus] Notification permission:', permission);
+        if (permission !== 'granted') {
+          console.log('[Cumulus] Push notifications denied by user');
+          return;
+        }
+
+        navigator.serviceWorker
+          .register('/sw.js', { scope: '/' })
+          .then(function (registration) {
+            console.log('[Cumulus] Service worker registered, scope:', registration.scope);
+
+            // Wait for the service worker to be ready
+            return navigator.serviceWorker.ready.then(function (reg) {
+              // Check existing subscription
+              return reg.pushManager.getSubscription().then(function (existing) {
+                if (existing) {
+                  console.log('[Cumulus] Existing push subscription found');
+                  sendPushSubscription(existing);
                   return;
                 }
 
-                // Request permission and subscribe
-                return registration.pushManager
-                  .subscribe({
-                    userVisibleOnly: true,
-                    applicationServerKey: urlBase64ToUint8Array(data.publicKey),
+                // Get VAPID key from server
+                var loc = window.location;
+                var apiUrl = loc.protocol + '//' + loc.host;
+                fetch(apiUrl + '/api/push/vapid-key')
+                  .then(function (r) {
+                    return r.json();
+                  })
+                  .then(function (data) {
+                    if (!data.publicKey) {
+                      console.log('[Cumulus] Push not configured on server (no VAPID key)');
+                      return;
+                    }
+
+                    console.log('[Cumulus] Subscribing to push with VAPID key');
+                    return reg.pushManager
+                      .subscribe({
+                        userVisibleOnly: true,
+                        applicationServerKey: urlBase64ToUint8Array(data.publicKey),
+                      })
+                      .then(function (subscription) {
+                        console.log('[Cumulus] Push subscription created:', subscription.endpoint);
+                        sendPushSubscription(subscription);
+                      });
                   })
-                  .then(function (subscription) {
-                    console.log('[Cumulus] Push subscription created');
-                    sendPushSubscription(subscription);
+                  .catch(function (err) {
+                    console.warn('[Cumulus] Push subscription failed:', err.message || err);
                   });
-              })
-              .catch(function (err) {
-                console.warn('[Cumulus] Push subscription failed:', err);
               });
+            });
+          })
+          .catch(function (err) {
+            console.warn('[Cumulus] Service worker registration failed:', err.message || err);
           });
-        })
-        .catch(function (err) {
-          console.warn('[Cumulus] Service worker registration failed:', err);
-        });
+      });
     }
 
     function sendPushSubscription(subscription) {