@in-the-loop-labs/pair-review 1.6.2 → 2.0.1

package/public/js/repo-settings.js

@@ -200,6 +200,16 @@ class RepoSettingsPage {
       });
     }
 
+    // Chat instructions textarea
+    const chatTextarea = document.getElementById('chat-instructions');
+    if (chatTextarea) {
+      chatTextarea.addEventListener('input', () => {
+        this.currentSettings.default_chat_instructions = chatTextarea.value;
+        this.updateChatCharCount(chatTextarea.value.length);
+        this.checkForChanges();
+      });
+    }
+
     // Analysis mode segmented control
     const modeToggle = document.getElementById('analysis-mode-toggle');
     if (modeToggle) {
@@ -814,7 +824,8 @@ class RepoSettingsPage {
         default_tab: settings.default_tab || 'single',
         default_council_id: settings.default_council_id || null,
         default_instructions: settings.default_instructions || '',
-        local_path: settings.local_path || null
+        local_path: settings.local_path || null,
+        default_chat_instructions: settings.default_chat_instructions || ''
       };
 
       // Set current settings
@@ -832,7 +843,8 @@ class RepoSettingsPage {
         default_tab: 'single',
         default_council_id: null,
         default_instructions: '',
-        local_path: null
+        local_path: null,
+        default_chat_instructions: ''
       };
       this.currentSettings = { ...this.originalSettings };
       this.updateUI();
@@ -887,6 +899,13 @@ class RepoSettingsPage {
       this.updateCharCount(textarea.value.length);
     }
 
+    // Update chat instructions textarea
+    const chatTextarea = document.getElementById('chat-instructions');
+    if (chatTextarea) {
+      chatTextarea.value = this.currentSettings.default_chat_instructions || '';
+      this.updateChatCharCount(chatTextarea.value.length);
+    }
+
     // Update local path display
     this.updateLocalPathDisplay();
   }
@@ -923,6 +942,13 @@ class RepoSettingsPage {
     }
   }
 
+  updateChatCharCount(count) {
+    const charCountEl = document.getElementById('chat-char-count');
+    if (charCountEl) {
+      charCountEl.textContent = count;
+    }
+  }
+
   checkForChanges() {
     // Use nullish coalescing to normalize null/undefined for consistent comparison
     const providerChanged = (this.currentSettings.default_provider ?? null) !== (this.originalSettings.default_provider ?? null);
@@ -930,8 +956,9 @@ class RepoSettingsPage {
     const tabChanged = (this.currentSettings.default_tab ?? 'single') !== (this.originalSettings.default_tab ?? 'single');
     const councilChanged = (this.currentSettings.default_council_id ?? null) !== (this.originalSettings.default_council_id ?? null);
     const instructionsChanged = (this.currentSettings.default_instructions ?? '') !== (this.originalSettings.default_instructions ?? '');
+    const chatInstructionsChanged = (this.currentSettings.default_chat_instructions ?? '') !== (this.originalSettings.default_chat_instructions ?? '');
 
-    this.hasUnsavedChanges = providerChanged || modelChanged || tabChanged || councilChanged || instructionsChanged;
+    this.hasUnsavedChanges = providerChanged || modelChanged || tabChanged || councilChanged || instructionsChanged || chatInstructionsChanged;
 
     // Show/hide action bar
     const actionBar = document.getElementById('action-bar');
@@ -965,7 +992,8 @@ class RepoSettingsPage {
           default_model: this.currentSettings.default_model,
           default_tab: this.currentSettings.default_tab,
           default_council_id: this.currentSettings.default_council_id,
-          default_instructions: this.currentSettings.default_instructions
+          default_instructions: this.currentSettings.default_instructions,
+          default_chat_instructions: this.currentSettings.default_chat_instructions
         })
       });
 
@@ -1039,7 +1067,8 @@ class RepoSettingsPage {
           default_tab: null,
           default_council_id: null,
           default_instructions: '',
-          local_path: null
+          local_path: null,
+          default_chat_instructions: ''
         })
       });
 
@@ -1054,7 +1083,8 @@ class RepoSettingsPage {
         default_tab: 'single',
         default_council_id: null,
         default_instructions: '',
-        local_path: null
+        local_path: null,
+        default_chat_instructions: ''
       };
       this.currentSettings = { ...this.originalSettings };
       this.hasUnsavedChanges = false;

package/public/js/utils/category-emoji.js

@@ -0,0 +1,44 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+/**
+ * Canonical category-to-emoji mapping for AI suggestion types.
+ * Used by SuggestionManager and FileCommentManager to format adopted comments.
+ *
+ * Canonical types from src/ai/prompts/shared/output-schema.js:
+ * bug|improvement|praise|suggestion|design|performance|security|code-style
+ */
+
+(function() {
+  const CATEGORY_EMOJI_MAP = {
+    'bug': '\u{1F41B}',           // bug
+    'improvement': '\u{1F4A1}',   // lightbulb
+    'praise': '\u{2B50}',         // star
+    'suggestion': '\u{1F4AC}',    // speech bubble
+    'design': '\u{1F4D0}',        // triangular ruler
+    'performance': '\u{26A1}',    // high voltage
+    'security': '\u{1F512}',      // lock
+    'code-style': '\u{1F3A8}',    // artist palette
+    'style': '\u{1F3A8}'          // artist palette (alias for code-style)
+  };
+
+  const DEFAULT_EMOJI = '\u{1F4AC}'; // speech bubble
+
+  /**
+   * Get emoji for a suggestion category
+   * @param {string} category - Category name
+   * @returns {string} Emoji character
+   */
+  function getEmoji(category) {
+    return CATEGORY_EMOJI_MAP[category] || DEFAULT_EMOJI;
+  }
+
+  // Export to global scope
+  window.CategoryEmoji = {
+    MAP: CATEGORY_EMOJI_MAP,
+    DEFAULT: DEFAULT_EMOJI,
+    getEmoji
+  };
+})();
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { CATEGORY_EMOJI_MAP: window.CategoryEmoji.MAP, DEFAULT_EMOJI: window.CategoryEmoji.DEFAULT, getEmoji: window.CategoryEmoji.getEmoji };
+}

package/public/js/utils/time.js

@@ -0,0 +1,32 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+/**
+ * Timestamp parsing utility for consistent UTC interpretation.
+ *
+ * SQLite's CURRENT_TIMESTAMP produces strings like "2024-01-20 15:30:00"
+ * without a timezone indicator. JavaScript's Date() would interpret these
+ * as local time, but they are actually UTC. This helper ensures correct
+ * UTC parsing across the entire frontend.
+ */
+
+(function () {
+  /**
+   * Parse a timestamp string, ensuring UTC interpretation for SQLite timestamps.
+   * @param {string} timestamp - Timestamp string (ISO 8601 or SQLite format)
+   * @returns {Date} Parsed Date object (Invalid Date when input is falsy)
+   */
+  function parseTimestamp(timestamp) {
+    if (!timestamp) return new Date(NaN);
+
+    // If the timestamp already has timezone info (ends with Z or +/-offset), parse as-is
+    if (/Z$|[+-]\d{2}:\d{2}$/.test(timestamp)) {
+      return new Date(timestamp);
+    }
+
+    // SQLite CURRENT_TIMESTAMP format: "YYYY-MM-DD HH:MM:SS" (no timezone, but is UTC)
+    // Append 'Z' to interpret as UTC
+    return new Date(timestamp + 'Z');
+  }
+
+  // Export to global scope
+  window.parseTimestamp = parseTimestamp;
+})();

package/public/local.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="light">
+<html lang="en" data-theme="light" data-chat="disabled">
 <head>
     <script>
         // Initialize theme immediately to prevent flash
@@ -7,6 +7,16 @@
             const savedTheme = localStorage.getItem('theme') || 'light';
             document.documentElement.setAttribute('data-theme', savedTheme);
         })();
+        // Fetch chat availability early so PanelGroup sees the correct state
+        fetch('/api/config').then(r => r.ok ? r.json() : null).then(config => {
+            if (!config) return;
+            let state = 'disabled';
+            if (config.enable_chat) state = config.pi_available ? 'available' : 'unavailable';
+            document.documentElement.setAttribute('data-chat', state);
+            const shortcutsState = config.chat_enable_shortcuts === false ? 'disabled' : 'enabled';
+            document.documentElement.setAttribute('data-chat-shortcuts', shortcutsState);
+            window.dispatchEvent(new CustomEvent('chat-state-changed', { detail: { state } }));
+        }).catch(() => {});
     </script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -286,7 +296,7 @@
             <!-- File Tree Sidebar (Left) -->
             <aside class="sidebar files-sidebar" id="files-sidebar">
                 <div class="sidebar-header">
-                    <span class="sidebar-title">Changed Files</span>
+                    <span class="sidebar-title">File Navigator</span>
                     <div style="display: flex; align-items: center; gap: 8px;">
                         <span class="sidebar-count" id="sidebar-file-count">0</span>
                         <button class="sidebar-collapse-btn" id="sidebar-collapse-btn" title="Close panel">
@@ -364,10 +374,19 @@
                             </svg>
                             <span class="btn-text">Analyze</span>
                         </button>
-                        <button class="btn btn-sm btn-icon" id="ai-panel-toggle" title="Toggle Review panel">
+                        <button class="btn btn-sm btn-icon" id="chat-toggle-btn" title="Toggle Chat panel">
+                            <svg class="chat-icon" 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>
+                        </button>
+                        <button class="btn btn-sm btn-icon" id="panel-layout-toggle" title="Switch panel layout" style="display: none;">
                             <svg viewBox="0 0 16 16" fill="currentColor" width="14" height="14">
-                                <path d="M6.823 7.823a.25.25 0 0 1 0 .354l-2.396 2.396A.25.25 0 0 1 4 10.396V5.604a.25.25 0 0 1 .427-.177Z"></path>
-                                <path d="M1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0ZM1.5 1.75v12.5c0 .138.112.25.25.25H9.5v-13H1.75a.25.25 0 0 0-.25.25ZM11 14.5h3.25a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H11Z"></path>
+                                <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM1.5 1.75v12.5c0 .138.112.25.25.25H7.5v-13H1.75a.25.25 0 0 0-.25.25ZM8.5 14.5h5.75a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H8.5Z"/>
+                            </svg>
+                        </button>
+                        <button class="btn btn-sm btn-icon" id="ai-panel-toggle" title="Toggle Review panel">
+                            <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+                                <path d="M2 2h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Zm4.655 8.595a.75.75 0 0 1 0 1.06L4.03 14.28a.75.75 0 0 1-1.06 0l-1.5-1.5a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l.97.97 2.095-2.095a.75.75 0 0 1 1.06 0ZM9.75 2.5h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1 0-1.5Zm0 5h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1 0-1.5Zm0 5h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1 0-1.5Zm-7.25-9v3h3v-3Z"/>
                             </svg>
                         </button>
                     </div>
@@ -377,86 +396,90 @@
                 </div>
             </main>
 
-            <!-- AI Analysis Panel (Right) -->
-            <aside class="ai-panel" id="ai-panel">
-                <div class="resize-handle resize-handle-left" data-panel="ai-panel"></div>
-                <div class="ai-panel-header">
-                    <div class="ai-panel-title">
-                        <button class="ai-avatar-small ai-summary-btn" id="ai-summary-btn" aria-label="View AI summary" title="View AI Summary">
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14">
-                                <path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/>
-                                <path d="M18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z"/>
+            <!-- Right Panel Group (AI Panel + Chat) -->
+            <div class="right-panel-group" id="right-panel-group">
+                <!-- AI Analysis Panel (Right) -->
+                <aside class="ai-panel" id="ai-panel">
+                    <div class="resize-handle resize-handle-left" data-panel="ai-panel"></div>
+                    <div class="ai-panel-header">
+                        <div class="ai-panel-title">
+                            <button class="ai-avatar-small ai-summary-btn" id="ai-summary-btn" aria-label="View AI summary" title="View AI Summary">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14">
+                                    <path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/>
+                                    <path d="M18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z"/>
+                                </svg>
+                            </button>
+                            <span>Review</span>
+                        </div>
+                        <button class="ai-panel-close" id="ai-panel-close" title="Close panel">
+                            <svg viewBox="0 0 16 16" fill="currentColor" width="14" height="14">
+                                <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"/>
                             </svg>
                         </button>
-                        <span>Review</span>
                     </div>
-                    <button class="ai-panel-close" id="ai-panel-close" title="Close panel">
-                        <svg viewBox="0 0 16 16" fill="currentColor" width="14" height="14">
-                            <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"/>
-                        </svg>
-                    </button>
-                </div>
 
-                <!-- Analysis Context Section -->
-                <div class="analysis-context" id="analysis-context">
-                    <!-- Empty state -->
-                    <div class="analysis-context-empty" id="analysis-context-empty">
-                        <svg class="analysis-context-empty-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/>
-                        </svg>
-                        <span>No AI analysis yet</span>
-                    </div>
-
-                    <!-- Selector (hidden until analysis exists) -->
-                    <div class="analysis-context-selector" id="analysis-context-selector" style="display: none;">
-                        <button class="analysis-context-btn" id="analysis-context-btn">
-                            <span class="analysis-context-label" id="analysis-context-label">--</span>
-                            <svg class="dropdown-caret" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
-                                <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+                    <!-- Analysis Context Section -->
+                    <div class="analysis-context" id="analysis-context">
+                        <!-- Empty state -->
+                        <div class="analysis-context-empty" id="analysis-context-empty">
+                            <svg class="analysis-context-empty-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/>
                             </svg>
-                        </button>
-                    </div>
+                            <span>No AI analysis yet</span>
+                        </div>
 
-                    <!-- Split-panel dropdown (hidden by default) -->
-                    <div class="analysis-context-dropdown" id="analysis-context-dropdown">
-                        <div class="analysis-run-list" id="analysis-context-list">
-                            <!-- Populated by JavaScript -->
+                        <!-- Selector (hidden until analysis exists) -->
+                        <div class="analysis-context-selector" id="analysis-context-selector" style="display: none;">
+                            <button class="analysis-context-btn" id="analysis-context-btn">
+                                <span class="analysis-context-label" id="analysis-context-label">--</span>
+                                <svg class="dropdown-caret" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+                                    <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+                                </svg>
+                            </button>
                         </div>
-                        <div class="analysis-preview-panel" id="analysis-context-preview">
-                            <!-- Populated by JavaScript on hover -->
+
+                        <!-- Split-panel dropdown (hidden by default) -->
+                        <div class="analysis-context-dropdown" id="analysis-context-dropdown">
+                            <div class="analysis-run-list" id="analysis-context-list">
+                                <!-- Populated by JavaScript -->
+                            </div>
+                            <div class="analysis-preview-panel" id="analysis-context-preview">
+                                <!-- Populated by JavaScript on hover -->
+                            </div>
                         </div>
                     </div>
-                </div>
 
-                <!-- Segment Control -->
-                <div class="segment-control" id="segment-control">
-                    <div class="segment-control-inner">
-                        <button class="segment-btn active" data-segment="ai">AI <span class="segment-count">(0)</span></button>
-                        <button class="segment-btn" data-segment="comments">User <span class="segment-count">(0)</span></button>
-                        <button class="segment-btn" data-segment="all">All <span class="segment-count">(0)</span></button>
+                    <!-- Segment Control -->
+                    <div class="segment-control" id="segment-control">
+                        <div class="segment-control-inner">
+                            <button class="segment-btn active" data-segment="ai">AI <span class="segment-count">(0)</span></button>
+                            <button class="segment-btn" data-segment="comments">User <span class="segment-count">(0)</span></button>
+                            <button class="segment-btn" data-segment="all">All <span class="segment-count">(0)</span></button>
+                        </div>
                     </div>
-                </div>
-
-                <!-- Level Filter -->
-                <div class="level-filter" id="level-filter">
-                    <button class="level-pill active" data-level="final" title="Curated suggestions from all levels">Overall</button>
-                    <button class="level-pill" data-level="1" title="Line-level analysis">Line</button>
-                    <button class="level-pill" data-level="2" title="File-level analysis">File</button>
-                    <button class="level-pill" data-level="3" title="Codebase-level analysis">Codebase</button>
-                </div>
 
-                <!-- Findings Summary -->
-                <div class="findings-summary" id="findings-summary">
-                    <div class="findings-header">
-                        <span class="findings-count" id="findings-count">0 items</span>
+                    <!-- Level Filter -->
+                    <div class="level-filter" id="level-filter">
+                        <button class="level-pill active" data-level="final" title="Curated suggestions from all levels">Overall</button>
+                        <button class="level-pill" data-level="1" title="Line-level analysis">Line</button>
+                        <button class="level-pill" data-level="2" title="File-level analysis">File</button>
+                        <button class="level-pill" data-level="3" title="Codebase-level analysis">Codebase</button>
                     </div>
-                    <div class="findings-list" id="findings-list">
-                        <div class="findings-empty">
-                            <p>No AI analysis yet. Click "Analyze" to get started.</p>
+
+                    <!-- Findings Summary -->
+                    <div class="findings-summary" id="findings-summary">
+                        <div class="findings-header">
+                            <span class="findings-count" id="findings-count">0 items</span>
+                        </div>
+                        <div class="findings-list" id="findings-list">
+                            <div class="findings-empty">
+                                <p>No AI analysis yet. Click "Analyze" to get started.</p>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </aside>
+                </aside>
+                <div id="chat-panel-container"></div>
+            </div>
         </div>
     </div>
 
@@ -476,12 +499,18 @@
     <!-- Tier icons utility -->
     <script src="/js/utils/tier-icons.js"></script>
 
+    <!-- Category emoji mapping -->
+    <script src="/js/utils/category-emoji.js"></script>
+
     <!-- Suggestion UI utility -->
     <script src="/js/utils/suggestion-ui.js"></script>
 
     <!-- File order utility -->
     <script src="/js/utils/file-order.js"></script>
 
+    <!-- Timestamp parsing utility -->
+    <script src="/js/utils/time.js"></script>
+
     <!-- Components -->
     <script src="/js/components/Toast.js"></script>
     <script src="/js/components/ConfirmDialog.js"></script>
@@ -512,6 +541,14 @@
     <script src="/js/modules/file-comment-manager.js"></script>
     <script src="/js/modules/panel-resizer.js"></script>
     <script src="/js/modules/analysis-history.js"></script>
+    <script src="/js/modules/diff-context.js"></script>
+    <script src="/js/modules/file-list-merger.js"></script>
+
+    <!-- Chat Panel Component -->
+    <script src="/js/components/ChatPanel.js"></script>
+
+    <!-- Panel Group Component -->
+    <script src="/js/components/PanelGroup.js"></script>
 
     <!-- Local Mode Configuration -->
     <script>