@in-the-loop-labs/pair-review 3.1.3 → 3.2.0

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

@@ -7,7 +7,10 @@
  * are injected on the right edge of each diff line that has comments, showing
  * a person icon (user comments) or sparkles icon (AI suggestions).
  *
- * Clicking an indicator toggles visibility of that line's comments only.
+ * File-level comments (.file-comment-card inside .file-comments-zone) are also
+ * hidden, with an indicator button injected into the file header bar.
+ *
+ * Clicking an indicator toggles visibility of that line's or file's comments.
  */
 
 class CommentMinimizer {
@@ -24,6 +27,8 @@ class CommentMinimizer {
     this._active = false;
     // Track which diff lines have been expanded by the user (Set of diff row elements)
     this._expandedLines = new Set();
+    // Track which file-comments-zones have been expanded (Set of zone elements)
+    this._expandedFiles = new Set();
   }
 
   /** @returns {boolean} Whether minimize mode is active */
@@ -38,6 +43,7 @@ class CommentMinimizer {
   setMinimized(minimized) {
     this._active = minimized;
     this._expandedLines.clear();
+    this._expandedFiles.clear();
 
     const diffContainer = document.getElementById('diff-container');
     if (!diffContainer) return;
@@ -50,6 +56,8 @@ class CommentMinimizer {
       this._removeAllIndicators();
       // Remove any per-line expansion overrides
       document.querySelectorAll('.comment-expanded').forEach(el => el.classList.remove('comment-expanded'));
+      // Remove any per-file expansion overrides
+      document.querySelectorAll('.file-comments-expanded').forEach(el => el.classList.remove('file-comments-expanded'));
     }
   }
 
@@ -103,10 +111,13 @@ class CommentMinimizer {
       lineMap.set(diffRow, entry);
     }
 
-    // Inject indicators
+    // Inject line-level indicators
     for (const [diffRow, info] of lineMap) {
       this._injectIndicator(diffRow, info);
     }
+
+    // Scan file-comments-zones and inject file-header indicators
+    this._refreshFileIndicators();
   }
 
   /**
@@ -266,7 +277,22 @@ class CommentMinimizer {
   expandForElement(element) {
     if (!this._active) return;
 
-    // Find the containing comment/suggestion row
+    // Check if this element is inside a file-comments-zone (file-level comment)
+    const zone = element.closest('.file-comments-zone');
+    if (zone) {
+      if (this._expandedFiles.has(zone)) return; // already expanded
+      this._expandedFiles.add(zone);
+      zone.classList.add('file-comments-expanded');
+      // Update the file-header indicator button
+      const wrapper = zone.closest('.d2h-file-wrapper');
+      const btn = wrapper?.querySelector('.d2h-file-header .file-comment-indicator');
+      if (btn) {
+        btn.classList.add('expanded');
+      }
+      return;
+    }
+
+    // Line-level: find the containing comment/suggestion row
     const commentRow = element.closest('.user-comment-row, .ai-suggestion-row') || element;
     if (!commentRow.classList.contains('user-comment-row') && !commentRow.classList.contains('ai-suggestion-row')) {
       return;
@@ -290,9 +316,130 @@ class CommentMinimizer {
     }
   }
 
-  /** Remove all indicator buttons from the DOM. */
+  // ---------------------------------------------------------------------------
+  // File-level comment indicators
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Scan all file-comments-zones and inject indicator buttons into file headers.
+   */
+  _refreshFileIndicators() {
+    const zones = document.querySelectorAll('.file-comments-zone');
+    for (const zone of zones) {
+      const cards = zone.querySelectorAll('.file-comment-card');
+      if (cards.length === 0) continue;
+
+      // Count comment types
+      const info = { hasUser: false, hasAI: false, hasAdopted: false, userCount: 0, aiCount: 0, adoptedCount: 0 };
+      for (const card of cards) {
+        // Skip collapsed cards (adopted/dismissed originals remain in DOM)
+        if (card.classList.contains('collapsed')) continue;
+
+        if (card.classList.contains('ai-suggestion')) {
+          info.hasAI = true;
+          info.aiCount++;
+        } else if (card.classList.contains('user-comment')) {
+          if (card.classList.contains('adopted-comment')) {
+            info.hasAdopted = true;
+            info.adoptedCount++;
+          } else {
+            info.hasUser = true;
+            info.userCount++;
+          }
+        }
+      }
+
+      if (info.userCount + info.aiCount + info.adoptedCount === 0) continue;
+
+      // Find the file header — zone and header are siblings inside .d2h-file-wrapper
+      const wrapper = zone.closest('.d2h-file-wrapper');
+      const header = wrapper?.querySelector('.d2h-file-header');
+      if (!header) continue;
+
+      this._injectFileIndicator(header, zone, info);
+    }
+  }
+
+  /**
+   * Inject an indicator button into a file header, positioned before the comment button.
+   * @param {HTMLElement} header - The .d2h-file-header element
+   * @param {HTMLElement} zone - The .file-comments-zone element
+   * @param {Object} info - { hasUser, hasAI, hasAdopted, userCount, aiCount, adoptedCount }
+   */
+  _injectFileIndicator(header, zone, info) {
+    // Don't double-inject
+    if (header.querySelector('.file-comment-indicator')) return;
+
+    const btn = document.createElement('button');
+    btn.className = 'file-comment-indicator';
+    btn.type = 'button';
+
+    // Build icon — pick the dominant type icon
+    const icons = [];
+    if (info.hasUser) {
+      icons.push(`<span class="indicator-icon indicator-user">${CommentMinimizer.PERSON_ICON}</span>`);
+    }
+    if (info.hasAdopted) {
+      icons.push(`<span class="indicator-icon indicator-adopted">${CommentMinimizer.AI_COMMENT_ICON}</span>`);
+    }
+    if (info.hasAI) {
+      icons.push(`<span class="indicator-icon indicator-ai">${CommentMinimizer.SPARKLES_ICON}</span>`);
+    }
+
+    const total = info.userCount + info.adoptedCount + info.aiCount;
+    const countBadge = total > 1 ? `<span class="indicator-count">${total}</span>` : '';
+
+    btn.innerHTML = icons.join('') + countBadge;
+
+    const totalLabel = [];
+    if (info.userCount) totalLabel.push(`${info.userCount} file comment${info.userCount !== 1 ? 's' : ''}`);
+    if (info.adoptedCount) totalLabel.push(`${info.adoptedCount} adopted`);
+    if (info.aiCount) totalLabel.push(`${info.aiCount} suggestion${info.aiCount !== 1 ? 's' : ''}`);
+    btn.title = totalLabel.join(', ');
+
+    // Restore expanded state
+    if (this._expandedFiles.has(zone)) {
+      btn.classList.add('expanded');
+    }
+
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      this._toggleFileComments(zone, btn);
+    });
+
+    // Insert before the file-header-comment-btn if present, otherwise append
+    const commentBtn = header.querySelector('.file-header-comment-btn');
+    if (commentBtn) {
+      header.insertBefore(btn, commentBtn);
+    } else {
+      header.appendChild(btn);
+    }
+  }
+
+  /**
+   * Toggle visibility of file-level comments for a specific file.
+   * @param {HTMLElement} zone - The .file-comments-zone element
+   * @param {HTMLElement} btn - The indicator button
+   */
+  _toggleFileComments(zone, btn) {
+    const isExpanded = this._expandedFiles.has(zone);
+
+    if (isExpanded) {
+      this._expandedFiles.delete(zone);
+      btn.classList.remove('expanded');
+      zone.classList.remove('file-comments-expanded');
+    } else {
+      this._expandedFiles.add(zone);
+      btn.classList.add('expanded');
+      zone.classList.add('file-comments-expanded');
+    }
+  }
+
+  /** Remove all indicator buttons (both line-level and file-level) from the DOM. */
   _removeAllIndicators() {
     document.querySelectorAll('.comment-indicator').forEach(btn => btn.remove());
+    document.querySelectorAll('.file-comment-indicator').forEach(btn => btn.remove());
   }
 }
 

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

@@ -17,12 +17,15 @@ class FileCommentManager {
       if (chatBtn && window.chatPanel) {
         e.stopPropagation();
         const suggestionCard = chatBtn.closest('.ai-suggestion');
-        const bodyText = suggestionCard?.dataset?.originalBody
-          ? JSON.parse(suggestionCard.dataset.originalBody) : '';
+        const bodyText = suggestionCard?.dataset?.formattedBody
+          ? JSON.parse(suggestionCard.dataset.formattedBody)
+          : suggestionCard?.dataset?.originalBody
+            ? JSON.parse(suggestionCard.dataset.originalBody) : '';
         window.chatPanel.open({
           reviewId: this.prManager?.currentPR?.id,
           suggestionId: chatBtn.dataset.suggestionId,
           suggestionContext: {
+            suggestionId: chatBtn.dataset.suggestionId || null,
             title: chatBtn.dataset.title || '',
             body: bodyText,
             type: suggestionCard?.querySelector('.ai-suggestion-badge')?.dataset?.type || '',
@@ -312,6 +315,16 @@ class FileCommentManager {
       // Update count badge
       this.updateCommentCount(zone);
 
+      // Refresh minimize-mode indicators so file-header counts stay current
+      if (this.prManager?.commentMinimizer) {
+        this.prManager.commentMinimizer.refreshIndicators();
+        // Auto-expand so the new comment stays visible in minimize mode
+        const newCard = zone.querySelector(`.file-comment-card[data-comment-id="${commentData.id}"]`);
+        if (newCard) {
+          this.prManager.commentMinimizer.expandForElement(newCard);
+        }
+      }
+
       // Notify AI Panel if available
       if (window.aiPanel?.addComment) {
         window.aiPanel.addComment(commentData);
@@ -322,6 +335,8 @@ class FileCommentManager {
         this.prManager.updateCommentCount();
       }
 
+      window.chatPanel?.queueUserActionHint(`[User Action: created comment ${result.commentId}]`);
+
     } catch (error) {
       console.error('Error saving file-level comment:', error);
       if (window.toast) {
@@ -432,6 +447,7 @@ class FileCommentManager {
     // Store original markdown body for adopt functionality via extractSuggestionData
     // Use JSON.stringify to preserve newlines and special characters (matches line-level suggestions)
     card.dataset.originalBody = JSON.stringify(suggestion.body || '');
+    card.dataset.formattedBody = JSON.stringify(suggestion.formattedBody || '');
 
     // Store target info on the card for reliable retrieval in getFileAndLineInfo
     // File-level suggestions don't have line numbers, just the file name
@@ -604,6 +620,16 @@ class FileCommentManager {
       this.displayUserComment(zone, commentData);
       this.updateCommentCount(zone);
 
+      // Refresh minimize-mode indicators so file-header counts stay current
+      if (this.prManager?.commentMinimizer) {
+        this.prManager.commentMinimizer.refreshIndicators();
+        // Auto-expand so the new comment stays visible in minimize mode
+        const newCard = zone.querySelector(`.file-comment-card[data-comment-id="${commentData.id}"]`);
+        if (newCard) {
+          this.prManager.commentMinimizer.expandForElement(newCard);
+        }
+      }
+
       // Update parent comment count for Preview button
       if (this.prManager?.updateCommentCount) {
         this.prManager.updateCommentCount();
@@ -619,6 +645,8 @@ class FileCommentManager {
         window.aiPanel.updateFindingStatus(suggestion.id, 'adopted');
       }
 
+      window.chatPanel?.queueUserActionHint(`[User Action: adopted suggestion ${suggestion.id}]`);
+
     } catch (error) {
       console.error('Error adopting suggestion:', error);
       if (window.toast) {
@@ -657,11 +685,18 @@ class FileCommentManager {
 
       this.updateCommentCount(zone);
 
+      // Refresh minimize-mode indicators so file-header counts stay current
+      if (this.prManager?.commentMinimizer) {
+        this.prManager.commentMinimizer.refreshIndicators();
+      }
+
       // Update finding status in AI Panel (mark suggestion as dismissed)
       if (window.aiPanel?.updateFindingStatus) {
         window.aiPanel.updateFindingStatus(suggestionId, 'dismissed');
       }
 
+      window.chatPanel?.queueUserActionHint(`[User Action: dismissed suggestion ${suggestionId}]`);
+
     } catch (error) {
       console.error('Error dismissing suggestion:', error);
       if (window.toast) {
@@ -703,6 +738,13 @@ class FileCommentManager {
       // Update comment count (for consistency with dismissAISuggestion)
       this.updateCommentCount(zone);
 
+      // Refresh minimize-mode indicators so file-header counts stay current
+      if (this.prManager?.commentMinimizer) {
+        this.prManager.commentMinimizer.refreshIndicators();
+      }
+
+      window.chatPanel?.queueUserActionHint(`[User Action: restored suggestion ${suggestionId}]`);
+
     } catch (error) {
       console.error('Error restoring suggestion:', error);
       if (window.toast) {
@@ -848,6 +890,16 @@ class FileCommentManager {
       this.displayUserComment(zone, commentData);
       this.updateCommentCount(zone);
 
+      // Refresh minimize-mode indicators so file-header counts stay current
+      if (this.prManager?.commentMinimizer) {
+        this.prManager.commentMinimizer.refreshIndicators();
+        // Auto-expand so the new comment stays visible in minimize mode
+        const newCard = zone.querySelector(`.file-comment-card[data-comment-id="${commentData.id}"]`);
+        if (newCard) {
+          this.prManager.commentMinimizer.expandForElement(newCard);
+        }
+      }
+
       // Update parent comment count for Preview button
       if (this.prManager?.updateCommentCount) {
         this.prManager.updateCommentCount();
@@ -863,6 +915,8 @@ class FileCommentManager {
         window.aiPanel.updateFindingStatus(suggestion.id, 'adopted');
       }
 
+      window.chatPanel?.queueUserActionHint(`[User Action: adopted suggestion ${suggestion.id}]`);
+
     } catch (error) {
       console.error('Error adopting suggestion with edit:', error);
       if (window.toast) {
@@ -1012,6 +1066,11 @@ class FileCommentManager {
 
       this.updateCommentCount(zone);
 
+      // Refresh minimize-mode indicators so file-header counts stay current
+      if (this.prManager?.commentMinimizer) {
+        this.prManager.commentMinimizer.refreshIndicators();
+      }
+
       // Update parent comment count
       if (this.prManager?.updateCommentCount) {
         this.prManager.updateCommentCount();
@@ -1029,6 +1088,11 @@ class FileCommentManager {
         window.aiPanel.updateFindingStatus(apiResult.dismissedSuggestionId, 'dismissed');
       }
 
+      if (apiResult.dismissedSuggestionId) {
+        window.chatPanel?.queueUserActionHint(`[User Action: dismissed suggestion ${apiResult.dismissedSuggestionId}]`);
+      }
+      window.chatPanel?.queueUserActionHint(`[User Action: dismissed comment ${commentId}]`);
+
     } catch (error) {
       console.error('Error deleting comment:', error);
       if (window.toast) {

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

@@ -24,8 +24,9 @@ class SuggestionManager {
           reviewId: this.prManager?.currentPR?.id,
           suggestionId: chatBtn.dataset.suggestionId,
           suggestionContext: {
+            suggestionId: chatBtn.dataset.suggestionId || null,
             title: chatBtn.dataset.title || suggestionData.suggestionTitle || '',
-            body: suggestionData.suggestionText || '',
+            body: suggestionData.formattedBody || suggestionData.suggestionText || '',
             type: suggestionData.suggestionType || '',
             file: chatBtn.dataset.file || '',
             line_start: suggestionDiv?.dataset?.lineNumber ? parseInt(suggestionDiv.dataset.lineNumber) : null,