haltija 1.2.4 → 1.2.7

package/dist/component.js

@@ -46,7 +46,7 @@
   });
 
   // src/version.ts
-  var VERSION = "1.2.4";
+  var VERSION = "1.2.7";
 
   // src/text-selector.ts
   var TEXT_PSEUDO_RE = /:(?:text-is|has-text|text)\(/;
@@ -1310,9 +1310,22 @@
     }
     return summary;
   }
+  function pruneNonInteractive(node) {
+    const isInteractive = node.flags?.interactive || node.flags?.hasEvents;
+    const children = node.children?.map((c) => pruneNonInteractive(c)).filter((c) => c !== null);
+    const shadowChildren = node.shadowChildren?.map((c) => pruneNonInteractive(c)).filter((c) => c !== null);
+    const hasInteractiveDescendant = children && children.length > 0 || shadowChildren && shadowChildren.length > 0;
+    if (!isInteractive && !hasInteractiveDescendant)
+      return null;
+    return {
+      ...node,
+      children: children?.length ? children : undefined,
+      shadowChildren: shadowChildren?.length ? shadowChildren : undefined
+    };
+  }
   function buildDomTree(el, options, currentDepth = 0) {
     const {
-      depth = 3,
+      depth = -1,
       includeText = true,
       allAttributes = false,
       includeStyles = false,
@@ -1703,6 +1716,7 @@
     windowId;
     isElectron = false;
     browserId = uid();
+    sessionToken = "";
     killed = false;
     isActive = true;
     homeLeft = 0;
@@ -1775,7 +1789,7 @@
     selectionBox = null;
     highlightedElements = [];
     static get observedAttributes() {
-      return ["server", "hidden"];
+      return ["server", "hidden", "session"];
     }
     static async runTests() {
       const el = document.querySelector(TAG_NAME);
@@ -1871,10 +1885,16 @@
         }
         this.windowId = storedWindowId;
       }
+      if (config?.session) {
+        this.sessionToken = config.session;
+      } else {
+        this.sessionToken = uid();
+      }
     }
     connectedCallback() {
       this.killed = false;
       this.serverUrl = this.getAttribute("server") || this.serverUrl;
+      this.sessionToken = this.getAttribute("session") || this.sessionToken;
       this.render();
       const rect = this.getBoundingClientRect();
       this.homeLeft = window.innerWidth - rect.width - 16;
@@ -1902,6 +1922,11 @@
           this.connect();
         }
       }
+      if (name === "session") {
+        this.sessionToken = value;
+        this.disconnect();
+        this.connect();
+      }
     }
     render() {
       if (this.shadowRoot.querySelector(".widget")) {
@@ -2087,6 +2112,25 @@
         .btn.info-btn:hover {
           background: #2563eb;
         }
+        .session-badge {
+          display: flex;
+          align-items: center;
+          gap: 2px;
+          font-size: 9px;
+          color: #666;
+          background: rgba(255,255,255,0.05);
+          padding: 2px 4px;
+          border-radius: 3px;
+          cursor: pointer;
+          user-select: none;
+        }
+        .session-badge:hover {
+          background: rgba(255,255,255,0.1);
+          color: #aaa;
+        }
+        .session-badge.copied {
+          color: #22c55e;
+        }
         @keyframes pulse {
           0%, 100% { opacity: 1; }
           50% { opacity: 0.5; }
@@ -2449,6 +2493,8 @@
             <span class="logo">\uD83E\uDDDD</span>
           </div>
           <div class="title">${PRODUCT_NAME}</div>
+          <span class="session-badge" data-action="copy-session" title="Session: ${this.sessionToken}
+Click to copy session command">${this.sessionToken.slice(0, 8)}</span>
           <div class="controls">
             <button class="btn" data-action="select" title="Select elements (drag to select area)" aria-label="Select elements">\uD83D\uDC46</button>
             <button class="btn" data-action="record" title="Record test (click to start/stop)" aria-label="Record test">REC</button>
@@ -2535,6 +2581,8 @@
             this.startSelection();
           if (action2 === "stats")
             this.copyStatsToClipboard();
+          if (action2 === "copy-session")
+            this.copySessionToken(e.currentTarget);
           if (action2 === "close-modal")
             this.closeTestModal();
           if (action2 === "copy-test")
@@ -3160,6 +3208,28 @@
         });
       }
     }
+    async copySessionToken(badge) {
+      const cmd = `export HALTIJA_SESSION=${this.sessionToken}`;
+      try {
+        await navigator.clipboard.writeText(cmd);
+        badge.textContent = "copied!";
+        badge.classList.add("copied");
+        setTimeout(() => {
+          badge.textContent = this.sessionToken.slice(0, 8);
+          badge.classList.remove("copied");
+        }, 1500);
+      } catch {
+        try {
+          await navigator.clipboard.writeText(this.sessionToken);
+          badge.textContent = "copied!";
+          badge.classList.add("copied");
+          setTimeout(() => {
+            badge.textContent = this.sessionToken.slice(0, 8);
+            badge.classList.remove("copied");
+          }, 1500);
+        } catch {}
+      }
+    }
     async copyStatsToClipboard() {
       const refStats = refRegistry.getStats();
       stats.refsStale = refStats.stale;
@@ -4926,6 +4996,7 @@ ${elementSummary}${moreText}`;
           this.send("system", "connected", {
             windowId: this.windowId,
             browserId: this.browserId,
+            session: this.sessionToken,
             version: VERSION2,
             serverSessionId: SERVER_SESSION_ID,
             url: location.href,
@@ -5351,7 +5422,7 @@ ${elementSummary}${moreText}`;
       const haltija = window.haltija;
       if (action2 === "open") {
         if (haltija?.openTab) {
-          haltija.openTab(payload2.url).then((opened) => {
+          haltija.openTab(payload2.url, payload2.session).then((opened) => {
             this.respond(msg2.id, true, { opened });
           }).catch((err) => {
             this.respond(msg2.id, false, null, err.message);
@@ -5471,7 +5542,10 @@ ${elementSummary}${moreText}`;
             const summary = buildActionableSummary(el);
             this.respond(msg2.id, true, summary);
           } else {
-            const tree = buildDomTree(el, request);
+            let tree = buildDomTree(el, request);
+            if (request.interactiveOnly && tree) {
+              tree = pruneNonInteractive(tree);
+            }
             if (request.ancestors && tree) {
               const ancestors = [];
               let parent = el.parentElement;
@@ -7207,7 +7281,7 @@ ${elementSummary}${moreText}`;
   }
   registerDevChannel();
   var WIDGET_ID = "haltija-widget";
-  function inject(serverUrl2 = "wss://localhost:8700/ws/browser") {
+  function inject(serverUrl2 = "wss://localhost:8700/ws/browser", options) {
     const existing = document.getElementById(WIDGET_ID);
     if (existing) {
       console.log(`${LOG_PREFIX} Already injected`);
@@ -7222,6 +7296,8 @@ ${elementSummary}${moreText}`;
     const el = DevChannel.elementCreator()();
     el.id = WIDGET_ID;
     el.setAttribute("server", serverUrl2);
+    if (options?.session)
+      el.setAttribute("session", options.session);
     el.setAttribute("data-version", VERSION2);
     document.body.appendChild(el);
     console.log(`${LOG_PREFIX} Injected`);
@@ -7233,7 +7309,7 @@ ${elementSummary}${moreText}`;
     const config = window.__haltija_config__;
     if (config?.autoInject !== false) {
       if (config) {
-        inject(config.serverUrl || config.wsUrl);
+        inject(config.serverUrl || config.wsUrl, { session: config.session });
         return;
       }
     }

package/dist/hj.js

@@ -10,13 +10,15 @@ import { fileURLToPath } from "url";
 
 // bin/format-tree.mjs
 var MAX_TEXT_LEN = 80;
-function formatTree(node, indent = 0) {
+function formatTree(node, indent = 0, { depth } = {}) {
   if (!node)
     return "";
   const lines = [];
   formatNode(node, indent, lines);
+  const d = depth ?? -1;
+  const depthLabel = d === -1 ? "unlimited" : String(d);
   lines.push("---");
-  lines.push("hj tree --json");
+  lines.push(`depth=${depthLabel} | -d N | -i (interactive) | --visible | --json`);
   return lines.join(`
 `);
 }
@@ -898,7 +900,11 @@ function parseTreeArgs(args) {
       body.compact = true;
       continue;
     }
-    if (a === "--visible") {
+    if (a === "--interactive" || a === "-i") {
+      body.interactiveOnly = true;
+      continue;
+    }
+    if (a === "--visible" || a === "-v") {
       body.visibleOnly = true;
       continue;
     }
@@ -1140,6 +1146,13 @@ function clean(obj) {
   }
   return Object.keys(result).length ? result : undefined;
 }
+function getSessionId() {
+  if (process.env.HALTIJA_SESSION)
+    return process.env.HALTIJA_SESSION;
+  const id = `hj_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
+  process.env.HALTIJA_SESSION = id;
+  return id;
+}
 async function isServerRunning(port) {
   try {
     const resp = await fetch(`http://localhost:${port}/status`, {
@@ -1198,9 +1211,75 @@ async function startServerInBackground(port) {
   }
   return false;
 }
-async function runSubcommand(subcommand, subArgs, port = "8700") {
+async function launchElectronApp() {
+  const { execSync, spawn: spawnChild } = await import("child_process");
+  if (process.platform === "darwin") {
+    const appPaths = [
+      "/Applications/Haltija.app",
+      `${process.env.HOME}/Applications/Haltija.app`
+    ];
+    for (const p of appPaths) {
+      if (existsSync(p)) {
+        spawnChild("open", ["-a", p], { stdio: "ignore", detached: true }).unref();
+        return true;
+      }
+    }
+    try {
+      const result = execSync('mdfind "kMDItemCFBundleIdentifier == com.electron.haltija" | head -1', { encoding: "utf-8", stdio: ["pipe", "pipe", "ignore"] }).trim();
+      if (result) {
+        spawnChild("open", ["-a", result], { stdio: "ignore", detached: true }).unref();
+        return true;
+      }
+    } catch {}
+    return false;
+  }
+  return false;
+}
+async function ensureBrowserConnected(port) {
+  try {
+    const resp = await fetch(`http://localhost:${port}/status`, {
+      signal: AbortSignal.timeout(2000)
+    });
+    const status = await resp.json();
+    if (status.ok)
+      return true;
+  } catch {
+    return false;
+  }
+  if (process.platform !== "darwin")
+    return false;
+  process.stderr.write("\x1B[2mLaunching Haltija browser...\x1B[0m");
+  const launched = await launchElectronApp();
+  if (!launched) {
+    process.stderr.write(`\x1B[2m not found\x1B[0m
+`);
+    return false;
+  }
+  const maxWait = 1e4;
+  const start = Date.now();
+  while (Date.now() - start < maxWait) {
+    try {
+      const resp = await fetch(`http://localhost:${port}/status`, {
+        signal: AbortSignal.timeout(1000)
+      });
+      const status = await resp.json();
+      if (status.ok) {
+        process.stderr.write(`\x1B[2m ready\x1B[0m
+`);
+        return true;
+      }
+    } catch {}
+    await new Promise((r) => setTimeout(r, 500));
+  }
+  process.stderr.write(`\x1B[2m timeout\x1B[0m
+`);
+  return false;
+}
+var INFO_COMMANDS = new Set(["status", "windows", "version", "help"]);
+async function runSubcommand(subcommand, subArgs, port = "8700", options = {}) {
   const baseUrl = `http://localhost:${port}`;
   const jsonOutput = subArgs.includes("--json");
+  const noLaunch = options.noLaunch || false;
   let filteredArgs = subArgs.filter((a) => a !== "--json");
   let targetWindowId = undefined;
   const windowIdx = filteredArgs.indexOf("--window");
@@ -1208,6 +1287,11 @@ async function runSubcommand(subcommand, subArgs, port = "8700") {
     targetWindowId = filteredArgs[windowIdx + 1];
     filteredArgs = [...filteredArgs.slice(0, windowIdx), ...filteredArgs.slice(windowIdx + 2)];
   }
+  const sessionIdx = filteredArgs.indexOf("--session");
+  if (sessionIdx !== -1) {
+    process.env.HALTIJA_SESSION = filteredArgs[sessionIdx + 1];
+    filteredArgs = [...filteredArgs.slice(0, sessionIdx), ...filteredArgs.slice(sessionIdx + 2)];
+  }
   if (!await isServerRunning(port)) {
     process.stderr.write("\x1B[2mStarting Haltija server...\x1B[0m");
     const started = await startServerInBackground(port);
@@ -1221,6 +1305,9 @@ async function runSubcommand(subcommand, subArgs, port = "8700") {
       process.exit(1);
     }
   }
+  if (!noLaunch && !INFO_COMMANDS.has(subcommand)) {
+    await ensureBrowserConnected(port);
+  }
   if (subcommand === "send") {
     const firstArg = filteredArgs[0]?.toLocaleLowerCase();
     if (firstArg === "selection") {
@@ -1266,9 +1353,10 @@ async function runSubcommand(subcommand, subArgs, port = "8700") {
 async function doRequest(url, method, body, context = {}) {
   const { subcommand, jsonOutput } = context;
   try {
-    const opts = { method };
+    const sessionId = getSessionId();
+    const opts = { method, headers: { "X-Haltija-Session": sessionId } };
     if (body) {
-      opts.headers = { "Content-Type": "application/json" };
+      opts.headers["Content-Type"] = "application/json";
       opts.body = JSON.stringify(body);
     }
     const resp = await fetch(url, opts);
@@ -1276,7 +1364,7 @@ async function doRequest(url, method, body, context = {}) {
     if (contentType.includes("application/json")) {
       const json = await resp.json();
       if (!jsonOutput && subcommand === "tree" && json.success && json.data) {
-        console.log(formatTree(json.data));
+        console.log(formatTree(json.data, 0, { depth: body?.depth }));
       } else if (!jsonOutput && subcommand === "events" && (json.events || Array.isArray(json))) {
         console.log(formatEvents(json));
       } else if (!jsonOutput && subcommand === "test-run" && json.test) {
@@ -1428,7 +1516,7 @@ function listSubcommands() {
   return `
 Subcommands (replace curl with simple commands):
   ${bold("Inspect")}
-    tree [selector] [-d depth]     DOM tree with ref IDs
+    tree [selector] [-d N] [-i] [-v] DOM tree (full depth, -i=interactive, -v=visible)
     query <selector>               Find elements matching selector
     inspect <@ref|selector>        Detailed element info
     inspectAll <selector>          Deep inspect all matches
@@ -1558,6 +1646,17 @@ if (portIdx !== -1 && args[portIdx + 1]) {
   port = args[portIdx + 1];
   args.splice(portIdx, 2);
 }
+var sessionIdx = args.indexOf("--session");
+if (sessionIdx !== -1 && args[sessionIdx + 1]) {
+  process.env.HALTIJA_SESSION = args[sessionIdx + 1];
+  args.splice(sessionIdx, 2);
+}
+var noLaunch = false;
+var noLaunchIdx = args.indexOf("--no-launch");
+if (noLaunchIdx !== -1) {
+  noLaunch = true;
+  args.splice(noLaunchIdx, 1);
+}
 var subcommand = args[0];
 var subArgs = args.slice(1).filter((a) => a !== "--window" || true);
 if (!isSubcommand(subcommand)) {
@@ -1581,7 +1680,7 @@ Examples: hj tree, hj navigate <url>, hj click @42`);
   console.error(`Run 'hj' for docs.`);
   process.exit(1);
 } else {
-  runSubcommand(subcommand, subArgs, port);
+  runSubcommand(subcommand, subArgs, port, { noLaunch });
 }
 function filterHelp(topic) {
   const bold2 = (s) => `\x1B[1m${s}\x1B[0m`;