+ Coverage Diagram Mock +
+
+ undefined}
+ mode="explore"
+ />
+
+ Normal state
+
+ undefined}
+ mode="explore"
+ forceHover
+ />
+
+
+
+ )
+}
+
+function ReportTypeSelector({
+ value,
+ onChange
+}: {
+ value: ReportType
+ onChange: (value: ReportType) => void
+}) {
+ const [isOpen, setIsOpen] = useState(false)
+ const shellRef = useRef{helperText}
+
+ {segments.map((segment) => (
+
+
+ {segments.map((segment) => (
+
+ ))}
+
+
+ {options.map((option) => {
+ const optionConfig = REPORT_CONFIG[option]
+ return (
+
+ )
+ })}
+
+ )}
+
+ )
+}
+
+function ModeToggle({
+ mode,
+ onChange
+}: {
+ mode: Mode
+ onChange: (mode: Mode) => void
+}) {
+ return (
+
+
+ )
+}
+
+function Checkbox({
+ checked,
+ indeterminate,
+ onChange,
+ label,
+ className
+}: {
+ checked: boolean
+ indeterminate?: boolean
+ onChange: () => void
+ label?: string
+ className?: string
+}) {
+ const inputRef = useRef
+
+
+
+
+ Target languages:
+
+ )
+}
+
+function SelectableVideoTile({
+ mode,
+ video,
+ status,
+ statusLabel,
+ isSelected,
+ onToggle,
+ onHoverStart,
+ onHoverEnd
+}: {
+ mode: Mode
+ video: ClientVideo
+ status: CoverageStatus
+ statusLabel: string
+ isSelected: boolean
+ onToggle: () => void
+ onHoverStart: () => void
+ onHoverEnd: () => void
+}) {
+ const actionLabel =
+ mode === 'explore'
+ ? video.watchUrl
+ ? 'Open video'
+ : 'No action'
+ : 'Select for translation'
+ const title = `${actionLabel}: ${video.title} — ${statusLabel}`
+
+ if (mode === 'explore') {
+ if (video.watchUrl) {
+ return (
+
+
+
+ )
+ }
+ return (
+
+
+
+ )
+ }
+
+ return (
+
+ )
+}
+
+function TranslationActionBar({
+ selectedCount,
+ languageLabels,
+ scope,
+ hoveredVideo,
+ statusLabels,
+ isInteractive,
+ onScopeChange,
+ onClear,
+ onTranslate
+}: {
+ selectedCount: number
+ languageLabels: string[]
+ scope: TranslationScope
+ hoveredVideo: HoveredVideoDetails | null
+ statusLabels: Record
+ {visibleLabels.join(', ')}
+ {hiddenCount > 0 ? (
+ +{hiddenCount} more
+ ) : null}
+
+
+ {isInteractive && (
+
+ )
+}
+
+function MetaSummary({ meta }: { meta: MetaCompleteness }) {
+ const fields = [
+ { key: 'tags', label: 'Tags', present: meta.tags },
+ { key: 'description', label: 'Description', present: meta.description },
+ { key: 'title', label: 'Title', present: meta.title },
+ { key: 'questions', label: 'Questions', present: meta.questions },
+ { key: 'bibleQuotes', label: 'Bible quotes', present: meta.bibleQuotes }
+ ]
+
+ return (
+
+
+ )}
+
+
+
+ {selectedCount} video{selectedCount === 1 ? '' : 's'} selected
+
+
+
+
+
+
+
+
+
+
+ {hoveredVideo ? (
+
+
+ {hoveredVideo.video.thumbnailUrl ? (
+ 
+ ) : (
+
+ )}
+
+ ) : (
+
+
+
+
+ {hoveredVideo.video.title}
+ {hoveredVideo.collectionTitle}
+
+
+ {statusLabel ?? ''}
+
+
+
+ Hover any item to see its details.
+
+ )}
+
+
+ Meta {meta.completed}/{meta.total}
+
+ {fields.map((field) => (
+
+ {field.label}
+
+ ))}
+
+ )
+}
+
+type CollectionCardProps = {
+ collection: ClientCollection
+ reportType: ReportType
+ reportConfig: (typeof REPORT_CONFIG)[ReportType]
+ interactionMode: Mode
+ isSelectMode: boolean
+ selectedSet: Set
+
+
+
+ {
+ if (!isSelectMode) return
+ const target = event.target as HTMLElement
+ if (target.closest('.checkbox')) return
+ event.stopPropagation()
+ onToggleCollection(collection)
+ }}
+ onKeyDown={(event) => {
+ if (!isSelectMode) return
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault()
+ event.stopPropagation()
+ onToggleCollection(collection)
+ }
+ }}
+ >
+
+
+ 0 && !collectionAllSelected
+ }
+ onChange={() => onToggleCollection(collection)}
+ label=""
+ className="collection-checkbox"
+ />
+ )}
+
+ {collection.title}
+ + {collection.labelDisplay} + + {isSelectMode && ( +
+
+ + {total} video{total === 1 ? '' : 's'} +
+
+ onFilterCollection(collection.id, nextFilter)}
+ onSelectStatus={
+ isSelectMode
+ ? (status) => onSelectByStatusInCollection(collection, status)
+ : undefined
+ }
+ mode={interactionMode}
+ labels={reportConfig.segmentLabels}
+ ariaLabel={reportConfig.ariaLabel}
+ />
+
+
+
+
+
+ {filteredCollectionVideos.map((video) => {
+ const status = getReportStatus(video)
+ const statusLabel = reportConfig.statusLabels[status]
+ const tileStatusLabel =
+ reportType === 'meta'
+ ? `${statusLabel} (${video.meta.completed}/${video.meta.total})`
+ : statusLabel
+ const tileActionLabel = isSelectMode
+ ? 'Select for translation'
+ : video.watchUrl
+ ? 'Open video'
+ : 'No action'
+
+ return (
+
+
+ {isSelectMode ? (
+
+ ) : (
+
+ )
+ })}
+
+ {sortedVideos.map((video) => {
+ const status = getReportStatus(video)
+ const statusLabel = reportConfig.statusLabels[status]
+ const tileStatusLabel =
+ reportType === 'meta'
+ ? `${statusLabel} (${video.meta.completed}/${video.meta.total})`
+ : statusLabel
+
+ return (
+ onToggleVideo(video.id)}
+ onHoverStart={() =>
+ onHoverVideo({
+ video,
+ collectionTitle: collection.title,
+ status
+ })
+ }
+ onHoverEnd={() => onHoverVideo(null)}
+ />
+ )
+ })}
+ {filteredCollectionVideos.length === 0 && (
+
+ No videos in this collection.
+ )} +
+
+
+
+
+
+
+ {gatewayConfigured && !errorMessage && (
+
+
+ )}
+
+
+ {isSubtitleReport &&
+
+ {!gatewayConfigured ? (
+
+ )
+}
diff --git a/apps/ai-media/src/app/LanguageGeoSelector.tsx b/apps/ai-media/src/app/LanguageGeoSelector.tsx
new file mode 100644
index 00000000000..6f39bf61fda
--- /dev/null
+++ b/apps/ai-media/src/app/LanguageGeoSelector.tsx
@@ -0,0 +1,734 @@
+'use client'
+
+import { Languages, XCircle } from 'lucide-react'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+type LanguageOption = {
+ id: string
+ englishLabel: string
+ nativeLabel: string
+}
+
+type GeoContinent = {
+ id: string
+ name: string
+}
+
+type GeoCountry = {
+ id: string
+ name: string
+ continentId: string
+}
+
+type GeoLanguage = {
+ id: string
+ englishLabel: string
+ nativeLabel: string
+ countryIds: string[]
+ continentIds: string[]
+ countrySpeakers: Record
+ 
+
+
+
+
+
+ Coverage Report
+
+
+
+
+
+
+
+
+
+
+ Showing {shownCollections} of {totalCollections} collections
+
+
+
+
+
+ Last updated: {lastUpdatedLabel}
+
+ Next refresh in: {nextRefreshIn}
+
+
+
+ + {isSubtitleReport + ? isSelectMode + ? reportConfig.hintSelect ?? '' + : reportConfig.hintExplore + : reportConfig.hintExplore} +
+ {interactionMode === 'explore' && filter !== 'all' && ( +
+ Filtering: {reportConfig.statusLabels[filter]}
+
+
+ )}
+ {isSubtitleReport && (
+
+
+ )}
+
+ Set
+ ) : errorMessage ? (
+ NEXT_PUBLIC_GATEWAY_URL to load collections.
+ {errorMessage}
+ ) : (
+
+ {pagedCollections.map((collection) => {
+ const collectionFilter = collectionFilters[collection.id] ?? 'all'
+ const isExpanded = expandedCollections.includes(collection.id)
+
+ return (
+
+ )}
+
+ {isSubtitleReport && (
+ No videos match this filter.
+ )}
+ {totalCollections > 0 && (
+
+
+
+ )}
+
+ {shownCollections} of {totalCollections} loaded
+
+
+
+ )
+}
diff --git a/apps/ai-media/src/app/LanguageSelector.tsx b/apps/ai-media/src/app/LanguageSelector.tsx
new file mode 100644
index 00000000000..26b8ecbd862
--- /dev/null
+++ b/apps/ai-media/src/app/LanguageSelector.tsx
@@ -0,0 +1,248 @@
+'use client'
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+
+import { languageSlugs } from '@core/prisma/languages/__generated__/languageSlugs'
+
+function formatSlugFallback(id: string): string {
+ const slug = languageSlugs[id]
+ if (!slug) return ''
+ return slug
+ .replace(/\.html$/i, '')
+ .split('-')
+ .filter(Boolean)
+ .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+ .join(' ')
+}
+
+type LanguageOption = {
+ id: string
+ englishLabel: string
+ nativeLabel: string
+}
+
+interface LanguageSelectorProps {
+ value: string
+ options: LanguageOption[]
+ className?: string
+}
+
+export function LanguageSelector({
+ value,
+ options,
+ className
+}: LanguageSelectorProps) {
+ const router = useRouter()
+ const pathname = usePathname()
+ const searchParams = useSearchParams()
+ const [isLoading, setIsLoading] = useState(false)
+ const [isOpen, setIsOpen] = useState(false)
+ const [loadedOptions, setLoadedOptions] =
+ useState
+ Language
+ {selectedLabel}
+ {isLoading && (
+
+ Loading…
+
+ )}
+
+
+
+
+
+
+
+ setSearchValue(event.target.value)}
+ placeholder="Search languages..."
+ aria-label="Search languages"
+ className="geo-search-input"
+ />
+
+
+ {isSearchingServer && (
+
+ Searching server…
+
+ )}
+
+
+ {selectedLanguagePills.length > 0 ? (
+
+
+ Regions
+
+ {countriesByContinent.map(({ continent, countries }) => {
+ if (!continent) return null
+ const isOpen =
+ draftContinents.has(continent.id) ||
+ countries.some((country) => draftCountries.has(country.id))
+ return (
+
+
+
+ )
+ })}
+ + + + {countries.length} + +
+
+ {countries.map((country) => (
+
+ ))}
+
+
+
+ Languages
+
+ {visibleLanguages.map((language) => {
+ const speakerEstimate =
+ languageSpeakerEstimates.get(language.id) ?? 0
+ const speakerLabel = hasSelectedCountry
+ ? formatSpeakerPercentage(speakerEstimate, totalVisibleSpeakers)
+ : ''
+
+ return (
+
+ )
+ })}
+
+
+
+ ) : (
+ Selected languages
+
+
+
+ {selectedLanguagePills.map((language) => (
+
+ ))}
+
+
+
+
+
+ )}
+
+
+ )}
+
+ )
+}
diff --git a/apps/ai-media/src/app/api/languages/route.ts b/apps/ai-media/src/app/api/languages/route.ts
new file mode 100644
index 00000000000..d85f6d65ff1
--- /dev/null
+++ b/apps/ai-media/src/app/api/languages/route.ts
@@ -0,0 +1,436 @@
+import { readFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
+
+import { NextResponse } from 'next/server'
+
+export const dynamic = 'force-dynamic'
+export const revalidate = 0
+
+const GATEWAY_URL = process.env.NEXT_PUBLIC_GATEWAY_URL
+const ENGLISH_LANGUAGE_ID = '529'
+const COUNTRY_LANGUAGE_POPULATIONS_FILE = 'country-language-populations.json'
+const COUNTRY_LANGUAGE_POPULATIONS_PATHS = [
+ resolve(
+ process.cwd(),
+ 'apps/ai-media',
+ COUNTRY_LANGUAGE_POPULATIONS_FILE
+ ),
+ resolve(process.cwd(), COUNTRY_LANGUAGE_POPULATIONS_FILE)
+]
+
+type GeoContinent = {
+ id: string
+ name: string
+}
+
+type GeoCountry = {
+ id: string
+ name: string
+ continentId: string
+}
+
+type GeoLanguage = {
+ id: string
+ englishLabel: string
+ nativeLabel: string
+ countryIds: string[]
+ continentIds: string[]
+ countrySpeakers: Record
+ setSearchValue(event.target.value)}
+ placeholder="Search languages..."
+ aria-label="Search languages"
+ className="control-search-input"
+ />
+
+ {loadedOptions
+ .filter((option) => {
+ const query = searchValue.trim().toLowerCase()
+ if (!query) return true
+ return (
+ option.englishLabel.toLowerCase().includes(query) ||
+ option.nativeLabel.toLowerCase().includes(query)
+ )
+ })
+ .map((option) => {
+ const isSelected = option.id === value
+ return (
+
+ )
+ })}
+