@hanzo/browser-extension 1.7.6 → 1.9.33

package/src/popup.html

@@ -20,48 +20,160 @@
     </header>
 
     <!-- Login Section -->
-    <div id="login-section" class="section">
-      <h2>Sign In</h2>
-      <p class="subtitle">Connect to your Hanzo AI account</p>
-      <button id="login-btn" class="btn btn-primary">Sign in with Hanzo</button>
-      <p class="help-text">
-        <a href="https://hanzo.id/register" target="_blank">Create account</a> •
-        <a href="https://hanzo.id/forgot" target="_blank">Forgot password?</a>
-      </p>
+    <div id="login-section" class="section login-section">
+      <div class="login-card">
+        <svg class="login-logo" viewBox="0 0 67 67" xmlns="http://www.w3.org/2000/svg">
+          <path d="M22.21 67V44.6369H0V67H22.21Z" fill="currentColor"/>
+          <path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" fill="currentColor"/>
+          <path d="M22.21 0H0V22.3184H22.21V0Z" fill="currentColor"/>
+          <path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill="currentColor"/>
+          <path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill="currentColor"/>
+        </svg>
+        <h2 class="login-headline">Sign in to Hanzo AI</h2>
+        <p class="login-sub">Chat with AI, use browser tools, and build with agents.</p>
+        <button id="login-btn" class="login-signin-btn">Sign In</button>
+        <button id="signup-btn-popup" class="login-create-btn">Create account</button>
+        <p class="login-note">
+          Browser tools work without sign-in. <a href="https://docs.hanzo.ai" target="_blank">Learn more</a>
+        </p>
+      </div>
     </div>
 
     <!-- Main Section (shown after login) -->
     <div id="main-section" class="section hidden">
-      <div class="user-info">
-        <img id="user-avatar" class="avatar" src="" alt="">
-        <div>
-          <div id="user-name" class="user-name"></div>
-          <div id="user-email" class="user-email"></div>
+      <div id="user-info-section" class="hidden">
+        <div class="user-info">
+          <img id="user-avatar" class="avatar" src="" alt="">
+          <div>
+            <div id="user-name" class="user-name"></div>
+            <div id="user-email" class="user-email"></div>
+          </div>
+          <button id="logout-btn" class="btn-icon" title="Sign out">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/>
+            </svg>
+          </button>
         </div>
-        <button id="logout-btn" class="btn-icon" title="Sign out">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
-            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/>
-          </svg>
-        </button>
+        <div class="divider"></div>
       </div>
 
-      <div class="divider"></div>
+      <!-- Embedded search: run a query through the Hanzo answer engine. -->
+      <form id="search-form" style="display:flex;gap:6px;margin-bottom:10px;">
+        <input id="search-input" type="text" placeholder="Search Hanzo AI…" autocomplete="off"
+          style="flex:1;min-width:0;padding:9px 12px;background:var(--surface-light,#171717);border:1px solid var(--border,rgba(255,255,255,0.12));border-radius:8px;color:var(--text,#fafafa);font-size:13px;font-family:inherit;outline:none;">
+        <button id="search-btn" type="submit" title="Search" aria-label="Search"
+          style="width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--primary,#fafafa);border:none;border-radius:8px;color:#000;cursor:pointer;">
+          <svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8">
+            <circle cx="7" cy="7" r="4.5"/><path d="M11 11l3.5 3.5" stroke-linecap="round"/>
+          </svg>
+        </button>
+      </form>
 
-      <!-- Open Chat Panel -->
-      <button id="open-panel" class="btn btn-primary" style="margin-bottom: 16px;">
+      <!-- Actions: single Open Chat button + on-page surface settings. -->
+      <button id="open-panel" class="btn btn-secondary" style="margin-bottom: 8px;">
         <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
           <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
         </svg>
-        Open Chat Panel
-      </button>
-      <button id="open-page-overlay" class="btn btn-secondary" style="margin-bottom: 16px;">
-        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-          <path d="M4 4h16v12H8l-4 4V4z"/>
-        </svg>
-        Toggle On-Page Overlay
+        Open Chat
       </button>
 
+      <!-- On-page chat config -->
+      <div class="onpage-config" style="display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:11px;">
+        <div class="feature-toggle" style="display:flex;justify-content:space-between;align-items:center;">
+          <label style="display:flex;align-items:center;gap:6px;cursor:pointer;">
+            <input type="checkbox" id="overlay-enabled" checked>
+            <span>On-page chat panel</span>
+          </label>
+          <span style="color:var(--text-muted,#888);font-size:10px;">overlay vs new tab</span>
+        </div>
+
+        <div id="overlay-side-row" class="side-picker" style="display:flex;gap:6px;align-items:center;">
+          <span style="color:var(--text-muted,#888);">Pin:</span>
+          <button id="pin-left" class="btn btn-ghost" style="flex:1;padding:4px 8px;font-size:11px;">Left</button>
+          <button id="pin-right" class="btn btn-ghost" style="flex:1;padding:4px 8px;font-size:11px;" data-active="true">Right</button>
+        </div>
+
+        <div id="overlay-width-row" style="display:flex;gap:6px;align-items:center;">
+          <span style="color:var(--text-muted,#888);">Width:</span>
+          <button class="btn btn-ghost width-btn" data-width="compact" style="flex:1;padding:4px 8px;font-size:11px;">Compact</button>
+          <button class="btn btn-ghost width-btn" data-width="default" style="flex:1;padding:4px 8px;font-size:11px;" data-active="true">Default</button>
+          <button class="btn btn-ghost width-btn" data-width="wide" style="flex:1;padding:4px 8px;font-size:11px;">Wide</button>
+        </div>
+
+        <span style="color:var(--text-muted,#888);font-size:10px;line-height:1.4;">
+          FF native sidebar: View → Sidebar → Hanzo AI.<br>
+          Disable to fall back to a standalone tab — useful on sites with strict CSP.
+        </span>
+      </div>
+
+      <div class="divider"></div>
+
+      <!-- AI Usage (Claude + Codex, from the current browser session) -->
+      <div class="usage-header" style="display:flex;align-items:center;justify-content:space-between;">
+        <h3>AI Usage</h3>
+        <button id="usage-refresh" class="btn-icon" title="Refresh usage">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M23 4v6h-6M1 20v-6h6"/>
+            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+          </svg>
+        </button>
+      </div>
+      <div id="usage-list" class="usage-list" style="display:flex;flex-direction:column;gap:8px;"></div>
+      <a href="https://console.hanzo.ai/ai-accounts" target="_blank"
+         style="display:inline-block;margin-top:8px;font-size:11px;color:var(--text-muted,#888);">Manage AI accounts →</a>
+
+      <div class="divider"></div>
+
+      <!-- Tools -->
+      <h3>Tools</h3>
+      <div class="tools-grid">
+        <button id="tool-picker" class="tool-btn" title="Pick an element on the page">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/>
+            <path d="M13 13l6 6"/>
+          </svg>
+          <span>Selector</span>
+        </button>
+        <button id="tool-screenshot" class="tool-btn" title="Capture visible page">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
+            <circle cx="12" cy="13" r="4"/>
+          </svg>
+          <span>Screenshot</span>
+        </button>
+        <button id="tool-pageinfo" class="tool-btn" title="Copy page info to clipboard">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <circle cx="12" cy="12" r="10"/>
+            <path d="M12 16v-4M12 8h.01"/>
+          </svg>
+          <span>Page Info</span>
+        </button>
+        <button id="tool-accessibility" class="tool-btn" title="Run accessibility audit">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <circle cx="12" cy="4" r="2"/>
+            <path d="M12 6v6M8 8l4 2 4-2M8 22l2-6h4l2 6"/>
+          </svg>
+          <span>A11y Audit</span>
+        </button>
+        <button id="tool-performance" class="tool-btn" title="Run performance audit">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
+          </svg>
+          <span>Perf Audit</span>
+        </button>
+        <button id="tool-console" class="tool-btn" title="Evaluate JS in page context">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <polyline points="4 17 10 11 4 5"/>
+            <line x1="12" y1="19" x2="20" y2="19"/>
+          </svg>
+          <span>Console</span>
+        </button>
+      </div>
+
+      <div class="divider"></div>
+
       <!-- Features -->
+      <h3>Features</h3>
       <div class="features">
         <div class="feature-toggle">
           <label>
@@ -112,7 +224,7 @@
 
       <!-- Browser Backend -->
       <div class="setting-group backend-picker">
-        <h3>Browser Backend</h3>
+        <h3>Backend</h3>
         <div class="backend-select-wrapper">
           <select id="browser-backend">
             <option value="auto">Auto (default)</option>
@@ -131,22 +243,23 @@
       <div class="divider"></div>
 
       <!-- Connection Status -->
+      <h3>Status</h3>
       <div class="status">
         <div class="status-item">
           <span class="status-dot" id="zap-status"></span>
-          <span>ZAP Protocol</span>
+          <span>ZAP Bridge</span>
           <span id="zap-detail" class="status-detail">Discovering...</span>
         </div>
-        <div class="status-item">
-          <span class="status-dot" id="mcp-status"></span>
-          <span>MCP Server</span>
-          <span id="mcp-port" class="status-detail">Fallback</span>
-        </div>
         <div class="status-item">
           <span class="status-dot" id="cdp-status"></span>
           <span>CDP Bridge</span>
           <span id="cdp-detail" class="status-detail">Checking...</span>
         </div>
+        <div class="status-item">
+          <span class="status-dot" id="mcp-status"></span>
+          <span>MCP Bridge</span>
+          <span id="mcp-port" class="status-detail">:9224</span>
+        </div>
         <div class="status-item">
           <span class="status-dot" id="gpu-status"></span>
           <span>WebGPU</span>
@@ -158,15 +271,19 @@
 
       <!-- Actions -->
       <div class="actions">
-        <button id="test-connection" class="btn btn-secondary">Test Connection</button>
-        <button id="open-settings" class="btn btn-secondary">Settings</button>
+        <button id="test-connection" class="btn btn-ghost">Test Connection</button>
+        <button id="open-settings" class="btn btn-ghost">Settings</button>
       </div>
 
       <!-- Quick Guide -->
-      <div class="guide" style="margin-top: 16px;">
-        <h3>Quick Guide</h3>
-        <p><kbd>Alt</kbd> + <kbd>Click</kbd> any element to navigate to source</p>
-        <p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd> to open Hanzo AI panel</p>
+      <div class="guide" style="margin-top: 12px;">
+        <h3 style="text-transform: none; letter-spacing: 0; color: var(--text);">Shortcuts</h3>
+        <p>
+          <kbd id="inspect-shortcut-display">Ctrl</kbd> + <kbd>Click</kbd>
+          any element to jump to source
+          <button id="record-inspect-shortcut" class="btn-link" style="margin-left:6px;font-size:11px;">edit</button>
+        </p>
+        <p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd> open Hanzo panel</p>
       </div>
     </div>
 
@@ -226,15 +343,37 @@
           </label>
         </div>
 
-        <button id="save-settings" class="btn btn-primary">Save Settings</button>
+        <div class="setting-group">
+          <h3>Keyboard</h3>
+          <label>
+            Inspect modifier
+            <div style="display:flex;gap:8px;align-items:center;margin-top:4px;">
+              <kbd id="inspect-shortcut-current" style="flex:1;font-family:monospace;padding:4px 8px;background:var(--surface-2,#222);border-radius:4px;font-size:12px;">Ctrl</kbd>
+              <button id="inspect-shortcut-record" type="button" class="btn btn-ghost" style="padding:4px 10px;">Record</button>
+              <button id="inspect-shortcut-reset" type="button" class="btn btn-ghost" style="padding:4px 10px;">Reset</button>
+            </div>
+            <small style="color:var(--text-muted,#888);font-size:11px;">
+              Hold + click any element on a page to jump to its source. Default
+              is Ctrl (or ⌘ on Mac). Click "Record" then press the chord you
+              want — modifiers alone or modifier+letter both work.
+            </small>
+          </label>
+        </div>
 
-        <p class="help-text" style="margin-top: 16px;">
-          <a href="https://console.hanzo.ai" target="_blank">Console</a> •
-          <a href="https://billing.hanzo.ai" target="_blank">Billing</a> •
-          <a href="https://docs.hanzo.ai" target="_blank">Docs</a>
-        </p>
+        <button id="save-settings" class="btn btn-primary">Save Settings</button>
       </div>
     </div>
+
+    <!-- Footer: version + nav links -->
+    <div class="footer-version" style="text-align:center;font-size:10px;color:var(--text-muted,#888);margin-top:14px;letter-spacing:0.04em;">
+      Hanzo AI <span id="footer-version">…</span>
+    </div>
+    <div class="footer-links">
+      <a href="https://docs.hanzo.ai" target="_blank">Docs</a>
+      <a href="https://console.hanzo.ai" target="_blank">Console</a>
+      <a href="https://github.com/hanzoai/extension" target="_blank">GitHub</a>
+      <a href="https://hanzo.ai" target="_blank">hanzo.ai</a>
+    </div>
   </div>
 
   <script src="popup.js"></script>

package/src/popup.js

@@ -0,0 +1,196 @@
+// Hanzo AI — Popup Script
+// Uses background message passing for auth (not direct storage access).
+
+document.addEventListener('DOMContentLoaded', () => {
+  const loginSection = document.getElementById('login-section');
+  const mainSection = document.getElementById('main-section');
+  const settingsSection = document.getElementById('settings-section');
+
+  // Auth
+  const loginBtn = document.getElementById('login-btn');
+  const logoutBtn = document.getElementById('logout-btn');
+
+  // Open panel
+  const openPanel = document.getElementById('open-panel');
+
+  // Status dots
+  const zapStatus = document.getElementById('zap-status');
+  const zapDetail = document.getElementById('zap-detail');
+  const mcpStatus = document.getElementById('mcp-status');
+  const mcpPort = document.getElementById('mcp-port');
+  const cdpStatus = document.getElementById('cdp-status');
+  const cdpDetail = document.getElementById('cdp-detail');
+  const gpuStatus = document.getElementById('gpu-status');
+  const gpuDetail = document.getElementById('gpu-detail');
+
+  // Settings
+  const openSettings = document.getElementById('open-settings');
+  const backBtn = document.getElementById('back-btn');
+  const saveSettings = document.getElementById('save-settings');
+  const testConnection = document.getElementById('test-connection');
+
+  // --- Auth via background ---
+  function checkAuth() {
+    // Always show main section and status (tools work without login)
+    mainSection.classList.remove('hidden');
+    refreshStatus();
+
+    chrome.runtime.sendMessage({ action: 'auth.status' }, (response) => {
+      if (chrome.runtime.lastError) return;
+      if (response?.success && response.authenticated) {
+        loginSection.classList.add('hidden');
+        if (response.user) {
+          const avatar = document.getElementById('user-avatar');
+          const name = document.getElementById('user-name');
+          const email = document.getElementById('user-email');
+          avatar.src = response.user.picture || response.user.avatar || 'icon48.png';
+          name.textContent = response.user.name || response.user.displayName || 'Hanzo User';
+          email.textContent = response.user.email || '';
+        }
+      } else {
+        loginSection.classList.remove('hidden');
+      }
+    });
+  }
+
+  loginBtn?.addEventListener('click', () => {
+    loginBtn.disabled = true;
+    loginBtn.textContent = 'Signing in...';
+    chrome.runtime.sendMessage({ action: 'auth.login' }, (response) => {
+      loginBtn.disabled = false;
+      loginBtn.innerHTML = '<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg> Sign in with Hanzo';
+      if (response?.success) {
+        checkAuth();
+      }
+    });
+  });
+
+  logoutBtn?.addEventListener('click', () => {
+    chrome.runtime.sendMessage({ action: 'auth.logout' }, () => {
+      mainSection.classList.add('hidden');
+      loginSection.classList.remove('hidden');
+    });
+  });
+
+  // --- Open side panel ---
+  openPanel?.addEventListener('click', () => {
+    if (chrome.sidePanel) {
+      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+        if (tabs[0]?.id) {
+          chrome.sidePanel.open({ tabId: tabs[0].id });
+          window.close();
+        }
+      });
+    } else if (typeof browser !== 'undefined' && browser.sidebarAction) {
+      browser.sidebarAction.open();
+      window.close();
+    } else {
+      chrome.tabs.create({ url: chrome.runtime.getURL('sidebar.html') });
+      window.close();
+    }
+  });
+
+  // --- Status ---
+  function refreshStatus() {
+    // ZAP status
+    chrome.runtime.sendMessage({ action: 'zap.status' }, (response) => {
+      if (chrome.runtime.lastError) return;
+      if (response?.success) {
+        const zap = response.zap;
+        if (zap.connected) {
+          zapStatus.classList.add('connected');
+          zapStatus.classList.remove('disconnected');
+          const mcpCount = zap.mcps?.length || 0;
+          const toolCount = zap.mcps?.reduce((sum, m) => sum + (m.tools?.length || 0), 0) || 0;
+          zapDetail.textContent = `${mcpCount} MCP(s), ${toolCount} tools`;
+        } else {
+          zapStatus.classList.remove('connected');
+          zapStatus.classList.add('disconnected');
+          zapDetail.textContent = 'Not connected';
+        }
+      }
+    });
+
+    // GPU status
+    chrome.runtime.sendMessage({ action: 'runLocalAI', prompt: '' }, (response) => {
+      if (chrome.runtime.lastError) return;
+      gpuStatus.classList.add(response?.success ? 'connected' : 'disconnected');
+      gpuStatus.classList.remove(response?.success ? 'disconnected' : 'connected');
+      gpuDetail.textContent = response?.success ? 'Available' : 'Not available';
+    });
+
+    // MCP/CDP — set as active for now (checked via ZAP)
+    mcpStatus.classList.add('connected');
+    mcpPort.textContent = 'Fallback';
+    cdpStatus.classList.add('connected');
+    cdpDetail.textContent = 'Active';
+  }
+
+  // --- Settings ---
+  openSettings?.addEventListener('click', () => {
+    mainSection.classList.add('hidden');
+    settingsSection.classList.remove('hidden');
+    loadSettings();
+  });
+
+  backBtn?.addEventListener('click', () => {
+    settingsSection.classList.add('hidden');
+    mainSection.classList.remove('hidden');
+  });
+
+  function loadSettings() {
+    chrome.storage.local.get(['mcpPort', 'cdpPort', 'zapPorts'], (result) => {
+      const mcpPortInput = document.getElementById('mcp-port-setting');
+      const cdpPortInput = document.getElementById('cdp-port-setting');
+      const zapPortsInput = document.getElementById('zap-ports-setting');
+
+      if (mcpPortInput) mcpPortInput.value = result.mcpPort || 3001;
+      if (cdpPortInput) cdpPortInput.value = result.cdpPort || 9223;
+      if (zapPortsInput) zapPortsInput.value = (result.zapPorts || [9999, 9998, 9997, 9996, 9995]).join(',');
+    });
+  }
+
+  saveSettings?.addEventListener('click', () => {
+    const mcpPortVal = parseInt(document.getElementById('mcp-port-setting')?.value) || 3001;
+    const cdpPortVal = parseInt(document.getElementById('cdp-port-setting')?.value) || 9223;
+    const zapPortsVal = (document.getElementById('zap-ports-setting')?.value || '')
+      .split(',').map(p => parseInt(p.trim())).filter(p => p > 0 && p < 65536);
+
+    chrome.storage.local.set({
+      mcpPort: mcpPortVal,
+      cdpPort: cdpPortVal,
+      zapPorts: zapPortsVal.length ? zapPortsVal : [9999, 9998, 9997, 9996, 9995],
+    }, () => {
+      saveSettings.textContent = 'Saved!';
+      setTimeout(() => { saveSettings.textContent = 'Save Settings'; }, 1500);
+    });
+  });
+
+  // --- Test Connection ---
+  testConnection?.addEventListener('click', () => {
+    testConnection.textContent = 'Testing...';
+    testConnection.disabled = true;
+
+    chrome.runtime.sendMessage({ action: 'zap.discover' }, () => {
+      refreshStatus();
+      testConnection.textContent = 'Test Connection';
+      testConnection.disabled = false;
+    });
+  });
+
+  // Feature toggles
+  ['source-maps', 'webgpu-ai', 'browser-control', 'tab-filesystem'].forEach(id => {
+    const checkbox = document.getElementById(id);
+    if (checkbox) {
+      chrome.storage.local.get([id], (result) => {
+        checkbox.checked = result[id] !== false; // default on
+      });
+      checkbox.addEventListener('change', () => {
+        chrome.storage.local.set({ [id]: checkbox.checked });
+      });
+    }
+  });
+
+  // Init
+  checkAuth();
+});