@maxiaochao/pi-toolkit 0.1.8 → 0.2.0

package/skills/web-browser/scripts/cdp.js

@@ -0,0 +1,305 @@
+/**
+ * Minimal CDP client - no puppeteer, no hangs
+ */
+
+import WebSocket from "ws";
+
+const DEBUG_HOST = process.env.BROWSER_DEBUG_HOST || "localhost";
+const DEBUG_PORT = Number(process.env.BROWSER_DEBUG_PORT || 9222);
+const DEBUG_HTTP_URL = `http://${DEBUG_HOST}:${DEBUG_PORT}`;
+
+function exceptionMessage(result) {
+  return (
+    result.exceptionDetails.exception?.description || result.exceptionDetails.text
+  );
+}
+
+function remoteObjectValue(remoteObject) {
+  if (!remoteObject) return undefined;
+  if ("value" in remoteObject) return remoteObject.value;
+
+  switch (remoteObject.unserializableValue) {
+    case "NaN":
+      return NaN;
+    case "Infinity":
+      return Infinity;
+    case "-Infinity":
+      return -Infinity;
+    case "-0":
+      return -0;
+  }
+
+  if (remoteObject.type === "bigint" && remoteObject.unserializableValue) {
+    return BigInt(remoteObject.unserializableValue.slice(0, -1));
+  }
+
+  return undefined;
+}
+
+export async function connect(timeout = 5000) {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeout);
+
+  try {
+    const resp = await fetch(`${DEBUG_HTTP_URL}/json/version`, {
+      signal: controller.signal,
+    });
+    const { webSocketDebuggerUrl } = await resp.json();
+    clearTimeout(timeoutId);
+
+    return new Promise((resolve, reject) => {
+      const ws = new WebSocket(webSocketDebuggerUrl);
+      const connectTimeout = setTimeout(() => {
+        ws.close();
+        reject(new Error("WebSocket connect timeout"));
+      }, timeout);
+
+      ws.on("open", () => {
+        clearTimeout(connectTimeout);
+        resolve(new CDP(ws));
+      });
+      ws.on("error", (e) => {
+        clearTimeout(connectTimeout);
+        reject(e);
+      });
+    });
+  } catch (e) {
+    clearTimeout(timeoutId);
+    if (e.name === "AbortError") {
+      throw new Error(
+        `Connection timeout - is Chrome running with --remote-debugging-port=${DEBUG_PORT}?`,
+      );
+    }
+    throw e;
+  }
+}
+
+class CDP {
+  constructor(ws) {
+    this.ws = ws;
+    this.id = 0;
+    this.callbacks = new Map();
+    this.sessions = new Map();
+    this.eventHandlers = new Map();
+
+    ws.on("message", (data) => {
+      const msg = JSON.parse(data.toString());
+      if (msg.id && this.callbacks.has(msg.id)) {
+        const { resolve, reject } = this.callbacks.get(msg.id);
+        this.callbacks.delete(msg.id);
+        if (msg.error) {
+          reject(new Error(msg.error.message));
+        } else {
+          resolve(msg.result);
+        }
+        return;
+      }
+
+      if (msg.method) {
+        this.emit(msg.method, msg.params || {}, msg.sessionId || null);
+      }
+    });
+  }
+
+  on(method, handler) {
+    if (!this.eventHandlers.has(method)) {
+      this.eventHandlers.set(method, new Set());
+    }
+    this.eventHandlers.get(method).add(handler);
+    return () => this.off(method, handler);
+  }
+
+  off(method, handler) {
+    const handlers = this.eventHandlers.get(method);
+    if (!handlers) return;
+    handlers.delete(handler);
+    if (handlers.size === 0) {
+      this.eventHandlers.delete(method);
+    }
+  }
+
+  emit(method, params, sessionId) {
+    const handlers = this.eventHandlers.get(method);
+    if (!handlers || handlers.size === 0) return;
+    for (const handler of handlers) {
+      try {
+        handler(params, sessionId);
+      } catch {
+        // Ignore handler errors to keep CDP session alive.
+      }
+    }
+  }
+
+  send(method, params = {}, sessionId = null, timeout = 10000) {
+    return new Promise((resolve, reject) => {
+      const msgId = ++this.id;
+      const msg = { id: msgId, method, params };
+      if (sessionId) msg.sessionId = sessionId;
+
+      const timeoutId = setTimeout(() => {
+        this.callbacks.delete(msgId);
+        reject(new Error(`CDP timeout: ${method}`));
+      }, timeout);
+
+      this.callbacks.set(msgId, {
+        resolve: (result) => {
+          clearTimeout(timeoutId);
+          resolve(result);
+        },
+        reject: (err) => {
+          clearTimeout(timeoutId);
+          reject(err);
+        },
+      });
+
+      this.ws.send(JSON.stringify(msg));
+    });
+  }
+
+  async getPages() {
+    const { targetInfos } = await this.send("Target.getTargets");
+    return targetInfos.filter((t) => t.type === "page");
+  }
+
+  async attachToPage(targetId) {
+    const { sessionId } = await this.send("Target.attachToTarget", {
+      targetId,
+      flatten: true,
+    });
+    return sessionId;
+  }
+
+  async evaluate(sessionId, expression, timeout = 30000) {
+    const result = await this.send(
+      "Runtime.evaluate",
+      {
+        expression,
+        returnByValue: true,
+        awaitPromise: true,
+      },
+      sessionId,
+      timeout
+    );
+
+    if (result.exceptionDetails) {
+      throw new Error(exceptionMessage(result));
+    }
+    return result.result?.value;
+  }
+
+  async evaluateRepl(sessionId, expression, timeout = 30000) {
+    const objectGroup = `agent-eval-${Date.now()}-${Math.random()}`;
+
+    try {
+      const result = await this.send(
+        "Runtime.evaluate",
+        {
+          expression,
+          objectGroup,
+          returnByValue: false,
+          replMode: true,
+        },
+        sessionId,
+        timeout
+      );
+
+      if (result.exceptionDetails) {
+        throw new Error(exceptionMessage(result));
+      }
+
+      let remoteObject = result.result;
+      if (remoteObject?.subtype === "promise" && remoteObject.objectId) {
+        const awaited = await this.send(
+          "Runtime.awaitPromise",
+          {
+            promiseObjectId: remoteObject.objectId,
+            returnByValue: true,
+          },
+          sessionId,
+          timeout
+        );
+
+        if (awaited.exceptionDetails) {
+          throw new Error(exceptionMessage(awaited));
+        }
+
+        remoteObject = awaited.result;
+      } else if (remoteObject?.objectId) {
+        const cloned = await this.send(
+          "Runtime.callFunctionOn",
+          {
+            objectId: remoteObject.objectId,
+            functionDeclaration: "function() { return this; }",
+            returnByValue: true,
+          },
+          sessionId,
+          timeout
+        );
+
+        if (cloned.exceptionDetails) {
+          throw new Error(exceptionMessage(cloned));
+        }
+
+        remoteObject = cloned.result;
+      }
+
+      return remoteObjectValue(remoteObject);
+    } finally {
+      await this.send(
+        "Runtime.releaseObjectGroup",
+        { objectGroup },
+        sessionId,
+        1000,
+      ).catch(() => {});
+    }
+  }
+
+  async screenshot(sessionId, timeout = 10000) {
+    const { data } = await this.send(
+      "Page.captureScreenshot",
+      { format: "png" },
+      sessionId,
+      timeout
+    );
+    return Buffer.from(data, "base64");
+  }
+
+  async navigate(sessionId, url, timeout = 30000) {
+    await this.send("Page.navigate", { url }, sessionId, timeout);
+  }
+
+  async getFrameTree(sessionId) {
+    const { frameTree } = await this.send("Page.getFrameTree", {}, sessionId);
+    return frameTree;
+  }
+
+  async evaluateInFrame(sessionId, frameId, expression, timeout = 30000) {
+    // Create isolated world for the frame
+    const { executionContextId } = await this.send(
+      "Page.createIsolatedWorld",
+      { frameId, worldName: "cdp-eval" },
+      sessionId
+    );
+
+    const result = await this.send(
+      "Runtime.evaluate",
+      {
+        expression,
+        contextId: executionContextId,
+        returnByValue: true,
+        awaitPromise: true,
+      },
+      sessionId,
+      timeout
+    );
+
+    if (result.exceptionDetails) {
+      throw new Error(exceptionMessage(result));
+    }
+    return result.result?.value;
+  }
+
+  close() {
+    this.ws.close();
+  }
+}

package/skills/web-browser/scripts/devices.js

@@ -0,0 +1,141 @@
+export const DEVICE_PRESETS = {
+  "iphone-se": {
+    title: "iPhone SE",
+    width: 375,
+    height: 667,
+    deviceScaleFactor: 2,
+    userAgent:
+      "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1",
+    platform: "iPhone",
+  },
+  "iphone-14": {
+    title: "iPhone 14",
+    width: 390,
+    height: 844,
+    deviceScaleFactor: 3,
+    userAgent:
+      "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1",
+    platform: "iPhone",
+  },
+  "pixel-7": {
+    title: "Pixel 7",
+    width: 412,
+    height: 915,
+    deviceScaleFactor: 2.625,
+    userAgent:
+      "Mozilla/5.0 (Linux; Android 14; Pixel 7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Mobile Safari/537.36",
+    platform: "Android",
+  },
+  "galaxy-s20": {
+    title: "Galaxy S20",
+    width: 360,
+    height: 800,
+    deviceScaleFactor: 3,
+    userAgent:
+      "Mozilla/5.0 (Linux; Android 13; SM-G981B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Mobile Safari/537.36",
+    platform: "Android",
+  },
+};
+
+export function listDevicePresets() {
+  return Object.entries(DEVICE_PRESETS).map(([id, preset]) => ({
+    id,
+    ...preset,
+  }));
+}
+
+export function resolveDevicePreset(name) {
+  if (!name) return null;
+  const normalized = String(name).toLowerCase();
+  const preset = DEVICE_PRESETS[normalized];
+  if (!preset) return null;
+  return { id: normalized, ...preset };
+}
+
+export async function applyDevicePreset(cdp, sessionId, preset, options = {}) {
+  const landscape = options.landscape === true;
+  const width = landscape ? preset.height : preset.width;
+  const height = landscape ? preset.width : preset.height;
+
+  await cdp.send(
+    "Emulation.setDeviceMetricsOverride",
+    {
+      width,
+      height,
+      deviceScaleFactor: preset.deviceScaleFactor,
+      mobile: true,
+      screenOrientation: landscape
+        ? { type: "landscapePrimary", angle: 90 }
+        : { type: "portraitPrimary", angle: 0 },
+    },
+    sessionId,
+  );
+
+  await cdp.send(
+    "Emulation.setTouchEmulationEnabled",
+    { enabled: true, maxTouchPoints: 5 },
+    sessionId,
+  );
+
+  try {
+    await cdp.send(
+      "Emulation.setEmitTouchEventsForMouse",
+      { enabled: true, configuration: "mobile" },
+      sessionId,
+    );
+  } catch {
+    // Optional on some protocol versions.
+  }
+
+  await cdp.send(
+    "Emulation.setUserAgentOverride",
+    {
+      userAgent: preset.userAgent,
+      platform: preset.platform,
+      acceptLanguage: "en-US,en",
+    },
+    sessionId,
+  );
+
+  return {
+    width,
+    height,
+    deviceScaleFactor: preset.deviceScaleFactor,
+    landscape,
+  };
+}
+
+export async function clearDeviceEmulation(cdp, sessionId) {
+  await cdp.send("Emulation.clearDeviceMetricsOverride", {}, sessionId);
+
+  try {
+    await cdp.send("Emulation.clearUserAgentOverride", {}, sessionId);
+  } catch {
+    // Fallback for older CDP versions.
+    try {
+      await cdp.send(
+        "Emulation.setUserAgentOverride",
+        { userAgent: "", platform: "" },
+        sessionId,
+      );
+    } catch {
+      // Ignore
+    }
+  }
+
+  await cdp.send(
+    "Emulation.setTouchEmulationEnabled",
+    { enabled: false },
+    sessionId,
+  );
+
+  try {
+    await cdp.send(
+      "Emulation.setEmitTouchEventsForMouse",
+      { enabled: false, configuration: "mobile" },
+      sessionId,
+    );
+  } catch {
+    // Optional on some protocol versions.
+  }
+}