verybot 0.1.3

package/dist/computer/browser/manager.js

@@ -0,0 +1,496 @@
+import { mkdirSync, mkdtempSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { chromium } from "playwright";
+import { BROWSER_PROFILE_DIR, BROWSER_PROFILES_DIR } from "../../paths.js";
+import { logger } from "../../logger.js";
+import { buildProfileBadgeScript } from "./profile-badge.js";
+const DEFAULT_PROFILE = "default";
+const PROFILE_NAME_MAX_LENGTH = 50;
+const PROFILE_NAME_PATTERN = /^[a-zA-Z0-9-]+$/;
+/** Chromium flags that reduce headless fingerprinting. */
+const STEALTH_ARGS = [
+    "--disable-blink-features=AutomationControlled",
+    "--disable-features=AutomationControlled",
+    "--no-first-run",
+    "--no-default-browser-check",
+    "--disable-component-update",
+];
+/**
+ * Init script injected before any page JS to patch common headless tells.
+ * Patches are conditional — only applied when the browser's default state
+ * would fail a detection check (e.g. plugins only faked if empty).
+ */
+/**
+ * HEADED mode — minimal, top-frame-only patches.
+ *
+ * Key insight: addInitScript runs in ALL frames including srcdoc iframes.
+ * CreepJS creates hidden srcdoc iframes and compares their state to the
+ * main page. If both have webdriver=false, it knows a stealth script is
+ * running (real extensions only inject in top frames).
+ *
+ * Strategy: patch webdriver on the PROTOTYPE so all direct checks pass
+ * (navigator.webdriver AND Navigator.prototype.webdriver both return false).
+ * Then in srcdoc/about:blank iframes — which CreepJS uses for stealth
+ * detection — override the INSTANCE back to true. This makes it look like
+ * a real browser where extensions don't inject into srcdoc frames.
+ *
+ * Speech synthesis is also patched (top-frame only) because Playwright's
+ * Chromium build doesn't ship platform voices even in headed mode.
+ */
+const STEALTH_HEADED_SCRIPT = `
+// Prototype patch: makes all standard webdriver checks return false
+Object.defineProperty(Navigator.prototype, 'webdriver', {
+  get: () => false,
+  configurable: true,
+});
+
+// In srcdoc/about:blank iframes, restore webdriver=true on the instance.
+// CreepJS creates these to detect stealth; real browsers show true here
+// since extensions don't inject into srcdoc frames.
+if (window !== window.top) {
+  try {
+    const url = document.URL || '';
+    if (url === 'about:srcdoc' || url === 'about:blank') {
+      Object.defineProperty(navigator, 'webdriver', {
+        get: () => true,
+        configurable: true,
+      });
+    }
+  } catch {}
+}
+
+// Top-frame-only patches
+if (window === window.top) {
+  // Speech synthesis: Playwright's Chromium lacks platform voices
+  if (window.speechSynthesis && speechSynthesis.getVoices().length === 0) {
+    const _origGV = speechSynthesis.getVoices.bind(speechSynthesis);
+    const _fakeVoices = [
+      { voiceURI: 'Samantha', name: 'Samantha', lang: 'en-US', localService: true, default: true },
+      { voiceURI: 'Alex', name: 'Alex', lang: 'en-US', localService: true, default: false },
+      { voiceURI: 'Victoria', name: 'Victoria', lang: 'en-US', localService: true, default: false },
+      { voiceURI: 'Karen', name: 'Karen', lang: 'en-AU', localService: true, default: false },
+      { voiceURI: 'Daniel', name: 'Daniel', lang: 'en-GB', localService: true, default: false },
+    ].map(v => {
+      const sv = Object.create(SpeechSynthesisVoice.prototype);
+      for (const [k, val] of Object.entries(v))
+        Object.defineProperty(sv, k, { value: val, enumerable: true });
+      return sv;
+    });
+    speechSynthesis.getVoices = function getVoices() {
+      const real = _origGV();
+      return real.length > 0 ? real : _fakeVoices;
+    };
+    setTimeout(() => speechSynthesis.dispatchEvent(new Event('voiceschanged')), 50);
+  }
+
+  // Playwright globals cleanup
+  for (const k of Object.getOwnPropertyNames(window)) {
+    if (k.startsWith('__playwright') || k.startsWith('__pw')) {
+      try { delete window[k]; } catch {}
+    }
+  }
+}
+`;
+/**
+ * HEADLESS mode — full stealth suite. Headless Chromium is missing
+ * plugins, voices, chrome.* APIs, and leaks via webdriver, dimensions,
+ * hasFocus, etc. We patch everything here since headless detection is
+ * the bigger threat than stealth detection.
+ */
+const STEALTH_HEADLESS_SCRIPT = `
+(function() {
+// --- toString camouflage (WeakMap, no enumerable artifacts) ---
+const _ts = Function.prototype.toString;
+const _m = new WeakMap();
+const _mark = (fn, nm) => { _m.set(fn, nm); };
+const _rep = function toString() {
+  const nm = _m.get(this);
+  if (nm !== undefined) return 'function ' + nm + '() { [native code] }';
+  return _ts.call(this);
+};
+_m.set(_rep, 'toString');
+Function.prototype.toString = _rep;
+
+// 1. webdriver
+const _wd = function webdriver() { return false; };
+_mark(_wd, 'get webdriver');
+Object.defineProperty(Navigator.prototype, 'webdriver', { get: _wd, configurable: true });
+
+// 2. Plugins
+if (navigator.plugins.length === 0) {
+  const fp = Object.create(PluginArray.prototype);
+  const entries = [
+    { name: 'Chrome PDF Plugin', filename: 'internal-pdf-viewer', description: 'Portable Document Format', length: 1 },
+    { name: 'Chrome PDF Viewer', filename: 'mhjfbmdgcfjbbpaeojofohoefgiehjai', description: '', length: 1 },
+    { name: 'Native Client', filename: 'internal-nacl-plugin', description: '', length: 1 },
+    { name: 'Chromium PDF Plugin', filename: 'internal-pdf-viewer', description: 'Portable Document Format', length: 1 },
+    { name: 'Chromium PDF Viewer', filename: 'mhjfbmdgcfjbbpaeojofohoefgiehjai', description: '', length: 1 },
+  ];
+  for (let i = 0; i < entries.length; i++) {
+    const p = Object.create(Plugin.prototype);
+    Object.defineProperties(p, {
+      name: { value: entries[i].name, enumerable: true },
+      filename: { value: entries[i].filename, enumerable: true },
+      description: { value: entries[i].description, enumerable: true },
+      length: { value: entries[i].length, enumerable: true },
+    });
+    fp[i] = p;
+  }
+  Object.defineProperty(fp, 'length', { value: entries.length });
+  const _pg = function plugins() { return fp; };
+  _mark(_pg, 'get plugins');
+  Object.defineProperty(navigator, 'plugins', { get: _pg });
+}
+
+// 3. MimeTypes
+if (navigator.mimeTypes.length === 0) {
+  const fm = Object.create(MimeTypeArray.prototype);
+  const mt = Object.create(MimeType.prototype);
+  Object.defineProperties(mt, {
+    type: { value: 'application/pdf', enumerable: true },
+    suffixes: { value: 'pdf', enumerable: true },
+    description: { value: 'Portable Document Format', enumerable: true },
+  });
+  fm[0] = mt;
+  Object.defineProperty(fm, 'length', { value: 1 });
+  const _mg = function mimeTypes() { return fm; };
+  _mark(_mg, 'get mimeTypes');
+  Object.defineProperty(navigator, 'mimeTypes', { get: _mg });
+}
+
+// 4. Languages
+if (!navigator.languages || navigator.languages.length === 0) {
+  const _lg = function languages() { return ['en-US', 'en']; };
+  _mark(_lg, 'get languages');
+  Object.defineProperty(navigator, 'languages', { get: _lg });
+}
+
+// 5. Chrome objects
+if (!window.chrome) window.chrome = {};
+if (!window.chrome.runtime) window.chrome.runtime = { connect: () => {}, sendMessage: () => {}, id: undefined };
+if (!window.chrome.app) window.chrome.app = {
+  isInstalled: false,
+  InstallState: { DISABLED: 'disabled', INSTALLED: 'installed', NOT_INSTALLED: 'not_installed' },
+  RunningState: { CANNOT_RUN: 'cannot_run', READY_TO_RUN: 'ready_to_run', RUNNING: 'running' },
+  getDetails: () => null, getIsInstalled: () => false,
+};
+if (!window.chrome.csi) window.chrome.csi = () => ({ onloadT: Date.now(), startE: Date.now(), pageT: performance.now(), tran: 15 });
+if (!window.chrome.loadTimes) window.chrome.loadTimes = () => ({
+  commitLoadTime: Date.now()/1000, connectionInfo: 'h2', finishDocumentLoadTime: Date.now()/1000,
+  finishLoadTime: Date.now()/1000, firstPaintAfterLoadTime: 0, firstPaintTime: Date.now()/1000,
+  navigationType: 'Other', npnNegotiatedProtocol: 'h2', requestTime: Date.now()/1000,
+  startLoadTime: Date.now()/1000, wasAlternateProtocolAvailable: false, wasFetchedViaSpdy: true, wasNpnNegotiated: true,
+});
+
+// 6. Permissions
+const oq = window.Permissions?.prototype?.query;
+if (oq) {
+  const _pq = function query(p) { if (p.name==='notifications') return Promise.resolve({state:Notification.permission}); return oq.call(this,p); };
+  _mark(_pq, 'query');
+  window.Permissions.prototype.query = _pq;
+}
+
+// 7. Window dimensions
+if (window.outerWidth === window.innerWidth && window.outerHeight === window.innerHeight) {
+  Object.defineProperty(window, 'outerWidth', { get: () => window.innerWidth + 15 });
+  Object.defineProperty(window, 'outerHeight', { get: () => window.innerHeight + 85 });
+}
+
+// 8. document.hasFocus
+const _hf = function hasFocus() { return true; };
+_mark(_hf, 'hasFocus');
+Document.prototype.hasFocus = _hf;
+
+// 9. Speech synthesis
+if (window.speechSynthesis) {
+  const _ogv = speechSynthesis.getVoices.bind(speechSynthesis);
+  const _mv = [
+    { voiceURI: 'Samantha', name: 'Samantha', lang: 'en-US', localService: true, default: true },
+    { voiceURI: 'Alex', name: 'Alex', lang: 'en-US', localService: true, default: false },
+    { voiceURI: 'Victoria', name: 'Victoria', lang: 'en-US', localService: true, default: false },
+    { voiceURI: 'Karen', name: 'Karen', lang: 'en-AU', localService: true, default: false },
+    { voiceURI: 'Daniel', name: 'Daniel', lang: 'en-GB', localService: true, default: false },
+  ].map(v => { const sv = Object.create(SpeechSynthesisVoice.prototype); for (const [k,val] of Object.entries(v)) Object.defineProperty(sv,k,{value:val,enumerable:true}); return sv; });
+  const _gv = function getVoices() { const r = _ogv(); return r.length > 0 ? r : _mv; };
+  _mark(_gv, 'getVoices');
+  speechSynthesis.getVoices = _gv;
+  if (speechSynthesis.getVoices().length === 0) setTimeout(() => speechSynthesis.dispatchEvent(new Event('voiceschanged')), 50);
+}
+
+// 10. Playwright globals cleanup
+(function() {
+  const c = () => { for (const k of Object.getOwnPropertyNames(window)) if (k.startsWith('__playwright')||k.startsWith('__pw')) try{delete window[k]}catch{} };
+  c(); let n=0; const iv=setInterval(()=>{c();if(++n>60)clearInterval(iv)},50);
+})();
+
+// 11. CDP leak mitigation
+if (typeof Error.captureStackTrace === 'function') {
+  const op = Error.prepareStackTrace;
+  Error.prepareStackTrace = function(e, s) {
+    const f = s.filter(fr => { const fn = fr.getFileName()||''; return !fn.includes('devtools')&&!fn.includes('__puppeteer')&&!fn.includes('__playwright'); });
+    if (op) return op(e, f);
+    return e.toString() + '\\n' + f.map(x => '    at ' + x.toString()).join('\\n');
+  };
+}
+
+// 12. Iframe contentWindow
+const oid = Object.getOwnPropertyDescriptor(HTMLIFrameElement.prototype, 'contentWindow');
+if (oid?.get) {
+  const _ig = function contentWindow() { const w = oid.get.call(this); if (w&&!w.__p) { try{Object.defineProperty(w,'chrome',{value:window.chrome});w.__p=true}catch{} } return w; };
+  _mark(_ig, 'get contentWindow');
+  Object.defineProperty(HTMLIFrameElement.prototype, 'contentWindow', { get: _ig });
+}
+
+// 13. WebGL renderer — SwiftShader is a dead giveaway for headless/server.
+// Only override when the real renderer contains "SwiftShader"; pick a
+// platform-consistent GPU string so it doesn't clash with navigator.platform.
+const UNMASKED_RENDERER = 0x9246; // WEBGL_debug_renderer_info
+const UNMASKED_VENDOR = 0x9245;
+const _isMacPlatform = /Mac/i.test(navigator.platform);
+const _isWinPlatform = /Win/i.test(navigator.platform);
+const _gpuRenderer = _isMacPlatform
+  ? 'ANGLE (Apple, ANGLE Metal Renderer: Apple M1 Pro, Unspecified Version)'
+  : _isWinPlatform
+    ? 'ANGLE (NVIDIA, NVIDIA GeForce GTX 1660 Ti Direct3D11 vs_5_0 ps_5_0, D3D11)'
+    : 'ANGLE (Intel, Mesa Intel(R) UHD Graphics 620 (KBL GT2), OpenGL 4.6)';
+const _gpuVendor = _isMacPlatform
+  ? 'Google Inc. (Apple)'
+  : _isWinPlatform
+    ? 'Google Inc. (NVIDIA)'
+    : 'Google Inc. (Intel)';
+
+for (const Proto of [WebGLRenderingContext.prototype, WebGL2RenderingContext.prototype]) {
+  const _origGP = Proto.getParameter;
+  const _gp = function getParameter(pname) {
+    const orig = _origGP.call(this, pname);
+    if (pname === UNMASKED_RENDERER && typeof orig === 'string' && orig.includes('SwiftShader')) return _gpuRenderer;
+    if (pname === UNMASKED_VENDOR && typeof orig === 'string' && orig.includes('SwiftShader')) return _gpuVendor;
+    return orig;
+  };
+  _mark(_gp, 'getParameter');
+  Proto.getParameter = _gp;
+}
+
+// 14. Video codecs — headless Chromium lacks proprietary codecs (h264, aac)
+const CODEC_LIST = [
+  'video/mp4', 'video/mp4; codecs="avc1.42E01E"', 'video/mp4; codecs="avc1.4D401E"',
+  'video/mp4; codecs="avc1.64001E"', 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
+  'video/webm; codecs="vp8, vorbis"', 'video/webm; codecs="vp9"',
+  'audio/mp4; codecs="mp4a.40.2"', 'audio/mpeg', 'audio/ogg; codecs="vorbis"',
+];
+const _normCodec = (s) => s.replace(/\\s/g, '').toLowerCase();
+const _codecSet = new Set(CODEC_LIST.map(_normCodec));
+
+const _origCanPlay = HTMLVideoElement.prototype.canPlayType;
+const _cp = function canPlayType(type) {
+  const orig = _origCanPlay.call(this, type);
+  if (orig) return orig;
+  if (!_codecSet.has(_normCodec(type))) return '';
+  // Container-only (no codecs=) returns 'maybe'; explicit codec returns 'probably'
+  return type.includes('codecs=') ? 'probably' : 'maybe';
+};
+_mark(_cp, 'canPlayType');
+HTMLVideoElement.prototype.canPlayType = _cp;
+
+if (typeof MediaSource !== 'undefined' && MediaSource.isTypeSupported) {
+  const _origMSTS = MediaSource.isTypeSupported;
+  const _ms = function isTypeSupported(type) {
+    if (_origMSTS(type)) return true;
+    return _codecSet.has(_normCodec(type));
+  };
+  _mark(_ms, 'isTypeSupported');
+  MediaSource.isTypeSupported = _ms;
+}
+
+// 15. Screen dimensions — make screen larger than viewport (real browsers
+// have OS chrome/taskbar). Using dynamic getters so innerWidth changes
+// (e.g. resize) don't create a mismatch.
+const WINDOW_FRAME_W = 16;   // typical OS window border width
+const TITLEBAR_H = 80;       // titlebar + address bar
+const TASKBAR_H = 40;        // OS taskbar
+Object.defineProperties(screen, {
+  width:      { get: () => (window.innerWidth  || 1920) + WINDOW_FRAME_W, configurable: true },
+  height:     { get: () => (window.innerHeight || 1080) + TITLEBAR_H + TASKBAR_H, configurable: true },
+  availWidth: { get: () => (window.innerWidth  || 1920) + WINDOW_FRAME_W, configurable: true },
+  availHeight:{ get: () => (window.innerHeight || 1080) + TITLEBAR_H, configurable: true },
+  colorDepth: { get: () => 24, configurable: true },
+  pixelDepth: { get: () => 24, configurable: true },
+});
+
+})();
+`;
+/** Validate a profile name. Throws on invalid input. */
+export function validateProfileName(name) {
+    if (!name || name.length > PROFILE_NAME_MAX_LENGTH) {
+        throw new Error(`Profile name must be 1-${PROFILE_NAME_MAX_LENGTH} characters. Got: "${name}"`);
+    }
+    if (!PROFILE_NAME_PATTERN.test(name)) {
+        throw new Error(`Profile name may only contain letters, digits, and hyphens. Got: "${name}"`);
+    }
+}
+export class BrowserManager {
+    context = null;
+    config;
+    roleRefs = {};
+    activeProfile;
+    constructor(config) {
+        this.config = config;
+        const profile = config.profile ?? DEFAULT_PROFILE;
+        if (profile !== DEFAULT_PROFILE)
+            validateProfileName(profile);
+        this.activeProfile = profile;
+    }
+    async launch() {
+        if (this.context) {
+            const pages = this.context.pages();
+            return pages[pages.length - 1] ?? (await this.context.newPage());
+        }
+        const isTemp = this.config.profileDir === "temp";
+        const profileDir = isTemp
+            ? mkdtempSync(join(tmpdir(), "verybot-browser-"))
+            : this.resolveProfileDir();
+        const headless = this.config.headless ?? true;
+        const customUA = this.config.userAgent;
+        // Determine the User-Agent to use.
+        // If the user set a custom UA, use it directly.
+        // Otherwise, do a probe launch to read the real browser UA and strip
+        // "HeadlessChrome" so the version always matches internal APIs.
+        let userAgent;
+        if (customUA) {
+            userAgent = customUA;
+        }
+        else {
+            userAgent = await this.detectCleanUA(profileDir, headless);
+        }
+        // Retina DPR on macOS, realistic 14" MacBook resolution
+        const isMac = process.platform === "darwin";
+        const deviceScaleFactor = isMac ? 2 : 1;
+        const viewport = { width: isMac ? 1512 : 1920, height: isMac ? 982 : 1080 };
+        this.context = await chromium.launchPersistentContext(profileDir, {
+            headless,
+            viewport,
+            deviceScaleFactor,
+            userAgent,
+            args: STEALTH_ARGS,
+        });
+        // Headed: minimal patches (only webdriver). Headless: full stealth suite.
+        await this.context.addInitScript(headless ? STEALTH_HEADLESS_SCRIPT : STEALTH_HEADED_SCRIPT);
+        // Inject profile badge on every page load (skip for temp/worker profiles)
+        if (!isTemp) {
+            await this.context.addInitScript(buildProfileBadgeScript(this.activeProfile));
+        }
+        logger.info(`Browser launched (profile: ${this.activeProfile}, ua: Chrome/${userAgent.match(/Chrome\/([\d.]+)/)?.[1] ?? "?"})`);
+        const pages = this.context.pages();
+        return pages[pages.length - 1] ?? (await this.context.newPage());
+    }
+    /**
+     * Probe-launch the browser to read its real User-Agent, then close it.
+     * Returns a clean UA with "HeadlessChrome" replaced by "Chrome".
+     * The result is cached on the class so we only probe once per process.
+     */
+    static _cachedCleanUA = null;
+    async detectCleanUA(profileDir, headless) {
+        if (BrowserManager._cachedCleanUA)
+            return BrowserManager._cachedCleanUA;
+        const probe = await chromium.launchPersistentContext(profileDir, {
+            headless,
+            args: ["--no-first-run"],
+        });
+        try {
+            const page = probe.pages()[0] ?? (await probe.newPage());
+            const rawUA = await page.evaluate(() => navigator.userAgent);
+            // "HeadlessChrome/145.0.xxx" → "Chrome/145.0.xxx"
+            const clean = rawUA.replace(/HeadlessChrome/g, "Chrome");
+            BrowserManager._cachedCleanUA = clean;
+            logger.info(`Detected browser UA: ${clean}`);
+            return clean;
+        }
+        finally {
+            await probe.close();
+        }
+    }
+    /** Resolve the user-data directory for the active named profile. */
+    resolveProfileDir() {
+        if (this.config.profileDir && this.config.profileDir !== "temp") {
+            return this.config.profileDir;
+        }
+        // Named profile → dedicated subdirectory under BROWSER_PROFILES_DIR
+        if (this.activeProfile !== DEFAULT_PROFILE) {
+            const dir = join(BROWSER_PROFILES_DIR, this.activeProfile);
+            mkdirSync(dir, { recursive: true });
+            return dir;
+        }
+        // Default profile → legacy shared dir
+        return BROWSER_PROFILE_DIR;
+    }
+    /** Close current browser and switch to a different named profile. */
+    async switchProfile(name) {
+        validateProfileName(name);
+        await this.close();
+        this.activeProfile = name;
+        logger.info(`Switched to browser profile: ${name}`);
+    }
+    /** Get the currently active profile name. */
+    getActiveProfile() {
+        return this.activeProfile;
+    }
+    /** Update config for next browser launch. Closes existing browser if headless mode changed. */
+    async updateConfig(config) {
+        const headlessChanged = this.context && (config.headless ?? true) !== (this.config.headless ?? true);
+        this.config = config;
+        if (headlessChanged) {
+            logger.info("Headless mode changed — closing browser so next launch uses new setting");
+            await this.close();
+        }
+    }
+    /** Get the active page, or null if browser is not launched. */
+    getPage() {
+        if (!this.context)
+            return null;
+        const pages = this.context.pages();
+        return pages[pages.length - 1] ?? null;
+    }
+    /** Check if the browser is currently launched. */
+    isLaunched() {
+        return this.context !== null;
+    }
+    /** Store role refs from the latest snapshot. */
+    setRoleRefs(refs) {
+        this.roleRefs = refs;
+    }
+    /** Get stored role refs from the latest snapshot. */
+    getRoleRefs() {
+        return this.roleRefs;
+    }
+    /**
+     * Resolve a ref string (e.g. "e5") to a Playwright Locator.
+     * Ported from main project's pw-session.ts:refLocator.
+     */
+    refLocator(ref) {
+        const page = this.getPage();
+        if (!page)
+            throw new Error("Browser not launched. Use browser_navigate first.");
+        const normalized = ref.startsWith("@")
+            ? ref.slice(1)
+            : ref.startsWith("ref=")
+                ? ref.slice(4)
+                : ref;
+        const info = this.roleRefs[normalized];
+        if (!info) {
+            throw new Error(`Unknown ref "${normalized}". Take a new snapshot and use a ref from that snapshot.`);
+        }
+        const locator = info.name
+            ? page.getByRole(info.role, { name: info.name, exact: true })
+            : page.getByRole(info.role);
+        return info.nth !== undefined ? locator.nth(info.nth) : locator;
+    }
+    async close() {
+        if (!this.context)
+            return;
+        await this.context.close();
+        this.context = null;
+        this.roleRefs = {};
+        logger.info("Browser closed");
+    }
+}

package/dist/computer/browser/profile-badge.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Injectable JS script that renders a floating profile badge at the top of
+ * every page. Injected via `context.addInitScript()` so it runs on every
+ * navigation within the persistent browser context.
+ *
+ * The badge color is deterministic — derived from a simple hash of the profile
+ * name so each profile always gets the same hue.
+ */
+/**
+ * Build the init-script source string for a given profile name.
+ * The returned string is plain JS (no imports) safe for `addInitScript`.
+ */
+export declare function buildProfileBadgeScript(profileName: string): string;

package/dist/computer/browser/profile-badge.js

@@ -0,0 +1,67 @@
+/**
+ * Injectable JS script that renders a floating profile badge at the top of
+ * every page. Injected via `context.addInitScript()` so it runs on every
+ * navigation within the persistent browser context.
+ *
+ * The badge color is deterministic — derived from a simple hash of the profile
+ * name so each profile always gets the same hue.
+ */
+const BADGE_ID = "__verybot_profile_badge__";
+/**
+ * Build the init-script source string for a given profile name.
+ * The returned string is plain JS (no imports) safe for `addInitScript`.
+ */
+export function buildProfileBadgeScript(profileName) {
+    // Defense-in-depth: reject anything outside [a-zA-Z0-9-] even if caller validated
+    if (!/^[a-zA-Z0-9-]+$/.test(profileName)) {
+        throw new Error(`Unsafe profile name for badge script: "${profileName}"`);
+    }
+    // Deterministic hue from profile name (djb2 hash → 0-360)
+    let hash = 5381;
+    for (let i = 0; i < profileName.length; i++) {
+        hash = ((hash << 5) + hash + profileName.charCodeAt(i)) >>> 0;
+    }
+    const hue = hash % 360;
+    // Also override document.title so the window is identifiable
+    const upperName = profileName.toUpperCase();
+    return `
+(function() {
+  if (document.getElementById("${BADGE_ID}")) return;
+
+  /* --- title prefix --- */
+  var origTitle = document.title;
+  document.title = "[${upperName}] " + origTitle;
+  new MutationObserver(function() {
+    if (!document.title.startsWith("[${upperName}] ")) {
+      document.title = "[${upperName}] " + document.title;
+    }
+  }).observe(document.querySelector("title") || document.head, { childList: true, subtree: true, characterData: true });
+
+  /* --- badge bar --- */
+  var bar = document.createElement("div");
+  bar.id = "${BADGE_ID}";
+  bar.style.cssText =
+    "position:fixed;top:0;left:0;right:0;height:28px;z-index:2147483647;" +
+    "background:hsl(${hue},65%,45%);color:#fff;font:bold 13px/28px sans-serif;" +
+    "display:flex;align-items:center;padding:0 12px;box-shadow:0 1px 4px rgba(0,0,0,.25);";
+
+  var dot = document.createElement("span");
+  dot.textContent = "\\u25CF ";
+  dot.style.marginRight = "6px";
+  bar.appendChild(dot);
+
+  var label = document.createElement("span");
+  label.textContent = "${upperName}";
+  label.style.flex = "1";
+  bar.appendChild(label);
+
+  var close = document.createElement("span");
+  close.textContent = "\\u2715";
+  close.style.cssText = "cursor:pointer;padding:0 4px;font-size:15px;opacity:.8;";
+  close.addEventListener("click", function() { bar.remove(); });
+  bar.appendChild(close);
+
+  document.documentElement.appendChild(bar);
+})();
+`;
+}

package/dist/computer/browser/screenshot.d.ts

@@ -0,0 +1,5 @@
+/** Compress a screenshot PNG to JPEG, reducing quality until under the size limit. */
+export declare function compressScreenshot(png: Buffer): Promise<{
+    base64: string;
+    mediaType: string;
+}>;

package/dist/computer/browser/screenshot.js

@@ -0,0 +1,21 @@
+import sharp from "sharp";
+import { logger } from "../../logger.js";
+/** Anthropic API rejects base64 images over 5 MB. Compress PNG -> JPEG to stay under. */
+const MAX_IMAGE_BYTES = 3_500_000;
+const JPEG_QUALITY_START = 80;
+const JPEG_QUALITY_MIN = 40;
+const JPEG_QUALITY_STEP = 10;
+/** Compress a screenshot PNG to JPEG, reducing quality until under the size limit. */
+export async function compressScreenshot(png) {
+    let lastJpeg = null;
+    for (let quality = JPEG_QUALITY_START; quality >= JPEG_QUALITY_MIN; quality -= JPEG_QUALITY_STEP) {
+        lastJpeg = await sharp(png).jpeg({ quality }).toBuffer();
+        if (lastJpeg.length <= MAX_IMAGE_BYTES) {
+            logger.info(`Browser: screenshot compressed ${png.length} -> ${lastJpeg.length} bytes (JPEG q${quality})`);
+            return { base64: lastJpeg.toString("base64"), mediaType: "image/jpeg" };
+        }
+    }
+    // Last resort: use the already-computed lowest quality buffer
+    logger.info(`Browser: screenshot compressed ${png.length} -> ${lastJpeg.length} bytes (JPEG q${JPEG_QUALITY_MIN}, may exceed limit)`);
+    return { base64: lastJpeg.toString("base64"), mediaType: "image/jpeg" };
+}

package/dist/computer/browser/snapshot.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Parses Playwright's ariaSnapshot() output,
+ * assigns refs (e1, e2…) to interactive/content elements, and returns an
+ * annotated snapshot string plus a RoleRefMap for resolving refs back to locators.
+ */
+export type RoleRef = {
+    role: string;
+    name?: string;
+    /** Index used only when role+name duplicates exist. */
+    nth?: number;
+};
+export type RoleRefMap = Record<string, RoleRef>;
+export type RoleSnapshotOptions = {
+    /** Only include interactive elements (buttons, links, inputs, etc.). */
+    interactive?: boolean;
+    /** Maximum depth to include (0 = root only). */
+    maxDepth?: number;
+    /** Remove unnamed structural elements and empty branches. */
+    compact?: boolean;
+};
+/** Validate and normalize a ref string like "e5", "@e5", or "ref=e5". Returns null if invalid. */
+export declare function parseRoleRef(raw: string): string | null;
+/**
+ * Parse Playwright's `ariaSnapshot()` text, assign refs to interactive/content
+ * elements, and return the annotated snapshot + a map from ref → role info.
+ */
+export declare function buildRoleSnapshotFromAriaSnapshot(ariaSnapshot: string, options?: RoleSnapshotOptions): {
+    snapshot: string;
+    refs: RoleRefMap;
+};