Omar SobhandClaude Opus 4.8
355a6f23b9
Playwright tool to mirror our own WorkClaw app's compiled front-end (CSS, JS, fonts, SVGs) and dump each screen's DOM + computed styles, for matching Clawmates to the real thing instead of guessing from screenshots. Auth is by hand (you log in, incl. the emailed code, it reuses the session); `live` mode does login + capture in one go for OTP logins. out/ + the one-off grab scripts are gitignored; eslint ignores the captured minified assets. Co-Authored-By: Claude Opus 4.8 <[email protected]>
54 lines
2.1 KiB
Markdown
54 lines
2.1 KiB
Markdown
# 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.
|