reviw 0.16.3 → 0.17.0

package/cli.cjs

@@ -946,7 +946,7 @@ function diffHtmlTemplate(diffData, history = []) {
     }
     .theme-toggle:hover { background: var(--border); }
 
-    .wrap { padding: 16px 20px 60px; max-width: 1200px; margin: 0 auto; }
+    .wrap { padding: 16px 20px 16px; max-width: 1200px; margin: 0 auto; }
     .diff-container {
       background: var(--panel);
       border: 1px solid var(--border);
@@ -1140,19 +1140,8 @@ function diffHtmlTemplate(diffData, history = []) {
     .comment-list li:hover { color: var(--accent); }
     .comment-list .hint { color: var(--muted); font-size: 11px; margin-top: 8px; }
     .comment-list.collapsed { opacity: 0; pointer-events: none; transform: translateY(8px); }
-    .comment-toggle {
-      position: fixed;
-      right: 16px;
-      bottom: 16px;
-      padding: 8px 12px;
-      border-radius: 6px;
-      border: 1px solid var(--border);
-      background: var(--panel-alpha);
-      color: var(--text);
-      cursor: pointer;
-      font-size: 12px;
-    }
-    .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: var(--selected-bg); border: 1px solid var(--border); font-size: 12px; }
+    .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: var(--selected-bg); border: 1px solid var(--border); font-size: 12px; cursor: pointer; transition: background 150ms ease, border-color 150ms ease; }
+    .pill:hover { background: var(--hover-bg); border-color: var(--accent); }
     .pill strong { font-weight: 700; }
 
     .modal-overlay {
@@ -1213,6 +1202,15 @@ function diffHtmlTemplate(diffData, history = []) {
     }
     .modal-actions button:hover { background: var(--border); }
     .modal-actions button.primary { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
+    .image-attach-area { margin: 12px 0; }
+    .image-attach-area label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
+    .image-attach-area.image-attach-small { margin: 8px 0; }
+    .image-attach-area.image-attach-small label { font-size: 11px; }
+    .image-preview-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 24px; }
+    .image-preview-item { position: relative; }
+    .image-preview-item img { max-width: 80px; max-height: 60px; border-radius: 4px; border: 1px solid var(--border); object-fit: cover; }
+    .image-preview-item .remove-image { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--error, #ef4444); color: #fff; border: none; cursor: pointer; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; }
+    .image-preview-item .remove-image:hover { background: #dc2626; }
 
     .modal-checkboxes { margin: 12px 0; }
     .modal-checkboxes label {
@@ -1458,7 +1456,7 @@ function diffHtmlTemplate(diffData, history = []) {
     <div class="meta">
       <h1>${projectRoot ? `<span class="title-path">${projectRoot}</span>` : ""}<span class="title-file">${relativePath}</span></h1>
       <span class="badge">${fileCount} file${fileCount !== 1 ? "s" : ""} changed</span>
-      <span class="pill">Comments <strong id="comment-count">0</strong></span>
+      <button class="pill" id="pill-comments" title="Toggle comment panel">Comments <strong id="comment-count">0</strong></button>
     </div>
     <div class="actions">
       <button class="history-toggle" id="history-toggle" title="Review History">☰</button>
@@ -1492,17 +1490,20 @@ function diffHtmlTemplate(diffData, history = []) {
     </header>
     <div id="cell-preview" style="font-size:11px; color: var(--muted); margin-bottom:8px; white-space: pre-wrap; max-height: 60px; overflow: hidden;"></div>
     <textarea id="comment-input" placeholder="Enter your comment"></textarea>
+    <div class="image-attach-area image-attach-small" id="comment-image-area">
+      <label>📎 Image (⌘V, max 1)</label>
+      <div class="image-preview-list" id="comment-image-preview"></div>
+    </div>
     <div class="actions">
       <button class="primary" id="save-comment">Save</button>
     </div>
   </div>
 
-  <aside class="comment-list">
+  <aside class="comment-list collapsed">
     <h3>Comments</h3>
     <ol id="comment-list"></ol>
     <p class="hint">Click "Submit & Exit" to finish review.</p>
   </aside>
-  <button class="comment-toggle" id="comment-toggle">Comments (0)</button>
 
   <div class="modal-overlay" id="submit-modal">
     <div class="modal-dialog">
@@ -1510,6 +1511,10 @@ function diffHtmlTemplate(diffData, history = []) {
       <p class="modal-summary" id="modal-summary"></p>
       <label for="global-comment">Overall comment (optional)</label>
       <textarea id="global-comment" placeholder="Add a summary or overall feedback..."></textarea>
+      <div class="image-attach-area" id="submit-image-area">
+        <label>📎 Attach images (⌘V to paste, max 5)</label>
+        <div class="image-preview-list" id="submit-image-preview"></div>
+      </div>
       <div class="modal-checkboxes">
         <label><input type="checkbox" id="prompt-subagents" checked /> 🤖 Delegate to sub-agents (implement, verify, report)</label>
         <label><input type="checkbox" id="prompt-reviw" checked /> 👁️ Open in REVIW next time</label>
@@ -1716,7 +1721,7 @@ function diffHtmlTemplate(diffData, history = []) {
     const commentList = document.getElementById('comment-list');
     const commentCount = document.getElementById('comment-count');
     const commentPanel = document.querySelector('.comment-list');
-    const commentToggle = document.getElementById('comment-toggle');
+    const pillComments = document.getElementById('pill-comments');
 
     const comments = {};
     let currentKey = null;
@@ -1726,6 +1731,81 @@ function diffHtmlTemplate(diffData, history = []) {
     let dragEnd = null;
     let selection = null;
 
+    // Image attachment state
+    const submitImages = []; // base64 images for submit modal (max 5)
+    let currentCommentImage = null; // base64 image for current comment (max 1)
+
+    // Image attachment handlers
+    const submitImagePreview = document.getElementById('submit-image-preview');
+    const commentImagePreview = document.getElementById('comment-image-preview');
+
+    function addImageToPreview(container, images, maxCount, base64) {
+      if (images.length >= maxCount) return;
+      images.push(base64);
+      renderImagePreviews(container, images);
+    }
+
+    function renderImagePreviews(container, images) {
+      container.innerHTML = '';
+      images.forEach((base64, idx) => {
+        const item = document.createElement('div');
+        item.className = 'image-preview-item';
+        item.innerHTML = \`<img src="\${base64}" alt="attached image"><button class="remove-image" data-idx="\${idx}">×</button>\`;
+        item.querySelector('.remove-image').addEventListener('click', () => {
+          images.splice(idx, 1);
+          renderImagePreviews(container, images);
+        });
+        container.appendChild(item);
+      });
+    }
+
+    function renderCommentImagePreview() {
+      commentImagePreview.innerHTML = '';
+      if (currentCommentImage) {
+        const item = document.createElement('div');
+        item.className = 'image-preview-item';
+        item.innerHTML = \`<img src="\${currentCommentImage}" alt="attached image"><button class="remove-image">×</button>\`;
+        item.querySelector('.remove-image').addEventListener('click', () => {
+          currentCommentImage = null;
+          renderCommentImagePreview();
+        });
+        commentImagePreview.appendChild(item);
+      }
+    }
+
+    // Global paste handler
+    document.addEventListener('paste', (e) => {
+      const items = e.clipboardData?.items;
+      if (!items) return;
+      for (const item of items) {
+        if (item.type.startsWith('image/')) {
+          e.preventDefault();
+          const file = item.getAsFile();
+          const reader = new FileReader();
+          reader.onload = () => {
+            const base64 = reader.result;
+            const activeEl = document.activeElement;
+            // Prioritize comment card if its textarea has focus
+            if (card.style.display !== 'none' && activeEl === commentInput) {
+              if (!currentCommentImage) {
+                currentCommentImage = base64;
+                renderCommentImagePreview();
+              }
+            } else if (submitModal.classList.contains('visible')) {
+              addImageToPreview(submitImagePreview, submitImages, 5, base64);
+            } else if (card.style.display !== 'none') {
+              if (!currentCommentImage) {
+                currentCommentImage = base64;
+                renderCommentImagePreview();
+              }
+            }
+          };
+          reader.readAsDataURL(file);
+          break;
+        }
+      }
+    });
+
     function makeKey(start, end) {
       return start === end ? String(start) : (start + '-' + end);
     }
@@ -1947,7 +2027,6 @@ function diffHtmlTemplate(diffData, history = []) {
       commentList.innerHTML = '';
       const items = Object.values(comments).sort((a, b) => (a.startRow ?? a.row) - (b.startRow ?? b.row));
       commentCount.textContent = items.length;
-      commentToggle.textContent = 'Comments (' + items.length + ')';
       if (items.length === 0) panelOpen = false;
       commentPanel.classList.toggle('collapsed', !panelOpen || items.length === 0);
       if (!items.length) {
@@ -1968,7 +2047,7 @@ function diffHtmlTemplate(diffData, history = []) {
       });
     }
 
-    commentToggle.addEventListener('click', () => {
+    pillComments.addEventListener('click', () => {
       panelOpen = !panelOpen;
       if (panelOpen && Object.keys(comments).length === 0) panelOpen = false;
       commentPanel.classList.toggle('collapsed', !panelOpen);
@@ -1980,7 +2059,7 @@ function diffHtmlTemplate(diffData, history = []) {
       const range = keyToRange(currentKey);
       if (!range) return;
       const rowIdx = range.start;
-      if (text) {
+      if (text || currentCommentImage) {
         if (range.start === range.end) {
           comments[currentKey] = { row: rowIdx, text, content: DATA[rowIdx]?.content || '' };
         } else {
@@ -1992,11 +2071,16 @@ function diffHtmlTemplate(diffData, history = []) {
             content: DATA.slice(range.start, range.end + 1).map(r => r?.content || '').join('\\n')
           };
         }
+        if (currentCommentImage) {
+          comments[currentKey].image = currentCommentImage;
+        }
         setDotRange(range.start, range.end, true);
       } else {
         delete comments[currentKey];
         setDotRange(range.start, range.end, false);
       }
+      currentCommentImage = null;
+      renderCommentImagePreview();
       refreshList();
       closeCard();
       saveToStorage();
@@ -2112,17 +2196,28 @@ function diffHtmlTemplate(diffData, history = []) {
     function payload(reason) {
       const data = { file: FILE_NAME, mode: MODE, submittedBy: reason, submittedAt: new Date().toISOString(), comments: Object.values(comments) };
       if (globalComment.trim()) data.summary = globalComment.trim();
+      if (submitImages.length > 0) data.summaryImages = submitImages;
       const prompts = getSelectedPrompts();
       if (prompts.length > 0) data.prompts = prompts;
       return data;
     }
-    function sendAndExit(reason = 'button') {
+    async function sendAndExit(reason = 'button') {
       if (sent) return;
       sent = true;
       clearStorage();
       const p = payload(reason);
       saveToHistory(p);
-      navigator.sendBeacon('/exit', new Blob([JSON.stringify(p)], { type: 'application/json' }));
+      try {
+        // Use fetch with keepalive to handle large payloads (images)
+        await fetch('/exit', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(p),
+          // Note: keepalive has 64KB limit like sendBeacon, so we don't use it for large payloads
+        });
+      } catch (err) {
+        console.error('Failed to send exit request:', err);
+      }
     }
     function showSubmitModal() {
       const count = Object.keys(comments).length;
@@ -2134,11 +2229,11 @@ function diffHtmlTemplate(diffData, history = []) {
     function hideSubmitModal() { submitModal.classList.remove('visible'); }
     document.getElementById('send-and-exit').addEventListener('click', showSubmitModal);
     document.getElementById('modal-cancel').addEventListener('click', hideSubmitModal);
-    function doSubmit() {
+    async function doSubmit() {
       globalComment = globalCommentInput.value;
       savePromptPrefs();
       hideSubmitModal();
-      sendAndExit('button');
+      await sendAndExit('button');
       // Try to close window; if it fails (browser security), show completion message
       setTimeout(() => {
         window.close();
@@ -2343,7 +2438,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
     }
     .theme-toggle:hover { background: var(--hover-bg); transform: scale(1.05); }
 
-    .wrap { padding: 12px 16px 40px; }
+    .wrap { padding: 12px 16px 12px; }
     .toolbar {
       display: flex;
       gap: 12px;
@@ -2607,27 +2702,14 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
     }
     .comment-list li { margin-bottom: 6px; }
     .comment-list .hint { color: var(--muted); font-size: 12px; }
-    .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: var(--selected-bg); border: 1px solid var(--border); font-size: 12px; color: var(--text); }
+    .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: var(--selected-bg); border: 1px solid var(--border); font-size: 12px; color: var(--text); cursor: pointer; transition: background 150ms ease, border-color 150ms ease; }
+    .pill:hover { background: var(--hover-bg); border-color: var(--accent); }
     .pill strong { color: var(--text); font-weight: 700; }
     .comment-list.collapsed {
       opacity: 0;
       pointer-events: none;
       transform: translateY(8px) scale(0.98);
     }
-    .comment-toggle {
-      position: fixed;
-      right: 14px;
-      bottom: 14px;
-      padding: 10px 12px;
-      border-radius: 10px;
-      border: 1px solid var(--border);
-      background: var(--selected-bg);
-      color: var(--text);
-      cursor: pointer;
-      box-shadow: 0 10px 24px var(--shadow-color);
-      font-size: 13px;
-      transition: background 200ms ease, border-color 200ms ease;
-    }
     .md-preview {
       background: var(--input-bg);
       border: 1px solid var(--border);
@@ -2641,7 +2723,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       gap: 16px;
       align-items: stretch;
       margin-top: 8px;
-      height: calc(100vh - 140px);
+      height: calc(100vh - 80px);
     }
     .md-left {
       flex: 1;
@@ -3354,6 +3436,15 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
     }
     .modal-actions button:hover { background: var(--hover-bg); }
     .modal-actions button.primary { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
+    .image-attach-area { margin: 12px 0; }
+    .image-attach-area label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
+    .image-attach-area.image-attach-small { margin: 8px 0; }
+    .image-attach-area.image-attach-small label { font-size: 11px; }
+    .image-preview-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 24px; }
+    .image-preview-item { position: relative; }
+    .image-preview-item img { max-width: 80px; max-height: 60px; border-radius: 4px; border: 1px solid var(--border); object-fit: cover; }
+    .image-preview-item .remove-image { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--error, #ef4444); color: #fff; border: none; cursor: pointer; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; }
+    .image-preview-item .remove-image:hover { background: #dc2626; }
     .modal-actions button.primary:hover { background: #7dd3fc; }
 
     .modal-checkboxes { margin: 12px 0; }
@@ -3686,7 +3777,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
     <div class="meta">
       <h1><span class="title-path">${projectRoot}</span><span class="title-file">${relativePath}</span></h1>
       <span class="badge">Click to comment / ESC to cancel</span>
-      <span class="pill">Comments <strong id="comment-count">0</strong></span>
+      <button class="pill" id="pill-comments" title="Toggle comment panel">Comments <strong id="comment-count">0</strong></button>
     </div>
     <div class="actions">
       <button class="history-toggle" id="history-toggle" title="Review History">☰</button>
@@ -3772,17 +3863,20 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
     </header>
     <div id="cell-preview" style="font-size:12px; color: var(--muted); margin-bottom:8px;"></div>
     <textarea id="comment-input" placeholder="Enter your comment or note"></textarea>
+    <div class="image-attach-area image-attach-small" id="comment-image-area">
+      <label>📎 Image (⌘V, max 1)</label>
+      <div class="image-preview-list" id="comment-image-preview"></div>
+    </div>
     <div class="actions">
       <button class="primary" id="save-comment">Save</button>
     </div>
   </div>
 
-  <aside class="comment-list">
+  <aside class="comment-list collapsed">
     <h3>Comments</h3>
     <ol id="comment-list"></ol>
     <p class="hint">Close the tab or click "Submit & Exit" to send comments and stop the server.</p>
   </aside>
-  <button class="comment-toggle" id="comment-toggle">Comments (0)</button>
   <div class="filter-menu" id="filter-menu">
     <label class="menu-check"><input type="checkbox" id="freeze-col-check" /> Freeze up to this column</label>
     <button data-action="not-empty">Rows where not empty</button>
@@ -3812,6 +3906,10 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       <p class="modal-summary" id="modal-summary"></p>
       <label for="global-comment">Overall comment (optional)</label>
       <textarea id="global-comment" placeholder="Add a summary or overall feedback..."></textarea>
+      <div class="image-attach-area" id="submit-image-area">
+        <label>📎 Attach images (⌘V to paste, max 5)</label>
+        <div class="image-preview-list" id="submit-image-preview"></div>
+      </div>
       <div class="modal-checkboxes">
         <label><input type="checkbox" id="prompt-subagents" checked /> 🤖 Delegate to sub-agents (implement, verify, report)</label>
         <label><input type="checkbox" id="prompt-reviw" checked /> 👁️ Open in REVIW next time</label>
@@ -4074,7 +4172,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
   const commentCount = document.getElementById('comment-count');
   const fitBtn = document.getElementById('fit-width');
   const commentPanel = document.querySelector('.comment-list');
-  const commentToggle = document.getElementById('comment-toggle');
+  const pillComments = document.getElementById('pill-comments');
   const filterMenu = document.getElementById('filter-menu');
   const rowMenu = document.getElementById('row-menu');
   const freezeColCheck = document.getElementById('freeze-col-check');
@@ -4144,6 +4242,85 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
     let dragEnd = null;   // {row, col}
     let selection = null; // {startRow, endRow, startCol, endCol}
 
+    // Image attachment state
+    const submitImages = []; // base64 images for submit modal (max 5)
+    let currentCommentImage = null; // base64 image for current comment (max 1)
+
+    // Image attachment handlers
+    const submitImagePreview = document.getElementById('submit-image-preview');
+    const commentImagePreview = document.getElementById('comment-image-preview');
+
+    function addImageToPreview(container, images, maxCount, base64) {
+      if (images.length >= maxCount) return;
+      images.push(base64);
+      renderImagePreviews(container, images);
+    }
+
+    function renderImagePreviews(container, images) {
+      container.innerHTML = '';
+      images.forEach((base64, idx) => {
+        const item = document.createElement('div');
+        item.className = 'image-preview-item';
+        item.innerHTML = \`<img src="\${base64}" alt="attached image"><button class="remove-image" data-idx="\${idx}">×</button>\`;
+        item.querySelector('.remove-image').addEventListener('click', () => {
+          images.splice(idx, 1);
+          renderImagePreviews(container, images);
+        });
+        container.appendChild(item);
+      });
+    }
+
+    function renderCommentImagePreview() {
+      commentImagePreview.innerHTML = '';
+      if (currentCommentImage) {
+        const item = document.createElement('div');
+        item.className = 'image-preview-item';
+        item.innerHTML = \`<img src="\${currentCommentImage}" alt="attached image"><button class="remove-image">×</button>\`;
+        item.querySelector('.remove-image').addEventListener('click', () => {
+          currentCommentImage = null;
+          renderCommentImagePreview();
+        });
+        commentImagePreview.appendChild(item);
+      }
+    }
+
+    // Global paste handler for images
+    document.addEventListener('paste', (e) => {
+      const items = e.clipboardData?.items;
+      if (!items) return;
+      for (const item of items) {
+        if (item.type.startsWith('image/')) {
+          e.preventDefault();
+          const file = item.getAsFile();
+          const reader = new FileReader();
+          reader.onload = () => {
+            const base64 = reader.result;
+            const modal = document.getElementById('submit-modal');
+            const commentCard = document.getElementById('comment-card');
+            const activeEl = document.activeElement;
+            const commentInput = document.getElementById('comment-input');
+
+            // Prioritize comment card if its textarea has focus
+            if (commentCard?.style.display !== 'none' && activeEl === commentInput) {
+              if (!currentCommentImage) {
+                currentCommentImage = base64;
+                renderCommentImagePreview();
+              }
+            } else if (modal?.classList.contains('visible')) {
+              addImageToPreview(submitImagePreview, submitImages, 5, base64);
+            } else if (commentCard?.style.display !== 'none') {
+              if (!currentCommentImage) {
+                currentCommentImage = base64;
+                renderCommentImagePreview();
+              }
+            }
+          };
+          reader.readAsDataURL(file);
+          break;
+        }
+      }
+    });
+
     // --- localStorage Comment Persistence ---
     const STORAGE_KEY = 'reviw:comments:' + FILE_NAME;
     const STORAGE_TTL = 3 * 60 * 60 * 1000; // 3 hours in milliseconds
@@ -4566,7 +4743,6 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
         return aRow === bRow ? aCol - bCol : aRow - bRow;
       });
       commentCount.textContent = items.length;
-      commentToggle.textContent = 'Comments (' + items.length + ')';
       if (items.length === 0) {
         panelOpen = false;
       }
@@ -4608,7 +4784,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       });
     }
 
-    commentToggle.addEventListener('click', () => {
+    pillComments.addEventListener('click', () => {
       panelOpen = !panelOpen;
       if (panelOpen && Object.keys(comments).length === 0) {
         panelOpen = false; // keep hidden if no comments
@@ -4745,8 +4921,11 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       if (isRangeKey(currentKey)) {
         // Range (rectangular) comment
         const { startRow, startCol, endRow, endCol } = parseRangeKey(currentKey);
-        if (text) {
+        if (text || currentCommentImage) {
           comments[currentKey] = { startRow, startCol, endRow, endCol, text, isRange: true };
+          if (currentCommentImage) {
+            comments[currentKey].image = currentCommentImage;
+          }
           for (let r = startRow; r <= endRow; r++) {
             for (let c = startCol; c <= endCol; c++) {
               setDot(r, c, true);
@@ -4768,14 +4947,19 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
         const [row, col] = currentKey.split('-').map(Number);
         const td = tbody.querySelector('td[data-row="' + row + '"][data-col="' + col + '"]');
         const value = td ? td.textContent : '';
-        if (text) {
+        if (text || currentCommentImage) {
           comments[currentKey] = { row, col, text, value };
+          if (currentCommentImage) {
+            comments[currentKey].image = currentCommentImage;
+          }
           setDot(row, col, true);
         } else {
           delete comments[currentKey];
           setDot(row, col, false);
         }
       }
+      currentCommentImage = null;
+      renderCommentImagePreview();
       refreshList();
       closeCard();
       saveCommentsToStorage();
@@ -5059,6 +5243,10 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
         if (c.isRange) {
           transformed.lineEnd = (c.endRow || c.startRow) + 1;
         }
+        // Preserve image attachment
+        if (c.image) {
+          transformed.image = c.image;
+        }
         return transformed;
       });
     }
@@ -5079,6 +5267,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       if (globalComment.trim()) {
         data.summary = globalComment.trim();
       }
+      if (submitImages.length > 0) data.summaryImages = submitImages;
       const prompts = getSelectedPrompts();
       if (prompts.length > 0) data.prompts = prompts;
       // Include answered questions
@@ -5099,14 +5288,24 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       }
       return data;
     }
-    function sendAndExit(reason = 'pagehide') {
+    async function sendAndExit(reason = 'pagehide') {
       if (sent) return;
       sent = true;
       clearCommentsFromStorage();
       const p = payload(reason);
       saveToHistory(p);
-      const blob = new Blob([JSON.stringify(p)], { type: 'application/json' });
-      navigator.sendBeacon('/exit', blob);
+      try {
+        // Use fetch with keepalive to handle large payloads (images)
+        // keepalive allows the request to outlive the page
+        await fetch('/exit', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(p),
+          // Note: keepalive has 64KB limit like sendBeacon, so we don't use it for large payloads
+        });
+      } catch (err) {
+        console.error('Failed to send exit request:', err);
+      }
     }
     function showSubmitModal() {
       const count = Object.keys(comments).length;
@@ -5122,11 +5321,11 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
     }
     document.getElementById('send-and-exit').addEventListener('click', showSubmitModal);
     modalCancel.addEventListener('click', hideSubmitModal);
-    function doSubmit() {
+    async function doSubmit() {
       globalComment = globalCommentInput.value;
       savePromptPrefs();
       hideSubmitModal();
-      sendAndExit('button');
+      await sendAndExit('button');
       // Try to close window; if it fails (browser security), show completion message
       setTimeout(() => {
         window.close();
@@ -6496,6 +6695,79 @@ function removeLockFile(filePath) {
   }
 }
 
+// --- Image Saving Helper ---
+function saveBase64Image(base64Data, baseDir) {
+  try {
+    // Parse data URL: data:image/png;base64,iVBORw0K...
+    const match = base64Data.match(/^data:image\/(\w+);base64,(.+)$/);
+    if (!match) return null;
+
+    const ext = match[1] === 'jpeg' ? 'jpg' : match[1];
+    const data = match[2];
+
+    // Create ./tmp/ directory if it doesn't exist
+    const tmpDir = path.join(baseDir, 'tmp');
+    if (!fs.existsSync(tmpDir)) {
+      fs.mkdirSync(tmpDir, { recursive: true });
+    }
+
+    // Generate unique filename using timestamp and random string
+    const timestamp = Date.now();
+    const random = crypto.randomBytes(4).toString('hex');
+    const filename = `reviw-${timestamp}-${random}.${ext}`;
+    const filepath = path.join(tmpDir, filename);
+
+    // Decode base64 and save to file
+    const buffer = Buffer.from(data, 'base64');
+    fs.writeFileSync(filepath, buffer);
+
+    // Return relative path (./tmp/filename)
+    return `./tmp/${filename}`;
+  } catch (err) {
+    console.error('Failed to save image:', err);
+    return null;
+  }
+}
+
+// Process payload images: save to disk and replace base64 with paths
+function processPayloadImages(payload, baseDir) {
+  // Process summaryImages (images attached to summary)
+  if (payload.summaryImages && Array.isArray(payload.summaryImages)) {
+    const imagePaths = [];
+    for (const base64 of payload.summaryImages) {
+      const savedPath = saveBase64Image(base64, baseDir);
+      if (savedPath) {
+        imagePaths.push(savedPath);
+      }
+    }
+    // Replace base64 array with file paths (keeps same key position)
+    payload.summaryImages = imagePaths.length > 0 ? imagePaths : undefined;
+    if (!payload.summaryImages) delete payload.summaryImages;
+  }
+
+  // Process comment images
+  if (payload.comments && Array.isArray(payload.comments)) {
+    for (const comment of payload.comments) {
+      if (comment.image) {
+        const savedPath = saveBase64Image(comment.image, baseDir);
+        if (savedPath) {
+          comment.imagePath = savedPath;
+        }
+        delete comment.image; // Remove base64 data from comment
+      }
+    }
+  }
+
+  // Add image reading instruction if any images are attached
+  const hasCommentImages = payload.comments?.some(c => c.imagePath);
+  const hasSummaryImages = payload.summaryImages?.length > 0;
+  if (hasCommentImages || hasSummaryImages) {
+    payload._imageReadingNote = "MANDATORY: You MUST read ALL images (imagePath and summaryImages) using the Read tool. Skipping image reading is PROHIBITED.";
+  }
+
+  return payload;
+}
+
 function checkExistingServer(filePath) {
   try {
     const lockPath = getLockFilePath(filePath);
@@ -6871,6 +7143,10 @@ function createFileServer(filePath, fileIndex = 0) {
           if (raw && raw.trim()) {
             payload = JSON.parse(raw);
           }
+          // Process images: save to ./tmp/ and replace base64 with paths
+          if (payload) {
+            payload = processPayloadImages(payload, ctx.baseDir);
+          }
           // Save to file-based history (only if there are comments)
           if (payload && (payload.comments?.length > 0 || payload.submitComment)) {
             saveHistoryToFile(ctx.filePath, payload);
@@ -7137,6 +7413,11 @@ function createDiffServer(diffContent) {
           if (raw && raw.trim()) {
             payload = JSON.parse(raw);
           }
+          // Process images: save to ./tmp/ and replace base64 with paths
+          // For diff mode, use current working directory
+          if (payload) {
+            payload = processPayloadImages(payload, process.cwd());
+          }
           // Save to file-based history (only if there are comments)
           // For diff mode, use relativePath as identifier
           if (payload && (payload.comments?.length > 0 || payload.submitComment)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reviw",
-  "version": "0.16.3",
+  "version": "0.17.0",
   "description": "Lightweight file reviewer with in-browser comments for CSV, TSV, Markdown, and Git diffs.",
   "type": "module",
   "bin": {