refactor(studio): improve Timeline, PlayerControls, and player hook

[miguel-heygen]

Summary

• Timeline: Refactored track rendering with zoom support, drag/resize interactions, and playhead scrubbing
• PlayerControls: Redesigned with seek bar, time display, playback rate selector
• useTimelinePlayer: Enhanced with iframe bridge communication, timeline message parsing, and deterministic seek
• Add Timeline unit tests (109 lines)

🤖 Generated with Claude Code

[miguel-heygen]

• refactor(studio): wire vite.config.ts to shared studio API module #115
• refactor(core): extract shared studio API module #113
• fix(core): strip template wrapper before linting composition files #111
• fix(cli): align render output naming and add WebM support to studioServer #109
• feat(studio): render queue, layout restructure, home page, hover preview #95
• feat(studio): add left sidebar with Compositions and Assets tabs #94
• feat(studio): add Edit Range toolbar with Copy to Agent #65
• refactor(studio): update layout, config, and remove agent activity tracking #64
• refactor(studio): improve Timeline, PlayerControls, and player hook #63 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[vanceingalls]

Review: PR #63 — Timeline, PlayerControls, Player Hook

Good performance optimizations with imperative DOM updates. One critical test issue.

Issues

[Critical] Timeline.test.ts tests a stale copy of `generateTicks`. The replicated function in the test file lacks all three safety improvements added to the real Timeline.tsx in this same PR: Number.isFinite guard, duration > 7200 cap, maxTicks loop cap, and minorInterval floor of 0.25. The tests pass against the old algorithm but don't validate the actual shipped code. Extract these functions to a shared module and import in both the component and tests.

[Important] `useTimelinePlayer` `onIframeLoad` polls with a 25-attempt limit (5s). If the runtime takes longer to initialize, the timeline silently fails. Warning is logged but there's no user-visible feedback or retry.

**[Suggestion] Speed menu has no click-outside-to-close handler.

**[Suggestion] `onClipChange` prop is declared in `TimelineProps` but never used in the component body.

What's well done

• PlayerControls uses imperative DOM updates via refs for progress bar and time display — avoids React re-renders at 60fps
• generateTicks hardened with isFinite guard, duration cap, minor interval floor, max ticks safety
• effectiveDuration correctly uses max of store duration and furthest element end
• Auto-scroll during playback and drag-to-scroll near edges
• handlePointerDown checks e.button !== 0 to ignore right-clicks

[miguel-heygen]

Great catches Vance!

Addressed:

• ✅ [Critical] Tests now import the real generateTicks and formatTick from Timeline.tsx (exported). No more duplicated logic — tests validate the actual shipped code.
• ✅ onClipChange unused prop removed from Timeline component
• ✅ trackOffsets (drag-related) removed entirely

Not addressed (tracked for follow-up):

• useTimelinePlayer 25-attempt polling limit — will add user-visible feedback on timeout
• Speed menu click-outside-to-close — will add in UI polish pass

[miguel-heygen]

Merge activity

• Mar 28, 7:59 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• Mar 28, 8:00 AM UTC: Graphite couldn't merge this pull request because a downstack PR feat(studio): add TimelineClip and thumbnail components #62 failed to merge.
• Mar 28, 5:19 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Mar 28, 5:40 PM UTC: The Graphite merge of this pull request was cancelled.