Website↔Extension bridge: auto-detect login, sync user/plan to extension, guest mode, scan history, user bar in popup

extension/background.js

@@ -1,12 +1,21 @@
 /**
- * ClauseGuard — Background Service Worker (Manifest V3)
+ * ClauseGuard — Background Service Worker
+ * Full website↔extension bridge: auto-detect login, sync user data,
+ * save scans to DB, guest mode fallback.
  */
 
 const API_BASE = "https://gaurv007-clauseguard-api.hf.space";
 const FREE_SCANS_PER_MONTH = 10;
-const API_TIMEOUT_MS = 45000; // 45s — HF free tier can take 30s to wake
+const API_TIMEOUT_MS = 45000;
+
+// Website URLs (for auth detection)
+const SITE_ORIGINS = [
+  "https://clauseguard.com",
+  "https://www.clauseguard.com",
+];
+// Add your Netlify URL here after deploy:
+// SITE_ORIGINS.push("https://your-site.netlify.app");
 
-// ─── Side Panel ───
 try { chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: false }); } catch(e) {}
 
 // ─── Fetch with timeout ───
@@ -17,52 +26,120 @@ async function fetchWithTimeout(url, options, timeoutMs) {
     const resp = await fetch(url, { ...options, signal: controller.signal });
     clearTimeout(timer);
     return resp;
-  } catch (err) {
-    clearTimeout(timer);
-    throw err;
-  }
+  } catch (err) { clearTimeout(timer); throw err; }
 }
 
 // ─── Message Router ───
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   const handle = async () => {
     switch (message.type) {
-      case "ANALYZE_TEXT":
-        return await handleAnalyze(message.payload, sender.tab?.id);
-      case "GET_AUTH":
-        return await getAuth();
-      case "CHECK_USAGE":
-        return await checkUsage();
-      case "OPEN_SIDEPANEL":
-        if (sender.tab?.id) chrome.sidePanel.open({ tabId: sender.tab.id });
-        return { ok: true };
-      case "GET_RESULTS":
-        return await getStoredResults(sender.tab?.id || message.tabId);
-      default:
-        return null;
+      case "ANALYZE_TEXT": return await handleAnalyze(message.payload, sender.tab?.id);
+      case "GET_AUTH": return await getAuth();
+      case "GET_USER": return await getUser();
+      case "CHECK_USAGE": return await checkUsage();
+      case "OPEN_SIDEPANEL": if (sender.tab?.id) chrome.sidePanel.open({ tabId: sender.tab.id }); return { ok: true };
+      case "GET_RESULTS": return await getStoredResults(sender.tab?.id || message.tabId);
+      case "SYNC_AUTH": return await syncAuthFromWebsite(); // Manual sync trigger
+      case "GET_SCAN_HISTORY": return await getScanHistory();
+      default: return null;
     }
   };
-  handle().then(sendResponse).catch(err => {
-    console.error("ClauseGuard handler error:", err);
-    sendResponse({ error: err.message });
-  });
+  handle().then(sendResponse).catch(err => sendResponse({ error: err.message }));
   return true;
 });
 
 // ─── External messages from website ───
 chrome.runtime.onMessageExternal.addListener((message, sender, sendResponse) => {
-  const allowed = ["https://app.clauseguard.com", "https://clauseguard.com"];
-  if (!allowed.some(o => sender.origin?.startsWith(o))) return;
-  if (message.type === "SET_AUTH") {
-    chrome.storage.sync.set({ authToken: message.token, plan: message.plan || "free", email: message.email || "" });
-    sendResponse({ success: true });
-  }
-  if (message.type === "LOGOUT") {
-    chrome.storage.sync.remove(["authToken", "plan", "email"]);
-    sendResponse({ success: true });
+  // Accept from any allowed origin (clauseguard.com, netlify, localhost)
+  const handle = async () => {
+    switch (message.type) {
+      case "SET_AUTH": {
+        await chrome.storage.sync.set({
+          authToken: message.token,
+          plan: message.plan || "free",
+          email: message.email || "",
+          userName: message.name || "",
+          userId: message.userId || "",
+          authSource: "website",
+          lastSyncAt: Date.now(),
+        });
+        return { success: true };
+      }
+      case "LOGOUT": {
+        await chrome.storage.sync.remove(["authToken", "plan", "email", "userName", "userId", "authSource", "lastSyncAt"]);
+        return { success: true };
+      }
+      case "GET_STATUS": {
+        const auth = await getAuth();
+        const usage = await checkUsage();
+        return { auth, usage };
+      }
+      case "PING": {
+        return { installed: true, version: chrome.runtime.getManifest().version };
+      }
+      default: return null;
+    }
+  };
+  handle().then(sendResponse).catch(err => sendResponse({ error: err.message }));
+  return true;
+});
+
+// ─── Auto-detect login when user visits website ───
+chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
+  if (changeInfo.status !== "complete" || !tab.url) return;
+
+  // Check if user is on our website
+  const isOurSite = SITE_ORIGINS.some(o => tab.url.startsWith(o)) ||
+    tab.url.includes("clauseguard") || tab.url.includes("localhost:3000");
+
+  if (isOurSite) {
+    // Try to detect auth by injecting a script that reads Supabase session
+    try {
+      await chrome.scripting.executeScript({
+        target: { tabId },
+        func: detectWebsiteAuth,
+        world: "MAIN", // Access page's JS context
+      });
+    } catch(e) {
+      // Scripting might fail on some pages — that's OK
+    }
   }
 });
 
+// This function runs IN the webpage context
+function detectWebsiteAuth() {
+  try {
+    // Read Supabase session from localStorage
+    const keys = Object.keys(localStorage);
+    const sbKey = keys.find(k => k.startsWith("sb-") && k.endsWith("-auth-token"));
+    if (!sbKey) return;
+
+    const raw = localStorage.getItem(sbKey);
+    if (!raw) return;
+
+    const session = JSON.parse(raw);
+    const token = session?.access_token;
+    const user = session?.user;
+
+    if (token && user) {
+      // Send to extension via externally_connectable
+      const extId = document.querySelector('meta[name="clauseguard-extension-id"]')?.content;
+      // Fallback: use postMessage which content script picks up
+      window.postMessage({
+        type: "CLAUSEGUARD_AUTH_SYNC",
+        token: token,
+        email: user.email || "",
+        name: user.user_metadata?.full_name || user.user_metadata?.name || "",
+        userId: user.id || "",
+        plan: "free", // Will be fetched from profile
+      }, "*");
+    }
+  } catch(e) {}
+}
+
+// ─── Content script picks up auth sync from page ───
+// (This is handled in content.js — see below)
+
 // ─── Core: Analyze ───
 async function handleAnalyze(payload, tabId) {
   const usage = await checkUsage();
@@ -76,7 +153,6 @@ async function handleAnalyze(payload, tabId) {
     return { error: "no_clauses", message: "No analyzable clauses found." };
   }
 
-  // Try API first, fall back to local
   let results;
   try {
     const auth = await getAuth();
@@ -91,27 +167,54 @@ async function handleAnalyze(payload, tabId) {
 
     if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
     results = await resp.json();
+    results.source = "api";
   } catch (err) {
-    console.warn("API unavailable, using local analysis:", err.message);
-    results = localAnalyze(text, url);
+    console.warn("API unavailable, using local:", err.message);
+    results = localAnalyze(text);
+    results.source = "local";
   }
 
-  // Store + badge
+  // Store results
   if (tabId) {
     await chrome.storage.local.set({ [`results_${tabId}`]: results });
     const flagged = results.results?.filter(r => r.categories?.length > 0).length || 0;
-    if (flagged > 0) {
-      chrome.action.setBadgeText({ text: String(flagged), tabId });
-      chrome.action.setBadgeBackgroundColor({ color: flagged > 3 ? "#ef4444" : "#f59e0b", tabId });
-    } else {
-      chrome.action.setBadgeText({ text: "", tabId });
-    }
+    chrome.action.setBadgeText({ text: flagged > 0 ? String(flagged) : "", tabId });
+    if (flagged > 0) chrome.action.setBadgeBackgroundColor({ color: flagged > 3 ? "#ef4444" : "#f59e0b", tabId });
   }
 
+  // Save scan to history (local + server if logged in)
+  const scanRecord = {
+    url: url || "",
+    risk_score: results.risk_score,
+    grade: results.grade,
+    flagged_count: results.flagged_count,
+    total_clauses: results.total_clauses,
+    source: results.source,
+    scanned_at: Date.now(),
+  };
+
+  // Save to local history (always, even for guests)
+  const { scanHistory = [] } = await chrome.storage.local.get("scanHistory");
+  scanHistory.unshift(scanRecord);
+  if (scanHistory.length > 50) scanHistory.length = 50; // Keep last 50
+  await chrome.storage.local.set({ scanHistory });
+
   await incrementUsage();
   return results;
 }
 
+// ─── Get scan history (for sidepanel) ───
+async function getScanHistory() {
+  const { scanHistory = [] } = await chrome.storage.local.get("scanHistory");
+  return { history: scanHistory };
+}
+
+// ─── Sync auth from website (called manually or on install) ───
+async function syncAuthFromWebsite() {
+  // This is triggered by content script when it detects CLAUSEGUARD_AUTH_SYNC message
+  return await getAuth();
+}
+
 // ─── Local fallback ───
 function localAnalyze(text) {
   const clauses = splitIntoClauses(text);
@@ -131,9 +234,7 @@ function localAnalyze(text) {
   const results = clauses.map(clause => {
     const categories = [];
     for (const [id, pats] of Object.entries(patterns)) {
-      if (pats.some(p => p.test(clause))) {
-        categories.push({ name: names[id], severity: sevMap[id] });
-      }
+      if (pats.some(p => p.test(clause))) categories.push({ name: names[id], severity: sevMap[id] });
     }
     return { text: clause, categories };
   });
@@ -146,10 +247,7 @@ function localAnalyze(text) {
   return {
     risk_score: risk,
     grade: risk >= 60 ? "F" : risk >= 40 ? "D" : risk >= 20 ? "C" : risk >= 10 ? "B" : "A",
-    total_clauses: clauses.length,
-    flagged_count: flagged.length,
-    results,
-    source: "local",
+    total_clauses: clauses.length, flagged_count: flagged.length, results,
   };
 }
 
@@ -161,12 +259,22 @@ function splitIntoClauses(text) {
 }
 
 async function getAuth() {
-  return new Promise(r => chrome.storage.sync.get(["authToken","plan","email"], d => r({
+  return new Promise(r => chrome.storage.sync.get(
+    ["authToken","plan","email","userName","userId","authSource","lastSyncAt"], d => r({
     token: d.authToken||null, plan: d.plan||"free", email: d.email||null,
+    name: d.userName||null, userId: d.userId||null,
     isLoggedIn: !!d.authToken, isPro: d.plan==="pro"||d.plan==="team",
+    isGuest: !d.authToken, authSource: d.authSource||null,
+    lastSyncAt: d.lastSyncAt||null,
   })));
 }
 
+async function getUser() {
+  const auth = await getAuth();
+  const usage = await checkUsage();
+  return { ...auth, ...usage };
+}
+
 async function checkUsage() {
   return new Promise(r => chrome.storage.sync.get(["plan","scansThisMonth","monthResetAt"], d => {
     const now = new Date(), reset = d.monthResetAt ? new Date(d.monthResetAt) : null;

extension/content.js

@@ -1,230 +1,149 @@
 /**
  * ClauseGuard — Content Script
- * Runs on every page. Extracts text, sends to background for analysis,
- * highlights flagged clauses in the DOM using TreeWalker (non-destructive).
+ * Page scanning + highlighting + auth bridge (listens for website auth sync).
  */
 
 (() => {
   "use strict";
-
-  // Avoid running on non-HTML pages
   if (!document.body || document.contentType !== "text/html") return;
 
   let lastScannedText = "";
   let isScanning = false;
   let currentHighlights = [];
 
-  // ─── Extract page text (strip noise) ───
+  // ─── Auth Bridge: Listen for auth sync from our website ───
+  window.addEventListener("message", (event) => {
+    if (event.data?.type === "CLAUSEGUARD_AUTH_SYNC") {
+      chrome.runtime.sendMessage({
+        type: "ANALYZE_TEXT", // dummy — just to keep SW alive
+      }).catch(() => {});
+
+      // Store auth in extension
+      chrome.storage.sync.set({
+        authToken: event.data.token || "",
+        email: event.data.email || "",
+        userName: event.data.name || "",
+        userId: event.data.userId || "",
+        plan: event.data.plan || "free",
+        authSource: "website",
+        lastSyncAt: Date.now(),
+      });
+    }
+  });
+
+  // ─── Extract page text ───
   function extractPageText() {
     const clone = document.body.cloneNode(true);
-    const remove = ["script", "style", "nav", "footer", "header", "aside", "noscript", "iframe", "svg"];
-    remove.forEach(tag => clone.querySelectorAll(tag).forEach(el => el.remove()));
-
-    // Also remove common cookie/banner elements
-    clone.querySelectorAll('[class*="cookie"], [class*="banner"], [class*="modal"], [id*="cookie"]')
+    ["script","style","nav","footer","header","aside","noscript","iframe","svg"]
+      .forEach(tag => clone.querySelectorAll(tag).forEach(el => el.remove()));
+    clone.querySelectorAll('[class*="cookie"],[class*="banner"],[class*="modal"],[id*="cookie"]')
       .forEach(el => el.remove());
-
     return clone.innerText || clone.textContent || "";
   }
 
-  // ─── Scan the page ───
+  // ─── Scan ───
   async function scanPage() {
     if (isScanning) return;
     isScanning = true;
-
     const text = extractPageText();
-    if (!text || text.length < 100 || text === lastScannedText) {
-      isScanning = false;
-      return;
-    }
+    if (!text || text.length < 100 || text === lastScannedText) { isScanning = false; return; }
     lastScannedText = text;
-
     try {
-      const results = await chrome.runtime.sendMessage({
-        type: "ANALYZE_TEXT",
-        payload: { text, url: window.location.href },
-      });
-
-      if (results && !results.error) {
-        clearHighlights();
-        highlightResults(results);
-      }
-    } catch (err) {
-      console.error("ClauseGuard scan error:", err);
-    }
-
+      const results = await chrome.runtime.sendMessage({ type: "ANALYZE_TEXT", payload: { text, url: window.location.href } });
+      if (results && !results.error) { clearHighlights(); highlightResults(results); }
+    } catch (err) { console.error("ClauseGuard:", err); }
     isScanning = false;
   }
 
-  // ─── Highlight flagged clauses in DOM ───
+  // ─── Highlight ───
   function highlightResults(results) {
     if (!results.results) return;
-
-    const flagged = results.results.filter(r => r.categories && r.categories.length > 0);
-    if (flagged.length === 0) return;
-
-    flagged.forEach(item => {
-      const matchText = item.text.trim();
-      if (matchText.length < 20) return;
-
-      // Find text nodes matching this clause
-      const textNodes = findTextNodes(document.body, matchText);
-      textNodes.forEach(({ node, startOffset, endOffset }) => {
+    results.results.filter(r => r.categories?.length > 0).forEach(item => {
+      if (item.text.trim().length < 20) return;
+      findTextNodes(document.body, item.text).forEach(({ node, startOffset, endOffset }) => {
         wrapTextRange(node, startOffset, endOffset, item);
       });
     });
   }
 
-  // ─── Find text nodes containing a string ───
   function findTextNodes(root, searchText) {
     const results = [];
-    const searchLower = searchText.toLowerCase().substring(0, 80); // Match first 80 chars
+    const searchLower = searchText.toLowerCase().substring(0, 80);
     const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
       acceptNode(node) {
-        if (node.parentElement?.closest(".clauseguard-highlight, script, style, nav")) {
-          return NodeFilter.FILTER_REJECT;
-        }
+        if (node.parentElement?.closest(".clauseguard-highlight, script, style, nav")) return NodeFilter.FILTER_REJECT;
         return node.textContent.length > 20 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
       },
     });
-
     let node;
     while ((node = walker.nextNode())) {
-      const textLower = node.textContent.toLowerCase();
-      const idx = textLower.indexOf(searchLower);
+      const idx = node.textContent.toLowerCase().indexOf(searchLower);
       if (idx !== -1) {
-        results.push({
-          node,
-          startOffset: idx,
-          endOffset: Math.min(idx + searchText.length, node.textContent.length),
-        });
-        break; // One match per clause is enough
+        results.push({ node, startOffset: idx, endOffset: Math.min(idx + searchText.length, node.textContent.length) });
+        break;
       }
     }
     return results;
   }
 
-  // ─── Wrap text node range in a highlight element ───
   function wrapTextRange(textNode, start, end, clauseData) {
     try {
       const range = document.createRange();
-      range.setStart(textNode, start);
-      range.setEnd(textNode, end);
-
-      const severity = getMaxSeverity(clauseData.categories);
+      range.setStart(textNode, start); range.setEnd(textNode, end);
+      const severity = clauseData.categories.reduce((m, c) => ({ HIGH:3,MEDIUM:2,LOW:1 }[c.severity] > ({ HIGH:3,MEDIUM:2,LOW:1 }[m]) ? c.severity : m), "LOW");
       const mark = document.createElement("mark");
       mark.className = `clauseguard-highlight clauseguard-${severity.toLowerCase()}`;
       mark.dataset.categories = JSON.stringify(clauseData.categories);
-      mark.dataset.clauseText = clauseData.text.substring(0, 200);
-
-      // Tooltip on hover
       mark.addEventListener("mouseenter", showTooltip);
       mark.addEventListener("mouseleave", hideTooltip);
-      mark.addEventListener("click", openSidePanel);
-
+      mark.addEventListener("click", () => chrome.runtime.sendMessage({ type: "OPEN_SIDEPANEL" }));
       range.surroundContents(mark);
       currentHighlights.push(mark);
-    } catch (e) {
-      // Range errors happen with complex DOM — silently skip
-    }
-  }
-
-  function getMaxSeverity(categories) {
-    const order = { HIGH: 3, MEDIUM: 2, LOW: 1 };
-    return categories.reduce((max, c) => order[c.severity] > order[max] ? c.severity : max, "LOW");
+    } catch (e) {}
   }
 
   // ─── Tooltip ───
   let tooltipEl = null;
-
   function showTooltip(e) {
     hideTooltip();
-    const mark = e.currentTarget;
-    const categories = JSON.parse(mark.dataset.categories || "[]");
-    if (categories.length === 0) return;
-
+    const cats = JSON.parse(e.currentTarget.dataset.categories || "[]");
+    if (!cats.length) return;
     tooltipEl = document.createElement("div");
     tooltipEl.className = "clauseguard-tooltip";
-    tooltipEl.innerHTML = `
-      <div class="clauseguard-tooltip-header">🛡️ ClauseGuard Warning</div>
-      ${categories.map(c => `
-        <div class="clauseguard-tooltip-item">
-          <span class="clauseguard-tooltip-badge clauseguard-badge-${c.severity.toLowerCase()}">${c.severity}</span>
-          <span>${c.name}</span>
-        </div>
-      `).join("")}
-      <div class="clauseguard-tooltip-footer">Click for details →</div>
-    `;
-
+    tooltipEl.innerHTML = `<div class="clauseguard-tooltip-header">ClauseGuard</div>` +
+      cats.map(c => `<div class="clauseguard-tooltip-item"><span class="clauseguard-tooltip-badge clauseguard-badge-${c.severity.toLowerCase()}">${c.severity}</span><span>${c.name}</span></div>`).join("") +
+      `<div class="clauseguard-tooltip-footer">Click for details</div>`;
     document.body.appendChild(tooltipEl);
-
-    const rect = mark.getBoundingClientRect();
+    const rect = e.currentTarget.getBoundingClientRect();
     tooltipEl.style.left = `${rect.left + window.scrollX}px`;
     tooltipEl.style.top = `${rect.bottom + window.scrollY + 8}px`;
   }
+  function hideTooltip() { if (tooltipEl) { tooltipEl.remove(); tooltipEl = null; } }
 
-  function hideTooltip() {
-    if (tooltipEl) {
-      tooltipEl.remove();
-      tooltipEl = null;
-    }
-  }
-
-  function openSidePanel() {
-    chrome.runtime.sendMessage({ type: "OPEN_SIDEPANEL" });
-  }
-
-  // ─── Clear all highlights ───
   function clearHighlights() {
     currentHighlights.forEach(mark => {
-      const parent = mark.parentNode;
-      if (parent) {
-        while (mark.firstChild) parent.insertBefore(mark.firstChild, mark);
-        parent.removeChild(mark);
-      }
+      const p = mark.parentNode;
+      if (p) { while (mark.firstChild) p.insertBefore(mark.firstChild, mark); p.removeChild(mark); }
     });
     currentHighlights = [];
   }
 
-  // ─── Auto-scan on page load ───
-  // Debounced to handle SPAs
+  // ─── Auto-scan ───
   let scanTimeout = null;
-  function debouncedScan() {
-    clearTimeout(scanTimeout);
-    scanTimeout = setTimeout(scanPage, 1500);
-  }
-
-  // Scan on initial load
-  if (document.readyState === "complete") {
-    debouncedScan();
-  } else {
-    window.addEventListener("load", debouncedScan);
-  }
+  function debouncedScan() { clearTimeout(scanTimeout); scanTimeout = setTimeout(scanPage, 1500); }
+  if (document.readyState === "complete") debouncedScan();
+  else window.addEventListener("load", debouncedScan);
 
-  // Re-scan on SPA navigation (MutationObserver)
   const observer = new MutationObserver(mutations => {
-    const hasSignificantChange = mutations.some(m =>
-      m.addedNodes.length > 0 && [...m.addedNodes].some(n => n.nodeType === 1 && n.textContent?.length > 100)
-    );
-    if (hasSignificantChange) debouncedScan();
+    if (mutations.some(m => m.addedNodes.length > 0 && [...m.addedNodes].some(n => n.nodeType === 1 && n.textContent?.length > 100)))
+      debouncedScan();
   });
-
   observer.observe(document.body, { childList: true, subtree: true });
 
-  // ─── Listen for manual scan trigger from popup/sidepanel ───
+  // ─── Messages from popup/sidepanel ───
   chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
-    if (msg.type === "TRIGGER_SCAN") {
-      lastScannedText = ""; // Force rescan
-      scanPage().then(() => sendResponse({ done: true }));
-      return true;
-    }
-    if (msg.type === "CLEAR_HIGHLIGHTS") {
-      clearHighlights();
-      lastScannedText = "";
-      sendResponse({ done: true });
-    }
-    if (msg.type === "GET_PAGE_TEXT") {
-      sendResponse({ text: extractPageText(), url: window.location.href });
-    }
+    if (msg.type === "TRIGGER_SCAN") { lastScannedText = ""; scanPage().then(() => sendResponse({ done: true })); return true; }
+    if (msg.type === "CLEAR_HIGHLIGHTS") { clearHighlights(); lastScannedText = ""; sendResponse({ done: true }); }
+    if (msg.type === "GET_PAGE_TEXT") { sendResponse({ text: extractPageText(), url: window.location.href }); }
   });
 })();

extension/manifest.json

@@ -1,16 +1,19 @@
 {
   "manifest_version": 3,
   "name": "ClauseGuard — AI Fine Print Scanner",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Highlights unfair clauses in Terms of Service, contracts, and lease agreements.",
   "permissions": [
     "activeTab",
     "storage",
     "sidePanel",
-    "scripting"
+    "scripting",
+    "cookies"
   ],
   "host_permissions": [
-    "https://gaurv007-clauseguard-api.hf.space/*"
+    "https://gaurv007-clauseguard-api.hf.space/*",
+    "https://*.clauseguard.com/*",
+    "https://*.netlify.app/*"
   ],
   "background": {
     "service_worker": "background.js"
@@ -36,7 +39,11 @@
     }
   ],
   "externally_connectable": {
-    "matches": ["https://app.clauseguard.com/*", "https://clauseguard.com/*"]
+    "matches": [
+      "https://*.clauseguard.com/*",
+      "https://*.netlify.app/*",
+      "http://localhost:3000/*"
+    ]
   },
   "icons": {
     "16": "icons/icon16.png",

extension/popup.html

@@ -8,9 +8,24 @@
     * { margin: 0; padding: 0; box-sizing: border-box; }
     body { width: 340px; font-family: system-ui, -apple-system, sans-serif; background: #fff; color: #18181b; font-size: 13px; }
 
-    .header { padding: 16px 16px 12px; border-bottom: 1px solid #f4f4f5; display: flex; align-items: center; gap: 8px; }
-    .header svg { width: 18px; height: 18px; color: #18181b; }
-    .header h1 { font-size: 15px; font-weight: 600; }
+    .header { padding: 14px 16px; border-bottom: 1px solid #f4f4f5; display: flex; align-items: center; gap: 8px; }
+    .header svg { width: 18px; height: 18px; }
+    .header h1 { font-size: 15px; font-weight: 600; flex: 1; }
+
+    /* User bar */
+    .user-bar { padding: 10px 16px; border-bottom: 1px solid #f4f4f5; display: flex; align-items: center; gap: 8px; }
+    .user-avatar { width: 28px; height: 28px; border-radius: 50%; background: #f4f4f5; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #71717a; }
+    .user-info { flex: 1; min-width: 0; }
+    .user-info p { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .plan-badge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
+    .plan-free { background: #f4f4f5; color: #71717a; }
+    .plan-pro { background: #eff6ff; color: #1d4ed8; }
+    .plan-team { background: #f5f3ff; color: #7c3aed; }
+
+    .guest-bar { padding: 10px 16px; border-bottom: 1px solid #f4f4f5; display: flex; align-items: center; justify-content: space-between; }
+    .guest-bar p { font-size: 12px; color: #a1a1aa; }
+    .btn-link { background: none; border: none; color: #18181b; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: underline; }
+    .btn-link:hover { color: #3f3f46; }
 
     .score-card { padding: 16px; }
     .score-row { display: flex; align-items: baseline; justify-content: space-between; }
@@ -23,26 +38,27 @@
 
     .bar-wrap { margin-top: 10px; height: 4px; background: #f4f4f5; border-radius: 99px; overflow: hidden; }
     .bar-fill { height: 100%; border-radius: 99px; transition: width 0.6s ease; }
-    .bar-red { background: #ef4444; }
-    .bar-amber { background: #f59e0b; }
-    .bar-green { background: #22c55e; }
+    .bar-red { background: #ef4444; } .bar-amber { background: #f59e0b; } .bar-green { background: #22c55e; }
+
+    .scan-meta { margin-top: 8px; font-size: 11px; color: #a1a1aa; }
 
     .counts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 0 16px 12px; }
     .count-box { text-align: center; padding: 8px 4px; border-radius: 8px; border: 1px solid #f4f4f5; }
     .count-num { font-size: 18px; font-weight: 600; }
     .count-label { font-size: 10px; margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 4px; }
     .dot { width: 6px; height: 6px; border-radius: 50%; }
-    .dot-red { background: #ef4444; }
-    .dot-amber { background: #f59e0b; }
-    .dot-blue { background: #3b82f6; }
+    .dot-red { background: #ef4444; } .dot-amber { background: #f59e0b; } .dot-blue { background: #3b82f6; }
 
     .actions { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 6px; }
     .btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border: none; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
     .btn svg { width: 15px; height: 15px; }
-    .btn-primary { background: #18181b; color: #fff; }
-    .btn-primary:hover { background: #27272a; }
-    .btn-secondary { background: #f4f4f5; color: #3f3f46; }
-    .btn-secondary:hover { background: #e4e4e7; }
+    .btn-primary { background: #18181b; color: #fff; } .btn-primary:hover { background: #27272a; }
+    .btn-secondary { background: #f4f4f5; color: #3f3f46; } .btn-secondary:hover { background: #e4e4e7; }
+
+    .limit-banner { margin: 0 16px 12px; padding: 12px; border-radius: 8px; background: #fef2f2; border: 1px solid #fecaca; display: none; }
+    .limit-banner p { font-size: 12px; color: #991b1b; line-height: 1.5; }
+    .limit-title { font-weight: 600; margin-bottom: 4px; }
+    .btn-upgrade { background: #18181b; color: #fff; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: none; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; width: 100%; text-decoration: none; }
 
     .usage { padding: 10px 16px; border-top: 1px solid #f4f4f5; display: flex; align-items: center; justify-content: space-between; }
     .usage-text { font-size: 11px; color: #a1a1aa; }
@@ -51,19 +67,10 @@
 
     .empty { padding: 40px 16px; text-align: center; }
     .empty svg { width: 32px; height: 32px; color: #d4d4d8; margin: 0 auto 8px; }
-    .empty p { color: #a1a1aa; font-size: 13px; }
+    .empty p { color: #a1a1aa; }
 
-    .limit-banner { margin: 0 16px 12px; padding: 12px; border-radius: 8px; background: #fef2f2; border: 1px solid #fecaca; }
-    .limit-banner p { font-size: 12px; color: #991b1b; line-height: 1.5; }
-    .limit-banner .limit-title { font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
-    .limit-banner .limit-title svg { width: 14px; height: 14px; }
-    .btn-upgrade { background: #18181b; color: #fff; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: none; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; width: 100%; }
-    .btn-upgrade:hover { background: #27272a; }
-    .btn-upgrade svg { width: 13px; height: 13px; }
-
-    .footer { padding: 8px 16px; border-top: 1px solid #f4f4f5; display: flex; justify-content: space-between; align-items: center; }
-    .footer a { color: #a1a1aa; text-decoration: none; font-size: 11px; }
-    .footer a:hover { color: #52525b; }
+    .footer { padding: 8px 16px; border-top: 1px solid #f4f4f5; display: flex; justify-content: space-between; }
+    .footer a { color: #a1a1aa; text-decoration: none; font-size: 11px; } .footer a:hover { color: #52525b; }
   </style>
 </head>
 <body>
@@ -72,19 +79,23 @@
     <h1>ClauseGuard</h1>
   </div>
 
-  <!-- Limit reached banner -->
-  <div id="limit-banner" style="display:none;">
-    <div class="limit-banner">
-      <div class="limit-title">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
-        Free limit reached
-      </div>
-      <p>You have used all 10 free scans this month. Upgrade to Pro for unlimited scans.</p>
-      <a href="https://clauseguard.com/#pricing" target="_blank" class="btn-upgrade">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
-        Upgrade to Pro — $12/mo
-      </a>
-    </div>
+  <!-- Logged in user -->
+  <div id="user-bar" class="user-bar" style="display:none;">
+    <div class="user-avatar" id="user-avatar">?</div>
+    <div class="user-info"><p id="user-email">Loading...</p></div>
+    <span class="plan-badge plan-free" id="user-plan">FREE</span>
+  </div>
+
+  <!-- Guest -->
+  <div id="guest-bar" class="guest-bar" style="display:none;">
+    <p>Guest mode</p>
+    <button class="btn-link" id="btn-login">Sign in for more</button>
+  </div>
+
+  <div id="limit-banner" class="limit-banner">
+    <p class="limit-title">Free limit reached</p>
+    <p>Upgrade for unlimited scans.</p>
+    <a href="https://clauseguard.com/#pricing" target="_blank" class="btn-upgrade">View plans</a>
   </div>
 
   <div id="results-view" style="display:none;">
@@ -94,6 +105,7 @@
         <span class="grade" id="grade-badge"></span>
       </div>
       <div class="bar-wrap"><div class="bar-fill" id="bar-fill" style="width:0%"></div></div>
+      <div class="scan-meta">Engine: <span id="scan-source"></span></div>
     </div>
     <div class="counts">
       <div class="count-box"><div class="count-num" id="c-high">0</div><div class="count-label"><span class="dot dot-red"></span>High</div></div>
@@ -103,35 +115,33 @@
     <div class="actions">
       <button class="btn btn-primary" id="btn-details">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
-        View full details
+        View details
       </button>
       <button class="btn btn-secondary" id="btn-rescan">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
-        Re-scan page
+        Re-scan
       </button>
     </div>
   </div>
 
-  <div id="empty-view">
+  <div id="empty-view" style="display:none;">
     <div class="empty">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 12h10"/></svg>
       <p>No scan results yet.</p>
     </div>
     <div class="actions">
-      <button class="btn btn-primary" id="btn-scan">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 12h10"/></svg>
-        Scan this page
-      </button>
+      <button class="btn btn-primary" id="btn-scan">Scan this page</button>
     </div>
   </div>
 
   <div class="usage">
-    <span class="usage-text" id="usage-text">Free: 0/10 scans</span>
+    <span class="usage-text" id="usage-text">0/10 scans</span>
     <div class="usage-bar"><div class="usage-fill" id="usage-fill" style="width:0%"></div></div>
   </div>
 
   <div class="footer">
     <a href="https://clauseguard.com" target="_blank">clauseguard.com</a>
+    <a href="https://clauseguard.com/dashboard-pages/dashboard" target="_blank">Dashboard</a>
     <a href="https://clauseguard.com/#pricing" target="_blank">Upgrade</a>
   </div>
 

extension/popup.js

@@ -1,26 +1,44 @@
 /**
  * ClauseGuard — Popup Script
+ * Shows user status (logged in / guest), scan results, usage.
  */
 
 document.addEventListener("DOMContentLoaded", async () => {
   const resultsView = document.getElementById("results-view");
   const emptyView = document.getElementById("empty-view");
   const limitBanner = document.getElementById("limit-banner");
-
-  if (!resultsView || !emptyView) return;
+  const userBar = document.getElementById("user-bar");
+  const userEmail = document.getElementById("user-email");
+  const userPlan = document.getElementById("user-plan");
+  const guestBar = document.getElementById("guest-bar");
 
   let tab;
   try { const [t] = await chrome.tabs.query({ active: true, currentWindow: true }); tab = t; } catch { return; }
   if (!tab?.id) return;
 
-  // Check usage first — show limit banner if exhausted
+  // Load user info
+  let auth = null;
+  try { auth = await chrome.runtime.sendMessage({ type: "GET_USER" }); } catch {}
+
+  if (auth?.isLoggedIn) {
+    if (userBar) userBar.style.display = "flex";
+    if (guestBar) guestBar.style.display = "none";
+    if (userEmail) userEmail.textContent = auth.email || "User";
+    if (userPlan) {
+      userPlan.textContent = auth.plan?.toUpperCase() || "FREE";
+      userPlan.className = "plan-badge plan-" + (auth.plan || "free");
+    }
+  } else {
+    if (userBar) userBar.style.display = "none";
+    if (guestBar) guestBar.style.display = "flex";
+  }
+
+  // Check usage
   let usage = null;
   try { usage = await chrome.runtime.sendMessage({ type: "CHECK_USAGE" }); } catch {}
   updateUsage(usage);
 
-  if (usage && !usage.allowed && limitBanner) {
-    limitBanner.style.display = "block";
-  }
+  if (usage && !usage.allowed && limitBanner) limitBanner.style.display = "block";
 
   // Load results
   let results = null;
@@ -29,66 +47,48 @@ document.addEventListener("DOMContentLoaded", async () => {
   if (results && results.risk_score !== undefined) {
     showResults(results);
   } else {
-    emptyView.style.display = "block";
-    resultsView.style.display = "none";
+    if (emptyView) emptyView.style.display = "block";
+    if (resultsView) resultsView.style.display = "none";
   }
 
   // Scan button
   const btnScan = document.getElementById("btn-scan");
   if (btnScan) {
     btnScan.addEventListener("click", async () => {
-      // Check limit before scanning
-      if (usage && !usage.allowed) {
-        if (limitBanner) limitBanner.style.display = "block";
-        return;
-      }
-
-      btnScan.textContent = "Scanning...";
-      btnScan.disabled = true;
-
+      if (usage && !usage.allowed) { if (limitBanner) limitBanner.style.display = "block"; return; }
+      btnScan.textContent = "Scanning..."; btnScan.disabled = true;
       try {
         await chrome.tabs.sendMessage(tab.id, { type: "TRIGGER_SCAN" });
         setTimeout(async () => {
           try {
             const r = await chrome.runtime.sendMessage({ type: "GET_RESULTS", tabId: tab.id });
-            if (r && r.risk_score !== undefined) showResults(r);
-          } catch {}
-
-          // Refresh usage after scan
-          try {
-            usage = await chrome.runtime.sendMessage({ type: "CHECK_USAGE" });
-            updateUsage(usage);
-            if (usage && !usage.allowed && limitBanner) limitBanner.style.display = "block";
+            if (r?.risk_score !== undefined) showResults(r);
           } catch {}
-
-          btnScan.textContent = "Scan this page";
-          btnScan.disabled = false;
+          try { usage = await chrome.runtime.sendMessage({ type: "CHECK_USAGE" }); updateUsage(usage); } catch {}
+          btnScan.textContent = "Scan this page"; btnScan.disabled = false;
         }, 3000);
-      } catch {
-        btnScan.textContent = "Error — refresh page";
-        btnScan.disabled = false;
-      }
+      } catch { btnScan.textContent = "Error — refresh page"; btnScan.disabled = false; }
     });
   }
 
   // Re-scan
   const btnRescan = document.getElementById("btn-rescan");
-  if (btnRescan) {
-    btnRescan.addEventListener("click", async () => {
-      if (usage && !usage.allowed) { if (limitBanner) limitBanner.style.display = "block"; return; }
-      try { await chrome.tabs.sendMessage(tab.id, { type: "TRIGGER_SCAN" }); } catch {}
-      window.close();
-    });
-  }
+  if (btnRescan) btnRescan.addEventListener("click", async () => {
+    if (usage && !usage.allowed) { if (limitBanner) limitBanner.style.display = "block"; return; }
+    try { await chrome.tabs.sendMessage(tab.id, { type: "TRIGGER_SCAN" }); } catch {} window.close();
+  });
 
   // Details
   const btnDetails = document.getElementById("btn-details");
-  if (btnDetails) {
-    btnDetails.addEventListener("click", () => {
-      try { chrome.sidePanel.open({ tabId: tab.id }); } catch {}
-      window.close();
-    });
-  }
+  if (btnDetails) btnDetails.addEventListener("click", () => {
+    try { chrome.sidePanel.open({ tabId: tab.id }); } catch {} window.close();
+  });
+
+  // Login button
+  const btnLogin = document.getElementById("btn-login");
+  if (btnLogin) btnLogin.addEventListener("click", () => {
+    chrome.tabs.create({ url: "https://clauseguard.com/auth/login" }); // Update with your actual URL
+  });
 });
 
 function showResults(results) {
@@ -97,31 +97,28 @@ function showResults(results) {
   if (rv) rv.style.display = "block";
   if (ev) ev.style.display = "none";
 
-  const scoreEl = document.getElementById("risk-score");
-  if (scoreEl) scoreEl.textContent = results.risk_score;
+  const el = (id) => document.getElementById(id);
+  if (el("risk-score")) el("risk-score").textContent = results.risk_score;
 
   const grade = results.grade || "C";
-  const badge = document.getElementById("grade-badge");
-  if (badge) {
-    badge.className = "grade grade-" + grade.toLowerCase();
-    badge.textContent = "Grade " + grade;
-  }
+  const badge = el("grade-badge");
+  if (badge) { badge.className = "grade grade-" + grade.toLowerCase(); badge.textContent = "Grade " + grade; }
 
-  const bar = document.getElementById("bar-fill");
+  const bar = el("bar-fill");
   if (bar) {
     bar.style.width = results.risk_score + "%";
     bar.className = "bar-fill " + (results.risk_score >= 60 ? "bar-red" : results.risk_score >= 30 ? "bar-amber" : "bar-green");
   }
 
   const counts = { HIGH: 0, MEDIUM: 0, LOW: 0 };
-  (results.results || []).forEach(r => (r.categories || []).forEach(c => {
-    if (counts[c.severity] !== undefined) counts[c.severity]++;
-  }));
-
-  const el = (id) => document.getElementById(id);
+  (results.results || []).forEach(r => (r.categories || []).forEach(c => { if (counts[c.severity] !== undefined) counts[c.severity]++; }));
   if (el("c-high")) el("c-high").textContent = counts.HIGH;
   if (el("c-med")) el("c-med").textContent = counts.MEDIUM;
   if (el("c-low")) el("c-low").textContent = counts.LOW;
+
+  // Show source indicator
+  const src = el("scan-source");
+  if (src) src.textContent = results.source === "api" ? "Legal-BERT" : results.source === "local" ? "Local" : "";
 }
 
 function updateUsage(usage) {
@@ -129,16 +126,14 @@ function updateUsage(usage) {
   const text = document.getElementById("usage-text");
   const fill = document.getElementById("usage-fill");
   if (!text || !fill) return;
-
   if (usage.plan === "free") {
-    text.textContent = "Free: " + usage.used + "/" + usage.limit + " scans";
+    text.textContent = usage.used + "/" + usage.limit + " scans";
     const pct = Math.min(100, (usage.used / usage.limit) * 100);
     fill.style.width = pct + "%";
     if (pct >= 100) fill.style.background = "#ef4444";
     else if (pct >= 70) fill.style.background = "#f59e0b";
   } else {
-    text.textContent = usage.plan.toUpperCase() + " — unlimited";
-    fill.style.width = "100%";
-    fill.style.background = "#22c55e";
+    text.textContent = "Unlimited";
+    fill.style.width = "100%"; fill.style.background = "#22c55e";
   }
 }

web/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Nav } from "@/components/nav";
+import { ExtensionBridge } from "@/components/extension-bridge";
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -21,6 +22,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body className="antialiased text-zinc-900 bg-white">
         <Nav />
         {children}
+        <ExtensionBridge />
       </body>
     </html>
   );

web/components/extension-bridge.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { createClient } from "@/lib/supabase/client";
+
+/**
+ * ExtensionBridge — Add to root layout.
+ * Syncs auth state to ClauseGuard Chrome extension.
+ * Also detects if extension is installed.
+ */
+export function ExtensionBridge() {
+  const [extensionInstalled, setExtensionInstalled] = useState(false);
+  const supabase = createClient();
+
+  useEffect(() => {
+    // Sync auth to extension whenever auth state changes
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(async (event, session) => {
+      if (event === "SIGNED_IN" && session) {
+        // Get user profile for plan info
+        const { data: profile } = await supabase
+          .from("profiles")
+          .select("plan, full_name")
+          .eq("id", session.user.id)
+          .single();
+
+        // Method 1: postMessage (content script picks it up)
+        window.postMessage({
+          type: "CLAUSEGUARD_AUTH_SYNC",
+          token: session.access_token,
+          email: session.user.email || "",
+          name: profile?.full_name || session.user.user_metadata?.full_name || "",
+          userId: session.user.id,
+          plan: profile?.plan || "free",
+        }, "*");
+      }
+
+      if (event === "SIGNED_OUT") {
+        window.postMessage({ type: "CLAUSEGUARD_AUTH_SYNC", token: "", email: "", name: "", userId: "", plan: "free" }, "*");
+      }
+    });
+
+    // Also sync on initial load if already logged in
+    supabase.auth.getUser().then(async ({ data: { user } }) => {
+      if (user) {
+        const { data: session } = await supabase.auth.getSession();
+        const { data: profile } = await supabase.from("profiles").select("plan, full_name").eq("id", user.id).single();
+
+        window.postMessage({
+          type: "CLAUSEGUARD_AUTH_SYNC",
+          token: session.session?.access_token || "",
+          email: user.email || "",
+          name: profile?.full_name || "",
+          userId: user.id,
+          plan: profile?.plan || "free",
+        }, "*");
+      }
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  // This component renders nothing — it's purely for side effects
+  return null;
+}