@in-the-loop-labs/pair-review 3.0.3 → 3.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@in-the-loop-labs/pair-review",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Your AI-powered code review partner - Close the feedback loop with AI coding agents",
   "main": "src/server.js",
   "bin": {
@@ -77,6 +77,7 @@
     "@playwright/test": "^1.57.0",
     "@vitest/coverage-v8": "^4.0.16",
     "highlight.js": "^11.11.1",
+    "jsdom": "^29.0.1",
     "supertest": "^7.1.4",
     "vitest": "^4.0.16"
   }

package/plugin/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "pair-review",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "pair-review app integration — Open PRs and local changes in the pair-review web UI, run server-side AI analysis, and address review feedback. Requires the pair-review MCP server.",
   "author": {
     "name": "in-the-loop-labs",

package/plugin-code-critic/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "code-critic",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "AI-powered code review analysis — Run three-level AI analysis and implement-review-fix loops directly in your coding agent. Works standalone, no server required.",
   "author": {
     "name": "in-the-loop-labs",

package/public/css/pr.css

@@ -10881,6 +10881,15 @@ body.resizing * {
 /* File-level AI suggestions now use the same classes as line-level (.ai-suggestion-*)
    No custom button styles needed - they inherit from .ai-action classes defined earlier */
 
+/* File-level AI suggestions: override line-level viewport-based max-width.
+   Line-level suggestions use calc(100vw - sidebar - panels) because they sit in table cells.
+   File-level suggestions sit inside .file-comments-container which is already correctly sized,
+   so they just need to fill their container. */
+.file-comment-card.ai-suggestion {
+  max-width: 100%;
+  margin: 0; /* Container handles spacing via gap; don't center with auto margins */
+}
+
 /* File-level AI suggestion collapsed state - uses same classes as line-level */
 .file-comment-card.ai-suggestion.collapsed {
   background: var(--color-bg-secondary, #f6f8fa);

package/public/js/components/ReviewModal.js

@@ -371,7 +371,7 @@ class ReviewModal {
    */
   updateCommentCount() {
     // Count both line-level comments (.user-comment-row) and file-level comments (.file-comment-card.user-comment)
-    const lineComments = document.querySelectorAll('.user-comment-row').length;
+    const lineComments = document.querySelectorAll('.user-comment-row:not(.suggestion-edit-pending)').length;
     const fileComments = document.querySelectorAll('.file-comment-card.user-comment').length;
     const userComments = lineComments + fileComments;
     const countElement = this.modal.querySelector('.review-comment-count');
@@ -470,7 +470,7 @@ class ReviewModal {
     const reviewEvent = selectedOption ? selectedOption.value : 'COMMENT';
     // Count BOTH line-level (.user-comment-row) and file-level (.file-comment-card.user-comment) comments
     // This must match the counting logic in updateCommentCount() for consistency
-    const lineComments = document.querySelectorAll('.user-comment-row').length;
+    const lineComments = document.querySelectorAll('.user-comment-row:not(.suggestion-edit-pending)').length;
     const fileComments = document.querySelectorAll('.file-comment-card.user-comment').length;
     const commentCount = lineComments + fileComments;
     

package/public/js/modules/comment-manager.js

@@ -580,12 +580,8 @@ class CommentManager {
 
     // Choose icon based on comment origin (AI-adopted vs user-originated)
     const commentIcon = comment.parent_id
-      ? `<svg class="octicon octicon-comment-ai" viewBox="0 0 16 16" width="16" height="16">
-           <path d="M7.75 1a.75.75 0 0 1 0 1.5h-5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2c.199 0 .39.079.53.22.141.14.22.331.22.53v2.19l2.72-2.72a.747.747 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-2a.75.75 0 0 1 1.5 0v2c0 .464-.184.909-.513 1.237A1.746 1.746 0 0 1 13.25 12H9.06l-2.573 2.573A1.457 1.457 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25v-7.5C1 1.784 1.784 1 2.75 1h5Zm4.519-.837a.248.248 0 0 1 .466 0l.238.648a3.726 3.726 0 0 0 2.218 2.219l.649.238a.249.249 0 0 1 0 .467l-.649.238a3.725 3.725 0 0 0-2.218 2.218l-.238.649a.248.248 0 0 1-.466 0l-.239-.649a3.725 3.725 0 0 0-2.218-2.218l-.649-.238a.249.249 0 0 1 0-.467l.649-.238A3.726 3.726 0 0 0 12.03.811l.239-.648Z"/>
-         </svg>`
-      : `<svg class="octicon octicon-person" viewBox="0 0 16 16" width="16" height="16">
-           <path d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"/>
-         </svg>`;
+      ? CommentManager.AI_ICON_SVG
+      : CommentManager.PERSON_ICON_SVG;
 
     // Build class list for comment styling
     const baseClasses = ['user-comment'];
@@ -634,56 +630,51 @@ class CommentManager {
     targetRow.parentNode.insertBefore(commentRow, targetRow.nextSibling);
   }
 
+  /** SVG icons for comment origin display */
+  static AI_ICON_SVG = `<svg class="octicon octicon-comment-ai" viewBox="0 0 16 16" width="16" height="16">
+    <path d="M7.75 1a.75.75 0 0 1 0 1.5h-5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2c.199 0 .39.079.53.22.141.14.22.331.22.53v2.19l2.72-2.72a.747.747 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-2a.75.75 0 0 1 1.5 0v2c0 .464-.184.909-.513 1.237A1.746 1.746 0 0 1 13.25 12H9.06l-2.573 2.573A1.457 1.457 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25v-7.5C1 1.784 1.784 1 2.75 1h5Zm4.519-.837a.248.248 0 0 1 .466 0l.238.648a3.726 3.726 0 0 0 2.218 2.219l.649.238a.249.249 0 0 1 0 .467l-.649.238a3.725 3.725 0 0 0-2.218 2.218l-.238.649a.248.248 0 0 1-.466 0l-.239-.649a3.725 3.725 0 0 0-2.218-2.218l-.649-.238a.249.249 0 0 1 0-.467l.649-.238A3.726 3.726 0 0 0 12.03.811l.239-.648Z"/>
+  </svg>`;
+
+  static PERSON_ICON_SVG = `<svg class="octicon octicon-person" viewBox="0 0 16 16" width="16" height="16">
+    <path d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"/>
+  </svg>`;
+
   /**
-   * Display a user comment in edit mode (for adopted suggestions)
-   * @param {Object} comment - Comment data
-   * @param {HTMLElement} targetRow - Row to insert after
+   * Shared builder for comment/suggestion edit form rows.
+   * Builds the DOM, inserts after targetRow, wires common event handling
+   * (autoResize, emoji, suggestion button), and returns { formRow, textarea, saveBtn, cancelBtn }.
+   * Callers wire their own save/cancel logic on the returned elements.
+   * NOTE: similar edit form in pr.js editUserComment — keep in sync
+   * @private
    */
-  displayUserCommentInEditMode(comment, targetRow) {
-    const commentRow = document.createElement('tr');
-    commentRow.className = 'user-comment-row';
-    commentRow.dataset.commentId = comment.id;
-    // Store file/line/side data for editing
-    commentRow.dataset.file = comment.file;
-    commentRow.dataset.lineStart = comment.line_start;
-    commentRow.dataset.lineEnd = comment.line_end || comment.line_start;
-    if (comment.side) {
-      commentRow.dataset.side = comment.side;
-    }
+  _buildEditFormRow(targetRow, {
+    rowClassName, rowDataset, iconHtml, originClass, lineInfo,
+    type, title, body, bodyHtml, textareaId, placeholder,
+    dataAttrs, saveLabel
+  }) {
+    const formRow = document.createElement('tr');
+    formRow.className = rowClassName;
+    Object.assign(formRow.dataset, rowDataset);
 
     const td = document.createElement('td');
     td.colSpan = 4;
     td.className = 'user-comment-cell';
 
-    const lineInfo = comment.line_end && comment.line_end !== comment.line_start
-      ? `Lines ${comment.line_start}-${comment.line_end}`
-      : `Line ${comment.line_start}`;
-
     const escapeHtml = this.prManager?.escapeHtml?.bind(this.prManager) || ((s) => s);
 
-    // Choose icon based on comment origin (AI-adopted vs user-originated)
-    const commentIcon = comment.parent_id
-      ? `<svg class="octicon octicon-comment-ai" viewBox="0 0 16 16" width="16" height="16">
-           <path d="M7.75 1a.75.75 0 0 1 0 1.5h-5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2c.199 0 .39.079.53.22.141.14.22.331.22.53v2.19l2.72-2.72a.747.747 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-2a.75.75 0 0 1 1.5 0v2c0 .464-.184.909-.513 1.237A1.746 1.746 0 0 1 13.25 12H9.06l-2.573 2.573A1.457 1.457 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25v-7.5C1 1.784 1.784 1 2.75 1h5Zm4.519-.837a.248.248 0 0 1 .466 0l.238.648a3.726 3.726 0 0 0 2.218 2.219l.649.238a.249.249 0 0 1 0 .467l-.649.238a3.725 3.725 0 0 0-2.218 2.218l-.238.649a.248.248 0 0 1-.466 0l-.239-.649a3.725 3.725 0 0 0-2.218-2.218l-.649-.238a.249.249 0 0 1 0-.467l.649-.238A3.726 3.726 0 0 0 12.03.811l.239-.648Z"/>
-         </svg>`
-      : `<svg class="octicon octicon-person" viewBox="0 0 16 16" width="16" height="16">
-           <path d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"/>
-         </svg>`;
-
-    const commentHTML = `
-      <div class="user-comment editing-mode ${comment.parent_id ? 'adopted-comment comment-ai-origin' : 'comment-user-origin'}">
+    const html = `
+      <div class="user-comment editing-mode ${originClass}">
         <div class="user-comment-header">
           <div class="user-comment-header-left">
             <span class="comment-origin-icon">
-              ${commentIcon}
+              ${iconHtml}
             </span>
             <span class="user-comment-line-info">${lineInfo}</span>
-            ${comment.type === 'praise' ? `<span class="adopted-praise-badge" title="Nice Work"><svg viewBox="0 0 16 16" width="12" height="12"><path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"/></svg>Nice Work</span>` : ''}
-            ${comment.title ? `<span class="adopted-title">${escapeHtml(comment.title)}</span>` : ''}
+            ${type === 'praise' ? `<span class="adopted-praise-badge" title="Nice Work"><svg viewBox="0 0 16 16" width="12" height="12"><path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"/></svg>Nice Work</span>` : ''}
+            ${title ? `<span class="adopted-title">${escapeHtml(title)}</span>` : ''}
           </div>
         </div>
-        <!-- Hidden body div for saving - pre-populate with markdown rendered content and store original -->
-        <div class="user-comment-body" style="display: none;" data-original-markdown="${window.escapeHtmlAttribute(comment.body)}">${window.renderMarkdown ? window.renderMarkdown(comment.body) : escapeHtml(comment.body)}</div>
+        ${bodyHtml || ''}
         <div class="user-comment-edit-form">
           <div class="comment-form-toolbar">
             <button type="button" class="btn btn-sm suggestion-btn" title="Insert a suggestion (Ctrl+G)">
@@ -691,71 +682,55 @@ class CommentManager {
             </button>
           </div>
           <textarea
-            id="edit-comment-${comment.id}"
+            ${textareaId ? `id="${textareaId}"` : ''}
             class="comment-edit-textarea"
-            placeholder="Enter your comment..."
-            data-file="${comment.file}"
-            data-line="${comment.line_start}"
-            data-line-end="${comment.line_end || comment.line_start}"
-            data-side="${comment.side || 'RIGHT'}"
-          >${escapeHtml(comment.body)}</textarea>
+            placeholder="${placeholder}"
+            data-file="${window.escapeHtmlAttribute ? window.escapeHtmlAttribute(dataAttrs.file) : dataAttrs.file}"
+            data-line="${dataAttrs.line}"
+            data-line-end="${dataAttrs.lineEnd}"
+            data-side="${dataAttrs.side}"
+          >${escapeHtml(body)}</textarea>
           <div class="comment-edit-actions">
-            <button class="btn btn-sm btn-primary save-edit-btn">
-              Save
-            </button>
-            <button class="btn btn-sm btn-secondary cancel-edit-btn">
-              Cancel
-            </button>
+            <button class="btn btn-sm btn-primary save-edit-btn">${saveLabel}</button>
+            <button class="btn btn-sm btn-secondary cancel-edit-btn">Cancel</button>
           </div>
         </div>
       </div>
     `;
 
-    td.innerHTML = commentHTML;
-    commentRow.appendChild(td);
+    td.innerHTML = html;
+    formRow.appendChild(td);
 
-    // Insert comment immediately after the target row (suggestion row)
     if (targetRow.nextSibling) {
-      targetRow.parentNode.insertBefore(commentRow, targetRow.nextSibling);
+      targetRow.parentNode.insertBefore(formRow, targetRow.nextSibling);
     } else {
-      targetRow.parentNode.appendChild(commentRow);
+      targetRow.parentNode.appendChild(formRow);
     }
 
-    // Get references
-    const editForm = td.querySelector('.user-comment-edit-form');
-    const textarea = document.getElementById(`edit-comment-${comment.id}`);
-    const suggestionBtn = editForm.querySelector('.suggestion-btn');
-    const saveBtn = editForm.querySelector('.save-edit-btn');
-    const cancelBtn = editForm.querySelector('.cancel-edit-btn');
+    const textarea = textareaId
+      ? document.getElementById(textareaId)
+      : formRow.querySelector('.comment-edit-textarea');
+    const suggestionBtn = formRow.querySelector('.suggestion-btn');
+    const saveBtn = formRow.querySelector('.save-edit-btn');
+    const cancelBtn = formRow.querySelector('.cancel-edit-btn');
 
     if (textarea) {
-      // Auto-resize to fit content
       this.autoResizeTextarea(textarea);
-
       textarea.focus();
-      // Position cursor at end of text instead of selecting all
       textarea.setSelectionRange(textarea.value.length, textarea.value.length);
 
-      // Attach emoji picker for autocomplete
       if (window.emojiPicker) {
         window.emojiPicker.attach(textarea);
       }
 
-      // Update suggestion button state based on content
       this.updateSuggestionButtonState(textarea, suggestionBtn);
 
-      // Suggestion button handler
       suggestionBtn.addEventListener('click', () => {
         if (!suggestionBtn.disabled) {
           this.insertSuggestionBlock(textarea, suggestionBtn);
         }
       });
 
-      // Save/cancel handlers - use prManager methods for consistency
-      saveBtn.addEventListener('click', () => this.prManager?.saveEditedUserComment(comment.id));
-      cancelBtn.addEventListener('click', () => this.prManager?.cancelEditUserComment(comment.id));
-
-      // Auto-resize on input and update suggestion button state
       textarea.addEventListener('input', () => {
         this.autoResizeTextarea(textarea);
         this.updateSuggestionButtonState(textarea, suggestionBtn);
@@ -764,6 +739,105 @@ class CommentManager {
       // Keyboard shortcuts (Escape, Cmd/Ctrl+Enter) are handled by delegated
       // event listener in setupCommentFormDelegation() to avoid memory leaks
     }
+
+    return { formRow, textarea, saveBtn, cancelBtn };
+  }
+
+  /**
+   * Display a user comment in edit mode (for adopted suggestions)
+   * @param {Object} comment - Comment data
+   * @param {HTMLElement} targetRow - Row to insert after
+   */
+  displayUserCommentInEditMode(comment, targetRow) {
+    const lineInfo = comment.line_end && comment.line_end !== comment.line_start
+      ? `Lines ${comment.line_start}-${comment.line_end}`
+      : `Line ${comment.line_start}`;
+
+    const escapeHtml = this.prManager?.escapeHtml?.bind(this.prManager) || ((s) => s);
+    const bodyHtml = `<div class="user-comment-body" style="display: none;" data-original-markdown="${window.escapeHtmlAttribute(comment.body)}">${window.renderMarkdown ? window.renderMarkdown(comment.body) : escapeHtml(comment.body)}</div>`;
+
+    const rowDataset = { commentId: comment.id, file: comment.file, lineStart: comment.line_start, lineEnd: comment.line_end || comment.line_start };
+    if (comment.side) rowDataset.side = comment.side;
+
+    const { saveBtn, cancelBtn } = this._buildEditFormRow(targetRow, {
+      rowClassName: 'user-comment-row',
+      rowDataset,
+      iconHtml: comment.parent_id ? CommentManager.AI_ICON_SVG : CommentManager.PERSON_ICON_SVG,
+      originClass: comment.parent_id ? 'adopted-comment comment-ai-origin' : 'comment-user-origin',
+      lineInfo,
+      type: comment.type,
+      title: comment.title,
+      body: comment.body,
+      bodyHtml,
+      textareaId: `edit-comment-${comment.id}`,
+      placeholder: 'Enter your comment...',
+      dataAttrs: {
+        file: comment.file,
+        line: comment.line_start,
+        lineEnd: comment.line_end || comment.line_start,
+        side: comment.side || 'RIGHT'
+      },
+      saveLabel: 'Save'
+    });
+
+    saveBtn.addEventListener('click', () => this.prManager?.saveEditedUserComment(comment.id));
+    cancelBtn.addEventListener('click', () => this.prManager?.cancelEditUserComment(comment.id));
+  }
+
+  /**
+   * Display an edit form for an AI suggestion that has NOT yet been adopted.
+   * Nothing is saved until the user clicks Save/Adopt.
+   * @param {Object} suggestion - { id, body, type, title, file, lineNumber, diffPosition, side }
+   * @param {HTMLElement} targetRow - The suggestion row to insert the form after
+   * @param {Function} onSave - Called with (editedText) when user clicks Save
+   * @param {Function} onCancel - Called when user clicks Cancel
+   */
+  displaySuggestionEditForm(suggestion, targetRow, onSave, onCancel) {
+    // Remove any existing pending edit form (prevents stale multi-form state)
+    const existing = document.querySelector('.suggestion-edit-pending');
+    if (existing) existing.remove();
+
+    const { formRow, saveBtn, cancelBtn } = this._buildEditFormRow(targetRow, {
+      rowClassName: 'user-comment-row suggestion-edit-pending',
+      rowDataset: { suggestionId: suggestion.id },
+      iconHtml: CommentManager.AI_ICON_SVG,
+      originClass: 'adopted-comment comment-ai-origin',
+      lineInfo: suggestion.lineEnd && suggestion.lineEnd !== suggestion.lineNumber
+        ? `Lines ${suggestion.lineNumber}-${suggestion.lineEnd}`
+        : `Line ${suggestion.lineNumber}`,
+      type: suggestion.type,
+      title: suggestion.title,
+      body: suggestion.body,
+      placeholder: 'Edit the suggestion...',
+      dataAttrs: {
+        file: suggestion.file,
+        line: suggestion.lineNumber,
+        lineEnd: suggestion.lineEnd || suggestion.lineNumber,
+        side: suggestion.side || 'RIGHT'
+      },
+      saveLabel: 'Save'
+    });
+
+    saveBtn.addEventListener('click', async () => {
+      const textarea = formRow.querySelector('.comment-edit-textarea');
+      const text = textarea?.value.trim();
+      if (text) {
+        saveBtn.disabled = true;
+        try {
+          await onSave(text);
+          formRow.remove();
+        } catch (err) {
+          saveBtn.disabled = false;
+        }
+      }
+    });
+
+    cancelBtn.addEventListener('click', () => {
+      formRow.remove();
+      onCancel();
+    });
+
+    return formRow;
   }
 }
 

package/public/js/modules/comment-minimizer.js

@@ -17,7 +17,7 @@ class CommentMinimizer {
   /** Sparkles icon SVG (matches AI suggestion badge) */
   static SPARKLES_ICON = `<svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor"><path d="M9.6 2.279a.426.426 0 0 1 .8 0l.407 1.112a6.386 6.386 0 0 0 3.802 3.802l1.112.407a.426.426 0 0 1 0 .8l-1.112.407a6.386 6.386 0 0 0-3.802 3.802l-.407 1.112a.426.426 0 0 1-.8 0l-.407-1.112a6.386 6.386 0 0 0-3.802-3.802L4.279 8.4a.426.426 0 0 1 0-.8l1.112-.407a6.386 6.386 0 0 0 3.802-3.802L9.6 2.279Zm-4.267 8.837a.178.178 0 0 1 .334 0l.169.464a2.662 2.662 0 0 0 1.584 1.584l.464.169a.178.178 0 0 1 0 .334l-.464.169a2.662 2.662 0 0 0-1.584 1.584l-.169.464a.178.178 0 0 1-.334 0l-.169-.464a2.662 2.662 0 0 0-1.584-1.584l-.464-.169a.178.178 0 0 1 0-.334l.464-.169a2.662 2.662 0 0 0 1.584-1.584l.169-.464ZM2.8.14a.213.213 0 0 1 .4 0l.203.556a3.2 3.2 0 0 0 1.901 1.901l.556.203a.213.213 0 0 1 0 .4l-.556.203a3.2 3.2 0 0 0-1.901 1.901L3.2 5.86a.213.213 0 0 1-.4 0l-.203-.556A3.2 3.2 0 0 0 .696 3.403L.14 3.2a.213.213 0 0 1 0-.4l.556-.203A3.2 3.2 0 0 0 2.597.696L2.8.14Z"/></svg>`;
 
-  /** AI comment icon SVG — speech bubble with sparkles (for adopted AI suggestions) */
+  /** AI comment icon SVG — speech bubble with sparkles (matches CommentManager.AI_ICON_SVG, different size) */
   static AI_COMMENT_ICON = `<svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor"><path d="M7.75 1a.75.75 0 0 1 0 1.5h-5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2c.199 0 .39.079.53.22.141.14.22.331.22.53v2.19l2.72-2.72a.747.747 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-2a.75.75 0 0 1 1.5 0v2c0 .464-.184.909-.513 1.237A1.746 1.746 0 0 1 13.25 12H9.06l-2.573 2.573A1.457 1.457 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25v-7.5C1 1.784 1.784 1 2.75 1h5Zm4.519-.837a.248.248 0 0 1 .466 0l.238.648a3.726 3.726 0 0 0 2.218 2.219l.649.238a.249.249 0 0 1 0 .467l-.649.238a3.725 3.725 0 0 0-2.218 2.218l-.238.649a.248.248 0 0 1-.466 0l-.239-.649a3.725 3.725 0 0 0-2.218-2.218l-.649-.238a.249.249 0 0 1 0-.467l.649-.238A3.726 3.726 0 0 0 12.03.811l.239-.648Z"/></svg>`;
 
   constructor() {

package/public/js/modules/file-comment-manager.js

@@ -357,12 +357,8 @@ class FileCommentManager {
 
     // Choose icon based on comment origin (AI-adopted vs user-originated) - matches line-level
     const commentIcon = isAIOrigin
-      ? `<svg class="octicon octicon-comment-ai" viewBox="0 0 16 16" width="16" height="16">
-           <path d="M7.75 1a.75.75 0 0 1 0 1.5h-5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2c.199 0 .39.079.53.22.141.14.22.331.22.53v2.19l2.72-2.72a.747.747 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-2a.75.75 0 0 1 1.5 0v2c0 .464-.184.909-.513 1.237A1.746 1.746 0 0 1 13.25 12H9.06l-2.573 2.573A1.457 1.457 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25v-7.5C1 1.784 1.784 1 2.75 1h5Zm4.519-.837a.248.248 0 0 1 .466 0l.238.648a3.726 3.726 0 0 0 2.218 2.219l.649.238a.249.249 0 0 1 0 .467l-.649.238a3.725 3.725 0 0 0-2.218 2.218l-.238.649a.248.248 0 0 1-.466 0l-.239-.649a3.725 3.725 0 0 0-2.218-2.218l-.649-.238a.249.249 0 0 1 0-.467l.649-.238A3.726 3.726 0 0 0 12.03.811l.239-.648Z"/>
-         </svg>`
-      : `<svg class="octicon octicon-person" viewBox="0 0 16 16" width="16" height="16">
-           <path d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"/>
-         </svg>`;
+      ? window.CommentManager.AI_ICON_SVG
+      : window.CommentManager.PERSON_ICON_SVG;
 
     // Praise badge for "Nice Work" comments - matches line-level
     const praiseBadge = comment.type === 'praise'
@@ -746,7 +742,7 @@ class FileCommentManager {
         data-file="${window.escapeHtmlAttribute(suggestion.file)}"
       >${this.escapeHtml(suggestion.formattedBody || suggestion.body)}</textarea>
       <div class="file-comment-form-footer">
-        <button class="file-comment-form-btn submit submit-btn">Adopt</button>
+        <button class="file-comment-form-btn submit submit-btn">Save</button>
         <button class="file-comment-form-btn cancel cancel-btn">Cancel</button>
       </div>
     `;

package/public/js/modules/suggestion-manager.js

@@ -433,6 +433,7 @@ class SuggestionManager {
       // Store original markdown body for adopt functionality
       // Use JSON.stringify to preserve newlines and special characters
       suggestionDiv.dataset.originalBody = JSON.stringify(suggestion.body || '');
+      suggestionDiv.dataset.formattedBody = JSON.stringify(suggestion.formattedBody || '');
 
       // Store target info on the suggestion div for reliable retrieval in getFileAndLineInfo
       // This avoids fragile DOM traversal that fails when gap rows are between suggestion and target
@@ -445,6 +446,9 @@ class SuggestionManager {
         suggestionDiv.dataset.isFileLevel = targetInfo.isFileLevel ? 'true' : 'false';
       }
 
+      // Store line_end from the suggestion itself (may differ from targetInfo.lineNumber for multi-line suggestions)
+      suggestionDiv.dataset.lineEnd = suggestion.line_end !== undefined ? String(suggestion.line_end) : (targetInfo?.lineNumber !== undefined ? String(targetInfo.lineNumber) : '');
+
       // Convert suggestion.id to number for comparison since parent_id might be a number
       const suggestionIdNum = parseInt(suggestion.id);
 
@@ -526,7 +530,7 @@ class SuggestionManager {
             <svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>
             Adopt
           </button>
-          <button class="ai-action ai-action-edit" onclick="prManager.adoptAndEditSuggestion(${suggestion.id})">
+          <button class="ai-action ai-action-edit" onclick="prManager.editAndAdoptSuggestion(${suggestion.id})">
             <svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"></path></svg>
             Edit
           </button>
@@ -556,6 +560,8 @@ class SuggestionManager {
   extractSuggestionData(suggestionDiv) {
     const suggestionText = suggestionDiv.dataset?.originalBody ?
       JSON.parse(suggestionDiv.dataset.originalBody) : '';
+    const formattedBody = suggestionDiv.dataset?.formattedBody ?
+      JSON.parse(suggestionDiv.dataset.formattedBody) : '';
 
     // Get type from ai-suggestion-badge data-type attribute or praise-badge
     const badgeElement = suggestionDiv.querySelector('.ai-suggestion-badge, .praise-badge');
@@ -563,7 +569,7 @@ class SuggestionManager {
     const suggestionType = badgeElement?.dataset?.type || (badgeElement?.classList?.contains('praise-badge') ? 'praise' : '');
     const suggestionTitle = titleElement?.textContent?.trim() || '';
 
-    return { suggestionText, suggestionType, suggestionTitle };
+    return { suggestionText, formattedBody, suggestionType, suggestionTitle };
   }
 
   /**
@@ -609,6 +615,7 @@ class SuggestionManager {
     // This is the reliable method that works even with gap rows between suggestion and target
     const storedFileName = suggestionDiv.dataset.fileName;
     const storedLineNumber = suggestionDiv.dataset.lineNumber;
+    const storedLineEnd = suggestionDiv.dataset.lineEnd;
     const storedSide = suggestionDiv.dataset.side;
     const storedDiffPosition = suggestionDiv.dataset.diffPosition;
     const storedIsFileLevel = suggestionDiv.dataset.isFileLevel;
@@ -642,6 +649,7 @@ class SuggestionManager {
           targetRow,
           suggestionRow,
           lineNumber: parseInt(storedLineNumber, 10),
+          lineEnd: storedLineEnd ? parseInt(storedLineEnd, 10) : null,
           fileName: storedFileName,
           diffPosition: storedDiffPosition || null,
           side: storedSide || 'RIGHT',

package/public/js/pr.js

@@ -2241,6 +2241,7 @@ class PRManager {
 
   /**
    * Edit user comment
+   * NOTE: similar edit form in comment-manager.js _buildEditFormRow — keep in sync
    */
   async editUserComment(commentId) {
     try {
@@ -2536,7 +2537,7 @@ class PRManager {
    */
   async clearAllUserComments() {
     // Count both line-level and file-level user comments
-    const lineCommentRows = document.querySelectorAll('.user-comment-row');
+    const lineCommentRows = document.querySelectorAll('.user-comment-row:not(.suggestion-edit-pending)');
     const fileCommentCards = document.querySelectorAll('.file-comment-card.user-comment');
     const totalComments = lineCommentRows.length + fileCommentCards.length;
 
@@ -2654,7 +2655,7 @@ class PRManager {
       });
 
       // Clear existing comment rows before re-rendering
-      document.querySelectorAll('.user-comment-row').forEach(row => row.remove());
+      document.querySelectorAll('.user-comment-row:not(.suggestion-edit-pending)').forEach(row => row.remove());
 
       // Before rendering, ensure all comment target lines are visible
       // (expand hidden hunks so the line rows exist in the DOM)
@@ -2836,7 +2837,27 @@ class PRManager {
   }
 
   /**
-   * Shared helper for adoptAndEditSuggestion and adoptSuggestion.
+   * Build a user comment object from adoption/edit response data.
+   * Single source of truth for comment shape — used by both adopt-as-is
+   * and edit-then-adopt flows.
+   */
+  _buildCommentObject({ userCommentId, formattedBody, fileName, lineNumber, suggestionType, suggestionTitle, suggestionId, diffPosition, side }) {
+    return {
+      id: userCommentId,
+      file: fileName,
+      line_start: parseInt(lineNumber),
+      body: formattedBody,
+      type: suggestionType,
+      title: suggestionTitle,
+      parent_id: suggestionId,
+      diff_position: diffPosition ? parseInt(diffPosition) : null,
+      side: side || 'RIGHT',
+      created_at: new Date().toISOString()
+    };
+  }
+
+  /**
+   * Helper for adoptSuggestion (adopt-as-is flow).
    * Performs the /adopt fetch, collapses the suggestion, formats the comment,
    * and builds the newComment object. Returns { newComment, suggestionRow }
    * or null on failure. Throws on errors so the caller can handle them.
@@ -2865,20 +2886,12 @@ class PRManager {
     // Collapse the suggestion in the UI
     this.collapseSuggestionForAdoption(suggestionRow, suggestionId);
 
-    // Use the server-formatted body — server is the single source of truth
-    const formattedText = adoptResult.formattedBody;
-    const newComment = {
-      id: adoptResult.userCommentId,
-      file: fileName,
-      line_start: parseInt(lineNumber),
-      body: formattedText,
-      type: suggestionType,
-      title: suggestionTitle,
-      parent_id: suggestionId,
-      diff_position: diffPosition ? parseInt(diffPosition) : null,
-      side: side || 'RIGHT',
-      created_at: new Date().toISOString()
-    };
+    const newComment = this._buildCommentObject({
+      userCommentId: adoptResult.userCommentId,
+      formattedBody: adoptResult.formattedBody,
+      fileName, lineNumber, suggestionType, suggestionTitle,
+      suggestionId, diffPosition, side
+    });
 
     return { isFileLevel: false, newComment, suggestionRow };
   }
@@ -2911,37 +2924,88 @@ class PRManager {
   }
 
   /**
-   * Adopt an AI suggestion and open it in edit mode
+   * Open an AI suggestion in edit mode without adopting it yet.
+   * The suggestion is only adopted when the user clicks Save/Adopt.
    */
-  async adoptAndEditSuggestion(suggestionId) {
+  async editAndAdoptSuggestion(suggestionId) {
     try {
       const suggestionDiv = document.querySelector(`[data-suggestion-id="${suggestionId}"]`);
       if (!suggestionDiv) throw new Error('Suggestion element not found');
 
-      const result = await this._adoptAndBuildComment(suggestionId, suggestionDiv);
+      const { suggestionText, formattedBody, suggestionType, suggestionTitle } = this.extractSuggestionData(suggestionDiv);
+      const { suggestionRow, lineNumber, lineEnd, fileName, diffPosition, side, isFileLevel } = this.getFileAndLineInfo(suggestionDiv);
 
-      if (result.isFileLevel) {
+      if (isFileLevel) {
         if (!this.fileCommentManager) throw new Error('FileCommentManager not initialized');
-        const zone = this.fileCommentManager.findZoneForFile(result.fileName);
-        if (!zone) throw new Error(`Could not find file comments zone for ${result.fileName}`);
+        const zone = this.fileCommentManager.findZoneForFile(fileName);
+        if (!zone) throw new Error(`Could not find file comments zone for ${fileName}`);
 
         const suggestion = {
           id: suggestionId,
-          file: result.fileName,
-          body: result.suggestionText,
-          type: result.suggestionType,
-          title: result.suggestionTitle
+          file: fileName,
+          body: suggestionText,
+          formattedBody,
+          type: suggestionType,
+          title: suggestionTitle
         };
 
         this.fileCommentManager.editAndAdoptAISuggestion(zone, suggestion);
         return;
       }
 
-      this.displayUserCommentInEditMode(result.newComment, result.suggestionRow);
-      this._notifyAdoption(suggestionId, result.newComment);
+      // Line-level: show edit form WITHOUT adopting yet
+      const suggestion = {
+        id: suggestionId,
+        file: fileName,
+        body: formattedBody || suggestionText,
+        type: suggestionType,
+        title: suggestionTitle,
+        lineNumber,
+        lineEnd,
+        diffPosition,
+        side
+      };
+
+      this.commentManager.displaySuggestionEditForm(
+        suggestion,
+        suggestionRow,
+        async (editedText) => {
+          // User clicked Save — now adopt via /edit endpoint
+          try {
+            const reviewId = this.currentPR?.id;
+            const editResponse = await fetch(`/api/reviews/${reviewId}/suggestions/${suggestionId}/edit`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ action: 'adopt_edited', editedText })
+            });
+
+            if (!editResponse.ok) throw new Error('Failed to adopt suggestion with edits');
+            const editResult = await editResponse.json();
+
+            // Collapse the suggestion card
+            this.collapseSuggestionForAdoption(suggestionRow, suggestionId);
+
+            const newComment = this._buildCommentObject({
+              userCommentId: editResult.userCommentId,
+              formattedBody: editResult.formattedBody,
+              fileName, lineNumber, suggestionType, suggestionTitle,
+              suggestionId, diffPosition, side
+            });
+            this.displayUserComment(newComment, suggestionRow);
+            this._notifyAdoption(suggestionId, newComment);
+          } catch (error) {
+            console.error('Error saving edited suggestion:', error);
+            alert(`Failed to save suggestion: ${error.message}`);
+            throw error; // Re-throw so displaySuggestionEditForm can re-enable the save button
+          }
+        },
+        () => {
+          // User clicked Cancel — nothing to revert
+        }
+      );
     } catch (error) {
-      console.error('Error adopting and editing suggestion:', error);
-      alert(`Failed to adopt suggestion: ${error.message}`);
+      console.error('Error editing suggestion:', error);
+      alert(`Failed to edit suggestion: ${error.message}`);
     }
   }
 
@@ -3262,7 +3326,7 @@ class PRManager {
    */
   updateCommentCount() {
     // Count both line-level comments (.user-comment-row) and file-level comments (.file-comment-card.user-comment)
-    const lineComments = document.querySelectorAll('.user-comment-row').length;
+    const lineComments = document.querySelectorAll('.user-comment-row:not(.suggestion-edit-pending)').length;
     const fileComments = document.querySelectorAll('.file-comment-card.user-comment').length;
     const userComments = lineComments + fileComments;
 
@@ -3299,7 +3363,7 @@ class PRManager {
     const submitBtn = document.getElementById('submit-review-btn');
 
     // Count BOTH line-level and file-level comments for validation
-    const lineComments = document.querySelectorAll('.user-comment-row').length;
+    const lineComments = document.querySelectorAll('.user-comment-row:not(.suggestion-edit-pending)').length;
     const fileComments = document.querySelectorAll('.file-comment-card.user-comment').length;
     const totalComments = lineComments + fileComments;
     if (reviewEvent === 'REQUEST_CHANGES' && !reviewBody && totalComments === 0) {