# wc-capture — forensic front-end capture of our WorkClaw app

Pulls our own deployed app's compiled front-end (CSS, JS chunks, fonts, SVGs,
images) plus the rendered DOM and computed styles of each screen, so we can
reassemble the styled interface locally and match Clawmates to it exactly.

Your password is never entered here: you log in by hand once and the session
is reused. `out/` (including the session token) is gitignored.

## Run

From `frontend/` (so Playwright resolves).

**Recommended for our emailed-code login** — log in and capture in one session:

```bash
WC_BASE_URL="https://www.workclaw.com" node tools/wc-capture/capture.mjs live
# browser opens → log in by hand (enter the emailed code) → press Enter →
# it captures all ROUTES + mirrors assets in that same authenticated session
```

Alternative (only if the session survives a save/reload — i.e. cookie/
localStorage token, not sessionStorage):

```bash
node tools/wc-capture/capture.mjs login    # log in by hand, saves out/auth.json
node tools/wc-capture/capture.mjs run      # headless; walks ROUTES
node tools/wc-capture/capture.mjs browse   # headed; mirror assets as you click
```

Adjust `BASE`, `ROUTES`, and `SELECTORS` at the top of `capture.mjs` to the
live UI (the defaults mirror Clawmates' role-based selectors).

## Output (`out/`)

| dir | what |
|---|---|
| `assets/<host>/…` | mirrored CSS, JS, **fonts**, **SVGs**, images — preserved paths |
| `pages/<screen>.html` | rendered `outerHTML` per screen |
| `shots/<screen>.png` | reference screenshot |
| `styles/<screen>.json` | `getComputedStyle` + bounding rects for the parity selectors |
| `auth.json` | persisted session (gitignored — treat as a live credential) |

## View the static snapshot locally

```bash
npx serve tools/wc-capture/out/assets   # serves mirrored assets
# open a pages/*.html to inspect styling next to Clawmates in devtools
```

Note: this is a **static styling reference**, not a working app — the JS is
minified and hydration/API calls hit prod. Use it to read exact values
(`styles/*.json`) and lift static assets (fonts/SVGs), then apply to Clawmates.