@hanzo/browser-extension 1.7.5 → 1.9.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (133) hide show
  1. package/LICENSE +9 -18
  2. package/dist/browser-extension/README.md +1 -1
  3. package/dist/browser-extension/background-firefox.js +4184 -491
  4. package/dist/browser-extension/background.js +6938 -2413
  5. package/dist/browser-extension/browser-control.js +652 -18
  6. package/dist/browser-extension/chrome/background.js +6938 -2413
  7. package/dist/browser-extension/chrome/content-script.js +1642 -123
  8. package/dist/browser-extension/chrome/icon128.png +0 -0
  9. package/dist/browser-extension/chrome/icon16.png +0 -0
  10. package/dist/browser-extension/chrome/icon48.png +0 -0
  11. package/dist/browser-extension/chrome/manifest.json +20 -11
  12. package/dist/browser-extension/chrome/popup.css +352 -110
  13. package/dist/browser-extension/chrome/popup.html +159 -48
  14. package/dist/browser-extension/chrome/popup.js +1418 -46
  15. package/dist/browser-extension/chrome/sidebar.css +772 -156
  16. package/dist/browser-extension/chrome/sidebar.html +268 -85
  17. package/dist/browser-extension/chrome/sidebar.js +25846 -84
  18. package/dist/browser-extension/cli.js +2 -2
  19. package/dist/browser-extension/content-script.js +1642 -123
  20. package/dist/browser-extension/firefox/background.js +4184 -491
  21. package/dist/browser-extension/firefox/content-script.js +1642 -123
  22. package/dist/browser-extension/firefox/icon128.png +0 -0
  23. package/dist/browser-extension/firefox/icon16.png +0 -0
  24. package/dist/browser-extension/firefox/icon48.png +0 -0
  25. package/dist/browser-extension/firefox/manifest.json +24 -13
  26. package/dist/browser-extension/firefox/popup.css +352 -110
  27. package/dist/browser-extension/firefox/popup.html +159 -48
  28. package/dist/browser-extension/firefox/popup.js +1418 -46
  29. package/dist/browser-extension/firefox/sidebar.css +772 -156
  30. package/dist/browser-extension/firefox/sidebar.html +268 -85
  31. package/dist/browser-extension/firefox/sidebar.js +25846 -84
  32. package/dist/browser-extension/icon128.png +0 -0
  33. package/dist/browser-extension/icon16.png +0 -0
  34. package/dist/browser-extension/icon48.png +0 -0
  35. package/dist/browser-extension/manifest.json +20 -11
  36. package/dist/browser-extension/package.json +1 -1
  37. package/dist/browser-extension/popup.js +1418 -46
  38. package/dist/browser-extension/safari/Info.plist +3 -3
  39. package/dist/browser-extension/safari/background.js +6938 -2413
  40. package/dist/browser-extension/safari/content-script.js +1642 -123
  41. package/dist/browser-extension/safari/icon128.png +0 -0
  42. package/dist/browser-extension/safari/icon16.png +0 -0
  43. package/dist/browser-extension/safari/icon48.png +0 -0
  44. package/dist/browser-extension/safari/popup.css +352 -110
  45. package/dist/browser-extension/safari/popup.html +159 -48
  46. package/dist/browser-extension/safari/popup.js +1418 -46
  47. package/dist/browser-extension/safari/sidebar.css +772 -156
  48. package/dist/browser-extension/safari/sidebar.html +268 -85
  49. package/dist/browser-extension/safari/sidebar.js +25846 -84
  50. package/dist/browser-extension/sidebar.js +25846 -84
  51. package/dist/browser-extension/webgpu-ai.js +78 -5
  52. package/images/icon128.png +0 -0
  53. package/images/icon16.png +0 -0
  54. package/images/icon48.png +0 -0
  55. package/manifest.json +7 -2
  56. package/package.json +27 -10
  57. package/src/chat-widget.tsx +96 -0
  58. package/src/gui-primitives.tsx +116 -0
  59. package/src/icon128.png +0 -0
  60. package/src/icon16.png +0 -0
  61. package/src/icon32.png +0 -0
  62. package/src/icon48.png +0 -0
  63. package/src/manifest-firefox.json +23 -12
  64. package/src/manifest.json +19 -10
  65. package/src/package.json +1 -1
  66. package/src/popup.css +352 -110
  67. package/src/popup.html +159 -48
  68. package/src/popup.js +196 -0
  69. package/src/sidebar.css +772 -156
  70. package/src/sidebar.html +268 -85
  71. package/src/sidebar.js +885 -0
  72. package/.github/workflows/docs.yml +0 -44
  73. package/.github/workflows/release.yml +0 -55
  74. package/README.md +0 -126
  75. package/dist/browser-extension/ai-worker.js +0 -30
  76. package/dist/browser-extension/cdp-bridge-server.js +0 -444
  77. package/dist/browser-extension/chrome/icon32.png +0 -0
  78. package/dist/browser-extension/firefox/icon32.png +0 -0
  79. package/dist/browser-extension/hanzo-browser-extension-firefox-1.1.0.zip +0 -0
  80. package/dist/browser-extension/icon32.png +0 -0
  81. package/dist/browser-extension/popup.css +0 -468
  82. package/dist/browser-extension/popup.html +0 -191
  83. package/dist/browser-extension/safari/icon32.png +0 -0
  84. package/dist/browser-extension/sidebar.css +0 -718
  85. package/dist/browser-extension/sidebar.html +0 -184
  86. package/dist/cdp-bridge-server.js +0 -411
  87. package/dist/hanzo-ai-chrome-1.7.2.zip +0 -0
  88. package/dist/hanzo-ai-chrome-1.7.3.zip +0 -0
  89. package/dist/hanzo-ai-firefox-1.7.2.zip +0 -0
  90. package/dist/hanzo-ai-firefox-1.7.3.zip +0 -0
  91. package/dist/safari/Hanzo AI/Hanzo AI.xcodeproj/project.pbxproj +0 -1047
  92. package/dist/safari/Hanzo AI/Hanzo AI.xcodeproj/project.xcworkspace/contents.xcworkspacedata +0 -7
  93. package/dist/safari/Hanzo AI/Shared (App)/Assets.xcassets/AccentColor.colorset/Contents.json +0 -11
  94. package/dist/safari/Hanzo AI/Shared (App)/Assets.xcassets/AppIcon.appiconset/Contents.json +0 -98
  95. package/dist/safari/Hanzo AI/Shared (App)/Assets.xcassets/AppIcon.appiconset/mac-icon-128@1x.png +0 -0
  96. package/dist/safari/Hanzo AI/Shared (App)/Assets.xcassets/AppIcon.appiconset/mac-icon-128@2x.png +0 -0
  97. package/dist/safari/Hanzo AI/Shared (App)/Assets.xcassets/AppIcon.appiconset/mac-icon-16@1x.png +0 -0
  98. package/dist/safari/Hanzo AI/Shared (App)/Assets.xcassets/AppIcon.appiconset/mac-icon-16@2x.png +0 -0
  99. package/dist/safari/Hanzo AI/Shared (App)/Assets.xcassets/AppIcon.appiconset/mac-icon-256@1x.png +0 -0
  100. package/dist/safari/Hanzo AI/Shared (App)/Assets.xcassets/AppIcon.appiconset/mac-icon-256@2x.png +0 -0
  101. package/dist/safari/Hanzo AI/Shared (App)/Assets.xcassets/AppIcon.appiconset/mac-icon-32@1x.png +0 -0
  102. package/dist/safari/Hanzo AI/Shared (App)/Assets.xcassets/AppIcon.appiconset/mac-icon-32@2x.png +0 -0
  103. package/dist/safari/Hanzo AI/Shared (App)/Assets.xcassets/AppIcon.appiconset/mac-icon-512@1x.png +0 -0
  104. package/dist/safari/Hanzo AI/Shared (App)/Assets.xcassets/AppIcon.appiconset/mac-icon-512@2x.png +0 -0
  105. package/dist/safari/Hanzo AI/Shared (App)/Assets.xcassets/AppIcon.appiconset/universal-icon-1024@1x.png +0 -0
  106. package/dist/safari/Hanzo AI/Shared (App)/Assets.xcassets/Contents.json +0 -6
  107. package/dist/safari/Hanzo AI/Shared (App)/Assets.xcassets/LargeIcon.imageset/Contents.json +0 -21
  108. package/dist/safari/Hanzo AI/Shared (App)/Assets.xcassets/LargeIcon.imageset/icon128.png +0 -0
  109. package/dist/safari/Hanzo AI/Shared (App)/Resources/Base.lproj/Main.html +0 -20
  110. package/dist/safari/Hanzo AI/Shared (App)/Resources/Icon.png +0 -0
  111. package/dist/safari/Hanzo AI/Shared (App)/Resources/Script.js +0 -24
  112. package/dist/safari/Hanzo AI/Shared (App)/Resources/Style.css +0 -61
  113. package/dist/safari/Hanzo AI/Shared (App)/ViewController.swift +0 -81
  114. package/dist/safari/Hanzo AI/Shared (Extension)/SafariWebExtensionHandler.swift +0 -42
  115. package/dist/safari/Hanzo AI/iOS (App)/AppDelegate.swift +0 -24
  116. package/dist/safari/Hanzo AI/iOS (App)/Base.lproj/LaunchScreen.storyboard +0 -36
  117. package/dist/safari/Hanzo AI/iOS (App)/Base.lproj/Main.storyboard +0 -38
  118. package/dist/safari/Hanzo AI/iOS (App)/Info.plist +0 -27
  119. package/dist/safari/Hanzo AI/iOS (App)/SceneDelegate.swift +0 -18
  120. package/dist/safari/Hanzo AI/iOS (Extension)/Info.plist +0 -13
  121. package/dist/safari/Hanzo AI/macOS (App)/AppDelegate.swift +0 -21
  122. package/dist/safari/Hanzo AI/macOS (App)/Base.lproj/Main.storyboard +0 -124
  123. package/dist/safari/Hanzo AI/macOS (App)/Info.plist +0 -8
  124. package/dist/safari/Hanzo AI/macOS (Extension)/Info.plist +0 -13
  125. package/docs/_config.yml +0 -13
  126. package/docs/_layouts/default.html +0 -435
  127. package/docs/index.md +0 -54
  128. package/install-extension.sh +0 -75
  129. package/test/claude-integration.test.ts +0 -251
  130. package/test/server-frameworks-edge-cases.test.ts +0 -145
  131. package/test/server-frameworks.test.ts +0 -395
  132. package/test-cdp-connection.js +0 -140
  133. package/tsconfig.json +0 -19
package/src/sidebar.html CHANGED
@@ -8,38 +8,14 @@
8
8
  </head>
9
9
  <body>
10
10
  <div class="sidebar-container">
11
- <!-- Header -->
12
- <header class="sidebar-header">
13
- <div class="brand">
14
- <svg class="logo" viewBox="0 0 67 67" xmlns="http://www.w3.org/2000/svg">
15
- <path d="M22.21 67V44.6369H0V67H22.21Z" fill="currentColor"/>
16
- <path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" fill="currentColor"/>
17
- <path d="M22.21 0H0V22.3184H22.21V0Z" fill="currentColor"/>
18
- <path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill="currentColor"/>
19
- <path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill="currentColor"/>
20
- </svg>
21
- <span>Hanzo AI</span>
22
- </div>
23
- <div class="header-right">
24
- <div id="user-badge" class="user-badge hidden" title="Account">
25
- <img id="header-avatar" class="header-avatar" src="" alt="">
26
- </div>
27
- </div>
28
- </header>
29
-
30
- <!-- Auth section removed — login prompt is now inside Chat tab -->
11
+ <!-- Auth section (hidden — login prompt is inside Chat tab) -->
31
12
  <section id="auth-section" class="hidden"></section>
32
13
 
33
14
  <!-- Tab Bar (always visible) -->
34
15
  <nav id="tab-bar" class="tab-bar hidden">
35
16
  <button class="tab active" data-tab="chat">Chat</button>
36
17
  <button class="tab" data-tab="tools">Tools</button>
37
- <button class="tab" data-tab="settings">
38
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" width="14" height="14">
39
- <path d="M8 10a2 2 0 100-4 2 2 0 000 4z" stroke-width="1.5"/>
40
- <path d="M13 8a5 5 0 01-.4 2l1 1.7a7 7 0 01-1.3.8l-1-1.7a5 5 0 01-2 .4v2a7 7 0 01-1.5 0v-2a5 5 0 01-2-.4l-1 1.7a7 7 0 01-1.3-.8l1-1.7A5 5 0 013 8a5 5 0 01.4-2l-1-1.7a7 7 0 011.3-.8l1 1.7a5 5 0 012-.4V2.8a7 7 0 011.5 0v2a5 5 0 012 .4l1-1.7a7 7 0 011.3.8l-1 1.7A5 5 0 0113 8z" stroke-width="1.5"/>
41
- </svg>
42
- </button>
18
+ <button class="tab" data-tab="settings">Settings</button>
43
19
  </nav>
44
20
 
45
21
  <!-- Chat Tab -->
@@ -47,45 +23,66 @@
47
23
  <!-- Login prompt (shown when not authenticated) -->
48
24
  <div id="chat-login-prompt" class="chat-login-prompt hidden">
49
25
  <div class="auth-card compact">
50
- <p class="auth-headline">Chat with Zen AI models</p>
51
- <p class="auth-sub">Claude, GPT-4o, Zen Coder Flash &amp; more</p>
52
- <button id="auth-btn" class="primary-btn">Sign in</button>
26
+ <svg class="auth-logo" viewBox="0 0 67 67" xmlns="http://www.w3.org/2000/svg">
27
+ <path d="M22.21 67V44.6369H0V67H22.21Z" fill="currentColor"/>
28
+ <path d="M0 44.6369L22.21 46.8285V44.6369H0Z" fill="currentColor" opacity="0.75"/>
29
+ <path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" fill="currentColor"/>
30
+ <path d="M22.21 0H0V22.3184H22.21V0Z" fill="currentColor"/>
31
+ <path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill="currentColor"/>
32
+ <path d="M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z" fill="currentColor" opacity="0.75"/>
33
+ <path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill="currentColor"/>
34
+ </svg>
35
+ <p class="auth-headline">Sign in to Hanzo AI</p>
36
+ <p class="auth-sub">Chat with Zen AI models, use browser tools, and build with AI agents.</p>
37
+ <button id="auth-btn" class="auth-signin-btn">Sign In</button>
38
+ <button id="signup-btn" class="auth-create-btn">Create account</button>
53
39
  <p class="auth-note">Browser tools work without sign-in. <a href="https://docs.hanzo.ai" target="_blank">Learn more</a></p>
54
40
  </div>
55
41
  </div>
56
42
  <div id="chat-messages" class="chat-messages">
57
43
  <div class="chat-welcome">
44
+ <svg viewBox="0 0 67 67" xmlns="http://www.w3.org/2000/svg" width="28" height="28" style="opacity:0.25">
45
+ <path d="M22.21 67V44.6369H0V67H22.21Z" fill="currentColor"/>
46
+ <path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" fill="currentColor"/>
47
+ <path d="M22.21 0H0V22.3184H22.21V0Z" fill="currentColor"/>
48
+ <path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill="currentColor"/>
49
+ <path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill="currentColor"/>
50
+ </svg>
58
51
  <p>Ask anything. Powered by Hanzo Cloud.</p>
59
52
  </div>
60
53
  </div>
61
- <div id="chat-composer" class="chat-input-area">
62
- <div class="model-selector">
63
- <select id="model-select">
64
- <option value="claude-sonnet-4-20250514">Claude Sonnet 4</option>
65
- <option value="claude-opus-4-20250514">Claude Opus 4</option>
66
- <option value="gpt-4o">GPT-4o</option>
67
- <option value="zen-coder-flash">Zen Coder Flash</option>
68
- <option value="zen-max">Zen Max</option>
69
- </select>
70
- </div>
71
- <div class="chat-flags">
72
- <label class="flag-toggle">
73
- <input type="checkbox" id="rag-enabled" checked>
74
- <span>RAG</span>
75
- </label>
76
- <label class="flag-toggle">
77
- <input type="checkbox" id="tab-context-enabled" checked>
78
- <span>Tab Context</span>
79
- </label>
80
- <span id="rag-status" class="rag-status">Ready</span>
81
- </div>
82
- <div class="input-row">
83
- <textarea id="chat-input" placeholder="Ask anything..." rows="1"></textarea>
84
- <button id="send-btn" class="send-btn" title="Send">
85
- <svg viewBox="0 0 20 20" fill="none" stroke="currentColor">
86
- <path d="M4 10l12-6-6 12-2-6-4-2z" stroke-width="1.5" fill="currentColor"/>
87
- </svg>
88
- </button>
54
+ <div id="chat-composer" style="padding:10px;flex-shrink:0;border-top:1px solid rgba(255,255,255,0.10);background:#0f0f0f;">
55
+ <div style="background:#171717;border:1px solid rgba(255,255,255,0.15);border-radius:10px;overflow:hidden;">
56
+ <textarea id="chat-input" placeholder="Ask anything..." rows="1"
57
+ style="display:block;width:100%;padding:10px 12px 4px;background:transparent;border:none;color:#fafafa;font-size:13px;font-family:inherit;line-height:1.5;resize:none;outline:none;min-height:36px;max-height:120px;box-sizing:border-box;"></textarea>
58
+ <div style="display:flex;align-items:center;justify-content:space-between;padding:4px 8px 8px;gap:4px;">
59
+ <div style="display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow:hidden;">
60
+ <select id="model-select"
61
+ style="padding:3px 18px 3px 6px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.10);border-radius:6px;color:#a3a3a3;font-size:10px;font-family:inherit;cursor:pointer;-moz-appearance:none;appearance:none;white-space:nowrap;max-width:110px;text-overflow:ellipsis;overflow:hidden;height:22px;line-height:16px;flex-shrink:0;">
62
+ <option value="auto">Auto</option>
63
+ <option value="claude-sonnet-4-20250514">Claude Sonnet 4</option>
64
+ <option value="claude-opus-4-20250514">Claude Opus 4</option>
65
+ <option value="gpt-4o">GPT-4o</option>
66
+ <option value="zen-coder-flash">Zen Coder Flash</option>
67
+ <option value="zen-max">Zen Max</option>
68
+ </select>
69
+ <label title="RAG context" style="display:inline-flex;align-items:center;gap:2px;font-size:10px;color:#666;cursor:pointer;white-space:nowrap;padding:2px 4px;flex-shrink:0;">
70
+ <input type="checkbox" id="rag-enabled" checked style="width:11px;height:11px;accent-color:#fafafa;cursor:pointer;margin:0;">
71
+ <span>RAG</span>
72
+ </label>
73
+ <label title="Include active tab" style="display:inline-flex;align-items:center;gap:2px;font-size:10px;color:#666;cursor:pointer;white-space:nowrap;padding:2px 4px;flex-shrink:0;">
74
+ <input type="checkbox" id="tab-context-enabled" checked style="width:11px;height:11px;accent-color:#fafafa;cursor:pointer;margin:0;">
75
+ <span>Tab</span>
76
+ </label>
77
+ <span id="rag-status" style="font-size:9px;color:#666;white-space:nowrap;padding:1px 5px;border-radius:3px;background:rgba(255,255,255,0.04);">Ready</span>
78
+ </div>
79
+ <button id="send-btn" title="Send (Enter)"
80
+ style="width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:#fafafa;border:none;border-radius:50%;color:#000;cursor:pointer;flex-shrink:0;">
81
+ <svg viewBox="0 0 16 16" fill="none" style="width:13px;height:13px;">
82
+ <path d="M3 13V3l10 5-10 5z" fill="currentColor"/>
83
+ </svg>
84
+ </button>
85
+ </div>
89
86
  </div>
90
87
  </div>
91
88
  </div>
@@ -93,28 +90,55 @@
93
90
  <!-- Tools Tab -->
94
91
  <div id="tab-tools" class="tab-content hidden">
95
92
  <div class="tools-scroll">
96
- <!-- Connection Status -->
93
+ <!-- Element Inspector (top priority for frontend work) -->
94
+ <div class="panel inspector-panel">
95
+ <div class="inspector-actions">
96
+ <button class="action-btn inspector-btn" id="pick-element" title="Select element on page">
97
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" width="14" height="14">
98
+ <path d="M3 3l4 10 2-4 4-2L3 3z" stroke-width="1.5" stroke-linejoin="round"/>
99
+ <path d="M9 9l4 4" stroke-width="1.5" stroke-linecap="round"/>
100
+ </svg>
101
+ Pick Element
102
+ </button>
103
+ <button class="action-btn inspector-btn" id="take-screenshot" title="Capture screenshot">
104
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" width="14" height="14">
105
+ <rect x="2" y="3" width="12" height="10" rx="1" stroke-width="1.5"/>
106
+ <circle cx="8" cy="8" r="2" stroke-width="1.5"/>
107
+ </svg>
108
+ Screenshot
109
+ </button>
110
+ <button class="action-btn inspector-btn" id="run-audit" title="Accessibility & performance audit">
111
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" width="14" height="14">
112
+ <path d="M8 2v4l3 2" stroke-width="1.5" stroke-linecap="round"/>
113
+ <circle cx="8" cy="8" r="6" stroke-width="1.5"/>
114
+ </svg>
115
+ Audit
116
+ </button>
117
+ </div>
118
+ <div id="inspector-result" class="inspector-result hidden"></div>
119
+ </div>
120
+
121
+ <!-- Connected MCP Servers -->
97
122
  <div class="panel">
98
- <h3>Connections</h3>
99
- <div class="mcp-status">
100
- <div class="status-row">
101
- <span>ZAP Protocol</span>
102
- <span id="mcp-status" class="status-value">
103
- <span class="status-indicator connected"></span>
104
- Discovering...
105
- </span>
106
- </div>
107
- <div class="status-row">
108
- <span>Tools Available</span>
109
- <span id="mcp-tools" class="status-value">0</span>
110
- </div>
111
- <div class="tool-list-wrap">
112
- <div class="tool-list-header">Discovered Tools</div>
113
- <div id="mcp-tool-list" class="tool-list">No tools discovered yet.</div>
114
- </div>
123
+ <div class="panel-header">
124
+ <h3>MCP Servers</h3>
125
+ <span id="mcp-server-count" class="badge">0</span>
126
+ </div>
127
+ <div id="mcp-server-list" class="mcp-server-list">
128
+ <div class="empty-state">No MCP servers connected</div>
115
129
  </div>
116
130
  </div>
117
131
 
132
+ <!-- Built-in + Discovered Tools -->
133
+ <div class="panel">
134
+ <div class="panel-header">
135
+ <h3>Available Tools</h3>
136
+ <span id="tool-count-badge" class="badge">0</span>
137
+ </div>
138
+ <div id="builtin-tool-list" class="tool-list"></div>
139
+ <div id="mcp-tool-list" class="tool-list"></div>
140
+ </div>
141
+
118
142
  <!-- Active Agents -->
119
143
  <div class="panel">
120
144
  <div class="panel-header">
@@ -139,21 +163,134 @@
139
163
  <div id="tab-fs" class="tab-filesystem"></div>
140
164
  </div>
141
165
 
142
- <!-- WebGPU Status -->
166
+ <!-- Hanzo Services (moved to bottom) -->
143
167
  <div class="panel">
144
- <h3>WebGPU AI</h3>
145
- <div class="gpu-status">
168
+ <h3>Hanzo Services</h3>
169
+ <div class="mcp-status">
146
170
  <div class="status-row">
147
- <span>Status</span>
148
- <span id="gpu-status" class="status-value">
149
- <span class="status-indicator warning"></span>
171
+ <span>Hanzo Node</span>
172
+ <span id="hanzo-node-status" class="status-value">
173
+ <span class="status-indicator disconnected"></span>
150
174
  Checking...
151
175
  </span>
152
176
  </div>
153
177
  <div class="status-row">
154
- <span>Model</span>
155
- <span id="gpu-model" class="status-value mono">-</span>
178
+ <span>Hanzo Bot</span>
179
+ <span id="hanzo-mcp-status" class="status-value">
180
+ <span class="status-indicator disconnected"></span>
181
+ Checking...
182
+ </span>
183
+ </div>
184
+ <div class="status-row">
185
+ <span>ZAP Protocol</span>
186
+ <span id="mcp-status" class="status-value">
187
+ <span class="status-indicator disconnected"></span>
188
+ Discovering...
189
+ </span>
190
+ </div>
191
+ <div class="status-row">
192
+ <span>Tools Available</span>
193
+ <span id="mcp-tools" class="status-value">0</span>
194
+ </div>
195
+ </div>
196
+ <div class="service-actions">
197
+ <button class="action-btn small" id="start-hanzo-node" title="Start hanzo node">
198
+ <svg viewBox="0 0 16 16" fill="currentColor" width="12" height="12">
199
+ <path d="M4 2l10 6-10 6V2z"/>
200
+ </svg>
201
+ Start Node
202
+ </button>
203
+ <button class="action-btn small" id="start-hanzo-mcp" title="Start hanzo bot">
204
+ <svg viewBox="0 0 16 16" fill="currentColor" width="12" height="12">
205
+ <path d="M4 2l10 6-10 6V2z"/>
206
+ </svg>
207
+ Start Bot
208
+ </button>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Usage & Billing -->
213
+ <div class="panel">
214
+ <div class="panel-header">
215
+ <h3>Usage & Billing</h3>
216
+ <a href="https://billing.hanzo.ai" target="_blank" class="badge badge-link" title="Manage billing">Billing ↗</a>
217
+ </div>
218
+
219
+ <!-- Balance card -->
220
+ <div id="balance-card" class="balance-card hidden">
221
+ <div class="balance-row">
222
+ <span class="balance-label">Balance</span>
223
+ <span id="balance-amount" class="balance-amount">$0.00</span>
224
+ </div>
225
+ <div id="balance-tier" class="balance-tier hidden">
226
+ <span class="tier-badge" id="tier-name">Free</span>
227
+ </div>
228
+ <div class="usage-bar-group" id="balance-bar-wrap">
229
+ <div class="usage-bar-track"><div id="balance-bar" class="usage-bar-fill" style="width:0%"></div></div>
230
+ <div class="usage-bar-labels">
231
+ <span id="balance-used-label">$0.00 used</span>
232
+ <span id="balance-pct-label">0%</span>
233
+ </div>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Session usage bars -->
238
+ <div class="usage-meters">
239
+ <div class="usage-meter">
240
+ <div class="usage-meter-header">
241
+ <span>Session Requests</span>
242
+ <span id="usage-chat-requests" class="mono">0</span>
243
+ </div>
244
+ <div class="usage-bar-track"><div id="bar-requests" class="usage-bar-fill bar-blue" style="width:0%"></div></div>
245
+ </div>
246
+ <div class="usage-meter">
247
+ <div class="usage-meter-header">
248
+ <span>Input Tokens</span>
249
+ <span id="usage-input-tokens" class="mono">0</span>
250
+ </div>
251
+ <div class="usage-bar-track"><div id="bar-input" class="usage-bar-fill bar-violet" style="width:0%"></div></div>
252
+ </div>
253
+ <div class="usage-meter">
254
+ <div class="usage-meter-header">
255
+ <span>Output Tokens</span>
256
+ <span id="usage-output-tokens" class="mono">0</span>
257
+ </div>
258
+ <div class="usage-bar-track"><div id="bar-output" class="usage-bar-fill bar-emerald" style="width:0%"></div></div>
156
259
  </div>
260
+ <div class="usage-meter">
261
+ <div class="usage-meter-header">
262
+ <span>Est. Cost</span>
263
+ <span id="usage-est-cost" class="mono">$0.00</span>
264
+ </div>
265
+ <div class="usage-bar-track"><div id="bar-cost" class="usage-bar-fill bar-amber" style="width:0%"></div></div>
266
+ </div>
267
+ </div>
268
+
269
+ <div class="usage-meta">
270
+ <span id="usage-dedupe" class="mono" title="Deduplication hits">0 dedup</span>
271
+ <span>·</span>
272
+ <span id="usage-canceled" class="mono" title="Canceled requests">0 canceled</span>
273
+ <span>·</span>
274
+ <span id="usage-window" class="mono">1h window</span>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Model Hub -->
279
+ <div class="panel">
280
+ <div class="panel-header">
281
+ <h3>Model Hub</h3>
282
+ <button class="icon-btn small" id="refresh-models" title="Refresh models">
283
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor">
284
+ <path d="M14 2v5h-5M2 7a6 6 0 0111.5-2.5L14 5M2 14v-5h5M14 9a6 6 0 01-11.5 2.5L2 11" stroke-width="1.5"/>
285
+ </svg>
286
+ </button>
287
+ </div>
288
+ <div id="model-hub-list" class="model-hub-list">
289
+ <div class="empty-state">Loading models...</div>
290
+ </div>
291
+ <div class="model-hub-actions">
292
+ <input type="text" id="model-search" class="model-search" placeholder="Search models (HF, Ollama)...">
293
+ <button class="action-btn small" id="search-models-btn">Search</button>
157
294
  </div>
158
295
  </div>
159
296
 
@@ -172,8 +309,8 @@
172
309
  <!-- Settings Tab -->
173
310
  <div id="tab-settings" class="tab-content hidden">
174
311
  <div class="settings-scroll">
175
- <!-- Account -->
176
- <div class="panel" id="account-panel">
312
+ <!-- Account (shown when authenticated) -->
313
+ <div class="panel hidden" id="account-panel">
177
314
  <h3>Account</h3>
178
315
  <div class="user-profile">
179
316
  <img id="user-avatar" class="user-avatar" src="" alt="">
@@ -200,6 +337,10 @@
200
337
  <span>ZAP Ports</span>
201
338
  <input type="text" id="zap-ports-setting" value="9999,9998,9997,9996,9995" placeholder="Comma-separated">
202
339
  </label>
340
+ <label class="setting-item">
341
+ <span>Node Port</span>
342
+ <input type="number" id="node-port-setting" value="52415" min="1024" max="65535">
343
+ </label>
203
344
  </div>
204
345
 
205
346
  <!-- AI Settings -->
@@ -208,6 +349,7 @@
208
349
  <label class="setting-item">
209
350
  <span>Default Model</span>
210
351
  <select id="default-model">
352
+ <option value="auto">Auto (cost-aware)</option>
211
353
  <option value="claude-sonnet-4-20250514">Claude Sonnet 4</option>
212
354
  <option value="claude-opus-4-20250514">Claude Opus 4</option>
213
355
  <option value="gpt-4o">GPT-4o</option>
@@ -265,6 +407,33 @@
265
407
 
266
408
  <button id="save-settings" class="primary-btn">Save Settings</button>
267
409
 
410
+ <!-- Build Info -->
411
+ <div class="panel build-info-panel">
412
+ <h3>Build Info</h3>
413
+ <div class="mcp-status">
414
+ <div class="status-row">
415
+ <span>Extension</span>
416
+ <span id="build-ext-version" class="status-value mono">--</span>
417
+ </div>
418
+ <div class="status-row">
419
+ <span>Browser</span>
420
+ <span id="build-browser" class="status-value mono">--</span>
421
+ </div>
422
+ <div class="status-row">
423
+ <span>Manifest</span>
424
+ <span id="build-manifest" class="status-value mono">--</span>
425
+ </div>
426
+ <div class="status-row">
427
+ <span>CDP Bridge</span>
428
+ <span id="build-cdp-status" class="status-value mono">--</span>
429
+ </div>
430
+ <div class="status-row">
431
+ <span>MCP Bridge</span>
432
+ <span id="build-mcp-status" class="status-value mono">--</span>
433
+ </div>
434
+ </div>
435
+ </div>
436
+
268
437
  <!-- Links -->
269
438
  <div class="settings-links">
270
439
  <a href="https://console.hanzo.ai" target="_blank">Console</a>
@@ -273,6 +442,20 @@
273
442
  </div>
274
443
  </div>
275
444
  </div>
445
+
446
+ <!-- Footer -->
447
+ <footer class="sidebar-footer">
448
+ <a href="https://hanzo.ai" target="_blank" class="footer-brand" title="hanzo.ai">
449
+ <svg viewBox="0 0 67 67" xmlns="http://www.w3.org/2000/svg" width="14" height="14">
450
+ <path d="M22.21 67V44.6369H0V67H22.21Z" fill="currentColor"/>
451
+ <path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" fill="currentColor"/>
452
+ <path d="M22.21 0H0V22.3184H22.21V0Z" fill="currentColor"/>
453
+ <path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill="currentColor"/>
454
+ <path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill="currentColor"/>
455
+ </svg>
456
+ <span id="footer-version">hanzo.ai</span>
457
+ </a>
458
+ </footer>
276
459
  </div>
277
460
 
278
461
  <script src="sidebar.js"></script>