hypha-debugger 0.1.0

package/dist/hypha-debugger.js

@@ -0,0 +1,2400 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('hypha-rpc')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'hypha-rpc'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.hyphaDebugger = {}, global.hyphaWebsocketClient));
+})(this, (function (exports, hyphaRpc) { 'use strict';
+
+  function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+      Object.keys(e).forEach(function (k) {
+        if (k !== 'default') {
+          var d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: function () { return e[k]; }
+          });
+        }
+      });
+    }
+    n.default = e;
+    return Object.freeze(n);
+  }
+
+  var hyphaRpc__namespace = /*#__PURE__*/_interopNamespaceDefault(hyphaRpc);
+
+  /**
+   * Scoped CSS for the debug overlay, injected into Shadow DOM.
+   */
+  const overlayStyles = `
+  :host {
+    all: initial;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  }
+
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  .debugger-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: #4a90d9;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    transition: transform 0.15s, background 0.15s;
+    user-select: none;
+    font-size: 18px;
+    line-height: 1;
+  }
+
+  .debugger-icon:hover {
+    transform: scale(1.1);
+    background: #357abd;
+  }
+
+  .debugger-icon.connected {
+    background: #27ae60;
+  }
+
+  .debugger-icon.error {
+    background: #e74c3c;
+  }
+
+  .debugger-panel {
+    display: none;
+    width: 320px;
+    max-height: 420px;
+    background: #1e1e2e;
+    color: #cdd6f4;
+    border-radius: 8px;
+    border: 1px solid #45475a;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    overflow: hidden;
+    flex-direction: column;
+    position: absolute;
+    bottom: 50px;
+    right: 0;
+    font-size: 13px;
+  }
+
+  .debugger-panel.open {
+    display: flex;
+  }
+
+  .panel-header {
+    background: #313244;
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: default;
+    border-bottom: 1px solid #45475a;
+    font-weight: 600;
+    font-size: 12px;
+    letter-spacing: 0.3px;
+    text-transform: uppercase;
+    color: #a6adc8;
+  }
+
+  .panel-header .title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .panel-header .close-btn {
+    cursor: pointer;
+    color: #6c7086;
+    font-size: 16px;
+    line-height: 1;
+    padding: 2px 4px;
+    border-radius: 3px;
+  }
+
+  .panel-header .close-btn:hover {
+    color: #cdd6f4;
+    background: #45475a;
+  }
+
+  .status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+    background: #6c7086;
+  }
+
+  .status-dot.connected {
+    background: #a6e3a1;
+  }
+
+  .status-dot.error {
+    background: #f38ba8;
+  }
+
+  .panel-body {
+    padding: 10px 12px;
+    overflow-y: auto;
+    flex: 1;
+    max-height: 340px;
+  }
+
+  .info-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 4px 0;
+    border-bottom: 1px solid #313244;
+    font-size: 12px;
+  }
+
+  .info-row .label {
+    color: #6c7086;
+  }
+
+  .info-row .value {
+    color: #cdd6f4;
+    text-align: right;
+    word-break: break-all;
+    max-width: 180px;
+    font-family: 'SF Mono', Monaco, Consolas, monospace;
+    font-size: 11px;
+  }
+
+  .url-section {
+    margin-top: 8px;
+    padding-top: 6px;
+    border-top: 1px solid #313244;
+  }
+
+  .url-label {
+    font-size: 11px;
+    color: #6c7086;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 3px;
+  }
+
+  .url-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background: #313244;
+    border-radius: 3px;
+    padding: 4px 6px;
+  }
+
+  .url-text {
+    flex: 1;
+    font-family: 'SF Mono', Monaco, Consolas, monospace;
+    font-size: 10px;
+    color: #89b4fa;
+    word-break: break-all;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  .copy-btn {
+    background: #45475a;
+    color: #cdd6f4;
+    border: none;
+    border-radius: 3px;
+    padding: 2px 8px;
+    font-size: 10px;
+    cursor: pointer;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .copy-btn:hover {
+    background: #585b70;
+  }
+
+  .log-section {
+    margin-top: 8px;
+  }
+
+  .log-title {
+    font-size: 11px;
+    color: #6c7086;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+  }
+
+  .log-entry {
+    font-family: 'SF Mono', Monaco, Consolas, monospace;
+    font-size: 11px;
+    padding: 3px 6px;
+    border-radius: 3px;
+    background: #313244;
+    margin-bottom: 2px;
+    color: #a6adc8;
+    word-break: break-all;
+  }
+
+  .log-entry.call {
+    border-left: 2px solid #89b4fa;
+  }
+
+  .log-entry.result {
+    border-left: 2px solid #a6e3a1;
+  }
+
+  .log-entry.error {
+    border-left: 2px solid #f38ba8;
+    color: #f38ba8;
+  }
+`;
+
+  /**
+   * Floating debug overlay built with Shadow DOM for style isolation.
+   */
+  class DebugOverlay {
+      constructor(options) {
+          this.isOpen = false;
+          this.isDragging = false;
+          this.dragOffset = { x: 0, y: 0 };
+          this.maxLogEntries = 50;
+          // Create host container
+          this.host = document.createElement("div");
+          this.host.id = "hypha-debugger-host";
+          Object.assign(this.host.style, {
+              position: "fixed",
+              bottom: "20px",
+              right: "20px",
+              zIndex: "2147483647",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-end",
+          });
+          if (options?.position) {
+              this.host.style.bottom = "auto";
+              this.host.style.right = "auto";
+              this.host.style.left = options.position.x + "px";
+              this.host.style.top = options.position.y + "px";
+          }
+          // Attach shadow DOM
+          this.shadow = this.host.attachShadow({ mode: "open" });
+          // Inject styles
+          const style = document.createElement("style");
+          style.textContent = overlayStyles;
+          this.shadow.appendChild(style);
+          // Build UI
+          const wrapper = document.createElement("div");
+          wrapper.style.position = "relative";
+          wrapper.style.display = "flex";
+          wrapper.style.flexDirection = "column";
+          wrapper.style.alignItems = "flex-end";
+          // Panel (hidden by default)
+          this.panel = document.createElement("div");
+          this.panel.className = "debugger-panel";
+          const header = document.createElement("div");
+          header.className = "panel-header";
+          const titleSpan = document.createElement("span");
+          titleSpan.className = "title";
+          this.statusDot = document.createElement("span");
+          this.statusDot.className = "status-dot";
+          titleSpan.appendChild(this.statusDot);
+          titleSpan.appendChild(document.createTextNode(" Hypha Debugger"));
+          const closeBtn = document.createElement("span");
+          closeBtn.className = "close-btn";
+          closeBtn.textContent = "\u00d7";
+          closeBtn.addEventListener("click", () => this.toggle());
+          header.appendChild(titleSpan);
+          header.appendChild(closeBtn);
+          const body = document.createElement("div");
+          body.className = "panel-body";
+          this.infoBody = document.createElement("div");
+          body.appendChild(this.infoBody);
+          const logSection = document.createElement("div");
+          logSection.className = "log-section";
+          const logTitle = document.createElement("div");
+          logTitle.className = "log-title";
+          logTitle.textContent = "Remote Operations";
+          this.logContainer = document.createElement("div");
+          logSection.appendChild(logTitle);
+          logSection.appendChild(this.logContainer);
+          body.appendChild(logSection);
+          this.panel.appendChild(header);
+          this.panel.appendChild(body);
+          // Floating icon
+          this.icon = document.createElement("div");
+          this.icon.className = "debugger-icon";
+          this.icon.textContent = "\u{1f41b}";
+          this.icon.addEventListener("click", (e) => {
+              if (!this.isDragging)
+                  this.toggle();
+          });
+          wrapper.appendChild(this.panel);
+          wrapper.appendChild(this.icon);
+          this.shadow.appendChild(wrapper);
+          // Mount to page
+          document.documentElement.appendChild(this.host);
+          // Dragging
+          this.setupDrag();
+      }
+      setupDrag() {
+          let startX = 0;
+          let startY = 0;
+          let moved = false;
+          this.icon.addEventListener("mousedown", (e) => {
+              startX = e.clientX;
+              startY = e.clientY;
+              moved = false;
+              const rect = this.host.getBoundingClientRect();
+              this.dragOffset.x = e.clientX - rect.left;
+              this.dragOffset.y = e.clientY - rect.top;
+              e.preventDefault();
+          });
+          document.addEventListener("mousemove", (e) => {
+              if (startX === 0 && startY === 0)
+                  return;
+              const dx = Math.abs(e.clientX - startX);
+              const dy = Math.abs(e.clientY - startY);
+              if (dx > 3 || dy > 3) {
+                  moved = true;
+                  this.isDragging = true;
+                  this.host.style.left = e.clientX - this.dragOffset.x + "px";
+                  this.host.style.top = e.clientY - this.dragOffset.y + "px";
+                  this.host.style.right = "auto";
+                  this.host.style.bottom = "auto";
+              }
+          });
+          document.addEventListener("mouseup", () => {
+              startX = 0;
+              startY = 0;
+              if (moved) {
+                  // Delay clearing isDragging so click handler doesn't fire
+                  setTimeout(() => {
+                      this.isDragging = false;
+                  }, 50);
+              }
+          });
+      }
+      toggle() {
+          this.isOpen = !this.isOpen;
+          this.panel.classList.toggle("open", this.isOpen);
+      }
+      setStatus(status) {
+          this.statusDot.className = "status-dot";
+          this.icon.className = "debugger-icon";
+          if (status === "connected") {
+              this.statusDot.classList.add("connected");
+              this.icon.classList.add("connected");
+          }
+          else if (status === "error") {
+              this.statusDot.classList.add("error");
+              this.icon.classList.add("error");
+          }
+      }
+      setInfo(info) {
+          this.infoBody.innerHTML = "";
+          for (const [label, value] of Object.entries(info)) {
+              const row = document.createElement("div");
+              row.className = "info-row";
+              const labelSpan = document.createElement("span");
+              labelSpan.className = "label";
+              labelSpan.textContent = label;
+              const valueSpan = document.createElement("span");
+              valueSpan.className = "value";
+              valueSpan.textContent = value;
+              valueSpan.title = value;
+              row.appendChild(labelSpan);
+              row.appendChild(valueSpan);
+              this.infoBody.appendChild(row);
+          }
+      }
+      /** Show the service URL with a copy button. */
+      setServiceUrl(url, token) {
+          const section = document.createElement("div");
+          section.className = "url-section";
+          const urlLabel = document.createElement("div");
+          urlLabel.className = "url-label";
+          urlLabel.textContent = "Service URL";
+          section.appendChild(urlLabel);
+          const urlRow = document.createElement("div");
+          urlRow.className = "url-row";
+          const urlText = document.createElement("span");
+          urlText.className = "url-text";
+          urlText.textContent = url;
+          urlText.title = url;
+          const copyBtn = document.createElement("button");
+          copyBtn.className = "copy-btn";
+          copyBtn.textContent = "Copy";
+          copyBtn.addEventListener("click", () => {
+              navigator.clipboard.writeText(url).then(() => {
+                  copyBtn.textContent = "Copied!";
+                  setTimeout(() => { copyBtn.textContent = "Copy"; }, 1500);
+              });
+          });
+          urlRow.appendChild(urlText);
+          urlRow.appendChild(copyBtn);
+          section.appendChild(urlRow);
+          const tokenLabel = document.createElement("div");
+          tokenLabel.className = "url-label";
+          tokenLabel.textContent = "Token";
+          tokenLabel.style.marginTop = "6px";
+          section.appendChild(tokenLabel);
+          const tokenRow = document.createElement("div");
+          tokenRow.className = "url-row";
+          const tokenText = document.createElement("span");
+          tokenText.className = "url-text";
+          tokenText.textContent = token.slice(0, 20) + "...";
+          tokenText.title = token;
+          const copyTokenBtn = document.createElement("button");
+          copyTokenBtn.className = "copy-btn";
+          copyTokenBtn.textContent = "Copy";
+          copyTokenBtn.addEventListener("click", () => {
+              navigator.clipboard.writeText(token).then(() => {
+                  copyTokenBtn.textContent = "Copied!";
+                  setTimeout(() => { copyTokenBtn.textContent = "Copy"; }, 1500);
+              });
+          });
+          tokenRow.appendChild(tokenText);
+          tokenRow.appendChild(copyTokenBtn);
+          section.appendChild(tokenRow);
+          this.infoBody.appendChild(section);
+      }
+      addLog(message, type = "call") {
+          const entry = document.createElement("div");
+          entry.className = `log-entry ${type}`;
+          entry.textContent = message;
+          this.logContainer.appendChild(entry);
+          // Trim old entries
+          while (this.logContainer.children.length > this.maxLogEntries) {
+              this.logContainer.removeChild(this.logContainer.firstChild);
+          }
+          // Auto-scroll
+          const body = this.panel.querySelector(".panel-body");
+          if (body)
+              body.scrollTop = body.scrollHeight;
+      }
+      destroy() {
+          this.host.remove();
+      }
+  }
+
+  /**
+   * Environment detection and page metadata collection.
+   */
+  function detectFrameworks() {
+      const frameworks = [];
+      const w = window;
+      // React
+      if (w.__REACT_DEVTOOLS_GLOBAL_HOOK__?.renderers?.size > 0) {
+          frameworks.push("react");
+      }
+      else {
+          const root = document.querySelector("#root, #app, [data-reactroot]");
+          if (root) {
+              const hasReactFiber = Object.keys(root).some((k) => k.startsWith("__reactFiber$") ||
+                  k.startsWith("__reactInternalInstance$"));
+              if (hasReactFiber)
+                  frameworks.push("react");
+          }
+      }
+      // Vue
+      if (w.__VUE__ || w.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
+          frameworks.push("vue");
+      }
+      else {
+          const el = document.querySelector("[data-v-app], #app");
+          if (el && el.__vue_app__)
+              frameworks.push("vue");
+      }
+      // Angular
+      if (w.ng || document.querySelector("[ng-version]")) {
+          frameworks.push("angular");
+      }
+      // Svelte
+      if (document.querySelector("[class*='svelte-']")) {
+          frameworks.push("svelte");
+      }
+      // Next.js
+      if (w.__NEXT_DATA__) {
+          frameworks.push("nextjs");
+      }
+      return frameworks;
+  }
+  function collectPageInfo() {
+      const perf = performance.getEntriesByType("navigation")[0];
+      return {
+          url: window.location.href,
+          title: document.title,
+          viewport: {
+              width: window.innerWidth,
+              height: window.innerHeight,
+          },
+          document_size: {
+              width: document.documentElement.scrollWidth,
+              height: document.documentElement.scrollHeight,
+          },
+          user_agent: navigator.userAgent,
+          timestamp: new Date().toISOString(),
+          cookies_enabled: navigator.cookieEnabled,
+          language: navigator.language,
+          platform: navigator.platform,
+          online: navigator.onLine,
+          performance: {
+              load_time_ms: perf ? Math.round(perf.loadEventEnd - perf.startTime) : null,
+              dom_content_loaded_ms: perf
+                  ? Math.round(perf.domContentLoadedEventEnd - perf.startTime)
+                  : null,
+          },
+          frameworks: detectFrameworks(),
+      };
+  }
+
+  /**
+   * Page information service.
+   */
+  function getPageInfo() {
+      return collectPageInfo();
+  }
+  getPageInfo.__schema__ = {
+      name: "getPageInfo",
+      description: "Get information about the current web page including URL, title, viewport size, detected frameworks, and performance timing.",
+      parameters: {
+          type: "object",
+          properties: {},
+      },
+  };
+  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;
+      const store = ((_a = window).__HYPHA_DEBUGGER__ ?? (_a.__HYPHA_DEBUGGER__ = {}));
+      if (store.consoleInstalled)
+          return;
+      store.consoleLogs = [];
+      store.consoleInstalled = true;
+      const levels = ["log", "warn", "error", "info"];
+      for (const level of levels) {
+          const original = console[level].bind(console);
+          console[level] = (...args) => {
+              const logs = store.consoleLogs;
+              logs.push({
+                  level,
+                  message: args
+                      .map((a) => {
+                      try {
+                          return typeof a === "string" ? a : JSON.stringify(a);
+                      }
+                      catch {
+                          return String(a);
+                      }
+                  })
+                      .join(" "),
+                  timestamp: new Date().toISOString(),
+              });
+              if (logs.length > maxEntries) {
+                  logs.splice(0, logs.length - maxEntries);
+              }
+              original(...args);
+          };
+      }
+  }
+
+  /**
+   * DOM query and manipulation service.
+   */
+  function elementToInfo(el) {
+      const rect = el.getBoundingClientRect();
+      const attrs = {};
+      for (const attr of Array.from(el.attributes)) {
+          attrs[attr.name] = attr.value;
+      }
+      return {
+          tag: el.tagName.toLowerCase(),
+          id: el.id,
+          classes: Array.from(el.classList),
+          text: (el.textContent ?? "").trim().slice(0, 500),
+          attributes: attrs,
+          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",
+          children_count: el.children.length,
+      };
+  }
+  function queryDom(selector, options) {
+      const limit = options?.limit ?? 20;
+      const elements = document.querySelectorAll(selector);
+      const results = [];
+      for (let i = 0; i < Math.min(elements.length, limit); i++) {
+          results.push(elementToInfo(elements[i]));
+      }
+      return results;
+  }
+  queryDom.__schema__ = {
+      name: "queryDom",
+      description: "Query DOM elements by CSS selector. Returns tag, id, classes, text content, attributes, bounding rect, and visibility for each matching element.",
+      parameters: {
+          type: "object",
+          properties: {
+              selector: {
+                  type: "string",
+                  description: 'CSS selector to query, e.g. "button.primary", "#app > div".',
+              },
+              limit: {
+                  type: "number",
+                  description: "Maximum number of elements to return. Default: 20.",
+              },
+          },
+          required: ["selector"],
+      },
+  };
+  function clickElement(selector) {
+      const el = document.querySelector(selector);
+      if (!el) {
+          return { success: false, message: `No element found for selector: ${selector}` };
+      }
+      const rect = el.getBoundingClientRect();
+      el.dispatchEvent(new MouseEvent("click", {
+          bubbles: true,
+          cancelable: true,
+          view: window,
+          clientX: rect.left + rect.width / 2,
+          clientY: rect.top + rect.height / 2,
+      }));
+      return { success: true, message: `Clicked element: ${selector}` };
+  }
+  clickElement.__schema__ = {
+      name: "clickElement",
+      description: "Click a DOM element matching the CSS selector.",
+      parameters: {
+          type: "object",
+          properties: {
+              selector: {
+                  type: "string",
+                  description: "CSS selector of the element to click.",
+              },
+          },
+          required: ["selector"],
+      },
+  };
+  function fillInput(selector, value) {
+      const el = document.querySelector(selector);
+      if (!el) {
+          return { success: false, message: `No element found for selector: ${selector}` };
+      }
+      const tag = el.tagName.toLowerCase();
+      if (tag === "input" || tag === "textarea") {
+          const inputEl = el;
+          // Use native setter to bypass React controlled component interception
+          const proto = tag === "textarea"
+              ? HTMLTextAreaElement.prototype
+              : HTMLInputElement.prototype;
+          const nativeSetter = Object.getOwnPropertyDescriptor(proto, "value")?.set;
+          if (nativeSetter) {
+              nativeSetter.call(inputEl, value);
+          }
+          else {
+              inputEl.value = value;
+          }
+          inputEl.dispatchEvent(new Event("input", { bubbles: true }));
+          inputEl.dispatchEvent(new Event("change", { bubbles: true }));
+          return { success: true, message: `Filled ${selector} with value` };
+      }
+      if (tag === "select") {
+          const selectEl = el;
+          const nativeSetter = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value")?.set;
+          if (nativeSetter) {
+              nativeSetter.call(selectEl, value);
+          }
+          else {
+              selectEl.value = value;
+          }
+          selectEl.dispatchEvent(new Event("change", { bubbles: true }));
+          return { success: true, message: `Set ${selector} to ${value}` };
+      }
+      return { success: false, message: `Element ${selector} is not an input/textarea/select` };
+  }
+  fillInput.__schema__ = {
+      name: "fillInput",
+      description: "Set the value of an input, textarea, or select element. Works with React controlled components.",
+      parameters: {
+          type: "object",
+          properties: {
+              selector: {
+                  type: "string",
+                  description: "CSS selector of the input element.",
+              },
+              value: {
+                  type: "string",
+                  description: "The value to set.",
+              },
+          },
+          required: ["selector", "value"],
+      },
+  };
+  function scrollTo(target) {
+      if (typeof target === "string") {
+          const el = document.querySelector(target);
+          if (!el) {
+              return { success: false, message: `No element found for selector: ${target}` };
+          }
+          el.scrollIntoView({ behavior: "smooth", block: "center" });
+          return { success: true, message: `Scrolled to ${target}` };
+      }
+      window.scrollTo({ left: target.x, top: target.y, behavior: "smooth" });
+      return { success: true, message: `Scrolled to (${target.x}, ${target.y})` };
+  }
+  scrollTo.__schema__ = {
+      name: "scrollTo",
+      description: "Scroll to a DOM element (by CSS selector) or to an absolute position {x, y}.",
+      parameters: {
+          type: "object",
+          properties: {
+              target: {
+                  description: 'CSS selector string to scroll to an element, or an object {x, y} for absolute scroll position.',
+              },
+          },
+          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 resolveUrl(url, baseUrl) {
+      // url is absolute already
+      if (url.match(/^[a-z]+:\/\//i)) {
+          return url;
+      }
+      // url is absolute already, without protocol
+      if (url.match(/^\/\//)) {
+          return window.location.protocol + url;
+      }
+      // dataURI, mailto:, tel:, etc.
+      if (url.match(/^[a-z]+:/i)) {
+          return url;
+      }
+      const doc = document.implementation.createHTMLDocument();
+      const base = doc.createElement('base');
+      const a = doc.createElement('a');
+      doc.head.appendChild(base);
+      doc.body.appendChild(a);
+      if (baseUrl) {
+          base.href = baseUrl;
+      }
+      a.href = url;
+      return a.href;
+  }
+  const uuid = (() => {
+      // generate uuid for className of pseudo elements.
+      // We should not use GUIDs, otherwise pseudo elements sometimes cannot be captured.
+      let counter = 0;
+      // ref: http://stackoverflow.com/a/6248722/2519373
+      const random = () => 
+      // eslint-disable-next-line no-bitwise
+      `0000${((Math.random() * 36 ** 4) << 0).toString(36)}`.slice(-4);
+      return () => {
+          counter += 1;
+          return `u${random()}${counter}`;
+      };
+  })();
+  function toArray(arrayLike) {
+      const arr = [];
+      for (let i = 0, l = arrayLike.length; i < l; i++) {
+          arr.push(arrayLike[i]);
+      }
+      return arr;
+  }
+  let styleProps = null;
+  function getStyleProperties(options = {}) {
+      if (styleProps) {
+          return styleProps;
+      }
+      if (options.includeStyleProperties) {
+          styleProps = options.includeStyleProperties;
+          return styleProps;
+      }
+      styleProps = toArray(window.getComputedStyle(document.documentElement));
+      return styleProps;
+  }
+  function px(node, styleProperty) {
+      const win = node.ownerDocument.defaultView || window;
+      const val = win.getComputedStyle(node).getPropertyValue(styleProperty);
+      return val ? parseFloat(val.replace('px', '')) : 0;
+  }
+  function getNodeWidth(node) {
+      const leftBorder = px(node, 'border-left-width');
+      const rightBorder = px(node, 'border-right-width');
+      return node.clientWidth + leftBorder + rightBorder;
+  }
+  function getNodeHeight(node) {
+      const topBorder = px(node, 'border-top-width');
+      const bottomBorder = px(node, 'border-bottom-width');
+      return node.clientHeight + topBorder + bottomBorder;
+  }
+  function getImageSize(targetNode, options = {}) {
+      const width = options.width || getNodeWidth(targetNode);
+      const height = options.height || getNodeHeight(targetNode);
+      return { width, height };
+  }
+  function getPixelRatio() {
+      let ratio;
+      let FINAL_PROCESS;
+      try {
+          FINAL_PROCESS = process;
+      }
+      catch (e) {
+          // pass
+      }
+      const val = FINAL_PROCESS && FINAL_PROCESS.env
+          ? FINAL_PROCESS.env.devicePixelRatio
+          : null;
+      if (val) {
+          ratio = parseInt(val, 10);
+          if (Number.isNaN(ratio)) {
+              ratio = 1;
+          }
+      }
+      return ratio || window.devicePixelRatio || 1;
+  }
+  // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
+  const canvasDimensionLimit = 16384;
+  function checkCanvasDimensions(canvas) {
+      if (canvas.width > canvasDimensionLimit ||
+          canvas.height > canvasDimensionLimit) {
+          if (canvas.width > canvasDimensionLimit &&
+              canvas.height > canvasDimensionLimit) {
+              if (canvas.width > canvas.height) {
+                  canvas.height *= canvasDimensionLimit / canvas.width;
+                  canvas.width = canvasDimensionLimit;
+              }
+              else {
+                  canvas.width *= canvasDimensionLimit / canvas.height;
+                  canvas.height = canvasDimensionLimit;
+              }
+          }
+          else if (canvas.width > canvasDimensionLimit) {
+              canvas.height *= canvasDimensionLimit / canvas.width;
+              canvas.width = canvasDimensionLimit;
+          }
+          else {
+              canvas.width *= canvasDimensionLimit / canvas.height;
+              canvas.height = canvasDimensionLimit;
+          }
+      }
+  }
+  function createImage(url) {
+      return new Promise((resolve, reject) => {
+          const img = new Image();
+          img.onload = () => {
+              img.decode().then(() => {
+                  requestAnimationFrame(() => resolve(img));
+              });
+          };
+          img.onerror = reject;
+          img.crossOrigin = 'anonymous';
+          img.decoding = 'async';
+          img.src = url;
+      });
+  }
+  async function svgToDataURL(svg) {
+      return Promise.resolve()
+          .then(() => new XMLSerializer().serializeToString(svg))
+          .then(encodeURIComponent)
+          .then((html) => `data:image/svg+xml;charset=utf-8,${html}`);
+  }
+  async function nodeToDataURL(node, width, height) {
+      const xmlns = 'http://www.w3.org/2000/svg';
+      const svg = document.createElementNS(xmlns, 'svg');
+      const foreignObject = document.createElementNS(xmlns, 'foreignObject');
+      svg.setAttribute('width', `${width}`);
+      svg.setAttribute('height', `${height}`);
+      svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+      foreignObject.setAttribute('width', '100%');
+      foreignObject.setAttribute('height', '100%');
+      foreignObject.setAttribute('x', '0');
+      foreignObject.setAttribute('y', '0');
+      foreignObject.setAttribute('externalResourcesRequired', 'true');
+      svg.appendChild(foreignObject);
+      foreignObject.appendChild(node);
+      return svgToDataURL(svg);
+  }
+  const isInstanceOfElement = (node, instance) => {
+      if (node instanceof instance)
+          return true;
+      const nodePrototype = Object.getPrototypeOf(node);
+      if (nodePrototype === null)
+          return false;
+      return (nodePrototype.constructor.name === instance.name ||
+          isInstanceOfElement(nodePrototype, instance));
+  };
+
+  function formatCSSText(style) {
+      const content = style.getPropertyValue('content');
+      return `${style.cssText} content: '${content.replace(/'|"/g, '')}';`;
+  }
+  function formatCSSProperties(style, options) {
+      return getStyleProperties(options)
+          .map((name) => {
+          const value = style.getPropertyValue(name);
+          const priority = style.getPropertyPriority(name);
+          return `${name}: ${value}${priority ? ' !important' : ''};`;
+      })
+          .join(' ');
+  }
+  function getPseudoElementStyle(className, pseudo, style, options) {
+      const selector = `.${className}:${pseudo}`;
+      const cssText = style.cssText
+          ? formatCSSText(style)
+          : formatCSSProperties(style, options);
+      return document.createTextNode(`${selector}{${cssText}}`);
+  }
+  function clonePseudoElement(nativeNode, clonedNode, pseudo, options) {
+      const style = window.getComputedStyle(nativeNode, pseudo);
+      const content = style.getPropertyValue('content');
+      if (content === '' || content === 'none') {
+          return;
+      }
+      const className = uuid();
+      try {
+          clonedNode.className = `${clonedNode.className} ${className}`;
+      }
+      catch (err) {
+          return;
+      }
+      const styleElement = document.createElement('style');
+      styleElement.appendChild(getPseudoElementStyle(className, pseudo, style, options));
+      clonedNode.appendChild(styleElement);
+  }
+  function clonePseudoElements(nativeNode, clonedNode, options) {
+      clonePseudoElement(nativeNode, clonedNode, ':before', options);
+      clonePseudoElement(nativeNode, clonedNode, ':after', options);
+  }
+
+  const WOFF = 'application/font-woff';
+  const JPEG = 'image/jpeg';
+  const mimes = {
+      woff: WOFF,
+      woff2: WOFF,
+      ttf: 'application/font-truetype',
+      eot: 'application/vnd.ms-fontobject',
+      png: 'image/png',
+      jpg: JPEG,
+      jpeg: JPEG,
+      gif: 'image/gif',
+      tiff: 'image/tiff',
+      svg: 'image/svg+xml',
+      webp: 'image/webp',
+  };
+  function getExtension(url) {
+      const match = /\.([^./]*?)$/g.exec(url);
+      return match ? match[1] : '';
+  }
+  function getMimeType(url) {
+      const extension = getExtension(url).toLowerCase();
+      return mimes[extension] || '';
+  }
+
+  function getContentFromDataUrl(dataURL) {
+      return dataURL.split(/,/)[1];
+  }
+  function isDataUrl(url) {
+      return url.search(/^(data:)/) !== -1;
+  }
+  function makeDataUrl(content, mimeType) {
+      return `data:${mimeType};base64,${content}`;
+  }
+  async function fetchAsDataURL(url, init, process) {
+      const res = await fetch(url, init);
+      if (res.status === 404) {
+          throw new Error(`Resource "${res.url}" not found`);
+      }
+      const blob = await res.blob();
+      return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onerror = reject;
+          reader.onloadend = () => {
+              try {
+                  resolve(process({ res, result: reader.result }));
+              }
+              catch (error) {
+                  reject(error);
+              }
+          };
+          reader.readAsDataURL(blob);
+      });
+  }
+  const cache = {};
+  function getCacheKey(url, contentType, includeQueryParams) {
+      let key = url.replace(/\?.*/, '');
+      if (includeQueryParams) {
+          key = url;
+      }
+      // font resource
+      if (/ttf|otf|eot|woff2?/i.test(key)) {
+          key = key.replace(/.*\//, '');
+      }
+      return contentType ? `[${contentType}]${key}` : key;
+  }
+  async function resourceToDataURL(resourceUrl, contentType, options) {
+      const cacheKey = getCacheKey(resourceUrl, contentType, options.includeQueryParams);
+      if (cache[cacheKey] != null) {
+          return cache[cacheKey];
+      }
+      // ref: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
+      if (options.cacheBust) {
+          // eslint-disable-next-line no-param-reassign
+          resourceUrl += (/\?/.test(resourceUrl) ? '&' : '?') + new Date().getTime();
+      }
+      let dataURL;
+      try {
+          const content = await fetchAsDataURL(resourceUrl, options.fetchRequestInit, ({ res, result }) => {
+              if (!contentType) {
+                  // eslint-disable-next-line no-param-reassign
+                  contentType = res.headers.get('Content-Type') || '';
+              }
+              return getContentFromDataUrl(result);
+          });
+          dataURL = makeDataUrl(content, contentType);
+      }
+      catch (error) {
+          dataURL = options.imagePlaceholder || '';
+          let msg = `Failed to fetch resource: ${resourceUrl}`;
+          if (error) {
+              msg = typeof error === 'string' ? error : error.message;
+          }
+          if (msg) {
+              console.warn(msg);
+          }
+      }
+      cache[cacheKey] = dataURL;
+      return dataURL;
+  }
+
+  async function cloneCanvasElement(canvas) {
+      const dataURL = canvas.toDataURL();
+      if (dataURL === 'data:,') {
+          return canvas.cloneNode(false);
+      }
+      return createImage(dataURL);
+  }
+  async function cloneVideoElement(video, options) {
+      if (video.currentSrc) {
+          const canvas = document.createElement('canvas');
+          const ctx = canvas.getContext('2d');
+          canvas.width = video.clientWidth;
+          canvas.height = video.clientHeight;
+          ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+          const dataURL = canvas.toDataURL();
+          return createImage(dataURL);
+      }
+      const poster = video.poster;
+      const contentType = getMimeType(poster);
+      const dataURL = await resourceToDataURL(poster, contentType, options);
+      return createImage(dataURL);
+  }
+  async function cloneIFrameElement(iframe, options) {
+      var _a;
+      try {
+          if ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.body) {
+              return (await cloneNode(iframe.contentDocument.body, options, true));
+          }
+      }
+      catch (_b) {
+          // Failed to clone iframe
+      }
+      return iframe.cloneNode(false);
+  }
+  async function cloneSingleNode(node, options) {
+      if (isInstanceOfElement(node, HTMLCanvasElement)) {
+          return cloneCanvasElement(node);
+      }
+      if (isInstanceOfElement(node, HTMLVideoElement)) {
+          return cloneVideoElement(node, options);
+      }
+      if (isInstanceOfElement(node, HTMLIFrameElement)) {
+          return cloneIFrameElement(node, options);
+      }
+      return node.cloneNode(isSVGElement(node));
+  }
+  const isSlotElement = (node) => node.tagName != null && node.tagName.toUpperCase() === 'SLOT';
+  const isSVGElement = (node) => node.tagName != null && node.tagName.toUpperCase() === 'SVG';
+  async function cloneChildren(nativeNode, clonedNode, options) {
+      var _a, _b;
+      if (isSVGElement(clonedNode)) {
+          return clonedNode;
+      }
+      let children = [];
+      if (isSlotElement(nativeNode) && nativeNode.assignedNodes) {
+          children = toArray(nativeNode.assignedNodes());
+      }
+      else if (isInstanceOfElement(nativeNode, HTMLIFrameElement) &&
+          ((_a = nativeNode.contentDocument) === null || _a === void 0 ? void 0 : _a.body)) {
+          children = toArray(nativeNode.contentDocument.body.childNodes);
+      }
+      else {
+          children = toArray(((_b = nativeNode.shadowRoot) !== null && _b !== void 0 ? _b : nativeNode).childNodes);
+      }
+      if (children.length === 0 ||
+          isInstanceOfElement(nativeNode, HTMLVideoElement)) {
+          return clonedNode;
+      }
+      await children.reduce((deferred, child) => deferred
+          .then(() => cloneNode(child, options))
+          .then((clonedChild) => {
+          if (clonedChild) {
+              clonedNode.appendChild(clonedChild);
+          }
+      }), Promise.resolve());
+      return clonedNode;
+  }
+  function cloneCSSStyle(nativeNode, clonedNode, options) {
+      const targetStyle = clonedNode.style;
+      if (!targetStyle) {
+          return;
+      }
+      const sourceStyle = window.getComputedStyle(nativeNode);
+      if (sourceStyle.cssText) {
+          targetStyle.cssText = sourceStyle.cssText;
+          targetStyle.transformOrigin = sourceStyle.transformOrigin;
+      }
+      else {
+          getStyleProperties(options).forEach((name) => {
+              let value = sourceStyle.getPropertyValue(name);
+              if (name === 'font-size' && value.endsWith('px')) {
+                  const reducedFont = Math.floor(parseFloat(value.substring(0, value.length - 2))) - 0.1;
+                  value = `${reducedFont}px`;
+              }
+              if (isInstanceOfElement(nativeNode, HTMLIFrameElement) &&
+                  name === 'display' &&
+                  value === 'inline') {
+                  value = 'block';
+              }
+              if (name === 'd' && clonedNode.getAttribute('d')) {
+                  value = `path(${clonedNode.getAttribute('d')})`;
+              }
+              targetStyle.setProperty(name, value, sourceStyle.getPropertyPriority(name));
+          });
+      }
+  }
+  function cloneInputValue(nativeNode, clonedNode) {
+      if (isInstanceOfElement(nativeNode, HTMLTextAreaElement)) {
+          clonedNode.innerHTML = nativeNode.value;
+      }
+      if (isInstanceOfElement(nativeNode, HTMLInputElement)) {
+          clonedNode.setAttribute('value', nativeNode.value);
+      }
+  }
+  function cloneSelectValue(nativeNode, clonedNode) {
+      if (isInstanceOfElement(nativeNode, HTMLSelectElement)) {
+          const clonedSelect = clonedNode;
+          const selectedOption = Array.from(clonedSelect.children).find((child) => nativeNode.value === child.getAttribute('value'));
+          if (selectedOption) {
+              selectedOption.setAttribute('selected', '');
+          }
+      }
+  }
+  function decorate(nativeNode, clonedNode, options) {
+      if (isInstanceOfElement(clonedNode, Element)) {
+          cloneCSSStyle(nativeNode, clonedNode, options);
+          clonePseudoElements(nativeNode, clonedNode, options);
+          cloneInputValue(nativeNode, clonedNode);
+          cloneSelectValue(nativeNode, clonedNode);
+      }
+      return clonedNode;
+  }
+  async function ensureSVGSymbols(clone, options) {
+      const uses = clone.querySelectorAll ? clone.querySelectorAll('use') : [];
+      if (uses.length === 0) {
+          return clone;
+      }
+      const processedDefs = {};
+      for (let i = 0; i < uses.length; i++) {
+          const use = uses[i];
+          const id = use.getAttribute('xlink:href');
+          if (id) {
+              const exist = clone.querySelector(id);
+              const definition = document.querySelector(id);
+              if (!exist && definition && !processedDefs[id]) {
+                  // eslint-disable-next-line no-await-in-loop
+                  processedDefs[id] = (await cloneNode(definition, options, true));
+              }
+          }
+      }
+      const nodes = Object.values(processedDefs);
+      if (nodes.length) {
+          const ns = 'http://www.w3.org/1999/xhtml';
+          const svg = document.createElementNS(ns, 'svg');
+          svg.setAttribute('xmlns', ns);
+          svg.style.position = 'absolute';
+          svg.style.width = '0';
+          svg.style.height = '0';
+          svg.style.overflow = 'hidden';
+          svg.style.display = 'none';
+          const defs = document.createElementNS(ns, 'defs');
+          svg.appendChild(defs);
+          for (let i = 0; i < nodes.length; i++) {
+              defs.appendChild(nodes[i]);
+          }
+          clone.appendChild(svg);
+      }
+      return clone;
+  }
+  async function cloneNode(node, options, isRoot) {
+      if (!isRoot && options.filter && !options.filter(node)) {
+          return null;
+      }
+      return Promise.resolve(node)
+          .then((clonedNode) => cloneSingleNode(clonedNode, options))
+          .then((clonedNode) => cloneChildren(node, clonedNode, options))
+          .then((clonedNode) => decorate(node, clonedNode, options))
+          .then((clonedNode) => ensureSVGSymbols(clonedNode, options));
+  }
+
+  const URL_REGEX = /url\((['"]?)([^'"]+?)\1\)/g;
+  const URL_WITH_FORMAT_REGEX = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g;
+  const FONT_SRC_REGEX = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;
+  function toRegex(url) {
+      // eslint-disable-next-line no-useless-escape
+      const escaped = url.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
+      return new RegExp(`(url\\(['"]?)(${escaped})(['"]?\\))`, 'g');
+  }
+  function parseURLs(cssText) {
+      const urls = [];
+      cssText.replace(URL_REGEX, (raw, quotation, url) => {
+          urls.push(url);
+          return raw;
+      });
+      return urls.filter((url) => !isDataUrl(url));
+  }
+  async function embed(cssText, resourceURL, baseURL, options, getContentFromUrl) {
+      try {
+          const resolvedURL = baseURL ? resolveUrl(resourceURL, baseURL) : resourceURL;
+          const contentType = getMimeType(resourceURL);
+          let dataURL;
+          if (getContentFromUrl) ;
+          else {
+              dataURL = await resourceToDataURL(resolvedURL, contentType, options);
+          }
+          return cssText.replace(toRegex(resourceURL), `$1${dataURL}$3`);
+      }
+      catch (error) {
+          // pass
+      }
+      return cssText;
+  }
+  function filterPreferredFontFormat(str, { preferredFontFormat }) {
+      return !preferredFontFormat
+          ? str
+          : str.replace(FONT_SRC_REGEX, (match) => {
+              // eslint-disable-next-line no-constant-condition
+              while (true) {
+                  const [src, , format] = URL_WITH_FORMAT_REGEX.exec(match) || [];
+                  if (!format) {
+                      return '';
+                  }
+                  if (format === preferredFontFormat) {
+                      return `src: ${src};`;
+                  }
+              }
+          });
+  }
+  function shouldEmbed(url) {
+      return url.search(URL_REGEX) !== -1;
+  }
+  async function embedResources(cssText, baseUrl, options) {
+      if (!shouldEmbed(cssText)) {
+          return cssText;
+      }
+      const filteredCSSText = filterPreferredFontFormat(cssText, options);
+      const urls = parseURLs(filteredCSSText);
+      return urls.reduce((deferred, url) => deferred.then((css) => embed(css, url, baseUrl, options)), Promise.resolve(filteredCSSText));
+  }
+
+  async function embedProp(propName, node, options) {
+      var _a;
+      const propValue = (_a = node.style) === null || _a === void 0 ? void 0 : _a.getPropertyValue(propName);
+      if (propValue) {
+          const cssString = await embedResources(propValue, null, options);
+          node.style.setProperty(propName, cssString, node.style.getPropertyPriority(propName));
+          return true;
+      }
+      return false;
+  }
+  async function embedBackground(clonedNode, options) {
+      (await embedProp('background', clonedNode, options)) ||
+          (await embedProp('background-image', clonedNode, options));
+      (await embedProp('mask', clonedNode, options)) ||
+          (await embedProp('-webkit-mask', clonedNode, options)) ||
+          (await embedProp('mask-image', clonedNode, options)) ||
+          (await embedProp('-webkit-mask-image', clonedNode, options));
+  }
+  async function embedImageNode(clonedNode, options) {
+      const isImageElement = isInstanceOfElement(clonedNode, HTMLImageElement);
+      if (!(isImageElement && !isDataUrl(clonedNode.src)) &&
+          !(isInstanceOfElement(clonedNode, SVGImageElement) &&
+              !isDataUrl(clonedNode.href.baseVal))) {
+          return;
+      }
+      const url = isImageElement ? clonedNode.src : clonedNode.href.baseVal;
+      const dataURL = await resourceToDataURL(url, getMimeType(url), options);
+      await new Promise((resolve, reject) => {
+          clonedNode.onload = resolve;
+          clonedNode.onerror = options.onImageErrorHandler
+              ? (...attributes) => {
+                  try {
+                      resolve(options.onImageErrorHandler(...attributes));
+                  }
+                  catch (error) {
+                      reject(error);
+                  }
+              }
+              : reject;
+          const image = clonedNode;
+          if (image.decode) {
+              image.decode = resolve;
+          }
+          if (image.loading === 'lazy') {
+              image.loading = 'eager';
+          }
+          if (isImageElement) {
+              clonedNode.srcset = '';
+              clonedNode.src = dataURL;
+          }
+          else {
+              clonedNode.href.baseVal = dataURL;
+          }
+      });
+  }
+  async function embedChildren(clonedNode, options) {
+      const children = toArray(clonedNode.childNodes);
+      const deferreds = children.map((child) => embedImages(child, options));
+      await Promise.all(deferreds).then(() => clonedNode);
+  }
+  async function embedImages(clonedNode, options) {
+      if (isInstanceOfElement(clonedNode, Element)) {
+          await embedBackground(clonedNode, options);
+          await embedImageNode(clonedNode, options);
+          await embedChildren(clonedNode, options);
+      }
+  }
+
+  function applyStyle(node, options) {
+      const { style } = node;
+      if (options.backgroundColor) {
+          style.backgroundColor = options.backgroundColor;
+      }
+      if (options.width) {
+          style.width = `${options.width}px`;
+      }
+      if (options.height) {
+          style.height = `${options.height}px`;
+      }
+      const manual = options.style;
+      if (manual != null) {
+          Object.keys(manual).forEach((key) => {
+              style[key] = manual[key];
+          });
+      }
+      return node;
+  }
+
+  const cssFetchCache = {};
+  async function fetchCSS(url) {
+      let cache = cssFetchCache[url];
+      if (cache != null) {
+          return cache;
+      }
+      const res = await fetch(url);
+      const cssText = await res.text();
+      cache = { url, cssText };
+      cssFetchCache[url] = cache;
+      return cache;
+  }
+  async function embedFonts(data, options) {
+      let cssText = data.cssText;
+      const regexUrl = /url\(["']?([^"')]+)["']?\)/g;
+      const fontLocs = cssText.match(/url\([^)]+\)/g) || [];
+      const loadFonts = fontLocs.map(async (loc) => {
+          let url = loc.replace(regexUrl, '$1');
+          if (!url.startsWith('https://')) {
+              url = new URL(url, data.url).href;
+          }
+          return fetchAsDataURL(url, options.fetchRequestInit, ({ result }) => {
+              cssText = cssText.replace(loc, `url(${result})`);
+              return [loc, result];
+          });
+      });
+      return Promise.all(loadFonts).then(() => cssText);
+  }
+  function parseCSS(source) {
+      if (source == null) {
+          return [];
+      }
+      const result = [];
+      const commentsRegex = /(\/\*[\s\S]*?\*\/)/gi;
+      // strip out comments
+      let cssText = source.replace(commentsRegex, '');
+      // eslint-disable-next-line prefer-regex-literals
+      const keyframesRegex = new RegExp('((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})', 'gi');
+      // eslint-disable-next-line no-constant-condition
+      while (true) {
+          const matches = keyframesRegex.exec(cssText);
+          if (matches === null) {
+              break;
+          }
+          result.push(matches[0]);
+      }
+      cssText = cssText.replace(keyframesRegex, '');
+      const importRegex = /@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi;
+      // to match css & media queries together
+      const combinedCSSRegex = '((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]' +
+          '*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})';
+      // unified regex
+      const unifiedRegex = new RegExp(combinedCSSRegex, 'gi');
+      // eslint-disable-next-line no-constant-condition
+      while (true) {
+          let matches = importRegex.exec(cssText);
+          if (matches === null) {
+              matches = unifiedRegex.exec(cssText);
+              if (matches === null) {
+                  break;
+              }
+              else {
+                  importRegex.lastIndex = unifiedRegex.lastIndex;
+              }
+          }
+          else {
+              unifiedRegex.lastIndex = importRegex.lastIndex;
+          }
+          result.push(matches[0]);
+      }
+      return result;
+  }
+  async function getCSSRules(styleSheets, options) {
+      const ret = [];
+      const deferreds = [];
+      // First loop inlines imports
+      styleSheets.forEach((sheet) => {
+          if ('cssRules' in sheet) {
+              try {
+                  toArray(sheet.cssRules || []).forEach((item, index) => {
+                      if (item.type === CSSRule.IMPORT_RULE) {
+                          let importIndex = index + 1;
+                          const url = item.href;
+                          const deferred = fetchCSS(url)
+                              .then((metadata) => embedFonts(metadata, options))
+                              .then((cssText) => parseCSS(cssText).forEach((rule) => {
+                              try {
+                                  sheet.insertRule(rule, rule.startsWith('@import')
+                                      ? (importIndex += 1)
+                                      : sheet.cssRules.length);
+                              }
+                              catch (error) {
+                                  console.error('Error inserting rule from remote css', {
+                                      rule,
+                                      error,
+                                  });
+                              }
+                          }))
+                              .catch((e) => {
+                              console.error('Error loading remote css', e.toString());
+                          });
+                          deferreds.push(deferred);
+                      }
+                  });
+              }
+              catch (e) {
+                  const inline = styleSheets.find((a) => a.href == null) || document.styleSheets[0];
+                  if (sheet.href != null) {
+                      deferreds.push(fetchCSS(sheet.href)
+                          .then((metadata) => embedFonts(metadata, options))
+                          .then((cssText) => parseCSS(cssText).forEach((rule) => {
+                          inline.insertRule(rule, inline.cssRules.length);
+                      }))
+                          .catch((err) => {
+                          console.error('Error loading remote stylesheet', err);
+                      }));
+                  }
+                  console.error('Error inlining remote css file', e);
+              }
+          }
+      });
+      return Promise.all(deferreds).then(() => {
+          // Second loop parses rules
+          styleSheets.forEach((sheet) => {
+              if ('cssRules' in sheet) {
+                  try {
+                      toArray(sheet.cssRules || []).forEach((item) => {
+                          ret.push(item);
+                      });
+                  }
+                  catch (e) {
+                      console.error(`Error while reading CSS rules from ${sheet.href}`, e);
+                  }
+              }
+          });
+          return ret;
+      });
+  }
+  function getWebFontRules(cssRules) {
+      return cssRules
+          .filter((rule) => rule.type === CSSRule.FONT_FACE_RULE)
+          .filter((rule) => shouldEmbed(rule.style.getPropertyValue('src')));
+  }
+  async function parseWebFontRules(node, options) {
+      if (node.ownerDocument == null) {
+          throw new Error('Provided element is not within a Document');
+      }
+      const styleSheets = toArray(node.ownerDocument.styleSheets);
+      const cssRules = await getCSSRules(styleSheets, options);
+      return getWebFontRules(cssRules);
+  }
+  function normalizeFontFamily(font) {
+      return font.trim().replace(/["']/g, '');
+  }
+  function getUsedFonts(node) {
+      const fonts = new Set();
+      function traverse(node) {
+          const fontFamily = node.style.fontFamily || getComputedStyle(node).fontFamily;
+          fontFamily.split(',').forEach((font) => {
+              fonts.add(normalizeFontFamily(font));
+          });
+          Array.from(node.children).forEach((child) => {
+              if (child instanceof HTMLElement) {
+                  traverse(child);
+              }
+          });
+      }
+      traverse(node);
+      return fonts;
+  }
+  async function getWebFontCSS(node, options) {
+      const rules = await parseWebFontRules(node, options);
+      const usedFonts = getUsedFonts(node);
+      const cssTexts = await Promise.all(rules
+          .filter((rule) => usedFonts.has(normalizeFontFamily(rule.style.fontFamily)))
+          .map((rule) => {
+          const baseUrl = rule.parentStyleSheet
+              ? rule.parentStyleSheet.href
+              : null;
+          return embedResources(rule.cssText, baseUrl, options);
+      }));
+      return cssTexts.join('\n');
+  }
+  async function embedWebFonts(clonedNode, options) {
+      const cssText = options.fontEmbedCSS != null
+          ? options.fontEmbedCSS
+          : options.skipFonts
+              ? null
+              : await getWebFontCSS(clonedNode, options);
+      if (cssText) {
+          const styleNode = document.createElement('style');
+          const sytleContent = document.createTextNode(cssText);
+          styleNode.appendChild(sytleContent);
+          if (clonedNode.firstChild) {
+              clonedNode.insertBefore(styleNode, clonedNode.firstChild);
+          }
+          else {
+              clonedNode.appendChild(styleNode);
+          }
+      }
+  }
+
+  async function toSvg(node, options = {}) {
+      const { width, height } = getImageSize(node, options);
+      const clonedNode = (await cloneNode(node, options, true));
+      await embedWebFonts(clonedNode, options);
+      await embedImages(clonedNode, options);
+      applyStyle(clonedNode, options);
+      const datauri = await nodeToDataURL(clonedNode, width, height);
+      return datauri;
+  }
+  async function toCanvas(node, options = {}) {
+      const { width, height } = getImageSize(node, options);
+      const svg = await toSvg(node, options);
+      const img = await createImage(svg);
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      const ratio = options.pixelRatio || getPixelRatio();
+      const canvasWidth = options.canvasWidth || width;
+      const canvasHeight = options.canvasHeight || height;
+      canvas.width = canvasWidth * ratio;
+      canvas.height = canvasHeight * ratio;
+      if (!options.skipAutoScale) {
+          checkCanvasDimensions(canvas);
+      }
+      canvas.style.width = `${canvasWidth}`;
+      canvas.style.height = `${canvasHeight}`;
+      if (options.backgroundColor) {
+          context.fillStyle = options.backgroundColor;
+          context.fillRect(0, 0, canvas.width, canvas.height);
+      }
+      context.drawImage(img, 0, 0, canvas.width, canvas.height);
+      return canvas;
+  }
+  async function toPng(node, options = {}) {
+      const canvas = await toCanvas(node, options);
+      return canvas.toDataURL();
+  }
+  async function toJpeg(node, options = {}) {
+      const canvas = await toCanvas(node, options);
+      return canvas.toDataURL('image/jpeg', options.quality || 1);
+  }
+
+  /**
+   * Screenshot capture service using html-to-image.
+   */
+  async function takeScreenshot(options) {
+      const selector = options?.selector;
+      const format = options?.format ?? "png";
+      const quality = options?.quality ?? 0.92;
+      const scale = options?.scale ?? 1;
+      const target = selector ? document.querySelector(selector) : document.body;
+      if (!target) {
+          return { error: `No element found for selector: ${selector}` };
+      }
+      try {
+          const node = target;
+          const captureOptions = {
+              quality,
+              pixelRatio: scale,
+              cacheBust: true,
+              skipAutoScale: true,
+              // Filter out the debugger overlay itself
+              filter: (el) => {
+                  return el.id !== "hypha-debugger-host";
+              },
+          };
+          let dataUrl;
+          if (format === "jpeg") {
+              dataUrl = await toJpeg(node, captureOptions);
+          }
+          else {
+              dataUrl = await toPng(node, captureOptions);
+          }
+          // Get dimensions
+          const rect = node.getBoundingClientRect();
+          let width = Math.round(rect.width * scale);
+          let height = Math.round(rect.height * scale);
+          // Optionally resize if too large
+          const maxW = options?.max_width;
+          const maxH = options?.max_height;
+          if (maxW && width > maxW) {
+              const ratio = maxW / width;
+              width = maxW;
+              height = Math.round(height * ratio);
+          }
+          if (maxH && height > maxH) {
+              const ratio = maxH / height;
+              height = maxH;
+              width = Math.round(width * ratio);
+          }
+          return {
+              data: dataUrl,
+              format,
+              width,
+              height,
+          };
+      }
+      catch (err) {
+          return { error: `Screenshot failed: ${err.message ?? err}` };
+      }
+  }
+  takeScreenshot.__schema__ = {
+      name: "takeScreenshot",
+      description: "Capture a screenshot of the entire page or a specific element. Returns a base64-encoded data URL.",
+      parameters: {
+          type: "object",
+          properties: {
+              selector: {
+                  type: "string",
+                  description: "CSS selector of the element to capture. Omit to capture the entire page body.",
+              },
+              format: {
+                  type: "string",
+                  enum: ["png", "jpeg"],
+                  description: 'Image format. Default: "png".',
+              },
+              quality: {
+                  type: "number",
+                  description: "Image quality (0-1) for JPEG. Default: 0.92.",
+              },
+              scale: {
+                  type: "number",
+                  description: "Pixel ratio / scale factor. Default: 1. Use 2 for retina.",
+              },
+              max_width: {
+                  type: "number",
+                  description: "Maximum width in pixels. Image will be scaled down if larger.",
+              },
+              max_height: {
+                  type: "number",
+                  description: "Maximum height in pixels. Image will be scaled down if larger.",
+              },
+          },
+      },
+  };
+
+  /**
+   * Arbitrary JavaScript execution service.
+   */
+  async function executeScript(code, options) {
+      const timeoutMs = options?.timeout_ms ?? 10000;
+      try {
+          const result = await Promise.race([
+              // Use async Function to allow top-level await in the code
+              new Function("return (async () => {" + code + "})()")(),
+              new Promise((_, reject) => setTimeout(() => reject(new Error("Execution timed out")), timeoutMs)),
+          ]);
+          // Serialize the result safely
+          let serialized;
+          let type = typeof result;
+          try {
+              if (result === undefined) {
+                  serialized = null;
+                  type = "undefined";
+              }
+              else if (result instanceof HTMLElement) {
+                  serialized = {
+                      tag: result.tagName.toLowerCase(),
+                      id: result.id,
+                      text: (result.textContent ?? "").trim().slice(0, 500),
+                  };
+                  type = "HTMLElement";
+              }
+              else if (result instanceof NodeList || result instanceof HTMLCollection) {
+                  serialized = Array.from(result).map((el) => ({
+                      tag: el.tagName?.toLowerCase(),
+                      id: el.id,
+                      text: (el.textContent ?? "").trim().slice(0, 200),
+                  }));
+                  type = "NodeList";
+              }
+              else {
+                  // Try JSON serialization, fall back to string
+                  serialized = JSON.parse(JSON.stringify(result));
+              }
+          }
+          catch {
+              serialized = String(result);
+              type = "string (serialized)";
+          }
+          return { result: serialized, type };
+      }
+      catch (err) {
+          return { error: `Execution error: ${err.message ?? err}` };
+      }
+  }
+  executeScript.__schema__ = {
+      name: "executeScript",
+      description: "Execute arbitrary JavaScript code in the page context. Supports async/await. Returns the result of the last expression.",
+      parameters: {
+          type: "object",
+          properties: {
+              code: {
+                  type: "string",
+                  description: 'JavaScript code to execute. The result of the last expression is returned. Example: "return document.title"',
+              },
+              timeout_ms: {
+                  type: "number",
+                  description: "Maximum execution time in milliseconds. Default: 10000.",
+              },
+          },
+          required: ["code"],
+      },
+  };
+
+  /**
+   * Navigation service.
+   */
+  function navigate(url) {
+      try {
+          window.location.href = url;
+          return { success: true, message: `Navigating to ${url}` };
+      }
+      catch (err) {
+          return { success: false, message: `Navigation failed: ${err.message ?? err}` };
+      }
+  }
+  navigate.__schema__ = {
+      name: "navigate",
+      description: "Navigate the browser to a new URL.",
+      parameters: {
+          type: "object",
+          properties: {
+              url: {
+                  type: "string",
+                  description: "The URL to navigate to.",
+              },
+          },
+          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.
+   */
+  function getFiberFromDOM(node) {
+      const keys = Object.keys(node);
+      const fiberKey = keys.find((k) => k.startsWith("__reactFiber$") ||
+          k.startsWith("__reactInternalInstance$"));
+      return fiberKey ? node[fiberKey] : null;
+  }
+  function getComponentName(fiber) {
+      const { type } = fiber;
+      if (!type)
+          return "(unknown)";
+      if (typeof type === "string")
+          return type; // DOM element
+      if (typeof type === "function") {
+          return type.displayName || type.name || "Anonymous";
+      }
+      if (typeof type === "object") {
+          if (type.displayName)
+              return type.displayName;
+          if (type.render)
+              return type.render.displayName || type.render.name || "ForwardRef";
+          if (type.type)
+              return getComponentName({ type: type.type });
+          // React.memo
+          if (type.$$typeof?.toString() === "Symbol(react.memo)") {
+              return `Memo(${getComponentName({ type: type.type })})`;
+          }
+      }
+      return "(unknown)";
+  }
+  function getFiberType(fiber) {
+      // Fiber tag values: 0=FunctionComponent, 1=ClassComponent, 5=HostComponent
+      if (fiber.tag === 0 || fiber.tag === 11 || fiber.tag === 14 || fiber.tag === 15)
+          return "function";
+      if (fiber.tag === 1)
+          return "class";
+      if (fiber.tag === 5 || fiber.tag === 6)
+          return "host";
+      return "other";
+  }
+  function safeSerialize(obj, depth = 0, maxDepth = 2) {
+      if (depth > maxDepth)
+          return "[max depth]";
+      if (obj === null || obj === undefined)
+          return obj;
+      if (typeof obj === "function")
+          return `[Function: ${obj.name || "anonymous"}]`;
+      if (typeof obj !== "object")
+          return obj;
+      if (obj instanceof HTMLElement)
+          return `[${obj.tagName.toLowerCase()}#${obj.id}]`;
+      if (Array.isArray(obj)) {
+          return obj.slice(0, 10).map((v) => safeSerialize(v, depth + 1, maxDepth));
+      }
+      const result = {};
+      const keys = Object.keys(obj).slice(0, 20);
+      for (const key of keys) {
+          if (key.startsWith("_") || key.startsWith("$$"))
+              continue;
+          try {
+              result[key] = safeSerialize(obj[key], depth + 1, maxDepth);
+          }
+          catch {
+              result[key] = "[unserializable]";
+          }
+      }
+      return result;
+  }
+  function extractState(fiber) {
+      if (fiber.tag === 1 && fiber.stateNode) {
+          // Class component
+          return safeSerialize(fiber.stateNode.state);
+      }
+      if (fiber.tag === 0 || fiber.tag === 11 || fiber.tag === 15) {
+          // Function component - hooks linked list
+          const states = [];
+          let hook = fiber.memoizedState;
+          let i = 0;
+          while (hook && i < 20) {
+              if (hook.queue !== null && hook.queue !== undefined) {
+                  states.push(safeSerialize(hook.memoizedState));
+              }
+              hook = hook.next;
+              i++;
+          }
+          return states.length > 0 ? states : null;
+      }
+      return null;
+  }
+  function fiberToInfo(fiber, depth, maxDepth) {
+      const fiberType = getFiberType(fiber);
+      // Skip host elements unless at the top level
+      const isComponent = fiberType === "function" || fiberType === "class";
+      const info = {
+          name: getComponentName(fiber),
+          type: fiberType,
+          props: isComponent ? safeSerialize(fiber.memoizedProps) : {},
+          state: isComponent ? extractState(fiber) : null,
+          key: fiber.key,
+          children: [],
+      };
+      if (depth < maxDepth) {
+          let child = fiber.child;
+          while (child) {
+              const childInfo = fiberToInfo(child, depth + 1, maxDepth);
+              if (childInfo) {
+                  // For host elements, only include if they have component children
+                  if (childInfo.type !== "host" || childInfo.children.length > 0) {
+                      info.children.push(childInfo);
+                  }
+              }
+              child = child.sibling;
+          }
+      }
+      return info;
+  }
+  function getReactTree(options) {
+      const selector = options?.selector ?? "#root";
+      const maxDepth = options?.max_depth ?? 5;
+      const rootEl = document.querySelector(selector);
+      if (!rootEl) {
+          return { error: `No element found for selector: ${selector}` };
+      }
+      const fiber = getFiberFromDOM(rootEl);
+      if (!fiber) {
+          return {
+              error: `No React fiber found on element "${selector}". Is this a React app?`,
+          };
+      }
+      // Walk up to find the root component fiber (skip HostRoot)
+      let current = fiber;
+      while (current && current.tag === 3) {
+          // tag 3 = HostRoot
+          current = current.child;
+      }
+      if (!current) {
+          return { error: "Could not find root React component fiber." };
+      }
+      const tree = fiberToInfo(current, 0, maxDepth);
+      if (!tree) {
+          return { error: "Could not build React component tree." };
+      }
+      return tree;
+  }
+  getReactTree.__schema__ = {
+      name: "getReactTree",
+      description: "Inspect the React component tree starting from a DOM element. Returns component names, props, state (including hooks), and children hierarchy.",
+      parameters: {
+          type: "object",
+          properties: {
+              selector: {
+                  type: "string",
+                  description: 'CSS selector of the React root element. Default: "#root".',
+              },
+              max_depth: {
+                  type: "number",
+                  description: "Maximum depth to traverse the component tree. Default: 5.",
+              },
+          },
+      },
+  };
+
+  /**
+   * Core debugger class: connects to Hypha and registers the debug service.
+   */
+  class HyphaDebugger {
+      constructor(config) {
+          this.overlay = null;
+          this.server = null;
+          this.serviceInfo = null;
+          this.config = {
+              server_url: config.server_url,
+              workspace: config.workspace ?? "",
+              token: config.token ?? "",
+              service_id: config.service_id ?? "web-debugger",
+              service_name: config.service_name ?? "Web Debugger",
+              show_ui: config.show_ui ?? true,
+              visibility: config.visibility ?? "public",
+          };
+      }
+      async start() {
+          // Install console capture early
+          installConsoleCapture();
+          // Guard against double-injection
+          const w = window;
+          if (w.__HYPHA_DEBUGGER__?.instance) {
+              console.warn("[hypha-debugger] Already running, returning existing session.");
+              return w.__HYPHA_DEBUGGER__.session;
+          }
+          // Show UI if enabled
+          if (this.config.show_ui) {
+              this.overlay = new DebugOverlay();
+              this.overlay.setStatus("disconnected");
+              this.overlay.setInfo({ Status: "Connecting..." });
+          }
+          try {
+              // Get the connectToServer function
+              const connect = this.getConnectToServer();
+              // Connect to Hypha server
+              const connectConfig = {
+                  server_url: this.config.server_url,
+              };
+              if (this.config.workspace)
+                  connectConfig.workspace = this.config.workspace;
+              if (this.config.token)
+                  connectConfig.token = this.config.token;
+              this.server = await connect(connectConfig);
+              // Wrap service functions with logging
+              const wrapFn = (fn, name) => {
+                  const wrapped = async (...args) => {
+                      this.overlay?.addLog(`${name}(${this.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");
+                          }
+                          else {
+                              this.overlay?.addLog(`${name} -> OK`, "result");
+                          }
+                          return result;
+                      }
+                      catch (err) {
+                          this.overlay?.addLog(`${name}: ${err.message}`, "error");
+                          throw err;
+                      }
+                  };
+                  // Preserve schema
+                  if (fn.__schema__) {
+                      wrapped.__schema__ = fn.__schema__;
+                  }
+                  return wrapped;
+              };
+              // Register debug service
+              const service = {
+                  id: this.config.service_id,
+                  name: this.config.service_name,
+                  type: "debugger",
+                  description: "Remote web page debugger. Allows inspecting DOM, taking screenshots, executing JavaScript, and interacting with the page.",
+                  config: {
+                      visibility: this.config.visibility,
+                  },
+                  // Service functions
+                  get_page_info: wrapFn(getPageInfo, "get_page_info"),
+                  get_console_logs: wrapFn(getConsoleLogs, "get_console_logs"),
+                  query_dom: wrapFn(queryDom, "query_dom"),
+                  click_element: wrapFn(clickElement, "click_element"),
+                  fill_input: wrapFn(fillInput, "fill_input"),
+                  scroll_to: wrapFn(scrollTo, "scroll_to"),
+                  get_computed_styles: wrapFn(getComputedStyles, "get_computed_styles"),
+                  get_element_bounds: wrapFn(getElementBounds, "get_element_bounds"),
+                  take_screenshot: wrapFn(takeScreenshot, "take_screenshot"),
+                  execute_script: wrapFn(executeScript, "execute_script"),
+                  navigate: wrapFn(navigate, "navigate"),
+                  go_back: wrapFn(goBack, "go_back"),
+                  go_forward: wrapFn(goForward, "go_forward"),
+                  reload: wrapFn(reload, "reload"),
+                  get_react_tree: wrapFn(getReactTree, "get_react_tree"),
+              };
+              this.serviceInfo = await this.server.registerService(service);
+              // Update UI
+              const workspace = this.server.config.workspace;
+              const fullServiceId = this.serviceInfo.id ?? this.config.service_id;
+              // Generate a token for remote HTTP access
+              const sessionToken = await this.server.generateToken();
+              // Build the HTTP service URL
+              const serviceUrl = this.buildServiceUrl(fullServiceId);
+              if (this.overlay) {
+                  this.overlay.setStatus("connected");
+                  this.overlay.setInfo({
+                      Status: "Connected",
+                      Server: this.config.server_url,
+                  });
+                  this.overlay.setServiceUrl(serviceUrl, sessionToken);
+                  this.overlay.addLog("Service registered", "result");
+              }
+              console.log(`[hypha-debugger] Connected to ${this.config.server_url}`);
+              console.log(`[hypha-debugger] Service ID: ${fullServiceId}`);
+              console.log(`[hypha-debugger] Service URL: ${serviceUrl}`);
+              console.log(`[hypha-debugger] Token: ${sessionToken}`);
+              console.log(`[hypha-debugger] Test it:\n  curl '${serviceUrl}/get_page_info' -H 'Authorization: Bearer ${sessionToken}'`);
+              // Build session object
+              const session = {
+                  service_id: fullServiceId,
+                  workspace,
+                  server: this.server,
+                  service_url: serviceUrl,
+                  token: sessionToken,
+                  destroy: () => this.destroy(),
+              };
+              // Store globally
+              w.__HYPHA_DEBUGGER__ = w.__HYPHA_DEBUGGER__ ?? {};
+              w.__HYPHA_DEBUGGER__.instance = this;
+              w.__HYPHA_DEBUGGER__.session = session;
+              return session;
+          }
+          catch (err) {
+              console.error("[hypha-debugger] Failed to start:", err);
+              if (this.overlay) {
+                  this.overlay.setStatus("error");
+                  this.overlay.setInfo({
+                      Status: "Error",
+                      Error: err.message ?? String(err),
+                  });
+              }
+              throw err;
+          }
+      }
+      async destroy() {
+          try {
+              if (this.serviceInfo && this.server) {
+                  await this.server.unregisterService(this.serviceInfo.id);
+              }
+          }
+          catch {
+              // Ignore unregister errors on cleanup
+          }
+          this.overlay?.destroy();
+          this.overlay = null;
+          const w = window;
+          if (w.__HYPHA_DEBUGGER__) {
+              delete w.__HYPHA_DEBUGGER__.instance;
+              delete w.__HYPHA_DEBUGGER__.session;
+          }
+      }
+      buildServiceUrl(serviceId) {
+          const base = this.config.server_url.replace(/\/+$/, "");
+          // serviceId format: "workspace/clientId:svcName"
+          const slashIdx = serviceId.indexOf("/");
+          if (slashIdx !== -1) {
+              const workspace = serviceId.substring(0, slashIdx);
+              const svcPart = serviceId.substring(slashIdx + 1);
+              return `${base}/${workspace}/services/${svcPart}`;
+          }
+          return `${base}/services/${serviceId}`;
+      }
+      getConnectToServer() {
+          // Prefer the static import; fall back to global for UMD/script-tag usage
+          const connect = hyphaRpc__namespace.connectToServer;
+          if (connect)
+              return connect;
+          const w = window;
+          if (w.hyphaWebsocketClient?.connectToServer) {
+              return w.hyphaWebsocketClient.connectToServer;
+          }
+          throw new Error("hypha-rpc not found. Install it via npm or include the script tag: " +
+              '<script src="https://cdn.jsdelivr.net/npm/hypha-rpc@0.20.97/dist/hypha-rpc-websocket.min.js"></script>');
+      }
+      summarizeArgs(args) {
+          if (args.length === 0)
+              return "";
+          return args
+              .map((a) => {
+              if (typeof a === "string")
+                  return a.length > 40 ? a.slice(0, 40) + "..." : a;
+              if (typeof a === "object" && a !== null)
+                  return "{...}";
+              return String(a);
+          })
+              .join(", ");
+      }
+  }
+
+  /**
+   * hypha-debugger - Injectable debugger for web pages, powered by Hypha RPC.
+   *
+   * Usage:
+   *   import { startDebugger } from 'hypha-debugger';
+   *   const session = await startDebugger({ server_url: 'https://hypha.aicell.io' });
+   */
+  /**
+   * Start the Hypha debugger. Connects to a Hypha server and registers
+   * a debug service that remote clients can use to inspect and interact
+   * with this web page.
+   *
+   * @param config - Configuration for the debugger.
+   * @returns A session object with service_id, workspace, and destroy().
+   *
+   * @example
+   * ```js
+   * import { startDebugger } from 'hypha-debugger';
+   * const session = await startDebugger({ server_url: 'https://hypha.aicell.io' });
+   * console.log(`Service: ${session.service_id}, Workspace: ${session.workspace}`);
+   * ```
+   */
+  async function startDebugger(config) {
+      const debugger_ = new HyphaDebugger(config);
+      return debugger_.start();
+  }
+
+  exports.HyphaDebugger = HyphaDebugger;
+  exports.startDebugger = startDebugger;
+
+}));
+//# sourceMappingURL=hypha-debugger.js.map