total-recall-brain 3.6.2 → 3.6.4

package/extension/sidepanel/sidepanel.css

@@ -735,3 +735,237 @@ body {
 ::-webkit-scrollbar-thumb:hover {
   background: #45475a;
 }
+
+/* ==================== PANEL 5: COLLABORATION ==================== */
+
+.collab-section {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  height: 100%;
+}
+
+.collab-subtext {
+  font-size: 12px;
+  color: #a6adc8;
+  margin-bottom: 16px;
+  line-height: 1.4;
+}
+
+.collab-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.collab-form input {
+  width: 100%;
+  padding: 10px 14px;
+  background: #1e1e2e;
+  border: 1px solid #313244;
+  border-radius: 10px;
+  color: #cdd6f4;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.collab-form input:focus {
+  border-color: #cba6f7;
+}
+
+.collab-user-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 10px;
+  background: #181825;
+  border: 1px solid #313244;
+  border-radius: 10px;
+  margin-bottom: 12px;
+  font-size: 13px;
+  color: #cdd6f4;
+  flex-shrink: 0;
+}
+
+.collab-logout-btn {
+  background: transparent;
+  border: none;
+  color: #f38ba8;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 2px 6px;
+}
+
+.collab-logout-btn:hover {
+  text-decoration: underline;
+}
+
+.collab-control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 8px;
+  flex-shrink: 0;
+}
+
+.collab-control-group label {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #6c7086;
+  letter-spacing: 0.5px;
+}
+
+.collab-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+  margin-bottom: 6px;
+  flex-shrink: 0;
+}
+
+.collab-panel-header h4 {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #6c7086;
+  letter-spacing: 0.5px;
+}
+
+.collab-list {
+  flex: 1;
+  min-height: 80px;
+  max-height: 140px;
+  overflow-y: auto;
+  border: 1px solid #313244;
+  background: #181825;
+  border-radius: 10px;
+  padding: 8px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.collab-annotation-item {
+  background: #1e1e2e;
+  border: 1px solid #313244;
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.collab-annotation-item .author {
+  font-size: 10px;
+  color: #89b4fa;
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+
+.collab-annotation-item .text {
+  color: #cdd6f4;
+  word-break: break-word;
+}
+
+.collab-annotation-item .excerpt {
+  font-size: 11px;
+  color: #a6adc8;
+  font-style: italic;
+  border-left: 2px solid #89b4fa;
+  padding-left: 6px;
+  margin-bottom: 4px;
+}
+
+.collab-annotation-item .time {
+  font-size: 9px;
+  color: #585b70;
+  text-align: right;
+  margin-top: 4px;
+}
+
+.collab-annotation-form {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.collab-annotation-form textarea {
+  width: 100%;
+  height: 48px;
+  min-height: 48px;
+  padding: 6px 8px;
+  background: #1e1e2e;
+  border: 1px solid #313244;
+  border-radius: 8px;
+  color: #cdd6f4;
+  font-size: 12px;
+  resize: none;
+  outline: none;
+  font-family: inherit;
+  transition: border-color 0.2s ease;
+}
+
+.collab-annotation-form textarea:focus {
+  border-color: #cba6f7;
+}
+
+.collab-chat-box {
+  flex: 2;
+  min-height: 100px;
+  max-height: 200px;
+  border: 1px solid #313244;
+  background: #181825;
+  border-radius: 10px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+  margin-bottom: 6px;
+}
+
+.collab-input-bar {
+  padding: 0 !important;
+  border-top: none !important;
+  margin-bottom: 0 !important;
+}
+
+.collab-input-bar textarea {
+  height: 34px !important;
+  max-height: 34px !important;
+  font-size: 12px !important;
+  border-radius: 8px !important;
+  padding: 8px !important;
+}
+
+.collab-input-bar button {
+  height: 34px !important;
+  width: 50px !important;
+  border-radius: 8px !important;
+  font-size: 11px !important;
+}
+
+/* Pulse animation for presence badge */
+.pulse {
+  animation: pulse-glow 2s infinite;
+}
+
+@keyframes pulse-glow {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(166, 227, 161, 0.7);
+  }
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 5px rgba(166, 227, 161, 0);
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(166, 227, 161, 0);
+  }
+}
+

package/extension/sidepanel/sidepanel.html

@@ -22,6 +22,7 @@
       <button class="tab-btn" data-tab="chat">💬 Chat</button>
       <button class="tab-btn" data-tab="research">🔬 Research</button>
       <button class="tab-btn" data-tab="settings">⚙️ Settings</button>
+      <button class="tab-btn" data-tab="collab">👥 Collab</button>
     </nav>
 
     <!-- Tab Panels Container -->
@@ -128,6 +129,77 @@
         </div>
       </section>
 
+      <!-- Panel 5: Collaboration -->
+      <section id="tab-collab" class="tab-panel">
+        <!-- Auth View -->
+        <div id="collab-auth-view" class="collab-section">
+          <h3>👥 Join Collab Network</h3>
+          <p class="collab-subtext">Register or log in to sync annotations and chat on websites live.</p>
+          <div class="collab-form">
+            <input type="text" id="collab-username" placeholder="Username" />
+            <input type="password" id="collab-password" placeholder="Password" />
+            <div style="display: flex; gap: 8px; margin-top: 8px;">
+              <button id="btn-collab-login" class="action-btn accent" style="flex: 1;">Login</button>
+              <button id="btn-collab-register" class="action-btn" style="flex: 1;">Register</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Main Collaboration View -->
+        <div id="collab-main-view" class="collab-section hidden" style="display: flex; flex-direction: column; height: 100%;">
+          <div class="collab-user-bar">
+            <span>👤 <strong id="collab-user-display"></strong></span>
+            <button id="btn-collab-logout" class="collab-logout-btn">Logout</button>
+          </div>
+
+          <div class="collab-control-group">
+            <label for="collab-group-select">Workspace Group</label>
+            <select id="collab-group-select" class="settings-select"></select>
+          </div>
+
+          <div class="collab-action-grid" style="display: flex; gap: 8px; margin-bottom: 8px; margin-top: 4px;">
+            <button id="btn-collab-show-join" class="action-btn" style="padding: 6px; font-size: 11px;">Join Group</button>
+            <button id="btn-collab-show-create" class="action-btn" style="padding: 6px; font-size: 11px;">Create Group</button>
+          </div>
+
+          <div id="collab-join-group-row" class="collab-action-row hidden" style="display: flex; gap: 6px; margin-bottom: 8px;">
+            <input type="text" id="collab-join-code" placeholder="Invite Code" style="flex: 1; padding: 6px; font-size: 12px; background: #1e1e2e; border: 1px solid #313244; color: #cdd6f4; border-radius: 6px;" />
+            <button id="btn-collab-submit-join" class="action-btn accent" style="flex-shrink: 0; padding: 6px 12px; font-size: 11px; height: 28px;">Join</button>
+          </div>
+
+          <div id="collab-create-group-row" class="collab-action-row hidden" style="display: flex; gap: 6px; margin-bottom: 8px;">
+            <input type="text" id="collab-create-name" placeholder="Group Name" style="flex: 1; padding: 6px; font-size: 12px; background: #1e1e2e; border: 1px solid #313244; color: #cdd6f4; border-radius: 6px;" />
+            <button id="btn-collab-submit-create" class="action-btn accent" style="flex-shrink: 0; padding: 6px 12px; font-size: 11px; height: 28px;">Create</button>
+          </div>
+
+          <!-- Pinned Annotations -->
+          <div class="collab-panel-header">
+            <h4>📌 Notes on Page</h4>
+          </div>
+          <div id="collab-annotations-list" class="collab-list"></div>
+
+          <!-- Add Annotation Form -->
+          <div class="collab-annotation-form">
+            <textarea id="collab-note-input" placeholder="Pin a note to this page..."></textarea>
+            <button id="btn-collab-save-note" class="action-btn accent" style="width: 100%; margin-top: 4px; padding: 6px; font-size: 12px;">Pin Note</button>
+          </div>
+
+          <!-- Real-time Site Chat -->
+          <div class="collab-panel-header" style="margin-top: 8px;">
+            <h4>💬 Site Chat Room</h4>
+            <div style="display: flex; align-items: center; gap: 4px;">
+              <span class="pulse" style="width: 6px; height: 6px; background: #a6e3a1; box-shadow: 0 0 4px #a6e3a1; border-radius: 50%;"></span>
+              <span id="collab-presence-count" style="font-size: 10px; color: #a6e3a1;">1 online</span>
+            </div>
+          </div>
+          <div id="collab-chat-messages" class="chat-messages collab-chat-box"></div>
+          <div class="chat-input-bar collab-input-bar">
+            <textarea id="collab-chat-input" placeholder="Send a message to team..."></textarea>
+            <button id="btn-collab-send-chat" class="chat-send-btn">Send</button>
+          </div>
+        </div>
+      </section>
+
     </div>
   </div>
   <script src="../lib/preconfigured.js"></script>

package/extension/sidepanel/sidepanel.js

@@ -676,6 +676,413 @@ Provide helpful analysis grounded on both the user's brain memory and this page
     }
   }
 
+  // ==================== COLLABORATION MODULE ====================
+  const collabAuthView = document.getElementById('collab-auth-view');
+  const collabMainView = document.getElementById('collab-main-view');
+  const collabUsernameInput = document.getElementById('collab-username');
+  const collabPasswordInput = document.getElementById('collab-password');
+  const btnCollabLogin = document.getElementById('btn-collab-login');
+  const btnCollabRegister = document.getElementById('btn-collab-register');
+
+  const collabUserDisplay = document.getElementById('collab-user-display');
+  const btnCollabLogout = document.getElementById('btn-collab-logout');
+  const collabGroupSelect = document.getElementById('collab-group-select');
+
+  const btnCollabShowJoin = document.getElementById('btn-collab-show-join');
+  const btnCollabShowCreate = document.getElementById('btn-collab-show-create');
+  const collabJoinGroupRow = document.getElementById('collab-join-group-row');
+  const collabJoinCode = document.getElementById('collab-join-code');
+  const btnCollabSubmitJoin = document.getElementById('btn-collab-submit-join');
+
+  const collabCreateGroupRow = document.getElementById('collab-create-group-row');
+  const collabCreateName = document.getElementById('collab-create-name');
+  const btnCollabSubmitCreate = document.getElementById('btn-collab-submit-create');
+
+  const collabAnnotationsList = document.getElementById('collab-annotations-list');
+  const collabNoteInput = document.getElementById('collab-note-input');
+  const btnCollabSaveNote = document.getElementById('btn-collab-save-note');
+
+  const collabPresenceCount = document.getElementById('collab-presence-count');
+  const collabChatMessages = document.getElementById('collab-chat-messages');
+  const collabChatInput = document.getElementById('collab-chat-input');
+  const btnCollabSendChat = document.getElementById('btn-collab-send-chat');
+
+  let collabToken = '';
+  let collabUsername = '';
+  let collabActiveUrl = '';
+  let collabSocket = null;
+  let collabGroups = [];
+  let collabSelectedGroup = null;
+
+  async function initCollab() {
+    const data = await chrome.storage.local.get(['collabToken', 'collabUsername']);
+    if (data.collabToken && data.collabUsername) {
+      collabToken = data.collabToken;
+      collabUsername = data.collabUsername;
+      showCollabMain();
+    } else {
+      showCollabAuth();
+    }
+  }
+
+  function showCollabAuth() {
+    collabAuthView.classList.remove('hidden');
+    collabMainView.classList.add('hidden');
+    closeCollabSocket();
+  }
+
+  async function showCollabMain() {
+    collabAuthView.classList.add('hidden');
+    collabMainView.classList.remove('hidden');
+    collabUserDisplay.textContent = collabUsername;
+    await fetchCollabGroups();
+    updateCollabActiveUrl();
+  }
+
+  async function fetchCollabGroups() {
+    try {
+      const config = await self.BrainClient.getConfig();
+      const res = await fetch(`${config.brainUrl}/api/collab/groups`, {
+        headers: { 'Authorization': `Bearer ${collabToken}` }
+      });
+      if (res.ok) {
+        collabGroups = await res.json();
+        renderCollabGroupsDropdown();
+      } else if (res.status === 401) {
+        logoutCollab();
+      }
+    } catch (err) {
+      console.error('Failed to fetch collab groups:', err);
+    }
+  }
+
+  function renderCollabGroupsDropdown() {
+    collabGroupSelect.innerHTML = collabGroups.map(g => 
+      `<option value="${g.code}">${escapeHtml(g.name)} (${g.code})</option>`
+    ).join('');
+    if (collabGroups.length > 0) {
+      const activeCode = collabGroupSelect.value;
+      collabSelectedGroup = collabGroups.find(g => g.code === activeCode) || collabGroups[0];
+    } else {
+      collabSelectedGroup = null;
+    }
+  }
+
+  async function updateCollabActiveUrl() {
+    try {
+      const tab = await getCurrentTab();
+      if (tab && tab.url && !tab.url.startsWith('chrome://') && !tab.url.startsWith('about:') && !tab.url.startsWith('chrome-extension://')) {
+        const cleanUrl = tab.url.split('#')[0];
+        if (cleanUrl !== collabActiveUrl) {
+          collabActiveUrl = cleanUrl;
+          if (collabToken) {
+            await fetchCollabAnnotations();
+            connectCollabSocket();
+          }
+        }
+      } else {
+        collabActiveUrl = '';
+        collabAnnotationsList.innerHTML = '<div class="memories-empty">No active web tab</div>';
+        closeCollabSocket();
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  async function fetchCollabAnnotations() {
+    if (!collabActiveUrl || !collabToken) return;
+    try {
+      const config = await self.BrainClient.getConfig();
+      const res = await fetch(`${config.brainUrl}/api/collab/annotations?url=${encodeURIComponent(collabActiveUrl)}`, {
+        headers: { 'Authorization': `Bearer ${collabToken}` }
+      });
+      if (res.ok) {
+        const annotations = await res.json();
+        renderCollabAnnotations(annotations);
+      }
+    } catch (err) {
+      console.error('Failed to fetch annotations:', err);
+    }
+  }
+
+  function renderCollabAnnotations(list) {
+    if (!list.length) {
+      collabAnnotationsList.innerHTML = '<div class="memories-empty">No notes on this page</div>';
+      return;
+    }
+    collabAnnotationsList.innerHTML = list.map(a => `
+      <div class="collab-annotation-item">
+        <div class="author">👤 ${escapeHtml(a.author)}</div>
+        ${a.excerpt ? `<div class="excerpt">${escapeHtml(a.excerpt)}</div>` : ''}
+        <div class="text">${escapeHtml(a.text)}</div>
+        <div class="time">${formatTime(a.created_at)}</div>
+      </div>
+    `).join('');
+  }
+
+  function connectCollabSocket() {
+    if (!collabToken || !collabActiveUrl) return;
+    closeCollabSocket();
+
+    self.BrainClient.getConfig().then(config => {
+      const serverUrl = new URL(config.brainUrl);
+      const wsProto = serverUrl.protocol === 'https:' ? 'wss:' : 'ws:';
+      const wsUrl = `${wsProto}//${serverUrl.host}/collab-ws?token=${collabToken}`;
+      
+      const ws = new WebSocket(wsUrl);
+      collabSocket = ws;
+
+      ws.onopen = () => {
+        ws.send(JSON.stringify({ type: 'SUBSCRIBE', url: collabActiveUrl }));
+        collabPresenceCount.textContent = 'Connected';
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          if (data.type === 'CHAT_MESSAGE') {
+            appendCollabChatBubble(data.username, data.text, data.created_at);
+          } else if (data.type === 'USER_JOINED') {
+            appendCollabChatBubble('System', `${data.username} joined this page`, new Date().toISOString(), true);
+          } else if (data.type === 'USER_LEFT') {
+            appendCollabChatBubble('System', `${data.username} left`, new Date().toISOString(), true);
+          } else if (data.type === 'ANNOTATION_ADDED') {
+            fetchCollabAnnotations();
+          }
+        } catch (err) {
+          console.error(err);
+        }
+      };
+
+      ws.onclose = () => {
+        collabPresenceCount.textContent = 'Disconnected';
+      };
+
+      ws.onerror = () => {
+        collabPresenceCount.textContent = 'Error';
+      };
+    });
+  }
+
+  function closeCollabSocket() {
+    if (collabSocket) {
+      try {
+        collabSocket.close();
+      } catch {}
+      collabSocket = null;
+    }
+  }
+
+  function appendCollabChatBubble(sender, text, timestamp, isSystem = false) {
+    const bubble = document.createElement('div');
+    if (isSystem) {
+      bubble.className = 'chat-bubble system';
+      bubble.textContent = text;
+    } else {
+      const isMe = sender.toLowerCase() === collabUsername.toLowerCase();
+      bubble.className = `chat-bubble ${isMe ? 'user' : 'assistant'}`;
+      bubble.innerHTML = `<span style="font-size: 10px; opacity: 0.8; font-weight: bold; display: block; margin-bottom: 2px;">${escapeHtml(sender)}</span>${escapeHtml(text)}`;
+    }
+    collabChatMessages.appendChild(bubble);
+    collabChatMessages.scrollTop = collabChatMessages.scrollHeight;
+  }
+
+  async function registerCollab(username, password) {
+    try {
+      const config = await self.BrainClient.getConfig();
+      const res = await fetch(`${config.brainUrl}/api/collab/auth/register`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password })
+      });
+      const data = await res.json();
+      if (res.ok) {
+        collabToken = data.token;
+        collabUsername = data.username;
+        await chrome.storage.local.set({ collabToken: data.token, collabUsername: data.username });
+        showToast('Registered successfully!');
+        showCollabMain();
+      } else {
+        showToast('Registration failed: ' + (data.error || 'Unknown error'), true);
+      }
+    } catch (err) {
+      showToast('Registration error: ' + err.message, true);
+    }
+  }
+
+  async function loginCollab(username, password) {
+    try {
+      const config = await self.BrainClient.getConfig();
+      const res = await fetch(`${config.brainUrl}/api/collab/auth/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password })
+      });
+      const data = await res.json();
+      if (res.ok) {
+        collabToken = data.token;
+        collabUsername = data.username;
+        await chrome.storage.local.set({ collabToken: data.token, collabUsername: data.username });
+        showToast('Logged in successfully!');
+        showCollabMain();
+      } else {
+        showToast('Login failed: ' + (data.error || 'Unknown error'), true);
+      }
+    } catch (err) {
+      showToast('Login error: ' + err.message, true);
+    }
+  }
+
+  async function logoutCollab() {
+    collabToken = '';
+    collabUsername = '';
+    await chrome.storage.local.remove(['collabToken', 'collabUsername']);
+    showCollabAuth();
+    showToast('Logged out');
+  }
+
+  // --- Buttons / Forms bindings ---
+  btnCollabLogin.addEventListener('click', () => {
+    const u = collabUsernameInput.value.trim();
+    const p = collabPasswordInput.value.trim();
+    if (u && p) loginCollab(u, p);
+  });
+
+  btnCollabRegister.addEventListener('click', () => {
+    const u = collabUsernameInput.value.trim();
+    const p = collabPasswordInput.value.trim();
+    if (u && p) registerCollab(u, p);
+  });
+
+  btnCollabLogout.addEventListener('click', logoutCollab);
+
+  btnCollabShowJoin.addEventListener('click', () => {
+    collabJoinGroupRow.classList.toggle('hidden');
+    collabCreateGroupRow.classList.add('hidden');
+  });
+
+  btnCollabShowCreate.addEventListener('click', () => {
+    collabCreateGroupRow.classList.toggle('hidden');
+    collabJoinGroupRow.classList.add('hidden');
+  });
+
+  btnCollabSubmitJoin.addEventListener('click', async () => {
+    const code = collabJoinCode.value.trim();
+    if (!code) return;
+    try {
+      const config = await self.BrainClient.getConfig();
+      const res = await fetch(`${config.brainUrl}/api/collab/groups/join`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${collabToken}`
+        },
+        body: JSON.stringify({ code })
+      });
+      const data = await res.json();
+      if (res.ok) {
+        showToast('Joined group!');
+        collabJoinCode.value = '';
+        collabJoinGroupRow.classList.add('hidden');
+        await fetchCollabGroups();
+      } else {
+        showToast('Join error: ' + data.error, true);
+      }
+    } catch (err) {
+      showToast('Failed to join: ' + err.message, true);
+    }
+  });
+
+  btnCollabSubmitCreate.addEventListener('click', async () => {
+    const name = collabCreateName.value.trim();
+    if (!name) return;
+    try {
+      const config = await self.BrainClient.getConfig();
+      const res = await fetch(`${config.brainUrl}/api/collab/groups`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${collabToken}`
+        },
+        body: JSON.stringify({ name })
+      });
+      const data = await res.json();
+      if (res.ok) {
+        showToast('Group created!');
+        collabCreateName.value = '';
+        collabCreateGroupRow.classList.add('hidden');
+        await fetchCollabGroups();
+      } else {
+        showToast('Create error: ' + data.error, true);
+      }
+    } catch (err) {
+      showToast('Failed to create group: ' + err.message, true);
+    }
+  });
+
+  collabGroupSelect.addEventListener('change', () => {
+    const activeCode = collabGroupSelect.value;
+    collabSelectedGroup = collabGroups.find(g => g.code === activeCode) || null;
+    fetchCollabAnnotations();
+  });
+
+  btnCollabSaveNote.addEventListener('click', async () => {
+    const text = collabNoteInput.value.trim();
+    if (!text || !collabActiveUrl || !collabSelectedGroup) return;
+    try {
+      const config = await self.BrainClient.getConfig();
+      const res = await fetch(`${config.brainUrl}/api/collab/annotations`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${collabToken}`
+        },
+        body: JSON.stringify({
+          url: collabActiveUrl,
+          groupCode: collabSelectedGroup.code,
+          text
+        })
+      });
+      if (res.ok) {
+        showToast('Note pinned!');
+        collabNoteInput.value = '';
+        fetchCollabAnnotations();
+      } else {
+        const errData = await res.json();
+        showToast('Pin note error: ' + errData.error, true);
+      }
+    } catch (err) {
+      showToast('Failed to pin note: ' + err.message, true);
+    }
+  });
+
+  btnCollabSendChat.addEventListener('click', () => {
+    const text = collabChatInput.value.trim();
+    if (text && collabSocket && collabSocket.readyState === WebSocket.OPEN) {
+      collabSocket.send(JSON.stringify({ type: 'CHAT_MESSAGE', text }));
+      collabChatInput.value = '';
+    }
+  });
+
+  collabChatInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      btnCollabSendChat.click();
+    }
+  });
+
+  // Listen for tab active changes
+  chrome.tabs.onActivated.addListener(() => {
+    updateCollabActiveUrl();
+  });
+
+  chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+    if (changeInfo.url) {
+      updateCollabActiveUrl();
+    }
+  });
+
   // ---- Event listeners ----
   searchInput.addEventListener('input', (e) => debounceSearch(e.target.value));
 
@@ -684,6 +1091,7 @@ Provide helpful analysis grounded on both the user's brain memory and this page
   loadSettingsState().then(() => {
     loadRecentCaptures();
     recordRememberInvariants();
+    initCollab();
   });
   
   // Set intervals
@@ -696,3 +1104,5 @@ Provide helpful analysis grounded on both the user's brain memory and this page
     }
   }, 30000);
 })();
+
+

package/frontend/src/api.ts

@@ -530,6 +530,13 @@ export async function triggerDream(): Promise<{ success: boolean; status: string
   return res.json()
 }
 
+export async function runAgentDiagnostics(): Promise<{ success: boolean; output: string }> {
+  const res = await apiFetch(`${API_BASE}/api/diagnostics/agents`, { method: 'POST' })
+  if (!res.ok) throw new Error(`Diagnostics API error: ${res.status}`)
+  return res.json()
+}
+
+
 export async function fetchGraph(): Promise<{ nodes: MemoryNode[]; routes: unknown[] }> {
   const res = await apiFetch(`${API_BASE}/api/graph`)
   if (!res.ok) throw new Error(`Graph API error: ${res.status}`)

package/frontend/src/pages/CollabPage.tsx

@@ -166,7 +166,7 @@ function CollabDashboard({ token, username, onLogout, onSelectSandbox }: { token
           <p style={{ fontSize: '12px', color: 'var(--text-secondary)' }}>Share annotations and real-time page chat rooms</p>
         </div>
         <div style={{ display: 'flex', gap: '10px' }}>
-          <button className="btn btn-purple" onClick={onSelectSandbox}>🌐 Open Page Sandbox</button>
+          <button className="btn btn-purple" onClick={onSelectSandbox}>🌐 Open Browse Workspace</button>
           <button className="btn btn-ghost" onClick={onLogout} style={{ color: '#f87171' }}>Logout</button>
         </div>
       </div>
@@ -219,7 +219,7 @@ function CollabDashboard({ token, username, onLogout, onSelectSandbox }: { token
 function CollabSandbox({ token, username, onBack }: { token: string, username: string, onBack: () => void }) {
   const [groups, setGroups] = useState<CollabGroup[]>([]);
   const [selectedGroup, setSelectedGroup] = useState<CollabGroup | null>(null);
-  const [simulatedUrl, setSimulatedUrl] = useState('https://news.ycombinator.com');
+  const [activeBrowseUrl, setActiveBrowseUrl] = useState('https://news.ycombinator.com');
   const [activeUrl, setActiveUrl] = useState('https://news.ycombinator.com');
   const [annotations, setAnnotations] = useState<Annotation[]>([]);
   const [noteText, setNoteText] = useState('');
@@ -313,9 +313,9 @@ function CollabSandbox({ token, username, onBack }: { token: string, username: s
 
   const handleUrlSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (!simulatedUrl.trim()) return;
+    if (!activeBrowseUrl.trim()) return;
     setChatMessages([]); setSystemLogs([]); setActiveUsers([]);
-    setActiveUrl(simulatedUrl);
+    setActiveUrl(activeBrowseUrl);
   };
 
   const handleAddAnnotation = async (e: React.FormEvent) => {
@@ -348,14 +348,14 @@ function CollabSandbox({ token, username, onBack }: { token: string, username: s
       <div style={{ display: 'flex', gap: '16px', alignItems: 'center', justifyContent: 'space-between', background: 'rgba(255,255,255,0.02)', padding: '12px 20px', borderRadius: '8px', border: '1px solid var(--border)', flexWrap: 'wrap' }}>
         <button className="btn btn-ghost" onClick={onBack}>← Back to Workspaces</button>
         <form onSubmit={handleUrlSubmit} style={{ display: 'flex', gap: '10px', flex: '1', minWidth: '250px' }}>
-          <input type="text" value={simulatedUrl} onChange={e => setSimulatedUrl(e.target.value)} style={{ background: 'rgba(0,0,0,0.2)', border: '1px solid var(--border)', color: '#fff', padding: '6px 12px', borderRadius: '6px', flex: '1', fontFamily: 'monospace' }} />
-          <button type="submit" className="btn btn-purple">Simulate Visit</button>
+          <input type="text" value={activeBrowseUrl} onChange={e => setActiveBrowseUrl(e.target.value)} style={{ background: 'rgba(0,0,0,0.2)', border: '1px solid var(--border)', color: '#fff', padding: '6px 12px', borderRadius: '6px', flex: '1', fontFamily: 'monospace' }} />
+          <button type="submit" className="btn btn-purple">Connect URL</button>
         </form>
         <div style={{ fontSize: '13px', color: wsConnected ? '#34d399' : '#f87171' }}>● {wsConnected ? 'Connected' : 'Disconnected'}</div>
       </div>
 
       <div style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>
-        Simulated browser context: <strong style={{ color: 'var(--purple-primary)', fontFamily: 'monospace' }}>{activeUrl}</strong>
+        Active browse context URL: <strong style={{ color: 'var(--purple-primary)', fontFamily: 'monospace' }}>{activeUrl}</strong>
       </div>
 
       <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: '20px', height: '500px' }}>

package/frontend/src/pages/DeploymentsPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
-import { fetchHealth, fetchLogs } from '../api';
+import { fetchHealth, fetchLogs, runAgentDiagnostics } from '../api';
 import type { HealthData } from '../types';
 
 export default function DeploymentsPage() {
@@ -9,9 +9,9 @@ export default function DeploymentsPage() {
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
   
-  // Model Pull Form state
-  const [modelToPull, setModelToPull] = useState('gemma4:26b');
-  const [pulling, setPulling] = useState(false);
+  // CLI Agent Diagnostics state
+  const [runningDiagnostics, setRunningDiagnostics] = useState(false);
+  const [diagnosticLogs, setDiagnosticLogs] = useState<string | null>(null);
 
   const consoleEndRef = useRef<HTMLDivElement>(null);
 
@@ -44,29 +44,36 @@ export default function DeploymentsPage() {
     }
   }, [logs]);
 
-  const handlePullModel = async (e: React.FormEvent) => {
+  const handleRunDiagnostics = async (e: React.FormEvent) => {
     e.preventDefault();
-    setPulling(true);
+    setRunningDiagnostics(true);
     setError(null);
     setSuccess(null);
+    setDiagnosticLogs(null);
     try {
-      // Simulate/trigger model pull trigger enqueued in task manager
-      setSuccess(`Model pull job successfully enqueued for "${modelToPull}" in the background task runner.`);
-      setTimeout(() => setSuccess(null), 5000);
+      const res = await runAgentDiagnostics();
+      setDiagnosticLogs(res.output);
+      if (res.success) {
+        setSuccess('CLI Agent diagnostics completed successfully.');
+      } else {
+        setError('CLI Agent diagnostics finished with warnings or missing binaries.');
+      }
+      void fetchSystemData();
     } catch (err: unknown) {
-      setError((err as Error).message || 'Model pull request failed.');
+      setError((err as Error).message || 'Diagnostics execution failed.');
     } finally {
-      setPulling(false);
+      setRunningDiagnostics(false);
     }
   };
 
-  const MODELS_CATALOG = [
-    { id: 'gemma4:26b', name: 'Gemma 4 (26B Parameter)', size: '15.6 GB', purpose: 'Standard Kernel LLM (Reasoning & Code Harness)', status: 'ready', type: 'ollama' },
-    { id: 'gemma5:32b', name: 'Gemma 5 Pro (32B Parameter)', size: '19.2 GB', purpose: 'Advanced Reasoning & Deliberation Engine', status: 'available', type: 'ollama' },
-    { id: 'text-embedding-004', name: 'Gemini Text Embeddings v4', size: 'Cloud-native', purpose: 'High-Dimensional Dense Vectorization', status: 'ready', type: 'gemini' },
-    { id: 'claude-3-5-sonnet', name: 'Claude 3.5 Sonnet', size: 'Cloud-native', purpose: 'Frontier Advanced Programming', status: 'ready', type: 'claude' },
+  const AGENTS_LIST = [
+    { id: 'antigravity', name: 'Antigravity (Gemini SDK)', desc: 'Primary core developer agent' },
+    { id: 'gemini', name: 'Gemini CLI', desc: 'Direct Gemini assistant binary' },
+    { id: 'claude', name: 'Claude Code', desc: 'Anthropic developer CLI wrapper' },
+    { id: 'codex', name: 'Codex CLI', desc: 'OpenAI agent binary integration' }
   ];
 
+
   return (
     <div className="page" style={{ display: 'flex', flexDirection: 'column', height: '100%', overflowY: 'auto' }}>
       <div className="page-header" style={{ marginBottom: 24 }}>
@@ -146,7 +153,7 @@ export default function DeploymentsPage() {
 
           </div>
 
-          {/* Model Catalog & Pull form */}
+           {/* CLI Agents Catalog & Diagnostics */}
           <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 24 }}>
             
             {/* Catalog */}
@@ -154,31 +161,31 @@ export default function DeploymentsPage() {
               <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--border)', paddingBottom: 12 }}>
                 <span style={{ fontSize: 20 }}>🧠</span>
                 <div>
-                  <h3 style={{ fontSize: 14, fontWeight: 600 }}>Kernel LLM Catalog</h3>
-                  <p style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Provisioned local intelligence engines</p>
+                  <h3 style={{ fontSize: 14, fontWeight: 600 }}>CLI Reasoning Agents</h3>
+                  <p style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Headless CLI reasoning agents configured on system</p>
                 </div>
               </div>
 
               <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-                {MODELS_CATALOG.map((m) => {
-                  const activeModel = health?.ollama_models?.includes(m.id) || m.type !== 'ollama';
+                {AGENTS_LIST.map((a) => {
+                  const activeAgent = health?.cli_agents?.includes(a.id);
                   return (
-                    <div key={m.id} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--bg-tertiary)', padding: 12, borderRadius: 8, border: '1px solid var(--border)' }}>
+                    <div key={a.id} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--bg-tertiary)', padding: 12, borderRadius: 8, border: '1px solid var(--border)' }}>
                       <div style={{ flex: 1 }}>
                         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                          <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-primary)' }}>{m.name}</span>
+                          <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-primary)' }}>{a.name}</span>
                           <span className="badge" style={{
                             fontSize: 9,
                             padding: '2px 6px',
-                            background: activeModel ? 'rgba(0, 206, 201, 0.1)' : 'rgba(255, 255, 255, 0.04)',
-                            color: activeModel ? '#00cec9' : 'var(--text-tertiary)',
-                            border: activeModel ? '1px solid rgba(0, 206, 201, 0.2)' : '1px solid var(--border)'
+                            background: activeAgent ? 'rgba(16, 185, 129, 0.1)' : 'rgba(239, 68, 68, 0.1)',
+                            color: activeAgent ? '#10b981' : '#ef4444',
+                            border: activeAgent ? '1px solid rgba(16, 185, 129, 0.2)' : '1px solid rgba(239, 68, 68, 0.2)'
                           }}>
-                            {activeModel ? 'active' : 'available'}
+                            {activeAgent ? 'available' : 'missing'}
                           </span>
                         </div>
-                        <div style={{ fontSize: 10, color: 'var(--text-secondary)', marginTop: 2 }}>{m.purpose}</div>
-                        <div style={{ fontSize: 9, color: 'var(--text-tertiary)', marginTop: 4 }}>ID: {m.id} • Size: {m.size}</div>
+                        <div style={{ fontSize: 10, color: 'var(--text-secondary)', marginTop: 2 }}>{a.desc}</div>
+                        <div style={{ fontSize: 9, color: 'var(--text-tertiary)', marginTop: 4 }}>Registry ID: {a.id}</div>
                       </div>
                     </div>
                   );
@@ -186,42 +193,24 @@ export default function DeploymentsPage() {
               </div>
             </div>
 
-            {/* Pull Model Form */}
+            {/* Diagnostics Form */}
             <div className="card" style={{ padding: 24, background: 'rgba(18, 18, 26, 0.6)', backdropFilter: 'blur(8px)', border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 20 }}>
               <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--border)', paddingBottom: 12 }}>
                 <span style={{ fontSize: 20 }}>📡</span>
                 <div>
-                  <h3 style={{ fontSize: 14, fontWeight: 600 }}>Pull Catalog Model</h3>
-                  <p style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Trigger high-performance model downloads in background</p>
+                  <h3 style={{ fontSize: 14, fontWeight: 600 }}>CLI Agent Diagnostics</h3>
+                  <p style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Trigger active paths check and verify registered agents</p>
                 </div>
               </div>
 
-              <form onSubmit={handlePullModel} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-                  <label htmlFor="model_pull" style={{ fontSize: 12, fontWeight: 500 }}>Select Catalog Model</label>
-                  <select
-                    id="model_pull"
-                    value={modelToPull}
-                    onChange={(e) => setModelToPull(e.target.value)}
-                    style={{
-                      background: 'var(--bg-tertiary)',
-                      color: 'var(--text-primary)',
-                      border: '1px solid var(--border)',
-                      padding: '8px 12px',
-                      borderRadius: 6,
-                      outline: 'none',
-                      fontSize: 13
-                    }}
-                  >
-                    <option value="gemma4:26b">Gemma 4 (26B Parameter) — 15.6 GB</option>
-                    <option value="gemma5:32b">Gemma 5 Pro (32B Parameter) — 19.2 GB</option>
-                    <option value="llama3:70b">Llama 3 (70B Parameter) — 40 GB</option>
-                  </select>
-                </div>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+                <p style={{ fontSize: 12, lineHeight: 1.5, color: 'var(--text-secondary)' }}>
+                  This executes a diagnostic check on registered reasoning agents (equivalent to running <code>npx total-recall upgrade --agents</code> in the background) to audit paths and verify binaries.
+                </p>
 
                 <button
-                  type="submit"
-                  disabled={pulling}
+                  onClick={handleRunDiagnostics}
+                  disabled={runningDiagnostics}
                   style={{
                     background: 'linear-gradient(135deg, var(--accent), var(--accent-hover))',
                     color: '#fff',
@@ -230,12 +219,32 @@ export default function DeploymentsPage() {
                     fontWeight: 500,
                     border: 'none',
                     marginTop: 8,
-                    cursor: pulling ? 'not-allowed' : 'pointer'
+                    cursor: runningDiagnostics ? 'not-allowed' : 'pointer'
                   }}
                 >
-                  {pulling ? '⏳ Initiating download...' : '🚀 Trigger Model Download'}
+                  {runningDiagnostics ? '⏳ Running Audit...' : '🚀 Run Diagnostics Audit'}
                 </button>
-              </form>
+              </div>
+
+              {diagnosticLogs && (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 10 }}>
+                  <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)' }}>Diagnostics Console Output:</span>
+                  <pre style={{
+                    background: '#07070a',
+                    border: '1px solid var(--border)',
+                    padding: 10,
+                    borderRadius: 6,
+                    fontFamily: 'var(--font-mono)',
+                    fontSize: 11,
+                    color: '#e6edf3',
+                    whiteSpace: 'pre-wrap',
+                    maxHeight: 150,
+                    overflowY: 'auto'
+                  }}>
+                    {diagnosticLogs}
+                  </pre>
+                </div>
+              )}
             </div>
 
           </div>

package/frontend/src/pages/HealthPage.tsx

@@ -21,6 +21,26 @@ export default function HealthPage() {
   const [isUpdating, setIsUpdating] = useState(false)
   const [showConfirmModal, setShowConfirmModal] = useState(false)
   const [updateError, setUpdateError] = useState('')
+  const [isCheckingUpdate, setIsCheckingUpdate] = useState(false)
+  const [checkMessage, setCheckMessage] = useState('')
+
+  const handleManualCheckUpdate = async () => {
+    setIsCheckingUpdate(true)
+    setCheckMessage('')
+    setUpdateError('')
+    try {
+      const data = await checkUpdate()
+      setUpdateInfo(data)
+      if (!data.updateAvailable) {
+        setCheckMessage('System is up to date!')
+        setTimeout(() => setCheckMessage(''), 3000)
+      }
+    } catch (e) {
+      setUpdateError(`Failed to check updates: ${(e as Error).message}`)
+    } finally {
+      setIsCheckingUpdate(false)
+    }
+  }
 
   useEffect(() => {
     let active = true
@@ -168,7 +188,7 @@ export default function HealthPage() {
           <h1>System Health</h1>
           <p>Live monitoring of your sovereign brain {lastPoll && <span>· Last poll: {lastPoll.toLocaleTimeString()}</span>}</p>
         </div>
-        {updateInfo?.updateAvailable && (
+        {updateInfo?.updateAvailable ? (
           <div className="badge badge-success" style={{
             display: 'flex',
             alignItems: 'center',
@@ -199,6 +219,30 @@ export default function HealthPage() {
               Update Now
             </button>
           </div>
+        ) : (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            {checkMessage && (
+              <span style={{ color: '#3fb950', fontSize: 14, fontWeight: 500, animation: 'fadeIn 0.3s ease' }}>
+                {checkMessage}
+              </span>
+            )}
+            <button
+              className="btn btn-secondary"
+              disabled={isCheckingUpdate}
+              onClick={handleManualCheckUpdate}
+              style={{
+                fontSize: 13,
+                padding: '8px 16px',
+                borderRadius: 8,
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6
+              }}
+            >
+              {isCheckingUpdate ? 'Checking...' : 'Check for Updates'}
+            </button>
+          </div>
         )}
       </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "total-recall-brain",
-  "version": "3.6.2",
+  "version": "3.6.4",
   "description": "Sovereign AI system — database-free, SSSS-powered personal intelligence engine deployable to any POSIX host.",
   "type": "module",
   "bin": {

package/src/server/rest.mjs

@@ -468,6 +468,25 @@ router.get('/api/vault/status', requireAuth, requireScope('memory:read'), async
   }
 });
 
+/**
+ * POST /api/diagnostics/agents
+ * Run `upgrade --agents` diagnostics checks and return the console text output.
+ */
+router.post('/api/diagnostics/agents', requireAuth, requireScope('health:read'), async (req, res) => {
+  try {
+    const result = spawnSync('node', [path.join(ROOT, 'bin', 'total-recall.mjs'), 'upgrade', '--agents'], {
+      encoding: 'utf8',
+      cwd: ROOT,
+      env: { ...process.env }
+    });
+    const output = (result.stdout || '') + (result.stderr || '');
+    res.json({ success: result.status === 0, output });
+  } catch (err) {
+    serverError(res, err);
+  }
+});
+
+
 // ─── Keys ─────────── (moved to ./routes/keys.mjs)
 // ─── Sessions ─────── (moved to ./routes/sessions.mjs)
 // ─── Sandbox ──────────────────────────────────────────────────────────────────

package/src/server/route-manifest.json

@@ -67,6 +67,10 @@
     "method": "POST",
     "path": "/api/context/stream"
   },
+  {
+    "method": "POST",
+    "path": "/api/diagnostics/agents"
+  },
   {
     "method": "POST",
     "path": "/api/dream"