feat: capture UI v2 — frosted pill, pause/resume, review sheet and fly-in

[boehlerlukas]

What

The host side of the capture experience Lukas approved (mock: design-handoffs/capture-ui/index.html, https://claude.ai/artifact/N7GbvfD86DADGEpmYcCQSP). It changes GleapCaptureUI.js, GleapCaptureManager.js, GleapCaptureRecorder.js and GleapCaptureSettings.js.

• Frosted pill at the bottom centre instead of the dark bar.
  • It follows the page's scheme (body/root background, then color-scheme, then the system setting).
  • One line of text, a round shutter, ×, and on desktop the "Enter to capture · Esc to cancel" hint.
  • Enter and Esc only act while nothing else on the page has the focus, so the page keeps its own forms and dialogs.
  • The whole pill drags (its buttons don't). Under 600px it becomes a full-width pill, without the hint, docked above the safe area.
  • The project colour only marks the shutter and Send; near-black flips to near-white on dark pages.
• Shutter flash right after the screenshot is taken. It is never part of the screenshot.
• Recording:
  • Pulsing dot and m:ss / limit timer.
  • The existing microphone toggle.
  • Pause / Resume (new): MediaRecorder.pause()/resume(). The timer, the limit, the recorded length (durationMs, the WebM duration fix) and the timeline (entries in a pause are dropped, later ones shifted) all skip the pause. Pause is offered for screen recordings only. Page (rrweb) recordings have no pause.
  • Stop with a ring that fills toward the limit.
• "Send this recording?" sheet after Stop. It shows the length and audio, and the first frame with a play button (click to play with controls), plus Retake and Send. × discards and Esc cancels. Upload progress shows on Send and in a slim meter; an error lets Send retry. Page recordings show a summary instead of a video.
• Fly-in: after Send the result flies into the Messenger card.
  • Recordings fly from the sheet. The SDK keeps that rect and the first frame for 15 s.
  • Screenshots fly from the Messenger's editor (from / src arrive with the message).
  • The flyer lives in its own shadow root. Reduced motion skips it.
• Limit: requests without a length default to 120 s (was 60). The hint and timer show the real configured limit; the ceiling stays 180.
• Reduced motion: no pill entrance, pulse, ring transition or flight, and the flash becomes a short fade.

postMessage contract (additions only, documented at the top of GleapCaptureManager.js)

• capture-capabilities: pause (screen recordings can pause) and flyIn: true.
• capture-state recording: paused: true while paused. While paused the SDK repeats the same elapsedSec every second.
• capture-state done (recordings): thumbnail (first frame, JPEG data URL ≤ 480px), durationSec (without pauses) and audio.
• Messenger → host capture-fly {requestId, to, from?, src?, radius?} (to in frame coordinates). Answered with host → Messenger capture-fly-done {requestId} when it lands, or right away if it can't fly. src must be a data:image/(jpeg|png|webp) URL of at most 1 MB.
• New optional host labels, with English fallbacks: barCaptureKeys, barStartKeys, barPause, barResume, barPaused, previewDiscard, previewPlay, previewWithAudio, previewNoAudio. The English defaults for barScreenshotHint / barRecordHint are shorter now.

Compatibility

• New SDK with an old Messenger: the old Messenger ignores the new fields and never sends capture-fly. Because the paused state repeats every second, the old card's timer stands still instead of counting on. Verified live against the sandbox Messenger at feat/widget-kit before the merge: record, pause, resume, stop and send work, and the request completes.
• Old SDK with the new Messenger: no flyIn or pause, so the card fades in and shows a neutral recording tile. Verified live with the sandbox's current SDK build.
• capture-start and its options are unchanged. The Messenger's longer translated hints still fit: they are clipped with an ellipsis and shown in full as a tooltip.

Not in this PR

• The annotation editor lives in the Messenger, and Lukas decided to keep all six tools there. It is restyled in Messenger #244. The SDK's classic ScreenDrawer (old feedback flow) is untouched.
• build/ and published/ are not rebuilt. The release does that.

Screenshots

qa-artifacts/2026-10-12-capture-ui/ (local, 153 shots incl. Messenger mock-mode mock-*): the pill, recording, paused, review, flight and sent states at 1280 and 400px, light and dark, plus reduced motion and both compatibility directions.

Verify

npm test (524) and npm run build pass. End to end in Chrome via Playwright: built SDK on a demo page, Messenger dev server, sandbox server, fake tab capture. Covered screenshot, recording with pause, stop and send, upload, Not now and Esc.

Merge order

Messenger after #244 (capture UI v2 is folded into GleapSDK/Messenger-App#244). The SDK release is independent, but the new card needs both. The 2-minute default and the translated strings are on GleapSDK/Server#2157.

🤖 Generated with Claude Code