@in-the-loop-labs/pair-review 2.3.0 → 2.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@in-the-loop-labs/pair-review",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Your AI-powered code review partner - Close the feedback loop with AI coding agents",
   "main": "src/server.js",
   "bin": {

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

@@ -1,6 +1,6 @@
 {
   "name": "pair-review",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "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": "2.3.0",
+  "version": "2.3.2",
   "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/js/components/AIPanel.js

@@ -207,6 +207,45 @@ class AIPanel {
         }
     }
 
+    /**
+     * Get the localStorage key for the collapsed state (per-review)
+     * @returns {string|null} Storage key or null if no PR context
+     */
+    _getCollapsedStorageKey() {
+        if (!this.currentPRKey) return null;
+        return `pair-review-panel-collapsed_${this.currentPRKey}`;
+    }
+
+    /**
+     * Save the collapsed state to localStorage (per-review)
+     */
+    _saveCollapsedState() {
+        const key = this._getCollapsedStorageKey();
+        if (key) {
+            localStorage.setItem(key, this.isCollapsed ? 'true' : 'false');
+        }
+    }
+
+    /**
+     * Restore the collapsed state from localStorage, or collapse for new reviews.
+     * If the user had the panel expanded for this review, expand it.
+     * Otherwise (new review or previously collapsed), collapse it.
+     */
+    _restoreOrCollapsePanel() {
+        const key = this._getCollapsedStorageKey();
+        if (key) {
+            const stored = localStorage.getItem(key);
+            if (stored === 'false') {
+                this.expand();
+            } else {
+                // 'true' or no saved state (new review) → collapse
+                this.collapse();
+            }
+        } else {
+            this.collapse();
+        }
+    }
+
     /**
      * Get the localStorage key for the filter state (per-review)
      * @returns {string|null} Storage key or null if no PR context
@@ -275,6 +314,7 @@ class AIPanel {
         // Set CSS variable to 0 so width calculations don't reserve space
         document.documentElement.style.setProperty('--ai-panel-width', '0px');
         window.panelGroup?._onReviewVisibilityChanged(false);
+        this._saveCollapsedState();
     }
 
     expand() {
@@ -285,6 +325,7 @@ class AIPanel {
         // Restore CSS variable from saved width or default
         document.documentElement.style.setProperty('--ai-panel-width', `${this.getEffectivePanelWidth()}px`);
         window.panelGroup?._onReviewVisibilityChanged(true);
+        this._saveCollapsedState();
     }
 
     /**
@@ -296,6 +337,7 @@ class AIPanel {
      */
     setPR(owner, repo, number) {
         this.currentPRKey = `${owner}/${repo}#${number}`;
+        this._restoreOrCollapsePanel();
         this.restoreSegmentSelection();
         this.restoreFilterState();
     }
@@ -327,6 +369,10 @@ class AIPanel {
      */
     setAnalysisState(state) {
         this.analysisState = state;
+        // Auto-expand panel when analysis starts
+        if (state === 'loading' && this.isCollapsed) {
+            this.expand();
+        }
         // Re-render if currently showing empty state
         if (this.findings.length === 0 && this.selectedSegment === 'ai') {
             this.renderFindings();
@@ -1737,3 +1783,8 @@ class AIPanel {
 document.addEventListener('DOMContentLoaded', () => {
     window.aiPanel = new AIPanel();
 });
+
+// Export for testing
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { AIPanel };
+}

package/public/js/components/ChatPanel.js

@@ -28,7 +28,7 @@ class ChatPanel {
     this._contextItemId = null;   // suggestion ID or comment ID from context
     this._contextLineMeta = null;  // { file, line_start, line_end } — set when opened with line context
     this._pendingActionContext = null;  // { type, itemId } — set by action button handlers, consumed by sendMessage
-    this._resizeConfig = { min: 300, default: 400, storageKey: 'chat-panel-width' };
+    this._resizeConfig = ChatPanel.RESIZE_CONFIG;
     this._analysisContextRemoved = false;
     this._sessionAnalysisRunId = null; // tracks which AI run ID's context is loaded in the current session
     this._openPromise = null; // concurrency guard for open()
@@ -3007,6 +3007,9 @@ class ChatPanel {
   }
 }
 
+/** Resize configuration for the chat panel, exposed as a static for cross-module use. */
+ChatPanel.RESIZE_CONFIG = { min: 300, default: 400, cssVar: '--chat-panel-width', storageKey: 'chat-panel-width' };
+
 // Make ChatPanel available globally
 window.ChatPanel = ChatPanel;
 

package/public/js/components/PanelGroup.js

@@ -41,6 +41,7 @@ class PanelGroup {
     this._reviewVisible = !document.getElementById('ai-panel')?.classList.contains('collapsed');
     this._chatVisible = false;
     this._popoverVisible = false;
+    this._currentPRKey = null; // Set via setPR() for per-review chat persistence
 
     // Read persisted layout
     const savedLayout = localStorage.getItem(PanelGroup.STORAGE_KEY);
@@ -60,11 +61,13 @@ class PanelGroup {
     window.chatPanel = this.chatPanel;
 
     // Create a full-height group resize handle for vertical layouts.
-    // Uses data-panel="ai-panel" so the existing PanelResizer picks it up automatically.
+    // Uses data-panel="panel-group" so PanelResizer updates both --ai-panel-width
+    // and --chat-panel-width in tandem (needed because the group CSS uses
+    // `width: max(--ai-panel-width, --chat-panel-width)`).
     if (this.groupEl) {
       this._groupResizeHandle = document.createElement('div');
       this._groupResizeHandle.className = 'panel-group-resize-handle resize-handle resize-handle-left';
-      this._groupResizeHandle.dataset.panel = 'ai-panel';
+      this._groupResizeHandle.dataset.panel = 'panel-group';
       this.groupEl.insertBefore(this._groupResizeHandle, this.groupEl.firstChild);
     }
 
@@ -77,20 +80,17 @@ class PanelGroup {
     // Apply initial layout
     this._applyLayout(this._layout);
 
-    // Restore chat visibility from last session (only if chat is available)
-    const chatState = document.documentElement.getAttribute('data-chat');
-    if (chatState === 'available') {
-      this._restoreChatFromStorage();
-    } else {
-      // Chat not available yet — zero out CSS variable so max-width calcs are correct.
-      document.documentElement.style.setProperty('--chat-panel-width', '0px');
-    }
+    // Chat starts hidden; per-review state restored when setPR() is called.
+    document.documentElement.style.setProperty('--chat-panel-width', '0px');
 
     // Listen for late chat-state transitions (config fetch may complete after constructor)
     window.addEventListener('chat-state-changed', (e) => {
       const state = e.detail?.state;
       if (state === 'available') {
-        this._restoreChatFromStorage();
+        // Only restore if PR context is already set (setPR was called before chat became available)
+        if (this._currentPRKey) {
+          this._restoreChatFromStorage();
+        }
       } else if (state === 'unavailable' && this.chatToggleBtn) {
         this.chatToggleBtn.title = 'Install and configure Pi to enable chat';
       }
@@ -420,10 +420,34 @@ class PanelGroup {
   }
 
   /**
-   * Restore chat visibility from localStorage (called when chat becomes available)
+   * Set the current PR for per-review chat visibility persistence.
+   * Call this when a PR/review loads (after aiPanel.setPR).
+   * @param {string} prKey - e.g. "owner/repo#123" or "local/local#2"
+   */
+  setPR(prKey) {
+    this._currentPRKey = prKey;
+    // Now that we know the review context, restore chat state if chat is available
+    if (this._isChatAvailable()) {
+      this._restoreChatFromStorage();
+    }
+  }
+
+  /**
+   * Get the per-review localStorage key for chat visibility.
+   * @returns {string|null} Storage key or null if no PR context
+   */
+  _getChatVisibleStorageKey() {
+    if (!this._currentPRKey) return null;
+    return `${PanelGroup.CHAT_VISIBLE_KEY}_${this._currentPRKey}`;
+  }
+
+  /**
+   * Restore chat visibility from localStorage (per-review).
+   * For new reviews (no saved state), chat stays hidden.
    */
   _restoreChatFromStorage() {
-    const savedChatVisible = localStorage.getItem(PanelGroup.CHAT_VISIBLE_KEY);
+    const key = this._getChatVisibleStorageKey();
+    const savedChatVisible = key ? localStorage.getItem(key) : null;
     if (savedChatVisible === 'true') {
       this._chatVisible = true;
       this.chatPanel.open({ suppressFocus: true });
@@ -476,8 +500,11 @@ class PanelGroup {
       this.chatToggleBtn.classList.toggle('active', visible);
     }
 
-    // Persist chat visibility
-    localStorage.setItem(PanelGroup.CHAT_VISIBLE_KEY, visible ? 'true' : 'false');
+    // Persist chat visibility (per-review)
+    const chatKey = this._getChatVisibleStorageKey();
+    if (chatKey) {
+      localStorage.setItem(chatKey, visible ? 'true' : 'false');
+    }
 
     // Clear inline flex heights so the remaining panel fills the space
     if (this._layout.startsWith('v-')) {

package/public/js/local.js

@@ -374,6 +374,7 @@ class LocalManager {
         if (data.running && data.analysisId) {
           manager.currentAnalysisId = data.analysisId;
           manager.isAnalyzing = true;
+          window.aiPanel?.setAnalysisState('loading');
           manager.setButtonAnalyzing(data.analysisId);
 
           // Show the appropriate progress modal
@@ -791,10 +792,11 @@ class LocalManager {
         window.aiPanel = new window.AIPanel();
       }
 
-      // Set local context for AI Panel (restores filter state from localStorage)
+      // Set local context for AI Panel and Panel Group (restores per-review state from localStorage)
       if (window.aiPanel?.setPR) {
         window.aiPanel.setPR('local', reviewData.repository, this.reviewId);
       }
+      window.panelGroup?.setPR(`local/${reviewData.repository}#${this.reviewId}`);
 
       // Load saved comments using the restored filter state from AI Panel
       const includeDismissed = window.aiPanel?.showDismissedComments || false;

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

@@ -26,6 +26,30 @@ window.PanelResizer = (function() {
     // Note: chat-panel resize is handled by ChatPanel itself (see ChatPanel._bindResizeEvents)
   };
 
+  // panel-group is a virtual panel used by the vertical-layout group resize handle.
+  // In vertical mode the group width is `max(--ai-panel-width, --chat-panel-width)`,
+  // so dragging the group handle must update BOTH CSS vars in tandem.
+  //
+  // Built lazily because ChatPanel.RESIZE_CONFIG is defined after this IIFE runs.
+  let _panelGroupConfig = null;
+  function getPanelGroupConfig() {
+    if (!_panelGroupConfig) {
+      const aiCfg = CONFIG['ai-panel'];
+      // ChatPanel.RESIZE_CONFIG is the canonical source for chat-panel sizing.
+      const chatCfg = window.ChatPanel?.RESIZE_CONFIG
+        ?? { cssVar: '--chat-panel-width', storageKey: 'chat-panel-width', default: 400, min: 300 };
+      const panels = [
+        { cssVar: aiCfg.cssVar, storageKey: aiCfg.storageKey, default: aiCfg.default },
+        { cssVar: chatCfg.cssVar, storageKey: chatCfg.storageKey, default: chatCfg.default }
+      ];
+      _panelGroupConfig = {
+        min: Math.max(aiCfg.min, chatCfg.min),
+        panels
+      };
+    }
+    return _panelGroupConfig;
+  }
+
   /**
    * Compute the effective max width for a panel.
    * For panels with a static max, returns that value.
@@ -39,6 +63,39 @@ window.PanelResizer = (function() {
     return window.innerWidth - sidebarWidth - 100;
   }
 
+  /**
+   * Get the current panel-group width (the max of its sub-panel CSS vars).
+   * This matches the CSS `max()` expression used in vertical layouts.
+   * @returns {number} Current group width in pixels
+   */
+  function getPanelGroupWidth() {
+    let maxWidth = 0;
+    for (const p of getPanelGroupConfig().panels) {
+      const val = parseInt(
+        getComputedStyle(document.documentElement).getPropertyValue(p.cssVar), 10
+      ) || p.default;
+      if (val > maxWidth) maxWidth = val;
+    }
+    return maxWidth;
+  }
+
+  /**
+   * Set the panel-group width by updating ALL sub-panel CSS vars in tandem.
+   * @param {number} width - Desired width in pixels
+   * @param {boolean} save - Whether to persist to localStorage
+   */
+  function setPanelGroupWidth(width, save = true) {
+    const effectiveMax = getEffectiveMax('ai-panel'); // same viewport constraint
+    const clamped = Math.max(getPanelGroupConfig().min, Math.min(effectiveMax, width));
+
+    for (const p of getPanelGroupConfig().panels) {
+      document.documentElement.style.setProperty(p.cssVar, `${clamped}px`);
+      if (save) {
+        localStorage.setItem(p.storageKey, clamped.toString());
+      }
+    }
+  }
+
   // State
   let isDragging = false;
   let currentPanel = null;
@@ -127,6 +184,20 @@ window.PanelResizer = (function() {
     if (!handle) return;
 
     const panelName = handle.dataset.panel;
+
+    // panel-group: virtual panel — start width is the max of the sub-panels
+    if (panelName === 'panel-group') {
+      isDragging = true;
+      currentPanel = panelName;
+      startX = e.clientX;
+      startWidth = getPanelGroupWidth();
+
+      handle.classList.add('dragging');
+      document.body.classList.add('resizing');
+      e.preventDefault();
+      return;
+    }
+
     const panelEl = panelName === 'sidebar'
       ? document.getElementById('files-sidebar')
       : panelName === 'chat-panel'
@@ -157,6 +228,14 @@ window.PanelResizer = (function() {
   function onMouseMove(e) {
     if (!isDragging || !currentPanel) return;
 
+    // panel-group: update both sub-panel CSS vars in tandem
+    if (currentPanel === 'panel-group') {
+      const delta = startX - e.clientX; // right-side panel: left = wider
+      const newWidth = startWidth + delta;
+      setPanelGroupWidth(newWidth, false);
+      return;
+    }
+
     const config = CONFIG[currentPanel];
     if (!config) return;
 
@@ -182,7 +261,11 @@ window.PanelResizer = (function() {
     if (!isDragging) return;
 
     // Save final width
-    if (currentPanel) {
+    if (currentPanel === 'panel-group') {
+      // Persist both sub-panel widths
+      const finalWidth = getPanelGroupWidth();
+      setPanelGroupWidth(finalWidth, true);
+    } else if (currentPanel) {
       const finalWidth = getPanelWidth(currentPanel);
       const config = CONFIG[currentPanel];
       if (config) {

package/public/js/pr.js

@@ -368,6 +368,9 @@ class PRManager {
 
   /**
    * Auto-trigger analysis if ?analyze=true is present in the URL.
+   * Skips refresh if data was just loaded fresh by loadPR (to avoid redundant fetches).
+   * Otherwise, refreshes PR data first to ensure we analyze the latest code.
+   * If refresh fails, proceeds with existing data rather than failing entirely.
    * Cleans up the query parameter afterwards regardless of success or failure.
    * @param {string} owner - Repository owner
    * @param {string} repo - Repository name
@@ -378,6 +381,21 @@ class PRManager {
     if (autoAnalyze === 'true' && !this.isAnalyzing) {
       this._autoAnalyzeRequested = true;
       try {
+        // Skip refresh if we just loaded fresh data (loadPR sets _justLoaded = true).
+        // Otherwise, refresh to ensure we have the latest PR data in case the worktree
+        // already existed but the PR has new commits since last load.
+        if (this._justLoaded) {
+          this._justLoaded = false;
+        } else {
+          try {
+            await this.refreshPR();
+          } catch (e) {
+            // If refresh fails, proceed with existing data - this is intentional.
+            // We'd rather analyze stale data than fail entirely.
+            console.warn('Pre-analysis refresh failed, proceeding with existing data', e);
+          }
+        }
+
         await this.startAnalysis(owner, repo, prNumber, null, {});
       } finally {
         this._autoAnalyzeRequested = false;
@@ -426,11 +444,12 @@ class PRManager {
         window.aiPanel = new window.AIPanel();
       }
 
-      // Set PR context for AI Panel (for PR-specific localStorage keys)
-      // This restores the filter state from localStorage
+      // Set PR context for AI Panel and Panel Group (for per-review localStorage keys)
+      // This restores the filter state and chat visibility from localStorage
       if (window.aiPanel?.setPR) {
         window.aiPanel.setPR(owner, repo, number);
       }
+      window.panelGroup?.setPR(`${owner}/${repo}#${number}`);
 
       // Load saved comments using the restored filter state from AI Panel
       // If AI Panel has showDismissedComments=true (restored from localStorage), use that
@@ -470,6 +489,8 @@ class PRManager {
       this.showError(error.message);
     } finally {
       this.setLoading(false);
+      // Mark that we just loaded fresh data - used by _maybeAutoAnalyze to skip redundant refresh
+      this._justLoaded = true;
     }
   }
 
@@ -1400,6 +1421,15 @@ class PRManager {
       }
     } else {
       this.viewedFiles.delete(filePath);
+      // Auto-expand when unchecking viewed (match GitHub behavior)
+      if (wrapper && wrapper.classList.contains('collapsed')) {
+        wrapper.classList.remove('collapsed');
+        this.collapsedFiles.delete(filePath);
+        const header = wrapper.querySelector('.d2h-file-header');
+        if (header) {
+          window.DiffRenderer.updateFileHeaderState(header, true);
+        }
+      }
     }
 
     // Persist viewed state

package/public/local.html

@@ -404,7 +404,7 @@
             <!-- Right Panel Group (AI Panel + Chat) -->
             <div class="right-panel-group" id="right-panel-group">
                 <!-- AI Analysis Panel (Right) -->
-                <aside class="ai-panel" id="ai-panel">
+                <aside class="ai-panel collapsed" id="ai-panel">
                     <div class="resize-handle resize-handle-left" data-panel="ai-panel"></div>
                     <div class="ai-panel-header">
                         <div class="ai-panel-title">

package/public/pr.html

@@ -227,7 +227,7 @@
             <!-- Right Panel Group (AI Panel + Chat) -->
             <div class="right-panel-group" id="right-panel-group">
                 <!-- AI Analysis Panel (Right) -->
-                <aside class="ai-panel" id="ai-panel">
+                <aside class="ai-panel collapsed" id="ai-panel">
                     <div class="resize-handle resize-handle-left" data-panel="ai-panel"></div>
                     <div class="ai-panel-header">
                         <div class="ai-panel-title">