@bycrux/editor 0.5.2 → 0.6.0

package/src/video/preview/PreviewPlayer.tsx

@@ -6,6 +6,7 @@ import { getOverlayDesignCanvas } from '../design-canvas'
 import { useDragOverlay } from './useDragOverlay'
 import OverlayItemsLayer from './OverlayItemsLayer'
 import { useVideoPlayback } from './useVideoPlayback'
+import { sourceCropVideoStyle } from './sourceCropStyle'
 import CarouselPreview from './CarouselPreview'
 
 // ---------------------------------------------------------------------------
@@ -42,6 +43,12 @@ export default function PreviewPlayer({
 
   const containerRef = useRef<HTMLDivElement>(null)
   const [renderScale, setRenderScale] = useState<number>(1)
+  // Frame pixel size — used to compute the sourceCrop CSS transform that mirrors
+  // render's crop→contain. Tracked alongside renderScale from the same observer.
+  const [frameSize, setFrameSize] = useState<{ w: number; h: number }>({ w: 0, h: 0 })
+  // Intrinsic dims of the loaded source <video>, captured on loadedmetadata.
+  // Falls back to a clip's own sourceWidth/sourceHeight when present.
+  const [videoDims, setVideoDims] = useState<{ w: number; h: number } | null>(null)
 
   // Track container size to scale overlay components from 1080×1920 → preview size
   useEffect(() => {
@@ -49,6 +56,7 @@ export default function PreviewPlayer({
     if (!el) return
     const obs = new ResizeObserver(([entry]) => {
       setRenderScale(entry.contentRect.width / RENDER_W)
+      setFrameSize({ w: entry.contentRect.width, h: entry.contentRect.height })
     })
     obs.observe(el)
     return () => obs.disconnect()
@@ -81,6 +89,36 @@ export default function PreviewPlayer({
 
   const captionTrack = useMemo(() => project.captions, [project])
 
+  // ── sourceCrop reflection ───────────────────────────────────────────────────
+  // Mirror render's crop→contain so the preview frames the clip the way the
+  // final output will. The active clip is the one whose [start, end) contains the
+  // playhead (same selection the playback hook uses internally). Only the active
+  // <video> slot is opaque, so applying the active clip's crop to both slots is
+  // safe — the inactive slot is invisible.
+  const activeClip = useMemo(
+    () => clips.find(c => currentTime >= c.start && currentTime < c.end) ?? clips[clips.length - 1],
+    [clips, currentTime],
+  )
+  const cropStyle = useMemo(() => {
+    const crop = activeClip?.sourceCrop
+    if (!crop) return null
+    const sw = activeClip?.sourceWidth ?? videoDims?.w
+    const sh = activeClip?.sourceHeight ?? videoDims?.h
+    if (!sw || !sh || !frameSize.w || !frameSize.h) return null
+    return sourceCropVideoStyle({
+      crop,
+      sourceWidth: sw,
+      sourceHeight: sh,
+      frameWidth: frameSize.w,
+      frameHeight: frameSize.h,
+    })
+  }, [activeClip, videoDims, frameSize])
+
+  // The default full-frame style (no crop). object-contain letterboxes the source.
+  const baseVideoStyle = cropStyle
+    ? { ...cropStyle }
+    : { position: 'absolute' as const, inset: 0, width: '100%', height: '100%', objectFit: 'contain' as const }
+
   return (
     <div ref={containerRef} className="relative bg-black h-full max-w-full overflow-hidden rounded" style={{ aspectRatio: `${RENDER_W} / ${RENDER_H}`, isolation: 'isolate' }}>
       {isCanvasProject ? (
@@ -94,24 +132,24 @@ export default function PreviewPlayer({
           {/* Slot 0 */}
           <video
             ref={video0Ref}
-            className="absolute inset-0 w-full h-full object-contain"
+            onLoadedMetadata={(e) => { const v = e.currentTarget; if (v.videoWidth && v.videoHeight) setVideoDims({ w: v.videoWidth, h: v.videoHeight }) }}
             onTimeUpdate={() => { if (activeSlotRef.current === 0) handleTimeUpdate() }}
             onEnded={() => { if (activeSlotRef.current === 0) handleEnded() }}
             onPlay={() => { if (activeSlotRef.current === 0) setIsPlaying(true) }}
             onPause={() => { if (activeSlotRef.current === 0) handlePause() }}
             playsInline
-            style={{ opacity: showVideo && activeSlot === 0 ? 1 : 0, pointerEvents: activeSlot === 0 ? 'auto' : 'none', zIndex: activeSlot === 0 ? 1 : 0 }}
+            style={{ ...baseVideoStyle, opacity: showVideo && activeSlot === 0 ? 1 : 0, pointerEvents: activeSlot === 0 ? 'auto' : 'none', zIndex: activeSlot === 0 ? 1 : 0 }}
           />
           {/* Slot 1 */}
           <video
             ref={video1Ref}
-            className="absolute inset-0 w-full h-full object-contain"
+            onLoadedMetadata={(e) => { const v = e.currentTarget; if (v.videoWidth && v.videoHeight) setVideoDims({ w: v.videoWidth, h: v.videoHeight }) }}
             onTimeUpdate={() => { if (activeSlotRef.current === 1) handleTimeUpdate() }}
             onEnded={() => { if (activeSlotRef.current === 1) handleEnded() }}
             onPlay={() => { if (activeSlotRef.current === 1) setIsPlaying(true) }}
             onPause={() => { if (activeSlotRef.current === 1) handlePause() }}
             playsInline
-            style={{ opacity: showVideo && activeSlot === 1 ? 1 : 0, pointerEvents: activeSlot === 1 ? 'auto' : 'none', zIndex: activeSlot === 1 ? 1 : 0 }}
+            style={{ ...baseVideoStyle, opacity: showVideo && activeSlot === 1 ? 1 : 0, pointerEvents: activeSlot === 1 ? 'auto' : 'none', zIndex: activeSlot === 1 ? 1 : 0 }}
           />
         </>
       )}

package/src/video/preview/__tests__/sourceCropStyle.test.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect } from 'vitest'
+import { sourceCropVideoStyle } from '../sourceCropStyle'
+
+describe('sourceCropVideoStyle', () => {
+  it('returns null for a full-frame (default) crop', () => {
+    expect(
+      sourceCropVideoStyle({
+        crop: { x: 0, y: 0, w: 1, h: 1 },
+        sourceWidth: 1920, sourceHeight: 1080,
+        frameWidth: 1080, frameHeight: 1920,
+      }),
+    ).toBeNull()
+  })
+
+  it('returns null without source dims', () => {
+    expect(
+      sourceCropVideoStyle({
+        crop: { x: 0.25, y: 0, w: 0.5, h: 1 },
+        sourceWidth: 0, sourceHeight: 0,
+        frameWidth: 1080, frameHeight: 1920,
+      }),
+    ).toBeNull()
+  })
+
+  it('center vertical-strip crop of a landscape source fills a portrait frame', () => {
+    // 1920x1080 source, crop the centre 50% width / full height → 960x1080 region
+    // (aspect 0.888...). Portrait frame 1080x1920 (aspect 0.5625). Crop aspect >
+    // frame aspect → crop fills frame WIDTH, letterboxed vertically.
+    const style = sourceCropVideoStyle({
+      crop: { x: 0.25, y: 0, w: 0.5, h: 1 },
+      sourceWidth: 1920, sourceHeight: 1080,
+      frameWidth: 1080, frameHeight: 1920,
+    })!
+    expect(style).not.toBeNull()
+    // videoWRatio = cropWRatio(1) / crop.w(0.5) = 2 → 200% wide
+    expect(style.width).toBe('200%')
+    // cropAspect = (1920*0.5)/(1080*1) = 0.8889; frameAspect = 0.5625
+    // cropHRatio = frameAspect/cropAspect = 0.6328; videoHRatio = /h(1) = 0.6328
+    expect(parseFloat(style.height as string)).toBeCloseTo(63.28, 1)
+    // leftRatio = (1-1)/2 - 0.25*2 = -0.5 → -50%
+    expect(style.left).toBe('-50%')
+    // topRatio = (1-0.6328)/2 - 0*... = 0.1836 → ~18.36%
+    expect(parseFloat(style.top as string)).toBeCloseTo(18.36, 1)
+    expect(style.objectFit).toBe('fill')
+  })
+
+  it('crop region matching frame aspect fills the frame exactly (no letterbox)', () => {
+    // Portrait source 1080x1920, crop a centred 9:16 sub-rect → same aspect as a
+    // 1080x1920 frame. Should fill edge-to-edge.
+    const style = sourceCropVideoStyle({
+      crop: { x: 0.1, y: 0.1, w: 0.8, h: 0.8 },
+      sourceWidth: 1080, sourceHeight: 1920,
+      frameWidth: 1080, frameHeight: 1920,
+    })!
+    expect(style.width).toBe('125%')   // 1/0.8
+    expect(style.height).toBe('125%')  // 1/0.8
+    // left/top = (1-1)/2 - 0.1*1.25 = -0.125 → -12.5%
+    expect(style.left).toBe('-12.5%')
+    expect(style.top).toBe('-12.5%')
+  })
+})

package/src/video/preview/__tests__/useVideoPlayback.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest'
+import { effectiveInPoint, effectiveOutPoint } from '../useVideoPlayback'
+
+// These helpers mirror render's collectAllItems rebase (render.js): when the
+// preview loads a normalizedSrc window cache (which starts at 0 and covers
+// [inPoint, outPoint] of the original), the effective seek inPoint is 0 and the
+// outPoint is rebased to the window length. nobg_preview_src is the full source
+// and must NOT rebase.
+
+describe('effectiveInPoint', () => {
+  it('rebases to 0 when normalizedSrc is the chosen src', () => {
+    expect(effectiveInPoint({ inPoint: 496.92, normalizedSrc: '/cache/window.mp4' })).toBe(0)
+  })
+
+  it('returns clip.inPoint when there is no normalizedSrc', () => {
+    expect(effectiveInPoint({ inPoint: 496.92, src: '/orig.mov' })).toBe(496.92)
+  })
+
+  it('does NOT rebase when nobg_preview_src takes precedence over normalizedSrc', () => {
+    // nobg_preview_src wins in playbackSrcFor and covers the full source.
+    expect(
+      effectiveInPoint({ inPoint: 496.92, nobg_preview_src: '/nobg.webm', normalizedSrc: '/cache/window.mp4' }),
+    ).toBe(496.92)
+  })
+
+  it('defaults to 0 when inPoint is absent and no cache', () => {
+    expect(effectiveInPoint({ src: '/orig.mov' })).toBe(0)
+  })
+})
+
+describe('effectiveOutPoint', () => {
+  it('rebases to the window length (outPoint - inPoint) for a normalizedSrc cache', () => {
+    // original inPoint 496.92, outPoint 514.92 → 18s window cache
+    expect(
+      effectiveOutPoint({ inPoint: 496.92, outPoint: 514.92, normalizedSrc: '/cache/window.mp4' }),
+    ).toBeCloseTo(18, 5)
+  })
+
+  it('returns the stored outPoint when there is no cache', () => {
+    expect(effectiveOutPoint({ inPoint: 496.92, outPoint: 514.92, src: '/orig.mov' })).toBe(514.92)
+  })
+
+  it('does NOT rebase when nobg_preview_src takes precedence', () => {
+    expect(
+      effectiveOutPoint({ inPoint: 496.92, outPoint: 514.92, nobg_preview_src: '/nobg.webm', normalizedSrc: '/c.mp4' }),
+    ).toBe(514.92)
+  })
+
+  it('returns undefined when no outPoint is stored', () => {
+    expect(effectiveOutPoint({ inPoint: 496.92, normalizedSrc: '/cache/window.mp4' })).toBeUndefined()
+  })
+})

package/src/video/preview/sourceCropStyle.ts

@@ -0,0 +1,70 @@
+// Pure CSS-math for reflecting a clip's `sourceCrop` in the preview <video>.
+//
+// Render (montaj_assets/render/encode-segment.js:buildVideoItemFilterParts)
+// applies sourceCrop as an ffmpeg `crop=cw:ch:cx:cy` BEFORE the
+// `scale=...:force_original_aspect_ratio=decrease` + `pad` step — i.e. it crops
+// the source to the sub-rect, then CONTAIN-fits that sub-rect into the output
+// frame (letterboxing if the sub-rect's aspect differs from the frame).
+//
+// This helper produces the equivalent CSS for a <video> sitting in an
+// overflow-hidden frame box (the player surface, fixed at the output aspect):
+// size the video larger than the frame and translate it so only the crop
+// sub-rect shows, scaled to contain within the frame. All values are ratios of
+// the frame's own dimensions, so the result is frame-pixel-size-independent and
+// can be expressed purely in `%`.
+//
+// Requires the source's intrinsic pixel dims (to know the crop region's aspect
+// ratio). Without them — or without a crop — returns null and the caller keeps
+// the default `object-contain` full-frame behavior.
+
+import type { CSSProperties } from 'react'
+
+export interface SourceCropInput {
+  crop: { x: number; y: number; w: number; h: number }
+  sourceWidth: number
+  sourceHeight: number
+  frameWidth: number
+  frameHeight: number
+}
+
+export function sourceCropVideoStyle(input: SourceCropInput): CSSProperties | null {
+  const { crop, sourceWidth, sourceHeight, frameWidth, frameHeight } = input
+  if (!sourceWidth || !sourceHeight || !frameWidth || !frameHeight) return null
+  if (!crop || crop.w <= 0 || crop.h <= 0) return null
+  // A full-frame crop (the default) needs no special handling.
+  if (crop.x === 0 && crop.y === 0 && crop.w === 1 && crop.h === 1) return null
+
+  const frameAspect = frameWidth / frameHeight
+  const cropAspect = (sourceWidth * crop.w) / (sourceHeight * crop.h)
+
+  // Contain-fit the crop region into the frame → its displayed size as a ratio
+  // of the frame's own dimensions.
+  let cropWRatio: number
+  let cropHRatio: number
+  if (cropAspect >= frameAspect) {
+    cropWRatio = 1
+    cropHRatio = frameAspect / cropAspect
+  } else {
+    cropHRatio = 1
+    cropWRatio = cropAspect / frameAspect
+  }
+
+  // The full (uncropped) video's displayed size as a ratio of the frame.
+  const videoWRatio = cropWRatio / crop.w
+  const videoHRatio = cropHRatio / crop.h
+
+  // Position the video so the crop sub-rect's top-left aligns, then center the
+  // contained region within the frame (the letterbox offset).
+  const leftRatio = (1 - cropWRatio) / 2 - crop.x * videoWRatio
+  const topRatio = (1 - cropHRatio) / 2 - crop.y * videoHRatio
+
+  return {
+    position: 'absolute',
+    width: `${videoWRatio * 100}%`,
+    height: `${videoHRatio * 100}%`,
+    left: `${leftRatio * 100}%`,
+    top: `${topRatio * 100}%`,
+    objectFit: 'fill',
+    maxWidth: 'none',
+  }
+}

package/src/video/preview/useVideoPlayback.ts

@@ -26,8 +26,47 @@ interface MontajVideoElement extends HTMLVideoElement {
  * Note: `nobg_src` is the ProRes 4444 render-only artifact and is NEVER
  * loaded into a `<video>` element — browsers can't decode ProRes.
  */
-function playbackSrcFor(clip: { src?: string; nobg_preview_src?: string }): string {
-  return clip.nobg_preview_src ?? clip.src ?? ''
+function playbackSrcFor(clip: { src?: string; nobg_preview_src?: string; normalizedSrc?: string }): string {
+  return clip.nobg_preview_src ?? clip.normalizedSrc ?? clip.src ?? ''
+}
+
+/**
+ * The inPoint the preview should SEEK to for this clip, accounting for the
+ * normalizedSrc cache rebase.
+ *
+ * A `normalizedSrc` cache covers exactly [inPoint, outPoint] of the original
+ * and STARTS AT 0 (it is only `outPoint - inPoint` seconds long). When
+ * `playbackSrcFor` chooses that cache as the playback src, seeking to the
+ * original `clip.inPoint` (e.g. 496.92) would land far past the end of the
+ * short file → the browser clamps to EOF and the preview freezes on the last
+ * frame. So when the cache is the chosen src, the effective inPoint is 0 and
+ * the window maps to [0, outPoint - inPoint].
+ *
+ * This mirrors render's `collectAllItems` (montaj_assets/render/render.js),
+ * which substitutes `item.normalizedSrc` as the src AND rebases inPoint to 0.
+ *
+ * The rebase applies ONLY when the cache is actually the chosen src.
+ * `nobg_preview_src` takes precedence in `playbackSrcFor` and is NOT a window
+ * cache (it covers the full source), so it keeps the original inPoint — exactly
+ * as render's nobg path does.
+ */
+export function effectiveInPoint(clip: { inPoint?: number; nobg_preview_src?: string; normalizedSrc?: string; src?: string }): number {
+  const usingNormalizedCache = !clip.nobg_preview_src && !!clip.normalizedSrc
+  return usingNormalizedCache ? 0 : (clip.inPoint ?? 0)
+}
+
+/**
+ * The outPoint in the loaded src's own timeline. For a normalizedSrc cache the
+ * stored `clip.outPoint` is in ORIGINAL-source coordinates (e.g. 514.92) while
+ * the cache plays in [0, outPoint - inPoint]; the boundary/loop checks compare
+ * against `video.currentTime` (cache time), so the outPoint must be rebased to
+ * the window length. Returns undefined when no outPoint is stored, so callers
+ * keep their existing fallback (clip.end - clip.start + effectiveInPoint).
+ */
+export function effectiveOutPoint(clip: { inPoint?: number; outPoint?: number; nobg_preview_src?: string; normalizedSrc?: string; src?: string }): number | undefined {
+  if (clip.outPoint == null) return undefined
+  const usingNormalizedCache = !clip.nobg_preview_src && !!clip.normalizedSrc
+  return usingNormalizedCache ? clip.outPoint - (clip.inPoint ?? 0) : clip.outPoint
 }
 
 export function useVideoPlayback(
@@ -437,7 +476,7 @@ export function useVideoPlayback(
     setActiveSlot(0)
     preloadSrcRef.current = ''
     video.src = fileUrlRef.current(playbackSrcFor(clips[0]))
-    video.currentTime = clips[0].inPoint ?? 0
+    video.currentTime = effectiveInPoint(clips[0])
     applyClipVolume(clips[0])
     // Clear inactive slot
     const inactive = getInactiveVideo()
@@ -488,7 +527,7 @@ export function useVideoPlayback(
     activeIdxRef.current = ni
     if (nv) {
       const src = fileUrlRef.current(playbackSrcFor(nc))
-      if (preloadSrcRef.current !== src) { nv.src = src; nv.currentTime = nc.inPoint ?? 0 }
+      if (preloadSrcRef.current !== src) { nv.src = src; nv.currentTime = effectiveInPoint(nc) }
       const gain = ensureVideoGain(ns)
       if (gain) gain.gain.value = nc.muted ? 0 : (nc.volume ?? 1)
       nv.play().catch(() => {})
@@ -542,9 +581,10 @@ export function useVideoPlayback(
         if (inactive) { inactive.pause(); inactive.removeAttribute('src') }
       }
       applyClipVolume(clip)
-      const inPoint = clip.inPoint ?? 0
-      if (clip.loop && clip.outPoint) {
-        const loopDur = clip.outPoint - inPoint
+      const inPoint = effectiveInPoint(clip)
+      const clipOutPoint = effectiveOutPoint(clip)
+      if (clip.loop && clipOutPoint != null) {
+        const loopDur = clipOutPoint - inPoint
         const elapsed = currentTime - clip.start
         const loops   = Math.floor(elapsed / loopDur)
         loopOffsetRef.current = loops * loopDur
@@ -577,7 +617,8 @@ export function useVideoPlayback(
     const clip = clips[activeIdxRef.current]
     if (!clip) return
 
-    const outPoint = clip.outPoint ?? clip.end - clip.start + (clip.inPoint ?? 0)
+    const clipInPoint = effectiveInPoint(clip)
+    const outPoint = effectiveOutPoint(clip) ?? clip.end - clip.start + clipInPoint
 
     // Preload next clip into inactive slot ~1s before end
     const timeLeft = outPoint - video.currentTime
@@ -589,7 +630,7 @@ export function useVideoPlayback(
         if (inactiveVideo && preloadSrcRef.current !== nextSrc) {
           preloadSrcRef.current = nextSrc
           inactiveVideo.src = nextSrc
-          inactiveVideo.currentTime = clips[nextIdx].inPoint ?? 0
+          inactiveVideo.currentTime = effectiveInPoint(clips[nextIdx])
           const inactiveSlot = (1 - slot) as 0 | 1
           const nextGain = ensureVideoGain(inactiveSlot)
           if (nextGain) nextGain.gain.value = clips[nextIdx].muted ? 0 : (clips[nextIdx].volume ?? 1)
@@ -599,12 +640,12 @@ export function useVideoPlayback(
 
     if (video.currentTime >= outPoint) {
       if (clip.loop) {
-        const projectT = clip.start + loopOffsetRef.current + (video.currentTime - (clip.inPoint ?? 0))
+        const projectT = clip.start + loopOffsetRef.current + (video.currentTime - clipInPoint)
         if (projectT < clip.end) {
           // Still within the clip's project window — loop the source video
-          const loopDur = outPoint - (clip.inPoint ?? 0)
+          const loopDur = outPoint - clipInPoint
           loopOffsetRef.current += loopDur
-          video.currentTime = clip.inPoint ?? 0
+          video.currentTime = clipInPoint
           return
         }
         // Project end reached — fall through to the stop/next-clip logic below
@@ -639,7 +680,7 @@ export function useVideoPlayback(
             const nextSrc = fileUrlRef.current(playbackSrcFor(next))
             if (preloadSrcRef.current !== nextSrc) {
               nextVideo.src = nextSrc
-              nextVideo.currentTime = next.inPoint ?? 0
+              nextVideo.currentTime = effectiveInPoint(next)
             }
             const nextGain = ensureVideoGain(nextSlot)
             if (nextGain) nextGain.gain.value = next.muted ? 0 : (next.volume ?? 1)
@@ -674,7 +715,7 @@ export function useVideoPlayback(
       return
     }
 
-    const t = clip.start + loopOffsetRef.current + (video.currentTime - (clip.inPoint ?? 0))
+    const t = clip.start + loopOffsetRef.current + (video.currentTime - clipInPoint)
 
     // For looping clips, stop when project time reaches clip.end mid-loop
     if (clip.loop && t >= clip.end) {

package/src/video/timeline/Timeline.tsx

@@ -47,10 +47,14 @@ interface TimelineProps {
    *  regenQueue, storyboard, and onSave — none of which the package types know.
    *  Absent → the subcut tool is simply not rendered. */
   renderSubcutRegen?: (ctx: { clipId: string; onClose: () => void }) => ReactNode
+  /** Opens the caption-regeneration modal. Threaded down to TranscriptPanel.
+   *  Provided only when the host adapter supports `generateCaptions`; absent →
+   *  the "Regenerate" button is hidden. */
+  onRegenerateCaptions?: () => void
 }
 
 
-export default function Timeline({ project, currentTime, onTimeUpdate, onProjectChange, onCaptionEdit, onOverlayEdit, selectedIds = [], onSelectIds, onSplit, onCut, onInspectClip, onInspectAudio, rippleMode = false, getWaveformChunks, resolveFilePath, regenEnabled, isClipQueued, renderSubcutRegen }: TimelineProps) {
+export default function Timeline({ project, currentTime, onTimeUpdate, onProjectChange, onCaptionEdit, onOverlayEdit, selectedIds = [], onSelectIds, onSplit, onCut, onInspectClip, onInspectAudio, rippleMode = false, getWaveformChunks, resolveFilePath, regenEnabled, isClipQueued, renderSubcutRegen, onRegenerateCaptions }: TimelineProps) {
   const primarySelectedId = selectedIds[0] ?? null
 
   // Click/shift-click handler — additive selection on shift or meta (cmd/ctrl).
@@ -355,6 +359,7 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
         onCaptionEdit={onCaptionEdit}
         onProjectChange={onProjectChange}
         onExpand={() => setTranscriptModalOpen(true)}
+        onRegenerateCaptions={onRegenerateCaptions}
       />
 
       {/* ── Transcript modal ── */}

package/src/video/timeline/TranscriptPanel.tsx

@@ -10,9 +10,12 @@ interface TranscriptPanelProps {
   onCaptionEdit?: (project: Project) => void
   onProjectChange?: (project: Project) => void
   onExpand: () => void
+  /** Opens the caption-regeneration modal. Provided only when the host adapter
+   *  supports `generateCaptions`; absent → the "Regenerate" button is hidden. */
+  onRegenerateCaptions?: () => void
 }
 
-export default function TranscriptPanel({ project, captionTrack, currentTime, onCaptionEdit, onProjectChange, onExpand }: TranscriptPanelProps) {
+export default function TranscriptPanel({ project, captionTrack, currentTime, onCaptionEdit, onProjectChange, onExpand, onRegenerateCaptions }: TranscriptPanelProps) {
   const segs = captionTrack?.segments ?? []
   // Find active segment index
   const activeIdx = segs.findIndex(s => currentTime >= s.start && currentTime < s.end)
@@ -49,6 +52,14 @@ export default function TranscriptPanel({ project, captionTrack, currentTime, on
               </button>
             )
           })}
+          {onRegenerateCaptions && (
+            <button
+              className="text-[10px] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white border border-gray-300 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-500 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded px-2 py-0.5 transition-all"
+              onClick={() => onRegenerateCaptions?.()}
+            >
+              Regenerate
+            </button>
+          )}
           {segs.length > 0 && (
             <button
               className="text-[10px] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white border border-gray-300 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-500 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded px-2 py-0.5 transition-all"