@in-the-loop-labs/pair-review 1.6.2 → 2.0.0

package/public/js/modules/analysis-history.js

@@ -147,7 +147,7 @@ class AnalysisHistoryManager {
     }
 
     try {
-      const response = await fetch(`/api/analysis-runs/${this.reviewId}`);
+      const response = await fetch(`/api/analyses/runs?reviewId=${this.reviewId}`);
       if (!response.ok) {
         return { runs: [], error: `HTTP ${response.status}` };
       }
@@ -267,6 +267,7 @@ class AnalysisHistoryManager {
           </div>
           <div class="analysis-history-item-meta">
             <span>${timeAgo}</span>
+            ${run.status === 'completed' && run.total_suggestions > 0 ? `<span class="analysis-history-chat-btn" data-run-id="${run.id}" title="Chat about this run" role="button" tabindex="-1"><svg viewBox="0 0 16 16" fill="currentColor"><path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"/></svg></span>` : ''}
           </div>
         </button>
       `;
@@ -320,6 +321,19 @@ class AnalysisHistoryManager {
         item.classList.remove('previewing');
       });
     });
+
+    // Chat button handlers
+    const chatBtns = this.listElement.querySelectorAll('.analysis-history-chat-btn');
+    chatBtns.forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        const runId = btn.dataset.runId;
+        if (window.chatPanel) {
+          window.chatPanel.addAnalysisRunContext(runId);
+        }
+      });
+    });
   }
 
   /**
@@ -403,8 +417,7 @@ class AnalysisHistoryManager {
     const duration = this.formatDuration(run.started_at, run.completed_at);
     const suggestionCount = run.total_suggestions || 0;
 
-    // Get the tier for this analysis run's model
-    const tier = this.getTierForModel(run.model);
+    const tier = run.tier || null;
 
     // Format HEAD SHA - show abbreviated version with full SHA in title
     const headSha = run.head_sha;
@@ -440,7 +453,7 @@ class AnalysisHistoryManager {
       </div>
       <div class="analysis-preview-row">
         <span class="analysis-preview-label">Tier</span>
-        <span class="analysis-preview-value">${this.escapeHtml(tier || 'unknown')}</span>
+        <span class="analysis-preview-value">${this.escapeHtml(this.formatTierDisplayName(tier) || 'unknown')}</span>
       </div>`;
     }
 
@@ -714,23 +727,12 @@ class AnalysisHistoryManager {
 
   /**
    * Parse a timestamp string, ensuring UTC interpretation for SQLite timestamps.
-   * SQLite's CURRENT_TIMESTAMP produces strings like "2024-01-20 15:30:00" without
-   * timezone indicator. JavaScript's Date() would interpret these as local time,
-   * but they're actually UTC. This helper ensures correct UTC parsing.
+   * Delegates to the shared window.parseTimestamp utility (see public/js/utils/time.js).
    * @param {string} timestamp - Timestamp string (ISO 8601 or SQLite format)
    * @returns {Date} Parsed Date object
    */
   parseTimestamp(timestamp) {
-    if (!timestamp) return new Date(NaN);
-
-    // If the timestamp already has timezone info (ends with Z or +/-offset), parse as-is
-    if (/Z$|[+-]\d{2}:\d{2}$/.test(timestamp)) {
-      return new Date(timestamp);
-    }
-
-    // SQLite CURRENT_TIMESTAMP format: "YYYY-MM-DD HH:MM:SS" (no timezone, but is UTC)
-    // Append 'Z' to interpret as UTC
-    return new Date(timestamp + 'Z');
+    return window.parseTimestamp(timestamp);
   }
 
   /**
@@ -834,57 +836,6 @@ class AnalysisHistoryManager {
     return statusMap[status] || { text: status || 'unknown', cssClass: 'analysis-preview-status-unknown' };
   }
 
-  /**
-   * Get the tier for a given model ID
-   * Maps model IDs to their corresponding tiers (fast, balanced, thorough)
-   * @param {string} modelId - The model identifier (e.g., 'haiku', 'sonnet', 'opus', 'flash', 'pro')
-   * @returns {string|null} The tier name or null if unknown
-   */
-  getTierForModel(modelId) {
-    if (!modelId) return null;
-
-    // Model to tier mapping (matches backend provider definitions)
-    const modelTiers = {
-      // Claude models
-      'haiku': 'fast',
-      'sonnet': 'balanced',
-      'sonnet-4.5': 'balanced',
-      'sonnet-4.6': 'balanced',
-      'opus': 'thorough',
-      'opus-4.5': 'thorough',
-      'opus-4.6-low': 'balanced',
-      'opus-4.6-medium': 'balanced',
-      'opus-4.6-1m': 'balanced',
-      // Gemini models
-      'flash': 'fast',
-      'pro': 'balanced',
-      'ultra': 'thorough',
-      // Codex/OpenAI models
-      'gpt-4o-mini': 'fast',
-      'gpt-4o': 'balanced',
-      'o1': 'thorough',
-      'o1-mini': 'balanced',
-      // Copilot models
-      'gpt-4': 'balanced',
-      // Pi models
-      'default': 'balanced',
-      'multi-model': 'thorough',
-      'review-roulette': 'thorough'
-    };
-
-    return modelTiers[modelId] || null;
-  }
-
-  /**
-   * Format a tier name for display (uppercase, used for badges)
-   * @param {string} tier - The tier identifier (e.g., 'fast', 'balanced', 'thorough')
-   * @returns {string} Display name in uppercase
-   */
-  formatTierName(tier) {
-    if (!tier) return '';
-    return tier.toUpperCase();
-  }
-
   /**
    * Format a tier name for display as plain text (capitalized)
    * @param {string} tier - The tier identifier (e.g., 'fast', 'balanced', 'thorough')

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

@@ -18,6 +18,29 @@ class CommentManager {
     this.prManager = prManagerRef;
     // Current comment form element
     this.currentCommentForm = null;
+
+    // Event delegation for "Ask about this" chat button on user comments
+    document.addEventListener('click', (e) => {
+      const chatBtn = e.target.closest('.user-comment-row .btn-chat-comment');
+      if (chatBtn && window.chatPanel) {
+        e.stopPropagation();
+        const commentRow = chatBtn.closest('.user-comment-row');
+        const bodyEl = commentRow?.querySelector('.user-comment-body');
+        const originalMarkdown = bodyEl?.dataset?.originalMarkdown || bodyEl?.textContent || '';
+        window.chatPanel.open({
+          reviewId: this.prManager?.currentPR?.id,
+          commentContext: {
+            commentId: chatBtn.dataset.chatCommentId,
+            body: originalMarkdown,
+            file: chatBtn.dataset.chatFile || '',
+            line_start: chatBtn.dataset.chatLineStart ? parseInt(chatBtn.dataset.chatLineStart) : null,
+            line_end: chatBtn.dataset.chatLineEnd ? parseInt(chatBtn.dataset.chatLineEnd) : null,
+            parentId: chatBtn.dataset.chatParentId || null,
+            source: 'user'
+          }
+        });
+      }
+    });
   }
 
   /**
@@ -100,6 +123,10 @@ class CommentManager {
         ></textarea>
         <div class="comment-form-actions">
           <button class="btn btn-sm btn-primary save-comment-btn" disabled>Save</button>
+          <button class="ai-action ai-action-chat btn-chat-from-comment" title="Chat about these lines">
+            <svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16"><path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"/></svg>
+            Chat
+          </button>
           <button class="btn btn-sm btn-secondary cancel-comment-btn">Cancel</button>
         </div>
       </div>
@@ -138,6 +165,31 @@ class CommentManager {
       }
     });
 
+    // Chat button handler - opens chat panel with line context card
+    const chatFromCommentBtn = td.querySelector('.btn-chat-from-comment');
+    if (chatFromCommentBtn) {
+      chatFromCommentBtn.addEventListener('click', () => {
+        if (!window.chatPanel) return;
+        const unsavedText = textarea.value.trim();
+        const file = textarea.dataset.file;
+        const lineStart = textarea.dataset.line ? parseInt(textarea.dataset.line) : null;
+        const lineEnd = textarea.dataset.lineEnd ? parseInt(textarea.dataset.lineEnd) : lineStart;
+
+        this.hideCommentForm();
+        if (lineTracker) lineTracker.clearRangeSelection();
+        window.chatPanel.open({
+          commentContext: {
+            type: 'line',
+            body: unsavedText || null,
+            file: file || '',
+            line_start: lineStart,
+            line_end: lineEnd,
+            source: 'user'
+          }
+        });
+      });
+    }
+
     // Initialize textarea height and suggestion button state
     this.autoResizeTextarea(textarea);
     this.updateSuggestionButtonState(textarea, suggestionBtn);
@@ -358,13 +410,10 @@ class CommentManager {
       const reviewId = this.prManager?.currentPR?.id;
       const headSha = this.prManager?.currentPR?.head_sha;
 
-      const response = await fetch('/api/user-comment', {
+      const response = await fetch(`/api/reviews/${reviewId}/comments`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          review_id: reviewId,
           file: fileName,
           line_start: lineNumber,
           line_end: endLineNumber,
@@ -506,8 +555,10 @@ class CommentManager {
           <span class="user-comment-line-info">${lineInfo}</span>
           ${expandedContextIndicator}
           ${metadataHTML}
-          <span class="user-comment-timestamp">${new Date(comment.created_at).toLocaleString()}</span>
           <div class="user-comment-actions">
+            <button class="btn-chat-comment" title="Chat about comment" data-chat-comment-id="${comment.id}" data-chat-file="${escapeHtml(comment.file || '')}" data-chat-line-start="${comment.line_start ?? ''}" data-chat-line-end="${comment.line_end || comment.line_start || ''}" data-chat-parent-id="${comment.parent_id || ''}">
+              <svg viewBox="0 0 16 16" fill="currentColor"><path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"/></svg>
+            </button>
             <button class="btn-edit-comment" onclick="prManager.editUserComment(${comment.id})" title="Edit comment">
               <svg class="octicon" 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>
@@ -576,19 +627,6 @@ class CommentManager {
           <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>` : ''}
-          <span class="user-comment-timestamp">Editing comment...</span>
-          <div class="user-comment-actions">
-            <button class="btn-edit-comment" onclick="prManager.editUserComment(${comment.id})" title="Edit comment">
-              <svg class="octicon" 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>
-            </button>
-            <button class="btn-delete-comment" onclick="prManager.deleteUserComment(${comment.id})" title="Dismiss comment">
-              <svg class="octicon" viewBox="0 0 16 16" width="16" height="16">
-                <path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path>
-              </svg>
-            </button>
-          </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>

package/public/js/modules/diff-context.js

@@ -0,0 +1,176 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+/**
+ * DiffContext - Extract diff hunks for chat context enrichment.
+ * Provides utilities to pull relevant unified diff sections for
+ * a given line range, so the chat agent receives code context
+ * alongside suggestion/comment metadata.
+ */
+(function () {
+  'use strict';
+
+  const HUNK_HEADER_RE = /^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/;
+  const MAX_HUNK_LINES = 100;
+  const CONTEXT_PADDING = 20;
+
+  /**
+   * Extract unified diff hunks overlapping the given line range.
+   * @param {string} patchText - Raw unified diff for one file (hunk headers + content lines)
+   * @param {number} lineStart - Start line number (1-based, new-side unless side='LEFT')
+   * @param {number} lineEnd - End line number (1-based, inclusive)
+   * @param {string} [side] - 'LEFT' to match old-side line numbers, otherwise new-side
+   * @returns {string|null} Matching hunks as unified diff text, or null
+   */
+  function extractHunkForLines(patchText, lineStart, lineEnd, side) {
+    if (!patchText) return null;
+
+    const lines = patchText.split('\n');
+    const hunks = [];
+
+    // Collect hunks: each hunk is { header, headerLine, contentLines }
+    let currentHunk = null;
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      if (line.startsWith('@@')) {
+        if (currentHunk) {
+          hunks.push(currentHunk);
+        }
+        currentHunk = { headerLine: line, contentLines: [] };
+      } else if (currentHunk) {
+        currentHunk.contentLines.push(line);
+      }
+    }
+    if (currentHunk) {
+      hunks.push(currentHunk);
+    }
+
+    const matchingParts = [];
+
+    for (const hunk of hunks) {
+      const match = HUNK_HEADER_RE.exec(hunk.headerLine);
+      if (!match) continue;
+
+      const oldStart = parseInt(match[1], 10);
+      const oldCount = match[2] !== undefined ? parseInt(match[2], 10) : 1;
+      const newStart = parseInt(match[3], 10);
+      const newCount = match[4] !== undefined ? parseInt(match[4], 10) : 1;
+
+      let hunkStart, hunkEnd;
+      if (side === 'LEFT') {
+        hunkStart = oldStart;
+        hunkEnd = oldStart + oldCount - 1;
+      } else {
+        hunkStart = newStart;
+        hunkEnd = newStart + newCount - 1;
+      }
+
+      // Check overlap: [lineStart, lineEnd] vs [hunkStart, hunkEnd]
+      if (lineStart > hunkEnd || lineEnd < hunkStart) {
+        continue;
+      }
+
+      let contentLines = hunk.contentLines;
+
+      // Truncate if content exceeds MAX_HUNK_LINES
+      if (contentLines.length > MAX_HUNK_LINES) {
+        contentLines = truncateHunkContent(
+          contentLines,
+          lineStart,
+          lineEnd,
+          side,
+          side === 'LEFT' ? oldStart : newStart
+        );
+      }
+
+      matchingParts.push(hunk.headerLine + '\n' + contentLines.join('\n'));
+    }
+
+    if (matchingParts.length === 0) return null;
+    return matchingParts.join('\n');
+  }
+
+  /**
+   * Truncate hunk content lines around the referenced line range.
+   * @param {string[]} contentLines - Content lines of the hunk (after @@ header)
+   * @param {number} lineStart - Start of the referenced range
+   * @param {number} lineEnd - End of the referenced range
+   * @param {string} side - 'LEFT' or other
+   * @param {number} startCounter - Starting line number for the relevant side
+   * @returns {string[]} Truncated content lines with markers
+   */
+  function truncateHunkContent(contentLines, lineStart, lineEnd, side, startCounter) {
+    // Find content-line indices that fall within [lineStart, lineEnd]
+    let firstIndex = -1;
+    let lastIndex = -1;
+    let counter = startCounter;
+
+    for (let i = 0; i < contentLines.length; i++) {
+      const line = contentLines[i];
+      const prefix = line.charAt(0);
+
+      let countsForSide;
+      if (side === 'LEFT') {
+        // Old-side: '-' and ' ' (context) increment, '+' does not
+        countsForSide = prefix === '-' || prefix === ' ';
+      } else {
+        // New-side: '+' and ' ' (context) increment, '-' does not
+        countsForSide = prefix === '+' || prefix === ' ';
+      }
+
+      if (countsForSide) {
+        if (counter >= lineStart && counter <= lineEnd) {
+          if (firstIndex === -1) firstIndex = i;
+          lastIndex = i;
+        }
+        counter++;
+      }
+    }
+
+    // If we didn't find any matching lines, keep the whole thing
+    // (the hunk overlaps by header range but maybe content is all removals/additions on the other side)
+    if (firstIndex === -1) {
+      firstIndex = 0;
+      lastIndex = contentLines.length - 1;
+    }
+
+    const keepStart = Math.max(0, firstIndex - CONTEXT_PADDING);
+    const keepEnd = Math.min(contentLines.length - 1, lastIndex + CONTEXT_PADDING);
+
+    const result = [];
+    if (keepStart > 0) {
+      result.push('// ... (truncated)');
+    }
+    for (let i = keepStart; i <= keepEnd; i++) {
+      result.push(contentLines[i]);
+    }
+    if (keepEnd < contentLines.length - 1) {
+      result.push('// ... (truncated)');
+    }
+
+    return result;
+  }
+
+  /**
+   * Get the line ranges covered by all hunks in a patch.
+   * @param {string} patchText - Raw unified diff for one file
+   * @returns {Array<{start: number, end: number}>} New-side ranges for each hunk
+   */
+  function extractHunkRangesForFile(patchText) {
+    if (!patchText) return [];
+
+    const lines = patchText.split('\n');
+    const ranges = [];
+
+    for (let i = 0; i < lines.length; i++) {
+      const match = HUNK_HEADER_RE.exec(lines[i]);
+      if (!match) continue;
+
+      const newStart = parseInt(match[3], 10);
+      const newCount = match[4] !== undefined ? parseInt(match[4], 10) : 1;
+      ranges.push({ start: newStart, end: newStart + newCount - 1 });
+    }
+
+    return ranges;
+  }
+
+  window.DiffContext = { extractHunkForLines, extractHunkRangesForFile };
+})();

package/public/js/modules/diff-renderer.js

@@ -293,6 +293,36 @@ class DiffRenderer {
         options.onCommentButtonClick(e, row, lineNumber, fileName, line);
       };
 
+      if (options.onChatButtonClick) {
+        const chatButton = document.createElement('button');
+        chatButton.className = 'chat-line-btn ai-action-chat';
+        chatButton.title = 'Chat about this line (drag to select range)';
+        chatButton.innerHTML = `<svg viewBox="0 0 16 16" fill="currentColor" width="14" height="14">
+          <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"/>
+        </svg>`;
+
+        // Share drag machinery with comment button via potentialDragStart
+        chatButton.onmousedown = (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          const side = line.type === 'delete' ? 'LEFT' : 'RIGHT';
+          if (options.lineTracker) {
+            options.lineTracker.potentialDragStart = {
+              row, lineNumber, fileName, button: chatButton,
+              isDeletedLine: line.type === 'delete', side, isChat: true
+            };
+          }
+        };
+
+        chatButton.onclick = (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          options.onChatButtonClick(e, row, lineNumber, fileName, line);
+        };
+
+        lineNumContent.appendChild(chatButton);
+      }
+
       lineNumContent.appendChild(commentButton);
     }