chore: update environment example and improve code formatting

- Updated the `.env.example` file to reflect the new default for `CLOUDFLARE_AI_TEXT_TO_SPEECH_MODEL`.
- Improved formatting in various files for better readability, including consistent line breaks and indentation in TypeScript and Markdown files.
- Adjusted error handling messages in the Vite configuration and other components for clarity.

Author: kentcdodds

.env.example

@@ -115,7 +115,7 @@ CLOUDFLARE_AI_CALL_KENT_METADATA_MODEL=MOCK_CLOUDFLARE_AI_CALL_KENT_METADATA_MOD
 
 # Feature: /calls/record (typed question -> AI TTS via Cloudflare Workers AI)
 # Mocked: yes (when MOCKS=true)
-# Optional (defaults to @cf/deepgram/aura-1)
+# Optional (defaults to @cf/deepgram/aura-2-en)
 CLOUDFLARE_AI_TEXT_TO_SPEECH_MODEL=MOCK_CLOUDFLARE_AI_TEXT_TO_SPEECH_MODEL
 
 # Feature: /search/admin (semantic search manifests + ignore list)

.github/workflows/deployment.yml

@@ -83,9 +83,8 @@ jobs:
     timeout-minutes: 15
     # Only run when we would actually deploy (keeps PRs fast).
     if:
-      ${{ github.ref == 'refs/heads/main' &&
-      github.event_name == 'push' && needs.changes.outputs.DEPLOYABLE == 'true'
-      }}
+      ${{ github.ref == 'refs/heads/main' && github.event_name == 'push' &&
+      needs.changes.outputs.DEPLOYABLE == 'true' }}
     runs-on: ubuntu-latest
     steps:
       - name: ⬇️ Checkout repo

.github/workflows/index-semantic-youtube.yml

@@ -54,4 +54,5 @@ jobs:
           # Optional: force-index specific videos. Can be set either as a
           # workflow_dispatch input or as a repository variable.
           YOUTUBE_VIDEO_IDS:
-            ${{ github.event_name == 'workflow_dispatch' && inputs.youtube_video_ids || vars.YOUTUBE_VIDEO_IDS }}
+            ${{ github.event_name == 'workflow_dispatch' &&
+            inputs.youtube_video_ids || vars.YOUTUBE_VIDEO_IDS }}

AGENTS.md

@@ -1,7 +1,7 @@
 # AGENTS.md
 
-This file is included in full context for every agent conversation. Keep it
-tiny and stable.
+This file is included in full context for every agent conversation. Keep it tiny
+and stable.
 
 ## Editing policy
 

app/components/app-hotkeys.tsx

@@ -62,16 +62,12 @@ function AppHotkeys() {
 		setDialogOpen(false)
 	}, [location.pathname])
 
-	useHotkey(
-		hk.HOTKEY_TOGGLE_HOTKEYS_DIALOG,
-		() => setDialogOpen((o) => !o),
-		{
-			ignoreInputs: true,
-			preventDefault: true,
-			requireReset: true,
-			stopPropagation: true,
-		},
-	)
+	useHotkey(hk.HOTKEY_TOGGLE_HOTKEYS_DIALOG, () => setDialogOpen((o) => !o), {
+		ignoreInputs: true,
+		preventDefault: true,
+		requireReset: true,
+		stopPropagation: true,
+	})
 
 	React.useEffect(() => {
 		const sequenceManager = getSequenceManager()
@@ -88,8 +84,13 @@ function AppHotkeys() {
 		document.addEventListener('keydown', resetSequencesIfTyping, true)
 		document.addEventListener('focusout', resetSequencesIfTyping, true)
 
-		const unregisterCallbacks = NAVIGATION_HOTKEY_ROUTES.map(({ sequence, path }) =>
-			sequenceManager.register([...sequence], () => navigateToPath(path), navSequenceOptions),
+		const unregisterCallbacks = NAVIGATION_HOTKEY_ROUTES.map(
+			({ sequence, path }) =>
+				sequenceManager.register(
+					[...sequence],
+					() => navigateToPath(path),
+					navSequenceOptions,
+				),
 		)
 
 		return () => {
@@ -109,4 +110,3 @@ function AppHotkeys() {
 }
 
 export { AppHotkeys }
-

app/components/arrow-button.tsx

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx'
 import { motion, useReducedMotion, type Variant } from 'framer-motion'
-import { Link, type LinkProps } from 'react-router';
+import { Link, type LinkProps } from 'react-router'
 import {
 	useElementState,
 	type ElementState,

app/components/article-card.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx'
-import { Link } from 'react-router';
+import { Link } from 'react-router'
 import { getImageBuilder, getImgProps } from '#app/images.tsx'
 import { type MdxListItem, type Team } from '#app/types.ts'
 import { getBannerAltProp, getBannerTitleProp } from '#app/utils/mdx.tsx'

app/components/calls/__tests__/submit-recording-form.test.tsx

@@ -46,7 +46,9 @@ describe('RecordingForm', () => {
 		const createObjectURL = vi
 			.spyOn(URL, 'createObjectURL')
 			.mockReturnValue('blob:recording')
-		const revokeObjectURL = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {})
+		const revokeObjectURL = vi
+			.spyOn(URL, 'revokeObjectURL')
+			.mockImplementation(() => {})
 		const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
 
 		try {
@@ -58,7 +60,9 @@ describe('RecordingForm', () => {
 				target: { value: 'A valid title' },
 			})
 
-			const submitButton = screen.getByRole('button', { name: 'Submit Recording' })
+			const submitButton = screen.getByRole('button', {
+				name: 'Submit Recording',
+			})
 			const form = container.querySelector('form')
 			expect(form).not.toBeNull()
 			fireEvent.submit(form as HTMLFormElement)
@@ -110,7 +114,9 @@ describe('RecordingForm', () => {
 			) {
 				if (eventName === 'loadend') {
 					loadEndListener =
-						typeof listener === 'function' ? () => listener(new Event('loadend')) : null
+						typeof listener === 'function'
+							? () => listener(new Event('loadend'))
+							: null
 				}
 			}
 			removeEventListener() {}
@@ -134,7 +140,9 @@ describe('RecordingForm', () => {
 		const createObjectURL = vi
 			.spyOn(URL, 'createObjectURL')
 			.mockReturnValue('blob:recording')
-		const revokeObjectURL = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {})
+		const revokeObjectURL = vi
+			.spyOn(URL, 'revokeObjectURL')
+			.mockImplementation(() => {})
 
 		try {
 			const { container } = render(
@@ -199,7 +207,9 @@ describe('RecordingForm', () => {
 			) {
 				if (eventName === 'loadend') {
 					loadEndListener =
-						typeof listener === 'function' ? () => listener(new Event('loadend')) : null
+						typeof listener === 'function'
+							? () => listener(new Event('loadend'))
+							: null
 				}
 			}
 			removeEventListener() {}
@@ -229,7 +239,9 @@ describe('RecordingForm', () => {
 		const createObjectURL = vi
 			.spyOn(URL, 'createObjectURL')
 			.mockReturnValue('blob:recording')
-		const revokeObjectURL = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {})
+		const revokeObjectURL = vi
+			.spyOn(URL, 'revokeObjectURL')
+			.mockImplementation(() => {})
 
 		const initialData = {
 			fields: {
@@ -287,7 +299,9 @@ describe('RecordingForm', () => {
 		const createObjectURL = vi
 			.spyOn(URL, 'createObjectURL')
 			.mockReturnValue('blob:recording')
-		const revokeObjectURL = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {})
+		const revokeObjectURL = vi
+			.spyOn(URL, 'revokeObjectURL')
+			.mockImplementation(() => {})
 
 		try {
 			const { container } = render(
@@ -303,7 +317,10 @@ describe('RecordingForm', () => {
 			expect(screen.getByText('80 characters left')).toBeInTheDocument()
 			const titleId = titleInput.getAttribute('id')
 			expect(titleId).toBeTruthy()
-			expect(titleInput).toHaveAttribute('aria-describedby', `${titleId}-countdown`)
+			expect(titleInput).toHaveAttribute(
+				'aria-describedby',
+				`${titleId}-countdown`,
+			)
 
 			fireEvent.change(titleInput, { target: { value: 'abcd' } })
 			expect(screen.getByText('76 characters left')).toBeInTheDocument()
@@ -324,7 +341,9 @@ describe('RecordingForm', () => {
 			fireEvent.change(titleInput, { target: { value: '' } })
 			fireEvent.submit(form as HTMLFormElement)
 			await screen.findByText('Title is required')
-			expect(titleInput.getAttribute('aria-describedby')).toContain(`${titleId}-error`)
+			expect(titleInput.getAttribute('aria-describedby')).toContain(
+				`${titleId}-error`,
+			)
 			expect(titleInput.getAttribute('aria-describedby')).toContain(
 				`${titleId}-countdown`,
 			)

app/components/calls/episode-artwork-preview.tsx

@@ -93,7 +93,9 @@ export function EpisodeArtworkPreview({
 				<div className="min-w-0 flex-1">
 					<div className="flex items-start justify-between gap-4">
 						<div className="min-w-0">
-							<p className="text-primary text-lg font-medium">Episode artwork</p>
+							<p className="text-primary text-lg font-medium">
+								Episode artwork
+							</p>
 							<p className="mt-1 text-sm text-gray-600 dark:text-slate-400">
 								{`By default we use your avatar from `}
 								<a
@@ -135,7 +137,10 @@ export function EpisodeArtworkPreview({
 										const wrapper = tooltipWrapperRef.current
 										if (!wrapper) return
 										const nextFocused = event.relatedTarget
-										if (nextFocused instanceof Node && wrapper.contains(nextFocused)) {
+										if (
+											nextFocused instanceof Node &&
+											wrapper.contains(nextFocused)
+										) {
 											return
 										}
 										setIsTooltipOpen(false)
@@ -150,15 +155,15 @@ export function EpisodeArtworkPreview({
 										onKeyDown={(event) => {
 											if (event.key === 'Escape') setIsTooltipOpen(false)
 										}}
-										className="text-primary inline-flex h-5 w-5 items-center justify-center rounded-full border border-gray-300 text-xs leading-none opacity-80 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
+										className="text-primary inline-flex h-5 w-5 items-center justify-center rounded-full border border-gray-300 text-xs leading-none opacity-80 hover:opacity-100 focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-600"
 									>
 										?
 									</button>
 									{isTooltipOpen ? (
 										<span
 											id={tooltipId}
 											role="tooltip"
-											className="absolute left-0 top-full z-20 mt-2 w-72 rounded-md bg-white p-3 text-sm text-gray-700 shadow-lg ring-1 ring-black/5 dark:bg-gray-900 dark:text-slate-200 dark:ring-white/10"
+											className="absolute top-full left-0 z-20 mt-2 w-72 rounded-md bg-white p-3 text-sm text-gray-700 shadow-lg ring-1 ring-black/5 dark:bg-gray-900 dark:text-slate-200 dark:ring-white/10"
 										>
 											{tooltip}
 										</span>
@@ -185,4 +190,3 @@ export function EpisodeArtworkPreview({
 		</section>
 	)
 }
-

app/components/character-countdown.tsx

@@ -13,7 +13,8 @@ export function CharacterCountdown({
 	const remainingDisplay = Math.max(0, remaining)
 	let className = 'text-gray-500 dark:text-slate-400'
 	if (remaining <= 0) className = 'text-red-500'
-	else if (remaining <= warnAt) className = 'text-yellow-600 dark:text-yellow-500'
+	else if (remaining <= warnAt)
+		className = 'text-yellow-600 dark:text-yellow-500'
 
 	return (
 		<p