diff --git a/_data/aesthetihawk_sidebar.yml b/_data/aesthetihawk_sidebar.yml
index 2f4f2cd599..0fa82b0c1a 100644
--- a/_data/aesthetihawk_sidebar.yml
+++ b/_data/aesthetihawk_sidebar.yml
@@ -33,6 +33,14 @@
       icon: |
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
               d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"/>
+    - id: bathroom_pass
+      title: Bathroom Pass
+      url: /student/bathroom_pass
+      icon: |
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
     - id: groups
       title: Groups
       url: /student/groups
diff --git a/_data/toolkit.yml b/_data/toolkit.yml
index fcd14d8495..366bfbb8a3 100644
--- a/_data/toolkit.yml
+++ b/_data/toolkit.yml
@@ -23,6 +23,15 @@ links:
       - View your grades for all assignments
     icon: images/toolkit-nav-buttons/submissions.png
 
+  - id: bathroom_pass
+    href: student/bathroom_pass
+    label: Bathroom Pass
+    description:
+      - Scan your face to enter the bathroom queue
+      - Real-time occupancy tracking and threshold management
+      - Integrated facial recognition for quick access
+    icon: images/toolkit-nav-buttons/bathroom.png
+
   - id: bathroom
     href: student/hallpass
     label: Bathroom System
diff --git a/_includes/bathroom_pass.html b/_includes/bathroom_pass.html
index 5df780f427..8f7294abe9 100644
--- a/_includes/bathroom_pass.html
+++ b/_includes/bathroom_pass.html
@@ -158,9 +158,9 @@ <h2>A101 Pass</h2>
     // we might not have module support directly unless type="module".
     // Alternatively, we can assume pythonURI is available globally if defined elsewhere or hardcode/detect it.
     // For now, let's try to detect it or use a fallback.
-    const pythonURI = location.hostname === "localhost" || location.hostname === "127.0.0.1"
-        ? "http://localhost:8587"
-        : "https://flask.opencodingsociety.com";
+    const javaURI = location.hostname === "localhost" || location.hostname === "127.0.0.1"
+        ? "http://localhost:8585"
+        : "https://spring.opencodingsociety.com";
 
     async function toggleWebcam() {
         if (!webcamContainer.classList.contains('hidden')) {
@@ -215,11 +215,10 @@ <h2>A101 Pass</h2>
         statusDiv.innerText = "Identifying...";
 
         try {
-            const response = await fetch(`${pythonURI}/api/identify`, {
+            const response = await fetch(`${javaURI}/api/person/identify`, {
                 method: 'POST',
                 headers: {
-                    'Content-Type': 'application/json',
-                    // Add credentials if needed
+                    'Content-Type': 'application/json'
                 },
                 body: JSON.stringify({ image: base64Data })
             });
diff --git a/_includes/group_dashboard.html b/_includes/group_dashboard.html
index 7585ab1187..9913eb118e 100644
--- a/_includes/group_dashboard.html
+++ b/_includes/group_dashboard.html
@@ -35,63 +35,6 @@ <h1 id="dashboardGroupName" class="text-2xl font-bold text-white">{{ include.gro
       </div>
     </div>
 
-    <!-- Calendar Section -->
-    <div class="bg-neutral-800 border border-neutral-700 rounded-lg shadow-md p-6 mb-6">
-      <div class="flex items-center justify-between mb-6">
-        <h2 class="text-lg font-semibold text-white flex items-center gap-2">
-          <svg class="w-5 h-5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
-          </svg>
-          Group Calendar
-        </h2>
-        <div class="flex gap-2">
-          <button onclick="previousMonth()" class="p-2 hover:bg-neutral-700 rounded-lg transition-colors" title="Previous month">
-            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
-            </svg>
-          </button>
-          <span id="currentMonth" class="px-4 py-2 text-white font-medium min-w-fit">January 2026</span>
-          <button onclick="nextMonth()" class="p-2 hover:bg-neutral-700 rounded-lg transition-colors" title="Next month">
-            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
-            </svg>
-          </button>
-        </div>
-      </div>
-
-      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <!-- Calendar Grid -->
-        <div class="lg:col-span-2">
-          <!-- Day headers -->
-          <div class="grid grid-cols-7 gap-2 mb-2">
-            <div class="text-center text-gray-500 text-sm font-medium py-2">Sun</div>
-            <div class="text-center text-gray-500 text-sm font-medium py-2">Mon</div>
-            <div class="text-center text-gray-500 text-sm font-medium py-2">Tue</div>
-            <div class="text-center text-gray-500 text-sm font-medium py-2">Wed</div>
-            <div class="text-center text-gray-500 text-sm font-medium py-2">Thu</div>
-            <div class="text-center text-gray-500 text-sm font-medium py-2">Fri</div>
-            <div class="text-center text-gray-500 text-sm font-medium py-2">Sat</div>
-          </div>
-          
-          <!-- Calendar days -->
-          <div id="calendarGrid" class="grid grid-cols-7 gap-2">
-            <!-- Populated by JavaScript -->
-          </div>
-        </div>
-
-        <!-- Today's Events Sidebar -->
-        <div class="bg-neutral-700/50 border border-neutral-600 rounded-lg p-4">
-          <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wide mb-4">Today's Items</h3>
-          <div id="todayEvents" class="space-y-3">
-            <p class="text-gray-500 text-sm">No events scheduled for today</p>
-          </div>
-          <button onclick="openAddEventModal()" class="mt-4 w-full px-3 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm rounded-lg transition-colors">
-            + Add Item
-          </button>
-        </div>
-      </div>
-    </div>
-
     <!-- Dashboard Summary Row -->
     <div class="grid grid-cols-1 gap-6">
       <!-- Quick Stats Sidebar -->
@@ -196,47 +139,50 @@ <h2 class="text-lg font-semibold text-white flex items-center gap-2">
         </div>
       </div>
     </div>
-
-  </div>
-</div>
-
-<!-- Event Modal -->
-<div id="eventModal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-  <div class="bg-neutral-800 border border-neutral-700 rounded-lg shadow-lg p-6 w-full max-w-md">
-    <div class="flex items-center justify-between mb-4">
-      <h3 class="text-lg font-semibold text-white">Add/Edit Event</h3>
-      <button onclick="closeEventModal()" class="text-gray-400 hover:text-white">
-        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-        </svg>
-      </button>
-    </div>
     
-    <div class="space-y-4">
-      <div>
-        <label class="block text-sm font-medium text-gray-400 mb-2">Event Title</label>
-        <input id="eventTitle" type="text" placeholder="Enter event title" class="w-full px-3 py-2 bg-neutral-700 border border-neutral-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500">
-      </div>
-      
-      <div>
-        <label class="block text-sm font-medium text-gray-400 mb-2">Date</label>
-        <input id="eventDate" type="date" class="w-full px-3 py-2 bg-neutral-700 border border-neutral-600 rounded-lg text-white focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500">
-      </div>
-      
-      <div>
-        <label class="block text-sm font-medium text-gray-400 mb-2">Description</label>
-        <textarea id="eventDescription" placeholder="Add event details..." class="w-full px-3 py-2 bg-neutral-700 border border-neutral-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 resize-none" rows="3"></textarea>
+    <!-- Relationship Graph Section -->
+    <div class="mt-6 bg-neutral-800 border border-neutral-700 rounded-lg shadow-md">
+      <div class="p-4 border-b border-neutral-700">
+        <h2 class="text-lg font-semibold text-white flex items-center gap-2">
+          <svg class="w-5 h-5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
+          </svg>
+          Relationship Graph & Recommended Friends
+        </h2>
       </div>
       
-      <div class="flex gap-2 pt-2">
-        <button onclick="saveEvent()" class="flex-1 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors font-medium">
-          Save Event
-        </button>
-        <button onclick="closeEventModal()" class="flex-1 px-4 py-2 bg-neutral-700 hover:bg-neutral-600 text-white rounded-lg transition-colors">
-          Cancel
-        </button>
+      <div class="p-4 grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <!-- Force Directed Graph Container -->
+        <div class="lg:col-span-2 relative bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden" style="min-height: 400px;" id="relationshipGraphContainer">
+          <!-- Graph populated by D3.js -->
+          <div id="relationshipGraphEmptyState" class="absolute inset-0 flex items-center justify-center text-gray-400">
+            Mapping user connections...
+          </div>
+          <!-- Zoom Controls -->
+          <div class="absolute bottom-4 right-4 flex flex-col gap-2">
+            <button id="graphZoomInButton" class="p-2 bg-neutral-700 hover:bg-neutral-600 text-white rounded shadow transition-colors" title="Zoom in">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16M4 12h16"/></svg>
+            </button>
+            <button id="graphZoomOutButton" class="p-2 bg-neutral-700 hover:bg-neutral-600 text-white rounded shadow transition-colors" title="Zoom out">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg>
+            </button>
+            <button id="graphResetButton" class="p-2 bg-neutral-700 hover:bg-neutral-600 text-white rounded shadow transition-colors" title="Reset view">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+            </button>
+          </div>
+        </div>
+
+        <!-- Friend Recommendations List -->
+        <div class="bg-neutral-700/50 border border-neutral-600 rounded-lg p-4 flex flex-col h-full max-h-[400px]">
+          <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wide mb-3">Recommended Friends</h3>
+          <p class="text-xs text-gray-500 mb-4">Users you share multiple groups with but haven't actively messaged recently.</p>
+          <div id="recommendedFriendsList" class="flex-1 overflow-y-auto space-y-3 pr-2">
+            <div class="text-center text-gray-500 text-sm py-8">Analyzing connections...</div>
+          </div>
+        </div>
       </div>
     </div>
+
   </div>
 </div>
 
@@ -253,11 +199,14 @@ <h3 class="text-lg font-semibold text-white">Add/Edit Event</h3>
         <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
         <p id="chatModalSubtitle" class="text-sm text-gray-400">Period · Class · Members</p>
       </div>
-      <button onclick="closeGroupChat()" class="text-gray-400 hover:text-white transition-colors">
-        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-        </svg>
-      </button>
+      <div class="flex items-center gap-3">
+        <span id="chatConnectionStatus" class="text-xs px-2 py-1 rounded bg-neutral-700 text-gray-300">Disconnected</span>
+        <button onclick="closeGroupChat()" class="text-gray-400 hover:text-white transition-colors">
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+          </svg>
+        </button>
+      </div>
     </div>
 
     <!-- Tabs -->
@@ -273,6 +222,10 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
     <div class="flex-1 flex flex-col min-h-0">
       <!-- Chat Panel -->
       <div id="chatPanel" class="flex-1 flex flex-col min-h-0">
+        <div class="px-4 pt-3">
+          <div id="chatParticipants" class="text-xs text-gray-400">Participants: none</div>
+          <div id="chatTypingIndicator" class="text-xs text-indigo-300 min-h-[1.25rem]"></div>
+        </div>
         <!-- Chat Messages Area -->
         <div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-4">
           <div id="chatEmptyState" class="text-center text-gray-500 text-sm py-6">No messages yet.</div>
@@ -284,11 +237,12 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
           <div id="slashCommandPopup" class="hidden absolute bottom-full left-4 right-4 mb-2 bg-neutral-700 border border-neutral-600 rounded-lg shadow-lg overflow-hidden">
             <div class="p-2 text-xs text-gray-400 border-b border-neutral-600">Commands</div>
             <div id="slashCommandList">
-              <div class="slash-command-item px-3 py-2 hover:bg-neutral-600 cursor-pointer flex items-center gap-3" onclick="selectSlashCommand('/calendar')">
+              <div class="slash-command-item px-3 py-2 hover:bg-neutral-600 cursor-pointer flex items-center gap-3"
+                onclick="selectSlashCommand('/calendar')">
                 <span class="text-lg">📅</span>
                 <div>
                   <div class="text-white text-sm font-medium">/calendar</div>
-                  <div class="text-gray-400 text-xs">Add a calendar event or reminder</div>
+                  <div class="text-gray-400 text-xs">Add event: create a task in the calendar</div>
                 </div>
               </div>
               <div class="slash-command-item px-3 py-2 hover:bg-neutral-600 cursor-pointer flex items-center gap-3" onclick="selectSlashCommand('/adduser')">
@@ -352,35 +306,92 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
   </div>
 </div>
 
+<!-- Calendar Event Modal -->
+<div id="calendarEventModal" class="hidden fixed inset-0 flex items-center justify-center" style="z-index: 60;">
+  <!-- Backdrop -->
+  <div class="absolute inset-0 bg-black bg-opacity-75" onclick="calendarModalController.close()"></div>
+
+  <!-- Modal Content -->
+  <div class="relative bg-neutral-800 rounded-lg shadow-2xl w-full max-w-md mx-4 flex flex-col">
+    <!-- Header -->
+    <div class="flex items-center justify-between p-4 border-b border-neutral-700">
+      <h3 class="text-xl font-semibold text-white">Add Calendar Event</h3>
+      <button onclick="calendarModalController.close()" class="text-gray-400 hover:text-white transition-colors">
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="p-4 space-y-4">
+      <!-- Linked Group Indicator -->
+      <div id="calEventGroupContainer" class="hidden mb-4 p-3 bg-indigo-900/30 border border-indigo-500/30 rounded-lg flex items-center gap-2">
+        <svg class="w-5 h-5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0z"/>
+        </svg>
+        <span class="text-sm text-indigo-200">Linking to group: <strong id="calEventGroupName" class="text-white"></strong></span>
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium text-gray-200 mb-2">Title</label>
+        <input id="calEventTitle" type="text" placeholder="Event Title"
+          class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label class="block text-sm font-medium text-gray-200 mb-2">Date</label>
+          <input id="calEventDate" type="date"
+            class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+        </div>
+        <div>
+          <label class="block text-sm font-medium text-gray-200 mb-2">Period</label>
+          <input id="calEventPeriod" type="text" placeholder="e.g. CSA"
+            class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+        </div>
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium text-gray-200 mb-2">Description</label>
+        <textarea id="calEventDesc" rows="3" placeholder="Optional description..."
+          class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
+      </div>
+
+      <!-- Priority -->
+      <div>
+        <label class="block text-sm font-medium text-gray-200 mb-2">Priority</label>
+        <select id="calEventPriority"
+          class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
+          <option value="P2" selected>P2 (Normal)</option>
+          <option value="P0">P0 (Highest)</option>
+          <option value="P1">P1 (High)</option>
+          <option value="P3">P3 (Low)</option>
+        </select>
+      </div>
+
+      <div id="calEventStatus" class="text-sm mt-2"></div>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-2 p-4 border-t border-neutral-700">
+      <button onclick="calendarModalController.close()"
+        class="px-4 py-2 bg-neutral-700 hover:bg-neutral-600 text-white rounded-lg transition-colors">
+        Cancel
+      </button>
+      <button id="calEventSubmitBtn" onclick="calendarModalController.submit()"
+        class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors font-semibold flex items-center">
+        Create Event
+      </button>
+    </div>
+  </div>
+</div>
+
 <style>
   /* Dashboard-specific styles */
   .dashboard-card {
     @apply bg-neutral-800 border border-neutral-700 rounded-lg shadow-md;
   }
-  
-  .calendar-day {
-    @apply min-h-24 p-2 rounded-lg border transition-colors cursor-pointer;
-  }
-  
-  .calendar-day.other-month {
-    @apply bg-neutral-700/30 border-neutral-700 text-gray-500;
-  }
-  
-  .calendar-day.current-month {
-    @apply bg-neutral-700/50 border-neutral-600 text-gray-300 hover:bg-neutral-700;
-  }
-  
-  .calendar-day.today {
-    @apply border-indigo-500 bg-indigo-500/10;
-  }
-  
-  .calendar-day.has-events {
-    @apply border-indigo-400;
-  }
-  
-  .event-badge {
-    @apply inline-block px-2 py-1 text-xs rounded bg-indigo-600 text-white truncate mb-1;
-  }
 
   /* Chat Modal Scrollbar Styling */
   #chatMessages::-webkit-scrollbar {
@@ -431,29 +442,49 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.1/sockjs.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
+<script src="https://d3js.org/d3.v7.min.js"></script>
 
 <script type="module">
   import { javaURI, pythonURI, fetchOptions } from '{{site.baseurl}}/assets/js/api/config.js';
-  // Calendar state
-  let currentDate = new Date(2026, 0, 5); // February 5, 2026
-  let calendarEvents = JSON.parse(localStorage.getItem('calendarEvents') || '{}');
-  let selectedEventDate = null;
+  const chatSocketPort = 8589;
+
+  function buildChatSocketEndpoint() {
+    // JUST FOR TESTING, needs to be replaced in config.js for a more permanent implementation
+    const uri = new URL(javaURI);
+    if (uri.hostname === 'localhost' || uri.hostname === '127.0.0.1') {
+        return `${uri.protocol}//${uri.hostname}:${chatSocketPort}/ws-chat`;
+    }
+    return javaURI + '/ws-chat';
+  }
 
   // Chat state
   const dashboardGroupId = "{{ include.groupId | default: '' }}";
   let activeChatGroupId = dashboardGroupId ? Number(dashboardGroupId) : null;
   let activeChatGroupName = '';
-  let stompClient = null;
+  const groupChatState = {
+    stompClient: null,
+    subscription: null,
+    socket: null,
+    connected: false,
+    connecting: false,
+    reconnectTimer: null,
+    reconnectDelayMs: 3000,
+    heartbeatTimer: null,
+    selfTyping: false,
+    typingStopTimer: null,
+    typingUsers: new Set(),
+    participants: [],
+    seenEventKeys: new Set(),
+    connectPromise: null,
+    allowReconnect: false
+  };
   let currentUser = null;
   let currentUserDisplayName = 'You';
   let pendingChatImageBase64 = null;
   let pendingChatImageMime = 'image/png';
   let renderedChatMessageKeys = new Set();
   
-  // Initialize calendar
   document.addEventListener('DOMContentLoaded', () => {
-    renderCalendar();
-    updateTodayEvents();
     initializeChatUser();
   });
 
@@ -469,214 +500,117 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
     }
   }
 
-  function renderCalendar() {
-    const year = currentDate.getFullYear();
-    const month = currentDate.getMonth();
-    
-    // Update month display
-    const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
-                       'July', 'August', 'September', 'October', 'November', 'December'];
-    document.getElementById('currentMonth').textContent = `${monthNames[month]} ${year}`;
-    
-    // Get first day of month and number of days
-    const firstDay = new Date(year, month, 1).getDay();
-    const daysInMonth = new Date(year, month + 1, 0).getDate();
-    const daysInPrevMonth = new Date(year, month, 0).getDate();
-    
-    const calendarGrid = document.getElementById('calendarGrid');
-    calendarGrid.innerHTML = '';
-    
-    // Previous month's days
-    for (let i = firstDay - 1; i >= 0; i--) {
-      const day = daysInPrevMonth - i;
-      const dayElement = createDayElement(day, false, new Date(year, month - 1, day));
-      dayElement.classList.add('other-month');
-      calendarGrid.appendChild(dayElement);
-    }
-    
-    // Current month's days
-    const today = new Date();
-    for (let day = 1; day <= daysInMonth; day++) {
-      const date = new Date(year, month, day);
-      const dayElement = createDayElement(day, true, date);
-      dayElement.classList.add('current-month');
-      
-      // Highlight today
-      if (date.toDateString() === today.toDateString()) {
-        dayElement.classList.add('today');
-      }
-      
-      calendarGrid.appendChild(dayElement);
-    }
-    
-    // Next month's days
-    const totalCells = calendarGrid.children.length;
-    const remainingCells = 42 - totalCells;
-    for (let day = 1; day <= remainingCells; day++) {
-      const dayElement = createDayElement(day, false, new Date(year, month + 1, day));
-      dayElement.classList.add('other-month');
-      calendarGrid.appendChild(dayElement);
-    }
-  }
+  // ================================
+  // CHAT FUNCTIONALITY
+  // ================================
+  const slashCommands = ['/adduser'];
+  let selectedCommandIndex = 0;
 
-  function createDayElement(day, isCurrentMonth, date) {
-    const dayElement = document.createElement('div');
-    dayElement.className = 'calendar-day';
-    
-    const dateStr = formatDate(date);
-    const dayEvents = calendarEvents[dateStr] || [];
-    
-    if (dayEvents.length > 0) {
-      dayElement.classList.add('has-events');
-    }
-    
-    let html = `<div class="font-semibold text-sm mb-1">${day}</div>`;
-    
-    // Show first 2 events
-    dayEvents.slice(0, 2).forEach(event => {
-      html += `<div class="event-badge">${event.title}</div>`;
+  function formatTimestamp(isoString) {
+    if (!isoString) return '';
+    const date = new Date(isoString);
+    if (Number.isNaN(date.getTime())) return '';
+    return date.toLocaleString(undefined, {
+      month: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit'
     });
-    
-    if (dayEvents.length > 2) {
-      html += `<div class="text-xs text-indigo-400">+${dayEvents.length - 2} more</div>`;
-    }
-    
-    dayElement.innerHTML = html;
-    dayElement.onclick = () => selectDate(date);
-    
-    return dayElement;
   }
 
-  function selectDate(date) {
-    selectedEventDate = date;
-    const dateStr = formatDate(date);
-    const events = calendarEvents[dateStr] || [];
-    
-    // Update today's events display
-    const todayEventsDiv = document.getElementById('todayEvents');
-    if (events.length === 0) {
-      todayEventsDiv.innerHTML = `<p class="text-gray-500 text-sm">No events on ${date.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' })}</p>`;
-    } else {
-      todayEventsDiv.innerHTML = events.map((event, index) => `
-        <div class="bg-neutral-600/50 border border-neutral-500 rounded p-3 group hover:bg-neutral-600">
-          <div class="flex items-start justify-between gap-2">
-            <div class="flex-1 min-w-0">
-              <p class="text-white text-sm font-medium">${event.title}</p>
-              <p class="text-gray-400 text-xs mt-1">${event.description || 'No description'}</p>
-            </div>
-            <button onclick="deleteEvent('${dateStr}', ${index})" class="text-gray-400 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity">
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
-              </svg>
-            </button>
-          </div>
-        </div>
-      `).join('');
-    }
-  }
-
-  function previousMonth() {
-    currentDate.setMonth(currentDate.getMonth() - 1);
-    renderCalendar();
-  }
-
-  function nextMonth() {
-    currentDate.setMonth(currentDate.getMonth() + 1);
-    renderCalendar();
+  function setConnectionStatus(text, type = 'idle') {
+    const el = document.getElementById('chatConnectionStatus');
+    if (!el) return;
+    const classMap = {
+      idle: 'bg-neutral-700 text-gray-300',
+      connecting: 'bg-amber-600/20 text-amber-300',
+      connected: 'bg-emerald-600/20 text-emerald-300',
+      disconnected: 'bg-neutral-700 text-gray-300'
+    };
+    el.className = `text-xs px-2 py-1 rounded ${classMap[type] || classMap.idle}`;
+    el.textContent = text;
   }
 
-  function openAddEventModal() {
-    if (!selectedEventDate) {
-      alert('Please select a date first');
+  function refreshParticipants() {
+    const el = document.getElementById('chatParticipants');
+    if (!el) return;
+    if (!groupChatState.participants.length) {
+      el.textContent = 'Participants: none';
       return;
     }
-    document.getElementById('eventDate').value = formatDate(selectedEventDate);
-    document.getElementById('eventTitle').value = '';
-    document.getElementById('eventDescription').value = '';
-    document.getElementById('eventModal').classList.remove('hidden');
-    document.getElementById('eventTitle').focus();
+    el.textContent = `Participants: ${groupChatState.participants.join(', ')}`;
   }
 
-  function closeEventModal() {
-    document.getElementById('eventModal').classList.add('hidden');
+  function refreshTypingIndicator() {
+    const el = document.getElementById('chatTypingIndicator');
+    if (!el) return;
+    const names = Array.from(groupChatState.typingUsers);
+    if (names.length === 0) {
+      el.textContent = '';
+    } else if (names.length === 1) {
+      el.textContent = `${names[0]} is typing...`;
+    } else {
+      el.textContent = `${names.join(', ')} are typing...`;
+    }
   }
 
-  function saveEvent() {
-    const title = document.getElementById('eventTitle').value.trim();
-    const dateStr = document.getElementById('eventDate').value;
-    const description = document.getElementById('eventDescription').value.trim();
-    
-    if (!title) {
-      alert('Please enter an event title');
-      return;
-    }
-    
-    if (!dateStr) {
-      alert('Please select a date');
-      return;
-    }
-    
-    if (!calendarEvents[dateStr]) {
-      calendarEvents[dateStr] = [];
-    }
-    
-    calendarEvents[dateStr].push({
-      title: title,
-      description: description,
-      timestamp: new Date().toISOString()
-    });
-    
-    localStorage.setItem('calendarEvents', JSON.stringify(calendarEvents));
-    closeEventModal();
-    renderCalendar();
-    
-    // Update selected date view if it matches
-    const selectedDateStr = selectedEventDate ? formatDate(selectedEventDate) : null;
-    if (selectedDateStr === dateStr) {
-      selectDate(new Date(dateStr));
-    }
+  function addTypingUser(name) {
+    if (!name) return;
+    groupChatState.typingUsers.add(String(name));
+    refreshTypingIndicator();
   }
 
-  function deleteEvent(dateStr, index) {
-    if (confirm('Delete this event?')) {
-      calendarEvents[dateStr].splice(index, 1);
-      if (calendarEvents[dateStr].length === 0) {
-        delete calendarEvents[dateStr];
-      }
-      localStorage.setItem('calendarEvents', JSON.stringify(calendarEvents));
-      renderCalendar();
-      selectDate(new Date(dateStr));
+  function removeTypingUser(name) {
+    if (!name) {
+      groupChatState.typingUsers.clear();
+    } else {
+      groupChatState.typingUsers.delete(String(name));
     }
+    refreshTypingIndicator();
   }
 
-  function updateTodayEvents() {
-    const today = new Date(2026, 0, 5); // February 5, 2026
-    selectDate(today);
+  function clearChatStateForGroupSwitch() {
+    groupChatState.participants = [];
+    groupChatState.typingUsers.clear();
+    groupChatState.seenEventKeys.clear();
+    refreshParticipants();
+    refreshTypingIndicator();
   }
 
-  function formatDate(date) {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
+  function getEventKey(event) {
+    return JSON.stringify([
+      event?.context || '',
+      event?.sender || event?.name || '',
+      event?.date || '',
+      event?.message || '',
+      event?.image || '',
+      event?.filename || '',
+      event?.base64Data ? String(event.base64Data).slice(0, 32) : ''
+    ]);
   }
 
-  // ================================
-  // CHAT FUNCTIONALITY
-  // ================================
-  const slashCommands = ['/calendar', '/adduser'];
-  let selectedCommandIndex = 0;
+  function markSeenEvent(event) {
+    const key = getEventKey(event);
+    if (!key) return false;
+    if (groupChatState.seenEventKeys.has(key)) return true;
+    groupChatState.seenEventKeys.add(key);
+    if (groupChatState.seenEventKeys.size > 1500) {
+      const first = groupChatState.seenEventKeys.values().next().value;
+      if (first) groupChatState.seenEventKeys.delete(first);
+    }
+    return false;
+  }
 
-  function formatTimestamp(isoString) {
-    if (!isoString) return '';
-    const date = new Date(isoString);
-    if (Number.isNaN(date.getTime())) return '';
-    return date.toLocaleString(undefined, {
-      month: 'short',
-      day: 'numeric',
-      hour: 'numeric',
-      minute: '2-digit'
-    });
+  function appendSystemMessage(text) {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) return;
+    const emptyState = document.getElementById('chatEmptyState');
+    if (emptyState) emptyState.classList.add('hidden');
+    const line = document.createElement('div');
+    line.className = 'text-xs text-gray-400 italic';
+    line.textContent = text;
+    chatMessages.appendChild(line);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
   }
 
   function fileToBase64(file) {
@@ -742,10 +676,13 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
 
   function getChatMessageKey(msg) {
     return JSON.stringify([
+      msg?.context || '',
+      msg?.sender || msg?.name || '',
       msg?.name || '',
       msg?.date || '',
       msg?.message || '',
-      msg?.image || ''
+      msg?.image || '',
+      msg?.filename || ''
     ]);
   }
 
@@ -778,9 +715,11 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
     const header = document.createElement('div');
     header.className = 'flex items-baseline gap-2 mb-1';
 
+    const senderName = msg.sender || msg.name || 'Unknown';
+
     const nameEl = document.createElement('span');
     nameEl.className = 'text-white font-semibold text-sm';
-    nameEl.textContent = msg.name === currentUserDisplayName ? 'You' : (msg.name || 'Unknown');
+    nameEl.textContent = senderName === currentUserDisplayName ? 'You' : senderName;
 
     const timeEl = document.createElement('span');
     timeEl.className = 'text-gray-500 text-xs';
@@ -839,88 +778,298 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
       if (!res.ok) throw new Error('Failed to load chat messages');
       const messages = await res.json();
       renderChatMessages(messages);
+      (messages || []).forEach((message) => {
+        markSeenEvent({
+          context: 'sendMessageServer',
+          sender: message.name || 'Unknown',
+          message: message.message || '',
+          image: message.image || null,
+          date: message.date
+        });
+      });
     } catch (err) {
       console.error('Chat fetch failed', err);
     }
   }
 
-  window.sendChatMessage = async function () {
-    if (!activeChatGroupId) {
-      console.warn('Chat group not resolved yet');
-      return;
+  function ensureConnected() {
+    if (groupChatState.connected) {
+      return Promise.resolve(true);
+    }
+    if (groupChatState.connecting && groupChatState.connectPromise) {
+      return groupChatState.connectPromise;
+    }
+    if (typeof SockJS === 'undefined' || typeof Stomp === 'undefined') {
+      console.error('SockJS/STOMP dependencies are not available');
+      setConnectionStatus('Unavailable', 'disconnected');
+      return Promise.resolve(false);
     }
-    const chatInput = document.getElementById('chatInput');
-    const text = chatInput.value.trim();
-    const image = pendingChatImageBase64 || null;
 
-    if (!text && !image) return;
+    groupChatState.connecting = true;
+    setConnectionStatus('Connecting', 'connecting');
+
+    const socket = new SockJS(buildChatSocketEndpoint());
+    const client = Stomp.over(socket);
+    client.debug = null;
+
+    groupChatState.socket = socket;
+    groupChatState.stompClient = client;
+
+    groupChatState.connectPromise = new Promise((resolve) => {
+      let settled = false;
+      const finish = (ok) => {
+        if (settled) return;
+        settled = true;
+        groupChatState.connectPromise = null;
+        resolve(ok);
+      };
+
+      socket.onclose = () => {
+        if (groupChatState.connected || groupChatState.connecting) {
+          handleDisconnect();
+        }
+        finish(false);
+      };
+
+      client.connect({}, () => {
+        groupChatState.connected = true;
+        groupChatState.connecting = false;
+        setConnectionStatus('Connected', 'connected');
+        startHeartbeat();
+        subscribeToActiveGroup();
+        finish(true);
+      }, (err) => {
+        console.error('WebSocket connection failed', err);
+        handleDisconnect();
+        finish(false);
+      });
+    });
+
+    return groupChatState.connectPromise;
+  }
+
+  function handleDisconnect() {
+    stopHeartbeat();
+    groupChatState.connected = false;
+    groupChatState.connecting = false;
+    if (groupChatState.subscription) {
+      try {
+        groupChatState.subscription.unsubscribe();
+      } catch (err) {
+        console.warn('Subscription cleanup failed', err);
+      }
+      groupChatState.subscription = null;
+    }
+    groupChatState.stompClient = null;
+    groupChatState.socket = null;
+    setConnectionStatus('Disconnected', 'disconnected');
+    if (groupChatState.allowReconnect) {
+      scheduleReconnect();
+    }
+  }
+
+  function scheduleReconnect() {
+    if (groupChatState.reconnectTimer) return;
+    groupChatState.reconnectTimer = window.setTimeout(() => {
+      groupChatState.reconnectTimer = null;
+      if (!groupChatState.allowReconnect) return;
+      ensureConnected();
+    }, groupChatState.reconnectDelayMs);
+  }
+
+  function startHeartbeat() {
+    stopHeartbeat();
+    groupChatState.heartbeatTimer = window.setInterval(() => {
+      if (activeChatGroupId) {
+        sendGroupEvent('heartbeat', {}, true);
+      }
+    }, 25000);
+  }
+
+  function stopHeartbeat() {
+    if (groupChatState.heartbeatTimer) {
+      window.clearInterval(groupChatState.heartbeatTimer);
+      groupChatState.heartbeatTimer = null;
+    }
+  }
+
+  function sendGroupEvent(context, extraPayload = {}, silent = false) {
+    if (!groupChatState.connected || !groupChatState.stompClient) {
+      if (!silent) {
+        alert('Chat socket is not connected yet. Try again in a moment.');
+      }
+      return false;
+    }
+    if (!activeChatGroupId) {
+      if (!silent) {
+        alert('Please open a group chat first.');
+      }
+      return false;
+    }
 
     const payload = {
-      name: currentUserDisplayName,
-      message: text,
-      date: new Date().toISOString(),
-      image: image
+      context,
+      groupId: activeChatGroupId,
+      sender: currentUserDisplayName || 'anonymous',
+      ...extraPayload
     };
 
     try {
-      const res = await fetch(`${javaURI}/api/groups/chat/${activeChatGroupId}/messages`, {
-        ...fetchOptions,
-        method: 'POST',
-        headers: {
-          ...(fetchOptions.headers || {}),
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(payload)
-      });
-
-      if (!res.ok) throw new Error('Failed to send message');
-      const messages = await res.json();
-      renderChatMessages(messages);
-      chatInput.value = '';
-      clearChatImagePreview();
+      groupChatState.stompClient.send('/app/groups.chat', {}, JSON.stringify(payload));
+      return true;
     } catch (err) {
-      console.error('Send message failed', err);
+      console.error('Failed to send websocket event', err);
+      if (!silent) {
+        alert('Failed to send chat event. Please retry.');
+      }
+      return false;
     }
-  };
+  }
 
-  function startChatPolling() {
-    if (!activeChatGroupId) return;
+  function subscribeToActiveGroup() {
+    if (!groupChatState.connected || !groupChatState.stompClient || !activeChatGroupId) return;
 
-    if (stompClient) {
-      stopChatPolling();
+    if (groupChatState.subscription) {
+      try {
+        groupChatState.subscription.unsubscribe();
+      } catch (err) {
+        console.warn('Unsubscribe failed', err);
+      }
+      groupChatState.subscription = null;
     }
 
-    if (typeof SockJS === 'undefined' || typeof Stomp === 'undefined') {
-      console.error('SockJS/STOMP dependencies are not available');
-      return;
+    groupChatState.subscription = groupChatState.stompClient.subscribe(`/topic/group/${activeChatGroupId}`, (frame) => {
+      try {
+        const event = JSON.parse(frame.body);
+        handleIncomingEvent(event);
+      } catch (err) {
+        console.error('Failed to parse incoming chat event', err);
+      }
+    });
+
+    sendGroupEvent('joinGroup', {}, true);
+  }
+
+  function handleIncomingEvent(event) {
+    if (!event || !event.context) return;
+
+    switch (event.context) {
+      case 'sendMessageServer': {
+        if (markSeenEvent(event)) return;
+        appendSingleMessage({
+          sender: event.sender || 'Unknown',
+          message: event.message || '',
+          date: event.date,
+          image: event.image || null,
+          context: event.context
+        });
+        removeTypingUser(event.sender || '');
+        break;
+      }
+      case 'sendFileServer': {
+        if (markSeenEvent(event)) return;
+        appendSystemMessage(`${event.sender || 'Someone'} shared file: ${event.filename || 'file'}`);
+        removeTypingUser(event.sender || '');
+        fetchSharedFiles();
+        fetchDashboardSharedFiles();
+        break;
+      }
+      case 'joinGroupServer':
+      case 'leaveGroupServer': {
+        if (!markSeenEvent(event)) {
+          const verb = event.context === 'joinGroupServer' ? 'joined' : 'left';
+          appendSystemMessage(`${event.sender || 'Someone'} ${verb} the chat`);
+        }
+        groupChatState.participants = Array.isArray(event.participants) ? event.participants : [];
+        refreshParticipants();
+        if (event.context === 'leaveGroupServer') {
+          removeTypingUser(event.sender || '');
+        }
+        break;
+      }
+      case 'heartbeatServer': {
+        groupChatState.participants = Array.isArray(event.participants) ? event.participants : [];
+        refreshParticipants();
+        break;
+      }
+      case 'typingStartServer': {
+        if ((event.sender || '') !== currentUserDisplayName) {
+          addTypingUser(event.sender || 'Someone');
+        }
+        break;
+      }
+      case 'typingStopServer': {
+        if ((event.sender || '') !== currentUserDisplayName) {
+          removeTypingUser(event.sender || '');
+        }
+        break;
+      }
+      case 'errorServer': {
+        appendSystemMessage(`Error: ${event.error || 'Unknown websocket error'}`);
+        break;
+      }
+      default:
+        break;
     }
+  }
 
-    const socket = new SockJS(`${javaURI}/ws-chat`);
-    stompClient = Stomp.over(socket);
-    stompClient.debug = null;
+  window.sendChatMessage = async function () {
+    if (!activeChatGroupId) {
+      console.warn('Chat group not resolved yet');
+      return;
+    }
+    const chatInput = document.getElementById('chatInput');
+    const text = chatInput.value.trim();
+    const image = pendingChatImageBase64 || null;
 
-    stompClient.connect({}, () => {
-      if (!stompClient || !activeChatGroupId) return;
+    if (!text && !image) return;
 
-      stompClient.subscribe(`/topic/group/${activeChatGroupId}`, (message) => {
-        try {
-          const payload = JSON.parse(message.body);
-          appendSingleMessage(payload);
-        } catch (err) {
-          console.error('Failed to parse incoming chat message', err);
-        }
-      });
-    }, (err) => {
-      console.error('WebSocket connection failed', err);
+    const sent = sendGroupEvent('sendMessage', {
+      message: text,
+      image: image,
+      date: new Date().toISOString()
     });
+
+    if (!sent) return;
+    chatInput.value = '';
+    clearChatImagePreview();
+    groupChatState.selfTyping = false;
+    sendGroupEvent('typingStop', {}, true);
+  };
+
+  async function startChatPolling() {
+    groupChatState.allowReconnect = true;
+    if (groupChatState.connected) {
+      subscribeToActiveGroup();
+      return;
+    }
+    await ensureConnected();
   }
 
   function stopChatPolling() {
-    if (stompClient) {
-      const clientToDisconnect = stompClient;
-      stompClient = null;
+    groupChatState.allowReconnect = false;
+    stopHeartbeat();
+    if (groupChatState.subscription) {
+      try {
+        groupChatState.subscription.unsubscribe();
+      } catch (err) {
+        console.warn('Subscription cleanup failed', err);
+      }
+      groupChatState.subscription = null;
+    }
+    if (groupChatState.stompClient) {
+      const clientToDisconnect = groupChatState.stompClient;
+      groupChatState.stompClient = null;
+      groupChatState.connected = false;
+      groupChatState.connecting = false;
       clientToDisconnect.disconnect(() => {});
     }
+    if (groupChatState.reconnectTimer) {
+      window.clearTimeout(groupChatState.reconnectTimer);
+      groupChatState.reconnectTimer = null;
+    }
+    groupChatState.socket = null;
+    setConnectionStatus('Disconnected', 'disconnected');
   }
 
   function downloadBase64File(filename, base64Data) {
@@ -1024,21 +1173,16 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
 
     try {
       const base64Data = await fileToBase64(file);
-      const payload = { filename: file.name, base64Data };
-
-      const res = await fetch(`${javaURI}/api/groups/chat/${activeChatGroupId}/files`, {
-        ...fetchOptions,
-        method: 'POST',
-        headers: {
-          ...(fetchOptions.headers || {}),
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(payload)
+      const sent = sendGroupEvent('sendFile', {
+        filename: file.name,
+        base64Data,
+        date: new Date().toISOString()
       });
 
-      if (!res.ok) throw new Error('Failed to upload file');
+      if (!sent) throw new Error('Failed to upload file');
       input.value = '';
       await fetchSharedFiles();
+      await fetchDashboardSharedFiles();
     } catch (err) {
       console.error('Upload failed', err);
     }
@@ -1080,8 +1224,8 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
   }
 
   window.openGroupChatFromDashboard = async function () {
-    const groupName = document.getElementById('dashboardGroupName').textContent || 'Group';
-    const groupMeta = document.getElementById('dashboardGroupMeta').textContent || '';
+    const groupName = document.getElementById('dashboardGroupName')?.textContent || 'Group';
+    const groupMeta = document.getElementById('dashboardGroupMeta')?.textContent || '';
 
     activeChatGroupName = groupName;
 
@@ -1097,23 +1241,29 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
 
     showChatTab();
     clearChatImagePreview();
+    clearChatStateForGroupSwitch();
+    setConnectionStatus('Connecting', 'connecting');
 
     try {
       await resolveActiveGroupId(groupName);
       await fetchChatMessages();
       await fetchSharedFiles();
-      startChatPolling();
+      await startChatPolling();
     } catch (err) {
       console.error('Failed to open chat', err);
     }
   };
 
   window.closeGroupChat = function () {
+    if (activeChatGroupId && groupChatState.connected) {
+      sendGroupEvent('leaveGroup', {}, true);
+    }
     document.getElementById('chatModal').classList.add('hidden');
     document.body.classList.remove('modal-open');
     stopChatPolling();
     activeChatGroupId = null;
     activeChatGroupName = '';
+    clearChatStateForGroupSwitch();
     clearChatImagePreview();
   };
 
@@ -1175,7 +1325,27 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
         popup.classList.add('hidden');
       }
     } else if (event.key === 'Enter') {
+      const chatInput = document.getElementById('chatInput');
+      if (chatInput.value.trim().toLowerCase() === '/calendar') {
+         event.preventDefault();
+         chatInput.value = '';
+         calendarModalController.open();
+         return;
+      }
       window.sendChatMessage();
+      return;
+    } else {
+      if (!groupChatState.selfTyping) {
+        groupChatState.selfTyping = true;
+        sendGroupEvent('typingStart', {}, true);
+      }
+      if (groupChatState.typingStopTimer) {
+        window.clearTimeout(groupChatState.typingStopTimer);
+      }
+      groupChatState.typingStopTimer = window.setTimeout(() => {
+        groupChatState.selfTyping = false;
+        sendGroupEvent('typingStop', {}, true);
+      }, 700);
     }
   }
 
@@ -1191,6 +1361,13 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
   }
 
   function selectSlashCommand(command) {
+    if (command === '/calendar') {
+      document.getElementById('slashCommandPopup').classList.add('hidden');
+      document.getElementById('chatInput').value = '';
+      calendarModalController.open();
+      return;
+    }
+
     const input = document.getElementById('chatInput');
     const popup = document.getElementById('slashCommandPopup');
 
@@ -1211,15 +1388,117 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
     }
   }
 
+  /* ================================
+     CALENDAR EVENT MODAL (SRP)
+  ================================ */
+  const calendarModalController = {
+    open: function() {
+      document.getElementById('calendarEventModal').classList.remove('hidden');
+      document.getElementById('calEventTitle').focus();
+      document.getElementById('calEventPeriod').value = '';
+      document.getElementById('calEventStatus').textContent = '';
+      document.getElementById('calEventStatus').className = 'text-sm mt-2';
+      
+      const groupContainer = document.getElementById('calEventGroupContainer');
+      const groupNameEl = document.getElementById('calEventGroupName');
+      if (typeof activeChatGroupName !== 'undefined' && activeChatGroupName) {
+        if (groupNameEl) groupNameEl.textContent = activeChatGroupName;
+        if (groupContainer) groupContainer.classList.remove('hidden');
+      } else {
+        if (groupContainer) groupContainer.classList.add('hidden');
+      }
+    },
+    close: function() {
+      document.getElementById('calendarEventModal').classList.add('hidden');
+      this.reset();
+    },
+    reset: function() {
+      document.getElementById('calEventTitle').value = '';
+      document.getElementById('calEventDate').value = '';
+      document.getElementById('calEventPeriod').value = '';
+      document.getElementById('calEventDesc').value = '';
+      document.getElementById('calEventPriority').value = 'P2';
+      document.getElementById('calEventStatus').textContent = '';
+      document.getElementById('calEventSubmitBtn').disabled = false;
+      document.getElementById('calEventSubmitBtn').innerHTML = 'Create Event';
+    },
+    setStatus: function(msg, isError = false) {
+      const statusEl = document.getElementById('calEventStatus');
+      statusEl.textContent = msg;
+      statusEl.className = 'text-sm mt-2 ' + (isError ? 'text-red-400' : 'text-green-400');
+    },
+    submit: async function() {
+      const titleInput = document.getElementById('calEventTitle').value.trim();
+      const dateInput = document.getElementById('calEventDate').value;
+      const periodInput = document.getElementById('calEventPeriod').value.trim();
+      const descInput = document.getElementById('calEventDesc').value.trim();
+      const priorityInput = document.getElementById('calEventPriority').value;
+
+      if (!titleInput || !dateInput) {
+        this.setStatus('Title and Date are required.', true);
+        return;
+      }
+
+      const btn = document.getElementById('calEventSubmitBtn');
+      btn.disabled = true;
+      // spinner
+      btn.innerHTML = '<svg class="animate-spin h-5 w-5 mr-2 inline" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>Creating...';
+      
+      let emoji = '📅';
+      let finalTitle = `[${priorityInput}] ${emoji} ${titleInput}`;
+      if (typeof activeChatGroupName !== 'undefined' && activeChatGroupName) {
+        finalTitle += ` (${activeChatGroupName})`;
+      }
+
+      const eventPayload = {
+        title: finalTitle,
+        description: descInput,
+        date: dateInput,
+        period: periodInput,
+        priority: priorityInput
+      };
+
+      if (typeof activeChatGroupId !== 'undefined' && activeChatGroupId) {
+        eventPayload.groupId = activeChatGroupId;
+      }
+
+      try {
+        const res = await fetch(`${javaURI}/api/calendar/add_event`, {
+          ...fetchOptions,
+          method: 'POST',
+          body: JSON.stringify(eventPayload)
+        });
+
+        if (res.status === 401 || res.status === 403 || (res.redirected && res.url.includes('/login'))) {
+          this.setStatus('Session expired. Please log in again.', true);
+          btn.disabled = false;
+          btn.innerHTML = 'Create Event';
+          return;
+        }
+
+        if (!res.ok) {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server returned an error');
+        }
+
+        this.setStatus('Event created successfully!');
+        setTimeout(() => {
+          this.close();
+        }, 1000);
+      } catch (err) {
+        console.error('Failed to create calendar event:', err);
+        this.setStatus(`Error: ${err.message}`, true);
+        btn.disabled = false;
+        btn.innerHTML = 'Create Event';
+      }
+    }
+  };
+  
+  window.calendarModalController = calendarModalController;
+
   window.handleChatInputChange = handleChatInputChange;
   window.handleChatInputKeydown = handleChatInputKeydown;
   window.selectSlashCommand = selectSlashCommand;
-  window.previousMonth = previousMonth;
-  window.nextMonth = nextMonth;
-  window.openAddEventModal = openAddEventModal;
-  window.closeEventModal = closeEventModal;
-  window.saveEvent = saveEvent;
-  window.deleteEvent = deleteEvent;
   window.refreshDashboard = refreshDashboard;
   window.downloadBase64File = downloadBase64File;
   window.handleSharedFileUpload = handleSharedFileUpload;
@@ -1232,6 +1511,13 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
     }
   });
 
+  window.addEventListener('beforeunload', () => {
+    if (activeChatGroupId && groupChatState.connected) {
+      sendGroupEvent('leaveGroup', {}, true);
+    }
+    stopHeartbeat();
+  });
+
   // ================================
   // DASHBOARD SHARED FILES
   // ================================
diff --git a/_layouts/profile.html b/_layouts/profile.html
index ae3b9f77ee..b2b52f1f2d 100644
--- a/_layouts/profile.html
+++ b/_layouts/profile.html
@@ -109,22 +109,87 @@ <h2 class="text-xl font-semibold">Classes</h2>
                 Add Class
             </button>
         </div>
-    
+
         <div id="classesContainer">
             <!-- Classes will be loaded here dynamically -->
             <p class="text-gray-400 text-center py-4">Loading classes...</p>
         </div>
     </div>
 
-<div class="bg-neutral-800 rounded-lg shadow-md p-6 mb-6 border-neutral-700 border">
-    <h2 class="text-xl font-semibold mb-6">Select Your Persona</h2>
-    
-    <div id="personaSelectionContainer">
-        <p class="text-gray-400 text-center py-4">Loading personas...</p>
+    <div class="bg-neutral-800 rounded-lg shadow-md p-6 mb-6 border-neutral-700 border">
+        <h2 class="text-xl font-semibold mb-6">Select Your Persona</h2>
+
+        <div id="personaSelectionContainer">
+            <p class="text-gray-400 text-center py-4">Loading personas...</p>
+        </div>
     </div>
-</div>
 
 
+    <div class="bg-neutral-800 rounded-lg shadow-md p-6 mb-6 border-neutral-700 border">
+        <h2 class="text-xl font-semibold mb-6">Facial Registration</h2>
+        <div id="facialRegistrationContainer" class="space-y-4">
+            <p class="text-gray-400 text-sm">Register your face to use the Bathroom Pass system. Your data will be
+                stored securely and used only for identification.</p>
+
+            <div id="webcamOverlay"
+                class="hidden fixed inset-0 bg-black/80 z-50 flex flex-col items-center justify-center p-4">
+                <div
+                    class="relative w-full max-w-md bg-neutral-900 rounded-2xl overflow-hidden border border-neutral-700 shadow-2xl">
+                    <div class="p-4 border-b border-neutral-800 flex justify-between items-center">
+                        <h3 class="font-semibold text-gray-200">Face Scanner</h3>
+                        <button type="button" onclick="closeScanner()" class="text-gray-500 hover:text-gray-300">
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="relative aspect-video bg-black flex items-center justify-center">
+                        <video id="webcamControl" class="w-full h-full object-cover" autoplay playsinline></video>
+                        <canvas id="captureCanvas" class="hidden"></canvas>
+                        <!-- Scanner Effect -->
+                        <div class="absolute inset-0 border-2 border-indigo-500/30 pointer-events-none">
+                            <div class="absolute top-0 left-0 w-8 h-8 border-t-2 border-l-2 border-indigo-500"></div>
+                            <div class="absolute top-0 right-0 w-8 h-8 border-t-2 border-r-2 border-indigo-500"></div>
+                            <div class="absolute bottom-0 left-0 w-8 h-8 border-b-2 border-l-2 border-indigo-500"></div>
+                            <div class="absolute bottom-0 right-0 w-8 h-8 border-b-2 border-r-2 border-indigo-500">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-6 flex flex-col items-center gap-4">
+                        <button type="button" id="captureFaceBtn" onclick="captureAndSaveFace()"
+                            class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-semibold transition-all shadow-lg shadow-indigo-500/20 flex items-center justify-center gap-2">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+                            </svg>
+                            Capture Face
+                        </button>
+                        <p id="scannerStatus" class="text-sm text-gray-400"></p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-4">
+                <button type="button" onclick="openScanner()"
+                    class="px-6 py-2 bg-indigo-600/20 hover:bg-indigo-600/30 text-indigo-400 border border-indigo-500/30 rounded-lg transition-all flex items-center gap-2">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                    </svg>
+                    Start Face Registration
+                </button>
+                <div id="registrationIndicator" class="flex items-center gap-2 text-sm text-gray-500">
+                    <div id="regStatusDot" class="w-2 h-2 rounded-full bg-gray-600"></div>
+                    <span id="regStatusText">Checking registration...</span>
+                </div>
+            </div>
+        </div>
+    </div>
 </form>
 
 <script type="module">
@@ -169,7 +234,7 @@ <h2 class="text-xl font-semibold mb-6">Select Your Persona</h2>
             })
             .then(personData => {
                 if (!personData) return null; // Chain was stopped
-                
+
                 // Cache user identity for reuse in join/leave operations
                 currentPersonId = personData.id;
                 currentUid = personData.uid;
@@ -182,10 +247,10 @@ <h2 class="text-xl font-semibold mb-6">Select Your Persona</h2>
                 // This request DEPENDS on having currentPersonId from the previous call
                 return fetch(`${javaURI}/api/groups/person/${currentPersonId}`, fetchOptions);
             })
-           
+
             .then(groupResp => {
                 if (!groupResp) return null; // Chain was stopped
-                
+
                 // Handle group fetch response
                 if (groupResp.ok) {
                     return groupResp.json();
@@ -207,7 +272,7 @@ <h2 class="text-xl font-semibold mb-6">Select Your Persona</h2>
             })
             .then(userGroups => {
                 if (!userGroups) return; // Chain was stopped
-                
+
                 const groups = Array.isArray(userGroups) ? userGroups : [];
 
                 // Build a Set of user's group IDs for O(1) lookup during search
@@ -264,40 +329,40 @@ <h2 class="text-xl font-semibold mb-6">Select Your Persona</h2>
 
     async function loadPersonas() {
         const container = document.getElementById('personaSelectionContainer');
-        
+
         try {
             // Fetch all available personas
-            const personasResp = await fetch(`${pythonURI}/api/persona`, fetchOptions); 
+            const personasResp = await fetch(`${pythonURI}/api/persona`, fetchOptions);
             if (!personasResp.ok) throw new Error('Failed to load personas');
             const personas = await personasResp.json();
-            
+
             console.log('📦 All personas loaded:', personas);
-            
+
             // Get user's personas
-            const userPersonasResp = await fetch(`${pythonURI}/api/user/personas`, fetchOptions); 
-            
+            const userPersonasResp = await fetch(`${pythonURI}/api/user/personas`, fetchOptions);
+
             let selectedPersonas = {};
             let totalSelected = 0;
-            
+
             if (!userPersonasResp.ok) {
                 console.log('⚠️ No personas found for user or not authenticated');
                 showPersonaSelectionCards(personas, {});
                 return;
             }
-            
+
             const userPersonasData = await userPersonasResp.json();
             console.log('👤 User personas data:', userPersonasData);
-            
+
             selectedPersonas = userPersonasData.personas || {};
             totalSelected = userPersonasData.total_selected || 0;
-            
+
             console.log('✅ Selected personas:', selectedPersonas);
             console.log('📊 Total selected:', totalSelected);
-            
+
             // Store globally
             window.allPersonasData = personas;
             window.selectedPersonasData = selectedPersonas;
-            
+
             // If user has selected all 4 categories, show the completed view
             if (totalSelected === 4) {
                 console.log('🎉 All 4 selected! Showing completed view');
@@ -307,7 +372,7 @@ <h2 class="text-xl font-semibold mb-6">Select Your Persona</h2>
                 // Show selection interface - hide completed categories
                 showPersonaSelectionCards(personas, selectedPersonas);
             }
-            
+
         } catch (error) {
             console.error('❌ Error loading personas:', error);
             container.innerHTML = `
@@ -318,7 +383,7 @@ <h2 class="text-xl font-semibold mb-6">Select Your Persona</h2>
     }
     function editProfile() {
         console.log('📝 Edit profile clicked - showing all categories');
-        
+
         if (window.allPersonasData && window.selectedPersonasData) {
             showPersonaSelectionCards(window.allPersonasData, window.selectedPersonasData, true); // Pass true to force show all
         } else {
@@ -327,19 +392,19 @@ <h2 class="text-xl font-semibold mb-6">Select Your Persona</h2>
     }
     function showPersonaSelectionCards(allPersonas, selectedPersonas, forceShowAll = false) {
         const container = document.getElementById('personaSelectionContainer');
-        
+
         console.log('🎨 Rendering selection cards');
         console.log('Total personas:', allPersonas.length);
         console.log('Selected:', selectedPersonas);
         console.log('Force show all:', forceShowAll);
-        
+
         if (allPersonas.length === 0) {
             container.innerHTML = `
                 <p class="text-gray-400 text-center py-4">No personas available.</p>
             `;
             return;
         }
-        
+
         // Group personas by category
         const grouped = allPersonas.reduce((acc, persona) => {
             const category = persona.category || 'other';
@@ -347,26 +412,26 @@ <h2 class="text-xl font-semibold mb-6">Select Your Persona</h2>
             acc[category].push(persona);
             return acc;
         }, {});
-        
+
         console.log('📂 Grouped by category:', grouped);
-        
+
         const categoryLabels = {
             'student': 'Student Archetype',
             'social': 'Social Interest',
             'achievement': 'Achievement Oriented',
             'fantasy': 'Fantasy Persona'
         };
-        
+
         const categoryDescriptions = {
             'student': 'How you approach learning and teamwork',
             'social': 'Your hobbies and social interests',
             'achievement': 'What drives and motivates you',
             'fantasy': 'Your aspirational superpower'
         };
-        
+
         const categoryOrder = ['student', 'social', 'achievement', 'fantasy'];
         const totalSelected = Object.keys(selectedPersonas).length;
-        
+
         container.innerHTML = `
             <div class="text-center mb-8">
                 <h2 class="text-xl font-semibold text-gray-100">Persona Profile</h2>
@@ -379,19 +444,19 @@ <h2 class="text-xl font-semibold text-gray-100">Persona Profile</h2>
             
             <div class="space-y-8">
                 ${categoryOrder.map(category => {
-                    const personas = grouped[category] || [];
-                    const selectedInCategory = selectedPersonas[category];
-                    
-                    // CHANGED: Only hide if NOT forcing show all AND category is selected
-                    if (!forceShowAll && selectedInCategory) {
-                        console.log(`✓ Category ${category} already selected, hiding it`);
-                        return '';
-                    }
-                    
-                    // Show the selection grid
-                    console.log(`🎯 Showing selection grid for ${category}`);
-                    
-                    return `
+            const personas = grouped[category] || [];
+            const selectedInCategory = selectedPersonas[category];
+
+            // CHANGED: Only hide if NOT forcing show all AND category is selected
+            if (!forceShowAll && selectedInCategory) {
+                console.log(`✓ Category ${category} already selected, hiding it`);
+                return '';
+            }
+
+            // Show the selection grid
+            console.log(`🎯 Showing selection grid for ${category}`);
+
+            return `
                         <div class="mb-8" id="category-${category}">
                             <div class="flex items-center justify-between mb-4">
                                 <div>
@@ -405,11 +470,11 @@ <h3 class="text-xl font-semibold text-gray-300 flex items-center gap-2">
                             
                             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" id="category-grid-${category}">
                                 ${personas.map(persona => {
-                                    const title = persona.bio_map?.title || persona.alias || 'Unnamed';
-                                    const description = persona.bio_map?.description || 'No description';
-                                    const isCurrentlySelected = selectedInCategory && selectedInCategory.persona_id === persona.id;
-                                    
-                                    return `
+                const title = persona.bio_map?.title || persona.alias || 'Unnamed';
+                const description = persona.bio_map?.description || 'No description';
+                const isCurrentlySelected = selectedInCategory && selectedInCategory.persona_id === persona.id;
+
+                return `
                                         <div 
                                             id="persona-card-${persona.id}"
                                             class="flex flex-col p-4 ${isCurrentlySelected ? 'bg-indigo-900 border-indigo-400' : 'bg-neutral-800 hover:bg-neutral-700'} border ${isCurrentlySelected ? 'border-indigo-400' : 'border-gray-700 hover:border-indigo-500'} rounded-lg cursor-pointer transition-all group h-full relative"
@@ -436,33 +501,33 @@ <h4 class="font-semibold ${isCurrentlySelected ? 'text-indigo-200' : 'text-gray-
                                             </div>
                                         </div>
                                     `;
-                                }).join('')}
+            }).join('')}
                             </div>
                         </div>
                     `;
-                }).join('')}
+        }).join('')}
             </div>
         `;
     }
     function showCompletedPersonas(selectedPersonas, allPersonas) {
         const container = document.getElementById('personaSelectionContainer');
-        
+
         const categoryLabels = {
             'student': 'Student Archetype',
             'social': 'Social Interest',
             'achievement': 'Achievement Oriented',
             'fantasy': 'Fantasy Persona'
         };
-        
+
         const categoryEmojis = {
             'student': '📚',
             'social': '🎉',
             'achievement': '🏆',
             'fantasy': '✨'
         };
-        
+
         const categoryOrder = ['student', 'social', 'achievement', 'fantasy'];
-        
+
         container.innerHTML = `
             <div class="max-w-7xl mx-auto">
                 <!-- Header -->
@@ -594,17 +659,17 @@ <h3 class="text-lg font-semibold text-gray-100">Log Your Skills for This Project
                 <!-- 2x2 Grid of Selected Personas -->
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                     ${categoryOrder.map(category => {
-                        const personaData = selectedPersonas[category];
-                        if (!personaData) return '';
-                        
-                        const persona = allPersonas.find(p => p.id === personaData.persona_id);
-                        if (!persona) return '';
-                        
-                        const title = persona.bio_map?.title || persona.alias || 'Unnamed';
-                        const description = persona.bio_map?.description || 'No description';
-                        const empathyMap = persona.empathy_map || {};
-                        
-                        return `
+            const personaData = selectedPersonas[category];
+            if (!personaData) return '';
+
+            const persona = allPersonas.find(p => p.id === personaData.persona_id);
+            if (!persona) return '';
+
+            const title = persona.bio_map?.title || persona.alias || 'Unnamed';
+            const description = persona.bio_map?.description || 'No description';
+            const empathyMap = persona.empathy_map || {};
+
+            return `
                         <div class="bg-neutral-800 border border-indigo-500/30 rounded-xl p-4 hover:border-indigo-500 transition">
                             <div class="flex items-center gap-3 mb-2">
                                 <div class="w-9 h-9 bg-indigo-600 rounded-full flex items-center justify-center text-base flex-shrink-0">
@@ -618,7 +683,7 @@ <h3 class="text-sm font-bold text-gray-100">${title}</h3>
                             <p class="text-xs text-gray-400 line-clamp-2 leading-relaxed">${description}</p>
                         </div>
                     `;
-                    }).join('')}
+        }).join('')}
                 </div>
             </div>
         `;
@@ -627,7 +692,7 @@ <h3 class="text-sm font-bold text-gray-100">${title}</h3>
         console.log('🎯 SELECT PERSONA CALLED');
         console.log('   Persona ID:', personaId);
         console.log('   Category:', category);
-        
+
         // Show loading state on the clicked card
         const card = document.getElementById(`persona-card-${personaId}`);
         if (card) {
@@ -639,34 +704,34 @@ <h3 class="text-sm font-bold text-gray-100">${title}</h3>
             }
             card.style.pointerEvents = 'none';
         }
-        
+
         try {
             const url = `${pythonURI}/api/user/persona`;
             const body = { persona_id: personaId };
-            
+
             console.log('📤 Making POST request');
             console.log('   URL:', url);
             console.log('   Body:', body);
-            
+
             const response = await fetch(url, {
                 ...fetchOptions,
                 method: 'POST',
                 body: JSON.stringify(body)
             });
-            
+
             console.log('📥 Response received');
             console.log('   Status:', response.status);
             console.log('   OK:', response.ok);
-            
+
             const responseData = await response.json();
             console.log('   Response Data:', responseData);
-            
+
             if (!response.ok) {
                 throw new Error(responseData.message || `Server error: ${response.status}`);
             }
-            
+
             console.log('✅ Selection successful!');
-            
+
             // Show success animation
             if (card) {
                 const overlay = card.querySelector('.loading-overlay');
@@ -679,17 +744,17 @@ <h3 class="text-sm font-bold text-gray-100">${title}</h3>
                     console.log('   ✅ Success checkmark shown');
                 }
             }
-            
+
             // Wait a moment then reload
             console.log('   ⏳ Waiting 600ms before reload...');
             setTimeout(() => {
                 console.log('   🔄 Reloading personas...');
                 loadPersonas();
             }, 600);
-            
+
         } catch (error) {
             console.error('❌ ERROR in selectPersona:', error);
-            
+
             // Hide loading overlay and restore interactivity
             if (card) {
                 const overlay = card.querySelector('.loading-overlay');
@@ -698,13 +763,13 @@ <h3 class="text-sm font-bold text-gray-100">${title}</h3>
                 }
                 card.style.pointerEvents = 'auto';
             }
-            
+
             // Show error message
             const categorySection = document.getElementById(`category-${category}`);
             if (categorySection) {
                 const existingError = categorySection.querySelector('.error-message');
                 if (existingError) existingError.remove();
-                
+
                 const errorDiv = document.createElement('div');
                 errorDiv.className = 'error-message bg-red-900/30 border border-red-500 rounded-lg p-4 mb-4 flex items-start gap-3';
                 errorDiv.innerHTML = `
@@ -722,7 +787,7 @@ <h4 class="text-red-400 font-semibold mb-1">Selection Failed</h4>
                     </button>
                 `;
                 categorySection.insertBefore(errorDiv, categorySection.querySelector(`#category-grid-${category}`));
-                
+
                 setTimeout(() => errorDiv.remove(), 5000);
             }
         }
@@ -734,18 +799,18 @@ <h4 class="text-red-400 font-semibold mb-1">Selection Failed</h4>
         const problemSolving = parseInt(document.getElementById('problemSolving')?.value);
         const initiative = parseInt(document.getElementById('initiative')?.value);
         const statusEl = document.getElementById('snapshotStatus');
-    
+
         if (!projectName) {
             statusEl.textContent = 'Please enter a project name.';
             statusEl.classList.add('text-red-400');
             statusEl.classList.remove('text-green-400', 'text-gray-400');
             return;
         }
-    
+
         statusEl.textContent = 'Saving...';
         statusEl.classList.remove('text-red-400', 'text-green-400');
         statusEl.classList.add('text-gray-400');
-    
+
         try {
             const response = await fetch(`${pythonURI}/api/user/skill-snapshot`, {
                 ...fetchOptions,
@@ -758,16 +823,16 @@ <h4 class="text-red-400 font-semibold mb-1">Selection Failed</h4>
                     initiative: initiative
                 })
             });
-    
+
             if (!response.ok) {
                 const err = await response.json();
                 throw new Error(err.message || 'Failed to save snapshot');
             }
-    
+
             statusEl.textContent = 'Snapshot saved!';
             statusEl.classList.add('text-green-400');
             statusEl.classList.remove('text-red-400', 'text-gray-400');
-    
+
             // reset form
             document.getElementById('snapshotProjectName').value = '';
             ['codingAbility', 'collaboration', 'problemSolving', 'initiative'].forEach(id => {
@@ -778,7 +843,7 @@ <h4 class="text-red-400 font-semibold mb-1">Selection Failed</h4>
                 const el = document.getElementById(id);
                 if (el) el.textContent = '3';
             });
-    
+
             // use existing toast if available
             if (window.showToast) {
                 showToast({
@@ -789,11 +854,11 @@ <h4 class="text-red-400 font-semibold mb-1">Selection Failed</h4>
                     duration: 3000
                 });
             }
-    
+
             setTimeout(() => {
                 statusEl.textContent = '';
             }, 3000);
-    
+
         } catch (error) {
             console.error('Snapshot error:', error);
             statusEl.textContent = error.message || 'Something went wrong.';
@@ -801,8 +866,8 @@ <h4 class="text-red-400 font-semibold mb-1">Selection Failed</h4>
             statusEl.classList.remove('text-green-400', 'text-gray-400');
         }
     }
- 
-window.submitSkillSnapshot = submitSkillSnapshot;
+
+    window.submitSkillSnapshot = submitSkillSnapshot;
 
     // Make functions globally accessible
     window.loadPersonas = loadPersonas;
@@ -957,10 +1022,10 @@ <h4 class="text-red-400 font-semibold mb-1">Selection Failed</h4>
     // Initialize the form
     document.addEventListener('DOMContentLoaded', function () {
         console.log('DOMContentLoaded fired'); // ADD THIS
-        
+
         // Store original values
         saveOriginalValues();
-        
+
         // Load user classes
         loadUserClasses();
 
@@ -972,7 +1037,7 @@ <h4 class="text-red-400 font-semibold mb-1">Selection Failed</h4>
         const addClassBtn = document.getElementById('addClassBtn');
         console.log('Add Class Button:', addClassBtn); // ADD THIS
         if (addClassBtn) {
-            addClassBtn.addEventListener('click', function() {
+            addClassBtn.addEventListener('click', function () {
                 console.log('Add Class button clicked!'); // ADD THIS
                 addClass();
             });
@@ -994,7 +1059,7 @@ <h4 class="text-red-400 font-semibold mb-1">Selection Failed</h4>
             }
         });
     });
-    
+
     // Save original form values
     function saveOriginalValues() {
         const form = document.getElementById('profileSettingsForm');
@@ -1061,10 +1126,10 @@ <h4 class="text-red-400 font-semibold mb-1">Selection Failed</h4>
             saveButton.classList.remove('bg-indigo-500', 'text-white', 'hover:bg-indigo-600');
         }
     }
-    
+
     async function loadUserClasses() {
         try {
-            const response = await fetch(`${pythonURI}/api/user/class`, fetchOptions); 
+            const response = await fetch(`${pythonURI}/api/user/class`, fetchOptions);
             if (!response.ok) {
                 console.error('Failed to load classes');
                 return;
@@ -1081,7 +1146,7 @@ <h4 class="text-red-400 font-semibold mb-1">Selection Failed</h4>
     // Render classes in the UI
     function renderClasses(classes) {
         const container = document.getElementById('classesContainer');
-        
+
         if (!container) return;
 
         if (!classes || classes.length === 0) {
@@ -1153,9 +1218,9 @@ <h4 class="text-red-400 font-semibold mb-1">Selection Failed</h4>
             const response = await fetch(`${pythonURI}/api/user/class`, {
                 ...fetchOptions,
                 method: 'POST',
-                body: JSON.stringify({ 
+                body: JSON.stringify({
                     action: 'remove',
-                    class: classToRemove 
+                    class: classToRemove
                 })
             });
 
@@ -1207,14 +1272,14 @@ <h4 class="text-red-400 font-semibold mb-1">Selection Failed</h4>
         }
 
         try {
-            const response = await fetch(`${pythonURI}/api/grade-prediction/${uid}`, fetchOptions); 
+            const response = await fetch(`${pythonURI}/api/grade-prediction/${uid}`, fetchOptions);
             if (!response.ok) {
                 throw new Error(`Failed to fetch grade prediction: ${response.statusText}`);
             }
 
             const data = await response.json();
             console.log('Grade Prediction Data:', data);
-            
+
             // Process and display the grade prediction data
             if (data && data.prediction) {
                 displayGradePrediction(data);
@@ -1233,7 +1298,7 @@ <h4 class="text-red-400 font-semibold mb-1">Selection Failed</h4>
     // Display grade prediction results
     function displayGradePrediction(data) {
         console.log('Displaying grade prediction:', data);
-        
+
         // You can add UI elements here to display the prediction
         // For now, just log to console
         if (data.prediction) {
@@ -1458,4 +1523,120 @@ <h4 class="text-red-400 font-semibold mb-1">Selection Failed</h4>
     window.checkForChanges = checkForChanges;
     window.fetchGradePrediction = fetchGradePrediction;
     window.displayGradePrediction = displayGradePrediction;
+
+    // --- Facial Registration Logic ---
+    let scannerStream = null;
+
+    async function openScanner() {
+        const overlay = document.getElementById('webcamOverlay');
+        const video = document.getElementById('webcamControl');
+        const status = document.getElementById('scannerStatus');
+
+        overlay.classList.remove('hidden');
+        status.textContent = "Requesting camera access...";
+
+        try {
+            scannerStream = await navigator.mediaDevices.getUserMedia({ video: true });
+            video.srcObject = scannerStream;
+            status.textContent = "Camera active. Center your face.";
+        } catch (err) {
+            console.error("Camera error:", err);
+            status.textContent = "Error: Could not access camera.";
+        }
+    }
+
+    function closeScanner() {
+        const overlay = document.getElementById('webcamOverlay');
+        const video = document.getElementById('webcamControl');
+
+        if (scannerStream) {
+            scannerStream.getTracks().forEach(track => track.stop());
+            scannerStream = null;
+        }
+        video.srcObject = null;
+        overlay.classList.add('hidden');
+    }
+
+    async function captureAndSaveFace() {
+        if (!window.currentUid) {
+            alert("No user ID found. Please refresh the page.");
+            return;
+        }
+
+        const video = document.getElementById('webcamControl');
+        const canvas = document.getElementById('captureCanvas');
+        const status = document.getElementById('scannerStatus');
+        const captureBtn = document.getElementById('captureFaceBtn');
+
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        canvas.getContext('2d').drawImage(video, 0, 0);
+
+        const imageData = canvas.toDataURL('image/jpeg');
+        const base64Image = imageData.split(',')[1];
+
+        status.textContent = "Registering face...";
+        captureBtn.disabled = true;
+
+        try {
+            // Persist in Spring (used for bathroom pass identification)
+            const springResp = await fetch(`${javaURI}/api/person/update`, {
+                ...fetchOptions,
+                method: 'POST',
+                body: JSON.stringify({
+                    faceData: base64Image
+                })
+            });
+
+
+            if (!springResp.ok) throw new Error("Spring persistence failed");
+
+            status.textContent = "Registration successful!";
+            updateRegistrationStatus(true);
+            setTimeout(closeScanner, 1500);
+
+            if (window.showToast) {
+                showToast({
+                    message: "Facial registration complete!",
+                    icon: `<svg class="size-5 text-teal-400" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>`,
+                    duration: 3000
+                });
+            }
+        } catch (err) {
+            console.error(err);
+            status.textContent = "Registration failed. Try again.";
+        } finally {
+            captureBtn.disabled = false;
+        }
+    }
+
+    function updateRegistrationStatus(isRegistered) {
+        const dot = document.getElementById('regStatusDot');
+        const text = document.getElementById('regStatusText');
+        if (isRegistered) {
+            dot.classList.remove('bg-gray-600');
+            dot.classList.add('bg-green-500');
+            text.textContent = "Face Registered";
+        } else {
+            dot.classList.remove('bg-green-500');
+            dot.classList.add('bg-gray-600');
+            text.textContent = "Not Registered";
+        }
+    }
+
+    // Export functions to window
+    window.openScanner = openScanner;
+    window.closeScanner = closeScanner;
+    window.captureAndSaveFace = captureAndSaveFace;
+
+    // Check registration on load
+    document.addEventListener('DOMContentLoaded', () => {
+        fetch(`${javaURI}/api/person/get`, fetchOptions)
+            .then(res => res.json())
+            .then(data => {
+                window.currentUid = data.uid;
+                updateRegistrationStatus(!!data.faceData);
+            })
+            .catch(console.error);
+    });
 </script>
\ No newline at end of file
diff --git a/_posts/teacher_toolkit/StudentManagement/2025-04-07-GroupDashboard.html b/_posts/teacher_toolkit/StudentManagement/2025-04-07-GroupDashboard.html
index 827cfd6664..99512d32da 100644
--- a/_posts/teacher_toolkit/StudentManagement/2025-04-07-GroupDashboard.html
+++ b/_posts/teacher_toolkit/StudentManagement/2025-04-07-GroupDashboard.html
@@ -14,7 +14,7 @@
 {% include group_dashboard.html %}
 
 <script type="module">
-  import { javaURI, fetchOptions } from '{{site.baseurl}}/assets/js/api/config.js';
+  import { javaURI, pythonURI, fetchOptions } from '{{site.baseurl}}/assets/js/api/config.js';
 
   // ---------------------------------------------
   // CONFIG: Constants + error catalog
@@ -499,6 +499,293 @@
     }
   }
 
+  // ---------------------------------------------
+  // RELATIONSHIP GRAPH LOGIC (SRP conformant)
+  // ---------------------------------------------
+  
+  function calculateFriendshipScore(memberA, memberB, analyticsA, analyticsB) {
+    if (!analyticsA || !analyticsB) return 0;
+    
+    // Find shared groups
+    const groupsA = analyticsA.groupAnalytics || [];
+    const groupsB = analyticsB.groupAnalytics || [];
+    
+    let sharedGroupsCount = 0;
+    let interactionScore = 0;
+    
+    const groupsBMap = new Map(groupsB.map(g => [g.groupId, g]));
+    
+    for (const gA of groupsA) {
+      const gB = groupsBMap.get(gA.groupId);
+      if (gB) {
+        sharedGroupsCount++;
+        // interaction is based on active messaging in shared groups
+        const msgA = gA.messagesSent || 0;
+        const msgB = gB.messagesSent || 0;
+        interactionScore += Math.min(msgA, msgB) * 0.5;
+      }
+    }
+    
+    if (sharedGroupsCount === 0) return 0;
+    return (sharedGroupsCount * 10) + interactionScore;
+  }
+
+  function getColorForNode(id) {
+    const colors = ['#4f46e5', '#9333ea', '#ea580c', '#0d9488', '#db2777', '#2563eb', '#16a34a', '#dc2626', '#ca8a04'];
+    return colors[id % colors.length];
+  }
+
+  function buildRelationshipGraphData(membersWithAnalytics) {
+    const nodes = [];
+    const edges = [];
+    
+    // Build Nodes
+    membersWithAnalytics.forEach(({member, analytics}) => {
+      nodes.push({
+        id: member.id,
+        label: member.name || member.uid,
+        groupCount: analytics?.groupAnalytics?.length || 0,
+        color: getColorForNode(member.id),
+        value: (analytics?.groupAnalytics?.reduce((acc, g) => acc + (g.messagesSent || 0), 0) || 0) + 1
+      });
+    });
+    
+    // Build Edges
+    for (let i = 0; i < membersWithAnalytics.length; i++) {
+      for (let j = i + 1; j < membersWithAnalytics.length; j++) {
+        const memberA = membersWithAnalytics[i];
+        const memberB = membersWithAnalytics[j];
+        
+        const score = calculateFriendshipScore(memberA.member, memberB.member, memberA.analytics, memberB.analytics);
+        
+        if (score > 0) {
+          edges.push({
+            source: memberA.member.id,
+            target: memberB.member.id,
+            weight: score
+          });
+        }
+      }
+    }
+    
+    return { nodes, edges };
+  }
+
+  function renderRelationshipGraph(nodes, edges) {
+    if (typeof d3 === 'undefined') {
+      console.warn('D3.js library not loaded');
+      return;
+    }
+    
+    const container = document.getElementById('relationshipGraphContainer');
+    const width = container.clientWidth || 800;
+    const height = container.clientHeight || 400;
+    
+    // Clear previous SVG
+    d3.select('#relationshipGraphContainer svg').remove();
+    
+    const svg = d3.select('#relationshipGraphContainer')
+      .append('svg')
+      .attr('width', '100%')
+      .attr('height', '100%')
+      .attr('viewBox', [0, 0, width, height]);
+      
+    const g = svg.append('g');
+    
+    // Add Zoom
+    const zoom = d3.zoom()
+      .scaleExtent([0.1, 4])
+      .on('zoom', (event) => {
+        g.attr('transform', event.transform);
+      });
+      
+    svg.call(zoom);
+    
+    // Zoom controls
+    document.getElementById('graphZoomInButton').onclick = () => svg.transition().call(zoom.scaleBy, 1.2);
+    document.getElementById('graphZoomOutButton').onclick = () => svg.transition().call(zoom.scaleBy, 0.8);
+    document.getElementById('graphResetButton').onclick = () => svg.transition().call(zoom.transform, d3.zoomIdentity);
+
+    if (nodes.length === 0) return;
+
+    const graphSimulation = d3.forceSimulation(nodes)
+        .force("link", d3.forceLink(edges).id(d => d.id).distance(150))
+        .force("charge", d3.forceManyBody().strength(-400))
+        .force("center", d3.forceCenter(width / 2, height / 2))
+        .force("collision", d3.forceCollide().radius(d => Math.sqrt(d.value) * 3 + 20));
+
+    const link = g.append("g")
+        .attr("stroke", "#525252")
+        .attr("stroke-opacity", 0.6)
+      .selectAll("line")
+      .data(edges)
+      .join("line")
+        .attr("stroke-width", d => Math.min(Math.sqrt(d.weight), 8));
+
+    const drag = simulation => {
+      function dragstarted(event) {
+        if (!event.active) simulation.alphaTarget(0.3).restart();
+        event.subject.fx = event.subject.x;
+        event.subject.fy = event.subject.y;
+      }
+      function dragged(event) {
+        event.subject.fx = event.x;
+        event.subject.fy = event.y;
+      }
+      function dragended(event) {
+        if (!event.active) simulation.alphaTarget(0);
+        event.subject.fx = null;
+        event.subject.fy = null;
+      }
+      return d3.drag()
+          .on("start", dragstarted)
+          .on("drag", dragged)
+          .on("end", dragended);
+    };
+
+    const node = g.append("g")
+        .attr("stroke", "#262626")
+        .attr("stroke-width", 1.5)
+      .selectAll("circle")
+      .data(nodes)
+      .join("circle")
+        .attr("r", d => Math.min(Math.max(Math.sqrt(d.value) * 3 + 8, 12), 30))
+        .attr("fill", d => d.color)
+        .call(drag(graphSimulation));
+
+    node.append("title")
+        .text(d => `${d.label}\nShared Groups: ${d.groupCount}\nActivity Score: ${Math.round(d.value)}`);
+
+    const label = g.append("g")
+      .selectAll("text")
+      .data(nodes)
+      .join("text")
+        .attr("class", "text-[10px] fill-gray-300 font-medium pointer-events-none")
+        .attr("dx", 15)
+        .attr("dy", ".35em")
+        .text(d => d.label);
+
+    graphSimulation.on("tick", () => {
+      link
+          .attr("x1", d => d.source.x)
+          .attr("y1", d => d.source.y)
+          .attr("x2", d => d.target.x)
+          .attr("y2", d => d.target.y);
+
+      node
+          .attr("cx", d => d.x)
+          .attr("cy", d => d.y);
+          
+      label
+          .attr("x", d => d.x)
+          .attr("y", d => d.y);
+    });
+  }
+
+  function generateAndRenderRecommendations(currentUserId, nodes, edges) {
+    const listContainer = document.getElementById('recommendedFriendsList');
+    
+    // Find edges connected to current user
+    const userEdges = edges.filter(e => {
+        const sourceId = typeof e.source === 'object' ? e.source.id : e.source;
+        const targetId = typeof e.target === 'object' ? e.target.id : e.target;
+        return sourceId === currentUserId || targetId === currentUserId;
+    });
+    
+    if (userEdges.length === 0) {
+      listContainer.innerHTML = '<div class="text-center text-gray-500 text-sm py-8">Join more groups or interact more to get recommendations!</div>';
+      return;
+    }
+    
+    // Sort edges by weight descending
+    userEdges.sort((a, b) => b.weight - a.weight);
+    
+    // Take top 5
+    const topEdges = userEdges.slice(0, 5);
+    
+    listContainer.innerHTML = topEdges.map(e => {
+      const sourceId = typeof e.source === 'object' ? e.source.id : e.source;
+      const targetId = typeof e.target === 'object' ? e.target.id : e.target;
+      
+      const friendId = sourceId === currentUserId ? targetId : sourceId;
+      const friendNode = nodes.find(n => n.id === friendId);
+      
+      if (!friendNode) return '';
+      
+      const initials = getInitials(friendNode.label);
+      const colorClass = getAvatarColor(friendNode.id);
+      
+      return `
+        <div class="flex items-center gap-3 p-2 hover:bg-neutral-600/50 rounded-lg transition-colors border border-transparent hover:border-neutral-600">
+          <div class="w-10 h-10 ${colorClass} rounded-full flex items-center justify-center text-white text-sm font-medium shrink-0 shadow-inner">
+            ${initials}
+          </div>
+          <div class="flex-1 min-w-0">
+            <p class="text-white text-sm font-medium truncate">${friendNode.label}</p>
+            <p class="text-gray-400 text-xs truncate">Connection Score: ${Math.round(e.weight)}</p>
+          </div>
+          <button class="px-3 py-1 bg-indigo-600/20 text-indigo-400 hover:bg-indigo-600 hover:text-white rounded text-xs font-medium transition-colors" title="Start Chat">
+            Connect
+          </button>
+        </div>
+      `;
+    }).join('');
+  }
+
+  async function getCurrentUserId() {
+    try {
+      const res = await fetch(`${pythonURI}/api/id`, fetchOptions);
+      if (res.ok) {
+        const user = await res.json();
+        return user.id;
+      }
+    } catch (e) {
+      console.warn('Could not fetch current user ID for graph recommendations');
+    }
+    return null;
+  }
+
+  async function loadRelationshipGraph(group) {
+    if (!group || !group.members || group.members.length === 0) {
+      document.getElementById('relationshipGraphEmptyState').textContent = 'No grouping data to display.';
+      return;
+    }
+    
+    try {
+      const membersWithAnalytics = [];
+      const batchSize = 10; // Batch requests to prevent rate limiting
+      
+      for (let i = 0; i < group.members.length; i += batchSize) {
+        const batch = group.members.slice(i, i + batchSize);
+        const batchResults = await Promise.all(batch.map(async (member) => {
+          try {
+            const rawAnalytics = await fetchGroupChatAnalytics(member.id);
+            return { member, analytics: rawAnalytics };
+          } catch (e) {
+             return { member, analytics: null };
+          }
+        }));
+        membersWithAnalytics.push(...batchResults);
+      }
+      
+      const graphData = buildRelationshipGraphData(membersWithAnalytics.filter(m => m.analytics));
+      
+      document.getElementById('relationshipGraphEmptyState').classList.add('hidden');
+      renderRelationshipGraph(graphData.nodes, graphData.edges);
+      
+      const currentUserId = await getCurrentUserId();
+      // If we could determine the current user, generate recommendations specifically for them
+      // Alternatively, just pick the first member if we are debugging/testing
+      const referenceId = currentUserId || group.members[0].id;
+      
+      generateAndRenderRecommendations(referenceId, graphData.nodes, graphData.edges);
+      
+    } catch (err) {
+      console.error('Error loading relationship graph', err);
+      document.getElementById('relationshipGraphEmptyState').textContent = 'Failed to load user connections.';
+    }
+  }
+
   // ---------------------------------------------
   // PAGE INITIALIZATION / ORCHESTRATOR
   // ---------------------------------------------
@@ -573,8 +860,12 @@
         return;
       }
 
-      // Step 8: Load summary stats and member analytics in parallel
-      await Promise.all([loadDashboardSummaryStats(group), loadMemberAnalyticsPage(1)]);
+      // Step 8: Load summary stats, member analytics, and relationship graph in parallel
+      await Promise.all([
+         loadDashboardSummaryStats(group), 
+         loadMemberAnalyticsPage(1),
+         loadRelationshipGraph(group)
+      ]);
 
       // Step 9: Store group data globally for other dashboard components
       window.currentDashboardGroupId = group.id;
diff --git a/_posts/teacher_toolkit/StudentManagement/2025-04-07-Groups.html b/_posts/teacher_toolkit/StudentManagement/2025-04-07-Groups.html
index bdd2b6f9c9..c033180914 100644
--- a/_posts/teacher_toolkit/StudentManagement/2025-04-07-Groups.html
+++ b/_posts/teacher_toolkit/StudentManagement/2025-04-07-Groups.html
@@ -9,7 +9,8 @@
 <div class="min-h-screen bg-neutral-900 py-10">
   <div class="max-w-6xl mx-auto px-4">
     <!-- Subtle Loading Indicator - inline badge style -->
-    <div id="loadingOverlay" class="hidden fixed bottom-4 right-4 z-40 bg-neutral-800/90 backdrop-blur-sm border border-neutral-700 rounded-full px-3 py-1.5 flex items-center gap-2 shadow-md text-xs">
+    <div id="loadingOverlay"
+      class="hidden fixed bottom-4 right-4 z-40 bg-neutral-800/90 backdrop-blur-sm border border-neutral-700 rounded-full px-3 py-1.5 flex items-center gap-2 shadow-md text-xs">
       <div class="loading-spinner"></div>
       <span id="loadingText" class="text-gray-400">Loading...</span>
     </div>
@@ -133,6 +134,21 @@ <h2 class="text-2xl font-semibold text-white mb-6">Groups Management</h2>
         </button>
       </div>
 
+      <!-- Groups List -->
+      <div id="groupsContainer" class="space-y-3 mb-6">
+        <!-- Groups will be injected here -->
+      </div>
+
+      <!-- Empty State -->
+      <div id="emptyState" class="hidden text-center py-12 text-gray-400 mb-6">
+        <svg class="mx-auto h-12 w-12 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4">
+          </path>
+        </svg>
+        <p class="text-lg">No groups found</p>
+      </div>
+
       <!-- Add Group Section -->
       <div id="addGroupSection" class="mb-6 bg-neutral-700 border-2 border-dashed border-neutral-600 rounded-lg p-6">
         <div id="addGroupCollapsed" class="cursor-pointer" onclick="toggleAddGroup()">
@@ -200,29 +216,33 @@ <h3 class="text-lg font-semibold text-white">Add New Group</h3>
         </div>
       </div>
 
-    <div class="mb-6 bg-gradient-to-r from-indigo-900/30 to-purple-900/30 border-2 border-indigo-500/50 rounded-lg p-6">
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-3">
-          <div class="w-12 h-12 bg-indigo-600 rounded-lg flex items-center justify-center">
-            <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
-            </svg>
-          </div>
-          <div>
-            <h3 class="text-xl font-semibold text-white">AI-Powered Group Formation</h3>
-            <p class="text-sm text-gray-400">Create balanced groups based on student personas and team compatibility</p>
+      <div
+        class="mb-6 bg-gradient-to-r from-indigo-900/30 to-purple-900/30 border-2 border-indigo-500/50 rounded-lg p-6">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <div class="w-12 h-12 bg-indigo-600 rounded-lg flex items-center justify-center">
+              <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z">
+                </path>
+              </svg>
+            </div>
+            <div>
+              <h3 class="text-xl font-semibold text-white">AI-Powered Group Formation</h3>
+              <p class="text-sm text-gray-400">Create balanced groups based on student personas and team compatibility
+              </p>
+            </div>
           </div>
+          <button onclick="openSmartGroupFormation()"
+            class="px-6 py-3 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors font-semibold flex items-center gap-2">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z">
+              </path>
+            </svg>
+            Form Smart Groups
+          </button>
         </div>
-        <button 
-          onclick="openSmartGroupFormation()"
-          class="px-6 py-3 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors font-semibold flex items-center gap-2">
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-          </svg>
-          Form Smart Groups
-        </button>
       </div>
-    </div>
 
       <!-- Groups List -->
       <div id="groupsContainer" class="space-y-3">
@@ -264,11 +284,9 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
 
     <!-- Tabs -->
     <div class="flex items-center gap-2 px-4 py-2 border-b border-neutral-700">
-      <button id="chatTabButton"
-        class="px-3 py-1.5 text-sm rounded-lg bg-indigo-600 text-white"
+      <button id="chatTabButton" class="px-3 py-1.5 text-sm rounded-lg bg-indigo-600 text-white"
         onclick="showChatTab()">Chat</button>
-      <button id="filesTabButton"
-        class="px-3 py-1.5 text-sm rounded-lg text-gray-300 hover:bg-neutral-700"
+      <button id="filesTabButton" class="px-3 py-1.5 text-sm rounded-lg text-gray-300 hover:bg-neutral-700"
         onclick="showFilesTab()">Shared Files</button>
     </div>
 
@@ -283,17 +301,20 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
         <!-- Message Input Area -->
         <div class="p-4 border-t border-neutral-700 relative">
           <!-- Slash Command Popup -->
-          <div id="slashCommandPopup" class="hidden absolute bottom-full left-4 right-4 mb-2 bg-neutral-700 border border-neutral-600 rounded-lg shadow-lg overflow-hidden">
+          <div id="slashCommandPopup"
+            class="hidden absolute bottom-full left-4 right-4 mb-2 bg-neutral-700 border border-neutral-600 rounded-lg shadow-lg overflow-hidden">
             <div class="p-2 text-xs text-gray-400 border-b border-neutral-600">Commands</div>
             <div id="slashCommandList">
-              <div class="slash-command-item px-3 py-2 hover:bg-neutral-600 cursor-pointer flex items-center gap-3" onclick="selectSlashCommand('/calendar')">
+              <div class="slash-command-item px-3 py-2 hover:bg-neutral-600 cursor-pointer flex items-center gap-3"
+                onclick="selectSlashCommand('/calendar')">
                 <span class="text-lg">📅</span>
                 <div>
                   <div class="text-white text-sm font-medium">/calendar</div>
-                  <div class="text-gray-400 text-xs">Add event: /calendar YYYY-MM-DD [HH:MM] Title | optional description</div>
+                  <div class="text-gray-400 text-xs">Add event: create a task in the calendar</div>
                 </div>
               </div>
-              <div class="slash-command-item px-3 py-2 hover:bg-neutral-600 cursor-pointer flex items-center gap-3" onclick="selectSlashCommand('/adduser')">
+              <div class="slash-command-item px-3 py-2 hover:bg-neutral-600 cursor-pointer flex items-center gap-3"
+                onclick="selectSlashCommand('/adduser')">
                 <span class="text-lg">👤</span>
                 <div>
                   <div class="text-white text-sm font-medium">/adduser</div>
@@ -305,29 +326,26 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
 
           <div id="imageMessageBox" class="mt-4 mb-4"></div>
           <div class="flex items-center gap-2">
-            <input
-              type="text"
-              id="chatInput"
-              placeholder="Message #group-name"
+            <input type="text" id="chatInput" placeholder="Message #group-name"
               class="flex-1 px-4 py-3 bg-neutral-700 text-white placeholder-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-sm"
-              onkeydown="handleChatInputKeydown(event)"
-              oninput="handleChatInputChange(event)"
-            />
-            <input id="chatImageInput" type="file" accept="image/*" class="hidden" onchange="handleChatImageSelected(event)" />
+              onkeydown="handleChatInputKeydown(event)" oninput="handleChatInputChange(event)" />
+            <input id="chatImageInput" type="file" accept="image/*" class="hidden"
+              onchange="handleChatImageSelected(event)" />
             <button
               class="w-12 h-12 flex items-center justify-center bg-neutral-700 hover:bg-neutral-600 text-white rounded-lg transition-colors"
-              title="Attach image"
-              onclick="triggerChatImagePicker()">
+              title="Attach image" onclick="triggerChatImagePicker()">
               <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828L18 9a4 4 0 10-5.657-5.657L6.343 9.343a6 6 0 108.485 8.485L20 12"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828L18 9a4 4 0 10-5.657-5.657L6.343 9.343a6 6 0 108.485 8.485L20 12">
+                </path>
               </svg>
             </button>
             <button
               class="w-12 h-12 flex items-center justify-center bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors"
-              title="Send message"
-              onclick="sendChatMessage()">
+              title="Send message" onclick="sendChatMessage()">
               <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
               </svg>
             </button>
           </div>
@@ -343,8 +361,7 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
           <div class="flex items-center gap-2">
             <input id="sharedFileInput" type="file"
               class="flex-1 px-3 py-2 bg-neutral-700 text-white placeholder-gray-500 rounded-lg border border-neutral-600" />
-            <button
-              class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors"
+            <button class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors"
               onclick="uploadSharedFile()">Upload</button>
           </div>
           <p class="text-xs text-gray-400 mt-2">Uploads are shared with all group members.</p>
@@ -353,511 +370,534 @@ <h3 id="chatModalTitle" class="text-xl font-semibold text-white">Group Chat</h3>
     </div>
   </div>
 </div>
-  <!-- Smart Group Formation Modal -->
-  <div id="smartGroupModal" class="hidden fixed inset-0 z-50 flex items-center justify-center">
-    <!-- Backdrop -->
-    <div class="absolute inset-0 bg-black bg-opacity-75" onclick="closeSmartGroupModal()"></div>
-  
-    <!-- Modal Content -->
-    <div class="relative bg-neutral-800 rounded-lg shadow-2xl w-full max-w-3xl mx-4 max-h-[90vh] overflow-y-auto">
-      <!-- Header -->
-      <div class="flex items-center justify-between p-6 border-b border-neutral-700">
-        <div>
-          <h3 class="text-2xl font-semibold text-white">AI-Powered Group Formation</h3>
-          <p class="text-sm text-gray-400 mt-1">Create balanced groups using persona compatibility</p>
+<!-- Smart Group Formation Modal -->
+<div id="smartGroupModal" class="hidden fixed inset-0 z-50 flex items-center justify-center">
+  <!-- Backdrop -->
+  <div class="absolute inset-0 bg-black bg-opacity-75" onclick="closeSmartGroupModal()"></div>
+
+  <!-- Modal Content -->
+  <div class="relative bg-neutral-800 rounded-lg shadow-2xl w-full max-w-3xl mx-4 max-h-[90vh] overflow-y-auto">
+    <!-- Header -->
+    <div class="flex items-center justify-between p-6 border-b border-neutral-700">
+      <div>
+        <h3 class="text-2xl font-semibold text-white">AI-Powered Group Formation</h3>
+        <p class="text-sm text-gray-400 mt-1">Create balanced groups using persona compatibility</p>
+      </div>
+      <button onclick="closeSmartGroupModal()" class="text-gray-400 hover:text-white transition-colors">
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </button>
+    </div>
+
+    <!-- Form -->
+    <div class="p-6 space-y-6">
+      <!-- Period Selection -->
+      <div>
+        <label class="block text-sm font-medium text-gray-200 mb-2">Select Period</label>
+        <select id="smartGroupPeriod"
+          class="w-full px-4 py-3 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
+          <option value="">Choose a period...</option>
+          <option value="1">Period 1</option>
+          <option value="2">Period 2</option>
+          <option value="3">Period 3</option>
+          <option value="4">Period 4</option>
+          <option value="5">Period 5</option>
+        </select>
+      </div>
+
+      <!-- Class Selection -->
+      <div>
+        <label class="block text-sm font-medium text-gray-200 mb-2">Select Class</label>
+        <select id="smartGroupClass"
+          class="w-full px-4 py-3 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
+          <option value="">Choose a class...</option>
+          <option value="CSSE">CSSE</option>
+          <option value="CSP">CSP</option>
+          <option value="CSA">CSA</option>
+        </select>
+      </div>
+
+      <!-- Group Size -->
+      <div>
+        <label class="block text-sm font-medium text-gray-200 mb-2">Group Size</label>
+        <input type="number" id="smartGroupSize" value="4" min="2" max="10"
+          class="w-full px-4 py-3 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+        <p class="text-xs text-gray-400 mt-1">Recommended: 3-5 students per group</p>
+      </div>
+
+      <!-- Group Name Prefix -->
+      <div>
+        <label class="block text-sm font-medium text-gray-200 mb-2">Group Name Prefix (Optional)</label>
+        <input type="text" id="smartGroupPrefix" placeholder="e.g., 'Team', 'Squad', 'Group'"
+          class="w-full px-4 py-3 bg-neutral-700 text-white placeholder-gray-500 border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+        <p class="text-xs text-gray-400 mt-1">Groups will be named like "Team A", "Team B", etc.</p>
+      </div>
+
+      <!-- Prior Experiences Toggle -->
+      <div class="bg-neutral-700/60 border border-neutral-600 rounded-lg p-4">
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <label class="block text-sm font-semibold text-gray-100">
+              Would you like to incorporate your prior experiences?
+            </label>
+            <p class="text-xs text-gray-400 mt-1">
+              If yes, we’ll use your past group outcomes (ratings + persona mix) to bias future team formation.
+            </p>
+          </div>
+
+          <label class="inline-flex items-center cursor-pointer select-none">
+            <input id="usePriorExpToggle" type="checkbox" class="sr-only" onchange="togglePriorExperience()" />
+            <div class="w-11 h-6 bg-neutral-600 rounded-full relative transition-colors">
+              <div id="usePriorExpKnob"
+                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"></div>
+            </div>
+          </label>
+        </div>
+
+        <!-- Prior Experience Form (hidden until toggle on) -->
+        <div id="priorExperienceForm" class="hidden mt-4 space-y-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label class="block text-sm font-medium text-gray-200 mb-2">How many members were in your previous
+                group?</label>
+              <input id="priorGroupSize" type="number" min="2" max="10" value="4"
+                class="w-full px-4 py-2 bg-neutral-800 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+            </div>
+
+            <div class="grid grid-cols-2 gap-3">
+              <div>
+                <label class="block text-sm font-medium text-gray-200 mb-2">Student Rating (1–5)</label>
+                <input id="priorStudentRating" type="number" min="1" max="5" value="4"
+                  class="w-full px-4 py-2 bg-neutral-800 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-200 mb-2">Teacher Rating (1–5)</label>
+                <input id="priorTeacherRating" type="number" min="1" max="5" value="4"
+                  class="w-full px-4 py-2 bg-neutral-800 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-200 mb-2">
+              Personas of members in that group (select all that applied)
+            </label>
+            <div id="priorPersonaChoices" class="grid grid-cols-2 md:grid-cols-3 gap-2"></div>
+            <p class="text-xs text-gray-400 mt-2">
+              Tip: choose the persona mix that best matches the group you’re describing.
+            </p>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-200 mb-2">One-line note (optional)</label>
+            <input id="priorNote" type="text" maxlength="160"
+              placeholder="e.g., Great role balance, clear communication"
+              class="w-full px-4 py-2 bg-neutral-800 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+          </div>
+
+          <div class="flex items-center justify-between">
+            <p class="text-xs text-gray-400">
+              We’ll also include any saved group feedback already stored locally on this device.
+            </p>
+            <button type="button"
+              class="px-3 py-2 bg-neutral-800 hover:bg-neutral-700 text-gray-200 rounded-lg text-xs border border-neutral-600"
+              onclick="previewPriorFeedbackCount()">
+              Preview stored feedback
+            </button>
+          </div>
+
+          <div id="priorFeedbackStatus" class="text-xs text-gray-300"></div>
         </div>
-        <button onclick="closeSmartGroupModal()" class="text-gray-400 hover:text-white transition-colors">
-          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+      </div>
+
+      <!-- Action Buttons -->
+      <div class="flex gap-3 justify-end pt-4 border-t border-neutral-700">
+        <button onclick="closeSmartGroupModal()"
+          class="px-6 py-3 bg-neutral-700 hover:bg-neutral-600 text-white rounded-lg transition-colors">
+          Cancel
+        </button>
+        <button onclick="generateSmartGroups()"
+          class="px-6 py-3 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors font-semibold flex items-center gap-2">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
           </svg>
+          Generate Groups
         </button>
       </div>
-  
-      <!-- Form -->
-      <div class="p-6 space-y-6">
-        <!-- Period Selection -->
-        <div>
-          <label class="block text-sm font-medium text-gray-200 mb-2">Select Period</label>
-          <select id="smartGroupPeriod" 
-            class="w-full px-4 py-3 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
-            <option value="">Choose a period...</option>
-            <option value="1">Period 1</option>
-            <option value="2">Period 2</option>
-            <option value="3">Period 3</option>
-            <option value="4">Period 4</option>
-            <option value="5">Period 5</option>
-          </select>
-        </div>
-  
-        <!-- Class Selection -->
+    </div>
+
+    <!-- Results Section (hidden initially) -->
+    <div id="smartGroupResults" class="hidden border-t border-neutral-700 bg-neutral-900/50">
+      <!-- Staging toolbar -->
+      <div class="flex items-center justify-between px-6 pt-5 pb-3">
         <div>
-          <label class="block text-sm font-medium text-gray-200 mb-2">Select Class</label>
-          <select id="smartGroupClass"
-            class="w-full px-4 py-3 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
-            <option value="">Choose a class...</option>
-            <option value="CSSE">CSSE</option>
-            <option value="CSP">CSP</option>
-            <option value="CSA">CSA</option>
-          </select>
+          <h4 class="text-lg font-semibold text-white">Staging Area</h4>
+          <p class="text-xs text-gray-400 mt-0.5">Lock groups you're happy with · Drag students between groups ·
+            Regenerate the rest</p>
         </div>
-  
-        <!-- Group Size -->
-        <div>
-          <label class="block text-sm font-medium text-gray-200 mb-2">Group Size</label>
-          <input type="number" id="smartGroupSize" value="4" min="2" max="10"
-            class="w-full px-4 py-3 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
-          <p class="text-xs text-gray-400 mt-1">Recommended: 3-5 students per group</p>
+        <div class="flex gap-2">
+          <button onclick="regenerateUnlocked()"
+            class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm rounded-lg transition-colors font-medium flex items-center gap-2">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
+              </path>
+            </svg>
+            Regenerate Unlocked
+          </button>
+          <button onclick="saveSmartGroups()"
+            class="px-4 py-2 bg-green-600 hover:bg-green-500 text-white text-sm rounded-lg transition-colors font-semibold">
+            Save All Groups
+          </button>
+          <button onclick="closeSmartGroupModal()"
+            class="px-4 py-2 bg-neutral-700 hover:bg-neutral-600 text-white text-sm rounded-lg transition-colors">
+            Discard
+          </button>
         </div>
-  
-        <!-- Group Name Prefix -->
-        <div>
-          <label class="block text-sm font-medium text-gray-200 mb-2">Group Name Prefix (Optional)</label>
-          <input type="text" id="smartGroupPrefix" placeholder="e.g., 'Team', 'Squad', 'Group'"
-            class="w-full px-4 py-3 bg-neutral-700 text-white placeholder-gray-500 border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
-          <p class="text-xs text-gray-400 mt-1">Groups will be named like "Team A", "Team B", etc.</p>
+      </div>
+
+      <!-- Method badge -->
+      <div id="stagingMethodBadge" class="px-6 pb-3"></div>
+
+      <!-- Groups grid -->
+      <div id="smartGroupResultsContent" class="px-6 pb-6 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+        <!-- Group cards injected here -->
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Feedback Modal -->
+<div id="feedbackModal" class="hidden fixed inset-0 z-50 flex items-center justify-center">
+      <!-- Backdrop -->
+      <div class="absolute inset-0 bg-black bg-opacity-75" onclick="closeFeedbackModal()"></div>
+
+      <!-- Modal Content -->
+      <div class="relative bg-neutral-800 rounded-lg shadow-2xl w-full max-w-2xl mx-4 flex flex-col">
+        <!-- Header -->
+        <div class="flex items-center justify-between p-4 border-b border-neutral-700">
+          <div>
+            <h3 id="feedbackModalTitle" class="text-xl font-semibold text-white">Group Feedback</h3>
+            <p id="feedbackModalSubtitle" class="text-sm text-gray-400">Period · Class · Members</p>
+          </div>
+          <button type="button" onclick="closeFeedbackModal()" class="text-gray-400 hover:text-white transition-colors">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
         </div>
-  
-        <!-- Prior Experiences Toggle -->
-        <div class="bg-neutral-700/60 border border-neutral-600 rounded-lg p-4">
-          <div class="flex items-start justify-between gap-4">
+
+        <!-- Body -->
+        <div class="p-4 space-y-4">
+          <!-- Course Category (CSA/CSP/CSSE) -->
+          <div>
+            <label class="block text-sm font-medium text-gray-200 mb-2">Course Category</label>
+            <select id="fbCourse"
+              class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
+              <option value="CSA">CSA</option>
+              <option value="CSP">CSP</option>
+              <option value="CSSE">CSSE</option>
+            </select>
+          </div>
+
+          <!-- Student feedback -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
-              <label class="block text-sm font-semibold text-gray-100">
-                Would you like to incorporate your prior experiences?
-              </label>
-              <p class="text-xs text-gray-400 mt-1">
-                If yes, we’ll use your past group outcomes (ratings + persona mix) to bias future team formation.
-              </p>
+              <label class="block text-sm font-medium text-gray-200 mb-2">Student Rating (1–5)</label>
+              <input id="fbStudentRating" type="number" min="1" max="5" value="4"
+                class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+              <p class="text-xs text-gray-400 mt-1">How well did the group work together?</p>
             </div>
 
-            <label class="inline-flex items-center cursor-pointer select-none">
-              <input id="usePriorExpToggle" type="checkbox" class="sr-only" onchange="togglePriorExperience()" />
-              <div class="w-11 h-6 bg-neutral-600 rounded-full relative transition-colors">
-                <div id="usePriorExpKnob"
-                    class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"></div>
-              </div>
-            </label>
+            <div>
+              <label class="block text-sm font-medium text-gray-200 mb-2">Teacher Rating (1–5)</label>
+              <input id="fbTeacherRating" type="number" min="1" max="5" value="4"
+                class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+              <p class="text-xs text-gray-400 mt-1">Teacher assessment of effectiveness.</p>
+            </div>
           </div>
 
-          <!-- Prior Experience Form (hidden until toggle on) -->
-          <div id="priorExperienceForm" class="hidden mt-4 space-y-4">
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label class="block text-sm font-medium text-gray-200 mb-2">How many members were in your previous group?</label>
-                <input id="priorGroupSize" type="number" min="2" max="10" value="4"
-                  class="w-full px-4 py-2 bg-neutral-800 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
-              </div>
+          <!-- One-line explanation -->
+          <div>
+            <label class="block text-sm font-medium text-gray-200 mb-2">One-line explanation</label>
+            <input id="fbNote" type="text" maxlength="160" placeholder="e.g., Clear roles + everyone contributed"
+              class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+          </div>
 
-              <div class="grid grid-cols-2 gap-3">
-                <div>
-                  <label class="block text-sm font-medium text-gray-200 mb-2">Student Rating (1–5)</label>
-                  <input id="priorStudentRating" type="number" min="1" max="5" value="4"
-                    class="w-full px-4 py-2 bg-neutral-800 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
-                </div>
-                <div>
-                  <label class="block text-sm font-medium text-gray-200 mb-2">Teacher Rating (1–5)</label>
-                  <input id="priorTeacherRating" type="number" min="1" max="5" value="4"
-                    class="w-full px-4 py-2 bg-neutral-800 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
-                </div>
-              </div>
-            </div>
+          <!-- Status -->
+          <div id="fbStatus" class="text-sm text-gray-300"></div>
+        </div>
+
+        <!-- Footer -->
+        <div class="flex items-center justify-end gap-2 p-4 border-t border-neutral-700">
+          <button type="button" onclick="closeFeedbackModal()"
+            class="px-4 py-2 bg-neutral-700 hover:bg-neutral-600 text-white rounded-lg transition-colors">
+            Cancel
+          </button>
+          <button type="button" onclick="submitGroupFeedback()"
+            class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors">
+            Submit Feedback
+          </button>
+        </div>
+      </div>
+    </div>
+
+
+
+    <!-- Calendar Event Modal -->
+    <div id="calendarEventModal" class="hidden fixed inset-0 flex items-center justify-center" style="z-index: 60;">
+      <!-- Backdrop -->
+      <div class="absolute inset-0 bg-black bg-opacity-75" onclick="calendarModalController.close()"></div>
+
+      <!-- Modal Content -->
+      <div class="relative bg-neutral-800 rounded-lg shadow-2xl w-full max-w-md mx-4 flex flex-col">
+        <!-- Header -->
+        <div class="flex items-center justify-between p-4 border-b border-neutral-700">
+          <h3 class="text-xl font-semibold text-white">Add Calendar Event</h3>
+          <button onclick="calendarModalController.close()" class="text-gray-400 hover:text-white transition-colors">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+
+        <!-- Body -->
+        <div class="p-4 space-y-4">
+          <!-- Linked Group Indicator -->
+          <div id="calEventGroupContainer" class="hidden mb-4 p-3 bg-indigo-900/30 border border-indigo-500/30 rounded-lg flex items-center gap-2">
+            <svg class="w-5 h-5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0z"/>
+            </svg>
+            <span class="text-sm text-indigo-200">Linking to group: <strong id="calEventGroupName" class="text-white"></strong></span>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-200 mb-2">Title</label>
+            <input id="calEventTitle" type="text" placeholder="Event Title"
+              class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+          </div>
 
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
-              <label class="block text-sm font-medium text-gray-200 mb-2">
-                Personas of members in that group (select all that applied)
-              </label>
-              <div id="priorPersonaChoices" class="grid grid-cols-2 md:grid-cols-3 gap-2"></div>
-              <p class="text-xs text-gray-400 mt-2">
-                Tip: choose the persona mix that best matches the group you’re describing.
-              </p>
+              <label class="block text-sm font-medium text-gray-200 mb-2">Date</label>
+              <input id="calEventDate" type="date"
+                class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
             </div>
-
             <div>
-              <label class="block text-sm font-medium text-gray-200 mb-2">One-line note (optional)</label>
-              <input id="priorNote" type="text" maxlength="160"
-                placeholder="e.g., Great role balance, clear communication"
-                class="w-full px-4 py-2 bg-neutral-800 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+              <label class="block text-sm font-medium text-gray-200 mb-2">Period</label>
+              <input id="calEventPeriod" type="text" placeholder="e.g. CSA"
+                class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
             </div>
+          </div>
 
-            <div class="flex items-center justify-between">
-              <p class="text-xs text-gray-400">
-                We’ll also include any saved group feedback already stored locally on this device.
-              </p>
-              <button type="button"
-                class="px-3 py-2 bg-neutral-800 hover:bg-neutral-700 text-gray-200 rounded-lg text-xs border border-neutral-600"
-                onclick="previewPriorFeedbackCount()">
-                Preview stored feedback
-              </button>
-            </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-200 mb-2">Description</label>
+            <textarea id="calEventDesc" rows="3" placeholder="Optional description..."
+              class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
+          </div>
 
-            <div id="priorFeedbackStatus" class="text-xs text-gray-300"></div>
+          <!-- Priority -->
+          <div>
+            <label class="block text-sm font-medium text-gray-200 mb-2">Priority</label>
+            <select id="calEventPriority"
+              class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
+              <option value="P2" selected>P2 (Normal)</option>
+              <option value="P0">P0 (Highest)</option>
+              <option value="P1">P1 (High)</option>
+              <option value="P3">P3 (Low)</option>
+            </select>
           </div>
+
+          <div id="calEventStatus" class="text-sm mt-2"></div>
         </div>
 
-        <!-- Action Buttons -->
-        <div class="flex gap-3 justify-end pt-4 border-t border-neutral-700">
-          <button onclick="closeSmartGroupModal()"
-            class="px-6 py-3 bg-neutral-700 hover:bg-neutral-600 text-white rounded-lg transition-colors">
+        <!-- Footer -->
+        <div class="flex items-center justify-end gap-2 p-4 border-t border-neutral-700">
+          <button onclick="calendarModalController.close()"
+            class="px-4 py-2 bg-neutral-700 hover:bg-neutral-600 text-white rounded-lg transition-colors">
             Cancel
           </button>
-          <button onclick="generateSmartGroups()"
-            class="px-6 py-3 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors font-semibold flex items-center gap-2">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-            </svg>
-            Generate Groups
+          <button id="calEventSubmitBtn" onclick="calendarModalController.submit()"
+            class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors font-semibold flex items-center">
+            Create Event
           </button>
         </div>
       </div>
-  
-<!-- Results Section (hidden initially) -->
-<div id="smartGroupResults" class="hidden border-t border-neutral-700 bg-neutral-900/50">
-  <!-- Staging toolbar -->
-  <div class="flex items-center justify-between px-6 pt-5 pb-3">
-    <div>
-      <h4 class="text-lg font-semibold text-white">Staging Area</h4>
-      <p class="text-xs text-gray-400 mt-0.5">Lock groups you're happy with · Drag students between groups · Regenerate the rest</p>
-    </div>
-    <div class="flex gap-2">
-      <button onclick="regenerateUnlocked()"
-        class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm rounded-lg transition-colors font-medium flex items-center gap-2">
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
-        </svg>
-        Regenerate Unlocked
-      </button>
-      <button onclick="saveSmartGroups()"
-        class="px-4 py-2 bg-green-600 hover:bg-green-500 text-white text-sm rounded-lg transition-colors font-semibold">
-        Save All Groups
-      </button>
-      <button onclick="closeSmartGroupModal()"
-        class="px-4 py-2 bg-neutral-700 hover:bg-neutral-600 text-white text-sm rounded-lg transition-colors">
-        Discard
-      </button>
     </div>
-  </div>
 
-  <!-- Method badge -->
-  <div id="stagingMethodBadge" class="px-6 pb-3"></div>
+    <!-- Chat JS moved to module script below -->
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.1/sockjs.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
+
+    <script type="module">
+      /* ================================
+         CONFIG
+      ================================ */
+      import { javaURI, pythonURI, fetchOptions } from '{{site.baseurl}}/assets/js/api/config.js';
+
+      /* ================================
+         STATE
+      ================================ */
+      let allGroups = [];
+      let peopleCache = [];  // Cache people to avoid repeated API calls
+      let activePeriods = [];
+      let activeClasses = [];
+      let loadingCount = 0;  // Track concurrent loading operations
+      let isAdmin = false;   // Track if current user is an admin
+      let selectedUsersForGroup = {}; // Track multi-select members per group
+      let collapsedGroups = {}; // Track collapsed/expanded state per group id
+      let isSearchMode = false;  // Track if we're in search mode to disable collapse
+
+      // Chat state
+      let activeChatGroupId = null;
+      let activeChatGroupName = '';
+      let stompClient = null;
+      let currentUser = null;
+      let currentUserDisplayName = 'You';
+      let pendingChatImageBase64 = null;
+      let pendingChatImageMime = 'image/png';
+      let renderedChatMessageKeys = new Set();
+
+      /* ================================
+         LOADING HELPERS
+      ================================ */
+      function showLoading(message = "Loading...") {
+        loadingCount++;
+        document.getElementById("loadingText").textContent = message;
+        document.getElementById("loadingOverlay").classList.remove("hidden");
+      }
 
-  <!-- Groups grid -->
-  <div id="smartGroupResultsContent" class="px-6 pb-6 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
-    <!-- Group cards injected here -->
-  </div>
-</div>  
+      function hideLoading() {
+        loadingCount = Math.max(0, loadingCount - 1);
+        if (loadingCount === 0) {
+          document.getElementById("loadingOverlay").classList.add("hidden");
+        }
+      }
 
-<!-- Feedback Modal -->
-<div id="feedbackModal" class="hidden fixed inset-0 z-50 flex items-center justify-center">
-  <!-- Backdrop -->
-  <div class="absolute inset-0 bg-black bg-opacity-75" onclick="closeFeedbackModal()"></div>
+      /* ================================
+         INIT
+      ================================ */
+      document.addEventListener("DOMContentLoaded", () => {
+        initializeData();
+        initializeChatUser();
+      });
 
-  <!-- Modal Content -->
-  <div class="relative bg-neutral-800 rounded-lg shadow-2xl w-full max-w-2xl mx-4 flex flex-col">
-    <!-- Header -->
-    <div class="flex items-center justify-between p-4 border-b border-neutral-700">
-      <div>
-        <h3 id="feedbackModalTitle" class="text-xl font-semibold text-white">Group Feedback</h3>
-        <p id="feedbackModalSubtitle" class="text-sm text-gray-400">Period · Class · Members</p>
-      </div>
-      <button type="button" onclick="closeFeedbackModal()" class="text-gray-400 hover:text-white transition-colors">
-        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-        </svg>
-      </button>
-    </div>
+      // Search groups using API with chaining for better performance
+      window.searchGroups = function () {
+        const searchTerm = document.getElementById("searchInput").value.trim();
+        isSearchMode = !!searchTerm;
+        const url = searchTerm
+          ? `${javaURI}/api/groups/search?name=${encodeURIComponent(searchTerm)}`
+          : `${javaURI}/api/groups`;
+
+        showLoading("Searching...");
+
+        fetch(url, fetchOptions)
+          .then(res => res.ok ? res.json() : Promise.reject(new Error("Search failed")))
+          .then(data => {
+            allGroups = data;
+            renderGroups();
+          })
+          .catch(err => console.error("Search failed", err))
+          .finally(() => hideLoading());
+      }
 
-    <!-- Body -->
-    <div class="p-4 space-y-4">
-      <!-- Course Category (CSA/CSP/CSSE) -->
-      <div>
-        <label class="block text-sm font-medium text-gray-200 mb-2">Course Category</label>
-        <select id="fbCourse"
-          class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
-          <option value="CSA">CSA</option>
-          <option value="CSP">CSP</option>
-          <option value="CSSE">CSSE</option>
-        </select>
-      </div>
+      // Load groups, people, and admin status in parallel on page load with chaining
+      function initializeData() {
+        showLoading("Loading groups...");
+
+        Promise.all([
+          fetch(`${javaURI}/api/groups`, fetchOptions)
+            .then(res => res.ok ? res.json() : Promise.reject(new Error("Failed to load groups"))),
+          fetch(`${javaURI}/api/people`, fetchOptions)
+            .then(res => res.ok ? res.json() : Promise.reject(new Error("Failed to load people"))),
+          fetch(`${pythonURI}/api/id`, fetchOptions)
+            .then(res => res.ok ? res.json() : null)
+            .catch(() => null)  // Don't fail if user check fails
+        ])
+          .then(([groups, people, user]) => {
+            allGroups = groups;
+            peopleCache = people;
+            currentUser = user; // Set global currentUser
+            isAdmin = user && user.role === "Admin";
+            renderGroups();
+          })
+          .catch(err => console.error("Failed to initialize data", err))
+          .finally(() => hideLoading());
+      }
 
-      <!-- Student feedback -->
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div>
-          <label class="block text-sm font-medium text-gray-200 mb-2">Student Rating (1–5)</label>
-          <input id="fbStudentRating" type="number" min="1" max="5" value="4"
-            class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
-          <p class="text-xs text-gray-400 mt-1">How well did the group work together?</p>
-        </div>
+      window.parseUIDs = function (raw) {
+        return raw
+          .split("\n")
+          .map(u => u.trim())
+          .filter(Boolean);
+      }
 
-        <div>
-          <label class="block text-sm font-medium text-gray-200 mb-2">Teacher Rating (1–5)</label>
-          <input id="fbTeacherRating" type="number" min="1" max="5" value="4"
-            class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
-          <p class="text-xs text-gray-400 mt-1">Teacher assessment of effectiveness.</p>
-        </div>
-      </div>
+      // Synchronous lookup from cache - no API call needed
+      window.getPersonIdFromUID = function (uid) {
+        const match = peopleCache.find(p => p.uid === uid);
+        if (!match) {
+          throw new Error(`UID not found: ${uid}`);
+        }
+        return match.id;
+      };
 
-      <!-- One-line explanation -->
-      <div>
-        <label class="block text-sm font-medium text-gray-200 mb-2">One-line explanation</label>
-        <input id="fbNote" type="text" maxlength="160"
-          placeholder="e.g., Clear roles + everyone contributed"
-          class="w-full px-4 py-2 bg-neutral-700 text-white border border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
-      </div>
+      // Get person object from cache by ID
+      window.getPersonById = function (personId) {
+        return peopleCache.find(p => p.id === personId);
+      };
 
-      <!-- Status -->
-      <div id="fbStatus" class="text-sm text-gray-300"></div>
-    </div>
+      // Helpers for multi-select state per group
+      function getSelectedUsers(groupId) {
+        return selectedUsersForGroup[groupId] || [];
+      }
 
-    <!-- Footer -->
-    <div class="flex items-center justify-end gap-2 p-4 border-t border-neutral-700">
-      <button type="button" onclick="closeFeedbackModal()"
-        class="px-4 py-2 bg-neutral-700 hover:bg-neutral-600 text-white rounded-lg transition-colors">
-        Cancel
-      </button>
-      <button type="button" onclick="submitGroupFeedback()"
-        class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors">
-        Submit Feedback
-      </button>
-    </div>
-  </div>
-</div>
+      function setSelectedUsers(groupId, users) {
+        selectedUsersForGroup[groupId] = users;
+        updateAddSelectedButton(groupId);
+        updateSearchResultsSelection(groupId);
+      }
+
+      // Search for users by name or GitHub ID with chaining
+      window.searchPeopleForGroup = function (groupId) {
+        const searchInput = document.getElementById(`member-search-${groupId}`);
+        const query = searchInput.value.trim();
+
+        if (!query) {
+          alert("Please enter a search term");
+          return;
+        }
+
+        showLoading("Searching users...");
 
+        fetch(`${javaURI}/api/people/search?query=${encodeURIComponent(query)}`, fetchOptions)
+          .then(res => res.ok ? res.json() : Promise.reject(new Error("Search failed")))
+          .then(results => displaySearchResults(groupId, results))
+          .catch(err => {
+            console.error("User search failed", err);
+            alert("Failed to search users");
+          })
+          .finally(() => hideLoading());
+      }
 
+      // Display search results in dropdown
+      window.displaySearchResults = function (groupId, results) {
+        const dropdown = document.getElementById(`search-results-${groupId}`);
+        const selected = getSelectedUsers(groupId).map(u => u.id);
 
-<!-- Chat JS moved to module script below -->
-
-<style>
-  .loading-spinner {
-    width: 12px;
-    height: 12px;
-    border: 1.5px solid #6b7280;
-    border-top-color: #818cf8;
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-  }
-  @keyframes spin { to { transform: rotate(360deg); } }
-
-  /* Chat Modal Scrollbar Styling */
-  #chatMessages::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  #chatMessages::-webkit-scrollbar-track {
-    background: #262626;
-    border-radius: 4px;
-  }
-
-  #chatMessages::-webkit-scrollbar-thumb {
-    background: #525252;
-    border-radius: 4px;
-  }
-
-  #chatMessages::-webkit-scrollbar-thumb:hover {
-    background: #737373;
-  }
-
-  /* Prevent body scroll when modal is open */
-  body.modal-open {
-    overflow: hidden;
-  }
-
-  /* Slash command input styling */
-  #chatInput.has-command {
-    background: linear-gradient(90deg, rgba(99, 102, 241, 0.2) 0%, rgba(64, 64, 64, 1) 30%);
-    border: 1px solid rgba(99, 102, 241, 0.5);
-  }
-
-  /* Slash command popup animation */
-  #slashCommandPopup {
-    animation: slideUp 0.15s ease-out;
-  }
-
-  @keyframes slideUp {
-    from {
-      opacity: 0;
-      transform: translateY(8px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-  .staging-group.drag-over {
-    border-color: #6366f1 !important;
-    background-color: rgba(99, 102, 241, 0.08) !important;
-  }
-
-  .staging-member:active {
-    transform: scale(0.97);
-  }
-</style>
-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.1/sockjs.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
-
-<script type="module">
-/* ================================
-   CONFIG
-================================ */
-import { javaURI, pythonURI, fetchOptions } from '{{site.baseurl}}/assets/js/api/config.js';
-
-/* ================================
-   STATE
-================================ */
-let allGroups = [];
-let peopleCache = [];  // Cache people to avoid repeated API calls
-let activePeriods = [];
-let activeClasses = [];
-let loadingCount = 0;  // Track concurrent loading operations
-let isAdmin = false;   // Track if current user is an admin
-let selectedUsersForGroup = {}; // Track multi-select members per group
-let collapsedGroups = {}; // Track collapsed state per group ID
-
-// Chat state
-let activeChatGroupId = null;
-let activeChatGroupName = '';
-let stompClient = null;
-let currentUser = null;
-let currentUserDisplayName = 'You';
-let pendingChatImageBase64 = null;
-let pendingChatImageMime = 'image/png';
-let renderedChatMessageKeys = new Set();
-
-/* ================================
-   LOADING HELPERS
-================================ */
-function showLoading(message = "Loading...") {
-  loadingCount++;
-  document.getElementById("loadingText").textContent = message;
-  document.getElementById("loadingOverlay").classList.remove("hidden");
-}
-
-function hideLoading() {
-  loadingCount = Math.max(0, loadingCount - 1);
-  if (loadingCount === 0) {
-    document.getElementById("loadingOverlay").classList.add("hidden");
-  }
-}
-
-/* ================================
-   INIT
-================================ */
-document.addEventListener("DOMContentLoaded", () => {
-  initializeData();
-  initializeChatUser();
-});
-
-// Search groups using API with chaining for better performance
-window.searchGroups = function () {
-  const searchTerm = document.getElementById("searchInput").value.trim();
-  const url = searchTerm 
-    ? `${javaURI}/api/groups/search?name=${encodeURIComponent(searchTerm)}`
-    : `${javaURI}/api/groups`;
-  
-  showLoading("Searching...");
-  
-  fetch(url, fetchOptions)
-    .then(res => res.ok ? res.json() : Promise.reject(new Error("Search failed")))
-    .then(data => {
-      allGroups = data;
-      renderGroups();
-    })
-    .catch(err => console.error("Search failed", err))
-    .finally(() => hideLoading());
-}
-
-// Load groups, people, and admin status in parallel on page load with chaining
-function initializeData() {
-  showLoading("Loading groups...");
-  
-  Promise.all([
-    fetch(`${javaURI}/api/groups`, fetchOptions)
-      .then(res => res.ok ? res.json() : Promise.reject(new Error("Failed to load groups"))),
-    fetch(`${javaURI}/api/people`, fetchOptions)
-      .then(res => res.ok ? res.json() : Promise.reject(new Error("Failed to load people"))),
-    fetch(`${pythonURI}/api/id`, fetchOptions)
-      .then(res => res.ok ? res.json() : null)
-      .catch(() => null)  // Don't fail if user check fails
-  ])
-    .then(([groups, people, user]) => {
-      allGroups = groups;
-      peopleCache = people;
-      isAdmin = user && user.role === "Admin";
-      renderGroups();
-    })
-    .catch(err => console.error("Failed to initialize data", err))
-    .finally(() => hideLoading());
-}
-
-window.parseUIDs = function (raw) {
-  return raw
-    .split("\n")
-    .map(u => u.trim())
-    .filter(Boolean);
-}
-
-// Synchronous lookup from cache - no API call needed
-window.getPersonIdFromUID = function (uid) {
-  const match = peopleCache.find(p => p.uid === uid);
-  if (!match) {
-    throw new Error(`UID not found: ${uid}`);
-  }
-  return match.id;
-};
-
-// Get person object from cache by ID
-window.getPersonById = function (personId) {
-  return peopleCache.find(p => p.id === personId);
-};
-
-// Helpers for multi-select state per group
-function getSelectedUsers(groupId) {
-  return selectedUsersForGroup[groupId] || [];
-}
-
-function setSelectedUsers(groupId, users) {
-  selectedUsersForGroup[groupId] = users;
-  updateAddSelectedButton(groupId);
-  updateSearchResultsSelection(groupId);
-}
-
-// Search for users by name or GitHub ID with chaining
-window.searchPeopleForGroup = function (groupId) {
-  const searchInput = document.getElementById(`member-search-${groupId}`);
-  const query = searchInput.value.trim();
-  
-  if (!query) {
-    alert("Please enter a search term");
-    return;
-  }
-  
-  showLoading("Searching users...");
-  
-  fetch(`${javaURI}/api/people/search?query=${encodeURIComponent(query)}`, fetchOptions)
-    .then(res => res.ok ? res.json() : Promise.reject(new Error("Search failed")))
-    .then(results => displaySearchResults(groupId, results))
-    .catch(err => {
-      console.error("User search failed", err);
-      alert("Failed to search users");
-    })
-    .finally(() => hideLoading());
-}
-
-// Display search results in dropdown
-window.displaySearchResults = function (groupId, results) {
-  const dropdown = document.getElementById(`search-results-${groupId}`);
-  const selected = getSelectedUsers(groupId).map(u => u.id);
-  
-  if (!results || results.length === 0) {
-    dropdown.innerHTML = `
+        if (!results || results.length === 0) {
+          dropdown.innerHTML = `
       <div class="p-3 text-gray-400 text-sm text-center">No users found</div>
     `;
-    dropdown.classList.remove("hidden");
-    return;
-  }
-  
-  dropdown.innerHTML = results.map(person => {
-    const isSelected = selected.includes(person.id);
-    return `
+          dropdown.classList.remove("hidden");
+          return;
+        }
+
+        dropdown.innerHTML = results.map(person => {
+          const isSelected = selected.includes(person.id);
+          return `
       <div 
         class="px-3 py-2 ${isSelected ? "bg-neutral-600 border border-neutral-500" : "hover:bg-neutral-600"} cursor-pointer flex items-center justify-between text-sm"
         data-person-id="${person.id}"
@@ -869,315 +909,316 @@ <h3 id="feedbackModalTitle" class="text-xl font-semibold text-white">Group Feedb
         <span class="text-xs ${isSelected ? "text-green-400" : "text-gray-500"}">${isSelected ? "Selected" : "Tap to select"}</span>
       </div>
     `;
-  }).join("");
-  
-  dropdown.classList.remove("hidden");
-}
-
-// Toggle user selection from search results
-window.toggleUserSelectionFromResult = function (groupId, personId, uid, name) {
-  const current = getSelectedUsers(groupId);
-  const exists = current.find(u => u.id === personId);
-  const updated = exists
-    ? current.filter(u => u.id !== personId)
-    : [...current, { id: personId, uid, name }];
-  setSelectedUsers(groupId, updated);
-}
-
-// Clear selected users for a group
-window.clearSearchSelection = function (groupId) {
-  setSelectedUsers(groupId, []);
-  const searchInput = document.getElementById(`member-search-${groupId}`);
-  if (searchInput) searchInput.value = "";
-  const dropdown = document.getElementById(`search-results-${groupId}`);
-  if (dropdown) dropdown.classList.add("hidden");
-}
-
-// Add all selected members to group with chaining
-window.addSelectedMembersToGroup = async function (groupId) {
-  const selected = getSelectedUsers(groupId);
-  
-  if (!selected.length) {
-    alert("Please select at least one user");
-    return;
-  }
-  
-  showLoading("Adding members...");
-  const successes = [];
-  const failures = [];
-
-  for (const person of selected) {
-    try {
-      const res = await fetch(`${javaURI}/api/groups/${groupId}/members/${person.id}`, { ...fetchOptions, method: "POST" });
-      if (!res.ok) {
-        const text = await res.text();
-        console.error("ADD MEMBER ERROR:", text);
-        failures.push(person);
-        continue;
-      }
-      successes.push(person);
-    } catch (err) {
-      console.error("ADD MEMBER ERROR:", err);
-      failures.push(person);
-    }
-  }
-
-  const group = allGroups.find(g => g.id === groupId);
-  if (group) {
-    if (!group.members) group.members = [];
-    successes.forEach(person => {
-      if (!group.members.find(m => m.id === person.id)) {
-        group.members.push({ id: person.id, name: person.name, uid: person.uid });
-      }
-    });
-  }
-
-  setSelectedUsers(groupId, []);
-  renderGroups();
-  if (failures.length) {
-    alert(`Added ${successes.length} member(s). ${failures.length} failed. Is the user already a member of the group? Check console for details.`);
-  }
-  hideLoading();
-}
-
-// Add member to group with chaining - updates local state instead of refetching
-window.addMemberToGroup = function (groupId, uid) {
-  showLoading("Adding member...");
-  
-  const personId = getPersonIdFromUID(uid);
-  const person = getPersonById(personId);
-  
-  fetch(`${javaURI}/api/groups/${groupId}/members/${personId}`, { ...fetchOptions, method: "POST" })
-    .then(res => {
-      if (!res.ok) {
-        return res.text().then(text => {
-          console.error("ADD MEMBER ERROR:", text);
-          return Promise.reject(new Error("Failed to add member"));
-        });
+        }).join("");
+
+        dropdown.classList.remove("hidden");
       }
-      return res;
-    })
-    .then(() => {
-      // Update local state instead of refetching all groups
-      const group = allGroups.find(g => g.id === groupId);
-      if (group) {
-        if (!group.members) group.members = [];
-        // Only add if not already present
-        if (!group.members.find(m => m.id === personId)) {
-          group.members.push({ id: personId, name: person?.name || uid, uid: uid });
-        }
+
+      // Toggle user selection from search results
+      window.toggleUserSelectionFromResult = function (groupId, personId, uid, name) {
+        const current = getSelectedUsers(groupId);
+        const exists = current.find(u => u.id === personId);
+        const updated = exists
+          ? current.filter(u => u.id !== personId)
+          : [...current, { id: personId, uid, name }];
+        setSelectedUsers(groupId, updated);
       }
-      renderGroups();
-    })
-    .catch(err => alert(err.message))
-    .finally(() => hideLoading());
-}
-
-// Remove member from group with chaining - updates local state instead of refetching
-window.removeMemberFromGroup = function (groupId, personId) {
-  showLoading("Removing member...");
-  
-  fetch(`${javaURI}/api/groups/${groupId}/members/${personId}`, { ...fetchOptions, method: "DELETE" })
-    .then(res => res.ok ? res : Promise.reject(new Error("Failed to remove member")))
-    .then(() => {
-      // Update local state instead of refetching all groups
-      const group = allGroups.find(g => g.id === groupId);
-      if (group && group.members) {
-        group.members = group.members.filter(m => m.id !== personId);
-      }
-      renderGroups();
-    })
-    .catch(err => alert(err.message))
-    .finally(() => hideLoading());
-}
-
-// Open group chat modal
-window.openGroupChat = async function (groupId, groupName) {
-  const group = allGroups.find(g => g.id === groupId);
-  if (!group) {
-    alert(`Group not found`);
-    return;
-  }
-
-  activeChatGroupId = groupId;
-  activeChatGroupName = groupName;
-
-  const memberCount = (group.members || []).length;
-
-  // Update modal header
-  document.getElementById('chatModalTitle').textContent = groupName;
-  document.getElementById('chatModalSubtitle').textContent =
-    `Period ${group.period} · ${group.course} · ${memberCount} member${memberCount !== 1 ? 's' : ''}`;
-
-  // Update input placeholder
-  const chatInput = document.getElementById('chatInput');
-  const groupNameFormatted = groupName.toLowerCase().replace(/\s+/g, '-');
-  chatInput.placeholder = `Message #${groupNameFormatted}`;
-
-  // Show modal and prevent body scroll
-  document.getElementById('chatModal').classList.remove('hidden');
-  document.body.classList.add('modal-open');
-
-  showChatTab();
-  clearChatImagePreview();
-
-  try {
-    await fetchChatMessages();
-    await fetchSharedFiles();
-    startChatPolling();
-  } catch (err) {
-    console.error('Failed to open chat', err);
-  }
-}
-
-// Close group chat modal
-window.closeGroupChat = function () {
-  document.getElementById('chatModal').classList.add('hidden');
-  document.body.classList.remove('modal-open');
-  stopChatPolling();
-  activeChatGroupId = null;
-  activeChatGroupName = '';
-  clearChatImagePreview();
-}
-
-// Delete group with chaining - updates local state instead of refetching
-window.deleteGroup = function (groupId) {
-  const confirmed = confirm(
-    "Are you sure you want to delete this group?\n\nThis action cannot be undone."
-  );
-
-  if (!confirmed) return;
-
-  showLoading("Deleting group...");
-  
-  fetch(`${javaURI}/api/groups/${groupId}`, { ...fetchOptions, method: "DELETE" })
-    .then(res => {
-      if (!res.ok) {
-        return res.text().then(text => {
-          console.error("DELETE GROUP ERROR:", text);
-          alert("Failed to delete group");
-          return Promise.reject(new Error("Failed to delete group"));
-        });
+
+      // Clear selected users for a group
+      window.clearSearchSelection = function (groupId) {
+        setSelectedUsers(groupId, []);
+        const searchInput = document.getElementById(`member-search-${groupId}`);
+        if (searchInput) searchInput.value = "";
+        const dropdown = document.getElementById(`search-results-${groupId}`);
+        if (dropdown) dropdown.classList.add("hidden");
       }
-      return res;
-    })
-    .then(() => {
-      // Update local state instead of refetching all groups
-      allGroups = allGroups.filter(g => g.id !== groupId);
-      renderGroups();
-    })
-    .catch(err => console.error(err))
-    .finally(() => hideLoading());
-};
-
-// Navigate to group dashboard page
-window.navigateToGroupDashboard = function (groupName) {
-  // Convert group name to URL-friendly format
-  const urlFriendlyName = encodeURIComponent(groupName.toLowerCase().replace(/\s+/g, '-'));
-  window.location.href = `{{ site.baseurl }}/student/groups/dashboard?group=${urlFriendlyName}`;
-};
-
-/* ================================
-   API CALLS
-================================ */
-// Manual refresh function with chaining - only call when absolutely needed
-window.loadGroups = function () {
-  fetch(`${javaURI}/api/groups`, fetchOptions)
-    .then(res => res.ok ? res.json() : Promise.reject(new Error("Failed to load groups")))
-    .then(data => {
-      allGroups = data;
-      renderGroups();
-    })
-    .catch(err => console.error("Failed to load groups", err));
-}
-
-// Refresh people cache with chaining if needed (e.g., new user registered)
-window.refreshPeopleCache = function () {
-  fetch(`${javaURI}/api/people`, fetchOptions)
-    .then(res => res.ok ? res.json() : Promise.reject(new Error("Failed to refresh people")))
-    .then(data => { peopleCache = data; })
-    .catch(err => console.error("Failed to refresh people cache", err));
-}
-
-// Create new group with chaining (single API call)
-window.saveNewGroup = function () {
-  const name = document.getElementById("newGroupName").value.trim();
-  const period = document.getElementById("newGroupPeriod").value;
-  const course = document.getElementById("newGroupClass").value;
-
-  console.log("Submit button clicked! Group Name:", name, "Period:", period, "Course:", course);
-
-  if (!name || !period || !course) {
-    alert("Please fill all required fields.");
-    return;
-  }
-
-  showLoading("Creating group...");
-  
-  fetch(`${javaURI}/api/groups`, {
-    ...fetchOptions,
-    method: "POST",
-    body: JSON.stringify({ name, period: String(period), course })
-  })
-    .then(res => {
-      if (!res.ok) {
-        return res.text().then(text => {
-          console.error("GROUP CREATION ERROR:", text);
-          return Promise.reject(new Error("Group creation failed"));
-        });
+
+      // Add all selected members to group with chaining
+      window.addSelectedMembersToGroup = async function (groupId) {
+        const selected = getSelectedUsers(groupId);
+
+        if (!selected.length) {
+          alert("Please select at least one user");
+          return;
+        }
+
+        showLoading("Adding members...");
+        const successes = [];
+        const failures = [];
+
+        for (const person of selected) {
+          try {
+            const res = await fetch(`${javaURI}/api/groups/${groupId}/members/${person.id}`, { ...fetchOptions, method: "POST" });
+            if (!res.ok) {
+              const text = await res.text();
+              console.error("ADD MEMBER ERROR:", text);
+              failures.push(person);
+              continue;
+            }
+            successes.push(person);
+          } catch (err) {
+            console.error("ADD MEMBER ERROR:", err);
+            failures.push(person);
+          }
+        }
+
+        const group = allGroups.find(g => g.id === groupId);
+        if (group) {
+          if (!group.members) group.members = [];
+          successes.forEach(person => {
+            if (!group.members.find(m => m.id === person.id)) {
+              group.members.push({ id: person.id, name: person.name, uid: person.uid });
+            }
+          });
+        }
+
+        setSelectedUsers(groupId, []);
+        renderGroups();
+        if (failures.length) {
+          alert(`Added ${successes.length} member(s). ${failures.length} failed. Is the user already a member of the group? Check console for details.`);
+        }
+        hideLoading();
+      }
+
+      // Add member to group with chaining - updates local state instead of refetching
+      window.addMemberToGroup = function (groupId, uid) {
+        showLoading("Adding member...");
+
+        const personId = getPersonIdFromUID(uid);
+        const person = getPersonById(personId);
+
+        fetch(`${javaURI}/api/groups/${groupId}/members/${personId}`, { ...fetchOptions, method: "POST" })
+          .then(res => {
+            if (!res.ok) {
+              return res.text().then(text => {
+                console.error("ADD MEMBER ERROR:", text);
+                return Promise.reject(new Error("Failed to add member"));
+              });
+            }
+            return res;
+          })
+          .then(() => {
+            // Update local state instead of refetching all groups
+            const group = allGroups.find(g => g.id === groupId);
+            if (group) {
+              if (!group.members) group.members = [];
+              // Only add if not already present
+              if (!group.members.find(m => m.id === personId)) {
+                group.members.push({ id: personId, name: person?.name || uid, uid: uid });
+              }
+            }
+            renderGroups();
+          })
+          .catch(err => alert(err.message))
+          .finally(() => hideLoading());
+      }
+
+      // Remove member from group with chaining - updates local state instead of refetching
+      window.removeMemberFromGroup = function (groupId, personId) {
+        showLoading("Removing member...");
+
+        fetch(`${javaURI}/api/groups/${groupId}/members/${personId}`, { ...fetchOptions, method: "DELETE" })
+          .then(res => res.ok ? res : Promise.reject(new Error("Failed to remove member")))
+          .then(() => {
+            // Update local state instead of refetching all groups
+            const group = allGroups.find(g => g.id === groupId);
+            if (group && group.members) {
+              group.members = group.members.filter(m => m.id !== personId);
+            }
+            renderGroups();
+          })
+          .catch(err => alert(err.message))
+          .finally(() => hideLoading());
       }
-      return res.json();
-    })
-    .then(newGroup => {
-      newGroup.members = [];
-      // Update local state instead of refetching
-      allGroups.push(newGroup);
-      cancelAddGroup();
-      renderGroups();
-    })
-    .catch(err => {
-      console.error(err);
-      alert(err.message);
-    })
-    .finally(() => hideLoading());
-};
-
-
-
-/* ================================
-   RENDERING
-================================ */
-window.renderGroups = function () {
-  const container = document.getElementById("groupsContainer");
-  const empty = document.getElementById("emptyState");
-
-  container.innerHTML = "";
-
-  // Only filter by period/class (search is handled by API)
-  const filtered = allGroups.filter(g => {
-    if (activePeriods.length && !activePeriods.includes(String(g.period))) return false;
-    if (activeClasses.length && !activeClasses.includes(g.course)) return false;
-    return true;
-  });
-
-  if (!filtered.length) {
-    empty.classList.remove("hidden");
-    return;
-  }
-
-  empty.classList.add("hidden");
-
-  filtered.forEach(group => {
-    const el = document.createElement("div");
-    el.className = "bg-neutral-700 rounded-lg p-4 border border-neutral-600";
-
-    const isCollapsed = collapsedGroups[group.id] !== false;
-
-    el.innerHTML = `
+
+      // Open group chat modal
+      window.openGroupChat = async function (groupId, groupName) {
+        const group = allGroups.find(g => g.id === groupId);
+        if (!group) {
+          alert(`Group not found`);
+          return;
+        }
+
+        activeChatGroupId = groupId;
+        activeChatGroupName = groupName;
+
+        const memberCount = (group.members || []).length;
+
+        // Update modal header
+        document.getElementById('chatModalTitle').textContent = groupName;
+        document.getElementById('chatModalSubtitle').textContent =
+          `Period ${group.period} · ${group.course} · ${memberCount} member${memberCount !== 1 ? 's' : ''}`;
+
+        // Update input placeholder
+        const chatInput = document.getElementById('chatInput');
+        const groupNameFormatted = groupName.toLowerCase().replace(/\s+/g, '-');
+        chatInput.placeholder = `Message #${groupNameFormatted}`;
+
+        // Show modal and prevent body scroll
+        document.getElementById('chatModal').classList.remove('hidden');
+        document.body.classList.add('modal-open');
+
+        showChatTab();
+        clearChatImagePreview();
+
+        try {
+          await fetchChatMessages();
+          await fetchSharedFiles();
+          startChatPolling();
+        } catch (err) {
+          console.error('Failed to open chat', err);
+        }
+      }
+
+      // Close group chat modal
+      window.closeGroupChat = function () {
+        document.getElementById('chatModal').classList.add('hidden');
+        document.body.classList.remove('modal-open');
+        stopChatPolling();
+        activeChatGroupId = null;
+        activeChatGroupName = '';
+        clearChatImagePreview();
+      }
+
+      // Delete group with chaining - updates local state instead of refetching
+      window.deleteGroup = function (groupId) {
+        const confirmed = confirm(
+          "Are you sure you want to delete this group?\n\nThis action cannot be undone."
+        );
+
+        if (!confirmed) return;
+
+        showLoading("Deleting group...");
+
+        fetch(`${javaURI}/api/groups/${groupId}`, { ...fetchOptions, method: "DELETE" })
+          .then(res => {
+            if (!res.ok) {
+              return res.text().then(text => {
+                console.error("DELETE GROUP ERROR:", text);
+                alert("Failed to delete group");
+                return Promise.reject(new Error("Failed to delete group"));
+              });
+            }
+            return res;
+          })
+          .then(() => {
+            // Update local state instead of refetching all groups
+            allGroups = allGroups.filter(g => g.id !== groupId);
+            renderGroups();
+          })
+          .catch(err => console.error(err))
+          .finally(() => hideLoading());
+      };
+
+      // Navigate to group dashboard page
+      window.navigateToGroupDashboard = function (groupName) {
+        // Convert group name to URL-friendly format
+        const urlFriendlyName = encodeURIComponent(groupName.toLowerCase().replace(/\s+/g, '-'));
+        window.location.href = `{{ site.baseurl }}/student/groups/dashboard?group=${urlFriendlyName}`;
+      };
+
+      /* ================================
+         API CALLS
+      ================================ */
+      // Manual refresh function with chaining - only call when absolutely needed
+      window.loadGroups = function () {
+        fetch(`${javaURI}/api/groups`, fetchOptions)
+          .then(res => res.ok ? res.json() : Promise.reject(new Error("Failed to load groups")))
+          .then(data => {
+            allGroups = data;
+            renderGroups();
+          })
+          .catch(err => console.error("Failed to load groups", err));
+      }
+
+      // Refresh people cache with chaining if needed (e.g., new user registered)
+      window.refreshPeopleCache = function () {
+        fetch(`${javaURI}/api/people`, fetchOptions)
+          .then(res => res.ok ? res.json() : Promise.reject(new Error("Failed to refresh people")))
+          .then(data => { peopleCache = data; })
+          .catch(err => console.error("Failed to refresh people cache", err));
+      }
+
+      // Create new group with chaining (single API call)
+      window.saveNewGroup = function () {
+        const name = document.getElementById("newGroupName").value.trim();
+        const period = document.getElementById("newGroupPeriod").value;
+        const course = document.getElementById("newGroupClass").value;
+
+        console.log("Submit button clicked! Group Name:", name, "Period:", period, "Course:", course);
+
+        if (!name || !period || !course) {
+          alert("Please fill all required fields.");
+          return;
+        }
+
+        showLoading("Creating group...");
+
+        fetch(`${javaURI}/api/groups`, {
+          ...fetchOptions,
+          method: "POST",
+          body: JSON.stringify({ name, period: String(period), course })
+        })
+          .then(res => {
+            if (!res.ok) {
+              return res.text().then(text => {
+                console.error("GROUP CREATION ERROR:", text);
+                return Promise.reject(new Error("Group creation failed"));
+              });
+            }
+            return res.json();
+          })
+          .then(newGroup => {
+            newGroup.members = [];
+            // Update local state instead of refetching
+            allGroups.push(newGroup);
+            cancelAddGroup();
+            renderGroups();
+          })
+          .catch(err => {
+            console.error(err);
+            alert(err.message);
+          })
+          .finally(() => hideLoading());
+      };
+
+
+
+      /* ================================
+         RENDERING
+      ================================ */
+      window.renderGroups = function () {
+        const container = document.getElementById("groupsContainer");
+        const empty = document.getElementById("emptyState");
+
+        container.innerHTML = "";
+
+        // Only filter by period/class (search is handled by API)
+        const filtered = allGroups.filter(g => {
+          if (activePeriods.length && !activePeriods.includes(String(g.period))) return false;
+          if (activeClasses.length && !activeClasses.includes(g.course)) return false;
+          return true;
+        });
+
+        if (!filtered.length) {
+          empty.classList.remove("hidden");
+          return;
+        }
+
+        empty.classList.add("hidden");
+
+        filtered.forEach(group => {
+          const el = document.createElement("div");
+          el.className = "bg-neutral-700 rounded-lg p-4 border border-neutral-600";
+
+          const isCollapsed = isSearchMode ? false : (collapsedGroups[group.id] !== false);
+
+          el.innerHTML = `
       <!-- Header -->
       <div class="flex justify-between items-start">
         <div class="flex items-center gap-2">
           <!-- Toggle visibility button -->
+          ${!isSearchMode ? `
           <button
             class="w-8 h-8 flex items-center justify-center rounded bg-neutral-600 hover:bg-neutral-500 text-gray-300 hover:text-white transition-colors"
             title="${isCollapsed ? 'Show' : 'Hide'} member details"
@@ -1193,20 +1234,40 @@ <h3 id="feedbackModalTitle" class="text-xl font-semibold text-white">Group Feedb
               </svg>
             `}
           </button>
+          ` : ''}
           <div class="cursor-pointer hover:opacity-80 transition-opacity" onclick="navigateToGroupDashboard('${group.name.replace(/'/g, "\\'")}')">
             <h4 class="text-lg font-semibold text-white hover:text-indigo-400 transition-colors">${group.name}</h4>
             <p class="text-sm text-gray-400">
               Period ${group.period} · ${group.course}${isCollapsed ? ` · ${((members) => {
-                if (!members.length) return 'No members';
-                const shown = members.slice(0, 3).map(m => m.name).join(', ');
-                return members.length > 3 ? shown + ` +${members.length - 3} more` : shown;
-              })(group.members || [])}` : ''}
+              if (!members.length) return 'No members';
+              const shown = members.slice(0, 3).map(m => m.name).join(', ');
+              return members.length > 3 ? shown + ` +${members.length - 3} more` : shown;
+            })(group.members || [])}` : ''}
             </p>
           </div>
         </div>
 
         <!-- Action buttons -->
         <div class="flex gap-2">
+          <!-- Join/Add button (Added per user request) -->
+          ${(() => {
+              const isMember = group.members?.some(m => m.uid === currentUser?.uid);
+              if (!isMember && currentUser?.uid) {
+                return `
+                <button
+                  class="w-auto px-3 flex items-center justify-center rounded bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold transition-colors gap-1"
+                  title="Join this group"
+                  onclick="addMemberToGroup(${group.id}, '${currentUser.uid}')">
+                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+                  </svg>
+                  Add to Group
+                </button>
+              `;
+              }
+              return '';
+            })()}
+
           <!-- Dashboard button -->
           <button
             class="w-9 h-9 flex items-center justify-center rounded bg-neutral-600 hover:bg-indigo-600 text-gray-300 hover:text-white transition-colors"
@@ -1297,506 +1358,506 @@ <h4 class="text-lg font-semibold text-white hover:text-indigo-400 transition-col
       </div>
       ` : ''}
     `;
-    container.appendChild(el);
-    updateAddSelectedButton(group.id);
-  });
-}
-
-// Update add button label/state based on selection count
-function updateAddSelectedButton(groupId) {
-  const btn = document.getElementById(`add-selected-btn-${groupId}`);
-  if (!btn) return;
-  const count = getSelectedUsers(groupId).length;
-  btn.textContent = count ? `Add Selected (${count})` : "Add Selected";
-  btn.disabled = count === 0;
-}
-
-// Highlight selected rows in search dropdown after rerender
-function updateSearchResultsSelection(groupId) {
-  const dropdown = document.getElementById(`search-results-${groupId}`);
-  if (!dropdown) return;
-  const selectedIds = getSelectedUsers(groupId).map(u => u.id);
-  dropdown.querySelectorAll("[data-person-id]").forEach(item => {
-    const id = Number(item.dataset.personId);
-    const isSelected = selectedIds.includes(id);
-    item.classList.toggle("bg-neutral-600", isSelected);
-    item.classList.toggle("border", isSelected);
-  });
-}
-
-/* ================================
-   ADD GROUP TOGGLE
-================================ */
-window.toggleAddGroup = function () {
-  document.getElementById("addGroupExpanded").classList.toggle("hidden");
-  document.getElementById("addGroupChevron").classList.toggle("rotate-180");
-}
-
-// Toggle visibility of group member details
-window.toggleGroupDetails = function (groupId) {
-  collapsedGroups[groupId] = collapsedGroups[groupId] === false ? true : false;
-  renderGroups();
-}
-
-window.cancelAddGroup = function () {
-  document.getElementById("addGroupExpanded").classList.add("hidden");
-  document.getElementById("newGroupName").value = "";
-  document.getElementById("newGroupPeriod").value = "";
-  document.getElementById("newGroupClass").value = "";
-}
-
-/* ================================
-   PRIOR EXPERIENCE (Smart Groups)
-================================ */
-
-const PERSONA_OPTIONS = [
-  "Technologist","Scrummer", "Planner", "Closer"
-];
-
-function renderPriorPersonaChoices() {
-  const wrap = document.getElementById("priorPersonaChoices");
-  if (!wrap) return;
-
-  wrap.innerHTML = PERSONA_OPTIONS.map(p => `
+          container.appendChild(el);
+          updateAddSelectedButton(group.id);
+        });
+      }
+
+      // Update add button label/state based on selection count
+      function updateAddSelectedButton(groupId) {
+        const btn = document.getElementById(`add-selected-btn-${groupId}`);
+        if (!btn) return;
+        const count = getSelectedUsers(groupId).length;
+        btn.textContent = count ? `Add Selected (${count})` : "Add Selected";
+        btn.disabled = count === 0;
+      }
+
+      // Highlight selected rows in search dropdown after rerender
+      function updateSearchResultsSelection(groupId) {
+        const dropdown = document.getElementById(`search-results-${groupId}`);
+        if (!dropdown) return;
+        const selectedIds = getSelectedUsers(groupId).map(u => u.id);
+        dropdown.querySelectorAll("[data-person-id]").forEach(item => {
+          const id = Number(item.dataset.personId);
+          const isSelected = selectedIds.includes(id);
+          item.classList.toggle("bg-neutral-600", isSelected);
+          item.classList.toggle("border", isSelected);
+        });
+      }
+
+      /* ================================
+         ADD GROUP TOGGLE
+      ================================ */
+      window.toggleAddGroup = function () {
+        document.getElementById("addGroupExpanded").classList.toggle("hidden");
+        document.getElementById("addGroupChevron").classList.toggle("rotate-180");
+      }
+
+      // Toggle visibility of group member details
+      window.toggleGroupDetails = function (groupId) {
+        collapsedGroups[groupId] = collapsedGroups[groupId] === false ? true : false;
+        renderGroups();
+      }
+
+      window.cancelAddGroup = function () {
+        document.getElementById("addGroupExpanded").classList.add("hidden");
+        document.getElementById("newGroupName").value = "";
+        document.getElementById("newGroupPeriod").value = "";
+        document.getElementById("newGroupClass").value = "";
+      }
+
+      /* ================================
+         PRIOR EXPERIENCE (Smart Groups)
+      ================================ */
+
+      const PERSONA_OPTIONS = [
+        "Technologist", "Scrummer", "Planner", "Closer"
+      ];
+
+      function renderPriorPersonaChoices() {
+        const wrap = document.getElementById("priorPersonaChoices");
+        if (!wrap) return;
+
+        wrap.innerHTML = PERSONA_OPTIONS.map(p => `
     <label class="flex items-center gap-2 px-3 py-2 bg-neutral-800 border border-neutral-600 rounded-lg cursor-pointer hover:bg-neutral-700">
       <input type="checkbox" class="accent-indigo-500 prior-persona-checkbox" value="${p}">
       <span class="text-sm text-gray-200">${p}</span>
     </label>
   `).join("");
-}
-
-window.togglePriorExperience = function () {
-  const toggle = document.getElementById("usePriorExpToggle");
-  const knob = document.getElementById("usePriorExpKnob");
-  const form = document.getElementById("priorExperienceForm");
-
-  if (!toggle || !knob || !form) return;
-
-  const on = toggle.checked;
-  form.classList.toggle("hidden", !on);
-
-  // tiny visual toggle effect
-  knob.style.transform = on ? "translateX(20px)" : "translateX(0px)";
-  toggle.parentElement.querySelector("div").style.backgroundColor = on ? "#4f46e5" : "#525252";
-
-  if (on) renderPriorPersonaChoices();
-};
-
-window.previewPriorFeedbackCount = function () {
-  const status = document.getElementById("priorFeedbackStatus");
-  if (!status) return;
-
-  const stored = (typeof getFeedbackStore === "function") ? getFeedbackStore() : [];
-  status.textContent = `Stored feedback rows on this device: ${stored.length}`;
-};
-
-// Builds one feedback row from the inline “prior experiences” form
-function readInlinePriorExperienceRow() {
-  const enabled = document.getElementById("usePriorExpToggle")?.checked;
-  if (!enabled) return null;
-
-  const prevSize = parseInt(document.getElementById("priorGroupSize")?.value || "0", 10);
-  const studentRating = parseInt(document.getElementById("priorStudentRating")?.value || "0", 10);
-  const teacherRating = parseInt(document.getElementById("priorTeacherRating")?.value || "0", 10);
-  const note = (document.getElementById("priorNote")?.value || "").trim();
-
-  if (!(prevSize >= 2 && prevSize <= 10)) throw new Error("Prior group size must be 2–10.");
-  if (!(studentRating >= 1 && studentRating <= 5)) throw new Error("Prior student rating must be 1–5.");
-  if (!(teacherRating >= 1 && teacherRating <= 5)) throw new Error("Prior teacher rating must be 1–5.");
-
-  const personas = [...document.querySelectorAll(".prior-persona-checkbox:checked")].map(cb => cb.value);
-  if (!personas.length) throw new Error("Select at least 1 persona for the prior group.");
-
-  return {
-    ts: Date.now(),
-    source: "inline_prior_experience",
-    prev_group_size: prevSize,
-    personas: personas,
-    student_rating_1to5: studentRating,
-    teacher_rating_1to5: teacherRating,
-    note
-  };
-}
-
-// Collects feedback rows that will be sent to Flask:
-// - localStorage saved feedback (your existing modal submissions)
-// - + the inline prior experience row (if enabled)
-function collectFeedbackRowsForTraining() {
-  const toggleOn = document.getElementById("usePriorExpToggle")?.checked;
-  if (!toggleOn) return [];
-
-  const stored = (typeof getFeedbackStore === "function") ? getFeedbackStore() : [];
-  const normalizedStored = stored.map(r => ({
-    ts: r.ts,
-    source: "stored_group_feedback",
-    prev_group_size: (r.members?.length ? r.members.length : null),
-    // if you later add personas snapshot to stored feedback, include it here:
-    personas: r.personas || null,
-    student_rating_1to5: r.student_rating_1to5,
-    teacher_rating_1to5: r.teacher_rating_1to5,
-    note: r.note
-  }));
-
-  const inlineRow = readInlinePriorExperienceRow(); // can throw
-  return inlineRow ? [...normalizedStored, inlineRow] : normalizedStored;
-}
-
-/* ================================
-   FILTERS
-================================ */
-window.toggleDropdown = function (type) {
-  document.getElementById(type + "Dropdown").classList.toggle("hidden");
-}
-
-window.clearAllFilters = function () {
-  activePeriods = [];
-  activeClasses = [];
-  document.querySelectorAll(".period-checkbox,.class-checkbox").forEach(cb => cb.checked = false);
-  document.getElementById("periodAllCheckbox").checked = true;
-  document.getElementById("classAllCheckbox").checked = true;
-  document.getElementById("periodFilterLabel").textContent = "All Periods";
-  document.getElementById("classFilterLabel").textContent = "All Classes";
-  document.getElementById("searchInput").value = "";
-  searchGroups();  // Reload all groups
-}
-
-window.onPeriodCheckboxChange = function (cb) {
-  activePeriods = [...document.querySelectorAll(".period-checkbox:checked")].map(c => c.value);
-  document.getElementById("periodAllCheckbox").checked = !activePeriods.length;
-  document.getElementById("periodFilterLabel").textContent =
-    activePeriods.length ? `Periods: ${activePeriods.join(", ")}` : "All Periods";
-  renderGroups();
-}
-
-window.onClassCheckboxChange = function (cb) {
-  activeClasses = [...document.querySelectorAll(".class-checkbox:checked")].map(c => c.value);
-  document.getElementById("classAllCheckbox").checked = !activeClasses.length;
-  document.getElementById("classFilterLabel").textContent =
-    activeClasses.length ? `Classes: ${activeClasses.join(", ")}` : "All Classes";
-  renderGroups();
-}
-
-window.onPeriodAllChange = function (cb) {
-  if (cb.checked) {
-    document.querySelectorAll(".period-checkbox").forEach(c => c.checked = false);
-    activePeriods = [];
-    renderGroups();
-  }
-}
-
-window.onClassAllChange = function (cb) {
-  if (cb.checked) {
-    document.querySelectorAll(".class-checkbox").forEach(c => c.checked = false);
-    activeClasses = [];
-    renderGroups();
-  }
-}
-
-/* ================================
-   SMART GROUP FORMATION (SRP VERSION)
-================================ */
-let generatedGroups = []; // Store generated groups before saving
-
-function readSmartGroupForm() {
-  return {
-    period: document.getElementById('smartGroupPeriod').value,
-    course: document.getElementById('smartGroupClass').value,
-    groupSize: parseInt(document.getElementById('smartGroupSize').value, 10),
-    prefix: document.getElementById('smartGroupPrefix').value.trim() || 'Team'
-  };
-}
-
-function validateSmartGroupForm({ period, course, groupSize }) {
-  if (!period || !course) {
-    throw new Error('Please select both period and class');
-  }
-
-  if (groupSize < 2 || groupSize > 10) {
-    throw new Error('Group size must be between 2 and 10');
-  }
-}
-
-function resetSmartGroupForm() {
-  document.getElementById('smartGroupPeriod').value = '';
-  document.getElementById('smartGroupClass').value = '';
-  document.getElementById('smartGroupSize').value = '4';
-  document.getElementById('smartGroupPrefix').value = '';
-  generatedGroups = [];
-  lockedGroups = new Set();
-}
-
-function openSmartGroupModalUI() {
-  document.getElementById('smartGroupModal').classList.remove('hidden');
-  document.getElementById('smartGroupResults').classList.add('hidden');
-  document.body.classList.add('modal-open');
-}
-
-function closeSmartGroupModalUI() {
-  document.getElementById('smartGroupModal').classList.add('hidden');
-  document.body.classList.remove('modal-open');
-}
-
-function getStudentsInSelectedClass(period, course) {
-  const groupsInPeriod = allGroups.filter(g =>
-    String(g.period) === String(period) && g.course === course
-  );
-
-  const seenIds = new Set();
-  const studentsInClass = [];
-
-  groupsInPeriod.forEach(group => {
-    (group.members || []).forEach(member => {
-      if (!seenIds.has(member.id)) {
-        seenIds.add(member.id);
-        studentsInClass.push(member);
-      }
-    });
-  });
-
-  return studentsInClass;
-}
-
-function validateEnoughStudents(students, groupSize, period, course) {
-  if (students.length < groupSize) {
-    throw new Error(
-      `Not enough students in Period ${period} ${course}. Found ${students.length}, need at least ${groupSize}.`
-    );
-  }
-}
-
-function buildUserUids(students) {
-  return students.map(student => student.uid);
-}
-
-async function evaluatePersonaCoverage(user_uids, groupSize, totalStudents) {
-  try {
-    const checkResp = await fetch(`${pythonURI}/api/persona/evaluate-group`, {
-      ...fetchOptions,
-      method: 'POST',
-      body: JSON.stringify({ user_uids })
-    });
-
-    if (!checkResp.ok) {
-      return { studentsWithPersonas: 0, useAI: false };
-    }
-
-    const checkResult = await checkResp.json();
-    const studentsWithPersonas = checkResult.members.filter(
-      m => m.personas && m.personas.length > 0
-    ).length;
-
-    const minRequired = Math.max(groupSize * 2, Math.ceil(totalStudents * 0.5));
-    const useAI = studentsWithPersonas >= minRequired;
-
-    return { studentsWithPersonas, useAI };
-  } catch (err) {
-    console.log('⚠️ Persona check failed, falling back to random:', err);
-    return { studentsWithPersonas: 0, useAI: false };
-  }
-}
-
-async function requestAIGroups(user_uids, groupSize, feedbackRows) {
-  const response = await fetch(`${pythonURI}/api/persona/form-groups`, {
-    ...fetchOptions,
-    method: 'POST',
-    body: JSON.stringify({
-      user_uids,
-      group_size: groupSize,
-      incorporate_prior_experiences: feedbackRows.length > 0,
-      feedback_rows: feedbackRows
-    })
-  });
-
-  if (!response.ok) {
-    const error = await response.json();
-    throw new Error(error.message || 'Failed to form groups');
-  }
-
-  return response.json();
-}
-
-function buildRandomGroups(students, groupSize) {
-  const shuffled = [...students].sort(() => Math.random() - 0.5);
-  const randomGroups = [];
-
-  for (let i = 0; i < shuffled.length; i += groupSize) {
-    const groupMembers = shuffled.slice(i, i + groupSize);
-    randomGroups.push({
-      user_uids: groupMembers.map(p => p.uid),
-      team_score: null
-    });
-  }
-
-  return {
-    groups: randomGroups,
-    average_score: null,
-    method: 'random'
-  };
-}
-
-function getMethodBadgeHTML(useAI) {
-  return useAI
-    ? '<span class="inline-flex px-3 py-1 bg-indigo-600 text-white text-xs font-semibold rounded-full">✨ AI-Optimized</span>'
-    : '<span class="inline-flex px-3 py-1 bg-neutral-600 text-white text-xs font-semibold rounded-full">🎲 Random Assignment</span>';
-}
-
-function convertResultToGeneratedGroups(result, students, period, course, prefix) {
-  return result.groups.map((group, index) => {
-    const letter = String.fromCharCode(65 + index);
-    const members = group.user_uids.map(uid => {
-      const person = students.find(p => p.uid === uid);
-      return { id: person?.id, uid, name: person?.name || uid };
-    });
-
-    return {
-      name: `${prefix} ${letter}`,
-      period,
-      course,
-      team_score: group.team_score,
-      memberIds: members.map(m => m.id),
-      members
-    };
-  });
-}
-
-function renderSmartGroupMethodBadge(useAI) {
-  document.getElementById('stagingMethodBadge').innerHTML = getMethodBadgeHTML(useAI);
-}
-
-function showSmartGroupResults() {
-  document.getElementById('smartGroupResults').classList.remove('hidden');
-  document.getElementById('smartGroupResults').scrollIntoView({
-    behavior: 'smooth',
-    block: 'nearest'
-  });
-}
-
-function applySmartGroupResults(result, config, students, useAI) {
-  lockedGroups = new Set();
-
-  generatedGroups = convertResultToGeneratedGroups(
-    result,
-    students,
-    config.period,
-    config.course,
-    config.prefix
-  );
-
-  renderSmartGroupMethodBadge(useAI);
-  renderStagingGroups();
-  showSmartGroupResults();
-}
-
-async function buildSmartGroupResult(students, config, useAI) {
-  if (!useAI) {
-    console.log('🎲 Using random grouping');
-    showLoading('Creating random groups...');
-    return buildRandomGroups(students, config.groupSize);
-  }
-
-  console.log('✨ Using AI grouping');
-  showLoading('Using AI to create optimal groups...');
-
-  let feedbackRows = [];
-  try {
-    feedbackRows = collectFeedbackRowsForTraining();
-  } catch (e) {
-    throw new Error(`Prior experience input error: ${e.message}`);
-  }
-
-  return requestAIGroups(
-    buildUserUids(students),
-    config.groupSize,
-    feedbackRows
-  );
-}
-
-window.openSmartGroupFormation = function () {
-  openSmartGroupModalUI();
-};
-
-window.closeSmartGroupModal = function () {
-  closeSmartGroupModalUI();
-  resetSmartGroupForm();
-};
-
-window.generateSmartGroups = async function () {
-  showLoading('Finding students and analyzing personas...');
-
-  try {
-    const config = readSmartGroupForm();
-    validateSmartGroupForm(config);
-
-    const students = getStudentsInSelectedClass(config.period, config.course);
-    validateEnoughStudents(students, config.groupSize, config.period, config.course);
-
-    const user_uids = buildUserUids(students);
-    const { studentsWithPersonas, useAI } = await evaluatePersonaCoverage(
-      user_uids,
-      config.groupSize,
-      students.length
-    );
-
-    console.log(`Students with personas: ${studentsWithPersonas}`);
-    const result = await buildSmartGroupResult(students, config, useAI);
-
-    applySmartGroupResults(result, config, students, useAI);
-  } catch (error) {
-    console.error('❌ Error generating groups:', error);
-    alert(error.message || 'Failed to generate groups');
-  } finally {
-    hideLoading();
-  }
-};
-
-/* ================================
-   STAGING STATE
-================================ */
-let lockedGroups = new Set(); // indices of locked groups
-let dragSrc = null; // { groupIndex, memberIndex }
-
-window.displaySmartGroupResults = function(result, period, course, allPeople, useAI = true) {
-  const prefix = document.getElementById('smartGroupPrefix').value.trim() || 'Team';
-  lockedGroups = new Set();
-
-  // Build groups with member details
-  generatedGroups = result.groups.map((group, index) => {
-    const letter = String.fromCharCode(65 + index);
-    const members = group.user_uids.map(uid => {
-      const person = allPeople.find(p => p.uid === uid);
-      return { id: person?.id, uid, name: person?.name || uid };
-    });
-    return {
-      name: `${prefix} ${letter}`,
-      period, course,
-      team_score: group.team_score,
-      memberIds: members.map(m => m.id),
-      members
-    };
-  });
-
-  // Method badge
-  const methodBadge = useAI
-    ? '<span class="inline-flex px-3 py-1 bg-indigo-600 text-white text-xs font-semibold rounded-full">✨ AI-Optimized</span>'
-    : '<span class="inline-flex px-3 py-1 bg-neutral-600 text-white text-xs font-semibold rounded-full">🎲 Random Assignment</span>';
-  document.getElementById('stagingMethodBadge').innerHTML = methodBadge;
-
-  renderStagingGroups();
-
-  document.getElementById('smartGroupResults').classList.remove('hidden');
-  document.getElementById('smartGroupResults').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-}
-
-function renderStagingGroups() {
-  const container = document.getElementById('smartGroupResultsContent');
-
-  container.innerHTML = generatedGroups.map((group, gi) => {
-    const locked = lockedGroups.has(gi);
-    const scoreHtml = group.team_score !== null
-      ? `<span class="text-xs font-semibold ${group.team_score >= 70 ? 'text-green-400' : group.team_score >= 60 ? 'text-yellow-400' : 'text-orange-400'}">${group.team_score.toFixed(1)}</span>`
-      : `<span class="text-xs text-gray-500">Random</span>`;
-
-    const membersHtml = group.members.map((m, mi) => `
+      }
+
+      window.togglePriorExperience = function () {
+        const toggle = document.getElementById("usePriorExpToggle");
+        const knob = document.getElementById("usePriorExpKnob");
+        const form = document.getElementById("priorExperienceForm");
+
+        if (!toggle || !knob || !form) return;
+
+        const on = toggle.checked;
+        form.classList.toggle("hidden", !on);
+
+        // tiny visual toggle effect
+        knob.style.transform = on ? "translateX(20px)" : "translateX(0px)";
+        toggle.parentElement.querySelector("div").style.backgroundColor = on ? "#4f46e5" : "#525252";
+
+        if (on) renderPriorPersonaChoices();
+      };
+
+      window.previewPriorFeedbackCount = function () {
+        const status = document.getElementById("priorFeedbackStatus");
+        if (!status) return;
+
+        const stored = (typeof getFeedbackStore === "function") ? getFeedbackStore() : [];
+        status.textContent = `Stored feedback rows on this device: ${stored.length}`;
+      };
+
+      // Builds one feedback row from the inline “prior experiences” form
+      function readInlinePriorExperienceRow() {
+        const enabled = document.getElementById("usePriorExpToggle")?.checked;
+        if (!enabled) return null;
+
+        const prevSize = parseInt(document.getElementById("priorGroupSize")?.value || "0", 10);
+        const studentRating = parseInt(document.getElementById("priorStudentRating")?.value || "0", 10);
+        const teacherRating = parseInt(document.getElementById("priorTeacherRating")?.value || "0", 10);
+        const note = (document.getElementById("priorNote")?.value || "").trim();
+
+        if (!(prevSize >= 2 && prevSize <= 10)) throw new Error("Prior group size must be 2–10.");
+        if (!(studentRating >= 1 && studentRating <= 5)) throw new Error("Prior student rating must be 1–5.");
+        if (!(teacherRating >= 1 && teacherRating <= 5)) throw new Error("Prior teacher rating must be 1–5.");
+
+        const personas = [...document.querySelectorAll(".prior-persona-checkbox:checked")].map(cb => cb.value);
+        if (!personas.length) throw new Error("Select at least 1 persona for the prior group.");
+
+        return {
+          ts: Date.now(),
+          source: "inline_prior_experience",
+          prev_group_size: prevSize,
+          personas: personas,
+          student_rating_1to5: studentRating,
+          teacher_rating_1to5: teacherRating,
+          note
+        };
+      }
+
+      // Collects feedback rows that will be sent to Flask:
+      // - localStorage saved feedback (your existing modal submissions)
+      // - + the inline prior experience row (if enabled)
+      function collectFeedbackRowsForTraining() {
+        const toggleOn = document.getElementById("usePriorExpToggle")?.checked;
+        if (!toggleOn) return [];
+
+        const stored = (typeof getFeedbackStore === "function") ? getFeedbackStore() : [];
+        const normalizedStored = stored.map(r => ({
+          ts: r.ts,
+          source: "stored_group_feedback",
+          prev_group_size: (r.members?.length ? r.members.length : null),
+          // if you later add personas snapshot to stored feedback, include it here:
+          personas: r.personas || null,
+          student_rating_1to5: r.student_rating_1to5,
+          teacher_rating_1to5: r.teacher_rating_1to5,
+          note: r.note
+        }));
+
+        const inlineRow = readInlinePriorExperienceRow(); // can throw
+        return inlineRow ? [...normalizedStored, inlineRow] : normalizedStored;
+      }
+
+      /* ================================
+         FILTERS
+      ================================ */
+      window.toggleDropdown = function (type) {
+        document.getElementById(type + "Dropdown").classList.toggle("hidden");
+      }
+
+      window.clearAllFilters = function () {
+        activePeriods = [];
+        activeClasses = [];
+        document.querySelectorAll(".period-checkbox,.class-checkbox").forEach(cb => cb.checked = false);
+        document.getElementById("periodAllCheckbox").checked = true;
+        document.getElementById("classAllCheckbox").checked = true;
+        document.getElementById("periodFilterLabel").textContent = "All Periods";
+        document.getElementById("classFilterLabel").textContent = "All Classes";
+        document.getElementById("searchInput").value = "";
+        searchGroups();  // Reload all groups
+      }
+
+      window.onPeriodCheckboxChange = function (cb) {
+        activePeriods = [...document.querySelectorAll(".period-checkbox:checked")].map(c => c.value);
+        document.getElementById("periodAllCheckbox").checked = !activePeriods.length;
+        document.getElementById("periodFilterLabel").textContent =
+          activePeriods.length ? `Periods: ${activePeriods.join(", ")}` : "All Periods";
+        renderGroups();
+      }
+
+      window.onClassCheckboxChange = function (cb) {
+        activeClasses = [...document.querySelectorAll(".class-checkbox:checked")].map(c => c.value);
+        document.getElementById("classAllCheckbox").checked = !activeClasses.length;
+        document.getElementById("classFilterLabel").textContent =
+          activeClasses.length ? `Classes: ${activeClasses.join(", ")}` : "All Classes";
+        renderGroups();
+      }
+
+      window.onPeriodAllChange = function (cb) {
+        if (cb.checked) {
+          document.querySelectorAll(".period-checkbox").forEach(c => c.checked = false);
+          activePeriods = [];
+          renderGroups();
+        }
+      }
+
+      window.onClassAllChange = function (cb) {
+        if (cb.checked) {
+          document.querySelectorAll(".class-checkbox").forEach(c => c.checked = false);
+          activeClasses = [];
+          renderGroups();
+        }
+      }
+
+      /* ================================
+         SMART GROUP FORMATION (SRP VERSION)
+      ================================ */
+      let generatedGroups = []; // Store generated groups before saving
+
+      function readSmartGroupForm() {
+        return {
+          period: document.getElementById('smartGroupPeriod').value,
+          course: document.getElementById('smartGroupClass').value,
+          groupSize: parseInt(document.getElementById('smartGroupSize').value, 10),
+          prefix: document.getElementById('smartGroupPrefix').value.trim() || 'Team'
+        };
+      }
+
+      function validateSmartGroupForm({ period, course, groupSize }) {
+        if (!period || !course) {
+          throw new Error('Please select both period and class');
+        }
+
+        if (groupSize < 2 || groupSize > 10) {
+          throw new Error('Group size must be between 2 and 10');
+        }
+      }
+
+      function resetSmartGroupForm() {
+        document.getElementById('smartGroupPeriod').value = '';
+        document.getElementById('smartGroupClass').value = '';
+        document.getElementById('smartGroupSize').value = '4';
+        document.getElementById('smartGroupPrefix').value = '';
+        generatedGroups = [];
+        lockedGroups = new Set();
+      }
+
+      function openSmartGroupModalUI() {
+        document.getElementById('smartGroupModal').classList.remove('hidden');
+        document.getElementById('smartGroupResults').classList.add('hidden');
+        document.body.classList.add('modal-open');
+      }
+
+      function closeSmartGroupModalUI() {
+        document.getElementById('smartGroupModal').classList.add('hidden');
+        document.body.classList.remove('modal-open');
+      }
+
+      function getStudentsInSelectedClass(period, course) {
+        const groupsInPeriod = allGroups.filter(g =>
+          String(g.period) === String(period) && g.course === course
+        );
+
+        const seenIds = new Set();
+        const studentsInClass = [];
+
+        groupsInPeriod.forEach(group => {
+          (group.members || []).forEach(member => {
+            if (!seenIds.has(member.id)) {
+              seenIds.add(member.id);
+              studentsInClass.push(member);
+            }
+          });
+        });
+
+        return studentsInClass;
+      }
+
+      function validateEnoughStudents(students, groupSize, period, course) {
+        if (students.length < groupSize) {
+          throw new Error(
+            `Not enough students in Period ${period} ${course}. Found ${students.length}, need at least ${groupSize}.`
+          );
+        }
+      }
+
+      function buildUserUids(students) {
+        return students.map(student => student.uid);
+      }
+
+      async function evaluatePersonaCoverage(user_uids, groupSize, totalStudents) {
+        try {
+          const checkResp = await fetch(`${pythonURI}/api/persona/evaluate-group`, {
+            ...fetchOptions,
+            method: 'POST',
+            body: JSON.stringify({ user_uids })
+          });
+
+          if (!checkResp.ok) {
+            return { studentsWithPersonas: 0, useAI: false };
+          }
+
+          const checkResult = await checkResp.json();
+          const studentsWithPersonas = checkResult.members.filter(
+            m => m.personas && m.personas.length > 0
+          ).length;
+
+          const minRequired = Math.max(groupSize * 2, Math.ceil(totalStudents * 0.5));
+          const useAI = studentsWithPersonas >= minRequired;
+
+          return { studentsWithPersonas, useAI };
+        } catch (err) {
+          console.log('⚠️ Persona check failed, falling back to random:', err);
+          return { studentsWithPersonas: 0, useAI: false };
+        }
+      }
+
+      async function requestAIGroups(user_uids, groupSize, feedbackRows) {
+        const response = await fetch(`${pythonURI}/api/persona/form-groups`, {
+          ...fetchOptions,
+          method: 'POST',
+          body: JSON.stringify({
+            user_uids,
+            group_size: groupSize,
+            incorporate_prior_experiences: feedbackRows.length > 0,
+            feedback_rows: feedbackRows
+          })
+        });
+
+        if (!response.ok) {
+          const error = await response.json();
+          throw new Error(error.message || 'Failed to form groups');
+        }
+
+        return response.json();
+      }
+
+      function buildRandomGroups(students, groupSize) {
+        const shuffled = [...students].sort(() => Math.random() - 0.5);
+        const randomGroups = [];
+
+        for (let i = 0; i < shuffled.length; i += groupSize) {
+          const groupMembers = shuffled.slice(i, i + groupSize);
+          randomGroups.push({
+            user_uids: groupMembers.map(p => p.uid),
+            team_score: null
+          });
+        }
+
+        return {
+          groups: randomGroups,
+          average_score: null,
+          method: 'random'
+        };
+      }
+
+      function getMethodBadgeHTML(useAI) {
+        return useAI
+          ? '<span class="inline-flex px-3 py-1 bg-indigo-600 text-white text-xs font-semibold rounded-full">✨ AI-Optimized</span>'
+          : '<span class="inline-flex px-3 py-1 bg-neutral-600 text-white text-xs font-semibold rounded-full">🎲 Random Assignment</span>';
+      }
+
+      function convertResultToGeneratedGroups(result, students, period, course, prefix) {
+        return result.groups.map((group, index) => {
+          const letter = String.fromCharCode(65 + index);
+          const members = group.user_uids.map(uid => {
+            const person = students.find(p => p.uid === uid);
+            return { id: person?.id, uid, name: person?.name || uid };
+          });
+
+          return {
+            name: `${prefix} ${letter}`,
+            period,
+            course,
+            team_score: group.team_score,
+            memberIds: members.map(m => m.id),
+            members
+          };
+        });
+      }
+
+      function renderSmartGroupMethodBadge(useAI) {
+        document.getElementById('stagingMethodBadge').innerHTML = getMethodBadgeHTML(useAI);
+      }
+
+      function showSmartGroupResults() {
+        document.getElementById('smartGroupResults').classList.remove('hidden');
+        document.getElementById('smartGroupResults').scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest'
+        });
+      }
+
+      function applySmartGroupResults(result, config, students, useAI) {
+        lockedGroups = new Set();
+
+        generatedGroups = convertResultToGeneratedGroups(
+          result,
+          students,
+          config.period,
+          config.course,
+          config.prefix
+        );
+
+        renderSmartGroupMethodBadge(useAI);
+        renderStagingGroups();
+        showSmartGroupResults();
+      }
+
+      async function buildSmartGroupResult(students, config, useAI) {
+        if (!useAI) {
+          console.log('🎲 Using random grouping');
+          showLoading('Creating random groups...');
+          return buildRandomGroups(students, config.groupSize);
+        }
+
+        console.log('✨ Using AI grouping');
+        showLoading('Using AI to create optimal groups...');
+
+        let feedbackRows = [];
+        try {
+          feedbackRows = collectFeedbackRowsForTraining();
+        } catch (e) {
+          throw new Error(`Prior experience input error: ${e.message}`);
+        }
+
+        return requestAIGroups(
+          buildUserUids(students),
+          config.groupSize,
+          feedbackRows
+        );
+      }
+
+      window.openSmartGroupFormation = function () {
+        openSmartGroupModalUI();
+      };
+
+      window.closeSmartGroupModal = function () {
+        closeSmartGroupModalUI();
+        resetSmartGroupForm();
+      };
+
+      window.generateSmartGroups = async function () {
+        showLoading('Finding students and analyzing personas...');
+
+        try {
+          const config = readSmartGroupForm();
+          validateSmartGroupForm(config);
+
+          const students = getStudentsInSelectedClass(config.period, config.course);
+          validateEnoughStudents(students, config.groupSize, config.period, config.course);
+
+          const user_uids = buildUserUids(students);
+          const { studentsWithPersonas, useAI } = await evaluatePersonaCoverage(
+            user_uids,
+            config.groupSize,
+            students.length
+          );
+
+          console.log(`Students with personas: ${studentsWithPersonas}`);
+          const result = await buildSmartGroupResult(students, config, useAI);
+
+          applySmartGroupResults(result, config, students, useAI);
+        } catch (error) {
+          console.error('❌ Error generating groups:', error);
+          alert(error.message || 'Failed to generate groups');
+        } finally {
+          hideLoading();
+        }
+      };
+
+      /* ================================
+         STAGING STATE
+      ================================ */
+      let lockedGroups = new Set(); // indices of locked groups
+      let dragSrc = null; // { groupIndex, memberIndex }
+
+      window.displaySmartGroupResults = function (result, period, course, allPeople, useAI = true) {
+        const prefix = document.getElementById('smartGroupPrefix').value.trim() || 'Team';
+        lockedGroups = new Set();
+
+        // Build groups with member details
+        generatedGroups = result.groups.map((group, index) => {
+          const letter = String.fromCharCode(65 + index);
+          const members = group.user_uids.map(uid => {
+            const person = allPeople.find(p => p.uid === uid);
+            return { id: person?.id, uid, name: person?.name || uid };
+          });
+          return {
+            name: `${prefix} ${letter}`,
+            period, course,
+            team_score: group.team_score,
+            memberIds: members.map(m => m.id),
+            members
+          };
+        });
+
+        // Method badge
+        const methodBadge = useAI
+          ? '<span class="inline-flex px-3 py-1 bg-indigo-600 text-white text-xs font-semibold rounded-full">✨ AI-Optimized</span>'
+          : '<span class="inline-flex px-3 py-1 bg-neutral-600 text-white text-xs font-semibold rounded-full">🎲 Random Assignment</span>';
+        document.getElementById('stagingMethodBadge').innerHTML = methodBadge;
+
+        renderStagingGroups();
+
+        document.getElementById('smartGroupResults').classList.remove('hidden');
+        document.getElementById('smartGroupResults').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      }
+
+      function renderStagingGroups() {
+        const container = document.getElementById('smartGroupResultsContent');
+
+        container.innerHTML = generatedGroups.map((group, gi) => {
+          const locked = lockedGroups.has(gi);
+          const scoreHtml = group.team_score !== null
+            ? `<span class="text-xs font-semibold ${group.team_score >= 70 ? 'text-green-400' : group.team_score >= 60 ? 'text-yellow-400' : 'text-orange-400'}">${group.team_score.toFixed(1)}</span>`
+            : `<span class="text-xs text-gray-500">Random</span>`;
+
+          const membersHtml = group.members.map((m, mi) => `
       <div
         class="staging-member flex items-center gap-2 px-2 py-1.5 bg-neutral-700 hover:bg-neutral-600 rounded-lg cursor-grab active:cursor-grabbing transition-colors text-xs"
         draggable="true"
@@ -1812,7 +1873,7 @@ <h4 class="text-lg font-semibold text-white hover:text-indigo-400 transition-col
       </div>
     `).join('');
 
-    return `
+          return `
       <div
         class="staging-group rounded-xl border-2 ${locked ? 'border-green-500/60 bg-green-950/20' : 'border-neutral-600 bg-neutral-800'} transition-all duration-200 flex flex-col"
         data-group="${gi}"
@@ -1852,854 +1913,873 @@ <h4 class="text-lg font-semibold text-white hover:text-indigo-400 transition-col
         </div>
       </div>
     `;
-  }).join('');
-}
-
-/* ================================
-   DRAG AND DROP
-================================ */
-window.onDragStart = function(e, groupIndex, memberIndex) {
-  dragSrc = { groupIndex, memberIndex };
-  e.dataTransfer.effectAllowed = 'move';
-  e.target.classList.add('opacity-40');
-
-  // Show drop hints on all other groups
-  document.querySelectorAll('.staging-group').forEach((card, i) => {
-    if (i !== groupIndex) {
-      card.querySelector('.drop-hint')?.classList.remove('hidden');
-    }
-  });
-}
-
-window.onDragEnd = function(e) {
-  e.target.classList.remove('opacity-40');
-  document.querySelectorAll('.drop-hint').forEach(h => h.classList.add('hidden'));
-  document.querySelectorAll('.staging-group').forEach(c => c.classList.remove('drag-over'));
-}
-
-window.onDragOver = function(e) {
-  e.preventDefault();
-  e.dataTransfer.dropEffect = 'move';
-  e.currentTarget.classList.add('drag-over');
-}
-
-window.onDragLeave = function(e) {
-  e.currentTarget.classList.remove('drag-over');
-}
-
-window.onDrop = function(e, targetGroupIndex) {
-  e.preventDefault();
-  e.currentTarget.classList.remove('drag-over');
-
-  if (dragSrc === null) return;
-  if (dragSrc.groupIndex === targetGroupIndex) return;
-
-  const { groupIndex: srcGi, memberIndex: srcMi } = dragSrc;
-
-  // Move the member
-  const member = generatedGroups[srcGi].members[srcMi];
-  generatedGroups[srcGi].members.splice(srcMi, 1);
-  generatedGroups[srcGi].memberIds = generatedGroups[srcGi].members.map(m => m.id);
-  generatedGroups[targetGroupIndex].members.push(member);
-  generatedGroups[targetGroupIndex].memberIds = generatedGroups[targetGroupIndex].members.map(m => m.id);
-
-  // Auto-unlock source group if it was locked
-  if (lockedGroups.has(srcGi)) {
-    lockedGroups.delete(srcGi);
-  }
-
-  dragSrc = null;
-  renderStagingGroups();
-}
-
-/* ================================
-   LOCK TOGGLE
-================================ */
-window.toggleLock = function(groupIndex) {
-  if (lockedGroups.has(groupIndex)) {
-    lockedGroups.delete(groupIndex);
-  } else {
-    lockedGroups.add(groupIndex);
-  }
-  renderStagingGroups();
-}
-
-/* ================================
-   REGENERATE UNLOCKED
-================================ */
-window.regenerateUnlocked = async function() {
-  const unlockedIndices = generatedGroups
-    .map((_, i) => i)
-    .filter(i => !lockedGroups.has(i));
-
-  if (unlockedIndices.length === 0) {
-    alert('All groups are locked. Unlock at least one group to regenerate.');
-    return;
-  }
-
-  // Collect students from unlocked groups only
-  const unlockedStudents = [];
-  const seenIds = new Set();
-  unlockedIndices.forEach(i => {
-    generatedGroups[i].members.forEach(m => {
-      if (!seenIds.has(m.id)) {
-        seenIds.add(m.id);
-        unlockedStudents.push(m);
-      }
-    });
-  });
-
-  const groupSize = parseInt(document.getElementById('smartGroupSize').value);
-  const period = document.getElementById('smartGroupPeriod').value;
-  const course = document.getElementById('smartGroupClass').value;
-
-  showLoading('Regenerating unlocked groups...');
-
-  try {
-    const user_uids = unlockedStudents.map(s => s.uid);
-
-    // Try AI, fall back to random
-    let newGroups = [];
-    try {
-      const resp = await fetch(`${pythonURI}/api/persona/form-groups`, {
-        ...fetchOptions,
-        method: 'POST',
-        body: JSON.stringify({ user_uids, group_size: groupSize })
-      });
-      if (resp.ok) {
-        const result = await resp.json();
-        const prefix = document.getElementById('smartGroupPrefix').value.trim() || 'Team';
-        newGroups = result.groups.map(g => {
-          const members = g.user_uids.map(uid => unlockedStudents.find(s => s.uid === uid)).filter(Boolean);
-          return { members, memberIds: members.map(m => m.id), team_score: g.team_score };
-        });
-      } else {
-        throw new Error('AI failed');
-      }
-    } catch {
-      // Random fallback
-      const shuffled = [...unlockedStudents].sort(() => Math.random() - 0.5);
-      for (let i = 0; i < shuffled.length; i += groupSize) {
-        const members = shuffled.slice(i, i + groupSize);
-        newGroups.push({ members, memberIds: members.map(m => m.id), team_score: null });
-      }
-    }
-
-    // Replace unlocked groups with new ones, keeping names and period/course
-    let newGroupIdx = 0;
-    unlockedIndices.forEach(i => {
-      if (newGroupIdx < newGroups.length) {
-        generatedGroups[i].members = newGroups[newGroupIdx].members;
-        generatedGroups[i].memberIds = newGroups[newGroupIdx].memberIds;
-        generatedGroups[i].team_score = newGroups[newGroupIdx].team_score;
-        newGroupIdx++;
-      } else {
-        // No more new groups - empty this slot
-        generatedGroups[i].members = [];
-        generatedGroups[i].memberIds = [];
-      }
-    });
-
-    // Remove empty groups
-    generatedGroups = generatedGroups.filter(g => g.members.length > 0);
-
-    renderStagingGroups();
-  } catch (err) {
-    console.error('Regeneration failed:', err);
-    alert('Failed to regenerate groups');
-  } finally {
-    hideLoading();
-  }
-}
-
-/* ================================
-   SAVE
-================================ */
-window.saveSmartGroups = async function() {
-  if (!generatedGroups.length) {
-    alert('No groups to save');
-    return;
-  }
-
-  showLoading(`Creating ${generatedGroups.length} groups...`);
-  const createdGroups = [];
-  const failedGroups = [];
-
-  try {
-    for (let i = 0; i < generatedGroups.length; i++) {
-      const group = generatedGroups[i];
-      showLoading(`Creating group ${i + 1} of ${generatedGroups.length}...`);
-
-      try {
-        const createResp = await fetch(`${javaURI}/api/groups`, {
-          ...fetchOptions,
-          method: 'POST',
-          body: JSON.stringify({ name: group.name, period: group.period, course: group.course })
+        }).join('');
+      }
+
+      /* ================================
+         DRAG AND DROP
+      ================================ */
+      window.onDragStart = function (e, groupIndex, memberIndex) {
+        dragSrc = { groupIndex, memberIndex };
+        e.dataTransfer.effectAllowed = 'move';
+        e.target.classList.add('opacity-40');
+
+        // Show drop hints on all other groups
+        document.querySelectorAll('.staging-group').forEach((card, i) => {
+          if (i !== groupIndex) {
+            card.querySelector('.drop-hint')?.classList.remove('hidden');
+          }
         });
+      }
+
+      window.onDragEnd = function (e) {
+        e.target.classList.remove('opacity-40');
+        document.querySelectorAll('.drop-hint').forEach(h => h.classList.add('hidden'));
+        document.querySelectorAll('.staging-group').forEach(c => c.classList.remove('drag-over'));
+      }
+
+      window.onDragOver = function (e) {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        e.currentTarget.classList.add('drag-over');
+      }
+
+      window.onDragLeave = function (e) {
+        e.currentTarget.classList.remove('drag-over');
+      }
+
+      window.onDrop = function (e, targetGroupIndex) {
+        e.preventDefault();
+        e.currentTarget.classList.remove('drag-over');
+
+        if (dragSrc === null) return;
+        if (dragSrc.groupIndex === targetGroupIndex) return;
+
+        const { groupIndex: srcGi, memberIndex: srcMi } = dragSrc;
+
+        // Move the member
+        const member = generatedGroups[srcGi].members[srcMi];
+        generatedGroups[srcGi].members.splice(srcMi, 1);
+        generatedGroups[srcGi].memberIds = generatedGroups[srcGi].members.map(m => m.id);
+        generatedGroups[targetGroupIndex].members.push(member);
+        generatedGroups[targetGroupIndex].memberIds = generatedGroups[targetGroupIndex].members.map(m => m.id);
+
+        // Auto-unlock source group if it was locked
+        if (lockedGroups.has(srcGi)) {
+          lockedGroups.delete(srcGi);
+        }
 
-        if (!createResp.ok) {
-          failedGroups.push(group.name);
-          continue;
+        dragSrc = null;
+        renderStagingGroups();
+      }
+
+      /* ================================
+         LOCK TOGGLE
+      ================================ */
+      window.toggleLock = function (groupIndex) {
+        if (lockedGroups.has(groupIndex)) {
+          lockedGroups.delete(groupIndex);
+        } else {
+          lockedGroups.add(groupIndex);
         }
+        renderStagingGroups();
+      }
 
-        const createdGroup = await createResp.json();
+      /* ================================
+         REGENERATE UNLOCKED
+      ================================ */
+      window.regenerateUnlocked = async function () {
+        const unlockedIndices = generatedGroups
+          .map((_, i) => i)
+          .filter(i => !lockedGroups.has(i));
+
+        if (unlockedIndices.length === 0) {
+          alert('All groups are locked. Unlock at least one group to regenerate.');
+          return;
+        }
 
-        for (const memberId of group.memberIds) {
-          if (!memberId) continue;
+        // Collect students from unlocked groups only
+        const unlockedStudents = [];
+        const seenIds = new Set();
+        unlockedIndices.forEach(i => {
+          generatedGroups[i].members.forEach(m => {
+            if (!seenIds.has(m.id)) {
+              seenIds.add(m.id);
+              unlockedStudents.push(m);
+            }
+          });
+        });
+
+        const groupSize = parseInt(document.getElementById('smartGroupSize').value);
+        const period = document.getElementById('smartGroupPeriod').value;
+        const course = document.getElementById('smartGroupClass').value;
+
+        showLoading('Regenerating unlocked groups...');
+
+        try {
+          const user_uids = unlockedStudents.map(s => s.uid);
+
+          // Try AI, fall back to random
+          let newGroups = [];
           try {
-            await fetch(`${javaURI}/api/groups/${createdGroup.id}/members/${memberId}`, {
-              ...fetchOptions, method: 'POST'
+            const resp = await fetch(`${pythonURI}/api/persona/form-groups`, {
+              ...fetchOptions,
+              method: 'POST',
+              body: JSON.stringify({ user_uids, group_size: groupSize })
             });
-          } catch (err) {
-            console.error(`Failed to add member ${memberId}`, err);
+            if (resp.ok) {
+              const result = await resp.json();
+              const prefix = document.getElementById('smartGroupPrefix').value.trim() || 'Team';
+              newGroups = result.groups.map(g => {
+                const members = g.user_uids.map(uid => unlockedStudents.find(s => s.uid === uid)).filter(Boolean);
+                return { members, memberIds: members.map(m => m.id), team_score: g.team_score };
+              });
+            } else {
+              throw new Error('AI failed');
+            }
+          } catch {
+            // Random fallback
+            const shuffled = [...unlockedStudents].sort(() => Math.random() - 0.5);
+            for (let i = 0; i < shuffled.length; i += groupSize) {
+              const members = shuffled.slice(i, i + groupSize);
+              newGroups.push({ members, memberIds: members.map(m => m.id), team_score: null });
+            }
           }
+
+          // Replace unlocked groups with new ones, keeping names and period/course
+          let newGroupIdx = 0;
+          unlockedIndices.forEach(i => {
+            if (newGroupIdx < newGroups.length) {
+              generatedGroups[i].members = newGroups[newGroupIdx].members;
+              generatedGroups[i].memberIds = newGroups[newGroupIdx].memberIds;
+              generatedGroups[i].team_score = newGroups[newGroupIdx].team_score;
+              newGroupIdx++;
+            } else {
+              // No more new groups - empty this slot
+              generatedGroups[i].members = [];
+              generatedGroups[i].memberIds = [];
+            }
+          });
+
+          // Remove empty groups
+          generatedGroups = generatedGroups.filter(g => g.members.length > 0);
+
+          renderStagingGroups();
+        } catch (err) {
+          console.error('Regeneration failed:', err);
+          alert('Failed to regenerate groups');
+        } finally {
+          hideLoading();
+        }
+      }
+
+      /* ================================
+         SAVE
+      ================================ */
+      window.saveSmartGroups = async function () {
+        if (!generatedGroups.length) {
+          alert('No groups to save');
+          return;
         }
 
-        createdGroups.push(createdGroup);
-      } catch (err) {
-        failedGroups.push(group.name);
-      }
-    }
-
-    allGroups.push(...createdGroups);
-
-    if (failedGroups.length === 0) {
-      alert(`✅ Successfully created all ${createdGroups.length} groups!`);
-    } else {
-      alert(`⚠️ Created ${createdGroups.length} groups. ${failedGroups.length} failed.`);
-    }
-
-    closeSmartGroupModal();
-    renderGroups();
-  } catch (err) {
-    alert(`Failed to save groups: ${err.message}`);
-  } finally {
-    hideLoading();
-  }
-}
-
-  // ================================
-  // CHAT FUNCTIONALITY
-  // ================================
-  const slashCommands = ['/calendar', '/adduser'];
-  let selectedCommandIndex = 0;
-
-  async function initializeChatUser() {
-    try {
-      const res = await fetch(`${pythonURI}/api/id`, fetchOptions);
-      if (!res.ok) return;
-      const user = await res.json();
-      currentUser = user || null;
-      currentUserDisplayName = user?.name || user?.uid || user?.github || 'You';
-    } catch (err) {
-      console.warn('User lookup failed', err);
-    }
-  }
-
-  function formatTimestamp(isoString) {
-    if (!isoString) return '';
-    const date = new Date(isoString);
-    if (Number.isNaN(date.getTime())) return '';
-    return date.toLocaleString(undefined, {
-      month: 'short',
-      day: 'numeric',
-      hour: 'numeric',
-      minute: '2-digit'
-    });
-  }
-
-  function fileToBase64(file) {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = () => {
-        const base64 = reader.result.split(',')[1];
-        resolve(base64);
+        showLoading(`Creating ${generatedGroups.length} groups...`);
+        const createdGroups = [];
+        const failedGroups = [];
+
+        try {
+          for (let i = 0; i < generatedGroups.length; i++) {
+            const group = generatedGroups[i];
+            showLoading(`Creating group ${i + 1} of ${generatedGroups.length}...`);
+
+            try {
+              const createResp = await fetch(`${javaURI}/api/groups`, {
+                ...fetchOptions,
+                method: 'POST',
+                body: JSON.stringify({ name: group.name, period: group.period, course: group.course })
+              });
+
+              if (!createResp.ok) {
+                failedGroups.push(group.name);
+                continue;
+              }
+
+              const createdGroup = await createResp.json();
+
+              for (const memberId of group.memberIds) {
+                if (!memberId) continue;
+                try {
+                  await fetch(`${javaURI}/api/groups/${createdGroup.id}/members/${memberId}`, {
+                    ...fetchOptions, method: 'POST'
+                  });
+                } catch (err) {
+                  console.error(`Failed to add member ${memberId}`, err);
+                }
+              }
+
+              createdGroups.push(createdGroup);
+            } catch (err) {
+              failedGroups.push(group.name);
+            }
+          }
+
+          allGroups.push(...createdGroups);
+
+          if (failedGroups.length === 0) {
+            alert(`✅ Successfully created all ${createdGroups.length} groups!`);
+          } else {
+            alert(`⚠️ Created ${createdGroups.length} groups. ${failedGroups.length} failed.`);
+          }
+
+          closeSmartGroupModal();
+          renderGroups();
+        } catch (err) {
+          alert(`Failed to save groups: ${err.message}`);
+        } finally {
+          hideLoading();
+        }
+      }
+
+      // ================================
+      // CHAT FUNCTIONALITY
+      // ================================
+      const slashCommands = ['/calendar', '/adduser'];
+      let selectedCommandIndex = 0;
+
+      async function initializeChatUser() {
+        try {
+          const res = await fetch(`${pythonURI}/api/id`, fetchOptions);
+          if (!res.ok) return;
+          const user = await res.json();
+          currentUser = user || null;
+          currentUserDisplayName = user?.name || user?.uid || user?.github || 'You';
+        } catch (err) {
+          console.warn('User lookup failed', err);
+        }
+      }
+
+      function formatTimestamp(isoString) {
+        if (!isoString) return '';
+        const date = new Date(isoString);
+        if (Number.isNaN(date.getTime())) return '';
+        return date.toLocaleString(undefined, {
+          month: 'short',
+          day: 'numeric',
+          hour: 'numeric',
+          minute: '2-digit'
+        });
+      }
+
+      function fileToBase64(file) {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => {
+            const base64 = reader.result.split(',')[1];
+            resolve(base64);
+          };
+          reader.onerror = reject;
+          reader.readAsDataURL(file);
+        });
+      }
+
+      function setChatImagePreview(base64, mimeType = 'image/png') {
+        pendingChatImageBase64 = base64;
+        pendingChatImageMime = mimeType;
+        const messageBox = document.getElementById('imageMessageBox');
+        messageBox.innerHTML = '';
+        const img = document.createElement('img');
+        img.src = `data:${mimeType};base64,${base64}`;
+        img.alt = 'Selected image';
+        img.className = 'mt-2 max-w-xs rounded-lg border border-neutral-700';
+        messageBox.appendChild(img);
+      }
+
+      function clearChatImagePreview() {
+        pendingChatImageBase64 = null;
+        pendingChatImageMime = 'image/png';
+        const messageBox = document.getElementById('imageMessageBox');
+        messageBox.innerHTML = '';
+      }
+
+      window.triggerChatImagePicker = function () {
+        const input = document.getElementById('chatImageInput');
+        if (input) input.click();
       };
-      reader.onerror = reject;
-      reader.readAsDataURL(file);
-    });
-  }
-
-  function setChatImagePreview(base64, mimeType = 'image/png') {
-    pendingChatImageBase64 = base64;
-    pendingChatImageMime = mimeType;
-    const messageBox = document.getElementById('imageMessageBox');
-    messageBox.innerHTML = '';
-    const img = document.createElement('img');
-    img.src = `data:${mimeType};base64,${base64}`;
-    img.alt = 'Selected image';
-    img.className = 'mt-2 max-w-xs rounded-lg border border-neutral-700';
-    messageBox.appendChild(img);
-  }
-
-  function clearChatImagePreview() {
-    pendingChatImageBase64 = null;
-    pendingChatImageMime = 'image/png';
-    const messageBox = document.getElementById('imageMessageBox');
-    messageBox.innerHTML = '';
-  }
-
-  window.triggerChatImagePicker = function () {
-    const input = document.getElementById('chatImageInput');
-    if (input) input.click();
-  };
-
-  window.handleChatImageSelected = async function (event) {
-    const file = event.target.files?.[0];
-    if (!file) return;
-    try {
-      const base64 = await fileToBase64(file);
-      setChatImagePreview(base64, file.type || 'image/png');
-    } catch (err) {
-      console.error('Failed to read image', err);
-    }
-  };
-
-  window.handlePastedChatImage = async function (event) {
-    const items = (event.clipboardData || window.clipboardData)?.items || [];
-    const imageItem = Array.from(items).find(item => item.type.startsWith('image/'));
-    if (!imageItem) return;
-    const imageFile = imageItem.getAsFile();
-    if (!imageFile) return;
-    try {
-      const base64 = await fileToBase64(imageFile);
-      setChatImagePreview(base64, imageFile.type || 'image/png');
-    } catch (err) {
-      console.error('Image paste failed', err);
-    }
-  };
-
-  function getChatMessageKey(msg) {
-    return JSON.stringify([
-      msg?.name || '',
-      msg?.date || '',
-      msg?.message || '',
-      msg?.image || ''
-    ]);
-  }
-
-  function getChatImageSrc(image) {
-    if (!image) return null;
-    if (/^(data:|https?:\/\/|\/)/i.test(image)) return image;
-    return `data:image/png;base64,${image}`;
-  }
-
-  function appendSingleMessage(msg) {
-    const chatMessages = document.getElementById('chatMessages');
-    let emptyState = document.getElementById('chatEmptyState');
-    const messageKey = getChatMessageKey(msg);
-
-    if (!chatMessages || renderedChatMessageKeys.has(messageKey)) {
-      return;
-    }
-
-    if (!emptyState) {
-      emptyState = document.createElement('div');
-      emptyState.id = 'chatEmptyState';
-      emptyState.className = 'text-center text-gray-500 text-sm py-6';
-      emptyState.textContent = 'No messages yet.';
-    }
-
-    emptyState.classList.add('hidden');
-
-    const wrapper = document.createElement('div');
-
-    const header = document.createElement('div');
-    header.className = 'flex items-baseline gap-2 mb-1';
-
-    const nameEl = document.createElement('span');
-    nameEl.className = 'text-white font-semibold text-sm';
-    nameEl.textContent = msg.name === currentUserDisplayName ? 'You' : (msg.name || 'Unknown');
-
-    const timeEl = document.createElement('span');
-    timeEl.className = 'text-gray-500 text-xs';
-    timeEl.textContent = formatTimestamp(msg.date);
-
-    header.appendChild(nameEl);
-    header.appendChild(timeEl);
-    wrapper.appendChild(header);
-
-    if (msg.message) {
-      const textEl = document.createElement('p');
-      textEl.className = 'text-gray-200 text-sm';
-      textEl.textContent = msg.message;
-      wrapper.appendChild(textEl);
-    }
-
-    if (msg.image) {
-      const img = document.createElement('img');
-      img.src = getChatImageSrc(msg.image);
-      img.alt = 'Shared image';
-      img.className = 'mt-2 max-w-xs rounded-lg border border-neutral-700';
-      wrapper.appendChild(img);
-    }
-
-    chatMessages.appendChild(wrapper);
-    renderedChatMessageKeys.add(messageKey);
-    chatMessages.scrollTop = chatMessages.scrollHeight;
-  }
-
-  function renderChatMessages(messages) {
-    const chatMessages = document.getElementById('chatMessages');
-    let emptyState = document.getElementById('chatEmptyState');
-    chatMessages.innerHTML = '';
-    renderedChatMessageKeys = new Set();
-
-    if (!emptyState) {
-      emptyState = document.createElement('div');
-      emptyState.id = 'chatEmptyState';
-      emptyState.className = 'text-center text-gray-500 text-sm py-6';
-      emptyState.textContent = 'No messages yet.';
-    }
-
-    if (!messages || messages.length === 0) {
-      chatMessages.appendChild(emptyState);
-      emptyState.classList.remove('hidden');
-      return;
-    }
-
-    messages.forEach(appendSingleMessage);
-  }
-
-  async function fetchChatMessages() {
-    if (!activeChatGroupId) return;
-    try {
-      const res = await fetch(`${javaURI}/api/groups/chat/${activeChatGroupId}/messages`, fetchOptions);
-      if (!res.ok) throw new Error('Failed to load chat messages');
-      const messages = await res.json();
-      renderChatMessages(messages);
-    } catch (err) {
-      console.error('Chat fetch failed', err);
-    }
-  }
-
-  // helpers that mimic calendar page so slash-command code can call them
-  function handleAuthError(response) {
-    if (!response) return false;
-    if (response.status === 401 || response.status === 403) {
-      console.warn('Auth error', response.status);
-      alert('Please log in to perform this action.');
-      return true;
-    }
-    return false;
-  }
-  function handleFetchError(error) {
-    if (error instanceof TypeError && (error.message.includes('Failed to fetch') || error.message.includes('NetworkError'))) {
-      console.warn('Network/CORS error', error);
-      alert('Network error or session expired.');
-      return true;
-    }
-    return false;
-  }
-
-  // helper to parse and trigger calendar API when user types a slash command
-  function handleCalendarSlashCommand(rawText) {
-    // expected format: /calendar YYYY-MM-DD [HH:MM] Event title [| description]
-    const regex = /^\/calendar\s+(\d{4}-\d{2}-\d{2})(?:\s+(\d{1,2}:\d{2}))?\s+([^|]+)(?:\|(.+))?/i;
-    const m = rawText.match(regex);
-    if (!m) return false;
-    const dateStr = m[1];
-    const timeStr = m[2];
-    let title = m[3].trim();
-    const description = m[4] ? m[4].trim() : '';
-    if (timeStr) title = title + ` @ ${timeStr}`;
-
-    // derive period from group if possible (needed for backend validation)
-    let derivedPeriod = '';
-    if (activeChatGroupName && Array.isArray(allGroups)) {
-      const matched = allGroups.find(g => g.name === activeChatGroupName);
-      if (matched && matched.course) derivedPeriod = matched.course.toUpperCase();
-    }
-
-    if (!activeChatGroupName) {
-      alert('Open the group chat first; events must be tied to a group.');
-      return false;
-    }
-
-    // embed priority prefix like calendar page does
-    let titleToSave = title;
-    if (!/^\[P[0-3]\]/.test(titleToSave)) {
-      titleToSave = `[P2] ${titleToSave}`;
-    }
-
-    const currentUserName = (window.user && window.user.name) ? window.user.name : '';
-
-    const eventPayload = {
-      title: titleToSave,
-      description,
-      date: dateStr,
-      priority: 'P2',
-      groupName: activeChatGroupName,
-      period: derivedPeriod,
-      type: 'event',
-      individual: ''
-    };
-    console.log('calendar command payload', eventPayload);
-
-    // use the older '/add' endpoint in case migrations differ
-    fetch(`${javaURI}/api/calendar/add`, {
-      ...fetchOptions,
-      method: 'POST',
-      body: JSON.stringify(eventPayload)
-    })
-      .then(res => {
-        if (handleAuthError(res)) {
-          return null;
+
+      window.handleChatImageSelected = async function (event) {
+        const file = event.target.files?.[0];
+        if (!file) return;
+        try {
+          const base64 = await fileToBase64(file);
+          setChatImagePreview(base64, file.type || 'image/png');
+        } catch (err) {
+          console.error('Failed to read image', err);
         }
-        if (!res.ok) {
-          return res.text().then(t => {
-            throw new Error(`Calendar API error ${res.status}: ${t}`);
-          });
+      };
+
+      window.handlePastedChatImage = async function (event) {
+        const items = (event.clipboardData || window.clipboardData)?.items || [];
+        const imageItem = Array.from(items).find(item => item.type.startsWith('image/'));
+        if (!imageItem) return;
+        const imageFile = imageItem.getAsFile();
+        if (!imageFile) return;
+        try {
+          const base64 = await fileToBase64(imageFile);
+          setChatImagePreview(base64, imageFile.type || 'image/png');
+        } catch (err) {
+          console.error('Image paste failed', err);
         }
-        return res.json();
-      })
-      .then(data => {
-        if (data) {
-          alert('Calendar event created successfully');
+      };
+
+      function getChatMessageKey(msg) {
+        return JSON.stringify([
+          msg?.name || '',
+          msg?.date || '',
+          msg?.message || '',
+          msg?.image || ''
+        ]);
+      }
+
+      function getChatImageSrc(image) {
+        if (!image) return null;
+        if (/^(data:|https?:\/\/|\/)/i.test(image)) return image;
+        return `data:image/png;base64,${image}`;
+      }
+
+      function appendSingleMessage(msg) {
+        const chatMessages = document.getElementById('chatMessages');
+        let emptyState = document.getElementById('chatEmptyState');
+        const messageKey = getChatMessageKey(msg);
+
+        if (!chatMessages || renderedChatMessageKeys.has(messageKey)) {
+          return;
         }
-      })
-      .catch(err => {
-        if (!handleFetchError(err)) {
-          console.error('Calendar command failed', err);
+
+        if (!emptyState) {
+          emptyState = document.createElement('div');
+          emptyState.id = 'chatEmptyState';
+          emptyState.className = 'text-center text-gray-500 text-sm py-6';
+          emptyState.textContent = 'No messages yet.';
         }
-        alert('Failed to create calendar event');
-      });
 
-    return true;
-  }
-
-  window.sendChatMessage = async function () {
-    if (!activeChatGroupId) {
-      console.warn('Chat group not resolved yet');
-      return;
-    }
-    const chatInput = document.getElementById('chatInput');
-    const text = chatInput.value.trim();
-    const image = pendingChatImageBase64 || null;
-
-    // intercept calendar slash command and try to handle it; if handled, don't send as chat
-    if (text.toLowerCase().startsWith('/calendar')) {
-      const handled = handleCalendarSlashCommand(text);
-      if (handled) {
+        emptyState.classList.add('hidden');
+
+        const wrapper = document.createElement('div');
+
+        const header = document.createElement('div');
+        header.className = 'flex items-baseline gap-2 mb-1';
+
+        const nameEl = document.createElement('span');
+        nameEl.className = 'text-white font-semibold text-sm';
+        nameEl.textContent = msg.name === currentUserDisplayName ? 'You' : (msg.name || 'Unknown');
+
+        const timeEl = document.createElement('span');
+        timeEl.className = 'text-gray-500 text-xs';
+        timeEl.textContent = formatTimestamp(msg.date);
+
+        header.appendChild(nameEl);
+        header.appendChild(timeEl);
+        wrapper.appendChild(header);
+
+        if (msg.message) {
+          const textEl = document.createElement('p');
+          textEl.className = 'text-gray-200 text-sm';
+          textEl.textContent = msg.message;
+          wrapper.appendChild(textEl);
+        }
+
+        if (msg.image) {
+          const img = document.createElement('img');
+          img.src = getChatImageSrc(msg.image);
+          img.alt = 'Shared image';
+          img.className = 'mt-2 max-w-xs rounded-lg border border-neutral-700';
+          wrapper.appendChild(img);
+        }
+
+        chatMessages.appendChild(wrapper);
+        renderedChatMessageKeys.add(messageKey);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+      }
+
+      function renderChatMessages(messages) {
+        const chatMessages = document.getElementById('chatMessages');
+        let emptyState = document.getElementById('chatEmptyState');
+        chatMessages.innerHTML = '';
+        renderedChatMessageKeys = new Set();
+
+        if (!emptyState) {
+          emptyState = document.createElement('div');
+          emptyState.id = 'chatEmptyState';
+          emptyState.className = 'text-center text-gray-500 text-sm py-6';
+          emptyState.textContent = 'No messages yet.';
+        }
+
+        if (!messages || messages.length === 0) {
+          chatMessages.appendChild(emptyState);
+          emptyState.classList.remove('hidden');
+          return;
+        }
+
+        messages.forEach(appendSingleMessage);
+      }
+
+      async function fetchChatMessages() {
+        if (!activeChatGroupId) return;
+        try {
+          const res = await fetch(`${javaURI}/api/groups/chat/${activeChatGroupId}/messages`, fetchOptions);
+          if (!res.ok) throw new Error('Failed to load chat messages');
+          const messages = await res.json();
+          renderChatMessages(messages);
+        } catch (err) {
+          console.error('Chat fetch failed', err);
+        }
+      }
+
+      window.sendChatMessage = async function () {
+        if (!activeChatGroupId) {
+          console.warn('Chat group not resolved yet');
+          return;
+        }
+        const chatInput = document.getElementById('chatInput');
+        const text = chatInput.value.trim();
+        const image = pendingChatImageBase64 || null;
+
+        if (!text && !image) return;
+
+        const payload = {
+          name: currentUserDisplayName,
+          message: text,
+          date: new Date().toISOString(),
+          image: image
+        };
+
+        // Clear UI immediately for responsive UX; rendering is handled by WebSocket broadcast.
         chatInput.value = '';
         clearChatImagePreview();
-        return;
-      } else {
-        // user typed /calendar but parsing failed
-        alert('Command format: /calendar YYYY-MM-DD [HH:MM] Title | optional description');
-        return;
-      }
-    }
-
-    if (!text && !image) return;
-
-    const payload = {
-      name: currentUserDisplayName,
-      message: text,
-      date: new Date().toISOString(),
-      image: image
-    };
-
-    try {
-      const res = await fetch(`${javaURI}/api/groups/chat/${activeChatGroupId}/messages`, {
-        ...fetchOptions,
-        method: 'POST',
-        headers: {
-          ...(fetchOptions.headers || {}),
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(payload)
-      });
 
-      if (!res.ok) throw new Error('Failed to send message');
-      const messages = await res.json();
-      renderChatMessages(messages);
-      chatInput.value = '';
-      clearChatImagePreview();
-    } catch (err) {
-      console.error('Send message failed', err);
-    }
-  };
+        try {
+          const res = await fetch(`${javaURI}/api/groups/chat/${activeChatGroupId}/messages`, {
+            ...fetchOptions,
+            method: 'POST',
+            headers: {
+              ...(fetchOptions.headers || {}),
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(payload)
+          });
+
+          if (!res.ok) throw new Error('Failed to send message');
+        } catch (err) {
+          console.error('Send message failed', err);
+        }
+      };
 
-  function startChatPolling() {
-    if (!activeChatGroupId) return;
+      function startChatPolling() {
+        if (!activeChatGroupId) return;
 
-    if (stompClient) {
-      stopChatPolling();
-    }
+        if (stompClient) {
+          stopChatPolling();
+        }
 
-    if (typeof SockJS === 'undefined' || typeof Stomp === 'undefined') {
-      console.error('SockJS/STOMP dependencies are not available');
-      return;
-    }
+        if (typeof SockJS === 'undefined' || typeof Stomp === 'undefined') {
+          console.error('SockJS/STOMP dependencies are not available');
+          return;
+        }
 
-    const socket = new SockJS(`${javaURI}/ws-chat`);
-    stompClient = Stomp.over(socket);
-    stompClient.debug = null;
+        console.log(`Attempting WebSocket connection to ${javaURI}/ws-chat`);
+        const socket = new SockJS(`${javaURI}/ws-chat`);
+        stompClient = Stomp.over(socket);
+        stompClient.debug = console.log;
+
+        stompClient.connect({}, () => {
+          if (!stompClient || !activeChatGroupId) return;
+
+          console.log('WebSocket Connected Successfully!');
+          const topic = `/topic/group/${activeChatGroupId}`;
+          console.log(`Subscribing to topic: ${topic}`);
+
+          stompClient.subscribe(topic, (message) => {
+            try {
+              console.log('Incoming WebSocket payload:', message.body);
+              const payload = JSON.parse(message.body);
+              appendSingleMessage(payload);
+            } catch (err) {
+              console.error('Failed to parse incoming chat message', err);
+            }
+          });
+        }, (err) => {
+          console.error('WebSocket connection failed', err);
+        });
+      }
 
-    stompClient.connect({}, () => {
-      if (!stompClient || !activeChatGroupId) return;
+      function stopChatPolling() {
+        if (stompClient) {
+          const clientToDisconnect = stompClient;
+          stompClient = null;
+          clientToDisconnect.disconnect(() => { });
+        }
+      }
 
-      stompClient.subscribe(`/topic/group/${activeChatGroupId}`, (message) => {
+      function downloadBase64File(filename, base64Data) {
+        const byteCharacters = atob(base64Data);
+        const byteNumbers = new Array(byteCharacters.length);
+        for (let i = 0; i < byteCharacters.length; i++) {
+          byteNumbers[i] = byteCharacters.charCodeAt(i);
+        }
+        const byteArray = new Uint8Array(byteNumbers);
+        const blob = new Blob([byteArray], { type: 'application/octet-stream' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        a.click();
+        URL.revokeObjectURL(url);
+      }
+
+      function isImageFile(filename) {
+        return /\.(png|jpe?g|gif)$/i.test(filename || '');
+      }
+
+      function getImageMimeType(filename) {
+        if (/\.jpe?g$/i.test(filename)) return 'image/jpeg';
+        if (/\.gif$/i.test(filename)) return 'image/gif';
+        return 'image/png';
+      }
+
+      function renderSharedFiles(files) {
+        const list = document.getElementById('sharedFilesList');
+        let emptyState = document.getElementById('filesEmptyState');
+        list.innerHTML = '';
+
+        if (!emptyState) {
+          emptyState = document.createElement('div');
+          emptyState.id = 'filesEmptyState';
+          emptyState.className = 'text-center text-gray-500 text-sm py-6';
+          emptyState.textContent = 'No files uploaded yet.';
+        }
+
+        if (!files || files.length === 0) {
+          list.appendChild(emptyState);
+          emptyState.classList.remove('hidden');
+          return;
+        }
+
+        emptyState.classList.add('hidden');
+        files.forEach(file => {
+          const card = document.createElement('div');
+          card.className = 'bg-neutral-700 border border-neutral-600 rounded-lg p-3 flex items-center gap-3';
+
+          if (isImageFile(file.filename)) {
+            const img = document.createElement('img');
+            const mime = getImageMimeType(file.filename);
+            img.src = `data:${mime};base64,${file.base64Data}`;
+            img.alt = file.filename;
+            img.className = 'w-12 h-12 object-cover rounded-md border border-neutral-600';
+            card.appendChild(img);
+          } else {
+            const icon = document.createElement('div');
+            icon.className = 'w-12 h-12 flex items-center justify-center bg-neutral-800 rounded-md text-gray-400 text-sm';
+            icon.textContent = 'FILE';
+            card.appendChild(icon);
+          }
+
+          const info = document.createElement('div');
+          info.className = 'flex-1';
+          const nameEl = document.createElement('div');
+          nameEl.className = 'text-white text-sm font-medium';
+          nameEl.textContent = file.filename;
+          info.appendChild(nameEl);
+          card.appendChild(info);
+
+          const downloadBtn = document.createElement('button');
+          downloadBtn.className = 'px-3 py-1.5 text-sm bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg';
+          downloadBtn.textContent = 'Download';
+          downloadBtn.addEventListener('click', () => downloadBase64File(file.filename, file.base64Data));
+          card.appendChild(downloadBtn);
+
+          list.appendChild(card);
+        });
+      }
+
+      async function fetchSharedFiles() {
+        if (!activeChatGroupId) return;
         try {
-          const payload = JSON.parse(message.body);
-          appendSingleMessage(payload);
+          const res = await fetch(`${javaURI}/api/groups/chat/${activeChatGroupId}/files`, fetchOptions);
+          if (!res.ok) throw new Error('Failed to load shared files');
+          const files = await res.json();
+          renderSharedFiles(files);
         } catch (err) {
-          console.error('Failed to parse incoming chat message', err);
+          console.error('Shared files fetch failed', err);
         }
-      });
-    }, (err) => {
-      console.error('WebSocket connection failed', err);
-    });
-  }
-
-  function stopChatPolling() {
-    if (stompClient) {
-      const clientToDisconnect = stompClient;
-      stompClient = null;
-      clientToDisconnect.disconnect(() => {});
-    }
-  }
-
-  function downloadBase64File(filename, base64Data) {
-    const byteCharacters = atob(base64Data);
-    const byteNumbers = new Array(byteCharacters.length);
-    for (let i = 0; i < byteCharacters.length; i++) {
-      byteNumbers[i] = byteCharacters.charCodeAt(i);
-    }
-    const byteArray = new Uint8Array(byteNumbers);
-    const blob = new Blob([byteArray], { type: 'application/octet-stream' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = filename;
-    a.click();
-    URL.revokeObjectURL(url);
-  }
-
-  function isImageFile(filename) {
-    return /\.(png|jpe?g|gif)$/i.test(filename || '');
-  }
-
-  function getImageMimeType(filename) {
-    if (/\.jpe?g$/i.test(filename)) return 'image/jpeg';
-    if (/\.gif$/i.test(filename)) return 'image/gif';
-    return 'image/png';
-  }
-
-  function renderSharedFiles(files) {
-    const list = document.getElementById('sharedFilesList');
-    let emptyState = document.getElementById('filesEmptyState');
-    list.innerHTML = '';
-
-    if (!emptyState) {
-      emptyState = document.createElement('div');
-      emptyState.id = 'filesEmptyState';
-      emptyState.className = 'text-center text-gray-500 text-sm py-6';
-      emptyState.textContent = 'No files uploaded yet.';
-    }
-
-    if (!files || files.length === 0) {
-      list.appendChild(emptyState);
-      emptyState.classList.remove('hidden');
-      return;
-    }
-
-    emptyState.classList.add('hidden');
-    files.forEach(file => {
-      const card = document.createElement('div');
-      card.className = 'bg-neutral-700 border border-neutral-600 rounded-lg p-3 flex items-center gap-3';
-
-      if (isImageFile(file.filename)) {
-        const img = document.createElement('img');
-        const mime = getImageMimeType(file.filename);
-        img.src = `data:${mime};base64,${file.base64Data}`;
-        img.alt = file.filename;
-        img.className = 'w-12 h-12 object-cover rounded-md border border-neutral-600';
-        card.appendChild(img);
-      } else {
-        const icon = document.createElement('div');
-        icon.className = 'w-12 h-12 flex items-center justify-center bg-neutral-800 rounded-md text-gray-400 text-sm';
-        icon.textContent = 'FILE';
-        card.appendChild(icon);
-      }
-
-      const info = document.createElement('div');
-      info.className = 'flex-1';
-      const nameEl = document.createElement('div');
-      nameEl.className = 'text-white text-sm font-medium';
-      nameEl.textContent = file.filename;
-      info.appendChild(nameEl);
-      card.appendChild(info);
-
-      const downloadBtn = document.createElement('button');
-      downloadBtn.className = 'px-3 py-1.5 text-sm bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg';
-      downloadBtn.textContent = 'Download';
-      downloadBtn.addEventListener('click', () => downloadBase64File(file.filename, file.base64Data));
-      card.appendChild(downloadBtn);
-
-      list.appendChild(card);
-    });
-  }
-
-  async function fetchSharedFiles() {
-    if (!activeChatGroupId) return;
-    try {
-      const res = await fetch(`${javaURI}/api/groups/chat/${activeChatGroupId}/files`, fetchOptions);
-      if (!res.ok) throw new Error('Failed to load shared files');
-      const files = await res.json();
-      renderSharedFiles(files);
-    } catch (err) {
-      console.error('Shared files fetch failed', err);
-    }
-  }
-
-  window.uploadSharedFile = async function () {
-    if (!activeChatGroupId) return;
-    const input = document.getElementById('sharedFileInput');
-    const file = input.files?.[0];
-    if (!file) return;
-
-    try {
-      const base64Data = await fileToBase64(file);
-      const payload = { filename: file.name, base64Data };
-
-      const res = await fetch(`${javaURI}/api/groups/chat/${activeChatGroupId}/files`, {
-        ...fetchOptions,
-        method: 'POST',
-        headers: {
-          ...(fetchOptions.headers || {}),
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(payload)
-      });
+      }
+
+      window.uploadSharedFile = async function () {
+        if (!activeChatGroupId) return;
+        const input = document.getElementById('sharedFileInput');
+        const file = input.files?.[0];
+        if (!file) return;
 
-      if (!res.ok) throw new Error('Failed to upload file');
-      input.value = '';
-      await fetchSharedFiles();
-    } catch (err) {
-      console.error('Upload failed', err);
-    }
-  };
-
-  window.showChatTab = function () {
-    document.getElementById('chatPanel').classList.remove('hidden');
-    document.getElementById('filesPanel').classList.add('hidden');
-    document.getElementById('chatTabButton').className = 'px-3 py-1.5 text-sm rounded-lg bg-indigo-600 text-white';
-    document.getElementById('filesTabButton').className = 'px-3 py-1.5 text-sm rounded-lg text-gray-300 hover:bg-neutral-700';
-  };
-
-  window.showFilesTab = function () {
-    document.getElementById('filesPanel').classList.remove('hidden');
-    document.getElementById('chatPanel').classList.add('hidden');
-    document.getElementById('filesTabButton').className = 'px-3 py-1.5 text-sm rounded-lg bg-indigo-600 text-white';
-    document.getElementById('chatTabButton').className = 'px-3 py-1.5 text-sm rounded-lg text-gray-300 hover:bg-neutral-700';
-    fetchSharedFiles();
-  };
-
-  function handleChatInputChange(event) {
-    const input = event.target;
-    const value = input.value;
-    const popup = document.getElementById('slashCommandPopup');
-
-    if (value.startsWith('/') && !value.includes(' ')) {
-      const filter = value.toLowerCase();
-      const items = document.querySelectorAll('.slash-command-item');
-      let visibleCount = 0;
-
-      items.forEach(item => {
-        const command = item.querySelector('.text-white').textContent.toLowerCase();
-        if (command.startsWith(filter)) {
-          item.classList.remove('hidden');
-          visibleCount++;
+        try {
+          const base64Data = await fileToBase64(file);
+          const payload = { filename: file.name, base64Data };
+
+          const res = await fetch(`${javaURI}/api/groups/chat/${activeChatGroupId}/files`, {
+            ...fetchOptions,
+            method: 'POST',
+            headers: {
+              ...(fetchOptions.headers || {}),
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(payload)
+          });
+
+          if (!res.ok) throw new Error('Failed to upload file');
+          input.value = '';
+          await fetchSharedFiles();
+        } catch (err) {
+          console.error('Upload failed', err);
+        }
+      };
+
+      window.showChatTab = function () {
+        document.getElementById('chatPanel').classList.remove('hidden');
+        document.getElementById('filesPanel').classList.add('hidden');
+        document.getElementById('chatTabButton').className = 'px-3 py-1.5 text-sm rounded-lg bg-indigo-600 text-white';
+        document.getElementById('filesTabButton').className = 'px-3 py-1.5 text-sm rounded-lg text-gray-300 hover:bg-neutral-700';
+      };
+
+      window.showFilesTab = function () {
+        document.getElementById('filesPanel').classList.remove('hidden');
+        document.getElementById('chatPanel').classList.add('hidden');
+        document.getElementById('filesTabButton').className = 'px-3 py-1.5 text-sm rounded-lg bg-indigo-600 text-white';
+        document.getElementById('chatTabButton').className = 'px-3 py-1.5 text-sm rounded-lg text-gray-300 hover:bg-neutral-700';
+        fetchSharedFiles();
+      };
+
+      function handleChatInputChange(event) {
+        const input = event.target;
+        const value = input.value;
+        const popup = document.getElementById('slashCommandPopup');
+
+        if (value.startsWith('/') && !value.includes(' ')) {
+          const filter = value.toLowerCase();
+          const items = document.querySelectorAll('.slash-command-item');
+          let visibleCount = 0;
+
+          items.forEach(item => {
+            const command = item.querySelector('.text-white').textContent.toLowerCase();
+            if (command.startsWith(filter)) {
+              item.classList.remove('hidden');
+              visibleCount++;
+            } else {
+              item.classList.add('hidden');
+            }
+          });
+
+          if (visibleCount > 0) {
+            popup.classList.remove('hidden');
+            selectedCommandIndex = 0;
+            updateCommandSelection();
+          } else {
+            popup.classList.add('hidden');
+          }
         } else {
-          item.classList.add('hidden');
+          popup.classList.add('hidden');
         }
-      });
+      }
 
-      if (visibleCount > 0) {
-        popup.classList.remove('hidden');
-        selectedCommandIndex = 0;
-        updateCommandSelection();
-      } else {
-        popup.classList.add('hidden');
+      function handleChatInputKeydown(event) {
+        const popup = document.getElementById('slashCommandPopup');
+        const isPopupVisible = !popup.classList.contains('hidden');
+
+        if (isPopupVisible) {
+          const visibleItems = Array.from(document.querySelectorAll('.slash-command-item:not(.hidden)'));
+
+          if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            selectedCommandIndex = Math.min(selectedCommandIndex + 1, visibleItems.length - 1);
+            updateCommandSelection();
+          } else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            selectedCommandIndex = Math.max(selectedCommandIndex - 1, 0);
+            updateCommandSelection();
+          } else if (event.key === 'Enter' || event.key === 'Tab') {
+            event.preventDefault();
+            const selectedItem = visibleItems[selectedCommandIndex];
+            if (selectedItem) {
+              const command = selectedItem.querySelector('.text-white').textContent;
+              selectSlashCommand(command);
+            }
+          } else if (event.key === 'Escape') {
+            popup.classList.add('hidden');
+          }
+        } else if (event.key === 'Enter') {
+          const chatInput = document.getElementById('chatInput');
+          if (chatInput.value.trim().toLowerCase() === '/calendar') {
+             event.preventDefault();
+             chatInput.value = '';
+             calendarModalController.open();
+             return;
+          }
+          window.sendChatMessage();
+        }
       }
-    } else {
-      popup.classList.add('hidden');
-    }
-  }
-
-  function handleChatInputKeydown(event) {
-    const popup = document.getElementById('slashCommandPopup');
-    const isPopupVisible = !popup.classList.contains('hidden');
-
-    if (isPopupVisible) {
-      const visibleItems = Array.from(document.querySelectorAll('.slash-command-item:not(.hidden)'));
-
-      if (event.key === 'ArrowDown') {
-        event.preventDefault();
-        selectedCommandIndex = Math.min(selectedCommandIndex + 1, visibleItems.length - 1);
-        updateCommandSelection();
-      } else if (event.key === 'ArrowUp') {
-        event.preventDefault();
-        selectedCommandIndex = Math.max(selectedCommandIndex - 1, 0);
-        updateCommandSelection();
-      } else if (event.key === 'Enter' || event.key === 'Tab') {
-        event.preventDefault();
-        const selectedItem = visibleItems[selectedCommandIndex];
-        if (selectedItem) {
-          const command = selectedItem.querySelector('.text-white').textContent;
-          selectSlashCommand(command);
+
+      function updateCommandSelection() {
+        const items = document.querySelectorAll('.slash-command-item:not(.hidden)');
+        items.forEach((item, index) => {
+          if (index === selectedCommandIndex) {
+            item.classList.add('bg-neutral-600');
+          } else {
+            item.classList.remove('bg-neutral-600');
+          }
+        });
+      }
+
+      function selectSlashCommand(command) {
+        if (command === '/calendar') {
+          document.getElementById('slashCommandPopup').classList.add('hidden');
+          document.getElementById('chatInput').value = '';
+          calendarModalController.open();
+          return;
         }
-      } else if (event.key === 'Escape') {
+
+        const input = document.getElementById('chatInput');
+        const popup = document.getElementById('slashCommandPopup');
+
+        input.value = command + ' ';
         popup.classList.add('hidden');
+        input.focus();
+        highlightCommand(input);
+      }
+
+      function highlightCommand(input) {
+        const value = input.value;
+        const commandMatch = value.match(/^\/\w+/);
+
+        if (commandMatch) {
+          input.classList.add('has-command');
+        } else {
+          input.classList.remove('has-command');
+        }
       }
-    } else if (event.key === 'Enter') {
-      window.sendChatMessage();
-    }
-  }
-
-  function updateCommandSelection() {
-    const items = document.querySelectorAll('.slash-command-item:not(.hidden)');
-    items.forEach((item, index) => {
-      if (index === selectedCommandIndex) {
-        item.classList.add('bg-neutral-600');
-      } else {
-        item.classList.remove('bg-neutral-600');
-      }
-    });
-  }
-
-  function selectSlashCommand(command) {
-    const input = document.getElementById('chatInput');
-    const popup = document.getElementById('slashCommandPopup');
-
-    input.value = command + ' ';
-    popup.classList.add('hidden');
-    input.focus();
-    highlightCommand(input);
-  }
-
-  function highlightCommand(input) {
-    const value = input.value;
-    const commandMatch = value.match(/^\/\w+/);
-
-    if (commandMatch) {
-      input.classList.add('has-command');
-    } else {
-      input.classList.remove('has-command');
-    }
-  }
-
-  window.handleChatInputChange = handleChatInputChange;
-  window.handleChatInputKeydown = handleChatInputKeydown;
-  window.selectSlashCommand = selectSlashCommand;
-  window.downloadBase64File = downloadBase64File;
-
-  document.addEventListener('paste', function(event) {
-    if (document.getElementById('chatModal').classList.contains('hidden')) return;
-    if (typeof window.handlePastedChatImage === 'function') {
-      window.handlePastedChatImage(event);
-    }
-  });
-</script>
\ No newline at end of file
+
+      /* ================================
+         CALENDAR EVENT MODAL (SRP)
+      ================================ */
+      const calendarModalController = {
+        open: function() {
+          document.getElementById('calendarEventModal').classList.remove('hidden');
+          document.getElementById('calEventTitle').focus();
+          document.getElementById('calEventPeriod').value = '';
+          document.getElementById('calEventStatus').textContent = '';
+          document.getElementById('calEventStatus').className = 'text-sm mt-2';
+          
+          const groupContainer = document.getElementById('calEventGroupContainer');
+          const groupNameEl = document.getElementById('calEventGroupName');
+          if (typeof activeChatGroupName !== 'undefined' && activeChatGroupName) {
+            if (groupNameEl) groupNameEl.textContent = activeChatGroupName;
+            if (groupContainer) groupContainer.classList.remove('hidden');
+          } else {
+            if (groupContainer) groupContainer.classList.add('hidden');
+          }
+        },
+        close: function() {
+          document.getElementById('calendarEventModal').classList.add('hidden');
+          this.reset();
+        },
+        reset: function() {
+          document.getElementById('calEventTitle').value = '';
+          document.getElementById('calEventDate').value = '';
+          document.getElementById('calEventPeriod').value = '';
+          document.getElementById('calEventDesc').value = '';
+          document.getElementById('calEventPriority').value = 'P2';
+          document.getElementById('calEventStatus').textContent = '';
+          document.getElementById('calEventSubmitBtn').disabled = false;
+          document.getElementById('calEventSubmitBtn').innerHTML = 'Create Event';
+        },
+        setStatus: function(msg, isError = false) {
+          const statusEl = document.getElementById('calEventStatus');
+          statusEl.textContent = msg;
+          statusEl.className = 'text-sm mt-2 ' + (isError ? 'text-red-400' : 'text-green-400');
+        },
+        submit: async function() {
+          const titleInput = document.getElementById('calEventTitle').value.trim();
+          const dateInput = document.getElementById('calEventDate').value;
+          const periodInput = document.getElementById('calEventPeriod').value.trim();
+          const descInput = document.getElementById('calEventDesc').value.trim();
+          const priorityInput = document.getElementById('calEventPriority').value;
+
+          if (!titleInput || !dateInput) {
+            this.setStatus('Title and Date are required.', true);
+            return;
+          }
+
+          const btn = document.getElementById('calEventSubmitBtn');
+          btn.disabled = true;
+          // spinner
+          btn.innerHTML = '<svg class="animate-spin h-5 w-5 mr-2 inline" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>Creating...';
+          
+          let emoji = '📅';
+          let finalTitle = `[${priorityInput}] ${emoji} ${titleInput}`;
+          if (typeof activeChatGroupName !== 'undefined' && activeChatGroupName) {
+            finalTitle += ` (${activeChatGroupName})`;
+          }
+
+          const eventPayload = {
+            title: finalTitle,
+            description: descInput,
+            date: dateInput,
+            period: periodInput,
+            priority: priorityInput
+          };
+
+          if (typeof activeChatGroupId !== 'undefined' && activeChatGroupId) {
+            eventPayload.groupId = activeChatGroupId;
+          }
+
+          try {
+            const res = await fetch(`${javaURI}/api/calendar/add_event`, {
+              ...fetchOptions,
+              method: 'POST',
+              body: JSON.stringify(eventPayload)
+            });
+
+            if (res.status === 401 || res.status === 403 || (res.redirected && res.url.includes('/login'))) {
+              this.setStatus('Session expired. Please log in again.', true);
+              btn.disabled = false;
+              btn.innerHTML = 'Create Event';
+              return;
+            }
+
+            if (!res.ok) {
+              const errData = await res.json().catch(() => ({}));
+              throw new Error(errData.message || 'Server returned an error');
+            }
+
+            this.setStatus('Event created successfully!');
+            setTimeout(() => {
+              this.close();
+            }, 1000);
+          } catch (err) {
+            console.error('Failed to create calendar event:', err);
+            this.setStatus(`Error: ${err.message}`, true);
+            btn.disabled = false;
+            btn.innerHTML = 'Create Event';
+          }
+        }
+      };
+      
+      window.calendarModalController = calendarModalController;
+
+      window.handleChatInputChange = handleChatInputChange;
+      window.handleChatInputKeydown = handleChatInputKeydown;
+      window.selectSlashCommand = selectSlashCommand;
+      window.downloadBase64File = downloadBase64File;
+
+      document.addEventListener('paste', function (event) {
+        if (document.getElementById('chatModal').classList.contains('hidden')) return;
+        if (typeof window.handlePastedChatImage === 'function') {
+          window.handlePastedChatImage(event);
+        }
+      });
+    </script>
\ No newline at end of file
diff --git a/facialrecognitiontest.md b/facialrecognitiontest.md
deleted file mode 100644
index b1cd947cea..0000000000
--- a/facialrecognitiontest.md
+++ /dev/null
@@ -1,371 +0,0 @@
----
-layout: page
-title: Security Dashboard
-permalink: /facialrecognitiontest/
----
-
-<div class="dashboard-container">
-  <!-- Main Feed Area -->
-  <div class="main-feed">
-    <div class="video-wrapper">
-      <div class="live-indicator">LIVE</div>
-      <video id="video" autoplay playsinline></video>
-      <div class="overlay-controls">
-         <div id="status" class="status-badge">System Ready</div>
-      </div>
-    </div>
-
-    <!-- Control Panel -->
-    <div class="control-panel">
-      <div class="input-group">
-        <input id="labelInput" placeholder="Enter Label (e.g. Officer Name)" />
-      </div>
-      <div class="action-buttons">
-        <button id="identifyBtn" class="btn btn-primary">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
-            <circle cx="12" cy="13" r="4"></circle>
-          </svg>
-          Scan & Identify
-        </button>
-        <button id="saveBtn" class="btn btn-secondary">Register New Face</button>
-        <button id="saveLocalBtn" class="btn btn-outline">Save Local</button>
-      </div>
-      <div class="danger-zone">
-        <button id="deleteAllBtn" class="btn btn-danger">Reset Database</button>
-      </div>
-    </div>
-  </div>
-
-</div>
-
-<style>
-/* ---------------- Base ---------------- */
-
-:root {
-  --bg-dark: #121212;
-  --bg-card: #1e1e1e;
-  --text-main: #e0e0e0;
-  --text-muted: #a0a0a0;
-  --accent: #3b82f6;
-  --danger: #ef4444;
-  --success: #10b981;
-  --border: #333;
-}
-
-body {
-  background-color: var(--bg-dark);
-}
-
-/* Force Title Centering */
-h1, .page-title, .post-title, .post-header {
-  text-align: center !important;
-  width: 100%;
-  display: block;
-  margin-top: 20px;
-}
-
-
-
-/* ---------------- Layout ---------------- */
-
-.dashboard-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
-  min-height: 600px;
-  font-family: 'Inter', system-ui, sans-serif;
-  color: var(--text-main);
-
-  max-width: 1200px;
-  width: 90%;
-  margin: 0 auto;
-}
-
-/* CSS override removed */
-
-@media (max-width: 900px) {
-  .dashboard-container {
-    grid-template-columns: 1fr;
-    max-width: 800px;
-  }
-}
-
-/* ---------------- Main Feed ---------------- */
-
-.main-feed {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  align-items: center;
-  width: 100%;
-}
-
-.video-wrapper {
-  background: #000;
-  border-radius: 12px;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-  max-width: 800px;
-  aspect-ratio: 4/3;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--border);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
-}
-
-video {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.live-indicator {
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  background: rgba(220, 38, 38, 0.9);
-  color: white;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 10px;
-  font-weight: bold;
-  letter-spacing: 1px;
-  animation: pulse 2s infinite;
-}
-
-.status-badge {
-  position: absolute;
-  bottom: 15px;
-  left: 15px;
-  background: rgba(0,0,0,0.7);
-  padding: 6px 12px;
-  border-radius: 20px;
-  font-size: 14px;
-  border: 1px solid var(--border);
-  color: #fff;
-}
-
-@keyframes pulse {
-  0% { opacity: 1; }
-  50% { opacity: 0.5; }
-  100% { opacity: 1; }
-}
-
-/* ---------------- Control Panel ---------------- */
-
-.control-panel {
-  background: var(--bg-card);
-  padding: 20px;
-  border-radius: 12px;
-  border: 1px solid var(--border);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 15px;
-  flex-wrap: wrap;
-  width: 100%;
-  max-width: 800px;
-}
-
-/* Centering Overrides Removed */
-
-/* ---------------- Inputs & Buttons ---------------- */
-
-.control-panel {
-  flex-direction: column;
-  align-items: center;
-}
-
-.input-group {
-  width: 100%;
-  max-width: 420px;
-}
-
-input {
-  width: 100%;
-  background: #2a2a2a;
-  border: 1px solid var(--border);
-  color: white;
-  padding: 10px 15px;
-  border-radius: 8px;
-  outline: none;
-}
-
-input:focus {
-  border-color: var(--accent);
-}
-
-.action-buttons,
-.danger-zone {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-/* ---------------- Buttons ---------------- */
-
-.btn {
-  padding: 10px 20px;
-  border-radius: 8px;
-  font-weight: 600;
-  cursor: pointer;
-  border: none;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.btn-primary { background: var(--accent); color: white; }
-.btn-primary:hover { background: #2563eb; }
-
-.btn-secondary { background: #4b5563; color: white; }
-.btn-secondary:hover { background: #374151; }
-
-.btn-outline {
-  background: transparent;
-  border: 1px solid #4b5563;
-  color: #ccc;
-}
-.btn-outline:hover { border-color: #fff; color: #fff; }
-
-.btn-danger {
-  background: rgba(239, 68, 68, 0.1);
-  color: var(--danger);
-  border: 1px solid var(--danger);
-}
-.btn-danger:hover { background: rgba(239, 68, 68, 0.2); }
-
-/* ---------------- Sidebar Removed ---------------- */
-
-</style>
-
-<script>
-const API_BASE = 'http://localhost:8587/api/identify';
-
-async function startCamera() {
-  const video = document.getElementById('video');
-  try {
-    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
-    video.srcObject = stream;
-    await video.play();
-  } catch (e) {
-    updateStatus('Camera error: ' + e.message, 'error');
-  }
-}
-
-function updateStatus(msg, type = 'normal') {
-  const el = document.getElementById('status');
-  el.innerText = msg;
-  if (type === 'error') el.style.color = '#ef4444';
-  else if (type === 'success') el.style.color = '#10b981';
-  else el.style.color = '#fff';
-}
-
-function captureImageData() {
-  const video = document.getElementById('video');
-  const canvas = document.createElement('canvas');
-  canvas.width = video.videoWidth || 320;
-  canvas.height = video.videoHeight || 240;
-  const ctx = canvas.getContext('2d');
-  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-  const dataUrl = canvas.toDataURL('image/jpeg', 0.9);
-  const base64 = dataUrl.split(',')[1];
-  return { dataUrl, base64 };
-}
-
-function saveToLocal(label, base64) {
-  const key = 'fr_saved_v1';
-  const all = JSON.parse(localStorage.getItem(key) || '{}');
-  if (!all[label]) all[label] = [];
-  all[label].push({ image: base64, ts: new Date().toISOString() });
-  localStorage.setItem(key, JSON.stringify(all));
-  renderSaved();
-  updateStatus('Saved locally: ' + label, 'success');
-}
-
-async function saveToServer(label, base64) {
-  updateStatus('Saving to server...');
-  try {
-    const res = await fetch(API_BASE + '/add', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ image: base64, label })
-    });
-    const j = await res.json();
-    if (!res.ok) throw new Error(j.message || 'Server error');
-    updateStatus('Registered: ' + label, 'success');
-  } catch (e) {
-    updateStatus('Server error: ' + e.message, 'error');
-  }
-}
-
-async function identify(base64) {
-  updateStatus('Scanning database...');
-  try {
-    const res = await fetch(API_BASE + '/', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ image: base64 })
-    });
-    const j = await res.json();
-    if (!res.ok) throw new Error(j.message || 'Server error');
-
-    if (j.match) updateStatus(`IDENTIFIED: ${j.name}`, 'success');
-    else updateStatus('NO MATCH FOUND', 'error');
-
-  } catch (e) {
-    updateStatus('ID Error: ' + e.message, 'error');
-  }
-}
-
-function renderSaved() {
-  // Sidebar removed
-}
-
-document.getElementById('saveBtn').addEventListener('click', async () => {
-  const label = document.getElementById('labelInput').value.trim();
-  if (!label) { updateStatus('Enter a label first!', 'error'); return; }
-  const { base64 } = captureImageData();
-  await saveToServer(label, base64);
-  saveToLocal(label, base64);
-});
-
-document.getElementById('saveLocalBtn').addEventListener('click', () => {
-  const label = document.getElementById('labelInput').value.trim() || 'Unknown';
-  const { base64 } = captureImageData();
-  saveToLocal(label, base64);
-});
-
-document.getElementById('identifyBtn').addEventListener('click', async () => {
-  const { base64 } = captureImageData();
-  await identify(base64);
-});
-
-document.getElementById('deleteAllBtn').addEventListener('click', async () => {
-  if (!confirm("⚠️ Delete ALL faces from Server & Local history?")) return;
-
-  updateStatus('Deleting...');
-  try {
-    const res = await fetch(API_BASE + '/delete_all', { method: 'DELETE' });
-    const j = await res.json();
-    if (!res.ok) throw new Error(j.message || 'Server error');
-
-    updateStatus('System Reset Complete', 'success');
-    localStorage.removeItem('fr_saved_v1');
-    renderSaved();
-
-  } catch (e) {
-    updateStatus('Delete Failed: ' + e.message, 'error');
-  }
-});
-
-startCamera();
-renderSaved();
-</script>
diff --git a/navigation/toolkit/bathroom_pass.md b/navigation/toolkit/bathroom_pass.md
new file mode 100644
index 0000000000..da797c1db1
--- /dev/null
+++ b/navigation/toolkit/bathroom_pass.md
@@ -0,0 +1,492 @@
+---
+layout: aesthetihawk
+title: Bathroom Pass
+permalink: /student/bathroom_pass
+---
+
+<head>
+    <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
+</head>
+
+<div class="max-w-7xl mx-auto px-4 py-8">
+    <!-- Header Section -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 gap-6">
+        <div>
+            <h1 class="text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400 tracking-tight mb-2">
+                BATHROOM PASS
+            </h1>
+            <p class="text-neutral-400 font-medium">Scan your face to join the queue or check out.</p>
+        </div>
+        
+        <div class="flex items-center gap-6 bg-neutral-900/50 backdrop-blur-xl p-4 rounded-2xl border border-neutral-800 shadow-2xl">
+            <div class="text-center px-4 border-r border-neutral-800">
+                <span id="currentAway" class="block text-3xl font-bold text-indigo-400">0</span>
+                <span class="text-[10px] uppercase tracking-widest text-neutral-500 font-bold">Away</span>
+            </div>
+            <div class="text-center px-4">
+                <span id="maxCapacity" class="block text-3xl font-bold text-neutral-400">1</span>
+                <span class="text-[10px] uppercase tracking-widest text-neutral-500 font-bold">Limit</span>
+            </div>
+            <div id="statusIndicator" class="flex items-center gap-2 px-4 py-2 rounded-full bg-green-500/10 border border-green-500/20">
+                <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+                <span class="text-xs font-bold text-green-500 uppercase tracking-wider">Available</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
+        <!-- Main Scanner Section -->
+        <div class="lg:col-span-7">
+            <div class="relative group">
+                <!-- Scanner Container -->
+                <div class="relative aspect-video bg-neutral-900 rounded-3xl overflow-hidden border border-neutral-800 shadow-2xl transition-all duration-500 group-hover:border-indigo-500/30">
+                    <video id="scanVideo" class="w-full h-full object-cover" autoplay playsinline></video>
+                    <canvas id="scanCanvas" class="hidden"></canvas>
+                    
+                    <!-- Scanning Overlay -->
+                    <div id="scannerOverlay" class="absolute inset-0 pointer-events-none">
+                        <!-- Corner Accents -->
+                        <div class="absolute top-8 left-8 w-12 h-12 border-t-4 border-l-4 border-indigo-500 rounded-tl-lg"></div>
+                        <div class="absolute top-8 right-8 w-12 h-12 border-t-4 border-r-4 border-indigo-500 rounded-tr-lg"></div>
+                        <div class="absolute bottom-8 left-8 w-12 h-12 border-b-4 border-l-4 border-indigo-500 rounded-bl-lg"></div>
+                        <div class="absolute bottom-8 right-8 w-12 h-12 border-b-4 border-r-4 border-indigo-500 rounded-br-lg"></div>
+                        
+                        <!-- Scanning Line -->
+                        <div id="scanLine" class="hidden absolute left-0 right-0 h-1 bg-gradient-to-r from-transparent via-indigo-500 to-transparent shadow-[0_0_20px_rgba(99,102,241,0.5)] z-10"></div>
+                    </div>
+
+                    <!-- Idle Overlay -->
+                    <div id="idleOverlay" class="absolute inset-0 bg-neutral-950/80 backdrop-blur-sm flex flex-col items-center justify-center p-8 transition-opacity duration-500">
+                        <div class="w-20 h-20 rounded-full bg-indigo-500/10 flex items-center justify-center mb-6 border border-indigo-500/20">
+                            <svg class="w-10 h-10 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+                            </svg>
+                        </div>
+                        <h2 class="text-2xl font-bold text-white mb-2">Ready to Scan</h2>
+                        <p class="text-neutral-400 text-center max-w-xs mb-8">Position yourself clearly in front of the camera for identification.</p>
+                        <button onclick="startScanning()" class="px-8 py-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl font-bold transition-all shadow-lg shadow-indigo-500/25 flex items-center gap-3">
+                            <span>Initialize Scanner</span>
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
+                        </button>
+                    </div>
+
+                    <!-- Identification Overlay -->
+                    <div id="idOverlay" class="hidden absolute bottom-8 left-1/2 -translate-x-1/2 bg-neutral-900/90 backdrop-blur-xl border border-neutral-700 p-6 rounded-3xl shadow-2xl min-w-[300px]">
+                        <div class="flex items-center gap-4 mb-4">
+                            <div class="w-12 h-12 rounded-full bg-indigo-500/20 flex items-center justify-center border border-indigo-500/30">
+                                <span id="idInitials" class="text-lg font-bold text-indigo-400">??</span>
+                            </div>
+                            <div>
+                                <span class="text-[10px] uppercase tracking-widest text-neutral-500 font-black">Identified User</span>
+                                <h3 id="idName" class="text-lg font-bold text-white">Loading...</h3>
+                            </div>
+                        </div>
+                        <div class="flex gap-3">
+                            <button onclick="confirmIdentity()" class="flex-1 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-bold text-sm transition-all">Confirm</button>
+                            <button onclick="resetId()" class="flex-1 py-3 bg-neutral-800 hover:bg-neutral-700 text-white rounded-xl font-bold text-sm transition-all">Not Me</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Sidebar Queue Section -->
+        <div class="lg:col-span-5">
+            <div class="bg-neutral-900/50 backdrop-blur-xl rounded-3xl border border-neutral-800 p-8 h-full shadow-2xl">
+                <div class="flex items-center justify-between mb-8">
+                    <h2 class="text-xl font-black text-white tracking-tight flex items-center gap-3">
+                        <span class="bg-indigo-500/20 text-indigo-400 p-2 rounded-lg">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+                        </span>
+                        QUEUE MONITOR
+                    </h2>
+                    <span id="queueTotal" class="bg-neutral-800 text-neutral-400 px-3 py-1 rounded-lg text-xs font-bold">0 Active</span>
+                </div>
+
+                <div id="queueList" class="space-y-4">
+                    <!-- Queue items will be injected here -->
+                    <div class="flex flex-col items-center justify-center py-12 text-center">
+                        <div class="w-16 h-16 rounded-2xl bg-neutral-800 flex items-center justify-center mb-4 border border-neutral-700/50">
+                            <svg class="w-8 h-8 text-neutral-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg>
+                        </div>
+                        <p class="text-neutral-500 font-medium">Queue is currently empty</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- BOTTOM ROW: Controls and Manual Override -->
+        <div class="lg:col-span-12 space-y-8 mt-4">
+            <!-- Matching Threshold -->
+            <div class="bg-neutral-900/50 p-6 rounded-3xl border border-neutral-800 shadow-2xl">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-sm font-black text-white uppercase tracking-widest">Matching Threshold</h3>
+                    <span id="thresholdValue" class="text-xs font-bold text-indigo-400">0.40</span>
+                </div>
+                <input type="range" id="thresholdLimit" min="0.1" max="0.9" step="0.01" value="0.40" 
+                       class="w-full h-1.5 bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-indigo-500"
+                       oninput="document.getElementById('thresholdValue').textContent = this.value">
+                <p class="text-[10px] text-neutral-500 mt-2 italic">Lower = Stricter, Higher = More Lenient</p>
+            </div>
+
+            <!-- Manual Override -->
+            <div class="bg-neutral-900/50 backdrop-blur-xl p-8 rounded-3xl border border-neutral-800 shadow-2xl">
+                <h3 class="text-sm font-black text-white uppercase tracking-widest mb-6 flex items-center gap-2">
+                    <svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
+                    Manual Override
+                </h3>
+                <div class="flex flex-col md:flex-row gap-4">
+                    <input type="text" id="emergencyName" placeholder="Enter student name manually..." 
+                           class="flex-1 bg-neutral-950 border border-neutral-800 rounded-2xl px-6 py-4 text-white placeholder-neutral-600 focus:outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/20 transition-all font-medium">
+                    <div class="flex gap-3">
+                        <button onclick="emergencyCheckIn()" class="flex-1 md:flex-none px-10 py-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl font-bold transition-all shadow-lg shadow-indigo-500/25 uppercase tracking-wider text-xs">
+                            Check In
+                        </button>
+                        <button onclick="emergencyCheckOut()" class="flex-1 md:flex-none px-10 py-4 bg-neutral-800 hover:bg-neutral-700 text-white rounded-2xl font-bold transition-all border border-neutral-700 uppercase tracking-wider text-xs">
+                            Check Out
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script type="module">
+    import { pythonURI, javaURI, fetchOptions } from '{{site.baseurl}}/assets/js/api/config.js';
+    import { showToast } from "{{site.baseurl}}/assets/js/aesthetihawk/shared/toastHandler.js";
+
+    let currentUserEmail = null;
+    let scanStream = null;
+    let identifiedPerson = null;
+    let isProcessing = false;
+
+    // Fetch current user email on load
+    async function initializeCurrentUser() {
+        try {
+            const resp = await fetch(`${javaURI}/api/person/get`, fetchOptions);
+            if (resp.ok) {
+                const user = await resp.json();
+                currentUserEmail = user.email;
+                console.log("Current user email:", currentUserEmail);
+            } else {
+                console.error("Failed to fetch user - status:", resp.status);
+                showToast({ 
+                    message: "Failed to load user info. Make sure you're logged in.", 
+                    duration: 5000,
+                    style: { background: "#ef4444" }
+                });
+            }
+        } catch (err) {
+            console.error("Failed to fetch current user:", err);
+            showToast({ 
+                message: "Connection error. Check your network.", 
+                duration: 5000,
+                style: { background: "#ef4444" }
+            });
+        }
+    }
+
+    async function startScanning() {
+        const video = document.getElementById('scanVideo');
+        const idle = document.getElementById('idleOverlay');
+        const scanLine = document.getElementById('scanLine');
+        
+        try {
+            scanStream = await navigator.mediaDevices.getUserMedia({ video: true });
+            video.srcObject = scanStream;
+            idle.classList.add('opacity-0', 'pointer-events-none');
+            scanLine.classList.remove('hidden');
+            startIdentificationLoop();
+        } catch (err) {
+            console.error(err);
+            showToast({ message: "Camera access denied", duration: 3000 });
+        }
+    }
+
+    async function startIdentificationLoop() {
+        if (!scanStream || isProcessing) return;
+        
+        const video = document.getElementById('scanVideo');
+        const canvas = document.getElementById('scanCanvas');
+        
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        canvas.getContext('2d').drawImage(video, 0, 0);
+        
+        const base64Image = canvas.toDataURL('image/jpeg').split(',')[1];
+        
+        const threshold = document.getElementById('thresholdLimit').value;
+        
+        // Get JWT token from cookies (Spring token for backend calls)
+        const jwtToken = document.cookie.split(';').find(c => c.trim().startsWith('jwt_java_spring='))?.split('=')[1];
+        
+        try {
+            const resp = await fetch(`${javaURI}/api/person/identify`, {
+                ...fetchOptions,
+                method: 'POST',
+                headers: {
+                    ...fetchOptions.headers,
+                    ...(jwtToken && { 'Authorization': `Bearer ${jwtToken}` })
+                },
+                body: JSON.stringify({ 
+                    image: base64Image,
+                    threshold: threshold
+                })
+            });
+
+            if (!resp.ok) {
+                console.error(`Face identify API returned ${resp.status}:`, resp.statusText);
+                const errorText = await resp.text();
+                console.error("Error response:", errorText);
+                setTimeout(startIdentificationLoop, 3000);
+                return;
+            }
+
+            let result;
+            try {
+                result = await resp.json();
+            } catch (parseErr) {
+                console.error("Failed to parse API response as JSON:", parseErr);
+                setTimeout(startIdentificationLoop, 3000);
+                return;
+            }
+            console.log("Identify result:", result);
+            
+            if (result.match) {
+                showIdentification(result.name);
+            } else {
+                setTimeout(startIdentificationLoop, 1000);
+            }
+        } catch (err) {
+            console.error("Identification error:", err);
+            setTimeout(startIdentificationLoop, 3000);
+        }
+    }
+
+    function showIdentification(name) {
+        identifiedPerson = name;
+        document.getElementById('idName').textContent = name;
+        document.getElementById('idInitials').textContent = name.substring(0, 2).toUpperCase();
+        document.getElementById('idOverlay').classList.remove('hidden');
+        document.getElementById('scanLine').classList.add('hidden');
+    }
+
+    function resetId() {
+        identifiedPerson = null;
+        document.getElementById('idOverlay').classList.add('hidden');
+        document.getElementById('scanLine').classList.remove('hidden');
+        startIdentificationLoop();
+    }
+
+    async function confirmIdentity() {
+        if (!identifiedPerson) return;
+        
+        console.log("Confirming identity for:", identifiedPerson);
+        const queueUrl = `${javaURI}/api/bathroom/add`;
+        
+        try {
+            const resp = await fetch(queueUrl, {
+                ...fetchOptions,
+                method: 'POST',
+                body: JSON.stringify({
+                    teacherEmail: currentUserEmail,
+                    studentName: identifiedPerson
+                })
+            });
+            
+            if (resp.ok) {
+                showToast({ message: "Successfully added to queue!", duration: 3000 });
+                resetId();
+                refreshQueue();
+            } else {
+                const data = await resp.json();
+                console.error("Queue add failed:", data);
+                showToast({ 
+                    message: `Error: ${data.message || 'Could not add to queue'}`, 
+                    duration: 5000,
+                    style: { background: "#ef4444" }
+                });
+            }
+        } catch (err) {
+            console.error("Confirm error:", err);
+            showToast({ 
+                message: "Network error. Is the Spring backend running?", 
+                duration: 5000,
+                style: { background: "#ef4444" }
+            });
+        }
+    }
+
+    async function refreshQueue() {
+        if (!currentUserEmail) return;
+        try {
+            const resp = await fetch(`${javaURI}/api/bathroom/queue/${currentUserEmail}`, fetchOptions);
+            const data = await resp.json();
+            updateQueueUI(data);
+        } catch (err) {
+            console.error(err);
+        }
+    }
+
+    function updateQueueUI(data) {
+        document.getElementById('currentAway').textContent = data.away;
+        document.getElementById('maxCapacity').textContent = data.maxOccupancy;
+        
+        const list = document.getElementById('queueList');
+        const total = document.getElementById('queueTotal');
+        const indicator = document.getElementById('statusIndicator');
+        const dot = indicator.querySelector('div');
+        const statusText = indicator.querySelector('span');
+
+        if (data.away >= data.maxOccupancy) {
+            indicator.classList.remove('bg-green-500/10', 'border-green-500/20');
+            indicator.classList.add('bg-red-500/10', 'border-red-500/20');
+            dot.classList.remove('bg-green-500');
+            dot.classList.add('bg-red-500');
+            statusText.textContent = "Full";
+            statusText.classList.remove('text-green-500');
+            statusText.classList.add('text-red-500');
+        } else {
+            indicator.classList.remove('bg-red-500/10', 'border-red-500/20');
+            indicator.classList.add('bg-green-500/10', 'border-green-500/20');
+            dot.classList.remove('bg-red-500');
+            dot.classList.add('bg-green-500');
+            statusText.textContent = "Available";
+            statusText.classList.remove('text-red-500');
+            statusText.classList.add('text-green-500');
+        }
+
+        if (!data.peopleQueue) {
+            list.innerHTML = `<p class="text-neutral-500 text-center py-8">Queue is empty</p>`;
+            total.textContent = "0 Active";
+            return;
+        }
+
+        const students = data.peopleQueue.split(',');
+        total.textContent = `${students.length} Total`;
+        
+        list.innerHTML = students.map((s, i) => {
+            const isActive = i < data.away;
+            return `
+                <div class="flex items-center justify-between p-4 rounded-2xl border ${isActive ? 'bg-indigo-500/10 border-indigo-500/30 shadow-[0_0_20px_rgba(99,102,241,0.1)]' : 'bg-neutral-800/50 border-neutral-800'} transition-all">
+                    <div class="flex items-center gap-4">
+                        <div class="w-10 h-10 rounded-full ${isActive ? 'bg-indigo-500' : 'bg-neutral-800'} flex items-center justify-center text-sm font-bold text-white">
+                            ${s.substring(0, 2).toUpperCase()}
+                        </div>
+                        <div>
+                            <h4 class="font-bold text-white text-sm">${s}</h4>
+                            <span class="text-[10px] uppercase tracking-widest ${isActive ? 'text-indigo-400' : 'text-neutral-500'} font-black">
+                                ${isActive ? 'Currently Away' : 'Waiting in Line'}
+                            </span>
+                        </div>
+                    </div>
+                    ${isActive ? `
+                        <button onclick="returnFromBathroom('${s}')" class="p-2 hover:bg-red-500/10 rounded-lg text-neutral-500 hover:text-red-500 transition-colors">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+                        </button>
+                    ` : ''}
+                </div>
+            `;
+        }).join('');
+    }
+
+    async function returnFromBathroom(name) {
+        try {
+            const resp = await fetch(`${javaURI}/api/bathroom/remove`, {
+                ...fetchOptions,
+                method: 'DELETE',
+                body: JSON.stringify({
+                    teacherEmail: currentUserEmail,
+                    studentName: name
+                })
+            });
+            
+            if (resp.ok) {
+                showToast({ message: "Welcome back!", duration: 3000 });
+                refreshQueue();
+            }
+        } catch (err) {
+            console.error(err);
+        }
+    }
+
+    async function emergencyCheckIn() {
+        const nameInput = document.getElementById('emergencyName');
+        const name = nameInput.value.trim();
+        
+        if (!name) {
+            showToast({ message: "Please enter a name", duration: 3000 });
+            return;
+        }
+
+        const queueUrl = `${javaURI}/api/bathroom/add`;
+        try {
+            const resp = await fetch(queueUrl, {
+                ...fetchOptions,
+                method: 'POST',
+                body: JSON.stringify({
+                    teacherEmail: currentUserEmail,
+                    studentName: name
+                })
+            });
+            
+            if (resp.ok) {
+                showToast({ message: `Checked in: ${name}`, duration: 3000 });
+                nameInput.value = '';
+                refreshQueue();
+            } else {
+                const data = await resp.json();
+                showToast({ message: `Error: ${data.message || 'Check-in failed'}`, duration: 5000, style: { background: "#ef4444" }});
+            }
+        } catch (err) {
+            showToast({ message: "Server connection failed", duration: 5000, style: { background: "#ef4444" }});
+        }
+    }
+
+    async function emergencyCheckOut() {
+        const nameInput = document.getElementById('emergencyName');
+        const name = nameInput.value.trim();
+        
+        if (!name) {
+            showToast({ message: "Please enter a name", duration: 3000 });
+            return;
+        }
+
+        try {
+            const resp = await fetch(`${javaURI}/api/bathroom/remove`, {
+                ...fetchOptions,
+                method: 'DELETE',
+                body: JSON.stringify({
+                    teacherEmail: currentUserEmail,
+                    studentName: name
+                })
+            });
+            
+            if (resp.ok) {
+                showToast({ message: `Checked out: ${name}`, duration: 3000 });
+                nameInput.value = '';
+                refreshQueue();
+            } else {
+                const data = await resp.json();
+                showToast({ message: `Error: ${data.message || 'Check-out failed'}`, duration: 5000, style: { background: "#ef4444" }});
+            }
+        } catch (err) {
+            showToast({ message: "Server connection failed", duration: 5000, style: { background: "#ef4444" }});
+        }
+    }
+
+    // Export to window
+    window.startScanning = startScanning;
+    window.confirmIdentity = confirmIdentity;
+    window.resetId = resetId;
+    window.returnFromBathroom = returnFromBathroom;
+    window.emergencyCheckIn = emergencyCheckIn;
+    window.emergencyCheckOut = emergencyCheckOut;
+
+    // Polling for queue updates
+    initializeCurrentUser();
+    setInterval(refreshQueue, 5000);
+    document.addEventListener('DOMContentLoaded', refreshQueue);
+</script>
diff --git a/navigation/toolkit/bathroom_queue.md b/navigation/toolkit/bathroom_queue.md
new file mode 100644
index 0000000000..9a1fd25fb3
--- /dev/null
+++ b/navigation/toolkit/bathroom_queue.md
@@ -0,0 +1,181 @@
+---
+layout: aesthetihawk
+title: Bathroom Queue
+permalink: /bathroom_queue/
+---
+
+<head>
+    <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
+</head>
+
+<div class="max-w-[75vw] mx-auto px-4 py-12">
+    <!-- Centered Header -->
+    <div class="text-center mb-12">
+        <h1 class="text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400 tracking-tight mb-6">
+            BATHROOM QUEUE
+        </h1>
+        
+        <div class="flex justify-center items-center gap-6 bg-neutral-900/50 backdrop-blur-xl p-6 rounded-2xl border border-neutral-800 shadow-2xl inline-flex mx-auto">
+            <div class="text-center px-4 border-r border-neutral-800">
+                <span id="currentAway" class="block text-3xl font-bold text-indigo-400">0</span>
+                <span class="text-[10px] uppercase tracking-widest text-neutral-500 font-bold">Away</span>
+            </div>
+            <div class="text-center px-4">
+                <span id="maxCapacity" class="block text-3xl font-bold text-neutral-400">1</span>
+                <span class="text-[10px] uppercase tracking-widest text-neutral-500 font-bold">Limit</span>
+            </div>
+            <div id="statusIndicator" class="flex items-center gap-2 px-4 py-2 rounded-full bg-green-500/10 border border-green-500/20">
+                <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+                <span class="text-xs font-bold text-green-500 uppercase tracking-wider">Available</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Queue List Section (Copied exactly logic/html) -->
+    <div class="bg-neutral-900/50 backdrop-blur-xl rounded-3xl border border-neutral-800 p-8 shadow-2xl">
+        <div class="flex items-center justify-between mb-8">
+            <h2 class="text-xl font-black text-white tracking-tight flex items-center gap-3">
+                <span class="bg-indigo-500/20 text-indigo-400 p-2 rounded-lg">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+                </span>
+                QUEUE MONITOR
+            </h2>
+            <span id="queueTotal" class="bg-neutral-800 text-neutral-400 px-3 py-1 rounded-lg text-xs font-bold">0 Active</span>
+        </div>
+
+        <div id="queueList" class="space-y-4">
+            <!-- Queue items will be injected here -->
+            <div class="flex flex-col items-center justify-center py-12 text-center">
+                <div class="w-16 h-16 rounded-2xl bg-neutral-800 flex items-center justify-center mb-4 border border-neutral-700/50">
+                    <svg class="w-8 h-8 text-neutral-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg>
+                </div>
+                <p class="text-neutral-500 font-medium">Queue is currently empty</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script type="module">
+    import { pythonURI, javaURI, fetchOptions } from '{{site.baseurl}}/assets/js/api/config.js';
+    import { showToast } from "{{site.baseurl}}/assets/js/aesthetihawk/shared/toastHandler.js";
+
+    let currentUserEmail = null;
+
+    // Fetch current user email on load
+    async function initializeCurrentUser() {
+        try {
+            const resp = await fetch(`${javaURI}/api/person/get`, fetchOptions);
+            if (resp.ok) {
+                const user = await resp.json();
+                currentUserEmail = user.email;
+                console.log("Current user email:", currentUserEmail);
+                refreshQueue(); // Refresh after getting email
+            } else {
+                console.error("Failed to fetch user - status:", resp.status);
+                // Try refreshing anyway in case of guest access, though the endpoint might 404
+            }
+        } catch (err) {
+            console.error("Failed to fetch current user:", err);
+        }
+    }
+
+    async function refreshQueue() {
+        if (!currentUserEmail) return; // Wait for initialization
+        try {
+            const resp = await fetch(`${javaURI}/api/bathroom/queue/${currentUserEmail}`, fetchOptions);
+            const data = await resp.json();
+            updateQueueUI(data);
+        } catch (err) {
+            console.error(err);
+        }
+    }
+
+    function updateQueueUI(data) {
+        document.getElementById('currentAway').textContent = data.away;
+        document.getElementById('maxCapacity').textContent = data.maxOccupancy;
+        
+        const list = document.getElementById('queueList');
+        const total = document.getElementById('queueTotal');
+        const indicator = document.getElementById('statusIndicator');
+        const dot = indicator.querySelector('div');
+        const statusText = indicator.querySelector('span');
+
+        if (data.away >= data.maxOccupancy) {
+            indicator.classList.remove('bg-green-500/10', 'border-green-500/20');
+            indicator.classList.add('bg-red-500/10', 'border-red-500/20');
+            dot.classList.remove('bg-green-500');
+            dot.classList.add('bg-red-500');
+            statusText.textContent = "Full";
+            statusText.classList.remove('text-green-500');
+            statusText.classList.add('text-red-500');
+        } else {
+            indicator.classList.remove('bg-red-500/10', 'border-red-500/20');
+            indicator.classList.add('bg-green-500/10', 'border-green-500/20');
+            dot.classList.remove('bg-red-500');
+            dot.classList.add('bg-green-500');
+            statusText.textContent = "Available";
+            statusText.classList.remove('text-red-500');
+            statusText.classList.add('text-green-500');
+        }
+
+        if (!data.peopleQueue) {
+            list.innerHTML = `<p class="text-neutral-500 text-center py-8">Queue is empty</p>`;
+            total.textContent = "0 Active";
+            return;
+        }
+
+        const students = data.peopleQueue.split(',');
+        total.textContent = `${students.length} Total`;
+        
+        list.innerHTML = students.map((s, i) => {
+            const isActive = i < data.away;
+            return `
+                <div class="flex items-center justify-between p-4 rounded-2xl border ${isActive ? 'bg-indigo-500/10 border-indigo-500/30 shadow-[0_0_20px_rgba(99,102,241,0.1)]' : 'bg-neutral-800/50 border-neutral-800'} transition-all">
+                    <div class="flex items-center gap-4">
+                        <div class="w-10 h-10 rounded-full ${isActive ? 'bg-indigo-500' : 'bg-neutral-800'} flex items-center justify-center text-sm font-bold text-white">
+                            ${s.substring(0, 2).toUpperCase()}
+                        </div>
+                        <div>
+                            <h4 class="font-bold text-white text-sm">${s}</h4>
+                            <span class="text-[10px] uppercase tracking-widest ${isActive ? 'text-indigo-400' : 'text-neutral-500'} font-black">
+                                ${isActive ? 'Currently Away' : 'Waiting in Line'}
+                            </span>
+                        </div>
+                    </div>
+                    ${isActive ? `
+                        <button onclick="returnFromBathroom('${s}')" class="p-2 hover:bg-red-500/10 rounded-lg text-neutral-500 hover:text-red-500 transition-colors">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+                        </button>
+                    ` : ''}
+                </div>
+            `;
+        }).join('');
+    }
+
+    async function returnFromBathroom(name) {
+        try {
+            const resp = await fetch(`${javaURI}/api/bathroom/remove`, {
+                ...fetchOptions,
+                method: 'DELETE',
+                body: JSON.stringify({
+                    teacherEmail: currentUserEmail,
+                    studentName: name
+                })
+            });
+            
+            if (resp.ok) {
+                showToast({ message: "Welcome back!", duration: 3000 });
+                refreshQueue();
+            }
+        } catch (err) {
+            console.error(err);
+        }
+    }
+
+    window.returnFromBathroom = returnFromBathroom;
+
+    // Initialize logic
+    initializeCurrentUser();
+    setInterval(refreshQueue, 3000); // Poll more frequently for a dedicated monitor page
+</script>