Flag states

The flag shows that a session is active. No flag means you see the live site.

loader 2.3.0cli 2.2.1macOS

Three stages

While a session is active, the loader shows a small flag in the top right corner of the page.

Stage	What you see
At rest	A small pill with the pass icon and a status dot. The dot turns amber for warnings and red for errors.
Hover or keyboard focus	The pill expands to the left and shows `LOCAL` for `?stagepass=my-project.sp` or `DEBUG` for `?stagepass=debug`, plus the warning and error counters. Counters stop at 99+.
Click	The session card opens.
No flag	No session, the session expired, or you ended it.

On touch devices the first tap expands the pill and the second opens the card.

Project and session domain.
Swapped files, collapsed: each file from live to local, js or css, with the status ok, 404 or failed. Only files that actually loaded count as swapped.
The latest 50 warnings and errors. Each row is one line. Repeats are grouped as ×N with the last time. Click a row for the details: source (local, live or external), file:line:col and the stack.
Always expanded keeps all details open. The choice is stored per site.
Copy all and the Copy button of each message copy a Markdown report: page URL without query, project, loader version and the messages. Cookies and storage are never included.

Button	What it does
Reload	Reloads the page.
Debug mode / Back to local	Switches between debug mode and your local session, also from a new tab or a restored session. Without a local session to return to, the button is disabled and the card says why.
End session	Ends the session, same as `?stagepass=off`.

Only End session disconnects. Esc or a click outside closes the card and focus returns to the pill.

Counter	Sources
Warnings	`sp.warn()`, `sp.log('warn', …)`, `console.warn()` on the page and loader warnings.
Errors	`sp.error()`, `sp.log('error', …)`, `console.error()`, uncaught errors, failed resource loads and unhandled promise rejections.

The console is only captured during a session, and the original console still runs. Messages are always shown as plain text.

Message	What it means
Local file not found (404)	The file at `data-stagepass-path` does not exist in your linked folder.
Local server not reachable … Run stagepass doctor	Your .sp domain does not answer. Run `stagepass doctor`. If Chrome blocks local network access, the card adds that hint.
Local server sends no CORS header …	The file loaded again without `crossorigin`, so error details are limited. Allow your site with `stagepass link --origin`.
Error in a cross-origin script (details only in DevTools console)	A script from another origin failed without CORS. The source is `external`.

During a session, swapped local files load with crossorigin="anonymous", so their errors keep message, location and stack. See Security and CORS.

Visitors without a session load only loader.min.js. They never see the flag and never download its code.
The flag ships as flag.min.js, loaded when a session is active, and flag-card.min.js, loaded when the card opens for the first time. Both come from the same folder as the loader. See Self-host the files.
With a strict Content Security Policy, script-src must allow that origin, for jsDelivr https://cdn.jsdelivr.net. If it is blocked, swapping still works and the console shows a warning.
The flag renders in a Shadow DOM with DOM APIs only, so site CSS cannot change it.
It works with the keyboard and screen readers. With prefers-reduced-motion all changes are instant.