eprec 1.3.0 → 1.4.0

package/README.md

@@ -48,14 +48,14 @@ bun process-course-video.ts "/path/to/input.mp4" "/path/to/output" \
 
 ## Web UI (experimental)
 
-Start the Remix-powered UI shell with the CLI:
+Start the Remix-powered UI shell (watch mode enabled):
 
 ```bash
-bun cli.ts app start
+bun run app:start
 ```
 
-Then open `http://127.0.0.1:3000`. Use `--port` or `--host` to override the
-defaults.
+Then open `http://localhost:3000`. Use `-- --port` or `-- --host` to override
+the defaults.
 
 ## CLI Options
 

package/app-server.ts

@@ -10,6 +10,140 @@ type AppServerOptions = {
 	port?: number
 }
 
+const LOCALHOST_ALIASES = new Set(['127.0.0.1', '::1', 'localhost'])
+const COLOR_ENABLED =
+	process.env.FORCE_COLOR === '1' ||
+	(Boolean(process.stdout.isTTY) && !process.env.NO_COLOR)
+const SHORTCUT_COLORS: Record<string, string> = {
+	o: '\u001b[36m',
+	r: '\u001b[33m',
+	q: '\u001b[31m',
+	h: '\u001b[35m',
+}
+const ANSI_RESET = '\u001b[0m'
+
+function colorizeShortcut(key: string) {
+	if (!COLOR_ENABLED) {
+		return key
+	}
+	const color = SHORTCUT_COLORS[key.toLowerCase()]
+	return color ? `${color}${key}${ANSI_RESET}` : key
+}
+
+function formatHostnameForDisplay(hostname: string) {
+	if (LOCALHOST_ALIASES.has(hostname)) {
+		return 'localhost'
+	}
+	if (hostname.includes(':')) {
+		return `[${hostname}]`
+	}
+	return hostname
+}
+
+function formatServerUrl(hostname: string, port: number) {
+	return `http://${formatHostnameForDisplay(hostname)}:${port}`
+}
+
+function getShortcutLines(url: string) {
+	return [
+		'[app] shortcuts:',
+		`  ${colorizeShortcut('o')}: open ${url} in browser`,
+		`  ${colorizeShortcut('r')}: restart server`,
+		`  ${colorizeShortcut('q')}: quit server`,
+		`  ${colorizeShortcut('h')}: show shortcuts`,
+	]
+}
+
+function logShortcuts(url: string) {
+	for (const line of getShortcutLines(url)) {
+		console.log(line)
+	}
+}
+
+function openBrowser(url: string) {
+	const platform = process.platform
+	const command =
+		platform === 'darwin'
+			? ['open', url]
+			: platform === 'win32'
+				? ['cmd', '/c', 'start', '', url]
+				: ['xdg-open', url]
+	try {
+		const subprocess = Bun.spawn({
+			cmd: command,
+			stdin: 'ignore',
+			stdout: 'ignore',
+			stderr: 'ignore',
+		})
+		void subprocess.exited.catch((error) => {
+			console.warn(
+				`[app] failed to open browser: ${
+					error instanceof Error ? error.message : String(error)
+				}`,
+			)
+		})
+	} catch (error) {
+		console.warn(
+			`[app] failed to open browser: ${
+				error instanceof Error ? error.message : String(error)
+			}`,
+		)
+	}
+}
+
+function setupShortcutHandling(options: {
+	getUrl: () => string
+	restart: () => void
+	stop: () => void
+}) {
+	if (!process.stdin.isTTY || typeof process.stdin.setRawMode !== 'function') {
+		return () => {}
+	}
+
+	const stdin = process.stdin
+	const handleKey = (key: string) => {
+		if (key === '\u0003') {
+			options.stop()
+			return
+		}
+		const lower = key.toLowerCase()
+		if (lower === 'o') {
+			openBrowser(options.getUrl())
+			return
+		}
+		if (lower === 'r') {
+			options.restart()
+			return
+		}
+		if (lower === 'q') {
+			options.stop()
+			return
+		}
+		if (lower === 'h' || lower === '?') {
+			logShortcuts(options.getUrl())
+		}
+	}
+
+	const onData = (chunk: Buffer | string) => {
+		const input = chunk.toString()
+		for (const key of input) {
+			handleKey(key)
+		}
+	}
+
+	stdin.setRawMode(true)
+	stdin.resume()
+	stdin.on('data', onData)
+
+	return () => {
+		stdin.off('data', onData)
+		if (stdin.isTTY && typeof stdin.setRawMode === 'function') {
+			stdin.setRawMode(false)
+		}
+		stdin.pause()
+	}
+}
+
 function startServer(port: number, hostname: string) {
 	const router = createAppRouter(import.meta.dirname)
 	return Bun.serve({
@@ -46,15 +180,48 @@ export async function startAppServer(options: AppServerOptions = {}) {
 	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}`
+	let server = startServer(port, host)
+	const getUrl = () => formatServerUrl(server.hostname, server.port)
+	let cleanupInput = () => {}
+	let isRestarting = false
+	const stopServer = () => {
+		console.log('[app] stopping server...')
+		cleanupInput()
+		server.stop()
+		process.exit(0)
+	}
+	const restartServer = async () => {
+		if (isRestarting) {
+			return
+		}
+		isRestarting = true
+		try {
+			console.log('[app] restarting server...')
+			await server.stop()
+			server = startServer(port, host)
+			console.log(`[app] running at ${getUrl()}`)
+		} finally {
+			isRestarting = false
+		}
+	}
+	cleanupInput = setupShortcutHandling({
+		getUrl,
+		restart: restartServer,
+		stop: stopServer,
+	})
+	const url = getUrl()
 
 	console.log(`[app] running at ${url}`)
+	logShortcuts(url)
 
-	return { server, url }
+	return { 
+		get server() { return server }, 
+		url,
+		stop: () => {
+			cleanupInput()
+			server.stop()
+		}
+	}
 }
 
 if (import.meta.main) {

package/cli.ts

@@ -164,14 +164,15 @@ async function main(rawArgs = hideBin(process.argv)) {
 						})
 						resultText = result.text
 					},
-					{ successText: 'Transcription complete', enabled: context.interactive },
+					{
+						successText: 'Transcription complete',
+						enabled: context.interactive,
+					},
 				)
 				console.log(
 					`Transcript written to ${transcribeArgs.outputBasePath}.txt`,
 				)
-				console.log(
-					`Segments written to ${transcribeArgs.outputBasePath}.json`,
-				)
+				console.log(`Segments written to ${transcribeArgs.outputBasePath}.json`)
 				console.log(resultText)
 			},
 		)
@@ -208,7 +209,10 @@ async function main(rawArgs = hideBin(process.argv)) {
 							end,
 						})
 					},
-					{ successText: 'Speech detection complete', enabled: context.interactive },
+					{
+						successText: 'Speech detection complete',
+						enabled: context.interactive,
+					},
 				)
 				console.log(JSON.stringify(segments, null, 2))
 			},
@@ -230,9 +234,7 @@ function createCliUxContext(): CliUxContext {
 	return { interactive, prompter, pathPicker }
 }
 
-async function promptForCommand(
-	prompter: Prompter,
-): Promise<string[] | null> {
+async function promptForCommand(prompter: Prompter): Promise<string[] | null> {
 	const selection = await prompter.select('Choose a command', [
 		{
 			name: 'Process chapters into separate files',
@@ -283,7 +285,12 @@ async function resolveProcessArgs(argv: Arguments, context: CliUxContext) {
 	}
 
 	let outputDir = resolveOptionalString(argv['output-dir'])
-	if (!outputDir && context.interactive && context.prompter && context.pathPicker) {
+	if (
+		!outputDir &&
+		context.interactive &&
+		context.prompter &&
+		context.pathPicker
+	) {
 		const chooseOutput = await context.prompter.confirm(
 			'Choose a custom output directory?',
 			{ defaultValue: false },

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "eprec",
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/epicweb-dev/eprec"
   },
   "scripts": {
-    "app:start": "bun ./app-server.ts",
+    "app:start": "bun --watch ./cli.ts app start",
     "format": "prettier --write .",
     "test": "bun test process-course utils.test.ts",
     "test:e2e": "bun test ./e2e",

package/process-course/edits/cli.ts

@@ -40,7 +40,10 @@ type CliUxOptions = {
 	pathPicker?: PathPicker
 }
 
-export function buildCombinedOutputPath(video1Path: string, video2Path: string) {
+export function buildCombinedOutputPath(
+	video1Path: string,
+	video2Path: string,
+) {
 	const dir = path.dirname(video1Path)
 	const ext = path.extname(video1Path) || path.extname(video2Path) || '.mp4'
 	const name1 = path.parse(video1Path).name
@@ -81,8 +84,7 @@ export async function resolveEditVideoArgs(
 		})
 	}
 	const defaultOutputPath = buildEditedOutputPath(input)
-	const outputPath =
-		resolveOptionalString(argv.output) ?? defaultOutputPath
+	const outputPath = resolveOptionalString(argv.output) ?? defaultOutputPath
 	const paddingMs = resolvePaddingMs(argv['padding-ms'])
 
 	return {
@@ -194,7 +196,9 @@ export function createEditVideoHandler(options: CliUxOptions): CommandHandler {
 	}
 }
 
-export function createCombineVideosHandler(options: CliUxOptions): CommandHandler {
+export function createCombineVideosHandler(
+	options: CliUxOptions,
+): CommandHandler {
 	return async (argv) => {
 		const args = await resolveCombineVideosArgs(argv, options)
 		let outputPath = ''