libretto 0.5.1 → 0.5.2

package/src/shared/condense-dom/condense-dom.ts

@@ -20,6 +20,14 @@
  *  12.  Whitespace — collapse (preserve <pre> content)
  */
 
+import {
+  filterSemanticClasses,
+  INTERACTIVE_ROLE_NAMES,
+  INTERACTIVE_TAG_NAMES,
+  TEST_ATTRIBUTE_NAMES,
+  TRUSTED_ATTRIBUTE_NAMES,
+} from "../dom-semantics.js";
+
 export type CondenseDomResult = {
   /** The condensed HTML string. Valid, parseable HTML. */
   html: string;
@@ -37,25 +45,8 @@ type ParsedAttribute = {
   value: string | null;
 };
 
-const TEST_ATTRS = new Set(["data-testid", "data-test", "data-qa", "data-cy"]);
-const TRUSTED_ATTRS = new Set([
-  "id",
-  "name",
-  "for",
-  "tabindex",
-  "contenteditable",
-  "role",
-  "title",
-  "alt",
-  "type",
-  "value",
-  "placeholder",
-  "autocomplete",
-  "href",
-  "action",
-  "method",
-  "src",
-]);
+const TEST_ATTRS: Set<string> = new Set(TEST_ATTRIBUTE_NAMES);
+const TRUSTED_ATTRS: Set<string> = new Set(TRUSTED_ATTRIBUTE_NAMES);
 const STATE_ATTRS = new Set([
   "disabled",
   "hidden",
@@ -94,28 +85,8 @@ const SCRIPT_ATTRS = new Set([
   "referrerpolicy",
 ]);
 const STYLE_TAG_ATTRS = new Set(["media", "type", "nonce", "title"]);
-const INTERACTIVE_TAGS = new Set([
-  "a",
-  "button",
-  "input",
-  "select",
-  "textarea",
-  "form",
-  "details",
-  "dialog",
-  "label",
-]);
-const INTERACTIVE_ROLES = new Set([
-  "button",
-  "link",
-  "tab",
-  "menuitem",
-  "checkbox",
-  "radio",
-  "switch",
-  "slider",
-  "combobox",
-]);
+const INTERACTIVE_TAGS: Set<string> = new Set(INTERACTIVE_TAG_NAMES);
+const INTERACTIVE_ROLES: Set<string> = new Set(INTERACTIVE_ROLE_NAMES);
 const OPEN_TAG_PATTERN =
   /<([a-zA-Z][\w:-]*)(\s(?:[^"'<>/]|"[^"]*"|'[^']*')*)?\s*(\/?)>/g;
 
@@ -458,29 +429,6 @@ function normalizeUrlValue(value: string): string {
   }
 }
 
-function filterSemanticClasses(value: string): string {
-  const classes = value.split(/\s+/).filter(Boolean);
-  const kept = classes.filter((cls) => !isObfuscatedClass(cls));
-  return kept.join(" ");
-}
-
-/**
- * Heuristic: a class name is "obfuscated" if it looks like a hash or random ID
- * rather than a human-readable semantic name.
- */
-function isObfuscatedClass(cls: string): boolean {
-  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: string): ParsedAttribute[] {
   const attrs: ParsedAttribute[] = [];
   const attrPattern =

package/src/shared/dom-semantics.ts

@@ -0,0 +1,68 @@
+export const TEST_ATTRIBUTE_NAMES = [
+  "data-testid",
+  "data-test",
+  "data-qa",
+  "data-cy",
+] as const;
+
+export const TRUSTED_ATTRIBUTE_NAMES = [
+  "id",
+  "name",
+  "for",
+  "tabindex",
+  "contenteditable",
+  "role",
+  "title",
+  "alt",
+  "type",
+  "value",
+  "placeholder",
+  "autocomplete",
+  "href",
+  "action",
+  "method",
+  "src",
+] as const;
+
+export const INTERACTIVE_TAG_NAMES = [
+  "a",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "form",
+  "details",
+  "dialog",
+  "label",
+] as const;
+
+export const INTERACTIVE_ROLE_NAMES = [
+  "button",
+  "link",
+  "tab",
+  "menuitem",
+  "checkbox",
+  "radio",
+  "switch",
+  "slider",
+  "combobox",
+] as const;
+
+export function filterSemanticClasses(value: string): string {
+  const classes = value.split(/\s+/).filter(Boolean);
+  const kept = classes.filter((cls) => !isObfuscatedClass(cls));
+  return kept.join(" ");
+}
+
+export function isObfuscatedClass(cls: string): boolean {
+  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;
+}

package/src/shared/run/browser.ts

@@ -11,6 +11,7 @@ import {
   SESSION_STATE_VERSION,
   SessionStateFileSchema,
 } from "../state/session-state.js";
+import { readLibrettoConfig } from "../../cli/core/ai-config.js";
 
 async function pickFreePort(): Promise<number> {
   return await new Promise((resolve, reject) => {
@@ -44,6 +45,53 @@ export type BrowserSession = {
   close: () => Promise<void>;
 };
 
+function resolveWindowPosition(): { x: number; y: number } | undefined {
+  return readLibrettoConfig().windowPosition;
+}
+
+async function applyWindowPosition(
+  browser: Browser,
+  context: BrowserContext,
+  page: Page,
+  windowPosition: { x: number; y: number } | undefined,
+): Promise<void> {
+  if (!windowPosition) {
+    return;
+  }
+
+  const requestedBounds = {
+    left: windowPosition.x,
+    top: windowPosition.y,
+    windowState: "normal" as const,
+  };
+
+  const pageCdp = await context.newCDPSession(page);
+  let browserCdp:
+    | Awaited<ReturnType<Browser["newBrowserCDPSession"]>>
+    | undefined;
+  try {
+    const targetInfo = await pageCdp.send("Target.getTargetInfo");
+    const targetId = (
+      targetInfo as { targetInfo?: { targetId?: string } }
+    ).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 {
+    // Best-effort: window positioning should not prevent browser launch.
+  } finally {
+    await pageCdp.detach().catch(() => {});
+    await browserCdp?.detach().catch(() => {});
+  }
+}
+
 export async function launchBrowser({
   sessionName,
   headless = false,
@@ -51,12 +99,16 @@ export async function launchBrowser({
   storageStatePath,
 }: LaunchBrowserArgs): Promise<BrowserSession> {
   const debugPort = await pickFreePort();
+  const windowPosition = headless ? undefined : resolveWindowPosition();
   const browser = await chromium.launch({
     headless,
     args: [
       "--disable-blink-features=AutomationControlled",
       `--remote-debugging-port=${debugPort}`,
       "--no-focus-on-check",
+      ...(windowPosition
+        ? [`--window-position=${windowPosition.x},${windowPosition.y}`]
+        : []),
     ],
   });
 
@@ -65,6 +117,7 @@ export async function launchBrowser({
     ...(storageStatePath ? { storageState: storageStatePath } : {}),
   });
   const page = await context.newPage();
+  await applyWindowPosition(browser, context, page, windowPosition);
   page.setDefaultTimeout(30_000);
   page.setDefaultNavigationTimeout(45_000);
 

package/src/shared/visualization/ghost-cursor.ts

@@ -16,7 +16,7 @@ export type GhostCursorOptions = {
 const DEFAULTS: Required<GhostCursorOptions> = {
   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,
@@ -38,20 +38,38 @@ function buildCursorSvg(
     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>`;
   }
   // minimal: default arrow-like SVG cursor
-  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: GhostCursorStyle,
+  color: string,
+  size: number,
+): string {
+  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: Required<GhostCursorOptions>): string {
-  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);
 })();
 `;