Add SRT subtitle generation that splits narration into readable cues
(~80 chars) and times them proportionally across audio duration.
Includes `ndemo subtitles` CLI command for generating SRT files from
existing playbooks without re-rendering. Also saves videoDuration to
playbooks for accurate standalone subtitle timing.

Add playbooks/ to .gitignore and untrack existing playbook files.

Renders an HTML title card as the first frames of the video so browsers
and Slack show a meaningful preview instead of a blank frame. The card
respects the playbook's colorScheme (light/dark), plays no audio, and
is configured via an optional titleCard section in the playbook YAML.

https://claude.ai/code/session_011gwGxEt5qXnwcEciRe7HwD

…tions

https://claude.ai/code/session_011gwGxEt5qXnwcEciRe7HwD

Three issues prevented the title card from displaying correctly:

1. The addInitScript zoom (compensating for the scaled viewport) was
   applied to the title card's body which used 100vw/100vh, causing it
   to overflow the viewport. Fixed by sizing the body to
   calc(100vw / zoom) so it fills exactly the viewport after zoom.

2. The screencast started while the app page was displayed, making the
   app the first captured frame instead of the title card. Fixed by
   deferring the app navigation to after the title card.

3. The ffmpeg concat encoder produced a VFR stream with a single frame
   for the 3-second title card, which most players couldn't seek or
   display correctly. Fixed by adding -r fps to force constant frame
   rate output.

Two issues caused segments to be cut short or missing in rendered videos:

1. The audio track only accounted for title card duration, not the
   navigation time to the app URL. Since ffmpeg uses -shortest, the
   video was truncated by however long navigation took. Fix: measure
   actual wall-clock pre-segment time (title card + navigation) and
   use that for the audio silence gap.

2. CDP screencast only emits frames on visual changes. Static segments
   (e.g. wait actions) produced no frames, so the last frame was held
   for only 1/30s instead of the remaining video duration. Fix: compute
   expected total duration and hold the last frame accordingly.

Co-Authored-By: Claude Opus 4.6 <[email protected]>

CSS zoom (body.style.zoom) breaks viewport units — 100vh resolves to
the full viewport height before zoom is applied, then gets scaled and
overflows. This required workarounds like calc(100vh / renderZoom) for
the title card and dividing cursor positions by zoom.

Instead, use chrome.tabs.setZoom() through the playwright-zoom Chrome
extension, which behaves like Ctrl+/- browser zoom: the logical
viewport shrinks, vh/vw units adjust correctly, and CDP screencast
still captures at full physical resolution.

Key changes:
- Add playwright-zoom dependency for the bundled Chrome extension
- Add src/zoom.ts helper to locate the extension and set zoom
- Switch renderer and daemon to launchPersistentContext (required for
  extensions) with --headless=new for headless rendering
- Remove all CSS zoom: init scripts, body.style.zoom assignments,
  title card calc() hack, and cursor position zoom division
- Simplify setup in renderer to use single context instead of
  separate setup + recording contexts with storageState transfer