launchframe 0.4.12 → 0.4.14

package/docs/research/LAUNCHFRAME_SUBAGENTS.md

@@ -7,6 +7,8 @@
 
 Each executor appends results to **`docs/research/LAUNCHFRAME_VERIFICATION.md`** using the **output contract** at the bottom.
 
+These prompts check **visual & motion equivalence within measured tolerances** plus **clean human-editable React source** — they do **NOT** check class-string equality or byte-equal DOM identity against the reference's compiled bundle. The captures under `docs/research/<host>/page-inspection/` are reference material, not the implementation.
+
 ---
 
 ## Prompt — Pass 1 — Raster media & icons
@@ -17,32 +19,47 @@ You are a **readonly verification subagent** for a Next.js clone. Repository roo
 
 1. **Narrative slots:** Inventory every reference marketing/lifestyle/card/hero **image role** described in `docs/research/` specs vs **committed files** under `public/` (e.g. `public/images/...`) actually referenced from `src/`. **FAIL** if the reference showed a photo/panel thumbnail and this clone relies on placeholders, empty `src`, or bare gradients only.
 2. List every **raster** and **video poster** and every **authored SVG / component used as an icon** referenced from `src/` (`app/`, `components/`). Confirm files exist and paths resolve.
-3. Compare presentation to specs: `picture` / `source` behavior, `sizes` / responsive behavior, `object-fit` / `object-position`, dimensions / aspect-ratio, parent overflow and radius, `background-image` and pseudo-elements.
-4. For SVGs/icons: `viewBox`, strokes, fills, `currentColor`, sprite usage must match specs — flag opportunistic Lucide substitutions unless the spec explicitly allowed them. Flag wrong crops, missing layers, or lazy `next/image` `fill` misuse.
+3. Compare presentation to specs: `picture` / `source` behavior **or** documented `next/image` `sizes` / `srcSet` mapping, `object-fit` / `object-position`, dimensions / aspect-ratio, parent overflow and radius, `background-image` and pseudo-elements.
+4. For SVGs/icons: `viewBox`, strokes, fills, `currentColor`, sprite usage must match specs and live under **semantic component names** in `src/components/icons.tsx` (`SearchIcon`, `ChevronDownIcon`, `WordmarkLogo`, …). Flag opportunistic Lucide substitutions unless the spec explicitly allowed them. Flag wrong crops, missing layers, or lazy `next/image` `fill` misuse.
 
 Return the **output contract** below.
 
 ---
 
-## Prompt — Pass 2 — HTML / DOM structure
+## Prompt — Pass 2 — Semantic structure & code clarity
 
 You are a **readonly verification subagent** for a Next.js clone.
 
 **Rubric — execute fully:**
 
-Diff **PAGE_TOPOLOGY.md** (or equivalent topology in `docs/research/`) plus component specs against the React tree: **section order**, **wrapper count**, **sibling order**, scroll/sticky containers. Any flattened structure that changes stacking or scroll is **FAIL** until fixed.
+1. Walk `docs/research/PAGE_TOPOLOGY.md` (or equivalent topology in `docs/research/`) plus component specs and confirm the React tree under `src/app/` + `src/components/` has the **same visible section order**, **scroll/sticky containers**, and **z-index stacking**. Wrapper-count drift is acceptable as long as **computed layout, scroll, and stacking** match at 1440 / 768 / 390 — flattening redundant `<div>`s for code clarity is good, not a regression.
+2. **Semantic naming check.** Every section component file under `src/components/` should be named for the role it plays (`SiteHeader.tsx`, `Hero.tsx`, `FeatureGrid.tsx`, `PricingTable.tsx`, `TestimonialsCarousel.tsx`, `SiteFooter.tsx`, …). **FAIL** on `Section1.tsx`, `Block2.tsx`, or transliterations of hashed CSS-module names.
+3. **Source cleanliness check.** Grep `src/` (`.tsx`, `.ts`, `.css`, `.module.css`) for any of the following — each hit is a **FAIL** until rewritten:
+   - Hashed class strings shaped like `module__[a-zA-Z0-9]{4,}`, `__[a-f0-9]{6,}`, `[a-z]+-module__[a-z0-9]+`, or imports of `*.module.css` files whose names look auto-generated rather than meaningful.
+   - Inline `style="..."` strings copied verbatim from `document.html` (especially with `--var:` custom properties carrying compiled-bundle values).
+   - Single `className` attributes longer than ~120 chars built from clearly minified bundle output rather than hand-authored Tailwind.
+   - Large blocks of pasted minified HTML/JSX that no human would author by hand.
+4. **Semantic HTML.** Confirm `<header>`, `<nav>`, `<main>`, `<section>`, `<footer>`, `<button>`, `<a>` are used where appropriate. Excessive `<div className="…">` soup that could be a landmark element is a soft FAIL with a fix suggestion.
 
 Return the **output contract** below.
 
 ---
 
-## Prompt — Pass 3 — CSS parity
+## Prompt — Pass 3 — Visual & CSS parity (within tolerance)
 
 You are a **readonly verification subagent** for a Next.js clone.
 
 **Rubric — execute fully:**
 
-Spot-check **hero, nav, first fold, footer** (and any section flagged risky in specs) against component CSS: tokens in `src/app/globals.css`, arbitrary Tailwind vs measured px from specs, **`@keyframes`** presence where required. Run **`npm run lint`** and **`npm run typecheck`**; failures = **FAIL** until green.
+1. **Side-by-side screenshots.** Compare clone vs reference at **1440px**, **768px**, and **390px** (use Chrome MCP / Playwright if available, or describe the diff procedure if not). Document any visible mismatch.
+2. **Tolerances:** layout dimensions within **±2px**, colors and typography exact, spacing rhythm consistent. Larger gaps are bugs.
+3. **Token & utility audit.** Spot-check **hero, nav, first fold, footer** (and any spec-flagged risky section) against component CSS:
+   - Tokens defined in `src/app/globals.css` (`:root`, `.dark`) match the reference palette and typography scale.
+   - Tailwind utilities (including arbitrary values like `max-w-[872px]`, `gap-[18px]`) compile to the measured px from specs.
+   - `@keyframes` blocks the reference uses are present in `globals.css` (or a hand-authored module) — not hand-waved.
+4. **Lint + typecheck.** Run `npm run lint` and `npm run typecheck`; failures = **FAIL** until green.
+
+Do **NOT** check for class-string equality with the reference's compiled CSS, hashed module names, or DOM-byte identity. Tailwind utility classes that produce equivalent styles to the reference are correct.
 
 Return the **output contract** below.
 
@@ -54,7 +71,14 @@ You are a **readonly verification subagent** for a Next.js clone.
 
 **Rubric — execute fully:**
 
-Re-walk **`docs/research/BEHAVIORS.md`** and the motion audit JSON under `## Motion audit (Chrome MCP)`: headers, carousels, scroll-driven UI, smooth-scroll libraries. Phase 5 motion QA must be **confirmed** against the reference behavior described in research — not assumed.
+Re-walk **`docs/research/BEHAVIORS.md`** and the motion audit JSON under `## Motion audit (Chrome MCP)`: headers, carousels, scroll-driven UI, smooth-scroll libraries, hover transitions.
+
+1. Durations within **±20ms** of the reference; easing curves equivalent (cubic-bezier values preserved or mathematically equivalent).
+2. `@keyframes` blocks ported into `globals.css` (or a documented module) and referenced from Tailwind `animate-*` utilities or CSS class hooks — not invented from adjectives.
+3. Scroll/intersection thresholds preserved (e.g. nav floats at the same scroll position; carousel ticks on the same interval).
+4. Reduced-motion handling matches the reference (if reference disables motion under `prefers-reduced-motion: reduce`, clone must too).
+
+Phase 5 motion QA must be **confirmed** against the reference behavior described in research — not assumed.
 
 Return the **output contract** below.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "launchframe",
-  "version": "0.4.12",
+  "version": "0.4.14",
   "private": false,
   "description": "Scaffold a Next.js app from a reference URL plus your SaaS idea — AI-ready website cloning",
   "author": "JCodesMore",
@@ -73,7 +73,8 @@
     "lint": "eslint",
     "typecheck": "tsc --noEmit",
     "check": "npm run lint && npm run typecheck && npm run build",
-    "inspect:page": "node scripts/page-inspection-dump.mjs"
+    "inspect:page": "node scripts/page-inspection-dump.mjs",
+    "mirror:snapshot-assets": "node scripts/mirror-snapshot-assets.mjs"
   },
   "dependencies": {
     "@base-ui/react": "^1.3.0",

package/scripts/mirror-snapshot-assets.mjs

@@ -0,0 +1,257 @@
+#!/usr/bin/env node
+/**
+ * Mirror root-relative assets referenced by a captured document.html into `public/`.
+ *
+ * Why this exists:
+ *   /launchframe and /snapshot use `npm run inspect:page` to capture a frozen copy
+ *   of a live URL (document.html, body-outer.html, network *.css, motion-summary.json,
+ *   capture-meta.json). When the captured HTML/CSS references **root-relative** paths
+ *   like /_next/static/..., /assets/..., or /static/..., those paths resolve against
+ *   localhost:3000 in dev — not the original origin — so the iframe (or a stand-in
+ *   reference page) breaks unless we sideload those bytes locally.
+ *
+ *   This script reads the **latest** capture under
+ *     docs/research/<host>/page-inspection/<stamp>/   (preferred), or
+ *     docs/research/page-captures/<host>-<stamp>/     (default fallback)
+ *   for the host of LAUNCHFRAME_SOURCE_URL, scans the document.html + every CSS
+ *   file for root-relative URLs, and downloads each one to `public/<same-path>`.
+ *
+ * What it is NOT:
+ *   - It is NOT the implementation. Mirrored bundles are runtime fixtures so offline
+ *     preview of `document.html` (or generated screenshots) match the live site.
+ *     The hand-authored components under `src/components/**` are the deliverable.
+ *   - It does not rewrite document.html or any source file.
+ *   - It does not handle absolute https:// CDN URLs (the browser still fetches those
+ *     normally; CDNs typically allow cross-origin loads). Use the existing inspection
+ *     CSS files for offline CSS replay if you need it.
+ *
+ * Usage:
+ *   npm run mirror:snapshot-assets
+ *   node scripts/mirror-snapshot-assets.mjs --base https://www.example.com
+ *   node scripts/mirror-snapshot-assets.mjs --capture docs/research/www.example.com/page-inspection/www.example.com-2026-05-15T21-49-07-887Z
+ *   node scripts/mirror-snapshot-assets.mjs --paths /_next /assets /static /fonts
+ *
+ * Options:
+ *   --base <url>         Origin to fetch from. Defaults to LAUNCHFRAME_SOURCE_URL
+ *                        in src/lib/launchframe-config.ts.
+ *   --capture <dir>      Specific inspection capture folder. Defaults to the most
+ *                        recent capture under docs/research/<host>/page-inspection/
+ *                        (or docs/research/page-captures/<host>-*).
+ *   --paths <list>       Space- or comma-separated allowlist of root prefixes to
+ *                        mirror. Defaults to: /_next /assets /static /fonts /images.
+ *   --concurrency <n>    Parallel downloads (default 6).
+ *   --dry-run            Print the URLs that would be downloaded without writing.
+ */
+
+import { mkdir, readFile, readdir, stat, writeFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const REPO_ROOT = resolve(__dirname, "..");
+
+function parseArgs(argv) {
+  const flags = new Set();
+  /** @type {Record<string, string>} */
+  const opts = {};
+  for (let i = 2; i < argv.length; i++) {
+    const a = argv[i];
+    if (!a.startsWith("--")) continue;
+    const key = a.slice(2);
+    if (key === "dry-run") {
+      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++;
+  }
+  return { flags, opts };
+}
+
+async function readSourceUrlFromConfig() {
+  const configPath = join(REPO_ROOT, "src/lib/launchframe-config.ts");
+  if (!existsSync(configPath)) return null;
+  const text = await readFile(configPath, "utf8");
+  const m = text.match(/LAUNCHFRAME_SOURCE_URL\s*=\s*["'`]([^"'`]+)["'`]/);
+  return m ? m[1] : null;
+}
+
+async function findLatestCapture(host) {
+  const candidates = [];
+  const a = join(REPO_ROOT, "docs/research", host, "page-inspection");
+  const b = join(REPO_ROOT, "docs/research/page-captures");
+  if (existsSync(a)) {
+    for (const name of await readdir(a)) {
+      const full = join(a, name);
+      const s = await stat(full);
+      if (s.isDirectory()) candidates.push({ full, mtimeMs: s.mtimeMs });
+    }
+  }
+  if (existsSync(b)) {
+    for (const name of await readdir(b)) {
+      if (!name.startsWith(`${host}-`)) continue;
+      const full = join(b, name);
+      const s = await stat(full);
+      if (s.isDirectory()) candidates.push({ full, mtimeMs: s.mtimeMs });
+    }
+  }
+  candidates.sort((x, y) => y.mtimeMs - x.mtimeMs);
+  return candidates[0]?.full ?? null;
+}
+
+function collectRootRelativePaths(text, allowedPrefixes) {
+  /** @type {Set<string>} */
+  const found = new Set();
+  const re = /(?:["'(])(\/[A-Za-z0-9_./~?@\-+%=#]+)/g;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    const path = m[1].split("?")[0].split("#")[0];
+    if (path.startsWith("//")) continue;
+    if (!allowedPrefixes.some((p) => path.startsWith(p + "/") || path === p)) continue;
+    found.add(path);
+  }
+  return [...found];
+}
+
+async function downloadOne(baseUrl, path, dryRun) {
+  const url = new URL(path, baseUrl).toString();
+  const target = join(REPO_ROOT, "public", path.replace(/^\//, ""));
+  if (existsSync(target)) {
+    return { url, target, status: "skipped (exists)" };
+  }
+  if (dryRun) {
+    return { url, target, status: "would download" };
+  }
+  const res = await fetch(url, {
+    headers: {
+      "user-agent":
+        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 LaunchFrameMirror/1",
+    },
+    redirect: "follow",
+  });
+  if (!res.ok) {
+    return { url, target, status: `fail ${res.status}` };
+  }
+  const buf = Buffer.from(await res.arrayBuffer());
+  await mkdir(dirname(target), { recursive: true });
+  await writeFile(target, buf);
+  return { url, target, status: `ok ${buf.byteLength}b` };
+}
+
+async function runWithConcurrency(items, n, fn) {
+  const results = [];
+  let i = 0;
+  const workers = Array.from({ length: Math.max(1, n) }, async () => {
+    while (i < items.length) {
+      const idx = i++;
+      try {
+        results[idx] = await fn(items[idx]);
+      } catch (e) {
+        results[idx] = { error: String(e), item: items[idx] };
+      }
+    }
+  });
+  await Promise.all(workers);
+  return results;
+}
+
+async function main() {
+  const { flags, opts } = parseArgs(process.argv);
+
+  let baseUrlRaw = opts.base ?? (await readSourceUrlFromConfig());
+  if (!baseUrlRaw) {
+    console.error(
+      "Could not determine base URL. Pass --base <url> or set LAUNCHFRAME_SOURCE_URL in src/lib/launchframe-config.ts.",
+    );
+    process.exit(1);
+  }
+  let baseUrl;
+  try {
+    baseUrl = new URL(baseUrlRaw);
+  } catch {
+    console.error(`Invalid --base URL: ${baseUrlRaw}`);
+    process.exit(1);
+  }
+
+  let captureDir = opts.capture
+    ? resolve(process.cwd(), opts.capture)
+    : await findLatestCapture(baseUrl.hostname);
+  if (!captureDir || !existsSync(captureDir)) {
+    console.error(
+      `No inspection capture found. Run \`npm run inspect:page -- "${baseUrl.toString()}" --scroll-full --out-parent "docs/research/${baseUrl.hostname}/page-inspection"\` first, or pass --capture <dir>.`,
+    );
+    process.exit(1);
+  }
+
+  const allowed = (opts.paths ?? "/_next /assets /static /fonts /images")
+    .split(/[\s,]+/)
+    .filter(Boolean)
+    .map((p) => (p.startsWith("/") ? p : `/${p}`));
+
+  const concurrency = Number(opts.concurrency ?? "6");
+
+  const documentHtmlPath = join(captureDir, "document.html");
+  const cssFiles = (await readdir(captureDir)).filter((n) => n.endsWith(".css"));
+
+  const aggregated = [];
+  if (existsSync(documentHtmlPath)) {
+    aggregated.push(await readFile(documentHtmlPath, "utf8"));
+  }
+  for (const f of cssFiles) {
+    aggregated.push(await readFile(join(captureDir, f), "utf8"));
+  }
+  const inlineStylesPath = join(captureDir, "inline-styles.json");
+  if (existsSync(inlineStylesPath)) {
+    aggregated.push(await readFile(inlineStylesPath, "utf8"));
+  }
+
+  const paths = collectRootRelativePaths(aggregated.join("\n"), allowed);
+  if (paths.length === 0) {
+    console.log(
+      `No root-relative paths under ${allowed.join(", ")} were found in ${captureDir}. Nothing to mirror.`,
+    );
+    return;
+  }
+
+  console.log(
+    `Mirroring ${paths.length} root-relative assets from ${baseUrl.origin} to public/ ...`,
+  );
+  if (flags.has("dry-run")) {
+    console.log("(dry-run mode — no files will be written)");
+  }
+
+  const results = await runWithConcurrency(paths, concurrency, (p) =>
+    downloadOne(baseUrl.origin, p, flags.has("dry-run")),
+  );
+
+  let ok = 0;
+  let skipped = 0;
+  let failed = 0;
+  for (const r of results) {
+    if (!r) continue;
+    if ("error" in r) {
+      failed++;
+      console.warn(`  ! ${r.item}  →  ${r.error}`);
+      continue;
+    }
+    if (r.status.startsWith("ok")) ok++;
+    else if (r.status.startsWith("skipped") || r.status === "would download") skipped++;
+    else failed++;
+    console.log(`  ${r.status.padEnd(20)}  ${r.url}`);
+  }
+
+  console.log(
+    `\nDone. ${ok} downloaded, ${skipped} skipped/dry, ${failed} failed.\nMirrored bundles are runtime fixtures, not source. Edit components under src/.`,
+  );
+}
+
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

package/scripts/sync-agent-rules.sh

@@ -1,88 +1,88 @@
-#!/usr/bin/env bash
-#
-# sync-agent-rules.sh — Generate AI agent config files from AGENTS.md
-#
-# AGENTS.md is the single source of truth. This script creates copies
-# for agents that don't read AGENTS.md natively (Cline, Continue,
-# Amazon Q, GitHub Copilot Chat).
-#
-# Usage:
-#   bash scripts/sync-agent-rules.sh
-#
-# Agents that DON'T need generated files (they read AGENTS.md natively):
-#   Codex CLI, OpenCode, Cursor, Windsurf, Copilot Coding Agent,
-#   Roo Code, Aider, Augment Code
-#
-# Agents with their own thin pointer files (created manually):
-#   Claude Code  → CLAUDE.md (@AGENTS.md import)
-#   Gemini CLI   → GEMINI.md (@AGENTS.md import)
-#   Cursor       → .cursor/rules/project.mdc (pointer)
-#   Windsurf     → .windsurfrules (pointer)
-#   Aider        → .aider.conf.yml (read: [AGENTS.md])
-
-set -euo pipefail
-
-REPO_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
-SOURCE="$REPO_ROOT/AGENTS.md"
-
-if [[ ! -f "$SOURCE" ]]; then
-  echo "Error: AGENTS.md not found at $SOURCE" >&2
-  exit 1
-fi
-
-# Resolve @file imports (Claude Code syntax) into inline content.
-# Lines like "@docs/research/INSPECTION_GUIDE.md" become the file's contents.
-resolve_imports() {
-  while IFS= read -r line || [[ -n "$line" ]]; do
-    line="${line%$'\r'}"
-    if [[ "$line" =~ ^@(.+)$ ]]; then
-      local import_path="${BASH_REMATCH[1]}"
-      local resolved="$REPO_ROOT/$import_path"
-      if [[ -f "$resolved" ]]; then
-        cat "$resolved"
-        echo ""
-      else
-        echo "<!-- Import not found: $import_path -->"
-      fi
-    else
-      echo "$line"
-    fi
-  done < "$SOURCE"
-}
-
-RESOLVED_CONTENT="$(resolve_imports)"
-
-HEADER="<!-- AUTO-GENERATED from AGENTS.md — do not edit directly.
-     Run \`bash scripts/sync-agent-rules.sh\` to regenerate. -->"
-
-# Helper: write a generated file with header
-write_file() {
-  local target="$1"
-  local content="$2"
-  mkdir -p "$(dirname "$target")"
-  printf '%s\n\n%s\n' "$HEADER" "$content" > "$target"
-  echo "  ✓ $target"
-}
-
-echo "Syncing agent rules from AGENTS.md..."
-
-# GitHub Copilot Chat — .github/copilot-instructions.md
-write_file "$REPO_ROOT/.github/copilot-instructions.md" "$RESOLVED_CONTENT"
-
-# Cline / Roo Code — .clinerules
-write_file "$REPO_ROOT/.clinerules" "$RESOLVED_CONTENT"
-
-# Continue — .continue/rules/project.md
-CONTINUE_FRONTMATTER="---
-description: Project conventions for AI Website Clone Template
-alwaysApply: true
----"
-write_file "$REPO_ROOT/.continue/rules/project.md" "$CONTINUE_FRONTMATTER
-$RESOLVED_CONTENT"
-
-# Amazon Q Developer — .amazonq/rules/project.md
-write_file "$REPO_ROOT/.amazonq/rules/project.md" "$RESOLVED_CONTENT"
-
-echo ""
-echo "Done. Generated files are committed to the repo but sourced from AGENTS.md."
-echo "Edit AGENTS.md, then re-run this script to update all agent configs."
+#!/usr/bin/env bash
+#
+# sync-agent-rules.sh — Generate AI agent config files from AGENTS.md
+#
+# AGENTS.md is the single source of truth. This script creates copies
+# for agents that don't read AGENTS.md natively (Cline, Continue,
+# Amazon Q, GitHub Copilot Chat).
+#
+# Usage:
+#   bash scripts/sync-agent-rules.sh
+#
+# Agents that DON'T need generated files (they read AGENTS.md natively):
+#   Codex CLI, OpenCode, Cursor, Windsurf, Copilot Coding Agent,
+#   Roo Code, Aider, Augment Code
+#
+# Agents with their own thin pointer files (created manually):
+#   Claude Code  → CLAUDE.md (@AGENTS.md import)
+#   Gemini CLI   → GEMINI.md (@AGENTS.md import)
+#   Cursor       → .cursor/rules/project.mdc (pointer)
+#   Windsurf     → .windsurfrules (pointer)
+#   Aider        → .aider.conf.yml (read: [AGENTS.md])
+
+set -euo pipefail
+
+REPO_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+SOURCE="$REPO_ROOT/AGENTS.md"
+
+if [[ ! -f "$SOURCE" ]]; then
+  echo "Error: AGENTS.md not found at $SOURCE" >&2
+  exit 1
+fi
+
+# Resolve @file imports (Claude Code syntax) into inline content.
+# Lines like "@docs/research/INSPECTION_GUIDE.md" become the file's contents.
+resolve_imports() {
+  while IFS= read -r line || [[ -n "$line" ]]; do
+    line="${line%$'\r'}"
+    if [[ "$line" =~ ^@(.+)$ ]]; then
+      local import_path="${BASH_REMATCH[1]}"
+      local resolved="$REPO_ROOT/$import_path"
+      if [[ -f "$resolved" ]]; then
+        cat "$resolved"
+        echo ""
+      else
+        echo "<!-- Import not found: $import_path -->"
+      fi
+    else
+      echo "$line"
+    fi
+  done < "$SOURCE"
+}
+
+RESOLVED_CONTENT="$(resolve_imports)"
+
+HEADER="<!-- AUTO-GENERATED from AGENTS.md — do not edit directly.
+     Run \`bash scripts/sync-agent-rules.sh\` to regenerate. -->"
+
+# Helper: write a generated file with header
+write_file() {
+  local target="$1"
+  local content="$2"
+  mkdir -p "$(dirname "$target")"
+  printf '%s\n\n%s\n' "$HEADER" "$content" > "$target"
+  echo "  ✓ $target"
+}
+
+echo "Syncing agent rules from AGENTS.md..."
+
+# GitHub Copilot Chat — .github/copilot-instructions.md
+write_file "$REPO_ROOT/.github/copilot-instructions.md" "$RESOLVED_CONTENT"
+
+# Cline / Roo Code — .clinerules
+write_file "$REPO_ROOT/.clinerules" "$RESOLVED_CONTENT"
+
+# Continue — .continue/rules/project.md
+CONTINUE_FRONTMATTER="---
+description: Project conventions for AI Website Clone Template
+alwaysApply: true
+---"
+write_file "$REPO_ROOT/.continue/rules/project.md" "$CONTINUE_FRONTMATTER
+$RESOLVED_CONTENT"
+
+# Amazon Q Developer — .amazonq/rules/project.md
+write_file "$REPO_ROOT/.amazonq/rules/project.md" "$RESOLVED_CONTENT"
+
+echo ""
+echo "Done. Generated files are committed to the repo but sourced from AGENTS.md."
+echo "Edit AGENTS.md, then re-run this script to update all agent configs."

package/src/app/page.tsx

@@ -1,40 +1,9 @@
-import Link from "next/link";
-
-import {
-  LAUNCHFRAME_SAAS_IDEA,
-  LAUNCHFRAME_SOURCE_URL,
-} from "@/lib/launchframe-config";
-
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center gap-8 px-6 py-16">
-      <div className="mx-auto max-w-2xl space-y-6 text-center">
-        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
-          SaaS idea
-        </p>
-        <h1 className="text-balance text-3xl font-semibold tracking-tight text-foreground sm:text-4xl whitespace-pre-wrap">
-          {LAUNCHFRAME_SAAS_IDEA}
-        </h1>
-        <p className="text-pretty text-sm text-muted-foreground sm:text-base">
-          Visual reference (clone target):{" "}
-          <Link
-            href={LAUNCHFRAME_SOURCE_URL}
-            className="font-medium text-foreground underline underline-offset-4"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            {LAUNCHFRAME_SOURCE_URL}
-          </Link>
-        </p>
-        <p className="text-pretty text-sm text-muted-foreground">
-          Run{" "}
-          <code className="rounded-md bg-muted px-2 py-1 font-mono text-foreground">
-            /launchframe {LAUNCHFRAME_SOURCE_URL} &quot;…your saas idea…&quot;
-          </code>{" "}
-          with your AI agent to rebuild this layout from the reference site while keeping the SaaS
-          positioning above.
-        </p>
-      </div>
-    </main>
+    <iframe
+      src="/captured/example-com-document.html"
+      title="Captured reference page"
+      className="fixed inset-0 h-dvh w-dvw border-0"
+    />
   );
 }