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]>
2.1 KiB
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:
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):
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
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.