Auto-wrap popups and composite their video as an overlay - #36

Two tests against an auth-popup demo app. The first passes today:
wrapping the popup with a second addPlugins call runs its actions
through its own plugins, with timelines isolated in-memory. The second
is an intended-behavior spec that fails today: after both pages
finalize, each videoMode instance should own its artifacts, but both
resolve the same fixed filenames in testInfo.outputDir so the last
finalize clobbers the first.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Each videoMode() registered within a test now gets its own artifact
namespace: the first instance keeps the legacy unsuffixed filenames,
later ones get -2, -3, ... on metadata, raw/rendered video, player HTML,
highlight/pan/fill images, dialog/final frames, .ass files, and
attachment names. This lets an auth popup carry its own fresh videoMode
instance without clobbering the main page's artifacts - Playwright
screencasts each page separately, so separate videos per page is the
natural model.

Reusing one active instance on a second page now throws a clear error
instead of silently wiping the first page's timeline in beforeTest.

Specs: popup.spec.ts (artifact isolation now green, plus the reuse
guard), popup-video.spec.ts (video: 'on' end to end - popup gets its own
raw/rendered webm), shared demo app in auth-demo-app.ts. README gains a
Popups section. Task moved to complete.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Used by the gitignored popup-demo spec that records the PR demo videos;
the popup specs assert the same roles/text either way.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Design settled interactively (plannotator grill): parent-owned composition,
default-on auto-wrap with a forPopup plugin hook, unified piece timeline
with source tags, 90%-fit dimmed overlay, double-wrap error instead of an
escape hatch. Full decision log in the task file.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Wrapped pages listen for the popup event and wrap the popup
automatically (recursively for nested popups). Plugins may declare
forPopup(ctx) to produce the popup's plugin - videoMode returns null for
now (its parent-bound child recorder is phase 2) - and plugins without
the hook are re-registered as-is, which is safe for the stateless ones.
Opt out with popups: false; children dispose before the parent
finalizes.

addPlugins on an already-wrapped page now throws instead of silently
replacing plugin state mid-flight - this also guards accidental double
wrapping of main pages. Manual popup wrapping (the #32 pattern) becomes
the popups: false path; specs migrated accordingly.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

videoMode.forPopup now returns a parent-bound child recorder: popup
actions record highlights on the parent clock (so child->parent time
mapping is trivial), waits merge into the parent's unified dead air, and
at finalize the popup recorder settles, closes the popup, calibrates
recordingEndedAt, and copies the popup's raw screencast to
video-raw-popup-N.webm. Facts land in a new children array in
video-mode.json (schemaVersion 2). Grandchild popups recurse into the
same flat children list. Rendering is untouched - the composite overlay
is phase 3.

The action middleware is extracted into videoModeActionMiddleware,
shared between an instance (recording onto its own state) and its child
recorders (recording onto a child state that shares the parent's clock
and dead-air spans).

Popup dialogs are not annotated yet - noted in the task file.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Two-pass render when a test recorded popups. Pass A composites each
popup screencast onto the parent's raw footage: dimmed backdrop (40%
black), scaled to fit 90% of the frame (never upscaled), centered,
alpha-faded in/out over 200ms, windowed to the popup's open/close span,
stacked newest-on-top. The composite shares the parent raw timeline
exactly, so pass B - the existing piece/hold/dead-air/cursor machinery -
runs on it unchanged; holds freeze the composite, so it never matters
which source triggered them.

Popup highlights project into composite coordinates and join the render
plan as plain box/pointer highlights (child-frame pixel treatments -
pans, fill reveals, screenshot stills - drop away). Child raw time maps
to the parent timeline via the settled-recorder calibration when the
popup was closed by the recorder, or the screencast start approximation
when the popup closed itself; the auth demo popup now self-closes after
Approve like a real OAuth popup.

Frame-sampling spec verifies the rendered output: frames with a dimmed
page background and the popup's bright card centered above it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…spec

Three compositing fixes found by eyeballing the rendered demo:

- Static pages emit sparse screencast frames, and overlay emits output
  only at primary-input frame times. Resample BOTH chains to a
  continuous fps: without it the child frame that passed fade mid-ramp
  ghosts at partial alpha for the whole window, and the popup window can
  contain zero composite frames entirely (showing post-close footage).
- Run the exit fade AFTER close, using the screencast's padded final
  frame: a self-closing popup otherwise puts its own Approve click - and
  the click hold's freeze frame - inside the fade by construction.
- An instant click's source slice is a few ms wide, often between frame
  ticks, so the hold trim came up empty and bled the next piece's
  footage. Anchor the slice back from close and widen it to two frames.

spec/popup-overlay-demo.spec.ts replaces the gitignored demo spec: full
watchable treatment (pointer, captions, overlay), light assertions on
the child span and rendered output. Overlay frame assertions calibrated
against measured downscale blends.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

The popup overlay now slides up from the bottom edge on enter (300ms,
quadratic ease-out) and slides back down after close, alongside the
alpha fade. Piece planning gains keepSpans: the overlapping-hold skip
used to jump source footage straight across the popup's enter/exit
animations, hard-cutting them out of the output; skips that would cross
a popup transition are cancelled. Parent highlights that start inside a
popup's exit window shift past it, so their holds can't freeze a
mid-fade ghost (the flash after the popup disappeared).

Fill reveals now work inside overlays: the typed-text reveal renders
over a frozen composite frame (popup risen, field empty, backdrop
intact) with the child screenshot's content rect scaled and positioned
through the overlay transform, synced to cursor arrival like main-page
fills. highlightCursorPoint projects fillReveal.initialRect through the
overlay transform too - the I-beam used to land offset from the field.

Child raw footage anchoring: a self-closing popup's screencast t=0 is
its first captured frame, which lags the popup event by the initial
paint, so footage played early (fields filled before the reveal). The
raw video's padded end is the better anchor: closedAt + 1s minimum
final-frame padding - duration, floored at openedAt.

Demo: the popup is now a realistic sign-in form (username/password +
Sign in) on indigo, over a teal app page so the dimmed backdrop reads;
MIDDLEWRIGHT_DEBUG_PIECES=1 dumps the render piece plan.

Includes previously staged demo/styling work reviewed via the local
video (not the GitHub PR).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

The reveal base predates the fill, so the field typed with no focus
ring, and the ring then flashed in from live footage after the hold.
At reveal start the field's ring region from the post-fill screenshot
overlays the base, its text immediately covered by the pre-fill
screenshot's empty content box, and the reveal bands type over that -
ring appears when the cursor lands, letters arrive inside it, and the
post-piece footage continues the ring seamlessly.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Password inputs render one bullet per character, and the reveal only
ever shows the screenshot's dots - so there was no reason to fall back
to an instant fill. Measure bullet glyphs instead of the value's
graphemes for the reveal stops.

The reveal base now rewinds a single frame (a longer rewind could cross
the previous fill's completion and wipe its value from the frozen
frame), and the pre-fill empty content box covers the field from t=0 so
anchor imprecision can't leak early-typed text.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>