total-recall-brain 3.5.0 → 3.6.1

package/bin/total-recall.mjs

@@ -78,6 +78,7 @@ const COMMANDS = {
   config:   'config.mjs',
   skill:    'skill.mjs',
   help:     'help.mjs',
+  collab:   'collab.mjs',
 };
 function printHelp() {
   console.log(`
@@ -126,6 +127,8 @@ function printHelp() {
                         Commands: start | stop | status | once | install | uninstall
     uninstall           Completely uninstall all services, launchd agents, VFS, and shims
     help <topic>        Interactive offline documentation, SSSS reference, and system help
+    collab              Start Express/WebSockets backend & React collab sandbox dev server
+
 
 
 

package/extension/content-script.js

@@ -1,6 +1,8 @@
 // Total Recall — Content Script
 // Injected into every page. Queries the brain for related memories and shows
 // a floating pill in the bottom-right corner when matches are found.
+// Clicking the pill opens an interactive overlay listing the related memories
+// and exposing quick actions (Remember page, Research page).
 // Uses Shadow DOM to isolate styles from the host page.
 
 (function () {
@@ -21,8 +23,9 @@
   }
 
   let pillHost = null;
+  let currentMemories = [];
 
-  // ---- Create floating pill with Shadow DOM ----
+  // ---- Create floating pill and interactive overlay with Shadow DOM ----
   function createPill(count) {
     if (pillHost) pillHost.remove();
 
@@ -42,20 +45,27 @@
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       }
 
+      .container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+      }
+
       .pill {
         display: flex;
         align-items: center;
-        gap: 6px;
-        padding: 8px 14px;
-        background: #1e1e2e;
+        gap: 8px;
+        padding: 10px 16px;
+        background: #11111b;
         color: #cdd6f4;
         border: 1px solid #313244;
         border-radius: 999px;
         font-size: 13px;
         font-weight: 600;
         cursor: pointer;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
-        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
         user-select: none;
         opacity: 0;
         transform: translateY(10px);
@@ -65,7 +75,13 @@
       .pill:hover {
         border-color: #89b4fa;
         transform: translateY(-2px);
-        box-shadow: 0 6px 24px rgba(137, 180, 250, 0.15);
+        box-shadow: 0 6px 24px rgba(137, 180, 250, 0.2);
+        background: #1e1e2e;
+      }
+
+      .pill.active {
+        border-color: #89b4fa;
+        background: #1e1e2e;
       }
 
       .pill .brain-icon {
@@ -87,6 +103,195 @@
         font-weight: 700;
       }
 
+      /* Interactive Overlay Card */
+      .card {
+        display: none;
+        flex-direction: column;
+        width: 320px;
+        max-height: 420px;
+        background: rgba(17, 17, 27, 0.95);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+        border: 1px solid #313244;
+        border-radius: 16px;
+        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
+        position: absolute;
+        bottom: 50px;
+        right: 0;
+        z-index: 2147483647;
+        overflow: hidden;
+        transform: scale(0.95) translateY(10px);
+        opacity: 0;
+        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+        pointer-events: none;
+      }
+
+      .card.visible {
+        display: flex;
+        transform: scale(1) translateY(0);
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 14px 16px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+      }
+
+      .card-header h3 {
+        margin: 0;
+        font-size: 14px;
+        font-weight: 700;
+        color: #cdd6f4;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .card-header .close-btn {
+        background: none;
+        border: none;
+        color: #a6adc8;
+        font-size: 18px;
+        cursor: pointer;
+        padding: 0;
+        line-height: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        transition: background 0.2s;
+      }
+
+      .card-header .close-btn:hover {
+        color: #f38ba8;
+        background: rgba(255, 255, 255, 0.05);
+      }
+
+      .memory-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: 12px 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .memory-item {
+        background: rgba(255, 255, 255, 0.02);
+        border: 1px solid rgba(255, 255, 255, 0.04);
+        border-radius: 10px;
+        padding: 12px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      .memory-item:hover {
+        background: rgba(255, 255, 255, 0.05);
+        border-color: #89b4fa;
+      }
+
+      .memory-title {
+        font-size: 12px;
+        font-weight: 600;
+        color: #89b4fa;
+        margin-bottom: 4px;
+        line-height: 1.4;
+      }
+
+      .memory-excerpt {
+        font-size: 11px;
+        color: #bac2de;
+        line-height: 1.45;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        word-break: break-word;
+      }
+      
+      .memory-excerpt.expanded {
+        display: block;
+        -webkit-line-clamp: unset;
+      }
+
+      .memory-meta {
+        display: flex;
+        justify-content: space-between;
+        font-size: 9px;
+        color: #6c7086;
+        margin-top: 8px;
+        border-top: 1px solid rgba(255, 255, 255, 0.03);
+        padding-top: 6px;
+      }
+
+      .card-actions {
+        display: flex;
+        gap: 8px;
+        padding: 12px 16px;
+        border-top: 1px solid rgba(255, 255, 255, 0.05);
+        background: rgba(0, 0, 0, 0.2);
+      }
+
+      .action-btn {
+        flex: 1;
+        padding: 8px 12px;
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        border-radius: 8px;
+        background: rgba(255, 255, 255, 0.04);
+        color: #cdd6f4;
+        font-size: 11px;
+        font-weight: 600;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        transition: all 0.2s ease;
+      }
+
+      .action-btn:hover {
+        background: #89b4fa;
+        color: #11111b;
+        border-color: #89b4fa;
+      }
+
+      .action-btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        background: rgba(255, 255, 255, 0.02) !important;
+        color: #6c7086 !important;
+        border-color: transparent !important;
+      }
+
+      .toast {
+        position: absolute;
+        bottom: 60px;
+        left: 50%;
+        transform: translateX(-50%);
+        background: #2ec471;
+        color: #11111b;
+        padding: 8px 16px;
+        border-radius: 8px;
+        font-size: 12px;
+        font-weight: 700;
+        z-index: 2147483647;
+        opacity: 0;
+        box-shadow: 0 4px 12px rgba(46, 196, 113, 0.3);
+        transition: opacity 0.3s ease, transform 0.3s ease;
+        pointer-events: none;
+      }
+
+      .toast.visible {
+        opacity: 1;
+        transform: translateX(-50%) translateY(-5px);
+      }
+
       @keyframes pill-enter {
         to {
           opacity: 1;
@@ -95,20 +300,157 @@
       }
     `;
 
+    const container = document.createElement('div');
+    container.className = 'container';
+
+    // The Floating Pill
     const pill = document.createElement('div');
     pill.className = 'pill';
     pill.innerHTML = `
       <span class="brain-icon">🧠</span>
-      <span>${count} related</span>
+      <span>Related Memories</span>
       <span class="count">${count}</span>
     `;
 
-    pill.addEventListener('click', () => {
-      chrome.runtime.sendMessage({ type: 'OPEN_SIDE_PANEL' });
+    // The Overlay Card
+    const card = document.createElement('div');
+    card.className = 'card';
+    
+    // Header
+    const cardHeader = document.createElement('div');
+    cardHeader.className = 'card-header';
+    cardHeader.innerHTML = `
+      <h3>🧠 Related Memories</h3>
+      <button class="close-btn" title="Close Panel">×</button>
+    `;
+    card.appendChild(cardHeader);
+
+    // List of Memories
+    const memoryList = document.createElement('div');
+    memoryList.className = 'memory-list';
+    
+    currentMemories.forEach(mem => {
+      const item = document.createElement('div');
+      item.className = 'memory-item';
+      
+      const relevancePercent = mem.confidence ? Math.round(mem.confidence * 100) : null;
+      const relevanceStr = relevancePercent ? `${relevancePercent}% match` : 'Related';
+
+      item.innerHTML = `
+        <div class="memory-title">${mem.title}</div>
+        <div class="memory-excerpt">${mem.content}</div>
+        <div class="memory-meta">
+          <span style="text-transform: capitalize; font-weight: 600;">${mem.category}</span>
+          <span>${relevanceStr}</span>
+        </div>
+      `;
+
+      // Click to toggle full content expansion
+      item.addEventListener('click', () => {
+        const excerpt = item.querySelector('.memory-excerpt');
+        excerpt.classList.toggle('expanded');
+      });
+
+      memoryList.appendChild(item);
     });
+    card.appendChild(memoryList);
+
+    // Quick Actions
+    const cardActions = document.createElement('div');
+    cardActions.className = 'card-actions';
+
+    const rememberBtn = document.createElement('button');
+    rememberBtn.className = 'action-btn';
+    rememberBtn.innerHTML = '📌 Remember Page';
+
+    const researchBtn = document.createElement('button');
+    researchBtn.className = 'action-btn';
+    researchBtn.innerHTML = '🔬 Research Page';
+
+    cardActions.appendChild(rememberBtn);
+    cardActions.appendChild(researchBtn);
+    card.appendChild(cardActions);
+
+    // Tiny Toast message indicator
+    const toast = document.createElement('div');
+    toast.className = 'toast';
+    container.appendChild(toast);
+
+    // Action button listeners
+    const triggerAction = async (action, btn) => {
+      btn.disabled = true;
+      const originalText = btn.innerHTML;
+      btn.innerHTML = '⏳ Processing...';
+      
+      chrome.runtime.sendMessage({
+        type: 'SHARE',
+        data: {
+          url: pageContext.url,
+          title: pageContext.title,
+          action: action,
+          source: 'chrome-extension-overlay'
+        }
+      }, (res) => {
+        btn.disabled = false;
+        btn.innerHTML = originalText;
+        if (res && res.success) {
+          toast.textContent = action === 'remember' ? '📌 Remembered page!' : '🔬 Research queued!';
+          toast.classList.add('visible');
+          setTimeout(() => toast.classList.remove('visible'), 2500);
+        } else {
+          toast.textContent = '❌ Action failed';
+          toast.style.background = '#e74c3c';
+          toast.style.boxShadow = '0 4px 12px rgba(231, 76, 60, 0.3)';
+          toast.classList.add('visible');
+          setTimeout(() => {
+            toast.classList.remove('visible');
+            toast.style.background = '#2ec471';
+            toast.style.boxShadow = '0 4px 12px rgba(46, 196, 113, 0.3)';
+          }, 2500);
+        }
+      });
+    };
+
+    rememberBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      triggerAction('remember', rememberBtn);
+    });
+
+    researchBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      triggerAction('research', researchBtn);
+    });
+
+    // Toggle overlay visibility on pill click
+    const toggleOverlay = (e) => {
+      e.stopPropagation();
+      const isVisible = card.classList.contains('visible');
+      if (isVisible) {
+        card.classList.remove('visible');
+        pill.classList.remove('active');
+      } else {
+        card.classList.add('visible');
+        pill.classList.add('active');
+      }
+    };
+
+    pill.addEventListener('click', toggleOverlay);
+    cardHeader.querySelector('.close-btn').addEventListener('click', toggleOverlay);
+
+    // Prevent clicks inside card from closing it
+    card.addEventListener('click', (e) => e.stopPropagation());
+
+    // Close overlay if clicking outside the host
+    document.addEventListener('click', () => {
+      card.classList.remove('visible');
+      pill.classList.remove('active');
+    });
+
+    container.appendChild(card);
+    container.appendChild(pill);
 
     shadow.appendChild(style);
-    shadow.appendChild(pill);
+    shadow.appendChild(container);
     document.body.appendChild(pillHost);
   }
 
@@ -140,6 +482,7 @@
         if (chrome.runtime.lastError) return;
         const memories = response?.memories || [];
         if (memories.length > 0) {
+          currentMemories = memories;
           createPill(memories.length);
         }
       }

package/extension/popup/popup.html

@@ -36,6 +36,11 @@
     </div>
 
     <div id="status-msg" class="status-msg hidden"></div>
+
+    <footer class="popup-footer" style="margin-top: 16px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.05); display: flex; justify-content: space-between; font-size: 10px; color: #6c7086;">
+      <span>Total Recall Brain Connection</span>
+      <span id="version-label">v0.1.0</span>
+    </footer>
   </div>
 
   <script src="../lib/preconfigured.js"></script>

package/extension/popup/popup.js

@@ -26,6 +26,25 @@
     try {
       await self.BrainClient.healthCheck();
       dot.className = 'dot connected';
+
+      // Check for extension updates
+      try {
+        const status = await self.BrainClient.brainFetch('/api/extension/status');
+        const clientVersion = chrome.runtime.getManifest().version;
+        if (status && status.version && status.version !== clientVersion) {
+          const config = await self.BrainClient.getConfig();
+          const brainUrl = config.brainUrl || 'http://127.0.0.1:3000';
+          const footer = document.querySelector('.popup-footer');
+          if (footer) {
+            footer.innerHTML = `
+              <span style="color: #f38ba8; font-weight: bold; display: flex; align-items: center; gap: 4px;">⚠️ Update Available (v${status.version})</span>
+              <a href="${brainUrl}/health" target="_blank" style="color: #89b4fa; text-decoration: none; font-weight: bold;">Download ZIP</a>
+            `;
+          }
+        }
+      } catch (err) {
+        console.error('Failed to check extension update status:', err);
+      }
     } catch {
       dot.className = 'dot disconnected';
     }
@@ -147,4 +166,10 @@
   fillCurrentTab();
   checkConnection();
   loadTrackingPref();
+
+  // Populate version label
+  const versionLabel = document.getElementById('version-label');
+  if (versionLabel) {
+    versionLabel.textContent = 'v' + chrome.runtime.getManifest().version;
+  }
 })();

package/frontend/src/App.tsx

@@ -18,6 +18,9 @@ import AutomationsPage from './pages/AutomationsPage'
 import DeploymentsPage from './pages/DeploymentsPage'
 import SkillsPage from './pages/SkillsPage'
 import UsagePage from './pages/UsagePage'
+import CollabPage from './pages/CollabPage'
+import HelpPage from './pages/HelpPage'
+import GraphPage from './pages/GraphPage'
 
 // ─── Auth state type ──────────────────────────────────────────────────────────
 type AuthState = 'loading' | 'authed' | 'unauthed'
@@ -143,6 +146,29 @@ function Sidebar({ onLogout, health, activeBrainId, onBrainChange }: SidebarProp
           </svg>
           Skills Manager
         </NavLink>
+        <NavLink to="/collab" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-collab">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
+            <circle cx="9" cy="7" r="4" />
+            <path d="M23 21v-2a4 4 0 00-3-3.87" />
+            <path d="M16 3.13a4 4 0 010 7.75" />
+          </svg>
+          Collaboration
+        </NavLink>
+        <NavLink to="/help" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-help">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="10" />
+            <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" />
+            <line x1="12" y1="17" x2="12.01" y2="17" />
+          </svg>
+          Documentation
+        </NavLink>
+        <NavLink to="/graph" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-graph">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <polygon points="12 2 2 22 22 22" />
+          </svg>
+          Sovereign Graph
+        </NavLink>
       </nav>
       <div className="sidebar-footer">
         <div style={{ marginBottom: 8 }}>
@@ -293,6 +319,9 @@ function MainContent({ activeBrainId, onBrainChange }: { activeBrainId: string;
             <Route path="/keys" element={<ApiKeysPage />} />
             <Route path="/integrations" element={<IntegrationsPage />} />
             <Route path="/skills" element={<SkillsPage />} />
+            <Route path="/collab" element={<CollabPage />} />
+            <Route path="/help" element={<HelpPage />} />
+            <Route path="/graph" element={<GraphPage activeBrainId={activeBrainId} />} />
           </Routes>
         </div>
       )}

package/frontend/src/api.ts

@@ -705,3 +705,23 @@ export async function runUpdate(): Promise<{ success: boolean; message: string }
   if (!res.ok) throw new Error(`Run update API error: ${res.status}`)
   return res.json()
 }
+
+// ─── Help API ──────────────────────────────────────────────────────────────────
+
+export interface HelpTopic {
+  id: string
+  title: string
+  description: string
+}
+
+export async function fetchHelpTopics(): Promise<{ topics: HelpTopic[] }> {
+  const res = await apiFetch(`${API_BASE}/api/help`)
+  if (!res.ok) throw new Error('Failed to load help topics')
+  return res.json()
+}
+
+export async function fetchHelpContent(topicId: string): Promise<{ topic: string; content: string }> {
+  const res = await apiFetch(`${API_BASE}/api/help?topic=${encodeURIComponent(topicId)}`)
+  if (!res.ok) throw new Error('Failed to load help content')
+  return res.json()
+}