@maxiaochao/pi-toolkit 0.1.9 → 0.2.1

package/skills/web-browser/scripts/logs-tail.js

@@ -0,0 +1,69 @@
+#!/usr/bin/env node
+
+import { existsSync, readdirSync, readFileSync, statSync, watch } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+
+const LOG_ROOT = join(homedir(), ".cache/agent-web/logs");
+
+function findLatestFile() {
+  if (!existsSync(LOG_ROOT)) return null;
+  const dirs = readdirSync(LOG_ROOT)
+    .filter((name) => /^\d{4}-\d{2}-\d{2}$/.test(name))
+    .map((name) => join(LOG_ROOT, name))
+    .filter((path) => statSafe(path)?.isDirectory())
+    .sort();
+  if (dirs.length === 0) return null;
+  const latestDir = dirs[dirs.length - 1];
+  const files = readdirSync(latestDir)
+    .filter((name) => name.endsWith(".jsonl"))
+    .map((name) => join(latestDir, name))
+    .map((path) => ({ path, mtime: statSafe(path)?.mtimeMs || 0 }))
+    .sort((a, b) => b.mtime - a.mtime);
+  return files[0]?.path || null;
+}
+
+function statSafe(path) {
+  try {
+    return statSync(path);
+  } catch {
+    return null;
+  }
+}
+
+const argIndex = process.argv.indexOf("--file");
+const filePath = argIndex !== -1 ? process.argv[argIndex + 1] : findLatestFile();
+const follow = process.argv.includes("--follow");
+
+if (!filePath) {
+  console.error("✗ No log file found");
+  process.exit(1);
+}
+
+function readAll() {
+  if (!existsSync(filePath)) return;
+  const data = readFileSync(filePath, "utf8");
+  if (data.length > 0) process.stdout.write(data);
+}
+
+let offset = 0;
+
+function readNew() {
+  if (!existsSync(filePath)) return;
+  const data = readFileSync(filePath, "utf8");
+  if (data.length <= offset) return;
+  const chunk = data.slice(offset);
+  offset = data.length;
+  process.stdout.write(chunk);
+}
+
+try {
+  readAll();
+  if (!follow) process.exit(0);
+  offset = statSafe(filePath)?.size || 0;
+  watch(filePath, { persistent: true }, () => readNew());
+  console.log(`✓ tailing ${filePath}`);
+} catch (e) {
+  console.error("✗ tail failed:", e.message);
+  process.exit(1);
+}

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

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+
+import { connect } from "./cdp.js";
+import { applyActiveEmulation } from "./emulation-state.js";
+
+const DEBUG = process.env.DEBUG === "1";
+const log = DEBUG ? (...args) => console.error("[debug]", ...args) : () => {};
+
+const url = process.argv[2];
+const newTab = process.argv[3] === "--new";
+
+if (!url) {
+  console.log("Usage: nav.js <url> [--new]");
+  console.log("\nExamples:");
+  console.log("  nav.js https://example.com       # Navigate current tab");
+  console.log("  nav.js https://example.com --new # Open in new tab");
+  process.exit(1);
+}
+
+// Global timeout
+const globalTimeout = setTimeout(() => {
+  console.error("✗ Global timeout exceeded (45s)");
+  process.exit(1);
+}, 45000);
+
+try {
+  log("connecting...");
+  const cdp = await connect(5000);
+
+  log("getting pages...");
+  let targetId;
+
+  if (newTab) {
+    log("creating new tab...");
+    const { targetId: newTargetId } = await cdp.send("Target.createTarget", {
+      url: "about:blank",
+    });
+    targetId = newTargetId;
+  } else {
+    const pages = await cdp.getPages();
+    const page = pages.at(-1);
+    if (!page) {
+      console.error("✗ No active tab found");
+      process.exit(1);
+    }
+    targetId = page.targetId;
+  }
+
+  log("attaching to page...");
+  const sessionId = await cdp.attachToPage(targetId);
+
+  log("applying active emulation (if configured)...");
+  const activeEmulation = await applyActiveEmulation(cdp, sessionId);
+
+  log("navigating...");
+  await cdp.navigate(sessionId, url);
+
+  console.log(newTab ? "✓ Opened:" : "✓ Navigated to:", url);
+  if (activeEmulation) {
+    console.log(
+      `  emulation: ${activeEmulation.preset.id}${activeEmulation.landscape ? " (landscape)" : ""}`,
+    );
+  }
+
+  log("closing...");
+  cdp.close();
+  log("done");
+} catch (e) {
+  console.error("✗", e.message);
+  process.exit(1);
+} finally {
+  clearTimeout(globalTimeout);
+  setTimeout(() => process.exit(0), 100);
+}

package/skills/web-browser/scripts/net-summary.js

@@ -0,0 +1,94 @@
+#!/usr/bin/env node
+
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+
+const LOG_ROOT = join(homedir(), ".cache/agent-web/logs");
+
+function statSafe(path) {
+  try {
+    return statSync(path);
+  } catch {
+    return null;
+  }
+}
+
+function findLatestFile() {
+  if (!existsSync(LOG_ROOT)) return null;
+  const dirs = readdirSync(LOG_ROOT)
+    .filter((name) => /^\d{4}-\d{2}-\d{2}$/.test(name))
+    .map((name) => join(LOG_ROOT, name))
+    .filter((path) => statSafe(path)?.isDirectory())
+    .sort();
+  if (dirs.length === 0) return null;
+  const latestDir = dirs[dirs.length - 1];
+  const files = readdirSync(latestDir)
+    .filter((name) => name.endsWith(".jsonl"))
+    .map((name) => join(latestDir, name))
+    .map((path) => ({ path, mtime: statSafe(path)?.mtimeMs || 0 }))
+    .sort((a, b) => b.mtime - a.mtime);
+  return files[0]?.path || null;
+}
+
+const argIndex = process.argv.indexOf("--file");
+const filePath = argIndex !== -1 ? process.argv[argIndex + 1] : findLatestFile();
+
+if (!filePath) {
+  console.error("✗ No log file found");
+  process.exit(1);
+}
+
+const statusCounts = new Map();
+const failures = [];
+let totalResponses = 0;
+let totalRequests = 0;
+
+try {
+  const data = readFileSync(filePath, "utf8");
+  const lines = data.split("\n").filter(Boolean);
+  for (const line of lines) {
+    let entry;
+    try {
+      entry = JSON.parse(line);
+    } catch {
+      continue;
+    }
+    if (entry.type === "network.request") {
+      totalRequests += 1;
+    } else if (entry.type === "network.response") {
+      totalResponses += 1;
+      const status = String(entry.status ?? "unknown");
+      statusCounts.set(status, (statusCounts.get(status) || 0) + 1);
+    } else if (entry.type === "network.failure") {
+      failures.push({
+        requestId: entry.requestId,
+        errorText: entry.errorText,
+      });
+    }
+  }
+} catch (e) {
+  console.error("✗ summary failed:", e.message);
+  process.exit(1);
+}
+
+console.log(`file: ${filePath}`);
+console.log(`requests: ${totalRequests}`);
+console.log(`responses: ${totalResponses}`);
+
+const statuses = Array.from(statusCounts.entries()).sort(
+  (a, b) => Number(a[0]) - Number(b[0]),
+);
+for (const [status, count] of statuses) {
+  console.log(`status ${status}: ${count}`);
+}
+
+if (failures.length > 0) {
+  console.log("failures:");
+  for (const failure of failures.slice(0, 10)) {
+    console.log(`- ${failure.errorText || "unknown"} (${failure.requestId})`);
+  }
+  if (failures.length > 10) {
+    console.log(`- ... ${failures.length - 10} more`);
+  }
+}

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

@@ -0,0 +1,169 @@
+#!/usr/bin/env node
+
+import { connect } from "./cdp.js";
+import { applyActiveEmulation } from "./emulation-state.js";
+
+const DEBUG = process.env.DEBUG === "1";
+const log = DEBUG ? (...args) => console.error("[debug]", ...args) : () => {};
+
+const message = process.argv.slice(2).join(" ");
+if (!message) {
+  console.log("Usage: pick.js 'message'");
+  console.log("\nExample:");
+  console.log('  pick.js "Click the submit button"');
+  process.exit(1);
+}
+
+// Global timeout - 5 minutes for interactive picking
+const globalTimeout = setTimeout(() => {
+  console.error("✗ Global timeout exceeded (5m)");
+  process.exit(1);
+}, 300000);
+
+const PICK_SCRIPT = `(message) => {
+  if (!message) throw new Error("pick() requires a message parameter");
+  return new Promise((resolve) => {
+    const selections = [];
+    const selectedElements = new Set();
+
+    const overlay = document.createElement("div");
+    overlay.style.cssText = "position:fixed;top:0;left:0;width:100%;height:100%;z-index:2147483647;pointer-events:none";
+
+    const highlight = document.createElement("div");
+    highlight.style.cssText = "position:absolute;border:2px solid #3b82f6;background:rgba(59,130,246,0.1);transition:all 0.1s";
+    overlay.appendChild(highlight);
+
+    const banner = document.createElement("div");
+    banner.style.cssText = "position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1f2937;color:white;padding:12px 24px;border-radius:8px;font:14px sans-serif;box-shadow:0 4px 12px rgba(0,0,0,0.3);pointer-events:auto;z-index:2147483647";
+
+    const updateBanner = () => {
+      banner.textContent = message + " (" + selections.length + " selected, Cmd/Ctrl+click to add, Enter to finish, ESC to cancel)";
+    };
+    updateBanner();
+
+    document.body.append(banner, overlay);
+
+    const cleanup = () => {
+      document.removeEventListener("mousemove", onMove, true);
+      document.removeEventListener("click", onClick, true);
+      document.removeEventListener("keydown", onKey, true);
+      overlay.remove();
+      banner.remove();
+      selectedElements.forEach((el) => { el.style.outline = ""; });
+    };
+
+    const onMove = (e) => {
+      const el = document.elementFromPoint(e.clientX, e.clientY);
+      if (!el || overlay.contains(el) || banner.contains(el)) return;
+      const r = el.getBoundingClientRect();
+      highlight.style.cssText = "position:absolute;border:2px solid #3b82f6;background:rgba(59,130,246,0.1);top:" + r.top + "px;left:" + r.left + "px;width:" + r.width + "px;height:" + r.height + "px";
+    };
+
+    const buildElementInfo = (el) => {
+      const parents = [];
+      let current = el.parentElement;
+      while (current && current !== document.body) {
+        const parentInfo = current.tagName.toLowerCase();
+        const id = current.id ? "#" + current.id : "";
+        const cls = current.className ? "." + current.className.trim().split(/\\s+/).join(".") : "";
+        parents.push(parentInfo + id + cls);
+        current = current.parentElement;
+      }
+      return {
+        tag: el.tagName.toLowerCase(),
+        id: el.id || null,
+        class: el.className || null,
+        text: (el.textContent || "").trim().slice(0, 200) || null,
+        html: el.outerHTML.slice(0, 500),
+        parents: parents.join(" > "),
+      };
+    };
+
+    const onClick = (e) => {
+      if (banner.contains(e.target)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const el = document.elementFromPoint(e.clientX, e.clientY);
+      if (!el || overlay.contains(el) || banner.contains(el)) return;
+
+      if (e.metaKey || e.ctrlKey) {
+        if (!selectedElements.has(el)) {
+          selectedElements.add(el);
+          el.style.outline = "3px solid #10b981";
+          selections.push(buildElementInfo(el));
+          updateBanner();
+        }
+      } else {
+        cleanup();
+        const info = buildElementInfo(el);
+        resolve(selections.length > 0 ? selections : info);
+      }
+    };
+
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        cleanup();
+        resolve(null);
+      } else if (e.key === "Enter" && selections.length > 0) {
+        e.preventDefault();
+        cleanup();
+        resolve(selections);
+      }
+    };
+
+    document.addEventListener("mousemove", onMove, true);
+    document.addEventListener("click", onClick, true);
+    document.addEventListener("keydown", onKey, true);
+  });
+}`;
+
+try {
+  log("connecting...");
+  const cdp = await connect(5000);
+
+  log("getting pages...");
+  const pages = await cdp.getPages();
+  const page = pages.at(-1);
+
+  if (!page) {
+    console.error("✗ No active tab found");
+    process.exit(1);
+  }
+
+  log("attaching to page...");
+  const sessionId = await cdp.attachToPage(page.targetId);
+
+  log("applying active emulation (if configured)...");
+  await applyActiveEmulation(cdp, sessionId);
+
+  log("waiting for user pick...");
+  const expression = `(${PICK_SCRIPT})(${JSON.stringify(message)})`;
+  const result = await cdp.evaluate(sessionId, expression, 300000);
+
+  log("formatting result...");
+  if (Array.isArray(result)) {
+    for (let i = 0; i < result.length; i++) {
+      if (i > 0) console.log("");
+      for (const [key, value] of Object.entries(result[i])) {
+        console.log(`${key}: ${value}`);
+      }
+    }
+  } else if (typeof result === "object" && result !== null) {
+    for (const [key, value] of Object.entries(result)) {
+      console.log(`${key}: ${value}`);
+    }
+  } else {
+    console.log(result);
+  }
+
+  log("closing...");
+  cdp.close();
+  log("done");
+} catch (e) {
+  console.error("✗", e.message);
+  process.exit(1);
+} finally {
+  clearTimeout(globalTimeout);
+  setTimeout(() => process.exit(0), 100);
+}

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

@@ -0,0 +1,185 @@
+#!/usr/bin/env node
+
+import { writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { connect } from "./cdp.js";
+import {
+  applyDevicePreset,
+  clearDeviceEmulation,
+  listDevicePresets,
+  resolveDevicePreset,
+} from "./devices.js";
+import { applyActiveEmulation } from "./emulation-state.js";
+
+const DEBUG = process.env.DEBUG === "1";
+const log = DEBUG ? (...args) => console.error("[debug]", ...args) : () => {};
+
+function printUsage() {
+  console.log("Usage: screenshot.js [--full-page] [--device <preset>] [--landscape]");
+  console.log("\nExamples:");
+  console.log("  screenshot.js");
+  console.log("  screenshot.js --full-page");
+  console.log("  screenshot.js --device iphone-14");
+  console.log("  screenshot.js --device pixel-7 --full-page");
+}
+
+const args = process.argv.slice(2);
+let fullPage = false;
+let landscape = false;
+let deviceName = null;
+
+for (let i = 0; i < args.length; i++) {
+  const arg = args[i];
+
+  if (arg === "--full-page") {
+    fullPage = true;
+    continue;
+  }
+
+  if (arg === "--landscape") {
+    landscape = true;
+    continue;
+  }
+
+  if (arg === "--device") {
+    const value = args[i + 1];
+    if (!value || value.startsWith("--")) {
+      console.error("✗ --device requires a preset name");
+      printUsage();
+      process.exit(1);
+    }
+    deviceName = value;
+    i += 1;
+    continue;
+  }
+
+  if (arg === "--help") {
+    printUsage();
+    process.exit(0);
+  }
+
+  console.error(`✗ Unknown argument: ${arg}`);
+  printUsage();
+  process.exit(1);
+}
+
+const preset = deviceName ? resolveDevicePreset(deviceName) : null;
+if (landscape && !preset) {
+  console.error("✗ --landscape requires --device <preset>");
+  printUsage();
+  process.exit(1);
+}
+
+if (deviceName && !preset) {
+  console.error(`✗ Unknown device preset: ${deviceName}`);
+  console.error("  Available presets:");
+  for (const item of listDevicePresets()) {
+    console.error(`  - ${item.id}`);
+  }
+  process.exit(1);
+}
+
+// Global timeout
+const globalTimeout = setTimeout(() => {
+  console.error("✗ Global timeout exceeded (30s)");
+  process.exit(1);
+}, 30000);
+
+let cdp = null;
+
+try {
+  log("connecting...");
+  cdp = await connect(5000);
+
+  log("getting pages...");
+  const pages = await cdp.getPages();
+  const page = pages.at(-1);
+
+  if (!page) {
+    console.error("✗ No active tab found");
+    process.exit(1);
+  }
+
+  log("attaching to page...");
+  const sessionId = await cdp.attachToPage(page.targetId);
+
+  let temporaryEmulationApplied = false;
+
+  try {
+    if (preset) {
+      log("applying temporary device emulation...");
+      await applyDevicePreset(cdp, sessionId, preset, { landscape });
+      temporaryEmulationApplied = true;
+    } else {
+      log("applying active emulation (if configured)...");
+      await applyActiveEmulation(cdp, sessionId);
+    }
+
+    let params = { format: "png" };
+
+    if (fullPage) {
+      log("reading layout metrics...");
+      const metrics = await cdp.send("Page.getLayoutMetrics", {}, sessionId, 10000);
+      const contentSize = metrics.cssContentSize || metrics.contentSize;
+
+      if (!contentSize) {
+        throw new Error("Could not determine page size for full-page screenshot");
+      }
+
+      params = {
+        ...params,
+        fromSurface: true,
+        captureBeyondViewport: true,
+        clip: {
+          x: 0,
+          y: 0,
+          width: Math.max(1, Math.ceil(contentSize.width)),
+          height: Math.max(1, Math.ceil(contentSize.height)),
+          scale: 1,
+        },
+      };
+    }
+
+    log("taking screenshot...");
+    const { data } = await cdp.send(
+      "Page.captureScreenshot",
+      params,
+      sessionId,
+      fullPage ? 20000 : 10000,
+    );
+
+    const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
+    const filename = `screenshot-${timestamp}.png`;
+    const filepath = join(tmpdir(), filename);
+
+    writeFileSync(filepath, Buffer.from(data, "base64"));
+    console.log(filepath);
+  } finally {
+    if (temporaryEmulationApplied) {
+      try {
+        log("clearing temporary device emulation...");
+        await clearDeviceEmulation(cdp, sessionId);
+      } catch (e) {
+        log("failed to clear device emulation", e.message);
+      }
+    }
+  }
+
+  log("closing...");
+  cdp.close();
+  log("done");
+} catch (e) {
+  console.error("✗", e.message);
+  process.exit(1);
+} finally {
+  clearTimeout(globalTimeout);
+  if (cdp) {
+    try {
+      cdp.close();
+    } catch {
+      // ignore
+    }
+  }
+  setTimeout(() => process.exit(0), 100);
+}