howone 0.1.52 → 0.2.0

package/templates/vite/.howone/skills/web-clone/scripts/interaction-probe.mjs

@@ -0,0 +1,314 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import crypto from "node:crypto";
+import { loadPlaywright, launchChromium } from "./lib/playwright-loader.mjs";
+
+function usage() {
+  console.log(`Usage:
+  node scripts/interaction-probe.mjs --url <url> --out RECON/interactions [--label original] [--max-clicks 12] [--max-hovers 8] [--wait 800] [--width 1440]
+
+Exercises scroll, hover, safe clicks, and canvas drag gestures, then saves screenshots plus state/network evidence.
+`);
+}
+
+function parseArgs(argv) {
+  const out = {
+    url: "",
+    outDir: "RECON/interactions",
+    label: "site",
+    maxClicks: 12,
+    maxHovers: 8,
+    waitMs: 800,
+    width: 1440,
+  };
+  for (let i = 0; i < argv.length; i += 1) {
+    const arg = argv[i];
+    if (arg === "--help" || arg === "-h") out.help = true;
+    else if (arg === "--url") out.url = argv[++i] || "";
+    else if (arg === "--out") out.outDir = argv[++i] || "RECON/interactions";
+    else if (arg === "--label") out.label = argv[++i] || "site";
+    else if (arg === "--max-clicks") out.maxClicks = Number(argv[++i] || "12");
+    else if (arg === "--max-hovers") out.maxHovers = Number(argv[++i] || "8");
+    else if (arg === "--wait") out.waitMs = Number(argv[++i] || "800");
+    else if (arg === "--width") out.width = Number(argv[++i] || "1440");
+    else throw new Error(`Unexpected argument: ${arg}`);
+  }
+  return out;
+}
+
+function shortHash(value) {
+  return crypto.createHash("sha1").update(value).digest("hex").slice(0, 10);
+}
+
+function safeFileName(label) {
+  return label.replace(/[^a-z0-9._-]+/gi, "-").replace(/^-+|-+$/g, "").slice(0, 90) || "step";
+}
+
+function markdown(result) {
+  const lines = [
+    `# ${result.label} interaction probe`,
+    "",
+    `- URL: ${result.url}`,
+    `- Actions: ${result.actions.length}`,
+    `- Console errors: ${result.consoleErrors.length}`,
+    `- Network events: ${result.network.length}`,
+    "",
+    "## Actions",
+    "| # | Type | Target | Changed | URL after | Screenshot |",
+    "|---:|---|---|---:|---|---|",
+  ];
+  result.actions.forEach((action, index) => {
+    lines.push(`| ${index + 1} | ${action.type} | ${String(action.target || "").replaceAll("|", "\\|")} | ${action.changed ? "yes" : "no"} | ${action.after.url.replaceAll("|", "\\|")} | ${action.screenshot || ""} |`);
+  });
+  if (result.findings.length) {
+    lines.push("");
+    lines.push("## Findings");
+    for (const finding of result.findings) lines.push(`- ${finding}`);
+  }
+  return `${lines.join("\n")}\n`;
+}
+
+async function snapshot(page) {
+  return page.evaluate(() => {
+    const text = (node) => (node?.textContent || "").trim().replace(/\s+/g, " ");
+    const visible = (selector) => Array.from(document.querySelectorAll(selector)).filter((node) => {
+      const rect = node.getBoundingClientRect();
+      const style = getComputedStyle(node);
+      return rect.width > 0 && rect.height > 0 && style.visibility !== "hidden" && style.display !== "none";
+    }).length;
+    const bodyText = document.body?.innerText || "";
+    const html = document.documentElement.outerHTML;
+    return {
+      url: location.href,
+      title: document.title || "",
+      activeElement: document.activeElement?.tagName?.toLowerCase() || "",
+      scrollY: Math.round(window.scrollY),
+      bodyTextChars: bodyText.length,
+      bodyTextStart: bodyText.trim().replace(/\s+/g, " ").slice(0, 500),
+      counts: {
+        dialogs: visible("dialog,[role='dialog'],[aria-modal='true']"),
+        popovers: visible("[popover],.popover,.modal,.drawer,.menu,[role='menu']"),
+        canvases: document.querySelectorAll("canvas").length,
+        videos: document.querySelectorAll("video").length,
+        buttons: document.querySelectorAll("button,[role='button']").length,
+        forms: document.forms.length,
+      },
+      htmlHash: "__HASH_PLACEHOLDER__",
+      htmlLength: html.length,
+    };
+  });
+}
+
+async function hashSnapshot(page, state) {
+  const htmlHash = await page.evaluate(() => {
+    const html = document.documentElement.outerHTML;
+    let hash = 0;
+    for (let i = 0; i < html.length; i += 1) {
+      hash = ((hash << 5) - hash + html.charCodeAt(i)) | 0;
+    }
+    return String(hash);
+  });
+  return { ...state, htmlHash };
+}
+
+async function candidates(page) {
+  return page.evaluate(() => {
+    function selectorFor(node) {
+      if (node.id && !/\s/.test(node.id)) return `#${CSS.escape(node.id)}`;
+      const parts = [];
+      let current = node;
+      while (current && current.nodeType === Node.ELEMENT_NODE && parts.length < 6) {
+        const tag = current.tagName.toLowerCase();
+        const parent = current.parentElement;
+        if (!parent) {
+          parts.unshift(tag);
+          break;
+        }
+        const sameTag = Array.from(parent.children).filter((child) => child.tagName === current.tagName);
+        const index = sameTag.indexOf(current) + 1;
+        parts.unshift(`${tag}:nth-of-type(${index})`);
+        current = parent;
+      }
+      return parts.join(" > ");
+    }
+    const text = (node) => (node.innerText || node.textContent || node.getAttribute("aria-label") || "").trim().replace(/\s+/g, " ");
+    const visible = (node) => {
+      const rect = node.getBoundingClientRect();
+      const style = getComputedStyle(node);
+      return rect.width >= 8 && rect.height >= 8 && style.visibility !== "hidden" && style.display !== "none";
+    };
+    const interactive = Array.from(document.querySelectorAll("button,a[href],summary,input,textarea,select,[role='button'],[tabindex]"))
+      .filter(visible)
+      .slice(0, 80)
+      .map((node) => {
+        const rect = node.getBoundingClientRect();
+        const tag = node.tagName.toLowerCase();
+        const href = node.href || node.getAttribute("href") || "";
+        const safeClick = tag === "button" || tag === "summary" || node.getAttribute("role") === "button" || href.startsWith("#") || href.startsWith(location.origin);
+        return {
+          selector: selectorFor(node),
+          tag,
+          type: node.getAttribute("type") || "",
+          role: node.getAttribute("role") || "",
+          href,
+          text: text(node).slice(0, 120),
+          ariaLabel: node.getAttribute("aria-label") || "",
+          safeClick,
+          rect: {
+            x: Math.round(rect.x),
+            y: Math.round(rect.y),
+            width: Math.round(rect.width),
+            height: Math.round(rect.height),
+          },
+        };
+      });
+    const canvases = Array.from(document.querySelectorAll("canvas")).filter(visible).slice(0, 4).map((node) => {
+      const rect = node.getBoundingClientRect();
+      return {
+        selector: selectorFor(node),
+        rect: {
+          x: Math.round(rect.x),
+          y: Math.round(rect.y),
+          width: Math.round(rect.width),
+          height: Math.round(rect.height),
+        },
+      };
+    });
+    return { interactive, canvases };
+  });
+}
+
+function hasChanged(before, after) {
+  if (before.url !== after.url) return true;
+  if (before.htmlHash !== after.htmlHash) return true;
+  if (before.scrollY !== after.scrollY) return true;
+  return JSON.stringify(before.counts) !== JSON.stringify(after.counts);
+}
+
+async function freshPage(browser, args, network, consoleErrors) {
+  const page = await browser.newPage({ viewport: { width: args.width, height: 900 }, deviceScaleFactor: 1 });
+  page.on("console", (message) => {
+    if (message.type() === "error") consoleErrors.push(message.text());
+  });
+  page.on("response", (response) => {
+    const request = response.request();
+    if (["xhr", "fetch"].includes(request.resourceType())) {
+      network.push({ url: response.url(), status: response.status(), method: request.method(), resourceType: request.resourceType() });
+    }
+  });
+  await page.goto(args.url, { waitUntil: "domcontentloaded", timeout: 45000 });
+  await page.waitForLoadState("networkidle", { timeout: 6000 }).catch(() => {});
+  if (args.waitMs > 0) await page.waitForTimeout(args.waitMs);
+  return page;
+}
+
+async function captureAction(page, outDir, index, action, before) {
+  if (action.type === "scroll") {
+    await page.evaluate((ratio) => window.scrollTo({ top: Math.round((document.documentElement.scrollHeight - window.innerHeight) * ratio), behavior: "instant" }), action.ratio);
+  } else if (action.type === "hover") {
+    await page.locator(action.selector).first().hover({ timeout: 3000 });
+  } else if (action.type === "click") {
+    await page.locator(action.selector).first().click({ timeout: 4000 });
+  } else if (action.type === "canvas-drag") {
+    const rect = action.rect;
+    const x = rect.x + rect.width / 2;
+    const y = rect.y + rect.height / 2;
+    await page.mouse.move(x, y);
+    await page.mouse.down();
+    await page.mouse.move(x + Math.min(180, rect.width * 0.25), y + Math.min(120, rect.height * 0.2), { steps: 8 });
+    await page.mouse.up();
+  }
+  await page.waitForTimeout(450);
+  const after = await hashSnapshot(page, await snapshot(page));
+  const screenshotName = `${String(index + 1).padStart(2, "0")}-${safeFileName(`${action.type}-${action.target || action.selector || "page"}`)}-${shortHash(JSON.stringify(action))}.png`;
+  const screenshotPath = path.join(outDir, "screenshots", screenshotName);
+  await page.screenshot({ path: screenshotPath, fullPage: true });
+  return {
+    ...action,
+    before,
+    after,
+    changed: hasChanged(before, after),
+    screenshot: path.relative(outDir, screenshotPath),
+  };
+}
+
+try {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.help || !args.url) {
+    usage();
+    process.exit(args.help ? 0 : 1);
+  }
+
+  const outDir = path.resolve(args.outDir);
+  fs.mkdirSync(path.join(outDir, "screenshots"), { recursive: true });
+
+  const { chromium } = loadPlaywright();
+  const browser = await launchChromium(chromium);
+  const network = [];
+  const consoleErrors = [];
+
+  const seedPage = await freshPage(browser, args, network, consoleErrors);
+  const initial = await hashSnapshot(seedPage, await snapshot(seedPage));
+  const discovered = await candidates(seedPage);
+  await seedPage.screenshot({ path: path.join(outDir, "screenshots", "00-initial.png"), fullPage: true });
+  await seedPage.close();
+
+  const actions = [
+    { type: "scroll", target: "middle", ratio: 0.5 },
+    { type: "scroll", target: "bottom", ratio: 1 },
+    ...discovered.interactive.slice(0, args.maxHovers).map((item) => ({ type: "hover", target: item.text || item.ariaLabel || item.selector, selector: item.selector, meta: item })),
+    ...discovered.interactive.filter((item) => item.safeClick).slice(0, args.maxClicks).map((item) => ({ type: "click", target: item.text || item.ariaLabel || item.selector, selector: item.selector, meta: item })),
+    ...discovered.canvases.map((item) => ({ type: "canvas-drag", target: item.selector, selector: item.selector, rect: item.rect })),
+  ];
+
+  const results = [];
+  for (let index = 0; index < actions.length; index += 1) {
+    const page = await freshPage(browser, args, network, consoleErrors);
+    const before = await hashSnapshot(page, await snapshot(page));
+    try {
+      results.push(await captureAction(page, outDir, index, actions[index], before));
+    } catch (error) {
+      results.push({
+        ...actions[index],
+        before,
+        after: before,
+        changed: false,
+        screenshot: "",
+        error: error.message,
+      });
+    } finally {
+      await page.close();
+    }
+  }
+
+  await browser.close();
+
+  const changedCount = results.filter((action) => action.changed).length;
+  const findings = [
+    `${discovered.interactive.length} visible interactive candidates discovered`,
+    `${discovered.canvases.length} visible canvas targets discovered`,
+    `${changedCount}/${results.length} actions changed DOM, URL, scroll, or visible overlay counts`,
+  ];
+  if (discovered.canvases.length) findings.push("Canvas drag evidence exists; inspect screenshots before simplifying WebGL/Canvas behavior.");
+
+  const result = {
+    label: args.label,
+    url: args.url,
+    capturedAt: new Date().toISOString(),
+    initial,
+    discovered,
+    actions: results,
+    network,
+    consoleErrors,
+    findings,
+  };
+  const jsonFile = path.join(outDir, `${args.label}-interactions.json`);
+  const mdFile = path.join(outDir, `${args.label}-interactions.md`);
+  fs.writeFileSync(jsonFile, `${JSON.stringify(result, null, 2)}\n`);
+  fs.writeFileSync(mdFile, markdown(result));
+  console.log(jsonFile);
+} catch (error) {
+  console.error(`interaction-probe failed: ${error.message}`);
+  process.exit(1);
+}

package/templates/vite/.howone/skills/web-clone/scripts/lib/playwright-loader.mjs

@@ -0,0 +1,39 @@
+import { createRequire } from "node:module";
+import { existsSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const require = createRequire(import.meta.url);
+const here = dirname(fileURLToPath(import.meta.url));
+const workspaceRoot = join(here, "..", "..", "..", "..");
+
+export function loadPlaywright() {
+  const candidates = [
+    "playwright",
+    join(workspaceRoot, "node_modules/playwright"),
+    join(workspaceRoot, "node_modules/@playwright/test/node_modules/playwright"),
+    "/Users/erkelost/.codex/plugins/cache/openai-bundled/browser/node_modules/playwright",
+    "/Users/erkelost/.codex/plugins/cache/openai-primary-runtime/node_modules/playwright",
+  ];
+  for (const candidate of candidates) {
+    try {
+      if (candidate.startsWith("/") && !existsSync(candidate)) continue;
+      return require(candidate);
+    } catch {
+      // Try next candidate.
+    }
+  }
+  throw new Error("Playwright not found. Run `npm install -D playwright` in the clone project, or install the Browser skill dependencies.");
+}
+
+export async function launchChromium(chromium) {
+  try {
+    return await chromium.launch({ headless: true });
+  } catch (firstError) {
+    try {
+      return await chromium.launch({ headless: true, channel: "chrome" });
+    } catch {
+      throw firstError;
+    }
+  }
+}

package/templates/vite/.howone/skills/web-clone/scripts/mirror-site.mjs

@@ -0,0 +1,121 @@
+#!/usr/bin/env node
+// mirror-site.mjs — 把"静态构建站"(Astro / Vite SSG / Hugo 等)的部署资产整套镜像下来，做 1:1 忠实复刻。
+// 原理: 这类站的"真源码"不在 GitHub，但部署出来的静态资产(HTML + bundle + CSS + 运行时 fetch 的
+//       .sog/.buf/.wasm/.riv/字体/图)就是真相。用真浏览器全程滚动一遍捕获每一个真实请求，按路径镜像同源资产。
+// 用法:
+//   node scripts/mirror-site.mjs --url <URL> --out <dir> [--scroll-step 700] [--settle 2500] [--max-ms 90000]
+// 产物:
+//   <dir>/site/...                镜像的同源资产(保留路径；目录 URL 存为 index.html)
+//   <dir>/mirror-manifest.json    全部请求(同源+第三方) + 每项状态
+//   <dir>/own-asset-urls.txt      同源资产路径清单
+//   <dir>/third-party.json        第三方 host + 需自托管的 webfont CSS(typekit/google) 提示
+// 纪律: 只搬"真实请求到的"资产，不臆造路径。第三方 CDN(字体/wasm/视频)不自动改写——按 third-party.json 人工处理。
+//       后续手工: 自托管锁域名字体(典型 Typekit @import) → 改写 CSS @import 为本地 → 删追踪 → 从 site/ 作 web 根服务。
+//       完整配方见 references/static-mirror.md。
+
+import { loadPlaywright, launchChromium } from "./lib/playwright-loader.mjs";
+import fs from "node:fs";
+import path from "node:path";
+
+function parseArgs(argv) {
+  const o = { url: "", out: "", scrollStep: 700, settle: 2500, maxMs: 90000, help: false };
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "--help" || a === "-h") o.help = true;
+    else if (a === "--url") o.url = argv[++i] || "";
+    else if (a === "--out") o.out = argv[++i] || "";
+    else if (a === "--scroll-step") o.scrollStep = parseInt(argv[++i] || "700", 10);
+    else if (a === "--settle") o.settle = parseInt(argv[++i] || "2500", 10);
+    else if (a === "--max-ms") o.maxMs = parseInt(argv[++i] || "90000", 10);
+  }
+  return o;
+}
+
+function usage() {
+  console.log(`mirror-site.mjs — 静态构建站全量资产镜像(1:1 忠实复刻)
+
+  node scripts/mirror-site.mjs --url <URL> --out <dir> [--scroll-step 700] [--settle 2500] [--max-ms 90000]
+
+适用: Astro / Vite SSG / Hugo / 任何把客户端运行时输出成可下载静态资产的站(含 WebGL/Canvas 重前端)。
+不适用: 真·服务端渲染/数据驱动 SPA(需 network-capture.mjs 做 API 替身)。
+配方与后续改写步骤(自托管字体/删追踪/服务) → references/static-mirror.md`);
+}
+
+// 同源资产 URL → 本地相对路径(去 query；目录结尾存 index.html)
+function urlToLocalPath(u, origin) {
+  let p = u.slice(origin.length);
+  const q = p.indexOf("?");
+  if (q >= 0) p = p.slice(0, q);
+  if (p === "" || p.endsWith("/")) p += "index.html";
+  return p.replace(/^\/+/, "");
+}
+
+const args = parseArgs(process.argv.slice(2));
+if (args.help || !args.url || !args.out) {
+  usage();
+  process.exit(args.help ? 0 : 1);
+}
+
+const origin = new URL(args.url).origin;
+const siteDir = path.join(path.resolve(args.out), "site");
+fs.mkdirSync(siteDir, { recursive: true });
+
+const responses = new Map(); // url -> {status, type, ct}
+const pw = loadPlaywright();
+const browser = await launchChromium(pw.chromium);
+const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1 });
+const page = await ctx.newPage();
+page.on("response", (resp) => {
+  try {
+    const h = resp.headers();
+    responses.set(resp.url(), { status: resp.status(), type: resp.request().resourceType(), ct: h["content-type"] || "" });
+  } catch {}
+});
+
+console.log(`▸ 加载 + 全程滚动捕获: ${args.url}`);
+await page.goto(args.url, { waitUntil: "networkidle", timeout: args.maxMs }).catch((e) => console.warn("  goto:", e.message));
+const total = await page.evaluate(() => document.documentElement.scrollHeight);
+for (let y = 0; y <= total; y += args.scrollStep) {
+  await page.evaluate((yy) => window.scrollTo(0, yy), y);
+  await page.waitForTimeout(180);
+}
+await page.evaluate(() => window.scrollTo(0, document.documentElement.scrollHeight));
+await page.waitForTimeout(args.settle);
+await page.evaluate(() => window.scrollTo(0, 0));
+await page.waitForTimeout(1200);
+
+const all = [...responses.entries()].map(([url, m]) => ({ url, ...m }));
+const ownUrls = all.filter((r) => r.url.startsWith(origin + "/") || r.url === origin || r.url === origin + "/");
+
+console.log(`▸ 捕获请求 ${all.length} 个；同源 ${ownUrls.length} 个，开始下载…`);
+let ok = 0, fail = 0;
+const failed = [];
+for (const r of ownUrls) {
+  const rel = urlToLocalPath(r.url, origin);
+  const dest = path.join(siteDir, rel);
+  try {
+    const resp = await ctx.request.get(r.url); // 复用浏览器网络栈(cookie/TUN/代理一致)
+    if (!resp.ok()) { fail++; failed.push(`HTTP${resp.status()} ${rel}`); continue; }
+    const buf = await resp.body();
+    fs.mkdirSync(path.dirname(dest), { recursive: true });
+    fs.writeFileSync(dest, buf);
+    ok++;
+  } catch (e) {
+    fail++; failed.push(`${e.message} ${rel}`);
+  }
+}
+
+// 第三方 + webfont 提示
+const thirdHosts = [...new Set(all.filter((r) => !r.url.startsWith(origin)).map((r) => { try { return new URL(r.url).host; } catch { return r.url; } }))];
+const webfontCss = all.map((r) => r.url).filter((u) => /use\.typekit\.net\/[a-z0-9]+\.css|fonts\.googleapis\.com\/css/i.test(u));
+const outRoot = path.resolve(args.out);
+fs.writeFileSync(path.join(outRoot, "mirror-manifest.json"), JSON.stringify(all, null, 2));
+fs.writeFileSync(path.join(outRoot, "own-asset-urls.txt"), ownUrls.map((r) => urlToLocalPath(r.url, origin)).sort().join("\n") + "\n");
+fs.writeFileSync(path.join(outRoot, "third-party.json"), JSON.stringify({ hosts: thirdHosts, webfont_css_to_selfhost: webfontCss }, null, 2));
+
+console.log(`✅ 镜像完成: ${ok} 成功 / ${fail} 失败 → ${siteDir}`);
+if (failed.length) console.log("  ⚠️ 失败:\n   " + failed.slice(0, 20).join("\n   "));
+console.log(`▸ 第三方 host: ${thirdHosts.join(", ") || "(无)"}`);
+if (webfontCss.length) console.log(`▸ 需自托管的 webfont CSS(锁域名,见 static-mirror.md): \n   ${webfontCss.join("\n   ")}`);
+console.log(`▸ 下一步: 自托管字体 + 改写 CSS @import + 删追踪 → cd ${siteDir} && python3 -m http.server 8124`);
+await browser.close();

package/templates/vite/.howone/skills/web-clone/scripts/network-capture.mjs

@@ -0,0 +1,127 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import crypto from "node:crypto";
+import { loadPlaywright, launchChromium } from "./lib/playwright-loader.mjs";
+
+function usage() {
+  console.log(`Usage:
+  node scripts/network-capture.mjs --url <url> --out RECON/network [--label original] [--wait 5000] [--max-bytes 1000000]
+
+Captures browser requests and saves JSON/text XHR/fetch responses as fixtures.
+`);
+}
+
+function parseArgs(argv) {
+  const out = { url: "", outDir: "RECON/network", label: "site", waitMs: 5000, maxBytes: 1_000_000 };
+  for (let i = 0; i < argv.length; i += 1) {
+    const arg = argv[i];
+    if (arg === "--help" || arg === "-h") out.help = true;
+    else if (arg === "--url") out.url = argv[++i] || "";
+    else if (arg === "--out") out.outDir = argv[++i] || "RECON/network";
+    else if (arg === "--label") out.label = argv[++i] || "site";
+    else if (arg === "--wait") out.waitMs = Number(argv[++i] || "5000");
+    else if (arg === "--max-bytes") out.maxBytes = Number(argv[++i] || "1000000");
+    else throw new Error(`Unexpected argument: ${arg}`);
+  }
+  return out;
+}
+
+function safeFixtureName(url, contentType) {
+  const parsed = new URL(url);
+  const cleanPath = parsed.pathname.replace(/[^a-z0-9._-]+/gi, "-").replace(/^-+|-+$/g, "").slice(0, 80) || "response";
+  const hash = crypto.createHash("sha1").update(url).digest("hex").slice(0, 10);
+  const ext = contentType.includes("json") ? ".json" : ".txt";
+  return `${cleanPath}-${hash}${ext}`;
+}
+
+function shouldSave(resourceType, contentType) {
+  if (!["xhr", "fetch"].includes(resourceType)) return false;
+  return /json|text|graphql|javascript/i.test(contentType || "");
+}
+
+try {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.help || !args.url) {
+    usage();
+    process.exit(args.help ? 0 : 1);
+  }
+
+  const outDir = path.resolve(args.outDir);
+  const fixturesDir = path.join(outDir, "fixtures");
+  fs.mkdirSync(fixturesDir, { recursive: true });
+
+  const { chromium } = loadPlaywright();
+  const browser = await launchChromium(chromium);
+  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+
+  const requests = [];
+  const responses = [];
+
+  page.on("request", (request) => {
+    requests.push({
+      url: request.url(),
+      method: request.method(),
+      resourceType: request.resourceType(),
+      headers: request.headers(),
+      postData: request.postData() || "",
+    });
+  });
+
+  page.on("response", async (response) => {
+    const request = response.request();
+    const headers = response.headers();
+    const contentType = headers["content-type"] || "";
+    const entry = {
+      url: response.url(),
+      status: response.status(),
+      ok: response.ok(),
+      method: request.method(),
+      resourceType: request.resourceType(),
+      contentType,
+      fixture: "",
+      error: "",
+    };
+
+    if (shouldSave(request.resourceType(), contentType)) {
+      try {
+        const body = await response.body();
+        if (body.length <= args.maxBytes) {
+          const file = path.join(fixturesDir, safeFixtureName(response.url(), contentType));
+          fs.writeFileSync(file, body);
+          entry.fixture = path.relative(outDir, file);
+          entry.bytes = body.length;
+        } else {
+          entry.error = `body too large: ${body.length}`;
+        }
+      } catch (error) {
+        entry.error = error.message;
+      }
+    }
+
+    responses.push(entry);
+  });
+
+  await page.goto(args.url, { waitUntil: "domcontentloaded", timeout: 45000 });
+  await page.waitForLoadState("networkidle", { timeout: args.waitMs }).catch(() => {});
+  if (args.waitMs > 0) await page.waitForTimeout(args.waitMs);
+  await browser.close();
+
+  const manifest = {
+    label: args.label,
+    url: args.url,
+    capturedAt: new Date().toISOString(),
+    requestCount: requests.length,
+    responseCount: responses.length,
+    fixtureCount: responses.filter((response) => response.fixture).length,
+    requests,
+    responses,
+  };
+
+  const manifestFile = path.join(outDir, `${args.label}-network.json`);
+  fs.writeFileSync(manifestFile, `${JSON.stringify(manifest, null, 2)}\n`);
+  console.log(manifestFile);
+} catch (error) {
+  console.error(`network-capture failed: ${error.message}`);
+  process.exit(1);
+}