@hanzo/browser-extension 1.7.5 → 1.9.31

package/dist/browser-extension/firefox/popup.html

@@ -20,48 +20,132 @@
     </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>
-
-      <!-- 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>
+
+      <!-- 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 +196,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 +215,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 +243,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 +315,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>