@agent-native/creative-context 0.5.12 → 0.6.0

package/dist/connectors/rendered-page.js

@@ -1,4 +1,4 @@
-import { randomUUID } from "node:crypto";
+import { existsSync } from "node:fs";
 import { isBlockedExtensionUrlWithDns, ssrfSafeFetch, } from "@agent-native/core/extensions/url-safety";
 import { extractStaticWebsiteContext, rankColorSamples, readBoundedResponseBytes, } from "@agent-native/core/ingestion";
 import { normalizeWhitespace } from "./normalize.js";
@@ -12,75 +12,43 @@ const MAX_TYPOGRAPHY = 100;
 const MAX_SPACING = 100;
 const MAX_RADII = 64;
 const MAX_CSS_VARIABLES = 128;
+const MAX_COMPONENT_STYLES = 24;
+const FONT_READY_TIMEOUT_MS = 4_000;
+const BROWSER_NAVIGATION_DISABLED_WARNING = "Browser rendering is disabled until Chromium navigation has a connect-time SSRF guard.";
 export class LayeredRenderedPageProvider {
-    #requestBuilderBrowserConnection;
-    #loadPlaywright;
-    #requestAttachedBrowserConnection;
     #staticFetch;
     constructor(options = {}) {
-        this.#requestBuilderBrowserConnection =
-            options.requestBuilderBrowserConnection ?? defaultBuilderBrowserRequest;
-        this.#loadPlaywright = options.loadPlaywright ?? loadOptionalPlaywright;
-        this.#requestAttachedBrowserConnection =
-            options.requestAttachedBrowserConnection;
         this.#staticFetch = options.staticFetch ?? ssrfSafeFetch;
     }
     async render(request) {
         await assertPublicBrowserUrl(request.url);
-        const warnings = [];
-        const playwright = await this.#loadPlaywright().catch((error) => {
-            warnings.push(`Playwright unavailable: ${errorMessage(error)}`);
-            return null;
-        });
-        if (request.preferHosted !== false && playwright) {
-            try {
-                const connection = await this.#requestBuilderBrowserConnection({
-                    sessionId: `creative-context-${randomUUID()}`,
-                });
-                const wsUrl = stringValue(connection.wsUrl);
-                if (!wsUrl)
-                    throw new Error("Builder Browser did not return wsUrl.");
-                return await renderWithPlaywright(playwright, request, warnings, "builder-browser", wsUrl);
-            }
-            catch (error) {
-                warnings.push(`Builder Browser unavailable: ${errorMessage(error)}`);
-            }
-        }
-        if (playwright) {
-            try {
-                return await renderWithPlaywright(playwright, request, warnings, "local-playwright");
-            }
-            catch (error) {
-                warnings.push(`Local Playwright unavailable: ${errorMessage(error)}`);
-            }
-        }
-        if (playwright && this.#requestAttachedBrowserConnection) {
-            try {
-                const connection = await this.#requestAttachedBrowserConnection({
-                    sessionId: `creative-context-attached-${randomUUID()}`,
-                    url: request.url,
-                });
-                if (!connection.wsUrl?.trim()) {
-                    throw new Error("Approved attached browser did not return wsUrl.");
-                }
-                return await renderWithPlaywright(playwright, request, warnings, "attached-chrome", connection.wsUrl);
-            }
-            catch (error) {
-                warnings.push(`Attached Chrome unavailable: ${errorMessage(error)}`);
-            }
-        }
-        else {
-            warnings.push("Attached Chrome unavailable: no approved browser connection adapter is configured.");
-        }
-        return renderStatic(request, warnings, this.#staticFetch);
+        return renderStatic(request, [BROWSER_NAVIGATION_DISABLED_WARNING], this.#staticFetch);
     }
 }
-async function renderWithPlaywright(playwright, request, warnings, method, wsUrl) {
+/**
+ * Internal browser renderer retained for a future connect-time-guarded
+ * adapter. `LayeredRenderedPageProvider` must not call this for arbitrary
+ * caller URLs until Chromium's socket connection is guarded as well.
+ */
+export async function renderWithPlaywright(playwright, request, warnings, method, wsUrl) {
     const browser = wsUrl
         ? await playwright.chromium.connectOverCDP(wsUrl)
-        : await playwright.chromium.launch({ headless: true });
+        : await launchChromium(playwright.chromium);
+    let isolatedContext;
     try {
-        const context = browser.contexts()[0] ?? (await browser.newContext());
+        // A hosted CDP browser can already contain the user's other tabs. Prefer a
+        // fresh context so extraction never reads ambient browser state, cookies,
+        // or a page left behind by another workflow. Older browser adapters may not
+        // expose newContext, so retain the existing-context fallback.
+        try {
+            isolatedContext = await browser.newContext?.();
+        }
+        catch {
+            isolatedContext = undefined;
+        }
+        const context = isolatedContext ?? browser.contexts()[0];
+        if (!context)
+            throw new Error("Browser did not provide an isolated context.");
         const page = context.pages()[0] ?? (await context.newPage());
         await installNavigationGuard(page);
         await page.setViewportSize({ width: 1440, height: 900 });
@@ -88,27 +56,60 @@ async function renderWithPlaywright(playwright, request, warnings, method, wsUrl
             timeout: boundedTimeout(request.timeoutMs),
             waitUntil: request.waitUntil ?? "domcontentloaded",
         });
+        await page
+            .waitForLoadState?.("load", {
+            timeout: Math.min(8_000, boundedTimeout(request.timeoutMs)),
+        })
+            .catch((error) => {
+            warnings.push(`Browser load stabilization unavailable: ${errorMessage(error)}`);
+        });
+        // React hydration, CSS-in-JS insertion, and web fonts commonly finish just
+        // after `load`. Give those layers a bounded chance to settle, then capture
+        // the computed cascade rather than the server HTML.
+        await page
+            .waitForLoadState?.("networkidle", { timeout: 4_000 })
+            .catch((error) => {
+            warnings.push(`Browser network-idle stabilization unavailable: ${errorMessage(error)}`);
+        });
+        await waitForFontReadiness(page, Math.min(FONT_READY_TIMEOUT_MS, boundedTimeout(request.timeoutMs))).catch((error) => {
+            warnings.push(`Browser font readiness unavailable: ${errorMessage(error)}`);
+        });
+        await new Promise((resolve) => setTimeout(resolve, 150));
+        await page.evaluate(dismissConsentOverlays).catch(() => undefined);
         const finalUrl = page.url();
         await assertPublicBrowserUrl(finalUrl);
         const [title, text, desktopScreenshot, extraction] = await Promise.all([
-            page.title().catch(() => ""),
+            page.title().catch((error) => {
+                warnings.push(`Browser title extraction unavailable: ${errorMessage(error)}`);
+                return "";
+            }),
             page
                 .locator("body")
                 .innerText()
-                .catch(() => ""),
+                .catch((error) => {
+                warnings.push(`Browser text extraction unavailable: ${errorMessage(error)}`);
+                return "";
+            }),
             page
                 .screenshot({ type: "png", fullPage: false })
                 .then(boundedScreenshot)
-                .catch(() => undefined),
-            page
-                .evaluate(captureRenderedWebsiteContext)
-                .catch(() => emptyExtraction()),
+                .catch((error) => {
+                warnings.push(`Desktop screenshot unavailable: ${errorMessage(error)}`);
+                return undefined;
+            }),
+            page.evaluate(captureRenderedWebsiteContext).catch((error) => {
+                warnings.push(`Browser style extraction unavailable: ${errorMessage(error)}`);
+                return emptyExtraction();
+            }),
         ]);
         await page.setViewportSize({ width: 390, height: 844 });
         const mobileScreenshot = await page
             .screenshot({ type: "png", fullPage: false })
             .then(boundedScreenshot)
-            .catch(() => undefined);
+            .catch((error) => {
+            warnings.push(`Mobile screenshot unavailable: ${errorMessage(error)}`);
+            return undefined;
+        });
         const unboundedText = normalizeWhitespace(text);
         const textTruncated = unboundedText.length > MAX_RENDERED_TEXT_CHARS;
         const normalizedText = unboundedText.slice(0, MAX_RENDERED_TEXT_CHARS);
@@ -173,9 +174,32 @@ async function renderWithPlaywright(playwright, request, warnings, method, wsUrl
         };
     }
     finally {
+        await isolatedContext?.close?.().catch((error) => {
+            warnings.push(`Browser context cleanup unavailable: ${errorMessage(error)}`);
+        });
         await browser.close().catch(() => undefined);
     }
 }
+async function waitForFontReadiness(page, timeoutMs) {
+    let timeout;
+    try {
+        await Promise.race([
+            page.evaluate(async () => {
+                if (document.fonts?.ready)
+                    await document.fonts.ready;
+            }),
+            new Promise((_, reject) => {
+                timeout = setTimeout(() => {
+                    reject(new Error(`font readiness timed out after ${timeoutMs}ms`));
+                }, timeoutMs);
+            }),
+        ]);
+    }
+    finally {
+        if (timeout !== undefined)
+            clearTimeout(timeout);
+    }
+}
 async function installNavigationGuard(page) {
     await page.route("**/*", async (route) => {
         const request = route.request();
@@ -205,6 +229,69 @@ async function installNavigationGuard(page) {
         await route.continue();
     });
 }
+const SYSTEM_CHROME_EXECUTABLES = [
+    "/usr/bin/google-chrome-stable",
+    "/usr/bin/google-chrome",
+    "/usr/bin/chromium",
+    "/usr/bin/chromium-browser",
+];
+async function launchChromium(chromium) {
+    const launchOptions = {
+        headless: true,
+        args: ["--no-sandbox", "--disable-dev-shm-usage"],
+    };
+    try {
+        return await chromium.launch(launchOptions);
+    }
+    catch (error) {
+        if (!isMissingBrowserError(error))
+            throw error;
+        for (const executablePath of SYSTEM_CHROME_EXECUTABLES) {
+            if (!existsSync(executablePath))
+                continue;
+            try {
+                return await chromium.launch({ ...launchOptions, executablePath });
+            }
+            catch {
+                continue;
+            }
+        }
+        throw error;
+    }
+}
+function isMissingBrowserError(error) {
+    const message = error instanceof Error ? error.message : String(error);
+    return /Executable doesn't exist|playwright install|browser.*not found|chromium.*not found/i.test(message);
+}
+/** Close common consent banners without accepting tracking or changing page data. */
+function dismissConsentOverlays() {
+    const selectors = [
+        '[aria-label*="reject" i]',
+        '[aria-label*="decline" i]',
+        '[aria-label*="close" i]',
+        '[data-testid*="reject" i]',
+        '[data-testid*="decline" i]',
+        '[data-testid*="close" i]',
+        'button[id*="reject" i]',
+        'button[id*="decline" i]',
+        'button[class*="reject" i]',
+        'button[class*="decline" i]',
+    ];
+    for (const selector of selectors) {
+        const element = document.querySelector(selector);
+        if (!element)
+            continue;
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        if (rect.width > 0 &&
+            rect.height > 0 &&
+            style.visibility !== "hidden" &&
+            style.display !== "none") {
+            element.click();
+            return;
+        }
+    }
+}
 async function renderStatic(request, warnings, fetcher) {
     const response = await fetcher(request.url, {
         headers: {
@@ -264,22 +351,6 @@ async function assertPublicBrowserUrl(value) {
         throw new Error("SSRF blocked: website resolved to a private/internal host.");
     }
 }
-async function defaultBuilderBrowserRequest(input) {
-    const server = (await import("@agent-native/core/server"));
-    if (!server.requestBuilderBrowserConnection) {
-        throw new Error("@agent-native/core/server does not export requestBuilderBrowserConnection.");
-    }
-    return server.requestBuilderBrowserConnection(input);
-}
-async function loadOptionalPlaywright() {
-    const specifier = "playwright";
-    try {
-        return (await import(specifier));
-    }
-    catch {
-        return null;
-    }
-}
 function captureRenderedWebsiteContext() {
     const MAX_ASSETS = 500;
     const MAX_LINKS = 500;
@@ -287,15 +358,148 @@ function captureRenderedWebsiteContext() {
     const MAX_TYPE_STYLES = 100;
     const MAX_SPACING_VALUES = 100;
     const MAX_RADIUS_VALUES = 64;
+    const MAX_SHADOWS = 32;
+    const MAX_BACKGROUNDS = 32;
     const MAX_VARIABLES = 128;
     const MAX_TEXT = 2_000_000;
+    const MAX_COMPONENT_STYLES = 24;
     const assets = new Map();
     const links = new Set();
     const colors = [];
     const typography = new Map();
     const spacing = new Set();
     const radii = new Set();
+    const shadows = new Set();
+    const backgrounds = new Set();
+    const components = [];
     const cssVariables = {};
+    const semanticColors = {};
+    const isOpaque = (value) => {
+        const normalized = value.trim().toLowerCase();
+        if (!normalized || normalized === "transparent")
+            return false;
+        const functionBody = normalized.match(/^[a-z-]+\((.*)\)$/)?.[1];
+        if (!functionBody)
+            return true;
+        const alphaValue = functionBody.includes("/")
+            ? functionBody.split("/").at(-1)?.trim()
+            : functionBody.split(",").length === 4
+                ? functionBody.split(",").at(-1)?.trim()
+                : undefined;
+        if (!alphaValue)
+            return true;
+        const alpha = alphaValue.endsWith("%")
+            ? Number.parseFloat(alphaValue) / 100
+            : Number.parseFloat(alphaValue);
+        return Number.isNaN(alpha) || alpha > 0.02;
+    };
+    const addColor = (value) => {
+        if (colors.length >= MAX_COLOR_VALUES || !isOpaque(value))
+            return;
+        const normalized = value.trim();
+        if (!colors.includes(normalized))
+            colors.push(normalized);
+    };
+    const visible = (element) => {
+        const style = getComputedStyle(element);
+        const rect = element.getBoundingClientRect();
+        return (rect.width > 0 &&
+            rect.height > 0 &&
+            style.display !== "none" &&
+            style.visibility !== "hidden" &&
+            Number(style.opacity || 1) > 0.02);
+    };
+    const firstVisible = (selector) => Array.from(document.querySelectorAll(selector)).find(visible);
+    const opaqueValue = (value) => isOpaque(value) ? value.trim() : undefined;
+    const recordComputedStyle = (element, role) => {
+        const style = getComputedStyle(element);
+        const values = [
+            style.color,
+            style.backgroundColor,
+            style.borderTopColor,
+            style.borderRightColor,
+            style.borderBottomColor,
+            style.borderLeftColor,
+        ];
+        values.forEach(addColor);
+        if (style.boxShadow && style.boxShadow !== "none") {
+            if (shadows.size < MAX_SHADOWS)
+                shadows.add(style.boxShadow);
+        }
+        if (style.backgroundImage && style.backgroundImage !== "none") {
+            if (backgrounds.size < MAX_BACKGROUNDS) {
+                backgrounds.add(style.backgroundImage);
+            }
+        }
+        for (const value of [
+            style.marginTop,
+            style.marginRight,
+            style.marginBottom,
+            style.marginLeft,
+            style.paddingTop,
+            style.paddingRight,
+            style.paddingBottom,
+            style.paddingLeft,
+            style.gap,
+            style.rowGap,
+            style.columnGap,
+        ]) {
+            if (spacing.size < MAX_SPACING_VALUES &&
+                value &&
+                value !== "0px" &&
+                value !== "normal") {
+                spacing.add(value);
+            }
+        }
+        for (const value of [
+            style.borderTopLeftRadius,
+            style.borderTopRightRadius,
+            style.borderBottomRightRadius,
+            style.borderBottomLeftRadius,
+        ]) {
+            if (radii.size < MAX_RADIUS_VALUES && value && value !== "0px") {
+                radii.add(value);
+            }
+        }
+        const type = {
+            family: style.fontFamily,
+            size: style.fontSize,
+            weight: style.fontWeight,
+            lineHeight: style.lineHeight,
+            letterSpacing: style.letterSpacing,
+        };
+        if (typography.size < MAX_TYPE_STYLES && type.family) {
+            typography.set(JSON.stringify(type), type);
+        }
+        if (!role || components.length >= MAX_COMPONENT_STYLES)
+            return style;
+        components.push({
+            role,
+            fontFamily: style.fontFamily,
+            fontSize: style.fontSize,
+            fontWeight: style.fontWeight,
+            lineHeight: style.lineHeight,
+            letterSpacing: style.letterSpacing,
+            color: opaqueValue(style.color),
+            backgroundColor: opaqueValue(style.backgroundColor),
+            backgroundImage: style.backgroundImage !== "none" ? style.backgroundImage : undefined,
+            border: style.borderStyle !== "none" && style.borderWidth !== "0px"
+                ? style.border
+                : undefined,
+            borderRadius: style.borderTopLeftRadius !== "0px" ? style.borderRadius : undefined,
+            boxShadow: style.boxShadow !== "none" ? style.boxShadow : undefined,
+            padding: style.padding !== "0px" ? style.padding : undefined,
+            gap: style.gap !== "normal" ? style.gap : undefined,
+            textTransform: style.textTransform !== "none" ? style.textTransform : undefined,
+        });
+        return style;
+    };
+    const styleFor = (selector, role) => {
+        const element = firstVisible(selector);
+        if (!element)
+            return undefined;
+        return recordComputedStyle(element, role);
+    };
     const addAsset = (raw, kind, role) => {
         if (!raw || assets.size >= MAX_ASSETS)
             return;
@@ -374,52 +578,67 @@ function captureRenderedWebsiteContext() {
             }
         }
     }
-    const elements = Array.from(document.querySelectorAll("body *")).slice(0, 500);
+    const bodyStyle = document.body
+        ? recordComputedStyle(document.body)
+        : undefined;
+    const rootBackground = opaqueValue(rootStyle.backgroundColor);
+    const bodyBackground = bodyStyle
+        ? opaqueValue(bodyStyle.backgroundColor)
+        : undefined;
+    const headingStyle = styleFor("h1, h2, h3", "heading");
+    const textStyle = styleFor("p, li, label, body", "body");
+    const buttonStyle = styleFor('button, [role="button"], input[type="submit"], a[class*="button" i], a[class*="cta" i]', "button");
+    const linkStyle = styleFor("a[href]", "link");
+    const cardStyle = styleFor('article, [class*="card" i], [class*="panel" i], [class*="surface" i], section', "card");
+    styleFor("input, textarea, select", "input");
+    styleFor("nav, header", "nav");
+    styleFor('main, [class*="hero" i]', "hero");
+    const setSemantic = (role, value) => {
+        if (value)
+            semanticColors[role] = value;
+    };
+    setSemantic("background", bodyBackground ?? rootBackground);
+    setSemantic("surface", cardStyle ? opaqueValue(cardStyle.backgroundColor) : undefined);
+    setSemantic("text", textStyle ? opaqueValue(textStyle.color) : undefined);
+    const mutedElement = firstVisible("small, figcaption, [class*='muted' i]");
+    setSemantic("textMuted", mutedElement
+        ? opaqueValue(getComputedStyle(mutedElement).color)
+        : undefined);
+    setSemantic("accent", linkStyle
+        ? opaqueValue(linkStyle.color)
+        : buttonStyle
+            ? opaqueValue(buttonStyle.backgroundColor)
+            : undefined);
+    setSemantic("primary", buttonStyle
+        ? (opaqueValue(buttonStyle.backgroundColor) ??
+            opaqueValue(buttonStyle.color))
+        : colors[0]);
+    setSemantic("secondary", semanticColors.surface ?? colors[1] ?? semanticColors.background);
+    const layoutElement = firstVisible("main, [role='main'], body > div");
+    const layoutStyle = layoutElement
+        ? getComputedStyle(layoutElement)
+        : undefined;
+    const layoutRect = layoutElement?.getBoundingClientRect();
+    const layout = {
+        contentWidth: layoutStyle?.maxWidth && layoutStyle.maxWidth !== "none"
+            ? layoutStyle.maxWidth
+            : layoutRect && layoutRect.width > 0
+                ? `${Math.round(layoutRect.width)}px`
+                : undefined,
+        pagePadding: bodyStyle?.padding && bodyStyle.padding !== "0px"
+            ? bodyStyle.padding
+            : undefined,
+        sectionGap: firstVisible("section, article") &&
+            getComputedStyle(firstVisible("section, article")).gap !== "normal" &&
+            getComputedStyle(firstVisible("section, article")).gap !== "0px"
+            ? getComputedStyle(firstVisible("section, article")).gap
+            : undefined,
+    };
+    const elements = Array.from(document.querySelectorAll("body *"))
+        .filter(visible)
+        .slice(0, 700);
     for (const element of elements) {
-        const style = getComputedStyle(element);
-        if (colors.length < MAX_COLOR_VALUES) {
-            colors.push(style.color, style.backgroundColor, style.borderTopColor, style.borderRightColor, style.borderBottomColor, style.borderLeftColor);
-        }
-        const type = {
-            family: style.fontFamily,
-            size: style.fontSize,
-            weight: style.fontWeight,
-            lineHeight: style.lineHeight,
-            letterSpacing: style.letterSpacing,
-        };
-        if (typography.size < MAX_TYPE_STYLES) {
-            typography.set(JSON.stringify(type), type);
-        }
-        for (const value of [
-            style.marginTop,
-            style.marginRight,
-            style.marginBottom,
-            style.marginLeft,
-            style.paddingTop,
-            style.paddingRight,
-            style.paddingBottom,
-            style.paddingLeft,
-            style.gap,
-            style.rowGap,
-            style.columnGap,
-        ]) {
-            if (spacing.size < MAX_SPACING_VALUES &&
-                value &&
-                value !== "0px" &&
-                value !== "normal") {
-                spacing.add(value);
-            }
-        }
-        for (const value of [
-            style.borderTopLeftRadius,
-            style.borderTopRightRadius,
-            style.borderBottomRightRadius,
-            style.borderBottomLeftRadius,
-        ]) {
-            if (radii.size < MAX_RADIUS_VALUES && value && value !== "0px") {
-                radii.add(value);
-            }
-        }
+        recordComputedStyle(element);
     }
     return {
         title: document.title,
@@ -432,10 +651,21 @@ function captureRenderedWebsiteContext() {
             spacing: [...spacing],
             radii: [...radii],
             cssVariables,
+            semanticColors,
+            shadows: [...shadows],
+            backgrounds: [...backgrounds],
+            components,
+            layout,
         },
     };
 }
 export function boundWebsiteExtraction(extraction) {
+    const boundedComponents = extraction.designTokens.components
+        ?.slice(0, MAX_COMPONENT_STYLES)
+        .map((component) => Object.fromEntries(Object.entries(component).map(([key, value]) => [
+        key,
+        typeof value === "string" ? value.slice(0, 500) : value,
+    ])));
     return {
         title: normalizeWhitespace(extraction.title).slice(0, 500),
         text: normalizeWhitespace(extraction.text).slice(0, MAX_RENDERED_TEXT_CHARS),
@@ -454,6 +684,35 @@ export function boundWebsiteExtraction(extraction) {
             cssVariables: Object.fromEntries(Object.entries(extraction.designTokens.cssVariables)
                 .slice(0, MAX_CSS_VARIABLES)
                 .map(([name, value]) => [name.slice(0, 500), value.slice(0, 4_096)])),
+            ...(extraction.designTokens.semanticColors
+                ? {
+                    semanticColors: Object.fromEntries(Object.entries(extraction.designTokens.semanticColors)
+                        .filter(([, value]) => typeof value === "string" && value)
+                        .map(([name, value]) => [name, value.slice(0, 200)])),
+                }
+                : {}),
+            ...(extraction.designTokens.shadows
+                ? {
+                    shadows: extraction.designTokens.shadows
+                        .slice(0, 32)
+                        .map((value) => value.slice(0, 500)),
+                }
+                : {}),
+            ...(extraction.designTokens.backgrounds
+                ? {
+                    backgrounds: extraction.designTokens.backgrounds
+                        .slice(0, 32)
+                        .map((value) => value.slice(0, 500)),
+                }
+                : {}),
+            ...(boundedComponents ? { components: boundedComponents } : {}),
+            ...(extraction.designTokens.layout
+                ? {
+                    layout: Object.fromEntries(Object.entries(extraction.designTokens.layout)
+                        .filter(([, value]) => typeof value === "string" && value)
+                        .map(([name, value]) => [name, value.slice(0, 200)])),
+                }
+                : {}),
         },
     };
 }
@@ -495,9 +754,6 @@ function boundedTimeout(value) {
 function boundedScreenshot(value) {
     return value.byteLength <= MAX_SCREENSHOT_BYTES ? value : undefined;
 }
-function stringValue(value) {
-    return typeof value === "string" && value.trim() ? value.trim() : undefined;
-}
 function errorMessage(error) {
     return error instanceof Error ? error.message : String(error);
 }