From 0d5fa13d65fa982f3ba17d71c686dae5d4904032 Mon Sep 17 00:00:00 2001
From: timmy <timmy@stackchain.ai>
Date: Sun, 16 Aug 2026 07:28:10 +0000
Subject: [PATCH] feat: edit photos in conversation replies (Closes #947)

---
 README.md                           |  2 +-
 frontend/dashboard.css              |  2 +-
 frontend/dashboard.js               | 39 +++++++++++++++++++++++++++++
 frontend/index.html                 |  9 ++++---
 frontend/issue-attachment.js        |  3 ++-
 frontend/issue-evidence-editor.js   |  1 +
 tests/test_issue_evidence_editor.py | 32 +++++++++++++++++++++++
 7 files changed, 82 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 6a2bbf4..14ea875 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ threads, create and self-assign issues, discover, claim, and release issue assig
 list repository labels and open milestones, set or clear due dates on assigned issues, create issue comments, close assigned issues,
 inspect/comment on assigned pull
 requests, merge assigned pull requests, and submit pull-request reviews.
-Assigned-issue, assigned-pull-request, and unread-update conversation composers accept an ordered bundle of up to five PNG, JPEG, or WebP photos. Repeated camera captures append to the bundle, the gallery picker accepts multiple images, and each composer automatically optimizes oversized screenshots on-device to fit the 2 MB upload boundary.
+Assigned-issue, assigned-pull-request, and unread-update conversation composers accept an ordered bundle of up to five PNG, JPEG, or WebP photos. Repeated camera captures append to the bundle, the gallery picker accepts multiple images, and each composer automatically optimizes oversized screenshots on-device to fit the 2 MB upload boundary. Before sending, the selected conversation photo can use the same touch editor as New issue evidence to crop, privacy-redact, highlight, or add an arrow; Apply replaces only that flattened derivative while preserving its caption and bundle position, and Cancel leaves the original unchanged.
 For online delivery, every photo uploads before the comment is posted to the exact conversation target, producing one ordered Markdown comment or reply; validation or upload failures keep the typed text and removable preview available for retry. Offline photo conversations admit every image Blob to IndexedDB before confirmation, keep only bounded metadata in localStorage, and checkpoint each upload separately so reconnect resumes at the first unconfirmed photo without duplicating an upload, comment, reply, or reply-and-read transition. The mobile **New issue** capture-first stage accepts an ordered evidence bundle of up to
 five PNG, JPEG, or WebP screenshots before a repository is chosen, optimizing each image independently
 to the 2 MB boundary. **Save to Drafts** durably writes every optimized Blob to IndexedDB before
diff --git a/frontend/dashboard.css b/frontend/dashboard.css
index ae641f2..7cf33a7 100644
--- a/frontend/dashboard.css
+++ b/frontend/dashboard.css
@@ -704,7 +704,7 @@ textarea { resize: vertical; min-height: 120px; }
 .conversation-evidence-review { grid-template-columns:1fr; width:100%; min-width:0; box-sizing:border-box; overflow-x:hidden; }
 .conversation-evidence-review > img { grid-row:auto; width:100%; height:auto; max-height:280px; }
 .conversation-evidence-review .issue-evidence-tray { overflow-x:auto; }
-.conversation-evidence-review .issue-evidence-review-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
+.conversation-evidence-review .issue-evidence-review-actions { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .conversation-evidence-review .issue-evidence-review-actions button { min-width:44px; min-height:44px; width:100%; }
 @media (max-width:390px) {
   .conversation-evidence-review .issue-evidence-review-actions { grid-template-columns:1fr; }
diff --git a/frontend/dashboard.js b/frontend/dashboard.js
index 6cc6442..0b256d3 100644
--- a/frontend/dashboard.js
+++ b/frontend/dashboard.js
@@ -508,6 +508,19 @@
     note: qs('#issue-attachment-note'),
     noteLabel: qs('#issue-attachment-note-label'),
     status: qs('#issue-comment-status'),
+    editor: {
+      document,
+      edit: qs('#edit-issue-attachment'),
+      dialog: qs('#issue-evidence-editor'),
+      canvas: qs('#issue-evidence-editor-canvas'),
+      exportCanvas: qs('#issue-evidence-editor-export'),
+      crop: qs('#crop-issue-evidence'), redact: qs('#redact-issue-evidence'),
+      highlight: qs('#highlight-issue-evidence'), arrow: qs('#arrow-issue-evidence'),
+      undo: qs('#undo-issue-evidence-edit'), reset: qs('#reset-issue-evidence-edit'),
+      cancel: qs('#cancel-issue-evidence-edit'), apply: qs('#apply-issue-evidence-edit'),
+      status: qs('#issue-evidence-editor-status'),
+      appliedMessage: 'Edited photo flattened and ready to send.',
+    },
     createObjectURL: file => URL.createObjectURL(file),
     revokeObjectURL: url => URL.revokeObjectURL(url),
     readDataUrl: file => new Promise((resolve, reject) => {
@@ -545,6 +558,19 @@
     note: qs('#pull-attachment-note'),
     noteLabel: qs('#pull-attachment-note-label'),
     status: qs('#pull-comment-status'),
+    editor: {
+      document,
+      edit: qs('#edit-pull-attachment'),
+      dialog: qs('#issue-evidence-editor'),
+      canvas: qs('#issue-evidence-editor-canvas'),
+      exportCanvas: qs('#issue-evidence-editor-export'),
+      crop: qs('#crop-issue-evidence'), redact: qs('#redact-issue-evidence'),
+      highlight: qs('#highlight-issue-evidence'), arrow: qs('#arrow-issue-evidence'),
+      undo: qs('#undo-issue-evidence-edit'), reset: qs('#reset-issue-evidence-edit'),
+      cancel: qs('#cancel-issue-evidence-edit'), apply: qs('#apply-issue-evidence-edit'),
+      status: qs('#issue-evidence-editor-status'),
+      appliedMessage: 'Edited photo flattened and ready to send.',
+    },
     createObjectURL: file => URL.createObjectURL(file),
     revokeObjectURL: url => URL.revokeObjectURL(url),
     upload: payload => {
@@ -575,6 +601,19 @@
     status: qs('#update-reply-status'),
     readyMessage: 'Screenshot ready to send with this reply.',
     removedMessage: 'Screenshot removed. Your reply is unchanged.',
+    editor: {
+      document,
+      edit: qs('#edit-update-reply-attachment'),
+      dialog: qs('#issue-evidence-editor'),
+      canvas: qs('#issue-evidence-editor-canvas'),
+      exportCanvas: qs('#issue-evidence-editor-export'),
+      crop: qs('#crop-issue-evidence'), redact: qs('#redact-issue-evidence'),
+      highlight: qs('#highlight-issue-evidence'), arrow: qs('#arrow-issue-evidence'),
+      undo: qs('#undo-issue-evidence-edit'), reset: qs('#reset-issue-evidence-edit'),
+      cancel: qs('#cancel-issue-evidence-edit'), apply: qs('#apply-issue-evidence-edit'),
+      status: qs('#issue-evidence-editor-status'),
+      appliedMessage: 'Edited photo flattened and ready to send.',
+    },
     createObjectURL: file => URL.createObjectURL(file),
     revokeObjectURL: url => URL.revokeObjectURL(url),
     upload: payload => fetchReviewJson(
diff --git a/frontend/index.html b/frontend/index.html
index 00d7d44..d59c808 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -677,6 +677,7 @@
         </label>
         <div class="issue-evidence-review-actions" aria-label="Reorder selected photo">
           <button id="move-issue-attachment-earlier" type="button">Move earlier</button>
+          <button id="edit-issue-attachment" type="button">Edit photo</button>
           <button id="remove-issue-attachment" type="button">Remove selected</button>
           <button id="move-issue-attachment-later" type="button">Move later</button>
         </div>
@@ -954,10 +955,11 @@
       <div id="create-issue-capture-status" class="small" aria-live="assertive"></div>
     </form>
   </section>
-  <section class="issue-evidence-editor" id="issue-evidence-editor" role="dialog" aria-modal="true" aria-labelledby="issue-evidence-editor-heading" hidden>
+</div>
+<section class="issue-evidence-editor" id="issue-evidence-editor" role="dialog" aria-modal="true" aria-labelledby="issue-evidence-editor-heading" hidden>
     <div class="issue-evidence-editor-panel">
       <header>
-        <div><h3 id="issue-evidence-editor-heading">Edit screenshot evidence</h3><span class="small">Edits stay on this device until you file.</span></div>
+        <div><h3 id="issue-evidence-editor-heading">Edit selected photo</h3><span class="small">Edits stay on this device until you send or file.</span></div>
         <button id="cancel-issue-evidence-edit" type="button">Cancel</button>
       </header>
       <canvas id="issue-evidence-editor-canvas" role="img" aria-label="Screenshot editing canvas. Drag to crop, redact, highlight, or point with an arrow."></canvas>
@@ -974,7 +976,6 @@
       <button class="issue-evidence-editor-apply" id="apply-issue-evidence-edit" type="button">Apply flattened edit</button>
     </div>
   </section>
-</div>
 
 <section class="issue-filing-review" id="issue-filing-review" role="dialog" aria-modal="true" aria-labelledby="issue-filing-review-heading" hidden>
   <div class="issue-filing-review-panel">
@@ -1077,6 +1078,7 @@
         </label>
         <div class="issue-evidence-review-actions" aria-label="Reorder selected photo">
           <button id="move-update-reply-attachment-earlier" type="button">Move earlier</button>
+          <button id="edit-update-reply-attachment" type="button">Edit photo</button>
           <button id="remove-update-reply-attachment" type="button">Remove selected</button>
           <button id="move-update-reply-attachment-later" type="button">Move later</button>
         </div>
@@ -1158,6 +1160,7 @@
         </label>
         <div class="issue-evidence-review-actions" aria-label="Reorder selected photo">
           <button id="move-pull-attachment-earlier" type="button">Move earlier</button>
+          <button id="edit-pull-attachment" type="button">Edit photo</button>
           <button id="remove-pull-attachment" type="button">Remove selected</button>
           <button id="move-pull-attachment-later" type="button">Move later</button>
         </div>
diff --git a/frontend/issue-attachment.js b/frontend/issue-attachment.js
index 0ce89ba..2e1d9f1 100644
--- a/frontend/issue-attachment.js
+++ b/frontend/issue-attachment.js
@@ -377,7 +377,8 @@
         onApplied: async index => {
           const value = await controller.serialize();
           review.render(value, index);
-          options.status.textContent = 'Edited screenshot flattened and ready to file.';
+          options.status.textContent = options.editor.appliedMessage ||
+            'Edited screenshot flattened and ready to file.';
         },
       });
       options.editor.edit.disabled = !controller.state();
diff --git a/frontend/issue-evidence-editor.js b/frontend/issue-evidence-editor.js
index cd05dca..4caa577 100644
--- a/frontend/issue-evidence-editor.js
+++ b/frontend/issue-evidence-editor.js
@@ -200,6 +200,7 @@
       if (source && model) paint({source, model, canvas:options.canvas, maxDimension:1600});
     }
     function close() {
+      if (!source && !model) return;
       options.dialog.hidden = true;
       if (source && typeof source.close === 'function') source.close();
       source = null;
diff --git a/tests/test_issue_evidence_editor.py b/tests/test_issue_evidence_editor.py
index acded04..c34e554 100644
--- a/tests/test_issue_evidence_editor.py
+++ b/tests/test_issue_evidence_editor.py
@@ -151,3 +151,35 @@ def test_mobile_editor_dialog_is_accessible_touch_sized_and_available_offline():
     assert "min-height:44px" in css
     assert "max-width:100%" in css
     assert "overflow-x:hidden" in css
+
+
+def test_mobile_conversation_photo_editor_is_available_in_every_composer():
+    html = INDEX.read_text()
+    dashboard = (ROOT / "frontend" / "dashboard.js").read_text()
+    css = CSS.read_text()
+
+    composers = (
+        ("issue-attachment", "issueAttachmentController"),
+        ("pull-attachment", "pullAttachmentController"),
+        ("update-reply-attachment", "updateReplyAttachmentController"),
+    )
+    for attachment_id, controller in composers:
+        assert f'id="edit-{attachment_id}" type="button">Edit photo</button>' in html
+        mount = dashboard.split(
+            f"const {controller} = issueAttachment.mount({{", 1
+        )[1].split("\n  });", 1)[0]
+        assert f"edit: qs('#edit-{attachment_id}')" in mount
+        assert "dialog: qs('#issue-evidence-editor')" in mount
+        assert "appliedMessage: 'Edited photo flattened and ready to send.'" in mount
+
+    assert '<h3 id="issue-evidence-editor-heading">Edit selected photo</h3>' in html
+    assert "Edits stay on this device until you send or file." in html
+    assert (
+        '</form>\n  </section>\n</div>\n'
+        '<section class="issue-evidence-editor" id="issue-evidence-editor"'
+    ) in html, "the shared editor must not be hidden inside the New issue sheet"
+    assert (
+        ".conversation-evidence-review .issue-evidence-review-actions "
+        "{ grid-template-columns:repeat(4,minmax(0,1fr)); }"
+    ) in css
+    assert "@media (max-width:390px)" in css