| name | inspector-playwright |
| description | Screenshot the real Timestamps analysis view (UnifiedDisplay) for any reciter:surah:verse straight from shards — fast, drift-free, no SPA/audio/OAuth. |
inspector-playwright
Screenshot the real Timestamps analysis view (UnifiedDisplay) for a
reciter : surah:verse straight from shards. No SPA navigation, no audio, no
OAuth, no progress-bar pixel math — and drift-free: the harness
(inspector/frontend/harness/analysis.{html,ts}) imports the production
component + the real ts-source assembly (assembleVerseFromShard), so a
prop/assembly change fails the build rather than silently diverging. Far faster
and more reliable than driving the live SPA or a local Flask (which dies
silently in long sessions).
Run
From inspector/frontend (so vite + playwright resolve from its node_modules):
node ../../.claude/skills/inspector-playwright/scripts/shoot.mjs \
--reciter <slug> --ref 45:32 [--ref 11:57 …] \
[--words 1-3] [--out DIR] [--api https://…hf.space] [--port 5199]
--reciter — slug, e.g. nasser_al_qatami_mp3quran (find it from the manifest / the Timestamps surah-picker search).--ref — surah:verse, repeatable; one PNG per ref → <out>/<slug>_<s>-<v>.png.--words a-b — optional 1-based inclusive word range, for a narrow crop of a long verse.--api — backend the harness fetches shards from. Default is the dev Space (https://hetchyy-quranic-inspector-dev.hf.space): its shard endpoint is public (no auth) and no-store (always fresh after a re-stamp), so no local Flask is needed. Point at http://127.0.0.1:5000 only when a local backend is up.--out — output dir (default cwd). --port — Vite port (default 5199).
How it works
shoot.mjs boots Vite programmatically with INSPECTOR_API_TARGET=<api> (which
the Vite config turns into an /api proxy at that origin), drives headless
Chromium to …/harness/analysis.html?reciter&ref, waits for body[data-ready],
and screenshots #app. The harness fetches manifest/shard/qpc/dk via the real
loaders, builds TsVerseData with assembleVerseFromShard, sets the real
loadedVerse store, and mounts UnifiedDisplay — the exact app render path.
Show the result in chat
After the PNG is written, display it inline in chat by Read-ing the PNG path
(the Read tool renders images) — don't just report the path. One Read per shot.
Notes
- Both tiers render by default (the app defaults the phoneme row OFF; the harness turns it ON since the letter↔phoneme alignment is the point). Opt out with
&letters=0 / &phonemes=0 on the harness URL.
- After a re-stamp the shot is immediately fresh (shard endpoint is
no-store); there is no browser/CDN cache to bust. → [[shard-browser-cache-stale]]
- The dev-only perf-A/B HUD is hidden by the harness CSS.
- The screenshot is the analysis (letter ↔ phoneme cell) view only — to verify tajweed underlines / merger badges / silent greys after a phonemizer or qua-sdk change, this is the tool.
