@hanzo/browser-extension 1.7.2

package/dist/browser-extension/cli.js

@@ -0,0 +1,233 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/cli.ts
+var import_commander = require("commander");
+
+// src/browser-extension-server.ts
+var import_ws = require("ws");
+var import_events = require("events");
+var path = __toESM(require("path"));
+var fs = __toESM(require("fs"));
+var BrowserExtensionServer = class extends import_events.EventEmitter {
+  constructor(port = 3001, projectRoot = process.cwd()) {
+    super();
+    this.projectRoot = projectRoot;
+    this.wss = new import_ws.WebSocketServer({
+      port,
+      path: "/browser-extension"
+    });
+    this.setupWebSocket();
+    console.log(`[Hanzo] Browser extension server listening on ws://localhost:${port}/browser-extension`);
+  }
+  setupWebSocket() {
+    this.wss.on("connection", (ws) => {
+      console.log("[Hanzo] Browser extension connected");
+      ws.on("message", async (data) => {
+        try {
+          const payload = JSON.parse(data.toString());
+          if (payload.event === "elementSelected") {
+            const fileInfo = await this.resolveFileLocation(payload);
+            if (fileInfo) {
+              this.emit("elementSelected", {
+                file: fileInfo.file,
+                line: fileInfo.line,
+                column: fileInfo.column,
+                framework: payload.framework,
+                domPath: payload.domPath
+              });
+            }
+          }
+        } catch (error) {
+          console.error("[Hanzo] Error processing browser message:", error);
+        }
+      });
+      ws.on("close", () => {
+        console.log("[Hanzo] Browser extension disconnected");
+      });
+    });
+  }
+  async resolveFileLocation(payload) {
+    if (payload.source) {
+      const resolvedPath = this.resolveSourcePath(payload.source.file);
+      return {
+        file: resolvedPath || payload.source.file,
+        line: payload.source.line,
+        column: payload.source.column
+      };
+    }
+    if (payload.fallbackId) {
+      const location = await this.lookupByHanzoId(payload.fallbackId);
+      if (location) return location;
+    }
+    console.warn("[Hanzo] Could not resolve file location for element");
+    return null;
+  }
+  resolveSourcePath(sourcePath) {
+    if (sourcePath.startsWith("webpack://")) {
+      sourcePath = sourcePath.replace(/^webpack:\/\/[^\/]+\//, "");
+    }
+    const candidates = [
+      path.join(this.projectRoot, sourcePath),
+      path.join(this.projectRoot, "src", sourcePath),
+      path.join(this.projectRoot, sourcePath.replace(/^\.\//, "")),
+      sourcePath
+      // absolute path
+    ];
+    for (const candidate of candidates) {
+      if (fs.existsSync(candidate)) {
+        return candidate;
+      }
+    }
+    return null;
+  }
+  async lookupByHanzoId(hanzoId) {
+    try {
+      const mapFile = path.join(this.projectRoot, ".hanzo", "id-map.json");
+      if (fs.existsSync(mapFile)) {
+        const idMap = JSON.parse(fs.readFileSync(mapFile, "utf-8"));
+        return idMap[hanzoId] || null;
+      }
+    } catch (error) {
+      console.error("[Hanzo] Error reading ID map:", error);
+    }
+    return null;
+  }
+  close() {
+    this.wss.close();
+  }
+};
+
+// src/cli.ts
+var import_chalk = __toESM(require("chalk"));
+var path2 = __toESM(require("path"));
+var import_child_process = require("child_process");
+var program = new import_commander.Command();
+program.name("hanzo-browser-server").description("Start the Hanzo browser extension server for click-to-code navigation").version("1.0.0");
+program.command("start").description("Start the browser extension WebSocket server").option("-p, --port <port>", "Port to run the server on", "3001").option("-r, --root <path>", "Project root directory", process.cwd()).option("--install-extension", "Build and show instructions for installing the browser extension").action(async (options) => {
+  const port = parseInt(options.port);
+  const projectRoot = path2.resolve(options.root);
+  console.log(import_chalk.default.blue("\u{1F680} Starting Hanzo Browser Extension Server"));
+  console.log(import_chalk.default.gray(`   Port: ${port}`));
+  console.log(import_chalk.default.gray(`   Project root: ${projectRoot}`));
+  const server = new BrowserExtensionServer(port, projectRoot);
+  server.on("elementSelected", (data) => {
+    console.log(import_chalk.default.green("\u2713 Element selected:"));
+    console.log(import_chalk.default.gray(`   File: ${data.file}`));
+    console.log(import_chalk.default.gray(`   Line: ${data.line}`));
+    if (data.column) console.log(import_chalk.default.gray(`   Column: ${data.column}`));
+    console.log(import_chalk.default.gray(`   Framework: ${data.framework || "unknown"}`));
+  });
+  console.log(import_chalk.default.green(`\u2713 Server running at ws://localhost:${port}/browser-extension`));
+  console.log(import_chalk.default.yellow("\n\u{1F4DD} Instructions:"));
+  console.log("1. Install the browser extension (run with --install-extension flag)");
+  console.log("2. Alt+Click any element in your browser to navigate to its source code");
+  console.log("3. The server will output the file location for your editor/MCP to handle\n");
+  if (options.installExtension) {
+    await installExtension();
+  }
+  process.on("SIGINT", () => {
+    console.log(import_chalk.default.red("\n\u23F9 Shutting down server..."));
+    server.close();
+    process.exit(0);
+  });
+});
+program.command("install-extension").description("Build and install the browser extension").action(async () => {
+  await installExtension();
+});
+program.command("test").description("Run integration tests with mock browser events").action(async () => {
+  console.log(import_chalk.default.blue("\u{1F9EA} Running integration tests..."));
+  const server = new BrowserExtensionServer(3001);
+  const testEvents = [
+    {
+      event: "elementSelected",
+      framework: "react",
+      domPath: "div#root > div.App > header > h1",
+      source: {
+        file: "src/components/Header.tsx",
+        line: 15,
+        column: 8
+      }
+    },
+    {
+      event: "elementSelected",
+      framework: "vue",
+      domPath: "div#app > main > button.primary",
+      source: {
+        file: "src/components/Button.vue",
+        line: 23
+      }
+    },
+    {
+      event: "elementSelected",
+      framework: null,
+      domPath: "body > div > p",
+      fallbackId: "hanzo-id-12345"
+    }
+  ];
+  console.log(import_chalk.default.gray("Sending test events...\n"));
+  await new Promise((resolve2) => setTimeout(resolve2, 1e3));
+  const WebSocket = require("ws");
+  const ws = new WebSocket("ws://localhost:3001/browser-extension");
+  ws.on("open", () => {
+    testEvents.forEach((event, index) => {
+      setTimeout(() => {
+        console.log(import_chalk.default.blue(`\u2192 Sending test event ${index + 1}:`));
+        console.log(import_chalk.default.gray(JSON.stringify(event, null, 2)));
+        ws.send(JSON.stringify(event));
+      }, index * 1e3);
+    });
+    setTimeout(() => {
+      ws.close();
+      server.close();
+      console.log(import_chalk.default.green("\n\u2713 Integration tests completed"));
+      process.exit(0);
+    }, testEvents.length * 1e3 + 500);
+  });
+});
+async function installExtension() {
+  console.log(import_chalk.default.blue("\u{1F4E6} Building browser extension..."));
+  const buildScript = path2.join(__dirname, "..", "browser-extension", "build.js");
+  return new Promise((resolve2, reject) => {
+    const build = (0, import_child_process.spawn)("node", [buildScript], {
+      stdio: "inherit"
+    });
+    build.on("close", (code) => {
+      if (code === 0) {
+        console.log(import_chalk.default.green("\n\u2713 Extension built successfully!"));
+        console.log(import_chalk.default.yellow("\n\u{1F4DD} Installation instructions:"));
+        console.log("1. Open Chrome and navigate to chrome://extensions/");
+        console.log('2. Enable "Developer mode" (toggle in top right)');
+        console.log('3. Click "Load unpacked"');
+        console.log(`4. Select the folder: ${path2.join(__dirname, "..", "..", "dist", "browser-extension")}`);
+        console.log("5. The extension is now installed! Alt+Click elements to navigate to source.\n");
+        resolve2();
+      } else {
+        reject(new Error(`Build failed with code ${code}`));
+      }
+    });
+  });
+}
+program.parse();