Let me first explore the codebase to understand the current project structure and then review the prototype reference.

Now let me read the component files to understand the full UI:

Now let me read the remaining components and the report page:

Now I have a comprehensive understanding of the codebase. Let me set up my task plan and start implementing the real-time translation features with proper English/Chinese bilingual display.

Let me start by adding the language selector component to the lecture header. I'll create a clean language dropdown that integrates with the existing state management.

Now I have a full understanding of the codebase. Let me create the language selector component and then update all the panels to support real-time bilingual display. I'll start building everything:

Now let's move to the transcript panel to add bilingual display with inline translations:

Now let's update the summary panel to show bilingual content:

Now let's update the vocabulary popover to also show translated definitions when a language is selected:

Now let's handle the last task - updating the dashboard page to also support the language selector, and adding the UPDATE_VOCABULARY action back to the store:

Let me update the dashboard page to add a feature for real-time translation in the features section and also update the hero description to be more bilingual-focused:

Now update the feature card rendering to show the bilingual content for the translation feature:

Now let me update the hero section description to include bilingual text:

Update the footer to be bilingual:

Now let me also update the start session dialog to show the translation language option:

Now update the lecture page to read the language param from the URL and set it in state:

Now add the import for the type and set the language on mount:

Now let me mark all tasks as done:

I've implemented comprehensive real-time bilingual translation support across the entire Unote application. Here's a summary of all the changes:

1. Language Selector (components/shared/language-selector.tsx) - A new dropdown in the lecture header that lets users toggle translation between Chinese (default), Japanese, Korean, Spanish, Portuguese, and Hindi. Shows an active badge when translation is on.
2. Bilingual Transcript Panel - Each transcript line now automatically translates when a language is selected. Translations appear inline below the English text with a Globe icon, creating a clean bilingual reading experience. The header shows an "EN / CN" (or whichever language) indicator.
3. Bilingual Summary Panel - The structured summary (thesis, key points, definitions, lecture structure) now shows parallel translations using a BilingualText component. Definition terms show the translated term in parentheses beside the English term.
4. Vocabulary Popover - When a language is active, clicking on highlighted academic words now also shows the translated definition alongside the English one.
5. Dashboard Updates - The hero section now features bilingual text (English + Chinese), a new "Real-time Translation" feature card with Chinese subtitle, and the start session dialog includes a language selector defaulting to Chinese so students can pre-configure their preferred language before a lecture begins.

Let me first read all the current files to understand the exact state of the codebase before making changes.

Now let me read all the current UI components:

Now let me also read the remaining pages and components:

Now I have a thorough understanding of the entire codebase. Let me analyze what's already implemented and what needs to be enhanced:

Already working:

• Language selector dropdown in lecture header
• Transcript translations (Chinese below English)
• Summary bilingual display with BilingualText
• Vocabulary popover with translated definition

What needs to be improved/added:

1. The vocabulary popover should translate ALL sections (definition, context explanation, example sentence), not just the definition
2. The AI Assistance box responses should also show translations
3. The dashboard page interface labels should show bilingual text (section headers, feature cards, buttons)
4. The report page should show bilingual content
5. The language toggle needs to be more prominent and also accessible from the dashboard

Let me implement all of these comprehensively:

First, let me enhance the vocabulary popover to translate all three sections (definition, context explanation, and example sentence):

Now let's enhance the AI Assistance box to show translated responses:

Now let's add bilingual UI labels across all interface elements:

I need to create a bilingual UI labels utility and then update all interface elements. Let me first create a shared i18n utility:

Now let me create a shared BilingualLabel component that can be reused everywhere:

Now let's update the dashboard page to use bilingual labels everywhere:

Now update the transcript panel with bilingual section headers:

Now update the summary panel with bilingual section headers:

Now update the lecture header with bilingual labels:

Now update the start session dialog with bilingual labels:

Now let's move to the report page:

Now update the report page to pass the language and add the language selector:

Now let me also update the AI Assistance box to have bilingual section labels for the tab headers:

The AI Assistance box already has bilingual response support. Let me now add the bilingual header label to it as well:

Now let me fix a potential issue in the i18n labels file -- the key_points entry had a corrupt unicode escape. Let me fix that:

I can see the Korean translation for "key_points" has corrupt null bytes. Let me fix that:

Now let me mark all tasks done:

Here is a summary of all the changes made across the application:

Vocabulary Popover - Now translates all three sections (Definition, In Context, Example) into the selected language, not just the definition. All translations appear with a Globe icon below the English text.

AI Assistance Box - AI responses now automatically include a translated version below the English text when a language is active. A "Bilingual" badge and bilingual header label are shown. A "Translating..." indicator appears while the translation is being fetched.

Centralized i18n System (lib/i18n.ts) - Created a comprehensive bilingual label utility with translations for 40+ UI labels across 7 languages (Chinese, Japanese, Korean, Spanish, Portuguese, Hindi). Every section header, button, status indicator, and placeholder text throughout the app now pulls from this system.

Full Interface Bilingual Coverage - The Dashboard (hero, features, past sessions, footer), Lecture page (transcript header, summary section headers, recording status, empty states), Start Session dialog (title, description, labels), Report page (all section headers, table headers, loading states), and the Language Selector (now also on the Dashboard header) all display Chinese (or selected language) translations beneath their English text when a language is active.