total-recall-brain 3.1.2 → 3.2.1

package/extension/sidepanel/sidepanel.css

@@ -0,0 +1,340 @@
+/* Total Recall — Side Panel Styles (Catppuccin Mocha) */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #11111b;
+  color: #cdd6f4;
+  width: 100%;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+/* ---- Header ---- */
+.panel-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  background: #181825;
+  border-bottom: 1px solid #313244;
+}
+
+.panel-header h1 {
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #6c7086;
+  transition: background 0.3s ease;
+}
+
+.dot.connected {
+  background: #a6e3a1;
+  box-shadow: 0 0 6px #a6e3a1;
+}
+
+.dot.disconnected {
+  background: #f38ba8;
+  box-shadow: 0 0 6px #f38ba8;
+}
+
+/* ---- Search ---- */
+.search-box {
+  padding: 12px 16px 8px;
+}
+
+.search-box 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;
+}
+
+.search-box input::placeholder {
+  color: #6c7086;
+}
+
+.search-box input:focus {
+  border-color: #89b4fa;
+}
+
+/* ---- Memories List ---- */
+.memories-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 16px;
+}
+
+.memory-card {
+  background: #1e1e2e;
+  border-radius: 12px;
+  padding: 12px 14px;
+  margin-bottom: 10px;
+  border: 1px solid #313244;
+  cursor: pointer;
+  transition: border-color 0.2s ease, transform 0.15s ease;
+}
+
+.memory-card:hover {
+  border-color: #89b4fa;
+  transform: translateY(-1px);
+}
+
+.memory-card .card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.memory-card .card-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #cdd6f4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  margin-right: 8px;
+}
+
+.memory-card .card-badge {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: #313244;
+  color: #89b4fa;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+}
+
+.memory-card .card-excerpt {
+  font-size: 12px;
+  color: #a6adc8;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.memory-card .card-time {
+  font-size: 10px;
+  color: #585b70;
+  margin-top: 6px;
+}
+
+.memories-empty {
+  text-align: center;
+  color: #585b70;
+  font-size: 13px;
+  padding: 24px 0;
+}
+
+/* ---- Quick Actions ---- */
+.quick-actions {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid #313244;
+}
+
+.action-btn {
+  flex: 1;
+  padding: 8px 6px;
+  font-size: 12px;
+  font-weight: 600;
+  background: #1e1e2e;
+  color: #cdd6f4;
+  border: 1px solid #313244;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.action-btn:hover {
+  background: #313244;
+  border-color: #89b4fa;
+}
+
+.action-btn.accent {
+  background: #89b4fa;
+  color: #11111b;
+  border-color: #89b4fa;
+}
+
+.action-btn.accent:hover {
+  background: #74c7ec;
+  border-color: #74c7ec;
+}
+
+/* ---- Note Area ---- */
+.note-area {
+  padding: 0 16px 12px;
+}
+
+.note-area textarea {
+  width: 100%;
+  min-height: 80px;
+  padding: 10px 12px;
+  background: #1e1e2e;
+  border: 1px solid #313244;
+  border-radius: 10px;
+  color: #cdd6f4;
+  font-size: 13px;
+  resize: vertical;
+  outline: none;
+  font-family: inherit;
+  transition: border-color 0.2s ease;
+}
+
+.note-area textarea:focus {
+  border-color: #89b4fa;
+}
+
+.note-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.hidden {
+  display: none !important;
+}
+
+/* ---- Research Feed ---- */
+.research-feed {
+  padding: 12px 16px 16px;
+  border-top: 1px solid #313244;
+}
+
+.research-feed h3 {
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: #585b70;
+  margin-bottom: 10px;
+}
+
+.research-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  background: #1e1e2e;
+  border-radius: 10px;
+  margin-bottom: 6px;
+  border: 1px solid #313244;
+}
+
+.research-item .spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid #313244;
+  border-top-color: #89b4fa;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.research-item .topic {
+  font-size: 12px;
+  color: #a6adc8;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.research-item .status-badge {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: rgba(137, 180, 250, 0.15);
+  color: #89b4fa;
+}
+
+.research-empty {
+  font-size: 12px;
+  color: #585b70;
+  text-align: center;
+  padding: 8px 0;
+}
+
+/* ---- Toast Notification ---- */
+.toast {
+  position: fixed;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%) translateY(60px);
+  padding: 10px 20px;
+  background: #1e1e2e;
+  color: #a6e3a1;
+  border: 1px solid #a6e3a1;
+  border-radius: 10px;
+  font-size: 13px;
+  font-weight: 600;
+  opacity: 0;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  z-index: 100;
+  pointer-events: none;
+}
+
+.toast.show {
+  transform: translateX(-50%) translateY(0);
+  opacity: 1;
+}
+
+.toast.error {
+  color: #f38ba8;
+  border-color: #f38ba8;
+}
+
+/* ---- Scrollbar ---- */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #313244;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #45475a;
+}

package/extension/sidepanel/sidepanel.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Total Recall</title>
+  <link rel="stylesheet" href="sidepanel.css">
+</head>
+<body>
+  <div class="panel">
+    <header class="panel-header">
+      <h1>🧠 Total Recall</h1>
+      <div id="connection-dot" class="dot"></div>
+    </header>
+    <div class="search-box">
+      <input type="text" id="search-input" placeholder="Search your brain..." />
+    </div>
+    <div id="memories-list" class="memories-list"></div>
+    <div class="quick-actions">
+      <button id="btn-remember" class="action-btn">📌 Remember Page</button>
+      <button id="btn-research" class="action-btn">🔬 Research Page</button>
+      <button id="btn-note" class="action-btn">📝 Quick Note</button>
+    </div>
+    <div id="note-area" class="note-area hidden">
+      <textarea id="note-input" placeholder="Type your note..."></textarea>
+      <div class="note-actions">
+        <button id="btn-save-note" class="action-btn accent">Save Note</button>
+        <button id="btn-cancel-note" class="action-btn">Cancel</button>
+      </div>
+    </div>
+    <div id="research-feed" class="research-feed">
+      <h3>Active Research</h3>
+      <div id="research-list"></div>
+    </div>
+  </div>
+  <script src="../lib/brain-client.js"></script>
+  <script src="sidepanel.js"></script>
+</body>
+</html>

package/extension/sidepanel/sidepanel.js

@@ -0,0 +1,229 @@
+// Total Recall — Side Panel Logic
+
+(function () {
+  'use strict';
+
+  // ---- DOM refs ----
+  const dot = document.getElementById('connection-dot');
+  const searchInput = document.getElementById('search-input');
+  const memoriesList = document.getElementById('memories-list');
+  const btnRemember = document.getElementById('btn-remember');
+  const btnResearch = document.getElementById('btn-research');
+  const btnNote = document.getElementById('btn-note');
+  const noteArea = document.getElementById('note-area');
+  const noteInput = document.getElementById('note-input');
+  const btnSaveNote = document.getElementById('btn-save-note');
+  const btnCancelNote = document.getElementById('btn-cancel-note');
+  const researchList = document.getElementById('research-list');
+
+  // ---- Connection check ----
+  async function checkConnection() {
+    try {
+      await self.BrainClient.healthCheck();
+      dot.className = 'dot connected';
+    } catch {
+      dot.className = 'dot disconnected';
+    }
+  }
+
+  // ---- Debounced search ----
+  let searchTimer = null;
+
+  function debounceSearch(query) {
+    clearTimeout(searchTimer);
+    if (!query.trim()) {
+      memoriesList.innerHTML = '<div class="memories-empty">Search your brain for related memories</div>';
+      return;
+    }
+    searchTimer = setTimeout(() => {
+      performSearch(query.trim());
+    }, 300);
+  }
+
+  async function performSearch(query) {
+    memoriesList.innerHTML = '<div class="memories-empty">Searching…</div>';
+    try {
+      const response = await new Promise((resolve, reject) => {
+        chrome.runtime.sendMessage({ type: 'QUERY_BRAIN', query, topK: 10 }, (res) => {
+          if (chrome.runtime.lastError) return reject(new Error(chrome.runtime.lastError.message));
+          resolve(res);
+        });
+      });
+      renderMemories(response.memories || []);
+    } catch (err) {
+      memoriesList.innerHTML = `<div class="memories-empty">Error: ${err.message}</div>`;
+    }
+  }
+
+  // ---- Render memories ----
+  function renderMemories(memories) {
+    if (!memories.length) {
+      memoriesList.innerHTML = '<div class="memories-empty">No memories found</div>';
+      return;
+    }
+    memoriesList.innerHTML = memories.map((m) => {
+      const title = m.title || m.slug || 'Untitled';
+      const excerpt = m.content || m.excerpt || '';
+      const category = m.category || 'memory';
+      const time = m.created_at ? formatTime(m.created_at) : '';
+      return `
+        <div class="memory-card">
+          <div class="card-header">
+            <span class="card-title">${escapeHtml(title)}</span>
+            <span class="card-badge">${escapeHtml(category)}</span>
+          </div>
+          <div class="card-excerpt">${escapeHtml(excerpt)}</div>
+          ${time ? `<div class="card-time">${time}</div>` : ''}
+        </div>
+      `;
+    }).join('');
+  }
+
+  // ---- Quick actions ----
+  async function getCurrentTab() {
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+    return tab;
+  }
+
+  btnRemember.addEventListener('click', async () => {
+    try {
+      const tab = await getCurrentTab();
+      await sendShare({
+        url: tab.url,
+        title: tab.title,
+        action: 'remember',
+        source: 'chrome-extension-sidepanel'
+      });
+      showToast('Page remembered!');
+    } catch (err) {
+      showToast('Error: ' + err.message, true);
+    }
+  });
+
+  btnResearch.addEventListener('click', async () => {
+    try {
+      const tab = await getCurrentTab();
+      await sendShare({
+        url: tab.url,
+        title: tab.title,
+        action: 'research',
+        source: 'chrome-extension-sidepanel'
+      });
+      showToast('Research queued!');
+    } catch (err) {
+      showToast('Error: ' + err.message, true);
+    }
+  });
+
+  // ---- Quick Note ----
+  btnNote.addEventListener('click', () => {
+    noteArea.classList.toggle('hidden');
+    if (!noteArea.classList.contains('hidden')) {
+      noteInput.focus();
+    }
+  });
+
+  btnCancelNote.addEventListener('click', () => {
+    noteArea.classList.add('hidden');
+    noteInput.value = '';
+  });
+
+  btnSaveNote.addEventListener('click', async () => {
+    const text = noteInput.value.trim();
+    if (!text) return;
+    try {
+      const tab = await getCurrentTab();
+      await sendShare({
+        url: tab.url,
+        title: `Note: ${text.slice(0, 50)}`,
+        excerpt: text,
+        action: 'remember',
+        category: 'fact',
+        source: 'chrome-extension-sidepanel'
+      });
+      noteInput.value = '';
+      noteArea.classList.add('hidden');
+      showToast('Note saved!');
+    } catch (err) {
+      showToast('Error: ' + err.message, true);
+    }
+  });
+
+  // ---- Share helper ----
+  function sendShare(data) {
+    return new Promise((resolve, reject) => {
+      chrome.runtime.sendMessage({ type: 'SHARE', data }, (res) => {
+        if (chrome.runtime.lastError) return reject(new Error(chrome.runtime.lastError.message));
+        if (res && res.success) return resolve(res);
+        reject(new Error(res?.error || 'Unknown error'));
+      });
+    });
+  }
+
+  // ---- Research feed ----
+  async function fetchResearch() {
+    try {
+      const data = await self.BrainClient.brainFetch('/api/research?status=in_progress');
+      const projects = data.projects || data.results || [];
+      if (!projects.length) {
+        researchList.innerHTML = '<div class="research-empty">No active research</div>';
+        return;
+      }
+      researchList.innerHTML = projects.map((p) => `
+        <div class="research-item">
+          <div class="spinner"></div>
+          <span class="topic">${escapeHtml(p.topic || p.title || 'Untitled')}</span>
+          <span class="status-badge">${escapeHtml(p.status || 'running')}</span>
+        </div>
+      `).join('');
+    } catch {
+      researchList.innerHTML = '<div class="research-empty">Could not load research</div>';
+    }
+  }
+
+  // ---- Toast ----
+  function showToast(message, isError = false) {
+    let toast = document.querySelector('.toast');
+    if (!toast) {
+      toast = document.createElement('div');
+      toast.className = 'toast';
+      document.body.appendChild(toast);
+    }
+    toast.textContent = message;
+    toast.classList.toggle('error', isError);
+    // Force reflow to restart animation
+    toast.classList.remove('show');
+    void toast.offsetWidth;
+    toast.classList.add('show');
+    setTimeout(() => toast.classList.remove('show'), 2500);
+  }
+
+  // ---- Helpers ----
+  function escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  function formatTime(dateStr) {
+    try {
+      const d = new Date(dateStr);
+      const now = new Date();
+      const diff = now - d;
+      if (diff < 60000) return 'just now';
+      if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
+      if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
+      return d.toLocaleDateString();
+    } catch {
+      return '';
+    }
+  }
+
+  // ---- Event listeners ----
+  searchInput.addEventListener('input', (e) => debounceSearch(e.target.value));
+
+  // ---- Init ----
+  checkConnection();
+  fetchResearch();
+  setInterval(fetchResearch, 30000);
+})();

package/frontend/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/frontend/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Total Recall — Sovereign AI Brain Dashboard. Memory explorer, chat interface, code sandbox, and system health monitoring." />
+    <meta name="theme-color" content="#0a0a0f" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+    <title>Total Recall — Sovereign Brain</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>