/clone

description: Clone a website — a working behavior ARCHIVE (real code + data replayed offline; tabs, filters, transitions work), a pixel-identical editable RESTORE (real source recovered from source maps when shipped, else the real DOM componentized into React with classes kept byte-exact — verified by pixel-diff), or a pixel-faithful FREEZE. All from the archive, offline.
argument-hint: "<url│file.html> [--archive] [--restore] [--freeze] [--content path.md] [--explore] [--no-fetch] [--headed] [--profile dir]"

Clone the reference in **$ARGUMENTS**. Pick the mode from the flags and the user's words:

• **`--archive`**, or the user asks for a copy that **works / behaves / is interactive** (tabs, filters, lists, click-to-swap, "동작까지", "실제로 작동") → **Archive** (§A, the flagship).
• **`--restore`** / **`--react`**, or the user wants **editable / componentized source / their content** → **Restore** (§B) — pixel-identical editable source *from the archive*.
• otherwise, or **`--freeze`** → **Freeze** (§C).

Archive first (§A) whenever a Restore is wanted — the Restore builds from the archive's captured DOM/CSS, not a fresh scrape. (One caveat: Tier B back-fills assets the archive never fetched from the live origin **by default** — pass `--no-fetch` to stay fully offline.)

Before any `node` command below, run this once so `$ROOT` resolves and Playwright is findable — the snippets use `$ROOT`, and an unset one would run `node /tools/…`:

export ROOT="${CLAUDE_PLUGIN_ROOT}"
export NODE_PATH="$(npm root -g)"

Work in a fresh output dir. `--headed`/`--profile <dir>` pass through to reach a site behind Cloudflare or a login (a persistent `--profile` reuses the clearance/session). `file://` inputs work too.

---

§A · Archive — the complete BEHAVIOR clone ⭐ (the flagship)

This is the only mode that reproduces **behavior**, because it keeps the site's **own code** and replays the **data it actually fetched**. Click a tab and content swaps; filter a list and it updates; scroll and it lazy-loads — the real JavaScript runs against cached responses. Use this whenever the user wants the clone to *work*, not just look right.

node $ROOT/tools/uiforge-archive.mjs <ref> --out-dir ./clone-archive --explore

• **Always pass `--explore`** unless told not to — it clicks in-page controls (tabs, `[aria-controls]`, "load/show/more/next", pagination) and scrolls during capture, so the data those interactions fetch gets recorded. Without it, only what loaded on first paint is cached.
• It writes a folder + a zero-dependency **replay server**. Start it and open the printed URL:

node ./clone-archive/serve.mjs      # → http://localhost:8787

• **It's a browsable, editable mirror, not a blob dump.** Every response lands under `files/` at a real path mirroring its URL, with a real extension (`.html`/`.js`/`.css`/`.json`/fonts/images) — open it, read it, and **edit any text response**; the server reads files fresh per request, so changes show up on reload. `index.json` maps each request → its file. (To *develop* a clean copy — React with **your** content — use **Restore** `--restore` / `--react` (§B); the Archive is for **behavior**, the Restore for **editing**.)
• **Verify it behaves** (don't just claim it): open the replayed URL, confirm the framework boots with no page errors, then exercise one real interaction (click a tab / nav item / "load more") and confirm the content changes without a full reload. Report what worked.
• **Honest limit to state**: a *server*-dependent action (search hitting an API, a fetch triggered by input you didn't type) only replays if its response was recorded — widen coverage by interacting more under `--explore`. A request never made during capture has nothing to replay.

---

§B · Restore — archive → editable source, pixel-identical (tiered) ⭐

Turn the **archive** into editable source that renders **pixel-identical to the original** — by *preservation*, not reconstruction. Best-fidelity tier first, always proven by a pixel gate. (This replaces the old lossy "re-derive styles from computed values" rebuild, which drifted.)

**What Restore is and isn't:** it preserves the *look + structure* as clean, editable React — **not** the behavior. Tier B is a **static snapshot** (the archive's rendered DOM → JSX; scripts are dropped), so CSS-driven states (`:hover`, `<details>`, animations) survive but JS behavior (tab-switching, filters, click-to-swap) does **not**. For a copy that *behaves*, use the **Archive** (§A) — Restore and Archive are complementary, not equivalent.

# 0 · detect the stack from the archive (drives output idiom + which tier applies)
node $ROOT/tools/uiforge-detect.mjs    ./clone-archive

# TIER A · real ORIGINAL source — when the site shipped or leaked source maps (highest fidelity)
node $ROOT/tools/uiforge-sourcemap.mjs ./clone-archive --out-dir ./restore/src-recovered

# TIER B · always works — pixel-identical editable React from the real rendered DOM
node $ROOT/tools/uiforge-restore.mjs   ./clone-archive --out-dir ./restore

# GATE · prove it, don't hope it
node $ROOT/tools/uiforge-visualgate.mjs --a ./restore --b ./clone/ref.png

• **Try Tier A first.** If `uiforge-sourcemap` recovers app files, you have the site's **real components** — original names, comments, types, `src/` paths (it even recovers the exact `MobileMenu.tsx` a static render can't reproduce). Many sites strip maps; it says so and you fall back to Tier B. ⚠ recovered proprietary source is for study/redesign, not wholesale re-publishing.
• **Tier B always yields a buildable, pixel-identical project**: `cd ./restore && npm install && npm run dev`. It loads the archive's real DOM, keeps every class **byte-exact**, and ships the site's **real compiled CSS + real assets** — so fidelity is the *default*, not a target chased with an LLM. It self-completes assets the archive lazily skipped by fetching them from the real origin (Next.js lazy-loads font s