@johpaz/hive-sdk 0.0.16 → 0.0.18

package/packages/core/src/tools/web/browser-service.ts

@@ -1,234 +1,166 @@
 /**
- * BrowserService — lanza Chrome/Brave VISIBLE y lo controla via CDP (WebSocket).
+ * BrowserService — Browser automation via agent-browser CLI (Rust).
  *
  * Flujo:
- *  1. Detecta el browser instalado (nativo o Flatpak).
- *  2. Lo lanza con Bun.spawn + --remote-debugging-port=9222.
- *  3. CDPClient conecta via WebSocket al DevTools endpoint.
- *  4. Todas las herramientas de browser usan CDPClient como si fuera Puppeteer/Playwright.
+ *  1. Detecta si agent-browser está instalado (lazy install en primer uso).
+ *  2. Ejecuta comandos via CLI con --json para output estructurado.
+ *  3. El daemon de agent-browser maneja Chrome internamente via CDP.
+ *  4. Las herramientas de browser usan AgentBrowserView (API compatible con CDPClient).
  */
 
 import { logger } from "../../utils/logger.ts";
 import type { Config } from "../../config/loader.ts";
-import { existsSync, writeFileSync, chmodSync } from "fs";
-import { tmpdir } from "os";
+import { existsSync, mkdirSync, readFileSync, rmSync } from "fs";
+import { homedir, tmpdir } from "os";
+import { dirname, join, resolve } from "path";
 
 const log = logger.child("browser-service");
 
-// ─── Detección del browser ────────────────────────────────────────────────────
-
-const FLATPAK_BROWSERS = [
-  "com.google.Chrome",
-  "com.brave.Browser",
-  "org.chromium.Chromium",
-  "com.microsoft.Edge",
-];
-
-const NATIVE_PATHS: Record<string, string[]> = {
-  linux: [
-    "/usr/bin/google-chrome",
-    "/usr/bin/google-chrome-stable",
-    "/usr/bin/brave-browser",
-    "/usr/bin/brave",
-    "/usr/bin/chromium-browser",
-    "/usr/bin/chromium",
-    "/usr/bin/microsoft-edge",
-    "/snap/bin/chromium",
-  ],
-  darwin: [
-    "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
-    "/Applications/Brave Browser.app/Contents/MacOS/Brave Browser",
-    "/Applications/Chromium.app/Contents/MacOS/Chromium",
-    "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
-    `${process.env.HOME}/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`,
-  ],
-  win32: [
-    `${process.env.LOCALAPPDATA}\\Google\\Chrome\\Application\\chrome.exe`,
-    `${process.env.PROGRAMFILES}\\Google\\Chrome\\Application\\chrome.exe`,
-    `${process.env["PROGRAMFILES(X86)"]}\\Google\\Chrome\\Application\\chrome.exe`,
-    `${process.env.LOCALAPPDATA}\\BraveSoftware\\Brave-Browser\\Application\\brave.exe`,
-    `${process.env.PROGRAMFILES}\\Microsoft\\Edge\\Application\\msedge.exe`,
-  ],
-};
-
-export type LaunchSpec =
-  | { kind: "native"; path: string }
-  | { kind: "flatpak"; appId: string };
-
-export function detectBrowser(): LaunchSpec | undefined {
-  if (process.env.BUN_CHROME_PATH && existsSync(process.env.BUN_CHROME_PATH)) {
-    return { kind: "native", path: process.env.BUN_CHROME_PATH };
-  }
-  const platform = process.platform as string;
-  const natives = (NATIVE_PATHS[platform] ?? NATIVE_PATHS.linux).filter(Boolean);
-  const found = natives.find(p => existsSync(p));
-  if (found) return { kind: "native", path: found };
-
-  if (platform === "linux" && existsSync("/usr/bin/flatpak")) {
-    for (const appId of FLATPAK_BROWSERS) {
-      const r = Bun.spawnSync(["flatpak", "info", appId], { stdout: "pipe", stderr: "pipe" });
-      if (r.exitCode === 0) return { kind: "flatpak", appId };
-    }
+// ─── Instalación lazy de agent-browser ────────────────────────────────────────
+
+const HIVE_DIR = join(homedir(), ".hive");
+const AGENT_BROWSER_DIR = join(HIVE_DIR, "agent-browser");
+const AGENT_BROWSER_PKG_JSON = join(AGENT_BROWSER_DIR, "package.json");
+const DEFAULT_SESSION_NAME = "hive";
+
+/** Check if agent-browser is installed in the cache dir by running --version */
+async function isAgentBrowserInstalled(): Promise<boolean> {
+  if (!existsSync(AGENT_BROWSER_PKG_JSON)) return false;
+  try {
+    const proc = Bun.spawn(["bun", "run", "agent-browser", "--version"], {
+      cwd: AGENT_BROWSER_DIR,
+      stdout: "pipe",
+      stderr: "pipe",
+    });
+    const exitCode = await proc.exited;
+    return exitCode === 0;
+  } catch {
+    return false;
   }
 }
 
-// ─── CDP Client ───────────────────────────────────────────────────────────────
+async function installAgentBrowser(): Promise<void> {
+  mkdirSync(AGENT_BROWSER_DIR, { recursive: true });
 
-const CDP_PORT = 9222;
-const allInstances = new Set<CDPClient>();
+  // Create minimal package.json
+  const pkg = { name: "hive-agent-browser", version: "1.0.0", dependencies: {} };
+  await Bun.write(AGENT_BROWSER_PKG_JSON, JSON.stringify(pkg, null, 2));
 
-export class CDPClient {
-  private ws: WebSocket | null = null;
-  private proc: ReturnType<typeof Bun.spawn> | null = null;
-  private cmdId = 0;
-  private pending = new Map<number, { resolve: (v: unknown) => void; reject: (e: Error) => void }>();
-  private _url = "";
-  private _focusedSelector: string | null = null;
+  log.info("📦 Instalando agent-browser (primera vez, ~75MB)...");
+  const proc = Bun.spawn(["bun", "add", "agent-browser@latest"], {
+    cwd: AGENT_BROWSER_DIR,
+    stdout: "pipe",
+    stderr: "pipe",
+  });
 
-  get url(): string { return this._url; }
-  get title(): string { return ""; }
-  get loading(): boolean { return false; }
-  get isConnected(): boolean { return this.ws !== null && this.ws.readyState === WebSocket.OPEN; }
-
-  // ── Launch ──────────────────────────────────────────────────────────────────
-
-  async launch(spec: LaunchSpec): Promise<void> {
-    const commonArgs = [
-      `--remote-debugging-port=${CDP_PORT}`,
-      "--no-first-run",
-      "--no-default-browser-check",
-      "--disable-popup-blocking",
-      `--user-data-dir=${tmpdir()}/hive-browser-profile`,
-      "about:blank",
-    ];
-
-    if (spec.kind === "native") {
-      this.proc = Bun.spawn([spec.path, ...commonArgs], {
-        stdout: "ignore",
-        stderr: "ignore",
-      });
-      log.info(`Lanzando browser nativo: ${spec.path} (PID ${this.proc.pid})`);
-    } else {
-      this.proc = Bun.spawn(["flatpak", "run", spec.appId, ...commonArgs], {
-        stdout: "ignore",
-        stderr: "ignore",
-      });
-      log.info(`Lanzando Flatpak ${spec.appId} (PID ${this.proc.pid})`);
-    }
+  const exitCode = await proc.exited;
+  const stderr = await new Response(proc.stderr).text();
 
-    await this._waitForCDP();
-    await this._connect();
-    allInstances.add(this);
+  if (exitCode !== 0) {
+    throw new Error(`bun add agent-browser failed: ${stderr}`);
   }
 
-  // ── CDP WebSocket ───────────────────────────────────────────────────────────
+  log.info("✅ agent-browser instalado.");
+}
 
-  private async _waitForCDP(timeout = 15000): Promise<void> {
-    const deadline = Date.now() + timeout;
-    while (Date.now() < deadline) {
-      try {
-        const r = await fetch(`http://localhost:${CDP_PORT}/json/version`);
-        if (r.ok) return;
-      } catch { /* not ready yet */ }
-      await new Promise<void>(r => setTimeout(r, 300));
-    }
-    throw new Error(`CDP no respondió en ${timeout}ms en puerto ${CDP_PORT}`);
-  }
-
-  private async _connect(): Promise<void> {
-    const r = await fetch(`http://localhost:${CDP_PORT}/json`);
-    const targets = await r.json() as Array<{ type: string; webSocketDebuggerUrl: string }>;
-    const target = targets.find(t => t.type === "page") ?? targets[0];
-    if (!target?.webSocketDebuggerUrl) throw new Error("No hay target CDP disponible");
-
-    await new Promise<void>((resolve, reject) => {
-      const ws = new WebSocket(target.webSocketDebuggerUrl);
-      ws.onopen = () => {
-        this.ws = ws;
-        ws.onmessage = (ev: MessageEvent) => {
-          const msg = JSON.parse(ev.data as string) as {
-            id?: number;
-            result?: unknown;
-            error?: { message: string };
-          };
-          if (msg.id !== undefined) {
-            const p = this.pending.get(msg.id);
-            if (p) {
-              this.pending.delete(msg.id);
-              if (msg.error) p.reject(new Error(msg.error.message));
-              else p.resolve(msg.result ?? {});
-            }
-          }
-        };
-        resolve();
-      };
-      ws.onerror = () => reject(new Error("WebSocket CDP falló al conectar"));
-      ws.onclose = () => {
-        // Rechazar todos los pendientes
-        for (const p of this.pending.values()) p.reject(new Error("CDP WebSocket cerrado"));
-        this.pending.clear();
-      };
-    });
+/** Run agent-browser CLI from the cache directory — cross-platform via bun run */
+async function runAgentBrowser(
+  args: string[]
+): Promise<{ success: boolean; data?: any; error?: string }> {
+  const proc = Bun.spawn(["bun", "run", "agent-browser", ...args], {
+    cwd: AGENT_BROWSER_DIR,
+    stdout: "pipe",
+    stderr: "pipe",
+  });
 
-    await this.cdp("Page.enable");
-    await this.cdp("Runtime.enable");
+  const stdout = await new Response(proc.stdout).text();
+  const stderr = await new Response(proc.stderr).text();
+  const exitCode = await proc.exited;
+
+  if (exitCode !== 0 && !stdout.trim()) {
+    throw new Error(stderr || `agent-browser ${args[0]} failed`);
   }
 
-  // ── CDP raw command ─────────────────────────────────────────────────────────
+  try {
+    const result = JSON.parse(stdout.trim().split("\n").pop() || "{}");
+    return result;
+  } catch {
+    return { success: true, data: { raw: stdout.trim() } };
+  }
+}
 
-  async cdp<T = unknown>(method: string, params?: Record<string, unknown>): Promise<T> {
-    if (!this.ws) throw new Error("CDP no conectado");
-    const id = ++this.cmdId;
-    return new Promise<T>((resolve, reject) => {
-      this.pending.set(id, {
-        resolve: v => resolve(v as T),
-        reject,
+async function ensureChromeInstalled(): Promise<void> {
+  log.info("🔍 Verificando Chrome para agent-browser...");
+  const res = await runAgentBrowser(["open", "about:blank", "--session", DEFAULT_SESSION_NAME, "--json"]);
+
+  if (!res.success) {
+    const err = res.error || "";
+    // Chrome not installed — trigger install
+    if (err.includes("not found") || err.includes("install")) {
+      log.info("📥 Descargando Chrome (agent-browser install)...");
+      const installProc = Bun.spawn(["bun", "run", "agent-browser", "install"], {
+        cwd: AGENT_BROWSER_DIR,
+        stdout: "pipe",
+        stderr: "pipe",
       });
-      this.ws!.send(JSON.stringify({ id, method, params: params ?? {} }));
-    });
+      const installExit = await installProc.exited;
+      if (installExit !== 0) {
+        const installErr = await new Response(installProc.stderr).text();
+        throw new Error(`agent-browser install failed: ${installErr}`);
+      }
+      log.info("✅ Chrome descargado.");
+      return;
+    }
+    throw new Error(`agent-browser chrome check failed: ${err}`);
   }
+}
 
-  // ── navigate ────────────────────────────────────────────────────────────────
+// ─── AgentBrowserView (API compatible con CDPClient) ──────────────────────────
 
-  async navigate(url: string): Promise<void> {
-    this._focusedSelector = null;
-    await this.cdp("Page.navigate", { url });
-    // Esperar hasta document.readyState === 'complete'
-    const deadline = Date.now() + 30000;
-    while (Date.now() < deadline) {
-      await new Promise<void>(r => setTimeout(r, 150));
-      try {
-        const res = await this.cdp<{ result: { value: string } }>("Runtime.evaluate", {
-          expression: "document.readyState",
-          returnByValue: true,
-        });
-        if (res.result?.value === "complete") break;
-      } catch { /* continuar */ }
-    }
-    // Actualizar URL real (puede haber redirect)
-    try {
-      const res = await this.cdp<{ result: { value: string } }>("Runtime.evaluate", {
-        expression: "location.href",
-        returnByValue: true,
-      });
-      this._url = res.result?.value || url;
-    } catch {
-      this._url = url;
-    }
+export class AgentBrowserView {
+  private sessionName: string;
+  private _url = "";
+
+  get url(): string { return this._url; }
+  get title(): string { return ""; }
+  get loading(): boolean { return false; }
+  get isConnected(): boolean { return true; }
+
+  constructor(sessionName: string = DEFAULT_SESSION_NAME) {
+    this.sessionName = sessionName;
   }
 
-  // ── evaluate ────────────────────────────────────────────────────────────────
+  protected async run(args: string[]): Promise<{ success: boolean; data?: any; error?: string }> {
+    return runAgentBrowser(["--session", this.sessionName, "--json", ...args]);
+  }
 
-  async evaluate<T = unknown>(script: string): Promise<T> {
-    const res = await this.cdp<{ result: { value: T } }>("Runtime.evaluate", {
-      expression: `(async () => { return (${script}) })()`,
-      returnByValue: true,
-      awaitPromise: true,
-    });
-    return res.result?.value as T;
+  async navigate(url: string): Promise<void> {
+    // Ensure protocol
+    const target = /^https?:\/\//.test(url) ? url : `https://${url}`;
+    const res = await this.run(["open", target]);
+    if (!res.success) throw new Error(res.error || "navigate failed");
+    this._url = res.data?.url || target;
+    // Small delay to let JS settle (same as old implementation)
+    await new Promise(r => setTimeout(r, 500));
   }
 
-  // ── screenshot ──────────────────────────────────────────────────────────────
+  async evaluate<T = unknown>(script: string): Promise<T> {
+    let wrapped = script;
+    const trimmed = script.trim();
+
+    // If script contains top-level await, wrap in async IIFE to make it valid JS
+    if (/\bawait\b/.test(script) && !trimmed.startsWith("(async") && !trimmed.startsWith("async function")) {
+      if (trimmed.startsWith("return")) {
+        wrapped = `(async () => { ${script} })()`;
+      } else {
+        wrapped = `(async () => { return ${script}; })()`;
+      }
+    }
+
+    const res = await this.run(["eval", wrapped]);
+    if (!res.success) throw new Error(res.error || "eval failed");
+    return res.data?.result as T;
+  }
 
   async screenshot(options?: {
     encoding?: "blob" | "buffer" | "base64" | "shmem";
@@ -236,156 +168,172 @@ export class CDPClient {
     quality?: number;
     clip?: { x: number; y: number; width: number; height: number; scale: number };
   }): Promise<string> {
-    const params: Record<string, unknown> = {
-      format: options?.format ?? "png",
-    };
-    if (options?.quality) params.quality = options.quality;
-    if (options?.clip) params.clip = options.clip;
+    // Build args
+    const args: string[] = ["screenshot"];
 
-    const res = await this.cdp<{ data: string }>("Page.captureScreenshot", params);
-    return res.data;
-  }
+    if (options?.format === "jpeg") {
+      args.push("--screenshot-format", "jpeg");
+    }
+    if (options?.quality) {
+      args.push("--screenshot-quality", String(options.quality));
+    }
 
-  // ── click ───────────────────────────────────────────────────────────────────
+    const res = await this.run(args);
+    if (!res.success) throw new Error(res.error || "screenshot failed");
 
-  async click(selector: string, _options?: Record<string, unknown>): Promise<void> {
-    // 1. Verificar que el elemento existe y obtener coordenadas para visual feedback
-    const box = await this.evaluate<{ x: number; y: number; width: number; height: number } | null>(`
-      (() => {
-        const el = document.querySelector(${JSON.stringify(selector)});
-        if (!el) return null;
-        el.scrollIntoView({ behavior: "instant", block: "center" });
-        const r = el.getBoundingClientRect();
-        return { x: Math.round(r.left + r.width / 2), y: Math.round(r.top + r.height / 2), width: r.width, height: r.height };
-      })()
-    `);
-    if (!box) throw new Error(`Selector no encontrado: ${selector}`);
+    const path = res.data?.path as string;
+    if (!path) throw new Error("screenshot did not return a path");
 
-    // 2. Mover el cursor CDP al elemento (visual feedback en el browser visible)
-    await this.cdp("Input.dispatchMouseEvent", {
-      type: "mouseMoved", x: box.x, y: box.y, button: "none",
-    });
+    const data = readFileSync(path);
+    const base64 = Buffer.from(data).toString("base64");
 
-    // 3. element.click() para trigger fiable de onclick/event listeners
-    await this.evaluate(`document.querySelector(${JSON.stringify(selector)}).click()`);
-    this._focusedSelector = selector;
+    // Cleanup temp file
+    try { rmSync(path); } catch { /* ignore */ }
+
+    return base64;
   }
 
-  // ── type ────────────────────────────────────────────────────────────────────
+  async click(selector: string, _options?: Record<string, unknown>): Promise<void> {
+    const res = await this.run(["click", selector]);
+    if (!res.success) throw new Error(res.error || `click failed: ${selector}`);
+  }
 
   async type(text: string): Promise<void> {
-    // Si sabemos qué elemento fue clickeado, escribimos directamente en él.
-    // Esto es más fiable que Input.insertText o dispatchKeyEvent char, que
-    // dependen de que CDP tenga el focus sincronizado correctamente.
-    if (this._focusedSelector) {
-      const sel = this._focusedSelector;
-      await this.evaluate(`
-        (() => {
-          const el = document.querySelector(${JSON.stringify(sel)});
-          if (!el) return;
-          const s = el.selectionStart ?? el.value?.length ?? 0;
-          const e = el.selectionEnd ?? el.value?.length ?? 0;
-          const before = (el.value ?? "").substring(0, s);
-          const after  = (el.value ?? "").substring(e);
-          el.value = before + ${JSON.stringify(text)} + after;
-          el.selectionStart = el.selectionEnd = before.length + ${JSON.stringify(text)}.length;
-          el.dispatchEvent(new Event('input',  { bubbles: true }));
-          el.dispatchEvent(new Event('change', { bubbles: true }));
-        })()
-      `);
-    } else {
-      // Fallback: char events al elemento activo del browser
-      for (const char of text) {
-        await this.cdp("Input.dispatchKeyEvent", { type: "char", text: char });
-      }
-    }
+    // Fallback: keyboard inserttext (requires focused element)
+    const res = await this.run(["keyboard", "inserttext", text]);
+    if (!res.success) throw new Error(res.error || "type failed");
   }
 
-  // ── press ───────────────────────────────────────────────────────────────────
+  async typeIn(selector: string, text: string): Promise<void> {
+    const res = await this.run(["type", selector, text]);
+    if (!res.success) throw new Error(res.error || `type failed: ${selector}`);
+  }
 
-  async press(key: string, options?: { modifiers?: string[] }): Promise<void> {
-    const modifierBits = (options?.modifiers ?? []).reduce((acc, m) => {
-      if (m === "Alt") return acc | 1;
-      if (m === "Control" || m === "Meta") return acc | 2;
-      if (m === "Shift") return acc | 8;
-      return acc;
-    }, 0);
-
-    await this.cdp("Input.dispatchKeyEvent", { type: "keyDown", key, modifiers: modifierBits });
-    // El evento 'char' es necesario para que el navegador procese teclas como Enter
-    // y dispare comportamientos del DOM (submit de formularios, saltos de línea, etc.)
-    await this.cdp("Input.dispatchKeyEvent", {
-      type: "char",
-      key: key === "Return" || key === "Enter" ? "\r" : key.length === 1 ? key : "",
-      modifiers: modifierBits,
-    });
-    await this.cdp("Input.dispatchKeyEvent", { type: "keyUp", key, modifiers: modifierBits });
+  async fill(selector: string, text: string): Promise<void> {
+    const res = await this.run(["fill", selector, text]);
+    if (!res.success) throw new Error(res.error || `fill failed: ${selector}`);
   }
 
-  // ── scroll ──────────────────────────────────────────────────────────────────
+  async press(key: string, options?: { modifiers?: string[] }): Promise<void> {
+    const modifiers = options?.modifiers ?? [];
+    const combo = modifiers.length > 0
+      ? `${modifiers.join("+")}+${key}`
+      : key;
+    const res = await this.run(["press", combo]);
+    if (!res.success) throw new Error(res.error || `press failed: ${combo}`);
+  }
 
   async scroll(dx: number, dy: number): Promise<void> {
-    await this.evaluate(`window.scrollBy(${dx}, ${dy})`);
+    const dir = dy > 0 ? "down" : dy < 0 ? "up" : dx > 0 ? "right" : "left";
+    const px = Math.abs(dy || dx);
+    const res = await this.run(["scroll", dir, String(px)]);
+    if (!res.success) throw new Error(res.error || "scroll failed");
   }
 
-  async scrollTo(selector: string, options?: { behavior?: "smooth" | "instant" }): Promise<void> {
-    const behavior = options?.behavior ?? "smooth";
-    await this.evaluate(`document.querySelector(${JSON.stringify(selector)})?.scrollIntoView({ behavior: ${JSON.stringify(behavior)}, block: "center" })`);
+  async scrollTo(selector: string, _options?: { behavior?: "smooth" | "instant" }): Promise<void> {
+    // agent-browser has scrollintoview (behavior not supported via CLI)
+    const res = await this.run(["scrollintoview", selector]);
+    if (!res.success) throw new Error(res.error || `scrollTo failed: ${selector}`);
   }
 
-  // ── navigation helpers ──────────────────────────────────────────────────────
-
   async back(): Promise<void> {
-    await this.evaluate("history.back()");
+    const res = await this.run(["back"]);
+    if (!res.success) throw new Error(res.error || "back failed");
     await new Promise<void>(r => setTimeout(r, 800));
   }
 
   async forward(): Promise<void> {
-    await this.evaluate("history.forward()");
+    const res = await this.run(["forward"]);
+    if (!res.success) throw new Error(res.error || "forward failed");
     await new Promise<void>(r => setTimeout(r, 800));
   }
 
   async reload(): Promise<void> {
-    await this.cdp("Page.reload");
+    const res = await this.run(["reload"]);
+    if (!res.success) throw new Error(res.error || "reload failed");
     await new Promise<void>(r => setTimeout(r, 1000));
   }
 
   async resize(width: number, height: number): Promise<void> {
-    await this.cdp("Emulation.setDeviceMetricsOverride", {
-      width, height, deviceScaleFactor: 1, mobile: false,
-    });
+    const res = await this.run(["set", "viewport", String(width), String(height)]);
+    if (!res.success) throw new Error(res.error || "resize failed");
+  }
+
+  /** Capture accessibility tree snapshot (compact, AI-optimized). ~200-600 chars vs ~3000+ innerText. */
+  async snapshot(options?: { compact?: boolean; depth?: number; interactiveOnly?: boolean }): Promise<string> {
+    const args = ["snapshot"];
+    if (options?.compact !== false) args.push("-c");
+    if (options?.depth) args.push("-d", String(options.depth));
+    if (options?.interactiveOnly) args.push("-i");
+
+    const res = await this.run(args);
+    if (!res.success) throw new Error(res.error || "snapshot failed");
+    return res.data?.snapshot as string || "";
   }
 
-  // ── close ───────────────────────────────────────────────────────────────────
+  async cdp<T = unknown>(method: string, params?: Record<string, unknown>): Promise<T> {
+    const script = `
+      (() => {
+        // agent-browser does not expose raw CDP directly via CLI for all methods.
+        // For common methods we can emulate; for others we return a notice.
+        const method = ${JSON.stringify(method)};
+        const params = ${JSON.stringify(params ?? {})};
+        return { method, params, note: "CDP passthrough not fully supported by agent-browser CLI" };
+      })()
+    `;
+    const res = await this.run(["eval", script]);
+    if (!res.success) throw new Error(res.error || `cdp failed: ${method}`);
+    return res.data?.result as T;
+  }
 
   close(): void {
-    try { this.ws?.close(); } catch { /* ignore */ }
-    try { this.proc?.kill(); } catch { /* ignore */ }
-    this.ws = null;
-    this.proc = null;
-    this._url = "";
-    allInstances.delete(this);
+    // Close the session
+    this.run(["close"]).catch(() => { /* ignore */ });
+  }
+}
+
+// ─── Backwards compatibility exports ──────────────────────────────────────────
+
+/** @deprecated Use AgentBrowserView instead */
+export class CDPClient extends AgentBrowserView {
+  private _launched = false;
+
+  async launch(_spec?: unknown, _options?: unknown): Promise<void> {
+    if (this._launched) return;
+    // Verify agent-browser is working by opening about:blank
+    const res = await this.run(["open", "about:blank"]);
+    if (!res.success) throw new Error(res.error || "Failed to launch agent-browser");
+    this._launched = true;
   }
 
   static closeAll(): void {
-    for (const inst of allInstances) inst.close();
-    allInstances.clear();
+    // agent-browser sessions are managed by the daemon; no explicit cleanup needed
   }
 }
 
+/** @deprecated No longer used — agent-browser handles browser detection internally */
+export function detectBrowser(_options?: unknown): undefined {
+  return undefined;
+}
+
+/** @deprecated No longer used */
+export type LaunchSpec = { kind: "remote"; cdpUrl: string };
+
 // ─── BrowserService (singleton) ───────────────────────────────────────────────
 
-export type BrowserView = CDPClient;
+export type BrowserView = AgentBrowserView;
 
-let _client: CDPClient | null = null;
-let _spec: LaunchSpec | undefined = undefined;
+let _client: AgentBrowserView | null = null;
 let _available = false;
 let _launching = false;
 
 export class BrowserService {
   private static instance: BrowserService | null = null;
+  private readonly config: Config;
 
-  private constructor(_config: Config) {}
+  private constructor(config: Config) {
+    this.config = config;
+  }
 
   static getInstance(config: Config): BrowserService {
     if (!BrowserService.instance) {
@@ -395,40 +343,52 @@ export class BrowserService {
   }
 
   /**
-   * Probe-only: detect if a browser is installed and mark tools as available.
-   * Does NOT launch the browser — that happens lazily on first tool use.
+   * Probe / lazy install agent-browser.
    */
   async start(): Promise<boolean> {
-    _spec = detectBrowser();
-    if (!_spec) {
-      log.warn("Ningún browser Chromium encontrado.");
-      log.warn("  Linux nativo: sudo dnf install chromium");
-      log.warn("  Flatpak:      flatpak install flathub com.google.Chrome");
-      log.warn("  Manual:       export BUN_CHROME_PATH=/ruta/a/chrome");
+    const b = this.config.tools?.browser;
+    if (b?.enabled === false) {
+      _available = false;
+      return false;
+    }
+
+    const installed = await isAgentBrowserInstalled();
+
+    if (!installed) {
+      try {
+        await installAgentBrowser();
+      } catch (err) {
+        log.warn(`No se pudo instalar agent-browser: ${(err as Error).message}`);
+        log.warn("  Instalar manualmente: bun add -g agent-browser");
+        _available = false;
+        return false;
+      }
+    }
+
+    try {
+      await ensureChromeInstalled();
+    } catch (err) {
+      log.warn(`Chrome no pudo prepararse: ${(err as Error).message}`);
       _available = false;
       return false;
     }
+
     _available = true;
-    log.info(`✅ Browser detectado (${_spec.kind === "native" ? _spec.path : _spec.appId}) — se abrirá al primer uso`);
+    log.info("✅ agent-browser listo — se abrirá al primer uso");
     return true;
   }
 
-  /**
-   * Lazy launch: called by getView() on first tool use.
-   */
   private async _ensureLaunched(): Promise<boolean> {
     if (_client) return true;
-    if (!_spec) return false;
     if (_launching) {
-      // Wait up to 10s for concurrent launch to finish
       const deadline = Date.now() + 10000;
       while (_launching && Date.now() < deadline) await new Promise(r => setTimeout(r, 100));
       return !!_client;
     }
     _launching = true;
     try {
-      _client = new CDPClient();
-      await _client.launch(_spec);
+      const sessionName = this.config.tools?.browser?.sessionName ?? DEFAULT_SESSION_NAME;
+      _client = new AgentBrowserView(sessionName);
       log.info("✅ Browser abierto — el usuario verá las acciones del agente");
       return true;
     } catch (err) {
@@ -441,25 +401,17 @@ export class BrowserService {
     }
   }
 
-  async getView(): Promise<CDPClient | null> {
+  async getView(): Promise<AgentBrowserView | null> {
     if (!_available) return null;
-
-    // Health-check: if Chrome was closed by the user or crashed, relaunch on next call
-    if (_client && !_client.isConnected) {
-      log.warn("Browser connection lost — relaunching on next tool call");
-      _client = null;
-    }
-
     await this._ensureLaunched();
     return _client;
   }
 
-  /** Sync version — returns existing client only (no launch). Use getView() in tools. */
-  getViewSync(): CDPClient | null {
+  getViewSync(): AgentBrowserView | null {
     return _client;
   }
 
-  async getPage(): Promise<CDPClient | null> {
+  async getPage(): Promise<AgentBrowserView | null> {
     return this.getView();
   }
 
@@ -505,7 +457,7 @@ export function getBrowserService(): BrowserService | null {
 // ─── Helpers (misma API que antes) ───────────────────────────────────────────
 
 export async function waitForSelector(
-  view: CDPClient,
+  view: AgentBrowserView,
   selector: string,
   timeout = 30000
 ): Promise<void> {
@@ -519,7 +471,7 @@ export async function waitForSelector(
 }
 
 export async function waitForCondition(
-  view: CDPClient,
+  view: AgentBrowserView,
   expression: string,
   timeout = 30000
 ): Promise<void> {
@@ -533,22 +485,19 @@ export async function waitForCondition(
 }
 
 export async function screenshotElement(
-  view: CDPClient,
+  view: AgentBrowserView,
   selector: string
 ): Promise<string> {
-  const box = await view.evaluate<{ x: number; y: number; width: number; height: number } | null>(`
-    (() => {
-      const el = document.querySelector(${JSON.stringify(selector)});
-      if (!el) return null;
-      const r = el.getBoundingClientRect();
-      return { x: r.left, y: r.top, width: r.width, height: r.height };
-    })()
-  `);
-
-  if (!box) throw new Error(`Elemento no encontrado: ${selector}`);
-
-  return view.screenshot({
-    format: "png",
-    clip: { x: box.x, y: box.y, width: box.width, height: box.height, scale: 1 },
-  });
+  const res = await (view as any).run(["screenshot", selector]);
+  if (!res.success) throw new Error(res.error || `screenshot failed: ${selector}`);
+
+  const path = res.data?.path as string;
+  if (!path) throw new Error("screenshot did not return a path");
+
+  const data = readFileSync(path);
+  const base64 = Buffer.from(data).toString("base64");
+
+  try { rmSync(path); } catch { /* ignore */ }
+
+  return base64;
 }