launchframe 0.4.10 → 0.4.12

package/.opencode/commands/launchframe.md

@@ -23,6 +23,22 @@ Before reconnaissance, write or update:
 - `docs/research/LAUNCHFRAME.md` — URLs and SaaS idea
 - **`docs/research/LAUNCHFRAME_SUBAGENTS.md`** — **before Phase 6**, ensure this runbook holds all four verifier prompts (**copy-ready**). When the bundled template differs from the latest SKILL rubrics (after skill edits), re-sync Section **Phase 6** rubrics **into this file**. Subagents receive prompts **only** from here.
 
+### Step 0a — Automated page inspection dump (mandatory)
+
+Right after Step 0 files are written, **from the repository root**, run the bundled **Playwright** capture **once per parsed reference URL** (before Phase 1 Chrome MCP). This produces **`ai-page-bundle.txt`** (one plain-text file: full post-JS HTML + all captured CSS), plus `document.html`, network `*.css` bodies, `inline-styles.json`, and `motion-summary.json` — attach **`ai-page-bundle.txt`** to the agent when a single pasteable artifact is enough; the frozen bundle complements live `getComputedStyle` / WAAPI work (**it does not replace** Chrome MCP for numeric motion and interaction sweeps).
+
+1. **One-time per machine:** `npx playwright install chromium`
+2. **Per URL** — use the URL’s hostname for the folder (example hostname `www.example.com`):
+
+```bash
+npm run inspect:page -- "https://www.example.com/" --scroll-full --wait-until networkidle --timeout 120000 --out-parent "docs/research/www.example.com/page-inspection"
+```
+
+That creates `docs/research/<hostname>/page-inspection/<hostname>-<iso-stamp>/` with all artifacts. Omit `--out-parent` to use the default `docs/research/page-captures/<host>-<stamp>/`.
+3. Append an **`Automated captures`** subsection to `docs/research/LAUNCHFRAME.md` listing every URL and its output directory path. Use those files in Phase 1 when structuring specs (DOM outline, stylesheet text, `@keyframes` from `motion-summary.json`) while still measuring behavior in the live tab.
+
+If the dump fails (missing browsers, navigation timeout, TLS, bot wall), increase `--timeout`, retry with `domcontentloaded` only when necessary, or document the failure in `LAUNCHFRAME.md` and unblock before treating Phase 1 as complete.
+
 ## SaaS copy overlay (Phase 4 assembly and final polish)
 
 After structure and styles match the reference, apply the **SaaS idea** to hero, headings, and primary CTAs where the reference uses interchangeable marketing copy, **without** changing layout grids, spacing, or **motion numbers** from extracted specs. **Icon shapes** and **animations** (`@keyframes`, transitions, staggers, scroll triggers) remain **parity goals** sourced from extraction — swapping narrative photos does **not** relax them. **Brand identity** (below) must be **original** for anything you ship as the user’s product — never pass off the reference company’s trademarks or distinctive marks.

package/.windsurf/workflows/launchframe.md

@@ -20,6 +20,22 @@ Before reconnaissance, write or update:
 - `docs/research/LAUNCHFRAME.md` — URLs and SaaS idea
 - **`docs/research/LAUNCHFRAME_SUBAGENTS.md`** — **before Phase 6**, ensure this runbook holds all four verifier prompts (**copy-ready**). When the bundled template differs from the latest SKILL rubrics (after skill edits), re-sync Section **Phase 6** rubrics **into this file**. Subagents receive prompts **only** from here.
 
+### Step 0a — Automated page inspection dump (mandatory)
+
+Right after Step 0 files are written, **from the repository root**, run the bundled **Playwright** capture **once per parsed reference URL** (before Phase 1 Chrome MCP). This produces **`ai-page-bundle.txt`** (one plain-text file: full post-JS HTML + all captured CSS), plus `document.html`, network `*.css` bodies, `inline-styles.json`, and `motion-summary.json` — attach **`ai-page-bundle.txt`** to the agent when a single pasteable artifact is enough; the frozen bundle complements live `getComputedStyle` / WAAPI work (**it does not replace** Chrome MCP for numeric motion and interaction sweeps).
+
+1. **One-time per machine:** `npx playwright install chromium`
+2. **Per URL** — use the URL’s hostname for the folder (example hostname `www.example.com`):
+
+```bash
+npm run inspect:page -- "https://www.example.com/" --scroll-full --wait-until networkidle --timeout 120000 --out-parent "docs/research/www.example.com/page-inspection"
+```
+
+That creates `docs/research/<hostname>/page-inspection/<hostname>-<iso-stamp>/` with all artifacts. Omit `--out-parent` to use the default `docs/research/page-captures/<host>-<stamp>/`.
+3. Append an **`Automated captures`** subsection to `docs/research/LAUNCHFRAME.md` listing every URL and its output directory path. Use those files in Phase 1 when structuring specs (DOM outline, stylesheet text, `@keyframes` from `motion-summary.json`) while still measuring behavior in the live tab.
+
+If the dump fails (missing browsers, navigation timeout, TLS, bot wall), increase `--timeout`, retry with `domcontentloaded` only when necessary, or document the failure in `LAUNCHFRAME.md` and unblock before treating Phase 1 as complete.
+
 ## SaaS copy overlay (Phase 4 assembly and final polish)
 
 After structure and styles match the reference, apply the **SaaS idea** to hero, headings, and primary CTAs where the reference uses interchangeable marketing copy, **without** changing layout grids, spacing, or **motion numbers** from extracted specs. **Icon shapes** and **animations** (`@keyframes`, transitions, staggers, scroll triggers) remain **parity goals** sourced from extraction — swapping narrative photos does **not** relax them. **Brand identity** (below) must be **original** for anything you ship as the user’s product — never pass off the reference company’s trademarks or distinctive marks.

package/AGENTS.md

@@ -7,7 +7,7 @@ This version has breaking changes — APIs, conventions, and file structure may
 # Website Reverse-Engineer Template
 
 ## What This Is
-A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded — use **`/launchframe <url> "saas idea"`** for the full pixel-perfect clone plus SaaS landing copy (`src/lib/launchframe-config.ts`, `launchframe.context.json`, `docs/research/LAUNCHFRAME.md`). For a **new empty folder** only, **`npx launchframe@latest`** unpacks this template; then run **`/launchframe`** in that project with your URL and pitch.
+A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded — use **`/launchframe <url> "saas idea"`** for the full pixel-perfect clone plus SaaS landing copy (`src/lib/launchframe-config.ts`, `launchframe.context.json`, `docs/research/LAUNCHFRAME.md`). The agent executing **`/launchframe`** must follow **Step 0a** in that command: run **`npm run inspect:page`** once per reference URL (Playwright: `document.html`, network CSS, `motion-summary.json`) before Phase 1. For a **new empty folder** only, **`npx launchframe@latest`** unpacks this template; then run **`/launchframe`** in that project with your URL and pitch.
 
 ## Tech Stack
 - **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-24-43-488Z/README.txt

@@ -0,0 +1,16 @@
+LaunchFrame page inspection capture
+====================================
+Source: https://example.com/
+
+Files:
+  document.html      — Full <html> outerHTML after JS (attach this for an agent)
+  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.

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-24-43-488Z/body-outer.html

@@ -0,0 +1,2 @@
+<body><div><h1>Example Domain</h1><p>This domain is for use in documentation examples without needing permission. Avoid use in operations.</p><p><a href="https://iana.org/domains/example">Learn more</a></p></div>
+</body>

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-24-43-488Z/capture-meta.json

@@ -0,0 +1,19 @@
+{
+  "sourceUrl": "https://example.com/",
+  "generatedAt": "2026-05-15T21:24:44.058Z",
+  "viewport": {
+    "width": 1440,
+    "height": 900
+  },
+  "waitUntil": "domcontentloaded",
+  "options": {
+    "scrollFull": false,
+    "wroteCssFiles": true
+  },
+  "outputs": {
+    "documentHtmlBytes": 513,
+    "bodyOuterHtmlBytes": 220,
+    "networkStylesheets": []
+  },
+  "scripts": []
+}

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-24-43-488Z/document.html

@@ -0,0 +1,2 @@
+<html lang="en"><head><title>Example Domain</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>body{background:#eee;width:60vw;margin:15vh auto;font-family:system-ui,sans-serif}h1{font-size:1.5em}div{opacity:0.8}a:link,a:visited{color:#348}</style></head><body><div><h1>Example Domain</h1><p>This domain is for use in documentation examples without needing permission. Avoid use in operations.</p><p><a href="https://iana.org/domains/example">Learn more</a></p></div>
+</body></html>

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-24-43-488Z/inline-styles.json

@@ -0,0 +1,7 @@
+[
+  {
+    "index": 0,
+    "media": "",
+    "text": "body{background:#eee;width:60vw;margin:15vh auto;font-family:system-ui,sans-serif}h1{font-size:1.5em}div{opacity:0.8}a:link,a:visited{color:#348}"
+  }
+]

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-24-43-488Z/motion-summary.json

@@ -0,0 +1,18 @@
+{
+  "sourceUrl": "https://example.com/",
+  "generatedAt": "2026-05-15T21:24:44.057Z",
+  "viewport": {
+    "width": 1440,
+    "height": 900
+  },
+  "counts": {
+    "keyframeRules": 0,
+    "motionRelatedLines": 0,
+    "inlineStyleTags": 1,
+    "networkStylesheets": 0,
+    "scriptElements": 0
+  },
+  "keyframes": [],
+  "motionLinesSample": [],
+  "motionLinesTotal": 0
+}

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-49-07-887Z/README.txt

@@ -0,0 +1,17 @@
+LaunchFrame page inspection capture
+====================================
+Source: https://example.com/
+
+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.

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-49-07-887Z/ai-page-bundle.txt

@@ -0,0 +1,29 @@
+
+================================================================================
+LAUNCHFRAME AI PAGE BUNDLE
+================================================================================
+
+Source URL: https://example.com/
+Generated: 2026-05-15T21:49:16.186Z
+Viewport: 1440x900
+Wait until: domcontentloaded
+
+Single plain-text file: POST-JS HTML plus all captured CSS (inline + network).
+Use document.html / *.css separately if you hit tool context limits.
+
+================================================================================
+PART 1 — HTML (document.documentElement.outerHTML)
+================================================================================
+
+<html lang="en"><head><title>Example Domain</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>body{background:#eee;width:60vw;margin:15vh auto;font-family:system-ui,sans-serif}h1{font-size:1.5em}div{opacity:0.8}a:link,a:visited{color:#348}</style></head><body><div><h1>Example Domain</h1><p>This domain is for use in documentation examples without needing permission. Avoid use in operations.</p><p><a href="https://iana.org/domains/example">Learn more</a></p></div>
+</body></html>
+================================================================================
+PART 2 — CSS (inline <style> tags, then network stylesheets)
+================================================================================
+
+/* inline style #0 media=all */
+body{background:#eee;width:60vw;margin:15vh auto;font-family:system-ui,sans-serif}h1{font-size:1.5em}div{opacity:0.8}a:link,a:visited{color:#348}
+================================================================================
+END OF BUNDLE
+================================================================================
+

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-49-07-887Z/body-outer.html

@@ -0,0 +1,2 @@
+<body><div><h1>Example Domain</h1><p>This domain is for use in documentation examples without needing permission. Avoid use in operations.</p><p><a href="https://iana.org/domains/example">Learn more</a></p></div>
+</body>

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-49-07-887Z/capture-meta.json

@@ -0,0 +1,21 @@
+{
+  "sourceUrl": "https://example.com/",
+  "generatedAt": "2026-05-15T21:49:16.188Z",
+  "viewport": {
+    "width": 1440,
+    "height": 900
+  },
+  "waitUntil": "domcontentloaded",
+  "options": {
+    "scrollFull": false,
+    "wroteCssFiles": true,
+    "wroteAiBundle": true
+  },
+  "outputs": {
+    "documentHtmlBytes": 513,
+    "bodyOuterHtmlBytes": 220,
+    "aiPageBundleBytes": 1769,
+    "networkStylesheets": []
+  },
+  "scripts": []
+}

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-49-07-887Z/document.html

@@ -0,0 +1,2 @@
+<html lang="en"><head><title>Example Domain</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>body{background:#eee;width:60vw;margin:15vh auto;font-family:system-ui,sans-serif}h1{font-size:1.5em}div{opacity:0.8}a:link,a:visited{color:#348}</style></head><body><div><h1>Example Domain</h1><p>This domain is for use in documentation examples without needing permission. Avoid use in operations.</p><p><a href="https://iana.org/domains/example">Learn more</a></p></div>
+</body></html>

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-49-07-887Z/inline-styles.json

@@ -0,0 +1,7 @@
+[
+  {
+    "index": 0,
+    "media": "",
+    "text": "body{background:#eee;width:60vw;margin:15vh auto;font-family:system-ui,sans-serif}h1{font-size:1.5em}div{opacity:0.8}a:link,a:visited{color:#348}"
+  }
+]

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-49-07-887Z/motion-summary.json

@@ -0,0 +1,18 @@
+{
+  "sourceUrl": "https://example.com/",
+  "generatedAt": "2026-05-15T21:49:16.187Z",
+  "viewport": {
+    "width": 1440,
+    "height": 900
+  },
+  "counts": {
+    "keyframeRules": 0,
+    "motionRelatedLines": 0,
+    "inlineStyleTags": 1,
+    "networkStylesheets": 0,
+    "scriptElements": 0
+  },
+  "keyframes": [],
+  "motionLinesSample": [],
+  "motionLinesTotal": 0
+}

package/docs/research/page-captures/example.com-2026-05-15T21-21-31-863Z/README.txt

@@ -0,0 +1,16 @@
+LaunchFrame page inspection capture
+====================================
+Source: https://example.com/
+
+Files:
+  document.html      — Full <html> outerHTML after JS (attach this for an agent)
+  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.

package/docs/research/page-captures/example.com-2026-05-15T21-21-31-863Z/body-outer.html

@@ -0,0 +1,2 @@
+<body><div><h1>Example Domain</h1><p>This domain is for use in documentation examples without needing permission. Avoid use in operations.</p><p><a href="https://iana.org/domains/example">Learn more</a></p></div>
+</body>

package/docs/research/page-captures/example.com-2026-05-15T21-21-31-863Z/capture-meta.json

@@ -0,0 +1,19 @@
+{
+  "sourceUrl": "https://example.com/",
+  "generatedAt": "2026-05-15T21:21:39.771Z",
+  "viewport": {
+    "width": 1440,
+    "height": 900
+  },
+  "waitUntil": "domcontentloaded",
+  "options": {
+    "scrollFull": false,
+    "wroteCssFiles": true
+  },
+  "outputs": {
+    "documentHtmlBytes": 513,
+    "bodyOuterHtmlBytes": 220,
+    "networkStylesheets": []
+  },
+  "scripts": []
+}

package/docs/research/page-captures/example.com-2026-05-15T21-21-31-863Z/document.html

@@ -0,0 +1,2 @@
+<html lang="en"><head><title>Example Domain</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>body{background:#eee;width:60vw;margin:15vh auto;font-family:system-ui,sans-serif}h1{font-size:1.5em}div{opacity:0.8}a:link,a:visited{color:#348}</style></head><body><div><h1>Example Domain</h1><p>This domain is for use in documentation examples without needing permission. Avoid use in operations.</p><p><a href="https://iana.org/domains/example">Learn more</a></p></div>
+</body></html>

package/docs/research/page-captures/example.com-2026-05-15T21-21-31-863Z/inline-styles.json

@@ -0,0 +1,7 @@
+[
+  {
+    "index": 0,
+    "media": "",
+    "text": "body{background:#eee;width:60vw;margin:15vh auto;font-family:system-ui,sans-serif}h1{font-size:1.5em}div{opacity:0.8}a:link,a:visited{color:#348}"
+  }
+]

package/docs/research/page-captures/example.com-2026-05-15T21-21-31-863Z/motion-summary.json

@@ -0,0 +1,18 @@
+{
+  "sourceUrl": "https://example.com/",
+  "generatedAt": "2026-05-15T21:21:39.770Z",
+  "viewport": {
+    "width": 1440,
+    "height": 900
+  },
+  "counts": {
+    "keyframeRules": 0,
+    "motionRelatedLines": 0,
+    "inlineStyleTags": 1,
+    "networkStylesheets": 0,
+    "scriptElements": 0
+  },
+  "keyframes": [],
+  "motionLinesSample": [],
+  "motionLinesTotal": 0
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "launchframe",
-  "version": "0.4.10",
+  "version": "0.4.12",
   "private": false,
   "description": "Scaffold a Next.js app from a reference URL plus your SaaS idea — AI-ready website cloning",
   "author": "JCodesMore",
@@ -72,7 +72,8 @@
     "start": "next start",
     "lint": "eslint",
     "typecheck": "tsc --noEmit",
-    "check": "npm run lint && npm run typecheck && npm run build"
+    "check": "npm run lint && npm run typecheck && npm run build",
+    "inspect:page": "node scripts/page-inspection-dump.mjs"
   },
   "dependencies": {
     "@base-ui/react": "^1.3.0",
@@ -94,6 +95,7 @@
     "eslint": "^9",
     "eslint-config-next": "16.2.1",
     "tailwindcss": "^4",
-    "typescript": "^5"
+    "typescript": "^5",
+    "playwright": "^1.57.0"
   }
 }