Overlay

const DEMO_OVERLAY: {
  rootId: 'e2e-demo-overlay';
  personaId: 'e2e-demo-persona';
  deviceId: 'e2e-demo-device';
  bannerId: 'e2e-demo-banner';
  titleId: 'e2e-demo-banner-title';
  routeId: 'e2e-demo-banner-route';
  noteId: 'e2e-demo-banner-note';
  storageKey: 'e2e.demo.caption';
  personaKey: 'e2e.demo.persona';
  // …
};

function installDemoOverlay(
  context: BrowserContext,
  persona: string,
  device?: DemoDevice,
): Promise<void>

function setDemoCaption(page: Page, next: Partial<DemoCaption>): Promise<void>
function setDemoPersona(page: Page, persona: string): Promise<void>

function paintDemoOverlayInit(args: OverlayInitArgs): void
function installDemoCursor(context: BrowserContext): Promise<void>
function paintDemoCursorInit(args: { storageKey: string; cursorId: string }): void
function moveDemoCursor(page: Page, locator: Locator): Promise<void>
function holdDemoCursorRing(page: Page): Promise<void>
function releaseDemoCursorRing(page: Page): Promise<void>
function hideDemoCursor(page: Page): Promise<void>

const DEMO_CURSOR_ID = 'e2e-demo-cursor'
const DEMO_CURSOR_RING_ID = 'e2e-demo-cursor-ring'

setDemoCaption no-ops on about:blank. It merges fields and calls window.__e2ePaintDemoOverlay when present. setDemoPersona writes e2e.demo.persona and repaints the chip from the style map in overlayInitArgs (every configured actor, not only the lead). demoFocus calls both when you pass a bound walk.page[id].

installDemoCursor runs on both speeds. The pointer stays hidden until moveDemoCursor. holdDemoCursorRing paints one gold ring for the still; releaseDemoCursorRing fades that same ring on headed stills (CI removes it immediately). Video does not hold the ring — it pulses, then clicks when that pulse is done, then pauses. Do not call pulseDemoCursor after a hold — that was the double-ring in video.

Overlay ​

Overlay