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

package/public/js/components/CouncilProgressModal.js

@@ -14,7 +14,8 @@ class CouncilProgressModal {
     this.modal = null;
     this.isVisible = false;
     this.currentAnalysisId = null;
-    this.eventSource = null;
+    this._wsUnsub = null;
+    this._onReconnect = null;
     this.statusCheckInterval = null;
     this.isRunningInBackground = false;
     this.councilConfig = null;
@@ -146,59 +147,49 @@ class CouncilProgressModal {
 
   /**
    * Configure for local mode.
-   * Retained as a public method since callers invoke it, but the SSE endpoint
-   * is now unified so no per-mode state is needed.
+   * Retained as a public method since callers invoke it, but the WebSocket
+   * topic subscription is now unified so no per-mode state is needed.
    */
   setLocalMode(_reviewId) {
-    // no-op: SSE endpoint is unified
+    // no-op: WebSocket topic subscription is unified
   }
 
   /**
    * Configure for PR mode (default).
-   * Retained as a public method since callers invoke it, but the SSE endpoint
-   * is now unified so no per-mode state is needed.
+   * Retained as a public method since callers invoke it, but the WebSocket
+   * topic subscription is now unified so no per-mode state is needed.
    */
   setPRMode() {
-    // no-op: SSE endpoint is unified
+    // no-op: WebSocket topic subscription is unified
   }
 
   // ---------------------------------------------------------------------------
-  // SSE / Polling
+  // WebSocket / Polling
   // ---------------------------------------------------------------------------
 
   startProgressMonitoring() {
-    if (this.eventSource) {
-      this.eventSource.close();
-    }
+    this.stopProgressMonitoring();
     if (!this.currentAnalysisId) return;
 
-    const sseUrl = `/api/analyses/${this.currentAnalysisId}/progress`;
+    window.wsClient.connect();
 
-    this.eventSource = new EventSource(sseUrl);
-
-    this.eventSource.onopen = () => {
-      console.log('Council progress: connected to SSE stream');
-    };
-
-    this.eventSource.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data);
-        if (data.type === 'connected') return;
-        if (data.type === 'progress') {
-          this.updateProgress(data);
-          if (['completed', 'failed', 'cancelled'].includes(data.status)) {
-            this.stopProgressMonitoring();
-          }
+    // Subscribe to analysis progress via WebSocket
+    this._wsUnsub = window.wsClient.subscribe('analysis:' + this.currentAnalysisId, (msg) => {
+      if (msg.type === 'progress') {
+        this.updateProgress(msg);
+        if (['completed', 'failed', 'cancelled'].includes(msg.status)) {
+          this.stopProgressMonitoring();
         }
-      } catch (error) {
-        console.error('Error parsing council SSE data:', error);
       }
-    };
+    });
 
-    this.eventSource.onerror = () => {
-      console.error('Council SSE connection error, falling back to polling');
-      this._fallbackToPolling();
-    };
+    // Fetch initial state via HTTP (covers startup race)
+    this._fetchAndApplyStatus();
+
+    // Listen for WebSocket reconnects — any events broadcast during the
+    // reconnect gap are lost, so we re-fetch via HTTP to catch up.
+    this._onReconnect = () => { this._fetchAndApplyStatus(); };
+    window.addEventListener('wsReconnected', this._onReconnect);
   }
 
   stopProgressMonitoring() {
@@ -206,35 +197,36 @@ class CouncilProgressModal {
       clearInterval(this.statusCheckInterval);
       this.statusCheckInterval = null;
     }
-    if (this.eventSource) {
-      this.eventSource.close();
-      this.eventSource = null;
-    }
-  }
-
-  _fallbackToPolling() {
-    if (this.eventSource) {
-      this.eventSource.close();
-      this.eventSource = null;
+    if (this._wsUnsub) {
+      this._wsUnsub();
+      this._wsUnsub = null;
     }
-    if (this.statusCheckInterval) {
-      clearInterval(this.statusCheckInterval);
+    if (this._onReconnect) {
+      window.removeEventListener('wsReconnected', this._onReconnect);
+      this._onReconnect = null;
     }
+  }
 
-    this.statusCheckInterval = setInterval(async () => {
-      if (!this.currentAnalysisId) return;
-      try {
-        const response = await fetch(`/api/analyses/${this.currentAnalysisId}/status`);
-        if (!response.ok) throw new Error('Failed to fetch status');
-        const status = await response.json();
-        this.updateProgress(status);
-        if (['completed', 'failed', 'cancelled'].includes(status.status)) {
-          this.stopProgressMonitoring();
+  /**
+   * Fetch the current analysis status via HTTP and apply it to the UI.
+   * Used both on initial monitoring start and after WebSocket reconnects
+   * to catch up on any events missed during connection gaps.
+   */
+  _fetchAndApplyStatus() {
+    if (!this.currentAnalysisId) return;
+    fetch('/api/analyses/' + this.currentAnalysisId + '/status')
+      .then(r => r.ok ? r.json() : null)
+      .then(status => {
+        if (status) {
+          this.updateProgress(status);
+          if (['completed', 'failed', 'cancelled'].includes(status.status)) {
+            this.stopProgressMonitoring();
+          }
         }
-      } catch (error) {
-        console.error('Error polling council analysis status:', error);
-      }
-    }, 1000);
+      })
+      .catch(err => {
+        console.warn('Failed to fetch analysis status:', err);
+      });
   }
 
   // ---------------------------------------------------------------------------
@@ -264,7 +256,7 @@ class CouncilProgressModal {
         this._updateConsolidation(level4);
       }
     } else if (this._renderMode === 'council') {
-      // Voice-centric council: transpose level-first SSE data to voice-first DOM
+      // Voice-centric council: transpose level-first WebSocket data to voice-first DOM
       this._updateVoiceCentric(status);
     } else {
       // Advanced (level-centric): update voices within levels
@@ -503,10 +495,10 @@ class CouncilProgressModal {
   // ---------------------------------------------------------------------------
 
   /**
-   * Update voice-centric DOM from level-first SSE data.
-   * Transposes levels -> voices: for each level in SSE data, update the
+   * Update voice-centric DOM from level-first WebSocket data.
+   * Transposes levels -> voices: for each level in WebSocket data, update the
    * corresponding level-child under each voice parent.
-   * @param {Object} status - SSE status object with levels map
+   * @param {Object} status - WebSocket status object with levels map
    */
   _updateVoiceCentric(status) {
     for (let level = 1; level <= 3; level++) {
@@ -1045,7 +1037,7 @@ class CouncilProgressModal {
     // approach as the backend (runReviewerCentricCouncil in analyzer.js).
     // The backend deduplicates by provider|model|tier|customInstructions, then
     // generates keys from the index into the global deduplicated array.
-    // We must mirror this exactly so voice keys match SSE progress events.
+    // We must mirror this exactly so voice keys match WebSocket progress events.
     //
     // Voice-centric format: levels are booleans (e.g. { '1': true }), voices
     // are a top-level array (config.voices). Advanced format: levels are objects

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

@@ -70,25 +70,6 @@ class FileCommentManager {
     return window.CategoryEmoji?.getEmoji(category) || '\u{1F4AC}';
   }
 
-  /**
-   * Format adopted comment text with emoji and category prefix
-   * @param {string} text - Comment text
-   * @param {string} category - Category name
-   * @returns {string} Formatted text
-   */
-  formatAdoptedComment(text, category) {
-    if (!category) {
-      return text;
-    }
-    const emoji = this.getCategoryEmoji(category);
-    // Properly capitalize hyphenated categories (e.g., "code-style" -> "Code Style")
-    const capitalizedCategory = category
-      .split('-')
-      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(' ');
-    return `${emoji} **${capitalizedCategory}**: ${text}`;
-  }
-
   /**
    * Get the appropriate API endpoint and request body for file-level comments
    * @private
@@ -482,9 +463,10 @@ class FileCommentManager {
     // Get category label for display (same as line-level)
     const categoryLabel = suggestion.type || suggestion.category || '';
 
+    const displayBody = suggestion.formattedBody || suggestion.body || '';
     const renderedBody = window.renderMarkdown
-      ? window.renderMarkdown(suggestion.body)
-      : this.escapeHtml(suggestion.body);
+      ? window.renderMarkdown(displayBody)
+      : this.escapeHtml(displayBody);
 
     // Use exact same HTML structure as line-level suggestions (suggestion-manager.js)
     card.innerHTML = `
@@ -605,8 +587,8 @@ class FileCommentManager {
         }
       }
 
-      // Format the comment body with category prefix for display (matches server-side formatting)
-      const formattedBody = this.formatAdoptedComment(suggestion.body, suggestion.type);
+      // Use the server-formatted body — server is the single source of truth
+      const formattedBody = adoptResult.formattedBody;
 
       // Display as user comment with formatted body
       const commentData = {
@@ -760,7 +742,7 @@ class FileCommentManager {
         class="file-comment-textarea"
         placeholder="Edit the suggestion..."
         data-file="${window.escapeHtmlAttribute(suggestion.file)}"
-      >${this.escapeHtml(suggestion.body)}</textarea>
+      >${this.escapeHtml(suggestion.formattedBody || suggestion.body)}</textarea>
       <div class="file-comment-form-footer">
         <button class="file-comment-form-btn submit submit-btn">Adopt</button>
         <button class="file-comment-form-btn cancel cancel-btn">Cancel</button>
@@ -821,11 +803,7 @@ class FileCommentManager {
    */
   async adoptWithEdit(zone, suggestion, editedBody) {
     try {
-      // Format the edited body with category prefix (matches line-level behavior)
-      const formattedBody = this.formatAdoptedComment(editedBody, suggestion.type);
-
-      // Use the /edit endpoint which atomically creates a user comment with the edited
-      // body and sets the suggestion status to 'adopted' with parent_id linkage
+      // Send raw edited text plus metadata to the server for formatting
       const reviewId = this.prManager?.currentPR?.id;
       const editEndpoint = `/api/reviews/${reviewId}/suggestions/${suggestion.id}/edit`;
 
@@ -834,7 +812,7 @@ class FileCommentManager {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           action: 'adopt_edited',
-          editedText: formattedBody
+          editedText: editedBody
         })
       });
 
@@ -853,6 +831,9 @@ class FileCommentManager {
         }
       }
 
+      // Use the server-formatted body — server is the single source of truth
+      const formattedBody = editResult.formattedBody;
+
       // Display as user comment with formatted body
       const commentData = {
         id: editResult.userCommentId,

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

@@ -159,25 +159,6 @@ class SuggestionManager {
     return window.CategoryEmoji?.getEmoji(category) || '\u{1F4AC}';
   }
 
-  /**
-   * Format adopted comment text with emoji and category prefix
-   * @param {string} text - Comment text
-   * @param {string} category - Category name
-   * @returns {string} Formatted text
-   */
-  formatAdoptedComment(text, category) {
-    if (!category) {
-      return text;
-    }
-    const emoji = this.getCategoryEmoji(category);
-    // Properly capitalize hyphenated categories (e.g., "code-style" -> "Code Style")
-    const capitalizedCategory = category
-      .split('-')
-      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(' ');
-    return `${emoji} **${capitalizedCategory}**: ${text}`;
-  }
-
   /**
    * Find suggestions that target lines currently hidden in gaps
    * @param {Array} suggestions - Array of suggestions
@@ -536,10 +517,8 @@ class SuggestionManager {
         </div>
         <div class="ai-suggestion-body">
           ${(() => {
-            const body = suggestion.body || '';
-            // Debug: Log what we're rendering
-            console.log('Rendering AI suggestion body:', body.substring(0, 200));
-            return window.renderMarkdown ? window.renderMarkdown(body) : escapeHtml(body);
+            const displayBody = suggestion.formattedBody || suggestion.body || '';
+            return window.renderMarkdown ? window.renderMarkdown(displayBody) : escapeHtml(displayBody);
           })()}
         </div>
         <div class="ai-suggestion-actions">

package/public/js/pr.js

@@ -136,9 +136,9 @@ class PRManager {
     this.hideWhitespace = false;
     // Diff options dropdown (gear icon popover)
     this.diffOptionsDropdown = null;
-    // Unique client ID for self-echo suppression on SSE review events.
+    // Unique client ID for self-echo suppression on WebSocket review events.
     // Sent as X-Client-Id header on mutation requests; the server echoes
-    // it back in the SSE broadcast so this tab can skip its own events.
+    // it back in the WebSocket broadcast so this tab can skip its own events.
     this._clientId = Math.random().toString(36).slice(2) + Date.now().toString(36);
     this._installFetchInterceptor();
 
@@ -203,7 +203,7 @@ class PRManager {
    * fetch call site should manually set this header.
    * This ensures that even direct fetch() calls (e.g. from page.evaluate
    * in tests, or any code that bypasses PRManager methods) carry the
-   * client ID so the server can tag the SSE broadcast for self-echo
+   * client ID so the server can tag the WebSocket broadcast for self-echo
    * suppression.
    */
   _installFetchInterceptor() {
@@ -462,7 +462,7 @@ class PRManager {
       // Check if AI analysis is currently running
       await this.checkRunningAnalysis();
 
-      // Listen for review mutation events via multiplexed SSE
+      // Listen for review mutation events via WebSocket pub/sub
       this._initReviewEventListeners();
 
     } catch (error) {
@@ -475,14 +475,14 @@ class PRManager {
 
   /**
    * Listen for review-scoped CustomEvents dispatched by ChatPanel's
-   * multiplexed SSE connection. Replaces the old per-review EventSource.
+   * WebSocket pub/sub connection.
    */
   _initReviewEventListeners() {
     if (this._reviewEventsBound) return;
     this._reviewEventsBound = true;
 
-    // Eagerly connect chat SSE so review events flow even before chat opens
-    window.chatPanel?._ensureGlobalSSE();
+    // Eagerly connect WebSocket subscriptions so review events flow even before chat opens
+    window.chatPanel?._ensureSubscriptions();
 
     // Late-bind reviewId to ChatPanel if it was auto-opened by PanelGroup
     // before prManager was ready (DOMContentLoaded race condition)
@@ -2595,10 +2595,6 @@ class PRManager {
     return this.suggestionManager.getCategoryEmoji(category);
   }
 
-  formatAdoptedComment(text, category) {
-    return this.suggestionManager.formatAdoptedComment(text, category);
-  }
-
   getTypeDescription(type) {
     return this.suggestionManager.getTypeDescription(type);
   }
@@ -2656,8 +2652,8 @@ class PRManager {
     // Collapse the suggestion in the UI
     this.collapseSuggestionForAdoption(suggestionRow, suggestionId);
 
-    // Build comment data from the adopt response and suggestion metadata
-    const formattedText = this.formatAdoptedComment(suggestionText, suggestionType);
+    // Use the server-formatted body — server is the single source of truth
+    const formattedText = adoptResult.formattedBody;
     const newComment = {
       id: adoptResult.userCommentId,
       file: fileName,
@@ -4169,7 +4165,7 @@ class PRManager {
 
   /**
    * Load context files for the current review and render them in the diff panel.
-   * Called after renderDiff() and on SSE context_files_changed events.
+   * Called after renderDiff() and on WebSocket context_files_changed events.
    */
   async loadContextFiles() {
     const reviewId = this.currentPR?.id;
@@ -4593,7 +4589,7 @@ class PRManager {
         console.error('Failed to remove context file:', resp.status);
         return;
       }
-      // Refresh immediately — SSE self-echo is suppressed by the client ID filter
+      // Refresh immediately — WebSocket self-echo is suppressed by the client ID filter
       await this.loadContextFiles();
     } catch (error) {
       console.error('Error removing context file:', error);

package/public/js/ws-client.js

@@ -0,0 +1,155 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+/**
+ * Browser-side WebSocket client singleton.
+ * Provides topic-based pub/sub over a single WebSocket connection
+ * with automatic reconnection and subscription restoration.
+ */
+(function () {
+  'use strict';
+
+  class WSClient {
+    constructor() {
+      /** @type {WebSocket|null} */
+      this._ws = null;
+      /** @type {Map<string, Set<Function>>} topic -> callbacks */
+      this._subscriptions = new Map();
+      /** @type {boolean} */
+      this.connected = false;
+      /** @type {number} current backoff delay in ms */
+      this._backoff = 1000;
+      /** @type {number} */
+      this._backoffMax = 10000;
+      /** @type {boolean} whether close() was called intentionally */
+      this._closed = false;
+      /** @type {number|null} reconnect timer id */
+      this._reconnectTimer = null;
+      /** @type {boolean} whether at least one connection has been established */
+      this._hasConnected = false;
+    }
+
+    /**
+     * Open the WebSocket connection. No-op if already connected or connecting.
+     */
+    connect() {
+      if (this._ws && (this._ws.readyState === WebSocket.OPEN || this._ws.readyState === WebSocket.CONNECTING)) {
+        return;
+      }
+      this._closed = false;
+      const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const url = `${protocol}//${location.host}/ws`;
+      this._ws = new WebSocket(url);
+
+      this._ws.onopen = () => {
+        this.connected = true;
+        this._backoff = 1000;
+        // Re-subscribe to all active topics (_subscriptions is authoritative)
+        for (const topic of this._subscriptions.keys()) {
+          this._ws.send(JSON.stringify({ action: 'subscribe', topic }));
+        }
+        // Emit reconnected event on subsequent opens (not the initial connect)
+        if (this._hasConnected) {
+          window.dispatchEvent(new CustomEvent('wsReconnected'));
+        }
+        this._hasConnected = true;
+      };
+
+      this._ws.onmessage = (event) => {
+        let msg;
+        try {
+          msg = JSON.parse(event.data);
+        } catch {
+          return;
+        }
+        const callbacks = this._subscriptions.get(msg.topic);
+        if (callbacks) {
+          for (const cb of [...callbacks]) {
+            try {
+              cb(msg);
+            } catch (e) {
+              console.error('[WSClient] Subscriber error:', e);
+            }
+          }
+        }
+      };
+
+      this._ws.onclose = () => {
+        this.connected = false;
+        this._ws = null;
+        if (!this._closed) {
+          this._scheduleReconnect();
+        }
+      };
+
+      this._ws.onerror = () => {
+        // onclose will fire after onerror, which handles reconnection
+      };
+    }
+
+    /**
+     * Subscribe to a topic. Returns an unsubscribe function.
+     * Safe to call before connect() — the subscribe message will be
+     * sent once the connection is established.
+     *
+     * @param {string} topic
+     * @param {Function} callback - receives the full parsed message object
+     * @returns {Function} unsubscribe
+     */
+    subscribe(topic, callback) {
+      let callbacks = this._subscriptions.get(topic);
+      if (!callbacks) {
+        callbacks = new Set();
+        this._subscriptions.set(topic, callbacks);
+      }
+      callbacks.add(callback);
+
+      // Send subscribe message if connected (otherwise it will be sent on connect via _subscriptions)
+      if (this._ws && this._ws.readyState === WebSocket.OPEN) {
+        this._ws.send(JSON.stringify({ action: 'subscribe', topic }));
+      }
+
+      // Return unsubscribe function
+      return () => {
+        callbacks.delete(callback);
+        if (callbacks.size === 0) {
+          this._subscriptions.delete(topic);
+          const unsub = { action: 'unsubscribe', topic };
+          if (this._ws && this._ws.readyState === WebSocket.OPEN) {
+            this._ws.send(JSON.stringify(unsub));
+          }
+        }
+      };
+    }
+
+    /**
+     * Close the WebSocket and stop reconnection.
+     */
+    close() {
+      this._closed = true;
+      if (this._reconnectTimer !== null) {
+        clearTimeout(this._reconnectTimer);
+        this._reconnectTimer = null;
+      }
+      if (this._ws) {
+        this._ws.close();
+        this._ws = null;
+      }
+      this.connected = false;
+    }
+
+    /** @private */
+    _scheduleReconnect() {
+      this._reconnectTimer = setTimeout(() => {
+        this._reconnectTimer = null;
+        this.connect();
+      }, this._backoff);
+      this._backoff = Math.min(this._backoff * 2, this._backoffMax);
+    }
+  }
+
+  // Export as singleton on window
+  if (typeof window !== 'undefined') {
+    window.WSClient = WSClient;
+    window.wsClient = new WSClient();
+  }
+})();

package/public/local.html

@@ -516,6 +516,9 @@
     <!-- Timestamp parsing utility -->
     <script src="/js/utils/time.js"></script>
 
+    <!-- WebSocket client -->
+    <script src="/js/ws-client.js"></script>
+
     <!-- Components -->
     <script src="/js/components/Toast.js"></script>
     <script src="/js/components/ConfirmDialog.js"></script>

package/public/pr.html

@@ -339,6 +339,9 @@
     <!-- Timestamp parsing utility -->
     <script src="/js/utils/time.js"></script>
 
+    <!-- WebSocket client -->
+    <script src="/js/ws-client.js"></script>
+
     <!-- Components -->
     <script src="/js/components/Toast.js"></script>
     <script src="/js/components/ConfirmDialog.js"></script>