eprec 1.11.0 → 1.12.0

package/app/assets/styles.css

@@ -460,6 +460,40 @@ p {
 	padding: 0 var(--spacing-md) var(--spacing-md);
 }
 
+.processing-progress {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xs);
+	padding: 0 var(--spacing-md) var(--spacing-sm);
+}
+
+.processing-progress-meta {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-size: var(--font-size-xs);
+	color: var(--color-text-muted);
+}
+
+.processing-progress-bar {
+	height: 6px;
+	border-radius: var(--radius-pill);
+	background: var(--color-border-muted);
+	overflow: hidden;
+}
+
+.processing-progress-fill {
+	display: block;
+	height: 100%;
+	width: var(--progress, 0%);
+	background: var(--color-primary);
+	transition: width var(--transition-normal);
+}
+
+.processing-error {
+	margin: 0 var(--spacing-md) var(--spacing-sm);
+}
+
 .processing-row.is-running {
 	box-shadow: inset 0 0 0 1px var(--color-warning-border);
 }
@@ -468,6 +502,15 @@ p {
 	background: var(--color-success-surface);
 }
 
+.processing-row.is-error {
+	background: var(--color-danger-surface);
+	border-color: var(--color-danger-border-strong);
+}
+
+.processing-row.is-error .processing-progress-fill {
+	background: var(--color-danger-border);
+}
+
 .timeline-card {
 	gap: var(--spacing-xl);
 }

package/app/client/editing-workspace.tsx

@@ -23,6 +23,8 @@ const MIN_CUT_LENGTH = 0.2
 const DEFAULT_CUT_LENGTH = 2.4
 const PLAYHEAD_STEP = 0.1
 const DEFAULT_PREVIEW_URL = '/e2e-test.mp4'
+const QUEUE_API_BASE = '/api/processing-queue'
+const QUEUE_STREAM_URL = `${QUEUE_API_BASE}/stream`
 
 function readInitialVideoPath() {
 	if (typeof window === 'undefined') return ''
@@ -42,14 +44,36 @@ function extractVideoName(value: string) {
 	return last && last.length > 0 ? last : value
 }
 
-type ProcessingStatus = 'queued' | 'running' | 'done'
+type ProcessingStatus = 'queued' | 'running' | 'done' | 'error'
 type ProcessingCategory = 'chapter' | 'transcript' | 'export'
+type ProcessingAction =
+	| 'edit-chapter'
+	| 'combine-chapters'
+	| 'regenerate-transcript'
+	| 'detect-command-windows'
+	| 'render-preview'
+	| 'export-final'
+type ProcessingProgress = {
+	step: number
+	totalSteps: number
+	label: string
+	percent: number
+}
 type ProcessingTask = {
 	id: string
 	title: string
 	detail: string
 	status: ProcessingStatus
 	category: ProcessingCategory
+	action: ProcessingAction
+	progress?: ProcessingProgress
+	errorMessage?: string
+	updatedAt: number
+	createdAt: number
+}
+type ProcessingQueueSnapshot = {
+	tasks: ProcessingTask[]
+	activeTaskId: string | null
 }
 
 export function EditingWorkspace(handle: Handle) {
@@ -79,8 +103,9 @@ export function EditingWorkspace(handle: Handle) {
 	let primaryChapterId = chapters[0]?.id ?? ''
 	let secondaryChapterId = chapters[1]?.id ?? chapters[0]?.id ?? ''
 	let processingQueue: ProcessingTask[] = []
-	let activeTaskId: string | null = null
-	let processingCount = 1
+	let queueLoading = true
+	let queueError = ''
+	let queueStreamStatus: 'connecting' | 'open' | 'error' = 'connecting'
 	let manualCutId = 1
 	let previewDuration = 0
 	let previewReady = false
@@ -173,6 +198,39 @@ export function EditingWorkspace(handle: Handle) {
 		})
 	}
 
+	const loadQueueSnapshot = async () => {
+		await requestQueue('', { method: 'GET' })
+	}
+
+	const connectQueueStream = () => {
+		if (typeof window === 'undefined') return
+		const stream = new EventSource(QUEUE_STREAM_URL)
+		const updateStatus = () => {
+			queueStreamStatus =
+				stream.readyState === EventSource.OPEN
+					? 'open'
+					: stream.readyState === EventSource.CONNECTING
+						? 'connecting'
+						: 'error'
+			handle.update()
+		}
+		stream.addEventListener('open', updateStatus)
+		stream.addEventListener('error', updateStatus)
+		stream.addEventListener('snapshot', (event) => {
+			try {
+				const snapshot = JSON.parse(
+					(event as MessageEvent<string>).data,
+				) as ProcessingQueueSnapshot
+				applyQueueSnapshot(snapshot)
+			} catch (error) {
+				setQueueError('Unable to parse queue updates.')
+			}
+		})
+		handle.signal.addEventListener('abort', () => {
+			stream.close()
+		})
+	}
+
 	if (initialVideoPath) {
 		void loadVideoFromPath(initialVideoPath)
 	}
@@ -309,26 +367,68 @@ export function EditingWorkspace(handle: Handle) {
 		handle.update()
 	}
 
+	const applyQueueSnapshot = (snapshot: ProcessingQueueSnapshot) => {
+		processingQueue = Array.isArray(snapshot.tasks) ? snapshot.tasks : []
+		queueLoading = false
+		queueError = ''
+		handle.update()
+	}
+
+	const setQueueError = (message: string) => {
+		queueError = message
+		queueLoading = false
+		handle.update()
+	}
+
+	const requestQueue = async (
+		path: string,
+		options: RequestInit & { body?: string } = {},
+	) => {
+		try {
+			const response = await fetch(`${QUEUE_API_BASE}${path}`, {
+				...options,
+				headers: {
+					Accept: 'application/json',
+					...(options.body ? { 'Content-Type': 'application/json' } : {}),
+				},
+				signal: handle.signal,
+			})
+			if (!response.ok) {
+				throw new Error(`Queue request failed (${response.status}).`)
+			}
+			const snapshot =
+				(await response.json()) as ProcessingQueueSnapshot
+			applyQueueSnapshot(snapshot)
+		} catch (error) {
+			if (handle.signal.aborted) return
+			setQueueError(
+				error instanceof Error
+					? error.message
+					: 'Unable to reach the processing queue.',
+			)
+		}
+	}
+
+	void loadQueueSnapshot()
+	connectQueueStream()
+
 	const queueTask = (
+		action: ProcessingAction,
 		title: string,
 		detail: string,
 		category: ProcessingCategory,
 	) => {
-		const task: ProcessingTask = {
-			id: `task-${processingCount++}`,
-			title,
-			detail,
-			status: 'queued',
-			category,
-		}
-		processingQueue = [...processingQueue, task]
-		handle.update()
+		void requestQueue('/enqueue', {
+			method: 'POST',
+			body: JSON.stringify({ action, title, detail, category }),
+		})
 	}
 
 	const queueChapterEdit = () => {
 		const chapter = findChapter(primaryChapterId)
 		if (!chapter) return
 		queueTask(
+			'edit-chapter',
 			`Edit ${chapter.title}`,
 			`Review trims for ${formatTimestamp(chapter.start)} - ${formatTimestamp(
 				chapter.end,
@@ -342,6 +442,7 @@ export function EditingWorkspace(handle: Handle) {
 		const secondary = findChapter(secondaryChapterId)
 		if (!primary || !secondary || primary.id === secondary.id) return
 		queueTask(
+			'combine-chapters',
 			`Combine ${primary.title} + ${secondary.title}`,
 			'Merge both chapters into a single preview export.',
 			'chapter',
@@ -350,6 +451,7 @@ export function EditingWorkspace(handle: Handle) {
 
 	const queueTranscriptRegeneration = () => {
 		queueTask(
+			'regenerate-transcript',
 			'Regenerate transcript',
 			'Run Whisper alignment and refresh search cues.',
 			'transcript',
@@ -358,6 +460,7 @@ export function EditingWorkspace(handle: Handle) {
 
 	const queueCommandScan = () => {
 		queueTask(
+			'detect-command-windows',
 			'Detect command windows',
 			'Scan for Jarvis commands and update cut ranges.',
 			'transcript',
@@ -366,6 +469,7 @@ export function EditingWorkspace(handle: Handle) {
 
 	const queuePreviewRender = () => {
 		queueTask(
+			'render-preview',
 			'Render preview clip',
 			'Bake a short MP4 with current edits applied.',
 			'export',
@@ -374,6 +478,7 @@ export function EditingWorkspace(handle: Handle) {
 
 	const queueFinalExport = () => {
 		queueTask(
+			'export-final',
 			'Export edited chapters',
 			'Render final chapters and write the export package.',
 			'export',
@@ -381,36 +486,21 @@ export function EditingWorkspace(handle: Handle) {
 	}
 
 	const startNextTask = () => {
-		if (activeTaskId) return
-		const next = processingQueue.find((task) => task.status === 'queued')
-		if (!next) return
-		activeTaskId = next.id
-		processingQueue = processingQueue.map((task) =>
-			task.id === next.id ? { ...task, status: 'running' } : task,
-		)
-		handle.update()
+		void requestQueue('/run-next', { method: 'POST' })
 	}
 
 	const markActiveDone = () => {
-		if (!activeTaskId) return
-		processingQueue = processingQueue.map((task) =>
-			task.id === activeTaskId ? { ...task, status: 'done' } : task,
-		)
-		activeTaskId = null
-		handle.update()
+		void requestQueue('/mark-done', { method: 'POST' })
 	}
 
 	const clearCompletedTasks = () => {
-		processingQueue = processingQueue.filter((task) => task.status !== 'done')
-		handle.update()
+		void requestQueue('/clear-completed', { method: 'POST' })
 	}
 
 	const removeTask = (taskId: string) => {
-		processingQueue = processingQueue.filter((task) => task.id !== taskId)
-		if (activeTaskId === taskId) {
-			activeTaskId = null
-		}
-		handle.update()
+		void requestQueue(`/task/${encodeURIComponent(taskId)}`, {
+			method: 'DELETE',
+		})
 	}
 
 	const syncVideoToPlayhead = (value: number) => {
@@ -460,8 +550,28 @@ export function EditingWorkspace(handle: Handle) {
 		const completedCount = processingQueue.filter(
 			(task) => task.status === 'done',
 		).length
+		const errorCount = processingQueue.filter(
+			(task) => task.status === 'error',
+		).length
 		const runningTask =
 			processingQueue.find((task) => task.status === 'running') ?? null
+		const queueStreamMeta =
+			queueStreamStatus === 'open'
+				? { label: 'Live', className: 'status-pill--success' }
+				: queueStreamStatus === 'connecting'
+					? { label: 'Connecting', className: 'status-pill--warning' }
+					: { label: 'Offline', className: 'status-pill--danger' }
+		const runningSummary = runningTask
+			? runningTask.progress?.label
+				? `Running: ${runningTask.title} · ${runningTask.progress.label}`
+				: `Running: ${runningTask.title}`
+			: 'Idle'
+		const queueStreamSummary =
+			queueStreamStatus === 'open'
+				? 'Queue updates are live.'
+				: queueStreamStatus === 'connecting'
+					? 'Connecting to queue updates.'
+					: 'Queue updates are offline.'
 		const canCombineChapters =
 			primaryChapterId.length > 0 &&
 			secondaryChapterId.length > 0 &&
@@ -612,16 +722,37 @@ export function EditingWorkspace(handle: Handle) {
 							<div class="summary-item">
 								<span class="summary-label">Queue</span>
 								<span class="summary-value">{queuedCount} queued</span>
+								<span class="summary-subtext">{runningSummary}</span>
+							</div>
+							<div class="summary-item">
+								<span class="summary-label">Errors</span>
+								<span class="summary-value">{errorCount}</span>
 								<span class="summary-subtext">
-									{runningTask ? `Running: ${runningTask.title}` : 'Idle'}
+									{errorCount > 0
+										? 'Review failed tasks below.'
+										: 'No failures yet.'}
+								</span>
+							</div>
+							<div class="summary-item">
+								<span class="summary-label">Stream</span>
+								<span
+									class={classNames(
+										'status-pill',
+										queueStreamMeta.className,
+									)}
+								>
+									{queueStreamMeta.label}
 								</span>
+								<span class="summary-subtext">{queueStreamSummary}</span>
 							</div>
 						</div>
 						<div class="actions-buttons">
 							<button
 								class="button button--primary"
 								type="button"
-								disabled={queuedCount === 0 || Boolean(runningTask)}
+								disabled={
+									queueLoading || queuedCount === 0 || Boolean(runningTask)
+								}
 								on={{ click: startNextTask }}
 							>
 								Run next
@@ -629,7 +760,7 @@ export function EditingWorkspace(handle: Handle) {
 							<button
 								class="button button--ghost"
 								type="button"
-								disabled={!runningTask}
+								disabled={queueLoading || !runningTask}
 								on={{ click: markActiveDone }}
 							>
 								Mark running done
@@ -637,7 +768,7 @@ export function EditingWorkspace(handle: Handle) {
 							<button
 								class="button button--ghost"
 								type="button"
-								disabled={completedCount === 0}
+								disabled={queueLoading || completedCount === 0}
 								on={{ click: clearCompletedTasks }}
 							>
 								Clear completed
@@ -765,56 +896,107 @@ export function EditingWorkspace(handle: Handle) {
 						<div class="panel-header">
 							<h3>Processing queue</h3>
 							<span class="summary-subtext">
-								{processingQueue.length} total
+								{queueLoading
+									? 'Loading...'
+									: `${processingQueue.length} total`}
 							</span>
 						</div>
-						{processingQueue.length === 0 ? (
+						{queueError ? (
+							<p class="status-note status-note--danger">{queueError}</p>
+						) : null}
+						{queueLoading ? (
+							<p class="app-muted">Loading queue updates...</p>
+						) : processingQueue.length === 0 ? (
 							<p class="app-muted">
 								No actions queued yet. Use the buttons above to stage work.
 							</p>
 						) : (
 							<ul class="stacked-list processing-list">
-								{processingQueue.map((task) => (
-									<li
-										class={classNames(
-											'stacked-item',
-											'processing-row',
-											task.status === 'running' && 'is-running',
-											task.status === 'done' && 'is-complete',
-										)}
-									>
-										<div class="processing-row-header">
-											<div>
-												<h4>{task.title}</h4>
-												<p class="app-muted">{task.detail}</p>
-											</div>
-											<span
-												class={classNames(
-													'status-pill',
-													task.status === 'queued' && 'status-pill--info',
-													task.status === 'running' && 'status-pill--warning',
-													task.status === 'done' && 'status-pill--success',
-												)}
-											>
-												{task.status}
-											</span>
-										</div>
-										<div class="processing-row-meta">
-											<span class="summary-subtext">
-												{formatProcessingCategory(task.category)}
-											</span>
-											{task.status === 'queued' ? (
-												<button
-													class="button button--ghost"
-													type="button"
-													on={{ click: () => removeTask(task.id) }}
+								{processingQueue.map((task) => {
+									const showProgress =
+										task.status === 'running' || task.status === 'error'
+									const progress =
+										task.progress ??
+										(task.status === 'running'
+											? {
+													step: 0,
+													totalSteps: 0,
+													label: 'Starting',
+													percent: 0,
+												}
+											: null)
+									return (
+										<li
+											class={classNames(
+												'stacked-item',
+												'processing-row',
+												task.status === 'running' && 'is-running',
+												task.status === 'done' && 'is-complete',
+												task.status === 'error' && 'is-error',
+											)}
+										>
+											<div class="processing-row-header">
+												<div>
+													<h4>{task.title}</h4>
+													<p class="app-muted">{task.detail}</p>
+												</div>
+												<span
+													class={classNames(
+														'status-pill',
+														task.status === 'queued' &&
+															'status-pill--info',
+														task.status === 'running' &&
+															'status-pill--warning',
+														task.status === 'done' &&
+															'status-pill--success',
+														task.status === 'error' &&
+															'status-pill--danger',
+													)}
 												>
-													Remove
-												</button>
+													{task.status}
+												</span>
+											</div>
+											{showProgress && progress ? (
+												<div class="processing-progress">
+													<div class="processing-progress-meta">
+														<span>{progress.label}</span>
+														<span>
+															{progress.totalSteps > 0
+																? `${progress.step}/${progress.totalSteps}`
+																: '...'}
+														</span>
+													</div>
+													<div class="processing-progress-bar">
+														<span
+															class="processing-progress-fill"
+															style={`--progress:${progress.percent}%`}
+														/>
+													</div>
+												</div>
 											) : null}
-										</div>
-									</li>
-								))}
+											{task.status === 'error' && task.errorMessage ? (
+												<p class="status-note status-note--danger processing-error">
+													{task.errorMessage}
+												</p>
+											) : null}
+											<div class="processing-row-meta">
+												<span class="summary-subtext">
+													{formatProcessingCategory(task.category)}
+												</span>
+												{task.status === 'queued' ||
+												task.status === 'error' ? (
+													<button
+														class="button button--ghost"
+														type="button"
+														on={{ click: () => removeTask(task.id) }}
+													>
+														Remove
+													</button>
+												) : null}
+											</div>
+										</li>
+									)
+								})}
 							</ul>
 						)}
 					</div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eprec",
   "type": "module",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package/server/processing-queue.ts

@@ -0,0 +1,441 @@
+type ProcessingCategory = 'chapter' | 'transcript' | 'export'
+type ProcessingStatus = 'queued' | 'running' | 'done' | 'error'
+type ProcessingAction =
+	| 'edit-chapter'
+	| 'combine-chapters'
+	| 'regenerate-transcript'
+	| 'detect-command-windows'
+	| 'render-preview'
+	| 'export-final'
+
+type ProcessingProgress = {
+	step: number
+	totalSteps: number
+	label: string
+	percent: number
+}
+
+export type ProcessingTask = {
+	id: string
+	title: string
+	detail: string
+	status: ProcessingStatus
+	category: ProcessingCategory
+	action: ProcessingAction
+	progress?: ProcessingProgress
+	errorMessage?: string
+	updatedAt: number
+	createdAt: number
+	simulateError?: boolean
+}
+
+type ProcessingQueueSnapshot = {
+	tasks: ProcessingTask[]
+	activeTaskId: string | null
+}
+
+type QueueListener = (snapshot: ProcessingQueueSnapshot) => void
+
+const QUEUE_HEADERS = {
+	'Access-Control-Allow-Origin': '*',
+	'Access-Control-Allow-Methods': 'GET, POST, DELETE, OPTIONS',
+	'Access-Control-Allow-Headers': 'Accept, Content-Type',
+} as const
+
+const TASK_STEPS: Record<ProcessingAction, string[]> = {
+	'edit-chapter': [
+		'Collecting edit ranges',
+		'Updating cut list',
+		'Preparing edit workspace',
+	],
+	'combine-chapters': [
+		'Loading chapter outputs',
+		'Aligning audio padding',
+		'Rendering combined preview',
+	],
+	'regenerate-transcript': [
+		'Extracting audio',
+		'Running Whisper alignment',
+		'Refreshing transcript cues',
+	],
+	'detect-command-windows': [
+		'Scanning transcript markers',
+		'Refining command windows',
+		'Updating cut ranges',
+	],
+	'render-preview': ['Rendering preview clip', 'Optimizing output', 'Verifying'],
+	'export-final': [
+		'Rendering chapters',
+		'Packaging exports',
+		'Verifying outputs',
+	],
+}
+
+const STEP_DELAY_MS = 850
+const STEP_JITTER_MS = 350
+
+let tasks: ProcessingTask[] = []
+let activeTaskId: string | null = null
+let nextTaskId = 1
+let runController: AbortController | null = null
+const listeners = new Set<QueueListener>()
+
+function buildSnapshot(): ProcessingQueueSnapshot {
+	return {
+		tasks,
+		activeTaskId,
+	}
+}
+
+function emitSnapshot() {
+	const snapshot = buildSnapshot()
+	for (const listener of listeners) {
+		listener(snapshot)
+	}
+}
+
+function updateQueueState(mutate: () => void) {
+	mutate()
+	emitSnapshot()
+}
+
+function updateTask(taskId: string, patch: Partial<ProcessingTask>) {
+	updateQueueState(() => {
+		tasks = tasks.map((task) =>
+			task.id === taskId
+				? { ...task, ...patch, updatedAt: Date.now() }
+				: task,
+		)
+	})
+}
+
+function enqueueTask(options: {
+	title: string
+	detail: string
+	category: ProcessingCategory
+	action: ProcessingAction
+	simulateError?: boolean
+}) {
+	const task: ProcessingTask = {
+		id: `task-${nextTaskId++}`,
+		title: options.title,
+		detail: options.detail,
+		status: 'queued',
+		category: options.category,
+		action: options.action,
+		createdAt: Date.now(),
+		updatedAt: Date.now(),
+		simulateError: options.simulateError,
+	}
+	updateQueueState(() => {
+		tasks = [...tasks, task]
+	})
+	return task
+}
+
+function removeTask(taskId: string) {
+	updateQueueState(() => {
+		tasks = tasks.filter((task) => task.id !== taskId)
+		if (activeTaskId === taskId) {
+			activeTaskId = null
+			runController?.abort()
+			runController = null
+		}
+	})
+}
+
+function clearCompleted() {
+	updateQueueState(() => {
+		tasks = tasks.filter((task) => task.status !== 'done')
+	})
+}
+
+function markActiveDone() {
+	if (!activeTaskId) return
+	updateQueueState(() => {
+		tasks = tasks.map((task) =>
+			task.id === activeTaskId
+				? {
+						...task,
+						status: 'done',
+						progress: task.progress
+							? { ...task.progress, percent: 100, label: 'Complete' }
+							: undefined,
+						updatedAt: Date.now(),
+					}
+				: task,
+		)
+		activeTaskId = null
+		runController?.abort()
+		runController = null
+	})
+}
+
+function buildProgress(step: number, totalSteps: number, label: string) {
+	const percent =
+		totalSteps > 0 ? Math.round((step / totalSteps) * 100) : 0
+	return { step, totalSteps, label, percent }
+}
+
+function sleep(duration: number, signal?: AbortSignal) {
+	return new Promise<void>((resolve, reject) => {
+		const timeout = setTimeout(resolve, duration)
+		const onAbort = () => {
+			clearTimeout(timeout)
+			reject(new Error('aborted'))
+		}
+		if (signal) {
+			if (signal.aborted) {
+				onAbort()
+				return
+			}
+			signal.addEventListener('abort', onAbort, { once: true })
+		}
+	})
+}
+
+async function runTask(task: ProcessingTask) {
+	const steps = TASK_STEPS[task.action] ?? ['Starting', 'Working', 'Complete']
+	const controller = new AbortController()
+	runController = controller
+	updateQueueState(() => {
+		activeTaskId = task.id
+		tasks = tasks.map((entry) =>
+			entry.id === task.id
+				? {
+						...entry,
+						status: 'running',
+						progress: buildProgress(0, steps.length, 'Starting'),
+						errorMessage: undefined,
+						updatedAt: Date.now(),
+					}
+				: entry,
+		)
+	})
+
+	const failAtStep = task.simulateError
+		? Math.max(1, Math.ceil(steps.length * 0.6))
+		: null
+
+	try {
+		for (let index = 0; index < steps.length; index++) {
+			if (controller.signal.aborted) return
+			const label = steps[index]
+			updateTask(task.id, {
+				progress: buildProgress(index + 1, steps.length, label),
+			})
+			if (failAtStep && index + 1 === failAtStep) {
+				throw new Error('Processing failed during render.')
+			}
+			const delay =
+				STEP_DELAY_MS + Math.round(Math.random() * STEP_JITTER_MS)
+			await sleep(delay, controller.signal)
+		}
+		updateTask(task.id, {
+			status: 'done',
+			progress: buildProgress(steps.length, steps.length, 'Complete'),
+		})
+	} catch (error) {
+		if (controller.signal.aborted) return
+		updateTask(task.id, {
+			status: 'error',
+			errorMessage:
+				error instanceof Error ? error.message : 'Processing failed.',
+		})
+	} finally {
+		runController = null
+		updateQueueState(() => {
+			if (activeTaskId === task.id) {
+				activeTaskId = null
+			}
+		})
+	}
+}
+
+function runNextTask() {
+	if (activeTaskId) return
+	const nextTask = tasks.find((task) => task.status === 'queued')
+	if (!nextTask) return
+	void runTask(nextTask)
+}
+
+function jsonResponse(payload: unknown, status = 200) {
+	return new Response(JSON.stringify(payload), {
+		status,
+		headers: {
+			'Content-Type': 'application/json',
+			...QUEUE_HEADERS,
+		},
+	})
+}
+
+function createEventStream(request: Request) {
+	const encoder = new TextEncoder()
+	return new Response(
+		new ReadableStream({
+			start(controller) {
+				let isClosed = false
+				const send = (event: string, data: unknown) => {
+					if (isClosed) return
+					controller.enqueue(
+						encoder.encode(
+							`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`,
+						),
+					)
+				}
+				const listener = (snapshot: ProcessingQueueSnapshot) => {
+					send('snapshot', snapshot)
+				}
+				listeners.add(listener)
+				send('snapshot', buildSnapshot())
+				const ping = setInterval(() => {
+					send('ping', { time: Date.now() })
+				}, 15000)
+				const close = () => {
+					if (isClosed) return
+					isClosed = true
+					clearInterval(ping)
+					listeners.delete(listener)
+					controller.close()
+				}
+				request.signal.addEventListener('abort', close)
+			},
+			cancel() {
+				// handled via abort
+			},
+		}),
+		{
+			headers: {
+				'Content-Type': 'text/event-stream',
+				'Cache-Control': 'no-cache, no-transform',
+				Connection: 'keep-alive',
+				...QUEUE_HEADERS,
+			},
+		},
+	)
+}
+
+function isProcessingCategory(value: unknown): value is ProcessingCategory {
+	return value === 'chapter' || value === 'transcript' || value === 'export'
+}
+
+function isProcessingAction(value: unknown): value is ProcessingAction {
+	return (
+		value === 'edit-chapter' ||
+		value === 'combine-chapters' ||
+		value === 'regenerate-transcript' ||
+		value === 'detect-command-windows' ||
+		value === 'render-preview' ||
+		value === 'export-final'
+	)
+}
+
+export async function handleProcessingQueueRequest(request: Request) {
+	if (request.method === 'OPTIONS') {
+		return new Response(null, { status: 204, headers: QUEUE_HEADERS })
+	}
+
+	const url = new URL(request.url)
+	const pathname = url.pathname
+
+	if (pathname === '/api/processing-queue/stream') {
+		if (request.method !== 'GET') {
+			return jsonResponse({ error: 'Method not allowed' }, 405)
+		}
+		return createEventStream(request)
+	}
+
+	if (pathname === '/api/processing-queue') {
+		if (request.method !== 'GET') {
+			return jsonResponse({ error: 'Method not allowed' }, 405)
+		}
+		return jsonResponse(buildSnapshot())
+	}
+
+	if (pathname === '/api/processing-queue/enqueue') {
+		if (request.method !== 'POST') {
+			return jsonResponse({ error: 'Method not allowed' }, 405)
+		}
+		let payload: unknown = null
+		try {
+			payload = await request.json()
+		} catch (error) {
+			return jsonResponse({ error: 'Invalid JSON payload.' }, 400)
+		}
+		if (
+			!payload ||
+			typeof payload !== 'object' ||
+			!('title' in payload) ||
+			!('detail' in payload) ||
+			!('category' in payload) ||
+			!('action' in payload)
+		) {
+			return jsonResponse({ error: 'Missing task fields.' }, 400)
+		}
+		const data = payload as {
+			title?: unknown
+			detail?: unknown
+			category?: unknown
+			action?: unknown
+			simulateError?: unknown
+		}
+		if (typeof data.title !== 'string' || data.title.trim().length === 0) {
+			return jsonResponse({ error: 'Task title is required.' }, 400)
+		}
+		if (typeof data.detail !== 'string') {
+			return jsonResponse({ error: 'Task detail is required.' }, 400)
+		}
+		if (!isProcessingCategory(data.category)) {
+			return jsonResponse({ error: 'Invalid task category.' }, 400)
+		}
+		if (!isProcessingAction(data.action)) {
+			return jsonResponse({ error: 'Invalid task action.' }, 400)
+		}
+		enqueueTask({
+			title: data.title,
+			detail: data.detail,
+			category: data.category,
+			action: data.action,
+			simulateError: data.simulateError === true,
+		})
+		return jsonResponse(buildSnapshot())
+	}
+
+	if (pathname === '/api/processing-queue/run-next') {
+		if (request.method !== 'POST') {
+			return jsonResponse({ error: 'Method not allowed' }, 405)
+		}
+		runNextTask()
+		return jsonResponse(buildSnapshot())
+	}
+
+	if (pathname === '/api/processing-queue/mark-done') {
+		if (request.method !== 'POST') {
+			return jsonResponse({ error: 'Method not allowed' }, 405)
+		}
+		markActiveDone()
+		return jsonResponse(buildSnapshot())
+	}
+
+	if (pathname === '/api/processing-queue/clear-completed') {
+		if (request.method !== 'POST') {
+			return jsonResponse({ error: 'Method not allowed' }, 405)
+		}
+		clearCompleted()
+		return jsonResponse(buildSnapshot())
+	}
+
+	if (pathname.startsWith('/api/processing-queue/task/')) {
+		if (request.method !== 'DELETE') {
+			return jsonResponse({ error: 'Method not allowed' }, 405)
+		}
+		const taskId = pathname.replace('/api/processing-queue/task/', '')
+		if (!taskId) {
+			return jsonResponse({ error: 'Task id is required.' }, 400)
+		}
+		removeTask(taskId)
+		return jsonResponse(buildSnapshot())
+	}
+
+	return jsonResponse({ error: 'Not found' }, 404)
+}

package/src/app-server.ts

@@ -6,6 +6,7 @@ import { getEnv } from '../app/config/env.ts'
 import { createAppRouter } from '../app/router.tsx'
 import { handleVideoRequest } from '../app/video-api.ts'
 import { createBundlingRoutes } from '../server/bundling.ts'
+import { handleProcessingQueueRequest } from '../server/processing-queue.ts'
 
 type AppServerOptions = {
 	host?: string
@@ -196,6 +197,9 @@ function startServer(port: number, hostname: string) {
 				if (url.pathname === '/api/video') {
 					return await handleVideoRequest(request)
 				}
+				if (url.pathname.startsWith('/api/processing-queue')) {
+					return await handleProcessingQueueRequest(request)
+				}
 				return await router.fetch(request)
 			} catch (error) {
 				console.error(error)

package/src/cli.ts

@@ -169,17 +169,14 @@ async function main(rawArgs = hideBin(process.argv)) {
 							afterLog: resumeActiveSpinner,
 						})
 						try {
-							const result = await transcribeAudio(
-								transcribeArgs.inputPath,
-								{
-									modelPath: transcribeArgs.modelPath,
-									language: transcribeArgs.language,
-									threads: transcribeArgs.threads,
-									binaryPath: transcribeArgs.binaryPath,
-									outputBasePath: transcribeArgs.outputBasePath,
-									progress,
-								},
-							)
+							const result = await transcribeAudio(transcribeArgs.inputPath, {
+								modelPath: transcribeArgs.modelPath,
+								language: transcribeArgs.language,
+								threads: transcribeArgs.threads,
+								binaryPath: transcribeArgs.binaryPath,
+								outputBasePath: transcribeArgs.outputBasePath,
+								progress,
+							})
 							resultText = result.text
 						} finally {
 							setLogHooks({})