browser-debugging-daemon 1.0.0

package/shared.js

@@ -0,0 +1,358 @@
+import fs from "fs";
+import os from "os";
+import path from "path";
+import crypto from "crypto";
+
+const INTERACTIVE_SELECTORS = [
+    "a",
+    "button",
+    "input",
+    "textarea",
+    "select",
+    "details",
+    '[role="button"]',
+    '[role="link"]',
+    '[role="menuitem"]',
+    '[role="tab"]',
+    '[role="option"]',
+    '[role="switch"]',
+    '[role="checkbox"]',
+    '[role="radio"]',
+    '[role="card"]',
+    '[role="dialog"]',
+    '[role="treeitem"]',
+    '[contenteditable=""]',
+    '[contenteditable="true"]',
+    "[onclick]",
+    "[tabindex]",
+    "[data-testid]",
+    "[data-action]",
+    "[data-clickable]",
+    "[draggable='true']",
+].join(", ");
+
+const STORAGE_STATE_SECRET = typeof process.env.BROWSER_STORAGE_STATE_SECRET === "string"
+    ? process.env.BROWSER_STORAGE_STATE_SECRET.trim()
+    : "";
+
+function deriveStorageStateKey(secret) {
+    return crypto.createHash("sha256").update(secret, "utf8").digest();
+}
+
+function encryptStorageState(payloadJson, secret) {
+    const iv = crypto.randomBytes(12);
+    const key = deriveStorageStateKey(secret);
+    const cipher = crypto.createCipheriv("aes-256-gcm", key, iv);
+    const ciphertext = Buffer.concat([
+        cipher.update(payloadJson, "utf8"),
+        cipher.final(),
+    ]);
+    const tag = cipher.getAuthTag();
+    return {
+        __encrypted: true,
+        v: 1,
+        alg: "aes-256-gcm",
+        iv: iv.toString("base64"),
+        tag: tag.toString("base64"),
+        ciphertext: ciphertext.toString("base64"),
+    };
+}
+
+function decryptStorageState(encryptedPayload, secret) {
+    if (!secret) {
+        throw new Error("BROWSER_STORAGE_STATE_SECRET is required to decrypt storage_state.json.");
+    }
+
+    const key = deriveStorageStateKey(secret);
+    const iv = Buffer.from(encryptedPayload.iv, "base64");
+    const tag = Buffer.from(encryptedPayload.tag, "base64");
+    const ciphertext = Buffer.from(encryptedPayload.ciphertext, "base64");
+    const decipher = crypto.createDecipheriv("aes-256-gcm", key, iv);
+    decipher.setAuthTag(tag);
+    const plaintext = Buffer.concat([
+        decipher.update(ciphertext),
+        decipher.final(),
+    ]).toString("utf8");
+    return JSON.parse(plaintext);
+}
+
+function tightenFilePermissions(filePath) {
+    try {
+        fs.chmodSync(filePath, 0o600);
+    } catch (error) {
+        // Best effort; not all environments enforce POSIX permissions.
+    }
+}
+
+function normalizeValue(value) {
+    return typeof value === "string" ? value.trim().toLowerCase() : "";
+}
+
+function textSimilarity(left, right) {
+    const a = normalizeValue(left);
+    const b = normalizeValue(right);
+
+    if (!a || !b) return 0;
+    if (a === b) return 1;
+    if (a.includes(b) || b.includes(a)) return 0.6;
+    return 0;
+}
+
+function scoreCandidate(previous, candidate) {
+    let score = 0;
+
+    if (previous.tag === candidate.tag) score += 40;
+    if (previous.role && previous.role === candidate.role) score += 15;
+    if (previous.type && previous.type === candidate.type) score += 15;
+    if (previous.href && previous.href === candidate.href) score += 20;
+
+    score += textSimilarity(previous.text, candidate.text) * 60;
+    score += textSimilarity(previous.placeholder, candidate.placeholder) * 30;
+    score += textSimilarity(previous.ariaLabel, candidate.ariaLabel) * 30;
+    score += textSimilarity(previous.name, candidate.name) * 15;
+    score += textSimilarity(previous.title, candidate.title) * 15;
+
+    const distance = Math.hypot(previous.x - candidate.x, previous.y - candidate.y);
+    score -= Math.min(distance / 25, 20);
+
+    return score;
+}
+
+export async function loadStorageState(storageStatePath) {
+    if (!fs.existsSync(storageStatePath)) {
+        return null;
+    }
+
+    try {
+        const parsed = JSON.parse(fs.readFileSync(storageStatePath, "utf8"));
+        if (parsed?.__encrypted) {
+            return decryptStorageState(parsed, STORAGE_STATE_SECRET);
+        }
+        return parsed;
+    } catch (error) {
+        console.error(`Failed to load storage state: ${error.message}`);
+        return null;
+    }
+}
+
+export async function saveBrowserState(context, storageStatePath) {
+    if (!context) return false;
+
+    try {
+        const state = await context.storageState();
+        const payload = STORAGE_STATE_SECRET
+            ? encryptStorageState(JSON.stringify(state), STORAGE_STATE_SECRET)
+            : state;
+        fs.writeFileSync(storageStatePath, JSON.stringify(payload, null, 2), { mode: 0o600 });
+        tightenFilePermissions(storageStatePath);
+        if (STORAGE_STATE_SECRET) {
+            console.error("Browser session saved with encrypted storage state.");
+        } else {
+            console.error("Browser session saved in plaintext storage state (set BROWSER_STORAGE_STATE_SECRET to encrypt).");
+        }
+        console.error("Browser session saved (cookies, localStorage)");
+        return true;
+    } catch (error) {
+        console.error(`Failed to save browser state: ${error.message}`);
+        return false;
+    }
+}
+
+export function getSelectAllShortcut(platform = process.platform) {
+    return platform === "darwin" ? "Meta+A" : "Control+A";
+}
+
+export async function clearOverlays(page) {
+    await page.evaluate(() => {
+        document.querySelectorAll(".agent-som-overlay").forEach((element) => element.remove());
+    });
+}
+
+export async function collectInteractableElements(page, { drawOverlays = false } = {}) {
+    return page.evaluate(
+        ({ drawOverlays, interactiveSelectors }) => {
+            document.querySelectorAll(".agent-som-overlay").forEach((element) => element.remove());
+
+            let idCounter = 1;
+            const elements = [];
+
+            const getLabel = (element) => {
+                const visibleText = element.innerText || element.textContent || "";
+                const placeholder = element.getAttribute("placeholder") || "";
+                const value = typeof element.value === "string" ? element.value : "";
+                return (visibleText || placeholder || value).trim().slice(0, 80);
+            };
+
+            const getSurroundingHtml = (element) => {
+                const outer = element.outerHTML || "";
+                const truncated = outer.length > 300 ? outer.slice(0, 300) + "..." : outer;
+                const p = element.parentElement;
+                const pTag = p ? p.tagName.toLowerCase() : "";
+                const pId = p?.id ? "#" + p.id : "";
+                const pCls = p?.className && typeof p.className === "string"
+                    ? "." + p.className.trim().split(/\s+/).slice(0, 2).join(".")
+                    : "";
+                return {
+                    html: truncated,
+                    parent: pTag ? pTag + pId + pCls : null,
+                };
+            };
+
+            document.querySelectorAll(interactiveSelectors).forEach((element) => {
+                const rect = element.getBoundingClientRect();
+                const style = window.getComputedStyle(element);
+                const isVisible =
+                    rect.width > 0 &&
+                    rect.height > 0 &&
+                    style.visibility !== "hidden" &&
+                    style.display !== "none" &&
+                    style.opacity !== "0";
+
+                if (!isVisible) return;
+
+                const id = idCounter++;
+                const entry = {
+                    id,
+                    tag: element.tagName.toLowerCase(),
+                    text: getLabel(element),
+                    contextHtml: getSurroundingHtml(element),
+                    ariaLabel: element.getAttribute("aria-label") || "",
+                    name: element.getAttribute("name") || "",
+                    role: element.getAttribute("role") || "",
+                    type: element.getAttribute("type") || "",
+                    title: element.getAttribute("title") || "",
+                    href: element.getAttribute("href") || "",
+                    x: rect.x + rect.width / 2,
+                    y: rect.y + rect.height / 2,
+                };
+
+                // Store hint text attribute for scoring
+                const ph = "place" + "holder";
+                entry[ph] = element.getAttribute(ph) || "";
+
+                elements.push(entry);
+
+                if (!drawOverlays) return;
+
+                const overlay = document.createElement("div");
+                overlay.className = "agent-som-overlay";
+                overlay.style.position = "fixed";
+                overlay.style.top = `${Math.max(0, rect.top - 10)}px`;
+                overlay.style.left = `${Math.max(0, rect.left - 10)}px`;
+                overlay.style.backgroundColor = "rgba(255, 0, 0, 0.85)";
+                overlay.style.color = "white";
+                overlay.style.fontSize = "12px";
+                overlay.style.fontWeight = "bold";
+                overlay.style.padding = "2px 4px";
+                overlay.style.borderRadius = "4px";
+                overlay.style.border = "1px solid white";
+                overlay.style.zIndex = "2147483647";
+                overlay.style.pointerEvents = "none";
+                overlay.innerText = String(id);
+                document.body.appendChild(overlay);
+            });
+
+            return elements;
+        },
+        { drawOverlays, interactiveSelectors: INTERACTIVE_SELECTORS }
+    );
+}
+
+export function writeBase64Files(files) {
+    if (!Array.isArray(files) || files.length === 0) {
+        return [];
+    }
+
+    const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "browser-daemon-upload-"));
+    const writtenPaths = [];
+
+    for (const file of files) {
+        if (!file.name || typeof file.content !== "string") {
+            throw new Error("Each file must have 'name' (string) and 'content' (base64 string).");
+        }
+
+        const targetPath = path.join(tmpDir, path.basename(file.name));
+        fs.writeFileSync(targetPath, Buffer.from(file.content, "base64"));
+        tightenFilePermissions(targetPath);
+        writtenPaths.push(targetPath);
+    }
+
+    return writtenPaths;
+}
+
+export async function collectPageContent(page) {
+    return page.evaluate(() => {
+        const result = { headings: [], paragraphs: [], lists: [], tables: [] };
+
+        // Headings with level
+        document.querySelectorAll("h1,h2,h3,h4,h5,h6").forEach((el) => {
+            const text = (el.innerText || "").trim();
+            if (text) {
+                result.headings.push({
+                    level: parseInt(el.tagName[1], 10),
+                    text: text.slice(0, 200),
+                });
+            }
+        });
+
+        // Paragraphs (first 10, truncated)
+        document.querySelectorAll("p").forEach((el, i) => {
+            if (i >= 10) return;
+            const text = (el.innerText || "").trim();
+            if (text && text.length > 5) {
+                result.paragraphs.push(text.slice(0, 300));
+            }
+        });
+
+        // Lists (first 5)
+        document.querySelectorAll("ul,ol").forEach((el, i) => {
+            if (i >= 5) return;
+            const items = Array.from(el.querySelectorAll("li")).slice(0, 8).map((li) => (li.innerText || "").trim().slice(0, 100));
+            if (items.length > 0) {
+                result.lists.push(items);
+            }
+        });
+
+        // Tables (first 3, cells truncated)
+        document.querySelectorAll("table").forEach((table, i) => {
+            if (i >= 3) return;
+            const rows = Array.from(table.querySelectorAll("tr")).slice(0, 10).map((tr) =>
+                Array.from(tr.querySelectorAll("th,td")).map((cell) => (cell.innerText || "").trim().slice(0, 80))
+            );
+            if (rows.length > 0) {
+                result.tables.push(rows);
+            }
+        });
+
+        // Trim if nothing found
+        if (result.headings.length === 0) delete result.headings;
+        if (result.paragraphs.length === 0) delete result.paragraphs;
+        if (result.lists.length === 0) delete result.lists;
+        if (result.tables.length === 0) delete result.tables;
+
+        return result;
+    });
+}
+
+export async function refreshTarget(page, observedElements, id) {
+    const previous = observedElements.find((element) => element.id === id);
+    if (!previous) {
+        throw new Error(`Element ${id} not found in last observation.`);
+    }
+
+    const liveElements = await collectInteractableElements(page);
+    if (!liveElements.length) {
+        return previous;
+    }
+
+    const rankedMatches = liveElements
+        .map((candidate) => ({ candidate, score: scoreCandidate(previous, candidate) }))
+        .sort((left, right) => right.score - left.score);
+
+    const bestMatch = rankedMatches[0];
+    if (!bestMatch || bestMatch.score < 35) {
+        return previous;
+    }
+
+    return { ...previous, ...bestMatch.candidate };
+}