feat: guard mobile Draft capacity (Closes #623)

frontend/dashboard.css

@@ -10,6 +10,14 @@ header { position: sticky; top: 0; z-index: 20; padding: 12px 16px; display:flex
 .app-menu > summary { display:none; }
 .app-menu-panel { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
 button { background: linear-gradient(180deg,#1f3a5f,#15324d); border:1px solid #2a496e; color:#e5e7eb; padding:8px 12px; border-radius:10px; cursor:pointer; }
+.draft-capacity-sheet { position:fixed; inset:0; z-index:96; display:flex; align-items:flex-end; justify-content:center; background:rgba(5,12,21,.82); backdrop-filter:blur(4px); }
+.draft-capacity-sheet[hidden] { display:none; }
+.draft-capacity-panel { box-sizing:border-box; width:min(620px,100%); max-height:100dvh; overflow:auto; overflow-x:hidden; padding:18px; padding-bottom:calc(18px + env(safe-area-inset-bottom)); border:1px solid #b45309; border-radius:18px 18px 0 0; background:#0b1526; }
+.draft-capacity-panel h3 { margin:.25rem 0; overflow-wrap:anywhere; }
+.draft-capacity-oldest { margin:14px 0; padding:12px; border:1px solid #31577f; border-radius:12px; overflow-wrap:anywhere; }
+.draft-capacity-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
+.draft-capacity-actions button { min-height:44px; width:100%; }
+#replace-oldest-draft { grid-column:1 / -1; border-color:#b45309; }
 #sign-out-all { min-height:44px; }
 .active-devices-sheet { position:fixed; inset:0; z-index:80; display:flex; justify-content:flex-end; background:rgba(5,12,21,.72); backdrop-filter:blur(4px); }
 .active-devices-sheet[hidden] { display:none; }

frontend/dashboard.js

@@ -4070,6 +4070,7 @@
         body: qs('#create-issue-body').value.trim(),
         attachment: await createIssueAttachmentController.serialize(),
       };
+      if (showDraftCapacityDialog(unfiledCaptures)) return;
       const savedCapture = await unfiledCaptures.save(captureDraft);
       if (resumedUnfiledCaptureId) {
         await unfiledCaptures.completeResume(resumedUnfiledCaptureId);
@@ -4094,6 +4095,7 @@
       qs('#create-issue-title').focus();
     }
   });
+  bindDraftCapacityDialog();
   qs('#use-shared-content').addEventListener('click', () => {
     issueCapture.acceptSharedContent();
     qs('#shared-content-conflict').hidden = true;

frontend/draft-capacity-dialog.js

@@ -0,0 +1,65 @@
+function showDraftCapacityDialog(captures) {
+  const state = captures.capacity();
+  if (!state.full) return false;
+  const oldest = state.oldest;
+  qs('#draft-capacity-oldest').innerHTML = '<strong>' + escapeHtml(oldest.title) + '</strong><div class="small">' +
+    escapeHtml(oldest.body || 'No note') + (oldest.hasAttachment ? ' · Screenshot attached' : '') + '</div>';
+  qs('#draft-capacity-sheet').dataset.oldestId = oldest.id;
+  qs('#draft-capacity-status').textContent = '';
+  qs('#draft-capacity-sheet').hidden = false;
+  qs('#keep-editing-draft').focus();
+  return true;
+}
+
+function bindDraftCapacityDialog() {
+  qs('#keep-editing-draft').addEventListener('click', () => {
+    qs('#draft-capacity-sheet').hidden = true;
+    qs('#save-unfiled-issue').focus();
+  });
+  qs('#review-full-drafts').addEventListener('click', () => {
+    const oldestId = qs('#draft-capacity-sheet').dataset.oldestId;
+    saveIssueCaptureDraft();
+    qs('#draft-capacity-sheet').hidden = true;
+    closeCreateIssueSheet(true, false);
+    qs('[data-work-filter="draft"]').click();
+    mobileTaskDock.select('drafts');
+    refreshMyWorkView();
+    requestAnimationFrame(() => {
+      const card = qs('[data-capture-id="' + CSS.escape(oldestId) + '"]');
+      card?.scrollIntoView({block:'nearest'});
+      card?.focus({preventScroll:true});
+    });
+  });
+  qs('#replace-oldest-draft').addEventListener('click', async () => {
+    const oldest = unfiledCaptures.capacity().oldest;
+    if (!oldest || oldest.id !== qs('#draft-capacity-sheet').dataset.oldestId) {
+      qs('#draft-capacity-status').textContent = 'Drafts changed. Review them before replacing anything.';
+      return;
+    }
+    if (!window.confirm('Replace “' + oldest.title + '” and permanently delete its saved contents?')) return;
+    const button = qs('#replace-oldest-draft');
+    button.disabled = true;
+    try {
+      const draft = {
+        title:qs('#create-issue-title').value.trim(), body:qs('#create-issue-body').value.trim(),
+        attachment:await createIssueAttachmentController.serialize(),
+      };
+      const saved = await unfiledCaptures.replaceOldest(draft, oldest.id);
+      qs('#draft-capacity-sheet').hidden = true;
+      issueCapture.clearDraft();
+      qs('#create-issue-title').value = '';
+      qs('#create-issue-body').value = '';
+      createIssueAttachmentController.clear();
+      closeCreateIssueSheet(true, false);
+      qs('[data-work-filter="draft"]').click();
+      mobileTaskDock.select('drafts');
+      refreshMyWorkView();
+      requestAnimationFrame(() => qs('[data-capture-id="' + CSS.escape(saved.id) + '"]')?.focus());
+      qs('#my-work-action-status').textContent = 'Oldest Draft replaced. New work saved to Drafts.';
+    } catch (error) {
+      qs('#draft-capacity-status').textContent = error.message + ' Nothing was replaced.';
+    } finally { button.disabled = false; }
+  });
+}
+
+if (typeof module !== 'undefined' && module.exports) module.exports = {showDraftCapacityDialog, bindDraftCapacityDialog};

frontend/index.html

@@ -593,6 +593,20 @@
   </section>
 </div>
 
+<div class="draft-capacity-sheet" id="draft-capacity-sheet" role="dialog" aria-modal="true" aria-labelledby="draft-capacity-heading" hidden>
+  <section class="draft-capacity-panel">
+    <h3 id="draft-capacity-heading">Drafts full — nothing was deleted.</h3>
+    <p class="small">Review saved work, keep editing, or explicitly replace the oldest Draft.</p>
+    <div class="draft-capacity-oldest" id="draft-capacity-oldest"></div>
+    <div class="draft-capacity-actions">
+      <button id="review-full-drafts" type="button">Review Drafts</button>
+      <button id="keep-editing-draft" type="button">Keep editing</button>
+      <button id="replace-oldest-draft" type="button">Replace oldest &amp; save</button>
+    </div>
+    <div id="draft-capacity-status" class="small" aria-live="assertive"></div>
+  </section>
+</div>
+
 <div class="update-sheet" id="update-sheet" role="dialog" aria-modal="true" aria-labelledby="update-sheet-title">
   <section class="update-sheet-panel">
     <div class="update-sheet-header">
@@ -844,6 +858,7 @@
 <script src="static/widgets.js"></script>
 <script src="static/drafts.js"></script>
 <script src="static/unfiled-captures.js"></script>
+<script src="static/draft-capacity-dialog.js"></script>
 <script src="static/outbox-coordinator.js"></script>
 <script src="static/background-issue-sync.js"></script>
 <script src="static/issue-outbox.js"></script>

frontend/service-worker.js

@@ -21,6 +21,7 @@ const SHELL = [
   BASE + 'static/widgets.js',
   BASE + 'static/drafts.js',
   BASE + 'static/unfiled-captures.js',
+  BASE + 'static/draft-capacity-dialog.js',
   BASE + 'static/outbox-coordinator.js',
   BASE + 'static/issue-outbox.js',
   BASE + 'static/authored-outbox.js',

frontend/unfiled-captures.js

@@ -30,7 +30,12 @@ function createUnfiledCaptures({
       .map(item => ({...item, quarantined: !currentLogin || currentLogin !== item.ownerLogin}));
   }
 
-  function save(note) {
+  function capacity() {
+    const items = read().slice().sort((left, right) => Number(right.savedAt) - Number(left.savedAt));
+    return {full:items.length >= maxItems, count:items.length, maxItems, oldest:items.at(-1) || null};
+  }
+
+  function prepare(note) {
     const title = String(note?.title || '').trim().slice(0, 255);
     const body = String(note?.body || '').trim().slice(0, 10000);
     if (!title) throw new Error('Add a title before saving.');
@@ -43,32 +48,46 @@ function createUnfiledCaptures({
     if (hasAttachment && !attachmentStore) {
       throw new Error('Screenshot storage is unavailable. Your capture is still open; retry after reloading.');
     }
+    return {title, body, ownerLogin, attachment, hasAttachment};
+  }
+
+  function persist(prepared, existing, removed = null) {
     const item = {
-      id:String(createId()), ownerLogin, title, body, savedAt:Number(now()),
-      ...(hasAttachment ? {hasAttachment:true} : {}),
+      id:String(createId()), ownerLogin:prepared.ownerLogin, title:prepared.title, body:prepared.body,
+      savedAt:Number(now()), ...(prepared.hasAttachment ? {hasAttachment:true} : {}),
     };
-    const existing = read().filter(candidate => candidate.id !== item.id);
-    const items = [item, ...existing].slice(0, maxItems);
-    const pruned = existing.filter(candidate => !items.some(retained => retained.id === candidate.id));
-    if (!hasAttachment) {
-      write(items);
-      pruned.filter(candidate => candidate.hasAttachment).forEach(candidate =>
-        Promise.resolve(attachmentStore?.delete(candidate.id)).catch(() => {}));
-      return item;
-    }
-    return Promise.resolve(attachmentStore.put(item.id, {
-      filename:String(attachment.filename).slice(0, 255),
-      contentType:String(attachment.contentType), blob:attachment.blob,
-    })).then(() => {
+    const items = [item, ...existing.filter(candidate => candidate.id !== item.id)];
+    const finish = () => {
       try { write(items); }
       catch (error) {
-        Promise.resolve(attachmentStore.delete(item.id)).catch(() => {});
+        if (prepared.hasAttachment) Promise.resolve(attachmentStore.delete(item.id)).catch(() => {});
         throw error;
       }
-      pruned.filter(candidate => candidate.hasAttachment).forEach(candidate =>
-        Promise.resolve(attachmentStore.delete(candidate.id)).catch(() => {}));
+      if (removed?.hasAttachment) return Promise.resolve(attachmentStore?.delete(removed.id)).then(() => item);
       return item;
-    });
+    };
+    if (!prepared.hasAttachment) return finish();
+    return Promise.resolve(attachmentStore.put(item.id, {
+      filename:String(prepared.attachment.filename).slice(0, 255),
+      contentType:String(prepared.attachment.contentType), blob:prepared.attachment.blob,
+    })).then(finish);
+  }
+
+  function save(note) {
+    const prepared = prepare(note);
+    const existing = read();
+    if (existing.length >= maxItems) throw new Error('Drafts full — nothing was deleted.');
+    return persist(prepared, existing);
+  }
+
+  function replaceOldest(note, expectedOldestId) {
+    const prepared = prepare(note);
+    const existing = read().slice().sort((left, right) => Number(right.savedAt) - Number(left.savedAt));
+    const oldest = existing.at(-1);
+    if (existing.length < maxItems || !oldest || oldest.id !== expectedOldestId) {
+      throw new Error('Drafts changed. Review them before replacing anything.');
+    }
+    return persist(prepared, existing.filter(item => item.id !== oldest.id), oldest);
   }
 
   function discard(id) {
@@ -100,7 +119,7 @@ function createUnfiledCaptures({
 
   function completeResume(id) { return discard(id); }
 
-  return {list, save, discard, resume, completeResume};
+  return {list, capacity, save, replaceOldest, discard, resume, completeResume};
 }
 
 if (typeof module !== 'undefined' && module.exports) module.exports = createUnfiledCaptures;