@bycrux/editor 0.5.2 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bycrux/editor",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "private": false,
   "type": "module",
   "exports": {

package/src/crop/VideoSourceCropOverlay.tsx

@@ -0,0 +1,249 @@
+import * as React from 'react'
+import type { VisualItem } from '../schema'
+import {
+  renderedSourceRect,
+  fractionToWrapperPx,
+  applyCropHandleDrag,
+  type CropFraction,
+  type CropHandle,
+} from './crop-math'
+
+// Sibling of CanvasCropOverlay, typed to a tracks[0] VisualItem (video) instead
+// of an ImageElement. The full source clip is letterboxed into the preview via a
+// muted <video>, an 8-handle free-form crop window is drawn on top, and handle
+// drags emit the updated `sourceCrop` as source fractions clamped to [0, 1].
+//
+// Source dims come either from the item (sourceWidth/sourceHeight, set on a prior
+// crop) or from the <video>'s videoWidth/videoHeight on loadedmetadata — exactly
+// analogous to CanvasCropOverlay reading naturalWidth/Height from <img> onLoad.
+
+const CROP_HANDLES: CropHandle[] = ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se']
+
+const HANDLE_OFFSET: Record<CropHandle, { dx: 0 | 0.5 | 1; dy: 0 | 0.5 | 1; cursor: string }> = {
+  nw: { dx: 0,   dy: 0,   cursor: 'nw-resize' },
+  n:  { dx: 0.5, dy: 0,   cursor: 'n-resize'  },
+  ne: { dx: 1,   dy: 0,   cursor: 'ne-resize' },
+  w:  { dx: 0,   dy: 0.5, cursor: 'w-resize'  },
+  e:  { dx: 1,   dy: 0.5, cursor: 'e-resize'  },
+  sw: { dx: 0,   dy: 1,   cursor: 'sw-resize' },
+  s:  { dx: 0.5, dy: 1,   cursor: 's-resize'  },
+  se: { dx: 1,   dy: 1,   cursor: 'se-resize' },
+}
+
+const DEFAULT_CROP: CropFraction = { x: 0, y: 0, w: 1, h: 1 }
+
+function clampFraction(c: CropFraction): CropFraction {
+  const x = Math.min(1, Math.max(0, c.x))
+  const y = Math.min(1, Math.max(0, c.y))
+  return {
+    x,
+    y,
+    w: Math.min(1 - x, Math.max(0, c.w)),
+    h: Math.min(1 - y, Math.max(0, c.h)),
+  }
+}
+
+export type VideoSourceCropOverlayProps = {
+  /** The tracks[0] video item being cropped. */
+  item: VisualItem
+  /**
+   * Host-supplied resolver for the clip's preview URL. Implement on the caller
+   * side as `(item) => adapter.fileUrl(item.nobg_preview_src ?? item.src)`.
+   */
+  resolveSrc: (item: VisualItem) => string
+  /** Wrapper width in CSS px (the rect the overlay fills — the preview area). */
+  wrapperWidth: number
+  /** Wrapper height in CSS px. */
+  wrapperHeight: number
+  /** Called once on pointer-up (drag end) with the final clamped [0,1] fractions. */
+  onChange: (next: CropFraction) => void
+  /** Called once when the <video> fires loadedmetadata with the source's intrinsic dims. */
+  onSrcDimsLoaded: (dims: { width: number; height: number }) => void
+}
+
+export function VideoSourceCropOverlay({
+  item,
+  resolveSrc,
+  wrapperWidth,
+  wrapperHeight,
+  onChange,
+  onSrcDimsLoaded,
+}: VideoSourceCropOverlayProps) {
+  const srcUrl = resolveSrc(item)
+
+  // Local mirror of dims loaded from the <video> when the item doesn't already
+  // carry them, so the crop window renders as soon as metadata arrives.
+  const [loadedDims, setLoadedDims] = React.useState<{ width: number; height: number } | null>(null)
+  const srcDims =
+    item.sourceWidth && item.sourceHeight
+      ? { width: item.sourceWidth, height: item.sourceHeight }
+      : loadedDims
+
+  // Prop-driven crop (source of truth when not dragging)
+  const propCrop = item.sourceCrop ?? DEFAULT_CROP
+
+  // In-flight drag crop — non-null only during an active handle drag.
+  // While dragging, the rendered window follows this local state for smoothness.
+  // On pointer-up it's cleared after calling onChange once with the final value.
+  const [liveCrop, setLiveCrop] = React.useState<CropFraction | null>(null)
+  // Ref mirror so onHandlePointerUp always reads the latest value regardless of closure age.
+  const liveCropRef = React.useRef<CropFraction | null>(null)
+
+  // The crop we actually render: live state during drag, props otherwise.
+  const localCrop = liveCrop ?? propCrop
+
+  const rendered =
+    srcDims && wrapperWidth > 0 && wrapperHeight > 0
+      ? renderedSourceRect({
+          wrapperW: wrapperWidth,
+          wrapperH: wrapperHeight,
+          srcWidth: srcDims.width,
+          srcHeight: srcDims.height,
+        })
+      : null
+  const windowPx = rendered ? fractionToWrapperPx({ crop: localCrop, rendered }) : null
+
+  const dragStateRef = React.useRef<{
+    handle: CropHandle
+    startClient: { x: number; y: number }
+    startCrop: CropFraction
+  } | null>(null)
+
+  const onHandlePointerDown = (handle: CropHandle, e: React.PointerEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    e.currentTarget.setPointerCapture?.(e.pointerId)
+    dragStateRef.current = {
+      handle,
+      startClient: { x: e.clientX, y: e.clientY },
+      startCrop: propCrop,
+    }
+  }
+
+  const onHandlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    const drag = dragStateRef.current
+    if (!drag || !srcDims) return
+    const dx = e.clientX - drag.startClient.x
+    const dy = e.clientY - drag.startClient.y
+    const next = applyCropHandleDrag({
+      handle: drag.handle,
+      initialCrop: drag.startCrop,
+      deltaPx: { x: dx, y: dy },
+      wrapperW: wrapperWidth,
+      wrapperH: wrapperHeight,
+      srcWidth: srcDims.width,
+      srcHeight: srcDims.height,
+    })
+    // Accumulate in local state for smooth visual feedback — do NOT call onChange yet.
+    const clamped = clampFraction(next)
+    liveCropRef.current = clamped
+    setLiveCrop(clamped)
+  }
+
+  const onHandlePointerUp = () => {
+    const drag = dragStateRef.current
+    dragStateRef.current = null
+    const final = liveCropRef.current
+    liveCropRef.current = null
+    setLiveCrop(null)
+    if (drag && final !== null) {
+      // Call onChange exactly once with the final value.
+      onChange(final)
+    }
+  }
+
+  return (
+    <div
+      style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'auto' }}
+      onPointerDown={(e) => {
+        e.stopPropagation()
+      }}
+    >
+      {/* Letterbox preview of the full source clip */}
+      <video
+        src={srcUrl}
+        muted
+        playsInline
+        preload="metadata"
+        onLoadedMetadata={(e) => {
+          const v = e.currentTarget
+          const dims = { width: v.videoWidth, height: v.videoHeight }
+          setLoadedDims(dims)
+          onSrcDimsLoaded(dims)
+        }}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          height: '100%',
+          objectFit: 'contain',
+          pointerEvents: 'none',
+        }}
+      />
+
+      {windowPx && (
+        <>
+          {/* Dark dimming mask outside the crop window */}
+          <div
+            data-testid="crop-dim"
+            style={{
+              position: 'absolute',
+              inset: 0,
+              background: 'rgba(0, 0, 0, 0.55)',
+              clipPath: `polygon(
+                0 0, 100% 0, 100% 100%, 0 100%, 0 0,
+                ${windowPx.x}px ${windowPx.y}px,
+                ${windowPx.x}px ${windowPx.y + windowPx.h}px,
+                ${windowPx.x + windowPx.w}px ${windowPx.y + windowPx.h}px,
+                ${windowPx.x + windowPx.w}px ${windowPx.y}px,
+                ${windowPx.x}px ${windowPx.y}px
+              )`,
+              pointerEvents: 'none',
+            }}
+          />
+
+          {/* Crop window border */}
+          <div
+            data-testid="crop-window"
+            style={{
+              position: 'absolute',
+              left: windowPx.x,
+              top: windowPx.y,
+              width: windowPx.w,
+              height: windowPx.h,
+              outline: '2px solid var(--editor-selection)',
+              pointerEvents: 'none',
+            }}
+          />
+
+          {/* 8 resize handles */}
+          {CROP_HANDLES.map((handle) => {
+            const o = HANDLE_OFFSET[handle]
+            return (
+              <div
+                key={handle}
+                data-testid={`crop-handle-${handle}`}
+                onPointerDown={(e) => onHandlePointerDown(handle, e)}
+                onPointerMove={onHandlePointerMove}
+                onPointerUp={onHandlePointerUp}
+                style={{
+                  position: 'absolute',
+                  left: windowPx.x + o.dx * windowPx.w - 6,
+                  top: windowPx.y + o.dy * windowPx.h - 6,
+                  width: 12,
+                  height: 12,
+                  backgroundColor: '#fff',
+                  border: '1.5px solid var(--editor-selection)',
+                  borderRadius: 2,
+                  cursor: o.cursor,
+                  zIndex: 10,
+                  pointerEvents: 'auto',
+                  touchAction: 'none',
+                }}
+              />
+            )
+          })}
+        </>
+      )}
+    </div>
+  )
+}

package/src/crop/__tests__/VideoSourceCropOverlay.test.tsx

@@ -0,0 +1,105 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { fireEvent, render, cleanup } from '@testing-library/react'
+import type { VisualItem } from '../../schema'
+import { VideoSourceCropOverlay } from '../VideoSourceCropOverlay'
+
+afterEach(() => cleanup())
+
+// Aspect-matched fixture: wrapper 400×500, source 800×1000. The rendered source
+// fills the wrapper with no letterbox, so crop fractions map 1:1 onto wrapper px
+// (x over 400, y over 500). Initial crop (0.2,0.2,0.6,0.6) → px rect (80,100)–(320,400).
+function makeItem(overrides: Partial<VisualItem> = {}): VisualItem {
+  return {
+    id: 'v1',
+    type: 'video',
+    src: '/clip.mov',
+    start: 0,
+    end: 5,
+    sourceWidth: 800,
+    sourceHeight: 1000,
+    sourceCrop: { x: 0.2, y: 0.2, w: 0.6, h: 0.6 },
+    ...overrides,
+  }
+}
+
+describe('VideoSourceCropOverlay', () => {
+  it('renders the 8 crop handles for a video item with known source dims', () => {
+    const { getByTestId } = render(
+      <VideoSourceCropOverlay
+        item={makeItem()}
+        resolveSrc={() => '/clip.mov'}
+        wrapperWidth={400}
+        wrapperHeight={500}
+        onChange={vi.fn()}
+        onSrcDimsLoaded={vi.fn()}
+      />,
+    )
+    for (const h of ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se']) {
+      expect(getByTestId(`crop-handle-${h}`)).toBeTruthy()
+    }
+  })
+
+  it('emits onChange exactly once on pointer-up (not per move) with the final clamped [0,1] fractions', () => {
+    const onChange = vi.fn()
+    const { getByTestId } = render(
+      <VideoSourceCropOverlay
+        item={makeItem()}
+        resolveSrc={() => '/clip.mov'}
+        wrapperWidth={400}
+        wrapperHeight={500}
+        onChange={onChange}
+        onSrcDimsLoaded={vi.fn()}
+      />,
+    )
+
+    const se = getByTestId('crop-handle-se')
+    // Simulate a full drag sequence: pointerdown → multiple pointermoves → pointerup.
+    // jsdom has no PointerEvent constructor, so fireEvent.pointer* drops
+    // clientX/Y. Dispatch MouseEvents under the pointer* type names instead —
+    // MouseEvent carries clientX/Y and React listens on the event type string.
+    se.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, clientX: 320, clientY: 400 }))
+    // Multiple intermediate moves — onChange must NOT be called during these.
+    se.dispatchEvent(new MouseEvent('pointermove', { bubbles: true, clientX: 290, clientY: 400 }))
+    se.dispatchEvent(new MouseEvent('pointermove', { bubbles: true, clientX: 270, clientY: 400 }))
+
+    // onChange must not fire during move — only after release.
+    expect(onChange).not.toHaveBeenCalled()
+
+    // Release — final position: SE handle moved left 50 px from start (320 → 270).
+    se.dispatchEvent(new MouseEvent('pointerup', { bubbles: true, clientX: 270, clientY: 400 }))
+
+    // onChange called exactly once on pointer-up.
+    expect(onChange).toHaveBeenCalledTimes(1)
+
+    const next = onChange.mock.calls[0][0]
+    // dx = -50 px over a 400-px-wide rendered source = -0.125 fractions.
+    expect(next.x).toBeCloseTo(0.2)
+    expect(next.y).toBeCloseTo(0.2)
+    expect(next.w).toBeCloseTo(0.6 - 50 / 400) // 0.475
+    expect(next.h).toBeCloseTo(0.6)
+    // All emitted fractions stay within [0, 1].
+    for (const v of [next.x, next.y, next.w, next.h]) {
+      expect(v).toBeGreaterThanOrEqual(0)
+      expect(v).toBeLessThanOrEqual(1)
+    }
+  })
+
+  it('reads source dims from the <video> loadedmetadata when not supplied on the item', () => {
+    const onSrcDimsLoaded = vi.fn()
+    const { container } = render(
+      <VideoSourceCropOverlay
+        item={makeItem({ sourceWidth: undefined, sourceHeight: undefined })}
+        resolveSrc={() => '/clip.mov'}
+        wrapperWidth={400}
+        wrapperHeight={500}
+        onChange={vi.fn()}
+        onSrcDimsLoaded={onSrcDimsLoaded}
+      />,
+    )
+    const video = container.querySelector('video') as HTMLVideoElement
+    Object.defineProperty(video, 'videoWidth', { value: 800, configurable: true })
+    Object.defineProperty(video, 'videoHeight', { value: 1000, configurable: true })
+    fireEvent.loadedMetadata(video)
+    expect(onSrcDimsLoaded).toHaveBeenCalledWith({ width: 800, height: 1000 })
+  })
+})

package/src/crop/__tests__/crop-math.test.ts

@@ -55,6 +55,21 @@ describe('wrapperPxToFraction', () => {
   })
 })
 
+describe('video-source round-trip (regression lock: helpers are element-agnostic)', () => {
+  it('12. round-trips a CropFraction through fractionToWrapperPx → wrapperPxToFraction for a 1920×1080 source in a 1080×1920 wrapper', () => {
+    // 1920×1080 landscape video rendered inside a 1080×1920 portrait wrapper.
+    // Source is much wider than the wrapper, so it letterboxes left/right.
+    const rendered = renderedSourceRect({ wrapperW: 1080, wrapperH: 1920, srcWidth: 1920, srcHeight: 1080 })
+    const orig: import('../crop-math').CropFraction = { x: 0.1, y: 0.2, w: 0.6, h: 0.5 }
+    const px = fractionToWrapperPx({ crop: orig, rendered })
+    const back = wrapperPxToFraction({ px, rendered })
+    expect(back.x).toBeCloseTo(orig.x)
+    expect(back.y).toBeCloseTo(orig.y)
+    expect(back.w).toBeCloseTo(orig.w)
+    expect(back.h).toBeCloseTo(orig.h)
+  })
+})
+
 import { applyCropHandleDrag } from '../crop-math'
 
 // Standard fixture: 400x500 element, 800x1000 source — aspect-matched so the

package/src/index.ts

@@ -29,6 +29,8 @@ export type {
   OverlayFactory,
   RenderEvent,
   RenderOptions,
+  CaptionEvent,
+  GenerateCaptionsOptions,
   MediaScope,
   MediaItem,
   GlobalOverlay,

package/src/schema.ts

@@ -76,7 +76,11 @@ export interface VisualItem {
   remove_bg?: boolean     // video type only
   nobg_src?: string         // video type only — ProRes 4444 .mov for final render
   nobg_preview_src?: string // video type only — VP9 WebM with alpha for browser preview
+  normalizedSrc?: string    // derived per-window normalized cache; render/preview prefer it; src stays original
   muted?: boolean         // video type only — suppress audio in preview and render
+  sourceCrop?: { x: number; y: number; w: number; h: number }  // video type only — non-destructive crop of the source clip (0–1 fractions)
+  sourceWidth?: number    // video type only — intrinsic width of the source clip in pixels
+  sourceHeight?: number   // video type only — intrinsic height of the source clip in pixels
   generation?: {            // ai_video only — frozen provenance from Kling generation
     // Single-shot fields (present when multiShot is falsy).
     sceneId?: string
@@ -186,7 +190,7 @@ export interface Slide {
 export interface EditorProject {
   id: string
   status: 'pending' | 'storyboard_ready' | 'draft' | 'final'
-  settings: { resolution: [number, number]; fps?: number; brandKit?: string }
+  settings: { resolution: [number, number]; fps?: number; brandKit?: string; normalize?: 'eager' | 'lazy' }
   name?: string | null
   editingPrompt?: string
   slides?: Slide[]
@@ -196,6 +200,7 @@ export interface EditorProject {
   assets?: Asset[]
   carousel?: { aspect: string }
   profile?: string
+  derivedFrom?: string  // ID of the source project this was derived from (e.g. clips workflow)
   // Host-only / pipeline fields pass through at the type level.
   [key: string]: unknown
 }

package/src/types.ts

@@ -21,6 +21,7 @@ import type {
   CarouselElement,
   ImageElement,
   OverlayElement,
+  Captions,
 } from './schema'
 
 // ── Overlay compiler ─────────────────────────────────────────────────────────
@@ -68,6 +69,35 @@ export interface RenderOptions {
   scale?: number
 }
 
+// ── Caption regeneration ─────────────────────────────────────────────────────
+
+/**
+ * A single frame of caption-regeneration progress. Discriminated on `type`:
+ *  - 'log'   — a human-readable progress line.
+ *  - 'done'  — terminal success; `captions` is the freshly transcribed caption
+ *              track to patch onto the project.
+ *  - 'error' — terminal failure; `message` describes what went wrong (the host
+ *              route may emit `multi_source`/`no_clips`/`empty_keeps` — shown
+ *              verbatim).
+ */
+export type CaptionEvent =
+  | { type: 'log'; message: string }
+  | { type: 'done'; captions: Captions }
+  | { type: 'error'; message: string }
+
+/**
+ * Options for a caption-regeneration request. All optional — the host fills in
+ * sensible defaults (multilingual whisper model + auto-detected language).
+ */
+export interface GenerateCaptionsOptions {
+  /** Whisper model to run (e.g. 'large'). */
+  model?: string
+  /** Source-language hint (e.g. 'es'); omit to auto-detect. */
+  language?: string
+  /** Caption style to seed the regenerated track with. */
+  style?: string
+}
+
 // ── Overlay library types ─────────────────────────────────────────────────────
 // Copied verbatim from Montaj's `ui/src/lib/api.ts` so the package owns the
 // shape the editor consumes. A host's overlay-listing endpoints return these;
@@ -319,6 +349,17 @@ export interface EditorAdapter<P extends Project = Project> {
    * caption support omit this entirely.
    */
   resolveCaptionTemplate?(style: string): string
+
+  /**
+   * Optional: regenerate the project's caption track by re-running multilingual
+   * transcription on the host's sidecar, streaming progress as an async iterable
+   * of `CaptionEvent`s. The iterable completes after a terminal 'done' (carrying
+   * the fresh `Captions`) or 'error'. The host persists the captions server-side;
+   * the editor patches `project.captions` from the 'done' event. Hosts without a
+   * transcription pipeline omit this; the editor feature-detects its absence and
+   * hides the "Regenerate captions" control.
+   */
+  generateCaptions?(id: string, opts?: GenerateCaptionsOptions): AsyncIterable<CaptionEvent>
 }
 
 // ── Theme ────────────────────────────────────────────────────────────────────
@@ -448,6 +489,15 @@ export interface VideoEditorProps<P extends Project = Project> {
   slots?: EditorSlots
   readOnly?: boolean
   onBackToSetup?: () => void
+  /**
+   * Where the host's `slots.assetsPanel` is placed in the review layout:
+   * - `'right'` (default) — a sidebar column to the right of the preview/timeline.
+   *   The historical Montaj-local layout; preferred when horizontal space is ample.
+   * - `'bottom'` — a full-width region stacked below the editor. Used by hosts with
+   *   constrained width (e.g. the Hub editor) where vertical stacking reads better.
+   * The host chooses per deployment; the package defaults to `'right'`.
+   */
+  assetsPlacement?: 'right' | 'bottom'
 
   // ── Host-supplied Montaj-specific UI (render-prop seams) ──────────────────
   // The clip/audio inspector and the subcut-regeneration tool read host-only

package/src/video/CaptionRegenModal.tsx

@@ -0,0 +1,177 @@
+import { useEffect, useRef, useState } from 'react'
+import type { EditorAdapter, Project } from '../types'
+import type { Captions } from '../schema'
+
+interface CaptionRegenModalProps<P extends Project = Project> {
+  projectId: string
+  /** Adapter driving the caption-regeneration stream. Must implement
+   *  `generateCaptions` — callers gate rendering on its presence. */
+  adapter: EditorAdapter<P>
+  /** Fired on terminal success with the freshly transcribed caption track. The
+   *  caller patches `project.captions` from this; the modal then closes. */
+  onDone: (captions: Captions) => void
+  /** Fired when the modal closes (cancel, error dismiss, or post-done). */
+  onClose: () => void
+}
+
+function LogLine({ text }: { text: string }) {
+  let color = 'text-[var(--editor-text)]/60'
+  if (/ready|complete|done|transcribed/i.test(text))      color = 'text-green-400'
+  else if (/transcrib|detecting|loading|model/i.test(text)) color = 'text-sky-400'
+  else if (/extract|building|composing/i.test(text))      color = 'text-amber-400'
+  else if (/error|fail|warn/i.test(text))                 color = 'text-red-400'
+
+  return (
+    <span className={`leading-relaxed whitespace-pre-wrap break-all ${color}`}>
+      {text}
+    </span>
+  )
+}
+
+export default function CaptionRegenModal<P extends Project = Project>({ projectId, adapter, onDone, onClose }: CaptionRegenModalProps<P>) {
+  const [logs, setLogs]     = useState<string[]>([])
+  const [status, setStatus] = useState<'running' | 'done' | 'error'>('running')
+  const [errorMsg, setError] = useState<string | null>(null)
+  const logRef              = useRef<HTMLDivElement>(null)
+  const cancelledRef        = useRef(false)
+  const unmountedRef        = useRef(false)
+  const cleanupTimerRef     = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    // React StrictMode in dev fires mount → cleanup → mount synchronously to
+    // catch effects that aren't idempotent. Triggering transcription is a
+    // non-idempotent effect (spawns sidecar work), so we defer the teardown in
+    // cleanup, and if the next mount fires within the same tick we rescue the
+    // pending teardown — mirroring RenderModal's StrictMode handling.
+    if (cleanupTimerRef.current !== null) {
+      clearTimeout(cleanupTimerRef.current)
+      cleanupTimerRef.current = null
+      unmountedRef.current = false
+      cancelledRef.current = false
+      return scheduleCleanup
+    }
+
+    unmountedRef.current = false
+    cancelledRef.current = false
+
+    void (async () => {
+      try {
+        for await (const ev of adapter.generateCaptions!(projectId)) {
+          if (unmountedRef.current || cancelledRef.current) break
+          if (ev.type === 'log') {
+            setLogs(l => [...l, ev.message])
+          } else if (ev.type === 'done') {
+            setStatus('done')
+            onDone(ev.captions)
+          } else {
+            setError(ev.message)
+            setStatus('error')
+          }
+        }
+      } catch (e) {
+        if (!unmountedRef.current && !cancelledRef.current) {
+          setError(e instanceof Error ? e.message : String(e))
+          setStatus('error')
+        }
+      }
+    })()
+
+    return scheduleCleanup
+
+    function scheduleCleanup() {
+      cleanupTimerRef.current = setTimeout(() => {
+        cleanupTimerRef.current = null
+        unmountedRef.current = true
+      }, 0)
+    }
+  }, [projectId, adapter, onDone])
+
+  // Auto-scroll logs
+  useEffect(() => {
+    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight
+  }, [logs])
+
+  // Escape to close only when not running
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && status !== 'running') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [status, onClose])
+
+  function handleCancel() {
+    cancelledRef.current = true
+    onClose()
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
+      <div className="w-full max-w-3xl bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-xl shadow-2xl flex flex-col overflow-hidden">
+
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--editor-border)]">
+          <div className="flex items-center gap-2.5">
+            {status === 'running' && <span className="w-2 h-2 rounded-full bg-amber-400 animate-pulse" />}
+            {status === 'done'    && <span className="w-2 h-2 rounded-full bg-green-400" />}
+            {status === 'error'   && <span className="w-2 h-2 rounded-full bg-red-400" />}
+            <div className="flex flex-col gap-0.5">
+              <h2 className="text-sm font-semibold text-[var(--editor-text)]">
+                {status === 'running' ? 'Regenerating captions…'
+                  : status === 'done' ? 'Captions regenerated'
+                  : 'Caption regeneration failed'}
+              </h2>
+            </div>
+          </div>
+          {status !== 'running' && (
+            <button onClick={onClose} className="text-[var(--editor-text)]/55 hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
+          )}
+        </div>
+
+        {/* Log output */}
+        <div className="relative">
+          <button
+            onClick={() => navigator.clipboard.writeText(logs.join('\n') + (errorMsg ? '\n' + errorMsg : ''))}
+            className="absolute top-2 right-2 z-10 text-[10px] px-2 py-0.5 rounded bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] hover:border-[var(--editor-border)] transition-colors"
+            title="Copy logs"
+          >
+            Copy
+          </button>
+          <div
+            ref={logRef}
+            className="h-96 overflow-y-auto px-4 py-3 font-mono text-[11px] text-[var(--editor-text)]/80 bg-[var(--editor-surface)] flex flex-col gap-0.5"
+          >
+            {logs.length === 0 && status === 'running' && (
+              <span className="text-[var(--editor-text)]/40 italic">Starting transcription…</span>
+            )}
+            {logs.map((line, i) => (
+              <LogLine key={i} text={line} />
+            ))}
+            {status === 'error' && errorMsg && (
+              <span className="text-red-400 mt-1">{errorMsg}</span>
+            )}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-[var(--editor-border)]">
+          {status === 'running' ? (
+            <button
+              onClick={handleCancel}
+              className="text-sm px-4 py-1.5 rounded-md bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)]/80 hover:bg-red-900/40 hover:border-red-700 hover:text-red-300 transition-colors"
+            >
+              Cancel
+            </button>
+          ) : (
+            <button
+              onClick={onClose}
+              className="text-sm px-4 py-1.5 rounded-md bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)] hover:opacity-90 transition-colors"
+            >
+              Close
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}