haltija 1.3.2 → 1.3.4

package/dist/index.js

@@ -674,7 +674,7 @@ var injectorCode = `
 `;
 
 // src/version.ts
-var VERSION = "1.3.2";
+var VERSION = "1.3.4";
 
 // src/embedded-assets.ts
 var APP_MD = `# Haltija App
@@ -1086,6 +1086,8 @@ Use ancestors:true to see parent elements when inspecting deep elements.
 | \`pierceFrames\` | boolean,null | Pierce same-origin iframes (default true) |
 | \`compact\` | boolean,null | Minimal output (default false) |
 | \`ancestors\` | boolean,null | Include ancestor path from root (default false) |
+| \`includeBox\` | boolean,null | Include each node's bounding box { x, y, w, h, visible } (default false) |
+| \`mode\` | string,null | 'actionable' returns a page action summary (url, title, headings, buttons, links, inputs, selects) instead of the DOM tree |
 | \`window\` | string,null | Target window ID |
 
 **Examples:**
@@ -2483,7 +2485,14 @@ Great for debugging - check for errors after actions fail.
 Run arbitrary JavaScript in the browser context. Returns the result.
 
 The code runs in the page's context with access to window, document, etc.
-Return values are JSON-serialized. Promises are awaited.
+Return values are JSON-serialized.
+
+Async code is supported: a returned Promise is awaited, and top-level \`await\`
+works. Multi-statement code needs an explicit \`return\` to produce a value.
+
+  document.title                        -> the title
+  await fetch('/api').then(r => r.json()) -> the parsed body
+  const r = await fetch('/api'); return r.status -> the status code
 
 **Parameters:**
 
@@ -3019,7 +3028,7 @@ var COMPONENT_JS = `(() => {
   });
 
   // src/version.ts
-  var VERSION = "1.3.2";
+  var VERSION = "1.3.4";
 
   // src/text-selector.ts
   var TEXT_PSEUDO_RE = /:(?:text-is|has-text|text)\\(/;
@@ -3571,13 +3580,13 @@ var COMPONENT_JS = `(() => {
   }
   function resolveRefOrSelector(ref, selector) {
     if (ref) {
-      const result2 = refRegistry.resolveWithStatus(ref);
-      if (result2.element) {
+      const result = refRegistry.resolveWithStatus(ref);
+      if (result.element) {
         stats.refsResolved++;
-        return { element: result2.element, targetDesc: \`@\${ref}\` };
+        return { element: result.element, targetDesc: \`@\${ref}\` };
       }
       stats.refsStale++;
-      const errorMsg = result2.status === "never_assigned" ? \`Ref @\${ref} was never assigned (highest ref is @\${refRegistry.getStats().highWaterMark})\` : result2.status === "removed_from_dom" ? \`Ref @\${ref} points to an element that was removed from the DOM (try refreshing /tree)\` : \`Ref @\${ref} is stale - element was garbage collected (try refreshing /tree)\`;
+      const errorMsg = result.status === "never_assigned" ? \`Ref @\${ref} was never assigned (highest ref is @\${refRegistry.getStats().highWaterMark})\` : result.status === "removed_from_dom" ? \`Ref @\${ref} points to an element that was removed from the DOM (try refreshing /tree)\` : \`Ref @\${ref} is stale - element was garbage collected (try refreshing /tree)\`;
       return { element: null, targetDesc: \`@\${ref}\`, error: errorMsg };
     }
     if (selector) {
@@ -3588,13 +3597,13 @@ var COMPONENT_JS = `(() => {
   }
   function resolveRefOrSelectorAll(ref, selector) {
     if (ref) {
-      const result2 = refRegistry.resolveWithStatus(ref);
-      if (result2.element) {
+      const result = refRegistry.resolveWithStatus(ref);
+      if (result.element) {
         stats.refsResolved++;
-        return { elements: [result2.element], targetDesc: \`@\${ref}\` };
+        return { elements: [result.element], targetDesc: \`@\${ref}\` };
       }
       stats.refsStale++;
-      const errorMsg = result2.status === "never_assigned" ? \`Ref @\${ref} was never assigned (highest ref is @\${refRegistry.getStats().highWaterMark})\` : result2.status === "removed_from_dom" ? \`Ref @\${ref} points to an element that was removed from the DOM (try refreshing /tree)\` : \`Ref @\${ref} is stale - element was garbage collected (try refreshing /tree)\`;
+      const errorMsg = result.status === "never_assigned" ? \`Ref @\${ref} was never assigned (highest ref is @\${refRegistry.getStats().highWaterMark})\` : result.status === "removed_from_dom" ? \`Ref @\${ref} points to an element that was removed from the DOM (try refreshing /tree)\` : \`Ref @\${ref} is stale - element was garbage collected (try refreshing /tree)\`;
       return { elements: [], targetDesc: \`@\${ref}\`, error: errorMsg };
     }
     if (selector) {
@@ -4734,6 +4743,7 @@ var COMPONENT_JS = `(() => {
     displayStream = null;
     displayVideo = null;
     isActive = true;
+    visibilityHandler = null;
     homeLeft = 0;
     homeBottom = 16;
     headless = false;
@@ -4925,6 +4935,16 @@ var COMPONENT_JS = `(() => {
       }
       this.interceptConsole();
       this.interceptDialogs();
+      if (typeof document !== "undefined") {
+        this.visibilityHandler = () => {
+          if (document.visibilityState === "hidden") {
+            this.deactivate();
+          } else {
+            this.activate();
+          }
+        };
+        document.addEventListener("visibilitychange", this.visibilityHandler);
+      }
       this.connect();
     }
     disconnectedCallback() {
@@ -4935,6 +4955,10 @@ var COMPONENT_JS = `(() => {
       this.clearEventWatchers();
       this.stopMutationWatch();
       this.stopScreenCapture();
+      if (this.visibilityHandler && typeof document !== "undefined") {
+        document.removeEventListener("visibilitychange", this.visibilityHandler);
+        this.visibilityHandler = null;
+      }
     }
     attributeChangedCallback(name, _old, value) {
       if (name === "server") {
@@ -5828,8 +5852,8 @@ var COMPONENT_JS = `(() => {
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ action: "start", window: this.windowId })
         });
-        const result2 = await response.json();
-        if (result2.success) {
+        const result = await response.json();
+        if (result.success) {
           this.isRecording = true;
           this.serverManagedRecording = true;
           this.recordingStartTime = Date.now();
@@ -5841,7 +5865,7 @@ var COMPONENT_JS = `(() => {
           this.updateRecordingUI(true);
           console.log("[Haltija] Recording started (server-managed)");
         } else {
-          console.error("[Haltija] Failed to start recording:", result2.error);
+          console.error("[Haltija] Failed to start recording:", result.error);
         }
       } catch (err) {
         console.error("[Haltija] Failed to start recording:", err);
@@ -5856,10 +5880,10 @@ var COMPONENT_JS = `(() => {
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ action: "stop", window: this.windowId })
         });
-        const result2 = await response.json();
-        if (result2.success && result2.data) {
-          this.recordingEvents = result2.data.events || [];
-          this.recordingStartTime = result2.data.startTime || this.recordingStartTime;
+        const result = await response.json();
+        if (result.success && result.data) {
+          this.recordingEvents = result.data.events || [];
+          this.recordingStartTime = result.data.startTime || this.recordingStartTime;
           const recordingId = \`rec_\${this.recordingStartTime}_\${Math.random().toString(36).slice(2, 8)}\`;
           this.lastRecordingId = recordingId;
           console.log(\`[Haltija] Recording stopped (\${this.recordingEvents.length} events)\`);
@@ -6172,15 +6196,15 @@ var COMPONENT_JS = `(() => {
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ description, agentId })
         });
-        const result2 = await response.json();
-        if (result2.error) {
+        const result = await response.json();
+        if (result.error) {
           if (successMsg) {
-            successMsg.textContent = \`\u26A0\uFE0F \${result2.error}\`;
+            successMsg.textContent = \`\u26A0\uFE0F \${result.error}\`;
             successMsg.style.color = "#f59e0b";
           }
         } else {
           if (successMsg) {
-            successMsg.textContent = \`\u2713 Sent to \${agentName}\${result2.interrupted ? " (interrupted)" : ""}\`;
+            successMsg.textContent = \`\u2713 Sent to \${agentName}\${result.interrupted ? " (interrupted)" : ""}\`;
             successMsg.style.color = "#22c55e";
           }
           setTimeout(() => this.closeTestModal(), 1500);
@@ -6711,13 +6735,13 @@ var COMPONENT_JS = `(() => {
         const haltija = window.haltija;
         if (haltija?.openAgentTab) {
           newAgentText.textContent = "Creating...";
-          const result2 = await haltija.openAgentTab();
-          if (result2?.shellId) {
+          const result = await haltija.openAgentTab();
+          if (result?.shellId) {
             await new Promise((r) => setTimeout(r, 300));
             if (type === "selection") {
-              this.sendSelectionToAgent(result2.shellId, result2.name || "agent");
+              this.sendSelectionToAgent(result.shellId, result.name || "agent");
             } else if (type === "recording") {
-              this.sendRecordingToAgent(result2.shellId, result2.name || "agent");
+              this.sendRecordingToAgent(result.shellId, result.name || "agent");
             }
           } else {
             console.error(\`\${LOG_PREFIX} Failed to create agent tab\`);
@@ -6786,8 +6810,8 @@ var COMPONENT_JS = `(() => {
             context: \`selection from \${window.location.host}\`
           })
         });
-        const result2 = await response.json();
-        if (result2.sent) {
+        const result = await response.json();
+        if (result.sent) {
           this.clearSelection();
           console.log(\`\${LOG_PREFIX} Selection sent to \${agentName}\`);
         }
@@ -8073,6 +8097,7 @@ var COMPONENT_JS = `(() => {
           this.state = "connected";
           this.show();
           const windowType = window.opener ? "popup" : window.parent !== window ? "iframe" : "tab";
+          this.isActive = typeof document === "undefined" || document.visibilityState !== "hidden";
           this.send("system", "connected", {
             windowId: this.windowId,
             browserId: this.browserId,
@@ -8301,11 +8326,11 @@ var COMPONENT_JS = `(() => {
           this.respond(msg2.id, false, undefined, "Video capture requires the Haltija Desktop app. Run: npx haltija@latest -f");
           return;
         }
-        haltija.startVideoCapture({ maxDuration: payload2.maxDuration }).then((result2) => {
-          if (result2.success) {
-            this.respond(msg2.id, true, { recordingId: result2.recordingId });
+        haltija.startVideoCapture({ maxDuration: payload2.maxDuration }).then((result) => {
+          if (result.success) {
+            this.respond(msg2.id, true, { recordingId: result.recordingId });
           } else {
-            this.respond(msg2.id, false, undefined, result2.error || "Failed to start video");
+            this.respond(msg2.id, false, undefined, result.error || "Failed to start video");
           }
         }).catch((err) => {
           this.respond(msg2.id, false, undefined, \`Failed to start video: \${err.message}\`);
@@ -8315,11 +8340,11 @@ var COMPONENT_JS = `(() => {
           this.respond(msg2.id, false, undefined, "Video capture requires the Haltija Desktop app. Run: npx haltija@latest -f");
           return;
         }
-        haltija.stopVideoCapture().then((result2) => {
-          if (result2.success) {
-            this.respond(msg2.id, true, { path: result2.path, duration: result2.duration, size: result2.size, format: result2.format });
+        haltija.stopVideoCapture().then((result) => {
+          if (result.success) {
+            this.respond(msg2.id, true, { path: result.path, duration: result.duration, size: result.size, format: result.format });
           } else {
-            this.respond(msg2.id, false, undefined, result2.error || "Failed to stop video");
+            this.respond(msg2.id, false, undefined, result.error || "Failed to stop video");
           }
         }).catch((err) => {
           this.respond(msg2.id, false, undefined, \`Failed to stop video: \${err.message}\`);
@@ -8329,8 +8354,8 @@ var COMPONENT_JS = `(() => {
           this.respond(msg2.id, true, { recording: false });
           return;
         }
-        haltija.videoStatus().then((result2) => {
-          this.respond(msg2.id, true, result2);
+        haltija.videoStatus().then((result) => {
+          this.respond(msg2.id, true, result);
         }).catch(() => {
           this.respond(msg2.id, true, { recording: false });
         });
@@ -8347,8 +8372,8 @@ var COMPONENT_JS = `(() => {
           this.respond(msg2.id, false, undefined, notAvailable);
           return;
         }
-        haltija.networkWatch(payload2 || {}).then((result2) => {
-          this.respond(msg2.id, result2.success !== false, result2);
+        haltija.networkWatch(payload2 || {}).then((result) => {
+          this.respond(msg2.id, result.success !== false, result);
         }).catch((err) => {
           this.respond(msg2.id, false, undefined, err.message);
         });
@@ -8357,8 +8382,8 @@ var COMPONENT_JS = `(() => {
           this.respond(msg2.id, false, undefined, notAvailable);
           return;
         }
-        haltija.networkUnwatch().then((result2) => {
-          this.respond(msg2.id, true, result2);
+        haltija.networkUnwatch().then((result) => {
+          this.respond(msg2.id, true, result);
         }).catch((err) => {
           this.respond(msg2.id, false, undefined, err.message);
         });
@@ -8367,8 +8392,8 @@ var COMPONENT_JS = `(() => {
           this.respond(msg2.id, false, undefined, notAvailable);
           return;
         }
-        haltija.networkLog(payload2 || {}).then((result2) => {
-          this.respond(msg2.id, true, result2);
+        haltija.networkLog(payload2 || {}).then((result) => {
+          this.respond(msg2.id, true, result);
         }).catch((err) => {
           this.respond(msg2.id, false, undefined, err.message);
         });
@@ -8377,8 +8402,8 @@ var COMPONENT_JS = `(() => {
           this.respond(msg2.id, false, undefined, notAvailable);
           return;
         }
-        haltija.networkStats().then((result2) => {
-          this.respond(msg2.id, true, result2);
+        haltija.networkStats().then((result) => {
+          this.respond(msg2.id, true, result);
         }).catch((err) => {
           this.respond(msg2.id, false, undefined, err.message);
         });
@@ -8387,8 +8412,8 @@ var COMPONENT_JS = `(() => {
           this.respond(msg2.id, false, undefined, notAvailable);
           return;
         }
-        haltija.networkClear().then((result2) => {
-          this.respond(msg2.id, true, result2);
+        haltija.networkClear().then((result) => {
+          this.respond(msg2.id, true, result);
         }).catch((err) => {
           this.respond(msg2.id, false, undefined, err.message);
         });
@@ -8834,9 +8859,9 @@ var COMPONENT_JS = `(() => {
             try {
               const capturePromise = targetSelector ? haltija.captureElement(targetSelector) : haltija.capturePage();
               const timeoutPromise = new Promise((resolve) => setTimeout(() => resolve({ success: false, error: "Screenshot capture timed out after 10s" }), 1e4));
-              const result2 = await Promise.race([capturePromise, timeoutPromise]);
-              if (result2?.success && result2.data) {
-                const converted = await convertFormat(result2.data);
+              const result = await Promise.race([capturePromise, timeoutPromise]);
+              if (result?.success && result.data) {
+                const converted = await convertFormat(result.data);
                 this.respond(msg2.id, true, {
                   image: converted.image,
                   viewport,
@@ -8846,8 +8871,8 @@ var COMPONENT_JS = `(() => {
                   source: "electron"
                 });
                 return;
-              } else if (result2 && !result2.success) {
-                this.respond(msg2.id, false, null, result2.error || "Electron capture failed");
+              } else if (result && !result.success) {
+                this.respond(msg2.id, false, null, result.error || "Electron capture failed");
                 return;
               }
             } catch (err) {
@@ -8918,14 +8943,29 @@ var COMPONENT_JS = `(() => {
         this.respond(msg2.id, true);
       }
     }
-    async handleEvalMessage(msg) {
+    async handleEvalMessage(msg2) {
       try {
-        const result = eval(msg.payload.code);
+        const result = this.evalCode(msg2.payload.code);
         const resolved = result instanceof Promise ? await result : result;
-        this.respond(msg.id, true, resolved);
+        this.respond(msg2.id, true, resolved);
+      } catch (err) {
+        this.respond(msg2.id, false, null, err.message);
+      }
+    }
+    evalCode(code) {
+      try {
+        return eval(code);
+      } catch (err) {
+        if (!(err instanceof SyntaxError) || !/\\b(await|return)\\b/.test(code))
+          throw err;
+      }
+      try {
+        return eval(\`(async () => (\${code}))()\`);
       } catch (err) {
-        this.respond(msg.id, false, null, err.message);
+        if (!(err instanceof SyntaxError))
+          throw err;
       }
+      return eval(\`(async () => { \${code} })()\`);
     }
     async handleFetchMessage(msg2) {
       const { url } = msg2.payload;
@@ -9003,14 +9043,14 @@ var COMPONENT_JS = `(() => {
       let el = null;
       let targetDesc = "";
       if (ref) {
-        const result2 = refRegistry.resolveWithStatus(ref);
-        el = result2.element;
+        const result = refRegistry.resolveWithStatus(ref);
+        el = result.element;
         targetDesc = \`@\${ref}\`;
         if (el) {
           stats.refsResolved++;
         } else {
           stats.refsStale++;
-          const errorMsg = result2.status === "never_assigned" ? \`Ref @\${ref} was never assigned (highest ref is @\${refRegistry.getStats().highWaterMark})\` : result2.status === "removed_from_dom" ? \`Ref @\${ref} points to an element that was removed from the DOM (try refreshing /tree)\` : \`Ref @\${ref} is stale - element was garbage collected (try refreshing /tree)\`;
+          const errorMsg = result.status === "never_assigned" ? \`Ref @\${ref} was never assigned (highest ref is @\${refRegistry.getStats().highWaterMark})\` : result.status === "removed_from_dom" ? \`Ref @\${ref} points to an element that was removed from the DOM (try refreshing /tree)\` : \`Ref @\${ref} is stale - element was garbage collected (try refreshing /tree)\`;
           this.respond(responseId, false, null, errorMsg);
           return;
         }
@@ -9355,14 +9395,14 @@ var COMPONENT_JS = `(() => {
       let el = null;
       let targetDesc = "";
       if (payload2.ref) {
-        const result2 = refRegistry.resolveWithStatus(payload2.ref);
-        el = result2.element;
+        const result = refRegistry.resolveWithStatus(payload2.ref);
+        el = result.element;
         targetDesc = \`@\${payload2.ref}\`;
         if (el) {
           stats.refsResolved++;
         } else {
           stats.refsStale++;
-          const errorMsg = result2.status === "never_assigned" ? \`Ref @\${payload2.ref} was never assigned (highest ref is @\${refRegistry.getStats().highWaterMark})\` : result2.status === "removed_from_dom" ? \`Ref @\${payload2.ref} points to an element that was removed from the DOM (try refreshing /tree)\` : \`Ref @\${payload2.ref} is stale - element was garbage collected (try refreshing /tree)\`;
+          const errorMsg = result.status === "never_assigned" ? \`Ref @\${payload2.ref} was never assigned (highest ref is @\${refRegistry.getStats().highWaterMark})\` : result.status === "removed_from_dom" ? \`Ref @\${payload2.ref} points to an element that was removed from the DOM (try refreshing /tree)\` : \`Ref @\${payload2.ref} is stale - element was garbage collected (try refreshing /tree)\`;
           this.respond(responseId, false, null, errorMsg);
           return;
         }
@@ -9431,15 +9471,15 @@ var COMPONENT_JS = `(() => {
         let target = null;
         let targetDesc = "";
         if (ref) {
-          const result2 = refRegistry.resolveWithStatus(ref);
-          target = result2.element;
+          const result = refRegistry.resolveWithStatus(ref);
+          target = result.element;
           targetDesc = \`@\${ref}\`;
           if (target) {
             stats.refsResolved++;
             target.focus();
           } else {
             stats.refsStale++;
-            const errorMsg = result2.status === "never_assigned" ? \`Ref @\${ref} was never assigned (highest ref is @\${refRegistry.getStats().highWaterMark})\` : result2.status === "removed_from_dom" ? \`Ref @\${ref} points to an element that was removed from the DOM (try refreshing /tree)\` : \`Ref @\${ref} is stale - element was garbage collected (try refreshing /tree)\`;
+            const errorMsg = result.status === "never_assigned" ? \`Ref @\${ref} was never assigned (highest ref is @\${refRegistry.getStats().highWaterMark})\` : result.status === "removed_from_dom" ? \`Ref @\${ref} points to an element that was removed from the DOM (try refreshing /tree)\` : \`Ref @\${ref} is stale - element was garbage collected (try refreshing /tree)\`;
             this.respond(responseId, false, null, errorMsg);
             return;
           }
@@ -9831,9 +9871,9 @@ var COMPONENT_JS = `(() => {
         });
       } else if (action2 === "result") {
         if (this.selectionResult) {
-          const result2 = this.selectionResult;
+          const result = this.selectionResult;
           this.clearSelection();
-          this.respond(msg2.id, true, result2);
+          this.respond(msg2.id, true, result);
         } else {
           this.respond(msg2.id, false, null, "No selection available");
         }
@@ -11094,7 +11134,17 @@ ${isElectronApp ? "" : `  <script>
         document.getElementById('tab-' + tabId).classList.add('active');
       });
     });
-    
+
+    // Deep-link to a tab via ?tab=<name>. Lets tests (and links) land directly
+    // on a tab instead of relying on a click landing right after navigation \u2014
+    // which raced under headless CI.
+    (function() {
+      var wanted = new URLSearchParams(location.search).get('tab');
+      if (!wanted) return;
+      var btn = document.querySelector('.tab[data-tab="' + wanted + '"]');
+      if (btn) btn.click();
+    })();
+
     // Copy button functionality
     function copyCode(btn) {
       var pre = btn.parentElement.querySelector('pre');
@@ -11373,6 +11423,8 @@ Use ancestors:true to see parent elements when inspecting deep elements.`,
     pierceFrames: L.boolean.describe("Pierce same-origin iframes (default true)").optional,
     compact: L.boolean.describe("Minimal output (default false)").optional,
     ancestors: L.boolean.describe("Include ancestor path from root (default false)").optional,
+    includeBox: L.boolean.describe("Include each node's bounding box { x, y, w, h, visible } (default false)").optional,
+    mode: L.string.describe("'actionable' returns a page action summary (url, title, headings, buttons, links, inputs, selects) instead of the DOM tree").optional,
     window: L.string.describe("Target window ID").optional
   }),
   examples: [
@@ -12360,7 +12412,14 @@ var eval_ = endpoint({
   description: `Run arbitrary JavaScript in the browser context. Returns the result.
 
 The code runs in the page's context with access to window, document, etc.
-Return values are JSON-serialized. Promises are awaited.`,
+Return values are JSON-serialized.
+
+Async code is supported: a returned Promise is awaited, and top-level \`await\`
+works. Multi-statement code needs an explicit \`return\` to produce a value.
+
+  document.title                        -> the title
+  await fetch('/api').then(r => r.json()) -> the parsed body
+  const r = await fetch('/api'); return r.status -> the status code`,
   category: "debug",
   input: L.object({
     code: L.string.describe("JavaScript code to execute"),
@@ -14063,7 +14122,10 @@ registerHandler(tree, async (body, ctx) => {
     pierceShadow: body.pierceShadow,
     pierceFrames: body.pierceFrames,
     visibleOnly: body.visibleOnly,
-    ancestors: body.ancestors
+    interactiveOnly: body.interactiveOnly,
+    ancestors: body.ancestors,
+    includeBox: body.includeBox,
+    mode: body.mode
   }, 5000, windowId);
   return Response.json(response, { headers: ctx.headers });
 });
@@ -18525,7 +18587,8 @@ var serverConfig = {
                 label: existingWindow?.label,
                 windowType: windowType || "tab"
               });
-              if (!focusedWindowId || focusedWindowId === windowId) {
+              const isVisibleTab = (windowType || "tab") === "tab" && active !== false;
+              if (!focusedWindowId || focusedWindowId === windowId || isVisibleTab) {
                 focusedWindowId = windowId;
               }
               console.log(`${LOG_PREFIX} Window connected: ${windowId} (${url})`);
@@ -18569,6 +18632,9 @@ var serverConfig = {
             if (win) {
               win.active = active;
               win.lastSeen = Date.now();
+              if (active && win.windowType === "tab") {
+                focusedWindowId = windowId;
+              }
             }
           }
         } catch {}