npm - launchframe - Versions diffs - 0.4.10 → 0.4.12 - Mend

launchframe 0.4.10 → 0.4.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/scripts/page-inspection-dump.mjs ADDED Viewed

@@ -0,0 +1,418 @@
+#!/usr/bin/env node
+/**
+ * Capture a live page into files you can attach for an AI agent:
+ * — Full serialized HTML after JavaScript runs (like "Copy ▸ outerHTML" on <html>)
+ * — Every CSS response the browser loads (plus all inline <style> blocks)
+ * — Motion digest: @keyframes blocks, animation* / transition* declarations
+ *
+ * Prerequisite (once per machine / after npm install):
+ *   npx playwright install chromium
+ *
+ * Usage:
+ *   node scripts/page-inspection-dump.mjs https://example.com
+ *   node scripts/page-inspection-dump.mjs https://example.com --out ./my-capture
+ *   node scripts/page-inspection-dump.mjs https://example.com --out-parent docs/research/example.com/page-inspection --scroll-full
+ *   node scripts/page-inspection-dump.mjs https://example.com --viewport 390,844 --scroll-full
+ *
+ * Options:
+ *   --out <dir>              Exact output directory (default: docs/research/page-captures/<host>-<stamp>)
+ *   --out-parent <dir>       Parent dir; writes <host>-<iso-stamp>/ inside it (--out wins if both set)
+ *   --viewport <W>,<H>      Browser viewport (default: 1440,900)
+ *   --wait-until <mode>     load | domcontentloaded | networkidle (default: networkidle)
+ *   --timeout <ms>          Navigation timeout (default: 90000)
+ *   --scroll-full           Scroll to the bottom slowly to trigger lazy-loaded regions
+ *   --no-css-files          Skip writing individual .css files (still builds motion from inline + collected text)
+ *   --no-ai-bundle          Skip ai-page-bundle.txt (HTML + all CSS in one .txt for LLM attach)
+ */
+import { chromium } from "playwright";
+import { mkdir, writeFile } from "node:fs/promises";
+import { createHash } from "node:crypto";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+function parseArgs(argv) {
+  const positional = [];
+  const flags = new Set();
+  /** @type {Record<string, string>} */
+  const opts = {};
+  for (let i = 2; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "--") continue;
+    if (a.startsWith("--")) {
+      const key = a.slice(2);
+      if (
+        key === "scroll-full" ||
+        key === "no-css-files" ||
+        key === "no-ai-bundle"
+      ) {
+        flags.add(key);
+        continue;
+      }
+      const next = argv[i + 1];
+      if (!next || next.startsWith("--")) {
+        console.error(`Missing value for --${key}`);
+        process.exit(1);
+      }
+      opts[key] = next;
+      i++;
+      continue;
+    }
+    positional.push(a);
+  }
+  return { positional, flags, opts };
+}
+function sanitizeFilenamePart(s) {
+  return s.replace(/[^a-zA-Z0-9._-]+/g, "_").slice(0, 120);
+}
+/**
+ * @param {string} css
+ * @returns {{ name: string, block: string }[]}
+ */
+function extractKeyframeBlocks(css) {
+  const out = [];
+  const re = /@keyframes\s+([^/{[\s]+)\s*\{/gi;
+  let m;
+  while ((m = re.exec(css)) !== null) {
+    const name = m[1].trim();
+    const openIdx = m.index + m[0].length - 1;
+    if (css[openIdx] !== "{") continue;
+    let depth = 0;
+    for (let i = openIdx; i < css.length; i++) {
+      const c = css[i];
+      if (c === "{") depth++;
+      else if (c === "}") {
+        depth--;
+        if (depth === 0) {
+          out.push({
+            name,
+            block: css.slice(m.index, i + 1).trim(),
+          });
+          break;
+        }
+      }
+    }
+  }
+  return out;
+}
+/**
+ * @param {string} css
+ * @returns {string[]}
+ */
+function extractMotionLines(css) {
+  const lines = css.split(/\r?\n/);
+  const hits = [];
+  for (const line of lines) {
+    const t = line.trim();
+    if (!t || t.startsWith("/*")) continue;
+    const lower = t.toLowerCase();
+    if (
+      lower.includes("animation:") ||
+      lower.includes("animation-name:") ||
+      lower.includes("animation-duration:") ||
+      lower.includes("animation-timing-function:") ||
+      lower.includes("animation-delay:") ||
+      lower.includes("animation-iteration-count:") ||
+      lower.includes("animation-direction:") ||
+      lower.includes("animation-fill-mode:") ||
+      lower.includes("animation-play-state:") ||
+      lower.includes("transition:") ||
+      lower.includes("transition-property:") ||
+      lower.includes("transition-duration:") ||
+      lower.includes("transition-timing-function:") ||
+      lower.includes("transition-delay:") ||
+      lower.includes("will-change:") ||
+      lower.includes("transform:") ||
+      lower.includes("@keyframes")
+    ) {
+      hits.push(t);
+    }
+  }
+  return hits;
+}
+/**
+ * @param {import('playwright').Page} page
+ */
+async function scrollFullPage(page) {
+  await page.evaluate(async () => {
+    const delay = (ms) => new Promise((r) => setTimeout(r, ms));
+    const step = Math.max(240, Math.floor(window.innerHeight * 0.85));
+    const max = Math.max(
+      document.documentElement.scrollHeight,
+      document.body?.scrollHeight ?? 0,
+    );
+    for (let y = 0; y < max; y += step) {
+      window.scrollTo(0, y);
+      await delay(120);
+    }
+    window.scrollTo(0, 0);
+    await delay(200);
+  });
+}
+async function runCapture() {
+  const { positional, flags, opts } = parseArgs(process.argv);
+  const urlRaw = positional[0];
+  if (!urlRaw) {
+    console.error(`Usage: node scripts/page-inspection-dump.mjs <url> [options]`);
+    process.exit(1);
+  }
+  let url;
+  try {
+    url = new URL(urlRaw).toString();
+  } catch {
+    console.error(`Invalid URL: ${urlRaw}`);
+    process.exit(1);
+  }
+  const viewportParts = (opts.viewport ?? "1440,900").split(",").map((s) => s.trim());
+  const vw = Number(viewportParts[0]) || 1440;
+  const vh = Number(viewportParts[1] ?? viewportParts[0]) || 900;
+  const waitUntil = opts["wait-until"] ?? "networkidle";
+  if (!["load", "domcontentloaded", "networkidle", "commit"].includes(waitUntil)) {
+    console.error(`Invalid --wait-until: ${waitUntil}`);
+    process.exit(1);
+  }
+  const navigationTimeout = Number(opts.timeout ?? "90000");
+  const host = new URL(url).hostname || "page";
+  const stamp = new Date().toISOString().replace(/[:.]/g, "-");
+  const defaultOut = join(
+    __dirname,
+    "..",
+    "docs",
+    "research",
+    "page-captures",
+    `${sanitizeFilenamePart(host)}-${stamp}`,
+  );
+  let outDir;
+  if (opts.out) {
+    outDir = resolve(process.cwd(), opts.out);
+  } else if (opts["out-parent"]) {
+    outDir = join(
+      resolve(process.cwd(), opts["out-parent"]),
+      `${sanitizeFilenamePart(host)}-${stamp}`,
+    );
+  } else {
+    outDir = defaultOut;
+  }
+  await mkdir(outDir, { recursive: true });
+  /** @type {{ url: string; bytes: number; text: string }[]} */
+  const cssBodies = [];
+  const browser = await chromium.launch({ headless: true });
+  try {
+    const context = await browser.newContext({
+      viewport: { width: vw, height: vh },
+      userAgent:
+        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 LaunchFramePageDump/1",
+    });
+    const page = await context.newPage();
+    page.on("response", async (response) => {
+      try {
+        const ct = (response.headers()["content-type"] ?? "").toLowerCase();
+        const rt = response.request().resourceType();
+        if (rt !== "stylesheet" && !ct.includes("text/css")) return;
+        const buf = await response.body();
+        const text = buf.toString("utf8");
+        cssBodies.push({ url: response.url(), bytes: buf.byteLength, text });
+      } catch {
+        // ignore
+      }
+    });
+    await page.goto(url, {
+      waitUntil: /** @type {'load'} */ (waitUntil),
+      timeout: navigationTimeout,
+    });
+    if (flags.has("scroll-full")) {
+      await scrollFullPage(page);
+    }
+    const [fullHtml, bodyOuter, inlineStyles, scriptInventory] = await page.evaluate(() => {
+      const styles = Array.from(document.querySelectorAll("style")).map((el, i) => ({
+        index: i,
+        media: el.getAttribute("media") ?? "",
+        text: el.textContent ?? "",
+      }));
+      const scripts = Array.from(document.querySelectorAll("script")).map((el, i) => ({
+        index: i,
+        src: el.getAttribute("src") ?? "",
+        type: el.getAttribute("type") ?? "",
+        async: el.hasAttribute("async"),
+        defer: el.hasAttribute("defer"),
+        inlineChars: (el.textContent ?? "").length,
+      }));
+      return [
+        document.documentElement.outerHTML,
+        document.body ? document.body.outerHTML : "",
+        styles,
+        scripts,
+      ];
+    });
+    await writeFile(join(outDir, "document.html"), fullHtml, "utf8");
+    if (bodyOuter) {
+      await writeFile(join(outDir, "body-outer.html"), bodyOuter, "utf8");
+    }
+    await writeFile(
+      join(outDir, "inline-styles.json"),
+      JSON.stringify(inlineStyles, null, 2),
+      "utf8",
+    );
+    if (!flags.has("no-css-files")) {
+      for (let i = 0; i < cssBodies.length; i++) {
+        const { url: cssUrl, text } = cssBodies[i];
+        const hash = createHash("sha256").update(text).digest("hex").slice(0, 12);
+        let base = "stylesheet";
+        try {
+          const u = new URL(cssUrl);
+          base = sanitizeFilenamePart(
+            (u.pathname.split("/").filter(Boolean).pop() || "stylesheet").replace(/\.css$/i, ""),
+          );
+        } catch {
+          base = "stylesheet";
+        }
+        const filename = `${String(i + 1).padStart(3, "0")}-${base}-${hash}.css`;
+        await writeFile(join(outDir, filename), text, "utf8");
+      }
+    }
+    const inlineCssText = inlineStyles
+      .map((s) => `/* inline style #${s.index} media=${s.media || "all"} */\n${s.text}`)
+      .join("\n\n");
+    const aggregatedCss = [
+      inlineCssText,
+      ...cssBodies.map((c) => `/* network stylesheet: ${c.url} */\n${c.text}`),
+    ].join("\n\n");
+    let aiBundleBytes = 0;
+    if (!flags.has("no-ai-bundle")) {
+      const banner = (title) =>
+        `\n${"=".repeat(80)}\n${title}\n${"=".repeat(80)}\n\n`;
+      const bundle = [
+        banner("LAUNCHFRAME AI PAGE BUNDLE"),
+        `Source URL: ${url}\n`,
+        `Generated: ${new Date().toISOString()}\n`,
+        `Viewport: ${vw}x${vh}\n`,
+        `Wait until: ${waitUntil}\n\n`,
+        "Single plain-text file: POST-JS HTML plus all captured CSS (inline + network).\n",
+        "Use document.html / *.css separately if you hit tool context limits.\n",
+        banner("PART 1 — HTML (document.documentElement.outerHTML)"),
+        fullHtml,
+        banner("PART 2 — CSS (inline <style> tags, then network stylesheets)"),
+        aggregatedCss,
+        banner("END OF BUNDLE"),
+      ].join("");
+      await writeFile(join(outDir, "ai-page-bundle.txt"), bundle, "utf8");
+      aiBundleBytes = Buffer.byteLength(bundle, "utf8");
+      if (bundle.length > 12_000_000) {
+        console.warn(
+          `warning: ai-page-bundle.txt is large (~${Math.round(bundle.length / 1e6)}M chars); consider --no-ai-bundle and attach document.html + motion-summary only`,
+        );
+      }
+    }
+    const keyframes = extractKeyframeBlocks(aggregatedCss);
+    const motionLines = extractMotionLines(aggregatedCss);
+    /** @type {Record<string, unknown>} */
+    const motionSummary = {
+      sourceUrl: url,
+      generatedAt: new Date().toISOString(),
+      viewport: { width: vw, height: vh },
+      counts: {
+        keyframeRules: keyframes.length,
+        motionRelatedLines: motionLines.length,
+        inlineStyleTags: inlineStyles.length,
+        networkStylesheets: cssBodies.length,
+        scriptElements: scriptInventory.length,
+      },
+      keyframes: keyframes.map((k) => ({
+        name: k.name,
+        blockChars: k.block.length,
+        block:
+          k.block.length > 12000
+            ? `${k.block.slice(0, 12000)}\n/* …truncated… */\n`
+            : k.block,
+      })),
+      motionLinesSample: motionLines.slice(0, 800),
+      motionLinesTotal: motionLines.length,
+    };
+    await writeFile(
+      join(outDir, "motion-summary.json"),
+      JSON.stringify(motionSummary, null, 2),
+      "utf8",
+    );
+    /** @type {Record<string, unknown>} */
+    const meta = {
+      sourceUrl: url,
+      generatedAt: new Date().toISOString(),
+      viewport: { width: vw, height: vh },
+      waitUntil,
+      options: {
+        scrollFull: flags.has("scroll-full"),
+        wroteCssFiles: !flags.has("no-css-files"),
+        wroteAiBundle: !flags.has("no-ai-bundle"),
+      },
+      outputs: {
+        documentHtmlBytes: Buffer.byteLength(fullHtml, "utf8"),
+        bodyOuterHtmlBytes: bodyOuter ? Buffer.byteLength(bodyOuter, "utf8") : 0,
+        ...(aiBundleBytes ? { aiPageBundleBytes: aiBundleBytes } : {}),
+        networkStylesheets: cssBodies.map((c) => ({ url: c.url, bytes: c.bytes })),
+      },
+      scripts: scriptInventory,
+    };
+    await writeFile(join(outDir, "capture-meta.json"), JSON.stringify(meta, null, 2), "utf8");
+    await writeFile(
+      join(outDir, "README.txt"),
+      [
+        "LaunchFrame page inspection capture",
+        "====================================",
+        `Source: ${url}`,
+        "",
+        "Files:",
+        "  ai-page-bundle.txt — **ALL-IN-ONE for LLMs:** HTML + inline/network CSS as plain text",
+        "  document.html      — Full <html> outerHTML after JS (same HTML as Part 1 of bundle)",
+        "  body-outer.html    — <body> outerHTML only (smaller)",
+        "  inline-styles.json — All inline <style> tag contents",
+        "  motion-summary.json— @keyframes + animation/transition-related lines",
+        "  capture-meta.json  — Viewport, stylesheet URLs, <script> inventory",
+        "  *.css              — Stylesheets observed on the network (unless --no-css-files)",
+        "",
+        "Notes:",
+        "  • Some sites lazy-load CSS; use --scroll-full to force more requests.",
+        "  • Cross-origin styles you cannot access via JS are still captured here if the browser downloaded them.",
+        "  • Motion inside bundled JS (not CSS) is not fully extracted—check script src in capture-meta.json.",
+        "",
+      ].join("\n"),
+      "utf8",
+    );
+    console.log(outDir);
+  } finally {
+    await browser.close();
+  }
+}
+await runCapture();