Redesign live subtitles: roll-up display + provisional simultaneous translation

[ycosine]

Problems

1. Two-line clamp hid the newest words. The previous -webkit-line-clamp: 2 anchored the visible window to the head of the text, so once a live utterance wrapped past two lines, everything currently being spoken was clipped out of view.
2. Bilingual lines were misaligned by a full sentence. ElevenLabs only commits an utterance after ~0.8s of VAD silence, and translation only started at commit — so the translation line always showed the previous sentence while the original line streamed the current one. (Checked the ElevenLabs realtime docs: there is no documented way to force earlier commits under commit_strategy=vad, so the fix has to happen on our side.)

Design

Broadcast-style roll-up captions (CEA-608 style), built around how people actually read live text:

• Tail-anchored two-line window — each line is a fixed two-line viewport over a growing scroller, translated up so the freshest words always sit at the bottom edge. Rolling up animates (180ms); content resets snap instead of sliding down.
• No reflow of read text — live mode left-aligns inside a fixed-width block, so already-rendered words never re-center or rewrap when new words stream in.
• Continuous transcript stream — the original line renders previous + current utterance as one joined tail, so nothing jumps at the commit boundary.
• Provisional simultaneous translation — a bounded slice of the growing partial is re-translated on a 1.2s throttle and shown immediately; when the committed cue's real translation streams in (and only once it's final), it takes over. Provisional units are marked transient and bypass the translation cache.

Testing

• New pure-helper module live-text.ts with 10 unit tests (tail/word-boundary, transcript join, translation slice); full content-script suite passes (35 tests).
• type-check, lint, and full pnpm build pass.

🤖 Generated with Claude Code