use-browser — the eyes

Informational, not binding. Know a better way for the case in front of you — do it your way and say so. You are trusted with the creative work on this project.

1. The rule that changes behaviour

A built surface is SEEN before it is shown (CLAUDE.md §6). «The class is in the build» proves the code arrived, not that the page looks right. ✗ 2026-11-04, step 645-1: the drawer was proven by its CSS in the chunks and shown to the owner twice — with a hole on top and a shift too big; one screenshot would have shown both.

2. The tool

npm run eyes -- <address> [--click "<text or css>"]… [--measure "<css>"]… [--top] [--width 390] [--dark] [--full] [--out <file.png>]

It prints the browser, the answer and the title, the screenshot path (logs/eyes/<time>.png), every console and page error, and for each --measure: the box and what lies on top of its corner — «виден», «ПЕРЕКРЫТ: <who>» or «вне экрана». Open the PNG and look at it (the Read tool shows images): a number does not see a broken rhythm, a hole or a fourth item that fell to a second row.

• Browser order, no questions: Playwright's own Chromium → the installed Chrome → Edge. ===EYES_NO_BROWSER=== — say it in one line with what to install (npm run eyes:install after); do not fall back to guessing.
• A clean browser every run: no person's session, no cookies. On localhost the core's panel opens without sign-in (the owner at the keyboard); on the temporary address it is read-only; on an own domain it is signed out — say which you measured.
• One check = one run, the browser closes after it; no resident process.

3. 🔒 Measurements that lied here

• The panel scrolls itself to the content on load — the bars above the header leave the screen, and an element out of view looked «covered». eyes now says «вне экрана»; --top scrolls to the start before the screenshot.
• A tab opened before a rebuild shows the previous build (the owner's Safari, 2026-11-04: old drawer items after the rebuild). A person's screenshot that contradicts eyes — ask them to reload with ⌘⇧R before you change code.
• A registered service worker serves the PREVIOUS build. eyes starts clean; the person's browser does not (use-pwa).
• scroll-smooth makes a scroll position read back wrong — measure after behavior: "instant".
• A screenshot times out, then works on the retry. One timeout is not a broken page; retry once.

4. Reading a page like a person

• Both themes (--dark) and a narrow window (--width 390) for anything a visitor sees.
• Open what the person opens: --click "Личный кабинет" before measuring a drawer; measure the title AND the close button.
• Count elements rather than words: «privacy» also lives in structured data and class names.
• Scripts off for public pages is a wire check: curl the served markup (use-aio).

5. Before you call it seen

Name the state: address (localhost / temporary / own domain), width, theme, what was clicked. Then show the person the screenshot or say where it is. eyes is not a proof of a foreign site — for those you act in the person's Chrome (help-in-browser).