total-recall-brain 3.28.2 → 3.30.0

package/extension/options/options.html

@@ -2,72 +2,120 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Total Recall — Settings</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Total Recall — Extension settings</title>
+  <link rel="stylesheet" href="../lib/tokens.css">
   <link rel="stylesheet" href="options.css">
 </head>
 <body>
-  <div class="options-page">
-    <header class="options-header">
-      <h1>🧠 Total Recall — Settings</h1>
+  <svg width="0" height="0" style="position:absolute" aria-hidden="true">
+    <symbol id="i-plug" viewBox="0 0 24 24"><path d="M9 3v5M15 3v5"/><path d="M6 8h12v3a6 6 0 0 1-12 0z"/><path d="M12 17v4"/></symbol>
+    <symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 4.5 6v5.5c0 4.5 3.2 8.2 7.5 9.5 4.3-1.3 7.5-5 7.5-9.5V6z"/><path d="m9 12 2 2 4-4"/></symbol>
+    <symbol id="i-keyboard" viewBox="0 0 24 24"><rect x="2.5" y="6" width="19" height="12" rx="2"/><path d="M6.5 10h.01M10 10h.01M14 10h.01M17.5 10h.01M7 14h10"/></symbol>
+    <symbol id="i-eye" viewBox="0 0 24 24"><path d="M2.5 12S6 5 12 5s9.5 7 9.5 7-3.5 7-9.5 7-9.5-7-9.5-7z"/><circle cx="12" cy="12" r="3"/></symbol>
+    <symbol id="i-external" viewBox="0 0 24 24"><path d="M14 4h6v6"/><path d="M20 4 11 13"/><path d="M19 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4"/></symbol>
+  </svg>
+
+  <div class="page">
+    <header class="hero">
+      <img src="../icons/icon-128.png" alt="" width="44" height="44" class="hero-mark">
+      <div>
+        <h1>Total Recall for Chrome</h1>
+        <p>Capture what you read, recall what you know, and chat with your brain beside any tab.</p>
+      </div>
     </header>
 
-    <section class="section">
-      <h2>Connection</h2>
+    <section class="card" aria-labelledby="h-connection">
+      <div class="card-head">
+        <span class="card-icon"><svg class="icon"><use href="#i-plug"/></svg></span>
+        <div>
+          <h2 id="h-connection">Connection</h2>
+          <p>Where your brain runs and the token the extension uses to reach it.</p>
+        </div>
+        <span class="chip" id="connection-chip">Not tested</span>
+      </div>
 
-      <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 class="field">
+        <label for="brain-url">Brain address</label>
+        <input class="input" id="brain-url" type="url" placeholder="http://127.0.0.1:3000" spellcheck="false" autocomplete="off">
+        <p class="help">Usually <code>http://127.0.0.1:3000</code>. For a brain on another machine, Chrome asks once for permission to reach it.</p>
       </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 class="field">
+        <label for="pat-token">Access token</label>
+        <div class="input-row">
+          <input class="input mono" id="pat-token" type="password" placeholder="tr_…" spellcheck="false" autocomplete="off">
+          <button class="icon-btn" id="btn-reveal" type="button" aria-label="Show token" aria-pressed="false" title="Show token"><svg class="icon"><use href="#i-eye"/></svg></button>
+        </div>
+        <p class="help">Create one in the dashboard under <a href="#" id="link-integrations">Integrations<svg class="icon sm"><use href="#i-external"/></svg></a>. It stays on this device and is never synced.</p>
       </div>
 
-      <div class="connection-row">
-        <button id="btn-test" class="btn secondary">Test Connection</button>
-        <div id="connection-status" class="connection-status"></div>
+      <div class="result" id="connection-result" hidden></div>
+
+      <div class="actions">
+        <button class="btn" id="btn-test" type="button">Test connection</button>
+        <button class="btn primary" id="btn-save-connection" type="button">Save connection</button>
       </div>
     </section>
 
-    <section class="section">
-      <h2>Privacy</h2>
+    <section class="card" aria-labelledby="h-privacy">
+      <div class="card-head">
+        <span class="card-icon"><svg class="icon"><use href="#i-shield"/></svg></span>
+        <div>
+          <h2 id="h-privacy">Page recall &amp; privacy</h2>
+          <p>Nothing leaves this browser unless you capture it — or you turn on related memories below.</p>
+        </div>
+      </div>
+
+      <div class="setting">
+        <div>
+          <div class="setting-title">Related memories on pages</div>
+          <p class="help">When a page loads, send its title to your brain and badge the toolbar icon if you already know something related. Off by default.</p>
+        </div>
+        <label class="switch"><input type="checkbox" id="opt-page-recall"><span class="track"></span></label>
+      </div>
+      <div class="setting sub" id="pill-setting">
+        <div>
+          <div class="setting-title">Floating card on the page</div>
+          <p class="help">Also show a small “Related” pill in the corner of the page.</p>
+        </div>
+        <label class="switch"><input type="checkbox" id="opt-show-pill"><span class="track"></span></label>
+      </div>
 
-      <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 class="field">
+        <label for="blocklist">Never check these sites <span class="muted">— one domain per line, subdomains included</span></label>
+        <textarea class="textarea mono" id="blocklist" rows="5" placeholder="mail.google.com&#10;bank.example.com"></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 class="actions">
+        <span class="saved" id="privacy-saved" hidden>Saved</span>
+        <button class="btn primary" id="btn-save-privacy" type="button">Save privacy settings</button>
+      </div>
+    </section>
+
+    <section class="card" aria-labelledby="h-shortcuts">
+      <div class="card-head">
+        <span class="card-icon"><svg class="icon"><use href="#i-keyboard"/></svg></span>
+        <div>
+          <h2 id="h-shortcuts">Shortcuts</h2>
+          <p>Capture without reaching for the mouse.</p>
         </div>
       </div>
+      <dl class="shortcuts" id="shortcut-list"></dl>
+      <div class="tips">
+        <div><span class="kbd">tr</span> then <span class="kbd">Space</span> in the address bar searches your brain.</div>
+        <div>Right-click a selection to remember it, research it, or ask your brain about it.</div>
+      </div>
+      <div class="actions">
+        <button class="btn" id="btn-shortcuts" type="button">Change shortcuts<svg class="icon sm"><use href="#i-external"/></svg></button>
+      </div>
     </section>
 
-    <div class="actions">
-      <button id="btn-save" class="btn primary">Save Settings</button>
-      <span id="save-status" class="save-status"></span>
-    </div>
+    <footer class="foot" id="foot"></footer>
   </div>
 
-  <script src="../lib/preconfigured.js"></script>
   <script src="../lib/brain-client.js"></script>
+  <script src="../lib/ui-helpers.js"></script>
   <script src="options.js"></script>
 </body>
 </html>

package/extension/options/options.js

@@ -1,111 +1,234 @@
-// Total Recall — Options Page Logic
+// Total Recall — options page
 
 (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 [localSettings, syncSettings] = await Promise.all([
-      chrome.storage.local.get(['brainUrl', 'pat']),
-      chrome.storage.sync.get([
-      'blocklist',
-      'captureGranularity',
-      'passiveTracking'
-      ])
-    ]);
-    const settings = { ...syncSettings, ...localSettings };
+  const Brain = self.BrainClient;
+  const $ = (id) => document.getElementById(id);
+
+  function el(tag, className, text) {
+    const node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text !== undefined) node.textContent = text;
+    return node;
+  }
+
+  function setBusy(button, busy) {
+    button.disabled = busy;
+    button.classList.toggle('is-busy', busy);
+  }
+
+  function isLocal(url) {
+    try {
+      const host = new URL(url).hostname;
+      return host === '127.0.0.1' || host === 'localhost';
+    } catch {
+      return false;
+    }
+  }
+
+  function originPattern(url) {
+    const u = new URL(url);
+    return `${u.protocol}//${u.hostname}/*`;
+  }
+
+  /** Remote brains need a runtime host grant; must be requested from a click. */
+  async function ensureHostPermission(url) {
+    if (isLocal(url)) return true;
+    const origins = [originPattern(url)];
+    if (await chrome.permissions.contains({ origins })) return true;
+    return chrome.permissions.request({ origins });
+  }
+
+  function readConnectionForm() {
+    const raw = $('brain-url').value.trim() || Brain.DEFAULT_BRAIN_URL;
+    let brainUrl;
+    try {
+      const u = new URL(raw);
+      if (!/^https?:$/.test(u.protocol)) throw new Error();
+      brainUrl = Brain.normalizeUrl(u.origin + u.pathname);
+    } catch {
+      throw new Error('Enter a full address, like http://127.0.0.1:3000');
+    }
+    return { brainUrl, pat: $('pat-token').value.trim() };
+  }
+
+  function setChip(text, tone) {
+    const chip = $('connection-chip');
+    chip.textContent = text;
+    chip.className = `chip ${tone || ''}`;
+  }
 
-    const pre = self.PreConfigured || {};
-    brainUrlInput.value = settings.brainUrl || pre.brainUrl || 'http://127.0.0.1:3000';
-    patInput.value = settings.pat || pre.pat || '';
+  function showResult(ok, rows, message) {
+    const box = $('connection-result');
+    box.className = `result ${ok ? 'ok' : 'fail'}`;
+    if (ok) {
+      box.replaceChildren(...rows.flatMap(([k, v]) => [el('dt', '', k), el('dd', '', v)]));
+    } else {
+      box.replaceChildren(el('div', '', message));
+    }
+    box.hidden = false;
+  }
 
-    // Blocklist: stored as array, displayed one per line
-    if (Array.isArray(settings.blocklist)) {
-      blocklistTextarea.value = settings.blocklist.join('\n');
+  async function testConnection() {
+    const { brainUrl, pat } = readConnectionForm();
+    if (!(await ensureHostPermission(brainUrl))) {
+      throw new Error(`Chrome permission to reach ${new URL(brainUrl).host} was declined.`);
+    }
+    const config = { brainUrl, pat, activeBrainId: 'global' };
+    const health = await Brain.request('/health', { config, brainScoped: false });
+    if (!pat) {
+      const err = new Error('The brain is reachable. Add an access token to finish connecting.');
+      err.code = 'unconfigured';
+      err.health = health;
+      throw err;
     }
+    const list = await Brain.request('/api/memory?limit=1', { config });
+    let brains = null;
+    try { brains = await Brain.request('/api/brains', { config, brainScoped: false }); } catch { /* optional scope */ }
+    return { health, total: list && list.total, brains: brains && brains.brains };
+  }
 
-    // Granularity radio
-    let granularity = settings.captureGranularity || 'minimal';
-    if (settings.passiveTracking === false) {
-      granularity = 'off';
+  function describeTest(result) {
+    const rows = [
+      ['Brain', `v${result.health.version || '?'} · daemon ${result.health.daemon || 'unknown'}`],
+      ['Memories', typeof result.total === 'number' ? result.total.toLocaleString() : '—'],
+    ];
+    if (Array.isArray(result.brains) && result.brains.length > 1) {
+      rows.push(['Project brains', String(result.brains.length - 1)]);
     }
-    const radio = document.querySelector(`input[name="granularity"][value="${granularity}"]`);
-    if (radio) radio.checked = true;
+    return rows;
   }
 
-  // ---- Save settings ----
-  btnSave.addEventListener('click', async () => {
+  $('btn-test').addEventListener('click', async () => {
+    const btn = $('btn-test');
+    setBusy(btn, true);
+    setChip('Testing…');
     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';
-      const passiveTracking = captureGranularity !== 'off';
-
-      await chrome.storage.local.set({
-        brainUrl: brainUrlInput.value.trim() || 'http://127.0.0.1:3000',
-        pat: patInput.value.trim(),
-      });
-      await chrome.storage.sync.remove('pat');
-      await chrome.storage.sync.set({
-        blocklist,
-        captureGranularity,
-        passiveTracking
-      });
-
-      showSaveStatus('Settings saved!', false);
+      const result = await testConnection();
+      setChip('Connected', 'success');
+      showResult(true, describeTest(result));
     } catch (err) {
-      showSaveStatus('Error: ' + err.message, true);
+      setChip(err.code === 'unconfigured' ? 'Needs token' : 'Not connected', err.code === 'unconfigured' ? 'warning' : 'error');
+      showResult(false, null, err.message);
+    } finally {
+      setBusy(btn, false);
     }
   });
 
-  // ---- Test connection ----
-  btnTest.addEventListener('click', async () => {
-    connectionStatus.textContent = 'Testing…';
-    connectionStatus.className = 'connection-status';
-
+  $('btn-save-connection').addEventListener('click', async () => {
+    const btn = $('btn-save-connection');
+    setBusy(btn, true);
     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 { brainUrl, pat } = readConnectionForm();
+      if (!(await ensureHostPermission(brainUrl))) {
+        throw new Error(`Without permission to reach ${new URL(brainUrl).host}, the extension can't use that brain.`);
+      }
+      await chrome.storage.local.set({ brainUrl, pat });
+      await chrome.storage.sync.remove(['pat', 'brainUrl']);
+      $('brain-url').value = brainUrl;
+      try {
+        const result = await testConnection();
+        setChip('Connected', 'success');
+        showResult(true, [['Saved', 'Connection works'], ...describeTest(result)]);
+      } catch (err) {
+        setChip('Saved · not connected', 'warning');
+        showResult(false, null, `Saved, but the test failed: ${err.message}`);
+      }
+    } catch (err) {
+      showResult(false, null, err.message);
+    } finally {
+      setBusy(btn, false);
+    }
+  });
+
+  $('btn-reveal').addEventListener('click', () => {
+    const input = $('pat-token');
+    const show = input.type === 'password';
+    input.type = show ? 'text' : 'password';
+    $('btn-reveal').setAttribute('aria-pressed', String(show));
+    $('btn-reveal').setAttribute('aria-label', show ? 'Hide token' : 'Show token');
+  });
 
-      const headers = { 'Content-Type': 'application/json' };
-      if (testPat) headers['Authorization'] = `Bearer ${testPat}`;
+  $('link-integrations').addEventListener('click', async (e) => {
+    e.preventDefault();
+    let base;
+    try { base = readConnectionForm().brainUrl; } catch { base = Brain.DEFAULT_BRAIN_URL; }
+    chrome.tabs.create({ url: `${base}/integrations` });
+  });
 
-      const res = await fetch(`${testUrl}/health`, { headers });
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  // ---- Privacy ----
 
-      connectionStatus.textContent = '✓ Connected';
-      connectionStatus.className = 'connection-status ok';
-    } catch (err) {
-      connectionStatus.textContent = `✗ ${err.message}`;
-      connectionStatus.className = 'connection-status fail';
-    }
+  function syncPillSetting() {
+    const on = $('opt-page-recall').checked;
+    $('opt-show-pill').disabled = !on;
+    $('pill-setting').classList.toggle('is-disabled', !on);
+  }
+  $('opt-page-recall').addEventListener('change', syncPillSetting);
+
+  $('btn-save-privacy').addEventListener('click', async () => {
+    const blocklist = $('blocklist').value
+      .split('\n')
+      .map((line) => line.trim().toLowerCase().replace(/^[a-z]+:\/\//, '').replace(/\/.*$/, ''))
+      .filter(Boolean);
+    const unique = [...new Set(blocklist)];
+    await chrome.storage.sync.set({
+      pageRecall: $('opt-page-recall').checked,
+      showPill: $('opt-show-pill').checked,
+      blocklist: unique,
+    });
+    $('blocklist').value = unique.join('\n');
+    const saved = $('privacy-saved');
+    saved.hidden = false;
+    setTimeout(() => { saved.hidden = true; }, 2200);
   });
 
-  // ---- 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);
+  // ---- Shortcuts ----
+
+  async function renderShortcuts() {
+    const labels = {
+      _execute_action: 'Open the side panel',
+      'remember-page': 'Remember page (or selection)',
+    };
+    const commands = await chrome.commands.getAll();
+    const list = $('shortcut-list');
+    list.replaceChildren(...commands.filter((c) => labels[c.name]).map((c) => {
+      const row = el('div');
+      row.append(el('dt', '', labels[c.name]));
+      const dd = el('dd');
+      if (c.shortcut) {
+        for (const key of c.shortcut.split(/\+/)) dd.append(el('span', 'kbd', key));
+      } else {
+        dd.append(el('span', 'unset', 'Not set'));
+      }
+      row.append(dd);
+      return row;
+    }));
   }
 
+  $('btn-shortcuts').addEventListener('click', () => chrome.tabs.create({ url: 'chrome://extensions/shortcuts' }));
+
   // ---- Init ----
-  loadSettings();
+
+  async function init() {
+    const [local, sync] = await Promise.all([
+      chrome.storage.local.get(['brainUrl', 'pat']),
+      chrome.storage.sync.get({ pageRecall: false, showPill: true, blocklist: [] }),
+    ]);
+    const config = await Brain.getConfig();
+    $('brain-url').value = local.brainUrl || config.brainUrl;
+    $('pat-token').value = config.pat || '';
+    $('opt-page-recall').checked = !!sync.pageRecall;
+    $('opt-show-pill').checked = sync.showPill !== false;
+    $('blocklist').value = (sync.blocklist || []).join('\n');
+    syncPillSetting();
+    renderShortcuts();
+
+    const foot = $('foot');
+    foot.replaceChildren(el('span', '', `Total Recall extension v${chrome.runtime.getManifest().version}`), el('span', '', 'Your data stays on your brain.'));
+
+    if (config.pat) $('btn-test').click();
+  }
+
+  init();
 })();