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

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

@@ -5,28 +5,60 @@
  */
 
 class FileCommentManager {
-  // Category to emoji mapping for formatting adopted comments (matches SuggestionManager)
-  static CATEGORY_EMOJI_MAP = {
-    'bug': '\u{1F41B}',           // bug
-    'improvement': '\u{1F4A1}',   // lightbulb
-    'suggestion': '\u{1F4AD}',    // thought balloon
-    'design': '\u{1F3D7}',        // building construction
-    'performance': '\u{1F680}',   // rocket
-    'security': '\u{1F512}',      // lock
-    'refactor': '\u{1F527}',      // wrench
-    'documentation': '\u{1F4DD}', // memo
-    'test': '\u{2705}',           // white heavy check mark
-    'style': '\u{1F3A8}',         // artist palette
-    'chore': '\u{1F9F9}',         // broom
-    'feat': '\u{2728}',           // sparkles
-    'fix': '\u{1F527}'            // wrench
-  };
-
   constructor(prManagerRef) {
     // Reference to parent PRManager for API calls and state access
     this.prManager = prManagerRef;
     // Track file-level comments by file path
     this.fileComments = new Map();
+
+    // Event delegation for "Ask about this" chat button on file-level suggestions
+    document.addEventListener('click', (e) => {
+      const chatBtn = e.target.closest('.file-comments-zone .ai-action-chat');
+      if (chatBtn && window.chatPanel) {
+        e.stopPropagation();
+        const suggestionCard = chatBtn.closest('.ai-suggestion');
+        const bodyText = suggestionCard?.dataset?.originalBody
+          ? JSON.parse(suggestionCard.dataset.originalBody) : '';
+        window.chatPanel.open({
+          reviewId: this.prManager?.currentPR?.id,
+          suggestionId: chatBtn.dataset.suggestionId,
+          suggestionContext: {
+            title: chatBtn.dataset.title || '',
+            body: bodyText,
+            type: suggestionCard?.querySelector('.ai-suggestion-badge')?.dataset?.type || '',
+            file: chatBtn.dataset.file || '',
+            line_start: null,
+            line_end: null,
+            side: suggestionCard?.dataset?.side || 'RIGHT',
+            reasoning: null
+          }
+        });
+      }
+    });
+
+    // Event delegation for "Ask about this" chat button on file-level user comments
+    document.addEventListener('click', (e) => {
+      const chatBtn = e.target.closest('.file-comments-zone .btn-chat-comment');
+      if (chatBtn && window.chatPanel) {
+        e.stopPropagation();
+        const commentCard = chatBtn.closest('.file-comment-card');
+        const bodyEl = commentCard?.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: null,
+            line_end: null,
+            parentId: chatBtn.dataset.chatParentId || null,
+            source: 'user',
+            isFileLevel: true
+          }
+        });
+      }
+    });
   }
 
   /**
@@ -35,7 +67,7 @@ class FileCommentManager {
    * @returns {string} Emoji character
    */
   getCategoryEmoji(category) {
-    return FileCommentManager.CATEGORY_EMOJI_MAP[category] || '\u{1F4AC}';
+    return window.CategoryEmoji?.getEmoji(category) || '\u{1F4AC}';
   }
 
   /**
@@ -66,50 +98,33 @@ class FileCommentManager {
    */
   _getFileCommentEndpoint(operation, options = {}) {
     const reviewId = this.prManager?.currentPR?.id;
-    const reviewType = this.prManager?.currentPR?.reviewType;
     const headSha = this.prManager?.currentPR?.head_sha;
-    const isLocal = reviewType === 'local';
 
     let endpoint;
     let requestBody = null;
 
     switch (operation) {
       case 'create':
-        endpoint = isLocal
-          ? `/api/local/${reviewId}/file-comment`
-          : '/api/file-comment';
-
-        requestBody = isLocal
-          ? {
-              file: options.file,
-              body: options.body,
-              parent_id: options.parent_id,
-              type: options.type,
-              title: options.title
-            }
-          : {
-              review_id: reviewId,
-              file: options.file,
-              body: options.body,
-              commit_sha: headSha,
-              parent_id: options.parent_id,
-              type: options.type,
-              title: options.title
-            };
+        endpoint = `/api/reviews/${reviewId}/comments`;
+
+        requestBody = {
+          file: options.file,
+          body: options.body,
+          commit_sha: headSha,
+          parent_id: options.parent_id,
+          type: options.type,
+          title: options.title
+        };
         break;
 
       case 'update':
-        endpoint = isLocal
-          ? `/api/local/${reviewId}/file-comment/${options.commentId}`
-          : `/api/user-comment/${options.commentId}`;
+        endpoint = `/api/reviews/${reviewId}/comments/${options.commentId}`;
 
         requestBody = { body: options.body };
         break;
 
       case 'delete':
-        endpoint = isLocal
-          ? `/api/local/${reviewId}/file-comment/${options.commentId}`
-          : `/api/user-comment/${options.commentId}`;
+        endpoint = `/api/reviews/${reviewId}/comments/${options.commentId}`;
 
         // No body needed for DELETE
         break;
@@ -174,6 +189,10 @@ class FileCommentManager {
       ></textarea>
       <div class="file-comment-form-footer">
         <button class="file-comment-form-btn submit submit-btn" disabled>Save</button>
+        <button class="ai-action ai-action-chat btn-chat-from-comment" title="Chat about this file">
+          <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="file-comment-form-btn cancel cancel-btn">Cancel</button>
       </div>
     `;
@@ -221,6 +240,27 @@ class FileCommentManager {
       }
     });
 
+    // Chat button handler - opens chat panel with file-level context
+    const chatFromCommentBtn = form.querySelector('.btn-chat-from-comment');
+    if (chatFromCommentBtn) {
+      chatFromCommentBtn.addEventListener('click', () => {
+        if (!window.chatPanel) return;
+        const unsavedText = textarea.value.trim();
+        this.hideCommentForm(zone);
+        window.chatPanel.open({
+          commentContext: {
+            type: 'line',
+            body: unsavedText || null,
+            file: fileName || '',
+            line_start: null,
+            line_end: null,
+            source: 'user',
+            isFileLevel: true
+          }
+        });
+      });
+    }
+
   }
 
   /**
@@ -362,8 +402,10 @@ class FileCommentManager {
         <span class="file-comment-badge" title="Comment applies to the entire file">File comment</span>
         ${praiseBadge}
         ${titleHtml}
-        <span class="user-comment-timestamp">${this.formatTimestamp(comment.created_at)}</span>
         <div class="user-comment-actions">
+          <button class="btn-chat-comment" title="Chat about comment" data-chat-comment-id="${comment.id}" data-chat-file="${this.escapeHtml(comment.file || '')}" 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" 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>
@@ -455,13 +497,13 @@ class FileCommentManager {
           ${categoryLabel ? `<span class="ai-suggestion-category">${this.escapeHtml(categoryLabel)}</span>` : ''}
           <span class="ai-title">${this.escapeHtml(suggestion.title || '')}</span>
         </div>
-        ${suggestion.reasoning && suggestion.reasoning.length > 0 ? `
         <div class="ai-suggestion-header-right">
+          ${suggestion.reasoning && suggestion.reasoning.length > 0 ? `
           <button class="btn-reasoning-toggle" title="View reasoning" data-suggestion-id="${suggestion.id}" data-reasoning="${encodeURIComponent(JSON.stringify(suggestion.reasoning))}">
             <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M21.33 12.91c.09 1.55-.62 3.04-1.89 3.95l.77 1.49c.23.45.26.98.06 1.45c-.19.47-.58.84-1.06 1l-.79.25a1.69 1.69 0 0 1-1.86-.55L14.44 18c-.89-.15-1.73-.53-2.44-1.1c-.5.15-1 .23-1.5.23c-.88 0-1.76-.27-2.5-.79c-.53.16-1.07.23-1.62.22c-.79.01-1.57-.15-2.3-.45a4.1 4.1 0 0 1-2.43-3.61c-.08-.72.04-1.45.35-2.11c-.29-.75-.32-1.57-.07-2.33C2.3 7.11 3 6.32 3.87 5.82c.58-1.69 2.21-2.82 4-2.7c1.6-1.5 4.05-1.66 5.83-.37c.42-.11.86-.17 1.3-.17c1.36-.03 2.65.57 3.5 1.64c2.04.53 3.5 2.35 3.58 4.47c.05 1.11-.25 2.2-.86 3.13c.07.36.11.72.11 1.09m-5-1.41c.57.07 1.02.5 1.02 1.07a1 1 0 0 1-1 1h-.63c-.32.9-.88 1.69-1.62 2.29c.25.09.51.14.77.21c5.13-.07 4.53-3.2 4.53-3.25a2.59 2.59 0 0 0-2.69-2.49a1 1 0 0 1-1-1a1 1 0 0 1 1-1c1.23.03 2.41.49 3.33 1.3c.05-.29.08-.59.08-.89c-.06-1.24-.62-2.32-2.87-2.53c-1.25-2.96-4.4-1.32-4.4-.4c-.03.23.21.72.25.75a1 1 0 0 1 1 1c0 .55-.45 1-1 1c-.53-.02-1.03-.22-1.43-.56c-.48.31-1.03.5-1.6.56c-.57.05-1.04-.35-1.07-.9a.97.97 0 0 1 .88-1.1c.16-.02.94-.14.94-.77c0-.66.25-1.29.68-1.79c-.92-.25-1.91.08-2.91 1.29C6.75 5 6 5.25 5.45 7.2C4.5 7.67 4 8 3.78 9c1.08-.22 2.19-.13 3.22.25c.5.19.78.75.59 1.29c-.19.52-.77.78-1.29.59c-.73-.32-1.55-.34-2.3-.06c-.32.27-.32.83-.32 1.27c0 .74.37 1.43 1 1.83c.53.27 1.12.41 1.71.4q-.225-.39-.39-.81a1.038 1.038 0 0 1 1.96-.68c.4 1.14 1.42 1.92 2.62 2.05c1.37-.07 2.59-.88 3.19-2.13c.23-1.38 1.34-1.5 2.56-1.5m2 7.47l-.62-1.3l-.71.16l1 1.25zm-4.65-8.61a1 1 0 0 0-.91-1.03c-.71-.04-1.4.2-1.93.67c-.57.58-.87 1.38-.84 2.19a1 1 0 0 0 1 1c.57 0 1-.45 1-1c0-.27.07-.54.23-.76c.12-.1.27-.15.43-.15c.55.03 1.02-.38 1.02-.92"/></svg>
           </button>
+          ` : ''}
         </div>
-        ` : ''}
       </div>
       <div class="ai-suggestion-collapsed-content">
         ${suggestion.type === 'praise'
@@ -495,6 +537,10 @@ class FileCommentManager {
           <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>
+        <button class="ai-action ai-action-chat" title="Chat about suggestion" data-suggestion-id="${suggestion.id}" data-file="${this.escapeHtml(suggestion.file || '')}" data-title="${this.escapeHtml(suggestion.title || '')}">
+          <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="ai-action ai-action-dismiss">
           <svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>
           Dismiss
@@ -534,37 +580,19 @@ class FileCommentManager {
    */
   async adoptAISuggestion(zone, suggestion) {
     try {
-      // Format the comment body with category prefix (matches line-level behavior)
-      const formattedBody = this.formatAdoptedComment(suggestion.body, suggestion.type);
+      // Use the atomic /adopt endpoint which creates the user comment, sets parent_id
+      // linkage, and updates suggestion status to 'adopted' in a single request
+      const reviewId = this.prManager?.currentPR?.id;
+      const adoptEndpoint = `/api/reviews/${reviewId}/suggestions/${suggestion.id}/adopt`;
 
-      // Create a file-level user comment from the suggestion, including parent_id/type/title for adopted suggestions
-      const { endpoint, requestBody } = this._getFileCommentEndpoint('create', {
-        file: suggestion.file,
-        body: formattedBody,
-        parent_id: suggestion.id,
-        type: suggestion.type,
-        title: suggestion.title
-      });
-
-      const createResponse = await fetch(endpoint, {
+      const adoptResponse = await fetch(adoptEndpoint, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(requestBody)
+        headers: { 'Content-Type': 'application/json' }
       });
 
-      if (!createResponse.ok) throw new Error('Failed to create user comment');
-
-      const createResult = await createResponse.json();
-
-      // Update the AI suggestion status to adopted (mode-aware endpoint)
-      const statusEndpoint = this._getSuggestionStatusEndpoint(suggestion.id);
-      const statusResponse = await fetch(statusEndpoint, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ status: 'adopted' })
-      });
+      if (!adoptResponse.ok) throw new Error('Failed to adopt suggestion');
 
-      if (!statusResponse.ok) throw new Error('Failed to update suggestion status');
+      const adoptResult = await adoptResponse.json();
 
       // Collapse the AI suggestion card instead of removing it
       const suggestionCard = zone.querySelector(`[data-suggestion-id="${suggestion.id}"]`);
@@ -577,9 +605,12 @@ class FileCommentManager {
         }
       }
 
+      // Format the comment body with category prefix for display (matches server-side formatting)
+      const formattedBody = this.formatAdoptedComment(suggestion.body, suggestion.type);
+
       // Display as user comment with formatted body
       const commentData = {
-        id: createResult.commentId,
+        id: adoptResult.userCommentId,
         file: suggestion.file,
         body: formattedBody,
         source: 'user',
@@ -793,34 +824,23 @@ class FileCommentManager {
       // Format the edited body with category prefix (matches line-level behavior)
       const formattedBody = this.formatAdoptedComment(editedBody, suggestion.type);
 
-      // Create a file-level user comment with the edited body, including parent_id/type/title for adopted suggestions
-      const { endpoint, requestBody } = this._getFileCommentEndpoint('create', {
-        file: suggestion.file,
-        body: formattedBody,
-        parent_id: suggestion.id,
-        type: suggestion.type,
-        title: suggestion.title
-      });
+      // Use the /edit endpoint which atomically creates a user comment with the edited
+      // body and sets the suggestion status to 'adopted' with parent_id linkage
+      const reviewId = this.prManager?.currentPR?.id;
+      const editEndpoint = `/api/reviews/${reviewId}/suggestions/${suggestion.id}/edit`;
 
-      const createResponse = await fetch(endpoint, {
+      const editResponse = await fetch(editEndpoint, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(requestBody)
+        body: JSON.stringify({
+          action: 'adopt_edited',
+          editedText: formattedBody
+        })
       });
 
-      if (!createResponse.ok) throw new Error('Failed to create user comment');
+      if (!editResponse.ok) throw new Error('Failed to adopt suggestion with edits');
 
-      const createResult = await createResponse.json();
-
-      // Update the AI suggestion status to adopted (mode-aware endpoint)
-      const statusEndpoint = this._getSuggestionStatusEndpoint(suggestion.id);
-      const statusResponse = await fetch(statusEndpoint, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ status: 'adopted' })
-      });
-
-      if (!statusResponse.ok) throw new Error('Failed to update suggestion status');
+      const editResult = await editResponse.json();
 
       // Collapse the AI suggestion card instead of removing it
       const suggestionCard = zone.querySelector(`[data-suggestion-id="${suggestion.id}"]`);
@@ -835,7 +855,7 @@ class FileCommentManager {
 
       // Display as user comment with formatted body
       const commentData = {
-        id: createResult.commentId,
+        id: editResult.userCommentId,
         file: suggestion.file,
         body: formattedBody,
         source: 'user',
@@ -897,6 +917,8 @@ class FileCommentManager {
     const saveBtn = bodyEl.querySelector('.save-edit-btn');
     const cancelBtn = bodyEl.querySelector('.cancel-edit-btn');
 
+    card.classList.add('editing-mode');
+
     textarea.focus();
     textarea.setSelectionRange(textarea.value.length, textarea.value.length);
 
@@ -906,6 +928,7 @@ class FileCommentManager {
     }
 
     const restoreView = () => {
+      card.classList.remove('editing-mode');
       const renderedBody = window.renderMarkdown
         ? window.renderMarkdown(originalMarkdown)
         : this.escapeHtml(originalMarkdown);
@@ -962,6 +985,8 @@ class FileCommentManager {
       if (!response.ok) throw new Error('Failed to update comment');
 
       // Update the display
+      const card = bodyEl?.closest('.file-comment-card');
+      if (card) card.classList.remove('editing-mode');
       const renderedBody = window.renderMarkdown
         ? window.renderMarkdown(newBody)
         : this.escapeHtml(newBody);
@@ -1042,12 +1067,8 @@ class FileCommentManager {
    */
   _getSuggestionStatusEndpoint(suggestionId) {
     const reviewId = this.prManager?.currentPR?.id;
-    const reviewType = this.prManager?.currentPR?.reviewType;
-    const isLocal = reviewType === 'local';
 
-    return isLocal
-      ? `/api/local/${reviewId}/ai-suggestion/${suggestionId}/status`
-      : `/api/ai-suggestion/${suggestionId}/status`;
+    return `/api/reviews/${reviewId}/suggestions/${suggestionId}/status`;
   }
 
   /**

package/public/js/modules/file-list-merger.js

@@ -0,0 +1,64 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+/**
+ * File List Merger - Merges diff files with context files for sidebar display.
+ *
+ * This module provides the core logic for rebuilding the sidebar file list
+ * when context files are added to a review. It merges stored diff files with
+ * context files, deduplicates by path, and sorts alphabetically.
+ *
+ * Used by both PR mode (pr.js) and Local mode (local.js).
+ */
+
+/**
+ * Merge diff files with context files into a single sorted array.
+ *
+ * Rules:
+ * - Diff files take precedence: context files whose path matches a diff file
+ *   are excluded (the diff version is kept).
+ * - Context files are deduplicated by path, keeping the first occurrence.
+ * - The result is sorted alphabetically by file path.
+ *
+ * @param {Array<{file: string}>} diffFiles - Files from the PR diff
+ * @param {Array<{file: string, id: number, label: string, line_start: number, line_end: number}>} contextFiles - Additional context files
+ * @returns {Array<{file: string}>} Merged and sorted file list
+ */
+function mergeFileListWithContext(diffFiles, contextFiles) {
+  const merged = [...(diffFiles || [])];
+
+  // Build set of diff file paths so context files don't duplicate them
+  const diffPaths = new Set((diffFiles || []).map(f => f.file));
+
+  // Deduplicate context files by path and skip any that overlap with diff files
+  const seenContextPaths = new Set();
+  for (const cf of (contextFiles || [])) {
+    if (diffPaths.has(cf.file) || seenContextPaths.has(cf.file)) continue;
+    seenContextPaths.add(cf.file);
+    merged.push({
+      file: cf.file,
+      contextFile: true,
+      contextId: cf.id,
+      label: cf.label,
+      lineStart: cf.line_start,
+      lineEnd: cf.line_end,
+    });
+  }
+
+  // Sort by file path (context files interleave naturally)
+  merged.sort((a, b) => a.file.localeCompare(b.file));
+
+  return merged;
+}
+
+// Export for browser usage (attach to window)
+if (typeof window !== 'undefined') {
+  window.FileListMerger = {
+    mergeFileListWithContext
+  };
+}
+
+// Export for Node.js/test usage
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    mergeFileListWithContext
+  };
+}

package/public/js/modules/panel-resizer.js

@@ -18,13 +18,27 @@ window.PanelResizer = (function() {
     },
     'ai-panel': {
       min: 200,
-      max: 600,
+      max: null, // dynamic — computed from viewport in getEffectiveMax()
       default: 320,
       storageKey: 'ai-panel-width',
       cssVar: '--ai-panel-width'
     }
+    // Note: chat-panel resize is handled by ChatPanel itself (see ChatPanel._bindResizeEvents)
   };
 
+  /**
+   * Compute the effective max width for a panel.
+   * For panels with a static max, returns that value.
+   * For panels with max: null, computes a dynamic max from the viewport.
+   */
+  function getEffectiveMax(panelName) {
+    const config = CONFIG[panelName];
+    if (!config) return Infinity;
+    if (config.max != null) return config.max;
+    const sidebarWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sidebar-width'), 10) || 260;
+    return window.innerWidth - sidebarWidth - 100;
+  }
+
   // State
   let isDragging = false;
   let currentPanel = null;
@@ -59,7 +73,7 @@ window.PanelResizer = (function() {
 
       if (savedWidth) {
         const width = parseInt(savedWidth, 10);
-        if (width >= config.min && width <= config.max) {
+        if (width >= config.min) {
           document.documentElement.style.setProperty(config.cssVar, `${width}px`);
         }
       }
@@ -92,8 +106,8 @@ window.PanelResizer = (function() {
     const config = CONFIG[panelName];
     if (!config) return;
 
-    // Clamp to min/max
-    const clampedWidth = Math.max(config.min, Math.min(config.max, width));
+    // Clamp to min/max (max may be dynamic)
+    const clampedWidth = Math.max(config.min, Math.min(getEffectiveMax(panelName), width));
 
     // Apply to CSS
     document.documentElement.style.setProperty(config.cssVar, `${clampedWidth}px`);
@@ -115,7 +129,9 @@ window.PanelResizer = (function() {
     const panelName = handle.dataset.panel;
     const panelEl = panelName === 'sidebar'
       ? document.getElementById('files-sidebar')
-      : document.getElementById('ai-panel');
+      : panelName === 'chat-panel'
+        ? document.querySelector('.chat-panel')
+        : document.getElementById('ai-panel');
 
     // Don't allow resize if panel is collapsed
     if (panelEl && panelEl.classList.contains('collapsed')) {
@@ -181,6 +197,9 @@ window.PanelResizer = (function() {
     }
     document.body.classList.remove('resizing');
 
+    // Notify PanelGroup so --right-panel-group-width stays in sync
+    window.panelGroup?._updateRightPanelGroupWidth();
+
     isDragging = false;
     currentPanel = null;
     startX = 0;
@@ -199,7 +218,7 @@ window.PanelResizer = (function() {
     const saved = localStorage.getItem(config.storageKey);
     if (saved) {
       const width = parseInt(saved, 10);
-      if (width >= config.min && width <= config.max) {
+      if (width >= config.min) {
         return width;
       }
     }