agex 0.2.10 → 0.2.12

package/assets/assets/effects.js

@@ -178,6 +178,17 @@
         max-width: 80%;
         text-align: center;
         animation: ${EFFECTS_ID}-subtitle-slide-down 0.35s ease-out;
+        overflow: hidden;
+      }
+      .${EFFECTS_ID}-subtitle-progress {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 2px;
+        background: color-mix(in srgb, var(--subtitle-fg, white) 15%, transparent);
+        border-radius: 0 0 8px 8px;
+        width: 0%;
+        transition: none;
       }
       .${EFFECTS_ID}-drawing-canvas {
         position: fixed;
@@ -547,39 +558,13 @@
         if (el) el.remove();
       },
 
-      typeText(selector, text, charDelay) {
-        charDelay = charDelay || 80;
-        var el = utils.getElement(selector);
-        if (!el) return 0;
-        el.focus();
-        var i = 0;
-        var len = text.length;
-        function typeNext() {
-          if (i >= len) return;
-          var ch = text[i];
-          el.dispatchEvent(new KeyboardEvent('keydown', { key: ch, bubbles: true }));
-          el.dispatchEvent(new KeyboardEvent('keypress', { key: ch, bubbles: true }));
-          // For contenteditable elements, insert text differently
-          if (el.isContentEditable) {
-            document.execCommand('insertText', false, ch);
-          } else {
-            // Use InputEvent for proper React/framework compatibility
-            var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
-              Object.getPrototypeOf(el), 'value'
-            );
-            if (nativeInputValueSetter && nativeInputValueSetter.set) {
-              nativeInputValueSetter.set.call(el, el.value + ch);
-            } else {
-              el.value = el.value + ch;
-            }
-            el.dispatchEvent(new Event('input', { bubbles: true }));
-          }
-          el.dispatchEvent(new KeyboardEvent('keyup', { key: ch, bubbles: true }));
-          i++;
-          if (i < len) setTimeout(typeNext, charDelay);
-        }
-        typeNext();
-        return len * charDelay;
+      setPosition(x, y) {
+        var c = document.getElementById('agex-cursor');
+        if (!c) return;
+        c.style.transition = 'none';
+        c.style.left = x + 'px';
+        c.style.top = y + 'px';
+        this._lastPos = { x: x, y: y };
       },
 
       fadeOut() {
@@ -1429,10 +1414,29 @@
         if (fg) subtitle.style.setProperty('--subtitle-fg', fg);
         if (bg) subtitle.style.setProperty('--subtitle-bg', bg);
         subtitle.textContent = text;
+
+        var bar = document.createElement('div');
+        bar.className = `${EFFECTS_ID}-subtitle-progress`;
+        subtitle.appendChild(bar);
+
+        var startTime = performance.now();
+        var barDuration = duration > 0 ? duration : 30000;
+        var rafId = 0;
+        function tick() {
+          var elapsed = performance.now() - startTime;
+          var pct = Math.min(elapsed / barDuration * 100, 100);
+          bar.style.width = pct + '%';
+          if (pct < 100) rafId = requestAnimationFrame(tick);
+        }
+        rafId = requestAnimationFrame(tick);
+
         document.body.appendChild(subtitle);
         
         if (duration > 0) {
-          setTimeout(() => subtitle.remove(), duration);
+          setTimeout(function() {
+            cancelAnimationFrame(rafId);
+            subtitle.remove();
+          }, duration);
         }
       },
       
@@ -1636,11 +1640,23 @@
     scrollElementToCenter(selector) {
       var el = typeof selector === 'string' ? document.querySelector(selector) : selector;
       if (!el) return false;
-      // scrollIntoView with block:'center' handles nested scrollable containers
       el.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' });
       return true;
     },
 
+    scrollElementToCenterSmooth(selector) {
+      var el = typeof selector === 'string' ? document.querySelector(selector) : selector;
+      if (!el) return 0;
+      var rect = el.getBoundingClientRect();
+      var viewH = window.innerHeight;
+      var centerY = rect.top + rect.height / 2;
+      if (centerY > viewH * 0.2 && centerY < viewH * 0.8) return 0;
+      var dist = Math.abs(centerY - viewH / 2);
+      var duration = Math.max(600, Math.min(2000, Math.round(dist * 1.5)));
+      el.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' });
+      return duration;
+    },
+
     scrollToCoords(y, viewportHeight, elHeight) {
       window.scrollTo({
         top: window.scrollY + y - (viewportHeight / 2) + (elHeight / 2),
@@ -1685,6 +1701,31 @@
     }
   };
 
+  // Enable or disable page CSS animations & transitions (preserves agex effects)
+  function setPageAnimations(enabled) {
+    var id = EFFECTS_ID + '-disable-animations';
+    var existing = document.getElementById(id);
+    if (enabled) {
+      if (existing) existing.remove();
+      return;
+    }
+    if (existing) return;
+    var style = document.createElement('style');
+    style.id = id;
+    style.textContent = `
+      *:not(.${EFFECTS_ID}):not(.${EFFECTS_ID} *) {
+        animation: none !important;
+        animation-delay: 0s !important;
+        animation-duration: 0s !important;
+        transition: none !important;
+        transition-delay: 0s !important;
+        transition-duration: 0s !important;
+        scroll-behavior: auto !important;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
   // Clear all effects
   function clearAll() {
     effects.highlight.clear();
@@ -1720,6 +1761,7 @@
   window.__agexEffects = {
     apply,
     clearAll,
+    setPageAnimations,
     banner,
     proof,
     ...effects,

package/assets/scripts/ab-click.sh

@@ -11,14 +11,38 @@ if [ -z "$SELECTOR" ]; then
   exit 1
 fi
 
-# Scroll element into center of its container before measuring position
+# Smooth-scroll element into center of viewport so the viewer can follow
 if [[ "$SELECTOR" == @* ]]; then
-  agent-browser scrollintoview "$SELECTOR" {{SESSION_ARG}} >/dev/null 2>&1
+  # For @ref: get bounding box first, then smooth-scroll by coordinates
+  PRE_STYLES=$(agent-browser get styles "$SELECTOR" --json {{SESSION_ARG}} 2>&1) || true
+  PRE_Y=$(echo "$PRE_STYLES" | grep -o '"y":[0-9.-]*' | head -1 | cut -d: -f2)
+  PRE_H=$(echo "$PRE_STYLES" | grep -o '"height":[0-9.-]*' | head -1 | cut -d: -f2)
+  if [ -n "$PRE_Y" ] && [ -n "$PRE_H" ]; then
+    SCROLL_DUR=$(agent-browser eval "(function(){ var viewH=window.innerHeight; var centerY=${PRE_Y}+${PRE_H}/2; if(centerY>viewH*0.2 && centerY<viewH*0.8) return '0'; var dist=Math.abs(centerY-viewH/2); var dur=Math.max(600,Math.min(2000,Math.round(dist*1.5))); window.scrollBy({top:centerY-viewH/2,behavior:'smooth'}); return ''+dur; })()" {{SESSION_ARG}} 2>/dev/null || echo "0")
+    SCROLL_DUR=$(echo "$SCROLL_DUR" | tr -d '[:space:]"')
+    if [ -n "$SCROLL_DUR" ] && [ "$SCROLL_DUR" != "0" ]; then
+      SCROLL_WAIT=$((SCROLL_DUR + 200))
+      agent-browser wait "$SCROLL_WAIT" {{SESSION_ARG}} >/dev/null 2>&1
+    else
+      agent-browser wait 300 {{SESSION_ARG}} >/dev/null 2>&1
+    fi
+  else
+    # Fallback: use instant scrollintoview
+    agent-browser scrollintoview "$SELECTOR" {{SESSION_ARG}} >/dev/null 2>&1
+    agent-browser wait 300 {{SESSION_ARG}} >/dev/null 2>&1
+  fi
 else
   ESCAPED_SELECTOR=$(printf '%s' "$SELECTOR" | sed "s/'/\\\\'/g")
-  agent-browser eval "window.__agexEffects.proof.scrollElementToCenter('${ESCAPED_SELECTOR}')" {{SESSION_ARG}} >/dev/null 2>&1
+  SCROLL_DUR=$(agent-browser eval "'' + (window.__agexEffects ? window.__agexEffects.proof.scrollElementToCenterSmooth('${ESCAPED_SELECTOR}') : 0)" {{SESSION_ARG}} 2>/dev/null || echo "0")
+  SCROLL_DUR=$(echo "$SCROLL_DUR" | tr -d '[:space:]"')
+  if [ -z "$SCROLL_DUR" ] || [ "$SCROLL_DUR" = "0" ]; then
+    agent-browser eval "window.__agexEffects.proof.scrollElementToCenter('${ESCAPED_SELECTOR}')" {{SESSION_ARG}} >/dev/null 2>&1
+    agent-browser wait 300 {{SESSION_ARG}} >/dev/null 2>&1
+  else
+    SCROLL_WAIT=$((SCROLL_DUR + 200))
+    agent-browser wait "$SCROLL_WAIT" {{SESSION_ARG}} >/dev/null 2>&1
+  fi
 fi
-agent-browser wait 300 {{SESSION_ARG}} >/dev/null 2>&1
 
 # Get element bounding box without interacting with it
 if [[ "$SELECTOR" == @* ]]; then
@@ -69,11 +93,39 @@ WAIT_MS=$((ANIM_DURATION + 300))
 agent-browser wait "$WAIT_MS" {{SESSION_ARG}} >/dev/null 2>&1
 agent-browser wait 1000 {{SESSION_ARG}} >/dev/null 2>&1
 
+# Re-measure element position right before clicking (it may have moved during animation)
+if [[ "$SELECTOR" == @* ]]; then
+  STYLES2=$(agent-browser get styles "$SELECTOR" --json {{SESSION_ARG}} 2>&1) || true
+  EL_X2=$(echo "$STYLES2" | grep -o '"x":[0-9.-]*' | head -1 | cut -d: -f2)
+  EL_Y2=$(echo "$STYLES2" | grep -o '"y":[0-9.-]*' | head -1 | cut -d: -f2)
+  EL_W2=$(echo "$STYLES2" | grep -o '"width":[0-9.-]*' | head -1 | cut -d: -f2)
+  EL_H2=$(echo "$STYLES2" | grep -o '"height":[0-9.-]*' | head -1 | cut -d: -f2)
+  if [ -n "$EL_X2" ] && [ -n "$EL_Y2" ] && [ -n "$EL_W2" ] && [ -n "$EL_H2" ]; then
+    CLICK_X=$(echo "$EL_X2 + $EL_W2 / 2" | bc -l)
+    CLICK_Y=$(echo "$EL_Y2 + $EL_H2 / 2" | bc -l)
+  fi
+else
+  BOX2=$(agent-browser eval "JSON.stringify(window.__agexEffects.proof.getBoundingBox('${ESCAPED_SELECTOR}'))" {{SESSION_ARG}} 2>&1) || true
+  if [ -n "$BOX2" ] && [[ "$BOX2" != "null" ]] && [[ "$BOX2" != *"error"* ]]; then
+    EL_X2=$(echo "$BOX2" | grep -o '"x":[0-9.-]*' | cut -d: -f2)
+    EL_Y2=$(echo "$BOX2" | grep -o '"y":[0-9.-]*' | cut -d: -f2)
+    EL_W2=$(echo "$BOX2" | grep -o '"width":[0-9.-]*' | cut -d: -f2)
+    EL_H2=$(echo "$BOX2" | grep -o '"height":[0-9.-]*' | cut -d: -f2)
+    if [ -n "$EL_X2" ] && [ -n "$EL_Y2" ] && [ -n "$EL_W2" ] && [ -n "$EL_H2" ]; then
+      CLICK_X=$(echo "$EL_X2 + $EL_W2 / 2" | bc -l)
+      CLICK_Y=$(echo "$EL_Y2 + $EL_H2 / 2" | bc -l)
+    fi
+  fi
+fi
+
+# Snap cursor to fresh position so ripple lands on the actual element
+agent-browser eval "window.__agexEffects.cursor.setPosition(${CLICK_X}, ${CLICK_Y})" {{SESSION_ARG}} >/dev/null 2>&1
+
 # Show click ripple and perform the actual click
 agent-browser eval "window.__agexEffects.cursor.showClick(${CLICK_X}, ${CLICK_Y})" {{SESSION_ARG}} >/dev/null 2>&1
 agent-browser click "$SELECTOR" {{SESSION_ARG}} >/dev/null 2>&1
 
-# Sync _lastPos to the actual native click position (element center)
+# Sync _lastPos to the actual click position
 # so the next animateToPosition starts from where the native mouse really is
 agent-browser eval "window.__agexEffects.cursor._lastPos = { x: ${CLICK_X}, y: ${CLICK_Y} }" {{SESSION_ARG}} >/dev/null 2>&1
 

package/assets/scripts/ab-toggle-animations.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+# Enable or disable CSS animations and transitions on the page.
+# Preserves agex visual effects.
+# Usage: ab-toggle-animations true|false
+#   true  = enable animations (default browser behavior)
+#   false = disable animations
+ENABLED="${1:-true}"
+{{FX_INJECT_HELPER}}
+if [ "$ENABLED" = "false" ]; then
+  agent-browser eval "window.__agexEffects.setPageAnimations(false)" {{SESSION_ARG}} >/dev/null 2>&1
+  echo "page animations disabled"
+else
+  agent-browser eval "window.__agexEffects.setPageAnimations(true)" {{SESSION_ARG}} >/dev/null 2>&1
+  echo "page animations enabled"
+fi

package/assets/scripts/ab-type.sh

@@ -1,7 +1,6 @@
 #!/bin/bash
-# Smooth type: moves cursor to input, clicks to focus, then types text in-browser
+# Smooth type: moves cursor to input, clicks to focus, then types text slowly
 # Uses ab-click for the animated cursor movement + click
-# Typing happens entirely in JS (one eval call) instead of per-character shell commands
 # Usage: ab-type <selector|@ref> "text"
 SELECTOR="$1"
 TEXT="$2"
@@ -13,35 +12,28 @@ fi
 # Move cursor to input and click to focus (animated)
 ab-click "$SELECTOR"
 
+# Show glow focus effect on the input
 ESCAPED_SEL=$(printf '%s' "$SELECTOR" | sed "s/'/\\\\'/g")
-ESCAPED_TEXT=$(printf '%s' "$TEXT" | sed "s/'/\\\\'/g")
-
-# Show glow focus effect, lock cursor, type text — all in one eval
-# typeText returns total duration in ms; we wait for it in shell
-TYPE_DURATION=$(agent-browser eval "(function(){
-  var fx = window.__agexEffects;
-  if (!fx) return '0';
-  fx.cursor.showInputFocus('${ESCAPED_SEL}');
-  if (window.__agexCursor) window.__agexCursor.setAnimationLock(true);
-  var dur = fx.cursor.typeText('${ESCAPED_SEL}', '${ESCAPED_TEXT}', 80);
-  return '' + dur;
-})()" {{SESSION_ARG}} 2>/dev/null)
-
-TYPE_DURATION=$(echo "$TYPE_DURATION" | tr -d '[:space:]"')
-if [ -z "$TYPE_DURATION" ] || [ "$TYPE_DURATION" = "0" ]; then
-  TYPE_DURATION=1000
-fi
+agent-browser eval "window.__agexEffects.cursor.showInputFocus('${ESCAPED_SEL}')" {{SESSION_ARG}} >/dev/null 2>&1
+
+# Lock demo cursor so native mouse moves during typing don't cause jumps
+agent-browser eval "if(window.__agexCursor) window.__agexCursor.setAnimationLock(true)" {{SESSION_ARG}} >/dev/null 2>&1
+
+# Type text one character at a time with a human-like delay
+LENGTH=${#TEXT}
+for (( i=0; i<LENGTH; i++ )); do
+  CHAR="${TEXT:$i:1}"
+  agent-browser type "$SELECTOR" "$CHAR" {{SESSION_ARG}} >/dev/null 2>&1
+  agent-browser wait 70 {{SESSION_ARG}} >/dev/null 2>&1
+done
+
+# Brief pause so viewer can read the typed text
+agent-browser wait 400 {{SESSION_ARG}} >/dev/null 2>&1
+
+# Clear glow focus effect
+agent-browser eval "window.__agexEffects.cursor.clearInputFocus()" {{SESSION_ARG}} >/dev/null 2>&1
 
-# Wait for typing animation to finish + brief pause for viewer to read
-WAIT_MS=$((TYPE_DURATION + 400))
-agent-browser wait "$WAIT_MS" {{SESSION_ARG}} >/dev/null 2>&1
-
-# Clear glow focus effect and unlock cursor
-agent-browser eval "(function(){
-  var fx = window.__agexEffects;
-  if (!fx) return;
-  fx.cursor.clearInputFocus();
-  if (window.__agexCursor) window.__agexCursor.setAnimationLock(false);
-})()" {{SESSION_ARG}} >/dev/null 2>&1
+# Unlock demo cursor
+agent-browser eval "if(window.__agexCursor) window.__agexCursor.setAnimationLock(false)" {{SESSION_ARG}} >/dev/null 2>&1
 
 echo "typed \"$TEXT\" into $SELECTOR"

package/dist/{chunk-HPJHT4WX.js → chunk-IKAOVJCU.js}

@@ -5475,6 +5475,7 @@ function getScriptEntries(videoEnabled) {
     { outputName: "ab-move", scriptFile: "ab-move.sh" },
     { outputName: "ab-click", scriptFile: "ab-click.sh" },
     { outputName: "ab-type", scriptFile: "ab-type.sh" },
+    { outputName: "ab-toggle-animations", scriptFile: "ab-toggle-animations.sh" },
     { outputName: "agent-browser", scriptFile: "agent-browser-wrapper.sh" }
   ];
 }
@@ -5485,36 +5486,54 @@ function loadAndRenderScript(scriptFile, vars) {
 
 // ../browse/dist/workspace.js
 var log8 = createLogger("browse");
-function resolveAgentBrowser() {
+function findAgentBrowser() {
+  let binPath;
   try {
-    const binPath = execSync2("which agent-browser", { encoding: "utf-8" }).trim();
-    log8.debug(`resolved agent-browser: ${binPath}`);
-    let home;
-    const binDir = path4.dirname(binPath);
-    const npmGlobalCandidate = path4.join(binDir, "..", "lib", "node_modules", "agent-browser");
-    if (fs3.existsSync(path4.join(npmGlobalCandidate, "package.json"))) {
-      home = path4.resolve(npmGlobalCandidate);
-    }
-    if (!home) {
-      try {
-        const realBin = fs3.realpathSync(binPath);
-        let dir = path4.dirname(realBin);
-        for (let i = 0; i < 5; i++) {
-          if (fs3.existsSync(path4.join(dir, "package.json"))) {
-            home = dir;
-            break;
-          }
-          dir = path4.dirname(dir);
+    binPath = execSync2("which agent-browser", { encoding: "utf-8" }).trim();
+  } catch {
+    return void 0;
+  }
+  log8.debug(`resolved agent-browser: ${binPath}`);
+  let home;
+  const binDir = path4.dirname(binPath);
+  const npmGlobalCandidate = path4.join(binDir, "..", "lib", "node_modules", "agent-browser");
+  if (fs3.existsSync(path4.join(npmGlobalCandidate, "package.json"))) {
+    home = path4.resolve(npmGlobalCandidate);
+  }
+  if (!home) {
+    try {
+      const realBin = fs3.realpathSync(binPath);
+      let dir = path4.dirname(realBin);
+      for (let i = 0; i < 5; i++) {
+        if (fs3.existsSync(path4.join(dir, "package.json"))) {
+          home = dir;
+          break;
         }
-      } catch {
+        dir = path4.dirname(dir);
       }
+    } catch {
     }
-    log8.debug(`agent-browser home: ${home ?? "not found"}`);
-    return { bin: binPath, home };
-  } catch {
-    log8.warn("agent-browser not found in PATH, using bare command name");
-    return { bin: "agent-browser" };
   }
+  log8.debug(`agent-browser home: ${home ?? "not found"}`);
+  return { bin: binPath, home };
+}
+function resolveAgentBrowser() {
+  const found = findAgentBrowser();
+  if (found)
+    return found;
+  log8.info("agent-browser not found in PATH, installing globally...");
+  try {
+    execSync2("npm install -g agent-browser", { encoding: "utf-8", stdio: "pipe" });
+    log8.info("agent-browser installed successfully");
+  } catch (err) {
+    const detail = (err?.stderr ?? err?.stdout)?.toString().trim() || err?.message || "";
+    throw new BrowserError(`Failed to install agent-browser globally: ${detail}`);
+  }
+  const installed = findAgentBrowser();
+  if (!installed) {
+    throw new BrowserError("agent-browser not found in PATH after global install");
+  }
+  return installed;
 }
 function buildFxInjectHelper(sessionArg, initScriptPath) {
   return `
@@ -5792,6 +5811,15 @@ TYPING INTO INPUTS:
   ALWAYS use ab-type or agent-browser fill to type into inputs.
   NEVER set .value via eval \u2014 it does NOT trigger React/framework events and buttons stay disabled.
   ab-type @e1 "text"                  # Best: animated cursor + slow typing (triggers all events)
+  agent-browser fill @e1 "text"       # Instant replace (clears existing text)
+
+  IMPORTANT: ab-type APPENDS text \u2014 it does NOT clear existing content.
+  If the input already has text and you want to REPLACE it, clear first:
+    agent-browser fill @e1 "text"       # Easiest: instant replace
+    # OR for animated typing with clear:
+    ab-click @e1                        # Focus the input
+    agent-browser key @e1 Meta+a        # Select all existing text
+    ab-type @e1 "new text"              # First char replaces selection, rest appends
 
 BROWSER:
   agent-browser snapshot              # Get ALL elements with refs

package/dist/cli.js

@@ -23,7 +23,7 @@ import {
   timestamp,
   validate,
   viewportStringSchema
-} from "./chunk-HPJHT4WX.js";
+} from "./chunk-IKAOVJCU.js";
 
 // src/cli.ts
 import { defineCommand as defineCommand7, runMain } from "citty";
@@ -165,11 +165,8 @@ DEMO RULES are behind-the-scenes instructions. They must NOT appear in subtitles
 WORKFLOW:
 1. PLAN: Understand the task
 2. OPEN: ab-open "<url>" FIRST (required before any other command)
-3. FREEZE ANIMATIONS: Immediately after opening, stop all CSS animations/transitions:
-   agent-browser eval "var s=document.createElement('style');s.id='__agex-freeze';s.textContent='*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}';document.head.appendChild(s)"
-   This prevents tickers, marquees, and other animations from producing duplicate frames in the recording.
-4. EXECUTE: Interact, take screenshots
-5. RECORD: ab-record-start, perform actions, ab-close
+3. EXECUTE: Interact, take screenshots
+4. RECORD: ab-record-start, perform actions, ab-close
 
 STRATEGY:
 - Open the URL and explore the page
@@ -180,7 +177,8 @@ COMMANDS:
   ab-open "<url>"                  # Open URL (ALWAYS quote!)
   ab-record-start                  # Start recording
   ab-close [1 2 ...]              # Stop recording and merge segments
-  ab-screenshot <name>.png         # Capture screenshot
+  ab-screenshot <NNN-name>.png      # Capture screenshot (e.g. 001-homepage.png, 002-menu.png)
+  ab-toggle-animations true|false    # (optional) Enable/disable CSS animations. WARNING: disabling may hide elements that rely on CSS transitions to render.
 
 EFFECTS (optional \u2014 use only if the task asks for subtitles, highlights, etc.):
   fx-subtitle "text"                              # Show subtitle at bottom (persistent)
@@ -205,8 +203,16 @@ BROWSER:
   agent-browser scrollintoview @e1    # Smooth scroll to element
   agent-browser wait <ms>             # Wait milliseconds
   ab-click @e1                        # Click element (smooth cursor animation)
-  ab-type @e1 "text"                  # Click input + type text slowly
-  agent-browser fill @e2 "text"       # Fill input (instant)
+  ab-type @e1 "text"                  # Click input + type text slowly (APPENDS to existing text)
+  agent-browser fill @e2 "text"       # Fill input (instant, replaces existing text)
+
+CLEARING INPUTS BEFORE TYPING:
+  ab-type APPENDS text \u2014 it does NOT clear existing content.
+  If the input already has text and you want to REPLACE it, clear it first:
+    agent-browser eval "var el=document.querySelector('[data-ref]'); el.select && el.select()" # select all text
+    agent-browser key @e1 Backspace     # delete selected text
+    ab-type @e1 "new text"              # now type fresh
+  Or simply use: agent-browser fill @e1 "text"  # instant replace (no animation)
   agent-browser eval '<js>'           # Run JavaScript
 
 SNAPSHOT TIPS:
@@ -225,10 +231,9 @@ RULES:
 - snapshot -i = interactive only (buttons, links, inputs)
 - snapshot (no flags) = ALL elements including images, text, logos
 - Use ab-record-start BEFORE the actions you want to capture
-- Use ab-screenshot at key moments for still evidence
+- Use ab-screenshot with numbered names (001-xxx.png, 002-xxx.png) at key moments for sequential evidence
 - ALWAYS end with ab-close to finalize the recording
-- If you made ANY DOM changes via agent-browser eval BEFORE ab-record-start (e.g. freezing animations, hiding elements, injecting styles), you MUST re-apply them AFTER ab-record-start. DOM state does not persist across recording start. In particular, always re-inject the animation freeze style after ab-record-start:
-  agent-browser eval "if(!document.getElementById('__agex-freeze')){var s=document.createElement('style');s.id='__agex-freeze';s.textContent='*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}';document.head.appendChild(s)}"
+- If you made ANY DOM changes via agent-browser eval BEFORE ab-record-start (e.g. hiding elements, injecting styles), you MUST re-apply them AFTER ab-record-start. DOM state does not persist across recording start.
 
 FINISHING:
 After completing the task, run ab-close to stop recording.

package/dist/index.js

@@ -5,7 +5,7 @@ import {
   provePr,
   runAgent,
   runReview
-} from "./chunk-HPJHT4WX.js";
+} from "./chunk-IKAOVJCU.js";
 export {
   AgexError,
   isAgexError,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agex",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -25,12 +25,12 @@
     "tsup": "^8.4.0",
     "typescript": "^5.9.3",
     "vitest": "^2.1.9",
-    "agex-agent": "0.1.0",
     "agex-browse": "0.1.0",
     "agex-core": "0.1.0",
-    "agex-demo": "0.1.0",
+    "agex-agent": "0.1.0",
     "agex-prove": "0.1.0",
     "agex-prove-pr": "0.1.0",
+    "agex-demo": "0.1.0",
     "agex-review": "0.1.0"
   },
   "scripts": {