feat: capture mobile evidence bundles (Closes #823)

frontend/background-issue-sync.js

@@ -91,11 +91,18 @@ function createIssueSyncStore({
           }
           continue;
         }
+        const preservedBundle = current.operationId === replacement.operationId &&
+          current.attachments?.every(value => value?.data || value?.blob) &&
+          replacement.attachments?.every(value => value?.stored && !value.data && !value.blob)
+          ? current.attachments : null;
         if (current.operationId === replacement.operationId &&
             (current.attachment?.data || current.attachment?.blob) &&
             replacement.attachment?.stored &&
-            !replacement.attachment.data && !replacement.attachment.blob) {
-          replacement = { ...replacement, attachment: current.attachment };
+            !replacement.attachment.data && !replacement.attachment.blob || preservedBundle) {
+          replacement = {
+            ...replacement,
+            ...(preservedBundle ? {attachments:preservedBundle} : {attachment:current.attachment}),
+          };
           incoming.set(current.id, replacement);
         }
         if ((current.status === 'sending' && Number(current.claimUntil) > Number(now())) ||
@@ -525,8 +532,11 @@ function createBackgroundIssueSync({
       deliveredIssue = await requestStage(item, request.url, request.options);
       await checkpointClaim(item, current => ({ ...current, deliveredIssue }));
     }
-    let attachmentMarkdown = item.attachmentMarkdown;
-    if (!attachmentMarkdown) {
+    const attachments = Array.isArray(item.attachments) ? item.attachments : [item.attachment];
+    const attachmentMarkdowns = Array.isArray(item.attachmentMarkdowns)
+      ? item.attachmentMarkdowns.slice(0, attachments.length)
+      : (item.attachmentMarkdown ? [item.attachmentMarkdown] : []);
+    for (let index = attachmentMarkdowns.length; index < attachments.length; index += 1) {
       const uploaded = await requestStage(
         item,
         base + 'api/v1/repos/' + repository + '/issues/' + encodeURIComponent(deliveredIssue.number) + '/attachments',
@@ -534,19 +544,26 @@ function createBackgroundIssueSync({
           method: 'POST',
           headers: {
             Accept: 'application/json',
-            'Idempotency-Key': stageOperationId(item.operationId, 'attachment'),
+            'Idempotency-Key': stageOperationId(
+              item.operationId, attachments.length === 1 ? 'attachment' : 'attachment-' + index,
+            ),
           },
-          body: attachmentMultipart(item.attachment),
+          body: attachmentMultipart(attachments[index]),
         },
       );
-      attachmentMarkdown = String(uploaded?.markdown || '');
-      if (!attachmentMarkdown) {
+      const markdown = String(uploaded?.markdown || '');
+      if (!markdown) {
         const error = new Error('The server did not confirm the screenshot upload.');
         error.status = 422;
         throw error;
       }
-      await checkpointClaim(item, current => ({ ...current, deliveredIssue, attachmentMarkdown }));
+      attachmentMarkdowns.push(markdown);
+      await checkpointClaim(item, current => ({
+        ...current, deliveredIssue, attachmentMarkdowns:attachmentMarkdowns.slice(),
+        ...(attachments.length === 1 ? {attachmentMarkdown:markdown} : {}),
+      }));
     }
+    const attachmentMarkdown = attachmentMarkdowns.join('\n\n');
     await requestStage(
       item,
       base + 'api/v1/repos/' + repository + '/issues/' + encodeURIComponent(deliveredIssue.number) + '/comments',
@@ -638,7 +655,8 @@ function createBackgroundIssueSync({
         item.kind === 'update-reply' && item.attachment ? await deliverUpdateScreenshotReply(item) :
         item.attachment && ['issue-comment', 'pull-comment'].includes(item.kind) ?
         await deliverScreenshotComment(item) : item.attachment && !item.kind ?
-          await deliverIssueCapture(item) : await requestStage(item, request.url, request.options);
+          await deliverIssueCapture(item) : item.attachments?.length && !item.kind ?
+            await deliverIssueCapture(item) : await requestStage(item, request.url, request.options);
       if (item.kind === 'issue-close' && delivered?.state !== 'closed') {
         const error = new Error('Issue closure was not confirmed.');
         error.status = 422;

frontend/dashboard.js

@@ -2652,7 +2652,9 @@
           editingOutboxId = hydrated.id;
           issueCapture.saveDraft(hydrated);
           openCreateIssueSheet();
-          if (hydrated.attachment) createIssueAttachmentController.restore(hydrated.attachment);
+          if (hydrated.attachments || hydrated.attachment) {
+            createIssueAttachmentController.restore(hydrated.attachments || hydrated.attachment);
+          }
           else createIssueAttachmentController.clear();
           qs('#create-issue-status').textContent = 'Edit this queued issue, then send again.';
         } catch (error) {
@@ -4935,10 +4937,11 @@
   });
   qs('#save-unfiled-issue').addEventListener('click', async () => {
     try {
+      const evidence = await createIssueAttachmentController.serialize();
       const captureDraft = {
         title: qs('#create-issue-title').value.trim(),
         body: qs('#create-issue-body').value.trim(),
-        attachment: await createIssueAttachmentController.serialize(),
+        ...(Array.isArray(evidence) ? {attachments:evidence} : {attachment:evidence}),
       };
       if (showDraftCapacityDialog(unfiledCaptures)) return;
       const savedCapture = await unfiledCaptures.save(captureDraft);
@@ -5089,9 +5092,10 @@
     qs('#create-issue-status').textContent = createAndStartRequested ?
       'Creating issue and adding it to Today…' : 'Saving for background delivery…';
     try {
+      const evidence = await createIssueAttachmentController.serialize();
       const durableDraft = {
         ...captureDraft,
-        attachment: await createIssueAttachmentController.serialize(),
+        ...(Array.isArray(evidence) ? {attachments:evidence} : {attachment:evidence}),
         ...(rUC ? { sourceCaptureId: rUC } : {}),
         ...(createAndStartRequested ? { completionIntent: 'create-and-start' } : {}),
       };
@@ -5104,7 +5108,7 @@
         await issueOutbox.enqueueDurably(durableDraft));
       const queued = admission.item;
       const fS = dFS.current();
-      if (rUC && (!durableDraft.attachment || admission.background)) {
+      if (rUC && ((!durableDraft.attachment && !durableDraft.attachments) || admission.background)) {
         await unfiledCaptures.completeResume(rUC);
         rUC = '';
       }

frontend/index.html

@@ -754,15 +754,15 @@
         <button id="file-new-issue" type="button">File now</button>
       </div>
       <section class="create-issue-attachment" aria-labelledby="create-issue-attachment-label">
-        <strong id="create-issue-attachment-label">Screenshot <span class="small">Optional · PNG, JPEG, or WebP · 2 MB max</span></strong>
+        <strong id="create-issue-attachment-label">Evidence screenshots <span class="small">Optional · Up to 5 · PNG, JPEG, or WebP · 2 MB each</span></strong>
         <div class="issue-attachment-controls">
-          <label class="issue-attachment-trigger" for="create-issue-attachment">Attach screenshot</label>
-          <input class="visually-hidden" id="create-issue-attachment" type="file" accept="image/png,image/jpeg,image/webp" />
+          <label class="issue-attachment-trigger" for="create-issue-attachment">Add screenshots</label>
+          <input class="visually-hidden" id="create-issue-attachment" type="file" accept="image/png,image/jpeg,image/webp" multiple />
         </div>
         <div class="issue-attachment-preview" id="create-issue-attachment-preview" hidden>
           <img id="create-issue-attachment-image" alt="Selected screenshot preview" />
           <span class="small" id="create-issue-attachment-meta"></span>
-          <button id="remove-create-issue-attachment" type="button">Remove</button>
+          <button id="remove-create-issue-attachment" type="button">Remove latest</button>
         </div>
         <div class="small" id="create-issue-attachment-status" aria-live="polite"></div>
       </section>

frontend/issue-attachment.js

@@ -6,6 +6,8 @@
   'use strict';
 
   const MAX_BYTES = 2 * 1024 * 1024;
+  const MAX_FILES = 5;
+  const MAX_FILES_MESSAGE = 'Up to 5 screenshots. Remove one before adding another.';
   const IMAGE_TYPES = new Set(['image/png', 'image/jpeg', 'image/webp']);
 
   function namedBlob(blob, name) {
@@ -65,6 +67,7 @@
 
   function create(options) {
     const upload = options.upload;
+    const maxFiles = options.maxFiles === MAX_FILES ? MAX_FILES : 1;
     const optimizeSelectedImage = options.optimizeImage || optimizeImage;
     const createOperationId = options.createOperationId || (() => {
       if (typeof globalThis !== 'undefined' && globalThis.crypto?.randomUUID) {
@@ -72,10 +75,7 @@
       }
       return Date.now().toString(36) + '-' + Math.random().toString(36).slice(2);
     });
-    let selected = null;
-    let confirmed = null;
-    let serialized = null;
-    let operationId = null;
+    let selected = [];
     let selectionGeneration = 0;
 
     function commitSelection(file) {
@@ -83,14 +83,18 @@
           file.size <= 0 || file.size > MAX_BYTES) {
         throw new Error('The screenshot could not be optimized below 2 MB. Try cropping it and choose it again.');
       }
-      selected = file;
-      confirmed = null;
-      serialized = null;
-      operationId = createOperationId();
+      if (selected.length >= maxFiles) {
+        if (maxFiles === 1) selected = [];
+        else throw new Error(MAX_FILES_MESSAGE);
+      }
+      selected.push({file, confirmed:null, serialized:null, operationId:createOperationId()});
       return state();
     }
 
     function select(file) {
+      if (selected.length >= maxFiles && maxFiles > 1) {
+        throw new Error(MAX_FILES_MESSAGE);
+      }
       const generation = ++selectionGeneration;
       if (!file || !IMAGE_TYPES.has(file.type)) {
         throw new Error('Choose a PNG, JPEG, or WebP screenshot.');
@@ -109,75 +113,100 @@
 
     function clear() {
       selectionGeneration += 1;
-      selected = null;
-      confirmed = null;
-      serialized = null;
-      operationId = null;
+      selected = [];
+    }
+
+    function remove(index) {
+      const position = Number(index);
+      if (!Number.isInteger(position) || position < 0 || position >= selected.length) return state();
+      selectionGeneration += 1;
+      selected.splice(position, 1);
+      return state();
     }
 
     function restore(value) {
+      if (Array.isArray(value)) {
+        clear();
+        if (value.length > maxFiles) throw new Error(MAX_FILES_MESSAGE);
+        value.forEach(attachment => restoreOne(attachment));
+        return state();
+      }
+      clear();
+      restoreOne(value);
+      return state();
+    }
+
+    function restoreOne(value) {
       const contentType = String(value?.contentType || '');
       const filename = String(value?.filename || '');
       const blob = value?.blob;
       const data = String(value?.data || '');
       if (!blob && !data) {
-        clear();
         throw new Error('The saved screenshot is unavailable. Retry before editing this issue.');
       }
       const padding = (data.match(/=*$/) || [''])[0].length;
       const size = blob ? Number(blob.size) : Math.max(1, Math.floor(data.length * 3 / 4) - padding);
-      select({ name: filename, type: contentType, size, ...(blob ? { blob } : {}) });
-      serialized = blob ? { filename, contentType, blob } : { filename, contentType, data };
-      return state();
+      commitSelection({ name: filename, type: contentType, size, ...(blob ? { blob } : {}) });
+      selected[selected.length - 1].serialized = blob ? { filename, contentType, blob } : { filename, contentType, data };
     }
 
     function state() {
-      return selected ? {
-        name: selected.name,
-        size: selected.size,
-        uploaded: Boolean(confirmed),
-      } : null;
+      const values = selected.map(item => ({
+        name: item.file.name,
+        size: item.file.size,
+        uploaded: Boolean(item.confirmed),
+      }));
+      return values.length > 1 ? values : (values[0] || null);
+    }
+
+    function serializeItem(item) {
+      if (!item.serialized) item.serialized = {
+        filename:item.file.name, contentType:item.file.type, blob:item.file.blob || item.file,
+      };
+      return { ...item.serialized };
     }
 
     async function serialize() {
-      if (!selected) return null;
-      if (!serialized) {
-        serialized = {
-          filename: selected.name,
-          contentType: selected.type,
-          blob: selected.blob || selected,
-        };
-      }
-      return { ...serialized };
+      if (!selected.length) return null;
+      const values = selected.map(serializeItem);
+      return values.length > 1 ? values : values[0];
     }
 
-    async function prepareComment(item, body) {
+    async function prepareComment(target, body) {
       const text = String(body || '').trim();
-      if (!selected) return text;
-      if (!confirmed) {
-        const attachment = await serialize();
-        confirmed = await upload({
-          repository: item.repository,
-          number: item.number,
-          filename: attachment.filename,
-          content_type: attachment.contentType,
-          ...(attachment.blob ? { blob: attachment.blob } : { data: attachment.data }),
-          operation_id: operationId,
-        });
-        if (!confirmed || typeof confirmed.markdown !== 'string' || !confirmed.markdown) {
-          confirmed = null;
-          throw new Error('The server did not confirm the screenshot upload.');
+      if (!selected.length) return text;
+      const markdown = [];
+      for (const evidence of selected) {
+        if (!evidence.confirmed) {
+          const attachment = serializeItem(evidence);
+          evidence.confirmed = await upload({
+            repository: target.repository,
+            number: target.number,
+            filename: attachment.filename,
+            content_type: attachment.contentType,
+            ...(attachment.blob ? { blob: attachment.blob } : { data: attachment.data }),
+            operation_id: evidence.operationId,
+          });
+          if (!evidence.confirmed || typeof evidence.confirmed.markdown !== 'string' || !evidence.confirmed.markdown) {
+            evidence.confirmed = null;
+            throw new Error('The server did not confirm the screenshot upload.');
+          }
         }
+        markdown.push(evidence.confirmed.markdown);
       }
-      return text ? text + '\n\n' + confirmed.markdown : confirmed.markdown;
+      const evidence = markdown.join('\n\n');
+      return text ? text + '\n\n' + evidence : evidence;
     }
 
-    return { select, restore, clear, state, serialize, prepareComment };
+    return { select, restore, remove, clear, state, serialize, prepareComment };
   }
 
   function mount(options) {
-    const controller = create(options);
+    const controller = create({
+      ...options, maxFiles:options.maxFiles || (options.input?.multiple ? MAX_FILES : 1),
+    });
     const clearSelection = controller.clear;
+    const restoreSelection = controller.restore;
     let previewUrl = '';
     let selectionSequence = 0;
 
@@ -208,24 +237,43 @@
     }
 
     options.input.addEventListener('change', event => {
-      const file = event.target.files && event.target.files[0];
+      const files = Array.from(event.target.files || []);
       const sequence = ++selectionSequence;
-      let result;
-      try {
-        result = controller.select(file);
-      } catch (error) {
+      if (!files.length) return;
+      let first;
+      try { first = controller.select(files[0]); }
+      catch (error) {
         options.status.textContent = error.message;
         options.input.value = '';
         return;
       }
-      if (!result || typeof result.then !== 'function') {
-        showPreview(file, false);
+      if (files.length === 1 && (!first || typeof first.then !== 'function')) {
+        showPreview(files[0], false);
         return;
       }
-      options.status.textContent = 'Optimizing screenshot…';
-      options.input.disabled = true;
-      return result.then(() => controller.serialize()).then(value => {
-        if (sequence === selectionSequence) showPreview(value.blob, true);
+      let optimized = Boolean(first && typeof first.then === 'function');
+      if (optimized) {
+        options.status.textContent = 'Optimizing screenshot…';
+        options.input.disabled = true;
+      }
+      const selectAll = files.slice(1).reduce((pending, file) => pending.then(async () => {
+        const result = controller.select(file);
+        if (result && typeof result.then === 'function') {
+          optimized = true;
+          options.status.textContent = 'Optimizing screenshot…';
+          options.input.disabled = true;
+          await result;
+        }
+      }), Promise.resolve(first));
+      return selectAll.then(() => controller.serialize()).then(value => {
+        if (sequence !== selectionSequence) return;
+        const values = Array.isArray(value) ? value : [value];
+        const latest = values[values.length - 1];
+        showPreview(latest.blob, optimized);
+        if (values.length > 1) {
+          options.meta.textContent = values.length + ' screenshots ready · latest: ' + latest.filename;
+          options.status.textContent = values.length + ' screenshots ready to file in this order.';
+        }
       }).catch(error => {
         if (sequence === selectionSequence) {
           options.status.textContent = error.message;
@@ -236,19 +284,40 @@
       });
     });
     options.remove.addEventListener('click', () => {
-      clearPreview();
-      options.status.textContent = options.removedMessage || 'Screenshot removed. Your comment is unchanged.';
+      const current = controller.state();
+      const count = Array.isArray(current) ? current.length : (current ? 1 : 0);
+      if (count <= 1) {
+        clearPreview();
+      } else {
+        controller.remove(count - 1);
+        selectionSequence += 1;
+        controller.serialize().then(value => {
+          const values = Array.isArray(value) ? value : [value];
+          const latest = values[values.length - 1];
+          showPreview(latest.blob, false);
+          options.meta.textContent = values.length + ' screenshots ready · latest: ' + latest.filename;
+        });
+      }
+      options.status.textContent = options.removedMessage || (count > 1 ?
+        'Latest screenshot removed. Your text is unchanged.' :
+        'Screenshot removed. Your comment is unchanged.');
     });
 
     function restorePreview(value) {
       clearPreview();
-      const restored = controller.restore(value);
-      previewUrl = value.blob ? options.createObjectURL(value.blob) :
-        'data:' + value.contentType + ';base64,' + value.data;
+      const restored = restoreSelection(value);
+      const values = Array.isArray(value) ? value : [value];
+      const latest = values[values.length - 1];
+      previewUrl = latest.blob ? options.createObjectURL(latest.blob) :
+        'data:' + latest.contentType + ';base64,' + latest.data;
       options.image.src = previewUrl;
-      options.meta.textContent = restored.name + ' · ' + Math.ceil(restored.size / 1024) + ' KB';
+      options.meta.textContent = values.length > 1 ?
+        values.length + ' screenshots ready · latest: ' + latest.filename :
+        restored.name + ' · ' + Math.ceil(restored.size / 1024) + ' KB';
       options.preview.hidden = false;
-      options.status.textContent = options.readyMessage || 'Screenshot ready to upload with this comment.';
+      options.status.textContent = values.length > 1 ?
+        values.length + ' screenshots ready to file in this order.' :
+        (options.readyMessage || 'Screenshot ready to upload with this comment.');
       return restored;
     }
 

frontend/issue-outbox.js

@@ -17,6 +17,16 @@ function createIssueOutbox({ storage, fetchJson, coordinator, backgroundSync, ge
     return { filename, contentType, data };
   }
 
+  function captureAttachments(values) {
+    if (!Array.isArray(values)) return undefined;
+    if (values.length > 5) throw new Error('You can attach up to 5 screenshots.');
+    const attachments = values.map(captureAttachment);
+    if (attachments.some(value => !value)) {
+      throw new Error('Some screenshots are unavailable. Choose them again before queueing.');
+    }
+    return attachments.length ? attachments : undefined;
+  }
+
   function read() {
     try {
       const record = JSON.parse(storage?.getItem(storageKey) || 'null');
@@ -56,6 +66,8 @@ function createIssueOutbox({ storage, fetchJson, coordinator, backgroundSync, ge
     if (draft?.completionIntent === 'create-and-start') item.completionIntent = 'create-and-start';
     const attachment = captureAttachment(draft?.attachment);
     if (attachment) item.attachment = attachment;
+    const attachments = captureAttachments(draft?.attachments);
+    if (attachments) item.attachments = attachments;
     item.operationId = item.id;
     if (Number.isInteger(Number(draft?.milestoneId)) && Number(draft.milestoneId) > 0) {
       item.milestoneId = Number(draft.milestoneId);
@@ -65,14 +77,20 @@ function createIssueOutbox({ storage, fetchJson, coordinator, backgroundSync, ge
   }
 
   function localIndexItem(item) {
-    if (!item?.attachment?.data && !item?.attachment?.blob) return item;
+    const hasAttachmentBytes = item?.attachment?.data || item?.attachment?.blob;
+    const hasBundleBytes = Array.isArray(item?.attachments) &&
+      item.attachments.some(value => value?.data || value?.blob);
+    if (!hasAttachmentBytes && !hasBundleBytes) return item;
     return {
       ...item,
-      attachment: {
+      ...(hasAttachmentBytes ? {attachment: {
         filename: item.attachment.filename,
         contentType: item.attachment.contentType,
         stored: true,
-      },
+      }} : {}),
+      ...(Array.isArray(item.attachments) ? {attachments:item.attachments.map(value => ({
+        filename:value.filename, contentType:value.contentType, stored:true,
+      }))} : {}),
     };
   }
 
@@ -120,16 +138,25 @@ function createIssueOutbox({ storage, fetchJson, coordinator, backgroundSync, ge
   async function hydrateForEdit(id) {
     const item = read().find(candidate => candidate.id === id);
     if (!item) return null;
-    if (!item.attachment?.stored || item.attachment.data || item.attachment.blob) return { ...item };
+    const storedBundle = Array.isArray(item.attachments) && item.attachments.some(value => value?.stored);
+    const storedAttachment = item.attachment?.stored && !item.attachment.data && !item.attachment.blob;
+    if (!storedAttachment && !storedBundle) return { ...item };
     if (!backgroundSync?.get) {
       throw new Error('The saved screenshot is unavailable. Retry before editing this issue.');
     }
     const durable = await backgroundSync.get(id);
     const attachment = captureAttachment(durable?.attachment);
-    if ((!attachment?.data && !attachment?.blob) || durable?.operationId !== item.operationId) {
+    const attachments = captureAttachments(durable?.attachments);
+    if (durable?.operationId !== item.operationId ||
+        (storedAttachment && (!attachment?.data && !attachment?.blob)) ||
+        (storedBundle && (!attachments || attachments.length !== item.attachments.length))) {
       throw new Error('The saved screenshot is unavailable. Retry before editing this issue.');
     }
-    return { ...item, attachment };
+    return {
+      ...item,
+      ...(attachment ? {attachment} : {}),
+      ...(attachments ? {attachments} : {}),
+    };
   }
 
   function prepareUpdate(id, draft) {
@@ -145,7 +172,9 @@ function createIssueOutbox({ storage, fetchJson, coordinator, backgroundSync, ge
       const nextDueDate = /^\d{4}-\d{2}-\d{2}$/.test(String(draft?.dueDate || ''))
         ? String(draft.dueDate) : undefined;
       const nextAttachment = captureAttachment(draft?.attachment);
-      const attachmentChanged = JSON.stringify(item.attachment || null) !== JSON.stringify(nextAttachment || null);
+      const nextAttachments = captureAttachments(draft?.attachments);
+      const attachmentChanged = JSON.stringify(item.attachment || null) !== JSON.stringify(nextAttachment || null) ||
+        JSON.stringify(item.attachments || null) !== JSON.stringify(nextAttachments || null);
       const changed = item.repository !== nextRepository || item.title !== nextTitle || item.body !== nextBody
         || JSON.stringify(item.labelIds || []) !== JSON.stringify(nextLabelIds)
         || item.milestoneId !== nextMilestoneId || item.dueDate !== nextDueDate
@@ -154,7 +183,8 @@ function createIssueOutbox({ storage, fetchJson, coordinator, backgroundSync, ge
         ...item,
         repository: nextRepository, title: nextTitle,
         body: nextBody, labelIds: nextLabelIds,
-        milestoneId: nextMilestoneId, dueDate: nextDueDate, attachment: nextAttachment,
+        milestoneId: nextMilestoneId, dueDate: nextDueDate,
+        attachment: nextAttachment, attachments:nextAttachments,
         operationId: changed ? String(operationId()).slice(0, 128) : item.operationId,
         status: 'queued',
       };
@@ -163,7 +193,11 @@ function createIssueOutbox({ storage, fetchJson, coordinator, backgroundSync, ge
       if (nextMilestoneId === undefined) delete updated.milestoneId;
       if (nextDueDate === undefined) delete updated.dueDate;
       if (nextAttachment === undefined) delete updated.attachment;
-      if (attachmentChanged) delete updated.attachmentMarkdown;
+      if (nextAttachments === undefined) delete updated.attachments;
+      if (attachmentChanged) {
+        delete updated.attachmentMarkdown;
+        delete updated.attachmentMarkdowns;
+      }
       delete updated.error;
       delete updated.deliveryState;
       return updated;

frontend/service-worker.js

@@ -115,17 +115,28 @@ async function acceptSharedContent(request) {
   const images = form.getAll('image').filter(value => typeof value !== 'string' && value?.size > 0);
   let marker = '';
   await sharedAttachmentStore.delete(SHARED_IMAGE_ID).catch(() => {});
-  if (images.length > 1) marker = 'multiple';
-  else if (images.length === 1) {
-    const image = images[0];
-    if (!SHARED_IMAGE_TYPES.has(String(image.type || '')) || image.size > MAX_SHARED_IMAGE_BYTES) {
+  if (images.length > 5) marker = 'multiple';
+  else if (images.length > 0) {
+    const supported = images.every(image =>
+      SHARED_IMAGE_TYPES.has(String(image.type || '')) && image.size <= MAX_SHARED_IMAGE_BYTES
+    );
+    if (!supported) {
       marker = 'unsupported';
-    } else {
+    } else if (images.length === 1) {
+      const image = images[0];
       await sharedAttachmentStore.put(SHARED_IMAGE_ID, {
         filename:String(image.name || 'shared-screenshot').slice(0, 255),
         contentType:String(image.type), blob:image,
       });
       marker = 'image';
+    } else {
+      await sharedAttachmentStore.put(SHARED_IMAGE_ID, {
+        attachments:images.map(image => ({
+          filename:String(image.name || 'shared-screenshot').slice(0, 255),
+          contentType:String(image.type), blob:image,
+        })),
+      });
+      marker = 'images';
     }
   }
   const target = new URL(BASE, self.location.origin);

frontend/shared-image-capture.js

@@ -10,11 +10,23 @@
 
   async function consume({marker, store, restore, status = () => {}}) {
     if (!marker) return false;
-    if (marker !== 'image') {
+    if (!['image', 'images'].includes(marker)) {
       status('Share one PNG, JPEG, or WebP screenshot.');
       return false;
     }
     const value = await store?.get(RECORD_ID);
+    const attachments = Array.isArray(value?.attachments) ? value.attachments : null;
+    if (marker === 'images') {
+      if (!attachments?.length || attachments.length > 5 || attachments.some(attachment =>
+        !attachment?.blob || !attachment.filename || !TYPES.has(String(attachment.contentType || '')))) {
+        status('The shared screenshots are unavailable. Share them again.');
+        return false;
+      }
+      restore(attachments);
+      await store.delete(RECORD_ID);
+      status(attachments.length + ' shared screenshots ready to file with this issue.');
+      return true;
+    }
     if (!value?.blob || !value.filename || !TYPES.has(String(value.contentType || ''))) {
       status('The shared screenshot is unavailable. Share it again.');
       return false;

frontend/unfiled-captures.js

@@ -42,19 +42,35 @@ function createUnfiledCaptures({
     const ownerLogin = String(getCaptureLogin() || '').trim();
     if (!ownerLogin) throw new Error('Offline identity is unavailable. Reconnect once before saving private work.');
     const attachment = note?.attachment;
+    const attachments = note?.attachments;
+    if (Array.isArray(attachments) && attachments.length > 5) {
+      throw new Error('You can attach up to 5 screenshots.');
+    }
+    const validAttachments = Array.isArray(attachments) && attachments.length > 0 &&
+      attachments.every(value => value?.blob && value?.filename &&
+        ['image/png', 'image/jpeg', 'image/webp'].includes(String(value?.contentType || '')));
+    if (attachments && !validAttachments) {
+      throw new Error('One or more screenshots are unavailable. Choose them again before saving.');
+    }
     const hasAttachment = Boolean(attachment?.blob && attachment?.filename &&
       ['image/png', 'image/jpeg', 'image/webp'].includes(String(attachment?.contentType || '')));
     if (attachment && !hasAttachment) throw new Error('The screenshot is unavailable. Choose it again before saving.');
-    if (hasAttachment && !attachmentStore) {
+    if ((hasAttachment || validAttachments) && !attachmentStore) {
       throw new Error('Screenshot storage is unavailable. Your capture is still open; retry after reloading.');
     }
-    return {title, body, ownerLogin, attachment, hasAttachment};
+    return {
+      title, body, ownerLogin, attachment, attachments,
+      hasAttachment:hasAttachment || validAttachments,
+      attachmentCount:validAttachments ? attachments.length : (hasAttachment ? 1 : 0),
+    };
   }
 
   function persist(prepared, existing, removed = null) {
     const item = {
       id:String(createId()), ownerLogin:prepared.ownerLogin, title:prepared.title, body:prepared.body,
-      savedAt:Number(now()), ...(prepared.hasAttachment ? {hasAttachment:true} : {}),
+      savedAt:Number(now()), ...(prepared.hasAttachment ? {
+        hasAttachment:true, attachmentCount:prepared.attachmentCount,
+      } : {}),
     };
     const items = [item, ...existing.filter(candidate => candidate.id !== item.id)];
     const writeItems = () => {
@@ -66,7 +82,12 @@ function createUnfiledCaptures({
       return item;
     };
     const stage = prepared.hasAttachment
-      ? Promise.resolve(attachmentStore.put(item.id, {
+      ? Promise.resolve(attachmentStore.put(item.id, prepared.attachments ? {
+        attachments:prepared.attachments.map(value => ({
+          filename:String(value.filename).slice(0, 255),
+          contentType:String(value.contentType), blob:value.blob,
+        })),
+      } : {
         filename:String(prepared.attachment.filename).slice(0, 255),
         contentType:String(prepared.attachment.contentType), blob:prepared.attachment.blob,
       }))
@@ -137,6 +158,13 @@ function createUnfiledCaptures({
     if (!item.hasAttachment) return draft;
     if (!attachmentStore) throw new Error('The saved screenshot is unavailable. Retry after reloading.');
     return Promise.resolve(attachmentStore.get(id)).then(attachment => {
+      if (Array.isArray(attachment?.attachments) && attachment.attachments.length) {
+        if (attachment.attachments.length > 5 || attachment.attachments.some(value =>
+          !value?.blob || !value?.filename || !value?.contentType)) {
+          throw new Error('The saved screenshots are unavailable. Keep this Draft and retry.');
+        }
+        return {...draft, attachments:attachment.attachments};
+      }
       if (!attachment?.blob || !attachment?.filename || !attachment?.contentType) {
         throw new Error('The saved screenshot is unavailable. Keep this Draft and retry.');
       }