hypha-debugger 0.1.0

package/dist/hypha-debugger.mjs

@@ -0,0 +1,2374 @@
+import * as hyphaRpc from 'hypha-rpc';
+
+/**
+ * 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.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();
+}
+
+export { HyphaDebugger, startDebugger };
+//# sourceMappingURL=hypha-debugger.mjs.map