feat: notify on background delivery completion (#260)

frontend/background-issue-sync.js

@@ -48,6 +48,7 @@ function createIssueSyncStore({ transaction, indexedDB = globalThis.indexedDB, n
       const existing = await records.getAll();
       const incoming = new Map(items.map(item => [item.id, { ...item, outboxLane }]));
       for (const current of existing) {
+        if (current.recordType === 'receipt-preference') continue;
         const currentLane = current.outboxLane || 'issue';
         if (currentLane !== outboxLane) continue;
         const replacement = incoming.get(current.id);
@@ -112,6 +113,27 @@ function createIssueSyncStore({ transaction, indexedDB = globalThis.indexedDB, n
     });
   }
 
+  function preferenceId(ownerLogin) {
+    return 'receipt-preference:' + String(ownerLogin || '').trim();
+  }
+
+  async function setReceiptPreference(ownerLogin, enabled) {
+    const login = String(ownerLogin || '').trim();
+    if (!login) return;
+    return transact(async records => {
+      const id = preferenceId(login);
+      if (!enabled) return records.delete(id);
+      return records.put({ id, recordType: 'receipt-preference', ownerLogin: login, enabled: true });
+    });
+  }
+
+  async function getReceiptPreference(ownerLogin) {
+    const id = preferenceId(ownerLogin);
+    return transact(async records => Boolean(
+      (await records.getAll()).find(item => item.id === id)?.enabled
+    ));
+  }
+
   return {
     reconcile,
     upsert,
@@ -120,13 +142,32 @@ function createIssueSyncStore({ transaction, indexedDB = globalThis.indexedDB, n
     complete: id => update(id, item => ({ ...item, status: 'sent', claimUntil: 0 })),
     release: id => update(id, item => ({ ...item, status: 'queued', claimUntil: 0 })),
     fail: (id, error) => update(id, item => ({ ...item, status: 'attention', claimUntil: 0, error })),
-    snapshot: () => transact(records => records.getAll()),
+    snapshot: () => transact(async records =>
+      (await records.getAll()).filter(item => item.recordType !== 'receipt-preference')),
     countBlocked: ownerLogin => transact(async records =>
-      (await records.getAll()).filter(item => item.status !== 'sent' && item.ownerLogin !== ownerLogin).length),
+      (await records.getAll()).filter(item => item.recordType !== 'receipt-preference' &&
+        item.status !== 'sent' && item.ownerLogin !== ownerLogin).length),
+    setReceiptPreference,
+    getReceiptPreference,
   };
 }
 
 function createBackgroundIssueSync({ store, fetchJson, base = '' }) {
+  function receiptFor(item, status, delivered = {}) {
+    if (status === 'attention') {
+      return { id: item.id, status, kind: item.kind ? 'message' : 'issue', route: '#/my-work/drafts' };
+    }
+    if (item.kind === 'update-reply') {
+      return { id: item.id, status, kind: 'message', route: '#/my-work/update/' + encodeURIComponent(item.notificationId) };
+    }
+    const repository = String(item.repository || '').split('/').map(encodeURIComponent).join('/');
+    if (item.kind === 'issue-comment' || item.kind === 'pull-comment') {
+      const resource = item.kind === 'pull-comment' ? 'pull' : 'issue';
+      return { id: item.id, status, kind: 'message', route: '#/my-work/' + resource + '/' + repository + '/' + encodeURIComponent(item.number) };
+    }
+    return { id: item.id, status, kind: 'issue', route: '#/my-work/issue/' + repository + '/' + encodeURIComponent(delivered.number) };
+  }
+
   function deliveryRequest(item) {
     if (item.kind === 'update-reply') {
       return authoredRequest('api/v1/notifications/' + encodeURIComponent(item.notificationId) + '/reply', item);
@@ -179,12 +220,13 @@ function createBackgroundIssueSync({ store, fetchJson, base = '' }) {
     try {
       const delivered = await fetchJson(request.url, request.options);
       await store.complete(item.id);
-      return item.kind ? { message: delivered } : { issue: delivered };
+      const receipt = receiptFor(item, 'confirmed', delivered);
+      return item.kind ? { message: delivered, receipt } : { issue: delivered, receipt };
     } catch (error) {
       const status = Number(error?.status || 0);
       if (status >= 400 && status < 500) {
         await store.fail(item.id, String(error?.message || 'Issue needs attention').slice(0, 240));
-        return { attention: true, error };
+        return { attention: true, error, receipt: receiptFor(item, 'attention') };
       }
       await store.release(item.id);
       throw error;
@@ -205,8 +247,9 @@ function createBackgroundIssueSync({ store, fetchJson, base = '' }) {
     });
     const login = String(identity?.login || '').trim();
     const confirmed = [];
+    const receipts = [];
     let attention = 0;
-    if (!login) return { confirmed, blocked: 0, attention };
+    if (!login) return { confirmed, blocked: 0, attention, login, receipts };
     while (true) {
       const item = await store.claimNext(login);
       if (!item) break;
@@ -214,15 +257,18 @@ function createBackgroundIssueSync({ store, fetchJson, base = '' }) {
       if (result.issue) confirmed.push(result.issue);
       if (result.message) confirmed.push(result.message);
       if (result.attention) attention += 1;
+      if (result.receipt) receipts.push(result.receipt);
     }
     const blocked = store.countBlocked ? await store.countBlocked(login) : 0;
-    return { confirmed, blocked, attention };
+    return { confirmed, blocked, attention, login, receipts };
   }
 
   return {
     flush, send,
     reconcile: (items, outboxLane) => store.reconcile(items, outboxLane),
     snapshot: () => store.snapshot(),
+    setReceiptPreference: (ownerLogin, enabled) => store.setReceiptPreference(ownerLogin, enabled),
+    getReceiptPreference: ownerLogin => store.getReceiptPreference(ownerLogin),
   };
 }
 

frontend/index.html

@@ -331,8 +331,10 @@ textarea { resize: vertical; min-height: 120px; }
       </label>
       <div class="offline-work-controls">
         <label for="keep-work-offline"><input id="keep-work-offline" type="checkbox" /> Keep My Work available offline</label>
+        <label for="delivery-receipts"><input id="delivery-receipts" type="checkbox" /> Notify me when queued work finishes</label>
         <button id="clear-offline-work" type="button">Clear offline work data</button>
         <span class="small" id="offline-work-status" role="status" aria-live="polite"></span>
+        <span class="small" id="delivery-receipt-status" role="status" aria-live="polite"></span>
       </div>
     </div>
     <div class="my-work-list" id="my-work-list"></div>
@@ -2410,7 +2412,10 @@ textarea { resize: vertical; min-height: 120px; }
       const contextIdentityFresh = !snapshot.context.error && !contextFreshness?.stale &&
         !contextFreshness?.degraded && !contextFreshness?.revalidating;
       activeFlushLogin = contextIdentityFresh ? String(snapshot.context.user?.login || '').trim() : '';
-      if (activeFlushLogin) confirmedOwnerLogin = activeFlushLogin;
+      if (activeFlushLogin) {
+        confirmedOwnerLogin = activeFlushLogin;
+        updateDeliveryReceiptControls();
+      }
       snapshot.context.notifications = lastNotifications;
       renderContextSnapshot(snapshot.context);
       if (contextFreshness?.stale) markMyWorkStale();
@@ -3357,12 +3362,33 @@ textarea { resize: vertical; min-height: 120px; }
   const offlineStatus = qs('#offline-status');
   const keepWorkOffline = qs('#keep-work-offline');
   const offlineWorkStatus = qs('#offline-work-status');
+  const deliveryReceipts = qs('#delivery-receipts');
+  const deliveryReceiptStatus = qs('#delivery-receipt-status');
   function updateOfflineWorkControls(message) {
     keepWorkOffline.checked = offlineWorkStore.enabled();
     const saved = offlineWorkStore.load();
     offlineWorkStatus.textContent = message || (saved ? 'Saved ' + fmt(saved.saved_at) + ' · expires after 7 days.' :
       (keepWorkOffline.checked ? 'Waiting for a healthy live refresh.' : 'Off · no work data is stored.'));
   }
+  async function updateDeliveryReceiptControls(message) {
+    const supported = Boolean(backgroundIssueSync && 'Notification' in window && 'serviceWorker' in navigator);
+    deliveryReceipts.disabled = !supported || !confirmedOwnerLogin;
+    if (!supported) {
+      deliveryReceipts.checked = false;
+      deliveryReceiptStatus.textContent = 'Delivery notifications are unavailable in this browser.';
+      return;
+    }
+    if (!confirmedOwnerLogin) {
+      deliveryReceipts.checked = false;
+      deliveryReceiptStatus.textContent = 'Waiting for your signed-in account.';
+      return;
+    }
+    deliveryReceipts.checked = Notification.permission === 'granted' &&
+      await backgroundIssueSync.getReceiptPreference(confirmedOwnerLogin);
+    deliveryReceiptStatus.textContent = message || (deliveryReceipts.checked
+      ? 'Background delivery receipts enabled for @' + confirmedOwnerLogin + '.'
+      : Notification.permission === 'denied' ? 'Notifications are blocked in browser settings.' : 'Off by default.');
+  }
   function setOfflineWorkMode(value) {
     offlineWorkMode = value;
     ['#find-work', '#start-work-session', '#load-more-work', '#load-more-notifications', '#bulk-mark-read']
@@ -3414,11 +3440,24 @@ textarea { resize: vertical; min-height: 120px; }
     }
     updateOfflineWorkControls(keepWorkOffline.checked ? 'Offline saving enabled.' : 'Offline work data cleared.');
   });
+  deliveryReceipts.addEventListener('change', async () => {
+    let enabled = deliveryReceipts.checked;
+    if (enabled && Notification.permission !== 'granted') {
+      enabled = await Notification.requestPermission() === 'granted';
+    }
+    deliveryReceipts.checked = enabled;
+    if (backgroundIssueSync && confirmedOwnerLogin) {
+      await backgroundIssueSync.setReceiptPreference(confirmedOwnerLogin, enabled);
+    }
+    await updateDeliveryReceiptControls(enabled ? 'Background delivery receipts enabled.' :
+      (Notification.permission === 'denied' ? 'Notifications are blocked in browser settings.' : 'Background delivery receipts disabled.'));
+  });
   qs('#clear-offline-work').addEventListener('click', () => {
     offlineWorkStore.clear();
     updateOfflineWorkControls('Offline work data cleared.');
   });
   updateOfflineWorkControls();
+  updateDeliveryReceiptControls();
   if (!navigator.onLine) showOfflineStatus();
   window.addEventListener('offline', showOfflineStatus);
   window.addEventListener('online', reconnectLiveData);
@@ -3493,6 +3532,14 @@ textarea { resize: vertical; min-height: 120px; }
       updateWorkPaginationControls();
     });
   });
+  function openDeliveryReceiptRoute() {
+    if (window.location.hash !== '#/my-work/drafts') return;
+    qs('[data-work-filter="draft"]').click();
+    qs('#my-work').scrollIntoView({block:'start'});
+    qs('#my-work').focus();
+  }
+  window.addEventListener('hashchange', openDeliveryReceiptRoute);
+  openDeliveryReceiptRoute();
   qs('#work-milestone-filter').addEventListener('change', event => {
     selectedWorkMilestone = event.target.value;
     try { sessionStorage.setItem(WORK_MILESTONE_KEY, selectedWorkMilestone); }

frontend/service-worker.js

@@ -1,6 +1,6 @@
 const BASE = new URL('./', self.location.href).pathname;
 importScripts(BASE + 'static/background-issue-sync.js');
-const CACHE = 'stackchain-dashboard-shell-v16';
+const CACHE = 'stackchain-dashboard-shell-v17';
 const OUTAGE_STATUSES = new Set([500, 502, 503, 504]);
 const SHELL = [
   BASE,
@@ -64,6 +64,23 @@ const issueSync = self.__issueSync || createBackgroundIssueSync({
   store: createIssueSyncStore(), fetchJson, base: BASE,
 });
 
+async function flushAndNotify() {
+  const result = await issueSync.flush();
+  if (!result?.login || !result.receipts?.length ||
+      !await issueSync.getReceiptPreference?.(result.login)) return;
+  for (const receipt of result.receipts) {
+    const needsAttention = receipt.status === 'attention';
+    const title = needsAttention
+      ? 'Queued work needs attention'
+      : receipt.kind === 'issue' ? 'Queued issue created' : 'Queued message sent';
+    await self.registration.showNotification(title, {
+      body: needsAttention ? 'Tap to review it in Drafts.' : 'Tap to open it in Stackchain.',
+      tag: 'stackchain-delivery-' + receipt.id,
+      data: { route: receipt.route },
+    });
+  }
+}
+
 self.addEventListener('install', event => {
   event.waitUntil(caches.open(CACHE).then(cache => cache.addAll(SHELL)).then(() => self.skipWaiting()));
 });
@@ -76,7 +93,21 @@ self.addEventListener('activate', event => {
 });
 
 self.addEventListener('sync', event => {
-  if (event.tag === 'stackchain-issue-outbox-v1') event.waitUntil(issueSync.flush());
+  if (event.tag === 'stackchain-issue-outbox-v1') event.waitUntil(flushAndNotify());
+});
+
+self.addEventListener('notificationclick', event => {
+  event.notification.close();
+  const route = String(event.notification.data?.route || '');
+  if (!route.startsWith('#/my-work/')) return;
+  const target = new URL(BASE + route, self.location.origin).href;
+  event.waitUntil((async () => {
+    const windows = await self.clients.matchAll({ type: 'window', includeUncontrolled: true });
+    const client = windows.find(candidate => candidate.url.startsWith(self.location.origin + BASE));
+    if (!client) return self.clients.openWindow(target);
+    if (client.navigate) await client.navigate(target);
+    return client.focus();
+  })());
 });
 
 self.addEventListener('fetch', event => {