howone 0.2.0 → 0.2.1

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

@@ -1,228 +0,0 @@
-#!/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

@@ -1,112 +0,0 @@
-#!/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);
-}

package/templates/vite/.howone/skills/web-clone/scripts/visual-diff.mjs

@@ -1,161 +0,0 @@
-#!/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/visual-diff.mjs --original <png> --clone <png> --out visual-diff.json [--diff visual-diff.png] [--threshold 0.08]
-
-Compares screenshots in a real browser canvas and outputs numeric visual-diff metrics.
-`);
-}
-
-function parseArgs(argv) {
-  const out = { original: "", clone: "", out: "visual-diff.json", diff: "", threshold: 0.08 };
-  for (let i = 0; i < argv.length; i += 1) {
-    const arg = argv[i];
-    if (arg === "--help" || arg === "-h") out.help = true;
-    else if (arg === "--original") out.original = argv[++i] || "";
-    else if (arg === "--clone") out.clone = argv[++i] || "";
-    else if (arg === "--out") out.out = argv[++i] || "visual-diff.json";
-    else if (arg === "--diff") out.diff = argv[++i] || "";
-    else if (arg === "--threshold") out.threshold = Number(argv[++i] || "0.08");
-    else throw new Error(`Unexpected argument: ${arg}`);
-  }
-  return out;
-}
-
-function imageDataUrl(file) {
-  const ext = path.extname(file).slice(1).toLowerCase() || "png";
-  const mime = ext === "jpg" || ext === "jpeg" ? "image/jpeg" : "image/png";
-  return `data:${mime};base64,${fs.readFileSync(file).toString("base64")}`;
-}
-
-function scoreFromDiff(diffRatio, meanAbsDiff) {
-  if (diffRatio <= 0.01 && meanAbsDiff <= 0.01) return 5;
-  if (diffRatio <= 0.04 && meanAbsDiff <= 0.025) return 4.5;
-  if (diffRatio <= 0.08 && meanAbsDiff <= 0.05) return 4;
-  if (diffRatio <= 0.16 && meanAbsDiff <= 0.08) return 3;
-  if (diffRatio <= 0.3 && meanAbsDiff <= 0.14) return 2;
-  return 1;
-}
-
-async function compareInBrowser(page, original, clone, threshold) {
-  return page.evaluate(async ({ original, clone, threshold }) => {
-    const loadImage = (src) => new Promise((resolve, reject) => {
-      const image = new Image();
-      image.onload = () => resolve(image);
-      image.onerror = () => reject(new Error(`Failed to load image: ${src.slice(0, 80)}`));
-      image.src = src;
-    });
-
-    const [left, right] = await Promise.all([loadImage(original), loadImage(clone)]);
-    const width = Math.max(left.naturalWidth, right.naturalWidth);
-    const height = Math.max(left.naturalHeight, right.naturalHeight);
-
-    const canvasA = document.createElement("canvas");
-    const canvasB = document.createElement("canvas");
-    const canvasD = document.createElement("canvas");
-    for (const canvas of [canvasA, canvasB, canvasD]) {
-      canvas.width = width;
-      canvas.height = height;
-    }
-
-    const ctxA = canvasA.getContext("2d");
-    const ctxB = canvasB.getContext("2d");
-    const ctxD = canvasD.getContext("2d");
-    ctxA.fillStyle = "white";
-    ctxB.fillStyle = "white";
-    ctxA.fillRect(0, 0, width, height);
-    ctxB.fillRect(0, 0, width, height);
-    ctxA.drawImage(left, 0, 0);
-    ctxB.drawImage(right, 0, 0);
-
-    const a = ctxA.getImageData(0, 0, width, height);
-    const b = ctxB.getImageData(0, 0, width, height);
-    const d = ctxD.createImageData(width, height);
-    let changed = 0;
-    let sumAbs = 0;
-    let sumSq = 0;
-
-    for (let i = 0; i < a.data.length; i += 4) {
-      const dr = Math.abs(a.data[i] - b.data[i]);
-      const dg = Math.abs(a.data[i + 1] - b.data[i + 1]);
-      const db = Math.abs(a.data[i + 2] - b.data[i + 2]);
-      const da = Math.abs(a.data[i + 3] - b.data[i + 3]);
-      const delta = (dr + dg + db + da) / 1020;
-      sumAbs += delta;
-      sumSq += delta * delta;
-      if (delta > threshold) changed += 1;
-
-      if (delta > threshold) {
-        d.data[i] = 255;
-        d.data[i + 1] = Math.max(0, 80 - delta * 80);
-        d.data[i + 2] = Math.max(0, 80 - delta * 80);
-        d.data[i + 3] = 255;
-      } else {
-        d.data[i] = Math.round(a.data[i] * 0.25 + 245 * 0.75);
-        d.data[i + 1] = Math.round(a.data[i + 1] * 0.25 + 245 * 0.75);
-        d.data[i + 2] = Math.round(a.data[i + 2] * 0.25 + 245 * 0.75);
-        d.data[i + 3] = 255;
-      }
-    }
-
-    ctxD.putImageData(d, 0, 0);
-    const pixels = width * height;
-    const diffPixelRatio = changed / pixels;
-    const meanAbsDiff = sumAbs / pixels;
-    const rmse = Math.sqrt(sumSq / pixels);
-
-    return {
-      original: { width: left.naturalWidth, height: left.naturalHeight },
-      clone: { width: right.naturalWidth, height: right.naturalHeight },
-      comparedCanvas: { width, height },
-      threshold,
-      changedPixels: changed,
-      totalPixels: pixels,
-      diffPixelRatio,
-      meanAbsDiff,
-      rmse,
-      diffPngDataUrl: canvasD.toDataURL("image/png"),
-    };
-  }, { original, clone, threshold });
-}
-
-try {
-  const args = parseArgs(process.argv.slice(2));
-  if (args.help || !args.original || !args.clone) {
-    usage();
-    process.exit(args.help ? 0 : 1);
-  }
-
-  const { chromium } = loadPlaywright();
-  const browser = await launchChromium(chromium);
-  const page = await browser.newPage();
-  const result = await compareInBrowser(page, imageDataUrl(args.original), imageDataUrl(args.clone), args.threshold);
-  await browser.close();
-
-  const diffDataUrl = result.diffPngDataUrl;
-  delete result.diffPngDataUrl;
-  result.visualScore = scoreFromDiff(result.diffPixelRatio, result.meanAbsDiff);
-  result.files = {
-    original: path.resolve(args.original),
-    clone: path.resolve(args.clone),
-    diff: args.diff ? path.resolve(args.diff) : "",
-  };
-
-  fs.mkdirSync(path.dirname(path.resolve(args.out)), { recursive: true });
-  fs.writeFileSync(args.out, `${JSON.stringify(result, null, 2)}\n`);
-
-  if (args.diff) {
-    const base64 = diffDataUrl.replace(/^data:image\/png;base64,/, "");
-    fs.mkdirSync(path.dirname(path.resolve(args.diff)), { recursive: true });
-    fs.writeFileSync(args.diff, Buffer.from(base64, "base64"));
-  }
-
-  console.log(path.resolve(args.out));
-} catch (error) {
-  console.error(`visual-diff failed: ${error.message}`);
-  process.exit(1);
-}