total-recall-brain 3.1.2 → 3.2.1

package/extension/background.js

@@ -0,0 +1,99 @@
+// Total Recall — Background Service Worker
+// Handles context menus, message routing, and passive browsing buffer.
+
+importScripts('lib/brain-client.js');
+
+// Destructure for convenience after importScripts populates self.BrainClient
+const { share, search, healthCheck } = self.BrainClient;
+
+// ---------------------------------------------------------------------------
+// Context menu registration
+// ---------------------------------------------------------------------------
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.contextMenus.create({
+    id: 'send-to-brain',
+    title: 'Send to Brain',
+    contexts: ['page']
+  });
+  chrome.contextMenus.create({
+    id: 'remember-this',
+    title: 'Remember This',
+    contexts: ['selection']
+  });
+  chrome.contextMenus.create({
+    id: 'research-this',
+    title: 'Research This',
+    contexts: ['selection']
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Context menu click handler
+// ---------------------------------------------------------------------------
+chrome.contextMenus.onClicked.addListener(async (info, tab) => {
+  try {
+    if (info.menuItemId === 'send-to-brain') {
+      await share({
+        url: tab.url,
+        title: tab.title,
+        action: 'research',
+        source: 'chrome-extension'
+      });
+      showBadge('\u2713', '#22c55e');
+    } else if (info.menuItemId === 'remember-this') {
+      await share({
+        url: tab.url,
+        title: tab.title,
+        excerpt: info.selectionText,
+        action: 'remember',
+        source: 'chrome-extension'
+      });
+      showBadge('\u2713', '#22c55e');
+    } else if (info.menuItemId === 'research-this') {
+      await share({
+        excerpt: info.selectionText,
+        action: 'research',
+        source: 'chrome-extension'
+      });
+      showBadge('\u2713', '#22c55e');
+    }
+  } catch (err) {
+    console.error('Brain API error:', err);
+    showBadge('!', '#ef4444');
+  }
+});
+
+// ---------------------------------------------------------------------------
+// Badge helper
+// ---------------------------------------------------------------------------
+function showBadge(text, color) {
+  chrome.action.setBadgeText({ text });
+  chrome.action.setBadgeBackgroundColor({ color });
+  setTimeout(() => chrome.action.setBadgeText({ text: '' }), 3000);
+}
+
+// ---------------------------------------------------------------------------
+// Message listener (popup, content-script, sidepanel → background)
+// ---------------------------------------------------------------------------
+chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
+  if (msg.type === 'QUERY_BRAIN') {
+    search(msg.query, msg.topK || 3)
+      .then(data => sendResponse({ memories: data.results || [] }))
+      .catch(err => sendResponse({ memories: [], error: err.message }));
+    return true; // keep channel open for async response
+  }
+
+  if (msg.type === 'SHARE') {
+    share(msg.data)
+      .then(data => sendResponse({ success: true, ...data }))
+      .catch(err => sendResponse({ success: false, error: err.message }));
+    return true;
+  }
+
+  if (msg.type === 'HEALTH_CHECK') {
+    healthCheck()
+      .then(data => sendResponse({ connected: true, ...data }))
+      .catch(() => sendResponse({ connected: false }));
+    return true;
+  }
+});

package/extension/content-script.css

@@ -0,0 +1,16 @@
+/* Total Recall — Content Script Styles
+ * The floating pill uses Shadow DOM for style isolation,
+ * so this file only contains the host-level positioning.
+ * Keeping it minimal to avoid conflicts with host pages. */
+
+#total-recall-pill-host {
+  /* Position is handled inline via Shadow DOM :host styles.
+   * This rule serves as a fallback and ensures the element
+   * doesn't inherit unintended styles from the host page. */
+  all: initial;
+  position: fixed !important;
+  bottom: 20px !important;
+  right: 20px !important;
+  z-index: 2147483647 !important;
+  pointer-events: auto !important;
+}

package/extension/content-script.js

@@ -0,0 +1,134 @@
+// 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.
+// Uses Shadow DOM to isolate styles from the host page.
+
+(function () {
+  'use strict';
+
+  // ---- Capture page context ----
+  const pageContext = {
+    url: location.href,
+    title: document.title,
+    description: document.querySelector('meta[name="description"]')?.content || ''
+  };
+
+  // ---- Skip non-content pages ----
+  if (pageContext.url.startsWith('chrome://') ||
+      pageContext.url.startsWith('chrome-extension://') ||
+      pageContext.url.startsWith('about:')) {
+    return;
+  }
+
+  let pillHost = null;
+
+  // ---- Create floating pill with Shadow DOM ----
+  function createPill(count) {
+    if (pillHost) pillHost.remove();
+
+    pillHost = document.createElement('div');
+    pillHost.id = 'total-recall-pill-host';
+
+    const shadow = pillHost.attachShadow({ mode: 'closed' });
+
+    const style = document.createElement('style');
+    style.textContent = `
+      :host {
+        all: initial;
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 2147483647;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      }
+
+      .pill {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 8px 14px;
+        background: #1e1e2e;
+        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;
+        user-select: none;
+        opacity: 0;
+        transform: translateY(10px);
+        animation: pill-enter 0.3s ease forwards;
+      }
+
+      .pill:hover {
+        border-color: #89b4fa;
+        transform: translateY(-2px);
+        box-shadow: 0 6px 24px rgba(137, 180, 250, 0.15);
+      }
+
+      .pill .brain-icon {
+        font-size: 15px;
+        line-height: 1;
+      }
+
+      .pill .count {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 18px;
+        height: 18px;
+        padding: 0 5px;
+        background: #89b4fa;
+        color: #11111b;
+        border-radius: 999px;
+        font-size: 11px;
+        font-weight: 700;
+      }
+
+      @keyframes pill-enter {
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    `;
+
+    const pill = document.createElement('div');
+    pill.className = 'pill';
+    pill.innerHTML = `
+      <span class="brain-icon">🧠</span>
+      <span>${count} related</span>
+      <span class="count">${count}</span>
+    `;
+
+    pill.addEventListener('click', () => {
+      chrome.runtime.sendMessage({ type: 'OPEN_SIDE_PANEL' });
+    });
+
+    shadow.appendChild(style);
+    shadow.appendChild(pill);
+    document.body.appendChild(pillHost);
+  }
+
+  // ---- Query brain after delay ----
+  function queryBrain() {
+    const query = pageContext.title || pageContext.url;
+    if (!query) return;
+
+    chrome.runtime.sendMessage(
+      { type: 'QUERY_BRAIN', query, topK: 5 },
+      (response) => {
+        if (chrome.runtime.lastError) return;
+        const memories = response?.memories || [];
+        if (memories.length > 0) {
+          createPill(memories.length);
+        }
+      }
+    );
+  }
+
+  // Wait 2 seconds after page load to avoid interfering with page rendering
+  setTimeout(queryBrain, 2000);
+})();

package/extension/icons/README.md

@@ -0,0 +1,27 @@
+# Extension Icons
+
+This directory should contain the following PNG icon files for the Total Recall Brain Extension:
+
+| File            | Size    | Usage                                      |
+|-----------------|---------|---------------------------------------------|
+| `icon-16.png`   | 16×16   | Favicon, toolbar (small)                    |
+| `icon-48.png`   | 48×48   | Extensions management page                  |
+| `icon-128.png`  | 128×128 | Chrome Web Store, install dialog            |
+
+## Requirements
+
+- Format: PNG with transparency
+- Design: Should match Total Recall branding (brain / recall motif)
+- The manifest references these exact filenames — do not rename without updating `manifest.json`
+
+## Generating placeholder icons
+
+You can generate minimal placeholder PNGs with ImageMagick:
+
+```bash
+convert -size 16x16 xc:'#6366f1' icon-16.png
+convert -size 48x48 xc:'#6366f1' icon-48.png
+convert -size 128x128 xc:'#6366f1' icon-128.png
+```
+
+Replace these with proper branded icons before publishing.

package/extension/lib/brain-client.js

@@ -0,0 +1,47 @@
+// Brain API Client for Total Recall Chrome Extension
+// Shared by background.js, popup, sidepanel, and options page.
+// Exposed as `self.BrainClient` namespace (no ES-module bundler required).
+
+const DEFAULT_BRAIN_URL = 'http://127.0.0.1:3000';
+
+async function getConfig() {
+  const config = await chrome.storage.sync.get(['brainUrl', 'pat']);
+  return {
+    brainUrl: config.brainUrl || DEFAULT_BRAIN_URL,
+    pat: config.pat || ''
+  };
+}
+
+async function brainFetch(path, options = {}) {
+  const { brainUrl, pat } = await getConfig();
+  const url = `${brainUrl}${path}`;
+  const headers = { 'Content-Type': 'application/json', ...options.headers };
+  if (pat) headers['Authorization'] = `Bearer ${pat}`;
+
+  const res = await fetch(url, { ...options, headers });
+  if (res.status === 401) {
+    chrome.action.setBadgeText({ text: '!' });
+    chrome.action.setBadgeBackgroundColor({ color: '#ef4444' });
+    throw new Error('Authentication failed — check your PAT token');
+  }
+  if (!res.ok) throw new Error(`Brain API error: ${res.status}`);
+  return res.json();
+}
+
+async function share(data) {
+  return brainFetch('/api/share', { method: 'POST', body: JSON.stringify(data) });
+}
+
+async function search(query, topK = 3) {
+  return brainFetch('/api/memory/search/semantic', {
+    method: 'POST',
+    body: JSON.stringify({ query, top_k: topK })
+  });
+}
+
+async function healthCheck() {
+  return brainFetch('/health');
+}
+
+// Expose as a global namespace for non-module contexts (service worker, popup, etc.)
+self.BrainClient = { getConfig, brainFetch, share, search, healthCheck };

package/extension/manifest.json

@@ -0,0 +1,39 @@
+{
+  "manifest_version": 3,
+  "name": "Total Recall — Brain Extension",
+  "version": "0.1.0",
+  "description": "Contextual memory overlay, Share-to-Brain, and passive browsing context for Total Recall",
+  "permissions": ["activeTab", "contextMenus", "sidePanel", "storage"],
+  "optional_permissions": ["history", "webNavigation"],
+  "host_permissions": ["http://127.0.0.1:*/*", "http://localhost:*/*"],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_popup": "popup/popup.html",
+    "default_icon": {
+      "16": "icons/icon-16.png",
+      "48": "icons/icon-48.png",
+      "128": "icons/icon-128.png"
+    }
+  },
+  "side_panel": {
+    "default_path": "sidepanel/sidepanel.html"
+  },
+  "content_scripts": [{
+    "matches": ["<all_urls>"],
+    "js": ["content-script.js"],
+    "css": ["content-script.css"],
+    "run_at": "document_idle"
+  }],
+  "options_ui": {
+    "page": "options/options.html",
+    "open_in_tab": true
+  },
+  "incognito": "not_allowed",
+  "icons": {
+    "16": "icons/icon-16.png",
+    "48": "icons/icon-48.png",
+    "128": "icons/icon-128.png"
+  }
+}

package/extension/options/options.css

@@ -0,0 +1,218 @@
+/* Total Recall — Options Page 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;
+  min-height: 100vh;
+}
+
+.options-page {
+  max-width: 560px;
+  margin: 0 auto;
+  padding: 32px 24px;
+}
+
+/* ---- Header ---- */
+.options-header {
+  margin-bottom: 32px;
+}
+
+.options-header h1 {
+  font-size: 20px;
+  font-weight: 700;
+}
+
+/* ---- Sections ---- */
+.section {
+  margin-bottom: 28px;
+  padding: 20px;
+  background: #181825;
+  border-radius: 14px;
+  border: 1px solid #313244;
+}
+
+.section h2 {
+  font-size: 14px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: #89b4fa;
+  margin-bottom: 16px;
+}
+
+/* ---- Fields ---- */
+.field-group {
+  margin-bottom: 16px;
+}
+
+.field-group:last-child {
+  margin-bottom: 0;
+}
+
+.field-group label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: #a6adc8;
+  margin-bottom: 6px;
+}
+
+.field-group .hint {
+  font-weight: 400;
+  color: #585b70;
+  font-size: 11px;
+}
+
+.field-group input[type="text"],
+.field-group input[type="password"],
+.field-group textarea {
+  width: 100%;
+  padding: 10px 14px;
+  background: #1e1e2e;
+  border: 1px solid #313244;
+  border-radius: 10px;
+  color: #cdd6f4;
+  font-size: 14px;
+  outline: none;
+  font-family: inherit;
+  transition: border-color 0.2s ease;
+}
+
+.field-group input:focus,
+.field-group textarea:focus {
+  border-color: #89b4fa;
+}
+
+.field-group textarea {
+  resize: vertical;
+  min-height: 80px;
+  font-family: 'SF Mono', Menlo, Monaco, monospace;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+/* ---- Connection test ---- */
+.connection-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.connection-status {
+  font-size: 13px;
+  font-weight: 600;
+  transition: color 0.3s ease;
+}
+
+.connection-status.ok {
+  color: #a6e3a1;
+}
+
+.connection-status.fail {
+  color: #f38ba8;
+}
+
+/* ---- Radio group ---- */
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.radio-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: #1e1e2e;
+  border: 1px solid #313244;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: border-color 0.2s ease;
+}
+
+.radio-label:hover {
+  border-color: #45475a;
+}
+
+.radio-label input[type="radio"] {
+  accent-color: #89b4fa;
+  width: 16px;
+  height: 16px;
+}
+
+.radio-text {
+  font-size: 13px;
+  font-weight: 600;
+  color: #cdd6f4;
+  min-width: 60px;
+}
+
+.radio-desc {
+  font-size: 12px;
+  color: #585b70;
+}
+
+/* ---- Buttons ---- */
+.btn {
+  padding: 10px 20px;
+  font-size: 13px;
+  font-weight: 600;
+  border: 1px solid #313244;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
+}
+
+.btn:active {
+  transform: scale(0.97);
+}
+
+.btn.primary {
+  background: #89b4fa;
+  color: #11111b;
+  border-color: #89b4fa;
+}
+
+.btn.primary:hover {
+  background: #74c7ec;
+  border-color: #74c7ec;
+}
+
+.btn.secondary {
+  background: #1e1e2e;
+  color: #cdd6f4;
+}
+
+.btn.secondary:hover {
+  background: #313244;
+  border-color: #89b4fa;
+}
+
+/* ---- Actions footer ---- */
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.save-status {
+  font-size: 13px;
+  font-weight: 600;
+  transition: opacity 0.3s ease;
+}
+
+.save-status.saved {
+  color: #a6e3a1;
+}
+
+.save-status.error {
+  color: #f38ba8;
+}

package/extension/options/options.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Total Recall — Settings</title>
+  <link rel="stylesheet" href="options.css">
+</head>
+<body>
+  <div class="options-page">
+    <header class="options-header">
+      <h1>🧠 Total Recall — Settings</h1>
+    </header>
+
+    <section class="section">
+      <h2>Connection</h2>
+
+      <div class="field-group">
+        <label for="brain-url">Brain URL</label>
+        <input type="text" id="brain-url" placeholder="http://127.0.0.1:3000" />
+      </div>
+
+      <div class="field-group">
+        <label for="pat-token">PAT Token</label>
+        <input type="password" id="pat-token" placeholder="Enter your personal access token" />
+      </div>
+
+      <div class="connection-row">
+        <button id="btn-test" class="btn secondary">Test Connection</button>
+        <div id="connection-status" class="connection-status"></div>
+      </div>
+    </section>
+
+    <section class="section">
+      <h2>Privacy</h2>
+
+      <div class="field-group">
+        <label for="blocklist">Domain Blocklist <span class="hint">(one per line)</span></label>
+        <textarea id="blocklist" rows="5" placeholder="example.com&#10;private.internal.io"></textarea>
+      </div>
+
+      <div class="field-group">
+        <label>Capture Granularity</label>
+        <div class="radio-group">
+          <label class="radio-label">
+            <input type="radio" name="granularity" value="off" />
+            <span class="radio-text">Off</span>
+            <span class="radio-desc">No passive tracking</span>
+          </label>
+          <label class="radio-label">
+            <input type="radio" name="granularity" value="minimal" />
+            <span class="radio-text">Minimal</span>
+            <span class="radio-desc">URL and title only</span>
+          </label>
+          <label class="radio-label">
+            <input type="radio" name="granularity" value="full" />
+            <span class="radio-text">Full</span>
+            <span class="radio-desc">URL, title, and page metadata</span>
+          </label>
+        </div>
+      </div>
+    </section>
+
+    <div class="actions">
+      <button id="btn-save" class="btn primary">Save Settings</button>
+      <span id="save-status" class="save-status"></span>
+    </div>
+  </div>
+
+  <script src="../lib/brain-client.js"></script>
+  <script src="options.js"></script>
+</body>
+</html>