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

package/public/index.html

@@ -542,55 +542,6 @@
             to { transform: rotate(360deg); }
         }
 
-        /* Usage Info (shown when no reviews) */
-        .usage-info {
-            background-color: var(--color-bg-primary);
-            border: 1px solid var(--color-border-primary);
-            border-radius: var(--radius-lg);
-            padding: 24px;
-            text-align: left;
-            max-width: 600px;
-            width: 100%;
-            margin-bottom: 32px;
-        }
-
-        .usage-info h3 {
-            font-size: 16px;
-            font-weight: 600;
-            margin-bottom: 16px;
-            color: var(--color-text-primary);
-        }
-
-        .usage-info p {
-            color: var(--color-text-secondary);
-            margin-bottom: 12px;
-        }
-
-        .usage-info code {
-            background-color: var(--color-bg-secondary);
-            padding: 2px 6px;
-            border-radius: var(--radius-sm);
-            font-family: var(--font-mono);
-            font-size: 13px;
-        }
-
-        .usage-info pre {
-            background-color: var(--color-bg-tertiary);
-            color: var(--color-text-primary);
-            padding: 16px;
-            border-radius: var(--radius-md);
-            margin: 12px 0;
-            overflow-x: auto;
-            font-family: var(--font-mono);
-            font-size: 13px;
-            line-height: 1.5;
-        }
-
-        .usage-info pre code {
-            background: none;
-            padding: 0;
-        }
-
         /* Recent Reviews Section */
         .recent-reviews-section {
             width: 100%;
@@ -754,6 +705,28 @@
             color: var(--color-text-primary);
         }
 
+        .btn-github-link {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 32px;
+            height: 32px;
+            padding: 0;
+            background: transparent;
+            border: 1px solid transparent;
+            border-radius: var(--radius-md);
+            color: var(--color-text-tertiary);
+            cursor: pointer;
+            transition: all var(--transition-fast);
+            text-decoration: none;
+        }
+
+        .btn-github-link:hover {
+            background-color: var(--color-bg-secondary);
+            border-color: var(--color-border-primary);
+            color: var(--color-text-primary);
+        }
+
         .recent-reviews-empty {
             text-align: center;
             padding: 40px 20px;
@@ -870,6 +843,76 @@
             display: block;
         }
 
+        .tab-divider {
+            width: 1px;
+            height: 16px;
+            background: var(--color-border-secondary);
+            align-self: center;
+            margin: 0 4px;
+        }
+
+        .tab-pane-header {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 12px;
+        }
+
+        .fetched-at-label {
+            font-size: 12px;
+            color: var(--color-fg-muted);
+        }
+
+        .btn-refresh {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 32px;
+            height: 32px;
+            padding: 0;
+            background: transparent;
+            border: 1px solid var(--color-border-primary);
+            border-radius: var(--radius-md);
+            color: var(--color-text-tertiary);
+            cursor: pointer;
+            transition: all var(--transition-fast);
+        }
+
+        .btn-refresh:hover {
+            background: var(--color-bg-secondary);
+            color: var(--color-text-primary);
+        }
+
+        .btn-refresh.refreshing {
+            pointer-events: none;
+            opacity: 0.6;
+        }
+
+        .btn-refresh.refreshing svg {
+            animation: spin 0.8s linear infinite;
+        }
+
+        .collection-pr-row {
+            cursor: pointer;
+        }
+
+        .collection-pr-row:hover {
+            background: var(--color-bg-secondary);
+        }
+
+        .collection-pr-number {
+            color: var(--ai-primary);
+            font-weight: 500;
+            font-family: var(--font-mono);
+            cursor: pointer;
+        }
+
+        .collection-pr-number:hover {
+            color: var(--ai-secondary);
+            text-decoration: underline;
+        }
+
         /* Local Reviews Table - tighter spacing */
         .recent-reviews-table.local-table th,
         .recent-reviews-table.local-table td {
@@ -1021,10 +1064,6 @@
                 width: 100%;
             }
 
-            .usage-info {
-                padding: 20px;
-            }
-
             .recent-reviews-table {
                 font-size: 13px;
             }
@@ -1073,6 +1112,9 @@
                     <div class="section-header" id="recent-reviews-header">
                         <div class="tab-bar" id="unified-tab-bar">
                             <button class="tab-btn active" data-tab="pr-tab" type="button">Pull Requests</button>
+                            <button class="tab-btn" data-tab="review-requests-tab" type="button">My Review Requests</button>
+                            <button class="tab-btn" data-tab="my-prs-tab" type="button">My PRs</button>
+                            <span class="tab-divider"></span>
                             <button class="tab-btn" data-tab="local-tab" type="button">Local Reviews</button>
                         </div>
                     </div>
@@ -1104,6 +1146,32 @@
                         </div>
                     </div>
 
+                    <!-- My Review Requests Tab -->
+                    <div class="tab-pane" id="review-requests-tab">
+                        <div class="tab-pane-header">
+                            <span class="fetched-at-label" id="review-requests-fetched-at"></span>
+                            <button class="btn-refresh" id="refresh-review-requests" title="Refresh from GitHub">
+                                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"/></svg>
+                            </button>
+                        </div>
+                        <div id="review-requests-container" class="recent-reviews-loading">
+                            Loading...
+                        </div>
+                    </div>
+
+                    <!-- My PRs Tab -->
+                    <div class="tab-pane" id="my-prs-tab">
+                        <div class="tab-pane-header">
+                            <span class="fetched-at-label" id="my-prs-fetched-at"></span>
+                            <button class="btn-refresh" id="refresh-my-prs" title="Refresh from GitHub">
+                                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"/></svg>
+                            </button>
+                        </div>
+                        <div id="my-prs-container" class="recent-reviews-loading">
+                            Loading...
+                        </div>
+                    </div>
+
                     <!-- Local Reviews Tab: Input + Listing -->
                     <div class="tab-pane" id="local-tab">
                         <div class="start-review-section">
@@ -1134,10 +1202,6 @@
                         </div>
                     </div>
                 </div>
-
-                <!-- Usage Info (shown when no reviews, hidden initially during loading) -->
-                <!-- Content is populated from help modal via JS to avoid duplication -->
-                <div class="usage-info loading-hidden" id="usage-info"></div>
             </div>
         </main>
     </div>

package/public/js/components/AIPanel.js

@@ -1432,7 +1432,8 @@ class AIPanel {
      */
     clearAllFindings() {
         this.findings = [];
-        this.comments = [];
+        // NOTE: Do NOT clear this.comments here. User comments are independent
+        // of AI analysis and must persist across analysis runs.
         this.currentIndex = -1; // Reset navigation
         this.updateSegmentCounts();
         this.renderFindings();

package/public/js/components/AdvancedConfigTab.js

@@ -708,7 +708,7 @@ class AdvancedConfigTab {
     const providerIds = Object.keys(this.providers).filter(id => {
       const p = this.providers[id];
       return !p.availability || p.availability.available;
-    });
+    }).sort((a, b) => (this.providers[a].name || a).localeCompare(this.providers[b].name || b));
 
     for (const id of providerIds) {
       const opt = document.createElement('option');
@@ -737,7 +737,7 @@ class AdvancedConfigTab {
     if (!modelSelect) return;
 
     const currentModel = modelSelect.value;
-    const models = provider.models || [];
+    const models = [...(provider.models || [])].sort((a, b) => (a.name || a.id).localeCompare(b.name || b.id));
     modelSelect.innerHTML = '';
     for (const model of models) {
       const opt = document.createElement('option');

package/public/js/components/AnalysisConfigModal.js

@@ -452,12 +452,12 @@ class AnalysisConfigModal {
     const container = this.modal.querySelector('#provider-toggle-container');
     if (!container) return;
 
-    // Filter to only show available providers
+    // Filter to only show available providers, sorted alphabetically by name
     const availableProviderIds = Object.keys(this.providers).filter(providerId => {
       const provider = this.providers[providerId];
       // Show provider if no availability info (check pending) or if explicitly available
       return !provider.availability || provider.availability.available;
-    });
+    }).sort((a, b) => (this.providers[a].name || a).localeCompare(this.providers[b].name || b));
 
     // If selected provider is no longer available, select first available
     if (availableProviderIds.length > 0 && !availableProviderIds.includes(this.selectedProvider)) {

package/public/js/components/ChatPanel.js

@@ -32,10 +32,13 @@ 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._activeProvider = window.__pairReview?.chatProvider || 'pi';
+    this._chatProviders = window.__pairReview?.chatProviders || [];
 
     this._render();
     this._bindEvents();
     this._initContextTooltip();
+    this._updateTitle();
   }
 
   /**
@@ -48,20 +51,27 @@ class ChatPanel {
       <div id="chat-panel" class="chat-panel chat-panel--closed">
         <div class="chat-panel__resize-handle" title="Drag to resize"></div>
         <div class="chat-panel__header">
-          <div class="chat-panel__session-picker">
-            <button class="chat-panel__session-picker-btn" title="Switch conversation">
+          <div class="chat-panel__provider-picker">
+            <button class="chat-panel__provider-picker-btn" title="Switch provider">
               <svg viewBox="0 0 16 16" fill="currentColor" width="14" height="14">
                 <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>
               <span class="chat-panel__title-text">Chat &middot; Pi</span>
-              <span class="chat-panel__chevron-sep">&middot;</span>
-              <svg class="chat-panel__chevron" viewBox="0 0 16 16" fill="currentColor" width="12" height="12">
-                <path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"/>
+              <svg class="chat-panel__provider-chevron" viewBox="0 0 16 16" fill="currentColor" width="10" height="10">
+                <path d="M4.427 7.427l3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"/>
               </svg>
             </button>
+            <div class="chat-panel__provider-dropdown" style="display: none;"></div>
+          </div>
+          <div class="chat-panel__session-picker">
             <div class="chat-panel__session-dropdown" style="display: none;"></div>
           </div>
           <div class="chat-panel__actions">
+            <button class="chat-panel__history-btn" title="Session history">
+              <svg viewBox="0 0 16 16" fill="currentColor" width="14" height="14">
+                <path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"/>
+              </svg>
+            </button>
             <button class="chat-panel__new-btn" title="New conversation">
               <svg viewBox="0 0 16 16" fill="currentColor" width="14" height="14">
                 <path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"/>
@@ -152,9 +162,12 @@ class ChatPanel {
     this.dismissCommentBtn = this.container.querySelector('.chat-panel__action-btn--dismiss-comment');
     this.createCommentBtn = this.container.querySelector('.chat-panel__action-btn--create-comment');
     this.actionBarDismissBtn = this.container.querySelector('.chat-panel__action-bar-dismiss');
+    this.providerPickerEl = this.container.querySelector('.chat-panel__provider-picker');
+    this.providerPickerBtn = this.container.querySelector('.chat-panel__provider-picker-btn');
+    this.providerDropdown = this.container.querySelector('.chat-panel__provider-dropdown');
     this.sessionPickerEl = this.container.querySelector('.chat-panel__session-picker');
-    this.sessionPickerBtn = this.container.querySelector('.chat-panel__session-picker-btn');
     this.sessionDropdown = this.container.querySelector('.chat-panel__session-dropdown');
+    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');
   }
@@ -171,8 +184,11 @@ class ChatPanel {
     // New conversation button
     this.newBtn.addEventListener('click', () => this._startNewConversation());
 
-    // Session picker button
-    this.sessionPickerBtn.addEventListener('click', () => this._toggleSessionDropdown());
+    // Provider picker button
+    this.providerPickerBtn.addEventListener('click', () => this._toggleProviderDropdown());
+
+    // Session history button
+    this.historyBtn.addEventListener('click', () => this._toggleSessionDropdown());
 
     // Send button
     this.sendBtn.addEventListener('click', () => this.sendMessage());
@@ -232,7 +248,9 @@ class ChatPanel {
     // Escape: close dropdown if open, stop agent if streaming, blur textarea if focused, otherwise close panel
     this._onKeydown = (e) => {
       if (e.key === 'Escape' && this.isOpen) {
-        if (this._isSessionDropdownOpen()) {
+        if (this._isProviderDropdownOpen()) {
+          this._hideProviderDropdown();
+        } else if (this._isSessionDropdownOpen()) {
           this._hideSessionDropdown();
         } else if (this.isStreaming) {
           this._stopAgent();
@@ -254,6 +272,13 @@ class ChatPanel {
       }
     });
 
+    // Re-read chat providers once the <head> config fetch resolves
+    this._onChatStateChanged = () => {
+      this._chatProviders = window.__pairReview?.chatProviders || [];
+      this._updateTitle();
+    };
+    window.addEventListener('chat-state-changed', this._onChatStateChanged);
+
     this._bindResizeEvents();
   }
 
@@ -356,19 +381,32 @@ class ChatPanel {
 
   /**
    * Update the chat panel title with provider and model info.
-   * @param {string} [provider='Pi'] - Provider display name
+   * @param {string} [providerId] - Provider ID (looked up in _chatProviders for display name)
    * @param {string} [model] - Model ID or display name (e.g. 'default', 'multi-model')
    */
-  _updateTitle(provider = 'Pi', model) {
+  _updateTitle(providerId, model) {
     if (!this.titleTextEl) return;
+    const providerName = this._getProviderDisplayName(providerId || this._activeProvider);
     const modelDisplay = model
       ? model.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')
       : null;
-    const parts = ['Chat', provider];
+    const parts = ['Chat', providerName];
     if (modelDisplay) parts.push(modelDisplay);
     this.titleTextEl.textContent = parts.join(' \u00b7 ');
   }
 
+  /**
+   * Get display name for a provider ID from the _chatProviders array.
+   * Falls back to capitalized provider ID if not found.
+   * @param {string} providerId
+   * @returns {string}
+   */
+  _getProviderDisplayName(providerId) {
+    const entry = this._chatProviders.find(p => p.id === providerId);
+    if (entry) return entry.name;
+    return providerId.charAt(0).toUpperCase() + providerId.slice(1);
+  }
+
   /**
    * Open the chat panel
    * @param {Object} options - Optional context
@@ -493,6 +531,7 @@ class ChatPanel {
    * Close the chat panel
    */
   close() {
+    this._hideProviderDropdown();
     this._hideSessionDropdown();
     // Reset UI streaming state (buttons) but keep isStreaming and _streamingContent
     // intact so the background WebSocket handler can continue accumulating events.
@@ -533,6 +572,7 @@ class ChatPanel {
    * Preserves any unsent pending context cards and re-adds them to the new conversation.
    */
   async _startNewConversation() {
+    this._hideProviderDropdown();
     this._hideSessionDropdown();
     // 1. Snapshot pending context before clearing (these are unsent context cards)
     const savedContext = this._pendingContext.slice();
@@ -630,8 +670,8 @@ class ChatPanel {
       console.debug('[ChatPanel] Loaded MRU session:', mru.id, 'messages:', mru.message_count);
 
       if (mru.provider) {
-        const providerName = mru.provider.charAt(0).toUpperCase() + mru.provider.slice(1);
-        this._updateTitle(providerName, mru.model);
+        this._updateTitle(mru.provider, mru.model);
+        this._activeProvider = mru.provider;
       }
 
       if (mru.message_count > 0) {
@@ -688,6 +728,108 @@ class ChatPanel {
     }
   }
 
+  // ── Provider picker dropdown ──────────────────────────────────────────
+
+  _isProviderDropdownOpen() {
+    return this.providerDropdown && this.providerDropdown.style.display !== 'none';
+  }
+
+  _toggleProviderDropdown() {
+    if (this._isProviderDropdownOpen()) {
+      this._hideProviderDropdown();
+    } else {
+      this._showProviderDropdown();
+    }
+  }
+
+  _showProviderDropdown() {
+    if (!this.providerDropdown) return;
+    // Close session dropdown if open
+    this._hideSessionDropdown();
+
+    this._renderProviderDropdown();
+    this.providerDropdown.style.display = '';
+    this.providerPickerBtn.classList.add('chat-panel__provider-picker-btn--open');
+
+    // Bind outside-click-to-close (one-shot)
+    this._providerOutsideClickHandler = (e) => {
+      if (!this.providerPickerEl.contains(e.target)) {
+        this._hideProviderDropdown();
+      }
+    };
+    setTimeout(() => {
+      document.addEventListener('click', this._providerOutsideClickHandler);
+    }, 0);
+  }
+
+  _hideProviderDropdown() {
+    if (!this.providerDropdown) return;
+    this.providerDropdown.style.display = 'none';
+    this.providerPickerBtn.classList.remove('chat-panel__provider-picker-btn--open');
+    if (this._providerOutsideClickHandler) {
+      document.removeEventListener('click', this._providerOutsideClickHandler);
+      this._providerOutsideClickHandler = null;
+    }
+  }
+
+  _renderProviderDropdown() {
+    if (!this.providerDropdown) return;
+    const providers = [...this._chatProviders].sort((a, b) =>
+      a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })
+    );
+
+    if (providers.length === 0) {
+      this.providerDropdown.innerHTML = `
+        <div class="chat-panel__provider-empty">No providers configured</div>
+      `;
+      return;
+    }
+
+    const items = providers.map(p => {
+      const isActive = p.id === this._activeProvider;
+      const isUnavailable = !p.available;
+      const classes = ['chat-panel__provider-item'];
+      if (isActive) classes.push('chat-panel__provider-item--active');
+      if (isUnavailable) classes.push('chat-panel__provider-item--unavailable');
+
+      const checkmark = isActive
+        ? `<svg class="chat-panel__provider-check" viewBox="0 0 16 16" fill="currentColor" width="12" height="12">
+             <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/>
+           </svg>`
+        : '';
+
+      return `
+        <button class="${classes.join(' ')}"
+                data-provider-id="${this._escapeHtml(p.id)}"
+                ${isUnavailable ? 'disabled' : ''}>
+          <span class="chat-panel__provider-name">${this._escapeHtml(p.name)}</span>
+          ${checkmark}
+        </button>
+      `;
+    }).join('');
+
+    this.providerDropdown.innerHTML = items;
+
+    // Bind click handlers
+    this.providerDropdown.querySelectorAll('.chat-panel__provider-item:not([disabled])').forEach(btn => {
+      btn.addEventListener('click', () => {
+        this._selectProvider(btn.dataset.providerId);
+        this._hideProviderDropdown();
+      });
+    });
+  }
+
+  /**
+   * Select a provider. Updates active provider and title. Only affects new sessions.
+   * @param {string} id - Provider ID to activate
+   */
+  _selectProvider(id) {
+    if (id === this._activeProvider) return;
+    this._activeProvider = id;
+    this._updateTitle();
+    this._startNewConversation();
+  }
+
   // ── Session picker dropdown ────────────────────────────────────────────
 
   _isSessionDropdownOpen() {
@@ -704,31 +846,43 @@ class ChatPanel {
 
   async _showSessionDropdown() {
     if (!this.sessionDropdown) return;
+    // Close provider dropdown if open
+    this._hideProviderDropdown();
 
     const sessions = await this._fetchSessions();
     this._renderSessionDropdown(sessions);
     this.sessionDropdown.style.display = '';
-    this.sessionPickerBtn.classList.add('chat-panel__session-picker-btn--open');
+    this.historyBtn.classList.add('chat-panel__history-btn--open');
+
+    // Position the fixed dropdown relative to the history button
+    this._positionSessionDropdown();
 
     // Bind outside-click-to-close (one-shot)
-    this._outsideClickHandler = (e) => {
-      if (!this.sessionPickerEl.contains(e.target)) {
+    this._sessionOutsideClickHandler = (e) => {
+      if (!this.sessionPickerEl.contains(e.target) && !this.historyBtn.contains(e.target)) {
         this._hideSessionDropdown();
       }
     };
     // Use setTimeout so the current click event doesn't immediately trigger close
     setTimeout(() => {
-      document.addEventListener('click', this._outsideClickHandler);
+      document.addEventListener('click', this._sessionOutsideClickHandler);
     }, 0);
   }
 
+  _positionSessionDropdown() {
+    if (!this.sessionDropdown || !this.historyBtn) return;
+    const rect = this.historyBtn.getBoundingClientRect();
+    this.sessionDropdown.style.top = `${rect.bottom + 4}px`;
+    this.sessionDropdown.style.right = `${window.innerWidth - rect.right}px`;
+  }
+
   _hideSessionDropdown() {
     if (!this.sessionDropdown) return;
     this.sessionDropdown.style.display = 'none';
-    this.sessionPickerBtn.classList.remove('chat-panel__session-picker-btn--open');
-    if (this._outsideClickHandler) {
-      document.removeEventListener('click', this._outsideClickHandler);
-      this._outsideClickHandler = null;
+    this.historyBtn.classList.remove('chat-panel__history-btn--open');
+    if (this._sessionOutsideClickHandler) {
+      document.removeEventListener('click', this._sessionOutsideClickHandler);
+      this._sessionOutsideClickHandler = null;
     }
   }
 
@@ -748,12 +902,15 @@ class ChatPanel {
         ? this._truncate(s.first_message, 60)
         : 'New conversation';
       const timeAgo = this._formatRelativeTime(s.updated_at);
+      const providerLabel = s.provider
+        ? `<span class="chat-panel__session-provider">${this._escapeHtml(this._getProviderDisplayName(s.provider))}</span>`
+        : '';
 
       return `
         <button class="chat-panel__session-item${isActive ? ' chat-panel__session-item--active' : ''}"
                 data-session-id="${s.id}">
           <span class="chat-panel__session-preview">${this._escapeHtml(preview)}</span>
-          <span class="chat-panel__session-meta">${this._escapeHtml(timeAgo)}</span>
+          <span class="chat-panel__session-meta">${providerLabel}${this._escapeHtml(timeAgo)}</span>
         </button>
       `;
     }).join('');
@@ -805,8 +962,8 @@ class ChatPanel {
 
     // 4. Update title
     if (sessionData.provider) {
-      const providerName = sessionData.provider.charAt(0).toUpperCase() + sessionData.provider.slice(1);
-      this._updateTitle(providerName, sessionData.model);
+      this._updateTitle(sessionData.provider, sessionData.model);
+      this._activeProvider = sessionData.provider;
     } else {
       this._updateTitle();
     }
@@ -926,7 +1083,7 @@ class ChatPanel {
 
     try {
       const body = {
-        provider: 'pi',
+        provider: this._activeProvider,
         reviewId: this.reviewId
       };
       if (contextCommentId) {
@@ -2286,10 +2443,11 @@ class ChatPanel {
    * @param {Object} [toolInput] - Tool input/arguments (optional)
    */
   _showToolUse(toolName, status, toolInput) {
+    if (!toolName) return;
     const streamingMsg = document.getElementById('chat-streaming-msg');
     if (!streamingMsg) return;
 
-    const isTask = toolName.toLowerCase() === 'task';
+    const isTask = toolName.toLowerCase() === 'task' || toolName.toLowerCase() === 'agent';
 
     if (status === 'start') {
       this._hideThinkingIndicator();
@@ -2326,7 +2484,7 @@ class ChatPanel {
     } else {
       if (isTask) {
         // Remove spinner from completed Task badge
-        const badges = streamingMsg.querySelectorAll('.chat-panel__tool-badge[data-tool="Task"]:not(.chat-panel__tool-badge--transient)');
+        const badges = streamingMsg.querySelectorAll('.chat-panel__tool-badge[data-tool="Task"]:not(.chat-panel__tool-badge--transient), .chat-panel__tool-badge[data-tool="Agent"]:not(.chat-panel__tool-badge--transient)');
         badges.forEach(b => {
           const spinner = b.querySelector('.chat-panel__tool-spinner');
           if (spinner) spinner.remove();
@@ -2991,6 +3149,7 @@ class ChatPanel {
    */
   destroy() {
     document.removeEventListener('keydown', this._onKeydown);
+    window.removeEventListener('chat-state-changed', this._onChatStateChanged);
     this._closeSubscriptions();
     this.messages = [];