total-recall-brain 3.1.2 → 3.2.1

package/extension/options/options.js

@@ -0,0 +1,99 @@
+// Total Recall — Options Page Logic
+
+(function () {
+  'use strict';
+
+  const brainUrlInput = document.getElementById('brain-url');
+  const patInput = document.getElementById('pat-token');
+  const btnTest = document.getElementById('btn-test');
+  const connectionStatus = document.getElementById('connection-status');
+  const blocklistTextarea = document.getElementById('blocklist');
+  const btnSave = document.getElementById('btn-save');
+  const saveStatus = document.getElementById('save-status');
+
+  // ---- Load saved settings ----
+  async function loadSettings() {
+    const settings = await chrome.storage.sync.get([
+      'brainUrl',
+      'pat',
+      'blocklist',
+      'captureGranularity'
+    ]);
+
+    brainUrlInput.value = settings.brainUrl || 'http://127.0.0.1:3000';
+    patInput.value = settings.pat || '';
+
+    // Blocklist: stored as array, displayed one per line
+    if (Array.isArray(settings.blocklist)) {
+      blocklistTextarea.value = settings.blocklist.join('\n');
+    }
+
+    // Granularity radio
+    const granularity = settings.captureGranularity || 'minimal';
+    const radio = document.querySelector(`input[name="granularity"][value="${granularity}"]`);
+    if (radio) radio.checked = true;
+  }
+
+  // ---- Save settings ----
+  btnSave.addEventListener('click', async () => {
+    try {
+      // Parse blocklist textarea into array
+      const blocklistRaw = blocklistTextarea.value.trim();
+      const blocklist = blocklistRaw
+        ? blocklistRaw.split('\n').map((d) => d.trim()).filter(Boolean)
+        : [];
+
+      // Get selected granularity
+      const granularityRadio = document.querySelector('input[name="granularity"]:checked');
+      const captureGranularity = granularityRadio ? granularityRadio.value : 'minimal';
+
+      await chrome.storage.sync.set({
+        brainUrl: brainUrlInput.value.trim() || 'http://127.0.0.1:3000',
+        pat: patInput.value.trim(),
+        blocklist,
+        captureGranularity
+      });
+
+      showSaveStatus('Settings saved!', false);
+    } catch (err) {
+      showSaveStatus('Error: ' + err.message, true);
+    }
+  });
+
+  // ---- Test connection ----
+  btnTest.addEventListener('click', async () => {
+    connectionStatus.textContent = 'Testing…';
+    connectionStatus.className = 'connection-status';
+
+    try {
+      // Temporarily apply the input values for the test
+      const testUrl = brainUrlInput.value.trim() || 'http://127.0.0.1:3000';
+      const testPat = patInput.value.trim();
+
+      const headers = { 'Content-Type': 'application/json' };
+      if (testPat) headers['Authorization'] = `Bearer ${testPat}`;
+
+      const res = await fetch(`${testUrl}/health`, { headers });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+
+      connectionStatus.textContent = '✓ Connected';
+      connectionStatus.className = 'connection-status ok';
+    } catch (err) {
+      connectionStatus.textContent = `✗ ${err.message}`;
+      connectionStatus.className = 'connection-status fail';
+    }
+  });
+
+  // ---- Save status indicator ----
+  function showSaveStatus(message, isError) {
+    saveStatus.textContent = message;
+    saveStatus.className = `save-status ${isError ? 'error' : 'saved'}`;
+    setTimeout(() => {
+      saveStatus.textContent = '';
+      saveStatus.className = 'save-status';
+    }, 3000);
+  }
+
+  // ---- Init ----
+  loadSettings();
+})();

package/extension/popup/popup.css

@@ -0,0 +1,221 @@
+/* Total Recall — Popup 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: 350px;
+  overflow: hidden;
+}
+
+.popup {
+  padding: 16px;
+}
+
+/* ---- Header ---- */
+.popup-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.popup-header h1 {
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.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;
+}
+
+/* ---- Fields ---- */
+.field-group {
+  margin-bottom: 12px;
+}
+
+.field-group label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #585b70;
+  margin-bottom: 6px;
+}
+
+.field-group input,
+.field-group textarea {
+  width: 100%;
+  padding: 8px 12px;
+  background: #1e1e2e;
+  border: 1px solid #313244;
+  border-radius: 8px;
+  color: #cdd6f4;
+  font-size: 13px;
+  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: 60px;
+}
+
+.field-group input[readonly] {
+  color: #a6adc8;
+  cursor: default;
+}
+
+/* ---- Buttons ---- */
+.button-row {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.btn {
+  flex: 1;
+  padding: 9px 10px;
+  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;
+}
+
+/* ---- Toggle ---- */
+.toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-top: 1px solid #313244;
+}
+
+.toggle-label {
+  font-size: 12px;
+  color: #a6adc8;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background: #313244;
+  border-radius: 20px;
+  transition: background 0.3s ease;
+}
+
+.slider::before {
+  content: '';
+  position: absolute;
+  height: 14px;
+  width: 14px;
+  left: 3px;
+  bottom: 3px;
+  background: #6c7086;
+  border-radius: 50%;
+  transition: transform 0.3s ease, background 0.3s ease;
+}
+
+.switch input:checked + .slider {
+  background: rgba(137, 180, 250, 0.3);
+}
+
+.switch input:checked + .slider::before {
+  transform: translateX(16px);
+  background: #89b4fa;
+}
+
+/* ---- Status Message ---- */
+.status-msg {
+  margin-top: 10px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  text-align: center;
+  transition: opacity 0.3s ease;
+}
+
+.status-msg.success {
+  background: rgba(166, 227, 161, 0.1);
+  color: #a6e3a1;
+  border: 1px solid rgba(166, 227, 161, 0.3);
+}
+
+.status-msg.error {
+  background: rgba(243, 139, 168, 0.1);
+  color: #f38ba8;
+  border: 1px solid rgba(243, 139, 168, 0.3);
+}
+
+.hidden {
+  display: none !important;
+}

package/extension/popup/popup.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Total Recall</title>
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <div class="popup">
+    <header class="popup-header">
+      <h1>🧠 Total Recall</h1>
+      <div id="connection-dot" class="dot"></div>
+    </header>
+
+    <div class="field-group">
+      <label for="url-input">Page URL</label>
+      <input type="text" id="url-input" readonly />
+    </div>
+
+    <div class="field-group">
+      <label for="note-input">Quick Note</label>
+      <textarea id="note-input" placeholder="Add a note about this page…" rows="3"></textarea>
+    </div>
+
+    <div class="button-row">
+      <button id="btn-remember" class="btn primary">📌 Remember</button>
+      <button id="btn-research" class="btn secondary">🔬 Research</button>
+    </div>
+
+    <div class="toggle-row">
+      <span class="toggle-label">Passive tracking</span>
+      <label class="switch">
+        <input type="checkbox" id="tracking-toggle" />
+        <span class="slider"></span>
+      </label>
+    </div>
+
+    <div id="status-msg" class="status-msg hidden"></div>
+  </div>
+
+  <script src="../lib/brain-client.js"></script>
+  <script src="popup.js"></script>
+</body>
+</html>

package/extension/popup/popup.js

@@ -0,0 +1,107 @@
+// Total Recall — Popup Logic
+
+(function () {
+  'use strict';
+
+  const dot = document.getElementById('connection-dot');
+  const urlInput = document.getElementById('url-input');
+  const noteInput = document.getElementById('note-input');
+  const btnRemember = document.getElementById('btn-remember');
+  const btnResearch = document.getElementById('btn-research');
+  const trackingToggle = document.getElementById('tracking-toggle');
+  const statusMsg = document.getElementById('status-msg');
+
+  // ---- Auto-fill current tab URL ----
+  async function fillCurrentTab() {
+    try {
+      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+      if (tab) urlInput.value = tab.url || '';
+    } catch {
+      // ignore — might not have activeTab permission yet
+    }
+  }
+
+  // ---- Connection check ----
+  async function checkConnection() {
+    try {
+      await self.BrainClient.healthCheck();
+      dot.className = 'dot connected';
+    } catch {
+      dot.className = 'dot disconnected';
+    }
+  }
+
+  // ---- Send share message to background ----
+  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'));
+      });
+    });
+  }
+
+  // ---- Show status ----
+  function showStatus(message, isError = false) {
+    statusMsg.textContent = message;
+    statusMsg.className = `status-msg ${isError ? 'error' : 'success'}`;
+    statusMsg.classList.remove('hidden');
+    setTimeout(() => statusMsg.classList.add('hidden'), 3000);
+  }
+
+  // ---- Remember ----
+  btnRemember.addEventListener('click', async () => {
+    try {
+      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+      const payload = {
+        url: tab?.url || urlInput.value,
+        title: tab?.title || '',
+        action: 'remember',
+        source: 'chrome-extension-popup'
+      };
+      const note = noteInput.value.trim();
+      if (note) payload.excerpt = note;
+      await sendShare(payload);
+      showStatus('Page remembered!');
+      noteInput.value = '';
+    } catch (err) {
+      showStatus('Error: ' + err.message, true);
+    }
+  });
+
+  // ---- Research ----
+  btnResearch.addEventListener('click', async () => {
+    try {
+      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+      const payload = {
+        url: tab?.url || urlInput.value,
+        title: tab?.title || '',
+        action: 'research',
+        source: 'chrome-extension-popup'
+      };
+      const note = noteInput.value.trim();
+      if (note) payload.excerpt = note;
+      await sendShare(payload);
+      showStatus('Research queued!');
+      noteInput.value = '';
+    } catch (err) {
+      showStatus('Error: ' + err.message, true);
+    }
+  });
+
+  // ---- Tracking toggle ----
+  async function loadTrackingPref() {
+    const { passiveTracking } = await chrome.storage.sync.get('passiveTracking');
+    trackingToggle.checked = passiveTracking || false;
+  }
+
+  trackingToggle.addEventListener('change', () => {
+    chrome.storage.sync.set({ passiveTracking: trackingToggle.checked });
+  });
+
+  // ---- Init ----
+  fillCurrentTab();
+  checkConnection();
+  loadTrackingPref();
+})();