@bycrux/editor 0.7.4 → 0.8.1

package/package.json

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

package/src/index.ts

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

package/src/types.ts

@@ -69,6 +69,31 @@ export interface RenderOptions {
   scale?: number
 }
 
+/**
+ * Coarse phase of an async render pipeline. Ordered roughly by execution order;
+ * hosts may skip phases that don't apply to their pipeline.
+ */
+export type RenderPhase = 'preparing' | 'rendering' | 'captions' | 'encoding' | 'saving' | 'done'
+
+/**
+ * Point-in-time snapshot of an async render's progress. Returned by
+ * `EditorAdapter.getRenderStatus`; safe to poll on any cadence.
+ *
+ *  - `'idle'`    — no render has been kicked off (or results were cleared).
+ *  - `'running'` — render is in progress; `phase` indicates where in the
+ *                  pipeline it currently is.
+ *  - `'done'`    — render completed successfully; `media` carries the promoted
+ *                  outputs.
+ *  - `'error'`   — render failed; `error` carries a human-readable message.
+ */
+export interface RenderStatus {
+  status: 'idle' | 'running' | 'done' | 'error'
+  phase?: RenderPhase
+  /** Promoted render outputs as directly-fetchable (R2 presigned) media. */
+  media?: Array<{ id: string; filename: string; contentType: string; url: string }>
+  error?: string
+}
+
 // ── Caption regeneration ─────────────────────────────────────────────────────
 
 /**
@@ -214,6 +239,22 @@ export interface EditorAdapter<P extends Project = Project> {
    */
   render(id: string, opts?: RenderOptions): AsyncIterable<RenderEvent>
 
+  /**
+   * Optional: kick an async render and return immediately. Hosts that support
+   * poll-based renders implement this; streaming-only hosts omit it. Poll
+   * `getRenderStatus` for progress and completion. Hosts without poll support
+   * omit this and the editor falls back to `render`.
+   */
+  renderAsync?(id: string, opts?: RenderOptions): Promise<{ status: string }>
+
+  /**
+   * Optional: poll the status of an async render kicked off by `renderAsync`.
+   * Safe to call at any cadence — returns the latest `RenderStatus` snapshot
+   * without side-effects. Hosts without poll support omit this; the editor
+   * feature-detects its absence and falls back to `render`.
+   */
+  getRenderStatus?(id: string): Promise<RenderStatus>
+
   /**
    * Resolve an `ImageElement` to a directly displayable URL. This is the host's
    * job because the resolution rule differs per host:

package/src/video/RenderModal.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
-import type { EditorAdapter, Project } from '../types'
+import type { EditorAdapter, Project, RenderPhase, RenderStatus } from '../types'
 
 interface RenderModalProps<P extends Project = Project> {
   projectId: string
@@ -19,37 +19,100 @@ interface RenderModalProps<P extends Project = Project> {
   exportActions?: ReactNode
 }
 
+/** Promoted render output (R2-presigned), as carried by `RenderStatus.media`. */
+type RenderMedia = NonNullable<RenderStatus['media']>[number]
+
 function basename(p: string) { return p.split('/').pop() ?? p }
 
-function LogLine({ text }: { text: string }) {
-  const t = text.replace(/^\[montaj render\]\s*/, '')
-  let color = 'text-[var(--editor-text)]/60'
-  if (/ready|complete|done|encoded|assembled/i.test(t))  color = 'text-green-400'
-  else if (/rendering|bundling|launching|browsers/i.test(t)) color = 'text-sky-400'
-  else if (/trimming|building|composing/i.test(t))       color = 'text-amber-400'
-  else if (/frame\s+\d+\/\d+/i.test(t))                  color = 'text-[var(--editor-text)]/55'
-  else if (/error|fail|warn/i.test(t))                   color = 'text-red-400'
+// ── Phase model (pure, exported for tests + the stepper) ──────────────────────
+
+/**
+ * Ordered render phases, earliest → terminal. `phaseIndex` reads off this list
+ * so the stepper can mark phases before the current one as complete.
+ */
+export const RENDER_PHASES: RenderPhase[] = [
+  'preparing',
+  'rendering',
+  'captions',
+  'encoding',
+  'saving',
+  'done',
+]
+
+/** User-facing label for a render phase. Honest, plain-English, no jargon. */
+export function phaseLabel(phase: RenderPhase): string {
+  switch (phase) {
+    case 'preparing': return 'Preparing'
+    case 'rendering': return 'Rendering graphics'
+    case 'captions':  return 'Adding captions'
+    case 'encoding':  return 'Encoding video'
+    case 'saving':    return 'Saving to your library'
+    case 'done':      return 'Done'
+  }
+}
+
+/** Ordinal of a phase within {@link RENDER_PHASES}. */
+export function phaseIndex(phase: RenderPhase): number {
+  return RENDER_PHASES.indexOf(phase)
+}
+
+/** The five phases shown in the running stepper (terminal `done` excluded). */
+const STEPPER_PHASES: RenderPhase[] = RENDER_PHASES.filter(p => p !== 'done')
 
-  const prefix = text.startsWith('[montaj render]')
-    ? <span className="text-[var(--editor-text)]/40">[render] </span>
-    : null
+const POLL_INTERVAL_MS = 2500
 
+// ── Stepper ───────────────────────────────────────────────────────────────────
+
+function PhaseStepper({ current }: { current: RenderPhase }) {
+  const currentIdx = phaseIndex(current)
   return (
-    <span className={`leading-relaxed whitespace-pre-wrap break-all ${color}`}>
-      {prefix}{t}
-    </span>
+    <div className="flex flex-col gap-3">
+      {STEPPER_PHASES.map((phase) => {
+        const idx = phaseIndex(phase)
+        // `done` sits past every stepper phase, so a done status marks them all complete.
+        const complete = idx < currentIdx
+        const active = idx === currentIdx
+        return (
+          <div key={phase} className="flex items-center gap-3">
+            <span
+              className={
+                complete
+                  ? 'w-5 h-5 shrink-0 rounded-full bg-green-500/90 text-black flex items-center justify-center text-[11px] font-bold'
+                  : active
+                    ? 'w-5 h-5 shrink-0 rounded-full border-2 border-amber-400 border-t-transparent animate-spin'
+                    : 'w-5 h-5 shrink-0 rounded-full border border-[var(--editor-border)]'
+              }
+            >
+              {complete ? '✓' : ''}
+            </span>
+            <span
+              className={
+                complete
+                  ? 'text-sm text-[var(--editor-text)]/70'
+                  : active
+                    ? 'text-sm font-semibold text-[var(--editor-text)]'
+                    : 'text-sm text-[var(--editor-text)]/35'
+              }
+            >
+              {phaseLabel(phase)}
+            </span>
+          </div>
+        )
+      })}
+    </div>
   )
 }
 
 export default function RenderModal<P extends Project = Project>({ projectId, adapter, onClose, onCancel, exportActions }: RenderModalProps<P>) {
-  const [logs, setLogs]         = useState<string[]>([])
   const [status, setStatus]     = useState<'running' | 'done' | 'error'>('running')
+  const [phase, setPhase]       = useState<RenderPhase>('preparing')
+  const [media, setMedia]       = useState<RenderMedia[] | null>(null)
   const [outputPath, setOutput] = useState<string | null>(null)
   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)
+  const pollTimerRef            = useRef<ReturnType<typeof setInterval> | null>(null)
 
   useEffect(() => {
     // React StrictMode in dev fires mount → cleanup → mount synchronously to
@@ -72,18 +135,69 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
     unmountedRef.current = false
     cancelledRef.current = false
 
+    const usePolling = !!(adapter.renderAsync && adapter.getRenderStatus)
+
     void (async () => {
       try {
-        for await (const ev of adapter.render(projectId)) {
-          if (unmountedRef.current || cancelledRef.current) break
-          if (ev.type === 'log') {
-            setLogs(l => [...l, ev.message])
-          } else if (ev.type === 'done') {
-            setOutput(ev.outputPath)
-            setStatus('done')
-          } else {
-            setError(ev.message)
-            setStatus('error')
+        if (usePolling) {
+          // Async, poll-based render: kick once, then poll status until terminal.
+          await adapter.renderAsync!(projectId)
+          if (unmountedRef.current || cancelledRef.current) return
+
+          const tick = async () => {
+            if (unmountedRef.current || cancelledRef.current) return
+            let snap: RenderStatus
+            try {
+              snap = await adapter.getRenderStatus!(projectId)
+            } catch (e) {
+              if (unmountedRef.current || cancelledRef.current) return
+              stopPolling()
+              setError(e instanceof Error ? e.message : String(e))
+              setStatus('error')
+              return
+            }
+            if (unmountedRef.current || cancelledRef.current) return
+
+            if (snap.phase) setPhase(snap.phase)
+            if (snap.media) setMedia(snap.media)
+
+            if (snap.status === 'done') {
+              stopPolling()
+              setMedia(snap.media ?? null)
+              setStatus('done')
+            } else if (snap.status === 'error') {
+              stopPolling()
+              setError(snap.error ?? 'Render failed.')
+              setStatus('error')
+            } else if (snap.status === 'idle') {
+              // We just kicked the render, so a job exists server-side; an 'idle'
+              // reply means the sidecar lost it (e.g. restarted mid-render).
+              // Without this we'd poll forever with the stepper frozen.
+              stopPolling()
+              setError('The render was interrupted on the server. Please try again.')
+              setStatus('error')
+            }
+          }
+
+          // First poll immediately, then on the interval.
+          await tick()
+          if (unmountedRef.current || cancelledRef.current) return
+          pollTimerRef.current = setInterval(() => { void tick() }, POLL_INTERVAL_MS)
+        } else {
+          // Fallback for older hosts: consume the SSE render stream.
+          for await (const ev of adapter.render(projectId)) {
+            if (unmountedRef.current || cancelledRef.current) break
+            if (ev.type === 'log') {
+              // Streaming hosts have no phase signal — keep the stepper on
+              // "rendering" as an honest mid-pipeline indicator.
+              setPhase('rendering')
+            } else if (ev.type === 'done') {
+              setOutput(ev.outputPath)
+              setStatus('done')
+            } else {
+              setError(ev.message)
+              setStatus('error')
+            }
           }
         }
       } catch (e) {
@@ -96,23 +210,26 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
 
     return scheduleCleanup
 
+    function stopPolling() {
+      if (pollTimerRef.current !== null) {
+        clearInterval(pollTimerRef.current)
+        pollTimerRef.current = null
+      }
+    }
+
     function scheduleCleanup() {
       // Defer the actual teardown. StrictMode's transient unmount fires before
       // the next mount; setTimeout(0) puts the teardown after both, giving the
       // next mount a chance to clearTimeout it. On real unmount the timer fires
-      // and the render stream is abandoned for real.
+      // and the render stream / poll loop is abandoned for real.
       cleanupTimerRef.current = setTimeout(() => {
         cleanupTimerRef.current = null
         unmountedRef.current = true
+        stopPolling()
       }, 0)
     }
   }, [projectId, adapter])
 
-  // Auto-scroll logs
-  useEffect(() => {
-    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight
-  }, [logs])
-
   // Escape to close only when done/error
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
@@ -131,7 +248,13 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
     ;(onCancel ?? onClose)()
   }
 
-  if (status === 'done' && outputPath) {
+  if (status === 'done') {
+    // Prefer the promoted R2 media (poll path); fall back to a workspace path
+    // resolved via fileUrl (SSE path); else show a graceful no-player view.
+    const primary = media?.[0] ?? null
+    const videoUrl = primary?.url ?? (outputPath ? adapter.fileUrl(outputPath) : null)
+    const downloadName = primary?.filename ?? (outputPath ? basename(outputPath) : 'render')
+
     // Portal to document.body: a transformed/filtered host ancestor (e.g. the
     // Los Parceros app-shell wrapper) would otherwise become the containing
     // block for this `fixed` overlay, sizing it to the scrolled page height and
@@ -142,13 +265,17 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
 
           {/* Left — video */}
           <div className="flex-1 bg-black flex items-center justify-center overflow-hidden">
-            <video
-              src={adapter.fileUrl(outputPath)}
-              controls
-              autoPlay
-              playsInline
-              className="h-full w-full object-contain"
-            />
+            {videoUrl ? (
+              <video
+                src={videoUrl}
+                controls
+                autoPlay
+                playsInline
+                className="h-full w-full object-contain"
+              />
+            ) : (
+              <p className="text-sm text-[var(--editor-text)]/60">Render complete.</p>
+            )}
           </div>
 
           {/* Right — info panel */}
@@ -158,23 +285,24 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                 <span className="w-2 h-2 rounded-full bg-green-400" />
                 <div>
                   <p className="text-sm font-semibold text-[var(--editor-text)]">Render complete</p>
-                  <p className="text-xs text-[var(--editor-text)]/60">Your video is ready.</p>
+                  <p className="text-xs text-[var(--editor-text)]/60">Saved to your library.</p>
                 </div>
               </div>
               <button onClick={onClose} className="text-[var(--editor-text)]/55 hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
             </div>
 
             <div className="flex flex-col gap-3 p-5 flex-1">
-              <p className="text-xs font-mono text-[var(--editor-text)]/55 break-all leading-relaxed">{outputPath}</p>
               {/* Host-supplied export controls (e.g. download-all .zip). */}
               {exportActions}
-              <a
-                href={adapter.fileUrl(outputPath)}
-                download={basename(outputPath)}
-                className="w-full text-center text-sm px-4 py-2.5 rounded-lg bg-green-800/60 border border-green-700 text-green-200 hover:bg-green-700/60 transition-colors font-medium"
-              >
-                Download
-              </a>
+              {videoUrl && (
+                <a
+                  href={videoUrl}
+                  download={downloadName}
+                  className="w-full text-center text-sm px-4 py-2.5 rounded-lg bg-green-800/60 border border-green-700 text-green-200 hover:bg-green-700/60 transition-colors font-medium"
+                >
+                  Download
+                </a>
+              )}
               <button
                 onClick={onClose}
                 className="w-full text-center text-sm px-4 py-2.5 rounded-lg bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)]/80 hover:opacity-90 transition-colors"
@@ -191,7 +319,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
 
   return createPortal(
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black">
-      <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">
+      <div className="w-full max-w-md 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)]">
@@ -209,29 +337,20 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
           )}
         </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 render engine…</span>
-            )}
-            {logs.map((line, i) => (
-              <LogLine key={i} text={line} />
-            ))}
-            {status === 'error' && errorMsg && (
-              <span className="text-red-400 mt-1">{errorMsg}</span>
-            )}
-          </div>
+        {/* Body */}
+        <div className="px-5 py-5">
+          {status === 'running' ? (
+            <>
+              <PhaseStepper current={phase} />
+              <p className="mt-5 text-xs text-[var(--editor-text)]/50">
+                This can take a few minutes for longer videos.
+              </p>
+            </>
+          ) : (
+            <p className="text-sm text-red-400 whitespace-pre-wrap break-words">
+              {errorMsg ?? 'Render failed.'}
+            </p>
+          )}
         </div>
 
         {/* Footer */}

package/src/video/__tests__/render-progress.test.tsx

@@ -0,0 +1,194 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render, screen, waitFor, act, cleanup } from '@testing-library/react'
+import type { EditorAdapter, ImageElement, Project, RenderStatus } from '../../types'
+import RenderModal, { phaseLabel, phaseIndex, RENDER_PHASES } from '../RenderModal'
+
+afterEach(() => {
+  cleanup()
+  vi.useRealTimers()
+})
+
+// ── Pure helpers ──────────────────────────────────────────────────────────────
+
+describe('phaseLabel', () => {
+  it('returns the exact user-facing label for each phase', () => {
+    expect(phaseLabel('preparing')).toBe('Preparing')
+    expect(phaseLabel('rendering')).toBe('Rendering graphics')
+    expect(phaseLabel('captions')).toBe('Adding captions')
+    expect(phaseLabel('encoding')).toBe('Encoding video')
+    expect(phaseLabel('saving')).toBe('Saving to your library')
+    expect(phaseLabel('done')).toBe('Done')
+  })
+})
+
+describe('phaseIndex / RENDER_PHASES', () => {
+  it('orders the phases preparing → done', () => {
+    expect(RENDER_PHASES).toEqual([
+      'preparing',
+      'rendering',
+      'captions',
+      'encoding',
+      'saving',
+      'done',
+    ])
+  })
+
+  it('returns the ordinal of each phase', () => {
+    expect(phaseIndex('preparing')).toBe(0)
+    expect(phaseIndex('rendering')).toBe(1)
+    expect(phaseIndex('captions')).toBe(2)
+    expect(phaseIndex('encoding')).toBe(3)
+    expect(phaseIndex('saving')).toBe(4)
+    expect(phaseIndex('done')).toBe(5)
+  })
+})
+
+// ── Component (poll-driven) ───────────────────────────────────────────────────
+
+function baseAdapter(): EditorAdapter<Project> {
+  return {
+    loadProject: vi.fn(),
+    saveProject: vi.fn(),
+    subscribe: () => () => {},
+    render: async function* () {},
+    resolveImageSrc: (el: ImageElement) => el.src,
+    compileOverlay: vi.fn(async () => () => null),
+    listGlobalOverlays: vi.fn(async () => []),
+    listSystemOverlays: vi.fn(async () => []),
+    uploadFile: vi.fn(async () => ''),
+    fileUrl: (p: string) => `/files?path=${p}`,
+  } as unknown as EditorAdapter<Project>
+}
+
+const DONE_MEDIA = {
+  id: 'm1',
+  filename: 'x.mp4',
+  contentType: 'video/mp4',
+  url: 'https://r2/x.mp4',
+}
+
+describe('RenderModal (poll-driven)', () => {
+  it('advances the active phase label and shows the R2 video on done', async () => {
+    vi.useFakeTimers()
+
+    const sequence: RenderStatus[] = [
+      { status: 'running', phase: 'rendering' },
+      { status: 'running', phase: 'captions' },
+      { status: 'done', phase: 'done', media: [DONE_MEDIA] },
+    ]
+    let call = 0
+
+    const adapter = baseAdapter()
+    adapter.renderAsync = vi.fn(async () => ({ status: 'running' }))
+    adapter.getRenderStatus = vi.fn(async () => sequence[Math.min(call++, sequence.length - 1)])
+
+    render(
+      <RenderModal adapter={adapter} projectId="vid-1" onClose={vi.fn()} />,
+    )
+
+    // Kick (renderAsync) + the immediate first poll resolve via microtasks → rendering.
+    await act(async () => {
+      for (let i = 0; i < 10; i++) await Promise.resolve()
+    })
+    expect(screen.getByText('Rendering graphics')).toBeTruthy()
+
+    // Next interval poll → captions.
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(2500)
+    })
+    expect(screen.getByText('Adding captions')).toBeTruthy()
+
+    // Next interval poll → done, video appears.
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(2500)
+    })
+
+    vi.useRealTimers()
+    await waitFor(() => {
+      const video = document.querySelector('video')
+      expect(video).toBeTruthy()
+      expect(video?.getAttribute('src')).toBe('https://r2/x.mp4')
+    })
+
+    const download = screen.getByText('Download').closest('a')
+    expect(download?.getAttribute('href')).toBe('https://r2/x.mp4')
+    expect(download?.getAttribute('download')).toBe('x.mp4')
+  })
+
+  it('never renders raw-log or Copy UI', async () => {
+    vi.useFakeTimers()
+    const adapter = baseAdapter()
+    adapter.renderAsync = vi.fn(async () => ({ status: 'running' }))
+    adapter.getRenderStatus = vi.fn(async () => ({
+      status: 'running',
+      phase: 'rendering',
+    } as RenderStatus))
+
+    render(<RenderModal adapter={adapter} projectId="vid-1" onClose={vi.fn()} />)
+
+    await act(async () => {
+      await Promise.resolve()
+      await vi.advanceTimersByTimeAsync(2500)
+    })
+
+    expect(screen.queryByText('Copy')).toBeNull()
+    expect(screen.queryByTitle('Copy logs')).toBeNull()
+  })
+
+  it('shows the error string and a Close button on error', async () => {
+    vi.useFakeTimers()
+    const adapter = baseAdapter()
+    adapter.renderAsync = vi.fn(async () => ({ status: 'running' }))
+    adapter.getRenderStatus = vi.fn(async () => ({
+      status: 'error',
+      error: 'sidecar exploded',
+    } as RenderStatus))
+
+    render(<RenderModal adapter={adapter} projectId="vid-1" onClose={vi.fn()} />)
+
+    await act(async () => {
+      await Promise.resolve()
+      await vi.advanceTimersByTimeAsync(2500)
+    })
+
+    expect(screen.getByText('sidecar exploded')).toBeTruthy()
+    expect(screen.getByText('Close')).toBeTruthy()
+  })
+
+  it('surfaces an interrupted render when the server reports idle after kicking', async () => {
+    vi.useFakeTimers()
+    const adapter = baseAdapter()
+    adapter.renderAsync = vi.fn(async () => ({ status: 'running' }))
+    // Job lost server-side (e.g. sidecar restart mid-render) → status flips to idle.
+    adapter.getRenderStatus = vi.fn(async () => ({ status: 'idle' } as RenderStatus))
+
+    render(<RenderModal adapter={adapter} projectId="vid-1" onClose={vi.fn()} />)
+
+    await act(async () => {
+      await Promise.resolve()
+      await vi.advanceTimersByTimeAsync(2500)
+    })
+
+    expect(screen.getByText(/interrupted on the server/i)).toBeTruthy()
+    expect(screen.getByText('Close')).toBeTruthy()
+  })
+})
+
+// ── Component (SSE fallback when poll methods absent) ──────────────────────────
+
+describe('RenderModal (SSE fallback)', () => {
+  it('falls back to render() when poll methods are absent', async () => {
+    const adapter = baseAdapter()
+    adapter.render = async function* () {
+      yield { type: 'done' as const, outputPath: '/out/final.mp4' }
+    }
+
+    render(<RenderModal adapter={adapter} projectId="vid-1" onClose={vi.fn()} />)
+
+    await waitFor(() => {
+      const video = document.querySelector('video')
+      expect(video).toBeTruthy()
+      expect(video?.getAttribute('src')).toBe('/files?path=/out/final.mp4')
+    })
+  })
+})