feat: deliver offline issue captures after app close (#250)

Closes #250

frontend/background-issue-sync.js

@@ -0,0 +1,206 @@
+function createIndexedDbTransaction(indexedDB, dbName = 'stackchain-background-outbox-v1') {
+  let databasePromise;
+  function database() {
+    if (!databasePromise) databasePromise = new Promise((resolve, reject) => {
+      const request = indexedDB.open(dbName, 1);
+      request.onupgradeneeded = () => {
+        if (!request.result.objectStoreNames.contains('issues')) {
+          request.result.createObjectStore('issues', { keyPath: 'id' });
+        }
+      };
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+    return databasePromise;
+  }
+  const requested = request => new Promise((resolve, reject) => {
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+  return async work => {
+    const db = await database();
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction('issues', 'readwrite');
+      const objectStore = transaction.objectStore('issues');
+      let result;
+      let failed = false;
+      transaction.oncomplete = () => failed ? undefined : resolve(result);
+      transaction.onerror = () => reject(transaction.error);
+      transaction.onabort = () => reject(transaction.error || new Error('Issue outbox transaction aborted'));
+      Promise.resolve(work({
+        getAll: () => requested(objectStore.getAll()),
+        put: value => requested(objectStore.put(value)),
+        delete: id => requested(objectStore.delete(id)),
+      })).then(value => { result = value; }).catch(error => {
+        failed = true;
+        try { transaction.abort(); } catch (_abortError) { reject(error); }
+        reject(error);
+      });
+    });
+  };
+}
+
+function createIssueSyncStore({ transaction, indexedDB = globalThis.indexedDB, now = () => Date.now(), claimMs = 30000 } = {}) {
+  const transact = transaction || createIndexedDbTransaction(indexedDB);
+
+  async function reconcile(items) {
+    return transact(async records => {
+      const existing = await records.getAll();
+      const incoming = new Map(items.map(item => [item.id, { ...item }]));
+      for (const current of existing) {
+        const replacement = incoming.get(current.id);
+        if (!replacement) {
+          if (current.status !== 'sending' || Number(current.claimUntil) <= Number(now())) {
+            await records.delete(current.id);
+          }
+          continue;
+        }
+        if ((current.status === 'sending' && Number(current.claimUntil) > Number(now())) ||
+            (current.status === 'attention' && replacement.status === 'attention') ||
+            current.status === 'sent') {
+          incoming.set(current.id, current);
+        }
+      }
+      for (const item of incoming.values()) await records.put(item);
+    });
+  }
+
+  async function claimNext(ownerLogin) {
+    return transact(async records => {
+      const timestamp = Number(now());
+      const items = await records.getAll();
+      const item = items.find(candidate => candidate.ownerLogin === ownerLogin &&
+        (candidate.status === 'queued' || candidate.status === 'sending') &&
+        (candidate.status !== 'sending' || Number(candidate.claimUntil) <= timestamp));
+      if (!item) return null;
+      const claimed = { ...item, status: 'sending', claimUntil: timestamp + claimMs };
+      await records.put(claimed);
+      return claimed;
+    });
+  }
+
+  async function claim(id, ownerLogin) {
+    return transact(async records => {
+      const timestamp = Number(now());
+      const item = (await records.getAll()).find(candidate => candidate.id === id);
+      if (!item || item.ownerLogin !== ownerLogin ||
+          !['queued', 'sending'].includes(item.status) ||
+          (item.status === 'sending' && Number(item.claimUntil) > timestamp)) return null;
+      const claimed = { ...item, status: 'sending', claimUntil: timestamp + claimMs };
+      await records.put(claimed);
+      return claimed;
+    });
+  }
+
+  async function upsert(item) {
+    return transact(async records => {
+      const current = (await records.getAll()).find(candidate => candidate.id === item.id);
+      if (current && ((current.status === 'sending' && Number(current.claimUntil) > Number(now())) ||
+          (current.status === 'attention' && item.status === 'attention') ||
+          current.status === 'sent')) return current;
+      await records.put({ ...item });
+      return item;
+    });
+  }
+
+  async function update(id, transform) {
+    return transact(async records => {
+      const item = (await records.getAll()).find(candidate => candidate.id === id);
+      if (item) await records.put(transform(item));
+    });
+  }
+
+  return {
+    reconcile,
+    upsert,
+    claim,
+    claimNext,
+    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()),
+    countBlocked: ownerLogin => transact(async records =>
+      (await records.getAll()).filter(item => item.status !== 'sent' && item.ownerLogin !== ownerLogin).length),
+  };
+}
+
+function createBackgroundIssueSync({ store, fetchJson, base = '' }) {
+  function issueRequest(item) {
+    const repository = String(item.repository || '').split('/').map(encodeURIComponent).join('/');
+    return {
+      url: base + 'api/v1/repos/' + repository + '/issues',
+      options: {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          'Idempotency-Key': item.operationId,
+        },
+        body: JSON.stringify({
+          title: item.title,
+          body: item.body,
+          label_ids: item.labelIds,
+          ...(item.milestoneId ? { milestone_id: item.milestoneId } : {}),
+          ...(item.dueDate ? { due_date: item.dueDate + 'T23:59:59Z' } : {}),
+        }),
+      },
+    };
+  }
+
+  async function deliver(item) {
+    const request = issueRequest(item);
+    try {
+      const issue = await fetchJson(request.url, request.options);
+      await store.complete(item.id);
+      return { issue };
+    } 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 };
+      }
+      await store.release(item.id);
+      throw error;
+    }
+  }
+
+  async function send(item, currentLogin) {
+    if (!currentLogin || item.ownerLogin !== currentLogin) return { blocked: true };
+    await store.upsert(item);
+    const claimed = await store.claim(item.id, currentLogin);
+    if (!claimed) return { busy: true };
+    return deliver(claimed);
+  }
+
+  async function flush() {
+    const identity = await fetchJson(base + 'api/v1/background-identity', {
+      headers: { Accept: 'application/json' }, cache: 'no-store',
+    });
+    const login = String(identity?.login || '').trim();
+    const confirmed = [];
+    let attention = 0;
+    if (!login) return { confirmed, blocked: 0, attention };
+    while (true) {
+      const item = await store.claimNext(login);
+      if (!item) break;
+      const result = await deliver(item);
+      if (result.issue) confirmed.push(result.issue);
+      if (result.attention) attention += 1;
+    }
+    const blocked = store.countBlocked ? await store.countBlocked(login) : 0;
+    return { confirmed, blocked, attention };
+  }
+
+  return {
+    flush, send,
+    reconcile: items => store.reconcile(items),
+    snapshot: () => store.snapshot(),
+  };
+}
+
+createBackgroundIssueSync.createIssueSyncStore = createIssueSyncStore;
+if (typeof module !== 'undefined' && module.exports) module.exports = createBackgroundIssueSync;
+if (typeof globalThis !== 'undefined') {
+  globalThis.createBackgroundIssueSync = createBackgroundIssueSync;
+  globalThis.createIssueSyncStore = createIssueSyncStore;
+}

frontend/index.html

@@ -741,6 +741,7 @@ textarea { resize: vertical; min-height: 120px; }
 <script src="static/widgets.js"></script>
 <script src="static/drafts.js"></script>
 <script src="static/outbox-coordinator.js"></script>
+<script src="static/background-issue-sync.js"></script>
 <script src="static/issue-outbox.js"></script>
 <script src="static/authored-outbox.js"></script>
 <script src="static/offline-work.js"></script>
@@ -894,11 +895,28 @@ textarea { resize: vertical; min-height: 120px; }
     loadMilestones: item => issueController.loadMilestones(item),
   });
   const issueCapture = createIssueCapture({ fetchJson: fetchReviewJson, storage: localStorage });
+  let backgroundIssueSync = null;
+  if ('indexedDB' in window) {
+    const backgroundIssueStore = createIssueSyncStore();
+    backgroundIssueSync = createBackgroundIssueSync({
+      store: backgroundIssueStore, fetchJson: fetchReviewJson,
+    });
+    backgroundIssueSync.requestSync = async () => {
+      if (!('serviceWorker' in navigator)) return;
+      const registration = await navigator.serviceWorker.ready;
+      if (registration.sync) await registration.sync.register('stackchain-issue-outbox-v1');
+    };
+  }
   const outboxCoordinator = createOutboxCoordinator({ storage: localStorage });
   const issueOutbox = createIssueOutbox({
     storage: localStorage, fetchJson: fetchReviewJson, coordinator: outboxCoordinator,
+    backgroundSync: backgroundIssueSync,
     getOwnerLogin: () => confirmedOwnerLogin,
   });
+  if (backgroundIssueSync) {
+    backgroundIssueSync.snapshot().then(records => issueOutbox.reconcileBackground(records))
+      .catch(() => { /* The foreground localStorage outbox remains available. */ });
+  }
   const authoredOutbox = createAuthoredOutbox({
     storage: localStorage, fetchJson: fetchReviewJson, coordinator: outboxCoordinator,
     getOwnerLogin: () => confirmedOwnerLogin,

frontend/issue-outbox.js

@@ -1,4 +1,4 @@
-function createIssueOutbox({ storage, fetchJson, coordinator, getOwnerLogin = () => '', createOperationId, now = () => Date.now(), maxItems = 20 }) {
+function createIssueOutbox({ storage, fetchJson, coordinator, backgroundSync, getOwnerLogin = () => '', createOperationId, now = () => Date.now(), maxItems = 20 }) {
   const storageKey = 'stackchain.issue-outbox.v1';
   const operationId = createOperationId || (() =>
     globalThis.crypto?.randomUUID?.() || String(Date.now()) + '-' + Math.random().toString(16).slice(2)
@@ -16,6 +16,11 @@ function createIssueOutbox({ storage, fetchJson, coordinator, getOwnerLogin = ()
   function write(items) {
     storage?.setItem(storageKey, JSON.stringify({ version: 2, items }));
     coordinator?.notify('issue');
+    if (backgroundSync?.reconcile) {
+      Promise.resolve(backgroundSync.reconcile(items))
+        .then(() => items.length ? backgroundSync.requestSync?.() : undefined)
+        .catch(() => { /* Foreground reconnect remains the compatibility fallback. */ });
+    }
   }
 
   function enqueue(draft) {
@@ -74,18 +79,30 @@ function createIssueOutbox({ storage, fetchJson, coordinator, getOwnerLogin = ()
     const repository = item.repository.split('/').map(encodeURIComponent).join('/');
     const request = (async () => {
       try {
-        const issue = await fetchJson('api/v1/repos/' + repository + '/issues', {
-          method: 'POST',
-          headers: {
-            Accept: 'application/json', 'Content-Type': 'application/json',
-            'Idempotency-Key': item.operationId,
-          },
-          body: JSON.stringify({
-            title: item.title, body: item.body, label_ids: item.labelIds,
-            ...(item.milestoneId ? { milestone_id: item.milestoneId } : {}),
-            ...(item.dueDate ? { due_date: item.dueDate + 'T23:59:59Z' } : {}),
-          }),
-        });
+        let issue;
+        if (backgroundSync?.send) {
+          const delivery = await backgroundSync.send(item, currentLogin);
+          if (delivery.attention) {
+            const error = delivery.error || new Error('Issue needs attention');
+            error.status = Number(error.status || 422);
+            throw error;
+          }
+          issue = delivery.issue;
+        } else {
+          issue = await fetchJson('api/v1/repos/' + repository + '/issues', {
+            method: 'POST',
+            headers: {
+              Accept: 'application/json', 'Content-Type': 'application/json',
+              'Idempotency-Key': item.operationId,
+            },
+            body: JSON.stringify({
+              title: item.title, body: item.body, label_ids: item.labelIds,
+              ...(item.milestoneId ? { milestone_id: item.milestoneId } : {}),
+              ...(item.dueDate ? { due_date: item.dueDate + 'T23:59:59Z' } : {}),
+            }),
+          });
+        }
+        if (!issue) return { blocked: true };
         discard(item.id);
         return { issue };
       } catch (error) {
@@ -139,7 +156,21 @@ function createIssueOutbox({ storage, fetchJson, coordinator, getOwnerLogin = ()
     return retryItem(id, currentLogin);
   }
 
-  return { enqueue, update, discard, flush, retry, list: () => read().map(item => ({ ...item })) };
+  function reconcileBackground(records) {
+    const statuses = new Map((records || []).map(item => [item.id, item]));
+    const items = read().flatMap(item => {
+      const background = statuses.get(item.id);
+      if (background?.status === 'sent') return [];
+      if (background?.status === 'attention') return [{
+        ...item, status: 'attention', error: String(background.error || 'Issue needs attention').slice(0, 240),
+      }];
+      return [item];
+    });
+    write(items);
+    return items;
+  }
+
+  return { enqueue, update, discard, flush, retry, reconcileBackground, list: () => read().map(item => ({ ...item })) };
 }
 
 if (typeof module !== 'undefined' && module.exports) module.exports = createIssueOutbox;

frontend/service-worker.js

@@ -1,6 +1,7 @@
-const CACHE = 'stackchain-dashboard-shell-v11';
-const OUTAGE_STATUSES = new Set([500, 502, 503, 504]);
 const BASE = new URL('./', self.location.href).pathname;
+importScripts(BASE + 'static/background-issue-sync.js');
+const CACHE = 'stackchain-dashboard-shell-v12';
+const OUTAGE_STATUSES = new Set([500, 502, 503, 504]);
 const SHELL = [
   BASE,
   BASE + 'manifest.webmanifest',
@@ -25,8 +26,24 @@ const SHELL = [
   BASE + 'static/work-route.js',
   BASE + 'static/context-poller.js',
   BASE + 'static/mobile-task-dock.js',
+  BASE + 'static/background-issue-sync.js',
 ];
 
+async function fetchJson(url, options) {
+  const response = await fetch(new URL(url, self.location.origin), options);
+  const payload = await response.json().catch(() => ({}));
+  if (!response.ok) {
+    const error = new Error(payload.error || payload.detail || 'Background issue delivery failed.');
+    error.status = response.status;
+    throw error;
+  }
+  return payload;
+}
+
+const issueSync = self.__issueSync || createBackgroundIssueSync({
+  store: createIssueSyncStore(), fetchJson, base: BASE,
+});
+
 self.addEventListener('install', event => {
   event.waitUntil(caches.open(CACHE).then(cache => cache.addAll(SHELL)).then(() => self.skipWaiting()));
 });
@@ -38,6 +55,10 @@ self.addEventListener('activate', event => {
   )).then(() => self.clients.claim()));
 });
 
+self.addEventListener('sync', event => {
+  if (event.tag === 'stackchain-issue-outbox-v1') event.waitUntil(issueSync.flush());
+});
+
 self.addEventListener('fetch', event => {
   const request = event.request;
   if (request.method !== 'GET' || request.url.includes('/api/')) return;