@in-the-loop-labs/pair-review 3.3.6 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@in-the-loop-labs/pair-review",
-  "version": "3.3.6",
+  "version": "3.4.0",
   "description": "Your AI-powered code review partner - Close the feedback loop with AI coding agents",
   "main": "src/server.js",
   "bin": {
@@ -68,6 +68,7 @@
     "glob": "^13.0.6",
     "markdown-it": "^13.0.2",
     "open": "^9.1.0",
+    "semver": "^7.7.4",
     "simple-git": "^3.19.1",
     "update-notifier": "^5.1.0",
     "uuid": "^11.1.0",

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

@@ -1,6 +1,6 @@
 {
   "name": "pair-review",
-  "version": "3.3.6",
+  "version": "3.4.0",
   "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.3.6",
+  "version": "3.4.0",
   "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/styles.css

@@ -31,7 +31,13 @@
     --color-warning-bg: #fffae6;
     --color-warning-border: #ffc552;
     --color-warning-text: #7d4e00;
-    
+
+    --color-info-bg: #eff6ff;
+    --color-info-border: #bfdbfe;
+    --color-info-accent: #3b82f6;
+    --color-info-text: #1e3a8a;
+    --color-info-text-muted: #3b5998;
+
     --color-selection: #fff5b1;
     --color-selection-num: #ffeb3b;
     
@@ -72,7 +78,13 @@
     --color-warning-bg: #3d2e00;
     --color-warning-border: #9e6a03;
     --color-warning-text: #e3b341;
-    
+
+    --color-info-bg: #152033;
+    --color-info-border: #2d4a7a;
+    --color-info-accent: #4a90e2;
+    --color-info-text: #cfe0f5;
+    --color-info-text-muted: #8aa9cf;
+
     --color-selection: #3d3300;
     --color-selection-num: #4d4000;
     

package/public/index.html

@@ -1488,6 +1488,7 @@
 
     <script src="/js/ws-client.js"></script>
     <script src="/js/components/Toast.js"></script>
+    <script src="/js/components/UpdateBanner.js"></script>
     <script src="/js/index.js"></script>
 </body>
 </html>

package/public/js/components/AIPanel.js

@@ -965,20 +965,9 @@ class AIPanel {
     expandFileIfCollapsed(file) {
         if (!file) return false;
 
-        // Find the file wrapper - try exact match first, then partial match
-        let fileWrapper = document.querySelector(`[data-file-name="${file}"]`);
-
-        // Fallback: partial path match
-        if (!fileWrapper) {
-            const allWrappers = document.querySelectorAll('.d2h-file-wrapper');
-            for (const wrapper of allWrappers) {
-                const wrapperFile = wrapper.dataset.fileName;
-                if (wrapperFile && (wrapperFile.includes(file) || file.includes(wrapperFile))) {
-                    fileWrapper = wrapper;
-                    break;
-                }
-            }
-        }
+        const fileWrapper = window.prManager?.findFileElement
+            ? window.prManager.findFileElement(file)
+            : window.DiffRenderer?.findFileElement?.(file);
 
         if (!fileWrapper) return false;
 

package/public/js/components/UpdateBanner.js

@@ -0,0 +1,143 @@
+// Copyright 2026 Tim Perkins (tjwp) | SPDX-License-Identifier: Apache-2.0
+/**
+ * UpdateBanner Component
+ * Shows a persistent, dismissible corner-card notification when a newer
+ * version of pair-review is available. Single delivery path: on construction,
+ * fetch /api/config and show the banner if a pending_update exists.
+ */
+
+const DISMISS_KEY = 'update-banner-dismissed';
+
+class UpdateBanner {
+  constructor() {
+    this._banner = null;
+    this._dismissBtn = null;
+    this._version = null;
+
+    // Single path: fetch current config at construction; show banner if a
+    // pending update exists. No event listener, no WebSocket coupling.
+    // `fetch()` returns a Promise; `.then()` chains async steps; the final
+    // `.catch()` swallows network errors because the banner is non-critical.
+    fetch('/api/config')
+      .then(r => (r.ok ? r.json() : null))
+      .then(config => {
+        if (config && config.pending_update) this.show(config.pending_update);
+      })
+      .catch(() => { /* non-critical */ });
+  }
+
+  /**
+   * Show the update banner for the given version.
+   * No-op if already showing or dismissed for this version.
+   * @param {string} version
+   */
+  show(version) {
+    if (!version) return;
+
+    // Already dismissed for this version in this session
+    if (sessionStorage.getItem(DISMISS_KEY) === version) return;
+
+    // Already showing this version
+    if (this._banner && this._version === version) return;
+
+    // Remove any existing banner (e.g., for an older version)
+    this._remove();
+
+    this._version = version;
+
+    // Theme-aware colors come from CSS custom properties (set in styles.css
+    // under :root and [data-theme="dark"]). The inline `var(..., fallback)`
+    // form keeps the banner readable even if the stylesheet hasn't loaded
+    // yet. No MutationObserver needed — CSS handles the theme switch.
+    const banner = document.createElement('div');
+    banner.setAttribute('data-update-banner', '');
+    Object.assign(banner.style, {
+      position: 'fixed',
+      top: '16px',
+      left: '16px',
+      zIndex: '1000',
+      maxWidth: '360px',
+      background: 'var(--color-info-bg, #eff6ff)',
+      border: '1px solid var(--color-info-border, #bfdbfe)',
+      borderLeft: '4px solid var(--color-info-accent, #3b82f6)',
+      borderRadius: '8px',
+      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+      padding: '12px 14px',
+      fontSize: '13px',
+      lineHeight: '1.4',
+      color: 'var(--color-info-text, #1e3a8a)',
+      display: 'flex',
+      alignItems: 'flex-start',
+      gap: '10px'
+    });
+
+    // Two-line layout: headline + restart instruction on its own line.
+    const text = document.createElement('div');
+    text.style.flex = '1';
+
+    const headline = document.createElement('div');
+    headline.textContent = `pair-review v${version} is available.`;
+
+    const instruction = document.createElement('div');
+    instruction.textContent = 'Restart the server to update.';
+    instruction.style.marginTop = '2px';
+
+    text.appendChild(headline);
+    text.appendChild(instruction);
+
+    const dismissBtn = document.createElement('button');
+    dismissBtn.textContent = '\u00d7';
+    dismissBtn.setAttribute('aria-label', 'Dismiss');
+    Object.assign(dismissBtn.style, {
+      background: 'none',
+      border: 'none',
+      color: 'var(--color-info-text-muted, #3b5998)',
+      cursor: 'pointer',
+      fontSize: '18px',
+      padding: '0',
+      lineHeight: '1',
+      flexShrink: '0',
+      opacity: '0.8'
+    });
+    dismissBtn.addEventListener('click', () => this.dismiss());
+
+    banner.appendChild(text);
+    banner.appendChild(dismissBtn);
+    document.body.appendChild(banner);
+    this._banner = banner;
+    this._dismissBtn = dismissBtn;
+  }
+
+  /** Dismiss the banner and remember the choice for this session. */
+  dismiss() {
+    if (this._version) {
+      sessionStorage.setItem(DISMISS_KEY, this._version);
+    }
+    this._remove();
+  }
+
+  /** @private */
+  _remove() {
+    if (this._banner && this._banner.parentNode) {
+      this._banner.parentNode.removeChild(this._banner);
+    }
+    this._banner = null;
+    this._dismissBtn = null;
+  }
+}
+
+// Singleton init (browser only)
+if (typeof window !== 'undefined' && !window.updateBanner) {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      window.updateBanner = new UpdateBanner();
+    });
+  } else {
+    window.updateBanner = new UpdateBanner();
+  }
+}
+
+// CommonJS export for unit tests
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { UpdateBanner };
+}

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

@@ -64,6 +64,9 @@ class DiffRenderer {
     // Ruby
     'rb': 'ruby',
     'erb': 'erb',
+    // Elixir
+    'ex': 'elixir',
+    'exs': 'elixir',
     // PHP
     'php': 'php',
     // Java/Kotlin/Scala
@@ -194,6 +197,88 @@ class DiffRenderer {
     return div.innerHTML;
   }
 
+  /**
+   * Normalize a file path for DOM matching.
+   *
+   * Frontend mirror of `normalizePath()` + `resolveRenamedFile()` from
+   * `src/utils/paths.js`. Browser code cannot `require()` the backend module,
+   * so the logic is duplicated here. Keep this function in sync with those two
+   * when modifying normalization rules, otherwise the frontend and backend
+   * will disagree on which paths are equivalent.
+   *
+   * @param {string} filePath - File path to normalize
+   * @returns {string} Normalized file path
+   */
+  static normalizeFilePath(filePath) {
+    if (typeof filePath !== 'string') return '';
+
+    let normalized = filePath.trim();
+    if (!normalized) return '';
+
+    // Resolve git rename syntax to the new path.
+    normalized = normalized.replace(/\{[^}]*\s*=>\s*([^}]*)\}/, '$1');
+    normalized = normalized.replace(/\/+/g, '/');
+
+    // Strip leading './' and '/' segments until the string stops changing.
+    // This mirrors normalizePath in src/utils/paths.js for interleaved cases
+    // like '/./src/foo.js'.
+    let prevLength;
+    do {
+      prevLength = normalized.length;
+
+      while (normalized.startsWith('./')) {
+        normalized = normalized.slice(2);
+      }
+
+      while (normalized.startsWith('/')) {
+        normalized = normalized.slice(1);
+      }
+    } while (normalized.length !== prevLength);
+
+    return normalized;
+  }
+
+  /**
+   * Check whether two file paths should be treated as the same DOM target.
+   * @param {string} left - First file path
+   * @param {string} right - Second file path
+   * @returns {boolean} True when the paths refer to the same file
+   */
+  static pathsMatch(left, right) {
+    const normalizedLeft = DiffRenderer.normalizeFilePath(left);
+    const normalizedRight = DiffRenderer.normalizeFilePath(right);
+
+    if (!normalizedLeft || !normalizedRight) return false;
+
+    return normalizedLeft === normalizedRight ||
+      normalizedLeft.endsWith(`/${normalizedRight}`) ||
+      normalizedRight.endsWith(`/${normalizedLeft}`);
+  }
+
+  /**
+   * Try a direct selector lookup for a file path.
+   * Falls back silently when CSS.escape is unavailable or the selector is invalid.
+   * @param {string} attribute - data attribute to match (without brackets)
+   * @param {string} filePath - File path to search for
+   * @returns {Element|null} Matching element if found
+   */
+  static queryFileElement(attribute, filePath) {
+    if (!filePath) {
+      return null;
+    }
+
+    const css = globalThis.CSS;
+    const escapedValue = css && typeof css.escape === 'function'
+      ? css.escape(filePath)
+      : filePath;
+
+    try {
+      return document.querySelector(`[${attribute}="${escapedValue}"]`);
+    } catch {
+      return null;
+    }
+  }
+
   /**
    * Render a single diff line
    * @param {HTMLElement|DocumentFragment} container - Container to append to
@@ -696,18 +781,29 @@ class DiffRenderer {
    * @returns {Element|null} The file wrapper element or null if not found
    */
   static findFileElement(filePath) {
-    // Try exact match first
-    let fileElement = document.querySelector(`[data-file-name="${filePath}"]`);
-    if (fileElement) return fileElement;
+    const normalizedPath = DiffRenderer.normalizeFilePath(filePath);
 
-    fileElement = document.querySelector(`[data-file-path="${filePath}"]`);
-    if (fileElement) return fileElement;
+    // Try direct selector lookups first when we can safely escape the value.
+    const selectorCandidates = [filePath];
+    if (normalizedPath && normalizedPath !== filePath) {
+      selectorCandidates.push(normalizedPath);
+    }
+
+    for (const candidate of selectorCandidates) {
+      let fileElement = DiffRenderer.queryFileElement('data-file-name', candidate);
+      if (fileElement) return fileElement;
+
+      fileElement = DiffRenderer.queryFileElement('data-file-path', candidate);
+      if (fileElement) return fileElement;
+    }
 
-    // Try partial match for path segments
+    // Fall back to normalized iteration so special characters, rename syntax,
+    // and formatted variants still resolve to the rendered wrapper.
     const allFileWrappers = document.querySelectorAll('.d2h-file-wrapper');
     for (const wrapper of allFileWrappers) {
       const fileName = wrapper.dataset.fileName;
-      if (fileName && (fileName === filePath || fileName.endsWith('/' + filePath) || filePath.endsWith('/' + fileName))) {
+      const filePathAttr = wrapper.dataset.filePath;
+      if (DiffRenderer.pathsMatch(fileName, filePath) || DiffRenderer.pathsMatch(filePathAttr, filePath)) {
         return wrapper;
       }
     }

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

@@ -1168,17 +1168,22 @@ class FileCommentManager {
    * @param {Array} suggestions - Array of file-level AI suggestions
    */
   loadFileComments(comments, suggestions) {
-    // Group by file
-    const commentsByFile = new Map();
-    const suggestionsByFile = new Map();
+    // Group by rendered file comments zone so path variants still attach to the
+    // correct file on initial load.
+    const commentsByZone = new Map();
+    const suggestionsByZone = new Map();
 
     if (comments) {
       for (const comment of comments) {
         if (comment.is_file_level === 1) {
-          if (!commentsByFile.has(comment.file)) {
-            commentsByFile.set(comment.file, []);
+          const zone = this.findZoneForFile(comment.file);
+          if (!zone) {
+            continue;
           }
-          commentsByFile.get(comment.file).push(comment);
+          if (!commentsByZone.has(zone)) {
+            commentsByZone.set(zone, []);
+          }
+          commentsByZone.get(zone).push(comment);
         }
       }
     }
@@ -1186,10 +1191,14 @@ class FileCommentManager {
     if (suggestions) {
       for (const suggestion of suggestions) {
         if (suggestion.is_file_level === 1) {
-          if (!suggestionsByFile.has(suggestion.file)) {
-            suggestionsByFile.set(suggestion.file, []);
+          const zone = this.findZoneForFile(suggestion.file);
+          if (!zone) {
+            continue;
+          }
+          if (!suggestionsByZone.has(zone)) {
+            suggestionsByZone.set(zone, []);
           }
-          suggestionsByFile.get(suggestion.file).push(suggestion);
+          suggestionsByZone.get(zone).push(suggestion);
         }
       }
     }
@@ -1197,7 +1206,6 @@ class FileCommentManager {
     // Find all file comment zones and populate them
     const zones = document.querySelectorAll('.file-comments-zone');
     for (const zone of zones) {
-      const fileName = zone.dataset.fileName;
       const container = zone.querySelector('.file-comments-container');
 
       // Selectively clear existing cards based on what we're about to reload
@@ -1221,8 +1229,8 @@ class FileCommentManager {
         }
       }
 
-      const fileComments = commentsByFile.get(fileName) || [];
-      const fileSuggestions = suggestionsByFile.get(fileName) || [];
+      const fileComments = commentsByZone.get(zone) || [];
+      const fileSuggestions = suggestionsByZone.get(zone) || [];
 
       // Display AI suggestions first
       for (const suggestion of fileSuggestions) {
@@ -1245,7 +1253,20 @@ class FileCommentManager {
    * @returns {HTMLElement|null} The zone element or null
    */
   findZoneForFile(fileName) {
-    return document.querySelector(`.file-comments-zone[data-file-name="${fileName}"]`);
+    const fileWrapper = window.DiffRenderer?.findFileElement
+      ? window.DiffRenderer.findFileElement(fileName)
+      : null;
+
+    if (fileWrapper) {
+      return fileWrapper.querySelector('.file-comments-zone');
+    }
+
+    try {
+      const escaped = globalThis.CSS?.escape ? CSS.escape(fileName) : fileName;
+      return document.querySelector(`.file-comments-zone[data-file-name="${escaped}"]`);
+    } catch {
+      return null;
+    }
   }
 
   /**

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

@@ -160,6 +160,26 @@ class SuggestionManager {
     return window.CategoryEmoji?.getEmoji(category) || '\u{1F4AC}';
   }
 
+  /**
+   * Resolve a diff file wrapper for the provided path.
+   * @param {string} file - File path
+   * @returns {Element|null} Matching file wrapper
+   */
+  findFileElement(file) {
+    if (this.prManager?.findFileElement) {
+      return this.prManager.findFileElement(file);
+    }
+    if (window.DiffRenderer?.findFileElement) {
+      return window.DiffRenderer.findFileElement(file);
+    }
+    try {
+      const escaped = globalThis.CSS?.escape ? CSS.escape(file) : file;
+      return document.querySelector(`[data-file-name="${escaped}"]`);
+    } catch {
+      return null;
+    }
+  }
+
   /**
    * Find suggestions that target lines currently hidden in gaps
    * @param {Array} suggestions - Array of suggestions
@@ -176,9 +196,7 @@ class SuggestionManager {
       const side = suggestion.side || 'RIGHT';
 
       // Find the file wrapper
-      const fileElement = window.DiffRenderer ?
-        window.DiffRenderer.findFileElement(file) :
-        document.querySelector(`[data-file-name="${file}"]`);
+      const fileElement = this.findFileElement(file);
 
       if (!fileElement) {
         // File not in diff at all, not a hidden line issue
@@ -329,9 +347,7 @@ class SuggestionManager {
         const line = parseInt(lineStr);
 
         // Use helper method for file lookup
-        const fileElement = window.DiffRenderer ?
-          window.DiffRenderer.findFileElement(file) :
-          document.querySelector(`[data-file-name="${file}"]`);
+        const fileElement = this.findFileElement(file);
 
         if (!fileElement) {
           // This can happen when AI suggests a file path that doesn't exist in the diff

package/public/js/pr.js

@@ -2032,7 +2032,7 @@ class PRManager {
    * @param {string} filePath - Path of the file
    */
   toggleFileCollapse(filePath) {
-    const wrapper = document.querySelector(`[data-file-name="${filePath}"]`);
+    const wrapper = this.findFileElement(filePath);
     if (!wrapper) return;
 
     const isCollapsed = wrapper.classList.contains('collapsed');
@@ -2058,7 +2058,7 @@ class PRManager {
    * @param {boolean} isViewed - Whether the file is now viewed
    */
   toggleFileViewed(filePath, isViewed) {
-    const wrapper = document.querySelector(`[data-file-name="${filePath}"]`);
+    const wrapper = this.findFileElement(filePath);
 
     if (isViewed) {
       this.viewedFiles.add(filePath);
@@ -4359,7 +4359,7 @@ class PRManager {
   }
 
   scrollToFile(filePath) {
-    const fileWrapper = document.querySelector(`[data-file-name="${filePath}"]`);
+    const fileWrapper = this.findFileElement(filePath);
     if (fileWrapper) {
       fileWrapper.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }

package/public/local.html

@@ -562,6 +562,7 @@
 
     <!-- Highlight.js for syntax highlighting -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/elixir.min.js"></script>
 
     <!-- Markdown-it Library for rendering markdown in comments -->
     <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.2/dist/markdown-it.min.js"></script>
@@ -591,6 +592,7 @@
     <!-- Components -->
     <script src="/js/components/TabTitle.js"></script>
     <script src="/js/components/Toast.js"></script>
+    <script src="/js/components/UpdateBanner.js"></script>
     <script src="/js/components/ConfirmDialog.js"></script>
     <script src="/js/components/TextInputDialog.js"></script>
     <script src="/js/components/AnalysisConfigModal.js"></script>

package/public/pr.html

@@ -358,6 +358,7 @@
 
     <!-- Highlight.js for syntax highlighting -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/elixir.min.js"></script>
 
     <!-- Markdown-it Library for rendering markdown in comments -->
     <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.2/dist/markdown-it.min.js"></script>
@@ -387,6 +388,7 @@
     <!-- Components -->
     <script src="/js/components/TabTitle.js"></script>
     <script src="/js/components/Toast.js"></script>
+    <script src="/js/components/UpdateBanner.js"></script>
     <script src="/js/components/ConfirmDialog.js"></script>
     <script src="/js/components/TextInputDialog.js"></script>
     <script src="/js/components/AnalysisConfigModal.js"></script>

package/public/setup.html

@@ -528,6 +528,7 @@
 
     <!-- WebSocket client -->
     <script src="/js/ws-client.js"></script>
+    <script src="/js/components/UpdateBanner.js"></script>
     <script src="/js/utils/notification-sounds.js"></script>
 
     <script>