haltija 1.3.0-beta.8 → 1.3.0

package/README.md

@@ -76,6 +76,26 @@ Haltija connects to the browser you're already using. The one with the bug, the
 
 ---
 
+## Haltija vs. Claude in Chrome
+
+Both let an agent drive a browser — they're built for different jobs. Because Haltija can either **spawn its own isolated browser** *or* **attach to your real one** (via a script tag / bookmarklet on a port you choose), it covers the axes a live-session-only tool can't.
+
+| Axis | Haltija | Claude in Chrome |
+|---|---|---|
+| Setup / auth | ✅ `bunx haltija` — zero auth, self-spawns | ⚠️ Extension + claude.ai login + per-site permissions |
+| How the agent invokes it | ✅ Plain `hj` CLI / REST — always available in a shell | ⚠️ MCP tools; must be loaded + extension connected |
+| Project integration | ✅ *Is* your test harness — JSON tests (`hj test-suite`), record→replay, CI | ❌ None |
+| Determinism / cost | ✅ DOM + `eval` with stable ref IDs — cheap text, scriptable, headless-CI-able | ⚠️ Has structured reads (page text, find-by-text) *and* vision/coordinate actions; the vision path is token-heavy and coordinate clicks less deterministic |
+| Isolation | ✅ Own instance on its own port — never touches your browsing | ❌ Drives tabs in your live session |
+| Real-browser fidelity (WebGL/3D, pixels) | ✅ Attach to a real GPU Chrome or the desktop app *(headless GPU is the one weak spot)* | ✅ Full real Chrome GPU |
+| Authenticated / external sites | ✅ Inject into your logged-in browser on a chosen port *(one-time setup step)* | ✅ Native — already your logged-in profile |
+| Flakiness / contention | ✅ A private port per project = dedicated instance *(a shared instance can still flake under contention)* | ⚠️ Depends on live browser + extension state |
+| Screenshots | ✅ Native (desktop) or WebRTC `getDisplayMedia` (browser) | ✅ Vision-native |
+
+**The short version:** reach for Claude in Chrome to glance at the tab you're already looking at; reach for Haltija when you want a browser your agent *controls* — reproducibly, cheaply, in CI, and as the regression harness your project already has.
+
+---
+
 ## How It Works
 
 ```
@@ -246,18 +266,25 @@ The server rejects every REST/WebSocket request without a matching `X-Haltija-To
 ## Installation
 
 ```bash
-bunx haltija               # Desktop app (recommended)
-bunx haltija --server      # Server only (your browser, CI, remote)
+bunx haltija               # Bundled browser + embedded server (easiest start)
+bunx haltija --server      # Server only — your browser, per-project dev/debug
 npm install -g haltija     # Install globally
 
 # Server options
 haltija --https            # HTTPS mode
 haltija --port 3000        # Custom port
+haltija --name <proj>      # Register a per-project instance (hj --name <proj>)
 haltija --token <secret>   # Require X-Haltija-Token on every request
-haltija --headless         # For CI pipelines
+haltija --headless         # For CI pipelines (no desktop app needed)
 haltija --setup-mcp        # Configure Claude Desktop
 ```
 
+**Which mode?** For day-to-day dev/debugging, run a per-project server
+(`haltija --server --name <proj>`) and drive it with the `hj` CLI or your coding
+agent — that's the paved path. For CI, `haltija --headless` runs a deterministic
+headless Chromium with no desktop app required. A downloadable notarized desktop
+app also exists but isn't required for either.
+
 ---
 
 ## Security

package/apps/desktop/main.js

@@ -1387,6 +1387,13 @@ if (!gotTheLock) {
   // App lifecycle
   app.whenReady().then(async () => {
     console.log('[Haltija Desktop] App ready, starting initialization...')
+
+    // Clear the "manually quit" marker — user is explicitly starting Haltija,
+    // so hj should resume auto-launching when needed.
+    try {
+      const quitMarker = path.join(os.homedir(), '.haltija', 'last-quit')
+      if (fs.existsSync(quitMarker)) fs.rmSync(quitMarker, { force: true })
+    } catch {}
     
     try {
       // Start or connect to server first
@@ -1444,6 +1451,13 @@ if (!gotTheLock) {
       }
       embeddedServers.length = 0
     }
+    // Drop a marker so hj's auto-launch knows the user explicitly quit.
+    // Cleared next time the user manually starts Haltija.
+    try {
+      const dir = path.join(os.homedir(), '.haltija')
+      fs.mkdirSync(dir, { recursive: true })
+      fs.writeFileSync(path.join(dir, 'last-quit'), String(Date.now()))
+    } catch {}
   })
 
   // Handle certificate errors (for self-signed certs in dev)

package/apps/desktop/package.json

@@ -1,6 +1,7 @@
 {
   "name": "haltija-desktop",
-  "version": "1.3.0-beta.8",
+  "version": "1.3.0",
+  "private": true,
   "description": "Haltija Desktop - God Mode Browser for AI Agents",
   "homepage": "https://github.com/tonioloewald/haltija",
   "author": {

package/apps/desktop/resources/component.js

@@ -46,7 +46,7 @@
   });
 
   // src/version.ts
-  var VERSION = "1.3.0-beta.8";
+  var VERSION = "1.3.0";
 
   // src/text-selector.ts
   var TEXT_PSEUDO_RE = /:(?:text-is|has-text|text)\(/;
@@ -98,6 +98,47 @@
     return lower.includes(parsed.searchText);
   }
 
+  // src/key-codes.ts
+  function keyToCode(key) {
+    const specialKeys = {
+      Enter: "Enter",
+      Escape: "Escape",
+      Tab: "Tab",
+      Backspace: "Backspace",
+      Delete: "Delete",
+      ArrowUp: "ArrowUp",
+      ArrowDown: "ArrowDown",
+      ArrowLeft: "ArrowLeft",
+      ArrowRight: "ArrowRight",
+      Home: "Home",
+      End: "End",
+      PageUp: "PageUp",
+      PageDown: "PageDown",
+      " ": "Space",
+      Space: "Space",
+      ".": "Period",
+      ",": "Comma",
+      "/": "Slash",
+      ";": "Semicolon",
+      "'": "Quote",
+      "[": "BracketLeft",
+      "]": "BracketRight",
+      "\\": "Backslash",
+      "-": "Minus",
+      "=": "Equal",
+      "`": "Backquote"
+    };
+    if (specialKeys[key])
+      return specialKeys[key];
+    if (/^F\d{1,2}$/.test(key))
+      return key;
+    if (/^[a-zA-Z]$/.test(key))
+      return `Key${key.toUpperCase()}`;
+    if (/^[0-9]$/.test(key))
+      return `Digit${key}`;
+    return key;
+  }
+
   // src/component.ts
   var VERSION2 = VERSION;
   var PRODUCT_NAME = "Haltija";
@@ -1435,7 +1476,7 @@
       if (htmlEl.disabled) {
         flags.disabled = true;
       }
-      if (htmlEl.readOnly) {
+      if ("readOnly" in htmlEl && htmlEl.readOnly) {
         flags.readOnly = true;
       }
       if (!htmlEl.validity.valid) {
@@ -1717,6 +1758,8 @@
     isElectron = false;
     browserId = uid();
     killed = false;
+    displayStream = null;
+    displayVideo = null;
     isActive = true;
     homeLeft = 0;
     homeBottom = 16;
@@ -1918,6 +1961,7 @@
       this.restoreDialogs();
       this.clearEventWatchers();
       this.stopMutationWatch();
+      this.stopScreenCapture();
     }
     attributeChangedCallback(name, _old, value) {
       if (name === "server") {
@@ -2085,6 +2129,10 @@
           color: white;
           animation: pulse 1s infinite;
         }
+        .btn[data-action="screen"].sharing {
+          background: #3b82f6;
+          color: white;
+        }
         .btn[data-action="logs"] {
           font-size: 10px;
           font-weight: 500;
@@ -2485,6 +2533,7 @@
           <div class="controls">
             <button class="btn" data-action="select" title="Click or drag to select elements" 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>
+            <button class="btn" data-action="screen" title="Share screen so the agent can take screenshots (browser only; not needed in Haltija desktop app)" aria-label="Share screen for screenshots">\uD83D\uDDA5</button>
             <button class="btn" data-action="logs" title="Show event log panel" aria-label="Toggle event log">LOG</button>
             <button class="btn info-btn" data-action="stats" title="Copy stats to clipboard" aria-label="Copy stats">i</button>
             <button class="btn" data-action="minimize" title="Minimize widget (⌥Tab)" aria-label="Minimize">─</button>
@@ -2566,6 +2615,8 @@
             this.toggleRecording();
           if (action2 === "select")
             this.startSelection();
+          if (action2 === "screen")
+            this.toggleScreenCapture();
           if (action2 === "stats")
             this.copyStatsToClipboard();
           if (action2 === "close-modal")
@@ -3016,7 +3067,7 @@
             if (options.addAssertions && inputValue) {
               steps.push({
                 action: "assert",
-                assertion: { type: "value", selector, expected: inputValue },
+                assertion: { type: "value", selector, value: inputValue },
                 description: `Verify ${inputLabel} is "${inputValue}"`
               });
             }
@@ -3845,6 +3896,55 @@ ${elementSummary}${moreText}`;
         this.hide();
       }
     }
+    async toggleScreenCapture() {
+      if (this.displayStream) {
+        this.stopScreenCapture();
+        return;
+      }
+      if (typeof navigator === "undefined" || !navigator.mediaDevices?.getDisplayMedia) {
+        console.warn(`${LOG_PREFIX} Screen capture not supported in this browser.`);
+        return;
+      }
+      try {
+        const stream = await navigator.mediaDevices.getDisplayMedia({
+          video: { frameRate: { ideal: 5 } },
+          audio: false
+        });
+        this.displayStream = stream;
+        const video = document.createElement("video");
+        video.srcObject = stream;
+        video.muted = true;
+        video.playsInline = true;
+        await video.play().catch(() => {});
+        this.displayVideo = video;
+        stream.getVideoTracks()[0]?.addEventListener("ended", () => {
+          this.stopScreenCapture();
+        });
+        const btn = this.shadowRoot?.querySelector('.btn[data-action="screen"]');
+        btn?.classList.add("sharing");
+      } catch (err) {
+        console.log(`${LOG_PREFIX} Screen capture not started: ${err.message}`);
+      }
+    }
+    stopScreenCapture() {
+      if (this.displayStream) {
+        for (const track of this.displayStream.getTracks()) {
+          try {
+            track.stop();
+          } catch {}
+        }
+        this.displayStream = null;
+      }
+      if (this.displayVideo) {
+        try {
+          this.displayVideo.pause();
+        } catch {}
+        this.displayVideo.srcObject = null;
+        this.displayVideo = null;
+      }
+      const btn = this.shadowRoot?.querySelector('.btn[data-action="screen"]');
+      btn?.classList.remove("sharing");
+    }
     toggleMinimize() {
       if (this.headless)
         return;
@@ -5336,7 +5436,8 @@ ${elementSummary}${moreText}`;
           scroll: 0,
           mutation: 0,
           console: 0,
-          focus: 0
+          focus: 0,
+          recording: 0
         };
         this.statsStartTime = Date.now();
         this.startSemanticEvents();
@@ -5781,7 +5882,37 @@ ${elementSummary}${moreText}`;
               return;
             }
           }
-          this.respond(msg2.id, false, null, "Screenshots require the Haltija Desktop app. Run: npx haltija@latest -f");
+          if (this.displayVideo && this.displayStream) {
+            try {
+              const video = this.displayVideo;
+              const w = video.videoWidth;
+              const h = video.videoHeight;
+              if (!w || !h) {
+                this.respond(msg2.id, false, null, "Screen capture stream has no frame data yet — try again in a moment.");
+                return;
+              }
+              const canvas = document.createElement("canvas");
+              canvas.width = w;
+              canvas.height = h;
+              const ctx = canvas.getContext("2d");
+              ctx.drawImage(video, 0, 0, w, h);
+              const dataUrl = canvas.toDataURL("image/png");
+              const converted = await convertFormat(dataUrl);
+              this.respond(msg2.id, true, {
+                image: converted.image,
+                viewport,
+                format,
+                width: converted.width,
+                height: converted.height,
+                source: "getDisplayMedia"
+              });
+              return;
+            } catch (err) {
+              this.respond(msg2.id, false, null, `Screen capture frame failed: ${err.message}`);
+              return;
+            }
+          }
+          this.respond(msg2.id, false, null, "No screenshot capture available. Either run the Haltija Desktop app (npx haltija@latest -f) or click the \uD83D\uDDA5 button in the Haltija widget to share your screen.");
         } catch (err) {
           this.respond(msg2.id, false, null, err.message);
         }
@@ -6113,7 +6244,7 @@ ${elementSummary}${moreText}`;
           }
         } else if (isContentEditable) {
           document.execCommand("insertText", false, char);
-        } else {}
+        }
         el.dispatchEvent(new InputEvent("input", {
           bubbles: true,
           inputType: "insertText",
@@ -6193,31 +6324,6 @@ ${elementSummary}${moreText}`;
         el.value = value;
       }
     }
-    getKeyCode(char) {
-      const upper = char.toUpperCase();
-      if (upper >= "A" && upper <= "Z")
-        return `Key${upper}`;
-      if (char >= "0" && char <= "9")
-        return `Digit${char}`;
-      const specialKeys = {
-        " ": "Space",
-        ".": "Period",
-        ",": "Comma",
-        "/": "Slash",
-        ";": "Semicolon",
-        "'": "Quote",
-        "[": "BracketLeft",
-        "]": "BracketRight",
-        "\\": "Backslash",
-        "-": "Minus",
-        "=": "Equal",
-        "`": "Backquote",
-        Enter: "Enter",
-        Tab: "Tab",
-        Backspace: "Backspace"
-      };
-      return specialKeys[char] || `Key${upper}`;
-    }
     getAdjacentKeys() {
       return {
         a: ["s", "q", "w", "z"],
@@ -6464,32 +6570,7 @@ ${elementSummary}${moreText}`;
       }
     }
     getKeyCode(key) {
-      const specialKeys = {
-        Enter: "Enter",
-        Escape: "Escape",
-        Tab: "Tab",
-        Backspace: "Backspace",
-        Delete: "Delete",
-        ArrowUp: "ArrowUp",
-        ArrowDown: "ArrowDown",
-        ArrowLeft: "ArrowLeft",
-        ArrowRight: "ArrowRight",
-        Home: "Home",
-        End: "End",
-        PageUp: "PageUp",
-        PageDown: "PageDown",
-        " ": "Space",
-        Space: "Space"
-      };
-      if (specialKeys[key])
-        return specialKeys[key];
-      if (/^F\d{1,2}$/.test(key))
-        return key;
-      if (/^[a-zA-Z]$/.test(key))
-        return `Key${key.toUpperCase()}`;
-      if (/^[0-9]$/.test(key))
-        return `Digit${key}`;
-      return key;
+      return keyToCode(key);
     }
     getElementLabel(el) {
       const text = el.textContent?.trim().slice(0, 30);