libretto 0.5.0 → 0.5.2

package/dist/shared/condense-dom/condense-dom.js

@@ -1,22 +1,12 @@
-const TEST_ATTRS = /* @__PURE__ */ new Set(["data-testid", "data-test", "data-qa", "data-cy"]);
-const TRUSTED_ATTRS = /* @__PURE__ */ new Set([
-  "id",
-  "name",
-  "for",
-  "tabindex",
-  "contenteditable",
-  "role",
-  "title",
-  "alt",
-  "type",
-  "value",
-  "placeholder",
-  "autocomplete",
-  "href",
-  "action",
-  "method",
-  "src"
-]);
+import {
+  filterSemanticClasses,
+  INTERACTIVE_ROLE_NAMES,
+  INTERACTIVE_TAG_NAMES,
+  TEST_ATTRIBUTE_NAMES,
+  TRUSTED_ATTRIBUTE_NAMES
+} from "../dom-semantics.js";
+const TEST_ATTRS = new Set(TEST_ATTRIBUTE_NAMES);
+const TRUSTED_ATTRS = new Set(TRUSTED_ATTRIBUTE_NAMES);
 const STATE_ATTRS = /* @__PURE__ */ new Set([
   "disabled",
   "hidden",
@@ -28,12 +18,7 @@ const STATE_ATTRS = /* @__PURE__ */ new Set([
   "open",
   "multiple"
 ]);
-const BOOLEAN_ATTRS = /* @__PURE__ */ new Set([
-  ...STATE_ATTRS,
-  "async",
-  "defer",
-  "nomodule"
-]);
+const BOOLEAN_ATTRS = /* @__PURE__ */ new Set([...STATE_ATTRS, "async", "defer", "nomodule"]);
 const EMPTY_VALUE_DROP_ATTRS = /* @__PURE__ */ new Set([
   "alt",
   "autocomplete",
@@ -60,28 +45,8 @@ const SCRIPT_ATTRS = /* @__PURE__ */ new Set([
   "referrerpolicy"
 ]);
 const STYLE_TAG_ATTRS = /* @__PURE__ */ new Set(["media", "type", "nonce", "title"]);
-const INTERACTIVE_TAGS = /* @__PURE__ */ new Set([
-  "a",
-  "button",
-  "input",
-  "select",
-  "textarea",
-  "form",
-  "details",
-  "dialog",
-  "label"
-]);
-const INTERACTIVE_ROLES = /* @__PURE__ */ new Set([
-  "button",
-  "link",
-  "tab",
-  "menuitem",
-  "checkbox",
-  "radio",
-  "switch",
-  "slider",
-  "combobox"
-]);
+const INTERACTIVE_TAGS = new Set(INTERACTIVE_TAG_NAMES);
+const INTERACTIVE_ROLES = new Set(INTERACTIVE_ROLE_NAMES);
 const OPEN_TAG_PATTERN = /<([a-zA-Z][\w:-]*)(\s(?:[^"'<>/]|"[^"]*"|'[^']*')*)?\s*(\/?)>/g;
 function condenseDom(html) {
   const originalLength = html.length;
@@ -170,12 +135,8 @@ function condenseDom(html) {
             }
             const hasAriaLabel = /aria-label\s*=/i.test(attrs);
             if (!hasAriaLabel) {
-              const titleMatch = inner.match(
-                /<title[^>]*>([^<]+)<\/title>/i
-              );
-              const descMatch = inner.match(
-                /<desc[^>]*>([^<]+)<\/desc>/i
-              );
+              const titleMatch = inner.match(/<title[^>]*>([^<]+)<\/title>/i);
+              const descMatch = inner.match(/<desc[^>]*>([^<]+)<\/desc>/i);
               const labelText = titleMatch?.[1]?.trim() || descMatch?.[1]?.trim();
               if (labelText) {
                 keepAttrs.push(
@@ -346,21 +307,6 @@ function normalizeUrlValue(value) {
     return `${value.slice(0, 96)}[omitted]`;
   }
 }
-function filterSemanticClasses(value) {
-  const classes = value.split(/\s+/).filter(Boolean);
-  const kept = classes.filter((cls) => !isObfuscatedClass(cls));
-  return kept.join(" ");
-}
-function isObfuscatedClass(cls) {
-  if (cls.length > 80) return true;
-  if (/^_?[0-9a-f]{6,}$/i.test(cls)) return true;
-  if (/^[a-z]+_[0-9a-f]{4,}$/i.test(cls)) return true;
-  if (/^[a-z]{1,2}[0-9]{2,}$/i.test(cls)) return true;
-  const digits = (cls.match(/[0-9]/g) || []).length;
-  const letters = (cls.match(/[a-zA-Z]/g) || []).length;
-  if (cls.length >= 6 && digits >= letters * 0.5 && digits >= 2) return true;
-  return false;
-}
 function parseAttributes(rawAttrs) {
   const attrs = [];
   const attrPattern = /([^\s"'<>\/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
@@ -404,7 +350,9 @@ function shouldKeepCustomDataAttribute(tagName, attrName, value, interactive) {
 function looksMeaningfulToken(value) {
   if (!/^[a-z][a-z0-9-]{1,40}$/i.test(value)) return false;
   if (!/[a-z]{3}/i.test(value)) return false;
-  if (/(track|metric|telemetry|analytics|component|display|loaded|token|dps|color|screen|strict|rehydr|fetch)/i.test(value)) {
+  if (/(track|metric|telemetry|analytics|component|display|loaded|token|dps|color|screen|strict|rehydr|fetch)/i.test(
+    value
+  )) {
     return false;
   }
   return true;

package/dist/shared/config/config.d.ts

@@ -1,10 +1,2 @@
-/**
- * Runtime configuration for libretto.
- *
- * Values are derived from environment variables only.
- */
-declare function isDebugMode(): boolean;
-declare function isDryRun(): boolean;
-declare function shouldPauseBeforeMutation(): boolean;
 
-export { isDebugMode, isDryRun, shouldPauseBeforeMutation };
+export {  }

package/dist/shared/config/config.js

@@ -1,18 +0,0 @@
-function isDebugMode() {
-  return process.env.LIBRETTO_DEBUG === "true";
-}
-function isDryRun() {
-  const explicit = process.env.LIBRETTO_DRY_RUN;
-  if (explicit !== void 0) {
-    return explicit === "true";
-  }
-  return process.env.NODE_ENV === "development";
-}
-function shouldPauseBeforeMutation() {
-  return isDryRun() && isDebugMode();
-}
-export {
-  isDebugMode,
-  isDryRun,
-  shouldPauseBeforeMutation
-};

package/dist/shared/config/index.d.ts

@@ -1 +1,2 @@
-export { isDebugMode, isDryRun, shouldPauseBeforeMutation } from './config.js';
+
+export {  }

package/dist/shared/config/index.js

@@ -1,10 +0,0 @@
-import {
-  isDebugMode,
-  isDryRun,
-  shouldPauseBeforeMutation
-} from "./config.js";
-export {
-  isDebugMode,
-  isDryRun,
-  shouldPauseBeforeMutation
-};

package/dist/shared/debug/pause.js

@@ -1,8 +1,14 @@
 import { existsSync } from "node:fs";
 import { mkdir, writeFile } from "node:fs/promises";
 import { getSessionDir } from "../../cli/core/context.js";
-import { getPauseSignalPaths, removeSignalIfExists } from "../../cli/core/pause-signals.js";
-import { listSessionsWithStateFile, readSessionState } from "../../cli/core/session.js";
+import {
+  getPauseSignalPaths,
+  removeSignalIfExists
+} from "../../cli/core/pause-signals.js";
+import {
+  listSessionsWithStateFile,
+  readSessionState
+} from "../../cli/core/session.js";
 function isPidRunning(pid) {
   try {
     process.kill(pid, 0);
@@ -14,7 +20,7 @@ function isPidRunning(pid) {
 function getRunningSessions() {
   return listSessionsWithStateFile().filter((candidate) => {
     const state = readSessionState(candidate);
-    return state !== null && isPidRunning(state.pid);
+    return state !== null && state.pid != null && isPidRunning(state.pid);
   });
 }
 function throwMissingSessionError() {

package/dist/shared/dom-semantics.d.ts

@@ -0,0 +1,8 @@
+declare const TEST_ATTRIBUTE_NAMES: readonly ["data-testid", "data-test", "data-qa", "data-cy"];
+declare const TRUSTED_ATTRIBUTE_NAMES: readonly ["id", "name", "for", "tabindex", "contenteditable", "role", "title", "alt", "type", "value", "placeholder", "autocomplete", "href", "action", "method", "src"];
+declare const INTERACTIVE_TAG_NAMES: readonly ["a", "button", "input", "select", "textarea", "form", "details", "dialog", "label"];
+declare const INTERACTIVE_ROLE_NAMES: readonly ["button", "link", "tab", "menuitem", "checkbox", "radio", "switch", "slider", "combobox"];
+declare function filterSemanticClasses(value: string): string;
+declare function isObfuscatedClass(cls: string): boolean;
+
+export { INTERACTIVE_ROLE_NAMES, INTERACTIVE_TAG_NAMES, TEST_ATTRIBUTE_NAMES, TRUSTED_ATTRIBUTE_NAMES, filterSemanticClasses, isObfuscatedClass };

package/dist/shared/dom-semantics.js

@@ -0,0 +1,69 @@
+const TEST_ATTRIBUTE_NAMES = [
+  "data-testid",
+  "data-test",
+  "data-qa",
+  "data-cy"
+];
+const TRUSTED_ATTRIBUTE_NAMES = [
+  "id",
+  "name",
+  "for",
+  "tabindex",
+  "contenteditable",
+  "role",
+  "title",
+  "alt",
+  "type",
+  "value",
+  "placeholder",
+  "autocomplete",
+  "href",
+  "action",
+  "method",
+  "src"
+];
+const INTERACTIVE_TAG_NAMES = [
+  "a",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "form",
+  "details",
+  "dialog",
+  "label"
+];
+const INTERACTIVE_ROLE_NAMES = [
+  "button",
+  "link",
+  "tab",
+  "menuitem",
+  "checkbox",
+  "radio",
+  "switch",
+  "slider",
+  "combobox"
+];
+function filterSemanticClasses(value) {
+  const classes = value.split(/\s+/).filter(Boolean);
+  const kept = classes.filter((cls) => !isObfuscatedClass(cls));
+  return kept.join(" ");
+}
+function isObfuscatedClass(cls) {
+  if (cls.length > 80) return true;
+  if (/^_?[0-9a-f]{6,}$/i.test(cls)) return true;
+  if (/^[a-z]+_[0-9a-f]{4,}$/i.test(cls)) return true;
+  if (/^[a-z]{1,2}[0-9]{2,}$/i.test(cls)) return true;
+  const digits = (cls.match(/[0-9]/g) || []).length;
+  const letters = (cls.match(/[a-zA-Z]/g) || []).length;
+  if (cls.length >= 6 && digits >= letters * 0.5 && digits >= 2) return true;
+  return false;
+}
+export {
+  INTERACTIVE_ROLE_NAMES,
+  INTERACTIVE_TAG_NAMES,
+  TEST_ATTRIBUTE_NAMES,
+  TRUSTED_ATTRIBUTE_NAMES,
+  filterSemanticClasses,
+  isObfuscatedClass
+};

package/dist/shared/instrumentation/instrument.js

@@ -25,6 +25,7 @@ const LOCATOR_ACTIONS = [
 ];
 const NAV_ACTIONS = ["goto", "reload", "goBack", "goForward"];
 const POINTER_ACTIONS = /* @__PURE__ */ new Set(["click", "dblclick", "hover"]);
+const instrumentedTargets = /* @__PURE__ */ new WeakSet();
 const pageQueues = /* @__PURE__ */ new WeakMap();
 function enqueue(page, fn) {
   const prev = pageQueues.get(page) ?? Promise.resolve();
@@ -96,11 +97,93 @@ function wrapLocatorActions(locator, page, opts) {
     };
   }
 }
+const LOCATOR_FACTORY_METHODS = [
+  "locator",
+  "getByRole",
+  "getByText",
+  "getByLabel",
+  "getByPlaceholder",
+  "getByAltText",
+  "getByTitle",
+  "getByTestId",
+  "filter",
+  "and",
+  "or",
+  "first",
+  "last",
+  "nth"
+];
+const FRAME_LOCATOR_FACTORY_METHODS = [
+  "locator",
+  "getByRole",
+  "getByText",
+  "getByLabel",
+  "getByPlaceholder",
+  "getByAltText",
+  "getByTitle",
+  "getByTestId",
+  "owner",
+  "first",
+  "last",
+  "nth"
+];
+function instrumentLocator(locator, page, opts) {
+  const target = locator;
+  if (instrumentedTargets.has(target)) {
+    return locator;
+  }
+  instrumentedTargets.add(target);
+  wrapLocatorActions(locator, page, opts);
+  for (const method of LOCATOR_FACTORY_METHODS) {
+    if (typeof locator[method] !== "function") continue;
+    const orig = locator[method].bind(locator);
+    locator[method] = (...args) => {
+      const nextLocator = orig(...args);
+      return instrumentLocator(nextLocator, page, opts);
+    };
+  }
+  if (typeof locator.contentFrame === "function") {
+    const origContentFrame = locator.contentFrame.bind(locator);
+    locator.contentFrame = (...args) => {
+      const frameLocator = origContentFrame(...args);
+      return instrumentFrameLocator(frameLocator, page, opts);
+    };
+  }
+  return locator;
+}
+function instrumentFrameLocator(frameLocator, page, opts) {
+  const target = frameLocator;
+  if (instrumentedTargets.has(target)) {
+    return frameLocator;
+  }
+  instrumentedTargets.add(target);
+  for (const method of FRAME_LOCATOR_FACTORY_METHODS) {
+    if (typeof frameLocator[method] !== "function") continue;
+    const orig = frameLocator[method].bind(frameLocator);
+    frameLocator[method] = (...args) => {
+      const result = orig(...args);
+      if (method === "first" || method === "last" || method === "nth") {
+        return instrumentFrameLocator(result, page, opts);
+      }
+      return instrumentLocator(result, page, opts);
+    };
+  }
+  if (typeof frameLocator.frameLocator === "function") {
+    const origFrameLocator = frameLocator.frameLocator.bind(
+      frameLocator
+    );
+    frameLocator.frameLocator = (...args) => {
+      const nestedFrameLocator = origFrameLocator(...args);
+      return instrumentFrameLocator(nestedFrameLocator, page, opts);
+    };
+  }
+  return frameLocator;
+}
 function isTimeoutError(err) {
   if (!err || typeof err.message !== "string") return false;
   return err.message.includes("Timeout") || err.message.includes("timeout") || err.name === "TimeoutError";
 }
-const LOCATOR_FACTORIES = [
+const PAGE_LOCATOR_FACTORIES = [
   "locator",
   "getByRole",
   "getByText",
@@ -110,6 +193,7 @@ const LOCATOR_FACTORIES = [
   "getByTitle",
   "getByTestId"
 ];
+const PAGE_FRAME_LOCATOR_FACTORIES = ["frameLocator"];
 async function installInstrumentation(page, options) {
   if (page.__librettoInstrumented) return;
   page.__librettoInstrumented = true;
@@ -129,7 +213,12 @@ async function installInstrumentation(page, options) {
           try {
             const loc = page.locator(args[0]);
             const box = await loc.boundingBox();
-            await visualizeBeforeAction(page, box, method, highlightBeforeActionMs);
+            await visualizeBeforeAction(
+              page,
+              box,
+              method,
+              highlightBeforeActionMs
+            );
           } catch {
           }
         });
@@ -161,13 +250,20 @@ async function installInstrumentation(page, options) {
       return orig(...args);
     };
   }
-  for (const factory of LOCATOR_FACTORIES) {
+  for (const factory of PAGE_LOCATOR_FACTORIES) {
     if (typeof page[factory] !== "function") continue;
     const origFactory = page[factory].bind(page);
     page[factory] = (...factoryArgs) => {
       const locator = origFactory(...factoryArgs);
-      wrapLocatorActions(locator, page, mergedOpts);
-      return locator;
+      return instrumentLocator(locator, page, mergedOpts);
+    };
+  }
+  for (const factory of PAGE_FRAME_LOCATOR_FACTORIES) {
+    if (typeof page[factory] !== "function") continue;
+    const origFactory = page[factory].bind(page);
+    page[factory] = (...factoryArgs) => {
+      const frameLocator = origFactory(...factoryArgs);
+      return instrumentFrameLocator(frameLocator, page, mergedOpts);
     };
   }
 }

package/dist/shared/llm/ai-sdk-adapter.js

@@ -18,7 +18,9 @@ function createLLMClientFromModel(model) {
         if (msg.role === "assistant") {
           return {
             role: "assistant",
-            content: msg.content.filter((part) => part.type === "text").map((part) => ({ type: "text", text: part.text }))
+            content: msg.content.filter(
+              (part) => part.type === "text"
+            ).map((part) => ({ type: "text", text: part.text }))
           };
         }
         return {

package/dist/shared/llm/client.js

@@ -121,7 +121,9 @@ function convertUserContentParts(parts) {
   });
 }
 function convertAssistantContentParts(parts) {
-  return parts.filter((part) => part.type === "text").map((part) => ({ type: "text", text: part.text }));
+  return parts.filter(
+    (part) => part.type === "text"
+  ).map((part) => ({ type: "text", text: part.text }));
 }
 function convertMessages(messages) {
   return messages.map((msg) => {

package/dist/shared/logger/index.js

@@ -1,4 +1,7 @@
-import { Logger, defaultLogger } from "./logger.js";
+import {
+  Logger,
+  defaultLogger
+} from "./logger.js";
 import {
   createFileLogSink,
   prettyConsoleSink,

package/dist/shared/run/api.js

@@ -1,4 +1,6 @@
-import { launchBrowser } from "./browser.js";
+import {
+  launchBrowser
+} from "./browser.js";
 export {
   launchBrowser
 };

package/dist/shared/run/browser.js

@@ -1,8 +1,14 @@
-import { chromium } from "playwright";
+import {
+  chromium
+} from "playwright";
 import { createServer } from "node:net";
 import { existsSync, readFileSync, writeFileSync } from "node:fs";
 import { ensureLibrettoSessionStatePath } from "../paths/paths.js";
-import { SESSION_STATE_VERSION, SessionStateFileSchema } from "../state/session-state.js";
+import {
+  SESSION_STATE_VERSION,
+  SessionStateFileSchema
+} from "../state/session-state.js";
+import { readLibrettoConfig } from "../../cli/core/ai-config.js";
 async function pickFreePort() {
   return await new Promise((resolve, reject) => {
     const server = createServer();
@@ -18,6 +24,41 @@ async function pickFreePort() {
     });
   });
 }
+function resolveWindowPosition() {
+  return readLibrettoConfig().windowPosition;
+}
+async function applyWindowPosition(browser, context, page, windowPosition) {
+  if (!windowPosition) {
+    return;
+  }
+  const requestedBounds = {
+    left: windowPosition.x,
+    top: windowPosition.y,
+    windowState: "normal"
+  };
+  const pageCdp = await context.newCDPSession(page);
+  let browserCdp;
+  try {
+    const targetInfo = await pageCdp.send("Target.getTargetInfo");
+    const targetId = targetInfo.targetInfo?.targetId;
+    browserCdp = await browser.newBrowserCDPSession();
+    const windowResult = await browserCdp.send(
+      "Browser.getWindowForTarget",
+      targetId ? { targetId } : {}
+    );
+    await browserCdp.send("Browser.setWindowBounds", {
+      windowId: windowResult.windowId,
+      bounds: requestedBounds
+    });
+    await new Promise((resolve) => setTimeout(resolve, 250));
+  } catch {
+  } finally {
+    await pageCdp.detach().catch(() => {
+    });
+    await browserCdp?.detach().catch(() => {
+    });
+  }
+}
 async function launchBrowser({
   sessionName,
   headless = false,
@@ -25,12 +66,14 @@ async function launchBrowser({
   storageStatePath
 }) {
   const debugPort = await pickFreePort();
+  const windowPosition = headless ? void 0 : resolveWindowPosition();
   const browser = await chromium.launch({
     headless,
     args: [
       "--disable-blink-features=AutomationControlled",
       `--remote-debugging-port=${debugPort}`,
-      "--no-focus-on-check"
+      "--no-focus-on-check",
+      ...windowPosition ? [`--window-position=${windowPosition.x},${windowPosition.y}`] : []
     ]
   });
   const context = await browser.newContext({
@@ -38,6 +81,7 @@ async function launchBrowser({
     ...storageStatePath ? { storageState: storageStatePath } : {}
   });
   const page = await context.newPage();
+  await applyWindowPosition(browser, context, page, windowPosition);
   page.setDefaultTimeout(3e4);
   page.setDefaultNavigationTimeout(45e3);
   const metadataPath = ensureLibrettoSessionStatePath(sessionName);

package/dist/shared/state/session-state.d.ts

@@ -15,7 +15,8 @@ declare const SessionViewportSchema: z.ZodObject<{
 declare const SessionStateFileSchema: z.ZodObject<{
     version: z.ZodLiteral<1>;
     port: z.ZodNumber;
-    pid: z.ZodNumber;
+    pid: z.ZodOptional<z.ZodNumber>;
+    cdpEndpoint: z.ZodOptional<z.ZodString>;
     session: z.ZodString;
     startedAt: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{

package/dist/shared/state/session-state.js

@@ -14,7 +14,8 @@ const SessionViewportSchema = z.object({
 const SessionStateFileSchema = z.object({
   version: z.literal(SESSION_STATE_VERSION),
   port: z.number().int().min(0).max(65535),
-  pid: z.number().int(),
+  pid: z.number().int().optional(),
+  cdpEndpoint: z.string().url().optional(),
   session: z.string().min(1),
   startedAt: z.string().datetime({ offset: true }),
   status: SessionStatusSchema.optional(),
@@ -29,7 +30,9 @@ function formatIssues(error) {
 function parseSessionStateData(rawState, source) {
   const parsed = SessionStateFileSchema.safeParse(rawState);
   if (!parsed.success) {
-    throw new Error(`Session state at ${source} is invalid: ${formatIssues(parsed.error)}`);
+    throw new Error(
+      `Session state at ${source} is invalid: ${formatIssues(parsed.error)}`
+    );
   }
   const { version: _version, ...state } = parsed.data;
   return state;

package/dist/shared/visualization/ghost-cursor.js

@@ -1,7 +1,7 @@
 const DEFAULTS = {
   style: "minimal",
   color: "rgba(255, 70, 70, 0.9)",
-  size: 20,
+  size: 23,
   zIndex: 2147483646,
   easing: "cubic-bezier(0.16, 1, 0.3, 1)",
   minDurationMs: 100,
@@ -16,19 +16,32 @@ function buildCursorSvg(style, color, size) {
   if (style === "screenstudio") {
     return `<div style="width:${size * 1.4}px;height:${size * 1.4}px;border-radius:50%;background:${color};box-shadow:0 0 ${size * 0.6}px ${color};opacity:0.7;"></div>`;
   }
-  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;filter:drop-shadow(0 2px 6px rgba(15,23,42,0.22));">
 		<path d="M5 3L19 12L12 13L9 20L5 3Z" fill="${color}" stroke="rgba(0,0,0,0.3)" stroke-width="1"/>
 	</svg>`;
 }
+function buildCursorMarkup(style, color, size) {
+  const cursor = buildCursorSvg(style, color, size);
+  const badgeHeight = Math.max(12, Math.round(size * 0.54));
+  const fontSize = Math.max(8, Math.round(size * 0.28));
+  const minWidth = Math.max(28, Math.round(size * 1.28));
+  const paddingX = Math.max(5, Math.round(size * 0.2));
+  const left = Math.round(size * 0.84);
+  const top = Math.round(size * 0.74);
+  const width = Math.round(size * 2.4);
+  const height = Math.round(size * 1.95);
+  const badge = `<div aria-hidden="true" style="position:absolute;left:${left}px;top:${top}px;display:flex;align-items:center;justify-content:center;min-width:${minWidth}px;height:${badgeHeight}px;padding:0 ${paddingX}px;border-radius:${badgeHeight}px;background:${color};color:rgba(255,255,255,0.96);font:700 ${fontSize}px/1 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:0.02em;white-space:nowrap;border:1px solid rgba(0,0,0,0.16);box-shadow:0 4px 12px rgba(0,0,0,0.14);transform-origin:left center;">Agent</div>`;
+  return `<div style="position:relative;width:${width}px;height:${height}px;overflow:visible;">${cursor}${badge}</div>`;
+}
 function buildInitScript(opts) {
-  const svg = buildCursorSvg(opts.style, opts.color, opts.size);
+  const markup = buildCursorMarkup(opts.style, opts.color, opts.size);
   return `
 (function() {
 	if (document.getElementById("${CURSOR_ID}")) return;
 	var el = document.createElement("div");
 	el.id = "${CURSOR_ID}";
 	el.style.cssText = "position:fixed;top:0;left:0;z-index:${opts.zIndex};pointer-events:none;transform:translate3d(-100px,-100px,0);transition:none;will-change:transform,opacity;opacity:0;";
-	el.innerHTML = ${JSON.stringify(svg)};
+	el.innerHTML = ${JSON.stringify(markup)};
 	document.documentElement.appendChild(el);
 })();
 `;
@@ -64,7 +77,13 @@ async function moveGhostCursor(page, target) {
         el.style.transition = `transform ${duration}ms ${easing}`;
         el.style.transform = `translate3d(${x}px, ${y}px, 0)`;
       },
-      { id: CURSOR_ID, x: target.x, y: target.y, duration: durationMs, easing: opts.easing }
+      {
+        id: CURSOR_ID,
+        x: target.x,
+        y: target.y,
+        duration: durationMs,
+        easing: opts.easing
+      }
     );
     await page.waitForTimeout(durationMs);
   } catch {
@@ -122,15 +141,18 @@ async function hideGhostCursor(page) {
 }
 async function getGhostCursorPosition(page) {
   try {
-    return await page.evaluate(({ id }) => {
-      const el = document.getElementById(id);
-      if (!el) return null;
-      const match = el.style.transform.match(
-        /translate3d\(\s*([\d.-]+)px\s*,\s*([\d.-]+)px/
-      );
-      if (!match) return null;
-      return { x: parseFloat(match[1]), y: parseFloat(match[2]) };
-    }, { id: CURSOR_ID });
+    return await page.evaluate(
+      ({ id }) => {
+        const el = document.getElementById(id);
+        if (!el) return null;
+        const match = el.style.transform.match(
+          /translate3d\(\s*([\d.-]+)px\s*,\s*([\d.-]+)px/
+        );
+        if (!match) return null;
+        return { x: parseFloat(match[1]), y: parseFloat(match[2]) };
+      },
+      { id: CURSOR_ID }
+    );
   } catch {
     return null;
   }