hypha-debugger 0.1.4 → 0.1.6

package/dist/debugger.d.ts

@@ -45,9 +45,22 @@ export declare class HyphaDebugger {
     private cursor;
     private server;
     private serviceInfo;
+    private boundBeforeUnload;
+    private cleanupInterceptor;
     constructor(config: DebuggerConfig);
     start(): Promise<DebugSession>;
     destroy(): Promise<void>;
+    /**
+     * Persist debugger config to sessionStorage so the debugger can
+     * auto-reconnect after a page reload (soft reload injects the script,
+     * autoStart() reads this config).
+     */
+    private saveConfigToStorage;
+    /**
+     * Detect the URL of the currently loaded hypha-debugger script.
+     * Used by navigate.ts to inject the correct script after soft reload.
+     */
+    private detectScriptUrl;
     /**
      * Generate token, build service URL, update overlay instructions, and
      * return a DebugSession.

package/dist/hypha-debugger.js

@@ -10584,20 +10584,248 @@
   };
 
   /**
-   * Navigation service.
+   * Navigation service with auto-reconnect support.
+   *
+   * For agent-triggered reload() and same-origin navigate(), we use a "soft"
+   * approach: fetch the target HTML, inject the debugger <script> tag, then
+   * replace the document via document.write(). The injected script auto-starts
+   * from sessionStorage config, so the debugger reconnects with the same
+   * workspace and service ID. The agent's URL stays stable.
+   *
+   * For cross-origin navigate(), goBack(), and goForward(), we fall back to
+   * normal navigation. The debugger config is saved to sessionStorage so
+   * re-clicking the bookmarklet reconnects seamlessly.
+   */
+  const STORAGE_KEY$1 = "__hypha_debugger_config__";
+  /** Read the saved script URL from sessionStorage, or fall back to CDN. */
+  function getScriptUrl() {
+      try {
+          const raw = sessionStorage.getItem(STORAGE_KEY$1);
+          if (raw) {
+              const config = JSON.parse(raw);
+              if (config.script_url)
+                  return config.script_url;
+          }
+      }
+      catch {
+          // ignore
+      }
+      return "https://cdn.jsdelivr.net/npm/hypha-debugger/dist/hypha-debugger.min.js";
+  }
+  /**
+   * Inject the debugger loader script into HTML before </body> (or append).
+   */
+  function injectLoader(html, scriptUrl) {
+      const loader = `<script src="${scriptUrl}"><\/script>`;
+      if (html.includes("</body>")) {
+          return html.replace("</body>", loader + "\n</body>");
+      }
+      if (html.includes("</html>")) {
+          return html.replace("</html>", loader + "\n</html>");
+      }
+      return html + "\n" + loader;
+  }
+  /**
+   * Perform a soft page replacement: fetch HTML, inject debugger script,
+   * replace the document via document.write(). If the fetch or write fails,
+   * falls back to hard navigation.
+   */
+  function softReplace(url, pushState) {
+      const scriptUrl = getScriptUrl();
+      fetch(url, { credentials: "same-origin", cache: "reload" })
+          .then((response) => {
+          if (!response.ok)
+              throw new Error(`HTTP ${response.status}`);
+          const contentType = response.headers.get("content-type") ?? "";
+          if (!contentType.includes("text/html")) {
+              throw new Error("Not HTML");
+          }
+          return response.text();
+      })
+          .then((html) => {
+          const modified = injectLoader(html, scriptUrl);
+          document.open();
+          document.write(modified);
+          document.close();
+          if (pushState) {
+              try {
+                  history.pushState({}, "", pushState);
+              }
+              catch {
+                  // ignore — URL might already match
+              }
+          }
+      })
+          .catch(() => {
+          // Soft replace failed — fall back to hard navigation
+          if (pushState) {
+              window.location.href = pushState;
+          }
+          else {
+              window.location.reload();
+          }
+      });
+  }
+  /** Check if a URL is same-origin as the current page. */
+  function isSameOrigin(url) {
+      try {
+          const target = new URL(url, location.href);
+          return target.origin === location.origin;
+      }
+      catch {
+          return false;
+      }
+  }
+  // ── Global navigation interception ────────────────────────────────────
+  let _interceptInstalled = false;
+  /**
+   * Install global listeners that intercept same-origin link clicks and
+   * form submissions, routing them through soft navigation so the debugger
+   * stays connected.
+   *
+   * Called once from HyphaDebugger.start().
    */
+  function installNavigationInterceptor() {
+      if (_interceptInstalled)
+          return () => { };
+      _interceptInstalled = true;
+      /**
+       * Click handler: intercept <a> clicks that would navigate to a
+       * same-origin HTML page.
+       */
+      const onClick = (e) => {
+          // Skip if modifier keys (new tab, etc.) or not left-click
+          if (e.defaultPrevented || e.button !== 0)
+              return;
+          if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+              return;
+          // Walk up from target to find the nearest <a>
+          let anchor = null;
+          let el = e.target;
+          while (el) {
+              if (el.tagName === "A") {
+                  anchor = el;
+                  break;
+              }
+              el = el.parentElement;
+          }
+          if (!anchor)
+              return;
+          const href = anchor.href;
+          if (!href)
+              return;
+          // Skip non-http(s), download links, target=_blank, javascript:, #hash-only
+          if (anchor.target && anchor.target !== "_self")
+              return;
+          if (anchor.hasAttribute("download"))
+              return;
+          if (href.startsWith("javascript:") || href.startsWith("mailto:") || href.startsWith("tel:"))
+              return;
+          // Skip hash-only links (same page anchor)
+          try {
+              const target = new URL(href, location.href);
+              if (target.origin === location.origin &&
+                  target.pathname === location.pathname &&
+                  target.search === location.search &&
+                  target.hash !== location.hash) {
+                  return; // Just a hash change, let browser handle it
+              }
+          }
+          catch {
+              return;
+          }
+          // Skip cross-origin
+          if (!isSameOrigin(href))
+              return;
+          // Intercept: prevent default navigation and do soft replace
+          e.preventDefault();
+          const targetUrl = new URL(href, location.href).href;
+          softReplace(targetUrl, targetUrl);
+      };
+      /**
+       * Submit handler: intercept form submissions to same-origin action URLs.
+       * Only handles GET forms (POST forms need the request body which is harder
+       * to replicate via fetch).
+       */
+      const onSubmit = (e) => {
+          if (e.defaultPrevented)
+              return;
+          const form = e.target;
+          const method = (form.method || "GET").toUpperCase();
+          // Only intercept GET forms — POST forms are too complex to replicate
+          if (method !== "GET")
+              return;
+          const action = form.action || location.href;
+          if (!isSameOrigin(action))
+              return;
+          // Build the URL with form data as query params
+          const formData = new FormData(form);
+          const url = new URL(action, location.href);
+          for (const [key, value] of formData.entries()) {
+              if (typeof value === "string") {
+                  url.searchParams.set(key, value);
+              }
+          }
+          // Skip if target is _blank or similar
+          if (form.target && form.target !== "_self")
+              return;
+          e.preventDefault();
+          softReplace(url.href, url.href);
+      };
+      /**
+       * Popstate handler: intercept browser back/forward (bfcache miss).
+       * When the browser navigates via back/forward and there's no bfcache,
+       * we can catch it via popstate and do a soft load of the target URL.
+       */
+      const onPopState = () => {
+          // The URL has already changed when popstate fires.
+          // Do a soft load of the current URL (which is the target of back/forward).
+          softReplace(location.href);
+      };
+      document.addEventListener("click", onClick, true); // capture phase
+      document.addEventListener("submit", onSubmit, true);
+      window.addEventListener("popstate", onPopState);
+      // Return cleanup function
+      return () => {
+          document.removeEventListener("click", onClick, true);
+          document.removeEventListener("submit", onSubmit, true);
+          window.removeEventListener("popstate", onPopState);
+          _interceptInstalled = false;
+      };
+  }
+  // ── navigate ──────────────────────────────────────────────────────────
   function navigate(url) {
       try {
-          window.location.href = url;
-          return { success: true, message: `Navigating to ${url}` };
+          const targetUrl = new URL(url, location.href);
+          const sameOrigin = targetUrl.origin === location.origin;
+          if (sameOrigin) {
+              // Soft navigate: fetch + inject + document.write, then pushState
+              // Schedule after RPC response is sent
+              setTimeout(() => softReplace(targetUrl.href, targetUrl.href), 150);
+              return {
+                  success: true,
+                  message: `Navigating to ${url} (debugger will auto-reconnect)`,
+              };
+          }
+          else {
+              // Cross-origin: can't soft navigate, fall back to hard
+              window.location.href = url;
+              return {
+                  success: true,
+                  message: `Navigating to ${url} (cross-origin, debugger will disconnect)`,
+              };
+          }
       }
       catch (err) {
-          return { success: false, message: `Navigation failed: ${err.message ?? err}` };
+          return {
+              success: false,
+              message: `Navigation failed: ${err.message ?? err}`,
+          };
       }
   }
   navigate.__schema__ = {
       name: "navigate",
-      description: "Navigate the browser to a new URL.",
+      description: "Navigate the browser to a new URL. For same-origin URLs, the debugger auto-reconnects. Cross-origin navigation will disconnect the debugger.",
       parameters: {
           type: "object",
           properties: {
@@ -10609,18 +10837,25 @@
           required: ["url"],
       },
   };
+  // ── goBack / goForward ───────────────────────────────────────────────
   function goBack() {
       try {
           window.history.back();
-          return { success: true, message: "Navigated back" };
+          return {
+              success: true,
+              message: "Navigated back (debugger will auto-reconnect via popstate)",
+          };
       }
       catch (err) {
-          return { success: false, message: `Back navigation failed: ${err.message ?? err}` };
+          return {
+              success: false,
+              message: `Back navigation failed: ${err.message ?? err}`,
+          };
       }
   }
   goBack.__schema__ = {
       name: "goBack",
-      description: "Navigate back in browser history.",
+      description: "Navigate back in browser history. The debugger auto-reconnects for same-origin pages.",
       parameters: {
           type: "object",
           properties: {},
@@ -10629,7 +10864,10 @@
   function goForward() {
       try {
           window.history.forward();
-          return { success: true, message: "Navigated forward" };
+          return {
+              success: true,
+              message: "Navigated forward (debugger will auto-reconnect via popstate)",
+          };
       }
       catch (err) {
           return {
@@ -10640,16 +10878,21 @@
   }
   goForward.__schema__ = {
       name: "goForward",
-      description: "Navigate forward in browser history.",
+      description: "Navigate forward in browser history. The debugger auto-reconnects for same-origin pages.",
       parameters: {
           type: "object",
           properties: {},
       },
   };
+  // ── reload ───────────────────────────────────────────────────────────
   function reload() {
       try {
-          window.location.reload();
-          return { success: true, message: "Reloading page" };
+          // Schedule soft reload after RPC response is sent
+          setTimeout(() => softReplace(location.href), 150);
+          return {
+              success: true,
+              message: "Reloading page (debugger will auto-reconnect)",
+          };
       }
       catch (err) {
           return { success: false, message: `Reload failed: ${err.message ?? err}` };
@@ -10657,7 +10900,7 @@
   }
   reload.__schema__ = {
       name: "reload",
-      description: "Reload the current page.",
+      description: "Reload the current page. The debugger auto-reconnects after reload using soft page replacement.",
       parameters: {
           type: "object",
           properties: {},
@@ -13768,12 +14011,16 @@
       crypto.getRandomValues(arr);
       return Array.from(arr, (b) => b.toString(16).padStart(2, "0")).join("");
   }
+  /** sessionStorage key for persisting debugger config across reloads. */
+  const STORAGE_KEY = "__hypha_debugger_config__";
   class HyphaDebugger {
       constructor(config) {
           this.overlay = null;
           this.cursor = null;
           this.server = null;
           this.serviceInfo = null;
+          this.boundBeforeUnload = null;
+          this.cleanupInterceptor = null;
           const requireToken = config.require_token ?? false;
           // Always append random suffix unless user provided a custom id.
           let serviceId = config.service_id ?? "web-debugger";
@@ -13833,6 +14080,13 @@
               // Store globally
               w.__HYPHA_DEBUGGER__ = w.__HYPHA_DEBUGGER__ ?? {};
               w.__HYPHA_DEBUGGER__.instance = this;
+              // Persist config to sessionStorage for auto-reconnect after reload
+              this.saveConfigToStorage();
+              this.boundBeforeUnload = () => this.saveConfigToStorage();
+              window.addEventListener("beforeunload", this.boundBeforeUnload);
+              // Intercept same-origin link clicks, form submits, and popstate
+              // so the debugger survives user-initiated navigation
+              this.cleanupInterceptor = installNavigationInterceptor();
               return session;
           }
           catch (err) {
@@ -13848,6 +14102,15 @@
           }
       }
       async destroy() {
+          // Remove event listeners
+          if (this.boundBeforeUnload) {
+              window.removeEventListener("beforeunload", this.boundBeforeUnload);
+              this.boundBeforeUnload = null;
+          }
+          if (this.cleanupInterceptor) {
+              this.cleanupInterceptor();
+              this.cleanupInterceptor = null;
+          }
           try {
               if (this.serviceInfo && this.server) {
                   await this.server.unregisterService(this.serviceInfo.id);
@@ -13856,6 +14119,13 @@
           catch {
               // Ignore unregister errors on cleanup
           }
+          // Clear sessionStorage config (explicit destroy = user wants to stop)
+          try {
+              sessionStorage.removeItem(STORAGE_KEY);
+          }
+          catch {
+              // ignore
+          }
           disposeController();
           this.cursor?.destroy();
           this.cursor = null;
@@ -13867,6 +14137,48 @@
               delete w.__HYPHA_DEBUGGER__.session;
           }
       }
+      /**
+       * Persist debugger config to sessionStorage so the debugger can
+       * auto-reconnect after a page reload (soft reload injects the script,
+       * autoStart() reads this config).
+       */
+      saveConfigToStorage() {
+          try {
+              const data = {
+                  server_url: this.config.server_url,
+                  workspace: this.server?.config?.workspace ?? this.config.workspace,
+                  token: this.config.token,
+                  service_id: this.config.service_id,
+                  service_name: this.config.service_name,
+                  show_ui: this.config.show_ui,
+                  visibility: this.config.visibility,
+                  require_token: this.config.require_token,
+                  script_url: this.detectScriptUrl(),
+              };
+              sessionStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+          }
+          catch {
+              // sessionStorage might be unavailable (private browsing, full quota)
+          }
+      }
+      /**
+       * Detect the URL of the currently loaded hypha-debugger script.
+       * Used by navigate.ts to inject the correct script after soft reload.
+       */
+      detectScriptUrl() {
+          try {
+              const scripts = document.querySelectorAll("script[src]");
+              for (const s of Array.from(scripts)) {
+                  if (s.src && s.src.includes("hypha-debugger")) {
+                      return s.src;
+                  }
+              }
+          }
+          catch {
+              // ignore
+          }
+          return "https://cdn.jsdelivr.net/npm/hypha-debugger/dist/hypha-debugger.min.js";
+      }
       /**
        * Generate token, build service URL, update overlay instructions, and
        * return a DebugSession.
@@ -14122,6 +14434,26 @@
   function autoStart() {
       if (typeof window === "undefined" || typeof document === "undefined")
           return;
+      // Skip if already started
+      if (window.__HYPHA_DEBUGGER__?.instance)
+          return;
+      // Check sessionStorage for saved config (auto-reconnect after soft reload)
+      try {
+          const saved = sessionStorage.getItem("__hypha_debugger_config__");
+          if (saved) {
+              const savedConfig = JSON.parse(saved);
+              if (savedConfig.server_url) {
+                  console.log("[hypha-debugger] Reconnecting from saved session...");
+                  startDebugger(savedConfig).catch((err) => {
+                      console.error("[hypha-debugger] Auto-reconnect failed:", err);
+                  });
+                  return;
+              }
+          }
+      }
+      catch {
+          // sessionStorage not available or parse error — continue to script tag detection
+      }
       // Find our own script tag
       const scripts = document.querySelectorAll("script[src]");
       let scriptEl = null;
@@ -14134,9 +14466,6 @@
       // Skip if data-manual is set
       if (scriptEl?.hasAttribute("data-manual"))
           return;
-      // Skip if already started
-      if (window.__HYPHA_DEBUGGER__?.instance)
-          return;
       const serverUrl = scriptEl?.getAttribute("data-server-url") ?? "https://hypha.aicell.io";
       const config = {
           server_url: serverUrl,
@@ -14190,6 +14519,7 @@
   exports.goForward = goForward;
   exports.inputText = inputText;
   exports.installConsoleCapture = installConsoleCapture;
+  exports.installNavigationInterceptor = installNavigationInterceptor;
   exports.navigate = navigate;
   exports.queryDom = queryDom;
   exports.reload = reload;
@@ -14197,6 +14527,7 @@
   exports.scroll = scroll;
   exports.scrollTo = scrollTo;
   exports.selectOption = selectOption;
+  exports.softReplace = softReplace;
   exports.startDebugger = startDebugger;
   exports.takeScreenshot = takeScreenshot;
   exports.wrapFn = wrapFn;