bump: v1.7.21
- Element inspector (pick, screenshot, audit) at top of Tools tab - CDP bridge evaluate fix (Runtime.enable + returnByValue) - Screenshot fallback to captureVisibleTab - Firefox: bridge.status, zap.status handlers in background - Build info panel in Settings (version, browser, CDP/MCP status) - Version shown in footer - Services panel moved to bottom
This commit is contained in:
Hanzo Dev
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "hanzo-ai-monorepo",
|
||||
"version": "1.7.20",
|
||||
"version": "1.7.21",
|
||||
"private": true,
|
||||
"description": "Hanzo AI Development Platform Monorepo",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@hanzo/browser-extension",
|
||||
"version": "1.7.20",
|
||||
"version": "1.7.21",
|
||||
"description": "Hanzo AI Browser Extension",
|
||||
"main": "dist/background.js",
|
||||
"scripts": {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "Hanzo AI",
|
||||
"version": "1.7.20",
|
||||
"version": "1.7.21",
|
||||
"description": "AI-powered dev assistant — click-to-code navigation, source maps, WebGPU AI, and MCP integration for Claude Code.",
|
||||
"permissions": [
|
||||
"activeTab",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "Hanzo AI",
|
||||
"version": "1.7.20",
|
||||
"version": "1.7.21",
|
||||
"description": "AI-powered dev assistant — click-to-code navigation, source maps, WebGPU AI, and MCP integration for Claude Code.",
|
||||
"permissions": [
|
||||
"activeTab",
|
||||
|
||||
+154
-101
@@ -1,20 +1,23 @@
|
||||
/* Hanzo AI Browser Extension Popup — Monochrome Vibrancy */
|
||||
/* Hanzo AI Browser Extension Popup — Refined Monochrome */
|
||||
|
||||
:root {
|
||||
--primary: #FFFFFF;
|
||||
--primary-dark: #D4D4D4;
|
||||
--primary-dark: #E0E0E0;
|
||||
--bg: #000000;
|
||||
--surface: #0A0A0A;
|
||||
--surface-light: #1A1A1A;
|
||||
--text: #FFFFFF;
|
||||
--text-dim: #888888;
|
||||
--text-secondary: #A0A0A0;
|
||||
--text-dim: #666666;
|
||||
--border: rgba(255,255,255,0.08);
|
||||
--border-strong: rgba(255,255,255,0.14);
|
||||
--border-strong: rgba(255,255,255,0.16);
|
||||
--glass: rgba(255,255,255,0.04);
|
||||
--glass-strong: rgba(255,255,255,0.07);
|
||||
--success: #4CAF50;
|
||||
--warning: #FFC107;
|
||||
--error: #F44336;
|
||||
--link: #A0A0A0;
|
||||
--link-hover: #FFFFFF;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -24,11 +27,11 @@
|
||||
}
|
||||
|
||||
body {
|
||||
width: 380px;
|
||||
width: 360px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@@ -36,7 +39,7 @@ body {
|
||||
|
||||
.container {
|
||||
background: var(--surface);
|
||||
min-height: 500px;
|
||||
min-height: 480px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -47,7 +50,7 @@ body {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 120px;
|
||||
height: 100px;
|
||||
background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.03) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -71,15 +74,15 @@ body {
|
||||
|
||||
@keyframes glowPulse {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
|
||||
50% { box-shadow: 0 0 12px 2px rgba(255,255,255,0.06); }
|
||||
50% { box-shadow: 0 0 8px 1px rgba(255,255,255,0.05); }
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
gap: 10px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: rgba(0,0,0,0.6);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
@@ -89,33 +92,36 @@ header {
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
color: var(--text);
|
||||
filter: drop-shadow(0 0 6px rgba(255,255,255,0.15));
|
||||
filter: drop-shadow(0 0 4px rgba(255,255,255,0.12));
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.section {
|
||||
padding: 20px;
|
||||
padding: 16px;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -126,7 +132,8 @@ h3 {
|
||||
|
||||
.subtitle {
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
@@ -136,17 +143,22 @@ h3 {
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
padding: 10px 14px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: #000000;
|
||||
@@ -161,13 +173,13 @@ h3 {
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-dark);
|
||||
box-shadow: 0 0 16px rgba(255,255,255,0.12);
|
||||
box-shadow: 0 0 12px rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.btn-primary:hover::after {
|
||||
@@ -178,19 +190,28 @@ h3 {
|
||||
background: var(--glass-strong);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--glass);
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-color: var(--border-strong);
|
||||
box-shadow: 0 0 8px rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
color: var(--text);
|
||||
border-color: var(--border-strong);
|
||||
background: var(--glass);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -209,32 +230,30 @@ h3 {
|
||||
}
|
||||
|
||||
.btn-icon svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* User Info */
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
background: var(--glass-strong);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
border: 1px solid var(--border);
|
||||
@@ -246,35 +265,35 @@ h3 {
|
||||
|
||||
.user-name {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.user-email {
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* Features */
|
||||
/* Features — compact toggles */
|
||||
.features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.feature-toggle label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: var(--glass-strong);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.feature-toggle label:hover {
|
||||
background: var(--glass);
|
||||
border-color: var(--border-strong);
|
||||
background: var(--glass-strong);
|
||||
}
|
||||
|
||||
.feature-toggle input {
|
||||
@@ -283,11 +302,11 @@ h3 {
|
||||
|
||||
.toggle {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 12px;
|
||||
transition: background 0.3s;
|
||||
width: 32px;
|
||||
height: 18px;
|
||||
background: rgba(255,255,255,0.12);
|
||||
border-radius: 9px;
|
||||
transition: background 0.25s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -296,12 +315,12 @@ h3 {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: white;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #888;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
|
||||
transition: all 0.25s;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
input:checked + .toggle {
|
||||
@@ -309,54 +328,62 @@ input:checked + .toggle {
|
||||
}
|
||||
|
||||
input:checked + .toggle::after {
|
||||
transform: translateX(20px);
|
||||
transform: translateX(14px);
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.feature-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.feature-info strong {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.feature-info small {
|
||||
display: block;
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Status */
|
||||
.status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.1);
|
||||
background: rgba(255,255,255,0.12);
|
||||
transition: all 0.3s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-dot.connected {
|
||||
background: var(--success);
|
||||
box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
|
||||
animation: glowPulse 3s infinite;
|
||||
box-shadow: 0 0 6px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.status-dot.warning {
|
||||
background: var(--warning);
|
||||
box-shadow: 0 0 8px rgba(255, 193, 7, 0.2);
|
||||
box-shadow: 0 0 6px rgba(255, 193, 7, 0.2);
|
||||
}
|
||||
|
||||
.status-dot.error {
|
||||
background: var(--error);
|
||||
box-shadow: 0 0 8px rgba(244, 67, 54, 0.2);
|
||||
box-shadow: 0 0 6px rgba(244, 67, 54, 0.2);
|
||||
}
|
||||
|
||||
.status-dot.connecting {
|
||||
@@ -365,54 +392,56 @@ input:checked + .toggle::after {
|
||||
|
||||
.status-detail {
|
||||
margin-left: auto;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.actions .btn {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
/* Guide */
|
||||
.guide {
|
||||
background: var(--glass-strong);
|
||||
background: var(--glass);
|
||||
border: 1px solid var(--border);
|
||||
padding: 16px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.guide h3 {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.guide p {
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 2px 6px;
|
||||
padding: 1px 5px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
border-radius: 3px;
|
||||
font-family: 'SF Mono', 'Menlo', monospace;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* Settings */
|
||||
.settings-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.settings-header h2 {
|
||||
@@ -420,12 +449,12 @@ kbd {
|
||||
}
|
||||
|
||||
.setting-group {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.setting-group label {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 10px;
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -434,12 +463,12 @@ kbd {
|
||||
.setting-group input[type="number"],
|
||||
.setting-group select {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
padding: 7px 10px;
|
||||
background: var(--glass-strong);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
margin-top: 4px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
@@ -466,17 +495,17 @@ kbd {
|
||||
|
||||
.backend-select-wrapper select {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
padding: 7px 10px;
|
||||
background: var(--glass-strong);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
background-position: right 10px center;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
@@ -489,8 +518,8 @@ kbd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
@@ -498,23 +527,47 @@ kbd {
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
margin: 16px 0;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.help-text {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin-top: 16px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.help-text a {
|
||||
color: var(--text-dim);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
color: var(--link);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(160,160,160,0.3);
|
||||
text-underline-offset: 2px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.help-text a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration-color: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
/* Footer links */
|
||||
.footer-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: var(--text-dim);
|
||||
text-decoration: none;
|
||||
font-size: 11px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--text);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<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/register" target="_blank">Create account</a> ·
|
||||
<a href="https://hanzo.id/forgot" target="_blank">Forgot password?</a>
|
||||
</p>
|
||||
</div>
|
||||
@@ -48,21 +48,24 @@
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
|
||||
<!-- Open Chat Panel -->
|
||||
<button id="open-panel" class="btn btn-primary" style="margin-bottom: 16px;">
|
||||
<!-- Actions -->
|
||||
<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;">
|
||||
<button id="open-page-overlay" class="btn btn-ghost" style="margin-bottom: 12px;">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path d="M4 4h16v12H8l-4 4V4z"/>
|
||||
</svg>
|
||||
Toggle On-Page Overlay
|
||||
</button>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- Features -->
|
||||
<h3>Features</h3>
|
||||
<div class="features">
|
||||
<div class="feature-toggle">
|
||||
<label>
|
||||
@@ -113,7 +116,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>
|
||||
@@ -132,6 +135,7 @@
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- Connection Status -->
|
||||
<h3>Status</h3>
|
||||
<div class="status">
|
||||
<div class="status-item">
|
||||
<span class="status-dot" id="zap-status"></span>
|
||||
@@ -159,15 +163,15 @@
|
||||
|
||||
<!-- 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>Alt</kbd> + <kbd>Click</kbd> any element to jump to source</p>
|
||||
<p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd> open Hanzo panel</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -228,14 +232,16 @@
|
||||
</div>
|
||||
|
||||
<button id="save-settings" class="btn btn-primary">Save Settings</button>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user