@in-the-loop-labs/pair-review 3.2.3 → 3.3.0

package/README.md

@@ -746,28 +746,29 @@ These commands update your MCP configuration in `~/.claude/settings.json` (user-
 ### Prerequisites
 
 - Node.js 20.0.0 or higher
+- [pnpm](https://pnpm.io/) 10.x
 - Git
 
 ### Running Locally
 
 ```bash
 # Install dependencies
-npm install
+pnpm install
 
 # Run tests
-npm test
+pnpm test
 
 # Run tests in watch mode
-npm run test:watch
+pnpm run test:watch
 
 # Run E2E tests
-npm run test:e2e
+pnpm run test:e2e
 
 # Run E2E tests with visible browser
-npm run test:e2e:headed
+pnpm run test:e2e:headed
 
 # Start development server
-npm run dev
+pnpm run dev
 ```
 
 ### Architecture

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@in-the-loop-labs/pair-review",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "description": "Your AI-powered code review partner - Close the feedback loop with AI coding agents",
   "main": "src/server.js",
   "bin": {
@@ -32,8 +32,8 @@
     "test:e2e:debug": "playwright test --debug",
     "generate:skill-prompts": "node scripts/generate-skill-prompts.js",
     "changeset": "changeset",
-    "version": "changeset version && npm install --package-lock-only && node scripts/sync-plugin-versions.js && git add package.json package-lock.json CHANGELOG.md .changeset .claude-plugin/marketplace.json plugin/.claude-plugin/plugin.json plugin-code-critic/.claude-plugin/plugin.json && git commit -m \"RELEASING: v$(node -p \"require('./package.json').version\")\"",
-    "release": "npm whoami > /dev/null || { echo 'Error: Not logged in to npm. Run: npm login'; exit 1; } && npm run version && changeset tag && npm publish && git push && git push --tags"
+    "version": "changeset version && pnpm install --lockfile-only && node scripts/sync-plugin-versions.js && git add package.json pnpm-lock.yaml CHANGELOG.md .changeset .claude-plugin/marketplace.json plugin/.claude-plugin/plugin.json plugin-code-critic/.claude-plugin/plugin.json && git commit -m \"RELEASING: v$(node -p \"require('./package.json').version\")\"",
+    "release": "npm whoami > /dev/null || { echo 'Error: Not logged in to npm. Run: npm login'; exit 1; } && pnpm run version && changeset tag && npm publish && git push && git push --tags"
   },
   "keywords": [
     "code-review",
@@ -71,7 +71,8 @@
     "simple-git": "^3.19.1",
     "update-notifier": "^5.1.0",
     "uuid": "^11.1.0",
-    "ws": "^8.19.0"
+    "ws": "^8.19.0",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",

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

@@ -1,6 +1,6 @@
 {
   "name": "pair-review",
-  "version": "3.2.3",
+  "version": "3.3.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.2.3",
+  "version": "3.3.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/repo-settings.css

@@ -893,6 +893,331 @@ html, body {
   font-size: 12px;
 }
 
+/* ============================================
+   Worktrees Section
+   ============================================ */
+
+@keyframes worktree-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.worktree-icon-spin {
+  animation: worktree-spin 1s linear infinite;
+}
+
+.worktree-pool-config {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px 16px;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+}
+
+.worktree-pool-config-items {
+  display: flex;
+  align-items: flex-end;
+  gap: 24px;
+}
+
+.worktree-pool-config-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.worktree-pool-config-label {
+  font-size: 11px;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.worktree-pool-input-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.worktree-pool-input {
+  width: 72px;
+  padding: 4px 8px;
+  font-size: 14px;
+  color: var(--color-text-primary);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.worktree-pool-input:focus {
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 2px rgba(var(--color-accent-primary-rgb, 31, 111, 235), 0.15);
+}
+
+.worktree-pool-input::placeholder {
+  color: var(--color-text-muted);
+}
+
+.worktree-pool-input-note {
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+.worktree-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.worktree-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 14px;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  transition: background 0.15s ease;
+}
+
+.worktree-item:hover {
+  background: var(--color-bg-tertiary);
+}
+
+.worktree-item-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.worktree-item-bottom {
+  padding-left: 2px;
+}
+
+.worktree-item-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.worktree-item-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.worktree-pool-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  border-radius: 10px;
+  white-space: nowrap;
+  background: rgba(14, 165, 233, 0.12);
+  color: #0284c7;
+}
+
+[data-theme="dark"] .worktree-pool-badge {
+  background: rgba(56, 189, 248, 0.15);
+  color: #38bdf8;
+}
+
+.worktree-adhoc-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  border-radius: 10px;
+  white-space: nowrap;
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-tertiary);
+}
+
+.worktree-pr-info {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.worktree-path {
+  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+  word-break: break-all;
+}
+
+.worktree-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.worktree-status--available {
+  color: #16a34a;
+}
+
+[data-theme="dark"] .worktree-status--available {
+  color: #4ade80;
+}
+
+.worktree-status--in-use {
+  color: #d97706;
+}
+
+[data-theme="dark"] .worktree-status--in-use {
+  color: #fbbf24;
+}
+
+.worktree-status--switching {
+  color: #2563eb;
+}
+
+[data-theme="dark"] .worktree-status--switching {
+  color: #60a5fa;
+}
+
+.worktree-status--creating {
+  color: #2563eb;
+}
+
+[data-theme="dark"] .worktree-status--creating {
+  color: #60a5fa;
+}
+
+.worktree-timestamp {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+
+.worktree-delete-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.worktree-delete-btn:hover {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.3);
+  color: var(--color-danger);
+}
+
+.worktree-disk-warning {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  border-radius: 10px;
+  white-space: nowrap;
+  background: var(--color-warning-bg);
+  border: 1px solid var(--color-warning-border);
+  color: var(--color-warning-text);
+}
+
+.worktree-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+
+.worktree-delete-all-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: transparent;
+  border: 1px solid var(--color-danger);
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-danger);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.worktree-delete-all-btn:hover {
+  background: var(--color-danger);
+  color: white;
+}
+
+.worktree-empty {
+  padding: 24px 16px;
+  text-align: center;
+  font-size: 14px;
+  font-style: italic;
+  color: var(--color-text-muted);
+}
+
+.worktree-pool-hint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 12px;
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+.worktree-pool-hint svg {
+  flex-shrink: 0;
+}
+
+[data-theme="dark"] .worktree-pool-config {
+  background: var(--color-bg-secondary);
+  border-color: var(--color-border-secondary);
+}
+
+[data-theme="dark"] .worktree-pool-input {
+  background: var(--color-bg-tertiary);
+  border-color: var(--color-border-secondary);
+  color: var(--color-text-primary);
+}
+
+[data-theme="dark"] .worktree-item {
+  background: var(--color-bg-secondary);
+  border-color: var(--color-border-secondary);
+}
+
+[data-theme="dark"] .worktree-item:hover {
+  background: var(--color-bg-tertiary);
+}
+
+[data-theme="dark"] .worktree-adhoc-badge {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--color-text-secondary);
+}
+
+[data-theme="dark"] .worktree-delete-btn:hover {
+  background: rgba(248, 81, 73, 0.15);
+  border-color: rgba(248, 81, 73, 0.3);
+}
+
 /* ============================================
    Danger Zone
    ============================================ */
@@ -1180,4 +1505,26 @@ html, body {
   .action-buttons .btn {
     flex: 1;
   }
+
+  /* Worktrees responsive */
+  .worktree-pool-config-items {
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  .worktree-item-top {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .worktree-item-left {
+    flex-wrap: wrap;
+  }
+
+  .worktree-item-right {
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
 }

package/public/index.html

@@ -473,17 +473,18 @@
             font-size: 14px;
             font-weight: 500;
             line-height: 20px;
-            color: #ffffff;
-            background-color: var(--ai-primary);
-            border: none;
+            color: var(--ai-primary);
+            background-color: var(--ai-subtle);
+            border: 1px solid var(--ai-border);
             border-radius: var(--radius-md);
             cursor: pointer;
-            transition: background-color var(--transition-fast);
+            transition: background-color var(--transition-fast), border-color var(--transition-fast);
             white-space: nowrap;
         }
 
         .start-review-btn:hover:not(:disabled) {
-            background-color: #b45309;
+            background-color: var(--ai-glow);
+            border-color: var(--ai-primary);
         }
 
         .start-review-btn:disabled {
@@ -491,6 +492,36 @@
             cursor: not-allowed;
         }
 
+        .start-review-btn-primary {
+            color: #ffffff;
+            background-color: var(--ai-primary);
+            border-color: var(--ai-primary);
+        }
+
+        .start-review-btn-primary:hover:not(:disabled) {
+            background-color: #b45309;
+            border-color: #b45309;
+        }
+
+        [data-theme="dark"] .start-review-btn-primary:hover:not(:disabled) {
+            background-color: #d97706;
+            border-color: #d97706;
+        }
+
+        .start-review-btn-analyze {
+            transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow 0.3s ease;
+        }
+
+        .start-review-btn-analyze:hover:not(:disabled) {
+            box-shadow: 0 0 8px rgba(217, 119, 6, 0.35), 0 0 20px rgba(251, 191, 36, 0.15);
+            animation: glow-pulse 2s ease-in-out infinite;
+        }
+
+        @keyframes glow-pulse {
+            0%, 100% { box-shadow: 0 0 8px rgba(217, 119, 6, 0.35), 0 0 20px rgba(251, 191, 36, 0.15); }
+            50% { box-shadow: 0 0 12px rgba(217, 119, 6, 0.5), 0 0 28px rgba(251, 191, 36, 0.25); }
+        }
+
         .btn-browse {
             background-color: var(--ai-subtle);
             color: var(--ai-primary);
@@ -1330,8 +1361,11 @@
                                     autocomplete="off"
                                     spellcheck="false"
                                 >
-                                <button type="submit" class="start-review-btn" id="start-review-btn">
-                                    Start Review
+                                <button type="submit" class="start-review-btn start-review-btn-primary" id="start-review-btn" title="Open review without running analysis">
+                                    Open
+                                </button>
+                                <button type="button" class="start-review-btn start-review-btn-analyze" id="analyze-review-btn" title="Open and analyze with default settings">
+                                    Analyze
                                 </button>
                             </form>
                             <div class="start-review-error" id="start-review-error-pr"></div>
@@ -1386,8 +1420,11 @@
                                 <button type="button" class="start-review-btn btn-browse" id="browse-local-btn" title="Browse for directory">
                                     Browse
                                 </button>
-                                <button type="submit" class="start-review-btn" id="start-local-btn">
-                                    Review Local
+                                <button type="submit" class="start-review-btn start-review-btn-primary" id="start-local-btn" title="Open review without running analysis">
+                                    Open
+                                </button>
+                                <button type="button" class="start-review-btn start-review-btn-analyze" id="analyze-local-btn" title="Open and analyze with default settings">
+                                    Analyze
                                 </button>
                             </form>
                             <div class="start-review-error" id="start-review-error-local"></div>

package/public/js/components/AIPanel.js

@@ -793,38 +793,7 @@ class AIPanel {
         this.findingsList.querySelectorAll('.quick-action-chat').forEach(btn => {
             btn.addEventListener('click', (e) => {
                 e.stopPropagation(); // Prevent triggering item click
-                if (!window.chatPanel) return;
-
-                const findingId = btn.dataset.findingId ? parseInt(btn.dataset.findingId, 10) : null;
-                const commentId = btn.dataset.commentId ? parseInt(btn.dataset.commentId, 10) : null;
-                const file = btn.dataset.findingFile || '';
-                const title = btn.dataset.findingTitle || '';
-
-                // Build context from the finding data
-                let suggestionContext = { title, file };
-
-                if (findingId && this.findings) {
-                    const finding = this.findings.find(f => f.id === findingId);
-                    if (finding) {
-                        suggestionContext = {
-                            suggestionId: findingId ? String(findingId) : null,
-                            title: finding.title || title,
-                            body: finding.formattedBody || finding.body || '',
-                            type: finding.type || '',
-                            file: finding.file || file,
-                            line_start: finding.line_start || null,
-                            line_end: finding.line_end || null,
-                            side: 'RIGHT',
-                            reasoning: null
-                        };
-                    }
-                }
-
-                window.chatPanel.open({
-                    reviewId: window.prManager?.currentPR?.id,
-                    suggestionId: findingId ? String(findingId) : (commentId ? String(commentId) : undefined),
-                    suggestionContext
-                });
+                this.openQuickActionChat(btn);
             });
         });
 
@@ -887,6 +856,79 @@ class AIPanel {
         }
     }
 
+    /**
+     * Handle chat button clicks from review panel quick actions.
+     * Suggestions use suggestionContext; comments use commentContext.
+     * @param {HTMLButtonElement} btn - The clicked chat button
+     */
+    openQuickActionChat(btn) {
+        if (!window.chatPanel) return;
+
+        const findingId = btn.dataset.findingId ? parseInt(btn.dataset.findingId, 10) : null;
+        const commentId = btn.dataset.commentId ? parseInt(btn.dataset.commentId, 10) : null;
+        const reviewId = window.prManager?.currentPR?.id;
+
+        const buildCommentContext = (comment, fallbackDataset = {}) => ({
+            commentId: comment?.id ? String(comment.id) : String(commentId),
+            body: comment?.body || '',
+            file: comment?.file || fallbackDataset.commentFile || '',
+            line_start: comment?.line_start ?? (fallbackDataset.commentLineStart ? parseInt(fallbackDataset.commentLineStart, 10) : null),
+            line_end: comment?.line_end ?? (fallbackDataset.commentLineEnd ? parseInt(fallbackDataset.commentLineEnd, 10) : null),
+            parentId: comment?.parent_id ?? (fallbackDataset.commentParentId ? parseInt(fallbackDataset.commentParentId, 10) : null),
+            source: 'user',
+            isFileLevel: comment?.is_file_level === 1 || comment?.is_file_level === true
+        });
+
+        if (commentId) {
+            const comment = this.comments?.find(c => c.id === commentId);
+
+            window.chatPanel.open({
+                reviewId,
+                commentContext: buildCommentContext(comment, btn.dataset)
+            });
+            return;
+        }
+
+        const file = btn.dataset.findingFile || '';
+        const title = btn.dataset.findingTitle || '';
+        let suggestionContext = { title, file };
+
+        if (findingId && this.findings) {
+            const finding = this.findings.find(f => f.id === findingId);
+            if (finding) {
+                if (finding.status === 'adopted') {
+                    const adoptedComment = this.comments?.find(c => c.parent_id === findingId && c.status !== 'inactive')
+                        || this.comments?.find(c => c.parent_id === findingId);
+                    if (adoptedComment) {
+                        window.chatPanel.open({
+                            reviewId,
+                            commentContext: buildCommentContext(adoptedComment)
+                        });
+                        return;
+                    }
+                }
+
+                suggestionContext = {
+                    suggestionId: String(findingId),
+                    title: finding.title || title,
+                    body: finding.formattedBody || finding.body || '',
+                    type: finding.type || '',
+                    file: finding.file || file,
+                    line_start: finding.line_start ?? null,
+                    line_end: finding.line_end ?? null,
+                    side: 'RIGHT',
+                    reasoning: null
+                };
+            }
+        }
+
+        window.chatPanel.open({
+            reviewId,
+            suggestionId: findingId ? String(findingId) : undefined,
+            suggestionContext
+        });
+    }
+
     onFindingClick(item) {
         const itemId = item.dataset.id;
         const itemType = item.dataset.itemType;
@@ -1204,9 +1246,9 @@ class AIPanel {
         `;
         }
 
-        // Chat button for active and dismissed findings (upper-right corner)
+        // Chat button for all findings when chat is available
         let chatAction = '';
-        if (finding.status !== 'adopted' && document.documentElement.getAttribute('data-chat') === 'available') {
+        if (document.documentElement.getAttribute('data-chat') === 'available') {
             chatAction = `
             <div class="finding-chat-action">
                 <button class="quick-action-btn quick-action-chat" data-finding-id="${finding.id}" data-finding-file="${finding.file || ''}" data-finding-title="${this.escapeHtml(title)}" title="Chat" aria-label="Chat about suggestion">
@@ -1279,12 +1321,12 @@ class AIPanel {
             `;
         }
 
-        // Chat button for active AI-originated comments
+        // Chat button for active comments
         let chatAction = '';
-        if (!isDismissed && comment.parent_id && document.documentElement.getAttribute('data-chat') === 'available') {
+        if (!isDismissed && document.documentElement.getAttribute('data-chat') === 'available') {
             chatAction = `
             <div class="finding-chat-action">
-                <button class="quick-action-btn quick-action-chat" data-comment-id="${comment.id}" data-finding-file="${comment.file || ''}" data-finding-title="${this.escapeHtml(title)}" title="Chat" aria-label="Chat about comment">
+                <button class="quick-action-btn quick-action-chat" data-comment-id="${comment.id}" data-comment-file="${this.escapeHtml(comment.file || '')}" data-comment-line-start="${comment.line_start ?? ''}" data-comment-line-end="${comment.line_end ?? ''}" data-comment-parent-id="${comment.parent_id || ''}" title="Chat" aria-label="Chat about comment">
                     <svg viewBox="0 0 16 16" fill="currentColor" width="12" height="12"><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>
             </div>