gigaclaw 1.4.0

package/templates/skills/browser-tools/browser-nav.js

@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+
+import puppeteer from "puppeteer-core";
+
+const args = process.argv.slice(2);
+const newTab = args.includes("--new");
+const reload = args.includes("--reload");
+const url = args.find(a => !a.startsWith("--"));
+
+if (!url) {
+	console.log("Usage: browser-nav.js <url> [--new] [--reload]");
+	console.log("\nExamples:");
+	console.log("  browser-nav.js https://example.com          # Navigate current tab");
+	console.log("  browser-nav.js https://example.com --new    # Open in new tab");
+	console.log("  browser-nav.js https://example.com --reload # Navigate and force reload");
+	process.exit(1);
+}
+
+const b = await Promise.race([
+	puppeteer.connect({
+		browserURL: "http://localhost:9222",
+		defaultViewport: null,
+	}),
+	new Promise((_, reject) => setTimeout(() => reject(new Error("timeout")), 5000)),
+]).catch((e) => {
+	console.error("✗ Could not connect to browser:", e.message);
+	console.error("  Run: browser-start.js");
+	process.exit(1);
+});
+
+if (newTab) {
+	const p = await b.newPage();
+	await p.goto(url, { waitUntil: "domcontentloaded" });
+	console.log("✓ Opened:", url);
+} else {
+	const p = (await b.pages()).at(-1);
+	await p.goto(url, { waitUntil: "domcontentloaded" });
+	if (reload) {
+		await p.reload({ waitUntil: "domcontentloaded" });
+	}
+	console.log("✓ Navigated to:", url);
+}
+
+await b.disconnect();

package/templates/skills/browser-tools/browser-pick.js

@@ -0,0 +1,162 @@
+#!/usr/bin/env node
+
+import puppeteer from "puppeteer-core";
+
+const message = process.argv.slice(2).join(" ");
+if (!message) {
+	console.log("Usage: browser-pick.js 'message'");
+	console.log("\nExample:");
+	console.log('  browser-pick.js "Click the submit button"');
+	process.exit(1);
+}
+
+const b = await Promise.race([
+	puppeteer.connect({
+		browserURL: "http://localhost:9222",
+		defaultViewport: null,
+	}),
+	new Promise((_, reject) => setTimeout(() => reject(new Error("timeout")), 5000)),
+]).catch((e) => {
+	console.error("✗ Could not connect to browser:", e.message);
+	console.error("  Run: browser-start.js");
+	process.exit(1);
+});
+
+const p = (await b.pages()).at(-1);
+
+if (!p) {
+	console.error("✗ No active tab found");
+	process.exit(1);
+}
+
+// Inject pick() helper into current page
+await p.evaluate(() => {
+	if (!window.pick) {
+		window.pick = async (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);
+			});
+		};
+	}
+});
+
+const result = await p.evaluate((msg) => window.pick(msg), message);
+
+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);
+}
+
+await b.disconnect();

package/templates/skills/browser-tools/browser-screenshot.js

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import puppeteer from "puppeteer-core";
+
+const b = await Promise.race([
+	puppeteer.connect({
+		browserURL: "http://localhost:9222",
+		defaultViewport: null,
+	}),
+	new Promise((_, reject) => setTimeout(() => reject(new Error("timeout")), 5000)),
+]).catch((e) => {
+	console.error("✗ Could not connect to browser:", e.message);
+	console.error("  Run: browser-start.js");
+	process.exit(1);
+});
+
+const p = (await b.pages()).at(-1);
+
+if (!p) {
+	console.error("✗ No active tab found");
+	process.exit(1);
+}
+
+const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
+const filename = `screenshot-${timestamp}.png`;
+const filepath = join(tmpdir(), filename);
+
+await p.screenshot({ path: filepath });
+
+console.log(filepath);
+
+await b.disconnect();

package/templates/skills/browser-tools/browser-start.js

@@ -0,0 +1,87 @@
+#!/usr/bin/env node
+
+import { spawn, execSync } from "node:child_process";
+import puppeteer from "puppeteer";
+
+const useProfile = process.argv[2] === "--profile";
+
+if (process.argv[2] && process.argv[2] !== "--profile") {
+	console.log("Usage: browser-start.js [--profile]");
+	console.log("\nOptions:");
+	console.log("  --profile  Copy your default Chrome profile (cookies, logins)");
+	process.exit(1);
+}
+
+const SCRAPING_DIR = `${process.env.HOME}/.cache/browser-tools`;
+
+// Check if already running on :9222
+try {
+	const browser = await puppeteer.connect({
+		browserURL: "http://localhost:9222",
+		defaultViewport: null,
+	});
+	await browser.disconnect();
+	console.log("✓ Chrome already running on :9222");
+	process.exit(0);
+} catch {}
+
+// Setup profile directory
+execSync(`mkdir -p "${SCRAPING_DIR}"`, { stdio: "ignore" });
+
+// Remove SingletonLock to allow new instance
+try {
+	execSync(`rm -f "${SCRAPING_DIR}/SingletonLock" "${SCRAPING_DIR}/SingletonSocket" "${SCRAPING_DIR}/SingletonCookie"`, { stdio: "ignore" });
+} catch {}
+
+if (useProfile) {
+	console.log("Syncing profile...");
+	execSync(
+		`rsync -a --delete \
+			--exclude='SingletonLock' \
+			--exclude='SingletonSocket' \
+			--exclude='SingletonCookie' \
+			--exclude='*/Sessions/*' \
+			--exclude='*/Current Session' \
+			--exclude='*/Current Tabs' \
+			--exclude='*/Last Session' \
+			--exclude='*/Last Tabs' \
+			"${process.env.HOME}/Library/Application Support/Google/Chrome/" "${SCRAPING_DIR}/"`,
+		{ stdio: "pipe" },
+	);
+}
+
+// Start Chrome with flags to force new instance
+const chromePath = puppeteer.executablePath();
+spawn(
+	chromePath,
+	[
+		"--remote-debugging-port=9222",
+		`--user-data-dir=${SCRAPING_DIR}`,
+		"--no-first-run",
+		"--no-default-browser-check",
+	],
+	{ detached: true, stdio: "ignore" },
+).unref();
+
+// Wait for Chrome to be ready
+let connected = false;
+for (let i = 0; i < 30; i++) {
+	try {
+		const browser = await puppeteer.connect({
+			browserURL: "http://localhost:9222",
+			defaultViewport: null,
+		});
+		await browser.disconnect();
+		connected = true;
+		break;
+	} catch {
+		await new Promise((r) => setTimeout(r, 500));
+	}
+}
+
+if (!connected) {
+	console.error("✗ Failed to connect to Chrome");
+	process.exit(1);
+}
+
+console.log(`✓ Chrome started on :9222${useProfile ? " with your profile" : ""}`);