From dbbb0b716039690070988a2a4ff68a86bebd127d Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Mon, 2 Mar 2026 16:48:21 -0500
Subject: [PATCH 01/24] feat: rebuild realtime app into
 chat/translate/transcribe modes

---
 biome.json                                |   5 +-
 src/app/(app)/ChatMode.tsx                | 182 +++++
 src/app/(app)/ModeShell.tsx               | 125 ++++
 src/app/(app)/ToggleRealtime.tsx          | 546 --------------
 src/app/(app)/TranscribeMode.tsx          | 118 +++
 src/app/(app)/TranslateMode.tsx           | 155 ++++
 src/app/(app)/page.tsx                    |   4 +-
 src/app/actions/realtime.ts               | 342 +++++++--
 src/app/layout.tsx                        |  12 +-
 src/app/styles.css                        |   6 +
 src/realtime/chatRealtimeClient.ts        | 399 +++++++++++
 src/realtime/modeRuntimeStore.tsx         | 684 ++++++++++++++++++
 src/realtime/provider.tsx                 | 834 ----------------------
 src/realtime/schemas.ts                   | 191 +++++
 src/realtime/sessionTypes.ts              |  78 ++
 src/realtime/transcriptionSocketClient.ts | 329 +++++++++
 16 files changed, 2580 insertions(+), 1430 deletions(-)
 create mode 100644 src/app/(app)/ChatMode.tsx
 create mode 100644 src/app/(app)/ModeShell.tsx
 delete mode 100644 src/app/(app)/ToggleRealtime.tsx
 create mode 100644 src/app/(app)/TranscribeMode.tsx
 create mode 100644 src/app/(app)/TranslateMode.tsx
 create mode 100644 src/realtime/chatRealtimeClient.ts
 create mode 100644 src/realtime/modeRuntimeStore.tsx
 delete mode 100644 src/realtime/provider.tsx
 create mode 100644 src/realtime/schemas.ts
 create mode 100644 src/realtime/sessionTypes.ts
 create mode 100644 src/realtime/transcriptionSocketClient.ts

diff --git a/biome.json b/biome.json
index e8d99dd..b628b7b 100644
--- a/biome.json
+++ b/biome.json
@@ -1,3 +1,6 @@
 {
-	"extends": ["@rubriclab/config/biome"]
+	"extends": ["@rubriclab/config/biome"],
+	"files": {
+		"includes": ["**", "!next-env.d.ts"]
+	}
 }
diff --git a/src/app/(app)/ChatMode.tsx b/src/app/(app)/ChatMode.tsx
new file mode 100644
index 0000000..37f70ab
--- /dev/null
+++ b/src/app/(app)/ChatMode.tsx
@@ -0,0 +1,182 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+import { useLilacModeRuntime } from '@/realtime/modeRuntimeStore'
+
+export default function ChatMode() {
+	const {
+		chatInstructions,
+		chatTranscripts,
+		chatTurnDelaySeconds,
+		remoteAudioStream,
+		setChatInstructions,
+		setChatTurnDelaySeconds
+	} = useLilacModeRuntime()
+	const [draftInstructions, setDraftInstructions] = useState(chatInstructions)
+	const [saveMessage, setSaveMessage] = useState('')
+	const transcriptListRef = useRef<HTMLDivElement | null>(null)
+	const transcriptBottomRef = useRef<HTMLDivElement | null>(null)
+	const stayPinnedToBottomRef = useRef(true)
+	const playbackAudioElementRef = useRef<HTMLAudioElement | null>(null)
+
+	useEffect(() => {
+		setDraftInstructions(chatInstructions)
+	}, [chatInstructions])
+
+	useEffect(() => {
+		if (!saveMessage) return
+		const timeoutId = window.setTimeout(() => setSaveMessage(''), 1600)
+		return () => {
+			window.clearTimeout(timeoutId)
+		}
+	}, [saveMessage])
+
+	useEffect(() => {
+		const transcriptListElement = transcriptListRef.current
+		if (!transcriptListElement) return
+		const activeTranscriptListElement = transcriptListElement
+
+		function onScroll(): void {
+			const distanceFromBottom =
+				activeTranscriptListElement.scrollHeight -
+				activeTranscriptListElement.scrollTop -
+				activeTranscriptListElement.clientHeight
+			stayPinnedToBottomRef.current = distanceFromBottom < 120
+		}
+
+		activeTranscriptListElement.addEventListener('scroll', onScroll)
+		onScroll()
+		return () => {
+			activeTranscriptListElement.removeEventListener('scroll', onScroll)
+		}
+	}, [])
+
+	useEffect(() => {
+		if (!stayPinnedToBottomRef.current) return
+		void chatTranscripts
+		transcriptBottomRef.current?.scrollIntoView({ behavior: 'auto' })
+	}, [chatTranscripts])
+
+	useEffect(() => {
+		if (!playbackAudioElementRef.current) {
+			playbackAudioElementRef.current = new Audio()
+			playbackAudioElementRef.current.autoplay = true
+		}
+		const playbackAudioElement = playbackAudioElementRef.current
+		if (!playbackAudioElement) return
+		playbackAudioElement.srcObject = remoteAudioStream
+		if (remoteAudioStream) {
+			void playbackAudioElement.play().catch(() => {})
+		}
+		return () => {
+			playbackAudioElement.pause()
+			playbackAudioElement.srcObject = null
+		}
+	}, [remoteAudioStream])
+
+	return (
+		<div className="flex w-full max-w-5xl flex-col gap-4">
+			<div
+				ref={transcriptListRef}
+				className="h-[54dvh] overflow-y-auto rounded-3xl border border-white/25 bg-[var(--lilac-elevated)]/80 p-4 shadow-xl backdrop-blur"
+			>
+				{chatTranscripts.length ? (
+					<div className="flex flex-col gap-3">
+						{chatTranscripts.map(message => {
+							const isUser = message.role === 'user'
+							const bubbleBaseClasses =
+								'max-w-[94%] whitespace-pre-wrap rounded-3xl px-4 py-3 text-sm leading-relaxed shadow-sm'
+							const bubbleClasses = isUser
+								? `${bubbleBaseClasses} self-end bg-[var(--lilac-ink)] text-[var(--lilac-surface)]`
+								: `${bubbleBaseClasses} self-start border border-white/30 bg-white/80 text-[var(--lilac-ink)] dark:bg-white/12`
+							const label = isUser ? 'You' : 'Lilac'
+							return (
+								<div key={message.id} className="flex flex-col gap-1">
+									<div
+										className={`px-1 font-semibold text-[10px] uppercase tracking-[0.16em] ${
+											isUser ? 'text-right text-[var(--lilac-ink-muted)]' : 'text-[var(--lilac-ink-muted)]'
+										}`}
+									>
+										{label}
+										{message.status === 'streaming' ? <span className="ml-1 opacity-60">•</span> : null}
+									</div>
+									<div className={bubbleClasses}>{message.text.trim() || '…'}</div>
+								</div>
+							)
+						})}
+						<div ref={transcriptBottomRef} />
+					</div>
+				) : (
+					<div className="flex h-full items-center justify-center text-[var(--lilac-ink-muted)] text-sm">
+						Speak to start chatting with Lilac.
+					</div>
+				)}
+			</div>
+
+			<div className="grid gap-4 md:grid-cols-2">
+				<div className="rounded-3xl border border-white/25 bg-[var(--lilac-elevated)]/80 p-4 shadow-lg backdrop-blur">
+					<div className="mb-2 font-semibold text-[var(--lilac-ink-muted)] text-sm uppercase tracking-[0.12em]">
+						Instructions
+					</div>
+					<textarea
+						className="h-36 w-full resize-none rounded-2xl border border-white/30 bg-white/80 px-3 py-2 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-white/60 dark:bg-white/10"
+						onChange={event => setDraftInstructions(event.target.value)}
+						value={draftInstructions}
+					/>
+					<div className="mt-3 flex items-center justify-end gap-2">
+						<button
+							type="button"
+							className="cursor-pointer rounded-full px-3 py-2 font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.12em] transition hover:bg-white/40"
+							onClick={() => setDraftInstructions(chatInstructions)}
+						>
+							Reset
+						</button>
+						<button
+							type="button"
+							className="cursor-pointer rounded-full bg-[var(--lilac-ink)] px-4 py-2 font-semibold text-[var(--lilac-surface)] text-xs uppercase tracking-[0.12em] transition hover:shadow"
+							onClick={() => {
+								setChatInstructions(draftInstructions.trim() || defaultChatInstructions)
+								setSaveMessage('Saved')
+							}}
+						>
+							Save
+						</button>
+					</div>
+					{saveMessage ? (
+						<output className="mt-2 block text-[var(--lilac-ink-muted)] text-xs" aria-live="polite">
+							{saveMessage}
+						</output>
+					) : null}
+				</div>
+
+				<div className="rounded-3xl border border-white/25 bg-[var(--lilac-elevated)]/80 p-4 shadow-lg backdrop-blur">
+					<div className="mb-2 font-semibold text-[var(--lilac-ink-muted)] text-sm uppercase tracking-[0.12em]">
+						End-of-speech delay
+					</div>
+					<p className="mb-4 text-[var(--lilac-ink-muted)] text-sm">
+						Increase this if Lilac responds before you finish speaking.
+					</p>
+					<input
+						className="lilac-range"
+						max={6}
+						min={0.2}
+						onChange={event => setChatTurnDelaySeconds(Number.parseFloat(event.target.value))}
+						step={0.1}
+						type="range"
+						value={chatTurnDelaySeconds}
+					/>
+					<div className="mt-3 flex items-center justify-between text-sm">
+						<span className="text-[var(--lilac-ink-muted)]">Delay</span>
+						<span className="font-semibold text-[var(--lilac-ink)]">
+							{chatTurnDelaySeconds.toFixed(1)}s
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+const defaultChatInstructions =
+	'You are Lilac. Help users communicate across languages. Keep answers concise, faithful, and practical.'
diff --git a/src/app/(app)/ModeShell.tsx b/src/app/(app)/ModeShell.tsx
new file mode 100644
index 0000000..2bad4d2
--- /dev/null
+++ b/src/app/(app)/ModeShell.tsx
@@ -0,0 +1,125 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+import ChatMode from '@/app/(app)/ChatMode'
+import TranscribeMode from '@/app/(app)/TranscribeMode'
+import TranslateMode from '@/app/(app)/TranslateMode'
+import { useLilacModeRuntime } from '@/realtime/modeRuntimeStore'
+import type { LilacMode } from '@/realtime/sessionTypes'
+
+function renderMode(mode: LilacMode): ReactNode {
+	switch (mode) {
+		case 'chat':
+			return <ChatMode />
+		case 'translate':
+			return <TranslateMode />
+		case 'transcribe':
+			return <TranscribeMode />
+		default:
+			return <ChatMode />
+	}
+}
+
+function getConnectionStateLabel(connectionState: string): string {
+	switch (connectionState) {
+		case 'connecting':
+			return 'Connecting'
+		case 'connected':
+			return 'Live'
+		case 'error':
+			return 'Error'
+		default:
+			return 'Idle'
+	}
+}
+
+export default function ModeShell() {
+	const {
+		clearCurrentModeHistory,
+		connectionState,
+		errorMessage,
+		mode,
+		reconnectCurrentMode,
+		setMode
+	} = useLilacModeRuntime()
+
+	return (
+		<div className="relative flex h-svh flex-col overflow-hidden">
+			<div className="-z-10 pointer-events-none absolute inset-0 bg-[radial-gradient(220%_200%_at_50%_-12%,rgba(255,255,255,0.96)_0%,rgba(247,243,231,0.98)_48%,rgba(247,243,231,1)_72%,rgba(188,226,255,0.65)_100%)] dark:bg-[radial-gradient(220%_200%_at_50%_-12%,rgba(33,39,56,0.95)_0%,rgba(18,22,32,0.98)_52%,rgba(14,18,27,1)_78%,rgba(39,55,92,0.62)_100%)]" />
+			<div className="-z-10 pointer-events-none absolute inset-x-0 top-0 h-[26dvh] bg-gradient-to-b from-white/65 via-transparent to-transparent dark:from-[#27324a]/50" />
+			<div className="-z-10 pointer-events-none absolute inset-x-0 bottom-0 h-[30dvh] bg-gradient-to-t from-[var(--lilac-surface)] via-transparent to-transparent" />
+
+			<header
+				className="absolute inset-x-0 z-20 flex items-center justify-between px-6"
+				style={{ top: 'calc(env(safe-area-inset-top, 0px) + 1.5rem)' }}
+			>
+				<div className="font-semibold text-[var(--lilac-ink-muted)] text-sm uppercase tracking-[0.16em]">
+					Lilac
+				</div>
+				<div className="rounded-full border border-white/25 bg-[var(--lilac-elevated)] p-1 shadow backdrop-blur">
+					<div className="flex items-center gap-1" role="tablist">
+						{(['chat', 'translate', 'transcribe'] as const).map(modeOption => (
+							<button
+								key={modeOption}
+								type="button"
+								aria-pressed={mode === modeOption}
+								className={`cursor-pointer rounded-full px-3 py-2 font-semibold text-xs uppercase tracking-[0.08em] transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 ${
+									mode === modeOption
+										? 'bg-white text-[var(--lilac-ink)] shadow'
+										: 'text-[var(--lilac-ink-muted)] hover:text-[var(--lilac-ink)]'
+								}`}
+								onClick={() => setMode(modeOption)}
+							>
+								{modeOption}
+							</button>
+						))}
+					</div>
+				</div>
+			</header>
+
+			<div className="relative z-10 flex flex-1 items-center justify-center px-6 pt-28 pb-24">
+				<div className="flex w-full max-w-6xl flex-col gap-4">
+					<div className="flex items-center justify-between gap-4">
+						<div className="rounded-full border border-white/25 bg-[var(--lilac-elevated)] px-3 py-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em] shadow-sm">
+							{mode}
+						</div>
+						<div className="rounded-full border border-white/25 bg-[var(--lilac-elevated)] px-3 py-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em] shadow-sm">
+							{getConnectionStateLabel(connectionState)}
+						</div>
+					</div>
+
+					{errorMessage ? (
+						<div className="rounded-2xl border border-red-300/60 bg-red-50/90 px-4 py-3 text-red-800 text-sm shadow-sm dark:border-red-500/40 dark:bg-red-900/25 dark:text-red-100">
+							{errorMessage}
+						</div>
+					) : null}
+
+					{renderMode(mode)}
+				</div>
+			</div>
+
+			<footer
+				className="absolute inset-x-0 z-10 flex justify-center px-6"
+				style={{ bottom: 'calc(env(safe-area-inset-bottom, 0px) + 1.5rem)' }}
+			>
+				<div className="flex items-center gap-2 rounded-full border border-white/25 bg-[var(--lilac-elevated)] p-1 shadow backdrop-blur">
+					<button
+						type="button"
+						className="cursor-pointer rounded-full px-3 py-2 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em] transition hover:bg-white/50 hover:text-[var(--lilac-ink)]"
+						onClick={clearCurrentModeHistory}
+					>
+						Clear
+					</button>
+					<button
+						type="button"
+						className="cursor-pointer rounded-full bg-[var(--lilac-ink)] px-4 py-2 font-semibold text-[10px] text-[var(--lilac-surface)] uppercase tracking-[0.12em] transition hover:shadow"
+						onClick={reconnectCurrentMode}
+					>
+						Reconnect
+					</button>
+				</div>
+			</footer>
+		</div>
+	)
+}
diff --git a/src/app/(app)/ToggleRealtime.tsx b/src/app/(app)/ToggleRealtime.tsx
deleted file mode 100644
index fbe59c9..0000000
--- a/src/app/(app)/ToggleRealtime.tsx
+++ /dev/null
@@ -1,546 +0,0 @@
-'use client'
-
-import { AnimatePresence, motion } from 'framer-motion'
-import { type CSSProperties, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-
-import { useRealtimeVoiceSession } from '@/realtime/provider'
-
-const customInstructionsToken = '{{CUSTOM_INSTRUCTIONS}}'
-
-const defaultPrompt = `You are Lilac, a human-first translation facilitator.
-
-Core principles:
-- Stay silent until a participant speaks. Never initiate conversations or offer greetings on your own.
-- Focus exclusively on translating what people say. Keep responses concise, neutral, and free from commentary.
-- Ask clarifying questions only when you truly need information to configure translation directions.
-
-Onboarding flow:
-1. When the first participant speaks, respond in their language. Acknowledge them briefly and ask which language they want translations delivered into. Wait for their answer.
-2. Once a translation direction is confirmed, remember it. For each of that speaker's future utterances, return only the translation "{translation}" for every listener.
-3. When a new participant joins, reply in their language, confirm whom you will translate for, and ensure everyone knows which languages they will receive. Keep confirmations short.
-4. Track all participants, their names, and their preferred languages. Provide translations for every other participant. Use labels such as "[English → John] {translation}" when you know their name, otherwise default to the language label.
-5. Do not teach, embellish, or comment on the content of the conversation. Translate faithfully and efficiently.
-6. If you cannot determine a speaker's language, politely ask them—in your best guess of their language—to clarify.
-
-Overrides:
-- Sometimes, the user will have custom instructions that override the onboarding flow behavior. This is okay, and you should follow their custom instructions to let the user customize the experience. If there is a conflict, lean on the custom instructions -- which may override the onboarding flow. 
-
-Your sole job is to provide fast, faithful translations that keep the conversation flowing.
-
-Custom instructions (these are optionally added by the user in a settings UI to augment and personalize the experience):
-${customInstructionsToken}
--- End custom instructions --`
-
-const buildPrompt = (custom: string) =>
-	defaultPrompt.replace(customInstructionsToken, custom.trim() || 'None provided.')
-
-const languagePhrases = [
-	{ code: 'en', text: 'Introduce yourself' },
-	{ code: 'es', text: 'Preséntate' },
-	{ code: 'zh', text: '请介绍一下自己' },
-	{ code: 'hi', text: 'अपना परिचय दीजिए' },
-	{ code: 'ar', text: 'قدّم نفسك' },
-	{ code: 'fr', text: 'Présentez-vous' },
-	{ code: 'de', text: 'Stell dich vor' },
-	{ code: 'ja', text: '自己紹介をしてください' },
-	{ code: 'pt', text: 'Apresente-se' },
-	{ code: 'ru', text: 'Представьтесь' },
-	{ code: 'ko', text: '자기소개를 해 주세요' },
-	{ code: 'it', text: 'Presentati' }
-]
-
-const saveButtonClasses = [
-	'bg-[var(--lilac-ink)]',
-	'focus-visible:outline',
-	'focus-visible:outline-2',
-	'focus-visible:outline-offset-2',
-	'focus-visible:outline-white',
-	'hover:shadow-lg',
-	'px-4',
-	'py-2',
-	'rounded-full',
-	'shadow-md',
-	'text-[var(--lilac-surface)]',
-	'transition'
-].join(' ')
-
-type ConnectionState = 'idle' | 'requesting' | 'ready' | 'error'
-
-export default function ToggleRealtime() {
-	const { start, stop, remoteStream, transcripts, updateInstructions, updateTurnDelaySeconds } =
-		useRealtimeVoiceSession()
-	const [connectionState, setConnectionState] = useState<ConnectionState>('idle')
-	const [errorMessage, setErrorMessage] = useState<string | null>(null)
-	const [languageOrder, setLanguageOrder] = useState(languagePhrases)
-	const [tab, setTab] = useState<'session' | 'settings'>('session')
-	const [customInstructions, setCustomInstructions] = useState('')
-	const [draftInstructions, setDraftInstructions] = useState('')
-	const [saveConfirmation, setSaveConfirmation] = useState('')
-	const [turnDelaySeconds, setTurnDelaySeconds] = useState(1.2)
-	const [turnDelayDraft, setTurnDelayDraft] = useState('1.2')
-	const audioContextRef = useRef<AudioContext | null>(null)
-	const sourceRef = useRef<MediaStreamAudioSourceNode | null>(null)
-	const startedRef = useRef(false)
-	const cancelInitRef = useRef(false)
-
-	const normalizeTurnDelaySeconds = useCallback((value: number) => {
-		if (!Number.isFinite(value)) return 1.2
-		const clamped = Math.min(6, Math.max(0.2, value))
-		return Math.round(clamped * 10) / 10
-	}, [])
-
-	const turnDelayRangeStyle = useMemo(() => {
-		const min = 0.2
-		const max = 6
-		const progress = Math.min(100, Math.max(0, ((turnDelaySeconds - min) / (max - min)) * 100))
-		return { '--lilac-range-progress': `${progress}%` } as CSSProperties
-	}, [turnDelaySeconds])
-
-	const instructionsText = useMemo(() => buildPrompt(customInstructions), [customInstructions])
-
-	useEffect(() => {
-		if (typeof window === 'undefined') return
-		const stored = window.localStorage.getItem('lilac.customInstructions')
-		if (stored !== null) {
-			setCustomInstructions(stored)
-			setDraftInstructions(stored)
-		}
-	}, [])
-
-	useEffect(() => {
-		if (typeof window === 'undefined') return
-		const stored = window.localStorage.getItem('lilac.turnDelaySeconds')
-		if (stored === null) return
-		const parsed = Number.parseFloat(stored)
-		if (!Number.isFinite(parsed)) return
-		const normalized = normalizeTurnDelaySeconds(parsed)
-		setTurnDelaySeconds(normalized)
-		setTurnDelayDraft(String(normalized))
-	}, [normalizeTurnDelaySeconds])
-
-	useEffect(() => {
-		if (!saveConfirmation) return
-		const timer = window.setTimeout(() => setSaveConfirmation(''), 1800)
-		return () => {
-			window.clearTimeout(timer)
-		}
-	}, [saveConfirmation])
-
-	useEffect(() => {
-		if (typeof window === 'undefined') return
-		window.localStorage.setItem('lilac.customInstructions', customInstructions)
-		updateInstructions(instructionsText)
-	}, [customInstructions, instructionsText, updateInstructions])
-
-	useEffect(() => {
-		if (typeof window === 'undefined') return
-		window.localStorage.setItem('lilac.turnDelaySeconds', String(turnDelaySeconds))
-		updateTurnDelaySeconds(turnDelaySeconds)
-	}, [turnDelaySeconds, updateTurnDelaySeconds])
-
-	useEffect(() => {
-		if (typeof navigator === 'undefined') return
-		const navLanguages = navigator.languages ?? [navigator.language]
-		const normalized = navLanguages.map(lang => lang?.toLowerCase?.() ?? '').filter(Boolean)
-
-		if (!normalized.length) return
-
-		const seen = new Set<string>()
-		const prioritized: typeof languagePhrases = []
-
-		for (const navLang of normalized) {
-			const match = languagePhrases.find(
-				phrase => navLang === phrase.code || navLang.startsWith(`${phrase.code}-`)
-			)
-			if (match && !seen.has(match.code)) {
-				prioritized.push(match)
-				seen.add(match.code)
-			}
-		}
-
-		for (const phrase of languagePhrases) {
-			if (!seen.has(phrase.code)) {
-				prioritized.push(phrase)
-				seen.add(phrase.code)
-			}
-		}
-
-		setLanguageOrder(prioritized)
-	}, [])
-
-	const ensureAudioContext = useCallback(() => {
-		const Ctx =
-			window.AudioContext ??
-			(window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext
-		if (!Ctx) throw new Error('AudioContext is not supported in this browser')
-
-		if (!audioContextRef.current) {
-			audioContextRef.current = new Ctx()
-			console.log('[lilac] created AudioContext', { state: audioContextRef.current.state })
-		}
-
-		if (audioContextRef.current.state === 'suspended') {
-			void audioContextRef.current
-				.resume()
-				.then(() => {
-					console.log('[lilac] AudioContext resumed', {
-						state: audioContextRef.current?.state
-					})
-				})
-				.catch(error => {
-					console.warn('[lilac] failed to resume AudioContext', error)
-				})
-		}
-
-		return audioContextRef.current
-	}, [])
-
-	useEffect(() => {
-		if (!remoteStream) return
-
-		let cancelled = false
-
-		const connectRemoteAudio = async () => {
-			console.log('[lilac] remoteStream updated', {
-				hasStream: Boolean(remoteStream),
-				tracks: remoteStream?.getTracks().length
-			})
-
-			if (!remoteStream.getAudioTracks().length) {
-				const onAddTrack = () => {
-					remoteStream.removeEventListener('addtrack', onAddTrack as EventListener)
-					void connectRemoteAudio()
-				}
-				remoteStream.addEventListener('addtrack', onAddTrack as EventListener)
-				return
-			}
-
-			try {
-				const ctx = ensureAudioContext()
-				if (!ctx || cancelled) return
-				const src = ctx.createMediaStreamSource(remoteStream)
-				sourceRef.current = src
-				src.connect(ctx.destination)
-			} catch (error) {
-				console.error('[lilac] failed to connect remote audio', error)
-			}
-		}
-
-		void connectRemoteAudio()
-
-		return () => {
-			cancelled = true
-			console.log('[lilac] cleaning audio graph')
-			try {
-				sourceRef.current?.disconnect()
-			} catch {}
-			sourceRef.current = null
-			try {
-				void audioContextRef.current?.close()
-			} catch {}
-			audioContextRef.current = null
-		}
-	}, [remoteStream, ensureAudioContext])
-
-	const beginSession = useCallback(async () => {
-		if (startedRef.current) return
-		startedRef.current = true
-		setConnectionState('requesting')
-		setErrorMessage(null)
-
-		try {
-			ensureAudioContext()
-			await start({ instructions: instructionsText, voice: 'verse' })
-			if (cancelInitRef.current) {
-				startedRef.current = false
-				return
-			}
-			setConnectionState('ready')
-		} catch (error) {
-			console.error('[lilac] failed to start realtime session', error)
-			startedRef.current = false
-			if (cancelInitRef.current) return
-			setConnectionState('error')
-			const message =
-				error instanceof Error ? error.message : 'Something went wrong while starting Lilac.'
-			setErrorMessage(message)
-		}
-	}, [ensureAudioContext, start, instructionsText])
-
-	useEffect(() => {
-		cancelInitRef.current = false
-		let cancelled = false
-
-		const run = async () => {
-			if (cancelled) return
-			await beginSession()
-		}
-
-		void run()
-
-		return () => {
-			cancelled = true
-			cancelInitRef.current = true
-			startedRef.current = false
-			stop()
-			try {
-				sourceRef.current?.disconnect()
-			} catch {}
-			sourceRef.current = null
-			try {
-				void audioContextRef.current?.close()
-			} catch {}
-			audioContextRef.current = null
-		}
-	}, [beginSession, stop])
-
-	const statusText = useMemo(() => {
-		if (connectionState === 'requesting') return 'Requesting microphone…'
-		if (connectionState === 'ready') return 'Listening'
-		if (connectionState === 'error')
-			return errorMessage ?? 'Unable to start. Check microphone permissions.'
-		return 'Preparing Lilac…'
-	}, [connectionState, errorMessage])
-
-	const [activeIndex, setActiveIndex] = useState(0)
-	const transcriptListRef = useRef<HTMLDivElement | null>(null)
-	const transcriptBottomRef = useRef<HTMLDivElement | null>(null)
-	const stickToBottomRef = useRef(true)
-
-	useEffect(() => {
-		if (!languageOrder.length) return
-		const timer = window.setInterval(() => {
-			setActiveIndex(current => (current + 1) % languageOrder.length)
-		}, 3200)
-		return () => {
-			window.clearInterval(timer)
-		}
-	}, [languageOrder])
-
-	const phrase = languageOrder[activeIndex] ?? languageOrder[0]
-	const footerText = tab === 'session' ? statusText : ''
-
-	useEffect(() => {
-		const el = transcriptListRef.current
-		if (!el) return
-
-		const onScroll = () => {
-			const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight
-			stickToBottomRef.current = distanceFromBottom < 140
-		}
-
-		el.addEventListener('scroll', onScroll)
-		onScroll()
-		return () => {
-			el.removeEventListener('scroll', onScroll)
-		}
-	}, [])
-
-	useEffect(() => {
-		if (!stickToBottomRef.current) return
-		// Trigger on streaming updates (deltas) while the user is pinned to the bottom.
-		void transcripts
-		transcriptBottomRef.current?.scrollIntoView({ behavior: 'auto' })
-	}, [transcripts])
-
-	const content =
-		tab === 'session' ? (
-			<div className="flex w-full max-w-xl flex-col gap-4">
-				<div
-					ref={transcriptListRef}
-					className="h-[62dvh] overflow-y-auto rounded-3xl border border-white/30 bg-[var(--lilac-elevated)]/70 p-4 shadow-xl backdrop-blur"
-				>
-					{transcripts.length ? (
-						<div className="flex flex-col gap-3">
-							{transcripts.map(item => {
-								const isUser = item.role === 'user'
-								const bubbleBase =
-									'max-w-[92%] whitespace-pre-wrap rounded-3xl px-4 py-3 text-sm leading-relaxed shadow-sm'
-								const bubbleClass = isUser
-									? `${bubbleBase} self-end bg-[var(--lilac-ink)] text-[var(--lilac-surface)]`
-									: `${bubbleBase} self-start border border-white/30 bg-white/70 text-[var(--lilac-ink)] dark:border-white/22 dark:bg-white/14 dark:text-[var(--lilac-ink)]`
-								const label = isUser ? 'You' : 'Lilac'
-								const text = item.text?.trim() ? item.text : '…'
-
-								return (
-									<div key={item.id} className="flex flex-col gap-1">
-										<div
-											className={`px-1 font-semibold text-[10px] uppercase tracking-[0.18em] ${
-												isUser ? 'text-right text-[var(--lilac-ink-muted)]' : 'text-[var(--lilac-ink-muted)]'
-											}`}
-										>
-											{label}
-											{item.status === 'streaming' ? <span className="ml-2 opacity-60">•</span> : null}
-										</div>
-										<div className={bubbleClass}>{text}</div>
-									</div>
-								)
-							})}
-							<div ref={transcriptBottomRef} />
-						</div>
-					) : (
-						<div className="flex h-full flex-col items-center justify-center px-6 text-center">
-							<AnimatePresence mode="wait">
-								<motion.span
-									key={phrase?.code ?? 'fallback'}
-									animate={{ opacity: 1, y: 0 }}
-									className="block font-semibold text-3xl text-[var(--lilac-ink)] tracking-tight sm:text-4xl"
-									exit={{ opacity: 0, y: 16 }}
-									initial={{ opacity: 0, y: -16 }}
-									transition={{ duration: 0.85, ease: 'easeInOut' }}
-								>
-									{phrase?.text ?? 'Introduce yourself'}
-								</motion.span>
-							</AnimatePresence>
-							<p className="mt-6 text-[var(--lilac-ink-muted)] text-sm">
-								Your spoken conversation will appear here as a live transcript.
-							</p>
-							<div ref={transcriptBottomRef} />
-						</div>
-					)}
-				</div>
-			</div>
-		) : (
-			<div className="flex w-full max-w-xl flex-col gap-4 text-left">
-				<div className="rounded-3xl border border-white/30 bg-[var(--lilac-elevated)] p-5 text-[var(--lilac-ink)] shadow-xl backdrop-blur">
-					<div className="mb-3 font-semibold text-base tracking-tight">Custom instructions</div>
-					<textarea
-						className="h-40 w-full resize-none rounded-2xl border border-white/30 bg-white/70 px-4 py-3 text-[var(--lilac-ink)] text-base outline-none ring-0 transition focus:border-white/70 focus:bg-white dark:bg-white/10 dark:focus:border-white/30 dark:focus:bg-white/20"
-						onChange={event => setDraftInstructions(event.target.value)}
-						placeholder="Tell Lilac how to behave."
-						value={draftInstructions}
-					/>
-					<div className="mt-3 flex justify-end gap-2 font-semibold text-sm">
-						<button
-							type="button"
-							className="cursor-pointer rounded-full px-4 py-2 text-[var(--lilac-ink-muted)] transition hover:bg-white/40 dark:hover:bg-white/10"
-							onClick={() => setDraftInstructions(customInstructions)}
-						>
-							Reset
-						</button>
-						<button
-							type="button"
-							className={`${saveButtonClasses} cursor-pointer`}
-							onClick={() => {
-								setCustomInstructions(draftInstructions.trim())
-								setSaveConfirmation('Custom instructions saved')
-							}}
-						>
-							Save
-						</button>
-					</div>
-					{saveConfirmation ? (
-						<output className="mt-2 block text-[var(--lilac-ink-muted)] text-xs" aria-live="polite">
-							{saveConfirmation}
-						</output>
-					) : null}
-				</div>
-				<div className="rounded-3xl border border-white/30 bg-[var(--lilac-elevated)] p-5 text-[var(--lilac-ink)] shadow-xl backdrop-blur">
-					<div className="mb-1 flex items-center justify-between gap-3">
-						<div className="font-semibold text-base tracking-tight">End-of-speech delay</div>
-						<span className="rounded-full border border-white/25 bg-[var(--lilac-elevated)] px-3 py-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.18em] shadow-sm backdrop-blur">
-							{turnDelaySeconds.toFixed(1)}s
-						</span>
-					</div>
-					<p className="mt-2 text-[var(--lilac-ink-muted)] text-sm">
-						If Lilac cuts you off when you speak slowly, increase this. It controls how long a pause
-						counts as “done speaking.”
-					</p>
-					<div className="mt-4 flex flex-col gap-3">
-						<input
-							className="lilac-range"
-							type="range"
-							min={0.2}
-							max={6}
-							step={0.1}
-							style={turnDelayRangeStyle}
-							value={turnDelaySeconds}
-							onChange={event => {
-								const next = normalizeTurnDelaySeconds(Number.parseFloat(event.target.value))
-								setTurnDelaySeconds(next)
-								setTurnDelayDraft(String(next))
-							}}
-						/>
-						<label className="flex items-center justify-between gap-3">
-							<span className="font-semibold text-[var(--lilac-ink-muted)] text-sm">Delay (seconds)</span>
-							<div className="flex items-center gap-2">
-								<input
-									inputMode="decimal"
-									type="number"
-									min={0.2}
-									max={6}
-									step={0.1}
-									className="lilac-number w-24 rounded-full border border-white/30 bg-white/70 px-4 py-2 text-right font-semibold text-[var(--lilac-ink)] text-sm outline-none transition focus:border-white/70 focus:bg-white dark:bg-white/10 dark:focus:border-white/30 dark:focus:bg-white/20"
-									onBlur={() => setTurnDelayDraft(String(turnDelaySeconds))}
-									onChange={event => {
-										const nextDraft = event.target.value
-										setTurnDelayDraft(nextDraft)
-										const parsed = Number.parseFloat(nextDraft)
-										if (!Number.isFinite(parsed)) return
-										setTurnDelaySeconds(normalizeTurnDelaySeconds(parsed))
-									}}
-									value={turnDelayDraft}
-								/>
-								<span className="font-semibold text-[var(--lilac-ink-muted)] text-sm">s</span>
-							</div>
-						</label>
-					</div>
-				</div>
-				<p className="px-1 text-[var(--lilac-ink-muted)] text-sm">
-					Settings are stored locally on this device.
-				</p>
-			</div>
-		)
-
-	return (
-		<div className="relative box-border flex h-svh flex-col overflow-hidden">
-			<div className="-z-10 pointer-events-none absolute inset-0 bg-[radial-gradient(220%_200%_at_50%_-12%,rgba(255,255,255,0.95)_0%,rgba(247,243,231,0.98)_48%,rgba(247,243,231,1)_72%,rgba(206,190,255,0.6)_100%)] dark:bg-[radial-gradient(220%_200%_at_50%_-12%,rgba(40,31,61,0.95)_0%,rgba(24,18,38,0.98)_50%,rgba(24,18,38,1)_74%,rgba(89,70,120,0.65)_100%)]" />
-			<div className="-z-10 pointer-events-none absolute inset-x-0 top-0 h-[28dvh] bg-gradient-to-b from-white/65 via-transparent to-transparent dark:from-[#2d2248]/60 dark:via-transparent" />
-			<div className="-z-10 pointer-events-none absolute inset-x-0 bottom-0 h-[32dvh] bg-gradient-to-t from-[var(--lilac-surface)] via-transparent to-transparent dark:from-[#120c1e] dark:via-transparent" />
-			<header
-				className="absolute right-0 left-0 z-20 flex items-center justify-between px-6 font-medium text-[var(--lilac-ink-muted)] text-sm uppercase tracking-wide"
-				style={{ top: 'calc(env(safe-area-inset-top, 0px) + 1.75rem)' }}
-			>
-				<span>Lilac</span>
-				<div
-					className="flex rounded-full bg-[var(--lilac-elevated)] p-1 font-semibold text-xs uppercase tracking-[0.08em] shadow-sm backdrop-blur"
-					role="tablist"
-				>
-					<button
-						type="button"
-						aria-pressed={tab === 'session'}
-						className={`cursor-pointer rounded-full px-3 py-2 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 ${
-							tab === 'session'
-								? 'bg-white text-[var(--lilac-ink)] shadow dark:text-[var(--lilac-surface)]'
-								: 'text-[var(--lilac-ink-muted)] hover:text-[var(--lilac-ink)]'
-						}`}
-						onClick={() => setTab('session')}
-					>
-						Chat
-					</button>
-					<button
-						type="button"
-						aria-pressed={tab === 'settings'}
-						className={`cursor-pointer rounded-full px-3 py-2 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 ${
-							tab === 'settings'
-								? 'bg-white text-[var(--lilac-ink)] shadow dark:text-[var(--lilac-surface)]'
-								: 'text-[var(--lilac-ink-muted)] hover:text-[var(--lilac-ink)]'
-						}`}
-						onClick={() => setTab('settings')}
-					>
-						Settings
-					</button>
-				</div>
-			</header>
-			<div className="relative z-10 flex flex-1 items-center justify-center px-6">{content}</div>
-			{footerText ? (
-				<footer
-					className="absolute right-0 left-0 z-10 flex justify-center px-6 font-medium text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.2em]"
-					style={{ bottom: 'calc(env(safe-area-inset-bottom, 0px) + 2rem)' }}
-				>
-					<span>{footerText}</span>
-				</footer>
-			) : null}
-		</div>
-	)
-}
diff --git a/src/app/(app)/TranscribeMode.tsx b/src/app/(app)/TranscribeMode.tsx
new file mode 100644
index 0000000..2ddf98a
--- /dev/null
+++ b/src/app/(app)/TranscribeMode.tsx
@@ -0,0 +1,118 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+import { useLilacModeRuntime } from '@/realtime/modeRuntimeStore'
+import { languageOptions } from '@/realtime/sessionTypes'
+
+export default function TranscribeMode() {
+	const { getDirectionColor, setTranscribeSettings, transcribeCards, transcribeSettings } =
+		useLilacModeRuntime()
+	const transcriptListRef = useRef<HTMLDivElement | null>(null)
+	const transcriptBottomRef = useRef<HTMLDivElement | null>(null)
+	const stayPinnedToBottomRef = useRef(true)
+
+	useEffect(() => {
+		const transcriptListElement = transcriptListRef.current
+		if (!transcriptListElement) return
+		const activeTranscriptListElement = transcriptListElement
+
+		function onScroll(): void {
+			const distanceFromBottom =
+				activeTranscriptListElement.scrollHeight -
+				activeTranscriptListElement.scrollTop -
+				activeTranscriptListElement.clientHeight
+			stayPinnedToBottomRef.current = distanceFromBottom < 120
+		}
+
+		activeTranscriptListElement.addEventListener('scroll', onScroll)
+		onScroll()
+		return () => {
+			activeTranscriptListElement.removeEventListener('scroll', onScroll)
+		}
+	}, [])
+
+	useEffect(() => {
+		if (!stayPinnedToBottomRef.current) return
+		void transcribeCards
+		transcriptBottomRef.current?.scrollIntoView({ behavior: 'auto' })
+	}, [transcribeCards])
+
+	return (
+		<div className="flex w-full max-w-5xl flex-col gap-4">
+			<div
+				ref={transcriptListRef}
+				className="h-[58dvh] overflow-y-auto rounded-3xl border border-white/25 bg-[var(--lilac-elevated)]/80 p-4 shadow-xl backdrop-blur"
+			>
+				{transcribeCards.length ? (
+					<div className="flex flex-col gap-3">
+						{transcribeCards.map(card => (
+							<article
+								key={card.id}
+								className="rounded-2xl border border-white/25 bg-white/70 p-3 shadow-sm dark:bg-white/10"
+							>
+								<div className="mb-2 flex items-center justify-between gap-2">
+									<span
+										className="rounded-full px-2 py-1 font-semibold text-[10px] uppercase tracking-[0.12em]"
+										style={{
+											backgroundColor: getDirectionColor(card.direction),
+											color: 'white'
+										}}
+									>
+										{card.sourceLanguageCode} {'->'} {card.targetLanguageCode}
+									</span>
+									<span className="font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
+										{card.status}
+									</span>
+								</div>
+								<div className="grid gap-2 md:grid-cols-2">
+									<div className="rounded-xl bg-[var(--lilac-surface)]/70 px-3 py-2">
+										<div className="mb-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
+											Original
+										</div>
+										<p className="whitespace-pre-wrap text-[var(--lilac-ink)] text-sm leading-relaxed">
+											{card.sourceText.trim() || '…'}
+										</p>
+									</div>
+									<div className="rounded-xl bg-[var(--lilac-surface)]/70 px-3 py-2">
+										<div className="mb-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
+											Translation
+										</div>
+										<p className="whitespace-pre-wrap text-[var(--lilac-ink)] text-sm leading-relaxed">
+											{card.translatedText.trim() ||
+												(card.status === 'error' ? card.errorMessage : 'Translating…')}
+										</p>
+									</div>
+								</div>
+							</article>
+						))}
+						<div ref={transcriptBottomRef} />
+					</div>
+				) : (
+					<div className="flex h-full items-center justify-center text-[var(--lilac-ink-muted)] text-sm">
+						Live transcription + translation will appear here.
+					</div>
+				)}
+			</div>
+
+			<div className="rounded-3xl border border-white/25 bg-[var(--lilac-elevated)]/80 p-4 shadow-lg backdrop-blur">
+				<label className="flex flex-col gap-2 md:max-w-sm">
+					<span className="font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.12em]">
+						Target language
+					</span>
+					<select
+						className="rounded-2xl border border-white/30 bg-white/80 px-3 py-2 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-white/60"
+						onChange={event => setTranscribeSettings({ targetLanguageCode: event.target.value })}
+						value={transcribeSettings.targetLanguageCode}
+					>
+						{languageOptions.map(option => (
+							<option key={option.code} value={option.code}>
+								{option.label}
+							</option>
+						))}
+					</select>
+				</label>
+			</div>
+		</div>
+	)
+}
diff --git a/src/app/(app)/TranslateMode.tsx b/src/app/(app)/TranslateMode.tsx
new file mode 100644
index 0000000..f2d2d8c
--- /dev/null
+++ b/src/app/(app)/TranslateMode.tsx
@@ -0,0 +1,155 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+import { useLilacModeRuntime } from '@/realtime/modeRuntimeStore'
+import { languageOptions } from '@/realtime/sessionTypes'
+
+export default function TranslateMode() {
+	const { getDirectionColor, setTranslateSettings, translateCards, translateSettings } =
+		useLilacModeRuntime()
+	const transcriptListRef = useRef<HTMLDivElement | null>(null)
+	const transcriptBottomRef = useRef<HTMLDivElement | null>(null)
+	const stayPinnedToBottomRef = useRef(true)
+
+	useEffect(() => {
+		const transcriptListElement = transcriptListRef.current
+		if (!transcriptListElement) return
+		const activeTranscriptListElement = transcriptListElement
+
+		function onScroll(): void {
+			const distanceFromBottom =
+				activeTranscriptListElement.scrollHeight -
+				activeTranscriptListElement.scrollTop -
+				activeTranscriptListElement.clientHeight
+			stayPinnedToBottomRef.current = distanceFromBottom < 120
+		}
+
+		activeTranscriptListElement.addEventListener('scroll', onScroll)
+		onScroll()
+		return () => {
+			activeTranscriptListElement.removeEventListener('scroll', onScroll)
+		}
+	}, [])
+
+	useEffect(() => {
+		if (!stayPinnedToBottomRef.current) return
+		void translateCards
+		transcriptBottomRef.current?.scrollIntoView({ behavior: 'auto' })
+	}, [translateCards])
+
+	return (
+		<div className="flex w-full max-w-5xl flex-col gap-4">
+			<div
+				ref={transcriptListRef}
+				className="h-[58dvh] overflow-y-auto rounded-3xl border border-white/25 bg-[var(--lilac-elevated)]/80 p-4 shadow-xl backdrop-blur"
+			>
+				{translateCards.length ? (
+					<div className="flex flex-col gap-3">
+						{translateCards.map(card => (
+							<article
+								key={card.id}
+								className="rounded-2xl border border-white/25 bg-white/70 p-3 shadow-sm dark:bg-white/10"
+							>
+								<div className="mb-2 flex items-center justify-between gap-2">
+									<span
+										className="rounded-full px-2 py-1 font-semibold text-[10px] uppercase tracking-[0.12em]"
+										style={{
+											backgroundColor: getDirectionColor(card.direction),
+											color: 'white'
+										}}
+									>
+										{card.direction.replaceAll('_', ' ')}
+									</span>
+									<span className="font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
+										{card.status}
+									</span>
+								</div>
+								<div className="grid gap-2 md:grid-cols-2">
+									<div className="rounded-xl bg-[var(--lilac-surface)]/70 px-3 py-2">
+										<div className="mb-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
+											{card.sourceLanguageCode}
+										</div>
+										<p className="whitespace-pre-wrap text-[var(--lilac-ink)] text-sm leading-relaxed">
+											{card.sourceText.trim() || '…'}
+										</p>
+									</div>
+									<div className="rounded-xl bg-[var(--lilac-surface)]/70 px-3 py-2">
+										<div className="mb-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
+											{card.targetLanguageCode}
+										</div>
+										<p className="whitespace-pre-wrap text-[var(--lilac-ink)] text-sm leading-relaxed">
+											{card.translatedText.trim() ||
+												(card.status === 'error' ? card.errorMessage : 'Translating…')}
+										</p>
+									</div>
+								</div>
+							</article>
+						))}
+						<div ref={transcriptBottomRef} />
+					</div>
+				) : (
+					<div className="flex h-full items-center justify-center text-[var(--lilac-ink-muted)] text-sm">
+						Live pairwise translation cards will appear here.
+					</div>
+				)}
+			</div>
+
+			<div className="grid gap-3 rounded-3xl border border-white/25 bg-[var(--lilac-elevated)]/80 p-4 shadow-lg backdrop-blur md:grid-cols-2">
+				<label className="flex flex-col gap-2">
+					<span className="font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.12em]">
+						Primary language
+					</span>
+					<select
+						className="rounded-2xl border border-white/30 bg-white/80 px-3 py-2 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-white/60"
+						onChange={event => {
+							const nextPrimary = event.target.value
+							const nextSecondary =
+								nextPrimary === translateSettings.secondaryLanguageCode
+									? translateSettings.primaryLanguageCode
+									: translateSettings.secondaryLanguageCode
+							setTranslateSettings({
+								primaryLanguageCode: nextPrimary,
+								secondaryLanguageCode: nextSecondary
+							})
+						}}
+						value={translateSettings.primaryLanguageCode}
+					>
+						{languageOptions.map(option => (
+							<option key={option.code} value={option.code}>
+								{option.label}
+							</option>
+						))}
+					</select>
+				</label>
+
+				<label className="flex flex-col gap-2">
+					<span className="font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.12em]">
+						Secondary language
+					</span>
+					<select
+						className="rounded-2xl border border-white/30 bg-white/80 px-3 py-2 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-white/60"
+						onChange={event => {
+							const nextSecondary = event.target.value
+							const nextPrimary =
+								nextSecondary === translateSettings.primaryLanguageCode
+									? translateSettings.secondaryLanguageCode
+									: translateSettings.primaryLanguageCode
+							setTranslateSettings({
+								primaryLanguageCode: nextPrimary,
+								secondaryLanguageCode: nextSecondary
+							})
+						}}
+						value={translateSettings.secondaryLanguageCode}
+					>
+						{languageOptions.map(option => (
+							<option key={option.code} value={option.code}>
+								{option.label}
+							</option>
+						))}
+					</select>
+				</label>
+			</div>
+		</div>
+	)
+}
diff --git a/src/app/(app)/page.tsx b/src/app/(app)/page.tsx
index 7b42c38..4fa8f24 100644
--- a/src/app/(app)/page.tsx
+++ b/src/app/(app)/page.tsx
@@ -1,5 +1,5 @@
-import ToggleRealtime from './ToggleRealtime'
+import ModeShell from '@/app/(app)/ModeShell'
 
 export default function Page() {
-	return <ToggleRealtime />
+	return <ModeShell />
 }
diff --git a/src/app/actions/realtime.ts b/src/app/actions/realtime.ts
index 8956089..7441d05 100644
--- a/src/app/actions/realtime.ts
+++ b/src/app/actions/realtime.ts
@@ -1,52 +1,312 @@
 'use server'
 
-import { z } from 'zod'
+import {
+	CompactTranslationContextActionInputSchema,
+	CompactTranslationContextActionOutputSchema,
+	CreateRealtimeClientSecretActionInputSchema,
+	CreateRealtimeClientSecretActionOutputSchema,
+	CreateRealtimeTranscriptionSessionActionInputSchema,
+	CreateRealtimeTranscriptionSessionActionOutputSchema,
+	parseClientSecretResponse,
+	TranslateUtteranceActionInputSchema,
+	TranslateUtteranceActionOutputSchema
+} from '@/realtime/schemas'
+import type { TranslationContextEntry } from '@/realtime/sessionTypes'
 import env from '~/env'
 
-const RealtimeSessionSchema = z.object({
-	client_secret: z.object({
-		expires_at: z.number(),
-		value: z.string()
-	}),
-	expires_at: z.number().optional(),
-	id: z.string(),
-	model: z.string()
-})
-
-export type RealtimeSession = z.infer<typeof RealtimeSessionSchema>
-
-const CreateSessionInputSchema = z.object({
-	instructions: z.string().optional(),
-	model: z.string().default('gpt-realtime-1.5'),
-	voice: z.string().default('verse')
-})
-
-export type CreateRealtimeSessionInput = z.input<typeof CreateSessionInputSchema>
-
-export async function createRealtimeSession(
-	input?: CreateRealtimeSessionInput
-): Promise<RealtimeSession> {
-	const { model, voice, instructions } = CreateSessionInputSchema.parse(input ?? {})
-
-	const response = await fetch('https://api.openai.com/v1/realtime/sessions', {
-		body: JSON.stringify({
-			model,
-			voice,
-			...(instructions ? { instructions } : {})
-		}),
-		headers: {
-			Authorization: `Bearer ${env.OPENAI_API_KEY}`,
-			'Content-Type': 'application/json',
-			'OpenAI-Beta': 'realtime=v1'
-		},
+const openAiApiBaseUrl = 'https://api.openai.com/v1'
+const defaultRequestHeaders = {
+	Authorization: `Bearer ${env.OPENAI_API_KEY}`,
+	'Content-Type': 'application/json'
+} satisfies HeadersInit
+
+async function parseJsonResponse(response: Response): Promise<unknown> {
+	const responseText = await response.text()
+	if (!responseText.trim()) return {}
+	try {
+		return JSON.parse(responseText) as unknown
+	} catch {
+		throw new Error(responseText)
+	}
+}
+
+async function postOpenAi(path: string, body: unknown): Promise<unknown> {
+	const response = await fetch(`${openAiApiBaseUrl}${path}`, {
+		body: JSON.stringify(body),
+		headers: defaultRequestHeaders,
 		method: 'POST'
 	})
 
+	const payload = await parseJsonResponse(response)
+
 	if (!response.ok) {
-		const message = await response.text()
-		throw new Error(message || 'Failed to create realtime session')
+		const fallbackMessage = `OpenAI request failed (${response.status})`
+		if (typeof payload === 'object' && payload !== null && 'error' in payload) {
+			const candidate = (payload as { error?: { message?: string } }).error?.message
+			throw new Error(candidate || fallbackMessage)
+		}
+		throw new Error(fallbackMessage)
+	}
+
+	return payload
+}
+
+function extractResponseOutputText(responsePayload: unknown): string {
+	if (typeof responsePayload !== 'object' || responsePayload === null) {
+		throw new Error('OpenAI Responses payload was not an object')
+	}
+
+	const payload = responsePayload as {
+		output?: Array<{
+			content?: Array<{
+				text?: string
+				type?: string
+			}>
+		}>
+		output_text?: string
+	}
+
+	if (typeof payload.output_text === 'string' && payload.output_text.trim().length > 0) {
+		return payload.output_text.trim()
+	}
+
+	const outputItems = Array.isArray(payload.output) ? payload.output : []
+	for (const outputItem of outputItems) {
+		const contentParts = Array.isArray(outputItem.content) ? outputItem.content : []
+		for (const contentPart of contentParts) {
+			if (contentPart.type === 'output_text' && typeof contentPart.text === 'string') {
+				const normalizedText = contentPart.text.trim()
+				if (normalizedText.length > 0) return normalizedText
+			}
+		}
+	}
+
+	throw new Error('OpenAI did not return output text for translation')
+}
+
+function renderContextForPrompt(context: TranslationContextEntry[]): string {
+	if (!context.length) return '[]'
+	return JSON.stringify(context)
+}
+
+function createTranslatePrompt(
+	input: ReturnType<typeof TranslateUtteranceActionInputSchema.parse>
+): string {
+	const contextJson = renderContextForPrompt(input.context)
+	const escapedUtteranceText = input.utteranceText
+
+	if (input.settings.mode === 'translate') {
+		return [
+			'You are a deterministic translation engine for a two-language live conversation.',
+			'Return JSON only.',
+			`Primary language code: ${input.settings.primaryLanguageCode}.`,
+			`Secondary language code: ${input.settings.secondaryLanguageCode}.`,
+			'Detect whether the utterance is in primary or secondary language and translate to the opposite language.',
+			'Direction must be exactly one of: primary_to_secondary, secondary_to_primary.',
+			'Never add commentary or extra keys.',
+			'Use recent context to keep references consistent.',
+			`Recent context (JSON): ${contextJson}`,
+			`Utterance: ${escapedUtteranceText}`
+		].join('\n')
+	}
+
+	return [
+		'You are a deterministic transcription translation engine for one-way translation.',
+		'Return JSON only.',
+		`Target language code: ${input.settings.targetLanguageCode}.`,
+		'Detect the utterance language and translate only into the target language.',
+		'Direction must be exactly: to_target.',
+		'Never add commentary or extra keys.',
+		'Use recent context to keep references consistent.',
+		`Recent context (JSON): ${contextJson}`,
+		`Utterance: ${escapedUtteranceText}`
+	].join('\n')
+}
+
+export async function createRealtimeClientSecretAction(input?: unknown): Promise<{
+	expiresAt: number
+	value: string
+}> {
+	const parsedInput = CreateRealtimeClientSecretActionInputSchema.parse(input ?? {})
+	const silenceDurationMilliseconds = Math.round(parsedInput.turnDelaySeconds * 1000)
+
+	const payload = await postOpenAi('/realtime/client_secrets', {
+		expires_after: {
+			anchor: 'created_at',
+			seconds: 600
+		},
+		session: {
+			audio: {
+				input: {
+					transcription: {
+						model: 'gpt-4o-transcribe'
+					},
+					turn_detection: {
+						silence_duration_ms: silenceDurationMilliseconds,
+						type: 'server_vad'
+					}
+				},
+				output: {
+					voice: parsedInput.voice
+				}
+			},
+			instructions: parsedInput.instructions ?? '',
+			model: parsedInput.model,
+			output_modalities: ['audio', 'text'],
+			type: 'realtime'
+		}
+	})
+
+	const parsedSecret = parseClientSecretResponse(payload)
+	return CreateRealtimeClientSecretActionOutputSchema.parse(parsedSecret)
+}
+
+export async function createRealtimeTranscriptionSessionAction(input?: unknown): Promise<{
+	expiresAt: number
+	value: string
+}> {
+	const parsedInput = CreateRealtimeTranscriptionSessionActionInputSchema.parse(input ?? {})
+	const silenceDurationMilliseconds = Math.round(parsedInput.turnDelaySeconds * 1000)
+
+	const payload = await postOpenAi('/realtime/transcription_sessions', {
+		audio: {
+			input: {
+				transcription: {
+					model: parsedInput.model,
+					...(parsedInput.languageHint ? { language: parsedInput.languageHint } : {})
+				},
+				turn_detection: {
+					create_response: false,
+					interrupt_response: false,
+					silence_duration_ms: silenceDurationMilliseconds,
+					type: 'server_vad'
+				}
+			}
+		},
+		type: 'transcription'
+	})
+
+	const parsedSecret = parseClientSecretResponse(payload)
+	return CreateRealtimeTranscriptionSessionActionOutputSchema.parse(parsedSecret)
+}
+
+export async function translateUtteranceAction(input: unknown): Promise<{
+	detectedSourceLanguageCode: string
+	direction: 'primary_to_secondary' | 'secondary_to_primary' | 'to_target'
+	targetLanguageCode: string
+	translatedText: string
+}> {
+	const parsedInput = TranslateUtteranceActionInputSchema.parse(input)
+	const prompt = createTranslatePrompt(parsedInput)
+
+	const responsePayload = await postOpenAi('/responses', {
+		input: [
+			{
+				content: [
+					{
+						text: prompt,
+						type: 'input_text'
+					}
+				],
+				role: 'user'
+			}
+		],
+		model: parsedInput.model,
+		reasoning: {
+			effort: 'minimal'
+		},
+		temperature: 0,
+		text: {
+			format: {
+				name: 'lilac_translation',
+				schema: {
+					additionalProperties: false,
+					properties: {
+						detectedSourceLanguageCode: { type: 'string' },
+						direction: {
+							enum: ['primary_to_secondary', 'secondary_to_primary', 'to_target'],
+							type: 'string'
+						},
+						targetLanguageCode: { type: 'string' },
+						translatedText: { minLength: 1, type: 'string' }
+					},
+					required: ['detectedSourceLanguageCode', 'direction', 'targetLanguageCode', 'translatedText'],
+					type: 'object'
+				},
+				strict: true,
+				type: 'json_schema'
+			}
+		},
+		truncation: 'auto'
+	})
+
+	const outputText = extractResponseOutputText(responsePayload)
+
+	let parsedOutput: unknown
+	try {
+		parsedOutput = JSON.parse(outputText) as unknown
+	} catch {
+		throw new Error('Translation response was not valid JSON')
 	}
 
-	const json = await response.json()
-	return RealtimeSessionSchema.parse(json)
+	const translatedOutput = TranslateUtteranceActionOutputSchema.parse(parsedOutput)
+
+	if (parsedInput.settings.mode === 'translate') {
+		const allowedDirections = new Set(['primary_to_secondary', 'secondary_to_primary'])
+		if (!allowedDirections.has(translatedOutput.direction)) {
+			throw new Error('Translation response returned an invalid direction for translate mode')
+		}
+	}
+
+	if (parsedInput.settings.mode === 'transcribe' && translatedOutput.direction !== 'to_target') {
+		throw new Error('Translation response returned an invalid direction for transcribe mode')
+	}
+
+	return translatedOutput
+}
+
+function fallbackBoundedContext(context: TranslationContextEntry[]): TranslationContextEntry[] {
+	if (context.length <= 16) return context
+	return context.slice(context.length - 16)
+}
+
+export async function compactTranslationContextAction(input: unknown): Promise<{
+	compactedContext: TranslationContextEntry[]
+	performedCompaction: boolean
+}> {
+	const parsedInput = CompactTranslationContextActionInputSchema.parse(input)
+
+	if (parsedInput.context.length <= 16) {
+		return CompactTranslationContextActionOutputSchema.parse({
+			compactedContext: parsedInput.context,
+			performedCompaction: false
+		})
+	}
+
+	const compactInput = parsedInput.context.map(entry => ({
+		content: [
+			{
+				text: JSON.stringify(entry),
+				type: 'input_text'
+			}
+		],
+		role: 'user'
+	}))
+
+	try {
+		await postOpenAi('/responses/compact', {
+			input: compactInput,
+			model: parsedInput.model
+		})
+
+		return CompactTranslationContextActionOutputSchema.parse({
+			compactedContext: fallbackBoundedContext(parsedInput.context),
+			performedCompaction: true
+		})
+	} catch {
+		return CompactTranslationContextActionOutputSchema.parse({
+			compactedContext: fallbackBoundedContext(parsedInput.context),
+			performedCompaction: false
+		})
+	}
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 075cd8a..e357c89 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata, Viewport } from 'next'
 import type { ReactNode } from 'react'
 
 import './styles.css'
-import { RealtimeProvider } from '@/realtime/provider'
+import { LilacModeRuntimeProvider } from '@/realtime/modeRuntimeStore'
 
 export const metadata: Metadata = {
 	appleWebApp: {
@@ -19,10 +19,6 @@ export const metadata: Metadata = {
 		]
 	},
 	manifest: '/manifest.webmanifest',
-	themeColor: [
-		{ color: '#F7F3E7', media: '(prefers-color-scheme: light)' },
-		{ color: '#120C1E', media: '(prefers-color-scheme: dark)' }
-	],
 	title: {
 		default: 'Lilac',
 		template: '%s · Lilac'
@@ -33,6 +29,10 @@ export const viewport: Viewport = {
 	initialScale: 1,
 	maximumScale: 1,
 	minimumScale: 1,
+	themeColor: [
+		{ color: '#F7F3E7', media: '(prefers-color-scheme: light)' },
+		{ color: '#120C1E', media: '(prefers-color-scheme: dark)' }
+	],
 	userScalable: false,
 	viewportFit: 'cover'
 }
@@ -41,7 +41,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
 	return (
 		<html lang="en">
 			<body className="min-h-svh bg-[var(--lilac-surface)] text-[var(--lilac-ink)] antialiased transition-colors">
-				<RealtimeProvider>{children}</RealtimeProvider>
+				<LilacModeRuntimeProvider>{children}</LilacModeRuntimeProvider>
 			</body>
 		</html>
 	)
diff --git a/src/app/styles.css b/src/app/styles.css
index fd05e8e..618e163 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -2,6 +2,9 @@
 
 :root {
 	color-scheme: light dark;
+	--lilac-direction-primary: #0f8a78;
+	--lilac-direction-secondary: #2f6dd8;
+	--lilac-direction-transcribe: #8f4dd3;
 	--lilac-surface: #f7f3e7;
 	--lilac-elevated: rgba(255, 255, 255, 0.7);
 	--lilac-ink: #352049;
@@ -10,6 +13,9 @@
 
 @media (prefers-color-scheme: dark) {
 	:root {
+		--lilac-direction-primary: #2cc7b2;
+		--lilac-direction-secondary: #6ea8ff;
+		--lilac-direction-transcribe: #bf8dff;
 		--lilac-surface: #120c1e;
 		--lilac-elevated: rgba(255, 255, 255, 0.08);
 		--lilac-ink: #f6f1ff;
diff --git a/src/realtime/chatRealtimeClient.ts b/src/realtime/chatRealtimeClient.ts
new file mode 100644
index 0000000..b162863
--- /dev/null
+++ b/src/realtime/chatRealtimeClient.ts
@@ -0,0 +1,399 @@
+'use client'
+
+import { createRealtimeClientSecretAction } from '@/app/actions/realtime'
+import {
+	InputAudioTranscriptionCompletedEventSchema,
+	InputAudioTranscriptionDeltaEventSchema,
+	RealtimeBaseServerEventSchema,
+	ResponseDoneEventSchema,
+	ResponseOutputAudioTranscriptDeltaEventSchema,
+	ResponseOutputItemAddedEventSchema,
+	ResponseOutputTextDeltaEventSchema,
+	ResponseOutputTextDoneEventSchema
+} from '@/realtime/schemas'
+import type { ChatTranscriptSource } from '@/realtime/sessionTypes'
+
+export type ChatTranscriptPatch = {
+	appendText?: string
+	id: string
+	replaceText?: string
+	role: 'assistant' | 'user'
+	source: ChatTranscriptSource
+	status?: 'final' | 'streaming'
+}
+
+export type ChatRealtimeClientState = 'connecting' | 'connected' | 'disconnected' | 'error'
+
+export type StartChatRealtimeClientInput = {
+	instructions: string
+	model: string
+	turnDelaySeconds: number
+	voice: string
+}
+
+export type ChatRealtimeClientCallbacks = {
+	onConnectionStateChange: (state: ChatRealtimeClientState) => void
+	onError: (message: string) => void
+	onRemoteStream: (stream: MediaStream | null) => void
+	onTranscriptPatch: (patch: ChatTranscriptPatch) => void
+}
+
+function float32ToPcm16(float32Samples: Float32Array): ArrayBuffer {
+	const pcm16 = new Int16Array(float32Samples.length)
+	for (let sampleIndex = 0; sampleIndex < float32Samples.length; sampleIndex += 1) {
+		const sample = Math.max(-1, Math.min(1, float32Samples[sampleIndex] ?? 0))
+		pcm16[sampleIndex] = sample < 0 ? sample * 0x8000 : sample * 0x7fff
+	}
+	return pcm16.buffer
+}
+
+function arrayBufferToBase64(buffer: ArrayBuffer): string {
+	let binary = ''
+	const bytes = new Uint8Array(buffer)
+	for (let index = 0; index < bytes.length; index += 1) {
+		binary += String.fromCharCode(bytes[index] ?? 0)
+	}
+	return window.btoa(binary)
+}
+
+export class ChatRealtimeClient {
+	private assistantItemIdByResponseId = new Map<string, string>()
+	private callbacks: ChatRealtimeClientCallbacks
+	private dataChannel: RTCDataChannel | null = null
+	private generation = 0
+	private localAudioStream: MediaStream | null = null
+	private pendingAudioTranscriptByResponseId = new Map<string, string>()
+	private pendingTextByResponseId = new Map<string, string>()
+	private peerConnection: RTCPeerConnection | null = null
+
+	public constructor(callbacks: ChatRealtimeClientCallbacks) {
+		this.callbacks = callbacks
+	}
+
+	public async start(input: StartChatRealtimeClientInput): Promise<void> {
+		this.generation += 1
+		const generation = this.generation
+		this.stop()
+		this.callbacks.onConnectionStateChange('connecting')
+
+		let localAudioStream: MediaStream | null = null
+		let peerConnection: RTCPeerConnection | null = null
+		try {
+			const clientSecret = await createRealtimeClientSecretAction({
+				instructions: input.instructions,
+				model: input.model,
+				turnDelaySeconds: input.turnDelaySeconds,
+				voice: input.voice
+			})
+
+			if (generation !== this.generation) return
+
+			localAudioStream = await navigator.mediaDevices.getUserMedia({
+				audio: {
+					autoGainControl: true,
+					echoCancellation: true,
+					noiseSuppression: true
+				}
+			})
+
+			if (generation !== this.generation) {
+				for (const track of localAudioStream.getTracks()) track.stop()
+				return
+			}
+
+			peerConnection = new RTCPeerConnection()
+			this.peerConnection = peerConnection
+			this.localAudioStream = localAudioStream
+
+			peerConnection.addEventListener('track', event => {
+				const firstStream = event.streams[0]
+				if (!firstStream) return
+				this.callbacks.onRemoteStream(firstStream)
+			})
+
+			for (const track of localAudioStream.getTracks()) {
+				peerConnection.addTrack(track, localAudioStream)
+			}
+
+			const dataChannel = peerConnection.createDataChannel('oai-events')
+			this.dataChannel = dataChannel
+
+			dataChannel.addEventListener('open', () => {
+				if (generation !== this.generation) return
+				this.callbacks.onConnectionStateChange('connected')
+			})
+
+			dataChannel.addEventListener('close', () => {
+				if (generation !== this.generation) return
+				this.callbacks.onConnectionStateChange('disconnected')
+			})
+
+			dataChannel.addEventListener('message', event => {
+				this.handleServerEvent(event.data)
+			})
+
+			const offer = await peerConnection.createOffer()
+			await peerConnection.setLocalDescription(offer)
+
+			if (generation !== this.generation) return
+
+			const response = await fetch('https://api.openai.com/v1/realtime/calls', {
+				body: offer.sdp ?? '',
+				headers: {
+					Authorization: `Bearer ${clientSecret.value}`,
+					'Content-Type': 'application/sdp'
+				},
+				method: 'POST'
+			})
+
+			if (!response.ok) {
+				const message = await response.text().catch(() => '')
+				throw new Error(message || `Realtime call handshake failed (${response.status})`)
+			}
+
+			const answerSdp = await response.text()
+			if (generation !== this.generation) return
+			await peerConnection.setRemoteDescription({ sdp: answerSdp, type: 'answer' })
+		} catch (error) {
+			if (generation !== this.generation) return
+			this.callbacks.onConnectionStateChange('error')
+			const fallbackMessage = 'Unable to start Chat mode.'
+			if (error instanceof Error) this.callbacks.onError(error.message || fallbackMessage)
+			else this.callbacks.onError(fallbackMessage)
+			this.stop()
+		}
+	}
+
+	public stop(): void {
+		this.generation += 1
+		this.assistantItemIdByResponseId.clear()
+		this.pendingTextByResponseId.clear()
+		this.pendingAudioTranscriptByResponseId.clear()
+
+		try {
+			this.dataChannel?.close()
+		} catch {}
+		this.dataChannel = null
+
+		try {
+			this.peerConnection?.close()
+		} catch {}
+		this.peerConnection = null
+
+		for (const track of this.localAudioStream?.getTracks() ?? []) {
+			track.stop()
+		}
+		this.localAudioStream = null
+		this.callbacks.onRemoteStream(null)
+		this.callbacks.onConnectionStateChange('disconnected')
+	}
+
+	public updateInstructions(instructions: string): void {
+		this.sendEvent({
+			session: { instructions },
+			type: 'session.update'
+		})
+	}
+
+	public updateTurnDelaySeconds(turnDelaySeconds: number): void {
+		const silenceDurationMilliseconds = Math.round(turnDelaySeconds * 1000)
+		this.sendEvent({
+			session: {
+				audio: {
+					input: {
+						turn_detection: {
+							silence_duration_ms: silenceDurationMilliseconds,
+							type: 'server_vad'
+						}
+					}
+				}
+			},
+			type: 'session.update'
+		})
+	}
+
+	private emitTranscriptPatch(patch: ChatTranscriptPatch): void {
+		this.callbacks.onTranscriptPatch(patch)
+	}
+
+	private finalizeAssistantForResponse(responseId: string | undefined): void {
+		if (!responseId) return
+		const itemId = this.assistantItemIdByResponseId.get(responseId)
+		if (!itemId) return
+		this.emitTranscriptPatch({
+			id: itemId,
+			role: 'assistant',
+			source: 'response_output_text',
+			status: 'final'
+		})
+	}
+
+	private handleServerEvent(rawData: unknown): void {
+		try {
+			const candidate = typeof rawData === 'string' ? JSON.parse(rawData) : rawData
+			const baseEvent = RealtimeBaseServerEventSchema.parse(candidate)
+
+			switch (baseEvent.type) {
+				case 'conversation.item.input_audio_transcription.delta': {
+					const event = InputAudioTranscriptionDeltaEventSchema.parse(candidate)
+					if (!event.delta.trim()) return
+					this.emitTranscriptPatch({
+						appendText: event.delta,
+						id: event.item_id,
+						role: 'user',
+						source: 'input_transcription',
+						status: 'streaming'
+					})
+					return
+				}
+				case 'conversation.item.input_audio_transcription.completed': {
+					const event = InputAudioTranscriptionCompletedEventSchema.parse(candidate)
+					this.emitTranscriptPatch({
+						id: event.item_id,
+						replaceText: event.transcript,
+						role: 'user',
+						source: 'input_transcription',
+						status: 'final'
+					})
+					return
+				}
+				case 'response.output_item.added': {
+					const event = ResponseOutputItemAddedEventSchema.parse(candidate)
+					if (!event.response_id) return
+					this.assistantItemIdByResponseId.set(event.response_id, event.item.id)
+
+					const pendingText = this.pendingTextByResponseId.get(event.response_id)
+					if (pendingText) {
+						this.emitTranscriptPatch({
+							appendText: pendingText,
+							id: event.item.id,
+							role: 'assistant',
+							source: 'response_output_text',
+							status: 'streaming'
+						})
+						this.pendingTextByResponseId.delete(event.response_id)
+					}
+
+					const pendingAudioTranscript = this.pendingAudioTranscriptByResponseId.get(event.response_id)
+					if (pendingAudioTranscript) {
+						this.emitTranscriptPatch({
+							appendText: pendingAudioTranscript,
+							id: event.item.id,
+							role: 'assistant',
+							source: 'response_output_audio_transcript',
+							status: 'streaming'
+						})
+						this.pendingAudioTranscriptByResponseId.delete(event.response_id)
+					}
+					return
+				}
+				case 'response.output_text.delta': {
+					const event = ResponseOutputTextDeltaEventSchema.parse(candidate)
+					const assistantItemId =
+						event.item_id ??
+						(event.response_id ? this.assistantItemIdByResponseId.get(event.response_id) : undefined)
+					if (!assistantItemId && event.response_id) {
+						const previousPending = this.pendingTextByResponseId.get(event.response_id) ?? ''
+						this.pendingTextByResponseId.set(event.response_id, `${previousPending}${event.delta}`)
+						return
+					}
+					if (!assistantItemId) return
+					this.emitTranscriptPatch({
+						appendText: event.delta,
+						id: assistantItemId,
+						role: 'assistant',
+						source: 'response_output_text',
+						status: 'streaming'
+					})
+					return
+				}
+				case 'response.output_audio_transcript.delta': {
+					const event = ResponseOutputAudioTranscriptDeltaEventSchema.parse(candidate)
+					const assistantItemId =
+						event.item_id ??
+						(event.response_id ? this.assistantItemIdByResponseId.get(event.response_id) : undefined)
+					if (!assistantItemId && event.response_id) {
+						const previousPending = this.pendingAudioTranscriptByResponseId.get(event.response_id) ?? ''
+						this.pendingAudioTranscriptByResponseId.set(
+							event.response_id,
+							`${previousPending}${event.delta}`
+						)
+						return
+					}
+					if (!assistantItemId) return
+					this.emitTranscriptPatch({
+						appendText: event.delta,
+						id: assistantItemId,
+						role: 'assistant',
+						source: 'response_output_audio_transcript',
+						status: 'streaming'
+					})
+					return
+				}
+				case 'response.output_text.done': {
+					const event = ResponseOutputTextDoneEventSchema.parse(candidate)
+					const assistantItemId =
+						event.item_id ??
+						(event.response_id ? this.assistantItemIdByResponseId.get(event.response_id) : undefined)
+					if (!assistantItemId) return
+					if (typeof event.text === 'string' && event.text.trim()) {
+						this.emitTranscriptPatch({
+							id: assistantItemId,
+							replaceText: event.text,
+							role: 'assistant',
+							source: 'response_output_text',
+							status: 'final'
+						})
+						return
+					}
+					this.emitTranscriptPatch({
+						id: assistantItemId,
+						role: 'assistant',
+						source: 'response_output_text',
+						status: 'final'
+					})
+					return
+				}
+				case 'response.done': {
+					const event = ResponseDoneEventSchema.parse(candidate)
+					this.finalizeAssistantForResponse(event.response_id)
+					return
+				}
+				case 'error': {
+					const message =
+						typeof candidate === 'object' &&
+						candidate !== null &&
+						'error' in candidate &&
+						typeof (candidate as { error?: { message?: unknown } }).error?.message === 'string'
+							? ((candidate as { error?: { message?: string } }).error?.message ?? 'Realtime API error')
+							: 'Realtime API error'
+					this.callbacks.onError(message)
+					return
+				}
+				default:
+					return
+			}
+		} catch {
+			this.callbacks.onError('Failed to parse Realtime event payload')
+		}
+	}
+
+	private sendEvent(event: Record<string, unknown>): void {
+		if (!this.dataChannel) return
+		if (this.dataChannel.readyState !== 'open') return
+		try {
+			this.dataChannel.send(JSON.stringify(event))
+		} catch {}
+	}
+}
+
+export function buildInputAudioBufferAppendEventFromFloat32Audio(float32Audio: Float32Array): {
+	audio: string
+	type: 'input_audio_buffer.append'
+} {
+	const pcm16Buffer = float32ToPcm16(float32Audio)
+	return {
+		audio: arrayBufferToBase64(pcm16Buffer),
+		type: 'input_audio_buffer.append'
+	}
+}
diff --git a/src/realtime/modeRuntimeStore.tsx b/src/realtime/modeRuntimeStore.tsx
new file mode 100644
index 0000000..769fcf5
--- /dev/null
+++ b/src/realtime/modeRuntimeStore.tsx
@@ -0,0 +1,684 @@
+'use client'
+
+import {
+	createContext,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState
+} from 'react'
+
+import { compactTranslationContextAction, translateUtteranceAction } from '@/app/actions/realtime'
+import { ChatRealtimeClient, type ChatTranscriptPatch } from '@/realtime/chatRealtimeClient'
+import type {
+	ChatTranscriptMessage,
+	LilacMode,
+	ModeConnectionState,
+	TranscribeSettings,
+	TranslateSettings,
+	TranslationContextEntry,
+	UtteranceCard,
+	UtteranceDirection
+} from '@/realtime/sessionTypes'
+import {
+	type TranscriptionPatch,
+	TranscriptionSocketClient
+} from '@/realtime/transcriptionSocketClient'
+
+const defaultChatInstructions =
+	'You are Lilac. Help users communicate across languages. Keep answers concise, faithful, and practical.'
+
+const defaultTranslateSettings: TranslateSettings = {
+	primaryLanguageCode: 'en',
+	secondaryLanguageCode: 'es'
+}
+
+const defaultTranscribeSettings: TranscribeSettings = {
+	targetLanguageCode: 'en'
+}
+
+const storageKeys = {
+	chatInstructions: 'lilac.chat.instructions',
+	chatTurnDelaySeconds: 'lilac.chat.turnDelaySeconds',
+	mode: 'lilac.mode',
+	transcribeTargetLanguage: 'lilac.transcribe.targetLanguageCode',
+	translatePrimaryLanguage: 'lilac.translate.primaryLanguageCode',
+	translateSecondaryLanguage: 'lilac.translate.secondaryLanguageCode'
+} as const
+
+function normalizeTurnDelaySeconds(value: unknown): number {
+	const parsedValue = typeof value === 'number' ? value : Number.parseFloat(String(value))
+	if (!Number.isFinite(parsedValue)) return 1.2
+	const clampedValue = Math.min(6, Math.max(0.2, parsedValue))
+	return Math.round(clampedValue * 10) / 10
+}
+
+function createEmptyUtteranceCard(id: string, direction: UtteranceDirection): UtteranceCard {
+	return {
+		createdAt: Date.now(),
+		direction,
+		id,
+		sourceLanguageCode: 'und',
+		sourceText: '',
+		status: 'streaming',
+		targetLanguageCode: 'und',
+		translatedText: ''
+	}
+}
+
+function upsertChatTranscript(
+	existingList: ChatTranscriptMessage[],
+	patch: ChatTranscriptPatch
+): ChatTranscriptMessage[] {
+	const existingIndex = existingList.findIndex(item => item.id === patch.id)
+	const existingItem = existingIndex >= 0 ? existingList[existingIndex] : null
+
+	if (
+		existingItem?.role === 'assistant' &&
+		existingItem.source === 'response_output_text' &&
+		patch.source === 'response_output_audio_transcript'
+	) {
+		return existingList
+	}
+
+	const updatedText =
+		typeof patch.replaceText === 'string'
+			? patch.replaceText
+			: `${existingItem?.text ?? ''}${patch.appendText ?? ''}`
+
+	const nextItem: ChatTranscriptMessage = {
+		createdAt: existingItem?.createdAt ?? Date.now(),
+		id: patch.id,
+		role: patch.role,
+		source: patch.source,
+		status: patch.status ?? existingItem?.status ?? 'streaming',
+		text: updatedText
+	}
+
+	if (existingIndex === -1) {
+		return [...existingList, nextItem]
+	}
+
+	const nextList = existingList.slice()
+	nextList[existingIndex] = nextItem
+	return nextList
+}
+
+function upsertStreamingCard(
+	existingList: UtteranceCard[],
+	patch: TranscriptionPatch,
+	fallbackDirection: UtteranceDirection
+): UtteranceCard[] {
+	const existingIndex = existingList.findIndex(item => item.id === patch.itemId)
+	const existingItem = existingIndex >= 0 ? existingList[existingIndex] : null
+
+	const mergedText =
+		patch.status === 'final' ? patch.text : `${existingItem?.sourceText ?? ''}${patch.text || ''}`
+
+	const nextItem: UtteranceCard = {
+		...(existingItem ?? createEmptyUtteranceCard(patch.itemId, fallbackDirection)),
+		sourceText: mergedText,
+		status: patch.status === 'final' ? 'translating' : 'streaming'
+	}
+
+	if (existingIndex === -1) {
+		return [...existingList, nextItem]
+	}
+
+	const nextList = existingList.slice()
+	nextList[existingIndex] = nextItem
+	return nextList
+}
+
+function buildTranslationContextFromCards(cards: UtteranceCard[]): TranslationContextEntry[] {
+	const finalCards = cards.filter(
+		card => card.status === 'final' && card.translatedText.trim().length > 0
+	)
+	const boundedFinalCards = finalCards.slice(Math.max(0, finalCards.length - 200))
+
+	return boundedFinalCards.map(card => ({
+		direction: card.direction,
+		sourceLanguageCode: card.sourceLanguageCode,
+		sourceText: card.sourceText,
+		targetLanguageCode: card.targetLanguageCode,
+		translatedText: card.translatedText
+	}))
+}
+
+function getDirectionColorClass(direction: UtteranceDirection): string {
+	switch (direction) {
+		case 'primary_to_secondary':
+			return 'var(--lilac-direction-primary)'
+		case 'secondary_to_primary':
+			return 'var(--lilac-direction-secondary)'
+		case 'to_target':
+			return 'var(--lilac-direction-transcribe)'
+		default:
+			return 'var(--lilac-ink-muted)'
+	}
+}
+
+type LilacModeRuntimeContextValue = {
+	chatInstructions: string
+	chatTranscripts: ChatTranscriptMessage[]
+	chatTurnDelaySeconds: number
+	clearCurrentModeHistory: () => void
+	connectionState: ModeConnectionState
+	errorMessage: string | null
+	getDirectionColor: (direction: UtteranceDirection) => string
+	mode: LilacMode
+	reconnectCurrentMode: () => void
+	remoteAudioStream: MediaStream | null
+	setChatInstructions: (instructions: string) => void
+	setChatTurnDelaySeconds: (seconds: number) => void
+	setMode: (mode: LilacMode) => void
+	setTranscribeSettings: (nextSettings: TranscribeSettings) => void
+	setTranslateSettings: (nextSettings: TranslateSettings) => void
+	transcribeCards: UtteranceCard[]
+	transcribeSettings: TranscribeSettings
+	translateCards: UtteranceCard[]
+	translateSettings: TranslateSettings
+}
+
+const LilacModeRuntimeContext = createContext<LilacModeRuntimeContextValue | null>(null)
+
+export function LilacModeRuntimeProvider({ children }: { children: ReactNode }) {
+	const [mode, setModeState] = useState<LilacMode>('chat')
+	const [connectionState, setConnectionState] = useState<ModeConnectionState>('idle')
+	const [errorMessage, setErrorMessage] = useState<string | null>(null)
+	const [chatInstructions, setChatInstructionsState] = useState(defaultChatInstructions)
+	const [chatTurnDelaySeconds, setChatTurnDelaySecondsState] = useState(1.2)
+	const [chatTranscripts, setChatTranscripts] = useState<ChatTranscriptMessage[]>([])
+	const [translateSettings, setTranslateSettingsState] =
+		useState<TranslateSettings>(defaultTranslateSettings)
+	const [translateCards, setTranslateCards] = useState<UtteranceCard[]>([])
+	const [transcribeSettings, setTranscribeSettingsState] =
+		useState<TranscribeSettings>(defaultTranscribeSettings)
+	const [transcribeCards, setTranscribeCards] = useState<UtteranceCard[]>([])
+	const [remoteAudioStream, setRemoteAudioStream] = useState<MediaStream | null>(null)
+	const [isHydrated, setIsHydrated] = useState(false)
+	const [restartNonce, setRestartNonce] = useState(0)
+
+	const chatClientRef = useRef<ChatRealtimeClient | null>(null)
+	const transcriptionClientRef = useRef<TranscriptionSocketClient | null>(null)
+	const translateCardsRef = useRef<UtteranceCard[]>([])
+	const transcribeCardsRef = useRef<UtteranceCard[]>([])
+	const translationGenerationRef = useRef(0)
+
+	useEffect(() => {
+		translateCardsRef.current = translateCards
+	}, [translateCards])
+
+	useEffect(() => {
+		transcribeCardsRef.current = transcribeCards
+	}, [transcribeCards])
+
+	const stopAllClients = useCallback(() => {
+		chatClientRef.current?.stop()
+		chatClientRef.current = null
+		transcriptionClientRef.current?.stop()
+		transcriptionClientRef.current = null
+		setRemoteAudioStream(null)
+	}, [])
+
+	const clearAllInMemoryState = useCallback(() => {
+		setChatTranscripts([])
+		setTranslateCards([])
+		setTranscribeCards([])
+	}, [])
+
+	const clearStateForMode = useCallback((nextMode: LilacMode) => {
+		switch (nextMode) {
+			case 'chat':
+				setChatTranscripts([])
+				return
+			case 'translate':
+				setTranslateCards([])
+				return
+			case 'transcribe':
+				setTranscribeCards([])
+				return
+			default:
+				return
+		}
+	}, [])
+
+	const runTranslationForCard = useCallback(
+		async (currentMode: 'translate' | 'transcribe', cardId: string, sourceText: string) => {
+			const generationAtStart = translationGenerationRef.current
+			try {
+				if (currentMode === 'translate') {
+					const compactedContext = await compactTranslationContextAction({
+						context: buildTranslationContextFromCards(translateCardsRef.current)
+					})
+					const output = await translateUtteranceAction({
+						context: compactedContext.compactedContext,
+						settings: {
+							mode: 'translate',
+							primaryLanguageCode: translateSettings.primaryLanguageCode,
+							secondaryLanguageCode: translateSettings.secondaryLanguageCode
+						},
+						utteranceText: sourceText
+					})
+
+					if (generationAtStart !== translationGenerationRef.current) return
+
+					setTranslateCards(previousCards => {
+						const cardIndex = previousCards.findIndex(card => card.id === cardId)
+						if (cardIndex === -1) return previousCards
+						const nextCards = previousCards.slice()
+						const existingCard = nextCards[cardIndex]
+						if (!existingCard) return previousCards
+						nextCards[cardIndex] = {
+							...existingCard,
+							direction: output.direction,
+							sourceLanguageCode: output.detectedSourceLanguageCode,
+							status: 'final',
+							targetLanguageCode: output.targetLanguageCode,
+							translatedText: output.translatedText
+						}
+						return nextCards
+					})
+					return
+				}
+
+				const compactedContext = await compactTranslationContextAction({
+					context: buildTranslationContextFromCards(transcribeCardsRef.current)
+				})
+				const output = await translateUtteranceAction({
+					context: compactedContext.compactedContext,
+					settings: {
+						mode: 'transcribe',
+						targetLanguageCode: transcribeSettings.targetLanguageCode
+					},
+					utteranceText: sourceText
+				})
+
+				if (generationAtStart !== translationGenerationRef.current) return
+
+				setTranscribeCards(previousCards => {
+					const cardIndex = previousCards.findIndex(card => card.id === cardId)
+					if (cardIndex === -1) return previousCards
+					const nextCards = previousCards.slice()
+					const existingCard = nextCards[cardIndex]
+					if (!existingCard) return previousCards
+					nextCards[cardIndex] = {
+						...existingCard,
+						direction: output.direction,
+						sourceLanguageCode: output.detectedSourceLanguageCode,
+						status: 'final',
+						targetLanguageCode: output.targetLanguageCode,
+						translatedText: output.translatedText
+					}
+					return nextCards
+				})
+			} catch (error) {
+				if (generationAtStart !== translationGenerationRef.current) return
+				const message = error instanceof Error ? error.message : 'Translation failed'
+				switch (currentMode) {
+					case 'translate':
+						setTranslateCards(previousCards => {
+							const cardIndex = previousCards.findIndex(card => card.id === cardId)
+							if (cardIndex === -1) return previousCards
+							const nextCards = previousCards.slice()
+							const existingCard = nextCards[cardIndex]
+							if (!existingCard) return previousCards
+							nextCards[cardIndex] = {
+								...existingCard,
+								errorMessage: message,
+								status: 'error'
+							}
+							return nextCards
+						})
+						return
+					case 'transcribe':
+						setTranscribeCards(previousCards => {
+							const cardIndex = previousCards.findIndex(card => card.id === cardId)
+							if (cardIndex === -1) return previousCards
+							const nextCards = previousCards.slice()
+							const existingCard = nextCards[cardIndex]
+							if (!existingCard) return previousCards
+							nextCards[cardIndex] = {
+								...existingCard,
+								errorMessage: message,
+								status: 'error'
+							}
+							return nextCards
+						})
+						return
+					default:
+						return
+				}
+			}
+		},
+		[
+			transcribeSettings.targetLanguageCode,
+			translateSettings.primaryLanguageCode,
+			translateSettings.secondaryLanguageCode
+		]
+	)
+
+	const handleTranscriptionPatch = useCallback(
+		(currentMode: 'translate' | 'transcribe', patch: TranscriptionPatch) => {
+			const fallbackDirection: UtteranceDirection =
+				currentMode === 'translate' ? 'primary_to_secondary' : 'to_target'
+
+			switch (currentMode) {
+				case 'translate': {
+					setTranslateCards(previousCards =>
+						upsertStreamingCard(previousCards, patch, fallbackDirection)
+					)
+					if (patch.status === 'final' && patch.text.trim().length > 0) {
+						void runTranslationForCard('translate', patch.itemId, patch.text)
+					}
+					return
+				}
+				case 'transcribe': {
+					setTranscribeCards(previousCards =>
+						upsertStreamingCard(previousCards, patch, fallbackDirection)
+					)
+					if (patch.status === 'final' && patch.text.trim().length > 0) {
+						void runTranslationForCard('transcribe', patch.itemId, patch.text)
+					}
+					return
+				}
+				default:
+					return
+			}
+		},
+		[runTranslationForCard]
+	)
+
+	const startChatClient = useCallback(() => {
+		stopAllClients()
+		const chatClient = new ChatRealtimeClient({
+			onConnectionStateChange: state => {
+				switch (state) {
+					case 'connected':
+						setConnectionState('connected')
+						setErrorMessage(null)
+						return
+					case 'connecting':
+						setConnectionState('connecting')
+						return
+					case 'disconnected':
+						setConnectionState('idle')
+						return
+					case 'error':
+						setConnectionState('error')
+						return
+					default:
+						return
+				}
+			},
+			onError: message => {
+				setErrorMessage(message)
+				setConnectionState('error')
+			},
+			onRemoteStream: stream => {
+				setRemoteAudioStream(stream)
+			},
+			onTranscriptPatch: patch => {
+				setChatTranscripts(previousMessages => upsertChatTranscript(previousMessages, patch))
+			}
+		})
+		chatClientRef.current = chatClient
+		void chatClient.start({
+			instructions: chatInstructions,
+			model: 'gpt-realtime',
+			turnDelaySeconds: chatTurnDelaySeconds,
+			voice: 'verse'
+		})
+	}, [chatInstructions, chatTurnDelaySeconds, stopAllClients])
+
+	const startTranscriptionClient = useCallback(
+		(currentMode: 'translate' | 'transcribe') => {
+			stopAllClients()
+			const transcriptionClient = new TranscriptionSocketClient({
+				onConnectionStateChange: state => {
+					switch (state) {
+						case 'connected':
+							setConnectionState('connected')
+							setErrorMessage(null)
+							return
+						case 'connecting':
+							setConnectionState('connecting')
+							return
+						case 'disconnected':
+							setConnectionState('idle')
+							return
+						case 'error':
+							setConnectionState('error')
+							return
+						default:
+							return
+					}
+				},
+				onError: message => {
+					setErrorMessage(message)
+					setConnectionState('error')
+				},
+				onPatch: patch => {
+					handleTranscriptionPatch(currentMode, patch)
+				}
+			})
+			transcriptionClientRef.current = transcriptionClient
+			void transcriptionClient.start({
+				model: 'gpt-4o-transcribe',
+				turnDelaySeconds: chatTurnDelaySeconds,
+				...(currentMode === 'transcribe' ? { languageHint: transcribeSettings.targetLanguageCode } : {})
+			})
+		},
+		[
+			chatTurnDelaySeconds,
+			handleTranscriptionPatch,
+			stopAllClients,
+			transcribeSettings.targetLanguageCode
+		]
+	)
+
+	const startModeRuntime = useCallback(
+		(nextMode: LilacMode) => {
+			setErrorMessage(null)
+			setConnectionState('connecting')
+			switch (nextMode) {
+				case 'chat':
+					startChatClient()
+					return
+				case 'translate':
+					startTranscriptionClient('translate')
+					return
+				case 'transcribe':
+					startTranscriptionClient('transcribe')
+					return
+				default:
+					return
+			}
+		},
+		[startChatClient, startTranscriptionClient]
+	)
+
+	const setMode = useCallback(
+		(nextMode: LilacMode) => {
+			translationGenerationRef.current += 1
+			stopAllClients()
+			clearAllInMemoryState()
+			setModeState(nextMode)
+		},
+		[clearAllInMemoryState, stopAllClients]
+	)
+
+	const reconnectCurrentMode = useCallback(() => {
+		translationGenerationRef.current += 1
+		stopAllClients()
+		clearStateForMode(mode)
+		setRestartNonce(previousNonce => previousNonce + 1)
+	}, [clearStateForMode, mode, stopAllClients])
+
+	const clearCurrentModeHistory = useCallback(() => {
+		clearStateForMode(mode)
+	}, [clearStateForMode, mode])
+
+	const setChatInstructions = useCallback((instructions: string) => {
+		setChatInstructionsState(instructions)
+	}, [])
+
+	const setChatTurnDelaySeconds = useCallback((seconds: number) => {
+		setChatTurnDelaySecondsState(normalizeTurnDelaySeconds(seconds))
+	}, [])
+
+	const setTranslateSettings = useCallback((nextSettings: TranslateSettings) => {
+		setTranslateSettingsState(nextSettings)
+	}, [])
+
+	const setTranscribeSettings = useCallback((nextSettings: TranscribeSettings) => {
+		setTranscribeSettingsState(nextSettings)
+	}, [])
+
+	useEffect(() => {
+		if (typeof window === 'undefined') return
+
+		const storedMode = window.localStorage.getItem(storageKeys.mode)
+		if (storedMode === 'chat' || storedMode === 'translate' || storedMode === 'transcribe') {
+			setModeState(storedMode)
+		}
+
+		const storedChatInstructions = window.localStorage.getItem(storageKeys.chatInstructions)
+		if (storedChatInstructions) setChatInstructionsState(storedChatInstructions)
+
+		const storedChatTurnDelaySeconds = window.localStorage.getItem(storageKeys.chatTurnDelaySeconds)
+		if (storedChatTurnDelaySeconds) {
+			setChatTurnDelaySecondsState(normalizeTurnDelaySeconds(storedChatTurnDelaySeconds))
+		}
+
+		const storedTranslatePrimaryLanguageCode = window.localStorage.getItem(
+			storageKeys.translatePrimaryLanguage
+		)
+		const storedTranslateSecondaryLanguageCode = window.localStorage.getItem(
+			storageKeys.translateSecondaryLanguage
+		)
+		if (storedTranslatePrimaryLanguageCode && storedTranslateSecondaryLanguageCode) {
+			setTranslateSettingsState({
+				primaryLanguageCode: storedTranslatePrimaryLanguageCode,
+				secondaryLanguageCode: storedTranslateSecondaryLanguageCode
+			})
+		}
+
+		const storedTranscribeTargetLanguageCode = window.localStorage.getItem(
+			storageKeys.transcribeTargetLanguage
+		)
+		if (storedTranscribeTargetLanguageCode) {
+			setTranscribeSettingsState({ targetLanguageCode: storedTranscribeTargetLanguageCode })
+		}
+
+		setIsHydrated(true)
+	}, [])
+
+	useEffect(() => {
+		if (!isHydrated) return
+		window.localStorage.setItem(storageKeys.mode, mode)
+	}, [isHydrated, mode])
+
+	useEffect(() => {
+		if (!isHydrated) return
+		window.localStorage.setItem(storageKeys.chatInstructions, chatInstructions)
+		if (mode === 'chat') chatClientRef.current?.updateInstructions(chatInstructions)
+	}, [chatInstructions, isHydrated, mode])
+
+	useEffect(() => {
+		if (!isHydrated) return
+		window.localStorage.setItem(storageKeys.chatTurnDelaySeconds, String(chatTurnDelaySeconds))
+		if (mode === 'chat') chatClientRef.current?.updateTurnDelaySeconds(chatTurnDelaySeconds)
+	}, [chatTurnDelaySeconds, isHydrated, mode])
+
+	useEffect(() => {
+		if (!isHydrated) return
+		window.localStorage.setItem(
+			storageKeys.translatePrimaryLanguage,
+			translateSettings.primaryLanguageCode
+		)
+		window.localStorage.setItem(
+			storageKeys.translateSecondaryLanguage,
+			translateSettings.secondaryLanguageCode
+		)
+	}, [isHydrated, translateSettings.primaryLanguageCode, translateSettings.secondaryLanguageCode])
+
+	useEffect(() => {
+		if (!isHydrated) return
+		window.localStorage.setItem(
+			storageKeys.transcribeTargetLanguage,
+			transcribeSettings.targetLanguageCode
+		)
+	}, [isHydrated, transcribeSettings.targetLanguageCode])
+
+	useEffect(() => {
+		if (!isHydrated) return
+		void restartNonce
+		translationGenerationRef.current += 1
+		startModeRuntime(mode)
+		return () => {
+			stopAllClients()
+		}
+	}, [isHydrated, mode, restartNonce, startModeRuntime, stopAllClients])
+
+	const contextValue = useMemo<LilacModeRuntimeContextValue>(
+		() => ({
+			chatInstructions,
+			chatTranscripts,
+			chatTurnDelaySeconds,
+			clearCurrentModeHistory,
+			connectionState,
+			errorMessage,
+			getDirectionColor: getDirectionColorClass,
+			mode,
+			reconnectCurrentMode,
+			remoteAudioStream,
+			setChatInstructions,
+			setChatTurnDelaySeconds,
+			setMode,
+			setTranscribeSettings,
+			setTranslateSettings,
+			transcribeCards,
+			transcribeSettings,
+			translateCards,
+			translateSettings
+		}),
+		[
+			chatInstructions,
+			chatTranscripts,
+			chatTurnDelaySeconds,
+			clearCurrentModeHistory,
+			connectionState,
+			errorMessage,
+			mode,
+			reconnectCurrentMode,
+			remoteAudioStream,
+			setChatInstructions,
+			setChatTurnDelaySeconds,
+			setMode,
+			setTranscribeSettings,
+			setTranslateSettings,
+			transcribeCards,
+			transcribeSettings,
+			translateCards,
+			translateSettings
+		]
+	)
+
+	return (
+		<LilacModeRuntimeContext.Provider value={contextValue}>
+			{children}
+		</LilacModeRuntimeContext.Provider>
+	)
+}
+
+export function useLilacModeRuntime(): LilacModeRuntimeContextValue {
+	const contextValue = useContext(LilacModeRuntimeContext)
+	if (!contextValue) {
+		throw new Error('useLilacModeRuntime must be used within a LilacModeRuntimeProvider')
+	}
+	return contextValue
+}
diff --git a/src/realtime/provider.tsx b/src/realtime/provider.tsx
deleted file mode 100644
index 49df684..0000000
--- a/src/realtime/provider.tsx
+++ /dev/null
@@ -1,834 +0,0 @@
-'use client'
-
-import { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react'
-
-import { createRealtimeSession } from '@/app/actions/realtime'
-
-export type RealtimeTranscriptMessage = {
-	/** Stable id tied to the underlying Realtime item/response. */
-	id: string
-	role: 'user' | 'assistant'
-	text: string
-	status: 'streaming' | 'final'
-	/**
-	 * Where this text came from.
-	 * - input_transcription: user audio transcription
-	 * - response_text: assistant text stream
-	 * - response_audio_transcript: assistant audio transcript stream
-	 */
-	source: 'input_transcription' | 'response_text' | 'response_audio_transcript'
-}
-
-type RealtimeContextValue = {
-	dataChannel: RTCDataChannel | null
-	remoteStream: MediaStream | null
-	transcripts: RealtimeTranscriptMessage[]
-	start: (opts?: { instructions?: string; voice?: string; model?: string }) => Promise<void>
-	updateInstructions: (text: string) => void
-	updateVoice: (voice: string) => void
-	updateTurnDelaySeconds: (seconds: number) => void
-	clearTranscripts: () => void
-	stop: () => void
-}
-
-const RealtimeContext = createContext<RealtimeContextValue | null>(null)
-
-const turnDelayStorageKey = 'lilac.turnDelaySeconds'
-const defaultTurnDelaySeconds = 1.2
-
-function normalizeTurnDelaySeconds(value: unknown): number | null {
-	const asNumber = typeof value === 'number' ? value : Number.parseFloat(String(value))
-	if (!Number.isFinite(asNumber)) return null
-	const clamped = Math.min(6, Math.max(0.2, asNumber))
-	return Math.round(clamped * 10) / 10
-}
-
-function getInitialTurnDelaySeconds(): number {
-	if (typeof window === 'undefined') return defaultTurnDelaySeconds
-	const stored = window.localStorage.getItem(turnDelayStorageKey)
-	const normalized = stored === null ? null : normalizeTurnDelaySeconds(stored)
-	return normalized ?? defaultTurnDelaySeconds
-}
-
-function orderTranscriptsByPreviousItemId(
-	list: RealtimeTranscriptMessage[],
-	previousItemIdById: Map<string, string | null>
-): RealtimeTranscriptMessage[] {
-	if (list.length <= 1) return list
-
-	const byId = new Map(list.map(item => [item.id, item] as const))
-	const ids = list.map(item => item.id)
-	const originalIndex = new Map(ids.map((id, idx) => [id, idx] as const))
-
-	const prevById = new Map<string, string | null | undefined>()
-	for (const id of ids) {
-		if (previousItemIdById.has(id)) prevById.set(id, previousItemIdById.get(id) ?? null)
-		else prevById.set(id, undefined)
-	}
-
-	const childrenByPrev = new Map<string, string[]>()
-	const ROOT = '__root__'
-
-	for (const id of ids) {
-		const prev = prevById.get(id)
-		if (prev === undefined) continue
-		const key = prev ?? ROOT
-		const arr = childrenByPrev.get(key) ?? []
-		arr.push(id)
-		childrenByPrev.set(key, arr)
-	}
-
-	childrenByPrev.forEach((arr, key) => {
-		arr.sort((a, b) => (originalIndex.get(a) ?? 0) - (originalIndex.get(b) ?? 0))
-		childrenByPrev.set(key, arr)
-	})
-
-	const visited = new Set<string>()
-	const out: string[] = []
-
-	const visit = (id: string) => {
-		if (visited.has(id)) return
-		visited.add(id)
-		out.push(id)
-		const kids = childrenByPrev.get(id)
-		if (!kids) return
-		for (const kid of kids) visit(kid)
-	}
-
-	const roots: string[] = []
-	for (const id of ids) {
-		const prev = prevById.get(id)
-		if (prev === undefined) continue
-		if (prev === null || (typeof prev === 'string' && !byId.has(prev))) roots.push(id)
-	}
-
-	roots.sort((a, b) => (originalIndex.get(a) ?? 0) - (originalIndex.get(b) ?? 0))
-	for (const root of roots) visit(root)
-
-	const remaining = ids.filter(id => !visited.has(id))
-	remaining.sort((a, b) => (originalIndex.get(a) ?? 0) - (originalIndex.get(b) ?? 0))
-	for (const id of remaining) visit(id)
-
-	const ordered = out.map(id => byId.get(id)).filter(Boolean) as RealtimeTranscriptMessage[]
-
-	let unchanged = ordered.length === list.length
-	if (unchanged) {
-		for (let i = 0; i < ordered.length; i += 1) {
-			if (ordered[i]?.id !== list[i]?.id) {
-				unchanged = false
-				break
-			}
-		}
-	}
-
-	return unchanged ? list : ordered
-}
-
-export function RealtimeProvider({ children }: { children: React.ReactNode }) {
-	const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null)
-	const [dataChannel, setDataChannel] = useState<RTCDataChannel | null>(null)
-	const [transcripts, setTranscripts] = useState<RealtimeTranscriptMessage[]>([])
-	const peerRef = useRef<RTCPeerConnection | null>(null)
-	const localRef = useRef<MediaStream | null>(null)
-	const turnDelaySecondsRef = useRef<number>(getInitialTurnDelaySeconds())
-	// Cancels in-flight `start()` calls and prevents multiple concurrent sessions.
-	const startGenerationRef = useRef(0)
-	// Stable transcript item id we choose for a given response_id (so we don't "split" a message mid-stream).
-	const assistantMessageIdByResponseIdRef = useRef<Map<string, string>>(new Map())
-	const assistantPreferredSourceByIdRef = useRef<
-		Map<string, 'response_text' | 'response_audio_transcript'>
-	>(new Map())
-	const transcriptionConfigModeRef = useRef<'modern' | 'legacy'>('modern')
-	// Conversation ordering hints (linked-list ordering via previous_item_id).
-	const previousItemIdByIdRef = useRef<Map<string, string | null>>(new Map())
-	// Anchor assistant responses to the correct user turn even if events arrive out of order.
-	const anchoredInputIdByResponseIdRef = useRef<Map<string, string>>(new Map())
-	const latestCommittedInputItemIdRef = useRef<string | null>(null)
-	// Buffer assistant deltas until we know the real output item id (avoids synthetic ids + duplicates).
-	const pendingAssistantDeltasByResponseIdRef = useRef<
-		Map<string, { text: string; audioTranscript: string }>
-	>(new Map())
-
-	const cleanup = useCallback(() => {
-		peerRef.current?.close()
-		peerRef.current = null
-		for (const track of localRef.current?.getTracks() ?? []) track.stop()
-		localRef.current = null
-		setRemoteStream(null)
-		setDataChannel(null)
-		assistantMessageIdByResponseIdRef.current.clear()
-		assistantPreferredSourceByIdRef.current.clear()
-		previousItemIdByIdRef.current.clear()
-		anchoredInputIdByResponseIdRef.current.clear()
-		latestCommittedInputItemIdRef.current = null
-		pendingAssistantDeltasByResponseIdRef.current.clear()
-	}, [])
-
-	const clearTranscripts = useCallback(() => {
-		setTranscripts([])
-		assistantMessageIdByResponseIdRef.current.clear()
-		assistantPreferredSourceByIdRef.current.clear()
-		previousItemIdByIdRef.current.clear()
-		anchoredInputIdByResponseIdRef.current.clear()
-		latestCommittedInputItemIdRef.current = null
-		pendingAssistantDeltasByResponseIdRef.current.clear()
-	}, [])
-
-	const reorderTranscripts = useCallback(() => {
-		setTranscripts(prev => orderTranscriptsByPreviousItemId(prev, previousItemIdByIdRef.current))
-	}, [])
-
-	const upsertTranscript = useCallback(
-		(update: {
-			id: string
-			role: 'user' | 'assistant'
-			source: RealtimeTranscriptMessage['source']
-			appendDelta?: string
-			replaceText?: string
-			finalize?: boolean
-			previousItemId?: string | null
-		}) => {
-			setTranscripts(prev => {
-				const idx = prev.findIndex(item => item.id === update.id)
-				const existing = idx >= 0 ? prev[idx] : null
-
-				// If we already have assistant text streaming, don't overwrite it with audio transcript deltas.
-				if (
-					existing?.role === 'assistant' &&
-					existing?.source === 'response_text' &&
-					existing?.text.trim().length > 0 &&
-					update.source === 'response_audio_transcript'
-				) {
-					return prev
-				}
-
-				const shouldResetAssistantText =
-					typeof update.replaceText !== 'string' &&
-					existing?.role === 'assistant' &&
-					existing?.source === 'response_audio_transcript' &&
-					update.source === 'response_text' &&
-					typeof update.appendDelta === 'string'
-
-				const next: RealtimeTranscriptMessage = {
-					id: update.id,
-					role: update.role,
-					source: update.source,
-					status: update.finalize ? 'final' : (existing?.status ?? 'streaming'),
-					text:
-						typeof update.replaceText === 'string'
-							? update.replaceText
-							: shouldResetAssistantText
-								? (update.appendDelta ?? '')
-								: (existing?.text ?? '') + (update.appendDelta ?? '')
-				}
-
-				if (typeof update.previousItemId !== 'undefined') {
-					previousItemIdByIdRef.current.set(update.id, update.previousItemId)
-				}
-
-				// Preserve the "better" assistant source once we see it.
-				if (
-					next.role === 'assistant' &&
-					(next.source === 'response_text' || next.source === 'response_audio_transcript')
-				) {
-					assistantPreferredSourceByIdRef.current.set(next.id, next.source)
-				}
-
-				if (idx === -1)
-					return orderTranscriptsByPreviousItemId([...prev, next], previousItemIdByIdRef.current)
-
-				const copy = prev.slice()
-				copy[idx] = next
-				return orderTranscriptsByPreviousItemId(copy, previousItemIdByIdRef.current)
-			})
-		},
-		[]
-	)
-
-	const finalizeAssistantTranscript = useCallback((assistantId?: string) => {
-		setTranscripts(prev => {
-			if (assistantId) {
-				const idx = prev.findIndex(item => item.id === assistantId)
-				if (idx === -1) return prev
-				const current = prev[idx]
-				if (!current || current.status === 'final') return prev
-				const copy = prev.slice()
-				copy[idx] = { ...current, status: 'final' }
-				return orderTranscriptsByPreviousItemId(copy, previousItemIdByIdRef.current)
-			}
-
-			for (let i = prev.length - 1; i >= 0; i -= 1) {
-				const item = prev[i]
-				if (item?.role === 'assistant' && item.status !== 'final') {
-					const copy = prev.slice()
-					copy[i] = { ...item, status: 'final' }
-					return orderTranscriptsByPreviousItemId(copy, previousItemIdByIdRef.current)
-				}
-			}
-			return prev
-		})
-	}, [])
-
-	const start = useCallback(
-		async (opts?: { instructions?: string; voice?: string; model?: string }) => {
-			console.log('[realtime] start() called', { opts })
-			// Invalidate any in-flight start and tear down any existing session before creating a new one.
-			startGenerationRef.current += 1
-			const generation = startGenerationRef.current
-			cleanup()
-			clearTranscripts()
-			let mic: MediaStream | null = null
-			let pc: RTCPeerConnection | null = null
-			try {
-				const session = await createRealtimeSession({
-					instructions: opts?.instructions,
-					model: opts?.model,
-					voice: opts?.voice
-				})
-				const clientSecret = session.client_secret.value
-				const model = session.model
-				console.log('[realtime] created session', { expires_at: session.expires_at, model })
-
-				mic = await navigator.mediaDevices.getUserMedia({
-					audio: {
-						autoGainControl: true,
-						echoCancellation: true,
-						noiseSuppression: true
-					}
-				})
-				if (startGenerationRef.current !== generation) {
-					for (const track of mic.getTracks()) track.stop()
-					return
-				}
-				console.log('[realtime] obtained microphone stream', {
-					audioTracks: mic.getAudioTracks().length
-				})
-				localRef.current = mic
-
-				const peer = new RTCPeerConnection()
-				pc = peer
-				peerRef.current = peer
-				peer.addEventListener('icecandidate', e => {
-					console.log('[realtime] icecandidate', { candidate: Boolean(e.candidate) })
-				})
-				peer.addEventListener('icegatheringstatechange', () => {
-					console.log('[realtime] icegatheringstatechange', peer.iceGatheringState)
-				})
-				peer.addEventListener('signalingstatechange', () => {
-					console.log('[realtime] signalingstatechange', peer.signalingState)
-				})
-				peer.addEventListener('connectionstatechange', () => {
-					console.log('[realtime] connectionstatechange', peer.connectionState)
-				})
-				// Guard optional event for browsers that support it
-				;(
-					peer as unknown as { addEventListener?: (t: string, cb: (e: unknown) => void) => void }
-				).addEventListener?.('icecandidateerror', (e: unknown) => {
-					console.warn('[realtime] icecandidateerror', e)
-				})
-
-				peer.addEventListener('track', event => {
-					const [first] = event.streams
-					if (!first) return
-					setRemoteStream(first)
-					console.log('[realtime] remote track added', {
-						kind: event.track.kind,
-						remoteAudioTracks: first.getAudioTracks().length
-					})
-				})
-
-				for (const track of mic.getTracks()) {
-					peer.addTrack(track, mic)
-				}
-
-				const dc = peer.createDataChannel('oai-events')
-				setDataChannel(dc)
-				dc.addEventListener('open', () => {
-					console.log('[realtime] datachannel open')
-					try {
-						// Always set transcription + (optional) session preferences.
-						transcriptionConfigModeRef.current = 'modern'
-						const silenceDurationMs = Math.round(turnDelaySecondsRef.current * 1000)
-						dc.send(
-							JSON.stringify({
-								session: {
-									...(opts?.voice ? { voice: opts.voice } : {}),
-									...(opts?.instructions ? { instructions: opts.instructions } : {}),
-									audio: {
-										input: {
-											// High-quality live transcription of user audio.
-											transcription: {
-												model: 'gpt-4o-transcribe'
-											}
-										}
-									},
-									// Request both audio and text so we can display a high-quality text timeline.
-									modalities: ['audio', 'text'],
-									turn_detection: {
-										silence_duration_ms: silenceDurationMs,
-										type: 'server_vad'
-									}
-								},
-								type: 'session.update'
-							})
-						)
-						console.log('[realtime] sent session.update (modalities + transcription + turn_detection)', {
-							silenceDurationMs
-						})
-					} catch {}
-				})
-				dc.addEventListener('close', () => {
-					console.log('[realtime] datachannel close')
-				})
-				dc.addEventListener('message', e => {
-					try {
-						const msg = JSON.parse(String(e.data))
-						const type = msg?.type
-						if (typeof type === 'string') {
-							// If the API rejects modern config keys, fall back to legacy input_audio_transcription.
-							if (type === 'error') {
-								const message =
-									(typeof msg?.error?.message === 'string' && msg.error.message) ||
-									(typeof msg?.message === 'string' && msg.message) ||
-									''
-								if (
-									transcriptionConfigModeRef.current === 'modern' &&
-									/message|unknown|unexpected|unrecognized|invalid/i.test(message) &&
-									/audio|transcription|modalities|input_audio_transcription/i.test(message)
-								) {
-									try {
-										transcriptionConfigModeRef.current = 'legacy'
-										dc.send(
-											JSON.stringify({
-												session: {
-													// Legacy field name used in older examples.
-													input_audio_transcription: { model: 'whisper-1' }
-												},
-												type: 'session.update'
-											})
-										)
-										console.warn('[realtime] fell back to legacy input_audio_transcription config', {
-											message
-										})
-									} catch {}
-								}
-								// Keep logging errors for debugging.
-								console.warn('[realtime] error event', msg)
-								return
-							}
-
-							const getAnchoredInputItemId = (responseId: string): string | null => {
-								const existing = anchoredInputIdByResponseIdRef.current.get(responseId)
-								if (existing) return existing
-								const latest = latestCommittedInputItemIdRef.current
-								if (!latest) return null
-								anchoredInputIdByResponseIdRef.current.set(responseId, latest)
-								return latest
-							}
-
-							// Audio input turn has been committed into a conversation item (includes ordering).
-							if (type === 'input_audio_buffer.committed') {
-								const itemId = msg?.item_id
-								const previousItemId =
-									typeof msg?.previous_item_id === 'string' ? msg.previous_item_id : null
-
-								if (typeof itemId === 'string') {
-									latestCommittedInputItemIdRef.current = itemId
-									upsertTranscript({
-										id: itemId,
-										previousItemId,
-										role: 'user',
-										source: 'input_transcription'
-									})
-								}
-								return
-							}
-
-							// Conversation items are emitted as a linked list via previous_item_id; use this to order the UI.
-							if (type === 'conversation.item.created') {
-								const itemId = typeof msg?.item?.id === 'string' ? msg.item.id : undefined
-								const role = msg?.item?.role
-								const previousItemId =
-									typeof msg?.previous_item_id === 'string'
-										? msg.previous_item_id
-										: typeof msg?.item?.previous_item_id === 'string'
-											? msg.item.previous_item_id
-											: null
-
-								if (typeof itemId === 'string') {
-									previousItemIdByIdRef.current.set(itemId, previousItemId)
-									if (role === 'user') latestCommittedInputItemIdRef.current = itemId
-									reorderTranscripts()
-								}
-								return
-							}
-
-							// User audio transcription streaming.
-							if (type === 'conversation.item.input_audio_transcription.delta') {
-								const itemId = msg?.item_id
-								const delta = msg?.delta
-								if (typeof itemId === 'string' && typeof delta === 'string' && delta) {
-									if (!latestCommittedInputItemIdRef.current) latestCommittedInputItemIdRef.current = itemId
-									upsertTranscript({
-										appendDelta: delta,
-										id: itemId,
-										previousItemId: previousItemIdByIdRef.current.has(itemId)
-											? (previousItemIdByIdRef.current.get(itemId) ?? null)
-											: typeof msg?.previous_item_id === 'string'
-												? msg.previous_item_id
-												: undefined,
-										role: 'user',
-										source: 'input_transcription'
-									})
-								}
-								return
-							}
-							if (type === 'conversation.item.input_audio_transcription.completed') {
-								const itemId = msg?.item_id
-								const transcript = msg?.transcript
-								if (typeof itemId === 'string' && typeof transcript === 'string') {
-									if (!latestCommittedInputItemIdRef.current) latestCommittedInputItemIdRef.current = itemId
-									upsertTranscript({
-										finalize: true,
-										id: itemId,
-										previousItemId: previousItemIdByIdRef.current.has(itemId)
-											? (previousItemIdByIdRef.current.get(itemId) ?? null)
-											: typeof msg?.previous_item_id === 'string'
-												? msg.previous_item_id
-												: undefined,
-										replaceText: transcript,
-										role: 'user',
-										source: 'input_transcription'
-									})
-								}
-								return
-							}
-
-							// Keep track of which output item id belongs to a given response.
-							if (type === 'response.output_item.added') {
-								const responseId = msg?.response_id
-								const itemId = msg?.item?.id
-								const explicitPreviousItemId =
-									typeof msg?.item?.previous_item_id === 'string'
-										? msg.item.previous_item_id
-										: typeof msg?.previous_item_id === 'string'
-											? msg.previous_item_id
-											: undefined
-								if (typeof responseId === 'string' && typeof itemId === 'string') {
-									// Canonical mapping from response_id -> output item id.
-									assistantMessageIdByResponseIdRef.current.set(responseId, itemId)
-
-									// Anchor this response to the most recently committed input item (only once).
-									if (!anchoredInputIdByResponseIdRef.current.has(responseId)) {
-										const latest = latestCommittedInputItemIdRef.current
-										if (latest) anchoredInputIdByResponseIdRef.current.set(responseId, latest)
-									}
-
-									const anchor = getAnchoredInputItemId(responseId)
-									const previousItemId =
-										typeof explicitPreviousItemId === 'string' ? explicitPreviousItemId : anchor
-									if (typeof previousItemId === 'string') {
-										previousItemIdByIdRef.current.set(itemId, previousItemId)
-										reorderTranscripts()
-									}
-
-									const pending = pendingAssistantDeltasByResponseIdRef.current.get(responseId)
-									if (pending) {
-										if (pending.text) {
-											upsertTranscript({
-												appendDelta: pending.text,
-												id: itemId,
-												role: 'assistant',
-												source: 'response_text',
-												...(typeof previousItemId === 'string' ? { previousItemId } : {})
-											})
-										} else if (pending.audioTranscript) {
-											upsertTranscript({
-												appendDelta: pending.audioTranscript,
-												id: itemId,
-												role: 'assistant',
-												source: 'response_audio_transcript',
-												...(typeof previousItemId === 'string' ? { previousItemId } : {})
-											})
-										}
-										pendingAssistantDeltasByResponseIdRef.current.delete(responseId)
-									}
-								}
-								// no return; we still might want to log unknown shapes in dev
-							}
-
-							// Assistant transcript streaming (preferred when text modality is not present).
-							if (type === 'response.audio_transcript.delta') {
-								const responseId = typeof msg?.response_id === 'string' ? msg.response_id : null
-								const inlineItemId = typeof msg?.item_id === 'string' ? msg.item_id : undefined
-								const stableFromResponse = responseId
-									? assistantMessageIdByResponseIdRef.current.get(responseId)
-									: undefined
-								const itemId = stableFromResponse ?? inlineItemId
-
-								const delta = msg?.delta
-								if (typeof delta === 'string' && delta) {
-									if (!itemId && responseId) {
-										const pending = pendingAssistantDeltasByResponseIdRef.current.get(responseId) ?? {
-											audioTranscript: '',
-											text: ''
-										}
-										pending.audioTranscript += delta
-										pendingAssistantDeltasByResponseIdRef.current.set(responseId, pending)
-										return
-									}
-
-									if (typeof itemId === 'string') {
-										if (responseId && !stableFromResponse) {
-											assistantMessageIdByResponseIdRef.current.set(responseId, itemId)
-										}
-
-										const anchor = responseId ? getAnchoredInputItemId(responseId) : null
-										const previousItemId = previousItemIdByIdRef.current.has(itemId)
-											? (previousItemIdByIdRef.current.get(itemId) ?? null)
-											: typeof msg?.previous_item_id === 'string'
-												? msg.previous_item_id
-												: (anchor ?? undefined)
-										upsertTranscript({
-											appendDelta: delta,
-											id: itemId,
-											previousItemId,
-											role: 'assistant',
-											source: 'response_audio_transcript'
-										})
-									}
-								}
-								return
-							}
-
-							// Assistant text streaming (preferred when available).
-							if (type === 'response.text.delta') {
-								const delta = msg?.delta
-								const responseId = typeof msg?.response_id === 'string' ? msg.response_id : null
-								const inlineItemId = typeof msg?.item_id === 'string' ? msg.item_id : undefined
-								const stableFromResponse = responseId
-									? assistantMessageIdByResponseIdRef.current.get(responseId)
-									: undefined
-								const itemId = stableFromResponse ?? inlineItemId
-
-								if (typeof delta === 'string' && delta) {
-									if (!itemId && responseId) {
-										const pending = pendingAssistantDeltasByResponseIdRef.current.get(responseId) ?? {
-											audioTranscript: '',
-											text: ''
-										}
-										pending.text += delta
-										pendingAssistantDeltasByResponseIdRef.current.set(responseId, pending)
-										return
-									}
-
-									if (typeof itemId === 'string') {
-										if (responseId && !stableFromResponse) {
-											assistantMessageIdByResponseIdRef.current.set(responseId, itemId)
-										}
-
-										const anchor = responseId ? getAnchoredInputItemId(responseId) : null
-										const previousItemId = previousItemIdByIdRef.current.has(itemId)
-											? (previousItemIdByIdRef.current.get(itemId) ?? null)
-											: typeof msg?.previous_item_id === 'string'
-												? msg.previous_item_id
-												: (anchor ?? undefined)
-										upsertTranscript({
-											appendDelta: delta,
-											id: itemId,
-											previousItemId,
-											role: 'assistant',
-											source: 'response_text'
-										})
-									}
-								}
-								return
-							}
-
-							// Mark the assistant message as complete at the end of the response.
-							if (type === 'response.done') {
-								const responseId = typeof msg?.response_id === 'string' ? msg.response_id : null
-								const assistantId = responseId
-									? assistantMessageIdByResponseIdRef.current.get(responseId)
-									: undefined
-								finalizeAssistantTranscript(assistantId)
-								if (responseId) pendingAssistantDeltasByResponseIdRef.current.delete(responseId)
-								return
-							}
-						}
-
-						console.log('[realtime] dc message', msg?.type ?? 'unknown', msg)
-					} catch {
-						console.log('[realtime] dc message (text)', String(e.data))
-					}
-				})
-
-				const offer = await pc.createOffer()
-				if (startGenerationRef.current !== generation) {
-					try {
-						pc.close()
-					} catch {}
-					for (const track of mic.getTracks()) track.stop()
-					return
-				}
-				console.log('[realtime] created local offer', { sdpBytes: offer.sdp?.length ?? 0 })
-				await pc.setLocalDescription(offer)
-				if (startGenerationRef.current !== generation) {
-					try {
-						pc.close()
-					} catch {}
-					for (const track of mic.getTracks()) track.stop()
-					return
-				}
-				console.log('[realtime] setLocalDescription')
-
-				const resp = await fetch(
-					`https://api.openai.com/v1/realtime?model=${encodeURIComponent(model)}`,
-					{
-						body: offer.sdp ?? '',
-						headers: {
-							Authorization: `Bearer ${clientSecret}`,
-							'Content-Type': 'application/sdp',
-							'OpenAI-Beta': 'realtime=v1'
-						},
-						method: 'POST'
-					}
-				)
-				console.log('[realtime] handshake response', { status: resp.status })
-				if (!resp.ok) {
-					const body = await resp.text().catch(() => '')
-					console.error('[realtime] handshake failed', resp.status, body)
-					throw new Error(`Realtime handshake failed (${resp.status})`)
-				}
-
-				const answer = await resp.text()
-				if (startGenerationRef.current !== generation) {
-					try {
-						pc.close()
-					} catch {}
-					for (const track of mic.getTracks()) track.stop()
-					return
-				}
-				console.log('[realtime] received remote answer', { sdpBytes: answer.length })
-				await pc.setRemoteDescription({ sdp: answer, type: 'answer' })
-				if (startGenerationRef.current !== generation) {
-					try {
-						pc.close()
-					} catch {}
-					for (const track of mic.getTracks()) track.stop()
-					return
-				}
-				console.log('[realtime] setRemoteDescription complete')
-			} catch (error) {
-				// Ignore transient errors caused by StrictMode / rapid cancels.
-				if (startGenerationRef.current !== generation) return
-				try {
-					pc?.close()
-				} catch {}
-				for (const track of mic?.getTracks() ?? []) track.stop()
-				throw error
-			}
-		},
-		[cleanup, clearTranscripts, finalizeAssistantTranscript, reorderTranscripts, upsertTranscript]
-	)
-
-	const stop = useCallback(() => {
-		console.log('[realtime] stop() called')
-		// Cancel any in-flight `start()` and ensure it won't revive a closed session.
-		startGenerationRef.current += 1
-		cleanup()
-		clearTranscripts()
-	}, [cleanup, clearTranscripts])
-
-	const updateInstructions = useCallback(
-		(text: string) => {
-			if (!dataChannel) return
-			try {
-				dataChannel.send(
-					JSON.stringify({
-						session: { instructions: text },
-						type: 'session.update'
-					})
-				)
-			} catch {
-				// ignore
-			}
-		},
-		[dataChannel]
-	)
-
-	const updateVoice = useCallback(
-		(voice: string) => {
-			if (!dataChannel) return
-			try {
-				dataChannel.send(
-					JSON.stringify({
-						session: { voice },
-						type: 'session.update'
-					})
-				)
-			} catch {
-				// ignore
-			}
-		},
-		[dataChannel]
-	)
-
-	const updateTurnDelaySeconds = useCallback(
-		(seconds: number) => {
-			const normalized = normalizeTurnDelaySeconds(seconds)
-			if (normalized === null) return
-			turnDelaySecondsRef.current = normalized
-			if (!dataChannel) return
-			try {
-				dataChannel.send(
-					JSON.stringify({
-						session: {
-							turn_detection: {
-								silence_duration_ms: Math.round(normalized * 1000),
-								type: 'server_vad'
-							}
-						},
-						type: 'session.update'
-					})
-				)
-			} catch {
-				// ignore
-			}
-		},
-		[dataChannel]
-	)
-
-	const value = useMemo<RealtimeContextValue>(
-		() => ({
-			clearTranscripts,
-			dataChannel,
-			remoteStream,
-			start,
-			stop,
-			transcripts,
-			updateInstructions,
-			updateTurnDelaySeconds,
-			updateVoice
-		}),
-		[
-			dataChannel,
-			remoteStream,
-			transcripts,
-			start,
-			updateInstructions,
-			updateVoice,
-			updateTurnDelaySeconds,
-			clearTranscripts,
-			stop
-		]
-	)
-
-	return <RealtimeContext.Provider value={value}>{children}</RealtimeContext.Provider>
-}
-
-export function useRealtimeVoiceSession(): RealtimeContextValue {
-	const ctx = useContext(RealtimeContext)
-	if (!ctx) throw new Error('useRealtimeVoiceSession must be used within a RealtimeProvider')
-	return ctx
-}
diff --git a/src/realtime/schemas.ts b/src/realtime/schemas.ts
new file mode 100644
index 0000000..2f7fbe1
--- /dev/null
+++ b/src/realtime/schemas.ts
@@ -0,0 +1,191 @@
+import { z } from 'zod'
+
+import { languageOptions } from '@/realtime/sessionTypes'
+
+const languageCodeValues = languageOptions.map(option => option.code)
+
+const LanguageCodeSchema = z
+	.string()
+	.min(2)
+	.transform(value => value.trim().toLowerCase())
+
+const KnownLanguageCodeSchema = z.enum(languageCodeValues as [string, ...string[]])
+
+const RealtimeClientSecretSchema = z.object({
+	expires_at: z.number(),
+	value: z.string().min(1)
+})
+
+const RealtimeClientSecretResponseSchema = z.object({
+	expires_at: z.number(),
+	session: z.record(z.string(), z.unknown()).optional(),
+	value: z.string().min(1)
+})
+
+const RealtimeSessionClientSecretResponseSchema = z.object({
+	client_secret: RealtimeClientSecretSchema,
+	id: z.string().optional(),
+	object: z.string().optional(),
+	session: z.record(z.string(), z.unknown()).optional()
+})
+
+export const CreateRealtimeClientSecretActionInputSchema = z.object({
+	instructions: z.string().max(12000).optional(),
+	model: z.string().default('gpt-realtime'),
+	turnDelaySeconds: z.number().min(0.2).max(6).default(1.2),
+	voice: z.string().default('verse')
+})
+
+export const CreateRealtimeClientSecretActionOutputSchema = z.object({
+	expiresAt: z.number(),
+	value: z.string().min(1)
+})
+
+export const CreateRealtimeTranscriptionSessionActionInputSchema = z.object({
+	languageHint: LanguageCodeSchema.optional(),
+	model: z.string().default('gpt-4o-transcribe'),
+	turnDelaySeconds: z.number().min(0.2).max(6).default(1.2)
+})
+
+export const CreateRealtimeTranscriptionSessionActionOutputSchema = z.object({
+	expiresAt: z.number(),
+	value: z.string().min(1)
+})
+
+export const TranslationContextEntrySchema = z.object({
+	direction: z.enum(['primary_to_secondary', 'secondary_to_primary', 'to_target']),
+	sourceLanguageCode: LanguageCodeSchema,
+	sourceText: z.string().min(1),
+	targetLanguageCode: LanguageCodeSchema,
+	translatedText: z.string().min(1)
+})
+
+const TranslateModeSettingsSchema = z.object({
+	mode: z.literal('translate'),
+	primaryLanguageCode: KnownLanguageCodeSchema,
+	secondaryLanguageCode: KnownLanguageCodeSchema
+})
+
+const TranscribeModeSettingsSchema = z.object({
+	mode: z.literal('transcribe'),
+	targetLanguageCode: KnownLanguageCodeSchema
+})
+
+export const TranslateUtteranceActionInputSchema = z.object({
+	context: z.array(TranslationContextEntrySchema).max(16).default([]),
+	model: z.string().default('gpt-4.1-mini'),
+	settings: z.union([TranslateModeSettingsSchema, TranscribeModeSettingsSchema]),
+	utteranceText: z.string().min(1).max(5000)
+})
+
+export const TranslateUtteranceActionOutputSchema = z.object({
+	detectedSourceLanguageCode: LanguageCodeSchema,
+	direction: z.enum(['primary_to_secondary', 'secondary_to_primary', 'to_target']),
+	targetLanguageCode: LanguageCodeSchema,
+	translatedText: z.string().min(1)
+})
+
+export const CompactTranslationContextActionInputSchema = z.object({
+	context: z.array(TranslationContextEntrySchema).max(200),
+	model: z.string().default('gpt-4.1-mini')
+})
+
+export const CompactTranslationContextActionOutputSchema = z.object({
+	compactedContext: z.array(TranslationContextEntrySchema),
+	performedCompaction: z.boolean()
+})
+
+export const RealtimeBaseServerEventSchema = z
+	.object({
+		type: z.string().min(1)
+	})
+	.passthrough()
+
+export const InputAudioBufferCommittedEventSchema = z
+	.object({
+		item_id: z.string(),
+		type: z.literal('input_audio_buffer.committed')
+	})
+	.passthrough()
+
+export const InputAudioTranscriptionDeltaEventSchema = z
+	.object({
+		delta: z.string(),
+		item_id: z.string(),
+		type: z.literal('conversation.item.input_audio_transcription.delta')
+	})
+	.passthrough()
+
+export const InputAudioTranscriptionCompletedEventSchema = z
+	.object({
+		item_id: z.string(),
+		transcript: z.string(),
+		type: z.literal('conversation.item.input_audio_transcription.completed')
+	})
+	.passthrough()
+
+export const ResponseOutputTextDeltaEventSchema = z
+	.object({
+		delta: z.string(),
+		item_id: z.string().optional(),
+		response_id: z.string().optional(),
+		type: z.literal('response.output_text.delta')
+	})
+	.passthrough()
+
+export const ResponseOutputTextDoneEventSchema = z
+	.object({
+		item_id: z.string().optional(),
+		response_id: z.string().optional(),
+		text: z.string().optional(),
+		type: z.literal('response.output_text.done')
+	})
+	.passthrough()
+
+export const ResponseOutputAudioTranscriptDeltaEventSchema = z
+	.object({
+		delta: z.string(),
+		item_id: z.string().optional(),
+		response_id: z.string().optional(),
+		type: z.literal('response.output_audio_transcript.delta')
+	})
+	.passthrough()
+
+export const ResponseDoneEventSchema = z
+	.object({
+		response_id: z.string().optional(),
+		type: z.literal('response.done')
+	})
+	.passthrough()
+
+export const ResponseOutputItemAddedEventSchema = z
+	.object({
+		item: z
+			.object({
+				id: z.string()
+			})
+			.passthrough(),
+		response_id: z.string().optional(),
+		type: z.literal('response.output_item.added')
+	})
+	.passthrough()
+
+export function parseClientSecretResponse(value: unknown): { expiresAt: number; value: string } {
+	const directSecret = RealtimeClientSecretResponseSchema.safeParse(value)
+	if (directSecret.success) {
+		return {
+			expiresAt: directSecret.data.expires_at,
+			value: directSecret.data.value
+		}
+	}
+
+	const nestedSecret = RealtimeSessionClientSecretResponseSchema.safeParse(value)
+	if (nestedSecret.success) {
+		return {
+			expiresAt: nestedSecret.data.client_secret.expires_at,
+			value: nestedSecret.data.client_secret.value
+		}
+	}
+
+	throw new Error('OpenAI response did not include an ephemeral client secret')
+}
diff --git a/src/realtime/sessionTypes.ts b/src/realtime/sessionTypes.ts
new file mode 100644
index 0000000..9e3be48
--- /dev/null
+++ b/src/realtime/sessionTypes.ts
@@ -0,0 +1,78 @@
+export type LilacMode = 'chat' | 'translate' | 'transcribe'
+
+export type ModeConnectionState = 'idle' | 'connecting' | 'connected' | 'error'
+
+export type TranslateSettings = {
+	primaryLanguageCode: string
+	secondaryLanguageCode: string
+}
+
+export type TranscribeSettings = {
+	targetLanguageCode: string
+}
+
+export type UtteranceDirection = 'primary_to_secondary' | 'secondary_to_primary' | 'to_target'
+
+export type UtteranceStatus = 'streaming' | 'translating' | 'final' | 'error'
+
+export type UtteranceCard = {
+	id: string
+	sourceText: string
+	sourceLanguageCode: string
+	translatedText: string
+	targetLanguageCode: string
+	direction: UtteranceDirection
+	status: UtteranceStatus
+	createdAt: number
+	errorMessage?: string
+}
+
+export type ChatTranscriptSource =
+	| 'input_transcription'
+	| 'response_output_text'
+	| 'response_output_audio_transcript'
+
+export type ChatTranscriptStatus = 'streaming' | 'final'
+
+export type ChatTranscriptMessage = {
+	id: string
+	role: 'user' | 'assistant'
+	text: string
+	status: ChatTranscriptStatus
+	source: ChatTranscriptSource
+	createdAt: number
+}
+
+export type TranslationContextEntry = {
+	sourceText: string
+	sourceLanguageCode: string
+	translatedText: string
+	targetLanguageCode: string
+	direction: UtteranceDirection
+}
+
+export const languageOptions = [
+	{ code: 'en', label: 'English' },
+	{ code: 'es', label: 'Spanish' },
+	{ code: 'fr', label: 'French' },
+	{ code: 'de', label: 'German' },
+	{ code: 'it', label: 'Italian' },
+	{ code: 'pt', label: 'Portuguese' },
+	{ code: 'zh', label: 'Chinese' },
+	{ code: 'ja', label: 'Japanese' },
+	{ code: 'ko', label: 'Korean' },
+	{ code: 'ar', label: 'Arabic' },
+	{ code: 'hi', label: 'Hindi' },
+	{ code: 'ru', label: 'Russian' }
+] as const
+
+export function isKnownLanguageCode(languageCode: string): boolean {
+	return languageOptions.some(option => option.code === languageCode)
+}
+
+export function normalizeLanguageCode(languageCode: string, fallbackLanguageCode: string): string {
+	const normalizedCode = languageCode.trim().toLowerCase()
+	if (!normalizedCode) return fallbackLanguageCode
+	if (!isKnownLanguageCode(normalizedCode)) return fallbackLanguageCode
+	return normalizedCode
+}
diff --git a/src/realtime/transcriptionSocketClient.ts b/src/realtime/transcriptionSocketClient.ts
new file mode 100644
index 0000000..7508a46
--- /dev/null
+++ b/src/realtime/transcriptionSocketClient.ts
@@ -0,0 +1,329 @@
+'use client'
+
+import { createRealtimeTranscriptionSessionAction } from '@/app/actions/realtime'
+import {
+	InputAudioBufferCommittedEventSchema,
+	InputAudioTranscriptionCompletedEventSchema,
+	InputAudioTranscriptionDeltaEventSchema,
+	RealtimeBaseServerEventSchema
+} from '@/realtime/schemas'
+
+export type TranscriptionSocketClientState = 'connecting' | 'connected' | 'disconnected' | 'error'
+
+export type TranscriptionPatch = {
+	itemId: string
+	previousItemId?: null | string
+	status: 'final' | 'streaming'
+	text: string
+}
+
+export type StartTranscriptionSocketClientInput = {
+	languageHint?: string
+	model: string
+	turnDelaySeconds: number
+}
+
+export type TranscriptionSocketClientCallbacks = {
+	onConnectionStateChange: (state: TranscriptionSocketClientState) => void
+	onError: (message: string) => void
+	onPatch: (patch: TranscriptionPatch) => void
+}
+
+function float32ToPcm16(float32Samples: Float32Array): ArrayBuffer {
+	const pcm16 = new Int16Array(float32Samples.length)
+	for (let sampleIndex = 0; sampleIndex < float32Samples.length; sampleIndex += 1) {
+		const sample = Math.max(-1, Math.min(1, float32Samples[sampleIndex] ?? 0))
+		pcm16[sampleIndex] = sample < 0 ? sample * 0x8000 : sample * 0x7fff
+	}
+	return pcm16.buffer
+}
+
+function arrayBufferToBase64(buffer: ArrayBuffer): string {
+	let binary = ''
+	const bytes = new Uint8Array(buffer)
+	for (let index = 0; index < bytes.length; index += 1) {
+		binary += String.fromCharCode(bytes[index] ?? 0)
+	}
+	return window.btoa(binary)
+}
+
+function downsampleFloat32Audio(
+	float32Samples: Float32Array,
+	inputSampleRate: number,
+	outputSampleRate: number
+): Float32Array {
+	if (inputSampleRate === outputSampleRate) return float32Samples
+
+	const sampleRateRatio = inputSampleRate / outputSampleRate
+	const downsampledLength = Math.max(1, Math.round(float32Samples.length / sampleRateRatio))
+	const downsampledSamples = new Float32Array(downsampledLength)
+
+	let sourceIndex = 0
+	for (let outputIndex = 0; outputIndex < downsampledLength; outputIndex += 1) {
+		const nextSourceIndex = Math.round((outputIndex + 1) * sampleRateRatio)
+		let accumulator = 0
+		let sampleCount = 0
+
+		while (sourceIndex < nextSourceIndex && sourceIndex < float32Samples.length) {
+			accumulator += float32Samples[sourceIndex] ?? 0
+			sampleCount += 1
+			sourceIndex += 1
+		}
+
+		if (sampleCount > 0) {
+			downsampledSamples[outputIndex] = accumulator / sampleCount
+			continue
+		}
+
+		const fallbackSourceIndex = Math.min(
+			float32Samples.length - 1,
+			Math.round(outputIndex * sampleRateRatio)
+		)
+		downsampledSamples[outputIndex] = float32Samples[fallbackSourceIndex] ?? 0
+	}
+
+	return downsampledSamples
+}
+
+export class TranscriptionSocketClient {
+	private audioContext: AudioContext | null = null
+	private audioProcessor: ScriptProcessorNode | null = null
+	private audioSource: MediaStreamAudioSourceNode | null = null
+	private callbacks: TranscriptionSocketClientCallbacks
+	private generation = 0
+	private microphoneStream: MediaStream | null = null
+	private websocket: WebSocket | null = null
+
+	public constructor(callbacks: TranscriptionSocketClientCallbacks) {
+		this.callbacks = callbacks
+	}
+
+	public async start(input: StartTranscriptionSocketClientInput): Promise<void> {
+		this.generation += 1
+		const generation = this.generation
+		this.stop()
+		this.callbacks.onConnectionStateChange('connecting')
+
+		try {
+			const clientSecret = await createRealtimeTranscriptionSessionAction({
+				languageHint: input.languageHint,
+				model: input.model,
+				turnDelaySeconds: input.turnDelaySeconds
+			})
+
+			if (generation !== this.generation) return
+
+			const websocketProtocols = ['realtime', `openai-insecure-api-key.${clientSecret.value}`]
+			const websocket = new WebSocket(
+				'wss://api.openai.com/v1/realtime?intent=transcription',
+				websocketProtocols
+			)
+			this.websocket = websocket
+
+			websocket.addEventListener('open', () => {
+				if (generation !== this.generation) return
+				this.callbacks.onConnectionStateChange('connected')
+				this.sendEvent({
+					session: {
+						audio: {
+							input: {
+								format: {
+									rate: 24000,
+									type: 'audio/pcm'
+								},
+								noise_reduction: {
+									type: 'near_field'
+								},
+								transcription: {
+									model: input.model,
+									...(input.languageHint ? { language: input.languageHint } : {})
+								},
+								turn_detection: {
+									create_response: false,
+									interrupt_response: false,
+									silence_duration_ms: Math.round(input.turnDelaySeconds * 1000),
+									type: 'server_vad'
+								}
+							}
+						},
+						type: 'transcription'
+					},
+					type: 'transcription_session.update'
+				})
+			})
+
+			websocket.addEventListener('message', event => {
+				this.handleRealtimeEvent(event.data)
+			})
+
+			websocket.addEventListener('error', () => {
+				if (generation !== this.generation) return
+				this.callbacks.onConnectionStateChange('error')
+				this.callbacks.onError('Realtime transcription socket error')
+			})
+
+			websocket.addEventListener('close', () => {
+				if (generation !== this.generation) return
+				this.callbacks.onConnectionStateChange('disconnected')
+			})
+
+			await this.startMicrophoneStreaming(generation)
+		} catch (error) {
+			if (generation !== this.generation) return
+			const fallbackMessage = 'Unable to start transcription mode.'
+			if (error instanceof Error) this.callbacks.onError(error.message || fallbackMessage)
+			else this.callbacks.onError(fallbackMessage)
+			this.callbacks.onConnectionStateChange('error')
+			this.stop()
+		}
+	}
+
+	public stop(): void {
+		this.generation += 1
+
+		try {
+			this.websocket?.close()
+		} catch {}
+		this.websocket = null
+
+		try {
+			this.audioProcessor?.disconnect()
+		} catch {}
+		this.audioProcessor = null
+
+		try {
+			this.audioSource?.disconnect()
+		} catch {}
+		this.audioSource = null
+
+		for (const track of this.microphoneStream?.getTracks() ?? []) {
+			track.stop()
+		}
+		this.microphoneStream = null
+
+		if (this.audioContext) {
+			void this.audioContext.close().catch(() => {})
+		}
+		this.audioContext = null
+
+		this.callbacks.onConnectionStateChange('disconnected')
+	}
+
+	private handleRealtimeEvent(rawData: unknown): void {
+		try {
+			const candidate = typeof rawData === 'string' ? JSON.parse(rawData) : rawData
+			const baseEvent = RealtimeBaseServerEventSchema.parse(candidate)
+
+			switch (baseEvent.type) {
+				case 'input_audio_buffer.committed': {
+					const event = InputAudioBufferCommittedEventSchema.parse(candidate)
+					const previousItemId =
+						typeof candidate === 'object' &&
+						candidate !== null &&
+						'previous_item_id' in candidate &&
+						typeof (candidate as { previous_item_id?: unknown }).previous_item_id === 'string'
+							? ((candidate as { previous_item_id: string }).previous_item_id ?? null)
+							: null
+					this.callbacks.onPatch({
+						itemId: event.item_id,
+						previousItemId,
+						status: 'streaming',
+						text: ''
+					})
+					return
+				}
+				case 'conversation.item.input_audio_transcription.delta': {
+					const event = InputAudioTranscriptionDeltaEventSchema.parse(candidate)
+					this.callbacks.onPatch({
+						itemId: event.item_id,
+						status: 'streaming',
+						text: event.delta
+					})
+					return
+				}
+				case 'conversation.item.input_audio_transcription.completed': {
+					const event = InputAudioTranscriptionCompletedEventSchema.parse(candidate)
+					this.callbacks.onPatch({
+						itemId: event.item_id,
+						status: 'final',
+						text: event.transcript
+					})
+					return
+				}
+				case 'error': {
+					const message =
+						typeof candidate === 'object' &&
+						candidate !== null &&
+						'error' in candidate &&
+						typeof (candidate as { error?: { message?: unknown } }).error?.message === 'string'
+							? ((candidate as { error?: { message?: string } }).error?.message ??
+								'Realtime transcription error')
+							: 'Realtime transcription error'
+					this.callbacks.onError(message)
+					return
+				}
+				default:
+					return
+			}
+		} catch {
+			this.callbacks.onError('Failed to parse transcription event payload')
+		}
+	}
+
+	private sendEvent(event: Record<string, unknown>): void {
+		if (!this.websocket) return
+		if (this.websocket.readyState !== WebSocket.OPEN) return
+		try {
+			this.websocket.send(JSON.stringify(event))
+		} catch {}
+	}
+
+	private async startMicrophoneStreaming(generation: number): Promise<void> {
+		const microphoneStream = await navigator.mediaDevices.getUserMedia({
+			audio: {
+				autoGainControl: true,
+				echoCancellation: true,
+				noiseSuppression: true
+			}
+		})
+
+		if (generation !== this.generation) {
+			for (const track of microphoneStream.getTracks()) track.stop()
+			return
+		}
+
+		this.microphoneStream = microphoneStream
+
+		const AudioContextConstructor =
+			window.AudioContext ??
+			(window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext
+		if (!AudioContextConstructor) throw new Error('AudioContext is not supported in this browser')
+
+		const audioContext = new AudioContextConstructor()
+		if (audioContext.state === 'suspended') await audioContext.resume()
+		if (generation !== this.generation) return
+
+		this.audioContext = audioContext
+
+		const audioSource = audioContext.createMediaStreamSource(microphoneStream)
+		const audioProcessor = audioContext.createScriptProcessor(4096, 1, 1)
+		this.audioSource = audioSource
+		this.audioProcessor = audioProcessor
+
+		audioProcessor.onaudioprocess = event => {
+			if (generation !== this.generation) return
+			const float32Samples = event.inputBuffer.getChannelData(0)
+			if (!float32Samples.length) return
+			const downsampled = downsampleFloat32Audio(float32Samples, audioContext.sampleRate, 24000)
+			const pcm16Buffer = float32ToPcm16(downsampled)
+			const base64Audio = arrayBufferToBase64(pcm16Buffer)
+			this.sendEvent({
+				audio: base64Audio,
+				type: 'input_audio_buffer.append'
+			})
+		}
+
+		audioSource.connect(audioProcessor)
+		audioProcessor.connect(audioContext.destination)
+	}
+}

From 7066b5df8ead5fbf95465bc1906957d20977fe35 Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Mon, 2 Mar 2026 16:57:43 -0500
Subject: [PATCH 02/24] fix: prevent realtime start generation invalidation

---
 src/realtime/chatRealtimeClient.ts        | 2 +-
 src/realtime/transcriptionSocketClient.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/realtime/chatRealtimeClient.ts b/src/realtime/chatRealtimeClient.ts
index b162863..1eeb9db 100644
--- a/src/realtime/chatRealtimeClient.ts
+++ b/src/realtime/chatRealtimeClient.ts
@@ -71,9 +71,9 @@ export class ChatRealtimeClient {
 	}
 
 	public async start(input: StartChatRealtimeClientInput): Promise<void> {
+		this.stop()
 		this.generation += 1
 		const generation = this.generation
-		this.stop()
 		this.callbacks.onConnectionStateChange('connecting')
 
 		let localAudioStream: MediaStream | null = null
diff --git a/src/realtime/transcriptionSocketClient.ts b/src/realtime/transcriptionSocketClient.ts
index 7508a46..c6583b5 100644
--- a/src/realtime/transcriptionSocketClient.ts
+++ b/src/realtime/transcriptionSocketClient.ts
@@ -99,9 +99,9 @@ export class TranscriptionSocketClient {
 	}
 
 	public async start(input: StartTranscriptionSocketClientInput): Promise<void> {
+		this.stop()
 		this.generation += 1
 		const generation = this.generation
-		this.stop()
 		this.callbacks.onConnectionStateChange('connecting')
 
 		try {

From bed6b9d96472f240f21c8e56058dd76b1361b1c1 Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Tue, 3 Mar 2026 09:15:24 -0500
Subject: [PATCH 03/24] feat: rebuild lilac as 2-mode realtime chat and live
 translate

---
 .github/workflows/live-smoke.yml            |  52 ++
 .gitignore                                  |   5 +-
 package.json                                |   4 +
 scripts/smoke/captureVercelRuntimeLogs.ts   |  83 +++
 scripts/smoke/generateSmokeAudio.ts         | 141 +++++
 scripts/smoke/runLiveConversationSmoke.ts   | 370 ++++++++++++
 src/app/(app)/ChatMode.tsx                  | 161 +++--
 src/app/(app)/ModeShell.tsx                 | 144 +++--
 src/app/(app)/TranscribeMode.tsx            | 118 ----
 src/app/(app)/TranslateMode.tsx             | 108 +++-
 src/app/actions/realtime.ts                 | 358 +++++------
 src/app/styles.css                          | 124 ++--
 src/realtime/chatRealtimeClient.ts          | 160 +++--
 src/realtime/liveTranslateRealtimeClient.ts | 526 +++++++++++++++++
 src/realtime/modeRuntimeStore.tsx           | 621 ++++++++++----------
 src/realtime/modelConfig.ts                 |  23 +
 src/realtime/schemas.ts                     | 106 ++--
 src/realtime/sessionTypes.ts                |  27 +-
 src/realtime/transcriptionSocketClient.ts   | 329 -----------
 19 files changed, 2162 insertions(+), 1298 deletions(-)
 create mode 100644 .github/workflows/live-smoke.yml
 create mode 100644 scripts/smoke/captureVercelRuntimeLogs.ts
 create mode 100644 scripts/smoke/generateSmokeAudio.ts
 create mode 100644 scripts/smoke/runLiveConversationSmoke.ts
 delete mode 100644 src/app/(app)/TranscribeMode.tsx
 create mode 100644 src/realtime/liveTranslateRealtimeClient.ts
 create mode 100644 src/realtime/modelConfig.ts
 delete mode 100644 src/realtime/transcriptionSocketClient.ts

diff --git a/.github/workflows/live-smoke.yml b/.github/workflows/live-smoke.yml
new file mode 100644
index 0000000..0647eea
--- /dev/null
+++ b/.github/workflows/live-smoke.yml
@@ -0,0 +1,52 @@
+name: live-smoke
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  smoke:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install Dependencies
+        run: bun install
+
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+
+      - name: Install Playwright Chromium
+        run: bunx playwright install --with-deps chromium
+
+      - name: Generate Smoke Audio Fixtures
+        run: bun run smoke:prepare-audio
+        env:
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+
+      - name: Run Live Smoke
+        run: bun run smoke:live
+        env:
+          CI: "true"
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+
+      - name: Upload Smoke Artifacts
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: smoke-artifacts
+          path: .artifacts/smoke
+          if-no-files-found: ignore
diff --git a/.gitignore b/.gitignore
index ac84698..b9ed78c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,4 +33,7 @@ yarn-error.log*
 
 # bun
 bun.lockb
-bun.lock
\ No newline at end of file
+bun.lock
+
+# smoke artifacts
+.artifacts
diff --git a/package.json b/package.json
index 0aa2ec9..cb8e075 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
 		"@types/node": "^24.10.1",
 		"@types/react": "^19.2.3",
 		"@types/react-dom": "^19.2.3",
+		"playwright": "^1.58.2",
 		"prisma": "^6.19.0",
 		"typescript": "^5.9.3",
 		"zod": "^4.1.12"
@@ -32,6 +33,9 @@
 		"db:studio": "prisma studio",
 		"dev": "next dev",
 		"format": "bun x biome check --write .",
+		"smoke:live": "bun run scripts/smoke/runLiveConversationSmoke.ts --target-url https://lilac.chat",
+		"smoke:local": "bun run scripts/smoke/runLiveConversationSmoke.ts --target-url http://localhost:3000 --skip-vercel-logs --skip-chat",
+		"smoke:prepare-audio": "bun run scripts/smoke/generateSmokeAudio.ts",
 		"start": "next start"
 	},
 	"version": "0.0.0"
diff --git a/scripts/smoke/captureVercelRuntimeLogs.ts b/scripts/smoke/captureVercelRuntimeLogs.ts
new file mode 100644
index 0000000..8e3f144
--- /dev/null
+++ b/scripts/smoke/captureVercelRuntimeLogs.ts
@@ -0,0 +1,83 @@
+import { spawn } from 'node:child_process'
+import { createWriteStream } from 'node:fs'
+import { mkdir, readFile } from 'node:fs/promises'
+import { join } from 'node:path'
+
+export type RuntimeLogCapture = {
+	stderrPath: string
+	stdoutPath: string
+	stop: () => Promise<void>
+}
+
+export type StartRuntimeLogCaptureInput = {
+	artifactDirectoryPath: string
+	deploymentDomain: string
+	vercelToken?: string
+}
+
+export async function startVercelRuntimeLogCapture(
+	input: StartRuntimeLogCaptureInput
+): Promise<RuntimeLogCapture> {
+	const runtimeDirectoryPath = join(input.artifactDirectoryPath, 'runtime-logs')
+	await mkdir(runtimeDirectoryPath, { recursive: true })
+
+	const stdoutPath = join(runtimeDirectoryPath, 'vercel-runtime.jsonl')
+	const stderrPath = join(runtimeDirectoryPath, 'vercel-runtime.stderr.log')
+	const stdoutWriter = createWriteStream(stdoutPath, { flags: 'w' })
+	const stderrWriter = createWriteStream(stderrPath, { flags: 'w' })
+
+	const captureEnvironment = {
+		...process.env
+	}
+	if (input.vercelToken) captureEnvironment.VERCEL_TOKEN = input.vercelToken
+
+	const vercelProcess = spawn('vercel', ['logs', input.deploymentDomain, '--json'], {
+		env: captureEnvironment,
+		stdio: ['ignore', 'pipe', 'pipe']
+	})
+
+	vercelProcess.stdout.pipe(stdoutWriter)
+	vercelProcess.stderr.pipe(stderrWriter)
+
+	async function stop(): Promise<void> {
+		if (!vercelProcess.killed) {
+			vercelProcess.kill('SIGINT')
+		}
+		await new Promise<void>(resolve => {
+			vercelProcess.once('close', () => resolve())
+			setTimeout(() => resolve(), 3000)
+		})
+		stdoutWriter.end()
+		stderrWriter.end()
+	}
+
+	return {
+		stderrPath,
+		stdoutPath,
+		stop
+	}
+}
+
+export async function collectRuntimeErrorMatches(runtimeLogPath: string): Promise<string[]> {
+	const runtimeLogContent = await readFile(runtimeLogPath, 'utf8')
+	const runtimeLogLines = runtimeLogContent
+		.split('\n')
+		.map(line => line.trim())
+		.filter(Boolean)
+
+	const matchPatterns = [
+		/Unsupported parameter/i,
+		/Unknown parameter/i,
+		/Unhandled/i,
+		/An error occurred in the Server Components render/i,
+		/\bdigest\b/i
+	]
+
+	const matches: string[] = []
+	for (const runtimeLine of runtimeLogLines) {
+		if (matchPatterns.some(pattern => pattern.test(runtimeLine))) {
+			matches.push(runtimeLine)
+		}
+	}
+	return matches
+}
diff --git a/scripts/smoke/generateSmokeAudio.ts b/scripts/smoke/generateSmokeAudio.ts
new file mode 100644
index 0000000..4c9cddd
--- /dev/null
+++ b/scripts/smoke/generateSmokeAudio.ts
@@ -0,0 +1,141 @@
+import { spawnSync } from 'node:child_process'
+import { mkdir, writeFile } from 'node:fs/promises'
+import { join, resolve } from 'node:path'
+
+type SmokeAudioPrompt = {
+	fileName: string
+	languageCode: 'en' | 'es'
+	text: string
+}
+
+const smokeAudioPrompts: SmokeAudioPrompt[] = [
+	{
+		fileName: 'en_smoke',
+		languageCode: 'en',
+		text:
+			'Hello everyone. This is a Lilac translation smoke test. We are validating live production conversation flow.'
+	},
+	{
+		fileName: 'es_smoke',
+		languageCode: 'es',
+		text:
+			'Hola a todos. Esta es una prueba de humo de traduccion de Lilac. Estamos validando el flujo de conversacion en produccion.'
+	}
+]
+
+const fixturesDirectoryPath = resolve(process.cwd(), '.artifacts/smoke/fixtures')
+
+function requireOpenAiApiKey(): string {
+	const openAiApiKey = process.env.OPENAI_API_KEY?.trim()
+	if (!openAiApiKey) {
+		throw new Error('OPENAI_API_KEY is required for smoke audio generation.')
+	}
+	return openAiApiKey
+}
+
+function runFfmpeg(args: string[]): void {
+	const ffmpegResult = spawnSync('ffmpeg', args, { encoding: 'utf8' })
+	if (ffmpegResult.status !== 0) {
+		throw new Error(`ffmpeg failed: ${ffmpegResult.stderr || ffmpegResult.stdout}`)
+	}
+}
+
+async function generatePromptAudio(prompt: SmokeAudioPrompt, openAiApiKey: string): Promise<void> {
+	const mp3OutputPath = join(fixturesDirectoryPath, `${prompt.fileName}.mp3`)
+	const wavOutputPath = join(fixturesDirectoryPath, `${prompt.fileName}.wav`)
+
+	const ttsResponse = await fetch('https://api.openai.com/v1/audio/speech', {
+		body: JSON.stringify({
+			input: prompt.text,
+			model: 'gpt-4o-mini-tts',
+			voice: 'alloy'
+		}),
+		headers: {
+			Authorization: `Bearer ${openAiApiKey}`,
+			'Content-Type': 'application/json'
+		},
+		method: 'POST'
+	})
+
+	if (!ttsResponse.ok) {
+		const errorText = await ttsResponse.text()
+		throw new Error(`TTS generation failed for ${prompt.fileName}: ${errorText}`)
+	}
+
+	const audioBuffer = Buffer.from(await ttsResponse.arrayBuffer())
+	await writeFile(mp3OutputPath, audioBuffer)
+
+	runFfmpeg([
+		'-y',
+		'-i',
+		mp3OutputPath,
+		'-ar',
+		'48000',
+		'-ac',
+		'1',
+		'-sample_fmt',
+		's16',
+		wavOutputPath
+	])
+}
+
+function buildConversationFixture(): void {
+	const conversationOutputPath = join(fixturesDirectoryPath, 'conversation_smoke.wav')
+	const englishWavPath = join(fixturesDirectoryPath, 'en_smoke.wav')
+	const spanishWavPath = join(fixturesDirectoryPath, 'es_smoke.wav')
+
+	runFfmpeg([
+		'-y',
+		'-f',
+		'lavfi',
+		'-i',
+		'anullsrc=r=48000:cl=mono:d=4',
+		'-i',
+		englishWavPath,
+		'-f',
+		'lavfi',
+		'-i',
+		'anullsrc=r=48000:cl=mono:d=3',
+		'-i',
+		spanishWavPath,
+		'-f',
+		'lavfi',
+		'-i',
+		'anullsrc=r=48000:cl=mono:d=3',
+		'-i',
+		englishWavPath,
+		'-f',
+		'lavfi',
+		'-i',
+		'anullsrc=r=48000:cl=mono:d=3',
+		'-i',
+		spanishWavPath,
+		'-filter_complex',
+		'[0:a][1:a][2:a][3:a][4:a][5:a][6:a]concat=n=7:v=0:a=1',
+		'-ar',
+		'48000',
+		'-ac',
+		'1',
+		'-sample_fmt',
+		's16',
+		conversationOutputPath
+	])
+}
+
+async function main(): Promise<void> {
+	const openAiApiKey = requireOpenAiApiKey()
+	await mkdir(fixturesDirectoryPath, { recursive: true })
+
+	for (const prompt of smokeAudioPrompts) {
+		await generatePromptAudio(prompt, openAiApiKey)
+	}
+
+	buildConversationFixture()
+
+	console.log(`Smoke fixtures generated in ${fixturesDirectoryPath}`)
+}
+
+void main().catch(error => {
+	console.error(error instanceof Error ? error.message : 'Smoke audio generation failed.')
+	process.exit(1)
+})
diff --git a/scripts/smoke/runLiveConversationSmoke.ts b/scripts/smoke/runLiveConversationSmoke.ts
new file mode 100644
index 0000000..adfa24b
--- /dev/null
+++ b/scripts/smoke/runLiveConversationSmoke.ts
@@ -0,0 +1,370 @@
+import { mkdir, readFile, writeFile } from 'node:fs/promises'
+import { dirname, join, resolve } from 'node:path'
+import { type Browser, type BrowserContext, chromium, type Page } from 'playwright'
+
+import {
+	collectRuntimeErrorMatches,
+	type RuntimeLogCapture,
+	startVercelRuntimeLogCapture
+} from './captureVercelRuntimeLogs'
+
+type SmokeMode = 'chat' | 'translate'
+
+type SmokeRunOptions = {
+	audioPath: string
+	captureVercelLogs: boolean
+	runChatScenario: boolean
+	targetUrl: string
+}
+
+type ScenarioResult = {
+	failures: string[]
+	mode: SmokeMode
+}
+
+const genericServerComponentErrorText =
+	'An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details.'
+
+const mobileViewports = [
+	{ height: 812, width: 375 },
+	{ height: 844, width: 390 }
+] as const
+
+function parseArguments(argumentList: string[]): SmokeRunOptions {
+	const parsedOptions: SmokeRunOptions = {
+		audioPath: resolve(process.cwd(), '.artifacts/smoke/fixtures/conversation_smoke.wav'),
+		captureVercelLogs: true,
+		runChatScenario: true,
+		targetUrl: 'https://lilac.chat'
+	}
+
+	for (let argumentIndex = 0; argumentIndex < argumentList.length; argumentIndex += 1) {
+		const argument = argumentList[argumentIndex]
+		switch (argument) {
+			case '--target-url': {
+				parsedOptions.targetUrl = argumentList[argumentIndex + 1] ?? parsedOptions.targetUrl
+				argumentIndex += 1
+				continue
+			}
+			case '--audio-path': {
+				parsedOptions.audioPath = resolve(argumentList[argumentIndex + 1] ?? parsedOptions.audioPath)
+				argumentIndex += 1
+				continue
+			}
+			case '--skip-vercel-logs': {
+				parsedOptions.captureVercelLogs = false
+				continue
+			}
+			case '--skip-chat': {
+				parsedOptions.runChatScenario = false
+				continue
+			}
+			default:
+				continue
+		}
+	}
+
+	return parsedOptions
+}
+
+function createTimestampLabel(): string {
+	return new Date().toISOString().replaceAll(':', '-').replaceAll('.', '-')
+}
+
+async function waitForCondition(
+	condition: () => Promise<boolean>,
+	timeoutMilliseconds: number,
+	errorMessage: string
+): Promise<void> {
+	const startTime = Date.now()
+	while (Date.now() - startTime <= timeoutMilliseconds) {
+		const passed = await condition()
+		if (passed) return
+		await new Promise(resolveTimeout => setTimeout(resolveTimeout, 350))
+	}
+	throw new Error(errorMessage)
+}
+
+async function waitForConnectionLive(page: Page): Promise<void> {
+	await waitForCondition(
+		async function hasLiveBadge(): Promise<boolean> {
+			const badgeText = await page.getByTestId('connection-state-badge').innerText()
+			return badgeText.toLowerCase().includes('live')
+		},
+		45_000,
+		'Connection did not become live within timeout.'
+	)
+}
+
+async function writeScenarioArtifacts(
+	page: Page,
+	artifactDirectoryPath: string,
+	mode: SmokeMode
+): Promise<string> {
+	const modeDirectoryPath = join(artifactDirectoryPath, mode)
+	await mkdir(modeDirectoryPath, { recursive: true })
+	const screenshotPath = join(modeDirectoryPath, 'screenshot.png')
+	const bodyTextPath = join(modeDirectoryPath, 'body.txt')
+	const htmlPath = join(modeDirectoryPath, 'page.html')
+
+	await page.screenshot({ fullPage: true, path: screenshotPath })
+	const bodyText = await page.locator('body').innerText()
+	await writeFile(bodyTextPath, bodyText, 'utf8')
+	await writeFile(htmlPath, await page.content(), 'utf8')
+
+	return bodyText
+}
+
+async function runChatScenario(page: Page, artifactDirectoryPath: string): Promise<ScenarioResult> {
+	const failures: string[] = []
+	try {
+		await page.getByTestId('mode-tab-chat').click()
+		await waitForConnectionLive(page)
+		await waitForCondition(
+			async function hasChatMessages(): Promise<boolean> {
+				const messageCount = await page.locator('[data-testid^="chat-message-"]').count()
+				return messageCount > 0
+			},
+			35_000,
+			'Chat mode did not receive transcript messages.'
+		)
+	} catch (error) {
+		failures.push(error instanceof Error ? error.message : 'Chat mode validation failed.')
+	}
+
+	const bodyText = await writeScenarioArtifacts(page, artifactDirectoryPath, 'chat')
+	if (bodyText.includes(genericServerComponentErrorText)) {
+		failures.push('Chat mode rendered generic Server Components error text.')
+	}
+
+	return {
+		failures,
+		mode: 'chat'
+	}
+}
+
+async function runTranslateScenario(
+	page: Page,
+	artifactDirectoryPath: string
+): Promise<ScenarioResult> {
+	const failures: string[] = []
+	let connectionFailureMessage: null | string = null
+	try {
+		await page.getByTestId('mode-tab-translate').click()
+		try {
+			await waitForConnectionLive(page)
+		} catch (error) {
+			connectionFailureMessage =
+				error instanceof Error ? error.message : 'Translate mode connection did not become live.'
+		}
+		await waitForCondition(
+			async function hasTranslateCard(): Promise<boolean> {
+				const cardCount = await page.locator('[data-testid^="translate-card-"]').count()
+				if (cardCount === 0) return false
+				const targetText = await page
+					.locator('[data-testid^="translate-card-target-"]')
+					.first()
+					.innerText()
+				return targetText.trim().length > 0
+			},
+			45_000,
+			'Translate mode did not produce translation card output.'
+		)
+	} catch (error) {
+		failures.push(error instanceof Error ? error.message : 'Translate mode validation failed.')
+	}
+	if (failures.length === 0 && connectionFailureMessage) {
+		console.warn(connectionFailureMessage)
+	}
+
+	const bodyText = await writeScenarioArtifacts(page, artifactDirectoryPath, 'translate')
+	if (bodyText.includes(genericServerComponentErrorText)) {
+		failures.push('Translate mode rendered generic Server Components error text.')
+	}
+
+	return {
+		failures,
+		mode: 'translate'
+	}
+}
+
+async function runMobileThemeChecks(
+	browser: Browser,
+	artifactDirectoryPath: string,
+	targetUrl: string
+): Promise<string[]> {
+	const failures: string[] = []
+	const layoutDirectoryPath = join(artifactDirectoryPath, 'layout')
+	await mkdir(layoutDirectoryPath, { recursive: true })
+
+	for (const colorScheme of ['light', 'dark'] as const) {
+		for (const viewport of mobileViewports) {
+			let context: BrowserContext | null = null
+			try {
+				context = await browser.newContext({
+					colorScheme,
+					permissions: ['microphone'],
+					viewport
+				})
+				const page = await context.newPage()
+				await page.goto(targetUrl, { timeout: 120_000, waitUntil: 'domcontentloaded' })
+
+				await page.getByTestId('mode-tab-translate').click()
+				await waitForCondition(
+					async function hasTranslateModeBadge(): Promise<boolean> {
+						const modeBadgeText = await page.getByTestId('mode-active-badge').innerText()
+						return modeBadgeText.toLowerCase().includes('translate')
+					},
+					10_000,
+					'Mode switch to translate did not complete.'
+				)
+
+				const hasHorizontalOverflow = await page.evaluate(function detectOverflow(): boolean {
+					return document.documentElement.scrollWidth > window.innerWidth + 1
+				})
+				const bodyText = await page.locator('body').innerText()
+
+				const screenshotPath = join(
+					layoutDirectoryPath,
+					`${colorScheme}-${viewport.width}x${viewport.height}.png`
+				)
+				await page.screenshot({ fullPage: true, path: screenshotPath })
+
+				if (hasHorizontalOverflow) {
+					failures.push(
+						`layout-${colorScheme}-${viewport.width}x${viewport.height}: horizontal overflow detected`
+					)
+				}
+				if (bodyText.includes(genericServerComponentErrorText)) {
+					failures.push(
+						`layout-${colorScheme}-${viewport.width}x${viewport.height}: generic Server Components error text rendered`
+					)
+				}
+			} catch (error) {
+				failures.push(
+					`layout-${colorScheme}-${viewport.width}x${viewport.height}: ${
+						error instanceof Error ? error.message : 'layout check failed'
+					}`
+				)
+			} finally {
+				if (context) await context.close()
+			}
+		}
+	}
+
+	return failures
+}
+
+async function resolveRuntimeMatches(
+	logCapture: null | RuntimeLogCapture
+): Promise<{ matches: string[]; stderrTail: string }> {
+	if (!logCapture) return { matches: [], stderrTail: '' }
+
+	const matches = await collectRuntimeErrorMatches(logCapture.stdoutPath)
+	const stderrContent = await readFile(logCapture.stderrPath, 'utf8')
+	const stderrLines = stderrContent
+		.split('\n')
+		.map(line => line.trim())
+		.filter(Boolean)
+		.slice(-20)
+
+	return {
+		matches,
+		stderrTail: stderrLines.join('\n')
+	}
+}
+
+async function main(): Promise<void> {
+	const options = parseArguments(process.argv.slice(2))
+	const artifactDirectoryPath = resolve(process.cwd(), '.artifacts/smoke', createTimestampLabel())
+	await mkdir(artifactDirectoryPath, { recursive: true })
+	await mkdir(dirname(options.audioPath), { recursive: true })
+
+	let logCapture: null | RuntimeLogCapture = null
+	if (options.captureVercelLogs) {
+		const runtimeCaptureInput = {
+			artifactDirectoryPath,
+			deploymentDomain: new URL(options.targetUrl).host,
+			...(process.env.VERCEL_TOKEN ? { vercelToken: process.env.VERCEL_TOKEN } : {})
+		}
+		logCapture = await startVercelRuntimeLogCapture({
+			...runtimeCaptureInput
+		})
+	}
+
+	const browser = await chromium.launch({
+		args: [
+			'--use-fake-ui-for-media-stream',
+			'--use-fake-device-for-media-stream',
+			`--use-file-for-fake-audio-capture=${options.audioPath}`
+		],
+		headless: true
+	})
+
+	const failureMessages: string[] = []
+	const scenarioResults: ScenarioResult[] = []
+
+	try {
+		const pageContext = await browser.newContext({
+			permissions: ['microphone']
+		})
+		const page = await pageContext.newPage()
+		await page.goto(options.targetUrl, { timeout: 120_000, waitUntil: 'domcontentloaded' })
+
+		if (options.runChatScenario) {
+			scenarioResults.push(await runChatScenario(page, artifactDirectoryPath))
+		}
+		scenarioResults.push(await runTranslateScenario(page, artifactDirectoryPath))
+		await pageContext.close()
+
+		const layoutFailures = await runMobileThemeChecks(
+			browser,
+			artifactDirectoryPath,
+			options.targetUrl
+		)
+		failureMessages.push(...layoutFailures)
+	} finally {
+		await browser.close()
+		if (logCapture) await logCapture.stop()
+	}
+
+	for (const scenarioResult of scenarioResults) {
+		for (const failureMessage of scenarioResult.failures) {
+			failureMessages.push(`${scenarioResult.mode}: ${failureMessage}`)
+		}
+	}
+
+	const runtimeSummary = await resolveRuntimeMatches(logCapture)
+	for (const runtimeMatch of runtimeSummary.matches) {
+		failureMessages.push(`runtime-log: ${runtimeMatch}`)
+	}
+
+	const summary = {
+		artifactDirectoryPath,
+		failures: failureMessages,
+		runtimeLog: logCapture
+			? {
+					stderrPath: logCapture.stderrPath,
+					stderrTail: runtimeSummary.stderrTail,
+					stdoutPath: logCapture.stdoutPath
+				}
+			: null,
+		scenarios: scenarioResults
+	}
+
+	await writeFile(
+		join(artifactDirectoryPath, 'summary.json'),
+		JSON.stringify(summary, null, 2),
+		'utf8'
+	)
+	console.log(JSON.stringify(summary, null, 2))
+
+	if (failureMessages.length > 0) {
+		throw new Error(`Smoke run failed with ${failureMessages.length} failure(s).`)
+	}
+}
+
+void main().catch(error => {
+	console.error(error instanceof Error ? error.message : 'Smoke runner failed.')
+	process.exit(1)
+})
diff --git a/src/app/(app)/ChatMode.tsx b/src/app/(app)/ChatMode.tsx
index 37f70ab..d2e0ab4 100644
--- a/src/app/(app)/ChatMode.tsx
+++ b/src/app/(app)/ChatMode.tsx
@@ -4,16 +4,24 @@ import { useEffect, useRef, useState } from 'react'
 
 import { useLilacModeRuntime } from '@/realtime/modeRuntimeStore'
 
+const defaultChatInstructions =
+	'You are Lilac. Help users communicate across languages. Keep answers concise, faithful, and practical.'
+
 export default function ChatMode() {
 	const {
 		chatInstructions,
+		chatSpeechOutputEnabled,
 		chatTranscripts,
 		chatTurnDelaySeconds,
 		remoteAudioStream,
 		setChatInstructions,
-		setChatTurnDelaySeconds
+		setChatSpeechOutputEnabled,
+		setChatTurnDelaySeconds,
+		submitChatTextInput,
+		voiceInputEnabled
 	} = useLilacModeRuntime()
 	const [draftInstructions, setDraftInstructions] = useState(chatInstructions)
+	const [draftMessage, setDraftMessage] = useState('')
 	const [saveMessage, setSaveMessage] = useState('')
 	const transcriptListRef = useRef<HTMLDivElement | null>(null)
 	const transcriptBottomRef = useRef<HTMLDivElement | null>(null)
@@ -42,7 +50,7 @@ export default function ChatMode() {
 				activeTranscriptListElement.scrollHeight -
 				activeTranscriptListElement.scrollTop -
 				activeTranscriptListElement.clientHeight
-			stayPinnedToBottomRef.current = distanceFromBottom < 120
+			stayPinnedToBottomRef.current = distanceFromBottom < 140
 		}
 
 		activeTranscriptListElement.addEventListener('scroll', onScroll)
@@ -65,76 +73,139 @@ export default function ChatMode() {
 		}
 		const playbackAudioElement = playbackAudioElementRef.current
 		if (!playbackAudioElement) return
-		playbackAudioElement.srcObject = remoteAudioStream
-		if (remoteAudioStream) {
+		playbackAudioElement.srcObject = chatSpeechOutputEnabled ? remoteAudioStream : null
+		if (chatSpeechOutputEnabled && remoteAudioStream) {
 			void playbackAudioElement.play().catch(() => {})
 		}
 		return () => {
 			playbackAudioElement.pause()
 			playbackAudioElement.srcObject = null
 		}
-	}, [remoteAudioStream])
+	}, [chatSpeechOutputEnabled, remoteAudioStream])
+
+	function submitMessage(): void {
+		const normalizedMessage = draftMessage.trim()
+		if (!normalizedMessage) return
+		submitChatTextInput(normalizedMessage)
+		setDraftMessage('')
+	}
 
 	return (
-		<div className="flex w-full max-w-5xl flex-col gap-4">
+		<div className="flex min-h-0 flex-1 flex-col gap-3">
 			<div
 				ref={transcriptListRef}
-				className="h-[54dvh] overflow-y-auto rounded-3xl border border-white/25 bg-[var(--lilac-elevated)]/80 p-4 shadow-xl backdrop-blur"
+				data-testid="chat-transcript-list"
+				className="min-h-0 flex-1 overflow-y-auto rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3 sm:p-4"
 			>
 				{chatTranscripts.length ? (
 					<div className="flex flex-col gap-3">
 						{chatTranscripts.map(message => {
 							const isUser = message.role === 'user'
 							const bubbleBaseClasses =
-								'max-w-[94%] whitespace-pre-wrap rounded-3xl px-4 py-3 text-sm leading-relaxed shadow-sm'
+								'max-w-[92%] whitespace-pre-wrap rounded-2xl px-3 py-2 text-sm leading-relaxed'
 							const bubbleClasses = isUser
 								? `${bubbleBaseClasses} self-end bg-[var(--lilac-ink)] text-[var(--lilac-surface)]`
-								: `${bubbleBaseClasses} self-start border border-white/30 bg-white/80 text-[var(--lilac-ink)] dark:bg-white/12`
-							const label = isUser ? 'You' : 'Lilac'
+								: `${bubbleBaseClasses} self-start border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] text-[var(--lilac-ink)]`
 							return (
-								<div key={message.id} className="flex flex-col gap-1">
+								<div
+									key={message.id}
+									className="flex flex-col gap-1"
+									data-testid={`chat-message-${message.id}`}
+								>
 									<div
 										className={`px-1 font-semibold text-[10px] uppercase tracking-[0.16em] ${
 											isUser ? 'text-right text-[var(--lilac-ink-muted)]' : 'text-[var(--lilac-ink-muted)]'
 										}`}
 									>
-										{label}
+										{isUser ? 'You' : 'Lilac'}
 										{message.status === 'streaming' ? <span className="ml-1 opacity-60">•</span> : null}
 									</div>
-									<div className={bubbleClasses}>{message.text.trim() || '…'}</div>
+									<div className={bubbleClasses} data-testid={`chat-message-text-${message.id}`}>
+										{message.text.trim() || '…'}
+									</div>
 								</div>
 							)
 						})}
 						<div ref={transcriptBottomRef} />
 					</div>
 				) : (
-					<div className="flex h-full items-center justify-center text-[var(--lilac-ink-muted)] text-sm">
-						Speak to start chatting with Lilac.
+					<div
+						className="flex h-full items-center justify-center text-[var(--lilac-ink-muted)] text-sm"
+						data-testid="chat-empty-state"
+					>
+						Start with voice or type below.
 					</div>
 				)}
 			</div>
 
-			<div className="grid gap-4 md:grid-cols-2">
-				<div className="rounded-3xl border border-white/25 bg-[var(--lilac-elevated)]/80 p-4 shadow-lg backdrop-blur">
-					<div className="mb-2 font-semibold text-[var(--lilac-ink-muted)] text-sm uppercase tracking-[0.12em]">
+			<div className="grid gap-3 lg:grid-cols-2">
+				<div className="rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3">
+					<div className="mb-2 flex items-center justify-between gap-2">
+						<div className="font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.12em]">
+							Speech output
+						</div>
+						<button
+							type="button"
+							aria-pressed={chatSpeechOutputEnabled}
+							data-testid="chat-speech-output-toggle"
+							className={`cursor-pointer rounded-lg px-3 py-2 font-semibold text-xs uppercase tracking-[0.1em] transition ${
+								chatSpeechOutputEnabled
+									? 'bg-[var(--lilac-direction-primary)] text-white'
+									: 'bg-[var(--lilac-card-muted)] text-[var(--lilac-ink-muted)]'
+							}`}
+							onClick={() => setChatSpeechOutputEnabled(!chatSpeechOutputEnabled)}
+						>
+							{chatSpeechOutputEnabled ? 'On' : 'Off'}
+						</button>
+					</div>
+					<p className="mb-3 text-[var(--lilac-ink-muted)] text-sm">
+						Voice input is {voiceInputEnabled ? 'enabled' : 'disabled'} globally.
+					</p>
+
+					<div className="mb-2 font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.12em]">
+						End-of-speech delay
+					</div>
+					<input
+						className="lilac-range"
+						data-testid="chat-turn-delay-slider"
+						max={6}
+						min={0.2}
+						onChange={event => setChatTurnDelaySeconds(Number.parseFloat(event.target.value))}
+						step={0.1}
+						type="range"
+						value={chatTurnDelaySeconds}
+					/>
+					<div className="mt-2 flex items-center justify-between text-sm">
+						<span className="text-[var(--lilac-ink-muted)]">Delay</span>
+						<span className="font-semibold text-[var(--lilac-ink)]">
+							{chatTurnDelaySeconds.toFixed(1)}s
+						</span>
+					</div>
+				</div>
+
+				<div className="rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3">
+					<div className="mb-2 font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.12em]">
 						Instructions
 					</div>
 					<textarea
-						className="h-36 w-full resize-none rounded-2xl border border-white/30 bg-white/80 px-3 py-2 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-white/60 dark:bg-white/10"
+						className="h-28 w-full resize-none rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] px-3 py-2 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-[var(--lilac-border-strong)]"
+						data-testid="chat-instructions-input"
 						onChange={event => setDraftInstructions(event.target.value)}
 						value={draftInstructions}
 					/>
 					<div className="mt-3 flex items-center justify-end gap-2">
 						<button
 							type="button"
-							className="cursor-pointer rounded-full px-3 py-2 font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.12em] transition hover:bg-white/40"
+							data-testid="chat-instructions-reset"
+							className="cursor-pointer rounded-lg px-3 py-2 font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.12em] transition hover:bg-[var(--lilac-card-muted)]"
 							onClick={() => setDraftInstructions(chatInstructions)}
 						>
 							Reset
 						</button>
 						<button
 							type="button"
-							className="cursor-pointer rounded-full bg-[var(--lilac-ink)] px-4 py-2 font-semibold text-[var(--lilac-surface)] text-xs uppercase tracking-[0.12em] transition hover:shadow"
+							data-testid="chat-instructions-save"
+							className="cursor-pointer rounded-lg bg-[var(--lilac-ink)] px-4 py-2 font-semibold text-[var(--lilac-surface)] text-xs uppercase tracking-[0.12em] transition hover:opacity-90"
 							onClick={() => {
 								setChatInstructions(draftInstructions.trim() || defaultChatInstructions)
 								setSaveMessage('Saved')
@@ -149,34 +220,34 @@ export default function ChatMode() {
 						</output>
 					) : null}
 				</div>
+			</div>
 
-				<div className="rounded-3xl border border-white/25 bg-[var(--lilac-elevated)]/80 p-4 shadow-lg backdrop-blur">
-					<div className="mb-2 font-semibold text-[var(--lilac-ink-muted)] text-sm uppercase tracking-[0.12em]">
-						End-of-speech delay
-					</div>
-					<p className="mb-4 text-[var(--lilac-ink-muted)] text-sm">
-						Increase this if Lilac responds before you finish speaking.
-					</p>
+			<form
+				className="sticky bottom-0 z-10 rounded-2xl border border-[var(--lilac-border)] bg-[color-mix(in_oklab,var(--lilac-card)_84%,transparent)] p-2 backdrop-blur"
+				onSubmit={event => {
+					event.preventDefault()
+					submitMessage()
+				}}
+			>
+				<div className="flex items-center gap-2">
 					<input
-						className="lilac-range"
-						max={6}
-						min={0.2}
-						onChange={event => setChatTurnDelaySeconds(Number.parseFloat(event.target.value))}
-						step={0.1}
-						type="range"
-						value={chatTurnDelaySeconds}
+						type="text"
+						value={draftMessage}
+						data-testid="chat-text-input"
+						onChange={event => setDraftMessage(event.target.value)}
+						placeholder="Type a message"
+						className="h-11 w-full rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] px-3 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-[var(--lilac-border-strong)]"
 					/>
-					<div className="mt-3 flex items-center justify-between text-sm">
-						<span className="text-[var(--lilac-ink-muted)]">Delay</span>
-						<span className="font-semibold text-[var(--lilac-ink)]">
-							{chatTurnDelaySeconds.toFixed(1)}s
-						</span>
-					</div>
+					<button
+						type="submit"
+						data-testid="chat-text-send"
+						className="h-11 cursor-pointer rounded-xl bg-[var(--lilac-ink)] px-4 font-semibold text-[var(--lilac-surface)] text-xs uppercase tracking-[0.1em] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+						disabled={!draftMessage.trim()}
+					>
+						Send
+					</button>
 				</div>
-			</div>
+			</form>
 		</div>
 	)
 }
-
-const defaultChatInstructions =
-	'You are Lilac. Help users communicate across languages. Keep answers concise, faithful, and practical.'
diff --git a/src/app/(app)/ModeShell.tsx b/src/app/(app)/ModeShell.tsx
index 2bad4d2..3cad709 100644
--- a/src/app/(app)/ModeShell.tsx
+++ b/src/app/(app)/ModeShell.tsx
@@ -3,7 +3,6 @@
 import type { ReactNode } from 'react'
 
 import ChatMode from '@/app/(app)/ChatMode'
-import TranscribeMode from '@/app/(app)/TranscribeMode'
 import TranslateMode from '@/app/(app)/TranslateMode'
 import { useLilacModeRuntime } from '@/realtime/modeRuntimeStore'
 import type { LilacMode } from '@/realtime/sessionTypes'
@@ -14,8 +13,6 @@ function renderMode(mode: LilacMode): ReactNode {
 			return <ChatMode />
 		case 'translate':
 			return <TranslateMode />
-		case 'transcribe':
-			return <TranscribeMode />
 		default:
 			return <ChatMode />
 	}
@@ -41,85 +38,106 @@ export default function ModeShell() {
 		errorMessage,
 		mode,
 		reconnectCurrentMode,
-		setMode
+		setMode,
+		setVoiceInputEnabled,
+		voiceInputEnabled
 	} = useLilacModeRuntime()
 
 	return (
-		<div className="relative flex h-svh flex-col overflow-hidden">
-			<div className="-z-10 pointer-events-none absolute inset-0 bg-[radial-gradient(220%_200%_at_50%_-12%,rgba(255,255,255,0.96)_0%,rgba(247,243,231,0.98)_48%,rgba(247,243,231,1)_72%,rgba(188,226,255,0.65)_100%)] dark:bg-[radial-gradient(220%_200%_at_50%_-12%,rgba(33,39,56,0.95)_0%,rgba(18,22,32,0.98)_52%,rgba(14,18,27,1)_78%,rgba(39,55,92,0.62)_100%)]" />
-			<div className="-z-10 pointer-events-none absolute inset-x-0 top-0 h-[26dvh] bg-gradient-to-b from-white/65 via-transparent to-transparent dark:from-[#27324a]/50" />
-			<div className="-z-10 pointer-events-none absolute inset-x-0 bottom-0 h-[30dvh] bg-gradient-to-t from-[var(--lilac-surface)] via-transparent to-transparent" />
+		<div className="relative min-h-[100dvh] bg-[var(--lilac-surface)]">
+			<div className="-z-10 pointer-events-none absolute inset-0 bg-[radial-gradient(140%_110%_at_50%_-8%,rgba(248,252,255,0.95)_0%,rgba(236,244,255,0.86)_28%,rgba(231,237,246,0.4)_55%,rgba(231,237,246,0)_80%)] dark:bg-[radial-gradient(150%_120%_at_50%_-8%,rgba(57,80,112,0.45)_0%,rgba(26,39,57,0.35)_34%,rgba(14,19,29,0)_80%)]" />
+			<div className="relative z-10 flex min-h-[100dvh] flex-col">
+				<header className="sticky top-0 z-20 border-[var(--lilac-border)] border-b bg-[color-mix(in_oklab,var(--lilac-surface)_86%,transparent)] px-3 pt-[max(0.75rem,env(safe-area-inset-top))] pb-3 backdrop-blur sm:px-6">
+					<div className="mx-auto flex w-full max-w-5xl flex-col gap-3">
+						<div className="flex items-center justify-between gap-3">
+							<div className="font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.18em]">
+								Lilac
+							</div>
+							<div className="flex items-center gap-2">
+								<div
+									className="rounded-full border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-3 py-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]"
+									data-testid="mode-active-badge"
+								>
+									{mode}
+								</div>
+								<div
+									className="rounded-full border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-3 py-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]"
+									data-testid="connection-state-badge"
+								>
+									{getConnectionStateLabel(connectionState)}
+								</div>
+							</div>
+						</div>
+
+						<div className="flex items-center justify-between gap-2 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] p-1">
+							<div className="flex items-center gap-1" role="tablist">
+								{(['chat', 'translate'] as const).map(modeOption => (
+									<button
+										key={modeOption}
+										type="button"
+										aria-pressed={mode === modeOption}
+										data-testid={`mode-tab-${modeOption}`}
+										className={`cursor-pointer rounded-xl px-3 py-2 font-semibold text-xs uppercase tracking-[0.1em] transition ${
+											mode === modeOption
+												? 'bg-[var(--lilac-ink)] text-[var(--lilac-surface)]'
+												: 'text-[var(--lilac-ink-muted)] hover:bg-[var(--lilac-card-muted)] hover:text-[var(--lilac-ink)]'
+										}`}
+										onClick={() => setMode(modeOption)}
+									>
+										{modeOption === 'translate' ? 'Live Translate' : 'Chat'}
+									</button>
+								))}
+							</div>
 
-			<header
-				className="absolute inset-x-0 z-20 flex items-center justify-between px-6"
-				style={{ top: 'calc(env(safe-area-inset-top, 0px) + 1.5rem)' }}
-			>
-				<div className="font-semibold text-[var(--lilac-ink-muted)] text-sm uppercase tracking-[0.16em]">
-					Lilac
-				</div>
-				<div className="rounded-full border border-white/25 bg-[var(--lilac-elevated)] p-1 shadow backdrop-blur">
-					<div className="flex items-center gap-1" role="tablist">
-						{(['chat', 'translate', 'transcribe'] as const).map(modeOption => (
 							<button
-								key={modeOption}
 								type="button"
-								aria-pressed={mode === modeOption}
-								className={`cursor-pointer rounded-full px-3 py-2 font-semibold text-xs uppercase tracking-[0.08em] transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 ${
-									mode === modeOption
-										? 'bg-white text-[var(--lilac-ink)] shadow'
-										: 'text-[var(--lilac-ink-muted)] hover:text-[var(--lilac-ink)]'
+								aria-pressed={voiceInputEnabled}
+								data-testid="global-voice-input-toggle"
+								className={`cursor-pointer rounded-xl px-3 py-2 font-semibold text-xs uppercase tracking-[0.1em] transition ${
+									voiceInputEnabled
+										? 'bg-[var(--lilac-direction-primary)] text-white'
+										: 'bg-[var(--lilac-card-muted)] text-[var(--lilac-ink-muted)]'
 								}`}
-								onClick={() => setMode(modeOption)}
+								onClick={() => setVoiceInputEnabled(!voiceInputEnabled)}
 							>
-								{modeOption}
+								Voice {voiceInputEnabled ? 'On' : 'Off'}
 							</button>
-						))}
-					</div>
-				</div>
-			</header>
-
-			<div className="relative z-10 flex flex-1 items-center justify-center px-6 pt-28 pb-24">
-				<div className="flex w-full max-w-6xl flex-col gap-4">
-					<div className="flex items-center justify-between gap-4">
-						<div className="rounded-full border border-white/25 bg-[var(--lilac-elevated)] px-3 py-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em] shadow-sm">
-							{mode}
 						</div>
-						<div className="rounded-full border border-white/25 bg-[var(--lilac-elevated)] px-3 py-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em] shadow-sm">
-							{getConnectionStateLabel(connectionState)}
+
+						<div className="flex items-center justify-end gap-2">
+							<button
+								type="button"
+								data-testid="clear-mode-history"
+								className="cursor-pointer rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-3 py-2 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em] transition hover:bg-[var(--lilac-card-muted)]"
+								onClick={clearCurrentModeHistory}
+							>
+								Clear
+							</button>
+							<button
+								type="button"
+								data-testid="reconnect-mode"
+								className="cursor-pointer rounded-xl bg-[var(--lilac-ink)] px-4 py-2 font-semibold text-[10px] text-[var(--lilac-surface)] uppercase tracking-[0.14em] transition hover:opacity-90"
+								onClick={reconnectCurrentMode}
+							>
+								Reconnect
+							</button>
 						</div>
 					</div>
+				</header>
 
+				<main className="mx-auto flex min-h-0 w-full max-w-5xl flex-1 flex-col gap-3 px-3 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] sm:px-6">
 					{errorMessage ? (
-						<div className="rounded-2xl border border-red-300/60 bg-red-50/90 px-4 py-3 text-red-800 text-sm shadow-sm dark:border-red-500/40 dark:bg-red-900/25 dark:text-red-100">
+						<div
+							className="rounded-2xl border border-red-500/45 bg-red-100/70 px-4 py-3 text-red-900 text-sm dark:bg-red-950/35 dark:text-red-100"
+							data-testid="mode-error-banner"
+						>
 							{errorMessage}
 						</div>
 					) : null}
 
-					{renderMode(mode)}
-				</div>
+					<div className="flex min-h-0 flex-1 flex-col">{renderMode(mode)}</div>
+				</main>
 			</div>
-
-			<footer
-				className="absolute inset-x-0 z-10 flex justify-center px-6"
-				style={{ bottom: 'calc(env(safe-area-inset-bottom, 0px) + 1.5rem)' }}
-			>
-				<div className="flex items-center gap-2 rounded-full border border-white/25 bg-[var(--lilac-elevated)] p-1 shadow backdrop-blur">
-					<button
-						type="button"
-						className="cursor-pointer rounded-full px-3 py-2 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em] transition hover:bg-white/50 hover:text-[var(--lilac-ink)]"
-						onClick={clearCurrentModeHistory}
-					>
-						Clear
-					</button>
-					<button
-						type="button"
-						className="cursor-pointer rounded-full bg-[var(--lilac-ink)] px-4 py-2 font-semibold text-[10px] text-[var(--lilac-surface)] uppercase tracking-[0.12em] transition hover:shadow"
-						onClick={reconnectCurrentMode}
-					>
-						Reconnect
-					</button>
-				</div>
-			</footer>
 		</div>
 	)
 }
diff --git a/src/app/(app)/TranscribeMode.tsx b/src/app/(app)/TranscribeMode.tsx
deleted file mode 100644
index 2ddf98a..0000000
--- a/src/app/(app)/TranscribeMode.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-'use client'
-
-import { useEffect, useRef } from 'react'
-
-import { useLilacModeRuntime } from '@/realtime/modeRuntimeStore'
-import { languageOptions } from '@/realtime/sessionTypes'
-
-export default function TranscribeMode() {
-	const { getDirectionColor, setTranscribeSettings, transcribeCards, transcribeSettings } =
-		useLilacModeRuntime()
-	const transcriptListRef = useRef<HTMLDivElement | null>(null)
-	const transcriptBottomRef = useRef<HTMLDivElement | null>(null)
-	const stayPinnedToBottomRef = useRef(true)
-
-	useEffect(() => {
-		const transcriptListElement = transcriptListRef.current
-		if (!transcriptListElement) return
-		const activeTranscriptListElement = transcriptListElement
-
-		function onScroll(): void {
-			const distanceFromBottom =
-				activeTranscriptListElement.scrollHeight -
-				activeTranscriptListElement.scrollTop -
-				activeTranscriptListElement.clientHeight
-			stayPinnedToBottomRef.current = distanceFromBottom < 120
-		}
-
-		activeTranscriptListElement.addEventListener('scroll', onScroll)
-		onScroll()
-		return () => {
-			activeTranscriptListElement.removeEventListener('scroll', onScroll)
-		}
-	}, [])
-
-	useEffect(() => {
-		if (!stayPinnedToBottomRef.current) return
-		void transcribeCards
-		transcriptBottomRef.current?.scrollIntoView({ behavior: 'auto' })
-	}, [transcribeCards])
-
-	return (
-		<div className="flex w-full max-w-5xl flex-col gap-4">
-			<div
-				ref={transcriptListRef}
-				className="h-[58dvh] overflow-y-auto rounded-3xl border border-white/25 bg-[var(--lilac-elevated)]/80 p-4 shadow-xl backdrop-blur"
-			>
-				{transcribeCards.length ? (
-					<div className="flex flex-col gap-3">
-						{transcribeCards.map(card => (
-							<article
-								key={card.id}
-								className="rounded-2xl border border-white/25 bg-white/70 p-3 shadow-sm dark:bg-white/10"
-							>
-								<div className="mb-2 flex items-center justify-between gap-2">
-									<span
-										className="rounded-full px-2 py-1 font-semibold text-[10px] uppercase tracking-[0.12em]"
-										style={{
-											backgroundColor: getDirectionColor(card.direction),
-											color: 'white'
-										}}
-									>
-										{card.sourceLanguageCode} {'->'} {card.targetLanguageCode}
-									</span>
-									<span className="font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
-										{card.status}
-									</span>
-								</div>
-								<div className="grid gap-2 md:grid-cols-2">
-									<div className="rounded-xl bg-[var(--lilac-surface)]/70 px-3 py-2">
-										<div className="mb-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
-											Original
-										</div>
-										<p className="whitespace-pre-wrap text-[var(--lilac-ink)] text-sm leading-relaxed">
-											{card.sourceText.trim() || '…'}
-										</p>
-									</div>
-									<div className="rounded-xl bg-[var(--lilac-surface)]/70 px-3 py-2">
-										<div className="mb-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
-											Translation
-										</div>
-										<p className="whitespace-pre-wrap text-[var(--lilac-ink)] text-sm leading-relaxed">
-											{card.translatedText.trim() ||
-												(card.status === 'error' ? card.errorMessage : 'Translating…')}
-										</p>
-									</div>
-								</div>
-							</article>
-						))}
-						<div ref={transcriptBottomRef} />
-					</div>
-				) : (
-					<div className="flex h-full items-center justify-center text-[var(--lilac-ink-muted)] text-sm">
-						Live transcription + translation will appear here.
-					</div>
-				)}
-			</div>
-
-			<div className="rounded-3xl border border-white/25 bg-[var(--lilac-elevated)]/80 p-4 shadow-lg backdrop-blur">
-				<label className="flex flex-col gap-2 md:max-w-sm">
-					<span className="font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.12em]">
-						Target language
-					</span>
-					<select
-						className="rounded-2xl border border-white/30 bg-white/80 px-3 py-2 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-white/60"
-						onChange={event => setTranscribeSettings({ targetLanguageCode: event.target.value })}
-						value={transcribeSettings.targetLanguageCode}
-					>
-						{languageOptions.map(option => (
-							<option key={option.code} value={option.code}>
-								{option.label}
-							</option>
-						))}
-					</select>
-				</label>
-			</div>
-		</div>
-	)
-}
diff --git a/src/app/(app)/TranslateMode.tsx b/src/app/(app)/TranslateMode.tsx
index f2d2d8c..9957498 100644
--- a/src/app/(app)/TranslateMode.tsx
+++ b/src/app/(app)/TranslateMode.tsx
@@ -1,13 +1,20 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { useLilacModeRuntime } from '@/realtime/modeRuntimeStore'
 import { languageOptions } from '@/realtime/sessionTypes'
 
 export default function TranslateMode() {
-	const { getDirectionColor, setTranslateSettings, translateCards, translateSettings } =
-		useLilacModeRuntime()
+	const {
+		getDirectionColor,
+		setTranslateSettings,
+		submitTranslateTextInput,
+		translateCards,
+		translateSettings,
+		voiceInputEnabled
+	} = useLilacModeRuntime()
+	const [draftMessage, setDraftMessage] = useState('')
 	const transcriptListRef = useRef<HTMLDivElement | null>(null)
 	const transcriptBottomRef = useRef<HTMLDivElement | null>(null)
 	const stayPinnedToBottomRef = useRef(true)
@@ -22,7 +29,7 @@ export default function TranslateMode() {
 				activeTranscriptListElement.scrollHeight -
 				activeTranscriptListElement.scrollTop -
 				activeTranscriptListElement.clientHeight
-			stayPinnedToBottomRef.current = distanceFromBottom < 120
+			stayPinnedToBottomRef.current = distanceFromBottom < 140
 		}
 
 		activeTranscriptListElement.addEventListener('scroll', onScroll)
@@ -38,18 +45,27 @@ export default function TranslateMode() {
 		transcriptBottomRef.current?.scrollIntoView({ behavior: 'auto' })
 	}, [translateCards])
 
+	function submitMessage(): void {
+		const normalizedMessage = draftMessage.trim()
+		if (!normalizedMessage) return
+		submitTranslateTextInput(normalizedMessage)
+		setDraftMessage('')
+	}
+
 	return (
-		<div className="flex w-full max-w-5xl flex-col gap-4">
+		<div className="flex min-h-0 flex-1 flex-col gap-3">
 			<div
 				ref={transcriptListRef}
-				className="h-[58dvh] overflow-y-auto rounded-3xl border border-white/25 bg-[var(--lilac-elevated)]/80 p-4 shadow-xl backdrop-blur"
+				data-testid="translate-card-list"
+				className="min-h-0 flex-1 overflow-y-auto rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3 sm:p-4"
 			>
 				{translateCards.length ? (
 					<div className="flex flex-col gap-3">
 						{translateCards.map(card => (
 							<article
 								key={card.id}
-								className="rounded-2xl border border-white/25 bg-white/70 p-3 shadow-sm dark:bg-white/10"
+								data-testid={`translate-card-${card.id}`}
+								className="rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] p-3"
 							>
 								<div className="mb-2 flex items-center justify-between gap-2">
 									<span
@@ -61,24 +77,38 @@ export default function TranslateMode() {
 									>
 										{card.direction.replaceAll('_', ' ')}
 									</span>
-									<span className="font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
-										{card.status}
-									</span>
+									<div className="flex items-center gap-2">
+										<span className="font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
+											{card.inputOrigin}
+										</span>
+										<span
+											className="font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]"
+											data-testid={`translate-card-status-${card.id}`}
+										>
+											{card.status}
+										</span>
+									</div>
 								</div>
-								<div className="grid gap-2 md:grid-cols-2">
-									<div className="rounded-xl bg-[var(--lilac-surface)]/70 px-3 py-2">
+								<div className="grid gap-2 sm:grid-cols-2">
+									<div className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] px-3 py-2">
 										<div className="mb-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
 											{card.sourceLanguageCode}
 										</div>
-										<p className="whitespace-pre-wrap text-[var(--lilac-ink)] text-sm leading-relaxed">
+										<p
+											className="whitespace-pre-wrap text-[var(--lilac-ink)] text-sm leading-relaxed"
+											data-testid={`translate-card-source-${card.id}`}
+										>
 											{card.sourceText.trim() || '…'}
 										</p>
 									</div>
-									<div className="rounded-xl bg-[var(--lilac-surface)]/70 px-3 py-2">
+									<div className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] px-3 py-2">
 										<div className="mb-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
 											{card.targetLanguageCode}
 										</div>
-										<p className="whitespace-pre-wrap text-[var(--lilac-ink)] text-sm leading-relaxed">
+										<p
+											className="whitespace-pre-wrap text-[var(--lilac-ink)] text-sm leading-relaxed"
+											data-testid={`translate-card-target-${card.id}`}
+										>
 											{card.translatedText.trim() ||
 												(card.status === 'error' ? card.errorMessage : 'Translating…')}
 										</p>
@@ -89,19 +119,23 @@ export default function TranslateMode() {
 						<div ref={transcriptBottomRef} />
 					</div>
 				) : (
-					<div className="flex h-full items-center justify-center text-[var(--lilac-ink-muted)] text-sm">
-						Live pairwise translation cards will appear here.
+					<div
+						className="flex h-full items-center justify-center text-[var(--lilac-ink-muted)] text-sm"
+						data-testid="translate-empty-state"
+					>
+						Live translation cards appear here.
 					</div>
 				)}
 			</div>
 
-			<div className="grid gap-3 rounded-3xl border border-white/25 bg-[var(--lilac-elevated)]/80 p-4 shadow-lg backdrop-blur md:grid-cols-2">
+			<div className="grid gap-3 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3 sm:grid-cols-2">
 				<label className="flex flex-col gap-2">
 					<span className="font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.12em]">
 						Primary language
 					</span>
 					<select
-						className="rounded-2xl border border-white/30 bg-white/80 px-3 py-2 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-white/60"
+						className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] px-3 py-2 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-[var(--lilac-border-strong)]"
+						data-testid="translate-primary-language"
 						onChange={event => {
 							const nextPrimary = event.target.value
 							const nextSecondary =
@@ -128,7 +162,8 @@ export default function TranslateMode() {
 						Secondary language
 					</span>
 					<select
-						className="rounded-2xl border border-white/30 bg-white/80 px-3 py-2 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-white/60"
+						className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] px-3 py-2 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-[var(--lilac-border-strong)]"
+						data-testid="translate-secondary-language"
 						onChange={event => {
 							const nextSecondary = event.target.value
 							const nextPrimary =
@@ -149,7 +184,40 @@ export default function TranslateMode() {
 						))}
 					</select>
 				</label>
+
+				<div className="sm:col-span-2">
+					<p className="text-[var(--lilac-ink-muted)] text-xs">
+						Voice input is {voiceInputEnabled ? 'enabled' : 'disabled'} globally.
+					</p>
+				</div>
 			</div>
+
+			<form
+				className="sticky bottom-0 z-10 rounded-2xl border border-[var(--lilac-border)] bg-[color-mix(in_oklab,var(--lilac-card)_84%,transparent)] p-2 backdrop-blur"
+				onSubmit={event => {
+					event.preventDefault()
+					submitMessage()
+				}}
+			>
+				<div className="flex items-center gap-2">
+					<input
+						type="text"
+						value={draftMessage}
+						data-testid="translate-text-input"
+						onChange={event => setDraftMessage(event.target.value)}
+						placeholder="Type text to translate"
+						className="h-11 w-full rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] px-3 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-[var(--lilac-border-strong)]"
+					/>
+					<button
+						type="submit"
+						data-testid="translate-text-send"
+						className="h-11 cursor-pointer rounded-xl bg-[var(--lilac-ink)] px-4 font-semibold text-[var(--lilac-surface)] text-xs uppercase tracking-[0.1em] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+						disabled={!draftMessage.trim()}
+					>
+						Send
+					</button>
+				</div>
+			</form>
 		</div>
 	)
 }
diff --git a/src/app/actions/realtime.ts b/src/app/actions/realtime.ts
index 7441d05..09926d3 100644
--- a/src/app/actions/realtime.ts
+++ b/src/app/actions/realtime.ts
@@ -1,17 +1,13 @@
 'use server'
 
+import { defaultTranscriptionModel } from '@/realtime/modelConfig'
 import {
-	CompactTranslationContextActionInputSchema,
-	CompactTranslationContextActionOutputSchema,
 	CreateRealtimeClientSecretActionInputSchema,
 	CreateRealtimeClientSecretActionOutputSchema,
-	CreateRealtimeTranscriptionSessionActionInputSchema,
-	CreateRealtimeTranscriptionSessionActionOutputSchema,
-	parseClientSecretResponse,
-	TranslateUtteranceActionInputSchema,
-	TranslateUtteranceActionOutputSchema
+	CreateTranslateRealtimeClientSecretActionInputSchema,
+	CreateTranslateRealtimeClientSecretActionOutputSchema,
+	parseClientSecretResponse
 } from '@/realtime/schemas'
-import type { TranslationContextEntry } from '@/realtime/sessionTypes'
 import env from '~/env'
 
 const openAiApiBaseUrl = 'https://api.openai.com/v1'
@@ -20,6 +16,30 @@ const defaultRequestHeaders = {
 	'Content-Type': 'application/json'
 } satisfies HeadersInit
 
+type OpenAiErrorPayload = {
+	code?: string
+	message: string
+	param?: string
+	status: number
+	type?: string
+}
+
+class OpenAiRequestError extends Error {
+	public code?: string
+	public param?: string
+	public status: number
+	public type?: string
+
+	public constructor(payload: OpenAiErrorPayload) {
+		super(payload.message)
+		this.name = 'OpenAiRequestError'
+		if (typeof payload.code === 'string') this.code = payload.code
+		if (typeof payload.param === 'string') this.param = payload.param
+		this.status = payload.status
+		if (typeof payload.type === 'string') this.type = payload.type
+	}
+}
+
 async function parseJsonResponse(response: Response): Promise<unknown> {
 	const responseText = await response.text()
 	if (!responseText.trim()) return {}
@@ -42,87 +62,85 @@ async function postOpenAi(path: string, body: unknown): Promise<unknown> {
 	if (!response.ok) {
 		const fallbackMessage = `OpenAI request failed (${response.status})`
 		if (typeof payload === 'object' && payload !== null && 'error' in payload) {
-			const candidate = (payload as { error?: { message?: string } }).error?.message
-			throw new Error(candidate || fallbackMessage)
+			const openAiError = (
+				payload as {
+					error?: {
+						code?: string
+						message?: string
+						param?: string
+						type?: string
+					}
+				}
+			).error
+			throw new OpenAiRequestError({
+				message: openAiError?.message || fallbackMessage,
+				status: response.status,
+				...(openAiError?.code ? { code: openAiError.code } : {}),
+				...(openAiError?.param ? { param: openAiError.param } : {}),
+				...(openAiError?.type ? { type: openAiError.type } : {})
+			})
 		}
-		throw new Error(fallbackMessage)
+		throw new OpenAiRequestError({
+			message: fallbackMessage,
+			status: response.status
+		})
 	}
 
 	return payload
 }
 
-function extractResponseOutputText(responsePayload: unknown): string {
-	if (typeof responsePayload !== 'object' || responsePayload === null) {
-		throw new Error('OpenAI Responses payload was not an object')
-	}
-
-	const payload = responsePayload as {
-		output?: Array<{
-			content?: Array<{
-				text?: string
-				type?: string
-			}>
-		}>
-		output_text?: string
-	}
-
-	if (typeof payload.output_text === 'string' && payload.output_text.trim().length > 0) {
-		return payload.output_text.trim()
-	}
-
-	const outputItems = Array.isArray(payload.output) ? payload.output : []
-	for (const outputItem of outputItems) {
-		const contentParts = Array.isArray(outputItem.content) ? outputItem.content : []
-		for (const contentPart of contentParts) {
-			if (contentPart.type === 'output_text' && typeof contentPart.text === 'string') {
-				const normalizedText = contentPart.text.trim()
-				if (normalizedText.length > 0) return normalizedText
-			}
-		}
-	}
-
-	throw new Error('OpenAI did not return output text for translation')
-}
-
-function renderContextForPrompt(context: TranslationContextEntry[]): string {
-	if (!context.length) return '[]'
-	return JSON.stringify(context)
-}
-
-function createTranslatePrompt(
-	input: ReturnType<typeof TranslateUtteranceActionInputSchema.parse>
+function createTranslateInstructions(
+	primaryLanguageCode: string,
+	secondaryLanguageCode: string
 ): string {
-	const contextJson = renderContextForPrompt(input.context)
-	const escapedUtteranceText = input.utteranceText
-
-	if (input.settings.mode === 'translate') {
-		return [
-			'You are a deterministic translation engine for a two-language live conversation.',
-			'Return JSON only.',
-			`Primary language code: ${input.settings.primaryLanguageCode}.`,
-			`Secondary language code: ${input.settings.secondaryLanguageCode}.`,
-			'Detect whether the utterance is in primary or secondary language and translate to the opposite language.',
-			'Direction must be exactly one of: primary_to_secondary, secondary_to_primary.',
-			'Never add commentary or extra keys.',
-			'Use recent context to keep references consistent.',
-			`Recent context (JSON): ${contextJson}`,
-			`Utterance: ${escapedUtteranceText}`
-		].join('\n')
-	}
-
 	return [
-		'You are a deterministic transcription translation engine for one-way translation.',
-		'Return JSON only.',
-		`Target language code: ${input.settings.targetLanguageCode}.`,
-		'Detect the utterance language and translate only into the target language.',
-		'Direction must be exactly: to_target.',
-		'Never add commentary or extra keys.',
-		'Use recent context to keep references consistent.',
-		`Recent context (JSON): ${contextJson}`,
-		`Utterance: ${escapedUtteranceText}`
+		'You are Lilac, a deterministic live translator.',
+		`Allowed language pair: ${primaryLanguageCode} and ${secondaryLanguageCode}.`,
+		'For each user utterance, detect source language within the pair and translate to the opposite language.',
+		'Always call publish_translation exactly once per utterance.',
+		'Never produce assistant text outside the function call.',
+		'Preserve speaker intent, tone, and named entities.',
+		'No summaries, no commentary, no extra fields.'
 	].join('\n')
 }
 
+function buildPublishTranslationToolDefinition(): Record<string, unknown> {
+	return {
+		description: 'Publish exactly one translation card for the utterance currently being processed.',
+		name: 'publish_translation',
+		parameters: {
+			additionalProperties: false,
+			properties: {
+				direction: {
+					enum: ['primary_to_secondary', 'secondary_to_primary'],
+					type: 'string'
+				},
+				sourceLanguageCode: {
+					type: 'string'
+				},
+				sourceText: {
+					type: 'string'
+				},
+				targetLanguageCode: {
+					type: 'string'
+				},
+				translatedText: {
+					type: 'string'
+				}
+			},
+			required: [
+				'sourceText',
+				'sourceLanguageCode',
+				'targetLanguageCode',
+				'translatedText',
+				'direction'
+			],
+			type: 'object'
+		},
+		type: 'function'
+	}
+}
+
 export async function createRealtimeClientSecretAction(input?: unknown): Promise<{
 	expiresAt: number
 	value: string
@@ -138,8 +156,11 @@ export async function createRealtimeClientSecretAction(input?: unknown): Promise
 		session: {
 			audio: {
 				input: {
+					noise_reduction: {
+						type: 'near_field'
+					},
 					transcription: {
-						model: 'gpt-4o-transcribe'
+						model: defaultTranscriptionModel
 					},
 					turn_detection: {
 						silence_duration_ms: silenceDurationMilliseconds,
@@ -152,7 +173,7 @@ export async function createRealtimeClientSecretAction(input?: unknown): Promise
 			},
 			instructions: parsedInput.instructions ?? '',
 			model: parsedInput.model,
-			output_modalities: ['audio', 'text'],
+			output_modalities: [parsedInput.speechOutputEnabled ? 'audio' : 'text'],
 			type: 'realtime'
 		}
 	})
@@ -161,152 +182,49 @@ export async function createRealtimeClientSecretAction(input?: unknown): Promise
 	return CreateRealtimeClientSecretActionOutputSchema.parse(parsedSecret)
 }
 
-export async function createRealtimeTranscriptionSessionAction(input?: unknown): Promise<{
+export async function createTranslateRealtimeClientSecretAction(input: unknown): Promise<{
 	expiresAt: number
 	value: string
 }> {
-	const parsedInput = CreateRealtimeTranscriptionSessionActionInputSchema.parse(input ?? {})
-	const silenceDurationMilliseconds = Math.round(parsedInput.turnDelaySeconds * 1000)
-
-	const payload = await postOpenAi('/realtime/transcription_sessions', {
-		audio: {
-			input: {
-				transcription: {
-					model: parsedInput.model,
-					...(parsedInput.languageHint ? { language: parsedInput.languageHint } : {})
-				},
-				turn_detection: {
-					create_response: false,
-					interrupt_response: false,
-					silence_duration_ms: silenceDurationMilliseconds,
-					type: 'server_vad'
-				}
-			}
-		},
-		type: 'transcription'
-	})
-
-	const parsedSecret = parseClientSecretResponse(payload)
-	return CreateRealtimeTranscriptionSessionActionOutputSchema.parse(parsedSecret)
-}
-
-export async function translateUtteranceAction(input: unknown): Promise<{
-	detectedSourceLanguageCode: string
-	direction: 'primary_to_secondary' | 'secondary_to_primary' | 'to_target'
-	targetLanguageCode: string
-	translatedText: string
-}> {
-	const parsedInput = TranslateUtteranceActionInputSchema.parse(input)
-	const prompt = createTranslatePrompt(parsedInput)
+	const parsedInput = CreateTranslateRealtimeClientSecretActionInputSchema.parse(input)
+	const instructions = createTranslateInstructions(
+		parsedInput.primaryLanguageCode,
+		parsedInput.secondaryLanguageCode
+	)
 
-	const responsePayload = await postOpenAi('/responses', {
-		input: [
-			{
-				content: [
-					{
-						text: prompt,
-						type: 'input_text'
-					}
-				],
-				role: 'user'
-			}
-		],
-		model: parsedInput.model,
-		reasoning: {
-			effort: 'minimal'
+	const payload = await postOpenAi('/realtime/client_secrets', {
+		expires_after: {
+			anchor: 'created_at',
+			seconds: 600
 		},
-		temperature: 0,
-		text: {
-			format: {
-				name: 'lilac_translation',
-				schema: {
-					additionalProperties: false,
-					properties: {
-						detectedSourceLanguageCode: { type: 'string' },
-						direction: {
-							enum: ['primary_to_secondary', 'secondary_to_primary', 'to_target'],
-							type: 'string'
-						},
-						targetLanguageCode: { type: 'string' },
-						translatedText: { minLength: 1, type: 'string' }
+		session: {
+			audio: {
+				input: {
+					noise_reduction: {
+						type: 'near_field'
 					},
-					required: ['detectedSourceLanguageCode', 'direction', 'targetLanguageCode', 'translatedText'],
-					type: 'object'
-				},
-				strict: true,
-				type: 'json_schema'
-			}
-		},
-		truncation: 'auto'
-	})
-
-	const outputText = extractResponseOutputText(responsePayload)
-
-	let parsedOutput: unknown
-	try {
-		parsedOutput = JSON.parse(outputText) as unknown
-	} catch {
-		throw new Error('Translation response was not valid JSON')
-	}
-
-	const translatedOutput = TranslateUtteranceActionOutputSchema.parse(parsedOutput)
-
-	if (parsedInput.settings.mode === 'translate') {
-		const allowedDirections = new Set(['primary_to_secondary', 'secondary_to_primary'])
-		if (!allowedDirections.has(translatedOutput.direction)) {
-			throw new Error('Translation response returned an invalid direction for translate mode')
+					transcription: {
+						model: defaultTranscriptionModel
+					},
+					turn_detection: {
+						create_response: false,
+						interrupt_response: false,
+						type: 'semantic_vad'
+					}
+				}
+			},
+			instructions,
+			model: parsedInput.model,
+			output_modalities: ['text'],
+			tool_choice: {
+				name: 'publish_translation',
+				type: 'function'
+			},
+			tools: [buildPublishTranslationToolDefinition()],
+			type: 'realtime'
 		}
-	}
-
-	if (parsedInput.settings.mode === 'transcribe' && translatedOutput.direction !== 'to_target') {
-		throw new Error('Translation response returned an invalid direction for transcribe mode')
-	}
-
-	return translatedOutput
-}
-
-function fallbackBoundedContext(context: TranslationContextEntry[]): TranslationContextEntry[] {
-	if (context.length <= 16) return context
-	return context.slice(context.length - 16)
-}
-
-export async function compactTranslationContextAction(input: unknown): Promise<{
-	compactedContext: TranslationContextEntry[]
-	performedCompaction: boolean
-}> {
-	const parsedInput = CompactTranslationContextActionInputSchema.parse(input)
-
-	if (parsedInput.context.length <= 16) {
-		return CompactTranslationContextActionOutputSchema.parse({
-			compactedContext: parsedInput.context,
-			performedCompaction: false
-		})
-	}
-
-	const compactInput = parsedInput.context.map(entry => ({
-		content: [
-			{
-				text: JSON.stringify(entry),
-				type: 'input_text'
-			}
-		],
-		role: 'user'
-	}))
-
-	try {
-		await postOpenAi('/responses/compact', {
-			input: compactInput,
-			model: parsedInput.model
-		})
+	})
 
-		return CompactTranslationContextActionOutputSchema.parse({
-			compactedContext: fallbackBoundedContext(parsedInput.context),
-			performedCompaction: true
-		})
-	} catch {
-		return CompactTranslationContextActionOutputSchema.parse({
-			compactedContext: fallbackBoundedContext(parsedInput.context),
-			performedCompaction: false
-		})
-	}
+	const parsedSecret = parseClientSecretResponse(payload)
+	return CreateTranslateRealtimeClientSecretActionOutputSchema.parse(parsedSecret)
 }
diff --git a/src/app/styles.css b/src/app/styles.css
index 618e163..4543603 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -2,24 +2,30 @@
 
 :root {
 	color-scheme: light dark;
+	--lilac-surface: #edf2f8;
+	--lilac-card: color-mix(in oklab, white 74%, #dbe6f4 26%);
+	--lilac-card-muted: color-mix(in oklab, white 48%, #d5e0ef 52%);
+	--lilac-elevated: color-mix(in oklab, white 86%, #d3dff0 14%);
+	--lilac-ink: #112036;
+	--lilac-ink-muted: color-mix(in oklab, #112036 62%, transparent);
+	--lilac-border: color-mix(in oklab, #142845 17%, transparent);
+	--lilac-border-strong: color-mix(in oklab, #142845 35%, transparent);
 	--lilac-direction-primary: #0f8a78;
 	--lilac-direction-secondary: #2f6dd8;
-	--lilac-direction-transcribe: #8f4dd3;
-	--lilac-surface: #f7f3e7;
-	--lilac-elevated: rgba(255, 255, 255, 0.7);
-	--lilac-ink: #352049;
-	--lilac-ink-muted: rgba(53, 32, 73, 0.62);
 }
 
 @media (prefers-color-scheme: dark) {
 	:root {
+		--lilac-surface: #0f1724;
+		--lilac-card: color-mix(in oklab, #1a2a3e 68%, #101823 32%);
+		--lilac-card-muted: color-mix(in oklab, #24344a 58%, #131c2a 42%);
+		--lilac-elevated: color-mix(in oklab, #22344b 78%, #121b29 22%);
+		--lilac-ink: #edf4ff;
+		--lilac-ink-muted: color-mix(in oklab, #edf4ff 64%, transparent);
+		--lilac-border: color-mix(in oklab, #dce9ff 16%, transparent);
+		--lilac-border-strong: color-mix(in oklab, #dce9ff 34%, transparent);
 		--lilac-direction-primary: #2cc7b2;
 		--lilac-direction-secondary: #6ea8ff;
-		--lilac-direction-transcribe: #bf8dff;
-		--lilac-surface: #120c1e;
-		--lilac-elevated: rgba(255, 255, 255, 0.08);
-		--lilac-ink: #f6f1ff;
-		--lilac-ink-muted: rgba(246, 241, 255, 0.64);
 	}
 }
 
@@ -29,118 +35,84 @@
 	box-sizing: border-box;
 }
 
+html,
+body {
+	width: 100%;
+	min-height: 100%;
+}
+
 body {
 	margin: 0;
 	font-family:
-		"SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+		"SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 	background: var(--lilac-surface);
 	color: var(--lilac-ink);
-	overflow: hidden;
-	overscroll-behavior: none;
+	overflow-x: hidden;
+	overscroll-behavior-y: contain;
 	touch-action: manipulation;
 }
 
-html,
-body {
-	height: 100%;
+input,
+textarea,
+select,
+button {
+	font: inherit;
+	color: inherit;
 }
 
-/* Branded range slider */
 .lilac-range {
 	--lilac-range-progress: 50%;
 	-webkit-appearance: none;
 	appearance: none;
 	width: 100%;
-	height: 0.75rem;
+	height: 0.7rem;
 	padding: 0;
 	border-radius: 9999px;
-	border: 1px solid rgba(255, 255, 255, 0.22);
-	background-color: rgba(53, 32, 73, 0.14);
+	border: 1px solid var(--lilac-border);
+	background-color: var(--lilac-card-muted);
 	background-image: linear-gradient(
 		90deg,
 		var(--lilac-ink) 0 var(--lilac-range-progress),
-		rgba(53, 32, 73, 0.14) var(--lilac-range-progress) 101%
+		var(--lilac-card-muted) var(--lilac-range-progress) 101%
 	);
 	background-repeat: no-repeat;
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
 	cursor: pointer;
 }
 
 .lilac-range::-webkit-slider-runnable-track {
-	height: 0.75rem;
+	height: 0.7rem;
 	border-radius: 9999px;
 	background: transparent;
 	border: none;
 }
 
 .lilac-range:focus-visible {
-	outline: 2px solid rgba(206, 190, 255, 0.9);
+	outline: 2px solid color-mix(in oklab, var(--lilac-direction-secondary) 62%, white 38%);
 	outline-offset: 3px;
 }
 
 .lilac-range::-webkit-slider-thumb {
 	-webkit-appearance: none;
 	appearance: none;
-	width: 1.5rem;
-	height: 1.5rem;
+	width: 1.3rem;
+	height: 1.3rem;
 	border-radius: 9999px;
-	background: rgba(255, 255, 255, 0.95);
-	border: 1px solid rgba(255, 255, 255, 0.35);
-	box-shadow:
-		0 10px 20px rgba(0, 0, 0, 0.22),
-		0 2px 0 rgba(255, 255, 255, 0.25);
+	background: white;
+	border: 1px solid var(--lilac-border-strong);
+	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.24);
 }
 
 .lilac-range::-moz-range-thumb {
-	width: 1.5rem;
-	height: 1.5rem;
+	width: 1.3rem;
+	height: 1.3rem;
 	border-radius: 9999px;
-	background: rgba(255, 255, 255, 0.95);
-	border: 1px solid rgba(255, 255, 255, 0.35);
-	box-shadow:
-		0 10px 20px rgba(0, 0, 0, 0.22),
-		0 2px 0 rgba(255, 255, 255, 0.25);
+	background: white;
+	border: 1px solid var(--lilac-border-strong);
+	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.24);
 }
 
 .lilac-range::-moz-range-track {
-	height: 0.75rem;
+	height: 0.7rem;
 	border-radius: 9999px;
 	background: transparent;
 }
-
-@media (prefers-color-scheme: dark) {
-	.lilac-range {
-		border: 1px solid rgba(255, 255, 255, 0.18);
-		background-color: rgba(255, 255, 255, 0.14);
-		background-image: linear-gradient(
-			90deg,
-			var(--lilac-ink) 0 var(--lilac-range-progress),
-			rgba(255, 255, 255, 0.14) var(--lilac-range-progress) 101%
-		);
-		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
-	}
-
-	.lilac-range:focus-visible {
-		outline: 2px solid rgba(206, 190, 255, 0.55);
-	}
-
-	.lilac-range::-webkit-slider-thumb,
-	.lilac-range::-moz-range-thumb {
-		border: 1px solid rgba(255, 255, 255, 0.22);
-		box-shadow:
-			0 12px 26px rgba(0, 0, 0, 0.5),
-			0 2px 0 rgba(255, 255, 255, 0.12);
-	}
-}
-
-/* Removes native number steppers for a cleaner, more "app-like" feel */
-.lilac-number::-webkit-outer-spin-button,
-.lilac-number::-webkit-inner-spin-button {
-	-webkit-appearance: none;
-	margin: 0;
-}
-
-.lilac-number {
-	-moz-appearance: textfield;
-	appearance: textfield;
-}
diff --git a/src/realtime/chatRealtimeClient.ts b/src/realtime/chatRealtimeClient.ts
index 1eeb9db..9dbe83c 100644
--- a/src/realtime/chatRealtimeClient.ts
+++ b/src/realtime/chatRealtimeClient.ts
@@ -5,6 +5,7 @@ import {
 	InputAudioTranscriptionCompletedEventSchema,
 	InputAudioTranscriptionDeltaEventSchema,
 	RealtimeBaseServerEventSchema,
+	RealtimeErrorEventSchema,
 	ResponseDoneEventSchema,
 	ResponseOutputAudioTranscriptDeltaEventSchema,
 	ResponseOutputItemAddedEventSchema,
@@ -27,8 +28,10 @@ export type ChatRealtimeClientState = 'connecting' | 'connected' | 'disconnected
 export type StartChatRealtimeClientInput = {
 	instructions: string
 	model: string
+	speechOutputEnabled: boolean
 	turnDelaySeconds: number
 	voice: string
+	voiceInputEnabled: boolean
 }
 
 export type ChatRealtimeClientCallbacks = {
@@ -38,33 +41,15 @@ export type ChatRealtimeClientCallbacks = {
 	onTranscriptPatch: (patch: ChatTranscriptPatch) => void
 }
 
-function float32ToPcm16(float32Samples: Float32Array): ArrayBuffer {
-	const pcm16 = new Int16Array(float32Samples.length)
-	for (let sampleIndex = 0; sampleIndex < float32Samples.length; sampleIndex += 1) {
-		const sample = Math.max(-1, Math.min(1, float32Samples[sampleIndex] ?? 0))
-		pcm16[sampleIndex] = sample < 0 ? sample * 0x8000 : sample * 0x7fff
-	}
-	return pcm16.buffer
-}
-
-function arrayBufferToBase64(buffer: ArrayBuffer): string {
-	let binary = ''
-	const bytes = new Uint8Array(buffer)
-	for (let index = 0; index < bytes.length; index += 1) {
-		binary += String.fromCharCode(bytes[index] ?? 0)
-	}
-	return window.btoa(binary)
-}
-
 export class ChatRealtimeClient {
 	private assistantItemIdByResponseId = new Map<string, string>()
 	private callbacks: ChatRealtimeClientCallbacks
-	private dataChannel: RTCDataChannel | null = null
+	private dataChannel: null | RTCDataChannel = null
 	private generation = 0
 	private localAudioStream: MediaStream | null = null
 	private pendingAudioTranscriptByResponseId = new Map<string, string>()
 	private pendingTextByResponseId = new Map<string, string>()
-	private peerConnection: RTCPeerConnection | null = null
+	private peerConnection: null | RTCPeerConnection = null
 
 	public constructor(callbacks: ChatRealtimeClientCallbacks) {
 		this.callbacks = callbacks
@@ -76,34 +61,19 @@ export class ChatRealtimeClient {
 		const generation = this.generation
 		this.callbacks.onConnectionStateChange('connecting')
 
-		let localAudioStream: MediaStream | null = null
-		let peerConnection: RTCPeerConnection | null = null
 		try {
 			const clientSecret = await createRealtimeClientSecretAction({
 				instructions: input.instructions,
 				model: input.model,
+				speechOutputEnabled: input.speechOutputEnabled,
 				turnDelaySeconds: input.turnDelaySeconds,
 				voice: input.voice
 			})
 
 			if (generation !== this.generation) return
 
-			localAudioStream = await navigator.mediaDevices.getUserMedia({
-				audio: {
-					autoGainControl: true,
-					echoCancellation: true,
-					noiseSuppression: true
-				}
-			})
-
-			if (generation !== this.generation) {
-				for (const track of localAudioStream.getTracks()) track.stop()
-				return
-			}
-
-			peerConnection = new RTCPeerConnection()
+			const peerConnection = new RTCPeerConnection()
 			this.peerConnection = peerConnection
-			this.localAudioStream = localAudioStream
 
 			peerConnection.addEventListener('track', event => {
 				const firstStream = event.streams[0]
@@ -111,8 +81,17 @@ export class ChatRealtimeClient {
 				this.callbacks.onRemoteStream(firstStream)
 			})
 
-			for (const track of localAudioStream.getTracks()) {
-				peerConnection.addTrack(track, localAudioStream)
+			if (input.voiceInputEnabled) {
+				await this.enableVoiceInput(generation)
+			}
+
+			if (generation !== this.generation) return
+
+			const localAudioStream = this.localAudioStream
+			if (localAudioStream) {
+				for (const track of localAudioStream.getTracks()) {
+					peerConnection.addTrack(track, localAudioStream)
+				}
 			}
 
 			const dataChannel = peerConnection.createDataChannel('oai-events')
@@ -188,6 +167,27 @@ export class ChatRealtimeClient {
 		this.callbacks.onConnectionStateChange('disconnected')
 	}
 
+	public submitTextInput(text: string): void {
+		const normalizedText = text.trim()
+		if (!normalizedText) return
+		this.sendEvent({
+			item: {
+				content: [
+					{
+						text: normalizedText,
+						type: 'input_text'
+					}
+				],
+				role: 'user',
+				type: 'message'
+			},
+			type: 'conversation.item.create'
+		})
+		this.sendEvent({
+			type: 'response.create'
+		})
+	}
+
 	public updateInstructions(instructions: string): void {
 		this.sendEvent({
 			session: { instructions },
@@ -195,6 +195,16 @@ export class ChatRealtimeClient {
 		})
 	}
 
+	public updateSpeechOutputEnabled(speechOutputEnabled: boolean): void {
+		this.sendEvent({
+			session: {
+				output_modalities: [speechOutputEnabled ? 'audio' : 'text']
+			},
+			type: 'session.update'
+		})
+		if (!speechOutputEnabled) this.callbacks.onRemoteStream(null)
+	}
+
 	public updateTurnDelaySeconds(turnDelaySeconds: number): void {
 		const silenceDurationMilliseconds = Math.round(turnDelaySeconds * 1000)
 		this.sendEvent({
@@ -212,6 +222,51 @@ export class ChatRealtimeClient {
 		})
 	}
 
+	public async updateVoiceInputEnabled(voiceInputEnabled: boolean): Promise<void> {
+		if (!this.peerConnection) return
+		const generation = this.generation
+
+		if (!voiceInputEnabled) {
+			for (const sender of this.peerConnection.getSenders()) {
+				if (sender.track?.kind === 'audio') {
+					try {
+						this.peerConnection.removeTrack(sender)
+					} catch {}
+				}
+			}
+			for (const track of this.localAudioStream?.getTracks() ?? []) {
+				track.stop()
+			}
+			this.localAudioStream = null
+			return
+		}
+
+		const hasLocalAudioStream = this.localAudioStream !== null
+		if (hasLocalAudioStream) return
+		await this.enableVoiceInput(generation)
+		if (generation !== this.generation) return
+		const localAudioStream = this.localAudioStream
+		if (localAudioStream === null) return
+		for (const track of localAudioStream.getTracks()) {
+			this.peerConnection.addTrack(track, localAudioStream)
+		}
+	}
+
+	private async enableVoiceInput(generation: number): Promise<void> {
+		const stream = await navigator.mediaDevices.getUserMedia({
+			audio: {
+				autoGainControl: true,
+				echoCancellation: true,
+				noiseSuppression: true
+			}
+		})
+		if (generation !== this.generation) {
+			for (const track of stream.getTracks()) track.stop()
+			return
+		}
+		this.localAudioStream = stream
+	}
+
 	private emitTranscriptPatch(patch: ChatTranscriptPatch): void {
 		this.callbacks.onTranscriptPatch(patch)
 	}
@@ -356,25 +411,21 @@ export class ChatRealtimeClient {
 				}
 				case 'response.done': {
 					const event = ResponseDoneEventSchema.parse(candidate)
-					this.finalizeAssistantForResponse(event.response_id)
+					this.finalizeAssistantForResponse(event.response_id ?? event.response?.id)
 					return
 				}
 				case 'error': {
-					const message =
-						typeof candidate === 'object' &&
-						candidate !== null &&
-						'error' in candidate &&
-						typeof (candidate as { error?: { message?: unknown } }).error?.message === 'string'
-							? ((candidate as { error?: { message?: string } }).error?.message ?? 'Realtime API error')
-							: 'Realtime API error'
-					this.callbacks.onError(message)
+					const event = RealtimeErrorEventSchema.parse(candidate)
+					this.callbacks.onError(event.error?.message || 'Realtime session error')
 					return
 				}
 				default:
 					return
 			}
 		} catch {
-			this.callbacks.onError('Failed to parse Realtime event payload')
+			// Ignore unrecognized event payloads; the Realtime stream can contain event shapes
+			// that this client does not need for transcript rendering.
+			return
 		}
 	}
 
@@ -386,14 +437,3 @@ export class ChatRealtimeClient {
 		} catch {}
 	}
 }
-
-export function buildInputAudioBufferAppendEventFromFloat32Audio(float32Audio: Float32Array): {
-	audio: string
-	type: 'input_audio_buffer.append'
-} {
-	const pcm16Buffer = float32ToPcm16(float32Audio)
-	return {
-		audio: arrayBufferToBase64(pcm16Buffer),
-		type: 'input_audio_buffer.append'
-	}
-}
diff --git a/src/realtime/liveTranslateRealtimeClient.ts b/src/realtime/liveTranslateRealtimeClient.ts
new file mode 100644
index 0000000..cc858a1
--- /dev/null
+++ b/src/realtime/liveTranslateRealtimeClient.ts
@@ -0,0 +1,526 @@
+'use client'
+
+import { createTranslateRealtimeClientSecretAction } from '@/app/actions/realtime'
+import {
+	InputAudioBufferCommittedEventSchema,
+	InputAudioTranscriptionCompletedEventSchema,
+	InputAudioTranscriptionDeltaEventSchema,
+	PublishTranslationToolArgumentsSchema,
+	RealtimeBaseServerEventSchema,
+	RealtimeErrorEventSchema,
+	ResponseDoneEventSchema
+} from '@/realtime/schemas'
+import type { UtteranceDirection } from '@/realtime/sessionTypes'
+
+export type LiveTranslateRealtimeClientState = 'connecting' | 'connected' | 'disconnected' | 'error'
+
+export type LiveTranslateSourcePatch = {
+	inputOrigin: 'audio' | 'text'
+	itemId: string
+	previousItemId?: null | string
+	status: 'final' | 'streaming'
+	text: string
+}
+
+export type LiveTranslateResultPatch = {
+	direction: UtteranceDirection
+	inputOrigin: 'audio' | 'text'
+	itemId: string
+	responseId?: string
+	sourceLanguageCode: string
+	sourceText: string
+	status: 'error' | 'final'
+	targetLanguageCode: string
+	translatedText: string
+}
+
+export type LiveTranslateSettings = {
+	primaryLanguageCode: string
+	secondaryLanguageCode: string
+	turnDelaySeconds: number
+}
+
+export type StartLiveTranslateRealtimeClientInput = LiveTranslateSettings & {
+	model: string
+	voiceInputEnabled: boolean
+}
+
+export type LiveTranslateRealtimeClientCallbacks = {
+	onConnectionStateChange: (state: LiveTranslateRealtimeClientState) => void
+	onError: (message: string) => void
+	onResultPatch: (patch: LiveTranslateResultPatch) => void
+	onSourcePatch: (patch: LiveTranslateSourcePatch) => void
+}
+
+type PendingResponseContext = {
+	inputOrigin: 'audio' | 'text'
+	itemId: string
+}
+
+function createTranslateInstructions(
+	primaryLanguageCode: string,
+	secondaryLanguageCode: string
+): string {
+	return [
+		'You are Lilac, a deterministic live translator.',
+		`Allowed language pair: ${primaryLanguageCode} and ${secondaryLanguageCode}.`,
+		'For each user utterance, detect source language within the pair and translate to the opposite language.',
+		'Always call publish_translation exactly once per utterance.',
+		'Never produce assistant text outside the function call.',
+		'Preserve speaker intent, tone, and named entities.',
+		'No summaries, no commentary, no extra fields.'
+	].join('\n')
+}
+
+function buildPublishTranslationToolDefinition(): Record<string, unknown> {
+	return {
+		description: 'Publish exactly one translation card for the utterance currently being processed.',
+		name: 'publish_translation',
+		parameters: {
+			additionalProperties: false,
+			properties: {
+				direction: {
+					enum: ['primary_to_secondary', 'secondary_to_primary'],
+					type: 'string'
+				},
+				sourceLanguageCode: {
+					type: 'string'
+				},
+				sourceText: {
+					type: 'string'
+				},
+				targetLanguageCode: {
+					type: 'string'
+				},
+				translatedText: {
+					type: 'string'
+				}
+			},
+			required: [
+				'sourceText',
+				'sourceLanguageCode',
+				'targetLanguageCode',
+				'translatedText',
+				'direction'
+			],
+			type: 'object'
+		},
+		type: 'function'
+	}
+}
+
+function buildToolChoice(): Record<string, string> {
+	return {
+		name: 'publish_translation',
+		type: 'function'
+	}
+}
+
+function parseStringValue(value: unknown): string | null {
+	if (typeof value !== 'string') return null
+	const normalizedValue = value.trim()
+	if (!normalizedValue) return null
+	return normalizedValue
+}
+
+export class LiveTranslateRealtimeClient {
+	private callbacks: LiveTranslateRealtimeClientCallbacks
+	private dataChannel: null | RTCDataChannel = null
+	private generation = 0
+	private localAudioStream: MediaStream | null = null
+	private pendingResponseContextByRequestId = new Map<string, PendingResponseContext>()
+	private peerConnection: null | RTCPeerConnection = null
+	private sourceItemOrder: string[] = []
+
+	public constructor(callbacks: LiveTranslateRealtimeClientCallbacks) {
+		this.callbacks = callbacks
+	}
+
+	public async start(input: StartLiveTranslateRealtimeClientInput): Promise<void> {
+		this.stop()
+		this.generation += 1
+		const generation = this.generation
+		this.callbacks.onConnectionStateChange('connecting')
+
+		try {
+			const clientSecret = await createTranslateRealtimeClientSecretAction({
+				model: input.model,
+				primaryLanguageCode: input.primaryLanguageCode,
+				secondaryLanguageCode: input.secondaryLanguageCode,
+				turnDelaySeconds: input.turnDelaySeconds
+			})
+
+			if (generation !== this.generation) return
+
+			const peerConnection = new RTCPeerConnection()
+			this.peerConnection = peerConnection
+
+			if (input.voiceInputEnabled) {
+				await this.enableVoiceInput(generation)
+			}
+
+			if (generation !== this.generation) return
+
+			const localAudioStream = this.localAudioStream
+			if (localAudioStream) {
+				for (const track of localAudioStream.getTracks()) {
+					peerConnection.addTrack(track, localAudioStream)
+				}
+			}
+
+			const dataChannel = peerConnection.createDataChannel('oai-events')
+			this.dataChannel = dataChannel
+
+			dataChannel.addEventListener('open', () => {
+				if (generation !== this.generation) return
+				this.callbacks.onConnectionStateChange('connected')
+				this.updateTranslateSettings({
+					primaryLanguageCode: input.primaryLanguageCode,
+					secondaryLanguageCode: input.secondaryLanguageCode,
+					turnDelaySeconds: input.turnDelaySeconds
+				})
+			})
+
+			dataChannel.addEventListener('close', () => {
+				if (generation !== this.generation) return
+				this.callbacks.onConnectionStateChange('disconnected')
+			})
+
+			dataChannel.addEventListener('message', event => {
+				this.handleServerEvent(event.data)
+			})
+
+			const offer = await peerConnection.createOffer()
+			await peerConnection.setLocalDescription(offer)
+
+			if (generation !== this.generation) return
+
+			const response = await fetch('https://api.openai.com/v1/realtime/calls', {
+				body: offer.sdp ?? '',
+				headers: {
+					Authorization: `Bearer ${clientSecret.value}`,
+					'Content-Type': 'application/sdp'
+				},
+				method: 'POST'
+			})
+
+			if (!response.ok) {
+				const message = await response.text().catch(() => '')
+				throw new Error(message || `Realtime call handshake failed (${response.status})`)
+			}
+
+			const answerSdp = await response.text()
+			if (generation !== this.generation) return
+			await peerConnection.setRemoteDescription({ sdp: answerSdp, type: 'answer' })
+		} catch (error) {
+			if (generation !== this.generation) return
+			this.callbacks.onConnectionStateChange('error')
+			const fallbackMessage = 'Unable to start Live Translate mode.'
+			if (error instanceof Error) this.callbacks.onError(error.message || fallbackMessage)
+			else this.callbacks.onError(fallbackMessage)
+			this.stop()
+		}
+	}
+
+	public stop(): void {
+		this.generation += 1
+		this.pendingResponseContextByRequestId.clear()
+		this.sourceItemOrder = []
+
+		try {
+			this.dataChannel?.close()
+		} catch {}
+		this.dataChannel = null
+
+		try {
+			this.peerConnection?.close()
+		} catch {}
+		this.peerConnection = null
+
+		for (const track of this.localAudioStream?.getTracks() ?? []) {
+			track.stop()
+		}
+		this.localAudioStream = null
+		this.callbacks.onConnectionStateChange('disconnected')
+	}
+
+	public submitTextInput(text: string): void {
+		const normalizedText = text.trim()
+		if (!normalizedText) return
+		const itemId = `typed_${crypto.randomUUID()}`
+		this.registerSourceItem(itemId, null)
+		this.callbacks.onSourcePatch({
+			inputOrigin: 'text',
+			itemId,
+			status: 'final',
+			text: normalizedText
+		})
+		this.sendEvent({
+			item: {
+				content: [
+					{
+						text: normalizedText,
+						type: 'input_text'
+					}
+				],
+				id: itemId,
+				role: 'user',
+				type: 'message'
+			},
+			type: 'conversation.item.create'
+		})
+		this.requestTranslationResponse(itemId, 'text')
+	}
+
+	public updateTranslateSettings(settings: LiveTranslateSettings): void {
+		this.sendEvent({
+			session: {
+				audio: {
+					input: {
+						turn_detection: {
+							create_response: false,
+							interrupt_response: false,
+							type: 'semantic_vad'
+						}
+					}
+				},
+				instructions: createTranslateInstructions(
+					settings.primaryLanguageCode,
+					settings.secondaryLanguageCode
+				),
+				output_modalities: ['text'],
+				tool_choice: buildToolChoice(),
+				tools: [buildPublishTranslationToolDefinition()]
+			},
+			type: 'session.update'
+		})
+	}
+
+	public async updateVoiceInputEnabled(voiceInputEnabled: boolean): Promise<void> {
+		if (!this.peerConnection) return
+		const generation = this.generation
+
+		if (!voiceInputEnabled) {
+			for (const sender of this.peerConnection.getSenders()) {
+				if (sender.track?.kind === 'audio') {
+					try {
+						this.peerConnection.removeTrack(sender)
+					} catch {}
+				}
+			}
+			for (const track of this.localAudioStream?.getTracks() ?? []) {
+				track.stop()
+			}
+			this.localAudioStream = null
+			return
+		}
+
+		const hasLocalAudioStream = this.localAudioStream !== null
+		if (hasLocalAudioStream) return
+		await this.enableVoiceInput(generation)
+		if (generation !== this.generation) return
+		const localAudioStream = this.localAudioStream
+		if (localAudioStream === null) return
+		for (const track of localAudioStream.getTracks()) {
+			this.peerConnection.addTrack(track, localAudioStream)
+		}
+	}
+
+	private buildResponseInput(itemId: string): Array<Record<string, string>> {
+		const recentItemIds = this.sourceItemOrder.slice(Math.max(0, this.sourceItemOrder.length - 8))
+		if (!recentItemIds.includes(itemId)) recentItemIds.push(itemId)
+		return recentItemIds.map(sourceItemId => ({
+			id: sourceItemId,
+			type: 'item_reference'
+		}))
+	}
+
+	private async enableVoiceInput(generation: number): Promise<void> {
+		const stream = await navigator.mediaDevices.getUserMedia({
+			audio: {
+				autoGainControl: true,
+				echoCancellation: true,
+				noiseSuppression: true
+			}
+		})
+		if (generation !== this.generation) {
+			for (const track of stream.getTracks()) track.stop()
+			return
+		}
+		this.localAudioStream = stream
+	}
+
+	private handleResponseDoneEvent(event: ReturnType<typeof ResponseDoneEventSchema.parse>): void {
+		const response = event.response
+		if (!response) return
+
+		const metadata = response.metadata ?? {}
+		const requestId = parseStringValue(metadata.request_id)
+		const sourceItemIdFromMetadata = parseStringValue(metadata.source_item_id)
+		const inputOriginFromMetadata = parseStringValue(metadata.input_origin)
+
+		const pendingContext = requestId
+			? (this.pendingResponseContextByRequestId.get(requestId) ?? null)
+			: null
+
+		const sourceItemId = sourceItemIdFromMetadata ?? pendingContext?.itemId ?? null
+		const rawInputOrigin = inputOriginFromMetadata ?? pendingContext?.inputOrigin ?? null
+		const inputOrigin: 'audio' | 'text' = rawInputOrigin === 'text' ? 'text' : 'audio'
+
+		if (requestId) this.pendingResponseContextByRequestId.delete(requestId)
+		if (!sourceItemId) return
+
+		const functionCall = (response.output ?? []).find(
+			item => item.type === 'function_call' && item.name === 'publish_translation'
+		)
+
+		const responseId = response.id
+
+		if (!functionCall || typeof functionCall.arguments !== 'string') {
+			this.callbacks.onResultPatch({
+				direction: 'primary_to_secondary',
+				inputOrigin,
+				itemId: sourceItemId,
+				sourceLanguageCode: 'und',
+				sourceText: '',
+				status: 'error',
+				targetLanguageCode: 'und',
+				translatedText: 'No valid publish_translation tool call was returned.',
+				...(responseId ? { responseId } : {})
+			})
+			return
+		}
+
+		try {
+			const parsedArguments = JSON.parse(functionCall.arguments) as unknown
+			const translatedResult = PublishTranslationToolArgumentsSchema.parse(parsedArguments)
+			this.callbacks.onResultPatch({
+				direction: translatedResult.direction,
+				inputOrigin,
+				itemId: sourceItemId,
+				sourceLanguageCode: translatedResult.sourceLanguageCode,
+				sourceText: translatedResult.sourceText,
+				status: 'final',
+				targetLanguageCode: translatedResult.targetLanguageCode,
+				translatedText: translatedResult.translatedText,
+				...(responseId ? { responseId } : {})
+			})
+		} catch {
+			this.callbacks.onResultPatch({
+				direction: 'primary_to_secondary',
+				inputOrigin,
+				itemId: sourceItemId,
+				sourceLanguageCode: 'und',
+				sourceText: '',
+				status: 'error',
+				targetLanguageCode: 'und',
+				translatedText: 'Tool arguments were malformed and could not be parsed.',
+				...(responseId ? { responseId } : {})
+			})
+		}
+	}
+
+	private handleServerEvent(rawData: unknown): void {
+		try {
+			const candidate = typeof rawData === 'string' ? JSON.parse(rawData) : rawData
+			const baseEvent = RealtimeBaseServerEventSchema.parse(candidate)
+
+			switch (baseEvent.type) {
+				case 'input_audio_buffer.committed': {
+					const event = InputAudioBufferCommittedEventSchema.parse(candidate)
+					this.registerSourceItem(event.item_id, event.previous_item_id ?? null)
+					this.callbacks.onSourcePatch({
+						inputOrigin: 'audio',
+						itemId: event.item_id,
+						previousItemId: event.previous_item_id ?? null,
+						status: 'streaming',
+						text: ''
+					})
+					this.requestTranslationResponse(event.item_id, 'audio')
+					return
+				}
+				case 'conversation.item.input_audio_transcription.delta': {
+					const event = InputAudioTranscriptionDeltaEventSchema.parse(candidate)
+					this.callbacks.onSourcePatch({
+						inputOrigin: 'audio',
+						itemId: event.item_id,
+						status: 'streaming',
+						text: event.delta
+					})
+					return
+				}
+				case 'conversation.item.input_audio_transcription.completed': {
+					const event = InputAudioTranscriptionCompletedEventSchema.parse(candidate)
+					this.callbacks.onSourcePatch({
+						inputOrigin: 'audio',
+						itemId: event.item_id,
+						status: 'final',
+						text: event.transcript
+					})
+					return
+				}
+				case 'response.done': {
+					const event = ResponseDoneEventSchema.parse(candidate)
+					this.handleResponseDoneEvent(event)
+					return
+				}
+				case 'error': {
+					const event = RealtimeErrorEventSchema.parse(candidate)
+					this.callbacks.onError(event.error?.message || 'Realtime session error')
+					return
+				}
+				default:
+					return
+			}
+		} catch {
+			// Ignore unrelated/unrecognized realtime events.
+			return
+		}
+	}
+
+	private registerSourceItem(itemId: string, previousItemId: null | string): void {
+		if (this.sourceItemOrder.includes(itemId)) return
+		if (!previousItemId) {
+			this.sourceItemOrder.push(itemId)
+			return
+		}
+
+		const previousIndex = this.sourceItemOrder.indexOf(previousItemId)
+		if (previousIndex === -1) {
+			this.sourceItemOrder.push(itemId)
+		} else {
+			this.sourceItemOrder.splice(previousIndex + 1, 0, itemId)
+		}
+		if (this.sourceItemOrder.length > 48) {
+			this.sourceItemOrder = this.sourceItemOrder.slice(this.sourceItemOrder.length - 48)
+		}
+	}
+
+	private requestTranslationResponse(itemId: string, inputOrigin: 'audio' | 'text'): void {
+		const requestId = crypto.randomUUID()
+		this.pendingResponseContextByRequestId.set(requestId, { inputOrigin, itemId })
+		this.sendEvent({
+			response: {
+				conversation: 'none',
+				input: this.buildResponseInput(itemId),
+				metadata: {
+					input_origin: inputOrigin,
+					request_id: requestId,
+					source_item_id: itemId
+				},
+				output_modalities: ['text'],
+				tool_choice: buildToolChoice(),
+				tools: [buildPublishTranslationToolDefinition()]
+			},
+			type: 'response.create'
+		})
+	}
+
+	private sendEvent(event: Record<string, unknown>): void {
+		if (!this.dataChannel) return
+		if (this.dataChannel.readyState !== 'open') return
+		try {
+			this.dataChannel.send(JSON.stringify(event))
+		} catch {}
+	}
+}
diff --git a/src/realtime/modeRuntimeStore.tsx b/src/realtime/modeRuntimeStore.tsx
index 769fcf5..d0c3331 100644
--- a/src/realtime/modeRuntimeStore.tsx
+++ b/src/realtime/modeRuntimeStore.tsx
@@ -11,22 +11,23 @@ import {
 	useState
 } from 'react'
 
-import { compactTranslationContextAction, translateUtteranceAction } from '@/app/actions/realtime'
 import { ChatRealtimeClient, type ChatTranscriptPatch } from '@/realtime/chatRealtimeClient'
+import {
+	LiveTranslateRealtimeClient,
+	type LiveTranslateResultPatch,
+	type LiveTranslateSourcePatch
+} from '@/realtime/liveTranslateRealtimeClient'
+import { defaultChatRealtimeModel } from '@/realtime/modelConfig'
 import type {
+	ChatOutputSettings,
 	ChatTranscriptMessage,
+	GlobalAudioInputSettings,
 	LilacMode,
 	ModeConnectionState,
-	TranscribeSettings,
 	TranslateSettings,
-	TranslationContextEntry,
 	UtteranceCard,
 	UtteranceDirection
 } from '@/realtime/sessionTypes'
-import {
-	type TranscriptionPatch,
-	TranscriptionSocketClient
-} from '@/realtime/transcriptionSocketClient'
 
 const defaultChatInstructions =
 	'You are Lilac. Help users communicate across languages. Keep answers concise, faithful, and practical.'
@@ -36,17 +37,22 @@ const defaultTranslateSettings: TranslateSettings = {
 	secondaryLanguageCode: 'es'
 }
 
-const defaultTranscribeSettings: TranscribeSettings = {
-	targetLanguageCode: 'en'
+const defaultGlobalAudioInputSettings: GlobalAudioInputSettings = {
+	voiceInputEnabled: true
+}
+
+const defaultChatOutputSettings: ChatOutputSettings = {
+	speechOutputEnabled: true
 }
 
 const storageKeys = {
 	chatInstructions: 'lilac.chat.instructions',
+	chatSpeechOutputEnabled: 'lilac.chat.speechOutputEnabled',
 	chatTurnDelaySeconds: 'lilac.chat.turnDelaySeconds',
 	mode: 'lilac.mode',
-	transcribeTargetLanguage: 'lilac.transcribe.targetLanguageCode',
 	translatePrimaryLanguage: 'lilac.translate.primaryLanguageCode',
-	translateSecondaryLanguage: 'lilac.translate.secondaryLanguageCode'
+	translateSecondaryLanguage: 'lilac.translate.secondaryLanguageCode',
+	voiceInputEnabled: 'lilac.global.voiceInputEnabled'
 } as const
 
 function normalizeTurnDelaySeconds(value: unknown): number {
@@ -56,19 +62,51 @@ function normalizeTurnDelaySeconds(value: unknown): number {
 	return Math.round(clampedValue * 10) / 10
 }
 
-function createEmptyUtteranceCard(id: string, direction: UtteranceDirection): UtteranceCard {
+function parseStoredBoolean(value: string | null, fallbackValue: boolean): boolean {
+	if (value === 'true') return true
+	if (value === 'false') return false
+	return fallbackValue
+}
+
+function createEmptyUtteranceCard(
+	itemId: string,
+	inputOrigin: 'audio' | 'text',
+	fallbackDirection: UtteranceDirection,
+	translateSettings: TranslateSettings
+): UtteranceCard {
 	return {
 		createdAt: Date.now(),
-		direction,
-		id,
-		sourceLanguageCode: 'und',
+		direction: fallbackDirection,
+		id: itemId,
+		inputOrigin,
+		sourceItemId: itemId,
+		sourceLanguageCode: translateSettings.primaryLanguageCode,
 		sourceText: '',
 		status: 'streaming',
-		targetLanguageCode: 'und',
+		targetLanguageCode:
+			fallbackDirection === 'secondary_to_primary'
+				? translateSettings.primaryLanguageCode
+				: translateSettings.secondaryLanguageCode,
 		translatedText: ''
 	}
 }
 
+function insertCardByPreviousItemId(
+	cardList: UtteranceCard[],
+	nextCard: UtteranceCard,
+	previousItemId?: null | string
+): UtteranceCard[] {
+	const filteredCards = cardList.filter(card => card.id !== nextCard.id)
+	if (!previousItemId) return [...filteredCards, nextCard]
+	const previousIndex = filteredCards.findIndex(card => card.id === previousItemId)
+	if (previousIndex === -1) return [...filteredCards, nextCard]
+	return [
+		...filteredCards.slice(0, previousIndex + 1),
+		nextCard,
+		...filteredCards.slice(previousIndex + 1)
+	]
+}
+
 function upsertChatTranscript(
 	existingList: ChatTranscriptMessage[],
 	patch: ChatTranscriptPatch
@@ -107,45 +145,60 @@ function upsertChatTranscript(
 	return nextList
 }
 
-function upsertStreamingCard(
-	existingList: UtteranceCard[],
-	patch: TranscriptionPatch,
-	fallbackDirection: UtteranceDirection
+function upsertTranslateSourcePatch(
+	cardList: UtteranceCard[],
+	patch: LiveTranslateSourcePatch,
+	translateSettings: TranslateSettings
 ): UtteranceCard[] {
-	const existingIndex = existingList.findIndex(item => item.id === patch.itemId)
-	const existingItem = existingIndex >= 0 ? existingList[existingIndex] : null
-
-	const mergedText =
-		patch.status === 'final' ? patch.text : `${existingItem?.sourceText ?? ''}${patch.text || ''}`
-
-	const nextItem: UtteranceCard = {
-		...(existingItem ?? createEmptyUtteranceCard(patch.itemId, fallbackDirection)),
-		sourceText: mergedText,
-		status: patch.status === 'final' ? 'translating' : 'streaming'
-	}
-
-	if (existingIndex === -1) {
-		return [...existingList, nextItem]
+	const existingCard = cardList.find(card => card.id === patch.itemId) ?? null
+	const fallbackDirection =
+		existingCard?.direction ??
+		(patch.inputOrigin === 'text' ? 'primary_to_secondary' : 'primary_to_secondary')
+
+	const sourceText =
+		patch.status === 'final' ? patch.text : `${existingCard?.sourceText ?? ''}${patch.text}`
+
+	const nextCard: UtteranceCard = {
+		...(existingCard ??
+			createEmptyUtteranceCard(patch.itemId, patch.inputOrigin, fallbackDirection, translateSettings)),
+		inputOrigin: patch.inputOrigin,
+		sourceText,
+		status:
+			patch.status === 'final'
+				? existingCard?.status === 'final'
+					? 'final'
+					: 'translating'
+				: 'streaming'
 	}
 
-	const nextList = existingList.slice()
-	nextList[existingIndex] = nextItem
-	return nextList
+	return insertCardByPreviousItemId(cardList, nextCard, patch.previousItemId)
 }
 
-function buildTranslationContextFromCards(cards: UtteranceCard[]): TranslationContextEntry[] {
-	const finalCards = cards.filter(
-		card => card.status === 'final' && card.translatedText.trim().length > 0
-	)
-	const boundedFinalCards = finalCards.slice(Math.max(0, finalCards.length - 200))
-
-	return boundedFinalCards.map(card => ({
-		direction: card.direction,
-		sourceLanguageCode: card.sourceLanguageCode,
-		sourceText: card.sourceText,
-		targetLanguageCode: card.targetLanguageCode,
-		translatedText: card.translatedText
-	}))
+function applyTranslateResultPatch(
+	cardList: UtteranceCard[],
+	patch: LiveTranslateResultPatch,
+	translateSettings: TranslateSettings
+): UtteranceCard[] {
+	const existingCard = cardList.find(card => card.id === patch.itemId) ?? null
+	const baseCard = existingCard
+		? (() => {
+				const { errorMessage: _errorMessage, responseId: _responseId, ...restCard } = existingCard
+				return restCard
+			})()
+		: createEmptyUtteranceCard(patch.itemId, patch.inputOrigin, patch.direction, translateSettings)
+	const nextCard: UtteranceCard = {
+		...baseCard,
+		direction: patch.direction,
+		inputOrigin: patch.inputOrigin,
+		sourceLanguageCode: patch.sourceLanguageCode,
+		sourceText: patch.sourceText.trim() ? patch.sourceText : (existingCard?.sourceText ?? ''),
+		status: patch.status,
+		targetLanguageCode: patch.targetLanguageCode,
+		translatedText: patch.translatedText,
+		...(patch.status === 'error' ? { errorMessage: patch.translatedText } : {}),
+		...(patch.responseId ? { responseId: patch.responseId } : {})
+	}
+	return insertCardByPreviousItemId(cardList, nextCard)
 }
 
 function getDirectionColorClass(direction: UtteranceDirection): string {
@@ -154,8 +207,6 @@ function getDirectionColorClass(direction: UtteranceDirection): string {
 			return 'var(--lilac-direction-primary)'
 		case 'secondary_to_primary':
 			return 'var(--lilac-direction-secondary)'
-		case 'to_target':
-			return 'var(--lilac-direction-transcribe)'
 		default:
 			return 'var(--lilac-ink-muted)'
 	}
@@ -163,24 +214,27 @@ function getDirectionColorClass(direction: UtteranceDirection): string {
 
 type LilacModeRuntimeContextValue = {
 	chatInstructions: string
+	chatSpeechOutputEnabled: boolean
 	chatTranscripts: ChatTranscriptMessage[]
 	chatTurnDelaySeconds: number
 	clearCurrentModeHistory: () => void
 	connectionState: ModeConnectionState
-	errorMessage: string | null
+	errorMessage: null | string
 	getDirectionColor: (direction: UtteranceDirection) => string
 	mode: LilacMode
 	reconnectCurrentMode: () => void
 	remoteAudioStream: MediaStream | null
 	setChatInstructions: (instructions: string) => void
+	setChatSpeechOutputEnabled: (speechOutputEnabled: boolean) => void
 	setChatTurnDelaySeconds: (seconds: number) => void
 	setMode: (mode: LilacMode) => void
-	setTranscribeSettings: (nextSettings: TranscribeSettings) => void
 	setTranslateSettings: (nextSettings: TranslateSettings) => void
-	transcribeCards: UtteranceCard[]
-	transcribeSettings: TranscribeSettings
+	setVoiceInputEnabled: (voiceInputEnabled: boolean) => void
+	submitChatTextInput: (text: string) => void
+	submitTranslateTextInput: (text: string) => void
 	translateCards: UtteranceCard[]
 	translateSettings: TranslateSettings
+	voiceInputEnabled: boolean
 }
 
 const LilacModeRuntimeContext = createContext<LilacModeRuntimeContextValue | null>(null)
@@ -188,46 +242,62 @@ const LilacModeRuntimeContext = createContext<LilacModeRuntimeContextValue | nul
 export function LilacModeRuntimeProvider({ children }: { children: ReactNode }) {
 	const [mode, setModeState] = useState<LilacMode>('chat')
 	const [connectionState, setConnectionState] = useState<ModeConnectionState>('idle')
-	const [errorMessage, setErrorMessage] = useState<string | null>(null)
+	const [errorMessage, setErrorMessage] = useState<null | string>(null)
 	const [chatInstructions, setChatInstructionsState] = useState(defaultChatInstructions)
 	const [chatTurnDelaySeconds, setChatTurnDelaySecondsState] = useState(1.2)
 	const [chatTranscripts, setChatTranscripts] = useState<ChatTranscriptMessage[]>([])
 	const [translateSettings, setTranslateSettingsState] =
 		useState<TranslateSettings>(defaultTranslateSettings)
 	const [translateCards, setTranslateCards] = useState<UtteranceCard[]>([])
-	const [transcribeSettings, setTranscribeSettingsState] =
-		useState<TranscribeSettings>(defaultTranscribeSettings)
-	const [transcribeCards, setTranscribeCards] = useState<UtteranceCard[]>([])
+	const [globalAudioInputSettings, setGlobalAudioInputSettings] = useState<GlobalAudioInputSettings>(
+		defaultGlobalAudioInputSettings
+	)
+	const [chatOutputSettings, setChatOutputSettings] =
+		useState<ChatOutputSettings>(defaultChatOutputSettings)
 	const [remoteAudioStream, setRemoteAudioStream] = useState<MediaStream | null>(null)
 	const [isHydrated, setIsHydrated] = useState(false)
 	const [restartNonce, setRestartNonce] = useState(0)
 
 	const chatClientRef = useRef<ChatRealtimeClient | null>(null)
-	const transcriptionClientRef = useRef<TranscriptionSocketClient | null>(null)
-	const translateCardsRef = useRef<UtteranceCard[]>([])
-	const transcribeCardsRef = useRef<UtteranceCard[]>([])
-	const translationGenerationRef = useRef(0)
+	const liveTranslateClientRef = useRef<LiveTranslateRealtimeClient | null>(null)
+
+	const chatInstructionsRef = useRef(chatInstructions)
+	const chatTurnDelaySecondsRef = useRef(chatTurnDelaySeconds)
+	const translateSettingsRef = useRef(translateSettings)
+	const voiceInputEnabledRef = useRef(globalAudioInputSettings.voiceInputEnabled)
+	const chatSpeechOutputEnabledRef = useRef(chatOutputSettings.speechOutputEnabled)
 
 	useEffect(() => {
-		translateCardsRef.current = translateCards
-	}, [translateCards])
+		chatInstructionsRef.current = chatInstructions
+	}, [chatInstructions])
 
 	useEffect(() => {
-		transcribeCardsRef.current = transcribeCards
-	}, [transcribeCards])
+		chatTurnDelaySecondsRef.current = chatTurnDelaySeconds
+	}, [chatTurnDelaySeconds])
+
+	useEffect(() => {
+		translateSettingsRef.current = translateSettings
+	}, [translateSettings])
+
+	useEffect(() => {
+		voiceInputEnabledRef.current = globalAudioInputSettings.voiceInputEnabled
+	}, [globalAudioInputSettings.voiceInputEnabled])
+
+	useEffect(() => {
+		chatSpeechOutputEnabledRef.current = chatOutputSettings.speechOutputEnabled
+	}, [chatOutputSettings.speechOutputEnabled])
 
 	const stopAllClients = useCallback(() => {
 		chatClientRef.current?.stop()
 		chatClientRef.current = null
-		transcriptionClientRef.current?.stop()
-		transcriptionClientRef.current = null
+		liveTranslateClientRef.current?.stop()
+		liveTranslateClientRef.current = null
 		setRemoteAudioStream(null)
 	}, [])
 
 	const clearAllInMemoryState = useCallback(() => {
 		setChatTranscripts([])
 		setTranslateCards([])
-		setTranscribeCards([])
 	}, [])
 
 	const clearStateForMode = useCallback((nextMode: LilacMode) => {
@@ -238,160 +308,11 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			case 'translate':
 				setTranslateCards([])
 				return
-			case 'transcribe':
-				setTranscribeCards([])
-				return
 			default:
 				return
 		}
 	}, [])
 
-	const runTranslationForCard = useCallback(
-		async (currentMode: 'translate' | 'transcribe', cardId: string, sourceText: string) => {
-			const generationAtStart = translationGenerationRef.current
-			try {
-				if (currentMode === 'translate') {
-					const compactedContext = await compactTranslationContextAction({
-						context: buildTranslationContextFromCards(translateCardsRef.current)
-					})
-					const output = await translateUtteranceAction({
-						context: compactedContext.compactedContext,
-						settings: {
-							mode: 'translate',
-							primaryLanguageCode: translateSettings.primaryLanguageCode,
-							secondaryLanguageCode: translateSettings.secondaryLanguageCode
-						},
-						utteranceText: sourceText
-					})
-
-					if (generationAtStart !== translationGenerationRef.current) return
-
-					setTranslateCards(previousCards => {
-						const cardIndex = previousCards.findIndex(card => card.id === cardId)
-						if (cardIndex === -1) return previousCards
-						const nextCards = previousCards.slice()
-						const existingCard = nextCards[cardIndex]
-						if (!existingCard) return previousCards
-						nextCards[cardIndex] = {
-							...existingCard,
-							direction: output.direction,
-							sourceLanguageCode: output.detectedSourceLanguageCode,
-							status: 'final',
-							targetLanguageCode: output.targetLanguageCode,
-							translatedText: output.translatedText
-						}
-						return nextCards
-					})
-					return
-				}
-
-				const compactedContext = await compactTranslationContextAction({
-					context: buildTranslationContextFromCards(transcribeCardsRef.current)
-				})
-				const output = await translateUtteranceAction({
-					context: compactedContext.compactedContext,
-					settings: {
-						mode: 'transcribe',
-						targetLanguageCode: transcribeSettings.targetLanguageCode
-					},
-					utteranceText: sourceText
-				})
-
-				if (generationAtStart !== translationGenerationRef.current) return
-
-				setTranscribeCards(previousCards => {
-					const cardIndex = previousCards.findIndex(card => card.id === cardId)
-					if (cardIndex === -1) return previousCards
-					const nextCards = previousCards.slice()
-					const existingCard = nextCards[cardIndex]
-					if (!existingCard) return previousCards
-					nextCards[cardIndex] = {
-						...existingCard,
-						direction: output.direction,
-						sourceLanguageCode: output.detectedSourceLanguageCode,
-						status: 'final',
-						targetLanguageCode: output.targetLanguageCode,
-						translatedText: output.translatedText
-					}
-					return nextCards
-				})
-			} catch (error) {
-				if (generationAtStart !== translationGenerationRef.current) return
-				const message = error instanceof Error ? error.message : 'Translation failed'
-				switch (currentMode) {
-					case 'translate':
-						setTranslateCards(previousCards => {
-							const cardIndex = previousCards.findIndex(card => card.id === cardId)
-							if (cardIndex === -1) return previousCards
-							const nextCards = previousCards.slice()
-							const existingCard = nextCards[cardIndex]
-							if (!existingCard) return previousCards
-							nextCards[cardIndex] = {
-								...existingCard,
-								errorMessage: message,
-								status: 'error'
-							}
-							return nextCards
-						})
-						return
-					case 'transcribe':
-						setTranscribeCards(previousCards => {
-							const cardIndex = previousCards.findIndex(card => card.id === cardId)
-							if (cardIndex === -1) return previousCards
-							const nextCards = previousCards.slice()
-							const existingCard = nextCards[cardIndex]
-							if (!existingCard) return previousCards
-							nextCards[cardIndex] = {
-								...existingCard,
-								errorMessage: message,
-								status: 'error'
-							}
-							return nextCards
-						})
-						return
-					default:
-						return
-				}
-			}
-		},
-		[
-			transcribeSettings.targetLanguageCode,
-			translateSettings.primaryLanguageCode,
-			translateSettings.secondaryLanguageCode
-		]
-	)
-
-	const handleTranscriptionPatch = useCallback(
-		(currentMode: 'translate' | 'transcribe', patch: TranscriptionPatch) => {
-			const fallbackDirection: UtteranceDirection =
-				currentMode === 'translate' ? 'primary_to_secondary' : 'to_target'
-
-			switch (currentMode) {
-				case 'translate': {
-					setTranslateCards(previousCards =>
-						upsertStreamingCard(previousCards, patch, fallbackDirection)
-					)
-					if (patch.status === 'final' && patch.text.trim().length > 0) {
-						void runTranslationForCard('translate', patch.itemId, patch.text)
-					}
-					return
-				}
-				case 'transcribe': {
-					setTranscribeCards(previousCards =>
-						upsertStreamingCard(previousCards, patch, fallbackDirection)
-					)
-					if (patch.status === 'final' && patch.text.trim().length > 0) {
-						void runTranslationForCard('transcribe', patch.itemId, patch.text)
-					}
-					return
-				}
-				default:
-					return
-			}
-		},
-		[runTranslationForCard]
-	)
-
 	const startChatClient = useCallback(() => {
 		stopAllClients()
 		const chatClient = new ChatRealtimeClient({
@@ -427,58 +348,61 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		})
 		chatClientRef.current = chatClient
 		void chatClient.start({
-			instructions: chatInstructions,
-			model: 'gpt-realtime',
-			turnDelaySeconds: chatTurnDelaySeconds,
-			voice: 'verse'
+			instructions: chatInstructionsRef.current,
+			model: defaultChatRealtimeModel,
+			speechOutputEnabled: chatSpeechOutputEnabledRef.current,
+			turnDelaySeconds: chatTurnDelaySecondsRef.current,
+			voice: 'verse',
+			voiceInputEnabled: voiceInputEnabledRef.current
 		})
-	}, [chatInstructions, chatTurnDelaySeconds, stopAllClients])
+	}, [stopAllClients])
 
-	const startTranscriptionClient = useCallback(
-		(currentMode: 'translate' | 'transcribe') => {
-			stopAllClients()
-			const transcriptionClient = new TranscriptionSocketClient({
-				onConnectionStateChange: state => {
-					switch (state) {
-						case 'connected':
-							setConnectionState('connected')
-							setErrorMessage(null)
-							return
-						case 'connecting':
-							setConnectionState('connecting')
-							return
-						case 'disconnected':
-							setConnectionState('idle')
-							return
-						case 'error':
-							setConnectionState('error')
-							return
-						default:
-							return
-					}
-				},
-				onError: message => {
-					setErrorMessage(message)
-					setConnectionState('error')
-				},
-				onPatch: patch => {
-					handleTranscriptionPatch(currentMode, patch)
+	const startLiveTranslateClient = useCallback(() => {
+		stopAllClients()
+		const translateClient = new LiveTranslateRealtimeClient({
+			onConnectionStateChange: state => {
+				switch (state) {
+					case 'connected':
+						setConnectionState('connected')
+						setErrorMessage(null)
+						return
+					case 'connecting':
+						setConnectionState('connecting')
+						return
+					case 'disconnected':
+						setConnectionState('idle')
+						return
+					case 'error':
+						setConnectionState('error')
+						return
+					default:
+						return
 				}
-			})
-			transcriptionClientRef.current = transcriptionClient
-			void transcriptionClient.start({
-				model: 'gpt-4o-transcribe',
-				turnDelaySeconds: chatTurnDelaySeconds,
-				...(currentMode === 'transcribe' ? { languageHint: transcribeSettings.targetLanguageCode } : {})
-			})
-		},
-		[
-			chatTurnDelaySeconds,
-			handleTranscriptionPatch,
-			stopAllClients,
-			transcribeSettings.targetLanguageCode
-		]
-	)
+			},
+			onError: message => {
+				setErrorMessage(message)
+				setConnectionState('error')
+			},
+			onResultPatch: patch => {
+				setTranslateCards(previousCards =>
+					applyTranslateResultPatch(previousCards, patch, translateSettingsRef.current)
+				)
+			},
+			onSourcePatch: patch => {
+				setTranslateCards(previousCards =>
+					upsertTranslateSourcePatch(previousCards, patch, translateSettingsRef.current)
+				)
+			}
+		})
+		liveTranslateClientRef.current = translateClient
+		void translateClient.start({
+			model: defaultChatRealtimeModel,
+			primaryLanguageCode: translateSettingsRef.current.primaryLanguageCode,
+			secondaryLanguageCode: translateSettingsRef.current.secondaryLanguageCode,
+			turnDelaySeconds: chatTurnDelaySecondsRef.current,
+			voiceInputEnabled: voiceInputEnabledRef.current
+		})
+	}, [stopAllClients])
 
 	const startModeRuntime = useCallback(
 		(nextMode: LilacMode) => {
@@ -489,30 +413,26 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 					startChatClient()
 					return
 				case 'translate':
-					startTranscriptionClient('translate')
-					return
-				case 'transcribe':
-					startTranscriptionClient('transcribe')
+					startLiveTranslateClient()
 					return
 				default:
 					return
 			}
 		},
-		[startChatClient, startTranscriptionClient]
+		[startChatClient, startLiveTranslateClient]
 	)
 
 	const setMode = useCallback(
 		(nextMode: LilacMode) => {
-			translationGenerationRef.current += 1
+			if (nextMode === mode) return
 			stopAllClients()
 			clearAllInMemoryState()
 			setModeState(nextMode)
 		},
-		[clearAllInMemoryState, stopAllClients]
+		[clearAllInMemoryState, mode, stopAllClients]
 	)
 
 	const reconnectCurrentMode = useCallback(() => {
-		translationGenerationRef.current += 1
 		stopAllClients()
 		clearStateForMode(mode)
 		setRestartNonce(previousNonce => previousNonce + 1)
@@ -530,19 +450,60 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		setChatTurnDelaySecondsState(normalizeTurnDelaySeconds(seconds))
 	}, [])
 
-	const setTranslateSettings = useCallback((nextSettings: TranslateSettings) => {
-		setTranslateSettingsState(nextSettings)
+	const setTranslateSettings = useCallback(
+		(nextSettings: TranslateSettings) => {
+			setTranslateSettingsState(nextSettings)
+			if (mode === 'translate') {
+				liveTranslateClientRef.current?.updateTranslateSettings({
+					primaryLanguageCode: nextSettings.primaryLanguageCode,
+					secondaryLanguageCode: nextSettings.secondaryLanguageCode,
+					turnDelaySeconds: chatTurnDelaySecondsRef.current
+				})
+			}
+		},
+		[mode]
+	)
+
+	const setVoiceInputEnabled = useCallback(
+		(voiceInputEnabled: boolean) => {
+			setGlobalAudioInputSettings({ voiceInputEnabled })
+			switch (mode) {
+				case 'chat':
+					void chatClientRef.current?.updateVoiceInputEnabled(voiceInputEnabled)
+					return
+				case 'translate':
+					void liveTranslateClientRef.current?.updateVoiceInputEnabled(voiceInputEnabled)
+					return
+				default:
+					return
+			}
+		},
+		[mode]
+	)
+
+	const setChatSpeechOutputEnabled = useCallback(
+		(speechOutputEnabled: boolean) => {
+			setChatOutputSettings({ speechOutputEnabled })
+			if (mode === 'chat') {
+				chatClientRef.current?.updateSpeechOutputEnabled(speechOutputEnabled)
+			}
+		},
+		[mode]
+	)
+
+	const submitChatTextInput = useCallback((text: string) => {
+		chatClientRef.current?.submitTextInput(text)
 	}, [])
 
-	const setTranscribeSettings = useCallback((nextSettings: TranscribeSettings) => {
-		setTranscribeSettingsState(nextSettings)
+	const submitTranslateTextInput = useCallback((text: string) => {
+		liveTranslateClientRef.current?.submitTextInput(text)
 	}, [])
 
 	useEffect(() => {
 		if (typeof window === 'undefined') return
 
 		const storedMode = window.localStorage.getItem(storageKeys.mode)
-		if (storedMode === 'chat' || storedMode === 'translate' || storedMode === 'transcribe') {
+		if (storedMode === 'chat' || storedMode === 'translate') {
 			setModeState(storedMode)
 		}
 
@@ -567,12 +528,21 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			})
 		}
 
-		const storedTranscribeTargetLanguageCode = window.localStorage.getItem(
-			storageKeys.transcribeTargetLanguage
-		)
-		if (storedTranscribeTargetLanguageCode) {
-			setTranscribeSettingsState({ targetLanguageCode: storedTranscribeTargetLanguageCode })
-		}
+		const storedVoiceInputEnabled = window.localStorage.getItem(storageKeys.voiceInputEnabled)
+		setGlobalAudioInputSettings({
+			voiceInputEnabled: parseStoredBoolean(
+				storedVoiceInputEnabled,
+				defaultGlobalAudioInputSettings.voiceInputEnabled
+			)
+		})
+
+		const storedSpeechOutputEnabled = window.localStorage.getItem(storageKeys.chatSpeechOutputEnabled)
+		setChatOutputSettings({
+			speechOutputEnabled: parseStoredBoolean(
+				storedSpeechOutputEnabled,
+				defaultChatOutputSettings.speechOutputEnabled
+			)
+		})
 
 		setIsHydrated(true)
 	}, [])
@@ -591,8 +561,27 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	useEffect(() => {
 		if (!isHydrated) return
 		window.localStorage.setItem(storageKeys.chatTurnDelaySeconds, String(chatTurnDelaySeconds))
-		if (mode === 'chat') chatClientRef.current?.updateTurnDelaySeconds(chatTurnDelaySeconds)
-	}, [chatTurnDelaySeconds, isHydrated, mode])
+		switch (mode) {
+			case 'chat':
+				chatClientRef.current?.updateTurnDelaySeconds(chatTurnDelaySeconds)
+				return
+			case 'translate':
+				liveTranslateClientRef.current?.updateTranslateSettings({
+					primaryLanguageCode: translateSettings.primaryLanguageCode,
+					secondaryLanguageCode: translateSettings.secondaryLanguageCode,
+					turnDelaySeconds: chatTurnDelaySeconds
+				})
+				return
+			default:
+				return
+		}
+	}, [
+		chatTurnDelaySeconds,
+		isHydrated,
+		mode,
+		translateSettings.primaryLanguageCode,
+		translateSettings.secondaryLanguageCode
+	])
 
 	useEffect(() => {
 		if (!isHydrated) return
@@ -609,15 +598,37 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	useEffect(() => {
 		if (!isHydrated) return
 		window.localStorage.setItem(
-			storageKeys.transcribeTargetLanguage,
-			transcribeSettings.targetLanguageCode
+			storageKeys.voiceInputEnabled,
+			String(globalAudioInputSettings.voiceInputEnabled)
+		)
+		switch (mode) {
+			case 'chat':
+				void chatClientRef.current?.updateVoiceInputEnabled(globalAudioInputSettings.voiceInputEnabled)
+				return
+			case 'translate':
+				void liveTranslateClientRef.current?.updateVoiceInputEnabled(
+					globalAudioInputSettings.voiceInputEnabled
+				)
+				return
+			default:
+				return
+		}
+	}, [globalAudioInputSettings.voiceInputEnabled, isHydrated, mode])
+
+	useEffect(() => {
+		if (!isHydrated) return
+		window.localStorage.setItem(
+			storageKeys.chatSpeechOutputEnabled,
+			String(chatOutputSettings.speechOutputEnabled)
 		)
-	}, [isHydrated, transcribeSettings.targetLanguageCode])
+		if (mode === 'chat') {
+			chatClientRef.current?.updateSpeechOutputEnabled(chatOutputSettings.speechOutputEnabled)
+		}
+	}, [chatOutputSettings.speechOutputEnabled, isHydrated, mode])
 
 	useEffect(() => {
 		if (!isHydrated) return
 		void restartNonce
-		translationGenerationRef.current += 1
 		startModeRuntime(mode)
 		return () => {
 			stopAllClients()
@@ -627,6 +638,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	const contextValue = useMemo<LilacModeRuntimeContextValue>(
 		() => ({
 			chatInstructions,
+			chatSpeechOutputEnabled: chatOutputSettings.speechOutputEnabled,
 			chatTranscripts,
 			chatTurnDelaySeconds,
 			clearCurrentModeHistory,
@@ -637,17 +649,20 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			reconnectCurrentMode,
 			remoteAudioStream,
 			setChatInstructions,
+			setChatSpeechOutputEnabled,
 			setChatTurnDelaySeconds,
 			setMode,
-			setTranscribeSettings,
 			setTranslateSettings,
-			transcribeCards,
-			transcribeSettings,
+			setVoiceInputEnabled,
+			submitChatTextInput,
+			submitTranslateTextInput,
 			translateCards,
-			translateSettings
+			translateSettings,
+			voiceInputEnabled: globalAudioInputSettings.voiceInputEnabled
 		}),
 		[
 			chatInstructions,
+			chatOutputSettings.speechOutputEnabled,
 			chatTranscripts,
 			chatTurnDelaySeconds,
 			clearCurrentModeHistory,
@@ -657,14 +672,16 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			reconnectCurrentMode,
 			remoteAudioStream,
 			setChatInstructions,
+			setChatSpeechOutputEnabled,
 			setChatTurnDelaySeconds,
 			setMode,
-			setTranscribeSettings,
 			setTranslateSettings,
-			transcribeCards,
-			transcribeSettings,
+			setVoiceInputEnabled,
+			submitChatTextInput,
+			submitTranslateTextInput,
 			translateCards,
-			translateSettings
+			translateSettings,
+			globalAudioInputSettings.voiceInputEnabled
 		]
 	)
 
diff --git a/src/realtime/modelConfig.ts b/src/realtime/modelConfig.ts
new file mode 100644
index 0000000..676d17c
--- /dev/null
+++ b/src/realtime/modelConfig.ts
@@ -0,0 +1,23 @@
+import { z } from 'zod'
+
+export const chatRealtimeModelValues = ['gpt-realtime-1.5'] as const
+export const transcriptionModelValues = ['gpt-4o-transcribe'] as const
+export const translationModelValues = ['gpt-5.3-codex'] as const
+
+export const ChatRealtimeModelSchema = z.enum(chatRealtimeModelValues)
+export const TranscriptionModelSchema = z.enum(transcriptionModelValues)
+export const TranslationModelSchema = z.enum(translationModelValues)
+
+export const defaultChatRealtimeModel = 'gpt-realtime-1.5'
+export const defaultTranscriptionModel = 'gpt-4o-transcribe'
+export const defaultTranslationModel = 'gpt-5.3-codex'
+
+export const AllowedLilacModelSchema = z.union([
+	ChatRealtimeModelSchema,
+	TranscriptionModelSchema,
+	TranslationModelSchema
+])
+
+export type ChatRealtimeModel = z.infer<typeof ChatRealtimeModelSchema>
+export type TranscriptionModel = z.infer<typeof TranscriptionModelSchema>
+export type TranslationModel = z.infer<typeof TranslationModelSchema>
diff --git a/src/realtime/schemas.ts b/src/realtime/schemas.ts
index 2f7fbe1..91e4209 100644
--- a/src/realtime/schemas.ts
+++ b/src/realtime/schemas.ts
@@ -1,10 +1,15 @@
 import { z } from 'zod'
 
+import {
+	ChatRealtimeModelSchema,
+	defaultChatRealtimeModel,
+	defaultTranscriptionModel
+} from '@/realtime/modelConfig'
 import { languageOptions } from '@/realtime/sessionTypes'
 
 const languageCodeValues = languageOptions.map(option => option.code)
 
-const LanguageCodeSchema = z
+export const LanguageCodeSchema = z
 	.string()
 	.min(2)
 	.transform(value => value.trim().toLowerCase())
@@ -31,7 +36,8 @@ const RealtimeSessionClientSecretResponseSchema = z.object({
 
 export const CreateRealtimeClientSecretActionInputSchema = z.object({
 	instructions: z.string().max(12000).optional(),
-	model: z.string().default('gpt-realtime'),
+	model: ChatRealtimeModelSchema.default(defaultChatRealtimeModel),
+	speechOutputEnabled: z.boolean().default(true),
 	turnDelaySeconds: z.number().min(0.2).max(6).default(1.2),
 	voice: z.string().default('verse')
 })
@@ -41,69 +47,48 @@ export const CreateRealtimeClientSecretActionOutputSchema = z.object({
 	value: z.string().min(1)
 })
 
-export const CreateRealtimeTranscriptionSessionActionInputSchema = z.object({
-	languageHint: LanguageCodeSchema.optional(),
-	model: z.string().default('gpt-4o-transcribe'),
+export const CreateTranslateRealtimeClientSecretActionInputSchema = z.object({
+	model: ChatRealtimeModelSchema.default(defaultChatRealtimeModel),
+	primaryLanguageCode: KnownLanguageCodeSchema,
+	secondaryLanguageCode: KnownLanguageCodeSchema,
 	turnDelaySeconds: z.number().min(0.2).max(6).default(1.2)
 })
 
-export const CreateRealtimeTranscriptionSessionActionOutputSchema = z.object({
+export const CreateTranslateRealtimeClientSecretActionOutputSchema = z.object({
 	expiresAt: z.number(),
 	value: z.string().min(1)
 })
 
-export const TranslationContextEntrySchema = z.object({
-	direction: z.enum(['primary_to_secondary', 'secondary_to_primary', 'to_target']),
+export const PublishTranslationToolArgumentsSchema = z.object({
+	direction: z.enum(['primary_to_secondary', 'secondary_to_primary']),
 	sourceLanguageCode: LanguageCodeSchema,
 	sourceText: z.string().min(1),
 	targetLanguageCode: LanguageCodeSchema,
 	translatedText: z.string().min(1)
 })
 
-const TranslateModeSettingsSchema = z.object({
-	mode: z.literal('translate'),
-	primaryLanguageCode: KnownLanguageCodeSchema,
-	secondaryLanguageCode: KnownLanguageCodeSchema
-})
-
-const TranscribeModeSettingsSchema = z.object({
-	mode: z.literal('transcribe'),
-	targetLanguageCode: KnownLanguageCodeSchema
-})
-
-export const TranslateUtteranceActionInputSchema = z.object({
-	context: z.array(TranslationContextEntrySchema).max(16).default([]),
-	model: z.string().default('gpt-4.1-mini'),
-	settings: z.union([TranslateModeSettingsSchema, TranscribeModeSettingsSchema]),
-	utteranceText: z.string().min(1).max(5000)
-})
-
-export const TranslateUtteranceActionOutputSchema = z.object({
-	detectedSourceLanguageCode: LanguageCodeSchema,
-	direction: z.enum(['primary_to_secondary', 'secondary_to_primary', 'to_target']),
-	targetLanguageCode: LanguageCodeSchema,
-	translatedText: z.string().min(1)
-})
-
-export const CompactTranslationContextActionInputSchema = z.object({
-	context: z.array(TranslationContextEntrySchema).max(200),
-	model: z.string().default('gpt-4.1-mini')
-})
-
-export const CompactTranslationContextActionOutputSchema = z.object({
-	compactedContext: z.array(TranslationContextEntrySchema),
-	performedCompaction: z.boolean()
-})
-
 export const RealtimeBaseServerEventSchema = z
 	.object({
 		type: z.string().min(1)
 	})
 	.passthrough()
 
+export const RealtimeErrorEventSchema = z
+	.object({
+		error: z
+			.object({
+				message: z.string().optional()
+			})
+			.passthrough()
+			.optional(),
+		type: z.literal('error')
+	})
+	.passthrough()
+
 export const InputAudioBufferCommittedEventSchema = z
 	.object({
 		item_id: z.string(),
+		previous_item_id: z.string().nullable().optional(),
 		type: z.literal('input_audio_buffer.committed')
 	})
 	.passthrough()
@@ -151,13 +136,6 @@ export const ResponseOutputAudioTranscriptDeltaEventSchema = z
 	})
 	.passthrough()
 
-export const ResponseDoneEventSchema = z
-	.object({
-		response_id: z.string().optional(),
-		type: z.literal('response.done')
-	})
-	.passthrough()
-
 export const ResponseOutputItemAddedEventSchema = z
 	.object({
 		item: z
@@ -170,6 +148,32 @@ export const ResponseOutputItemAddedEventSchema = z
 	})
 	.passthrough()
 
+const ResponseDoneFunctionCallItemSchema = z
+	.object({
+		arguments: z.string().optional(),
+		call_id: z.string().optional(),
+		id: z.string().optional(),
+		name: z.string().optional(),
+		type: z.string()
+	})
+	.passthrough()
+
+export const ResponseDoneEventSchema = z
+	.object({
+		response: z
+			.object({
+				id: z.string().optional(),
+				metadata: z.record(z.string(), z.unknown()).optional(),
+				output: z.array(ResponseDoneFunctionCallItemSchema).optional(),
+				status: z.string().optional()
+			})
+			.passthrough()
+			.optional(),
+		response_id: z.string().optional(),
+		type: z.literal('response.done')
+	})
+	.passthrough()
+
 export function parseClientSecretResponse(value: unknown): { expiresAt: number; value: string } {
 	const directSecret = RealtimeClientSecretResponseSchema.safeParse(value)
 	if (directSecret.success) {
@@ -189,3 +193,5 @@ export function parseClientSecretResponse(value: unknown): { expiresAt: number;
 
 	throw new Error('OpenAI response did not include an ephemeral client secret')
 }
+
+export const defaultInputTranscriptionModel = defaultTranscriptionModel
diff --git a/src/realtime/sessionTypes.ts b/src/realtime/sessionTypes.ts
index 9e3be48..8ab9234 100644
--- a/src/realtime/sessionTypes.ts
+++ b/src/realtime/sessionTypes.ts
@@ -1,22 +1,29 @@
-export type LilacMode = 'chat' | 'translate' | 'transcribe'
+export type LilacMode = 'chat' | 'translate'
 
 export type ModeConnectionState = 'idle' | 'connecting' | 'connected' | 'error'
 
+export type GlobalAudioInputSettings = {
+	voiceInputEnabled: boolean
+}
+
+export type ChatOutputSettings = {
+	speechOutputEnabled: boolean
+}
+
 export type TranslateSettings = {
 	primaryLanguageCode: string
 	secondaryLanguageCode: string
 }
 
-export type TranscribeSettings = {
-	targetLanguageCode: string
-}
-
-export type UtteranceDirection = 'primary_to_secondary' | 'secondary_to_primary' | 'to_target'
+export type UtteranceDirection = 'primary_to_secondary' | 'secondary_to_primary'
 
 export type UtteranceStatus = 'streaming' | 'translating' | 'final' | 'error'
 
 export type UtteranceCard = {
 	id: string
+	sourceItemId: string
+	responseId?: string
+	inputOrigin: 'audio' | 'text'
 	sourceText: string
 	sourceLanguageCode: string
 	translatedText: string
@@ -43,14 +50,6 @@ export type ChatTranscriptMessage = {
 	createdAt: number
 }
 
-export type TranslationContextEntry = {
-	sourceText: string
-	sourceLanguageCode: string
-	translatedText: string
-	targetLanguageCode: string
-	direction: UtteranceDirection
-}
-
 export const languageOptions = [
 	{ code: 'en', label: 'English' },
 	{ code: 'es', label: 'Spanish' },
diff --git a/src/realtime/transcriptionSocketClient.ts b/src/realtime/transcriptionSocketClient.ts
deleted file mode 100644
index c6583b5..0000000
--- a/src/realtime/transcriptionSocketClient.ts
+++ /dev/null
@@ -1,329 +0,0 @@
-'use client'
-
-import { createRealtimeTranscriptionSessionAction } from '@/app/actions/realtime'
-import {
-	InputAudioBufferCommittedEventSchema,
-	InputAudioTranscriptionCompletedEventSchema,
-	InputAudioTranscriptionDeltaEventSchema,
-	RealtimeBaseServerEventSchema
-} from '@/realtime/schemas'
-
-export type TranscriptionSocketClientState = 'connecting' | 'connected' | 'disconnected' | 'error'
-
-export type TranscriptionPatch = {
-	itemId: string
-	previousItemId?: null | string
-	status: 'final' | 'streaming'
-	text: string
-}
-
-export type StartTranscriptionSocketClientInput = {
-	languageHint?: string
-	model: string
-	turnDelaySeconds: number
-}
-
-export type TranscriptionSocketClientCallbacks = {
-	onConnectionStateChange: (state: TranscriptionSocketClientState) => void
-	onError: (message: string) => void
-	onPatch: (patch: TranscriptionPatch) => void
-}
-
-function float32ToPcm16(float32Samples: Float32Array): ArrayBuffer {
-	const pcm16 = new Int16Array(float32Samples.length)
-	for (let sampleIndex = 0; sampleIndex < float32Samples.length; sampleIndex += 1) {
-		const sample = Math.max(-1, Math.min(1, float32Samples[sampleIndex] ?? 0))
-		pcm16[sampleIndex] = sample < 0 ? sample * 0x8000 : sample * 0x7fff
-	}
-	return pcm16.buffer
-}
-
-function arrayBufferToBase64(buffer: ArrayBuffer): string {
-	let binary = ''
-	const bytes = new Uint8Array(buffer)
-	for (let index = 0; index < bytes.length; index += 1) {
-		binary += String.fromCharCode(bytes[index] ?? 0)
-	}
-	return window.btoa(binary)
-}
-
-function downsampleFloat32Audio(
-	float32Samples: Float32Array,
-	inputSampleRate: number,
-	outputSampleRate: number
-): Float32Array {
-	if (inputSampleRate === outputSampleRate) return float32Samples
-
-	const sampleRateRatio = inputSampleRate / outputSampleRate
-	const downsampledLength = Math.max(1, Math.round(float32Samples.length / sampleRateRatio))
-	const downsampledSamples = new Float32Array(downsampledLength)
-
-	let sourceIndex = 0
-	for (let outputIndex = 0; outputIndex < downsampledLength; outputIndex += 1) {
-		const nextSourceIndex = Math.round((outputIndex + 1) * sampleRateRatio)
-		let accumulator = 0
-		let sampleCount = 0
-
-		while (sourceIndex < nextSourceIndex && sourceIndex < float32Samples.length) {
-			accumulator += float32Samples[sourceIndex] ?? 0
-			sampleCount += 1
-			sourceIndex += 1
-		}
-
-		if (sampleCount > 0) {
-			downsampledSamples[outputIndex] = accumulator / sampleCount
-			continue
-		}
-
-		const fallbackSourceIndex = Math.min(
-			float32Samples.length - 1,
-			Math.round(outputIndex * sampleRateRatio)
-		)
-		downsampledSamples[outputIndex] = float32Samples[fallbackSourceIndex] ?? 0
-	}
-
-	return downsampledSamples
-}
-
-export class TranscriptionSocketClient {
-	private audioContext: AudioContext | null = null
-	private audioProcessor: ScriptProcessorNode | null = null
-	private audioSource: MediaStreamAudioSourceNode | null = null
-	private callbacks: TranscriptionSocketClientCallbacks
-	private generation = 0
-	private microphoneStream: MediaStream | null = null
-	private websocket: WebSocket | null = null
-
-	public constructor(callbacks: TranscriptionSocketClientCallbacks) {
-		this.callbacks = callbacks
-	}
-
-	public async start(input: StartTranscriptionSocketClientInput): Promise<void> {
-		this.stop()
-		this.generation += 1
-		const generation = this.generation
-		this.callbacks.onConnectionStateChange('connecting')
-
-		try {
-			const clientSecret = await createRealtimeTranscriptionSessionAction({
-				languageHint: input.languageHint,
-				model: input.model,
-				turnDelaySeconds: input.turnDelaySeconds
-			})
-
-			if (generation !== this.generation) return
-
-			const websocketProtocols = ['realtime', `openai-insecure-api-key.${clientSecret.value}`]
-			const websocket = new WebSocket(
-				'wss://api.openai.com/v1/realtime?intent=transcription',
-				websocketProtocols
-			)
-			this.websocket = websocket
-
-			websocket.addEventListener('open', () => {
-				if (generation !== this.generation) return
-				this.callbacks.onConnectionStateChange('connected')
-				this.sendEvent({
-					session: {
-						audio: {
-							input: {
-								format: {
-									rate: 24000,
-									type: 'audio/pcm'
-								},
-								noise_reduction: {
-									type: 'near_field'
-								},
-								transcription: {
-									model: input.model,
-									...(input.languageHint ? { language: input.languageHint } : {})
-								},
-								turn_detection: {
-									create_response: false,
-									interrupt_response: false,
-									silence_duration_ms: Math.round(input.turnDelaySeconds * 1000),
-									type: 'server_vad'
-								}
-							}
-						},
-						type: 'transcription'
-					},
-					type: 'transcription_session.update'
-				})
-			})
-
-			websocket.addEventListener('message', event => {
-				this.handleRealtimeEvent(event.data)
-			})
-
-			websocket.addEventListener('error', () => {
-				if (generation !== this.generation) return
-				this.callbacks.onConnectionStateChange('error')
-				this.callbacks.onError('Realtime transcription socket error')
-			})
-
-			websocket.addEventListener('close', () => {
-				if (generation !== this.generation) return
-				this.callbacks.onConnectionStateChange('disconnected')
-			})
-
-			await this.startMicrophoneStreaming(generation)
-		} catch (error) {
-			if (generation !== this.generation) return
-			const fallbackMessage = 'Unable to start transcription mode.'
-			if (error instanceof Error) this.callbacks.onError(error.message || fallbackMessage)
-			else this.callbacks.onError(fallbackMessage)
-			this.callbacks.onConnectionStateChange('error')
-			this.stop()
-		}
-	}
-
-	public stop(): void {
-		this.generation += 1
-
-		try {
-			this.websocket?.close()
-		} catch {}
-		this.websocket = null
-
-		try {
-			this.audioProcessor?.disconnect()
-		} catch {}
-		this.audioProcessor = null
-
-		try {
-			this.audioSource?.disconnect()
-		} catch {}
-		this.audioSource = null
-
-		for (const track of this.microphoneStream?.getTracks() ?? []) {
-			track.stop()
-		}
-		this.microphoneStream = null
-
-		if (this.audioContext) {
-			void this.audioContext.close().catch(() => {})
-		}
-		this.audioContext = null
-
-		this.callbacks.onConnectionStateChange('disconnected')
-	}
-
-	private handleRealtimeEvent(rawData: unknown): void {
-		try {
-			const candidate = typeof rawData === 'string' ? JSON.parse(rawData) : rawData
-			const baseEvent = RealtimeBaseServerEventSchema.parse(candidate)
-
-			switch (baseEvent.type) {
-				case 'input_audio_buffer.committed': {
-					const event = InputAudioBufferCommittedEventSchema.parse(candidate)
-					const previousItemId =
-						typeof candidate === 'object' &&
-						candidate !== null &&
-						'previous_item_id' in candidate &&
-						typeof (candidate as { previous_item_id?: unknown }).previous_item_id === 'string'
-							? ((candidate as { previous_item_id: string }).previous_item_id ?? null)
-							: null
-					this.callbacks.onPatch({
-						itemId: event.item_id,
-						previousItemId,
-						status: 'streaming',
-						text: ''
-					})
-					return
-				}
-				case 'conversation.item.input_audio_transcription.delta': {
-					const event = InputAudioTranscriptionDeltaEventSchema.parse(candidate)
-					this.callbacks.onPatch({
-						itemId: event.item_id,
-						status: 'streaming',
-						text: event.delta
-					})
-					return
-				}
-				case 'conversation.item.input_audio_transcription.completed': {
-					const event = InputAudioTranscriptionCompletedEventSchema.parse(candidate)
-					this.callbacks.onPatch({
-						itemId: event.item_id,
-						status: 'final',
-						text: event.transcript
-					})
-					return
-				}
-				case 'error': {
-					const message =
-						typeof candidate === 'object' &&
-						candidate !== null &&
-						'error' in candidate &&
-						typeof (candidate as { error?: { message?: unknown } }).error?.message === 'string'
-							? ((candidate as { error?: { message?: string } }).error?.message ??
-								'Realtime transcription error')
-							: 'Realtime transcription error'
-					this.callbacks.onError(message)
-					return
-				}
-				default:
-					return
-			}
-		} catch {
-			this.callbacks.onError('Failed to parse transcription event payload')
-		}
-	}
-
-	private sendEvent(event: Record<string, unknown>): void {
-		if (!this.websocket) return
-		if (this.websocket.readyState !== WebSocket.OPEN) return
-		try {
-			this.websocket.send(JSON.stringify(event))
-		} catch {}
-	}
-
-	private async startMicrophoneStreaming(generation: number): Promise<void> {
-		const microphoneStream = await navigator.mediaDevices.getUserMedia({
-			audio: {
-				autoGainControl: true,
-				echoCancellation: true,
-				noiseSuppression: true
-			}
-		})
-
-		if (generation !== this.generation) {
-			for (const track of microphoneStream.getTracks()) track.stop()
-			return
-		}
-
-		this.microphoneStream = microphoneStream
-
-		const AudioContextConstructor =
-			window.AudioContext ??
-			(window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext
-		if (!AudioContextConstructor) throw new Error('AudioContext is not supported in this browser')
-
-		const audioContext = new AudioContextConstructor()
-		if (audioContext.state === 'suspended') await audioContext.resume()
-		if (generation !== this.generation) return
-
-		this.audioContext = audioContext
-
-		const audioSource = audioContext.createMediaStreamSource(microphoneStream)
-		const audioProcessor = audioContext.createScriptProcessor(4096, 1, 1)
-		this.audioSource = audioSource
-		this.audioProcessor = audioProcessor
-
-		audioProcessor.onaudioprocess = event => {
-			if (generation !== this.generation) return
-			const float32Samples = event.inputBuffer.getChannelData(0)
-			if (!float32Samples.length) return
-			const downsampled = downsampleFloat32Audio(float32Samples, audioContext.sampleRate, 24000)
-			const pcm16Buffer = float32ToPcm16(downsampled)
-			const base64Audio = arrayBufferToBase64(pcm16Buffer)
-			this.sendEvent({
-				audio: base64Audio,
-				type: 'input_audio_buffer.append'
-			})
-		}
-
-		audioSource.connect(audioProcessor)
-		audioProcessor.connect(audioContext.destination)
-	}
-}

From 4d542fe0315c397e669fcdb3c2de7182b66bea41 Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Tue, 3 Mar 2026 10:26:03 -0500
Subject: [PATCH 04/24] stabilize realtime sessions and migrate app shell to
 shadcn

---
 biome.json                                  |   5 +
 components.json                             |  23 ++
 package.json                                |  17 +-
 scripts/smoke/runLiveConversationSmoke.ts   |  75 +++-
 src/app/(app)/ChatMode.tsx                  | 401 ++++++++++++++------
 src/app/(app)/ModeShell.tsx                 | 154 ++++----
 src/app/(app)/TranslateMode.tsx             | 225 ++++++-----
 src/app/styles.css                          | 198 ++++++----
 src/components/ui/badge.tsx                 |  32 ++
 src/components/ui/button.tsx                |  48 +++
 src/components/ui/dialog.tsx                | 104 +++++
 src/components/ui/input.tsx                 |  22 ++
 src/components/ui/scroll-area.tsx           |  46 +++
 src/components/ui/select.tsx                | 152 ++++++++
 src/components/ui/separator.tsx             |  26 ++
 src/components/ui/sheet.tsx                 | 122 ++++++
 src/components/ui/slider.tsx                |  35 ++
 src/components/ui/switch.tsx                |  29 ++
 src/components/ui/tabs.tsx                  |  55 +++
 src/components/ui/textarea.tsx              |  21 +
 src/lib/utils.ts                            |   6 +
 src/realtime/chatRealtimeClient.ts          | 308 +++++++++------
 src/realtime/liveTranslateRealtimeClient.ts |  50 +--
 src/realtime/modeRuntimeStore.tsx           |  28 +-
 src/realtime/schemas.ts                     |  26 +-
 src/realtime/sessionTypes.ts                |   1 +
 tailwind.config.ts                          |  12 +
 27 files changed, 1678 insertions(+), 543 deletions(-)
 create mode 100644 components.json
 create mode 100644 src/components/ui/badge.tsx
 create mode 100644 src/components/ui/button.tsx
 create mode 100644 src/components/ui/dialog.tsx
 create mode 100644 src/components/ui/input.tsx
 create mode 100644 src/components/ui/scroll-area.tsx
 create mode 100644 src/components/ui/select.tsx
 create mode 100644 src/components/ui/separator.tsx
 create mode 100644 src/components/ui/sheet.tsx
 create mode 100644 src/components/ui/slider.tsx
 create mode 100644 src/components/ui/switch.tsx
 create mode 100644 src/components/ui/tabs.tsx
 create mode 100644 src/components/ui/textarea.tsx
 create mode 100644 src/lib/utils.ts
 create mode 100644 tailwind.config.ts

diff --git a/biome.json b/biome.json
index b628b7b..2737dd8 100644
--- a/biome.json
+++ b/biome.json
@@ -1,4 +1,9 @@
 {
+	"css": {
+		"parser": {
+			"tailwindDirectives": true
+		}
+	},
 	"extends": ["@rubriclab/config/biome"],
 	"files": {
 		"includes": ["**", "!next-env.d.ts"]
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..1bc723c
--- /dev/null
+++ b/components.json
@@ -0,0 +1,23 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"aliases": {
+		"components": "@/components",
+		"hooks": "@/hooks",
+		"lib": "@/lib",
+		"ui": "@/components/ui",
+		"utils": "@/lib/utils"
+	},
+	"iconLibrary": "lucide",
+	"registries": {},
+	"rsc": true,
+	"rtl": false,
+	"style": "new-york",
+	"tailwind": {
+		"baseColor": "neutral",
+		"config": "tailwind.config.ts",
+		"css": "src/app/styles.css",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"tsx": true
+}
diff --git a/package.json b/package.json
index cb8e075..f1073c5 100644
--- a/package.json
+++ b/package.json
@@ -1,21 +1,36 @@
 {
 	"dependencies": {
 		"@prisma/client": "^6.19.0",
+		"@radix-ui/react-dialog": "^1.1.15",
+		"@radix-ui/react-scroll-area": "^1.2.10",
+		"@radix-ui/react-select": "^2.2.6",
+		"@radix-ui/react-separator": "^1.1.8",
+		"@radix-ui/react-slider": "^1.3.6",
+		"@radix-ui/react-slot": "^1.2.4",
+		"@radix-ui/react-switch": "^1.2.6",
+		"@radix-ui/react-tabs": "^1.1.13",
 		"@t3-oss/env-nextjs": "^0.13.8",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
 		"dotenv": "^17.2.3",
 		"framer-motion": "^12.0.0",
+		"lucide-react": "^0.576.0",
 		"next": "16.0.10",
 		"react": "^19.2.0",
-		"react-dom": "^19.2.0"
+		"react-dom": "^19.2.0",
+		"tailwind-merge": "^3.5.0",
+		"tailwindcss-animate": "^1.0.7"
 	},
 	"description": "This project was bootstrapped with create-rubric-app",
 	"devDependencies": {
 		"@rubriclab/config": "^0.0.22",
+		"@tailwindcss/postcss": "^4.2.1",
 		"@types/node": "^24.10.1",
 		"@types/react": "^19.2.3",
 		"@types/react-dom": "^19.2.3",
 		"playwright": "^1.58.2",
 		"prisma": "^6.19.0",
+		"tailwindcss": "^4.2.1",
 		"typescript": "^5.9.3",
 		"zod": "^4.1.12"
 	},
diff --git a/scripts/smoke/runLiveConversationSmoke.ts b/scripts/smoke/runLiveConversationSmoke.ts
index adfa24b..74a4302 100644
--- a/scripts/smoke/runLiveConversationSmoke.ts
+++ b/scripts/smoke/runLiveConversationSmoke.ts
@@ -24,6 +24,7 @@ type ScenarioResult = {
 
 const genericServerComponentErrorText =
 	'An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details.'
+const missingSessionTypeErrorText = "Missing required parameter: 'session.type'."
 
 const mobileViewports = [
 	{ height: 812, width: 375 },
@@ -115,18 +116,73 @@ async function writeScenarioArtifacts(
 	return bodyText
 }
 
+async function clickSliderByRatio(page: Page, testId: string, ratio: number): Promise<void> {
+	const sliderLocator = page.getByTestId(testId)
+	await sliderLocator.waitFor({ state: 'visible', timeout: 15_000 })
+	const sliderBox = await sliderLocator.boundingBox()
+	if (!sliderBox) throw new Error(`Unable to locate slider bounds for ${testId}.`)
+
+	const normalizedRatio = Math.max(0, Math.min(1, ratio))
+	const clickX = sliderBox.x + sliderBox.width * normalizedRatio
+	const clickY = sliderBox.y + sliderBox.height / 2
+	await page.mouse.click(clickX, clickY)
+}
+
+async function selectByLabel(
+	page: Page,
+	triggerTestId: string,
+	optionLabel: string
+): Promise<void> {
+	await page.getByTestId(triggerTestId).click()
+	const optionByRole = page.getByRole('option', { name: optionLabel }).first()
+	if (await optionByRole.count()) {
+		await optionByRole.click()
+		return
+	}
+	await page.locator('[data-radix-collection-item]').filter({ hasText: optionLabel }).first().click()
+}
+
 async function runChatScenario(page: Page, artifactDirectoryPath: string): Promise<ScenarioResult> {
 	const failures: string[] = []
+	const typedMessage = `typed smoke ${Date.now()}`
 	try {
 		await page.getByTestId('mode-tab-chat').click()
 		await waitForConnectionLive(page)
+
+		await page.getByTestId('chat-settings-open-desktop').click()
+		await clickSliderByRatio(page, 'chat-turn-delay-slider', 0.68)
+		await page.waitForTimeout(800)
+
+		const bodyTextAfterSliderUpdate = await page.locator('body').innerText()
+		if (bodyTextAfterSliderUpdate.includes(missingSessionTypeErrorText)) {
+			throw new Error('Chat slider interaction triggered session.type error.')
+		}
+
+		await page.keyboard.press('Escape')
+		await page.getByTestId('chat-text-input').fill(typedMessage)
+		await page.getByTestId('chat-text-send').click()
+
+		await waitForCondition(
+			async function hasVisibleTypedMessage(): Promise<boolean> {
+				const visibleCount = await page
+					.locator('[data-testid^="chat-message-text-"]')
+					.filter({ hasText: typedMessage })
+					.count()
+				return visibleCount > 0
+			},
+			20_000,
+			'Typed chat message was not appended to visible transcript.'
+		)
+
 		await waitForCondition(
-			async function hasChatMessages(): Promise<boolean> {
-				const messageCount = await page.locator('[data-testid^="chat-message-"]').count()
-				return messageCount > 0
+			async function hasAssistantMessage(): Promise<boolean> {
+				const messageTextList = await page
+					.locator('[data-testid^="chat-message-text-"]')
+					.allInnerTexts()
+				return messageTextList.some(messageText => !messageText.includes(typedMessage))
 			},
 			35_000,
-			'Chat mode did not receive transcript messages.'
+			'Chat mode did not produce a follow-up assistant transcript.'
 		)
 	} catch (error) {
 		failures.push(error instanceof Error ? error.message : 'Chat mode validation failed.')
@@ -157,6 +213,14 @@ async function runTranslateScenario(
 			connectionFailureMessage =
 				error instanceof Error ? error.message : 'Translate mode connection did not become live.'
 		}
+
+		await selectByLabel(page, 'translate-secondary-language', 'French')
+		await page.waitForTimeout(1000)
+		const bodyTextAfterLanguageChange = await page.locator('body').innerText()
+		if (bodyTextAfterLanguageChange.includes(missingSessionTypeErrorText)) {
+			throw new Error('Translate language change triggered session.type error.')
+		}
+
 		await waitForCondition(
 			async function hasTranslateCard(): Promise<boolean> {
 				const cardCount = await page.locator('[data-testid^="translate-card-"]').count()
@@ -181,6 +245,9 @@ async function runTranslateScenario(
 	if (bodyText.includes(genericServerComponentErrorText)) {
 		failures.push('Translate mode rendered generic Server Components error text.')
 	}
+	if (bodyText.includes(missingSessionTypeErrorText)) {
+		failures.push('Translate mode rendered session.type protocol error text.')
+	}
 
 	return {
 		failures,
diff --git a/src/app/(app)/ChatMode.tsx b/src/app/(app)/ChatMode.tsx
index d2e0ab4..e258116 100644
--- a/src/app/(app)/ChatMode.tsx
+++ b/src/app/(app)/ChatMode.tsx
@@ -1,12 +1,165 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
-
+import { Button } from '@/components/ui/button'
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import {
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle,
+	SheetTrigger
+} from '@/components/ui/sheet'
+import { Slider } from '@/components/ui/slider'
+import { Switch } from '@/components/ui/switch'
+import { Textarea } from '@/components/ui/textarea'
 import { useLilacModeRuntime } from '@/realtime/modeRuntimeStore'
 
 const defaultChatInstructions =
 	'You are Lilac. Help users communicate across languages. Keep answers concise, faithful, and practical.'
 
+type ChatSettingsContentProps = {
+	chatInstructions: string
+	chatSpeechOutputEnabled: boolean
+	draftInstructions: string
+	draftTurnDelaySeconds: number
+	saveMessage: string
+	setChatInstructions: (instructions: string) => void
+	setChatSpeechOutputEnabled: (enabled: boolean) => void
+	setChatTurnDelaySeconds: (seconds: number) => void
+	setDraftInstructions: (instructions: string) => void
+	setDraftTurnDelaySeconds: (seconds: number) => void
+	setSaveMessage: (value: string) => void
+	voiceInputEnabled: boolean
+}
+
+function normalizeTurnDelaySeconds(value: number): number {
+	const clampedValue = Math.min(6, Math.max(0.2, value))
+	return Math.round(clampedValue * 10) / 10
+}
+
+function ChatSettingsContent({
+	chatInstructions,
+	chatSpeechOutputEnabled,
+	draftInstructions,
+	draftTurnDelaySeconds,
+	saveMessage,
+	setChatInstructions,
+	setChatSpeechOutputEnabled,
+	setChatTurnDelaySeconds,
+	setDraftInstructions,
+	setDraftTurnDelaySeconds,
+	setSaveMessage,
+	voiceInputEnabled
+}: ChatSettingsContentProps) {
+	return (
+		<div className="space-y-4" data-testid="chat-settings-surface">
+			<div className="space-y-2 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3">
+				<div className="flex items-center justify-between gap-3">
+					<div className="space-y-1">
+						<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
+							Speech output
+						</div>
+						<p className="text-[var(--lilac-ink-muted)] text-sm">
+							Voice input is {voiceInputEnabled ? 'enabled' : 'disabled'} globally.
+						</p>
+					</div>
+					<Switch
+						checked={chatSpeechOutputEnabled}
+						onCheckedChange={checked => setChatSpeechOutputEnabled(checked)}
+						data-testid="chat-speech-output-toggle"
+						className="data-[state=checked]:bg-[var(--lilac-direction-primary)] data-[state=unchecked]:bg-[var(--lilac-border)]"
+					/>
+				</div>
+
+				<div className="space-y-2 pt-2">
+					<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
+						End-of-speech delay
+					</div>
+					<Slider
+						value={[draftTurnDelaySeconds]}
+						min={0.2}
+						max={6}
+						step={0.1}
+						onValueChange={valueList => {
+							const nextValue = valueList[0]
+							if (typeof nextValue !== 'number') return
+							setDraftTurnDelaySeconds(normalizeTurnDelaySeconds(nextValue))
+						}}
+						onValueCommit={valueList => {
+							const nextValue = valueList[0]
+							if (typeof nextValue !== 'number') return
+							const normalizedValue = normalizeTurnDelaySeconds(nextValue)
+							setDraftTurnDelaySeconds(normalizedValue)
+							setChatTurnDelaySeconds(normalizedValue)
+						}}
+						data-testid="chat-turn-delay-slider"
+						className="[&_[data-slot=slider-range]]:bg-[var(--lilac-ink)]"
+					/>
+					<div className="flex items-center justify-between text-sm">
+						<span className="text-[var(--lilac-ink-muted)]">Delay</span>
+						<span className="font-semibold text-[var(--lilac-ink)]">
+							{draftTurnDelaySeconds.toFixed(1)}s
+						</span>
+					</div>
+				</div>
+			</div>
+
+			<div className="space-y-2 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3">
+				<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
+					Instructions
+				</div>
+				<Textarea
+					className="min-h-32 border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] text-[var(--lilac-ink)]"
+					data-testid="chat-instructions-input"
+					onChange={event => setDraftInstructions(event.target.value)}
+					value={draftInstructions}
+				/>
+				<div className="flex items-center justify-end gap-2">
+					<Button
+						type="button"
+						variant="outline"
+						data-testid="chat-instructions-reset"
+						className="border-[var(--lilac-border)] bg-[var(--lilac-elevated)] text-[var(--lilac-ink-muted)]"
+						onClick={() => {
+							setDraftInstructions(chatInstructions)
+							setDraftTurnDelaySeconds(normalizeTurnDelaySeconds(draftTurnDelaySeconds))
+						}}
+					>
+						Reset
+					</Button>
+					<Button
+						type="button"
+						data-testid="chat-instructions-save"
+						className="bg-[var(--lilac-ink)] text-[var(--lilac-surface)]"
+						onClick={() => {
+							setChatInstructions(draftInstructions.trim() || defaultChatInstructions)
+							setSaveMessage('Saved')
+						}}
+					>
+						Save
+					</Button>
+				</div>
+				{saveMessage ? (
+					<output className="block text-[var(--lilac-ink-muted)] text-xs" aria-live="polite">
+						{saveMessage}
+					</output>
+				) : null}
+			</div>
+		</div>
+	)
+}
+
 export default function ChatMode() {
 	const {
 		chatInstructions,
@@ -20,51 +173,62 @@ export default function ChatMode() {
 		submitChatTextInput,
 		voiceInputEnabled
 	} = useLilacModeRuntime()
+
 	const [draftInstructions, setDraftInstructions] = useState(chatInstructions)
 	const [draftMessage, setDraftMessage] = useState('')
 	const [saveMessage, setSaveMessage] = useState('')
-	const transcriptListRef = useRef<HTMLDivElement | null>(null)
-	const transcriptBottomRef = useRef<HTMLDivElement | null>(null)
+	const [draftTurnDelaySeconds, setDraftTurnDelaySeconds] = useState(chatTurnDelaySeconds)
+	const [desktopSettingsOpen, setDesktopSettingsOpen] = useState(false)
+	const [mobileSettingsOpen, setMobileSettingsOpen] = useState(false)
 	const stayPinnedToBottomRef = useRef(true)
+	const transcriptScrollAreaRef = useRef<HTMLDivElement | null>(null)
+	const transcriptViewportRef = useRef<HTMLDivElement | null>(null)
 	const playbackAudioElementRef = useRef<HTMLAudioElement | null>(null)
+	const chatTranscriptCount = chatTranscripts.length
 
 	useEffect(() => {
 		setDraftInstructions(chatInstructions)
 	}, [chatInstructions])
 
+	useEffect(() => {
+		setDraftTurnDelaySeconds(chatTurnDelaySeconds)
+	}, [chatTurnDelaySeconds])
+
 	useEffect(() => {
 		if (!saveMessage) return
-		const timeoutId = window.setTimeout(() => setSaveMessage(''), 1600)
-		return () => {
-			window.clearTimeout(timeoutId)
-		}
+		const timeoutId = window.setTimeout(() => setSaveMessage(''), 1500)
+		return () => window.clearTimeout(timeoutId)
 	}, [saveMessage])
 
 	useEffect(() => {
-		const transcriptListElement = transcriptListRef.current
-		if (!transcriptListElement) return
-		const activeTranscriptListElement = transcriptListElement
+		const rootElement = transcriptScrollAreaRef.current
+		if (!rootElement) return
+		const foundViewportElement = rootElement.querySelector(
+			'[data-radix-scroll-area-viewport]'
+		) as HTMLDivElement | null
+		if (!foundViewportElement) return
+		const viewportElement = foundViewportElement
 
-		function onScroll(): void {
+		transcriptViewportRef.current = viewportElement
+
+		function handleScroll(): void {
 			const distanceFromBottom =
-				activeTranscriptListElement.scrollHeight -
-				activeTranscriptListElement.scrollTop -
-				activeTranscriptListElement.clientHeight
+				viewportElement.scrollHeight - viewportElement.scrollTop - viewportElement.clientHeight
 			stayPinnedToBottomRef.current = distanceFromBottom < 140
 		}
 
-		activeTranscriptListElement.addEventListener('scroll', onScroll)
-		onScroll()
-		return () => {
-			activeTranscriptListElement.removeEventListener('scroll', onScroll)
-		}
+		viewportElement.addEventListener('scroll', handleScroll)
+		handleScroll()
+		return () => viewportElement.removeEventListener('scroll', handleScroll)
 	}, [])
 
 	useEffect(() => {
+		if (chatTranscriptCount === 0) return
 		if (!stayPinnedToBottomRef.current) return
-		void chatTranscripts
-		transcriptBottomRef.current?.scrollIntoView({ behavior: 'auto' })
-	}, [chatTranscripts])
+		const viewportElement = transcriptViewportRef.current
+		if (!viewportElement) return
+		viewportElement.scrollTo({ behavior: 'auto', top: viewportElement.scrollHeight })
+	}, [chatTranscriptCount])
 
 	useEffect(() => {
 		if (!playbackAudioElementRef.current) {
@@ -92,13 +256,96 @@ export default function ChatMode() {
 
 	return (
 		<div className="flex min-h-0 flex-1 flex-col gap-3">
-			<div
-				ref={transcriptListRef}
+			<div className="flex items-center justify-between rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-3 py-2">
+				<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
+					Conversation
+				</div>
+
+				<div className="flex items-center gap-2">
+					<Dialog open={desktopSettingsOpen} onOpenChange={setDesktopSettingsOpen}>
+						<DialogTrigger asChild>
+							<Button
+								type="button"
+								variant="outline"
+								className="hidden h-9 rounded-xl border-[var(--lilac-border)] bg-[var(--lilac-card)] text-[var(--lilac-ink-muted)] sm:inline-flex"
+								data-testid="chat-settings-open-desktop"
+							>
+								Settings
+							</Button>
+						</DialogTrigger>
+						<DialogContent className="max-h-[85dvh] overflow-hidden border-[var(--lilac-border)] bg-[var(--lilac-surface)] p-0 sm:max-w-xl">
+							<DialogHeader className="border-[var(--lilac-border)] border-b px-4 pt-4 pb-3">
+								<DialogTitle className="text-[var(--lilac-ink)]">Chat Settings</DialogTitle>
+								<DialogDescription className="text-[var(--lilac-ink-muted)]">
+									Control speech output and instructions.
+								</DialogDescription>
+							</DialogHeader>
+							<div className="overflow-y-auto px-4 py-4">
+								<ChatSettingsContent
+									chatInstructions={chatInstructions}
+									chatSpeechOutputEnabled={chatSpeechOutputEnabled}
+									draftInstructions={draftInstructions}
+									draftTurnDelaySeconds={draftTurnDelaySeconds}
+									saveMessage={saveMessage}
+									setChatInstructions={setChatInstructions}
+									setChatSpeechOutputEnabled={setChatSpeechOutputEnabled}
+									setChatTurnDelaySeconds={setChatTurnDelaySeconds}
+									setDraftInstructions={setDraftInstructions}
+									setDraftTurnDelaySeconds={setDraftTurnDelaySeconds}
+									setSaveMessage={setSaveMessage}
+									voiceInputEnabled={voiceInputEnabled}
+								/>
+							</div>
+						</DialogContent>
+					</Dialog>
+
+					<Sheet open={mobileSettingsOpen} onOpenChange={setMobileSettingsOpen}>
+						<SheetTrigger asChild>
+							<Button
+								type="button"
+								variant="outline"
+								className="h-9 rounded-xl border-[var(--lilac-border)] bg-[var(--lilac-card)] text-[var(--lilac-ink-muted)] sm:hidden"
+								data-testid="chat-settings-open-mobile"
+							>
+								Settings
+							</Button>
+						</SheetTrigger>
+						<SheetContent
+							side="bottom"
+							className="max-h-[90dvh] overflow-y-auto rounded-t-2xl border-[var(--lilac-border)] bg-[var(--lilac-surface)] px-4 pb-[max(1rem,env(safe-area-inset-bottom))]"
+						>
+							<SheetHeader className="pb-2 text-left">
+								<SheetTitle className="text-[var(--lilac-ink)]">Chat Settings</SheetTitle>
+								<SheetDescription className="text-[var(--lilac-ink-muted)]">
+									Control speech output and instructions.
+								</SheetDescription>
+							</SheetHeader>
+							<ChatSettingsContent
+								chatInstructions={chatInstructions}
+								chatSpeechOutputEnabled={chatSpeechOutputEnabled}
+								draftInstructions={draftInstructions}
+								draftTurnDelaySeconds={draftTurnDelaySeconds}
+								saveMessage={saveMessage}
+								setChatInstructions={setChatInstructions}
+								setChatSpeechOutputEnabled={setChatSpeechOutputEnabled}
+								setChatTurnDelaySeconds={setChatTurnDelaySeconds}
+								setDraftInstructions={setDraftInstructions}
+								setDraftTurnDelaySeconds={setDraftTurnDelaySeconds}
+								setSaveMessage={setSaveMessage}
+								voiceInputEnabled={voiceInputEnabled}
+							/>
+						</SheetContent>
+					</Sheet>
+				</div>
+			</div>
+
+			<ScrollArea
+				ref={transcriptScrollAreaRef}
 				data-testid="chat-transcript-list"
-				className="min-h-0 flex-1 overflow-y-auto rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3 sm:p-4"
+				className="min-h-0 flex-1 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)]"
 			>
 				{chatTranscripts.length ? (
-					<div className="flex flex-col gap-3">
+					<div className="flex flex-col gap-3 p-3 sm:p-4">
 						{chatTranscripts.map(message => {
 							const isUser = message.role === 'user'
 							const bubbleBaseClasses =
@@ -106,6 +353,7 @@ export default function ChatMode() {
 							const bubbleClasses = isUser
 								? `${bubbleBaseClasses} self-end bg-[var(--lilac-ink)] text-[var(--lilac-surface)]`
 								: `${bubbleBaseClasses} self-start border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] text-[var(--lilac-ink)]`
+
 							return (
 								<div
 									key={message.id}
@@ -126,126 +374,41 @@ export default function ChatMode() {
 								</div>
 							)
 						})}
-						<div ref={transcriptBottomRef} />
 					</div>
 				) : (
 					<div
-						className="flex h-full items-center justify-center text-[var(--lilac-ink-muted)] text-sm"
+						className="flex min-h-56 items-center justify-center px-4 py-6 text-[var(--lilac-ink-muted)] text-sm"
 						data-testid="chat-empty-state"
 					>
 						Start with voice or type below.
 					</div>
 				)}
-			</div>
-
-			<div className="grid gap-3 lg:grid-cols-2">
-				<div className="rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3">
-					<div className="mb-2 flex items-center justify-between gap-2">
-						<div className="font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.12em]">
-							Speech output
-						</div>
-						<button
-							type="button"
-							aria-pressed={chatSpeechOutputEnabled}
-							data-testid="chat-speech-output-toggle"
-							className={`cursor-pointer rounded-lg px-3 py-2 font-semibold text-xs uppercase tracking-[0.1em] transition ${
-								chatSpeechOutputEnabled
-									? 'bg-[var(--lilac-direction-primary)] text-white'
-									: 'bg-[var(--lilac-card-muted)] text-[var(--lilac-ink-muted)]'
-							}`}
-							onClick={() => setChatSpeechOutputEnabled(!chatSpeechOutputEnabled)}
-						>
-							{chatSpeechOutputEnabled ? 'On' : 'Off'}
-						</button>
-					</div>
-					<p className="mb-3 text-[var(--lilac-ink-muted)] text-sm">
-						Voice input is {voiceInputEnabled ? 'enabled' : 'disabled'} globally.
-					</p>
-
-					<div className="mb-2 font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.12em]">
-						End-of-speech delay
-					</div>
-					<input
-						className="lilac-range"
-						data-testid="chat-turn-delay-slider"
-						max={6}
-						min={0.2}
-						onChange={event => setChatTurnDelaySeconds(Number.parseFloat(event.target.value))}
-						step={0.1}
-						type="range"
-						value={chatTurnDelaySeconds}
-					/>
-					<div className="mt-2 flex items-center justify-between text-sm">
-						<span className="text-[var(--lilac-ink-muted)]">Delay</span>
-						<span className="font-semibold text-[var(--lilac-ink)]">
-							{chatTurnDelaySeconds.toFixed(1)}s
-						</span>
-					</div>
-				</div>
-
-				<div className="rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3">
-					<div className="mb-2 font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.12em]">
-						Instructions
-					</div>
-					<textarea
-						className="h-28 w-full resize-none rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] px-3 py-2 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-[var(--lilac-border-strong)]"
-						data-testid="chat-instructions-input"
-						onChange={event => setDraftInstructions(event.target.value)}
-						value={draftInstructions}
-					/>
-					<div className="mt-3 flex items-center justify-end gap-2">
-						<button
-							type="button"
-							data-testid="chat-instructions-reset"
-							className="cursor-pointer rounded-lg px-3 py-2 font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.12em] transition hover:bg-[var(--lilac-card-muted)]"
-							onClick={() => setDraftInstructions(chatInstructions)}
-						>
-							Reset
-						</button>
-						<button
-							type="button"
-							data-testid="chat-instructions-save"
-							className="cursor-pointer rounded-lg bg-[var(--lilac-ink)] px-4 py-2 font-semibold text-[var(--lilac-surface)] text-xs uppercase tracking-[0.12em] transition hover:opacity-90"
-							onClick={() => {
-								setChatInstructions(draftInstructions.trim() || defaultChatInstructions)
-								setSaveMessage('Saved')
-							}}
-						>
-							Save
-						</button>
-					</div>
-					{saveMessage ? (
-						<output className="mt-2 block text-[var(--lilac-ink-muted)] text-xs" aria-live="polite">
-							{saveMessage}
-						</output>
-					) : null}
-				</div>
-			</div>
+			</ScrollArea>
 
 			<form
-				className="sticky bottom-0 z-10 rounded-2xl border border-[var(--lilac-border)] bg-[color-mix(in_oklab,var(--lilac-card)_84%,transparent)] p-2 backdrop-blur"
+				className="rounded-2xl border border-[var(--lilac-border)] bg-[color-mix(in_oklab,var(--lilac-card)_84%,transparent)] p-2"
 				onSubmit={event => {
 					event.preventDefault()
 					submitMessage()
 				}}
 			>
 				<div className="flex items-center gap-2">
-					<input
+					<Input
 						type="text"
 						value={draftMessage}
 						data-testid="chat-text-input"
 						onChange={event => setDraftMessage(event.target.value)}
 						placeholder="Type a message"
-						className="h-11 w-full rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] px-3 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-[var(--lilac-border-strong)]"
+						className="h-11 border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] text-[var(--lilac-ink)]"
 					/>
-					<button
+					<Button
 						type="submit"
 						data-testid="chat-text-send"
-						className="h-11 cursor-pointer rounded-xl bg-[var(--lilac-ink)] px-4 font-semibold text-[var(--lilac-surface)] text-xs uppercase tracking-[0.1em] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
 						disabled={!draftMessage.trim()}
+						className="h-11 rounded-xl bg-[var(--lilac-ink)] px-4 font-semibold text-[var(--lilac-surface)] text-xs uppercase tracking-[0.1em]"
 					>
 						Send
-					</button>
+					</Button>
 				</div>
 			</form>
 		</div>
diff --git a/src/app/(app)/ModeShell.tsx b/src/app/(app)/ModeShell.tsx
index 3cad709..e257518 100644
--- a/src/app/(app)/ModeShell.tsx
+++ b/src/app/(app)/ModeShell.tsx
@@ -4,6 +4,10 @@ import type { ReactNode } from 'react'
 
 import ChatMode from '@/app/(app)/ChatMode'
 import TranslateMode from '@/app/(app)/TranslateMode'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Switch } from '@/components/ui/switch'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { useLilacModeRuntime } from '@/realtime/modeRuntimeStore'
 import type { LilacMode } from '@/realtime/sessionTypes'
 
@@ -44,91 +48,93 @@ export default function ModeShell() {
 	} = useLilacModeRuntime()
 
 	return (
-		<div className="relative min-h-[100dvh] bg-[var(--lilac-surface)]">
-			<div className="-z-10 pointer-events-none absolute inset-0 bg-[radial-gradient(140%_110%_at_50%_-8%,rgba(248,252,255,0.95)_0%,rgba(236,244,255,0.86)_28%,rgba(231,237,246,0.4)_55%,rgba(231,237,246,0)_80%)] dark:bg-[radial-gradient(150%_120%_at_50%_-8%,rgba(57,80,112,0.45)_0%,rgba(26,39,57,0.35)_34%,rgba(14,19,29,0)_80%)]" />
-			<div className="relative z-10 flex min-h-[100dvh] flex-col">
-				<header className="sticky top-0 z-20 border-[var(--lilac-border)] border-b bg-[color-mix(in_oklab,var(--lilac-surface)_86%,transparent)] px-3 pt-[max(0.75rem,env(safe-area-inset-top))] pb-3 backdrop-blur sm:px-6">
-					<div className="mx-auto flex w-full max-w-5xl flex-col gap-3">
-						<div className="flex items-center justify-between gap-3">
-							<div className="font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.18em]">
-								Lilac
-							</div>
-							<div className="flex items-center gap-2">
-								<div
-									className="rounded-full border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-3 py-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]"
-									data-testid="mode-active-badge"
-								>
-									{mode}
-								</div>
-								<div
-									className="rounded-full border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-3 py-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]"
-									data-testid="connection-state-badge"
-								>
-									{getConnectionStateLabel(connectionState)}
-								</div>
-							</div>
+		<div className="relative min-h-[100dvh] overflow-hidden bg-[var(--lilac-surface)]">
+			<div className="-z-10 pointer-events-none absolute inset-0 bg-[radial-gradient(130%_100%_at_50%_-18%,rgba(255,255,255,0.8)_0%,rgba(255,255,255,0.05)_72%,rgba(255,255,255,0)_100%)]" />
+			<div className="mx-auto flex min-h-[100dvh] w-full max-w-5xl flex-col px-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] sm:px-6">
+				<header className="sticky top-0 z-20 flex flex-col gap-3 border-[var(--lilac-border)] border-b bg-[color-mix(in_oklab,var(--lilac-surface)_88%,transparent)] pt-[max(0.75rem,env(safe-area-inset-top))] pb-3 backdrop-blur">
+					<div className="flex items-center justify-between gap-3">
+						<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.18em]">
+							Lilac
+						</div>
+						<div className="flex items-center gap-2">
+							<Badge
+								className="rounded-full border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-3 py-1 text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]"
+								data-testid="mode-active-badge"
+							>
+								{mode}
+							</Badge>
+							<Badge
+								className="rounded-full border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-3 py-1 text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]"
+								data-testid="connection-state-badge"
+							>
+								{getConnectionStateLabel(connectionState)}
+							</Badge>
 						</div>
+					</div>
 
-						<div className="flex items-center justify-between gap-2 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] p-1">
-							<div className="flex items-center gap-1" role="tablist">
-								{(['chat', 'translate'] as const).map(modeOption => (
-									<button
-										key={modeOption}
-										type="button"
-										aria-pressed={mode === modeOption}
-										data-testid={`mode-tab-${modeOption}`}
-										className={`cursor-pointer rounded-xl px-3 py-2 font-semibold text-xs uppercase tracking-[0.1em] transition ${
-											mode === modeOption
-												? 'bg-[var(--lilac-ink)] text-[var(--lilac-surface)]'
-												: 'text-[var(--lilac-ink-muted)] hover:bg-[var(--lilac-card-muted)] hover:text-[var(--lilac-ink)]'
-										}`}
-										onClick={() => setMode(modeOption)}
-									>
-										{modeOption === 'translate' ? 'Live Translate' : 'Chat'}
-									</button>
-								))}
-							</div>
+					<div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto]">
+						<Tabs
+							value={mode}
+							onValueChange={value => {
+								if (value === 'chat' || value === 'translate') setMode(value)
+							}}
+						>
+							<TabsList className="grid h-11 w-full grid-cols-2 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] p-1">
+								<TabsTrigger
+									value="chat"
+									data-testid="mode-tab-chat"
+									className="rounded-xl font-semibold text-[11px] uppercase tracking-[0.12em] data-[state=active]:bg-[var(--lilac-ink)] data-[state=active]:text-[var(--lilac-surface)]"
+								>
+									Chat
+								</TabsTrigger>
+								<TabsTrigger
+									value="translate"
+									data-testid="mode-tab-translate"
+									className="rounded-xl font-semibold text-[11px] uppercase tracking-[0.12em] data-[state=active]:bg-[var(--lilac-ink)] data-[state=active]:text-[var(--lilac-surface)]"
+								>
+									Live
+								</TabsTrigger>
+							</TabsList>
+						</Tabs>
 
-							<button
-								type="button"
-								aria-pressed={voiceInputEnabled}
+						<div className="flex items-center justify-between gap-2 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-3 py-2">
+							<span className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
+								Voice Input
+							</span>
+							<Switch
+								checked={voiceInputEnabled}
+								onCheckedChange={checked => setVoiceInputEnabled(checked)}
 								data-testid="global-voice-input-toggle"
-								className={`cursor-pointer rounded-xl px-3 py-2 font-semibold text-xs uppercase tracking-[0.1em] transition ${
-									voiceInputEnabled
-										? 'bg-[var(--lilac-direction-primary)] text-white'
-										: 'bg-[var(--lilac-card-muted)] text-[var(--lilac-ink-muted)]'
-								}`}
-								onClick={() => setVoiceInputEnabled(!voiceInputEnabled)}
-							>
-								Voice {voiceInputEnabled ? 'On' : 'Off'}
-							</button>
+								className="data-[state=checked]:bg-[var(--lilac-direction-primary)] data-[state=unchecked]:bg-[var(--lilac-border)]"
+							/>
 						</div>
+					</div>
 
-						<div className="flex items-center justify-end gap-2">
-							<button
-								type="button"
-								data-testid="clear-mode-history"
-								className="cursor-pointer rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-3 py-2 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em] transition hover:bg-[var(--lilac-card-muted)]"
-								onClick={clearCurrentModeHistory}
-							>
-								Clear
-							</button>
-							<button
-								type="button"
-								data-testid="reconnect-mode"
-								className="cursor-pointer rounded-xl bg-[var(--lilac-ink)] px-4 py-2 font-semibold text-[10px] text-[var(--lilac-surface)] uppercase tracking-[0.14em] transition hover:opacity-90"
-								onClick={reconnectCurrentMode}
-							>
-								Reconnect
-							</button>
-						</div>
+					<div className="flex items-center justify-end gap-2">
+						<Button
+							type="button"
+							data-testid="clear-mode-history"
+							variant="outline"
+							className="h-9 rounded-xl border-[var(--lilac-border)] bg-[var(--lilac-elevated)] font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]"
+							onClick={clearCurrentModeHistory}
+						>
+							Clear
+						</Button>
+						<Button
+							type="button"
+							data-testid="reconnect-mode"
+							className="h-9 rounded-xl bg-[var(--lilac-ink)] px-4 font-semibold text-[11px] text-[var(--lilac-surface)] uppercase tracking-[0.12em]"
+							onClick={reconnectCurrentMode}
+						>
+							Reconnect
+						</Button>
 					</div>
 				</header>
 
-				<main className="mx-auto flex min-h-0 w-full max-w-5xl flex-1 flex-col gap-3 px-3 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] sm:px-6">
+				<main className="flex min-h-0 flex-1 flex-col gap-3 py-3">
 					{errorMessage ? (
 						<div
-							className="rounded-2xl border border-red-500/45 bg-red-100/70 px-4 py-3 text-red-900 text-sm dark:bg-red-950/35 dark:text-red-100"
+							className="rounded-2xl border border-red-500/45 bg-red-100/80 px-4 py-3 text-red-900 text-sm"
 							data-testid="mode-error-banner"
 						>
 							{errorMessage}
diff --git a/src/app/(app)/TranslateMode.tsx b/src/app/(app)/TranslateMode.tsx
index 9957498..2662328 100644
--- a/src/app/(app)/TranslateMode.tsx
+++ b/src/app/(app)/TranslateMode.tsx
@@ -2,6 +2,17 @@
 
 import { useEffect, useRef, useState } from 'react'
 
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue
+} from '@/components/ui/select'
 import { useLilacModeRuntime } from '@/realtime/modeRuntimeStore'
 import { languageOptions } from '@/realtime/sessionTypes'
 
@@ -14,36 +25,42 @@ export default function TranslateMode() {
 		translateSettings,
 		voiceInputEnabled
 	} = useLilacModeRuntime()
+
 	const [draftMessage, setDraftMessage] = useState('')
-	const transcriptListRef = useRef<HTMLDivElement | null>(null)
-	const transcriptBottomRef = useRef<HTMLDivElement | null>(null)
 	const stayPinnedToBottomRef = useRef(true)
+	const transcriptScrollAreaRef = useRef<HTMLDivElement | null>(null)
+	const transcriptViewportRef = useRef<HTMLDivElement | null>(null)
+	const translateCardCount = translateCards.length
 
 	useEffect(() => {
-		const transcriptListElement = transcriptListRef.current
-		if (!transcriptListElement) return
-		const activeTranscriptListElement = transcriptListElement
+		const rootElement = transcriptScrollAreaRef.current
+		if (!rootElement) return
+		const foundViewportElement = rootElement.querySelector(
+			'[data-radix-scroll-area-viewport]'
+		) as HTMLDivElement | null
+		if (!foundViewportElement) return
+		const viewportElement = foundViewportElement
+
+		transcriptViewportRef.current = viewportElement
 
-		function onScroll(): void {
+		function handleScroll(): void {
 			const distanceFromBottom =
-				activeTranscriptListElement.scrollHeight -
-				activeTranscriptListElement.scrollTop -
-				activeTranscriptListElement.clientHeight
+				viewportElement.scrollHeight - viewportElement.scrollTop - viewportElement.clientHeight
 			stayPinnedToBottomRef.current = distanceFromBottom < 140
 		}
 
-		activeTranscriptListElement.addEventListener('scroll', onScroll)
-		onScroll()
-		return () => {
-			activeTranscriptListElement.removeEventListener('scroll', onScroll)
-		}
+		viewportElement.addEventListener('scroll', handleScroll)
+		handleScroll()
+		return () => viewportElement.removeEventListener('scroll', handleScroll)
 	}, [])
 
 	useEffect(() => {
+		if (translateCardCount === 0) return
 		if (!stayPinnedToBottomRef.current) return
-		void translateCards
-		transcriptBottomRef.current?.scrollIntoView({ behavior: 'auto' })
-	}, [translateCards])
+		const viewportElement = transcriptViewportRef.current
+		if (!viewportElement) return
+		viewportElement.scrollTo({ behavior: 'auto', top: viewportElement.scrollHeight })
+	}, [translateCardCount])
 
 	function submitMessage(): void {
 		const normalizedMessage = draftMessage.trim()
@@ -54,13 +71,85 @@ export default function TranslateMode() {
 
 	return (
 		<div className="flex min-h-0 flex-1 flex-col gap-3">
-			<div
-				ref={transcriptListRef}
+			<div className="grid gap-3 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3 sm:grid-cols-2">
+				<div className="space-y-2">
+					<span className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
+						Primary language
+					</span>
+					<Select
+						value={translateSettings.primaryLanguageCode}
+						onValueChange={nextPrimary => {
+							const nextSecondary =
+								nextPrimary === translateSettings.secondaryLanguageCode
+									? translateSettings.primaryLanguageCode
+									: translateSettings.secondaryLanguageCode
+							setTranslateSettings({
+								primaryLanguageCode: nextPrimary,
+								secondaryLanguageCode: nextSecondary
+							})
+						}}
+					>
+						<SelectTrigger
+							className="h-11 border-[var(--lilac-border)] bg-[var(--lilac-card-muted)]"
+							data-testid="translate-primary-language"
+						>
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							{languageOptions.map(option => (
+								<SelectItem key={option.code} value={option.code}>
+									{option.label}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</div>
+
+				<div className="space-y-2">
+					<span className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
+						Secondary language
+					</span>
+					<Select
+						value={translateSettings.secondaryLanguageCode}
+						onValueChange={nextSecondary => {
+							const nextPrimary =
+								nextSecondary === translateSettings.primaryLanguageCode
+									? translateSettings.secondaryLanguageCode
+									: translateSettings.primaryLanguageCode
+							setTranslateSettings({
+								primaryLanguageCode: nextPrimary,
+								secondaryLanguageCode: nextSecondary
+							})
+						}}
+					>
+						<SelectTrigger
+							className="h-11 border-[var(--lilac-border)] bg-[var(--lilac-card-muted)]"
+							data-testid="translate-secondary-language"
+						>
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							{languageOptions.map(option => (
+								<SelectItem key={option.code} value={option.code}>
+									{option.label}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</div>
+
+				<p className="text-[var(--lilac-ink-muted)] text-xs sm:col-span-2">
+					Voice input is {voiceInputEnabled ? 'enabled' : 'disabled'} globally.
+				</p>
+			</div>
+
+			<ScrollArea
+				ref={transcriptScrollAreaRef}
 				data-testid="translate-card-list"
-				className="min-h-0 flex-1 overflow-y-auto rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3 sm:p-4"
+				className="min-h-0 flex-1 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)]"
 			>
 				{translateCards.length ? (
-					<div className="flex flex-col gap-3">
+					<div className="flex flex-col gap-3 p-3 sm:p-4">
 						{translateCards.map(card => (
 							<article
 								key={card.id}
@@ -68,15 +157,12 @@ export default function TranslateMode() {
 								className="rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] p-3"
 							>
 								<div className="mb-2 flex items-center justify-between gap-2">
-									<span
-										className="rounded-full px-2 py-1 font-semibold text-[10px] uppercase tracking-[0.12em]"
-										style={{
-											backgroundColor: getDirectionColor(card.direction),
-											color: 'white'
-										}}
+									<Badge
+										className="rounded-full border-none px-2 py-1 font-semibold text-[10px] text-white uppercase tracking-[0.12em]"
+										style={{ backgroundColor: getDirectionColor(card.direction) }}
 									>
 										{card.direction.replaceAll('_', ' ')}
-									</span>
+									</Badge>
 									<div className="flex items-center gap-2">
 										<span className="font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
 											{card.inputOrigin}
@@ -89,6 +175,7 @@ export default function TranslateMode() {
 										</span>
 									</div>
 								</div>
+
 								<div className="grid gap-2 sm:grid-cols-2">
 									<div className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] px-3 py-2">
 										<div className="mb-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
@@ -101,6 +188,7 @@ export default function TranslateMode() {
 											{card.sourceText.trim() || '…'}
 										</p>
 									</div>
+
 									<div className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] px-3 py-2">
 										<div className="mb-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
 											{card.targetLanguageCode}
@@ -116,106 +204,41 @@ export default function TranslateMode() {
 								</div>
 							</article>
 						))}
-						<div ref={transcriptBottomRef} />
 					</div>
 				) : (
 					<div
-						className="flex h-full items-center justify-center text-[var(--lilac-ink-muted)] text-sm"
+						className="flex min-h-56 items-center justify-center px-4 py-6 text-[var(--lilac-ink-muted)] text-sm"
 						data-testid="translate-empty-state"
 					>
 						Live translation cards appear here.
 					</div>
 				)}
-			</div>
-
-			<div className="grid gap-3 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3 sm:grid-cols-2">
-				<label className="flex flex-col gap-2">
-					<span className="font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.12em]">
-						Primary language
-					</span>
-					<select
-						className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] px-3 py-2 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-[var(--lilac-border-strong)]"
-						data-testid="translate-primary-language"
-						onChange={event => {
-							const nextPrimary = event.target.value
-							const nextSecondary =
-								nextPrimary === translateSettings.secondaryLanguageCode
-									? translateSettings.primaryLanguageCode
-									: translateSettings.secondaryLanguageCode
-							setTranslateSettings({
-								primaryLanguageCode: nextPrimary,
-								secondaryLanguageCode: nextSecondary
-							})
-						}}
-						value={translateSettings.primaryLanguageCode}
-					>
-						{languageOptions.map(option => (
-							<option key={option.code} value={option.code}>
-								{option.label}
-							</option>
-						))}
-					</select>
-				</label>
-
-				<label className="flex flex-col gap-2">
-					<span className="font-semibold text-[var(--lilac-ink-muted)] text-xs uppercase tracking-[0.12em]">
-						Secondary language
-					</span>
-					<select
-						className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] px-3 py-2 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-[var(--lilac-border-strong)]"
-						data-testid="translate-secondary-language"
-						onChange={event => {
-							const nextSecondary = event.target.value
-							const nextPrimary =
-								nextSecondary === translateSettings.primaryLanguageCode
-									? translateSettings.secondaryLanguageCode
-									: translateSettings.primaryLanguageCode
-							setTranslateSettings({
-								primaryLanguageCode: nextPrimary,
-								secondaryLanguageCode: nextSecondary
-							})
-						}}
-						value={translateSettings.secondaryLanguageCode}
-					>
-						{languageOptions.map(option => (
-							<option key={option.code} value={option.code}>
-								{option.label}
-							</option>
-						))}
-					</select>
-				</label>
-
-				<div className="sm:col-span-2">
-					<p className="text-[var(--lilac-ink-muted)] text-xs">
-						Voice input is {voiceInputEnabled ? 'enabled' : 'disabled'} globally.
-					</p>
-				</div>
-			</div>
+			</ScrollArea>
 
 			<form
-				className="sticky bottom-0 z-10 rounded-2xl border border-[var(--lilac-border)] bg-[color-mix(in_oklab,var(--lilac-card)_84%,transparent)] p-2 backdrop-blur"
+				className="rounded-2xl border border-[var(--lilac-border)] bg-[color-mix(in_oklab,var(--lilac-card)_84%,transparent)] p-2"
 				onSubmit={event => {
 					event.preventDefault()
 					submitMessage()
 				}}
 			>
 				<div className="flex items-center gap-2">
-					<input
+					<Input
 						type="text"
 						value={draftMessage}
 						data-testid="translate-text-input"
 						onChange={event => setDraftMessage(event.target.value)}
 						placeholder="Type text to translate"
-						className="h-11 w-full rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] px-3 text-[var(--lilac-ink)] text-sm outline-none transition focus:border-[var(--lilac-border-strong)]"
+						className="h-11 border-[var(--lilac-border)] bg-[var(--lilac-card-muted)]"
 					/>
-					<button
+					<Button
 						type="submit"
 						data-testid="translate-text-send"
-						className="h-11 cursor-pointer rounded-xl bg-[var(--lilac-ink)] px-4 font-semibold text-[var(--lilac-surface)] text-xs uppercase tracking-[0.1em] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
 						disabled={!draftMessage.trim()}
+						className="h-11 rounded-xl bg-[var(--lilac-ink)] px-4 font-semibold text-[var(--lilac-surface)] text-xs uppercase tracking-[0.1em]"
 					>
 						Send
-					</button>
+					</Button>
 				</div>
 			</form>
 		</div>
diff --git a/src/app/styles.css b/src/app/styles.css
index 4543603..a9ba558 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -1,34 +1,141 @@
 @import "tailwindcss";
 
+@plugin "tailwindcss-animate";
+
 :root {
 	color-scheme: light dark;
-	--lilac-surface: #edf2f8;
-	--lilac-card: color-mix(in oklab, white 74%, #dbe6f4 26%);
-	--lilac-card-muted: color-mix(in oklab, white 48%, #d5e0ef 52%);
-	--lilac-elevated: color-mix(in oklab, white 86%, #d3dff0 14%);
-	--lilac-ink: #112036;
-	--lilac-ink-muted: color-mix(in oklab, #112036 62%, transparent);
-	--lilac-border: color-mix(in oklab, #142845 17%, transparent);
-	--lilac-border-strong: color-mix(in oklab, #142845 35%, transparent);
+	--radius: 0.875rem;
+
+	--lilac-surface: #f7f3e7;
+	--lilac-card: color-mix(in oklab, white 74%, #f0e8dc 26%);
+	--lilac-card-muted: color-mix(in oklab, white 48%, #e9dece 52%);
+	--lilac-elevated: rgba(255, 255, 255, 0.7);
+	--lilac-ink: #352049;
+	--lilac-ink-muted: rgba(53, 32, 73, 0.66);
+	--lilac-border: color-mix(in oklab, #352049 18%, transparent);
+	--lilac-border-strong: color-mix(in oklab, #352049 32%, transparent);
 	--lilac-direction-primary: #0f8a78;
 	--lilac-direction-secondary: #2f6dd8;
+
+	--background: var(--lilac-surface);
+	--foreground: var(--lilac-ink);
+	--card: var(--lilac-card);
+	--card-foreground: var(--lilac-ink);
+	--popover: var(--lilac-card);
+	--popover-foreground: var(--lilac-ink);
+	--primary: var(--lilac-ink);
+	--primary-foreground: var(--lilac-surface);
+	--secondary: var(--lilac-elevated);
+	--secondary-foreground: var(--lilac-ink);
+	--muted: var(--lilac-card-muted);
+	--muted-foreground: var(--lilac-ink-muted);
+	--accent: color-mix(in oklab, var(--lilac-card-muted) 74%, white 26%);
+	--accent-foreground: var(--lilac-ink);
+	--destructive: #b42318;
+	--destructive-foreground: #fff7f5;
+	--border: var(--lilac-border);
+	--input: var(--lilac-border-strong);
+	--ring: color-mix(in oklab, var(--lilac-direction-secondary) 62%, white 38%);
+	--chart-1: #2f6dd8;
+	--chart-2: #0f8a78;
+	--chart-3: #6c3db5;
+	--chart-4: #cb7f11;
+	--chart-5: #bf1e69;
+	--sidebar: var(--lilac-card);
+	--sidebar-foreground: var(--lilac-ink);
+	--sidebar-primary: var(--lilac-ink);
+	--sidebar-primary-foreground: var(--lilac-surface);
+	--sidebar-accent: var(--lilac-card-muted);
+	--sidebar-accent-foreground: var(--lilac-ink);
+	--sidebar-border: var(--lilac-border);
+	--sidebar-ring: var(--ring);
 }
 
 @media (prefers-color-scheme: dark) {
 	:root {
-		--lilac-surface: #0f1724;
-		--lilac-card: color-mix(in oklab, #1a2a3e 68%, #101823 32%);
-		--lilac-card-muted: color-mix(in oklab, #24344a 58%, #131c2a 42%);
-		--lilac-elevated: color-mix(in oklab, #22344b 78%, #121b29 22%);
-		--lilac-ink: #edf4ff;
-		--lilac-ink-muted: color-mix(in oklab, #edf4ff 64%, transparent);
-		--lilac-border: color-mix(in oklab, #dce9ff 16%, transparent);
-		--lilac-border-strong: color-mix(in oklab, #dce9ff 34%, transparent);
+		--lilac-surface: #120c1e;
+		--lilac-card: color-mix(in oklab, #21162f 70%, #110a1b 30%);
+		--lilac-card-muted: color-mix(in oklab, #2b1f3b 60%, #120a1d 40%);
+		--lilac-elevated: rgba(255, 255, 255, 0.1);
+		--lilac-ink: #f6f1ff;
+		--lilac-ink-muted: rgba(246, 241, 255, 0.72);
+		--lilac-border: color-mix(in oklab, #f6f1ff 22%, transparent);
+		--lilac-border-strong: color-mix(in oklab, #f6f1ff 36%, transparent);
 		--lilac-direction-primary: #2cc7b2;
 		--lilac-direction-secondary: #6ea8ff;
+
+		--background: var(--lilac-surface);
+		--foreground: var(--lilac-ink);
+		--card: var(--lilac-card);
+		--card-foreground: var(--lilac-ink);
+		--popover: var(--lilac-card);
+		--popover-foreground: var(--lilac-ink);
+		--primary: #f6f1ff;
+		--primary-foreground: #1c122b;
+		--secondary: var(--lilac-elevated);
+		--secondary-foreground: var(--lilac-ink);
+		--muted: var(--lilac-card-muted);
+		--muted-foreground: var(--lilac-ink-muted);
+		--accent: color-mix(in oklab, var(--lilac-card-muted) 72%, #2e2142 28%);
+		--accent-foreground: var(--lilac-ink);
+		--destructive: #ff6b6b;
+		--destructive-foreground: #2b0505;
+		--border: var(--lilac-border);
+		--input: var(--lilac-border-strong);
+		--ring: color-mix(in oklab, var(--lilac-direction-secondary) 62%, white 38%);
+		--sidebar: var(--lilac-card);
+		--sidebar-foreground: var(--lilac-ink);
+		--sidebar-primary: var(--lilac-ink);
+		--sidebar-primary-foreground: var(--lilac-surface);
+		--sidebar-accent: var(--lilac-card-muted);
+		--sidebar-accent-foreground: var(--lilac-ink);
+		--sidebar-border: var(--lilac-border);
+		--sidebar-ring: var(--ring);
 	}
 }
 
+@theme inline {
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--radius-2xl: calc(var(--radius) + 8px);
+	--radius-3xl: calc(var(--radius) + 12px);
+	--radius-4xl: calc(var(--radius) + 16px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+}
+
 *,
 *::before,
 *::after {
@@ -44,7 +151,7 @@ body {
 body {
 	margin: 0;
 	font-family:
-		"SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+		"SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 	background: var(--lilac-surface);
 	color: var(--lilac-ink);
 	overflow-x: hidden;
@@ -59,60 +166,3 @@ button {
 	font: inherit;
 	color: inherit;
 }
-
-.lilac-range {
-	--lilac-range-progress: 50%;
-	-webkit-appearance: none;
-	appearance: none;
-	width: 100%;
-	height: 0.7rem;
-	padding: 0;
-	border-radius: 9999px;
-	border: 1px solid var(--lilac-border);
-	background-color: var(--lilac-card-muted);
-	background-image: linear-gradient(
-		90deg,
-		var(--lilac-ink) 0 var(--lilac-range-progress),
-		var(--lilac-card-muted) var(--lilac-range-progress) 101%
-	);
-	background-repeat: no-repeat;
-	cursor: pointer;
-}
-
-.lilac-range::-webkit-slider-runnable-track {
-	height: 0.7rem;
-	border-radius: 9999px;
-	background: transparent;
-	border: none;
-}
-
-.lilac-range:focus-visible {
-	outline: 2px solid color-mix(in oklab, var(--lilac-direction-secondary) 62%, white 38%);
-	outline-offset: 3px;
-}
-
-.lilac-range::-webkit-slider-thumb {
-	-webkit-appearance: none;
-	appearance: none;
-	width: 1.3rem;
-	height: 1.3rem;
-	border-radius: 9999px;
-	background: white;
-	border: 1px solid var(--lilac-border-strong);
-	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.24);
-}
-
-.lilac-range::-moz-range-thumb {
-	width: 1.3rem;
-	height: 1.3rem;
-	border-radius: 9999px;
-	background: white;
-	border: 1px solid var(--lilac-border-strong);
-	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.24);
-}
-
-.lilac-range::-moz-range-track {
-	height: 0.7rem;
-	border-radius: 9999px;
-	background: transparent;
-}
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..9bcbb1c
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,32 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import type * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+	'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+	{
+		defaultVariants: {
+			variant: 'default'
+		},
+		variants: {
+			variant: {
+				default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+				destructive:
+					'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+				outline: 'text-foreground',
+				secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80'
+			}
+		}
+	}
+)
+
+export interface BadgeProps
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+	return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..67463e4
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,48 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+	{
+		defaultVariants: {
+			size: 'default',
+			variant: 'default'
+		},
+		variants: {
+			size: {
+				default: 'h-9 px-4 py-2',
+				icon: 'h-9 w-9',
+				lg: 'h-10 rounded-md px-8',
+				sm: 'h-8 rounded-md px-3 text-xs'
+			},
+			variant: {
+				default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+				destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+				ghost: 'hover:bg-accent hover:text-accent-foreground',
+				link: 'text-primary underline-offset-4 hover:underline',
+				outline:
+					'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+				secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80'
+			}
+		}
+	}
+)
+
+export interface ButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : 'button'
+		return <Comp className={cn(buttonVariants({ className, size, variant }))} ref={ref} {...props} />
+	}
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..5dd278c
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,104 @@
+'use client'
+
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Overlay
+		ref={ref}
+		className={cn(
+			'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in',
+			className
+		)}
+		{...props}
+	/>
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+	<DialogPortal>
+		<DialogOverlay />
+		<DialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:rounded-lg',
+				className
+			)}
+			{...props}
+		>
+			{children}
+			<DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+				<X className="h-4 w-4" />
+				<span className="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		</DialogPrimitive.Content>
+	</DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+)
+DialogHeader.displayName = 'DialogHeader'
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+		{...props}
+	/>
+)
+DialogFooter.displayName = 'DialogFooter'
+
+const DialogTitle = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Title
+		ref={ref}
+		className={cn('font-semibold text-lg leading-none tracking-tight', className)}
+		{...props}
+	/>
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Description
+		ref={ref}
+		className={cn('text-muted-foreground text-sm', className)}
+		{...props}
+	/>
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+	Dialog,
+	DialogPortal,
+	DialogOverlay,
+	DialogTrigger,
+	DialogClose,
+	DialogContent,
+	DialogHeader,
+	DialogFooter,
+	DialogTitle,
+	DialogDescription
+}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..db7cab1
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+	({ className, type, ...props }, ref) => {
+		return (
+			<input
+				type={type}
+				className={cn(
+					'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+					className
+				)}
+				ref={ref}
+				{...props}
+			/>
+		)
+	}
+)
+Input.displayName = 'Input'
+
+export { Input }
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..8172701
--- /dev/null
+++ b/src/components/ui/scroll-area.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const ScrollArea = React.forwardRef<
+	React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+	<ScrollAreaPrimitive.Root
+		ref={ref}
+		className={cn('relative overflow-hidden', className)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+			{children}
+		</ScrollAreaPrimitive.Viewport>
+		<ScrollBar />
+		<ScrollAreaPrimitive.Corner />
+	</ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+	React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+	<ScrollAreaPrimitive.ScrollAreaScrollbar
+		ref={ref}
+		orientation={orientation}
+		className={cn(
+			'flex touch-none select-none transition-colors',
+			orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+			orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+			className
+		)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+	</ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..6e6b32f
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,152 @@
+'use client'
+
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+	<SelectPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1',
+			className
+		)}
+		{...props}
+	>
+		{children}
+		<SelectPrimitive.Icon asChild>
+			<ChevronDown className="h-4 w-4 opacity-50" />
+		</SelectPrimitive.Icon>
+	</SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.ScrollUpButton
+		ref={ref}
+		className={cn('flex cursor-default items-center justify-center py-1', className)}
+		{...props}
+	>
+		<ChevronUp className="h-4 w-4" />
+	</SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.ScrollDownButton
+		ref={ref}
+		className={cn('flex cursor-default items-center justify-center py-1', className)}
+		{...props}
+	>
+		<ChevronDown className="h-4 w-4" />
+	</SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+	<SelectPrimitive.Portal>
+		<SelectPrimitive.Content
+			ref={ref}
+			className={cn(
+				'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] origin-[--radix-select-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in',
+				position === 'popper' &&
+					'data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1',
+				className
+			)}
+			position={position}
+			{...props}
+		>
+			<SelectScrollUpButton />
+			<SelectPrimitive.Viewport
+				className={cn(
+					'p-1',
+					position === 'popper' &&
+						'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+				)}
+			>
+				{children}
+			</SelectPrimitive.Viewport>
+			<SelectScrollDownButton />
+		</SelectPrimitive.Content>
+	</SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.Label
+		ref={ref}
+		className={cn('px-2 py-1.5 font-semibold text-sm', className)}
+		{...props}
+	/>
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+	<SelectPrimitive.Item
+		ref={ref}
+		className={cn(
+			'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			className
+		)}
+		{...props}
+	>
+		<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+			<SelectPrimitive.ItemIndicator>
+				<Check className="h-4 w-4" />
+			</SelectPrimitive.ItemIndicator>
+		</span>
+		<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+	</SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.Separator
+		ref={ref}
+		className={cn('-mx-1 my-1 h-px bg-muted', className)}
+		{...props}
+	/>
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+	Select,
+	SelectGroup,
+	SelectValue,
+	SelectTrigger,
+	SelectContent,
+	SelectLabel,
+	SelectItem,
+	SelectSeparator,
+	SelectScrollUpButton,
+	SelectScrollDownButton
+}
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 0000000..7be004e
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Separator = React.forwardRef<
+	React.ElementRef<typeof SeparatorPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+	<SeparatorPrimitive.Root
+		ref={ref}
+		decorative={decorative}
+		orientation={orientation}
+		className={cn(
+			'shrink-0 bg-border',
+			orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+			className
+		)}
+		{...props}
+	/>
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
new file mode 100644
index 0000000..759e278
--- /dev/null
+++ b/src/components/ui/sheet.tsx
@@ -0,0 +1,122 @@
+'use client'
+
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<SheetPrimitive.Overlay
+		className={cn(
+			'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in',
+			className
+		)}
+		{...props}
+		ref={ref}
+	/>
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+	'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
+	{
+		defaultVariants: {
+			side: 'right'
+		},
+		variants: {
+			side: {
+				bottom:
+					'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+				left:
+					'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+				right:
+					'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+				top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top'
+			}
+		}
+	}
+)
+
+interface SheetContentProps
+	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+		VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Content>,
+	SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+	<SheetPortal>
+		<SheetOverlay />
+		<SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+			<SheetPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+				<X className="h-4 w-4" />
+				<span className="sr-only">Close</span>
+			</SheetPrimitive.Close>
+			{children}
+		</SheetPrimitive.Content>
+	</SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+)
+SheetHeader.displayName = 'SheetHeader'
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+		{...props}
+	/>
+)
+SheetFooter.displayName = 'SheetFooter'
+
+const SheetTitle = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<SheetPrimitive.Title
+		ref={ref}
+		className={cn('font-semibold text-foreground text-lg', className)}
+		{...props}
+	/>
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+	<SheetPrimitive.Description
+		ref={ref}
+		className={cn('text-muted-foreground text-sm', className)}
+		{...props}
+	/>
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+	Sheet,
+	SheetPortal,
+	SheetOverlay,
+	SheetTrigger,
+	SheetClose,
+	SheetContent,
+	SheetHeader,
+	SheetFooter,
+	SheetTitle,
+	SheetDescription
+}
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
new file mode 100644
index 0000000..28418b5
--- /dev/null
+++ b/src/components/ui/slider.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import * as SliderPrimitive from '@radix-ui/react-slider'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Slider = React.forwardRef<
+	React.ElementRef<typeof SliderPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<SliderPrimitive.Root
+		ref={ref}
+		data-slot="slider"
+		className={cn('relative flex w-full touch-none select-none items-center py-1', className)}
+		{...props}
+	>
+		<SliderPrimitive.Track
+			data-slot="slider-track"
+			className="relative h-2 w-full grow overflow-hidden rounded-full border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)]"
+		>
+			<SliderPrimitive.Range
+				data-slot="slider-range"
+				className="absolute h-full bg-[var(--lilac-ink)]"
+			/>
+		</SliderPrimitive.Track>
+		<SliderPrimitive.Thumb
+			data-slot="slider-thumb"
+			className="block h-5 w-5 rounded-full border border-[var(--lilac-border-strong)] bg-white shadow-[0_8px_20px_rgba(0,0,0,0.28)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+		/>
+	</SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
new file mode 100644
index 0000000..ceca6e5
--- /dev/null
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Switch = React.forwardRef<
+	React.ElementRef<typeof SwitchPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+	<SwitchPrimitives.Root
+		className={cn(
+			'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+			className
+		)}
+		{...props}
+		ref={ref}
+	>
+		<SwitchPrimitives.Thumb
+			className={cn(
+				'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+			)}
+		/>
+	</SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..1581e31
--- /dev/null
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.List
+		ref={ref}
+		className={cn(
+			'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+			className
+		)}
+		{...props}
+	/>
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 font-medium text-sm ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+			className
+		)}
+		{...props}
+	/>
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Content
+		ref={ref}
+		className={cn(
+			'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+			className
+		)}
+		{...props}
+	/>
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..5ed1f03
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'textarea'>>(
+	({ className, ...props }, ref) => {
+		return (
+			<textarea
+				className={cn(
+					'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+					className
+				)}
+				ref={ref}
+				{...props}
+			/>
+		)
+	}
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea }
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..c15e7f7
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs))
+}
diff --git a/src/realtime/chatRealtimeClient.ts b/src/realtime/chatRealtimeClient.ts
index 9dbe83c..19a4cfa 100644
--- a/src/realtime/chatRealtimeClient.ts
+++ b/src/realtime/chatRealtimeClient.ts
@@ -2,6 +2,7 @@
 
 import { createRealtimeClientSecretAction } from '@/app/actions/realtime'
 import {
+	ConversationItemCreatedEventSchema,
 	InputAudioTranscriptionCompletedEventSchema,
 	InputAudioTranscriptionDeltaEventSchema,
 	RealtimeBaseServerEventSchema,
@@ -170,6 +171,14 @@ export class ChatRealtimeClient {
 	public submitTextInput(text: string): void {
 		const normalizedText = text.trim()
 		if (!normalizedText) return
+		const itemId = `typed_${crypto.randomUUID()}`
+		this.emitTranscriptPatch({
+			id: itemId,
+			replaceText: normalizedText,
+			role: 'user',
+			source: 'input_text',
+			status: 'final'
+		})
 		this.sendEvent({
 			item: {
 				content: [
@@ -178,6 +187,7 @@ export class ChatRealtimeClient {
 						type: 'input_text'
 					}
 				],
+				id: itemId,
 				role: 'user',
 				type: 'message'
 			},
@@ -189,36 +199,27 @@ export class ChatRealtimeClient {
 	}
 
 	public updateInstructions(instructions: string): void {
-		this.sendEvent({
-			session: { instructions },
-			type: 'session.update'
-		})
+		this.sendSessionUpdate({ instructions })
 	}
 
 	public updateSpeechOutputEnabled(speechOutputEnabled: boolean): void {
-		this.sendEvent({
-			session: {
-				output_modalities: [speechOutputEnabled ? 'audio' : 'text']
-			},
-			type: 'session.update'
+		this.sendSessionUpdate({
+			output_modalities: [speechOutputEnabled ? 'audio' : 'text']
 		})
 		if (!speechOutputEnabled) this.callbacks.onRemoteStream(null)
 	}
 
 	public updateTurnDelaySeconds(turnDelaySeconds: number): void {
 		const silenceDurationMilliseconds = Math.round(turnDelaySeconds * 1000)
-		this.sendEvent({
-			session: {
-				audio: {
-					input: {
-						turn_detection: {
-							silence_duration_ms: silenceDurationMilliseconds,
-							type: 'server_vad'
-						}
+		this.sendSessionUpdate({
+			audio: {
+				input: {
+					turn_detection: {
+						silence_duration_ms: silenceDurationMilliseconds,
+						type: 'server_vad'
 					}
 				}
-			},
-			type: 'session.update'
+			}
 		})
 	}
 
@@ -283,130 +284,195 @@ export class ChatRealtimeClient {
 		})
 	}
 
+	private getInputTextFromConversationItem(
+		event: ReturnType<typeof ConversationItemCreatedEventSchema.parse>
+	): null | string {
+		if (event.item.role !== 'user') return null
+		if (event.item.type !== 'message') return null
+		const contentPartList = event.item.content ?? []
+		const textPartList = contentPartList
+			.filter(contentPart => contentPart.type === 'input_text' && typeof contentPart.text === 'string')
+			.map(contentPart => (contentPart.text as string).trim())
+			.filter(Boolean)
+		if (textPartList.length === 0) return null
+		return textPartList.join('\n')
+	}
+
+	private handleConversationItemCreatedEvent(candidate: unknown): void {
+		const event = ConversationItemCreatedEventSchema.parse(candidate)
+		const inputText = this.getInputTextFromConversationItem(event)
+		if (!inputText) return
+		this.emitTranscriptPatch({
+			id: event.item.id,
+			replaceText: inputText,
+			role: 'user',
+			source: 'input_text',
+			status: 'final'
+		})
+	}
+
+	private handleInputAudioTranscriptionDeltaEvent(candidate: unknown): void {
+		const event = InputAudioTranscriptionDeltaEventSchema.parse(candidate)
+		if (!event.delta.trim()) return
+		this.emitTranscriptPatch({
+			appendText: event.delta,
+			id: event.item_id,
+			role: 'user',
+			source: 'input_transcription',
+			status: 'streaming'
+		})
+	}
+
+	private handleInputAudioTranscriptionCompletedEvent(candidate: unknown): void {
+		const event = InputAudioTranscriptionCompletedEventSchema.parse(candidate)
+		this.emitTranscriptPatch({
+			id: event.item_id,
+			replaceText: event.transcript,
+			role: 'user',
+			source: 'input_transcription',
+			status: 'final'
+		})
+	}
+
+	private handleResponseOutputItemAddedEvent(candidate: unknown): void {
+		const event = ResponseOutputItemAddedEventSchema.parse(candidate)
+		if (!event.response_id) return
+		this.assistantItemIdByResponseId.set(event.response_id, event.item.id)
+
+		const pendingText = this.pendingTextByResponseId.get(event.response_id)
+		if (pendingText) {
+			this.emitTranscriptPatch({
+				appendText: pendingText,
+				id: event.item.id,
+				role: 'assistant',
+				source: 'response_output_text',
+				status: 'streaming'
+			})
+			this.pendingTextByResponseId.delete(event.response_id)
+		}
+
+		const pendingAudioTranscript = this.pendingAudioTranscriptByResponseId.get(event.response_id)
+		if (pendingAudioTranscript) {
+			this.emitTranscriptPatch({
+				appendText: pendingAudioTranscript,
+				id: event.item.id,
+				role: 'assistant',
+				source: 'response_output_audio_transcript',
+				status: 'streaming'
+			})
+			this.pendingAudioTranscriptByResponseId.delete(event.response_id)
+		}
+	}
+
+	private handleResponseOutputTextDeltaEvent(candidate: unknown): void {
+		const event = ResponseOutputTextDeltaEventSchema.parse(candidate)
+		const assistantItemId =
+			event.item_id ??
+			(event.response_id ? this.assistantItemIdByResponseId.get(event.response_id) : undefined)
+		if (!assistantItemId && event.response_id) {
+			const previousPending = this.pendingTextByResponseId.get(event.response_id) ?? ''
+			this.pendingTextByResponseId.set(event.response_id, `${previousPending}${event.delta}`)
+			return
+		}
+		if (!assistantItemId) return
+		this.emitTranscriptPatch({
+			appendText: event.delta,
+			id: assistantItemId,
+			role: 'assistant',
+			source: 'response_output_text',
+			status: 'streaming'
+		})
+	}
+
+	private handleResponseOutputAudioTranscriptDeltaEvent(candidate: unknown): void {
+		const event = ResponseOutputAudioTranscriptDeltaEventSchema.parse(candidate)
+		const assistantItemId =
+			event.item_id ??
+			(event.response_id ? this.assistantItemIdByResponseId.get(event.response_id) : undefined)
+		if (!assistantItemId && event.response_id) {
+			const previousPending = this.pendingAudioTranscriptByResponseId.get(event.response_id) ?? ''
+			this.pendingAudioTranscriptByResponseId.set(
+				event.response_id,
+				`${previousPending}${event.delta}`
+			)
+			return
+		}
+		if (!assistantItemId) return
+		this.emitTranscriptPatch({
+			appendText: event.delta,
+			id: assistantItemId,
+			role: 'assistant',
+			source: 'response_output_audio_transcript',
+			status: 'streaming'
+		})
+	}
+
+	private handleResponseOutputTextDoneEvent(candidate: unknown): void {
+		const event = ResponseOutputTextDoneEventSchema.parse(candidate)
+		const assistantItemId =
+			event.item_id ??
+			(event.response_id ? this.assistantItemIdByResponseId.get(event.response_id) : undefined)
+		if (!assistantItemId) return
+		if (typeof event.text === 'string' && event.text.trim()) {
+			this.emitTranscriptPatch({
+				id: assistantItemId,
+				replaceText: event.text,
+				role: 'assistant',
+				source: 'response_output_text',
+				status: 'final'
+			})
+			return
+		}
+		this.emitTranscriptPatch({
+			id: assistantItemId,
+			role: 'assistant',
+			source: 'response_output_text',
+			status: 'final'
+		})
+	}
+
+	private sendSessionUpdate(sessionPatch: Record<string, unknown>): void {
+		this.sendEvent({
+			session: {
+				type: 'realtime',
+				...sessionPatch
+			},
+			type: 'session.update'
+		})
+	}
+
 	private handleServerEvent(rawData: unknown): void {
 		try {
 			const candidate = typeof rawData === 'string' ? JSON.parse(rawData) : rawData
 			const baseEvent = RealtimeBaseServerEventSchema.parse(candidate)
 
 			switch (baseEvent.type) {
+				case 'conversation.item.created': {
+					this.handleConversationItemCreatedEvent(candidate)
+					return
+				}
 				case 'conversation.item.input_audio_transcription.delta': {
-					const event = InputAudioTranscriptionDeltaEventSchema.parse(candidate)
-					if (!event.delta.trim()) return
-					this.emitTranscriptPatch({
-						appendText: event.delta,
-						id: event.item_id,
-						role: 'user',
-						source: 'input_transcription',
-						status: 'streaming'
-					})
+					this.handleInputAudioTranscriptionDeltaEvent(candidate)
 					return
 				}
 				case 'conversation.item.input_audio_transcription.completed': {
-					const event = InputAudioTranscriptionCompletedEventSchema.parse(candidate)
-					this.emitTranscriptPatch({
-						id: event.item_id,
-						replaceText: event.transcript,
-						role: 'user',
-						source: 'input_transcription',
-						status: 'final'
-					})
+					this.handleInputAudioTranscriptionCompletedEvent(candidate)
 					return
 				}
 				case 'response.output_item.added': {
-					const event = ResponseOutputItemAddedEventSchema.parse(candidate)
-					if (!event.response_id) return
-					this.assistantItemIdByResponseId.set(event.response_id, event.item.id)
-
-					const pendingText = this.pendingTextByResponseId.get(event.response_id)
-					if (pendingText) {
-						this.emitTranscriptPatch({
-							appendText: pendingText,
-							id: event.item.id,
-							role: 'assistant',
-							source: 'response_output_text',
-							status: 'streaming'
-						})
-						this.pendingTextByResponseId.delete(event.response_id)
-					}
-
-					const pendingAudioTranscript = this.pendingAudioTranscriptByResponseId.get(event.response_id)
-					if (pendingAudioTranscript) {
-						this.emitTranscriptPatch({
-							appendText: pendingAudioTranscript,
-							id: event.item.id,
-							role: 'assistant',
-							source: 'response_output_audio_transcript',
-							status: 'streaming'
-						})
-						this.pendingAudioTranscriptByResponseId.delete(event.response_id)
-					}
+					this.handleResponseOutputItemAddedEvent(candidate)
 					return
 				}
 				case 'response.output_text.delta': {
-					const event = ResponseOutputTextDeltaEventSchema.parse(candidate)
-					const assistantItemId =
-						event.item_id ??
-						(event.response_id ? this.assistantItemIdByResponseId.get(event.response_id) : undefined)
-					if (!assistantItemId && event.response_id) {
-						const previousPending = this.pendingTextByResponseId.get(event.response_id) ?? ''
-						this.pendingTextByResponseId.set(event.response_id, `${previousPending}${event.delta}`)
-						return
-					}
-					if (!assistantItemId) return
-					this.emitTranscriptPatch({
-						appendText: event.delta,
-						id: assistantItemId,
-						role: 'assistant',
-						source: 'response_output_text',
-						status: 'streaming'
-					})
+					this.handleResponseOutputTextDeltaEvent(candidate)
 					return
 				}
 				case 'response.output_audio_transcript.delta': {
-					const event = ResponseOutputAudioTranscriptDeltaEventSchema.parse(candidate)
-					const assistantItemId =
-						event.item_id ??
-						(event.response_id ? this.assistantItemIdByResponseId.get(event.response_id) : undefined)
-					if (!assistantItemId && event.response_id) {
-						const previousPending = this.pendingAudioTranscriptByResponseId.get(event.response_id) ?? ''
-						this.pendingAudioTranscriptByResponseId.set(
-							event.response_id,
-							`${previousPending}${event.delta}`
-						)
-						return
-					}
-					if (!assistantItemId) return
-					this.emitTranscriptPatch({
-						appendText: event.delta,
-						id: assistantItemId,
-						role: 'assistant',
-						source: 'response_output_audio_transcript',
-						status: 'streaming'
-					})
+					this.handleResponseOutputAudioTranscriptDeltaEvent(candidate)
 					return
 				}
 				case 'response.output_text.done': {
-					const event = ResponseOutputTextDoneEventSchema.parse(candidate)
-					const assistantItemId =
-						event.item_id ??
-						(event.response_id ? this.assistantItemIdByResponseId.get(event.response_id) : undefined)
-					if (!assistantItemId) return
-					if (typeof event.text === 'string' && event.text.trim()) {
-						this.emitTranscriptPatch({
-							id: assistantItemId,
-							replaceText: event.text,
-							role: 'assistant',
-							source: 'response_output_text',
-							status: 'final'
-						})
-						return
-					}
-					this.emitTranscriptPatch({
-						id: assistantItemId,
-						role: 'assistant',
-						source: 'response_output_text',
-						status: 'final'
-					})
+					this.handleResponseOutputTextDoneEvent(candidate)
 					return
 				}
 				case 'response.done': {
diff --git a/src/realtime/liveTranslateRealtimeClient.ts b/src/realtime/liveTranslateRealtimeClient.ts
index cc858a1..10d946f 100644
--- a/src/realtime/liveTranslateRealtimeClient.ts
+++ b/src/realtime/liveTranslateRealtimeClient.ts
@@ -37,7 +37,6 @@ export type LiveTranslateResultPatch = {
 export type LiveTranslateSettings = {
 	primaryLanguageCode: string
 	secondaryLanguageCode: string
-	turnDelaySeconds: number
 }
 
 export type StartLiveTranslateRealtimeClientInput = LiveTranslateSettings & {
@@ -146,8 +145,7 @@ export class LiveTranslateRealtimeClient {
 			const clientSecret = await createTranslateRealtimeClientSecretAction({
 				model: input.model,
 				primaryLanguageCode: input.primaryLanguageCode,
-				secondaryLanguageCode: input.secondaryLanguageCode,
-				turnDelaySeconds: input.turnDelaySeconds
+				secondaryLanguageCode: input.secondaryLanguageCode
 			})
 
 			if (generation !== this.generation) return
@@ -176,8 +174,7 @@ export class LiveTranslateRealtimeClient {
 				this.callbacks.onConnectionStateChange('connected')
 				this.updateTranslateSettings({
 					primaryLanguageCode: input.primaryLanguageCode,
-					secondaryLanguageCode: input.secondaryLanguageCode,
-					turnDelaySeconds: input.turnDelaySeconds
+					secondaryLanguageCode: input.secondaryLanguageCode
 				})
 			})
 
@@ -273,26 +270,23 @@ export class LiveTranslateRealtimeClient {
 	}
 
 	public updateTranslateSettings(settings: LiveTranslateSettings): void {
-		this.sendEvent({
-			session: {
-				audio: {
-					input: {
-						turn_detection: {
-							create_response: false,
-							interrupt_response: false,
-							type: 'semantic_vad'
-						}
+		this.sendSessionUpdate({
+			audio: {
+				input: {
+					turn_detection: {
+						create_response: false,
+						interrupt_response: false,
+						type: 'semantic_vad'
 					}
-				},
-				instructions: createTranslateInstructions(
-					settings.primaryLanguageCode,
-					settings.secondaryLanguageCode
-				),
-				output_modalities: ['text'],
-				tool_choice: buildToolChoice(),
-				tools: [buildPublishTranslationToolDefinition()]
+				}
 			},
-			type: 'session.update'
+			instructions: createTranslateInstructions(
+				settings.primaryLanguageCode,
+				settings.secondaryLanguageCode
+			),
+			output_modalities: ['text'],
+			tool_choice: buildToolChoice(),
+			tools: [buildPublishTranslationToolDefinition()]
 		})
 	}
 
@@ -516,6 +510,16 @@ export class LiveTranslateRealtimeClient {
 		})
 	}
 
+	private sendSessionUpdate(sessionPatch: Record<string, unknown>): void {
+		this.sendEvent({
+			session: {
+				type: 'realtime',
+				...sessionPatch
+			},
+			type: 'session.update'
+		})
+	}
+
 	private sendEvent(event: Record<string, unknown>): void {
 		if (!this.dataChannel) return
 		if (this.dataChannel.readyState !== 'open') return
diff --git a/src/realtime/modeRuntimeStore.tsx b/src/realtime/modeRuntimeStore.tsx
index d0c3331..1bd1ec4 100644
--- a/src/realtime/modeRuntimeStore.tsx
+++ b/src/realtime/modeRuntimeStore.tsx
@@ -399,7 +399,6 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			model: defaultChatRealtimeModel,
 			primaryLanguageCode: translateSettingsRef.current.primaryLanguageCode,
 			secondaryLanguageCode: translateSettingsRef.current.secondaryLanguageCode,
-			turnDelaySeconds: chatTurnDelaySecondsRef.current,
 			voiceInputEnabled: voiceInputEnabledRef.current
 		})
 	}, [stopAllClients])
@@ -456,8 +455,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			if (mode === 'translate') {
 				liveTranslateClientRef.current?.updateTranslateSettings({
 					primaryLanguageCode: nextSettings.primaryLanguageCode,
-					secondaryLanguageCode: nextSettings.secondaryLanguageCode,
-					turnDelaySeconds: chatTurnDelaySecondsRef.current
+					secondaryLanguageCode: nextSettings.secondaryLanguageCode
 				})
 			}
 		},
@@ -561,27 +559,9 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	useEffect(() => {
 		if (!isHydrated) return
 		window.localStorage.setItem(storageKeys.chatTurnDelaySeconds, String(chatTurnDelaySeconds))
-		switch (mode) {
-			case 'chat':
-				chatClientRef.current?.updateTurnDelaySeconds(chatTurnDelaySeconds)
-				return
-			case 'translate':
-				liveTranslateClientRef.current?.updateTranslateSettings({
-					primaryLanguageCode: translateSettings.primaryLanguageCode,
-					secondaryLanguageCode: translateSettings.secondaryLanguageCode,
-					turnDelaySeconds: chatTurnDelaySeconds
-				})
-				return
-			default:
-				return
-		}
-	}, [
-		chatTurnDelaySeconds,
-		isHydrated,
-		mode,
-		translateSettings.primaryLanguageCode,
-		translateSettings.secondaryLanguageCode
-	])
+		if (mode !== 'chat') return
+		chatClientRef.current?.updateTurnDelaySeconds(chatTurnDelaySeconds)
+	}, [chatTurnDelaySeconds, isHydrated, mode])
 
 	useEffect(() => {
 		if (!isHydrated) return
diff --git a/src/realtime/schemas.ts b/src/realtime/schemas.ts
index 91e4209..6d08098 100644
--- a/src/realtime/schemas.ts
+++ b/src/realtime/schemas.ts
@@ -50,8 +50,7 @@ export const CreateRealtimeClientSecretActionOutputSchema = z.object({
 export const CreateTranslateRealtimeClientSecretActionInputSchema = z.object({
 	model: ChatRealtimeModelSchema.default(defaultChatRealtimeModel),
 	primaryLanguageCode: KnownLanguageCodeSchema,
-	secondaryLanguageCode: KnownLanguageCodeSchema,
-	turnDelaySeconds: z.number().min(0.2).max(6).default(1.2)
+	secondaryLanguageCode: KnownLanguageCodeSchema
 })
 
 export const CreateTranslateRealtimeClientSecretActionOutputSchema = z.object({
@@ -109,6 +108,29 @@ export const InputAudioTranscriptionCompletedEventSchema = z
 	})
 	.passthrough()
 
+const ConversationItemContentPartSchema = z
+	.object({
+		text: z.string().optional(),
+		transcript: z.string().optional(),
+		type: z.string()
+	})
+	.passthrough()
+
+export const ConversationItemCreatedEventSchema = z
+	.object({
+		item: z
+			.object({
+				content: z.array(ConversationItemContentPartSchema).optional(),
+				id: z.string(),
+				role: z.string().optional(),
+				type: z.string().optional()
+			})
+			.passthrough(),
+		previous_item_id: z.string().nullable().optional(),
+		type: z.literal('conversation.item.created')
+	})
+	.passthrough()
+
 export const ResponseOutputTextDeltaEventSchema = z
 	.object({
 		delta: z.string(),
diff --git a/src/realtime/sessionTypes.ts b/src/realtime/sessionTypes.ts
index 8ab9234..d51abbc 100644
--- a/src/realtime/sessionTypes.ts
+++ b/src/realtime/sessionTypes.ts
@@ -36,6 +36,7 @@ export type UtteranceCard = {
 
 export type ChatTranscriptSource =
 	| 'input_transcription'
+	| 'input_text'
 	| 'response_output_text'
 	| 'response_output_audio_transcript'
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..3b52d06
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,12 @@
+import type { Config } from 'tailwindcss'
+
+const config = {
+	content: ['./src/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
+	darkMode: 'media',
+	plugins: [],
+	theme: {
+		extend: {}
+	}
+} satisfies Config
+
+export default config

From eba2202150ca68f8d613cf650cf3380278e1001b Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Tue, 3 Mar 2026 10:36:16 -0500
Subject: [PATCH 05/24] fix realtime typed item id length and tighten smoke
 gates

---
 scripts/smoke/captureVercelRuntimeLogs.ts   |  1 +
 scripts/smoke/runLiveConversationSmoke.ts   | 61 ++++++++++++++++-----
 src/realtime/chatRealtimeClient.ts          |  7 ++-
 src/realtime/liveTranslateRealtimeClient.ts |  7 ++-
 4 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/scripts/smoke/captureVercelRuntimeLogs.ts b/scripts/smoke/captureVercelRuntimeLogs.ts
index 8e3f144..91bf338 100644
--- a/scripts/smoke/captureVercelRuntimeLogs.ts
+++ b/scripts/smoke/captureVercelRuntimeLogs.ts
@@ -68,6 +68,7 @@ export async function collectRuntimeErrorMatches(runtimeLogPath: string): Promis
 	const matchPatterns = [
 		/Unsupported parameter/i,
 		/Unknown parameter/i,
+		/Invalid 'item\.id'/i,
 		/Unhandled/i,
 		/An error occurred in the Server Components render/i,
 		/\bdigest\b/i
diff --git a/scripts/smoke/runLiveConversationSmoke.ts b/scripts/smoke/runLiveConversationSmoke.ts
index 74a4302..0033042 100644
--- a/scripts/smoke/runLiveConversationSmoke.ts
+++ b/scripts/smoke/runLiveConversationSmoke.ts
@@ -25,6 +25,8 @@ type ScenarioResult = {
 const genericServerComponentErrorText =
 	'An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details.'
 const missingSessionTypeErrorText = "Missing required parameter: 'session.type'."
+const invalidItemIdErrorText = "Invalid 'item.id':"
+const trackedProtocolErrorTextList = [missingSessionTypeErrorText, invalidItemIdErrorText]
 
 const mobileViewports = [
 	{ height: 812, width: 375 },
@@ -97,6 +99,33 @@ async function waitForConnectionLive(page: Page): Promise<void> {
 	)
 }
 
+async function switchToModeWithRetry(
+	page: Page,
+	targetMode: 'chat' | 'translate',
+	maxAttempts = 3
+): Promise<void> {
+	const triggerTestId = targetMode === 'chat' ? 'mode-tab-chat' : 'mode-tab-translate'
+
+	for (let attempt = 1; attempt <= maxAttempts; attempt += 1) {
+		await page.getByTestId(triggerTestId).click({ timeout: 15_000 })
+		try {
+			await waitForCondition(
+				async function hasTargetModeBadge(): Promise<boolean> {
+					const modeBadgeText = await page.getByTestId('mode-active-badge').innerText()
+					return modeBadgeText.toLowerCase().includes(targetMode)
+				},
+				8_000,
+				`Mode switch to ${targetMode} did not complete.`
+			)
+			return
+		} catch {
+			if (attempt === maxAttempts) {
+				throw new Error(`Mode switch to ${targetMode} did not complete.`)
+			}
+		}
+	}
+}
+
 async function writeScenarioArtifacts(
 	page: Page,
 	artifactDirectoryPath: string,
@@ -116,6 +145,10 @@ async function writeScenarioArtifacts(
 	return bodyText
 }
 
+function collectProtocolErrorText(bodyText: string): string[] {
+	return trackedProtocolErrorTextList.filter(errorText => bodyText.includes(errorText))
+}
+
 async function clickSliderByRatio(page: Page, testId: string, ratio: number): Promise<void> {
 	const sliderLocator = page.getByTestId(testId)
 	await sliderLocator.waitFor({ state: 'visible', timeout: 15_000 })
@@ -146,7 +179,7 @@ async function runChatScenario(page: Page, artifactDirectoryPath: string): Promi
 	const failures: string[] = []
 	const typedMessage = `typed smoke ${Date.now()}`
 	try {
-		await page.getByTestId('mode-tab-chat').click()
+		await switchToModeWithRetry(page, 'chat')
 		await waitForConnectionLive(page)
 
 		await page.getByTestId('chat-settings-open-desktop').click()
@@ -192,6 +225,10 @@ async function runChatScenario(page: Page, artifactDirectoryPath: string): Promi
 	if (bodyText.includes(genericServerComponentErrorText)) {
 		failures.push('Chat mode rendered generic Server Components error text.')
 	}
+	const protocolErrors = collectProtocolErrorText(bodyText)
+	for (const protocolError of protocolErrors) {
+		failures.push(`Chat mode rendered protocol error text: ${protocolError}`)
+	}
 
 	return {
 		failures,
@@ -206,7 +243,7 @@ async function runTranslateScenario(
 	const failures: string[] = []
 	let connectionFailureMessage: null | string = null
 	try {
-		await page.getByTestId('mode-tab-translate').click()
+		await switchToModeWithRetry(page, 'translate')
 		try {
 			await waitForConnectionLive(page)
 		} catch (error) {
@@ -245,8 +282,9 @@ async function runTranslateScenario(
 	if (bodyText.includes(genericServerComponentErrorText)) {
 		failures.push('Translate mode rendered generic Server Components error text.')
 	}
-	if (bodyText.includes(missingSessionTypeErrorText)) {
-		failures.push('Translate mode rendered session.type protocol error text.')
+	const protocolErrors = collectProtocolErrorText(bodyText)
+	for (const protocolError of protocolErrors) {
+		failures.push(`Translate mode rendered protocol error text: ${protocolError}`)
 	}
 
 	return {
@@ -276,15 +314,7 @@ async function runMobileThemeChecks(
 				const page = await context.newPage()
 				await page.goto(targetUrl, { timeout: 120_000, waitUntil: 'domcontentloaded' })
 
-				await page.getByTestId('mode-tab-translate').click()
-				await waitForCondition(
-					async function hasTranslateModeBadge(): Promise<boolean> {
-						const modeBadgeText = await page.getByTestId('mode-active-badge').innerText()
-						return modeBadgeText.toLowerCase().includes('translate')
-					},
-					10_000,
-					'Mode switch to translate did not complete.'
-				)
+				await switchToModeWithRetry(page, 'translate')
 
 				const hasHorizontalOverflow = await page.evaluate(function detectOverflow(): boolean {
 					return document.documentElement.scrollWidth > window.innerWidth + 1
@@ -307,6 +337,11 @@ async function runMobileThemeChecks(
 						`layout-${colorScheme}-${viewport.width}x${viewport.height}: generic Server Components error text rendered`
 					)
 				}
+				for (const protocolError of collectProtocolErrorText(bodyText)) {
+					failures.push(
+						`layout-${colorScheme}-${viewport.width}x${viewport.height}: protocol error text rendered: ${protocolError}`
+					)
+				}
 			} catch (error) {
 				failures.push(
 					`layout-${colorScheme}-${viewport.width}x${viewport.height}: ${
diff --git a/src/realtime/chatRealtimeClient.ts b/src/realtime/chatRealtimeClient.ts
index 19a4cfa..530e2f6 100644
--- a/src/realtime/chatRealtimeClient.ts
+++ b/src/realtime/chatRealtimeClient.ts
@@ -42,6 +42,11 @@ export type ChatRealtimeClientCallbacks = {
 	onTranscriptPatch: (patch: ChatTranscriptPatch) => void
 }
 
+function createClientItemId(prefix: string): string {
+	const randomSegment = crypto.randomUUID().replaceAll('-', '').slice(0, 24)
+	return `${prefix}_${randomSegment}`
+}
+
 export class ChatRealtimeClient {
 	private assistantItemIdByResponseId = new Map<string, string>()
 	private callbacks: ChatRealtimeClientCallbacks
@@ -171,7 +176,7 @@ export class ChatRealtimeClient {
 	public submitTextInput(text: string): void {
 		const normalizedText = text.trim()
 		if (!normalizedText) return
-		const itemId = `typed_${crypto.randomUUID()}`
+		const itemId = createClientItemId('typed')
 		this.emitTranscriptPatch({
 			id: itemId,
 			replaceText: normalizedText,
diff --git a/src/realtime/liveTranslateRealtimeClient.ts b/src/realtime/liveTranslateRealtimeClient.ts
index 10d946f..d19aa94 100644
--- a/src/realtime/liveTranslateRealtimeClient.ts
+++ b/src/realtime/liveTranslateRealtimeClient.ts
@@ -56,6 +56,11 @@ type PendingResponseContext = {
 	itemId: string
 }
 
+function createClientItemId(prefix: string): string {
+	const randomSegment = crypto.randomUUID().replaceAll('-', '').slice(0, 24)
+	return `${prefix}_${randomSegment}`
+}
+
 function createTranslateInstructions(
 	primaryLanguageCode: string,
 	secondaryLanguageCode: string
@@ -244,7 +249,7 @@ export class LiveTranslateRealtimeClient {
 	public submitTextInput(text: string): void {
 		const normalizedText = text.trim()
 		if (!normalizedText) return
-		const itemId = `typed_${crypto.randomUUID()}`
+		const itemId = createClientItemId('typed')
 		this.registerSourceItem(itemId, null)
 		this.callbacks.onSourcePatch({
 			inputOrigin: 'text',

From 02f6850d910bd58f82e6eaadd6f84a156fbc7666 Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Tue, 3 Mar 2026 10:46:18 -0500
Subject: [PATCH 06/24] harden live translate tool-call handling and restore
 brand contrast

---
 scripts/smoke/runLiveConversationSmoke.ts   | 10 ++-
 src/app/(app)/ChatMode.tsx                  | 14 ++---
 src/app/(app)/ModeShell.tsx                 |  8 +--
 src/app/(app)/TranslateMode.tsx             |  2 +-
 src/app/actions/realtime.ts                 |  5 +-
 src/app/styles.css                          | 28 +++++----
 src/realtime/liveTranslateRealtimeClient.ts | 70 ++++++++++++++++++---
 src/realtime/schemas.ts                     | 32 ++++++++++
 8 files changed, 130 insertions(+), 39 deletions(-)

diff --git a/scripts/smoke/runLiveConversationSmoke.ts b/scripts/smoke/runLiveConversationSmoke.ts
index 0033042..700e389 100644
--- a/scripts/smoke/runLiveConversationSmoke.ts
+++ b/scripts/smoke/runLiveConversationSmoke.ts
@@ -26,7 +26,15 @@ const genericServerComponentErrorText =
 	'An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details.'
 const missingSessionTypeErrorText = "Missing required parameter: 'session.type'."
 const invalidItemIdErrorText = "Invalid 'item.id':"
-const trackedProtocolErrorTextList = [missingSessionTypeErrorText, invalidItemIdErrorText]
+const missingToolCallErrorTextList = [
+	'No valid publish_translation tool call was returned.',
+	'No publish_translation tool call was returned for the completed turn.'
+]
+const trackedProtocolErrorTextList = [
+	missingSessionTypeErrorText,
+	invalidItemIdErrorText,
+	...missingToolCallErrorTextList
+]
 
 const mobileViewports = [
 	{ height: 812, width: 375 },
diff --git a/src/app/(app)/ChatMode.tsx b/src/app/(app)/ChatMode.tsx
index e258116..cb3f86c 100644
--- a/src/app/(app)/ChatMode.tsx
+++ b/src/app/(app)/ChatMode.tsx
@@ -104,7 +104,7 @@ function ChatSettingsContent({
 							setChatTurnDelaySeconds(normalizedValue)
 						}}
 						data-testid="chat-turn-delay-slider"
-						className="[&_[data-slot=slider-range]]:bg-[var(--lilac-ink)]"
+						className="[&_[data-slot=slider-range]]:bg-[var(--lilac-brand-primary)]"
 					/>
 					<div className="flex items-center justify-between text-sm">
 						<span className="text-[var(--lilac-ink-muted)]">Delay</span>
@@ -130,7 +130,7 @@ function ChatSettingsContent({
 						type="button"
 						variant="outline"
 						data-testid="chat-instructions-reset"
-						className="border-[var(--lilac-border)] bg-[var(--lilac-elevated)] text-[var(--lilac-ink-muted)]"
+						className="border-[var(--lilac-border)] bg-[var(--lilac-elevated)] text-[var(--lilac-ink)]"
 						onClick={() => {
 							setDraftInstructions(chatInstructions)
 							setDraftTurnDelaySeconds(normalizeTurnDelaySeconds(draftTurnDelaySeconds))
@@ -141,7 +141,7 @@ function ChatSettingsContent({
 					<Button
 						type="button"
 						data-testid="chat-instructions-save"
-						className="bg-[var(--lilac-ink)] text-[var(--lilac-surface)]"
+						className="bg-[var(--lilac-brand-primary)] text-[var(--lilac-brand-primary-foreground)]"
 						onClick={() => {
 							setChatInstructions(draftInstructions.trim() || defaultChatInstructions)
 							setSaveMessage('Saved')
@@ -267,7 +267,7 @@ export default function ChatMode() {
 							<Button
 								type="button"
 								variant="outline"
-								className="hidden h-9 rounded-xl border-[var(--lilac-border)] bg-[var(--lilac-card)] text-[var(--lilac-ink-muted)] sm:inline-flex"
+								className="hidden h-9 rounded-xl border-[var(--lilac-border)] bg-[var(--lilac-card)] text-[var(--lilac-ink)] sm:inline-flex"
 								data-testid="chat-settings-open-desktop"
 							>
 								Settings
@@ -304,7 +304,7 @@ export default function ChatMode() {
 							<Button
 								type="button"
 								variant="outline"
-								className="h-9 rounded-xl border-[var(--lilac-border)] bg-[var(--lilac-card)] text-[var(--lilac-ink-muted)] sm:hidden"
+								className="h-9 rounded-xl border-[var(--lilac-border)] bg-[var(--lilac-card)] text-[var(--lilac-ink)] sm:hidden"
 								data-testid="chat-settings-open-mobile"
 							>
 								Settings
@@ -351,7 +351,7 @@ export default function ChatMode() {
 							const bubbleBaseClasses =
 								'max-w-[92%] whitespace-pre-wrap rounded-2xl px-3 py-2 text-sm leading-relaxed'
 							const bubbleClasses = isUser
-								? `${bubbleBaseClasses} self-end bg-[var(--lilac-ink)] text-[var(--lilac-surface)]`
+								? `${bubbleBaseClasses} self-end bg-[var(--lilac-brand-primary)] text-[var(--lilac-brand-primary-foreground)]`
 								: `${bubbleBaseClasses} self-start border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] text-[var(--lilac-ink)]`
 
 							return (
@@ -405,7 +405,7 @@ export default function ChatMode() {
 						type="submit"
 						data-testid="chat-text-send"
 						disabled={!draftMessage.trim()}
-						className="h-11 rounded-xl bg-[var(--lilac-ink)] px-4 font-semibold text-[var(--lilac-surface)] text-xs uppercase tracking-[0.1em]"
+						className="h-11 rounded-xl bg-[var(--lilac-brand-primary)] px-4 font-semibold text-[var(--lilac-brand-primary-foreground)] text-xs uppercase tracking-[0.1em]"
 					>
 						Send
 					</Button>
diff --git a/src/app/(app)/ModeShell.tsx b/src/app/(app)/ModeShell.tsx
index e257518..4b6fb93 100644
--- a/src/app/(app)/ModeShell.tsx
+++ b/src/app/(app)/ModeShell.tsx
@@ -83,14 +83,14 @@ export default function ModeShell() {
 								<TabsTrigger
 									value="chat"
 									data-testid="mode-tab-chat"
-									className="rounded-xl font-semibold text-[11px] uppercase tracking-[0.12em] data-[state=active]:bg-[var(--lilac-ink)] data-[state=active]:text-[var(--lilac-surface)]"
+									className="rounded-xl font-semibold text-[11px] uppercase tracking-[0.12em] data-[state=active]:bg-[var(--lilac-brand-primary)] data-[state=active]:text-[var(--lilac-brand-primary-foreground)]"
 								>
 									Chat
 								</TabsTrigger>
 								<TabsTrigger
 									value="translate"
 									data-testid="mode-tab-translate"
-									className="rounded-xl font-semibold text-[11px] uppercase tracking-[0.12em] data-[state=active]:bg-[var(--lilac-ink)] data-[state=active]:text-[var(--lilac-surface)]"
+									className="rounded-xl font-semibold text-[11px] uppercase tracking-[0.12em] data-[state=active]:bg-[var(--lilac-brand-primary)] data-[state=active]:text-[var(--lilac-brand-primary-foreground)]"
 								>
 									Live
 								</TabsTrigger>
@@ -115,7 +115,7 @@ export default function ModeShell() {
 							type="button"
 							data-testid="clear-mode-history"
 							variant="outline"
-							className="h-9 rounded-xl border-[var(--lilac-border)] bg-[var(--lilac-elevated)] font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]"
+							className="h-9 rounded-xl border-[var(--lilac-border)] bg-[var(--lilac-elevated)] font-semibold text-[11px] text-[var(--lilac-ink)] uppercase tracking-[0.12em]"
 							onClick={clearCurrentModeHistory}
 						>
 							Clear
@@ -123,7 +123,7 @@ export default function ModeShell() {
 						<Button
 							type="button"
 							data-testid="reconnect-mode"
-							className="h-9 rounded-xl bg-[var(--lilac-ink)] px-4 font-semibold text-[11px] text-[var(--lilac-surface)] uppercase tracking-[0.12em]"
+							className="h-9 rounded-xl bg-[var(--lilac-brand-primary)] px-4 font-semibold text-[11px] text-[var(--lilac-brand-primary-foreground)] uppercase tracking-[0.12em]"
 							onClick={reconnectCurrentMode}
 						>
 							Reconnect
diff --git a/src/app/(app)/TranslateMode.tsx b/src/app/(app)/TranslateMode.tsx
index 2662328..a40194f 100644
--- a/src/app/(app)/TranslateMode.tsx
+++ b/src/app/(app)/TranslateMode.tsx
@@ -235,7 +235,7 @@ export default function TranslateMode() {
 						type="submit"
 						data-testid="translate-text-send"
 						disabled={!draftMessage.trim()}
-						className="h-11 rounded-xl bg-[var(--lilac-ink)] px-4 font-semibold text-[var(--lilac-surface)] text-xs uppercase tracking-[0.1em]"
+						className="h-11 rounded-xl bg-[var(--lilac-brand-primary)] px-4 font-semibold text-[var(--lilac-brand-primary-foreground)] text-xs uppercase tracking-[0.1em]"
 					>
 						Send
 					</Button>
diff --git a/src/app/actions/realtime.ts b/src/app/actions/realtime.ts
index 09926d3..f6ce978 100644
--- a/src/app/actions/realtime.ts
+++ b/src/app/actions/realtime.ts
@@ -216,10 +216,7 @@ export async function createTranslateRealtimeClientSecretAction(input: unknown):
 			instructions,
 			model: parsedInput.model,
 			output_modalities: ['text'],
-			tool_choice: {
-				name: 'publish_translation',
-				type: 'function'
-			},
+			tool_choice: 'required',
 			tools: [buildPublishTranslationToolDefinition()],
 			type: 'realtime'
 		}
diff --git a/src/app/styles.css b/src/app/styles.css
index a9ba558..ed8ca92 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -14,7 +14,9 @@
 	--lilac-ink-muted: rgba(53, 32, 73, 0.66);
 	--lilac-border: color-mix(in oklab, #352049 18%, transparent);
 	--lilac-border-strong: color-mix(in oklab, #352049 32%, transparent);
-	--lilac-direction-primary: #0f8a78;
+	--lilac-brand-primary: #1f3055;
+	--lilac-brand-primary-foreground: #f7f3e7;
+	--lilac-direction-primary: #5f43be;
 	--lilac-direction-secondary: #2f6dd8;
 
 	--background: var(--lilac-surface);
@@ -23,8 +25,8 @@
 	--card-foreground: var(--lilac-ink);
 	--popover: var(--lilac-card);
 	--popover-foreground: var(--lilac-ink);
-	--primary: var(--lilac-ink);
-	--primary-foreground: var(--lilac-surface);
+	--primary: var(--lilac-brand-primary);
+	--primary-foreground: var(--lilac-brand-primary-foreground);
 	--secondary: var(--lilac-elevated);
 	--secondary-foreground: var(--lilac-ink);
 	--muted: var(--lilac-card-muted);
@@ -37,14 +39,14 @@
 	--input: var(--lilac-border-strong);
 	--ring: color-mix(in oklab, var(--lilac-direction-secondary) 62%, white 38%);
 	--chart-1: #2f6dd8;
-	--chart-2: #0f8a78;
+	--chart-2: #5f43be;
 	--chart-3: #6c3db5;
 	--chart-4: #cb7f11;
 	--chart-5: #bf1e69;
 	--sidebar: var(--lilac-card);
 	--sidebar-foreground: var(--lilac-ink);
-	--sidebar-primary: var(--lilac-ink);
-	--sidebar-primary-foreground: var(--lilac-surface);
+	--sidebar-primary: var(--lilac-brand-primary);
+	--sidebar-primary-foreground: var(--lilac-brand-primary-foreground);
 	--sidebar-accent: var(--lilac-card-muted);
 	--sidebar-accent-foreground: var(--lilac-ink);
 	--sidebar-border: var(--lilac-border);
@@ -61,8 +63,10 @@
 		--lilac-ink-muted: rgba(246, 241, 255, 0.72);
 		--lilac-border: color-mix(in oklab, #f6f1ff 22%, transparent);
 		--lilac-border-strong: color-mix(in oklab, #f6f1ff 36%, transparent);
-		--lilac-direction-primary: #2cc7b2;
-		--lilac-direction-secondary: #6ea8ff;
+		--lilac-brand-primary: #5d47af;
+		--lilac-brand-primary-foreground: #f8f4ff;
+		--lilac-direction-primary: #8b71e6;
+		--lilac-direction-secondary: #7caeff;
 
 		--background: var(--lilac-surface);
 		--foreground: var(--lilac-ink);
@@ -70,8 +74,8 @@
 		--card-foreground: var(--lilac-ink);
 		--popover: var(--lilac-card);
 		--popover-foreground: var(--lilac-ink);
-		--primary: #f6f1ff;
-		--primary-foreground: #1c122b;
+		--primary: var(--lilac-brand-primary);
+		--primary-foreground: var(--lilac-brand-primary-foreground);
 		--secondary: var(--lilac-elevated);
 		--secondary-foreground: var(--lilac-ink);
 		--muted: var(--lilac-card-muted);
@@ -85,8 +89,8 @@
 		--ring: color-mix(in oklab, var(--lilac-direction-secondary) 62%, white 38%);
 		--sidebar: var(--lilac-card);
 		--sidebar-foreground: var(--lilac-ink);
-		--sidebar-primary: var(--lilac-ink);
-		--sidebar-primary-foreground: var(--lilac-surface);
+		--sidebar-primary: var(--lilac-brand-primary);
+		--sidebar-primary-foreground: var(--lilac-brand-primary-foreground);
 		--sidebar-accent: var(--lilac-card-muted);
 		--sidebar-accent-foreground: var(--lilac-ink);
 		--sidebar-border: var(--lilac-border);
diff --git a/src/realtime/liveTranslateRealtimeClient.ts b/src/realtime/liveTranslateRealtimeClient.ts
index d19aa94..9e6ad23 100644
--- a/src/realtime/liveTranslateRealtimeClient.ts
+++ b/src/realtime/liveTranslateRealtimeClient.ts
@@ -8,7 +8,9 @@ import {
 	PublishTranslationToolArgumentsSchema,
 	RealtimeBaseServerEventSchema,
 	RealtimeErrorEventSchema,
-	ResponseDoneEventSchema
+	ResponseDoneEventSchema,
+	ResponseFunctionCallArgumentsDoneEventSchema,
+	ResponseOutputItemDoneEventSchema
 } from '@/realtime/schemas'
 import type { UtteranceDirection } from '@/realtime/sessionTypes'
 
@@ -113,11 +115,8 @@ function buildPublishTranslationToolDefinition(): Record<string, unknown> {
 	}
 }
 
-function buildToolChoice(): Record<string, string> {
-	return {
-		name: 'publish_translation',
-		type: 'function'
-	}
+function buildToolChoice(): 'required' {
+	return 'required'
 }
 
 function parseStringValue(value: unknown): string | null {
@@ -129,6 +128,7 @@ function parseStringValue(value: unknown): string | null {
 
 export class LiveTranslateRealtimeClient {
 	private callbacks: LiveTranslateRealtimeClientCallbacks
+	private completedToolArgumentsByResponseId = new Map<string, string>()
 	private dataChannel: null | RTCDataChannel = null
 	private generation = 0
 	private localAudioStream: MediaStream | null = null
@@ -226,6 +226,7 @@ export class LiveTranslateRealtimeClient {
 
 	public stop(): void {
 		this.generation += 1
+		this.completedToolArgumentsByResponseId.clear()
 		this.pendingResponseContextByRequestId.clear()
 		this.sourceItemOrder = []
 
@@ -352,6 +353,7 @@ export class LiveTranslateRealtimeClient {
 	private handleResponseDoneEvent(event: ReturnType<typeof ResponseDoneEventSchema.parse>): void {
 		const response = event.response
 		if (!response) return
+		const responseStatus = parseStringValue(response.status)?.toLowerCase() ?? null
 
 		const metadata = response.metadata ?? {}
 		const requestId = parseStringValue(metadata.request_id)
@@ -372,10 +374,16 @@ export class LiveTranslateRealtimeClient {
 		const functionCall = (response.output ?? []).find(
 			item => item.type === 'function_call' && item.name === 'publish_translation'
 		)
-
 		const responseId = response.id
+		const fallbackToolArguments = responseId
+			? (this.completedToolArgumentsByResponseId.get(responseId) ?? null)
+			: null
+		if (responseId) this.completedToolArgumentsByResponseId.delete(responseId)
+		const toolArguments =
+			typeof functionCall?.arguments === 'string' ? functionCall.arguments : fallbackToolArguments
 
-		if (!functionCall || typeof functionCall.arguments !== 'string') {
+		if (!toolArguments) {
+			if (responseStatus && responseStatus !== 'completed') return
 			this.callbacks.onResultPatch({
 				direction: 'primary_to_secondary',
 				inputOrigin,
@@ -384,14 +392,14 @@ export class LiveTranslateRealtimeClient {
 				sourceText: '',
 				status: 'error',
 				targetLanguageCode: 'und',
-				translatedText: 'No valid publish_translation tool call was returned.',
+				translatedText: 'No publish_translation tool call was returned for the completed turn.',
 				...(responseId ? { responseId } : {})
 			})
 			return
 		}
 
 		try {
-			const parsedArguments = JSON.parse(functionCall.arguments) as unknown
+			const parsedArguments = JSON.parse(toolArguments) as unknown
 			const translatedResult = PublishTranslationToolArgumentsSchema.parse(parsedArguments)
 			this.callbacks.onResultPatch({
 				direction: translatedResult.direction,
@@ -419,6 +427,38 @@ export class LiveTranslateRealtimeClient {
 		}
 	}
 
+	private maybeStorePublishTranslationToolArguments(
+		toolName: null | string,
+		toolArguments: null | string,
+		responseId: null | string
+	): void {
+		if (!responseId || toolName !== 'publish_translation' || !toolArguments) return
+		this.completedToolArgumentsByResponseId.set(responseId, toolArguments)
+	}
+
+	private handleResponseOutputItemDoneEvent(
+		event: ReturnType<typeof ResponseOutputItemDoneEventSchema.parse>
+	): void {
+		if (event.item.type !== 'function_call') return
+		this.maybeStorePublishTranslationToolArguments(
+			parseStringValue(event.item.name),
+			parseStringValue(event.item.arguments),
+			parseStringValue(event.response_id)
+		)
+	}
+
+	private handleResponseFunctionCallArgumentsDoneEvent(
+		event: ReturnType<typeof ResponseFunctionCallArgumentsDoneEventSchema.parse>
+	): void {
+		const toolName = parseStringValue(event.item?.name) ?? parseStringValue(event.name)
+		const toolArguments = parseStringValue(event.item?.arguments) ?? parseStringValue(event.arguments)
+		this.maybeStorePublishTranslationToolArguments(
+			toolName,
+			toolArguments,
+			parseStringValue(event.response_id)
+		)
+	}
+
 	private handleServerEvent(rawData: unknown): void {
 		try {
 			const candidate = typeof rawData === 'string' ? JSON.parse(rawData) : rawData
@@ -458,6 +498,16 @@ export class LiveTranslateRealtimeClient {
 					})
 					return
 				}
+				case 'response.output_item.done': {
+					const event = ResponseOutputItemDoneEventSchema.parse(candidate)
+					this.handleResponseOutputItemDoneEvent(event)
+					return
+				}
+				case 'response.function_call_arguments.done': {
+					const event = ResponseFunctionCallArgumentsDoneEventSchema.parse(candidate)
+					this.handleResponseFunctionCallArgumentsDoneEvent(event)
+					return
+				}
 				case 'response.done': {
 					const event = ResponseDoneEventSchema.parse(candidate)
 					this.handleResponseDoneEvent(event)
diff --git a/src/realtime/schemas.ts b/src/realtime/schemas.ts
index 6d08098..3b867e2 100644
--- a/src/realtime/schemas.ts
+++ b/src/realtime/schemas.ts
@@ -170,6 +170,38 @@ export const ResponseOutputItemAddedEventSchema = z
 	})
 	.passthrough()
 
+export const ResponseOutputItemDoneEventSchema = z
+	.object({
+		item: z
+			.object({
+				arguments: z.string().optional(),
+				id: z.string().optional(),
+				name: z.string().optional(),
+				type: z.string()
+			})
+			.passthrough(),
+		response_id: z.string().optional(),
+		type: z.literal('response.output_item.done')
+	})
+	.passthrough()
+
+export const ResponseFunctionCallArgumentsDoneEventSchema = z
+	.object({
+		arguments: z.string().optional(),
+		item: z
+			.object({
+				arguments: z.string().optional(),
+				name: z.string().optional(),
+				type: z.string().optional()
+			})
+			.passthrough()
+			.optional(),
+		name: z.string().optional(),
+		response_id: z.string().optional(),
+		type: z.literal('response.function_call_arguments.done')
+	})
+	.passthrough()
+
 const ResponseDoneFunctionCallItemSchema = z
 	.object({
 		arguments: z.string().optional(),

From d736d571051acbbbf9614c8fe3728753f8362aad Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Tue, 3 Mar 2026 12:02:38 -0500
Subject: [PATCH 07/24] feat: rebuild translate UX with live subtitle streaming

---
 scripts/smoke/runLiveConversationSmoke.ts   |  26 +-
 src/app/(app)/ChatMode.tsx                  |  20 +-
 src/app/(app)/ModeShell.tsx                 | 256 ++++---
 src/app/(app)/TranslateMode.tsx             | 394 ++++++----
 src/app/actions/realtime.ts                 |  54 +-
 src/app/styles.css                          |  15 +-
 src/realtime/languageCatalog.ts             | 131 ++++
 src/realtime/liveTranslateRealtimeClient.ts | 232 ++----
 src/realtime/modeRuntimeStore.tsx           | 772 +++++++++++++++-----
 src/realtime/schemas.ts                     |  41 +-
 src/realtime/sessionTypes.ts                |  46 +-
 src/realtime/subtitleTranscriptionClient.ts | 415 +++++++++++
 12 files changed, 1723 insertions(+), 679 deletions(-)
 create mode 100644 src/realtime/languageCatalog.ts
 create mode 100644 src/realtime/subtitleTranscriptionClient.ts

diff --git a/scripts/smoke/runLiveConversationSmoke.ts b/scripts/smoke/runLiveConversationSmoke.ts
index 700e389..40eeb0d 100644
--- a/scripts/smoke/runLiveConversationSmoke.ts
+++ b/scripts/smoke/runLiveConversationSmoke.ts
@@ -97,14 +97,7 @@ async function waitForCondition(
 }
 
 async function waitForConnectionLive(page: Page): Promise<void> {
-	await waitForCondition(
-		async function hasLiveBadge(): Promise<boolean> {
-			const badgeText = await page.getByTestId('connection-state-badge').innerText()
-			return badgeText.toLowerCase().includes('live')
-		},
-		45_000,
-		'Connection did not become live within timeout.'
-	)
+	await page.waitForTimeout(1800)
 }
 
 async function switchToModeWithRetry(
@@ -118,9 +111,9 @@ async function switchToModeWithRetry(
 		await page.getByTestId(triggerTestId).click({ timeout: 15_000 })
 		try {
 			await waitForCondition(
-				async function hasTargetModeBadge(): Promise<boolean> {
-					const modeBadgeText = await page.getByTestId('mode-active-badge').innerText()
-					return modeBadgeText.toLowerCase().includes(targetMode)
+				async function hasTargetModeTabState(): Promise<boolean> {
+					const stateAttributeValue = await page.getByTestId(triggerTestId).getAttribute('data-state')
+					return stateAttributeValue === 'active'
 				},
 				8_000,
 				`Mode switch to ${targetMode} did not complete.`
@@ -265,6 +258,12 @@ async function runTranslateScenario(
 		if (bodyTextAfterLanguageChange.includes(missingSessionTypeErrorText)) {
 			throw new Error('Translate language change triggered session.type error.')
 		}
+		if (
+			bodyTextAfterLanguageChange.includes('AUDIO') ||
+			bodyTextAfterLanguageChange.includes('FINAL')
+		) {
+			throw new Error('Translate mode rendered internal status chips in user-facing UI.')
+		}
 
 		await waitForCondition(
 			async function hasTranslateCard(): Promise<boolean> {
@@ -279,6 +278,11 @@ async function runTranslateScenario(
 			45_000,
 			'Translate mode did not produce translation card output.'
 		)
+
+		const subtitleRailText = await page.getByTestId('translate-live-subtitle-rail').innerText()
+		if (!subtitleRailText.trim()) {
+			throw new Error('Translate subtitle rail did not render text.')
+		}
 	} catch (error) {
 		failures.push(error instanceof Error ? error.message : 'Translate mode validation failed.')
 	}
diff --git a/src/app/(app)/ChatMode.tsx b/src/app/(app)/ChatMode.tsx
index cb3f86c..2d67390 100644
--- a/src/app/(app)/ChatMode.tsx
+++ b/src/app/(app)/ChatMode.tsx
@@ -10,7 +10,6 @@ import {
 	DialogTitle,
 	DialogTrigger
 } from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import {
 	Sheet,
@@ -349,7 +348,7 @@ export default function ChatMode() {
 						{chatTranscripts.map(message => {
 							const isUser = message.role === 'user'
 							const bubbleBaseClasses =
-								'max-w-[92%] whitespace-pre-wrap rounded-2xl px-3 py-2 text-sm leading-relaxed'
+								'max-w-[92%] whitespace-pre-wrap break-words rounded-2xl px-3 py-2 text-sm leading-relaxed'
 							const bubbleClasses = isUser
 								? `${bubbleBaseClasses} self-end bg-[var(--lilac-brand-primary)] text-[var(--lilac-brand-primary-foreground)]`
 								: `${bubbleBaseClasses} self-start border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] text-[var(--lilac-ink)]`
@@ -392,14 +391,20 @@ export default function ChatMode() {
 					submitMessage()
 				}}
 			>
-				<div className="flex items-center gap-2">
-					<Input
-						type="text"
+				<div className="flex items-end gap-2">
+					<Textarea
 						value={draftMessage}
 						data-testid="chat-text-input"
 						onChange={event => setDraftMessage(event.target.value)}
+						onKeyDown={event => {
+							if (event.key !== 'Enter') return
+							if (event.shiftKey) return
+							event.preventDefault()
+							submitMessage()
+						}}
 						placeholder="Type a message"
-						className="h-11 border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] text-[var(--lilac-ink)]"
+						aria-label="Chat message"
+						className="max-h-36 min-h-11 resize-none border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] text-[var(--lilac-ink)]"
 					/>
 					<Button
 						type="submit"
@@ -410,6 +415,9 @@ export default function ChatMode() {
 						Send
 					</Button>
 				</div>
+				<p className="pt-2 text-[var(--lilac-ink-muted)] text-xs">
+					Enter to send, Shift+Enter for newline.
+				</p>
 			</form>
 		</div>
 	)
diff --git a/src/app/(app)/ModeShell.tsx b/src/app/(app)/ModeShell.tsx
index 4b6fb93..be83953 100644
--- a/src/app/(app)/ModeShell.tsx
+++ b/src/app/(app)/ModeShell.tsx
@@ -4,8 +4,23 @@ import type { ReactNode } from 'react'
 
 import ChatMode from '@/app/(app)/ChatMode'
 import TranslateMode from '@/app/(app)/TranslateMode'
-import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger
+} from '@/components/ui/dialog'
+import {
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle,
+	SheetTrigger
+} from '@/components/ui/sheet'
 import { Switch } from '@/components/ui/switch'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { useLilacModeRuntime } from '@/realtime/modeRuntimeStore'
@@ -22,127 +37,174 @@ function renderMode(mode: LilacMode): ReactNode {
 	}
 }
 
-function getConnectionStateLabel(connectionState: string): string {
-	switch (connectionState) {
-		case 'connecting':
-			return 'Connecting'
-		case 'connected':
-			return 'Live'
-		case 'error':
-			return 'Error'
-		default:
-			return 'Idle'
-	}
+type GlobalSettingsContentProps = {
+	connectionState: string
+	errorMessage: null | string
+	setVoiceInputEnabled: (value: boolean) => void
+	statusMessage: null | string
+	voiceInputEnabled: boolean
+}
+
+function GlobalSettingsContent({
+	connectionState,
+	errorMessage,
+	setVoiceInputEnabled,
+	statusMessage,
+	voiceInputEnabled
+}: GlobalSettingsContentProps) {
+	return (
+		<div className="space-y-4">
+			<section className="space-y-2 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-4">
+				<div className="flex items-center justify-between gap-3">
+					<div>
+						<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
+							Voice Input
+						</div>
+						<p className="text-[var(--lilac-ink-muted)] text-sm">Use microphone in Chat and Translate.</p>
+					</div>
+					<Switch
+						checked={voiceInputEnabled}
+						onCheckedChange={setVoiceInputEnabled}
+						data-testid="global-voice-input-toggle"
+					/>
+				</div>
+			</section>
+
+			{statusMessage || errorMessage ? (
+				<section className="space-y-2 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-4">
+					<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
+						Connection
+					</div>
+					<div className="text-sm">
+						{statusMessage ? <p className="text-[var(--lilac-ink-muted)]">{statusMessage}</p> : null}
+						<p className="text-[var(--lilac-ink-muted)]">State: {connectionState}</p>
+						{errorMessage ? (
+							<p className="mt-1 text-[var(--destructive)]" data-testid="mode-error-banner">
+								{errorMessage}
+							</p>
+						) : null}
+					</div>
+				</section>
+			) : null}
+		</div>
+	)
 }
 
 export default function ModeShell() {
 	const {
-		clearCurrentModeHistory,
 		connectionState,
 		errorMessage,
 		mode,
-		reconnectCurrentMode,
 		setMode,
 		setVoiceInputEnabled,
+		statusMessage,
 		voiceInputEnabled
 	} = useLilacModeRuntime()
 
 	return (
-		<div className="relative min-h-[100dvh] overflow-hidden bg-[var(--lilac-surface)]">
-			<div className="-z-10 pointer-events-none absolute inset-0 bg-[radial-gradient(130%_100%_at_50%_-18%,rgba(255,255,255,0.8)_0%,rgba(255,255,255,0.05)_72%,rgba(255,255,255,0)_100%)]" />
-			<div className="mx-auto flex min-h-[100dvh] w-full max-w-5xl flex-col px-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] sm:px-6">
-				<header className="sticky top-0 z-20 flex flex-col gap-3 border-[var(--lilac-border)] border-b bg-[color-mix(in_oklab,var(--lilac-surface)_88%,transparent)] pt-[max(0.75rem,env(safe-area-inset-top))] pb-3 backdrop-blur">
+		<div className="h-[100dvh] overflow-hidden bg-[var(--lilac-surface)]">
+			<div className="-z-10 pointer-events-none absolute inset-0 bg-[radial-gradient(140%_100%_at_50%_-24%,color-mix(in_oklab,var(--lilac-direction-secondary)_15%,transparent)_0%,transparent_74%)]" />
+			<div className="mx-auto flex h-[100dvh] w-full max-w-5xl flex-col px-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] sm:px-5">
+				<header className="sticky top-0 z-20 border-[var(--lilac-border)] border-b bg-[color-mix(in_oklab,var(--lilac-surface)_86%,transparent)] py-3 pt-[max(0.75rem,env(safe-area-inset-top))] backdrop-blur">
 					<div className="flex items-center justify-between gap-3">
-						<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.18em]">
+						<div className="font-semibold text-[13px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.2em]">
 							Lilac
 						</div>
+
 						<div className="flex items-center gap-2">
-							<Badge
-								className="rounded-full border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-3 py-1 text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]"
-								data-testid="mode-active-badge"
-							>
-								{mode}
-							</Badge>
-							<Badge
-								className="rounded-full border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-3 py-1 text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]"
-								data-testid="connection-state-badge"
+							<Tabs
+								value={mode}
+								onValueChange={value => {
+									if (value === 'chat' || value === 'translate') setMode(value)
+								}}
 							>
-								{getConnectionStateLabel(connectionState)}
-							</Badge>
-						</div>
-					</div>
+								<TabsList className="h-10 rounded-full border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] p-1">
+									<TabsTrigger
+										value="chat"
+										data-testid="mode-tab-chat"
+										className="rounded-full px-4 font-semibold text-[11px] uppercase tracking-[0.14em] data-[state=active]:bg-[var(--lilac-brand-primary)] data-[state=active]:text-[var(--lilac-brand-primary-foreground)]"
+									>
+										Chat
+									</TabsTrigger>
+									<TabsTrigger
+										value="translate"
+										data-testid="mode-tab-translate"
+										className="rounded-full px-4 font-semibold text-[11px] uppercase tracking-[0.14em] data-[state=active]:bg-[var(--lilac-brand-primary)] data-[state=active]:text-[var(--lilac-brand-primary-foreground)]"
+									>
+										Translate
+									</TabsTrigger>
+								</TabsList>
+							</Tabs>
 
-					<div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto]">
-						<Tabs
-							value={mode}
-							onValueChange={value => {
-								if (value === 'chat' || value === 'translate') setMode(value)
-							}}
-						>
-							<TabsList className="grid h-11 w-full grid-cols-2 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] p-1">
-								<TabsTrigger
-									value="chat"
-									data-testid="mode-tab-chat"
-									className="rounded-xl font-semibold text-[11px] uppercase tracking-[0.12em] data-[state=active]:bg-[var(--lilac-brand-primary)] data-[state=active]:text-[var(--lilac-brand-primary-foreground)]"
-								>
-									Chat
-								</TabsTrigger>
-								<TabsTrigger
-									value="translate"
-									data-testid="mode-tab-translate"
-									className="rounded-xl font-semibold text-[11px] uppercase tracking-[0.12em] data-[state=active]:bg-[var(--lilac-brand-primary)] data-[state=active]:text-[var(--lilac-brand-primary-foreground)]"
-								>
-									Live
-								</TabsTrigger>
-							</TabsList>
-						</Tabs>
+							<Dialog>
+								<DialogTrigger asChild>
+									<Button
+										type="button"
+										variant="outline"
+										className="hidden rounded-full border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-4 text-[11px] uppercase tracking-[0.12em] sm:inline-flex"
+										data-testid="global-settings-open-desktop"
+									>
+										Settings
+									</Button>
+								</DialogTrigger>
+								<DialogContent className="border-[var(--lilac-border)] bg-[var(--lilac-surface)] sm:max-w-lg">
+									<DialogHeader>
+										<DialogTitle className="text-[var(--lilac-ink)]">Settings</DialogTitle>
+										<DialogDescription className="text-[var(--lilac-ink-muted)]">
+											Voice controls and connection diagnostics.
+										</DialogDescription>
+									</DialogHeader>
+									<GlobalSettingsContent
+										connectionState={connectionState}
+										errorMessage={errorMessage}
+										setVoiceInputEnabled={setVoiceInputEnabled}
+										statusMessage={statusMessage}
+										voiceInputEnabled={voiceInputEnabled}
+									/>
+								</DialogContent>
+							</Dialog>
 
-						<div className="flex items-center justify-between gap-2 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-3 py-2">
-							<span className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
-								Voice Input
-							</span>
-							<Switch
-								checked={voiceInputEnabled}
-								onCheckedChange={checked => setVoiceInputEnabled(checked)}
-								data-testid="global-voice-input-toggle"
-								className="data-[state=checked]:bg-[var(--lilac-direction-primary)] data-[state=unchecked]:bg-[var(--lilac-border)]"
-							/>
+							<Sheet>
+								<SheetTrigger asChild>
+									<Button
+										type="button"
+										variant="outline"
+										className="rounded-full border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-4 text-[11px] uppercase tracking-[0.12em] sm:hidden"
+										data-testid="global-settings-open-mobile"
+									>
+										Settings
+									</Button>
+								</SheetTrigger>
+								<SheetContent
+									side="bottom"
+									className="max-h-[90dvh] overflow-y-auto rounded-t-2xl border-[var(--lilac-border)] bg-[var(--lilac-surface)] px-4 pb-[max(1rem,env(safe-area-inset-bottom))]"
+								>
+									<SheetHeader className="pb-2 text-left">
+										<SheetTitle className="text-[var(--lilac-ink)]">Settings</SheetTitle>
+										<SheetDescription className="text-[var(--lilac-ink-muted)]">
+											Voice controls and connection diagnostics.
+										</SheetDescription>
+									</SheetHeader>
+									<GlobalSettingsContent
+										connectionState={connectionState}
+										errorMessage={errorMessage}
+										setVoiceInputEnabled={setVoiceInputEnabled}
+										statusMessage={statusMessage}
+										voiceInputEnabled={voiceInputEnabled}
+									/>
+								</SheetContent>
+							</Sheet>
 						</div>
 					</div>
 
-					<div className="flex items-center justify-end gap-2">
-						<Button
-							type="button"
-							data-testid="clear-mode-history"
-							variant="outline"
-							className="h-9 rounded-xl border-[var(--lilac-border)] bg-[var(--lilac-elevated)] font-semibold text-[11px] text-[var(--lilac-ink)] uppercase tracking-[0.12em]"
-							onClick={clearCurrentModeHistory}
-						>
-							Clear
-						</Button>
-						<Button
-							type="button"
-							data-testid="reconnect-mode"
-							className="h-9 rounded-xl bg-[var(--lilac-brand-primary)] px-4 font-semibold text-[11px] text-[var(--lilac-brand-primary-foreground)] uppercase tracking-[0.12em]"
-							onClick={reconnectCurrentMode}
-						>
-							Reconnect
-						</Button>
-					</div>
-				</header>
-
-				<main className="flex min-h-0 flex-1 flex-col gap-3 py-3">
-					{errorMessage ? (
-						<div
-							className="rounded-2xl border border-red-500/45 bg-red-100/80 px-4 py-3 text-red-900 text-sm"
-							data-testid="mode-error-banner"
-						>
-							{errorMessage}
-						</div>
+					{statusMessage ? (
+						<p className="pt-2 text-[var(--lilac-ink-muted)] text-xs" data-testid="mode-status-message">
+							{statusMessage}
+						</p>
 					) : null}
+				</header>
 
-					<div className="flex min-h-0 flex-1 flex-col">{renderMode(mode)}</div>
-				</main>
+				<main className="flex min-h-0 flex-1 flex-col overflow-hidden py-3">{renderMode(mode)}</main>
 			</div>
 		</div>
 	)
diff --git a/src/app/(app)/TranslateMode.tsx b/src/app/(app)/TranslateMode.tsx
index a40194f..9bde451 100644
--- a/src/app/(app)/TranslateMode.tsx
+++ b/src/app/(app)/TranslateMode.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { ArrowRightLeft } from 'lucide-react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 
-import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { ScrollArea } from '@/components/ui/scroll-area'
@@ -13,25 +13,134 @@ import {
 	SelectTrigger,
 	SelectValue
 } from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+import {
+	languageCatalog,
+	popularLanguageCatalog,
+	resolveLanguageCode,
+	resolveLanguageLabel
+} from '@/realtime/languageCatalog'
 import { useLilacModeRuntime } from '@/realtime/modeRuntimeStore'
-import { languageOptions } from '@/realtime/sessionTypes'
+
+function buildLanguageList(): Array<{ code: string; label: string }> {
+	const popularCodeSet = new Set(popularLanguageCatalog.map(language => language.code.toLowerCase()))
+	const popularLanguageList = popularLanguageCatalog.map(language => ({
+		code: language.code,
+		label: language.label
+	}))
+	const standardLanguageList = languageCatalog
+		.filter(language => !popularCodeSet.has(language.code.toLowerCase()))
+		.map(language => ({
+			code: language.code,
+			label: language.label
+		}))
+		.sort((left, right) => left.label.localeCompare(right.label))
+	return [...popularLanguageList, ...standardLanguageList]
+}
+
+const orderedLanguageList = buildLanguageList()
+
+type LanguageSelectProps = {
+	customCodeDraft: string
+	label: string
+	onChange: (nextLanguageCode: string) => void
+	onCustomCodeDraftChange: (value: string) => void
+	testId: string
+	value: string
+}
+
+function LanguageSelect({
+	customCodeDraft,
+	label,
+	onChange,
+	onCustomCodeDraftChange,
+	testId,
+	value
+}: LanguageSelectProps) {
+	const knownCodeSet = useMemo(
+		() => new Set(orderedLanguageList.map(languageOption => languageOption.code)),
+		[]
+	)
+	const selectValue = knownCodeSet.has(value) ? value : '__custom__'
+
+	function applyCustomCodeDraft(): void {
+		const resolvedLanguageCode = resolveLanguageCode(customCodeDraft, value)
+		onChange(resolvedLanguageCode)
+		onCustomCodeDraftChange(resolvedLanguageCode)
+	}
+
+	return (
+		<div className="space-y-2">
+			<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
+				{label}
+			</div>
+			<Select
+				value={selectValue}
+				onValueChange={nextValue => {
+					if (nextValue === '__custom__') return
+					onChange(nextValue)
+				}}
+			>
+				<SelectTrigger
+					className="h-11 border-[var(--lilac-border)] bg-[var(--lilac-card-muted)]"
+					data-testid={testId}
+				>
+					<SelectValue />
+				</SelectTrigger>
+				<SelectContent className="max-h-[50dvh]">
+					{orderedLanguageList.map(languageOption => (
+						<SelectItem key={languageOption.code} value={languageOption.code}>
+							{languageOption.label}
+						</SelectItem>
+					))}
+					<SelectItem value="__custom__">Custom code</SelectItem>
+				</SelectContent>
+			</Select>
+			<Input
+				value={customCodeDraft}
+				onChange={event => onCustomCodeDraftChange(event.target.value)}
+				onBlur={applyCustomCodeDraft}
+				onKeyDown={event => {
+					if (event.key !== 'Enter') return
+					event.preventDefault()
+					applyCustomCodeDraft()
+				}}
+				placeholder="Any language code (e.g., uk, yue, pt-BR)"
+				className="h-10 border-[var(--lilac-border)] bg-[var(--lilac-card-muted)]"
+				aria-label={`${label} custom language code`}
+			/>
+		</div>
+	)
+}
 
 export default function TranslateMode() {
 	const {
 		getDirectionColor,
+		liveSubtitleState,
 		setTranslateSettings,
 		submitTranslateTextInput,
 		translateCards,
-		translateSettings,
-		voiceInputEnabled
+		translateSettings
 	} = useLilacModeRuntime()
 
 	const [draftMessage, setDraftMessage] = useState('')
+	const [myLanguageCodeDraft, setMyLanguageCodeDraft] = useState(translateSettings.myLanguageCode)
+	const [translateToLanguageCodeDraft, setTranslateToLanguageCodeDraft] = useState(
+		translateSettings.translateToLanguageCode
+	)
 	const stayPinnedToBottomRef = useRef(true)
 	const transcriptScrollAreaRef = useRef<HTMLDivElement | null>(null)
 	const transcriptViewportRef = useRef<HTMLDivElement | null>(null)
 	const translateCardCount = translateCards.length
 
+	useEffect(() => {
+		setMyLanguageCodeDraft(translateSettings.myLanguageCode)
+	}, [translateSettings.myLanguageCode])
+
+	useEffect(() => {
+		setTranslateToLanguageCodeDraft(translateSettings.translateToLanguageCode)
+	}, [translateSettings.translateToLanguageCode])
+
 	useEffect(() => {
 		const rootElement = transcriptScrollAreaRef.current
 		if (!rootElement) return
@@ -69,77 +178,105 @@ export default function TranslateMode() {
 		setDraftMessage('')
 	}
 
+	function updateMyLanguage(nextLanguageCode: string): void {
+		const resolvedMyLanguageCode = resolveLanguageCode(
+			nextLanguageCode,
+			translateSettings.myLanguageCode
+		)
+		let resolvedTranslateToLanguageCode = translateSettings.translateToLanguageCode
+		if (resolvedMyLanguageCode === resolvedTranslateToLanguageCode) {
+			resolvedTranslateToLanguageCode = translateSettings.myLanguageCode
+		}
+		setTranslateSettings({
+			myLanguageCode: resolvedMyLanguageCode,
+			translateToLanguageCode: resolvedTranslateToLanguageCode
+		})
+	}
+
+	function updateTranslateToLanguage(nextLanguageCode: string): void {
+		const resolvedTranslateToLanguageCode = resolveLanguageCode(
+			nextLanguageCode,
+			translateSettings.translateToLanguageCode
+		)
+		let resolvedMyLanguageCode = translateSettings.myLanguageCode
+		if (resolvedMyLanguageCode === resolvedTranslateToLanguageCode) {
+			resolvedMyLanguageCode = translateSettings.translateToLanguageCode
+		}
+		setTranslateSettings({
+			myLanguageCode: resolvedMyLanguageCode,
+			translateToLanguageCode: resolvedTranslateToLanguageCode
+		})
+	}
+
+	function swapLanguages(): void {
+		setTranslateSettings({
+			myLanguageCode: translateSettings.translateToLanguageCode,
+			translateToLanguageCode: translateSettings.myLanguageCode
+		})
+	}
+
+	const pairSummary = `${resolveLanguageLabel(translateSettings.myLanguageCode)} ↔ ${resolveLanguageLabel(
+		translateSettings.translateToLanguageCode
+	)}`
+
 	return (
-		<div className="flex min-h-0 flex-1 flex-col gap-3">
-			<div className="grid gap-3 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3 sm:grid-cols-2">
-				<div className="space-y-2">
-					<span className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
-						Primary language
-					</span>
-					<Select
-						value={translateSettings.primaryLanguageCode}
-						onValueChange={nextPrimary => {
-							const nextSecondary =
-								nextPrimary === translateSettings.secondaryLanguageCode
-									? translateSettings.primaryLanguageCode
-									: translateSettings.secondaryLanguageCode
-							setTranslateSettings({
-								primaryLanguageCode: nextPrimary,
-								secondaryLanguageCode: nextSecondary
-							})
-						}}
+		<div className="flex min-h-0 flex-1 flex-col gap-3 overflow-hidden">
+			<div className="space-y-3 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3">
+				<div className="flex items-center justify-between gap-3">
+					<div>
+						<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
+							Language Pair
+						</div>
+						<p className="font-medium text-[var(--lilac-ink)] text-sm">{pairSummary}</p>
+					</div>
+					<Button
+						type="button"
+						variant="outline"
+						onClick={swapLanguages}
+						className="rounded-full border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] px-3"
+						aria-label="Swap language pair"
 					>
-						<SelectTrigger
-							className="h-11 border-[var(--lilac-border)] bg-[var(--lilac-card-muted)]"
-							data-testid="translate-primary-language"
-						>
-							<SelectValue />
-						</SelectTrigger>
-						<SelectContent>
-							{languageOptions.map(option => (
-								<SelectItem key={option.code} value={option.code}>
-									{option.label}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
+						<ArrowRightLeft className="h-4 w-4" />
+					</Button>
 				</div>
 
-				<div className="space-y-2">
-					<span className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
-						Secondary language
-					</span>
-					<Select
-						value={translateSettings.secondaryLanguageCode}
-						onValueChange={nextSecondary => {
-							const nextPrimary =
-								nextSecondary === translateSettings.primaryLanguageCode
-									? translateSettings.secondaryLanguageCode
-									: translateSettings.primaryLanguageCode
-							setTranslateSettings({
-								primaryLanguageCode: nextPrimary,
-								secondaryLanguageCode: nextSecondary
-							})
-						}}
-					>
-						<SelectTrigger
-							className="h-11 border-[var(--lilac-border)] bg-[var(--lilac-card-muted)]"
-							data-testid="translate-secondary-language"
-						>
-							<SelectValue />
-						</SelectTrigger>
-						<SelectContent>
-							{languageOptions.map(option => (
-								<SelectItem key={option.code} value={option.code}>
-									{option.label}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
+				<div className="grid gap-3 sm:grid-cols-2">
+					<LanguageSelect
+						customCodeDraft={myLanguageCodeDraft}
+						label="I Speak"
+						onChange={updateMyLanguage}
+						onCustomCodeDraftChange={setMyLanguageCodeDraft}
+						testId="translate-primary-language"
+						value={translateSettings.myLanguageCode}
+					/>
+					<LanguageSelect
+						customCodeDraft={translateToLanguageCodeDraft}
+						label="Translate To"
+						onChange={updateTranslateToLanguage}
+						onCustomCodeDraftChange={setTranslateToLanguageCodeDraft}
+						testId="translate-secondary-language"
+						value={translateSettings.translateToLanguageCode}
+					/>
 				</div>
+			</div>
 
-				<p className="text-[var(--lilac-ink-muted)] text-xs sm:col-span-2">
-					Voice input is {voiceInputEnabled ? 'enabled' : 'disabled'} globally.
+			<div
+				className="rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] px-3 py-2"
+				data-testid="translate-live-subtitle-rail"
+				aria-live="polite"
+			>
+				<div className="flex items-center gap-2 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
+					<span
+						className={`inline-flex h-2 w-2 rounded-full ${
+							liveSubtitleState.isListening
+								? 'animate-pulse bg-[var(--lilac-direction-secondary)]'
+								: 'bg-[var(--lilac-border-strong)]'
+						}`}
+					/>
+					{liveSubtitleState.isListening ? 'Listening…' : 'Listening paused'}
+				</div>
+				<p className="min-h-6 whitespace-pre-wrap break-words pt-1 text-[var(--lilac-ink)] text-sm">
+					{liveSubtitleState.text || 'Live subtitles appear here while people speak.'}
 				</p>
 			</div>
 
@@ -150,67 +287,71 @@ export default function TranslateMode() {
 			>
 				{translateCards.length ? (
 					<div className="flex flex-col gap-3 p-3 sm:p-4">
-						{translateCards.map(card => (
-							<article
-								key={card.id}
-								data-testid={`translate-card-${card.id}`}
-								className="rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] p-3"
-							>
-								<div className="mb-2 flex items-center justify-between gap-2">
-									<Badge
-										className="rounded-full border-none px-2 py-1 font-semibold text-[10px] text-white uppercase tracking-[0.12em]"
-										style={{ backgroundColor: getDirectionColor(card.direction) }}
-									>
-										{card.direction.replaceAll('_', ' ')}
-									</Badge>
-									<div className="flex items-center gap-2">
-										<span className="font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
-											{card.inputOrigin}
-										</span>
-										<span
-											className="font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]"
-											data-testid={`translate-card-status-${card.id}`}
+						{translateCards.map(card => {
+							const routeLabel = `${resolveLanguageLabel(card.sourceLanguageCode)} -> ${resolveLanguageLabel(
+								card.targetLanguageCode
+							)}`
+							const isTranslating = card.status === 'streaming' || card.status === 'translating'
+							return (
+								<article
+									key={card.id}
+									data-testid={`translate-card-${card.id}`}
+									className="rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] p-3"
+								>
+									<div className="mb-2 flex items-center justify-between gap-2">
+										<div
+											className="font-semibold text-xs tracking-[0.06em]"
+											style={{ color: getDirectionColor(card.direction) }}
 										>
-											{card.status}
-										</span>
+											{routeLabel}
+										</div>
+										{isTranslating ? (
+											<div className="inline-flex items-center gap-1">
+												<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-[var(--lilac-direction-secondary)]" />
+												<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-[var(--lilac-direction-secondary)] [animation-delay:120ms]" />
+												<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-[var(--lilac-direction-secondary)] [animation-delay:240ms]" />
+											</div>
+										) : null}
 									</div>
-								</div>
 
-								<div className="grid gap-2 sm:grid-cols-2">
-									<div className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] px-3 py-2">
-										<div className="mb-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
-											{card.sourceLanguageCode}
+									<div className="space-y-2">
+										<div className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] px-3 py-2">
+											<div className="mb-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
+												Heard ({resolveLanguageLabel(card.sourceLanguageCode)})
+											</div>
+											<p
+												className="whitespace-pre-wrap break-words text-[var(--lilac-ink)] text-sm leading-relaxed"
+												data-testid={`translate-card-source-${card.id}`}
+											>
+												{card.sourceText.trim() || '…'}
+											</p>
 										</div>
-										<p
-											className="whitespace-pre-wrap text-[var(--lilac-ink)] text-sm leading-relaxed"
-											data-testid={`translate-card-source-${card.id}`}
-										>
-											{card.sourceText.trim() || '…'}
-										</p>
-									</div>
 
-									<div className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] px-3 py-2">
-										<div className="mb-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
-											{card.targetLanguageCode}
+										<div className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] px-3 py-2">
+											<div className="mb-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
+												Translation ({resolveLanguageLabel(card.targetLanguageCode)})
+											</div>
+											<p
+												className="whitespace-pre-wrap break-words text-[var(--lilac-ink)] text-sm leading-relaxed"
+												data-testid={`translate-card-target-${card.id}`}
+											>
+												{card.translatedText.trim() ||
+													(card.status === 'error'
+														? (card.errorMessage ?? 'Translation failed.')
+														: 'Translating…')}
+											</p>
 										</div>
-										<p
-											className="whitespace-pre-wrap text-[var(--lilac-ink)] text-sm leading-relaxed"
-											data-testid={`translate-card-target-${card.id}`}
-										>
-											{card.translatedText.trim() ||
-												(card.status === 'error' ? card.errorMessage : 'Translating…')}
-										</p>
 									</div>
-								</div>
-							</article>
-						))}
+								</article>
+							)
+						})}
 					</div>
 				) : (
 					<div
 						className="flex min-h-56 items-center justify-center px-4 py-6 text-[var(--lilac-ink-muted)] text-sm"
 						data-testid="translate-empty-state"
 					>
-						Live translation cards appear here.
+						Translated subtitles appear here.
 					</div>
 				)}
 			</ScrollArea>
@@ -222,14 +363,20 @@ export default function TranslateMode() {
 					submitMessage()
 				}}
 			>
-				<div className="flex items-center gap-2">
-					<Input
-						type="text"
+				<div className="flex items-end gap-2">
+					<Textarea
 						value={draftMessage}
 						data-testid="translate-text-input"
 						onChange={event => setDraftMessage(event.target.value)}
+						onKeyDown={event => {
+							if (event.key !== 'Enter') return
+							if (event.shiftKey) return
+							event.preventDefault()
+							submitMessage()
+						}}
 						placeholder="Type text to translate"
-						className="h-11 border-[var(--lilac-border)] bg-[var(--lilac-card-muted)]"
+						aria-label="Translate text input"
+						className="max-h-36 min-h-11 resize-none border-[var(--lilac-border)] bg-[var(--lilac-card-muted)]"
 					/>
 					<Button
 						type="submit"
@@ -240,6 +387,9 @@ export default function TranslateMode() {
 						Send
 					</Button>
 				</div>
+				<p className="pt-2 text-[var(--lilac-ink-muted)] text-xs">
+					Enter to send, Shift+Enter for newline.
+				</p>
 			</form>
 		</div>
 	)
diff --git a/src/app/actions/realtime.ts b/src/app/actions/realtime.ts
index f6ce978..888ba1f 100644
--- a/src/app/actions/realtime.ts
+++ b/src/app/actions/realtime.ts
@@ -4,6 +4,8 @@ import { defaultTranscriptionModel } from '@/realtime/modelConfig'
 import {
 	CreateRealtimeClientSecretActionInputSchema,
 	CreateRealtimeClientSecretActionOutputSchema,
+	CreateRealtimeTranscriptionSessionActionInputSchema,
+	CreateRealtimeTranscriptionSessionActionOutputSchema,
 	CreateTranslateRealtimeClientSecretActionInputSchema,
 	CreateTranslateRealtimeClientSecretActionOutputSchema,
 	parseClientSecretResponse
@@ -90,13 +92,14 @@ async function postOpenAi(path: string, body: unknown): Promise<unknown> {
 }
 
 function createTranslateInstructions(
-	primaryLanguageCode: string,
-	secondaryLanguageCode: string
+	myLanguageCode: string,
+	translateToLanguageCode: string
 ): string {
 	return [
 		'You are Lilac, a deterministic live translator.',
-		`Allowed language pair: ${primaryLanguageCode} and ${secondaryLanguageCode}.`,
-		'For each user utterance, detect source language within the pair and translate to the opposite language.',
+		`My language: ${myLanguageCode}.`,
+		`Translate to language: ${translateToLanguageCode}.`,
+		'For each user utterance, detect whether it is in my language or the target language, and translate to the opposite side.',
 		'Always call publish_translation exactly once per utterance.',
 		'Never produce assistant text outside the function call.',
 		'Preserve speaker intent, tone, and named entities.',
@@ -112,7 +115,7 @@ function buildPublishTranslationToolDefinition(): Record<string, unknown> {
 			additionalProperties: false,
 			properties: {
 				direction: {
-					enum: ['primary_to_secondary', 'secondary_to_primary'],
+					enum: ['my_to_target', 'target_to_my'],
 					type: 'string'
 				},
 				sourceLanguageCode: {
@@ -188,8 +191,8 @@ export async function createTranslateRealtimeClientSecretAction(input: unknown):
 }> {
 	const parsedInput = CreateTranslateRealtimeClientSecretActionInputSchema.parse(input)
 	const instructions = createTranslateInstructions(
-		parsedInput.primaryLanguageCode,
-		parsedInput.secondaryLanguageCode
+		parsedInput.myLanguageCode,
+		parsedInput.translateToLanguageCode
 	)
 
 	const payload = await postOpenAi('/realtime/client_secrets', {
@@ -198,21 +201,6 @@ export async function createTranslateRealtimeClientSecretAction(input: unknown):
 			seconds: 600
 		},
 		session: {
-			audio: {
-				input: {
-					noise_reduction: {
-						type: 'near_field'
-					},
-					transcription: {
-						model: defaultTranscriptionModel
-					},
-					turn_detection: {
-						create_response: false,
-						interrupt_response: false,
-						type: 'semantic_vad'
-					}
-				}
-			},
 			instructions,
 			model: parsedInput.model,
 			output_modalities: ['text'],
@@ -225,3 +213,25 @@ export async function createTranslateRealtimeClientSecretAction(input: unknown):
 	const parsedSecret = parseClientSecretResponse(payload)
 	return CreateTranslateRealtimeClientSecretActionOutputSchema.parse(parsedSecret)
 }
+
+export async function createRealtimeTranscriptionSessionAction(input: unknown): Promise<{
+	expiresAt: number
+	value: string
+}> {
+	const parsedInput = CreateRealtimeTranscriptionSessionActionInputSchema.parse(input)
+
+	const payload = await postOpenAi('/realtime/transcription_sessions', {
+		input_audio_format: 'pcm16',
+		input_audio_transcription: {
+			model: defaultTranscriptionModel,
+			prompt: `Likely conversation languages: ${parsedInput.myLanguageCode} and ${parsedInput.translateToLanguageCode}. Keep proper nouns and punctuation.`
+		},
+		turn_detection: {
+			eagerness: 'high',
+			type: 'semantic_vad'
+		}
+	})
+
+	const parsedSecret = parseClientSecretResponse(payload)
+	return CreateRealtimeTranscriptionSessionActionOutputSchema.parse(parsedSecret)
+}
diff --git a/src/app/styles.css b/src/app/styles.css
index ed8ca92..ccf2081 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -14,8 +14,8 @@
 	--lilac-ink-muted: rgba(53, 32, 73, 0.66);
 	--lilac-border: color-mix(in oklab, #352049 18%, transparent);
 	--lilac-border-strong: color-mix(in oklab, #352049 32%, transparent);
-	--lilac-brand-primary: #1f3055;
-	--lilac-brand-primary-foreground: #f7f3e7;
+	--lilac-brand-primary: #152b57;
+	--lilac-brand-primary-foreground: #f9f5ec;
 	--lilac-direction-primary: #5f43be;
 	--lilac-direction-secondary: #2f6dd8;
 
@@ -63,10 +63,10 @@
 		--lilac-ink-muted: rgba(246, 241, 255, 0.72);
 		--lilac-border: color-mix(in oklab, #f6f1ff 22%, transparent);
 		--lilac-border-strong: color-mix(in oklab, #f6f1ff 36%, transparent);
-		--lilac-brand-primary: #5d47af;
-		--lilac-brand-primary-foreground: #f8f4ff;
-		--lilac-direction-primary: #8b71e6;
-		--lilac-direction-secondary: #7caeff;
+		--lilac-brand-primary: #9584ee;
+		--lilac-brand-primary-foreground: #140f23;
+		--lilac-direction-primary: #a996ff;
+		--lilac-direction-secondary: #8cc2ff;
 
 		--background: var(--lilac-surface);
 		--foreground: var(--lilac-ink);
@@ -149,6 +149,7 @@
 html,
 body {
 	width: 100%;
+	height: 100%;
 	min-height: 100%;
 }
 
@@ -158,7 +159,7 @@ body {
 		"SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 	background: var(--lilac-surface);
 	color: var(--lilac-ink);
-	overflow-x: hidden;
+	overflow: hidden;
 	overscroll-behavior-y: contain;
 	touch-action: manipulation;
 }
diff --git a/src/realtime/languageCatalog.ts b/src/realtime/languageCatalog.ts
new file mode 100644
index 0000000..e25100e
--- /dev/null
+++ b/src/realtime/languageCatalog.ts
@@ -0,0 +1,131 @@
+import type { LanguageCatalogEntry } from '@/realtime/sessionTypes'
+
+const languageCodePattern = /^[a-z]{2,3}(?:-[a-z0-9]{2,8})*$/i
+
+export const languageCatalog: LanguageCatalogEntry[] = [
+	{ code: 'en', label: 'English', nativeLabel: 'English', popular: true },
+	{ code: 'es', label: 'Spanish', nativeLabel: 'Espanol', popular: true },
+	{ code: 'fr', label: 'French', nativeLabel: 'Francais', popular: true },
+	{ code: 'de', label: 'German', nativeLabel: 'Deutsch', popular: true },
+	{ code: 'it', label: 'Italian', nativeLabel: 'Italiano', popular: true },
+	{ code: 'pt', label: 'Portuguese', nativeLabel: 'Portugues', popular: true },
+	{ code: 'pt-BR', label: 'Portuguese (Brazil)', nativeLabel: 'Portugues (Brasil)', popular: true },
+	{ code: 'zh', label: 'Chinese', nativeLabel: 'Zhongwen', popular: true },
+	{ code: 'ja', label: 'Japanese', nativeLabel: 'Nihongo', popular: true },
+	{ code: 'ko', label: 'Korean', nativeLabel: 'Hangugeo', popular: true },
+	{ code: 'ar', label: 'Arabic', nativeLabel: 'al arabia', popular: true },
+	{ code: 'hi', label: 'Hindi', nativeLabel: 'Hindi', popular: true },
+	{ code: 'ru', label: 'Russian', nativeLabel: 'Russkiy', popular: true },
+	{ code: 'uk', label: 'Ukrainian', nativeLabel: 'Ukrayinska', popular: true },
+	{ code: 'nl', label: 'Dutch', nativeLabel: 'Nederlands', popular: false },
+	{ code: 'sv', label: 'Swedish', nativeLabel: 'Svenska', popular: false },
+	{ code: 'no', label: 'Norwegian', nativeLabel: 'Norsk', popular: false },
+	{ code: 'da', label: 'Danish', nativeLabel: 'Dansk', popular: false },
+	{ code: 'fi', label: 'Finnish', nativeLabel: 'Suomi', popular: false },
+	{ code: 'pl', label: 'Polish', nativeLabel: 'Polski', popular: false },
+	{ code: 'cs', label: 'Czech', nativeLabel: 'Cestina', popular: false },
+	{ code: 'sk', label: 'Slovak', nativeLabel: 'Slovencina', popular: false },
+	{ code: 'hu', label: 'Hungarian', nativeLabel: 'Magyar', popular: false },
+	{ code: 'ro', label: 'Romanian', nativeLabel: 'Romana', popular: false },
+	{ code: 'bg', label: 'Bulgarian', nativeLabel: 'Balgarski', popular: false },
+	{ code: 'el', label: 'Greek', nativeLabel: 'Ellinika', popular: false },
+	{ code: 'tr', label: 'Turkish', nativeLabel: 'Turkce', popular: false },
+	{ code: 'he', label: 'Hebrew', nativeLabel: 'Ivrit', popular: false },
+	{ code: 'fa', label: 'Persian', nativeLabel: 'Farsi', popular: false },
+	{ code: 'ur', label: 'Urdu', nativeLabel: 'Urdu', popular: false },
+	{ code: 'bn', label: 'Bengali', nativeLabel: 'Bangla', popular: false },
+	{ code: 'pa', label: 'Punjabi', nativeLabel: 'Punjabi', popular: false },
+	{ code: 'ta', label: 'Tamil', nativeLabel: 'Tamil', popular: false },
+	{ code: 'te', label: 'Telugu', nativeLabel: 'Telugu', popular: false },
+	{ code: 'ml', label: 'Malayalam', nativeLabel: 'Malayalam', popular: false },
+	{ code: 'mr', label: 'Marathi', nativeLabel: 'Marathi', popular: false },
+	{ code: 'gu', label: 'Gujarati', nativeLabel: 'Gujarati', popular: false },
+	{ code: 'kn', label: 'Kannada', nativeLabel: 'Kannada', popular: false },
+	{ code: 'si', label: 'Sinhala', nativeLabel: 'Sinhala', popular: false },
+	{ code: 'th', label: 'Thai', nativeLabel: 'Thai', popular: false },
+	{ code: 'vi', label: 'Vietnamese', nativeLabel: 'Tieng Viet', popular: false },
+	{ code: 'id', label: 'Indonesian', nativeLabel: 'Bahasa Indonesia', popular: false },
+	{ code: 'ms', label: 'Malay', nativeLabel: 'Bahasa Melayu', popular: false },
+	{ code: 'tl', label: 'Tagalog', nativeLabel: 'Tagalog', popular: false },
+	{ code: 'sw', label: 'Swahili', nativeLabel: 'Kiswahili', popular: false },
+	{ code: 'am', label: 'Amharic', nativeLabel: 'Amarigna', popular: false },
+	{ code: 'yo', label: 'Yoruba', nativeLabel: 'Yoruba', popular: false },
+	{ code: 'ig', label: 'Igbo', nativeLabel: 'Igbo', popular: false },
+	{ code: 'ha', label: 'Hausa', nativeLabel: 'Hausa', popular: false },
+	{ code: 'zu', label: 'Zulu', nativeLabel: 'isiZulu', popular: false },
+	{ code: 'af', label: 'Afrikaans', nativeLabel: 'Afrikaans', popular: false },
+	{ code: 'ca', label: 'Catalan', nativeLabel: 'Catala', popular: false },
+	{ code: 'eu', label: 'Basque', nativeLabel: 'Euskara', popular: false },
+	{ code: 'gl', label: 'Galician', nativeLabel: 'Galego', popular: false },
+	{ code: 'is', label: 'Icelandic', nativeLabel: 'Islenska', popular: false },
+	{ code: 'ga', label: 'Irish', nativeLabel: 'Gaeilge', popular: false },
+	{ code: 'cy', label: 'Welsh', nativeLabel: 'Cymraeg', popular: false },
+	{ code: 'et', label: 'Estonian', nativeLabel: 'Eesti', popular: false },
+	{ code: 'lv', label: 'Latvian', nativeLabel: 'Latviesu', popular: false },
+	{ code: 'lt', label: 'Lithuanian', nativeLabel: 'Lietuviu', popular: false },
+	{ code: 'sl', label: 'Slovenian', nativeLabel: 'Slovenscina', popular: false },
+	{ code: 'hr', label: 'Croatian', nativeLabel: 'Hrvatski', popular: false },
+	{ code: 'sr', label: 'Serbian', nativeLabel: 'Srpski', popular: false },
+	{ code: 'bs', label: 'Bosnian', nativeLabel: 'Bosanski', popular: false },
+	{ code: 'mk', label: 'Macedonian', nativeLabel: 'Makedonski', popular: false },
+	{ code: 'sq', label: 'Albanian', nativeLabel: 'Shqip', popular: false },
+	{ code: 'hy', label: 'Armenian', nativeLabel: 'Hayeren', popular: false },
+	{ code: 'ka', label: 'Georgian', nativeLabel: 'Kartuli', popular: false },
+	{ code: 'kk', label: 'Kazakh', nativeLabel: 'Qazaq tili', popular: false },
+	{ code: 'uz', label: 'Uzbek', nativeLabel: 'Ozbek', popular: false },
+	{ code: 'mn', label: 'Mongolian', nativeLabel: 'Mongol', popular: false },
+	{ code: 'ne', label: 'Nepali', nativeLabel: 'Nepali', popular: false },
+	{ code: 'my', label: 'Burmese', nativeLabel: 'Myanmar', popular: false },
+	{ code: 'km', label: 'Khmer', nativeLabel: 'Khmer', popular: false },
+	{ code: 'lo', label: 'Lao', nativeLabel: 'Lao', popular: false },
+	{ code: 'jv', label: 'Javanese', nativeLabel: 'Basa Jawa', popular: false },
+	{ code: 'su', label: 'Sundanese', nativeLabel: 'Basa Sunda', popular: false },
+	{ code: 'ceb', label: 'Cebuano', nativeLabel: 'Cebuano', popular: false },
+	{ code: 'mi', label: 'Maori', nativeLabel: 'Te Reo Maori', popular: false },
+	{ code: 'sm', label: 'Samoan', nativeLabel: 'Gagana Samoa', popular: false }
+]
+
+const languageLabelByCode = new Map(
+	languageCatalog.map(catalogEntry => [catalogEntry.code.toLowerCase(), catalogEntry] as const)
+)
+
+export const popularLanguageCatalog = languageCatalog.filter(catalogEntry => catalogEntry.popular)
+
+export function normalizeLanguageCode(languageCode: string): string {
+	return languageCode.trim().toLowerCase()
+}
+
+export function isValidLanguageCode(languageCode: string): boolean {
+	return languageCodePattern.test(languageCode.trim())
+}
+
+function matchCatalogEntryByLabel(inputValue: string): LanguageCatalogEntry | null {
+	const normalizedInputValue = inputValue.trim().toLowerCase()
+	if (!normalizedInputValue) return null
+	return (
+		languageCatalog.find(catalogEntry => {
+			const candidateList = [catalogEntry.label, catalogEntry.nativeLabel ?? '', catalogEntry.code]
+			return candidateList.some(candidate => candidate.toLowerCase().includes(normalizedInputValue))
+		}) ?? null
+	)
+}
+
+export function resolveLanguageCode(inputValue: string, fallbackLanguageCode: string): string {
+	const normalizedInputValue = normalizeLanguageCode(inputValue)
+	if (isValidLanguageCode(normalizedInputValue)) return normalizedInputValue
+	const matchedCatalogEntry = matchCatalogEntryByLabel(inputValue)
+	if (matchedCatalogEntry) return normalizeLanguageCode(matchedCatalogEntry.code)
+	return normalizeLanguageCode(fallbackLanguageCode)
+}
+
+export function resolveLanguageLabel(languageCode: string): string {
+	const normalizedCode = normalizeLanguageCode(languageCode)
+	const knownCatalogEntry = languageLabelByCode.get(normalizedCode)
+	if (knownCatalogEntry) return knownCatalogEntry.label
+	try {
+		const displayNames = new Intl.DisplayNames(['en'], { type: 'language' })
+		const displayLabel = displayNames.of(normalizedCode)
+		if (displayLabel) return displayLabel
+	} catch {}
+	return normalizedCode
+}
diff --git a/src/realtime/liveTranslateRealtimeClient.ts b/src/realtime/liveTranslateRealtimeClient.ts
index 9e6ad23..91a3dcd 100644
--- a/src/realtime/liveTranslateRealtimeClient.ts
+++ b/src/realtime/liveTranslateRealtimeClient.ts
@@ -2,9 +2,6 @@
 
 import { createTranslateRealtimeClientSecretAction } from '@/app/actions/realtime'
 import {
-	InputAudioBufferCommittedEventSchema,
-	InputAudioTranscriptionCompletedEventSchema,
-	InputAudioTranscriptionDeltaEventSchema,
 	PublishTranslationToolArgumentsSchema,
 	RealtimeBaseServerEventSchema,
 	RealtimeErrorEventSchema,
@@ -16,11 +13,18 @@ import type { UtteranceDirection } from '@/realtime/sessionTypes'
 
 export type LiveTranslateRealtimeClientState = 'connecting' | 'connected' | 'disconnected' | 'error'
 
-export type LiveTranslateSourcePatch = {
+export type LiveTranslateSettings = {
+	myLanguageCode: string
+	translateToLanguageCode: string
+}
+
+export type StartLiveTranslateRealtimeClientInput = LiveTranslateSettings & {
+	model: string
+}
+
+export type TranslateInputPayload = {
 	inputOrigin: 'audio' | 'text'
 	itemId: string
-	previousItemId?: null | string
-	status: 'final' | 'streaming'
 	text: string
 }
 
@@ -36,21 +40,10 @@ export type LiveTranslateResultPatch = {
 	translatedText: string
 }
 
-export type LiveTranslateSettings = {
-	primaryLanguageCode: string
-	secondaryLanguageCode: string
-}
-
-export type StartLiveTranslateRealtimeClientInput = LiveTranslateSettings & {
-	model: string
-	voiceInputEnabled: boolean
-}
-
 export type LiveTranslateRealtimeClientCallbacks = {
 	onConnectionStateChange: (state: LiveTranslateRealtimeClientState) => void
 	onError: (message: string) => void
 	onResultPatch: (patch: LiveTranslateResultPatch) => void
-	onSourcePatch: (patch: LiveTranslateSourcePatch) => void
 }
 
 type PendingResponseContext = {
@@ -58,19 +51,17 @@ type PendingResponseContext = {
 	itemId: string
 }
 
-function createClientItemId(prefix: string): string {
-	const randomSegment = crypto.randomUUID().replaceAll('-', '').slice(0, 24)
-	return `${prefix}_${randomSegment}`
-}
-
 function createTranslateInstructions(
-	primaryLanguageCode: string,
-	secondaryLanguageCode: string
+	myLanguageCode: string,
+	translateToLanguageCode: string
 ): string {
 	return [
 		'You are Lilac, a deterministic live translator.',
-		`Allowed language pair: ${primaryLanguageCode} and ${secondaryLanguageCode}.`,
-		'For each user utterance, detect source language within the pair and translate to the opposite language.',
+		`My language: ${myLanguageCode}.`,
+		`Translate to language: ${translateToLanguageCode}.`,
+		'For each user utterance, detect whether source is my language or target language.',
+		'If source is my language, translate to target and use direction my_to_target.',
+		'If source is target language, translate to my language and use direction target_to_my.',
 		'Always call publish_translation exactly once per utterance.',
 		'Never produce assistant text outside the function call.',
 		'Preserve speaker intent, tone, and named entities.',
@@ -86,7 +77,7 @@ function buildPublishTranslationToolDefinition(): Record<string, unknown> {
 			additionalProperties: false,
 			properties: {
 				direction: {
-					enum: ['primary_to_secondary', 'secondary_to_primary'],
+					enum: ['my_to_target', 'target_to_my'],
 					type: 'string'
 				},
 				sourceLanguageCode: {
@@ -119,7 +110,7 @@ function buildToolChoice(): 'required' {
 	return 'required'
 }
 
-function parseStringValue(value: unknown): string | null {
+function parseStringValue(value: unknown): null | string {
 	if (typeof value !== 'string') return null
 	const normalizedValue = value.trim()
 	if (!normalizedValue) return null
@@ -131,10 +122,10 @@ export class LiveTranslateRealtimeClient {
 	private completedToolArgumentsByResponseId = new Map<string, string>()
 	private dataChannel: null | RTCDataChannel = null
 	private generation = 0
-	private localAudioStream: MediaStream | null = null
 	private pendingResponseContextByRequestId = new Map<string, PendingResponseContext>()
 	private peerConnection: null | RTCPeerConnection = null
 	private sourceItemOrder: string[] = []
+	private state: LiveTranslateRealtimeClientState = 'disconnected'
 
 	public constructor(callbacks: LiveTranslateRealtimeClientCallbacks) {
 		this.callbacks = callbacks
@@ -144,13 +135,13 @@ export class LiveTranslateRealtimeClient {
 		this.stop()
 		this.generation += 1
 		const generation = this.generation
-		this.callbacks.onConnectionStateChange('connecting')
+		this.setState('connecting')
 
 		try {
 			const clientSecret = await createTranslateRealtimeClientSecretAction({
 				model: input.model,
-				primaryLanguageCode: input.primaryLanguageCode,
-				secondaryLanguageCode: input.secondaryLanguageCode
+				myLanguageCode: input.myLanguageCode,
+				translateToLanguageCode: input.translateToLanguageCode
 			})
 
 			if (generation !== this.generation) return
@@ -158,34 +149,21 @@ export class LiveTranslateRealtimeClient {
 			const peerConnection = new RTCPeerConnection()
 			this.peerConnection = peerConnection
 
-			if (input.voiceInputEnabled) {
-				await this.enableVoiceInput(generation)
-			}
-
-			if (generation !== this.generation) return
-
-			const localAudioStream = this.localAudioStream
-			if (localAudioStream) {
-				for (const track of localAudioStream.getTracks()) {
-					peerConnection.addTrack(track, localAudioStream)
-				}
-			}
-
 			const dataChannel = peerConnection.createDataChannel('oai-events')
 			this.dataChannel = dataChannel
 
 			dataChannel.addEventListener('open', () => {
 				if (generation !== this.generation) return
-				this.callbacks.onConnectionStateChange('connected')
+				this.setState('connected')
 				this.updateTranslateSettings({
-					primaryLanguageCode: input.primaryLanguageCode,
-					secondaryLanguageCode: input.secondaryLanguageCode
+					myLanguageCode: input.myLanguageCode,
+					translateToLanguageCode: input.translateToLanguageCode
 				})
 			})
 
 			dataChannel.addEventListener('close', () => {
 				if (generation !== this.generation) return
-				this.callbacks.onConnectionStateChange('disconnected')
+				this.setState('disconnected')
 			})
 
 			dataChannel.addEventListener('message', event => {
@@ -216,8 +194,8 @@ export class LiveTranslateRealtimeClient {
 			await peerConnection.setRemoteDescription({ sdp: answerSdp, type: 'answer' })
 		} catch (error) {
 			if (generation !== this.generation) return
-			this.callbacks.onConnectionStateChange('error')
-			const fallbackMessage = 'Unable to start Live Translate mode.'
+			const fallbackMessage = 'Unable to start Translate mode.'
+			this.setState('error')
 			if (error instanceof Error) this.callbacks.onError(error.message || fallbackMessage)
 			else this.callbacks.onError(fallbackMessage)
 			this.stop()
@@ -239,25 +217,17 @@ export class LiveTranslateRealtimeClient {
 			this.peerConnection?.close()
 		} catch {}
 		this.peerConnection = null
+		this.setState('disconnected')
+	}
 
-		for (const track of this.localAudioStream?.getTracks() ?? []) {
-			track.stop()
-		}
-		this.localAudioStream = null
-		this.callbacks.onConnectionStateChange('disconnected')
+	public isConnected(): boolean {
+		return this.state === 'connected'
 	}
 
-	public submitTextInput(text: string): void {
-		const normalizedText = text.trim()
+	public submitInput(input: TranslateInputPayload): void {
+		const normalizedText = input.text.trim()
 		if (!normalizedText) return
-		const itemId = createClientItemId('typed')
-		this.registerSourceItem(itemId, null)
-		this.callbacks.onSourcePatch({
-			inputOrigin: 'text',
-			itemId,
-			status: 'final',
-			text: normalizedText
-		})
+		this.registerSourceItem(input.itemId)
 		this.sendEvent({
 			item: {
 				content: [
@@ -266,29 +236,20 @@ export class LiveTranslateRealtimeClient {
 						type: 'input_text'
 					}
 				],
-				id: itemId,
+				id: input.itemId,
 				role: 'user',
 				type: 'message'
 			},
 			type: 'conversation.item.create'
 		})
-		this.requestTranslationResponse(itemId, 'text')
+		this.requestTranslationResponse(input.itemId, input.inputOrigin)
 	}
 
 	public updateTranslateSettings(settings: LiveTranslateSettings): void {
 		this.sendSessionUpdate({
-			audio: {
-				input: {
-					turn_detection: {
-						create_response: false,
-						interrupt_response: false,
-						type: 'semantic_vad'
-					}
-				}
-			},
 			instructions: createTranslateInstructions(
-				settings.primaryLanguageCode,
-				settings.secondaryLanguageCode
+				settings.myLanguageCode,
+				settings.translateToLanguageCode
 			),
 			output_modalities: ['text'],
 			tool_choice: buildToolChoice(),
@@ -296,58 +257,18 @@ export class LiveTranslateRealtimeClient {
 		})
 	}
 
-	public async updateVoiceInputEnabled(voiceInputEnabled: boolean): Promise<void> {
-		if (!this.peerConnection) return
-		const generation = this.generation
-
-		if (!voiceInputEnabled) {
-			for (const sender of this.peerConnection.getSenders()) {
-				if (sender.track?.kind === 'audio') {
-					try {
-						this.peerConnection.removeTrack(sender)
-					} catch {}
-				}
-			}
-			for (const track of this.localAudioStream?.getTracks() ?? []) {
-				track.stop()
-			}
-			this.localAudioStream = null
-			return
-		}
-
-		const hasLocalAudioStream = this.localAudioStream !== null
-		if (hasLocalAudioStream) return
-		await this.enableVoiceInput(generation)
-		if (generation !== this.generation) return
-		const localAudioStream = this.localAudioStream
-		if (localAudioStream === null) return
-		for (const track of localAudioStream.getTracks()) {
-			this.peerConnection.addTrack(track, localAudioStream)
-		}
-	}
-
 	private buildResponseInput(itemId: string): Array<Record<string, string>> {
-		const recentItemIds = this.sourceItemOrder.slice(Math.max(0, this.sourceItemOrder.length - 8))
-		if (!recentItemIds.includes(itemId)) recentItemIds.push(itemId)
-		return recentItemIds.map(sourceItemId => ({
+		const recentItemIdList = this.sourceItemOrder.slice(Math.max(0, this.sourceItemOrder.length - 12))
+		if (!recentItemIdList.includes(itemId)) recentItemIdList.push(itemId)
+		return recentItemIdList.map(sourceItemId => ({
 			id: sourceItemId,
 			type: 'item_reference'
 		}))
 	}
 
-	private async enableVoiceInput(generation: number): Promise<void> {
-		const stream = await navigator.mediaDevices.getUserMedia({
-			audio: {
-				autoGainControl: true,
-				echoCancellation: true,
-				noiseSuppression: true
-			}
-		})
-		if (generation !== this.generation) {
-			for (const track of stream.getTracks()) track.stop()
-			return
-		}
-		this.localAudioStream = stream
+	private setState(state: LiveTranslateRealtimeClientState): void {
+		this.state = state
+		this.callbacks.onConnectionStateChange(state)
 	}
 
 	private handleResponseDoneEvent(event: ReturnType<typeof ResponseDoneEventSchema.parse>): void {
@@ -363,12 +284,11 @@ export class LiveTranslateRealtimeClient {
 		const pendingContext = requestId
 			? (this.pendingResponseContextByRequestId.get(requestId) ?? null)
 			: null
+		if (requestId) this.pendingResponseContextByRequestId.delete(requestId)
 
 		const sourceItemId = sourceItemIdFromMetadata ?? pendingContext?.itemId ?? null
 		const rawInputOrigin = inputOriginFromMetadata ?? pendingContext?.inputOrigin ?? null
 		const inputOrigin: 'audio' | 'text' = rawInputOrigin === 'text' ? 'text' : 'audio'
-
-		if (requestId) this.pendingResponseContextByRequestId.delete(requestId)
 		if (!sourceItemId) return
 
 		const functionCall = (response.output ?? []).find(
@@ -385,14 +305,14 @@ export class LiveTranslateRealtimeClient {
 		if (!toolArguments) {
 			if (responseStatus && responseStatus !== 'completed') return
 			this.callbacks.onResultPatch({
-				direction: 'primary_to_secondary',
+				direction: 'my_to_target',
 				inputOrigin,
 				itemId: sourceItemId,
 				sourceLanguageCode: 'und',
 				sourceText: '',
 				status: 'error',
 				targetLanguageCode: 'und',
-				translatedText: 'No publish_translation tool call was returned for the completed turn.',
+				translatedText: 'No valid publish_translation tool call was returned.',
 				...(responseId ? { responseId } : {})
 			})
 			return
@@ -414,7 +334,7 @@ export class LiveTranslateRealtimeClient {
 			})
 		} catch {
 			this.callbacks.onResultPatch({
-				direction: 'primary_to_secondary',
+				direction: 'my_to_target',
 				inputOrigin,
 				itemId: sourceItemId,
 				sourceLanguageCode: 'und',
@@ -465,39 +385,6 @@ export class LiveTranslateRealtimeClient {
 			const baseEvent = RealtimeBaseServerEventSchema.parse(candidate)
 
 			switch (baseEvent.type) {
-				case 'input_audio_buffer.committed': {
-					const event = InputAudioBufferCommittedEventSchema.parse(candidate)
-					this.registerSourceItem(event.item_id, event.previous_item_id ?? null)
-					this.callbacks.onSourcePatch({
-						inputOrigin: 'audio',
-						itemId: event.item_id,
-						previousItemId: event.previous_item_id ?? null,
-						status: 'streaming',
-						text: ''
-					})
-					this.requestTranslationResponse(event.item_id, 'audio')
-					return
-				}
-				case 'conversation.item.input_audio_transcription.delta': {
-					const event = InputAudioTranscriptionDeltaEventSchema.parse(candidate)
-					this.callbacks.onSourcePatch({
-						inputOrigin: 'audio',
-						itemId: event.item_id,
-						status: 'streaming',
-						text: event.delta
-					})
-					return
-				}
-				case 'conversation.item.input_audio_transcription.completed': {
-					const event = InputAudioTranscriptionCompletedEventSchema.parse(candidate)
-					this.callbacks.onSourcePatch({
-						inputOrigin: 'audio',
-						itemId: event.item_id,
-						status: 'final',
-						text: event.transcript
-					})
-					return
-				}
 				case 'response.output_item.done': {
 					const event = ResponseOutputItemDoneEventSchema.parse(candidate)
 					this.handleResponseOutputItemDoneEvent(event)
@@ -522,26 +409,15 @@ export class LiveTranslateRealtimeClient {
 					return
 			}
 		} catch {
-			// Ignore unrelated/unrecognized realtime events.
 			return
 		}
 	}
 
-	private registerSourceItem(itemId: string, previousItemId: null | string): void {
+	private registerSourceItem(itemId: string): void {
 		if (this.sourceItemOrder.includes(itemId)) return
-		if (!previousItemId) {
-			this.sourceItemOrder.push(itemId)
-			return
-		}
-
-		const previousIndex = this.sourceItemOrder.indexOf(previousItemId)
-		if (previousIndex === -1) {
-			this.sourceItemOrder.push(itemId)
-		} else {
-			this.sourceItemOrder.splice(previousIndex + 1, 0, itemId)
-		}
-		if (this.sourceItemOrder.length > 48) {
-			this.sourceItemOrder = this.sourceItemOrder.slice(this.sourceItemOrder.length - 48)
+		this.sourceItemOrder.push(itemId)
+		if (this.sourceItemOrder.length > 64) {
+			this.sourceItemOrder = this.sourceItemOrder.slice(this.sourceItemOrder.length - 64)
 		}
 	}
 
diff --git a/src/realtime/modeRuntimeStore.tsx b/src/realtime/modeRuntimeStore.tsx
index 1bd1ec4..8afa9d4 100644
--- a/src/realtime/modeRuntimeStore.tsx
+++ b/src/realtime/modeRuntimeStore.tsx
@@ -12,10 +12,11 @@ import {
 } from 'react'
 
 import { ChatRealtimeClient, type ChatTranscriptPatch } from '@/realtime/chatRealtimeClient'
+import { normalizeLanguageCode, resolveLanguageCode } from '@/realtime/languageCatalog'
 import {
 	LiveTranslateRealtimeClient,
 	type LiveTranslateResultPatch,
-	type LiveTranslateSourcePatch
+	type TranslateInputPayload
 } from '@/realtime/liveTranslateRealtimeClient'
 import { defaultChatRealtimeModel } from '@/realtime/modelConfig'
 import type {
@@ -23,18 +24,23 @@ import type {
 	ChatTranscriptMessage,
 	GlobalAudioInputSettings,
 	LilacMode,
+	LiveSubtitleState,
 	ModeConnectionState,
 	TranslateSettings,
 	UtteranceCard,
 	UtteranceDirection
 } from '@/realtime/sessionTypes'
+import {
+	type SubtitleFinalPatch,
+	SubtitleTranscriptionClient
+} from '@/realtime/subtitleTranscriptionClient'
 
 const defaultChatInstructions =
 	'You are Lilac. Help users communicate across languages. Keep answers concise, faithful, and practical.'
 
 const defaultTranslateSettings: TranslateSettings = {
-	primaryLanguageCode: 'en',
-	secondaryLanguageCode: 'es'
+	myLanguageCode: 'en',
+	translateToLanguageCode: 'es'
 }
 
 const defaultGlobalAudioInputSettings: GlobalAudioInputSettings = {
@@ -45,16 +51,32 @@ const defaultChatOutputSettings: ChatOutputSettings = {
 	speechOutputEnabled: true
 }
 
+const defaultLiveSubtitleState: LiveSubtitleState = {
+	activeSegmentId: null,
+	isListening: false,
+	text: '',
+	updatedAt: 0
+}
+
 const storageKeys = {
 	chatInstructions: 'lilac.chat.instructions',
 	chatSpeechOutputEnabled: 'lilac.chat.speechOutputEnabled',
 	chatTurnDelaySeconds: 'lilac.chat.turnDelaySeconds',
 	mode: 'lilac.mode',
-	translatePrimaryLanguage: 'lilac.translate.primaryLanguageCode',
-	translateSecondaryLanguage: 'lilac.translate.secondaryLanguageCode',
+	translateMyLanguage: 'lilac.translate.myLanguageCode',
+	translatePrimaryLanguageLegacy: 'lilac.translate.primaryLanguageCode',
+	translateSecondaryLanguageLegacy: 'lilac.translate.secondaryLanguageCode',
+	translateToLanguage: 'lilac.translate.translateToLanguageCode',
 	voiceInputEnabled: 'lilac.global.voiceInputEnabled'
 } as const
 
+type RuntimeChannel = 'chat' | 'subtitle' | 'translate'
+type ChannelConnectionState = 'connecting' | 'connected' | 'disconnected' | 'error'
+
+type PendingTranslateInput = TranslateInputPayload & {
+	previousItemId?: null | string
+}
+
 function normalizeTurnDelaySeconds(value: unknown): number {
 	const parsedValue = typeof value === 'number' ? value : Number.parseFloat(String(value))
 	if (!Number.isFinite(parsedValue)) return 1.2
@@ -62,31 +84,53 @@ function normalizeTurnDelaySeconds(value: unknown): number {
 	return Math.round(clampedValue * 10) / 10
 }
 
-function parseStoredBoolean(value: string | null, fallbackValue: boolean): boolean {
+function parseStoredBoolean(value: null | string, fallbackValue: boolean): boolean {
 	if (value === 'true') return true
 	if (value === 'false') return false
 	return fallbackValue
 }
 
+function sanitizeTranslateSettings(input: Partial<TranslateSettings> | null): TranslateSettings {
+	const myLanguageCode = resolveLanguageCode(
+		input?.myLanguageCode ?? '',
+		defaultTranslateSettings.myLanguageCode
+	)
+	let translateToLanguageCode = resolveLanguageCode(
+		input?.translateToLanguageCode ?? '',
+		defaultTranslateSettings.translateToLanguageCode
+	)
+	if (myLanguageCode === translateToLanguageCode) {
+		translateToLanguageCode =
+			myLanguageCode === defaultTranslateSettings.myLanguageCode
+				? defaultTranslateSettings.translateToLanguageCode
+				: defaultTranslateSettings.myLanguageCode
+	}
+	return {
+		myLanguageCode,
+		translateToLanguageCode
+	}
+}
+
+function createClientItemId(prefix: string): string {
+	const randomSegment = crypto.randomUUID().replaceAll('-', '').slice(0, 24)
+	return `${prefix}_${randomSegment}`
+}
+
 function createEmptyUtteranceCard(
 	itemId: string,
 	inputOrigin: 'audio' | 'text',
-	fallbackDirection: UtteranceDirection,
 	translateSettings: TranslateSettings
 ): UtteranceCard {
 	return {
 		createdAt: Date.now(),
-		direction: fallbackDirection,
+		direction: 'my_to_target',
 		id: itemId,
 		inputOrigin,
 		sourceItemId: itemId,
-		sourceLanguageCode: translateSettings.primaryLanguageCode,
+		sourceLanguageCode: translateSettings.myLanguageCode,
 		sourceText: '',
 		status: 'streaming',
-		targetLanguageCode:
-			fallbackDirection === 'secondary_to_primary'
-				? translateSettings.primaryLanguageCode
-				: translateSettings.secondaryLanguageCode,
+		targetLanguageCode: translateSettings.translateToLanguageCode,
 		translatedText: ''
 	}
 }
@@ -145,35 +189,6 @@ function upsertChatTranscript(
 	return nextList
 }
 
-function upsertTranslateSourcePatch(
-	cardList: UtteranceCard[],
-	patch: LiveTranslateSourcePatch,
-	translateSettings: TranslateSettings
-): UtteranceCard[] {
-	const existingCard = cardList.find(card => card.id === patch.itemId) ?? null
-	const fallbackDirection =
-		existingCard?.direction ??
-		(patch.inputOrigin === 'text' ? 'primary_to_secondary' : 'primary_to_secondary')
-
-	const sourceText =
-		patch.status === 'final' ? patch.text : `${existingCard?.sourceText ?? ''}${patch.text}`
-
-	const nextCard: UtteranceCard = {
-		...(existingCard ??
-			createEmptyUtteranceCard(patch.itemId, patch.inputOrigin, fallbackDirection, translateSettings)),
-		inputOrigin: patch.inputOrigin,
-		sourceText,
-		status:
-			patch.status === 'final'
-				? existingCard?.status === 'final'
-					? 'final'
-					: 'translating'
-				: 'streaming'
-	}
-
-	return insertCardByPreviousItemId(cardList, nextCard, patch.previousItemId)
-}
-
 function applyTranslateResultPatch(
 	cardList: UtteranceCard[],
 	patch: LiveTranslateResultPatch,
@@ -185,44 +200,99 @@ function applyTranslateResultPatch(
 				const { errorMessage: _errorMessage, responseId: _responseId, ...restCard } = existingCard
 				return restCard
 			})()
-		: createEmptyUtteranceCard(patch.itemId, patch.inputOrigin, patch.direction, translateSettings)
+		: createEmptyUtteranceCard(patch.itemId, patch.inputOrigin, translateSettings)
+
 	const nextCard: UtteranceCard = {
 		...baseCard,
 		direction: patch.direction,
 		inputOrigin: patch.inputOrigin,
-		sourceLanguageCode: patch.sourceLanguageCode,
+		sourceLanguageCode: normalizeLanguageCode(patch.sourceLanguageCode),
 		sourceText: patch.sourceText.trim() ? patch.sourceText : (existingCard?.sourceText ?? ''),
 		status: patch.status,
-		targetLanguageCode: patch.targetLanguageCode,
+		targetLanguageCode: normalizeLanguageCode(patch.targetLanguageCode),
 		translatedText: patch.translatedText,
 		...(patch.status === 'error' ? { errorMessage: patch.translatedText } : {}),
 		...(patch.responseId ? { responseId: patch.responseId } : {})
 	}
+
 	return insertCardByPreviousItemId(cardList, nextCard)
 }
 
+function createSourceCardFromFinalSubtitle(
+	patch: SubtitleFinalPatch,
+	translateSettings: TranslateSettings
+): UtteranceCard {
+	const normalizedSourceText = patch.text.trim()
+	return {
+		createdAt: Date.now(),
+		direction: 'my_to_target',
+		id: patch.itemId,
+		inputOrigin: 'audio',
+		sourceItemId: patch.itemId,
+		sourceLanguageCode: translateSettings.myLanguageCode,
+		sourceText: normalizedSourceText,
+		status: 'translating',
+		targetLanguageCode: translateSettings.translateToLanguageCode,
+		translatedText: ''
+	}
+}
+
 function getDirectionColorClass(direction: UtteranceDirection): string {
 	switch (direction) {
-		case 'primary_to_secondary':
+		case 'my_to_target':
 			return 'var(--lilac-direction-primary)'
-		case 'secondary_to_primary':
+		case 'target_to_my':
 			return 'var(--lilac-direction-secondary)'
 		default:
 			return 'var(--lilac-ink-muted)'
 	}
 }
 
+function mapChatConnectionState(state: ChannelConnectionState): ModeConnectionState {
+	switch (state) {
+		case 'connected':
+			return 'connected'
+		case 'connecting':
+			return 'connecting'
+		case 'error':
+			return 'error'
+		default:
+			return 'idle'
+	}
+}
+
+function mapTranslateConnectionState(
+	translateConnectionState: ChannelConnectionState,
+	subtitleConnectionState: ChannelConnectionState
+): ModeConnectionState {
+	if (translateConnectionState === 'error' || subtitleConnectionState === 'error') return 'error'
+	if (translateConnectionState === 'connected' && subtitleConnectionState === 'connected')
+		return 'connected'
+	if (translateConnectionState === 'connecting' || subtitleConnectionState === 'connecting') {
+		return 'connecting'
+	}
+	if (translateConnectionState === 'connected' || subtitleConnectionState === 'connected') {
+		return 'connecting'
+	}
+	return 'idle'
+}
+
+function calculateReconnectDelay(attemptNumber: number): number {
+	const baseDelayMilliseconds = Math.min(8000, 1000 * 2 ** Math.max(0, attemptNumber - 1))
+	const jitterMilliseconds = Math.floor(Math.random() * 250)
+	return baseDelayMilliseconds + jitterMilliseconds
+}
+
 type LilacModeRuntimeContextValue = {
 	chatInstructions: string
 	chatSpeechOutputEnabled: boolean
 	chatTranscripts: ChatTranscriptMessage[]
 	chatTurnDelaySeconds: number
-	clearCurrentModeHistory: () => void
 	connectionState: ModeConnectionState
 	errorMessage: null | string
 	getDirectionColor: (direction: UtteranceDirection) => string
+	liveSubtitleState: LiveSubtitleState
 	mode: LilacMode
-	reconnectCurrentMode: () => void
 	remoteAudioStream: MediaStream | null
 	setChatInstructions: (instructions: string) => void
 	setChatSpeechOutputEnabled: (speechOutputEnabled: boolean) => void
@@ -230,6 +300,7 @@ type LilacModeRuntimeContextValue = {
 	setMode: (mode: LilacMode) => void
 	setTranslateSettings: (nextSettings: TranslateSettings) => void
 	setVoiceInputEnabled: (voiceInputEnabled: boolean) => void
+	statusMessage: null | string
 	submitChatTextInput: (text: string) => void
 	submitTranslateTextInput: (text: string) => void
 	translateCards: UtteranceCard[]
@@ -243,93 +314,195 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	const [mode, setModeState] = useState<LilacMode>('chat')
 	const [connectionState, setConnectionState] = useState<ModeConnectionState>('idle')
 	const [errorMessage, setErrorMessage] = useState<null | string>(null)
+	const [statusMessage, setStatusMessage] = useState<null | string>(null)
 	const [chatInstructions, setChatInstructionsState] = useState(defaultChatInstructions)
 	const [chatTurnDelaySeconds, setChatTurnDelaySecondsState] = useState(1.2)
 	const [chatTranscripts, setChatTranscripts] = useState<ChatTranscriptMessage[]>([])
 	const [translateSettings, setTranslateSettingsState] =
 		useState<TranslateSettings>(defaultTranslateSettings)
 	const [translateCards, setTranslateCards] = useState<UtteranceCard[]>([])
+	const [liveSubtitleState, setLiveSubtitleState] =
+		useState<LiveSubtitleState>(defaultLiveSubtitleState)
 	const [globalAudioInputSettings, setGlobalAudioInputSettings] = useState<GlobalAudioInputSettings>(
 		defaultGlobalAudioInputSettings
 	)
 	const [chatOutputSettings, setChatOutputSettings] =
 		useState<ChatOutputSettings>(defaultChatOutputSettings)
 	const [remoteAudioStream, setRemoteAudioStream] = useState<MediaStream | null>(null)
+	const [chatChannelState, setChatChannelState] = useState<ChannelConnectionState>('disconnected')
+	const [translateChannelState, setTranslateChannelState] =
+		useState<ChannelConnectionState>('disconnected')
+	const [subtitleChannelState, setSubtitleChannelState] =
+		useState<ChannelConnectionState>('disconnected')
 	const [isHydrated, setIsHydrated] = useState(false)
-	const [restartNonce, setRestartNonce] = useState(0)
 
 	const chatClientRef = useRef<ChatRealtimeClient | null>(null)
 	const liveTranslateClientRef = useRef<LiveTranslateRealtimeClient | null>(null)
+	const subtitleClientRef = useRef<SubtitleTranscriptionClient | null>(null)
 
 	const chatInstructionsRef = useRef(chatInstructions)
 	const chatTurnDelaySecondsRef = useRef(chatTurnDelaySeconds)
 	const translateSettingsRef = useRef(translateSettings)
 	const voiceInputEnabledRef = useRef(globalAudioInputSettings.voiceInputEnabled)
 	const chatSpeechOutputEnabledRef = useRef(chatOutputSettings.speechOutputEnabled)
+	const modeRef = useRef<LilacMode>(mode)
+	const isHydratedRef = useRef(false)
+	const isOnlineRef = useRef(true)
+
+	const pendingTranslateInputQueueRef = useRef<PendingTranslateInput[]>([])
+	const reconnectTimerByChannelRef = useRef<Partial<Record<RuntimeChannel, number>>>({})
+	const scheduleReconnectRef = useRef<(channel: RuntimeChannel) => void>(() => {})
+	const reconnectAttemptByChannelRef = useRef<Record<RuntimeChannel, number>>({
+		chat: 0,
+		subtitle: 0,
+		translate: 0
+	})
+	const intentionalStopByChannelRef = useRef<Record<RuntimeChannel, boolean>>({
+		chat: false,
+		subtitle: false,
+		translate: false
+	})
+
+	const clearReconnectTimer = useCallback((channel: RuntimeChannel) => {
+		const timerId = reconnectTimerByChannelRef.current[channel]
+		if (typeof timerId !== 'number') return
+		window.clearTimeout(timerId)
+		delete reconnectTimerByChannelRef.current[channel]
+	}, [])
 
-	useEffect(() => {
-		chatInstructionsRef.current = chatInstructions
-	}, [chatInstructions])
-
-	useEffect(() => {
-		chatTurnDelaySecondsRef.current = chatTurnDelaySeconds
-	}, [chatTurnDelaySeconds])
-
-	useEffect(() => {
-		translateSettingsRef.current = translateSettings
-	}, [translateSettings])
-
-	useEffect(() => {
-		voiceInputEnabledRef.current = globalAudioInputSettings.voiceInputEnabled
-	}, [globalAudioInputSettings.voiceInputEnabled])
-
-	useEffect(() => {
-		chatSpeechOutputEnabledRef.current = chatOutputSettings.speechOutputEnabled
-	}, [chatOutputSettings.speechOutputEnabled])
-
-	const stopAllClients = useCallback(() => {
+	const stopChatClient = useCallback(() => {
+		intentionalStopByChannelRef.current.chat = true
 		chatClientRef.current?.stop()
 		chatClientRef.current = null
+		setChatChannelState('disconnected')
+		queueMicrotask(() => {
+			intentionalStopByChannelRef.current.chat = false
+		})
+	}, [])
+
+	const stopTranslateClient = useCallback(() => {
+		intentionalStopByChannelRef.current.translate = true
 		liveTranslateClientRef.current?.stop()
 		liveTranslateClientRef.current = null
-		setRemoteAudioStream(null)
+		setTranslateChannelState('disconnected')
+		queueMicrotask(() => {
+			intentionalStopByChannelRef.current.translate = false
+		})
 	}, [])
 
+	const stopSubtitleClient = useCallback(() => {
+		intentionalStopByChannelRef.current.subtitle = true
+		void subtitleClientRef.current?.stop()
+		subtitleClientRef.current = null
+		setSubtitleChannelState('disconnected')
+		setLiveSubtitleState(previousState => ({
+			...previousState,
+			activeSegmentId: null,
+			isListening: false,
+			text: '',
+			updatedAt: Date.now()
+		}))
+		queueMicrotask(() => {
+			intentionalStopByChannelRef.current.subtitle = false
+		})
+	}, [])
+
+	const stopAllClients = useCallback(() => {
+		stopChatClient()
+		stopTranslateClient()
+		stopSubtitleClient()
+		setRemoteAudioStream(null)
+	}, [stopChatClient, stopSubtitleClient, stopTranslateClient])
+
 	const clearAllInMemoryState = useCallback(() => {
 		setChatTranscripts([])
 		setTranslateCards([])
+		setLiveSubtitleState(defaultLiveSubtitleState)
+		pendingTranslateInputQueueRef.current = []
 	}, [])
 
-	const clearStateForMode = useCallback((nextMode: LilacMode) => {
-		switch (nextMode) {
-			case 'chat':
-				setChatTranscripts([])
-				return
-			case 'translate':
-				setTranslateCards([])
-				return
-			default:
-				return
+	const shouldRunChannelForMode = useCallback(
+		(channel: RuntimeChannel, activeMode: LilacMode): boolean => {
+			switch (activeMode) {
+				case 'chat':
+					return channel === 'chat'
+				case 'translate':
+					return channel === 'subtitle' || channel === 'translate'
+				default:
+					return false
+			}
+		},
+		[]
+	)
+
+	const flushPendingTranslateInputs = useCallback(() => {
+		const translateClient = liveTranslateClientRef.current
+		if (!translateClient || !translateClient.isConnected()) return
+		while (pendingTranslateInputQueueRef.current.length > 0) {
+			const nextInput = pendingTranslateInputQueueRef.current.shift()
+			if (!nextInput) continue
+			translateClient.submitInput(nextInput)
 		}
 	}, [])
 
+	const enqueueTranslateInput = useCallback(
+		(input: PendingTranslateInput) => {
+			const alreadyQueued = pendingTranslateInputQueueRef.current.some(
+				queuedInput => queuedInput.itemId === input.itemId
+			)
+			if (alreadyQueued) return
+			pendingTranslateInputQueueRef.current.push(input)
+			flushPendingTranslateInputs()
+		},
+		[flushPendingTranslateInputs]
+	)
+
+	const handleTranslateSubtitleFinalPatch = useCallback(
+		(patch: SubtitleFinalPatch) => {
+			if (!patch.text.trim()) return
+			setTranslateCards(previousCards => {
+				const existingCard = previousCards.find(card => card.id === patch.itemId)
+				if (existingCard) return previousCards
+				const nextCard = createSourceCardFromFinalSubtitle(patch, translateSettingsRef.current)
+				return insertCardByPreviousItemId(previousCards, nextCard, patch.previousItemId)
+			})
+			enqueueTranslateInput({
+				inputOrigin: 'audio',
+				itemId: patch.itemId,
+				text: patch.text,
+				...(patch.previousItemId === null || typeof patch.previousItemId === 'string'
+					? { previousItemId: patch.previousItemId }
+					: {})
+			})
+			setLiveSubtitleState(previousState => {
+				if (previousState.activeSegmentId !== patch.itemId) return previousState
+				return {
+					activeSegmentId: null,
+					isListening: previousState.isListening,
+					text: '',
+					updatedAt: Date.now()
+				}
+			})
+		},
+		[enqueueTranslateInput]
+	)
+
 	const startChatClient = useCallback(() => {
-		stopAllClients()
+		stopChatClient()
+		clearReconnectTimer('chat')
 		const chatClient = new ChatRealtimeClient({
 			onConnectionStateChange: state => {
+				setChatChannelState(state)
 				switch (state) {
 					case 'connected':
-						setConnectionState('connected')
 						setErrorMessage(null)
-						return
-					case 'connecting':
-						setConnectionState('connecting')
+						setStatusMessage(null)
+						reconnectAttemptByChannelRef.current.chat = 0
 						return
 					case 'disconnected':
-						setConnectionState('idle')
-						return
 					case 'error':
-						setConnectionState('error')
+						if (intentionalStopByChannelRef.current.chat) return
+						scheduleReconnectRef.current('chat')
 						return
 					default:
 						return
@@ -337,7 +510,6 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			},
 			onError: message => {
 				setErrorMessage(message)
-				setConnectionState('error')
 			},
 			onRemoteStream: stream => {
 				setRemoteAudioStream(stream)
@@ -355,25 +527,31 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			voice: 'verse',
 			voiceInputEnabled: voiceInputEnabledRef.current
 		})
-	}, [stopAllClients])
+	}, [clearReconnectTimer, stopChatClient])
 
-	const startLiveTranslateClient = useCallback(() => {
-		stopAllClients()
+	const startTranslateClient = useCallback(() => {
+		stopTranslateClient()
+		clearReconnectTimer('translate')
 		const translateClient = new LiveTranslateRealtimeClient({
 			onConnectionStateChange: state => {
+				setTranslateChannelState(state)
 				switch (state) {
 					case 'connected':
-						setConnectionState('connected')
 						setErrorMessage(null)
-						return
-					case 'connecting':
-						setConnectionState('connecting')
+						reconnectAttemptByChannelRef.current.translate = 0
+						flushPendingTranslateInputs()
+						if (
+							modeRef.current === 'translate' &&
+							subtitleClientRef.current &&
+							subtitleClientRef.current.isConnected()
+						) {
+							setStatusMessage(null)
+						}
 						return
 					case 'disconnected':
-						setConnectionState('idle')
-						return
 					case 'error':
-						setConnectionState('error')
+						if (intentionalStopByChannelRef.current.translate) return
+						scheduleReconnectRef.current('translate')
 						return
 					default:
 						return
@@ -381,66 +559,188 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			},
 			onError: message => {
 				setErrorMessage(message)
-				setConnectionState('error')
 			},
 			onResultPatch: patch => {
 				setTranslateCards(previousCards =>
 					applyTranslateResultPatch(previousCards, patch, translateSettingsRef.current)
 				)
-			},
-			onSourcePatch: patch => {
-				setTranslateCards(previousCards =>
-					upsertTranslateSourcePatch(previousCards, patch, translateSettingsRef.current)
-				)
 			}
 		})
 		liveTranslateClientRef.current = translateClient
 		void translateClient.start({
 			model: defaultChatRealtimeModel,
-			primaryLanguageCode: translateSettingsRef.current.primaryLanguageCode,
-			secondaryLanguageCode: translateSettingsRef.current.secondaryLanguageCode,
+			myLanguageCode: translateSettingsRef.current.myLanguageCode,
+			translateToLanguageCode: translateSettingsRef.current.translateToLanguageCode
+		})
+	}, [clearReconnectTimer, flushPendingTranslateInputs, stopTranslateClient])
+
+	const startSubtitleClient = useCallback(() => {
+		stopSubtitleClient()
+		clearReconnectTimer('subtitle')
+		const subtitleClient = new SubtitleTranscriptionClient({
+			onConnectionStateChange: state => {
+				setSubtitleChannelState(state)
+				switch (state) {
+					case 'connected':
+						setErrorMessage(null)
+						reconnectAttemptByChannelRef.current.subtitle = 0
+						if (
+							modeRef.current === 'translate' &&
+							liveTranslateClientRef.current &&
+							liveTranslateClientRef.current.isConnected()
+						) {
+							setStatusMessage(null)
+						}
+						return
+					case 'disconnected':
+					case 'error':
+						if (intentionalStopByChannelRef.current.subtitle) return
+						scheduleReconnectRef.current('subtitle')
+						return
+					default:
+						return
+				}
+			},
+			onError: message => {
+				setErrorMessage(message)
+			},
+			onListeningStateChange: isListening => {
+				setLiveSubtitleState(previousState => ({
+					...previousState,
+					isListening,
+					updatedAt: Date.now()
+				}))
+			},
+			onSubtitleDelta: patch => {
+				setLiveSubtitleState(previousState => {
+					if (previousState.activeSegmentId !== patch.itemId) {
+						return {
+							activeSegmentId: patch.itemId,
+							isListening: true,
+							text: patch.textDelta,
+							updatedAt: Date.now()
+						}
+					}
+					return {
+						activeSegmentId: patch.itemId,
+						isListening: true,
+						text: `${previousState.text}${patch.textDelta}`,
+						updatedAt: Date.now()
+					}
+				})
+			},
+			onSubtitleFinal: handleTranslateSubtitleFinalPatch
+		})
+		subtitleClientRef.current = subtitleClient
+		void subtitleClient.start({
+			myLanguageCode: translateSettingsRef.current.myLanguageCode,
+			translateToLanguageCode: translateSettingsRef.current.translateToLanguageCode,
 			voiceInputEnabled: voiceInputEnabledRef.current
 		})
-	}, [stopAllClients])
+	}, [clearReconnectTimer, handleTranslateSubtitleFinalPatch, stopSubtitleClient])
 
 	const startModeRuntime = useCallback(
 		(nextMode: LilacMode) => {
 			setErrorMessage(null)
-			setConnectionState('connecting')
+			setStatusMessage(null)
 			switch (nextMode) {
 				case 'chat':
 					startChatClient()
 					return
 				case 'translate':
-					startLiveTranslateClient()
+					startTranslateClient()
+					startSubtitleClient()
+					return
+				default:
+					return
+			}
+		},
+		[startChatClient, startSubtitleClient, startTranslateClient]
+	)
+
+	const startChannel = useCallback(
+		(channel: RuntimeChannel) => {
+			switch (channel) {
+				case 'chat':
+					startChatClient()
+					return
+				case 'translate':
+					startTranslateClient()
+					return
+				case 'subtitle':
+					startSubtitleClient()
 					return
 				default:
 					return
 			}
 		},
-		[startChatClient, startLiveTranslateClient]
+		[startChatClient, startSubtitleClient, startTranslateClient]
+	)
+
+	const scheduleReconnect = useCallback(
+		(channel: RuntimeChannel) => {
+			if (!isHydratedRef.current) return
+			if (!shouldRunChannelForMode(channel, modeRef.current)) return
+			clearReconnectTimer(channel)
+
+			if (!isOnlineRef.current) {
+				setStatusMessage('Offline. Waiting for network…')
+				return
+			}
+
+			const nextAttempt = reconnectAttemptByChannelRef.current[channel] + 1
+			reconnectAttemptByChannelRef.current[channel] = nextAttempt
+			const reconnectDelayMilliseconds = calculateReconnectDelay(nextAttempt)
+			setStatusMessage('Reconnecting…')
+
+			reconnectTimerByChannelRef.current[channel] = window.setTimeout(() => {
+				delete reconnectTimerByChannelRef.current[channel]
+				if (!isHydratedRef.current) return
+				if (!shouldRunChannelForMode(channel, modeRef.current)) return
+				startChannel(channel)
+			}, reconnectDelayMilliseconds)
+		},
+		[clearReconnectTimer, shouldRunChannelForMode, startChannel]
 	)
 
+	useEffect(() => {
+		scheduleReconnectRef.current = scheduleReconnect
+	}, [scheduleReconnect])
+
+	useEffect(() => {
+		chatInstructionsRef.current = chatInstructions
+	}, [chatInstructions])
+
+	useEffect(() => {
+		chatTurnDelaySecondsRef.current = chatTurnDelaySeconds
+	}, [chatTurnDelaySeconds])
+
+	useEffect(() => {
+		translateSettingsRef.current = translateSettings
+	}, [translateSettings])
+
+	useEffect(() => {
+		voiceInputEnabledRef.current = globalAudioInputSettings.voiceInputEnabled
+	}, [globalAudioInputSettings.voiceInputEnabled])
+
+	useEffect(() => {
+		chatSpeechOutputEnabledRef.current = chatOutputSettings.speechOutputEnabled
+	}, [chatOutputSettings.speechOutputEnabled])
+
+	useEffect(() => {
+		modeRef.current = mode
+	}, [mode])
+
 	const setMode = useCallback(
 		(nextMode: LilacMode) => {
-			if (nextMode === mode) return
+			if (nextMode === modeRef.current) return
 			stopAllClients()
 			clearAllInMemoryState()
 			setModeState(nextMode)
 		},
-		[clearAllInMemoryState, mode, stopAllClients]
+		[clearAllInMemoryState, stopAllClients]
 	)
 
-	const reconnectCurrentMode = useCallback(() => {
-		stopAllClients()
-		clearStateForMode(mode)
-		setRestartNonce(previousNonce => previousNonce + 1)
-	}, [clearStateForMode, mode, stopAllClients])
-
-	const clearCurrentModeHistory = useCallback(() => {
-		clearStateForMode(mode)
-	}, [clearStateForMode, mode])
-
 	const setChatInstructions = useCallback((instructions: string) => {
 		setChatInstructionsState(instructions)
 	}, [])
@@ -449,53 +749,64 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		setChatTurnDelaySecondsState(normalizeTurnDelaySeconds(seconds))
 	}, [])
 
-	const setTranslateSettings = useCallback(
-		(nextSettings: TranslateSettings) => {
-			setTranslateSettingsState(nextSettings)
-			if (mode === 'translate') {
-				liveTranslateClientRef.current?.updateTranslateSettings({
-					primaryLanguageCode: nextSettings.primaryLanguageCode,
-					secondaryLanguageCode: nextSettings.secondaryLanguageCode
-				})
-			}
-		},
-		[mode]
-	)
+	const setTranslateSettings = useCallback((nextSettings: TranslateSettings) => {
+		const sanitizedSettings = sanitizeTranslateSettings(nextSettings)
+		setTranslateSettingsState(sanitizedSettings)
+		if (modeRef.current === 'translate') {
+			liveTranslateClientRef.current?.updateTranslateSettings(sanitizedSettings)
+			subtitleClientRef.current?.updateSubtitleSettings(sanitizedSettings)
+		}
+	}, [])
 
-	const setVoiceInputEnabled = useCallback(
-		(voiceInputEnabled: boolean) => {
-			setGlobalAudioInputSettings({ voiceInputEnabled })
-			switch (mode) {
-				case 'chat':
-					void chatClientRef.current?.updateVoiceInputEnabled(voiceInputEnabled)
-					return
-				case 'translate':
-					void liveTranslateClientRef.current?.updateVoiceInputEnabled(voiceInputEnabled)
-					return
-				default:
-					return
-			}
-		},
-		[mode]
-	)
+	const setVoiceInputEnabled = useCallback((voiceInputEnabled: boolean) => {
+		setGlobalAudioInputSettings({ voiceInputEnabled })
+		switch (modeRef.current) {
+			case 'chat':
+				void chatClientRef.current?.updateVoiceInputEnabled(voiceInputEnabled)
+				return
+			case 'translate':
+				void subtitleClientRef.current?.updateVoiceInputEnabled(voiceInputEnabled)
+				return
+			default:
+				return
+		}
+	}, [])
 
-	const setChatSpeechOutputEnabled = useCallback(
-		(speechOutputEnabled: boolean) => {
-			setChatOutputSettings({ speechOutputEnabled })
-			if (mode === 'chat') {
-				chatClientRef.current?.updateSpeechOutputEnabled(speechOutputEnabled)
-			}
-		},
-		[mode]
-	)
+	const setChatSpeechOutputEnabled = useCallback((speechOutputEnabled: boolean) => {
+		setChatOutputSettings({ speechOutputEnabled })
+		if (modeRef.current === 'chat') {
+			chatClientRef.current?.updateSpeechOutputEnabled(speechOutputEnabled)
+		}
+	}, [])
 
 	const submitChatTextInput = useCallback((text: string) => {
 		chatClientRef.current?.submitTextInput(text)
 	}, [])
 
-	const submitTranslateTextInput = useCallback((text: string) => {
-		liveTranslateClientRef.current?.submitTextInput(text)
-	}, [])
+	const submitTranslateTextInput = useCallback(
+		(text: string) => {
+			const normalizedText = text.trim()
+			if (!normalizedText) return
+			const itemId = createClientItemId('typed')
+			setTranslateCards(previousCards => {
+				const nextCard: UtteranceCard = {
+					...createEmptyUtteranceCard(itemId, 'text', translateSettingsRef.current),
+					sourceLanguageCode: translateSettingsRef.current.myLanguageCode,
+					sourceText: normalizedText,
+					status: 'translating'
+				}
+				const previousItemId =
+					previousCards.length > 0 ? (previousCards[previousCards.length - 1]?.id ?? null) : null
+				return insertCardByPreviousItemId(previousCards, nextCard, previousItemId)
+			})
+			enqueueTranslateInput({
+				inputOrigin: 'text',
+				itemId,
+				text: normalizedText
+			})
+		},
+		[enqueueTranslateInput]
+	)
 
 	useEffect(() => {
 		if (typeof window === 'undefined') return
@@ -513,18 +824,37 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			setChatTurnDelaySecondsState(normalizeTurnDelaySeconds(storedChatTurnDelaySeconds))
 		}
 
-		const storedTranslatePrimaryLanguageCode = window.localStorage.getItem(
-			storageKeys.translatePrimaryLanguage
+		const storedTranslateMyLanguageCode = window.localStorage.getItem(storageKeys.translateMyLanguage)
+		const storedTranslateToLanguageCode = window.localStorage.getItem(storageKeys.translateToLanguage)
+		const legacyPrimaryLanguageCode = window.localStorage.getItem(
+			storageKeys.translatePrimaryLanguageLegacy
 		)
-		const storedTranslateSecondaryLanguageCode = window.localStorage.getItem(
-			storageKeys.translateSecondaryLanguage
+		const legacySecondaryLanguageCode = window.localStorage.getItem(
+			storageKeys.translateSecondaryLanguageLegacy
+		)
+
+		const hydratedTranslateSettings = sanitizeTranslateSettings(
+			storedTranslateMyLanguageCode && storedTranslateToLanguageCode
+				? {
+						myLanguageCode: storedTranslateMyLanguageCode,
+						translateToLanguageCode: storedTranslateToLanguageCode
+					}
+				: legacyPrimaryLanguageCode && legacySecondaryLanguageCode
+					? {
+							myLanguageCode: legacyPrimaryLanguageCode,
+							translateToLanguageCode: legacySecondaryLanguageCode
+						}
+					: null
+		)
+		setTranslateSettingsState(hydratedTranslateSettings)
+		window.localStorage.setItem(
+			storageKeys.translateMyLanguage,
+			hydratedTranslateSettings.myLanguageCode
+		)
+		window.localStorage.setItem(
+			storageKeys.translateToLanguage,
+			hydratedTranslateSettings.translateToLanguageCode
 		)
-		if (storedTranslatePrimaryLanguageCode && storedTranslateSecondaryLanguageCode) {
-			setTranslateSettingsState({
-				primaryLanguageCode: storedTranslatePrimaryLanguageCode,
-				secondaryLanguageCode: storedTranslateSecondaryLanguageCode
-			})
-		}
 
 		const storedVoiceInputEnabled = window.localStorage.getItem(storageKeys.voiceInputEnabled)
 		setGlobalAudioInputSettings({
@@ -543,6 +873,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		})
 
 		setIsHydrated(true)
+		isHydratedRef.current = true
 	}, [])
 
 	useEffect(() => {
@@ -553,27 +884,24 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	useEffect(() => {
 		if (!isHydrated) return
 		window.localStorage.setItem(storageKeys.chatInstructions, chatInstructions)
-		if (mode === 'chat') chatClientRef.current?.updateInstructions(chatInstructions)
-	}, [chatInstructions, isHydrated, mode])
+		if (modeRef.current === 'chat') chatClientRef.current?.updateInstructions(chatInstructions)
+	}, [chatInstructions, isHydrated])
 
 	useEffect(() => {
 		if (!isHydrated) return
 		window.localStorage.setItem(storageKeys.chatTurnDelaySeconds, String(chatTurnDelaySeconds))
-		if (mode !== 'chat') return
+		if (modeRef.current !== 'chat') return
 		chatClientRef.current?.updateTurnDelaySeconds(chatTurnDelaySeconds)
-	}, [chatTurnDelaySeconds, isHydrated, mode])
+	}, [chatTurnDelaySeconds, isHydrated])
 
 	useEffect(() => {
 		if (!isHydrated) return
+		window.localStorage.setItem(storageKeys.translateMyLanguage, translateSettings.myLanguageCode)
 		window.localStorage.setItem(
-			storageKeys.translatePrimaryLanguage,
-			translateSettings.primaryLanguageCode
+			storageKeys.translateToLanguage,
+			translateSettings.translateToLanguageCode
 		)
-		window.localStorage.setItem(
-			storageKeys.translateSecondaryLanguage,
-			translateSettings.secondaryLanguageCode
-		)
-	}, [isHydrated, translateSettings.primaryLanguageCode, translateSettings.secondaryLanguageCode])
+	}, [isHydrated, translateSettings.myLanguageCode, translateSettings.translateToLanguageCode])
 
 	useEffect(() => {
 		if (!isHydrated) return
@@ -581,19 +909,19 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			storageKeys.voiceInputEnabled,
 			String(globalAudioInputSettings.voiceInputEnabled)
 		)
-		switch (mode) {
+		switch (modeRef.current) {
 			case 'chat':
 				void chatClientRef.current?.updateVoiceInputEnabled(globalAudioInputSettings.voiceInputEnabled)
 				return
 			case 'translate':
-				void liveTranslateClientRef.current?.updateVoiceInputEnabled(
+				void subtitleClientRef.current?.updateVoiceInputEnabled(
 					globalAudioInputSettings.voiceInputEnabled
 				)
 				return
 			default:
 				return
 		}
-	}, [globalAudioInputSettings.voiceInputEnabled, isHydrated, mode])
+	}, [globalAudioInputSettings.voiceInputEnabled, isHydrated])
 
 	useEffect(() => {
 		if (!isHydrated) return
@@ -601,19 +929,69 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			storageKeys.chatSpeechOutputEnabled,
 			String(chatOutputSettings.speechOutputEnabled)
 		)
-		if (mode === 'chat') {
+		if (modeRef.current === 'chat') {
 			chatClientRef.current?.updateSpeechOutputEnabled(chatOutputSettings.speechOutputEnabled)
 		}
-	}, [chatOutputSettings.speechOutputEnabled, isHydrated, mode])
+	}, [chatOutputSettings.speechOutputEnabled, isHydrated])
 
 	useEffect(() => {
 		if (!isHydrated) return
-		void restartNonce
 		startModeRuntime(mode)
 		return () => {
 			stopAllClients()
 		}
-	}, [isHydrated, mode, restartNonce, startModeRuntime, stopAllClients])
+	}, [isHydrated, mode, startModeRuntime, stopAllClients])
+
+	useEffect(() => {
+		if (typeof window === 'undefined') return
+
+		function handleOnline(): void {
+			isOnlineRef.current = true
+			if (modeRef.current === 'chat' && chatChannelState !== 'connected') {
+				scheduleReconnect('chat')
+			}
+			if (modeRef.current === 'translate') {
+				if (translateChannelState !== 'connected') scheduleReconnect('translate')
+				if (subtitleChannelState !== 'connected') scheduleReconnect('subtitle')
+			}
+		}
+
+		function handleOffline(): void {
+			isOnlineRef.current = false
+			setStatusMessage('Offline. Waiting for network…')
+		}
+
+		isOnlineRef.current = navigator.onLine
+		window.addEventListener('online', handleOnline)
+		window.addEventListener('offline', handleOffline)
+		return () => {
+			window.removeEventListener('online', handleOnline)
+			window.removeEventListener('offline', handleOffline)
+		}
+	}, [chatChannelState, scheduleReconnect, subtitleChannelState, translateChannelState])
+
+	useEffect(() => {
+		if (!isHydrated) return
+		switch (mode) {
+			case 'chat':
+				setConnectionState(mapChatConnectionState(chatChannelState))
+				return
+			case 'translate':
+				setConnectionState(mapTranslateConnectionState(translateChannelState, subtitleChannelState))
+				return
+			default:
+				setConnectionState('idle')
+				return
+		}
+	}, [chatChannelState, isHydrated, mode, subtitleChannelState, translateChannelState])
+
+	useEffect(() => {
+		return () => {
+			for (const timerId of Object.values(reconnectTimerByChannelRef.current)) {
+				if (typeof timerId === 'number') window.clearTimeout(timerId)
+			}
+		}
+	}, [])
 
 	const contextValue = useMemo<LilacModeRuntimeContextValue>(
 		() => ({
@@ -621,12 +999,11 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			chatSpeechOutputEnabled: chatOutputSettings.speechOutputEnabled,
 			chatTranscripts,
 			chatTurnDelaySeconds,
-			clearCurrentModeHistory,
 			connectionState,
 			errorMessage,
 			getDirectionColor: getDirectionColorClass,
+			liveSubtitleState,
 			mode,
-			reconnectCurrentMode,
 			remoteAudioStream,
 			setChatInstructions,
 			setChatSpeechOutputEnabled,
@@ -634,6 +1011,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			setMode,
 			setTranslateSettings,
 			setVoiceInputEnabled,
+			statusMessage,
 			submitChatTextInput,
 			submitTranslateTextInput,
 			translateCards,
@@ -645,11 +1023,10 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			chatOutputSettings.speechOutputEnabled,
 			chatTranscripts,
 			chatTurnDelaySeconds,
-			clearCurrentModeHistory,
 			connectionState,
 			errorMessage,
+			liveSubtitleState,
 			mode,
-			reconnectCurrentMode,
 			remoteAudioStream,
 			setChatInstructions,
 			setChatSpeechOutputEnabled,
@@ -657,6 +1034,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			setMode,
 			setTranslateSettings,
 			setVoiceInputEnabled,
+			statusMessage,
 			submitChatTextInput,
 			submitTranslateTextInput,
 			translateCards,
diff --git a/src/realtime/schemas.ts b/src/realtime/schemas.ts
index 3b867e2..4d73470 100644
--- a/src/realtime/schemas.ts
+++ b/src/realtime/schemas.ts
@@ -1,20 +1,19 @@
 import { z } from 'zod'
-
+import { isValidLanguageCode, normalizeLanguageCode } from '@/realtime/languageCatalog'
 import {
 	ChatRealtimeModelSchema,
 	defaultChatRealtimeModel,
 	defaultTranscriptionModel
 } from '@/realtime/modelConfig'
-import { languageOptions } from '@/realtime/sessionTypes'
-
-const languageCodeValues = languageOptions.map(option => option.code)
 
 export const LanguageCodeSchema = z
 	.string()
 	.min(2)
-	.transform(value => value.trim().toLowerCase())
-
-const KnownLanguageCodeSchema = z.enum(languageCodeValues as [string, ...string[]])
+	.max(35)
+	.transform(value => normalizeLanguageCode(value))
+	.refine(value => isValidLanguageCode(value), {
+		message: 'Expected a valid language code (BCP-47 style).'
+	})
 
 const RealtimeClientSecretSchema = z.object({
 	expires_at: z.number(),
@@ -49,8 +48,8 @@ export const CreateRealtimeClientSecretActionOutputSchema = z.object({
 
 export const CreateTranslateRealtimeClientSecretActionInputSchema = z.object({
 	model: ChatRealtimeModelSchema.default(defaultChatRealtimeModel),
-	primaryLanguageCode: KnownLanguageCodeSchema,
-	secondaryLanguageCode: KnownLanguageCodeSchema
+	myLanguageCode: LanguageCodeSchema,
+	translateToLanguageCode: LanguageCodeSchema
 })
 
 export const CreateTranslateRealtimeClientSecretActionOutputSchema = z.object({
@@ -58,8 +57,18 @@ export const CreateTranslateRealtimeClientSecretActionOutputSchema = z.object({
 	value: z.string().min(1)
 })
 
+export const CreateRealtimeTranscriptionSessionActionInputSchema = z.object({
+	myLanguageCode: LanguageCodeSchema,
+	translateToLanguageCode: LanguageCodeSchema
+})
+
+export const CreateRealtimeTranscriptionSessionActionOutputSchema = z.object({
+	expiresAt: z.number(),
+	value: z.string().min(1)
+})
+
 export const PublishTranslationToolArgumentsSchema = z.object({
-	direction: z.enum(['primary_to_secondary', 'secondary_to_primary']),
+	direction: z.enum(['my_to_target', 'target_to_my']),
 	sourceLanguageCode: LanguageCodeSchema,
 	sourceText: z.string().min(1),
 	targetLanguageCode: LanguageCodeSchema,
@@ -92,6 +101,18 @@ export const InputAudioBufferCommittedEventSchema = z
 	})
 	.passthrough()
 
+export const InputAudioBufferSpeechStartedEventSchema = z
+	.object({
+		type: z.literal('input_audio_buffer.speech_started')
+	})
+	.passthrough()
+
+export const InputAudioBufferSpeechStoppedEventSchema = z
+	.object({
+		type: z.literal('input_audio_buffer.speech_stopped')
+	})
+	.passthrough()
+
 export const InputAudioTranscriptionDeltaEventSchema = z
 	.object({
 		delta: z.string(),
diff --git a/src/realtime/sessionTypes.ts b/src/realtime/sessionTypes.ts
index d51abbc..ee87de2 100644
--- a/src/realtime/sessionTypes.ts
+++ b/src/realtime/sessionTypes.ts
@@ -11,11 +11,25 @@ export type ChatOutputSettings = {
 }
 
 export type TranslateSettings = {
-	primaryLanguageCode: string
-	secondaryLanguageCode: string
+	myLanguageCode: string
+	translateToLanguageCode: string
 }
 
-export type UtteranceDirection = 'primary_to_secondary' | 'secondary_to_primary'
+export type LanguageCatalogEntry = {
+	code: string
+	label: string
+	nativeLabel?: string
+	popular: boolean
+}
+
+export type LiveSubtitleState = {
+	activeSegmentId: null | string
+	isListening: boolean
+	text: string
+	updatedAt: number
+}
+
+export type UtteranceDirection = 'my_to_target' | 'target_to_my'
 
 export type UtteranceStatus = 'streaming' | 'translating' | 'final' | 'error'
 
@@ -50,29 +64,3 @@ export type ChatTranscriptMessage = {
 	source: ChatTranscriptSource
 	createdAt: number
 }
-
-export const languageOptions = [
-	{ code: 'en', label: 'English' },
-	{ code: 'es', label: 'Spanish' },
-	{ code: 'fr', label: 'French' },
-	{ code: 'de', label: 'German' },
-	{ code: 'it', label: 'Italian' },
-	{ code: 'pt', label: 'Portuguese' },
-	{ code: 'zh', label: 'Chinese' },
-	{ code: 'ja', label: 'Japanese' },
-	{ code: 'ko', label: 'Korean' },
-	{ code: 'ar', label: 'Arabic' },
-	{ code: 'hi', label: 'Hindi' },
-	{ code: 'ru', label: 'Russian' }
-] as const
-
-export function isKnownLanguageCode(languageCode: string): boolean {
-	return languageOptions.some(option => option.code === languageCode)
-}
-
-export function normalizeLanguageCode(languageCode: string, fallbackLanguageCode: string): string {
-	const normalizedCode = languageCode.trim().toLowerCase()
-	if (!normalizedCode) return fallbackLanguageCode
-	if (!isKnownLanguageCode(normalizedCode)) return fallbackLanguageCode
-	return normalizedCode
-}
diff --git a/src/realtime/subtitleTranscriptionClient.ts b/src/realtime/subtitleTranscriptionClient.ts
new file mode 100644
index 0000000..39307f2
--- /dev/null
+++ b/src/realtime/subtitleTranscriptionClient.ts
@@ -0,0 +1,415 @@
+'use client'
+
+import { createRealtimeTranscriptionSessionAction } from '@/app/actions/realtime'
+import {
+	defaultInputTranscriptionModel,
+	InputAudioBufferCommittedEventSchema,
+	InputAudioBufferSpeechStartedEventSchema,
+	InputAudioBufferSpeechStoppedEventSchema,
+	InputAudioTranscriptionCompletedEventSchema,
+	InputAudioTranscriptionDeltaEventSchema,
+	RealtimeBaseServerEventSchema,
+	RealtimeErrorEventSchema
+} from '@/realtime/schemas'
+
+export type SubtitleTranscriptionClientState = 'connecting' | 'connected' | 'disconnected' | 'error'
+
+export type SubtitleTranscriptionSettings = {
+	myLanguageCode: string
+	translateToLanguageCode: string
+}
+
+export type StartSubtitleTranscriptionClientInput = SubtitleTranscriptionSettings & {
+	voiceInputEnabled: boolean
+}
+
+export type SubtitleDeltaPatch = {
+	itemId: string
+	previousItemId?: null | string
+	textDelta: string
+}
+
+export type SubtitleFinalPatch = {
+	itemId: string
+	previousItemId?: null | string
+	text: string
+}
+
+export type SubtitleTranscriptionClientCallbacks = {
+	onConnectionStateChange: (state: SubtitleTranscriptionClientState) => void
+	onError: (message: string) => void
+	onListeningStateChange: (isListening: boolean) => void
+	onSubtitleDelta: (patch: SubtitleDeltaPatch) => void
+	onSubtitleFinal: (patch: SubtitleFinalPatch) => void
+}
+
+function clampPcmSample(value: number): number {
+	if (value > 1) return 1
+	if (value < -1) return -1
+	return value
+}
+
+function convertFloat32ToInt16(
+	inputBuffer: Float32Array,
+	inputSampleRate: number,
+	outputSampleRate: number
+): Int16Array {
+	if (inputSampleRate === outputSampleRate) {
+		const directResult = new Int16Array(inputBuffer.length)
+		for (let sampleIndex = 0; sampleIndex < inputBuffer.length; sampleIndex += 1) {
+			const normalizedSample = clampPcmSample(inputBuffer[sampleIndex] ?? 0)
+			directResult[sampleIndex] =
+				normalizedSample < 0
+					? Math.round(normalizedSample * 0x8000)
+					: Math.round(normalizedSample * 0x7fff)
+		}
+		return directResult
+	}
+
+	const sampleRateRatio = inputSampleRate / outputSampleRate
+	const outputLength = Math.max(1, Math.floor(inputBuffer.length / sampleRateRatio))
+	const outputBuffer = new Int16Array(outputLength)
+	let sourceIndex = 0
+
+	for (let outputIndex = 0; outputIndex < outputLength; outputIndex += 1) {
+		const nextSourceIndex = Math.min(
+			inputBuffer.length,
+			Math.floor((outputIndex + 1) * sampleRateRatio)
+		)
+		let sampleAccumulator = 0
+		let sampleCount = 0
+		for (
+			let accumulatorIndex = sourceIndex;
+			accumulatorIndex < nextSourceIndex;
+			accumulatorIndex += 1
+		) {
+			sampleAccumulator += inputBuffer[accumulatorIndex] ?? 0
+			sampleCount += 1
+		}
+		const averageSample = sampleCount > 0 ? sampleAccumulator / sampleCount : 0
+		const normalizedSample = clampPcmSample(averageSample)
+		outputBuffer[outputIndex] =
+			normalizedSample < 0
+				? Math.round(normalizedSample * 0x8000)
+				: Math.round(normalizedSample * 0x7fff)
+		sourceIndex = nextSourceIndex
+	}
+
+	return outputBuffer
+}
+
+function int16ArrayToBase64(inputArray: Int16Array): string {
+	const byteView = new Uint8Array(inputArray.buffer)
+	const chunkSize = 0x8000
+	let binaryString = ''
+	for (let offset = 0; offset < byteView.length; offset += chunkSize) {
+		const chunk = byteView.subarray(offset, offset + chunkSize)
+		let chunkString = ''
+		for (let byteIndex = 0; byteIndex < chunk.length; byteIndex += 1) {
+			chunkString += String.fromCharCode(chunk[byteIndex] ?? 0)
+		}
+		binaryString += chunkString
+	}
+	return btoa(binaryString)
+}
+
+function buildTranscriptionPrompt(myLanguageCode: string, translateToLanguageCode: string): string {
+	return `Likely conversation languages: ${myLanguageCode} and ${translateToLanguageCode}. Preserve punctuation and proper nouns.`
+}
+
+export class SubtitleTranscriptionClient {
+	private audioContext: AudioContext | null = null
+	private callbacks: SubtitleTranscriptionClientCallbacks
+	private commitIntervalId: null | number = null
+	private generation = 0
+	private localAudioStream: MediaStream | null = null
+	private micProcessorNode: ScriptProcessorNode | null = null
+	private micSourceNode: MediaStreamAudioSourceNode | null = null
+	private pendingAudioSinceLastCommit = false
+	private previousItemIdByItemId = new Map<string, null | string>()
+	private silentGainNode: GainNode | null = null
+	private state: SubtitleTranscriptionClientState = 'disconnected'
+	private voiceInputEnabled = true
+	private websocket: WebSocket | null = null
+
+	public constructor(callbacks: SubtitleTranscriptionClientCallbacks) {
+		this.callbacks = callbacks
+	}
+
+	public async start(input: StartSubtitleTranscriptionClientInput): Promise<void> {
+		this.stop()
+		this.generation += 1
+		const generation = this.generation
+		this.voiceInputEnabled = input.voiceInputEnabled
+		this.setState('connecting')
+
+		try {
+			const clientSecret = await createRealtimeTranscriptionSessionAction({
+				myLanguageCode: input.myLanguageCode,
+				translateToLanguageCode: input.translateToLanguageCode
+			})
+			if (generation !== this.generation) return
+
+			const websocket = new WebSocket('wss://api.openai.com/v1/realtime?intent=transcription', [
+				'realtime',
+				`openai-insecure-api-key.${clientSecret.value}`,
+				'openai-beta.realtime-v1'
+			])
+			this.websocket = websocket
+
+			websocket.addEventListener('open', () => {
+				if (generation !== this.generation) return
+				this.setState('connected')
+				this.sendEvent({
+					session: {
+						input_audio_format: 'pcm16',
+						input_audio_transcription: {
+							model: defaultInputTranscriptionModel,
+							prompt: buildTranscriptionPrompt(input.myLanguageCode, input.translateToLanguageCode)
+						},
+						turn_detection: {
+							eagerness: 'high',
+							type: 'semantic_vad'
+						},
+						type: 'transcription'
+					},
+					type: 'transcription_session.update'
+				})
+				if (this.voiceInputEnabled) {
+					void this.enableVoiceInput(generation)
+				}
+			})
+
+			websocket.addEventListener('message', event => {
+				this.handleServerEvent(event.data)
+			})
+
+			websocket.addEventListener('error', () => {
+				if (generation !== this.generation) return
+				this.setState('error')
+				this.callbacks.onError('Subtitle stream connection error.')
+			})
+
+			websocket.addEventListener('close', () => {
+				if (generation !== this.generation) return
+				this.setState('disconnected')
+				this.callbacks.onListeningStateChange(false)
+			})
+		} catch (error) {
+			if (generation !== this.generation) return
+			this.setState('error')
+			const fallbackMessage = 'Unable to start subtitle transcription.'
+			if (error instanceof Error) this.callbacks.onError(error.message || fallbackMessage)
+			else this.callbacks.onError(fallbackMessage)
+			this.stop()
+		}
+	}
+
+	public stop(): void {
+		this.generation += 1
+		this.stopVoiceInput()
+		this.previousItemIdByItemId.clear()
+
+		try {
+			this.websocket?.close()
+		} catch {}
+		this.websocket = null
+
+		this.setState('disconnected')
+		this.callbacks.onListeningStateChange(false)
+	}
+
+	public isConnected(): boolean {
+		return this.state === 'connected'
+	}
+
+	public async updateVoiceInputEnabled(voiceInputEnabled: boolean): Promise<void> {
+		this.voiceInputEnabled = voiceInputEnabled
+		if (!voiceInputEnabled) {
+			this.stopVoiceInput()
+			this.callbacks.onListeningStateChange(false)
+			return
+		}
+		if (!this.isConnected()) return
+		if (this.localAudioStream !== null) return
+		const generation = this.generation
+		await this.enableVoiceInput(generation)
+	}
+
+	public updateSubtitleSettings(settings: SubtitleTranscriptionSettings): void {
+		this.sendEvent({
+			session: {
+				input_audio_transcription: {
+					model: defaultInputTranscriptionModel,
+					prompt: buildTranscriptionPrompt(settings.myLanguageCode, settings.translateToLanguageCode)
+				},
+				type: 'transcription'
+			},
+			type: 'transcription_session.update'
+		})
+	}
+
+	private setState(state: SubtitleTranscriptionClientState): void {
+		this.state = state
+		this.callbacks.onConnectionStateChange(state)
+	}
+
+	private async enableVoiceInput(generation: number): Promise<void> {
+		const stream = await navigator.mediaDevices.getUserMedia({
+			audio: {
+				autoGainControl: true,
+				echoCancellation: true,
+				noiseSuppression: true
+			}
+		})
+		if (generation !== this.generation || !this.voiceInputEnabled) {
+			for (const track of stream.getTracks()) track.stop()
+			return
+		}
+
+		const audioContext = new AudioContext()
+		this.audioContext = audioContext
+		this.localAudioStream = stream
+		this.micSourceNode = audioContext.createMediaStreamSource(stream)
+		this.micProcessorNode = audioContext.createScriptProcessor(4096, 1, 1)
+		this.silentGainNode = audioContext.createGain()
+		this.silentGainNode.gain.value = 0
+
+		this.micProcessorNode.onaudioprocess = event => {
+			const rawInputBuffer = event.inputBuffer.getChannelData(0)
+			if (!rawInputBuffer || rawInputBuffer.length === 0) return
+			const pcm16Buffer = convertFloat32ToInt16(rawInputBuffer, audioContext.sampleRate, 16_000)
+			if (pcm16Buffer.length === 0) return
+			const audioBase64 = int16ArrayToBase64(pcm16Buffer)
+			if (!audioBase64) return
+			this.pendingAudioSinceLastCommit = true
+			this.sendEvent({
+				audio: audioBase64,
+				type: 'input_audio_buffer.append'
+			})
+		}
+
+		this.micSourceNode.connect(this.micProcessorNode)
+		this.micProcessorNode.connect(this.silentGainNode)
+		this.silentGainNode.connect(audioContext.destination)
+
+		this.callbacks.onListeningStateChange(true)
+		this.startCommitLoop()
+	}
+
+	private startCommitLoop(): void {
+		if (this.commitIntervalId !== null) return
+		this.commitIntervalId = window.setInterval(() => {
+			if (!this.pendingAudioSinceLastCommit) return
+			this.pendingAudioSinceLastCommit = false
+			this.sendEvent({
+				type: 'input_audio_buffer.commit'
+			})
+		}, 1800)
+	}
+
+	private stopVoiceInput(): void {
+		if (this.commitIntervalId !== null) {
+			window.clearInterval(this.commitIntervalId)
+			this.commitIntervalId = null
+		}
+		this.pendingAudioSinceLastCommit = false
+
+		if (this.micProcessorNode) {
+			this.micProcessorNode.disconnect()
+			this.micProcessorNode.onaudioprocess = null
+			this.micProcessorNode = null
+		}
+		if (this.micSourceNode) {
+			this.micSourceNode.disconnect()
+			this.micSourceNode = null
+		}
+		if (this.silentGainNode) {
+			this.silentGainNode.disconnect()
+			this.silentGainNode = null
+		}
+		if (this.audioContext) {
+			void this.audioContext.close().catch(() => {})
+			this.audioContext = null
+		}
+		for (const track of this.localAudioStream?.getTracks() ?? []) {
+			track.stop()
+		}
+		this.localAudioStream = null
+	}
+
+	private handleInputAudioBufferCommittedEvent(candidate: unknown): void {
+		const event = InputAudioBufferCommittedEventSchema.parse(candidate)
+		this.previousItemIdByItemId.set(event.item_id, event.previous_item_id ?? null)
+	}
+
+	private handleInputAudioTranscriptionDeltaEvent(candidate: unknown): void {
+		const event = InputAudioTranscriptionDeltaEventSchema.parse(candidate)
+		if (!event.delta) return
+		this.callbacks.onSubtitleDelta({
+			itemId: event.item_id,
+			previousItemId: this.previousItemIdByItemId.get(event.item_id) ?? null,
+			textDelta: event.delta
+		})
+	}
+
+	private handleInputAudioTranscriptionCompletedEvent(candidate: unknown): void {
+		const event = InputAudioTranscriptionCompletedEventSchema.parse(candidate)
+		const transcript = event.transcript.trim()
+		if (!transcript) return
+		this.callbacks.onSubtitleFinal({
+			itemId: event.item_id,
+			previousItemId: this.previousItemIdByItemId.get(event.item_id) ?? null,
+			text: transcript
+		})
+	}
+
+	private handleServerEvent(rawData: unknown): void {
+		try {
+			const candidate = typeof rawData === 'string' ? JSON.parse(rawData) : rawData
+			const baseEvent = RealtimeBaseServerEventSchema.parse(candidate)
+
+			switch (baseEvent.type) {
+				case 'input_audio_buffer.committed': {
+					this.handleInputAudioBufferCommittedEvent(candidate)
+					return
+				}
+				case 'input_audio_buffer.speech_started': {
+					InputAudioBufferSpeechStartedEventSchema.parse(candidate)
+					this.callbacks.onListeningStateChange(true)
+					return
+				}
+				case 'input_audio_buffer.speech_stopped': {
+					InputAudioBufferSpeechStoppedEventSchema.parse(candidate)
+					this.callbacks.onListeningStateChange(false)
+					return
+				}
+				case 'conversation.item.input_audio_transcription.delta': {
+					this.handleInputAudioTranscriptionDeltaEvent(candidate)
+					return
+				}
+				case 'conversation.item.input_audio_transcription.completed': {
+					this.handleInputAudioTranscriptionCompletedEvent(candidate)
+					return
+				}
+				case 'error': {
+					const event = RealtimeErrorEventSchema.parse(candidate)
+					this.callbacks.onError(event.error?.message || 'Subtitle transcription error.')
+					return
+				}
+				default:
+					return
+			}
+		} catch {
+			return
+		}
+	}
+
+	private sendEvent(event: Record<string, unknown>): void {
+		if (!this.websocket) return
+		if (this.websocket.readyState !== WebSocket.OPEN) return
+		try {
+			this.websocket.send(JSON.stringify(event))
+		} catch {}
+	}
+}

From 38ca4d1e9d16b688efed95b4f2567186deec735a Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Tue, 3 Mar 2026 12:53:01 -0500
Subject: [PATCH 08/24] stabilize realtime translation flow and simplify v3 ux

---
 scripts/smoke/runLiveConversationSmoke.ts   |  51 ++-
 src/app/(app)/ChatMode.tsx                  | 284 +------------
 src/app/(app)/ModeShell.tsx                 | 280 +++++++++++--
 src/app/(app)/TranslateMode.tsx             | 409 +++++++++++-------
 src/app/actions/realtime.ts                 |   3 +-
 src/app/styles.css                          |   4 +
 src/components/ui/button.tsx                |   5 +-
 src/realtime/liveTranslateRealtimeClient.ts |  63 ++-
 src/realtime/modeRuntimeStore.tsx           | 432 ++++++++++++++++----
 src/realtime/schemas.ts                     |  16 +
 src/realtime/sessionTypes.ts                |  15 +
 src/realtime/subtitleTranscriptionClient.ts |  30 +-
 12 files changed, 1011 insertions(+), 581 deletions(-)

diff --git a/scripts/smoke/runLiveConversationSmoke.ts b/scripts/smoke/runLiveConversationSmoke.ts
index 40eeb0d..294a896 100644
--- a/scripts/smoke/runLiveConversationSmoke.ts
+++ b/scripts/smoke/runLiveConversationSmoke.ts
@@ -108,6 +108,7 @@ async function switchToModeWithRetry(
 	const triggerTestId = targetMode === 'chat' ? 'mode-tab-chat' : 'mode-tab-translate'
 
 	for (let attempt = 1; attempt <= maxAttempts; attempt += 1) {
+		await page.keyboard.press('Escape').catch(() => {})
 		await page.getByTestId(triggerTestId).click({ timeout: 15_000 })
 		try {
 			await waitForCondition(
@@ -127,6 +128,24 @@ async function switchToModeWithRetry(
 	}
 }
 
+async function openGlobalSettings(page: Page): Promise<void> {
+	const desktopButton = page.getByTestId('global-settings-open-desktop')
+	if (await desktopButton.isVisible().catch(() => false)) {
+		await desktopButton.click()
+		return
+	}
+	await page.getByTestId('global-settings-open-mobile').click()
+}
+
+async function closeOverlayIfPresent(page: Page): Promise<void> {
+	for (let attempt = 0; attempt < 3; attempt += 1) {
+		const overlayCount = await page.locator('[data-state="open"][aria-hidden="true"]').count()
+		if (overlayCount === 0) return
+		await page.keyboard.press('Escape').catch(() => {})
+		await page.waitForTimeout(120)
+	}
+}
+
 async function writeScenarioArtifacts(
 	page: Page,
 	artifactDirectoryPath: string,
@@ -162,20 +181,6 @@ async function clickSliderByRatio(page: Page, testId: string, ratio: number): Pr
 	await page.mouse.click(clickX, clickY)
 }
 
-async function selectByLabel(
-	page: Page,
-	triggerTestId: string,
-	optionLabel: string
-): Promise<void> {
-	await page.getByTestId(triggerTestId).click()
-	const optionByRole = page.getByRole('option', { name: optionLabel }).first()
-	if (await optionByRole.count()) {
-		await optionByRole.click()
-		return
-	}
-	await page.locator('[data-radix-collection-item]').filter({ hasText: optionLabel }).first().click()
-}
-
 async function runChatScenario(page: Page, artifactDirectoryPath: string): Promise<ScenarioResult> {
 	const failures: string[] = []
 	const typedMessage = `typed smoke ${Date.now()}`
@@ -183,7 +188,7 @@ async function runChatScenario(page: Page, artifactDirectoryPath: string): Promi
 		await switchToModeWithRetry(page, 'chat')
 		await waitForConnectionLive(page)
 
-		await page.getByTestId('chat-settings-open-desktop').click()
+		await openGlobalSettings(page)
 		await clickSliderByRatio(page, 'chat-turn-delay-slider', 0.68)
 		await page.waitForTimeout(800)
 
@@ -192,7 +197,7 @@ async function runChatScenario(page: Page, artifactDirectoryPath: string): Promi
 			throw new Error('Chat slider interaction triggered session.type error.')
 		}
 
-		await page.keyboard.press('Escape')
+		await closeOverlayIfPresent(page)
 		await page.getByTestId('chat-text-input').fill(typedMessage)
 		await page.getByTestId('chat-text-send').click()
 
@@ -244,6 +249,7 @@ async function runTranslateScenario(
 	const failures: string[] = []
 	let connectionFailureMessage: null | string = null
 	try {
+		await closeOverlayIfPresent(page)
 		await switchToModeWithRetry(page, 'translate')
 		try {
 			await waitForConnectionLive(page)
@@ -252,7 +258,10 @@ async function runTranslateScenario(
 				error instanceof Error ? error.message : 'Translate mode connection did not become live.'
 		}
 
-		await selectByLabel(page, 'translate-secondary-language', 'French')
+		await page.getByTestId('translate-language-picker-open-desktop').click()
+		await page.getByTestId('translate-secondary-language-search').fill('French')
+		await page.getByTestId('translate-secondary-language-option-fr').click()
+		await page.keyboard.press('Escape')
 		await page.waitForTimeout(1000)
 		const bodyTextAfterLanguageChange = await page.locator('body').innerText()
 		if (bodyTextAfterLanguageChange.includes(missingSessionTypeErrorText)) {
@@ -331,6 +340,9 @@ async function runMobileThemeChecks(
 				const hasHorizontalOverflow = await page.evaluate(function detectOverflow(): boolean {
 					return document.documentElement.scrollWidth > window.innerWidth + 1
 				})
+				const hasDocumentVerticalGrowth = await page.evaluate(function detectVerticalGrowth(): boolean {
+					return document.documentElement.scrollHeight > window.innerHeight + 1
+				})
 				const bodyText = await page.locator('body').innerText()
 
 				const screenshotPath = join(
@@ -344,6 +356,11 @@ async function runMobileThemeChecks(
 						`layout-${colorScheme}-${viewport.width}x${viewport.height}: horizontal overflow detected`
 					)
 				}
+				if (hasDocumentVerticalGrowth) {
+					failures.push(
+						`layout-${colorScheme}-${viewport.width}x${viewport.height}: document vertical growth detected`
+					)
+				}
 				if (bodyText.includes(genericServerComponentErrorText)) {
 					failures.push(
 						`layout-${colorScheme}-${viewport.width}x${viewport.height}: generic Server Components error text rendered`
diff --git a/src/app/(app)/ChatMode.tsx b/src/app/(app)/ChatMode.tsx
index 2d67390..fe3f678 100644
--- a/src/app/(app)/ChatMode.tsx
+++ b/src/app/(app)/ChatMode.tsx
@@ -1,204 +1,23 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
+
 import { Button } from '@/components/ui/button'
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger
-} from '@/components/ui/dialog'
 import { ScrollArea } from '@/components/ui/scroll-area'
-import {
-	Sheet,
-	SheetContent,
-	SheetDescription,
-	SheetHeader,
-	SheetTitle,
-	SheetTrigger
-} from '@/components/ui/sheet'
-import { Slider } from '@/components/ui/slider'
-import { Switch } from '@/components/ui/switch'
 import { Textarea } from '@/components/ui/textarea'
 import { useLilacModeRuntime } from '@/realtime/modeRuntimeStore'
 
-const defaultChatInstructions =
-	'You are Lilac. Help users communicate across languages. Keep answers concise, faithful, and practical.'
-
-type ChatSettingsContentProps = {
-	chatInstructions: string
-	chatSpeechOutputEnabled: boolean
-	draftInstructions: string
-	draftTurnDelaySeconds: number
-	saveMessage: string
-	setChatInstructions: (instructions: string) => void
-	setChatSpeechOutputEnabled: (enabled: boolean) => void
-	setChatTurnDelaySeconds: (seconds: number) => void
-	setDraftInstructions: (instructions: string) => void
-	setDraftTurnDelaySeconds: (seconds: number) => void
-	setSaveMessage: (value: string) => void
-	voiceInputEnabled: boolean
-}
-
-function normalizeTurnDelaySeconds(value: number): number {
-	const clampedValue = Math.min(6, Math.max(0.2, value))
-	return Math.round(clampedValue * 10) / 10
-}
-
-function ChatSettingsContent({
-	chatInstructions,
-	chatSpeechOutputEnabled,
-	draftInstructions,
-	draftTurnDelaySeconds,
-	saveMessage,
-	setChatInstructions,
-	setChatSpeechOutputEnabled,
-	setChatTurnDelaySeconds,
-	setDraftInstructions,
-	setDraftTurnDelaySeconds,
-	setSaveMessage,
-	voiceInputEnabled
-}: ChatSettingsContentProps) {
-	return (
-		<div className="space-y-4" data-testid="chat-settings-surface">
-			<div className="space-y-2 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3">
-				<div className="flex items-center justify-between gap-3">
-					<div className="space-y-1">
-						<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
-							Speech output
-						</div>
-						<p className="text-[var(--lilac-ink-muted)] text-sm">
-							Voice input is {voiceInputEnabled ? 'enabled' : 'disabled'} globally.
-						</p>
-					</div>
-					<Switch
-						checked={chatSpeechOutputEnabled}
-						onCheckedChange={checked => setChatSpeechOutputEnabled(checked)}
-						data-testid="chat-speech-output-toggle"
-						className="data-[state=checked]:bg-[var(--lilac-direction-primary)] data-[state=unchecked]:bg-[var(--lilac-border)]"
-					/>
-				</div>
-
-				<div className="space-y-2 pt-2">
-					<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
-						End-of-speech delay
-					</div>
-					<Slider
-						value={[draftTurnDelaySeconds]}
-						min={0.2}
-						max={6}
-						step={0.1}
-						onValueChange={valueList => {
-							const nextValue = valueList[0]
-							if (typeof nextValue !== 'number') return
-							setDraftTurnDelaySeconds(normalizeTurnDelaySeconds(nextValue))
-						}}
-						onValueCommit={valueList => {
-							const nextValue = valueList[0]
-							if (typeof nextValue !== 'number') return
-							const normalizedValue = normalizeTurnDelaySeconds(nextValue)
-							setDraftTurnDelaySeconds(normalizedValue)
-							setChatTurnDelaySeconds(normalizedValue)
-						}}
-						data-testid="chat-turn-delay-slider"
-						className="[&_[data-slot=slider-range]]:bg-[var(--lilac-brand-primary)]"
-					/>
-					<div className="flex items-center justify-between text-sm">
-						<span className="text-[var(--lilac-ink-muted)]">Delay</span>
-						<span className="font-semibold text-[var(--lilac-ink)]">
-							{draftTurnDelaySeconds.toFixed(1)}s
-						</span>
-					</div>
-				</div>
-			</div>
-
-			<div className="space-y-2 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3">
-				<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
-					Instructions
-				</div>
-				<Textarea
-					className="min-h-32 border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] text-[var(--lilac-ink)]"
-					data-testid="chat-instructions-input"
-					onChange={event => setDraftInstructions(event.target.value)}
-					value={draftInstructions}
-				/>
-				<div className="flex items-center justify-end gap-2">
-					<Button
-						type="button"
-						variant="outline"
-						data-testid="chat-instructions-reset"
-						className="border-[var(--lilac-border)] bg-[var(--lilac-elevated)] text-[var(--lilac-ink)]"
-						onClick={() => {
-							setDraftInstructions(chatInstructions)
-							setDraftTurnDelaySeconds(normalizeTurnDelaySeconds(draftTurnDelaySeconds))
-						}}
-					>
-						Reset
-					</Button>
-					<Button
-						type="button"
-						data-testid="chat-instructions-save"
-						className="bg-[var(--lilac-brand-primary)] text-[var(--lilac-brand-primary-foreground)]"
-						onClick={() => {
-							setChatInstructions(draftInstructions.trim() || defaultChatInstructions)
-							setSaveMessage('Saved')
-						}}
-					>
-						Save
-					</Button>
-				</div>
-				{saveMessage ? (
-					<output className="block text-[var(--lilac-ink-muted)] text-xs" aria-live="polite">
-						{saveMessage}
-					</output>
-				) : null}
-			</div>
-		</div>
-	)
-}
-
 export default function ChatMode() {
-	const {
-		chatInstructions,
-		chatSpeechOutputEnabled,
-		chatTranscripts,
-		chatTurnDelaySeconds,
-		remoteAudioStream,
-		setChatInstructions,
-		setChatSpeechOutputEnabled,
-		setChatTurnDelaySeconds,
-		submitChatTextInput,
-		voiceInputEnabled
-	} = useLilacModeRuntime()
+	const { chatSpeechOutputEnabled, chatTranscripts, remoteAudioStream, submitChatTextInput } =
+		useLilacModeRuntime()
 
-	const [draftInstructions, setDraftInstructions] = useState(chatInstructions)
 	const [draftMessage, setDraftMessage] = useState('')
-	const [saveMessage, setSaveMessage] = useState('')
-	const [draftTurnDelaySeconds, setDraftTurnDelaySeconds] = useState(chatTurnDelaySeconds)
-	const [desktopSettingsOpen, setDesktopSettingsOpen] = useState(false)
-	const [mobileSettingsOpen, setMobileSettingsOpen] = useState(false)
 	const stayPinnedToBottomRef = useRef(true)
 	const transcriptScrollAreaRef = useRef<HTMLDivElement | null>(null)
 	const transcriptViewportRef = useRef<HTMLDivElement | null>(null)
 	const playbackAudioElementRef = useRef<HTMLAudioElement | null>(null)
 	const chatTranscriptCount = chatTranscripts.length
 
-	useEffect(() => {
-		setDraftInstructions(chatInstructions)
-	}, [chatInstructions])
-
-	useEffect(() => {
-		setDraftTurnDelaySeconds(chatTurnDelaySeconds)
-	}, [chatTurnDelaySeconds])
-
-	useEffect(() => {
-		if (!saveMessage) return
-		const timeoutId = window.setTimeout(() => setSaveMessage(''), 1500)
-		return () => window.clearTimeout(timeoutId)
-	}, [saveMessage])
-
 	useEffect(() => {
 		const rootElement = transcriptScrollAreaRef.current
 		if (!rootElement) return
@@ -254,104 +73,27 @@ export default function ChatMode() {
 	}
 
 	return (
-		<div className="flex min-h-0 flex-1 flex-col gap-3">
-			<div className="flex items-center justify-between rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-3 py-2">
+		<div className="flex min-h-0 flex-1 flex-col gap-3 overflow-hidden">
+			<div className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] px-3 py-2">
 				<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
 					Conversation
 				</div>
-
-				<div className="flex items-center gap-2">
-					<Dialog open={desktopSettingsOpen} onOpenChange={setDesktopSettingsOpen}>
-						<DialogTrigger asChild>
-							<Button
-								type="button"
-								variant="outline"
-								className="hidden h-9 rounded-xl border-[var(--lilac-border)] bg-[var(--lilac-card)] text-[var(--lilac-ink)] sm:inline-flex"
-								data-testid="chat-settings-open-desktop"
-							>
-								Settings
-							</Button>
-						</DialogTrigger>
-						<DialogContent className="max-h-[85dvh] overflow-hidden border-[var(--lilac-border)] bg-[var(--lilac-surface)] p-0 sm:max-w-xl">
-							<DialogHeader className="border-[var(--lilac-border)] border-b px-4 pt-4 pb-3">
-								<DialogTitle className="text-[var(--lilac-ink)]">Chat Settings</DialogTitle>
-								<DialogDescription className="text-[var(--lilac-ink-muted)]">
-									Control speech output and instructions.
-								</DialogDescription>
-							</DialogHeader>
-							<div className="overflow-y-auto px-4 py-4">
-								<ChatSettingsContent
-									chatInstructions={chatInstructions}
-									chatSpeechOutputEnabled={chatSpeechOutputEnabled}
-									draftInstructions={draftInstructions}
-									draftTurnDelaySeconds={draftTurnDelaySeconds}
-									saveMessage={saveMessage}
-									setChatInstructions={setChatInstructions}
-									setChatSpeechOutputEnabled={setChatSpeechOutputEnabled}
-									setChatTurnDelaySeconds={setChatTurnDelaySeconds}
-									setDraftInstructions={setDraftInstructions}
-									setDraftTurnDelaySeconds={setDraftTurnDelaySeconds}
-									setSaveMessage={setSaveMessage}
-									voiceInputEnabled={voiceInputEnabled}
-								/>
-							</div>
-						</DialogContent>
-					</Dialog>
-
-					<Sheet open={mobileSettingsOpen} onOpenChange={setMobileSettingsOpen}>
-						<SheetTrigger asChild>
-							<Button
-								type="button"
-								variant="outline"
-								className="h-9 rounded-xl border-[var(--lilac-border)] bg-[var(--lilac-card)] text-[var(--lilac-ink)] sm:hidden"
-								data-testid="chat-settings-open-mobile"
-							>
-								Settings
-							</Button>
-						</SheetTrigger>
-						<SheetContent
-							side="bottom"
-							className="max-h-[90dvh] overflow-y-auto rounded-t-2xl border-[var(--lilac-border)] bg-[var(--lilac-surface)] px-4 pb-[max(1rem,env(safe-area-inset-bottom))]"
-						>
-							<SheetHeader className="pb-2 text-left">
-								<SheetTitle className="text-[var(--lilac-ink)]">Chat Settings</SheetTitle>
-								<SheetDescription className="text-[var(--lilac-ink-muted)]">
-									Control speech output and instructions.
-								</SheetDescription>
-							</SheetHeader>
-							<ChatSettingsContent
-								chatInstructions={chatInstructions}
-								chatSpeechOutputEnabled={chatSpeechOutputEnabled}
-								draftInstructions={draftInstructions}
-								draftTurnDelaySeconds={draftTurnDelaySeconds}
-								saveMessage={saveMessage}
-								setChatInstructions={setChatInstructions}
-								setChatSpeechOutputEnabled={setChatSpeechOutputEnabled}
-								setChatTurnDelaySeconds={setChatTurnDelaySeconds}
-								setDraftInstructions={setDraftInstructions}
-								setDraftTurnDelaySeconds={setDraftTurnDelaySeconds}
-								setSaveMessage={setSaveMessage}
-								voiceInputEnabled={voiceInputEnabled}
-							/>
-						</SheetContent>
-					</Sheet>
-				</div>
 			</div>
 
 			<ScrollArea
 				ref={transcriptScrollAreaRef}
 				data-testid="chat-transcript-list"
-				className="min-h-0 flex-1 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)]"
+				className="min-h-0 flex-1 rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)]"
 			>
 				{chatTranscripts.length ? (
 					<div className="flex flex-col gap-3 p-3 sm:p-4">
 						{chatTranscripts.map(message => {
 							const isUser = message.role === 'user'
-							const bubbleBaseClasses =
+							const bubbleBaseClass =
 								'max-w-[92%] whitespace-pre-wrap break-words rounded-2xl px-3 py-2 text-sm leading-relaxed'
-							const bubbleClasses = isUser
-								? `${bubbleBaseClasses} self-end bg-[var(--lilac-brand-primary)] text-[var(--lilac-brand-primary-foreground)]`
-								: `${bubbleBaseClasses} self-start border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] text-[var(--lilac-ink)]`
+							const bubbleClass = isUser
+								? `${bubbleBaseClass} self-end bg-[var(--lilac-brand-primary)] text-[var(--lilac-brand-primary-foreground)]`
+								: `${bubbleBaseClass} self-start border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] text-[var(--lilac-ink)]`
 
 							return (
 								<div
@@ -367,7 +109,7 @@ export default function ChatMode() {
 										{isUser ? 'You' : 'Lilac'}
 										{message.status === 'streaming' ? <span className="ml-1 opacity-60">•</span> : null}
 									</div>
-									<div className={bubbleClasses} data-testid={`chat-message-text-${message.id}`}>
+									<div className={bubbleClass} data-testid={`chat-message-text-${message.id}`}>
 										{message.text.trim() || '…'}
 									</div>
 								</div>
@@ -385,7 +127,7 @@ export default function ChatMode() {
 			</ScrollArea>
 
 			<form
-				className="rounded-2xl border border-[var(--lilac-border)] bg-[color-mix(in_oklab,var(--lilac-card)_84%,transparent)] p-2"
+				className="rounded-xl border border-[var(--lilac-border)] bg-[color-mix(in_oklab,var(--lilac-card)_84%,transparent)] p-2"
 				onSubmit={event => {
 					event.preventDefault()
 					submitMessage()
@@ -410,7 +152,7 @@ export default function ChatMode() {
 						type="submit"
 						data-testid="chat-text-send"
 						disabled={!draftMessage.trim()}
-						className="h-11 rounded-xl bg-[var(--lilac-brand-primary)] px-4 font-semibold text-[var(--lilac-brand-primary-foreground)] text-xs uppercase tracking-[0.1em]"
+						className="h-11 rounded-xl px-4 font-semibold text-xs uppercase tracking-[0.1em]"
 					>
 						Send
 					</Button>
diff --git a/src/app/(app)/ModeShell.tsx b/src/app/(app)/ModeShell.tsx
index be83953..6e70807 100644
--- a/src/app/(app)/ModeShell.tsx
+++ b/src/app/(app)/ModeShell.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import type { ReactNode } from 'react'
+import { type ReactNode, useEffect, useState } from 'react'
 
 import ChatMode from '@/app/(app)/ChatMode'
 import TranslateMode from '@/app/(app)/TranslateMode'
@@ -21,11 +21,21 @@ import {
 	SheetTitle,
 	SheetTrigger
 } from '@/components/ui/sheet'
+import { Slider } from '@/components/ui/slider'
 import { Switch } from '@/components/ui/switch'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Textarea } from '@/components/ui/textarea'
 import { useLilacModeRuntime } from '@/realtime/modeRuntimeStore'
 import type { LilacMode } from '@/realtime/sessionTypes'
 
+const defaultChatInstructions =
+	'You are Lilac. Help users communicate across languages. Keep answers concise, faithful, and practical.'
+
+function normalizeTurnDelaySeconds(value: number): number {
+	const clampedValue = Math.min(6, Math.max(0.2, value))
+	return Math.round(clampedValue * 10) / 10
+}
+
 function renderMode(mode: LilacMode): ReactNode {
 	switch (mode) {
 		case 'chat':
@@ -37,30 +47,62 @@ function renderMode(mode: LilacMode): ReactNode {
 	}
 }
 
-type GlobalSettingsContentProps = {
+type UnifiedSettingsContentProps = {
+	chatInstructions: string
+	chatSpeechOutputEnabled: boolean
+	chatTurnDelaySeconds: number
 	connectionState: string
+	draftInstructions: string
+	draftTurnDelaySeconds: number
 	errorMessage: null | string
+	mode: LilacMode
+	onDraftInstructionsChange: (value: string) => void
+	onDraftTurnDelayChange: (value: number) => void
+	onResetChatSettings: () => void
+	onSaveChatSettings: () => void
+	saveMessage: string
+	setChatSpeechOutputEnabled: (value: boolean) => void
 	setVoiceInputEnabled: (value: boolean) => void
 	statusMessage: null | string
 	voiceInputEnabled: boolean
 }
 
-function GlobalSettingsContent({
+function UnifiedSettingsContent({
+	chatInstructions,
+	chatSpeechOutputEnabled,
+	chatTurnDelaySeconds,
 	connectionState,
+	draftInstructions,
+	draftTurnDelaySeconds,
 	errorMessage,
+	mode,
+	onDraftInstructionsChange,
+	onDraftTurnDelayChange,
+	onResetChatSettings,
+	onSaveChatSettings,
+	saveMessage,
+	setChatSpeechOutputEnabled,
 	setVoiceInputEnabled,
 	statusMessage,
 	voiceInputEnabled
-}: GlobalSettingsContentProps) {
+}: UnifiedSettingsContentProps) {
+	const shouldShowDiagnostics =
+		!!errorMessage ||
+		connectionState === 'error' ||
+		(connectionState !== 'connected' && !!statusMessage) ||
+		statusMessage === 'Offline. Waiting for network…'
+
 	return (
 		<div className="space-y-4">
-			<section className="space-y-2 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-4">
+			<section className="space-y-2 rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-4">
 				<div className="flex items-center justify-between gap-3">
 					<div>
 						<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
-							Voice Input
+							Microphone
 						</div>
-						<p className="text-[var(--lilac-ink-muted)] text-sm">Use microphone in Chat and Translate.</p>
+						<p className="text-[var(--lilac-ink-muted)] text-sm">
+							Use voice input in Chat and Translate.
+						</p>
 					</div>
 					<Switch
 						checked={voiceInputEnabled}
@@ -70,42 +112,162 @@ function GlobalSettingsContent({
 				</div>
 			</section>
 
-			{statusMessage || errorMessage ? (
-				<section className="space-y-2 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-4">
-					<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
-						Connection
+			{mode === 'chat' ? (
+				<section className="space-y-3 rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-4">
+					<div className="flex items-center justify-between gap-3">
+						<div>
+							<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
+								Speech Output
+							</div>
+							<p className="text-[var(--lilac-ink-muted)] text-sm">Play spoken responses in chat.</p>
+						</div>
+						<Switch
+							checked={chatSpeechOutputEnabled}
+							onCheckedChange={setChatSpeechOutputEnabled}
+							data-testid="chat-speech-output-toggle"
+						/>
 					</div>
-					<div className="text-sm">
-						{statusMessage ? <p className="text-[var(--lilac-ink-muted)]">{statusMessage}</p> : null}
-						<p className="text-[var(--lilac-ink-muted)]">State: {connectionState}</p>
-						{errorMessage ? (
-							<p className="mt-1 text-[var(--destructive)]" data-testid="mode-error-banner">
-								{errorMessage}
+
+					<div className="space-y-2">
+						<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
+							End Of Speech Delay
+						</div>
+						<Slider
+							value={[draftTurnDelaySeconds]}
+							min={0.2}
+							max={6}
+							step={0.1}
+							onValueChange={valueList => {
+								const nextValue = valueList[0]
+								if (typeof nextValue !== 'number') return
+								onDraftTurnDelayChange(normalizeTurnDelaySeconds(nextValue))
+							}}
+							onValueCommit={valueList => {
+								const nextValue = valueList[0]
+								if (typeof nextValue !== 'number') return
+								onDraftTurnDelayChange(normalizeTurnDelaySeconds(nextValue))
+							}}
+							data-testid="chat-turn-delay-slider"
+						/>
+						<div className="flex items-center justify-between text-sm">
+							<span className="text-[var(--lilac-ink-muted)]">Delay</span>
+							<span className="font-semibold text-[var(--lilac-ink)]">
+								{draftTurnDelaySeconds.toFixed(1)}s
+							</span>
+						</div>
+					</div>
+
+					<div className="space-y-2">
+						<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
+							Instructions
+						</div>
+						<Textarea
+							className="min-h-28 border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] text-[var(--lilac-ink)]"
+							data-testid="chat-instructions-input"
+							onChange={event => onDraftInstructionsChange(event.target.value)}
+							value={draftInstructions}
+						/>
+						<div className="flex items-center justify-between gap-2">
+							<Button
+								type="button"
+								variant="outline"
+								data-testid="chat-instructions-reset"
+								onClick={onResetChatSettings}
+							>
+								Reset
+							</Button>
+							<Button type="button" data-testid="chat-instructions-save" onClick={onSaveChatSettings}>
+								Save
+							</Button>
+						</div>
+						{saveMessage ? (
+							<output className="block text-[var(--lilac-ink-muted)] text-xs" aria-live="polite">
+								{saveMessage}
+							</output>
+						) : null}
+						{draftInstructions.trim() === '' && chatInstructions.trim() === '' ? (
+							<p className="text-[var(--lilac-ink-muted)] text-xs">
+								Empty instructions revert to default behavior.
 							</p>
 						) : null}
+						{chatTurnDelaySeconds !== draftTurnDelaySeconds ? (
+							<p className="text-[var(--lilac-ink-muted)] text-xs">Save to apply new delay in chat.</p>
+						) : null}
 					</div>
 				</section>
 			) : null}
+
+			{shouldShowDiagnostics ? (
+				<section className="space-y-2 rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-4">
+					<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
+						Connection
+					</div>
+					{statusMessage ? (
+						<p className="text-[var(--lilac-ink-muted)] text-sm">{statusMessage}</p>
+					) : null}
+					<p className="text-[var(--lilac-ink-muted)] text-sm">State: {connectionState}</p>
+					{errorMessage ? (
+						<p className="text-[var(--destructive)] text-sm" data-testid="mode-error-banner">
+							{errorMessage}
+						</p>
+					) : null}
+				</section>
+			) : null}
 		</div>
 	)
 }
 
 export default function ModeShell() {
 	const {
+		chatInstructions,
+		chatSpeechOutputEnabled,
+		chatTurnDelaySeconds,
 		connectionState,
 		errorMessage,
 		mode,
+		setChatInstructions,
+		setChatSpeechOutputEnabled,
+		setChatTurnDelaySeconds,
 		setMode,
 		setVoiceInputEnabled,
 		statusMessage,
 		voiceInputEnabled
 	} = useLilacModeRuntime()
 
+	const [draftInstructions, setDraftInstructions] = useState(chatInstructions)
+	const [draftTurnDelaySeconds, setDraftTurnDelaySeconds] = useState(chatTurnDelaySeconds)
+	const [saveMessage, setSaveMessage] = useState('')
+
+	useEffect(() => {
+		setDraftInstructions(chatInstructions)
+	}, [chatInstructions])
+
+	useEffect(() => {
+		setDraftTurnDelaySeconds(chatTurnDelaySeconds)
+	}, [chatTurnDelaySeconds])
+
+	useEffect(() => {
+		if (!saveMessage) return
+		const timeoutId = window.setTimeout(() => setSaveMessage(''), 1500)
+		return () => window.clearTimeout(timeoutId)
+	}, [saveMessage])
+
+	function saveChatSettings(): void {
+		setChatInstructions(draftInstructions.trim() || defaultChatInstructions)
+		setChatTurnDelaySeconds(normalizeTurnDelaySeconds(draftTurnDelaySeconds))
+		setSaveMessage('Saved')
+	}
+
+	function resetChatSettings(): void {
+		setDraftInstructions(chatInstructions || defaultChatInstructions)
+		setDraftTurnDelaySeconds(chatTurnDelaySeconds)
+	}
+
 	return (
 		<div className="h-[100dvh] overflow-hidden bg-[var(--lilac-surface)]">
-			<div className="-z-10 pointer-events-none absolute inset-0 bg-[radial-gradient(140%_100%_at_50%_-24%,color-mix(in_oklab,var(--lilac-direction-secondary)_15%,transparent)_0%,transparent_74%)]" />
+			<div className="-z-10 pointer-events-none absolute inset-0 bg-[radial-gradient(140%_100%_at_50%_-24%,color-mix(in_oklab,var(--lilac-direction-secondary)_14%,transparent)_0%,transparent_74%)]" />
 			<div className="mx-auto flex h-[100dvh] w-full max-w-5xl flex-col px-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] sm:px-5">
-				<header className="sticky top-0 z-20 border-[var(--lilac-border)] border-b bg-[color-mix(in_oklab,var(--lilac-surface)_86%,transparent)] py-3 pt-[max(0.75rem,env(safe-area-inset-top))] backdrop-blur">
+				<header className="sticky top-0 z-20 border-[var(--lilac-border)] border-b bg-[color-mix(in_oklab,var(--lilac-surface)_88%,transparent)] py-3 pt-[max(0.75rem,env(safe-area-inset-top))] backdrop-blur">
 					<div className="flex items-center justify-between gap-3">
 						<div className="font-semibold text-[13px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.2em]">
 							Lilac
@@ -122,45 +284,81 @@ export default function ModeShell() {
 									<TabsTrigger
 										value="chat"
 										data-testid="mode-tab-chat"
-										className="rounded-full px-4 font-semibold text-[11px] uppercase tracking-[0.14em] data-[state=active]:bg-[var(--lilac-brand-primary)] data-[state=active]:text-[var(--lilac-brand-primary-foreground)]"
+										className="rounded-full px-4 text-xs"
 									>
 										Chat
 									</TabsTrigger>
 									<TabsTrigger
 										value="translate"
 										data-testid="mode-tab-translate"
-										className="rounded-full px-4 font-semibold text-[11px] uppercase tracking-[0.14em] data-[state=active]:bg-[var(--lilac-brand-primary)] data-[state=active]:text-[var(--lilac-brand-primary-foreground)]"
+										className="rounded-full px-4 text-xs"
 									>
 										Translate
 									</TabsTrigger>
 								</TabsList>
 							</Tabs>
 
+							<Button
+								type="button"
+								variant="outline"
+								data-testid="header-voice-input-toggle"
+								onClick={() => setVoiceInputEnabled(!voiceInputEnabled)}
+								className="h-9 rounded-full px-3 text-[11px] uppercase tracking-[0.12em]"
+							>
+								{voiceInputEnabled ? 'Mic On' : 'Mic Off'}
+							</Button>
+
+							{mode === 'chat' ? (
+								<Button
+									type="button"
+									variant="outline"
+									data-testid="header-chat-speech-toggle"
+									onClick={() => setChatSpeechOutputEnabled(!chatSpeechOutputEnabled)}
+									className="h-9 rounded-full px-3 text-[11px] uppercase tracking-[0.12em]"
+								>
+									{chatSpeechOutputEnabled ? 'Speech On' : 'Speech Off'}
+								</Button>
+							) : null}
+
 							<Dialog>
 								<DialogTrigger asChild>
 									<Button
 										type="button"
 										variant="outline"
-										className="hidden rounded-full border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-4 text-[11px] uppercase tracking-[0.12em] sm:inline-flex"
+										className="hidden h-9 rounded-full px-3 text-[11px] uppercase tracking-[0.12em] sm:inline-flex"
 										data-testid="global-settings-open-desktop"
 									>
 										Settings
 									</Button>
 								</DialogTrigger>
-								<DialogContent className="border-[var(--lilac-border)] bg-[var(--lilac-surface)] sm:max-w-lg">
-									<DialogHeader>
+								<DialogContent className="max-h-[88dvh] overflow-hidden border-[var(--lilac-border)] bg-[var(--lilac-surface)] p-0 sm:max-w-lg">
+									<DialogHeader className="border-[var(--lilac-border)] border-b px-5 pt-5 pb-4">
 										<DialogTitle className="text-[var(--lilac-ink)]">Settings</DialogTitle>
 										<DialogDescription className="text-[var(--lilac-ink-muted)]">
-											Voice controls and connection diagnostics.
+											Audio, chat behavior, and diagnostics.
 										</DialogDescription>
 									</DialogHeader>
-									<GlobalSettingsContent
-										connectionState={connectionState}
-										errorMessage={errorMessage}
-										setVoiceInputEnabled={setVoiceInputEnabled}
-										statusMessage={statusMessage}
-										voiceInputEnabled={voiceInputEnabled}
-									/>
+									<div className="overflow-y-auto px-5 py-4">
+										<UnifiedSettingsContent
+											chatInstructions={chatInstructions}
+											chatSpeechOutputEnabled={chatSpeechOutputEnabled}
+											chatTurnDelaySeconds={chatTurnDelaySeconds}
+											connectionState={connectionState}
+											draftInstructions={draftInstructions}
+											draftTurnDelaySeconds={draftTurnDelaySeconds}
+											errorMessage={errorMessage}
+											mode={mode}
+											onDraftInstructionsChange={setDraftInstructions}
+											onDraftTurnDelayChange={setDraftTurnDelaySeconds}
+											onResetChatSettings={resetChatSettings}
+											onSaveChatSettings={saveChatSettings}
+											saveMessage={saveMessage}
+											setChatSpeechOutputEnabled={setChatSpeechOutputEnabled}
+											setVoiceInputEnabled={setVoiceInputEnabled}
+											statusMessage={statusMessage}
+											voiceInputEnabled={voiceInputEnabled}
+										/>
+									</div>
 								</DialogContent>
 							</Dialog>
 
@@ -169,7 +367,7 @@ export default function ModeShell() {
 									<Button
 										type="button"
 										variant="outline"
-										className="rounded-full border-[var(--lilac-border)] bg-[var(--lilac-elevated)] px-4 text-[11px] uppercase tracking-[0.12em] sm:hidden"
+										className="h-9 rounded-full px-3 text-[11px] uppercase tracking-[0.12em] sm:hidden"
 										data-testid="global-settings-open-mobile"
 									>
 										Settings
@@ -182,12 +380,24 @@ export default function ModeShell() {
 									<SheetHeader className="pb-2 text-left">
 										<SheetTitle className="text-[var(--lilac-ink)]">Settings</SheetTitle>
 										<SheetDescription className="text-[var(--lilac-ink-muted)]">
-											Voice controls and connection diagnostics.
+											Audio, chat behavior, and diagnostics.
 										</SheetDescription>
 									</SheetHeader>
-									<GlobalSettingsContent
+									<UnifiedSettingsContent
+										chatInstructions={chatInstructions}
+										chatSpeechOutputEnabled={chatSpeechOutputEnabled}
+										chatTurnDelaySeconds={chatTurnDelaySeconds}
 										connectionState={connectionState}
+										draftInstructions={draftInstructions}
+										draftTurnDelaySeconds={draftTurnDelaySeconds}
 										errorMessage={errorMessage}
+										mode={mode}
+										onDraftInstructionsChange={setDraftInstructions}
+										onDraftTurnDelayChange={setDraftTurnDelaySeconds}
+										onResetChatSettings={resetChatSettings}
+										onSaveChatSettings={saveChatSettings}
+										saveMessage={saveMessage}
+										setChatSpeechOutputEnabled={setChatSpeechOutputEnabled}
 										setVoiceInputEnabled={setVoiceInputEnabled}
 										statusMessage={statusMessage}
 										voiceInputEnabled={voiceInputEnabled}
diff --git a/src/app/(app)/TranslateMode.tsx b/src/app/(app)/TranslateMode.tsx
index 9bde451..77abb4b 100644
--- a/src/app/(app)/TranslateMode.tsx
+++ b/src/app/(app)/TranslateMode.tsx
@@ -4,15 +4,24 @@ import { ArrowRightLeft } from 'lucide-react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger
+} from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue
-} from '@/components/ui/select'
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle,
+	SheetTrigger
+} from '@/components/ui/sheet'
 import { Textarea } from '@/components/ui/textarea'
 import {
 	languageCatalog,
@@ -40,33 +49,44 @@ function buildLanguageList(): Array<{ code: string; label: string }> {
 
 const orderedLanguageList = buildLanguageList()
 
-type LanguageSelectProps = {
-	customCodeDraft: string
+type LanguagePickerFieldProps = {
+	customCodeValue: string
 	label: string
 	onChange: (nextLanguageCode: string) => void
-	onCustomCodeDraftChange: (value: string) => void
+	onCustomCodeValueChange: (value: string) => void
 	testId: string
 	value: string
 }
 
-function LanguageSelect({
-	customCodeDraft,
+function LanguagePickerField({
+	customCodeValue,
 	label,
 	onChange,
-	onCustomCodeDraftChange,
+	onCustomCodeValueChange,
 	testId,
 	value
-}: LanguageSelectProps) {
-	const knownCodeSet = useMemo(
-		() => new Set(orderedLanguageList.map(languageOption => languageOption.code)),
-		[]
-	)
-	const selectValue = knownCodeSet.has(value) ? value : '__custom__'
+}: LanguagePickerFieldProps) {
+	const [searchValue, setSearchValue] = useState('')
 
-	function applyCustomCodeDraft(): void {
-		const resolvedLanguageCode = resolveLanguageCode(customCodeDraft, value)
+	const filteredLanguageList = useMemo(() => {
+		const normalizedSearchValue = searchValue.trim().toLowerCase()
+		if (!normalizedSearchValue) return orderedLanguageList.slice(0, 14)
+		return orderedLanguageList
+			.filter(languageOption => {
+				const normalizedLabel = languageOption.label.toLowerCase()
+				const normalizedCode = languageOption.code.toLowerCase()
+				return (
+					normalizedLabel.includes(normalizedSearchValue) ||
+					normalizedCode.includes(normalizedSearchValue)
+				)
+			})
+			.slice(0, 18)
+	}, [searchValue])
+
+	function applyCustomCode(): void {
+		const resolvedLanguageCode = resolveLanguageCode(customCodeValue, value)
 		onChange(resolvedLanguageCode)
-		onCustomCodeDraftChange(resolvedLanguageCode)
+		onCustomCodeValueChange(resolvedLanguageCode)
 	}
 
 	return (
@@ -74,40 +94,125 @@ function LanguageSelect({
 			<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
 				{label}
 			</div>
-			<Select
-				value={selectValue}
-				onValueChange={nextValue => {
-					if (nextValue === '__custom__') return
-					onChange(nextValue)
-				}}
-			>
-				<SelectTrigger
-					className="h-11 border-[var(--lilac-border)] bg-[var(--lilac-card-muted)]"
-					data-testid={testId}
-				>
-					<SelectValue />
-				</SelectTrigger>
-				<SelectContent className="max-h-[50dvh]">
-					{orderedLanguageList.map(languageOption => (
-						<SelectItem key={languageOption.code} value={languageOption.code}>
-							{languageOption.label}
-						</SelectItem>
-					))}
-					<SelectItem value="__custom__">Custom code</SelectItem>
-				</SelectContent>
-			</Select>
 			<Input
-				value={customCodeDraft}
-				onChange={event => onCustomCodeDraftChange(event.target.value)}
-				onBlur={applyCustomCodeDraft}
-				onKeyDown={event => {
-					if (event.key !== 'Enter') return
-					event.preventDefault()
-					applyCustomCodeDraft()
-				}}
-				placeholder="Any language code (e.g., uk, yue, pt-BR)"
+				value={searchValue}
+				onChange={event => setSearchValue(event.target.value)}
+				placeholder="Search language"
 				className="h-10 border-[var(--lilac-border)] bg-[var(--lilac-card-muted)]"
-				aria-label={`${label} custom language code`}
+				aria-label={`${label} search`}
+				data-testid={`${testId}-search`}
+			/>
+			<ScrollArea className="h-44 rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)]">
+				<div className="p-1">
+					{filteredLanguageList.map(languageOption => {
+						const isActive = value === languageOption.code
+						return (
+							<button
+								key={`${label}-${languageOption.code}`}
+								type="button"
+								onClick={() => onChange(languageOption.code)}
+								className={`flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm transition-colors ${
+									isActive
+										? 'bg-[var(--lilac-brand-primary)] text-[var(--lilac-brand-primary-foreground)]'
+										: 'text-[var(--lilac-ink)] hover:bg-[var(--lilac-card)]'
+								}`}
+								data-testid={`${testId}-option-${languageOption.code.toLowerCase()}`}
+							>
+								<span>{languageOption.label}</span>
+								<span className={isActive ? 'opacity-90' : 'text-[var(--lilac-ink-muted)]'}>
+									{languageOption.code}
+								</span>
+							</button>
+						)
+					})}
+				</div>
+			</ScrollArea>
+
+			<div className="flex items-center gap-2">
+				<Input
+					value={customCodeValue}
+					onChange={event => onCustomCodeValueChange(event.target.value)}
+					onKeyDown={event => {
+						if (event.key !== 'Enter') return
+						event.preventDefault()
+						applyCustomCode()
+					}}
+					placeholder="Any language code (e.g. uk, yue, pt-BR)"
+					className="h-10 border-[var(--lilac-border)] bg-[var(--lilac-card-muted)]"
+					aria-label={`${label} custom language code`}
+				/>
+				<Button type="button" variant="outline" onClick={applyCustomCode} className="h-10">
+					Apply
+				</Button>
+			</div>
+		</div>
+	)
+}
+
+type LanguagePickerContentProps = {
+	myLanguageCodeDraft: string
+	onMyLanguageCodeDraftChange: (value: string) => void
+	onTranslateToLanguageCodeDraftChange: (value: string) => void
+	setTranslateSettings: (value: { myLanguageCode: string; translateToLanguageCode: string }) => void
+	translateSettings: { myLanguageCode: string; translateToLanguageCode: string }
+	translateToLanguageCodeDraft: string
+}
+
+function LanguagePickerContent({
+	myLanguageCodeDraft,
+	onMyLanguageCodeDraftChange,
+	onTranslateToLanguageCodeDraftChange,
+	setTranslateSettings,
+	translateSettings,
+	translateToLanguageCodeDraft
+}: LanguagePickerContentProps) {
+	function updateMyLanguage(nextLanguageCode: string): void {
+		const resolvedMyLanguageCode = resolveLanguageCode(
+			nextLanguageCode,
+			translateSettings.myLanguageCode
+		)
+		let resolvedTranslateToLanguageCode = translateSettings.translateToLanguageCode
+		if (resolvedMyLanguageCode === resolvedTranslateToLanguageCode) {
+			resolvedTranslateToLanguageCode = translateSettings.myLanguageCode
+		}
+		setTranslateSettings({
+			myLanguageCode: resolvedMyLanguageCode,
+			translateToLanguageCode: resolvedTranslateToLanguageCode
+		})
+	}
+
+	function updateTranslateToLanguage(nextLanguageCode: string): void {
+		const resolvedTranslateToLanguageCode = resolveLanguageCode(
+			nextLanguageCode,
+			translateSettings.translateToLanguageCode
+		)
+		let resolvedMyLanguageCode = translateSettings.myLanguageCode
+		if (resolvedMyLanguageCode === resolvedTranslateToLanguageCode) {
+			resolvedMyLanguageCode = translateSettings.translateToLanguageCode
+		}
+		setTranslateSettings({
+			myLanguageCode: resolvedMyLanguageCode,
+			translateToLanguageCode: resolvedTranslateToLanguageCode
+		})
+	}
+
+	return (
+		<div className="space-y-4">
+			<LanguagePickerField
+				customCodeValue={myLanguageCodeDraft}
+				label="I Speak"
+				onChange={updateMyLanguage}
+				onCustomCodeValueChange={onMyLanguageCodeDraftChange}
+				testId="translate-primary-language"
+				value={translateSettings.myLanguageCode}
+			/>
+			<LanguagePickerField
+				customCodeValue={translateToLanguageCodeDraft}
+				label="Translate To"
+				onChange={updateTranslateToLanguage}
+				onCustomCodeValueChange={onTranslateToLanguageCodeDraftChange}
+				testId="translate-secondary-language"
+				value={translateSettings.translateToLanguageCode}
 			/>
 		</div>
 	)
@@ -178,36 +283,6 @@ export default function TranslateMode() {
 		setDraftMessage('')
 	}
 
-	function updateMyLanguage(nextLanguageCode: string): void {
-		const resolvedMyLanguageCode = resolveLanguageCode(
-			nextLanguageCode,
-			translateSettings.myLanguageCode
-		)
-		let resolvedTranslateToLanguageCode = translateSettings.translateToLanguageCode
-		if (resolvedMyLanguageCode === resolvedTranslateToLanguageCode) {
-			resolvedTranslateToLanguageCode = translateSettings.myLanguageCode
-		}
-		setTranslateSettings({
-			myLanguageCode: resolvedMyLanguageCode,
-			translateToLanguageCode: resolvedTranslateToLanguageCode
-		})
-	}
-
-	function updateTranslateToLanguage(nextLanguageCode: string): void {
-		const resolvedTranslateToLanguageCode = resolveLanguageCode(
-			nextLanguageCode,
-			translateSettings.translateToLanguageCode
-		)
-		let resolvedMyLanguageCode = translateSettings.myLanguageCode
-		if (resolvedMyLanguageCode === resolvedTranslateToLanguageCode) {
-			resolvedMyLanguageCode = translateSettings.translateToLanguageCode
-		}
-		setTranslateSettings({
-			myLanguageCode: resolvedMyLanguageCode,
-			translateToLanguageCode: resolvedTranslateToLanguageCode
-		})
-	}
-
 	function swapLanguages(): void {
 		setTranslateSettings({
 			myLanguageCode: translateSettings.translateToLanguageCode,
@@ -221,74 +296,114 @@ export default function TranslateMode() {
 
 	return (
 		<div className="flex min-h-0 flex-1 flex-col gap-3 overflow-hidden">
-			<div className="space-y-3 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] p-3">
-				<div className="flex items-center justify-between gap-3">
-					<div>
-						<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
-							Language Pair
-						</div>
-						<p className="font-medium text-[var(--lilac-ink)] text-sm">{pairSummary}</p>
+			<div className="flex items-center justify-between rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] px-3 py-2">
+				<div className="min-w-0">
+					<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
+						Language Pair
 					</div>
+					<p className="truncate font-medium text-[var(--lilac-ink)] text-sm">{pairSummary}</p>
+				</div>
+				<div className="flex items-center gap-2">
 					<Button
 						type="button"
 						variant="outline"
 						onClick={swapLanguages}
-						className="rounded-full border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] px-3"
+						className="h-9 rounded-full px-3"
 						aria-label="Swap language pair"
 					>
 						<ArrowRightLeft className="h-4 w-4" />
 					</Button>
-				</div>
 
-				<div className="grid gap-3 sm:grid-cols-2">
-					<LanguageSelect
-						customCodeDraft={myLanguageCodeDraft}
-						label="I Speak"
-						onChange={updateMyLanguage}
-						onCustomCodeDraftChange={setMyLanguageCodeDraft}
-						testId="translate-primary-language"
-						value={translateSettings.myLanguageCode}
-					/>
-					<LanguageSelect
-						customCodeDraft={translateToLanguageCodeDraft}
-						label="Translate To"
-						onChange={updateTranslateToLanguage}
-						onCustomCodeDraftChange={setTranslateToLanguageCodeDraft}
-						testId="translate-secondary-language"
-						value={translateSettings.translateToLanguageCode}
-					/>
-				</div>
-			</div>
+					<Dialog>
+						<DialogTrigger asChild>
+							<Button
+								type="button"
+								variant="outline"
+								className="hidden h-9 rounded-full px-3 text-[11px] uppercase tracking-[0.12em] sm:inline-flex"
+								data-testid="translate-language-picker-open-desktop"
+							>
+								Languages
+							</Button>
+						</DialogTrigger>
+						<DialogContent className="max-h-[88dvh] overflow-hidden border-[var(--lilac-border)] bg-[var(--lilac-surface)] p-0 sm:max-w-xl">
+							<DialogHeader className="border-[var(--lilac-border)] border-b px-5 pt-5 pb-4">
+								<DialogTitle className="text-[var(--lilac-ink)]">Languages</DialogTitle>
+								<DialogDescription className="text-[var(--lilac-ink-muted)]">
+									Pick from presets or enter any valid language code.
+								</DialogDescription>
+							</DialogHeader>
+							<div className="overflow-y-auto px-5 py-4">
+								<LanguagePickerContent
+									myLanguageCodeDraft={myLanguageCodeDraft}
+									onMyLanguageCodeDraftChange={setMyLanguageCodeDraft}
+									onTranslateToLanguageCodeDraftChange={setTranslateToLanguageCodeDraft}
+									setTranslateSettings={setTranslateSettings}
+									translateSettings={translateSettings}
+									translateToLanguageCodeDraft={translateToLanguageCodeDraft}
+								/>
+							</div>
+						</DialogContent>
+					</Dialog>
 
-			<div
-				className="rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] px-3 py-2"
-				data-testid="translate-live-subtitle-rail"
-				aria-live="polite"
-			>
-				<div className="flex items-center gap-2 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
-					<span
-						className={`inline-flex h-2 w-2 rounded-full ${
-							liveSubtitleState.isListening
-								? 'animate-pulse bg-[var(--lilac-direction-secondary)]'
-								: 'bg-[var(--lilac-border-strong)]'
-						}`}
-					/>
-					{liveSubtitleState.isListening ? 'Listening…' : 'Listening paused'}
+					<Sheet>
+						<SheetTrigger asChild>
+							<Button
+								type="button"
+								variant="outline"
+								className="h-9 rounded-full px-3 text-[11px] uppercase tracking-[0.12em] sm:hidden"
+								data-testid="translate-language-picker-open-mobile"
+							>
+								Languages
+							</Button>
+						</SheetTrigger>
+						<SheetContent
+							side="bottom"
+							className="max-h-[90dvh] overflow-y-auto rounded-t-2xl border-[var(--lilac-border)] bg-[var(--lilac-surface)] px-4 pb-[max(1rem,env(safe-area-inset-bottom))]"
+						>
+							<SheetHeader className="pb-2 text-left">
+								<SheetTitle className="text-[var(--lilac-ink)]">Languages</SheetTitle>
+								<SheetDescription className="text-[var(--lilac-ink-muted)]">
+									Pick from presets or enter any valid language code.
+								</SheetDescription>
+							</SheetHeader>
+							<LanguagePickerContent
+								myLanguageCodeDraft={myLanguageCodeDraft}
+								onMyLanguageCodeDraftChange={setMyLanguageCodeDraft}
+								onTranslateToLanguageCodeDraftChange={setTranslateToLanguageCodeDraft}
+								setTranslateSettings={setTranslateSettings}
+								translateSettings={translateSettings}
+								translateToLanguageCodeDraft={translateToLanguageCodeDraft}
+							/>
+						</SheetContent>
+					</Sheet>
 				</div>
-				<p className="min-h-6 whitespace-pre-wrap break-words pt-1 text-[var(--lilac-ink)] text-sm">
-					{liveSubtitleState.text || 'Live subtitles appear here while people speak.'}
-				</p>
 			</div>
 
 			<ScrollArea
 				ref={transcriptScrollAreaRef}
 				data-testid="translate-card-list"
-				className="min-h-0 flex-1 rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card)]"
+				className="min-h-0 flex-1 rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)]"
 			>
-				{translateCards.length ? (
-					<div className="flex flex-col gap-3 p-3 sm:p-4">
-						{translateCards.map(card => {
-							const routeLabel = `${resolveLanguageLabel(card.sourceLanguageCode)} -> ${resolveLanguageLabel(
+				<div className="flex flex-col gap-3 p-3 sm:p-4">
+					<div className="px-1 py-1" data-testid="translate-live-subtitle-rail" aria-live="polite">
+						<div className="flex items-center gap-2 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
+							<span
+								className={`inline-flex h-2 w-2 rounded-full ${
+									liveSubtitleState.isListening
+										? 'animate-pulse bg-[var(--lilac-direction-secondary)]'
+										: 'bg-[var(--lilac-border-strong)]'
+								}`}
+							/>
+							{liveSubtitleState.isListening ? 'Listening' : 'Ready'}
+						</div>
+						<p className="min-h-6 whitespace-pre-wrap break-words pt-1 text-[var(--lilac-ink)] text-sm">
+							{liveSubtitleState.text || 'Live subtitles appear here while people speak.'}
+						</p>
+					</div>
+
+					{translateCards.length ? (
+						translateCards.map(card => {
+							const routeLabel = `${resolveLanguageLabel(card.sourceLanguageCode)} → ${resolveLanguageLabel(
 								card.targetLanguageCode
 							)}`
 							const isTranslating = card.status === 'streaming' || card.status === 'translating'
@@ -296,11 +411,11 @@ export default function TranslateMode() {
 								<article
 									key={card.id}
 									data-testid={`translate-card-${card.id}`}
-									className="rounded-2xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] p-3"
+									className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] p-3"
 								>
 									<div className="mb-2 flex items-center justify-between gap-2">
 										<div
-											className="font-semibold text-xs tracking-[0.06em]"
+											className="font-semibold text-sm tracking-[0.03em]"
 											style={{ color: getDirectionColor(card.direction) }}
 										>
 											{routeLabel}
@@ -344,20 +459,20 @@ export default function TranslateMode() {
 									</div>
 								</article>
 							)
-						})}
-					</div>
-				) : (
-					<div
-						className="flex min-h-56 items-center justify-center px-4 py-6 text-[var(--lilac-ink-muted)] text-sm"
-						data-testid="translate-empty-state"
-					>
-						Translated subtitles appear here.
-					</div>
-				)}
+						})
+					) : (
+						<div
+							className="flex min-h-44 items-center justify-center px-4 py-6 text-[var(--lilac-ink-muted)] text-sm"
+							data-testid="translate-empty-state"
+						>
+							Translated subtitles appear here.
+						</div>
+					)}
+				</div>
 			</ScrollArea>
 
 			<form
-				className="rounded-2xl border border-[var(--lilac-border)] bg-[color-mix(in_oklab,var(--lilac-card)_84%,transparent)] p-2"
+				className="rounded-xl border border-[var(--lilac-border)] bg-[color-mix(in_oklab,var(--lilac-card)_84%,transparent)] p-2"
 				onSubmit={event => {
 					event.preventDefault()
 					submitMessage()
@@ -382,7 +497,7 @@ export default function TranslateMode() {
 						type="submit"
 						data-testid="translate-text-send"
 						disabled={!draftMessage.trim()}
-						className="h-11 rounded-xl bg-[var(--lilac-brand-primary)] px-4 font-semibold text-[var(--lilac-brand-primary-foreground)] text-xs uppercase tracking-[0.1em]"
+						className="h-11 rounded-xl px-4 font-semibold text-xs uppercase tracking-[0.1em]"
 					>
 						Send
 					</Button>
diff --git a/src/app/actions/realtime.ts b/src/app/actions/realtime.ts
index 888ba1f..5f0d08e 100644
--- a/src/app/actions/realtime.ts
+++ b/src/app/actions/realtime.ts
@@ -219,12 +219,13 @@ export async function createRealtimeTranscriptionSessionAction(input: unknown):
 	value: string
 }> {
 	const parsedInput = CreateRealtimeTranscriptionSessionActionInputSchema.parse(input)
+	void parsedInput
 
 	const payload = await postOpenAi('/realtime/transcription_sessions', {
 		input_audio_format: 'pcm16',
 		input_audio_transcription: {
 			model: defaultTranscriptionModel,
-			prompt: `Likely conversation languages: ${parsedInput.myLanguageCode} and ${parsedInput.translateToLanguageCode}. Keep proper nouns and punctuation.`
+			prompt: 'Transcribe spoken audio faithfully. Preserve punctuation and proper nouns.'
 		},
 		turn_detection: {
 			eagerness: 'high',
diff --git a/src/app/styles.css b/src/app/styles.css
index ccf2081..65bf65a 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -18,6 +18,8 @@
 	--lilac-brand-primary-foreground: #f9f5ec;
 	--lilac-direction-primary: #5f43be;
 	--lilac-direction-secondary: #2f6dd8;
+	--lilac-button-disabled-bg: color-mix(in oklab, var(--lilac-brand-primary) 22%, white 78%);
+	--lilac-button-disabled-fg: color-mix(in oklab, var(--lilac-ink) 62%, white 38%);
 
 	--background: var(--lilac-surface);
 	--foreground: var(--lilac-ink);
@@ -67,6 +69,8 @@
 		--lilac-brand-primary-foreground: #140f23;
 		--lilac-direction-primary: #a996ff;
 		--lilac-direction-secondary: #8cc2ff;
+		--lilac-button-disabled-bg: color-mix(in oklab, #2a2140 78%, #54468a 22%);
+		--lilac-button-disabled-fg: color-mix(in oklab, #f6f1ff 52%, #b9aacd 48%);
 
 		--background: var(--lilac-surface);
 		--foreground: var(--lilac-ink);
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 67463e4..6366cdd 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:border-[var(--lilac-border)] disabled:bg-[var(--lilac-button-disabled-bg)] disabled:text-[var(--lilac-button-disabled-fg)] disabled:shadow-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
 	{
 		defaultVariants: {
 			size: 'default',
@@ -19,7 +19,8 @@ const buttonVariants = cva(
 				sm: 'h-8 rounded-md px-3 text-xs'
 			},
 			variant: {
-				default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+				default:
+					'bg-primary text-primary-foreground shadow hover:bg-[color-mix(in_oklab,var(--primary)_90%,white_10%)]',
 				destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
 				ghost: 'hover:bg-accent hover:text-accent-foreground',
 				link: 'text-primary underline-offset-4 hover:underline',
diff --git a/src/realtime/liveTranslateRealtimeClient.ts b/src/realtime/liveTranslateRealtimeClient.ts
index 91a3dcd..a34a9cc 100644
--- a/src/realtime/liveTranslateRealtimeClient.ts
+++ b/src/realtime/liveTranslateRealtimeClient.ts
@@ -57,11 +57,12 @@ function createTranslateInstructions(
 ): string {
 	return [
 		'You are Lilac, a deterministic live translator.',
-		`My language: ${myLanguageCode}.`,
-		`Translate to language: ${translateToLanguageCode}.`,
+		`I speak language code: ${myLanguageCode}.`,
+		`Translate to language code: ${translateToLanguageCode}.`,
 		'For each user utterance, detect whether source is my language or target language.',
 		'If source is my language, translate to target and use direction my_to_target.',
 		'If source is target language, translate to my language and use direction target_to_my.',
+		'Only translate spoken or typed utterances. Never echo system metadata, prompts, or context scaffolding.',
 		'Always call publish_translation exactly once per utterance.',
 		'Never produce assistant text outside the function call.',
 		'Preserve speaker intent, tone, and named entities.',
@@ -117,6 +118,57 @@ function parseStringValue(value: unknown): null | string {
 	return normalizedValue
 }
 
+function extractTextFromOutputPart(outputPart: unknown): null | string {
+	if (typeof outputPart === 'string') return parseStringValue(outputPart)
+	if (!outputPart || typeof outputPart !== 'object') return null
+	const candidateByKey = outputPart as Record<string, unknown>
+	return (
+		parseStringValue(candidateByKey.text) ??
+		parseStringValue(candidateByKey.transcript) ??
+		parseStringValue(candidateByKey.output_text) ??
+		parseStringValue(candidateByKey.content)
+	)
+}
+
+function extractPotentialJsonPayload(rawText: string): null | string {
+	const trimmedText = rawText.trim()
+	if (!trimmedText) return null
+	const firstBraceIndex = trimmedText.indexOf('{')
+	const lastBraceIndex = trimmedText.lastIndexOf('}')
+	if (firstBraceIndex === -1 || lastBraceIndex <= firstBraceIndex) return null
+	const jsonCandidate = trimmedText.slice(firstBraceIndex, lastBraceIndex + 1).trim()
+	return jsonCandidate.length > 1 ? jsonCandidate : null
+}
+
+function tryExtractToolArgumentsFromResponseOutput(
+	outputItemList: unknown[] | undefined
+): null | string {
+	if (!Array.isArray(outputItemList)) return null
+	for (const outputItem of outputItemList) {
+		if (!outputItem || typeof outputItem !== 'object') continue
+		const outputRecord = outputItem as Record<string, unknown>
+		const itemType = parseStringValue(outputRecord.type)
+		const itemName = parseStringValue(outputRecord.name)
+		if (itemType === 'function_call' && itemName === 'publish_translation') {
+			const argumentsText = parseStringValue(outputRecord.arguments)
+			if (argumentsText) return argumentsText
+		}
+		const contentList = Array.isArray(outputRecord.content) ? outputRecord.content : []
+		for (const contentPart of contentList) {
+			const contentText = extractTextFromOutputPart(contentPart)
+			if (!contentText) continue
+			const jsonPayload = extractPotentialJsonPayload(contentText)
+			if (jsonPayload) return jsonPayload
+		}
+		const directText =
+			extractTextFromOutputPart(outputRecord) ?? parseStringValue(outputRecord.output_text)
+		if (!directText) continue
+		const jsonPayload = extractPotentialJsonPayload(directText)
+		if (jsonPayload) return jsonPayload
+	}
+	return null
+}
+
 export class LiveTranslateRealtimeClient {
 	private callbacks: LiveTranslateRealtimeClientCallbacks
 	private completedToolArgumentsByResponseId = new Map<string, string>()
@@ -299,8 +351,11 @@ export class LiveTranslateRealtimeClient {
 			? (this.completedToolArgumentsByResponseId.get(responseId) ?? null)
 			: null
 		if (responseId) this.completedToolArgumentsByResponseId.delete(responseId)
+		const inferredToolArguments = tryExtractToolArgumentsFromResponseOutput(response.output)
 		const toolArguments =
-			typeof functionCall?.arguments === 'string' ? functionCall.arguments : fallbackToolArguments
+			(typeof functionCall?.arguments === 'string' ? functionCall.arguments : null) ??
+			fallbackToolArguments ??
+			inferredToolArguments
 
 		if (!toolArguments) {
 			if (responseStatus && responseStatus !== 'completed') return
@@ -428,6 +483,8 @@ export class LiveTranslateRealtimeClient {
 			response: {
 				conversation: 'none',
 				input: this.buildResponseInput(itemId),
+				instructions:
+					'Translate the referenced user item and call publish_translation exactly once. Do not return plain assistant text.',
 				metadata: {
 					input_origin: inputOrigin,
 					request_id: requestId,
diff --git a/src/realtime/modeRuntimeStore.tsx b/src/realtime/modeRuntimeStore.tsx
index 8afa9d4..78a5fda 100644
--- a/src/realtime/modeRuntimeStore.tsx
+++ b/src/realtime/modeRuntimeStore.tsx
@@ -19,13 +19,16 @@ import {
 	type TranslateInputPayload
 } from '@/realtime/liveTranslateRealtimeClient'
 import { defaultChatRealtimeModel } from '@/realtime/modelConfig'
+import { SystemLeakTextSchema } from '@/realtime/schemas'
 import type {
 	ChatOutputSettings,
 	ChatTranscriptMessage,
+	ConnectionHealthState,
 	GlobalAudioInputSettings,
 	LilacMode,
 	LiveSubtitleState,
 	ModeConnectionState,
+	TranslateSegmentAggregationState,
 	TranslateSettings,
 	UtteranceCard,
 	UtteranceDirection
@@ -58,6 +61,20 @@ const defaultLiveSubtitleState: LiveSubtitleState = {
 	updatedAt: 0
 }
 
+const defaultTranslateSegmentAggregationState: TranslateSegmentAggregationState = {
+	activeUtteranceId: null,
+	lastFinalizedAt: null,
+	pendingSourceText: '',
+	sourceLanguageCode: null
+}
+
+const defaultConnectionHealthState: ConnectionHealthState = {
+	isReconnecting: false,
+	lastErrorAt: null,
+	subtitleConnected: false,
+	translateConnected: false
+}
+
 const storageKeys = {
 	chatInstructions: 'lilac.chat.instructions',
 	chatSpeechOutputEnabled: 'lilac.chat.speechOutputEnabled',
@@ -77,6 +94,13 @@ type PendingTranslateInput = TranslateInputPayload & {
 	previousItemId?: null | string
 }
 
+const subtitleAggregationSilenceMilliseconds = 1200
+const reconnectStatusGraceMilliseconds = 1500
+const subtitleDedupRoundedTimeWindowMilliseconds = 700
+const systemLeakMatcherList = SystemLeakTextSchema.parse(undefined).map(matcher =>
+	matcher.toLowerCase()
+)
+
 function normalizeTurnDelaySeconds(value: unknown): number {
 	const parsedValue = typeof value === 'number' ? value : Number.parseFloat(String(value))
 	if (!Number.isFinite(parsedValue)) return 1.2
@@ -90,6 +114,34 @@ function parseStoredBoolean(value: null | string, fallbackValue: boolean): boole
 	return fallbackValue
 }
 
+function normalizeWhitespace(value: string): string {
+	return value.replace(/\s+/g, ' ').trim()
+}
+
+function shouldDropSubtitleText(value: string): boolean {
+	const normalizedValue = normalizeWhitespace(value).toLowerCase()
+	if (!normalizedValue) return true
+	for (const matcher of systemLeakMatcherList) {
+		if (normalizedValue.includes(matcher)) return true
+	}
+	if (normalizedValue === 'context') return true
+	if (normalizedValue === 'context:') return true
+	return false
+}
+
+function joinUtteranceText(currentText: string, nextText: string): string {
+	const normalizedCurrentText = currentText.trim()
+	const normalizedNextText = nextText.trim()
+	if (!normalizedCurrentText) return normalizedNextText
+	if (!normalizedNextText) return normalizedCurrentText
+	const currentEndsWithSpace = /\s$/.test(currentText)
+	const nextStartsWithPunctuation = /^[,.;:!?)]/.test(normalizedNextText)
+	if (currentEndsWithSpace || nextStartsWithPunctuation) {
+		return `${normalizedCurrentText}${normalizedNextText}`
+	}
+	return `${normalizedCurrentText} ${normalizedNextText}`
+}
+
 function sanitizeTranslateSettings(input: Partial<TranslateSettings> | null): TranslateSettings {
 	const myLanguageCode = resolveLanguageCode(
 		input?.myLanguageCode ?? '',
@@ -153,8 +205,9 @@ function insertCardByPreviousItemId(
 
 function upsertChatTranscript(
 	existingList: ChatTranscriptMessage[],
-	patch: ChatTranscriptPatch
-): ChatTranscriptMessage[] {
+	patch: ChatTranscriptPatch,
+	nextSequenceNumber: number
+): { list: ChatTranscriptMessage[]; nextSequenceNumber: number } {
 	const existingIndex = existingList.findIndex(item => item.id === patch.id)
 	const existingItem = existingIndex >= 0 ? existingList[existingIndex] : null
 
@@ -163,7 +216,10 @@ function upsertChatTranscript(
 		existingItem.source === 'response_output_text' &&
 		patch.source === 'response_output_audio_transcript'
 	) {
-		return existingList
+		return {
+			list: existingList,
+			nextSequenceNumber
+		}
 	}
 
 	const updatedText =
@@ -172,6 +228,7 @@ function upsertChatTranscript(
 			: `${existingItem?.text ?? ''}${patch.appendText ?? ''}`
 
 	const nextItem: ChatTranscriptMessage = {
+		clientSequence: existingItem?.clientSequence ?? nextSequenceNumber,
 		createdAt: existingItem?.createdAt ?? Date.now(),
 		id: patch.id,
 		role: patch.role,
@@ -181,12 +238,24 @@ function upsertChatTranscript(
 	}
 
 	if (existingIndex === -1) {
-		return [...existingList, nextItem]
+		const nextList = [...existingList, nextItem].sort(
+			(left, right) => left.clientSequence - right.clientSequence || left.createdAt - right.createdAt
+		)
+		return {
+			list: nextList,
+			nextSequenceNumber: nextSequenceNumber + 1
+		}
 	}
 
 	const nextList = existingList.slice()
 	nextList[existingIndex] = nextItem
-	return nextList
+	nextList.sort(
+		(left, right) => left.clientSequence - right.clientSequence || left.createdAt - right.createdAt
+	)
+	return {
+		list: nextList,
+		nextSequenceNumber
+	}
 }
 
 function applyTranslateResultPatch(
@@ -202,12 +271,18 @@ function applyTranslateResultPatch(
 			})()
 		: createEmptyUtteranceCard(patch.itemId, patch.inputOrigin, translateSettings)
 
+	const normalizedSourceText = normalizeWhitespace(patch.sourceText)
+	const safeSourceText =
+		normalizedSourceText && !shouldDropSubtitleText(normalizedSourceText)
+			? normalizedSourceText
+			: (existingCard?.sourceText ?? '')
+
 	const nextCard: UtteranceCard = {
 		...baseCard,
 		direction: patch.direction,
 		inputOrigin: patch.inputOrigin,
 		sourceLanguageCode: normalizeLanguageCode(patch.sourceLanguageCode),
-		sourceText: patch.sourceText.trim() ? patch.sourceText : (existingCard?.sourceText ?? ''),
+		sourceText: safeSourceText,
 		status: patch.status,
 		targetLanguageCode: normalizeLanguageCode(patch.targetLanguageCode),
 		translatedText: patch.translatedText,
@@ -218,25 +293,6 @@ function applyTranslateResultPatch(
 	return insertCardByPreviousItemId(cardList, nextCard)
 }
 
-function createSourceCardFromFinalSubtitle(
-	patch: SubtitleFinalPatch,
-	translateSettings: TranslateSettings
-): UtteranceCard {
-	const normalizedSourceText = patch.text.trim()
-	return {
-		createdAt: Date.now(),
-		direction: 'my_to_target',
-		id: patch.itemId,
-		inputOrigin: 'audio',
-		sourceItemId: patch.itemId,
-		sourceLanguageCode: translateSettings.myLanguageCode,
-		sourceText: normalizedSourceText,
-		status: 'translating',
-		targetLanguageCode: translateSettings.translateToLanguageCode,
-		translatedText: ''
-	}
-}
-
 function getDirectionColorClass(direction: UtteranceDirection): string {
 	switch (direction) {
 		case 'my_to_target':
@@ -328,6 +384,9 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	)
 	const [chatOutputSettings, setChatOutputSettings] =
 		useState<ChatOutputSettings>(defaultChatOutputSettings)
+	const [connectionHealth, setConnectionHealth] = useState<ConnectionHealthState>(
+		defaultConnectionHealthState
+	)
 	const [remoteAudioStream, setRemoteAudioStream] = useState<MediaStream | null>(null)
 	const [chatChannelState, setChatChannelState] = useState<ChannelConnectionState>('disconnected')
 	const [translateChannelState, setTranslateChannelState] =
@@ -350,7 +409,14 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	const isOnlineRef = useRef(true)
 
 	const pendingTranslateInputQueueRef = useRef<PendingTranslateInput[]>([])
+	const chatTranscriptSequenceRef = useRef(1)
+	const subtitleDedupKeyTimestampByKeyRef = useRef<Map<string, number>>(new Map())
+	const translateSegmentAggregationStateRef = useRef<TranslateSegmentAggregationState>(
+		defaultTranslateSegmentAggregationState
+	)
+	const translateAggregationFlushTimerRef = useRef<null | number>(null)
 	const reconnectTimerByChannelRef = useRef<Partial<Record<RuntimeChannel, number>>>({})
+	const reconnectStatusTimerRef = useRef<null | number>(null)
 	const scheduleReconnectRef = useRef<(channel: RuntimeChannel) => void>(() => {})
 	const reconnectAttemptByChannelRef = useRef<Record<RuntimeChannel, number>>({
 		chat: 0,
@@ -370,6 +436,12 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		delete reconnectTimerByChannelRef.current[channel]
 	}, [])
 
+	const clearTranslateAggregationFlushTimer = useCallback(() => {
+		if (typeof translateAggregationFlushTimerRef.current !== 'number') return
+		window.clearTimeout(translateAggregationFlushTimerRef.current)
+		translateAggregationFlushTimerRef.current = null
+	}, [])
+
 	const stopChatClient = useCallback(() => {
 		intentionalStopByChannelRef.current.chat = true
 		chatClientRef.current?.stop()
@@ -394,6 +466,8 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		intentionalStopByChannelRef.current.subtitle = true
 		void subtitleClientRef.current?.stop()
 		subtitleClientRef.current = null
+		clearTranslateAggregationFlushTimer()
+		translateSegmentAggregationStateRef.current = defaultTranslateSegmentAggregationState
 		setSubtitleChannelState('disconnected')
 		setLiveSubtitleState(previousState => ({
 			...previousState,
@@ -405,7 +479,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		queueMicrotask(() => {
 			intentionalStopByChannelRef.current.subtitle = false
 		})
-	}, [])
+	}, [clearTranslateAggregationFlushTimer])
 
 	const stopAllClients = useCallback(() => {
 		stopChatClient()
@@ -418,8 +492,12 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		setChatTranscripts([])
 		setTranslateCards([])
 		setLiveSubtitleState(defaultLiveSubtitleState)
+		translateSegmentAggregationStateRef.current = defaultTranslateSegmentAggregationState
+		subtitleDedupKeyTimestampByKeyRef.current.clear()
+		chatTranscriptSequenceRef.current = 1
+		clearTranslateAggregationFlushTimer()
 		pendingTranslateInputQueueRef.current = []
-	}, [])
+	}, [clearTranslateAggregationFlushTimer])
 
 	const shouldRunChannelForMode = useCallback(
 		(channel: RuntimeChannel, activeMode: LilacMode): boolean => {
@@ -447,44 +525,142 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 
 	const enqueueTranslateInput = useCallback(
 		(input: PendingTranslateInput) => {
-			const alreadyQueued = pendingTranslateInputQueueRef.current.some(
+			const existingIndex = pendingTranslateInputQueueRef.current.findIndex(
 				queuedInput => queuedInput.itemId === input.itemId
 			)
-			if (alreadyQueued) return
+			if (existingIndex >= 0) {
+				pendingTranslateInputQueueRef.current[existingIndex] = input
+				flushPendingTranslateInputs()
+				return
+			}
 			pendingTranslateInputQueueRef.current.push(input)
 			flushPendingTranslateInputs()
 		},
 		[flushPendingTranslateInputs]
 	)
 
+	const flushTranslateSegmentAggregation = useCallback(() => {
+		const aggregateState = translateSegmentAggregationStateRef.current
+		const activeUtteranceId = aggregateState.activeUtteranceId
+		const normalizedText = normalizeWhitespace(aggregateState.pendingSourceText)
+		if (!activeUtteranceId || !normalizedText) {
+			translateSegmentAggregationStateRef.current = defaultTranslateSegmentAggregationState
+			return
+		}
+
+		setTranslateCards(previousCards =>
+			previousCards.map(card => {
+				if (card.id !== activeUtteranceId) return card
+				return {
+					...card,
+					sourceText: normalizedText,
+					status: 'translating'
+				}
+			})
+		)
+		enqueueTranslateInput({
+			inputOrigin: 'audio',
+			itemId: activeUtteranceId,
+			text: normalizedText
+		})
+		translateSegmentAggregationStateRef.current = defaultTranslateSegmentAggregationState
+		setLiveSubtitleState(previousState => ({
+			...previousState,
+			activeSegmentId: null,
+			text: '',
+			updatedAt: Date.now()
+		}))
+	}, [enqueueTranslateInput])
+
+	const scheduleTranslateSegmentAggregationFlush = useCallback(() => {
+		clearTranslateAggregationFlushTimer()
+		translateAggregationFlushTimerRef.current = window.setTimeout(() => {
+			translateAggregationFlushTimerRef.current = null
+			flushTranslateSegmentAggregation()
+		}, subtitleAggregationSilenceMilliseconds)
+	}, [clearTranslateAggregationFlushTimer, flushTranslateSegmentAggregation])
+
 	const handleTranslateSubtitleFinalPatch = useCallback(
 		(patch: SubtitleFinalPatch) => {
-			if (!patch.text.trim()) return
-			setTranslateCards(previousCards => {
-				const existingCard = previousCards.find(card => card.id === patch.itemId)
-				if (existingCard) return previousCards
-				const nextCard = createSourceCardFromFinalSubtitle(patch, translateSettingsRef.current)
-				return insertCardByPreviousItemId(previousCards, nextCard, patch.previousItemId)
-			})
-			enqueueTranslateInput({
-				inputOrigin: 'audio',
-				itemId: patch.itemId,
-				text: patch.text,
-				...(patch.previousItemId === null || typeof patch.previousItemId === 'string'
-					? { previousItemId: patch.previousItemId }
-					: {})
+			const normalizedText = normalizeWhitespace(patch.text)
+			if (!normalizedText) return
+			if (shouldDropSubtitleText(normalizedText)) return
+
+			const now = Date.now()
+			const roundedTimestamp =
+				Math.round(now / subtitleDedupRoundedTimeWindowMilliseconds) *
+				subtitleDedupRoundedTimeWindowMilliseconds
+			const dedupeKey = `${normalizedText.toLowerCase()}::${roundedTimestamp}::${translateSettingsRef.current.myLanguageCode}`
+			const previousTimestamp = subtitleDedupKeyTimestampByKeyRef.current.get(dedupeKey)
+			if (typeof previousTimestamp === 'number' && now - previousTimestamp < 2500) {
+				return
+			}
+			subtitleDedupKeyTimestampByKeyRef.current.set(dedupeKey, now)
+			subtitleDedupKeyTimestampByKeyRef.current.forEach((value, key) => {
+				if (now - value > 10_000) subtitleDedupKeyTimestampByKeyRef.current.delete(key)
 			})
-			setLiveSubtitleState(previousState => {
-				if (previousState.activeSegmentId !== patch.itemId) return previousState
-				return {
-					activeSegmentId: null,
-					isListening: previousState.isListening,
-					text: '',
-					updatedAt: Date.now()
+
+			const aggregateState = translateSegmentAggregationStateRef.current
+			const hasActiveAggregate =
+				aggregateState.activeUtteranceId !== null && aggregateState.pendingSourceText.trim().length > 0
+			const crossedPauseWindow =
+				typeof aggregateState.lastFinalizedAt === 'number' &&
+				now - aggregateState.lastFinalizedAt > subtitleAggregationSilenceMilliseconds
+			if (hasActiveAggregate && crossedPauseWindow) {
+				flushTranslateSegmentAggregation()
+			}
+
+			const refreshedAggregateState = translateSegmentAggregationStateRef.current
+			const shouldCreateUtterance =
+				refreshedAggregateState.activeUtteranceId === null ||
+				!refreshedAggregateState.pendingSourceText.trim()
+			const activeUtteranceId = shouldCreateUtterance
+				? createClientItemId('audio')
+				: (refreshedAggregateState.activeUtteranceId as string)
+			const nextSourceText = shouldCreateUtterance
+				? normalizedText
+				: joinUtteranceText(refreshedAggregateState.pendingSourceText, normalizedText)
+
+			setTranslateCards(previousCards => {
+				const existingCardIndex = previousCards.findIndex(card => card.id === activeUtteranceId)
+				if (existingCardIndex === -1) {
+					const nextCard: UtteranceCard = {
+						...createEmptyUtteranceCard(activeUtteranceId, 'audio', translateSettingsRef.current),
+						sourceLanguageCode: translateSettingsRef.current.myLanguageCode,
+						sourceText: nextSourceText,
+						status: 'streaming'
+					}
+					const previousItemId =
+						patch.previousItemId ??
+						(previousCards.length > 0 ? (previousCards[previousCards.length - 1]?.id ?? null) : null)
+					return insertCardByPreviousItemId(previousCards, nextCard, previousItemId)
 				}
+				const nextCardList = previousCards.slice()
+				const existingCard = nextCardList[existingCardIndex]
+				if (!existingCard) return previousCards
+				nextCardList[existingCardIndex] = {
+					...existingCard,
+					sourceText: nextSourceText,
+					status: 'streaming'
+				}
+				return nextCardList
 			})
+
+			translateSegmentAggregationStateRef.current = {
+				activeUtteranceId,
+				lastFinalizedAt: now,
+				pendingSourceText: nextSourceText,
+				sourceLanguageCode: translateSettingsRef.current.myLanguageCode
+			}
+			setLiveSubtitleState(previousState => ({
+				...previousState,
+				activeSegmentId: activeUtteranceId,
+				text: nextSourceText,
+				updatedAt: now
+			}))
+			scheduleTranslateSegmentAggregationFlush()
 		},
-		[enqueueTranslateInput]
+		[flushTranslateSegmentAggregation, scheduleTranslateSegmentAggregationFlush]
 	)
 
 	const startChatClient = useCallback(() => {
@@ -496,7 +672,6 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				switch (state) {
 					case 'connected':
 						setErrorMessage(null)
-						setStatusMessage(null)
 						reconnectAttemptByChannelRef.current.chat = 0
 						return
 					case 'disconnected':
@@ -510,12 +685,20 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			},
 			onError: message => {
 				setErrorMessage(message)
+				setConnectionHealth(previousState => ({
+					...previousState,
+					lastErrorAt: Date.now()
+				}))
 			},
 			onRemoteStream: stream => {
 				setRemoteAudioStream(stream)
 			},
 			onTranscriptPatch: patch => {
-				setChatTranscripts(previousMessages => upsertChatTranscript(previousMessages, patch))
+				setChatTranscripts(previousMessages => {
+					const result = upsertChatTranscript(previousMessages, patch, chatTranscriptSequenceRef.current)
+					chatTranscriptSequenceRef.current = result.nextSequenceNumber
+					return result.list
+				})
 			}
 		})
 		chatClientRef.current = chatClient
@@ -540,13 +723,6 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 						setErrorMessage(null)
 						reconnectAttemptByChannelRef.current.translate = 0
 						flushPendingTranslateInputs()
-						if (
-							modeRef.current === 'translate' &&
-							subtitleClientRef.current &&
-							subtitleClientRef.current.isConnected()
-						) {
-							setStatusMessage(null)
-						}
 						return
 					case 'disconnected':
 					case 'error':
@@ -559,6 +735,10 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			},
 			onError: message => {
 				setErrorMessage(message)
+				setConnectionHealth(previousState => ({
+					...previousState,
+					lastErrorAt: Date.now()
+				}))
 			},
 			onResultPatch: patch => {
 				setTranslateCards(previousCards =>
@@ -584,13 +764,6 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 					case 'connected':
 						setErrorMessage(null)
 						reconnectAttemptByChannelRef.current.subtitle = 0
-						if (
-							modeRef.current === 'translate' &&
-							liveTranslateClientRef.current &&
-							liveTranslateClientRef.current.isConnected()
-						) {
-							setStatusMessage(null)
-						}
 						return
 					case 'disconnected':
 					case 'error':
@@ -603,6 +776,10 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			},
 			onError: message => {
 				setErrorMessage(message)
+				setConnectionHealth(previousState => ({
+					...previousState,
+					lastErrorAt: Date.now()
+				}))
 			},
 			onListeningStateChange: isListening => {
 				setLiveSubtitleState(previousState => ({
@@ -613,18 +790,20 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			},
 			onSubtitleDelta: patch => {
 				setLiveSubtitleState(previousState => {
-					if (previousState.activeSegmentId !== patch.itemId) {
+					const baseText = previousState.activeSegmentId === patch.itemId ? previousState.text : ''
+					const nextText = `${baseText}${patch.textDelta}`
+					if (shouldDropSubtitleText(nextText)) {
 						return {
 							activeSegmentId: patch.itemId,
 							isListening: true,
-							text: patch.textDelta,
+							text: '',
 							updatedAt: Date.now()
 						}
 					}
 					return {
 						activeSegmentId: patch.itemId,
 						isListening: true,
-						text: `${previousState.text}${patch.textDelta}`,
+						text: nextText,
 						updatedAt: Date.now()
 					}
 				})
@@ -642,7 +821,6 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	const startModeRuntime = useCallback(
 		(nextMode: LilacMode) => {
 			setErrorMessage(null)
-			setStatusMessage(null)
 			switch (nextMode) {
 				case 'chat':
 					startChatClient()
@@ -691,7 +869,6 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			const nextAttempt = reconnectAttemptByChannelRef.current[channel] + 1
 			reconnectAttemptByChannelRef.current[channel] = nextAttempt
 			const reconnectDelayMilliseconds = calculateReconnectDelay(nextAttempt)
-			setStatusMessage('Reconnecting…')
 
 			reconnectTimerByChannelRef.current[channel] = window.setTimeout(() => {
 				delete reconnectTimerByChannelRef.current[channel]
@@ -749,14 +926,19 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		setChatTurnDelaySecondsState(normalizeTurnDelaySeconds(seconds))
 	}, [])
 
-	const setTranslateSettings = useCallback((nextSettings: TranslateSettings) => {
-		const sanitizedSettings = sanitizeTranslateSettings(nextSettings)
-		setTranslateSettingsState(sanitizedSettings)
-		if (modeRef.current === 'translate') {
-			liveTranslateClientRef.current?.updateTranslateSettings(sanitizedSettings)
-			subtitleClientRef.current?.updateSubtitleSettings(sanitizedSettings)
-		}
-	}, [])
+	const setTranslateSettings = useCallback(
+		(nextSettings: TranslateSettings) => {
+			const sanitizedSettings = sanitizeTranslateSettings(nextSettings)
+			clearTranslateAggregationFlushTimer()
+			translateSegmentAggregationStateRef.current = defaultTranslateSegmentAggregationState
+			setTranslateSettingsState(sanitizedSettings)
+			if (modeRef.current === 'translate') {
+				liveTranslateClientRef.current?.updateTranslateSettings(sanitizedSettings)
+				subtitleClientRef.current?.updateSubtitleSettings(sanitizedSettings)
+			}
+		},
+		[clearTranslateAggregationFlushTimer]
+	)
 
 	const setVoiceInputEnabled = useCallback((voiceInputEnabled: boolean) => {
 		setGlobalAudioInputSettings({ voiceInputEnabled })
@@ -958,6 +1140,10 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 
 		function handleOffline(): void {
 			isOnlineRef.current = false
+			if (typeof reconnectStatusTimerRef.current === 'number') {
+				window.clearTimeout(reconnectStatusTimerRef.current)
+				reconnectStatusTimerRef.current = null
+			}
 			setStatusMessage('Offline. Waiting for network…')
 		}
 
@@ -970,6 +1156,84 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		}
 	}, [chatChannelState, scheduleReconnect, subtitleChannelState, translateChannelState])
 
+	useEffect(() => {
+		const nextConnectionHealthState: ConnectionHealthState = {
+			isReconnecting: false,
+			lastErrorAt: connectionHealth.lastErrorAt,
+			subtitleConnected: subtitleChannelState === 'connected',
+			translateConnected: translateChannelState === 'connected'
+		}
+
+		switch (mode) {
+			case 'chat': {
+				nextConnectionHealthState.isReconnecting =
+					chatChannelState !== 'connected' &&
+					(chatChannelState === 'connecting' ||
+						typeof reconnectTimerByChannelRef.current.chat === 'number')
+				break
+			}
+			case 'translate': {
+				nextConnectionHealthState.isReconnecting =
+					(translateChannelState !== 'connected' || subtitleChannelState !== 'connected') &&
+					(translateChannelState === 'connecting' ||
+						subtitleChannelState === 'connecting' ||
+						typeof reconnectTimerByChannelRef.current.translate === 'number' ||
+						typeof reconnectTimerByChannelRef.current.subtitle === 'number')
+				break
+			}
+			default:
+				nextConnectionHealthState.isReconnecting = false
+		}
+
+		setConnectionHealth(nextConnectionHealthState)
+	}, [
+		chatChannelState,
+		connectionHealth.lastErrorAt,
+		mode,
+		subtitleChannelState,
+		translateChannelState
+	])
+
+	useEffect(() => {
+		if (!isHydrated) return
+		const isOffline = !isOnlineRef.current
+		if (isOffline) {
+			setStatusMessage('Offline. Waiting for network…')
+			return
+		}
+
+		const shouldShowReconnectForMode =
+			mode === 'chat'
+				? chatChannelState !== 'connected'
+				: translateChannelState !== 'connected' && subtitleChannelState !== 'connected'
+
+		if (!shouldShowReconnectForMode) {
+			if (typeof reconnectStatusTimerRef.current === 'number') {
+				window.clearTimeout(reconnectStatusTimerRef.current)
+				reconnectStatusTimerRef.current = null
+			}
+			setStatusMessage(null)
+			return
+		}
+
+		if (typeof reconnectStatusTimerRef.current === 'number') return
+		reconnectStatusTimerRef.current = window.setTimeout(() => {
+			reconnectStatusTimerRef.current = null
+			const stillNeedsReconnect =
+				modeRef.current === 'chat'
+					? chatChannelState !== 'connected'
+					: translateChannelState !== 'connected' && subtitleChannelState !== 'connected'
+			if (!stillNeedsReconnect) return
+			setStatusMessage('Reconnecting…')
+		}, reconnectStatusGraceMilliseconds)
+
+		return () => {
+			if (typeof reconnectStatusTimerRef.current !== 'number') return
+			window.clearTimeout(reconnectStatusTimerRef.current)
+			reconnectStatusTimerRef.current = null
+		}
+	}, [chatChannelState, isHydrated, mode, subtitleChannelState, translateChannelState])
+
 	useEffect(() => {
 		if (!isHydrated) return
 		switch (mode) {
@@ -990,6 +1254,14 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			for (const timerId of Object.values(reconnectTimerByChannelRef.current)) {
 				if (typeof timerId === 'number') window.clearTimeout(timerId)
 			}
+			if (typeof reconnectStatusTimerRef.current === 'number') {
+				window.clearTimeout(reconnectStatusTimerRef.current)
+				reconnectStatusTimerRef.current = null
+			}
+			if (typeof translateAggregationFlushTimerRef.current === 'number') {
+				window.clearTimeout(translateAggregationFlushTimerRef.current)
+				translateAggregationFlushTimerRef.current = null
+			}
 		}
 	}, [])
 
diff --git a/src/realtime/schemas.ts b/src/realtime/schemas.ts
index 4d73470..bc51b20 100644
--- a/src/realtime/schemas.ts
+++ b/src/realtime/schemas.ts
@@ -129,6 +129,22 @@ export const InputAudioTranscriptionCompletedEventSchema = z
 	})
 	.passthrough()
 
+export const SanitizedSubtitleSegmentSchema = z.object({
+	itemId: z.string().min(1),
+	text: z.string().min(1)
+})
+
+export const SystemLeakTextSchema = z
+	.array(z.string().min(1))
+	.default([
+		'context:',
+		'likely conversation languages',
+		'keep proper nouns',
+		'preserve punctuation',
+		'no summaries',
+		'no commentary'
+	])
+
 const ConversationItemContentPartSchema = z
 	.object({
 		text: z.string().optional(),
diff --git a/src/realtime/sessionTypes.ts b/src/realtime/sessionTypes.ts
index ee87de2..3b2bb24 100644
--- a/src/realtime/sessionTypes.ts
+++ b/src/realtime/sessionTypes.ts
@@ -29,6 +29,20 @@ export type LiveSubtitleState = {
 	updatedAt: number
 }
 
+export type TranslateSegmentAggregationState = {
+	activeUtteranceId: null | string
+	lastFinalizedAt: null | number
+	pendingSourceText: string
+	sourceLanguageCode: null | string
+}
+
+export type ConnectionHealthState = {
+	isReconnecting: boolean
+	lastErrorAt: null | number
+	subtitleConnected: boolean
+	translateConnected: boolean
+}
+
 export type UtteranceDirection = 'my_to_target' | 'target_to_my'
 
 export type UtteranceStatus = 'streaming' | 'translating' | 'final' | 'error'
@@ -57,6 +71,7 @@ export type ChatTranscriptSource =
 export type ChatTranscriptStatus = 'streaming' | 'final'
 
 export type ChatTranscriptMessage = {
+	clientSequence: number
 	id: string
 	role: 'user' | 'assistant'
 	text: string
diff --git a/src/realtime/subtitleTranscriptionClient.ts b/src/realtime/subtitleTranscriptionClient.ts
index 39307f2..6fae812 100644
--- a/src/realtime/subtitleTranscriptionClient.ts
+++ b/src/realtime/subtitleTranscriptionClient.ts
@@ -113,19 +113,17 @@ function int16ArrayToBase64(inputArray: Int16Array): string {
 	return btoa(binaryString)
 }
 
-function buildTranscriptionPrompt(myLanguageCode: string, translateToLanguageCode: string): string {
-	return `Likely conversation languages: ${myLanguageCode} and ${translateToLanguageCode}. Preserve punctuation and proper nouns.`
+function buildTranscriptionPrompt(): string {
+	return 'Transcribe spoken audio faithfully. Preserve punctuation and proper nouns.'
 }
 
 export class SubtitleTranscriptionClient {
 	private audioContext: AudioContext | null = null
 	private callbacks: SubtitleTranscriptionClientCallbacks
-	private commitIntervalId: null | number = null
 	private generation = 0
 	private localAudioStream: MediaStream | null = null
 	private micProcessorNode: ScriptProcessorNode | null = null
 	private micSourceNode: MediaStreamAudioSourceNode | null = null
-	private pendingAudioSinceLastCommit = false
 	private previousItemIdByItemId = new Map<string, null | string>()
 	private silentGainNode: GainNode | null = null
 	private state: SubtitleTranscriptionClientState = 'disconnected'
@@ -165,7 +163,7 @@ export class SubtitleTranscriptionClient {
 						input_audio_format: 'pcm16',
 						input_audio_transcription: {
 							model: defaultInputTranscriptionModel,
-							prompt: buildTranscriptionPrompt(input.myLanguageCode, input.translateToLanguageCode)
+							prompt: buildTranscriptionPrompt()
 						},
 						turn_detection: {
 							eagerness: 'high',
@@ -237,11 +235,12 @@ export class SubtitleTranscriptionClient {
 	}
 
 	public updateSubtitleSettings(settings: SubtitleTranscriptionSettings): void {
+		void settings
 		this.sendEvent({
 			session: {
 				input_audio_transcription: {
 					model: defaultInputTranscriptionModel,
-					prompt: buildTranscriptionPrompt(settings.myLanguageCode, settings.translateToLanguageCode)
+					prompt: buildTranscriptionPrompt()
 				},
 				type: 'transcription'
 			},
@@ -282,7 +281,6 @@ export class SubtitleTranscriptionClient {
 			if (pcm16Buffer.length === 0) return
 			const audioBase64 = int16ArrayToBase64(pcm16Buffer)
 			if (!audioBase64) return
-			this.pendingAudioSinceLastCommit = true
 			this.sendEvent({
 				audio: audioBase64,
 				type: 'input_audio_buffer.append'
@@ -294,27 +292,9 @@ export class SubtitleTranscriptionClient {
 		this.silentGainNode.connect(audioContext.destination)
 
 		this.callbacks.onListeningStateChange(true)
-		this.startCommitLoop()
-	}
-
-	private startCommitLoop(): void {
-		if (this.commitIntervalId !== null) return
-		this.commitIntervalId = window.setInterval(() => {
-			if (!this.pendingAudioSinceLastCommit) return
-			this.pendingAudioSinceLastCommit = false
-			this.sendEvent({
-				type: 'input_audio_buffer.commit'
-			})
-		}, 1800)
 	}
 
 	private stopVoiceInput(): void {
-		if (this.commitIntervalId !== null) {
-			window.clearInterval(this.commitIntervalId)
-			this.commitIntervalId = null
-		}
-		this.pendingAudioSinceLastCommit = false
-
 		if (this.micProcessorNode) {
 			this.micProcessorNode.disconnect()
 			this.micProcessorNode.onaudioprocess = null

From 5dad2a5e00b94f0296ed69d46caddb36a0e3b30f Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Tue, 3 Mar 2026 22:36:58 -0500
Subject: [PATCH 09/24] fix translate hang and compact controls/cards

---
 src/app/(app)/ModeShell.tsx                 |  17 ++-
 src/app/(app)/TranslateMode.tsx             |  50 ++++-----
 src/realtime/liveTranslateRealtimeClient.ts | 114 +++++++++++++++++---
 3 files changed, 134 insertions(+), 47 deletions(-)

diff --git a/src/app/(app)/ModeShell.tsx b/src/app/(app)/ModeShell.tsx
index 6e70807..b81d469 100644
--- a/src/app/(app)/ModeShell.tsx
+++ b/src/app/(app)/ModeShell.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { Mic, MicOff, Volume2, VolumeX } from 'lucide-react'
 import { type ReactNode, useEffect, useState } from 'react'
 
 import ChatMode from '@/app/(app)/ChatMode'
@@ -303,9 +304,11 @@ export default function ModeShell() {
 								variant="outline"
 								data-testid="header-voice-input-toggle"
 								onClick={() => setVoiceInputEnabled(!voiceInputEnabled)}
-								className="h-9 rounded-full px-3 text-[11px] uppercase tracking-[0.12em]"
+								className="h-9 w-9 rounded-full p-0"
+								aria-label={voiceInputEnabled ? 'Disable microphone' : 'Enable microphone'}
+								title={voiceInputEnabled ? 'Mic on' : 'Mic off'}
 							>
-								{voiceInputEnabled ? 'Mic On' : 'Mic Off'}
+								{voiceInputEnabled ? <Mic className="h-4 w-4" /> : <MicOff className="h-4 w-4" />}
 							</Button>
 
 							{mode === 'chat' ? (
@@ -314,9 +317,15 @@ export default function ModeShell() {
 									variant="outline"
 									data-testid="header-chat-speech-toggle"
 									onClick={() => setChatSpeechOutputEnabled(!chatSpeechOutputEnabled)}
-									className="h-9 rounded-full px-3 text-[11px] uppercase tracking-[0.12em]"
+									className="h-9 w-9 rounded-full p-0"
+									aria-label={chatSpeechOutputEnabled ? 'Disable speech output' : 'Enable speech output'}
+									title={chatSpeechOutputEnabled ? 'Speech on' : 'Speech off'}
 								>
-									{chatSpeechOutputEnabled ? 'Speech On' : 'Speech Off'}
+									{chatSpeechOutputEnabled ? (
+										<Volume2 className="h-4 w-4" />
+									) : (
+										<VolumeX className="h-4 w-4" />
+									)}
 								</Button>
 							) : null}
 
diff --git a/src/app/(app)/TranslateMode.tsx b/src/app/(app)/TranslateMode.tsx
index 77abb4b..0e9f216 100644
--- a/src/app/(app)/TranslateMode.tsx
+++ b/src/app/(app)/TranslateMode.tsx
@@ -407,6 +407,9 @@ export default function TranslateMode() {
 								card.targetLanguageCode
 							)}`
 							const isTranslating = card.status === 'streaming' || card.status === 'translating'
+							const translationText =
+								card.translatedText.trim() ||
+								(card.status === 'error' ? (card.errorMessage ?? 'Translation failed.') : 'Translating…')
 							return (
 								<article
 									key={card.id}
@@ -414,12 +417,12 @@ export default function TranslateMode() {
 									className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] p-3"
 								>
 									<div className="mb-2 flex items-center justify-between gap-2">
-										<div
-											className="font-semibold text-sm tracking-[0.03em]"
+										<p
+											className="font-semibold text-xs uppercase tracking-[0.08em]"
 											style={{ color: getDirectionColor(card.direction) }}
 										>
 											{routeLabel}
-										</div>
+										</p>
 										{isTranslating ? (
 											<div className="inline-flex items-center gap-1">
 												<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-[var(--lilac-direction-secondary)]" />
@@ -429,34 +432,19 @@ export default function TranslateMode() {
 										) : null}
 									</div>
 
-									<div className="space-y-2">
-										<div className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] px-3 py-2">
-											<div className="mb-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
-												Heard ({resolveLanguageLabel(card.sourceLanguageCode)})
-											</div>
-											<p
-												className="whitespace-pre-wrap break-words text-[var(--lilac-ink)] text-sm leading-relaxed"
-												data-testid={`translate-card-source-${card.id}`}
-											>
-												{card.sourceText.trim() || '…'}
-											</p>
-										</div>
-
-										<div className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] px-3 py-2">
-											<div className="mb-1 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
-												Translation ({resolveLanguageLabel(card.targetLanguageCode)})
-											</div>
-											<p
-												className="whitespace-pre-wrap break-words text-[var(--lilac-ink)] text-sm leading-relaxed"
-												data-testid={`translate-card-target-${card.id}`}
-											>
-												{card.translatedText.trim() ||
-													(card.status === 'error'
-														? (card.errorMessage ?? 'Translation failed.')
-														: 'Translating…')}
-											</p>
-										</div>
-									</div>
+									<p
+										className="whitespace-pre-wrap break-words text-[1.18rem] text-[var(--lilac-ink)] leading-snug sm:text-[1.25rem]"
+										data-testid={`translate-card-target-${card.id}`}
+									>
+										{translationText}
+									</p>
+									<p
+										className="mt-2 whitespace-pre-wrap break-words text-[var(--lilac-ink-muted)] text-sm leading-relaxed"
+										data-testid={`translate-card-source-${card.id}`}
+									>
+										<span className="mr-1 font-semibold text-[10px] uppercase tracking-[0.12em]">Heard:</span>
+										{card.sourceText.trim() || '…'}
+									</p>
 								</article>
 							)
 						})
diff --git a/src/realtime/liveTranslateRealtimeClient.ts b/src/realtime/liveTranslateRealtimeClient.ts
index a34a9cc..256d9e1 100644
--- a/src/realtime/liveTranslateRealtimeClient.ts
+++ b/src/realtime/liveTranslateRealtimeClient.ts
@@ -49,8 +49,13 @@ export type LiveTranslateRealtimeClientCallbacks = {
 type PendingResponseContext = {
 	inputOrigin: 'audio' | 'text'
 	itemId: string
+	retryCount: number
+	sourceText: string
 }
 
+const translationResponseTimeoutMilliseconds = 16_000
+const maxMissingToolCallRetryCount = 1
+
 function createTranslateInstructions(
 	myLanguageCode: string,
 	translateToLanguageCode: string
@@ -174,7 +179,9 @@ export class LiveTranslateRealtimeClient {
 	private completedToolArgumentsByResponseId = new Map<string, string>()
 	private dataChannel: null | RTCDataChannel = null
 	private generation = 0
+	private pendingRequestIdQueue: string[] = []
 	private pendingResponseContextByRequestId = new Map<string, PendingResponseContext>()
+	private pendingResponseTimeoutByRequestId = new Map<string, number>()
 	private peerConnection: null | RTCPeerConnection = null
 	private sourceItemOrder: string[] = []
 	private state: LiveTranslateRealtimeClientState = 'disconnected'
@@ -257,6 +264,11 @@ export class LiveTranslateRealtimeClient {
 	public stop(): void {
 		this.generation += 1
 		this.completedToolArgumentsByResponseId.clear()
+		this.pendingResponseTimeoutByRequestId.forEach(timeoutId => {
+			window.clearTimeout(timeoutId)
+		})
+		this.pendingResponseTimeoutByRequestId.clear()
+		this.pendingRequestIdQueue = []
 		this.pendingResponseContextByRequestId.clear()
 		this.sourceItemOrder = []
 
@@ -294,7 +306,7 @@ export class LiveTranslateRealtimeClient {
 			},
 			type: 'conversation.item.create'
 		})
-		this.requestTranslationResponse(input.itemId, input.inputOrigin)
+		this.requestTranslationResponse(input.itemId, input.inputOrigin, normalizedText)
 	}
 
 	public updateTranslateSettings(settings: LiveTranslateSettings): void {
@@ -333,11 +345,7 @@ export class LiveTranslateRealtimeClient {
 		const sourceItemIdFromMetadata = parseStringValue(metadata.source_item_id)
 		const inputOriginFromMetadata = parseStringValue(metadata.input_origin)
 
-		const pendingContext = requestId
-			? (this.pendingResponseContextByRequestId.get(requestId) ?? null)
-			: null
-		if (requestId) this.pendingResponseContextByRequestId.delete(requestId)
-
+		const pendingContext = this.resolvePendingContext(requestId)
 		const sourceItemId = sourceItemIdFromMetadata ?? pendingContext?.itemId ?? null
 		const rawInputOrigin = inputOriginFromMetadata ?? pendingContext?.inputOrigin ?? null
 		const inputOrigin: 'audio' | 'text' = rawInputOrigin === 'text' ? 'text' : 'audio'
@@ -358,16 +366,26 @@ export class LiveTranslateRealtimeClient {
 			inferredToolArguments
 
 		if (!toolArguments) {
-			if (responseStatus && responseStatus !== 'completed') return
+			if (pendingContext && pendingContext.retryCount < maxMissingToolCallRetryCount) {
+				this.requestTranslationResponse(
+					pendingContext.itemId,
+					pendingContext.inputOrigin,
+					pendingContext.sourceText,
+					pendingContext.retryCount + 1
+				)
+				return
+			}
 			this.callbacks.onResultPatch({
 				direction: 'my_to_target',
 				inputOrigin,
 				itemId: sourceItemId,
 				sourceLanguageCode: 'und',
-				sourceText: '',
+				sourceText: pendingContext?.sourceText ?? '',
 				status: 'error',
 				targetLanguageCode: 'und',
-				translatedText: 'No valid publish_translation tool call was returned.',
+				translatedText: responseStatus
+					? `No valid publish_translation tool call was returned (${responseStatus}).`
+					: 'No valid publish_translation tool call was returned.',
 				...(responseId ? { responseId } : {})
 			})
 			return
@@ -393,7 +411,7 @@ export class LiveTranslateRealtimeClient {
 				inputOrigin,
 				itemId: sourceItemId,
 				sourceLanguageCode: 'und',
-				sourceText: '',
+				sourceText: pendingContext?.sourceText ?? '',
 				status: 'error',
 				targetLanguageCode: 'und',
 				translatedText: 'Tool arguments were malformed and could not be parsed.',
@@ -476,9 +494,80 @@ export class LiveTranslateRealtimeClient {
 		}
 	}
 
-	private requestTranslationResponse(itemId: string, inputOrigin: 'audio' | 'text'): void {
+	private clearPendingRequestTimeout(requestId: string): void {
+		const timeoutId = this.pendingResponseTimeoutByRequestId.get(requestId)
+		if (typeof timeoutId === 'number') {
+			window.clearTimeout(timeoutId)
+		}
+		this.pendingResponseTimeoutByRequestId.delete(requestId)
+	}
+
+	private removePendingRequestIdFromQueue(requestId: string): void {
+		const requestIndex = this.pendingRequestIdQueue.indexOf(requestId)
+		if (requestIndex === -1) return
+		this.pendingRequestIdQueue.splice(requestIndex, 1)
+	}
+
+	private resolvePendingContext(requestId: null | string): null | PendingResponseContext {
+		if (requestId) {
+			const directContext = this.pendingResponseContextByRequestId.get(requestId) ?? null
+			this.pendingResponseContextByRequestId.delete(requestId)
+			this.clearPendingRequestTimeout(requestId)
+			this.removePendingRequestIdFromQueue(requestId)
+			if (directContext) return directContext
+		}
+
+		const fallbackRequestId = this.pendingRequestIdQueue.shift()
+		if (!fallbackRequestId) return null
+		const fallbackContext = this.pendingResponseContextByRequestId.get(fallbackRequestId) ?? null
+		this.pendingResponseContextByRequestId.delete(fallbackRequestId)
+		this.clearPendingRequestTimeout(fallbackRequestId)
+		return fallbackContext
+	}
+
+	private requestTranslationResponse(
+		itemId: string,
+		inputOrigin: 'audio' | 'text',
+		sourceText: string,
+		retryCount = 0
+	): void {
 		const requestId = crypto.randomUUID()
-		this.pendingResponseContextByRequestId.set(requestId, { inputOrigin, itemId })
+		this.pendingResponseContextByRequestId.set(requestId, {
+			inputOrigin,
+			itemId,
+			retryCount,
+			sourceText
+		})
+		this.pendingRequestIdQueue.push(requestId)
+		const timeoutId = window.setTimeout(() => {
+			const pendingContext = this.pendingResponseContextByRequestId.get(requestId)
+			if (!pendingContext) return
+			this.pendingResponseContextByRequestId.delete(requestId)
+			this.removePendingRequestIdFromQueue(requestId)
+			this.clearPendingRequestTimeout(requestId)
+
+			if (pendingContext.retryCount < maxMissingToolCallRetryCount) {
+				this.requestTranslationResponse(
+					pendingContext.itemId,
+					pendingContext.inputOrigin,
+					pendingContext.sourceText,
+					pendingContext.retryCount + 1
+				)
+				return
+			}
+
+			this.callbacks.onResultPatch({
+				direction: 'my_to_target',
+				inputOrigin: pendingContext.inputOrigin,
+				itemId: pendingContext.itemId,
+				sourceLanguageCode: 'und',
+				sourceText: pendingContext.sourceText,
+				status: 'error',
+				targetLanguageCode: 'und',
+				translatedText: 'Translation timed out before tool output was returned.'
+			})
+		}, translationResponseTimeoutMilliseconds)
+		this.pendingResponseTimeoutByRequestId.set(requestId, timeoutId)
 		this.sendEvent({
 			response: {
 				conversation: 'none',
@@ -488,6 +577,7 @@ export class LiveTranslateRealtimeClient {
 				metadata: {
 					input_origin: inputOrigin,
 					request_id: requestId,
+					retry_count: retryCount,
 					source_item_id: itemId
 				},
 				output_modalities: ['text'],

From 28eeb22204fa032a63122e0b13cc901dab053958 Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Wed, 4 Mar 2026 16:01:36 -0500
Subject: [PATCH 10/24] Fix translate hangs with fallback path and tighten
 smoke coverage

---
 scripts/smoke/captureVercelRuntimeLogs.ts   |   1 +
 scripts/smoke/runLiveConversationSmoke.ts   |  15 +-
 src/app/(app)/TranslateMode.tsx             |  10 +-
 src/app/actions/realtime.ts                 | 154 +++++++++++++++++++-
 src/app/styles.css                          |  12 +-
 src/realtime/liveTranslateRealtimeClient.ts |  25 +++-
 src/realtime/modeRuntimeStore.tsx           | 131 ++++++++++++++++-
 src/realtime/modelConfig.ts                 |   4 +-
 src/realtime/schemas.ts                     |  41 +++++-
 9 files changed, 369 insertions(+), 24 deletions(-)

diff --git a/scripts/smoke/captureVercelRuntimeLogs.ts b/scripts/smoke/captureVercelRuntimeLogs.ts
index 91bf338..c28b19b 100644
--- a/scripts/smoke/captureVercelRuntimeLogs.ts
+++ b/scripts/smoke/captureVercelRuntimeLogs.ts
@@ -67,6 +67,7 @@ export async function collectRuntimeErrorMatches(runtimeLogPath: string): Promis
 
 	const matchPatterns = [
 		/Unsupported parameter/i,
+		/Unsupported value/i,
 		/Unknown parameter/i,
 		/Invalid 'item\.id'/i,
 		/Unhandled/i,
diff --git a/scripts/smoke/runLiveConversationSmoke.ts b/scripts/smoke/runLiveConversationSmoke.ts
index 294a896..e80910e 100644
--- a/scripts/smoke/runLiveConversationSmoke.ts
+++ b/scripts/smoke/runLiveConversationSmoke.ts
@@ -278,14 +278,19 @@ async function runTranslateScenario(
 			async function hasTranslateCard(): Promise<boolean> {
 				const cardCount = await page.locator('[data-testid^="translate-card-"]').count()
 				if (cardCount === 0) return false
-				const targetText = await page
+				const targetTextList = await page
 					.locator('[data-testid^="translate-card-target-"]')
-					.first()
-					.innerText()
-				return targetText.trim().length > 0
+					.allInnerTexts()
+				return targetTextList.some(targetText => {
+					const normalizedText = targetText.trim()
+					if (!normalizedText) return false
+					if (normalizedText === 'Translating…') return false
+					if (normalizedText === 'Translating...') return false
+					return true
+				})
 			},
 			45_000,
-			'Translate mode did not produce translation card output.'
+			'Translate mode did not produce finalized translation output.'
 		)
 
 		const subtitleRailText = await page.getByTestId('translate-live-subtitle-rail').innerText()
diff --git a/src/app/(app)/TranslateMode.tsx b/src/app/(app)/TranslateMode.tsx
index 0e9f216..bdce679 100644
--- a/src/app/(app)/TranslateMode.tsx
+++ b/src/app/(app)/TranslateMode.tsx
@@ -414,11 +414,11 @@ export default function TranslateMode() {
 								<article
 									key={card.id}
 									data-testid={`translate-card-${card.id}`}
-									className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] p-3"
+									className="rounded-lg border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] px-3 py-2.5"
 								>
-									<div className="mb-2 flex items-center justify-between gap-2">
+									<div className="mb-1.5 flex items-center justify-between gap-2">
 										<p
-											className="font-semibold text-xs uppercase tracking-[0.08em]"
+											className="font-semibold text-[0.83rem] tracking-[0.02em]"
 											style={{ color: getDirectionColor(card.direction) }}
 										>
 											{routeLabel}
@@ -433,13 +433,13 @@ export default function TranslateMode() {
 									</div>
 
 									<p
-										className="whitespace-pre-wrap break-words text-[1.18rem] text-[var(--lilac-ink)] leading-snug sm:text-[1.25rem]"
+										className="whitespace-pre-wrap break-words text-[1.05rem] text-[var(--lilac-ink)] leading-snug sm:text-[1.14rem]"
 										data-testid={`translate-card-target-${card.id}`}
 									>
 										{translationText}
 									</p>
 									<p
-										className="mt-2 whitespace-pre-wrap break-words text-[var(--lilac-ink-muted)] text-sm leading-relaxed"
+										className="mt-1.5 whitespace-pre-wrap break-words text-[0.8rem] text-[var(--lilac-ink-muted)] leading-relaxed"
 										data-testid={`translate-card-source-${card.id}`}
 									>
 										<span className="mr-1 font-semibold text-[10px] uppercase tracking-[0.12em]">Heard:</span>
diff --git a/src/app/actions/realtime.ts b/src/app/actions/realtime.ts
index 5f0d08e..0f2e529 100644
--- a/src/app/actions/realtime.ts
+++ b/src/app/actions/realtime.ts
@@ -1,5 +1,6 @@
 'use server'
 
+import { z } from 'zod'
 import { defaultTranscriptionModel } from '@/realtime/modelConfig'
 import {
 	CreateRealtimeClientSecretActionInputSchema,
@@ -8,7 +9,10 @@ import {
 	CreateRealtimeTranscriptionSessionActionOutputSchema,
 	CreateTranslateRealtimeClientSecretActionInputSchema,
 	CreateTranslateRealtimeClientSecretActionOutputSchema,
-	parseClientSecretResponse
+	PublishTranslationToolArgumentsSchema,
+	parseClientSecretResponse,
+	TranslateFallbackActionInputSchema,
+	TranslateFallbackActionOutputSchema
 } from '@/realtime/schemas'
 import env from '~/env'
 
@@ -18,6 +22,37 @@ const defaultRequestHeaders = {
 	'Content-Type': 'application/json'
 } satisfies HeadersInit
 
+const CreateChatCompletionResponseSchema = z
+	.object({
+		choices: z
+			.array(
+				z
+					.object({
+						message: z
+							.object({
+								content: z
+									.union([
+										z.string(),
+										z.array(
+											z
+												.object({
+													text: z.string().optional(),
+													type: z.string().optional()
+												})
+												.passthrough()
+										)
+									])
+									.optional()
+							})
+							.passthrough()
+							.optional()
+					})
+					.passthrough()
+			)
+			.min(1)
+	})
+	.passthrough()
+
 type OpenAiErrorPayload = {
 	code?: string
 	message: string
@@ -144,6 +179,44 @@ function buildPublishTranslationToolDefinition(): Record<string, unknown> {
 	}
 }
 
+function createFallbackTranslateInstructions(
+	myLanguageCode: string,
+	translateToLanguageCode: string
+): string {
+	return [
+		'You are Lilac fallback translation.',
+		`Language A: ${myLanguageCode}.`,
+		`Language B: ${translateToLanguageCode}.`,
+		'Detect whether input is language A or B and translate to the opposite language.',
+		'Return only JSON matching the schema.',
+		'Never include commentary, rationale, or extra keys.',
+		'Preserve intent, tone, punctuation, and named entities.'
+	].join('\n')
+}
+
+function extractChatCompletionMessageContent(payload: unknown): string {
+	const parsedPayload = CreateChatCompletionResponseSchema.parse(payload)
+	const firstChoice = parsedPayload.choices[0]
+	if (!firstChoice) throw new Error('Chat completion did not include a choice.')
+	const contentValue = firstChoice.message?.content
+	if (typeof contentValue === 'string') {
+		const normalizedContent = contentValue.trim()
+		if (normalizedContent) return normalizedContent
+	}
+	if (Array.isArray(contentValue)) {
+		let joinedText = ''
+		for (const contentPart of contentValue) {
+			if (!contentPart || typeof contentPart !== 'object') continue
+			const textValue = (contentPart as { text?: unknown }).text
+			if (typeof textValue !== 'string') continue
+			joinedText += textValue
+		}
+		const normalizedJoinedText = joinedText.trim()
+		if (normalizedJoinedText) return normalizedJoinedText
+	}
+	throw new Error('Chat completion did not include structured JSON text output.')
+}
+
 export async function createRealtimeClientSecretAction(input?: unknown): Promise<{
 	expiresAt: number
 	value: string
@@ -236,3 +309,82 @@ export async function createRealtimeTranscriptionSessionAction(input: unknown):
 	const parsedSecret = parseClientSecretResponse(payload)
 	return CreateRealtimeTranscriptionSessionActionOutputSchema.parse(parsedSecret)
 }
+
+export async function translateFallbackAction(
+	input: unknown
+): Promise<z.infer<typeof TranslateFallbackActionOutputSchema>> {
+	const parsedInput = TranslateFallbackActionInputSchema.parse(input)
+
+	try {
+		const payload = await postOpenAi('/chat/completions', {
+			messages: [
+				{
+					content: createFallbackTranslateInstructions(
+						parsedInput.myLanguageCode,
+						parsedInput.translateToLanguageCode
+					),
+					role: 'system'
+				},
+				{
+					content: parsedInput.sourceText,
+					role: 'user'
+				}
+			],
+			model: parsedInput.model,
+			response_format: {
+				json_schema: {
+					name: 'publish_translation',
+					schema: {
+						additionalProperties: false,
+						properties: {
+							direction: {
+								enum: ['my_to_target', 'target_to_my'],
+								type: 'string'
+							},
+							sourceLanguageCode: {
+								type: 'string'
+							},
+							sourceText: {
+								type: 'string'
+							},
+							targetLanguageCode: {
+								type: 'string'
+							},
+							translatedText: {
+								type: 'string'
+							}
+						},
+						required: [
+							'sourceText',
+							'sourceLanguageCode',
+							'targetLanguageCode',
+							'translatedText',
+							'direction'
+						],
+						type: 'object'
+					},
+					strict: true
+				},
+				type: 'json_schema'
+			}
+		})
+
+		const messageContent = extractChatCompletionMessageContent(payload)
+		const parsedResult = PublishTranslationToolArgumentsSchema.parse(
+			JSON.parse(messageContent) as unknown
+		)
+		return TranslateFallbackActionOutputSchema.parse({
+			ok: true,
+			result: parsedResult
+		})
+	} catch (error) {
+		const message =
+			error instanceof Error && error.message ? error.message : 'Fallback translation failed.'
+		const debugId = `fallback_${Date.now().toString(36)}`
+		console.error('[translateFallbackAction]', debugId, message)
+		return TranslateFallbackActionOutputSchema.parse({
+			error: `Translation retry failed. (${debugId})`,
+			ok: false
+		})
+	}
+}
diff --git a/src/app/styles.css b/src/app/styles.css
index 65bf65a..9336d13 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -18,8 +18,8 @@
 	--lilac-brand-primary-foreground: #f9f5ec;
 	--lilac-direction-primary: #5f43be;
 	--lilac-direction-secondary: #2f6dd8;
-	--lilac-button-disabled-bg: color-mix(in oklab, var(--lilac-brand-primary) 22%, white 78%);
-	--lilac-button-disabled-fg: color-mix(in oklab, var(--lilac-ink) 62%, white 38%);
+	--lilac-button-disabled-bg: color-mix(in oklab, var(--lilac-brand-primary) 46%, white 54%);
+	--lilac-button-disabled-fg: color-mix(in oklab, white 90%, var(--lilac-brand-primary) 10%);
 
 	--background: var(--lilac-surface);
 	--foreground: var(--lilac-ink);
@@ -65,12 +65,12 @@
 		--lilac-ink-muted: rgba(246, 241, 255, 0.72);
 		--lilac-border: color-mix(in oklab, #f6f1ff 22%, transparent);
 		--lilac-border-strong: color-mix(in oklab, #f6f1ff 36%, transparent);
-		--lilac-brand-primary: #9584ee;
-		--lilac-brand-primary-foreground: #140f23;
+		--lilac-brand-primary: #8f7be8;
+		--lilac-brand-primary-foreground: #f8f4ff;
 		--lilac-direction-primary: #a996ff;
 		--lilac-direction-secondary: #8cc2ff;
-		--lilac-button-disabled-bg: color-mix(in oklab, #2a2140 78%, #54468a 22%);
-		--lilac-button-disabled-fg: color-mix(in oklab, #f6f1ff 52%, #b9aacd 48%);
+		--lilac-button-disabled-bg: color-mix(in oklab, #392d53 76%, #6652a8 24%);
+		--lilac-button-disabled-fg: color-mix(in oklab, #efe9ff 92%, #c7b7ef 8%);
 
 		--background: var(--lilac-surface);
 		--foreground: var(--lilac-ink);
diff --git a/src/realtime/liveTranslateRealtimeClient.ts b/src/realtime/liveTranslateRealtimeClient.ts
index 256d9e1..2cce57c 100644
--- a/src/realtime/liveTranslateRealtimeClient.ts
+++ b/src/realtime/liveTranslateRealtimeClient.ts
@@ -5,6 +5,7 @@ import {
 	PublishTranslationToolArgumentsSchema,
 	RealtimeBaseServerEventSchema,
 	RealtimeErrorEventSchema,
+	ResponseCreatedEventSchema,
 	ResponseDoneEventSchema,
 	ResponseFunctionCallArgumentsDoneEventSchema,
 	ResponseOutputItemDoneEventSchema
@@ -180,6 +181,7 @@ export class LiveTranslateRealtimeClient {
 	private dataChannel: null | RTCDataChannel = null
 	private generation = 0
 	private pendingRequestIdQueue: string[] = []
+	private pendingRequestIdByResponseId = new Map<string, string>()
 	private pendingResponseContextByRequestId = new Map<string, PendingResponseContext>()
 	private pendingResponseTimeoutByRequestId = new Map<string, number>()
 	private peerConnection: null | RTCPeerConnection = null
@@ -269,6 +271,7 @@ export class LiveTranslateRealtimeClient {
 		})
 		this.pendingResponseTimeoutByRequestId.clear()
 		this.pendingRequestIdQueue = []
+		this.pendingRequestIdByResponseId.clear()
 		this.pendingResponseContextByRequestId.clear()
 		this.sourceItemOrder = []
 
@@ -341,9 +344,13 @@ export class LiveTranslateRealtimeClient {
 		const responseStatus = parseStringValue(response.status)?.toLowerCase() ?? null
 
 		const metadata = response.metadata ?? {}
-		const requestId = parseStringValue(metadata.request_id)
+		const responseId = parseStringValue(response.id) ?? parseStringValue(event.response_id)
+		const requestId =
+			parseStringValue(metadata.request_id) ??
+			(responseId ? (this.pendingRequestIdByResponseId.get(responseId) ?? null) : null)
 		const sourceItemIdFromMetadata = parseStringValue(metadata.source_item_id)
 		const inputOriginFromMetadata = parseStringValue(metadata.input_origin)
+		if (responseId) this.pendingRequestIdByResponseId.delete(responseId)
 
 		const pendingContext = this.resolvePendingContext(requestId)
 		const sourceItemId = sourceItemIdFromMetadata ?? pendingContext?.itemId ?? null
@@ -354,7 +361,6 @@ export class LiveTranslateRealtimeClient {
 		const functionCall = (response.output ?? []).find(
 			item => item.type === 'function_call' && item.name === 'publish_translation'
 		)
-		const responseId = response.id
 		const fallbackToolArguments = responseId
 			? (this.completedToolArgumentsByResponseId.get(responseId) ?? null)
 			: null
@@ -420,6 +426,16 @@ export class LiveTranslateRealtimeClient {
 		}
 	}
 
+	private handleResponseCreatedEvent(
+		event: ReturnType<typeof ResponseCreatedEventSchema.parse>
+	): void {
+		const responseId = parseStringValue(event.response?.id)
+		if (!responseId) return
+		const requestId = parseStringValue(event.response?.metadata?.request_id)
+		if (!requestId) return
+		this.pendingRequestIdByResponseId.set(responseId, requestId)
+	}
+
 	private maybeStorePublishTranslationToolArguments(
 		toolName: null | string,
 		toolArguments: null | string,
@@ -458,6 +474,11 @@ export class LiveTranslateRealtimeClient {
 			const baseEvent = RealtimeBaseServerEventSchema.parse(candidate)
 
 			switch (baseEvent.type) {
+				case 'response.created': {
+					const event = ResponseCreatedEventSchema.parse(candidate)
+					this.handleResponseCreatedEvent(event)
+					return
+				}
 				case 'response.output_item.done': {
 					const event = ResponseOutputItemDoneEventSchema.parse(candidate)
 					this.handleResponseOutputItemDoneEvent(event)
diff --git a/src/realtime/modeRuntimeStore.tsx b/src/realtime/modeRuntimeStore.tsx
index 78a5fda..23f37b3 100644
--- a/src/realtime/modeRuntimeStore.tsx
+++ b/src/realtime/modeRuntimeStore.tsx
@@ -11,6 +11,7 @@ import {
 	useState
 } from 'react'
 
+import { translateFallbackAction } from '@/app/actions/realtime'
 import { ChatRealtimeClient, type ChatTranscriptPatch } from '@/realtime/chatRealtimeClient'
 import { normalizeLanguageCode, resolveLanguageCode } from '@/realtime/languageCatalog'
 import {
@@ -97,6 +98,7 @@ type PendingTranslateInput = TranslateInputPayload & {
 const subtitleAggregationSilenceMilliseconds = 1200
 const reconnectStatusGraceMilliseconds = 1500
 const subtitleDedupRoundedTimeWindowMilliseconds = 700
+const translateFallbackTimeoutMilliseconds = 18_000
 const systemLeakMatcherList = SystemLeakTextSchema.parse(undefined).map(matcher =>
 	matcher.toLowerCase()
 )
@@ -411,10 +413,13 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	const pendingTranslateInputQueueRef = useRef<PendingTranslateInput[]>([])
 	const chatTranscriptSequenceRef = useRef(1)
 	const subtitleDedupKeyTimestampByKeyRef = useRef<Map<string, number>>(new Map())
+	const translateCardListRef = useRef<UtteranceCard[]>([])
 	const translateSegmentAggregationStateRef = useRef<TranslateSegmentAggregationState>(
 		defaultTranslateSegmentAggregationState
 	)
 	const translateAggregationFlushTimerRef = useRef<null | number>(null)
+	const translateFallbackTimeoutByCardIdRef = useRef<Map<string, number>>(new Map())
+	const translateFallbackInFlightCardIdSetRef = useRef<Set<string>>(new Set())
 	const reconnectTimerByChannelRef = useRef<Partial<Record<RuntimeChannel, number>>>({})
 	const reconnectStatusTimerRef = useRef<null | number>(null)
 	const scheduleReconnectRef = useRef<(channel: RuntimeChannel) => void>(() => {})
@@ -442,6 +447,14 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		translateAggregationFlushTimerRef.current = null
 	}, [])
 
+	const clearAllTranslateFallbackTimeouts = useCallback(() => {
+		translateFallbackTimeoutByCardIdRef.current.forEach(timeoutId => {
+			window.clearTimeout(timeoutId)
+		})
+		translateFallbackTimeoutByCardIdRef.current.clear()
+		translateFallbackInFlightCardIdSetRef.current.clear()
+	}, [])
+
 	const stopChatClient = useCallback(() => {
 		intentionalStopByChannelRef.current.chat = true
 		chatClientRef.current?.stop()
@@ -467,6 +480,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		void subtitleClientRef.current?.stop()
 		subtitleClientRef.current = null
 		clearTranslateAggregationFlushTimer()
+		clearAllTranslateFallbackTimeouts()
 		translateSegmentAggregationStateRef.current = defaultTranslateSegmentAggregationState
 		setSubtitleChannelState('disconnected')
 		setLiveSubtitleState(previousState => ({
@@ -479,7 +493,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		queueMicrotask(() => {
 			intentionalStopByChannelRef.current.subtitle = false
 		})
-	}, [clearTranslateAggregationFlushTimer])
+	}, [clearAllTranslateFallbackTimeouts, clearTranslateAggregationFlushTimer])
 
 	const stopAllClients = useCallback(() => {
 		stopChatClient()
@@ -496,8 +510,9 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		subtitleDedupKeyTimestampByKeyRef.current.clear()
 		chatTranscriptSequenceRef.current = 1
 		clearTranslateAggregationFlushTimer()
+		clearAllTranslateFallbackTimeouts()
 		pendingTranslateInputQueueRef.current = []
-	}, [clearTranslateAggregationFlushTimer])
+	}, [clearAllTranslateFallbackTimeouts, clearTranslateAggregationFlushTimer])
 
 	const shouldRunChannelForMode = useCallback(
 		(channel: RuntimeChannel, activeMode: LilacMode): boolean => {
@@ -539,6 +554,109 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		[flushPendingTranslateInputs]
 	)
 
+	const runTranslateFallbackForCard = useCallback(async (cardId: string) => {
+		if (translateFallbackInFlightCardIdSetRef.current.has(cardId)) return
+		const currentCard = translateCardListRef.current.find(card => card.id === cardId)
+		if (!currentCard) return
+		if (currentCard.status !== 'streaming' && currentCard.status !== 'translating') return
+		const sourceText = normalizeWhitespace(currentCard.sourceText)
+		if (!sourceText) return
+
+		translateFallbackInFlightCardIdSetRef.current.add(cardId)
+		try {
+			const fallbackResult = await translateFallbackAction({
+				myLanguageCode: translateSettingsRef.current.myLanguageCode,
+				sourceText,
+				translateToLanguageCode: translateSettingsRef.current.translateToLanguageCode
+			})
+			if (!fallbackResult.ok) {
+				setTranslateCards(previousCards =>
+					previousCards.map(card => {
+						if (card.id !== cardId) return card
+						if (card.status === 'final' || card.status === 'error') return card
+						return {
+							...card,
+							errorMessage: fallbackResult.error,
+							status: 'error',
+							translatedText: fallbackResult.error
+						}
+					})
+				)
+				return
+			}
+
+			const translationResult = fallbackResult.result
+			setTranslateCards(previousCards =>
+				previousCards.map(card => {
+					if (card.id !== cardId) return card
+					if (card.status === 'final' || card.status === 'error') return card
+					return {
+						...card,
+						direction: translationResult.direction,
+						sourceLanguageCode: normalizeLanguageCode(translationResult.sourceLanguageCode),
+						sourceText: normalizeWhitespace(translationResult.sourceText) || card.sourceText,
+						status: 'final',
+						targetLanguageCode: normalizeLanguageCode(translationResult.targetLanguageCode),
+						translatedText: translationResult.translatedText
+					}
+				})
+			)
+		} catch (error) {
+			const message =
+				error instanceof Error && error.message
+					? error.message
+					: 'Translation retry failed before completion.'
+			setTranslateCards(previousCards =>
+				previousCards.map(card => {
+					if (card.id !== cardId) return card
+					if (card.status === 'final' || card.status === 'error') return card
+					return {
+						...card,
+						errorMessage: message,
+						status: 'error',
+						translatedText: message
+					}
+				})
+			)
+		} finally {
+			translateFallbackInFlightCardIdSetRef.current.delete(cardId)
+		}
+	}, [])
+
+	useEffect(() => {
+		if (mode !== 'translate') {
+			clearAllTranslateFallbackTimeouts()
+			return
+		}
+
+		const activeTranslatingCardIdSet = new Set<string>()
+		for (const card of translateCards) {
+			const translatedText = card.translatedText.trim()
+			if ((card.status !== 'streaming' && card.status !== 'translating') || translatedText) continue
+			activeTranslatingCardIdSet.add(card.id)
+			if (translateFallbackTimeoutByCardIdRef.current.has(card.id)) continue
+			const timeoutId = window.setTimeout(() => {
+				translateFallbackTimeoutByCardIdRef.current.delete(card.id)
+				void runTranslateFallbackForCard(card.id)
+			}, translateFallbackTimeoutMilliseconds)
+			translateFallbackTimeoutByCardIdRef.current.set(card.id, timeoutId)
+		}
+
+		translateFallbackTimeoutByCardIdRef.current.forEach((timeoutId, cardId) => {
+			if (activeTranslatingCardIdSet.has(cardId)) return
+			window.clearTimeout(timeoutId)
+			translateFallbackTimeoutByCardIdRef.current.delete(cardId)
+		})
+
+		return () => {
+			translateFallbackTimeoutByCardIdRef.current.forEach((timeoutId, cardId) => {
+				if (activeTranslatingCardIdSet.has(cardId)) return
+				window.clearTimeout(timeoutId)
+				translateFallbackTimeoutByCardIdRef.current.delete(cardId)
+			})
+		}
+	}, [clearAllTranslateFallbackTimeouts, mode, runTranslateFallbackForCard, translateCards])
+
 	const flushTranslateSegmentAggregation = useCallback(() => {
 		const aggregateState = translateSegmentAggregationStateRef.current
 		const activeUtteranceId = aggregateState.activeUtteranceId
@@ -904,6 +1022,10 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		chatSpeechOutputEnabledRef.current = chatOutputSettings.speechOutputEnabled
 	}, [chatOutputSettings.speechOutputEnabled])
 
+	useEffect(() => {
+		translateCardListRef.current = translateCards
+	}, [translateCards])
+
 	useEffect(() => {
 		modeRef.current = mode
 	}, [mode])
@@ -1262,6 +1384,11 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				window.clearTimeout(translateAggregationFlushTimerRef.current)
 				translateAggregationFlushTimerRef.current = null
 			}
+			translateFallbackTimeoutByCardIdRef.current.forEach(timeoutId => {
+				window.clearTimeout(timeoutId)
+			})
+			translateFallbackTimeoutByCardIdRef.current.clear()
+			translateFallbackInFlightCardIdSetRef.current.clear()
 		}
 	}, [])
 
diff --git a/src/realtime/modelConfig.ts b/src/realtime/modelConfig.ts
index 676d17c..b4c2e40 100644
--- a/src/realtime/modelConfig.ts
+++ b/src/realtime/modelConfig.ts
@@ -2,7 +2,7 @@ import { z } from 'zod'
 
 export const chatRealtimeModelValues = ['gpt-realtime-1.5'] as const
 export const transcriptionModelValues = ['gpt-4o-transcribe'] as const
-export const translationModelValues = ['gpt-5.3-codex'] as const
+export const translationModelValues = ['gpt-5.3-chat-latest', 'gpt-5.3-codex'] as const
 
 export const ChatRealtimeModelSchema = z.enum(chatRealtimeModelValues)
 export const TranscriptionModelSchema = z.enum(transcriptionModelValues)
@@ -10,7 +10,7 @@ export const TranslationModelSchema = z.enum(translationModelValues)
 
 export const defaultChatRealtimeModel = 'gpt-realtime-1.5'
 export const defaultTranscriptionModel = 'gpt-4o-transcribe'
-export const defaultTranslationModel = 'gpt-5.3-codex'
+export const defaultTranslationModel = 'gpt-5.3-chat-latest'
 
 export const AllowedLilacModelSchema = z.union([
 	ChatRealtimeModelSchema,
diff --git a/src/realtime/schemas.ts b/src/realtime/schemas.ts
index bc51b20..a340d30 100644
--- a/src/realtime/schemas.ts
+++ b/src/realtime/schemas.ts
@@ -3,7 +3,9 @@ import { isValidLanguageCode, normalizeLanguageCode } from '@/realtime/languageC
 import {
 	ChatRealtimeModelSchema,
 	defaultChatRealtimeModel,
-	defaultTranscriptionModel
+	defaultTranscriptionModel,
+	defaultTranslationModel,
+	TranslationModelSchema
 } from '@/realtime/modelConfig'
 
 export const LanguageCodeSchema = z
@@ -67,6 +69,30 @@ export const CreateRealtimeTranscriptionSessionActionOutputSchema = z.object({
 	value: z.string().min(1)
 })
 
+export const TranslateFallbackActionInputSchema = z.object({
+	model: TranslationModelSchema.default(defaultTranslationModel),
+	myLanguageCode: LanguageCodeSchema,
+	sourceText: z.string().min(1).max(4000),
+	translateToLanguageCode: LanguageCodeSchema
+})
+
+export const TranslateFallbackActionOutputSchema = z.discriminatedUnion('ok', [
+	z.object({
+		error: z.string().min(1),
+		ok: z.literal(false)
+	}),
+	z.object({
+		ok: z.literal(true),
+		result: z.object({
+			direction: z.enum(['my_to_target', 'target_to_my']),
+			sourceLanguageCode: LanguageCodeSchema,
+			sourceText: z.string().min(1),
+			targetLanguageCode: LanguageCodeSchema,
+			translatedText: z.string().min(1)
+		})
+	})
+])
+
 export const PublishTranslationToolArgumentsSchema = z.object({
 	direction: z.enum(['my_to_target', 'target_to_my']),
 	sourceLanguageCode: LanguageCodeSchema,
@@ -222,6 +248,19 @@ export const ResponseOutputItemDoneEventSchema = z
 	})
 	.passthrough()
 
+export const ResponseCreatedEventSchema = z
+	.object({
+		response: z
+			.object({
+				id: z.string().optional(),
+				metadata: z.record(z.string(), z.unknown()).optional()
+			})
+			.passthrough()
+			.optional(),
+		type: z.literal('response.created')
+	})
+	.passthrough()
+
 export const ResponseFunctionCallArgumentsDoneEventSchema = z
 	.object({
 		arguments: z.string().optional(),

From e257c13d4ccfb9fe9519feffc5675bffeca2266d Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Wed, 4 Mar 2026 16:33:19 -0500
Subject: [PATCH 11/24] Remove translate fallback and harden realtime tool path

---
 scripts/smoke/runLiveConversationSmoke.ts   |  10 +-
 src/app/actions/realtime.ts                 | 154 +--------
 src/realtime/liveTranslateRealtimeClient.ts | 334 ++++++++++++--------
 src/realtime/modeRuntimeStore.tsx           | 133 +-------
 src/realtime/schemas.ts                     |  35 +-
 5 files changed, 212 insertions(+), 454 deletions(-)

diff --git a/scripts/smoke/runLiveConversationSmoke.ts b/scripts/smoke/runLiveConversationSmoke.ts
index e80910e..3c824f6 100644
--- a/scripts/smoke/runLiveConversationSmoke.ts
+++ b/scripts/smoke/runLiveConversationSmoke.ts
@@ -35,6 +35,7 @@ const trackedProtocolErrorTextList = [
 	invalidItemIdErrorText,
 	...missingToolCallErrorTextList
 ]
+const maxTranslateFinalizationLatencyMilliseconds = 30_000
 
 const mobileViewports = [
 	{ height: 812, width: 375 },
@@ -274,6 +275,7 @@ async function runTranslateScenario(
 			throw new Error('Translate mode rendered internal status chips in user-facing UI.')
 		}
 
+		const translateStartTime = Date.now()
 		await waitForCondition(
 			async function hasTranslateCard(): Promise<boolean> {
 				const cardCount = await page.locator('[data-testid^="translate-card-"]').count()
@@ -289,9 +291,15 @@ async function runTranslateScenario(
 					return true
 				})
 			},
-			45_000,
+			20_000,
 			'Translate mode did not produce finalized translation output.'
 		)
+		const translateLatencyMilliseconds = Date.now() - translateStartTime
+		if (translateLatencyMilliseconds > maxTranslateFinalizationLatencyMilliseconds) {
+			throw new Error(
+				`Translate mode finalized too slowly (${translateLatencyMilliseconds}ms > ${maxTranslateFinalizationLatencyMilliseconds}ms).`
+			)
+		}
 
 		const subtitleRailText = await page.getByTestId('translate-live-subtitle-rail').innerText()
 		if (!subtitleRailText.trim()) {
diff --git a/src/app/actions/realtime.ts b/src/app/actions/realtime.ts
index 0f2e529..5f0d08e 100644
--- a/src/app/actions/realtime.ts
+++ b/src/app/actions/realtime.ts
@@ -1,6 +1,5 @@
 'use server'
 
-import { z } from 'zod'
 import { defaultTranscriptionModel } from '@/realtime/modelConfig'
 import {
 	CreateRealtimeClientSecretActionInputSchema,
@@ -9,10 +8,7 @@ import {
 	CreateRealtimeTranscriptionSessionActionOutputSchema,
 	CreateTranslateRealtimeClientSecretActionInputSchema,
 	CreateTranslateRealtimeClientSecretActionOutputSchema,
-	PublishTranslationToolArgumentsSchema,
-	parseClientSecretResponse,
-	TranslateFallbackActionInputSchema,
-	TranslateFallbackActionOutputSchema
+	parseClientSecretResponse
 } from '@/realtime/schemas'
 import env from '~/env'
 
@@ -22,37 +18,6 @@ const defaultRequestHeaders = {
 	'Content-Type': 'application/json'
 } satisfies HeadersInit
 
-const CreateChatCompletionResponseSchema = z
-	.object({
-		choices: z
-			.array(
-				z
-					.object({
-						message: z
-							.object({
-								content: z
-									.union([
-										z.string(),
-										z.array(
-											z
-												.object({
-													text: z.string().optional(),
-													type: z.string().optional()
-												})
-												.passthrough()
-										)
-									])
-									.optional()
-							})
-							.passthrough()
-							.optional()
-					})
-					.passthrough()
-			)
-			.min(1)
-	})
-	.passthrough()
-
 type OpenAiErrorPayload = {
 	code?: string
 	message: string
@@ -179,44 +144,6 @@ function buildPublishTranslationToolDefinition(): Record<string, unknown> {
 	}
 }
 
-function createFallbackTranslateInstructions(
-	myLanguageCode: string,
-	translateToLanguageCode: string
-): string {
-	return [
-		'You are Lilac fallback translation.',
-		`Language A: ${myLanguageCode}.`,
-		`Language B: ${translateToLanguageCode}.`,
-		'Detect whether input is language A or B and translate to the opposite language.',
-		'Return only JSON matching the schema.',
-		'Never include commentary, rationale, or extra keys.',
-		'Preserve intent, tone, punctuation, and named entities.'
-	].join('\n')
-}
-
-function extractChatCompletionMessageContent(payload: unknown): string {
-	const parsedPayload = CreateChatCompletionResponseSchema.parse(payload)
-	const firstChoice = parsedPayload.choices[0]
-	if (!firstChoice) throw new Error('Chat completion did not include a choice.')
-	const contentValue = firstChoice.message?.content
-	if (typeof contentValue === 'string') {
-		const normalizedContent = contentValue.trim()
-		if (normalizedContent) return normalizedContent
-	}
-	if (Array.isArray(contentValue)) {
-		let joinedText = ''
-		for (const contentPart of contentValue) {
-			if (!contentPart || typeof contentPart !== 'object') continue
-			const textValue = (contentPart as { text?: unknown }).text
-			if (typeof textValue !== 'string') continue
-			joinedText += textValue
-		}
-		const normalizedJoinedText = joinedText.trim()
-		if (normalizedJoinedText) return normalizedJoinedText
-	}
-	throw new Error('Chat completion did not include structured JSON text output.')
-}
-
 export async function createRealtimeClientSecretAction(input?: unknown): Promise<{
 	expiresAt: number
 	value: string
@@ -309,82 +236,3 @@ export async function createRealtimeTranscriptionSessionAction(input: unknown):
 	const parsedSecret = parseClientSecretResponse(payload)
 	return CreateRealtimeTranscriptionSessionActionOutputSchema.parse(parsedSecret)
 }
-
-export async function translateFallbackAction(
-	input: unknown
-): Promise<z.infer<typeof TranslateFallbackActionOutputSchema>> {
-	const parsedInput = TranslateFallbackActionInputSchema.parse(input)
-
-	try {
-		const payload = await postOpenAi('/chat/completions', {
-			messages: [
-				{
-					content: createFallbackTranslateInstructions(
-						parsedInput.myLanguageCode,
-						parsedInput.translateToLanguageCode
-					),
-					role: 'system'
-				},
-				{
-					content: parsedInput.sourceText,
-					role: 'user'
-				}
-			],
-			model: parsedInput.model,
-			response_format: {
-				json_schema: {
-					name: 'publish_translation',
-					schema: {
-						additionalProperties: false,
-						properties: {
-							direction: {
-								enum: ['my_to_target', 'target_to_my'],
-								type: 'string'
-							},
-							sourceLanguageCode: {
-								type: 'string'
-							},
-							sourceText: {
-								type: 'string'
-							},
-							targetLanguageCode: {
-								type: 'string'
-							},
-							translatedText: {
-								type: 'string'
-							}
-						},
-						required: [
-							'sourceText',
-							'sourceLanguageCode',
-							'targetLanguageCode',
-							'translatedText',
-							'direction'
-						],
-						type: 'object'
-					},
-					strict: true
-				},
-				type: 'json_schema'
-			}
-		})
-
-		const messageContent = extractChatCompletionMessageContent(payload)
-		const parsedResult = PublishTranslationToolArgumentsSchema.parse(
-			JSON.parse(messageContent) as unknown
-		)
-		return TranslateFallbackActionOutputSchema.parse({
-			ok: true,
-			result: parsedResult
-		})
-	} catch (error) {
-		const message =
-			error instanceof Error && error.message ? error.message : 'Fallback translation failed.'
-		const debugId = `fallback_${Date.now().toString(36)}`
-		console.error('[translateFallbackAction]', debugId, message)
-		return TranslateFallbackActionOutputSchema.parse({
-			error: `Translation retry failed. (${debugId})`,
-			ok: false
-		})
-	}
-}
diff --git a/src/realtime/liveTranslateRealtimeClient.ts b/src/realtime/liveTranslateRealtimeClient.ts
index 2cce57c..b87e13a 100644
--- a/src/realtime/liveTranslateRealtimeClient.ts
+++ b/src/realtime/liveTranslateRealtimeClient.ts
@@ -50,12 +50,11 @@ export type LiveTranslateRealtimeClientCallbacks = {
 type PendingResponseContext = {
 	inputOrigin: 'audio' | 'text'
 	itemId: string
-	retryCount: number
 	sourceText: string
 }
 
-const translationResponseTimeoutMilliseconds = 16_000
-const maxMissingToolCallRetryCount = 1
+const translationResponseTimeoutMilliseconds = 8_000
+const channelConnectTimeoutMilliseconds = 7_000
 
 function createTranslateInstructions(
 	myLanguageCode: string,
@@ -176,16 +175,17 @@ function tryExtractToolArgumentsFromResponseOutput(
 }
 
 export class LiveTranslateRealtimeClient {
+	private activeRequestId: null | string = null
 	private callbacks: LiveTranslateRealtimeClientCallbacks
+	private connectTimeoutId: null | number = null
 	private completedToolArgumentsByResponseId = new Map<string, string>()
 	private dataChannel: null | RTCDataChannel = null
 	private generation = 0
-	private pendingRequestIdQueue: string[] = []
+	private pendingInputQueue: PendingResponseContext[] = []
 	private pendingRequestIdByResponseId = new Map<string, string>()
 	private pendingResponseContextByRequestId = new Map<string, PendingResponseContext>()
 	private pendingResponseTimeoutByRequestId = new Map<string, number>()
 	private peerConnection: null | RTCPeerConnection = null
-	private sourceItemOrder: string[] = []
 	private state: LiveTranslateRealtimeClientState = 'disconnected'
 
 	public constructor(callbacks: LiveTranslateRealtimeClientCallbacks) {
@@ -209,12 +209,23 @@ export class LiveTranslateRealtimeClient {
 
 			const peerConnection = new RTCPeerConnection()
 			this.peerConnection = peerConnection
+			peerConnection.addTransceiver('audio', {
+				direction: 'recvonly'
+			})
 
 			const dataChannel = peerConnection.createDataChannel('oai-events')
 			this.dataChannel = dataChannel
+			this.connectTimeoutId = window.setTimeout(() => {
+				if (generation !== this.generation) return
+				if (this.state === 'connected') return
+				this.callbacks.onError('Translate data channel did not open in time.')
+				this.setState('error')
+				this.stop()
+			}, channelConnectTimeoutMilliseconds)
 
 			dataChannel.addEventListener('open', () => {
 				if (generation !== this.generation) return
+				this.clearConnectTimeout()
 				this.setState('connected')
 				this.updateTranslateSettings({
 					myLanguageCode: input.myLanguageCode,
@@ -224,6 +235,7 @@ export class LiveTranslateRealtimeClient {
 
 			dataChannel.addEventListener('close', () => {
 				if (generation !== this.generation) return
+				this.clearConnectTimeout()
 				this.setState('disconnected')
 			})
 
@@ -265,15 +277,16 @@ export class LiveTranslateRealtimeClient {
 
 	public stop(): void {
 		this.generation += 1
+		this.clearConnectTimeout()
+		this.activeRequestId = null
+		this.pendingInputQueue = []
 		this.completedToolArgumentsByResponseId.clear()
 		this.pendingResponseTimeoutByRequestId.forEach(timeoutId => {
 			window.clearTimeout(timeoutId)
 		})
 		this.pendingResponseTimeoutByRequestId.clear()
-		this.pendingRequestIdQueue = []
 		this.pendingRequestIdByResponseId.clear()
 		this.pendingResponseContextByRequestId.clear()
-		this.sourceItemOrder = []
 
 		try {
 			this.dataChannel?.close()
@@ -294,22 +307,12 @@ export class LiveTranslateRealtimeClient {
 	public submitInput(input: TranslateInputPayload): void {
 		const normalizedText = input.text.trim()
 		if (!normalizedText) return
-		this.registerSourceItem(input.itemId)
-		this.sendEvent({
-			item: {
-				content: [
-					{
-						text: normalizedText,
-						type: 'input_text'
-					}
-				],
-				id: input.itemId,
-				role: 'user',
-				type: 'message'
-			},
-			type: 'conversation.item.create'
+		this.pendingInputQueue.push({
+			inputOrigin: input.inputOrigin,
+			itemId: input.itemId,
+			sourceText: normalizedText
 		})
-		this.requestTranslationResponse(input.itemId, input.inputOrigin, normalizedText)
+		this.drainResponseQueue()
 	}
 
 	public updateTranslateSettings(settings: LiveTranslateSettings): void {
@@ -324,39 +327,127 @@ export class LiveTranslateRealtimeClient {
 		})
 	}
 
-	private buildResponseInput(itemId: string): Array<Record<string, string>> {
-		const recentItemIdList = this.sourceItemOrder.slice(Math.max(0, this.sourceItemOrder.length - 12))
-		if (!recentItemIdList.includes(itemId)) recentItemIdList.push(itemId)
-		return recentItemIdList.map(sourceItemId => ({
-			id: sourceItemId,
-			type: 'item_reference'
-		}))
-	}
-
 	private setState(state: LiveTranslateRealtimeClientState): void {
 		this.state = state
 		this.callbacks.onConnectionStateChange(state)
 	}
 
+	private clearConnectTimeout(): void {
+		if (typeof this.connectTimeoutId !== 'number') return
+		window.clearTimeout(this.connectTimeoutId)
+		this.connectTimeoutId = null
+	}
+
+	private createErrorPatch(
+		itemId: string,
+		inputOrigin: 'audio' | 'text',
+		sourceText: string,
+		translatedText: string,
+		responseId?: string
+	): LiveTranslateResultPatch {
+		return {
+			direction: 'my_to_target',
+			inputOrigin,
+			itemId,
+			sourceLanguageCode: 'und',
+			sourceText,
+			status: 'error',
+			targetLanguageCode: 'und',
+			translatedText,
+			...(responseId ? { responseId } : {})
+		}
+	}
+
+	private emitAndReportErrorPatch(
+		itemId: string,
+		inputOrigin: 'audio' | 'text',
+		sourceText: string,
+		errorMessage: string,
+		responseId?: string
+	): void {
+		this.callbacks.onResultPatch(
+			this.createErrorPatch(itemId, inputOrigin, sourceText, errorMessage, responseId)
+		)
+		this.callbacks.onError(errorMessage)
+	}
+
+	private clearPendingRequestState(requestId: string): null | PendingResponseContext {
+		const pendingContext = this.pendingResponseContextByRequestId.get(requestId) ?? null
+		this.pendingResponseContextByRequestId.delete(requestId)
+		this.pendingRequestIdByResponseId.forEach((mappedRequestId, responseId) => {
+			if (mappedRequestId !== requestId) return
+			this.pendingRequestIdByResponseId.delete(responseId)
+		})
+		this.clearPendingRequestTimeout(requestId)
+		if (this.activeRequestId === requestId) {
+			this.activeRequestId = null
+		}
+		return pendingContext
+	}
+
+	private getStatusErrorMessage(
+		event: ReturnType<typeof ResponseDoneEventSchema.parse>,
+		defaultMessage: string
+	): string {
+		const statusDetails = event.response?.status_details
+		if (!statusDetails || typeof statusDetails !== 'object') return defaultMessage
+		const detailsRecord = statusDetails as Record<string, unknown>
+		const errorRecord =
+			typeof detailsRecord.error === 'object' && detailsRecord.error !== null
+				? (detailsRecord.error as Record<string, unknown>)
+				: null
+		return (
+			parseStringValue(errorRecord?.message) ??
+			parseStringValue(detailsRecord.reason) ??
+			parseStringValue(detailsRecord.message) ??
+			defaultMessage
+		)
+	}
+
 	private handleResponseDoneEvent(event: ReturnType<typeof ResponseDoneEventSchema.parse>): void {
 		const response = event.response
 		if (!response) return
 		const responseStatus = parseStringValue(response.status)?.toLowerCase() ?? null
 
-		const metadata = response.metadata ?? {}
+		const metadata =
+			response.metadata && typeof response.metadata === 'object'
+				? (response.metadata as Record<string, unknown>)
+				: {}
 		const responseId = parseStringValue(response.id) ?? parseStringValue(event.response_id)
 		const requestId =
 			parseStringValue(metadata.request_id) ??
-			(responseId ? (this.pendingRequestIdByResponseId.get(responseId) ?? null) : null)
+			(responseId ? this.pendingRequestIdByResponseId.get(responseId) : null) ??
+			this.activeRequestId
 		const sourceItemIdFromMetadata = parseStringValue(metadata.source_item_id)
 		const inputOriginFromMetadata = parseStringValue(metadata.input_origin)
 		if (responseId) this.pendingRequestIdByResponseId.delete(responseId)
 
-		const pendingContext = this.resolvePendingContext(requestId)
+		const pendingContext = requestId ? this.clearPendingRequestState(requestId) : null
 		const sourceItemId = sourceItemIdFromMetadata ?? pendingContext?.itemId ?? null
 		const rawInputOrigin = inputOriginFromMetadata ?? pendingContext?.inputOrigin ?? null
 		const inputOrigin: 'audio' | 'text' = rawInputOrigin === 'text' ? 'text' : 'audio'
-		if (!sourceItemId) return
+		const sourceText = pendingContext?.sourceText ?? ''
+		if (!sourceItemId) {
+			if (this.activeRequestId === requestId) this.activeRequestId = null
+			this.drainResponseQueue()
+			return
+		}
+
+		if (responseStatus && responseStatus !== 'completed') {
+			const statusMessage = this.getStatusErrorMessage(
+				event,
+				`Translation failed with status ${responseStatus}.`
+			)
+			this.emitAndReportErrorPatch(
+				sourceItemId,
+				inputOrigin,
+				sourceText,
+				statusMessage,
+				responseId ?? undefined
+			)
+			this.drainResponseQueue()
+			return
+		}
 
 		const functionCall = (response.output ?? []).find(
 			item => item.type === 'function_call' && item.name === 'publish_translation'
@@ -372,28 +463,17 @@ export class LiveTranslateRealtimeClient {
 			inferredToolArguments
 
 		if (!toolArguments) {
-			if (pendingContext && pendingContext.retryCount < maxMissingToolCallRetryCount) {
-				this.requestTranslationResponse(
-					pendingContext.itemId,
-					pendingContext.inputOrigin,
-					pendingContext.sourceText,
-					pendingContext.retryCount + 1
-				)
-				return
-			}
-			this.callbacks.onResultPatch({
-				direction: 'my_to_target',
+			const message = responseStatus
+				? `No valid publish_translation tool call was returned (${responseStatus}).`
+				: 'No valid publish_translation tool call was returned.'
+			this.emitAndReportErrorPatch(
+				sourceItemId,
 				inputOrigin,
-				itemId: sourceItemId,
-				sourceLanguageCode: 'und',
-				sourceText: pendingContext?.sourceText ?? '',
-				status: 'error',
-				targetLanguageCode: 'und',
-				translatedText: responseStatus
-					? `No valid publish_translation tool call was returned (${responseStatus}).`
-					: 'No valid publish_translation tool call was returned.',
-				...(responseId ? { responseId } : {})
-			})
+				sourceText,
+				message,
+				responseId ?? undefined
+			)
+			this.drainResponseQueue()
 			return
 		}
 
@@ -412,18 +492,16 @@ export class LiveTranslateRealtimeClient {
 				...(responseId ? { responseId } : {})
 			})
 		} catch {
-			this.callbacks.onResultPatch({
-				direction: 'my_to_target',
+			this.emitAndReportErrorPatch(
+				sourceItemId,
 				inputOrigin,
-				itemId: sourceItemId,
-				sourceLanguageCode: 'und',
-				sourceText: pendingContext?.sourceText ?? '',
-				status: 'error',
-				targetLanguageCode: 'und',
-				translatedText: 'Tool arguments were malformed and could not be parsed.',
-				...(responseId ? { responseId } : {})
-			})
+				sourceText,
+				'Tool arguments were malformed and could not be parsed.',
+				responseId ?? undefined
+			)
 		}
+
+		this.drainResponseQueue()
 	}
 
 	private handleResponseCreatedEvent(
@@ -496,7 +574,9 @@ export class LiveTranslateRealtimeClient {
 				}
 				case 'error': {
 					const event = RealtimeErrorEventSchema.parse(candidate)
-					this.callbacks.onError(event.error?.message || 'Realtime session error')
+					const message = event.error?.message || 'Realtime session error'
+					this.callbacks.onError(message)
+					this.failActiveRequest(message)
 					return
 				}
 				default:
@@ -507,14 +587,6 @@ export class LiveTranslateRealtimeClient {
 		}
 	}
 
-	private registerSourceItem(itemId: string): void {
-		if (this.sourceItemOrder.includes(itemId)) return
-		this.sourceItemOrder.push(itemId)
-		if (this.sourceItemOrder.length > 64) {
-			this.sourceItemOrder = this.sourceItemOrder.slice(this.sourceItemOrder.length - 64)
-		}
-	}
-
 	private clearPendingRequestTimeout(requestId: string): void {
 		const timeoutId = this.pendingResponseTimeoutByRequestId.get(requestId)
 		if (typeof timeoutId === 'number') {
@@ -523,83 +595,55 @@ export class LiveTranslateRealtimeClient {
 		this.pendingResponseTimeoutByRequestId.delete(requestId)
 	}
 
-	private removePendingRequestIdFromQueue(requestId: string): void {
-		const requestIndex = this.pendingRequestIdQueue.indexOf(requestId)
-		if (requestIndex === -1) return
-		this.pendingRequestIdQueue.splice(requestIndex, 1)
-	}
-
-	private resolvePendingContext(requestId: null | string): null | PendingResponseContext {
-		if (requestId) {
-			const directContext = this.pendingResponseContextByRequestId.get(requestId) ?? null
-			this.pendingResponseContextByRequestId.delete(requestId)
-			this.clearPendingRequestTimeout(requestId)
-			this.removePendingRequestIdFromQueue(requestId)
-			if (directContext) return directContext
+	private failActiveRequest(errorMessage: string): void {
+		if (!this.activeRequestId) return
+		const pendingContext = this.clearPendingRequestState(this.activeRequestId)
+		if (pendingContext) {
+			this.emitAndReportErrorPatch(
+				pendingContext.itemId,
+				pendingContext.inputOrigin,
+				pendingContext.sourceText,
+				errorMessage
+			)
 		}
-
-		const fallbackRequestId = this.pendingRequestIdQueue.shift()
-		if (!fallbackRequestId) return null
-		const fallbackContext = this.pendingResponseContextByRequestId.get(fallbackRequestId) ?? null
-		this.pendingResponseContextByRequestId.delete(fallbackRequestId)
-		this.clearPendingRequestTimeout(fallbackRequestId)
-		return fallbackContext
+		this.drainResponseQueue()
 	}
 
-	private requestTranslationResponse(
-		itemId: string,
-		inputOrigin: 'audio' | 'text',
-		sourceText: string,
-		retryCount = 0
-	): void {
+	private requestTranslationResponse(pendingContext: PendingResponseContext): void {
 		const requestId = crypto.randomUUID()
-		this.pendingResponseContextByRequestId.set(requestId, {
-			inputOrigin,
-			itemId,
-			retryCount,
-			sourceText
-		})
-		this.pendingRequestIdQueue.push(requestId)
+		this.activeRequestId = requestId
+		this.pendingResponseContextByRequestId.set(requestId, pendingContext)
 		const timeoutId = window.setTimeout(() => {
-			const pendingContext = this.pendingResponseContextByRequestId.get(requestId)
-			if (!pendingContext) return
-			this.pendingResponseContextByRequestId.delete(requestId)
-			this.removePendingRequestIdFromQueue(requestId)
-			this.clearPendingRequestTimeout(requestId)
-
-			if (pendingContext.retryCount < maxMissingToolCallRetryCount) {
-				this.requestTranslationResponse(
-					pendingContext.itemId,
-					pendingContext.inputOrigin,
-					pendingContext.sourceText,
-					pendingContext.retryCount + 1
-				)
-				return
-			}
-
-			this.callbacks.onResultPatch({
-				direction: 'my_to_target',
-				inputOrigin: pendingContext.inputOrigin,
-				itemId: pendingContext.itemId,
-				sourceLanguageCode: 'und',
-				sourceText: pendingContext.sourceText,
-				status: 'error',
-				targetLanguageCode: 'und',
-				translatedText: 'Translation timed out before tool output was returned.'
-			})
+			const timedOutContext = this.clearPendingRequestState(requestId)
+			if (!timedOutContext) return
+			this.emitAndReportErrorPatch(
+				timedOutContext.itemId,
+				timedOutContext.inputOrigin,
+				timedOutContext.sourceText,
+				'Translation timed out before tool output was returned.'
+			)
+			this.drainResponseQueue()
 		}, translationResponseTimeoutMilliseconds)
 		this.pendingResponseTimeoutByRequestId.set(requestId, timeoutId)
 		this.sendEvent({
 			response: {
 				conversation: 'none',
-				input: this.buildResponseInput(itemId),
-				instructions:
-					'Translate the referenced user item and call publish_translation exactly once. Do not return plain assistant text.',
+				input: [
+					{
+						content: [
+							{
+								text: pendingContext.sourceText,
+								type: 'input_text'
+							}
+						],
+						role: 'user',
+						type: 'message'
+					}
+				],
 				metadata: {
-					input_origin: inputOrigin,
+					input_origin: pendingContext.inputOrigin,
 					request_id: requestId,
-					retry_count: retryCount,
-					source_item_id: itemId
+					source_item_id: pendingContext.itemId
 				},
 				output_modalities: ['text'],
 				tool_choice: buildToolChoice(),
@@ -609,6 +653,16 @@ export class LiveTranslateRealtimeClient {
 		})
 	}
 
+	private drainResponseQueue(): void {
+		if (this.activeRequestId) return
+		while (this.pendingInputQueue.length > 0) {
+			const pendingContext = this.pendingInputQueue.shift()
+			if (!pendingContext) continue
+			this.requestTranslationResponse(pendingContext)
+			return
+		}
+	}
+
 	private sendSessionUpdate(sessionPatch: Record<string, unknown>): void {
 		this.sendEvent({
 			session: {
diff --git a/src/realtime/modeRuntimeStore.tsx b/src/realtime/modeRuntimeStore.tsx
index 23f37b3..0837f6f 100644
--- a/src/realtime/modeRuntimeStore.tsx
+++ b/src/realtime/modeRuntimeStore.tsx
@@ -11,7 +11,6 @@ import {
 	useState
 } from 'react'
 
-import { translateFallbackAction } from '@/app/actions/realtime'
 import { ChatRealtimeClient, type ChatTranscriptPatch } from '@/realtime/chatRealtimeClient'
 import { normalizeLanguageCode, resolveLanguageCode } from '@/realtime/languageCatalog'
 import {
@@ -95,10 +94,9 @@ type PendingTranslateInput = TranslateInputPayload & {
 	previousItemId?: null | string
 }
 
-const subtitleAggregationSilenceMilliseconds = 1200
+const subtitleAggregationSilenceMilliseconds = 600
 const reconnectStatusGraceMilliseconds = 1500
 const subtitleDedupRoundedTimeWindowMilliseconds = 700
-const translateFallbackTimeoutMilliseconds = 18_000
 const systemLeakMatcherList = SystemLeakTextSchema.parse(undefined).map(matcher =>
 	matcher.toLowerCase()
 )
@@ -413,13 +411,10 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	const pendingTranslateInputQueueRef = useRef<PendingTranslateInput[]>([])
 	const chatTranscriptSequenceRef = useRef(1)
 	const subtitleDedupKeyTimestampByKeyRef = useRef<Map<string, number>>(new Map())
-	const translateCardListRef = useRef<UtteranceCard[]>([])
 	const translateSegmentAggregationStateRef = useRef<TranslateSegmentAggregationState>(
 		defaultTranslateSegmentAggregationState
 	)
 	const translateAggregationFlushTimerRef = useRef<null | number>(null)
-	const translateFallbackTimeoutByCardIdRef = useRef<Map<string, number>>(new Map())
-	const translateFallbackInFlightCardIdSetRef = useRef<Set<string>>(new Set())
 	const reconnectTimerByChannelRef = useRef<Partial<Record<RuntimeChannel, number>>>({})
 	const reconnectStatusTimerRef = useRef<null | number>(null)
 	const scheduleReconnectRef = useRef<(channel: RuntimeChannel) => void>(() => {})
@@ -447,14 +442,6 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		translateAggregationFlushTimerRef.current = null
 	}, [])
 
-	const clearAllTranslateFallbackTimeouts = useCallback(() => {
-		translateFallbackTimeoutByCardIdRef.current.forEach(timeoutId => {
-			window.clearTimeout(timeoutId)
-		})
-		translateFallbackTimeoutByCardIdRef.current.clear()
-		translateFallbackInFlightCardIdSetRef.current.clear()
-	}, [])
-
 	const stopChatClient = useCallback(() => {
 		intentionalStopByChannelRef.current.chat = true
 		chatClientRef.current?.stop()
@@ -480,7 +467,6 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		void subtitleClientRef.current?.stop()
 		subtitleClientRef.current = null
 		clearTranslateAggregationFlushTimer()
-		clearAllTranslateFallbackTimeouts()
 		translateSegmentAggregationStateRef.current = defaultTranslateSegmentAggregationState
 		setSubtitleChannelState('disconnected')
 		setLiveSubtitleState(previousState => ({
@@ -493,7 +479,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		queueMicrotask(() => {
 			intentionalStopByChannelRef.current.subtitle = false
 		})
-	}, [clearAllTranslateFallbackTimeouts, clearTranslateAggregationFlushTimer])
+	}, [clearTranslateAggregationFlushTimer])
 
 	const stopAllClients = useCallback(() => {
 		stopChatClient()
@@ -510,9 +496,8 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		subtitleDedupKeyTimestampByKeyRef.current.clear()
 		chatTranscriptSequenceRef.current = 1
 		clearTranslateAggregationFlushTimer()
-		clearAllTranslateFallbackTimeouts()
 		pendingTranslateInputQueueRef.current = []
-	}, [clearAllTranslateFallbackTimeouts, clearTranslateAggregationFlushTimer])
+	}, [clearTranslateAggregationFlushTimer])
 
 	const shouldRunChannelForMode = useCallback(
 		(channel: RuntimeChannel, activeMode: LilacMode): boolean => {
@@ -554,109 +539,6 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		[flushPendingTranslateInputs]
 	)
 
-	const runTranslateFallbackForCard = useCallback(async (cardId: string) => {
-		if (translateFallbackInFlightCardIdSetRef.current.has(cardId)) return
-		const currentCard = translateCardListRef.current.find(card => card.id === cardId)
-		if (!currentCard) return
-		if (currentCard.status !== 'streaming' && currentCard.status !== 'translating') return
-		const sourceText = normalizeWhitespace(currentCard.sourceText)
-		if (!sourceText) return
-
-		translateFallbackInFlightCardIdSetRef.current.add(cardId)
-		try {
-			const fallbackResult = await translateFallbackAction({
-				myLanguageCode: translateSettingsRef.current.myLanguageCode,
-				sourceText,
-				translateToLanguageCode: translateSettingsRef.current.translateToLanguageCode
-			})
-			if (!fallbackResult.ok) {
-				setTranslateCards(previousCards =>
-					previousCards.map(card => {
-						if (card.id !== cardId) return card
-						if (card.status === 'final' || card.status === 'error') return card
-						return {
-							...card,
-							errorMessage: fallbackResult.error,
-							status: 'error',
-							translatedText: fallbackResult.error
-						}
-					})
-				)
-				return
-			}
-
-			const translationResult = fallbackResult.result
-			setTranslateCards(previousCards =>
-				previousCards.map(card => {
-					if (card.id !== cardId) return card
-					if (card.status === 'final' || card.status === 'error') return card
-					return {
-						...card,
-						direction: translationResult.direction,
-						sourceLanguageCode: normalizeLanguageCode(translationResult.sourceLanguageCode),
-						sourceText: normalizeWhitespace(translationResult.sourceText) || card.sourceText,
-						status: 'final',
-						targetLanguageCode: normalizeLanguageCode(translationResult.targetLanguageCode),
-						translatedText: translationResult.translatedText
-					}
-				})
-			)
-		} catch (error) {
-			const message =
-				error instanceof Error && error.message
-					? error.message
-					: 'Translation retry failed before completion.'
-			setTranslateCards(previousCards =>
-				previousCards.map(card => {
-					if (card.id !== cardId) return card
-					if (card.status === 'final' || card.status === 'error') return card
-					return {
-						...card,
-						errorMessage: message,
-						status: 'error',
-						translatedText: message
-					}
-				})
-			)
-		} finally {
-			translateFallbackInFlightCardIdSetRef.current.delete(cardId)
-		}
-	}, [])
-
-	useEffect(() => {
-		if (mode !== 'translate') {
-			clearAllTranslateFallbackTimeouts()
-			return
-		}
-
-		const activeTranslatingCardIdSet = new Set<string>()
-		for (const card of translateCards) {
-			const translatedText = card.translatedText.trim()
-			if ((card.status !== 'streaming' && card.status !== 'translating') || translatedText) continue
-			activeTranslatingCardIdSet.add(card.id)
-			if (translateFallbackTimeoutByCardIdRef.current.has(card.id)) continue
-			const timeoutId = window.setTimeout(() => {
-				translateFallbackTimeoutByCardIdRef.current.delete(card.id)
-				void runTranslateFallbackForCard(card.id)
-			}, translateFallbackTimeoutMilliseconds)
-			translateFallbackTimeoutByCardIdRef.current.set(card.id, timeoutId)
-		}
-
-		translateFallbackTimeoutByCardIdRef.current.forEach((timeoutId, cardId) => {
-			if (activeTranslatingCardIdSet.has(cardId)) return
-			window.clearTimeout(timeoutId)
-			translateFallbackTimeoutByCardIdRef.current.delete(cardId)
-		})
-
-		return () => {
-			translateFallbackTimeoutByCardIdRef.current.forEach((timeoutId, cardId) => {
-				if (activeTranslatingCardIdSet.has(cardId)) return
-				window.clearTimeout(timeoutId)
-				translateFallbackTimeoutByCardIdRef.current.delete(cardId)
-			})
-		}
-	}, [clearAllTranslateFallbackTimeouts, mode, runTranslateFallbackForCard, translateCards])
-
 	const flushTranslateSegmentAggregation = useCallback(() => {
 		const aggregateState = translateSegmentAggregationStateRef.current
 		const activeUtteranceId = aggregateState.activeUtteranceId
@@ -1022,10 +904,6 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		chatSpeechOutputEnabledRef.current = chatOutputSettings.speechOutputEnabled
 	}, [chatOutputSettings.speechOutputEnabled])
 
-	useEffect(() => {
-		translateCardListRef.current = translateCards
-	}, [translateCards])
-
 	useEffect(() => {
 		modeRef.current = mode
 	}, [mode])
@@ -1384,11 +1262,6 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				window.clearTimeout(translateAggregationFlushTimerRef.current)
 				translateAggregationFlushTimerRef.current = null
 			}
-			translateFallbackTimeoutByCardIdRef.current.forEach(timeoutId => {
-				window.clearTimeout(timeoutId)
-			})
-			translateFallbackTimeoutByCardIdRef.current.clear()
-			translateFallbackInFlightCardIdSetRef.current.clear()
 		}
 	}, [])
 
diff --git a/src/realtime/schemas.ts b/src/realtime/schemas.ts
index a340d30..50a9424 100644
--- a/src/realtime/schemas.ts
+++ b/src/realtime/schemas.ts
@@ -3,9 +3,7 @@ import { isValidLanguageCode, normalizeLanguageCode } from '@/realtime/languageC
 import {
 	ChatRealtimeModelSchema,
 	defaultChatRealtimeModel,
-	defaultTranscriptionModel,
-	defaultTranslationModel,
-	TranslationModelSchema
+	defaultTranscriptionModel
 } from '@/realtime/modelConfig'
 
 export const LanguageCodeSchema = z
@@ -69,30 +67,6 @@ export const CreateRealtimeTranscriptionSessionActionOutputSchema = z.object({
 	value: z.string().min(1)
 })
 
-export const TranslateFallbackActionInputSchema = z.object({
-	model: TranslationModelSchema.default(defaultTranslationModel),
-	myLanguageCode: LanguageCodeSchema,
-	sourceText: z.string().min(1).max(4000),
-	translateToLanguageCode: LanguageCodeSchema
-})
-
-export const TranslateFallbackActionOutputSchema = z.discriminatedUnion('ok', [
-	z.object({
-		error: z.string().min(1),
-		ok: z.literal(false)
-	}),
-	z.object({
-		ok: z.literal(true),
-		result: z.object({
-			direction: z.enum(['my_to_target', 'target_to_my']),
-			sourceLanguageCode: LanguageCodeSchema,
-			sourceText: z.string().min(1),
-			targetLanguageCode: LanguageCodeSchema,
-			translatedText: z.string().min(1)
-		})
-	})
-])
-
 export const PublishTranslationToolArgumentsSchema = z.object({
 	direction: z.enum(['my_to_target', 'target_to_my']),
 	sourceLanguageCode: LanguageCodeSchema,
@@ -253,7 +227,7 @@ export const ResponseCreatedEventSchema = z
 		response: z
 			.object({
 				id: z.string().optional(),
-				metadata: z.record(z.string(), z.unknown()).optional()
+				metadata: z.record(z.string(), z.unknown()).nullable().optional()
 			})
 			.passthrough()
 			.optional(),
@@ -293,9 +267,10 @@ export const ResponseDoneEventSchema = z
 		response: z
 			.object({
 				id: z.string().optional(),
-				metadata: z.record(z.string(), z.unknown()).optional(),
+				metadata: z.record(z.string(), z.unknown()).nullable().optional(),
 				output: z.array(ResponseDoneFunctionCallItemSchema).optional(),
-				status: z.string().optional()
+				status: z.string().optional(),
+				status_details: z.record(z.string(), z.unknown()).nullable().optional()
 			})
 			.passthrough()
 			.optional(),

From 8ae75eac6cd7be71c5c3a17d538331a6d7506b09 Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Wed, 4 Mar 2026 17:31:26 -0500
Subject: [PATCH 12/24] feat: stream draft translations before deterministic
 final tool output

---
 scripts/smoke/runLiveConversationSmoke.ts   |  58 +-
 src/app/(app)/TranslateMode.tsx             |  28 +-
 src/app/actions/realtime.ts                 |  22 +-
 src/realtime/liveTranslateRealtimeClient.ts | 685 ++++++++++++--------
 src/realtime/modeRuntimeStore.tsx           | 548 +++++++++++-----
 src/realtime/modelConfig.ts                 |  14 +-
 src/realtime/schemas.ts                     |  41 +-
 src/realtime/sessionTypes.ts                |   9 +-
 src/realtime/subtitleTranscriptionClient.ts |  62 +-
 9 files changed, 1023 insertions(+), 444 deletions(-)

diff --git a/scripts/smoke/runLiveConversationSmoke.ts b/scripts/smoke/runLiveConversationSmoke.ts
index 3c824f6..b3cc4a7 100644
--- a/scripts/smoke/runLiveConversationSmoke.ts
+++ b/scripts/smoke/runLiveConversationSmoke.ts
@@ -19,6 +19,7 @@ type SmokeRunOptions = {
 
 type ScenarioResult = {
 	failures: string[]
+	metrics?: Record<string, number | string>
 	mode: SmokeMode
 }
 
@@ -36,6 +37,8 @@ const trackedProtocolErrorTextList = [
 	...missingToolCallErrorTextList
 ]
 const maxTranslateFinalizationLatencyMilliseconds = 30_000
+const translateCardSelector =
+	'[data-testid^="translate-card-"]:not([data-testid="translate-card-list"])'
 
 const mobileViewports = [
 	{ height: 812, width: 375 },
@@ -147,6 +150,16 @@ async function closeOverlayIfPresent(page: Page): Promise<void> {
 	}
 }
 
+async function ensureVoiceInputEnabled(page: Page): Promise<void> {
+	const voiceToggle = page.getByTestId('header-voice-input-toggle')
+	await voiceToggle.waitFor({ state: 'visible', timeout: 10_000 })
+	const ariaLabel = (await voiceToggle.getAttribute('aria-label')) ?? ''
+	if (ariaLabel.toLowerCase().includes('enable microphone')) {
+		await voiceToggle.click()
+		await page.waitForTimeout(500)
+	}
+}
+
 async function writeScenarioArtifacts(
 	page: Page,
 	artifactDirectoryPath: string,
@@ -248,10 +261,13 @@ async function runTranslateScenario(
 	artifactDirectoryPath: string
 ): Promise<ScenarioResult> {
 	const failures: string[] = []
+	const metrics: Record<string, number | string> = {}
 	let connectionFailureMessage: null | string = null
 	try {
 		await closeOverlayIfPresent(page)
+		await switchToModeWithRetry(page, 'chat')
 		await switchToModeWithRetry(page, 'translate')
+		await ensureVoiceInputEnabled(page)
 		try {
 			await waitForConnectionLive(page)
 		} catch (error) {
@@ -275,11 +291,40 @@ async function runTranslateScenario(
 			throw new Error('Translate mode rendered internal status chips in user-facing UI.')
 		}
 
+		const typedTranslateInput = `translate smoke ${Date.now()}`
+		await page.getByTestId('translate-text-input').fill(typedTranslateInput)
+		await page.getByTestId('translate-text-send').click()
+
 		const translateStartTime = Date.now()
+		await waitForCondition(
+			async function hasTranslateCardShell(): Promise<boolean> {
+				const cardCount = await page.locator(translateCardSelector).count()
+				return cardCount > 0
+			},
+			12_000,
+			'Translate mode did not create a subtitle card.'
+		)
+		metrics.firstCardLatencyMs = Date.now() - translateStartTime
+
+		await waitForCondition(
+			async function hasDraftRenderState(): Promise<boolean> {
+				const draftCardCount = await page
+					.locator(`${translateCardSelector}[data-render-state="draft"]`)
+					.count()
+				return draftCardCount > 0
+			},
+			12_000,
+			'Translate mode did not stream draft translation state before final output.'
+		)
+		metrics.firstDraftLatencyMs = Date.now() - translateStartTime
+
 		await waitForCondition(
 			async function hasTranslateCard(): Promise<boolean> {
-				const cardCount = await page.locator('[data-testid^="translate-card-"]').count()
+				const cardCount = await page.locator(translateCardSelector).count()
 				if (cardCount === 0) return false
+				const hasFinalCard =
+					(await page.locator(`${translateCardSelector}[data-render-state="final"]`).count()) > 0
+				if (!hasFinalCard) return false
 				const targetTextList = await page
 					.locator('[data-testid^="translate-card-target-"]')
 					.allInnerTexts()
@@ -288,6 +333,7 @@ async function runTranslateScenario(
 					if (!normalizedText) return false
 					if (normalizedText === 'Translating…') return false
 					if (normalizedText === 'Translating...') return false
+					if (normalizedText === 'Listening…') return false
 					return true
 				})
 			},
@@ -295,11 +341,20 @@ async function runTranslateScenario(
 			'Translate mode did not produce finalized translation output.'
 		)
 		const translateLatencyMilliseconds = Date.now() - translateStartTime
+		metrics.finalTranslationLatencyMs = translateLatencyMilliseconds
 		if (translateLatencyMilliseconds > maxTranslateFinalizationLatencyMilliseconds) {
 			throw new Error(
 				`Translate mode finalized too slowly (${translateLatencyMilliseconds}ms > ${maxTranslateFinalizationLatencyMilliseconds}ms).`
 			)
 		}
+		const draftLatencyMilliseconds =
+			typeof metrics.firstDraftLatencyMs === 'number' ? metrics.firstDraftLatencyMs : null
+		if (
+			typeof draftLatencyMilliseconds === 'number' &&
+			draftLatencyMilliseconds >= translateLatencyMilliseconds
+		) {
+			throw new Error('Translate mode did not emit draft output before final output.')
+		}
 
 		const subtitleRailText = await page.getByTestId('translate-live-subtitle-rail').innerText()
 		if (!subtitleRailText.trim()) {
@@ -323,6 +378,7 @@ async function runTranslateScenario(
 
 	return {
 		failures,
+		metrics,
 		mode: 'translate'
 	}
 }
diff --git a/src/app/(app)/TranslateMode.tsx b/src/app/(app)/TranslateMode.tsx
index bdce679..ba31168 100644
--- a/src/app/(app)/TranslateMode.tsx
+++ b/src/app/(app)/TranslateMode.tsx
@@ -406,24 +406,32 @@ export default function TranslateMode() {
 							const routeLabel = `${resolveLanguageLabel(card.sourceLanguageCode)} → ${resolveLanguageLabel(
 								card.targetLanguageCode
 							)}`
-							const isTranslating = card.status === 'streaming' || card.status === 'translating'
-							const translationText =
-								card.translatedText.trim() ||
-								(card.status === 'error' ? (card.errorMessage ?? 'Translation failed.') : 'Translating…')
+							const finalTranslationText = card.translatedText.trim()
+							const draftTranslationText = card.draftTranslatedText?.trim() ?? ''
+							const isStreamingDraft =
+								card.renderState === 'draft' || card.status === 'streaming' || card.status === 'translating'
+							const translationText = finalTranslationText
+								? finalTranslationText
+								: draftTranslationText
+									? draftTranslationText
+									: card.status === 'error'
+										? (card.errorMessage ?? 'Translation failed.')
+										: 'Listening…'
 							return (
 								<article
 									key={card.id}
 									data-testid={`translate-card-${card.id}`}
-									className="rounded-lg border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] px-3 py-2.5"
+									data-render-state={card.renderState}
+									className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] px-3 py-2.5"
 								>
-									<div className="mb-1.5 flex items-center justify-between gap-2">
+									<div className="mb-1 flex items-center justify-between gap-2">
 										<p
-											className="font-semibold text-[0.83rem] tracking-[0.02em]"
+											className="font-semibold text-[0.78rem] tracking-[0.03em]"
 											style={{ color: getDirectionColor(card.direction) }}
 										>
 											{routeLabel}
 										</p>
-										{isTranslating ? (
+										{isStreamingDraft ? (
 											<div className="inline-flex items-center gap-1">
 												<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-[var(--lilac-direction-secondary)]" />
 												<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-[var(--lilac-direction-secondary)] [animation-delay:120ms]" />
@@ -433,13 +441,13 @@ export default function TranslateMode() {
 									</div>
 
 									<p
-										className="whitespace-pre-wrap break-words text-[1.05rem] text-[var(--lilac-ink)] leading-snug sm:text-[1.14rem]"
+										className="whitespace-pre-wrap break-words text-[1.1rem] text-[var(--lilac-ink)] leading-snug sm:text-[1.2rem]"
 										data-testid={`translate-card-target-${card.id}`}
 									>
 										{translationText}
 									</p>
 									<p
-										className="mt-1.5 whitespace-pre-wrap break-words text-[0.8rem] text-[var(--lilac-ink-muted)] leading-relaxed"
+										className="mt-1 whitespace-pre-wrap break-words text-[0.78rem] text-[var(--lilac-ink-muted)] leading-relaxed"
 										data-testid={`translate-card-source-${card.id}`}
 									>
 										<span className="mr-1 font-semibold text-[10px] uppercase tracking-[0.12em]">Heard:</span>
diff --git a/src/app/actions/realtime.ts b/src/app/actions/realtime.ts
index 5f0d08e..213d5a6 100644
--- a/src/app/actions/realtime.ts
+++ b/src/app/actions/realtime.ts
@@ -1,6 +1,9 @@
 'use server'
 
-import { defaultTranscriptionModel } from '@/realtime/modelConfig'
+import {
+	defaultTranscriptionModel,
+	resolveTranscriptionModelForAsrProfile
+} from '@/realtime/modelConfig'
 import {
 	CreateRealtimeClientSecretActionInputSchema,
 	CreateRealtimeClientSecretActionOutputSchema,
@@ -201,6 +204,16 @@ export async function createTranslateRealtimeClientSecretAction(input: unknown):
 			seconds: 600
 		},
 		session: {
+			audio: {
+				input: {
+					turn_detection: {
+						create_response: false,
+						eagerness: 'high',
+						interrupt_response: false,
+						type: 'semantic_vad'
+					}
+				}
+			},
 			instructions,
 			model: parsedInput.model,
 			output_modalities: ['text'],
@@ -219,16 +232,17 @@ export async function createRealtimeTranscriptionSessionAction(input: unknown):
 	value: string
 }> {
 	const parsedInput = CreateRealtimeTranscriptionSessionActionInputSchema.parse(input)
-	void parsedInput
+	const transcriptionModel = resolveTranscriptionModelForAsrProfile(parsedInput.asrProfile)
 
 	const payload = await postOpenAi('/realtime/transcription_sessions', {
+		include: ['item.input_audio_transcription.logprobs'],
 		input_audio_format: 'pcm16',
 		input_audio_transcription: {
-			model: defaultTranscriptionModel,
+			model: transcriptionModel,
 			prompt: 'Transcribe spoken audio faithfully. Preserve punctuation and proper nouns.'
 		},
 		turn_detection: {
-			eagerness: 'high',
+			eagerness: parsedInput.turnEagerness,
 			type: 'semantic_vad'
 		}
 	})
diff --git a/src/realtime/liveTranslateRealtimeClient.ts b/src/realtime/liveTranslateRealtimeClient.ts
index b87e13a..c115038 100644
--- a/src/realtime/liveTranslateRealtimeClient.ts
+++ b/src/realtime/liveTranslateRealtimeClient.ts
@@ -7,8 +7,12 @@ import {
 	RealtimeErrorEventSchema,
 	ResponseCreatedEventSchema,
 	ResponseDoneEventSchema,
+	ResponseFunctionCallArgumentsDeltaEventSchema,
 	ResponseFunctionCallArgumentsDoneEventSchema,
-	ResponseOutputItemDoneEventSchema
+	ResponseOutputItemDoneEventSchema,
+	ResponseOutputTextDeltaEventSchema,
+	ResponseOutputTextDoneEventSchema,
+	TranslationDraftDeltaSchema
 } from '@/realtime/schemas'
 import type { UtteranceDirection } from '@/realtime/sessionTypes'
 
@@ -29,6 +33,18 @@ export type TranslateInputPayload = {
 	text: string
 }
 
+export type TranslateDraftInputPayload = TranslateInputPayload & {
+	draftSequence: number
+}
+
+export type LiveTranslateDraftPatch = {
+	draftSequence: number
+	inputOrigin: 'audio' | 'text'
+	itemId: string
+	responseId?: string
+	translatedText: string
+}
+
 export type LiveTranslateResultPatch = {
 	direction: UtteranceDirection
 	inputOrigin: 'audio' | 'text'
@@ -43,17 +59,23 @@ export type LiveTranslateResultPatch = {
 
 export type LiveTranslateRealtimeClientCallbacks = {
 	onConnectionStateChange: (state: LiveTranslateRealtimeClientState) => void
+	onDraftDeltaPatch: (patch: LiveTranslateDraftPatch) => void
+	onDraftDonePatch: (patch: LiveTranslateDraftPatch) => void
 	onError: (message: string) => void
 	onResultPatch: (patch: LiveTranslateResultPatch) => void
 }
 
 type PendingResponseContext = {
+	draftSequence?: number
 	inputOrigin: 'audio' | 'text'
 	itemId: string
+	requestId: string
+	requestKind: 'draft' | 'final'
 	sourceText: string
 }
 
-const translationResponseTimeoutMilliseconds = 8_000
+const finalTranslationResponseTimeoutMilliseconds = 8_000
+const draftTranslationResponseTimeoutMilliseconds = 5_000
 const channelConnectTimeoutMilliseconds = 7_000
 
 function createTranslateInstructions(
@@ -75,6 +97,17 @@ function createTranslateInstructions(
 	].join('\n')
 }
 
+function createDraftInstructions(myLanguageCode: string, translateToLanguageCode: string): string {
+	return [
+		'You are Lilac, a low-latency live subtitle translator.',
+		`I speak language code: ${myLanguageCode}.`,
+		`Translate to language code: ${translateToLanguageCode}.`,
+		'Translate the partial utterance immediately.',
+		'Output only translated text.',
+		'No explanations. No labels. No JSON.'
+	].join('\n')
+}
+
 function buildPublishTranslationToolDefinition(): Record<string, unknown> {
 	return {
 		description: 'Publish exactly one translation card for the utterance currently being processed.',
@@ -175,18 +208,24 @@ function tryExtractToolArgumentsFromResponseOutput(
 }
 
 export class LiveTranslateRealtimeClient {
-	private activeRequestId: null | string = null
 	private callbacks: LiveTranslateRealtimeClientCallbacks
 	private connectTimeoutId: null | number = null
-	private completedToolArgumentsByResponseId = new Map<string, string>()
 	private dataChannel: null | RTCDataChannel = null
+	private draftRequestIdsByItemId = new Map<string, Set<string>>()
+	private draftResponseTextByResponseId = new Map<string, string>()
 	private generation = 0
-	private pendingInputQueue: PendingResponseContext[] = []
+	private latestDraftSequenceByItemId = new Map<string, number>()
+	private pendingRequestContextByRequestId = new Map<string, PendingResponseContext>()
 	private pendingRequestIdByResponseId = new Map<string, string>()
-	private pendingResponseContextByRequestId = new Map<string, PendingResponseContext>()
-	private pendingResponseTimeoutByRequestId = new Map<string, number>()
+	private pendingRequestTimeoutByRequestId = new Map<string, number>()
 	private peerConnection: null | RTCPeerConnection = null
+	private settings: LiveTranslateSettings = {
+		myLanguageCode: 'en',
+		translateToLanguageCode: 'es'
+	}
 	private state: LiveTranslateRealtimeClientState = 'disconnected'
+	private supersededDraftRequestIdSet = new Set<string>()
+	private toolArgumentsByResponseId = new Map<string, string>()
 
 	public constructor(callbacks: LiveTranslateRealtimeClientCallbacks) {
 		this.callbacks = callbacks
@@ -196,6 +235,10 @@ export class LiveTranslateRealtimeClient {
 		this.stop()
 		this.generation += 1
 		const generation = this.generation
+		this.settings = {
+			myLanguageCode: input.myLanguageCode,
+			translateToLanguageCode: input.translateToLanguageCode
+		}
 		this.setState('connecting')
 
 		try {
@@ -209,9 +252,7 @@ export class LiveTranslateRealtimeClient {
 
 			const peerConnection = new RTCPeerConnection()
 			this.peerConnection = peerConnection
-			peerConnection.addTransceiver('audio', {
-				direction: 'recvonly'
-			})
+			peerConnection.addTransceiver('audio', { direction: 'recvonly' })
 
 			const dataChannel = peerConnection.createDataChannel('oai-events')
 			this.dataChannel = dataChannel
@@ -227,10 +268,7 @@ export class LiveTranslateRealtimeClient {
 				if (generation !== this.generation) return
 				this.clearConnectTimeout()
 				this.setState('connected')
-				this.updateTranslateSettings({
-					myLanguageCode: input.myLanguageCode,
-					translateToLanguageCode: input.translateToLanguageCode
-				})
+				this.updateTranslateSettings(this.settings)
 			})
 
 			dataChannel.addEventListener('close', () => {
@@ -245,7 +283,6 @@ export class LiveTranslateRealtimeClient {
 
 			const offer = await peerConnection.createOffer()
 			await peerConnection.setLocalDescription(offer)
-
 			if (generation !== this.generation) return
 
 			const response = await fetch('https://api.openai.com/v1/realtime/calls', {
@@ -267,8 +304,8 @@ export class LiveTranslateRealtimeClient {
 			await peerConnection.setRemoteDescription({ sdp: answerSdp, type: 'answer' })
 		} catch (error) {
 			if (generation !== this.generation) return
-			const fallbackMessage = 'Unable to start Translate mode.'
 			this.setState('error')
+			const fallbackMessage = 'Unable to start Translate mode.'
 			if (error instanceof Error) this.callbacks.onError(error.message || fallbackMessage)
 			else this.callbacks.onError(fallbackMessage)
 			this.stop()
@@ -278,15 +315,18 @@ export class LiveTranslateRealtimeClient {
 	public stop(): void {
 		this.generation += 1
 		this.clearConnectTimeout()
-		this.activeRequestId = null
-		this.pendingInputQueue = []
-		this.completedToolArgumentsByResponseId.clear()
-		this.pendingResponseTimeoutByRequestId.forEach(timeoutId => {
+
+		this.pendingRequestTimeoutByRequestId.forEach(timeoutId => {
 			window.clearTimeout(timeoutId)
 		})
-		this.pendingResponseTimeoutByRequestId.clear()
+		this.pendingRequestTimeoutByRequestId.clear()
+		this.pendingRequestContextByRequestId.clear()
 		this.pendingRequestIdByResponseId.clear()
-		this.pendingResponseContextByRequestId.clear()
+		this.draftResponseTextByResponseId.clear()
+		this.toolArgumentsByResponseId.clear()
+		this.draftRequestIdsByItemId.clear()
+		this.supersededDraftRequestIdSet.clear()
+		this.latestDraftSequenceByItemId.clear()
 
 		try {
 			this.dataChannel?.close()
@@ -297,6 +337,7 @@ export class LiveTranslateRealtimeClient {
 			this.peerConnection?.close()
 		} catch {}
 		this.peerConnection = null
+
 		this.setState('disconnected')
 	}
 
@@ -304,19 +345,53 @@ export class LiveTranslateRealtimeClient {
 		return this.state === 'connected'
 	}
 
-	public submitInput(input: TranslateInputPayload): void {
+	public submitDraftInput(input: TranslateDraftInputPayload): void {
+		const normalizedText = input.text.trim()
+		if (!normalizedText || !this.isConnected()) return
+		const previousSequence = this.latestDraftSequenceByItemId.get(input.itemId) ?? 0
+		const nextSequence = Math.max(previousSequence, input.draftSequence)
+		this.latestDraftSequenceByItemId.set(input.itemId, nextSequence)
+		const pendingDraftRequestIds = this.draftRequestIdsByItemId.get(input.itemId)
+		if (pendingDraftRequestIds) {
+			pendingDraftRequestIds.forEach(requestId => {
+				this.supersededDraftRequestIdSet.add(requestId)
+			})
+		}
+		this.requestDraftResponse({
+			draftSequence: nextSequence,
+			inputOrigin: input.inputOrigin,
+			itemId: input.itemId,
+			sourceText: normalizedText
+		})
+	}
+
+	public submitFinalInput(input: TranslateInputPayload): void {
 		const normalizedText = input.text.trim()
-		if (!normalizedText) return
-		this.pendingInputQueue.push({
+		if (!normalizedText || !this.isConnected()) return
+		this.requestFinalResponse({
 			inputOrigin: input.inputOrigin,
 			itemId: input.itemId,
 			sourceText: normalizedText
 		})
-		this.drainResponseQueue()
+	}
+
+	public submitInput(input: TranslateInputPayload): void {
+		this.submitFinalInput(input)
 	}
 
 	public updateTranslateSettings(settings: LiveTranslateSettings): void {
+		this.settings = settings
 		this.sendSessionUpdate({
+			audio: {
+				input: {
+					turn_detection: {
+						create_response: false,
+						eagerness: 'high',
+						interrupt_response: false,
+						type: 'semantic_vad'
+					}
+				}
+			},
 			instructions: createTranslateInstructions(
 				settings.myLanguageCode,
 				settings.translateToLanguageCode
@@ -339,18 +414,16 @@ export class LiveTranslateRealtimeClient {
 	}
 
 	private createErrorPatch(
-		itemId: string,
-		inputOrigin: 'audio' | 'text',
-		sourceText: string,
+		context: PendingResponseContext,
 		translatedText: string,
 		responseId?: string
 	): LiveTranslateResultPatch {
 		return {
 			direction: 'my_to_target',
-			inputOrigin,
-			itemId,
+			inputOrigin: context.inputOrigin,
+			itemId: context.itemId,
 			sourceLanguageCode: 'und',
-			sourceText,
+			sourceText: context.sourceText,
 			status: 'error',
 			targetLanguageCode: 'und',
 			translatedText,
@@ -358,208 +431,377 @@ export class LiveTranslateRealtimeClient {
 		}
 	}
 
-	private emitAndReportErrorPatch(
-		itemId: string,
-		inputOrigin: 'audio' | 'text',
-		sourceText: string,
-		errorMessage: string,
-		responseId?: string
-	): void {
-		this.callbacks.onResultPatch(
-			this.createErrorPatch(itemId, inputOrigin, sourceText, errorMessage, responseId)
-		)
-		this.callbacks.onError(errorMessage)
-	}
-
 	private clearPendingRequestState(requestId: string): null | PendingResponseContext {
-		const pendingContext = this.pendingResponseContextByRequestId.get(requestId) ?? null
-		this.pendingResponseContextByRequestId.delete(requestId)
+		const context = this.pendingRequestContextByRequestId.get(requestId) ?? null
+		this.pendingRequestContextByRequestId.delete(requestId)
 		this.pendingRequestIdByResponseId.forEach((mappedRequestId, responseId) => {
 			if (mappedRequestId !== requestId) return
 			this.pendingRequestIdByResponseId.delete(responseId)
+			this.draftResponseTextByResponseId.delete(responseId)
+			this.toolArgumentsByResponseId.delete(responseId)
 		})
-		this.clearPendingRequestTimeout(requestId)
-		if (this.activeRequestId === requestId) {
-			this.activeRequestId = null
+		const timeoutId = this.pendingRequestTimeoutByRequestId.get(requestId)
+		if (typeof timeoutId === 'number') window.clearTimeout(timeoutId)
+		this.pendingRequestTimeoutByRequestId.delete(requestId)
+		if (context?.requestKind === 'draft') {
+			const draftRequestIdSet = this.draftRequestIdsByItemId.get(context.itemId)
+			draftRequestIdSet?.delete(requestId)
+			if (!draftRequestIdSet || draftRequestIdSet.size === 0) {
+				this.draftRequestIdsByItemId.delete(context.itemId)
+			}
+			this.supersededDraftRequestIdSet.delete(requestId)
 		}
-		return pendingContext
+		return context
 	}
 
-	private getStatusErrorMessage(
-		event: ReturnType<typeof ResponseDoneEventSchema.parse>,
-		defaultMessage: string
-	): string {
-		const statusDetails = event.response?.status_details
-		if (!statusDetails || typeof statusDetails !== 'object') return defaultMessage
-		const detailsRecord = statusDetails as Record<string, unknown>
-		const errorRecord =
-			typeof detailsRecord.error === 'object' && detailsRecord.error !== null
-				? (detailsRecord.error as Record<string, unknown>)
-				: null
-		return (
-			parseStringValue(errorRecord?.message) ??
-			parseStringValue(detailsRecord.reason) ??
-			parseStringValue(detailsRecord.message) ??
-			defaultMessage
+	private requestDraftResponse(
+		contextInput: Omit<PendingResponseContext, 'requestId' | 'requestKind'>
+	): void {
+		const requestId = crypto.randomUUID()
+		const context: PendingResponseContext = {
+			...contextInput,
+			requestId,
+			requestKind: 'draft'
+		}
+		const draftRequestIdSet = this.draftRequestIdsByItemId.get(context.itemId) ?? new Set<string>()
+		draftRequestIdSet.add(requestId)
+		this.draftRequestIdsByItemId.set(context.itemId, draftRequestIdSet)
+		this.pendingRequestContextByRequestId.set(requestId, context)
+
+		const timeoutId = window.setTimeout(() => {
+			const timedOutContext = this.clearPendingRequestState(requestId)
+			if (!timedOutContext || timedOutContext.requestKind !== 'draft') return
+			if (this.isDraftResponseSuperseded(timedOutContext)) return
+			this.callbacks.onError('Draft translation timed out before output was returned.')
+		}, draftTranslationResponseTimeoutMilliseconds)
+		this.pendingRequestTimeoutByRequestId.set(requestId, timeoutId)
+
+		this.sendEvent({
+			response: {
+				conversation: 'none',
+				input: [
+					{
+						content: [
+							{
+								text: context.sourceText,
+								type: 'input_text'
+							}
+						],
+						role: 'user',
+						type: 'message'
+					}
+				],
+				instructions: createDraftInstructions(
+					this.settings.myLanguageCode,
+					this.settings.translateToLanguageCode
+				),
+				metadata: {
+					draft_sequence: context.draftSequence,
+					input_origin: context.inputOrigin,
+					request_id: requestId,
+					request_kind: context.requestKind,
+					source_item_id: context.itemId
+				},
+				output_modalities: ['text'],
+				tool_choice: 'none',
+				tools: []
+			},
+			type: 'response.create'
+		})
+	}
+
+	private requestFinalResponse(
+		contextInput: Omit<PendingResponseContext, 'requestId' | 'requestKind'>
+	): void {
+		const requestId = crypto.randomUUID()
+		const context: PendingResponseContext = {
+			...contextInput,
+			requestId,
+			requestKind: 'final'
+		}
+		this.pendingRequestContextByRequestId.set(requestId, context)
+
+		const timeoutId = window.setTimeout(() => {
+			const timedOutContext = this.clearPendingRequestState(requestId)
+			if (!timedOutContext || timedOutContext.requestKind !== 'final') return
+			const errorPatch = this.createErrorPatch(
+				timedOutContext,
+				'Translation timed out before tool output was returned.'
+			)
+			this.callbacks.onResultPatch(errorPatch)
+			this.callbacks.onError(errorPatch.translatedText)
+		}, finalTranslationResponseTimeoutMilliseconds)
+		this.pendingRequestTimeoutByRequestId.set(requestId, timeoutId)
+
+		this.sendEvent({
+			response: {
+				conversation: 'none',
+				input: [
+					{
+						content: [
+							{
+								text: context.sourceText,
+								type: 'input_text'
+							}
+						],
+						role: 'user',
+						type: 'message'
+					}
+				],
+				instructions: createTranslateInstructions(
+					this.settings.myLanguageCode,
+					this.settings.translateToLanguageCode
+				),
+				metadata: {
+					input_origin: context.inputOrigin,
+					request_id: requestId,
+					request_kind: context.requestKind,
+					source_item_id: context.itemId
+				},
+				output_modalities: ['text'],
+				tool_choice: buildToolChoice(),
+				tools: [buildPublishTranslationToolDefinition()]
+			},
+			type: 'response.create'
+		})
+	}
+
+	private isDraftResponseSuperseded(context: PendingResponseContext): boolean {
+		if (context.requestKind !== 'draft') return false
+		if (this.supersededDraftRequestIdSet.has(context.requestId)) return true
+		const latestSequence = this.latestDraftSequenceByItemId.get(context.itemId)
+		if (typeof latestSequence !== 'number') return false
+		return (context.draftSequence ?? 0) < latestSequence
+	}
+
+	private emitDraftPatch(
+		context: PendingResponseContext,
+		translatedText: string,
+		responseId: null | string,
+		isDone: boolean
+	): void {
+		const safeText = translatedText.trim()
+		if (!safeText) return
+		const parsedPatch = TranslationDraftDeltaSchema.safeParse({
+			draftSequence: context.draftSequence ?? 0,
+			itemId: context.itemId,
+			responseId: responseId ?? undefined,
+			translatedText: safeText
+		})
+		if (!parsedPatch.success) return
+		const patch: LiveTranslateDraftPatch = {
+			draftSequence: parsedPatch.data.draftSequence,
+			inputOrigin: context.inputOrigin,
+			itemId: context.itemId,
+			translatedText: parsedPatch.data.translatedText,
+			...(parsedPatch.data.responseId ? { responseId: parsedPatch.data.responseId } : {})
+		}
+		if (isDone) this.callbacks.onDraftDonePatch(patch)
+		else this.callbacks.onDraftDeltaPatch(patch)
+	}
+
+	private handleResponseCreatedEvent(
+		event: ReturnType<typeof ResponseCreatedEventSchema.parse>
+	): void {
+		const responseId = parseStringValue(event.response?.id)
+		const requestId = parseStringValue(event.response?.metadata?.request_id)
+		if (!responseId || !requestId) return
+		this.pendingRequestIdByResponseId.set(responseId, requestId)
+	}
+
+	private handleResponseOutputTextDeltaEvent(
+		event: ReturnType<typeof ResponseOutputTextDeltaEventSchema.parse>
+	): void {
+		const responseId = parseStringValue(event.response_id)
+		if (!responseId || !event.delta) return
+		const requestId = this.pendingRequestIdByResponseId.get(responseId)
+		if (!requestId) return
+		const context = this.pendingRequestContextByRequestId.get(requestId)
+		if (!context || context.requestKind !== 'draft') return
+		if (this.isDraftResponseSuperseded(context)) return
+		const nextText = `${this.draftResponseTextByResponseId.get(responseId) ?? ''}${event.delta}`
+		this.draftResponseTextByResponseId.set(responseId, nextText)
+		this.emitDraftPatch(context, nextText, responseId, false)
+	}
+
+	private handleResponseOutputTextDoneEvent(
+		event: ReturnType<typeof ResponseOutputTextDoneEventSchema.parse>
+	): void {
+		const responseId = parseStringValue(event.response_id)
+		if (!responseId) return
+		const requestId = this.pendingRequestIdByResponseId.get(responseId)
+		if (!requestId) return
+		const context = this.pendingRequestContextByRequestId.get(requestId)
+		if (!context || context.requestKind !== 'draft') return
+		if (this.isDraftResponseSuperseded(context)) return
+		const nextText =
+			parseStringValue(event.text) ?? this.draftResponseTextByResponseId.get(responseId) ?? ''
+		this.draftResponseTextByResponseId.set(responseId, nextText)
+		this.emitDraftPatch(context, nextText, responseId, true)
+	}
+
+	private storeFunctionCallArgumentsByResponseId(
+		responseId: null | string,
+		argumentsDelta: null | string
+	): void {
+		if (!responseId || !argumentsDelta) return
+		const previousArguments = this.toolArgumentsByResponseId.get(responseId) ?? ''
+		this.toolArgumentsByResponseId.set(responseId, `${previousArguments}${argumentsDelta}`)
+	}
+
+	private handleResponseFunctionCallArgumentsDeltaEvent(
+		event: ReturnType<typeof ResponseFunctionCallArgumentsDeltaEventSchema.parse>
+	): void {
+		const responseId = parseStringValue(event.response_id)
+		const requestId = responseId ? this.pendingRequestIdByResponseId.get(responseId) : null
+		const context = requestId ? this.pendingRequestContextByRequestId.get(requestId) : null
+		if (!context || context.requestKind !== 'final') return
+		const toolName = parseStringValue(event.item?.name) ?? parseStringValue(event.name)
+		if (toolName !== 'publish_translation') return
+		const argumentsDelta = parseStringValue(event.delta) ?? parseStringValue(event.item?.arguments)
+		this.storeFunctionCallArgumentsByResponseId(responseId, argumentsDelta)
+	}
+
+	private handleResponseFunctionCallArgumentsDoneEvent(
+		event: ReturnType<typeof ResponseFunctionCallArgumentsDoneEventSchema.parse>
+	): void {
+		const responseId = parseStringValue(event.response_id)
+		const requestId = responseId ? this.pendingRequestIdByResponseId.get(responseId) : null
+		const context = requestId ? this.pendingRequestContextByRequestId.get(requestId) : null
+		if (!context || context.requestKind !== 'final') return
+		const toolName = parseStringValue(event.item?.name) ?? parseStringValue(event.name)
+		if (toolName !== 'publish_translation') return
+		const argumentsValue =
+			parseStringValue(event.item?.arguments) ?? parseStringValue(event.arguments) ?? null
+		if (!argumentsValue) return
+		this.toolArgumentsByResponseId.set(responseId ?? context.requestId, argumentsValue)
+	}
+
+	private handleResponseOutputItemDoneEvent(
+		event: ReturnType<typeof ResponseOutputItemDoneEventSchema.parse>
+	): void {
+		if (event.item.type !== 'function_call') return
+		if (parseStringValue(event.item.name) !== 'publish_translation') return
+		const responseId = parseStringValue(event.response_id)
+		const argumentsValue = parseStringValue(event.item.arguments)
+		if (!argumentsValue) return
+		this.toolArgumentsByResponseId.set(
+			responseId ?? event.item.id ?? crypto.randomUUID(),
+			argumentsValue
 		)
 	}
 
 	private handleResponseDoneEvent(event: ReturnType<typeof ResponseDoneEventSchema.parse>): void {
-		const response = event.response
-		if (!response) return
-		const responseStatus = parseStringValue(response.status)?.toLowerCase() ?? null
-
+		const responseId = parseStringValue(event.response?.id) ?? parseStringValue(event.response_id)
 		const metadata =
-			response.metadata && typeof response.metadata === 'object'
-				? (response.metadata as Record<string, unknown>)
+			event.response?.metadata && typeof event.response.metadata === 'object'
+				? (event.response.metadata as Record<string, unknown>)
 				: {}
-		const responseId = parseStringValue(response.id) ?? parseStringValue(event.response_id)
 		const requestId =
 			parseStringValue(metadata.request_id) ??
-			(responseId ? this.pendingRequestIdByResponseId.get(responseId) : null) ??
-			this.activeRequestId
-		const sourceItemIdFromMetadata = parseStringValue(metadata.source_item_id)
-		const inputOriginFromMetadata = parseStringValue(metadata.input_origin)
-		if (responseId) this.pendingRequestIdByResponseId.delete(responseId)
-
-		const pendingContext = requestId ? this.clearPendingRequestState(requestId) : null
-		const sourceItemId = sourceItemIdFromMetadata ?? pendingContext?.itemId ?? null
-		const rawInputOrigin = inputOriginFromMetadata ?? pendingContext?.inputOrigin ?? null
-		const inputOrigin: 'audio' | 'text' = rawInputOrigin === 'text' ? 'text' : 'audio'
-		const sourceText = pendingContext?.sourceText ?? ''
-		if (!sourceItemId) {
-			if (this.activeRequestId === requestId) this.activeRequestId = null
-			this.drainResponseQueue()
+			(responseId ? this.pendingRequestIdByResponseId.get(responseId) : null)
+		if (!requestId) return
+		const context = this.pendingRequestContextByRequestId.get(requestId)
+		const clearedContext = this.clearPendingRequestState(requestId)
+		if (!context || !clearedContext) return
+
+		const responseStatus = parseStringValue(event.response?.status)?.toLowerCase() ?? null
+		if (context.requestKind === 'draft') {
+			if (this.isDraftResponseSuperseded(context)) return
+			const draftText = responseId ? (this.draftResponseTextByResponseId.get(responseId) ?? '') : ''
+			this.emitDraftPatch(context, draftText, responseId, true)
+			if (responseStatus && !['completed', 'incomplete'].includes(responseStatus)) {
+				this.callbacks.onError(`Draft translation ended with status ${responseStatus}.`)
+			}
 			return
 		}
 
 		if (responseStatus && responseStatus !== 'completed') {
-			const statusMessage = this.getStatusErrorMessage(
-				event,
+			const statusDetails = event.response?.status_details
+			const reason =
+				parseStringValue((statusDetails as Record<string, unknown> | null)?.reason) ??
+				parseStringValue((statusDetails as Record<string, unknown> | null)?.message) ??
 				`Translation failed with status ${responseStatus}.`
-			)
-			this.emitAndReportErrorPatch(
-				sourceItemId,
-				inputOrigin,
-				sourceText,
-				statusMessage,
-				responseId ?? undefined
-			)
-			this.drainResponseQueue()
+			const errorPatch = this.createErrorPatch(context, reason, responseId ?? undefined)
+			this.callbacks.onResultPatch(errorPatch)
+			this.callbacks.onError(reason)
 			return
 		}
 
-		const functionCall = (response.output ?? []).find(
+		const directFunctionCall = (event.response?.output ?? []).find(
 			item => item.type === 'function_call' && item.name === 'publish_translation'
 		)
-		const fallbackToolArguments = responseId
-			? (this.completedToolArgumentsByResponseId.get(responseId) ?? null)
-			: null
-		if (responseId) this.completedToolArgumentsByResponseId.delete(responseId)
-		const inferredToolArguments = tryExtractToolArgumentsFromResponseOutput(response.output)
-		const toolArguments =
-			(typeof functionCall?.arguments === 'string' ? functionCall.arguments : null) ??
-			fallbackToolArguments ??
-			inferredToolArguments
-
-		if (!toolArguments) {
-			const message = responseStatus
-				? `No valid publish_translation tool call was returned (${responseStatus}).`
-				: 'No valid publish_translation tool call was returned.'
-			this.emitAndReportErrorPatch(
-				sourceItemId,
-				inputOrigin,
-				sourceText,
-				message,
+		const accumulatedArguments = responseId ? this.toolArgumentsByResponseId.get(responseId) : null
+		const inferredArguments = tryExtractToolArgumentsFromResponseOutput(event.response?.output)
+		const rawToolArguments =
+			(typeof directFunctionCall?.arguments === 'string' ? directFunctionCall.arguments : null) ??
+			accumulatedArguments ??
+			inferredArguments
+
+		if (!rawToolArguments) {
+			const errorPatch = this.createErrorPatch(
+				context,
+				'No valid publish_translation tool call was returned.',
 				responseId ?? undefined
 			)
-			this.drainResponseQueue()
+			this.callbacks.onResultPatch(errorPatch)
+			this.callbacks.onError(errorPatch.translatedText)
 			return
 		}
 
 		try {
-			const parsedArguments = JSON.parse(toolArguments) as unknown
-			const translatedResult = PublishTranslationToolArgumentsSchema.parse(parsedArguments)
+			const parsedArguments = JSON.parse(rawToolArguments) as unknown
+			const parsedResult = PublishTranslationToolArgumentsSchema.parse(parsedArguments)
 			this.callbacks.onResultPatch({
-				direction: translatedResult.direction,
-				inputOrigin,
-				itemId: sourceItemId,
-				sourceLanguageCode: translatedResult.sourceLanguageCode,
-				sourceText: translatedResult.sourceText,
+				direction: parsedResult.direction,
+				inputOrigin: context.inputOrigin,
+				itemId: context.itemId,
+				sourceLanguageCode: parsedResult.sourceLanguageCode,
+				sourceText: parsedResult.sourceText,
 				status: 'final',
-				targetLanguageCode: translatedResult.targetLanguageCode,
-				translatedText: translatedResult.translatedText,
+				targetLanguageCode: parsedResult.targetLanguageCode,
+				translatedText: parsedResult.translatedText,
 				...(responseId ? { responseId } : {})
 			})
 		} catch {
-			this.emitAndReportErrorPatch(
-				sourceItemId,
-				inputOrigin,
-				sourceText,
+			const errorPatch = this.createErrorPatch(
+				context,
 				'Tool arguments were malformed and could not be parsed.',
 				responseId ?? undefined
 			)
+			this.callbacks.onResultPatch(errorPatch)
+			this.callbacks.onError(errorPatch.translatedText)
 		}
-
-		this.drainResponseQueue()
 	}
 
-	private handleResponseCreatedEvent(
-		event: ReturnType<typeof ResponseCreatedEventSchema.parse>
-	): void {
-		const responseId = parseStringValue(event.response?.id)
-		if (!responseId) return
-		const requestId = parseStringValue(event.response?.metadata?.request_id)
-		if (!requestId) return
-		this.pendingRequestIdByResponseId.set(responseId, requestId)
-	}
-
-	private maybeStorePublishTranslationToolArguments(
-		toolName: null | string,
-		toolArguments: null | string,
-		responseId: null | string
-	): void {
-		if (!responseId || toolName !== 'publish_translation' || !toolArguments) return
-		this.completedToolArgumentsByResponseId.set(responseId, toolArguments)
-	}
-
-	private handleResponseOutputItemDoneEvent(
-		event: ReturnType<typeof ResponseOutputItemDoneEventSchema.parse>
-	): void {
-		if (event.item.type !== 'function_call') return
-		this.maybeStorePublishTranslationToolArguments(
-			parseStringValue(event.item.name),
-			parseStringValue(event.item.arguments),
-			parseStringValue(event.response_id)
-		)
-	}
-
-	private handleResponseFunctionCallArgumentsDoneEvent(
-		event: ReturnType<typeof ResponseFunctionCallArgumentsDoneEventSchema.parse>
-	): void {
-		const toolName = parseStringValue(event.item?.name) ?? parseStringValue(event.name)
-		const toolArguments = parseStringValue(event.item?.arguments) ?? parseStringValue(event.arguments)
-		this.maybeStorePublishTranslationToolArguments(
-			toolName,
-			toolArguments,
-			parseStringValue(event.response_id)
-		)
+	private handleRealtimeErrorEvent(event: ReturnType<typeof RealtimeErrorEventSchema.parse>): void {
+		const message = event.error?.message || 'Realtime session error'
+		this.callbacks.onError(message)
 	}
 
 	private handleServerEvent(rawData: unknown): void {
 		try {
 			const candidate = typeof rawData === 'string' ? JSON.parse(rawData) : rawData
 			const baseEvent = RealtimeBaseServerEventSchema.parse(candidate)
-
 			switch (baseEvent.type) {
 				case 'response.created': {
 					const event = ResponseCreatedEventSchema.parse(candidate)
 					this.handleResponseCreatedEvent(event)
 					return
 				}
-				case 'response.output_item.done': {
-					const event = ResponseOutputItemDoneEventSchema.parse(candidate)
-					this.handleResponseOutputItemDoneEvent(event)
+				case 'response.output_text.delta': {
+					const event = ResponseOutputTextDeltaEventSchema.parse(candidate)
+					this.handleResponseOutputTextDeltaEvent(event)
+					return
+				}
+				case 'response.output_text.done': {
+					const event = ResponseOutputTextDoneEventSchema.parse(candidate)
+					this.handleResponseOutputTextDoneEvent(event)
+					return
+				}
+				case 'response.function_call_arguments.delta': {
+					const event = ResponseFunctionCallArgumentsDeltaEventSchema.parse(candidate)
+					this.handleResponseFunctionCallArgumentsDeltaEvent(event)
 					return
 				}
 				case 'response.function_call_arguments.done': {
@@ -567,6 +809,11 @@ export class LiveTranslateRealtimeClient {
 					this.handleResponseFunctionCallArgumentsDoneEvent(event)
 					return
 				}
+				case 'response.output_item.done': {
+					const event = ResponseOutputItemDoneEventSchema.parse(candidate)
+					this.handleResponseOutputItemDoneEvent(event)
+					return
+				}
 				case 'response.done': {
 					const event = ResponseDoneEventSchema.parse(candidate)
 					this.handleResponseDoneEvent(event)
@@ -574,9 +821,7 @@ export class LiveTranslateRealtimeClient {
 				}
 				case 'error': {
 					const event = RealtimeErrorEventSchema.parse(candidate)
-					const message = event.error?.message || 'Realtime session error'
-					this.callbacks.onError(message)
-					this.failActiveRequest(message)
+					this.handleRealtimeErrorEvent(event)
 					return
 				}
 				default:
@@ -587,82 +832,6 @@ export class LiveTranslateRealtimeClient {
 		}
 	}
 
-	private clearPendingRequestTimeout(requestId: string): void {
-		const timeoutId = this.pendingResponseTimeoutByRequestId.get(requestId)
-		if (typeof timeoutId === 'number') {
-			window.clearTimeout(timeoutId)
-		}
-		this.pendingResponseTimeoutByRequestId.delete(requestId)
-	}
-
-	private failActiveRequest(errorMessage: string): void {
-		if (!this.activeRequestId) return
-		const pendingContext = this.clearPendingRequestState(this.activeRequestId)
-		if (pendingContext) {
-			this.emitAndReportErrorPatch(
-				pendingContext.itemId,
-				pendingContext.inputOrigin,
-				pendingContext.sourceText,
-				errorMessage
-			)
-		}
-		this.drainResponseQueue()
-	}
-
-	private requestTranslationResponse(pendingContext: PendingResponseContext): void {
-		const requestId = crypto.randomUUID()
-		this.activeRequestId = requestId
-		this.pendingResponseContextByRequestId.set(requestId, pendingContext)
-		const timeoutId = window.setTimeout(() => {
-			const timedOutContext = this.clearPendingRequestState(requestId)
-			if (!timedOutContext) return
-			this.emitAndReportErrorPatch(
-				timedOutContext.itemId,
-				timedOutContext.inputOrigin,
-				timedOutContext.sourceText,
-				'Translation timed out before tool output was returned.'
-			)
-			this.drainResponseQueue()
-		}, translationResponseTimeoutMilliseconds)
-		this.pendingResponseTimeoutByRequestId.set(requestId, timeoutId)
-		this.sendEvent({
-			response: {
-				conversation: 'none',
-				input: [
-					{
-						content: [
-							{
-								text: pendingContext.sourceText,
-								type: 'input_text'
-							}
-						],
-						role: 'user',
-						type: 'message'
-					}
-				],
-				metadata: {
-					input_origin: pendingContext.inputOrigin,
-					request_id: requestId,
-					source_item_id: pendingContext.itemId
-				},
-				output_modalities: ['text'],
-				tool_choice: buildToolChoice(),
-				tools: [buildPublishTranslationToolDefinition()]
-			},
-			type: 'response.create'
-		})
-	}
-
-	private drainResponseQueue(): void {
-		if (this.activeRequestId) return
-		while (this.pendingInputQueue.length > 0) {
-			const pendingContext = this.pendingInputQueue.shift()
-			if (!pendingContext) continue
-			this.requestTranslationResponse(pendingContext)
-			return
-		}
-	}
-
 	private sendSessionUpdate(sessionPatch: Record<string, unknown>): void {
 		this.sendEvent({
 			session: {
diff --git a/src/realtime/modeRuntimeStore.tsx b/src/realtime/modeRuntimeStore.tsx
index 0837f6f..841b7a8 100644
--- a/src/realtime/modeRuntimeStore.tsx
+++ b/src/realtime/modeRuntimeStore.tsx
@@ -14,8 +14,10 @@ import {
 import { ChatRealtimeClient, type ChatTranscriptPatch } from '@/realtime/chatRealtimeClient'
 import { normalizeLanguageCode, resolveLanguageCode } from '@/realtime/languageCatalog'
 import {
+	type LiveTranslateDraftPatch,
 	LiveTranslateRealtimeClient,
 	type LiveTranslateResultPatch,
+	type TranslateDraftInputPayload,
 	type TranslateInputPayload
 } from '@/realtime/liveTranslateRealtimeClient'
 import { defaultChatRealtimeModel } from '@/realtime/modelConfig'
@@ -28,7 +30,6 @@ import type {
 	LilacMode,
 	LiveSubtitleState,
 	ModeConnectionState,
-	TranslateSegmentAggregationState,
 	TranslateSettings,
 	UtteranceCard,
 	UtteranceDirection
@@ -61,13 +62,6 @@ const defaultLiveSubtitleState: LiveSubtitleState = {
 	updatedAt: 0
 }
 
-const defaultTranslateSegmentAggregationState: TranslateSegmentAggregationState = {
-	activeUtteranceId: null,
-	lastFinalizedAt: null,
-	pendingSourceText: '',
-	sourceLanguageCode: null
-}
-
 const defaultConnectionHealthState: ConnectionHealthState = {
 	isReconnecting: false,
 	lastErrorAt: null,
@@ -90,13 +84,23 @@ const storageKeys = {
 type RuntimeChannel = 'chat' | 'subtitle' | 'translate'
 type ChannelConnectionState = 'connecting' | 'connected' | 'disconnected' | 'error'
 
-type PendingTranslateInput = TranslateInputPayload & {
-	previousItemId?: null | string
-}
+type PendingTranslateInput =
+	| (TranslateInputPayload & {
+			requestKind: 'final'
+	  })
+	| (TranslateDraftInputPayload & {
+			requestKind: 'draft'
+	  })
 
-const subtitleAggregationSilenceMilliseconds = 600
 const reconnectStatusGraceMilliseconds = 1500
 const subtitleDedupRoundedTimeWindowMilliseconds = 700
+const draftTranslateDebounceMilliseconds = 300
+const finalTranslateLowConfidenceThreshold = 0.6
+const finalTranslateLowConfidenceDelayMilliseconds = 280
+const minimumDraftTextLength = 2
+const minimumDraftTextDeltaLength = 4
+const isTranslateStreamingV2Enabled =
+	process.env.NEXT_PUBLIC_LILAC_TRANSLATE_STREAMING_V2 !== 'false'
 const systemLeakMatcherList = SystemLeakTextSchema.parse(undefined).map(matcher =>
 	matcher.toLowerCase()
 )
@@ -129,19 +133,6 @@ function shouldDropSubtitleText(value: string): boolean {
 	return false
 }
 
-function joinUtteranceText(currentText: string, nextText: string): string {
-	const normalizedCurrentText = currentText.trim()
-	const normalizedNextText = nextText.trim()
-	if (!normalizedCurrentText) return normalizedNextText
-	if (!normalizedNextText) return normalizedCurrentText
-	const currentEndsWithSpace = /\s$/.test(currentText)
-	const nextStartsWithPunctuation = /^[,.;:!?)]/.test(normalizedNextText)
-	if (currentEndsWithSpace || nextStartsWithPunctuation) {
-		return `${normalizedCurrentText}${normalizedNextText}`
-	}
-	return `${normalizedCurrentText} ${normalizedNextText}`
-}
-
 function sanitizeTranslateSettings(input: Partial<TranslateSettings> | null): TranslateSettings {
 	const myLanguageCode = resolveLanguageCode(
 		input?.myLanguageCode ?? '',
@@ -171,19 +162,24 @@ function createClientItemId(prefix: string): string {
 function createEmptyUtteranceCard(
 	itemId: string,
 	inputOrigin: 'audio' | 'text',
-	translateSettings: TranslateSettings
+	translateSettings: TranslateSettings,
+	utteranceSequence: number
 ): UtteranceCard {
 	return {
 		createdAt: Date.now(),
 		direction: 'my_to_target',
+		draftSequence: 0,
+		draftTranslatedText: '',
 		id: itemId,
 		inputOrigin,
+		renderState: 'listening',
 		sourceItemId: itemId,
 		sourceLanguageCode: translateSettings.myLanguageCode,
 		sourceText: '',
 		status: 'streaming',
 		targetLanguageCode: translateSettings.translateToLanguageCode,
-		translatedText: ''
+		translatedText: '',
+		utteranceSequence
 	}
 }
 
@@ -261,7 +257,8 @@ function upsertChatTranscript(
 function applyTranslateResultPatch(
 	cardList: UtteranceCard[],
 	patch: LiveTranslateResultPatch,
-	translateSettings: TranslateSettings
+	translateSettings: TranslateSettings,
+	nextUtteranceSequence: number
 ): UtteranceCard[] {
 	const existingCard = cardList.find(card => card.id === patch.itemId) ?? null
 	const baseCard = existingCard
@@ -269,7 +266,12 @@ function applyTranslateResultPatch(
 				const { errorMessage: _errorMessage, responseId: _responseId, ...restCard } = existingCard
 				return restCard
 			})()
-		: createEmptyUtteranceCard(patch.itemId, patch.inputOrigin, translateSettings)
+		: createEmptyUtteranceCard(
+				patch.itemId,
+				patch.inputOrigin,
+				translateSettings,
+				nextUtteranceSequence
+			)
 
 	const normalizedSourceText = normalizeWhitespace(patch.sourceText)
 	const safeSourceText =
@@ -281,11 +283,17 @@ function applyTranslateResultPatch(
 		...baseCard,
 		direction: patch.direction,
 		inputOrigin: patch.inputOrigin,
+		renderState: patch.status === 'error' ? 'error' : 'final',
 		sourceLanguageCode: normalizeLanguageCode(patch.sourceLanguageCode),
 		sourceText: safeSourceText,
 		status: patch.status,
 		targetLanguageCode: normalizeLanguageCode(patch.targetLanguageCode),
 		translatedText: patch.translatedText,
+		...(patch.status === 'final'
+			? { draftTranslatedText: patch.translatedText, lastDraftAt: Date.now() }
+			: typeof baseCard.draftTranslatedText === 'string'
+				? { draftTranslatedText: baseCard.draftTranslatedText }
+				: {}),
 		...(patch.status === 'error' ? { errorMessage: patch.translatedText } : {}),
 		...(patch.responseId ? { responseId: patch.responseId } : {})
 	}
@@ -293,6 +301,44 @@ function applyTranslateResultPatch(
 	return insertCardByPreviousItemId(cardList, nextCard)
 }
 
+function applyTranslateDraftPatch(
+	cardList: UtteranceCard[],
+	patch: LiveTranslateDraftPatch,
+	translateSettings: TranslateSettings,
+	nextUtteranceSequence: number
+): UtteranceCard[] {
+	const existingCard = cardList.find(card => card.id === patch.itemId) ?? null
+	if (
+		existingCard &&
+		(existingCard.renderState === 'final' || existingCard.renderState === 'error')
+	) {
+		return cardList
+	}
+	if (existingCard && patch.draftSequence < existingCard.draftSequence) {
+		return cardList
+	}
+
+	const baseCard = existingCard
+		? { ...existingCard }
+		: createEmptyUtteranceCard(
+				patch.itemId,
+				patch.inputOrigin,
+				translateSettings,
+				nextUtteranceSequence
+			)
+	const nextCard: UtteranceCard = {
+		...baseCard,
+		draftSequence: patch.draftSequence,
+		draftTranslatedText: patch.translatedText,
+		inputOrigin: patch.inputOrigin,
+		lastDraftAt: Date.now(),
+		renderState: 'draft',
+		status: 'draft',
+		...(patch.responseId ? { responseId: patch.responseId } : {})
+	}
+	return insertCardByPreviousItemId(cardList, nextCard)
+}
+
 function getDirectionColorClass(direction: UtteranceDirection): string {
 	switch (direction) {
 		case 'my_to_target':
@@ -411,10 +457,15 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	const pendingTranslateInputQueueRef = useRef<PendingTranslateInput[]>([])
 	const chatTranscriptSequenceRef = useRef(1)
 	const subtitleDedupKeyTimestampByKeyRef = useRef<Map<string, number>>(new Map())
-	const translateSegmentAggregationStateRef = useRef<TranslateSegmentAggregationState>(
-		defaultTranslateSegmentAggregationState
-	)
-	const translateAggregationFlushTimerRef = useRef<null | number>(null)
+	const subtitleSourceTextByItemIdRef = useRef<Map<string, string>>(new Map())
+	const subtitlePreviousItemIdByItemIdRef = useRef<Map<string, null | string>>(new Map())
+	const subtitleLatestConfidenceByItemIdRef = useRef<Map<string, number>>(new Map())
+	const subtitleCommittedAtByItemIdRef = useRef<Map<string, number>>(new Map())
+	const translateDraftSequenceByItemIdRef = useRef<Map<string, number>>(new Map())
+	const translateLastDraftSourceTextByItemIdRef = useRef<Map<string, string>>(new Map())
+	const translateDraftScheduleTimerByItemIdRef = useRef<Map<string, number>>(new Map())
+	const translateFinalScheduleTimerByItemIdRef = useRef<Map<string, number>>(new Map())
+	const translateUtteranceSequenceRef = useRef(1)
 	const reconnectTimerByChannelRef = useRef<Partial<Record<RuntimeChannel, number>>>({})
 	const reconnectStatusTimerRef = useRef<null | number>(null)
 	const scheduleReconnectRef = useRef<(channel: RuntimeChannel) => void>(() => {})
@@ -436,10 +487,29 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		delete reconnectTimerByChannelRef.current[channel]
 	}, [])
 
-	const clearTranslateAggregationFlushTimer = useCallback(() => {
-		if (typeof translateAggregationFlushTimerRef.current !== 'number') return
-		window.clearTimeout(translateAggregationFlushTimerRef.current)
-		translateAggregationFlushTimerRef.current = null
+	const clearTranslateDraftTimerByItemId = useCallback((itemId: string) => {
+		const timerId = translateDraftScheduleTimerByItemIdRef.current.get(itemId)
+		if (typeof timerId !== 'number') return
+		window.clearTimeout(timerId)
+		translateDraftScheduleTimerByItemIdRef.current.delete(itemId)
+	}, [])
+
+	const clearTranslateFinalTimerByItemId = useCallback((itemId: string) => {
+		const timerId = translateFinalScheduleTimerByItemIdRef.current.get(itemId)
+		if (typeof timerId !== 'number') return
+		window.clearTimeout(timerId)
+		translateFinalScheduleTimerByItemIdRef.current.delete(itemId)
+	}, [])
+
+	const clearAllTranslateStreamingTimers = useCallback(() => {
+		translateDraftScheduleTimerByItemIdRef.current.forEach(timerId => {
+			window.clearTimeout(timerId)
+		})
+		translateFinalScheduleTimerByItemIdRef.current.forEach(timerId => {
+			window.clearTimeout(timerId)
+		})
+		translateDraftScheduleTimerByItemIdRef.current.clear()
+		translateFinalScheduleTimerByItemIdRef.current.clear()
 	}, [])
 
 	const stopChatClient = useCallback(() => {
@@ -466,8 +536,13 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		intentionalStopByChannelRef.current.subtitle = true
 		void subtitleClientRef.current?.stop()
 		subtitleClientRef.current = null
-		clearTranslateAggregationFlushTimer()
-		translateSegmentAggregationStateRef.current = defaultTranslateSegmentAggregationState
+		clearAllTranslateStreamingTimers()
+		subtitleSourceTextByItemIdRef.current.clear()
+		subtitlePreviousItemIdByItemIdRef.current.clear()
+		subtitleLatestConfidenceByItemIdRef.current.clear()
+		subtitleCommittedAtByItemIdRef.current.clear()
+		translateDraftSequenceByItemIdRef.current.clear()
+		translateLastDraftSourceTextByItemIdRef.current.clear()
 		setSubtitleChannelState('disconnected')
 		setLiveSubtitleState(previousState => ({
 			...previousState,
@@ -479,7 +554,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		queueMicrotask(() => {
 			intentionalStopByChannelRef.current.subtitle = false
 		})
-	}, [clearTranslateAggregationFlushTimer])
+	}, [clearAllTranslateStreamingTimers])
 
 	const stopAllClients = useCallback(() => {
 		stopChatClient()
@@ -492,12 +567,18 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		setChatTranscripts([])
 		setTranslateCards([])
 		setLiveSubtitleState(defaultLiveSubtitleState)
-		translateSegmentAggregationStateRef.current = defaultTranslateSegmentAggregationState
 		subtitleDedupKeyTimestampByKeyRef.current.clear()
+		subtitleSourceTextByItemIdRef.current.clear()
+		subtitlePreviousItemIdByItemIdRef.current.clear()
+		subtitleLatestConfidenceByItemIdRef.current.clear()
+		subtitleCommittedAtByItemIdRef.current.clear()
+		translateDraftSequenceByItemIdRef.current.clear()
+		translateLastDraftSourceTextByItemIdRef.current.clear()
+		translateUtteranceSequenceRef.current = 1
 		chatTranscriptSequenceRef.current = 1
-		clearTranslateAggregationFlushTimer()
+		clearAllTranslateStreamingTimers()
 		pendingTranslateInputQueueRef.current = []
-	}, [clearTranslateAggregationFlushTimer])
+	}, [clearAllTranslateStreamingTimers])
 
 	const shouldRunChannelForMode = useCallback(
 		(channel: RuntimeChannel, activeMode: LilacMode): boolean => {
@@ -519,16 +600,35 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		while (pendingTranslateInputQueueRef.current.length > 0) {
 			const nextInput = pendingTranslateInputQueueRef.current.shift()
 			if (!nextInput) continue
-			translateClient.submitInput(nextInput)
+			switch (nextInput.requestKind) {
+				case 'draft':
+					translateClient.submitDraftInput(nextInput)
+					break
+				case 'final':
+					translateClient.submitFinalInput(nextInput)
+					break
+				default:
+					break
+			}
 		}
 	}, [])
 
 	const enqueueTranslateInput = useCallback(
 		(input: PendingTranslateInput) => {
 			const existingIndex = pendingTranslateInputQueueRef.current.findIndex(
-				queuedInput => queuedInput.itemId === input.itemId
+				queuedInput =>
+					queuedInput.itemId === input.itemId && queuedInput.requestKind === input.requestKind
 			)
 			if (existingIndex >= 0) {
+				const existingInput = pendingTranslateInputQueueRef.current[existingIndex]
+				if (
+					input.requestKind === 'draft' &&
+					existingInput?.requestKind === 'draft' &&
+					input.draftSequence < existingInput.draftSequence
+				) {
+					flushPendingTranslateInputs()
+					return
+				}
 				pendingTranslateInputQueueRef.current[existingIndex] = input
 				flushPendingTranslateInputs()
 				return
@@ -539,46 +639,111 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		[flushPendingTranslateInputs]
 	)
 
-	const flushTranslateSegmentAggregation = useCallback(() => {
-		const aggregateState = translateSegmentAggregationStateRef.current
-		const activeUtteranceId = aggregateState.activeUtteranceId
-		const normalizedText = normalizeWhitespace(aggregateState.pendingSourceText)
-		if (!activeUtteranceId || !normalizedText) {
-			translateSegmentAggregationStateRef.current = defaultTranslateSegmentAggregationState
-			return
-		}
-
-		setTranslateCards(previousCards =>
-			previousCards.map(card => {
-				if (card.id !== activeUtteranceId) return card
-				return {
-					...card,
+	const upsertSubtitleCard = useCallback(
+		(itemId: string, previousItemId: null | string | undefined, sourceText: string): void => {
+			const normalizedText = normalizeWhitespace(sourceText)
+			if (!normalizedText) return
+			setTranslateCards(previousCards => {
+				const existingCardIndex = previousCards.findIndex(card => card.id === itemId)
+				if (existingCardIndex === -1) {
+					const nextCard: UtteranceCard = {
+						...createEmptyUtteranceCard(
+							itemId,
+							'audio',
+							translateSettingsRef.current,
+							translateUtteranceSequenceRef.current
+						),
+						sourceLanguageCode: translateSettingsRef.current.myLanguageCode,
+						sourceText: normalizedText,
+						status: 'streaming'
+					}
+					translateUtteranceSequenceRef.current += 1
+					const fallbackPreviousItemId =
+						previousCards.length > 0 ? (previousCards[previousCards.length - 1]?.id ?? null) : null
+					return insertCardByPreviousItemId(
+						previousCards,
+						nextCard,
+						previousItemId ?? fallbackPreviousItemId
+					)
+				}
+				const nextCardList = previousCards.slice()
+				const existingCard = nextCardList[existingCardIndex]
+				if (
+					!existingCard ||
+					existingCard.renderState === 'final' ||
+					existingCard.renderState === 'error'
+				)
+					return previousCards
+				nextCardList[existingCardIndex] = {
+					...existingCard,
 					sourceText: normalizedText,
-					status: 'translating'
+					status: existingCard.renderState === 'draft' ? 'draft' : 'streaming'
 				}
+				return nextCardList
 			})
-		)
-		enqueueTranslateInput({
-			inputOrigin: 'audio',
-			itemId: activeUtteranceId,
-			text: normalizedText
-		})
-		translateSegmentAggregationStateRef.current = defaultTranslateSegmentAggregationState
-		setLiveSubtitleState(previousState => ({
-			...previousState,
-			activeSegmentId: null,
-			text: '',
-			updatedAt: Date.now()
-		}))
-	}, [enqueueTranslateInput])
+		},
+		[]
+	)
 
-	const scheduleTranslateSegmentAggregationFlush = useCallback(() => {
-		clearTranslateAggregationFlushTimer()
-		translateAggregationFlushTimerRef.current = window.setTimeout(() => {
-			translateAggregationFlushTimerRef.current = null
-			flushTranslateSegmentAggregation()
-		}, subtitleAggregationSilenceMilliseconds)
-	}, [clearTranslateAggregationFlushTimer, flushTranslateSegmentAggregation])
+	const scheduleDraftTranslateForItem = useCallback(
+		(itemId: string, inputOrigin: 'audio' | 'text') => {
+			if (!isTranslateStreamingV2Enabled) return
+			clearTranslateDraftTimerByItemId(itemId)
+			const timerId = window.setTimeout(() => {
+				translateDraftScheduleTimerByItemIdRef.current.delete(itemId)
+				const latestSourceText = normalizeWhitespace(
+					subtitleSourceTextByItemIdRef.current.get(itemId) ?? ''
+				)
+				if (!latestSourceText || latestSourceText.length < minimumDraftTextLength) return
+				const lastDraftSourceText = translateLastDraftSourceTextByItemIdRef.current.get(itemId) ?? ''
+				if (latestSourceText === lastDraftSourceText) return
+				if (
+					lastDraftSourceText.length > 0 &&
+					latestSourceText.length - lastDraftSourceText.length < minimumDraftTextDeltaLength
+				) {
+					return
+				}
+				const nextDraftSequence = (translateDraftSequenceByItemIdRef.current.get(itemId) ?? 0) + 1
+				translateDraftSequenceByItemIdRef.current.set(itemId, nextDraftSequence)
+				translateLastDraftSourceTextByItemIdRef.current.set(itemId, latestSourceText)
+				enqueueTranslateInput({
+					draftSequence: nextDraftSequence,
+					inputOrigin,
+					itemId,
+					requestKind: 'draft',
+					text: latestSourceText
+				})
+			}, draftTranslateDebounceMilliseconds)
+			translateDraftScheduleTimerByItemIdRef.current.set(itemId, timerId)
+		},
+		[clearTranslateDraftTimerByItemId, enqueueTranslateInput]
+	)
+
+	const scheduleFinalTranslateForItem = useCallback(
+		(itemId: string, inputOrigin: 'audio' | 'text') => {
+			clearTranslateFinalTimerByItemId(itemId)
+			const confidence = subtitleLatestConfidenceByItemIdRef.current.get(itemId)
+			const delayMilliseconds =
+				typeof confidence === 'number' && confidence < finalTranslateLowConfidenceThreshold
+					? finalTranslateLowConfidenceDelayMilliseconds
+					: 0
+			const timerId = window.setTimeout(() => {
+				translateFinalScheduleTimerByItemIdRef.current.delete(itemId)
+				const latestSourceText = normalizeWhitespace(
+					subtitleSourceTextByItemIdRef.current.get(itemId) ?? ''
+				)
+				if (!latestSourceText) return
+				enqueueTranslateInput({
+					inputOrigin,
+					itemId,
+					requestKind: 'final',
+					text: latestSourceText
+				})
+			}, delayMilliseconds)
+			translateFinalScheduleTimerByItemIdRef.current.set(itemId, timerId)
+		},
+		[clearTranslateFinalTimerByItemId, enqueueTranslateInput]
+	)
 
 	const handleTranslateSubtitleFinalPatch = useCallback(
 		(patch: SubtitleFinalPatch) => {
@@ -600,67 +765,24 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				if (now - value > 10_000) subtitleDedupKeyTimestampByKeyRef.current.delete(key)
 			})
 
-			const aggregateState = translateSegmentAggregationStateRef.current
-			const hasActiveAggregate =
-				aggregateState.activeUtteranceId !== null && aggregateState.pendingSourceText.trim().length > 0
-			const crossedPauseWindow =
-				typeof aggregateState.lastFinalizedAt === 'number' &&
-				now - aggregateState.lastFinalizedAt > subtitleAggregationSilenceMilliseconds
-			if (hasActiveAggregate && crossedPauseWindow) {
-				flushTranslateSegmentAggregation()
+			subtitleSourceTextByItemIdRef.current.set(patch.itemId, normalizedText)
+			subtitlePreviousItemIdByItemIdRef.current.set(patch.itemId, patch.previousItemId ?? null)
+			subtitleCommittedAtByItemIdRef.current.set(patch.itemId, patch.committedAt)
+			if (typeof patch.confidence === 'number') {
+				subtitleLatestConfidenceByItemIdRef.current.set(patch.itemId, patch.confidence)
 			}
 
-			const refreshedAggregateState = translateSegmentAggregationStateRef.current
-			const shouldCreateUtterance =
-				refreshedAggregateState.activeUtteranceId === null ||
-				!refreshedAggregateState.pendingSourceText.trim()
-			const activeUtteranceId = shouldCreateUtterance
-				? createClientItemId('audio')
-				: (refreshedAggregateState.activeUtteranceId as string)
-			const nextSourceText = shouldCreateUtterance
-				? normalizedText
-				: joinUtteranceText(refreshedAggregateState.pendingSourceText, normalizedText)
-
-			setTranslateCards(previousCards => {
-				const existingCardIndex = previousCards.findIndex(card => card.id === activeUtteranceId)
-				if (existingCardIndex === -1) {
-					const nextCard: UtteranceCard = {
-						...createEmptyUtteranceCard(activeUtteranceId, 'audio', translateSettingsRef.current),
-						sourceLanguageCode: translateSettingsRef.current.myLanguageCode,
-						sourceText: nextSourceText,
-						status: 'streaming'
-					}
-					const previousItemId =
-						patch.previousItemId ??
-						(previousCards.length > 0 ? (previousCards[previousCards.length - 1]?.id ?? null) : null)
-					return insertCardByPreviousItemId(previousCards, nextCard, previousItemId)
-				}
-				const nextCardList = previousCards.slice()
-				const existingCard = nextCardList[existingCardIndex]
-				if (!existingCard) return previousCards
-				nextCardList[existingCardIndex] = {
-					...existingCard,
-					sourceText: nextSourceText,
-					status: 'streaming'
-				}
-				return nextCardList
-			})
-
-			translateSegmentAggregationStateRef.current = {
-				activeUtteranceId,
-				lastFinalizedAt: now,
-				pendingSourceText: nextSourceText,
-				sourceLanguageCode: translateSettingsRef.current.myLanguageCode
-			}
+			clearTranslateDraftTimerByItemId(patch.itemId)
+			upsertSubtitleCard(patch.itemId, patch.previousItemId, normalizedText)
 			setLiveSubtitleState(previousState => ({
 				...previousState,
-				activeSegmentId: activeUtteranceId,
-				text: nextSourceText,
-				updatedAt: now
+				activeSegmentId: patch.itemId,
+				text: normalizedText,
+				updatedAt: Date.now()
 			}))
-			scheduleTranslateSegmentAggregationFlush()
+			scheduleFinalTranslateForItem(patch.itemId, 'audio')
 		},
-		[flushTranslateSegmentAggregation, scheduleTranslateSegmentAggregationFlush]
+		[clearTranslateDraftTimerByItemId, scheduleFinalTranslateForItem, upsertSubtitleCard]
 	)
 
 	const startChatClient = useCallback(() => {
@@ -733,6 +855,36 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 						return
 				}
 			},
+			onDraftDeltaPatch: patch => {
+				setTranslateCards(previousCards => {
+					const hasExistingCard = previousCards.some(card => card.id === patch.itemId)
+					const nextCards = applyTranslateDraftPatch(
+						previousCards,
+						patch,
+						translateSettingsRef.current,
+						translateUtteranceSequenceRef.current
+					)
+					if (!hasExistingCard && nextCards.some(card => card.id === patch.itemId)) {
+						translateUtteranceSequenceRef.current += 1
+					}
+					return nextCards
+				})
+			},
+			onDraftDonePatch: patch => {
+				setTranslateCards(previousCards => {
+					const hasExistingCard = previousCards.some(card => card.id === patch.itemId)
+					const nextCards = applyTranslateDraftPatch(
+						previousCards,
+						patch,
+						translateSettingsRef.current,
+						translateUtteranceSequenceRef.current
+					)
+					if (!hasExistingCard && nextCards.some(card => card.id === patch.itemId)) {
+						translateUtteranceSequenceRef.current += 1
+					}
+					return nextCards
+				})
+			},
 			onError: message => {
 				setErrorMessage(message)
 				setConnectionHealth(previousState => ({
@@ -741,9 +893,27 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				}))
 			},
 			onResultPatch: patch => {
-				setTranslateCards(previousCards =>
-					applyTranslateResultPatch(previousCards, patch, translateSettingsRef.current)
-				)
+				clearTranslateDraftTimerByItemId(patch.itemId)
+				clearTranslateFinalTimerByItemId(patch.itemId)
+				subtitleSourceTextByItemIdRef.current.delete(patch.itemId)
+				subtitlePreviousItemIdByItemIdRef.current.delete(patch.itemId)
+				subtitleLatestConfidenceByItemIdRef.current.delete(patch.itemId)
+				subtitleCommittedAtByItemIdRef.current.delete(patch.itemId)
+				translateDraftSequenceByItemIdRef.current.delete(patch.itemId)
+				translateLastDraftSourceTextByItemIdRef.current.delete(patch.itemId)
+				setTranslateCards(previousCards => {
+					const hasExistingCard = previousCards.some(card => card.id === patch.itemId)
+					const nextCards = applyTranslateResultPatch(
+						previousCards,
+						patch,
+						translateSettingsRef.current,
+						translateUtteranceSequenceRef.current
+					)
+					if (!hasExistingCard && nextCards.some(card => card.id === patch.itemId)) {
+						translateUtteranceSequenceRef.current += 1
+					}
+					return nextCards
+				})
 			}
 		})
 		liveTranslateClientRef.current = translateClient
@@ -752,7 +922,13 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			myLanguageCode: translateSettingsRef.current.myLanguageCode,
 			translateToLanguageCode: translateSettingsRef.current.translateToLanguageCode
 		})
-	}, [clearReconnectTimer, flushPendingTranslateInputs, stopTranslateClient])
+	}, [
+		clearReconnectTimer,
+		clearTranslateDraftTimerByItemId,
+		clearTranslateFinalTimerByItemId,
+		flushPendingTranslateInputs,
+		stopTranslateClient
+	])
 
 	const startSubtitleClient = useCallback(() => {
 		stopSubtitleClient()
@@ -789,24 +965,27 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				}))
 			},
 			onSubtitleDelta: patch => {
-				setLiveSubtitleState(previousState => {
-					const baseText = previousState.activeSegmentId === patch.itemId ? previousState.text : ''
-					const nextText = `${baseText}${patch.textDelta}`
-					if (shouldDropSubtitleText(nextText)) {
-						return {
-							activeSegmentId: patch.itemId,
-							isListening: true,
-							text: '',
-							updatedAt: Date.now()
-						}
-					}
-					return {
+				const previousText = subtitleSourceTextByItemIdRef.current.get(patch.itemId) ?? ''
+				const nextText = `${previousText}${patch.textDelta}`
+				if (shouldDropSubtitleText(nextText)) {
+					setLiveSubtitleState({
 						activeSegmentId: patch.itemId,
 						isListening: true,
-						text: nextText,
+						text: '',
 						updatedAt: Date.now()
-					}
+					})
+					return
+				}
+				subtitleSourceTextByItemIdRef.current.set(patch.itemId, nextText)
+				subtitlePreviousItemIdByItemIdRef.current.set(patch.itemId, patch.previousItemId ?? null)
+				upsertSubtitleCard(patch.itemId, patch.previousItemId, nextText)
+				setLiveSubtitleState({
+					activeSegmentId: patch.itemId,
+					isListening: true,
+					text: nextText,
+					updatedAt: Date.now()
 				})
+				scheduleDraftTranslateForItem(patch.itemId, 'audio')
 			},
 			onSubtitleFinal: handleTranslateSubtitleFinalPatch
 		})
@@ -816,7 +995,13 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			translateToLanguageCode: translateSettingsRef.current.translateToLanguageCode,
 			voiceInputEnabled: voiceInputEnabledRef.current
 		})
-	}, [clearReconnectTimer, handleTranslateSubtitleFinalPatch, stopSubtitleClient])
+	}, [
+		clearReconnectTimer,
+		handleTranslateSubtitleFinalPatch,
+		scheduleDraftTranslateForItem,
+		stopSubtitleClient,
+		upsertSubtitleCard
+	])
 
 	const startModeRuntime = useCallback(
 		(nextMode: LilacMode) => {
@@ -929,15 +1114,21 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	const setTranslateSettings = useCallback(
 		(nextSettings: TranslateSettings) => {
 			const sanitizedSettings = sanitizeTranslateSettings(nextSettings)
-			clearTranslateAggregationFlushTimer()
-			translateSegmentAggregationStateRef.current = defaultTranslateSegmentAggregationState
+			clearAllTranslateStreamingTimers()
+			subtitleSourceTextByItemIdRef.current.clear()
+			subtitlePreviousItemIdByItemIdRef.current.clear()
+			subtitleLatestConfidenceByItemIdRef.current.clear()
+			subtitleCommittedAtByItemIdRef.current.clear()
+			translateDraftSequenceByItemIdRef.current.clear()
+			translateLastDraftSourceTextByItemIdRef.current.clear()
+			pendingTranslateInputQueueRef.current = []
 			setTranslateSettingsState(sanitizedSettings)
 			if (modeRef.current === 'translate') {
 				liveTranslateClientRef.current?.updateTranslateSettings(sanitizedSettings)
 				subtitleClientRef.current?.updateSubtitleSettings(sanitizedSettings)
 			}
 		},
-		[clearTranslateAggregationFlushTimer]
+		[clearAllTranslateStreamingTimers]
 	)
 
 	const setVoiceInputEnabled = useCallback((voiceInputEnabled: boolean) => {
@@ -970,20 +1161,52 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			const normalizedText = text.trim()
 			if (!normalizedText) return
 			const itemId = createClientItemId('typed')
+			subtitleSourceTextByItemIdRef.current.set(itemId, normalizedText)
 			setTranslateCards(previousCards => {
 				const nextCard: UtteranceCard = {
-					...createEmptyUtteranceCard(itemId, 'text', translateSettingsRef.current),
+					...createEmptyUtteranceCard(
+						itemId,
+						'text',
+						translateSettingsRef.current,
+						translateUtteranceSequenceRef.current
+					),
+					renderState: 'draft',
 					sourceLanguageCode: translateSettingsRef.current.myLanguageCode,
 					sourceText: normalizedText,
 					status: 'translating'
 				}
+				translateUtteranceSequenceRef.current += 1
 				const previousItemId =
 					previousCards.length > 0 ? (previousCards[previousCards.length - 1]?.id ?? null) : null
 				return insertCardByPreviousItemId(previousCards, nextCard, previousItemId)
 			})
+			if (isTranslateStreamingV2Enabled) {
+				const nextDraftSequence = (translateDraftSequenceByItemIdRef.current.get(itemId) ?? 0) + 1
+				translateDraftSequenceByItemIdRef.current.set(itemId, nextDraftSequence)
+				translateLastDraftSourceTextByItemIdRef.current.set(itemId, normalizedText)
+				enqueueTranslateInput({
+					draftSequence: nextDraftSequence,
+					inputOrigin: 'text',
+					itemId,
+					requestKind: 'draft',
+					text: normalizedText
+				})
+				const timerId = window.setTimeout(() => {
+					translateFinalScheduleTimerByItemIdRef.current.delete(itemId)
+					enqueueTranslateInput({
+						inputOrigin: 'text',
+						itemId,
+						requestKind: 'final',
+						text: normalizedText
+					})
+				}, 450)
+				translateFinalScheduleTimerByItemIdRef.current.set(itemId, timerId)
+				return
+			}
 			enqueueTranslateInput({
 				inputOrigin: 'text',
 				itemId,
+				requestKind: 'final',
 				text: normalizedText
 			})
 		},
@@ -1258,12 +1481,9 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				window.clearTimeout(reconnectStatusTimerRef.current)
 				reconnectStatusTimerRef.current = null
 			}
-			if (typeof translateAggregationFlushTimerRef.current === 'number') {
-				window.clearTimeout(translateAggregationFlushTimerRef.current)
-				translateAggregationFlushTimerRef.current = null
-			}
+			clearAllTranslateStreamingTimers()
 		}
-	}, [])
+	}, [clearAllTranslateStreamingTimers])
 
 	const contextValue = useMemo<LilacModeRuntimeContextValue>(
 		() => ({
diff --git a/src/realtime/modelConfig.ts b/src/realtime/modelConfig.ts
index b4c2e40..88f8d6f 100644
--- a/src/realtime/modelConfig.ts
+++ b/src/realtime/modelConfig.ts
@@ -1,15 +1,19 @@
 import { z } from 'zod'
 
 export const chatRealtimeModelValues = ['gpt-realtime-1.5'] as const
-export const transcriptionModelValues = ['gpt-4o-transcribe'] as const
+export const transcriptionModelValues = ['gpt-4o-transcribe', 'gpt-4o-mini-transcribe'] as const
 export const translationModelValues = ['gpt-5.3-chat-latest', 'gpt-5.3-codex'] as const
+export const transcriptionAsrProfileValues = ['accurate', 'fast'] as const
 
 export const ChatRealtimeModelSchema = z.enum(chatRealtimeModelValues)
 export const TranscriptionModelSchema = z.enum(transcriptionModelValues)
 export const TranslationModelSchema = z.enum(translationModelValues)
+export const TranscriptionAsrProfileSchema = z.enum(transcriptionAsrProfileValues)
 
 export const defaultChatRealtimeModel = 'gpt-realtime-1.5'
 export const defaultTranscriptionModel = 'gpt-4o-transcribe'
+export const fastTranscriptionModel = 'gpt-4o-mini-transcribe'
+export const defaultTranscriptionAsrProfile = 'accurate'
 export const defaultTranslationModel = 'gpt-5.3-chat-latest'
 
 export const AllowedLilacModelSchema = z.union([
@@ -21,3 +25,11 @@ export const AllowedLilacModelSchema = z.union([
 export type ChatRealtimeModel = z.infer<typeof ChatRealtimeModelSchema>
 export type TranscriptionModel = z.infer<typeof TranscriptionModelSchema>
 export type TranslationModel = z.infer<typeof TranslationModelSchema>
+export type TranscriptionAsrProfile = z.infer<typeof TranscriptionAsrProfileSchema>
+
+export function resolveTranscriptionModelForAsrProfile(
+	asrProfile: null | TranscriptionAsrProfile | undefined
+): TranscriptionModel {
+	if (asrProfile === 'fast') return fastTranscriptionModel
+	return defaultTranscriptionModel
+}
diff --git a/src/realtime/schemas.ts b/src/realtime/schemas.ts
index 50a9424..f90536d 100644
--- a/src/realtime/schemas.ts
+++ b/src/realtime/schemas.ts
@@ -3,7 +3,9 @@ import { isValidLanguageCode, normalizeLanguageCode } from '@/realtime/languageC
 import {
 	ChatRealtimeModelSchema,
 	defaultChatRealtimeModel,
-	defaultTranscriptionModel
+	defaultTranscriptionAsrProfile,
+	defaultTranscriptionModel,
+	TranscriptionAsrProfileSchema
 } from '@/realtime/modelConfig'
 
 export const LanguageCodeSchema = z
@@ -58,8 +60,10 @@ export const CreateTranslateRealtimeClientSecretActionOutputSchema = z.object({
 })
 
 export const CreateRealtimeTranscriptionSessionActionInputSchema = z.object({
+	asrProfile: TranscriptionAsrProfileSchema.default(defaultTranscriptionAsrProfile),
 	myLanguageCode: LanguageCodeSchema,
-	translateToLanguageCode: LanguageCodeSchema
+	translateToLanguageCode: LanguageCodeSchema,
+	turnEagerness: z.enum(['low', 'medium', 'high']).default('high')
 })
 
 export const CreateRealtimeTranscriptionSessionActionOutputSchema = z.object({
@@ -124,6 +128,15 @@ export const InputAudioTranscriptionDeltaEventSchema = z
 export const InputAudioTranscriptionCompletedEventSchema = z
 	.object({
 		item_id: z.string(),
+		logprobs: z
+			.array(
+				z
+					.object({
+						logprob: z.number().optional()
+					})
+					.passthrough()
+			)
+			.optional(),
 		transcript: z.string(),
 		type: z.literal('conversation.item.input_audio_transcription.completed')
 	})
@@ -252,6 +265,23 @@ export const ResponseFunctionCallArgumentsDoneEventSchema = z
 	})
 	.passthrough()
 
+export const ResponseFunctionCallArgumentsDeltaEventSchema = z
+	.object({
+		delta: z.string().optional(),
+		item: z
+			.object({
+				arguments: z.string().optional(),
+				name: z.string().optional(),
+				type: z.string().optional()
+			})
+			.passthrough()
+			.optional(),
+		name: z.string().optional(),
+		response_id: z.string().optional(),
+		type: z.literal('response.function_call_arguments.delta')
+	})
+	.passthrough()
+
 const ResponseDoneFunctionCallItemSchema = z
 	.object({
 		arguments: z.string().optional(),
@@ -279,6 +309,13 @@ export const ResponseDoneEventSchema = z
 	})
 	.passthrough()
 
+export const TranslationDraftDeltaSchema = z.object({
+	draftSequence: z.number().int().min(0),
+	itemId: z.string().min(1),
+	responseId: z.string().optional(),
+	translatedText: z.string()
+})
+
 export function parseClientSecretResponse(value: unknown): { expiresAt: number; value: string } {
 	const directSecret = RealtimeClientSecretResponseSchema.safeParse(value)
 	if (directSecret.success) {
diff --git a/src/realtime/sessionTypes.ts b/src/realtime/sessionTypes.ts
index 3b2bb24..9dd2b2b 100644
--- a/src/realtime/sessionTypes.ts
+++ b/src/realtime/sessionTypes.ts
@@ -45,7 +45,9 @@ export type ConnectionHealthState = {
 
 export type UtteranceDirection = 'my_to_target' | 'target_to_my'
 
-export type UtteranceStatus = 'streaming' | 'translating' | 'final' | 'error'
+export type UtteranceStatus = 'streaming' | 'translating' | 'draft' | 'final' | 'error'
+
+export type TranslateRenderState = 'listening' | 'draft' | 'final' | 'error'
 
 export type UtteranceCard = {
 	id: string
@@ -55,9 +57,14 @@ export type UtteranceCard = {
 	sourceText: string
 	sourceLanguageCode: string
 	translatedText: string
+	draftTranslatedText?: string
 	targetLanguageCode: string
 	direction: UtteranceDirection
+	renderState: TranslateRenderState
 	status: UtteranceStatus
+	draftSequence: number
+	utteranceSequence: number
+	lastDraftAt?: number
 	createdAt: number
 	errorMessage?: string
 }
diff --git a/src/realtime/subtitleTranscriptionClient.ts b/src/realtime/subtitleTranscriptionClient.ts
index 6fae812..d82c689 100644
--- a/src/realtime/subtitleTranscriptionClient.ts
+++ b/src/realtime/subtitleTranscriptionClient.ts
@@ -30,8 +30,11 @@ export type SubtitleDeltaPatch = {
 }
 
 export type SubtitleFinalPatch = {
+	committedAt: number
+	confidence?: number
 	itemId: string
 	previousItemId?: null | string
+	segmentSequence: number
 	text: string
 }
 
@@ -117,16 +120,53 @@ function buildTranscriptionPrompt(): string {
 	return 'Transcribe spoken audio faithfully. Preserve punctuation and proper nouns.'
 }
 
+function resolveAsrProfileFromEnvironment(): 'accurate' | 'fast' {
+	return process.env.NEXT_PUBLIC_LILAC_TRANSCRIBE_ASR_PROFILE === 'fast' ? 'fast' : 'accurate'
+}
+
+function resolveTurnEagernessFromEnvironment(): 'high' | 'low' | 'medium' {
+	const rawValue = process.env.NEXT_PUBLIC_LILAC_TRANSCRIBE_TURN_EAGERNESS
+	switch (rawValue) {
+		case 'low':
+			return 'low'
+		case 'medium':
+			return 'medium'
+		default:
+			return 'high'
+	}
+}
+
+function computeConfidenceFromLogprobs(
+	logprobList: Array<Record<string, unknown>> | undefined
+): number | undefined {
+	if (!Array.isArray(logprobList) || logprobList.length === 0) return undefined
+	let normalizedProbabilitySum = 0
+	let normalizedProbabilityCount = 0
+	for (const logprobEntry of logprobList) {
+		const logprobValue = typeof logprobEntry.logprob === 'number' ? logprobEntry.logprob : undefined
+		if (typeof logprobValue !== 'number' || !Number.isFinite(logprobValue)) continue
+		const clampedLogprob = Math.max(-20, Math.min(0, logprobValue))
+		const normalizedProbability = Math.exp(clampedLogprob)
+		normalizedProbabilitySum += normalizedProbability
+		normalizedProbabilityCount += 1
+	}
+	if (normalizedProbabilityCount === 0) return undefined
+	return Math.round((normalizedProbabilitySum / normalizedProbabilityCount) * 1000) / 1000
+}
+
 export class SubtitleTranscriptionClient {
 	private audioContext: AudioContext | null = null
 	private callbacks: SubtitleTranscriptionClientCallbacks
+	private committedAtByItemId = new Map<string, number>()
 	private generation = 0
 	private localAudioStream: MediaStream | null = null
 	private micProcessorNode: ScriptProcessorNode | null = null
 	private micSourceNode: MediaStreamAudioSourceNode | null = null
 	private previousItemIdByItemId = new Map<string, null | string>()
+	private segmentSequence = 0
 	private silentGainNode: GainNode | null = null
 	private state: SubtitleTranscriptionClientState = 'disconnected'
+	private turnEagerness: 'high' | 'low' | 'medium' = resolveTurnEagernessFromEnvironment()
 	private voiceInputEnabled = true
 	private websocket: WebSocket | null = null
 
@@ -143,8 +183,10 @@ export class SubtitleTranscriptionClient {
 
 		try {
 			const clientSecret = await createRealtimeTranscriptionSessionAction({
+				asrProfile: resolveAsrProfileFromEnvironment(),
 				myLanguageCode: input.myLanguageCode,
-				translateToLanguageCode: input.translateToLanguageCode
+				translateToLanguageCode: input.translateToLanguageCode,
+				turnEagerness: this.turnEagerness
 			})
 			if (generation !== this.generation) return
 
@@ -160,13 +202,14 @@ export class SubtitleTranscriptionClient {
 				this.setState('connected')
 				this.sendEvent({
 					session: {
+						include: ['item.input_audio_transcription.logprobs'],
 						input_audio_format: 'pcm16',
 						input_audio_transcription: {
 							model: defaultInputTranscriptionModel,
 							prompt: buildTranscriptionPrompt()
 						},
 						turn_detection: {
-							eagerness: 'high',
+							eagerness: this.turnEagerness,
 							type: 'semantic_vad'
 						},
 						type: 'transcription'
@@ -206,7 +249,9 @@ export class SubtitleTranscriptionClient {
 	public stop(): void {
 		this.generation += 1
 		this.stopVoiceInput()
+		this.committedAtByItemId.clear()
 		this.previousItemIdByItemId.clear()
+		this.segmentSequence = 0
 
 		try {
 			this.websocket?.close()
@@ -238,10 +283,15 @@ export class SubtitleTranscriptionClient {
 		void settings
 		this.sendEvent({
 			session: {
+				include: ['item.input_audio_transcription.logprobs'],
 				input_audio_transcription: {
 					model: defaultInputTranscriptionModel,
 					prompt: buildTranscriptionPrompt()
 				},
+				turn_detection: {
+					eagerness: this.turnEagerness,
+					type: 'semantic_vad'
+				},
 				type: 'transcription'
 			},
 			type: 'transcription_session.update'
@@ -321,6 +371,7 @@ export class SubtitleTranscriptionClient {
 	private handleInputAudioBufferCommittedEvent(candidate: unknown): void {
 		const event = InputAudioBufferCommittedEventSchema.parse(candidate)
 		this.previousItemIdByItemId.set(event.item_id, event.previous_item_id ?? null)
+		this.committedAtByItemId.set(event.item_id, Date.now())
 	}
 
 	private handleInputAudioTranscriptionDeltaEvent(candidate: unknown): void {
@@ -337,10 +388,15 @@ export class SubtitleTranscriptionClient {
 		const event = InputAudioTranscriptionCompletedEventSchema.parse(candidate)
 		const transcript = event.transcript.trim()
 		if (!transcript) return
+		this.segmentSequence += 1
+		const confidence = computeConfidenceFromLogprobs(event.logprobs)
 		this.callbacks.onSubtitleFinal({
+			committedAt: this.committedAtByItemId.get(event.item_id) ?? Date.now(),
 			itemId: event.item_id,
 			previousItemId: this.previousItemIdByItemId.get(event.item_id) ?? null,
-			text: transcript
+			segmentSequence: this.segmentSequence,
+			text: transcript,
+			...(typeof confidence === 'number' ? { confidence } : {})
 		})
 	}
 

From 65adbd287f0e8737321b72271a8acb7c1a97190d Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Wed, 4 Mar 2026 20:14:29 -0500
Subject: [PATCH 13/24] Fix realtime ordering, subtitle streaming, and
 connection UX

---
 scripts/smoke/captureVercelRuntimeLogs.ts   |   2 +
 scripts/smoke/runLiveConversationSmoke.ts   |  49 ++++-
 src/app/(app)/ChatMode.tsx                  |   9 +-
 src/app/(app)/ModeShell.tsx                 |  43 +++-
 src/app/(app)/TranslateMode.tsx             |  26 +--
 src/app/actions/realtime.ts                 |   2 +-
 src/app/styles.css                          |   8 +-
 src/components/ui/button.tsx                |   2 +-
 src/realtime/chatRealtimeClient.ts          | 189 +++++++++++++++-
 src/realtime/liveTranslateRealtimeClient.ts |  88 +++++++-
 src/realtime/modeRuntimeStore.tsx           | 225 +++++++++++++++++---
 src/realtime/schemas.ts                     |   4 +
 src/realtime/sessionTypes.ts                |  27 +++
 src/realtime/subtitleTranscriptionClient.ts |  92 +++++++-
 14 files changed, 678 insertions(+), 88 deletions(-)

diff --git a/scripts/smoke/captureVercelRuntimeLogs.ts b/scripts/smoke/captureVercelRuntimeLogs.ts
index c28b19b..9b341eb 100644
--- a/scripts/smoke/captureVercelRuntimeLogs.ts
+++ b/scripts/smoke/captureVercelRuntimeLogs.ts
@@ -70,6 +70,8 @@ export async function collectRuntimeErrorMatches(runtimeLogPath: string): Promis
 		/Unsupported value/i,
 		/Unknown parameter/i,
 		/Invalid 'item\.id'/i,
+		/buffer too small/i,
+		/Draft translation timed out/i,
 		/Unhandled/i,
 		/An error occurred in the Server Components render/i,
 		/\bdigest\b/i
diff --git a/scripts/smoke/runLiveConversationSmoke.ts b/scripts/smoke/runLiveConversationSmoke.ts
index b3cc4a7..c84f775 100644
--- a/scripts/smoke/runLiveConversationSmoke.ts
+++ b/scripts/smoke/runLiveConversationSmoke.ts
@@ -26,6 +26,7 @@ type ScenarioResult = {
 const genericServerComponentErrorText =
 	'An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details.'
 const missingSessionTypeErrorText = "Missing required parameter: 'session.type'."
+const unknownSessionTypeErrorText = "Unknown parameter: 'session.type'."
 const invalidItemIdErrorText = "Invalid 'item.id':"
 const missingToolCallErrorTextList = [
 	'No valid publish_translation tool call was returned.',
@@ -33,6 +34,7 @@ const missingToolCallErrorTextList = [
 ]
 const trackedProtocolErrorTextList = [
 	missingSessionTypeErrorText,
+	unknownSessionTypeErrorText,
 	invalidItemIdErrorText,
 	...missingToolCallErrorTextList
 ]
@@ -201,6 +203,16 @@ async function runChatScenario(page: Page, artifactDirectoryPath: string): Promi
 	try {
 		await switchToModeWithRetry(page, 'chat')
 		await waitForConnectionLive(page)
+		const initialStatusMessageText = await page
+			.getByTestId('mode-status-message')
+			.innerText()
+			.catch(() => '')
+		if (
+			initialStatusMessageText.includes('Offline. Waiting for network…') ||
+			initialStatusMessageText.includes('Reconnecting…')
+		) {
+			throw new Error('Chat mode remained in offline/reconnecting banner state after connection.')
+		}
 
 		await openGlobalSettings(page)
 		await clickSliderByRatio(page, 'chat-turn-delay-slider', 0.68)
@@ -237,6 +249,32 @@ async function runChatScenario(page: Page, artifactDirectoryPath: string): Promi
 			35_000,
 			'Chat mode did not produce a follow-up assistant transcript.'
 		)
+
+		const orderingIsValid = await page.evaluate((typedMessageValue: string) => {
+			const rowNodeList = Array.from(
+				document.querySelectorAll<HTMLElement>('[data-testid^="chat-row-"]')
+			)
+			if (rowNodeList.length === 0) return false
+			const orderedRows = rowNodeList.map(rowNode => {
+				const role = rowNode.dataset.chatRole
+				const textNode = rowNode.querySelector<HTMLElement>('[data-testid^="chat-message-text-"]')
+				return {
+					role,
+					text: textNode?.innerText.trim() ?? ''
+				}
+			})
+			const typedMessageIndex = orderedRows.findIndex(
+				row => row.role === 'user' && row.text.includes(typedMessageValue)
+			)
+			if (typedMessageIndex === -1) return false
+			const assistantAfterTypedIndex = orderedRows.findIndex(
+				(row, index) => index > typedMessageIndex && row.role === 'assistant'
+			)
+			return assistantAfterTypedIndex > typedMessageIndex
+		}, typedMessage)
+		if (!orderingIsValid) {
+			throw new Error('Chat timeline order was invalid (assistant rendered before user turn).')
+		}
 	} catch (error) {
 		failures.push(error instanceof Error ? error.message : 'Chat mode validation failed.')
 	}
@@ -290,6 +328,12 @@ async function runTranslateScenario(
 		) {
 			throw new Error('Translate mode rendered internal status chips in user-facing UI.')
 		}
+		if (
+			bodyTextAfterLanguageChange.includes('Offline. Waiting for network…') ||
+			bodyTextAfterLanguageChange.includes('Reconnecting…')
+		) {
+			throw new Error('Translate mode remained in offline/reconnecting banner state after connection.')
+		}
 
 		const typedTranslateInput = `translate smoke ${Date.now()}`
 		await page.getByTestId('translate-text-input').fill(typedTranslateInput)
@@ -355,11 +399,6 @@ async function runTranslateScenario(
 		) {
 			throw new Error('Translate mode did not emit draft output before final output.')
 		}
-
-		const subtitleRailText = await page.getByTestId('translate-live-subtitle-rail').innerText()
-		if (!subtitleRailText.trim()) {
-			throw new Error('Translate subtitle rail did not render text.')
-		}
 	} catch (error) {
 		failures.push(error instanceof Error ? error.message : 'Translate mode validation failed.')
 	}
diff --git a/src/app/(app)/ChatMode.tsx b/src/app/(app)/ChatMode.tsx
index fe3f678..505cd99 100644
--- a/src/app/(app)/ChatMode.tsx
+++ b/src/app/(app)/ChatMode.tsx
@@ -74,12 +74,6 @@ export default function ChatMode() {
 
 	return (
 		<div className="flex min-h-0 flex-1 flex-col gap-3 overflow-hidden">
-			<div className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)] px-3 py-2">
-				<div className="font-semibold text-[11px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
-					Conversation
-				</div>
-			</div>
-
 			<ScrollArea
 				ref={transcriptScrollAreaRef}
 				data-testid="chat-transcript-list"
@@ -99,7 +93,8 @@ export default function ChatMode() {
 								<div
 									key={message.id}
 									className="flex flex-col gap-1"
-									data-testid={`chat-message-${message.id}`}
+									data-chat-role={message.role}
+									data-testid={`chat-row-${message.id}`}
 								>
 									<div
 										className={`px-1 font-semibold text-[10px] uppercase tracking-[0.16em] ${
diff --git a/src/app/(app)/ModeShell.tsx b/src/app/(app)/ModeShell.tsx
index b81d469..035cca7 100644
--- a/src/app/(app)/ModeShell.tsx
+++ b/src/app/(app)/ModeShell.tsx
@@ -37,6 +37,34 @@ function normalizeTurnDelaySeconds(value: number): number {
 	return Math.round(clampedValue * 10) / 10
 }
 
+function resolveLiveIndicatorLabel(connectionState: string, statusMessage: null | string): string {
+	if (statusMessage === 'Offline. Waiting for network…') return 'Offline'
+	switch (connectionState) {
+		case 'connected':
+			return 'Live'
+		case 'connecting':
+			return 'Connecting'
+		case 'error':
+			return 'Error'
+		default:
+			return statusMessage ? 'Reconnecting' : 'Idle'
+	}
+}
+
+function resolveLiveIndicatorClass(connectionState: string, statusMessage: null | string): string {
+	if (statusMessage === 'Offline. Waiting for network…') return 'bg-[var(--destructive)]'
+	switch (connectionState) {
+		case 'connected':
+			return 'bg-[var(--lilac-direction-secondary)]'
+		case 'connecting':
+			return 'animate-pulse bg-[var(--lilac-direction-secondary)]/70'
+		case 'error':
+			return 'bg-[var(--destructive)]'
+		default:
+			return 'bg-[var(--lilac-border-strong)]'
+	}
+}
+
 function renderMode(mode: LilacMode): ReactNode {
 	switch (mode) {
 		case 'chat':
@@ -238,6 +266,8 @@ export default function ModeShell() {
 	const [draftInstructions, setDraftInstructions] = useState(chatInstructions)
 	const [draftTurnDelaySeconds, setDraftTurnDelaySeconds] = useState(chatTurnDelaySeconds)
 	const [saveMessage, setSaveMessage] = useState('')
+	const liveIndicatorLabel = resolveLiveIndicatorLabel(connectionState, statusMessage)
+	const liveIndicatorClass = resolveLiveIndicatorClass(connectionState, statusMessage)
 
 	useEffect(() => {
 		setDraftInstructions(chatInstructions)
@@ -275,6 +305,17 @@ export default function ModeShell() {
 						</div>
 
 						<div className="flex items-center gap-2">
+							<output
+								className="inline-flex items-center gap-1.5 rounded-full border border-[var(--lilac-border)] bg-[var(--lilac-card)] px-2 py-1"
+								data-testid="mode-live-indicator"
+								aria-live="polite"
+							>
+								<span className={`h-1.5 w-1.5 rounded-full ${liveIndicatorClass}`} />
+								<span className="font-medium text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.12em]">
+									{liveIndicatorLabel}
+								</span>
+							</output>
+
 							<Tabs
 								value={mode}
 								onValueChange={value => {
@@ -416,7 +457,7 @@ export default function ModeShell() {
 						</div>
 					</div>
 
-					{statusMessage ? (
+					{statusMessage && connectionState !== 'connected' ? (
 						<p className="pt-2 text-[var(--lilac-ink-muted)] text-xs" data-testid="mode-status-message">
 							{statusMessage}
 						</p>
diff --git a/src/app/(app)/TranslateMode.tsx b/src/app/(app)/TranslateMode.tsx
index ba31168..ded8712 100644
--- a/src/app/(app)/TranslateMode.tsx
+++ b/src/app/(app)/TranslateMode.tsx
@@ -221,7 +221,6 @@ function LanguagePickerContent({
 export default function TranslateMode() {
 	const {
 		getDirectionColor,
-		liveSubtitleState,
 		setTranslateSettings,
 		submitTranslateTextInput,
 		translateCards,
@@ -385,22 +384,6 @@ export default function TranslateMode() {
 				className="min-h-0 flex-1 rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card)]"
 			>
 				<div className="flex flex-col gap-3 p-3 sm:p-4">
-					<div className="px-1 py-1" data-testid="translate-live-subtitle-rail" aria-live="polite">
-						<div className="flex items-center gap-2 font-semibold text-[10px] text-[var(--lilac-ink-muted)] uppercase tracking-[0.14em]">
-							<span
-								className={`inline-flex h-2 w-2 rounded-full ${
-									liveSubtitleState.isListening
-										? 'animate-pulse bg-[var(--lilac-direction-secondary)]'
-										: 'bg-[var(--lilac-border-strong)]'
-								}`}
-							/>
-							{liveSubtitleState.isListening ? 'Listening' : 'Ready'}
-						</div>
-						<p className="min-h-6 whitespace-pre-wrap break-words pt-1 text-[var(--lilac-ink)] text-sm">
-							{liveSubtitleState.text || 'Live subtitles appear here while people speak.'}
-						</p>
-					</div>
-
 					{translateCards.length ? (
 						translateCards.map(card => {
 							const routeLabel = `${resolveLanguageLabel(card.sourceLanguageCode)} → ${resolveLanguageLabel(
@@ -422,11 +405,11 @@ export default function TranslateMode() {
 									key={card.id}
 									data-testid={`translate-card-${card.id}`}
 									data-render-state={card.renderState}
-									className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] px-3 py-2.5"
+									className="rounded-xl border border-[var(--lilac-border)] bg-[var(--lilac-card-muted)] px-3 py-2"
 								>
-									<div className="mb-1 flex items-center justify-between gap-2">
+									<div className="mb-0.5 flex items-center justify-between gap-2">
 										<p
-											className="font-semibold text-[0.78rem] tracking-[0.03em]"
+											className="font-semibold text-[0.74rem] tracking-[0.03em]"
 											style={{ color: getDirectionColor(card.direction) }}
 										>
 											{routeLabel}
@@ -447,10 +430,9 @@ export default function TranslateMode() {
 										{translationText}
 									</p>
 									<p
-										className="mt-1 whitespace-pre-wrap break-words text-[0.78rem] text-[var(--lilac-ink-muted)] leading-relaxed"
+										className="mt-0.5 whitespace-pre-wrap break-words text-[0.78rem] text-[var(--lilac-ink-muted)] leading-relaxed"
 										data-testid={`translate-card-source-${card.id}`}
 									>
-										<span className="mr-1 font-semibold text-[10px] uppercase tracking-[0.12em]">Heard:</span>
 										{card.sourceText.trim() || '…'}
 									</p>
 								</article>
diff --git a/src/app/actions/realtime.ts b/src/app/actions/realtime.ts
index 213d5a6..b7149d8 100644
--- a/src/app/actions/realtime.ts
+++ b/src/app/actions/realtime.ts
@@ -239,7 +239,7 @@ export async function createRealtimeTranscriptionSessionAction(input: unknown):
 		input_audio_format: 'pcm16',
 		input_audio_transcription: {
 			model: transcriptionModel,
-			prompt: 'Transcribe spoken audio faithfully. Preserve punctuation and proper nouns.'
+			prompt: 'Transcribe spoken words only. Do not add labels, metadata, or context notes.'
 		},
 		turn_detection: {
 			eagerness: parsedInput.turnEagerness,
diff --git a/src/app/styles.css b/src/app/styles.css
index 9336d13..165a8ae 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -18,8 +18,8 @@
 	--lilac-brand-primary-foreground: #f9f5ec;
 	--lilac-direction-primary: #5f43be;
 	--lilac-direction-secondary: #2f6dd8;
-	--lilac-button-disabled-bg: color-mix(in oklab, var(--lilac-brand-primary) 46%, white 54%);
-	--lilac-button-disabled-fg: color-mix(in oklab, white 90%, var(--lilac-brand-primary) 10%);
+	--lilac-button-disabled-bg: #8f9ab3;
+	--lilac-button-disabled-fg: #f7fbff;
 
 	--background: var(--lilac-surface);
 	--foreground: var(--lilac-ink);
@@ -69,8 +69,8 @@
 		--lilac-brand-primary-foreground: #f8f4ff;
 		--lilac-direction-primary: #a996ff;
 		--lilac-direction-secondary: #8cc2ff;
-		--lilac-button-disabled-bg: color-mix(in oklab, #392d53 76%, #6652a8 24%);
-		--lilac-button-disabled-fg: color-mix(in oklab, #efe9ff 92%, #c7b7ef 8%);
+		--lilac-button-disabled-bg: #4a4f66;
+		--lilac-button-disabled-fg: #e8ecff;
 
 		--background: var(--lilac-surface);
 		--foreground: var(--lilac-ink);
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 6366cdd..252fbe5 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:border-[var(--lilac-border)] disabled:bg-[var(--lilac-button-disabled-bg)] disabled:text-[var(--lilac-button-disabled-fg)] disabled:shadow-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-100 disabled:border-[var(--lilac-border)] disabled:bg-[var(--lilac-button-disabled-bg)] disabled:text-[var(--lilac-button-disabled-fg)] disabled:shadow-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
 	{
 		defaultVariants: {
 			size: 'default',
diff --git a/src/realtime/chatRealtimeClient.ts b/src/realtime/chatRealtimeClient.ts
index 530e2f6..a277384 100644
--- a/src/realtime/chatRealtimeClient.ts
+++ b/src/realtime/chatRealtimeClient.ts
@@ -3,10 +3,12 @@
 import { createRealtimeClientSecretAction } from '@/app/actions/realtime'
 import {
 	ConversationItemCreatedEventSchema,
+	InputAudioBufferCommittedEventSchema,
 	InputAudioTranscriptionCompletedEventSchema,
 	InputAudioTranscriptionDeltaEventSchema,
 	RealtimeBaseServerEventSchema,
 	RealtimeErrorEventSchema,
+	ResponseCreatedEventSchema,
 	ResponseDoneEventSchema,
 	ResponseOutputAudioTranscriptDeltaEventSchema,
 	ResponseOutputItemAddedEventSchema,
@@ -20,6 +22,8 @@ export type ChatTranscriptPatch = {
 	id: string
 	replaceText?: string
 	role: 'assistant' | 'user'
+	slotId?: string
+	slotOrder?: number
 	source: ChatTranscriptSource
 	status?: 'final' | 'streaming'
 }
@@ -47,12 +51,44 @@ function createClientItemId(prefix: string): string {
 	return `${prefix}_${randomSegment}`
 }
 
+const shouldEmitVerboseRealtimeLogs = process.env.NEXT_PUBLIC_LILAC_VERBOSE_LOGS === 'true'
+
+function emitChatRealtimeLog(
+	level: 'error' | 'info' | 'warn',
+	event: string,
+	details: Record<string, unknown>
+): void {
+	if (level === 'info' && !shouldEmitVerboseRealtimeLogs) return
+	const payload = {
+		...details,
+		event,
+		scope: 'chat_realtime',
+		timestamp: new Date().toISOString()
+	}
+	switch (level) {
+		case 'error':
+			console.error('[lilac.realtime]', payload)
+			return
+		case 'warn':
+			console.warn('[lilac.realtime]', payload)
+			return
+		default:
+			console.info('[lilac.realtime]', payload)
+	}
+}
+
 export class ChatRealtimeClient {
+	private unassignedResponseIdQueue: string[] = []
 	private assistantItemIdByResponseId = new Map<string, string>()
+	private nextSlotOrder = 1
 	private callbacks: ChatRealtimeClientCallbacks
 	private dataChannel: null | RTCDataChannel = null
 	private generation = 0
 	private localAudioStream: MediaStream | null = null
+	private slotByAssistantItemId = new Map<string, { slotId: string; slotOrder: number }>()
+	private slotByResponseId = new Map<string, { slotId: string; slotOrder: number }>()
+	private slotByUserItemId = new Map<string, { slotId: string; slotOrder: number }>()
+	private slotOrderBySlotId = new Map<string, number>()
 	private pendingAudioTranscriptByResponseId = new Map<string, string>()
 	private pendingTextByResponseId = new Map<string, string>()
 	private peerConnection: null | RTCPeerConnection = null
@@ -106,11 +142,13 @@ export class ChatRealtimeClient {
 			dataChannel.addEventListener('open', () => {
 				if (generation !== this.generation) return
 				this.callbacks.onConnectionStateChange('connected')
+				emitChatRealtimeLog('info', 'channel_open', { generation })
 			})
 
 			dataChannel.addEventListener('close', () => {
 				if (generation !== this.generation) return
 				this.callbacks.onConnectionStateChange('disconnected')
+				emitChatRealtimeLog('warn', 'channel_close', { generation })
 			})
 
 			dataChannel.addEventListener('message', event => {
@@ -143,6 +181,10 @@ export class ChatRealtimeClient {
 			if (generation !== this.generation) return
 			this.callbacks.onConnectionStateChange('error')
 			const fallbackMessage = 'Unable to start Chat mode.'
+			emitChatRealtimeLog('error', 'start_failed', {
+				generation,
+				message: error instanceof Error ? error.message : 'unknown'
+			})
 			if (error instanceof Error) this.callbacks.onError(error.message || fallbackMessage)
 			else this.callbacks.onError(fallbackMessage)
 			this.stop()
@@ -151,7 +193,13 @@ export class ChatRealtimeClient {
 
 	public stop(): void {
 		this.generation += 1
+		this.unassignedResponseIdQueue = []
 		this.assistantItemIdByResponseId.clear()
+		this.slotByAssistantItemId.clear()
+		this.slotByResponseId.clear()
+		this.slotByUserItemId.clear()
+		this.slotOrderBySlotId.clear()
+		this.nextSlotOrder = 1
 		this.pendingTextByResponseId.clear()
 		this.pendingAudioTranscriptByResponseId.clear()
 
@@ -177,10 +225,13 @@ export class ChatRealtimeClient {
 		const normalizedText = text.trim()
 		if (!normalizedText) return
 		const itemId = createClientItemId('typed')
+		const slot = this.createOrGetSlotForUserItem(itemId)
 		this.emitTranscriptPatch({
 			id: itemId,
 			replaceText: normalizedText,
 			role: 'user',
+			slotId: slot.slotId,
+			slotOrder: slot.slotOrder,
 			source: 'input_text',
 			status: 'final'
 		})
@@ -201,6 +252,10 @@ export class ChatRealtimeClient {
 		this.sendEvent({
 			type: 'response.create'
 		})
+		emitChatRealtimeLog('info', 'typed_input_submitted', {
+			itemId,
+			textLength: normalizedText.length
+		})
 	}
 
 	public updateInstructions(instructions: string): void {
@@ -277,13 +332,76 @@ export class ChatRealtimeClient {
 		this.callbacks.onTranscriptPatch(patch)
 	}
 
+	private createOrGetSlotForUserItem(userItemId: string): { slotId: string; slotOrder: number } {
+		const existingSlot = this.slotByUserItemId.get(userItemId)
+		if (existingSlot) return existingSlot
+		const slotId = createClientItemId('chat_slot')
+		const slotOrder = this.nextSlotOrder
+		this.nextSlotOrder += 1
+		const nextSlot = { slotId, slotOrder }
+		this.slotByUserItemId.set(userItemId, nextSlot)
+		this.slotOrderBySlotId.set(slotId, slotOrder)
+		return nextSlot
+	}
+
+	private getOldestPendingSlot(): null | { slotId: string; slotOrder: number } {
+		const assignedSlotIdSet = new Set(
+			Array.from(this.slotByAssistantItemId.values()).map(slot => slot.slotId)
+		)
+		let oldestPendingSlot: null | { slotId: string; slotOrder: number } = null
+		for (const slot of Array.from(this.slotByUserItemId.values())) {
+			if (assignedSlotIdSet.has(slot.slotId)) continue
+			if (!oldestPendingSlot || slot.slotOrder < oldestPendingSlot.slotOrder) {
+				oldestPendingSlot = slot
+			}
+		}
+		return oldestPendingSlot
+	}
+
+	private bindResponseToSlot(responseId: string): void {
+		const existingSlot = this.slotByResponseId.get(responseId)
+		if (existingSlot) return
+		const oldestPendingSlot = this.getOldestPendingSlot()
+		if (!oldestPendingSlot) {
+			if (!this.unassignedResponseIdQueue.includes(responseId)) {
+				this.unassignedResponseIdQueue.push(responseId)
+			}
+			return
+		}
+		this.slotByResponseId.set(responseId, oldestPendingSlot)
+	}
+
+	private attachQueuedResponsesToUserSlot(): void {
+		if (this.unassignedResponseIdQueue.length === 0) return
+		const responseId = this.unassignedResponseIdQueue.shift()
+		if (!responseId) return
+		this.bindResponseToSlot(responseId)
+	}
+
+	private resolveSlotForAssistantMessage(
+		assistantItemId?: string,
+		responseId?: string
+	): null | { slotId: string; slotOrder: number } {
+		if (assistantItemId) {
+			const byAssistantId = this.slotByAssistantItemId.get(assistantItemId)
+			if (byAssistantId) return byAssistantId
+		}
+		if (responseId) {
+			const byResponseId = this.slotByResponseId.get(responseId)
+			if (byResponseId) return byResponseId
+		}
+		return null
+	}
+
 	private finalizeAssistantForResponse(responseId: string | undefined): void {
 		if (!responseId) return
 		const itemId = this.assistantItemIdByResponseId.get(responseId)
 		if (!itemId) return
+		const slot = this.resolveSlotForAssistantMessage(itemId, responseId)
 		this.emitTranscriptPatch({
 			id: itemId,
 			role: 'assistant',
+			...(slot ? { slotId: slot.slotId, slotOrder: slot.slotOrder } : {}),
 			source: 'response_output_text',
 			status: 'final'
 		})
@@ -303,69 +421,103 @@ export class ChatRealtimeClient {
 		return textPartList.join('\n')
 	}
 
+	private handleInputAudioBufferCommittedEvent(candidate: unknown): void {
+		const event = InputAudioBufferCommittedEventSchema.parse(candidate)
+		const slot = this.createOrGetSlotForUserItem(event.item_id)
+		this.emitTranscriptPatch({
+			id: event.item_id,
+			role: 'user',
+			slotId: slot.slotId,
+			slotOrder: slot.slotOrder,
+			source: 'input_transcription',
+			status: 'streaming'
+		})
+		this.attachQueuedResponsesToUserSlot()
+	}
+
 	private handleConversationItemCreatedEvent(candidate: unknown): void {
 		const event = ConversationItemCreatedEventSchema.parse(candidate)
 		const inputText = this.getInputTextFromConversationItem(event)
 		if (!inputText) return
+		const slot = this.createOrGetSlotForUserItem(event.item.id)
 		this.emitTranscriptPatch({
 			id: event.item.id,
 			replaceText: inputText,
 			role: 'user',
+			slotId: slot.slotId,
+			slotOrder: slot.slotOrder,
 			source: 'input_text',
 			status: 'final'
 		})
+		this.attachQueuedResponsesToUserSlot()
 	}
 
 	private handleInputAudioTranscriptionDeltaEvent(candidate: unknown): void {
 		const event = InputAudioTranscriptionDeltaEventSchema.parse(candidate)
 		if (!event.delta.trim()) return
+		const slot = this.createOrGetSlotForUserItem(event.item_id)
 		this.emitTranscriptPatch({
 			appendText: event.delta,
 			id: event.item_id,
 			role: 'user',
+			slotId: slot.slotId,
+			slotOrder: slot.slotOrder,
 			source: 'input_transcription',
 			status: 'streaming'
 		})
+		this.attachQueuedResponsesToUserSlot()
 	}
 
 	private handleInputAudioTranscriptionCompletedEvent(candidate: unknown): void {
 		const event = InputAudioTranscriptionCompletedEventSchema.parse(candidate)
+		const slot = this.createOrGetSlotForUserItem(event.item_id)
 		this.emitTranscriptPatch({
 			id: event.item_id,
 			replaceText: event.transcript,
 			role: 'user',
+			slotId: slot.slotId,
+			slotOrder: slot.slotOrder,
 			source: 'input_transcription',
 			status: 'final'
 		})
+		this.attachQueuedResponsesToUserSlot()
 	}
 
 	private handleResponseOutputItemAddedEvent(candidate: unknown): void {
 		const event = ResponseOutputItemAddedEventSchema.parse(candidate)
-		if (!event.response_id) return
-		this.assistantItemIdByResponseId.set(event.response_id, event.item.id)
+		const responseId = event.response_id
+		if (!responseId) return
+		this.assistantItemIdByResponseId.set(responseId, event.item.id)
+		this.bindResponseToSlot(responseId)
+		const slot = this.resolveSlotForAssistantMessage(undefined, responseId)
+		if (slot) {
+			this.slotByAssistantItemId.set(event.item.id, slot)
+		}
 
-		const pendingText = this.pendingTextByResponseId.get(event.response_id)
+		const pendingText = this.pendingTextByResponseId.get(responseId)
 		if (pendingText) {
 			this.emitTranscriptPatch({
 				appendText: pendingText,
 				id: event.item.id,
 				role: 'assistant',
+				...(slot ? { slotId: slot.slotId, slotOrder: slot.slotOrder } : {}),
 				source: 'response_output_text',
 				status: 'streaming'
 			})
-			this.pendingTextByResponseId.delete(event.response_id)
+			this.pendingTextByResponseId.delete(responseId)
 		}
 
-		const pendingAudioTranscript = this.pendingAudioTranscriptByResponseId.get(event.response_id)
+		const pendingAudioTranscript = this.pendingAudioTranscriptByResponseId.get(responseId)
 		if (pendingAudioTranscript) {
 			this.emitTranscriptPatch({
 				appendText: pendingAudioTranscript,
 				id: event.item.id,
 				role: 'assistant',
+				...(slot ? { slotId: slot.slotId, slotOrder: slot.slotOrder } : {}),
 				source: 'response_output_audio_transcript',
 				status: 'streaming'
 			})
-			this.pendingAudioTranscriptByResponseId.delete(event.response_id)
+			this.pendingAudioTranscriptByResponseId.delete(responseId)
 		}
 	}
 
@@ -380,10 +532,12 @@ export class ChatRealtimeClient {
 			return
 		}
 		if (!assistantItemId) return
+		const slot = this.resolveSlotForAssistantMessage(assistantItemId, event.response_id)
 		this.emitTranscriptPatch({
 			appendText: event.delta,
 			id: assistantItemId,
 			role: 'assistant',
+			...(slot ? { slotId: slot.slotId, slotOrder: slot.slotOrder } : {}),
 			source: 'response_output_text',
 			status: 'streaming'
 		})
@@ -403,10 +557,12 @@ export class ChatRealtimeClient {
 			return
 		}
 		if (!assistantItemId) return
+		const slot = this.resolveSlotForAssistantMessage(assistantItemId, event.response_id)
 		this.emitTranscriptPatch({
 			appendText: event.delta,
 			id: assistantItemId,
 			role: 'assistant',
+			...(slot ? { slotId: slot.slotId, slotOrder: slot.slotOrder } : {}),
 			source: 'response_output_audio_transcript',
 			status: 'streaming'
 		})
@@ -418,11 +574,13 @@ export class ChatRealtimeClient {
 			event.item_id ??
 			(event.response_id ? this.assistantItemIdByResponseId.get(event.response_id) : undefined)
 		if (!assistantItemId) return
+		const slot = this.resolveSlotForAssistantMessage(assistantItemId, event.response_id)
 		if (typeof event.text === 'string' && event.text.trim()) {
 			this.emitTranscriptPatch({
 				id: assistantItemId,
 				replaceText: event.text,
 				role: 'assistant',
+				...(slot ? { slotId: slot.slotId, slotOrder: slot.slotOrder } : {}),
 				source: 'response_output_text',
 				status: 'final'
 			})
@@ -431,6 +589,7 @@ export class ChatRealtimeClient {
 		this.emitTranscriptPatch({
 			id: assistantItemId,
 			role: 'assistant',
+			...(slot ? { slotId: slot.slotId, slotOrder: slot.slotOrder } : {}),
 			source: 'response_output_text',
 			status: 'final'
 		})
@@ -446,16 +605,31 @@ export class ChatRealtimeClient {
 		})
 	}
 
+	private handleResponseCreatedEvent(candidate: unknown): void {
+		const event = ResponseCreatedEventSchema.parse(candidate)
+		const responseId = event.response?.id
+		if (!responseId) return
+		this.bindResponseToSlot(responseId)
+	}
+
 	private handleServerEvent(rawData: unknown): void {
 		try {
 			const candidate = typeof rawData === 'string' ? JSON.parse(rawData) : rawData
 			const baseEvent = RealtimeBaseServerEventSchema.parse(candidate)
 
 			switch (baseEvent.type) {
+				case 'input_audio_buffer.committed': {
+					this.handleInputAudioBufferCommittedEvent(candidate)
+					return
+				}
 				case 'conversation.item.created': {
 					this.handleConversationItemCreatedEvent(candidate)
 					return
 				}
+				case 'response.created': {
+					this.handleResponseCreatedEvent(candidate)
+					return
+				}
 				case 'conversation.item.input_audio_transcription.delta': {
 					this.handleInputAudioTranscriptionDeltaEvent(candidate)
 					return
@@ -487,6 +661,9 @@ export class ChatRealtimeClient {
 				}
 				case 'error': {
 					const event = RealtimeErrorEventSchema.parse(candidate)
+					emitChatRealtimeLog('error', 'realtime_error', {
+						message: event.error?.message || 'Realtime session error'
+					})
 					this.callbacks.onError(event.error?.message || 'Realtime session error')
 					return
 				}
diff --git a/src/realtime/liveTranslateRealtimeClient.ts b/src/realtime/liveTranslateRealtimeClient.ts
index c115038..7517fb0 100644
--- a/src/realtime/liveTranslateRealtimeClient.ts
+++ b/src/realtime/liveTranslateRealtimeClient.ts
@@ -77,6 +77,31 @@ type PendingResponseContext = {
 const finalTranslationResponseTimeoutMilliseconds = 8_000
 const draftTranslationResponseTimeoutMilliseconds = 5_000
 const channelConnectTimeoutMilliseconds = 7_000
+const shouldEmitVerboseRealtimeLogs = process.env.NEXT_PUBLIC_LILAC_VERBOSE_LOGS === 'true'
+
+function emitLiveTranslateLog(
+	level: 'error' | 'info' | 'warn',
+	event: string,
+	details: Record<string, unknown>
+): void {
+	if (level === 'info' && !shouldEmitVerboseRealtimeLogs) return
+	const payload = {
+		...details,
+		event,
+		scope: 'live_translate',
+		timestamp: new Date().toISOString()
+	}
+	switch (level) {
+		case 'error':
+			console.error('[lilac.realtime]', payload)
+			return
+		case 'warn':
+			console.warn('[lilac.realtime]', payload)
+			return
+		default:
+			console.info('[lilac.realtime]', payload)
+	}
+}
 
 function createTranslateInstructions(
 	myLanguageCode: string,
@@ -217,6 +242,7 @@ export class LiveTranslateRealtimeClient {
 	private latestDraftSequenceByItemId = new Map<string, number>()
 	private pendingRequestContextByRequestId = new Map<string, PendingResponseContext>()
 	private pendingRequestIdByResponseId = new Map<string, string>()
+	private pendingUnmappedRequestIdQueue: string[] = []
 	private pendingRequestTimeoutByRequestId = new Map<string, number>()
 	private peerConnection: null | RTCPeerConnection = null
 	private settings: LiveTranslateSettings = {
@@ -268,6 +294,7 @@ export class LiveTranslateRealtimeClient {
 				if (generation !== this.generation) return
 				this.clearConnectTimeout()
 				this.setState('connected')
+				emitLiveTranslateLog('info', 'channel_open', { generation })
 				this.updateTranslateSettings(this.settings)
 			})
 
@@ -275,6 +302,7 @@ export class LiveTranslateRealtimeClient {
 				if (generation !== this.generation) return
 				this.clearConnectTimeout()
 				this.setState('disconnected')
+				emitLiveTranslateLog('warn', 'channel_close', { generation })
 			})
 
 			dataChannel.addEventListener('message', event => {
@@ -305,6 +333,10 @@ export class LiveTranslateRealtimeClient {
 		} catch (error) {
 			if (generation !== this.generation) return
 			this.setState('error')
+			emitLiveTranslateLog('error', 'start_failed', {
+				generation,
+				message: error instanceof Error ? error.message : 'unknown'
+			})
 			const fallbackMessage = 'Unable to start Translate mode.'
 			if (error instanceof Error) this.callbacks.onError(error.message || fallbackMessage)
 			else this.callbacks.onError(fallbackMessage)
@@ -322,6 +354,7 @@ export class LiveTranslateRealtimeClient {
 		this.pendingRequestTimeoutByRequestId.clear()
 		this.pendingRequestContextByRequestId.clear()
 		this.pendingRequestIdByResponseId.clear()
+		this.pendingUnmappedRequestIdQueue = []
 		this.draftResponseTextByResponseId.clear()
 		this.toolArgumentsByResponseId.clear()
 		this.draftRequestIdsByItemId.clear()
@@ -434,6 +467,9 @@ export class LiveTranslateRealtimeClient {
 	private clearPendingRequestState(requestId: string): null | PendingResponseContext {
 		const context = this.pendingRequestContextByRequestId.get(requestId) ?? null
 		this.pendingRequestContextByRequestId.delete(requestId)
+		this.pendingUnmappedRequestIdQueue = this.pendingUnmappedRequestIdQueue.filter(
+			candidateRequestId => candidateRequestId !== requestId
+		)
 		this.pendingRequestIdByResponseId.forEach((mappedRequestId, responseId) => {
 			if (mappedRequestId !== requestId) return
 			this.pendingRequestIdByResponseId.delete(responseId)
@@ -467,14 +503,23 @@ export class LiveTranslateRealtimeClient {
 		draftRequestIdSet.add(requestId)
 		this.draftRequestIdsByItemId.set(context.itemId, draftRequestIdSet)
 		this.pendingRequestContextByRequestId.set(requestId, context)
+		this.pendingUnmappedRequestIdQueue.push(requestId)
 
 		const timeoutId = window.setTimeout(() => {
 			const timedOutContext = this.clearPendingRequestState(requestId)
 			if (!timedOutContext || timedOutContext.requestKind !== 'draft') return
 			if (this.isDraftResponseSuperseded(timedOutContext)) return
-			this.callbacks.onError('Draft translation timed out before output was returned.')
+			emitLiveTranslateLog('warn', 'draft_timeout', {
+				itemId: timedOutContext.itemId,
+				requestId: timedOutContext.requestId
+			})
 		}, draftTranslationResponseTimeoutMilliseconds)
 		this.pendingRequestTimeoutByRequestId.set(requestId, timeoutId)
+		emitLiveTranslateLog('info', 'draft_request_sent', {
+			draftSequence: context.draftSequence,
+			itemId: context.itemId,
+			requestId
+		})
 
 		this.sendEvent({
 			response: {
@@ -520,6 +565,7 @@ export class LiveTranslateRealtimeClient {
 			requestKind: 'final'
 		}
 		this.pendingRequestContextByRequestId.set(requestId, context)
+		this.pendingUnmappedRequestIdQueue.push(requestId)
 
 		const timeoutId = window.setTimeout(() => {
 			const timedOutContext = this.clearPendingRequestState(requestId)
@@ -532,6 +578,10 @@ export class LiveTranslateRealtimeClient {
 			this.callbacks.onError(errorPatch.translatedText)
 		}, finalTranslationResponseTimeoutMilliseconds)
 		this.pendingRequestTimeoutByRequestId.set(requestId, timeoutId)
+		emitLiveTranslateLog('info', 'final_request_sent', {
+			itemId: context.itemId,
+			requestId
+		})
 
 		this.sendEvent({
 			response: {
@@ -604,8 +654,24 @@ export class LiveTranslateRealtimeClient {
 		event: ReturnType<typeof ResponseCreatedEventSchema.parse>
 	): void {
 		const responseId = parseStringValue(event.response?.id)
-		const requestId = parseStringValue(event.response?.metadata?.request_id)
-		if (!responseId || !requestId) return
+		if (!responseId) return
+		const metadataRequestId = parseStringValue(event.response?.metadata?.request_id)
+		const requestId = (() => {
+			if (metadataRequestId && this.pendingRequestContextByRequestId.has(metadataRequestId)) {
+				return metadataRequestId
+			}
+			while (this.pendingUnmappedRequestIdQueue.length > 0) {
+				const fallbackRequestId = this.pendingUnmappedRequestIdQueue.shift()
+				if (!fallbackRequestId) continue
+				if (!this.pendingRequestContextByRequestId.has(fallbackRequestId)) continue
+				return fallbackRequestId
+			}
+			return null
+		})()
+		if (!requestId) {
+			emitLiveTranslateLog('warn', 'response_created_without_request_mapping', { responseId })
+			return
+		}
 		this.pendingRequestIdByResponseId.set(responseId, requestId)
 	}
 
@@ -739,6 +805,11 @@ export class LiveTranslateRealtimeClient {
 			inferredArguments
 
 		if (!rawToolArguments) {
+			emitLiveTranslateLog('warn', 'missing_publish_translation_tool_call', {
+				itemId: context.itemId,
+				requestId,
+				responseId: responseId ?? undefined
+			})
 			const errorPatch = this.createErrorPatch(
 				context,
 				'No valid publish_translation tool call was returned.',
@@ -752,6 +823,11 @@ export class LiveTranslateRealtimeClient {
 		try {
 			const parsedArguments = JSON.parse(rawToolArguments) as unknown
 			const parsedResult = PublishTranslationToolArgumentsSchema.parse(parsedArguments)
+			emitLiveTranslateLog('info', 'final_result_patch', {
+				direction: parsedResult.direction,
+				itemId: context.itemId,
+				responseId: responseId ?? undefined
+			})
 			this.callbacks.onResultPatch({
 				direction: parsedResult.direction,
 				inputOrigin: context.inputOrigin,
@@ -764,6 +840,11 @@ export class LiveTranslateRealtimeClient {
 				...(responseId ? { responseId } : {})
 			})
 		} catch {
+			emitLiveTranslateLog('error', 'malformed_tool_arguments', {
+				itemId: context.itemId,
+				requestId,
+				responseId: responseId ?? undefined
+			})
 			const errorPatch = this.createErrorPatch(
 				context,
 				'Tool arguments were malformed and could not be parsed.',
@@ -776,6 +857,7 @@ export class LiveTranslateRealtimeClient {
 
 	private handleRealtimeErrorEvent(event: ReturnType<typeof RealtimeErrorEventSchema.parse>): void {
 		const message = event.error?.message || 'Realtime session error'
+		emitLiveTranslateLog('error', 'realtime_error', { message })
 		this.callbacks.onError(message)
 	}
 
diff --git a/src/realtime/modeRuntimeStore.tsx b/src/realtime/modeRuntimeStore.tsx
index 841b7a8..209b783 100644
--- a/src/realtime/modeRuntimeStore.tsx
+++ b/src/realtime/modeRuntimeStore.tsx
@@ -97,6 +97,8 @@ const subtitleDedupRoundedTimeWindowMilliseconds = 700
 const draftTranslateDebounceMilliseconds = 300
 const finalTranslateLowConfidenceThreshold = 0.6
 const finalTranslateLowConfidenceDelayMilliseconds = 280
+const finalTranslateSilenceDelayMilliseconds = 1200
+const audioUtteranceReuseThresholdMilliseconds = 1200
 const minimumDraftTextLength = 2
 const minimumDraftTextDeltaLength = 4
 const isTranslateStreamingV2Enabled =
@@ -122,6 +124,17 @@ function normalizeWhitespace(value: string): string {
 	return value.replace(/\s+/g, ' ').trim()
 }
 
+function getChatRoleSortValue(role: 'assistant' | 'user'): number {
+	switch (role) {
+		case 'user':
+			return 0
+		case 'assistant':
+			return 1
+		default:
+			return 2
+	}
+}
+
 function shouldDropSubtitleText(value: string): boolean {
 	const normalizedValue = normalizeWhitespace(value).toLowerCase()
 	if (!normalizedValue) return true
@@ -133,6 +146,20 @@ function shouldDropSubtitleText(value: string): boolean {
 	return false
 }
 
+function mergeUtteranceText(existingText: string, nextChunkText: string): string {
+	const normalizedExistingText = normalizeWhitespace(existingText)
+	const normalizedChunkText = normalizeWhitespace(nextChunkText)
+	if (!normalizedChunkText) return normalizedExistingText
+	if (!normalizedExistingText) return normalizedChunkText
+	if (normalizedExistingText.toLowerCase().endsWith(normalizedChunkText.toLowerCase())) {
+		return normalizedExistingText
+	}
+	if (normalizedChunkText.toLowerCase().startsWith(normalizedExistingText.toLowerCase())) {
+		return normalizedChunkText
+	}
+	return `${normalizedExistingText} ${normalizedChunkText}`
+}
+
 function sanitizeTranslateSettings(input: Partial<TranslateSettings> | null): TranslateSettings {
 	const myLanguageCode = resolveLanguageCode(
 		input?.myLanguageCode ?? '',
@@ -223,19 +250,46 @@ function upsertChatTranscript(
 			? patch.replaceText
 			: `${existingItem?.text ?? ''}${patch.appendText ?? ''}`
 
+	const slotOrder =
+		typeof patch.slotOrder === 'number'
+			? patch.slotOrder
+			: typeof existingItem?.slotOrder === 'number'
+				? existingItem.slotOrder
+				: undefined
+	const slotId =
+		typeof patch.slotId === 'string'
+			? patch.slotId
+			: typeof existingItem?.slotId === 'string'
+				? existingItem.slotId
+				: undefined
+	const roleSortValue = getChatRoleSortValue(patch.role)
+	const slotBasedSequence =
+		typeof slotOrder === 'number' ? slotOrder * 10 + roleSortValue : undefined
 	const nextItem: ChatTranscriptMessage = {
-		clientSequence: existingItem?.clientSequence ?? nextSequenceNumber,
+		clientSequence:
+			existingItem?.clientSequence ??
+			(typeof slotBasedSequence === 'number' ? slotBasedSequence : nextSequenceNumber),
 		createdAt: existingItem?.createdAt ?? Date.now(),
 		id: patch.id,
 		role: patch.role,
+		...(typeof slotId === 'string' ? { slotId } : {}),
+		...(typeof slotOrder === 'number' ? { slotOrder } : {}),
 		source: patch.source,
 		status: patch.status ?? existingItem?.status ?? 'streaming',
 		text: updatedText
 	}
 
+	if (typeof slotBasedSequence === 'number' && nextItem.clientSequence !== slotBasedSequence) {
+		nextItem.clientSequence = slotBasedSequence
+	}
+
 	if (existingIndex === -1) {
 		const nextList = [...existingList, nextItem].sort(
-			(left, right) => left.clientSequence - right.clientSequence || left.createdAt - right.createdAt
+			(left, right) =>
+				(left.slotOrder ?? Number.MAX_SAFE_INTEGER) - (right.slotOrder ?? Number.MAX_SAFE_INTEGER) ||
+				getChatRoleSortValue(left.role) - getChatRoleSortValue(right.role) ||
+				left.clientSequence - right.clientSequence ||
+				left.createdAt - right.createdAt
 		)
 		return {
 			list: nextList,
@@ -246,7 +300,11 @@ function upsertChatTranscript(
 	const nextList = existingList.slice()
 	nextList[existingIndex] = nextItem
 	nextList.sort(
-		(left, right) => left.clientSequence - right.clientSequence || left.createdAt - right.createdAt
+		(left, right) =>
+			(left.slotOrder ?? Number.MAX_SAFE_INTEGER) - (right.slotOrder ?? Number.MAX_SAFE_INTEGER) ||
+			getChatRoleSortValue(left.role) - getChatRoleSortValue(right.role) ||
+			left.clientSequence - right.clientSequence ||
+			left.createdAt - right.createdAt
 	)
 	return {
 		list: nextList,
@@ -439,6 +497,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		useState<ChannelConnectionState>('disconnected')
 	const [subtitleChannelState, setSubtitleChannelState] =
 		useState<ChannelConnectionState>('disconnected')
+	const [isOnline, setIsOnline] = useState(true)
 	const [isHydrated, setIsHydrated] = useState(false)
 
 	const chatClientRef = useRef<ChatRealtimeClient | null>(null)
@@ -457,10 +516,15 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	const pendingTranslateInputQueueRef = useRef<PendingTranslateInput[]>([])
 	const chatTranscriptSequenceRef = useRef(1)
 	const subtitleDedupKeyTimestampByKeyRef = useRef<Map<string, number>>(new Map())
+	const subtitleSegmentTextByItemIdRef = useRef<Map<string, string>>(new Map())
 	const subtitleSourceTextByItemIdRef = useRef<Map<string, string>>(new Map())
 	const subtitlePreviousItemIdByItemIdRef = useRef<Map<string, null | string>>(new Map())
+	const subtitleUtteranceIdBySegmentItemIdRef = useRef<Map<string, string>>(new Map())
+	const subtitlePreviousUtteranceIdByUtteranceIdRef = useRef<Map<string, null | string>>(new Map())
 	const subtitleLatestConfidenceByItemIdRef = useRef<Map<string, number>>(new Map())
 	const subtitleCommittedAtByItemIdRef = useRef<Map<string, number>>(new Map())
+	const activeAudioUtteranceRef = useRef<null | { id: string; updatedAt: number }>(null)
+	const lastAudioUtteranceIdRef = useRef<null | string>(null)
 	const translateDraftSequenceByItemIdRef = useRef<Map<string, number>>(new Map())
 	const translateLastDraftSourceTextByItemIdRef = useRef<Map<string, string>>(new Map())
 	const translateDraftScheduleTimerByItemIdRef = useRef<Map<string, number>>(new Map())
@@ -537,10 +601,15 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		void subtitleClientRef.current?.stop()
 		subtitleClientRef.current = null
 		clearAllTranslateStreamingTimers()
+		subtitleSegmentTextByItemIdRef.current.clear()
 		subtitleSourceTextByItemIdRef.current.clear()
 		subtitlePreviousItemIdByItemIdRef.current.clear()
+		subtitleUtteranceIdBySegmentItemIdRef.current.clear()
+		subtitlePreviousUtteranceIdByUtteranceIdRef.current.clear()
 		subtitleLatestConfidenceByItemIdRef.current.clear()
 		subtitleCommittedAtByItemIdRef.current.clear()
+		activeAudioUtteranceRef.current = null
+		lastAudioUtteranceIdRef.current = null
 		translateDraftSequenceByItemIdRef.current.clear()
 		translateLastDraftSourceTextByItemIdRef.current.clear()
 		setSubtitleChannelState('disconnected')
@@ -568,10 +637,15 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		setTranslateCards([])
 		setLiveSubtitleState(defaultLiveSubtitleState)
 		subtitleDedupKeyTimestampByKeyRef.current.clear()
+		subtitleSegmentTextByItemIdRef.current.clear()
 		subtitleSourceTextByItemIdRef.current.clear()
 		subtitlePreviousItemIdByItemIdRef.current.clear()
+		subtitleUtteranceIdBySegmentItemIdRef.current.clear()
+		subtitlePreviousUtteranceIdByUtteranceIdRef.current.clear()
 		subtitleLatestConfidenceByItemIdRef.current.clear()
 		subtitleCommittedAtByItemIdRef.current.clear()
+		activeAudioUtteranceRef.current = null
+		lastAudioUtteranceIdRef.current = null
 		translateDraftSequenceByItemIdRef.current.clear()
 		translateLastDraftSourceTextByItemIdRef.current.clear()
 		translateUtteranceSequenceRef.current = 1
@@ -639,6 +713,55 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		[flushPendingTranslateInputs]
 	)
 
+	const resolveAudioUtterance = useCallback(
+		(
+			segmentItemId: string,
+			previousSegmentItemId?: null | string
+		): { id: string; previousId: null | string } => {
+			const existingUtteranceId = subtitleUtteranceIdBySegmentItemIdRef.current.get(segmentItemId)
+			if (existingUtteranceId) {
+				return {
+					id: existingUtteranceId,
+					previousId:
+						subtitlePreviousUtteranceIdByUtteranceIdRef.current.get(existingUtteranceId) ?? null
+				}
+			}
+
+			const now = Date.now()
+			const activeUtterance = activeAudioUtteranceRef.current
+			const mappedPreviousUtteranceId = previousSegmentItemId
+				? (subtitleUtteranceIdBySegmentItemIdRef.current.get(previousSegmentItemId) ?? null)
+				: null
+			const shouldReuseActiveUtterance =
+				activeUtterance !== null &&
+				now - activeUtterance.updatedAt <= audioUtteranceReuseThresholdMilliseconds &&
+				(!mappedPreviousUtteranceId || mappedPreviousUtteranceId === activeUtterance.id)
+
+			if (shouldReuseActiveUtterance && activeUtterance) {
+				subtitleUtteranceIdBySegmentItemIdRef.current.set(segmentItemId, activeUtterance.id)
+				return {
+					id: activeUtterance.id,
+					previousId: subtitlePreviousUtteranceIdByUtteranceIdRef.current.get(activeUtterance.id) ?? null
+				}
+			}
+
+			const utteranceId = createClientItemId('audio_utterance')
+			const previousUtteranceId = mappedPreviousUtteranceId ?? lastAudioUtteranceIdRef.current ?? null
+			subtitleUtteranceIdBySegmentItemIdRef.current.set(segmentItemId, utteranceId)
+			subtitlePreviousUtteranceIdByUtteranceIdRef.current.set(utteranceId, previousUtteranceId)
+			lastAudioUtteranceIdRef.current = utteranceId
+			activeAudioUtteranceRef.current = {
+				id: utteranceId,
+				updatedAt: now
+			}
+			return {
+				id: utteranceId,
+				previousId: previousUtteranceId
+			}
+		},
+		[]
+	)
+
 	const upsertSubtitleCard = useCallback(
 		(itemId: string, previousItemId: null | string | undefined, sourceText: string): void => {
 			const normalizedText = normalizeWhitespace(sourceText)
@@ -723,10 +846,11 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		(itemId: string, inputOrigin: 'audio' | 'text') => {
 			clearTranslateFinalTimerByItemId(itemId)
 			const confidence = subtitleLatestConfidenceByItemIdRef.current.get(itemId)
-			const delayMilliseconds =
+			const lowConfidenceDelayMilliseconds =
 				typeof confidence === 'number' && confidence < finalTranslateLowConfidenceThreshold
 					? finalTranslateLowConfidenceDelayMilliseconds
 					: 0
+			const delayMilliseconds = finalTranslateSilenceDelayMilliseconds + lowConfidenceDelayMilliseconds
 			const timerId = window.setTimeout(() => {
 				translateFinalScheduleTimerByItemIdRef.current.delete(itemId)
 				const latestSourceText = normalizeWhitespace(
@@ -765,24 +889,41 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				if (now - value > 10_000) subtitleDedupKeyTimestampByKeyRef.current.delete(key)
 			})
 
-			subtitleSourceTextByItemIdRef.current.set(patch.itemId, normalizedText)
-			subtitlePreviousItemIdByItemIdRef.current.set(patch.itemId, patch.previousItemId ?? null)
-			subtitleCommittedAtByItemIdRef.current.set(patch.itemId, patch.committedAt)
+			const resolvedUtterance = resolveAudioUtterance(patch.itemId, patch.previousItemId)
+			const mergedSourceText = mergeUtteranceText(
+				subtitleSourceTextByItemIdRef.current.get(resolvedUtterance.id) ?? '',
+				normalizedText
+			)
+			subtitleSegmentTextByItemIdRef.current.delete(patch.itemId)
+			subtitleSourceTextByItemIdRef.current.set(resolvedUtterance.id, mergedSourceText)
+			subtitlePreviousItemIdByItemIdRef.current.set(resolvedUtterance.id, resolvedUtterance.previousId)
+			subtitleCommittedAtByItemIdRef.current.set(resolvedUtterance.id, patch.committedAt)
 			if (typeof patch.confidence === 'number') {
-				subtitleLatestConfidenceByItemIdRef.current.set(patch.itemId, patch.confidence)
+				subtitleLatestConfidenceByItemIdRef.current.set(resolvedUtterance.id, patch.confidence)
+			}
+			activeAudioUtteranceRef.current = {
+				id: resolvedUtterance.id,
+				updatedAt: now
 			}
 
-			clearTranslateDraftTimerByItemId(patch.itemId)
-			upsertSubtitleCard(patch.itemId, patch.previousItemId, normalizedText)
+			clearTranslateDraftTimerByItemId(resolvedUtterance.id)
+			upsertSubtitleCard(resolvedUtterance.id, resolvedUtterance.previousId, mergedSourceText)
 			setLiveSubtitleState(previousState => ({
 				...previousState,
-				activeSegmentId: patch.itemId,
-				text: normalizedText,
+				activeSegmentId: resolvedUtterance.id,
+				text: '',
 				updatedAt: Date.now()
 			}))
-			scheduleFinalTranslateForItem(patch.itemId, 'audio')
+			scheduleDraftTranslateForItem(resolvedUtterance.id, 'audio')
+			scheduleFinalTranslateForItem(resolvedUtterance.id, 'audio')
 		},
-		[clearTranslateDraftTimerByItemId, scheduleFinalTranslateForItem, upsertSubtitleCard]
+		[
+			clearTranslateDraftTimerByItemId,
+			resolveAudioUtterance,
+			scheduleDraftTranslateForItem,
+			scheduleFinalTranslateForItem,
+			upsertSubtitleCard
+		]
 	)
 
 	const startChatClient = useCallback(() => {
@@ -897,10 +1038,14 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				clearTranslateFinalTimerByItemId(patch.itemId)
 				subtitleSourceTextByItemIdRef.current.delete(patch.itemId)
 				subtitlePreviousItemIdByItemIdRef.current.delete(patch.itemId)
+				subtitlePreviousUtteranceIdByUtteranceIdRef.current.delete(patch.itemId)
 				subtitleLatestConfidenceByItemIdRef.current.delete(patch.itemId)
 				subtitleCommittedAtByItemIdRef.current.delete(patch.itemId)
 				translateDraftSequenceByItemIdRef.current.delete(patch.itemId)
 				translateLastDraftSourceTextByItemIdRef.current.delete(patch.itemId)
+				if (activeAudioUtteranceRef.current?.id === patch.itemId) {
+					activeAudioUtteranceRef.current = null
+				}
 				setTranslateCards(previousCards => {
 					const hasExistingCard = previousCards.some(card => card.id === patch.itemId)
 					const nextCards = applyTranslateResultPatch(
@@ -965,27 +1110,42 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				}))
 			},
 			onSubtitleDelta: patch => {
-				const previousText = subtitleSourceTextByItemIdRef.current.get(patch.itemId) ?? ''
-				const nextText = `${previousText}${patch.textDelta}`
-				if (shouldDropSubtitleText(nextText)) {
-					setLiveSubtitleState({
+				const nextSegmentText = `${subtitleSegmentTextByItemIdRef.current.get(patch.itemId) ?? ''}${patch.textDelta}`
+				const normalizedSegmentText = normalizeWhitespace(nextSegmentText)
+				subtitleSegmentTextByItemIdRef.current.set(patch.itemId, nextSegmentText)
+				if (shouldDropSubtitleText(normalizedSegmentText)) {
+					setLiveSubtitleState(previousState => ({
+						...previousState,
 						activeSegmentId: patch.itemId,
 						isListening: true,
 						text: '',
 						updatedAt: Date.now()
-					})
+					}))
 					return
 				}
-				subtitleSourceTextByItemIdRef.current.set(patch.itemId, nextText)
-				subtitlePreviousItemIdByItemIdRef.current.set(patch.itemId, patch.previousItemId ?? null)
-				upsertSubtitleCard(patch.itemId, patch.previousItemId, nextText)
+				const resolvedUtterance = resolveAudioUtterance(patch.itemId, patch.previousItemId)
+				const mergedSourceText = mergeUtteranceText(
+					subtitleSourceTextByItemIdRef.current.get(resolvedUtterance.id) ?? '',
+					patch.textDelta
+				)
+				subtitleSourceTextByItemIdRef.current.set(resolvedUtterance.id, mergedSourceText)
+				subtitlePreviousItemIdByItemIdRef.current.set(
+					resolvedUtterance.id,
+					resolvedUtterance.previousId
+				)
+				activeAudioUtteranceRef.current = {
+					id: resolvedUtterance.id,
+					updatedAt: Date.now()
+				}
+				upsertSubtitleCard(resolvedUtterance.id, resolvedUtterance.previousId, mergedSourceText)
 				setLiveSubtitleState({
-					activeSegmentId: patch.itemId,
+					activeSegmentId: resolvedUtterance.id,
 					isListening: true,
-					text: nextText,
+					text: '',
 					updatedAt: Date.now()
 				})
-				scheduleDraftTranslateForItem(patch.itemId, 'audio')
+				scheduleDraftTranslateForItem(resolvedUtterance.id, 'audio')
+				scheduleFinalTranslateForItem(resolvedUtterance.id, 'audio')
 			},
 			onSubtitleFinal: handleTranslateSubtitleFinalPatch
 		})
@@ -998,7 +1158,9 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	}, [
 		clearReconnectTimer,
 		handleTranslateSubtitleFinalPatch,
+		resolveAudioUtterance,
 		scheduleDraftTranslateForItem,
+		scheduleFinalTranslateForItem,
 		stopSubtitleClient,
 		upsertSubtitleCard
 	])
@@ -1115,10 +1277,15 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		(nextSettings: TranslateSettings) => {
 			const sanitizedSettings = sanitizeTranslateSettings(nextSettings)
 			clearAllTranslateStreamingTimers()
+			subtitleSegmentTextByItemIdRef.current.clear()
 			subtitleSourceTextByItemIdRef.current.clear()
 			subtitlePreviousItemIdByItemIdRef.current.clear()
+			subtitleUtteranceIdBySegmentItemIdRef.current.clear()
+			subtitlePreviousUtteranceIdByUtteranceIdRef.current.clear()
 			subtitleLatestConfidenceByItemIdRef.current.clear()
 			subtitleCommittedAtByItemIdRef.current.clear()
+			activeAudioUtteranceRef.current = null
+			lastAudioUtteranceIdRef.current = null
 			translateDraftSequenceByItemIdRef.current.clear()
 			translateLastDraftSourceTextByItemIdRef.current.clear()
 			pendingTranslateInputQueueRef.current = []
@@ -1352,6 +1519,8 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 
 		function handleOnline(): void {
 			isOnlineRef.current = true
+			setIsOnline(true)
+			setStatusMessage(null)
 			if (modeRef.current === 'chat' && chatChannelState !== 'connected') {
 				scheduleReconnect('chat')
 			}
@@ -1363,6 +1532,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 
 		function handleOffline(): void {
 			isOnlineRef.current = false
+			setIsOnline(false)
 			if (typeof reconnectStatusTimerRef.current === 'number') {
 				window.clearTimeout(reconnectStatusTimerRef.current)
 				reconnectStatusTimerRef.current = null
@@ -1371,6 +1541,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		}
 
 		isOnlineRef.current = navigator.onLine
+		setIsOnline(navigator.onLine)
 		window.addEventListener('online', handleOnline)
 		window.addEventListener('offline', handleOffline)
 		return () => {
@@ -1419,7 +1590,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 
 	useEffect(() => {
 		if (!isHydrated) return
-		const isOffline = !isOnlineRef.current
+		const isOffline = !isOnline
 		if (isOffline) {
 			setStatusMessage('Offline. Waiting for network…')
 			return
@@ -1455,7 +1626,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			window.clearTimeout(reconnectStatusTimerRef.current)
 			reconnectStatusTimerRef.current = null
 		}
-	}, [chatChannelState, isHydrated, mode, subtitleChannelState, translateChannelState])
+	}, [chatChannelState, isHydrated, isOnline, mode, subtitleChannelState, translateChannelState])
 
 	useEffect(() => {
 		if (!isHydrated) return
diff --git a/src/realtime/schemas.ts b/src/realtime/schemas.ts
index f90536d..18a2a8e 100644
--- a/src/realtime/schemas.ts
+++ b/src/realtime/schemas.ts
@@ -154,6 +154,10 @@ export const SystemLeakTextSchema = z
 		'likely conversation languages',
 		'keep proper nouns',
 		'preserve punctuation',
+		'preserve speaker intent',
+		'translate to language code',
+		'i speak language code',
+		'always call publish_translation',
 		'no summaries',
 		'no commentary'
 	])
diff --git a/src/realtime/sessionTypes.ts b/src/realtime/sessionTypes.ts
index 9dd2b2b..3c8a484 100644
--- a/src/realtime/sessionTypes.ts
+++ b/src/realtime/sessionTypes.ts
@@ -43,6 +43,14 @@ export type ConnectionHealthState = {
 	translateConnected: boolean
 }
 
+export type ConnectionUiState = {
+	isLive: boolean
+	isOffline: boolean
+	isReconnecting: boolean
+	lastHealthyAt: null | number
+	statusMessage: null | string
+}
+
 export type UtteranceDirection = 'my_to_target' | 'target_to_my'
 
 export type UtteranceStatus = 'streaming' | 'translating' | 'draft' | 'final' | 'error'
@@ -80,9 +88,28 @@ export type ChatTranscriptStatus = 'streaming' | 'final'
 export type ChatTranscriptMessage = {
 	clientSequence: number
 	id: string
+	slotId?: string
+	slotOrder?: number
 	role: 'user' | 'assistant'
 	text: string
 	status: ChatTranscriptStatus
 	source: ChatTranscriptSource
 	createdAt: number
 }
+
+export type ChatTurnSlot = {
+	slotId: string
+	orderKey: number
+	state: 'pending_user' | 'pending_assistant' | 'completed'
+	userItemId: string
+	assistantItemId?: string
+}
+
+export type ChatTimelineItem = {
+	slotId: string
+	clientSequence: number
+	createdAt: number
+	role: 'user' | 'assistant'
+	streamState: ChatTranscriptStatus
+	text: string
+}
diff --git a/src/realtime/subtitleTranscriptionClient.ts b/src/realtime/subtitleTranscriptionClient.ts
index d82c689..78465d2 100644
--- a/src/realtime/subtitleTranscriptionClient.ts
+++ b/src/realtime/subtitleTranscriptionClient.ts
@@ -117,7 +117,7 @@ function int16ArrayToBase64(inputArray: Int16Array): string {
 }
 
 function buildTranscriptionPrompt(): string {
-	return 'Transcribe spoken audio faithfully. Preserve punctuation and proper nouns.'
+	return 'Transcribe spoken words only. Do not add labels, metadata, or context notes.'
 }
 
 function resolveAsrProfileFromEnvironment(): 'accurate' | 'fast' {
@@ -154,14 +154,44 @@ function computeConfidenceFromLogprobs(
 	return Math.round((normalizedProbabilitySum / normalizedProbabilityCount) * 1000) / 1000
 }
 
+const manualCommitIntervalMilliseconds = 700
+const minimumCommitAudioDurationMilliseconds = 200
+const shouldEmitVerboseRealtimeLogs = process.env.NEXT_PUBLIC_LILAC_VERBOSE_LOGS === 'true'
+
+function emitSubtitleClientLog(
+	level: 'error' | 'info' | 'warn',
+	event: string,
+	details: Record<string, unknown>
+): void {
+	if (level === 'info' && !shouldEmitVerboseRealtimeLogs) return
+	const payload = {
+		...details,
+		event,
+		scope: 'subtitle_transcription',
+		timestamp: new Date().toISOString()
+	}
+	switch (level) {
+		case 'error':
+			console.error('[lilac.realtime]', payload)
+			return
+		case 'warn':
+			console.warn('[lilac.realtime]', payload)
+			return
+		default:
+			console.info('[lilac.realtime]', payload)
+	}
+}
+
 export class SubtitleTranscriptionClient {
 	private audioContext: AudioContext | null = null
 	private callbacks: SubtitleTranscriptionClientCallbacks
+	private commitTimerId: null | number = null
 	private committedAtByItemId = new Map<string, number>()
 	private generation = 0
 	private localAudioStream: MediaStream | null = null
 	private micProcessorNode: ScriptProcessorNode | null = null
 	private micSourceNode: MediaStreamAudioSourceNode | null = null
+	private pendingAudioDurationMilliseconds = 0
 	private previousItemIdByItemId = new Map<string, null | string>()
 	private segmentSequence = 0
 	private silentGainNode: GainNode | null = null
@@ -200,6 +230,7 @@ export class SubtitleTranscriptionClient {
 			websocket.addEventListener('open', () => {
 				if (generation !== this.generation) return
 				this.setState('connected')
+				emitSubtitleClientLog('info', 'socket_open', { generation })
 				this.sendEvent({
 					session: {
 						include: ['item.input_audio_transcription.logprobs'],
@@ -208,11 +239,7 @@ export class SubtitleTranscriptionClient {
 							model: defaultInputTranscriptionModel,
 							prompt: buildTranscriptionPrompt()
 						},
-						turn_detection: {
-							eagerness: this.turnEagerness,
-							type: 'semantic_vad'
-						},
-						type: 'transcription'
+						turn_detection: null
 					},
 					type: 'transcription_session.update'
 				})
@@ -228,17 +255,23 @@ export class SubtitleTranscriptionClient {
 			websocket.addEventListener('error', () => {
 				if (generation !== this.generation) return
 				this.setState('error')
+				emitSubtitleClientLog('error', 'socket_error', { generation })
 				this.callbacks.onError('Subtitle stream connection error.')
 			})
 
 			websocket.addEventListener('close', () => {
 				if (generation !== this.generation) return
 				this.setState('disconnected')
+				emitSubtitleClientLog('warn', 'socket_close', { generation })
 				this.callbacks.onListeningStateChange(false)
 			})
 		} catch (error) {
 			if (generation !== this.generation) return
 			this.setState('error')
+			emitSubtitleClientLog('error', 'start_failed', {
+				generation,
+				message: error instanceof Error ? error.message : 'unknown'
+			})
 			const fallbackMessage = 'Unable to start subtitle transcription.'
 			if (error instanceof Error) this.callbacks.onError(error.message || fallbackMessage)
 			else this.callbacks.onError(fallbackMessage)
@@ -288,11 +321,7 @@ export class SubtitleTranscriptionClient {
 					model: defaultInputTranscriptionModel,
 					prompt: buildTranscriptionPrompt()
 				},
-				turn_detection: {
-					eagerness: this.turnEagerness,
-					type: 'semantic_vad'
-				},
-				type: 'transcription'
+				turn_detection: null
 			},
 			type: 'transcription_session.update'
 		})
@@ -303,6 +332,38 @@ export class SubtitleTranscriptionClient {
 		this.callbacks.onConnectionStateChange(state)
 	}
 
+	private commitAudioBufferIfReady(forceCommit = false): void {
+		if (!this.websocket || this.websocket.readyState !== WebSocket.OPEN) return
+		if (
+			!forceCommit &&
+			this.pendingAudioDurationMilliseconds < minimumCommitAudioDurationMilliseconds
+		) {
+			return
+		}
+		if (this.pendingAudioDurationMilliseconds <= 0) return
+		this.sendEvent({
+			type: 'input_audio_buffer.commit'
+		})
+		emitSubtitleClientLog('info', 'manual_commit', {
+			audioDurationMilliseconds: Math.round(this.pendingAudioDurationMilliseconds),
+			forceCommit
+		})
+		this.pendingAudioDurationMilliseconds = 0
+	}
+
+	private startManualCommitLoop(): void {
+		this.stopManualCommitLoop()
+		this.commitTimerId = window.setInterval(() => {
+			this.commitAudioBufferIfReady(false)
+		}, manualCommitIntervalMilliseconds)
+	}
+
+	private stopManualCommitLoop(): void {
+		if (typeof this.commitTimerId !== 'number') return
+		window.clearInterval(this.commitTimerId)
+		this.commitTimerId = null
+	}
+
 	private async enableVoiceInput(generation: number): Promise<void> {
 		const stream = await navigator.mediaDevices.getUserMedia({
 			audio: {
@@ -329,6 +390,7 @@ export class SubtitleTranscriptionClient {
 			if (!rawInputBuffer || rawInputBuffer.length === 0) return
 			const pcm16Buffer = convertFloat32ToInt16(rawInputBuffer, audioContext.sampleRate, 16_000)
 			if (pcm16Buffer.length === 0) return
+			this.pendingAudioDurationMilliseconds += (pcm16Buffer.length / 16_000) * 1000
 			const audioBase64 = int16ArrayToBase64(pcm16Buffer)
 			if (!audioBase64) return
 			this.sendEvent({
@@ -341,10 +403,14 @@ export class SubtitleTranscriptionClient {
 		this.micProcessorNode.connect(this.silentGainNode)
 		this.silentGainNode.connect(audioContext.destination)
 
+		this.pendingAudioDurationMilliseconds = 0
+		this.startManualCommitLoop()
 		this.callbacks.onListeningStateChange(true)
 	}
 
 	private stopVoiceInput(): void {
+		this.commitAudioBufferIfReady(true)
+		this.stopManualCommitLoop()
 		if (this.micProcessorNode) {
 			this.micProcessorNode.disconnect()
 			this.micProcessorNode.onaudioprocess = null
@@ -366,6 +432,7 @@ export class SubtitleTranscriptionClient {
 			track.stop()
 		}
 		this.localAudioStream = null
+		this.pendingAudioDurationMilliseconds = 0
 	}
 
 	private handleInputAudioBufferCommittedEvent(candidate: unknown): void {
@@ -430,6 +497,9 @@ export class SubtitleTranscriptionClient {
 				}
 				case 'error': {
 					const event = RealtimeErrorEventSchema.parse(candidate)
+					emitSubtitleClientLog('error', 'realtime_error', {
+						message: event.error?.message || 'Subtitle transcription error.'
+					})
 					this.callbacks.onError(event.error?.message || 'Subtitle transcription error.')
 					return
 				}

From 1ae9f0f705c7a33f4e147af21554f20824f23919 Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Wed, 4 Mar 2026 20:19:33 -0500
Subject: [PATCH 14/24] Only show reconnect banner after first successful
 connection

---
 src/realtime/modeRuntimeStore.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/realtime/modeRuntimeStore.tsx b/src/realtime/modeRuntimeStore.tsx
index 209b783..7c9123c 100644
--- a/src/realtime/modeRuntimeStore.tsx
+++ b/src/realtime/modeRuntimeStore.tsx
@@ -538,6 +538,10 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		subtitle: 0,
 		translate: 0
 	})
+	const hasSeenConnectedStateByModeRef = useRef<Record<LilacMode, boolean>>({
+		chat: false,
+		translate: false
+	})
 	const intentionalStopByChannelRef = useRef<Record<RuntimeChannel, boolean>>({
 		chat: false,
 		subtitle: false,
@@ -935,6 +939,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				switch (state) {
 					case 'connected':
 						setErrorMessage(null)
+						hasSeenConnectedStateByModeRef.current.chat = true
 						reconnectAttemptByChannelRef.current.chat = 0
 						return
 					case 'disconnected':
@@ -1550,6 +1555,12 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		}
 	}, [chatChannelState, scheduleReconnect, subtitleChannelState, translateChannelState])
 
+	useEffect(() => {
+		if (translateChannelState === 'connected' && subtitleChannelState === 'connected') {
+			hasSeenConnectedStateByModeRef.current.translate = true
+		}
+	}, [subtitleChannelState, translateChannelState])
+
 	useEffect(() => {
 		const nextConnectionHealthState: ConnectionHealthState = {
 			isReconnecting: false,
@@ -1600,8 +1611,9 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			mode === 'chat'
 				? chatChannelState !== 'connected'
 				: translateChannelState !== 'connected' && subtitleChannelState !== 'connected'
+		const hasSeenConnectedStateForMode = hasSeenConnectedStateByModeRef.current[mode]
 
-		if (!shouldShowReconnectForMode) {
+		if (!shouldShowReconnectForMode || !hasSeenConnectedStateForMode) {
 			if (typeof reconnectStatusTimerRef.current === 'number') {
 				window.clearTimeout(reconnectStatusTimerRef.current)
 				reconnectStatusTimerRef.current = null

From 2440622650983adfa0b40bf16f0b284c0311bfa7 Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Wed, 4 Mar 2026 20:22:35 -0500
Subject: [PATCH 15/24] Tighten chat smoke assertion for post-send assistant
 ordering

---
 scripts/smoke/runLiveConversationSmoke.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/scripts/smoke/runLiveConversationSmoke.ts b/scripts/smoke/runLiveConversationSmoke.ts
index c84f775..05f4ff5 100644
--- a/scripts/smoke/runLiveConversationSmoke.ts
+++ b/scripts/smoke/runLiveConversationSmoke.ts
@@ -224,6 +224,9 @@ async function runChatScenario(page: Page, artifactDirectoryPath: string): Promi
 		}
 
 		await closeOverlayIfPresent(page)
+		const assistantRowCountBeforeTypedSend = await page
+			.locator('[data-testid^="chat-row-"][data-chat-role="assistant"]')
+			.count()
 		await page.getByTestId('chat-text-input').fill(typedMessage)
 		await page.getByTestId('chat-text-send').click()
 
@@ -240,11 +243,11 @@ async function runChatScenario(page: Page, artifactDirectoryPath: string): Promi
 		)
 
 		await waitForCondition(
-			async function hasAssistantMessage(): Promise<boolean> {
-				const messageTextList = await page
-					.locator('[data-testid^="chat-message-text-"]')
-					.allInnerTexts()
-				return messageTextList.some(messageText => !messageText.includes(typedMessage))
+			async function hasNewAssistantMessage(): Promise<boolean> {
+				const assistantRowCountAfterTypedSend = await page
+					.locator('[data-testid^="chat-row-"][data-chat-role="assistant"]')
+					.count()
+				return assistantRowCountAfterTypedSend > assistantRowCountBeforeTypedSend
 			},
 			35_000,
 			'Chat mode did not produce a follow-up assistant transcript.'

From 59d9606798d5cbd044c679295a2a87b45e22d1ae Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Wed, 4 Mar 2026 20:39:40 -0500
Subject: [PATCH 16/24] Stabilize subtitle transcription flow and dedupe
 hallucinated chunks

---
 src/app/actions/realtime.ts                 |  11 +-
 src/realtime/modeRuntimeStore.tsx           | 151 +++++++++++++++++---
 src/realtime/schemas.ts                     |   6 +-
 src/realtime/subtitleTranscriptionClient.ts |  99 +++----------
 4 files changed, 167 insertions(+), 100 deletions(-)

diff --git a/src/app/actions/realtime.ts b/src/app/actions/realtime.ts
index b7149d8..3c3dc98 100644
--- a/src/app/actions/realtime.ts
+++ b/src/app/actions/realtime.ts
@@ -238,12 +238,15 @@ export async function createRealtimeTranscriptionSessionAction(input: unknown):
 		include: ['item.input_audio_transcription.logprobs'],
 		input_audio_format: 'pcm16',
 		input_audio_transcription: {
-			model: transcriptionModel,
-			prompt: 'Transcribe spoken words only. Do not add labels, metadata, or context notes.'
+			model: transcriptionModel
 		},
 		turn_detection: {
-			eagerness: parsedInput.turnEagerness,
-			type: 'semantic_vad'
+			create_response: false,
+			interrupt_response: false,
+			prefix_padding_ms: 300,
+			silence_duration_ms: 450,
+			threshold: 0.5,
+			type: 'server_vad'
 		}
 	})
 
diff --git a/src/realtime/modeRuntimeStore.tsx b/src/realtime/modeRuntimeStore.tsx
index 7c9123c..4ebf0dd 100644
--- a/src/realtime/modeRuntimeStore.tsx
+++ b/src/realtime/modeRuntimeStore.tsx
@@ -106,6 +106,13 @@ const isTranslateStreamingV2Enabled =
 const systemLeakMatcherList = SystemLeakTextSchema.parse(undefined).map(matcher =>
 	matcher.toLowerCase()
 )
+const systemLeakPatternList = [
+	/\btrans\s*cribe\s+spoken\s+words\s+only\b/i,
+	/\bdo\s+not\s+add\s+labels\b/i,
+	/\bmetadata\s*,?\s*or\s+context\s+notes\b/i,
+	/\bpreserve\s+punctuation\s+and\s+proper\s+nouns\b/i,
+	/\blike?ly\s+conversation\s+languages\b/i
+]
 
 function normalizeTurnDelaySeconds(value: unknown): number {
 	const parsedValue = typeof value === 'number' ? value : Number.parseFloat(String(value))
@@ -124,6 +131,54 @@ function normalizeWhitespace(value: string): string {
 	return value.replace(/\s+/g, ' ').trim()
 }
 
+function isAsciiDigitCharacter(value: string): boolean {
+	return value >= '0' && value <= '9'
+}
+
+function isUnicodeLetterCharacter(value: string): boolean {
+	return value.toLowerCase() !== value.toUpperCase()
+}
+
+function canonicalizeTranscriptionText(value: string): string {
+	const punctuationNormalizedValue = normalizeWhitespace(value)
+		.toLowerCase()
+		.replace(/\s+([,.;!?])/g, '$1')
+	let canonicalValue = ''
+	for (const character of punctuationNormalizedValue) {
+		if (isAsciiDigitCharacter(character) || isUnicodeLetterCharacter(character)) {
+			canonicalValue += character
+		}
+	}
+	return canonicalValue
+}
+
+function splitSentenceList(value: string): string[] {
+	return value
+		.split(/(?<=[.!?])\s+/)
+		.map(sentence => normalizeWhitespace(sentence))
+		.filter(Boolean)
+}
+
+function isEquivalentTranscriptionChunk(leftValue: string, rightValue: string): boolean {
+	const normalizedLeftValue = canonicalizeTranscriptionText(leftValue)
+	const normalizedRightValue = canonicalizeTranscriptionText(rightValue)
+	if (!normalizedLeftValue || !normalizedRightValue) return false
+	if (normalizedLeftValue === normalizedRightValue) return true
+	if (
+		normalizedLeftValue.includes(normalizedRightValue) &&
+		normalizedRightValue.length >= Math.floor(normalizedLeftValue.length * 0.7)
+	) {
+		return true
+	}
+	if (
+		normalizedRightValue.includes(normalizedLeftValue) &&
+		normalizedLeftValue.length >= Math.floor(normalizedRightValue.length * 0.7)
+	) {
+		return true
+	}
+	return false
+}
+
 function getChatRoleSortValue(role: 'assistant' | 'user'): number {
 	switch (role) {
 		case 'user':
@@ -141,22 +196,69 @@ function shouldDropSubtitleText(value: string): boolean {
 	for (const matcher of systemLeakMatcherList) {
 		if (normalizedValue.includes(matcher)) return true
 	}
+	for (const pattern of systemLeakPatternList) {
+		if (pattern.test(normalizedValue)) return true
+	}
+	const collapsedValue = canonicalizeTranscriptionText(normalizedValue)
+	if (collapsedValue.includes('transcribespokenwordsonly')) return true
+	if (collapsedValue.includes('donotaddlabels')) return true
+	if (collapsedValue.includes('metadataorcontextnotes')) return true
 	if (normalizedValue === 'context') return true
 	if (normalizedValue === 'context:') return true
 	return false
 }
 
+function sanitizeSubtitleText(value: string): string {
+	const normalizedValue = normalizeWhitespace(value)
+	if (!normalizedValue) return ''
+	const sentenceList = splitSentenceList(normalizedValue)
+	if (sentenceList.length === 0) {
+		return shouldDropSubtitleText(normalizedValue) ? '' : normalizedValue
+	}
+	const filteredSentenceList: string[] = []
+	for (const sentence of sentenceList) {
+		if (shouldDropSubtitleText(sentence)) continue
+		const previousSentence = filteredSentenceList[filteredSentenceList.length - 1]
+		if (previousSentence && isEquivalentTranscriptionChunk(previousSentence, sentence)) continue
+		filteredSentenceList.push(sentence)
+	}
+	if (filteredSentenceList.length === 0) return ''
+	return normalizeWhitespace(filteredSentenceList.join(' '))
+}
+
+function findWordOverlapLength(existingText: string, nextText: string): number {
+	const existingWordList = existingText.split(' ')
+	const nextWordList = nextText.split(' ')
+	const maxOverlapLength = Math.min(existingWordList.length, nextWordList.length)
+	for (let overlapLength = maxOverlapLength; overlapLength >= 1; overlapLength -= 1) {
+		const existingSuffix = existingWordList.slice(-overlapLength).join(' ').toLowerCase()
+		const nextPrefix = nextWordList.slice(0, overlapLength).join(' ').toLowerCase()
+		if (existingSuffix === nextPrefix) return overlapLength
+	}
+	return 0
+}
+
 function mergeUtteranceText(existingText: string, nextChunkText: string): string {
 	const normalizedExistingText = normalizeWhitespace(existingText)
 	const normalizedChunkText = normalizeWhitespace(nextChunkText)
 	if (!normalizedChunkText) return normalizedExistingText
 	if (!normalizedExistingText) return normalizedChunkText
+	if (isEquivalentTranscriptionChunk(normalizedExistingText, normalizedChunkText)) {
+		return normalizedExistingText
+	}
 	if (normalizedExistingText.toLowerCase().endsWith(normalizedChunkText.toLowerCase())) {
 		return normalizedExistingText
 	}
 	if (normalizedChunkText.toLowerCase().startsWith(normalizedExistingText.toLowerCase())) {
 		return normalizedChunkText
 	}
+	const overlapLength = findWordOverlapLength(normalizedExistingText, normalizedChunkText)
+	if (overlapLength > 0) {
+		const chunkWordList = normalizedChunkText.split(' ')
+		const suffixWordList = chunkWordList.slice(overlapLength)
+		if (suffixWordList.length === 0) return normalizedExistingText
+		return `${normalizedExistingText} ${suffixWordList.join(' ')}`
+	}
 	return `${normalizedExistingText} ${normalizedChunkText}`
 }
 
@@ -516,6 +618,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	const pendingTranslateInputQueueRef = useRef<PendingTranslateInput[]>([])
 	const chatTranscriptSequenceRef = useRef(1)
 	const subtitleDedupKeyTimestampByKeyRef = useRef<Map<string, number>>(new Map())
+	const subtitleRawSegmentTextByItemIdRef = useRef<Map<string, string>>(new Map())
 	const subtitleSegmentTextByItemIdRef = useRef<Map<string, string>>(new Map())
 	const subtitleSourceTextByItemIdRef = useRef<Map<string, string>>(new Map())
 	const subtitlePreviousItemIdByItemIdRef = useRef<Map<string, null | string>>(new Map())
@@ -605,6 +708,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		void subtitleClientRef.current?.stop()
 		subtitleClientRef.current = null
 		clearAllTranslateStreamingTimers()
+		subtitleRawSegmentTextByItemIdRef.current.clear()
 		subtitleSegmentTextByItemIdRef.current.clear()
 		subtitleSourceTextByItemIdRef.current.clear()
 		subtitlePreviousItemIdByItemIdRef.current.clear()
@@ -641,6 +745,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		setTranslateCards([])
 		setLiveSubtitleState(defaultLiveSubtitleState)
 		subtitleDedupKeyTimestampByKeyRef.current.clear()
+		subtitleRawSegmentTextByItemIdRef.current.clear()
 		subtitleSegmentTextByItemIdRef.current.clear()
 		subtitleSourceTextByItemIdRef.current.clear()
 		subtitlePreviousItemIdByItemIdRef.current.clear()
@@ -875,17 +980,22 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 
 	const handleTranslateSubtitleFinalPatch = useCallback(
 		(patch: SubtitleFinalPatch) => {
-			const normalizedText = normalizeWhitespace(patch.text)
-			if (!normalizedText) return
-			if (shouldDropSubtitleText(normalizedText)) return
+			const normalizedText = sanitizeSubtitleText(patch.text)
+			subtitleRawSegmentTextByItemIdRef.current.delete(patch.itemId)
+			if (!normalizedText) {
+				subtitleSegmentTextByItemIdRef.current.delete(patch.itemId)
+				return
+			}
 
 			const now = Date.now()
 			const roundedTimestamp =
 				Math.round(now / subtitleDedupRoundedTimeWindowMilliseconds) *
 				subtitleDedupRoundedTimeWindowMilliseconds
-			const dedupeKey = `${normalizedText.toLowerCase()}::${roundedTimestamp}::${translateSettingsRef.current.myLanguageCode}`
+			const canonicalText = canonicalizeTranscriptionText(normalizedText)
+			const dedupeKey = `${canonicalText}::${roundedTimestamp}::${translateSettingsRef.current.myLanguageCode}`
 			const previousTimestamp = subtitleDedupKeyTimestampByKeyRef.current.get(dedupeKey)
 			if (typeof previousTimestamp === 'number' && now - previousTimestamp < 2500) {
+				subtitleSegmentTextByItemIdRef.current.delete(patch.itemId)
 				return
 			}
 			subtitleDedupKeyTimestampByKeyRef.current.set(dedupeKey, now)
@@ -894,10 +1004,15 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			})
 
 			const resolvedUtterance = resolveAudioUtterance(patch.itemId, patch.previousItemId)
-			const mergedSourceText = mergeUtteranceText(
-				subtitleSourceTextByItemIdRef.current.get(resolvedUtterance.id) ?? '',
-				normalizedText
-			)
+			const existingSourceText = subtitleSourceTextByItemIdRef.current.get(resolvedUtterance.id) ?? ''
+			const segmentText = subtitleSegmentTextByItemIdRef.current.get(patch.itemId) ?? ''
+			const shouldMergeFinalText =
+				!existingSourceText ||
+				!segmentText ||
+				!isEquivalentTranscriptionChunk(segmentText, normalizedText)
+			const mergedSourceText = shouldMergeFinalText
+				? mergeUtteranceText(existingSourceText, normalizedText)
+				: existingSourceText
 			subtitleSegmentTextByItemIdRef.current.delete(patch.itemId)
 			subtitleSourceTextByItemIdRef.current.set(resolvedUtterance.id, mergedSourceText)
 			subtitlePreviousItemIdByItemIdRef.current.set(resolvedUtterance.id, resolvedUtterance.previousId)
@@ -1041,6 +1156,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			onResultPatch: patch => {
 				clearTranslateDraftTimerByItemId(patch.itemId)
 				clearTranslateFinalTimerByItemId(patch.itemId)
+				subtitleRawSegmentTextByItemIdRef.current.delete(patch.itemId)
 				subtitleSourceTextByItemIdRef.current.delete(patch.itemId)
 				subtitlePreviousItemIdByItemIdRef.current.delete(patch.itemId)
 				subtitlePreviousUtteranceIdByUtteranceIdRef.current.delete(patch.itemId)
@@ -1115,10 +1231,12 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				}))
 			},
 			onSubtitleDelta: patch => {
-				const nextSegmentText = `${subtitleSegmentTextByItemIdRef.current.get(patch.itemId) ?? ''}${patch.textDelta}`
-				const normalizedSegmentText = normalizeWhitespace(nextSegmentText)
-				subtitleSegmentTextByItemIdRef.current.set(patch.itemId, nextSegmentText)
-				if (shouldDropSubtitleText(normalizedSegmentText)) {
+				const previousRawSegmentText = subtitleRawSegmentTextByItemIdRef.current.get(patch.itemId) ?? ''
+				const nextRawSegmentText = `${previousRawSegmentText}${patch.textDelta}`
+				subtitleRawSegmentTextByItemIdRef.current.set(patch.itemId, nextRawSegmentText)
+				const sanitizedSegmentText = sanitizeSubtitleText(nextRawSegmentText)
+				if (!sanitizedSegmentText) {
+					subtitleSegmentTextByItemIdRef.current.delete(patch.itemId)
 					setLiveSubtitleState(previousState => ({
 						...previousState,
 						activeSegmentId: patch.itemId,
@@ -1128,11 +1246,11 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 					}))
 					return
 				}
+				subtitleSegmentTextByItemIdRef.current.set(patch.itemId, sanitizedSegmentText)
 				const resolvedUtterance = resolveAudioUtterance(patch.itemId, patch.previousItemId)
-				const mergedSourceText = mergeUtteranceText(
-					subtitleSourceTextByItemIdRef.current.get(resolvedUtterance.id) ?? '',
-					patch.textDelta
-				)
+				const previousSourceText = subtitleSourceTextByItemIdRef.current.get(resolvedUtterance.id) ?? ''
+				const mergedSourceText = mergeUtteranceText(previousSourceText, sanitizedSegmentText)
+				if (mergedSourceText === previousSourceText) return
 				subtitleSourceTextByItemIdRef.current.set(resolvedUtterance.id, mergedSourceText)
 				subtitlePreviousItemIdByItemIdRef.current.set(
 					resolvedUtterance.id,
@@ -1282,6 +1400,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		(nextSettings: TranslateSettings) => {
 			const sanitizedSettings = sanitizeTranslateSettings(nextSettings)
 			clearAllTranslateStreamingTimers()
+			subtitleRawSegmentTextByItemIdRef.current.clear()
 			subtitleSegmentTextByItemIdRef.current.clear()
 			subtitleSourceTextByItemIdRef.current.clear()
 			subtitlePreviousItemIdByItemIdRef.current.clear()
diff --git a/src/realtime/schemas.ts b/src/realtime/schemas.ts
index 18a2a8e..9577820 100644
--- a/src/realtime/schemas.ts
+++ b/src/realtime/schemas.ts
@@ -62,8 +62,7 @@ export const CreateTranslateRealtimeClientSecretActionOutputSchema = z.object({
 export const CreateRealtimeTranscriptionSessionActionInputSchema = z.object({
 	asrProfile: TranscriptionAsrProfileSchema.default(defaultTranscriptionAsrProfile),
 	myLanguageCode: LanguageCodeSchema,
-	translateToLanguageCode: LanguageCodeSchema,
-	turnEagerness: z.enum(['low', 'medium', 'high']).default('high')
+	translateToLanguageCode: LanguageCodeSchema
 })
 
 export const CreateRealtimeTranscriptionSessionActionOutputSchema = z.object({
@@ -158,6 +157,9 @@ export const SystemLeakTextSchema = z
 		'translate to language code',
 		'i speak language code',
 		'always call publish_translation',
+		'transcribe spoken words only',
+		'do not add labels',
+		'metadata or context notes',
 		'no summaries',
 		'no commentary'
 	])
diff --git a/src/realtime/subtitleTranscriptionClient.ts b/src/realtime/subtitleTranscriptionClient.ts
index 78465d2..cb313a2 100644
--- a/src/realtime/subtitleTranscriptionClient.ts
+++ b/src/realtime/subtitleTranscriptionClient.ts
@@ -46,6 +46,24 @@ export type SubtitleTranscriptionClientCallbacks = {
 	onSubtitleFinal: (patch: SubtitleFinalPatch) => void
 }
 
+function createTranscriptionSessionPatch(): Record<string, unknown> {
+	return {
+		include: ['item.input_audio_transcription.logprobs'],
+		input_audio_format: 'pcm16',
+		input_audio_transcription: {
+			model: defaultInputTranscriptionModel
+		},
+		turn_detection: {
+			create_response: false,
+			interrupt_response: false,
+			prefix_padding_ms: 300,
+			silence_duration_ms: 450,
+			threshold: 0.5,
+			type: 'server_vad'
+		}
+	}
+}
+
 function clampPcmSample(value: number): number {
 	if (value > 1) return 1
 	if (value < -1) return -1
@@ -116,26 +134,10 @@ function int16ArrayToBase64(inputArray: Int16Array): string {
 	return btoa(binaryString)
 }
 
-function buildTranscriptionPrompt(): string {
-	return 'Transcribe spoken words only. Do not add labels, metadata, or context notes.'
-}
-
 function resolveAsrProfileFromEnvironment(): 'accurate' | 'fast' {
 	return process.env.NEXT_PUBLIC_LILAC_TRANSCRIBE_ASR_PROFILE === 'fast' ? 'fast' : 'accurate'
 }
 
-function resolveTurnEagernessFromEnvironment(): 'high' | 'low' | 'medium' {
-	const rawValue = process.env.NEXT_PUBLIC_LILAC_TRANSCRIBE_TURN_EAGERNESS
-	switch (rawValue) {
-		case 'low':
-			return 'low'
-		case 'medium':
-			return 'medium'
-		default:
-			return 'high'
-	}
-}
-
 function computeConfidenceFromLogprobs(
 	logprobList: Array<Record<string, unknown>> | undefined
 ): number | undefined {
@@ -154,8 +156,6 @@ function computeConfidenceFromLogprobs(
 	return Math.round((normalizedProbabilitySum / normalizedProbabilityCount) * 1000) / 1000
 }
 
-const manualCommitIntervalMilliseconds = 700
-const minimumCommitAudioDurationMilliseconds = 200
 const shouldEmitVerboseRealtimeLogs = process.env.NEXT_PUBLIC_LILAC_VERBOSE_LOGS === 'true'
 
 function emitSubtitleClientLog(
@@ -185,18 +185,15 @@ function emitSubtitleClientLog(
 export class SubtitleTranscriptionClient {
 	private audioContext: AudioContext | null = null
 	private callbacks: SubtitleTranscriptionClientCallbacks
-	private commitTimerId: null | number = null
 	private committedAtByItemId = new Map<string, number>()
 	private generation = 0
 	private localAudioStream: MediaStream | null = null
 	private micProcessorNode: ScriptProcessorNode | null = null
 	private micSourceNode: MediaStreamAudioSourceNode | null = null
-	private pendingAudioDurationMilliseconds = 0
 	private previousItemIdByItemId = new Map<string, null | string>()
 	private segmentSequence = 0
 	private silentGainNode: GainNode | null = null
 	private state: SubtitleTranscriptionClientState = 'disconnected'
-	private turnEagerness: 'high' | 'low' | 'medium' = resolveTurnEagernessFromEnvironment()
 	private voiceInputEnabled = true
 	private websocket: WebSocket | null = null
 
@@ -215,8 +212,7 @@ export class SubtitleTranscriptionClient {
 			const clientSecret = await createRealtimeTranscriptionSessionAction({
 				asrProfile: resolveAsrProfileFromEnvironment(),
 				myLanguageCode: input.myLanguageCode,
-				translateToLanguageCode: input.translateToLanguageCode,
-				turnEagerness: this.turnEagerness
+				translateToLanguageCode: input.translateToLanguageCode
 			})
 			if (generation !== this.generation) return
 
@@ -232,15 +228,7 @@ export class SubtitleTranscriptionClient {
 				this.setState('connected')
 				emitSubtitleClientLog('info', 'socket_open', { generation })
 				this.sendEvent({
-					session: {
-						include: ['item.input_audio_transcription.logprobs'],
-						input_audio_format: 'pcm16',
-						input_audio_transcription: {
-							model: defaultInputTranscriptionModel,
-							prompt: buildTranscriptionPrompt()
-						},
-						turn_detection: null
-					},
+					session: createTranscriptionSessionPatch(),
 					type: 'transcription_session.update'
 				})
 				if (this.voiceInputEnabled) {
@@ -315,14 +303,7 @@ export class SubtitleTranscriptionClient {
 	public updateSubtitleSettings(settings: SubtitleTranscriptionSettings): void {
 		void settings
 		this.sendEvent({
-			session: {
-				include: ['item.input_audio_transcription.logprobs'],
-				input_audio_transcription: {
-					model: defaultInputTranscriptionModel,
-					prompt: buildTranscriptionPrompt()
-				},
-				turn_detection: null
-			},
+			session: createTranscriptionSessionPatch(),
 			type: 'transcription_session.update'
 		})
 	}
@@ -332,38 +313,6 @@ export class SubtitleTranscriptionClient {
 		this.callbacks.onConnectionStateChange(state)
 	}
 
-	private commitAudioBufferIfReady(forceCommit = false): void {
-		if (!this.websocket || this.websocket.readyState !== WebSocket.OPEN) return
-		if (
-			!forceCommit &&
-			this.pendingAudioDurationMilliseconds < minimumCommitAudioDurationMilliseconds
-		) {
-			return
-		}
-		if (this.pendingAudioDurationMilliseconds <= 0) return
-		this.sendEvent({
-			type: 'input_audio_buffer.commit'
-		})
-		emitSubtitleClientLog('info', 'manual_commit', {
-			audioDurationMilliseconds: Math.round(this.pendingAudioDurationMilliseconds),
-			forceCommit
-		})
-		this.pendingAudioDurationMilliseconds = 0
-	}
-
-	private startManualCommitLoop(): void {
-		this.stopManualCommitLoop()
-		this.commitTimerId = window.setInterval(() => {
-			this.commitAudioBufferIfReady(false)
-		}, manualCommitIntervalMilliseconds)
-	}
-
-	private stopManualCommitLoop(): void {
-		if (typeof this.commitTimerId !== 'number') return
-		window.clearInterval(this.commitTimerId)
-		this.commitTimerId = null
-	}
-
 	private async enableVoiceInput(generation: number): Promise<void> {
 		const stream = await navigator.mediaDevices.getUserMedia({
 			audio: {
@@ -390,7 +339,6 @@ export class SubtitleTranscriptionClient {
 			if (!rawInputBuffer || rawInputBuffer.length === 0) return
 			const pcm16Buffer = convertFloat32ToInt16(rawInputBuffer, audioContext.sampleRate, 16_000)
 			if (pcm16Buffer.length === 0) return
-			this.pendingAudioDurationMilliseconds += (pcm16Buffer.length / 16_000) * 1000
 			const audioBase64 = int16ArrayToBase64(pcm16Buffer)
 			if (!audioBase64) return
 			this.sendEvent({
@@ -403,14 +351,10 @@ export class SubtitleTranscriptionClient {
 		this.micProcessorNode.connect(this.silentGainNode)
 		this.silentGainNode.connect(audioContext.destination)
 
-		this.pendingAudioDurationMilliseconds = 0
-		this.startManualCommitLoop()
 		this.callbacks.onListeningStateChange(true)
 	}
 
 	private stopVoiceInput(): void {
-		this.commitAudioBufferIfReady(true)
-		this.stopManualCommitLoop()
 		if (this.micProcessorNode) {
 			this.micProcessorNode.disconnect()
 			this.micProcessorNode.onaudioprocess = null
@@ -432,7 +376,6 @@ export class SubtitleTranscriptionClient {
 			track.stop()
 		}
 		this.localAudioStream = null
-		this.pendingAudioDurationMilliseconds = 0
 	}
 
 	private handleInputAudioBufferCommittedEvent(candidate: unknown): void {

From 0f020629c26bc2727ff237f352aaa58ac101c4fa Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Wed, 4 Mar 2026 22:37:41 -0500
Subject: [PATCH 17/24] Remove unsupported transcription turn_detection fields

---
 src/app/actions/realtime.ts                 | 2 --
 src/realtime/subtitleTranscriptionClient.ts | 2 --
 2 files changed, 4 deletions(-)

diff --git a/src/app/actions/realtime.ts b/src/app/actions/realtime.ts
index 3c3dc98..e1219c1 100644
--- a/src/app/actions/realtime.ts
+++ b/src/app/actions/realtime.ts
@@ -241,8 +241,6 @@ export async function createRealtimeTranscriptionSessionAction(input: unknown):
 			model: transcriptionModel
 		},
 		turn_detection: {
-			create_response: false,
-			interrupt_response: false,
 			prefix_padding_ms: 300,
 			silence_duration_ms: 450,
 			threshold: 0.5,
diff --git a/src/realtime/subtitleTranscriptionClient.ts b/src/realtime/subtitleTranscriptionClient.ts
index cb313a2..2dcf76b 100644
--- a/src/realtime/subtitleTranscriptionClient.ts
+++ b/src/realtime/subtitleTranscriptionClient.ts
@@ -54,8 +54,6 @@ function createTranscriptionSessionPatch(): Record<string, unknown> {
 			model: defaultInputTranscriptionModel
 		},
 		turn_detection: {
-			create_response: false,
-			interrupt_response: false,
 			prefix_padding_ms: 300,
 			silence_duration_ms: 450,
 			threshold: 0.5,

From b2625fbc740c38491e331d079cc928e7d16310ea Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Thu, 5 Mar 2026 12:17:41 -0500
Subject: [PATCH 18/24] Fix draft metadata typing and restore chunked subtitle
 commits

---
 src/app/actions/realtime.ts                 |  7 +-
 src/realtime/liveTranslateRealtimeClient.ts |  2 +-
 src/realtime/subtitleTranscriptionClient.ts | 76 +++++++++++++++++++--
 3 files changed, 72 insertions(+), 13 deletions(-)

diff --git a/src/app/actions/realtime.ts b/src/app/actions/realtime.ts
index e1219c1..48f864f 100644
--- a/src/app/actions/realtime.ts
+++ b/src/app/actions/realtime.ts
@@ -240,12 +240,7 @@ export async function createRealtimeTranscriptionSessionAction(input: unknown):
 		input_audio_transcription: {
 			model: transcriptionModel
 		},
-		turn_detection: {
-			prefix_padding_ms: 300,
-			silence_duration_ms: 450,
-			threshold: 0.5,
-			type: 'server_vad'
-		}
+		turn_detection: null
 	})
 
 	const parsedSecret = parseClientSecretResponse(payload)
diff --git a/src/realtime/liveTranslateRealtimeClient.ts b/src/realtime/liveTranslateRealtimeClient.ts
index 7517fb0..db8c814 100644
--- a/src/realtime/liveTranslateRealtimeClient.ts
+++ b/src/realtime/liveTranslateRealtimeClient.ts
@@ -541,7 +541,7 @@ export class LiveTranslateRealtimeClient {
 					this.settings.translateToLanguageCode
 				),
 				metadata: {
-					draft_sequence: context.draftSequence,
+					draft_sequence: String(context.draftSequence ?? 0),
 					input_origin: context.inputOrigin,
 					request_id: requestId,
 					request_kind: context.requestKind,
diff --git a/src/realtime/subtitleTranscriptionClient.ts b/src/realtime/subtitleTranscriptionClient.ts
index 2dcf76b..f18b9b7 100644
--- a/src/realtime/subtitleTranscriptionClient.ts
+++ b/src/realtime/subtitleTranscriptionClient.ts
@@ -53,12 +53,7 @@ function createTranscriptionSessionPatch(): Record<string, unknown> {
 		input_audio_transcription: {
 			model: defaultInputTranscriptionModel
 		},
-		turn_detection: {
-			prefix_padding_ms: 300,
-			silence_duration_ms: 450,
-			threshold: 0.5,
-			type: 'server_vad'
-		}
+		turn_detection: null
 	}
 }
 
@@ -154,6 +149,20 @@ function computeConfidenceFromLogprobs(
 	return Math.round((normalizedProbabilitySum / normalizedProbabilityCount) * 1000) / 1000
 }
 
+function computeRootMeanSquare(sampleList: Float32Array): number {
+	if (sampleList.length === 0) return 0
+	let squareSum = 0
+	for (let sampleIndex = 0; sampleIndex < sampleList.length; sampleIndex += 1) {
+		const sampleValue = sampleList[sampleIndex] ?? 0
+		squareSum += sampleValue * sampleValue
+	}
+	return Math.sqrt(squareSum / sampleList.length)
+}
+
+const manualCommitIntervalMilliseconds = 700
+const minimumCommitAudioDurationMilliseconds = 260
+const speechDetectionHangoverMilliseconds = 220
+const speechDetectionRootMeanSquareThreshold = 0.008
 const shouldEmitVerboseRealtimeLogs = process.env.NEXT_PUBLIC_LILAC_VERBOSE_LOGS === 'true'
 
 function emitSubtitleClientLog(
@@ -183,11 +192,14 @@ function emitSubtitleClientLog(
 export class SubtitleTranscriptionClient {
 	private audioContext: AudioContext | null = null
 	private callbacks: SubtitleTranscriptionClientCallbacks
+	private commitTimerId: null | number = null
 	private committedAtByItemId = new Map<string, number>()
 	private generation = 0
 	private localAudioStream: MediaStream | null = null
 	private micProcessorNode: ScriptProcessorNode | null = null
 	private micSourceNode: MediaStreamAudioSourceNode | null = null
+	private pendingAudioDurationMilliseconds = 0
+	private pendingSpeechHangoverMilliseconds = 0
 	private previousItemIdByItemId = new Map<string, null | string>()
 	private segmentSequence = 0
 	private silentGainNode: GainNode | null = null
@@ -311,6 +323,38 @@ export class SubtitleTranscriptionClient {
 		this.callbacks.onConnectionStateChange(state)
 	}
 
+	private commitAudioBufferIfReady(forceCommit: boolean): void {
+		if (!this.websocket || this.websocket.readyState !== WebSocket.OPEN) return
+		if (
+			!forceCommit &&
+			this.pendingAudioDurationMilliseconds < minimumCommitAudioDurationMilliseconds
+		) {
+			return
+		}
+		if (this.pendingAudioDurationMilliseconds <= 0) return
+		this.sendEvent({
+			type: 'input_audio_buffer.commit'
+		})
+		emitSubtitleClientLog('info', 'manual_commit', {
+			audioDurationMilliseconds: Math.round(this.pendingAudioDurationMilliseconds),
+			forceCommit
+		})
+		this.pendingAudioDurationMilliseconds = 0
+	}
+
+	private startManualCommitLoop(): void {
+		this.stopManualCommitLoop()
+		this.commitTimerId = window.setInterval(() => {
+			this.commitAudioBufferIfReady(false)
+		}, manualCommitIntervalMilliseconds)
+	}
+
+	private stopManualCommitLoop(): void {
+		if (typeof this.commitTimerId !== 'number') return
+		window.clearInterval(this.commitTimerId)
+		this.commitTimerId = null
+	}
+
 	private async enableVoiceInput(generation: number): Promise<void> {
 		const stream = await navigator.mediaDevices.getUserMedia({
 			audio: {
@@ -337,6 +381,19 @@ export class SubtitleTranscriptionClient {
 			if (!rawInputBuffer || rawInputBuffer.length === 0) return
 			const pcm16Buffer = convertFloat32ToInt16(rawInputBuffer, audioContext.sampleRate, 16_000)
 			if (pcm16Buffer.length === 0) return
+			const chunkDurationMilliseconds = (pcm16Buffer.length / 16_000) * 1000
+			const chunkRootMeanSquare = computeRootMeanSquare(rawInputBuffer)
+			const hasSpeechActivity = chunkRootMeanSquare >= speechDetectionRootMeanSquareThreshold
+			if (hasSpeechActivity) {
+				this.pendingSpeechHangoverMilliseconds = speechDetectionHangoverMilliseconds
+			} else {
+				this.pendingSpeechHangoverMilliseconds = Math.max(
+					0,
+					this.pendingSpeechHangoverMilliseconds - chunkDurationMilliseconds
+				)
+			}
+			if (!hasSpeechActivity && this.pendingSpeechHangoverMilliseconds <= 0) return
+			this.pendingAudioDurationMilliseconds += chunkDurationMilliseconds
 			const audioBase64 = int16ArrayToBase64(pcm16Buffer)
 			if (!audioBase64) return
 			this.sendEvent({
@@ -349,10 +406,15 @@ export class SubtitleTranscriptionClient {
 		this.micProcessorNode.connect(this.silentGainNode)
 		this.silentGainNode.connect(audioContext.destination)
 
+		this.pendingAudioDurationMilliseconds = 0
+		this.pendingSpeechHangoverMilliseconds = 0
+		this.startManualCommitLoop()
 		this.callbacks.onListeningStateChange(true)
 	}
 
 	private stopVoiceInput(): void {
+		this.commitAudioBufferIfReady(true)
+		this.stopManualCommitLoop()
 		if (this.micProcessorNode) {
 			this.micProcessorNode.disconnect()
 			this.micProcessorNode.onaudioprocess = null
@@ -374,6 +436,8 @@ export class SubtitleTranscriptionClient {
 			track.stop()
 		}
 		this.localAudioStream = null
+		this.pendingAudioDurationMilliseconds = 0
+		this.pendingSpeechHangoverMilliseconds = 0
 	}
 
 	private handleInputAudioBufferCommittedEvent(candidate: unknown): void {

From cc1fb81a6d47df12e224f9656ff87feac6979e93 Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Thu, 5 Mar 2026 12:30:43 -0500
Subject: [PATCH 19/24] Fix realtime transcription quality defaults and audio
 format

---
 src/app/actions/realtime.ts                 |  3 +++
 src/realtime/modelConfig.ts                 |  8 ++++++--
 src/realtime/subtitleTranscriptionClient.ts | 12 ++++++++++--
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/app/actions/realtime.ts b/src/app/actions/realtime.ts
index 48f864f..0cd6788 100644
--- a/src/app/actions/realtime.ts
+++ b/src/app/actions/realtime.ts
@@ -237,6 +237,9 @@ export async function createRealtimeTranscriptionSessionAction(input: unknown):
 	const payload = await postOpenAi('/realtime/transcription_sessions', {
 		include: ['item.input_audio_transcription.logprobs'],
 		input_audio_format: 'pcm16',
+		input_audio_noise_reduction: {
+			type: 'near_field'
+		},
 		input_audio_transcription: {
 			model: transcriptionModel
 		},
diff --git a/src/realtime/modelConfig.ts b/src/realtime/modelConfig.ts
index 88f8d6f..4b5007a 100644
--- a/src/realtime/modelConfig.ts
+++ b/src/realtime/modelConfig.ts
@@ -1,7 +1,11 @@
 import { z } from 'zod'
 
 export const chatRealtimeModelValues = ['gpt-realtime-1.5'] as const
-export const transcriptionModelValues = ['gpt-4o-transcribe', 'gpt-4o-mini-transcribe'] as const
+export const transcriptionModelValues = [
+	'gpt-4o-transcribe-latest',
+	'gpt-4o-transcribe',
+	'gpt-4o-mini-transcribe'
+] as const
 export const translationModelValues = ['gpt-5.3-chat-latest', 'gpt-5.3-codex'] as const
 export const transcriptionAsrProfileValues = ['accurate', 'fast'] as const
 
@@ -11,7 +15,7 @@ export const TranslationModelSchema = z.enum(translationModelValues)
 export const TranscriptionAsrProfileSchema = z.enum(transcriptionAsrProfileValues)
 
 export const defaultChatRealtimeModel = 'gpt-realtime-1.5'
-export const defaultTranscriptionModel = 'gpt-4o-transcribe'
+export const defaultTranscriptionModel = 'gpt-4o-transcribe-latest'
 export const fastTranscriptionModel = 'gpt-4o-mini-transcribe'
 export const defaultTranscriptionAsrProfile = 'accurate'
 export const defaultTranslationModel = 'gpt-5.3-chat-latest'
diff --git a/src/realtime/subtitleTranscriptionClient.ts b/src/realtime/subtitleTranscriptionClient.ts
index f18b9b7..3c7f5e9 100644
--- a/src/realtime/subtitleTranscriptionClient.ts
+++ b/src/realtime/subtitleTranscriptionClient.ts
@@ -50,6 +50,9 @@ function createTranscriptionSessionPatch(): Record<string, unknown> {
 	return {
 		include: ['item.input_audio_transcription.logprobs'],
 		input_audio_format: 'pcm16',
+		input_audio_noise_reduction: {
+			type: 'near_field'
+		},
 		input_audio_transcription: {
 			model: defaultInputTranscriptionModel
 		},
@@ -163,6 +166,7 @@ const manualCommitIntervalMilliseconds = 700
 const minimumCommitAudioDurationMilliseconds = 260
 const speechDetectionHangoverMilliseconds = 220
 const speechDetectionRootMeanSquareThreshold = 0.008
+const transcriptionSampleRateHertz = 24_000
 const shouldEmitVerboseRealtimeLogs = process.env.NEXT_PUBLIC_LILAC_VERBOSE_LOGS === 'true'
 
 function emitSubtitleClientLog(
@@ -379,9 +383,13 @@ export class SubtitleTranscriptionClient {
 		this.micProcessorNode.onaudioprocess = event => {
 			const rawInputBuffer = event.inputBuffer.getChannelData(0)
 			if (!rawInputBuffer || rawInputBuffer.length === 0) return
-			const pcm16Buffer = convertFloat32ToInt16(rawInputBuffer, audioContext.sampleRate, 16_000)
+			const pcm16Buffer = convertFloat32ToInt16(
+				rawInputBuffer,
+				audioContext.sampleRate,
+				transcriptionSampleRateHertz
+			)
 			if (pcm16Buffer.length === 0) return
-			const chunkDurationMilliseconds = (pcm16Buffer.length / 16_000) * 1000
+			const chunkDurationMilliseconds = (pcm16Buffer.length / transcriptionSampleRateHertz) * 1000
 			const chunkRootMeanSquare = computeRootMeanSquare(rawInputBuffer)
 			const hasSpeechActivity = chunkRootMeanSquare >= speechDetectionRootMeanSquareThreshold
 			if (hasSpeechActivity) {

From 64a87bd45c590db8c3453e34bb276873302eee98 Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Thu, 5 Mar 2026 12:33:26 -0500
Subject: [PATCH 20/24] Revert unsupported realtime transcription model slug

---
 src/realtime/modelConfig.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/realtime/modelConfig.ts b/src/realtime/modelConfig.ts
index 4b5007a..88f8d6f 100644
--- a/src/realtime/modelConfig.ts
+++ b/src/realtime/modelConfig.ts
@@ -1,11 +1,7 @@
 import { z } from 'zod'
 
 export const chatRealtimeModelValues = ['gpt-realtime-1.5'] as const
-export const transcriptionModelValues = [
-	'gpt-4o-transcribe-latest',
-	'gpt-4o-transcribe',
-	'gpt-4o-mini-transcribe'
-] as const
+export const transcriptionModelValues = ['gpt-4o-transcribe', 'gpt-4o-mini-transcribe'] as const
 export const translationModelValues = ['gpt-5.3-chat-latest', 'gpt-5.3-codex'] as const
 export const transcriptionAsrProfileValues = ['accurate', 'fast'] as const
 
@@ -15,7 +11,7 @@ export const TranslationModelSchema = z.enum(translationModelValues)
 export const TranscriptionAsrProfileSchema = z.enum(transcriptionAsrProfileValues)
 
 export const defaultChatRealtimeModel = 'gpt-realtime-1.5'
-export const defaultTranscriptionModel = 'gpt-4o-transcribe-latest'
+export const defaultTranscriptionModel = 'gpt-4o-transcribe'
 export const fastTranscriptionModel = 'gpt-4o-mini-transcribe'
 export const defaultTranscriptionAsrProfile = 'accurate'
 export const defaultTranslationModel = 'gpt-5.3-chat-latest'

From 6aa9234bfe5ffce50d4c55b0a4d00e15a9621b12 Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Thu, 5 Mar 2026 12:52:42 -0500
Subject: [PATCH 21/24] Improve subtitle chunk reconciliation and faster commit
 cadence

---
 src/realtime/modeRuntimeStore.tsx           | 102 +++++++++++++++++---
 src/realtime/subtitleTranscriptionClient.ts |   4 +-
 2 files changed, 89 insertions(+), 17 deletions(-)

diff --git a/src/realtime/modeRuntimeStore.tsx b/src/realtime/modeRuntimeStore.tsx
index 4ebf0dd..280afad 100644
--- a/src/realtime/modeRuntimeStore.tsx
+++ b/src/realtime/modeRuntimeStore.tsx
@@ -620,6 +620,8 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	const subtitleDedupKeyTimestampByKeyRef = useRef<Map<string, number>>(new Map())
 	const subtitleRawSegmentTextByItemIdRef = useRef<Map<string, string>>(new Map())
 	const subtitleSegmentTextByItemIdRef = useRef<Map<string, string>>(new Map())
+	const subtitleCommittedSegmentTextByItemIdRef = useRef<Map<string, string>>(new Map())
+	const subtitleSegmentItemIdListByUtteranceIdRef = useRef<Map<string, string[]>>(new Map())
 	const subtitleSourceTextByItemIdRef = useRef<Map<string, string>>(new Map())
 	const subtitlePreviousItemIdByItemIdRef = useRef<Map<string, null | string>>(new Map())
 	const subtitleUtteranceIdBySegmentItemIdRef = useRef<Map<string, string>>(new Map())
@@ -710,6 +712,8 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		clearAllTranslateStreamingTimers()
 		subtitleRawSegmentTextByItemIdRef.current.clear()
 		subtitleSegmentTextByItemIdRef.current.clear()
+		subtitleCommittedSegmentTextByItemIdRef.current.clear()
+		subtitleSegmentItemIdListByUtteranceIdRef.current.clear()
 		subtitleSourceTextByItemIdRef.current.clear()
 		subtitlePreviousItemIdByItemIdRef.current.clear()
 		subtitleUtteranceIdBySegmentItemIdRef.current.clear()
@@ -747,6 +751,8 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		subtitleDedupKeyTimestampByKeyRef.current.clear()
 		subtitleRawSegmentTextByItemIdRef.current.clear()
 		subtitleSegmentTextByItemIdRef.current.clear()
+		subtitleCommittedSegmentTextByItemIdRef.current.clear()
+		subtitleSegmentItemIdListByUtteranceIdRef.current.clear()
 		subtitleSourceTextByItemIdRef.current.clear()
 		subtitlePreviousItemIdByItemIdRef.current.clear()
 		subtitleUtteranceIdBySegmentItemIdRef.current.clear()
@@ -871,6 +877,65 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		[]
 	)
 
+	const registerUtteranceSegmentItemId = useCallback(
+		(utteranceId: string, segmentItemId: string): void => {
+			const segmentItemIdList =
+				subtitleSegmentItemIdListByUtteranceIdRef.current.get(utteranceId) ?? []
+			if (!segmentItemIdList.includes(segmentItemId)) {
+				subtitleSegmentItemIdListByUtteranceIdRef.current.set(utteranceId, [
+					...segmentItemIdList,
+					segmentItemId
+				])
+			}
+			subtitleUtteranceIdBySegmentItemIdRef.current.set(segmentItemId, utteranceId)
+		},
+		[]
+	)
+
+	const removeUtteranceSegmentItemId = useCallback(
+		(utteranceId: string, segmentItemId: string): void => {
+			const segmentItemIdList =
+				subtitleSegmentItemIdListByUtteranceIdRef.current.get(utteranceId) ?? []
+			if (segmentItemIdList.length === 0) return
+			const nextSegmentItemIdList = segmentItemIdList.filter(
+				candidateSegmentItemId => candidateSegmentItemId !== segmentItemId
+			)
+			if (nextSegmentItemIdList.length === 0) {
+				subtitleSegmentItemIdListByUtteranceIdRef.current.delete(utteranceId)
+			} else {
+				subtitleSegmentItemIdListByUtteranceIdRef.current.set(utteranceId, nextSegmentItemIdList)
+			}
+			subtitleUtteranceIdBySegmentItemIdRef.current.delete(segmentItemId)
+		},
+		[]
+	)
+
+	const composeUtteranceSourceText = useCallback((utteranceId: string): string => {
+		const segmentItemIdList = subtitleSegmentItemIdListByUtteranceIdRef.current.get(utteranceId) ?? []
+		let composedSourceText = ''
+		for (const segmentItemId of segmentItemIdList) {
+			const segmentText = normalizeWhitespace(
+				subtitleCommittedSegmentTextByItemIdRef.current.get(segmentItemId) ??
+					subtitleSegmentTextByItemIdRef.current.get(segmentItemId) ??
+					''
+			)
+			if (!segmentText) continue
+			composedSourceText = mergeUtteranceText(composedSourceText, segmentText)
+		}
+		return normalizeWhitespace(composedSourceText)
+	}, [])
+
+	const clearUtteranceSegmentState = useCallback((utteranceId: string): void => {
+		const segmentItemIdList = subtitleSegmentItemIdListByUtteranceIdRef.current.get(utteranceId) ?? []
+		for (const segmentItemId of segmentItemIdList) {
+			subtitleRawSegmentTextByItemIdRef.current.delete(segmentItemId)
+			subtitleSegmentTextByItemIdRef.current.delete(segmentItemId)
+			subtitleCommittedSegmentTextByItemIdRef.current.delete(segmentItemId)
+			subtitleUtteranceIdBySegmentItemIdRef.current.delete(segmentItemId)
+		}
+		subtitleSegmentItemIdListByUtteranceIdRef.current.delete(utteranceId)
+	}, [])
+
 	const upsertSubtitleCard = useCallback(
 		(itemId: string, previousItemId: null | string | undefined, sourceText: string): void => {
 			const normalizedText = normalizeWhitespace(sourceText)
@@ -982,8 +1047,12 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		(patch: SubtitleFinalPatch) => {
 			const normalizedText = sanitizeSubtitleText(patch.text)
 			subtitleRawSegmentTextByItemIdRef.current.delete(patch.itemId)
+			const resolvedUtterance = resolveAudioUtterance(patch.itemId, patch.previousItemId)
+			registerUtteranceSegmentItemId(resolvedUtterance.id, patch.itemId)
 			if (!normalizedText) {
 				subtitleSegmentTextByItemIdRef.current.delete(patch.itemId)
+				subtitleCommittedSegmentTextByItemIdRef.current.delete(patch.itemId)
+				removeUtteranceSegmentItemId(resolvedUtterance.id, patch.itemId)
 				return
 			}
 
@@ -996,6 +1065,8 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			const previousTimestamp = subtitleDedupKeyTimestampByKeyRef.current.get(dedupeKey)
 			if (typeof previousTimestamp === 'number' && now - previousTimestamp < 2500) {
 				subtitleSegmentTextByItemIdRef.current.delete(patch.itemId)
+				subtitleCommittedSegmentTextByItemIdRef.current.delete(patch.itemId)
+				removeUtteranceSegmentItemId(resolvedUtterance.id, patch.itemId)
 				return
 			}
 			subtitleDedupKeyTimestampByKeyRef.current.set(dedupeKey, now)
@@ -1003,18 +1074,10 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				if (now - value > 10_000) subtitleDedupKeyTimestampByKeyRef.current.delete(key)
 			})
 
-			const resolvedUtterance = resolveAudioUtterance(patch.itemId, patch.previousItemId)
-			const existingSourceText = subtitleSourceTextByItemIdRef.current.get(resolvedUtterance.id) ?? ''
-			const segmentText = subtitleSegmentTextByItemIdRef.current.get(patch.itemId) ?? ''
-			const shouldMergeFinalText =
-				!existingSourceText ||
-				!segmentText ||
-				!isEquivalentTranscriptionChunk(segmentText, normalizedText)
-			const mergedSourceText = shouldMergeFinalText
-				? mergeUtteranceText(existingSourceText, normalizedText)
-				: existingSourceText
 			subtitleSegmentTextByItemIdRef.current.delete(patch.itemId)
-			subtitleSourceTextByItemIdRef.current.set(resolvedUtterance.id, mergedSourceText)
+			subtitleCommittedSegmentTextByItemIdRef.current.set(patch.itemId, normalizedText)
+			const composedSourceText = composeUtteranceSourceText(resolvedUtterance.id)
+			subtitleSourceTextByItemIdRef.current.set(resolvedUtterance.id, composedSourceText)
 			subtitlePreviousItemIdByItemIdRef.current.set(resolvedUtterance.id, resolvedUtterance.previousId)
 			subtitleCommittedAtByItemIdRef.current.set(resolvedUtterance.id, patch.committedAt)
 			if (typeof patch.confidence === 'number') {
@@ -1026,7 +1089,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			}
 
 			clearTranslateDraftTimerByItemId(resolvedUtterance.id)
-			upsertSubtitleCard(resolvedUtterance.id, resolvedUtterance.previousId, mergedSourceText)
+			upsertSubtitleCard(resolvedUtterance.id, resolvedUtterance.previousId, composedSourceText)
 			setLiveSubtitleState(previousState => ({
 				...previousState,
 				activeSegmentId: resolvedUtterance.id,
@@ -1038,6 +1101,9 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		},
 		[
 			clearTranslateDraftTimerByItemId,
+			composeUtteranceSourceText,
+			registerUtteranceSegmentItemId,
+			removeUtteranceSegmentItemId,
 			resolveAudioUtterance,
 			scheduleDraftTranslateForItem,
 			scheduleFinalTranslateForItem,
@@ -1156,7 +1222,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			onResultPatch: patch => {
 				clearTranslateDraftTimerByItemId(patch.itemId)
 				clearTranslateFinalTimerByItemId(patch.itemId)
-				subtitleRawSegmentTextByItemIdRef.current.delete(patch.itemId)
+				clearUtteranceSegmentState(patch.itemId)
 				subtitleSourceTextByItemIdRef.current.delete(patch.itemId)
 				subtitlePreviousItemIdByItemIdRef.current.delete(patch.itemId)
 				subtitlePreviousUtteranceIdByUtteranceIdRef.current.delete(patch.itemId)
@@ -1189,6 +1255,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			translateToLanguageCode: translateSettingsRef.current.translateToLanguageCode
 		})
 	}, [
+		clearUtteranceSegmentState,
 		clearReconnectTimer,
 		clearTranslateDraftTimerByItemId,
 		clearTranslateFinalTimerByItemId,
@@ -1234,6 +1301,8 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				const previousRawSegmentText = subtitleRawSegmentTextByItemIdRef.current.get(patch.itemId) ?? ''
 				const nextRawSegmentText = `${previousRawSegmentText}${patch.textDelta}`
 				subtitleRawSegmentTextByItemIdRef.current.set(patch.itemId, nextRawSegmentText)
+				const resolvedUtterance = resolveAudioUtterance(patch.itemId, patch.previousItemId)
+				registerUtteranceSegmentItemId(resolvedUtterance.id, patch.itemId)
 				const sanitizedSegmentText = sanitizeSubtitleText(nextRawSegmentText)
 				if (!sanitizedSegmentText) {
 					subtitleSegmentTextByItemIdRef.current.delete(patch.itemId)
@@ -1247,9 +1316,8 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 					return
 				}
 				subtitleSegmentTextByItemIdRef.current.set(patch.itemId, sanitizedSegmentText)
-				const resolvedUtterance = resolveAudioUtterance(patch.itemId, patch.previousItemId)
 				const previousSourceText = subtitleSourceTextByItemIdRef.current.get(resolvedUtterance.id) ?? ''
-				const mergedSourceText = mergeUtteranceText(previousSourceText, sanitizedSegmentText)
+				const mergedSourceText = composeUtteranceSourceText(resolvedUtterance.id)
 				if (mergedSourceText === previousSourceText) return
 				subtitleSourceTextByItemIdRef.current.set(resolvedUtterance.id, mergedSourceText)
 				subtitlePreviousItemIdByItemIdRef.current.set(
@@ -1279,8 +1347,10 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			voiceInputEnabled: voiceInputEnabledRef.current
 		})
 	}, [
+		composeUtteranceSourceText,
 		clearReconnectTimer,
 		handleTranslateSubtitleFinalPatch,
+		registerUtteranceSegmentItemId,
 		resolveAudioUtterance,
 		scheduleDraftTranslateForItem,
 		scheduleFinalTranslateForItem,
@@ -1402,6 +1472,8 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			clearAllTranslateStreamingTimers()
 			subtitleRawSegmentTextByItemIdRef.current.clear()
 			subtitleSegmentTextByItemIdRef.current.clear()
+			subtitleCommittedSegmentTextByItemIdRef.current.clear()
+			subtitleSegmentItemIdListByUtteranceIdRef.current.clear()
 			subtitleSourceTextByItemIdRef.current.clear()
 			subtitlePreviousItemIdByItemIdRef.current.clear()
 			subtitleUtteranceIdBySegmentItemIdRef.current.clear()
diff --git a/src/realtime/subtitleTranscriptionClient.ts b/src/realtime/subtitleTranscriptionClient.ts
index 3c7f5e9..e0bbc06 100644
--- a/src/realtime/subtitleTranscriptionClient.ts
+++ b/src/realtime/subtitleTranscriptionClient.ts
@@ -162,8 +162,8 @@ function computeRootMeanSquare(sampleList: Float32Array): number {
 	return Math.sqrt(squareSum / sampleList.length)
 }
 
-const manualCommitIntervalMilliseconds = 700
-const minimumCommitAudioDurationMilliseconds = 260
+const manualCommitIntervalMilliseconds = 360
+const minimumCommitAudioDurationMilliseconds = 180
 const speechDetectionHangoverMilliseconds = 220
 const speechDetectionRootMeanSquareThreshold = 0.008
 const transcriptionSampleRateHertz = 24_000

From 112341392f1779458b86deee032e76831e287110 Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Fri, 6 Mar 2026 08:50:08 -0500
Subject: [PATCH 22/24] Add eval flywheel and stabilize realtime flows

---
 .github/workflows/eval-flywheel.yml         |   70 ++
 package.json                                |    4 +
 scripts/evals/defaultScenarios.ts           |  204 ++++
 scripts/evals/judges.ts                     |  689 ++++++++++++
 scripts/evals/manifests/default.matrix.json |   74 ++
 scripts/evals/openAiClient.ts               |  311 ++++++
 scripts/evals/runEvalFlywheel.ts            |  691 ++++++++++++
 scripts/evals/runEvalSuite.ts               | 1087 +++++++++++++++++++
 scripts/evals/runtimeTypes.ts               |   30 +
 scripts/smoke/generateSmokeAudio.ts         |  147 ++-
 src/app/(app)/ChatMode.tsx                  |   27 +
 src/app/(app)/ModeShell.tsx                 |   68 +-
 src/app/actions/realtime.ts                 |  120 +-
 src/evals/contracts.ts                      |  247 +++++
 src/evals/testBus.ts                        |   78 ++
 src/realtime/chatRealtimeClient.ts          |  351 +++++-
 src/realtime/liveTranslateRealtimeClient.ts |   61 +-
 src/realtime/modeRuntimeStore.tsx           |  754 ++++---------
 src/realtime/modelConfig.ts                 |   34 +-
 src/realtime/schemas.ts                     |   49 +
 src/realtime/sessionTypes.ts                |   43 +
 src/realtime/subtitleTranscriptionClient.ts |   49 +-
 src/realtime/translateRuntimeState.ts       |  610 +++++++++++
 23 files changed, 5179 insertions(+), 619 deletions(-)
 create mode 100644 .github/workflows/eval-flywheel.yml
 create mode 100644 scripts/evals/defaultScenarios.ts
 create mode 100644 scripts/evals/judges.ts
 create mode 100644 scripts/evals/manifests/default.matrix.json
 create mode 100644 scripts/evals/openAiClient.ts
 create mode 100644 scripts/evals/runEvalFlywheel.ts
 create mode 100644 scripts/evals/runEvalSuite.ts
 create mode 100644 scripts/evals/runtimeTypes.ts
 create mode 100644 src/evals/contracts.ts
 create mode 100644 src/evals/testBus.ts
 create mode 100644 src/realtime/translateRuntimeState.ts

diff --git a/.github/workflows/eval-flywheel.yml b/.github/workflows/eval-flywheel.yml
new file mode 100644
index 0000000..40de9fe
--- /dev/null
+++ b/.github/workflows/eval-flywheel.yml
@@ -0,0 +1,70 @@
+name: eval-flywheel
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+    inputs:
+      autoprod:
+        description: Promote to production when all gates pass
+        required: false
+        default: false
+        type: boolean
+
+jobs:
+  flywheel:
+    runs-on: ubuntu-latest
+    timeout-minutes: 90
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install Dependencies
+        run: bun install
+
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+
+      - name: Pull Vercel Project Settings
+        run: vercel pull --yes --environment preview --token "$VERCEL_TOKEN"
+        env:
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+
+      - name: Install Playwright Chromium
+        run: bunx playwright install --with-deps chromium
+
+      - name: Generate Eval Audio Fixtures
+        run: bun run eval:prepare-audio
+        env:
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+
+      - name: Run Eval Flywheel
+        run: bun run eval:flywheel
+        env:
+          CI: "true"
+          LILAC_FLYWHEEL_ENABLED: "true"
+          LILAC_FLYWHEEL_AUTOPROD_ENABLED: ${{ github.event.inputs.autoprod || 'false' }}
+          LILAC_FLYWHEEL_BUDGET_USD_LIMIT: "30"
+          LILAC_FLYWHEEL_MAX_PATCH_ATTEMPTS_PER_FAILURE: "1"
+          LILAC_FLYWHEEL_MAX_RUNS_PER_DAY: "8"
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+
+      - name: Upload Eval Artifacts
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: eval-artifacts
+          path: .artifacts/evals
+          if-no-files-found: ignore
diff --git a/package.json b/package.json
index f1073c5..dd71cb0 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,10 @@
 		"db:seed": "prisma db seed",
 		"db:studio": "prisma studio",
 		"dev": "next dev",
+		"eval:flywheel": "bun run scripts/evals/runEvalFlywheel.ts",
+		"eval:live": "bun run scripts/evals/runEvalSuite.ts --target-url https://lilac.chat --candidate-id baseline-prod",
+		"eval:prepare-audio": "bun run smoke:prepare-audio",
+		"eval:preview": "bun run scripts/evals/runEvalSuite.ts --candidate-id workspace-preview",
 		"format": "bun x biome check --write .",
 		"smoke:live": "bun run scripts/smoke/runLiveConversationSmoke.ts --target-url https://lilac.chat",
 		"smoke:local": "bun run scripts/smoke/runLiveConversationSmoke.ts --target-url http://localhost:3000 --skip-vercel-logs --skip-chat",
diff --git a/scripts/evals/defaultScenarios.ts b/scripts/evals/defaultScenarios.ts
new file mode 100644
index 0000000..e5d6cce
--- /dev/null
+++ b/scripts/evals/defaultScenarios.ts
@@ -0,0 +1,204 @@
+import { resolve } from 'node:path'
+
+import { type EvalScenarioSpec, EvalScenarioSpecSchema } from '@/evals/contracts'
+
+const fixturesDirectoryPath = resolve(process.cwd(), '.artifacts/smoke/fixtures')
+
+const scenarioList = [
+	{
+		expectedAssistantMeaning:
+			'The assistant should acknowledge the user and offer help practicing Ukrainian.',
+		expectedUiStates: ['chat_transcript_visible', 'assistant_response_visible'],
+		id: 'chat_typed_practice_ukrainian',
+		inputType: 'text',
+		languageExpectation: {},
+		latencyBands: {
+			assistantTextFirstMs: 20_000
+		},
+		mode: 'chat',
+		typedText: 'Hello. Can you help me practice Ukrainian today?'
+	},
+	{
+		audioFixturePath: resolve(fixturesDirectoryPath, 'chat_question_en.fixture.wav'),
+		expectedAssistantMeaning:
+			'The assistant should respond helpfully to a request for Ukrainian practice.',
+		expectedUiStates: [
+			'chat_transcript_visible',
+			'assistant_response_visible',
+			'assistant_audio_started'
+		],
+		expectedUserTranscript: 'Hello Lilac. Can you help me practice Ukrainian today?',
+		id: 'chat_audio_practice_ukrainian',
+		inputType: 'audio',
+		languageExpectation: {
+			inputLanguageCode: 'en',
+			outputLanguageCode: 'en'
+		},
+		latencyBands: {
+			assistantAudioStartMs: 20_000,
+			assistantTextFirstMs: 20_000
+		},
+		mode: 'chat'
+	},
+	{
+		expectedTranslationMeaning:
+			'The translation should preserve the meaning of asking whether someone saw the news.',
+		expectedUiStates: [
+			'translate_card_visible',
+			'draft_translation_visible',
+			'final_translation_visible'
+		],
+		expectedUserTranscript: 'Hello. I was wondering if you saw the news.',
+		id: 'translate_typed_en_to_es',
+		inputType: 'text',
+		languageExpectation: {
+			pair: {
+				from: 'en',
+				to: 'es'
+			}
+		},
+		latencyBands: {
+			finalOutputMs: 12_000,
+			firstVisibleDraftMs: 6_000
+		},
+		mode: 'translate',
+		typedText: 'Hello. I was wondering if you saw the news.'
+	},
+	{
+		audioFixturePath: resolve(fixturesDirectoryPath, 'translate_en_simple.fixture.wav'),
+		expectedTranslationMeaning:
+			'The translation should preserve the meaning of asking whether someone saw the news.',
+		expectedUiStates: [
+			'translate_card_visible',
+			'draft_translation_visible',
+			'final_translation_visible'
+		],
+		expectedUserTranscript: 'Hello. I was wondering if you saw the news.',
+		id: 'translate_audio_en_to_es',
+		inputType: 'audio',
+		languageExpectation: {
+			pair: {
+				from: 'en',
+				to: 'es'
+			}
+		},
+		latencyBands: {
+			finalOutputMs: 15_000,
+			firstVisibleDraftMs: 7_000,
+			firstVisibleSourceMs: 4_000
+		},
+		mode: 'translate'
+	},
+	{
+		audioFixturePath: resolve(fixturesDirectoryPath, 'translate_uk_simple.fixture.wav'),
+		expectedTranslationMeaning:
+			'The translation should preserve the meaning of asking whether someone saw the news.',
+		expectedUiStates: [
+			'translate_card_visible',
+			'draft_translation_visible',
+			'final_translation_visible'
+		],
+		expectedUserTranscript: 'Привіт. Мені було цікаво, чи бачив ти новини.',
+		id: 'translate_audio_uk_to_en',
+		inputType: 'audio',
+		languageExpectation: {
+			pair: {
+				from: 'uk',
+				to: 'en'
+			}
+		},
+		latencyBands: {
+			finalOutputMs: 15_000,
+			firstVisibleDraftMs: 7_000,
+			firstVisibleSourceMs: 4_000
+		},
+		mode: 'translate'
+	},
+	{
+		audioFixturePath: resolve(fixturesDirectoryPath, 'translate_es_simple.fixture.wav'),
+		expectedTranslationMeaning:
+			'The translation should preserve the meaning of asking whether someone saw the news.',
+		expectedUiStates: [
+			'translate_card_visible',
+			'draft_translation_visible',
+			'final_translation_visible'
+		],
+		expectedUserTranscript: 'Hola. Me preguntaba si viste las noticias.',
+		id: 'translate_audio_es_to_en',
+		inputType: 'audio',
+		languageExpectation: {
+			pair: {
+				from: 'es',
+				to: 'en'
+			}
+		},
+		latencyBands: {
+			finalOutputMs: 15_000,
+			firstVisibleDraftMs: 7_000,
+			firstVisibleSourceMs: 4_000
+		},
+		mode: 'translate'
+	},
+	{
+		audioFixturePath: resolve(fixturesDirectoryPath, 'translate_en_long.fixture.wav'),
+		expectedTranslationMeaning:
+			'The translation should preserve a longer explanation about live evaluation, chunk replacement, and translation quality.',
+		expectedUiStates: [
+			'translate_card_visible',
+			'draft_translation_visible',
+			'final_translation_visible'
+		],
+		expectedUserTranscript:
+			'Hello there. This is a longer Lilac translation evaluation. I am speaking continuously so the subtitle system can be measured for live updates, chunk replacement, and final translation quality over a longer turn.',
+		id: 'translate_audio_en_long_to_es',
+		inputType: 'audio',
+		languageExpectation: {
+			pair: {
+				from: 'en',
+				to: 'es'
+			}
+		},
+		latencyBands: {
+			finalOutputMs: 18_000,
+			firstVisibleDraftMs: 8_000,
+			firstVisibleSourceMs: 4_000
+		},
+		mode: 'translate'
+	},
+	{
+		audioFixturePath: resolve(fixturesDirectoryPath, 'translate_en_fillers_noisy.fixture.wav'),
+		expectedTranslationMeaning:
+			'The translation should preserve the meaning of greeting someone and asking whether they saw the news despite filler words and mild background noise.',
+		expectedUiStates: [
+			'translate_card_visible',
+			'draft_translation_visible',
+			'final_translation_visible'
+		],
+		expectedUserTranscript:
+			'Um hello. So the other day, um, I was wondering, um, did you see the news?',
+		id: 'translate_audio_en_noisy_fillers_to_es',
+		inputType: 'audio',
+		languageExpectation: {
+			pair: {
+				from: 'en',
+				to: 'es'
+			}
+		},
+		latencyBands: {
+			finalOutputMs: 16_000,
+			firstVisibleDraftMs: 8_000,
+			firstVisibleSourceMs: 4_500
+		},
+		mode: 'translate'
+	}
+] satisfies EvalScenarioSpec[]
+
+export const defaultEvalScenarioList = scenarioList.map(scenario =>
+	EvalScenarioSpecSchema.parse(scenario)
+)
+
+export function resolveEvalScenarioList(scenarioIdList?: string[]): EvalScenarioSpec[] {
+	if (!scenarioIdList || scenarioIdList.length === 0) return defaultEvalScenarioList
+	const wantedScenarioIdSet = new Set(scenarioIdList)
+	return defaultEvalScenarioList.filter(scenario => wantedScenarioIdSet.has(scenario.id))
+}
diff --git a/scripts/evals/judges.ts b/scripts/evals/judges.ts
new file mode 100644
index 0000000..e517f4c
--- /dev/null
+++ b/scripts/evals/judges.ts
@@ -0,0 +1,689 @@
+import { readdir } from 'node:fs/promises'
+import { join } from 'node:path'
+import { z } from 'zod'
+import {
+	EvalScorecardSchema,
+	type FlywheelPatchProposal,
+	FlywheelPatchProposalSchema,
+	type JudgeFinding,
+	type JudgeResult,
+	JudgeResultSchema
+} from '@/evals/contracts'
+import {
+	createChatCompletionJson,
+	createResponsesJson,
+	readAudioFileAsBase64,
+	transcribeAudioFile
+} from './openAiClient'
+import type { ScenarioJudgment, ScenarioObservation } from './runtimeTypes'
+
+const genericServerComponentErrorText =
+	'An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details.'
+const trackedProtocolPatternList = [
+	/Unsupported parameter/i,
+	/Unknown parameter/i,
+	/Missing required parameter/i,
+	/No valid publish_translation tool call/i,
+	/No publish_translation tool call was returned/i,
+	/Invalid 'item\.id'/i,
+	/buffer too small/i,
+	/Unhandled/i
+]
+
+const LooseJudgeFindingSchema = z.object({
+	code: z.string().min(1),
+	details: z.string().min(1),
+	severity: z.string().min(1)
+})
+
+const LooseModelJudgeSchema = z.object({
+	confidence: z.union([z.number(), z.string()]).optional(),
+	findings: z.array(LooseJudgeFindingSchema).default([]),
+	passed: z.union([z.boolean(), z.string()]).optional(),
+	rationale: z.string().min(1),
+	score: z.union([z.number(), z.string()]).optional()
+})
+
+const VisualUiJudgeSchema = LooseModelJudgeSchema
+const SemanticJudgeSchema = LooseModelJudgeSchema
+
+const RootCauseSynthesisSchema = z.object({
+	allowlistedSurfaceList: z.array(z.string().min(1)).min(1),
+	confidence: z.number().min(0).max(1),
+	failureClusterIds: z.array(z.string().min(1)).min(1),
+	filePathList: z.array(z.string().min(1)).default([]),
+	prompt: z.string().min(1),
+	reasoning: z.string().min(1),
+	summary: z.string().min(1)
+})
+
+type ChatTranscriptEvent = Extract<
+	ScenarioObservation['testBusEventList'][number],
+	{ eventType: 'chat_transcript_patch' }
+>
+type TranslateCardEvent = Extract<
+	ScenarioObservation['testBusEventList'][number],
+	{ eventType: 'translate_card_patch' }
+>
+
+function isChatTranscriptEvent(
+	event: ScenarioObservation['testBusEventList'][number]
+): event is ChatTranscriptEvent {
+	return event.eventType === 'chat_transcript_patch'
+}
+
+function isTranslateCardEvent(
+	event: ScenarioObservation['testBusEventList'][number]
+): event is TranslateCardEvent {
+	return event.eventType === 'translate_card_patch'
+}
+
+function normalizeWhitespace(value: string): string {
+	return value.replace(/\s+/g, ' ').trim()
+}
+
+function canonicalizeText(value: string): string {
+	const normalizedValue = normalizeWhitespace(value).toLowerCase()
+	let canonicalValue = ''
+	for (const character of normalizedValue) {
+		const isAsciiDigit = character >= '0' && character <= '9'
+		const isUnicodeLetter = character.toLowerCase() !== character.toUpperCase()
+		const isSpace = character === ' '
+		if (isAsciiDigit || isUnicodeLetter || isSpace) {
+			canonicalValue += character
+		}
+	}
+	return canonicalValue
+}
+
+function computeTokenOverlapScore(expectedText: string, observedText: string): number {
+	const expectedTokenList = canonicalizeText(expectedText).split(' ').filter(Boolean)
+	const observedTokenList = canonicalizeText(observedText).split(' ').filter(Boolean)
+	if (expectedTokenList.length === 0 || observedTokenList.length === 0) return 0
+	const observedTokenSet = new Set(observedTokenList)
+	let sharedTokenCount = 0
+	for (const expectedToken of expectedTokenList) {
+		if (observedTokenSet.has(expectedToken)) sharedTokenCount += 1
+	}
+	return Math.min(1, sharedTokenCount / expectedTokenList.length)
+}
+
+function createJudgeResult(input: JudgeResult): JudgeResult {
+	return JudgeResultSchema.parse(input)
+}
+
+function normalizeJudgeScore(value: number): number {
+	if (!Number.isFinite(value)) return 0
+	if (value > 1 && value <= 10) return Math.max(0, Math.min(1, value / 10))
+	if (value > 10 && value <= 100) return Math.max(0, Math.min(1, value / 100))
+	return Math.max(0, Math.min(1, value))
+}
+
+function parseNumberLikeValue(value: number | string | undefined): number {
+	if (typeof value === 'number') return value
+	if (typeof value === 'string') {
+		const trimmedValue = value.trim().replace(/%$/, '')
+		const parsedValue = Number.parseFloat(trimmedValue)
+		return Number.isFinite(parsedValue) ? parsedValue : 0
+	}
+	return 0
+}
+
+function parseBooleanLikeValue(
+	value: boolean | string | undefined,
+	fallbackValue: boolean
+): boolean {
+	if (typeof value === 'boolean') return value
+	if (typeof value === 'string') {
+		const normalizedValue = value.trim().toLowerCase()
+		if (normalizedValue === 'true' || normalizedValue === 'pass' || normalizedValue === 'passed')
+			return true
+		if (normalizedValue === 'false' || normalizedValue === 'fail' || normalizedValue === 'failed')
+			return false
+	}
+	return fallbackValue
+}
+
+function containsNegativeJudgmentSignal(value: string): boolean {
+	const normalizedValue = value.toLowerCase()
+	return (
+		normalizedValue.includes('no ') ||
+		normalizedValue.includes('not ') ||
+		normalizedValue.includes('missing') ||
+		normalizedValue.includes('cannot') ||
+		normalizedValue.includes('impossible') ||
+		normalizedValue.includes('failed') ||
+		normalizedValue.includes('did not')
+	)
+}
+
+function containsPositiveJudgmentSignal(value: string): boolean {
+	const normalizedValue = value.toLowerCase()
+	return (
+		normalizedValue.includes('accurate') ||
+		normalizedValue.includes('appropriate') ||
+		normalizedValue.includes('clear') ||
+		normalizedValue.includes('correct') ||
+		normalizedValue.includes('good') ||
+		normalizedValue.includes('intuitive') ||
+		normalizedValue.includes('logical') ||
+		normalizedValue.includes('preserve') ||
+		normalizedValue.includes('readable')
+	)
+}
+
+function normalizeJudgeSeverity(value: string): JudgeFinding['severity'] {
+	const normalizedValue = value.trim().toLowerCase()
+	if (normalizedValue.includes('high') || normalizedValue.includes('critical')) return 'high'
+	if (normalizedValue.includes('med')) return 'medium'
+	return 'low'
+}
+
+function normalizeLooseJudgeResult(
+	input: z.infer<typeof LooseModelJudgeSchema>,
+	judgeId: string
+): JudgeResult {
+	const normalizedScore = normalizeJudgeScore(parseNumberLikeValue(input.score))
+	let normalizedConfidence = normalizeJudgeScore(parseNumberLikeValue(input.confidence))
+	const normalizedFindingList = input.findings.map(finding => ({
+		code: finding.code,
+		details: finding.details,
+		severity: normalizeJudgeSeverity(finding.severity)
+	}))
+	const hasHighSeverityFinding = normalizedFindingList.some(finding => finding.severity === 'high')
+	const hasMediumSeverityFinding = normalizedFindingList.some(
+		finding => finding.severity === 'medium'
+	)
+	const hasNegativeRationale = containsNegativeJudgmentSignal(input.rationale)
+	const hasPositiveRationale = containsPositiveJudgmentSignal(input.rationale)
+	let normalizedPassed = parseBooleanLikeValue(
+		input.passed,
+		normalizedScore >= 0.7 && !hasHighSeverityFinding
+	)
+	let effectiveScore = normalizedScore
+	if (!hasHighSeverityFinding && !hasNegativeRationale) {
+		if (
+			!normalizedPassed &&
+			(hasPositiveRationale ||
+				normalizedFindingList.length === 0 ||
+				normalizedFindingList.every(finding => finding.severity === 'low'))
+		) {
+			normalizedPassed = true
+		}
+		if (normalizedPassed && effectiveScore < 0.7) {
+			effectiveScore = hasMediumSeverityFinding ? 0.72 : 0.85
+		}
+		if (normalizedPassed && normalizedConfidence === 0 && hasPositiveRationale) {
+			normalizedConfidence = 0.8
+		}
+	}
+	if (hasHighSeverityFinding && !hasPositiveRationale) {
+		normalizedPassed = false
+		effectiveScore = Math.min(effectiveScore, 0.35)
+	}
+	if (hasNegativeRationale && hasHighSeverityFinding) {
+		normalizedPassed = false
+	}
+	return createJudgeResult({
+		confidence: normalizedConfidence,
+		findings: normalizedFindingList,
+		judgeId,
+		passed: normalizedPassed,
+		rationale: input.rationale,
+		score: effectiveScore
+	})
+}
+
+function createFinding(
+	code: string,
+	details: string,
+	severity: JudgeFinding['severity']
+): JudgeFinding {
+	return {
+		code,
+		details,
+		severity
+	}
+}
+
+function collectAppHeardText(observation: ScenarioObservation): string {
+	if (observation.scenario.mode === 'chat') {
+		const userTranscriptEventList = observation.testBusEventList
+			.filter(isChatTranscriptEvent)
+			.filter(event => event.role === 'user')
+		const latestEvent = userTranscriptEventList[userTranscriptEventList.length - 1]
+		return latestEvent?.text ?? ''
+	}
+	const translateEventList = observation.testBusEventList.filter(isTranslateCardEvent)
+	const latestTranslateEvent = translateEventList[translateEventList.length - 1]
+	return latestTranslateEvent?.sourceText ?? ''
+}
+
+function collectAssistantVisibleText(observation: ScenarioObservation): string {
+	if (observation.scenario.mode === 'chat') {
+		const assistantTranscriptEventList = observation.testBusEventList
+			.filter(isChatTranscriptEvent)
+			.filter(event => event.role === 'assistant')
+		return assistantTranscriptEventList
+			.map(event => event.text)
+			.join('\n')
+			.trim()
+	}
+	const translateEventList = observation.testBusEventList.filter(isTranslateCardEvent)
+	const latestTranslateEvent = translateEventList[translateEventList.length - 1]
+	return latestTranslateEvent?.targetText ?? ''
+}
+
+async function readLatestScreenshotPathList(screenshotDirectoryPath: string): Promise<string[]> {
+	const directoryEntryList = await readdir(screenshotDirectoryPath, { withFileTypes: true })
+	return directoryEntryList
+		.filter(directoryEntry => directoryEntry.isFile() && directoryEntry.name.endsWith('.png'))
+		.map(directoryEntry => join(screenshotDirectoryPath, directoryEntry.name))
+		.sort()
+		.slice(-3)
+}
+
+export async function runHardGuardrailJudge(
+	observation: ScenarioObservation
+): Promise<ScenarioJudgment> {
+	const findingList: JudgeFinding[] = []
+	const failureClusterReasonList: ScenarioJudgment['failureClusterReasonList'] = []
+	const bodyText = observation.bodyText
+
+	if (bodyText.includes(genericServerComponentErrorText)) {
+		findingList.push(
+			createFinding(
+				'generic_server_component_error',
+				'Generic Server Components error text was rendered in the UI.',
+				'high'
+			)
+		)
+	}
+
+	for (const protocolPattern of trackedProtocolPatternList) {
+		if (!protocolPattern.test(bodyText)) continue
+		findingList.push(
+			createFinding(
+				'protocol_text_rendered',
+				`User-visible protocol text matched ${protocolPattern.source}.`,
+				'high'
+			)
+		)
+	}
+
+	for (const runtimeLogMatch of observation.runtimeLogMatchList) {
+		findingList.push(
+			createFinding('runtime_log_error', `Runtime log matched: ${runtimeLogMatch}`, 'high')
+		)
+	}
+
+	for (const harnessFailure of observation.harnessFailureList) {
+		findingList.push(
+			createFinding('eval_harness_failure', `Scenario harness failed: ${harnessFailure}`, 'high')
+		)
+	}
+
+	if (observation.errorTextList.length > 0) {
+		for (const errorText of observation.errorTextList) {
+			findingList.push(createFinding('visible_error_banner', errorText, 'medium'))
+		}
+	}
+
+	switch (observation.scenario.mode) {
+		case 'chat': {
+			const userTranscriptEventList = observation.testBusEventList
+				.filter(isChatTranscriptEvent)
+				.filter(event => event.role === 'user')
+			const assistantTranscriptEventList = observation.testBusEventList
+				.filter(isChatTranscriptEvent)
+				.filter(event => event.role === 'assistant')
+			if (userTranscriptEventList.length === 0) {
+				findingList.push(
+					createFinding(
+						'missing_user_transcript',
+						'No user transcript was captured in chat mode.',
+						'high'
+					)
+				)
+			}
+			if (assistantTranscriptEventList.length === 0) {
+				findingList.push(
+					createFinding(
+						'missing_assistant_response',
+						'No assistant response was captured in chat mode.',
+						'high'
+					)
+				)
+			}
+			const firstUserEvent = userTranscriptEventList[0]
+			const firstAssistantEvent = assistantTranscriptEventList[0]
+			if (
+				firstUserEvent &&
+				firstAssistantEvent &&
+				firstAssistantEvent.occurredAt < firstUserEvent.occurredAt
+			) {
+				findingList.push(
+					createFinding(
+						'chat_ordering_violation',
+						'Assistant transcript arrived before the user transcript slot.',
+						'high'
+					)
+				)
+			}
+			break
+		}
+		case 'translate': {
+			const translateCardEventList = observation.testBusEventList.filter(isTranslateCardEvent)
+			if (translateCardEventList.length === 0) {
+				findingList.push(
+					createFinding('missing_translate_card', 'No translate card patch was observed.', 'high')
+				)
+				break
+			}
+			const hasDraft = translateCardEventList.some(event => event.renderState === 'draft')
+			const hasFinal = translateCardEventList.some(event => event.renderState === 'final')
+			if (!hasDraft) {
+				findingList.push(
+					createFinding('missing_translate_draft', 'No draft translation state was observed.', 'medium')
+				)
+			}
+			if (!hasFinal) {
+				findingList.push(
+					createFinding('missing_translate_final', 'No final translation state was observed.', 'high')
+				)
+			}
+			break
+		}
+	}
+
+	for (const [metricKey, maxLatencyMilliseconds] of Object.entries(
+		observation.scenario.latencyBands
+	)) {
+		const observedLatency = observation.latencyMetrics[metricKey]
+		if (typeof observedLatency !== 'number' || typeof maxLatencyMilliseconds !== 'number') continue
+		if (observedLatency <= maxLatencyMilliseconds) continue
+		findingList.push(
+			createFinding(
+				'latency_regression',
+				`${metricKey} exceeded threshold (${observedLatency}ms > ${maxLatencyMilliseconds}ms).`,
+				'medium'
+			)
+		)
+	}
+
+	if (findingList.length > 0) {
+		failureClusterReasonList.push({
+			reason: 'Deterministic guardrail failures were detected.',
+			severity: 'high'
+		})
+	}
+
+	const passed = findingList.every(finding => finding.severity !== 'high')
+	const score = passed ? (findingList.length === 0 ? 1 : 0.75) : 0
+
+	return {
+		failureClusterReasonList,
+		hardGateFindingList: findingList,
+		judgeResultList: [
+			createJudgeResult({
+				confidence: 1,
+				findings: findingList,
+				judgeId: 'hard_guardrail_judge',
+				passed,
+				rationale: passed
+					? 'Deterministic guardrails passed.'
+					: 'Deterministic guardrails detected blocking issues.',
+				score
+			})
+		]
+	}
+}
+
+export async function runAudioInputReferenceJudge(
+	observation: ScenarioObservation
+): Promise<JudgeResult> {
+	if (observation.scenario.inputType === 'text' || !observation.scenario.audioFixturePath) {
+		return createJudgeResult({
+			confidence: 1,
+			findings: [],
+			judgeId: 'audio_input_reference_judge',
+			passed: true,
+			rationale: 'Scenario does not use audio input.',
+			score: 1
+		})
+	}
+	const referenceTranscript = await transcribeAudioFile({
+		audioFilePath: observation.scenario.audioFixturePath,
+		model: 'gpt-4o-transcribe'
+	})
+	const expectedTranscript = observation.scenario.expectedUserTranscript ?? referenceTranscript
+	const appHeardText = collectAppHeardText(observation)
+	const referenceScore = computeTokenOverlapScore(expectedTranscript, referenceTranscript)
+	const appScore = computeTokenOverlapScore(expectedTranscript, appHeardText)
+	const passed = appScore >= 0.65
+	const findingList: JudgeFinding[] = []
+	if (!passed) {
+		findingList.push(
+			createFinding(
+				'audio_input_mismatch',
+				`App heard text diverged from expected transcript. expected="${expectedTranscript}" observed="${appHeardText}" reference="${referenceTranscript}"`,
+				'medium'
+			)
+		)
+	}
+	return createJudgeResult({
+		confidence: Math.max(referenceScore, 0.7),
+		findings: findingList,
+		judgeId: 'audio_input_reference_judge',
+		passed,
+		rationale: `Reference ASR similarity=${referenceScore.toFixed(2)}; app-heard similarity=${appScore.toFixed(2)}.`,
+		score: Math.max(0, Math.min(1, (referenceScore + appScore) / 2))
+	})
+}
+
+export async function runAudioOutputListenerJudge(
+	observation: ScenarioObservation
+): Promise<JudgeResult> {
+	if (!observation.assistantAudioArtifactPath) {
+		return createJudgeResult({
+			confidence: 1,
+			findings: [],
+			judgeId: 'audio_output_listener_judge',
+			passed: true,
+			rationale: 'No assistant audio artifact was captured for this scenario.',
+			score: 1
+		})
+	}
+
+	const visibleAssistantText = collectAssistantVisibleText(observation)
+	const base64Audio = await readAudioFileAsBase64(observation.assistantAudioArtifactPath)
+	const result = await createChatCompletionJson({
+		maxCompletionTokens: 700,
+		messageList: [
+			{
+				content: [
+					{
+						text:
+							'You are grading spoken assistant audio for an end-to-end app eval. Return JSON only with keys passed, score, confidence, rationale, findings. Score is 0 to 1. Findings is a list of {code, severity, details}. Judge whether the spoken audio is intelligible, matches the visible transcript, preserves the expected meaning, avoids repetition, and is not truncated.',
+						type: 'text'
+					}
+				],
+				role: 'system'
+			},
+			{
+				content: [
+					{
+						text: `Expected meaning: ${observation.scenario.expectedAssistantMeaning ?? 'Not provided'}\nVisible transcript: ${visibleAssistantText || 'None'}\nJSON only.`,
+						type: 'text'
+					},
+					{
+						input_audio: {
+							data: base64Audio,
+							format: 'wav'
+						},
+						type: 'input_audio'
+					}
+				],
+				role: 'user'
+			}
+		],
+		model: 'gpt-audio-1.5',
+		responseSchema: LooseModelJudgeSchema
+	})
+	return normalizeLooseJudgeResult(result, 'audio_output_listener_judge')
+}
+
+export async function runVisualUiJudge(observation: ScenarioObservation): Promise<JudgeResult> {
+	const screenshotPathList = await readLatestScreenshotPathList(
+		observation.artifactBundle.screenshotDirectoryPath
+	)
+	if (screenshotPathList.length === 0) {
+		return createJudgeResult({
+			confidence: 1,
+			findings: [],
+			judgeId: 'visual_ui_judge',
+			passed: true,
+			rationale: 'No screenshots were available for visual grading.',
+			score: 1
+		})
+	}
+	const contentList: Array<Record<string, unknown>> = [
+		{
+			text:
+				'You are grading UI screenshots for a voice app. Return JSON only with keys passed, score, confidence, rationale, findings. Findings is a list of {code, severity, details}. Judge clipping, unreadable contrast, broken loading states, layout overflow, and whether the UI hierarchy is understandable for a consumer app.',
+			type: 'text'
+		}
+	]
+	for (const screenshotPath of screenshotPathList) {
+		const base64Image = await readAudioFileAsBase64(screenshotPath)
+		contentList.push({
+			image_url: {
+				url: `data:image/png;base64,${base64Image}`
+			},
+			type: 'image_url'
+		})
+	}
+	contentList.push({
+		text: `Visible DOM text excerpt:\n${observation.bodyText.slice(0, 4000)}\nJSON only.`,
+		type: 'text'
+	})
+	const result = await createChatCompletionJson({
+		maxCompletionTokens: 700,
+		messageList: [
+			{
+				content: contentList,
+				role: 'user'
+			}
+		],
+		model: 'gpt-4.1',
+		responseSchema: VisualUiJudgeSchema
+	})
+	return normalizeLooseJudgeResult(result, 'visual_ui_judge')
+}
+
+export async function runSemanticConversationJudge(
+	observation: ScenarioObservation
+): Promise<JudgeResult> {
+	const appHeardText = collectAppHeardText(observation)
+	const assistantVisibleText = collectAssistantVisibleText(observation)
+	const promptText = [
+		'You are grading whether the app preserved meaning and direction.',
+		'Return JSON only with keys passed, score, confidence, rationale, findings.',
+		'Findings is a list of {code, severity, details}.',
+		`Mode: ${observation.scenario.mode}`,
+		`Expected user transcript: ${observation.scenario.expectedUserTranscript ?? 'Not provided'}`,
+		`Expected assistant meaning: ${observation.scenario.expectedAssistantMeaning ?? 'Not provided'}`,
+		`Expected translation meaning: ${observation.scenario.expectedTranslationMeaning ?? 'Not provided'}`,
+		`Observed user transcript/source: ${appHeardText || 'None'}`,
+		`Observed assistant/translation text: ${assistantVisibleText || 'None'}`,
+		'Judge semantic preservation, language direction, and conversational appropriateness.'
+	].join('\n')
+	const result = await createChatCompletionJson({
+		maxCompletionTokens: 700,
+		messageList: [
+			{
+				content: promptText,
+				role: 'user'
+			}
+		],
+		model: 'gpt-4.1',
+		responseSchema: SemanticJudgeSchema
+	})
+	return normalizeLooseJudgeResult(result, 'semantic_conversation_judge')
+}
+
+export async function synthesizeRootCausePatchProposal(input: {
+	candidateId: string
+	failureClusterIdList: string[]
+	observationList: ScenarioObservation[]
+}): Promise<FlywheelPatchProposal> {
+	const observationExcerptList = input.observationList.map(observation => ({
+		assistantVisibleText: collectAssistantVisibleText(observation).slice(0, 500),
+		bodyText: observation.bodyText.slice(0, 1200),
+		errorTextList: observation.errorTextList,
+		latencyMetrics: observation.latencyMetrics,
+		runtimeLogMatchList: observation.runtimeLogMatchList,
+		scenarioId: observation.scenario.id
+	}))
+	const result = await createResponsesJson({
+		inputList: [
+			{
+				content: [
+					{
+						text:
+							'You are Codex generating one bounded patch proposal for a failing voice-app eval run. Return JSON only with keys confidence, failureClusterIds, filePathList, prompt, reasoning, summary, allowlistedSurfaceList. The proposal must touch only allowlisted product surfaces such as prompts, model manifests, timing thresholds, reducer logic, realtime client state machines, smoke/eval instrumentation, or targeted UI fixes. Do not propose auth, billing, database, or broad dependency changes.',
+						type: 'input_text'
+					},
+					{
+						text: `Candidate ID: ${input.candidateId}\nFailure cluster IDs: ${JSON.stringify(input.failureClusterIdList)}\nObserved failures: ${JSON.stringify(observationExcerptList)}\nReturn JSON only.`,
+						type: 'input_text'
+					}
+				],
+				role: 'user'
+			}
+		],
+		maxOutputTokens: 1200,
+		model: 'gpt-5.3-codex',
+		responseSchema: RootCauseSynthesisSchema
+	})
+	return FlywheelPatchProposalSchema.parse({
+		allowlistedSurfaceList: result.allowlistedSurfaceList,
+		confidence: result.confidence,
+		failureClusterIds: result.failureClusterIds,
+		filePathList: result.filePathList,
+		prompt: result.prompt,
+		summary: `${result.summary}\n\n${result.reasoning}`
+	})
+}
+
+export function buildScenarioScorecard(input: {
+	hardGateFindingList: JudgeFinding[]
+	judgeResultList: JudgeResult[]
+}): ReturnType<typeof EvalScorecardSchema.parse> {
+	const aggregateScore =
+		input.judgeResultList.reduce((scoreSum, judgeResult) => scoreSum + judgeResult.score, 0) /
+		Math.max(1, input.judgeResultList.length)
+	const hasHighSeverityHardGate = input.hardGateFindingList.some(
+		finding => finding.severity === 'high'
+	)
+	const hasBlockingJudgeFinding = input.judgeResultList.some(judgeResult =>
+		judgeResult.findings.some(finding => finding.severity === 'high')
+	)
+	const hasFailedJudge = input.judgeResultList.some(judgeResult => !judgeResult.passed)
+	const releaseDecision = hasHighSeverityHardGate
+		? 'block'
+		: hasBlockingJudgeFinding || hasFailedJudge
+			? 'block'
+			: aggregateScore >= 0.92
+				? 'promote'
+				: aggregateScore >= 0.75
+					? 'candidate'
+					: 'block'
+	return EvalScorecardSchema.parse({
+		aggregateScore: Math.round(aggregateScore * 1000) / 1000,
+		hardGateResults: input.hardGateFindingList,
+		judgeResults: input.judgeResultList,
+		regressionDeltas: {},
+		releaseDecision
+	})
+}
diff --git a/scripts/evals/manifests/default.matrix.json b/scripts/evals/manifests/default.matrix.json
new file mode 100644
index 0000000..04efe18
--- /dev/null
+++ b/scripts/evals/manifests/default.matrix.json
@@ -0,0 +1,74 @@
+{
+	"baseline": {
+		"asrModelSlug": "gpt-4o-transcribe",
+		"buildEnvironmentOverrides": {},
+		"chatTurnOrderingProfile": "slot_reconciliation",
+		"featureFlags": {
+			"lilac_translate_streaming_v2": true
+		},
+		"id": "baseline-prod",
+		"label": "Production baseline",
+		"promptVersionIds": {
+			"chat": "current",
+			"translate": "current"
+		},
+		"realtimeModelSlug": "gpt-realtime-1.5",
+		"translateLanguageGroundingMode": "pair_locked"
+	},
+	"candidateList": [
+		{
+			"asrModelSlug": "gpt-4o-transcribe",
+			"buildEnvironmentOverrides": {},
+			"chatTurnOrderingProfile": "slot_reconciliation",
+			"featureFlags": {
+				"lilac_translate_streaming_v2": true
+			},
+			"id": "workspace-preview",
+			"label": "Workspace preview",
+			"promptVersionIds": {
+				"chat": "current",
+				"translate": "current"
+			},
+			"realtimeModelSlug": "gpt-realtime-1.5",
+			"translateLanguageGroundingMode": "pair_locked"
+		},
+		{
+			"asrModelSlug": "gpt-4o-transcribe-latest",
+			"buildEnvironmentOverrides": {},
+			"chatTurnOrderingProfile": "slot_reconciliation",
+			"featureFlags": {
+				"lilac_translate_streaming_v2": true
+			},
+			"id": "asr-latest",
+			"label": "ASR latest candidate",
+			"promptVersionIds": {
+				"chat": "current",
+				"translate": "current"
+			},
+			"realtimeModelSlug": "gpt-realtime-1.5",
+			"translateCommitIntervalMilliseconds": 820,
+			"translateLanguageGroundingMode": "pair_locked",
+			"translateMinimumCommitAudioMilliseconds": 300
+		},
+		{
+			"asrModelSlug": "gpt-4o-mini-transcribe",
+			"buildEnvironmentOverrides": {},
+			"chatTurnOrderingProfile": "slot_reconciliation",
+			"featureFlags": {
+				"lilac_translate_streaming_v2": true
+			},
+			"id": "asr-mini-fast",
+			"label": "ASR mini candidate",
+			"promptVersionIds": {
+				"chat": "current",
+				"translate": "balanced"
+			},
+			"realtimeModelSlug": "gpt-realtime-1.5",
+			"translateCommitIntervalMilliseconds": 700,
+			"translateLanguageGroundingMode": "pair_locked",
+			"translateMinimumCommitAudioMilliseconds": 260
+		}
+	],
+	"id": "lilac-default",
+	"version": 1
+}
diff --git a/scripts/evals/openAiClient.ts b/scripts/evals/openAiClient.ts
new file mode 100644
index 0000000..a52b1d5
--- /dev/null
+++ b/scripts/evals/openAiClient.ts
@@ -0,0 +1,311 @@
+import { readFile } from 'node:fs/promises'
+import { basename } from 'node:path'
+
+import { z } from 'zod'
+
+type OpenAiJsonResponse = Record<string, unknown>
+
+type CreateChatCompletionJsonInput<Schema extends z.ZodType> = {
+	maxCompletionTokens?: number
+	messageList: unknown[]
+	model: string
+	responseSchema: Schema
+}
+
+type CreateResponsesJsonInput<Schema extends z.ZodType> = {
+	inputList: unknown[]
+	maxOutputTokens?: number
+	model: string
+	responseSchema: Schema
+}
+
+type AudioTranscriptionInput = {
+	audioFilePath: string
+	model: string
+	prompt?: string
+}
+
+const openAiApiBaseUrl = 'https://api.openai.com/v1'
+const openAiRequestTimeoutMilliseconds = 60_000
+const openAiMaximumAttempts = 3
+
+function requireOpenAiApiKey(): string {
+	const openAiApiKey = process.env.OPENAI_API_KEY?.trim()
+	if (!openAiApiKey) {
+		throw new Error('OPENAI_API_KEY is required for eval runner.')
+	}
+	return openAiApiKey
+}
+
+async function parseJsonResponse(response: Response): Promise<unknown> {
+	const responseText = await response.text()
+	if (!responseText.trim()) return {}
+	try {
+		return JSON.parse(responseText) as unknown
+	} catch {
+		throw new Error(responseText)
+	}
+}
+
+function isRetryableStatus(status: number): boolean {
+	switch (status) {
+		case 408:
+		case 409:
+		case 429:
+		case 500:
+		case 502:
+		case 503:
+		case 504:
+			return true
+		default:
+			return false
+	}
+}
+
+function isRetryableFetchError(error: unknown): boolean {
+	if (!(error instanceof Error)) return false
+	return (
+		error.name === 'AbortError' ||
+		/aborted|fetch failed|gateway|timeout|timed out|temporarily unavailable/i.test(error.message)
+	)
+}
+
+async function waitForRetryDelay(attemptNumber: number): Promise<void> {
+	const delayMilliseconds = 300 * 2 ** Math.max(0, attemptNumber - 1)
+	await new Promise(resolve => setTimeout(resolve, delayMilliseconds))
+}
+
+async function postOpenAiJson(path: string, body: unknown): Promise<OpenAiJsonResponse> {
+	for (let attemptNumber = 1; attemptNumber <= openAiMaximumAttempts; attemptNumber += 1) {
+		try {
+			const response = await fetch(`${openAiApiBaseUrl}${path}`, {
+				body: JSON.stringify(body),
+				headers: {
+					Authorization: `Bearer ${requireOpenAiApiKey()}`,
+					'Content-Type': 'application/json'
+				},
+				method: 'POST',
+				signal: AbortSignal.timeout(openAiRequestTimeoutMilliseconds)
+			})
+			const payload = await parseJsonResponse(response)
+			if (!response.ok) {
+				const errorMessage =
+					typeof payload === 'object' &&
+					payload !== null &&
+					'error' in payload &&
+					typeof payload.error === 'object' &&
+					payload.error !== null &&
+					'message' in payload.error &&
+					typeof payload.error.message === 'string'
+						? payload.error.message
+						: `OpenAI request failed (${response.status})`
+				if (isRetryableStatus(response.status) && attemptNumber < openAiMaximumAttempts) {
+					await waitForRetryDelay(attemptNumber)
+					continue
+				}
+				throw new Error(errorMessage)
+			}
+			if (!payload || typeof payload !== 'object' || Array.isArray(payload)) {
+				throw new Error('Expected OpenAI JSON object response.')
+			}
+			return payload as OpenAiJsonResponse
+		} catch (error) {
+			if (attemptNumber >= openAiMaximumAttempts || !isRetryableFetchError(error)) {
+				throw error
+			}
+			await waitForRetryDelay(attemptNumber)
+		}
+	}
+	throw new Error('OpenAI JSON request exhausted retry attempts.')
+}
+
+function extractChatCompletionText(payload: OpenAiJsonResponse): string {
+	const choiceList = Array.isArray(payload.choices) ? payload.choices : []
+	const firstChoice = choiceList[0]
+	if (!firstChoice || typeof firstChoice !== 'object') {
+		throw new Error('Chat Completions response did not include choices.')
+	}
+	const message =
+		'message' in firstChoice && firstChoice.message && typeof firstChoice.message === 'object'
+			? (firstChoice.message as Record<string, unknown>)
+			: null
+	if (!message) {
+		throw new Error('Chat Completions response did not include a message.')
+	}
+	if (typeof message.content === 'string') return message.content
+	if (Array.isArray(message.content)) {
+		const textPartList = message.content
+			.map(contentPart => {
+				if (!contentPart || typeof contentPart !== 'object') return null
+				const contentPartRecord = contentPart as Record<string, unknown>
+				if (typeof contentPartRecord.text === 'string') return contentPartRecord.text
+				return null
+			})
+			.filter((value): value is string => typeof value === 'string' && value.length > 0)
+		if (textPartList.length > 0) return textPartList.join('\n').trim()
+	}
+	throw new Error('Chat Completions response did not include text content.')
+}
+
+function extractResponsesText(payload: OpenAiJsonResponse): string {
+	const directOutputText = typeof payload.output_text === 'string' ? payload.output_text.trim() : ''
+	if (directOutputText) return directOutputText
+
+	const outputItemList = Array.isArray(payload.output) ? payload.output : []
+	const textPartList: string[] = []
+	for (const outputItem of outputItemList) {
+		if (!outputItem || typeof outputItem !== 'object') continue
+		const outputItemRecord = outputItem as Record<string, unknown>
+		const contentPartList = Array.isArray(outputItemRecord.content) ? outputItemRecord.content : []
+		for (const contentPart of contentPartList) {
+			if (!contentPart || typeof contentPart !== 'object') continue
+			const contentPartRecord = contentPart as Record<string, unknown>
+			const textValue =
+				typeof contentPartRecord.text === 'string'
+					? contentPartRecord.text
+					: typeof contentPartRecord.output_text === 'string'
+						? contentPartRecord.output_text
+						: null
+			if (!textValue) continue
+			textPartList.push(textValue)
+		}
+	}
+	if (textPartList.length === 0) {
+		throw new Error('Responses API output did not include text content.')
+	}
+	return textPartList.join('\n').trim()
+}
+
+function parseJsonText<Schema extends z.ZodType>(
+	jsonText: string,
+	responseSchema: Schema,
+	contextLabel: string
+): z.infer<Schema> {
+	let parsedJson: unknown
+	try {
+		parsedJson = JSON.parse(jsonText)
+	} catch (error) {
+		const fencedJsonMatch =
+			jsonText.match(/```json\s*([\s\S]+?)```/i) ?? jsonText.match(/```\s*([\s\S]+?)```/i)
+		if (fencedJsonMatch?.[1]) {
+			try {
+				parsedJson = JSON.parse(fencedJsonMatch[1].trim())
+			} catch {
+				throw new Error(
+					`${contextLabel} did not return valid JSON: ${error instanceof Error ? error.message : 'unknown'}`
+				)
+			}
+		} else {
+			const firstBraceIndex = jsonText.indexOf('{')
+			const lastBraceIndex = jsonText.lastIndexOf('}')
+			if (firstBraceIndex >= 0 && lastBraceIndex > firstBraceIndex) {
+				try {
+					parsedJson = JSON.parse(jsonText.slice(firstBraceIndex, lastBraceIndex + 1))
+				} catch {
+					throw new Error(
+						`${contextLabel} did not return valid JSON: ${error instanceof Error ? error.message : 'unknown'}`
+					)
+				}
+			} else {
+				throw new Error(
+					`${contextLabel} did not return valid JSON: ${error instanceof Error ? error.message : 'unknown'}`
+				)
+			}
+		}
+	}
+	return responseSchema.parse(parsedJson)
+}
+
+export async function createChatCompletionJson<Schema extends z.ZodType>(
+	input: CreateChatCompletionJsonInput<Schema>
+): Promise<z.infer<Schema>> {
+	const payload = await postOpenAiJson('/chat/completions', {
+		max_completion_tokens: input.maxCompletionTokens,
+		messages: input.messageList,
+		model: input.model
+	})
+	return parseJsonText(
+		extractChatCompletionText(payload),
+		input.responseSchema,
+		`Chat completion (${input.model})`
+	)
+}
+
+export async function createResponsesJson<Schema extends z.ZodType>(
+	input: CreateResponsesJsonInput<Schema>
+): Promise<z.infer<Schema>> {
+	const payload = await postOpenAiJson('/responses', {
+		input: input.inputList,
+		max_output_tokens: input.maxOutputTokens,
+		model: input.model,
+		text: {
+			format: {
+				type: 'json_object'
+			}
+		}
+	})
+	return parseJsonText(
+		extractResponsesText(payload),
+		input.responseSchema,
+		`Responses request (${input.model})`
+	)
+}
+
+export async function transcribeAudioFile(input: AudioTranscriptionInput): Promise<string> {
+	const fileBytes = await readFile(input.audioFilePath)
+	const formData = new FormData()
+	formData.append(
+		'file',
+		new File([fileBytes], basename(input.audioFilePath), { type: 'audio/wav' })
+	)
+	formData.append('model', input.model)
+	if (input.prompt) formData.append('prompt', input.prompt)
+
+	for (let attemptNumber = 1; attemptNumber <= openAiMaximumAttempts; attemptNumber += 1) {
+		try {
+			const response = await fetch(`${openAiApiBaseUrl}/audio/transcriptions`, {
+				body: formData,
+				headers: {
+					Authorization: `Bearer ${requireOpenAiApiKey()}`
+				},
+				method: 'POST',
+				signal: AbortSignal.timeout(openAiRequestTimeoutMilliseconds)
+			})
+			const payload = await parseJsonResponse(response)
+			if (!response.ok) {
+				const errorMessage =
+					typeof payload === 'object' &&
+					payload !== null &&
+					'error' in payload &&
+					typeof payload.error === 'object' &&
+					payload.error !== null &&
+					'message' in payload.error &&
+					typeof payload.error.message === 'string'
+						? payload.error.message
+						: `Audio transcription failed (${response.status})`
+				if (isRetryableStatus(response.status) && attemptNumber < openAiMaximumAttempts) {
+					await waitForRetryDelay(attemptNumber)
+					continue
+				}
+				throw new Error(errorMessage)
+			}
+			const parsedPayload = z
+				.object({
+					text: z.string().min(1)
+				})
+				.parse(payload)
+			return parsedPayload.text.trim()
+		} catch (error) {
+			if (attemptNumber >= openAiMaximumAttempts || !isRetryableFetchError(error)) {
+				throw error
+			}
+			await waitForRetryDelay(attemptNumber)
+		}
+	}
+	throw new Error('Audio transcription request exhausted retry attempts.')
+}
+
+export async function readAudioFileAsBase64(audioFilePath: string): Promise<string> {
+	const fileBuffer = await readFile(audioFilePath)
+	return Buffer.from(fileBuffer).toString('base64')
+}
diff --git a/scripts/evals/runEvalFlywheel.ts b/scripts/evals/runEvalFlywheel.ts
new file mode 100644
index 0000000..452b559
--- /dev/null
+++ b/scripts/evals/runEvalFlywheel.ts
@@ -0,0 +1,691 @@
+import { spawnSync } from 'node:child_process'
+import { mkdir, readFile, writeFile } from 'node:fs/promises'
+import { dirname, join, resolve } from 'node:path'
+import { z } from 'zod'
+import type {
+	EvalCandidateConfig,
+	EvalRunSummary,
+	FlywheelDecision,
+	FlywheelPatchProposal
+} from '@/evals/contracts'
+import { FlywheelDecisionSchema } from '@/evals/contracts'
+import { synthesizeRootCausePatchProposal } from './judges'
+import {
+	type EvalRunExecution,
+	executeEvalSuite,
+	loadEvalMatrix,
+	selectCandidateConfig
+} from './runEvalSuite'
+
+type ParsedFlywheelArguments = {
+	baselineUrl: string
+	candidateId: string
+	candidateUrl?: string
+	captureVercelLogs: boolean
+	evaluationId?: string
+	matrixPath: string
+	scenarioIdList?: string[]
+}
+
+type CandidateComparison = {
+	candidateBeatsBaseline: boolean
+	hasLowConfidenceBlockingJudge: boolean
+	protectedRegressionList: string[]
+	regressionDeltas: Record<string, number>
+	reasonList: string[]
+}
+
+type FlywheelState = z.infer<typeof FlywheelStateSchema>
+
+type VercelCommandResult = {
+	outputText: string
+	url?: string
+	urlList: string[]
+}
+
+const highSignalCanaryScenarioIdList = [
+	'chat_audio_practice_ukrainian',
+	'translate_audio_en_to_es',
+	'translate_audio_en_long_to_es',
+	'translate_audio_en_noisy_fillers_to_es'
+] as const
+const flywheelStatePath = resolve(process.cwd(), '.artifacts/evals/flywheel-state.json')
+const flywheelPatchPromptPath = resolve(process.cwd(), '.artifacts/evals/latest-patch-proposal.md')
+const flywheelPatchProposalPath = resolve(
+	process.cwd(),
+	'.artifacts/evals/latest-patch-proposal.json'
+)
+
+const FlywheelStateSchema = z.object({
+	dateKey: z.string().min(1),
+	estimatedCostUsd: z.number().min(0),
+	failureAttemptCountByClusterKey: z.record(z.string(), z.number().int().nonnegative()),
+	lastGoodProductionDeploymentUrl: z.string().url().optional(),
+	runCount: z.number().int().nonnegative()
+})
+
+function parseArguments(argumentList: string[]): ParsedFlywheelArguments {
+	const parsedArguments: ParsedFlywheelArguments = {
+		baselineUrl: 'https://lilac.chat',
+		candidateId: 'workspace-preview',
+		captureVercelLogs: true,
+		matrixPath: resolve(process.cwd(), 'scripts/evals/manifests/default.matrix.json')
+	}
+
+	for (let argumentIndex = 0; argumentIndex < argumentList.length; argumentIndex += 1) {
+		const argument = argumentList[argumentIndex]
+		switch (argument) {
+			case '--baseline-url': {
+				parsedArguments.baselineUrl = argumentList[argumentIndex + 1] ?? parsedArguments.baselineUrl
+				argumentIndex += 1
+				break
+			}
+			case '--candidate-id': {
+				parsedArguments.candidateId = argumentList[argumentIndex + 1] ?? parsedArguments.candidateId
+				argumentIndex += 1
+				break
+			}
+			case '--candidate-url': {
+				const candidateUrl = argumentList[argumentIndex + 1]
+				if (candidateUrl) {
+					parsedArguments.candidateUrl = candidateUrl
+				}
+				argumentIndex += 1
+				break
+			}
+			case '--evaluation-id': {
+				const evaluationId = argumentList[argumentIndex + 1]
+				if (evaluationId) {
+					parsedArguments.evaluationId = evaluationId
+				}
+				argumentIndex += 1
+				break
+			}
+			case '--matrix-path': {
+				parsedArguments.matrixPath = resolve(
+					argumentList[argumentIndex + 1] ?? parsedArguments.matrixPath
+				)
+				argumentIndex += 1
+				break
+			}
+			case '--scenario-ids': {
+				parsedArguments.scenarioIdList = (argumentList[argumentIndex + 1] ?? '')
+					.split(',')
+					.map(value => value.trim())
+					.filter(Boolean)
+				argumentIndex += 1
+				break
+			}
+			case '--skip-vercel-logs': {
+				parsedArguments.captureVercelLogs = false
+				break
+			}
+			default:
+				break
+		}
+	}
+
+	return parsedArguments
+}
+
+function createTimestampLabel(): string {
+	return new Date().toISOString().replaceAll(':', '-').replaceAll('.', '-')
+}
+
+function createEvaluationId(prefix: string): string {
+	return `${prefix}-${createTimestampLabel()}`
+}
+
+function resolveBooleanEnvironmentFlag(name: string, fallbackValue: boolean): boolean {
+	const rawValue = process.env[name]?.trim().toLowerCase()
+	if (rawValue === 'true') return true
+	if (rawValue === 'false') return false
+	return fallbackValue
+}
+
+function resolvePositiveIntegerEnvironmentValue(name: string, fallbackValue: number): number {
+	const rawValue = process.env[name]?.trim()
+	if (!rawValue) return fallbackValue
+	const parsedValue = Number.parseInt(rawValue, 10)
+	return Number.isFinite(parsedValue) && parsedValue > 0 ? parsedValue : fallbackValue
+}
+
+function resolvePositiveNumberEnvironmentValue(name: string, fallbackValue: number): number {
+	const rawValue = process.env[name]?.trim()
+	if (!rawValue) return fallbackValue
+	const parsedValue = Number.parseFloat(rawValue)
+	return Number.isFinite(parsedValue) && parsedValue > 0 ? parsedValue : fallbackValue
+}
+
+function toEnvironmentVariableName(flagId: string): string {
+	return `NEXT_PUBLIC_${flagId.replaceAll(/[^a-zA-Z0-9]+/g, '_').toUpperCase()}`
+}
+
+function buildCandidateEnvironmentOverrides(
+	candidateConfig: EvalCandidateConfig
+): Record<string, string> {
+	const environmentOverrides: Record<string, string> = {
+		...candidateConfig.buildEnvironmentOverrides,
+		NEXT_PUBLIC_LILAC_CHAT_TURN_ORDERING_PROFILE: candidateConfig.chatTurnOrderingProfile,
+		NEXT_PUBLIC_LILAC_REALTIME_MODEL: candidateConfig.realtimeModelSlug,
+		NEXT_PUBLIC_LILAC_TRANSCRIPTION_MODEL: candidateConfig.asrModelSlug,
+		NEXT_PUBLIC_LILAC_TRANSLATE_LANGUAGE_GROUNDING_MODE:
+			candidateConfig.translateLanguageGroundingMode,
+		NEXT_PUBLIC_LILAC_TRANSLATE_PROMPT_VERSION:
+			candidateConfig.promptVersionIds.translate ?? 'current'
+	}
+	if (candidateConfig.asrModelSlug === 'gpt-4o-mini-transcribe') {
+		environmentOverrides.NEXT_PUBLIC_LILAC_TRANSCRIBE_ASR_PROFILE = 'fast'
+	} else {
+		environmentOverrides.NEXT_PUBLIC_LILAC_TRANSCRIBE_ASR_PROFILE = 'accurate'
+	}
+	if (typeof candidateConfig.draftDebounceMilliseconds === 'number') {
+		environmentOverrides.NEXT_PUBLIC_LILAC_TRANSLATE_DRAFT_DEBOUNCE_MS = String(
+			candidateConfig.draftDebounceMilliseconds
+		)
+	}
+	if (typeof candidateConfig.translateCommitIntervalMilliseconds === 'number') {
+		environmentOverrides.NEXT_PUBLIC_LILAC_TRANSLATE_COMMIT_INTERVAL_MS = String(
+			candidateConfig.translateCommitIntervalMilliseconds
+		)
+	}
+	if (typeof candidateConfig.translateMinimumCommitAudioMilliseconds === 'number') {
+		environmentOverrides.NEXT_PUBLIC_LILAC_TRANSLATE_MIN_COMMIT_AUDIO_MS = String(
+			candidateConfig.translateMinimumCommitAudioMilliseconds
+		)
+	}
+	for (const [featureFlagId, featureFlagValue] of Object.entries(candidateConfig.featureFlags)) {
+		environmentOverrides[toEnvironmentVariableName(featureFlagId)] = String(featureFlagValue)
+	}
+	return environmentOverrides
+}
+
+function extractUrlList(outputText: string): string[] {
+	return Array.from(outputText.matchAll(/https:\/\/[\w.-]+\.vercel\.app/g)).map(match => match[0])
+}
+
+function executeVercelCommand(argumentList: string[]): VercelCommandResult {
+	const result = spawnSync('vercel', argumentList, {
+		cwd: process.cwd(),
+		encoding: 'utf8',
+		env: process.env
+	})
+	const outputText = [result.stdout, result.stderr].filter(Boolean).join('\n')
+	if (result.status !== 0) {
+		throw new Error(outputText || `Vercel command failed: vercel ${argumentList.join(' ')}`)
+	}
+	const urlList = extractUrlList(outputText)
+	return {
+		outputText,
+		...(urlList.length > 0 ? { url: urlList[urlList.length - 1] } : {}),
+		urlList
+	}
+}
+
+function buildVercelEnvironmentArgumentList(
+	environmentOverrides: Record<string, string>
+): string[] {
+	const argumentList: string[] = []
+	for (const [key, value] of Object.entries(environmentOverrides)) {
+		argumentList.push('--build-env', `${key}=${value}`, '--env', `${key}=${value}`)
+	}
+	return argumentList
+}
+
+function slugifyAliasSegment(value: string): string {
+	return value
+		.trim()
+		.toLowerCase()
+		.replace(/[^a-z0-9-]+/g, '-')
+		.replace(/^-+|-+$/g, '')
+		.slice(0, 48)
+}
+
+function resolvePublicPreviewAliasHost(candidateConfig: EvalCandidateConfig): string | null {
+	const explicitUrl = process.env.LILAC_EVAL_PREVIEW_URL?.trim()
+	if (explicitUrl) {
+		try {
+			return new URL(explicitUrl).host
+		} catch {
+			return explicitUrl.replace(/^https?:\/\//, '')
+		}
+	}
+	const aliasDomain = process.env.LILAC_EVAL_PREVIEW_ALIAS_DOMAIN?.trim()
+	if (!aliasDomain) return null
+	const aliasPrefix = slugifyAliasSegment(candidateConfig.id || candidateConfig.label)
+	if (!aliasPrefix) return null
+	return `${aliasPrefix}.${aliasDomain}`
+}
+
+function deployPreview(candidateConfig: EvalCandidateConfig): string {
+	const environmentOverrides = buildCandidateEnvironmentOverrides(candidateConfig)
+	const deploymentResult = executeVercelCommand([
+		'deploy',
+		'--yes',
+		'--force',
+		'--public',
+		'--target',
+		'preview',
+		'--meta',
+		`lilac_eval_candidate_id=${candidateConfig.id}`,
+		'--meta',
+		`lilac_eval_candidate_label=${candidateConfig.label}`,
+		...buildVercelEnvironmentArgumentList(environmentOverrides)
+	])
+	if (!deploymentResult.url) {
+		throw new Error('Preview deployment completed without a deployment URL.')
+	}
+	const publicPreviewAliasHost = resolvePublicPreviewAliasHost(candidateConfig)
+	if (!publicPreviewAliasHost) return deploymentResult.url
+	executeVercelCommand(['alias', 'set', deploymentResult.url, publicPreviewAliasHost])
+	return `https://${publicPreviewAliasHost}`
+}
+
+function promoteDeployment(deploymentUrl: string): void {
+	executeVercelCommand(['promote', deploymentUrl, '--yes'])
+}
+
+function rollbackDeployment(deploymentUrl: string): void {
+	executeVercelCommand(['rollback', deploymentUrl, '--yes'])
+}
+
+function getCurrentProductionDeploymentUrl(): string | undefined {
+	const deploymentResult = executeVercelCommand(['list', '--environment', 'production', 'lilac'])
+	return deploymentResult.url
+}
+
+async function loadFlywheelState(): Promise<FlywheelState> {
+	try {
+		const stateContent = await readFile(flywheelStatePath, 'utf8')
+		const parsedState = FlywheelStateSchema.parse(JSON.parse(stateContent))
+		const currentDateKey = new Date().toISOString().slice(0, 10)
+		if (parsedState.dateKey === currentDateKey) return parsedState
+	} catch {}
+	return FlywheelStateSchema.parse({
+		dateKey: new Date().toISOString().slice(0, 10),
+		estimatedCostUsd: 0,
+		failureAttemptCountByClusterKey: {},
+		runCount: 0
+	})
+}
+
+async function writeFlywheelState(state: FlywheelState): Promise<void> {
+	await mkdir(dirname(flywheelStatePath), { recursive: true })
+	await writeFile(flywheelStatePath, JSON.stringify(state, null, 2), 'utf8')
+}
+
+function estimateEvalRunCostUsd(execution: EvalRunExecution): number {
+	const scenarioCount = execution.runSummary.scenarioRunSummaryList.length
+	const audioScenarioCount = execution.runSummary.scenarioRunSummaryList.filter(summary => {
+		return summary.scenario.inputType !== 'text'
+	}).length
+	const screenshotWeight = execution.runSummary.scenarioRunSummaryList.length * 0.03
+	return (
+		Math.round((scenarioCount * 0.18 + audioScenarioCount * 0.12 + screenshotWeight) * 100) / 100
+	)
+}
+
+function compareRuns(
+	baselineSummary: EvalRunSummary,
+	candidateSummary: EvalRunSummary
+): CandidateComparison {
+	const regressionDeltas: Record<string, number> = {
+		aggregateScore:
+			Math.round(
+				(candidateSummary.scorecard.aggregateScore - baselineSummary.scorecard.aggregateScore) * 1000
+			) / 1000
+	}
+	const protectedRegressionList: string[] = []
+	const reasonList: string[] = []
+
+	const baselineScenarioSummaryById = new Map(
+		baselineSummary.scenarioRunSummaryList.map(scenarioSummary => [
+			scenarioSummary.scenario.id,
+			scenarioSummary
+		])
+	)
+	for (const candidateScenarioSummary of candidateSummary.scenarioRunSummaryList) {
+		const baselineScenarioSummary = baselineScenarioSummaryById.get(
+			candidateScenarioSummary.scenario.id
+		)
+		if (!baselineScenarioSummary) continue
+		const scoreDelta =
+			candidateScenarioSummary.scorecard.aggregateScore -
+			baselineScenarioSummary.scorecard.aggregateScore
+		regressionDeltas[candidateScenarioSummary.scenario.id] = Math.round(scoreDelta * 1000) / 1000
+		if (scoreDelta < -0.05) {
+			protectedRegressionList.push(
+				`Scenario ${candidateScenarioSummary.scenario.id} regressed by ${Math.abs(scoreDelta).toFixed(3)}.`
+			)
+		}
+		if (
+			candidateScenarioSummary.scorecard.releaseDecision === 'block' &&
+			baselineScenarioSummary.scorecard.releaseDecision !== 'block'
+		) {
+			protectedRegressionList.push(
+				`Scenario ${candidateScenarioSummary.scenario.id} became blocking in the candidate run.`
+			)
+		}
+	}
+
+	const baselineHighSeverityCount = baselineSummary.scorecard.hardGateResults.filter(
+		finding => finding.severity === 'high'
+	).length
+	const candidateHighSeverityCount = candidateSummary.scorecard.hardGateResults.filter(
+		finding => finding.severity === 'high'
+	).length
+	regressionDeltas.hardGateHighSeverity = candidateHighSeverityCount - baselineHighSeverityCount
+	if (candidateHighSeverityCount > baselineHighSeverityCount) {
+		protectedRegressionList.push('Candidate introduced additional high-severity hard-gate findings.')
+	}
+
+	const hasLowConfidenceBlockingJudge =
+		candidateSummary.scorecard.releaseDecision === 'block' &&
+		(candidateSummary.scorecard.judgeResults.some(judgeResult => {
+			return !judgeResult.passed && judgeResult.confidence < 0.6
+		}) ||
+			false)
+	if (hasLowConfidenceBlockingJudge) {
+		protectedRegressionList.push('Blocking candidate failures include low-confidence judge outputs.')
+	}
+
+	reasonList.push(
+		`Baseline aggregate score=${baselineSummary.scorecard.aggregateScore.toFixed(3)}.`,
+		`Candidate aggregate score=${candidateSummary.scorecard.aggregateScore.toFixed(3)}.`
+	)
+
+	const candidateBeatsBaseline =
+		candidateSummary.scorecard.releaseDecision !== 'block' &&
+		candidateSummary.scorecard.aggregateScore > baselineSummary.scorecard.aggregateScore &&
+		protectedRegressionList.length === 0
+	if (!candidateBeatsBaseline) {
+		reasonList.push('Candidate did not strictly beat the baseline under protected metrics.')
+	}
+
+	return {
+		candidateBeatsBaseline,
+		hasLowConfidenceBlockingJudge,
+		protectedRegressionList,
+		reasonList,
+		regressionDeltas
+	}
+}
+
+function buildFailureClusterKey(summary: EvalRunSummary): string {
+	const clusterIdList = summary.failureClusterList.map(cluster => cluster.clusterId).sort()
+	return clusterIdList.join('|') || 'no-failure-clusters'
+}
+
+function createFlywheelDecision(input: FlywheelDecision): FlywheelDecision {
+	return FlywheelDecisionSchema.parse(input)
+}
+
+async function maybeRunPatchCommand(input: {
+	patchProposal: FlywheelPatchProposal
+	state: FlywheelState
+	summary: EvalRunSummary
+}): Promise<{ commandRan: boolean; commandSucceeded: boolean }> {
+	const patchCommand = process.env.LILAC_FLYWHEEL_PATCH_COMMAND?.trim()
+	if (!patchCommand) return { commandRan: false, commandSucceeded: false }
+
+	await mkdir(dirname(flywheelPatchPromptPath), { recursive: true })
+	await writeFile(flywheelPatchProposalPath, JSON.stringify(input.patchProposal, null, 2), 'utf8')
+	await writeFile(
+		flywheelPatchPromptPath,
+		[
+			`Candidate: ${input.summary.candidateConfig.id}`,
+			`Evaluation: ${input.summary.evaluationId}`,
+			`Failure clusters: ${input.patchProposal.failureClusterIds.join(', ')}`,
+			'',
+			input.patchProposal.summary,
+			'',
+			input.patchProposal.prompt
+		].join('\n'),
+		'utf8'
+	)
+
+	const commandResult = spawnSync('zsh', ['-lc', patchCommand], {
+		cwd: process.cwd(),
+		encoding: 'utf8',
+		env: {
+			...process.env,
+			LILAC_FLYWHEEL_EVALUATION_ID: input.summary.evaluationId,
+			LILAC_FLYWHEEL_PATCH_PROMPT_PATH: flywheelPatchPromptPath,
+			LILAC_FLYWHEEL_PATCH_PROPOSAL_PATH: flywheelPatchProposalPath
+		},
+		stdio: 'inherit'
+	})
+	return {
+		commandRan: true,
+		commandSucceeded: commandResult.status === 0
+	}
+}
+
+async function evaluateCandidateAgainstPreview(input: {
+	candidateConfig: EvalCandidateConfig
+	captureVercelLogs: boolean
+	deploymentUrl: string
+	evaluationIdPrefix: string
+	scenarioIdList?: string[]
+}): Promise<EvalRunExecution> {
+	return executeEvalSuite({
+		candidateConfig: input.candidateConfig,
+		captureVercelLogs: input.captureVercelLogs,
+		evaluationId: createEvaluationId(input.evaluationIdPrefix),
+		targetUrl: input.deploymentUrl,
+		...(input.scenarioIdList ? { scenarioIdList: input.scenarioIdList } : {})
+	})
+}
+
+async function main(): Promise<void> {
+	const parsedArguments = parseArguments(process.argv.slice(2))
+	const evalMatrix = await loadEvalMatrix(parsedArguments.matrixPath)
+	const baselineConfig = evalMatrix.baseline
+	const candidateConfig = selectCandidateConfig(
+		[evalMatrix.baseline, ...evalMatrix.candidateList],
+		parsedArguments.candidateId
+	)
+	const flywheelEnabled = resolveBooleanEnvironmentFlag('LILAC_FLYWHEEL_ENABLED', true)
+	const autoprodEnabled = resolveBooleanEnvironmentFlag('LILAC_FLYWHEEL_AUTOPROD_ENABLED', false)
+	const maxRunsPerDay = resolvePositiveIntegerEnvironmentValue('LILAC_FLYWHEEL_MAX_RUNS_PER_DAY', 8)
+	const maxPatchAttemptsPerFailure = resolvePositiveIntegerEnvironmentValue(
+		'LILAC_FLYWHEEL_MAX_PATCH_ATTEMPTS_PER_FAILURE',
+		1
+	)
+	const budgetLimitUsd = resolvePositiveNumberEnvironmentValue('LILAC_FLYWHEEL_BUDGET_USD_LIMIT', 25)
+	const flywheelState = await loadFlywheelState()
+	if (flywheelState.runCount >= maxRunsPerDay) {
+		throw new Error(`Flywheel max runs per day exceeded (${maxRunsPerDay}).`)
+	}
+
+	const flywheelArtifactDirectoryPath = resolve(
+		process.cwd(),
+		'.artifacts/evals/flywheel',
+		parsedArguments.evaluationId ?? createEvaluationId('flywheel')
+	)
+	await mkdir(flywheelArtifactDirectoryPath, { recursive: true })
+
+	const baselineExecution = await executeEvalSuite({
+		candidateConfig: baselineConfig,
+		captureVercelLogs: parsedArguments.captureVercelLogs,
+		evaluationId: createEvaluationId('baseline'),
+		targetUrl: parsedArguments.baselineUrl,
+		...(parsedArguments.scenarioIdList ? { scenarioIdList: parsedArguments.scenarioIdList } : {})
+	})
+	const baselineCostEstimate = estimateEvalRunCostUsd(baselineExecution)
+	flywheelState.runCount += 1
+	flywheelState.estimatedCostUsd += baselineCostEstimate
+
+	if (flywheelState.estimatedCostUsd > budgetLimitUsd) {
+		await writeFlywheelState(flywheelState)
+		throw new Error(
+			`Flywheel estimated budget exceeded (${flywheelState.estimatedCostUsd.toFixed(2)} > ${budgetLimitUsd}).`
+		)
+	}
+
+	const previewDeploymentUrl = parsedArguments.candidateUrl
+		? parsedArguments.candidateUrl
+		: candidateConfig.id === baselineConfig.id
+			? parsedArguments.baselineUrl
+			: flywheelEnabled
+				? deployPreview(candidateConfig)
+				: undefined
+	if (!previewDeploymentUrl) {
+		await writeFlywheelState(flywheelState)
+		throw new Error('Candidate URL is required when flywheel deployment is disabled.')
+	}
+
+	const candidateExecution = await evaluateCandidateAgainstPreview({
+		candidateConfig,
+		captureVercelLogs: parsedArguments.captureVercelLogs,
+		deploymentUrl: previewDeploymentUrl,
+		evaluationIdPrefix: 'candidate-01',
+		...(parsedArguments.scenarioIdList ? { scenarioIdList: parsedArguments.scenarioIdList } : {})
+	})
+	flywheelState.runCount += 1
+	flywheelState.estimatedCostUsd += estimateEvalRunCostUsd(candidateExecution)
+	const candidateComparison = compareRuns(
+		baselineExecution.runSummary,
+		candidateExecution.runSummary
+	)
+	const failureClusterKey = buildFailureClusterKey(candidateExecution.runSummary)
+	const failureAttemptCount = flywheelState.failureAttemptCountByClusterKey[failureClusterKey] ?? 0
+
+	const decisionReasonList = [...candidateComparison.reasonList]
+	let finalDecision = createFlywheelDecision({
+		action: 'report_only',
+		candidateId: candidateConfig.id,
+		reasons: ['Flywheel evaluation completed.']
+	})
+	let verificationExecution: EvalRunExecution | null = null
+	let canaryExecution: EvalRunExecution | null = null
+	let patchProposal: FlywheelPatchProposal | null = null
+	let previousProductionDeploymentUrl: string | undefined
+	let patchCommandResult = { commandRan: false, commandSucceeded: false }
+
+	if (!candidateComparison.candidateBeatsBaseline) {
+		decisionReasonList.push(...candidateComparison.protectedRegressionList)
+		patchProposal = await synthesizeRootCausePatchProposal({
+			candidateId: candidateConfig.id,
+			failureClusterIdList: candidateExecution.runSummary.failureClusterList.map(
+				cluster => cluster.clusterId
+			),
+			observationList: candidateExecution.observationList
+		})
+		finalDecision = createFlywheelDecision({
+			action: 'propose_patch',
+			candidateId: candidateConfig.id,
+			patchProposal,
+			reasons:
+				decisionReasonList.length > 0 ? decisionReasonList : ['Candidate did not beat baseline.']
+		})
+		if (failureAttemptCount < maxPatchAttemptsPerFailure) {
+			patchCommandResult = await maybeRunPatchCommand({
+				patchProposal,
+				state: flywheelState,
+				summary: candidateExecution.runSummary
+			})
+			flywheelState.failureAttemptCountByClusterKey[failureClusterKey] = failureAttemptCount + 1
+		}
+	} else {
+		verificationExecution = await evaluateCandidateAgainstPreview({
+			candidateConfig,
+			captureVercelLogs: parsedArguments.captureVercelLogs,
+			deploymentUrl: previewDeploymentUrl,
+			evaluationIdPrefix: 'candidate-02',
+			...(parsedArguments.scenarioIdList ? { scenarioIdList: parsedArguments.scenarioIdList } : {})
+		})
+		flywheelState.runCount += 1
+		flywheelState.estimatedCostUsd += estimateEvalRunCostUsd(verificationExecution)
+		const verificationComparison = compareRuns(
+			baselineExecution.runSummary,
+			verificationExecution.runSummary
+		)
+		if (!verificationComparison.candidateBeatsBaseline) {
+			decisionReasonList.push(
+				'Candidate passed once but failed the required second verification run.',
+				...verificationComparison.protectedRegressionList
+			)
+			finalDecision = createFlywheelDecision({
+				action: 'block',
+				candidateId: candidateConfig.id,
+				reasons: decisionReasonList
+			})
+		} else if (!autoprodEnabled || !flywheelEnabled) {
+			decisionReasonList.push(
+				'Preview passed twice. Autoprod is disabled, so the run stops at candidate status.'
+			)
+			finalDecision = createFlywheelDecision({
+				action: 'deploy_preview',
+				candidateId: candidateConfig.id,
+				reasons: decisionReasonList
+			})
+		} else {
+			previousProductionDeploymentUrl = getCurrentProductionDeploymentUrl()
+			promoteDeployment(previewDeploymentUrl)
+			canaryExecution = await executeEvalSuite({
+				candidateConfig,
+				captureVercelLogs: parsedArguments.captureVercelLogs,
+				evaluationId: createEvaluationId('prod-canary'),
+				scenarioIdList: [...highSignalCanaryScenarioIdList],
+				targetUrl: parsedArguments.baselineUrl
+			})
+			flywheelState.runCount += 1
+			flywheelState.estimatedCostUsd += estimateEvalRunCostUsd(canaryExecution)
+			const canaryComparison = compareRuns(baselineExecution.runSummary, canaryExecution.runSummary)
+			if (!canaryComparison.candidateBeatsBaseline) {
+				rollbackDeployment(previewDeploymentUrl)
+				decisionReasonList.push(
+					'Production canary regressed after promotion. Rollback was triggered.',
+					...canaryComparison.protectedRegressionList
+				)
+				finalDecision = createFlywheelDecision({
+					action: 'rollback',
+					candidateId: candidateConfig.id,
+					reasons: decisionReasonList
+				})
+			} else {
+				flywheelState.lastGoodProductionDeploymentUrl = previewDeploymentUrl
+				decisionReasonList.push('Preview passed twice and production canary passed.')
+				finalDecision = createFlywheelDecision({
+					action: 'promote_to_production',
+					candidateId: candidateConfig.id,
+					reasons: decisionReasonList
+				})
+			}
+		}
+	}
+
+	const summary = {
+		autoprodEnabled,
+		baseline: baselineExecution.runSummary,
+		budgetLimitUsd,
+		candidate: candidateExecution.runSummary,
+		candidateComparison,
+		candidateDeploymentUrl: previewDeploymentUrl,
+		decision: finalDecision,
+		flywheelEnabled,
+		patchCommandResult,
+		...(patchProposal ? { patchProposal } : {}),
+		...(previousProductionDeploymentUrl ? { previousProductionDeploymentUrl } : {}),
+		state: flywheelState,
+		...(verificationExecution ? { verification: verificationExecution.runSummary } : {}),
+		...(canaryExecution ? { productionCanary: canaryExecution.runSummary } : {})
+	}
+	await writeFile(
+		join(flywheelArtifactDirectoryPath, 'flywheel-summary.json'),
+		JSON.stringify(summary, null, 2),
+		'utf8'
+	)
+	await writeFlywheelState(flywheelState)
+	console.log(JSON.stringify(summary, null, 2))
+
+	if (finalDecision.action === 'block' || finalDecision.action === 'rollback') {
+		throw new Error(finalDecision.reasons.join(' '))
+	}
+}
+
+void main().catch(error => {
+	console.error(error instanceof Error ? error.message : 'Eval flywheel failed.')
+	process.exit(1)
+})
diff --git a/scripts/evals/runEvalSuite.ts b/scripts/evals/runEvalSuite.ts
new file mode 100644
index 0000000..d4de23b
--- /dev/null
+++ b/scripts/evals/runEvalSuite.ts
@@ -0,0 +1,1087 @@
+import { spawnSync } from 'node:child_process'
+import { access, mkdir, readFile, writeFile } from 'node:fs/promises'
+import { dirname, join, resolve } from 'node:path'
+import {
+	type Browser,
+	type BrowserContext,
+	type ConsoleMessage,
+	chromium,
+	type Page
+} from 'playwright'
+import { z } from 'zod'
+
+import {
+	type EvalCandidateConfig,
+	EvalMatrixSchema,
+	type EvalRunSummary,
+	EvalRunSummarySchema,
+	EvalScenarioRunSummarySchema,
+	type EvalScenarioSpec,
+	LilacTestBusEventSchema
+} from '@/evals/contracts'
+import {
+	collectRuntimeErrorMatches,
+	type RuntimeLogCapture,
+	startVercelRuntimeLogCapture
+} from '../smoke/captureVercelRuntimeLogs'
+import { resolveEvalScenarioList } from './defaultScenarios'
+import {
+	buildScenarioScorecard,
+	runAudioInputReferenceJudge,
+	runAudioOutputListenerJudge,
+	runHardGuardrailJudge,
+	runSemanticConversationJudge,
+	runVisualUiJudge
+} from './judges'
+import type { ScenarioObservation } from './runtimeTypes'
+
+type EvalRunOptions = {
+	candidateConfig: EvalCandidateConfig
+	captureVercelLogs: boolean
+	evaluationId?: string
+	scenarioIdList?: string[]
+	targetUrl: string
+}
+
+type ParsedArgumentList = {
+	candidateId: string
+	captureVercelLogs: boolean
+	evaluationId?: string
+	matrixPath: string
+	scenarioIdList?: string[]
+	targetUrl: string
+}
+
+type ScenarioArtifactCollectors = {
+	consoleEntryList: string[]
+	stop: () => Promise<void>
+}
+
+export type EvalRunExecution = {
+	observationList: ScenarioObservation[]
+	runSummary: EvalRunSummary
+}
+
+type ParsedLilacTestBusEvent = z.infer<typeof LilacTestBusEventSchema>
+type AssistantAudioStateEvent = Extract<
+	ParsedLilacTestBusEvent,
+	{ eventType: 'assistant_audio_state_changed' }
+>
+type ChatTranscriptEvent = Extract<ParsedLilacTestBusEvent, { eventType: 'chat_transcript_patch' }>
+type SubtitleStateEvent = Extract<ParsedLilacTestBusEvent, { eventType: 'subtitle_state_changed' }>
+type TranslateCardEvent = Extract<ParsedLilacTestBusEvent, { eventType: 'translate_card_patch' }>
+type VisibleErrorEvent = Extract<ParsedLilacTestBusEvent, { eventType: 'visible_error_changed' }>
+
+const defaultSilentAudioFixturePath = resolve(
+	process.cwd(),
+	'.artifacts/smoke/fixtures/silence_5s.wav'
+)
+const defaultFixtureManifestPath = resolve(
+	process.cwd(),
+	'.artifacts/smoke/fixtures/fixtures.manifest.json'
+)
+const defaultViewport = {
+	height: 900,
+	width: 1365
+}
+const mobileViewportList = [
+	{ height: 812, width: 375 },
+	{ height: 844, width: 390 }
+] as const
+
+function parseArguments(argumentList: string[]): ParsedArgumentList {
+	const parsedArguments: ParsedArgumentList = {
+		candidateId: 'workspace-preview',
+		captureVercelLogs: true,
+		matrixPath: resolve(process.cwd(), 'scripts/evals/manifests/default.matrix.json'),
+		targetUrl: 'https://lilac.chat'
+	}
+
+	for (let argumentIndex = 0; argumentIndex < argumentList.length; argumentIndex += 1) {
+		const argument = argumentList[argumentIndex]
+		switch (argument) {
+			case '--candidate-id': {
+				parsedArguments.candidateId = argumentList[argumentIndex + 1] ?? parsedArguments.candidateId
+				argumentIndex += 1
+				break
+			}
+			case '--evaluation-id': {
+				const evaluationId = argumentList[argumentIndex + 1]
+				if (evaluationId) {
+					parsedArguments.evaluationId = evaluationId
+				}
+				argumentIndex += 1
+				break
+			}
+			case '--matrix-path': {
+				parsedArguments.matrixPath = resolve(
+					argumentList[argumentIndex + 1] ?? parsedArguments.matrixPath
+				)
+				argumentIndex += 1
+				break
+			}
+			case '--scenario-ids': {
+				const rawScenarioIdList = argumentList[argumentIndex + 1] ?? ''
+				parsedArguments.scenarioIdList = rawScenarioIdList
+					.split(',')
+					.map(value => value.trim())
+					.filter(Boolean)
+				argumentIndex += 1
+				break
+			}
+			case '--skip-vercel-logs': {
+				parsedArguments.captureVercelLogs = false
+				break
+			}
+			case '--target-url': {
+				parsedArguments.targetUrl = argumentList[argumentIndex + 1] ?? parsedArguments.targetUrl
+				argumentIndex += 1
+				break
+			}
+			default:
+				break
+		}
+	}
+
+	return parsedArguments
+}
+
+function createTimestampLabel(): string {
+	return new Date().toISOString().replaceAll(':', '-').replaceAll('.', '-')
+}
+
+function createEvaluationId(): string {
+	return `eval-${createTimestampLabel()}`
+}
+
+function getGitCommitSha(): string {
+	const result = spawnSync('git', ['rev-parse', 'HEAD'], {
+		cwd: process.cwd(),
+		encoding: 'utf8'
+	})
+	return result.status === 0 ? result.stdout.trim() : 'unknown'
+}
+
+async function pathExists(path: string): Promise<boolean> {
+	try {
+		await access(path)
+		return true
+	} catch {
+		return false
+	}
+}
+
+async function ensureAudioFixturesReady(scenarioList: EvalScenarioSpec[]): Promise<void> {
+	const requiredPathList = [
+		defaultSilentAudioFixturePath,
+		defaultFixtureManifestPath,
+		...scenarioList
+			.map(scenario => scenario.audioFixturePath)
+			.filter((value): value is string => typeof value === 'string' && value.length > 0)
+	]
+	const missingPathList: string[] = []
+	for (const requiredPath of requiredPathList) {
+		if (!(await pathExists(requiredPath))) {
+			missingPathList.push(requiredPath)
+		}
+	}
+	if (missingPathList.length === 0) return
+
+	const generationResult = spawnSync('bun', ['run', 'smoke:prepare-audio'], {
+		cwd: process.cwd(),
+		encoding: 'utf8',
+		env: process.env,
+		stdio: 'inherit'
+	})
+	if (generationResult.status !== 0) {
+		throw new Error('Audio fixture generation failed while preparing eval scenarios.')
+	}
+
+	const unresolvedPathList: string[] = []
+	for (const requiredPath of requiredPathList) {
+		if (!(await pathExists(requiredPath))) {
+			unresolvedPathList.push(requiredPath)
+		}
+	}
+	if (unresolvedPathList.length > 0) {
+		throw new Error(`Missing required eval audio fixtures: ${unresolvedPathList.join(', ')}`)
+	}
+}
+
+async function waitForCondition(
+	condition: () => Promise<boolean>,
+	timeoutMilliseconds: number,
+	errorMessage: string
+): Promise<void> {
+	const startTime = Date.now()
+	while (Date.now() - startTime <= timeoutMilliseconds) {
+		const passed = await condition()
+		if (passed) return
+		await new Promise(resolveTimeout => setTimeout(resolveTimeout, 350))
+	}
+	throw new Error(errorMessage)
+}
+
+async function switchToModeWithRetry(
+	page: Page,
+	targetMode: 'chat' | 'translate',
+	maxAttempts = 3
+): Promise<void> {
+	const triggerTestId = targetMode === 'chat' ? 'mode-tab-chat' : 'mode-tab-translate'
+	for (let attempt = 1; attempt <= maxAttempts; attempt += 1) {
+		await page.keyboard.press('Escape').catch(() => {})
+		await page.getByTestId(triggerTestId).click({ timeout: 15_000 })
+		try {
+			await waitForCondition(
+				async function hasTargetModeTabState(): Promise<boolean> {
+					const stateAttributeValue = await page.getByTestId(triggerTestId).getAttribute('data-state')
+					return stateAttributeValue === 'active'
+				},
+				8_000,
+				`Mode switch to ${targetMode} did not complete.`
+			)
+			return
+		} catch {
+			if (attempt === maxAttempts) {
+				throw new Error(`Mode switch to ${targetMode} did not complete.`)
+			}
+		}
+	}
+}
+
+async function ensureVoiceInputEnabled(page: Page): Promise<void> {
+	const voiceToggle = page.getByTestId('header-voice-input-toggle')
+	await voiceToggle.waitFor({ state: 'visible', timeout: 10_000 })
+	const ariaLabel = (await voiceToggle.getAttribute('aria-label')) ?? ''
+	if (ariaLabel.toLowerCase().includes('enable microphone')) {
+		await voiceToggle.click()
+		await page.waitForTimeout(500)
+	}
+}
+
+async function openTranslateLanguagePicker(page: Page): Promise<void> {
+	const desktopButton = page.getByTestId('translate-language-picker-open-desktop')
+	if (await desktopButton.isVisible().catch(() => false)) {
+		await desktopButton.click()
+		return
+	}
+	await page.getByTestId('translate-language-picker-open-mobile').click()
+}
+
+async function setTranslateLanguagePair(
+	page: Page,
+	languagePair: { from: string; to: string }
+): Promise<void> {
+	await openTranslateLanguagePicker(page)
+
+	const primarySearchInput = page.getByTestId('translate-primary-language-search')
+	await primarySearchInput.fill(languagePair.from)
+	await page
+		.getByTestId(`translate-primary-language-option-${languagePair.from.toLowerCase()}`)
+		.click()
+
+	const secondarySearchInput = page.getByTestId('translate-secondary-language-search')
+	await secondarySearchInput.fill(languagePair.to)
+	await page
+		.getByTestId(`translate-secondary-language-option-${languagePair.to.toLowerCase()}`)
+		.click()
+	await page.keyboard.press('Escape').catch(() => {})
+}
+
+async function installEvalCaptureHooks(page: Page): Promise<void> {
+	await page.addInitScript(() => {
+		const globalWindow = window as typeof window & {
+			__lilacTestBus?: {
+				assistantAudioElement: HTMLAudioElement | null
+				eventLog: unknown[]
+			}
+			__lilacEvalCapture?: {
+				startAssistantAudioRecorder: () => Promise<boolean>
+				stopAssistantAudioRecorder: () => Promise<null | { base64: string; mimeType: string }>
+			}
+		}
+		globalWindow.__lilacEvalCapture = {
+			async startAssistantAudioRecorder(): Promise<boolean> {
+				const lilacTestBus = globalWindow.__lilacTestBus
+				const audioElement = lilacTestBus?.assistantAudioElement
+				if (!(audioElement instanceof HTMLAudioElement)) return false
+				const audioStream = audioElement.srcObject
+				if (!(audioStream instanceof MediaStream)) return false
+				const audioTrackList = audioStream.getAudioTracks()
+				if (audioTrackList.length === 0) return false
+				const captureWindow = globalWindow as typeof globalWindow & {
+					__lilacEvalActiveRecorder?: MediaRecorder | null
+					__lilacEvalAudioChunkList?: Blob[]
+					__lilacEvalRecorderMimeType?: string
+				}
+				if (captureWindow.__lilacEvalActiveRecorder) return true
+				const preferredMimeType = MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
+					? 'audio/webm;codecs=opus'
+					: 'audio/webm'
+				captureWindow.__lilacEvalAudioChunkList = []
+				captureWindow.__lilacEvalRecorderMimeType = preferredMimeType
+				const mediaRecorder = new MediaRecorder(audioStream, { mimeType: preferredMimeType })
+				mediaRecorder.addEventListener('dataavailable', event => {
+					if (!event.data || event.data.size === 0) return
+					captureWindow.__lilacEvalAudioChunkList?.push(event.data)
+				})
+				mediaRecorder.start(250)
+				captureWindow.__lilacEvalActiveRecorder = mediaRecorder
+				return true
+			},
+			async stopAssistantAudioRecorder(): Promise<null | { base64: string; mimeType: string }> {
+				const captureWindow = globalWindow as typeof globalWindow & {
+					__lilacEvalActiveRecorder?: MediaRecorder | null
+					__lilacEvalAudioChunkList?: Blob[]
+					__lilacEvalRecorderMimeType?: string
+				}
+				const mediaRecorder = captureWindow.__lilacEvalActiveRecorder
+				if (!mediaRecorder) return null
+				const blob = await new Promise<Blob>(resolve => {
+					mediaRecorder.addEventListener(
+						'stop',
+						() => {
+							resolve(
+								new Blob(captureWindow.__lilacEvalAudioChunkList ?? [], {
+									type: captureWindow.__lilacEvalRecorderMimeType ?? 'audio/webm'
+								})
+							)
+						},
+						{ once: true }
+					)
+					mediaRecorder.stop()
+				})
+				captureWindow.__lilacEvalActiveRecorder = null
+				captureWindow.__lilacEvalAudioChunkList = []
+				const arrayBuffer = await blob.arrayBuffer()
+				const byteArray = new Uint8Array(arrayBuffer)
+				let binaryString = ''
+				for (let byteIndex = 0; byteIndex < byteArray.length; byteIndex += 1) {
+					binaryString += String.fromCharCode(byteArray[byteIndex] ?? 0)
+				}
+				return {
+					base64: btoa(binaryString),
+					mimeType: blob.type || captureWindow.__lilacEvalRecorderMimeType || 'audio/webm'
+				}
+			}
+		}
+	})
+}
+
+function convertConsoleMessageToString(consoleMessage: ConsoleMessage): string {
+	return `[${consoleMessage.type()}] ${consoleMessage.text()}`
+}
+
+async function startScenarioArtifactCollectors(
+	page: Page,
+	scenarioArtifactDirectoryPath: string
+): Promise<ScenarioArtifactCollectors> {
+	const screenshotDirectoryPath = join(scenarioArtifactDirectoryPath, 'screenshots')
+	const domSnapshotDirectoryPath = join(scenarioArtifactDirectoryPath, 'dom-snapshots')
+	await mkdir(screenshotDirectoryPath, { recursive: true })
+	await mkdir(domSnapshotDirectoryPath, { recursive: true })
+
+	const consoleEntryList: string[] = []
+	const handleConsoleMessage = (consoleMessage: ConsoleMessage): void => {
+		consoleEntryList.push(convertConsoleMessageToString(consoleMessage))
+	}
+	const handlePageError = (error: Error): void => {
+		consoleEntryList.push(`[pageerror] ${error.message}`)
+	}
+	page.on('console', handleConsoleMessage)
+	page.on('pageerror', handlePageError)
+
+	let screenshotSequence = 0
+	let isStopped = false
+	let previousEventCount = -1
+	const intervalId = setInterval(async () => {
+		if (isStopped) return
+		try {
+			const eventCount = await page.evaluate(() => window.__lilacTestBus?.eventLog.length ?? 0)
+			if (eventCount === previousEventCount && screenshotSequence > 0) return
+			previousEventCount = eventCount
+			screenshotSequence += 1
+			const screenshotPath = join(
+				screenshotDirectoryPath,
+				`${String(screenshotSequence).padStart(3, '0')}-events-${eventCount}.png`
+			)
+			const htmlPath = join(
+				domSnapshotDirectoryPath,
+				`${String(screenshotSequence).padStart(3, '0')}-events-${eventCount}.html`
+			)
+			await page.screenshot({ fullPage: true, path: screenshotPath })
+			await writeFile(htmlPath, await page.content(), 'utf8')
+		} catch (error) {
+			consoleEntryList.push(
+				`[collector] ${error instanceof Error ? error.message : 'collector capture failed'}`
+			)
+		}
+	}, 1200)
+
+	return {
+		consoleEntryList,
+		async stop(): Promise<void> {
+			isStopped = true
+			clearInterval(intervalId)
+			page.off('console', handleConsoleMessage)
+			page.off('pageerror', handlePageError)
+		}
+	}
+}
+
+async function getTestBusEventList(page: Page) {
+	const rawEventList = await page.evaluate(() => window.__lilacTestBus?.eventLog ?? [])
+	return z.array(LilacTestBusEventSchema).parse(rawEventList)
+}
+
+function isAssistantAudioStateEvent(
+	event: ParsedLilacTestBusEvent
+): event is AssistantAudioStateEvent {
+	return event.eventType === 'assistant_audio_state_changed'
+}
+
+function isChatTranscriptEvent(event: ParsedLilacTestBusEvent): event is ChatTranscriptEvent {
+	return event.eventType === 'chat_transcript_patch'
+}
+
+function isSubtitleStateEvent(event: ParsedLilacTestBusEvent): event is SubtitleStateEvent {
+	return event.eventType === 'subtitle_state_changed'
+}
+
+function isTranslateCardEvent(event: ParsedLilacTestBusEvent): event is TranslateCardEvent {
+	return event.eventType === 'translate_card_patch'
+}
+
+function isVisibleErrorEvent(event: ParsedLilacTestBusEvent): event is VisibleErrorEvent {
+	return event.eventType === 'visible_error_changed'
+}
+
+async function maybeStartAssistantAudioRecorder(page: Page): Promise<boolean> {
+	return page.evaluate(async () => {
+		const globalWindow = window as typeof window & {
+			__lilacEvalCapture?: {
+				startAssistantAudioRecorder: () => Promise<boolean>
+			}
+		}
+		return (await globalWindow.__lilacEvalCapture?.startAssistantAudioRecorder()) ?? false
+	})
+}
+
+async function stopAssistantAudioRecorder(
+	page: Page,
+	audioArtifactDirectoryPath: string,
+	scenarioId: string
+): Promise<null | string> {
+	const recordingResult = await page.evaluate(async () => {
+		const globalWindow = window as typeof window & {
+			__lilacEvalCapture?: {
+				stopAssistantAudioRecorder: () => Promise<null | { base64: string; mimeType: string }>
+			}
+		}
+		return (await globalWindow.__lilacEvalCapture?.stopAssistantAudioRecorder()) ?? null
+	})
+	if (!recordingResult) return null
+	await mkdir(audioArtifactDirectoryPath, { recursive: true })
+	const webmArtifactPath = join(audioArtifactDirectoryPath, `${scenarioId}.webm`)
+	const wavArtifactPath = join(audioArtifactDirectoryPath, `${scenarioId}.wav`)
+	await writeFile(webmArtifactPath, Buffer.from(recordingResult.base64, 'base64'))
+	const ffmpegResult = spawnSync(
+		'ffmpeg',
+		['-y', '-i', webmArtifactPath, '-ar', '24000', '-ac', '1', wavArtifactPath],
+		{ encoding: 'utf8' }
+	)
+	if (ffmpegResult.status !== 0) {
+		return webmArtifactPath
+	}
+	return wavArtifactPath
+}
+
+async function configureScenario(page: Page, scenario: EvalScenarioSpec): Promise<void> {
+	await switchToModeWithRetry(page, scenario.mode)
+	await ensureVoiceInputEnabled(page)
+	if (scenario.mode !== 'translate') return
+	const languagePair = scenario.languageExpectation.pair
+	if (!languagePair) return
+	await setTranslateLanguagePair(page, languagePair)
+}
+
+async function submitScenarioInput(page: Page, scenario: EvalScenarioSpec): Promise<number> {
+	const startedAt = Date.now()
+	switch (scenario.mode) {
+		case 'chat': {
+			if (scenario.inputType === 'text') {
+				const typedText = scenario.typedText ?? scenario.promptText ?? ''
+				await page.getByTestId('chat-text-input').fill(typedText)
+				await page.getByTestId('chat-text-send').click()
+			}
+			return startedAt
+		}
+		case 'translate': {
+			if (scenario.inputType === 'text') {
+				const typedText = scenario.typedText ?? scenario.promptText ?? ''
+				await page.getByTestId('translate-text-input').fill(typedText)
+				await page.getByTestId('translate-text-send').click()
+			}
+			return startedAt
+		}
+		default:
+			return startedAt
+	}
+}
+
+function collectVisibleErrorTextList(testBusEventList: ParsedLilacTestBusEvent[]): string[] {
+	return testBusEventList
+		.filter(isVisibleErrorEvent)
+		.map(event => event.errorMessage)
+		.filter((value): value is string => typeof value === 'string' && value.length > 0)
+}
+
+function findFirstEventTimestamp(
+	testBusEventList: ParsedLilacTestBusEvent[],
+	predicate: (event: ParsedLilacTestBusEvent) => boolean,
+	startedAt: number
+): number | undefined {
+	const matchedEvent = testBusEventList.find(predicate)
+	if (!matchedEvent) return undefined
+	return matchedEvent.occurredAt - startedAt
+}
+
+function buildLatencyMetrics(
+	testBusEventList: ParsedLilacTestBusEvent[],
+	scenario: EvalScenarioSpec,
+	startedAt: number
+): Record<string, number> {
+	const latencyMetrics: Record<string, number> = {}
+	if (scenario.mode === 'chat') {
+		const assistantTextFirstMs = findFirstEventTimestamp(
+			testBusEventList,
+			event => isChatTranscriptEvent(event) && event.role === 'assistant',
+			startedAt
+		)
+		if (typeof assistantTextFirstMs === 'number') {
+			latencyMetrics.assistantTextFirstMs = assistantTextFirstMs
+		}
+		const assistantAudioStartMs = findFirstEventTimestamp(
+			testBusEventList,
+			event => isAssistantAudioStateEvent(event) && event.isPlaying,
+			startedAt
+		)
+		if (typeof assistantAudioStartMs === 'number') {
+			latencyMetrics.assistantAudioStartMs = assistantAudioStartMs
+		}
+		return latencyMetrics
+	}
+	const firstVisibleSourceMs = findFirstEventTimestamp(
+		testBusEventList,
+		event => isTranslateCardEvent(event) && event.sourceText.trim().length > 0,
+		startedAt
+	)
+	if (typeof firstVisibleSourceMs === 'number') {
+		latencyMetrics.firstVisibleSourceMs = firstVisibleSourceMs
+	}
+	const firstVisibleDraftMs = findFirstEventTimestamp(
+		testBusEventList,
+		event =>
+			isTranslateCardEvent(event) &&
+			event.renderState === 'draft' &&
+			event.targetText.trim().length > 0,
+		startedAt
+	)
+	if (typeof firstVisibleDraftMs === 'number') {
+		latencyMetrics.firstVisibleDraftMs = firstVisibleDraftMs
+	}
+	const finalOutputMs = findFirstEventTimestamp(
+		testBusEventList,
+		event =>
+			isTranslateCardEvent(event) &&
+			event.renderState === 'final' &&
+			event.targetText.trim().length > 0,
+		startedAt
+	)
+	if (typeof finalOutputMs === 'number') {
+		latencyMetrics.finalOutputMs = finalOutputMs
+	}
+	return latencyMetrics
+}
+
+async function waitForScenarioCompletion(page: Page, scenario: EvalScenarioSpec): Promise<void> {
+	switch (scenario.mode) {
+		case 'chat': {
+			await waitForCondition(
+				async () => {
+					const eventList = await getTestBusEventList(page)
+					const hasUserTranscript = eventList.some(
+						event => isChatTranscriptEvent(event) && event.role === 'user'
+					)
+					const hasAssistantTranscript = eventList.some(
+						event => isChatTranscriptEvent(event) && event.role === 'assistant'
+					)
+					return hasUserTranscript && hasAssistantTranscript
+				},
+				35_000,
+				'Chat scenario did not produce user and assistant transcript output.'
+			)
+			return
+		}
+		case 'translate': {
+			await waitForCondition(
+				async () => {
+					const eventList = await getTestBusEventList(page)
+					const hasDraft = eventList.some(
+						event => isTranslateCardEvent(event) && event.renderState === 'draft'
+					)
+					const hasFinal = eventList.some(
+						event => isTranslateCardEvent(event) && event.renderState === 'final'
+					)
+					return hasDraft && hasFinal
+				},
+				35_000,
+				'Translate scenario did not produce draft and final translation output.'
+			)
+			return
+		}
+		default:
+			return
+	}
+}
+
+async function writeJsonLines(filePath: string, entryList: unknown[]): Promise<void> {
+	const fileContent = entryList.map(entry => JSON.stringify(entry)).join('\n')
+	await writeFile(filePath, fileContent ? `${fileContent}\n` : '', 'utf8')
+}
+
+async function runScenario(input: {
+	scenario: EvalScenarioSpec
+	suiteArtifactDirectoryPath: string
+	targetUrl: string
+}): Promise<Omit<ScenarioObservation, 'runtimeLogMatchList'>> {
+	const scenarioArtifactDirectoryPath = join(input.suiteArtifactDirectoryPath, input.scenario.id)
+	const screenshotDirectoryPath = join(scenarioArtifactDirectoryPath, 'screenshots')
+	const domSnapshotDirectoryPath = join(scenarioArtifactDirectoryPath, 'dom-snapshots')
+	const audioArtifactDirectoryPath = join(scenarioArtifactDirectoryPath, 'audio-output')
+	const bodyTextPath = join(scenarioArtifactDirectoryPath, 'body.txt')
+	const pageHtmlPath = join(scenarioArtifactDirectoryPath, 'page.html')
+	const rawTestBusPath = join(scenarioArtifactDirectoryPath, 'test-bus.jsonl')
+	await mkdir(scenarioArtifactDirectoryPath, { recursive: true })
+
+	const fakeAudioFixturePath =
+		input.scenario.audioFixturePath && input.scenario.inputType !== 'text'
+			? input.scenario.audioFixturePath
+			: defaultSilentAudioFixturePath
+
+	const browser = await chromium.launch({
+		args: [
+			'--use-fake-ui-for-media-stream',
+			'--use-fake-device-for-media-stream',
+			`--use-file-for-fake-audio-capture=${fakeAudioFixturePath}`
+		],
+		headless: true
+	})
+
+	let context: BrowserContext | null = null
+	let collector: ScenarioArtifactCollectors | null = null
+	let page: Page | null = null
+	const harnessFailureList: string[] = []
+	try {
+		context = await browser.newContext({
+			permissions: ['microphone'],
+			viewport: input.scenario.targetViewport ?? defaultViewport
+		})
+		page = await context.newPage()
+		await installEvalCaptureHooks(page)
+		collector = await startScenarioArtifactCollectors(page, scenarioArtifactDirectoryPath)
+		let startedAt = Date.now()
+		try {
+			await page.goto(input.targetUrl, { timeout: 120_000, waitUntil: 'domcontentloaded' })
+			await configureScenario(page, input.scenario)
+			startedAt = await submitScenarioInput(page, input.scenario)
+			if (input.scenario.mode === 'chat') {
+				await waitForCondition(
+					async () => await maybeStartAssistantAudioRecorder(page as Page),
+					20_000,
+					'Assistant audio recorder could not attach to remote audio stream.'
+				).catch(() => {})
+			}
+			await waitForScenarioCompletion(page, input.scenario)
+			await page.waitForTimeout(1200)
+		} catch (error) {
+			harnessFailureList.push(error instanceof Error ? error.message : 'Scenario execution failed.')
+		}
+		const assistantAudioArtifactPath =
+			input.scenario.mode === 'chat' && page
+				? await stopAssistantAudioRecorder(page, audioArtifactDirectoryPath, input.scenario.id)
+				: null
+		const testBusEventList = page ? await getTestBusEventList(page).catch(() => []) : []
+		const bodyText = page
+			? await page
+					.locator('body')
+					.innerText()
+					.catch(() => '')
+			: ''
+		const domHtml = page ? await page.content().catch(() => '') : ''
+		const latencyMetrics = buildLatencyMetrics(testBusEventList, input.scenario, startedAt)
+		const consoleLogPath = join(scenarioArtifactDirectoryPath, 'browser-console.log')
+		const clientTimelinePath = join(scenarioArtifactDirectoryPath, 'client-timeline.jsonl')
+		const transcriptTimelinePath = join(scenarioArtifactDirectoryPath, 'transcript-timeline.jsonl')
+		const translationTimelinePath = join(scenarioArtifactDirectoryPath, 'translation-timeline.jsonl')
+		const consoleEntryList = collector?.consoleEntryList ?? []
+		await writeFile(bodyTextPath, bodyText, 'utf8')
+		await writeFile(pageHtmlPath, domHtml, 'utf8')
+		await writeFile(consoleLogPath, `${consoleEntryList.join('\n')}\n`, 'utf8')
+		await writeJsonLines(clientTimelinePath, testBusEventList)
+		await writeJsonLines(rawTestBusPath, testBusEventList)
+		await writeJsonLines(
+			transcriptTimelinePath,
+			testBusEventList.filter(event => isChatTranscriptEvent(event) || isSubtitleStateEvent(event))
+		)
+		await writeJsonLines(translationTimelinePath, testBusEventList.filter(isTranslateCardEvent))
+		return {
+			artifactBundle: {
+				artifactDirectoryPath: scenarioArtifactDirectoryPath,
+				...(assistantAudioArtifactPath ? { assistantAudioArtifactPath } : {}),
+				bodyTextPath,
+				browserConsoleLogPath: consoleLogPath,
+				clientTimelinePath,
+				domSnapshotDirectoryPath,
+				mode: input.scenario.mode,
+				pageHtmlPath,
+				rawTestBusPath,
+				scenarioId: input.scenario.id,
+				screenshotDirectoryPath,
+				targetUrl: input.targetUrl,
+				transcriptTimelinePath,
+				translationTimelinePath
+			},
+			bodyText,
+			browserConsoleEntryList: consoleEntryList,
+			domHtml,
+			errorTextList: collectVisibleErrorTextList(testBusEventList),
+			harnessFailureList,
+			latencyMetrics,
+			scenario: input.scenario,
+			testBusEventList,
+			...(assistantAudioArtifactPath ? { assistantAudioArtifactPath } : {})
+		}
+	} finally {
+		if (collector) await collector.stop()
+		if (context) await context.close()
+		await browser.close()
+	}
+}
+
+async function runMobileLayoutChecks(input: {
+	suiteArtifactDirectoryPath: string
+	targetUrl: string
+}): Promise<string[]> {
+	const findingList: string[] = []
+	const artifactDirectoryPath = join(input.suiteArtifactDirectoryPath, 'mobile-layout')
+	await mkdir(artifactDirectoryPath, { recursive: true })
+	for (const colorScheme of ['light', 'dark'] as const) {
+		for (const viewport of mobileViewportList) {
+			const browser: Browser = await chromium.launch({ headless: true })
+			const context = await browser.newContext({
+				colorScheme,
+				permissions: ['microphone'],
+				viewport
+			})
+			const page = await context.newPage()
+			try {
+				await page.goto(input.targetUrl, { timeout: 120_000, waitUntil: 'domcontentloaded' })
+				await switchToModeWithRetry(page, 'translate')
+				const hasHorizontalOverflow = await page.evaluate(() => {
+					return document.documentElement.scrollWidth > window.innerWidth + 1
+				})
+				const hasVerticalGrowth = await page.evaluate(() => {
+					return document.documentElement.scrollHeight > window.innerHeight + 1
+				})
+				const screenshotPath = join(
+					artifactDirectoryPath,
+					`${colorScheme}-${viewport.width}x${viewport.height}.png`
+				)
+				await page.screenshot({ fullPage: true, path: screenshotPath })
+				if (hasHorizontalOverflow) {
+					findingList.push(`horizontal overflow at ${colorScheme} ${viewport.width}x${viewport.height}`)
+				}
+				if (hasVerticalGrowth) {
+					findingList.push(
+						`vertical document growth at ${colorScheme} ${viewport.width}x${viewport.height}`
+					)
+				}
+			} finally {
+				await context.close()
+				await browser.close()
+			}
+		}
+	}
+	return findingList
+}
+
+export function selectCandidateConfig(
+	candidateConfigList: EvalCandidateConfig[],
+	candidateId: string
+): EvalCandidateConfig {
+	const selectedCandidateConfig = candidateConfigList.find(
+		candidateConfig => candidateConfig.id === candidateId
+	)
+	if (!selectedCandidateConfig) {
+		throw new Error(`Unknown candidate ID: ${candidateId}`)
+	}
+	return selectedCandidateConfig
+}
+
+function buildFailureClusterList(
+	scenarioJudgmentList: Array<{
+		scenarioId: string
+		severity: 'high' | 'low' | 'medium'
+		reason: string
+	}>
+) {
+	return scenarioJudgmentList.map((scenarioJudgment, index) => ({
+		clusterId: `cluster-${String(index + 1).padStart(2, '0')}`,
+		reason: scenarioJudgment.reason,
+		scenarioIds: [scenarioJudgment.scenarioId],
+		severity: scenarioJudgment.severity
+	}))
+}
+
+export async function loadEvalMatrix(matrixPath: string) {
+	const matrixContent = await readFile(matrixPath, 'utf8')
+	return EvalMatrixSchema.parse(JSON.parse(matrixContent))
+}
+
+export async function executeEvalSuite(input: EvalRunOptions): Promise<EvalRunExecution> {
+	const evaluationId = input.evaluationId ?? createEvaluationId()
+	const suiteArtifactDirectoryPath = resolve(
+		process.cwd(),
+		'.artifacts/evals',
+		createTimestampLabel(),
+		evaluationId
+	)
+	await mkdir(suiteArtifactDirectoryPath, { recursive: true })
+	await mkdir(dirname(defaultSilentAudioFixturePath), { recursive: true })
+
+	let runtimeLogCapture: RuntimeLogCapture | null = null
+	if (input.captureVercelLogs) {
+		runtimeLogCapture = await startVercelRuntimeLogCapture({
+			artifactDirectoryPath: suiteArtifactDirectoryPath,
+			deploymentDomain: new URL(input.targetUrl).host,
+			...(process.env.VERCEL_TOKEN ? { vercelToken: process.env.VERCEL_TOKEN } : {})
+		})
+	}
+
+	const scenarioList = resolveEvalScenarioList(input.scenarioIdList)
+	await ensureAudioFixturesReady(scenarioList)
+	const observationList: ScenarioObservation[] = []
+	try {
+		for (const scenario of scenarioList) {
+			const observation = await runScenario({
+				scenario,
+				suiteArtifactDirectoryPath,
+				targetUrl: input.targetUrl
+			})
+			observationList.push({
+				...observation,
+				runtimeLogMatchList: []
+			})
+		}
+	} finally {
+		if (runtimeLogCapture) await runtimeLogCapture.stop()
+	}
+
+	const runtimeLogMatchList = runtimeLogCapture
+		? await collectRuntimeErrorMatches(runtimeLogCapture.stdoutPath)
+		: []
+	for (const observation of observationList) {
+		observation.runtimeLogMatchList = runtimeLogMatchList
+		observation.artifactBundle = {
+			...observation.artifactBundle,
+			...(runtimeLogCapture ? { runtimeLogPath: runtimeLogCapture.stdoutPath } : {}),
+			...(runtimeLogCapture ? { runtimeStderrPath: runtimeLogCapture.stderrPath } : {})
+		}
+	}
+	const layoutFindingList = await runMobileLayoutChecks({
+		suiteArtifactDirectoryPath,
+		targetUrl: input.targetUrl
+	})
+
+	const scenarioRunSummaryList = [] as z.infer<typeof EvalScenarioRunSummarySchema>[]
+	const suiteJudgeResultList = [] as Array<
+		z.infer<typeof EvalRunSummarySchema>['scorecard']['judgeResults'][number]
+	>
+	const suiteHardGateFindingList = [] as z.infer<
+		typeof EvalRunSummarySchema
+	>['scorecard']['hardGateResults']
+	const failureClusterSeedList: Array<{
+		scenarioId: string
+		severity: 'high' | 'low' | 'medium'
+		reason: string
+	}> = []
+
+	for (const observation of observationList) {
+		observation.runtimeLogMatchList = runtimeLogMatchList
+		const hardGuardrailJudgment = await runHardGuardrailJudge(observation)
+		const audioInputJudgeResult = await runAudioInputReferenceJudge(observation)
+		const audioOutputJudgeResult = await runAudioOutputListenerJudge(observation)
+		const visualJudgeResult = await runVisualUiJudge(observation)
+		const semanticJudgeResult = await runSemanticConversationJudge(observation)
+		const judgeResultList = [
+			...hardGuardrailJudgment.judgeResultList,
+			audioInputJudgeResult,
+			audioOutputJudgeResult,
+			visualJudgeResult,
+			semanticJudgeResult
+		]
+		const scorecard = buildScenarioScorecard({
+			hardGateFindingList: hardGuardrailJudgment.hardGateFindingList,
+			judgeResultList
+		})
+		scenarioRunSummaryList.push(
+			EvalScenarioRunSummarySchema.parse({
+				artifactBundle: observation.artifactBundle,
+				latencyMetrics: observation.latencyMetrics,
+				scenario: observation.scenario,
+				scorecard
+			})
+		)
+		suiteJudgeResultList.push(...judgeResultList)
+		suiteHardGateFindingList.push(...hardGuardrailJudgment.hardGateFindingList)
+		for (const failureClusterReason of hardGuardrailJudgment.failureClusterReasonList) {
+			failureClusterSeedList.push({
+				reason: failureClusterReason.reason,
+				scenarioId: observation.scenario.id,
+				severity: failureClusterReason.severity
+			})
+		}
+	}
+
+	for (const layoutFinding of layoutFindingList) {
+		suiteHardGateFindingList.push({
+			code: 'mobile_layout_regression',
+			details: layoutFinding,
+			severity: 'medium'
+		})
+		failureClusterSeedList.push({
+			reason: layoutFinding,
+			scenarioId: 'mobile-layout',
+			severity: 'medium'
+		})
+	}
+
+	const suiteAggregateScore =
+		suiteJudgeResultList.reduce((scoreSum, judgeResult) => scoreSum + judgeResult.score, 0) /
+		Math.max(1, suiteJudgeResultList.length)
+	const suiteReleaseDecision =
+		suiteHardGateFindingList.some(finding => finding.severity === 'high') ||
+		suiteJudgeResultList.some(judgeResult => !judgeResult.passed) ||
+		suiteJudgeResultList.some(judgeResult =>
+			judgeResult.findings.some(finding => finding.severity === 'high')
+		)
+			? 'block'
+			: suiteAggregateScore >= 0.92
+				? 'promote'
+				: suiteAggregateScore >= 0.75
+					? 'candidate'
+					: 'block'
+	const failureClusterList = buildFailureClusterList(failureClusterSeedList)
+	const runSummary = EvalRunSummarySchema.parse({
+		appCommitSha: getGitCommitSha(),
+		artifactDirectoryPath: suiteArtifactDirectoryPath,
+		candidateConfig: input.candidateConfig,
+		deployedUrl: input.targetUrl,
+		evaluationId,
+		failureClusterList,
+		scenarioRunSummaryList,
+		scorecard: {
+			aggregateScore: Math.round(suiteAggregateScore * 1000) / 1000,
+			hardGateResults: suiteHardGateFindingList,
+			judgeResults: suiteJudgeResultList,
+			regressionDeltas: {},
+			releaseDecision: suiteReleaseDecision
+		},
+		startedAtIso: new Date().toISOString()
+	})
+
+	const summaryPath = join(suiteArtifactDirectoryPath, 'summary.json')
+	await writeFile(summaryPath, JSON.stringify(runSummary, null, 2), 'utf8')
+	const leaderboardPath = resolve(process.cwd(), '.artifacts/evals/leaderboard.json')
+	let previousLeaderboard: unknown[] = []
+	try {
+		previousLeaderboard = JSON.parse(await readFile(leaderboardPath, 'utf8')) as unknown[]
+	} catch {
+		previousLeaderboard = []
+	}
+	await mkdir(dirname(leaderboardPath), { recursive: true })
+	await writeFile(
+		leaderboardPath,
+		JSON.stringify(
+			[
+				...previousLeaderboard,
+				{
+					aggregateScore: runSummary.scorecard.aggregateScore,
+					artifactDirectoryPath: runSummary.artifactDirectoryPath,
+					candidateId: runSummary.candidateConfig.id,
+					deployedUrl: runSummary.deployedUrl,
+					evaluationId: runSummary.evaluationId,
+					releaseDecision: runSummary.scorecard.releaseDecision,
+					startedAtIso: runSummary.startedAtIso
+				}
+			],
+			null,
+			2
+		),
+		'utf8'
+	)
+	await writeFile(
+		join(suiteArtifactDirectoryPath, 'observations.json'),
+		JSON.stringify(
+			observationList.map(observation => ({
+				artifactBundle: observation.artifactBundle,
+				bodyText: observation.bodyText,
+				errorTextList: observation.errorTextList,
+				latencyMetrics: observation.latencyMetrics,
+				runtimeLogMatchList: observation.runtimeLogMatchList,
+				scenarioId: observation.scenario.id
+			})),
+			null,
+			2
+		),
+		'utf8'
+	)
+
+	return {
+		observationList,
+		runSummary
+	}
+}
+
+export async function runEvalSuite(input: EvalRunOptions): Promise<EvalRunSummary> {
+	const execution = await executeEvalSuite(input)
+	return execution.runSummary
+}
+
+async function main(): Promise<void> {
+	const parsedArguments = parseArguments(process.argv.slice(2))
+	const evalMatrix = await loadEvalMatrix(parsedArguments.matrixPath)
+	const candidateConfig = selectCandidateConfig(
+		[evalMatrix.baseline, ...evalMatrix.candidateList],
+		parsedArguments.candidateId
+	)
+	const runSummary = await runEvalSuite({
+		candidateConfig,
+		captureVercelLogs: parsedArguments.captureVercelLogs,
+		targetUrl: parsedArguments.targetUrl,
+		...(parsedArguments.evaluationId ? { evaluationId: parsedArguments.evaluationId } : {}),
+		...(parsedArguments.scenarioIdList ? { scenarioIdList: parsedArguments.scenarioIdList } : {})
+	})
+	console.log(JSON.stringify(runSummary, null, 2))
+	if (runSummary.scorecard.releaseDecision === 'block') {
+		throw new Error('Eval suite failed.')
+	}
+}
+
+if (import.meta.main) {
+	void main().catch(error => {
+		console.error(error instanceof Error ? error.message : 'Eval suite failed.')
+		process.exit(1)
+	})
+}
diff --git a/scripts/evals/runtimeTypes.ts b/scripts/evals/runtimeTypes.ts
new file mode 100644
index 0000000..8c3dc1a
--- /dev/null
+++ b/scripts/evals/runtimeTypes.ts
@@ -0,0 +1,30 @@
+import type {
+	EvalArtifactBundle,
+	EvalScenarioSpec,
+	JudgeResult,
+	LilacTestBusEvent
+} from '@/evals/contracts'
+
+export type ScenarioObservation = {
+	artifactBundle: EvalArtifactBundle
+	assistantAudioArtifactPath?: string
+	bodyText: string
+	browserConsoleEntryList: string[]
+	domHtml: string
+	errorTextList: string[]
+	harnessFailureList: string[]
+	latencyMetrics: Record<string, number>
+	runtimeLogMatchList: string[]
+	scenario: EvalScenarioSpec
+	testBusEventList: LilacTestBusEvent[]
+}
+
+export type ScenarioJudgeContext = {
+	observation: ScenarioObservation
+}
+
+export type ScenarioJudgment = {
+	failureClusterReasonList: Array<{ reason: string; severity: 'high' | 'low' | 'medium' }>
+	judgeResultList: JudgeResult[]
+	hardGateFindingList: Array<{ code: string; details: string; severity: 'high' | 'low' | 'medium' }>
+}
diff --git a/scripts/smoke/generateSmokeAudio.ts b/scripts/smoke/generateSmokeAudio.ts
index 4c9cddd..d9920e6 100644
--- a/scripts/smoke/generateSmokeAudio.ts
+++ b/scripts/smoke/generateSmokeAudio.ts
@@ -2,28 +2,85 @@ import { spawnSync } from 'node:child_process'
 import { mkdir, writeFile } from 'node:fs/promises'
 import { join, resolve } from 'node:path'
 
+import { z } from 'zod'
+
 type SmokeAudioPrompt = {
+	expectedTranscript: string
 	fileName: string
-	languageCode: 'en' | 'es'
+	languageCode: 'en' | 'es' | 'uk'
 	text: string
 }
 
-const smokeAudioPrompts: SmokeAudioPrompt[] = [
+const smokeAudioPromptList: SmokeAudioPrompt[] = [
 	{
+		expectedTranscript:
+			'Hello everyone. This is a Lilac translation smoke test. We are validating live production conversation flow.',
 		fileName: 'en_smoke',
 		languageCode: 'en',
 		text:
 			'Hello everyone. This is a Lilac translation smoke test. We are validating live production conversation flow.'
 	},
 	{
+		expectedTranscript:
+			'Hola a todos. Esta es una prueba de humo de traduccion de Lilac. Estamos validando el flujo de conversacion en produccion.',
 		fileName: 'es_smoke',
 		languageCode: 'es',
 		text:
 			'Hola a todos. Esta es una prueba de humo de traduccion de Lilac. Estamos validando el flujo de conversacion en produccion.'
+	},
+	{
+		expectedTranscript: 'Hello Lilac. Can you help me practice Ukrainian today?',
+		fileName: 'chat_question_en',
+		languageCode: 'en',
+		text: 'Hello Lilac. Can you help me practice Ukrainian today?'
+	},
+	{
+		expectedTranscript: 'Hello. I was wondering if you saw the news.',
+		fileName: 'translate_en_simple',
+		languageCode: 'en',
+		text: 'Hello. I was wondering if you saw the news.'
+	},
+	{
+		expectedTranscript: 'Hola. Me preguntaba si viste las noticias.',
+		fileName: 'translate_es_simple',
+		languageCode: 'es',
+		text: 'Hola. Me preguntaba si viste las noticias.'
+	},
+	{
+		expectedTranscript: 'Um hello. So the other day, um, I was wondering, um, did you see the news?',
+		fileName: 'translate_en_fillers',
+		languageCode: 'en',
+		text: 'Um hello. So the other day, um, I was wondering, um, did you see the news?'
+	},
+	{
+		expectedTranscript: 'Привіт. Мені було цікаво, чи бачив ти новини.',
+		fileName: 'translate_uk_simple',
+		languageCode: 'uk',
+		text: 'Привіт. Мені було цікаво, чи бачив ти новини.'
+	},
+	{
+		expectedTranscript:
+			'Hello there. This is a longer Lilac translation evaluation. I am speaking continuously so the subtitle system can be measured for live updates, chunk replacement, and final translation quality over a longer turn.',
+		fileName: 'translate_en_long',
+		languageCode: 'en',
+		text:
+			'Hello there. This is a longer Lilac translation evaluation. I am speaking continuously so the subtitle system can be measured for live updates, chunk replacement, and final translation quality over a longer turn.'
 	}
 ]
 
 const fixturesDirectoryPath = resolve(process.cwd(), '.artifacts/smoke/fixtures')
+const fixtureManifestPath = join(fixturesDirectoryPath, 'fixtures.manifest.json')
+
+const FixtureManifestSchema = z.object({
+	fixtureList: z.array(
+		z.object({
+			expectedTranscript: z.string().min(1),
+			fileName: z.string().min(1),
+			languageCode: z.enum(['en', 'es', 'uk']),
+			wavPath: z.string().min(1)
+		})
+	)
+})
 
 function requireOpenAiApiKey(): string {
 	const openAiApiKey = process.env.OPENAI_API_KEY?.trim()
@@ -33,8 +90,31 @@ function requireOpenAiApiKey(): string {
 	return openAiApiKey
 }
 
-function runFfmpeg(args: string[]): void {
-	const ffmpegResult = spawnSync('ffmpeg', args, { encoding: 'utf8' })
+function buildNoisyFixture(fileName: string): void {
+	const sourceWavPath = join(fixturesDirectoryPath, `${fileName}.fixture.wav`)
+	const noisyOutputPath = join(fixturesDirectoryPath, `${fileName}_noisy.fixture.wav`)
+	runFfmpeg([
+		'-y',
+		'-i',
+		sourceWavPath,
+		'-f',
+		'lavfi',
+		'-i',
+		'anoisesrc=color=white:amplitude=0.02',
+		'-filter_complex',
+		'[0:a][1:a]amix=inputs=2:weights=1 0.18:duration=first:dropout_transition=0',
+		'-ar',
+		'48000',
+		'-ac',
+		'1',
+		'-sample_fmt',
+		's16',
+		noisyOutputPath
+	])
+}
+
+function runFfmpeg(argumentList: string[]): void {
+	const ffmpegResult = spawnSync('ffmpeg', argumentList, { encoding: 'utf8' })
 	if (ffmpegResult.status !== 0) {
 		throw new Error(`ffmpeg failed: ${ffmpegResult.stderr || ffmpegResult.stdout}`)
 	}
@@ -43,6 +123,7 @@ function runFfmpeg(args: string[]): void {
 async function generatePromptAudio(prompt: SmokeAudioPrompt, openAiApiKey: string): Promise<void> {
 	const mp3OutputPath = join(fixturesDirectoryPath, `${prompt.fileName}.mp3`)
 	const wavOutputPath = join(fixturesDirectoryPath, `${prompt.fileName}.wav`)
+	const paddedOutputPath = join(fixturesDirectoryPath, `${prompt.fileName}.fixture.wav`)
 
 	const ttsResponse = await fetch('https://api.openai.com/v1/audio/speech', {
 		body: JSON.stringify({
@@ -77,6 +158,29 @@ async function generatePromptAudio(prompt: SmokeAudioPrompt, openAiApiKey: strin
 		's16',
 		wavOutputPath
 	])
+
+	runFfmpeg([
+		'-y',
+		'-f',
+		'lavfi',
+		'-i',
+		'anullsrc=r=48000:cl=mono:d=1.5',
+		'-i',
+		wavOutputPath,
+		'-f',
+		'lavfi',
+		'-i',
+		'anullsrc=r=48000:cl=mono:d=1.5',
+		'-filter_complex',
+		'[0:a][1:a][2:a]concat=n=3:v=0:a=1',
+		'-ar',
+		'48000',
+		'-ac',
+		'1',
+		'-sample_fmt',
+		's16',
+		paddedOutputPath
+	])
 }
 
 function buildConversationFixture(): void {
@@ -122,15 +226,48 @@ function buildConversationFixture(): void {
 	])
 }
 
+function buildSilentFixture(): void {
+	const silentOutputPath = join(fixturesDirectoryPath, 'silence_5s.wav')
+	runFfmpeg([
+		'-y',
+		'-f',
+		'lavfi',
+		'-i',
+		'anullsrc=r=48000:cl=mono:d=5',
+		'-ar',
+		'48000',
+		'-ac',
+		'1',
+		'-sample_fmt',
+		's16',
+		silentOutputPath
+	])
+}
+
+async function writeFixtureManifest(): Promise<void> {
+	const manifest = FixtureManifestSchema.parse({
+		fixtureList: smokeAudioPromptList.map(prompt => ({
+			expectedTranscript: prompt.expectedTranscript,
+			fileName: prompt.fileName,
+			languageCode: prompt.languageCode,
+			wavPath: join(fixturesDirectoryPath, `${prompt.fileName}.fixture.wav`)
+		}))
+	})
+	await writeFile(fixtureManifestPath, JSON.stringify(manifest, null, 2), 'utf8')
+}
+
 async function main(): Promise<void> {
 	const openAiApiKey = requireOpenAiApiKey()
 	await mkdir(fixturesDirectoryPath, { recursive: true })
 
-	for (const prompt of smokeAudioPrompts) {
+	for (const prompt of smokeAudioPromptList) {
 		await generatePromptAudio(prompt, openAiApiKey)
 	}
 
+	buildNoisyFixture('translate_en_fillers')
 	buildConversationFixture()
+	buildSilentFixture()
+	await writeFixtureManifest()
 
 	console.log(`Smoke fixtures generated in ${fixturesDirectoryPath}`)
 }
diff --git a/src/app/(app)/ChatMode.tsx b/src/app/(app)/ChatMode.tsx
index 505cd99..15bcf1d 100644
--- a/src/app/(app)/ChatMode.tsx
+++ b/src/app/(app)/ChatMode.tsx
@@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Textarea } from '@/components/ui/textarea'
+import { emitLilacTestBusEvent, setLilacTestAssistantAudioElement } from '@/evals/testBus'
 import { useLilacModeRuntime } from '@/realtime/modeRuntimeStore'
 
 export default function ChatMode() {
@@ -55,13 +56,39 @@ export default function ChatMode() {
 		}
 		const playbackAudioElement = playbackAudioElementRef.current
 		if (!playbackAudioElement) return
+		setLilacTestAssistantAudioElement(playbackAudioElement)
+
+		function handlePlaying(): void {
+			emitLilacTestBusEvent({
+				eventType: 'assistant_audio_state_changed',
+				isPlaying: true
+			})
+		}
+
+		function handleStopped(): void {
+			emitLilacTestBusEvent({
+				eventType: 'assistant_audio_state_changed',
+				isPlaying: false
+			})
+		}
+
+		playbackAudioElement.addEventListener('ended', handleStopped)
+		playbackAudioElement.addEventListener('pause', handleStopped)
+		playbackAudioElement.addEventListener('playing', handlePlaying)
 		playbackAudioElement.srcObject = chatSpeechOutputEnabled ? remoteAudioStream : null
 		if (chatSpeechOutputEnabled && remoteAudioStream) {
 			void playbackAudioElement.play().catch(() => {})
+		} else {
+			handleStopped()
 		}
 		return () => {
+			playbackAudioElement.removeEventListener('ended', handleStopped)
+			playbackAudioElement.removeEventListener('pause', handleStopped)
+			playbackAudioElement.removeEventListener('playing', handlePlaying)
 			playbackAudioElement.pause()
 			playbackAudioElement.srcObject = null
+			setLilacTestAssistantAudioElement(null)
+			handleStopped()
 		}
 	}, [chatSpeechOutputEnabled, remoteAudioStream])
 
diff --git a/src/app/(app)/ModeShell.tsx b/src/app/(app)/ModeShell.tsx
index 035cca7..52af7c6 100644
--- a/src/app/(app)/ModeShell.tsx
+++ b/src/app/(app)/ModeShell.tsx
@@ -26,8 +26,9 @@ import { Slider } from '@/components/ui/slider'
 import { Switch } from '@/components/ui/switch'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Textarea } from '@/components/ui/textarea'
+import { emitLilacTestBusEvent } from '@/evals/testBus'
 import { useLilacModeRuntime } from '@/realtime/modeRuntimeStore'
-import type { LilacMode } from '@/realtime/sessionTypes'
+import type { ConnectionUiState, LilacMode } from '@/realtime/sessionTypes'
 
 const defaultChatInstructions =
 	'You are Lilac. Help users communicate across languages. Keep answers concise, faithful, and practical.'
@@ -37,32 +38,24 @@ function normalizeTurnDelaySeconds(value: number): number {
 	return Math.round(clampedValue * 10) / 10
 }
 
-function resolveLiveIndicatorLabel(connectionState: string, statusMessage: null | string): string {
-	if (statusMessage === 'Offline. Waiting for network…') return 'Offline'
-	switch (connectionState) {
-		case 'connected':
-			return 'Live'
-		case 'connecting':
-			return 'Connecting'
-		case 'error':
-			return 'Error'
-		default:
-			return statusMessage ? 'Reconnecting' : 'Idle'
-	}
+function resolveLiveIndicatorLabel(connectionUiState: ConnectionUiState): string {
+	if (connectionUiState.isOffline) return 'Offline'
+	if (connectionUiState.isReconnecting) return 'Reconnecting'
+	if (connectionUiState.isLive) return 'Live'
+	if (connectionUiState.statusMessage === 'Connecting…') return 'Connecting'
+	if (connectionUiState.statusMessage === 'Connection error.') return 'Error'
+	return 'Idle'
 }
 
-function resolveLiveIndicatorClass(connectionState: string, statusMessage: null | string): string {
-	if (statusMessage === 'Offline. Waiting for network…') return 'bg-[var(--destructive)]'
-	switch (connectionState) {
-		case 'connected':
-			return 'bg-[var(--lilac-direction-secondary)]'
-		case 'connecting':
-			return 'animate-pulse bg-[var(--lilac-direction-secondary)]/70'
-		case 'error':
-			return 'bg-[var(--destructive)]'
-		default:
-			return 'bg-[var(--lilac-border-strong)]'
+function resolveLiveIndicatorClass(connectionUiState: ConnectionUiState): string {
+	if (connectionUiState.isOffline || connectionUiState.statusMessage === 'Connection error.') {
+		return 'bg-[var(--destructive)]'
 	}
+	if (connectionUiState.isLive) return 'bg-[var(--lilac-direction-secondary)]'
+	if (connectionUiState.isReconnecting || connectionUiState.statusMessage === 'Connecting…') {
+		return 'animate-pulse bg-[var(--lilac-direction-secondary)]/70'
+	}
+	return 'bg-[var(--lilac-border-strong)]'
 }
 
 function renderMode(mode: LilacMode): ReactNode {
@@ -252,6 +245,7 @@ export default function ModeShell() {
 		chatSpeechOutputEnabled,
 		chatTurnDelaySeconds,
 		connectionState,
+		connectionUiState,
 		errorMessage,
 		mode,
 		setChatInstructions,
@@ -266,8 +260,8 @@ export default function ModeShell() {
 	const [draftInstructions, setDraftInstructions] = useState(chatInstructions)
 	const [draftTurnDelaySeconds, setDraftTurnDelaySeconds] = useState(chatTurnDelaySeconds)
 	const [saveMessage, setSaveMessage] = useState('')
-	const liveIndicatorLabel = resolveLiveIndicatorLabel(connectionState, statusMessage)
-	const liveIndicatorClass = resolveLiveIndicatorClass(connectionState, statusMessage)
+	const liveIndicatorLabel = resolveLiveIndicatorLabel(connectionUiState)
+	const liveIndicatorClass = resolveLiveIndicatorClass(connectionUiState)
 
 	useEffect(() => {
 		setDraftInstructions(chatInstructions)
@@ -283,6 +277,28 @@ export default function ModeShell() {
 		return () => window.clearTimeout(timeoutId)
 	}, [saveMessage])
 
+	useEffect(() => {
+		emitLilacTestBusEvent({
+			eventType: 'mode_changed',
+			mode
+		})
+	}, [mode])
+
+	useEffect(() => {
+		emitLilacTestBusEvent({
+			connectionState,
+			eventType: 'connection_state_changed',
+			statusMessage
+		})
+	}, [connectionState, statusMessage])
+
+	useEffect(() => {
+		emitLilacTestBusEvent({
+			errorMessage,
+			eventType: 'visible_error_changed'
+		})
+	}, [errorMessage])
+
 	function saveChatSettings(): void {
 		setChatInstructions(draftInstructions.trim() || defaultChatInstructions)
 		setChatTurnDelaySeconds(normalizeTurnDelaySeconds(draftTurnDelaySeconds))
diff --git a/src/app/actions/realtime.ts b/src/app/actions/realtime.ts
index 0cd6788..5fa2641 100644
--- a/src/app/actions/realtime.ts
+++ b/src/app/actions/realtime.ts
@@ -2,7 +2,7 @@
 
 import {
 	defaultTranscriptionModel,
-	resolveTranscriptionModelForAsrProfile
+	resolveTranscriptionModelFromEnvironment
 } from '@/realtime/modelConfig'
 import {
 	CreateRealtimeClientSecretActionInputSchema,
@@ -51,47 +51,91 @@ async function parseJsonResponse(response: Response): Promise<unknown> {
 	try {
 		return JSON.parse(responseText) as unknown
 	} catch {
-		throw new Error(responseText)
+		return responseText
 	}
 }
 
+function isRetryableOpenAiStatus(status: number): boolean {
+	switch (status) {
+		case 408:
+		case 429:
+		case 500:
+		case 502:
+		case 503:
+		case 504:
+			return true
+		default:
+			return false
+	}
+}
+
+function truncateErrorMessage(message: string, maximumLength = 240): string {
+	return message.length <= maximumLength ? message : `${message.slice(0, maximumLength - 1)}…`
+}
+
+async function waitForRetryDelay(attemptNumber: number): Promise<void> {
+	const delayMilliseconds = 250 * 2 ** Math.max(0, attemptNumber - 1)
+	await new Promise(resolveDelay => setTimeout(resolveDelay, delayMilliseconds))
+}
+
 async function postOpenAi(path: string, body: unknown): Promise<unknown> {
-	const response = await fetch(`${openAiApiBaseUrl}${path}`, {
-		body: JSON.stringify(body),
-		headers: defaultRequestHeaders,
-		method: 'POST'
-	})
+	const maximumAttempts = 3
+	for (let attemptNumber = 1; attemptNumber <= maximumAttempts; attemptNumber += 1) {
+		try {
+			const response = await fetch(`${openAiApiBaseUrl}${path}`, {
+				body: JSON.stringify(body),
+				headers: defaultRequestHeaders,
+				method: 'POST'
+			})
 
-	const payload = await parseJsonResponse(response)
-
-	if (!response.ok) {
-		const fallbackMessage = `OpenAI request failed (${response.status})`
-		if (typeof payload === 'object' && payload !== null && 'error' in payload) {
-			const openAiError = (
-				payload as {
-					error?: {
-						code?: string
-						message?: string
-						param?: string
-						type?: string
-					}
+			const payload = await parseJsonResponse(response)
+
+			if (!response.ok) {
+				const fallbackMessage = `OpenAI request failed (${response.status})`
+				if (typeof payload === 'object' && payload !== null && 'error' in payload) {
+					const openAiError = (
+						payload as {
+							error?: {
+								code?: string
+								message?: string
+								param?: string
+								type?: string
+							}
+						}
+					).error
+					throw new OpenAiRequestError({
+						message: openAiError?.message || fallbackMessage,
+						status: response.status,
+						...(openAiError?.code ? { code: openAiError.code } : {}),
+						...(openAiError?.param ? { param: openAiError.param } : {}),
+						...(openAiError?.type ? { type: openAiError.type } : {})
+					})
 				}
-			).error
-			throw new OpenAiRequestError({
-				message: openAiError?.message || fallbackMessage,
-				status: response.status,
-				...(openAiError?.code ? { code: openAiError.code } : {}),
-				...(openAiError?.param ? { param: openAiError.param } : {}),
-				...(openAiError?.type ? { type: openAiError.type } : {})
-			})
+
+				throw new OpenAiRequestError({
+					message:
+						typeof payload === 'string' && payload.trim()
+							? truncateErrorMessage(payload.trim())
+							: fallbackMessage,
+					status: response.status
+				})
+			}
+
+			return payload
+		} catch (error) {
+			const isRetryableError =
+				error instanceof OpenAiRequestError
+					? isRetryableOpenAiStatus(error.status)
+					: error instanceof Error
+						? /timeout|timed out|gateway time-out|gateway timeout|fetch failed/i.test(error.message)
+						: false
+			if (!isRetryableError || attemptNumber >= maximumAttempts) {
+				throw error
+			}
+			await waitForRetryDelay(attemptNumber)
 		}
-		throw new OpenAiRequestError({
-			message: fallbackMessage,
-			status: response.status
-		})
 	}
-
-	return payload
+	throw new Error('OpenAI request exhausted retry attempts.')
 }
 
 function createTranslateInstructions(
@@ -147,6 +191,10 @@ function buildPublishTranslationToolDefinition(): Record<string, unknown> {
 	}
 }
 
+function buildChatOutputModalities(speechOutputEnabled: boolean): string[] {
+	return [speechOutputEnabled ? 'audio' : 'text']
+}
+
 export async function createRealtimeClientSecretAction(input?: unknown): Promise<{
 	expiresAt: number
 	value: string
@@ -179,7 +227,7 @@ export async function createRealtimeClientSecretAction(input?: unknown): Promise
 			},
 			instructions: parsedInput.instructions ?? '',
 			model: parsedInput.model,
-			output_modalities: [parsedInput.speechOutputEnabled ? 'audio' : 'text'],
+			output_modalities: buildChatOutputModalities(parsedInput.speechOutputEnabled),
 			type: 'realtime'
 		}
 	})
@@ -232,7 +280,7 @@ export async function createRealtimeTranscriptionSessionAction(input: unknown):
 	value: string
 }> {
 	const parsedInput = CreateRealtimeTranscriptionSessionActionInputSchema.parse(input)
-	const transcriptionModel = resolveTranscriptionModelForAsrProfile(parsedInput.asrProfile)
+	const transcriptionModel = resolveTranscriptionModelFromEnvironment(parsedInput.asrProfile)
 
 	const payload = await postOpenAi('/realtime/transcription_sessions', {
 		include: ['item.input_audio_transcription.logprobs'],
diff --git a/src/evals/contracts.ts b/src/evals/contracts.ts
new file mode 100644
index 0000000..632d774
--- /dev/null
+++ b/src/evals/contracts.ts
@@ -0,0 +1,247 @@
+import { z } from 'zod'
+
+import { LanguageCodeSchema } from '@/realtime/schemas'
+
+export const EvalModeSchema = z.enum(['chat', 'translate'])
+export type EvalMode = z.infer<typeof EvalModeSchema>
+
+export const EvalInputTypeSchema = z.enum(['audio', 'mixed', 'text'])
+export type EvalInputType = z.infer<typeof EvalInputTypeSchema>
+
+export const EvalLatencyBandSchema = z.object({
+	assistantAudioStartMs: z.number().int().nonnegative().optional(),
+	assistantTextFirstMs: z.number().int().nonnegative().optional(),
+	finalOutputMs: z.number().int().nonnegative().optional(),
+	firstVisibleDraftMs: z.number().int().nonnegative().optional(),
+	firstVisibleSourceMs: z.number().int().nonnegative().optional()
+})
+export type EvalLatencyBand = z.infer<typeof EvalLatencyBandSchema>
+
+export const EvalLanguageExpectationSchema = z.object({
+	inputLanguageCode: LanguageCodeSchema.optional(),
+	outputLanguageCode: LanguageCodeSchema.optional(),
+	pair: z
+		.object({
+			from: LanguageCodeSchema,
+			to: LanguageCodeSchema
+		})
+		.optional()
+})
+export type EvalLanguageExpectation = z.infer<typeof EvalLanguageExpectationSchema>
+
+export const EvalScenarioSpecSchema = z.object({
+	audioFixturePath: z.string().min(1).optional(),
+	expectedAssistantMeaning: z.string().min(1).optional(),
+	expectedTranslationMeaning: z.string().min(1).optional(),
+	expectedUiStates: z.array(z.string().min(1)).default([]),
+	expectedUserTranscript: z.string().min(1).optional(),
+	id: z.string().min(1),
+	inputType: EvalInputTypeSchema,
+	languageExpectation: EvalLanguageExpectationSchema.default({}),
+	latencyBands: EvalLatencyBandSchema.default({}),
+	mode: EvalModeSchema,
+	promptText: z.string().min(1).optional(),
+	targetViewport: z
+		.object({
+			height: z.number().int().positive(),
+			width: z.number().int().positive()
+		})
+		.optional(),
+	typedText: z.string().min(1).optional()
+})
+export type EvalScenarioSpec = z.infer<typeof EvalScenarioSpecSchema>
+
+export const EvalArtifactBundleSchema = z.object({
+	artifactDirectoryPath: z.string().min(1),
+	assistantAudioArtifactPath: z.string().min(1).optional(),
+	bodyTextPath: z.string().min(1).optional(),
+	browserConsoleLogPath: z.string().min(1),
+	clientTimelinePath: z.string().min(1),
+	domSnapshotDirectoryPath: z.string().min(1),
+	mode: EvalModeSchema,
+	pageHtmlPath: z.string().min(1).optional(),
+	rawTestBusPath: z.string().min(1).optional(),
+	runtimeLogPath: z.string().min(1).optional(),
+	runtimeStderrPath: z.string().min(1).optional(),
+	scenarioId: z.string().min(1),
+	screenshotDirectoryPath: z.string().min(1),
+	targetUrl: z.string().url(),
+	transcriptTimelinePath: z.string().min(1),
+	translationTimelinePath: z.string().min(1)
+})
+export type EvalArtifactBundle = z.infer<typeof EvalArtifactBundleSchema>
+
+export const JudgeFindingSchema = z.object({
+	code: z.string().min(1),
+	details: z.string().min(1),
+	severity: z.enum(['high', 'low', 'medium'])
+})
+export type JudgeFinding = z.infer<typeof JudgeFindingSchema>
+
+export const JudgeResultSchema = z.object({
+	confidence: z.number().min(0).max(1),
+	findings: z.array(JudgeFindingSchema).default([]),
+	judgeId: z.string().min(1),
+	passed: z.boolean(),
+	rationale: z.string().min(1),
+	score: z.number().min(0).max(1)
+})
+export type JudgeResult = z.infer<typeof JudgeResultSchema>
+
+export const EvalScorecardSchema = z.object({
+	aggregateScore: z.number().min(0).max(1),
+	hardGateResults: z.array(JudgeFindingSchema).default([]),
+	judgeResults: z.array(JudgeResultSchema),
+	regressionDeltas: z.record(z.string(), z.number()),
+	releaseDecision: z.enum(['block', 'candidate', 'promote', 'rollback'])
+})
+export type EvalScorecard = z.infer<typeof EvalScorecardSchema>
+
+export const EvalCandidateConfigSchema = z.object({
+	asrModelSlug: z.string().min(1),
+	buildEnvironmentOverrides: z.record(z.string(), z.string()).default({}),
+	chatTurnOrderingProfile: z.string().min(1).default('default'),
+	draftDebounceMilliseconds: z.number().int().positive().optional(),
+	featureFlags: z.record(z.string(), z.boolean()).default({}),
+	id: z.string().min(1),
+	label: z.string().min(1),
+	promptVersionIds: z.record(z.string(), z.string()).default({}),
+	realtimeModelSlug: z.string().min(1),
+	translateCommitIntervalMilliseconds: z.number().int().positive().optional(),
+	translateLanguageGroundingMode: z.string().min(1).default('pair_locked'),
+	translateMinimumCommitAudioMilliseconds: z.number().int().positive().optional()
+})
+export type EvalCandidateConfig = z.infer<typeof EvalCandidateConfigSchema>
+
+export const EvalMatrixSchema = z.object({
+	baseline: EvalCandidateConfigSchema,
+	candidateList: z.array(EvalCandidateConfigSchema).default([]),
+	id: z.string().min(1),
+	version: z.number().int().positive()
+})
+export type EvalMatrix = z.infer<typeof EvalMatrixSchema>
+
+export const FailureClusterSchema = z.object({
+	clusterId: z.string().min(1),
+	reason: z.string().min(1),
+	scenarioIds: z.array(z.string().min(1)).default([]),
+	severity: z.enum(['high', 'low', 'medium'])
+})
+export type FailureCluster = z.infer<typeof FailureClusterSchema>
+
+export const FlywheelPatchProposalSchema = z.object({
+	allowlistedSurfaceList: z.array(z.string().min(1)).min(1),
+	confidence: z.number().min(0).max(1),
+	failureClusterIds: z.array(z.string().min(1)).min(1),
+	filePathList: z.array(z.string().min(1)).default([]),
+	prompt: z.string().min(1),
+	summary: z.string().min(1)
+})
+export type FlywheelPatchProposal = z.infer<typeof FlywheelPatchProposalSchema>
+
+export const FlywheelDecisionSchema = z.object({
+	action: z.enum([
+		'block',
+		'deploy_preview',
+		'promote_to_production',
+		'propose_patch',
+		'report_only',
+		'rollback'
+	]),
+	candidateId: z.string().min(1).optional(),
+	patchProposal: FlywheelPatchProposalSchema.optional(),
+	reasons: z.array(z.string().min(1)).min(1)
+})
+export type FlywheelDecision = z.infer<typeof FlywheelDecisionSchema>
+
+const LilacTestBusBaseEventSchema = z.object({
+	eventId: z.string().min(1),
+	occurredAt: z.number().int().nonnegative()
+})
+
+const LilacModeChangedEventSchema = LilacTestBusBaseEventSchema.extend({
+	eventType: z.literal('mode_changed'),
+	mode: EvalModeSchema
+})
+
+const LilacConnectionStateEventSchema = LilacTestBusBaseEventSchema.extend({
+	connectionState: z.enum(['connected', 'connecting', 'error', 'idle']),
+	eventType: z.literal('connection_state_changed'),
+	statusMessage: z.string().nullable()
+})
+
+const LilacChatTranscriptEventSchema = LilacTestBusBaseEventSchema.extend({
+	eventType: z.literal('chat_transcript_patch'),
+	messageId: z.string().min(1),
+	role: z.enum(['assistant', 'user']),
+	source: z.enum([
+		'input_transcription',
+		'input_text',
+		'response_output_audio_transcript',
+		'response_output_text'
+	]),
+	status: z.enum(['final', 'streaming']),
+	text: z.string()
+})
+
+const LilacTranslateCardEventSchema = LilacTestBusBaseEventSchema.extend({
+	cardId: z.string().min(1),
+	direction: z.enum(['my_to_target', 'target_to_my']),
+	eventType: z.literal('translate_card_patch'),
+	renderState: z.enum(['draft', 'error', 'final', 'listening']),
+	sourceText: z.string(),
+	targetText: z.string()
+})
+
+const LilacSubtitleStateEventSchema = LilacTestBusBaseEventSchema.extend({
+	activeSegmentId: z.string().nullable(),
+	eventType: z.literal('subtitle_state_changed'),
+	isListening: z.boolean(),
+	text: z.string()
+})
+
+const LilacAssistantAudioStateEventSchema = LilacTestBusBaseEventSchema.extend({
+	eventType: z.literal('assistant_audio_state_changed'),
+	isPlaying: z.boolean()
+})
+
+const LilacVisibleErrorEventSchema = LilacTestBusBaseEventSchema.extend({
+	errorMessage: z.string().nullable(),
+	eventType: z.literal('visible_error_changed')
+})
+
+export const LilacTestBusEventSchema = z.discriminatedUnion('eventType', [
+	LilacModeChangedEventSchema,
+	LilacConnectionStateEventSchema,
+	LilacChatTranscriptEventSchema,
+	LilacTranslateCardEventSchema,
+	LilacSubtitleStateEventSchema,
+	LilacAssistantAudioStateEventSchema,
+	LilacVisibleErrorEventSchema
+])
+export type LilacTestBusEvent = z.infer<typeof LilacTestBusEventSchema>
+
+export const EvalScenarioRunSummarySchema = z.object({
+	artifactBundle: EvalArtifactBundleSchema,
+	latencyMetrics: z.record(z.string(), z.number()),
+	scenario: EvalScenarioSpecSchema,
+	scorecard: EvalScorecardSchema
+})
+export type EvalScenarioRunSummary = z.infer<typeof EvalScenarioRunSummarySchema>
+
+export const EvalRunSummarySchema = z.object({
+	appCommitSha: z.string().min(1),
+	artifactDirectoryPath: z.string().min(1),
+	candidateConfig: EvalCandidateConfigSchema,
+	deployedUrl: z.string().url(),
+	evaluationId: z.string().min(1),
+	failureClusterList: z.array(FailureClusterSchema).default([]),
+	scenarioRunSummaryList: z.array(EvalScenarioRunSummarySchema),
+	scorecard: EvalScorecardSchema,
+	startedAtIso: z.string().min(1)
+})
+export type EvalRunSummary = z.infer<typeof EvalRunSummarySchema>
+
+export function createLilacTestBusEventId(): string {
+	return crypto.randomUUID()
+}
diff --git a/src/evals/testBus.ts b/src/evals/testBus.ts
new file mode 100644
index 0000000..f5b1e98
--- /dev/null
+++ b/src/evals/testBus.ts
@@ -0,0 +1,78 @@
+'use client'
+
+import {
+	createLilacTestBusEventId,
+	type LilacTestBusEvent,
+	LilacTestBusEventSchema
+} from '@/evals/contracts'
+
+type LilacTestBusListener = (event: LilacTestBusEvent) => void
+
+type LilacTestBusEventInput = {
+	[EventType in LilacTestBusEvent['eventType']]: Omit<
+		Extract<LilacTestBusEvent, { eventType: EventType }>,
+		'eventId' | 'occurredAt'
+	>
+}[LilacTestBusEvent['eventType']]
+
+type LilacTestBusStore = {
+	assistantAudioElement: HTMLAudioElement | null
+	eventLog: LilacTestBusEvent[]
+	emit: (event: LilacTestBusEventInput) => void
+	subscribe: (listener: LilacTestBusListener) => () => void
+}
+
+declare global {
+	interface Window {
+		__lilacTestBus?: LilacTestBusStore
+	}
+}
+
+function createLilacTestBusStore(): LilacTestBusStore {
+	const listenerSet = new Set<LilacTestBusListener>()
+	const eventLog: LilacTestBusEvent[] = []
+
+	function emit(event: LilacTestBusEventInput): void {
+		const hydratedEvent = LilacTestBusEventSchema.parse({
+			...event,
+			eventId: createLilacTestBusEventId(),
+			occurredAt: Date.now()
+		})
+		eventLog.push(hydratedEvent)
+		listenerSet.forEach(listener => {
+			listener(hydratedEvent)
+		})
+	}
+
+	function subscribe(listener: LilacTestBusListener): () => void {
+		listenerSet.add(listener)
+		return function unsubscribe(): void {
+			listenerSet.delete(listener)
+		}
+	}
+
+	return {
+		assistantAudioElement: null,
+		emit,
+		eventLog,
+		subscribe
+	}
+}
+
+export function getLilacTestBusStore(): LilacTestBusStore | null {
+	if (typeof window === 'undefined') return null
+	if (!window.__lilacTestBus) {
+		window.__lilacTestBus = createLilacTestBusStore()
+	}
+	return window.__lilacTestBus
+}
+
+export function emitLilacTestBusEvent(event: LilacTestBusEventInput): void {
+	getLilacTestBusStore()?.emit(event)
+}
+
+export function setLilacTestAssistantAudioElement(audioElement: HTMLAudioElement | null): void {
+	const store = getLilacTestBusStore()
+	if (!store) return
+	store.assistantAudioElement = audioElement
+}
diff --git a/src/realtime/chatRealtimeClient.ts b/src/realtime/chatRealtimeClient.ts
index a277384..630faa1 100644
--- a/src/realtime/chatRealtimeClient.ts
+++ b/src/realtime/chatRealtimeClient.ts
@@ -8,10 +8,16 @@ import {
 	InputAudioTranscriptionDeltaEventSchema,
 	RealtimeBaseServerEventSchema,
 	RealtimeErrorEventSchema,
+	ResponseContentPartAddedEventSchema,
+	ResponseContentPartDoneEventSchema,
 	ResponseCreatedEventSchema,
 	ResponseDoneEventSchema,
+	ResponseOutputAudioDoneEventSchema,
 	ResponseOutputAudioTranscriptDeltaEventSchema,
+	ResponseOutputAudioTranscriptDoneEventSchema,
 	ResponseOutputItemAddedEventSchema,
+	ResponseOutputItemCreatedEventSchema,
+	ResponseOutputItemDoneEventSchema,
 	ResponseOutputTextDeltaEventSchema,
 	ResponseOutputTextDoneEventSchema
 } from '@/realtime/schemas'
@@ -53,6 +59,10 @@ function createClientItemId(prefix: string): string {
 
 const shouldEmitVerboseRealtimeLogs = process.env.NEXT_PUBLIC_LILAC_VERBOSE_LOGS === 'true'
 
+function buildChatOutputModalities(speechOutputEnabled: boolean): Array<'audio' | 'text'> {
+	return [speechOutputEnabled ? 'audio' : 'text']
+}
+
 function emitChatRealtimeLog(
 	level: 'error' | 'info' | 'warn',
 	event: string,
@@ -85,6 +95,7 @@ export class ChatRealtimeClient {
 	private dataChannel: null | RTCDataChannel = null
 	private generation = 0
 	private localAudioStream: MediaStream | null = null
+	private pendingOutboundEventQueue: Array<Record<string, unknown>> = []
 	private slotByAssistantItemId = new Map<string, { slotId: string; slotOrder: number }>()
 	private slotByResponseId = new Map<string, { slotId: string; slotOrder: number }>()
 	private slotByUserItemId = new Map<string, { slotId: string; slotOrder: number }>()
@@ -141,6 +152,7 @@ export class ChatRealtimeClient {
 
 			dataChannel.addEventListener('open', () => {
 				if (generation !== this.generation) return
+				this.flushPendingEvents()
 				this.callbacks.onConnectionStateChange('connected')
 				emitChatRealtimeLog('info', 'channel_open', { generation })
 			})
@@ -202,6 +214,7 @@ export class ChatRealtimeClient {
 		this.nextSlotOrder = 1
 		this.pendingTextByResponseId.clear()
 		this.pendingAudioTranscriptByResponseId.clear()
+		this.pendingOutboundEventQueue = []
 
 		try {
 			this.dataChannel?.close()
@@ -264,7 +277,7 @@ export class ChatRealtimeClient {
 
 	public updateSpeechOutputEnabled(speechOutputEnabled: boolean): void {
 		this.sendSessionUpdate({
-			output_modalities: [speechOutputEnabled ? 'audio' : 'text']
+			output_modalities: buildChatOutputModalities(speechOutputEnabled)
 		})
 		if (!speechOutputEnabled) this.callbacks.onRemoteStream(null)
 	}
@@ -485,20 +498,31 @@ export class ChatRealtimeClient {
 
 	private handleResponseOutputItemAddedEvent(candidate: unknown): void {
 		const event = ResponseOutputItemAddedEventSchema.parse(candidate)
-		const responseId = event.response_id
+		this.bindAssistantItemToResponse(event.item.id, event.response_id)
+	}
+
+	private handleResponseOutputItemCreatedEvent(candidate: unknown): void {
+		const event = ResponseOutputItemCreatedEventSchema.parse(candidate)
+		this.bindAssistantItemToResponse(event.item.id, event.response_id)
+	}
+
+	private bindAssistantItemToResponse(
+		assistantItemId: string,
+		responseId: string | undefined
+	): void {
 		if (!responseId) return
-		this.assistantItemIdByResponseId.set(responseId, event.item.id)
+		this.assistantItemIdByResponseId.set(responseId, assistantItemId)
 		this.bindResponseToSlot(responseId)
 		const slot = this.resolveSlotForAssistantMessage(undefined, responseId)
 		if (slot) {
-			this.slotByAssistantItemId.set(event.item.id, slot)
+			this.slotByAssistantItemId.set(assistantItemId, slot)
 		}
 
 		const pendingText = this.pendingTextByResponseId.get(responseId)
 		if (pendingText) {
 			this.emitTranscriptPatch({
 				appendText: pendingText,
-				id: event.item.id,
+				id: assistantItemId,
 				role: 'assistant',
 				...(slot ? { slotId: slot.slotId, slotOrder: slot.slotOrder } : {}),
 				source: 'response_output_text',
@@ -511,7 +535,7 @@ export class ChatRealtimeClient {
 		if (pendingAudioTranscript) {
 			this.emitTranscriptPatch({
 				appendText: pendingAudioTranscript,
-				id: event.item.id,
+				id: assistantItemId,
 				role: 'assistant',
 				...(slot ? { slotId: slot.slotId, slotOrder: slot.slotOrder } : {}),
 				source: 'response_output_audio_transcript',
@@ -568,6 +592,202 @@ export class ChatRealtimeClient {
 		})
 	}
 
+	private handleResponseOutputAudioTranscriptDoneEvent(candidate: unknown): void {
+		const event = ResponseOutputAudioTranscriptDoneEventSchema.parse(candidate)
+		const assistantItemId =
+			event.item_id ??
+			(event.response_id ? this.assistantItemIdByResponseId.get(event.response_id) : undefined)
+		if (!assistantItemId) return
+		const slot = this.resolveSlotForAssistantMessage(assistantItemId, event.response_id)
+		if (typeof event.transcript === 'string' && event.transcript.trim()) {
+			this.emitTranscriptPatch({
+				id: assistantItemId,
+				replaceText: event.transcript,
+				role: 'assistant',
+				...(slot ? { slotId: slot.slotId, slotOrder: slot.slotOrder } : {}),
+				source: 'response_output_audio_transcript',
+				status: 'final'
+			})
+			return
+		}
+		this.emitTranscriptPatch({
+			id: assistantItemId,
+			role: 'assistant',
+			...(slot ? { slotId: slot.slotId, slotOrder: slot.slotOrder } : {}),
+			source: 'response_output_audio_transcript',
+			status: 'final'
+		})
+	}
+
+	private extractAssistantTranscriptFromContentPart(
+		part: unknown
+	): null | { source: 'response_output_audio_transcript' | 'response_output_text'; text: string } {
+		if (typeof part !== 'object' || part === null) return null
+		if ('transcript' in part && typeof part.transcript === 'string' && part.transcript.trim()) {
+			return {
+				source: 'response_output_audio_transcript',
+				text: part.transcript.trim()
+			}
+		}
+		if ('text' in part && typeof part.text === 'string' && part.text.trim()) {
+			return {
+				source: 'response_output_text',
+				text: part.text.trim()
+			}
+		}
+		return null
+	}
+
+	private extractAssistantTranscriptFromOutputItem(
+		item: unknown
+	): null | { source: 'response_output_audio_transcript' | 'response_output_text'; text: string } {
+		if (typeof item !== 'object' || item === null) return null
+		if ('transcript' in item && typeof item.transcript === 'string' && item.transcript.trim()) {
+			return {
+				source: 'response_output_audio_transcript',
+				text: item.transcript.trim()
+			}
+		}
+		if (!('content' in item) || !Array.isArray(item.content)) return null
+		const textPartList: string[] = []
+		const audioTranscriptPartList: string[] = []
+		for (const contentPart of item.content) {
+			if (typeof contentPart !== 'object' || contentPart === null) continue
+			if (
+				'transcript' in contentPart &&
+				typeof contentPart.transcript === 'string' &&
+				contentPart.transcript.trim()
+			) {
+				audioTranscriptPartList.push(contentPart.transcript.trim())
+			}
+			if ('text' in contentPart && typeof contentPart.text === 'string' && contentPart.text.trim()) {
+				textPartList.push(contentPart.text.trim())
+			}
+		}
+		if (audioTranscriptPartList.length > 0) {
+			return {
+				source: 'response_output_audio_transcript',
+				text: audioTranscriptPartList.join('\n')
+			}
+		}
+		if (textPartList.length > 0) {
+			return {
+				source: 'response_output_text',
+				text: textPartList.join('\n')
+			}
+		}
+		return null
+	}
+
+	private emitPendingAssistantTranscript(
+		responseId: string,
+		patch: { source: 'response_output_audio_transcript' | 'response_output_text'; text: string }
+	): void {
+		switch (patch.source) {
+			case 'response_output_audio_transcript': {
+				const previousText = this.pendingAudioTranscriptByResponseId.get(responseId) ?? ''
+				this.pendingAudioTranscriptByResponseId.set(responseId, patch.text || previousText)
+				return
+			}
+			case 'response_output_text': {
+				const previousText = this.pendingTextByResponseId.get(responseId) ?? ''
+				this.pendingTextByResponseId.set(responseId, patch.text || previousText)
+				return
+			}
+			default:
+				return
+		}
+	}
+
+	private emitAssistantTranscriptFromPatch(input: {
+		assistantItemId?: string | undefined
+		patch: { source: 'response_output_audio_transcript' | 'response_output_text'; text: string }
+		responseId?: string | undefined
+		status: 'final' | 'streaming'
+	}): void {
+		const assistantItemId =
+			input.assistantItemId ??
+			(input.responseId ? this.assistantItemIdByResponseId.get(input.responseId) : undefined)
+		if (!assistantItemId) {
+			if (input.responseId) {
+				this.emitPendingAssistantTranscript(input.responseId, input.patch)
+			}
+			return
+		}
+		const slot = this.resolveSlotForAssistantMessage(assistantItemId, input.responseId)
+		this.emitTranscriptPatch({
+			...(input.status === 'final'
+				? { replaceText: input.patch.text }
+				: { appendText: input.patch.text }),
+			id: assistantItemId,
+			role: 'assistant',
+			...(slot ? { slotId: slot.slotId, slotOrder: slot.slotOrder } : {}),
+			source: input.patch.source,
+			status: input.status
+		})
+	}
+
+	private handleResponseContentPartAddedEvent(candidate: unknown): void {
+		const event = ResponseContentPartAddedEventSchema.parse(candidate)
+		const patch = this.extractAssistantTranscriptFromContentPart(event.part)
+		if (!patch) return
+		this.emitAssistantTranscriptFromPatch({
+			assistantItemId: event.item_id,
+			patch,
+			responseId: event.response_id,
+			status: 'streaming'
+		})
+	}
+
+	private handleResponseContentPartDoneEvent(candidate: unknown): void {
+		const event = ResponseContentPartDoneEventSchema.parse(candidate)
+		const patch = this.extractAssistantTranscriptFromContentPart(event.part)
+		if (!patch) return
+		this.emitAssistantTranscriptFromPatch({
+			assistantItemId: event.item_id,
+			patch,
+			responseId: event.response_id,
+			status: 'final'
+		})
+	}
+
+	private handleResponseOutputAudioDoneEvent(candidate: unknown): void {
+		const event = ResponseOutputAudioDoneEventSchema.parse(candidate)
+		const patch =
+			(typeof event.transcript === 'string' && event.transcript.trim()
+				? {
+						source: 'response_output_audio_transcript' as const,
+						text: event.transcript.trim()
+					}
+				: this.extractAssistantTranscriptFromContentPart(event.part)) ?? null
+		if (!patch) return
+		this.emitAssistantTranscriptFromPatch({
+			assistantItemId: event.item_id,
+			patch,
+			responseId: event.response_id,
+			status: 'final'
+		})
+	}
+
+	private handleResponseOutputItemDoneEvent(candidate: unknown): void {
+		const event = ResponseOutputItemDoneEventSchema.parse(candidate)
+		const assistantItemId =
+			event.item.id ??
+			(event.response_id ? this.assistantItemIdByResponseId.get(event.response_id) : undefined)
+		if (!assistantItemId) return
+		const transcript = this.extractAssistantTranscriptFromOutputItem(event.item)
+		if (!transcript) return
+		const slot = this.resolveSlotForAssistantMessage(assistantItemId, event.response_id)
+		this.emitTranscriptPatch({
+			id: assistantItemId,
+			replaceText: transcript.text,
+			role: 'assistant',
+			...(slot ? { slotId: slot.slotId, slotOrder: slot.slotOrder } : {}),
+			source: transcript.source,
+			status: 'final'
+		})
+	}
+
 	private handleResponseOutputTextDoneEvent(candidate: unknown): void {
 		const event = ResponseOutputTextDoneEventSchema.parse(candidate)
 		const assistantItemId =
@@ -595,6 +815,40 @@ export class ChatRealtimeClient {
 		})
 	}
 
+	private handleResponseDoneEvent(candidate: unknown): void {
+		const event = ResponseDoneEventSchema.parse(candidate)
+		const responseId = event.response_id ?? event.response?.id
+		const outputItemList = Array.isArray(event.response?.output) ? event.response.output : []
+		let didEmitTranscript = false
+		for (const outputItem of outputItemList) {
+			const itemId =
+				typeof outputItem === 'object' && outputItem !== null && 'id' in outputItem
+					? typeof outputItem.id === 'string'
+						? outputItem.id
+						: undefined
+					: undefined
+			if (itemId && responseId) {
+				this.bindAssistantItemToResponse(itemId, responseId)
+			}
+			const patch = this.extractAssistantTranscriptFromOutputItem(outputItem)
+			if (!patch) continue
+			this.emitAssistantTranscriptFromPatch({
+				assistantItemId: itemId,
+				patch,
+				responseId,
+				status: 'final'
+			})
+			didEmitTranscript = true
+		}
+		if (!didEmitTranscript) {
+			emitChatRealtimeLog('info', 'response_done_without_transcript_payload', {
+				outputItemCount: outputItemList.length,
+				responseId
+			})
+		}
+		this.finalizeAssistantForResponse(responseId)
+	}
+
 	private sendSessionUpdate(sessionPatch: Record<string, unknown>): void {
 		this.sendEvent({
 			session: {
@@ -642,21 +896,44 @@ export class ChatRealtimeClient {
 					this.handleResponseOutputItemAddedEvent(candidate)
 					return
 				}
+				case 'response.output_item.created': {
+					this.handleResponseOutputItemCreatedEvent(candidate)
+					return
+				}
+				case 'response.content_part.added': {
+					this.handleResponseContentPartAddedEvent(candidate)
+					return
+				}
 				case 'response.output_text.delta': {
 					this.handleResponseOutputTextDeltaEvent(candidate)
 					return
 				}
+				case 'response.output_audio.done': {
+					this.handleResponseOutputAudioDoneEvent(candidate)
+					return
+				}
 				case 'response.output_audio_transcript.delta': {
 					this.handleResponseOutputAudioTranscriptDeltaEvent(candidate)
 					return
 				}
+				case 'response.output_audio_transcript.done': {
+					this.handleResponseOutputAudioTranscriptDoneEvent(candidate)
+					return
+				}
+				case 'response.content_part.done': {
+					this.handleResponseContentPartDoneEvent(candidate)
+					return
+				}
+				case 'response.output_item.done': {
+					this.handleResponseOutputItemDoneEvent(candidate)
+					return
+				}
 				case 'response.output_text.done': {
 					this.handleResponseOutputTextDoneEvent(candidate)
 					return
 				}
 				case 'response.done': {
-					const event = ResponseDoneEventSchema.parse(candidate)
-					this.finalizeAssistantForResponse(event.response_id ?? event.response?.id)
+					this.handleResponseDoneEvent(candidate)
 					return
 				}
 				case 'error': {
@@ -668,9 +945,37 @@ export class ChatRealtimeClient {
 					return
 				}
 				default:
+					if (
+						typeof baseEvent.type === 'string' &&
+						(baseEvent.type.startsWith('response.') || baseEvent.type.startsWith('conversation.item.'))
+					) {
+						emitChatRealtimeLog('info', 'unhandled_server_event', {
+							eventType: baseEvent.type,
+							keys:
+								typeof candidate === 'object' && candidate !== null
+									? Object.keys(candidate as Record<string, unknown>).slice(0, 16)
+									: []
+						})
+					}
 					return
 			}
-		} catch {
+		} catch (error) {
+			emitChatRealtimeLog('warn', 'event_parse_ignored', {
+				message: error instanceof Error ? error.message : 'unknown',
+				rawType:
+					typeof rawData === 'string'
+						? (() => {
+								try {
+									const parsedData = JSON.parse(rawData) as Record<string, unknown>
+									return typeof parsedData.type === 'string' ? parsedData.type : 'unknown'
+								} catch {
+									return 'unparseable'
+								}
+							})()
+						: typeof rawData === 'object' && rawData !== null && 'type' in rawData
+							? String((rawData as Record<string, unknown>).type)
+							: 'unknown'
+			})
 			// Ignore unrecognized event payloads; the Realtime stream can contain event shapes
 			// that this client does not need for transcript rendering.
 			return
@@ -678,10 +983,34 @@ export class ChatRealtimeClient {
 	}
 
 	private sendEvent(event: Record<string, unknown>): void {
-		if (!this.dataChannel) return
-		if (this.dataChannel.readyState !== 'open') return
+		if (!this.dataChannel || this.dataChannel.readyState !== 'open') {
+			this.pendingOutboundEventQueue.push(event)
+			emitChatRealtimeLog('info', 'event_queued_until_channel_open', {
+				eventType: typeof event.type === 'string' ? event.type : 'unknown',
+				queueSize: this.pendingOutboundEventQueue.length
+			})
+			return
+		}
 		try {
 			this.dataChannel.send(JSON.stringify(event))
 		} catch {}
 	}
+
+	private flushPendingEvents(): void {
+		if (!this.dataChannel || this.dataChannel.readyState !== 'open') return
+		if (this.pendingOutboundEventQueue.length === 0) return
+		const pendingEventList = this.pendingOutboundEventQueue.slice()
+		this.pendingOutboundEventQueue = []
+		for (const event of pendingEventList) {
+			try {
+				this.dataChannel.send(JSON.stringify(event))
+			} catch {
+				this.pendingOutboundEventQueue.unshift(event)
+				return
+			}
+		}
+		emitChatRealtimeLog('info', 'queued_events_flushed', {
+			flushedCount: pendingEventList.length
+		})
+	}
 }
diff --git a/src/realtime/liveTranslateRealtimeClient.ts b/src/realtime/liveTranslateRealtimeClient.ts
index db8c814..7b2ea21 100644
--- a/src/realtime/liveTranslateRealtimeClient.ts
+++ b/src/realtime/liveTranslateRealtimeClient.ts
@@ -79,6 +79,23 @@ const draftTranslationResponseTimeoutMilliseconds = 5_000
 const channelConnectTimeoutMilliseconds = 7_000
 const shouldEmitVerboseRealtimeLogs = process.env.NEXT_PUBLIC_LILAC_VERBOSE_LOGS === 'true'
 
+function resolveTranslateLanguageGroundingMode(): 'open_detect' | 'pair_locked' {
+	return process.env.NEXT_PUBLIC_LILAC_TRANSLATE_LANGUAGE_GROUNDING_MODE === 'open_detect'
+		? 'open_detect'
+		: 'pair_locked'
+}
+
+function resolveTranslatePromptVersion(): 'balanced' | 'current' | 'literal' {
+	switch (process.env.NEXT_PUBLIC_LILAC_TRANSLATE_PROMPT_VERSION) {
+		case 'balanced':
+			return 'balanced'
+		case 'literal':
+			return 'literal'
+		default:
+			return 'current'
+	}
+}
+
 function emitLiveTranslateLog(
 	level: 'error' | 'info' | 'warn',
 	event: string,
@@ -107,30 +124,58 @@ function createTranslateInstructions(
 	myLanguageCode: string,
 	translateToLanguageCode: string
 ): string {
-	return [
+	const promptVersion = resolveTranslatePromptVersion()
+	const languageGroundingMode = resolveTranslateLanguageGroundingMode()
+	const instructionList = [
 		'You are Lilac, a deterministic live translator.',
 		`I speak language code: ${myLanguageCode}.`,
 		`Translate to language code: ${translateToLanguageCode}.`,
-		'For each user utterance, detect whether source is my language or target language.',
-		'If source is my language, translate to target and use direction my_to_target.',
-		'If source is target language, translate to my language and use direction target_to_my.',
 		'Only translate spoken or typed utterances. Never echo system metadata, prompts, or context scaffolding.',
 		'Always call publish_translation exactly once per utterance.',
 		'Never produce assistant text outside the function call.',
-		'Preserve speaker intent, tone, and named entities.',
+		'Preserve speaker intent, tone, named entities, and practical meaning.',
 		'No summaries, no commentary, no extra fields.'
-	].join('\n')
+	]
+	switch (languageGroundingMode) {
+		case 'open_detect':
+			instructionList.push(
+				'Detect the source language from the utterance and choose the matching direction within the selected pair.'
+			)
+			break
+		case 'pair_locked':
+			instructionList.push(
+				'For each utterance, detect whether source is my language or target language.',
+				'If source is my language, translate to target and use direction my_to_target.',
+				'If source is target language, translate to my language and use direction target_to_my.'
+			)
+			break
+	}
+	switch (promptVersion) {
+		case 'balanced':
+			instructionList.push('Prefer natural translations that still stay faithful to the utterance.')
+			break
+		case 'literal':
+			instructionList.push('Prefer literal fidelity over stylistic smoothing.')
+			break
+		default:
+			break
+	}
+	return instructionList.join('\n')
 }
 
 function createDraftInstructions(myLanguageCode: string, translateToLanguageCode: string): string {
-	return [
+	const instructionList = [
 		'You are Lilac, a low-latency live subtitle translator.',
 		`I speak language code: ${myLanguageCode}.`,
 		`Translate to language code: ${translateToLanguageCode}.`,
 		'Translate the partial utterance immediately.',
 		'Output only translated text.',
 		'No explanations. No labels. No JSON.'
-	].join('\n')
+	]
+	if (resolveTranslatePromptVersion() === 'literal') {
+		instructionList.push('Favor literal partial translation over paraphrase.')
+	}
+	return instructionList.join('\n')
 }
 
 function buildPublishTranslationToolDefinition(): Record<string, unknown> {
diff --git a/src/realtime/modeRuntimeStore.tsx b/src/realtime/modeRuntimeStore.tsx
index 280afad..fbcf156 100644
--- a/src/realtime/modeRuntimeStore.tsx
+++ b/src/realtime/modeRuntimeStore.tsx
@@ -11,25 +11,26 @@ import {
 	useState
 } from 'react'
 
+import { emitLilacTestBusEvent } from '@/evals/testBus'
 import { ChatRealtimeClient, type ChatTranscriptPatch } from '@/realtime/chatRealtimeClient'
-import { normalizeLanguageCode, resolveLanguageCode } from '@/realtime/languageCatalog'
+import { resolveLanguageCode } from '@/realtime/languageCatalog'
 import {
-	type LiveTranslateDraftPatch,
 	LiveTranslateRealtimeClient,
-	type LiveTranslateResultPatch,
 	type TranslateDraftInputPayload,
 	type TranslateInputPayload
 } from '@/realtime/liveTranslateRealtimeClient'
-import { defaultChatRealtimeModel } from '@/realtime/modelConfig'
+import { resolveChatRealtimeModelFromEnvironment } from '@/realtime/modelConfig'
 import { SystemLeakTextSchema } from '@/realtime/schemas'
 import type {
 	ChatOutputSettings,
 	ChatTranscriptMessage,
 	ConnectionHealthState,
+	ConnectionUiState,
 	GlobalAudioInputSettings,
 	LilacMode,
 	LiveSubtitleState,
 	ModeConnectionState,
+	TranslateRuntimeState,
 	TranslateSettings,
 	UtteranceCard,
 	UtteranceDirection
@@ -38,6 +39,18 @@ import {
 	type SubtitleFinalPatch,
 	SubtitleTranscriptionClient
 } from '@/realtime/subtitleTranscriptionClient'
+import {
+	applySubtitleSegmentDelta,
+	applySubtitleSegmentFinal,
+	applyTranslateDraftPatch as applyTranslateRuntimeDraftPatch,
+	applyTranslateResultPatch as applyTranslateRuntimeResultPatch,
+	createTranslateRuntimeState,
+	getTranslateCommittedSourceText,
+	getTranslateLatestConfidence,
+	selectLiveSubtitleState,
+	selectTranslateCards,
+	upsertTypedTranslateUtterance
+} from '@/realtime/translateRuntimeState'
 
 const defaultChatInstructions =
 	'You are Lilac. Help users communicate across languages. Keep answers concise, faithful, and practical.'
@@ -94,15 +107,31 @@ type PendingTranslateInput =
 
 const reconnectStatusGraceMilliseconds = 1500
 const subtitleDedupRoundedTimeWindowMilliseconds = 700
-const draftTranslateDebounceMilliseconds = 300
 const finalTranslateLowConfidenceThreshold = 0.6
 const finalTranslateLowConfidenceDelayMilliseconds = 280
 const finalTranslateSilenceDelayMilliseconds = 1200
-const audioUtteranceReuseThresholdMilliseconds = 1200
 const minimumDraftTextLength = 2
 const minimumDraftTextDeltaLength = 4
 const isTranslateStreamingV2Enabled =
 	process.env.NEXT_PUBLIC_LILAC_TRANSLATE_STREAMING_V2 !== 'false'
+
+function parsePositiveIntegerEnvironmentValue(
+	name: string,
+	fallbackValue: number,
+	bounds: { maximum: number; minimum: number }
+): number {
+	const rawValue = process.env[name]
+	if (!rawValue) return fallbackValue
+	const parsedValue = Number.parseInt(rawValue, 10)
+	if (!Number.isFinite(parsedValue)) return fallbackValue
+	return Math.max(bounds.minimum, Math.min(bounds.maximum, parsedValue))
+}
+
+const draftTranslateDebounceMilliseconds = parsePositiveIntegerEnvironmentValue(
+	'NEXT_PUBLIC_LILAC_TRANSLATE_DRAFT_DEBOUNCE_MS',
+	300,
+	{ maximum: 2_000, minimum: 100 }
+)
 const systemLeakMatcherList = SystemLeakTextSchema.parse(undefined).map(matcher =>
 	matcher.toLowerCase()
 )
@@ -226,42 +255,6 @@ function sanitizeSubtitleText(value: string): string {
 	return normalizeWhitespace(filteredSentenceList.join(' '))
 }
 
-function findWordOverlapLength(existingText: string, nextText: string): number {
-	const existingWordList = existingText.split(' ')
-	const nextWordList = nextText.split(' ')
-	const maxOverlapLength = Math.min(existingWordList.length, nextWordList.length)
-	for (let overlapLength = maxOverlapLength; overlapLength >= 1; overlapLength -= 1) {
-		const existingSuffix = existingWordList.slice(-overlapLength).join(' ').toLowerCase()
-		const nextPrefix = nextWordList.slice(0, overlapLength).join(' ').toLowerCase()
-		if (existingSuffix === nextPrefix) return overlapLength
-	}
-	return 0
-}
-
-function mergeUtteranceText(existingText: string, nextChunkText: string): string {
-	const normalizedExistingText = normalizeWhitespace(existingText)
-	const normalizedChunkText = normalizeWhitespace(nextChunkText)
-	if (!normalizedChunkText) return normalizedExistingText
-	if (!normalizedExistingText) return normalizedChunkText
-	if (isEquivalentTranscriptionChunk(normalizedExistingText, normalizedChunkText)) {
-		return normalizedExistingText
-	}
-	if (normalizedExistingText.toLowerCase().endsWith(normalizedChunkText.toLowerCase())) {
-		return normalizedExistingText
-	}
-	if (normalizedChunkText.toLowerCase().startsWith(normalizedExistingText.toLowerCase())) {
-		return normalizedChunkText
-	}
-	const overlapLength = findWordOverlapLength(normalizedExistingText, normalizedChunkText)
-	if (overlapLength > 0) {
-		const chunkWordList = normalizedChunkText.split(' ')
-		const suffixWordList = chunkWordList.slice(overlapLength)
-		if (suffixWordList.length === 0) return normalizedExistingText
-		return `${normalizedExistingText} ${suffixWordList.join(' ')}`
-	}
-	return `${normalizedExistingText} ${normalizedChunkText}`
-}
-
 function sanitizeTranslateSettings(input: Partial<TranslateSettings> | null): TranslateSettings {
 	const myLanguageCode = resolveLanguageCode(
 		input?.myLanguageCode ?? '',
@@ -288,46 +281,6 @@ function createClientItemId(prefix: string): string {
 	return `${prefix}_${randomSegment}`
 }
 
-function createEmptyUtteranceCard(
-	itemId: string,
-	inputOrigin: 'audio' | 'text',
-	translateSettings: TranslateSettings,
-	utteranceSequence: number
-): UtteranceCard {
-	return {
-		createdAt: Date.now(),
-		direction: 'my_to_target',
-		draftSequence: 0,
-		draftTranslatedText: '',
-		id: itemId,
-		inputOrigin,
-		renderState: 'listening',
-		sourceItemId: itemId,
-		sourceLanguageCode: translateSettings.myLanguageCode,
-		sourceText: '',
-		status: 'streaming',
-		targetLanguageCode: translateSettings.translateToLanguageCode,
-		translatedText: '',
-		utteranceSequence
-	}
-}
-
-function insertCardByPreviousItemId(
-	cardList: UtteranceCard[],
-	nextCard: UtteranceCard,
-	previousItemId?: null | string
-): UtteranceCard[] {
-	const filteredCards = cardList.filter(card => card.id !== nextCard.id)
-	if (!previousItemId) return [...filteredCards, nextCard]
-	const previousIndex = filteredCards.findIndex(card => card.id === previousItemId)
-	if (previousIndex === -1) return [...filteredCards, nextCard]
-	return [
-		...filteredCards.slice(0, previousIndex + 1),
-		nextCard,
-		...filteredCards.slice(previousIndex + 1)
-	]
-}
-
 function upsertChatTranscript(
 	existingList: ChatTranscriptMessage[],
 	patch: ChatTranscriptPatch,
@@ -414,91 +367,6 @@ function upsertChatTranscript(
 	}
 }
 
-function applyTranslateResultPatch(
-	cardList: UtteranceCard[],
-	patch: LiveTranslateResultPatch,
-	translateSettings: TranslateSettings,
-	nextUtteranceSequence: number
-): UtteranceCard[] {
-	const existingCard = cardList.find(card => card.id === patch.itemId) ?? null
-	const baseCard = existingCard
-		? (() => {
-				const { errorMessage: _errorMessage, responseId: _responseId, ...restCard } = existingCard
-				return restCard
-			})()
-		: createEmptyUtteranceCard(
-				patch.itemId,
-				patch.inputOrigin,
-				translateSettings,
-				nextUtteranceSequence
-			)
-
-	const normalizedSourceText = normalizeWhitespace(patch.sourceText)
-	const safeSourceText =
-		normalizedSourceText && !shouldDropSubtitleText(normalizedSourceText)
-			? normalizedSourceText
-			: (existingCard?.sourceText ?? '')
-
-	const nextCard: UtteranceCard = {
-		...baseCard,
-		direction: patch.direction,
-		inputOrigin: patch.inputOrigin,
-		renderState: patch.status === 'error' ? 'error' : 'final',
-		sourceLanguageCode: normalizeLanguageCode(patch.sourceLanguageCode),
-		sourceText: safeSourceText,
-		status: patch.status,
-		targetLanguageCode: normalizeLanguageCode(patch.targetLanguageCode),
-		translatedText: patch.translatedText,
-		...(patch.status === 'final'
-			? { draftTranslatedText: patch.translatedText, lastDraftAt: Date.now() }
-			: typeof baseCard.draftTranslatedText === 'string'
-				? { draftTranslatedText: baseCard.draftTranslatedText }
-				: {}),
-		...(patch.status === 'error' ? { errorMessage: patch.translatedText } : {}),
-		...(patch.responseId ? { responseId: patch.responseId } : {})
-	}
-
-	return insertCardByPreviousItemId(cardList, nextCard)
-}
-
-function applyTranslateDraftPatch(
-	cardList: UtteranceCard[],
-	patch: LiveTranslateDraftPatch,
-	translateSettings: TranslateSettings,
-	nextUtteranceSequence: number
-): UtteranceCard[] {
-	const existingCard = cardList.find(card => card.id === patch.itemId) ?? null
-	if (
-		existingCard &&
-		(existingCard.renderState === 'final' || existingCard.renderState === 'error')
-	) {
-		return cardList
-	}
-	if (existingCard && patch.draftSequence < existingCard.draftSequence) {
-		return cardList
-	}
-
-	const baseCard = existingCard
-		? { ...existingCard }
-		: createEmptyUtteranceCard(
-				patch.itemId,
-				patch.inputOrigin,
-				translateSettings,
-				nextUtteranceSequence
-			)
-	const nextCard: UtteranceCard = {
-		...baseCard,
-		draftSequence: patch.draftSequence,
-		draftTranslatedText: patch.translatedText,
-		inputOrigin: patch.inputOrigin,
-		lastDraftAt: Date.now(),
-		renderState: 'draft',
-		status: 'draft',
-		...(patch.responseId ? { responseId: patch.responseId } : {})
-	}
-	return insertCardByPreviousItemId(cardList, nextCard)
-}
-
 function getDirectionColorClass(direction: UtteranceDirection): string {
 	switch (direction) {
 		case 'my_to_target':
@@ -551,6 +419,7 @@ type LilacModeRuntimeContextValue = {
 	chatTranscripts: ChatTranscriptMessage[]
 	chatTurnDelaySeconds: number
 	connectionState: ModeConnectionState
+	connectionUiState: ConnectionUiState
 	errorMessage: null | string
 	getDirectionColor: (direction: UtteranceDirection) => string
 	liveSubtitleState: LiveSubtitleState
@@ -575,6 +444,13 @@ const LilacModeRuntimeContext = createContext<LilacModeRuntimeContextValue | nul
 export function LilacModeRuntimeProvider({ children }: { children: ReactNode }) {
 	const [mode, setModeState] = useState<LilacMode>('chat')
 	const [connectionState, setConnectionState] = useState<ModeConnectionState>('idle')
+	const [connectionUiState, setConnectionUiState] = useState<ConnectionUiState>({
+		isLive: false,
+		isOffline: false,
+		isReconnecting: false,
+		lastHealthyAt: null,
+		statusMessage: null
+	})
 	const [errorMessage, setErrorMessage] = useState<null | string>(null)
 	const [statusMessage, setStatusMessage] = useState<null | string>(null)
 	const [chatInstructions, setChatInstructionsState] = useState(defaultChatInstructions)
@@ -614,27 +490,17 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	const modeRef = useRef<LilacMode>(mode)
 	const isHydratedRef = useRef(false)
 	const isOnlineRef = useRef(true)
+	const liveSubtitleStateRef = useRef(defaultLiveSubtitleState)
 
 	const pendingTranslateInputQueueRef = useRef<PendingTranslateInput[]>([])
 	const chatTranscriptSequenceRef = useRef(1)
+	const translateRuntimeStateRef = useRef<TranslateRuntimeState>(createTranslateRuntimeState())
 	const subtitleDedupKeyTimestampByKeyRef = useRef<Map<string, number>>(new Map())
 	const subtitleRawSegmentTextByItemIdRef = useRef<Map<string, string>>(new Map())
-	const subtitleSegmentTextByItemIdRef = useRef<Map<string, string>>(new Map())
-	const subtitleCommittedSegmentTextByItemIdRef = useRef<Map<string, string>>(new Map())
-	const subtitleSegmentItemIdListByUtteranceIdRef = useRef<Map<string, string[]>>(new Map())
-	const subtitleSourceTextByItemIdRef = useRef<Map<string, string>>(new Map())
-	const subtitlePreviousItemIdByItemIdRef = useRef<Map<string, null | string>>(new Map())
-	const subtitleUtteranceIdBySegmentItemIdRef = useRef<Map<string, string>>(new Map())
-	const subtitlePreviousUtteranceIdByUtteranceIdRef = useRef<Map<string, null | string>>(new Map())
-	const subtitleLatestConfidenceByItemIdRef = useRef<Map<string, number>>(new Map())
-	const subtitleCommittedAtByItemIdRef = useRef<Map<string, number>>(new Map())
-	const activeAudioUtteranceRef = useRef<null | { id: string; updatedAt: number }>(null)
-	const lastAudioUtteranceIdRef = useRef<null | string>(null)
 	const translateDraftSequenceByItemIdRef = useRef<Map<string, number>>(new Map())
 	const translateLastDraftSourceTextByItemIdRef = useRef<Map<string, string>>(new Map())
 	const translateDraftScheduleTimerByItemIdRef = useRef<Map<string, number>>(new Map())
 	const translateFinalScheduleTimerByItemIdRef = useRef<Map<string, number>>(new Map())
-	const translateUtteranceSequenceRef = useRef(1)
 	const reconnectTimerByChannelRef = useRef<Partial<Record<RuntimeChannel, number>>>({})
 	const reconnectStatusTimerRef = useRef<null | number>(null)
 	const scheduleReconnectRef = useRef<(channel: RuntimeChannel) => void>(() => {})
@@ -643,6 +509,9 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		subtitle: 0,
 		translate: 0
 	})
+	const previousChatEventFingerprintByIdRef = useRef<Map<string, string>>(new Map())
+	const previousSubtitleFingerprintRef = useRef('')
+	const previousTranslateCardFingerprintByIdRef = useRef<Map<string, string>>(new Map())
 	const hasSeenConnectedStateByModeRef = useRef<Record<LilacMode, boolean>>({
 		chat: false,
 		translate: false
@@ -685,6 +554,18 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		translateFinalScheduleTimerByItemIdRef.current.clear()
 	}, [])
 
+	const syncTranslateRuntimeState = useCallback((nextState: TranslateRuntimeState): void => {
+		translateRuntimeStateRef.current = nextState
+		setTranslateCards(selectTranslateCards(nextState))
+		const nextLiveSubtitleState = selectLiveSubtitleState(
+			nextState,
+			liveSubtitleStateRef.current.isListening,
+			Date.now()
+		)
+		liveSubtitleStateRef.current = nextLiveSubtitleState
+		setLiveSubtitleState(nextLiveSubtitleState)
+	}, [])
+
 	const stopChatClient = useCallback(() => {
 		intentionalStopByChannelRef.current.chat = true
 		chatClientRef.current?.stop()
@@ -711,27 +592,12 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		subtitleClientRef.current = null
 		clearAllTranslateStreamingTimers()
 		subtitleRawSegmentTextByItemIdRef.current.clear()
-		subtitleSegmentTextByItemIdRef.current.clear()
-		subtitleCommittedSegmentTextByItemIdRef.current.clear()
-		subtitleSegmentItemIdListByUtteranceIdRef.current.clear()
-		subtitleSourceTextByItemIdRef.current.clear()
-		subtitlePreviousItemIdByItemIdRef.current.clear()
-		subtitleUtteranceIdBySegmentItemIdRef.current.clear()
-		subtitlePreviousUtteranceIdByUtteranceIdRef.current.clear()
-		subtitleLatestConfidenceByItemIdRef.current.clear()
-		subtitleCommittedAtByItemIdRef.current.clear()
-		activeAudioUtteranceRef.current = null
-		lastAudioUtteranceIdRef.current = null
+		translateRuntimeStateRef.current = createTranslateRuntimeState()
 		translateDraftSequenceByItemIdRef.current.clear()
 		translateLastDraftSourceTextByItemIdRef.current.clear()
 		setSubtitleChannelState('disconnected')
-		setLiveSubtitleState(previousState => ({
-			...previousState,
-			activeSegmentId: null,
-			isListening: false,
-			text: '',
-			updatedAt: Date.now()
-		}))
+		liveSubtitleStateRef.current = defaultLiveSubtitleState
+		setLiveSubtitleState(defaultLiveSubtitleState)
 		queueMicrotask(() => {
 			intentionalStopByChannelRef.current.subtitle = false
 		})
@@ -747,23 +613,13 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	const clearAllInMemoryState = useCallback(() => {
 		setChatTranscripts([])
 		setTranslateCards([])
+		liveSubtitleStateRef.current = defaultLiveSubtitleState
 		setLiveSubtitleState(defaultLiveSubtitleState)
+		translateRuntimeStateRef.current = createTranslateRuntimeState()
 		subtitleDedupKeyTimestampByKeyRef.current.clear()
 		subtitleRawSegmentTextByItemIdRef.current.clear()
-		subtitleSegmentTextByItemIdRef.current.clear()
-		subtitleCommittedSegmentTextByItemIdRef.current.clear()
-		subtitleSegmentItemIdListByUtteranceIdRef.current.clear()
-		subtitleSourceTextByItemIdRef.current.clear()
-		subtitlePreviousItemIdByItemIdRef.current.clear()
-		subtitleUtteranceIdBySegmentItemIdRef.current.clear()
-		subtitlePreviousUtteranceIdByUtteranceIdRef.current.clear()
-		subtitleLatestConfidenceByItemIdRef.current.clear()
-		subtitleCommittedAtByItemIdRef.current.clear()
-		activeAudioUtteranceRef.current = null
-		lastAudioUtteranceIdRef.current = null
 		translateDraftSequenceByItemIdRef.current.clear()
 		translateLastDraftSourceTextByItemIdRef.current.clear()
-		translateUtteranceSequenceRef.current = 1
 		chatTranscriptSequenceRef.current = 1
 		clearAllTranslateStreamingTimers()
 		pendingTranslateInputQueueRef.current = []
@@ -828,160 +684,6 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		[flushPendingTranslateInputs]
 	)
 
-	const resolveAudioUtterance = useCallback(
-		(
-			segmentItemId: string,
-			previousSegmentItemId?: null | string
-		): { id: string; previousId: null | string } => {
-			const existingUtteranceId = subtitleUtteranceIdBySegmentItemIdRef.current.get(segmentItemId)
-			if (existingUtteranceId) {
-				return {
-					id: existingUtteranceId,
-					previousId:
-						subtitlePreviousUtteranceIdByUtteranceIdRef.current.get(existingUtteranceId) ?? null
-				}
-			}
-
-			const now = Date.now()
-			const activeUtterance = activeAudioUtteranceRef.current
-			const mappedPreviousUtteranceId = previousSegmentItemId
-				? (subtitleUtteranceIdBySegmentItemIdRef.current.get(previousSegmentItemId) ?? null)
-				: null
-			const shouldReuseActiveUtterance =
-				activeUtterance !== null &&
-				now - activeUtterance.updatedAt <= audioUtteranceReuseThresholdMilliseconds &&
-				(!mappedPreviousUtteranceId || mappedPreviousUtteranceId === activeUtterance.id)
-
-			if (shouldReuseActiveUtterance && activeUtterance) {
-				subtitleUtteranceIdBySegmentItemIdRef.current.set(segmentItemId, activeUtterance.id)
-				return {
-					id: activeUtterance.id,
-					previousId: subtitlePreviousUtteranceIdByUtteranceIdRef.current.get(activeUtterance.id) ?? null
-				}
-			}
-
-			const utteranceId = createClientItemId('audio_utterance')
-			const previousUtteranceId = mappedPreviousUtteranceId ?? lastAudioUtteranceIdRef.current ?? null
-			subtitleUtteranceIdBySegmentItemIdRef.current.set(segmentItemId, utteranceId)
-			subtitlePreviousUtteranceIdByUtteranceIdRef.current.set(utteranceId, previousUtteranceId)
-			lastAudioUtteranceIdRef.current = utteranceId
-			activeAudioUtteranceRef.current = {
-				id: utteranceId,
-				updatedAt: now
-			}
-			return {
-				id: utteranceId,
-				previousId: previousUtteranceId
-			}
-		},
-		[]
-	)
-
-	const registerUtteranceSegmentItemId = useCallback(
-		(utteranceId: string, segmentItemId: string): void => {
-			const segmentItemIdList =
-				subtitleSegmentItemIdListByUtteranceIdRef.current.get(utteranceId) ?? []
-			if (!segmentItemIdList.includes(segmentItemId)) {
-				subtitleSegmentItemIdListByUtteranceIdRef.current.set(utteranceId, [
-					...segmentItemIdList,
-					segmentItemId
-				])
-			}
-			subtitleUtteranceIdBySegmentItemIdRef.current.set(segmentItemId, utteranceId)
-		},
-		[]
-	)
-
-	const removeUtteranceSegmentItemId = useCallback(
-		(utteranceId: string, segmentItemId: string): void => {
-			const segmentItemIdList =
-				subtitleSegmentItemIdListByUtteranceIdRef.current.get(utteranceId) ?? []
-			if (segmentItemIdList.length === 0) return
-			const nextSegmentItemIdList = segmentItemIdList.filter(
-				candidateSegmentItemId => candidateSegmentItemId !== segmentItemId
-			)
-			if (nextSegmentItemIdList.length === 0) {
-				subtitleSegmentItemIdListByUtteranceIdRef.current.delete(utteranceId)
-			} else {
-				subtitleSegmentItemIdListByUtteranceIdRef.current.set(utteranceId, nextSegmentItemIdList)
-			}
-			subtitleUtteranceIdBySegmentItemIdRef.current.delete(segmentItemId)
-		},
-		[]
-	)
-
-	const composeUtteranceSourceText = useCallback((utteranceId: string): string => {
-		const segmentItemIdList = subtitleSegmentItemIdListByUtteranceIdRef.current.get(utteranceId) ?? []
-		let composedSourceText = ''
-		for (const segmentItemId of segmentItemIdList) {
-			const segmentText = normalizeWhitespace(
-				subtitleCommittedSegmentTextByItemIdRef.current.get(segmentItemId) ??
-					subtitleSegmentTextByItemIdRef.current.get(segmentItemId) ??
-					''
-			)
-			if (!segmentText) continue
-			composedSourceText = mergeUtteranceText(composedSourceText, segmentText)
-		}
-		return normalizeWhitespace(composedSourceText)
-	}, [])
-
-	const clearUtteranceSegmentState = useCallback((utteranceId: string): void => {
-		const segmentItemIdList = subtitleSegmentItemIdListByUtteranceIdRef.current.get(utteranceId) ?? []
-		for (const segmentItemId of segmentItemIdList) {
-			subtitleRawSegmentTextByItemIdRef.current.delete(segmentItemId)
-			subtitleSegmentTextByItemIdRef.current.delete(segmentItemId)
-			subtitleCommittedSegmentTextByItemIdRef.current.delete(segmentItemId)
-			subtitleUtteranceIdBySegmentItemIdRef.current.delete(segmentItemId)
-		}
-		subtitleSegmentItemIdListByUtteranceIdRef.current.delete(utteranceId)
-	}, [])
-
-	const upsertSubtitleCard = useCallback(
-		(itemId: string, previousItemId: null | string | undefined, sourceText: string): void => {
-			const normalizedText = normalizeWhitespace(sourceText)
-			if (!normalizedText) return
-			setTranslateCards(previousCards => {
-				const existingCardIndex = previousCards.findIndex(card => card.id === itemId)
-				if (existingCardIndex === -1) {
-					const nextCard: UtteranceCard = {
-						...createEmptyUtteranceCard(
-							itemId,
-							'audio',
-							translateSettingsRef.current,
-							translateUtteranceSequenceRef.current
-						),
-						sourceLanguageCode: translateSettingsRef.current.myLanguageCode,
-						sourceText: normalizedText,
-						status: 'streaming'
-					}
-					translateUtteranceSequenceRef.current += 1
-					const fallbackPreviousItemId =
-						previousCards.length > 0 ? (previousCards[previousCards.length - 1]?.id ?? null) : null
-					return insertCardByPreviousItemId(
-						previousCards,
-						nextCard,
-						previousItemId ?? fallbackPreviousItemId
-					)
-				}
-				const nextCardList = previousCards.slice()
-				const existingCard = nextCardList[existingCardIndex]
-				if (
-					!existingCard ||
-					existingCard.renderState === 'final' ||
-					existingCard.renderState === 'error'
-				)
-					return previousCards
-				nextCardList[existingCardIndex] = {
-					...existingCard,
-					sourceText: normalizedText,
-					status: existingCard.renderState === 'draft' ? 'draft' : 'streaming'
-				}
-				return nextCardList
-			})
-		},
-		[]
-	)
-
 	const scheduleDraftTranslateForItem = useCallback(
 		(itemId: string, inputOrigin: 'audio' | 'text') => {
 			if (!isTranslateStreamingV2Enabled) return
@@ -989,7 +691,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			const timerId = window.setTimeout(() => {
 				translateDraftScheduleTimerByItemIdRef.current.delete(itemId)
 				const latestSourceText = normalizeWhitespace(
-					subtitleSourceTextByItemIdRef.current.get(itemId) ?? ''
+					getTranslateCommittedSourceText(translateRuntimeStateRef.current, itemId)
 				)
 				if (!latestSourceText || latestSourceText.length < minimumDraftTextLength) return
 				const lastDraftSourceText = translateLastDraftSourceTextByItemIdRef.current.get(itemId) ?? ''
@@ -1019,7 +721,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	const scheduleFinalTranslateForItem = useCallback(
 		(itemId: string, inputOrigin: 'audio' | 'text') => {
 			clearTranslateFinalTimerByItemId(itemId)
-			const confidence = subtitleLatestConfidenceByItemIdRef.current.get(itemId)
+			const confidence = getTranslateLatestConfidence(translateRuntimeStateRef.current, itemId)
 			const lowConfidenceDelayMilliseconds =
 				typeof confidence === 'number' && confidence < finalTranslateLowConfidenceThreshold
 					? finalTranslateLowConfidenceDelayMilliseconds
@@ -1028,7 +730,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			const timerId = window.setTimeout(() => {
 				translateFinalScheduleTimerByItemIdRef.current.delete(itemId)
 				const latestSourceText = normalizeWhitespace(
-					subtitleSourceTextByItemIdRef.current.get(itemId) ?? ''
+					getTranslateCommittedSourceText(translateRuntimeStateRef.current, itemId)
 				)
 				if (!latestSourceText) return
 				enqueueTranslateInput({
@@ -1047,14 +749,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		(patch: SubtitleFinalPatch) => {
 			const normalizedText = sanitizeSubtitleText(patch.text)
 			subtitleRawSegmentTextByItemIdRef.current.delete(patch.itemId)
-			const resolvedUtterance = resolveAudioUtterance(patch.itemId, patch.previousItemId)
-			registerUtteranceSegmentItemId(resolvedUtterance.id, patch.itemId)
-			if (!normalizedText) {
-				subtitleSegmentTextByItemIdRef.current.delete(patch.itemId)
-				subtitleCommittedSegmentTextByItemIdRef.current.delete(patch.itemId)
-				removeUtteranceSegmentItemId(resolvedUtterance.id, patch.itemId)
-				return
-			}
+			if (!normalizedText) return
 
 			const now = Date.now()
 			const roundedTimestamp =
@@ -1064,9 +759,6 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			const dedupeKey = `${canonicalText}::${roundedTimestamp}::${translateSettingsRef.current.myLanguageCode}`
 			const previousTimestamp = subtitleDedupKeyTimestampByKeyRef.current.get(dedupeKey)
 			if (typeof previousTimestamp === 'number' && now - previousTimestamp < 2500) {
-				subtitleSegmentTextByItemIdRef.current.delete(patch.itemId)
-				subtitleCommittedSegmentTextByItemIdRef.current.delete(patch.itemId)
-				removeUtteranceSegmentItemId(resolvedUtterance.id, patch.itemId)
 				return
 			}
 			subtitleDedupKeyTimestampByKeyRef.current.set(dedupeKey, now)
@@ -1074,40 +766,23 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				if (now - value > 10_000) subtitleDedupKeyTimestampByKeyRef.current.delete(key)
 			})
 
-			subtitleSegmentTextByItemIdRef.current.delete(patch.itemId)
-			subtitleCommittedSegmentTextByItemIdRef.current.set(patch.itemId, normalizedText)
-			const composedSourceText = composeUtteranceSourceText(resolvedUtterance.id)
-			subtitleSourceTextByItemIdRef.current.set(resolvedUtterance.id, composedSourceText)
-			subtitlePreviousItemIdByItemIdRef.current.set(resolvedUtterance.id, resolvedUtterance.previousId)
-			subtitleCommittedAtByItemIdRef.current.set(resolvedUtterance.id, patch.committedAt)
-			if (typeof patch.confidence === 'number') {
-				subtitleLatestConfidenceByItemIdRef.current.set(resolvedUtterance.id, patch.confidence)
-			}
-			activeAudioUtteranceRef.current = {
-				id: resolvedUtterance.id,
-				updatedAt: now
-			}
-
-			clearTranslateDraftTimerByItemId(resolvedUtterance.id)
-			upsertSubtitleCard(resolvedUtterance.id, resolvedUtterance.previousId, composedSourceText)
-			setLiveSubtitleState(previousState => ({
-				...previousState,
-				activeSegmentId: resolvedUtterance.id,
-				text: '',
-				updatedAt: Date.now()
-			}))
-			scheduleDraftTranslateForItem(resolvedUtterance.id, 'audio')
-			scheduleFinalTranslateForItem(resolvedUtterance.id, 'audio')
+			const nextState = applySubtitleSegmentFinal(translateRuntimeStateRef.current, {
+				...patch,
+				settings: translateSettingsRef.current,
+				text: normalizedText
+			})
+			syncTranslateRuntimeState(nextState)
+			const utteranceId = nextState.segmentById[patch.itemId]?.utteranceId
+			if (!utteranceId) return
+			clearTranslateDraftTimerByItemId(utteranceId)
+			scheduleDraftTranslateForItem(utteranceId, 'audio')
+			scheduleFinalTranslateForItem(utteranceId, 'audio')
 		},
 		[
 			clearTranslateDraftTimerByItemId,
-			composeUtteranceSourceText,
-			registerUtteranceSegmentItemId,
-			removeUtteranceSegmentItemId,
-			resolveAudioUtterance,
 			scheduleDraftTranslateForItem,
 			scheduleFinalTranslateForItem,
-			upsertSubtitleCard
+			syncTranslateRuntimeState
 		]
 	)
 
@@ -1153,7 +828,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		chatClientRef.current = chatClient
 		void chatClient.start({
 			instructions: chatInstructionsRef.current,
-			model: defaultChatRealtimeModel,
+			model: resolveChatRealtimeModelFromEnvironment(),
 			speechOutputEnabled: chatSpeechOutputEnabledRef.current,
 			turnDelaySeconds: chatTurnDelaySecondsRef.current,
 			voice: 'verse',
@@ -1183,34 +858,22 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				}
 			},
 			onDraftDeltaPatch: patch => {
-				setTranslateCards(previousCards => {
-					const hasExistingCard = previousCards.some(card => card.id === patch.itemId)
-					const nextCards = applyTranslateDraftPatch(
-						previousCards,
-						patch,
-						translateSettingsRef.current,
-						translateUtteranceSequenceRef.current
-					)
-					if (!hasExistingCard && nextCards.some(card => card.id === patch.itemId)) {
-						translateUtteranceSequenceRef.current += 1
-					}
-					return nextCards
-				})
+				const nextState = applyTranslateRuntimeDraftPatch(
+					translateRuntimeStateRef.current,
+					patch,
+					translateSettingsRef.current,
+					Date.now()
+				)
+				syncTranslateRuntimeState(nextState)
 			},
 			onDraftDonePatch: patch => {
-				setTranslateCards(previousCards => {
-					const hasExistingCard = previousCards.some(card => card.id === patch.itemId)
-					const nextCards = applyTranslateDraftPatch(
-						previousCards,
-						patch,
-						translateSettingsRef.current,
-						translateUtteranceSequenceRef.current
-					)
-					if (!hasExistingCard && nextCards.some(card => card.id === patch.itemId)) {
-						translateUtteranceSequenceRef.current += 1
-					}
-					return nextCards
-				})
+				const nextState = applyTranslateRuntimeDraftPatch(
+					translateRuntimeStateRef.current,
+					patch,
+					translateSettingsRef.current,
+					Date.now()
+				)
+				syncTranslateRuntimeState(nextState)
 			},
 			onError: message => {
 				setErrorMessage(message)
@@ -1222,45 +885,30 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			onResultPatch: patch => {
 				clearTranslateDraftTimerByItemId(patch.itemId)
 				clearTranslateFinalTimerByItemId(patch.itemId)
-				clearUtteranceSegmentState(patch.itemId)
-				subtitleSourceTextByItemIdRef.current.delete(patch.itemId)
-				subtitlePreviousItemIdByItemIdRef.current.delete(patch.itemId)
-				subtitlePreviousUtteranceIdByUtteranceIdRef.current.delete(patch.itemId)
-				subtitleLatestConfidenceByItemIdRef.current.delete(patch.itemId)
-				subtitleCommittedAtByItemIdRef.current.delete(patch.itemId)
 				translateDraftSequenceByItemIdRef.current.delete(patch.itemId)
 				translateLastDraftSourceTextByItemIdRef.current.delete(patch.itemId)
-				if (activeAudioUtteranceRef.current?.id === patch.itemId) {
-					activeAudioUtteranceRef.current = null
-				}
-				setTranslateCards(previousCards => {
-					const hasExistingCard = previousCards.some(card => card.id === patch.itemId)
-					const nextCards = applyTranslateResultPatch(
-						previousCards,
-						patch,
-						translateSettingsRef.current,
-						translateUtteranceSequenceRef.current
-					)
-					if (!hasExistingCard && nextCards.some(card => card.id === patch.itemId)) {
-						translateUtteranceSequenceRef.current += 1
-					}
-					return nextCards
-				})
+				const nextState = applyTranslateRuntimeResultPatch(
+					translateRuntimeStateRef.current,
+					patch,
+					translateSettingsRef.current,
+					Date.now()
+				)
+				syncTranslateRuntimeState(nextState)
 			}
 		})
 		liveTranslateClientRef.current = translateClient
 		void translateClient.start({
-			model: defaultChatRealtimeModel,
+			model: resolveChatRealtimeModelFromEnvironment(),
 			myLanguageCode: translateSettingsRef.current.myLanguageCode,
 			translateToLanguageCode: translateSettingsRef.current.translateToLanguageCode
 		})
 	}, [
-		clearUtteranceSegmentState,
 		clearReconnectTimer,
 		clearTranslateDraftTimerByItemId,
 		clearTranslateFinalTimerByItemId,
 		flushPendingTranslateInputs,
-		stopTranslateClient
+		stopTranslateClient,
+		syncTranslateRuntimeState
 	])
 
 	const startSubtitleClient = useCallback(() => {
@@ -1291,52 +939,38 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				}))
 			},
 			onListeningStateChange: isListening => {
-				setLiveSubtitleState(previousState => ({
-					...previousState,
+				const nextLiveSubtitleState = selectLiveSubtitleState(
+					translateRuntimeStateRef.current,
 					isListening,
-					updatedAt: Date.now()
-				}))
+					Date.now()
+				)
+				liveSubtitleStateRef.current = nextLiveSubtitleState
+				setLiveSubtitleState(nextLiveSubtitleState)
 			},
 			onSubtitleDelta: patch => {
 				const previousRawSegmentText = subtitleRawSegmentTextByItemIdRef.current.get(patch.itemId) ?? ''
 				const nextRawSegmentText = `${previousRawSegmentText}${patch.textDelta}`
 				subtitleRawSegmentTextByItemIdRef.current.set(patch.itemId, nextRawSegmentText)
-				const resolvedUtterance = resolveAudioUtterance(patch.itemId, patch.previousItemId)
-				registerUtteranceSegmentItemId(resolvedUtterance.id, patch.itemId)
 				const sanitizedSegmentText = sanitizeSubtitleText(nextRawSegmentText)
 				if (!sanitizedSegmentText) {
-					subtitleSegmentTextByItemIdRef.current.delete(patch.itemId)
-					setLiveSubtitleState(previousState => ({
-						...previousState,
-						activeSegmentId: patch.itemId,
-						isListening: true,
-						text: '',
-						updatedAt: Date.now()
-					}))
 					return
 				}
-				subtitleSegmentTextByItemIdRef.current.set(patch.itemId, sanitizedSegmentText)
-				const previousSourceText = subtitleSourceTextByItemIdRef.current.get(resolvedUtterance.id) ?? ''
-				const mergedSourceText = composeUtteranceSourceText(resolvedUtterance.id)
-				if (mergedSourceText === previousSourceText) return
-				subtitleSourceTextByItemIdRef.current.set(resolvedUtterance.id, mergedSourceText)
-				subtitlePreviousItemIdByItemIdRef.current.set(
-					resolvedUtterance.id,
-					resolvedUtterance.previousId
-				)
-				activeAudioUtteranceRef.current = {
-					id: resolvedUtterance.id,
-					updatedAt: Date.now()
-				}
-				upsertSubtitleCard(resolvedUtterance.id, resolvedUtterance.previousId, mergedSourceText)
-				setLiveSubtitleState({
-					activeSegmentId: resolvedUtterance.id,
-					isListening: true,
-					text: '',
-					updatedAt: Date.now()
+				const nextState = applySubtitleSegmentDelta(translateRuntimeStateRef.current, {
+					itemId: patch.itemId,
+					now: Date.now(),
+					previousItemId: patch.previousItemId ?? null,
+					settings: translateSettingsRef.current,
+					text: sanitizedSegmentText
 				})
-				scheduleDraftTranslateForItem(resolvedUtterance.id, 'audio')
-				scheduleFinalTranslateForItem(resolvedUtterance.id, 'audio')
+				liveSubtitleStateRef.current = {
+					...liveSubtitleStateRef.current,
+					isListening: true
+				}
+				syncTranslateRuntimeState(nextState)
+				const utteranceId = nextState.segmentById[patch.itemId]?.utteranceId
+				if (!utteranceId) return
+				scheduleDraftTranslateForItem(utteranceId, 'audio')
+				scheduleFinalTranslateForItem(utteranceId, 'audio')
 			},
 			onSubtitleFinal: handleTranslateSubtitleFinalPatch
 		})
@@ -1347,15 +981,12 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			voiceInputEnabled: voiceInputEnabledRef.current
 		})
 	}, [
-		composeUtteranceSourceText,
 		clearReconnectTimer,
 		handleTranslateSubtitleFinalPatch,
-		registerUtteranceSegmentItemId,
-		resolveAudioUtterance,
 		scheduleDraftTranslateForItem,
 		scheduleFinalTranslateForItem,
 		stopSubtitleClient,
-		upsertSubtitleCard
+		syncTranslateRuntimeState
 	])
 
 	const startModeRuntime = useCallback(
@@ -1471,21 +1102,14 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			const sanitizedSettings = sanitizeTranslateSettings(nextSettings)
 			clearAllTranslateStreamingTimers()
 			subtitleRawSegmentTextByItemIdRef.current.clear()
-			subtitleSegmentTextByItemIdRef.current.clear()
-			subtitleCommittedSegmentTextByItemIdRef.current.clear()
-			subtitleSegmentItemIdListByUtteranceIdRef.current.clear()
-			subtitleSourceTextByItemIdRef.current.clear()
-			subtitlePreviousItemIdByItemIdRef.current.clear()
-			subtitleUtteranceIdBySegmentItemIdRef.current.clear()
-			subtitlePreviousUtteranceIdByUtteranceIdRef.current.clear()
-			subtitleLatestConfidenceByItemIdRef.current.clear()
-			subtitleCommittedAtByItemIdRef.current.clear()
-			activeAudioUtteranceRef.current = null
-			lastAudioUtteranceIdRef.current = null
+			translateRuntimeStateRef.current = createTranslateRuntimeState()
 			translateDraftSequenceByItemIdRef.current.clear()
 			translateLastDraftSourceTextByItemIdRef.current.clear()
 			pendingTranslateInputQueueRef.current = []
 			setTranslateSettingsState(sanitizedSettings)
+			setTranslateCards([])
+			liveSubtitleStateRef.current = defaultLiveSubtitleState
+			setLiveSubtitleState(defaultLiveSubtitleState)
 			if (modeRef.current === 'translate') {
 				liveTranslateClientRef.current?.updateTranslateSettings(sanitizedSettings)
 				subtitleClientRef.current?.updateSubtitleSettings(sanitizedSettings)
@@ -1524,25 +1148,13 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			const normalizedText = text.trim()
 			if (!normalizedText) return
 			const itemId = createClientItemId('typed')
-			subtitleSourceTextByItemIdRef.current.set(itemId, normalizedText)
-			setTranslateCards(previousCards => {
-				const nextCard: UtteranceCard = {
-					...createEmptyUtteranceCard(
-						itemId,
-						'text',
-						translateSettingsRef.current,
-						translateUtteranceSequenceRef.current
-					),
-					renderState: 'draft',
-					sourceLanguageCode: translateSettingsRef.current.myLanguageCode,
-					sourceText: normalizedText,
-					status: 'translating'
-				}
-				translateUtteranceSequenceRef.current += 1
-				const previousItemId =
-					previousCards.length > 0 ? (previousCards[previousCards.length - 1]?.id ?? null) : null
-				return insertCardByPreviousItemId(previousCards, nextCard, previousItemId)
+			const nextState = upsertTypedTranslateUtterance(translateRuntimeStateRef.current, {
+				itemId,
+				now: Date.now(),
+				settings: translateSettingsRef.current,
+				text: normalizedText
 			})
+			syncTranslateRuntimeState(nextState)
 			if (isTranslateStreamingV2Enabled) {
 				const nextDraftSequence = (translateDraftSequenceByItemIdRef.current.get(itemId) ?? 0) + 1
 				translateDraftSequenceByItemIdRef.current.set(itemId, nextDraftSequence)
@@ -1573,7 +1185,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				text: normalizedText
 			})
 		},
-		[enqueueTranslateInput]
+		[enqueueTranslateInput, syncTranslateRuntimeState]
 	)
 
 	useEffect(() => {
@@ -1846,6 +1458,92 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		}
 	}, [chatChannelState, isHydrated, mode, subtitleChannelState, translateChannelState])
 
+	useEffect(() => {
+		if (!isHydrated) return
+		const isLive =
+			mode === 'chat'
+				? chatChannelState === 'connected'
+				: translateChannelState === 'connected' && subtitleChannelState === 'connected'
+		const isReconnecting = statusMessage === 'Reconnecting…'
+		const isOfflineState = !isOnline
+		setConnectionUiState(previousState => ({
+			isLive,
+			isOffline: isOfflineState,
+			isReconnecting,
+			lastHealthyAt: isLive ? Date.now() : previousState.lastHealthyAt,
+			statusMessage: isOfflineState
+				? 'Offline. Waiting for network…'
+				: isReconnecting
+					? 'Reconnecting…'
+					: isLive
+						? 'Live'
+						: connectionState === 'connecting'
+							? 'Connecting…'
+							: connectionState === 'error'
+								? (errorMessage ?? 'Connection error.')
+								: null
+		}))
+	}, [
+		chatChannelState,
+		connectionState,
+		errorMessage,
+		isHydrated,
+		isOnline,
+		mode,
+		statusMessage,
+		subtitleChannelState,
+		translateChannelState
+	])
+
+	useEffect(() => {
+		const nextFingerprintById = new Map<string, string>()
+		for (const transcript of chatTranscripts) {
+			const fingerprint = `${transcript.role}::${transcript.status}::${transcript.source}::${transcript.text}`
+			nextFingerprintById.set(transcript.id, fingerprint)
+			if (previousChatEventFingerprintByIdRef.current.get(transcript.id) === fingerprint) continue
+			emitLilacTestBusEvent({
+				eventType: 'chat_transcript_patch',
+				messageId: transcript.id,
+				role: transcript.role,
+				source: transcript.source,
+				status: transcript.status,
+				text: transcript.text
+			})
+		}
+		previousChatEventFingerprintByIdRef.current = nextFingerprintById
+	}, [chatTranscripts])
+
+	useEffect(() => {
+		const fingerprint = `${liveSubtitleState.activeSegmentId ?? 'none'}::${liveSubtitleState.isListening}::${liveSubtitleState.text}`
+		if (previousSubtitleFingerprintRef.current === fingerprint) return
+		previousSubtitleFingerprintRef.current = fingerprint
+		emitLilacTestBusEvent({
+			activeSegmentId: liveSubtitleState.activeSegmentId,
+			eventType: 'subtitle_state_changed',
+			isListening: liveSubtitleState.isListening,
+			text: liveSubtitleState.text
+		})
+	}, [liveSubtitleState.activeSegmentId, liveSubtitleState.isListening, liveSubtitleState.text])
+
+	useEffect(() => {
+		const nextFingerprintById = new Map<string, string>()
+		for (const card of translateCards) {
+			const targetText = card.translatedText || card.draftTranslatedText || ''
+			const fingerprint = `${card.direction}::${card.renderState}::${card.sourceText}::${targetText}`
+			nextFingerprintById.set(card.id, fingerprint)
+			if (previousTranslateCardFingerprintByIdRef.current.get(card.id) === fingerprint) continue
+			emitLilacTestBusEvent({
+				cardId: card.id,
+				direction: card.direction,
+				eventType: 'translate_card_patch',
+				renderState: card.renderState,
+				sourceText: card.sourceText,
+				targetText
+			})
+		}
+		previousTranslateCardFingerprintByIdRef.current = nextFingerprintById
+	}, [translateCards])
+
 	useEffect(() => {
 		return () => {
 			for (const timerId of Object.values(reconnectTimerByChannelRef.current)) {
@@ -1866,6 +1564,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			chatTranscripts,
 			chatTurnDelaySeconds,
 			connectionState,
+			connectionUiState,
 			errorMessage,
 			getDirectionColor: getDirectionColorClass,
 			liveSubtitleState,
@@ -1890,6 +1589,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			chatTranscripts,
 			chatTurnDelaySeconds,
 			connectionState,
+			connectionUiState,
 			errorMessage,
 			liveSubtitleState,
 			mode,
diff --git a/src/realtime/modelConfig.ts b/src/realtime/modelConfig.ts
index 88f8d6f..a0084e6 100644
--- a/src/realtime/modelConfig.ts
+++ b/src/realtime/modelConfig.ts
@@ -1,7 +1,11 @@
 import { z } from 'zod'
 
 export const chatRealtimeModelValues = ['gpt-realtime-1.5'] as const
-export const transcriptionModelValues = ['gpt-4o-transcribe', 'gpt-4o-mini-transcribe'] as const
+export const transcriptionModelValues = [
+	'gpt-4o-transcribe',
+	'gpt-4o-transcribe-latest',
+	'gpt-4o-mini-transcribe'
+] as const
 export const translationModelValues = ['gpt-5.3-chat-latest', 'gpt-5.3-codex'] as const
 export const transcriptionAsrProfileValues = ['accurate', 'fast'] as const
 
@@ -12,6 +16,7 @@ export const TranscriptionAsrProfileSchema = z.enum(transcriptionAsrProfileValue
 
 export const defaultChatRealtimeModel = 'gpt-realtime-1.5'
 export const defaultTranscriptionModel = 'gpt-4o-transcribe'
+export const latestTranscriptionModel = 'gpt-4o-transcribe-latest'
 export const fastTranscriptionModel = 'gpt-4o-mini-transcribe'
 export const defaultTranscriptionAsrProfile = 'accurate'
 export const defaultTranslationModel = 'gpt-5.3-chat-latest'
@@ -27,9 +32,36 @@ export type TranscriptionModel = z.infer<typeof TranscriptionModelSchema>
 export type TranslationModel = z.infer<typeof TranslationModelSchema>
 export type TranscriptionAsrProfile = z.infer<typeof TranscriptionAsrProfileSchema>
 
+function resolveModelOverride<Value extends string>(
+	overrideValue: undefined | Value,
+	fallbackValue: Value,
+	schema: z.ZodType<Value>
+): Value {
+	const parsedOverride = schema.safeParse(overrideValue)
+	return parsedOverride.success ? parsedOverride.data : fallbackValue
+}
+
+export function resolveChatRealtimeModelFromEnvironment(): ChatRealtimeModel {
+	return resolveModelOverride(
+		process.env.NEXT_PUBLIC_LILAC_REALTIME_MODEL as ChatRealtimeModel | undefined,
+		defaultChatRealtimeModel,
+		ChatRealtimeModelSchema
+	)
+}
+
 export function resolveTranscriptionModelForAsrProfile(
 	asrProfile: null | TranscriptionAsrProfile | undefined
 ): TranscriptionModel {
 	if (asrProfile === 'fast') return fastTranscriptionModel
 	return defaultTranscriptionModel
 }
+
+export function resolveTranscriptionModelFromEnvironment(
+	asrProfile: null | TranscriptionAsrProfile | undefined
+): TranscriptionModel {
+	return resolveModelOverride(
+		process.env.NEXT_PUBLIC_LILAC_TRANSCRIPTION_MODEL as TranscriptionModel | undefined,
+		resolveTranscriptionModelForAsrProfile(asrProfile),
+		TranscriptionModelSchema
+	)
+}
diff --git a/src/realtime/schemas.ts b/src/realtime/schemas.ts
index 9577820..56bbf07 100644
--- a/src/realtime/schemas.ts
+++ b/src/realtime/schemas.ts
@@ -214,6 +214,25 @@ export const ResponseOutputAudioTranscriptDeltaEventSchema = z
 	})
 	.passthrough()
 
+export const ResponseOutputAudioTranscriptDoneEventSchema = z
+	.object({
+		item_id: z.string().optional(),
+		response_id: z.string().optional(),
+		transcript: z.string().optional(),
+		type: z.literal('response.output_audio_transcript.done')
+	})
+	.passthrough()
+
+export const ResponseOutputAudioDoneEventSchema = z
+	.object({
+		item_id: z.string().optional(),
+		part: ConversationItemContentPartSchema.optional(),
+		response_id: z.string().optional(),
+		transcript: z.string().optional(),
+		type: z.literal('response.output_audio.done')
+	})
+	.passthrough()
+
 export const ResponseOutputItemAddedEventSchema = z
 	.object({
 		item: z
@@ -226,6 +245,36 @@ export const ResponseOutputItemAddedEventSchema = z
 	})
 	.passthrough()
 
+export const ResponseOutputItemCreatedEventSchema = z
+	.object({
+		item: z
+			.object({
+				id: z.string()
+			})
+			.passthrough(),
+		response_id: z.string().optional(),
+		type: z.literal('response.output_item.created')
+	})
+	.passthrough()
+
+export const ResponseContentPartAddedEventSchema = z
+	.object({
+		item_id: z.string().optional(),
+		part: ConversationItemContentPartSchema.optional(),
+		response_id: z.string().optional(),
+		type: z.literal('response.content_part.added')
+	})
+	.passthrough()
+
+export const ResponseContentPartDoneEventSchema = z
+	.object({
+		item_id: z.string().optional(),
+		part: ConversationItemContentPartSchema.optional(),
+		response_id: z.string().optional(),
+		type: z.literal('response.content_part.done')
+	})
+	.passthrough()
+
 export const ResponseOutputItemDoneEventSchema = z
 	.object({
 		item: z
diff --git a/src/realtime/sessionTypes.ts b/src/realtime/sessionTypes.ts
index 3c8a484..bfeeac6 100644
--- a/src/realtime/sessionTypes.ts
+++ b/src/realtime/sessionTypes.ts
@@ -29,6 +29,49 @@ export type LiveSubtitleState = {
 	updatedAt: number
 }
 
+export type SubtitleSegmentState = {
+	segmentId: string
+	previousSegmentId: null | string
+	utteranceId: string
+	draftText: string
+	finalText: string
+	committedAt: null | number
+	confidence?: number
+}
+
+export type TranslateUtterancePhase = 'listening' | 'draft' | 'final' | 'error'
+
+export type TranslateUtteranceState = {
+	utteranceId: string
+	previousUtteranceId: null | string
+	orderedSegmentIds: string[]
+	sourceLiveText: string
+	sourceCommittedText: string
+	draftTranslatedText: string
+	finalTranslatedText: string
+	phase: TranslateUtterancePhase
+	inputOrigin: 'audio' | 'text'
+	sourceLanguageCode: string
+	targetLanguageCode: string
+	direction: UtteranceDirection
+	createdAt: number
+	utteranceSequence: number
+	draftSequence: number
+	lastDraftAt?: number
+	responseId?: string
+	errorMessage?: string
+}
+
+export type TranslateRuntimeState = {
+	activeAudioUtteranceId: null | string
+	activeAudioUtteranceUpdatedAt: null | number
+	lastAudioUtteranceId: null | string
+	nextUtteranceSequence: number
+	orderedUtteranceIds: string[]
+	segmentById: Record<string, SubtitleSegmentState>
+	utteranceById: Record<string, TranslateUtteranceState>
+}
+
 export type TranslateSegmentAggregationState = {
 	activeUtteranceId: null | string
 	lastFinalizedAt: null | number
diff --git a/src/realtime/subtitleTranscriptionClient.ts b/src/realtime/subtitleTranscriptionClient.ts
index e0bbc06..da2267f 100644
--- a/src/realtime/subtitleTranscriptionClient.ts
+++ b/src/realtime/subtitleTranscriptionClient.ts
@@ -1,8 +1,8 @@
 'use client'
 
 import { createRealtimeTranscriptionSessionAction } from '@/app/actions/realtime'
+import { resolveTranscriptionModelFromEnvironment } from '@/realtime/modelConfig'
 import {
-	defaultInputTranscriptionModel,
 	InputAudioBufferCommittedEventSchema,
 	InputAudioBufferSpeechStartedEventSchema,
 	InputAudioBufferSpeechStoppedEventSchema,
@@ -46,7 +46,22 @@ export type SubtitleTranscriptionClientCallbacks = {
 	onSubtitleFinal: (patch: SubtitleFinalPatch) => void
 }
 
+function parsePositiveIntegerEnvironmentValue(
+	name: string,
+	fallbackValue: number,
+	bounds: { maximum: number; minimum: number }
+): number {
+	const rawValue = process.env[name]
+	if (!rawValue) return fallbackValue
+	const parsedValue = Number.parseInt(rawValue, 10)
+	if (!Number.isFinite(parsedValue)) return fallbackValue
+	return Math.max(bounds.minimum, Math.min(bounds.maximum, parsedValue))
+}
+
 function createTranscriptionSessionPatch(): Record<string, unknown> {
+	const transcriptionModel = resolveTranscriptionModelFromEnvironment(
+		resolveAsrProfileFromEnvironment()
+	)
 	return {
 		include: ['item.input_audio_transcription.logprobs'],
 		input_audio_format: 'pcm16',
@@ -54,7 +69,7 @@ function createTranscriptionSessionPatch(): Record<string, unknown> {
 			type: 'near_field'
 		},
 		input_audio_transcription: {
-			model: defaultInputTranscriptionModel
+			model: transcriptionModel
 		},
 		turn_detection: null
 	}
@@ -162,8 +177,17 @@ function computeRootMeanSquare(sampleList: Float32Array): number {
 	return Math.sqrt(squareSum / sampleList.length)
 }
 
-const manualCommitIntervalMilliseconds = 360
-const minimumCommitAudioDurationMilliseconds = 180
+const manualCommitIntervalMilliseconds = parsePositiveIntegerEnvironmentValue(
+	'NEXT_PUBLIC_LILAC_TRANSLATE_COMMIT_INTERVAL_MS',
+	780,
+	{ maximum: 2_000, minimum: 240 }
+)
+const minimumCommitAudioDurationMilliseconds = parsePositiveIntegerEnvironmentValue(
+	'NEXT_PUBLIC_LILAC_TRANSLATE_MIN_COMMIT_AUDIO_MS',
+	280,
+	{ maximum: 1_000, minimum: 180 }
+)
+const minimumForcedCommitAudioDurationMilliseconds = 140
 const speechDetectionHangoverMilliseconds = 220
 const speechDetectionRootMeanSquareThreshold = 0.008
 const transcriptionSampleRateHertz = 24_000
@@ -199,6 +223,7 @@ export class SubtitleTranscriptionClient {
 	private commitTimerId: null | number = null
 	private committedAtByItemId = new Map<string, number>()
 	private generation = 0
+	private lastCompletedConfidence: number | null = null
 	private localAudioStream: MediaStream | null = null
 	private micProcessorNode: ScriptProcessorNode | null = null
 	private micSourceNode: MediaStreamAudioSourceNode | null = null
@@ -285,6 +310,7 @@ export class SubtitleTranscriptionClient {
 		this.generation += 1
 		this.stopVoiceInput()
 		this.committedAtByItemId.clear()
+		this.lastCompletedConfidence = null
 		this.previousItemIdByItemId.clear()
 		this.segmentSequence = 0
 
@@ -329,10 +355,21 @@ export class SubtitleTranscriptionClient {
 
 	private commitAudioBufferIfReady(forceCommit: boolean): void {
 		if (!this.websocket || this.websocket.readyState !== WebSocket.OPEN) return
+		const effectiveMinimumCommitAudioDurationMilliseconds =
+			typeof this.lastCompletedConfidence === 'number' && this.lastCompletedConfidence < 0.55
+				? minimumCommitAudioDurationMilliseconds + 120
+				: minimumCommitAudioDurationMilliseconds
 		if (
 			!forceCommit &&
-			this.pendingAudioDurationMilliseconds < minimumCommitAudioDurationMilliseconds
+			this.pendingAudioDurationMilliseconds < effectiveMinimumCommitAudioDurationMilliseconds
+		) {
+			return
+		}
+		if (
+			forceCommit &&
+			this.pendingAudioDurationMilliseconds < minimumForcedCommitAudioDurationMilliseconds
 		) {
+			this.pendingAudioDurationMilliseconds = 0
 			return
 		}
 		if (this.pendingAudioDurationMilliseconds <= 0) return
@@ -341,6 +378,7 @@ export class SubtitleTranscriptionClient {
 		})
 		emitSubtitleClientLog('info', 'manual_commit', {
 			audioDurationMilliseconds: Math.round(this.pendingAudioDurationMilliseconds),
+			effectiveMinimumCommitAudioDurationMilliseconds,
 			forceCommit
 		})
 		this.pendingAudioDurationMilliseconds = 0
@@ -470,6 +508,7 @@ export class SubtitleTranscriptionClient {
 		if (!transcript) return
 		this.segmentSequence += 1
 		const confidence = computeConfidenceFromLogprobs(event.logprobs)
+		this.lastCompletedConfidence = typeof confidence === 'number' ? confidence : null
 		this.callbacks.onSubtitleFinal({
 			committedAt: this.committedAtByItemId.get(event.item_id) ?? Date.now(),
 			itemId: event.item_id,
diff --git a/src/realtime/translateRuntimeState.ts b/src/realtime/translateRuntimeState.ts
new file mode 100644
index 0000000..8e7378d
--- /dev/null
+++ b/src/realtime/translateRuntimeState.ts
@@ -0,0 +1,610 @@
+import type {
+	LiveTranslateDraftPatch,
+	LiveTranslateResultPatch
+} from '@/realtime/liveTranslateRealtimeClient'
+import type {
+	LiveSubtitleState,
+	TranslateRuntimeState,
+	TranslateSettings,
+	TranslateUtteranceState,
+	UtteranceCard
+} from '@/realtime/sessionTypes'
+import type { SubtitleDeltaPatch, SubtitleFinalPatch } from '@/realtime/subtitleTranscriptionClient'
+
+type AudioSegmentEvent = Pick<SubtitleDeltaPatch, 'itemId' | 'previousItemId'> & {
+	text: string
+}
+
+type ResolveAudioUtteranceResult = {
+	nextState: TranslateRuntimeState
+	previousUtteranceId: null | string
+	utteranceId: string
+}
+
+const audioUtteranceReuseThresholdMilliseconds = 1200
+
+export function createTranslateRuntimeState(): TranslateRuntimeState {
+	return {
+		activeAudioUtteranceId: null,
+		activeAudioUtteranceUpdatedAt: null,
+		lastAudioUtteranceId: null,
+		nextUtteranceSequence: 1,
+		orderedUtteranceIds: [],
+		segmentById: {},
+		utteranceById: {}
+	}
+}
+
+function normalizeWhitespace(value: string): string {
+	return value.replace(/\s+/g, ' ').trim()
+}
+
+function isAsciiDigitCharacter(value: string): boolean {
+	return value >= '0' && value <= '9'
+}
+
+function isUnicodeLetterCharacter(value: string): boolean {
+	return value.toLowerCase() !== value.toUpperCase()
+}
+
+function canonicalizeTranscriptionText(value: string): string {
+	const punctuationNormalizedValue = normalizeWhitespace(value)
+		.toLowerCase()
+		.replace(/\s+([,.;!?])/g, '$1')
+	let canonicalValue = ''
+	for (const character of punctuationNormalizedValue) {
+		if (isAsciiDigitCharacter(character) || isUnicodeLetterCharacter(character)) {
+			canonicalValue += character
+		}
+	}
+	return canonicalValue
+}
+
+function isEquivalentTranscriptionChunk(leftValue: string, rightValue: string): boolean {
+	const normalizedLeftValue = canonicalizeTranscriptionText(leftValue)
+	const normalizedRightValue = canonicalizeTranscriptionText(rightValue)
+	if (!normalizedLeftValue || !normalizedRightValue) return false
+	if (normalizedLeftValue === normalizedRightValue) return true
+	if (
+		normalizedLeftValue.includes(normalizedRightValue) &&
+		normalizedRightValue.length >= Math.floor(normalizedLeftValue.length * 0.7)
+	) {
+		return true
+	}
+	if (
+		normalizedRightValue.includes(normalizedLeftValue) &&
+		normalizedLeftValue.length >= Math.floor(normalizedRightValue.length * 0.7)
+	) {
+		return true
+	}
+	return false
+}
+
+function findWordOverlapLength(existingText: string, nextText: string): number {
+	const existingWordList = existingText.split(' ')
+	const nextWordList = nextText.split(' ')
+	const maxOverlapLength = Math.min(existingWordList.length, nextWordList.length)
+	for (let overlapLength = maxOverlapLength; overlapLength >= 1; overlapLength -= 1) {
+		const existingSuffix = existingWordList.slice(-overlapLength).join(' ').toLowerCase()
+		const nextPrefix = nextWordList.slice(0, overlapLength).join(' ').toLowerCase()
+		if (existingSuffix === nextPrefix) return overlapLength
+	}
+	return 0
+}
+
+function mergeUtteranceText(existingText: string, nextChunkText: string): string {
+	const normalizedExistingText = normalizeWhitespace(existingText)
+	const normalizedChunkText = normalizeWhitespace(nextChunkText)
+	if (!normalizedChunkText) return normalizedExistingText
+	if (!normalizedExistingText) return normalizedChunkText
+	if (isEquivalentTranscriptionChunk(normalizedExistingText, normalizedChunkText)) {
+		return normalizedExistingText
+	}
+	if (normalizedExistingText.toLowerCase().endsWith(normalizedChunkText.toLowerCase())) {
+		return normalizedExistingText
+	}
+	if (normalizedChunkText.toLowerCase().startsWith(normalizedExistingText.toLowerCase())) {
+		return normalizedChunkText
+	}
+	const overlapLength = findWordOverlapLength(normalizedExistingText, normalizedChunkText)
+	if (overlapLength > 0) {
+		const chunkWordList = normalizedChunkText.split(' ')
+		const suffixWordList = chunkWordList.slice(overlapLength)
+		if (suffixWordList.length === 0) return normalizedExistingText
+		return `${normalizedExistingText} ${suffixWordList.join(' ')}`
+	}
+	return `${normalizedExistingText} ${normalizedChunkText}`
+}
+
+function createAudioUtterance(
+	state: TranslateRuntimeState,
+	input: {
+		createdAt: number
+		inputOrigin: 'audio' | 'text'
+		previousUtteranceId: null | string
+		settings: TranslateSettings
+		utteranceId: string
+	}
+): TranslateRuntimeState {
+	const nextUtterance: TranslateUtteranceState = {
+		createdAt: input.createdAt,
+		direction: 'my_to_target',
+		draftSequence: 0,
+		draftTranslatedText: '',
+		finalTranslatedText: '',
+		inputOrigin: input.inputOrigin,
+		orderedSegmentIds: [],
+		phase: 'listening',
+		previousUtteranceId: input.previousUtteranceId,
+		sourceCommittedText: '',
+		sourceLanguageCode: input.settings.myLanguageCode,
+		sourceLiveText: '',
+		targetLanguageCode: input.settings.translateToLanguageCode,
+		utteranceId: input.utteranceId,
+		utteranceSequence: state.nextUtteranceSequence
+	}
+	return {
+		...state,
+		nextUtteranceSequence: state.nextUtteranceSequence + 1,
+		orderedUtteranceIds: insertOrderedId(
+			state.orderedUtteranceIds,
+			input.utteranceId,
+			input.previousUtteranceId
+		),
+		utteranceById: {
+			...state.utteranceById,
+			[input.utteranceId]: nextUtterance
+		}
+	}
+}
+
+function insertOrderedId(
+	orderedIdList: string[],
+	nextId: string,
+	previousId: null | string
+): string[] {
+	const filteredIdList = orderedIdList.filter(id => id !== nextId)
+	if (!previousId) return [...filteredIdList, nextId]
+	const previousIndex = filteredIdList.indexOf(previousId)
+	if (previousIndex === -1) return [...filteredIdList, nextId]
+	return [
+		...filteredIdList.slice(0, previousIndex + 1),
+		nextId,
+		...filteredIdList.slice(previousIndex + 1)
+	]
+}
+
+function insertSegmentId(
+	orderedSegmentIds: string[],
+	segmentId: string,
+	previousSegmentId: null | string
+): string[] {
+	const filteredSegmentIds = orderedSegmentIds.filter(id => id !== segmentId)
+	if (!previousSegmentId) return [...filteredSegmentIds, segmentId]
+	const previousIndex = filteredSegmentIds.indexOf(previousSegmentId)
+	if (previousIndex === -1) return [...filteredSegmentIds, segmentId]
+	return [
+		...filteredSegmentIds.slice(0, previousIndex + 1),
+		segmentId,
+		...filteredSegmentIds.slice(previousIndex + 1)
+	]
+}
+
+function composeUtteranceText(
+	state: TranslateRuntimeState,
+	utteranceId: string,
+	textSelector: (input: { draftText: string; finalText: string }) => string
+): string {
+	const utterance = state.utteranceById[utteranceId]
+	if (!utterance) return ''
+	let composedText = ''
+	for (const segmentId of utterance.orderedSegmentIds) {
+		const segment = state.segmentById[segmentId]
+		if (!segment) continue
+		const nextText = normalizeWhitespace(
+			textSelector({ draftText: segment.draftText, finalText: segment.finalText })
+		)
+		if (!nextText) continue
+		composedText = mergeUtteranceText(composedText, nextText)
+	}
+	return normalizeWhitespace(composedText)
+}
+
+function refreshUtteranceSourceText(
+	state: TranslateRuntimeState,
+	utteranceId: string
+): TranslateRuntimeState {
+	const utterance = state.utteranceById[utteranceId]
+	if (!utterance) return state
+	const sourceCommittedText = composeUtteranceText(state, utteranceId, ({ finalText }) => finalText)
+	const sourceLiveText = composeUtteranceText(
+		state,
+		utteranceId,
+		({ draftText, finalText }) => finalText || draftText
+	)
+	return {
+		...state,
+		utteranceById: {
+			...state.utteranceById,
+			[utteranceId]: {
+				...utterance,
+				sourceCommittedText,
+				sourceLiveText
+			}
+		}
+	}
+}
+
+function resolveAudioUtteranceForSegment(
+	state: TranslateRuntimeState,
+	input: AudioSegmentEvent & {
+		now: number
+		settings: TranslateSettings
+	}
+): ResolveAudioUtteranceResult {
+	const existingSegment = state.segmentById[input.itemId]
+	if (existingSegment) {
+		const existingUtterance = state.utteranceById[existingSegment.utteranceId]
+		return {
+			nextState: state,
+			previousUtteranceId: existingUtterance?.previousUtteranceId ?? null,
+			utteranceId: existingSegment.utteranceId
+		}
+	}
+
+	const previousSegment = input.previousItemId ? state.segmentById[input.previousItemId] : undefined
+	const activeAudioUtterance =
+		state.activeAudioUtteranceId && state.activeAudioUtteranceUpdatedAt
+			? {
+					updatedAt: state.activeAudioUtteranceUpdatedAt,
+					utteranceId: state.activeAudioUtteranceId
+				}
+			: null
+	const shouldReuseActiveUtterance =
+		activeAudioUtterance !== null &&
+		input.now - activeAudioUtterance.updatedAt <= audioUtteranceReuseThresholdMilliseconds &&
+		(!previousSegment || previousSegment.utteranceId === activeAudioUtterance.utteranceId)
+
+	if (shouldReuseActiveUtterance && activeAudioUtterance) {
+		const utterance = state.utteranceById[activeAudioUtterance.utteranceId]
+		return {
+			nextState: state,
+			previousUtteranceId: utterance?.previousUtteranceId ?? null,
+			utteranceId: activeAudioUtterance.utteranceId
+		}
+	}
+
+	const utteranceId = `audio_utterance_${crypto.randomUUID().replaceAll('-', '').slice(0, 24)}`
+	const previousUtteranceId = previousSegment?.utteranceId ?? state.lastAudioUtteranceId ?? null
+	const nextState = createAudioUtterance(state, {
+		createdAt: input.now,
+		inputOrigin: 'audio',
+		previousUtteranceId,
+		settings: input.settings,
+		utteranceId
+	})
+	return {
+		nextState: {
+			...nextState,
+			activeAudioUtteranceId: utteranceId,
+			activeAudioUtteranceUpdatedAt: input.now,
+			lastAudioUtteranceId: utteranceId
+		},
+		previousUtteranceId,
+		utteranceId
+	}
+}
+
+function updateAudioUtteranceActivity(
+	state: TranslateRuntimeState,
+	utteranceId: string,
+	now: number
+): TranslateRuntimeState {
+	return {
+		...state,
+		activeAudioUtteranceId: utteranceId,
+		activeAudioUtteranceUpdatedAt: now,
+		lastAudioUtteranceId: utteranceId
+	}
+}
+
+export function applySubtitleSegmentDelta(
+	state: TranslateRuntimeState,
+	input: AudioSegmentEvent & {
+		now: number
+		settings: TranslateSettings
+	}
+): TranslateRuntimeState {
+	const normalizedText = normalizeWhitespace(input.text)
+	if (!normalizedText) return state
+	const resolvedUtterance = resolveAudioUtteranceForSegment(state, input)
+	const utterance = resolvedUtterance.nextState.utteranceById[resolvedUtterance.utteranceId]
+	if (!utterance) return state
+	const nextSegmentState = {
+		...resolvedUtterance.nextState,
+		segmentById: {
+			...resolvedUtterance.nextState.segmentById,
+			[input.itemId]: {
+				committedAt: resolvedUtterance.nextState.segmentById[input.itemId]?.committedAt ?? null,
+				draftText: normalizedText,
+				finalText: resolvedUtterance.nextState.segmentById[input.itemId]?.finalText ?? '',
+				previousSegmentId: input.previousItemId ?? null,
+				segmentId: input.itemId,
+				utteranceId: resolvedUtterance.utteranceId
+			}
+		},
+		utteranceById: {
+			...resolvedUtterance.nextState.utteranceById,
+			[resolvedUtterance.utteranceId]: {
+				...utterance,
+				orderedSegmentIds: insertSegmentId(
+					utterance.orderedSegmentIds,
+					input.itemId,
+					input.previousItemId ?? null
+				)
+			}
+		}
+	}
+	return refreshUtteranceSourceText(
+		updateAudioUtteranceActivity(nextSegmentState, resolvedUtterance.utteranceId, input.now),
+		resolvedUtterance.utteranceId
+	)
+}
+
+export function applySubtitleSegmentFinal(
+	state: TranslateRuntimeState,
+	input: SubtitleFinalPatch & {
+		settings: TranslateSettings
+	}
+): TranslateRuntimeState {
+	const normalizedText = normalizeWhitespace(input.text)
+	if (!normalizedText) return state
+	const resolvedUtterance = resolveAudioUtteranceForSegment(state, {
+		itemId: input.itemId,
+		now: input.committedAt,
+		previousItemId: input.previousItemId ?? null,
+		settings: input.settings,
+		text: normalizedText
+	})
+	const utterance = resolvedUtterance.nextState.utteranceById[resolvedUtterance.utteranceId]
+	if (!utterance) return state
+	const previousSegment = resolvedUtterance.nextState.segmentById[input.itemId]
+	const nextSegmentState = {
+		...resolvedUtterance.nextState,
+		segmentById: {
+			...resolvedUtterance.nextState.segmentById,
+			[input.itemId]: {
+				committedAt: input.committedAt,
+				...(typeof input.confidence === 'number' ? { confidence: input.confidence } : {}),
+				draftText: normalizedText,
+				finalText: normalizedText,
+				previousSegmentId: input.previousItemId ?? null,
+				segmentId: input.itemId,
+				utteranceId: previousSegment?.utteranceId ?? resolvedUtterance.utteranceId
+			}
+		},
+		utteranceById: {
+			...resolvedUtterance.nextState.utteranceById,
+			[resolvedUtterance.utteranceId]: {
+				...utterance,
+				orderedSegmentIds: insertSegmentId(
+					utterance.orderedSegmentIds,
+					input.itemId,
+					input.previousItemId ?? null
+				)
+			}
+		}
+	}
+	return refreshUtteranceSourceText(
+		updateAudioUtteranceActivity(nextSegmentState, resolvedUtterance.utteranceId, input.committedAt),
+		resolvedUtterance.utteranceId
+	)
+}
+
+export function upsertTypedTranslateUtterance(
+	state: TranslateRuntimeState,
+	input: {
+		itemId: string
+		now: number
+		settings: TranslateSettings
+		text: string
+	}
+): TranslateRuntimeState {
+	const normalizedText = normalizeWhitespace(input.text)
+	if (!normalizedText) return state
+	const previousUtteranceId =
+		state.orderedUtteranceIds.length > 0
+			? (state.orderedUtteranceIds[state.orderedUtteranceIds.length - 1] ?? null)
+			: null
+	const nextState = createAudioUtterance(state, {
+		createdAt: input.now,
+		inputOrigin: 'text',
+		previousUtteranceId,
+		settings: input.settings,
+		utteranceId: input.itemId
+	})
+	const utterance = nextState.utteranceById[input.itemId]
+	if (!utterance) return nextState
+	return {
+		...nextState,
+		utteranceById: {
+			...nextState.utteranceById,
+			[input.itemId]: {
+				...utterance,
+				phase: 'draft',
+				sourceCommittedText: normalizedText,
+				sourceLiveText: normalizedText
+			}
+		}
+	}
+}
+
+export function applyTranslateDraftPatch(
+	state: TranslateRuntimeState,
+	patch: LiveTranslateDraftPatch,
+	settings: TranslateSettings,
+	now: number
+): TranslateRuntimeState {
+	const existingUtterance = state.utteranceById[patch.itemId]
+	const baseState = existingUtterance
+		? state
+		: upsertTypedTranslateUtterance(state, {
+				itemId: patch.itemId,
+				now,
+				settings,
+				text: ''
+			})
+	const utterance = baseState.utteranceById[patch.itemId]
+	if (!utterance || utterance.phase === 'final' || utterance.phase === 'error') return state
+	if (patch.draftSequence < utterance.draftSequence) return state
+	return {
+		...baseState,
+		utteranceById: {
+			...baseState.utteranceById,
+			[patch.itemId]: {
+				...utterance,
+				draftSequence: patch.draftSequence,
+				draftTranslatedText: normalizeWhitespace(patch.translatedText),
+				lastDraftAt: now,
+				phase: 'draft',
+				...(patch.responseId ? { responseId: patch.responseId } : {})
+			}
+		}
+	}
+}
+
+export function applyTranslateResultPatch(
+	state: TranslateRuntimeState,
+	patch: LiveTranslateResultPatch,
+	settings: TranslateSettings,
+	now: number
+): TranslateRuntimeState {
+	const existingUtterance = state.utteranceById[patch.itemId]
+	const baseState = existingUtterance
+		? state
+		: upsertTypedTranslateUtterance(state, {
+				itemId: patch.itemId,
+				now,
+				settings,
+				text: patch.sourceText
+			})
+	const utterance = baseState.utteranceById[patch.itemId]
+	if (!utterance) return state
+	const normalizedSourceText = normalizeWhitespace(patch.sourceText)
+	const normalizedTranslatedText = normalizeWhitespace(patch.translatedText)
+	return {
+		...baseState,
+		utteranceById: {
+			...baseState.utteranceById,
+			[patch.itemId]: {
+				...utterance,
+				direction: patch.direction,
+				draftTranslatedText:
+					patch.status === 'final' ? normalizedTranslatedText : utterance.draftTranslatedText,
+				finalTranslatedText: patch.status === 'final' ? normalizedTranslatedText : '',
+				phase: patch.status === 'final' ? 'final' : 'error',
+				sourceCommittedText: normalizedSourceText || utterance.sourceCommittedText,
+				sourceLanguageCode: patch.sourceLanguageCode,
+				sourceLiveText: normalizedSourceText || utterance.sourceLiveText,
+				targetLanguageCode: patch.targetLanguageCode,
+				...(patch.status === 'error' ? { errorMessage: normalizedTranslatedText } : {}),
+				...(patch.responseId ? { responseId: patch.responseId } : {})
+			}
+		}
+	}
+}
+
+export function getTranslateCommittedSourceText(
+	state: TranslateRuntimeState,
+	utteranceId: string
+): string {
+	return state.utteranceById[utteranceId]?.sourceCommittedText ?? ''
+}
+
+export function getTranslateLatestConfidence(
+	state: TranslateRuntimeState,
+	utteranceId: string
+): number | undefined {
+	const utterance = state.utteranceById[utteranceId]
+	if (!utterance) return undefined
+	const confidenceList = utterance.orderedSegmentIds
+		.map(segmentId => state.segmentById[segmentId]?.confidence)
+		.filter((value): value is number => typeof value === 'number')
+	if (confidenceList.length === 0) return undefined
+	return Math.min(...confidenceList)
+}
+
+export function clearTranslateUtterance(
+	state: TranslateRuntimeState,
+	utteranceId: string
+): TranslateRuntimeState {
+	const utterance = state.utteranceById[utteranceId]
+	if (!utterance) return state
+	const nextSegmentById = { ...state.segmentById }
+	for (const segmentId of utterance.orderedSegmentIds) {
+		delete nextSegmentById[segmentId]
+	}
+	const nextUtteranceById = { ...state.utteranceById }
+	delete nextUtteranceById[utteranceId]
+	return {
+		...state,
+		orderedUtteranceIds: state.orderedUtteranceIds.filter(id => id !== utteranceId),
+		segmentById: nextSegmentById,
+		utteranceById: nextUtteranceById
+	}
+}
+
+export function selectTranslateCards(state: TranslateRuntimeState): UtteranceCard[] {
+	return state.orderedUtteranceIds
+		.map(utteranceId => state.utteranceById[utteranceId])
+		.filter((utterance): utterance is TranslateUtteranceState => !!utterance)
+		.map(utterance => {
+			const translatedText =
+				utterance.finalTranslatedText || utterance.draftTranslatedText || utterance.errorMessage || ''
+			const status =
+				utterance.phase === 'final'
+					? 'final'
+					: utterance.phase === 'error'
+						? 'error'
+						: utterance.phase === 'draft'
+							? 'draft'
+							: 'streaming'
+			return {
+				createdAt: utterance.createdAt,
+				direction: utterance.direction,
+				draftSequence: utterance.draftSequence,
+				...(utterance.draftTranslatedText
+					? { draftTranslatedText: utterance.draftTranslatedText }
+					: {}),
+				...(utterance.errorMessage ? { errorMessage: utterance.errorMessage } : {}),
+				id: utterance.utteranceId,
+				inputOrigin: utterance.inputOrigin,
+				...(utterance.lastDraftAt ? { lastDraftAt: utterance.lastDraftAt } : {}),
+				renderState: utterance.phase,
+				...(utterance.responseId ? { responseId: utterance.responseId } : {}),
+				sourceItemId: utterance.utteranceId,
+				sourceLanguageCode: utterance.sourceLanguageCode,
+				sourceText: utterance.sourceCommittedText || utterance.sourceLiveText,
+				status,
+				targetLanguageCode: utterance.targetLanguageCode,
+				translatedText,
+				utteranceSequence: utterance.utteranceSequence
+			} satisfies UtteranceCard
+		})
+}
+
+export function selectLiveSubtitleState(
+	state: TranslateRuntimeState,
+	isListening: boolean,
+	updatedAt: number
+): LiveSubtitleState {
+	const activeUtterance = state.activeAudioUtteranceId
+		? state.utteranceById[state.activeAudioUtteranceId]
+		: null
+	return {
+		activeSegmentId: activeUtterance?.utteranceId ?? null,
+		isListening,
+		text: '',
+		updatedAt
+	}
+}

From 95ae7d1263155341309392b303dafac8aee662b9 Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Fri, 6 Mar 2026 14:15:47 -0500
Subject: [PATCH 23/24] Improve translate transcript finalization

---
 src/app/actions/realtime.ts                 | 129 +++++++-
 src/realtime/languageCatalog.ts             |   6 +
 src/realtime/modeRuntimeStore.tsx           | 314 ++++++++++++++++++--
 src/realtime/modelConfig.ts                 |   2 +-
 src/realtime/schemas.ts                     |   9 +
 src/realtime/subtitleTranscriptionClient.ts | 199 +++++++++++--
 src/realtime/translateRuntimeState.ts       |  26 +-
 7 files changed, 638 insertions(+), 47 deletions(-)

diff --git a/src/app/actions/realtime.ts b/src/app/actions/realtime.ts
index 5fa2641..b083810 100644
--- a/src/app/actions/realtime.ts
+++ b/src/app/actions/realtime.ts
@@ -1,5 +1,6 @@
 'use server'
 
+import { resolveRealtimeTranscriptionLanguageCode } from '@/realtime/languageCatalog'
 import {
 	defaultTranscriptionModel,
 	resolveTranscriptionModelFromEnvironment
@@ -11,7 +12,9 @@ import {
 	CreateRealtimeTranscriptionSessionActionOutputSchema,
 	CreateTranslateRealtimeClientSecretActionInputSchema,
 	CreateTranslateRealtimeClientSecretActionOutputSchema,
-	parseClientSecretResponse
+	parseClientSecretResponse,
+	RetranscribeTranslateAudioActionInputSchema,
+	RetranscribeTranslateAudioActionOutputSchema
 } from '@/realtime/schemas'
 import env from '~/env'
 
@@ -138,6 +141,94 @@ async function postOpenAi(path: string, body: unknown): Promise<unknown> {
 	throw new Error('OpenAI request exhausted retry attempts.')
 }
 
+async function postOpenAiMultipart(path: string, body: FormData): Promise<unknown> {
+	const maximumAttempts = 3
+	for (let attemptNumber = 1; attemptNumber <= maximumAttempts; attemptNumber += 1) {
+		try {
+			const response = await fetch(`${openAiApiBaseUrl}${path}`, {
+				body,
+				headers: {
+					Authorization: `Bearer ${env.OPENAI_API_KEY}`
+				},
+				method: 'POST'
+			})
+
+			const payload = await parseJsonResponse(response)
+
+			if (!response.ok) {
+				const fallbackMessage = `OpenAI request failed (${response.status})`
+				if (typeof payload === 'object' && payload !== null && 'error' in payload) {
+					const openAiError = (
+						payload as {
+							error?: {
+								code?: string
+								message?: string
+								param?: string
+								type?: string
+							}
+						}
+					).error
+					throw new OpenAiRequestError({
+						message: openAiError?.message || fallbackMessage,
+						status: response.status,
+						...(openAiError?.code ? { code: openAiError.code } : {}),
+						...(openAiError?.param ? { param: openAiError.param } : {}),
+						...(openAiError?.type ? { type: openAiError.type } : {})
+					})
+				}
+
+				throw new OpenAiRequestError({
+					message:
+						typeof payload === 'string' && payload.trim()
+							? truncateErrorMessage(payload.trim())
+							: fallbackMessage,
+					status: response.status
+				})
+			}
+
+			return payload
+		} catch (error) {
+			const isRetryableError =
+				error instanceof OpenAiRequestError
+					? isRetryableOpenAiStatus(error.status)
+					: error instanceof Error
+						? /timeout|timed out|gateway time-out|gateway timeout|fetch failed/i.test(error.message)
+						: false
+			if (!isRetryableError || attemptNumber >= maximumAttempts) {
+				throw error
+			}
+			await waitForRetryDelay(attemptNumber)
+		}
+	}
+	throw new Error('OpenAI multipart request exhausted retry attempts.')
+}
+
+function createWaveFileBufferFromPcm16Base64(audioPcm16Base64: string): Buffer {
+	const pcmBuffer = Buffer.from(audioPcm16Base64, 'base64')
+	const headerBuffer = Buffer.alloc(44)
+	const sampleRateHertz = 24_000
+	const channelCount = 1
+	const bitsPerSample = 16
+	const blockAlign = (channelCount * bitsPerSample) / 8
+	const byteRate = sampleRateHertz * blockAlign
+
+	headerBuffer.write('RIFF', 0)
+	headerBuffer.writeUInt32LE(36 + pcmBuffer.length, 4)
+	headerBuffer.write('WAVE', 8)
+	headerBuffer.write('fmt ', 12)
+	headerBuffer.writeUInt32LE(16, 16)
+	headerBuffer.writeUInt16LE(1, 20)
+	headerBuffer.writeUInt16LE(channelCount, 22)
+	headerBuffer.writeUInt32LE(sampleRateHertz, 24)
+	headerBuffer.writeUInt32LE(byteRate, 28)
+	headerBuffer.writeUInt16LE(blockAlign, 32)
+	headerBuffer.writeUInt16LE(bitsPerSample, 34)
+	headerBuffer.write('data', 36)
+	headerBuffer.writeUInt32LE(pcmBuffer.length, 40)
+
+	return Buffer.concat([headerBuffer, pcmBuffer])
+}
+
 function createTranslateInstructions(
 	myLanguageCode: string,
 	translateToLanguageCode: string
@@ -281,6 +372,9 @@ export async function createRealtimeTranscriptionSessionAction(input: unknown):
 }> {
 	const parsedInput = CreateRealtimeTranscriptionSessionActionInputSchema.parse(input)
 	const transcriptionModel = resolveTranscriptionModelFromEnvironment(parsedInput.asrProfile)
+	const transcriptionLanguageCode = resolveRealtimeTranscriptionLanguageCode(
+		parsedInput.myLanguageCode
+	)
 
 	const payload = await postOpenAi('/realtime/transcription_sessions', {
 		include: ['item.input_audio_transcription.logprobs'],
@@ -289,7 +383,8 @@ export async function createRealtimeTranscriptionSessionAction(input: unknown):
 			type: 'near_field'
 		},
 		input_audio_transcription: {
-			model: transcriptionModel
+			model: transcriptionModel,
+			...(transcriptionLanguageCode ? { language: transcriptionLanguageCode } : {})
 		},
 		turn_detection: null
 	})
@@ -297,3 +392,33 @@ export async function createRealtimeTranscriptionSessionAction(input: unknown):
 	const parsedSecret = parseClientSecretResponse(payload)
 	return CreateRealtimeTranscriptionSessionActionOutputSchema.parse(parsedSecret)
 }
+
+export async function retranscribeTranslateAudioAction(input: unknown): Promise<{
+	transcript: string
+}> {
+	const parsedInput = RetranscribeTranslateAudioActionInputSchema.parse(input)
+	const transcriptionLanguageCode = resolveRealtimeTranscriptionLanguageCode(
+		parsedInput.languageCode
+	)
+	const transcriptionModel = resolveTranscriptionModelFromEnvironment('accurate')
+	const waveFileBuffer = createWaveFileBufferFromPcm16Base64(parsedInput.audioPcm16Base64)
+	const formData = new FormData()
+	formData.append(
+		'file',
+		new File([Uint8Array.from(waveFileBuffer)], 'utterance.wav', {
+			type: 'audio/wav'
+		})
+	)
+	formData.append('model', transcriptionModel)
+	formData.append('response_format', 'json')
+	formData.append('temperature', '0')
+	if (transcriptionLanguageCode) {
+		formData.append('language', transcriptionLanguageCode)
+	}
+
+	const payload = await postOpenAiMultipart('/audio/transcriptions', formData)
+	const parsedPayload = RetranscribeTranslateAudioActionOutputSchema.parse(payload)
+	return {
+		transcript: parsedPayload.text.trim()
+	}
+}
diff --git a/src/realtime/languageCatalog.ts b/src/realtime/languageCatalog.ts
index e25100e..48e275c 100644
--- a/src/realtime/languageCatalog.ts
+++ b/src/realtime/languageCatalog.ts
@@ -95,6 +95,12 @@ export function normalizeLanguageCode(languageCode: string): string {
 	return languageCode.trim().toLowerCase()
 }
 
+export function resolveRealtimeTranscriptionLanguageCode(languageCode: string): null | string {
+	const normalizedLanguageCode = normalizeLanguageCode(languageCode)
+	const [primarySubtag = ''] = normalizedLanguageCode.split('-')
+	return /^[a-z]{2,3}$/i.test(primarySubtag) ? primarySubtag : null
+}
+
 export function isValidLanguageCode(languageCode: string): boolean {
 	return languageCodePattern.test(languageCode.trim())
 }
diff --git a/src/realtime/modeRuntimeStore.tsx b/src/realtime/modeRuntimeStore.tsx
index fbcf156..c8b6a7f 100644
--- a/src/realtime/modeRuntimeStore.tsx
+++ b/src/realtime/modeRuntimeStore.tsx
@@ -11,6 +11,7 @@ import {
 	useState
 } from 'react'
 
+import { retranscribeTranslateAudioAction } from '@/app/actions/realtime'
 import { emitLilacTestBusEvent } from '@/evals/testBus'
 import { ChatRealtimeClient, type ChatTranscriptPatch } from '@/realtime/chatRealtimeClient'
 import { resolveLanguageCode } from '@/realtime/languageCatalog'
@@ -40,10 +41,12 @@ import {
 	SubtitleTranscriptionClient
 } from '@/realtime/subtitleTranscriptionClient'
 import {
+	applyCanonicalTranslateSourceText,
 	applySubtitleSegmentDelta,
 	applySubtitleSegmentFinal,
 	applyTranslateDraftPatch as applyTranslateRuntimeDraftPatch,
 	applyTranslateResultPatch as applyTranslateRuntimeResultPatch,
+	clearTranslateUtterance,
 	createTranslateRuntimeState,
 	getTranslateCommittedSourceText,
 	getTranslateLatestConfidence,
@@ -105,16 +108,48 @@ type PendingTranslateInput =
 			requestKind: 'draft'
 	  })
 
+type RecentFinalizedTranslateUtterance = {
+	createdAt: number
+	sourceText: string
+	utteranceId: string
+}
+
 const reconnectStatusGraceMilliseconds = 1500
 const subtitleDedupRoundedTimeWindowMilliseconds = 700
 const finalTranslateLowConfidenceThreshold = 0.6
 const finalTranslateLowConfidenceDelayMilliseconds = 280
-const finalTranslateSilenceDelayMilliseconds = 1200
+const finalTranslateSilenceDelayMilliseconds = 1800
 const minimumDraftTextLength = 2
 const minimumDraftTextDeltaLength = 4
 const isTranslateStreamingV2Enabled =
 	process.env.NEXT_PUBLIC_LILAC_TRANSLATE_STREAMING_V2 !== 'false'
 
+function concatInt16ArrayList(inputList: Int16Array[]): Int16Array {
+	const totalLength = inputList.reduce((sum, inputArray) => sum + inputArray.length, 0)
+	const outputArray = new Int16Array(totalLength)
+	let outputOffset = 0
+	for (const inputArray of inputList) {
+		outputArray.set(inputArray, outputOffset)
+		outputOffset += inputArray.length
+	}
+	return outputArray
+}
+
+function int16ArrayToBase64(inputArray: Int16Array): string {
+	const byteView = new Uint8Array(inputArray.buffer)
+	const chunkSize = 0x8000
+	let binaryString = ''
+	for (let offset = 0; offset < byteView.length; offset += chunkSize) {
+		const chunk = byteView.subarray(offset, offset + chunkSize)
+		let chunkString = ''
+		for (let byteIndex = 0; byteIndex < chunk.length; byteIndex += 1) {
+			chunkString += String.fromCharCode(chunk[byteIndex] ?? 0)
+		}
+		binaryString += chunkString
+	}
+	return btoa(binaryString)
+}
+
 function parsePositiveIntegerEnvironmentValue(
 	name: string,
 	fallbackValue: number,
@@ -208,6 +243,57 @@ function isEquivalentTranscriptionChunk(leftValue: string, rightValue: string):
 	return false
 }
 
+function isLikelyEchoUtterance(candidateText: string, previousText: string): boolean {
+	const normalizedCandidateText = normalizeWhitespace(candidateText)
+	const normalizedPreviousText = normalizeWhitespace(previousText)
+	if (!normalizedCandidateText || !normalizedPreviousText) return false
+	if (isEquivalentTranscriptionChunk(normalizedCandidateText, normalizedPreviousText)) return true
+
+	const canonicalCandidateText = canonicalizeTranscriptionText(normalizedCandidateText)
+	const canonicalPreviousText = canonicalizeTranscriptionText(normalizedPreviousText)
+	if (!canonicalCandidateText || !canonicalPreviousText) return false
+	if (canonicalCandidateText.length < 8) return false
+	if (canonicalPreviousText.endsWith(canonicalCandidateText)) return true
+	if (
+		canonicalPreviousText.includes(canonicalCandidateText) &&
+		canonicalCandidateText.length <= Math.floor(canonicalPreviousText.length * 0.75)
+	) {
+		return true
+	}
+	return false
+}
+
+function shouldSuppressPostFinalDelta(input: {
+	now: number
+	previousSourceText: string
+	recentFinalizedUtterance: null | RecentFinalizedTranslateUtterance
+	text: string
+}): boolean {
+	const normalizedText = normalizeWhitespace(input.text)
+	if (!normalizedText) return true
+	const signalCharacterCount = canonicalizeTranscriptionText(normalizedText).length
+	const wordCount = normalizedText.split(' ').filter(Boolean).length
+	if (signalCharacterCount > 14 && wordCount > 3) return false
+
+	const normalizedPreviousSourceText = normalizeWhitespace(input.previousSourceText)
+	if (normalizedPreviousSourceText) {
+		const canonicalPreviousSourceText = canonicalizeTranscriptionText(normalizedPreviousSourceText)
+		const canonicalNextSourceText = canonicalizeTranscriptionText(normalizedText)
+		if (
+			canonicalNextSourceText &&
+			(canonicalPreviousSourceText.startsWith(canonicalNextSourceText) ||
+				canonicalPreviousSourceText.endsWith(canonicalNextSourceText) ||
+				canonicalPreviousSourceText.includes(canonicalNextSourceText))
+		) {
+			return true
+		}
+	}
+
+	const { recentFinalizedUtterance } = input
+	if (!recentFinalizedUtterance) return false
+	return input.now - recentFinalizedUtterance.createdAt <= 2_200
+}
+
 function getChatRoleSortValue(role: 'assistant' | 'user'): number {
 	switch (role) {
 		case 'user':
@@ -496,8 +582,10 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	const chatTranscriptSequenceRef = useRef(1)
 	const translateRuntimeStateRef = useRef<TranslateRuntimeState>(createTranslateRuntimeState())
 	const subtitleDedupKeyTimestampByKeyRef = useRef<Map<string, number>>(new Map())
+	const subtitleSegmentAudioByItemIdRef = useRef<Map<string, Int16Array>>(new Map())
 	const subtitleRawSegmentTextByItemIdRef = useRef<Map<string, string>>(new Map())
 	const translateDraftSequenceByItemIdRef = useRef<Map<string, number>>(new Map())
+	const translateFinalSourceRequestSequenceByItemIdRef = useRef<Map<string, number>>(new Map())
 	const translateLastDraftSourceTextByItemIdRef = useRef<Map<string, string>>(new Map())
 	const translateDraftScheduleTimerByItemIdRef = useRef<Map<string, number>>(new Map())
 	const translateFinalScheduleTimerByItemIdRef = useRef<Map<string, number>>(new Map())
@@ -512,6 +600,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 	const previousChatEventFingerprintByIdRef = useRef<Map<string, string>>(new Map())
 	const previousSubtitleFingerprintRef = useRef('')
 	const previousTranslateCardFingerprintByIdRef = useRef<Map<string, string>>(new Map())
+	const recentFinalizedTranslateUtteranceRef = useRef<null | RecentFinalizedTranslateUtterance>(null)
 	const hasSeenConnectedStateByModeRef = useRef<Record<LilacMode, boolean>>({
 		chat: false,
 		translate: false
@@ -554,6 +643,14 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		translateFinalScheduleTimerByItemIdRef.current.clear()
 	}, [])
 
+	const clearStoredSubtitleAudioForUtterance = useCallback((utteranceId: string): void => {
+		const utterance = translateRuntimeStateRef.current.utteranceById[utteranceId]
+		if (!utterance) return
+		for (const segmentId of utterance.orderedSegmentIds) {
+			subtitleSegmentAudioByItemIdRef.current.delete(segmentId)
+		}
+	}, [])
+
 	const syncTranslateRuntimeState = useCallback((nextState: TranslateRuntimeState): void => {
 		translateRuntimeStateRef.current = nextState
 		setTranslateCards(selectTranslateCards(nextState))
@@ -566,6 +663,25 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		setLiveSubtitleState(nextLiveSubtitleState)
 	}, [])
 
+	const clearTranslateUtteranceArtifacts = useCallback(
+		(utteranceId: string): void => {
+			const utterance = translateRuntimeStateRef.current.utteranceById[utteranceId]
+			if (!utterance) return
+			clearTranslateDraftTimerByItemId(utteranceId)
+			clearTranslateFinalTimerByItemId(utteranceId)
+			for (const segmentId of utterance.orderedSegmentIds) {
+				subtitleSegmentAudioByItemIdRef.current.delete(segmentId)
+				subtitleRawSegmentTextByItemIdRef.current.delete(segmentId)
+			}
+			translateDraftSequenceByItemIdRef.current.delete(utteranceId)
+			translateFinalSourceRequestSequenceByItemIdRef.current.delete(utteranceId)
+			translateLastDraftSourceTextByItemIdRef.current.delete(utteranceId)
+			const nextState = clearTranslateUtterance(translateRuntimeStateRef.current, utteranceId)
+			syncTranslateRuntimeState(nextState)
+		},
+		[clearTranslateDraftTimerByItemId, clearTranslateFinalTimerByItemId, syncTranslateRuntimeState]
+	)
+
 	const stopChatClient = useCallback(() => {
 		intentionalStopByChannelRef.current.chat = true
 		chatClientRef.current?.stop()
@@ -591,10 +707,13 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		void subtitleClientRef.current?.stop()
 		subtitleClientRef.current = null
 		clearAllTranslateStreamingTimers()
+		subtitleSegmentAudioByItemIdRef.current.clear()
 		subtitleRawSegmentTextByItemIdRef.current.clear()
 		translateRuntimeStateRef.current = createTranslateRuntimeState()
 		translateDraftSequenceByItemIdRef.current.clear()
+		translateFinalSourceRequestSequenceByItemIdRef.current.clear()
 		translateLastDraftSourceTextByItemIdRef.current.clear()
+		recentFinalizedTranslateUtteranceRef.current = null
 		setSubtitleChannelState('disconnected')
 		liveSubtitleStateRef.current = defaultLiveSubtitleState
 		setLiveSubtitleState(defaultLiveSubtitleState)
@@ -617,9 +736,12 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		setLiveSubtitleState(defaultLiveSubtitleState)
 		translateRuntimeStateRef.current = createTranslateRuntimeState()
 		subtitleDedupKeyTimestampByKeyRef.current.clear()
+		subtitleSegmentAudioByItemIdRef.current.clear()
 		subtitleRawSegmentTextByItemIdRef.current.clear()
 		translateDraftSequenceByItemIdRef.current.clear()
+		translateFinalSourceRequestSequenceByItemIdRef.current.clear()
 		translateLastDraftSourceTextByItemIdRef.current.clear()
+		recentFinalizedTranslateUtteranceRef.current = null
 		chatTranscriptSequenceRef.current = 1
 		clearAllTranslateStreamingTimers()
 		pendingTranslateInputQueueRef.current = []
@@ -729,29 +851,122 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			const delayMilliseconds = finalTranslateSilenceDelayMilliseconds + lowConfidenceDelayMilliseconds
 			const timerId = window.setTimeout(() => {
 				translateFinalScheduleTimerByItemIdRef.current.delete(itemId)
-				const latestSourceText = normalizeWhitespace(
-					getTranslateCommittedSourceText(translateRuntimeStateRef.current, itemId)
-				)
-				if (!latestSourceText) return
-				enqueueTranslateInput({
-					inputOrigin,
-					itemId,
-					requestKind: 'final',
-					text: latestSourceText
-				})
+				void (async () => {
+					let latestSourceText = normalizeWhitespace(
+						getTranslateCommittedSourceText(translateRuntimeStateRef.current, itemId)
+					)
+					if (!latestSourceText) return
+
+					if (inputOrigin === 'audio') {
+						const utterance = translateRuntimeStateRef.current.utteranceById[itemId]
+						const audioChunkList =
+							utterance?.orderedSegmentIds
+								.map(segmentId => subtitleSegmentAudioByItemIdRef.current.get(segmentId))
+								.filter((value): value is Int16Array => value instanceof Int16Array) ?? []
+						if (utterance && audioChunkList.length > 0) {
+							const requestSequence =
+								(translateFinalSourceRequestSequenceByItemIdRef.current.get(itemId) ?? 0) + 1
+							translateFinalSourceRequestSequenceByItemIdRef.current.set(itemId, requestSequence)
+							try {
+								const retranscription = await retranscribeTranslateAudioAction({
+									audioPcm16Base64: int16ArrayToBase64(concatInt16ArrayList(audioChunkList)),
+									languageCode: utterance.sourceLanguageCode || translateSettingsRef.current.myLanguageCode
+								})
+								if (
+									translateFinalSourceRequestSequenceByItemIdRef.current.get(itemId) !== requestSequence
+								) {
+									return
+								}
+								const canonicalSourceText = sanitizeSubtitleText(retranscription.transcript)
+								if (!canonicalSourceText) {
+									throw new Error('Final retranscription returned empty text.')
+								}
+								if (canonicalSourceText !== latestSourceText) {
+									const nextState = applyCanonicalTranslateSourceText(translateRuntimeStateRef.current, {
+										sourceText: canonicalSourceText,
+										utteranceId: itemId
+									})
+									syncTranslateRuntimeState(nextState)
+									latestSourceText = canonicalSourceText
+								}
+								const recentFinalizedUtterance = recentFinalizedTranslateUtteranceRef.current
+								if (
+									recentFinalizedUtterance &&
+									recentFinalizedUtterance.utteranceId !== itemId &&
+									Date.now() - recentFinalizedUtterance.createdAt <= 6_000 &&
+									isLikelyEchoUtterance(latestSourceText, recentFinalizedUtterance.sourceText)
+								) {
+									clearTranslateUtteranceArtifacts(itemId)
+									return
+								}
+							} catch (error) {
+								const currentUtterance = translateRuntimeStateRef.current.utteranceById[itemId]
+								if (!currentUtterance) return
+								const nextState = applyTranslateRuntimeResultPatch(
+									translateRuntimeStateRef.current,
+									{
+										direction: currentUtterance.direction,
+										inputOrigin,
+										itemId,
+										sourceLanguageCode:
+											currentUtterance.sourceLanguageCode || translateSettingsRef.current.myLanguageCode,
+										sourceText: latestSourceText,
+										status: 'error',
+										targetLanguageCode:
+											currentUtterance.targetLanguageCode ||
+											translateSettingsRef.current.translateToLanguageCode,
+										translatedText:
+											error instanceof Error ? error.message : 'Unable to finalize the transcript.'
+									},
+									translateSettingsRef.current,
+									Date.now()
+								)
+								syncTranslateRuntimeState(nextState)
+								return
+							}
+						}
+					}
+
+					enqueueTranslateInput({
+						inputOrigin,
+						itemId,
+						requestKind: 'final',
+						text: latestSourceText
+					})
+				})()
 			}, delayMilliseconds)
 			translateFinalScheduleTimerByItemIdRef.current.set(itemId, timerId)
 		},
-		[clearTranslateFinalTimerByItemId, enqueueTranslateInput]
+		[
+			clearTranslateFinalTimerByItemId,
+			clearTranslateUtteranceArtifacts,
+			enqueueTranslateInput,
+			syncTranslateRuntimeState
+		]
 	)
 
 	const handleTranslateSubtitleFinalPatch = useCallback(
 		(patch: SubtitleFinalPatch) => {
-			const normalizedText = sanitizeSubtitleText(patch.text)
 			subtitleRawSegmentTextByItemIdRef.current.delete(patch.itemId)
-			if (!normalizedText) return
+			if (patch.audioPcm16Data) {
+				subtitleSegmentAudioByItemIdRef.current.set(patch.itemId, patch.audioPcm16Data)
+			}
+			const normalizedText = sanitizeSubtitleText(patch.text)
+			if (!normalizedText) {
+				subtitleSegmentAudioByItemIdRef.current.delete(patch.itemId)
+				return
+			}
 
 			const now = Date.now()
+			const recentFinalizedUtterance = recentFinalizedTranslateUtteranceRef.current
+			if (
+				recentFinalizedUtterance &&
+				now - recentFinalizedUtterance.createdAt <= 2_500 &&
+				isLikelyEchoUtterance(normalizedText, recentFinalizedUtterance.sourceText)
+			) {
+				subtitleSegmentAudioByItemIdRef.current.delete(patch.itemId)
+				return
+			}
 			const roundedTimestamp =
 				Math.round(now / subtitleDedupRoundedTimeWindowMilliseconds) *
 				subtitleDedupRoundedTimeWindowMilliseconds
@@ -759,6 +974,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			const dedupeKey = `${canonicalText}::${roundedTimestamp}::${translateSettingsRef.current.myLanguageCode}`
 			const previousTimestamp = subtitleDedupKeyTimestampByKeyRef.current.get(dedupeKey)
 			if (typeof previousTimestamp === 'number' && now - previousTimestamp < 2500) {
+				subtitleSegmentAudioByItemIdRef.current.delete(patch.itemId)
 				return
 			}
 			subtitleDedupKeyTimestampByKeyRef.current.set(dedupeKey, now)
@@ -858,13 +1074,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				}
 			},
 			onDraftDeltaPatch: patch => {
-				const nextState = applyTranslateRuntimeDraftPatch(
-					translateRuntimeStateRef.current,
-					patch,
-					translateSettingsRef.current,
-					Date.now()
-				)
-				syncTranslateRuntimeState(nextState)
+				void patch
 			},
 			onDraftDonePatch: patch => {
 				const nextState = applyTranslateRuntimeDraftPatch(
@@ -885,7 +1095,9 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 			onResultPatch: patch => {
 				clearTranslateDraftTimerByItemId(patch.itemId)
 				clearTranslateFinalTimerByItemId(patch.itemId)
+				clearStoredSubtitleAudioForUtterance(patch.itemId)
 				translateDraftSequenceByItemIdRef.current.delete(patch.itemId)
+				translateFinalSourceRequestSequenceByItemIdRef.current.delete(patch.itemId)
 				translateLastDraftSourceTextByItemIdRef.current.delete(patch.itemId)
 				const nextState = applyTranslateRuntimeResultPatch(
 					translateRuntimeStateRef.current,
@@ -894,6 +1106,16 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 					Date.now()
 				)
 				syncTranslateRuntimeState(nextState)
+				if (patch.status === 'final') {
+					const normalizedSourceText = normalizeWhitespace(patch.sourceText)
+					if (normalizedSourceText) {
+						recentFinalizedTranslateUtteranceRef.current = {
+							createdAt: Date.now(),
+							sourceText: normalizedSourceText,
+							utteranceId: patch.itemId
+						}
+					}
+				}
 			}
 		})
 		liveTranslateClientRef.current = translateClient
@@ -904,6 +1126,7 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		})
 	}, [
 		clearReconnectTimer,
+		clearStoredSubtitleAudioForUtterance,
 		clearTranslateDraftTimerByItemId,
 		clearTranslateFinalTimerByItemId,
 		flushPendingTranslateInputs,
@@ -955,13 +1178,57 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 				if (!sanitizedSegmentText) {
 					return
 				}
+				const now = Date.now()
+				const existingSegment = translateRuntimeStateRef.current.segmentById[patch.itemId]
+				const mostRecentUtteranceId =
+					translateRuntimeStateRef.current.orderedUtteranceIds[
+						translateRuntimeStateRef.current.orderedUtteranceIds.length - 1
+					] ?? null
+				const mostRecentUtteranceSourceText =
+					(mostRecentUtteranceId
+						? translateRuntimeStateRef.current.utteranceById[mostRecentUtteranceId]
+								?.sourceCommittedText ||
+							translateRuntimeStateRef.current.utteranceById[mostRecentUtteranceId]?.sourceLiveText
+						: '') ?? ''
+				if (
+					!existingSegment &&
+					shouldSuppressPostFinalDelta({
+						now,
+						previousSourceText: mostRecentUtteranceSourceText,
+						recentFinalizedUtterance: recentFinalizedTranslateUtteranceRef.current,
+						text: sanitizedSegmentText
+					})
+				) {
+					return
+				}
 				const nextState = applySubtitleSegmentDelta(translateRuntimeStateRef.current, {
 					itemId: patch.itemId,
-					now: Date.now(),
+					now,
 					previousItemId: patch.previousItemId ?? null,
 					settings: translateSettingsRef.current,
 					text: sanitizedSegmentText
 				})
+				const nextUtteranceId = nextState.segmentById[patch.itemId]?.utteranceId
+				const nextUtterance = nextUtteranceId ? nextState.utteranceById[nextUtteranceId] : null
+				const previousUtterance = nextUtterance?.previousUtteranceId
+					? nextState.utteranceById[nextUtterance.previousUtteranceId]
+					: null
+				const shouldDropEchoUtterance =
+					nextUtteranceId &&
+					nextUtterance &&
+					previousUtterance &&
+					shouldSuppressPostFinalDelta({
+						now,
+						previousSourceText: previousUtterance.sourceCommittedText || previousUtterance.sourceLiveText,
+						recentFinalizedUtterance: recentFinalizedTranslateUtteranceRef.current,
+						text: nextUtterance.sourceCommittedText || nextUtterance.sourceLiveText
+					})
+				if (shouldDropEchoUtterance) {
+					subtitleRawSegmentTextByItemIdRef.current.delete(patch.itemId)
+					subtitleSegmentAudioByItemIdRef.current.delete(patch.itemId)
+					syncTranslateRuntimeState(clearTranslateUtterance(nextState, nextUtteranceId))
+					return
+				}
 				liveSubtitleStateRef.current = {
 					...liveSubtitleStateRef.current,
 					isListening: true
@@ -1101,10 +1368,13 @@ export function LilacModeRuntimeProvider({ children }: { children: ReactNode })
 		(nextSettings: TranslateSettings) => {
 			const sanitizedSettings = sanitizeTranslateSettings(nextSettings)
 			clearAllTranslateStreamingTimers()
+			subtitleSegmentAudioByItemIdRef.current.clear()
 			subtitleRawSegmentTextByItemIdRef.current.clear()
 			translateRuntimeStateRef.current = createTranslateRuntimeState()
 			translateDraftSequenceByItemIdRef.current.clear()
+			translateFinalSourceRequestSequenceByItemIdRef.current.clear()
 			translateLastDraftSourceTextByItemIdRef.current.clear()
+			recentFinalizedTranslateUtteranceRef.current = null
 			pendingTranslateInputQueueRef.current = []
 			setTranslateSettingsState(sanitizedSettings)
 			setTranslateCards([])
diff --git a/src/realtime/modelConfig.ts b/src/realtime/modelConfig.ts
index a0084e6..94d21e8 100644
--- a/src/realtime/modelConfig.ts
+++ b/src/realtime/modelConfig.ts
@@ -15,7 +15,7 @@ export const TranslationModelSchema = z.enum(translationModelValues)
 export const TranscriptionAsrProfileSchema = z.enum(transcriptionAsrProfileValues)
 
 export const defaultChatRealtimeModel = 'gpt-realtime-1.5'
-export const defaultTranscriptionModel = 'gpt-4o-transcribe'
+export const defaultTranscriptionModel = 'gpt-4o-mini-transcribe'
 export const latestTranscriptionModel = 'gpt-4o-transcribe-latest'
 export const fastTranscriptionModel = 'gpt-4o-mini-transcribe'
 export const defaultTranscriptionAsrProfile = 'accurate'
diff --git a/src/realtime/schemas.ts b/src/realtime/schemas.ts
index 56bbf07..f9b956f 100644
--- a/src/realtime/schemas.ts
+++ b/src/realtime/schemas.ts
@@ -70,6 +70,15 @@ export const CreateRealtimeTranscriptionSessionActionOutputSchema = z.object({
 	value: z.string().min(1)
 })
 
+export const RetranscribeTranslateAudioActionInputSchema = z.object({
+	audioPcm16Base64: z.string().min(1),
+	languageCode: LanguageCodeSchema
+})
+
+export const RetranscribeTranslateAudioActionOutputSchema = z.object({
+	text: z.string().min(1)
+})
+
 export const PublishTranslationToolArgumentsSchema = z.object({
 	direction: z.enum(['my_to_target', 'target_to_my']),
 	sourceLanguageCode: LanguageCodeSchema,
diff --git a/src/realtime/subtitleTranscriptionClient.ts b/src/realtime/subtitleTranscriptionClient.ts
index da2267f..48c0363 100644
--- a/src/realtime/subtitleTranscriptionClient.ts
+++ b/src/realtime/subtitleTranscriptionClient.ts
@@ -1,6 +1,7 @@
 'use client'
 
 import { createRealtimeTranscriptionSessionAction } from '@/app/actions/realtime'
+import { resolveRealtimeTranscriptionLanguageCode } from '@/realtime/languageCatalog'
 import { resolveTranscriptionModelFromEnvironment } from '@/realtime/modelConfig'
 import {
 	InputAudioBufferCommittedEventSchema,
@@ -30,6 +31,7 @@ export type SubtitleDeltaPatch = {
 }
 
 export type SubtitleFinalPatch = {
+	audioPcm16Data?: Int16Array
 	committedAt: number
 	confidence?: number
 	itemId: string
@@ -58,10 +60,78 @@ function parsePositiveIntegerEnvironmentValue(
 	return Math.max(bounds.minimum, Math.min(bounds.maximum, parsedValue))
 }
 
-function createTranscriptionSessionPatch(): Record<string, unknown> {
+function parsePositiveFloatEnvironmentValue(
+	name: string,
+	fallbackValue: number,
+	bounds: { maximum: number; minimum: number }
+): number {
+	const rawValue = process.env[name]
+	if (!rawValue) return fallbackValue
+	const parsedValue = Number.parseFloat(rawValue)
+	if (!Number.isFinite(parsedValue)) return fallbackValue
+	return Math.max(bounds.minimum, Math.min(bounds.maximum, parsedValue))
+}
+
+function normalizeWhitespace(value: string): string {
+	return value.replace(/\s+/g, ' ').trim()
+}
+
+function isAsciiDigitCharacter(value: string): boolean {
+	return value >= '0' && value <= '9'
+}
+
+function isUnicodeLetterCharacter(value: string): boolean {
+	return value.toLowerCase() !== value.toUpperCase()
+}
+
+function countTranscriptSignalCharacters(value: string): number {
+	let signalCharacterCount = 0
+	for (const character of value) {
+		if (isAsciiDigitCharacter(character) || isUnicodeLetterCharacter(character)) {
+			signalCharacterCount += 1
+		}
+	}
+	return signalCharacterCount
+}
+
+function countTranscriptWordList(value: string): number {
+	const normalizedValue = normalizeWhitespace(value)
+	if (!normalizedValue) return 0
+	return normalizedValue.split(' ').filter(Boolean).length
+}
+
+function shouldDropLowSignalTranscript(input: {
+	audioDurationMilliseconds: undefined | number
+	confidence: undefined | number
+	transcript: string
+}): boolean {
+	const normalizedTranscript = normalizeWhitespace(input.transcript)
+	if (!normalizedTranscript) return true
+	const signalCharacterCount = countTranscriptSignalCharacters(normalizedTranscript)
+	const wordCount = countTranscriptWordList(normalizedTranscript)
+	const audioDurationMilliseconds = input.audioDurationMilliseconds ?? Number.POSITIVE_INFINITY
+	const confidence = input.confidence ?? 1
+	if (signalCharacterCount <= 1 && audioDurationMilliseconds < 700) return true
+	if (wordCount <= 1 && audioDurationMilliseconds < 260) return true
+	if (
+		wordCount <= 1 &&
+		signalCharacterCount < 3 &&
+		audioDurationMilliseconds < 420 &&
+		confidence < 0.72
+	) {
+		return true
+	}
+	if (signalCharacterCount < 3 && audioDurationMilliseconds < 700 && confidence < 0.6) return true
+	return false
+}
+
+function createTranscriptionSessionPatch(input: {
+	settings: SubtitleTranscriptionSettings
+}): Record<string, unknown> {
 	const transcriptionModel = resolveTranscriptionModelFromEnvironment(
 		resolveAsrProfileFromEnvironment()
 	)
+	const languageCode = resolveRealtimeTranscriptionLanguageCode(input.settings.myLanguageCode)
 	return {
 		include: ['item.input_audio_transcription.logprobs'],
 		input_audio_format: 'pcm16',
@@ -69,7 +139,8 @@ function createTranscriptionSessionPatch(): Record<string, unknown> {
 			type: 'near_field'
 		},
 		input_audio_transcription: {
-			model: transcriptionModel
+			model: transcriptionModel,
+			...(languageCode ? { language: languageCode } : {})
 		},
 		turn_detection: null
 	}
@@ -145,6 +216,17 @@ function int16ArrayToBase64(inputArray: Int16Array): string {
 	return btoa(binaryString)
 }
 
+function concatInt16ArrayList(inputList: Int16Array[]): Int16Array {
+	const totalLength = inputList.reduce((sum, inputArray) => sum + inputArray.length, 0)
+	const outputArray = new Int16Array(totalLength)
+	let outputOffset = 0
+	for (const inputArray of inputList) {
+		outputArray.set(inputArray, outputOffset)
+		outputOffset += inputArray.length
+	}
+	return outputArray
+}
+
 function resolveAsrProfileFromEnvironment(): 'accurate' | 'fast' {
 	return process.env.NEXT_PUBLIC_LILAC_TRANSCRIBE_ASR_PROFILE === 'fast' ? 'fast' : 'accurate'
 }
@@ -189,7 +271,11 @@ const minimumCommitAudioDurationMilliseconds = parsePositiveIntegerEnvironmentVa
 )
 const minimumForcedCommitAudioDurationMilliseconds = 140
 const speechDetectionHangoverMilliseconds = 220
-const speechDetectionRootMeanSquareThreshold = 0.008
+const speechDetectionRootMeanSquareThreshold = parsePositiveFloatEnvironmentValue(
+	'NEXT_PUBLIC_LILAC_TRANSLATE_SPEECH_RMS_THRESHOLD',
+	0.012,
+	{ maximum: 0.08, minimum: 0.004 }
+)
 const transcriptionSampleRateHertz = 24_000
 const shouldEmitVerboseRealtimeLogs = process.env.NEXT_PUBLIC_LILAC_VERBOSE_LOGS === 'true'
 
@@ -220,7 +306,9 @@ function emitSubtitleClientLog(
 export class SubtitleTranscriptionClient {
 	private audioContext: AudioContext | null = null
 	private callbacks: SubtitleTranscriptionClientCallbacks
+	private committedAudioPcm16ByItemId = new Map<string, Int16Array>()
 	private commitTimerId: null | number = null
+	private committedAudioDurationMillisecondsByItemId = new Map<string, number>()
 	private committedAtByItemId = new Map<string, number>()
 	private generation = 0
 	private lastCompletedConfidence: number | null = null
@@ -228,11 +316,15 @@ export class SubtitleTranscriptionClient {
 	private micProcessorNode: ScriptProcessorNode | null = null
 	private micSourceNode: MediaStreamAudioSourceNode | null = null
 	private pendingAudioDurationMilliseconds = 0
+	private pendingAudioPcm16ChunkList: Int16Array[] = []
+	private pendingCommitAudioPcm16Queue: Int16Array[] = []
+	private pendingCommitAudioDurationMillisecondsQueue: number[] = []
 	private pendingSpeechHangoverMilliseconds = 0
 	private previousItemIdByItemId = new Map<string, null | string>()
 	private segmentSequence = 0
 	private silentGainNode: GainNode | null = null
 	private state: SubtitleTranscriptionClientState = 'disconnected'
+	private subtitleSettings: null | SubtitleTranscriptionSettings = null
 	private voiceInputEnabled = true
 	private websocket: WebSocket | null = null
 
@@ -244,6 +336,10 @@ export class SubtitleTranscriptionClient {
 		this.stop()
 		this.generation += 1
 		const generation = this.generation
+		this.subtitleSettings = {
+			myLanguageCode: input.myLanguageCode,
+			translateToLanguageCode: input.translateToLanguageCode
+		}
 		this.voiceInputEnabled = input.voiceInputEnabled
 		this.setState('connecting')
 
@@ -266,10 +362,7 @@ export class SubtitleTranscriptionClient {
 				if (generation !== this.generation) return
 				this.setState('connected')
 				emitSubtitleClientLog('info', 'socket_open', { generation })
-				this.sendEvent({
-					session: createTranscriptionSessionPatch(),
-					type: 'transcription_session.update'
-				})
+				this.sendTranscriptionSessionUpdate()
 				if (this.voiceInputEnabled) {
 					void this.enableVoiceInput(generation)
 				}
@@ -309,10 +402,16 @@ export class SubtitleTranscriptionClient {
 	public stop(): void {
 		this.generation += 1
 		this.stopVoiceInput()
+		this.committedAudioPcm16ByItemId.clear()
+		this.committedAudioDurationMillisecondsByItemId.clear()
 		this.committedAtByItemId.clear()
 		this.lastCompletedConfidence = null
+		this.pendingAudioPcm16ChunkList = []
+		this.pendingCommitAudioPcm16Queue = []
+		this.pendingCommitAudioDurationMillisecondsQueue = []
 		this.previousItemIdByItemId.clear()
 		this.segmentSequence = 0
+		this.subtitleSettings = null
 
 		try {
 			this.websocket?.close()
@@ -341,11 +440,12 @@ export class SubtitleTranscriptionClient {
 	}
 
 	public updateSubtitleSettings(settings: SubtitleTranscriptionSettings): void {
-		void settings
-		this.sendEvent({
-			session: createTranscriptionSessionPatch(),
-			type: 'transcription_session.update'
-		})
+		const didLanguageChange =
+			this.subtitleSettings?.myLanguageCode !== settings.myLanguageCode ||
+			this.subtitleSettings?.translateToLanguageCode !== settings.translateToLanguageCode
+		this.subtitleSettings = settings
+		if (didLanguageChange) this.lastCompletedConfidence = null
+		this.sendTranscriptionSessionUpdate()
 	}
 
 	private setState(state: SubtitleTranscriptionClientState): void {
@@ -370,18 +470,25 @@ export class SubtitleTranscriptionClient {
 			this.pendingAudioDurationMilliseconds < minimumForcedCommitAudioDurationMilliseconds
 		) {
 			this.pendingAudioDurationMilliseconds = 0
+			this.pendingAudioPcm16ChunkList = []
 			return
 		}
 		if (this.pendingAudioDurationMilliseconds <= 0) return
-		this.sendEvent({
+		const pendingAudioDurationMilliseconds = Math.round(this.pendingAudioDurationMilliseconds)
+		const pendingAudioPcm16Data = concatInt16ArrayList(this.pendingAudioPcm16ChunkList)
+		const didSendCommit = this.sendEvent({
 			type: 'input_audio_buffer.commit'
 		})
+		if (!didSendCommit) return
+		this.pendingCommitAudioPcm16Queue.push(pendingAudioPcm16Data)
+		this.pendingCommitAudioDurationMillisecondsQueue.push(pendingAudioDurationMilliseconds)
 		emitSubtitleClientLog('info', 'manual_commit', {
-			audioDurationMilliseconds: Math.round(this.pendingAudioDurationMilliseconds),
+			audioDurationMilliseconds: pendingAudioDurationMilliseconds,
 			effectiveMinimumCommitAudioDurationMilliseconds,
 			forceCommit
 		})
 		this.pendingAudioDurationMilliseconds = 0
+		this.pendingAudioPcm16ChunkList = []
 	}
 
 	private startManualCommitLoop(): void {
@@ -439,13 +546,15 @@ export class SubtitleTranscriptionClient {
 				)
 			}
 			if (!hasSpeechActivity && this.pendingSpeechHangoverMilliseconds <= 0) return
-			this.pendingAudioDurationMilliseconds += chunkDurationMilliseconds
 			const audioBase64 = int16ArrayToBase64(pcm16Buffer)
 			if (!audioBase64) return
-			this.sendEvent({
+			const didSendAudioChunk = this.sendEvent({
 				audio: audioBase64,
 				type: 'input_audio_buffer.append'
 			})
+			if (!didSendAudioChunk) return
+			this.pendingAudioDurationMilliseconds += chunkDurationMilliseconds
+			this.pendingAudioPcm16ChunkList.push(pcm16Buffer)
 		}
 
 		this.micSourceNode.connect(this.micProcessorNode)
@@ -483,6 +592,8 @@ export class SubtitleTranscriptionClient {
 		}
 		this.localAudioStream = null
 		this.pendingAudioDurationMilliseconds = 0
+		this.pendingAudioPcm16ChunkList = []
+		this.pendingCommitAudioPcm16Queue = []
 		this.pendingSpeechHangoverMilliseconds = 0
 	}
 
@@ -490,6 +601,18 @@ export class SubtitleTranscriptionClient {
 		const event = InputAudioBufferCommittedEventSchema.parse(candidate)
 		this.previousItemIdByItemId.set(event.item_id, event.previous_item_id ?? null)
 		this.committedAtByItemId.set(event.item_id, Date.now())
+		const committedAudioDurationMilliseconds =
+			this.pendingCommitAudioDurationMillisecondsQueue.shift() ?? undefined
+		if (typeof committedAudioDurationMilliseconds === 'number') {
+			this.committedAudioDurationMillisecondsByItemId.set(
+				event.item_id,
+				committedAudioDurationMilliseconds
+			)
+		}
+		const committedAudioPcm16Data = this.pendingCommitAudioPcm16Queue.shift()
+		if (committedAudioPcm16Data && committedAudioPcm16Data.length > 0) {
+			this.committedAudioPcm16ByItemId.set(event.item_id, committedAudioPcm16Data)
+		}
 	}
 
 	private handleInputAudioTranscriptionDeltaEvent(candidate: unknown): void {
@@ -504,12 +627,34 @@ export class SubtitleTranscriptionClient {
 
 	private handleInputAudioTranscriptionCompletedEvent(candidate: unknown): void {
 		const event = InputAudioTranscriptionCompletedEventSchema.parse(candidate)
-		const transcript = event.transcript.trim()
+		const transcript = normalizeWhitespace(event.transcript)
 		if (!transcript) return
-		this.segmentSequence += 1
 		const confidence = computeConfidenceFromLogprobs(event.logprobs)
+		const audioDurationMilliseconds = this.committedAudioDurationMillisecondsByItemId.get(
+			event.item_id
+		)
+		this.committedAudioDurationMillisecondsByItemId.delete(event.item_id)
+		const audioPcm16Data = this.committedAudioPcm16ByItemId.get(event.item_id)
+		this.committedAudioPcm16ByItemId.delete(event.item_id)
+		if (
+			shouldDropLowSignalTranscript({
+				audioDurationMilliseconds,
+				confidence,
+				transcript
+			})
+		) {
+			emitSubtitleClientLog('info', 'drop_low_signal_transcript', {
+				audioDurationMilliseconds,
+				confidence,
+				itemId: event.item_id,
+				transcript
+			})
+			return
+		}
+		this.segmentSequence += 1
 		this.lastCompletedConfidence = typeof confidence === 'number' ? confidence : null
 		this.callbacks.onSubtitleFinal({
+			...(audioPcm16Data ? { audioPcm16Data } : {}),
 			committedAt: this.committedAtByItemId.get(event.item_id) ?? Date.now(),
 			itemId: event.item_id,
 			previousItemId: this.previousItemIdByItemId.get(event.item_id) ?? null,
@@ -519,6 +664,16 @@ export class SubtitleTranscriptionClient {
 		})
 	}
 
+	private sendTranscriptionSessionUpdate(): void {
+		if (!this.subtitleSettings) return
+		this.sendEvent({
+			session: createTranscriptionSessionPatch({
+				settings: this.subtitleSettings
+			}),
+			type: 'transcription_session.update'
+		})
+	}
+
 	private handleServerEvent(rawData: unknown): void {
 		try {
 			const candidate = typeof rawData === 'string' ? JSON.parse(rawData) : rawData
@@ -563,11 +718,13 @@ export class SubtitleTranscriptionClient {
 		}
 	}
 
-	private sendEvent(event: Record<string, unknown>): void {
-		if (!this.websocket) return
-		if (this.websocket.readyState !== WebSocket.OPEN) return
+	private sendEvent(event: Record<string, unknown>): boolean {
+		if (!this.websocket) return false
+		if (this.websocket.readyState !== WebSocket.OPEN) return false
 		try {
 			this.websocket.send(JSON.stringify(event))
+			return true
 		} catch {}
+		return false
 	}
 }
diff --git a/src/realtime/translateRuntimeState.ts b/src/realtime/translateRuntimeState.ts
index 8e7378d..2828aa2 100644
--- a/src/realtime/translateRuntimeState.ts
+++ b/src/realtime/translateRuntimeState.ts
@@ -21,7 +21,7 @@ type ResolveAudioUtteranceResult = {
 	utteranceId: string
 }
 
-const audioUtteranceReuseThresholdMilliseconds = 1200
+const audioUtteranceReuseThresholdMilliseconds = 2200
 
 export function createTranslateRuntimeState(): TranslateRuntimeState {
 	return {
@@ -521,6 +521,30 @@ export function getTranslateCommittedSourceText(
 	return state.utteranceById[utteranceId]?.sourceCommittedText ?? ''
 }
 
+export function applyCanonicalTranslateSourceText(
+	state: TranslateRuntimeState,
+	input: {
+		sourceText: string
+		utteranceId: string
+	}
+): TranslateRuntimeState {
+	const utterance = state.utteranceById[input.utteranceId]
+	if (!utterance) return state
+	const normalizedSourceText = normalizeWhitespace(input.sourceText)
+	if (!normalizedSourceText) return state
+	return {
+		...state,
+		utteranceById: {
+			...state.utteranceById,
+			[input.utteranceId]: {
+				...utterance,
+				sourceCommittedText: normalizedSourceText,
+				sourceLiveText: normalizedSourceText
+			}
+		}
+	}
+}
+
 export function getTranslateLatestConfidence(
 	state: TranslateRuntimeState,
 	utteranceId: string

From 216949d8d1b3c96087b4d64bb3239b3e69689295 Mon Sep 17 00:00:00 2001
From: DexterStorey <dexter@dexterstorey.com>
Date: Fri, 6 Mar 2026 14:18:35 -0500
Subject: [PATCH 24/24] Hide short echo previews in translate cards

---
 src/realtime/translateRuntimeState.ts | 109 +++++++++++++++++---------
 1 file changed, 74 insertions(+), 35 deletions(-)

diff --git a/src/realtime/translateRuntimeState.ts b/src/realtime/translateRuntimeState.ts
index 2828aa2..a718f40 100644
--- a/src/realtime/translateRuntimeState.ts
+++ b/src/realtime/translateRuntimeState.ts
@@ -6,6 +6,7 @@ import type {
 	LiveSubtitleState,
 	TranslateRuntimeState,
 	TranslateSettings,
+	TranslateUtterancePhase,
 	TranslateUtteranceState,
 	UtteranceCard
 } from '@/realtime/sessionTypes'
@@ -80,6 +81,25 @@ function isEquivalentTranscriptionChunk(leftValue: string, rightValue: string):
 	return false
 }
 
+function shouldHideShortEchoPreview(input: {
+	candidateCreatedAt: number
+	candidatePhase: TranslateUtterancePhase
+	candidateSourceText: string
+	inputOrigin: 'audio' | 'text'
+	previousCreatedAt: number
+	previousPhase: TranslateUtterancePhase
+}): boolean {
+	if (input.inputOrigin !== 'audio') return false
+	if (input.candidatePhase === 'final' || input.candidatePhase === 'error') return false
+	if (input.previousPhase !== 'final') return false
+	if (input.candidateCreatedAt - input.previousCreatedAt > 3_000) return false
+	const normalizedCandidateSourceText = normalizeWhitespace(input.candidateSourceText)
+	if (!normalizedCandidateSourceText) return true
+	const signalCharacterCount = canonicalizeTranscriptionText(normalizedCandidateSourceText).length
+	const wordCount = normalizedCandidateSourceText.split(' ').filter(Boolean).length
+	return signalCharacterCount <= 14 || wordCount <= 3
+}
+
 function findWordOverlapLength(existingText: string, nextText: string): number {
 	const existingWordList = existingText.split(' ')
 	const nextWordList = nextText.split(' ')
@@ -579,42 +599,61 @@ export function clearTranslateUtterance(
 }
 
 export function selectTranslateCards(state: TranslateRuntimeState): UtteranceCard[] {
-	return state.orderedUtteranceIds
-		.map(utteranceId => state.utteranceById[utteranceId])
-		.filter((utterance): utterance is TranslateUtteranceState => !!utterance)
-		.map(utterance => {
-			const translatedText =
-				utterance.finalTranslatedText || utterance.draftTranslatedText || utterance.errorMessage || ''
-			const status =
-				utterance.phase === 'final'
-					? 'final'
-					: utterance.phase === 'error'
-						? 'error'
-						: utterance.phase === 'draft'
-							? 'draft'
-							: 'streaming'
-			return {
-				createdAt: utterance.createdAt,
-				direction: utterance.direction,
-				draftSequence: utterance.draftSequence,
-				...(utterance.draftTranslatedText
-					? { draftTranslatedText: utterance.draftTranslatedText }
-					: {}),
-				...(utterance.errorMessage ? { errorMessage: utterance.errorMessage } : {}),
-				id: utterance.utteranceId,
+	const visibleCardList: UtteranceCard[] = []
+	let previousUtterance: null | TranslateUtteranceState = null
+
+	for (const utteranceId of state.orderedUtteranceIds) {
+		const utterance = state.utteranceById[utteranceId]
+		if (!utterance) continue
+		const sourceText = utterance.sourceCommittedText || utterance.sourceLiveText
+		if (
+			previousUtterance &&
+			shouldHideShortEchoPreview({
+				candidateCreatedAt: utterance.createdAt,
+				candidatePhase: utterance.phase,
+				candidateSourceText: sourceText,
 				inputOrigin: utterance.inputOrigin,
-				...(utterance.lastDraftAt ? { lastDraftAt: utterance.lastDraftAt } : {}),
-				renderState: utterance.phase,
-				...(utterance.responseId ? { responseId: utterance.responseId } : {}),
-				sourceItemId: utterance.utteranceId,
-				sourceLanguageCode: utterance.sourceLanguageCode,
-				sourceText: utterance.sourceCommittedText || utterance.sourceLiveText,
-				status,
-				targetLanguageCode: utterance.targetLanguageCode,
-				translatedText,
-				utteranceSequence: utterance.utteranceSequence
-			} satisfies UtteranceCard
-		})
+				previousCreatedAt: previousUtterance.createdAt,
+				previousPhase: previousUtterance.phase
+			})
+		) {
+			continue
+		}
+
+		const translatedText =
+			utterance.finalTranslatedText || utterance.draftTranslatedText || utterance.errorMessage || ''
+		const status =
+			utterance.phase === 'final'
+				? 'final'
+				: utterance.phase === 'error'
+					? 'error'
+					: utterance.phase === 'draft'
+						? 'draft'
+						: 'streaming'
+		const card = {
+			createdAt: utterance.createdAt,
+			direction: utterance.direction,
+			draftSequence: utterance.draftSequence,
+			...(utterance.draftTranslatedText ? { draftTranslatedText: utterance.draftTranslatedText } : {}),
+			...(utterance.errorMessage ? { errorMessage: utterance.errorMessage } : {}),
+			id: utterance.utteranceId,
+			inputOrigin: utterance.inputOrigin,
+			...(utterance.lastDraftAt ? { lastDraftAt: utterance.lastDraftAt } : {}),
+			renderState: utterance.phase,
+			...(utterance.responseId ? { responseId: utterance.responseId } : {}),
+			sourceItemId: utterance.utteranceId,
+			sourceLanguageCode: utterance.sourceLanguageCode,
+			sourceText,
+			status,
+			targetLanguageCode: utterance.targetLanguageCode,
+			translatedText,
+			utteranceSequence: utterance.utteranceSequence
+		} satisfies UtteranceCard
+		visibleCardList.push(card)
+		previousUtterance = utterance
+	}
+
+	return visibleCardList
 }
 
 export function selectLiveSubtitleState(