hypha-debugger 0.1.2 → 0.1.4

package/dist/debugger.d.ts

@@ -65,7 +65,15 @@ export declare class HyphaDebugger {
     private createGetSkillMd;
     /** Build the instruction block for the overlay panel. */
     private buildInstructionBlock;
-    /** Wrap a service function with logging and kwargs-to-positional-args support. */
+    /**
+     * Wrap a service function with overlay logging + correct parameter names.
+     *
+     * Adds logging around the function, then applies baseWrapFn() which uses
+     * new Function() to create a wrapper with unminified parameter names from
+     * __schema__. This is critical for production builds where Babel/Terser
+     * minifies parameter names — hypha-rpc's getParamNames() parses
+     * Function.toString() to map kwargs to positional args.
+     */
     private wrapFn;
     private summarizeArgs;
 }

package/dist/hypha-debugger.js

@@ -9199,6 +9199,31 @@
           },
       },
   };
+  function getConsoleLogs(options) {
+      const logs = window.__HYPHA_DEBUGGER__?.consoleLogs ?? [];
+      const level = options?.level;
+      const limit = options?.limit ?? 100;
+      let filtered = level ? logs.filter((l) => l.level === level) : logs;
+      return filtered.slice(-limit);
+  }
+  getConsoleLogs.__schema__ = {
+      name: "getConsoleLogs",
+      description: "Retrieve captured console output (log, warn, error, info).",
+      parameters: {
+          type: "object",
+          properties: {
+              level: {
+                  type: "string",
+                  description: 'Filter by log level: "log", "warn", "error", "info". Omit for all levels.',
+                  enum: ["log", "warn", "error", "info"],
+              },
+              limit: {
+                  type: "number",
+                  description: "Maximum number of log entries to return (most recent). Default: 100.",
+              },
+          },
+      },
+  };
   /** Install console interceptor to capture logs. */
   function installConsoleCapture(maxEntries = 500) {
       var _a;
@@ -9398,6 +9423,88 @@
           required: ["target"],
       },
   };
+  function getComputedStyles(selector, properties) {
+      const el = document.querySelector(selector);
+      if (!el) {
+          return { error: `No element found for selector: ${selector}` };
+      }
+      const computed = getComputedStyle(el);
+      const result = {};
+      const props = properties ??
+          [
+              "display",
+              "position",
+              "width",
+              "height",
+              "color",
+              "background-color",
+              "font-size",
+              "font-family",
+              "margin",
+              "padding",
+              "border",
+              "opacity",
+              "visibility",
+              "overflow",
+              "z-index",
+          ];
+      for (const prop of props) {
+          result[prop] = computed.getPropertyValue(prop);
+      }
+      return result;
+  }
+  getComputedStyles.__schema__ = {
+      name: "getComputedStyles",
+      description: "Get computed CSS styles for an element.",
+      parameters: {
+          type: "object",
+          properties: {
+              selector: {
+                  type: "string",
+                  description: "CSS selector of the element.",
+              },
+              properties: {
+                  type: "array",
+                  items: { type: "string" },
+                  description: 'CSS property names to retrieve, e.g. ["color", "font-size"]. Omit for common defaults.',
+              },
+          },
+          required: ["selector"],
+      },
+  };
+  function getElementBounds(selector) {
+      const el = document.querySelector(selector);
+      if (!el) {
+          return { error: `No element found for selector: ${selector}` };
+      }
+      const rect = el.getBoundingClientRect();
+      return {
+          bounds: {
+              x: Math.round(rect.x),
+              y: Math.round(rect.y),
+              width: Math.round(rect.width),
+              height: Math.round(rect.height),
+          },
+          visible: rect.width > 0 &&
+              rect.height > 0 &&
+              getComputedStyle(el).visibility !== "hidden" &&
+              getComputedStyle(el).display !== "none",
+      };
+  }
+  getElementBounds.__schema__ = {
+      name: "getElementBounds",
+      description: "Get the bounding rectangle and visibility of a DOM element.",
+      parameters: {
+          type: "object",
+          properties: {
+              selector: {
+                  type: "string",
+                  description: "CSS selector of the element.",
+              },
+          },
+          required: ["selector"],
+      },
+  };
   function getHtml(selector, outer, max_length) {
       const useOuter = outer ?? true;
       const maxLen = max_length ?? 50000;
@@ -10502,6 +10609,60 @@
           required: ["url"],
       },
   };
+  function goBack() {
+      try {
+          window.history.back();
+          return { success: true, message: "Navigated back" };
+      }
+      catch (err) {
+          return { success: false, message: `Back navigation failed: ${err.message ?? err}` };
+      }
+  }
+  goBack.__schema__ = {
+      name: "goBack",
+      description: "Navigate back in browser history.",
+      parameters: {
+          type: "object",
+          properties: {},
+      },
+  };
+  function goForward() {
+      try {
+          window.history.forward();
+          return { success: true, message: "Navigated forward" };
+      }
+      catch (err) {
+          return {
+              success: false,
+              message: `Forward navigation failed: ${err.message ?? err}`,
+          };
+      }
+  }
+  goForward.__schema__ = {
+      name: "goForward",
+      description: "Navigate forward in browser history.",
+      parameters: {
+          type: "object",
+          properties: {},
+      },
+  };
+  function reload() {
+      try {
+          window.location.reload();
+          return { success: true, message: "Reloading page" };
+      }
+      catch (err) {
+          return { success: false, message: `Reload failed: ${err.message ?? err}` };
+      }
+  }
+  reload.__schema__ = {
+      name: "reload",
+      description: "Reload the current page.",
+      parameters: {
+          type: "object",
+          properties: {},
+      },
+  };
 
   /**
    * React component tree inspection service.
@@ -10844,6 +11005,33 @@
       return [frontmatter, intro, functionDocs.join("\n"), tips].join("\n");
   }
 
+  /**
+   * Wrap a function with correct, unminified parameter names for hypha-rpc.
+   *
+   * In production builds, Babel/Terser minifies parameter names (e.g. 'code' → 'e').
+   * hypha-rpc's getParamNames() parses Function.toString() to map kwargs to
+   * positional args. With minified names, kwargs like {code: '...'} can't be
+   * mapped and args are silently dropped.
+   *
+   * This helper uses new Function() to create a wrapper whose parameter names
+   * are taken from the function's __schema__ property, so hypha-rpc always sees
+   * the real parameter names regardless of minification.
+   */
+  function wrapFn(fn) {
+      const schema = fn.__schema__;
+      const paramNames = schema?.parameters?.properties
+          ? Object.keys(schema.parameters.properties)
+          : [];
+      if (paramNames.length === 0) {
+          return fn;
+      }
+      const paramList = paramNames.join(", ");
+      const wrapper = new Function("fn", `return async function(${paramList}) { return fn(${paramList}); }`)(fn);
+      if (schema)
+          wrapper.__schema__ = schema;
+      return wrapper;
+  }
+
   /**
    * @file port from browser-use
    * @see https://github.com/browser-use/browser-use/commits/main/browser_use/dom/dom_tree/index.js
@@ -13847,50 +14035,39 @@
           lines.push(``, `# 1. Get interactive elements (smart DOM analysis with indexed elements):`, `curl "$SERVICE_URL/get_browser_state"${auth}`, ``, `# 2. Click element by index (e.g. click [3]):`, `curl -X POST "$SERVICE_URL/click_element_by_index"${auth} -H "Content-Type: application/json" -d '{"index": 3}'`, ``, `# 3. Type into an input by index:`, `curl -X POST "$SERVICE_URL/input_text"${auth} -H "Content-Type: application/json" -d '{"index": 5, "text": "hello"}'`, ``, `# Take a screenshot:`, `curl "$SERVICE_URL/take_screenshot"${auth}`, ``, `# Execute JavaScript remotely:`, `curl -X POST "$SERVICE_URL/execute_script"${auth} -H "Content-Type: application/json" -d '{"code": "document.title"}'`, ``, `# Full API docs:`, `curl "$SERVICE_URL/get_skill_md"${auth}`);
           return lines.join("\n");
       }
-      /** Wrap a service function with logging and kwargs-to-positional-args support. */
+      /**
+       * Wrap a service function with overlay logging + correct parameter names.
+       *
+       * Adds logging around the function, then applies baseWrapFn() which uses
+       * new Function() to create a wrapper with unminified parameter names from
+       * __schema__. This is critical for production builds where Babel/Terser
+       * minifies parameter names — hypha-rpc's getParamNames() parses
+       * Function.toString() to map kwargs to positional args.
+       */
       wrapFn(fn, name) {
-          const wrapped = async (...args) => {
-              // Hypha's HTTP API calls with keyword arguments (**kwargs),
-              // which arrive on the JS side as a single object argument.
-              // Destructure into positional args based on schema properties.
-              if (args.length === 1 &&
-                  args[0] &&
-                  typeof args[0] === "object" &&
-                  !Array.isArray(args[0]) &&
-                  fn.__schema__?.parameters?.properties) {
-                  const kwargs = args[0];
-                  const props = fn.__schema__.parameters.properties;
-                  const paramNames = Object.keys(props);
-                  // Check if any kwargs key matches a schema property name
-                  const hasMatchingKey = paramNames.some((p) => p in kwargs);
-                  if (hasMatchingKey) {
-                      args = paramNames.map((p) => kwargs[p]);
-                      while (args.length > 0 && args[args.length - 1] === undefined) {
-                          args.pop();
-                      }
-                  }
-              }
-              this.overlay?.addLog(`${name}(${this.summarizeArgs(args)})`, "call");
+          const self = this;
+          const logged = async (...args) => {
+              self.overlay?.addLog(`${name}(${self.summarizeArgs(args)})`, "call");
               try {
                   const result = await fn(...args);
                   const hasError = result && typeof result === "object" && "error" in result;
                   if (hasError) {
-                      this.overlay?.addLog(`${name}: ${result.error}`, "error");
+                      self.overlay?.addLog(`${name}: ${result.error}`, "error");
                   }
                   else {
-                      this.overlay?.addLog(`${name} -> OK`, "result");
+                      self.overlay?.addLog(`${name} -> OK`, "result");
                   }
                   return result;
               }
               catch (err) {
-                  this.overlay?.addLog(`${name}: ${err.message}`, "error");
+                  self.overlay?.addLog(`${name}: ${err.message}`, "error");
                   throw err;
               }
           };
-          if (fn.__schema__) {
-              wrapped.__schema__ = fn.__schema__;
-          }
-          return wrapped;
+          // Preserve __schema__ so baseWrapFn can read parameter names
+          if (fn.__schema__)
+              logged.__schema__ = fn.__schema__;
+          return wrapFn(logged);
       }
       summarizeArgs(args) {
           if (args.length === 0)
@@ -13920,7 +14097,11 @@
    * Programmatic usage:
    *   import { startDebugger } from 'hypha-debugger';
    *   const session = await startDebugger({ server_url: 'https://hypha.aicell.io' });
+   *
+   * Library usage (import individual functions):
+   *   import { getPageInfo, clickElement, wrapFn, PageController } from 'hypha-debugger';
    */
+  // ── Core debugger ──
   /**
    * Start the Hypha debugger. Connects to a Hypha server and registers
    * a debug service that remote clients can use to inspect and interact
@@ -13989,8 +14170,36 @@
       }
   }
 
+  exports.AICursor = AICursor;
   exports.HyphaDebugger = HyphaDebugger;
+  exports.PageController = PageController;
+  exports.clickElement = clickElement$1;
+  exports.clickElementByIndex = clickElementByIndex;
+  exports.disposeController = disposeController;
+  exports.executeScript = executeScript;
+  exports.fillInput = fillInput;
+  exports.generateSkillMd = generateSkillMd;
+  exports.getBrowserState = getBrowserState;
+  exports.getComputedStyles = getComputedStyles;
+  exports.getConsoleLogs = getConsoleLogs;
+  exports.getElementBounds = getElementBounds;
+  exports.getHtml = getHtml;
+  exports.getPageInfo = getPageInfo;
+  exports.getReactTree = getReactTree;
+  exports.goBack = goBack;
+  exports.goForward = goForward;
+  exports.inputText = inputText;
+  exports.installConsoleCapture = installConsoleCapture;
+  exports.navigate = navigate;
+  exports.queryDom = queryDom;
+  exports.reload = reload;
+  exports.removeHighlights = removeHighlights;
+  exports.scroll = scroll;
+  exports.scrollTo = scrollTo;
+  exports.selectOption = selectOption;
   exports.startDebugger = startDebugger;
+  exports.takeScreenshot = takeScreenshot;
+  exports.wrapFn = wrapFn;
 
 }));
 //# sourceMappingURL=hypha-debugger.js.map