@in-the-loop-labs/pair-review 2.4.4 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@in-the-loop-labs/pair-review",
-  "version": "2.4.4",
+  "version": "2.5.0",
   "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.4.4",
+  "version": "2.5.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": "2.4.4",
+  "version": "2.5.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/pr.css

@@ -11066,6 +11066,39 @@ body.resizing * {
   background: linear-gradient(to bottom, var(--chat-subtle), transparent);
   flex-shrink: 0;
 }
+
+/* Status flash pill — transient notification between header and content */
+.chat-panel__status-flash {
+  display: flex;
+  justify-content: center;
+  padding: 6px 16px;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.chat-panel__status-flash--visible {
+  opacity: 1;
+}
+
+.chat-panel__status-flash-text {
+  display: inline-block;
+  padding: 3px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: #92400e;
+  background: #fef3c7;
+  border: 1px solid #fcd34d;
+  border-radius: 999px;
+}
+
+[data-theme="dark"] .chat-panel__status-flash-text {
+  color: #fbbf24;
+  background: rgba(251, 191, 36, 0.12);
+  border-color: rgba(251, 191, 36, 0.3);
+}
+
 /* Provider picker */
 .chat-panel__provider-picker {
   position: relative;

package/public/js/components/ChatPanel.js

@@ -32,6 +32,7 @@ class ChatPanel {
     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()
+    this._sessionWarm = false; // true once the session has been used in this page load
     this._activeProvider = window.__pairReview?.chatProvider || 'pi';
     this._chatProviders = window.__pairReview?.chatProviders || [];
 
@@ -84,6 +85,9 @@ class ChatPanel {
             </button>
           </div>
         </div>
+        <div class="chat-panel__status-flash" style="display:none">
+          <span class="chat-panel__status-flash-text">Starting Agent Client Protocol</span>
+        </div>
         <div class="chat-panel__messages-wrapper">
           <div class="chat-panel__messages" id="chat-messages">
             <div class="chat-panel__empty">
@@ -170,6 +174,7 @@ class ChatPanel {
     this.historyBtn = this.container.querySelector('.chat-panel__history-btn');
     this.titleTextEl = this.container.querySelector('.chat-panel__title-text');
     this.newContentPill = this.container.querySelector('.chat-panel__new-content-pill');
+    this.statusFlash = this.container.querySelector('.chat-panel__status-flash');
   }
 
   /**
@@ -407,6 +412,53 @@ class ChatPanel {
     return providerId.charAt(0).toUpperCase() + providerId.slice(1);
   }
 
+  /**
+   * Check if the active provider uses ACP (Agent Client Protocol).
+   * @returns {boolean}
+   */
+  _isAcpProvider() {
+    const entry = this._chatProviders.find(p => p.id === this._activeProvider);
+    return entry?.type === 'acp';
+  }
+
+  /**
+   * Show a transient status flash pill (e.g. "Starting Agent Client Protocol").
+   * Auto-hides after the given timeout.
+   * @param {string} text - Text to display
+   * @param {number} [timeout=5000] - Max display time in ms
+   */
+  _showStatusFlash(text, timeout = 5000) {
+    if (!this.statusFlash) return;
+    if (this._hideAnimationTimeout) {
+      clearTimeout(this._hideAnimationTimeout);
+      this._hideAnimationTimeout = null;
+    }
+    const textEl = this.statusFlash.querySelector('.chat-panel__status-flash-text');
+    if (textEl) textEl.textContent = text;
+    this.statusFlash.style.display = '';
+    // Force reflow to ensure the fade-in animation triggers
+    void this.statusFlash.offsetHeight;
+    this.statusFlash.classList.add('chat-panel__status-flash--visible');
+    this._statusFlashTimeout = setTimeout(() => this._hideStatusFlash(), timeout);
+  }
+
+  /**
+   * Hide the status flash pill with a fade-out animation.
+   */
+  _hideStatusFlash() {
+    if (this._statusFlashTimeout) {
+      clearTimeout(this._statusFlashTimeout);
+      this._statusFlashTimeout = null;
+    }
+    if (!this.statusFlash) return;
+    this.statusFlash.classList.remove('chat-panel__status-flash--visible');
+    // Hide after transition completes
+    this._hideAnimationTimeout = setTimeout(() => {
+      if (this.statusFlash) this.statusFlash.style.display = 'none';
+      this._hideAnimationTimeout = null;
+    }, 300);
+  }
+
   /**
    * Open the chat panel
    * @param {Object} options - Optional context
@@ -666,6 +718,7 @@ class ChatPanel {
 
       const mru = sessions[0];
       this.currentSessionId = mru.id;
+      this._sessionWarm = false;
       this._resubscribeChat();
       console.debug('[ChatPanel] Loaded MRU session:', mru.id, 'messages:', mru.message_count);
 
@@ -944,6 +997,7 @@ class ChatPanel {
 
     // 2. Reset state
     this.currentSessionId = sessionId;
+    this._sessionWarm = false;
     this._resubscribeChat();
     this.messages = [];
     this._streamingContent = '';
@@ -1081,6 +1135,11 @@ class ChatPanel {
       return null;
     }
 
+    const isAcp = this._isAcpProvider();
+    if (isAcp) {
+      this._showStatusFlash('Starting Agent Client Protocol');
+    }
+
     try {
       const body = {
         provider: this._activeProvider,
@@ -1100,6 +1159,8 @@ class ChatPanel {
         body: JSON.stringify(body)
       });
 
+      if (isAcp) this._hideStatusFlash();
+
       if (!response.ok) {
         const err = await response.json().catch(() => ({}));
         throw new Error(err.error || 'Failed to create chat session');
@@ -1107,10 +1168,12 @@ class ChatPanel {
 
       const result = await response.json();
       this.currentSessionId = result.data.id;
+      this._sessionWarm = true;
       this._resubscribeChat();
       console.debug('[ChatPanel] Session created:', this.currentSessionId);
       return result.data;
     } catch (error) {
+      if (isAcp) this._hideStatusFlash();
       console.error('[ChatPanel] Error creating session:', error);
       this._showError('Failed to start chat session. ' + error.message);
       return null;
@@ -1197,6 +1260,12 @@ class ChatPanel {
       this._pendingActionContext = null;
     }
 
+    // Show ACP resume flash when the session may need server-side auto-resume
+    const acpResuming = this._isAcpProvider() && !this._sessionWarm;
+    if (acpResuming) {
+      this._showStatusFlash('Resuming Agent Client Protocol');
+    }
+
     // Send to API
     try {
       console.debug('[ChatPanel] Sending message to session', this.currentSessionId);
@@ -1206,7 +1275,15 @@ class ChatPanel {
         body: JSON.stringify(payload)
       });
 
-      // Handle 410 Gone: session is not resumable — transparently create a new one and retry once
+      if (acpResuming) {
+        this._hideStatusFlash();
+        this._sessionWarm = true;
+      }
+
+      // Handle 410 Gone: session is not resumable — transparently create a new one and retry once.
+      // Note: we do NOT call _hideStatusFlash() here. createSession() will call
+      // _showStatusFlash() which overwrites the pill text directly, avoiding a
+      // visible hide/show flicker during the transparent retry.
       if (response.status === 410) {
         console.debug('[ChatPanel] Session not resumable (410), creating new session and retrying');
         this.currentSessionId = null;
@@ -1230,6 +1307,7 @@ class ChatPanel {
       }
       console.debug('[ChatPanel] Message accepted, waiting for WebSocket events');
     } catch (error) {
+      if (acpResuming) this._hideStatusFlash();
       // Restore pending context so it's not lost
       this._pendingContext = savedContext;
       this._pendingContextData = savedContextData;

package/src/chat/chat-providers.js

@@ -96,17 +96,40 @@ function applyConfigOverrides(providersConfig) {
 
 /**
  * Get a chat provider definition with config overrides merged.
- * @param {string} id - Provider ID (e.g. 'copilot-acp')
+ * Supports both built-in providers and dynamic providers defined entirely in config.
+ * @param {string} id - Provider ID (e.g. 'copilot-acp', or a custom ID like 'river')
  * @returns {Object|null} Provider definition or null if unknown
  */
 function getChatProvider(id) {
   const base = CHAT_PROVIDERS[id];
-  if (!base) return null;
-
   const overrides = _configOverrides[id];
+
+  if (!base && !overrides) return null;
+
+  // Dynamic provider defined entirely in config
+  if (!base) {
+    const provider = {
+      id,
+      name: overrides.name || overrides.label || id,
+      type: overrides.type || 'acp',
+      command: overrides.command || id,
+      args: overrides.args || [],
+      env: overrides.env || {},
+    };
+    if (overrides.model) provider.model = overrides.model;
+    if (overrides.extra_args && Array.isArray(overrides.extra_args)) {
+      provider.args = [...provider.args, ...overrides.extra_args];
+    }
+    if (provider.command.includes(' ')) {
+      provider.useShell = true;
+    }
+    return provider;
+  }
+
   if (!overrides) return { ...base };
 
   const merged = { ...base };
+  if (overrides.name || overrides.label) merged.name = overrides.name || overrides.label;
   if (overrides.command) merged.command = overrides.command;
   if (overrides.model) merged.model = overrides.model;
   if (overrides.env) merged.env = { ...merged.env, ...overrides.env };
@@ -125,11 +148,15 @@ function getChatProvider(id) {
 }
 
 /**
- * Get all chat provider definitions (with overrides applied).
+ * Get all chat provider definitions (built-in + dynamic from config).
  * @returns {Array<Object>}
  */
 function getAllChatProviders() {
-  return Object.keys(CHAT_PROVIDERS).map(id => getChatProvider(id));
+  const ids = new Set([
+    ...Object.keys(CHAT_PROVIDERS),
+    ...Object.keys(_configOverrides),
+  ]);
+  return [...ids].map(id => getChatProvider(id)).filter(Boolean);
 }
 
 /**
@@ -138,7 +165,7 @@ function getAllChatProviders() {
  * @returns {boolean}
  */
 function isAcpProvider(id) {
-  const provider = CHAT_PROVIDERS[id];
+  const provider = getChatProvider(id);
   return provider?.type === 'acp';
 }
 
@@ -148,7 +175,7 @@ function isAcpProvider(id) {
  * @returns {boolean}
  */
 function isClaudeCodeProvider(id) {
-  const provider = CHAT_PROVIDERS[id];
+  const provider = getChatProvider(id);
   return provider?.type === 'claude';
 }
 
@@ -158,7 +185,7 @@ function isClaudeCodeProvider(id) {
  * @returns {boolean}
  */
 function isCodexProvider(id) {
-  const provider = CHAT_PROVIDERS[id];
+  const provider = getChatProvider(id);
   return provider?.type === 'codex';
 }
 
@@ -223,7 +250,7 @@ async function checkChatProviderAvailability(id, _deps) {
  * @returns {Promise<void>}
  */
 async function checkAllChatProviders(_deps) {
-  const ids = Object.keys(CHAT_PROVIDERS);
+  const ids = [...new Set([...Object.keys(CHAT_PROVIDERS), ...Object.keys(_configOverrides)])];
   const results = await Promise.all(
     ids.map(async (id) => {
       const result = await checkChatProviderAvailability(id, _deps);

package/src/config.js

@@ -2,8 +2,11 @@
 const fs = require('fs').promises;
 const path = require('path');
 const os = require('os');
+const childProcess = require('child_process');
 const logger = require('./utils/logger');
 
+let _cachedCommandToken = null;
+
 const CONFIG_DIR = path.join(os.homedir(), '.pair-review');
 const DEFAULT_CHECKOUT_TIMEOUT_MS = 300000;
 const CONFIG_FILE = path.join(CONFIG_DIR, 'config.json');
@@ -13,6 +16,7 @@ const PACKAGE_ROOT = path.join(__dirname, '..');
 
 const DEFAULT_CONFIG = {
   github_token: "",
+  github_token_command: "gh auth token",  // Shell command whose stdout is used as the GitHub token
   port: 7247,
   theme: "light",
   default_provider: "claude",  // AI provider: 'claude', 'gemini', 'codex', 'copilot', 'opencode', 'cursor-agent', 'pi'
@@ -247,17 +251,54 @@ function getConfigDir() {
  * Priority:
  *   1. GITHUB_TOKEN environment variable (highest priority)
  *   2. config.github_token from ~/.pair-review/config.json
+ *   3. config.github_token_command — execute shell command, use stdout (cached on success)
+ *   4. Empty string (no token)
  *
  * @param {Object} config - Configuration object from loadConfig()
  * @returns {string} - GitHub token or empty string if not configured
  */
 function getGitHubToken(config) {
-  // Environment variable takes precedence
   if (process.env.GITHUB_TOKEN) {
+    logger.debug('Using GitHub token from GITHUB_TOKEN environment variable');
     return process.env.GITHUB_TOKEN;
   }
-  // Fall back to config file
-  return config.github_token || '';
+  if (config.github_token) {
+    logger.debug('Using GitHub token from config.github_token');
+    return config.github_token;
+  }
+  if (config.github_token_command) {
+    if (_cachedCommandToken !== null) {
+      logger.debug('Using GitHub token from github_token_command (cached)');
+      return _cachedCommandToken;
+    }
+    logger.debug(`Attempting GitHub token from command: ${config.github_token_command}`);
+    try {
+      const result = childProcess.execSync(config.github_token_command, {
+        encoding: 'utf8',
+        timeout: 5000,
+        stdio: ['pipe', 'pipe', 'ignore']
+      }).trim();
+      if (!result) {
+        logger.warn(`github_token_command did not produce a token (command: ${config.github_token_command})`);
+        return '';
+      }
+      logger.debug('Using GitHub token from github_token_command');
+      _cachedCommandToken = result;
+      return result;
+    } catch (error) {
+      logger.warn(`github_token_command failed (command: ${config.github_token_command}): ${error.message}`);
+      return '';
+    }
+  }
+  logger.debug('No GitHub token configured');
+  return '';
+}
+
+/**
+ * Resets the cached command token. Exported for testing only.
+ */
+function _resetTokenCache() {
+  _cachedCommandToken = null;
 }
 
 /**
@@ -465,5 +506,6 @@ module.exports = {
   resolveMonorepoOptions,
   resolveDbName,
   warnIfDevModeWithoutDbName,
+  _resetTokenCache,
   DEFAULT_CHECKOUT_TIMEOUT_MS
 };

package/src/main.js

@@ -318,7 +318,7 @@ CONFIG FILE:
 
     Example config:
     {
-      "github_token": "ghp_your_token_here",
+      "github_token_command": "gh auth token",
       "port": 7247,
       "theme": "light",
       "debug_stream": false,
@@ -327,7 +327,10 @@ CONFIG FILE:
     }
 
 GITHUB TOKEN:
-    Create a Personal Access Token at:
+    If you have the GitHub CLI (gh) installed and authenticated,
+    you're all set — the default github_token_command handles it.
+
+    Otherwise, create a Personal Access Token at:
     https://github.com/settings/tokens/new
 
     Required scopes:
@@ -336,7 +339,9 @@ GITHUB TOKEN:
 
     You can provide the token via:
       1. GITHUB_TOKEN environment variable (takes precedence)
-      2. github_token field in config file
+      2. github_token field in config file (**deprecated**)
+      3. github_token_command in config file (**preferred** for security, default: "gh auth token")
+         No secret stored in plain text. Works with gh CLI, 1Password CLI, pass, etc.
 
 ENVIRONMENT VARIABLES:
     GITHUB_TOKEN            GitHub Personal Access Token (takes precedence over config file)
@@ -504,7 +509,7 @@ async function handlePullRequest(args, config, db, flags = {}) {
     // Get GitHub token (env var takes precedence over config)
     const githubToken = getGitHubToken(config);
     if (!githubToken) {
-      throw new Error('GitHub token not found. Set GITHUB_TOKEN environment variable or run: npx pair-review --configure');
+      throw new Error('GitHub token not found. Set GITHUB_TOKEN env var, add github_token to config, or set github_token_command (e.g., "gh auth token"). Run: npx pair-review --configure');
     }
 
     // Parse PR arguments
@@ -600,7 +605,7 @@ async function performHeadlessReview(args, config, db, flags, options) {
     // Get GitHub token (env var takes precedence over config)
     const githubToken = getGitHubToken(config);
     if (!githubToken) {
-      throw new Error('GitHub token not found. Set GITHUB_TOKEN environment variable or run: npx pair-review --configure');
+      throw new Error('GitHub token not found. Set GITHUB_TOKEN env var, add github_token to config, or set github_token_command (e.g., "gh auth token"). Run: npx pair-review --configure');
     }
 
     // Parse PR arguments

package/src/routes/config.js

@@ -37,7 +37,7 @@ router.get('/api/config', (req, res) => {
   // Build chat_providers array with availability
   const chatAvailability = getAllCachedChatAvailability();
   const chatProviders = getAllChatProviders().map(p => ({
-    id: p.id, name: p.name, available: chatAvailability[p.id]?.available || false
+    id: p.id, name: p.name, type: p.type, available: chatAvailability[p.id]?.available || false
   }));
 
   // Only return safe configuration values (not secrets like github_token)

package/src/routes/pr.js

@@ -300,7 +300,11 @@ router.post('/api/pr/:owner/:repo/:number/refresh', async (req, res) => {
     }
 
     // Fetch fresh PR data from GitHub
-    const githubClient = new GitHubClient(config.github_token);
+    const githubToken = getGitHubToken(config);
+    if (!githubToken) {
+      return res.status(401).json({ error: 'GitHub token not configured' });
+    }
+    const githubClient = new GitHubClient(githubToken);
     const prData = await githubClient.fetchPullRequest(owner, repo, prNumber);
 
     // Update worktree with latest changes
@@ -467,7 +471,11 @@ router.get('/api/pr/:owner/:repo/:number/check-stale', async (req, res) => {
     }
 
     // Fetch current PR from GitHub
-    const githubClient = new GitHubClient(config.github_token);
+    const githubToken = getGitHubToken(config);
+    if (!githubToken) {
+      return res.json({ isStale: null, error: 'GitHub token not configured' });
+    }
+    const githubClient = new GitHubClient(githubToken);
     const remotePrData = await githubClient.fetchPullRequest(owner, repo, prNumber);
 
     const remoteHeadSha = remotePrData.head_sha;