howone 0.1.52 → 0.2.0

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

@@ -0,0 +1,235 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import { loadPlaywright, launchChromium } from "./lib/playwright-loader.mjs";
+
+function usage() {
+  console.log(`Usage:
+  node scripts/recon-site.mjs --url <url> --out <RECON dir> [--label original|clone] [--widths 1440,768,390] [--wait 1200]
+
+Outputs:
+  <out>/<label>-recon.json
+  <out>/<label>-summary.md
+  <out>/screenshots/<label>-<width>.png
+`);
+}
+
+function parseArgs(argv) {
+  const out = {
+    url: "",
+    outDir: "RECON",
+    label: "site",
+    widths: [1440, 768, 390],
+    waitMs: 1200,
+  };
+  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] || "";
+    else if (arg === "--label") out.label = argv[++i] || "site";
+    else if (arg === "--widths") out.widths = (argv[++i] || "").split(",").map((n) => Number(n.trim())).filter(Boolean);
+    else if (arg === "--wait") out.waitMs = Number(argv[++i] || "1200");
+    else throw new Error(`Unexpected argument: ${arg}`);
+  }
+  return out;
+}
+
+function summarizeFlags(signals) {
+  return Object.entries(signals.frameworks || {})
+    .filter(([, value]) => value)
+    .map(([key]) => key);
+}
+
+function writeSummary(file, data) {
+  const first = data.captures[0]?.signals || {};
+  const lines = [
+    `# ${data.label} recon`,
+    "",
+    `- URL: ${data.url}`,
+    `- Title: ${first.title || ""}`,
+    `- Lang: ${first.lang || ""}`,
+    `- Viewports: ${data.captures.map((c) => c.viewport.width).join(", ")}`,
+    `- Framework signals: ${summarizeFlags(first).join(", ") || "none"}`,
+    `- Canvas count: ${first.counts?.canvas ?? 0}`,
+    `- Video count: ${first.counts?.video ?? 0}`,
+    `- Image count: ${first.counts?.images ?? 0}`,
+    `- Link count: ${first.counts?.links ?? 0}`,
+    `- Console errors: ${data.console.errors.length}`,
+    `- Page errors: ${data.console.pageErrors.length}`,
+    "",
+    "## Screenshots",
+    ...data.captures.map((c) => `- ${c.viewport.width}: ${c.screenshot}`),
+    "",
+  ];
+  fs.writeFileSync(file, lines.join("\n"));
+}
+
+async function collectSignals(page) {
+  return page.evaluate(() => {
+    const bySelector = (selector) => Array.from(document.querySelectorAll(selector));
+    const text = (node) => (node?.textContent || "").trim().replace(/\s+/g, " ");
+    const win = window;
+    const scripts = bySelector("script[src]").map((s) => s.src);
+    const stylesheets = bySelector("link[rel='stylesheet']").map((s) => s.href);
+    const headings = bySelector("h1,h2,h3").slice(0, 60).map((h) => ({
+      tag: h.tagName.toLowerCase(),
+      text: text(h).slice(0, 160),
+    }));
+    const sections = bySelector("header,nav,main,section,article,aside,footer").slice(0, 80).map((node) => {
+      const rect = node.getBoundingClientRect();
+      const style = getComputedStyle(node);
+      return {
+        tag: node.tagName.toLowerCase(),
+        id: node.id || "",
+        className: String(node.className || "").slice(0, 160),
+        text: text(node).slice(0, 240),
+        rect: {
+          x: Math.round(rect.x),
+          y: Math.round(rect.y),
+          width: Math.round(rect.width),
+          height: Math.round(rect.height),
+        },
+        style: {
+          display: style.display,
+          position: style.position,
+          backgroundColor: style.backgroundColor,
+          color: style.color,
+          fontFamily: style.fontFamily,
+          fontSize: style.fontSize,
+        },
+      };
+    });
+    const cssVariables = Array.from(document.styleSheets).flatMap((sheet) => {
+      try {
+        return Array.from(sheet.cssRules || []);
+      } catch {
+        return [];
+      }
+    }).flatMap((rule) => {
+      const style = rule.style;
+      if (!style) return [];
+      return Array.from(style)
+        .filter((name) => name.startsWith("--"))
+        .map((name) => [name, style.getPropertyValue(name).trim()]);
+    }).slice(0, 200);
+    const images = bySelector("img").slice(0, 80).map((img) => ({
+      src: img.currentSrc || img.src,
+      alt: img.alt || "",
+      width: img.naturalWidth || img.width || 0,
+      height: img.naturalHeight || img.height || 0,
+    }));
+    const canvases = bySelector("canvas").map((canvas) => ({
+      width: canvas.width,
+      height: canvas.height,
+      cssWidth: canvas.getBoundingClientRect().width,
+      cssHeight: canvas.getBoundingClientRect().height,
+    }));
+    return {
+      href: location.href,
+      title: document.title,
+      lang: document.documentElement.lang || "",
+      bodyTextChars: (document.body?.innerText || "").length,
+      scrollHeight: document.documentElement.scrollHeight,
+      viewport: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+      },
+      h1: bySelector("h1").map((h) => text(h)).filter(Boolean).slice(0, 10),
+      headings,
+      metaDescription: document.querySelector("meta[name='description']")?.content || "",
+      counts: {
+        links: bySelector("a[href]").length,
+        images: bySelector("img").length,
+        video: bySelector("video").length,
+        canvas: bySelector("canvas").length,
+        sections: sections.length,
+        forms: bySelector("form").length,
+        buttons: bySelector("button").length,
+        inputs: bySelector("input,textarea,select").length,
+        interactive: bySelector("a[href],button,input,textarea,select,summary,[role='button'],[tabindex]").length,
+        scripts: scripts.length,
+        stylesheets: stylesheets.length,
+      },
+      frameworks: {
+        react: Boolean(win.__REACT_DEVTOOLS_GLOBAL_HOOK__) || Boolean(document.querySelector("#__next,[data-reactroot],[data-reactid]")),
+        next: Boolean(document.querySelector("#__next")) || scripts.some((src) => src.includes("/_next/")),
+        vue: Boolean(win.__VUE__) || Boolean(document.querySelector("[data-v-app]")),
+        nuxt: Boolean(win.__NUXT__) || scripts.some((src) => src.includes("/_nuxt/")),
+        svelte: Boolean(document.querySelector("[data-svelte-h]")),
+        astro: Boolean(document.querySelector("[data-astro-cid]")) || scripts.some((src) => src.includes("astro")),
+        three: Boolean(win.THREE) || scripts.some((src) => /three(\.module)?(\.min)?\.js/i.test(src)),
+        gsap: Boolean(win.gsap) || scripts.some((src) => src.toLowerCase().includes("gsap")),
+        lenis: Boolean(win.Lenis) || scripts.some((src) => src.toLowerCase().includes("lenis")),
+      },
+      scripts: scripts.slice(0, 120),
+      stylesheets: stylesheets.slice(0, 80),
+      sections,
+      cssVariables,
+      fonts: Array.from(document.fonts || []).map((font) => font.family).filter(Boolean).slice(0, 40),
+      images,
+      canvases,
+    };
+  });
+}
+
+try {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.help || !args.url) {
+    usage();
+    process.exit(args.help ? 0 : 1);
+  }
+
+  const { chromium } = loadPlaywright();
+  const outDir = path.resolve(args.outDir);
+  const screenshotsDir = path.join(outDir, "screenshots");
+  fs.mkdirSync(screenshotsDir, { recursive: true });
+
+  const consoleState = { errors: [], warnings: [], pageErrors: [] };
+  const browser = await launchChromium(chromium);
+  const captures = [];
+
+  for (const width of args.widths) {
+    const page = await browser.newPage({ viewport: { width, height: 900 }, deviceScaleFactor: 1 });
+    page.on("console", (message) => {
+      const entry = { type: message.type(), text: message.text(), viewport: width };
+      if (message.type() === "error") consoleState.errors.push(entry);
+      if (message.type() === "warning") consoleState.warnings.push(entry);
+    });
+    page.on("pageerror", (error) => {
+      consoleState.pageErrors.push({ message: error.message, viewport: width });
+    });
+
+    await page.goto(args.url, { waitUntil: "domcontentloaded", timeout: 45000 });
+    await page.waitForLoadState("networkidle", { timeout: 8000 }).catch(() => {});
+    if (args.waitMs > 0) await page.waitForTimeout(args.waitMs);
+
+    const signals = await collectSignals(page);
+    const screenshotName = `${args.label}-${width}.png`;
+    const screenshotPath = path.join(screenshotsDir, screenshotName);
+    await page.screenshot({ path: screenshotPath, fullPage: true });
+    captures.push({
+      viewport: { width, height: 900 },
+      screenshot: path.relative(outDir, screenshotPath),
+      signals,
+    });
+    await page.close();
+  }
+
+  await browser.close();
+
+  const result = {
+    label: args.label,
+    url: args.url,
+    capturedAt: new Date().toISOString(),
+    console: consoleState,
+    captures,
+  };
+  const jsonFile = path.join(outDir, `${args.label}-recon.json`);
+  fs.writeFileSync(jsonFile, `${JSON.stringify(result, null, 2)}\n`);
+  writeSummary(path.join(outDir, `${args.label}-summary.md`), result);
+  console.log(jsonFile);
+} catch (error) {
+  console.error(`recon-site failed: ${error.message}`);
+  process.exit(1);
+}

package/templates/vite/.howone/skills/web-clone/scripts/route-crawl.mjs

@@ -0,0 +1,228 @@
+#!/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/route-crawl.mjs --url <url> --out RECON/routes [--label original] [--max-pages 25] [--max-depth 2] [--width 1440] [--wait 800] [--allow-subdomains]
+
+Crawls same-site internal links, captures a screenshot per route, and writes a route map.
+`);
+}
+
+function parseArgs(argv) {
+  const out = {
+    url: "",
+    outDir: "RECON/routes",
+    label: "site",
+    maxPages: 25,
+    maxDepth: 2,
+    width: 1440,
+    waitMs: 800,
+    allowSubdomains: false,
+  };
+  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/routes";
+    else if (arg === "--label") out.label = argv[++i] || "site";
+    else if (arg === "--max-pages") out.maxPages = Number(argv[++i] || "25");
+    else if (arg === "--max-depth") out.maxDepth = Number(argv[++i] || "2");
+    else if (arg === "--width") out.width = Number(argv[++i] || "1440");
+    else if (arg === "--wait") out.waitMs = Number(argv[++i] || "800");
+    else if (arg === "--allow-subdomains") out.allowSubdomains = true;
+    else throw new Error(`Unexpected argument: ${arg}`);
+  }
+  return out;
+}
+
+function normalizeUrl(rawUrl, baseUrl) {
+  try {
+    const url = new URL(rawUrl, baseUrl);
+    if (!["http:", "https:"].includes(url.protocol)) return "";
+    url.hash = "";
+    url.searchParams.sort();
+    return url.toString().replace(/\/$/, "");
+  } catch {
+    return "";
+  }
+}
+
+function sameSite(candidate, origin, allowSubdomains) {
+  const url = new URL(candidate);
+  const root = new URL(origin);
+  if (url.origin === root.origin) return true;
+  return allowSubdomains && url.hostname.endsWith(`.${root.hostname}`);
+}
+
+function routeFileName(url) {
+  const parsed = new URL(url);
+  const clean = `${parsed.hostname}${parsed.pathname}`.replace(/[^a-z0-9._-]+/gi, "-").replace(/^-+|-+$/g, "").slice(0, 90) || "route";
+  const hash = crypto.createHash("sha1").update(url).digest("hex").slice(0, 8);
+  return `${clean}-${hash}.png`;
+}
+
+function summarizeMarkdown(result) {
+  const lines = [
+    `# ${result.label} route map`,
+    "",
+    `- URL: ${result.url}`,
+    `- Captured routes: ${result.routes.length}`,
+    `- Max depth: ${result.maxDepth}`,
+    `- Max pages: ${result.maxPages}`,
+    "",
+    "## Routes",
+    "| Depth | Status | Path | Title | H1 | Links | Screenshot |",
+    "|---:|---:|---|---|---|---:|---|",
+  ];
+  for (const route of result.routes) {
+    const url = new URL(route.url);
+    const pathLabel = `${url.pathname}${url.search}`;
+    lines.push(`| ${route.depth} | ${route.status || ""} | ${pathLabel || "/"} | ${route.title.replaceAll("|", "\\|")} | ${route.h1.join(" / ").replaceAll("|", "\\|")} | ${route.linkCount} | ${route.screenshot} |`);
+  }
+  if (result.skipped.length) {
+    lines.push("");
+    lines.push("## Skipped / Failed");
+    for (const item of result.skipped.slice(0, 80)) {
+      lines.push(`- ${item.url} · ${item.reason}`);
+    }
+  }
+  return `${lines.join("\n")}\n`;
+}
+
+async function collectPage(page) {
+  return page.evaluate(() => {
+    const text = (node) => (node?.textContent || "").trim().replace(/\s+/g, " ");
+    const links = Array.from(document.querySelectorAll("a[href]")).map((a) => ({
+      href: a.href,
+      text: text(a).slice(0, 120),
+    }));
+    const headings = Array.from(document.querySelectorAll("h1,h2,h3")).slice(0, 40).map((node) => ({
+      tag: node.tagName.toLowerCase(),
+      text: text(node).slice(0, 160),
+    }));
+    return {
+      href: location.href,
+      title: document.title || "",
+      lang: document.documentElement.lang || "",
+      metaDescription: document.querySelector("meta[name='description']")?.content || "",
+      h1: Array.from(document.querySelectorAll("h1")).map((node) => text(node)).filter(Boolean).slice(0, 8),
+      headings,
+      scrollHeight: document.documentElement.scrollHeight,
+      counts: {
+        links: links.length,
+        images: document.images.length,
+        canvas: document.querySelectorAll("canvas").length,
+        forms: document.forms.length,
+        buttons: document.querySelectorAll("button,[role='button']").length,
+      },
+      links,
+    };
+  });
+}
+
+try {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.help || !args.url) {
+    usage();
+    process.exit(args.help ? 0 : 1);
+  }
+
+  const startUrl = normalizeUrl(args.url, args.url);
+  if (!startUrl) throw new Error(`Invalid URL: ${args.url}`);
+
+  const outDir = path.resolve(args.outDir);
+  const screenshotsDir = path.join(outDir, "screenshots");
+  fs.mkdirSync(screenshotsDir, { recursive: true });
+
+  const { chromium } = loadPlaywright();
+  const browser = await launchChromium(chromium);
+  const page = await browser.newPage({ viewport: { width: args.width, height: 900 }, deviceScaleFactor: 1 });
+
+  const queue = [{ url: startUrl, depth: 0, from: "" }];
+  const seen = new Set();
+  const routes = [];
+  const skipped = [];
+
+  while (queue.length && routes.length < args.maxPages) {
+    const current = queue.shift();
+    if (!current || seen.has(current.url)) continue;
+    seen.add(current.url);
+
+    if (current.depth > args.maxDepth) {
+      skipped.push({ url: current.url, reason: `depth>${args.maxDepth}` });
+      continue;
+    }
+    if (!sameSite(current.url, startUrl, args.allowSubdomains)) {
+      skipped.push({ url: current.url, reason: "external" });
+      continue;
+    }
+
+    const consoleErrors = [];
+    const onConsole = (message) => {
+      if (message.type() === "error") consoleErrors.push(message.text());
+    };
+    page.on("console", onConsole);
+
+    try {
+      const response = await page.goto(current.url, { waitUntil: "domcontentloaded", timeout: 45000 });
+      await page.waitForLoadState("networkidle", { timeout: 6000 }).catch(() => {});
+      if (args.waitMs > 0) await page.waitForTimeout(args.waitMs);
+      const data = await collectPage(page);
+      const screenshotName = routeFileName(current.url);
+      const screenshotPath = path.join(screenshotsDir, screenshotName);
+      await page.screenshot({ path: screenshotPath, fullPage: true });
+
+      routes.push({
+        url: current.url,
+        from: current.from,
+        depth: current.depth,
+        status: response?.status() || 0,
+        title: data.title,
+        lang: data.lang,
+        metaDescription: data.metaDescription,
+        h1: data.h1,
+        headings: data.headings,
+        counts: data.counts,
+        linkCount: data.links.length,
+        screenshot: path.relative(outDir, screenshotPath),
+        consoleErrors,
+      });
+
+      for (const link of data.links) {
+        const nextUrl = normalizeUrl(link.href, current.url);
+        if (!nextUrl || seen.has(nextUrl)) continue;
+        if (!sameSite(nextUrl, startUrl, args.allowSubdomains)) continue;
+        queue.push({ url: nextUrl, depth: current.depth + 1, from: current.url });
+      }
+    } catch (error) {
+      skipped.push({ url: current.url, reason: error.message });
+    } finally {
+      page.off("console", onConsole);
+    }
+  }
+
+  await browser.close();
+
+  const result = {
+    label: args.label,
+    url: startUrl,
+    capturedAt: new Date().toISOString(),
+    maxPages: args.maxPages,
+    maxDepth: args.maxDepth,
+    allowSubdomains: args.allowSubdomains,
+    routes,
+    skipped,
+  };
+  const jsonFile = path.join(outDir, `${args.label}-route-map.json`);
+  const mdFile = path.join(outDir, `${args.label}-route-map.md`);
+  fs.writeFileSync(jsonFile, `${JSON.stringify(result, null, 2)}\n`);
+  fs.writeFileSync(mdFile, summarizeMarkdown(result));
+  console.log(jsonFile);
+} catch (error) {
+  console.error(`route-crawl failed: ${error.message}`);
+  process.exit(1);
+}

package/templates/vite/.howone/skills/web-clone/scripts/sourcemap-hunt.mjs

@@ -0,0 +1,112 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import crypto from "node:crypto";
+
+function usage() {
+  console.log(`Usage:
+  node scripts/sourcemap-hunt.mjs --recon original-recon.json --out RECON/sourcemaps [--all-external]
+
+Finds sourceMappingURL hints in discovered JavaScript bundles and tries to download source maps.
+`);
+}
+
+function parseArgs(argv) {
+  const out = { recon: "", outDir: "RECON/sourcemaps", allExternal: false };
+  for (let i = 0; i < argv.length; i += 1) {
+    const arg = argv[i];
+    if (arg === "--help" || arg === "-h") out.help = true;
+    else if (arg === "--recon") out.recon = argv[++i] || "";
+    else if (arg === "--out") out.outDir = argv[++i] || "RECON/sourcemaps";
+    else if (arg === "--all-external") out.allExternal = true;
+    else throw new Error(`Unexpected argument: ${arg}`);
+  }
+  return out;
+}
+
+function collectScripts(recon) {
+  const scripts = new Set();
+  for (const capture of recon.captures || []) {
+    for (const script of capture.signals?.scripts || []) {
+      if (/^https?:\/\//i.test(script)) scripts.add(script);
+    }
+  }
+  return Array.from(scripts);
+}
+
+function fileNameFor(url, suffix = "") {
+  const parsed = new URL(url);
+  const base = path.basename(parsed.pathname).replace(/[^a-z0-9._-]+/gi, "-").slice(0, 90) || "bundle.js";
+  const hash = crypto.createHash("sha1").update(url).digest("hex").slice(0, 10);
+  return `${base}-${hash}${suffix}`;
+}
+
+function resolveMapUrl(scriptUrl, mapHint) {
+  if (!mapHint) return `${scriptUrl}.map`;
+  if (mapHint.startsWith("data:")) return "";
+  return new URL(mapHint, scriptUrl).toString();
+}
+
+async function fetchText(url) {
+  const response = await fetch(url, {
+    headers: {
+      "user-agent": "web-clone-skill/1.0 sourcemap-hunt",
+      "accept": "*/*",
+    },
+  });
+  if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
+  return response.text();
+}
+
+try {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.help || !args.recon) {
+    usage();
+    process.exit(args.help ? 0 : 1);
+  }
+
+  const recon = JSON.parse(fs.readFileSync(args.recon, "utf8"));
+  const originHost = recon.url ? new URL(recon.url).hostname : "";
+  const scripts = collectScripts(recon).filter((script) => args.allExternal || new URL(script).hostname === originHost);
+  const outDir = path.resolve(args.outDir);
+  fs.mkdirSync(outDir, { recursive: true });
+
+  const results = [];
+  for (const scriptUrl of scripts) {
+    const entry = { scriptUrl, status: "unknown", mapUrl: "", mapFile: "", error: "" };
+    try {
+      const js = await fetchText(scriptUrl);
+      const hint = js.match(/[#@]\s*sourceMappingURL=([^\s*]+)/)?.[1] || "";
+      entry.mapUrl = resolveMapUrl(scriptUrl, hint);
+      if (!entry.mapUrl) {
+        entry.status = "inline-or-data-map";
+        results.push(entry);
+        continue;
+      }
+      const mapText = await fetchText(entry.mapUrl);
+      const mapFile = path.join(outDir, fileNameFor(entry.mapUrl, ".map"));
+      fs.writeFileSync(mapFile, mapText);
+      entry.mapFile = mapFile;
+      entry.status = "ok";
+    } catch (error) {
+      entry.status = "error";
+      entry.error = error.message;
+    }
+    results.push(entry);
+  }
+
+  const manifest = {
+    source: args.recon,
+    url: recon.url,
+    allExternal: args.allExternal,
+    scriptCount: scripts.length,
+    mapCount: results.filter((item) => item.status === "ok").length,
+    results,
+  };
+  const manifestFile = path.join(outDir, "sourcemap-manifest.json");
+  fs.writeFileSync(manifestFile, `${JSON.stringify(manifest, null, 2)}\n`);
+  console.log(manifestFile);
+} catch (error) {
+  console.error(`sourcemap-hunt failed: ${error.message}`);
+  process.exit(1);
+}