eprec 1.0.1 → 1.1.0

package/README.md

@@ -13,45 +13,115 @@
 [![MIT License][license-badge]][license]
 <!-- prettier-ignore-end -->
 
-## Installation
+## Overview
+
+A Bun-based CLI that processes recorded course videos by splitting chapter
+markers into separate files, trimming silence at the start/end, and optionally
+removing spoken "Jarvis" command windows via transcript timestamps refined with
+audio-based silence detection.
+
+## Requirements
 
-To install dependencies:
+- **Bun** - runtime and package manager
+- **ffmpeg + ffprobe** - must be available on PATH
+- **whisper-cli** _(optional)_ - from
+  [whisper.cpp](https://github.com/ggerganov/whisper.cpp), required for
+  transcription
+  - Pass `--whisper-binary-path` if not on PATH
+  - Model file auto-downloads to `.cache/whispercpp/ggml-small.en.bin`
+- **Silero VAD model** - auto-downloads to `.cache/silero-vad.onnx` on first use
+
+## Installation
 
 ```bash
 bun install
 ```
 
-To run:
+## Quick Start
 
 ```bash
-bun run index.ts
+bun process-course-video.ts "/path/to/input.mp4" "/path/to/output" \
+  --enable-transcription \
+  --keep-intermediates \
+  --write-logs
 ```
 
-## Whisper.cpp transcription (optional)
+## Web UI (experimental)
 
-Install the local whisper.cpp CLI (Homebrew):
+Start the Remix-powered UI shell with the CLI:
 
 ```bash
-brew install whisper-cpp
+bun cli.ts app start
+```
+
+Then open `http://127.0.0.1:3000`. Use `--port` or `--host` to override the
+defaults.
+
+## CLI Options
+
+| Option                   | Alias | Description                             | Default     |
+| ------------------------ | ----- | --------------------------------------- | ----------- |
+| `input`                  |       | Input video file (mp4/mkv)              | _required_  |
+| `outputDir`              |       | Output directory                        | `output`    |
+| `--min-chapter-seconds`  | `-m`  | Skip chapters shorter than this         | `15`        |
+| `--dry-run`              | `-d`  | Don't write files or run ffmpeg         | `false`     |
+| `--keep-intermediates`   | `-k`  | Keep `.tmp` files for debugging         | `false`     |
+| `--write-logs`           | `-l`  | Write log files for skips/fallbacks     | `false`     |
+| `--enable-transcription` |       | Run whisper.cpp for command detection   | `false`     |
+| `--whisper-model-path`   |       | Path to whisper.cpp model file          | auto-cached |
+| `--whisper-language`     |       | Language for whisper                    | `en`        |
+| `--whisper-binary-path`  |       | Path to `whisper-cli` binary            | system PATH |
+| `--chapter`              | `-c`  | Filter to specific chapters (see below) | all         |
+
+## Chapter Selection
+
+The `--chapter` flag supports flexible selection:
+
+- Single: `--chapter 4`
+- Range: `--chapter 4-6`
+- Open range: `--chapter 4-*` (chapter 4 to end)
+- Multiple: `--chapter 4,6,9-12`
+
+Chapter numbers are 1-based by default.
+
+## Output Structure
+
+Final files are written to the output directory with names like:
+
+```
+chapter-01-intro.mp4
+chapter-02-getting-started.mp4
+chapter-03-custom-title.mp4
 ```
 
-The default small English model is downloaded on first use and cached at
-`.cache/whispercpp/ggml-small.en.bin`. Replace that file (or pass
-`--whisper-model-path`) to use a different model.
+When `--keep-intermediates` is enabled, intermediate files go to `output/.tmp/`:
+
+| File Pattern          | Description                                      |
+| --------------------- | ------------------------------------------------ |
+| `*-raw.mp4`           | Raw chapter clip with initial padding removed    |
+| `*-normalized.mp4`    | Audio normalized (highpass + denoise + loudnorm) |
+| `*-transcribe.wav`    | Audio extracted for whisper                      |
+| `*-transcribe.json`   | Whisper JSON output                              |
+| `*-transcribe.txt`    | Whisper text output                              |
+| `*-splice-*.mp4`      | Segments before/after command windows            |
+| `*-spliced.mp4`       | Concatenated output after command removal        |
+| `*.log`               | Per-chapter skip/fallback logs                   |
+| `process-summary.log` | Overall processing summary                       |
+
+## Voice Commands
+
+Commands are spoken in the format: `jarvis <command> ... thanks`
 
-Enable transcription with `--enable-transcription` when running
-`process-course-video.ts` to skip chapters that include "jarvis bad take" or
-"bad take jarvis". If the CLI isn't on your PATH, pass `--whisper-binary-path`
-with the full path to `whisper-cli`.
+| Command                                 | Effect                  |
+| --------------------------------------- | ----------------------- |
+| `jarvis bad take thanks`                | Skip the entire chapter |
+| `jarvis filename my-custom-name thanks` | Rename output file      |
 
-Customize skip phrases by repeating `--whisper-skip-phrase` (do not use
-comma-separated values because phrases may include commas).
+The command window (from "jarvis" to "thanks") is removed from the final video.
 
-Manual test checklist:
+## More Details
 
-- Run with `--enable-transcription` and confirm whisper.cpp runs locally.
-- Verify a chapter containing the phrase is skipped and logged.
-- Verify a normal chapter still renders and writes output.
+Implementation notes and pipeline details live in `docs/README.md`.
 
 This project was created using `bun init` in bun v1.3.1. [Bun](https://bun.com)
 is a fast all-in-one JavaScript runtime.

package/app/assets/styles.css

@@ -0,0 +1,129 @@
+:root {
+	color-scheme: light;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
+	background: #f8fafc;
+	color: #0f172a;
+}
+
+h1,
+h2,
+h3,
+p {
+	margin: 0;
+}
+
+.app-shell {
+	max-width: 960px;
+	margin: 0 auto;
+	padding: 48px 24px 72px;
+}
+
+.app-header {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	margin-bottom: 32px;
+}
+
+.app-kicker {
+	font-size: 12px;
+	letter-spacing: 0.16em;
+	text-transform: uppercase;
+	color: #64748b;
+	font-weight: 600;
+}
+
+.app-title {
+	font-size: 32px;
+	font-weight: 700;
+}
+
+.app-subtitle {
+	font-size: 16px;
+	color: #475569;
+	line-height: 1.6;
+	max-width: 640px;
+}
+
+.app-grid {
+	display: grid;
+	gap: 16px;
+	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}
+
+.app-card {
+	background: #ffffff;
+	border-radius: 16px;
+	border: 1px solid #e2e8f0;
+	padding: 20px;
+	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.app-list {
+	margin: 0;
+	padding-left: 18px;
+	color: #334155;
+	line-height: 1.6;
+}
+
+.app-muted {
+	color: #64748b;
+	line-height: 1.5;
+}
+
+.status-pill {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 12px;
+	border-radius: 999px;
+	background: #e0f2fe;
+	color: #0369a1;
+	font-size: 12px;
+	font-weight: 600;
+	width: fit-content;
+}
+
+.counter-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 10px 14px;
+	border: none;
+	border-radius: 10px;
+	background: #0ea5e9;
+	color: #ffffff;
+	font-size: 14px;
+	font-weight: 600;
+	cursor: pointer;
+	transition: transform 0.15s ease, background 0.15s ease;
+}
+
+.counter-button:hover {
+	background: #0284c7;
+}
+
+.counter-button:disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.counter-button:active {
+	transform: translateY(1px);
+}
+
+.counter-value {
+	font-weight: 700;
+}

package/app/client/app.tsx

@@ -0,0 +1,37 @@
+import { Counter } from './counter.tsx'
+
+export function App() {
+	return () => (
+		<main class="app-shell">
+			<header class="app-header">
+				<span class="app-kicker">Eprec Studio</span>
+				<h1 class="app-title">Editing workspace</h1>
+				<p class="app-subtitle">
+					Prepare edits with the CLI, then review them here.
+				</p>
+			</header>
+			<div class="app-grid">
+				<section class="app-card">
+					<h2>Workflow</h2>
+					<ol class="app-list">
+						<li>Run a CLI edit command.</li>
+						<li>Open the workspace UI.</li>
+						<li>Review and refine the cut list.</li>
+					</ol>
+				</section>
+				<section class="app-card">
+					<h2>UI status</h2>
+					<p class="status-pill">Running locally</p>
+					<p class="app-muted">
+						Server-rendered shell with client-side edits.
+					</p>
+				</section>
+				<section class="app-card">
+					<h2>Interaction check</h2>
+					<p class="app-muted">Click the counter to verify interactivity.</p>
+					<Counter setup={{ initial: 0 }} />
+				</section>
+			</div>
+		</main>
+	)
+}

package/app/client/counter.tsx

@@ -0,0 +1,22 @@
+import type { Handle } from 'remix/component'
+
+type CounterSetup = { initial?: number }
+
+export function Counter(handle: Handle, props: { setup?: CounterSetup } = {}) {
+	let count = props.setup?.initial ?? 0
+	return () => (
+		<button
+			type="button"
+			class="counter-button"
+			on={{
+				click: () => {
+					count += 1
+					handle.update()
+				},
+			}}
+		>
+			<span>Click count</span>
+			<span class="counter-value">{count}</span>
+		</button>
+	)
+}

package/app/client/entry.tsx

@@ -0,0 +1,8 @@
+import { createRoot } from 'remix/component'
+import { App } from './app.tsx'
+
+const rootElement = document.getElementById('root')
+if (rootElement) {
+	rootElement.innerHTML = ''
+}
+createRoot(rootElement ?? document.body).render(<App />)

package/app/components/layout.tsx

@@ -0,0 +1,37 @@
+import { html, type SafeHtml } from 'remix/html-template'
+import { baseImportMap } from '../config/import-map.ts'
+
+export function Layout({
+	children,
+	title = 'Eprec Studio',
+	entryScript = '/app/client/entry.tsx',
+}: {
+	children?: SafeHtml
+	title?: string
+	entryScript?: string | false
+}) {
+	const importmap = { imports: baseImportMap }
+	const importmapJson = JSON.stringify(importmap)
+	const importmapScript = html.raw`<script type="importmap">${importmapJson}</script>`
+	const modulePreloads = Object.values(baseImportMap).map((value) => {
+		return html`<link rel="modulepreload" href="${value}" />`
+	})
+
+	return html`<html lang="en">
+		<head>
+			<meta charset="utf-8" />
+			<meta name="viewport" content="width=device-width, initial-scale=1" />
+			<title>${title}</title>
+			<link rel="stylesheet" href="/assets/styles.css" />
+			${importmapScript} ${modulePreloads}
+		</head>
+		<body>
+			<div id="root">${children ?? ''}</div>
+			${
+				entryScript
+					? html`<script type="module" src="${entryScript}"></script>`
+					: ''
+			}
+		</body>
+	</html>`
+}

package/app/config/env.ts

@@ -0,0 +1,31 @@
+type AppEnv = {
+	NODE_ENV: 'development' | 'production' | 'test'
+	PORT: number
+	HOST: string
+}
+
+const DEFAULT_PORT = 3000
+const DEFAULT_HOST = '127.0.0.1'
+
+function parseNodeEnv(value: string | undefined): AppEnv['NODE_ENV'] {
+	if (value === 'production' || value === 'test') {
+		return value
+	}
+	return 'development'
+}
+
+function parsePort(value: string | undefined): number {
+	const parsed = Number(value)
+	if (!Number.isFinite(parsed) || parsed <= 0) {
+		return DEFAULT_PORT
+	}
+	return Math.floor(parsed)
+}
+
+export function getEnv(): AppEnv {
+	return {
+		NODE_ENV: parseNodeEnv(process.env.NODE_ENV),
+		PORT: parsePort(process.env.PORT),
+		HOST: process.env.HOST?.trim() || DEFAULT_HOST,
+	}
+}

package/app/config/import-map.ts

@@ -0,0 +1,9 @@
+/**
+ * Base import map for client-side modules.
+ */
+export const baseImportMap = {
+	'remix/component': '/node_modules/remix/component',
+	'remix/component/jsx-runtime': '/node_modules/remix/component/jsx-runtime',
+	'remix/component/jsx-dev-runtime':
+		'/node_modules/remix/component/jsx-dev-runtime',
+} as const

package/app/config/init-env.ts

@@ -0,0 +1,3 @@
+if (!process.env.NODE_ENV) {
+	process.env.NODE_ENV = 'development'
+}

package/app/config/routes.ts

@@ -0,0 +1,5 @@
+import { route } from 'remix/fetch-router'
+
+export default route({
+	index: '/',
+})

package/app/helpers/render.ts

@@ -0,0 +1,6 @@
+import type { SafeHtml } from 'remix/html-template'
+import { createHtmlResponse } from 'remix/response/html'
+
+export function render(body: string | SafeHtml, init?: ResponseInit) {
+	return createHtmlResponse(body, init)
+}

package/app/router.tsx

@@ -0,0 +1,102 @@
+import path from 'node:path'
+import { createRouter, type Middleware } from 'remix/fetch-router'
+import { html } from 'remix/html-template'
+import { Layout } from './components/layout.tsx'
+import routes from './config/routes.ts'
+import { render } from './helpers/render.ts'
+import indexHandlers from './routes/index.tsx'
+
+const STATIC_CORS_HEADERS = {
+	'Access-Control-Allow-Origin': '*',
+	'Access-Control-Allow-Methods': 'GET, HEAD, OPTIONS',
+	'Access-Control-Allow-Headers': 'Accept, Content-Type',
+} as const
+
+function bunStaticFiles(
+	root: string,
+	options: { filter?: (pathname: string) => boolean; cacheControl?: string },
+): Middleware {
+	const absoluteRoot = path.resolve(root)
+	return async (context, next) => {
+		if (context.method === 'OPTIONS') {
+			const relativePath = context.url.pathname.replace(/^\/+/, '')
+			if (options.filter && !options.filter(relativePath)) {
+				return next()
+			}
+			const filePath = path.join(absoluteRoot, relativePath)
+			if (!filePath.startsWith(absoluteRoot + path.sep)) {
+				return next()
+			}
+			const file = Bun.file(filePath)
+			if (!(await file.exists())) {
+				return next()
+			}
+			return new Response(null, {
+				status: 204,
+				headers: {
+					...STATIC_CORS_HEADERS,
+					'Access-Control-Max-Age': '86400',
+				},
+			})
+		}
+
+		if (context.method !== 'GET' && context.method !== 'HEAD') {
+			return next()
+		}
+		const relativePath = context.url.pathname.replace(/^\/+/, '')
+		if (options.filter && !options.filter(relativePath)) {
+			return next()
+		}
+		const filePath = path.join(absoluteRoot, relativePath)
+		if (!filePath.startsWith(absoluteRoot + path.sep)) {
+			return next()
+		}
+		const file = Bun.file(filePath)
+		if (!(await file.exists())) {
+			return next()
+		}
+		return new Response(context.method === 'HEAD' ? null : file, {
+			headers: {
+				'Content-Type': file.type,
+				'Content-Length': String(file.size),
+				...(options.cacheControl
+					? { 'Cache-Control': options.cacheControl }
+					: {}),
+				...STATIC_CORS_HEADERS,
+			},
+		})
+	}
+}
+
+const cacheControl =
+	process.env.NODE_ENV === 'production'
+		? 'public, max-age=31536000, immutable'
+		: 'no-cache'
+
+export function createAppRouter(rootDir: string) {
+	const router = createRouter({
+		middleware: [
+			bunStaticFiles(path.join(rootDir, 'public'), { cacheControl }),
+			bunStaticFiles(path.join(rootDir, 'app'), {
+				filter: (pathname) => pathname.startsWith('assets/'),
+				cacheControl,
+			}),
+		],
+		defaultHandler() {
+			return render(
+				Layout({
+					title: 'Not Found',
+					entryScript: false,
+					children: html`<main class="app-shell">
+					<h1 class="app-title">404 - Not Found</h1>
+				</main>`,
+				}),
+				{ status: 404 },
+			)
+		},
+	})
+
+	router.map(routes.index, indexHandlers)
+
+	return router
+}

package/app/routes/index.tsx

@@ -0,0 +1,50 @@
+import { html } from 'remix/html-template'
+import { Layout } from '../components/layout.tsx'
+import { render } from '../helpers/render.ts'
+
+const indexHandler = {
+	middleware: [],
+	loader() {
+		return render(
+			Layout({
+				title: 'Eprec Studio',
+				children: html`<main class="app-shell">
+					<header class="app-header">
+						<span class="app-kicker">Eprec Studio</span>
+						<h1 class="app-title">Editing workspace</h1>
+						<p class="app-subtitle">
+							Prepare edits with the CLI, then review them here.
+						</p>
+					</header>
+					<div class="app-grid">
+						<section class="app-card">
+							<h2>Workflow</h2>
+							<ol class="app-list">
+								<li>Run a CLI edit command.</li>
+								<li>Open the workspace UI.</li>
+								<li>Review and refine the cut list.</li>
+							</ol>
+						</section>
+						<section class="app-card">
+							<h2>UI status</h2>
+							<p class="status-pill">UI booted</p>
+							<p class="app-muted">
+								Client-side components load after the first paint.
+							</p>
+						</section>
+						<section class="app-card">
+							<h2>Interaction check</h2>
+							<p class="app-muted">Client bundle loads after this page.</p>
+							<button class="counter-button" type="button" disabled>
+								<span>Click count</span>
+								<span class="counter-value">0</span>
+							</button>
+						</section>
+					</div>
+				</main>`,
+			}),
+		)
+	},
+}
+
+export default indexHandler

package/app-server.ts

@@ -0,0 +1,60 @@
+import './app/config/init-env.ts'
+
+import getPort from 'get-port'
+import { getEnv } from './app/config/env.ts'
+import { createAppRouter } from './app/router.tsx'
+import { createBundlingRoutes } from './server/bundling.ts'
+
+type AppServerOptions = {
+	host?: string
+	port?: number
+}
+
+function startServer(port: number, hostname: string) {
+	const router = createAppRouter(import.meta.dirname)
+	return Bun.serve({
+		port,
+		hostname,
+		idleTimeout: 30,
+		routes: createBundlingRoutes(import.meta.dirname),
+		async fetch(request) {
+			try {
+				return await router.fetch(request)
+			} catch (error) {
+				console.error(error)
+				return new Response('Internal Server Error', { status: 500 })
+			}
+		},
+	})
+}
+
+async function getServerPort(nodeEnv: string, desiredPort: number) {
+	if (nodeEnv === 'production') {
+		return desiredPort
+	}
+	const port = await getPort({ port: desiredPort })
+	if (port !== desiredPort) {
+		console.warn(`⚠️  Port ${desiredPort} was taken, using port ${port} instead`)
+	}
+	return port
+}
+
+export async function startAppServer(options: AppServerOptions = {}) {
+	const env = getEnv()
+	const host = options.host ?? env.HOST
+	const desiredPort = options.port ?? env.PORT
+	const port = await getServerPort(env.NODE_ENV, desiredPort)
+	const server = startServer(port, host)
+	const hostname = server.hostname.includes(':')
+		? `[${server.hostname}]`
+		: server.hostname
+	const url = `http://${hostname}:${server.port}`
+
+	console.log(`[app] running at ${url}`)
+
+	return { server, url }
+}
+
+if (import.meta.main) {
+	await startAppServer()
+}

package/cli.ts

@@ -3,6 +3,7 @@ import path from 'node:path'
 import type { CommandBuilder, CommandHandler } from 'yargs'
 import yargs from 'yargs/yargs'
 import { hideBin } from 'yargs/helpers'
+import { startAppServer } from './app-server'
 import { ensureFfmpegAvailable } from './process-course/ffmpeg'
 import {
 	normalizeProcessArgs,
@@ -53,6 +54,28 @@ async function main() {
 			configureCombineVideosCommand as CommandBuilder,
 			handleCombineVideosCommand as CommandHandler,
 		)
+		.command(
+			'app start',
+			'Start the web UI server',
+			(command) =>
+				command
+					.option('port', {
+						type: 'number',
+						describe: 'Port for the app server',
+					})
+					.option('host', {
+						type: 'string',
+						describe: 'Host to bind for the app server',
+					}),
+			async (argv) => {
+				const port =
+					typeof argv.port === 'number' && Number.isFinite(argv.port)
+						? argv.port
+						: undefined
+				const host = resolveOptionalString(argv.host)
+				await startAppServer({ port, host })
+			},
+		)
 		.command(
 			'transcribe <input>',
 			'Transcribe a single audio/video file',

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "eprec",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/epicweb-dev/eprec"
   },
   "scripts": {
+    "app:start": "bun ./app-server.ts",
     "format": "prettier --write .",
     "test": "bun test process-course utils.test.ts",
     "test:e2e": "bun test e2e",
@@ -18,9 +19,13 @@
     "eprec": "./cli.ts"
   },
   "files": [
+    "app/**",
+    "app-server.ts",
     "cli.ts",
     "process-course/**",
     "process-course-video.ts",
+    "public/**",
+    "server/**",
     "speech-detection.ts",
     "utils.ts",
     "whispercpp-transcribe.ts"
@@ -36,7 +41,9 @@
     "typescript": "^5"
   },
   "dependencies": {
+    "get-port": "^7.1.0",
     "onnxruntime-node": "^1.23.2",
+    "remix": "3.0.0-alpha.0",
     "yargs": "^18.0.0"
   }
 }

package/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

package/server/bundling.ts

@@ -0,0 +1,210 @@
+import path from 'node:path'
+
+type PackageJson = {
+	exports?: Record<string, { default?: string; types?: string } | string>
+	module?: string
+	main?: string
+}
+
+async function resolvePackageExport(
+	specifier: string,
+	rootDir: string,
+): Promise<string | null> {
+	const parts = specifier.split('/')
+	let packageName: string
+	let subpathParts: string[]
+
+	if (specifier.startsWith('@')) {
+		if (parts.length < 2) return null
+		packageName = `${parts[0]}/${parts[1]}`
+		subpathParts = parts.slice(2)
+	} else {
+		if (parts.length === 0 || !parts[0]) return null
+		packageName = parts[0]
+		subpathParts = parts.slice(1)
+	}
+
+	const subpath = subpathParts.length > 0 ? `./${subpathParts.join('/')}` : '.'
+	const packageDir = path.join(rootDir, 'node_modules', packageName)
+	const packageJsonPath = path.join(packageDir, 'package.json')
+	const packageJsonFile = Bun.file(packageJsonPath)
+
+	if (!(await packageJsonFile.exists())) return null
+
+	const packageJson = JSON.parse(
+		await packageJsonFile.text(),
+	) as PackageJson
+
+	if (!packageJson.exports) {
+		const entryFile = packageJson.module || packageJson.main
+		if (entryFile) {
+			const entryPath = path.join(packageDir, entryFile)
+			if (await Bun.file(entryPath).exists()) return entryPath
+		}
+		const indexPath = path.join(packageDir, 'index.js')
+		return (await Bun.file(indexPath).exists()) ? indexPath : null
+	}
+
+	const exportEntry = packageJson.exports[subpath]
+	if (!exportEntry) return null
+
+	const exportPath =
+		typeof exportEntry === 'string'
+			? exportEntry
+			: exportEntry.default
+
+	if (!exportPath) return null
+
+	const resolvedPath = path.join(packageDir, exportPath)
+	return (await Bun.file(resolvedPath).exists()) ? resolvedPath : null
+}
+
+const BUNDLING_CORS_HEADERS = {
+	'Access-Control-Allow-Origin': '*',
+	'Access-Control-Allow-Methods': 'GET, HEAD, OPTIONS',
+	'Access-Control-Allow-Headers': 'Accept, Content-Type',
+} as const
+
+export function createBundlingRoutes(rootDir: string) {
+	const clientDir = path.resolve(rootDir, 'app', 'client')
+
+	return {
+		'/app/client/*': async (request: Request) => {
+			if (request.method === 'OPTIONS') {
+				return new Response(null, {
+					status: 204,
+					headers: {
+						...BUNDLING_CORS_HEADERS,
+						'Access-Control-Max-Age': '86400',
+					},
+				})
+			}
+
+			const url = new URL(request.url)
+			const reqPath = path.posix.normalize(url.pathname.replace(/^\/+/, ''))
+			const resolved = path.resolve(rootDir, reqPath)
+
+			if (!resolved.startsWith(clientDir + path.sep)) {
+				return new Response('Forbidden', {
+					status: 403,
+					headers: BUNDLING_CORS_HEADERS,
+				})
+			}
+
+			if (!resolved.endsWith('.ts') && !resolved.endsWith('.tsx')) {
+				return new Response('Not Found', {
+					status: 404,
+					headers: BUNDLING_CORS_HEADERS,
+				})
+			}
+
+			const entryFile = Bun.file(resolved)
+			if (!(await entryFile.exists())) {
+				return new Response('Not Found', {
+					status: 404,
+					headers: BUNDLING_CORS_HEADERS,
+				})
+			}
+
+		const buildResult = await Bun.build({
+			entrypoints: [resolved],
+			target: 'browser',
+			minify: Bun.env.NODE_ENV === 'production',
+			splitting: false,
+			format: 'esm',
+			sourcemap: Bun.env.NODE_ENV === 'production' ? 'none' : 'inline',
+			jsx: { importSource: 'remix/component' },
+		})
+
+		if (!buildResult.success) {
+			const errorMessage = buildResult.logs
+				.map((log) => log.message)
+				.join('\n')
+			return new Response(errorMessage || 'Build failed', {
+				status: 500,
+				headers: {
+					'Content-Type': 'text/plain',
+					...BUNDLING_CORS_HEADERS,
+				},
+			})
+		}
+
+		const output = buildResult.outputs[0]
+		return new Response(output, {
+			headers: {
+				'Content-Type': 'application/javascript',
+				'Cache-Control':
+					Bun.env.NODE_ENV === 'production'
+						? 'public, max-age=31536000, immutable'
+						: 'no-cache',
+				...BUNDLING_CORS_HEADERS,
+			},
+		})
+		},
+
+		'/node_modules/*': async (request: Request) => {
+			if (request.method === 'OPTIONS') {
+				return new Response(null, {
+					status: 204,
+					headers: {
+						...BUNDLING_CORS_HEADERS,
+						'Access-Control-Max-Age': '86400',
+					},
+				})
+			}
+
+			const url = new URL(request.url)
+			const specifier = url.pathname.replace('/node_modules/', '')
+			const filepath = await resolvePackageExport(specifier, rootDir)
+
+			if (!filepath) {
+				return new Response('Package not found', {
+					status: 404,
+					headers: BUNDLING_CORS_HEADERS,
+				})
+			}
+
+			const nodeModulesDir = path.resolve(rootDir, 'node_modules')
+			if (!filepath.startsWith(nodeModulesDir + path.sep)) {
+				return new Response('Forbidden', {
+					status: 403,
+					headers: BUNDLING_CORS_HEADERS,
+				})
+			}
+
+		const buildResult = await Bun.build({
+			entrypoints: [filepath],
+			target: 'browser',
+			minify: Bun.env.NODE_ENV === 'production',
+			splitting: false,
+			format: 'esm',
+			sourcemap: Bun.env.NODE_ENV === 'production' ? 'none' : 'inline',
+		})
+
+		if (!buildResult.success) {
+			const errorMessage = buildResult.logs
+				.map((log) => log.message)
+				.join('\n')
+			return new Response(errorMessage || 'Build failed', {
+				status: 500,
+				headers: {
+					'Content-Type': 'text/plain',
+					...BUNDLING_CORS_HEADERS,
+				},
+			})
+		}
+
+		const output = buildResult.outputs[0]
+		return new Response(output, {
+			headers: {
+				'Content-Type': 'application/javascript',
+				'Cache-Control':
+					Bun.env.NODE_ENV === 'production'
+						? 'public, max-age=31536000, immutable'
+						: 'no-cache',
+				...BUNDLING_CORS_HEADERS,
+			},
+		})
+		},
+	}
+}

package/whispercpp-transcribe.ts

@@ -113,9 +113,7 @@ async function readTranscriptText(transcriptPath: string, fallback: string) {
 	throw new Error('Whisper.cpp transcript output was empty.')
 }
 
-async function readTranscriptSegments(
-	transcriptPath: string,
-): Promise<{
+async function readTranscriptSegments(transcriptPath: string): Promise<{
 	segments: TranscriptSegment[]
 	source: TranscriptionResult['segmentsSource']
 }> {