@hanzo/browser-extension 1.7.5 → 1.9.31

package/dist/browser-extension/webgpu-ai.js

@@ -193,11 +193,7 @@ var WebGPUAI = class {
       throw new Error("WebGPU not initialized");
     }
     console.log(`[Hanzo AI] Loading model: ${config.name}`);
-    const response = await fetch(config.url);
-    if (!response.ok) {
-      throw new Error(`Failed to fetch model ${config.name}: ${response.status}`);
-    }
-    const modelData = await response.arrayBuffer();
+    const modelData = await this._fetchWithCache(config.url, config.name);
     const modelBuffer = this.device.createBuffer({
       size: modelData.byteLength,
       usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
@@ -466,6 +462,83 @@ var WebGPUAI = class {
     return embedding;
   }
   // ---------------------------------------------------------------------------
+  // Cached, progress-reporting fetch — used by loadModel().
+  // ---------------------------------------------------------------------------
+  /**
+   * Fetch a model blob with persistent caching. Backed by the service-worker
+   * Cache API so the bytes survive worker restarts and only download once
+   * per URL. Streams the body to log progress every ~5% so big artifacts
+   * (huggingface.co/<repo>/resolve/main/<file>) don't appear to hang.
+   *
+   * Cache invalidation: the URL is the key; bump the URL (e.g. point to a
+   * different revision sha) to force a re-fetch. Use ``WebGPUAI.evictCache``
+   * to wipe everything when models go bad.
+   */
+  async _fetchWithCache(url, label) {
+    const cacheName = "hanzo-webgpu-models-v1";
+    const cache = typeof caches !== "undefined" ? await caches.open(cacheName) : null;
+    if (cache) {
+      const hit = await cache.match(url);
+      if (hit) {
+        console.log(`[Hanzo AI] Cache hit: ${label} (${url})`);
+        return await hit.arrayBuffer();
+      }
+    }
+    console.log(`[Hanzo AI] Fetching: ${label} (${url})`);
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ${label}: ${response.status} ${response.statusText}`);
+    }
+    const total = Number(response.headers.get("content-length") || 0);
+    let received = 0;
+    let nextLog = total > 0 ? Math.floor(total * 0.05) : Infinity;
+    const chunks = [];
+    if (response.body) {
+      const reader = response.body.getReader();
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        chunks.push(value);
+        received += value.byteLength;
+        if (total > 0 && received >= nextLog) {
+          const pct = Math.floor(received / total * 100);
+          console.log(`[Hanzo AI] ${label}: ${pct}% (${received}/${total} bytes)`);
+          nextLog = received + Math.floor(total * 0.05);
+        }
+      }
+    } else {
+      chunks.push(new Uint8Array(await response.arrayBuffer()));
+    }
+    const blob = new Uint8Array(received || chunks.reduce((n, c) => n + c.byteLength, 0));
+    let offset = 0;
+    for (const c of chunks) {
+      blob.set(c, offset);
+      offset += c.byteLength;
+    }
+    console.log(`[Hanzo AI] Fetched: ${label} (${blob.byteLength} bytes)`);
+    if (cache) {
+      try {
+        await cache.put(url, new Response(blob, {
+          headers: { "content-type": "application/octet-stream" }
+        }));
+        console.log(`[Hanzo AI] Cached: ${label}`);
+      } catch (e) {
+        console.warn(`[Hanzo AI] Cache write failed for ${label}:`, e);
+      }
+    }
+    return blob.buffer;
+  }
+  /** Build an HF resolve URL for a given repo / file / revision. */
+  static huggingFaceURL(repo, file, revision = "main") {
+    return `https://huggingface.co/${repo}/resolve/${revision}/${file}`;
+  }
+  /** Wipe every cached model blob. Useful when a model artifact is rotated. */
+  static async evictCache() {
+    if (typeof caches === "undefined") return;
+    await caches.delete("hanzo-webgpu-models-v1");
+    console.log("[Hanzo AI] WebGPU model cache evicted");
+  }
+  // ---------------------------------------------------------------------------
   // Status / Cleanup
   // ---------------------------------------------------------------------------
   getStatus() {

package/manifest.json

@@ -5,11 +5,16 @@
   "description": "Click-to-code navigation with source-map support",
   "permissions": [
     "activeTab",
-    "storage"
+    "storage",
+    "tabs",
+    "webNavigation",
+    "debugger",
+    "scripting"
   ],
   "host_permissions": [
     "http://localhost/*",
-    "https://localhost/*"
+    "https://localhost/*",
+    "<all_urls>"
   ],
   "content_scripts": [
     {

package/package.json

@@ -1,32 +1,49 @@
 {
   "name": "@hanzo/browser-extension",
-  "version": "1.7.5",
+  "version": "1.9.31",
   "description": "Hanzo AI Browser Extension",
   "main": "dist/background.js",
-  "scripts": {
-    "build": "node src/build.js",
-    "watch": "node src/build.js --watch",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
   "dependencies": {
+    "@supabase/supabase-js": "^2.50.3",
+    "axios": "^1.10.0",
     "chalk": "^4.1.2",
     "commander": "^11.1.0",
+    "webextension-polyfill": "0.12.0",
     "ws": "^8.18.3"
   },
   "devDependencies": {
+    "@playwright/test": "^1.52.0",
     "@types/chrome": "^0.0.270",
     "@types/firefox-webext-browser": "^120.0.0",
     "@types/jsdom": "^21.1.7",
     "@types/ws": "^8.18.1",
-    "esbuild": "^0.25.6",
+    "esbuild": "^0.25.8",
     "jsdom": "^26.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "typescript": "^5.8.3",
-    "vitest": "^0.34.6",
+    "vitest": "^3.2.6",
     "ws": "^8.18.3"
   },
   "engines": {
     "node": ">=18.0.0"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "src",
+    "images",
+    "manifest.json"
+  ],
+  "scripts": {
+    "build": "node src/build.js",
+    "watch": "node src/build.js --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test --config=e2e/playwright.config.ts",
+    "check:bundle-budget": "node scripts/check-bundle-budgets.mjs"
+  }
 }

package/src/chat-widget.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { flushSync } from 'react-dom';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Textarea,
+} from '@hanzo/gui';
+
+function LoginPrompt() {
+  return (
+    <Card className="chat-modern-login-card">
+      <CardHeader>
+        <CardTitle>Chat with Zen AI models</CardTitle>
+        <CardDescription>Models enabled in Hanzo Cloud are loaded automatically.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Button id="auth-btn" className="chat-modern-auth-btn" type="button">
+          Sign in
+        </Button>
+        <Button id="signup-btn" className="secondary-btn" type="button">
+          Create account
+        </Button>
+        <p className="auth-note">
+          Browser tools work without sign-in.{' '}
+          <a href="https://docs.hanzo.ai" target="_blank" rel="noreferrer">
+            Learn more
+          </a>
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ChatComposer() {
+  return (
+    <div className="chat-modern-composer">
+      <div className="model-selector">
+        <select id="model-select">
+          <option value="claude-sonnet-4-20250514">Claude Sonnet 4</option>
+          <option value="claude-opus-4-20250514">Claude Opus 4</option>
+          <option value="gpt-4o">GPT-4o</option>
+          <option value="zen-coder-flash">Zen Coder Flash</option>
+          <option value="zen-max">Zen Max</option>
+        </select>
+      </div>
+
+      <div className="chat-flags">
+        <label className="flag-toggle">
+          <input type="checkbox" id="rag-enabled" defaultChecked />
+          <span>RAG</span>
+        </label>
+        <label className="flag-toggle">
+          <input type="checkbox" id="tab-context-enabled" defaultChecked />
+          <span>Tab Context</span>
+        </label>
+        <span id="rag-status" className="rag-status">
+          Ready
+        </span>
+      </div>
+
+      <div className="input-row">
+        <Textarea id="chat-input" className="chat-modern-input" placeholder="Ask anything..." rows={1} />
+        <Button id="send-btn" className="send-btn chat-modern-send" title="Send" type="button">
+          <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+            <path d="M4 10l12-6-6 12-2-6-4-2z" strokeWidth="1.5" fill="currentColor" />
+          </svg>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function mountModernChatWidget() {
+  const loginTarget = document.getElementById('chat-login-prompt');
+  if (loginTarget) {
+    loginTarget.innerHTML = '';
+    const loginRoot = createRoot(loginTarget);
+    flushSync(() => {
+      loginRoot.render(<LoginPrompt />);
+    });
+  }
+
+  const composerTarget = document.getElementById('chat-composer');
+  if (composerTarget) {
+    composerTarget.innerHTML = '';
+    const composerRoot = createRoot(composerTarget);
+    flushSync(() => {
+      composerRoot.render(<ChatComposer />);
+    });
+  }
+}

package/src/gui-primitives.tsx

@@ -0,0 +1,116 @@
+/**
+ * Local @hanzo/gui primitives shim for the extension.
+ *
+ * This is the canonical surface the extension's React components import via
+ * `@hanzo/gui`. It deliberately does NOT pull in the upstream tamagui-based
+ * `@hanzo/gui` package because:
+ *
+ *   1. content-script + background bundles target the smallest possible
+ *      payload — RNW + tamagui's runtime is far too heavy for a script
+ *      injected into every page;
+ *   2. Hanzo brand is strict monochrome (see ~/work/hanzo/brand/brand.json,
+ *      primaryColor #FFFFFF), so no color tokens travel with primitives
+ *      anyway — pure structural elements styled by sibling CSS;
+ *   3. The full tamagui adoption ships in a future feature branch with the
+ *      compiler + RNW peer dep wired correctly.
+ *
+ * The build aliases `@hanzo/gui` → this file. When the tamagui adoption
+ * lands, swap the alias target to the published `@hanzo/gui` package.
+ *
+ * Each primitive renders a plain DOM element with a stable, monochrome
+ * class hook. All visuals come from sidebar.css / popup.css using the
+ * brand token scale (white luminance ladder, no chromatic accents).
+ */
+import React from 'react';
+
+type Classy = { className?: string; children?: React.ReactNode };
+
+function cx(base: string, extra?: string): string {
+  return extra ? `${base} ${extra}` : base;
+}
+
+export function Button(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const { className, children, ...rest } = props;
+  return (
+    <button {...rest} className={cx('hanzo-gui-btn', className)}>
+      {children}
+    </button>
+  );
+}
+
+export function Textarea(props: React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  const { className, children, ...rest } = props;
+  return (
+    <textarea {...rest} className={cx('hanzo-gui-textarea', className)}>
+      {children}
+    </textarea>
+  );
+}
+
+export function Input(props: React.InputHTMLAttributes<HTMLInputElement>) {
+  const { className, ...rest } = props;
+  return <input {...rest} className={cx('hanzo-gui-input', className)} />;
+}
+
+export function Card({ className, children }: Classy) {
+  return <div className={cx('hanzo-gui-card', className)}>{children}</div>;
+}
+
+export function CardHeader({ className, children }: Classy) {
+  return <div className={cx('hanzo-gui-card-header', className)}>{children}</div>;
+}
+
+export function CardTitle({ className, children }: Classy) {
+  return <h3 className={cx('hanzo-gui-card-title', className)}>{children}</h3>;
+}
+
+export function CardDescription({ className, children }: Classy) {
+  return <p className={cx('hanzo-gui-card-description', className)}>{children}</p>;
+}
+
+export function CardContent({ className, children }: Classy) {
+  return <div className={cx('hanzo-gui-card-content', className)}>{children}</div>;
+}
+
+/* Layout primitives — mirror the names used by the upstream Tamagui-based
+   @hanzo/gui (XStack/YStack) so call-sites can be ported without churn
+   when the full adoption lands. Pure flexbox under the hood. */
+type Stack = Classy & React.HTMLAttributes<HTMLDivElement> & {
+  gap?: number | string;
+};
+
+export function XStack({ className, gap, style, children, ...rest }: Stack) {
+  const merged: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'row',
+    gap,
+    ...style,
+  };
+  return (
+    <div {...rest} style={merged} className={cx('hanzo-gui-xstack', className)}>
+      {children}
+    </div>
+  );
+}
+
+export function YStack({ className, gap, style, children, ...rest }: Stack) {
+  const merged: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap,
+    ...style,
+  };
+  return (
+    <div {...rest} style={merged} className={cx('hanzo-gui-ystack', className)}>
+      {children}
+    </div>
+  );
+}
+
+export function Text({ className, children, ...rest }: Classy & React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span {...rest} className={cx('hanzo-gui-text', className)}>
+      {children}
+    </span>
+  );
+}

package/src/manifest-firefox.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Hanzo AI",
-  "version": "1.7.5",
+  "version": "1.9.22",
   "description": "AI-powered dev assistant — click-to-code navigation, source maps, WebGPU AI, and MCP integration for Claude Code.",
   "permissions": [
     "activeTab",
@@ -9,7 +9,10 @@
     "storage",
     "tabs",
     "webNavigation",
-    "scripting"
+    "scripting",
+    "cookies",
+    "nativeMessaging",
+    "alarms"
   ],
   "host_permissions": [
     "http://localhost/*",
@@ -21,13 +24,19 @@
   },
   "content_scripts": [
     {
-      "matches": ["<all_urls>"],
-      "js": ["content-script.js"],
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "content-script.js"
+      ],
       "run_at": "document_idle"
     }
   ],
   "background": {
-    "scripts": ["background.js"],
+    "scripts": [
+      "background.js"
+    ],
     "type": "module"
   },
   "action": {
@@ -44,12 +53,18 @@
     "default_icon": {
       "16": "icon16.png",
       "48": "icon48.png"
-    }
+    },
+    "open_at_install": false
   },
   "web_accessible_resources": [
     {
-      "resources": ["ai-worker.js", "models/*"],
-      "matches": ["<all_urls>"]
+      "resources": [
+        "ai-worker.js",
+        "models/*"
+      ],
+      "matches": [
+        "<all_urls>"
+      ]
     }
   ],
   "browser_specific_settings": {
@@ -58,9 +73,5 @@
       "strict_min_version": "109.0"
     },
     "gecko_android": {}
-  },
-  "data_collection_permissions": {
-    "purposes": ["functionality"],
-    "data_categories": ["technical_data"]
   }
 }

package/src/manifest.json

@@ -1,17 +1,20 @@
 {
   "manifest_version": 3,
   "name": "Hanzo AI",
-  "version": "1.7.5",
+  "version": "1.9.25",
   "description": "AI-powered dev assistant — click-to-code navigation, source maps, WebGPU AI, and MCP integration for Claude Code.",
+  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxfXGh0lPUT5m04GKfjUwrLsV6pLaK3VcZuFRPogqAir2tzyLYnQPRtHynue9yvDyguIVnlkwvcwfDOYZrvH76zbw4s6onPBG8HqTKO6LQ9K3kdO1qBBkMMjdOgULQ1MrWThEbpU7NSTiwLYpEta/jAvrKRCAeKIlQE8p6htZmPy9aRUZuae66JgLcAlzD2vviX9sVB1asFABJVswL1RgZ55/8IzZaUrFjzOo9OHK4hmEOtudzkML+5silsAYdC+1BZugph2x94ai17YmZTCL1XyUa5Ke4q80cj+i9rOTgzhZs+mruyhL/AvNVOXilsgqCdNqSz77naWzC3pVGbxOewIDAQAB",
   "permissions": [
     "activeTab",
     "identity",
-    "sidePanel",
     "storage",
     "tabs",
     "webNavigation",
     "scripting",
-    "debugger"
+    "cookies",
+    "debugger",
+    "alarms",
+    "nativeMessaging"
   ],
   "host_permissions": [
     "http://localhost/*",
@@ -23,8 +26,12 @@
   },
   "content_scripts": [
     {
-      "matches": ["<all_urls>"],
-      "js": ["content-script.js"],
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "content-script.js"
+      ],
       "run_at": "document_idle"
     }
   ],
@@ -40,9 +47,6 @@
       "128": "icon128.png"
     }
   },
-  "side_panel": {
-    "default_path": "sidebar.html"
-  },
   "icons": {
     "16": "icon16.png",
     "48": "icon48.png",
@@ -50,8 +54,13 @@
   },
   "web_accessible_resources": [
     {
-      "resources": ["ai-worker.js", "models/*"],
-      "matches": ["<all_urls>"]
+      "resources": [
+        "ai-worker.js",
+        "models/*"
+      ],
+      "matches": [
+        "<all_urls>"
+      ]
     }
   ]
 }

package/src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/browser-extension",
-  "version": "1.7.5",
+  "version": "1.0.0",
   "description": "Browser extension for click-to-code navigation with MCP integration",
   "main": "cli.js",
   "bin": {