@canaryai/cli 0.1.5 → 0.1.9

package/dist/chunk-G2X3H7AM.js

@@ -0,0 +1,671 @@
+// src/local-browser/host.ts
+import { chromium } from "playwright";
+var HEARTBEAT_INTERVAL_MS = 3e4;
+var RECONNECT_DELAY_MS = 1e3;
+var MAX_RECONNECT_DELAY_MS = 3e4;
+var MAX_RECONNECT_ATTEMPTS = 10;
+var LocalBrowserHost = class {
+  options;
+  ws = null;
+  browser = null;
+  context = null;
+  page = null;
+  pendingDialogs = [];
+  heartbeatTimer = null;
+  reconnectAttempts = 0;
+  isShuttingDown = false;
+  lastSnapshotYaml = "";
+  constructor(options) {
+    this.options = options;
+  }
+  log(level, message, data) {
+    if (this.options.onLog) {
+      this.options.onLog(level, message, data);
+    } else {
+      const fn = level === "error" ? console.error : level === "warn" ? console.warn : console.log;
+      fn(`[LocalBrowserHost] ${message}`, data ?? "");
+    }
+  }
+  // =========================================================================
+  // Lifecycle
+  // =========================================================================
+  async start() {
+    this.log("info", "Starting local browser host", {
+      browserMode: this.options.browserMode,
+      sessionId: this.options.sessionId
+    });
+    await this.connectWebSocket();
+    await this.launchBrowser();
+    this.sendSessionEvent("browser_ready");
+  }
+  async stop() {
+    this.isShuttingDown = true;
+    this.log("info", "Stopping local browser host");
+    this.stopHeartbeat();
+    if (this.ws) {
+      try {
+        this.ws.close(1e3, "Shutdown");
+      } catch {
+      }
+      this.ws = null;
+    }
+    if (this.context) {
+      try {
+        await this.context.close();
+      } catch {
+      }
+      this.context = null;
+    }
+    if (this.browser) {
+      try {
+        await this.browser.close();
+      } catch {
+      }
+      this.browser = null;
+    }
+    this.page = null;
+    this.log("info", "Local browser host stopped");
+  }
+  // =========================================================================
+  // WebSocket Connection
+  // =========================================================================
+  async connectWebSocket() {
+    return new Promise((resolve, reject) => {
+      const wsUrl = `${this.options.apiUrl.replace("http", "ws")}/local-browser/sessions/${this.options.sessionId}/connect?token=${this.options.wsToken}`;
+      this.log("info", "Connecting to cloud API", { url: wsUrl.replace(/token=.*/, "token=***") });
+      const ws = new WebSocket(wsUrl);
+      ws.onopen = () => {
+        this.log("info", "Connected to cloud API");
+        this.ws = ws;
+        this.reconnectAttempts = 0;
+        this.startHeartbeat();
+        resolve();
+      };
+      ws.onmessage = (event) => {
+        this.handleMessage(event.data);
+      };
+      ws.onerror = (event) => {
+        this.log("error", "WebSocket error", event);
+      };
+      ws.onclose = () => {
+        this.log("info", "WebSocket closed");
+        this.stopHeartbeat();
+        this.ws = null;
+        if (!this.isShuttingDown) {
+          this.scheduleReconnect();
+        }
+      };
+      setTimeout(() => {
+        if (!this.ws) {
+          reject(new Error("WebSocket connection timeout"));
+        }
+      }, 3e4);
+    });
+  }
+  scheduleReconnect() {
+    if (this.reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
+      this.log("error", "Max reconnection attempts reached, giving up");
+      this.stop();
+      return;
+    }
+    const delay = Math.min(
+      RECONNECT_DELAY_MS * Math.pow(2, this.reconnectAttempts),
+      MAX_RECONNECT_DELAY_MS
+    );
+    this.reconnectAttempts++;
+    this.log("info", `Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`);
+    setTimeout(async () => {
+      try {
+        await this.connectWebSocket();
+        this.sendSessionEvent("connected");
+        if (this.page) {
+          this.sendSessionEvent("browser_ready");
+        }
+      } catch (error) {
+        this.log("error", "Reconnection failed", error);
+        this.scheduleReconnect();
+      }
+    }, delay);
+  }
+  // =========================================================================
+  // Heartbeat
+  // =========================================================================
+  startHeartbeat() {
+    this.stopHeartbeat();
+    this.heartbeatTimer = setInterval(() => {
+      if (this.ws?.readyState === WebSocket.OPEN) {
+        const ping = {
+          type: "heartbeat",
+          id: crypto.randomUUID(),
+          timestamp: Date.now(),
+          direction: "pong"
+        };
+        this.ws.send(JSON.stringify(ping));
+      }
+    }, HEARTBEAT_INTERVAL_MS);
+  }
+  stopHeartbeat() {
+    if (this.heartbeatTimer) {
+      clearInterval(this.heartbeatTimer);
+      this.heartbeatTimer = null;
+    }
+  }
+  // =========================================================================
+  // Browser Management
+  // =========================================================================
+  async launchBrowser() {
+    const { browserMode, cdpUrl, headless = true, storageStatePath } = this.options;
+    if (browserMode === "cdp" && cdpUrl) {
+      this.log("info", "Connecting to existing Chrome via CDP", { cdpUrl });
+      this.browser = await chromium.connectOverCDP(cdpUrl);
+      const contexts = this.browser.contexts();
+      this.context = contexts[0] ?? await this.browser.newContext();
+      const pages = this.context.pages();
+      this.page = pages[0] ?? await this.context.newPage();
+    } else {
+      this.log("info", "Launching new Playwright browser", { headless });
+      this.browser = await chromium.launch({
+        headless,
+        args: ["--no-sandbox"]
+      });
+      const contextOptions = {
+        viewport: { width: 1920, height: 1080 }
+      };
+      if (storageStatePath) {
+        try {
+          await Bun.file(storageStatePath).exists();
+          contextOptions.storageState = storageStatePath;
+          this.log("info", "Loading storage state", { storageStatePath });
+        } catch {
+          this.log("debug", "Storage state file not found, starting fresh");
+        }
+      }
+      this.context = await this.browser.newContext(contextOptions);
+      this.page = await this.context.newPage();
+    }
+    this.page.on("dialog", (dialog) => {
+      this.pendingDialogs.push(dialog);
+    });
+    this.log("info", "Browser ready");
+  }
+  // =========================================================================
+  // Message Handling
+  // =========================================================================
+  handleMessage(data) {
+    try {
+      const message = JSON.parse(data);
+      if (message.type === "heartbeat" && message.direction === "ping") {
+        const pong = {
+          type: "heartbeat",
+          id: crypto.randomUUID(),
+          timestamp: Date.now(),
+          direction: "pong"
+        };
+        this.ws?.send(JSON.stringify(pong));
+        return;
+      }
+      if (message.type === "command") {
+        this.handleCommand(message);
+        return;
+      }
+      this.log("debug", "Received unknown message type", message);
+    } catch (error) {
+      this.log("error", "Failed to parse message", { error, data });
+    }
+  }
+  async handleCommand(command) {
+    const startTime = Date.now();
+    this.log("debug", `Executing command: ${command.method}`, { id: command.id });
+    try {
+      const result = await this.executeMethod(command.method, command.args);
+      const response = {
+        type: "response",
+        id: crypto.randomUUID(),
+        timestamp: Date.now(),
+        requestId: command.id,
+        success: true,
+        result
+      };
+      this.ws?.send(JSON.stringify(response));
+      this.log("debug", `Command completed: ${command.method}`, {
+        id: command.id,
+        durationMs: Date.now() - startTime
+      });
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      const response = {
+        type: "response",
+        id: crypto.randomUUID(),
+        timestamp: Date.now(),
+        requestId: command.id,
+        success: false,
+        error: errorMessage,
+        stack: error instanceof Error ? error.stack : void 0
+      };
+      this.ws?.send(JSON.stringify(response));
+      this.log("error", `Command failed: ${command.method}`, {
+        id: command.id,
+        error: errorMessage
+      });
+    }
+  }
+  sendSessionEvent(event, error) {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
+    const message = {
+      type: "session",
+      id: crypto.randomUUID(),
+      timestamp: Date.now(),
+      event,
+      browserMode: this.options.browserMode,
+      error
+    };
+    this.ws.send(JSON.stringify(message));
+  }
+  // =========================================================================
+  // Method Execution
+  // =========================================================================
+  async executeMethod(method, args) {
+    switch (method) {
+      // Lifecycle
+      case "connect":
+        return this.connect(args[0]);
+      case "disconnect":
+        return this.disconnect();
+      // Navigation
+      case "navigate":
+        return this.navigate(args[0], args[1]);
+      case "navigateBack":
+        return this.navigateBack(args[0]);
+      // Page Inspection
+      case "snapshot":
+        return this.snapshot(args[0]);
+      case "takeScreenshot":
+        return this.takeScreenshot(args[0]);
+      case "evaluate":
+        return this.evaluate(args[0], args[1]);
+      case "runCode":
+        return this.runCode(args[0], args[1]);
+      case "consoleMessages":
+        return this.consoleMessages(args[0]);
+      case "networkRequests":
+        return this.networkRequests(args[0]);
+      // Interaction
+      case "click":
+        return this.click(args[0], args[1], args[2]);
+      case "clickAtCoordinates":
+        return this.clickAtCoordinates(
+          args[0],
+          args[1],
+          args[2],
+          args[3]
+        );
+      case "moveToCoordinates":
+        return this.moveToCoordinates(
+          args[0],
+          args[1],
+          args[2],
+          args[3]
+        );
+      case "dragCoordinates":
+        return this.dragCoordinates(
+          args[0],
+          args[1],
+          args[2],
+          args[3],
+          args[4],
+          args[5]
+        );
+      case "hover":
+        return this.hover(args[0], args[1], args[2]);
+      case "drag":
+        return this.drag(
+          args[0],
+          args[1],
+          args[2],
+          args[3],
+          args[4]
+        );
+      case "type":
+        return this.type(
+          args[0],
+          args[1],
+          args[2],
+          args[3],
+          args[4]
+        );
+      case "pressKey":
+        return this.pressKey(args[0], args[1]);
+      case "fillForm":
+        return this.fillForm(args[0], args[1]);
+      case "selectOption":
+        return this.selectOption(
+          args[0],
+          args[1],
+          args[2],
+          args[3]
+        );
+      case "fileUpload":
+        return this.fileUpload(args[0], args[1]);
+      // Dialogs
+      case "handleDialog":
+        return this.handleDialog(args[0], args[1], args[2]);
+      // Waiting
+      case "waitFor":
+        return this.waitFor(args[0]);
+      // Browser Management
+      case "close":
+        return this.closePage(args[0]);
+      case "resize":
+        return this.resize(args[0], args[1], args[2]);
+      case "tabs":
+        return this.tabs(args[0], args[1], args[2]);
+      // Storage
+      case "getStorageState":
+        return this.getStorageState(args[0]);
+      case "getCurrentUrl":
+        return this.getCurrentUrl(args[0]);
+      case "getTitle":
+        return this.getTitle(args[0]);
+      case "getLinks":
+        return this.getLinks(args[0]);
+      case "getElementBoundingBox":
+        return this.getElementBoundingBox(args[0], args[1]);
+      // Tracing
+      case "startTracing":
+        return this.startTracing(args[0]);
+      case "stopTracing":
+        return this.stopTracing(args[0]);
+      // Video
+      case "isVideoRecordingEnabled":
+        return false;
+      // Video not supported in CLI host currently
+      case "saveVideo":
+        return null;
+      case "getVideoPath":
+        return null;
+      default:
+        throw new Error(`Unknown method: ${method}`);
+    }
+  }
+  // =========================================================================
+  // IBrowserClient Method Implementations
+  // =========================================================================
+  getPage() {
+    if (!this.page) throw new Error("No page available");
+    return this.page;
+  }
+  resolveRef(ref) {
+    return this.getPage().locator(`aria-ref=${ref}`);
+  }
+  async connect(_options) {
+    return;
+  }
+  async disconnect() {
+    await this.stop();
+  }
+  async navigate(url, _opts) {
+    const page = this.getPage();
+    await page.goto(url, { waitUntil: "domcontentloaded" });
+    await page.waitForLoadState("load", { timeout: 5e3 }).catch(() => {
+    });
+    return this.captureSnapshot();
+  }
+  async navigateBack(_opts) {
+    await this.getPage().goBack();
+    return this.captureSnapshot();
+  }
+  async snapshot(_opts) {
+    return this.captureSnapshot();
+  }
+  async captureSnapshot() {
+    const page = this.getPage();
+    this.lastSnapshotYaml = await page._snapshotForAI({ mode: "full" });
+    return this.lastSnapshotYaml;
+  }
+  async takeScreenshot(opts) {
+    const page = this.getPage();
+    const buffer = await page.screenshot({
+      type: opts?.type ?? "jpeg",
+      fullPage: opts?.fullPage ?? false
+    });
+    const mime = opts?.type === "png" ? "image/png" : "image/jpeg";
+    return `data:${mime};base64,${buffer.toString("base64")}`;
+  }
+  async evaluate(fn, _opts) {
+    const page = this.getPage();
+    return page.evaluate(new Function(`return (${fn})()`));
+  }
+  async runCode(code, _opts) {
+    const page = this.getPage();
+    const fn = new Function("page", `return (async () => { ${code} })()`);
+    return fn(page);
+  }
+  async consoleMessages(_opts) {
+    return "Console message capture not implemented in CLI host";
+  }
+  async networkRequests(_opts) {
+    return "Network request capture not implemented in CLI host";
+  }
+  async click(ref, _elementDesc, opts) {
+    const locator = this.resolveRef(ref);
+    await locator.scrollIntoViewIfNeeded({ timeout: 5e3 }).catch(() => {
+    });
+    const box = await locator.boundingBox();
+    if (box) {
+      const centerX = box.x + box.width / 2;
+      const centerY = box.y + box.height / 2;
+      const page = this.getPage();
+      if (opts?.modifiers?.length) {
+        for (const mod of opts.modifiers) {
+          await page.keyboard.down(mod);
+        }
+      }
+      if (opts?.doubleClick) {
+        await page.mouse.dblclick(centerX, centerY);
+      } else {
+        await page.mouse.click(centerX, centerY);
+      }
+      if (opts?.modifiers?.length) {
+        for (const mod of opts.modifiers) {
+          await page.keyboard.up(mod);
+        }
+      }
+    } else {
+      if (opts?.doubleClick) {
+        await locator.dblclick({ timeout: opts?.timeoutMs ?? 3e4 });
+      } else {
+        await locator.click({ timeout: opts?.timeoutMs ?? 3e4 });
+      }
+    }
+  }
+  async clickAtCoordinates(x, y, _elementDesc, opts) {
+    const page = this.getPage();
+    if (opts?.doubleClick) {
+      await page.mouse.dblclick(x, y);
+    } else {
+      await page.mouse.click(x, y);
+    }
+  }
+  async moveToCoordinates(x, y, _elementDesc, _opts) {
+    await this.getPage().mouse.move(x, y);
+  }
+  async dragCoordinates(startX, startY, endX, endY, _elementDesc, _opts) {
+    const page = this.getPage();
+    await page.mouse.move(startX, startY);
+    await page.mouse.down();
+    await page.mouse.move(endX, endY);
+    await page.mouse.up();
+  }
+  async hover(ref, _elementDesc, opts) {
+    await this.resolveRef(ref).hover({ timeout: opts?.timeoutMs ?? 3e4 });
+  }
+  async drag(startRef, _startElement, endRef, _endElement, opts) {
+    const startLocator = this.resolveRef(startRef);
+    const endLocator = this.resolveRef(endRef);
+    await startLocator.dragTo(endLocator, { timeout: opts?.timeoutMs ?? 6e4 });
+  }
+  async type(ref, text, _elementDesc, submit, opts) {
+    const locator = this.resolveRef(ref);
+    await locator.clear();
+    await locator.pressSequentially(text, {
+      delay: opts?.delay ?? 0,
+      timeout: opts?.timeoutMs ?? 3e4
+    });
+    if (submit) {
+      await locator.press("Enter");
+    }
+  }
+  async pressKey(key, _opts) {
+    await this.getPage().keyboard.press(key);
+  }
+  async fillForm(fields, opts) {
+    for (const field of fields) {
+      const locator = this.resolveRef(field.ref);
+      const fieldType = field.type ?? "textbox";
+      switch (fieldType) {
+        case "checkbox": {
+          const isChecked = await locator.isChecked();
+          const shouldBeChecked = field.value === "true";
+          if (shouldBeChecked !== isChecked) {
+            await locator.click({ timeout: opts?.timeoutMs ?? 3e4 });
+          }
+          break;
+        }
+        case "radio":
+          await locator.check({ timeout: opts?.timeoutMs ?? 3e4 });
+          break;
+        case "combobox":
+          await locator.selectOption(field.value, { timeout: opts?.timeoutMs ?? 3e4 });
+          break;
+        default:
+          await locator.fill(field.value, { timeout: opts?.timeoutMs ?? 3e4 });
+      }
+    }
+  }
+  async selectOption(ref, value, _elementDesc, opts) {
+    await this.resolveRef(ref).selectOption(value, { timeout: opts?.timeoutMs ?? 3e4 });
+  }
+  async fileUpload(paths, opts) {
+    const fileChooser = await this.getPage().waitForEvent("filechooser", {
+      timeout: opts?.timeoutMs ?? 3e4
+    });
+    await fileChooser.setFiles(paths);
+  }
+  async handleDialog(action, promptText, _opts) {
+    const dialog = this.pendingDialogs.shift();
+    if (dialog) {
+      if (action === "accept") {
+        await dialog.accept(promptText);
+      } else {
+        await dialog.dismiss();
+      }
+    }
+  }
+  async waitFor(opts) {
+    const page = this.getPage();
+    const timeout = opts?.timeout ?? opts?.timeoutMs ?? 3e4;
+    if (opts?.timeSec) {
+      await page.waitForTimeout(opts.timeSec * 1e3);
+      return;
+    }
+    if (opts?.text) {
+      await page.getByText(opts.text).first().waitFor({ state: "visible", timeout });
+      return;
+    }
+    if (opts?.textGone) {
+      await page.getByText(opts.textGone).first().waitFor({ state: "hidden", timeout });
+      return;
+    }
+    if (opts?.selector) {
+      await page.locator(opts.selector).waitFor({
+        state: opts.state ?? "visible",
+        timeout
+      });
+    }
+  }
+  async closePage(_opts) {
+    await this.getPage().close();
+    this.page = null;
+  }
+  async resize(width, height, _opts) {
+    await this.getPage().setViewportSize({ width, height });
+  }
+  async tabs(action, index, _opts) {
+    if (!this.context) throw new Error("No context available");
+    const pages = this.context.pages();
+    switch (action) {
+      case "list":
+        return Promise.all(
+          pages.map(async (p, i) => ({
+            index: i,
+            url: p.url(),
+            title: await p.title().catch(() => "")
+          }))
+        );
+      case "new": {
+        const newPage = await this.context.newPage();
+        this.page = newPage;
+        newPage.on("dialog", (dialog) => this.pendingDialogs.push(dialog));
+        return { index: pages.length };
+      }
+      case "close":
+        if (index !== void 0 && pages[index]) {
+          await pages[index].close();
+        } else {
+          await this.page?.close();
+        }
+        this.page = this.context.pages()[0] ?? null;
+        break;
+      case "select":
+        if (index !== void 0 && pages[index]) {
+          this.page = pages[index];
+        }
+        break;
+    }
+    return null;
+  }
+  async getStorageState(_opts) {
+    if (!this.context) throw new Error("No context available");
+    return this.context.storageState();
+  }
+  async getCurrentUrl(_opts) {
+    return this.getPage().url();
+  }
+  async getTitle(_opts) {
+    return this.getPage().title();
+  }
+  async getLinks(_opts) {
+    const page = this.getPage();
+    return page.$$eval(
+      "a[href]",
+      (links) => links.map((a) => a.href).filter((h) => !!h && (h.startsWith("http://") || h.startsWith("https://")))
+    );
+  }
+  async getElementBoundingBox(ref, _opts) {
+    const locator = this.resolveRef(ref);
+    const box = await locator.boundingBox();
+    if (!box) return null;
+    return { x: box.x, y: box.y, width: box.width, height: box.height };
+  }
+  async startTracing(_opts) {
+    if (!this.context) throw new Error("No context available");
+    await this.context.tracing.start({ screenshots: true, snapshots: true });
+  }
+  async stopTracing(_opts) {
+    if (!this.context) throw new Error("No context available");
+    const tracePath = `/tmp/trace-${Date.now()}.zip`;
+    await this.context.tracing.stop({ path: tracePath });
+    return {
+      trace: tracePath,
+      network: "",
+      resources: "",
+      directory: null,
+      legend: `Trace saved to ${tracePath}`
+    };
+  }
+};
+
+export {
+  LocalBrowserHost
+};
+//# sourceMappingURL=chunk-G2X3H7AM.js.map