From 67dd85c9281a299220ea7f23da43345692c8763e Mon Sep 17 00:00:00 2001
From: MisonL <35633790+MisonL@users.noreply.github.com>
Date: Fri, 16 Jan 2026 00:51:05 +0800
Subject: [PATCH] Feat/localization tests docker (#371)

* feat(i18n): complete 100% internationalization and fix Next.js 15 compatibility

* feat(i18n): complete 100% internationalization coverage

* chore(test): finalize component tests and project cleanup

* test(logic): add unit tests for useModalManager hook

* fix(test): resolve timeout in AppSidebar tests by mocking TooltipProvider

* feat(i18n): comprehensive i18n audit, fixes for hardcoded strings, and complete zh-TW support

* fix(i18n): resolve TypeScript warnings and improve translation hook stability

- Remove unused useTranslation import from ConnectionGuard
- Add ref-based checking state to prevent dependency cycles
- Fix useTranslation hook to return empty string for undefined translations
- Add comment for backward compatibility on ExtractedReference interface
- Ensure .replace() string methods work safely with nested translation keys

* feat(i18n): complete internationalization implementation with Docker deployment

- Add LanguageLoadingOverlay component for smooth language transitions
- Update all translation files (en-US, zh-CN, zh-TW) with improved terminology
- Optimize Docker configuration for better performance
- Update version check and config handling for i18n support
- Fix route handling for language-specific content
- Add comprehensive task documentation

* fix(i18n): resolve localization errors, duplicates, and type issues

* chore(i18n): finalize 100% internationalization coverage

* chore(test): supplement i18n test cases and cleanup redundant files

* fix(test): resolve lint type errors and finalize delivery documents

* feat(i18n): finalize full internationalization and zh-TW localization

* fix(frontend): add missing devDependency and fix build tsconfig

* feat(ui): enhance sidebar hover effects with better visual feedback

* fix(frontend): resolve accessibility, i18n, and lint issues

- fix: add missing id, name, autocomplete attributes to dialog inputs
- fix: add aria labels and DialogDescription for accessibility
- fix: resolve uncontrolled component warning in SettingsForm
- fix: correct duplicate 'Traditional Chinese' label in zh-TW locale
- feat: add i18n support for podcast template names
- chore: fix lint errors in Dialogs

* fix: address all 21 PR feedback items from cubic-dev-ai bot

Configuration:
- Remove ignoreDuringBuilds flags from next.config.ts

Testing:
- Fix AppSidebar.test.tsx regex pattern and add missing assertion

Logic:
- Fix ConnectionGuard.tsx re-entry prevention logic

Internationalization (I18n) - Translations:
- Add missing keys: notebooks.archived, common.note/insight, accessibility keys
- Add specific keys: sources.allSourcesDescShort, transformations.selectModel
- Add singular/plural keys: podcasts.usedByCount_one/other, common.note/notes
- Add common.created/updated with {time} placeholder

Internationalization (I18n) - Usage:
- SourcesPage: use allSourcesDescShort instead of string splitting
- TransformationPlayground: use navigation.transformation and selectModel
- CommandPalette: use dedicated keys instead of string concatenation
- GeneratePodcastDialog: fix zh-TW date locale handling
- NotebookHeader: correctly interpolate {time} placeholder
- TransformationCard: use common.description instead of undefined key
- ChatPanel/SpeakerProfilesPanel: implement proper pluralization
- SystemInfo: correctly interpolate {version} placeholder
- LanguageLoadingOverlay: use t.common.loading instead of hardcoded string
- MessageActions: use specific error key cannotSaveNoteNoNotebook

Other:
- Fix SessionManager.tsx exhaustive-deps warning

* fix: remove duplicate locale keys and add missing zh-CN translations

- en-US: remove duplicate loading key (line 59) and addNew key (sources)
- zh-CN: remove duplicate common keys (loading, note, insight, newSource, newNotebook, newPodcast)
- zh-CN: remove duplicate accessibility.searchNotebooks key
- zh-CN: remove duplicate sources.addNew key
- zh-CN: remove duplicate navigation.transformation key
- zh-CN: add missing usedByCount_one and usedByCount_other keys in podcasts
- zh-TW: remove duplicate common keys (loading, note, insight, newSource, newNotebook, newPodcast)
- zh-TW: remove duplicate accessibility.searchNotebooks key
- zh-TW: remove duplicate sources.addNew key

* docs: remove info.md

* fix: remove duplicate notebook keys and unused ts-expect-error

- zh-CN: remove duplicate notebooks keys (archived, archive, unarchive, deleteNotebook, deleteNotebookDesc)
- zh-TW: remove duplicate notebooks keys (archived, archive, unarchive, deleteNotebook, deleteNotebookDesc)
- GeneratePodcastDialog: remove unused @ts-expect-error directive

* fix(a11y): fix unassociated labels in search page

- Replace <Label> with role='group' + aria-labelledby for search type section
- Replace <Label> with role='group' + aria-labelledby for search in section
- Follows WAI-ARIA best practices for labeling form field groups

* fix(a11y): fix unassociated labels across multiple components

- search/page.tsx: use role='group' + aria-labelledby for search type and search in sections
- RebuildEmbeddings.tsx: use role='group' + aria-labelledby for include checkboxes
- TransformationPlayground.tsx: replace Label with span for non-form output label

* chore: revert to npm stack and ensure i18n compatibility

* chore: polish zh-TW translations for better idiomatic usage

* fix: resolve linter errors (ruff import sort, mypy config duplicate)

* style: apply ruff formatting

* fix: finalize upstream compliance (Dockerfile.single, i18n hooks, docker-compose)

* style: polish strings, fix timeout cleanup, and improve test mocks

* fix: use relative imports in test setup to resolve IDE path errors

* perf(docker): optimize build speed by removing apt-get upgrade and build tools

- Remove apt-get upgrade from both builder and runtime stages (saves 10-15 min each)
- Remove gcc/g++/make/git from builder (uv downloads pre-built wheels)
- Add --no-install-recommends to minimize package footprint
- Keep npm mirror (npmmirror.com) for faster frontend deps
- Add npm registry config for reliable China network access

Also includes:
- fix(a11y): add missing labels and aria attributes to form fields
- fix(i18n): add 2s safety timeout to LanguageLoadingOverlay
- fix(i18n): add robustness checks to use-translation proxy

Build time reduced from 2+ hours to ~34 minutes (~70% improvement)

* fix(a11y): resolve 16 form field accessibility warnings in notebook and podcast pages

* fix(a11y): resolve 4 button and 1 select field accessibility warnings in models page

* fix(a11y): resolve redundant attributes and residual warnings in transformations and podcast forms

* fix(i18n): deep fix for language switch hang using proxy protection and safer access

* fix(a11y): add name attributes to ModelSelector, TransformationPlayground, and SourceDetailContent

* fix: add missing Label import to SourceDetailContent

* fix(i18n): use native react-i18next in LanguageLoadingOverlay to prevent hang during language switch

* fix(i18n): rewrite use-translation Proxy with strict depth limit and expanded blocked props to prevent language switch hang

* fix: add type assertion to fix TypeScript comparison error

* fix(i18n): disable useSuspense to prevent thread hang during language resource loading

* fix(i18n): add infinite loop detection circuit breaker to useTranslation hook

* fix(i18n): update traditional chinese label to native script in en-US

* feat: add new localization strings for notebook and note management.

* fix: resolve config priority, docker build deps, and ui glitches

* refactor: improve ui details and test coverage based on feedback

* refactor: improve ui details (version check/lang toggle) and test coverage

* fix: polish language matching and test cleanup

* fix(test): update mocks to resolve timeouts and proxy errors

* fix(frontend): restore tsconfig.json structure and enable IDE support for tests

* fix: address PR review findings and resolve CI OIDC failure

* fix: merge exception headers in custom handler

* fix: comprehensive PR review remediations and async performance fixes

* refactor: address all PR #371 review feedback

- Docker: consolidate SURREAL_URL to docker.env, add single-container override
- Security: restore apt-get upgrade in Dockerfile and Dockerfile.single
- Create centralized getDateLocale helper (lib/utils/date-locale.ts)
- Refactor 7 files to use getDateLocale helper
- Revert config/route.ts to origin/main version
- Move test files to co-located pattern (3 files)
- Remove local useTranslation mock from ConfirmDialog.test.tsx
- Simplify use-version-check to single useEffect pattern
- Fix test import paths after moving to co-located pattern

* fix: add jest-dom types for test files

* fix: address remaining review issues

- Add apt-get upgrade -y to Dockerfile.single backend-builder stage
- Refactor ChatColumn.test.tsx: use 'as unknown as ReturnType<typeof hook>' instead of 'as any'
- Use toBeInTheDocument() assertions instead of toBeDefined()
---
 .dockerignore                                 |   92 +-
 .github/workflows/claude-code-review.yml      |    5 +-
 .github/workflows/claude.yml                  |    5 +-
 Dockerfile                                    |   16 +-
 Dockerfile.single                             |  109 +-
 api/auth.py                                   |   48 +-
 api/chat_service.py                           |   60 +-
 api/client.py                                 |  116 +-
 api/context_service.py                        |    9 +-
 api/embedding_service.py                      |    6 +-
 api/episode_profiles_service.py               |   30 +-
 api/insights_service.py                       |   42 +-
 api/main.py                                   |   28 +-
 api/models_service.py                         |   38 +-
 api/notebook_service.py                       |   12 +-
 api/notes_service.py                          |   33 +-
 api/routers/auth.py                           |    4 +-
 api/routers/chat.py                           |    8 +-
 api/routers/commands.py                       |   80 +-
 api/routers/config.py                         |   20 +-
 api/routers/context.py                        |    1 -
 api/routers/embedding.py                      |    6 +-
 api/routers/embedding_rebuild.py              |   10 +-
 api/routers/episode_profiles.py               |   98 +-
 api/routers/insights.py                       |   21 +-
 api/routers/models.py                         |   63 +-
 api/routers/notes.py                          |   33 +-
 api/routers/podcasts.py                       |   24 +-
 api/routers/settings.py                       |   25 +-
 api/routers/source_chat.py                    |  365 ++-
 api/routers/sources.py                        |   53 +-
 api/routers/speaker_profiles.py               |   98 +-
 api/routers/transformations.py                |    7 +-
 api/search_service.py                         |   10 +-
 api/settings_service.py                       |   49 +-
 api/sources_service.py                        |   71 +-
 api/transformations_service.py                |   55 +-
 commands/embedding_commands.py                |   26 +-
 commands/example_commands.py                  |   47 +-
 docker-compose.full.yml                       |    3 +
 docker-compose.single.yml                     |    3 +
 frontend/package-lock.json                    | 2902 ++++++++++++++++-
 frontend/package.json                         |   16 +-
 .../advanced/components/RebuildEmbeddings.tsx |  109 +-
 .../advanced/components/SystemInfo.tsx        |   26 +-
 .../src/app/(dashboard)/advanced/page.tsx     |    6 +-
 .../models/components/AddModelForm.tsx        |   53 +-
 .../components/DefaultModelsSection.tsx       |  154 +-
 .../components/EmbeddingModelChangeDialog.tsx |   37 +-
 .../models/components/ModelTypeSection.tsx    |   34 +-
 .../models/components/ProviderStatus.tsx      |   28 +-
 frontend/src/app/(dashboard)/models/page.tsx  |    8 +-
 .../app/(dashboard)/notebooks/[id]/page.tsx   |   14 +-
 .../notebooks/components/ChatColumn.test.tsx  |   74 +
 .../notebooks/components/ChatColumn.tsx       |    9 +-
 .../notebooks/components/NoteEditorDialog.tsx |   23 +-
 .../notebooks/components/NotebookCard.tsx     |   25 +-
 .../notebooks/components/NotebookHeader.tsx   |   32 +-
 .../notebooks/components/NotebookList.tsx     |    6 +-
 .../notebooks/components/NotesColumn.tsx      |   32 +-
 .../notebooks/components/SourcesColumn.tsx    |   32 +-
 .../src/app/(dashboard)/notebooks/page.tsx    |   26 +-
 .../src/app/(dashboard)/podcasts/page.tsx     |   14 +-
 frontend/src/app/(dashboard)/search/page.tsx  |  101 +-
 .../settings/components/SettingsForm.tsx      |  138 +-
 .../src/app/(dashboard)/settings/page.tsx     |    4 +-
 .../src/app/(dashboard)/sources/[id]/page.tsx |    2 +-
 frontend/src/app/(dashboard)/sources/page.tsx |   62 +-
 .../components/DefaultPromptEditor.tsx        |   33 +-
 .../components/TransformationCard.tsx         |   22 +-
 .../components/TransformationEditorDialog.tsx |  104 +-
 .../components/TransformationPlayground.tsx   |   28 +-
 .../components/TransformationsList.tsx        |   12 +-
 .../app/(dashboard)/transformations/page.tsx  |   14 +-
 frontend/src/app/globals.css                  |   43 +-
 frontend/src/app/layout.tsx                   |   11 +-
 frontend/src/components/auth/LoginForm.tsx    |   32 +-
 .../src/components/common/CommandPalette.tsx  |   78 +-
 .../components/common/ConfirmDialog.test.tsx  |   52 +
 .../src/components/common/ConfirmDialog.tsx   |   12 +-
 .../src/components/common/ConnectionGuard.tsx |   34 +-
 .../src/components/common/ContextToggle.tsx   |   46 +-
 .../src/components/common/ErrorBoundary.tsx   |   14 +-
 frontend/src/components/common/InlineEdit.tsx |   23 +-
 .../common/LanguageLoadingOverlay.tsx         |   91 +
 .../src/components/common/LanguageToggle.tsx  |   58 +
 .../src/components/common/LoadingSpinner.tsx  |    5 +-
 .../src/components/common/ModelSelector.tsx   |   37 +-
 .../src/components/common/ThemeToggle.tsx     |   14 +-
 .../errors/ConnectionErrorOverlay.tsx         |   54 +-
 .../src/components/layout/AppSidebar.test.tsx |   60 +
 frontend/src/components/layout/AppSidebar.tsx |  117 +-
 .../notebooks/CreateNotebookDialog.tsx        |   20 +-
 .../src/components/podcasts/EpisodeCard.tsx   |   94 +-
 .../podcasts/EpisodeProfilesPanel.tsx         |   41 +-
 .../src/components/podcasts/EpisodesTab.tsx   |   52 +-
 .../podcasts/GeneratePodcastDialog.tsx        |  185 +-
 .../podcasts/SpeakerProfilesPanel.tsx         |   38 +-
 .../src/components/podcasts/TemplatesTab.tsx  |   44 +-
 .../forms/EpisodeProfileFormDialog.tsx        |  119 +-
 .../forms/SpeakerProfileFormDialog.tsx        |  110 +-
 .../src/components/providers/I18nProvider.tsx |   25 +
 .../search/AdvancedModelsDialog.tsx           |   22 +-
 .../search/SaveToNotebooksDialog.tsx          |   20 +-
 .../components/search/StreamingResponse.tsx   |   18 +-
 frontend/src/components/source/ChatPanel.tsx  |   36 +-
 .../src/components/source/MessageActions.tsx  |   16 +-
 .../src/components/source/ModelSelector.tsx   |   27 +-
 .../source/NotebookAssociations.tsx           |   22 +-
 .../src/components/source/SessionManager.tsx  |   37 +-
 .../components/source/SourceDetailContent.tsx |  157 +-
 .../src/components/source/SourceDialog.tsx    |    4 +-
 .../components/source/SourceInsightDialog.tsx |   18 +-
 .../sources/AddExistingSourceDialog.tsx       |   26 +-
 .../components/sources/AddSourceDialog.tsx    |   55 +-
 .../src/components/sources/SourceCard.tsx     |   56 +-
 .../sources/steps/NotebooksStep.tsx           |    8 +-
 .../sources/steps/ProcessingStep.tsx          |   34 +-
 .../sources/steps/SourceTypeStep.tsx          |   78 +-
 frontend/src/components/ui/alert-dialog.tsx   |    1 +
 frontend/src/components/ui/checkbox-list.tsx  |    3 +
 frontend/src/components/ui/dialog.tsx         |   18 +-
 frontend/src/components/ui/form-section.tsx   |   16 +-
 .../src/components/ui/markdown-editor.tsx     |    6 +-
 frontend/src/lib/config.test.ts               |  100 +
 frontend/src/lib/config.ts                    |   59 +-
 frontend/src/lib/hooks/use-ask.ts             |   16 +-
 .../src/lib/hooks/use-modal-manager.test.ts   |   63 +
 frontend/src/lib/hooks/use-modal-manager.ts   |    8 +-
 frontend/src/lib/hooks/use-models.ts          |   34 +-
 frontend/src/lib/hooks/use-notebooks.ts       |   35 +-
 frontend/src/lib/hooks/use-notes.ts           |   35 +-
 frontend/src/lib/hooks/use-podcasts.ts        |  112 +-
 frontend/src/lib/hooks/use-search.ts          |    7 +-
 frontend/src/lib/hooks/use-settings.ts        |   13 +-
 frontend/src/lib/hooks/use-sources.ts         |   93 +-
 frontend/src/lib/hooks/use-toast.ts           |    7 +-
 frontend/src/lib/hooks/use-transformations.ts |   55 +-
 .../src/lib/hooks/use-translation.test.ts     |   48 +
 frontend/src/lib/hooks/use-translation.ts     |  157 +
 frontend/src/lib/hooks/use-version-check.ts   |   89 +-
 frontend/src/lib/hooks/useNotebookChat.ts     |   37 +-
 frontend/src/lib/hooks/useSourceChat.ts       |   36 +-
 frontend/src/lib/i18n-events.ts               |   24 +
 frontend/src/lib/i18n.ts                      |   24 +
 frontend/src/lib/locales/en-US/index.ts       |  950 ++++++
 frontend/src/lib/locales/index.test.ts        |   36 +
 frontend/src/lib/locales/index.ts             |   26 +
 frontend/src/lib/locales/zh-CN/index.ts       |  950 ++++++
 frontend/src/lib/locales/zh-TW/index.ts       |  950 ++++++
 frontend/src/lib/utils/date-locale.ts         |   22 +
 frontend/src/lib/utils/error-handler.ts       |   68 +
 frontend/src/lib/utils/source-references.tsx  |    7 +-
 frontend/src/test/jest-dom.d.ts               |    1 +
 frontend/src/test/setup.ts                    |   69 +
 frontend/tailwind.config.ts                   |    3 +-
 frontend/tsconfig.json                        |    3 +-
 frontend/vitest.config.ts                     |   15 +
 mypy.ini                                      |    2 +-
 open_notebook/ai/models.py                    |    7 +-
 open_notebook/database/async_migrate.py       |   36 +-
 open_notebook/domain/base.py                  |   12 +-
 open_notebook/domain/notebook.py              |   18 +-
 open_notebook/graphs/ask.py                   |   18 +-
 open_notebook/graphs/chat.py                  |    6 +-
 open_notebook/graphs/source.py                |   20 +-
 open_notebook/graphs/source_chat.py           |   10 +-
 open_notebook/graphs/transformation.py        |    4 +-
 open_notebook/podcasts/models.py              |    4 +-
 open_notebook/utils/__init__.py               |    4 +-
 open_notebook/utils/context_builder.py        |  233 +-
 open_notebook/utils/text_utils.py             |    2 +-
 open_notebook/utils/token_utils.py            |    3 +-
 open_notebook/utils/version_utils.py          |   44 +
 scripts/export_docs.py                        |    8 +-
 tests/test_domain.py                          |   34 +-
 tests/test_graphs.py                          |    9 +-
 tests/test_models_api.py                      |    4 +-
 tests/test_utils.py                           |    8 +-
 179 files changed, 10201 insertions(+), 2633 deletions(-)
 create mode 100644 frontend/src/app/(dashboard)/notebooks/components/ChatColumn.test.tsx
 create mode 100644 frontend/src/components/common/ConfirmDialog.test.tsx
 create mode 100644 frontend/src/components/common/LanguageLoadingOverlay.tsx
 create mode 100644 frontend/src/components/common/LanguageToggle.tsx
 create mode 100644 frontend/src/components/layout/AppSidebar.test.tsx
 create mode 100644 frontend/src/components/providers/I18nProvider.tsx
 create mode 100644 frontend/src/lib/config.test.ts
 create mode 100644 frontend/src/lib/hooks/use-modal-manager.test.ts
 create mode 100644 frontend/src/lib/hooks/use-translation.test.ts
 create mode 100644 frontend/src/lib/hooks/use-translation.ts
 create mode 100644 frontend/src/lib/i18n-events.ts
 create mode 100644 frontend/src/lib/i18n.ts
 create mode 100644 frontend/src/lib/locales/en-US/index.ts
 create mode 100644 frontend/src/lib/locales/index.test.ts
 create mode 100644 frontend/src/lib/locales/index.ts
 create mode 100644 frontend/src/lib/locales/zh-CN/index.ts
 create mode 100644 frontend/src/lib/locales/zh-TW/index.ts
 create mode 100644 frontend/src/lib/utils/date-locale.ts
 create mode 100644 frontend/src/lib/utils/error-handler.ts
 create mode 100644 frontend/src/test/jest-dom.d.ts
 create mode 100644 frontend/src/test/setup.ts
 create mode 100644 frontend/vitest.config.ts

diff --git a/.dockerignore b/.dockerignore
index cc482b3..08e0db2 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,63 +1,35 @@
-notebooks/
-data/
-.uploads/
-.venv/
-.env
-sqlite-db/
-temp/
-google-credentials.json
-docker-compose*
-.docker_data/
-docs/
-surreal_data/
-surreal-data/
-notebook_data/
-temp/
-*.env
-.git/
-.github/
+# Git
+.git
+.gitignore
 
-# Frontend build artifacts and dependencies
-frontend/node_modules/
-frontend/.next/
-frontend/.env.local
+# Python
+__pycache__
+*.pyc
+*.pyo
+*.pyd
+.venv
+venv
+ENV
+env
+.pytest_cache
+.mypy_cache
+.ruff_cache
 
-# Cache directories (recursive patterns)
-**/__pycache__/
-**/.mypy_cache/
-**/.ruff_cache/
-**/.pytest_cache/
-**/*.pyc
-**/*.pyo
-**/*.pyd
-.coverage
-.coverage.*
-htmlcov/
-.tox/
-.nox/
-.cache/
-nosetests.xml
-coverage.xml
-*.cover
-*.py,cover
-.hypothesis/
+# Frontend
+frontend/node_modules
+frontend/.next
+frontend/dist
+frontend/out
+frontend/.env*
+frontend/*.log
 
-# IDE and editor files
-.vscode/
-.idea/
-*.swp
-*.swo
-*~
-
-# OS files
-.DS_Store
-.DS_Store?
-._*
-.Spotlight-V100
-.Trashes
-ehthumbs.db
-Thumbs.db
-
-
-.quarentena/
-surreal_single_data/
\ No newline at end of file
+# Project
+.antigravity
+.gemini
+tmp
+data
+mydata
+*.db
+*.log
+docker.env
+.env
\ No newline at end of file
diff --git a/.github/workflows/claude-code-review.yml b/.github/workflows/claude-code-review.yml
index eb0e4c1..4d51cc1 100644
--- a/.github/workflows/claude-code-review.yml
+++ b/.github/workflows/claude-code-review.yml
@@ -22,8 +22,8 @@ jobs:
     runs-on: ubuntu-latest
     permissions:
       contents: read
-      pull-requests: read
-      issues: read
+      pull-requests: write
+      issues: write
       id-token: write
 
     steps:
@@ -38,6 +38,7 @@ jobs:
         id: claude-review
         uses: anthropics/claude-code-action@v1
         with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
           claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
           plugin_marketplaces: 'https://github.com/anthropics/claude-code.git'
           plugins: 'code-review@claude-code-plugins'
diff --git a/.github/workflows/claude.yml b/.github/workflows/claude.yml
index d300267..a285620 100644
--- a/.github/workflows/claude.yml
+++ b/.github/workflows/claude.yml
@@ -20,8 +20,8 @@ jobs:
     runs-on: ubuntu-latest
     permissions:
       contents: read
-      pull-requests: read
-      issues: read
+      pull-requests: write
+      issues: write
       id-token: write
       actions: read # Required for Claude to read CI results on PRs
     steps:
@@ -34,6 +34,7 @@ jobs:
         id: claude
         uses: anthropics/claude-code-action@v1
         with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
           claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
 
           # This is an optional setting that allows Claude to read CI results on PRs
diff --git a/Dockerfile b/Dockerfile
index ab6aeb0..57e4ba9 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -6,9 +6,11 @@ COPY --from=ghcr.io/astral-sh/uv:latest /uv /uvx /bin/
 
 # Install system dependencies required for building certain Python packages
 # Add Node.js 20.x LTS for building frontend
-RUN apt-get update && apt-get upgrade -y && apt-get install -y \
-    gcc g++ git make \
+# NOTE: gcc/g++/make removed - uv should download pre-built wheels. Add back if build fails.
+# NOTE: gcc/g++/make required for some python dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
     curl \
+    build-essential \
     && curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
     && apt-get install -y nodejs \
     && rm -rf /var/lib/apt/lists/*
@@ -35,7 +37,11 @@ COPY . /app
 
 # Install frontend dependencies and build
 WORKDIR /app/frontend
+ARG NPM_REGISTRY=https://registry.npmjs.org/
+COPY frontend/package.json frontend/package-lock.json ./
+RUN npm config set registry ${NPM_REGISTRY}
 RUN npm ci
+COPY frontend/ ./
 RUN npm run build
 
 # Return to app root
@@ -46,7 +52,7 @@ FROM python:3.12-slim-bookworm AS runtime
 
 # Install only runtime system dependencies (no build tools)
 # Add Node.js 20.x LTS for running frontend
-RUN apt-get update && apt-get upgrade -y && apt-get install -y \
+RUN apt-get update && apt-get upgrade -y && apt-get install -y --no-install-recommends \
     ffmpeg \
     supervisor \
     curl \
@@ -63,8 +69,8 @@ WORKDIR /app
 # Copy the virtual environment from builder stage
 COPY --from=builder /app/.venv /app/.venv
 
-# Copy the application code
-COPY --from=builder /app /app
+# Copy the source code (the rest)
+COPY . /app
 
 # Ensure uv uses the existing venv without attempting network operations
 ENV UV_NO_SYNC=1
diff --git a/Dockerfile.single b/Dockerfile.single
index 86f98b5..901d763 100644
--- a/Dockerfile.single
+++ b/Dockerfile.single
@@ -1,51 +1,39 @@
-# Build stage
-FROM python:3.12-slim-bookworm AS builder
-
-# Install uv using the official method
-COPY --from=ghcr.io/astral-sh/uv:latest /uv /uvx /bin/
-
-# Install system dependencies required for building certain Python packages
-# Add Node.js 20.x LTS for building frontend
-RUN apt-get update && apt-get upgrade -y && apt-get install -y \
-    gcc g++ git make \
-    curl \
-    && curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
-    && apt-get install -y nodejs \
-    && rm -rf /var/lib/apt/lists/*
-
-# Set build optimization environment variables
-ENV MAKEFLAGS="-j$(nproc)"
-ENV PYTHONDONTWRITEBYTECODE=1
-ENV PYTHONUNBUFFERED=1
-ENV UV_COMPILE_BYTECODE=1
-ENV UV_LINK_MODE=copy
-
-# Set the working directory in the container to /app
-WORKDIR /app
-
-# Copy dependency files and minimal package structure first for better layer caching
-COPY pyproject.toml uv.lock ./
-COPY open_notebook/__init__.py ./open_notebook/__init__.py
-
-# Install dependencies with optimizations (this layer will be cached unless dependencies change)
-RUN uv sync --frozen --no-dev
-
-# Copy the rest of the application code
-COPY . /app
-
-# Install frontend dependencies and build
+# Stage 1: Frontend Builder
+FROM node:20-slim AS frontend-builder
 WORKDIR /app/frontend
+
+# Copy dependency files first to leverage cache
+COPY frontend/package.json frontend/package-lock.json ./
+ARG NPM_REGISTRY=https://registry.npmjs.org/
+RUN npm config set registry ${NPM_REGISTRY}
 RUN npm ci
+
+# Copy the rest of the frontend source
+COPY frontend/ ./
+# Build the frontend
 RUN npm run build
 
-# Return to app root
+# Stage 2: Backend Builder
+FROM python:3.12-slim-bookworm AS backend-builder
+# Install build dependencies
+RUN apt-get update && apt-get upgrade -y && apt-get install -y --no-install-recommends build-essential && rm -rf /var/lib/apt/lists/*
+# Install uv
+COPY --from=ghcr.io/astral-sh/uv:latest /uv /uvx /bin/
 WORKDIR /app
 
-# Runtime stage
+# Set build optimization environment variables
+ENV UV_HTTP_TIMEOUT=120
+
+# Copy dependency files first
+COPY pyproject.toml uv.lock ./
+COPY open_notebook/__init__.py ./open_notebook/__init__.py
+# Install dependencies
+RUN uv sync --frozen --no-dev
+
+# Stage 3: Runtime
 FROM python:3.12-slim-bookworm AS runtime
 
-# Install runtime system dependencies including curl for SurrealDB installation
-# Add Node.js 20.x LTS for running frontend
+# Install runtime dependencies
 RUN apt-get update && apt-get upgrade -y && apt-get install -y \
     ffmpeg \
     supervisor \
@@ -57,47 +45,34 @@ RUN apt-get update && apt-get upgrade -y && apt-get install -y \
 # Install SurrealDB
 RUN curl --proto '=https' --tlsv1.2 -sSf https://install.surrealdb.com | sh
 
-# Install uv using the official method
+# Install uv (optional but helpful for some scripts)
 COPY --from=ghcr.io/astral-sh/uv:latest /uv /uvx /bin/
 
-# Set the working directory in the container to /app
 WORKDIR /app
 
-# Copy the virtual environment from builder stage
-COPY --from=builder /app/.venv /app/.venv
+# Copy backend virtualenv and source code
+COPY --from=backend-builder /app/.venv /app/.venv
+COPY . /app/
 
-# Copy the application code
-COPY --from=builder /app /app
+# Copy built frontend from standalone output
+COPY --from=frontend-builder /app/frontend/.next/standalone /app/frontend/
+COPY --from=frontend-builder /app/frontend/.next/static /app/frontend/.next/static
+COPY --from=frontend-builder /app/frontend/public /app/frontend/public
 
-# Copy built frontend from builder stage
-COPY --from=builder /app/frontend/.next/standalone /app/frontend/
-COPY --from=builder /app/frontend/.next/static /app/frontend/.next/static
-COPY --from=builder /app/frontend/public /app/frontend/public
-
-# Create directories for data persistence
+# Setup directories and permissions
 RUN mkdir -p /app/data /mydata
 
-# Copy and make executable the wait-for-api script
-COPY scripts/wait-for-api.sh /app/scripts/wait-for-api.sh
+# Ensure wait-for-api script is executable
 RUN chmod +x /app/scripts/wait-for-api.sh
 
-# Expose ports for Frontend and API
-EXPOSE 8502 5055
-
-# Copy single-container supervisord configuration
+# Copy supervisord configuration
 COPY supervisord.single.conf /etc/supervisor/conf.d/supervisord.conf
 
 # Create log directories
 RUN mkdir -p /var/log/supervisor
 
-# Runtime API URL Configuration
-# The API_URL environment variable can be set at container runtime to configure
-# where the frontend should connect to the API. This allows the same Docker image
-# to work in different deployment scenarios without rebuilding.
-#
-# If not set, the system will auto-detect based on incoming requests.
-# Set API_URL when using reverse proxies or custom domains.
-#
-# Example: docker run -e API_URL=https://your-domain.com/api ...
+# Expose ports
+EXPOSE 8502 5055
 
+# Set startup command
 CMD ["/usr/bin/supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]
\ No newline at end of file
diff --git a/api/auth.py b/api/auth.py
index 04895c8..0ad2378 100644
--- a/api/auth.py
+++ b/api/auth.py
@@ -1,7 +1,7 @@
 import os
 from typing import Optional
 
-from fastapi import HTTPException, Request
+from fastapi import Depends, HTTPException, Request
 from fastapi.security import HTTPAuthorizationCredentials, HTTPBearer
 from starlette.middleware.base import BaseHTTPMiddleware
 from starlette.responses import JSONResponse
@@ -12,35 +12,41 @@ class PasswordAuthMiddleware(BaseHTTPMiddleware):
     Middleware to check password authentication for all API requests.
     Only active when OPEN_NOTEBOOK_PASSWORD environment variable is set.
     """
-    
+
     def __init__(self, app, excluded_paths: Optional[list] = None):
         super().__init__(app)
         self.password = os.environ.get("OPEN_NOTEBOOK_PASSWORD")
-        self.excluded_paths = excluded_paths or ["/", "/health", "/docs", "/openapi.json", "/redoc"]
-    
+        self.excluded_paths = excluded_paths or [
+            "/",
+            "/health",
+            "/docs",
+            "/openapi.json",
+            "/redoc",
+        ]
+
     async def dispatch(self, request: Request, call_next):
         # Skip authentication if no password is set
         if not self.password:
             return await call_next(request)
-        
+
         # Skip authentication for excluded paths
         if request.url.path in self.excluded_paths:
             return await call_next(request)
-        
+
         # Skip authentication for CORS preflight requests (OPTIONS)
         if request.method == "OPTIONS":
             return await call_next(request)
-        
+
         # Check authorization header
         auth_header = request.headers.get("Authorization")
-        
+
         if not auth_header:
             return JSONResponse(
                 status_code=401,
                 content={"detail": "Missing authorization header"},
-                headers={"WWW-Authenticate": "Bearer"}
+                headers={"WWW-Authenticate": "Bearer"},
             )
-        
+
         # Expected format: "Bearer {password}"
         try:
             scheme, credentials = auth_header.split(" ", 1)
@@ -50,17 +56,17 @@ class PasswordAuthMiddleware(BaseHTTPMiddleware):
             return JSONResponse(
                 status_code=401,
                 content={"detail": "Invalid authorization header format"},
-                headers={"WWW-Authenticate": "Bearer"}
+                headers={"WWW-Authenticate": "Bearer"},
             )
-        
+
         # Check password
         if credentials != self.password:
             return JSONResponse(
                 status_code=401,
                 content={"detail": "Invalid password"},
-                headers={"WWW-Authenticate": "Bearer"}
+                headers={"WWW-Authenticate": "Bearer"},
             )
-        
+
         # Password is correct, proceed with the request
         response = await call_next(request)
         return response
@@ -70,17 +76,19 @@ class PasswordAuthMiddleware(BaseHTTPMiddleware):
 security = HTTPBearer(auto_error=False)
 
 
-def check_api_password(credentials: Optional[HTTPAuthorizationCredentials] = None) -> bool:
+def check_api_password(
+    credentials: Optional[HTTPAuthorizationCredentials] = Depends(security),
+) -> bool:
     """
     Utility function to check API password.
     Can be used as a dependency in individual routes if needed.
     """
     password = os.environ.get("OPEN_NOTEBOOK_PASSWORD")
-    
+
     # No password set, allow access
     if not password:
         return True
-    
+
     # No credentials provided
     if not credentials:
         raise HTTPException(
@@ -88,7 +96,7 @@ def check_api_password(credentials: Optional[HTTPAuthorizationCredentials] = Non
             detail="Missing authorization",
             headers={"WWW-Authenticate": "Bearer"},
         )
-    
+
     # Check password
     if credentials.credentials != password:
         raise HTTPException(
@@ -96,5 +104,5 @@ def check_api_password(credentials: Optional[HTTPAuthorizationCredentials] = Non
             detail="Invalid password",
             headers={"WWW-Authenticate": "Bearer"},
         )
-    
-    return True
\ No newline at end of file
+
+    return True
diff --git a/api/chat_service.py b/api/chat_service.py
index 34bc3cf..fa446b8 100644
--- a/api/chat_service.py
+++ b/api/chat_service.py
@@ -2,6 +2,7 @@
 Chat service for API operations.
 Provides async interface for chat functionality.
 """
+
 import os
 from typing import Any, Dict, List, Optional
 
@@ -11,7 +12,7 @@ from loguru import logger
 
 class ChatService:
     """Service for chat-related API operations"""
-    
+
     def __init__(self):
         self.base_url = os.getenv("API_BASE_URL", "http://127.0.0.1:5055")
         # Add authentication header if password is set
@@ -19,7 +20,7 @@ class ChatService:
         password = os.getenv("OPEN_NOTEBOOK_PASSWORD")
         if password:
             self.headers["Authorization"] = f"Bearer {password}"
-    
+
     async def get_sessions(self, notebook_id: str) -> List[Dict[str, Any]]:
         """Get all chat sessions for a notebook"""
         try:
@@ -27,14 +28,14 @@ class ChatService:
                 response = await client.get(
                     f"{self.base_url}/api/chat/sessions",
                     params={"notebook_id": notebook_id},
-                    headers=self.headers
+                    headers=self.headers,
                 )
                 response.raise_for_status()
                 return response.json()
         except Exception as e:
             logger.error(f"Error fetching chat sessions: {str(e)}")
             raise
-    
+
     async def create_session(
         self,
         notebook_id: str,
@@ -48,33 +49,33 @@ class ChatService:
                 data["title"] = title
             if model_override is not None:
                 data["model_override"] = model_override
-            
+
             async with httpx.AsyncClient() as client:
                 response = await client.post(
                     f"{self.base_url}/api/chat/sessions",
                     json=data,
-                    headers=self.headers
+                    headers=self.headers,
                 )
                 response.raise_for_status()
                 return response.json()
         except Exception as e:
             logger.error(f"Error creating chat session: {str(e)}")
             raise
-    
+
     async def get_session(self, session_id: str) -> Dict[str, Any]:
         """Get a specific session with messages"""
         try:
             async with httpx.AsyncClient() as client:
                 response = await client.get(
                     f"{self.base_url}/api/chat/sessions/{session_id}",
-                    headers=self.headers
+                    headers=self.headers,
                 )
                 response.raise_for_status()
                 return response.json()
         except Exception as e:
             logger.error(f"Error fetching session: {str(e)}")
             raise
-    
+
     async def update_session(
         self,
         session_id: str,
@@ -90,34 +91,36 @@ class ChatService:
                 data["model_override"] = model_override
 
             if not data:
-                raise ValueError("At least one field must be provided to update a session")
+                raise ValueError(
+                    "At least one field must be provided to update a session"
+                )
 
             async with httpx.AsyncClient() as client:
                 response = await client.put(
                     f"{self.base_url}/api/chat/sessions/{session_id}",
                     json=data,
-                    headers=self.headers
+                    headers=self.headers,
                 )
                 response.raise_for_status()
                 return response.json()
         except Exception as e:
             logger.error(f"Error updating session: {str(e)}")
             raise
-    
+
     async def delete_session(self, session_id: str) -> Dict[str, Any]:
         """Delete a chat session"""
         try:
             async with httpx.AsyncClient() as client:
                 response = await client.delete(
                     f"{self.base_url}/api/chat/sessions/{session_id}",
-                    headers=self.headers
+                    headers=self.headers,
                 )
                 response.raise_for_status()
                 return response.json()
         except Exception as e:
             logger.error(f"Error deleting session: {str(e)}")
             raise
-    
+
     async def execute_chat(
         self,
         session_id: str,
@@ -127,41 +130,32 @@ class ChatService:
     ) -> Dict[str, Any]:
         """Execute a chat request"""
         try:
-            data = {
-                "session_id": session_id,
-                "message": message, 
-                "context": context
-            }
+            data = {"session_id": session_id, "message": message, "context": context}
             if model_override is not None:
                 data["model_override"] = model_override
-            
+
             # Short connect timeout (10s), long read timeout (10 min) for Ollama/local LLMs
             timeout = httpx.Timeout(connect=10.0, read=600.0, write=30.0, pool=10.0)
             async with httpx.AsyncClient(timeout=timeout) as client:
                 response = await client.post(
-                    f"{self.base_url}/api/chat/execute",
-                    json=data,
-                    headers=self.headers
+                    f"{self.base_url}/api/chat/execute", json=data, headers=self.headers
                 )
                 response.raise_for_status()
                 return response.json()
         except Exception as e:
             logger.error(f"Error executing chat: {str(e)}")
             raise
-    
-    async def build_context(self, notebook_id: str, context_config: Dict[str, Any]) -> Dict[str, Any]:
+
+    async def build_context(
+        self, notebook_id: str, context_config: Dict[str, Any]
+    ) -> Dict[str, Any]:
         """Build context for a notebook"""
         try:
-            data = {
-                "notebook_id": notebook_id,
-                "context_config": context_config
-            }
-            
+            data = {"notebook_id": notebook_id, "context_config": context_config}
+
             async with httpx.AsyncClient() as client:
                 response = await client.post(
-                    f"{self.base_url}/api/chat/context",
-                    json=data,
-                    headers=self.headers
+                    f"{self.base_url}/api/chat/context", json=data, headers=self.headers
                 )
                 response.raise_for_status()
                 return response.json()
diff --git a/api/client.py b/api/client.py
index 016d31c..91978c0 100644
--- a/api/client.py
+++ b/api/client.py
@@ -23,14 +23,20 @@ class APIClient:
             timeout_value = float(timeout_str)
             # Validate timeout is within reasonable bounds (30s - 3600s / 1 hour)
             if timeout_value < 30:
-                logger.warning(f"API_CLIENT_TIMEOUT={timeout_value}s is too low, using minimum of 30s")
+                logger.warning(
+                    f"API_CLIENT_TIMEOUT={timeout_value}s is too low, using minimum of 30s"
+                )
                 timeout_value = 30.0
             elif timeout_value > 3600:
-                logger.warning(f"API_CLIENT_TIMEOUT={timeout_value}s is too high, using maximum of 3600s")
+                logger.warning(
+                    f"API_CLIENT_TIMEOUT={timeout_value}s is too high, using maximum of 3600s"
+                )
                 timeout_value = 3600.0
             self.timeout = timeout_value
         except ValueError:
-            logger.error(f"Invalid API_CLIENT_TIMEOUT value '{timeout_str}', using default 300s")
+            logger.error(
+                f"Invalid API_CLIENT_TIMEOUT value '{timeout_str}', using default 300s"
+            )
             self.timeout = 300.0
 
         # Add authentication header if password is set
@@ -45,7 +51,7 @@ class APIClient:
         """Make HTTP request to the API."""
         url = f"{self.base_url}{endpoint}"
         request_timeout = timeout if timeout is not None else self.timeout
-        
+
         # Merge headers
         headers = kwargs.get("headers", {})
         headers.update(self.headers)
@@ -82,20 +88,28 @@ class APIClient:
         result = self._make_request("GET", "/api/notebooks", params=params)
         return result if isinstance(result, list) else [result]
 
-    def create_notebook(self, name: str, description: str = "") -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def create_notebook(
+        self, name: str, description: str = ""
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Create a new notebook."""
         data = {"name": name, "description": description}
         return self._make_request("POST", "/api/notebooks", json=data)
 
-    def get_notebook(self, notebook_id: str) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def get_notebook(
+        self, notebook_id: str
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Get a specific notebook."""
         return self._make_request("GET", f"/api/notebooks/{notebook_id}")
 
-    def update_notebook(self, notebook_id: str, **updates) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def update_notebook(
+        self, notebook_id: str, **updates
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Update a notebook."""
         return self._make_request("PUT", f"/api/notebooks/{notebook_id}", json=updates)
 
-    def delete_notebook(self, notebook_id: str) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def delete_notebook(
+        self, notebook_id: str
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Delete a notebook."""
         return self._make_request("DELETE", f"/api/notebooks/{notebook_id}")
 
@@ -148,7 +162,9 @@ class APIClient:
         result = self._make_request("GET", "/api/models", params=params)
         return result if isinstance(result, list) else [result]
 
-    def create_model(self, name: str, provider: str, model_type: str) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def create_model(
+        self, name: str, provider: str, model_type: str
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Create a new model."""
         data = {
             "name": name,
@@ -157,7 +173,9 @@ class APIClient:
         }
         return self._make_request("POST", "/api/models", json=data)
 
-    def delete_model(self, model_id: str) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def delete_model(
+        self, model_id: str
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Delete a model."""
         return self._make_request("DELETE", f"/api/models/{model_id}")
 
@@ -165,7 +183,9 @@ class APIClient:
         """Get default model assignments."""
         return self._make_request("GET", "/api/models/defaults")
 
-    def update_default_models(self, **defaults) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def update_default_models(
+        self, **defaults
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Update default model assignments."""
         return self._make_request("PUT", "/api/models/defaults", json=defaults)
 
@@ -193,17 +213,23 @@ class APIClient:
         }
         return self._make_request("POST", "/api/transformations", json=data)
 
-    def get_transformation(self, transformation_id: str) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def get_transformation(
+        self, transformation_id: str
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Get a specific transformation."""
         return self._make_request("GET", f"/api/transformations/{transformation_id}")
 
-    def update_transformation(self, transformation_id: str, **updates) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def update_transformation(
+        self, transformation_id: str, **updates
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Update a transformation."""
         return self._make_request(
             "PUT", f"/api/transformations/{transformation_id}", json=updates
         )
 
-    def delete_transformation(self, transformation_id: str) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def delete_transformation(
+        self, transformation_id: str
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Delete a transformation."""
         return self._make_request("DELETE", f"/api/transformations/{transformation_id}")
 
@@ -252,7 +278,9 @@ class APIClient:
         """Get a specific note."""
         return self._make_request("GET", f"/api/notes/{note_id}")
 
-    def update_note(self, note_id: str, **updates) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def update_note(
+        self, note_id: str, **updates
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Update a note."""
         return self._make_request("PUT", f"/api/notes/{note_id}", json=updates)
 
@@ -261,7 +289,9 @@ class APIClient:
         return self._make_request("DELETE", f"/api/notes/{note_id}")
 
     # Embedding API methods
-    def embed_content(self, item_id: str, item_type: str, async_processing: bool = False) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def embed_content(
+        self, item_id: str, item_type: str, async_processing: bool = False
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Embed content for vector search."""
         data = {
             "item_id": item_id,
@@ -276,7 +306,7 @@ class APIClient:
         mode: str = "existing",
         include_sources: bool = True,
         include_notes: bool = True,
-        include_insights: bool = True
+        include_insights: bool = True,
     ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Rebuild embeddings in bulk.
 
@@ -291,9 +321,13 @@ class APIClient:
         }
         # Use double the configured timeout for bulk rebuild operations (or configured value if already high)
         rebuild_timeout = max(self.timeout, min(self.timeout * 2, 3600.0))
-        return self._make_request("POST", "/api/embeddings/rebuild", json=data, timeout=rebuild_timeout)
+        return self._make_request(
+            "POST", "/api/embeddings/rebuild", json=data, timeout=rebuild_timeout
+        )
 
-    def get_rebuild_status(self, command_id: str) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def get_rebuild_status(
+        self, command_id: str
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Get status of a rebuild operation."""
         return self._make_request("GET", f"/api/embeddings/rebuild/{command_id}/status")
 
@@ -302,7 +336,9 @@ class APIClient:
         """Get all application settings."""
         return self._make_request("GET", "/api/settings")
 
-    def update_settings(self, **settings) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def update_settings(
+        self, **settings
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Update application settings."""
         return self._make_request("PUT", "/api/settings", json=settings)
 
@@ -370,21 +406,29 @@ class APIClient:
             data["transformations"] = transformations
 
         # Use configured timeout for source creation (especially PDF processing with OCR)
-        return self._make_request("POST", "/api/sources/json", json=data, timeout=self.timeout)
+        return self._make_request(
+            "POST", "/api/sources/json", json=data, timeout=self.timeout
+        )
 
     def get_source(self, source_id: str) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Get a specific source."""
         return self._make_request("GET", f"/api/sources/{source_id}")
 
-    def get_source_status(self, source_id: str) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def get_source_status(
+        self, source_id: str
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Get processing status for a source."""
         return self._make_request("GET", f"/api/sources/{source_id}/status")
 
-    def update_source(self, source_id: str, **updates) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def update_source(
+        self, source_id: str, **updates
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Update a source."""
         return self._make_request("PUT", f"/api/sources/{source_id}", json=updates)
 
-    def delete_source(self, source_id: str) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def delete_source(
+        self, source_id: str
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Delete a source."""
         return self._make_request("DELETE", f"/api/sources/{source_id}")
 
@@ -394,11 +438,15 @@ class APIClient:
         result = self._make_request("GET", f"/api/sources/{source_id}/insights")
         return result if isinstance(result, list) else [result]
 
-    def get_insight(self, insight_id: str) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def get_insight(
+        self, insight_id: str
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Get a specific insight."""
         return self._make_request("GET", f"/api/insights/{insight_id}")
 
-    def delete_insight(self, insight_id: str) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def delete_insight(
+        self, insight_id: str
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Delete a specific insight."""
         return self._make_request("DELETE", f"/api/insights/{insight_id}")
 
@@ -430,7 +478,9 @@ class APIClient:
         result = self._make_request("GET", "/api/episode-profiles")
         return result if isinstance(result, list) else [result]
 
-    def get_episode_profile(self, profile_name: str) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def get_episode_profile(
+        self, profile_name: str
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Get a specific episode profile by name."""
         return self._make_request("GET", f"/api/episode-profiles/{profile_name}")
 
@@ -460,11 +510,17 @@ class APIClient:
         }
         return self._make_request("POST", "/api/episode-profiles", json=data)
 
-    def update_episode_profile(self, profile_id: str, **updates) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def update_episode_profile(
+        self, profile_id: str, **updates
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Update an episode profile."""
-        return self._make_request("PUT", f"/api/episode-profiles/{profile_id}", json=updates)
+        return self._make_request(
+            "PUT", f"/api/episode-profiles/{profile_id}", json=updates
+        )
 
-    def delete_episode_profile(self, profile_id: str) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def delete_episode_profile(
+        self, profile_id: str
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Delete an episode profile."""
         return self._make_request("DELETE", f"/api/episode-profiles/{profile_id}")
 
diff --git a/api/context_service.py b/api/context_service.py
index 3f6f63f..87f766f 100644
--- a/api/context_service.py
+++ b/api/context_service.py
@@ -16,17 +16,14 @@ class ContextService:
         logger.info("Using API for context operations")
 
     def get_notebook_context(
-        self,
-        notebook_id: str,
-        context_config: Optional[Dict] = None
+        self, notebook_id: str, context_config: Optional[Dict] = None
     ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Get context for a notebook."""
         result = api_client.get_notebook_context(
-            notebook_id=notebook_id,
-            context_config=context_config
+            notebook_id=notebook_id, context_config=context_config
         )
         return result
 
 
 # Global service instance
-context_service = ContextService()
\ No newline at end of file
+context_service = ContextService()
diff --git a/api/embedding_service.py b/api/embedding_service.py
index b3d4d8e..1378d73 100644
--- a/api/embedding_service.py
+++ b/api/embedding_service.py
@@ -15,11 +15,13 @@ class EmbeddingService:
     def __init__(self):
         logger.info("Using API for embedding operations")
 
-    def embed_content(self, item_id: str, item_type: str) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
+    def embed_content(
+        self, item_id: str, item_type: str
+    ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Embed content for vector search."""
         result = api_client.embed_content(item_id=item_id, item_type=item_type)
         return result
 
 
 # Global service instance
-embedding_service = EmbeddingService()
\ No newline at end of file
+embedding_service = EmbeddingService()
diff --git a/api/episode_profiles_service.py b/api/episode_profiles_service.py
index 22deb31..f2072e4 100644
--- a/api/episode_profiles_service.py
+++ b/api/episode_profiles_service.py
@@ -12,10 +12,10 @@ from open_notebook.podcasts.models import EpisodeProfile
 
 class EpisodeProfilesService:
     """Service layer for episode profiles operations using API."""
-    
+
     def __init__(self):
         logger.info("Using API for episode profiles operations")
-    
+
     def get_all_episode_profiles(self) -> List[EpisodeProfile]:
         """Get all episode profiles."""
         profiles_data = api_client.get_episode_profiles()
@@ -31,16 +31,20 @@ class EpisodeProfilesService:
                 transcript_provider=profile_data["transcript_provider"],
                 transcript_model=profile_data["transcript_model"],
                 default_briefing=profile_data["default_briefing"],
-                num_segments=profile_data["num_segments"]
+                num_segments=profile_data["num_segments"],
             )
             profile.id = profile_data["id"]
             profiles.append(profile)
         return profiles
-    
+
     def get_episode_profile(self, profile_name: str) -> EpisodeProfile:
         """Get a specific episode profile by name."""
         profile_response = api_client.get_episode_profile(profile_name)
-        profile_data = profile_response if isinstance(profile_response, dict) else profile_response[0]
+        profile_data = (
+            profile_response
+            if isinstance(profile_response, dict)
+            else profile_response[0]
+        )
         profile = EpisodeProfile(
             name=profile_data["name"],
             description=profile_data.get("description", ""),
@@ -50,11 +54,11 @@ class EpisodeProfilesService:
             transcript_provider=profile_data["transcript_provider"],
             transcript_model=profile_data["transcript_model"],
             default_briefing=profile_data["default_briefing"],
-            num_segments=profile_data["num_segments"]
+            num_segments=profile_data["num_segments"],
         )
         profile.id = profile_data["id"]
         return profile
-    
+
     def create_episode_profile(
         self,
         name: str,
@@ -79,7 +83,11 @@ class EpisodeProfilesService:
             default_briefing=default_briefing,
             num_segments=num_segments,
         )
-        profile_data = profile_response if isinstance(profile_response, dict) else profile_response[0]
+        profile_data = (
+            profile_response
+            if isinstance(profile_response, dict)
+            else profile_response[0]
+        )
         profile = EpisodeProfile(
             name=profile_data["name"],
             description=profile_data.get("description", ""),
@@ -89,11 +97,11 @@ class EpisodeProfilesService:
             transcript_provider=profile_data["transcript_provider"],
             transcript_model=profile_data["transcript_model"],
             default_briefing=profile_data["default_briefing"],
-            num_segments=profile_data["num_segments"]
+            num_segments=profile_data["num_segments"],
         )
         profile.id = profile_data["id"]
         return profile
-    
+
     def delete_episode_profile(self, profile_id: str) -> bool:
         """Delete an episode profile."""
         api_client.delete_episode_profile(profile_id)
@@ -101,4 +109,4 @@ class EpisodeProfilesService:
 
 
 # Global service instance
-episode_profiles_service = EpisodeProfilesService()
\ No newline at end of file
+episode_profiles_service = EpisodeProfilesService()
diff --git a/api/insights_service.py b/api/insights_service.py
index b435519..6ae8762 100644
--- a/api/insights_service.py
+++ b/api/insights_service.py
@@ -12,10 +12,10 @@ from open_notebook.domain.notebook import Note, SourceInsight
 
 class InsightsService:
     """Service layer for insights operations using API."""
-    
+
     def __init__(self):
         logger.info("Using API for insights operations")
-    
+
     def get_source_insights(self, source_id: str) -> List[SourceInsight]:
         """Get all insights for a specific source."""
         insights_data = api_client.get_source_insights(source_id)
@@ -31,11 +31,15 @@ class InsightsService:
             insight.updated = insight_data["updated"]
             insights.append(insight)
         return insights
-    
+
     def get_insight(self, insight_id: str) -> SourceInsight:
         """Get a specific insight."""
         insight_response = api_client.get_insight(insight_id)
-        insight_data = insight_response if isinstance(insight_response, dict) else insight_response[0]
+        insight_data = (
+            insight_response
+            if isinstance(insight_response, dict)
+            else insight_response[0]
+        )
         insight = SourceInsight(
             insight_type=insight_data["insight_type"],
             content=insight_data["content"],
@@ -45,16 +49,20 @@ class InsightsService:
         insight.updated = insight_data["updated"]
         # Note: source_id from API response is not stored; use await insight.get_source() if needed
         return insight
-    
+
     def delete_insight(self, insight_id: str) -> bool:
         """Delete a specific insight."""
         api_client.delete_insight(insight_id)
         return True
-    
-    def save_insight_as_note(self, insight_id: str, notebook_id: Optional[str] = None) -> Note:
+
+    def save_insight_as_note(
+        self, insight_id: str, notebook_id: Optional[str] = None
+    ) -> Note:
         """Convert an insight to a note."""
         note_response = api_client.save_insight_as_note(insight_id, notebook_id)
-        note_data = note_response if isinstance(note_response, dict) else note_response[0]
+        note_data = (
+            note_response if isinstance(note_response, dict) else note_response[0]
+        )
         note = Note(
             title=note_data["title"],
             content=note_data["content"],
@@ -64,11 +72,19 @@ class InsightsService:
         note.created = note_data["created"]
         note.updated = note_data["updated"]
         return note
-    
-    def create_source_insight(self, source_id: str, transformation_id: str, model_id: Optional[str] = None) -> SourceInsight:
+
+    def create_source_insight(
+        self, source_id: str, transformation_id: str, model_id: Optional[str] = None
+    ) -> SourceInsight:
         """Create a new insight for a source by running a transformation."""
-        insight_response = api_client.create_source_insight(source_id, transformation_id, model_id)
-        insight_data = insight_response if isinstance(insight_response, dict) else insight_response[0]
+        insight_response = api_client.create_source_insight(
+            source_id, transformation_id, model_id
+        )
+        insight_data = (
+            insight_response
+            if isinstance(insight_response, dict)
+            else insight_response[0]
+        )
         insight = SourceInsight(
             insight_type=insight_data["insight_type"],
             content=insight_data["content"],
@@ -81,4 +97,4 @@ class InsightsService:
 
 
 # Global service instance
-insights_service = InsightsService()
\ No newline at end of file
+insights_service = InsightsService()
diff --git a/api/main.py b/api/main.py
index d3efa8c..b48db0c 100644
--- a/api/main.py
+++ b/api/main.py
@@ -37,7 +37,6 @@ from open_notebook.database.async_migrate import AsyncMigrationManager
 
 # Import commands to register them in the API process
 try:
-
     logger.info("Commands imported in API process")
 except Exception as e:
     logger.error(f"Failed to import commands in API process: {e}")
@@ -61,9 +60,13 @@ async def lifespan(app: FastAPI):
             logger.warning("Database migrations are pending. Running migrations...")
             await migration_manager.run_migration_up()
             new_version = await migration_manager.get_current_version()
-            logger.success(f"Migrations completed successfully. Database is now at version {new_version}")
+            logger.success(
+                f"Migrations completed successfully. Database is now at version {new_version}"
+            )
         else:
-            logger.info("Database is already at the latest version. No migrations needed.")
+            logger.info(
+                "Database is already at the latest version. No migrations needed."
+            )
     except Exception as e:
         logger.error(f"CRITICAL: Database migration failed: {str(e)}")
         logger.exception(e)
@@ -88,7 +91,18 @@ app = FastAPI(
 
 # Add password authentication middleware first
 # Exclude /api/auth/status and /api/config from authentication
-app.add_middleware(PasswordAuthMiddleware, excluded_paths=["/", "/health", "/docs", "/openapi.json", "/redoc", "/api/auth/status", "/api/config"])
+app.add_middleware(
+    PasswordAuthMiddleware,
+    excluded_paths=[
+        "/",
+        "/health",
+        "/docs",
+        "/openapi.json",
+        "/redoc",
+        "/api/auth/status",
+        "/api/config",
+    ],
+)
 
 # Add CORS middleware last (so it processes first)
 app.add_middleware(
@@ -119,7 +133,7 @@ async def custom_http_exception_handler(request: Request, exc: StarletteHTTPExce
         status_code=exc.status_code,
         content={"detail": exc.detail},
         headers={
-            "Access-Control-Allow-Origin": origin,
+            **(exc.headers or {}), "Access-Control-Allow-Origin": origin,
             "Access-Control-Allow-Credentials": "true",
             "Access-Control-Allow-Methods": "*",
             "Access-Control-Allow-Headers": "*",
@@ -136,7 +150,9 @@ app.include_router(models.router, prefix="/api", tags=["models"])
 app.include_router(transformations.router, prefix="/api", tags=["transformations"])
 app.include_router(notes.router, prefix="/api", tags=["notes"])
 app.include_router(embedding.router, prefix="/api", tags=["embedding"])
-app.include_router(embedding_rebuild.router, prefix="/api/embeddings", tags=["embeddings"])
+app.include_router(
+    embedding_rebuild.router, prefix="/api/embeddings", tags=["embeddings"]
+)
 app.include_router(settings.router, prefix="/api", tags=["settings"])
 app.include_router(context.router, prefix="/api", tags=["context"])
 app.include_router(sources.router, prefix="/api", tags=["sources"])
diff --git a/api/models_service.py b/api/models_service.py
index 956c8fd..ab857fa 100644
--- a/api/models_service.py
+++ b/api/models_service.py
@@ -12,10 +12,10 @@ from open_notebook.ai.models import DefaultModels, Model
 
 class ModelsService:
     """Service layer for models operations using API."""
-    
+
     def __init__(self):
         logger.info("Using API for models operations")
-    
+
     def get_all_models(self, model_type: Optional[str] = None) -> List[Model]:
         """Get all models with optional type filtering."""
         models_data = api_client.get_models(model_type=model_type)
@@ -32,7 +32,7 @@ class ModelsService:
             model.updated = model_data["updated"]
             models.append(model)
         return models
-    
+
     def create_model(self, name: str, provider: str, model_type: str) -> Model:
         """Create a new model."""
         response = api_client.create_model(name, provider, model_type)
@@ -46,12 +46,12 @@ class ModelsService:
         model.created = model_data["created"]
         model.updated = model_data["updated"]
         return model
-    
+
     def delete_model(self, model_id: str) -> bool:
         """Delete a model."""
         api_client.delete_model(model_id)
         return True
-    
+
     def get_default_models(self) -> DefaultModels:
         """Get default model assignments."""
         response = api_client.get_default_models()
@@ -60,15 +60,21 @@ class ModelsService:
 
         # Set the values from API response
         defaults.default_chat_model = defaults_data.get("default_chat_model")
-        defaults.default_transformation_model = defaults_data.get("default_transformation_model")
+        defaults.default_transformation_model = defaults_data.get(
+            "default_transformation_model"
+        )
         defaults.large_context_model = defaults_data.get("large_context_model")
-        defaults.default_text_to_speech_model = defaults_data.get("default_text_to_speech_model")
-        defaults.default_speech_to_text_model = defaults_data.get("default_speech_to_text_model")
+        defaults.default_text_to_speech_model = defaults_data.get(
+            "default_text_to_speech_model"
+        )
+        defaults.default_speech_to_text_model = defaults_data.get(
+            "default_speech_to_text_model"
+        )
         defaults.default_embedding_model = defaults_data.get("default_embedding_model")
         defaults.default_tools_model = defaults_data.get("default_tools_model")
 
         return defaults
-    
+
     def update_default_models(self, defaults: DefaultModels) -> DefaultModels:
         """Update default model assignments."""
         updates = {
@@ -86,10 +92,16 @@ class ModelsService:
 
         # Update the defaults object with the response
         defaults.default_chat_model = defaults_data.get("default_chat_model")
-        defaults.default_transformation_model = defaults_data.get("default_transformation_model")
+        defaults.default_transformation_model = defaults_data.get(
+            "default_transformation_model"
+        )
         defaults.large_context_model = defaults_data.get("large_context_model")
-        defaults.default_text_to_speech_model = defaults_data.get("default_text_to_speech_model")
-        defaults.default_speech_to_text_model = defaults_data.get("default_speech_to_text_model")
+        defaults.default_text_to_speech_model = defaults_data.get(
+            "default_text_to_speech_model"
+        )
+        defaults.default_speech_to_text_model = defaults_data.get(
+            "default_speech_to_text_model"
+        )
         defaults.default_embedding_model = defaults_data.get("default_embedding_model")
         defaults.default_tools_model = defaults_data.get("default_tools_model")
 
@@ -97,4 +109,4 @@ class ModelsService:
 
 
 # Global service instance
-models_service = ModelsService()
\ No newline at end of file
+models_service = ModelsService()
diff --git a/api/notebook_service.py b/api/notebook_service.py
index 340f35e..ab1ff73 100644
--- a/api/notebook_service.py
+++ b/api/notebook_service.py
@@ -12,10 +12,10 @@ from open_notebook.domain.notebook import Notebook
 
 class NotebookService:
     """Service layer for notebook operations using API."""
-    
+
     def __init__(self):
         logger.info("Using API for notebook operations")
-    
+
     def get_all_notebooks(self, order_by: str = "updated desc") -> List[Notebook]:
         """Get all notebooks."""
         notebooks_data = api_client.get_notebooks(order_by=order_by)
@@ -32,7 +32,7 @@ class NotebookService:
             nb.updated = nb_data["updated"]
             notebooks.append(nb)
         return notebooks
-    
+
     def get_notebook(self, notebook_id: str) -> Optional[Notebook]:
         """Get a specific notebook."""
         response = api_client.get_notebook(notebook_id)
@@ -60,7 +60,7 @@ class NotebookService:
         nb.created = nb_data["created"]
         nb.updated = nb_data["updated"]
         return nb
-    
+
     def update_notebook(self, notebook: Notebook) -> Notebook:
         """Update a notebook."""
         updates = {
@@ -76,7 +76,7 @@ class NotebookService:
         notebook.archived = nb_data["archived"]
         notebook.updated = nb_data["updated"]
         return notebook
-    
+
     def delete_notebook(self, notebook: Notebook) -> bool:
         """Delete a notebook."""
         api_client.delete_notebook(notebook.id or "")
@@ -84,4 +84,4 @@ class NotebookService:
 
 
 # Global service instance
-notebook_service = NotebookService()
\ No newline at end of file
+notebook_service = NotebookService()
diff --git a/api/notes_service.py b/api/notes_service.py
index d47a37b..d336b88 100644
--- a/api/notes_service.py
+++ b/api/notes_service.py
@@ -12,10 +12,10 @@ from open_notebook.domain.notebook import Note
 
 class NotesService:
     """Service layer for notes operations using API."""
-    
+
     def __init__(self):
         logger.info("Using API for notes operations")
-    
+
     def get_all_notes(self, notebook_id: Optional[str] = None) -> List[Note]:
         """Get all notes with optional notebook filtering."""
         notes_data = api_client.get_notes(notebook_id=notebook_id)
@@ -32,11 +32,13 @@ class NotesService:
             note.updated = note_data["updated"]
             notes.append(note)
         return notes
-    
+
     def get_note(self, note_id: str) -> Note:
         """Get a specific note."""
         note_response = api_client.get_note(note_id)
-        note_data = note_response if isinstance(note_response, dict) else note_response[0]
+        note_data = (
+            note_response if isinstance(note_response, dict) else note_response[0]
+        )
         note = Note(
             title=note_data["title"],
             content=note_data["content"],
@@ -46,22 +48,21 @@ class NotesService:
         note.created = note_data["created"]
         note.updated = note_data["updated"]
         return note
-    
+
     def create_note(
         self,
         content: str,
         title: Optional[str] = None,
         note_type: str = "human",
-        notebook_id: Optional[str] = None
+        notebook_id: Optional[str] = None,
     ) -> Note:
         """Create a new note."""
         note_response = api_client.create_note(
-            content=content,
-            title=title,
-            note_type=note_type,
-            notebook_id=notebook_id
+            content=content, title=title, note_type=note_type, notebook_id=notebook_id
+        )
+        note_data = (
+            note_response if isinstance(note_response, dict) else note_response[0]
         )
-        note_data = note_response if isinstance(note_response, dict) else note_response[0]
         note = Note(
             title=note_data["title"],
             content=note_data["content"],
@@ -71,7 +72,7 @@ class NotesService:
         note.created = note_data["created"]
         note.updated = note_data["updated"]
         return note
-    
+
     def update_note(self, note: Note) -> Note:
         """Update a note."""
         updates = {
@@ -80,7 +81,9 @@ class NotesService:
             "note_type": note.note_type,
         }
         note_response = api_client.update_note(note.id or "", **updates)
-        note_data = note_response if isinstance(note_response, dict) else note_response[0]
+        note_data = (
+            note_response if isinstance(note_response, dict) else note_response[0]
+        )
 
         # Update the note object with the response
         note.title = note_data["title"]
@@ -89,7 +92,7 @@ class NotesService:
         note.updated = note_data["updated"]
 
         return note
-    
+
     def delete_note(self, note_id: str) -> bool:
         """Delete a note."""
         api_client.delete_note(note_id)
@@ -97,4 +100,4 @@ class NotesService:
 
 
 # Global service instance
-notes_service = NotesService()
\ No newline at end of file
+notes_service = NotesService()
diff --git a/api/routers/auth.py b/api/routers/auth.py
index 5c35c38..1bcd842 100644
--- a/api/routers/auth.py
+++ b/api/routers/auth.py
@@ -20,5 +20,7 @@ async def get_auth_status():
 
     return {
         "auth_enabled": auth_enabled,
-        "message": "Authentication is required" if auth_enabled else "Authentication is disabled"
+        "message": "Authentication is required"
+        if auth_enabled
+        else "Authentication is disabled",
     }
diff --git a/api/routers/chat.py b/api/routers/chat.py
index 61e1468..76c4e9e 100644
--- a/api/routers/chat.py
+++ b/api/routers/chat.py
@@ -15,6 +15,7 @@ from open_notebook.graphs.chat import graph as chat_graph
 
 router = APIRouter()
 
+
 # Request/Response models
 class CreateSessionRequest(BaseModel):
     notebook_id: str = Field(..., description="Notebook ID to create session for")
@@ -134,7 +135,8 @@ async def create_session(request: CreateSessionRequest):
 
         # Create new session
         session = ChatSession(
-            title=request.title or f"Chat Session {asyncio.get_event_loop().time():.0f}",
+            title=request.title
+            or f"Chat Session {asyncio.get_event_loop().time():.0f}",
             model_override=request.model_override,
         )
         await session.save()
@@ -334,9 +336,7 @@ async def execute_chat(request: ExecuteChatRequest):
 
         # Get current state
         current_state = chat_graph.get_state(
-            config=RunnableConfig(
-                configurable={"thread_id": request.session_id}
-            )
+            config=RunnableConfig(configurable={"thread_id": request.session_id})
         )
 
         # Prepare state for execution
diff --git a/api/routers/commands.py b/api/routers/commands.py
index 264e0d3..8b2d41b 100644
--- a/api/routers/commands.py
+++ b/api/routers/commands.py
@@ -9,16 +9,21 @@ from api.command_service import CommandService
 
 router = APIRouter()
 
+
 class CommandExecutionRequest(BaseModel):
-    command: str = Field(..., description="Command function name (e.g., 'process_text')")
+    command: str = Field(
+        ..., description="Command function name (e.g., 'process_text')"
+    )
     app: str = Field(..., description="Application name (e.g., 'open_notebook')")
     input: Dict[str, Any] = Field(..., description="Arguments to pass to the command")
 
+
 class CommandJobResponse(BaseModel):
     job_id: str
     status: str
     message: str
 
+
 class CommandJobStatusResponse(BaseModel):
     job_id: str
     status: str
@@ -28,19 +33,20 @@ class CommandJobStatusResponse(BaseModel):
     updated: Optional[str] = None
     progress: Optional[Dict[str, Any]] = None
 
+
 @router.post("/commands/jobs", response_model=CommandJobResponse)
 async def execute_command(request: CommandExecutionRequest):
     """
     Submit a command for background processing.
     Returns immediately with job ID for status tracking.
-    
+
     Example request:
     {
         "command": "process_text",
-        "app": "open_notebook", 
-        "input": { 
-            "text": "Hello world", 
-            "operation": "uppercase" 
+        "app": "open_notebook",
+        "input": {
+            "text": "Hello world",
+            "operation": "uppercase"
         }
     }
     """
@@ -49,91 +55,91 @@ async def execute_command(request: CommandExecutionRequest):
         job_id = await CommandService.submit_command_job(
             module_name=request.app,  # This should be "open_notebook"
             command_name=request.command,
-            command_args=request.input
+            command_args=request.input,
         )
-        
+
         return CommandJobResponse(
             job_id=job_id,
             status="submitted",
-            message=f"Command '{request.command}' submitted successfully"
+            message=f"Command '{request.command}' submitted successfully",
         )
-        
+
     except Exception as e:
         logger.error(f"Error submitting command: {str(e)}")
         raise HTTPException(
-            status_code=500,
-            detail=f"Failed to submit command: {str(e)}"
+            status_code=500, detail="Failed to submit command"
         )
 
+
 @router.get("/commands/jobs/{job_id}", response_model=CommandJobStatusResponse)
 async def get_command_job_status(job_id: str):
     """Get the status of a specific command job"""
     try:
         status_data = await CommandService.get_command_status(job_id)
         return CommandJobStatusResponse(**status_data)
-        
+
     except Exception as e:
         logger.error(f"Error fetching job status: {str(e)}")
         raise HTTPException(
-            status_code=500,
-            detail=f"Failed to fetch job status: {str(e)}"
+            status_code=500, detail="Failed to fetch job status"
         )
 
+
 @router.get("/commands/jobs", response_model=List[Dict[str, Any]])
 async def list_command_jobs(
     command_filter: Optional[str] = Query(None, description="Filter by command name"),
     status_filter: Optional[str] = Query(None, description="Filter by status"),
-    limit: int = Query(50, description="Maximum number of jobs to return")
+    limit: int = Query(50, description="Maximum number of jobs to return"),
 ):
     """List command jobs with optional filtering"""
     try:
         jobs = await CommandService.list_command_jobs(
-            command_filter=command_filter,
-            status_filter=status_filter,
-            limit=limit
+            command_filter=command_filter, status_filter=status_filter, limit=limit
         )
         return jobs
-        
+
     except Exception as e:
         logger.error(f"Error listing command jobs: {str(e)}")
         raise HTTPException(
-            status_code=500,
-            detail=f"Failed to list command jobs: {str(e)}"
+            status_code=500, detail="Failed to list command jobs"
         )
 
+
 @router.delete("/commands/jobs/{job_id}")
 async def cancel_command_job(job_id: str):
     """Cancel a running command job"""
     try:
         success = await CommandService.cancel_command_job(job_id)
         return {"job_id": job_id, "cancelled": success}
-        
+
     except Exception as e:
         logger.error(f"Error cancelling command job: {str(e)}")
         raise HTTPException(
-            status_code=500,
-            detail=f"Failed to cancel command job: {str(e)}"
+            status_code=500, detail="Failed to cancel command job"
         )
 
+
 @router.get("/commands/registry/debug")
 async def debug_registry():
     """Debug endpoint to see what commands are registered"""
     try:
         # Get all registered commands
         all_items = registry.get_all_commands()
-        
+
         # Create JSON-serializable data
         command_items = []
         for item in all_items:
             try:
-                command_items.append({
-                    "app_id": item.app_id,
-                    "name": item.name,
-                    "full_id": f"{item.app_id}.{item.name}"
-                })
+                command_items.append(
+                    {
+                        "app_id": item.app_id,
+                        "name": item.name,
+                        "full_id": f"{item.app_id}.{item.name}",
+                    }
+                )
             except Exception as item_error:
                 logger.error(f"Error processing item: {item_error}")
-        
+
         # Get the basic command structure
         try:
             commands_dict: dict[str, list[str]] = {}
@@ -143,18 +149,18 @@ async def debug_registry():
                 commands_dict[item.app_id].append(item.name)
         except Exception:
             commands_dict = {}
-        
+
         return {
             "total_commands": len(all_items),
             "commands_by_app": commands_dict,
-            "command_items": command_items
+            "command_items": command_items,
         }
-        
+
     except Exception as e:
         logger.error(f"Error debugging registry: {str(e)}")
         return {
             "error": str(e),
             "total_commands": 0,
             "commands_by_app": {},
-            "command_items": []
-        }
\ No newline at end of file
+            "command_items": [],
+        }
diff --git a/api/routers/config.py b/api/routers/config.py
index 3a9e5d5..0f5424d 100644
--- a/api/routers/config.py
+++ b/api/routers/config.py
@@ -11,7 +11,7 @@ from loguru import logger
 from open_notebook.database.repository import repo_query
 from open_notebook.utils.version_utils import (
     compare_versions,
-    get_version_from_github,
+    get_version_from_github_async,
 )
 
 router = APIRouter()
@@ -40,7 +40,7 @@ def get_version() -> str:
         return "unknown"
 
 
-def get_latest_version_cached(current_version: str) -> tuple[Optional[str], bool]:
+async def get_latest_version_cached(current_version: str) -> tuple[Optional[str], bool]:
     """
     Check for the latest version from GitHub with caching.
 
@@ -66,12 +66,13 @@ def get_latest_version_cached(current_version: str) -> tuple[Optional[str], bool
         logger.info("Checking for latest version from GitHub...")
 
         # Fetch latest version from GitHub with 10-second timeout
-        latest_version = get_version_from_github(
-            "https://github.com/lfnovo/open-notebook",
-            "main"
+        latest_version = await get_version_from_github_async(
+            "https://github.com/lfnovo/open-notebook", "main"
         )
 
-        logger.info(f"Latest version from GitHub: {latest_version}, Current version: {current_version}")
+        logger.info(
+            f"Latest version from GitHub: {latest_version}, Current version: {current_version}"
+        )
 
         # Compare versions
         has_update = compare_versions(current_version, latest_version) < 0
@@ -107,10 +108,7 @@ async def check_database_health() -> dict:
     """
     try:
         # 2-second timeout for database health check
-        result = await asyncio.wait_for(
-            repo_query("RETURN 1"),
-            timeout=2.0
-        )
+        result = await asyncio.wait_for(repo_query("RETURN 1"), timeout=2.0)
         if result:
             return {"status": "online"}
         return {"status": "offline", "error": "Empty result"}
@@ -142,7 +140,7 @@ async def get_config(request: Request):
     has_update = False
 
     try:
-        latest_version, has_update = get_latest_version_cached(current_version)
+        latest_version, has_update = await get_latest_version_cached(current_version)
     except Exception as e:
         # Extra safety: ensure version check never breaks the config endpoint
         logger.error(f"Unexpected error during version check: {e}")
diff --git a/api/routers/context.py b/api/routers/context.py
index 70cd70f..92dd723 100644
--- a/api/routers/context.py
+++ b/api/routers/context.py
@@ -1,4 +1,3 @@
-
 from fastapi import APIRouter, HTTPException
 from loguru import logger
 
diff --git a/api/routers/embedding.py b/api/routers/embedding.py
index 40b70d9..63b9dd9 100644
--- a/api/routers/embedding.py
+++ b/api/routers/embedding.py
@@ -88,7 +88,11 @@ async def embed_content(embed_request: EmbedRequest):
                 message = "Note embedded successfully"
 
             return EmbedResponse(
-                success=True, message=message, item_id=item_id, item_type=item_type, command_id=command_id
+                success=True,
+                message=message,
+                item_id=item_id,
+                item_type=item_type,
+                command_id=command_id,
             )
 
     except HTTPException:
diff --git a/api/routers/embedding_rebuild.py b/api/routers/embedding_rebuild.py
index 8a0f9a1..3697891 100644
--- a/api/routers/embedding_rebuild.py
+++ b/api/routers/embedding_rebuild.py
@@ -173,10 +173,12 @@ async def get_rebuild_status(command_id: str):
             response.completed_at = str(status.updated)
 
         # Add error message if failed
-        if status.status == "failed" and status.result and isinstance(status.result, dict):
-            response.error_message = status.result.get(
-                "error_message", "Unknown error"
-            )
+        if (
+            status.status == "failed"
+            and status.result
+            and isinstance(status.result, dict)
+        ):
+            response.error_message = status.result.get("error_message", "Unknown error")
 
         return response
 
diff --git a/api/routers/episode_profiles.py b/api/routers/episode_profiles.py
index e35aa4e..da0baff 100644
--- a/api/routers/episode_profiles.py
+++ b/api/routers/episode_profiles.py
@@ -27,7 +27,7 @@ async def list_episode_profiles():
     """List all available episode profiles"""
     try:
         profiles = await EpisodeProfile.get_all(order_by="name asc")
-        
+
         return [
             EpisodeProfileResponse(
                 id=str(profile.id),
@@ -39,16 +39,15 @@ async def list_episode_profiles():
                 transcript_provider=profile.transcript_provider,
                 transcript_model=profile.transcript_model,
                 default_briefing=profile.default_briefing,
-                num_segments=profile.num_segments
+                num_segments=profile.num_segments,
             )
             for profile in profiles
         ]
-        
+
     except Exception as e:
         logger.error(f"Failed to fetch episode profiles: {e}")
         raise HTTPException(
-            status_code=500,
-            detail=f"Failed to fetch episode profiles: {str(e)}"
+            status_code=500, detail="Failed to fetch episode profiles"
         )
 
 
@@ -57,13 +56,12 @@ async def get_episode_profile(profile_name: str):
     """Get a specific episode profile by name"""
     try:
         profile = await EpisodeProfile.get_by_name(profile_name)
-        
+
         if not profile:
             raise HTTPException(
-                status_code=404,
-                detail=f"Episode profile '{profile_name}' not found"
+                status_code=404, detail=f"Episode profile '{profile_name}' not found"
             )
-        
+
         return EpisodeProfileResponse(
             id=str(profile.id),
             name=profile.name,
@@ -74,16 +72,15 @@ async def get_episode_profile(profile_name: str):
             transcript_provider=profile.transcript_provider,
             transcript_model=profile.transcript_model,
             default_briefing=profile.default_briefing,
-            num_segments=profile.num_segments
+            num_segments=profile.num_segments,
         )
-        
+
     except HTTPException:
         raise
     except Exception as e:
         logger.error(f"Failed to fetch episode profile '{profile_name}': {e}")
         raise HTTPException(
-            status_code=500,
-            detail=f"Failed to fetch episode profile: {str(e)}"
+            status_code=500, detail="Failed to fetch episode profile"
         )
 
 
@@ -93,7 +90,9 @@ class EpisodeProfileCreate(BaseModel):
     speaker_config: str = Field(..., description="Reference to speaker profile name")
     outline_provider: str = Field(..., description="AI provider for outline generation")
     outline_model: str = Field(..., description="AI model for outline generation")
-    transcript_provider: str = Field(..., description="AI provider for transcript generation")
+    transcript_provider: str = Field(
+        ..., description="AI provider for transcript generation"
+    )
     transcript_model: str = Field(..., description="AI model for transcript generation")
     default_briefing: str = Field(..., description="Default briefing template")
     num_segments: int = Field(default=5, description="Number of podcast segments")
@@ -112,11 +111,11 @@ async def create_episode_profile(profile_data: EpisodeProfileCreate):
             transcript_provider=profile_data.transcript_provider,
             transcript_model=profile_data.transcript_model,
             default_briefing=profile_data.default_briefing,
-            num_segments=profile_data.num_segments
+            num_segments=profile_data.num_segments,
         )
-        
+
         await profile.save()
-        
+
         return EpisodeProfileResponse(
             id=str(profile.id),
             name=profile.name,
@@ -127,14 +126,13 @@ async def create_episode_profile(profile_data: EpisodeProfileCreate):
             transcript_provider=profile.transcript_provider,
             transcript_model=profile.transcript_model,
             default_briefing=profile.default_briefing,
-            num_segments=profile.num_segments
+            num_segments=profile.num_segments,
         )
-        
+
     except Exception as e:
         logger.error(f"Failed to create episode profile: {e}")
         raise HTTPException(
-            status_code=500,
-            detail=f"Failed to create episode profile: {str(e)}"
+            status_code=500, detail="Failed to create episode profile"
         )
 
 
@@ -143,13 +141,12 @@ async def update_episode_profile(profile_id: str, profile_data: EpisodeProfileCr
     """Update an existing episode profile"""
     try:
         profile = await EpisodeProfile.get(profile_id)
-        
+
         if not profile:
             raise HTTPException(
-                status_code=404,
-                detail=f"Episode profile '{profile_id}' not found"
+                status_code=404, detail=f"Episode profile '{profile_id}' not found"
             )
-        
+
         # Update fields
         profile.name = profile_data.name
         profile.description = profile_data.description
@@ -160,9 +157,9 @@ async def update_episode_profile(profile_id: str, profile_data: EpisodeProfileCr
         profile.transcript_model = profile_data.transcript_model
         profile.default_briefing = profile_data.default_briefing
         profile.num_segments = profile_data.num_segments
-        
+
         await profile.save()
-        
+
         return EpisodeProfileResponse(
             id=str(profile.id),
             name=profile.name,
@@ -173,16 +170,15 @@ async def update_episode_profile(profile_id: str, profile_data: EpisodeProfileCr
             transcript_provider=profile.transcript_provider,
             transcript_model=profile.transcript_model,
             default_briefing=profile.default_briefing,
-            num_segments=profile.num_segments
+            num_segments=profile.num_segments,
         )
-        
+
     except HTTPException:
         raise
     except Exception as e:
         logger.error(f"Failed to update episode profile: {e}")
         raise HTTPException(
-            status_code=500,
-            detail=f"Failed to update episode profile: {str(e)}"
+            status_code=500, detail="Failed to update episode profile"
         )
 
 
@@ -191,39 +187,38 @@ async def delete_episode_profile(profile_id: str):
     """Delete an episode profile"""
     try:
         profile = await EpisodeProfile.get(profile_id)
-        
+
         if not profile:
             raise HTTPException(
-                status_code=404,
-                detail=f"Episode profile '{profile_id}' not found"
+                status_code=404, detail=f"Episode profile '{profile_id}' not found"
             )
-        
+
         await profile.delete()
-        
+
         return {"message": "Episode profile deleted successfully"}
-        
+
     except HTTPException:
         raise
     except Exception as e:
         logger.error(f"Failed to delete episode profile: {e}")
         raise HTTPException(
-            status_code=500,
-            detail=f"Failed to delete episode profile: {str(e)}"
+            status_code=500, detail="Failed to delete episode profile"
         )
 
 
-@router.post("/episode-profiles/{profile_id}/duplicate", response_model=EpisodeProfileResponse)
+@router.post(
+    "/episode-profiles/{profile_id}/duplicate", response_model=EpisodeProfileResponse
+)
 async def duplicate_episode_profile(profile_id: str):
     """Duplicate an episode profile"""
     try:
         original = await EpisodeProfile.get(profile_id)
-        
+
         if not original:
             raise HTTPException(
-                status_code=404,
-                detail=f"Episode profile '{profile_id}' not found"
+                status_code=404, detail=f"Episode profile '{profile_id}' not found"
             )
-        
+
         # Create duplicate with modified name
         duplicate = EpisodeProfile(
             name=f"{original.name} - Copy",
@@ -234,11 +229,11 @@ async def duplicate_episode_profile(profile_id: str):
             transcript_provider=original.transcript_provider,
             transcript_model=original.transcript_model,
             default_briefing=original.default_briefing,
-            num_segments=original.num_segments
+            num_segments=original.num_segments,
         )
-        
+
         await duplicate.save()
-        
+
         return EpisodeProfileResponse(
             id=str(duplicate.id),
             name=duplicate.name,
@@ -249,14 +244,13 @@ async def duplicate_episode_profile(profile_id: str):
             transcript_provider=duplicate.transcript_provider,
             transcript_model=duplicate.transcript_model,
             default_briefing=duplicate.default_briefing,
-            num_segments=duplicate.num_segments
+            num_segments=duplicate.num_segments,
         )
-        
+
     except HTTPException:
         raise
     except Exception as e:
         logger.error(f"Failed to duplicate episode profile: {e}")
         raise HTTPException(
-            status_code=500,
-            detail=f"Failed to duplicate episode profile: {str(e)}"
-        )
\ No newline at end of file
+            status_code=500, detail="Failed to duplicate episode profile"
+        )
diff --git a/api/routers/insights.py b/api/routers/insights.py
index b651e70..b9e2c71 100644
--- a/api/routers/insights.py
+++ b/api/routers/insights.py
@@ -1,4 +1,3 @@
-
 from fastapi import APIRouter, HTTPException
 from loguru import logger
 
@@ -16,10 +15,10 @@ async def get_insight(insight_id: str):
         insight = await SourceInsight.get(insight_id)
         if not insight:
             raise HTTPException(status_code=404, detail="Insight not found")
-        
+
         # Get source ID from the insight relationship
         source = await insight.get_source()
-        
+
         return SourceInsightResponse(
             id=insight.id or "",
             source_id=source.id or "",
@@ -32,7 +31,7 @@ async def get_insight(insight_id: str):
         raise
     except Exception as e:
         logger.error(f"Error fetching insight {insight_id}: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Error fetching insight: {str(e)}")
+        raise HTTPException(status_code=500, detail="Error fetching insight")
 
 
 @router.delete("/insights/{insight_id}")
@@ -42,15 +41,15 @@ async def delete_insight(insight_id: str):
         insight = await SourceInsight.get(insight_id)
         if not insight:
             raise HTTPException(status_code=404, detail="Insight not found")
-        
+
         await insight.delete()
-        
+
         return {"message": "Insight deleted successfully"}
     except HTTPException:
         raise
     except Exception as e:
         logger.error(f"Error deleting insight {insight_id}: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Error deleting insight: {str(e)}")
+        raise HTTPException(status_code=500, detail="Error deleting insight")
 
 
 @router.post("/insights/{insight_id}/save-as-note", response_model=NoteResponse)
@@ -60,10 +59,10 @@ async def save_insight_as_note(insight_id: str, request: SaveAsNoteRequest):
         insight = await SourceInsight.get(insight_id)
         if not insight:
             raise HTTPException(status_code=404, detail="Insight not found")
-        
+
         # Use the existing save_as_note method from the domain model
         note = await insight.save_as_note(request.notebook_id)
-        
+
         return NoteResponse(
             id=note.id or "",
             title=note.title,
@@ -78,4 +77,6 @@ async def save_insight_as_note(insight_id: str, request: SaveAsNoteRequest):
         raise HTTPException(status_code=400, detail=str(e))
     except Exception as e:
         logger.error(f"Error saving insight {insight_id} as note: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Error saving insight as note: {str(e)}")
\ No newline at end of file
+        raise HTTPException(
+            status_code=500, detail="Error saving insight as note"
+        )
diff --git a/api/routers/models.py b/api/routers/models.py
index 6574dac..3744bf9 100644
--- a/api/routers/models.py
+++ b/api/routers/models.py
@@ -61,7 +61,7 @@ def _check_azure_support(mode: str) -> bool:
 
 @router.get("/models", response_model=List[ModelResponse])
 async def get_models(
-    type: Optional[str] = Query(None, description="Filter by model type")
+    type: Optional[str] = Query(None, description="Filter by model type"),
 ):
     """Get all configured models with optional type filtering."""
     try:
@@ -69,7 +69,7 @@ async def get_models(
             models = await Model.get_models_by_type(type)
         else:
             models = await Model.get_all()
-        
+
         return [
             ModelResponse(
                 id=model.id,
@@ -95,19 +95,24 @@ async def create_model(model_data: ModelCreate):
         if model_data.type not in valid_types:
             raise HTTPException(
                 status_code=400,
-                detail=f"Invalid model type. Must be one of: {valid_types}"
+                detail=f"Invalid model type. Must be one of: {valid_types}",
             )
 
         # Check for duplicate model name under the same provider and type (case-insensitive)
         from open_notebook.database.repository import repo_query
+
         existing = await repo_query(
             "SELECT * FROM model WHERE string::lowercase(provider) = $provider AND string::lowercase(name) = $name AND string::lowercase(type) = $type LIMIT 1",
-            {"provider": model_data.provider.lower(), "name": model_data.name.lower(), "type": model_data.type.lower()}
+            {
+                "provider": model_data.provider.lower(),
+                "name": model_data.name.lower(),
+                "type": model_data.type.lower(),
+            },
         )
         if existing:
             raise HTTPException(
                 status_code=400,
-                detail=f"Model '{model_data.name}' already exists for provider '{model_data.provider}' with type '{model_data.type}'"
+                detail=f"Model '{model_data.name}' already exists for provider '{model_data.provider}' with type '{model_data.type}'",
             )
 
         new_model = Model(
@@ -141,9 +146,9 @@ async def delete_model(model_id: str):
         model = await Model.get(model_id)
         if not model:
             raise HTTPException(status_code=404, detail="Model not found")
-        
+
         await model.delete()
-        
+
         return {"message": "Model deleted successfully"}
     except HTTPException:
         raise
@@ -169,7 +174,9 @@ async def get_default_models():
         )
     except Exception as e:
         logger.error(f"Error fetching default models: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Error fetching default models: {str(e)}")
+        raise HTTPException(
+            status_code=500, detail=f"Error fetching default models: {str(e)}"
+        )
 
 
 @router.put("/models/defaults", response_model=DefaultModelsResponse)
@@ -177,23 +184,29 @@ async def update_default_models(defaults_data: DefaultModelsResponse):
     """Update default model assignments."""
     try:
         defaults = await DefaultModels.get_instance()
-        
+
         # Update only provided fields
         if defaults_data.default_chat_model is not None:
             defaults.default_chat_model = defaults_data.default_chat_model  # type: ignore[attr-defined]
         if defaults_data.default_transformation_model is not None:
-            defaults.default_transformation_model = defaults_data.default_transformation_model  # type: ignore[attr-defined]
+            defaults.default_transformation_model = (
+                defaults_data.default_transformation_model
+            )  # type: ignore[attr-defined]
         if defaults_data.large_context_model is not None:
             defaults.large_context_model = defaults_data.large_context_model  # type: ignore[attr-defined]
         if defaults_data.default_text_to_speech_model is not None:
-            defaults.default_text_to_speech_model = defaults_data.default_text_to_speech_model  # type: ignore[attr-defined]
+            defaults.default_text_to_speech_model = (
+                defaults_data.default_text_to_speech_model
+            )  # type: ignore[attr-defined]
         if defaults_data.default_speech_to_text_model is not None:
-            defaults.default_speech_to_text_model = defaults_data.default_speech_to_text_model  # type: ignore[attr-defined]
+            defaults.default_speech_to_text_model = (
+                defaults_data.default_speech_to_text_model
+            )  # type: ignore[attr-defined]
         if defaults_data.default_embedding_model is not None:
             defaults.default_embedding_model = defaults_data.default_embedding_model  # type: ignore[attr-defined]
         if defaults_data.default_tools_model is not None:
             defaults.default_tools_model = defaults_data.default_tools_model  # type: ignore[attr-defined]
-        
+
         await defaults.update()
 
         # No cache refresh needed - next access will fetch fresh data from DB
@@ -211,7 +224,9 @@ async def update_default_models(defaults_data: DefaultModelsResponse):
         raise
     except Exception as e:
         logger.error(f"Error updating default models: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Error updating default models: {str(e)}")
+        raise HTTPException(
+            status_code=500, detail=f"Error updating default models: {str(e)}"
+        )
 
 
 @router.get("/models/providers", response_model=ProviderAvailabilityResponse)
@@ -252,7 +267,7 @@ async def get_provider_availability():
                 or _check_openai_compatible_support("TTS")
             ),
         }
-        
+
         available_providers = [k for k, v in provider_status.items() if v]
         unavailable_providers = [k for k, v in provider_status.items() if not v]
 
@@ -275,13 +290,19 @@ async def get_provider_availability():
             # Special handling for openai-compatible to check mode-specific availability
             if provider == "openai-compatible":
                 for model_type, mode in mode_mapping.items():
-                    if model_type in esperanto_available and provider in esperanto_available[model_type]:
+                    if (
+                        model_type in esperanto_available
+                        and provider in esperanto_available[model_type]
+                    ):
                         if _check_openai_compatible_support(mode):
                             supported_types[provider].append(model_type)
             # Special handling for azure to check mode-specific availability
             elif provider == "azure":
                 for model_type, mode in mode_mapping.items():
-                    if model_type in esperanto_available and provider in esperanto_available[model_type]:
+                    if (
+                        model_type in esperanto_available
+                        and provider in esperanto_available[model_type]
+                    ):
                         if _check_azure_support(mode):
                             supported_types[provider].append(model_type)
             else:
@@ -289,12 +310,14 @@ async def get_provider_availability():
                 for model_type, providers in esperanto_available.items():
                     if provider in providers:
                         supported_types[provider].append(model_type)
-        
+
         return ProviderAvailabilityResponse(
             available=available_providers,
             unavailable=unavailable_providers,
-            supported_types=supported_types
+            supported_types=supported_types,
         )
     except Exception as e:
         logger.error(f"Error checking provider availability: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Error checking provider availability: {str(e)}")
\ No newline at end of file
+        raise HTTPException(
+            status_code=500, detail=f"Error checking provider availability: {str(e)}"
+        )
diff --git a/api/routers/notes.py b/api/routers/notes.py
index 1eed228..d07cd34 100644
--- a/api/routers/notes.py
+++ b/api/routers/notes.py
@@ -12,13 +12,14 @@ router = APIRouter()
 
 @router.get("/notes", response_model=List[NoteResponse])
 async def get_notes(
-    notebook_id: Optional[str] = Query(None, description="Filter by notebook ID")
+    notebook_id: Optional[str] = Query(None, description="Filter by notebook ID"),
 ):
     """Get all notes with optional notebook filtering."""
     try:
         if notebook_id:
             # Get notes for a specific notebook
             from open_notebook.domain.notebook import Notebook
+
             notebook = await Notebook.get(notebook_id)
             if not notebook:
                 raise HTTPException(status_code=404, detail="Notebook not found")
@@ -26,7 +27,7 @@ async def get_notes(
         else:
             # Get all notes
             notes = await Note.get_all(order_by="updated desc")
-        
+
         return [
             NoteResponse(
                 id=note.id or "",
@@ -53,21 +54,24 @@ async def create_note(note_data: NoteCreate):
         title = note_data.title
         if not title and note_data.note_type == "ai" and note_data.content:
             from open_notebook.graphs.prompt import graph as prompt_graph
+
             prompt = "Based on the Note below, please provide a Title for this content, with max 15 words"
             result = await prompt_graph.ainvoke(
                 {  # type: ignore[arg-type]
                     "input_text": note_data.content,
-                    "prompt": prompt
+                    "prompt": prompt,
                 }
             )
             title = result.get("output", "Untitled Note")
-        
+
         # Validate note_type
         note_type: Optional[Literal["human", "ai"]] = None
         if note_data.note_type in ("human", "ai"):
             note_type = note_data.note_type  # type: ignore[assignment]
         elif note_data.note_type is not None:
-            raise HTTPException(status_code=400, detail="note_type must be 'human' or 'ai'")
+            raise HTTPException(
+                status_code=400, detail="note_type must be 'human' or 'ai'"
+            )
 
         new_note = Note(
             title=title,
@@ -75,15 +79,16 @@ async def create_note(note_data: NoteCreate):
             note_type=note_type,
         )
         await new_note.save()
-        
+
         # Add to notebook if specified
         if note_data.notebook_id:
             from open_notebook.domain.notebook import Notebook
+
             notebook = await Notebook.get(note_data.notebook_id)
             if not notebook:
                 raise HTTPException(status_code=404, detail="Notebook not found")
             await new_note.add_to_notebook(note_data.notebook_id)
-        
+
         return NoteResponse(
             id=new_note.id or "",
             title=new_note.title,
@@ -108,7 +113,7 @@ async def get_note(note_id: str):
         note = await Note.get(note_id)
         if not note:
             raise HTTPException(status_code=404, detail="Note not found")
-        
+
         return NoteResponse(
             id=note.id or "",
             title=note.title,
@@ -131,7 +136,7 @@ async def update_note(note_id: str, note_update: NoteUpdate):
         note = await Note.get(note_id)
         if not note:
             raise HTTPException(status_code=404, detail="Note not found")
-        
+
         # Update only provided fields
         if note_update.title is not None:
             note.title = note_update.title
@@ -141,7 +146,9 @@ async def update_note(note_id: str, note_update: NoteUpdate):
             if note_update.note_type in ("human", "ai"):
                 note.note_type = note_update.note_type  # type: ignore[assignment]
             else:
-                raise HTTPException(status_code=400, detail="note_type must be 'human' or 'ai'")
+                raise HTTPException(
+                    status_code=400, detail="note_type must be 'human' or 'ai'"
+                )
 
         await note.save()
 
@@ -169,12 +176,12 @@ async def delete_note(note_id: str):
         note = await Note.get(note_id)
         if not note:
             raise HTTPException(status_code=404, detail="Note not found")
-        
+
         await note.delete()
-        
+
         return {"message": "Note deleted successfully"}
     except HTTPException:
         raise
     except Exception as e:
         logger.error(f"Error deleting note {note_id}: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Error deleting note: {str(e)}")
\ No newline at end of file
+        raise HTTPException(status_code=500, detail=f"Error deleting note: {str(e)}")
diff --git a/api/routers/podcasts.py b/api/routers/podcasts.py
index 9f833bc..b716808 100644
--- a/api/routers/podcasts.py
+++ b/api/routers/podcasts.py
@@ -64,7 +64,7 @@ async def generate_podcast(request: PodcastGenerationRequest):
     except Exception as e:
         logger.error(f"Error generating podcast: {str(e)}")
         raise HTTPException(
-            status_code=500, detail=f"Failed to generate podcast: {str(e)}"
+            status_code=500, detail="Failed to generate podcast"
         )
 
 
@@ -78,7 +78,7 @@ async def get_podcast_job_status(job_id: str):
     except Exception as e:
         logger.error(f"Error fetching podcast job status: {str(e)}")
         raise HTTPException(
-            status_code=500, detail=f"Failed to fetch job status: {str(e)}"
+            status_code=500, detail="Failed to fetch job status"
         )
 
 
@@ -93,7 +93,7 @@ async def list_podcast_episodes():
             # Skip incomplete episodes without command or audio
             if not episode.command and not episode.audio_file:
                 continue
-            
+
             # Get job status if available
             job_status = None
             if episode.command:
@@ -132,7 +132,7 @@ async def list_podcast_episodes():
     except Exception as e:
         logger.error(f"Error listing podcast episodes: {str(e)}")
         raise HTTPException(
-            status_code=500, detail=f"Failed to list podcast episodes: {str(e)}"
+            status_code=500, detail="Failed to list podcast episodes"
         )
 
 
@@ -175,7 +175,7 @@ async def get_podcast_episode(episode_id: str):
 
     except Exception as e:
         logger.error(f"Error fetching podcast episode: {str(e)}")
-        raise HTTPException(status_code=404, detail=f"Episode not found: {str(e)}")
+        raise HTTPException(status_code=404, detail="Episode not found")
 
 
 @router.get("/podcasts/episodes/{episode_id}/audio")
@@ -187,7 +187,7 @@ async def stream_podcast_episode_audio(episode_id: str):
         raise
     except Exception as e:
         logger.error(f"Error fetching podcast episode for audio: {str(e)}")
-        raise HTTPException(status_code=404, detail=f"Episode not found: {str(e)}")
+        raise HTTPException(status_code=404, detail="Episode not found")
 
     if not episode.audio_file:
         raise HTTPException(status_code=404, detail="Episode has no audio file")
@@ -209,7 +209,7 @@ async def delete_podcast_episode(episode_id: str):
     try:
         # Get the episode first to check if it exists and get the audio file path
         episode = await PodcastService.get_episode(episode_id)
-        
+
         # Delete the physical audio file if it exists
         if episode.audio_file:
             audio_path = _resolve_audio_path(episode.audio_file)
@@ -219,13 +219,15 @@ async def delete_podcast_episode(episode_id: str):
                     logger.info(f"Deleted audio file: {audio_path}")
                 except Exception as e:
                     logger.warning(f"Failed to delete audio file {audio_path}: {e}")
-        
+
         # Delete the episode from the database
         await episode.delete()
-        
+
         logger.info(f"Deleted podcast episode: {episode_id}")
         return {"message": "Episode deleted successfully", "episode_id": episode_id}
-        
+
     except Exception as e:
         logger.error(f"Error deleting podcast episode: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Failed to delete episode: {str(e)}")
+        raise HTTPException(
+            status_code=500, detail="Failed to delete episode"
+        )
diff --git a/api/routers/settings.py b/api/routers/settings.py
index c5eabeb..5e99261 100644
--- a/api/routers/settings.py
+++ b/api/routers/settings.py
@@ -23,7 +23,9 @@ async def get_settings():
         )
     except Exception as e:
         logger.error(f"Error fetching settings: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Error fetching settings: {str(e)}")
+        raise HTTPException(
+            status_code=500, detail="Error fetching settings"
+        )
 
 
 @router.put("/settings", response_model=SettingsResponse)
@@ -36,30 +38,35 @@ async def update_settings(settings_update: SettingsUpdate):
         if settings_update.default_content_processing_engine_doc is not None:
             # Cast to proper literal type
             from typing import Literal, cast
+
             settings.default_content_processing_engine_doc = cast(
                 Literal["auto", "docling", "simple"],
-                settings_update.default_content_processing_engine_doc
+                settings_update.default_content_processing_engine_doc,
             )
         if settings_update.default_content_processing_engine_url is not None:
             from typing import Literal, cast
+
             settings.default_content_processing_engine_url = cast(
                 Literal["auto", "firecrawl", "jina", "simple"],
-                settings_update.default_content_processing_engine_url
+                settings_update.default_content_processing_engine_url,
             )
         if settings_update.default_embedding_option is not None:
             from typing import Literal, cast
+
             settings.default_embedding_option = cast(
                 Literal["ask", "always", "never"],
-                settings_update.default_embedding_option
+                settings_update.default_embedding_option,
             )
         if settings_update.auto_delete_files is not None:
             from typing import Literal, cast
+
             settings.auto_delete_files = cast(
-                Literal["yes", "no"],
-                settings_update.auto_delete_files
+                Literal["yes", "no"], settings_update.auto_delete_files
             )
         if settings_update.youtube_preferred_languages is not None:
-            settings.youtube_preferred_languages = settings_update.youtube_preferred_languages
+            settings.youtube_preferred_languages = (
+                settings_update.youtube_preferred_languages
+            )
 
         await settings.update()
 
@@ -76,4 +83,6 @@ async def update_settings(settings_update: SettingsUpdate):
         raise HTTPException(status_code=400, detail=str(e))
     except Exception as e:
         logger.error(f"Error updating settings: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Error updating settings: {str(e)}")
\ No newline at end of file
+        raise HTTPException(
+            status_code=500, detail="Error updating settings"
+        )
diff --git a/api/routers/source_chat.py b/api/routers/source_chat.py
index 38d31d2..ddda4e1 100644
--- a/api/routers/source_chat.py
+++ b/api/routers/source_chat.py
@@ -18,15 +18,22 @@ from open_notebook.graphs.source_chat import source_chat_graph as source_chat_gr
 
 router = APIRouter()
 
+
 # Request/Response models
 class CreateSourceChatSessionRequest(BaseModel):
     source_id: str = Field(..., description="Source ID to create chat session for")
     title: Optional[str] = Field(None, description="Optional session title")
-    model_override: Optional[str] = Field(None, description="Optional model override for this session")
+    model_override: Optional[str] = Field(
+        None, description="Optional model override for this session"
+    )
+
 
 class UpdateSourceChatSessionRequest(BaseModel):
     title: Optional[str] = Field(None, description="New session title")
-    model_override: Optional[str] = Field(None, description="Model override for this session")
+    model_override: Optional[str] = Field(
+        None, description="Model override for this session"
+    )
+
 
 class ChatMessage(BaseModel):
     id: str = Field(..., description="Message ID")
@@ -34,56 +41,81 @@ class ChatMessage(BaseModel):
     content: str = Field(..., description="Message content")
     timestamp: Optional[str] = Field(None, description="Message timestamp")
 
+
 class ContextIndicator(BaseModel):
-    sources: List[str] = Field(default_factory=list, description="Source IDs used in context")
-    insights: List[str] = Field(default_factory=list, description="Insight IDs used in context")
-    notes: List[str] = Field(default_factory=list, description="Note IDs used in context")
+    sources: List[str] = Field(
+        default_factory=list, description="Source IDs used in context"
+    )
+    insights: List[str] = Field(
+        default_factory=list, description="Insight IDs used in context"
+    )
+    notes: List[str] = Field(
+        default_factory=list, description="Note IDs used in context"
+    )
+
 
 class SourceChatSessionResponse(BaseModel):
     id: str = Field(..., description="Session ID")
     title: str = Field(..., description="Session title")
     source_id: str = Field(..., description="Source ID")
-    model_override: Optional[str] = Field(None, description="Model override for this session")
+    model_override: Optional[str] = Field(
+        None, description="Model override for this session"
+    )
     created: str = Field(..., description="Creation timestamp")
     updated: str = Field(..., description="Last update timestamp")
-    message_count: Optional[int] = Field(None, description="Number of messages in session")
+    message_count: Optional[int] = Field(
+        None, description="Number of messages in session"
+    )
+
 
 class SourceChatSessionWithMessagesResponse(SourceChatSessionResponse):
-    messages: List[ChatMessage] = Field(default_factory=list, description="Session messages")
-    context_indicators: Optional[ContextIndicator] = Field(None, description="Context indicators from last response")
+    messages: List[ChatMessage] = Field(
+        default_factory=list, description="Session messages"
+    )
+    context_indicators: Optional[ContextIndicator] = Field(
+        None, description="Context indicators from last response"
+    )
+
 
 class SendMessageRequest(BaseModel):
     message: str = Field(..., description="User message content")
-    model_override: Optional[str] = Field(None, description="Optional model override for this message")
+    model_override: Optional[str] = Field(
+        None, description="Optional model override for this message"
+    )
+
 
 class SuccessResponse(BaseModel):
     success: bool = Field(True, description="Operation success status")
     message: str = Field(..., description="Success message")
 
 
-@router.post("/sources/{source_id}/chat/sessions", response_model=SourceChatSessionResponse)
+@router.post(
+    "/sources/{source_id}/chat/sessions", response_model=SourceChatSessionResponse
+)
 async def create_source_chat_session(
     request: CreateSourceChatSessionRequest,
-    source_id: str = Path(..., description="Source ID")
+    source_id: str = Path(..., description="Source ID"),
 ):
     """Create a new chat session for a source."""
     try:
         # Verify source exists
-        full_source_id = source_id if source_id.startswith("source:") else f"source:{source_id}"
+        full_source_id = (
+            source_id if source_id.startswith("source:") else f"source:{source_id}"
+        )
         source = await Source.get(full_source_id)
         if not source:
             raise HTTPException(status_code=404, detail="Source not found")
-        
+
         # Create new session with model_override support
         session = ChatSession(
             title=request.title or f"Source Chat {asyncio.get_event_loop().time():.0f}",
-            model_override=request.model_override
+            model_override=request.model_override,
         )
         await session.save()
-        
+
         # Relate session to source using "refers_to" relation
         await session.relate("refers_to", full_source_id)
-        
+
         return SourceChatSessionResponse(
             id=session.id or "",
             title=session.title or "Untitled Session",
@@ -91,33 +123,37 @@ async def create_source_chat_session(
             model_override=session.model_override,
             created=str(session.created),
             updated=str(session.updated),
-            message_count=0
+            message_count=0,
         )
     except NotFoundError:
         raise HTTPException(status_code=404, detail="Source not found")
     except Exception as e:
         logger.error(f"Error creating source chat session: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Error creating source chat session: {str(e)}")
+        raise HTTPException(
+            status_code=500, detail=f"Error creating source chat session: {str(e)}"
+        )
 
 
-@router.get("/sources/{source_id}/chat/sessions", response_model=List[SourceChatSessionResponse])
-async def get_source_chat_sessions(
-    source_id: str = Path(..., description="Source ID")
-):
+@router.get(
+    "/sources/{source_id}/chat/sessions", response_model=List[SourceChatSessionResponse]
+)
+async def get_source_chat_sessions(source_id: str = Path(..., description="Source ID")):
     """Get all chat sessions for a source."""
     try:
         # Verify source exists
-        full_source_id = source_id if source_id.startswith("source:") else f"source:{source_id}"
+        full_source_id = (
+            source_id if source_id.startswith("source:") else f"source:{source_id}"
+        )
         source = await Source.get(full_source_id)
         if not source:
             raise HTTPException(status_code=404, detail="Source not found")
-        
+
         # Get sessions that refer to this source - first get relations, then sessions
         relations = await repo_query(
             "SELECT in FROM refers_to WHERE out = $source_id",
-            {"source_id": ensure_record_id(full_source_id)}
+            {"source_id": ensure_record_id(full_source_id)},
         )
-        
+
         sessions = []
         for relation in relations:
             session_id = relation.get("in")
@@ -125,16 +161,18 @@ async def get_source_chat_sessions(
                 session_result = await repo_query(f"SELECT * FROM {session_id}")
                 if session_result and len(session_result) > 0:
                     session_data = session_result[0]
-                    sessions.append(SourceChatSessionResponse(
-                        id=session_data.get("id") or "",
-                        title=session_data.get("title") or "Untitled Session",
-                        source_id=source_id,
-                        model_override=session_data.get("model_override"),
-                        created=str(session_data.get("created")),
-                        updated=str(session_data.get("updated")),
-                        message_count=0  # TODO: Add message count if needed
-                    ))
-        
+                    sessions.append(
+                        SourceChatSessionResponse(
+                            id=session_data.get("id") or "",
+                            title=session_data.get("title") or "Untitled Session",
+                            source_id=source_id,
+                            model_override=session_data.get("model_override"),
+                            created=str(session_data.get("created")),
+                            updated=str(session_data.get("updated")),
+                            message_count=0,  # TODO: Add message count if needed
+                        )
+                    )
+
         # Sort sessions by created date (newest first)
         sessions.sort(key=lambda x: x.created, reverse=True)
         return sessions
@@ -142,183 +180,232 @@ async def get_source_chat_sessions(
         raise HTTPException(status_code=404, detail="Source not found")
     except Exception as e:
         logger.error(f"Error fetching source chat sessions: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Error fetching source chat sessions: {str(e)}")
+        raise HTTPException(
+            status_code=500, detail=f"Error fetching source chat sessions: {str(e)}"
+        )
 
 
-@router.get("/sources/{source_id}/chat/sessions/{session_id}", response_model=SourceChatSessionWithMessagesResponse)
+@router.get(
+    "/sources/{source_id}/chat/sessions/{session_id}",
+    response_model=SourceChatSessionWithMessagesResponse,
+)
 async def get_source_chat_session(
     source_id: str = Path(..., description="Source ID"),
-    session_id: str = Path(..., description="Session ID")
+    session_id: str = Path(..., description="Session ID"),
 ):
     """Get a specific source chat session with its messages."""
     try:
         # Verify source exists
-        full_source_id = source_id if source_id.startswith("source:") else f"source:{source_id}"
+        full_source_id = (
+            source_id if source_id.startswith("source:") else f"source:{source_id}"
+        )
         source = await Source.get(full_source_id)
         if not source:
             raise HTTPException(status_code=404, detail="Source not found")
-        
+
         # Get session
-        full_session_id = session_id if session_id.startswith("chat_session:") else f"chat_session:{session_id}"
+        full_session_id = (
+            session_id
+            if session_id.startswith("chat_session:")
+            else f"chat_session:{session_id}"
+        )
         session = await ChatSession.get(full_session_id)
         if not session:
             raise HTTPException(status_code=404, detail="Session not found")
-        
+
         # Verify session is related to this source
         relation_query = await repo_query(
             "SELECT * FROM refers_to WHERE in = $session_id AND out = $source_id",
-            {"session_id": ensure_record_id(full_session_id), "source_id": ensure_record_id(full_source_id)}
+            {
+                "session_id": ensure_record_id(full_session_id),
+                "source_id": ensure_record_id(full_source_id),
+            },
         )
-        
+
         if not relation_query:
-            raise HTTPException(status_code=404, detail="Session not found for this source")
-        
+            raise HTTPException(
+                status_code=404, detail="Session not found for this source"
+            )
+
         # Get session state from LangGraph to retrieve messages
         thread_state = source_chat_graph.get_state(
             config=RunnableConfig(configurable={"thread_id": session_id})
         )
-        
+
         # Extract messages from state
         messages: list[ChatMessage] = []
         context_indicators = None
-        
+
         if thread_state and thread_state.values:
             # Extract messages
             if "messages" in thread_state.values:
                 for msg in thread_state.values["messages"]:
-                    messages.append(ChatMessage(
-                        id=getattr(msg, 'id', f"msg_{len(messages)}"),
-                        type=msg.type if hasattr(msg, 'type') else 'unknown',
-                        content=msg.content if hasattr(msg, 'content') else str(msg),
-                        timestamp=None  # LangChain messages don't have timestamps by default
-                    ))
-            
+                    messages.append(
+                        ChatMessage(
+                            id=getattr(msg, "id", f"msg_{len(messages)}"),
+                            type=msg.type if hasattr(msg, "type") else "unknown",
+                            content=msg.content
+                            if hasattr(msg, "content")
+                            else str(msg),
+                            timestamp=None,  # LangChain messages don't have timestamps by default
+                        )
+                    )
+
             # Extract context indicators from the last state
             if "context_indicators" in thread_state.values:
                 context_data = thread_state.values["context_indicators"]
                 context_indicators = ContextIndicator(
                     sources=context_data.get("sources", []),
                     insights=context_data.get("insights", []),
-                    notes=context_data.get("notes", [])
+                    notes=context_data.get("notes", []),
                 )
-        
+
         return SourceChatSessionWithMessagesResponse(
             id=session.id or "",
             title=session.title or "Untitled Session",
             source_id=source_id,
-            model_override=getattr(session, 'model_override', None),
+            model_override=getattr(session, "model_override", None),
             created=str(session.created),
             updated=str(session.updated),
             message_count=len(messages),
             messages=messages,
-            context_indicators=context_indicators
+            context_indicators=context_indicators,
         )
     except NotFoundError:
         raise HTTPException(status_code=404, detail="Source or session not found")
     except Exception as e:
         logger.error(f"Error fetching source chat session: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Error fetching source chat session: {str(e)}")
+        raise HTTPException(
+            status_code=500, detail=f"Error fetching source chat session: {str(e)}"
+        )
 
 
-@router.put("/sources/{source_id}/chat/sessions/{session_id}", response_model=SourceChatSessionResponse)
+@router.put(
+    "/sources/{source_id}/chat/sessions/{session_id}",
+    response_model=SourceChatSessionResponse,
+)
 async def update_source_chat_session(
     request: UpdateSourceChatSessionRequest,
     source_id: str = Path(..., description="Source ID"),
-    session_id: str = Path(..., description="Session ID")
+    session_id: str = Path(..., description="Session ID"),
 ):
     """Update source chat session title and/or model override."""
     try:
         # Verify source exists
-        full_source_id = source_id if source_id.startswith("source:") else f"source:{source_id}"
+        full_source_id = (
+            source_id if source_id.startswith("source:") else f"source:{source_id}"
+        )
         source = await Source.get(full_source_id)
         if not source:
             raise HTTPException(status_code=404, detail="Source not found")
-        
+
         # Get session
-        full_session_id = session_id if session_id.startswith("chat_session:") else f"chat_session:{session_id}"
+        full_session_id = (
+            session_id
+            if session_id.startswith("chat_session:")
+            else f"chat_session:{session_id}"
+        )
         session = await ChatSession.get(full_session_id)
         if not session:
             raise HTTPException(status_code=404, detail="Session not found")
-        
+
         # Verify session is related to this source
         relation_query = await repo_query(
             "SELECT * FROM refers_to WHERE in = $session_id AND out = $source_id",
-            {"session_id": ensure_record_id(full_session_id), "source_id": ensure_record_id(full_source_id)}
+            {
+                "session_id": ensure_record_id(full_session_id),
+                "source_id": ensure_record_id(full_source_id),
+            },
         )
-        
+
         if not relation_query:
-            raise HTTPException(status_code=404, detail="Session not found for this source")
-        
+            raise HTTPException(
+                status_code=404, detail="Session not found for this source"
+            )
+
         # Update session fields
         if request.title is not None:
             session.title = request.title
         if request.model_override is not None:
             session.model_override = request.model_override
-        
+
         await session.save()
-        
+
         return SourceChatSessionResponse(
             id=session.id or "",
             title=session.title or "Untitled Session",
             source_id=source_id,
-            model_override=getattr(session, 'model_override', None),
+            model_override=getattr(session, "model_override", None),
             created=str(session.created),
             updated=str(session.updated),
-            message_count=0
+            message_count=0,
         )
     except NotFoundError:
         raise HTTPException(status_code=404, detail="Source or session not found")
     except Exception as e:
         logger.error(f"Error updating source chat session: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Error updating source chat session: {str(e)}")
+        raise HTTPException(
+            status_code=500, detail=f"Error updating source chat session: {str(e)}"
+        )
 
 
-@router.delete("/sources/{source_id}/chat/sessions/{session_id}", response_model=SuccessResponse)
+@router.delete(
+    "/sources/{source_id}/chat/sessions/{session_id}", response_model=SuccessResponse
+)
 async def delete_source_chat_session(
     source_id: str = Path(..., description="Source ID"),
-    session_id: str = Path(..., description="Session ID")
+    session_id: str = Path(..., description="Session ID"),
 ):
     """Delete a source chat session."""
     try:
         # Verify source exists
-        full_source_id = source_id if source_id.startswith("source:") else f"source:{source_id}"
+        full_source_id = (
+            source_id if source_id.startswith("source:") else f"source:{source_id}"
+        )
         source = await Source.get(full_source_id)
         if not source:
             raise HTTPException(status_code=404, detail="Source not found")
-        
+
         # Get session
-        full_session_id = session_id if session_id.startswith("chat_session:") else f"chat_session:{session_id}"
+        full_session_id = (
+            session_id
+            if session_id.startswith("chat_session:")
+            else f"chat_session:{session_id}"
+        )
         session = await ChatSession.get(full_session_id)
         if not session:
             raise HTTPException(status_code=404, detail="Session not found")
-        
+
         # Verify session is related to this source
         relation_query = await repo_query(
             "SELECT * FROM refers_to WHERE in = $session_id AND out = $source_id",
-            {"session_id": ensure_record_id(full_session_id), "source_id": ensure_record_id(full_source_id)}
+            {
+                "session_id": ensure_record_id(full_session_id),
+                "source_id": ensure_record_id(full_source_id),
+            },
         )
-        
+
         if not relation_query:
-            raise HTTPException(status_code=404, detail="Session not found for this source")
-        
+            raise HTTPException(
+                status_code=404, detail="Session not found for this source"
+            )
+
         await session.delete()
-        
+
         return SuccessResponse(
-            success=True,
-            message="Source chat session deleted successfully"
+            success=True, message="Source chat session deleted successfully"
         )
     except NotFoundError:
         raise HTTPException(status_code=404, detail="Source or session not found")
     except Exception as e:
         logger.error(f"Error deleting source chat session: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Error deleting source chat session: {str(e)}")
+        raise HTTPException(
+            status_code=500, detail=f"Error deleting source chat session: {str(e)}"
+        )
 
 
 async def stream_source_chat_response(
-    session_id: str,
-    source_id: str,
-    message: str,
-    model_override: Optional[str] = None
+    session_id: str, source_id: str, message: str, model_override: Optional[str] = None
 ) -> AsyncGenerator[str, None]:
     """Stream the source chat response as Server-Sent Events."""
     try:
@@ -326,59 +413,52 @@ async def stream_source_chat_response(
         current_state = source_chat_graph.get_state(
             config=RunnableConfig(configurable={"thread_id": session_id})
         )
-        
+
         # Prepare state for execution
         state_values = current_state.values if current_state else {}
         state_values["messages"] = state_values.get("messages", [])
         state_values["source_id"] = source_id
         state_values["model_override"] = model_override
-        
+
         # Add user message to state
         user_message = HumanMessage(content=message)
         state_values["messages"].append(user_message)
-        
+
         # Send user message event
-        user_event = {
-            "type": "user_message",
-            "content": message,
-            "timestamp": None
-        }
+        user_event = {"type": "user_message", "content": message, "timestamp": None}
         yield f"data: {json.dumps(user_event)}\n\n"
-        
+
         # Execute source chat graph synchronously (like notebook chat does)
         result = source_chat_graph.invoke(
             input=state_values,  # type: ignore[arg-type]
             config=RunnableConfig(
-                configurable={
-                    "thread_id": session_id,
-                    "model_id": model_override
-                }
-            )
+                configurable={"thread_id": session_id, "model_id": model_override}
+            ),
         )
-        
+
         # Stream the complete AI response
         if "messages" in result:
             for msg in result["messages"]:
-                if hasattr(msg, 'type') and msg.type == 'ai':
+                if hasattr(msg, "type") and msg.type == "ai":
                     ai_event = {
-                        "type": "ai_message", 
-                        "content": msg.content if hasattr(msg, 'content') else str(msg),
-                        "timestamp": None
+                        "type": "ai_message",
+                        "content": msg.content if hasattr(msg, "content") else str(msg),
+                        "timestamp": None,
                     }
                     yield f"data: {json.dumps(ai_event)}\n\n"
-        
+
         # Stream context indicators
         if "context_indicators" in result:
             context_event = {
                 "type": "context_indicators",
-                "data": result["context_indicators"]
+                "data": result["context_indicators"],
             }
             yield f"data: {json.dumps(context_event)}\n\n"
-        
+
         # Send completion signal
         completion_event = {"type": "complete"}
         yield f"data: {json.dumps(completion_event)}\n\n"
-        
+
     except Exception as e:
         logger.error(f"Error in source chat streaming: {str(e)}")
         error_event = {"type": "error", "message": str(e)}
@@ -389,58 +469,71 @@ async def stream_source_chat_response(
 async def send_message_to_source_chat(
     request: SendMessageRequest,
     source_id: str = Path(..., description="Source ID"),
-    session_id: str = Path(..., description="Session ID")
+    session_id: str = Path(..., description="Session ID"),
 ):
     """Send a message to source chat session with SSE streaming response."""
     try:
         # Verify source exists
-        full_source_id = source_id if source_id.startswith("source:") else f"source:{source_id}"
+        full_source_id = (
+            source_id if source_id.startswith("source:") else f"source:{source_id}"
+        )
         source = await Source.get(full_source_id)
         if not source:
             raise HTTPException(status_code=404, detail="Source not found")
-        
+
         # Verify session exists and is related to source
-        full_session_id = session_id if session_id.startswith("chat_session:") else f"chat_session:{session_id}"
+        full_session_id = (
+            session_id
+            if session_id.startswith("chat_session:")
+            else f"chat_session:{session_id}"
+        )
         session = await ChatSession.get(full_session_id)
         if not session:
             raise HTTPException(status_code=404, detail="Session not found")
-        
+
         # Verify session is related to this source
         relation_query = await repo_query(
             "SELECT * FROM refers_to WHERE in = $session_id AND out = $source_id",
-            {"session_id": ensure_record_id(full_session_id), "source_id": ensure_record_id(full_source_id)}
+            {
+                "session_id": ensure_record_id(full_session_id),
+                "source_id": ensure_record_id(full_source_id),
+            },
         )
-        
+
         if not relation_query:
-            raise HTTPException(status_code=404, detail="Session not found for this source")
-        
+            raise HTTPException(
+                status_code=404, detail="Session not found for this source"
+            )
+
         if not request.message:
             raise HTTPException(status_code=400, detail="Message content is required")
-        
+
         # Determine model override (request override takes precedence over session override)
-        model_override = request.model_override or getattr(session, 'model_override', None)
-        
+        model_override = request.model_override or getattr(
+            session, "model_override", None
+        )
+
         # Update session timestamp
         await session.save()
-        
+
         # Return streaming response
         return StreamingResponse(
             stream_source_chat_response(
                 session_id=session_id,
                 source_id=full_source_id,
                 message=request.message,
-                model_override=model_override
+                model_override=model_override,
             ),
             media_type="text/plain",
             headers={
                 "Cache-Control": "no-cache",
                 "Connection": "keep-alive",
-                "Content-Type": "text/plain; charset=utf-8"
-            }
+                "Content-Type": "text/plain; charset=utf-8",
+            },
         )
-        
+
     except HTTPException:
         raise
     except Exception as e:
         logger.error(f"Error sending message to source chat: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Error sending message: {str(e)}")
\ No newline at end of file
+        raise HTTPException(status_code=500, detail=f"Error sending message: {str(e)}")
diff --git a/api/routers/sources.py b/api/routers/sources.py
index 30b4e3e..3544cf5 100644
--- a/api/routers/sources.py
+++ b/api/routers/sources.py
@@ -121,9 +121,7 @@ def parse_source_form_data(
         try:
             transformations_list = json.loads(transformations)
         except json.JSONDecodeError:
-            logger.error(
-                f"Invalid JSON in transformations field: {transformations}"
-            )
+            logger.error(f"Invalid JSON in transformations field: {transformations}")
             raise ValueError("Invalid JSON in transformations field")
 
     # Create SourceCreate instance
@@ -152,18 +150,26 @@ def parse_source_form_data(
 @router.get("/sources", response_model=List[SourceListResponse])
 async def get_sources(
     notebook_id: Optional[str] = Query(None, description="Filter by notebook ID"),
-    limit: int = Query(50, ge=1, le=100, description="Number of sources to return (1-100)"),
+    limit: int = Query(
+        50, ge=1, le=100, description="Number of sources to return (1-100)"
+    ),
     offset: int = Query(0, ge=0, description="Number of sources to skip"),
-    sort_by: str = Query("updated", description="Field to sort by (created or updated)"),
+    sort_by: str = Query(
+        "updated", description="Field to sort by (created or updated)"
+    ),
     sort_order: str = Query("desc", description="Sort order (asc or desc)"),
 ):
     """Get sources with pagination and sorting support."""
     try:
         # Validate sort parameters
         if sort_by not in ["created", "updated"]:
-            raise HTTPException(status_code=400, detail="sort_by must be 'created' or 'updated'")
+            raise HTTPException(
+                status_code=400, detail="sort_by must be 'created' or 'updated'"
+            )
         if sort_order.lower() not in ["asc", "desc"]:
-            raise HTTPException(status_code=400, detail="sort_order must be 'asc' or 'desc'")
+            raise HTTPException(
+                status_code=400, detail="sort_order must be 'asc' or 'desc'"
+            )
 
         # Build ORDER BY clause
         order_clause = f"ORDER BY {sort_by} {sort_order.upper()}"
@@ -185,11 +191,12 @@ async def get_sources(
                 LIMIT $limit START $offset
             """
             result = await repo_query(
-                query, {
+                query,
+                {
                     "notebook_id": ensure_record_id(notebook_id),
                     "limit": limit,
-                    "offset": offset
-                }
+                    "offset": offset,
+                },
             )
         else:
             # Query all sources - include command field
@@ -272,8 +279,14 @@ async def get_sources(
                 if status_obj:
                     status = status_obj.status
                     # Extract execution metadata from nested result structure
-                    result_data: dict[str, Any] | None = getattr(status_obj, "result", None)
-                    execution_metadata: dict[str, Any] = result_data.get("execution_metadata", {}) if isinstance(result_data, dict) else {}
+                    result_data: dict[str, Any] | None = getattr(
+                        status_obj, "result", None
+                    )
+                    execution_metadata: dict[str, Any] = (
+                        result_data.get("execution_metadata", {})
+                        if isinstance(result_data, dict)
+                        else {}
+                    )
                     processing_info = {
                         "started_at": execution_metadata.get("started_at"),
                         "completed_at": execution_metadata.get("completed_at"),
@@ -327,7 +340,7 @@ async def create_source(
 
     try:
         # Verify all specified notebooks exist (backward compatibility support)
-        for notebook_id in (source_data.notebooks or []):
+        for notebook_id in source_data.notebooks or []:
             notebook = await Notebook.get(notebook_id)
             if not notebook:
                 raise HTTPException(
@@ -399,7 +412,7 @@ async def create_source(
 
             # Add source to notebooks immediately so it appears in the UI
             # The source_graph will skip adding duplicates
-            for notebook_id in (source_data.notebooks or []):
+            for notebook_id in source_data.notebooks or []:
                 await source.add_to_notebook(notebook_id)
 
             try:
@@ -478,7 +491,7 @@ async def create_source(
 
                 # Add source to notebooks immediately so it appears in the UI
                 # The source_graph will skip adding duplicates
-                for notebook_id in (source_data.notebooks or []):
+                for notebook_id in source_data.notebooks or []:
                     await source.add_to_notebook(notebook_id)
 
                 # Execute command synchronously
@@ -517,9 +530,7 @@ async def create_source(
 
                 # Get the processed source
                 if not source.id:
-                    raise HTTPException(
-                        status_code=500, detail="Source ID is missing"
-                    )
+                    raise HTTPException(status_code=500, detail="Source ID is missing")
                 processed_source = await Source.get(source.id)
                 if not processed_source:
                     raise HTTPException(
@@ -657,9 +668,11 @@ async def get_source(source_id: str):
         # Get associated notebooks
         notebooks_query = await repo_query(
             "SELECT VALUE out FROM reference WHERE in = $source_id",
-            {"source_id": ensure_record_id(source.id or source_id)}
+            {"source_id": ensure_record_id(source.id or source_id)},
+        )
+        notebook_ids = (
+            [str(nb_id) for nb_id in notebooks_query] if notebooks_query else []
         )
-        notebook_ids = [str(nb_id) for nb_id in notebooks_query] if notebooks_query else []
 
         return SourceResponse(
             id=source.id or "",
diff --git a/api/routers/speaker_profiles.py b/api/routers/speaker_profiles.py
index e8611fd..3ce8886 100644
--- a/api/routers/speaker_profiles.py
+++ b/api/routers/speaker_profiles.py
@@ -23,7 +23,7 @@ async def list_speaker_profiles():
     """List all available speaker profiles"""
     try:
         profiles = await SpeakerProfile.get_all(order_by="name asc")
-        
+
         return [
             SpeakerProfileResponse(
                 id=str(profile.id),
@@ -31,16 +31,15 @@ async def list_speaker_profiles():
                 description=profile.description or "",
                 tts_provider=profile.tts_provider,
                 tts_model=profile.tts_model,
-                speakers=profile.speakers
+                speakers=profile.speakers,
             )
             for profile in profiles
         ]
-        
+
     except Exception as e:
         logger.error(f"Failed to fetch speaker profiles: {e}")
         raise HTTPException(
-            status_code=500,
-            detail=f"Failed to fetch speaker profiles: {str(e)}"
+            status_code=500, detail="Failed to fetch speaker profiles"
         )
 
 
@@ -49,29 +48,27 @@ async def get_speaker_profile(profile_name: str):
     """Get a specific speaker profile by name"""
     try:
         profile = await SpeakerProfile.get_by_name(profile_name)
-        
+
         if not profile:
             raise HTTPException(
-                status_code=404,
-                detail=f"Speaker profile '{profile_name}' not found"
+                status_code=404, detail=f"Speaker profile '{profile_name}' not found"
             )
-        
+
         return SpeakerProfileResponse(
             id=str(profile.id),
             name=profile.name,
             description=profile.description or "",
             tts_provider=profile.tts_provider,
             tts_model=profile.tts_model,
-            speakers=profile.speakers
+            speakers=profile.speakers,
         )
-        
+
     except HTTPException:
         raise
     except Exception as e:
         logger.error(f"Failed to fetch speaker profile '{profile_name}': {e}")
         raise HTTPException(
-            status_code=500,
-            detail=f"Failed to fetch speaker profile: {str(e)}"
+            status_code=500, detail="Failed to fetch speaker profile"
         )
 
 
@@ -80,7 +77,9 @@ class SpeakerProfileCreate(BaseModel):
     description: str = Field("", description="Profile description")
     tts_provider: str = Field(..., description="TTS provider")
     tts_model: str = Field(..., description="TTS model name")
-    speakers: List[Dict[str, Any]] = Field(..., description="Array of speaker configurations")
+    speakers: List[Dict[str, Any]] = Field(
+        ..., description="Array of speaker configurations"
+    )
 
 
 @router.post("/speaker-profiles", response_model=SpeakerProfileResponse)
@@ -92,25 +91,24 @@ async def create_speaker_profile(profile_data: SpeakerProfileCreate):
             description=profile_data.description,
             tts_provider=profile_data.tts_provider,
             tts_model=profile_data.tts_model,
-            speakers=profile_data.speakers
+            speakers=profile_data.speakers,
         )
-        
+
         await profile.save()
-        
+
         return SpeakerProfileResponse(
             id=str(profile.id),
             name=profile.name,
             description=profile.description or "",
             tts_provider=profile.tts_provider,
             tts_model=profile.tts_model,
-            speakers=profile.speakers
+            speakers=profile.speakers,
         )
-        
+
     except Exception as e:
         logger.error(f"Failed to create speaker profile: {e}")
         raise HTTPException(
-            status_code=500,
-            detail=f"Failed to create speaker profile: {str(e)}"
+            status_code=500, detail="Failed to create speaker profile"
         )
 
 
@@ -119,38 +117,36 @@ async def update_speaker_profile(profile_id: str, profile_data: SpeakerProfileCr
     """Update an existing speaker profile"""
     try:
         profile = await SpeakerProfile.get(profile_id)
-        
+
         if not profile:
             raise HTTPException(
-                status_code=404,
-                detail=f"Speaker profile '{profile_id}' not found"
+                status_code=404, detail=f"Speaker profile '{profile_id}' not found"
             )
-        
+
         # Update fields
         profile.name = profile_data.name
         profile.description = profile_data.description
         profile.tts_provider = profile_data.tts_provider
         profile.tts_model = profile_data.tts_model
         profile.speakers = profile_data.speakers
-        
+
         await profile.save()
-        
+
         return SpeakerProfileResponse(
             id=str(profile.id),
             name=profile.name,
             description=profile.description or "",
             tts_provider=profile.tts_provider,
             tts_model=profile.tts_model,
-            speakers=profile.speakers
+            speakers=profile.speakers,
         )
-        
+
     except HTTPException:
         raise
     except Exception as e:
         logger.error(f"Failed to update speaker profile: {e}")
         raise HTTPException(
-            status_code=500,
-            detail=f"Failed to update speaker profile: {str(e)}"
+            status_code=500, detail="Failed to update speaker profile"
         )
 
 
@@ -159,64 +155,62 @@ async def delete_speaker_profile(profile_id: str):
     """Delete a speaker profile"""
     try:
         profile = await SpeakerProfile.get(profile_id)
-        
+
         if not profile:
             raise HTTPException(
-                status_code=404,
-                detail=f"Speaker profile '{profile_id}' not found"
+                status_code=404, detail=f"Speaker profile '{profile_id}' not found"
             )
-        
+
         await profile.delete()
-        
+
         return {"message": "Speaker profile deleted successfully"}
-        
+
     except HTTPException:
         raise
     except Exception as e:
         logger.error(f"Failed to delete speaker profile: {e}")
         raise HTTPException(
-            status_code=500,
-            detail=f"Failed to delete speaker profile: {str(e)}"
+            status_code=500, detail="Failed to delete speaker profile"
         )
 
 
-@router.post("/speaker-profiles/{profile_id}/duplicate", response_model=SpeakerProfileResponse)
+@router.post(
+    "/speaker-profiles/{profile_id}/duplicate", response_model=SpeakerProfileResponse
+)
 async def duplicate_speaker_profile(profile_id: str):
     """Duplicate a speaker profile"""
     try:
         original = await SpeakerProfile.get(profile_id)
-        
+
         if not original:
             raise HTTPException(
-                status_code=404,
-                detail=f"Speaker profile '{profile_id}' not found"
+                status_code=404, detail=f"Speaker profile '{profile_id}' not found"
             )
-        
+
         # Create duplicate with modified name
         duplicate = SpeakerProfile(
             name=f"{original.name} - Copy",
             description=original.description,
             tts_provider=original.tts_provider,
             tts_model=original.tts_model,
-            speakers=original.speakers
+            speakers=original.speakers,
         )
-        
+
         await duplicate.save()
-        
+
         return SpeakerProfileResponse(
             id=str(duplicate.id),
             name=duplicate.name,
             description=duplicate.description or "",
             tts_provider=duplicate.tts_provider,
             tts_model=duplicate.tts_model,
-            speakers=duplicate.speakers
+            speakers=duplicate.speakers,
         )
-        
+
     except HTTPException:
         raise
     except Exception as e:
         logger.error(f"Failed to duplicate speaker profile: {e}")
         raise HTTPException(
-            status_code=500,
-            detail=f"Failed to duplicate speaker profile: {str(e)}"
-        )
\ No newline at end of file
+            status_code=500, detail="Failed to duplicate speaker profile"
+        )
diff --git a/api/routers/transformations.py b/api/routers/transformations.py
index 6e3d455..88871bb 100644
--- a/api/routers/transformations.py
+++ b/api/routers/transformations.py
@@ -123,7 +123,8 @@ async def get_default_prompt():
         default_prompts: DefaultPrompts = await DefaultPrompts.get_instance()  # type: ignore[assignment]
 
         return DefaultPromptResponse(
-            transformation_instructions=default_prompts.transformation_instructions or ""
+            transformation_instructions=default_prompts.transformation_instructions
+            or ""
         )
     except Exception as e:
         logger.error(f"Error fetching default prompt: {str(e)}")
@@ -138,7 +139,9 @@ async def update_default_prompt(prompt_update: DefaultPromptUpdate):
     try:
         default_prompts: DefaultPrompts = await DefaultPrompts.get_instance()  # type: ignore[assignment]
 
-        default_prompts.transformation_instructions = prompt_update.transformation_instructions
+        default_prompts.transformation_instructions = (
+            prompt_update.transformation_instructions
+        )
         await default_prompts.update()
 
         return DefaultPromptResponse(
diff --git a/api/search_service.py b/api/search_service.py
index 07d7b6f..57e0580 100644
--- a/api/search_service.py
+++ b/api/search_service.py
@@ -22,7 +22,7 @@ class SearchService:
         limit: int = 100,
         search_sources: bool = True,
         search_notes: bool = True,
-        minimum_score: float = 0.2
+        minimum_score: float = 0.2,
     ) -> List[Dict[str, Any]]:
         """Search the knowledge base."""
         response = api_client.search(
@@ -31,7 +31,7 @@ class SearchService:
             limit=limit,
             search_sources=search_sources,
             search_notes=search_notes,
-            minimum_score=minimum_score
+            minimum_score=minimum_score,
         )
         if isinstance(response, dict):
             return response.get("results", [])
@@ -42,17 +42,17 @@ class SearchService:
         question: str,
         strategy_model: str,
         answer_model: str,
-        final_answer_model: str
+        final_answer_model: str,
     ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Ask the knowledge base a question."""
         response = api_client.ask_simple(
             question=question,
             strategy_model=strategy_model,
             answer_model=answer_model,
-            final_answer_model=final_answer_model
+            final_answer_model=final_answer_model,
         )
         return response
 
 
 # Global service instance
-search_service = SearchService()
\ No newline at end of file
+search_service = SearchService()
diff --git a/api/settings_service.py b/api/settings_service.py
index ed84e02..e8a43f5 100644
--- a/api/settings_service.py
+++ b/api/settings_service.py
@@ -2,7 +2,6 @@
 Settings service layer using API.
 """
 
-
 from loguru import logger
 
 from api.client import api_client
@@ -11,26 +10,36 @@ from open_notebook.domain.content_settings import ContentSettings
 
 class SettingsService:
     """Service layer for settings operations using API."""
-    
+
     def __init__(self):
         logger.info("Using API for settings operations")
-    
+
     def get_settings(self) -> ContentSettings:
         """Get application settings."""
         settings_response = api_client.get_settings()
-        settings_data = settings_response if isinstance(settings_response, dict) else settings_response[0]
+        settings_data = (
+            settings_response
+            if isinstance(settings_response, dict)
+            else settings_response[0]
+        )
 
         # Create ContentSettings object from API response
         settings = ContentSettings(
-            default_content_processing_engine_doc=settings_data.get("default_content_processing_engine_doc"),
-            default_content_processing_engine_url=settings_data.get("default_content_processing_engine_url"),
+            default_content_processing_engine_doc=settings_data.get(
+                "default_content_processing_engine_doc"
+            ),
+            default_content_processing_engine_url=settings_data.get(
+                "default_content_processing_engine_url"
+            ),
             default_embedding_option=settings_data.get("default_embedding_option"),
             auto_delete_files=settings_data.get("auto_delete_files"),
-            youtube_preferred_languages=settings_data.get("youtube_preferred_languages"),
+            youtube_preferred_languages=settings_data.get(
+                "youtube_preferred_languages"
+            ),
         )
 
         return settings
-    
+
     def update_settings(self, settings: ContentSettings) -> ContentSettings:
         """Update application settings."""
         updates = {
@@ -42,17 +51,29 @@ class SettingsService:
         }
 
         settings_response = api_client.update_settings(**updates)
-        settings_data = settings_response if isinstance(settings_response, dict) else settings_response[0]
+        settings_data = (
+            settings_response
+            if isinstance(settings_response, dict)
+            else settings_response[0]
+        )
 
         # Update the settings object with the response
-        settings.default_content_processing_engine_doc = settings_data.get("default_content_processing_engine_doc")
-        settings.default_content_processing_engine_url = settings_data.get("default_content_processing_engine_url")
-        settings.default_embedding_option = settings_data.get("default_embedding_option")
+        settings.default_content_processing_engine_doc = settings_data.get(
+            "default_content_processing_engine_doc"
+        )
+        settings.default_content_processing_engine_url = settings_data.get(
+            "default_content_processing_engine_url"
+        )
+        settings.default_embedding_option = settings_data.get(
+            "default_embedding_option"
+        )
         settings.auto_delete_files = settings_data.get("auto_delete_files")
-        settings.youtube_preferred_languages = settings_data.get("youtube_preferred_languages")
+        settings.youtube_preferred_languages = settings_data.get(
+            "youtube_preferred_languages"
+        )
 
         return settings
 
 
 # Global service instance
-settings_service = SettingsService()
\ No newline at end of file
+settings_service = SettingsService()
diff --git a/api/sources_service.py b/api/sources_service.py
index 6e3fa3b..ae03375 100644
--- a/api/sources_service.py
+++ b/api/sources_service.py
@@ -14,6 +14,7 @@ from open_notebook.domain.notebook import Asset, Source
 @dataclass
 class SourceProcessingResult:
     """Result of source creation with optional async processing info."""
+
     source: Source
     is_async: bool = False
     command_id: Optional[str] = None
@@ -24,38 +25,39 @@ class SourceProcessingResult:
 @dataclass
 class SourceWithMetadata:
     """Source object with additional metadata from API."""
+
     source: Source
     embedded_chunks: int
-    
+
     # Expose common source properties for easy access
     @property
     def id(self):
         return self.source.id
-    
-    @property  
+
+    @property
     def title(self):
         return self.source.title
-        
+
     @title.setter
     def title(self, value):
         self.source.title = value
-    
+
     @property
     def topics(self):
         return self.source.topics
-    
+
     @property
     def asset(self):
         return self.source.asset
-    
+
     @property
     def full_text(self):
         return self.source.full_text
-    
+
     @property
     def created(self):
         return self.source.created
-    
+
     @property
     def updated(self):
         return self.source.updated
@@ -67,7 +69,9 @@ class SourcesService:
     def __init__(self):
         logger.info("Using API for sources operations")
 
-    def get_all_sources(self, notebook_id: Optional[str] = None) -> List[SourceWithMetadata]:
+    def get_all_sources(
+        self, notebook_id: Optional[str] = None
+    ) -> List[SourceWithMetadata]:
         """Get all sources with optional notebook filtering."""
         sources_data = api_client.get_sources(notebook_id=notebook_id)
         # Convert API response to SourceWithMetadata objects
@@ -88,11 +92,10 @@ class SourcesService:
             source.id = source_data["id"]
             source.created = source_data["created"]
             source.updated = source_data["updated"]
-            
+
             # Wrap in SourceWithMetadata
             source_with_metadata = SourceWithMetadata(
-                source=source,
-                embedded_chunks=source_data.get("embedded_chunks", 0)
+                source=source, embedded_chunks=source_data.get("embedded_chunks", 0)
             )
             sources.append(source_with_metadata)
         return sources
@@ -119,8 +122,7 @@ class SourcesService:
         source.updated = source_data["updated"]
 
         return SourceWithMetadata(
-            source=source,
-            embedded_chunks=source_data.get("embedded_chunks", 0)
+            source=source, embedded_chunks=source_data.get("embedded_chunks", 0)
         )
 
     def create_source(
@@ -139,7 +141,7 @@ class SourcesService:
     ) -> Union[Source, SourceProcessingResult]:
         """
         Create a new source with support for async processing.
-        
+
         Args:
             notebook_id: Single notebook ID (deprecated, use notebooks parameter)
             source_type: Type of source (link, upload, text)
@@ -152,7 +154,7 @@ class SourcesService:
             delete_source: Whether to delete uploaded file after processing
             notebooks: List of notebook IDs to add source to (preferred over notebook_id)
             async_processing: Whether to process source asynchronously
-            
+
         Returns:
             Source object for sync processing (backward compatibility)
             SourceProcessingResult for async processing (contains additional metadata)
@@ -193,9 +195,15 @@ class SourcesService:
         source.updated = response_data["updated"]
 
         # Check if this is an async processing response
-        if response_data.get("command_id") or response_data.get("status") or response_data.get("processing_info"):
+        if (
+            response_data.get("command_id")
+            or response_data.get("status")
+            or response_data.get("processing_info")
+        ):
             # Ensure source_data is a dict for accessing attributes
-            source_data_dict = source_data if isinstance(source_data, dict) else source_data[0]
+            source_data_dict = (
+                source_data if isinstance(source_data, dict) else source_data[0]
+            )
             # Return enhanced result for async processing
             return SourceProcessingResult(
                 source=source,
@@ -228,7 +236,7 @@ class SourcesService:
     ) -> SourceProcessingResult:
         """
         Create a new source with async processing enabled.
-        
+
         This is a convenience method that always uses async processing.
         Returns a SourceProcessingResult with processing status information.
         """
@@ -245,7 +253,7 @@ class SourcesService:
             delete_source=delete_source,
             async_processing=True,
         )
-        
+
         # Since we forced async_processing=True, this should always be a SourceProcessingResult
         if isinstance(result, SourceProcessingResult):
             return result
@@ -259,14 +267,18 @@ class SourcesService:
     def is_source_processing_complete(self, source_id: str) -> bool:
         """
         Check if a source's async processing is complete.
-        
+
         Returns True if processing is complete (success or failure),
         False if still processing or queued.
         """
         try:
             status_data = self.get_source_status(source_id)
             status = status_data.get("status")
-            return status in ["completed", "failed", None]  # None indicates legacy/sync source
+            return status in [
+                "completed",
+                "failed",
+                None,
+            ]  # None indicates legacy/sync source
         except Exception as e:
             logger.error(f"Error checking source processing status: {e}")
             return True  # Assume complete on error
@@ -275,7 +287,7 @@ class SourcesService:
         """Update a source."""
         if not source.id:
             raise ValueError("Source ID is required for update")
-            
+
         updates = {
             "title": source.title,
             "topics": source.topics,
@@ -283,7 +295,9 @@ class SourcesService:
         source_data = api_client.update_source(source.id, **updates)
 
         # Ensure source_data is a dict
-        source_data_dict = source_data if isinstance(source_data, dict) else source_data[0]
+        source_data_dict = (
+            source_data if isinstance(source_data, dict) else source_data[0]
+        )
 
         # Update the source object with the response
         source.title = source_data_dict["title"]
@@ -302,4 +316,9 @@ class SourcesService:
 sources_service = SourcesService()
 
 # Export important classes for easy importing
-__all__ = ["SourcesService", "SourceWithMetadata", "SourceProcessingResult", "sources_service"]
+__all__ = [
+    "SourcesService",
+    "SourceWithMetadata",
+    "SourceProcessingResult",
+    "sources_service",
+]
diff --git a/api/transformations_service.py b/api/transformations_service.py
index 876b9a9..bc81c08 100644
--- a/api/transformations_service.py
+++ b/api/transformations_service.py
@@ -13,10 +13,10 @@ from open_notebook.domain.transformation import Transformation
 
 class TransformationsService:
     """Service layer for transformations operations using API."""
-    
+
     def __init__(self):
         logger.info("Using API for transformations operations")
-    
+
     def get_all_transformations(self) -> List[Transformation]:
         """Get all transformations."""
         transformations_data = api_client.get_transformations()
@@ -31,11 +31,15 @@ class TransformationsService:
                 apply_default=trans_data["apply_default"],
             )
             transformation.id = trans_data["id"]
-            transformation.created = datetime.fromisoformat(trans_data["created"].replace('Z', '+00:00'))
-            transformation.updated = datetime.fromisoformat(trans_data["updated"].replace('Z', '+00:00'))
+            transformation.created = datetime.fromisoformat(
+                trans_data["created"].replace("Z", "+00:00")
+            )
+            transformation.updated = datetime.fromisoformat(
+                trans_data["updated"].replace("Z", "+00:00")
+            )
             transformations.append(transformation)
         return transformations
-    
+
     def get_transformation(self, transformation_id: str) -> Transformation:
         """Get a specific transformation."""
         response = api_client.get_transformation(transformation_id)
@@ -48,17 +52,21 @@ class TransformationsService:
             apply_default=trans_data["apply_default"],
         )
         transformation.id = trans_data["id"]
-        transformation.created = datetime.fromisoformat(trans_data["created"].replace('Z', '+00:00'))
-        transformation.updated = datetime.fromisoformat(trans_data["updated"].replace('Z', '+00:00'))
+        transformation.created = datetime.fromisoformat(
+            trans_data["created"].replace("Z", "+00:00")
+        )
+        transformation.updated = datetime.fromisoformat(
+            trans_data["updated"].replace("Z", "+00:00")
+        )
         return transformation
-    
+
     def create_transformation(
         self,
         name: str,
         title: str,
         description: str,
         prompt: str,
-        apply_default: bool = False
+        apply_default: bool = False,
     ) -> Transformation:
         """Create a new transformation."""
         response = api_client.create_transformation(
@@ -66,7 +74,7 @@ class TransformationsService:
             title=title,
             description=description,
             prompt=prompt,
-            apply_default=apply_default
+            apply_default=apply_default,
         )
         trans_data = response if isinstance(response, dict) else response[0]
         transformation = Transformation(
@@ -77,10 +85,14 @@ class TransformationsService:
             apply_default=trans_data["apply_default"],
         )
         transformation.id = trans_data["id"]
-        transformation.created = datetime.fromisoformat(trans_data["created"].replace('Z', '+00:00'))
-        transformation.updated = datetime.fromisoformat(trans_data["updated"].replace('Z', '+00:00'))
+        transformation.created = datetime.fromisoformat(
+            trans_data["created"].replace("Z", "+00:00")
+        )
+        transformation.updated = datetime.fromisoformat(
+            trans_data["updated"].replace("Z", "+00:00")
+        )
         return transformation
-    
+
     def update_transformation(self, transformation: Transformation) -> Transformation:
         """Update a transformation."""
         if not transformation.id:
@@ -102,29 +114,28 @@ class TransformationsService:
         transformation.description = trans_data["description"]
         transformation.prompt = trans_data["prompt"]
         transformation.apply_default = trans_data["apply_default"]
-        transformation.updated = datetime.fromisoformat(trans_data["updated"].replace('Z', '+00:00'))
+        transformation.updated = datetime.fromisoformat(
+            trans_data["updated"].replace("Z", "+00:00")
+        )
 
         return transformation
-    
+
     def delete_transformation(self, transformation_id: str) -> bool:
         """Delete a transformation."""
         api_client.delete_transformation(transformation_id)
         return True
-    
+
     def execute_transformation(
-        self,
-        transformation_id: str,
-        input_text: str,
-        model_id: str
+        self, transformation_id: str, input_text: str, model_id: str
     ) -> Union[Dict[Any, Any], List[Dict[Any, Any]]]:
         """Execute a transformation on input text."""
         result = api_client.execute_transformation(
             transformation_id=transformation_id,
             input_text=input_text,
-            model_id=model_id
+            model_id=model_id,
         )
         return result
 
 
 # Global service instance
-transformations_service = TransformationsService()
\ No newline at end of file
+transformations_service = TransformationsService()
diff --git a/commands/embedding_commands.py b/commands/embedding_commands.py
index 6bf87e5..a44dc79 100644
--- a/commands/embedding_commands.py
+++ b/commands/embedding_commands.py
@@ -174,7 +174,9 @@ async def embed_single_item_command(
 
     except Exception as e:
         processing_time = time.time() - start_time
-        logger.error(f"Embedding failed for {input_data.item_type} {input_data.item_id}: {e}")
+        logger.error(
+            f"Embedding failed for {input_data.item_type} {input_data.item_id}: {e}"
+        )
         logger.exception(e)
 
         return EmbedSingleItemOutput(
@@ -317,7 +319,9 @@ async def vectorize_source_command(
     start_time = time.time()
 
     try:
-        logger.info(f"Starting vectorization orchestration for source {input_data.source_id}")
+        logger.info(
+            f"Starting vectorization orchestration for source {input_data.source_id}"
+        )
 
         # 1. Load source
         source = await Source.get(input_data.source_id)
@@ -331,7 +335,7 @@ async def vectorize_source_command(
         logger.info(f"Deleting existing embeddings for source {input_data.source_id}")
         delete_result = await repo_query(
             "DELETE source_embedding WHERE source = $source_id",
-            {"source_id": ensure_record_id(input_data.source_id)}
+            {"source_id": ensure_record_id(input_data.source_id)},
         )
         deleted_count = len(delete_result) if delete_result else 0
         if deleted_count > 0:
@@ -354,12 +358,12 @@ async def vectorize_source_command(
             try:
                 job_id = submit_command(
                     "open_notebook",  # app name
-                    "embed_chunk",    # command name
+                    "embed_chunk",  # command name
                     {
                         "source_id": input_data.source_id,
                         "chunk_index": idx,
                         "chunk_text": chunk_text,
-                    }
+                    },
                 )
                 jobs_submitted += 1
 
@@ -387,7 +391,9 @@ async def vectorize_source_command(
 
     except Exception as e:
         processing_time = time.time() - start_time
-        logger.error(f"Vectorization orchestration failed for source {input_data.source_id}: {e}")
+        logger.error(
+            f"Vectorization orchestration failed for source {input_data.source_id}: {e}"
+        )
         logger.exception(e)
 
         return VectorizeSourceOutput(
@@ -484,7 +490,9 @@ async def rebuild_embeddings_command(
     try:
         logger.info("=" * 60)
         logger.info(f"Starting embedding rebuild with mode={input_data.mode}")
-        logger.info(f"Include: sources={input_data.include_sources}, notes={input_data.include_notes}, insights={input_data.include_insights}")
+        logger.info(
+            f"Include: sources={input_data.include_sources}, notes={input_data.include_notes}, insights={input_data.include_insights}"
+        )
         logger.info("=" * 60)
 
         # Check embedding model availability
@@ -561,7 +569,9 @@ async def rebuild_embeddings_command(
                 notes_processed += 1
 
                 if idx % 10 == 0 or idx == len(items["notes"]):
-                    logger.info(f"  Progress: {idx}/{len(items['notes'])} notes processed")
+                    logger.info(
+                        f"  Progress: {idx}/{len(items['notes'])} notes processed"
+                    )
 
             except Exception as e:
                 logger.error(f"Failed to re-embed note {note_id}: {e}")
diff --git a/commands/example_commands.py b/commands/example_commands.py
index c1439e6..7f26cb9 100644
--- a/commands/example_commands.py
+++ b/commands/example_commands.py
@@ -12,6 +12,7 @@ class TextProcessingInput(BaseModel):
     operation: str = "uppercase"  # uppercase, lowercase, word_count, reverse
     delay_seconds: Optional[int] = None  # For testing async behavior
 
+
 class TextProcessingOutput(BaseModel):
     success: bool
     original_text: str
@@ -20,11 +21,13 @@ class TextProcessingOutput(BaseModel):
     processing_time: float
     error_message: Optional[str] = None
 
+
 class DataAnalysisInput(BaseModel):
     numbers: List[float]
     analysis_type: str = "basic"  # basic, detailed
     delay_seconds: Optional[int] = None
 
+
 class DataAnalysisOutput(BaseModel):
     success: bool
     analysis_type: str
@@ -36,6 +39,7 @@ class DataAnalysisOutput(BaseModel):
     processing_time: float
     error_message: Optional[str] = None
 
+
 @command("process_text", app="open_notebook")
 async def process_text_command(input_data: TextProcessingInput) -> TextProcessingOutput:
     """
@@ -43,17 +47,17 @@ async def process_text_command(input_data: TextProcessingInput) -> TextProcessin
     and demonstrates different processing types.
     """
     start_time = time.time()
-    
+
     try:
         logger.info(f"Processing text with operation: {input_data.operation}")
-        
+
         # Simulate processing delay if specified
         if input_data.delay_seconds:
             await asyncio.sleep(input_data.delay_seconds)
-        
+
         processed_text = None
         word_count = None
-        
+
         if input_data.operation == "uppercase":
             processed_text = input_data.text.upper()
         elif input_data.operation == "lowercase":
@@ -65,17 +69,17 @@ async def process_text_command(input_data: TextProcessingInput) -> TextProcessin
             processed_text = f"Word count: {word_count}"
         else:
             raise ValueError(f"Unknown operation: {input_data.operation}")
-        
+
         processing_time = time.time() - start_time
-        
+
         return TextProcessingOutput(
             success=True,
             original_text=input_data.text,
             processed_text=processed_text,
             word_count=word_count,
-            processing_time=processing_time
+            processing_time=processing_time,
         )
-        
+
     except Exception as e:
         processing_time = time.time() - start_time
         logger.error(f"Text processing failed: {e}")
@@ -83,9 +87,10 @@ async def process_text_command(input_data: TextProcessingInput) -> TextProcessin
             success=False,
             original_text=input_data.text,
             processing_time=processing_time,
-            error_message=str(e)
+            error_message=str(e),
         )
 
+
 @command("analyze_data", app="open_notebook")
 async def analyze_data_command(input_data: DataAnalysisInput) -> DataAnalysisOutput:
     """
@@ -93,25 +98,27 @@ async def analyze_data_command(input_data: DataAnalysisInput) -> DataAnalysisOut
     and demonstrates error handling.
     """
     start_time = time.time()
-    
+
     try:
-        logger.info(f"Analyzing {len(input_data.numbers)} numbers with {input_data.analysis_type} analysis")
-        
+        logger.info(
+            f"Analyzing {len(input_data.numbers)} numbers with {input_data.analysis_type} analysis"
+        )
+
         # Simulate processing delay if specified
         if input_data.delay_seconds:
             await asyncio.sleep(input_data.delay_seconds)
-        
+
         if not input_data.numbers:
             raise ValueError("No numbers provided for analysis")
-        
+
         count = len(input_data.numbers)
         sum_value = sum(input_data.numbers)
         average = sum_value / count
         min_value = min(input_data.numbers)
         max_value = max(input_data.numbers)
-        
+
         processing_time = time.time() - start_time
-        
+
         return DataAnalysisOutput(
             success=True,
             analysis_type=input_data.analysis_type,
@@ -120,9 +127,9 @@ async def analyze_data_command(input_data: DataAnalysisInput) -> DataAnalysisOut
             average=average,
             min_value=min_value,
             max_value=max_value,
-            processing_time=processing_time
+            processing_time=processing_time,
         )
-        
+
     except Exception as e:
         processing_time = time.time() - start_time
         logger.error(f"Data analysis failed: {e}")
@@ -131,5 +138,5 @@ async def analyze_data_command(input_data: DataAnalysisInput) -> DataAnalysisOut
             analysis_type=input_data.analysis_type,
             count=0,
             processing_time=processing_time,
-            error_message=str(e)
-        )
\ No newline at end of file
+            error_message=str(e),
+        )
diff --git a/docker-compose.full.yml b/docker-compose.full.yml
index 9675f05..96d4e09 100644
--- a/docker-compose.full.yml
+++ b/docker-compose.full.yml
@@ -13,6 +13,9 @@ services:
     restart: always
   open_notebook:
     image: lfnovo/open_notebook:v1-latest
+    # build:
+    #   context: .
+    #   dockerfile: Dockerfile
     ports:
       - "8502:8502"
       - "5055:5055"
diff --git a/docker-compose.single.yml b/docker-compose.single.yml
index ad641bd..06ac0d5 100644
--- a/docker-compose.single.yml
+++ b/docker-compose.single.yml
@@ -9,6 +9,9 @@ services:
       - "5055:5055"  # REST API
     env_file:
       - ./docker.env
+    environment:
+      # Override for single-container mode: SurrealDB runs on localhost inside the same container
+      - SURREAL_URL=ws://localhost:8000/rpc
     volumes:
       - ./notebook_data:/app/data          # Application data
       - ./surreal_single_data:/mydata      # SurrealDB data
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6011f4d..2be6e94 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -34,12 +34,15 @@
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "date-fns": "^4.1.0",
+        "i18next": "^25.7.3",
+        "i18next-browser-languagedetector": "^8.2.0",
         "lucide-react": "^0.525.0",
         "next": "^16.1.1",
         "next-themes": "^0.4.6",
         "react": "^19.2.3",
         "react-dom": "^19.2.3",
         "react-hook-form": "^7.60.0",
+        "react-i18next": "^16.5.0",
         "react-markdown": "^10.1.0",
         "remark-gfm": "^4.0.1",
         "sonner": "^2.0.6",
@@ -51,16 +54,29 @@
       "devDependencies": {
         "@eslint/eslintrc": "^3",
         "@tailwindcss/postcss": "^4",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.2.0",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "@vitejs/plugin-react": "^4.3.4",
+        "@vitest/ui": "^3.0.0",
         "eslint": "^9",
         "eslint-config-next": "15.4.2",
+        "jsdom": "^26.0.0",
         "tailwindcss": "^4",
         "tw-animate-css": "^1.3.5",
-        "typescript": "^5"
+        "typescript": "^5",
+        "vitest": "^3.0.0"
       }
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmmirror.com/@adobe/css-tools/-/css-tools-4.4.4.tgz",
+      "integrity": "sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -86,6 +102,294 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
+      "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^2.1.3",
+        "@csstools/css-color-parser": "^3.0.9",
+        "@csstools/css-parser-algorithms": "^3.0.4",
+        "@csstools/css-tokenizer": "^3.0.3",
+        "lru-cache": "^10.4.3"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.28.6.tgz",
+      "integrity": "sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/compat-data/-/compat-data-7.28.6.tgz",
+      "integrity": "sha512-2lfu57JtzctfIrcGMz992hyLlByuzgIk58+hhGCxjKZ3rWI82NnVLjXcaTqkI2NvlcvOskZaiZ5kjUALo3Lpxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.28.6.tgz",
+      "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.28.6",
+        "@babel/generator": "^7.28.6",
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helpers": "^7.28.6",
+        "@babel/parser": "^7.28.6",
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.28.6.tgz",
+      "integrity": "sha512-lOoVRwADj8hjf7al89tvQ2a1lf53Z+7tiXMgpZJL3maQPDxh0DgLMN62B2MKUOFcoodBHLMbDM6WAbKgNy5Suw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
+      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.28.6",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
+      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
+      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.28.6",
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.28.6.tgz",
+      "integrity": "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/helpers/-/helpers-7.28.6.tgz",
+      "integrity": "sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.28.6.tgz",
+      "integrity": "sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.6"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.28.4",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
@@ -94,6 +398,169 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/template": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.28.6.tgz",
+      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.28.6",
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.28.6.tgz",
+      "integrity": "sha512-fgWX62k02qtjqdSNTAGxmKYY/7FSL9WAS1o2Hu5+I5m9T0yxZzr4cnrfXQ/MX0rIifthCSs6FKTlzYbJcPtMNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.28.6",
+        "@babel/generator": "^7.28.6",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.6",
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.28.6",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.28.6.tgz",
+      "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
+      "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-calc/-/css-calc-2.1.4.tgz",
+      "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz",
+      "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^5.1.0",
+        "@csstools/css-calc": "^2.1.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
+      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.4.5",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.5.tgz",
@@ -125,6 +592,448 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",
+      "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.27.2.tgz",
+      "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz",
+      "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.27.2.tgz",
+      "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz",
+      "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz",
+      "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz",
+      "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz",
+      "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz",
+      "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz",
+      "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz",
+      "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz",
+      "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz",
+      "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz",
+      "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz",
+      "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz",
+      "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz",
+      "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz",
+      "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz",
+      "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz",
+      "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz",
+      "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz",
+      "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz",
+      "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
@@ -850,6 +1759,17 @@
         "@jridgewell/trace-mapping": "^0.3.24"
       }
     },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -1095,6 +2015,13 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.29",
+      "resolved": "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.29.tgz",
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/number": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
@@ -2354,6 +3281,363 @@
       "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="
     },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.27",
+      "resolved": "https://registry.npmmirror.com/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.55.1.tgz",
+      "integrity": "sha512-9R0DM/ykwfGIlNu6+2U09ga0WXeZ9MRC2Ter8jnz8415VbuIykVuc6bhdrbORFZANDmTDvq26mJrEVTl8TdnDg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.55.1.tgz",
+      "integrity": "sha512-eFZCb1YUqhTysgW3sj/55du5cG57S7UTNtdMjCW7LwVcj3dTTcowCsC8p7uBdzKsZYa8J7IDE8lhMI+HX1vQvg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.55.1.tgz",
+      "integrity": "sha512-p3grE2PHcQm2e8PSGZdzIhCKbMCw/xi9XvMPErPhwO17vxtvCN5FEA2mSLgmKlCjHGMQTP6phuQTYWUnKewwGg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.55.1.tgz",
+      "integrity": "sha512-rDUjG25C9qoTm+e02Esi+aqTKSBYwVTaoS1wxcN47/Luqef57Vgp96xNANwt5npq9GDxsH7kXxNkJVEsWEOEaQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.55.1.tgz",
+      "integrity": "sha512-+JiU7Jbp5cdxekIgdte0jfcu5oqw4GCKr6i3PJTlXTCU5H5Fvtkpbs4XJHRmWNXF+hKmn4v7ogI5OQPaupJgOg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.55.1.tgz",
+      "integrity": "sha512-V5xC1tOVWtLLmr3YUk2f6EJK4qksksOYiz/TCsFHu/R+woubcLWdC9nZQmwjOAbmExBIVKsm1/wKmEy4z4u4Bw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.55.1.tgz",
+      "integrity": "sha512-Rn3n+FUk2J5VWx+ywrG/HGPTD9jXNbicRtTM11e/uorplArnXZYsVifnPPqNNP5BsO3roI4n8332ukpY/zN7rQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.55.1.tgz",
+      "integrity": "sha512-grPNWydeKtc1aEdrJDWk4opD7nFtQbMmV7769hiAaYyUKCT1faPRm2av8CX1YJsZ4TLAZcg9gTR1KvEzoLjXkg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.55.1.tgz",
+      "integrity": "sha512-a59mwd1k6x8tXKcUxSyISiquLwB5pX+fJW9TkWU46lCqD/GRDe9uDN31jrMmVP3feI3mhAdvcCClhV8V5MhJFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.55.1.tgz",
+      "integrity": "sha512-puS1MEgWX5GsHSoiAsF0TYrpomdvkaXm0CofIMG5uVkP6IBV+ZO9xhC5YEN49nsgYo1DuuMquF9+7EDBVYu4uA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.55.1.tgz",
+      "integrity": "sha512-r3Wv40in+lTsULSb6nnoudVbARdOwb2u5fpeoOAZjFLznp6tDU8kd+GTHmJoqZ9lt6/Sys33KdIHUaQihFcu7g==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.55.1.tgz",
+      "integrity": "sha512-MR8c0+UxAlB22Fq4R+aQSPBayvYa3+9DrwG/i1TKQXFYEaoW3B5b/rkSRIypcZDdWjWnpcvxbNaAJDcSbJU3Lw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.55.1.tgz",
+      "integrity": "sha512-3KhoECe1BRlSYpMTeVrD4sh2Pw2xgt4jzNSZIIPLFEsnQn9gAnZagW9+VqDqAHgm1Xc77LzJOo2LdigS5qZ+gw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.55.1.tgz",
+      "integrity": "sha512-ziR1OuZx0vdYZZ30vueNZTg73alF59DicYrPViG0NEgDVN8/Jl87zkAPu4u6VjZST2llgEUjaiNl9JM6HH1Vdw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.55.1.tgz",
+      "integrity": "sha512-uW0Y12ih2XJRERZ4jAfKamTyIHVMPQnTZcQjme2HMVDAHY4amf5u414OqNYC+x+LzRdRcnIG1YodLrrtA8xsxw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.55.1.tgz",
+      "integrity": "sha512-u9yZ0jUkOED1BFrqu3BwMQoixvGHGZ+JhJNkNKY/hyoEgOwlqKb62qu+7UjbPSHYjiVy8kKJHvXKv5coH4wDeg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.55.1.tgz",
+      "integrity": "sha512-/0PenBCmqM4ZUd0190j7J0UsQ/1nsi735iPRakO8iPciE7BQ495Y6msPzaOmvx0/pn+eJVVlZrNrSh4WSYLxNg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.55.1.tgz",
+      "integrity": "sha512-a8G4wiQxQG2BAvo+gU6XrReRRqj+pLS2NGXKm8io19goR+K8lw269eTrPkSdDTALwMmJp4th2Uh0D8J9bEV1vg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.55.1.tgz",
+      "integrity": "sha512-bD+zjpFrMpP/hqkfEcnjXWHMw5BIghGisOKPj+2NaNDuVT+8Ds4mPf3XcPHuat1tz89WRL+1wbcxKY3WSbiT7w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.55.1.tgz",
+      "integrity": "sha512-eLXw0dOiqE4QmvikfQ6yjgkg/xDM+MdU9YJuP4ySTibXU0oAvnEWXt7UDJmD4UkYialMfOGFPJnIHSe/kdzPxg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.55.1.tgz",
+      "integrity": "sha512-xzm44KgEP11te3S2HCSyYf5zIzWmx3n8HDCc7EE59+lTcswEWNpvMLfd9uJvVX8LCg9QWG67Xt75AuHn4vgsXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.55.1.tgz",
+      "integrity": "sha512-yR6Bl3tMC/gBok5cz/Qi0xYnVbIxGx5Fcf/ca0eB6/6JwOY+SRUcJfI0OpeTpPls7f194as62thCt/2BjxYN8g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.55.1.tgz",
+      "integrity": "sha512-3fZBidchE0eY0oFZBnekYCfg+5wAB0mbpCBuofh5mZuzIU/4jIVkbESmd2dOsFNS78b53CYv3OAtwqkZZmU5nA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.55.1.tgz",
+      "integrity": "sha512-xGGY5pXj69IxKb4yv/POoocPy/qmEGhimy/FoTpTSVju3FYXUQQMFCaZZXJVidsmGxRioZAwpThl/4zX41gRKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.55.1.tgz",
+      "integrity": "sha512-SPEpaL6DX4rmcXtnhdrQYgzQ5W2uW3SCJch88lB2zImhJRhIIK44fkUrgIV/Q8yUNfw5oyZ5vkeQsZLhCb06lw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -2738,6 +4022,93 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmmirror.com/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.9.1",
+      "resolved": "https://registry.npmmirror.com/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "picocolors": "^1.1.1",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmmirror.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.3.1",
+      "resolved": "https://registry.npmmirror.com/@testing-library/react/-/react-16.3.1.tgz",
+      "integrity": "sha512-gr4KtAWqIOQoucWYD/f6ki+j5chXfcPc74Col/6poTyqTmn7zRmodWahWRCp8tYd+GMqBonw6hstNzqjbs6gjw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.0.tgz",
@@ -2748,6 +4119,70 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmmirror.com/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmmirror.com/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmmirror.com/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmmirror.com/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmmirror.com/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmmirror.com/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -2756,6 +4191,13 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -3457,6 +4899,164 @@
         "win32"
       ]
     },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmmirror.com/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/@vitest/expect/-/expect-3.2.4.tgz",
+      "integrity": "sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "3.2.4",
+        "@vitest/utils": "3.2.4",
+        "chai": "^5.2.0",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/@vitest/mocker/-/mocker-3.2.4.tgz",
+      "integrity": "sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "3.2.4",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.17"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/@vitest/pretty-format/-/pretty-format-3.2.4.tgz",
+      "integrity": "sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/@vitest/runner/-/runner-3.2.4.tgz",
+      "integrity": "sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "3.2.4",
+        "pathe": "^2.0.3",
+        "strip-literal": "^3.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/@vitest/snapshot/-/snapshot-3.2.4.tgz",
+      "integrity": "sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.2.4",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/@vitest/spy/-/spy-3.2.4.tgz",
+      "integrity": "sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyspy": "^4.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/ui": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/@vitest/ui/-/ui-3.2.4.tgz",
+      "integrity": "sha512-hGISOaP18plkzbWEcP/QvtRW1xDXF2+96HbEX6byqQhAUbiS5oH6/9JwW+QsQCIYON2bI6QZBF+2PvOmrRZ9wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "3.2.4",
+        "fflate": "^0.8.2",
+        "flatted": "^3.3.3",
+        "pathe": "^2.0.3",
+        "sirv": "^3.0.1",
+        "tinyglobby": "^0.2.14",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "vitest": "3.2.4"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/@vitest/utils/-/utils-3.2.4.tgz",
+      "integrity": "sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.2.4",
+        "loupe": "^3.1.4",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -3478,6 +5078,16 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmmirror.com/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -3494,6 +5104,17 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -3687,6 +5308,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ast-types-flow": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
@@ -3811,6 +5442,50 @@
         "node": ">=8"
       }
     },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmmirror.com/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
@@ -3867,9 +5542,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001727",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
-      "integrity": "sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==",
+      "version": "1.0.30001764",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001764.tgz",
+      "integrity": "sha512-9JGuzl2M+vPL+pz70gtMF9sHdMFbY9FJaQBi186cHKH3pSzDvzoUJUPV6fqiKIMyXbud9ZLg4F3Yza1vJ1+93g==",
       "funding": [
         {
           "type": "opencollective",
@@ -3883,7 +5558,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/ccount": {
       "version": "2.0.1",
@@ -3894,6 +5570,23 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/chai": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmmirror.com/chai/-/chai-5.3.3.tgz",
+      "integrity": "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3946,6 +5639,16 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/check-error": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmmirror.com/check-error/-/check-error-2.1.3.tgz",
+      "integrity": "sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/chownr": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
@@ -4038,6 +5741,13 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4067,6 +5777,13 @@
         }
       ]
     },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4078,6 +5795,20 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssstyle": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmmirror.com/cssstyle/-/cssstyle-4.6.0.tgz",
+      "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^3.2.0",
+        "rrweb-cssom": "^0.8.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -4089,6 +5820,20 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "node_modules/data-urls": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -4165,6 +5910,13 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmmirror.com/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/decode-named-character-reference": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz",
@@ -4177,6 +5929,16 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/deep-eql": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -4284,6 +6046,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmmirror.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -4297,6 +6067,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.267",
+      "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
+      "integrity": "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -4438,6 +6215,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -4492,6 +6276,58 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/esbuild": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.27.2.tgz",
+      "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.27.2",
+        "@esbuild/android-arm": "0.27.2",
+        "@esbuild/android-arm64": "0.27.2",
+        "@esbuild/android-x64": "0.27.2",
+        "@esbuild/darwin-arm64": "0.27.2",
+        "@esbuild/darwin-x64": "0.27.2",
+        "@esbuild/freebsd-arm64": "0.27.2",
+        "@esbuild/freebsd-x64": "0.27.2",
+        "@esbuild/linux-arm": "0.27.2",
+        "@esbuild/linux-arm64": "0.27.2",
+        "@esbuild/linux-ia32": "0.27.2",
+        "@esbuild/linux-loong64": "0.27.2",
+        "@esbuild/linux-mips64el": "0.27.2",
+        "@esbuild/linux-ppc64": "0.27.2",
+        "@esbuild/linux-riscv64": "0.27.2",
+        "@esbuild/linux-s390x": "0.27.2",
+        "@esbuild/linux-x64": "0.27.2",
+        "@esbuild/netbsd-arm64": "0.27.2",
+        "@esbuild/netbsd-x64": "0.27.2",
+        "@esbuild/openbsd-arm64": "0.27.2",
+        "@esbuild/openbsd-x64": "0.27.2",
+        "@esbuild/openharmony-arm64": "0.27.2",
+        "@esbuild/sunos-x64": "0.27.2",
+        "@esbuild/win32-arm64": "0.27.2",
+        "@esbuild/win32-ia32": "0.27.2",
+        "@esbuild/win32-x64": "0.27.2"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -4908,6 +6744,16 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -4917,6 +6763,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -4977,6 +6833,13 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmmirror.com/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -5085,6 +6948,21 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -5122,6 +7000,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -5595,6 +7483,28 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/html-url-attributes": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
@@ -5613,6 +7523,87 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmmirror.com/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmmirror.com/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "25.7.4",
+      "resolved": "https://registry.npmmirror.com/i18next/-/i18next-25.7.4.tgz",
+      "integrity": "sha512-hRkpEblXXcXSNbw8mBNq9042OEetgyB/ahc/X17uV/khPwzV+uB8RHceHh3qavyrkPJvmXFKXME2Sy1E0KjAfw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmmirror.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.0.tgz",
+      "integrity": "sha512-P+3zEKLnOF0qmiesW383vsLdtQVyKtCNA9cjSoKCppTKPQVfKd2W8hbVo5ZhNJKDqeM7BOcvNoKJOjpHh4Js9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -5647,6 +7638,16 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/inline-style-parser": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
@@ -5956,6 +7957,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -6149,6 +8157,59 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsdom": {
+      "version": "26.1.0",
+      "resolved": "https://registry.npmmirror.com/jsdom/-/jsdom-26.1.0.tgz",
+      "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssstyle": "^4.2.1",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.5.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.16",
+        "parse5": "^7.2.1",
+        "rrweb-cssom": "^0.8.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^5.1.1",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.1.1",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -6513,6 +8574,30 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/loupe": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmmirror.com/loupe/-/loupe-3.2.1.tgz",
+      "integrity": "sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lru-cache/node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/lucide-react": {
       "version": "0.525.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.525.0.tgz",
@@ -6521,6 +8606,17 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -7390,6 +9486,16 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -7453,6 +9559,16 @@
       "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==",
       "peer": true
     },
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -7585,6 +9701,13 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -7596,6 +9719,13 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/nwsapi": {
+      "version": "2.2.23",
+      "resolved": "https://registry.npmmirror.com/nwsapi/-/nwsapi-2.2.23.tgz",
+      "integrity": "sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -7850,6 +9980,23 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pathval": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/pathval/-/pathval-2.0.1.tgz",
+      "integrity": "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -7925,6 +10072,44 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmmirror.com/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/pretty-format/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -8015,6 +10200,33 @@
         "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "16.5.3",
+      "resolved": "https://registry.npmmirror.com/react-i18next/-/react-i18next-16.5.3.tgz",
+      "integrity": "sha512-fo+/NNch37zqxOzlBYrWMx0uy/yInPkRfjSuy4lqKdaecR17nvCHnEUt3QyzA8XjQ2B/0iW/5BhaHR3ZmukpGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 25.6.2",
+        "react": ">= 16.8.0",
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -8047,6 +10259,16 @@
         "react": ">=18"
       }
     },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz",
@@ -8113,6 +10335,20 @@
         }
       }
     },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -8495,6 +10731,58 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rollup": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.55.1.tgz",
+      "integrity": "sha512-wDv/Ht1BNHB4upNbK74s9usvl7hObDnvVzknxqY/E/O3X6rW1U1rV1aENEfJ54eFZDTNo7zv1f5N4edCluH7+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.55.1",
+        "@rollup/rollup-android-arm64": "4.55.1",
+        "@rollup/rollup-darwin-arm64": "4.55.1",
+        "@rollup/rollup-darwin-x64": "4.55.1",
+        "@rollup/rollup-freebsd-arm64": "4.55.1",
+        "@rollup/rollup-freebsd-x64": "4.55.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.55.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.55.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.55.1",
+        "@rollup/rollup-linux-arm64-musl": "4.55.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.55.1",
+        "@rollup/rollup-linux-loong64-musl": "4.55.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.55.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.55.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.55.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.55.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.55.1",
+        "@rollup/rollup-linux-x64-gnu": "4.55.1",
+        "@rollup/rollup-linux-x64-musl": "4.55.1",
+        "@rollup/rollup-openbsd-x64": "4.55.1",
+        "@rollup/rollup-openharmony-arm64": "4.55.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.55.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.55.1",
+        "@rollup/rollup-win32-x64-gnu": "4.55.1",
+        "@rollup/rollup-win32-x64-msvc": "4.55.1",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/rrweb-cssom": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmmirror.com/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
+      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -8570,6 +10858,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -8773,6 +11081,28 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/sirv": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/sirv/-/sirv-3.0.2.tgz",
+      "integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/sonner": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.6.tgz",
@@ -8805,11 +11135,25 @@
       "integrity": "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==",
       "dev": true
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmmirror.com/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/state-local": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
       "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
     },
+    "node_modules/std-env": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmmirror.com/std-env/-/std-env-3.10.0.tgz",
+      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -8952,6 +11296,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -8964,6 +11321,26 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-literal": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/strip-literal/-/strip-literal-3.1.0.tgz",
+      "integrity": "sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^9.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/strip-literal/node_modules/js-tokens": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/style-to-js": {
       "version": "1.1.17",
       "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.17.tgz",
@@ -9026,6 +11403,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tailwind-merge": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
@@ -9066,14 +11450,29 @@
         "node": ">=18"
       }
     },
-    "node_modules/tinyglobby": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
-      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmmirror.com/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmmirror.com/tinyexec/-/tinyexec-0.3.2.tgz",
+      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "fdir": "^6.4.4",
-        "picomatch": "^4.0.2"
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -9083,10 +11482,14 @@
       }
     },
     "node_modules/tinyglobby/node_modules/fdir": {
-      "version": "6.4.6",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
-      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmmirror.com/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
       "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
       "peerDependencies": {
         "picomatch": "^3 || ^4"
       },
@@ -9098,9 +11501,10 @@
     },
     "node_modules/tinyglobby/node_modules/picomatch": {
       "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -9108,6 +11512,56 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/tinypool": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/tinypool/-/tinypool-1.1.1.tgz",
+      "integrity": "sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/tinyrainbow/-/tinyrainbow-2.0.0.tgz",
+      "integrity": "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tinyspy": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmmirror.com/tinyspy/-/tinyspy-4.0.4.tgz",
+      "integrity": "sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmmirror.com/tldts/-/tldts-6.1.86.tgz",
+      "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^6.1.86"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmmirror.com/tldts-core/-/tldts-core-6.1.86.tgz",
+      "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -9120,6 +11574,42 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tough-cookie": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-5.1.2.tgz",
+      "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/tr46/-/tr46-5.1.1.tgz",
+      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/trim-lines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
@@ -9266,7 +11756,7 @@
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9424,6 +11914,37 @@
         "@unrs/resolver-binding-win32-x64-msvc": "1.11.1"
       }
     },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -9485,6 +12006,15 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -9529,6 +12059,243 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/vite": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmmirror.com/vite/-/vite-7.3.1.tgz",
+      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.27.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-node": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/vite-node/-/vite-node-3.2.4.tgz",
+      "integrity": "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cac": "^6.7.14",
+        "debug": "^4.4.1",
+        "es-module-lexer": "^1.7.0",
+        "pathe": "^2.0.3",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "bin": {
+        "vite-node": "vite-node.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/vite/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmmirror.com/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/vitest": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/vitest/-/vitest-3.2.4.tgz",
+      "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/expect": "3.2.4",
+        "@vitest/mocker": "3.2.4",
+        "@vitest/pretty-format": "^3.2.4",
+        "@vitest/runner": "3.2.4",
+        "@vitest/snapshot": "3.2.4",
+        "@vitest/spy": "3.2.4",
+        "@vitest/utils": "3.2.4",
+        "chai": "^5.2.0",
+        "debug": "^4.4.1",
+        "expect-type": "^1.2.1",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.2",
+        "std-env": "^3.9.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^0.3.2",
+        "tinyglobby": "^0.2.14",
+        "tinypool": "^1.1.1",
+        "tinyrainbow": "^2.0.0",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0",
+        "vite-node": "3.2.4",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@types/debug": "^4.1.12",
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "@vitest/browser": "3.2.4",
+        "@vitest/ui": "3.2.4",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@types/debug": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/web-namespaces": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
@@ -9538,6 +12305,53 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-14.2.0.tgz",
+      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^5.1.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -9638,6 +12452,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -9647,6 +12478,45 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ws": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/yallist": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 5f9cbcc..3e0e6e9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,7 +6,10 @@
     "dev": "next dev",
     "build": "next build",
     "start": "node start-server.js",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui"
   },
   "dependencies": {
     "@hookform/resolvers": "^5.1.1",
@@ -35,12 +38,15 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
+    "i18next": "^25.7.3",
+    "i18next-browser-languagedetector": "^8.2.0",
     "lucide-react": "^0.525.0",
     "next": "^16.1.1",
     "next-themes": "^0.4.6",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-hook-form": "^7.60.0",
+    "react-i18next": "^16.5.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.6",
@@ -57,8 +63,14 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.4.2",
+    "jsdom": "^26.0.0",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.3.5",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^3.0.0",
+    "@vitest/ui": "^3.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/jest-dom": "^6.6.3"
   }
 }
diff --git a/frontend/src/app/(dashboard)/advanced/components/RebuildEmbeddings.tsx b/frontend/src/app/(dashboard)/advanced/components/RebuildEmbeddings.tsx
index 3222754..729d870 100644
--- a/frontend/src/app/(dashboard)/advanced/components/RebuildEmbeddings.tsx
+++ b/frontend/src/app/(dashboard)/advanced/components/RebuildEmbeddings.tsx
@@ -18,8 +18,10 @@ import {
 } from '@/components/ui/accordion'
 import { embeddingApi } from '@/lib/api/embedding'
 import type { RebuildEmbeddingsRequest, RebuildStatusResponse } from '@/lib/api/embedding'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 export function RebuildEmbeddings() {
+  const { t } = useTranslation()
   const [mode, setMode] = useState<'existing' | 'all'>('existing')
   const [includeSources, setIncludeSources] = useState(true)
   const [includeNotes, setIncludeNotes] = useState(true)
@@ -121,10 +123,10 @@ export function RebuildEmbeddings() {
     <Card>
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
-          🔄 Rebuild Embeddings
+          {t.advanced.rebuildEmbeddings}
         </CardTitle>
         <CardDescription>
-          Rebuild vector embeddings for your content. Use this when switching embedding models or fixing corrupted embeddings.
+          {t.advanced.rebuildEmbeddingsDesc}
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-6">
@@ -132,25 +134,25 @@ export function RebuildEmbeddings() {
         {!isRebuildActive && (
           <div className="space-y-6">
             <div className="space-y-3">
-              <Label htmlFor="mode">Rebuild Mode</Label>
+              <Label htmlFor="mode">{t.advanced.rebuild.mode}</Label>
               <Select value={mode} onValueChange={(value) => setMode(value as 'existing' | 'all')}>
                 <SelectTrigger id="mode">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="existing">Existing</SelectItem>
-                  <SelectItem value="all">All</SelectItem>
+                  <SelectItem value="existing">{t.advanced.rebuild.existing}</SelectItem>
+                  <SelectItem value="all">{t.advanced.rebuild.all}</SelectItem>
                 </SelectContent>
               </Select>
               <p className="text-sm text-muted-foreground">
                 {mode === 'existing'
-                  ? 'Re-embed only items that already have embeddings (faster, for model switching)'
-                  : 'Re-embed existing items + create embeddings for items without any (slower, comprehensive)'}
+                  ? t.advanced.rebuild.existingDesc
+                  : t.advanced.rebuild.allDesc}
               </p>
             </div>
 
-            <div className="space-y-3">
-              <Label>Include in Rebuild</Label>
+            <div className="space-y-3" role="group" aria-labelledby="include-label">
+              <span id="include-label" className="text-sm font-medium leading-none">{t.advanced.rebuild.include}</span>
               <div className="space-y-3">
                 <div className="flex items-center space-x-2">
                   <Checkbox
@@ -159,7 +161,7 @@ export function RebuildEmbeddings() {
                     onCheckedChange={(checked) => setIncludeSources(checked === true)}
                   />
                   <Label htmlFor="sources" className="font-normal cursor-pointer">
-                    Sources
+                    {t.navigation.sources}
                   </Label>
                 </div>
                 <div className="flex items-center space-x-2">
@@ -169,7 +171,7 @@ export function RebuildEmbeddings() {
                     onCheckedChange={(checked) => setIncludeNotes(checked === true)}
                   />
                   <Label htmlFor="notes" className="font-normal cursor-pointer">
-                    Notes
+                    {t.common.notes}
                   </Label>
                 </div>
                 <div className="flex items-center space-x-2">
@@ -179,7 +181,7 @@ export function RebuildEmbeddings() {
                     onCheckedChange={(checked) => setIncludeInsights(checked === true)}
                   />
                   <Label htmlFor="insights" className="font-normal cursor-pointer">
-                    Insights
+                    {t.common.insights}
                   </Label>
                 </div>
               </div>
@@ -187,7 +189,7 @@ export function RebuildEmbeddings() {
                 <Alert variant="destructive">
                   <AlertCircle className="h-4 w-4" />
                   <AlertDescription>
-                    Please select at least one item type to rebuild
+                    {t.advanced.rebuild.selectOneError}
                   </AlertDescription>
                 </Alert>
               )}
@@ -201,10 +203,10 @@ export function RebuildEmbeddings() {
               {rebuildMutation.isPending ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Starting Rebuild...
+                  {t.advanced.rebuild.starting}
                 </>
               ) : (
-                '🚀 Start Rebuild'
+                t.advanced.rebuild.startBtn
               )}
             </Button>
 
@@ -212,7 +214,7 @@ export function RebuildEmbeddings() {
               <Alert variant="destructive">
                 <AlertCircle className="h-4 w-4" />
                 <AlertDescription>
-                  Failed to start rebuild: {(rebuildMutation.error as Error)?.message || 'Unknown error'}
+                  {t.advanced.rebuild.failed}: {(rebuildMutation.error as Error)?.message || t.common.error}
                 </AlertDescription>
               </Alert>
             )}
@@ -230,21 +232,21 @@ export function RebuildEmbeddings() {
                 {status.status === 'failed' && <XCircle className="h-5 w-5 text-red-500" />}
                 <div className="flex flex-col">
                   <span className="font-medium">
-                    {status.status === 'queued' && 'Queued'}
-                    {status.status === 'running' && 'Running...'}
-                    {status.status === 'completed' && 'Completed!'}
-                    {status.status === 'failed' && 'Failed'}
+                    {status.status === 'queued' && t.advanced.rebuild.queued}
+                    {status.status === 'running' && t.advanced.rebuild.running}
+                    {status.status === 'completed' && t.advanced.rebuild.completed}
+                    {status.status === 'failed' && t.advanced.rebuild.failed}
                   </span>
                   {status.status === 'running' && (
                     <span className="text-sm text-muted-foreground">
-                      You can leave this page as this will run in the background
+                      {t.advanced.rebuild.leavePageHint}
                     </span>
                   )}
                 </div>
               </div>
               {(status.status === 'completed' || status.status === 'failed') && (
                 <Button variant="outline" size="sm" onClick={handleReset}>
-                  Start New Rebuild
+                  {t.advanced.rebuild.startNew}
                 </Button>
               )}
             </div>
@@ -252,36 +254,39 @@ export function RebuildEmbeddings() {
             {progressData && (
               <div className="space-y-2">
                 <div className="flex justify-between text-sm">
-                  <span>Progress</span>
+                  <span>{t.common.progress}</span>
                   <span className="font-medium">
-                    {processedItems}/{totalItems} items ({progressPercent.toFixed(1)}%)
+                    {t.advanced.rebuild.itemsProcessed
+                      .replace('{processed}', processedItems.toString())
+                      .replace('{total}', totalItems.toString())
+                      .replace('{percent}', progressPercent.toFixed(1))}
                   </span>
                 </div>
                 <Progress value={progressPercent} className="h-2" />
                 {failedItems > 0 && (
                   <p className="text-sm text-yellow-600">
-                    ⚠️ {failedItems} items failed to process
+                    ⚠️ {t.advanced.rebuild.failedItems.replace('{count}', failedItems.toString())}
                   </p>
                 )}
               </div>
             )}
 
-            {stats && (
+             {stats && (
               <div className="grid grid-cols-4 gap-4">
                 <div className="space-y-1">
-                  <p className="text-sm text-muted-foreground">Sources</p>
+                  <p className="text-sm text-muted-foreground">{t.navigation.sources}</p>
                   <p className="text-2xl font-bold">{sourcesProcessed}</p>
                 </div>
                 <div className="space-y-1">
-                  <p className="text-sm text-muted-foreground">Notes</p>
+                  <p className="text-sm text-muted-foreground">{t.common.notes}</p>
                   <p className="text-2xl font-bold">{notesProcessed}</p>
                 </div>
                 <div className="space-y-1">
-                  <p className="text-sm text-muted-foreground">Insights</p>
+                  <p className="text-sm text-muted-foreground">{t.common.insights}</p>
                   <p className="text-2xl font-bold">{insightsProcessed}</p>
                 </div>
                 <div className="space-y-1">
-                  <p className="text-sm text-muted-foreground">Time</p>
+                  <p className="text-sm text-muted-foreground">{t.advanced.rebuild.time}</p>
                   <p className="text-2xl font-bold">
                     {processingTimeSeconds !== undefined ? `${processingTimeSeconds.toFixed(1)}s` : '—'}
                   </p>
@@ -298,9 +303,9 @@ export function RebuildEmbeddings() {
 
             {status.started_at && (
               <div className="text-sm text-muted-foreground space-y-1">
-                <p>Started: {new Date(status.started_at).toLocaleString()}</p>
+                <p>{t.common.created.replace('{time}', new Date(status.started_at).toLocaleString())}</p>
                 {status.completed_at && (
-                  <p>Completed: {new Date(status.completed_at).toLocaleString()}</p>
+                  <p>{t.notebooks.updated}: {new Date(status.completed_at).toLocaleString()}</p>
                 )}
               </div>
             )}
@@ -308,51 +313,25 @@ export function RebuildEmbeddings() {
         )}
 
         {/* Help Section */}
-        <Accordion type="single" collapsible className="w-full">
+         <Accordion type="single" collapsible className="w-full">
           <AccordionItem value="when">
-            <AccordionTrigger>When should I rebuild embeddings?</AccordionTrigger>
+            <AccordionTrigger>{t.advanced.rebuild.whenToRebuild}</AccordionTrigger>
             <AccordionContent className="space-y-2 text-sm">
-              <p><strong>You should rebuild embeddings when:</strong></p>
-              <ul className="list-disc list-inside space-y-1 ml-2">
-                <li><strong>Switching embedding models:</strong> If you change from one embedding model to another, you need to rebuild all embeddings to ensure consistency.</li>
-                <li><strong>Upgrading model versions:</strong> When updating to a newer version of your embedding model, rebuild to take advantage of improvements.</li>
-                <li><strong>Fixing corrupted embeddings:</strong> If you suspect some embeddings are corrupted or missing, rebuilding can restore them.</li>
-                <li><strong>After bulk imports:</strong> If you imported content without embeddings, use &quot;All&quot; mode to embed everything.</li>
-              </ul>
+              <p>{t.advanced.rebuild.whenToRebuildAns}</p>
             </AccordionContent>
           </AccordionItem>
 
           <AccordionItem value="time">
-            <AccordionTrigger>How long does rebuilding take?</AccordionTrigger>
+            <AccordionTrigger>{t.advanced.rebuild.howLong}</AccordionTrigger>
             <AccordionContent className="space-y-2 text-sm">
-              <p><strong>Processing time depends on:</strong></p>
-              <ul className="list-disc list-inside space-y-1 ml-2">
-                <li>Number of items to process</li>
-                <li>Embedding model speed</li>
-                <li>API rate limits (for cloud providers)</li>
-                <li>System resources</li>
-              </ul>
-              <p className="mt-2"><strong>Typical rates:</strong></p>
-              <ul className="list-disc list-inside space-y-1 ml-2">
-                <li><strong>Local models</strong> (Ollama): Very fast, limited only by hardware</li>
-                <li><strong>Cloud APIs</strong> (OpenAI, Google): Moderate speed, may hit rate limits with large datasets</li>
-                <li><strong>Sources:</strong> Slower than notes/insights (creates multiple chunks per source)</li>
-              </ul>
-              <p className="mt-2"><em>Example: Rebuilding 200 items might take 2-5 minutes with cloud APIs, or under 1 minute with local models.</em></p>
+              <p>{t.advanced.rebuild.howLongAns}</p>
             </AccordionContent>
           </AccordionItem>
 
           <AccordionItem value="safe">
-            <AccordionTrigger>Is it safe to rebuild while using the app?</AccordionTrigger>
+            <AccordionTrigger>{t.advanced.rebuild.isSafe}</AccordionTrigger>
             <AccordionContent className="space-y-2 text-sm">
-              <p><strong>Yes, rebuilding is safe!</strong> The rebuild process:</p>
-              <ul className="list-disc list-inside space-y-1 ml-2">
-                <li>✅ <strong>Is idempotent:</strong> Running multiple times produces the same result</li>
-                <li>✅ <strong>Doesn&apos;t delete content:</strong> Only replaces embeddings</li>
-                <li>✅ <strong>Can be run anytime:</strong> No need to stop other operations</li>
-                <li>✅ <strong>Handles errors gracefully:</strong> Failed items are logged and skipped</li>
-              </ul>
-              <p className="mt-2">⚠️ <strong>However:</strong> Very large rebuilds (1000s of items) may temporarily slow down searches while processing.</p>
+              <p>{t.advanced.rebuild.isSafeAns}</p>
             </AccordionContent>
           </AccordionItem>
         </Accordion>
diff --git a/frontend/src/app/(dashboard)/advanced/components/SystemInfo.tsx b/frontend/src/app/(dashboard)/advanced/components/SystemInfo.tsx
index 7916eae..2b411d4 100644
--- a/frontend/src/app/(dashboard)/advanced/components/SystemInfo.tsx
+++ b/frontend/src/app/(dashboard)/advanced/components/SystemInfo.tsx
@@ -4,8 +4,10 @@ import { useEffect, useState } from 'react'
 import { Card } from '@/components/ui/card'
 import { getConfig } from '@/lib/config'
 import { Badge } from '@/components/ui/badge'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 export function SystemInfo() {
+  const { t } = useTranslation()
   const [config, setConfig] = useState<{
     version: string
     latestVersion?: string | null
@@ -32,8 +34,8 @@ export function SystemInfo() {
     return (
       <Card className="p-6">
         <div className="space-y-4">
-          <h2 className="text-xl font-semibold">System Information</h2>
-          <div className="text-sm text-muted-foreground">Loading...</div>
+          <h2 className="text-xl font-semibold">{t.advanced.systemInfo}</h2>
+          <div className="text-sm text-muted-foreground">{t.common.loading}</div>
         </div>
       </Card>
     )
@@ -42,37 +44,37 @@ export function SystemInfo() {
   return (
     <Card className="p-6">
       <div className="space-y-4">
-        <h2 className="text-xl font-semibold">System Information</h2>
+        <h2 className="text-xl font-semibold">{t.advanced.systemInfo}</h2>
 
         <div className="space-y-3">
           {/* Current Version */}
           <div className="flex items-center justify-between">
-            <span className="text-sm font-medium">Current Version</span>
-            <Badge variant="outline">{config?.version || 'Unknown'}</Badge>
+            <span className="text-sm font-medium">{t.advanced.currentVersion}</span>
+            <Badge variant="outline">{config?.version || t.advanced.unknown}</Badge>
           </div>
 
           {/* Latest Version */}
           {config?.latestVersion && (
             <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">Latest Version</span>
+              <span className="text-sm font-medium">{t.advanced.latestVersion}</span>
               <Badge variant="outline">{config.latestVersion}</Badge>
             </div>
           )}
 
           {/* Update Status */}
           <div className="flex items-center justify-between">
-            <span className="text-sm font-medium">Status</span>
+            <span className="text-sm font-medium">{t.advanced.status}</span>
             {config?.hasUpdate ? (
               <Badge variant="destructive">
-                Update Available
+                {t.advanced.updateAvailable.replace('{version}', config.latestVersion || '')}
               </Badge>
             ) : config?.latestVersion ? (
               <Badge variant="outline" className="text-green-600 border-green-600">
-                Up to Date
+                {t.advanced.upToDate}
               </Badge>
             ) : (
               <Badge variant="outline" className="text-muted-foreground">
-                Unknown
+                {t.advanced.unknown}
               </Badge>
             )}
           </div>
@@ -86,7 +88,7 @@ export function SystemInfo() {
                 rel="noopener noreferrer"
                 className="text-sm text-primary hover:underline inline-flex items-center gap-1"
               >
-                View on GitHub
+                {t.advanced.viewOnGithub}
                 <svg
                   className="w-4 h-4"
                   fill="none"
@@ -107,7 +109,7 @@ export function SystemInfo() {
           {/* Version Check Failed Message */}
           {!config?.latestVersion && config?.version && (
             <div className="pt-2 text-xs text-muted-foreground">
-              Unable to check for updates. GitHub may be unreachable.
+              {t.advanced.updateCheckFailed}
             </div>
           )}
         </div>
diff --git a/frontend/src/app/(dashboard)/advanced/page.tsx b/frontend/src/app/(dashboard)/advanced/page.tsx
index 71f56ea..d20331d 100644
--- a/frontend/src/app/(dashboard)/advanced/page.tsx
+++ b/frontend/src/app/(dashboard)/advanced/page.tsx
@@ -3,17 +3,19 @@
 import { AppShell } from '@/components/layout/AppShell'
 import { RebuildEmbeddings } from './components/RebuildEmbeddings'
 import { SystemInfo } from './components/SystemInfo'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 export default function AdvancedPage() {
+  const { t } = useTranslation()
   return (
     <AppShell>
       <div className="flex-1 overflow-y-auto">
         <div className="p-6">
           <div className="max-w-4xl mx-auto space-y-6">
             <div>
-              <h1 className="text-3xl font-bold">Advanced</h1>
+              <h1 className="text-3xl font-bold">{t.advanced.title}</h1>
               <p className="text-muted-foreground mt-2">
-                Advanced tools and utilities for power users
+                {t.advanced.desc}
               </p>
             </div>
 
diff --git a/frontend/src/app/(dashboard)/models/components/AddModelForm.tsx b/frontend/src/app/(dashboard)/models/components/AddModelForm.tsx
index a287a21..45066db 100644
--- a/frontend/src/app/(dashboard)/models/components/AddModelForm.tsx
+++ b/frontend/src/app/(dashboard)/models/components/AddModelForm.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useId, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { CreateModelRequest, ProviderAvailability } from '@/lib/types/models'
 import { Button } from '@/components/ui/button'
@@ -10,6 +10,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
 import { useCreateModel } from '@/lib/hooks/use-models'
 import { Plus } from 'lucide-react'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface AddModelFormProps {
   modelType: 'language' | 'embedding' | 'text_to_speech' | 'speech_to_text'
@@ -17,6 +18,9 @@ interface AddModelFormProps {
 }
 
 export function AddModelForm({ modelType, providers }: AddModelFormProps) {
+  const { t } = useTranslation()
+  const providerSelectId = useId()
+  const modelNameInputId = useId()
   const [open, setOpen] = useState(false)
   const createModel = useCreateModel()
   const { register, handleSubmit, formState: { errors }, reset, setValue, watch } = useForm<CreateModelRequest>({
@@ -37,7 +41,7 @@ export function AddModelForm({ modelType, providers }: AddModelFormProps) {
   }
 
   const getModelTypeName = () => {
-    return modelType.replace(/_/g, ' ')
+    return (t.models as Record<string, string>)[modelType] || modelType.replace(/_/g, ' ')
   }
 
   const getModelPlaceholder = () => {
@@ -51,14 +55,14 @@ export function AddModelForm({ modelType, providers }: AddModelFormProps) {
       case 'speech_to_text':
         return 'e.g., whisper-1'
       default:
-        return 'Enter model name'
+        return t.models.enterModelName
     }
   }
 
   if (availableProviders.length === 0) {
     return (
       <div className="text-sm text-muted-foreground">
-        No providers available for {getModelTypeName()} models
+        {t.models.noProvidersForType.replace('{type}', getModelTypeName())}
       </div>
     )
   }
@@ -73,24 +77,34 @@ export function AddModelForm({ modelType, providers }: AddModelFormProps) {
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
-        <Button size="sm">
+        <Button 
+          id={`add-model-${modelType}`} 
+          name={`add-model-${modelType}`} 
+          size="sm"
+        >
           <Plus className="h-4 w-4 mr-2" />
-          Add Model
+          {t.models.addModel}
         </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Add {getModelTypeName()} Model</DialogTitle>
+          <DialogTitle>
+            {t.models.addSpecificModel.replace('{type}', getModelTypeName())}
+          </DialogTitle>
           <DialogDescription>
-            Configure a new {getModelTypeName()} model from available providers.
+            {t.models.addSpecificModelDesc.replace('{type}', getModelTypeName())}
           </DialogDescription>
         </DialogHeader>
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
           <div>
-            <Label htmlFor="provider">Provider</Label>
-            <Select onValueChange={(value) => setValue('provider', value)} required>
-              <SelectTrigger>
-                <SelectValue placeholder="Select a provider" />
+            <Label htmlFor={providerSelectId}>{t.models.provider}</Label>
+            <Select 
+              name="provider" 
+              onValueChange={(value) => setValue('provider', value)} 
+              required
+            >
+              <SelectTrigger id={providerSelectId}>
+                <SelectValue placeholder={t.models.selectProviderPlaceholder} />
               </SelectTrigger>
               <SelectContent>
                 {availableProviders.map((provider) => (
@@ -101,32 +115,33 @@ export function AddModelForm({ modelType, providers }: AddModelFormProps) {
               </SelectContent>
             </Select>
             {errors.provider && (
-              <p className="text-sm text-destructive mt-1">Provider is required</p>
+              <p className="text-sm text-destructive mt-1">{t.models.providerRequired}</p>
             )}
           </div>
 
           <div>
-            <Label htmlFor="name">Model Name</Label>
+            <Label htmlFor={modelNameInputId}>{t.models.modelName}</Label>
             <Input
-              id="name"
-              {...register('name', { required: 'Model name is required' })}
+              id={modelNameInputId}
+              {...register('name', { required: t.models.modelNameRequired })}
               placeholder={getModelPlaceholder()}
+              autoComplete="off"
             />
             {errors.name && (
               <p className="text-sm text-destructive mt-1">{errors.name.message}</p>
             )}
             <p className="text-xs text-muted-foreground mt-1">
               {modelType === 'language' && watch('provider') === 'azure' &&
-                'For Azure, use the deployment name as the model name'}
+                t.models.azureHint}
             </p>
           </div>
 
           <div className="flex justify-end gap-2">
             <Button type="button" variant="outline" onClick={() => setOpen(false)}>
-              Cancel
+              {t.common.cancel}
             </Button>
             <Button type="submit" disabled={createModel.isPending}>
-              {createModel.isPending ? 'Adding...' : 'Add Model'}
+              {createModel.isPending ? t.models.adding : t.models.addModel}
             </Button>
           </div>
         </form>
diff --git a/frontend/src/app/(dashboard)/models/components/DefaultModelsSection.tsx b/frontend/src/app/(dashboard)/models/components/DefaultModelsSection.tsx
index d3f42cf..492f0f0 100644
--- a/frontend/src/app/(dashboard)/models/components/DefaultModelsSection.tsx
+++ b/frontend/src/app/(dashboard)/models/components/DefaultModelsSection.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useId } from 'react'
 import { useForm } from 'react-hook-form'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
@@ -11,74 +11,86 @@ import { ModelDefaults, Model } from '@/lib/types/models'
 import { useUpdateModelDefaults } from '@/lib/hooks/use-models'
 import { AlertCircle, X } from 'lucide-react'
 import { EmbeddingModelChangeDialog } from './EmbeddingModelChangeDialog'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface DefaultModelsSectionProps {
   models: Model[]
   defaults: ModelDefaults
 }
 
-interface DefaultConfig {
-  key: keyof ModelDefaults
-  label: string
-  description: string
-  modelType: 'language' | 'embedding' | 'text_to_speech' | 'speech_to_text'
-  required?: boolean
-}
-
-const defaultConfigs: DefaultConfig[] = [
-  {
-    key: 'default_chat_model',
-    label: 'Chat Model',
-    description: 'Used for chat conversations',
-    modelType: 'language',
-    required: true
-  },
-  {
-    key: 'default_transformation_model',
-    label: 'Transformation Model',
-    description: 'Used for summaries, insights, and transformations',
-    modelType: 'language',
-    required: true
-  },
-  {
-    key: 'default_tools_model',
-    label: 'Tools Model',
-    description: 'Used for function calling - OpenAI or Anthropic recommended',
-    modelType: 'language'
-  },
-  {
-    key: 'large_context_model',
-    label: 'Large Context Model',
-    description: 'Used for processing large documents - Gemini recommended',
-    modelType: 'language'
-  },
-  {
-    key: 'default_embedding_model',
-    label: 'Embedding Model',
-    description: 'Used for semantic search and vector embeddings',
-    modelType: 'embedding',
-    required: true
-  },
-  {
-    key: 'default_text_to_speech_model',
-    label: 'Text-to-Speech Model',
-    description: 'Used for podcast generation',
-    modelType: 'text_to_speech'
-  },
-  {
-    key: 'default_speech_to_text_model',
-    label: 'Speech-to-Text Model',
-    description: 'Used for audio transcription',
-    modelType: 'speech_to_text'
-  }
-]
-
 export function DefaultModelsSection({ models, defaults }: DefaultModelsSectionProps) {
+  const { t } = useTranslation()
   const updateDefaults = useUpdateModelDefaults()
   const { setValue, watch } = useForm<ModelDefaults>({
     defaultValues: defaults
   })
 
+  interface DefaultConfig {
+    key: keyof ModelDefaults
+    label: string
+    description: string
+    modelType: 'language' | 'embedding' | 'text_to_speech' | 'speech_to_text'
+    required?: boolean
+    id: string
+  }
+
+  const generatedId = useId()
+
+  const defaultConfigs: DefaultConfig[] = [
+    {
+      key: 'default_chat_model',
+      label: t.models.chatModelLabel,
+      description: t.models.chatModelDesc,
+      modelType: 'language',
+      required: true,
+      id: `${generatedId}-chat`,
+    },
+    {
+      key: 'default_transformation_model',
+      label: t.models.transformationModelLabel,
+      description: t.models.transformationModelDesc,
+      modelType: 'language',
+      required: true,
+      id: `${generatedId}-transformation`,
+    },
+    {
+      key: 'default_tools_model',
+      label: t.models.toolsModelLabel,
+      description: t.models.toolsModelDesc,
+      modelType: 'language',
+      id: `${generatedId}-tools`,
+    },
+    {
+      key: 'large_context_model',
+      label: t.models.largeContextModelLabel,
+      description: t.models.largeContextModelDesc,
+      modelType: 'language',
+      id: `${generatedId}-large-context`,
+    },
+    {
+      key: 'default_embedding_model',
+      label: t.models.embeddingModelLabel,
+      description: t.models.embeddingModelDesc,
+      modelType: 'embedding',
+      required: true,
+      id: `${generatedId}-embedding`,
+    },
+    {
+      key: 'default_text_to_speech_model',
+      label: t.models.ttsModelLabel,
+      description: t.models.ttsModelDesc,
+      modelType: 'text_to_speech',
+      id: `${generatedId}-tts`,
+    },
+    {
+      key: 'default_speech_to_text_model',
+      label: t.models.sttModelLabel,
+      description: t.models.sttModelDesc,
+      modelType: 'speech_to_text',
+      id: `${generatedId}-stt`,
+    },
+  ]
+
   // State for embedding model change dialog
   const [showEmbeddingDialog, setShowEmbeddingDialog] = useState(false)
   const [pendingEmbeddingChange, setPendingEmbeddingChange] = useState<{
@@ -153,9 +165,9 @@ export function DefaultModelsSection({ models, defaults }: DefaultModelsSectionP
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Default Model Assignments</CardTitle>
+        <CardTitle>{t.models.defaultAssignments}</CardTitle>
         <CardDescription>
-          Configure which models to use for different purposes across Open Notebook
+          {t.models.defaultAssignmentsDesc}
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-6">
@@ -163,8 +175,7 @@ export function DefaultModelsSection({ models, defaults }: DefaultModelsSectionP
           <Alert>
             <AlertCircle className="h-4 w-4" />
             <AlertDescription>
-              Missing required models: {missingRequired.join(', ')}. 
-              Open Notebook may not function properly without these.
+              {t.models.missingRequiredModels.replace('{models}', missingRequired.join(', '))}
             </AlertDescription>
           </Alert>
         )}
@@ -179,7 +190,7 @@ export function DefaultModelsSection({ models, defaults }: DefaultModelsSectionP
 
             return (
               <div key={config.key} className="space-y-2">
-                <Label>
+                <Label htmlFor={config.id}>
                   {config.label}
                   {config.required && <span className="text-destructive ml-1">*</span>}
                 </Label>
@@ -188,15 +199,18 @@ export function DefaultModelsSection({ models, defaults }: DefaultModelsSectionP
                     value={currentValue || ""}
                     onValueChange={(value) => handleChange(config.key, value)}
                   >
-                    <SelectTrigger className={
-                      config.required && !isValidModel && availableModels.length > 0
-                        ? 'border-destructive' 
-                        : ''
-                    }>
+                    <SelectTrigger 
+                      id={config.id}
+                      className={
+                        config.required && !isValidModel && availableModels.length > 0
+                          ? 'border-destructive' 
+                          : ''
+                      }
+                    >
                       <SelectValue placeholder={
                         config.required && !isValidModel && availableModels.length > 0 
-                          ? "⚠️ Required - Select a model"
-                          : "Select a model"
+                          ? t.models.requiredModelPlaceholder
+                          : t.models.selectModelPlaceholder
                       } />
                     </SelectTrigger>
                     <SelectContent>
@@ -236,7 +250,7 @@ export function DefaultModelsSection({ models, defaults }: DefaultModelsSectionP
             rel="noopener noreferrer"
             className="text-sm text-primary hover:underline"
           >
-            Which model should I choose? →
+            {t.models.whichModelToChoose}
           </a>
         </div>
       </CardContent>
diff --git a/frontend/src/app/(dashboard)/models/components/EmbeddingModelChangeDialog.tsx b/frontend/src/app/(dashboard)/models/components/EmbeddingModelChangeDialog.tsx
index a81a3b9..05646d0 100644
--- a/frontend/src/app/(dashboard)/models/components/EmbeddingModelChangeDialog.tsx
+++ b/frontend/src/app/(dashboard)/models/components/EmbeddingModelChangeDialog.tsx
@@ -14,6 +14,7 @@ import {
 } from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { AlertTriangle, ExternalLink } from 'lucide-react'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface EmbeddingModelChangeDialogProps {
   open: boolean
@@ -30,6 +31,7 @@ export function EmbeddingModelChangeDialog({
   oldModelName,
   newModelName
 }: EmbeddingModelChangeDialogProps) {
+  const { t } = useTranslation()
   const router = useRouter()
   const [isConfirming, setIsConfirming] = useState(false)
 
@@ -55,54 +57,49 @@ export function EmbeddingModelChangeDialog({
         <AlertDialogHeader>
           <div className="flex items-center gap-2 mb-2">
             <AlertTriangle className="h-5 w-5 text-yellow-500" />
-            <AlertDialogTitle>Embedding Model Change</AlertDialogTitle>
+            <AlertDialogTitle>{t.models.embeddingChangeTitle}</AlertDialogTitle>
           </div>
           <AlertDialogDescription asChild>
             <div className="space-y-3 text-base text-muted-foreground">
               <p>
-                You are about to change your embedding model{' '}
-                {oldModelName && newModelName && (
-                  <>
-                    from <strong>{oldModelName}</strong> to <strong>{newModelName}</strong>
-                  </>
-                )}
-                .
+                {t.models.embeddingChangeConfirm
+                  .replace('{from}', oldModelName || '...')
+                  .replace('{to}', newModelName || '...')}
               </p>
 
               <div className="bg-muted p-4 rounded-md space-y-2">
-                <p className="font-semibold text-foreground">⚠️ Important: Rebuild Required</p>
+                <p className="font-semibold text-foreground">⚠️ {t.models.rebuildRequired}</p>
                 <p className="text-sm">
-                  Changing your embedding model requires rebuilding all existing embeddings to maintain consistency.
-                  Without rebuilding, your searches may return incorrect or incomplete results.
+                  {t.models.rebuildReason}
                 </p>
               </div>
 
               <div className="space-y-2 text-sm">
-                <p className="font-medium text-foreground">What happens next:</p>
+                <p className="font-medium text-foreground">{t.models.whatHappensNext}</p>
                 <ul className="list-disc list-inside space-y-1 ml-2">
-                  <li>Your default embedding model will be updated</li>
-                  <li>Existing embeddings will remain unchanged until rebuild</li>
-                  <li>New content will use the new embedding model</li>
-                  <li>You should rebuild embeddings as soon as possible</li>
+                  <li>{t.models.step1}</li>
+                  <li>{t.models.step2}</li>
+                  <li>{t.models.step3}</li>
+                  <li>{t.models.step4}</li>
                 </ul>
               </div>
 
               <p className="text-sm font-medium text-foreground">
-                Would you like to proceed to the Advanced page to start the rebuild now?
+                {t.models.proceedToRebuildPrompt}
               </p>
             </div>
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter className="flex-col sm:flex-row gap-2">
           <AlertDialogCancel disabled={isConfirming}>
-            Cancel
+            {t.common.cancel}
           </AlertDialogCancel>
           <Button
             variant="outline"
             onClick={handleConfirmOnly}
             disabled={isConfirming}
           >
-            Change Model Only
+            {t.models.changeModelOnly}
           </Button>
           <AlertDialogAction
             onClick={handleConfirmAndRebuild}
@@ -110,7 +107,7 @@ export function EmbeddingModelChangeDialog({
             className="bg-primary"
           >
             <ExternalLink className="mr-2 h-4 w-4" />
-            Change & Go to Rebuild
+            {t.models.changeAndRebuild}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
diff --git a/frontend/src/app/(dashboard)/models/components/ModelTypeSection.tsx b/frontend/src/app/(dashboard)/models/components/ModelTypeSection.tsx
index 3d1afe5..9810ebd 100644
--- a/frontend/src/app/(dashboard)/models/components/ModelTypeSection.tsx
+++ b/frontend/src/app/(dashboard)/models/components/ModelTypeSection.tsx
@@ -10,6 +10,7 @@ import { LoadingSpinner } from '@/components/common/LoadingSpinner'
 import { useDeleteModel } from '@/lib/hooks/use-models'
 import { ConfirmDialog } from '@/components/common/ConfirmDialog'
 import { useState, useMemo } from 'react'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface ModelTypeSectionProps {
   type: 'language' | 'embedding' | 'text_to_speech' | 'speech_to_text'
@@ -21,6 +22,7 @@ interface ModelTypeSectionProps {
 const COLLAPSED_ITEM_COUNT = 5
 
 export function ModelTypeSection({ type, models, providers, isLoading }: ModelTypeSectionProps) {
+  const { t } = useTranslation()
   const [deleteModel, setDeleteModel] = useState<Model | null>(null)
   const [selectedProvider, setSelectedProvider] = useState<string | null>(null)
   const [isExpanded, setIsExpanded] = useState(false)
@@ -30,32 +32,32 @@ export function ModelTypeSection({ type, models, providers, isLoading }: ModelTy
     switch (type) {
       case 'language':
         return {
-          title: 'Language Models',
-          description: 'Chat, transformations, and text generation',
+          title: t.models.language,
+          description: t.models.languageDesc,
           icon: Bot,
           iconColor: 'text-blue-500',
           bgColor: 'bg-blue-50 dark:bg-blue-950/20'
         }
       case 'embedding':
         return {
-          title: 'Embedding Models',
-          description: 'Semantic search and vector embeddings',
+          title: t.models.embedding,
+          description: t.models.embeddingDesc,
           icon: Search,
           iconColor: 'text-green-500',
           bgColor: 'bg-green-50 dark:bg-green-950/20'
         }
       case 'text_to_speech':
         return {
-          title: 'Text-to-Speech',
-          description: 'Generate audio from text',
+          title: t.models.tts,
+          description: t.models.ttsDesc,
           icon: Volume2,
           iconColor: 'text-purple-500',
           bgColor: 'bg-purple-50 dark:bg-purple-950/20'
         }
       case 'speech_to_text':
         return {
-          title: 'Speech-to-Text',
-          description: 'Transcribe audio to text',
+          title: t.models.stt,
+          description: t.models.sttDesc,
           icon: Mic,
           iconColor: 'text-orange-500',
           bgColor: 'bg-orange-50 dark:bg-orange-950/20'
@@ -118,7 +120,7 @@ export function ModelTypeSection({ type, models, providers, isLoading }: ModelTy
                 className="cursor-pointer text-xs"
                 onClick={() => setSelectedProvider(null)}
               >
-                All
+                {t.models.all}
               </Badge>
               {modelProviders.map(provider => (
                 <Badge
@@ -143,8 +145,8 @@ export function ModelTypeSection({ type, models, providers, isLoading }: ModelTy
           ) : filteredModels.length === 0 ? (
             <div className="text-center py-6 text-sm text-muted-foreground">
               {selectedProvider 
-                ? `No ${selectedProvider} models configured`
-                : 'No models configured'
+                ? t.models.noProviderModelsConfigured.replace('{provider}', selectedProvider)
+                : t.models.noModelsConfigured
               }
             </div>
           ) : (
@@ -182,12 +184,12 @@ export function ModelTypeSection({ type, models, providers, isLoading }: ModelTy
                   {isExpanded ? (
                     <>
                       <ChevronUp className="h-4 w-4 mr-2" />
-                      Show less
+                      {t.models.seeLess}
                     </>
                   ) : (
                     <>
                       <ChevronDown className="h-4 w-4 mr-2" />
-                      Show {filteredModels.length - COLLAPSED_ITEM_COUNT} more
+                      {t.models.showMore.replace('{count}', (filteredModels.length - COLLAPSED_ITEM_COUNT).toString())}
                     </>
                   )}
                 </Button>
@@ -200,9 +202,9 @@ export function ModelTypeSection({ type, models, providers, isLoading }: ModelTy
       <ConfirmDialog
         open={!!deleteModel}
         onOpenChange={(open) => !open && setDeleteModel(null)}
-        title="Delete Model"
-        description={`Are you sure you want to delete "${deleteModel?.name}"? This action cannot be undone.`}
-        confirmText="Delete"
+        title={t.models.deleteModel}
+        description={t.models.deleteModelDesc.replace('{name}', deleteModel?.name || '')}
+        confirmText={t.common.delete}
         confirmVariant="destructive"
         onConfirm={handleDelete}
       />
diff --git a/frontend/src/app/(dashboard)/models/components/ProviderStatus.tsx b/frontend/src/app/(dashboard)/models/components/ProviderStatus.tsx
index 4d726b9..3d29ac2 100644
--- a/frontend/src/app/(dashboard)/models/components/ProviderStatus.tsx
+++ b/frontend/src/app/(dashboard)/models/components/ProviderStatus.tsx
@@ -6,12 +6,14 @@ import { Badge } from '@/components/ui/badge'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Check, X } from 'lucide-react'
 import { ProviderAvailability } from '@/lib/types/models'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface ProviderStatusProps {
   providers: ProviderAvailability
 }
 
 export function ProviderStatus({ providers }: ProviderStatusProps) {
+  const { t } = useTranslation()
   // Combine all providers, with available ones first
   const allProviders = useMemo(
     () => [
@@ -33,11 +35,13 @@ export function ProviderStatus({ providers }: ProviderStatusProps) {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>AI Providers</CardTitle>
+        <CardTitle>{t.models.aiProviders}</CardTitle>
         <CardDescription>
-          Configure providers through environment variables to enable their models. 
+          {t.models.providerConfigDesc}
           <span className="ml-1">
-            {providers.available.length} of {allProviders.length} configured
+            {t.models.configuredCount
+              .replace('{count}', providers.available.length.toString())
+              .replace('{total}', allProviders.length.toString())}
           </span>
         </CardDescription>
       </CardHeader>
@@ -74,21 +78,21 @@ export function ProviderStatus({ providers }: ProviderStatusProps) {
                     {provider.name}
                   </span>
 
-                  {provider.available ? (
+                   {provider.available ? (
                     <div className="flex flex-wrap items-center justify-end gap-1">
                       {supportedTypes.length > 0 ? (
                         supportedTypes.map((type) => (
                           <Badge key={type} variant="secondary" className="text-xs font-medium">
-                            {type.replace('_', ' ')}
+                            {(t.models as Record<string, string>)[type] || type.replace('_', ' ')}
                           </Badge>
                         ))
                       ) : (
-                        <Badge variant="outline" className="text-xs">No models</Badge>
+                        <Badge variant="outline" className="text-xs">{t.models.noModels}</Badge>
                       )}
                     </div>
                   ) : (
                     <Badge variant="outline" className="text-xs text-muted-foreground border-dashed">
-                      Not configured
+                      {t.models.notConfigured}
                     </Badge>
                   )}
                 </div>
@@ -97,26 +101,28 @@ export function ProviderStatus({ providers }: ProviderStatusProps) {
           })}
         </div>
 
-        {allProviders.length > 6 ? (
+         {allProviders.length > 6 ? (
           <div className="mt-4 flex justify-center">
             <button
               type="button"
               onClick={() => setExpanded((prev) => !prev)}
               className="text-sm font-medium text-primary hover:underline"
             >
-              {expanded ? 'See less' : `See all ${allProviders.length} providers`}
+              {expanded 
+                ? t.models.seeLess 
+                : t.models.seeAll.replace('{count}', allProviders.length.toString())}
             </button>
           </div>
         ) : null}
 
-        <div className="mt-6 pt-4 border-t">
+         <div className="mt-6 pt-4 border-t">
           <a
             href="https://github.com/lfnovo/open-notebook/blob/main/docs/5-CONFIGURATION/ai-providers.md"
             target="_blank"
             rel="noopener noreferrer"
             className="text-sm text-primary hover:underline"
           >
-            Learn how to configure providers →
+            {t.models.learnMore}
           </a>
         </div>
       </CardContent>
diff --git a/frontend/src/app/(dashboard)/models/page.tsx b/frontend/src/app/(dashboard)/models/page.tsx
index d4ab74f..ff8e65d 100644
--- a/frontend/src/app/(dashboard)/models/page.tsx
+++ b/frontend/src/app/(dashboard)/models/page.tsx
@@ -8,8 +8,10 @@ import { useModels, useModelDefaults, useProviders } from '@/lib/hooks/use-model
 import { LoadingSpinner } from '@/components/common/LoadingSpinner'
 import { RefreshCw } from 'lucide-react'
 import { Button } from '@/components/ui/button'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 export default function ModelsPage() {
+  const { t } = useTranslation()
   const { data: models, isLoading: modelsLoading, refetch: refetchModels } = useModels()
   const { data: defaults, isLoading: defaultsLoading, refetch: refetchDefaults } = useModelDefaults()
   const { data: providers, isLoading: providersLoading, refetch: refetchProviders } = useProviders()
@@ -35,7 +37,7 @@ export default function ModelsPage() {
       <AppShell>
         <div className="p-6">
           <div className="text-center py-12">
-            <p className="text-muted-foreground">Failed to load models data</p>
+            <p className="text-muted-foreground">{t.models.failedToLoad}</p>
           </div>
         </div>
       </AppShell>
@@ -48,9 +50,9 @@ export default function ModelsPage() {
         <div className="p-6 space-y-6">
           <div className="flex items-center justify-between">
             <div>
-              <h1 className="text-2xl font-bold">Model Management</h1>
+              <h1 className="text-2xl font-bold">{t.models.title}</h1>
               <p className="text-muted-foreground mt-1">
-                Configure AI models for different purposes across Open Notebook
+                {t.models.desc}
               </p>
             </div>
             <Button variant="outline" size="sm" onClick={handleRefresh}>
diff --git a/frontend/src/app/(dashboard)/notebooks/[id]/page.tsx b/frontend/src/app/(dashboard)/notebooks/[id]/page.tsx
index 4e08cb3..33e1d21 100644
--- a/frontend/src/app/(dashboard)/notebooks/[id]/page.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/[id]/page.tsx
@@ -13,6 +13,7 @@ import { useNotes } from '@/lib/hooks/use-notes'
 import { LoadingSpinner } from '@/components/common/LoadingSpinner'
 import { useNotebookColumnsStore } from '@/lib/stores/notebook-columns-store'
 import { useIsDesktop } from '@/lib/hooks/use-media-query'
+import { useTranslation } from '@/lib/hooks/use-translation'
 import { cn } from '@/lib/utils'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { FileText, StickyNote, MessageSquare } from 'lucide-react'
@@ -25,10 +26,11 @@ export interface ContextSelections {
 }
 
 export default function NotebookPage() {
+  const { t } = useTranslation()
   const params = useParams()
 
   // Ensure the notebook ID is properly decoded from URL
-  const notebookId = decodeURIComponent(params.id as string)
+  const notebookId = params?.id ? decodeURIComponent(params.id as string) : ''
 
   const { data: notebook, isLoading: notebookLoading } = useNotebook(notebookId)
   const {
@@ -112,8 +114,8 @@ export default function NotebookPage() {
     return (
       <AppShell>
         <div className="p-6">
-          <h1 className="text-2xl font-bold mb-4">Notebook Not Found</h1>
-          <p className="text-muted-foreground">The requested notebook could not be found.</p>
+          <h1 className="text-2xl font-bold mb-4">{t.notebooks.notFound}</h1>
+          <p className="text-muted-foreground">{t.notebooks.notFoundDesc}</p>
         </div>
       </AppShell>
     )
@@ -135,15 +137,15 @@ export default function NotebookPage() {
                   <TabsList className="grid w-full grid-cols-3">
                     <TabsTrigger value="sources" className="gap-2">
                       <FileText className="h-4 w-4" />
-                      Sources
+                      {t.navigation.sources}
                     </TabsTrigger>
                     <TabsTrigger value="notes" className="gap-2">
                       <StickyNote className="h-4 w-4" />
-                      Notes
+                      {t.common.notes}
                     </TabsTrigger>
                     <TabsTrigger value="chat" className="gap-2">
                       <MessageSquare className="h-4 w-4" />
-                      Chat
+                      {t.common.chat}
                     </TabsTrigger>
                   </TabsList>
                 </Tabs>
diff --git a/frontend/src/app/(dashboard)/notebooks/components/ChatColumn.test.tsx b/frontend/src/app/(dashboard)/notebooks/components/ChatColumn.test.tsx
new file mode 100644
index 0000000..5e2b7f5
--- /dev/null
+++ b/frontend/src/app/(dashboard)/notebooks/components/ChatColumn.test.tsx
@@ -0,0 +1,74 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import { ChatColumn } from './ChatColumn'
+import { useSources } from '@/lib/hooks/use-sources'
+import { useNotes } from '@/lib/hooks/use-notes'
+import { useNotebookChat } from '@/lib/hooks/useNotebookChat'
+
+// Mock the hooks
+vi.mock('@/lib/hooks/use-sources')
+vi.mock('@/lib/hooks/use-notes')
+vi.mock('@/lib/hooks/useNotebookChat')
+vi.mock('@/components/source/ChatPanel', () => ({
+  ChatPanel: () => <div data-testid="chat-panel" />
+}))
+
+// Type-safe mock factory for useSources hook
+function createSourcesMock(overrides: { isLoading?: boolean } = {}) {
+  return {
+    data: [],
+    isLoading: overrides.isLoading ?? false,
+  } as unknown as ReturnType<typeof useSources>
+}
+
+// Type-safe mock factory for useNotes hook
+function createNotesMock(overrides: { isLoading?: boolean } = {}) {
+  return {
+    data: [],
+    isLoading: overrides.isLoading ?? false,
+  } as unknown as ReturnType<typeof useNotes>
+}
+
+// Type-safe mock factory for useNotebookChat hook
+function createChatMock() {
+  return {
+    messages: [],
+    isSending: false,
+    tokenCount: 0,
+    charCount: 0,
+    sessions: [],
+    currentSessionId: null,
+  } as unknown as ReturnType<typeof useNotebookChat>
+}
+
+describe('ChatColumn', () => {
+  const mockProps = {
+    notebookId: 'test-notebook',
+    contextSelections: {
+      sources: {},
+      notes: {}
+    }
+  }
+
+  it('shows loading spinner when fetching data', () => {
+    vi.mocked(useSources).mockReturnValue(createSourcesMock({ isLoading: true }))
+    vi.mocked(useNotes).mockReturnValue(createNotesMock({ isLoading: true }))
+    vi.mocked(useNotebookChat).mockReturnValue(createChatMock())
+
+    render(<ChatColumn {...mockProps} />)
+    
+    // Should show loading spinner
+    expect(screen.getByTestId('loading-spinner')).toBeInTheDocument()
+  })
+
+  it('renders chat panel when data is loaded', () => {
+    vi.mocked(useSources).mockReturnValue(createSourcesMock({ isLoading: false }))
+    vi.mocked(useNotes).mockReturnValue(createNotesMock({ isLoading: false }))
+    vi.mocked(useNotebookChat).mockReturnValue(createChatMock())
+
+    render(<ChatColumn {...mockProps} />)
+    
+    // Should show chat panel
+    expect(screen.getByTestId('chat-panel')).toBeInTheDocument()
+  })
+})
diff --git a/frontend/src/app/(dashboard)/notebooks/components/ChatColumn.tsx b/frontend/src/app/(dashboard)/notebooks/components/ChatColumn.tsx
index be8ce32..cc7a943 100644
--- a/frontend/src/app/(dashboard)/notebooks/components/ChatColumn.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/components/ChatColumn.tsx
@@ -9,6 +9,7 @@ import { LoadingSpinner } from '@/components/common/LoadingSpinner'
 import { Card, CardContent } from '@/components/ui/card'
 import { AlertCircle } from 'lucide-react'
 import { ContextSelections } from '../[id]/page'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface ChatColumnProps {
   notebookId: string
@@ -16,6 +17,8 @@ interface ChatColumnProps {
 }
 
 export function ChatColumn({ notebookId, contextSelections }: ChatColumnProps) {
+  const { t } = useTranslation()
+
   // Fetch sources and notes for this notebook
   const { data: sources = [], isLoading: sourcesLoading } = useSources(notebookId)
   const { data: notes = [], isLoading: notesLoading } = useNotes(notebookId)
@@ -79,8 +82,8 @@ export function ChatColumn({ notebookId, contextSelections }: ChatColumnProps) {
         <CardContent className="flex-1 flex items-center justify-center">
           <div className="text-center text-muted-foreground">
             <AlertCircle className="h-12 w-12 mx-auto mb-4 opacity-50" />
-            <p className="text-sm">Unable to load chat</p>
-            <p className="text-xs mt-2">Please try refreshing the page</p>
+            <p className="text-sm">{t.chat.unableToLoadChat}</p>
+            <p className="text-xs mt-2">{t.common.refreshPage || 'Please try refreshing the page'}</p>
           </div>
         </CardContent>
       </Card>
@@ -89,7 +92,7 @@ export function ChatColumn({ notebookId, contextSelections }: ChatColumnProps) {
 
   return (
     <ChatPanel
-      title="Chat with Notebook"
+      title={t.chat.chatWithNotebook}
       contextType="notebook"
       messages={chat.messages}
       isStreaming={chat.isSending}
diff --git a/frontend/src/app/(dashboard)/notebooks/components/NoteEditorDialog.tsx b/frontend/src/app/(dashboard)/notebooks/components/NoteEditorDialog.tsx
index c71c52a..63aca5a 100644
--- a/frontend/src/app/(dashboard)/notebooks/components/NoteEditorDialog.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/components/NoteEditorDialog.tsx
@@ -12,6 +12,7 @@ import { QUERY_KEYS } from '@/lib/api/query-client'
 import { MarkdownEditor } from '@/components/ui/markdown-editor'
 import { InlineEdit } from '@/components/common/InlineEdit'
 import { cn } from "@/lib/utils";
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 const createNoteSchema = z.object({
   title: z.string().optional(),
@@ -28,6 +29,7 @@ interface NoteEditorDialogProps {
 }
 
 export function NoteEditorDialog({ open, onOpenChange, notebookId, note }: NoteEditorDialogProps) {
+  const { t } = useTranslation()
   const createNote = useCreateNote()
   const updateNote = useUpdateNote()
   const queryClient = useQueryClient()
@@ -122,21 +124,23 @@ export function NoteEditorDialog({ open, onOpenChange, notebookId, note }: NoteE
           isEditorFullscreen && "!max-w-screen !max-h-screen border-none w-screen h-screen"
       )}>
         <DialogTitle className="sr-only">
-          {isEditing ? 'Edit note' : 'Create note'}
+          {isEditing ? t.sources.editNote : t.sources.createNote}
         </DialogTitle>
         <form onSubmit={handleSubmit(onSubmit)} className="flex h-full flex-col">
           {isEditing && noteLoading ? (
             <div className="flex-1 flex items-center justify-center py-10">
-              <span className="text-sm text-muted-foreground">Loading note…</span>
+              <span className="text-sm text-muted-foreground">{t.common.loading}</span>
             </div>
           ) : (
             <>
               <div className="border-b px-6 py-4">
                 <InlineEdit
+                  id="note-title"
+                  name="title"
                   value={watchTitle ?? ''}
                   onSave={(value) => setValue('title', value || '')}
-                  placeholder="Add a title..."
-                  emptyText="Untitled Note"
+                  placeholder={t.sources.addTitle}
+                  emptyText={t.sources.untitledNote}
                   className="text-xl font-semibold"
                   inputClassName="text-xl font-semibold"
                 />
@@ -152,10 +156,11 @@ export function NoteEditorDialog({ open, onOpenChange, notebookId, note }: NoteE
                   render={({ field }) => (
                     <MarkdownEditor
                       key={note?.id ?? 'new'}
+                      textareaId="note-content"
                       value={field.value}
                       onChange={field.onChange}
                       height={420}
-                      placeholder="Write your note content here..."
+                      placeholder={t.sources.writeNotePlaceholder}
                       className={cn(
                           "w-full h-full min-h-[420px] [&_.w-md-editor]:!static [&_.w-md-editor]:!w-full [&_.w-md-editor]:!h-full",
                           !isEditorFullscreen && "rounded-md border"
@@ -172,17 +177,17 @@ export function NoteEditorDialog({ open, onOpenChange, notebookId, note }: NoteE
 
           <div className="border-t px-6 py-4 flex justify-end gap-2">
             <Button type="button" variant="outline" onClick={handleClose}>
-              Cancel
+              {t.common.cancel}
             </Button>
             <Button
               type="submit"
               disabled={isSaving || (isEditing && noteLoading)}
             >
               {isSaving
-                ? isEditing ? 'Saving...' : 'Creating...'
+                ? isEditing ? `${t.common.saving}...` : `${t.common.creating}...`
                 : isEditing
-                  ? 'Save Note'
-                  : 'Create Note'}
+                  ? t.sources.saveNote
+                  : t.sources.createNoteBtn}
             </Button>
           </div>
         </form>
diff --git a/frontend/src/app/(dashboard)/notebooks/components/NotebookCard.tsx b/frontend/src/app/(dashboard)/notebooks/components/NotebookCard.tsx
index 7cff89d..1cfaee4 100644
--- a/frontend/src/app/(dashboard)/notebooks/components/NotebookCard.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/components/NotebookCard.tsx
@@ -16,12 +16,14 @@ import {
 import { useUpdateNotebook, useDeleteNotebook } from '@/lib/hooks/use-notebooks'
 import { ConfirmDialog } from '@/components/common/ConfirmDialog'
 import { useState } from 'react'
-
+import { useTranslation } from '@/lib/hooks/use-translation'
+import { getDateLocale } from '@/lib/utils/date-locale'
 interface NotebookCardProps {
   notebook: NotebookResponse
 }
 
 export function NotebookCard({ notebook }: NotebookCardProps) {
+  const { t, language } = useTranslation()
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
   const router = useRouter()
   const updateNotebook = useUpdateNotebook()
@@ -59,7 +61,7 @@ export function NotebookCard({ notebook }: NotebookCardProps) {
                 </CardTitle>
                 {notebook.archived && (
                   <Badge variant="secondary" className="mt-1">
-                    Archived
+                    {t.notebooks.archived}
                   </Badge>
                 )}
               </div>
@@ -80,12 +82,12 @@ export function NotebookCard({ notebook }: NotebookCardProps) {
                     {notebook.archived ? (
                       <>
                         <ArchiveRestore className="h-4 w-4 mr-2" />
-                        Unarchive
+                        {t.notebooks.unarchive}
                       </>
                     ) : (
                       <>
                         <Archive className="h-4 w-4 mr-2" />
-                        Archive
+                        {t.notebooks.archive}
                       </>
                     )}
                   </DropdownMenuItem>
@@ -97,7 +99,7 @@ export function NotebookCard({ notebook }: NotebookCardProps) {
                     className="text-red-600"
                   >
                     <Trash2 className="h-4 w-4 mr-2" />
-                    Delete
+                    {t.common.delete}
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -106,11 +108,14 @@ export function NotebookCard({ notebook }: NotebookCardProps) {
           
           <CardContent>
             <CardDescription className="line-clamp-2 text-sm">
-              {notebook.description || 'No description'}
+              {notebook.description || t.chat.noDescription}
             </CardDescription>
 
             <div className="mt-3 text-xs text-muted-foreground">
-              Updated {formatDistanceToNow(new Date(notebook.updated), { addSuffix: true })}
+              {t.common.updated.replace('{time}', formatDistanceToNow(new Date(notebook.updated), { 
+                addSuffix: true,
+                locale: getDateLocale(language)
+              }))}
             </div>
 
             {/* Item counts footer */}
@@ -130,9 +135,9 @@ export function NotebookCard({ notebook }: NotebookCardProps) {
       <ConfirmDialog
         open={showDeleteDialog}
         onOpenChange={setShowDeleteDialog}
-        title="Delete Notebook"
-        description={`Are you sure you want to delete "${notebook.name}"? This action cannot be undone and will delete all sources, notes, and chat sessions.`}
-        confirmText="Delete"
+        title={t.notebooks.deleteNotebook}
+        description={t.notebooks.deleteNotebookDesc.replace('{name}', notebook.name)}
+        confirmText={t.common.delete}
         confirmVariant="destructive"
         onConfirm={handleDelete}
       />
diff --git a/frontend/src/app/(dashboard)/notebooks/components/NotebookHeader.tsx b/frontend/src/app/(dashboard)/notebooks/components/NotebookHeader.tsx
index 148dc7b..9327768 100644
--- a/frontend/src/app/(dashboard)/notebooks/components/NotebookHeader.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/components/NotebookHeader.tsx
@@ -8,13 +8,17 @@ import { Archive, ArchiveRestore, Trash2 } from 'lucide-react'
 import { useUpdateNotebook, useDeleteNotebook } from '@/lib/hooks/use-notebooks'
 import { ConfirmDialog } from '@/components/common/ConfirmDialog'
 import { formatDistanceToNow } from 'date-fns'
+import { getDateLocale } from '@/lib/utils/date-locale'
 import { InlineEdit } from '@/components/common/InlineEdit'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface NotebookHeaderProps {
   notebook: NotebookResponse
 }
 
 export function NotebookHeader({ notebook }: NotebookHeaderProps) {
+  const { t, language } = useTranslation()
+  const dfLocale = getDateLocale(language)
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
   
   const updateNotebook = useUpdateNotebook()
@@ -57,14 +61,16 @@ export function NotebookHeader({ notebook }: NotebookHeaderProps) {
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-3 flex-1">
               <InlineEdit
+                id="notebook-name"
+                name="notebook-name"
                 value={notebook.name}
                 onSave={handleUpdateName}
                 className="text-2xl font-bold"
                 inputClassName="text-2xl font-bold"
-                placeholder="Notebook name"
+                placeholder={t.notebooks.namePlaceholder}
               />
               {notebook.archived && (
-                <Badge variant="secondary">Archived</Badge>
+                <Badge variant="secondary">{t.notebooks.archived}</Badge>
               )}
             </div>
             <div className="flex gap-2">
@@ -76,12 +82,12 @@ export function NotebookHeader({ notebook }: NotebookHeaderProps) {
                 {notebook.archived ? (
                   <>
                     <ArchiveRestore className="h-4 w-4 mr-2" />
-                    Unarchive
+                    {t.notebooks.unarchive}
                   </>
                 ) : (
                   <>
                     <Archive className="h-4 w-4 mr-2" />
-                    Archive
+                    {t.notebooks.archive}
                   </>
                 )}
               </Button>
@@ -92,24 +98,26 @@ export function NotebookHeader({ notebook }: NotebookHeaderProps) {
                 className="text-red-600 hover:text-red-700"
               >
                 <Trash2 className="h-4 w-4 mr-2" />
-                Delete
+                {t.common.delete}
               </Button>
             </div>
           </div>
           
           <InlineEdit
+            id="notebook-description"
+            name="notebook-description"
             value={notebook.description || ''}
             onSave={handleUpdateDescription}
             className="text-muted-foreground"
             inputClassName="text-muted-foreground"
-            placeholder="Add a description..."
+            placeholder={t.notebooks.addDescription}
             multiline
-            emptyText="Add a description..."
+            emptyText={t.notebooks.addDescription}
           />
           
           <div className="text-sm text-muted-foreground">
-            Created {formatDistanceToNow(new Date(notebook.created), { addSuffix: true })} • 
-            Updated {formatDistanceToNow(new Date(notebook.updated), { addSuffix: true })}
+            {t.common.created.replace('{time}', formatDistanceToNow(new Date(notebook.created), { addSuffix: true, locale: dfLocale }))} • 
+            {t.common.updated.replace('{time}', formatDistanceToNow(new Date(notebook.updated), { addSuffix: true, locale: dfLocale }))}
           </div>
         </div>
       </div>
@@ -117,9 +125,9 @@ export function NotebookHeader({ notebook }: NotebookHeaderProps) {
       <ConfirmDialog
         open={showDeleteDialog}
         onOpenChange={setShowDeleteDialog}
-        title="Delete Notebook"
-        description={`Are you sure you want to delete "${notebook.name}"? This action cannot be undone and will delete all sources, notes, and chat sessions.`}
-        confirmText="Delete Forever"
+        title={t.notebooks.deleteNotebook}
+        description={t.notebooks.deleteNotebookDesc.replace('{name}', notebook.name)}
+        confirmText={t.common.deleteForever}
         confirmVariant="destructive"
         onConfirm={handleDelete}
       />
diff --git a/frontend/src/app/(dashboard)/notebooks/components/NotebookList.tsx b/frontend/src/app/(dashboard)/notebooks/components/NotebookList.tsx
index 7e3bf32..a09efa8 100644
--- a/frontend/src/app/(dashboard)/notebooks/components/NotebookList.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/components/NotebookList.tsx
@@ -7,6 +7,7 @@ import { EmptyState } from '@/components/common/EmptyState'
 import { Book, ChevronDown, ChevronRight, Plus } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { useState } from 'react'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface NotebookListProps {
   notebooks?: NotebookResponse[]
@@ -29,6 +30,7 @@ export function NotebookList({
   onAction,
   actionLabel,
 }: NotebookListProps) {
+  const { t } = useTranslation()
   const [isExpanded, setIsExpanded] = useState(!collapsible)
 
   if (isLoading) {
@@ -43,8 +45,8 @@ export function NotebookList({
     return (
       <EmptyState
         icon={Book}
-        title={emptyTitle ?? `No ${title.toLowerCase()}`}
-        description={emptyDescription ?? 'Start by creating your first notebook to organize your research.'}
+        title={emptyTitle ?? t.common.noResults}
+        description={emptyDescription ?? t.chat.startByCreating}
         action={onAction && actionLabel ? (
           <Button onClick={onAction} variant="outline" className="mt-4">
             <Plus className="h-4 w-4 mr-2" />
diff --git a/frontend/src/app/(dashboard)/notebooks/components/NotesColumn.tsx b/frontend/src/app/(dashboard)/notebooks/components/NotesColumn.tsx
index 9ffa6bc..05e39b2 100644
--- a/frontend/src/app/(dashboard)/notebooks/components/NotesColumn.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/components/NotesColumn.tsx
@@ -15,6 +15,7 @@ import { LoadingSpinner } from '@/components/common/LoadingSpinner'
 import { EmptyState } from '@/components/common/EmptyState'
 import { Badge } from '@/components/ui/badge'
 import { NoteEditorDialog } from './NoteEditorDialog'
+import { getDateLocale } from '@/lib/utils/date-locale'
 import { formatDistanceToNow } from 'date-fns'
 import { ContextToggle } from '@/components/common/ContextToggle'
 import { ContextMode } from '../[id]/page'
@@ -22,6 +23,7 @@ import { useDeleteNote } from '@/lib/hooks/use-notes'
 import { ConfirmDialog } from '@/components/common/ConfirmDialog'
 import { CollapsibleColumn, createCollapseButton } from '@/components/notebooks/CollapsibleColumn'
 import { useNotebookColumnsStore } from '@/lib/stores/notebook-columns-store'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface NotesColumnProps {
   notes?: NoteResponse[]
@@ -38,6 +40,7 @@ export function NotesColumn({
   contextSelections,
   onContextModeChange
 }: NotesColumnProps) {
+  const { t, language } = useTranslation()
   const [showAddDialog, setShowAddDialog] = useState(false)
   const [editingNote, setEditingNote] = useState<NoteResponse | null>(null)
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
@@ -48,8 +51,8 @@ export function NotesColumn({
   // Collapsible column state
   const { notesCollapsed, toggleNotes } = useNotebookColumnsStore()
   const collapseButton = useMemo(
-    () => createCollapseButton(toggleNotes, 'Notes'),
-    [toggleNotes]
+    () => createCollapseButton(toggleNotes, t.common.notes),
+    [toggleNotes, t.common.notes]
   )
 
   const handleDeleteClick = (noteId: string) => {
@@ -75,12 +78,12 @@ export function NotesColumn({
         isCollapsed={notesCollapsed}
         onToggle={toggleNotes}
         collapsedIcon={StickyNote}
-        collapsedLabel="Notes"
+        collapsedLabel={t.common.notes}
       >
         <Card className="h-full flex flex-col flex-1 overflow-hidden">
           <CardHeader className="pb-3 flex-shrink-0">
             <div className="flex items-center justify-between gap-2">
-              <CardTitle className="text-lg">Notes</CardTitle>
+              <CardTitle className="text-lg">{t.common.notes}</CardTitle>
               <div className="flex items-center gap-2">
                 <Button
                   size="sm"
@@ -90,7 +93,7 @@ export function NotesColumn({
                   }}
                 >
                   <Plus className="h-4 w-4 mr-2" />
-                  Write Note
+                  {t.common.writeNote}
                 </Button>
                 {collapseButton}
               </div>
@@ -105,8 +108,8 @@ export function NotesColumn({
             ) : !notes || notes.length === 0 ? (
               <EmptyState
                 icon={StickyNote}
-                title="No notes yet"
-                description="Create your first note to capture insights and observations."
+                title={t.notebooks.noNotesYet}
+                description={t.sources.createFirstNote}
               />
             ) : (
               <div className="space-y-3">
@@ -124,13 +127,16 @@ export function NotesColumn({
                           <User className="h-4 w-4 text-muted-foreground" />
                         )}
                         <Badge variant="secondary" className="text-xs">
-                          {note.note_type === 'ai' ? 'AI Generated' : 'Human'}
+                          {note.note_type === 'ai' ? t.common.aiGenerated : t.common.human}
                         </Badge>
                       </div>
 
                       <div className="flex items-center gap-2">
                         <span className="text-xs text-muted-foreground">
-                          {formatDistanceToNow(new Date(note.updated), { addSuffix: true })}
+                          {formatDistanceToNow(new Date(note.updated), { 
+                            addSuffix: true,
+                            locale: getDateLocale(language)
+                          })}
                         </span>
 
                         {/* Context toggle - only show if handler provided */}
@@ -165,7 +171,7 @@ export function NotesColumn({
                               className="text-red-600 focus:text-red-600"
                             >
                               <Trash2 className="h-4 w-4 mr-2" />
-                              Delete Note
+                              {t.notebooks.deleteNote}
                             </DropdownMenuItem>
                           </DropdownMenuContent>
                         </DropdownMenu>
@@ -206,9 +212,9 @@ export function NotesColumn({
       <ConfirmDialog
         open={deleteDialogOpen}
         onOpenChange={setDeleteDialogOpen}
-        title="Delete Note"
-        description="Are you sure you want to delete this note? This action cannot be undone."
-        confirmText="Delete"
+        title={t.notebooks.deleteNote}
+        description={t.notebooks.deleteNoteConfirm}
+        confirmText={t.common.delete}
         onConfirm={handleDeleteConfirm}
         isLoading={deleteNote.isPending}
         confirmVariant="destructive"
diff --git a/frontend/src/app/(dashboard)/notebooks/components/SourcesColumn.tsx b/frontend/src/app/(dashboard)/notebooks/components/SourcesColumn.tsx
index 58f6add..b9bdb0c 100644
--- a/frontend/src/app/(dashboard)/notebooks/components/SourcesColumn.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/components/SourcesColumn.tsx
@@ -22,6 +22,7 @@ import { useModalManager } from '@/lib/hooks/use-modal-manager'
 import { ContextMode } from '../[id]/page'
 import { CollapsibleColumn, createCollapseButton } from '@/components/notebooks/CollapsibleColumn'
 import { useNotebookColumnsStore } from '@/lib/stores/notebook-columns-store'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface SourcesColumnProps {
   sources?: SourceListResponse[]
@@ -48,6 +49,7 @@ export function SourcesColumn({
   isFetchingNextPage,
   fetchNextPage,
 }: SourcesColumnProps) {
+  const { t } = useTranslation()
   const [dropdownOpen, setDropdownOpen] = useState(false)
   const [addDialogOpen, setAddDialogOpen] = useState(false)
   const [addExistingDialogOpen, setAddExistingDialogOpen] = useState(false)
@@ -64,8 +66,8 @@ export function SourcesColumn({
   // Collapsible column state
   const { sourcesCollapsed, toggleSources } = useNotebookColumnsStore()
   const collapseButton = useMemo(
-    () => createCollapseButton(toggleSources, 'Sources'),
-    [toggleSources]
+    () => createCollapseButton(toggleSources, t.navigation.sources),
+    [toggleSources, t.navigation.sources]
   )
 
   // Scroll container ref for infinite scroll
@@ -149,29 +151,29 @@ export function SourcesColumn({
         isCollapsed={sourcesCollapsed}
         onToggle={toggleSources}
         collapsedIcon={FileText}
-        collapsedLabel="Sources"
+        collapsedLabel={t.navigation.sources}
       >
         <Card className="h-full flex flex-col flex-1 overflow-hidden">
           <CardHeader className="pb-3 flex-shrink-0">
             <div className="flex items-center justify-between gap-2">
-              <CardTitle className="text-lg">Sources</CardTitle>
+              <CardTitle className="text-lg">{t.navigation.sources}</CardTitle>
               <div className="flex items-center gap-2">
                 <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
                   <DropdownMenuTrigger asChild>
                     <Button size="sm">
                       <Plus className="h-4 w-4 mr-2" />
-                      Add Source
+                      {t.sources.addSource}
                       <ChevronDown className="h-4 w-4 ml-2" />
                     </Button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
                     <DropdownMenuItem onClick={() => { setDropdownOpen(false); setAddDialogOpen(true); }}>
                       <Plus className="h-4 w-4 mr-2" />
-                      Add New Source
+                      {t.sources.addSource}
                     </DropdownMenuItem>
                     <DropdownMenuItem onClick={() => { setDropdownOpen(false); setAddExistingDialogOpen(true); }}>
                       <Link2 className="h-4 w-4 mr-2" />
-                      Add Existing Source
+                      {t.sources.addExistingTitle}
                     </DropdownMenuItem>
                   </DropdownMenuContent>
                 </DropdownMenu>
@@ -188,8 +190,8 @@ export function SourcesColumn({
             ) : !sources || sources.length === 0 ? (
               <EmptyState
                 icon={FileText}
-                title="No sources yet"
-                description="Add your first source to start building your knowledge base."
+                title={t.sources.noSourcesYet}
+                description={t.sources.createFirstSource}
               />
             ) : (
               <div className="space-y-3">
@@ -238,9 +240,9 @@ export function SourcesColumn({
       <ConfirmDialog
         open={deleteDialogOpen}
         onOpenChange={setDeleteDialogOpen}
-        title="Delete Source"
-        description="Are you sure you want to delete this source? This action cannot be undone."
-        confirmText="Delete"
+        title={t.sources.delete}
+        description={t.sources.deleteConfirm}
+        confirmText={t.common.delete}
         onConfirm={handleDeleteConfirm}
         isLoading={deleteSource.isPending}
         confirmVariant="destructive"
@@ -249,9 +251,9 @@ export function SourcesColumn({
       <ConfirmDialog
         open={removeDialogOpen}
         onOpenChange={setRemoveDialogOpen}
-        title="Remove Source from Notebook"
-        description="Are you sure you want to remove this source from the notebook? The source itself will not be deleted."
-        confirmText="Remove"
+        title={t.sources.removeFromNotebook}
+        description={t.sources.removeConfirm}
+        confirmText={t.common.remove}
         onConfirm={handleRemoveConfirm}
         isLoading={removeFromNotebook.isPending}
         confirmVariant="default"
diff --git a/frontend/src/app/(dashboard)/notebooks/page.tsx b/frontend/src/app/(dashboard)/notebooks/page.tsx
index 843eef2..aaa4e88 100644
--- a/frontend/src/app/(dashboard)/notebooks/page.tsx
+++ b/frontend/src/app/(dashboard)/notebooks/page.tsx
@@ -9,8 +9,10 @@ import { Plus, RefreshCw } from 'lucide-react'
 import { useNotebooks } from '@/lib/hooks/use-notebooks'
 import { CreateNotebookDialog } from '@/components/notebooks/CreateNotebookDialog'
 import { Input } from '@/components/ui/input'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 export default function NotebooksPage() {
+  const { t } = useTranslation()
   const [createDialogOpen, setCreateDialogOpen] = useState(false)
   const [searchTerm, setSearchTerm] = useState('')
   const { data: notebooks, isLoading, refetch } = useNotebooks(false)
@@ -51,21 +53,25 @@ export default function NotebooksPage() {
         <div className="p-6 space-y-6">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-4">
-            <h1 className="text-2xl font-bold">Notebooks</h1>
+            <h1 className="text-2xl font-bold">{t.notebooks.title}</h1>
             <Button variant="outline" size="sm" onClick={() => refetch()}>
               <RefreshCw className="h-4 w-4" />
             </Button>
           </div>
           <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
             <Input
+              id="notebook-search"
+              name="notebook-search"
               value={searchTerm}
               onChange={(event) => setSearchTerm(event.target.value)}
-              placeholder="Search notebooks..."
+              placeholder={t.notebooks.searchPlaceholder}
+              autoComplete="off"
+              aria-label={t.common.accessibility?.searchNotebooks || "Search notebooks"}
               className="w-full sm:w-64"
             />
             <Button onClick={() => setCreateDialogOpen(true)}>
               <Plus className="h-4 w-4 mr-2" />
-              New Notebook
+              {t.notebooks.newNotebook}
             </Button>
           </div>
         </div>
@@ -74,21 +80,21 @@ export default function NotebooksPage() {
           <NotebookList 
             notebooks={filteredActive} 
             isLoading={isLoading}
-            title="Active Notebooks"
-            emptyTitle={isSearching ? 'No notebooks match your search' : undefined}
-            emptyDescription={isSearching ? 'Try using a different notebook name.' : undefined}
+            title={t.notebooks.activeNotebooks}
+            emptyTitle={isSearching ? t.common.noMatches : undefined}
+            emptyDescription={isSearching ? t.common.tryDifferentSearch : undefined}
             onAction={!isSearching ? () => setCreateDialogOpen(true) : undefined}
-            actionLabel={!isSearching ? "Create Notebook" : undefined}
+            actionLabel={!isSearching ? t.notebooks.newNotebook : undefined}
           />
           
           {hasArchived && (
             <NotebookList 
               notebooks={filteredArchived} 
               isLoading={false}
-              title="Archived Notebooks"
+              title={t.notebooks.archivedNotebooks}
               collapsible
-              emptyTitle={isSearching ? 'No archived notebooks match your search' : undefined}
-              emptyDescription={isSearching ? 'Modify your search to find archived notebooks.' : undefined}
+              emptyTitle={isSearching ? t.common.noMatches : undefined}
+              emptyDescription={isSearching ? t.common.tryDifferentSearch : undefined}
             />
           )}
         </div>
diff --git a/frontend/src/app/(dashboard)/podcasts/page.tsx b/frontend/src/app/(dashboard)/podcasts/page.tsx
index 4e32d27..fe55d86 100644
--- a/frontend/src/app/(dashboard)/podcasts/page.tsx
+++ b/frontend/src/app/(dashboard)/podcasts/page.tsx
@@ -7,8 +7,10 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { EpisodesTab } from '@/components/podcasts/EpisodesTab'
 import { TemplatesTab } from '@/components/podcasts/TemplatesTab'
 import { Mic, LayoutTemplate } from 'lucide-react'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 export default function PodcastsPage() {
+  const { t } = useTranslation()
   const [activeTab, setActiveTab] = useState<'episodes' | 'templates'>('episodes')
 
   return (
@@ -16,9 +18,9 @@ export default function PodcastsPage() {
       <div className="flex-1 overflow-y-auto">
         <div className="px-6 py-6 space-y-6">
           <header className="space-y-1">
-            <h1 className="text-2xl font-semibold tracking-tight">Podcasts</h1>
+            <h1 className="text-2xl font-semibold tracking-tight">{t.podcasts.listTitle}</h1>
             <p className="text-muted-foreground">
-              Keep track of generated episodes and manage reusable templates.
+              {t.podcasts.listDesc}
             </p>
           </header>
 
@@ -28,15 +30,15 @@ export default function PodcastsPage() {
             className="space-y-6"
           >
             <div className="space-y-2">
-              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Choose a view</p>
-              <TabsList aria-label="Podcast views" className="w-full max-w-md">
+              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{t.podcasts.chooseAView}</p>
+              <TabsList aria-label={t.common.accessibility.podcastViews} className="w-full max-w-md">
                 <TabsTrigger value="episodes">
                   <Mic className="h-4 w-4" />
-                  Episodes
+                  {t.podcasts.episodesTab}
                 </TabsTrigger>
                 <TabsTrigger value="templates">
                   <LayoutTemplate className="h-4 w-4" />
-                  Templates
+                  {t.podcasts.templatesTab}
                 </TabsTrigger>
               </TabsList>
             </div>
diff --git a/frontend/src/app/(dashboard)/search/page.tsx b/frontend/src/app/(dashboard)/search/page.tsx
index e52159e..4ca15ad 100644
--- a/frontend/src/app/(dashboard)/search/page.tsx
+++ b/frontend/src/app/(dashboard)/search/page.tsx
@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useSearchParams } from 'next/navigation'
+import { useTranslation } from '@/lib/hooks/use-translation'
 import { AppShell } from '@/components/layout/AppShell'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Input } from '@/components/ui/input'
@@ -24,10 +25,11 @@ import { AdvancedModelsDialog } from '@/components/search/AdvancedModelsDialog'
 import { SaveToNotebooksDialog } from '@/components/search/SaveToNotebooksDialog'
 
 export default function SearchPage() {
+  const { t } = useTranslation()
   // URL params
   const searchParams = useSearchParams()
-  const urlQuery = searchParams.get('q') || ''
-  const rawMode = searchParams.get('mode')
+  const urlQuery = searchParams?.get('q') || ''
+  const rawMode = searchParams?.get('mode')
   const urlMode = rawMode === 'search' ? 'search' : 'ask'
 
   // Tab state (controlled)
@@ -70,7 +72,7 @@ export default function SearchPage() {
   }, [availableModels])
 
   const resolveModelName = (id?: string | null) => {
-    if (!id) return 'Not set'
+    if (!id) return t.searchPage.notSet
     return modelNameById.get(id) ?? id
   }
 
@@ -130,8 +132,8 @@ export default function SearchPage() {
 
   // Handle URL param changes while on page (e.g., from command palette again)
   useEffect(() => {
-    const currentQ = searchParams.get('q') || ''
-    const rawCurrentMode = searchParams.get('mode')
+    const currentQ = searchParams?.get('q') || ''
+    const rawCurrentMode = searchParams?.get('mode')
     const currentMode = rawCurrentMode === 'search' ? 'search' : 'ask'
 
     // Check if URL params have changed
@@ -157,19 +159,19 @@ export default function SearchPage() {
   return (
     <AppShell>
       <div className="p-4 md:p-6">
-        <h1 className="text-xl md:text-2xl font-bold mb-4 md:mb-6">Ask and Search</h1>
+        <h1 className="text-xl md:text-2xl font-bold mb-4 md:mb-6">{t.searchPage.askAndSearch}</h1>
 
         <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as 'ask' | 'search')} className="w-full space-y-6">
           <div className="space-y-2">
-            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Choose a mode</p>
-            <TabsList aria-label="Ask or search your knowledge base" className="w-full max-w-xl">
+            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{t.searchPage.chooseAMode}</p>
+            <TabsList aria-label={t.common.accessibility.searchKB} className="w-full max-w-xl">
               <TabsTrigger value="ask">
                 <MessageCircleQuestion className="h-4 w-4" />
-                Ask (beta)
+                {t.searchPage.askBeta}
               </TabsTrigger>
               <TabsTrigger value="search">
                 <Search className="h-4 w-4" />
-                Search
+                {t.searchPage.search}
               </TabsTrigger>
             </TabsList>
           </div>
@@ -177,18 +179,19 @@ export default function SearchPage() {
           <TabsContent value="ask" className="mt-6">
             <Card>
               <CardHeader>
-                <CardTitle className="text-lg">Ask Your Knowledge Base (beta)</CardTitle>
+                <CardTitle className="text-lg">{t.searchPage.askYourKb}</CardTitle>
                 <p className="text-sm text-muted-foreground">
-                  The LLM will answer your query based on the documents in your knowledge base.
+                  {t.searchPage.askYourKbDesc}
                 </p>
               </CardHeader>
               <CardContent className="space-y-4">
                 {/* Question Input */}
                 <div className="space-y-2">
-                  <Label htmlFor="ask-question">Question</Label>
+                  <Label htmlFor="ask-question">{t.searchPage.question}</Label>
                   <Textarea
                     id="ask-question"
-                    placeholder="Enter your question..."
+                    name="ask-question"
+                    placeholder={t.searchPage.enterQuestionPlaceholder}
                     value={askQuestion}
                     onChange={(e) => setAskQuestion(e.target.value)}
                     onKeyDown={(e) => {
@@ -200,23 +203,23 @@ export default function SearchPage() {
                     }}
                     disabled={ask.isStreaming}
                     rows={3}
-                    aria-label="Enter your question to ask the knowledge base"
+                    aria-label={t.common.accessibility.enterQuestion}
                   />
-                  <p className="text-xs text-muted-foreground">Press Cmd/Ctrl+Enter to submit</p>
+                  <p className="text-xs text-muted-foreground">{t.searchPage.pressToSubmit}</p>
                 </div>
 
                 {/* Models Display */}
                 {!hasEmbeddingModel ? (
                   <div className="flex items-center gap-2 p-3 text-sm text-amber-600 dark:text-amber-500 bg-amber-50 dark:bg-amber-950/20 rounded-md">
                     <AlertCircle className="h-4 w-4" />
-                    <span>You can&apos;t use this feature because you have no embedding model selected. Please set one up in the Models page.</span>
+                    <span>{t.searchPage.noEmbeddingModel}</span>
                   </div>
                 ) : (
                   <>
                     <div className="space-y-2">
                       <div className="flex items-center justify-between">
                         <Label className="text-xs text-muted-foreground">
-                          {customModels ? 'Using Custom Models' : 'Using Default Models'}
+                          {customModels ? t.searchPage.usingCustomModels : t.searchPage.usingDefaultModels}
                         </Label>
                         <Button
                           variant="ghost"
@@ -226,18 +229,18 @@ export default function SearchPage() {
                           className="h-auto py-1 px-2"
                         >
                           <Settings className="h-3 w-3 mr-1" />
-                          Advanced
+                          {t.searchPage.advanced}
                         </Button>
                       </div>
                       <div className="flex gap-2 text-xs flex-wrap">
                         <Badge variant="secondary">
-                          Strategy: {resolveModelName(customModels?.strategy || modelDefaults?.default_chat_model)}
+                          {t.searchPage.strategy}: {resolveModelName(customModels?.strategy || modelDefaults?.default_chat_model)}
                         </Badge>
                         <Badge variant="secondary">
-                          Answer: {resolveModelName(customModels?.answer || modelDefaults?.default_chat_model)}
+                          {t.searchPage.answer}: {resolveModelName(customModels?.answer || modelDefaults?.default_chat_model)}
                         </Badge>
                         <Badge variant="secondary">
-                          Final: {resolveModelName(customModels?.finalAnswer || modelDefaults?.default_chat_model)}
+                          {t.searchPage.final}: {resolveModelName(customModels?.finalAnswer || modelDefaults?.default_chat_model)}
                         </Badge>
                       </div>
                     </div>
@@ -251,10 +254,10 @@ export default function SearchPage() {
                         {ask.isStreaming ? (
                           <>
                             <LoadingSpinner size="sm" className="mr-2" />
-                            Processing...
+                            {t.searchPage.processing}
                           </>
                         ) : (
-                          'Ask'
+                          t.searchPage.ask
                         )}
                       </Button>
 
@@ -265,7 +268,7 @@ export default function SearchPage() {
                           className="w-full"
                         >
                           <Save className="h-4 w-4 mr-2" />
-                          Save to Notebooks
+                          {t.searchPage.saveToNotebooks}
                         </Button>
                       )}
                     </div>
@@ -308,29 +311,34 @@ export default function SearchPage() {
           <TabsContent value="search" className="mt-6">
             <Card>
               <CardHeader>
-                <CardTitle className="text-lg">Search</CardTitle>
+                <CardTitle className="text-lg">{t.searchPage.search}</CardTitle>
                 <p className="text-sm text-muted-foreground">
-                  Search your knowledge base for specific keywords or concepts
+                  {t.searchPage.searchDesc}
                 </p>
               </CardHeader>
               <CardContent className="space-y-4">
                 {/* Search Input */}
                 <div className="space-y-2">
+                  <Label htmlFor="search-query" className="sr-only">
+                    {t.searchPage.search}
+                  </Label>
                   <div className="flex flex-col sm:flex-row gap-2">
                     <Input
                       id="search-query"
-                      placeholder="Enter search query..."
+                      name="search-query"
+                      placeholder={t.searchPage.enterSearchPlaceholder}
                       value={searchQuery}
                       onChange={(e) => setSearchQuery(e.target.value)}
                       onKeyPress={handleKeyPress}
                       disabled={searchMutation.isPending}
                       className="flex-1"
-                      aria-label="Enter search query"
+                      aria-label={t.common.accessibility.enterSearch}
+                      autoComplete="off"
                     />
                     <Button
                       onClick={handleSearch}
                       disabled={searchMutation.isPending || !searchQuery.trim()}
-                      aria-label="Search knowledge base"
+                      aria-label={t.common.accessibility.searchKBBtn}
                       className="w-full sm:w-auto"
                     >
                       {searchMutation.isPending ? (
@@ -338,24 +346,25 @@ export default function SearchPage() {
                       ) : (
                         <Search className="h-4 w-4 mr-2" />
                       )}
-                      Search
+                      {t.searchPage.search}
                     </Button>
                   </div>
-                  <p className="text-xs text-muted-foreground">Press Enter to search</p>
+                  <p className="text-xs text-muted-foreground">{t.searchPage.pressToSearch}</p>
                 </div>
 
                 {/* Search Options */}
                 <div className="space-y-4">
                   {/* Search Type */}
-                  <div className="space-y-2">
-                    <Label>Search Type</Label>
+                  <div className="space-y-2" role="group" aria-labelledby="search-type-label">
+                    <span id="search-type-label" className="text-sm font-medium leading-none">{t.searchPage.searchType}</span>
                     {!hasEmbeddingModel && (
                       <div className="flex items-center gap-2 text-sm text-amber-600 dark:text-amber-500">
                         <AlertCircle className="h-4 w-4" />
-                        <span>Vector search requires an embedding model. Only text search is available.</span>
+                        <span>{t.searchPage.vectorSearchWarning}</span>
                       </div>
                     )}
                     <RadioGroup
+                      name="search-type"
                       value={searchType}
                       onValueChange={(value: 'text' | 'vector') => setSearchType(value)}
                       disabled={modelsLoading || searchMutation.isPending}
@@ -363,7 +372,7 @@ export default function SearchPage() {
                       <div className="flex items-center space-x-2">
                         <RadioGroupItem value="text" id="text" />
                         <Label htmlFor="text" className="font-normal cursor-pointer">
-                          Text Search
+                          {t.searchPage.textSearch}
                         </Label>
                       </div>
                       <div className="flex items-center space-x-2">
@@ -376,36 +385,38 @@ export default function SearchPage() {
                           htmlFor="vector"
                           className={`font-normal ${!hasEmbeddingModel ? 'text-muted-foreground cursor-not-allowed' : 'cursor-pointer'}`}
                         >
-                          Vector Search
+                          {t.searchPage.vectorSearch}
                         </Label>
                       </div>
                     </RadioGroup>
                   </div>
 
                   {/* Search Locations */}
-                  <div className="space-y-2">
-                    <Label>Search In</Label>
+                  <div className="space-y-2" role="group" aria-labelledby="search-in-label">
+                    <span id="search-in-label" className="text-sm font-medium leading-none">{t.searchPage.searchIn}</span>
                     <div className="space-y-2">
                       <div className="flex items-center space-x-2">
                         <Checkbox
                           id="sources"
+                          name="sources"
                           checked={searchSources}
                           onCheckedChange={(checked) => setSearchSources(checked as boolean)}
                           disabled={searchMutation.isPending}
                         />
                         <Label htmlFor="sources" className="font-normal cursor-pointer">
-                          Search Sources
+                          {t.searchPage.searchSources}
                         </Label>
                       </div>
                       <div className="flex items-center space-x-2">
                         <Checkbox
                           id="notes"
+                          name="notes"
                           checked={searchNotes}
                           onCheckedChange={(checked) => setSearchNotes(checked as boolean)}
                           disabled={searchMutation.isPending}
                         />
                         <Label htmlFor="notes" className="font-normal cursor-pointer">
-                          Search Notes
+                          {t.searchPage.searchNotes}
                         </Label>
                       </div>
                     </div>
@@ -417,15 +428,15 @@ export default function SearchPage() {
                   <div className="mt-6 space-y-3">
                     <div className="flex items-center justify-between">
                       <h3 className="text-sm font-medium">
-                        {searchMutation.data.total_count} result{searchMutation.data.total_count !== 1 ? 's' : ''} found
+                        {t.searchPage.resultsFound.replace('{count}', searchMutation.data.total_count.toString())}
                       </h3>
-                      <Badge variant="outline">{searchMutation.data.search_type} search</Badge>
+                      <Badge variant="outline">{searchMutation.data.search_type === 'text' ? t.searchPage.textSearch : t.searchPage.vectorSearch}</Badge>
                     </div>
 
                     {searchMutation.data.results.length === 0 ? (
                       <Card>
                         <CardContent className="pt-6 text-center text-muted-foreground">
-                          No results found for &ldquo;{searchQuery}&rdquo;
+                          {t.searchPage.noResultsFor.replace('{query}', searchQuery)}
                         </CardContent>
                       </Card>
                     ) : (
@@ -456,7 +467,7 @@ export default function SearchPage() {
                                 <Collapsible className="mt-3">
                                   <CollapsibleTrigger className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground">
                                     <ChevronDown className="h-4 w-4" />
-                                    Matches ({result.matches.length})
+                                    {t.searchPage.matches.replace('{count}', result.matches.length.toString())}
                                   </CollapsibleTrigger>
                                   <CollapsibleContent className="mt-2 space-y-1">
                                     {result.matches.map((match, i) => (
diff --git a/frontend/src/app/(dashboard)/settings/components/SettingsForm.tsx b/frontend/src/app/(dashboard)/settings/components/SettingsForm.tsx
index c49b93e..2969672 100644
--- a/frontend/src/app/(dashboard)/settings/components/SettingsForm.tsx
+++ b/frontend/src/app/(dashboard)/settings/components/SettingsForm.tsx
@@ -13,6 +13,7 @@ import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'
 import { useSettings, useUpdateSettings } from '@/lib/hooks/use-settings'
 import { useEffect, useState } from 'react'
 import { ChevronDownIcon } from 'lucide-react'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 const settingsSchema = z.object({
   default_content_processing_engine_doc: z.enum(['auto', 'docling', 'simple']).optional(),
@@ -24,9 +25,15 @@ const settingsSchema = z.object({
 type SettingsFormData = z.infer<typeof settingsSchema>
 
 export function SettingsForm() {
+  const { t } = useTranslation()
   const { data: settings, isLoading, error } = useSettings()
   const updateSettings = useUpdateSettings()
-  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({})
+  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({
+    doc: false,
+    url: false,
+    embedding: false,
+    files: false
+  })
   const [hasResetForm, setHasResetForm] = useState(false)
   
   
@@ -78,9 +85,9 @@ export function SettingsForm() {
   if (error) {
     return (
       <Alert variant="destructive">
-        <AlertTitle>Failed to load settings</AlertTitle>
+        <AlertTitle>{t.settings.loadFailed}</AlertTitle>
         <AlertDescription>
-          {error instanceof Error ? error.message : 'An unexpected error occurred.'}
+          {error instanceof Error ? error.message : t.common.error}
         </AlertDescription>
       </Alert>
     )
@@ -90,31 +97,32 @@ export function SettingsForm() {
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
       <Card>
         <CardHeader>
-          <CardTitle>Content Processing</CardTitle>
+          <CardTitle>{t.settings.contentProcessing}</CardTitle>
           <CardDescription>
-            Configure how documents and URLs are processed
+            {t.settings.contentProcessingDesc}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
           <div className="space-y-3">
-            <Label htmlFor="doc_engine">Document Processing Engine</Label>
+            <Label htmlFor="doc_engine">{t.settings.docEngine}</Label>
             <Controller
               name="default_content_processing_engine_doc"
               control={control}
               render={({ field }) => (
-                <Select
-                  key={field.value}
-                  value={field.value || ''}
-                  onValueChange={field.onChange}
-                  disabled={field.disabled || isLoading}
-                >
-                    <SelectTrigger className="w-full">
-                      <SelectValue placeholder="Select document processing engine" />
-                    </SelectTrigger>
+                  <Select
+                    key={field.value}
+                    name={field.name}
+                    value={field.value || ''}
+                    onValueChange={field.onChange}
+                    disabled={field.disabled || isLoading}
+                  >
+                      <SelectTrigger id="doc_engine" className="w-full">
+                        <SelectValue placeholder={t.settings.docEnginePlaceholder} />
+                      </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="auto">Auto (Recommended)</SelectItem>
-                      <SelectItem value="docling">Docling</SelectItem>
-                      <SelectItem value="simple">Simple</SelectItem>
+                      <SelectItem value="auto">{t.settings.autoRecommended}</SelectItem>
+                      <SelectItem value="docling">{t.settings.docling}</SelectItem>
+                      <SelectItem value="simple">{t.settings.simple}</SelectItem>
                     </SelectContent>
                   </Select>
               )}
@@ -122,143 +130,135 @@ export function SettingsForm() {
             <Collapsible open={expandedSections.doc} onOpenChange={() => toggleSection('doc')}>
               <CollapsibleTrigger className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors">
                 <ChevronDownIcon className={`h-4 w-4 transition-transform ${expandedSections.doc ? 'rotate-180' : ''}`} />
-                Help me choose
+                {t.settings.helpMeChoose}
               </CollapsibleTrigger>
               <CollapsibleContent className="mt-2 text-sm text-muted-foreground space-y-2">
-                <p>• <strong>Docling</strong> is a little slower but more accurate, specially if the documents contain tables and images.</p>
-                <p>• <strong>Simple</strong> will extract any content from the document without formatting it. It&apos;s ok for simple documents, but will lose quality in complex ones.</p>
-                <p>• <strong>Auto (recommended)</strong> will try to process through docling and default to simple.</p>
+                <p>{t.settings.docHelp}</p>
               </CollapsibleContent>
             </Collapsible>
           </div>
           
           <div className="space-y-3">
-            <Label htmlFor="url_engine">URL Processing Engine</Label>
+            <Label htmlFor="url_engine">{t.settings.urlEngine}</Label>
             <Controller
               name="default_content_processing_engine_url"
               control={control}
               render={({ field }) => (
                 <Select
                   key={field.value}
+                  name={field.name}
                   value={field.value || ''}
                   onValueChange={field.onChange}
                   disabled={field.disabled || isLoading}
                 >
-                  <SelectTrigger className="w-full">
-                    <SelectValue placeholder="Select URL processing engine" />
+                  <SelectTrigger id="url_engine" className="w-full">
+                    <SelectValue placeholder={t.settings.urlEnginePlaceholder} />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="auto">Auto (Recommended)</SelectItem>
-                    <SelectItem value="firecrawl">Firecrawl</SelectItem>
-                    <SelectItem value="jina">Jina</SelectItem>
-                    <SelectItem value="simple">Simple</SelectItem>
+                    <SelectItem value="auto">{t.settings.autoRecommended}</SelectItem>
+                    <SelectItem value="firecrawl">{t.settings.firecrawl}</SelectItem>
+                    <SelectItem value="jina">{t.settings.jina}</SelectItem>
+                    <SelectItem value="simple">{t.settings.simple}</SelectItem>
                   </SelectContent>
                 </Select>
               )}
             />
-            <Collapsible open={expandedSections.url} onOpenChange={() => toggleSection('url')}>
+             <Collapsible open={expandedSections.url} onOpenChange={() => toggleSection('url')}>
               <CollapsibleTrigger className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors">
                 <ChevronDownIcon className={`h-4 w-4 transition-transform ${expandedSections.url ? 'rotate-180' : ''}`} />
-                Help me choose
+                {t.settings.helpMeChoose}
               </CollapsibleTrigger>
               <CollapsibleContent className="mt-2 text-sm text-muted-foreground space-y-2">
-                <p>• <strong>Firecrawl</strong> is a paid service (with a free tier), and very powerful.</p>
-                <p>• <strong>Jina</strong> is a good option as well and also has a free tier.</p>
-                <p>• <strong>Simple</strong> will use basic HTTP extraction and will miss content on javascript-based websites.</p>
-                <p>• <strong>Auto (recommended)</strong> will try to use firecrawl (if API Key is present). Then, it will use Jina until reaches the limit (or will keep using Jina if you setup the API Key). It will fallback to simple, when none of the previous options is possible.</p>
+                <p>{t.settings.urlHelp}</p>
               </CollapsibleContent>
             </Collapsible>
           </div>
         </CardContent>
       </Card>
 
-      <Card>
+       <Card>
         <CardHeader>
-          <CardTitle>Embedding and Search</CardTitle>
+          <CardTitle>{t.settings.embeddingAndSearch}</CardTitle>
           <CardDescription>
-            Configure search and embedding options
+            {t.settings.embeddingAndSearchDesc}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
-          <div className="space-y-3">
-            <Label htmlFor="embedding">Default Embedding Option</Label>
+           <div className="space-y-3">
+            <Label htmlFor="embedding">{t.settings.defaultEmbeddingOption}</Label>
             <Controller
               name="default_embedding_option"
               control={control}
               render={({ field }) => (
                 <Select
                   key={field.value}
+                  name={field.name}
                   value={field.value || ''}
                   onValueChange={field.onChange}
                   disabled={field.disabled || isLoading}
                 >
-                  <SelectTrigger className="w-full">
-                    <SelectValue placeholder="Select embedding option" />
+                  <SelectTrigger id="embedding" className="w-full">
+                    <SelectValue placeholder={t.settings.embeddingOptionPlaceholder} />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="ask">Ask</SelectItem>
-                    <SelectItem value="always">Always</SelectItem>
-                    <SelectItem value="never">Never</SelectItem>
+                    <SelectItem value="ask">{t.settings.ask}</SelectItem>
+                    <SelectItem value="always">{t.settings.always}</SelectItem>
+                    <SelectItem value="never">{t.settings.never}</SelectItem>
                   </SelectContent>
                 </Select>
               )}
             />
-            <Collapsible open={expandedSections.embedding} onOpenChange={() => toggleSection('embedding')}>
+             <Collapsible open={expandedSections.embedding} onOpenChange={() => toggleSection('embedding')}>
               <CollapsibleTrigger className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors">
                 <ChevronDownIcon className={`h-4 w-4 transition-transform ${expandedSections.embedding ? 'rotate-180' : ''}`} />
-                Help me choose
+                {t.settings.helpMeChoose}
               </CollapsibleTrigger>
               <CollapsibleContent className="mt-2 text-sm text-muted-foreground space-y-2">
-                <p>Embedding the content will make it easier to find by you and by your AI agents. If you are running a local embedding model (Ollama, for example), you shouldn&apos;t worry about cost and just embed everything. For online providers, you might want to be careful only if you process a lot of content (like 100s of documents at a day).</p>
-                <p>• Choose <strong>always</strong> if you are running a local embedding model or if your content volume is not that big</p>
-                <p>• Choose <strong>ask</strong> if you want to decide every time</p>
-                <p>• Choose <strong>never</strong> if you don&apos;t care about vector search or do not have an embedding provider.</p>
-                <p>As a reference, OpenAI&apos;s text-embedding-3-small costs about 0.02 for 1 million tokens -- which is about 30 times the Wikipedia page for Earth. With Gemini API, Text Embedding 004 is free with a rate limit of 1500 requests per minute.</p>
+                <p>{t.settings.embeddingHelp}</p>
               </CollapsibleContent>
             </Collapsible>
           </div>
         </CardContent>
       </Card>
 
-      <Card>
+       <Card>
         <CardHeader>
-          <CardTitle>File Management</CardTitle>
+          <CardTitle>{t.settings.fileManagement}</CardTitle>
           <CardDescription>
-            Configure file handling and storage options
+            {t.settings.fileManagementDesc}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
-          <div className="space-y-3">
-            <Label htmlFor="auto_delete">Auto Delete Files</Label>
+           <div className="space-y-3">
+            <Label htmlFor="auto_delete">{t.settings.autoDeleteFiles}</Label>
             <Controller
               name="auto_delete_files"
               control={control}
               render={({ field }) => (
                 <Select
                   key={field.value}
+                  name={field.name}
                   value={field.value || ''}
                   onValueChange={field.onChange}
                   disabled={field.disabled || isLoading}
                 >
-                  <SelectTrigger className="w-full">
-                    <SelectValue placeholder="Select auto delete option" />
+                  <SelectTrigger id="auto_delete" className="w-full">
+                    <SelectValue placeholder={t.settings.autoDeletePlaceholder} />
                   </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="yes">Yes</SelectItem>
-                    <SelectItem value="no">No</SelectItem>
+                   <SelectContent>
+                    <SelectItem value="yes">{t.common.yes}</SelectItem>
+                    <SelectItem value="no">{t.common.no}</SelectItem>
                   </SelectContent>
                 </Select>
               )}
             />
-            <Collapsible open={expandedSections.files} onOpenChange={() => toggleSection('files')}>
+             <Collapsible open={expandedSections.files} onOpenChange={() => toggleSection('files')}>
               <CollapsibleTrigger className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors">
                 <ChevronDownIcon className={`h-4 w-4 transition-transform ${expandedSections.files ? 'rotate-180' : ''}`} />
-                Help me choose
+                {t.settings.helpMeChoose}
               </CollapsibleTrigger>
               <CollapsibleContent className="mt-2 text-sm text-muted-foreground space-y-2">
-                <p>Once your files are uploaded and processed, they are not required anymore. Most users should allow Open Notebook to delete uploaded files from the upload folder automatically. Choose <strong>no</strong>, ONLY if you are using Notebook as the primary storage location for those files (which you shouldn&apos;t be at all). This option will soon be deprecated in favor of always downloading the files.</p>
-                <p>• Choose <strong>yes</strong> (recommended) to automatically delete uploaded files after processing</p>
-                <p>• Choose <strong>no</strong> only if you need to keep the original files in the upload folder</p>
+                <p>{t.settings.filesHelp}</p>
               </CollapsibleContent>
             </Collapsible>
           </div>
@@ -266,11 +266,11 @@ export function SettingsForm() {
       </Card>
 
       <div className="flex justify-end">
-        <Button 
+         <Button 
           type="submit" 
           disabled={!isDirty || updateSettings.isPending}
         >
-          {updateSettings.isPending ? 'Saving...' : 'Save Settings'}
+          {updateSettings.isPending ? t.common.saving : t.navigation.settings}
         </Button>
       </div>
     </form>
diff --git a/frontend/src/app/(dashboard)/settings/page.tsx b/frontend/src/app/(dashboard)/settings/page.tsx
index 6b74d86..ab22afb 100644
--- a/frontend/src/app/(dashboard)/settings/page.tsx
+++ b/frontend/src/app/(dashboard)/settings/page.tsx
@@ -5,8 +5,10 @@ import { SettingsForm } from './components/SettingsForm'
 import { useSettings } from '@/lib/hooks/use-settings'
 import { Button } from '@/components/ui/button'
 import { RefreshCw } from 'lucide-react'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 export default function SettingsPage() {
+  const { t } = useTranslation()
   const { refetch } = useSettings()
 
   return (
@@ -15,7 +17,7 @@ export default function SettingsPage() {
         <div className="p-6">
           <div className="max-w-4xl">
             <div className="flex items-center gap-4 mb-6">
-              <h1 className="text-2xl font-bold">Settings</h1>
+              <h1 className="text-2xl font-bold">{t.navigation.settings}</h1>
               <Button variant="outline" size="sm" onClick={() => refetch()}>
                 <RefreshCw className="h-4 w-4" />
               </Button>
diff --git a/frontend/src/app/(dashboard)/sources/[id]/page.tsx b/frontend/src/app/(dashboard)/sources/[id]/page.tsx
index 79086da..0103fc4 100644
--- a/frontend/src/app/(dashboard)/sources/[id]/page.tsx
+++ b/frontend/src/app/(dashboard)/sources/[id]/page.tsx
@@ -12,7 +12,7 @@ import { SourceDetailContent } from '@/components/source/SourceDetailContent'
 export default function SourceDetailPage() {
   const router = useRouter()
   const params = useParams()
-  const sourceId = decodeURIComponent(params.id as string)
+  const sourceId = params?.id ? decodeURIComponent(params.id as string) : ''
   const navigation = useNavigation()
 
   // Initialize source chat
diff --git a/frontend/src/app/(dashboard)/sources/page.tsx b/frontend/src/app/(dashboard)/sources/page.tsx
index 2f47c40..648c3a7 100644
--- a/frontend/src/app/(dashboard)/sources/page.tsx
+++ b/frontend/src/app/(dashboard)/sources/page.tsx
@@ -12,10 +12,14 @@ import { FileText, Link as LinkIcon, Upload, AlignLeft, Trash2, ArrowUpDown } fr
 import { formatDistanceToNow } from 'date-fns'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
+import { useTranslation } from '@/lib/hooks/use-translation'
+import { getDateLocale } from '@/lib/utils/date-locale'
 import { cn } from '@/lib/utils'
 import { toast } from 'sonner'
+import { getApiErrorKey } from '@/lib/utils/error-handler'
 
 export default function SourcesPage() {
+  const { t, language } = useTranslation()
   const [sources, setSources] = useState<SourceListResponse[]>([])
   const [loading, setLoading] = useState(true)
   const [loadingMore, setLoadingMore] = useState(false)
@@ -71,14 +75,14 @@ export default function SourcesPage() {
       offsetRef.current += data.length
     } catch (err) {
       console.error('Failed to fetch sources:', err)
-      setError('Failed to load sources')
-      toast.error('Failed to load sources')
+      setError(t.sources.failedToLoad)
+      toast.error(t.sources.failedToLoad)
     } finally {
       setLoading(false)
       setLoadingMore(false)
       loadingMoreRef.current = false
     }
-  }, [sortBy, sortOrder])
+  }, [sortBy, sortOrder, t.sources.failedToLoad])
 
   // Initial load and when sort changes
   useEffect(() => {
@@ -216,9 +220,9 @@ export default function SourcesPage() {
   }
 
   const getSourceType = (source: SourceListResponse) => {
-    if (source.asset?.url) return 'Link'
-    if (source.asset?.file_path) return 'File'
-    return 'Text'
+    if (source.asset?.url) return t.sources.type.link
+    if (source.asset?.file_path) return t.sources.type.file
+    return t.sources.type.text
   }
 
   const handleRowClick = useCallback((index: number, sourceId: string) => {
@@ -236,13 +240,14 @@ export default function SourcesPage() {
 
     try {
       await sourcesApi.delete(deleteDialog.source.id)
-      toast.success('Source deleted successfully')
+      toast.success(t.sources.deleteSuccess)
       // Remove the deleted source from the list
       setSources(prev => prev.filter(s => s.id !== deleteDialog.source?.id))
       setDeleteDialog({ open: false, source: null })
-    } catch (err) {
-      console.error('Failed to delete source:', err)
-      toast.error('Failed to delete source')
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { detail?: string } }, message?: string };
+      console.error('Failed to delete source:', error)
+      toast.error(t(getApiErrorKey(error.response?.data?.detail || error.message)))
     }
   }
 
@@ -271,8 +276,8 @@ export default function SourcesPage() {
       <AppShell>
         <EmptyState
           icon={FileText}
-          title="No sources yet"
-          description="Sources from all notebooks will appear here"
+          title={t.sources.noSourcesYet}
+          description={t.sources.allSourcesDescShort}
         />
       </AppShell>
     )
@@ -282,9 +287,9 @@ export default function SourcesPage() {
     <AppShell>
       <div className="flex flex-col h-full w-full max-w-none px-6 py-6">
         <div className="mb-6 flex-shrink-0">
-          <h1 className="text-3xl font-bold">All Sources</h1>
+          <h1 className="text-3xl font-bold">{t.sources.allSources}</h1>
           <p className="mt-2 text-muted-foreground">
-            Browse all sources across your notebooks. Use arrow keys to navigate and Enter to open.
+            {t.sources.allSourcesDesc}
           </p>
         </div>
 
@@ -305,10 +310,10 @@ export default function SourcesPage() {
             <thead className="sticky top-0 bg-background z-10">
               <tr className="border-b bg-muted/50">
                 <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
-                  Type
+                  {t.common.type}
                 </th>
                 <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
-                  Title
+                  {t.common.title}
                 </th>
                 <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground hidden sm:table-cell">
                   <Button
@@ -317,7 +322,7 @@ export default function SourcesPage() {
                     onClick={() => toggleSort('created')}
                     className="h-8 px-2 hover:bg-muted"
                   >
-                    Created
+                    {t.common.created_label}
                     <ArrowUpDown className={cn(
                       "ml-2 h-3 w-3",
                       sortBy === 'created' ? 'opacity-100' : 'opacity-30'
@@ -330,13 +335,13 @@ export default function SourcesPage() {
                   </Button>
                 </th>
                 <th className="h-12 px-4 text-center align-middle font-medium text-muted-foreground hidden md:table-cell">
-                  Insights
+                  {t.sources.insights}
                 </th>
                 <th className="h-12 px-4 text-center align-middle font-medium text-muted-foreground hidden lg:table-cell">
-                  Embedded
+                  {t.sources.embedded}
                 </th>
                 <th className="h-12 px-4 text-right align-middle font-medium text-muted-foreground">
-                  Actions
+                  {t.common.actions}
                 </th>
               </tr>
             </thead>
@@ -364,7 +369,7 @@ export default function SourcesPage() {
                   <td className="h-12 px-4">
                     <div className="flex flex-col overflow-hidden">
                       <span className="font-medium truncate">
-                        {source.title || 'Untitled Source'}
+                        {source.title || t.sources.untitledSource}
                       </span>
                       {source.asset?.url && (
                         <span className="text-xs text-muted-foreground truncate">
@@ -374,14 +379,17 @@ export default function SourcesPage() {
                     </div>
                   </td>
                   <td className="h-12 px-4 text-muted-foreground text-sm hidden sm:table-cell">
-                    {formatDistanceToNow(new Date(source.created), { addSuffix: true })}
+                    {formatDistanceToNow(new Date(source.created), { 
+                      addSuffix: true,
+                      locale: getDateLocale(language)
+                    })}
                   </td>
                   <td className="h-12 px-4 text-center hidden md:table-cell">
                     <span className="text-sm font-medium">{source.insights_count || 0}</span>
                   </td>
                   <td className="h-12 px-4 text-center hidden lg:table-cell">
                     <Badge variant={source.embedded ? "default" : "secondary"} className="text-xs">
-                      {source.embedded ? "Yes" : "No"}
+                      {source.embedded ? t.sources.yes : t.sources.no}
                     </Badge>
                   </td>
                   <td className="h-12 px-4 text-right">
@@ -401,7 +409,7 @@ export default function SourcesPage() {
                   <td colSpan={6} className="h-16 text-center">
                     <div className="flex items-center justify-center">
                       <LoadingSpinner />
-                      <span className="ml-2 text-muted-foreground">Loading more sources...</span>
+                      <span className="ml-2 text-muted-foreground">{t.sources.loadingMore}</span>
                     </div>
                   </td>
                 </tr>
@@ -414,9 +422,9 @@ export default function SourcesPage() {
       <ConfirmDialog
         open={deleteDialog.open}
         onOpenChange={(open) => setDeleteDialog({ open, source: deleteDialog.source })}
-        title="Delete Source"
-        description={`Are you sure you want to delete "${deleteDialog.source?.title || 'this source'}"? This action cannot be undone.`}
-        confirmText="Delete"
+        title={t.sources.delete}
+        description={t.sources.deleteConfirmWithTitle.replace('{title}', deleteDialog.source?.title || t.sources.untitledSource)}
+        confirmText={t.common.delete}
         confirmVariant="destructive"
         onConfirm={handleDeleteConfirm}
       />
diff --git a/frontend/src/app/(dashboard)/transformations/components/DefaultPromptEditor.tsx b/frontend/src/app/(dashboard)/transformations/components/DefaultPromptEditor.tsx
index 79b2cad..3f90414 100644
--- a/frontend/src/app/(dashboard)/transformations/components/DefaultPromptEditor.tsx
+++ b/frontend/src/app/(dashboard)/transformations/components/DefaultPromptEditor.tsx
@@ -1,18 +1,22 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useId } from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
+import { Label } from '@/components/ui/label'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
 import { ChevronDown, ChevronRight, Settings } from 'lucide-react'
 import { useDefaultPrompt, useUpdateDefaultPrompt } from '@/lib/hooks/use-transformations'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 export function DefaultPromptEditor() {
   const [isOpen, setIsOpen] = useState(false)
   const [prompt, setPrompt] = useState('')
   const { data: defaultPrompt, isLoading } = useDefaultPrompt()
   const updateDefaultPrompt = useUpdateDefaultPrompt()
+  const { t } = useTranslation()
+  const textareaId = useId()
 
   useEffect(() => {
     if (defaultPrompt) {
@@ -33,9 +37,9 @@ export function DefaultPromptEditor() {
               <div className="flex items-center gap-2">
                 <Settings className="h-5 w-5" />
                 <div className="text-left">
-                  <CardTitle className="text-lg">Default Transformation Prompt</CardTitle>
+                  <CardTitle className="text-lg">{t.transformations.defaultPrompt}</CardTitle>
                   <CardDescription>
-                    This will be added to all your transformation prompts
+                    {t.transformations.defaultPromptDesc}
                   </CardDescription>
                 </div>
               </div>
@@ -49,19 +53,26 @@ export function DefaultPromptEditor() {
         </CollapsibleTrigger>
         <CollapsibleContent>
           <CardContent className="space-y-4">
-            <Textarea
-              value={prompt}
-              onChange={(e) => setPrompt(e.target.value)}
-              placeholder="Enter your default transformation instructions..."
-              className="min-h-[200px] font-mono text-sm"
-              disabled={isLoading}
-            />
+            <div className="space-y-2">
+              <Label htmlFor={textareaId} className="sr-only">
+                {t.transformations.defaultPrompt}
+              </Label>
+              <Textarea
+                id={textareaId}
+                name="default-prompt"
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                placeholder={t.transformations.defaultPromptPlaceholder}
+                className="min-h-[200px] font-mono text-sm"
+                disabled={isLoading}
+              />
+            </div>
             <div className="flex justify-end">
               <Button 
                 onClick={handleSave}
                 disabled={isLoading || updateDefaultPrompt.isPending}
               >
-                Save
+                {t.common.save}
               </Button>
             </div>
           </CardContent>
diff --git a/frontend/src/app/(dashboard)/transformations/components/TransformationCard.tsx b/frontend/src/app/(dashboard)/transformations/components/TransformationCard.tsx
index 95a2e21..4270456 100644
--- a/frontend/src/app/(dashboard)/transformations/components/TransformationCard.tsx
+++ b/frontend/src/app/(dashboard)/transformations/components/TransformationCard.tsx
@@ -9,6 +9,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/component
 import { ChevronDown, ChevronRight, Trash2, Wand2, Edit } from 'lucide-react'
 import { Transformation } from '@/lib/types/transformations'
 import { useDeleteTransformation } from '@/lib/hooks/use-transformations'
+import { useTranslation } from '@/lib/hooks/use-translation'
 import { cn } from '@/lib/utils'
 
 interface TransformationCardProps {
@@ -18,6 +19,7 @@ interface TransformationCardProps {
 }
 
 export function TransformationCard({ transformation, onPlayground, onEdit }: TransformationCardProps) {
+  const { t } = useTranslation()
   const [isExpanded, setIsExpanded] = useState(false)
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
   const deleteTransformation = useDeleteTransformation()
@@ -47,7 +49,7 @@ export function TransformationCard({ transformation, onPlayground, onEdit }: Tra
                     )}
                   </div>
                   {transformation.apply_default && (
-                    <Badge variant="secondary">default</Badge>
+                    <Badge variant="secondary">{t.common.default}</Badge>
                   )}
                 </div>
               </CollapsibleTrigger>
@@ -56,13 +58,13 @@ export function TransformationCard({ transformation, onPlayground, onEdit }: Tra
                 {onPlayground && (
                   <Button variant="outline" size="sm" onClick={onPlayground}>
                     <Wand2 className="h-4 w-4 mr-2" />
-                    Playground
+                    {t.transformations.playground}
                   </Button>
                 )}
                 {onEdit && (
                   <Button variant="outline" size="sm" onClick={onEdit}>
                     <Edit className="h-4 w-4 mr-2" />
-                    Edit
+                    {t.common.edit}
                   </Button>
                 )}
                 <Button
@@ -80,19 +82,19 @@ export function TransformationCard({ transformation, onPlayground, onEdit }: Tra
           <CollapsibleContent>
             <CardContent className="space-y-4">
               <div>
-                <p className="text-sm text-muted-foreground">Title</p>
-                <p className="text-sm font-medium">{transformation.title || 'Untitled'}</p>
+                <p className="text-sm text-muted-foreground">{t.common.title}</p>
+                <p className="text-sm font-medium">{transformation.title || t.sources.untitledSource}</p>
               </div>
 
               {transformation.description && (
                 <div>
-                  <p className="text-sm text-muted-foreground">Description</p>
+                  <p className="text-sm text-muted-foreground">{t.common.description}</p>
                   <p className="text-sm leading-6">{transformation.description}</p>
                 </div>
               )}
 
               <div>
-                <p className="text-sm text-muted-foreground">Prompt</p>
+                <p className="text-sm text-muted-foreground">{t.transformations.systemPrompt}</p>
                 <pre className="mt-2 whitespace-pre-wrap rounded-md bg-muted p-3 text-sm font-mono">
                   {transformation.prompt}
                 </pre>
@@ -105,9 +107,9 @@ export function TransformationCard({ transformation, onPlayground, onEdit }: Tra
       <ConfirmDialog
         open={showDeleteDialog}
         onOpenChange={setShowDeleteDialog}
-        title="Delete Transformation"
-        description={`Are you sure you want to delete "${transformation.name}"? This action cannot be undone.`}
-        confirmText="Delete"
+        title={t.sources.delete}
+        description={t.transformations.deleteConfirm}
+        confirmText={t.common.delete}
         confirmVariant="destructive"
         onConfirm={handleDelete}
         isLoading={deleteTransformation.isPending}
diff --git a/frontend/src/app/(dashboard)/transformations/components/TransformationEditorDialog.tsx b/frontend/src/app/(dashboard)/transformations/components/TransformationEditorDialog.tsx
index ca0f57f..3f1b69d 100644
--- a/frontend/src/app/(dashboard)/transformations/components/TransformationEditorDialog.tsx
+++ b/frontend/src/app/(dashboard)/transformations/components/TransformationEditorDialog.tsx
@@ -1,10 +1,10 @@
 'use client'
 
-import { useEffect } from 'react'
+import { useEffect, useId } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
-import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
@@ -15,12 +15,13 @@ import { useCreateTransformation, useUpdateTransformation, useTransformation } f
 import { Transformation } from '@/lib/types/transformations'
 import { useQueryClient } from '@tanstack/react-query'
 import { TRANSFORMATION_QUERY_KEYS } from '@/lib/hooks/use-transformations'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 const transformationSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
-  title: z.string().optional(),
+  name: z.string().min(1),
+  title: z.string().min(1),
   description: z.string().optional(),
-  prompt: z.string().min(1, 'Prompt is required'),
+  prompt: z.string().min(1),
   apply_default: z.boolean().optional(),
 })
 
@@ -33,6 +34,12 @@ interface TransformationEditorDialogProps {
 }
 
 export function TransformationEditorDialog({ open, onOpenChange, transformation }: TransformationEditorDialogProps) {
+  const { t } = useTranslation()
+  const nameId = useId()
+  const titleId = useId()
+  const defaultId = useId()
+  const descriptionId = useId()
+  const promptId = useId()
   const isEditing = Boolean(transformation)
   const { data: fetchedTransformation, isLoading } = useTransformation(transformation?.id ?? '', {
     enabled: open && Boolean(transformation?.id),
@@ -111,28 +118,32 @@ export function TransformationEditorDialog({ open, onOpenChange, transformation
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-4xl w-full max-h-[90vh] overflow-hidden p-0">
         <DialogTitle className="sr-only">
-          {isEditing ? 'Edit transformation' : 'Create transformation'}
+          {isEditing ? t.common.edit : t.transformations.createNew}
         </DialogTitle>
+        <DialogDescription className="sr-only">
+           {isEditing ? t.common.editTransformation : t.transformations.createNew}
+        </DialogDescription>
         <form onSubmit={handleSubmit(onSubmit)} className="flex h-full flex-col">
           {isEditing && isLoading ? (
             <div className="flex-1 flex items-center justify-center py-10">
-              <span className="text-sm text-muted-foreground">Loading transformation…</span>
+              <span className="text-sm text-muted-foreground">{t.common.loading}</span>
             </div>
           ) : (
             <>
               <div className="border-b px-6 py-4 space-y-4">
                 <div>
-                  <Label htmlFor="transformation-name" className="text-sm font-medium">
-                    Name
+                  <Label htmlFor={nameId} className="text-sm font-medium">
+                    {t.transformations.name}
                   </Label>
                   <Controller
                     control={control}
                     name="name"
                     render={({ field }) => (
-                      <Input
-                        id="transformation-name"
+                        <Input
+                        id={nameId}
                         {...field}
-                        placeholder="Unique identifier, e.g. key_topics"
+                        placeholder={t.transformations.namePlaceholder}
+                        autoComplete="off"
                       />
                     )}
                   />
@@ -143,18 +154,19 @@ export function TransformationEditorDialog({ open, onOpenChange, transformation
 
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
-                    <Label htmlFor="transformation-title" className="text-sm font-medium">
-                      Title
+                    <Label htmlFor={titleId} className="text-sm font-medium">
+                      {t.common.title}
                     </Label>
                     <Controller
                       control={control}
                       name="title"
                       render={({ field }) => (
                         <Input
-                          id="transformation-title"
-                          {...field}
-                          placeholder="Displayed title, defaults to name"
-                        />
+                           id={titleId}
+                           {...field}
+                           placeholder={t.transformations.titlePlaceholder}
+                           autoComplete="off"
+                         />
                       )}
                     />
                   </div>
@@ -164,31 +176,32 @@ export function TransformationEditorDialog({ open, onOpenChange, transformation
                       name="apply_default"
                       render={({ field }) => (
                         <Checkbox
-                          id="transformation-default"
+                          id={defaultId}
                           checked={field.value}
                           onCheckedChange={(checked) => field.onChange(Boolean(checked))}
                         />
                       )}
                     />
-                    <Label htmlFor="transformation-default" className="text-sm">
-                      Suggest by default on new sources
-                    </Label>
+                     <Label htmlFor={defaultId} className="text-sm">
+                       {t.transformations.suggestDefault}
+                     </Label>
                   </div>
                 </div>
 
                 <div>
-                  <Label htmlFor="transformation-description" className="text-sm font-medium">
-                    Description
-                  </Label>
+                   <Label htmlFor={descriptionId} className="text-sm font-medium">
+                     {t.notebooks.addDescription.replace('...', '')}
+                   </Label>
                   <Controller
                     control={control}
                     name="description"
                     render={({ field }) => (
                       <Textarea
-                        id="transformation-description"
-                        {...field}
-                        placeholder="Describe what this transformation does."
-                        rows={2}
+                         id={descriptionId}
+                         {...field}
+                         placeholder={t.transformations.descriptionPlaceholder}
+                         rows={2}
+                         autoComplete="off"
                       />
                     )}
                   />
@@ -196,7 +209,7 @@ export function TransformationEditorDialog({ open, onOpenChange, transformation
               </div>
 
               <div className="flex-1 overflow-y-auto px-6 py-4">
-                <Label className="text-sm font-medium">Prompt</Label>
+                <Label htmlFor={promptId} className="text-sm font-medium">{t.transformations.systemPrompt}</Label>
                 <Controller
                   control={control}
                   name="prompt"
@@ -206,33 +219,34 @@ export function TransformationEditorDialog({ open, onOpenChange, transformation
                       value={field.value}
                       onChange={field.onChange}
                       height={420}
-                      placeholder="Write the prompt that will power this transformation..."
+                      placeholder={t.transformations.promptPlaceholder}
                       className="rounded-md border"
+                      textareaId={promptId}
+                      name={field.name}
                     />
                   )}
                 />
                 {errors.prompt && (
                   <p className="text-sm text-red-600 mt-1">{errors.prompt.message}</p>
                 )}
-                <p className="text-xs text-muted-foreground mt-3">
-                  Prompts should be written with the source content in mind. You can ask the model to
-                  summarise, extract insights, or produce structured outputs such as tables.
-                </p>
+                 <p className="text-xs text-muted-foreground mt-3">
+                   {t.transformations.promptHint}
+                 </p>
               </div>
             </>
           )}
 
           <div className="border-t px-6 py-4 flex justify-end gap-2">
-            <Button type="button" variant="outline" onClick={handleClose}>
-              Cancel
-            </Button>
-            <Button type="submit" disabled={isSaving || (isEditing && isLoading)}>
-              {isSaving
-                ? isEditing ? 'Saving…' : 'Creating…'
-                : isEditing
-                  ? 'Save Transformation'
-                  : 'Create Transformation'}
-            </Button>
+             <Button type="button" variant="outline" onClick={handleClose}>
+               {t.common.cancel}
+             </Button>
+              <Button type="submit" disabled={isSaving || (isEditing && isLoading)}>
+                {isSaving
+                  ? isEditing ? `${t.common.saving}...` : `${t.common.creating}...`
+                  : isEditing
+                    ? t.common.editTransformation
+                    : t.transformations.createNew}
+              </Button>
           </div>
         </form>
       </DialogContent>
diff --git a/frontend/src/app/(dashboard)/transformations/components/TransformationPlayground.tsx b/frontend/src/app/(dashboard)/transformations/components/TransformationPlayground.tsx
index 04a69a1..5b747a4 100644
--- a/frontend/src/app/(dashboard)/transformations/components/TransformationPlayground.tsx
+++ b/frontend/src/app/(dashboard)/transformations/components/TransformationPlayground.tsx
@@ -11,6 +11,7 @@ import { Play, Loader2 } from 'lucide-react'
 import { Transformation } from '@/lib/types/transformations'
 import { useExecuteTransformation } from '@/lib/hooks/use-transformations'
 import { ModelSelector } from '@/components/common/ModelSelector'
+import { useTranslation } from '@/lib/hooks/use-translation'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 
@@ -20,6 +21,7 @@ interface TransformationPlaygroundProps {
 }
 
 export function TransformationPlayground({ transformations, selectedTransformation }: TransformationPlaygroundProps) {
+  const { t } = useTranslation()
   const [selectedId, setSelectedId] = useState(selectedTransformation?.id || '')
   const [inputText, setInputText] = useState('')
   const [modelId, setModelId] = useState('')
@@ -47,18 +49,18 @@ export function TransformationPlayground({ transformations, selectedTransformati
     <div className="space-y-6">
       <Card>
         <CardHeader>
-          <CardTitle>Playground</CardTitle>
+          <CardTitle>{t.transformations.playground}</CardTitle>
           <CardDescription>
-            Test your transformations on sample text before applying them to your sources
+            {t.transformations.desc}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
-              <Label htmlFor="transformation">Transformation</Label>
-              <Select value={selectedId} onValueChange={setSelectedId}>
+              <Label htmlFor="transformation">{t.navigation.transformation}</Label>
+              <Select name="transformation" value={selectedId} onValueChange={setSelectedId}>
                 <SelectTrigger id="transformation">
-                  <SelectValue placeholder="Select a transformation" />
+                  <SelectValue placeholder={t.transformations.selectToStart} />
                 </SelectTrigger>
                 <SelectContent>
                   {transformations?.map((transformation) => (
@@ -72,22 +74,24 @@ export function TransformationPlayground({ transformations, selectedTransformati
 
             <div>
               <ModelSelector
-                label="Model"
+                label={t.transformations.model}
+                name="model"
                 modelType="language"
                 value={modelId}
                 onChange={setModelId}
-                placeholder="Select a model"
+                placeholder={t.transformations.selectModel}
               />
             </div>
           </div>
 
           <div>
-            <Label htmlFor="input">Input Text</Label>
+            <Label htmlFor="input">{t.transformations.inputLabel}</Label>
             <Textarea
               id="input"
+              name="input"
               value={inputText}
               onChange={(e) => setInputText(e.target.value)}
-              placeholder="Enter some text to transform..."
+              placeholder={t.transformations.inputPlaceholder}
               rows={8}
               className="font-mono text-sm"
             />
@@ -102,12 +106,12 @@ export function TransformationPlayground({ transformations, selectedTransformati
               {executeTransformation.isPending ? (
                 <>
                   <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                  Running...
+                  {t.transformations.running}
                 </>
               ) : (
                 <>
                   <Play className="h-4 w-4 mr-2" />
-                  Run Transformation
+                  {t.transformations.runTest}
                 </>
               )}
             </Button>
@@ -115,7 +119,7 @@ export function TransformationPlayground({ transformations, selectedTransformati
 
           {output && (
             <div className="space-y-2">
-              <Label>Output</Label>
+              <span className="text-sm font-medium leading-none">{t.transformations.outputLabel}</span>
               <Card>
                 <ScrollArea className="h-[400px]">
                   <CardContent className="pt-6">
diff --git a/frontend/src/app/(dashboard)/transformations/components/TransformationsList.tsx b/frontend/src/app/(dashboard)/transformations/components/TransformationsList.tsx
index 8581a79..6885f43 100644
--- a/frontend/src/app/(dashboard)/transformations/components/TransformationsList.tsx
+++ b/frontend/src/app/(dashboard)/transformations/components/TransformationsList.tsx
@@ -9,6 +9,7 @@ import { LoadingSpinner } from '@/components/common/LoadingSpinner'
 import { Wand2 } from 'lucide-react'
 import { Transformation } from '@/lib/types/transformations'
 import { TransformationEditorDialog } from './TransformationEditorDialog'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface TransformationsListProps {
   transformations: Transformation[] | undefined
@@ -17,6 +18,7 @@ interface TransformationsListProps {
 }
 
 export function TransformationsList({ transformations, isLoading, onPlayground }: TransformationsListProps) {
+  const { t } = useTranslation()
   const [editorOpen, setEditorOpen] = useState(false)
   const [editingTransformation, setEditingTransformation] = useState<Transformation | undefined>()
 
@@ -37,12 +39,12 @@ export function TransformationsList({ transformations, isLoading, onPlayground }
     return (
       <EmptyState
         icon={Wand2}
-        title="No transformations yet"
-        description="Create your first transformation to process and extract insights from your content."
+        title={t.transformations.noTransformations}
+        description={t.transformations.createOne}
         action={
           <Button onClick={() => handleOpenEditor()}>
             <Plus className="h-4 w-4 mr-2" />
-            Create New Transformation
+            {t.transformations.createNew}
           </Button>
         }
       />
@@ -53,10 +55,10 @@ export function TransformationsList({ transformations, isLoading, onPlayground }
     <>
       <div className="space-y-6">
         <div className="flex justify-between items-center">
-          <h2 className="text-lg font-semibold">Your Transformations</h2>
+          <h2 className="text-lg font-semibold">{t.transformations.listTitle}</h2>
           <Button onClick={() => handleOpenEditor()}>
             <Plus className="h-4 w-4 mr-2" />
-            Create New Transformation
+            {t.transformations.createNew}
           </Button>
         </div>
 
diff --git a/frontend/src/app/(dashboard)/transformations/page.tsx b/frontend/src/app/(dashboard)/transformations/page.tsx
index a5400b3..20a9493 100644
--- a/frontend/src/app/(dashboard)/transformations/page.tsx
+++ b/frontend/src/app/(dashboard)/transformations/page.tsx
@@ -10,8 +10,10 @@ import { TransformationPlayground } from './components/TransformationPlayground'
 import { useTransformations } from '@/lib/hooks/use-transformations'
 import { Transformation } from '@/lib/types/transformations'
 import { Wand2, Play, RefreshCw } from 'lucide-react'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 export default function TransformationsPage() {
+  const { t } = useTranslation()
   const [activeTab, setActiveTab] = useState('transformations')
   const [selectedTransformation, setSelectedTransformation] = useState<Transformation | undefined>()
   const { data: transformations, isLoading, refetch } = useTransformations()
@@ -27,7 +29,7 @@ export default function TransformationsPage() {
         <div className="p-6 space-y-6">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-4">
-              <h1 className="text-2xl font-bold">Transformations</h1>
+              <h1 className="text-2xl font-bold">{t.transformations.title}</h1>
               <Button variant="outline" size="sm" onClick={() => refetch()}>
                 <RefreshCw className="h-4 w-4" />
             </Button>
@@ -36,21 +38,21 @@ export default function TransformationsPage() {
 
         <div className="max-w-5xl">
           <p className="text-muted-foreground">
-            Transformations are prompts that will be used by the LLM to process a source and extract insights, summaries, etc.
+            {t.transformations.desc}
           </p>
         </div>
 
         <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
           <div className="space-y-2">
-            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Choose a workspace</p>
-            <TabsList aria-label="Transformation views" className="w-full max-w-xl">
+            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{t.transformations.workspace}</p>
+            <TabsList aria-label={t.common.accessibility.transformationViews} className="w-full max-w-xl">
               <TabsTrigger value="transformations" className="flex items-center gap-2">
                 <Wand2 className="h-4 w-4" />
-                Transformations
+                {t.transformations.title}
               </TabsTrigger>
               <TabsTrigger value="playground" className="flex items-center gap-2">
                 <Play className="h-4 w-4" />
-                Playground
+                {t.transformations.playground}
               </TabsTrigger>
             </TabsList>
           </div>
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 6ed091a..e02e3b8 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -70,7 +70,7 @@
   --sidebar-foreground: oklch(0.141 0.005 285.823);
   --sidebar-primary: oklch(0.623 0.214 259.815);
   --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent: oklch(0.92 0.01 286.375);
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
   --sidebar-border: oklch(0.92 0.004 286.32);
   --sidebar-ring: oklch(0.623 0.214 259.815);
@@ -104,7 +104,7 @@
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.546 0.245 262.881);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent: oklch(0.35 0.01 286.033);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.488 0.243 264.376);
@@ -114,63 +114,78 @@
   * {
     @apply border-border outline-ring/50;
   }
-  
+
   html {
     @apply antialiased;
   }
-  
+
   body {
     @apply bg-background text-foreground transition-colors;
   }
-  
+
   /* Ensure proper theme inheritance for popovers and dropdowns */
   .dark {
     color-scheme: dark;
   }
-  
+
   :root {
     color-scheme: light;
   }
-  
+
   /* Ensure Radix UI components inherit theme properly */
   [data-radix-popper-content-wrapper] {
     @apply z-50;
   }
-  
+
   /* Force theme inheritance for portaled content */
   .dark [data-radix-popper-content-wrapper],
   .dark [data-overlay-container] {
     color-scheme: dark;
   }
-  
+
   /* Ensure sidebar gets proper theme */
   .app-sidebar {
     background-color: var(--sidebar);
     color: var(--sidebar-foreground);
     border-color: var(--sidebar-border);
   }
-  
+
+  /* Enhanced sidebar menu item hover effects */
+  .sidebar-menu-item {
+    @apply transition-all duration-200 ease-out;
+  }
+
+  .sidebar-menu-item:hover {
+    @apply scale-[1.02];
+    background-color: var(--sidebar-accent) !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  }
+
+  .dark .sidebar-menu-item:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  }
+
   /* Enhanced hover effects for cards */
   .card-hover {
     @apply transition-all duration-200 cursor-pointer;
   }
-  
+
   .card-hover:hover {
     background-color: var(--muted) !important;
     border-color: var(--border);
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
-  
+
   .dark .card-hover:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   }
-  
+
   /* Ensure clickable cards show pointer cursor */
   .clickable-card {
     cursor: pointer !important;
   }
-  
+
   .clickable-card * {
     cursor: pointer !important;
   }
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 0e93190..f1a191c 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -7,6 +7,7 @@ import { ThemeProvider } from "@/components/providers/ThemeProvider";
 import { ErrorBoundary } from "@/components/common/ErrorBoundary";
 import { ConnectionGuard } from "@/components/common/ConnectionGuard";
 import { themeScript } from "@/lib/theme-script";
+import { I18nProvider } from "@/components/providers/I18nProvider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -29,10 +30,12 @@ export default function RootLayout({
         <ErrorBoundary>
           <ThemeProvider>
             <QueryProvider>
-              <ConnectionGuard>
-                {children}
-                <Toaster />
-              </ConnectionGuard>
+              <I18nProvider>
+                <ConnectionGuard>
+                  {children}
+                  <Toaster />
+                </ConnectionGuard>
+              </I18nProvider>
             </QueryProvider>
           </ThemeProvider>
         </ErrorBoundary>
diff --git a/frontend/src/components/auth/LoginForm.tsx b/frontend/src/components/auth/LoginForm.tsx
index 3887092..08597d9 100644
--- a/frontend/src/components/auth/LoginForm.tsx
+++ b/frontend/src/components/auth/LoginForm.tsx
@@ -10,8 +10,10 @@ import { Input } from '@/components/ui/input'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { AlertCircle } from 'lucide-react'
 import { LoadingSpinner } from '@/components/common/LoadingSpinner'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 export function LoginForm() {
+  const { t, language } = useTranslation()
   const [password, setPassword] = useState('')
   const { login, isLoading, error } = useAuth()
   const { authRequired, checkAuthRequired, hasHydrated, isAuthenticated } = useAuthStore()
@@ -81,9 +83,9 @@ export function LoginForm() {
       <div className="min-h-screen flex items-center justify-center bg-background p-4">
         <Card className="w-full max-w-md">
           <CardHeader className="text-center">
-            <CardTitle>Connection Error</CardTitle>
+            <CardTitle>{t.common.connectionError}</CardTitle>
             <CardDescription>
-              Unable to connect to the API server
+              {t.common.unableToConnect}
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -91,21 +93,21 @@ export function LoginForm() {
               <div className="flex items-start gap-2 text-red-600 text-sm">
                 <AlertCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
                 <div className="flex-1">
-                  {error || 'Unable to connect to server. Please check if the API is running.'}
+                  {error || t.auth.connectErrorHint}
                 </div>
               </div>
 
               {configInfo && (
                 <div className="space-y-2 text-xs text-muted-foreground border-t pt-3">
-                  <div className="font-medium">Diagnostic Information:</div>
+                  <div className="font-medium">{t.common.diagnosticInfo}:</div>
                   <div className="space-y-1 font-mono">
-                    <div>Version: {configInfo.version}</div>
-                    <div>Built: {new Date(configInfo.buildTime).toLocaleString()}</div>
-                    <div className="break-all">API URL: {configInfo.apiUrl}</div>
-                    <div className="break-all">Frontend: {typeof window !== 'undefined' ? window.location.href : 'N/A'}</div>
+                    <div>{t.common.version}: {configInfo.version}</div>
+                    <div>{t.common.built}: {new Date(configInfo.buildTime).toLocaleString(language === 'zh-CN' ? 'zh-CN' : language === 'zh-TW' ? 'zh-TW' : 'en-US')}</div>
+                    <div className="break-all">{t.common.apiUrl}: {configInfo.apiUrl}</div>
+                    <div className="break-all">{t.common.frontendUrl}: {typeof window !== 'undefined' ? window.location.href : 'N/A'}</div>
                   </div>
                   <div className="text-xs pt-2">
-                    Check browser console for detailed logs (look for 🔧 [Config] messages)
+                    {t.common.checkConsoleLogs}
                   </div>
                 </div>
               )}
@@ -114,7 +116,7 @@ export function LoginForm() {
                 onClick={() => window.location.reload()}
                 className="w-full"
               >
-                Retry Connection
+                {t.common.retryConnection}
               </Button>
             </div>
           </CardContent>
@@ -139,9 +141,9 @@ export function LoginForm() {
     <div className="min-h-screen flex items-center justify-center bg-background p-4">
       <Card className="w-full max-w-md">
         <CardHeader className="text-center">
-          <CardTitle>Open Notebook</CardTitle>
+          <CardTitle>{t.auth.loginTitle}</CardTitle>
           <CardDescription>
-            Enter your password to access the application
+            {t.auth.loginDesc}
           </CardDescription>
         </CardHeader>
         <CardContent>
@@ -149,7 +151,7 @@ export function LoginForm() {
             <div>
               <Input
                 type="password"
-                placeholder="Password"
+                placeholder={t.auth.passwordPlaceholder}
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 disabled={isLoading}
@@ -168,12 +170,12 @@ export function LoginForm() {
               className="w-full"
               disabled={isLoading || !password.trim()}
             >
-              {isLoading ? 'Signing in...' : 'Sign In'}
+              {isLoading ? t.auth.signingIn : t.auth.signIn}
             </Button>
 
             {configInfo && (
               <div className="text-xs text-center text-muted-foreground pt-2 border-t">
-                <div>Version {configInfo.version}</div>
+                <div>{t.common.version} {configInfo.version}</div>
                 <div className="font-mono text-[10px]">{configInfo.apiUrl}</div>
               </div>
             )}
diff --git a/frontend/src/components/common/CommandPalette.tsx b/frontend/src/components/common/CommandPalette.tsx
index 8b1bd88..331aeee 100644
--- a/frontend/src/components/common/CommandPalette.tsx
+++ b/frontend/src/components/common/CommandPalette.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState, useCallback, useMemo } from 'react'
+import { useEffect, useState, useCallback, useMemo, useId } from 'react'
 import { useRouter } from 'next/navigation'
 import { useCreateDialogs } from '@/lib/hooks/use-create-dialogs'
 import { useNotebooks } from '@/lib/hooks/use-notebooks'
@@ -29,31 +29,39 @@ import {
   Monitor,
   Loader2,
 } from 'lucide-react'
+import { useTranslation } from '@/lib/hooks/use-translation'
+import { TranslationKeys } from '@/lib/locales'
 
-const navigationItems = [
-  { name: 'Sources', href: '/sources', icon: FileText, keywords: ['files', 'documents', 'upload'] },
-  { name: 'Notebooks', href: '/notebooks', icon: Book, keywords: ['notes', 'research', 'projects'] },
-  { name: 'Ask and Search', href: '/search', icon: Search, keywords: ['find', 'query'] },
-  { name: 'Podcasts', href: '/podcasts', icon: Mic, keywords: ['audio', 'episodes', 'generate'] },
-  { name: 'Models', href: '/models', icon: Bot, keywords: ['ai', 'llm', 'providers', 'openai', 'anthropic'] },
-  { name: 'Transformations', href: '/transformations', icon: Shuffle, keywords: ['prompts', 'templates', 'actions'] },
-  { name: 'Settings', href: '/settings', icon: Settings, keywords: ['preferences', 'config', 'options'] },
-  { name: 'Advanced', href: '/advanced', icon: Wrench, keywords: ['debug', 'system', 'tools'] },
+const getNavigationItems = (t: TranslationKeys) => [
+  { name: t.navigation.sources, href: '/sources', icon: FileText, keywords: ['files', 'documents', 'upload'] },
+  { name: t.navigation.notebooks, href: '/notebooks', icon: Book, keywords: ['notes', 'research', 'projects'] },
+  { name: t.navigation.askAndSearch, href: '/search', icon: Search, keywords: ['find', 'query'] },
+  { name: t.navigation.podcasts, href: '/podcasts', icon: Mic, keywords: ['audio', 'episodes', 'generate'] },
+  { name: t.navigation.models, href: '/models', icon: Bot, keywords: ['ai', 'llm', 'providers', 'openai', 'anthropic'] },
+  { name: t.navigation.transformations, href: '/transformations', icon: Shuffle, keywords: ['prompts', 'templates', 'actions'] },
+  { name: t.navigation.settings, href: '/settings', icon: Settings, keywords: ['preferences', 'config', 'options'] },
+  { name: t.navigation.advanced, href: '/advanced', icon: Wrench, keywords: ['debug', 'system', 'tools'] },
 ]
 
-const createItems = [
-  { name: 'Create Source', action: 'source', icon: FileText },
-  { name: 'Create Notebook', action: 'notebook', icon: Book },
-  { name: 'Create Podcast', action: 'podcast', icon: Mic },
+const getCreateItems = (t: TranslationKeys) => [
+  { name: t.common.newSource, action: 'source', icon: FileText },
+  { name: t.common.newNotebook, action: 'notebook', icon: Book },
+  { name: t.common.newPodcast, action: 'podcast', icon: Mic },
 ]
 
-const themeItems = [
-  { name: 'Light Theme', value: 'light' as const, icon: Sun, keywords: ['bright', 'day'] },
-  { name: 'Dark Theme', value: 'dark' as const, icon: Moon, keywords: ['night'] },
-  { name: 'System Theme', value: 'system' as const, icon: Monitor, keywords: ['auto', 'default'] },
+const getThemeItems = (t: TranslationKeys) => [
+  { name: t.common.light, value: 'light' as const, icon: Sun, keywords: ['bright', 'day'] },
+  { name: t.common.dark, value: 'dark' as const, icon: Moon, keywords: ['night'] },
+  { name: t.common.system, value: 'system' as const, icon: Monitor, keywords: ['auto', 'default'] },
 ]
 
 export function CommandPalette() {
+  const { t } = useTranslation()
+  const commandInputId = useId()
+  const navigationItems = useMemo(() => getNavigationItems(t), [t])
+  const createItems = useMemo(() => getCreateItems(t), [t])
+  const themeItems = useMemo(() => getThemeItems(t), [t])
+  
   const [open, setOpen] = useState(false)
   const [query, setQuery] = useState('')
   const router = useRouter()
@@ -147,7 +155,7 @@ export function CommandPalette() {
         (nb.description && nb.description.toLowerCase().includes(queryLower))
       ) ?? false)
     )
-  }, [queryLower, notebooks])
+  }, [queryLower, notebooks, navigationItems, createItems, themeItems])
 
   // Determine if we should show the Search/Ask section at the top
   const showSearchFirst = query.trim() && !hasCommandMatch
@@ -156,26 +164,30 @@ export function CommandPalette() {
     <CommandDialog
       open={open}
       onOpenChange={setOpen}
-      title="Command Palette"
-      description="Navigate, search, or ask your knowledge base"
+      title={t.common.quickActions}
+      description={t.common.quickActionsDesc}
       className="sm:max-w-lg"
     >
       <CommandInput
-        placeholder="Type a command or search..."
+        id={commandInputId}
+        name="command-search"
+        placeholder={t.searchPage.enterSearchPlaceholder}
         value={query}
         onValueChange={setQuery}
+        aria-label={t.common.search}
+        autoComplete="off"
       />
       <CommandList>
         {/* Search/Ask - show FIRST when there's a query with no command match */}
         {showSearchFirst && (
-          <CommandGroup heading="Search & Ask" forceMount>
+          <CommandGroup heading={t.searchPage.searchAndAsk} forceMount>
             <CommandItem
               value={`__search__ ${query}`}
               onSelect={handleSearch}
               forceMount
             >
               <Search className="h-4 w-4" />
-              <span>Search for &ldquo;{query}&rdquo;</span>
+              <span>{t.searchPage.searchResultsFor.replace('{query}', query)}</span>
             </CommandItem>
             <CommandItem
               value={`__ask__ ${query}`}
@@ -183,13 +195,13 @@ export function CommandPalette() {
               forceMount
             >
               <MessageCircleQuestion className="h-4 w-4" />
-              <span>Ask about &ldquo;{query}&rdquo;</span>
+              <span>{t.searchPage.askAbout.replace('{query}', query)}</span>
             </CommandItem>
           </CommandGroup>
         )}
 
         {/* Navigation */}
-        <CommandGroup heading="Navigation">
+        <CommandGroup heading={t.navigation.nav}>
           {navigationItems.map((item) => (
             <CommandItem
               key={item.href}
@@ -203,11 +215,11 @@ export function CommandPalette() {
         </CommandGroup>
 
         {/* Notebooks */}
-        <CommandGroup heading="Notebooks">
+        <CommandGroup heading={t.notebooks.title}>
           {notebooksLoading ? (
             <CommandItem disabled>
               <Loader2 className="h-4 w-4 animate-spin" />
-              <span>Loading notebooks...</span>
+              <span>{t.common.loading}</span>
             </CommandItem>
           ) : notebooks && notebooks.length > 0 ? (
             notebooks.map((notebook) => (
@@ -224,7 +236,7 @@ export function CommandPalette() {
         </CommandGroup>
 
         {/* Create */}
-        <CommandGroup heading="Create">
+        <CommandGroup heading={t.navigation.create}>
           {createItems.map((item) => (
             <CommandItem
               key={item.action}
@@ -238,7 +250,7 @@ export function CommandPalette() {
         </CommandGroup>
 
         {/* Theme */}
-        <CommandGroup heading="Theme">
+        <CommandGroup heading={t.navigation.theme}>
           {themeItems.map((item) => (
             <CommandItem
               key={item.value}
@@ -255,14 +267,14 @@ export function CommandPalette() {
         {query.trim() && hasCommandMatch && (
           <>
             <CommandSeparator />
-            <CommandGroup heading="Or search your knowledge base" forceMount>
+            <CommandGroup heading={t.searchPage.orSearchKb} forceMount>
               <CommandItem
                 value={`__search__ ${query}`}
                 onSelect={handleSearch}
                 forceMount
               >
                 <Search className="h-4 w-4" />
-                <span>Search for &ldquo;{query}&rdquo;</span>
+                <span>{t.searchPage.searchResultsFor.replace('{query}', query)}</span>
               </CommandItem>
               <CommandItem
                 value={`__ask__ ${query}`}
@@ -270,7 +282,7 @@ export function CommandPalette() {
                 forceMount
               >
                 <MessageCircleQuestion className="h-4 w-4" />
-                <span>Ask about &ldquo;{query}&rdquo;</span>
+                <span>{t.searchPage.askAbout.replace('{query}', query)}</span>
               </CommandItem>
             </CommandGroup>
           </>
diff --git a/frontend/src/components/common/ConfirmDialog.test.tsx b/frontend/src/components/common/ConfirmDialog.test.tsx
new file mode 100644
index 0000000..a73d6de
--- /dev/null
+++ b/frontend/src/components/common/ConfirmDialog.test.tsx
@@ -0,0 +1,52 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ConfirmDialog } from './ConfirmDialog'
+
+// useTranslation is mocked globally in setup.ts
+
+describe('ConfirmDialog', () => {
+  const onConfirmMock = vi.fn()
+  const onOpenChangeMock = vi.fn()
+
+  const defaultProps = {
+    open: true,
+    onOpenChange: onOpenChangeMock,
+    title: 'Test Title',
+    description: 'Test Description',
+    onConfirm: onConfirmMock,
+  }
+
+  it('should render correct titles and descriptions', () => {
+    render(<ConfirmDialog {...defaultProps} />)
+    
+    expect(screen.getByText('Test Title')).toBeInTheDocument()
+    expect(screen.getByText('Test Description')).toBeInTheDocument()
+    // Localized text from our setup.ts mock should be visible
+    expect(screen.getByText('Confirm')).toBeInTheDocument()
+    expect(screen.getByText('Cancel')).toBeInTheDocument()
+  })
+
+  it('should call onConfirm when confirm button is clicked', () => {
+    render(<ConfirmDialog {...defaultProps} />)
+    
+    const confirmBtn = screen.getByText('Confirm')
+    fireEvent.click(confirmBtn)
+    
+    expect(onConfirmMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('should show custom confirm text if provided', () => {
+    render(<ConfirmDialog {...defaultProps} confirmText="Delete Now" />)
+    expect(screen.getByText('Delete Now')).toBeInTheDocument()
+  })
+
+  it('should show loading state and disable buttons', () => {
+    render(<ConfirmDialog {...defaultProps} isLoading={true} />)
+    
+    const confirmBtn = screen.getByText('Confirm').closest('button')
+    const cancelBtn = screen.getByText('Cancel').closest('button')
+    
+    expect(confirmBtn).toBeDisabled()
+    expect(cancelBtn).toBeDisabled()
+  })
+})
diff --git a/frontend/src/components/common/ConfirmDialog.tsx b/frontend/src/components/common/ConfirmDialog.tsx
index 12e2457..fc5d706 100644
--- a/frontend/src/components/common/ConfirmDialog.tsx
+++ b/frontend/src/components/common/ConfirmDialog.tsx
@@ -10,6 +10,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
+import { useTranslation } from '@/lib/hooks/use-translation'
 import { LoadingSpinner } from '@/components/common/LoadingSpinner'
 
 interface ConfirmDialogProps {
@@ -28,11 +29,14 @@ export function ConfirmDialog({
   onOpenChange,
   title,
   description,
-  confirmText = 'Confirm',
+  confirmText,
   confirmVariant = 'default',
   onConfirm,
   isLoading = false,
 }: ConfirmDialogProps) {
+  const { t } = useTranslation()
+  const finalConfirmText = confirmText || t.common.confirm
+
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent>
@@ -41,7 +45,7 @@ export function ConfirmDialog({
           <AlertDialogDescription>{description}</AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel disabled={isLoading}>Cancel</AlertDialogCancel>
+          <AlertDialogCancel disabled={isLoading}>{t.common.cancel}</AlertDialogCancel>
           <AlertDialogAction
             onClick={onConfirm}
             disabled={isLoading}
@@ -50,10 +54,10 @@ export function ConfirmDialog({
             {isLoading ? (
               <>
                 <LoadingSpinner size="sm" className="mr-2" />
-                {confirmText}
+                {finalConfirmText}
               </>
             ) : (
-              confirmText
+              finalConfirmText
             )}
           </AlertDialogAction>
         </AlertDialogFooter>
diff --git a/frontend/src/components/common/ConnectionGuard.tsx b/frontend/src/components/common/ConnectionGuard.tsx
index f5173c1..e0513db 100644
--- a/frontend/src/components/common/ConnectionGuard.tsx
+++ b/frontend/src/components/common/ConnectionGuard.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState, useCallback } from 'react'
+import { useEffect, useState, useCallback, useRef } from 'react'
 import { ConnectionError } from '@/lib/types/config'
 import { ConnectionErrorOverlay } from '@/components/errors/ConnectionErrorOverlay'
 import { getConfig, resetConfig } from '@/lib/config'
@@ -12,9 +12,18 @@ interface ConnectionGuardProps {
 export function ConnectionGuard({ children }: ConnectionGuardProps) {
   const [error, setError] = useState<ConnectionError | null>(null)
   const [isChecking, setIsChecking] = useState(true)
+  // Use a ref to track checking status to avoid dependency cycles
+  const isCheckingRef = useRef(false)
 
   const checkConnection = useCallback(async () => {
+    // Prevent re-entry if already checking
+    if (isCheckingRef.current) {
+       return
+    }
+    
+    isCheckingRef.current = true
     setIsChecking(true)
+    
     setError(null)
 
     // Reset config cache to force a fresh fetch
@@ -25,41 +34,46 @@ export function ConnectionGuard({ children }: ConnectionGuardProps) {
 
       // Check if database is offline
       if (config.dbStatus === 'offline') {
-        setError({
+        const dbError: ConnectionError = {
           type: 'database-offline',
           details: {
-            message: 'The API server is running, but the database is not accessible',
+            message: 'Database is offline', // Fallback message, UI will translate
             attemptedUrl: config.apiUrl,
           },
-        })
+        }
+        setError(dbError)
+        isCheckingRef.current = false
         setIsChecking(false)
         return
       }
 
       // If we got here, connection is good
       setError(null)
+      isCheckingRef.current = false
       setIsChecking(false)
     } catch (err) {
       // API is unreachable
-      const errorMessage =
-        err instanceof Error ? err.message : 'Unknown error occurred'
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error'
       const attemptedUrl =
         typeof window !== 'undefined'
           ? `${window.location.origin}/api/config`
           : undefined
 
-      setError({
+      const apiError: ConnectionError = {
         type: 'api-unreachable',
         details: {
-          message: 'The Open Notebook API server could not be reached',
+          message: 'Unable to connect to API', // Fallback message
           technicalMessage: errorMessage,
           stack: err instanceof Error ? err.stack : undefined,
           attemptedUrl,
         },
-      })
+      }
+      
+      setError(apiError)
+      isCheckingRef.current = false
       setIsChecking(false)
     }
-  }, [])
+  }, []) // Empty dependency array - stable callback
 
   // Check connection on mount
   useEffect(() => {
diff --git a/frontend/src/components/common/ContextToggle.tsx b/frontend/src/components/common/ContextToggle.tsx
index 32d2800..3cb0fbd 100644
--- a/frontend/src/components/common/ContextToggle.tsx
+++ b/frontend/src/components/common/ContextToggle.tsx
@@ -10,6 +10,7 @@ import {
 } from '@/components/ui/tooltip'
 import { cn } from '@/lib/utils'
 import { ContextMode } from '@/app/(dashboard)/notebooks/[id]/page'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface ContextToggleProps {
   mode: ContextMode
@@ -18,28 +19,29 @@ interface ContextToggleProps {
   className?: string
 }
 
-const MODE_CONFIG = {
-  off: {
-    icon: EyeOff,
-    label: 'Not included in chat',
-    color: 'text-muted-foreground',
-    bgColor: 'hover:bg-muted'
-  },
-  insights: {
-    icon: Lightbulb,
-    label: 'Insights only',
-    color: 'text-amber-600',
-    bgColor: 'hover:bg-amber-50'
-  },
-  full: {
-    icon: FileText,
-    label: 'Full content',
-    color: 'text-primary',
-    bgColor: 'hover:bg-primary/10'
-  }
-} as const
-
 export function ContextToggle({ mode, hasInsights = false, onChange, className }: ContextToggleProps) {
+  const { t } = useTranslation()
+
+  const MODE_CONFIG = {
+    off: {
+      icon: EyeOff,
+      label: t.common.contextModes.off,
+      color: 'text-muted-foreground',
+      bgColor: 'hover:bg-muted'
+    },
+    insights: {
+      icon: Lightbulb,
+      label: t.common.contextModes.insights,
+      color: 'text-amber-600',
+      bgColor: 'hover:bg-amber-50'
+    },
+    full: {
+      icon: FileText,
+      label: t.common.contextModes.full,
+      color: 'text-primary',
+      bgColor: 'hover:bg-primary/10'
+    }
+  } as const
   const config = MODE_CONFIG[mode]
   const Icon = config.icon
 
@@ -77,7 +79,7 @@ export function ContextToggle({ mode, hasInsights = false, onChange, className }
         <TooltipContent>
           <p className="text-xs">{config.label}</p>
           <p className="text-[10px] text-muted-foreground mt-1">
-            Click to cycle
+            {t.common.contextModes.clickToCycle}
           </p>
         </TooltipContent>
       </Tooltip>
diff --git a/frontend/src/components/common/ErrorBoundary.tsx b/frontend/src/components/common/ErrorBoundary.tsx
index e882019..caf3c38 100644
--- a/frontend/src/components/common/ErrorBoundary.tsx
+++ b/frontend/src/components/common/ErrorBoundary.tsx
@@ -4,6 +4,10 @@ import React from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { AlertTriangle, RefreshCw } from 'lucide-react'
+import { enUS } from '@/lib/locales/en-US'
+
+// Use English as fallback for ErrorBoundary (class component cannot use hooks)
+const t = enUS
 
 interface ErrorBoundaryState {
   hasError: boolean
@@ -55,15 +59,15 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
               <div className="mx-auto w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 flex items-center justify-center mb-4">
                 <AlertTriangle className="w-6 h-6 text-red-600 dark:text-red-400" />
               </div>
-              <CardTitle className="text-red-900 dark:text-red-100">Something went wrong</CardTitle>
+              <CardTitle className="text-red-900 dark:text-red-100">{t?.common?.error || 'Something went wrong'}</CardTitle>
               <CardDescription>
-                An unexpected error occurred. Please try refreshing the page.
+                {t?.common?.refreshPage || 'An unexpected error occurred. Please try refreshing the page.'}
               </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
               {process.env.NODE_ENV === 'development' && this.state.error && (
                 <details className="text-xs bg-muted p-3 rounded border">
-                  <summary className="cursor-pointer font-medium">Error Details</summary>
+                  <summary className="cursor-pointer font-medium">{t?.common?.errorDetails || 'Error Details'}</summary>
                   <pre className="mt-2 whitespace-pre-wrap break-all">
                     {this.state.error.toString()}
                   </pre>
@@ -75,13 +79,13 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
                 variant="outline"
               >
                 <RefreshCw className="w-4 h-4 mr-2" />
-                Try Again
+                {t?.common?.retry || 'Try Again'}
               </Button>
               <Button 
                 onClick={() => window.location.reload()} 
                 className="w-full"
               >
-                Refresh Page
+                {t?.common?.refresh || 'Refresh Page'}
               </Button>
             </CardContent>
           </Card>
diff --git a/frontend/src/components/common/InlineEdit.tsx b/frontend/src/components/common/InlineEdit.tsx
index d2cf5b9..b5acb4a 100644
--- a/frontend/src/components/common/InlineEdit.tsx
+++ b/frontend/src/components/common/InlineEdit.tsx
@@ -1,7 +1,8 @@
 'use client'
 
-import { useState, useRef, useEffect, type RefObject } from 'react'
+import { useState, useRef, useEffect, useId, type RefObject } from 'react'
 import { cn } from '@/lib/utils'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface InlineEditProps {
   value: string
@@ -11,6 +12,9 @@ interface InlineEditProps {
   placeholder?: string
   multiline?: boolean
   emptyText?: string
+  id?: string
+  name?: string
+  autocomplete?: string
 }
 
 export function InlineEdit({
@@ -20,8 +24,15 @@ export function InlineEdit({
   inputClassName,
   placeholder,
   multiline = false,
-  emptyText = 'Click to edit'
+  emptyText,
+  id: providedId,
+  name,
+  autocomplete = 'off'
 }: InlineEditProps) {
+  const generatedId = useId()
+  const id = providedId || generatedId
+  const { t } = useTranslation()
+  const defaultEmptyText = emptyText || t.common.clickToEdit
   const [isEditing, setIsEditing] = useState(false)
   const [editValue, setEditValue] = useState(value)
   const [isSaving, setIsSaving] = useState(false)
@@ -85,7 +96,7 @@ export function InlineEdit({
           setIsEditing(true)
         }}
       >
-        {value || <span className="text-muted-foreground">{emptyText}</span>}
+        {value || <span className="text-muted-foreground">{defaultEmptyText}</span>}
       </button>
     )
   }
@@ -111,6 +122,9 @@ export function InlineEdit({
         )}
         placeholder={placeholder}
         disabled={isSaving}
+        id={id}
+        name={name}
+        autoComplete={autocomplete}
       />
     )
   }
@@ -134,6 +148,9 @@ export function InlineEdit({
       )}
       placeholder={placeholder}
       disabled={isSaving}
+      id={id}
+      name={name}
+      autoComplete={autocomplete}
     />
   )
 }
diff --git a/frontend/src/components/common/LanguageLoadingOverlay.tsx b/frontend/src/components/common/LanguageLoadingOverlay.tsx
new file mode 100644
index 0000000..2ed49ff
--- /dev/null
+++ b/frontend/src/components/common/LanguageLoadingOverlay.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { useEffect, useState, useCallback, useRef } from 'react'
+import { useTranslation as useI18nTranslation } from 'react-i18next'
+import { Loader2 } from 'lucide-react'
+import {
+  i18nEvents,
+  I18N_LANGUAGE_CHANGE_END,
+  I18N_LANGUAGE_CHANGE_START,
+} from '@/lib/i18n-events'
+
+/**
+ * LanguageLoadingOverlay - Shows a brief loading overlay during language switches
+ * to provide a smoother UX and hide the flash caused by re-rendering.
+ * 
+ * IMPORTANT: This component intentionally uses react-i18next directly instead of
+ * our custom useTranslation hook to avoid Proxy-related issues during the
+ * language change transition period.
+ */
+export function LanguageLoadingOverlay() {
+  const { t } = useI18nTranslation()
+  const [isChanging, setIsChanging] = useState(false)
+
+  const isChangingRef = useRef(false)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const handleLanguageChanging = useCallback(() => {
+    if (!isChangingRef.current) {
+      isChangingRef.current = true
+      setIsChanging(true)
+    }
+
+    // Safety timeout: ensure we don't get stuck forever.
+    if (!timerRef.current) {
+      timerRef.current = setTimeout(() => {
+        isChangingRef.current = false
+        setIsChanging(false)
+        timerRef.current = null
+      }, 1500)
+    }
+  }, [])
+
+  const handleLanguageChanged = useCallback(() => {
+    // Immediately hide the overlay on language change success
+    if (timerRef.current) {
+      clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+    if (isChangingRef.current) {
+      isChangingRef.current = false
+      setIsChanging(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [])
+
+  useEffect(() => {
+    const onChangeStart = () => handleLanguageChanging()
+    const onChangeEnd = () => handleLanguageChanged()
+
+    i18nEvents.addEventListener(I18N_LANGUAGE_CHANGE_START, onChangeStart)
+    i18nEvents.addEventListener(I18N_LANGUAGE_CHANGE_END, onChangeEnd)
+
+    return () => {
+      i18nEvents.removeEventListener(I18N_LANGUAGE_CHANGE_START, onChangeStart)
+      i18nEvents.removeEventListener(I18N_LANGUAGE_CHANGE_END, onChangeEnd)
+    }
+  }, [handleLanguageChanging, handleLanguageChanged])
+
+  if (!isChanging) return null
+
+  // Use react-i18next's t() directly - this is safe during language transitions
+  // because react-i18next handles the loading state internally
+  const loadingText = t('common.loading', { defaultValue: '加载中...' })
+
+  return (
+    <div
+      className="fixed inset-0 z-[9999] flex items-center justify-center bg-background/80 backdrop-blur-sm transition-opacity duration-200"
+      style={{ opacity: isChanging ? 1 : 0 }}
+    >
+      <div className="flex flex-col items-center gap-3">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        <span className="text-sm text-muted-foreground">{loadingText}</span>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/common/LanguageToggle.tsx b/frontend/src/components/common/LanguageToggle.tsx
new file mode 100644
index 0000000..aa029cf
--- /dev/null
+++ b/frontend/src/components/common/LanguageToggle.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Languages } from 'lucide-react'
+import { useTranslation } from '@/lib/hooks/use-translation'
+
+interface LanguageToggleProps {
+  iconOnly?: boolean
+}
+
+export function LanguageToggle({ iconOnly = false }: LanguageToggleProps) {
+  const { language, setLanguage, t } = useTranslation()
+  
+  // Keep the actual language code for proper comparison
+  const currentLang = language || 'en-US'
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button 
+          variant={iconOnly ? "ghost" : "outline"} 
+          size={iconOnly ? "icon" : "default"} 
+          className={iconOnly ? "h-9 w-full sidebar-menu-item" : "w-full justify-start gap-2 sidebar-menu-item"}
+        >
+          <Languages className="h-[1.2rem] w-[1.2rem]" />
+          {!iconOnly && <span>{t.common.language}</span>}
+          <span className="sr-only">{t.navigation.language}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem 
+          onClick={() => setLanguage('en-US')}
+          className={currentLang === 'en-US' || currentLang.startsWith('en') ? 'bg-accent' : ''}
+        >
+          <span>{t.common.english}</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem 
+          onClick={() => setLanguage('zh-CN')}
+          className={currentLang === 'zh-CN' || currentLang.startsWith('zh-Hans') || currentLang === 'zh' ? 'bg-accent' : ''}
+        >
+          <span>{t.common.chinese}</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem 
+          onClick={() => setLanguage('zh-TW')}
+          className={currentLang === 'zh-TW' || currentLang.startsWith('zh-Hant') ? 'bg-accent' : ''}
+        >
+          <span>{t.common.traditionalChinese}</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/frontend/src/components/common/LoadingSpinner.tsx b/frontend/src/components/common/LoadingSpinner.tsx
index a4b8ff3..1897f28 100644
--- a/frontend/src/components/common/LoadingSpinner.tsx
+++ b/frontend/src/components/common/LoadingSpinner.tsx
@@ -14,6 +14,9 @@ export function LoadingSpinner({ className, size = 'md' }: LoadingSpinnerProps)
   }
 
   return (
-    <Loader2 className={cn('animate-spin', sizeClasses[size], className)} />
+    <Loader2 
+      data-testid="loading-spinner"
+      className={cn('animate-spin', sizeClasses[size], className)} 
+    />
   )
 }
\ No newline at end of file
diff --git a/frontend/src/components/common/ModelSelector.tsx b/frontend/src/components/common/ModelSelector.tsx
index 5f8daae..c757b57 100644
--- a/frontend/src/components/common/ModelSelector.tsx
+++ b/frontend/src/components/common/ModelSelector.tsx
@@ -1,11 +1,13 @@
-'use client'
-
+import { useId } from 'react'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Label } from '@/components/ui/label'
 import { useModels } from '@/lib/hooks/use-models'
 import { LoadingSpinner } from '@/components/common/LoadingSpinner'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface ModelSelectorProps {
+  id?: string
+  name?: string
   label?: string
   modelType: 'language' | 'embedding' | 'speech_to_text' | 'text_to_speech'
   value: string
@@ -14,24 +16,29 @@ interface ModelSelectorProps {
   disabled?: boolean
 }
 
-export function ModelSelector({ 
-  label, 
-  modelType, 
-  value, 
-  onChange, 
-  placeholder = 'Select a model',
-  disabled = false 
+export function ModelSelector({
+  id,
+  name,
+  label,
+  modelType,
+  value,
+  onChange,
+  placeholder,
+  disabled = false
 }: ModelSelectorProps) {
+  const { t } = useTranslation()
   const { data: models, isLoading } = useModels()
-  
+  const derivedId = useId()
+  const selectId = id || derivedId
+
   // Filter models by type
   const filteredModels = models?.filter(model => model.type === modelType) || []
   return (
     <div className="space-y-2">
-      {label && <Label>{label}</Label>}
-      <Select value={value} onValueChange={onChange} disabled={disabled || isLoading}>
-        <SelectTrigger>
-          <SelectValue placeholder={placeholder} />
+      {label && <Label htmlFor={selectId}>{label}</Label>}
+      <Select name={name} value={value} onValueChange={onChange} disabled={disabled || isLoading}>
+        <SelectTrigger id={selectId}>
+          <SelectValue placeholder={placeholder || t.settings.embeddingOptionPlaceholder} />
         </SelectTrigger>
         <SelectContent>
           {isLoading ? (
@@ -40,7 +47,7 @@ export function ModelSelector({
             </div>
           ) : filteredModels.length === 0 ? (
             <div className="text-sm text-muted-foreground py-2 px-2">
-              No {modelType.replace('_', ' ')} models available
+              {t.common.noResults}
             </div>
           ) : (
             filteredModels.map((model) => (
diff --git a/frontend/src/components/common/ThemeToggle.tsx b/frontend/src/components/common/ThemeToggle.tsx
index b12c23b..78edc85 100644
--- a/frontend/src/components/common/ThemeToggle.tsx
+++ b/frontend/src/components/common/ThemeToggle.tsx
@@ -9,6 +9,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { Sun, Moon, Monitor } from 'lucide-react'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface ThemeToggleProps {
   iconOnly?: boolean
@@ -16,6 +17,7 @@ interface ThemeToggleProps {
 
 export function ThemeToggle({ iconOnly = false }: ThemeToggleProps) {
   const { theme, setTheme } = useTheme()
+  const { t } = useTranslation()
 
   return (
     <DropdownMenu>
@@ -23,14 +25,14 @@ export function ThemeToggle({ iconOnly = false }: ThemeToggleProps) {
         <Button 
           variant={iconOnly ? "ghost" : "outline"} 
           size={iconOnly ? "icon" : "default"} 
-          className={iconOnly ? "h-9 w-full" : "w-full justify-start gap-2"}
+          className={iconOnly ? "h-9 w-full sidebar-menu-item" : "w-full justify-start gap-2 sidebar-menu-item"}
         >
           <div className="relative h-[1.2rem] w-[1.2rem]">
             <Sun className="absolute inset-0 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
             <Moon className="absolute inset-0 h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           </div>
-          {!iconOnly && <span>Theme</span>}
-          <span className="sr-only">Toggle theme</span>
+          {!iconOnly && <span>{t.common.theme}</span>}
+          <span className="sr-only">{t.navigation.theme}</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
@@ -39,21 +41,21 @@ export function ThemeToggle({ iconOnly = false }: ThemeToggleProps) {
           className={theme === 'light' ? 'bg-accent' : ''}
         >
           <Sun className="mr-2 h-4 w-4" />
-          <span>Light</span>
+          <span>{t.common.light}</span>
         </DropdownMenuItem>
         <DropdownMenuItem 
           onClick={() => setTheme('dark')}
           className={theme === 'dark' ? 'bg-accent' : ''}
         >
           <Moon className="mr-2 h-4 w-4" />
-          <span>Dark</span>
+          <span>{t.common.dark}</span>
         </DropdownMenuItem>
         <DropdownMenuItem 
           onClick={() => setTheme('system')}
           className={theme === 'system' ? 'bg-accent' : ''}
         >
           <Monitor className="mr-2 h-4 w-4" />
-          <span>System</span>
+          <span>{t.common.system}</span>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
diff --git a/frontend/src/components/errors/ConnectionErrorOverlay.tsx b/frontend/src/components/errors/ConnectionErrorOverlay.tsx
index f1def58..d4a3157 100644
--- a/frontend/src/components/errors/ConnectionErrorOverlay.tsx
+++ b/frontend/src/components/errors/ConnectionErrorOverlay.tsx
@@ -10,6 +10,7 @@ import {
 } from '@/components/ui/collapsible'
 import { Database, Server, ChevronDown, ExternalLink } from 'lucide-react'
 import { ConnectionError } from '@/lib/types/config'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface ConnectionErrorOverlayProps {
   error: ConnectionError
@@ -20,6 +21,7 @@ export function ConnectionErrorOverlay({
   error,
   onRetry,
 }: ConnectionErrorOverlayProps) {
+  const { t } = useTranslation()
   const [showDetails, setShowDetails] = useState(false)
   const isApiError = error.type === 'api-unreachable'
 
@@ -41,56 +43,56 @@ export function ConnectionErrorOverlay({
           <div>
             <h1 className="text-2xl font-bold" id="error-title">
               {isApiError
-                ? 'Unable to Connect to API Server'
-                : 'Database Connection Failed'}
+                ? t.connectionErrors.apiTitle
+                : t.connectionErrors.dbTitle}
             </h1>
             <p className="text-muted-foreground">
               {isApiError
-                ? 'The Open Notebook API server could not be reached'
-                : 'The API server is running, but the database is not accessible'}
+                ? t.connectionErrors.apiDesc
+                : t.connectionErrors.dbDesc}
             </p>
           </div>
         </div>
 
         {/* Troubleshooting instructions */}
         <div className="space-y-4 border-l-4 border-primary pl-4">
-          <h2 className="font-semibold">This usually means:</h2>
+          <h2 className="font-semibold">{t.connectionErrors.troubleshooting}</h2>
           <ul className="list-disc list-inside space-y-2 text-sm">
             {isApiError ? (
               <>
-                <li>The API server is not running</li>
-                <li>The API server is running on a different address</li>
-                <li>Network connectivity issues</li>
+                <li>{t.connectionErrors.apiUnreachable1}</li>
+                <li>{t.connectionErrors.apiUnreachable2}</li>
+                <li>{t.connectionErrors.apiUnreachable3}</li>
               </>
             ) : (
               <>
-                <li>SurrealDB is not running</li>
-                <li>Database connection settings are incorrect</li>
-                <li>Network issues between API and database</li>
+                <li>{t.connectionErrors.dbFailed1}</li>
+                <li>{t.connectionErrors.dbFailed2}</li>
+                <li>{t.connectionErrors.dbFailed3}</li>
               </>
             )}
           </ul>
 
-          <h2 className="font-semibold mt-4">Quick fixes:</h2>
+          <h2 className="font-semibold mt-4">{t.connectionErrors.quickFixes}</h2>
           {isApiError ? (
             <div className="space-y-2 text-sm bg-muted p-4 rounded">
-              <p className="font-medium">Set the API_URL environment variable:</p>
+              <p className="font-medium">{t.connectionErrors.setApiUrl}</p>
               <code className="block bg-background p-2 rounded text-xs">
-                # For Docker:
+                # {t.connectionErrors.dockerLabel}:
                 <br />
                 docker run -e API_URL=http://your-host:5055 ...
                 <br />
                 <br />
-                # For local development (.env file):
+                # {t.connectionErrors.localDevLabel}:
                 <br />
                 API_URL=http://localhost:5055
               </code>
             </div>
           ) : (
             <div className="space-y-2 text-sm bg-muted p-4 rounded">
-              <p className="font-medium">Check if SurrealDB is running:</p>
+              <p className="font-medium">{t.connectionErrors.checkSurreal}</p>
               <code className="block bg-background p-2 rounded text-xs">
-                # For Docker:
+                # {t.connectionErrors.dockerLabel}:
                 <br />
                 docker compose ps | grep surrealdb
                 <br />
@@ -102,14 +104,14 @@ export function ConnectionErrorOverlay({
 
         {/* Documentation link */}
         <div className="text-sm">
-          <p>For detailed setup instructions, see:</p>
+          <p>{t.connectionErrors.seeDocumentation}</p>
           <a
             href="https://github.com/lfnovo/open-notebook"
             target="_blank"
             rel="noopener noreferrer"
             className="text-primary hover:underline inline-flex items-center gap-1"
           >
-            Open Notebook Documentation
+            {t.connectionErrors.docLink}
             <ExternalLink className="w-4 h-4" />
           </a>
         </div>
@@ -119,7 +121,7 @@ export function ConnectionErrorOverlay({
           <Collapsible open={showDetails} onOpenChange={setShowDetails}>
             <CollapsibleTrigger asChild>
               <Button variant="ghost" size="sm" className="w-full justify-between">
-                <span>Show Technical Details</span>
+                <span>{t.connectionErrors.showTechnical}</span>
                 <ChevronDown
                   className={`w-4 h-4 transition-transform ${
                     showDetails ? 'rotate-180' : ''
@@ -131,23 +133,23 @@ export function ConnectionErrorOverlay({
               <div className="space-y-2 text-sm bg-muted p-4 rounded font-mono">
                 {error.details.attemptedUrl && (
                   <div>
-                    <strong>Attempted URL:</strong> {error.details.attemptedUrl}
+                    <strong>{t.connectionErrors.attemptedUrl}:</strong> {error.details.attemptedUrl}
                   </div>
                 )}
                 {error.details.message && (
                   <div>
-                    <strong>Message:</strong> {error.details.message}
+                    <strong>{t.connectionErrors.message}:</strong> {error.details.message}
                   </div>
                 )}
                 {error.details.technicalMessage && (
                   <div>
-                    <strong>Technical Details:</strong>{' '}
+                    <strong>{t.connectionErrors.technicalDetails}:</strong>{' '}
                     {error.details.technicalMessage}
                   </div>
                 )}
                 {error.details.stack && (
                   <div>
-                    <strong>Stack Trace:</strong>
+                    <strong>{t.connectionErrors.stackTrace}:</strong>
                     <pre className="mt-2 overflow-x-auto text-xs">
                       {error.details.stack}
                     </pre>
@@ -161,10 +163,10 @@ export function ConnectionErrorOverlay({
         {/* Retry button */}
         <div className="pt-4 border-t">
           <Button onClick={onRetry} className="w-full" size="lg">
-            Retry Connection
+            {t.connectionErrors.retryLabel}
           </Button>
           <p className="text-xs text-muted-foreground text-center mt-2">
-            Press R or click the button to retry
+            {t.connectionErrors.retryHint}
           </p>
         </div>
       </Card>
diff --git a/frontend/src/components/layout/AppSidebar.test.tsx b/frontend/src/components/layout/AppSidebar.test.tsx
new file mode 100644
index 0000000..00fa921
--- /dev/null
+++ b/frontend/src/components/layout/AppSidebar.test.tsx
@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import { AppSidebar } from './AppSidebar'
+import { useSidebarStore } from '@/lib/stores/sidebar-store'
+
+// Mock Tooltip components to avoid Radix UI async issues in tests
+vi.mock('@/components/ui/tooltip', () => ({
+  TooltipProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  TooltipTrigger: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  TooltipContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}))
+// But setup.ts has some basic mocks, let's see.
+
+describe('AppSidebar', () => {
+  it('renders correctly when expanded', () => {
+    render(<AppSidebar />)
+    
+    // Check for logo or app name (using actual locale value)
+    expect(screen.getByText(/Open Notebook/i)).toBeDefined()
+    
+    // Check for navigation items (using actual locale values)
+    expect(screen.getByText(/Sources/i)).toBeDefined()
+    expect(screen.getByText(/Notebooks/i)).toBeDefined()
+  })
+
+  it('toggles collapse state when clicking handle', () => {
+    const toggleCollapse = vi.fn()
+    vi.mocked(useSidebarStore).mockReturnValue({
+      isCollapsed: false,
+      toggleCollapse,
+    } as any)
+
+    render(<AppSidebar />)
+    
+    // The collapse button has ChevronLeft icon when expanded
+    // The collapse button has ChevronLeft icon when expanded
+    // const toggleButton = screen.getAllByRole('button')[0]
+    // Let's use more specific selector if possible, but AppSidebar has many buttons
+    // Actually, line 147 has the button
+    
+    // Use data-testid for reliable selection
+    fireEvent.click(screen.getByTestId('sidebar-toggle'))
+    
+    expect(toggleCollapse).toHaveBeenCalled()
+  })
+
+  it('shows collapsed view when isCollapsed is true', () => {
+    vi.mocked(useSidebarStore).mockReturnValue({
+      isCollapsed: true,
+      toggleCollapse: vi.fn(),
+    } as any)
+
+    render(<AppSidebar />)
+    
+    // In collapsed mode, app name shouldn't be visible (as text)
+    expect(screen.queryByText(/Open Notebook/i)).toBeNull()
+  })
+})
diff --git a/frontend/src/components/layout/AppSidebar.tsx b/frontend/src/components/layout/AppSidebar.tsx
index db516c9..f96a898 100644
--- a/frontend/src/components/layout/AppSidebar.tsx
+++ b/frontend/src/components/layout/AppSidebar.tsx
@@ -23,6 +23,9 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { ThemeToggle } from '@/components/common/ThemeToggle'
+import { LanguageToggle } from '@/components/common/LanguageToggle'
+import { TranslationKeys } from '@/lib/locales'
+import { useTranslation } from '@/lib/hooks/use-translation'
 import { Separator } from '@/components/ui/separator'
 import {
   Book,
@@ -40,33 +43,33 @@ import {
   Command,
 } from 'lucide-react'
 
-const navigation = [
+const getNavigation = (t: TranslationKeys) => [
   {
-    title: 'Collect',
+    title: t.navigation.collect,
     items: [
-      { name: 'Sources', href: '/sources', icon: FileText },
+      { name: t.navigation.sources, href: '/sources', icon: FileText },
     ],
   },
   {
-    title: 'Process',
+    title: t.navigation.process,
     items: [
-      { name: 'Notebooks', href: '/notebooks', icon: Book },
-      { name: 'Ask and Search', href: '/search', icon: Search },
+      { name: t.navigation.notebooks, href: '/notebooks', icon: Book },
+      { name: t.navigation.askAndSearch, href: '/search', icon: Search },
     ],
   },
   {
-    title: 'Create',
+    title: t.navigation.create,
     items: [
-      { name: 'Podcasts', href: '/podcasts', icon: Mic },
+      { name: t.navigation.podcasts, href: '/podcasts', icon: Mic },
     ],
   },
   {
-    title: 'Manage',
+    title: t.navigation.manage,
     items: [
-      { name: 'Models', href: '/models', icon: Bot },
-      { name: 'Transformations', href: '/transformations', icon: Shuffle },
-      { name: 'Settings', href: '/settings', icon: Settings },
-      { name: 'Advanced', href: '/advanced', icon: Wrench },
+      { name: t.navigation.models, href: '/models', icon: Bot },
+      { name: t.navigation.transformations, href: '/transformations', icon: Shuffle },
+      { name: t.navigation.settings, href: '/settings', icon: Settings },
+      { name: t.navigation.advanced, href: '/advanced', icon: Wrench },
     ],
   },
 ] as const
@@ -74,6 +77,8 @@ const navigation = [
 type CreateTarget = 'source' | 'notebook' | 'podcast'
 
 export function AppSidebar() {
+  const { t } = useTranslation()
+  const navigation = getNavigation(t)
   const pathname = usePathname()
   const { logout } = useAuth()
   const { isCollapsed, toggleCollapse } = useSidebarStore()
@@ -134,9 +139,9 @@ export function AppSidebar() {
           ) : (
             <>
               <div className="flex items-center gap-2">
-                <Image src="/logo.svg" alt="Open Notebook" width={32} height={32} />
+                <Image src="/logo.svg" alt={t.common.appName} width={32} height={32} />
                 <span className="text-base font-medium text-sidebar-foreground">
-                  Open Notebook
+                  {t.common.appName}
                 </span>
               </div>
               <Button
@@ -144,6 +149,7 @@ export function AppSidebar() {
                 size="sm"
                 onClick={toggleCollapse}
                 className="text-sidebar-foreground hover:bg-sidebar-accent"
+                data-testid="sidebar-toggle"
               >
                 <ChevronLeft className="h-4 w-4" />
               </Button>
@@ -173,13 +179,13 @@ export function AppSidebar() {
                         variant="default"
                         size="sm"
                         className="w-full justify-center px-2 bg-primary hover:bg-primary/90 text-primary-foreground border-0"
-                        aria-label="Create"
+                        aria-label={t.common.create}
                       >
                         <Plus className="h-4 w-4" />
                       </Button>
                     </DropdownMenuTrigger>
                   </TooltipTrigger>
-                  <TooltipContent side="right">Create</TooltipContent>
+                   <TooltipContent side="right">{t.common.create}</TooltipContent>
                 </Tooltip>
               ) : (
                 <DropdownMenuTrigger asChild>
@@ -188,9 +194,9 @@ export function AppSidebar() {
                     variant="default"
                     size="sm"
                     className="w-full justify-start bg-primary hover:bg-primary/90 text-primary-foreground border-0"
-                  >
+                   >
                     <Plus className="h-4 w-4 mr-2" />
-                    Create
+                    {t.common.create}
                   </Button>
                 </DropdownMenuTrigger>
               )}
@@ -207,8 +213,8 @@ export function AppSidebar() {
                   }}
                   className="gap-2"
                 >
-                  <FileText className="h-4 w-4" />
-                  Source
+                   <FileText className="h-4 w-4" />
+                  {t.common.source}
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   onSelect={(event) => {
@@ -217,8 +223,8 @@ export function AppSidebar() {
                   }}
                   className="gap-2"
                 >
-                  <Book className="h-4 w-4" />
-                  Notebook
+                   <Book className="h-4 w-4" />
+                  {t.common.notebook}
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   onSelect={(event) => {
@@ -227,8 +233,8 @@ export function AppSidebar() {
                   }}
                   className="gap-2"
                 >
-                  <Mic className="h-4 w-4" />
-                  Podcast
+                   <Mic className="h-4 w-4" />
+                  {t.common.podcast}
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -247,12 +253,12 @@ export function AppSidebar() {
                 )}
 
                 {section.items.map((item) => {
-                  const isActive = pathname.startsWith(item.href)
+                  const isActive = pathname?.startsWith(item.href) || false
                   const button = (
                     <Button
                       variant={isActive ? 'secondary' : 'ghost'}
                       className={cn(
-                        'w-full gap-3 text-sidebar-foreground',
+                        'w-full gap-3 text-sidebar-foreground sidebar-menu-item',
                         isActive && 'bg-sidebar-accent text-sidebar-accent-foreground',
                         isCollapsed ? 'justify-center px-2' : 'justify-start'
                       )}
@@ -296,37 +302,50 @@ export function AppSidebar() {
           {!isCollapsed && (
             <div className="px-3 py-1.5 text-xs text-sidebar-foreground/60">
               <div className="flex items-center justify-between">
-                <span className="flex items-center gap-1.5">
+                 <span className="flex items-center gap-1.5">
                   <Command className="h-3 w-3" />
-                  Quick actions
+                  {t.common.quickActions}
                 </span>
                 <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
                   {isMac ? <span className="text-xs">⌘</span> : <span>Ctrl+</span>}K
                 </kbd>
               </div>
-              <p className="mt-1 text-[10px] text-sidebar-foreground/40">
-                Navigation, search, ask, theme
+               <p className="mt-1 text-[10px] text-sidebar-foreground/40">
+                {t.common.quickActionsDesc}
               </p>
             </div>
           )}
 
-          <div
+           <div
             className={cn(
-              'flex',
-              isCollapsed ? 'justify-center' : 'justify-start'
+              'flex flex-col gap-2',
+              isCollapsed ? 'items-center' : 'items-stretch'
             )}
           >
             {isCollapsed ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div>
-                    <ThemeToggle iconOnly />
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent side="right">Theme</TooltipContent>
-              </Tooltip>
+              <>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div>
+                      <ThemeToggle iconOnly />
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">{t.common.theme}</TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div>
+                      <LanguageToggle iconOnly />
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">{t.common.language}</TooltipContent>
+                </Tooltip>
+              </>
             ) : (
-              <ThemeToggle />
+              <>
+                <ThemeToggle />
+                <LanguageToggle />
+              </>
             )}
           </div>
 
@@ -335,22 +354,24 @@ export function AppSidebar() {
               <TooltipTrigger asChild>
                 <Button
                   variant="outline"
-                  className="w-full justify-center"
+                  className="w-full justify-center sidebar-menu-item"
                   onClick={logout}
+                  aria-label={t.common.signOut}
                 >
                   <LogOut className="h-4 w-4" />
                 </Button>
               </TooltipTrigger>
-              <TooltipContent side="right">Sign Out</TooltipContent>
+               <TooltipContent side="right">{t.common.signOut}</TooltipContent>
             </Tooltip>
           ) : (
             <Button
               variant="outline"
-              className="w-full justify-start gap-3"
+              className="w-full justify-start gap-3 sidebar-menu-item"
               onClick={logout}
-            >
+              aria-label={t.common.signOut}
+             >
               <LogOut className="h-4 w-4" />
-              Sign Out
+              {t.common.signOut}
             </Button>
           )}
         </div>
diff --git a/frontend/src/components/notebooks/CreateNotebookDialog.tsx b/frontend/src/components/notebooks/CreateNotebookDialog.tsx
index 67f2ab0..a224c34 100644
--- a/frontend/src/components/notebooks/CreateNotebookDialog.tsx
+++ b/frontend/src/components/notebooks/CreateNotebookDialog.tsx
@@ -18,6 +18,7 @@ import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Label } from '@/components/ui/label'
 import { useCreateNotebook } from '@/lib/hooks/use-notebooks'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 const createNotebookSchema = z.object({
   name: z.string().min(1, 'Name is required'),
@@ -32,6 +33,7 @@ interface CreateNotebookDialogProps {
 }
 
 export function CreateNotebookDialog({ open, onOpenChange }: CreateNotebookDialogProps) {
+  const { t } = useTranslation()
   const createNotebook = useCreateNotebook()
   const {
     register,
@@ -65,20 +67,20 @@ export function CreateNotebookDialog({ open, onOpenChange }: CreateNotebookDialo
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[480px]">
         <DialogHeader>
-          <DialogTitle>Create New Notebook</DialogTitle>
+          <DialogTitle>{t.notebooks.createNew}</DialogTitle>
           <DialogDescription>
-            Start organizing your research with a dedicated space for related sources and notes.
+            {t.notebooks.createNewDesc}
           </DialogDescription>
         </DialogHeader>
 
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="notebook-name">Name *</Label>
+            <Label htmlFor="notebook-name">{t.common.name || 'Name'} *</Label>
             <Input
               id="notebook-name"
               {...register('name')}
-              placeholder="Enter notebook name"
-              autoFocus
+              placeholder={t.notebooks.namePlaceholder}
+              autoComplete="off"
             />
             {errors.name && (
               <p className="text-sm text-destructive">{errors.name.message}</p>
@@ -86,21 +88,21 @@ export function CreateNotebookDialog({ open, onOpenChange }: CreateNotebookDialo
           </div>
 
           <div className="space-y-2">
-            <Label htmlFor="notebook-description">Description</Label>
+            <Label htmlFor="notebook-description">{t.common.description}</Label>
             <Textarea
               id="notebook-description"
               {...register('description')}
-              placeholder="Describe the purpose and scope of this notebook..."
+              placeholder={t.notebooks.descPlaceholder}
               rows={4}
             />
           </div>
 
           <DialogFooter className="gap-2 sm:gap-0">
             <Button type="button" variant="outline" onClick={closeDialog}>
-              Cancel
+              {t.common.cancel}
             </Button>
             <Button type="submit" disabled={!isValid || createNotebook.isPending}>
-              {createNotebook.isPending ? 'Creating…' : 'Create Notebook'}
+              {createNotebook.isPending ? t.common.creating : t.notebooks.createNew}
             </Button>
           </DialogFooter>
         </form>
diff --git a/frontend/src/components/podcasts/EpisodeCard.tsx b/frontend/src/components/podcasts/EpisodeCard.tsx
index a99c403..4f506a8 100644
--- a/frontend/src/components/podcasts/EpisodeCard.tsx
+++ b/frontend/src/components/podcasts/EpisodeCard.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState } from 'react'
 import { formatDistanceToNow } from 'date-fns'
+import { getDateLocale } from '@/lib/utils/date-locale'
 import { InfoIcon, Trash2 } from 'lucide-react'
 
 import { resolvePodcastAssetUrl } from '@/lib/api/podcasts'
@@ -31,6 +32,8 @@ import {
 } from '@/components/ui/dialog'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { useTranslation } from '@/lib/hooks/use-translation'
+import { TranslationKeys } from '@/lib/locales'
 
 interface EpisodeCardProps {
   episode: PodcastEpisode
@@ -38,51 +41,52 @@ interface EpisodeCardProps {
   deleting?: boolean
 }
 
-const STATUS_META: Record<
+const getSTATUS_META = (t: TranslationKeys): Record<
   EpisodeStatus | 'unknown',
   { label: string; className: string }
-> = {
+> => ({
   running: {
-    label: 'Processing',
+    label: t.podcasts.processingLabel,
     className: 'bg-amber-100 text-amber-800 border-amber-200',
   },
   processing: {
-    label: 'Processing',
+    label: t.podcasts.processingLabel,
     className: 'bg-amber-100 text-amber-800 border-amber-200',
   },
   completed: {
-    label: 'Completed',
+    label: t.podcasts.completedLabel,
     className: 'bg-emerald-100 text-emerald-800 border-emerald-200',
   },
   failed: {
-    label: 'Failed',
+    label: t.podcasts.failedLabel,
     className: 'bg-red-100 text-red-800 border-red-200',
   },
   error: {
-    label: 'Failed',
+    label: t.podcasts.failedLabel,
     className: 'bg-red-100 text-red-800 border-red-200',
   },
   pending: {
-    label: 'Pending',
+    label: t.podcasts.pendingLabel,
     className: 'bg-sky-100 text-sky-800 border-sky-200',
   },
   submitted: {
-    label: 'Pending',
+    label: t.podcasts.pendingLabel,
     className: 'bg-sky-100 text-sky-800 border-sky-200',
   },
   unknown: {
-    label: 'Unknown',
+    label: t.common.unknown,
     className: 'bg-muted text-muted-foreground border-transparent',
   },
-}
+})
 
 function StatusBadge({ status }: { status?: EpisodeStatus | null }) {
+  const { t } = useTranslation()
   // Don't show badge for completed episodes
   if (status === 'completed') {
     return null
   }
 
-  const meta = STATUS_META[status ?? 'unknown']
+  const meta = getSTATUS_META(t)[status ?? 'unknown']
   return (
     <Badge
       variant="outline"
@@ -133,6 +137,7 @@ function extractTranscriptEntries(transcript: unknown): TranscriptEntry[] {
 }
 
 export function EpisodeCard({ episode, onDelete, deleting }: EpisodeCardProps) {
+  const { t, language } = useTranslation()
   const [audioSrc, setAudioSrc] = useState<string | undefined>()
   const [audioError, setAudioError] = useState<string | null>(null)
   const [detailsOpen, setDetailsOpen] = useState(false)
@@ -183,7 +188,7 @@ export function EpisodeCard({ episode, onDelete, deleting }: EpisodeCardProps) {
         setAudioSrc(revokeUrl)
       } catch (error) {
         console.error('Unable to load podcast audio', error)
-        setAudioError('Audio unavailable')
+        setAudioError(t.podcasts.audioUnavailable)
         setAudioSrc(undefined)
       }
     }
@@ -195,14 +200,19 @@ export function EpisodeCard({ episode, onDelete, deleting }: EpisodeCardProps) {
         URL.revokeObjectURL(revokeUrl)
       }
     }
-  }, [episode.audio_url, episode.audio_file])
+  }, [episode.audio_url, episode.audio_file, t])
 
-  const createdLabel = episode.created
+  const distance = episode.created
     ? formatDistanceToNow(new Date(episode.created), {
         addSuffix: true,
+        locale: getDateLocale(language),
       })
     : null
 
+  const createdLabel = distance
+    ? t.podcasts.created.replace('{time}', distance)
+    : null
+
   const handleDelete = () => {
     void onDelete(episode.id)
   }
@@ -219,23 +229,23 @@ export function EpisodeCard({ episode, onDelete, deleting }: EpisodeCardProps) {
               <StatusBadge status={episode.job_status} />
             </div>
             <p className="text-xs text-muted-foreground">
-              Profile: {episode.episode_profile?.name ?? 'Unknown'}
-              {createdLabel ? ` • Created ${createdLabel}` : ''}
+              {t.podcasts.profile}: {episode.episode_profile?.name || t.common.unknown}
+              {createdLabel ? ` • ${createdLabel}` : ''}
             </p>
           </div>
           <div className="flex items-center gap-2">
             <Dialog open={detailsOpen} onOpenChange={setDetailsOpen}>
               <DialogTrigger asChild>
                 <Button variant="outline" size="sm">
-                  <InfoIcon className="mr-2 h-4 w-4" /> Details
+                  <InfoIcon className="mr-2 h-4 w-4" /> {t.podcasts.details}
                 </Button>
               </DialogTrigger>
               <DialogContent className="w-[min(90vw,720px)] max-h-[85vh] overflow-hidden">
                 <DialogHeader>
                   <DialogTitle>{episode.name}</DialogTitle>
                   <DialogDescription>
-                    {episode.episode_profile?.name ?? 'Unknown profile'}
-                    {createdLabel ? ` • Created ${createdLabel}` : ''}
+                    {episode.episode_profile?.name || t.common.unknown}
+                    {createdLabel ? ` • ${createdLabel}` : ''}
                   </DialogDescription>
                 </DialogHeader>
                 <div className="space-y-4 overflow-hidden">
@@ -247,19 +257,19 @@ export function EpisodeCard({ episode, onDelete, deleting }: EpisodeCardProps) {
 
                   <Tabs defaultValue="summary" className="h-[60vh] flex flex-col">
                     <TabsList className="grid w-full grid-cols-3">
-                      <TabsTrigger value="summary">Summary</TabsTrigger>
-                      <TabsTrigger value="outline">Outline</TabsTrigger>
-                      <TabsTrigger value="transcript">Transcript</TabsTrigger>
+                      <TabsTrigger value="summary">{t.podcasts.summaryTab}</TabsTrigger>
+                      <TabsTrigger value="outline">{t.podcasts.outlineTab}</TabsTrigger>
+                      <TabsTrigger value="transcript">{t.podcasts.transcriptTab}</TabsTrigger>
                     </TabsList>
 
                     <TabsContent value="summary" className="flex-1 overflow-hidden">
                       <ScrollArea className="h-full pr-4">
                         <div className="space-y-6">
                           <section className="space-y-2">
-                            <h4 className="text-sm font-semibold text-foreground">Episode Profile</h4>
+                            <h4 className="text-sm font-semibold text-foreground">{t.podcasts.episodeProfile}</h4>
                             <div className="grid gap-2 text-sm md:grid-cols-2">
                               <div>
-                                <p className="text-muted-foreground">Outline Model</p>
+                                <p className="text-muted-foreground">{t.podcasts.outlineModel}</p>
                                 <p>
                                   {episode.episode_profile?.outline_provider ?? '—'} /
                                   {' '}
@@ -267,7 +277,7 @@ export function EpisodeCard({ episode, onDelete, deleting }: EpisodeCardProps) {
                                 </p>
                               </div>
                               <div>
-                                <p className="text-muted-foreground">Transcript Model</p>
+                                <p className="text-muted-foreground">{t.podcasts.transcriptModel}</p>
                                 <p>
                                   {episode.episode_profile?.transcript_provider ?? '—'} /
                                   {' '}
@@ -275,7 +285,7 @@ export function EpisodeCard({ episode, onDelete, deleting }: EpisodeCardProps) {
                                 </p>
                               </div>
                               <div>
-                                <p className="text-muted-foreground">Segments</p>
+                                <p className="text-muted-foreground">{t.podcasts.segments}</p>
                                 <p>{episode.episode_profile?.num_segments ?? '—'}</p>
                               </div>
                             </div>
@@ -287,7 +297,7 @@ export function EpisodeCard({ episode, onDelete, deleting }: EpisodeCardProps) {
                           </section>
 
                           <section className="space-y-2">
-                            <h4 className="text-sm font-semibold text-foreground">Speaker Profile</h4>
+                            <h4 className="text-sm font-semibold text-foreground">{t.podcasts.speakerProfile}</h4>
                             <p className="text-xs text-muted-foreground">
                               {episode.speaker_profile?.tts_provider ?? '—'} /{' '}
                               {episode.speaker_profile?.tts_model ?? '—'}
@@ -298,12 +308,12 @@ export function EpisodeCard({ episode, onDelete, deleting }: EpisodeCardProps) {
                                 className="rounded-md border bg-muted/20 p-3 text-xs"
                               >
                                 <p className="font-semibold text-foreground">{speaker.name}</p>
-                                <p className="text-muted-foreground">Voice ID: {speaker.voice_id}</p>
+                                <p className="text-muted-foreground">{t.podcasts.voiceId}: {speaker.voice_id}</p>
                                 <p className="mt-2 whitespace-pre-wrap text-muted-foreground">
-                                  <span className="font-semibold">Backstory:</span> {speaker.backstory}
+                                  <span className="font-semibold">{t.podcasts.backstory}:</span> {speaker.backstory}
                                 </p>
                                 <p className="mt-2 whitespace-pre-wrap text-muted-foreground">
-                                  <span className="font-semibold">Personality:</span> {speaker.personality}
+                                  <span className="font-semibold">{t.podcasts.personality}:</span> {speaker.personality}
                                 </p>
                               </div>
                             ))}
@@ -311,7 +321,7 @@ export function EpisodeCard({ episode, onDelete, deleting }: EpisodeCardProps) {
 
                           {episode.briefing ? (
                             <section className="space-y-2">
-                              <h4 className="text-sm font-semibold text-foreground">Briefing</h4>
+                              <h4 className="text-sm font-semibold text-foreground">{t.podcasts.briefing}</h4>
                               <div className="rounded border bg-muted/30 p-3 text-xs whitespace-pre-wrap">
                                 {episode.briefing}
                               </div>
@@ -328,17 +338,17 @@ export function EpisodeCard({ episode, onDelete, deleting }: EpisodeCardProps) {
                             {outlineSegments.map((segment, index) => (
                               <div key={index} className="rounded border bg-muted/20 p-3 text-xs space-y-1">
                                 <div className="flex items-center justify-between gap-2">
-                                  <p className="font-semibold text-foreground">{segment.name ?? `Segment ${index + 1}`}</p>
+                                  <p className="font-semibold text-foreground">{segment.name ?? `${t.podcasts.segment} ${index + 1}`}</p>
                                   {segment.size ? (
                                     <Badge variant="outline" className="text-[10px] uppercase tracking-wide">{segment.size}</Badge>
                                   ) : null}
                                 </div>
-                                <p className="text-muted-foreground whitespace-pre-wrap">{segment.description ?? 'No description provided.'}</p>
+                                <p className="text-muted-foreground whitespace-pre-wrap">{segment.description ?? t.podcasts.noDescription}</p>
                               </div>
                             ))}
                           </div>
                         ) : (
-                          <p className="text-xs text-muted-foreground">No outline available.</p>
+                          <p className="text-xs text-muted-foreground">{t.podcasts.noOutline}</p>
                         )}
                       </ScrollArea>
                     </TabsContent>
@@ -348,12 +358,12 @@ export function EpisodeCard({ episode, onDelete, deleting }: EpisodeCardProps) {
                         {transcriptEntries.length > 0 ? (
                           transcriptEntries.map((entry, index) => (
                             <div key={index} className="rounded border bg-muted/20 p-3 text-xs space-y-1">
-                              <p className="font-semibold text-foreground">{entry.speaker ?? 'Speaker'}</p>
+                              <p className="font-semibold text-foreground">{entry.speaker ?? t.podcasts.speaker}</p>
                               <p className="text-muted-foreground whitespace-pre-wrap">{entry.dialogue ?? ''}</p>
                             </div>
                           ))
                         ) : (
-                          <p className="text-xs text-muted-foreground">No transcript available.</p>
+                          <p className="text-xs text-muted-foreground">{t.podcasts.noTranscript}</p>
                         )}
                       </ScrollArea>
                     </TabsContent>
@@ -365,20 +375,20 @@ export function EpisodeCard({ episode, onDelete, deleting }: EpisodeCardProps) {
               <AlertDialogTrigger asChild>
                 <Button variant="ghost" size="sm" className="text-destructive">
                   <Trash2 className="mr-2 h-4 w-4" />
-                  Delete
+                  {t.podcasts.delete}
                 </Button>
               </AlertDialogTrigger>
               <AlertDialogContent>
                 <AlertDialogHeader>
-                  <AlertDialogTitle>Delete episode?</AlertDialogTitle>
+                  <AlertDialogTitle>{t.podcasts.deleteEpisodeTitle}</AlertDialogTitle>
                   <AlertDialogDescription>
-                    This will remove “{episode.name}” and its audio file permanently.
+                    {t.podcasts.deleteEpisodeDesc.replace('{name}', episode.name)}
                   </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
-                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogCancel>{t.common.cancel}</AlertDialogCancel>
                   <AlertDialogAction onClick={handleDelete} disabled={deleting}>
-                    {deleting ? 'Deleting…' : 'Delete'}
+                    {deleting ? t.podcasts.deleting : t.podcasts.delete}
                   </AlertDialogAction>
                 </AlertDialogFooter>
               </AlertDialogContent>
diff --git a/frontend/src/components/podcasts/EpisodeProfilesPanel.tsx b/frontend/src/components/podcasts/EpisodeProfilesPanel.tsx
index d8e13dd..60dd42b 100644
--- a/frontend/src/components/podcasts/EpisodeProfilesPanel.tsx
+++ b/frontend/src/components/podcasts/EpisodeProfilesPanel.tsx
@@ -36,6 +36,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface EpisodeProfilesPanelProps {
   episodeProfiles: EpisodeProfile[]
@@ -55,6 +56,7 @@ export function EpisodeProfilesPanel({
   speakerProfiles,
   modelOptions,
 }: EpisodeProfilesPanelProps) {
+  const { t } = useTranslation()
   const [createOpen, setCreateOpen] = useState(false)
   const [editProfile, setEditProfile] = useState<EpisodeProfile | null>(null)
 
@@ -63,7 +65,7 @@ export function EpisodeProfilesPanel({
 
   const sortedProfiles = useMemo(
     () =>
-      [...episodeProfiles].sort((a, b) => a.name.localeCompare(b.name, 'en')), 
+      [...episodeProfiles].sort((a, b) => a.name.localeCompare(b.name, 'en')),
     [episodeProfiles]
   )
 
@@ -73,25 +75,25 @@ export function EpisodeProfilesPanel({
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-lg font-semibold">Episode profiles</h2>
+          <h2 className="text-lg font-semibold">{t.podcasts.episodeProfilesTitle}</h2>
           <p className="text-sm text-muted-foreground">
-            Define reusable generation settings for your shows.
+            {t.podcasts.episodeProfilesDesc}
           </p>
         </div>
         <Button onClick={() => setCreateOpen(true)} disabled={disableCreate}>
-          Create profile
+          {t.podcasts.createProfile}
         </Button>
       </div>
 
       {disableCreate ? (
         <p className="rounded-lg border border-dashed bg-amber-50 p-4 text-sm text-amber-900">
-          Create a speaker profile before adding an episode profile.
+          {t.podcasts.createSpeakerFirst}
         </p>
       ) : null}
 
       {sortedProfiles.length === 0 ? (
         <div className="rounded-lg border border-dashed bg-muted/30 p-10 text-center text-sm text-muted-foreground">
-          No episode profiles yet. Create one to kickstart podcast generation.
+          {t.podcasts.noEpisodeProfiles}
         </div>
       ) : (
         <div className="space-y-4">
@@ -109,7 +111,7 @@ export function EpisodeProfilesPanel({
                       {profile.name}
                     </CardTitle>
                     <CardDescription className="text-sm text-muted-foreground">
-                      {profile.description || 'No description provided.'}
+                      {profile.description || t.podcasts.noDescription}
                     </CardDescription>
                   </div>
                   <div className="flex items-center gap-1">
@@ -118,7 +120,7 @@ export function EpisodeProfilesPanel({
                       size="sm"
                       onClick={() => setEditProfile(profile)}
                     >
-                      <Edit3 className="mr-2 h-4 w-4" /> Edit
+                      <Edit3 className="mr-2 h-4 w-4" /> {t.podcasts.edit}
                     </Button>
                     <AlertDialog>
                       <DropdownMenu>
@@ -142,32 +144,31 @@ export function EpisodeProfilesPanel({
                             disabled={duplicateProfile.isPending}
                           >
                             <Copy className="h-4 w-4 mr-2" />
-                            Duplicate
+                            {t.podcasts.duplicate}
                           </DropdownMenuItem>
                           <DropdownMenuSeparator />
                           <AlertDialogTrigger asChild>
                             <DropdownMenuItem className="text-destructive focus:text-destructive">
                               <Trash2 className="h-4 w-4 mr-2" />
-                              Delete
+                              {t.podcasts.delete}
                             </DropdownMenuItem>
                           </AlertDialogTrigger>
                         </DropdownMenuContent>
                       </DropdownMenu>
                       <AlertDialogContent>
                         <AlertDialogHeader>
-                          <AlertDialogTitle>Delete profile?</AlertDialogTitle>
+                          <AlertDialogTitle>{t.podcasts.deleteProfileTitle}</AlertDialogTitle>
                           <AlertDialogDescription>
-                            This will remove “{profile.name}”. Existing episodes keep their
-                            data, but new ones will no longer use this configuration.
+                            {t.podcasts.deleteProfileDesc.replace('{name}', profile.name)}
                           </AlertDialogDescription>
                         </AlertDialogHeader>
                         <AlertDialogFooter>
-                          <AlertDialogCancel>Cancel</AlertDialogCancel>
+                          <AlertDialogCancel>{t.common.cancel}</AlertDialogCancel>
                           <AlertDialogAction
                             onClick={() => deleteProfile.mutate(profile.id)}
                             disabled={deleteProfile.isPending}
                           >
-                            {deleteProfile.isPending ? 'Deleting…' : 'Delete'}
+                            {deleteProfile.isPending ? t.podcasts.deleting : t.podcasts.delete}
                           </AlertDialogAction>
                         </AlertDialogFooter>
                       </AlertDialogContent>
@@ -179,7 +180,7 @@ export function EpisodeProfilesPanel({
                   <div className="grid gap-3 md:grid-cols-2">
                     <div>
                       <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                        Outline model
+                        {t.podcasts.outlineModel}
                       </p>
                       <p className="text-foreground">
                         {profile.outline_provider} / {profile.outline_model}
@@ -187,7 +188,7 @@ export function EpisodeProfilesPanel({
                     </div>
                     <div>
                       <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                        Transcript model
+                        {t.podcasts.transcriptModel}
                       </p>
                       <p className="text-foreground">
                         {profile.transcript_provider} / {profile.transcript_model}
@@ -195,13 +196,13 @@ export function EpisodeProfilesPanel({
                     </div>
                     <div>
                       <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                        Segments
+                        {t.podcasts.segments}
                       </p>
                       <p className="text-foreground">{profile.num_segments}</p>
                     </div>
                     <div>
                       <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                        Speaker profile
+                        {t.podcasts.speakerProfile}
                       </p>
                       <div className="flex items-center gap-2 text-foreground">
                         <Users className="h-4 w-4" />
@@ -218,7 +219,7 @@ export function EpisodeProfilesPanel({
                   {profile.default_briefing ? (
                     <div>
                       <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                        Default briefing
+                        {t.podcasts.defaultBriefingTitle}
                       </p>
                       <p className="mt-1 whitespace-pre-wrap text-muted-foreground">
                         {profile.default_briefing}
diff --git a/frontend/src/components/podcasts/EpisodesTab.tsx b/frontend/src/components/podcasts/EpisodesTab.tsx
index b9172c1..e24eabe 100644
--- a/frontend/src/components/podcasts/EpisodesTab.tsx
+++ b/frontend/src/components/podcasts/EpisodesTab.tsx
@@ -10,31 +10,33 @@ import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 import { GeneratePodcastDialog } from '@/components/podcasts/GeneratePodcastDialog'
+import { useTranslation } from '@/lib/hooks/use-translation'
+import { TranslationKeys } from '@/lib/locales'
 
-const STATUS_ORDER: Array<{
+const getSTATUS_ORDER = (t: TranslationKeys): Array<{
   key: 'running' | 'completed' | 'failed' | 'pending'
   title: string
   description?: string
-}> = [
+}> => [
   {
     key: 'running',
-    title: 'Currently Processing',
-    description: 'Episodes that are actively generating assets.',
+    title: t.podcasts.statusRunningTitle,
+    description: t.podcasts.statusRunningDesc,
   },
   {
     key: 'pending',
-    title: 'Queued / Pending',
-    description: 'Submitted episodes waiting to start processing.',
+    title: t.podcasts.statusPendingTitle,
+    description: t.podcasts.statusPendingDesc,
   },
   {
     key: 'completed',
-    title: 'Completed Episodes',
-    description: 'Ready to review, download, or publish.',
+    title: t.podcasts.statusCompletedTitle,
+    description: t.podcasts.statusCompletedDesc,
   },
   {
     key: 'failed',
-    title: 'Failed Episodes',
-    description: 'Episodes that encountered issues during generation.',
+    title: t.podcasts.statusFailedTitle,
+    description: t.podcasts.statusFailedDesc,
   },
 ]
 
@@ -48,6 +50,7 @@ function SummaryBadge({ label, value }: { label: string; value: number }) {
 }
 
 export function EpisodesTab() {
+  const { t } = useTranslation()
   const [showGenerateDialog, setShowGenerateDialog] = useState(false)
   const {
     episodes,
@@ -75,14 +78,14 @@ export function EpisodesTab() {
     <div className="space-y-6">
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div className="space-y-1">
-          <h2 className="text-xl font-semibold">Episodes overview</h2>
+          <h2 className="text-xl font-semibold">{t.podcasts.overviewTitle}</h2>
           <p className="text-sm text-muted-foreground">
-            Monitor podcast generation jobs and review the final artefacts.
+            {t.podcasts.overviewDesc}
           </p>
         </div>
         <div className="flex items-center gap-2">
           <Button onClick={() => setShowGenerateDialog(true)}>
-            Generate Podcast
+            {t.podcasts.generateBtn}
           </Button>
           <Button
             variant="outline"
@@ -95,25 +98,25 @@ export function EpisodesTab() {
             ) : (
               <RefreshCcw className="mr-2 h-4 w-4" />
             )}
-            Refresh
+            {t.common.refresh}
           </Button>
         </div>
       </div>
 
       <div className="flex flex-wrap gap-2">
-        <SummaryBadge label="Total" value={statusCounts.total} />
-        <SummaryBadge label="Processing" value={statusCounts.running} />
-        <SummaryBadge label="Completed" value={statusCounts.completed} />
-        <SummaryBadge label="Failed" value={statusCounts.failed} />
-        <SummaryBadge label="Pending" value={statusCounts.pending} />
+        <SummaryBadge label={t.podcasts.total} value={statusCounts.total} />
+        <SummaryBadge label={t.podcasts.processingLabel} value={statusCounts.running} />
+        <SummaryBadge label={t.podcasts.completedLabel} value={statusCounts.completed} />
+        <SummaryBadge label={t.podcasts.failedLabel} value={statusCounts.failed} />
+        <SummaryBadge label={t.podcasts.pendingLabel} value={statusCounts.pending} />
       </div>
 
       {isError ? (
         <Alert variant="destructive">
           <AlertCircle className="h-4 w-4" />
-          <AlertTitle>Failed to load episodes</AlertTitle>
+          <AlertTitle>{t.podcasts.loadErrorTitle}</AlertTitle>
           <AlertDescription>
-            We could not fetch the latest podcast episodes. Try again shortly.
+            {t.podcasts.loadErrorDesc}
           </AlertDescription>
         </Alert>
       ) : null}
@@ -121,20 +124,19 @@ export function EpisodesTab() {
       {isLoading ? (
         <div className="flex items-center gap-3 rounded-lg border border-dashed p-6 text-sm text-muted-foreground">
           <Loader2 className="h-4 w-4 animate-spin" />
-          Loading episodes…
+          {t.podcasts.loadingEpisodes}
         </div>
       ) : null}
 
       {emptyState ? (
         <div className="rounded-lg border border-dashed bg-muted/30 p-10 text-center">
           <p className="text-sm text-muted-foreground">
-            No podcast episodes yet. Generate your first one from the notebook or source
-            chat interfaces.
+            {t.podcasts.noEpisodesYet}
           </p>
         </div>
       ) : null}
 
-      {STATUS_ORDER.map(({ key, title, description }) => {
+      {getSTATUS_ORDER(t).map(({ key, title, description }) => {
         const data = statusGroups[key]
         if (!data || data.length === 0) {
           return null
diff --git a/frontend/src/components/podcasts/GeneratePodcastDialog.tsx b/frontend/src/components/podcasts/GeneratePodcastDialog.tsx
index eb8d34e..a517cd8 100644
--- a/frontend/src/components/podcasts/GeneratePodcastDialog.tsx
+++ b/frontend/src/components/podcasts/GeneratePodcastDialog.tsx
@@ -13,6 +13,7 @@ import { BuildContextRequest, NoteResponse, SourceListResponse } from '@/lib/typ
 import { PodcastGenerationRequest } from '@/lib/types/podcasts'
 import { QUERY_KEYS } from '@/lib/api/query-client'
 import { useToast } from '@/lib/hooks/use-toast'
+import { useTranslation } from '@/lib/hooks/use-translation'
 import {
   Dialog,
   DialogContent,
@@ -30,10 +31,11 @@ import { ScrollArea } from '@/components/ui/scroll-area'
 import { Label } from '@/components/ui/label'
 import { Separator } from '@/components/ui/separator'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
+import { TranslationKeys } from '@/lib/locales'
 
-const SOURCE_MODES = [
-  { value: 'insights', label: 'Summary' },
-  { value: 'full', label: 'Full content' },
+const getSourceModes = (t: TranslationKeys) => [
+  { value: 'insights', label: t.podcasts.summary },
+  { value: 'full', label: t.podcasts.fullContent },
 ] as const
 
 type SourceMode = 'off' | 'insights' | 'full'
@@ -74,6 +76,7 @@ interface GeneratePodcastDialogProps {
 }
 
 export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDialogProps) {
+  const { t, language } = useTranslation()
   const { toast } = useToast()
   const queryClient = useQueryClient()
   const [expandedNotebooks, setExpandedNotebooks] = useState<string[]>([])
@@ -415,22 +418,22 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
         const response = await chatApi.buildContext(task.payload)
         const notebookName = notebooks.find((nb) => nb.id === task.notebookId)?.name ?? task.notebookId
         const contextString = JSON.stringify(response.context, null, 2)
-        const snippet = `Notebook: ${notebookName}\n${contextString}`
+        const snippet = `${t.common.notebookLabel.replace('{name}', notebookName)}\n${contextString}`
         parts.push(snippet)
       } catch (error) {
         console.error('Failed to build context for notebook', task.notebookId, error)
-        throw new Error('Failed to build context. Please review your selections.')
+        throw new Error(t.podcasts.buildContextFailed)
       }
     }
 
     return parts.join('\n\n')
-  }, [notebooks, selections])
+  }, [notebooks, selections, t])
 
   const handleSubmit = useCallback(async () => {
     if (!selectedEpisodeProfile) {
       toast({
-        title: 'Episode profile required',
-        description: 'Select an episode profile before generating a podcast.',
+        title: t.podcasts.profileRequired,
+        description: t.podcasts.profileRequiredDesc,
         variant: 'destructive',
       })
       return
@@ -438,8 +441,8 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
 
     if (!episodeName.trim()) {
       toast({
-        title: 'Episode name required',
-        description: 'Provide a name for the episode.',
+        title: t.podcasts.nameRequired,
+        description: t.podcasts.nameRequiredDesc,
         variant: 'destructive',
       })
       return
@@ -450,8 +453,8 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
       const content = await buildContentFromSelections()
       if (!content.trim()) {
         toast({
-          title: 'Add context',
-          description: 'Select at least one source or note to include in the episode.',
+          title: t.podcasts.addContext,
+          description: t.podcasts.addContextDesc,
           variant: 'destructive',
         })
         return
@@ -467,6 +470,11 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
 
       await generatePodcast.mutateAsync(payload)
 
+      toast({
+        title: t.common.success,
+        description: t.podcasts.podcastTaskStarted,
+      })
+
       // Delay closing dialog slightly to ensure refetch completes
       setTimeout(() => {
         onOpenChange(false)
@@ -475,8 +483,8 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
     } catch (error) {
       console.error('Failed to generate podcast', error)
       toast({
-        title: 'Podcast generation failed',
-        description: error instanceof Error ? error.message : 'Please try again later.',
+        title: t.podcasts.generationFailed,
+        description: error instanceof Error ? error.message : t.common.refreshPage,
         variant: 'destructive',
       })
     } finally {
@@ -491,6 +499,7 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
     resetState,
     selectedEpisodeProfile,
     toast,
+    t,
   ])
 
   const isSubmitting = generatePodcast.isPending || isBuildingContext
@@ -504,9 +513,9 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
     }}>
       <DialogContent className="w-[80vw] max-w-[1080px] max-h-[90vh] overflow-hidden">
         <DialogHeader>
-          <DialogTitle>Generate Podcast Episode</DialogTitle>
+          <DialogTitle>{t.podcasts.generateEpisode}</DialogTitle>
           <DialogDescription>
-            Select the content to include and configure the episode details before generating a new podcast episode.
+            {t.podcasts.generateEpisodeDesc}
           </DialogDescription>
         </DialogHeader>
 
@@ -515,25 +524,27 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
             <div className="flex items-center justify-between">
               <div>
                 <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-                  Content
+                  {t.podcasts.content}
                 </h3>
                 <p className="text-xs text-muted-foreground">
-                  Pick notebooks, sources, and notes to include in this episode.
+                  {t.podcasts.contentDesc}
                 </p>
               </div>
               <div className="flex items-center gap-2">
                 <Badge variant="outline">
-                  {selectedNotebookSummaries.reduce(
-                    (acc, summary) => acc + summary.sources + summary.notes,
-                    0
-                  )}{' '}
-                  items selected
+                  {t.podcasts.itemsSelected.replace(
+                    '{count}',
+                    selectedNotebookSummaries.reduce(
+                      (acc, summary) => acc + summary.sources + summary.notes,
+                      0
+                    ).toString()
+                  )}
                 </Badge>
                 {(tokenCount > 0 || charCount > 0) && (
                   <span className="text-xs text-muted-foreground">
-                    {tokenCount > 0 && `${formatNumber(tokenCount)} tokens`}
+                    {tokenCount > 0 && t.podcasts.tokens.replace('{count}', formatNumber(tokenCount))}
                     {tokenCount > 0 && charCount > 0 && ' / '}
-                    {charCount > 0 && `${formatNumber(charCount)} chars`}
+                    {charCount > 0 && t.podcasts.chars.replace('{count}', formatNumber(charCount))}
                   </span>
                 )}
               </div>
@@ -542,11 +553,11 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
             <div className="rounded-lg border bg-muted/30">
               {notebooksQuery.isLoading ? (
                 <div className="flex items-center justify-center py-16 text-sm text-muted-foreground">
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Loading notebooks
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" /> {t.podcasts.loadingNotebooks}
                 </div>
               ) : notebooks.length === 0 ? (
                 <div className="p-6 text-sm text-muted-foreground">
-                  No notebooks found. Create a notebook and add content before generating a podcast.
+                  {t.podcasts.noNotebooksFoundInPodcasts}
                 </div>
               ) : (
                 <ScrollArea className="h-[60vh]">
@@ -572,6 +583,7 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
                         <AccordionItem key={notebook.id} value={notebook.id}>
                           <div className="flex items-start gap-3 px-4 pt-3">
                             <Checkbox
+                              id={`notebook-toggle-${notebook.id}`}
                               checked={isIndeterminate ? 'indeterminate' : notebookChecked}
                               onCheckedChange={(checked) => {
                                 handleNotebookToggle(notebook.id, checked)
@@ -587,21 +599,24 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
                               onClick={(event) => event.stopPropagation()}
                             />
                             <AccordionTrigger className="flex-1 px-0 py-0 hover:no-underline">
-                              <div className="flex w-full items-center justify-between gap-3">
+                              <Label 
+                                htmlFor={`notebook-toggle-${notebook.id}`}
+                                className="flex w-full items-center justify-between gap-3 pointer-events-none"
+                              >
                                 <div className="text-left">
                                   <p className="font-medium text-sm text-foreground">
                                     {notebook.name}
                                   </p>
                                   <p className="text-xs text-muted-foreground">
                                     {summary.sources + summary.notes > 0
-                                      ? `${summary.sources} sources, ${summary.notes} notes`
-                                      : 'No content selected'}
+                                      ? `${summary.sources} ${t.podcasts.sources}, ${summary.notes} ${t.podcasts.notes}`
+                                      : t.podcasts.noContentSelected}
                                   </p>
                                 </div>
                                 <Badge variant="outline" className="text-xs">
-                                  {sources.length} sources · {notes.length} notes
+                                  {sources.length} {t.podcasts.sources} · {notes.length} {t.podcasts.notes}
                                 </Badge>
-                              </div>
+                              </Label>
                             </AccordionTrigger>
                           </div>
                           <AccordionContent>
@@ -609,7 +624,7 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
                               <div className="space-y-2">
                                 <div className="flex items-center justify-between">
                                   <h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                                    Sources
+                                    {t.podcasts.sources}
                                   </h4>
                                   {sourcesQueries[index]?.isFetching && (
                                     <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
@@ -617,7 +632,7 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
                                 </div>
                                 {sources.length === 0 ? (
                                   <p className="text-xs text-muted-foreground">
-                                    No sources available in this notebook.
+                                    {t.podcasts.noSources}
                                   </p>
                                 ) : (
                                   <div className="space-y-2">
@@ -629,6 +644,7 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
                                           className="flex items-center gap-3 rounded border bg-background px-3 py-2"
                                         >
                                           <Checkbox
+                                            id={`source-selection-${source.id}`}
                                             checked={mode !== 'off'}
                                             onCheckedChange={(checked) =>
                                               handleSourceModeChange(
@@ -638,16 +654,19 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
                                               )
                                             }
                                           />
-                                          <div className="flex flex-1 flex-col gap-1">
+                                          <Label 
+                                            htmlFor={`source-selection-${source.id}`}
+                                            className="flex flex-1 flex-col gap-1 cursor-pointer"
+                                          >
                                             <span className="text-sm font-medium text-foreground">
-                                              {source.title || 'Untitled source'}
+                                              {source.title || t.podcasts.untitledSource}
                                             </span>
-                                            <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                                              <span>{source.asset?.url ? 'Link' : 'File'}</span>
-                                              <span>•</span>
-                                              <span>{source.embedded ? 'Embedded' : 'Not embedded'}</span>
-                                            </div>
-                                          </div>
+                                             <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                               <span>{source.asset?.url ? t.podcasts.link : t.podcasts.file}</span>
+                                               <span>•</span>
+                                               <span>{source.embedded ? t.podcasts.embedded : t.podcasts.notEmbedded}</span>
+                                             </div>
+                                          </Label>
                                           <Select
                                             value={mode === 'off' ? 'off' : mode}
                                             onValueChange={(value) =>
@@ -660,10 +679,10 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
                                             disabled={mode === 'off'}
                                           >
                                             <SelectTrigger className="w-[140px]">
-                                              <SelectValue placeholder="Select mode" />
+                                              <SelectValue placeholder={t.podcasts.selectMode} />
                                             </SelectTrigger>
                                             <SelectContent>
-                                              {SOURCE_MODES.map((option) => (
+                                              {getSourceModes(t).map((option) => (
                                                 <SelectItem
                                                   key={option.value}
                                                   value={option.value}
@@ -688,11 +707,11 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
 
                               <div className="space-y-2">
                                 <h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                                  Notes
+                                  {t.podcasts.notes}
                                 </h4>
                                 {notes.length === 0 ? (
                                   <p className="text-xs text-muted-foreground">
-                                    No notes available in this notebook.
+                                    {t.podcasts.noNotes}
                                   </p>
                                 ) : (
                                   <div className="space-y-2">
@@ -704,6 +723,7 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
                                           className="flex items-center gap-3 rounded border bg-background px-3 py-2"
                                         >
                                           <Checkbox
+                                            id={`note-selection-${note.id}`}
                                             checked={mode !== 'off'}
                                             onCheckedChange={(checked) =>
                                               handleNoteToggle(
@@ -713,14 +733,20 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
                                               )
                                             }
                                           />
-                                          <div className="flex flex-1 flex-col">
+                                          <Label 
+                                            htmlFor={`note-selection-${note.id}`}
+                                            className="flex flex-1 flex-col cursor-pointer"
+                                          >
                                             <span className="text-sm font-medium text-foreground">
-                                              {note.title || 'Untitled note'}
+                                              {note.title || t.podcasts.untitledNote}
                                             </span>
                                             <span className="text-xs text-muted-foreground">
-                                              Updated {new Date(note.updated).toLocaleString()}
+                                              {t.common.updated}{' '}
+                                              {new Date(note.updated).toLocaleString(
+                                                language.startsWith('zh') ? language : 'en-US'
+                                              )}
                                             </span>
-                                          </div>
+                                          </Label>
                                         </div>
                                       )
                                     })}
@@ -741,88 +767,89 @@ export function GeneratePodcastDialog({ open, onOpenChange }: GeneratePodcastDia
           <div className="space-y-6">
             <div className="space-y-3">
               <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-                Episode Settings
+                {t.podcasts.episodeSettings}
               </h3>
               {episodeProfilesQuery.isLoading ? (
                 <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                  <Loader2 className="h-4 w-4 animate-spin" /> Loading episode profiles
+                  <Loader2 className="h-4 w-4 animate-spin" /> {t.podcasts.loadingProfiles}
                 </div>
               ) : episodeProfiles.length === 0 ? (
                 <div className="rounded-lg border border-dashed bg-muted/30 p-4 text-sm text-muted-foreground">
-                  No episode profiles found. Create an episode profile before generating a podcast.
+                  {t.podcasts.noProfilesFound}
                 </div>
               ) : (
                 <div className="space-y-4">
                   <div className="space-y-2">
-                    <Label htmlFor="episode_profile">Episode profile</Label>
+                    <Label htmlFor="episode_profile">{t.podcasts.episodeProfile}</Label>
                     <Select
                       value={episodeProfileId}
                       onValueChange={setEpisodeProfileId}
                       disabled={episodeProfiles.length === 0}
                     >
                       <SelectTrigger id="episode_profile">
-                        <SelectValue placeholder="Select an episode profile" />
+                        <SelectValue placeholder={t.podcasts.episodeProfilePlaceholder} />
                       </SelectTrigger>
                       <SelectContent>
                         {episodeProfiles.map((profile) => (
                           <SelectItem key={profile.id} value={profile.id}>
-                            {profile.name}
+                            {t.podcasts.podcastProfiles[profile.name] ?? profile.name}
                           </SelectItem>
                         ))}
                       </SelectContent>
                     </Select>
                     {selectedEpisodeProfile && (
                       <p className="text-xs text-muted-foreground">
-                        Uses speaker profile <strong>{selectedEpisodeProfile.speaker_config}</strong>
+                        {t.podcasts.usesSpeakerProfile}{' '}
+                        <strong>{selectedEpisodeProfile.speaker_config}</strong>
                       </p>
                     )}
                   </div>
 
                   <div className="space-y-2">
-                    <Label htmlFor="episode_name">Episode name</Label>
+                    <Label htmlFor="episode_name">{t.podcasts.episodeName}</Label>
                     <Input
                       id="episode_name"
+                      name="episode_name"
                       value={episodeName}
                       onChange={(event) => setEpisodeName(event.target.value)}
-                      placeholder="e.g., AI and the Future of Work"
+                      placeholder={t.podcasts.episodeNamePlaceholder}
+                      autoComplete="off"
                     />
                   </div>
 
-                  <div className="space-y-2">
-                    <Label htmlFor="instructions">Additional instructions</Label>
+                   <div className="space-y-2">
+                    <Label htmlFor="instructions">{t.podcasts.additionalInstructions}</Label>
                     <Textarea
                       id="instructions"
+                      name="instructions"
+                      placeholder={t.podcasts.instructionsPlaceholder}
                       value={instructions}
                       onChange={(event) => setInstructions(event.target.value)}
-                      placeholder="Any supplemental guidance to append to the episode briefing..."
-                      rows={6}
+                      className="min-h-[100px] text-xs"
+                      autoComplete="off"
                     />
-                    <p className="text-xs text-muted-foreground">
-                      These instructions will be appended to the episode profile&apos;s default briefing.
-                    </p>
                   </div>
                 </div>
               )}
             </div>
 
-            <Separator />
-
             <div className="flex flex-col gap-3">
               <Button
                 onClick={handleSubmit}
-                disabled={isSubmitting || episodeProfiles.length === 0}
+                disabled={isSubmitting}
+                className="w-full"
               >
-                {isSubmitting ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Generating episode...
-                  </>
-                ) : (
-                  'Generate Podcast'
-                )}
+                {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                {isSubmitting ? t.podcasts.generating : t.podcasts.generate}
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+                disabled={isSubmitting}
+                className="w-full"
+              >
+                {t.common.cancel}
               </Button>
-              <p className="text-xs text-muted-foreground">
-                The episode will appear in the Episodes list once generation starts. Refresh the list to monitor progress.
-              </p>
             </div>
           </div>
         </div>
diff --git a/frontend/src/components/podcasts/SpeakerProfilesPanel.tsx b/frontend/src/components/podcasts/SpeakerProfilesPanel.tsx
index 5ec30c8..4480a82 100644
--- a/frontend/src/components/podcasts/SpeakerProfilesPanel.tsx
+++ b/frontend/src/components/podcasts/SpeakerProfilesPanel.tsx
@@ -36,6 +36,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface SpeakerProfilesPanelProps {
   speakerProfiles: SpeakerProfile[]
@@ -48,6 +49,7 @@ export function SpeakerProfilesPanel({
   modelOptions,
   usage,
 }: SpeakerProfilesPanelProps) {
+  const { t } = useTranslation()
   const [createOpen, setCreateOpen] = useState(false)
   const [editProfile, setEditProfile] = useState<SpeakerProfile | null>(null)
 
@@ -64,17 +66,17 @@ export function SpeakerProfilesPanel({
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-lg font-semibold">Speaker profiles</h2>
+          <h2 className="text-lg font-semibold">{t.podcasts.speakerProfilesTitle}</h2>
           <p className="text-sm text-muted-foreground">
-            Configure voices and personalities for generated episodes.
+            {t.podcasts.speakerProfilesDesc}
           </p>
         </div>
-        <Button onClick={() => setCreateOpen(true)}>Create speaker</Button>
+        <Button onClick={() => setCreateOpen(true)}>{t.podcasts.createSpeaker}</Button>
       </div>
 
       {sortedProfiles.length === 0 ? (
         <div className="rounded-lg border border-dashed bg-muted/30 p-8 text-center text-sm text-muted-foreground">
-          No speaker profiles yet. Create one to make episode templates available.
+          {t.podcasts.noSpeakerProfiles}
         </div>
       ) : (
         <div className="space-y-4">
@@ -91,7 +93,7 @@ export function SpeakerProfilesPanel({
                         {profile.name}
                       </CardTitle>
                       <CardDescription className="text-sm text-muted-foreground">
-                        {profile.description || 'No description provided.'}
+                        {profile.description || t.podcasts.noDescription}
                       </CardDescription>
                     </div>
                     <Badge variant="outline" className="text-xs">
@@ -104,8 +106,8 @@ export function SpeakerProfilesPanel({
                       className="text-xs"
                     >
                       {usageCount > 0
-                        ? `Used by ${usageCount} episode${usageCount === 1 ? '' : 's'}`
-                        : 'Unused'}
+                        ? (usageCount === 1 ? t.podcasts.usedByCount_one : t.podcasts.usedByCount_other.replace('{count}', usageCount.toString()))
+                        : t.podcasts.unused}
                     </Badge>
                   </div>
                 </CardHeader>
@@ -125,14 +127,14 @@ export function SpeakerProfilesPanel({
                             </span>
                           </div>
                           <span className="text-xs text-muted-foreground">
-                            Voice ID: {speaker.voice_id}
+                            {t.podcasts.voiceId}: {speaker.voice_id}
                           </span>
                         </div>
                         <p className="mt-2 text-xs text-muted-foreground whitespace-pre-wrap">
-                          <span className="font-semibold">Backstory:</span> {speaker.backstory}
+                          <span className="font-semibold">{t.podcasts.backstory}:</span> {speaker.backstory}
                         </p>
                         <p className="mt-2 text-xs text-muted-foreground whitespace-pre-wrap">
-                          <span className="font-semibold">Personality:</span> {speaker.personality}
+                          <span className="font-semibold">{t.podcasts.personality}:</span> {speaker.personality}
                         </p>
                       </div>
                     ))}
@@ -144,7 +146,7 @@ export function SpeakerProfilesPanel({
                       size="sm"
                       onClick={() => setEditProfile(profile)}
                     >
-                      <Edit3 className="mr-2 h-4 w-4" /> Edit
+                      <Edit3 className="mr-2 h-4 w-4" /> {t.podcasts.edit}
                     </Button>
                     <AlertDialog>
                       <DropdownMenu>
@@ -168,7 +170,7 @@ export function SpeakerProfilesPanel({
                             disabled={duplicateProfile.isPending}
                           >
                             <Copy className="h-4 w-4 mr-2" />
-                            Duplicate
+                            {t.podcasts.duplicate}
                           </DropdownMenuItem>
                           <DropdownMenuSeparator />
                           <AlertDialogTrigger asChild>
@@ -177,30 +179,30 @@ export function SpeakerProfilesPanel({
                               disabled={deleteDisabled}
                             >
                               <Trash2 className="h-4 w-4 mr-2" />
-                              Delete
+                              {t.podcasts.delete}
                             </DropdownMenuItem>
                           </AlertDialogTrigger>
                         </DropdownMenuContent>
                       </DropdownMenu>
                       <AlertDialogContent>
                         <AlertDialogHeader>
-                          <AlertDialogTitle>Delete speaker profile?</AlertDialogTitle>
+                          <AlertDialogTitle>{t.podcasts.deleteSpeakerProfileTitle}</AlertDialogTitle>
                           <AlertDialogDescription>
-                            Deleting “{profile.name}” cannot be undone.
+                            {t.podcasts.deleteSpeakerProfileDesc.replace('{name}', profile.name)}
                           </AlertDialogDescription>
                           {deleteDisabled ? (
                             <p className="mt-2 text-sm text-muted-foreground">
-                              Remove this speaker from episode profiles before deleting it.
+                              {t.podcasts.deleteSpeakerDisabledHint}
                             </p>
                           ) : null}
                         </AlertDialogHeader>
                         <AlertDialogFooter>
-                          <AlertDialogCancel>Cancel</AlertDialogCancel>
+                          <AlertDialogCancel>{t.common.cancel}</AlertDialogCancel>
                           <AlertDialogAction
                             onClick={() => deleteProfile.mutate(profile.id)}
                             disabled={deleteDisabled || deleteProfile.isPending}
                           >
-                            {deleteProfile.isPending ? 'Deleting…' : 'Delete'}
+                            {deleteProfile.isPending ? t.podcasts.deleting : t.podcasts.delete}
                           </AlertDialogAction>
                         </AlertDialogFooter>
                       </AlertDialogContent>
diff --git a/frontend/src/components/podcasts/TemplatesTab.tsx b/frontend/src/components/podcasts/TemplatesTab.tsx
index 30e39d2..097afe9 100644
--- a/frontend/src/components/podcasts/TemplatesTab.tsx
+++ b/frontend/src/components/podcasts/TemplatesTab.tsx
@@ -10,6 +10,7 @@ import { useEpisodeProfiles, useSpeakerProfiles } from '@/lib/hooks/use-podcasts
 import { useModels } from '@/lib/hooks/use-models'
 import { Model } from '@/lib/types/models'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 function modelsByProvider(models: Model[], type: Model['type']) {
   return models
@@ -24,6 +25,7 @@ function modelsByProvider(models: Model[], type: Model['type']) {
 }
 
 export function TemplatesTab() {
+  const { t } = useTranslation()
   const {
     episodeProfiles,
     isLoading: loadingEpisodeProfiles,
@@ -58,9 +60,9 @@ export function TemplatesTab() {
   return (
     <div className="space-y-6">
       <div className="space-y-1">
-        <h2 className="text-xl font-semibold">Templates workspace</h2>
+        <h2 className="text-xl font-semibold">{t.podcasts.templatesWorkspaceTitle}</h2>
         <p className="text-sm text-muted-foreground">
-          Build reusable episode and speaker configurations for fast podcast production.
+          {t.podcasts.templatesWorkspaceDesc}
         </p>
       </div>
 
@@ -72,44 +74,42 @@ export function TemplatesTab() {
           <AccordionTrigger className="gap-2 py-4 text-left text-sm font-semibold">
             <div className="flex items-center gap-2">
               <Lightbulb className="h-4 w-4 text-primary" />
-              How templates power podcast generation
+              {t.podcasts.howTemplatesPowerTitle}
             </div>
           </AccordionTrigger>
           <AccordionContent className="text-sm text-muted-foreground">
             <div className="space-y-4">
               <p className="text-muted-foreground/90">
-                Templates split the podcast workflow into two reusable building blocks. Mix and match
-                them whenever you generate a new episode.
+                {t.podcasts.howTemplatesPowerDesc}
               </p>
 
               <div className="space-y-2">
-                <h4 className="font-medium text-foreground">Episode profiles set the format</h4>
+                <h4 className="font-medium text-foreground">{t.podcasts.episodeProfilesSetFormat}</h4>
                 <ul className="list-disc space-y-1 pl-5">
-                  <li>Outline the number of segments and how the story flows</li>
-                  <li>Pick the language models used for briefing, outlining, and script writing</li>
-                  <li>Store default briefings so every episode starts with a consistent tone</li>
+                  <li>{t.podcasts.episodeProfilesList1}</li>
+                  <li>{t.podcasts.episodeProfilesList2}</li>
+                  <li>{t.podcasts.episodeProfilesList3}</li>
                 </ul>
               </div>
 
               <div className="space-y-2">
-                <h4 className="font-medium text-foreground">Speaker profiles bring voices to life</h4>
+                <h4 className="font-medium text-foreground">{t.podcasts.speakerProfilesBringVoices}</h4>
                 <ul className="list-disc space-y-1 pl-5">
-                  <li>Choose the text-to-speech provider and model</li>
-                  <li>Capture personality, backstory, and pronunciation notes per speaker</li>
-                  <li>Reuse the same host or guest voices across different episode formats</li>
+                  <li>{t.podcasts.speakerProfilesList1}</li>
+                  <li>{t.podcasts.speakerProfilesList2}</li>
+                  <li>{t.podcasts.speakerProfilesList3}</li>
                 </ul>
               </div>
 
               <div className="space-y-2">
-                <h4 className="font-medium text-foreground">Recommended workflow</h4>
+                <h4 className="font-medium text-foreground">{t.podcasts.recommendedWorkflow}</h4>
                 <ol className="list-decimal space-y-1 pl-5">
-                  <li>Create speaker profiles for each voice you need</li>
-                  <li>Build episode profiles that reference those speakers by name</li>
-                  <li>Generate podcasts by selecting the episode profile that fits the story</li>
+                  <li>{t.podcasts.workflowStep1}</li>
+                  <li>{t.podcasts.workflowStep2}</li>
+                  <li>{t.podcasts.workflowStep3}</li>
                 </ol>
                 <p className="text-xs text-muted-foreground/80">
-                  Episode profiles reference speaker profiles by name, so starting with speakers avoids
-                  missing voice assignments later.
+                  {t.podcasts.workflowHint}
                 </p>
               </div>
             </div>
@@ -120,9 +120,9 @@ export function TemplatesTab() {
       {hasError ? (
         <Alert variant="destructive">
           <AlertCircle className="h-4 w-4" />
-          <AlertTitle>Failed to load templates data</AlertTitle>
+          <AlertTitle>{t.podcasts.failedToLoadTemplates}</AlertTitle>
           <AlertDescription>
-            Ensure the API is running and try again. Some sections may be incomplete.
+            {t.podcasts.failedToLoadTemplatesDesc}
           </AlertDescription>
         </Alert>
       ) : null}
@@ -130,7 +130,7 @@ export function TemplatesTab() {
       {isLoading ? (
         <div className="flex items-center gap-3 rounded-lg border border-dashed p-6 text-sm text-muted-foreground">
           <Loader2 className="h-4 w-4 animate-spin" />
-          Loading templates…
+          {t.podcasts.loadingTemplates}
         </div>
       ) : (
         <div className="grid gap-6 lg:grid-cols-2">
diff --git a/frontend/src/components/podcasts/forms/EpisodeProfileFormDialog.tsx b/frontend/src/components/podcasts/forms/EpisodeProfileFormDialog.tsx
index eafb2ed..8f4ecd4 100644
--- a/frontend/src/components/podcasts/forms/EpisodeProfileFormDialog.tsx
+++ b/frontend/src/components/podcasts/forms/EpisodeProfileFormDialog.tsx
@@ -10,6 +10,7 @@ import {
   useCreateEpisodeProfile,
   useUpdateEpisodeProfile,
 } from '@/lib/hooks/use-podcasts'
+import { useTranslation } from '@/lib/hooks/use-translation'
 import {
   Dialog,
   DialogContent,
@@ -30,23 +31,24 @@ import {
 } from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
 import { Separator } from '@/components/ui/separator'
+import { TranslationKeys } from '@/lib/locales'
 
-const episodeProfileSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
+const episodeProfileSchema = (t: TranslationKeys) => z.object({
+  name: z.string().min(1, t.podcasts.nameRequired || 'Name is required'),
   description: z.string().optional(),
-  speaker_config: z.string().min(1, 'Speaker profile is required'),
-  outline_provider: z.string().min(1, 'Outline provider is required'),
-  outline_model: z.string().min(1, 'Outline model is required'),
-  transcript_provider: z.string().min(1, 'Transcript provider is required'),
-  transcript_model: z.string().min(1, 'Transcript model is required'),
-  default_briefing: z.string().min(1, 'Default briefing is required'),
+  speaker_config: z.string().min(1, t.podcasts.profileRequired || 'Speaker profile is required'),
+  outline_provider: z.string().min(1, t.podcasts.outlineProviderRequired || 'Outline provider is required'),
+  outline_model: z.string().min(1, t.podcasts.outlineModelRequired || 'Outline model is required'),
+  transcript_provider: z.string().min(1, t.podcasts.transcriptProviderRequired || 'Transcript provider is required'),
+  transcript_model: z.string().min(1, t.podcasts.transcriptModelRequired || 'Transcript model is required'),
+  default_briefing: z.string().min(1, t.podcasts.defaultBriefingRequired || 'Default briefing is required'),
   num_segments: z.number()
-    .int('Must be an integer')
-    .min(3, 'At least 3 segments')
-    .max(20, 'Maximum 20 segments'),
+    .int(t.podcasts.segmentsInteger || 'Must be an integer')
+    .min(3, t.podcasts.segmentsMin || 'At least 3 segments')
+    .max(20, t.podcasts.segmentsMax || 'Maximum 20 segments'),
 })
 
-export type EpisodeProfileFormValues = z.infer<typeof episodeProfileSchema>
+export type EpisodeProfileFormValues = z.infer<ReturnType<typeof episodeProfileSchema>>
 
 interface EpisodeProfileFormDialogProps {
   mode: 'create' | 'edit'
@@ -65,6 +67,7 @@ export function EpisodeProfileFormDialog({
   modelOptions,
   initialData,
 }: EpisodeProfileFormDialogProps) {
+  const { t } = useTranslation()
   const createProfile = useCreateEpisodeProfile()
   const updateProfile = useUpdateEpisodeProfile()
 
@@ -111,7 +114,7 @@ export function EpisodeProfileFormDialog({
     watch,
     formState: { errors },
   } = useForm<EpisodeProfileFormValues>({
-    resolver: zodResolver(episodeProfileSchema),
+    resolver: zodResolver(episodeProfileSchema(t)),
     defaultValues: getDefaults(),
   })
 
@@ -185,29 +188,27 @@ export function EpisodeProfileFormDialog({
       <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
         <DialogHeader>
           <DialogTitle>
-            {isEdit ? 'Edit Episode Profile' : 'Create Episode Profile'}
+            {isEdit ? t.podcasts.editEpisodeProfile : t.podcasts.createEpisodeProfile}
           </DialogTitle>
           <DialogDescription>
-            Define how episodes should be generated and which speaker configuration
-            they use by default.
+            {t.podcasts.episodeProfileFormDesc}
           </DialogDescription>
         </DialogHeader>
 
         {speakerProfiles.length === 0 ? (
-          <Alert className="bg-amber-50 text-amber-900">
-            <AlertTitle>No speaker profiles available</AlertTitle>
+          <Alert className="bg-amber-50 text-amber-900 border-amber-200">
+            <AlertTitle>{t.podcasts.noSpeakerProfilesAvailable}</AlertTitle>
             <AlertDescription>
-              Create a speaker profile before configuring an episode profile.
+              {t.podcasts.noSpeakerProfilesDesc}
             </AlertDescription>
           </Alert>
         ) : null}
 
         {providers.length === 0 ? (
-          <Alert className="bg-amber-50 text-amber-900">
-            <AlertTitle>No language models available</AlertTitle>
+          <Alert className="bg-amber-50 text-amber-900 border-amber-200">
+            <AlertTitle>{t.podcasts.noLanguageModelsAvailable}</AlertTitle>
             <AlertDescription>
-              Add language models in the Models section to configure outline and transcript
-              generation.
+              {t.podcasts.noLanguageModelsDesc}
             </AlertDescription>
           </Alert>
         ) : null}
@@ -215,21 +216,22 @@ export function EpisodeProfileFormDialog({
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 pt-2">
           <div className="grid gap-4 md:grid-cols-2">
             <div className="space-y-2">
-              <Label htmlFor="name">Profile name *</Label>
-              <Input id="name" placeholder="Tech discussion" {...register('name')} />
+              <Label htmlFor="name">{t.podcasts.profileName} *</Label>
+              <Input id="name" placeholder={t.podcasts.profileNamePlaceholder} {...register('name')} />
               {errors.name ? (
                 <p className="text-xs text-red-600">{errors.name.message}</p>
               ) : null}
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="num_segments">Segments *</Label>
+              <Label htmlFor="num_segments">{t.podcasts.segments} *</Label>
               <Input
                 id="num_segments"
                 type="number"
                 min={3}
                 max={20}
                 {...register('num_segments', { valueAsNumber: true })}
+                autoComplete="off"
               />
               {errors.num_segments ? (
                 <p className="text-xs text-red-600">{errors.num_segments.message}</p>
@@ -237,12 +239,13 @@ export function EpisodeProfileFormDialog({
             </div>
 
             <div className="md:col-span-2 space-y-2">
-              <Label htmlFor="description">Description</Label>
+              <Label htmlFor="description">{t.common.description}</Label>
               <Textarea
                 id="description"
                 rows={3}
-                placeholder="Short summary of when to use this profile"
+                placeholder={t.podcasts.descriptionPlaceholder}
                 {...register('description')}
+                autoComplete="off"
               />
             </div>
           </div>
@@ -250,7 +253,7 @@ export function EpisodeProfileFormDialog({
           <div className="space-y-4">
             <div>
               <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-                Speaker configuration
+                {t.podcasts.speakerConfig}
               </h3>
               <Separator className="mt-2" />
             </div>
@@ -259,12 +262,12 @@ export function EpisodeProfileFormDialog({
               name="speaker_config"
               render={({ field }) => (
                 <div className="space-y-2">
-                  <Label>Speaker profile *</Label>
+                  <Label htmlFor="speaker_config">{t.podcasts.speakerProfile} *</Label>
                   <Select value={field.value} onValueChange={field.onChange}>
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select a speaker profile" />
+                    <SelectTrigger id="speaker_config">
+                      <SelectValue placeholder={t.podcasts.selectSpeakerProfile} />
                     </SelectTrigger>
-                    <SelectContent>
+                    <SelectContent title={t.podcasts.speakerProfile}>
                       {speakerProfiles.map((profile) => (
                         <SelectItem key={profile.id} value={profile.name}>
                           {profile.name}
@@ -285,7 +288,7 @@ export function EpisodeProfileFormDialog({
           <div className="space-y-4">
             <div>
               <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-                Outline generation
+                {t.podcasts.outlineGeneration}
               </h3>
               <Separator className="mt-2" />
             </div>
@@ -295,12 +298,12 @@ export function EpisodeProfileFormDialog({
                 name="outline_provider"
                 render={({ field }) => (
                   <div className="space-y-2">
-                    <Label>Provider *</Label>
+                    <Label htmlFor="outline_provider">{t.models.provider} *</Label>
                     <Select value={field.value} onValueChange={field.onChange}>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select provider" />
+                      <SelectTrigger id="outline_provider">
+                        <SelectValue placeholder={t.models.selectProviderPlaceholder} />
                       </SelectTrigger>
-                      <SelectContent>
+                      <SelectContent title={t.models.provider}>
                         {providers.map((provider) => (
                           <SelectItem key={provider} value={provider}>
                             <span className="capitalize">{provider}</span>
@@ -322,12 +325,12 @@ export function EpisodeProfileFormDialog({
                 name="outline_model"
                 render={({ field }) => (
                   <div className="space-y-2">
-                    <Label>Model *</Label>
+                    <Label htmlFor="outline_model">{t.common.model} *</Label>
                     <Select value={field.value} onValueChange={field.onChange}>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select model" />
+                      <SelectTrigger id="outline_model">
+                        <SelectValue placeholder={t.models.selectModelPlaceholder} />
                       </SelectTrigger>
-                      <SelectContent>
+                      <SelectContent title={t.common.model}>
                         {availableOutlineModels.map((model) => (
                           <SelectItem key={model} value={model}>
                             {model}
@@ -349,7 +352,7 @@ export function EpisodeProfileFormDialog({
           <div className="space-y-4">
             <div>
               <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-                Transcript generation
+                {t.podcasts.transcriptGeneration}
               </h3>
               <Separator className="mt-2" />
             </div>
@@ -359,12 +362,12 @@ export function EpisodeProfileFormDialog({
                 name="transcript_provider"
                 render={({ field }) => (
                   <div className="space-y-2">
-                    <Label>Provider *</Label>
+                    <Label htmlFor="transcript_provider">{t.models.provider} *</Label>
                     <Select value={field.value} onValueChange={field.onChange}>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select provider" />
+                      <SelectTrigger id="transcript_provider">
+                        <SelectValue placeholder={t.models.selectProviderPlaceholder} />
                       </SelectTrigger>
-                      <SelectContent>
+                      <SelectContent title={t.models.provider}>
                         {providers.map((provider) => (
                           <SelectItem key={provider} value={provider}>
                             <span className="capitalize">{provider}</span>
@@ -386,12 +389,12 @@ export function EpisodeProfileFormDialog({
                 name="transcript_model"
                 render={({ field }) => (
                   <div className="space-y-2">
-                    <Label>Model *</Label>
+                    <Label htmlFor="transcript_model">{t.common.model} *</Label>
                     <Select value={field.value} onValueChange={field.onChange}>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select model" />
+                      <SelectTrigger id="transcript_model">
+                        <SelectValue placeholder={t.models.selectModelPlaceholder} />
                       </SelectTrigger>
-                      <SelectContent>
+                      <SelectContent title={t.common.model}>
                         {availableTranscriptModels.map((model) => (
                           <SelectItem key={model} value={model}>
                             {model}
@@ -411,11 +414,11 @@ export function EpisodeProfileFormDialog({
           </div>
 
           <div className="space-y-2">
-            <Label htmlFor="default_briefing">Default briefing *</Label>
+            <Label htmlFor="default_briefing">{t.podcasts.defaultBriefingTitle} *</Label>
             <Textarea
               id="default_briefing"
               rows={6}
-              placeholder="Outline the structure, tone, and goals for this episode format"
+              placeholder={t.podcasts.defaultBriefingPlaceholder}
               {...register('default_briefing')}
             />
             {errors.default_briefing ? (
@@ -431,16 +434,14 @@ export function EpisodeProfileFormDialog({
               variant="outline"
               onClick={() => onOpenChange(false)}
             >
-              Cancel
+              {t.common.cancel}
             </Button>
             <Button type="submit" disabled={disableSubmit}>
               {isSubmitting
-                ? isEdit
-                  ? 'Saving…'
-                  : 'Creating…'
+                ? t.common.saving
                 : isEdit
-                  ? 'Save changes'
-                  : 'Create profile'}
+                  ? t.common.saveChanges
+                  : t.podcasts.createProfile}
             </Button>
           </div>
         </form>
diff --git a/frontend/src/components/podcasts/forms/SpeakerProfileFormDialog.tsx b/frontend/src/components/podcasts/forms/SpeakerProfileFormDialog.tsx
index 8f7eda7..a4ecf80 100644
--- a/frontend/src/components/podcasts/forms/SpeakerProfileFormDialog.tsx
+++ b/frontend/src/components/podcasts/forms/SpeakerProfileFormDialog.tsx
@@ -33,25 +33,28 @@ import {
 import { Textarea } from '@/components/ui/textarea'
 import { Separator } from '@/components/ui/separator'
 
-const speakerConfigSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
-  voice_id: z.string().min(1, 'Voice ID is required'),
-  backstory: z.string().min(1, 'Backstory is required'),
-  personality: z.string().min(1, 'Personality is required'),
+import { TranslationKeys } from '@/lib/locales'
+import { useTranslation } from '@/lib/hooks/use-translation'
+
+const speakerConfigSchema = (t: TranslationKeys) => z.object({
+  name: z.string().min(1, t.common.nameRequired || 'Name is required'),
+  voice_id: z.string().min(1, t.podcasts.voiceIdRequired || 'Voice ID is required'),
+  backstory: z.string().min(1, t.podcasts.backstoryRequired || 'Backstory is required'),
+  personality: z.string().min(1, t.podcasts.personalityRequired || 'Personality is required'),
 })
 
-const speakerProfileSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
+const speakerProfileSchema = (t: TranslationKeys) => z.object({
+  name: z.string().min(1, t.common.nameRequired || 'Name is required'),
   description: z.string().optional(),
-  tts_provider: z.string().min(1, 'Provider is required'),
-  tts_model: z.string().min(1, 'Model is required'),
+  tts_provider: z.string().min(1, t.models.providerRequired || 'Provider is required'),
+  tts_model: z.string().min(1, t.models.modelRequired || 'Model is required'),
   speakers: z
-    .array(speakerConfigSchema)
-    .min(1, 'At least one speaker is required')
-    .max(4, 'You can configure up to 4 speakers'),
+    .array(speakerConfigSchema(t))
+    .min(1, t.podcasts.speakerCountMin || 'At least one speaker is required')
+    .max(4, t.podcasts.speakerCountMax || 'You can configure up to 4 speakers'),
 })
 
-export type SpeakerProfileFormValues = z.infer<typeof speakerProfileSchema>
+export type SpeakerProfileFormValues = z.infer<ReturnType<typeof speakerProfileSchema>>
 
 interface SpeakerProfileFormDialogProps {
   mode: 'create' | 'edit'
@@ -75,6 +78,7 @@ export function SpeakerProfileFormDialog({
   modelOptions,
   initialData,
 }: SpeakerProfileFormDialogProps) {
+  const { t } = useTranslation()
   const createProfile = useCreateSpeakerProfile()
   const updateProfile = useUpdateSpeakerProfile()
 
@@ -112,7 +116,7 @@ export function SpeakerProfileFormDialog({
     watch,
     formState: { errors },
   } = useForm<SpeakerProfileFormValues>({
-    resolver: zodResolver(speakerProfileSchema),
+    resolver: zodResolver(speakerProfileSchema(t)),
     defaultValues: getDefaults(),
   })
 
@@ -184,18 +188,18 @@ export function SpeakerProfileFormDialog({
       <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
         <DialogHeader>
           <DialogTitle>
-            {isEdit ? 'Edit Speaker Profile' : 'Create Speaker Profile'}
+            {isEdit ? t.podcasts.editSpeakerProfile : t.podcasts.createSpeakerProfile}
           </DialogTitle>
           <DialogDescription>
-            Configure text-to-speech settings and define up to four speakers.
+            {t.podcasts.speakerProfileFormDesc}
           </DialogDescription>
         </DialogHeader>
 
         {providers.length === 0 ? (
-          <Alert className="bg-amber-50 text-amber-900">
-            <AlertTitle>No text-to-speech models available</AlertTitle>
+          <Alert className="bg-amber-50 text-amber-900 border-amber-200">
+            <AlertTitle>{t.podcasts.noTtsModelsAvailable}</AlertTitle>
             <AlertDescription>
-              Add TTS models in the Models section before creating a speaker profile.
+              {t.podcasts.noTtsModelsDesc}
             </AlertDescription>
           </Alert>
         ) : null}
@@ -203,24 +207,24 @@ export function SpeakerProfileFormDialog({
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 pt-2">
           <div className="grid gap-4 md:grid-cols-2">
             <div className="space-y-2">
-              <Label htmlFor="name">Profile name *</Label>
-              <Input id="name" placeholder="Weekly show host" {...register('name')} />
+              <Label htmlFor="name">{t.podcasts.profileName} *</Label>
+              <Input id="name" placeholder={t.podcasts.profileNamePlaceholder} {...register('name')} />
               {errors.name ? (
                 <p className="text-xs text-red-600">{errors.name.message}</p>
               ) : null}
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="tts_provider">Provider *</Label>
+              <Label htmlFor="tts_provider">{t.models.provider} *</Label>
               <Controller
                 control={control}
                 name="tts_provider"
                 render={({ field }) => (
                   <Select value={field.value} onValueChange={field.onChange}>
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select provider" />
+                    <SelectTrigger id="tts_provider">
+                      <SelectValue placeholder={t.models.selectProviderPlaceholder} />
                     </SelectTrigger>
-                    <SelectContent>
+                    <SelectContent title={t.models.provider}>
                       {providers.map((option) => (
                         <SelectItem key={option} value={option}>
                           <span className="capitalize">{option}</span>
@@ -236,16 +240,16 @@ export function SpeakerProfileFormDialog({
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="tts_model">Model *</Label>
+              <Label htmlFor="tts_model">{t.common.model} *</Label>
               <Controller
                 control={control}
                 name="tts_model"
                 render={({ field }) => (
                   <Select value={field.value} onValueChange={field.onChange}>
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select model" />
+                    <SelectTrigger id="tts_model">
+                      <SelectValue placeholder={t.models.selectModelPlaceholder} />
                     </SelectTrigger>
-                    <SelectContent>
+                    <SelectContent title={t.common.model}>
                       {availableModels.map((model) => (
                         <SelectItem key={model} value={model}>
                           {model}
@@ -261,11 +265,11 @@ export function SpeakerProfileFormDialog({
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="description">Description</Label>
+              <Label htmlFor="description">{t.common.description}</Label>
               <Textarea
                 id="description"
                 rows={3}
-                placeholder="Notes about tone, brand, or usage"
+                placeholder={t.podcasts.descriptionPlaceholder}
                 {...register('description')}
               />
             </div>
@@ -275,10 +279,10 @@ export function SpeakerProfileFormDialog({
             <div className="flex items-center justify-between">
               <div>
                 <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-                  Speakers
+                  {t.podcasts.speakers}
                 </h3>
                 <p className="text-xs text-muted-foreground">
-                  Configure between one and four voices for this profile.
+                  {t.podcasts.speakersDesc}
                 </p>
               </div>
               <Button
@@ -288,7 +292,7 @@ export function SpeakerProfileFormDialog({
                 onClick={() => append({ ...EMPTY_SPEAKER })}
                 disabled={fields.length >= 4}
               >
-                <Plus className="mr-2 h-4 w-4" /> Add speaker
+                <Plus className="mr-2 h-4 w-4" /> {t.podcasts.addSpeaker}
               </Button>
             </div>
             <Separator />
@@ -296,7 +300,9 @@ export function SpeakerProfileFormDialog({
             {fields.map((field, index) => (
               <div key={field.id} className="rounded-lg border p-4 space-y-4">
                 <div className="flex items-center justify-between">
-                  <p className="text-sm font-semibold">Speaker {index + 1}</p>
+                  <p className="text-sm font-semibold">
+                    {t.podcasts.speakerNumber.replace('{number}', (index + 1).toString())}
+                  </p>
                   <Button
                     type="button"
                     variant="ghost"
@@ -305,15 +311,17 @@ export function SpeakerProfileFormDialog({
                     disabled={fields.length <= 1}
                     className="text-destructive"
                   >
-                    <Trash2 className="mr-2 h-4 w-4" /> Remove
+                    <Trash2 className="mr-2 h-4 w-4" /> {t.common.remove}
                   </Button>
                 </div>
                 <div className="grid gap-4 md:grid-cols-2">
                   <div className="space-y-2">
-                    <Label>Name *</Label>
+                    <Label htmlFor={`speaker-name-${index}`}>{t.common.name} *</Label>
                     <Input
+                      id={`speaker-name-${index}`}
                       {...register(`speakers.${index}.name` as const)}
-                      placeholder="Host 1"
+                      placeholder={t.podcasts.hostPlaceholder.replace('{number}', (index + 1).toString())}
+                      autoComplete="off"
                     />
                     {errors.speakers?.[index]?.name ? (
                       <p className="text-xs text-red-600">
@@ -322,10 +330,12 @@ export function SpeakerProfileFormDialog({
                     ) : null}
                   </div>
                   <div className="space-y-2">
-                    <Label>Voice ID *</Label>
+                    <Label htmlFor={`speaker-voice-${index}`}>{t.podcasts.voiceId} *</Label>
                     <Input
+                      id={`speaker-voice-${index}`}
                       {...register(`speakers.${index}.voice_id` as const)}
                       placeholder="voice_123"
+                      autoComplete="off"
                     />
                     {errors.speakers?.[index]?.voice_id ? (
                       <p className="text-xs text-red-600">
@@ -335,11 +345,13 @@ export function SpeakerProfileFormDialog({
                   </div>
                 </div>
                 <div className="space-y-2">
-                  <Label>Backstory *</Label>
+                  <Label htmlFor={`speaker-backstory-${index}`}>{t.podcasts.backstory} *</Label>
                   <Textarea
+                    id={`speaker-backstory-${index}`}
                     rows={3}
-                    placeholder="Short biography or context for the speaker"
+                    placeholder={t.podcasts.backstoryPlaceholder}
                     {...register(`speakers.${index}.backstory` as const)}
+                    autoComplete="off"
                   />
                   {errors.speakers?.[index]?.backstory ? (
                     <p className="text-xs text-red-600">
@@ -348,11 +360,13 @@ export function SpeakerProfileFormDialog({
                   ) : null}
                 </div>
                 <div className="space-y-2">
-                  <Label>Personality *</Label>
+                  <Label htmlFor={`speaker-personality-${index}`}>{t.podcasts.personality} *</Label>
                   <Textarea
+                    id={`speaker-personality-${index}`}
                     rows={3}
-                    placeholder="Describe style and tone"
+                    placeholder={t.podcasts.personalityPlaceholder}
                     {...register(`speakers.${index}.personality` as const)}
+                    autoComplete="off"
                   />
                   {errors.speakers?.[index]?.personality ? (
                     <p className="text-xs text-red-600">
@@ -374,16 +388,14 @@ export function SpeakerProfileFormDialog({
               variant="outline"
               onClick={() => onOpenChange(false)}
             >
-              Cancel
+              {t.common.cancel}
             </Button>
             <Button type="submit" disabled={disableSubmit}>
               {isSubmitting
-                ? isEdit
-                  ? 'Saving…'
-                  : 'Creating…'
+                ? t.common.saving
                 : isEdit
-                  ? 'Save changes'
-                  : 'Create profile'}
+                  ? t.common.saveChanges
+                  : t.podcasts.createProfile}
             </Button>
           </div>
         </form>
diff --git a/frontend/src/components/providers/I18nProvider.tsx b/frontend/src/components/providers/I18nProvider.tsx
new file mode 100644
index 0000000..fb97fac
--- /dev/null
+++ b/frontend/src/components/providers/I18nProvider.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import '@/lib/i18n'
+import { LanguageLoadingOverlay } from '@/components/common/LanguageLoadingOverlay'
+
+export function I18nProvider({ children }: { children: React.ReactNode }) {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  // Avoid hydration mismatch by waiting for mount
+  if (!mounted) {
+    return <div style={{ visibility: 'hidden' }}>{children}</div>
+  }
+
+  return (
+    <>
+      <LanguageLoadingOverlay />
+      {children}
+    </>
+  )
+}
diff --git a/frontend/src/components/search/AdvancedModelsDialog.tsx b/frontend/src/components/search/AdvancedModelsDialog.tsx
index 6c830a0..b9ede6f 100644
--- a/frontend/src/components/search/AdvancedModelsDialog.tsx
+++ b/frontend/src/components/search/AdvancedModelsDialog.tsx
@@ -11,6 +11,7 @@ import {
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { ModelSelector } from '@/components/common/ModelSelector'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface AdvancedModelsDialogProps {
   open: boolean
@@ -33,6 +34,7 @@ export function AdvancedModelsDialog({
   defaultModels,
   onSave
 }: AdvancedModelsDialogProps) {
+  const { t } = useTranslation()
   const [strategyModel, setStrategyModel] = useState(defaultModels.strategy)
   const [answerModel, setAnswerModel] = useState(defaultModels.answer)
   const [finalAnswerModel, setFinalAnswerModel] = useState(defaultModels.finalAnswer)
@@ -57,44 +59,44 @@ export function AdvancedModelsDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[500px]">
         <DialogHeader>
-          <DialogTitle>Advanced Model Selection</DialogTitle>
+          <DialogTitle>{t.searchPage.advancedModelTitle}</DialogTitle>
           <DialogDescription>
-            Choose specific models for each stage of the Ask process
+            {t.searchPage.advancedModelDesc}
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4 py-4">
           <ModelSelector
-            label="Strategy Model"
+            label={t.searchPage.strategyModel}
             modelType="language"
             value={strategyModel}
             onChange={setStrategyModel}
-            placeholder="Select strategy model"
+            placeholder={t.searchPage.selectStrategyPlaceholder}
           />
 
           <ModelSelector
-            label="Answer Model"
+            label={t.searchPage.answerModel}
             modelType="language"
             value={answerModel}
             onChange={setAnswerModel}
-            placeholder="Select answer model"
+            placeholder={t.searchPage.selectAnswerPlaceholder}
           />
 
           <ModelSelector
-            label="Final Answer Model"
+            label={t.searchPage.finalAnswerModel}
             modelType="language"
             value={finalAnswerModel}
             onChange={setFinalAnswerModel}
-            placeholder="Select final answer model"
+            placeholder={t.searchPage.selectFinalPlaceholder}
           />
         </div>
 
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
+            {t.common.cancel}
           </Button>
           <Button onClick={handleSave}>
-            Save Changes
+            {t.searchPage.saveChanges}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/frontend/src/components/search/SaveToNotebooksDialog.tsx b/frontend/src/components/search/SaveToNotebooksDialog.tsx
index ca7c30b..2fb92ca 100644
--- a/frontend/src/components/search/SaveToNotebooksDialog.tsx
+++ b/frontend/src/components/search/SaveToNotebooksDialog.tsx
@@ -15,6 +15,7 @@ import { useNotebooks } from '@/lib/hooks/use-notebooks'
 import { useCreateNote } from '@/lib/hooks/use-notes'
 import { LoadingSpinner } from '@/components/common/LoadingSpinner'
 import { toast } from 'sonner'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface SaveToNotebooksDialogProps {
   open: boolean
@@ -29,6 +30,7 @@ export function SaveToNotebooksDialog({
   question,
   answer
 }: SaveToNotebooksDialogProps) {
+  const { t } = useTranslation()
   const [selectedNotebooks, setSelectedNotebooks] = useState<string[]>([])
   const { data: notebooks, isLoading } = useNotebooks(false) // false = not archived
   const createNote = useCreateNote()
@@ -43,7 +45,7 @@ export function SaveToNotebooksDialog({
 
   const handleSave = async () => {
     if (selectedNotebooks.length === 0) {
-      toast.error('Please select at least one notebook')
+      toast.error(t.searchPage.selectNotebook)
       return
     }
 
@@ -58,11 +60,11 @@ export function SaveToNotebooksDialog({
         })
       }
 
-      toast.success(`Answer saved to ${selectedNotebooks.length} notebook${selectedNotebooks.length > 1 ? 's' : ''}`)
+      toast.success(t.searchPage.saveSuccess)
       setSelectedNotebooks([])
       onOpenChange(false)
     } catch {
-      toast.error('Failed to save answer')
+      toast.error(t.searchPage.saveError)
     }
   }
 
@@ -76,9 +78,9 @@ export function SaveToNotebooksDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[500px]">
         <DialogHeader>
-          <DialogTitle>Save to Notebooks</DialogTitle>
+          <DialogTitle>{t.searchPage.saveToNotebooks}</DialogTitle>
           <DialogDescription>
-            Select one or more notebooks to save this answer
+            {t.searchPage.selectNotebook}
           </DialogDescription>
         </DialogHeader>
 
@@ -92,14 +94,14 @@ export function SaveToNotebooksDialog({
               items={notebookItems}
               selectedIds={selectedNotebooks}
               onToggle={handleToggle}
-              emptyMessage="No notebooks found. Create a notebook first."
+              emptyMessage={t.sources.noNotebooksFound}
             />
           )}
         </div>
 
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
+            {t.common.cancel}
           </Button>
           <Button
             onClick={handleSave}
@@ -108,10 +110,10 @@ export function SaveToNotebooksDialog({
             {createNote.isPending ? (
               <>
                 <LoadingSpinner size="sm" className="mr-2" />
-                Saving...
+                {t.searchPage.saving}
               </>
             ) : (
-              `Save to ${selectedNotebooks.length || ''} Notebook${selectedNotebooks.length !== 1 ? 's' : ''}`
+              t.searchPage.saveToNotebook
             )}
           </Button>
         </DialogFooter>
diff --git a/frontend/src/components/search/StreamingResponse.tsx b/frontend/src/components/search/StreamingResponse.tsx
index e3ae420..bc1cc35 100644
--- a/frontend/src/components/search/StreamingResponse.tsx
+++ b/frontend/src/components/search/StreamingResponse.tsx
@@ -10,6 +10,7 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { convertReferencesToMarkdownLinks, createReferenceLinkComponent } from '@/lib/utils/source-references'
 import { useModalManager } from '@/lib/hooks/use-modal-manager'
+import { useTranslation } from '@/lib/hooks/use-translation'
 import { toast } from 'sonner'
 
 interface StrategyData {
@@ -33,6 +34,7 @@ export function StreamingResponse({
   const [strategyOpen, setStrategyOpen] = useState(false)
   const [answersOpen, setAnswersOpen] = useState(false)
   const { openModal } = useModalManager()
+  const { t } = useTranslation()
 
   const handleReferenceClick = (type: string, id: string) => {
     const modalType = type === 'source_insight' ? 'insight' : type as 'source' | 'note' | 'insight'
@@ -44,7 +46,7 @@ export function StreamingResponse({
       // This try-catch is here for future enhancements or unexpected errors.
     } catch {
       const typeLabel = type === 'source_insight' ? 'insight' : type
-      toast.error(`This ${typeLabel} could not be found`)
+      toast.error(t.common.itemNotFound.replace('{type}', typeLabel))
     }
   }
 
@@ -56,7 +58,7 @@ export function StreamingResponse({
     <div
       className="space-y-4 mt-6 max-h-[60vh] overflow-y-auto pr-2"
       role="region"
-      aria-label="Ask response"
+      aria-label={t.common.accessibility.askResponse}
       aria-live="polite"
       aria-busy={isStreaming}
     >
@@ -68,7 +70,7 @@ export function StreamingResponse({
               <CollapsibleTrigger className="flex items-center justify-between w-full hover:opacity-80">
                 <CardTitle className="text-base flex items-center gap-2">
                   <Sparkles className="h-4 w-4 text-primary" />
-                  Strategy
+                  {t.common.strategy}
                 </CardTitle>
                 <ChevronDown className={`h-4 w-4 transition-transform ${strategyOpen ? 'rotate-180' : ''}`} />
               </CollapsibleTrigger>
@@ -76,12 +78,12 @@ export function StreamingResponse({
             <CollapsibleContent>
               <CardContent className="space-y-3 pt-0">
                 <div>
-                  <p className="text-sm text-muted-foreground mb-2">Reasoning:</p>
+                  <p className="text-sm text-muted-foreground mb-2">{t.common.reasoning}:</p>
                   <p className="text-sm">{strategy.reasoning}</p>
                 </div>
                 {strategy.searches.length > 0 && (
                   <div>
-                    <p className="text-sm text-muted-foreground mb-2">Search Terms:</p>
+                    <p className="text-sm text-muted-foreground mb-2">{t.common.searchTerms}:</p>
                     <div className="space-y-2">
                       {strategy.searches.map((search, i) => (
                         <div key={i} className="flex items-start gap-2">
@@ -109,7 +111,7 @@ export function StreamingResponse({
               <CollapsibleTrigger className="flex items-center justify-between w-full hover:opacity-80">
                 <CardTitle className="text-base flex items-center gap-2">
                   <Lightbulb className="h-4 w-4 text-primary" />
-                  Individual Answers ({answers.length})
+                  {t.common.individualAnswers.replace('{count}', answers.length.toString())}
                 </CardTitle>
                 <ChevronDown className={`h-4 w-4 transition-transform ${answersOpen ? 'rotate-180' : ''}`} />
               </CollapsibleTrigger>
@@ -133,7 +135,7 @@ export function StreamingResponse({
           <CardHeader>
             <CardTitle className="text-base flex items-center gap-2">
               <CheckCircle className="h-4 w-4 text-primary" />
-              Final Answer
+              {t.common.finalAnswer}
             </CardTitle>
           </CardHeader>
           <CardContent>
@@ -149,7 +151,7 @@ export function StreamingResponse({
       {isStreaming && !finalAnswer && (
         <div className="flex items-center gap-2 text-sm text-muted-foreground">
           <LoadingSpinner size="sm" />
-          <span>Processing your question...</span>
+          <span>{t.searchPage.processingQuestion}</span>
         </div>
       )}
     </div>
diff --git a/frontend/src/components/source/ChatPanel.tsx b/frontend/src/components/source/ChatPanel.tsx
index c325b24..e51078e 100644
--- a/frontend/src/components/source/ChatPanel.tsx
+++ b/frontend/src/components/source/ChatPanel.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, useId } from 'react'
 import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
 import { ScrollArea } from '@/components/ui/scroll-area'
@@ -22,6 +22,7 @@ import { MessageActions } from '@/components/source/MessageActions'
 import { convertReferencesToCompactMarkdown, createCompactReferenceLinkComponent } from '@/lib/utils/source-references'
 import { useModalManager } from '@/lib/hooks/use-modal-manager'
 import { toast } from 'sonner'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface NotebookContextStats {
   sourcesInsights: number
@@ -69,11 +70,13 @@ export function ChatPanel({
   onDeleteSession,
   onUpdateSession,
   loadingSessions = false,
-  title = 'Chat with Source',
+  title,
   contextType = 'source',
   notebookContextStats,
   notebookId
 }: ChatPanelProps) {
+  const { t } = useTranslation()
+  const chatInputId = useId()
   const [input, setInput] = useState('')
   const [sessionManagerOpen, setSessionManagerOpen] = useState(false)
   const scrollAreaRef = useRef<HTMLDivElement>(null)
@@ -89,8 +92,7 @@ export function ChatPanel({
       // The modal component itself will handle displaying "not found" states.
       // This try-catch is here for future enhancements or unexpected errors.
     } catch {
-      const typeLabel = type === 'source_insight' ? 'insight' : type
-      toast.error(`This ${typeLabel} could not be found`)
+      toast.error(t.common.noResults)
     }
   }
 
@@ -128,7 +130,7 @@ export function ChatPanel({
         <div className="flex items-center justify-between">
           <CardTitle className="flex items-center gap-2">
             <Bot className="h-5 w-5" />
-            {title}
+            {title || (contextType === 'source' ? t.chat.chatWith.replace('{name}', t.navigation.sources) : t.chat.chatWith.replace('{name}', t.common.notebook))}
           </CardTitle>
           {onSelectSession && onCreateSession && onDeleteSession && (
             <Dialog open={sessionManagerOpen} onOpenChange={setSessionManagerOpen}>
@@ -140,10 +142,10 @@ export function ChatPanel({
                 disabled={loadingSessions}
               >
                 <Clock className="h-4 w-4" />
-                <span className="text-xs">Sessions</span>
+                <span className="text-xs">{t.chat.sessions}</span>
               </Button>
               <DialogContent className="sm:max-w-[420px] p-0 overflow-hidden">
-                <DialogTitle className="sr-only">Chat Sessions</DialogTitle>
+                <DialogTitle className="sr-only">{t.chat.sessionsTitle}</DialogTitle>
                 <SessionManager
                   sessions={sessions}
                   currentSessionId={currentSessionId ?? null}
@@ -168,9 +170,9 @@ export function ChatPanel({
               <div className="text-center text-muted-foreground py-8">
                 <Bot className="h-12 w-12 mx-auto mb-4 opacity-50" />
                 <p className="text-sm">
-                  Start a conversation about this {contextType}
+                  {t.chat.startConversation.replace('{type}', contextType === 'source' ? t.navigation.sources : t.common.notebook)}
                 </p>
-                <p className="text-xs mt-2">Ask questions to understand the content better</p>
+                <p className="text-xs mt-2">{t.chat.askQuestions}</p>
               </div>
             ) : (
               messages.map((message) => (
@@ -244,19 +246,19 @@ export function ChatPanel({
               {contextIndicators.sources?.length > 0 && (
                 <Badge variant="outline" className="gap-1">
                   <FileText className="h-3 w-3" />
-                  {contextIndicators.sources.length} source{contextIndicators.sources.length > 1 ? 's' : ''}
+                  {contextIndicators.sources.length} {t.navigation.sources}
                 </Badge>
               )}
               {contextIndicators.insights?.length > 0 && (
                 <Badge variant="outline" className="gap-1">
                   <Lightbulb className="h-3 w-3" />
-                  {contextIndicators.insights.length} insight{contextIndicators.insights.length > 1 ? 's' : ''}
+                  {contextIndicators.insights.length} {contextIndicators.insights.length === 1 ? t.common.insight : t.common.insights}
                 </Badge>
               )}
               {contextIndicators.notes?.length > 0 && (
                 <Badge variant="outline" className="gap-1">
                   <StickyNote className="h-3 w-3" />
-                  {contextIndicators.notes.length} note{contextIndicators.notes.length > 1 ? 's' : ''}
+                  {contextIndicators.notes.length} {contextIndicators.notes.length === 1 ? t.common.note : t.common.notes}
                 </Badge>
               )}
             </div>
@@ -279,7 +281,7 @@ export function ChatPanel({
           {/* Model selector */}
           {onModelChange && (
             <div className="flex items-center justify-between">
-              <span className="text-xs text-muted-foreground">Model</span>
+              <span className="text-xs text-muted-foreground">{t.chat.model}</span>
               <ModelSelector
                 currentModel={modelOverride}
                 onModelChange={onModelChange}
@@ -290,10 +292,13 @@ export function ChatPanel({
 
           <div className="flex gap-2 items-end">
             <Textarea
+              id={chatInputId}
+              name="chat-message"
+              autoComplete="off"
               value={input}
               onChange={(e) => setInput(e.target.value)}
               onKeyDown={handleKeyDown}
-              placeholder={`Ask a question about this ${contextType}... (${keyHint} to send)`}
+              placeholder={`${t.chat.sendPlaceholder} (${t.chat.pressToSend.replace('{key}', keyHint)})`}
               disabled={isStreaming}
               className="flex-1 min-h-[40px] max-h-[100px] resize-none py-2 px-3"
               rows={1}
@@ -327,8 +332,9 @@ function AIMessageContent({
   content: string
   onReferenceClick: (type: string, id: string) => void
 }) {
+  const { t } = useTranslation()
   // Convert references to compact markdown with numbered citations
-  const markdownWithCompactRefs = convertReferencesToCompactMarkdown(content)
+  const markdownWithCompactRefs = convertReferencesToCompactMarkdown(content, t.common.references)
 
   // Create custom link component for compact references
   const LinkComponent = createCompactReferenceLinkComponent(onReferenceClick)
diff --git a/frontend/src/components/source/MessageActions.tsx b/frontend/src/components/source/MessageActions.tsx
index 1ade6ea..8ccb3f6 100644
--- a/frontend/src/components/source/MessageActions.tsx
+++ b/frontend/src/components/source/MessageActions.tsx
@@ -6,6 +6,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { Save, Copy, Loader2, Check } from 'lucide-react'
 import { useCreateNote } from '@/lib/hooks/use-notes'
 import { toast } from 'sonner'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface MessageActionsProps {
   content: string
@@ -13,12 +14,13 @@ interface MessageActionsProps {
 }
 
 export function MessageActions({ content, notebookId }: MessageActionsProps) {
+  const { t } = useTranslation()
   const [copySuccess, setCopySuccess] = useState(false)
   const createNote = useCreateNote()
 
   const handleSaveToNote = () => {
     if (!notebookId) {
-      toast.error('Cannot save note: notebook ID not available')
+      toast.error(t.sources.cannotSaveNoteNoNotebook)
       return
     }
 
@@ -35,7 +37,7 @@ export function MessageActions({ content, notebookId }: MessageActionsProps) {
       // Try modern clipboard API first
       if (navigator.clipboard && navigator.clipboard.writeText) {
         await navigator.clipboard.writeText(content)
-        toast.success('Message copied to clipboard')
+        toast.success(t.common.copyToClipboard)
         setCopySuccess(true)
         setTimeout(() => setCopySuccess(false), 2000)
       } else {
@@ -51,18 +53,18 @@ export function MessageActions({ content, notebookId }: MessageActionsProps) {
 
         try {
           document.execCommand('copy')
-          toast.success('Message copied to clipboard')
+          toast.success(t.common.copyToClipboard)
           setCopySuccess(true)
           setTimeout(() => setCopySuccess(false), 2000)
         } catch {
-          toast.error('Failed to copy message')
+          toast.error(t.common.error)
         }
 
         document.body.removeChild(textArea)
       }
     } catch (err) {
       console.error('Failed to copy to clipboard:', err)
-      toast.error('Failed to copy message')
+      toast.error(t.common.error)
     }
   }
 
@@ -87,7 +89,7 @@ export function MessageActions({ content, notebookId }: MessageActionsProps) {
               </Button>
             </TooltipTrigger>
             <TooltipContent>
-              <p>Save to note</p>
+              <p>{t.common.saveToNote}</p>
             </TooltipContent>
           </Tooltip>
         )}
@@ -108,7 +110,7 @@ export function MessageActions({ content, notebookId }: MessageActionsProps) {
             </Button>
           </TooltipTrigger>
           <TooltipContent>
-            <p>Copy to clipboard</p>
+            <p>{t.common.copyToClipboard}</p>
           </TooltipContent>
         </Tooltip>
       </div>
diff --git a/frontend/src/components/source/ModelSelector.tsx b/frontend/src/components/source/ModelSelector.tsx
index 9a62a32..02824e4 100644
--- a/frontend/src/components/source/ModelSelector.tsx
+++ b/frontend/src/components/source/ModelSelector.tsx
@@ -21,6 +21,7 @@ import {
 } from '@/components/ui/dialog'
 import { Settings2, Sparkles } from 'lucide-react'
 import { useModelDefaults, useModels } from '@/lib/hooks/use-models'
+import { useTranslation } from '@/lib/hooks/use-translation'
 import { LoadingSpinner } from '@/components/common/LoadingSpinner'
 
 interface ModelSelectorProps {
@@ -34,6 +35,7 @@ export function ModelSelector({
   onModelChange,
   disabled = false 
 }: ModelSelectorProps) {
+  const { t } = useTranslation()
   const [open, setOpen] = useState(false)
   const [selectedModel, setSelectedModel] = useState(currentModel || 'default')
   const { data: models, isLoading } = useModels()
@@ -65,8 +67,8 @@ export function ModelSelector({
     if (defaultModel) {
       return defaultModel.name
     }
-    return 'Default Model'
-  }, [currentModel, languageModels, defaultModel])
+    return t.common.default
+  }, [currentModel, languageModels, defaultModel, t.common.default])
 
   const handleSave = () => {
     onModelChange(selectedModel === 'default' ? undefined : selectedModel)
@@ -98,24 +100,26 @@ export function ModelSelector({
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Sparkles className="h-5 w-5" />
-            Model Configuration
+            {t.common.modelConfiguration}
           </DialogTitle>
           <DialogDescription>
-            Override the default model for this chat session. Leave empty to use the system default.
+            {t.transformations.overrideModelDesc}
           </DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4">
           <div className="grid gap-2">
-            <Label htmlFor="model">Model</Label>
+            <Label htmlFor="model">{t.common.model}</Label>
             <Select value={selectedModel} onValueChange={setSelectedModel}>
               <SelectTrigger id="model">
-                <SelectValue placeholder="Select a model (or use default)" />
+                <SelectValue placeholder={t.models.selectModelPlaceholder} />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="default">
                   <div className="flex items-center justify-between w-full">
                     <span>
-                      {defaultModel ? `Default (${defaultModel.name})` : 'System Default'}
+                      {defaultModel 
+                        ? `${t.common.default} (${defaultModel.name})` 
+                        : t.transformations.systemDefault}
                     </span>
                     {defaultModel?.provider && (
                       <span className="text-xs text-muted-foreground ml-2">
@@ -146,17 +150,20 @@ export function ModelSelector({
           {selectedModel && selectedModel !== 'default' && (
             <div className="rounded-lg bg-muted p-3">
               <p className="text-sm text-muted-foreground">
-                This session will use <strong>{languageModels.find(m => m.id === selectedModel)?.name}</strong> instead of the default model.
+                {t.transformations.sessionUseReplacement.replace(
+                  '{name}', 
+                  languageModels.find(m => m.id === selectedModel)?.name || selectedModel
+                )}
               </p>
             </div>
           )}
         </div>
         <DialogFooter className="flex justify-between">
           <Button variant="outline" onClick={handleReset}>
-            Reset to Default
+            {t.common.resetToDefault}
           </Button>
           <Button onClick={handleSave}>
-            Save Changes
+            {t.common.saveChanges}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/frontend/src/components/source/NotebookAssociations.tsx b/frontend/src/components/source/NotebookAssociations.tsx
index 1c387aa..cf037d7 100644
--- a/frontend/src/components/source/NotebookAssociations.tsx
+++ b/frontend/src/components/source/NotebookAssociations.tsx
@@ -8,6 +8,7 @@ import { Checkbox } from '@/components/ui/checkbox'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { useNotebooks } from '@/lib/hooks/use-notebooks'
 import { useAddSourcesToNotebook, useRemoveSourceFromNotebook } from '@/lib/hooks/use-sources'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface NotebookAssociationsProps {
   sourceId: string
@@ -20,6 +21,7 @@ export function NotebookAssociations({
   currentNotebookIds,
   onSave,
 }: NotebookAssociationsProps) {
+  const { t } = useTranslation()
   const [selectedNotebookIds, setSelectedNotebookIds] = useState<string[]>(currentNotebookIds)
   const [isSaving, setIsSaving] = useState(false)
 
@@ -108,10 +110,10 @@ export function NotebookAssociations({
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <BookOpen className="h-5 w-5" />
-            Notebooks
+            {t.sources.manageNotebooks}
           </CardTitle>
           <CardDescription>
-            Manage which notebooks contain this source
+            {t.sources.manageNotebooksDesc}
           </CardDescription>
         </CardHeader>
         <CardContent>
@@ -129,14 +131,14 @@ export function NotebookAssociations({
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <BookOpen className="h-5 w-5" />
-            Notebooks
+            {t.sources.manageNotebooks}
           </CardTitle>
           <CardDescription>
-            Manage which notebooks contain this source
+            {t.sources.manageNotebooksDesc}
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <p className="text-sm text-muted-foreground">No notebooks available</p>
+          <p className="text-sm text-muted-foreground">{t.sources.noNotebooksAvailable}</p>
         </CardContent>
       </Card>
     )
@@ -147,10 +149,10 @@ export function NotebookAssociations({
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <BookOpen className="h-5 w-5" />
-          Notebooks
+          {t.sources.manageNotebooks}
         </CardTitle>
         <CardDescription>
-          Manage which notebooks contain this source
+          {t.sources.manageNotebooksDesc}
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
@@ -203,7 +205,7 @@ export function NotebookAssociations({
               onClick={handleCancel}
               disabled={isSaving}
             >
-              Cancel
+              {t.common.cancel}
             </Button>
             <Button
               size="sm"
@@ -213,10 +215,10 @@ export function NotebookAssociations({
               {isSaving ? (
                 <>
                   <LoaderIcon className="mr-2 h-4 w-4 animate-spin" />
-                  Saving...
+                  {t.common.saving}...
                 </>
               ) : (
-                'Save Changes'
+                t.common.saveChanges
               )}
             </Button>
           </div>
diff --git a/frontend/src/components/source/SessionManager.tsx b/frontend/src/components/source/SessionManager.tsx
index 001a42b..3a51905 100644
--- a/frontend/src/components/source/SessionManager.tsx
+++ b/frontend/src/components/source/SessionManager.tsx
@@ -16,6 +16,8 @@ import {
   Clock
 } from 'lucide-react'
 import { formatDistanceToNow } from 'date-fns'
+import { getDateLocale } from '@/lib/utils/date-locale'
+import { useTranslation } from '@/lib/hooks/use-translation'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -48,6 +50,7 @@ export function SessionManager({
   onDeleteSession,
   loadingSessions
 }: SessionManagerProps) {
+  const { t, language } = useTranslation()
   const [isCreating, setIsCreating] = useState(false)
   const [newSessionTitle, setNewSessionTitle] = useState('')
   const [editingId, setEditingId] = useState<string | null>(null)
@@ -57,12 +60,13 @@ export function SessionManager({
   const { data: models } = useModels()
 
   // Helper to get model name from ID
+  const customModelLabel = t.common.customModel
   const getModelName = useMemo(() => {
     return (modelId: string) => {
       const model = models?.find(m => m.id === modelId)
-      return model?.name || 'Custom Model'
+      return model?.name || customModelLabel
     }
-  }, [models])
+  }, [models, customModelLabel])
 
   const handleCreateSession = () => {
     if (newSessionTitle.trim()) {
@@ -104,7 +108,7 @@ export function SessionManager({
           <CardTitle className="flex items-center justify-between">
             <span className="flex items-center gap-2">
               <MessageSquare className="h-5 w-5" />
-              Chat Sessions
+              {t.chat.sessions}
             </span>
             <Button
               size="sm"
@@ -122,7 +126,7 @@ export function SessionManager({
                 <Input
                   value={newSessionTitle}
                   onChange={(e) => setNewSessionTitle(e.target.value)}
-                  placeholder="Session title..."
+                  placeholder={t.chat.sessionTitlePlaceholder}
                   className="mb-2"
                   autoFocus
                   onKeyPress={(e) => {
@@ -131,7 +135,7 @@ export function SessionManager({
                 />
                 <div className="flex gap-2">
                   <Button size="sm" onClick={handleCreateSession}>
-                    Create
+                    {t.common.create}
                   </Button>
                   <Button
                     size="sm"
@@ -141,7 +145,7 @@ export function SessionManager({
                       setNewSessionTitle('')
                     }}
                   >
-                    Cancel
+                    {t.common.cancel}
                   </Button>
                 </div>
               </div>
@@ -149,13 +153,13 @@ export function SessionManager({
 
             {loadingSessions ? (
               <div className="text-center py-8 text-muted-foreground">
-                Loading sessions...
+                {t.common.loading}
               </div>
             ) : sessions.length === 0 ? (
               <div className="text-center py-8 text-muted-foreground">
                 <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
-                <p className="text-sm">No chat sessions yet</p>
-                <p className="text-xs mt-2">Create a session to start chatting</p>
+                <p className="text-sm">{t.chat.noSessions}</p>
+                <p className="text-xs mt-2">{t.chat.createToStart}</p>
               </div>
             ) : (
               <div className="space-y-2 pb-4">
@@ -220,11 +224,14 @@ export function SessionManager({
                         </div>
                         <div className="flex items-center gap-2 text-xs text-muted-foreground">
                           <Clock className="h-3 w-3" />
-                          {formatDistanceToNow(new Date(session.created), { addSuffix: true })}
+                          {formatDistanceToNow(new Date(session.created), {
+                            addSuffix: true,
+                            locale: getDateLocale(language)
+                          })}
                         </div>
                         {session.message_count != null && session.message_count > 0 && (
                           <Badge variant="secondary" className="mt-2 text-xs">
-                            {session.message_count} messages
+                            {t.chat.messagesCount.replace('{count}', session.message_count.toString())}
                           </Badge>
                         )}
                         {session.model_override && (
@@ -245,15 +252,15 @@ export function SessionManager({
       <AlertDialog open={!!deleteConfirmId} onOpenChange={() => setDeleteConfirmId(null)}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Delete Chat Session?</AlertDialogTitle>
+            <AlertDialogTitle>{t.chat.deleteSession}</AlertDialogTitle>
             <AlertDialogDescription>
-              This action cannot be undone. All messages in this session will be permanently deleted.
+              {t.chat.deleteSessionDesc}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t.common.cancel}</AlertDialogCancel>
             <AlertDialogAction onClick={handleDeleteConfirm}>
-              Delete
+              {t.common.delete}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
diff --git a/frontend/src/components/source/SourceDetailContent.tsx b/frontend/src/components/source/SourceDetailContent.tsx
index 8757141..a17c33d 100644
--- a/frontend/src/components/source/SourceDetailContent.tsx
+++ b/frontend/src/components/source/SourceDetailContent.tsx
@@ -15,6 +15,7 @@ import { InlineEdit } from '@/components/common/InlineEdit'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
+import { Label } from '@/components/ui/label'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import {
@@ -60,7 +61,9 @@ import {
   MessageSquare,
 } from 'lucide-react'
 import { formatDistanceToNow } from 'date-fns'
+import { getDateLocale } from '@/lib/utils/date-locale'
 import { toast } from 'sonner'
+import { useTranslation } from '@/lib/hooks/use-translation'
 import { SourceInsightDialog } from '@/components/source/SourceInsightDialog'
 import { NotebookAssociations } from '@/components/source/NotebookAssociations'
 
@@ -77,6 +80,7 @@ export function SourceDetailContent({
   onChatClick,
   onClose
 }: SourceDetailContentProps) {
+  const { t, language } = useTranslation()
   const [source, setSource] = useState<SourceDetailResponse | null>(null)
   const [insights, setInsights] = useState<SourceInsightResponse[]>([])
   const [transformations, setTransformations] = useState<Transformation[]>([])
@@ -107,11 +111,11 @@ export function SourceDetailContent({
       }
     } catch (err) {
       console.error('Failed to fetch source:', err)
-      setError('Failed to load source details')
+      setError(t.sources.loadFailed)
     } finally {
       setLoading(false)
     }
-  }, [sourceId])
+  }, [sourceId, t])
 
   const fetchInsights = useCallback(async () => {
     try {
@@ -144,7 +148,7 @@ export function SourceDetailContent({
 
   const createInsight = async () => {
     if (!selectedTransformation) {
-      toast.error('Please select a transformation')
+      toast.error(t.sources.selectTransformation)
       return
     }
 
@@ -153,12 +157,12 @@ export function SourceDetailContent({
       await insightsApi.create(sourceId, {
         transformation_id: selectedTransformation
       })
-      toast.success('Insight created successfully')
+      toast.success(t.common.success)
       await fetchInsights()
       setSelectedTransformation('')
     } catch (err) {
       console.error('Failed to create insight:', err)
-      toast.error('Failed to create insight')
+      toast.error(t.common.error)
     } finally {
       setCreatingInsight(false)
     }
@@ -171,12 +175,12 @@ export function SourceDetailContent({
     try {
       setDeletingInsight(true)
       await insightsApi.delete(insightToDelete)
-      toast.success('Insight deleted successfully')
+      toast.success(t.common.success)
       setInsightToDelete(null)
       await fetchInsights()
     } catch (err) {
       console.error('Failed to delete insight:', err)
-      toast.error('Failed to delete insight')
+      toast.error(t.common.error)
     } finally {
       setDeletingInsight(false)
     }
@@ -187,11 +191,11 @@ export function SourceDetailContent({
 
     try {
       await sourcesApi.update(sourceId, { title })
-      toast.success('Source title updated')
+      toast.success(t.common.success)
       setSource({ ...source, title })
     } catch (err) {
       console.error('Failed to update source title:', err)
-      toast.error('Failed to update source title')
+      toast.error(t.common.error)
       await fetchSource()
     }
   }
@@ -202,11 +206,11 @@ export function SourceDetailContent({
     try {
       setIsEmbedding(true)
       const response = await embeddingApi.embedContent(sourceId, 'source')
-      toast.success(response.message)
+      toast.success(response.message || t.common.success)
       await fetchSource()
     } catch (err) {
       console.error('Failed to embed content:', err)
-      toast.error('Failed to embed content')
+      toast.error(t.common.error)
     } finally {
       setIsEmbedding(false)
     }
@@ -258,14 +262,14 @@ export function SourceDetailContent({
       document.body.removeChild(link)
       window.URL.revokeObjectURL(blobUrl)
       setFileAvailable(true)
-      toast.success('Download started')
+      toast.success(t.common.success)
     } catch (err) {
       console.error('Failed to download file:', err)
       if (isAxiosError(err) && err.response?.status === 404) {
         setFileAvailable(false)
-        toast.error('Original file is no longer available on the server')
+        toast.error(t.sources.fileUnavailable)
       } else {
-        toast.error('Failed to download file')
+        toast.error(t.common.error)
       }
     } finally {
       setIsDownloadingFile(false)
@@ -290,10 +294,10 @@ export function SourceDetailContent({
     if (source?.asset?.url) {
       navigator.clipboard.writeText(source.asset.url)
       setCopied(true)
-      toast.success('URL copied to clipboard')
+      toast.success(t.sources.urlCopied)
       setTimeout(() => setCopied(false), 2000)
     }
-  }, [source])
+  }, [source, t])
 
   const handleOpenExternal = useCallback(() => {
     if (source?.asset?.url) {
@@ -327,14 +331,14 @@ export function SourceDetailContent({
   const handleDelete = async () => {
     if (!source) return
 
-    if (confirm('Are you sure you want to delete this source?')) {
+    if (confirm(t.sources.deleteSourceConfirm || t.common.confirm)) {
       try {
         await sourcesApi.delete(source.id)
-        toast.success('Source deleted successfully')
+        toast.success(t.common.success)
         onClose?.()
       } catch (error) {
         console.error('Failed to delete source:', error)
-        toast.error('Failed to delete source')
+        toast.error(t.common.error)
       }
     }
   }
@@ -350,7 +354,7 @@ export function SourceDetailContent({
   if (error || !source) {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-4 p-8">
-        <p className="text-red-500">{error || 'Source not found'}</p>
+        <p className="text-red-500">{error || t.sources.notFound}</p>
       </div>
     )
   }
@@ -366,11 +370,11 @@ export function SourceDetailContent({
               onSave={handleUpdateTitle}
               className="text-2xl font-bold"
               inputClassName="text-2xl font-bold"
-              placeholder="Source title"
-              emptyText="Untitled Source"
+              placeholder={t.sources.titlePlaceholder}
+              emptyText={t.sources.untitledSource}
             />
             <p className="mt-1 text-sm text-muted-foreground">
-              Source ID: {source.id}
+              {t.sources.id}: {source.id}
             </p>
           </div>
           <div className="flex items-center gap-2">
@@ -383,7 +387,7 @@ export function SourceDetailContent({
             {showChatButton && onChatClick && (
               <Button variant="outline" size="sm" onClick={onChatClick}>
                 <MessageSquare className="h-4 w-4 mr-2" />
-                Chat with source
+                {t.chat.chatWith.replace('{name}', t.navigation.sources)}
               </Button>
             )}
 
@@ -402,10 +406,10 @@ export function SourceDetailContent({
                     >
                       <Download className="mr-2 h-4 w-4" />
                       {fileAvailable === false
-                        ? 'File unavailable'
+                        ? t.sources.fileUnavailable
                         : isDownloadingFile
-                          ? 'Preparing download…'
-                          : 'Download File'}
+                          ? t.sources.preparing
+                          : t.sources.downloadFile}
                     </DropdownMenuItem>
                     <DropdownMenuSeparator />
                   </>
@@ -415,7 +419,7 @@ export function SourceDetailContent({
                   disabled={isEmbedding || source.embedded}
                 >
                   <Database className="mr-2 h-4 w-4" />
-                  {isEmbedding ? 'Embedding...' : source.embedded ? 'Already Embedded' : 'Embed Content'}
+                  {isEmbedding ? t.sources.embedding : source.embedded ? t.sources.alreadyEmbedded : t.sources.embedContent}
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
                 <DropdownMenuItem
@@ -423,7 +427,7 @@ export function SourceDetailContent({
                   onClick={handleDelete}
                 >
                   <Trash2 className="mr-2 h-4 w-4" />
-                  Delete Source
+                  {t.sources.deleteSource}
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -435,11 +439,11 @@ export function SourceDetailContent({
       <div className="flex-1 overflow-y-auto px-2">
         <Tabs defaultValue="content" className="w-full">
           <TabsList className="grid w-full grid-cols-3 sticky top-0 z-10">
-            <TabsTrigger value="content">Content</TabsTrigger>
+            <TabsTrigger value="content">{t.sources.content}</TabsTrigger>
             <TabsTrigger value="insights">
-              Insights {insights.length > 0 && `(${insights.length})`}
+              {t.common.insights} {insights.length > 0 && `(${insights.length})`}
             </TabsTrigger>
-            <TabsTrigger value="details">Details</TabsTrigger>
+            <TabsTrigger value="details">{t.sources.details}</TabsTrigger>
           </TabsList>
 
           <TabsContent value="content" className="mt-6">
@@ -447,7 +451,7 @@ export function SourceDetailContent({
               <CardHeader>
                 <CardTitle className="flex items-center gap-2">
                   {isYouTubeUrl && <Youtube className="h-5 w-5" />}
-                  Content
+                  {t.sources.content}
                 </CardTitle>
                 {source.asset?.url && !isYouTubeUrl && (
                   <CardDescription className="flex items-center gap-2">
@@ -469,7 +473,7 @@ export function SourceDetailContent({
                     <div className="aspect-video rounded-lg overflow-hidden bg-black">
                       <iframe
                         src={`https://www.youtube.com/embed/${youTubeVideoId}`}
-                        title="YouTube video"
+                        title={t.common.accessibility.ytVideo}
                         className="w-full h-full"
                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                         allowFullScreen
@@ -484,7 +488,7 @@ export function SourceDetailContent({
                           className="text-sm text-muted-foreground hover:underline inline-flex items-center gap-1"
                         >
                           <ExternalLink className="h-3 w-3" />
-                          Open on YouTube
+                          {t.sources.openOnYoutube}
                         </a>
                       </div>
                     )}
@@ -513,7 +517,7 @@ export function SourceDetailContent({
                       td: ({ children }) => <td className="border border-border px-3 py-2">{children}</td>,
                     }}
                   >
-                    {source.full_text || 'No content available'}
+                    {source.full_text || t.sources.noContent}
                   </ReactMarkdown>
                 </div>
               </CardContent>
@@ -526,29 +530,33 @@ export function SourceDetailContent({
                 <CardTitle className="flex items-center justify-between">
                   <span className="flex items-center gap-2">
                     <Lightbulb className="h-5 w-5" />
-                    Insights
+                    {t.common.insights}
                   </span>
                   <Badge variant="secondary">{insights.length}</Badge>
                 </CardTitle>
                 <CardDescription>
-                  AI-generated insights about this source
+                  {t.sources.insightsDesc}
                 </CardDescription>
               </CardHeader>
               <CardContent className="space-y-4">
                 {/* Create New Insight */}
                 <div className="rounded-lg border bg-muted/30 p-4">
-                  <h3 className="mb-3 text-sm font-semibold flex items-center gap-2">
+                  <Label 
+                    htmlFor="transformation-select"
+                    className="mb-3 text-sm font-semibold flex items-center gap-2"
+                  >
                     <Sparkles className="h-4 w-4" />
-                    Generate New Insight
-                  </h3>
+                    {t.sources.generateNewInsight}
+                  </Label>
                   <div className="flex gap-2">
                     <Select
+                      name="transformation"
                       value={selectedTransformation}
                       onValueChange={setSelectedTransformation}
                       disabled={creatingInsight}
                     >
-                      <SelectTrigger className="flex-1">
-                        <SelectValue placeholder="Select a transformation..." />
+                      <SelectTrigger id="transformation-select" className="flex-1">
+                        <SelectValue placeholder={t.sources.selectTransformation} />
                       </SelectTrigger>
                       <SelectContent>
                         {transformations.map((trans) => (
@@ -566,12 +574,12 @@ export function SourceDetailContent({
                       {creatingInsight ? (
                         <>
                           <LoadingSpinner className="mr-2 h-3 w-3" />
-                          Creating...
+                          {t.common.creating}
                         </>
                       ) : (
                         <>
                           <Plus className="mr-2 h-4 w-4" />
-                          Create
+                          {t.common.create}
                         </>
                       )}
                     </Button>
@@ -586,8 +594,8 @@ export function SourceDetailContent({
                 ) : insights.length === 0 ? (
                   <div className="text-center py-8 text-muted-foreground">
                     <Lightbulb className="h-12 w-12 mx-auto mb-3 opacity-50" />
-                    <p className="text-sm">No insights yet</p>
-                    <p className="text-xs mt-1">Create your first insight using a transformation above</p>
+                    <p className="text-sm">{t.sources.noInsightsYet}</p>
+                    <p className="text-xs mt-1">{t.sources.createFirstInsight}</p>
                   </div>
                 ) : (
                   <div className="space-y-3">
@@ -605,7 +613,7 @@ export function SourceDetailContent({
                         </p>
                         <div className="mt-3 flex justify-end gap-2">
                           <Button size="sm" variant="outline" onClick={() => setSelectedInsight(insight)}>
-                            View Insight
+                            {t.sources.viewInsight}
                           </Button>
                           <Button
                             size="sm"
@@ -627,7 +635,7 @@ export function SourceDetailContent({
           <TabsContent value="details" className="mt-6">
             <Card>
               <CardHeader>
-                <CardTitle>Details</CardTitle>
+                <CardTitle>{t.sources.details}</CardTitle>
               </CardHeader>
               <CardContent className="space-y-6">
                 {/* Embedding Alert */}
@@ -635,10 +643,10 @@ export function SourceDetailContent({
                   <Alert>
                     <AlertCircle className="h-4 w-4" />
                     <AlertTitle>
-                      Content Not Embedded
+                      {t.sources.notEmbeddedAlert}
                     </AlertTitle>
                     <AlertDescription>
-                      This content hasn&apos;t been embedded for vector search. Embedding enables advanced search capabilities and better content discovery.
+                      {t.sources.notEmbeddedDesc}
                       <div className="mt-3">
                         <Button
                           onClick={handleEmbedContent}
@@ -646,7 +654,7 @@ export function SourceDetailContent({
                           size="sm"
                         >
                           <Database className="mr-2 h-4 w-4" />
-                          {isEmbedding ? 'Embedding...' : 'Embed Content'}
+                          {isEmbedding ? t.sources.embedding : t.sources.embedContent}
                         </Button>
                       </div>
                     </AlertDescription>
@@ -657,7 +665,7 @@ export function SourceDetailContent({
                 <div className="space-y-4">
                   {source.asset?.url && (
                     <div>
-                      <h3 className="mb-2 text-sm font-semibold">URL</h3>
+                      <h3 className="mb-2 text-sm font-semibold">{t.common.url}</h3>
                       <div className="flex items-center gap-2">
                         <code className="flex-1 rounded bg-muted px-2 py-1 text-sm">
                           {source.asset.url}
@@ -686,7 +694,7 @@ export function SourceDetailContent({
 
                   {source.asset?.file_path && (
                     <div className="space-y-2">
-                      <h3 className="text-sm font-semibold">Uploaded File</h3>
+                      <h3 className="text-sm font-semibold">{t.sources.uploadedFile}</h3>
                       <div className="flex flex-wrap items-center gap-2">
                         <code className="rounded bg-muted px-2 py-1 text-sm">
                           {source.asset.file_path}
@@ -699,16 +707,15 @@ export function SourceDetailContent({
                         >
                           <Download className="mr-2 h-4 w-4" />
                           {fileAvailable === false
-                            ? 'Unavailable'
+                            ? t.sources.fileUnavailable
                             : isDownloadingFile
-                              ? 'Preparing…'
-                              : 'Download'}
+                              ? t.sources.preparing
+                              : t.common.download}
                         </Button>
                       </div>
                       {fileAvailable === false ? (
                         <p className="text-xs text-muted-foreground">
-                          Original file is no longer available on the server (likely removed after
-                          processing). Upload it again if you need a fresh copy.
+                          {t.sources.fileUnavailableDesc}
                         </p>
                       ) : null}
                     </div>
@@ -716,7 +723,7 @@ export function SourceDetailContent({
 
                   {source.topics && source.topics.length > 0 && (
                     <div>
-                      <h3 className="mb-2 text-sm font-semibold">Topics</h3>
+                      <h3 className="mb-2 text-sm font-semibold">{t.sources.topics}</h3>
                       <div className="flex flex-wrap gap-2">
                         {source.topics.map((topic, idx) => (
                           <Badge key={idx} variant="outline">
@@ -731,28 +738,34 @@ export function SourceDetailContent({
                 {/* Metadata */}
                 <div>
                   <div className="flex items-center justify-between mb-3">
-                    <h3 className="text-sm font-semibold">Metadata</h3>
+                    <h3 className="text-sm font-semibold">{t.sources.metadata}</h3>
                     <div className="flex items-center gap-2">
                       <Database className="h-3.5 w-3.5 text-muted-foreground" />
                       <Badge variant={source.embedded ? "default" : "secondary"} className="text-xs">
-                        {source.embedded ? "Embedded" : "Not Embedded"}
+                        {source.embedded ? t.sources.embedded : t.sources.notEmbedded}
                       </Badge>
                     </div>
                   </div>
                   <div className="grid gap-4 sm:grid-cols-2">
                     <div>
-                      <p className="text-xs font-medium text-muted-foreground">Created</p>
+                      <p className="text-xs font-medium text-muted-foreground">{t.common.created_label}</p>
                       <p className="text-sm">
-                        {formatDistanceToNow(new Date(source.created), { addSuffix: true })}
+                        {formatDistanceToNow(new Date(source.created), {
+                          addSuffix: true,
+                          locale: getDateLocale(language)
+                        })}
                       </p>
                       <p className="text-xs text-muted-foreground">
                         {new Date(source.created).toLocaleString()}
                       </p>
                     </div>
                     <div>
-                      <p className="text-xs font-medium text-muted-foreground">Updated</p>
+                      <p className="text-xs font-medium text-muted-foreground">{t.common.updated_label}</p>
                       <p className="text-sm">
-                        {formatDistanceToNow(new Date(source.updated), { addSuffix: true })}
+                        {formatDistanceToNow(new Date(source.updated), {
+                          addSuffix: true,
+                          locale: getDateLocale(language)
+                        })}
                       </p>
                       <p className="text-xs text-muted-foreground">
                         {new Date(source.updated).toLocaleString()}
@@ -784,12 +797,12 @@ export function SourceDetailContent({
         onDelete={async (insightId) => {
           try {
             await insightsApi.delete(insightId)
-            toast.success('Insight deleted successfully')
+            toast.success(t.common.success)
             setSelectedInsight(null)
             await fetchInsights()
           } catch (err) {
             console.error('Failed to delete insight:', err)
-            toast.error('Failed to delete insight')
+            toast.error(t.common.error)
           }
         }}
       />
@@ -797,20 +810,20 @@ export function SourceDetailContent({
       <AlertDialog open={!!insightToDelete} onOpenChange={() => setInsightToDelete(null)}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Delete Insight?</AlertDialogTitle>
+            <AlertDialogTitle>{t.sources.deleteInsight}</AlertDialogTitle>
             <AlertDialogDescription>
-              This action cannot be undone. This insight will be permanently deleted.
+              {t.sources.deleteInsightConfirm}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={deletingInsight}>Cancel</AlertDialogCancel>
+            <AlertDialogCancel disabled={deletingInsight}>{t.common.cancel}</AlertDialogCancel>
             <AlertDialogAction asChild>
               <Button
                 onClick={handleDeleteInsight}
                 disabled={deletingInsight}
                 variant="destructive"
               >
-                {deletingInsight ? 'Deleting...' : 'Delete'}
+                {deletingInsight ? t.common.deleting : t.common.delete}
               </Button>
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/frontend/src/components/source/SourceDialog.tsx b/frontend/src/components/source/SourceDialog.tsx
index 9654df9..d28b795 100644
--- a/frontend/src/components/source/SourceDialog.tsx
+++ b/frontend/src/components/source/SourceDialog.tsx
@@ -2,6 +2,7 @@
 
 import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
 import { SourceDetailContent } from './SourceDetailContent'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface SourceDialogProps {
   open: boolean
@@ -16,6 +17,7 @@ interface SourceDialogProps {
  * Includes a "Chat with source" button that opens the full source page in a new tab.
  */
 export function SourceDialog({ open, onOpenChange, sourceId }: SourceDialogProps) {
+  const { t } = useTranslation()
   // Ensure source ID has 'source:' prefix for API calls and routing
   const sourceIdWithPrefix = sourceId
     ? (sourceId.includes(':') ? sourceId : `source:${sourceId}`)
@@ -40,7 +42,7 @@ export function SourceDialog({ open, onOpenChange, sourceId }: SourceDialogProps
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-5xl max-h-[90vh] flex flex-col p-0">
         {/* Accessibility title (hidden visually but read by screen readers) */}
-        <DialogTitle className="sr-only">Source Details</DialogTitle>
+        <DialogTitle className="sr-only">{t.sources.detailsTitle}</DialogTitle>
 
         {/* Source detail content */}
         <div className="flex-1 overflow-y-auto min-h-0">
diff --git a/frontend/src/components/source/SourceInsightDialog.tsx b/frontend/src/components/source/SourceInsightDialog.tsx
index 35e8fb7..a82b08e 100644
--- a/frontend/src/components/source/SourceInsightDialog.tsx
+++ b/frontend/src/components/source/SourceInsightDialog.tsx
@@ -9,6 +9,7 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { useInsight } from '@/lib/hooks/use-insights'
 import { useModalManager } from '@/lib/hooks/use-modal-manager'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface SourceInsightDialogProps {
   open: boolean
@@ -24,6 +25,7 @@ interface SourceInsightDialogProps {
 }
 
 export function SourceInsightDialog({ open, onOpenChange, insight, onDelete }: SourceInsightDialogProps) {
+  const { t } = useTranslation()
   const { openModal } = useModalManager()
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
   const [isDeleting, setIsDeleting] = useState(false)
@@ -71,7 +73,7 @@ export function SourceInsightDialog({ open, onOpenChange, insight, onDelete }: S
       <DialogContent className="sm:max-w-3xl max-h-[90vh] flex flex-col">
         <DialogHeader>
           <DialogTitle className="flex items-center justify-between gap-2">
-            <span>Source Insight</span>
+            <span>{t.sources.sourceInsight}</span>
             <div className="flex items-center gap-2">
               {displayInsight?.insight_type && (
                 <Badge variant="outline" className="text-xs uppercase">
@@ -86,7 +88,7 @@ export function SourceInsightDialog({ open, onOpenChange, insight, onDelete }: S
                   className="gap-1"
                 >
                   <FileText className="h-3 w-3" />
-                  View Source
+                  {t.sources.viewSource}
                 </Button>
               )}
             </div>
@@ -96,8 +98,8 @@ export function SourceInsightDialog({ open, onOpenChange, insight, onDelete }: S
         {showDeleteConfirm ? (
           <div className="flex flex-col items-center justify-center py-8 gap-4">
             <p className="text-center text-muted-foreground">
-              Are you sure you want to delete this insight?<br />
-              <span className="text-sm">This action cannot be undone.</span>
+              {t.sources.deleteInsightConfirm.split(/[?？]/)[0]}?<br />
+              <span className="text-sm">{t.sources.deleteInsightConfirm.split(/[?？]/)[1]?.trim() || t.common.deleteForever}</span>
             </p>
             <div className="flex gap-2">
               <Button
@@ -105,14 +107,14 @@ export function SourceInsightDialog({ open, onOpenChange, insight, onDelete }: S
                 onClick={() => setShowDeleteConfirm(false)}
                 disabled={isDeleting}
               >
-                Cancel
+                {t.common.cancel}
               </Button>
               <Button
                 variant="destructive"
                 onClick={handleDelete}
                 disabled={isDeleting}
               >
-                {isDeleting ? 'Deleting...' : 'Delete'}
+                {isDeleting ? t.common.deleting : t.common.delete}
               </Button>
             </div>
           </div>
@@ -120,7 +122,7 @@ export function SourceInsightDialog({ open, onOpenChange, insight, onDelete }: S
           <div className="flex-1 overflow-y-auto min-h-0">
             {isLoading ? (
               <div className="flex items-center justify-center py-10">
-                <span className="text-sm text-muted-foreground">Loading insight…</span>
+                <span className="text-sm text-muted-foreground">{t.common.loading}</span>
               </div>
             ) : displayInsight ? (
               <div className="prose prose-sm prose-neutral dark:prose-invert max-w-none">
@@ -143,7 +145,7 @@ export function SourceInsightDialog({ open, onOpenChange, insight, onDelete }: S
                 </ReactMarkdown>
               </div>
             ) : (
-              <p className="text-sm text-muted-foreground">No insight selected.</p>
+              <p className="text-sm text-muted-foreground">{t.sources.noInsightSelected}</p>
             )}
           </div>
         )}
diff --git a/frontend/src/components/sources/AddExistingSourceDialog.tsx b/frontend/src/components/sources/AddExistingSourceDialog.tsx
index 5aae308..3291aab 100644
--- a/frontend/src/components/sources/AddExistingSourceDialog.tsx
+++ b/frontend/src/components/sources/AddExistingSourceDialog.tsx
@@ -20,6 +20,7 @@ import { searchApi } from '@/lib/api/search'
 import { sourcesApi } from '@/lib/api/sources'
 import { useSources, useAddSourcesToNotebook } from '@/lib/hooks/use-sources'
 import { SourceListResponse } from '@/lib/types/api'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 interface AddExistingSourceDialogProps {
   open: boolean
@@ -34,6 +35,7 @@ export function AddExistingSourceDialog({
   notebookId,
   onSuccess,
 }: AddExistingSourceDialogProps) {
+  const { t } = useTranslation()
   const [searchQuery, setSearchQuery] = useState('')
   const [debouncedSearchQuery] = useDebounce(searchQuery, 300)
   const [selectedSourceIds, setSelectedSourceIds] = useState<string[]>([])
@@ -184,10 +186,10 @@ export function AddExistingSourceDialog({
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Link2 className="h-5 w-5" />
-            Add Existing Sources
+            {t.sources.addExistingTitle}
           </DialogTitle>
           <DialogDescription>
-            Search and select existing sources to add to this notebook
+            {t.sources.addExistingDesc}
           </DialogDescription>
         </DialogHeader>
 
@@ -196,7 +198,7 @@ export function AddExistingSourceDialog({
           <div className="relative">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
             <Input
-              placeholder="Search sources..."
+              placeholder={t.sources.searchPlaceholder}
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               className="pl-10"
@@ -211,12 +213,12 @@ export function AddExistingSourceDialog({
             {isSearching && filteredSources.length === 0 ? (
               <div className="flex flex-col items-center justify-center h-[200px] text-muted-foreground">
                 <LoaderIcon className="h-12 w-12 mb-2 animate-spin" />
-                <p>Loading sources...</p>
+                <p>{t.common.loading}</p>
               </div>
             ) : filteredSources.length === 0 ? (
               <div className="flex flex-col items-center justify-center h-[200px] text-muted-foreground">
                 <FileText className="h-12 w-12 mb-2 opacity-50" />
-                <p>No sources found</p>
+                <p>{t.sources.noNotebooksFound}</p>
               </div>
             ) : (
               <div className="space-y-2 p-4">
@@ -247,12 +249,12 @@ export function AddExistingSourceDialog({
                           </h4>
                           {isAlreadyLinked && (
                             <Badge variant="secondary" className="text-xs shrink-0">
-                              Linked
+                              {t.common.linked}
                             </Badge>
                           )}
                         </div>
                         <p className="text-xs text-muted-foreground truncate">
-                          Added {formatDate(source.created)}
+                          {t.sources.added.replace('{date}', formatDate(source.created))}
                         </p>
                       </div>
                     </div>
@@ -265,14 +267,14 @@ export function AddExistingSourceDialog({
           {/* Truncation Warning */}
           {allSources.length >= 100 && !debouncedSearchQuery && (
             <div className="text-xs text-muted-foreground bg-muted/50 p-2 rounded-md">
-              Showing first 100 sources. Use the Search feature to find specific sources.
+              {t.sources.showingFirst100}
             </div>
           )}
 
           {/* Selection Summary */}
           {selectedSourceIds.length > 0 && (
             <div className="text-sm text-muted-foreground">
-              {selectedSourceIds.length} source{selectedSourceIds.length > 1 ? 's' : ''} selected
+              {t.sources.selectedCount.replace('{count}', selectedSourceIds.length.toString())}
             </div>
           )}
         </div>
@@ -283,7 +285,7 @@ export function AddExistingSourceDialog({
             onClick={() => onOpenChange(false)}
             disabled={addSources.isPending}
           >
-            Cancel
+            {t.common.cancel}
           </Button>
           <Button
             onClick={handleAddSelected}
@@ -292,10 +294,10 @@ export function AddExistingSourceDialog({
             {addSources.isPending ? (
               <>
                 <LoaderIcon className="mr-2 h-4 w-4 animate-spin" />
-                Adding...
+                {t.common.adding}
               </>
             ) : (
-              <>Add Selected</>
+              <>{t.common.addSelected}</>
             )}
           </Button>
         </DialogFooter>
diff --git a/frontend/src/components/sources/AddSourceDialog.tsx b/frontend/src/components/sources/AddSourceDialog.tsx
index 4db8d51..195b542 100644
--- a/frontend/src/components/sources/AddSourceDialog.tsx
+++ b/frontend/src/components/sources/AddSourceDialog.tsx
@@ -23,6 +23,7 @@ import { useTransformations } from '@/lib/hooks/use-transformations'
 import { useCreateSource } from '@/lib/hooks/use-sources'
 import { useSettings } from '@/lib/hooks/use-settings'
 import { CreateSourceRequest } from '@/lib/types/api'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 const MAX_BATCH_SIZE = 50
 
@@ -72,12 +73,6 @@ interface AddSourceDialogProps {
   defaultNotebookId?: string
 }
 
-const WIZARD_STEPS: readonly WizardStep[] = [
-  { number: 1, title: 'Source & Content', description: 'Choose type and add content' },
-  { number: 2, title: 'Organization', description: 'Select notebooks' },
-  { number: 3, title: 'Processing', description: 'Choose transformations and options' },
-]
-
 interface ProcessingState {
   message: string
   progress?: number
@@ -95,6 +90,14 @@ export function AddSourceDialog({
   onOpenChange, 
   defaultNotebookId 
 }: AddSourceDialogProps) {
+  const { t } = useTranslation()
+
+  const WIZARD_STEPS: readonly WizardStep[] = [
+    { number: 1, title: t.sources.addSource, description: t.sources.processDescription },
+    { number: 2, title: t.navigation.notebooks, description: t.notebooks.searchPlaceholder },
+    { number: 3, title: t.navigation.process, description: t.sources.processDescription },
+  ]
+
   // Simplified state management
   const [currentStep, setCurrentStep] = useState(1)
   const [processing, setProcessing] = useState(false)
@@ -385,29 +388,29 @@ export function AddSourceDialog({
 
       if (isBatchMode) {
         // Batch submission
-        setProcessingStatus({ message: `Processing ${itemCount} sources...` })
+        setProcessingStatus({ message: t.sources.processingFiles })
         const results = await submitBatch(data)
 
         // Show summary toast
         if (results.failed === 0) {
-          toast.success(`${results.success} source${results.success !== 1 ? 's' : ''} created successfully`)
+          toast.success(t.sources.batchSuccess.replace('{count}', results.success.toString()))
         } else if (results.success === 0) {
-          toast.error(`Failed to create all ${results.failed} sources`)
+          toast.error(t.sources.batchFailed.replace('{count}', results.failed.toString()))
         } else {
-          toast.warning(`${results.success} succeeded, ${results.failed} failed`)
+          toast.warning(t.sources.batchPartial.replace('{success}', results.success.toString()).replace('{failed}', results.failed.toString()))
         }
 
         handleClose()
       } else {
         // Single source submission
-        setProcessingStatus({ message: 'Submitting source for processing...' })
+        setProcessingStatus({ message: t.sources.submittingSource })
         await submitSingleSource(data)
         handleClose()
       }
     } catch (error) {
       console.error('Error creating source:', error)
       setProcessingStatus({
-        message: 'Error creating source. Please try again.',
+        message: t.common.error,
       })
       timeoutRef.current = setTimeout(() => {
         setProcessing(false)
@@ -457,12 +460,12 @@ export function AddSourceDialog({
         <DialogContent className="sm:max-w-[500px]" showCloseButton={true}>
           <DialogHeader>
             <DialogTitle>
-              {batchProgress ? 'Processing Batch' : 'Processing Source'}
+              {batchProgress ? t.sources.processingFiles : t.sources.statusProcessing}
             </DialogTitle>
             <DialogDescription>
               {batchProgress
-                ? `Processing ${batchProgress.total} sources. This may take a few moments.`
-                : 'Your source is being processed. This may take a few moments.'
+                ? t.sources.processingBatchSources.replace('{count}', batchProgress.total.toString())
+                : t.sources.processingSource
               }
             </DialogDescription>
           </DialogHeader>
@@ -471,7 +474,7 @@ export function AddSourceDialog({
             <div className="flex items-center gap-3">
               <LoaderIcon className="h-5 w-5 animate-spin text-primary" />
               <span className="text-sm text-muted-foreground">
-                {processingStatus?.message || 'Processing...'}
+                {processingStatus?.message || t.common.processing}
               </span>
             </div>
 
@@ -489,23 +492,23 @@ export function AddSourceDialog({
                   <div className="flex items-center gap-4">
                     <span className="flex items-center gap-1.5 text-green-600">
                       <CheckCircleIcon className="h-4 w-4" />
-                      {batchProgress.completed} completed
+                      {batchProgress.completed} {t.common.completed}
                     </span>
                     {batchProgress.failed > 0 && (
                       <span className="flex items-center gap-1.5 text-destructive">
                         <XCircleIcon className="h-4 w-4" />
-                        {batchProgress.failed} failed
+                        {batchProgress.failed} {t.common.failed}
                       </span>
                     )}
                   </div>
-                  <span className="text-muted-foreground">
+                   <span className="text-muted-foreground">
                     {batchProgress.completed + batchProgress.failed} / {batchProgress.total}
                   </span>
                 </div>
 
                 {batchProgress.currentItem && (
                   <p className="text-xs text-muted-foreground truncate">
-                    Current: {batchProgress.currentItem}
+                    {t.common.current}: {batchProgress.currentItem}
                   </p>
                 )}
               </>
@@ -532,9 +535,9 @@ export function AddSourceDialog({
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-[700px] p-0">
         <DialogHeader className="px-6 pt-6 pb-0">
-          <DialogTitle>Add New Source</DialogTitle>
+          <DialogTitle>{t.sources.addNew}</DialogTitle>
           <DialogDescription>
-            Add content from links, uploads, or text to your notebooks.
+            {t.sources.processDescription}
           </DialogDescription>
         </DialogHeader>
 
@@ -586,7 +589,7 @@ export function AddSourceDialog({
               variant="outline" 
               onClick={handleClose}
             >
-              Cancel
+              {t.common.cancel}
             </Button>
 
             <div className="flex gap-2">
@@ -596,7 +599,7 @@ export function AddSourceDialog({
                   variant="outline"
                   onClick={handlePrevStep}
                 >
-                  Back
+                  {t.common.back}
                 </Button>
               )}
 
@@ -608,7 +611,7 @@ export function AddSourceDialog({
                   onClick={(e) => handleNextStep(e)}
                   disabled={!currentStepValid}
                 >
-                  Next
+                  {t.common.next}
                 </Button>
               )}
 
@@ -618,7 +621,7 @@ export function AddSourceDialog({
                 disabled={!currentStepValid || createSource.isPending}
                 className="min-w-[120px]"
               >
-                {createSource.isPending ? 'Creating...' : 'Done'}
+                {createSource.isPending ? t.common.adding : t.common.done}
               </Button>
             </div>
           </div>
diff --git a/frontend/src/components/sources/SourceCard.tsx b/frontend/src/components/sources/SourceCard.tsx
index aa236f5..0adc5e0 100644
--- a/frontend/src/components/sources/SourceCard.tsx
+++ b/frontend/src/components/sources/SourceCard.tsx
@@ -26,6 +26,8 @@ import {
   Unlink
 } from 'lucide-react'
 import { useSourceStatus } from '@/lib/hooks/use-sources'
+import { useTranslation } from '@/lib/hooks/use-translation'
+import { TranslationKeys } from '@/lib/locales'
 import { cn } from '@/lib/utils'
 import { ContextToggle } from '@/components/common/ContextToggle'
 import { ContextMode } from '@/app/(dashboard)/notebooks/[id]/page'
@@ -49,53 +51,53 @@ const SOURCE_TYPE_ICONS = {
   text: FileText,
 } as const
 
-const STATUS_CONFIG = {
+const getStatusConfig = (t: TranslationKeys) => ({
   new: {
     icon: Clock,
     color: 'text-blue-600',
     bgColor: 'bg-blue-50',
     borderColor: 'border-blue-200',
-    label: 'Processing',
-    description: 'Preparing to process'
+    label: t.sources.statusProcessing,
+    description: t.sources.statusPreparingDesc
   },
   queued: {
     icon: Clock,
     color: 'text-blue-600',
     bgColor: 'bg-blue-50',
     borderColor: 'border-blue-200',
-    label: 'Queued',
-    description: 'Waiting to be processed'
+    label: t.sources.statusQueued,
+    description: t.sources.statusQueuedDesc
   },
   running: {
     icon: Loader2,
     color: 'text-blue-600',
     bgColor: 'bg-blue-50',
     borderColor: 'border-blue-200',
-    label: 'Processing',
-    description: 'Being processed'
+    label: t.sources.statusProcessing,
+    description: t.sources.statusProcessingDesc
   },
   completed: {
     icon: CheckCircle,
     color: 'text-green-600',
     bgColor: 'bg-green-50',
     borderColor: 'border-green-200',
-    label: 'Completed',
-    description: 'Successfully processed'
+    label: t.sources.statusCompleted,
+    description: t.sources.statusCompletedDesc
   },
   failed: {
     icon: AlertTriangle,
     color: 'text-red-600',
     bgColor: 'bg-red-50',
     borderColor: 'border-red-200',
-    label: 'Failed',
-    description: 'Processing failed'
+    label: t.sources.statusFailed,
+    description: t.sources.statusFailedDesc
   }
-} as const
+} as const)
 
-type SourceStatus = keyof typeof STATUS_CONFIG
+type SourceStatus = 'new' | 'queued' | 'running' | 'completed' | 'failed'
 
 function isSourceStatus(status: unknown): status is SourceStatus {
-  return typeof status === 'string' && status in STATUS_CONFIG
+  return typeof status === 'string' && ['new', 'queued', 'running', 'completed', 'failed'].includes(status)
 }
 
 function getSourceType(source: SourceListResponse): 'link' | 'upload' | 'text' {
@@ -107,16 +109,18 @@ function getSourceType(source: SourceListResponse): 'link' | 'upload' | 'text' {
 
 export function SourceCard({
   source,
+  onClick,
   onDelete,
   onRetry,
   onRemoveFromNotebook,
-  onClick,
   onRefresh,
   className,
   showRemoveFromNotebook = false,
   contextMode,
   onContextModeChange
 }: SourceCardProps) {
+  const { t } = useTranslation()
+  const statusConfigMap = getStatusConfig(t)
   
   // Only fetch status for sources that might have async processing
   const sourceWithStatus = source as SourceListResponse & { command_id?: string; status?: string }
@@ -163,12 +167,12 @@ export function SourceCard({
     }
   }, [statusData, sourceWithStatus.status, wasProcessing, onRefresh, source.id])
   
-  const statusConfig = STATUS_CONFIG[currentStatus] || STATUS_CONFIG.completed
+  const statusConfig = statusConfigMap[currentStatus] || statusConfigMap.completed
   const StatusIcon = statusConfig.icon
   const sourceType = getSourceType(source)
   const SourceTypeIcon = SOURCE_TYPE_ICONS[sourceType]
   
-  const title = source.title || 'Untitled Source'
+   const title = source.title || t.sources.untitledSource
 
   const handleRetry = () => {
     if (onRetry) {
@@ -222,13 +226,13 @@ export function SourceCard({
                     'h-3 w-3',
                     isProcessing && 'animate-spin'
                   )} />
-                  {statusLoading && shouldFetchStatus ? 'Checking...' : statusConfig.label}
+                  {statusLoading && shouldFetchStatus ? t.sources.checking : statusConfig.label}
                 </div>
 
                 {/* Source type indicator */}
                 <div className="flex items-center gap-1 text-gray-500">
                   <SourceTypeIcon className="h-3 w-3" />
-                  <span className="text-xs capitalize">{sourceType}</span>
+                  <span className="text-xs capitalize">{t.common.source}</span>
                 </div>
               </div>
             )}
@@ -255,12 +259,12 @@ export function SourceCard({
               {/* Source type badge */}
               <Badge variant="secondary" className="text-xs flex items-center gap-1">
                 <SourceTypeIcon className="h-3 w-3" />
-                {sourceType}
+                {sourceType === 'link' ? t.sources.addUrl : sourceType === 'upload' ? t.sources.uploadFile : t.sources.enterText}
               </Badge>
 
               {isCompleted && source.insights_count > 0 && (
                 <Badge variant="outline" className="text-xs">
-                  {source.insights_count} insights
+                  {t.sources.insightsCount.replace('{count}', source.insights_count.toString())}
                 </Badge>
               )}
               {source.topics && source.topics.length > 0 && isCompleted && (
@@ -314,7 +318,7 @@ export function SourceCard({
                     disabled={!onRemoveFromNotebook}
                   >
                     <Unlink className="h-4 w-4 mr-2" />
-                    Remove from Notebook
+                    {t.sources.removeFromNotebook}
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
                 </>
@@ -330,7 +334,7 @@ export function SourceCard({
                     disabled={!onRetry}
                   >
                     <RefreshCw className="h-4 w-4 mr-2" />
-                    Retry Processing
+                    {t.sources.retryProcessing}
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
                 </>
@@ -345,7 +349,7 @@ export function SourceCard({
                 className="text-red-600 focus:text-red-600"
               >
                 <Trash2 className="h-4 w-4 mr-2" />
-                Delete Source
+                {t.sources.deleteSource}
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -362,7 +366,7 @@ export function SourceCard({
               className="h-7 text-xs"
             >
               <RefreshCw className="h-3 w-3 mr-1" />
-              Retry
+              {t.sources.retry}
             </Button>
           </div>
         )}
@@ -371,7 +375,7 @@ export function SourceCard({
         {isProcessing && statusData?.processing_info?.progress && (
           <div className="mt-3 pt-2 border-t">
             <div className="flex justify-between items-center mb-1">
-              <span className="text-xs text-gray-600">Progress</span>
+            <span className="text-xs text-gray-600">{t.common.progress}</span>
               <span className="text-xs text-gray-600">
                 {Math.round(statusData.processing_info.progress as number)}%
               </span>
diff --git a/frontend/src/components/sources/steps/NotebooksStep.tsx b/frontend/src/components/sources/steps/NotebooksStep.tsx
index e9f20bf..50c9c2d 100644
--- a/frontend/src/components/sources/steps/NotebooksStep.tsx
+++ b/frontend/src/components/sources/steps/NotebooksStep.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { FormSection } from "@/components/ui/form-section"
+import { useTranslation } from "@/lib/hooks/use-translation"
 import { CheckboxList } from "@/components/ui/checkbox-list"
 import { NotebookResponse } from "@/lib/types/api"
 
@@ -17,6 +18,7 @@ export function NotebooksStep({
   onToggleNotebook,
   loading = false
 }: NotebooksStepProps) {
+  const { t } = useTranslation()
   const notebookItems = notebooks.map((notebook) => ({
     id: notebook.id,
     title: notebook.name,
@@ -26,15 +28,15 @@ export function NotebooksStep({
   return (
     <div className="space-y-6">
       <FormSection
-        title="Select Notebooks (optional)"
-        description="Choose which notebooks should contain this source. You can select multiple notebooks or leave this empty."
+        title={`${t.notebooks.title} (${t.common.optional})`}
+        description={t.sources.addExistingDesc}
       >
         <CheckboxList
           items={notebookItems}
           selectedIds={selectedNotebooks}
           onToggle={onToggleNotebook}
           loading={loading}
-          emptyMessage="No notebooks found."
+          emptyMessage={t.sources.noNotebooksFound}
         />
       </FormSection>
     </div>
diff --git a/frontend/src/components/sources/steps/ProcessingStep.tsx b/frontend/src/components/sources/steps/ProcessingStep.tsx
index ad68410..a8cba9b 100644
--- a/frontend/src/components/sources/steps/ProcessingStep.tsx
+++ b/frontend/src/components/sources/steps/ProcessingStep.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { Control, Controller } from "react-hook-form"
+import { useTranslation } from "@/lib/hooks/use-translation"
 import { FormSection } from "@/components/ui/form-section"
 import { CheckboxList } from "@/components/ui/checkbox-list"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -36,6 +37,7 @@ export function ProcessingStep({
   loading = false,
   settings
 }: ProcessingStepProps) {
+  const { t } = useTranslation()
   const transformationItems = transformations.map((transformation) => ({
     id: transformation.id,
     title: transformation.title,
@@ -45,21 +47,21 @@ export function ProcessingStep({
   return (
     <div className="space-y-8">
       <FormSection
-        title="Transformations (optional)"
-        description="Apply AI transformations to analyze and extract insights from your content."
+        title={`${t.navigation.transformations} (${t.common.optional})`}
+        description={t.sources.processDescription}
       >
         <CheckboxList
           items={transformationItems}
           selectedIds={selectedTransformations}
           onToggle={onToggleTransformation}
           loading={loading}
-          emptyMessage="No transformations found."
+          emptyMessage={t.common.noMatches}
         />
       </FormSection>
 
       <FormSection
-        title="Processing Settings"
-        description="Configure how your source will be processed and stored."
+        title={t.navigation.settings}
+        description={t.sources.processDescription}
       >
         <div className="space-y-4">
           {settings?.default_embedding_option === 'ask' && (
@@ -67,16 +69,20 @@ export function ProcessingStep({
               control={control}
               name="embed"
               render={({ field }) => (
-                <label className="flex items-start gap-3 cursor-pointer p-3 rounded-md hover:bg-muted">
+                <label 
+                  htmlFor="enable-embedding"
+                  className="flex items-start gap-3 cursor-pointer p-3 rounded-md hover:bg-muted"
+                >
                   <Checkbox
+                    id="enable-embedding"
                     checked={field.value}
                     onCheckedChange={field.onChange}
                     className="mt-0.5"
                   />
                   <div className="flex-1">
-                    <span className="text-sm font-medium block">Enable embedding for search</span>
+                    <span className="text-sm font-medium block">{t.sources.enableEmbedding}</span>
                     <p className="text-xs text-muted-foreground mt-1">
-                      Allows this source to be found in vector searches and AI queries
+                      {t.sources.embeddingDesc}
                     </p>
                   </div>
                 </label>
@@ -89,10 +95,10 @@ export function ProcessingStep({
               <div className="flex items-start gap-3">
                 <div className="w-4 h-4 bg-primary rounded-full mt-0.5 flex-shrink-0"></div>
                 <div className="flex-1">
-                  <span className="text-sm font-medium block text-primary">Embedding enabled automatically</span>
+                  <span className="text-sm font-medium block text-primary">{t.sources.embeddingAlways}</span>
                   <p className="text-xs text-primary mt-1">
-                    Your settings are configured to always embed content for vector search.
-                    You can change this in <span className="font-medium">Settings</span>.
+                    {t.sources.embeddingAlwaysDesc}
+                    {t.sources.changeInSettings} <span className="font-medium">{t.navigation.settings}</span>.
                   </p>
                 </div>
               </div>
@@ -104,10 +110,10 @@ export function ProcessingStep({
               <div className="flex items-start gap-3">
                 <div className="w-4 h-4 bg-muted-foreground rounded-full mt-0.5 flex-shrink-0"></div>
                 <div className="flex-1">
-                  <span className="text-sm font-medium block text-foreground">Embedding disabled</span>
+                  <span className="text-sm font-medium block text-foreground">{t.sources.embeddingNever}</span>
                   <p className="text-xs text-muted-foreground mt-1">
-                    Your settings are configured to skip embedding. Vector search won&apos;t be available for this source.
-                    You can change this in <span className="font-medium">Settings</span>.
+                    {t.sources.embeddingNeverDesc}
+                    {t.sources.changeInSettings} <span className="font-medium">{t.navigation.settings}</span>.
                   </p>
                 </div>
               </div>
diff --git a/frontend/src/components/sources/steps/SourceTypeStep.tsx b/frontend/src/components/sources/steps/SourceTypeStep.tsx
index 8fb83dd..349ff2c 100644
--- a/frontend/src/components/sources/steps/SourceTypeStep.tsx
+++ b/frontend/src/components/sources/steps/SourceTypeStep.tsx
@@ -3,6 +3,7 @@
 import { useMemo } from "react"
 import { Control, FieldErrors, UseFormRegister, useWatch } from "react-hook-form"
 import { FileIcon, LinkIcon, FileTextIcon } from "lucide-react"
+import { useTranslation } from "@/lib/hooks/use-translation"
 import { FormSection } from "@/components/ui/form-section"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Input } from "@/components/ui/input"
@@ -62,24 +63,26 @@ export function parseAndValidateUrls(text: string): {
   return { valid, invalid }
 }
 
-const SOURCE_TYPES = [
+import { TranslationKeys } from '@/lib/locales'
+
+const getSourceTypes = (t: TranslationKeys) => [
   {
     value: 'link' as const,
-    label: 'Link',
+    label: t.sources.addUrl,
     icon: LinkIcon,
-    description: 'Add a web page or URL',
+    description: t.sources.processDescription,
   },
   {
     value: 'upload' as const,
-    label: 'Upload',
+    label: t.sources.uploadFile,
     icon: FileIcon,
-    description: 'Upload a document or file',
+    description: t.sources.processDescription,
   },
   {
     value: 'text' as const,
-    label: 'Text',
+    label: t.sources.enterText,
     icon: FileTextIcon,
-    description: 'Add text content directly',
+    description: t.sources.processDescription,
   },
 ]
 
@@ -94,6 +97,7 @@ interface SourceTypeStepProps {
 const MAX_BATCH_SIZE = 50
 
 export function SourceTypeStep({ control, register, errors, urlValidationErrors, onClearUrlErrors }: SourceTypeStepProps) {
+  const { t } = useTranslation()
   // Watch the selected type and inputs to detect batch mode
   const selectedType = useWatch({ control, name: 'type' })
   const urlInput = useWatch({ control, name: 'url' })
@@ -125,8 +129,8 @@ export function SourceTypeStep({ control, register, errors, urlValidationErrors,
   return (
     <div className="space-y-6">
       <FormSection
-        title="Source Type"
-        description="Choose how you want to add your content"
+        title={t.sources.title}
+        description={t.sources.processDescription}
       >
         <Controller
           control={control}
@@ -138,7 +142,7 @@ export function SourceTypeStep({ control, register, errors, urlValidationErrors,
               className="w-full"
             >
               <TabsList className="grid w-full grid-cols-3">
-                {SOURCE_TYPES.map((type) => {
+                {getSourceTypes(t).map((type) => {
                   const Icon = type.icon
                   return (
                     <TabsTrigger key={type.value} value={type.value} className="gap-2">
@@ -149,7 +153,7 @@ export function SourceTypeStep({ control, register, errors, urlValidationErrors,
                 })}
               </TabsList>
               
-              {SOURCE_TYPES.map((type) => (
+              {getSourceTypes(t).map((type) => (
                 <TabsContent key={type.value} value={type.value} className="mt-4">
                   <p className="text-sm text-muted-foreground mb-4">{type.description}</p>
                   
@@ -157,11 +161,11 @@ export function SourceTypeStep({ control, register, errors, urlValidationErrors,
                   {type.value === 'link' && (
                     <div>
                       <div className="flex items-center justify-between mb-2">
-                        <Label htmlFor="url">URL(s) *</Label>
+                        <Label htmlFor="url">{t.sources.urlLabel}</Label>
                         {urlCount > 0 && (
                           <Badge variant={isOverLimit ? "destructive" : "secondary"}>
-                            {urlCount} URL{urlCount !== 1 ? 's' : ''}
-                            {isOverLimit && ` (max ${MAX_BATCH_SIZE})`}
+                            {t.sources.urlsCount.replace('{count}', urlCount.toString())}
+                            {isOverLimit && ` (${t.sources.maxItems.replace('{count}', MAX_BATCH_SIZE.toString())})`}
                           </Badge>
                         )}
                       </div>
@@ -170,12 +174,12 @@ export function SourceTypeStep({ control, register, errors, urlValidationErrors,
                         {...register('url', {
                           onChange: () => onClearUrlErrors?.()
                         })}
-                        placeholder="Enter URLs, one per line&#10;https://example.com/article1&#10;https://example.com/article2"
+                        placeholder={t.sources.enterUrlsPlaceholder}
                         rows={urlCount > 1 ? 6 : 2}
                         className="font-mono text-sm"
                       />
                       <p className="text-xs text-muted-foreground mt-1">
-                        Paste multiple URLs (one per line) to batch import
+                        {t.sources.batchUrlHint}
                       </p>
                       {errors.url && (
                         <p className="text-sm text-destructive mt-1">{errors.url.message}</p>
@@ -183,20 +187,20 @@ export function SourceTypeStep({ control, register, errors, urlValidationErrors,
                       {urlValidationErrors && urlValidationErrors.length > 0 && (
                         <div className="mt-2 p-3 bg-destructive/10 rounded-md border border-destructive/20">
                           <p className="text-sm font-medium text-destructive mb-2">
-                            Invalid URLs detected:
+                            {t.sources.invalidUrlsDetected}
                           </p>
                           <ul className="space-y-1">
                             {urlValidationErrors.map((error, idx) => (
                               <li key={idx} className="text-xs text-destructive flex items-start gap-2">
                                 <span className="font-mono bg-destructive/20 px-1 rounded">
-                                  Line {error.line}
+                                  {t.sources.lineLabel.replace('{line}', error.line.toString())}
                                 </span>
                                 <span className="truncate">{error.url}</span>
                               </li>
                             ))}
                           </ul>
                           <p className="text-xs text-muted-foreground mt-2">
-                            Please fix or remove invalid URLs to continue
+                            {t.sources.fixInvalidUrls}
                           </p>
                         </div>
                       )}
@@ -206,11 +210,11 @@ export function SourceTypeStep({ control, register, errors, urlValidationErrors,
                   {type.value === 'upload' && (
                     <div>
                       <div className="flex items-center justify-between mb-2">
-                        <Label htmlFor="file">File(s) *</Label>
+                        <Label htmlFor="file">{t.sources.fileLabel}</Label>
                         {fileCount > 0 && (
                           <Badge variant={isOverLimit ? "destructive" : "secondary"}>
-                            {fileCount} file{fileCount !== 1 ? 's' : ''}
-                            {isOverLimit && ` (max ${MAX_BATCH_SIZE})`}
+                            {t.sources.filesCount.replace('{count}', fileCount.toString())}
+                            {isOverLimit && ` (${t.sources.maxItems.replace('{count}', MAX_BATCH_SIZE.toString())})`}
                           </Badge>
                         )}
                       </div>
@@ -222,11 +226,11 @@ export function SourceTypeStep({ control, register, errors, urlValidationErrors,
                         accept=".pdf,.doc,.docx,.pptx,.ppt,.xlsx,.xls,.txt,.md,.epub,.mp4,.avi,.mov,.wmv,.mp3,.wav,.m4a,.aac,.jpg,.jpeg,.png,.tiff,.zip,.tar,.gz,.html"
                       />
                       <p className="text-xs text-muted-foreground mt-1">
-                        Select multiple files to batch import. Supported: Documents (PDF, DOC, DOCX, PPT, XLS, EPUB, TXT, MD), Media (MP4, MP3, WAV, M4A), Images (JPG, PNG)
+                        {t.sources.selectMultipleFilesHint}
                       </p>
                       {fileCount > 1 && fileInput instanceof FileList && (
                         <div className="mt-2 p-3 bg-muted rounded-md">
-                          <p className="text-xs font-medium mb-2">Selected files:</p>
+                          <p className="text-xs font-medium mb-2">{t.sources.selectedFiles}</p>
                           <ul className="space-y-1 max-h-32 overflow-y-auto">
                             {Array.from(fileInput).map((file, idx) => (
                               <li key={idx} className="text-xs text-muted-foreground flex items-center gap-2">
@@ -245,7 +249,7 @@ export function SourceTypeStep({ control, register, errors, urlValidationErrors,
                       )}
                       {isOverLimit && selectedType === 'upload' && (
                         <p className="text-sm text-destructive mt-1">
-                          Maximum {MAX_BATCH_SIZE} files allowed per batch
+                          {t.sources.maxFilesAllowed.replace('{count}', MAX_BATCH_SIZE.toString())}
                         </p>
                       )}
                     </div>
@@ -253,11 +257,11 @@ export function SourceTypeStep({ control, register, errors, urlValidationErrors,
                   
                   {type.value === 'text' && (
                     <div>
-                      <Label htmlFor="content" className="mb-2 block">Text Content *</Label>
+                      <Label htmlFor="content" className="mb-2 block">{t.sources.textContentLabel}</Label>
                       <Textarea
                         id="content"
                         {...register('content')}
-                        placeholder="Paste or type your content here..."
+                        placeholder={t.sources.textPlaceholder}
                         rows={6}
                       />
                       {errors.content && (
@@ -278,16 +282,18 @@ export function SourceTypeStep({ control, register, errors, urlValidationErrors,
       {/* Hide title field in batch mode - titles will be auto-generated */}
       {!isBatchMode && (
         <FormSection
-          title={selectedType === 'text' ? "Title *" : "Title (optional)"}
+          htmlFor="source-title"
+          title={selectedType === 'text' ? `${t.common.title} *` : `${t.common.title} (${t.common.optional})`}
           description={selectedType === 'text'
-            ? "A title is required for text content"
-            : "If left empty, a title will be generated from the content"
+            ? t.sources.titleRequired
+            : t.sources.titleGenerated
           }
         >
           <Input
-            id="title"
+            id="source-title"
             {...register('title')}
-            placeholder="Give your source a descriptive title"
+            placeholder={t.sources.titlePlaceholder}
+            autoComplete="off"
           />
           {errors.title && (
             <p className="text-sm text-destructive mt-1">{errors.title.message}</p>
@@ -299,14 +305,14 @@ export function SourceTypeStep({ control, register, errors, urlValidationErrors,
       {isBatchMode && (
         <div className="p-4 bg-primary/5 border border-primary/20 rounded-lg">
           <div className="flex items-center gap-2 mb-2">
-            <Badge variant="default">Batch Mode</Badge>
+            <Badge variant="default">{t.common.batchMode}</Badge>
             <span className="text-sm font-medium">
-              {itemCount} {selectedType === 'link' ? 'URLs' : 'files'} will be processed
+              {t.sources.batchCount.replace('{count}', itemCount.toString()).replace('{type}', selectedType === 'link' ? t.sources.addUrl : t.sources.uploadFile)}
             </span>
           </div>
           <p className="text-xs text-muted-foreground">
-            Titles will be automatically generated for each source.
-            The same notebooks and transformations will be applied to all items.
+            {t.sources.batchTitlesAuto}
+            {t.sources.batchCommonSettings}
           </p>
         </div>
       )}
diff --git a/frontend/src/components/ui/alert-dialog.tsx b/frontend/src/components/ui/alert-dialog.tsx
index 0863e40..a9ba722 100644
--- a/frontend/src/components/ui/alert-dialog.tsx
+++ b/frontend/src/components/ui/alert-dialog.tsx
@@ -53,6 +53,7 @@ function AlertDialogContent({
       <AlertDialogOverlay />
       <AlertDialogPrimitive.Content
         data-slot="alert-dialog-content"
+        aria-describedby={undefined}
         className={cn(
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
           className
diff --git a/frontend/src/components/ui/checkbox-list.tsx b/frontend/src/components/ui/checkbox-list.tsx
index bac51ed..a990439 100644
--- a/frontend/src/components/ui/checkbox-list.tsx
+++ b/frontend/src/components/ui/checkbox-list.tsx
@@ -59,9 +59,12 @@ export function CheckboxList({
           {items.map((item) => (
             <label
               key={item.id}
+              htmlFor={`checkbox-${item.id}`}
               className="flex items-start gap-3 cursor-pointer hover:bg-muted p-2 rounded-md -m-2 transition-colors"
             >
               <Checkbox
+                id={`checkbox-${item.id}`}
+                name={`checkbox-${item.id}`}
                 checked={selectedIds.includes(item.id)}
                 onCheckedChange={() => onToggle(item.id)}
                 className="mt-0.5"
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index fd68a08..eb82979 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -2,7 +2,8 @@
 
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import { X } from "lucide-react"
+import { useTranslation } from "@/lib/hooks/use-translation"
 
 import { cn } from "@/lib/utils"
 
@@ -46,19 +47,21 @@ function DialogOverlay({
   )
 }
 
-function DialogContent({
+const DialogContent = ({
   className,
   children,
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean
-}) {
+}) => {
+  const { t } = useTranslation()
   return (
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"
+        aria-describedby={undefined}
         className={cn(
             "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out 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]:pointer-events-none fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-[calc(100%-2rem)]",
           className
@@ -67,12 +70,9 @@ function DialogContent({
       >
         {children}
         {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
+          <DialogPrimitive.Close className="absolute right-4 top-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">{t?.common?.close || 'Close'}</span>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Content>
diff --git a/frontend/src/components/ui/form-section.tsx b/frontend/src/components/ui/form-section.tsx
index e6e746b..4264c21 100644
--- a/frontend/src/components/ui/form-section.tsx
+++ b/frontend/src/components/ui/form-section.tsx
@@ -9,20 +9,28 @@ interface FormSectionProps {
   description?: string
   children: ReactNode
   className?: string
+  htmlFor?: string
 }
 
 export function FormSection({
   title,
   description,
   children,
-  className
+  className,
+  htmlFor
 }: FormSectionProps) {
   return (
     <div className={cn("mb-6 last:mb-0", className)}>
       <div className="mb-4">
-        <Label className="text-base font-medium block mb-1">
-          {title}
-        </Label>
+        {htmlFor ? (
+          <Label htmlFor={htmlFor} className="text-base font-medium block mb-1">
+            {title}
+          </Label>
+        ) : (
+          <h3 className="text-base font-medium block mb-1">
+            {title}
+          </h3>
+        )}
         {description && (
           <p className="text-sm text-muted-foreground">
             {description}
diff --git a/frontend/src/components/ui/markdown-editor.tsx b/frontend/src/components/ui/markdown-editor.tsx
index 29ab5b4..891bb75 100644
--- a/frontend/src/components/ui/markdown-editor.tsx
+++ b/frontend/src/components/ui/markdown-editor.tsx
@@ -15,11 +15,13 @@ export interface MarkdownEditorProps {
   height?: number
   preview?: 'live' | 'edit' | 'preview'
   hideToolbar?: boolean
+  textareaId?: string
+  name?: string
   className?: string
 }
 
 export const MarkdownEditor = forwardRef<HTMLDivElement, MarkdownEditorProps>(
-  ({ value = '', onChange, placeholder, height = 300, preview = 'live', hideToolbar = false, className }, ref) => {
+  ({ value = '', onChange, placeholder, height = 300, preview = 'live', hideToolbar = false, className, textareaId, name }, ref) => {
     return (
       <div className={className} ref={ref}>
         <MDEditor
@@ -30,6 +32,8 @@ export const MarkdownEditor = forwardRef<HTMLDivElement, MarkdownEditorProps>(
           hideToolbar={hideToolbar}
           textareaProps={{
             placeholder: placeholder || 'Enter markdown...',
+            id: textareaId,
+            name: name,
           }}
           data-color-mode="light"
         />
diff --git a/frontend/src/lib/config.test.ts b/frontend/src/lib/config.test.ts
new file mode 100644
index 0000000..e6bf901
--- /dev/null
+++ b/frontend/src/lib/config.test.ts
@@ -0,0 +1,100 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { getApiUrl, resetConfig } from './config'
+
+describe('Config Priority', () => {
+  const originalEnv = process.env
+  const originalFetch = global.fetch
+  const fetchMock = vi.fn()
+
+  beforeEach(() => {
+    vi.resetModules()
+    resetConfig()
+    process.env = { ...originalEnv }
+    fetchMock.mockReset()
+    global.fetch = fetchMock
+  })
+
+  afterEach(() => {
+    process.env = originalEnv
+    global.fetch = originalFetch
+  })
+
+  it('should prioritize runtime config over everything else', async () => {
+    // Setup: Env var set, Runtime config returns explicit value
+    process.env.NEXT_PUBLIC_API_URL = 'http://env-url.com'
+    
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ apiUrl: 'http://runtime-url.com' }),
+    } as Response)
+
+    // Mock the second fetch call (api/config check)
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ version: '1.0.0' }),
+    } as Response)
+
+    const url = await getApiUrl()
+    expect(url).toBe('http://runtime-url.com')
+  })
+
+  it('should fall back to env var if runtime config returns empty/null', async () => {
+    // Setup: Env var set, Runtime config returns empty string (simulating not set)
+    process.env.NEXT_PUBLIC_API_URL = 'http://env-url.com'
+    
+    // First fetch: /config returns empty apiUrl
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ apiUrl: '' }),
+    } as Response)
+
+    // Second fetch: api/config check using env url
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ version: '1.0.0' }),
+    } as Response)
+
+    const url = await getApiUrl()
+    expect(url).toBe('http://env-url.com')
+  })
+
+  it('should fall back to env var if runtime config returns empty object', async () => {
+    // Setup: Env var set, Runtime config returns empty object
+    process.env.NEXT_PUBLIC_API_URL = 'http://env-url.com'
+    
+    // First fetch: /config returns {}
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({}), // Missing apiUrl
+    } as Response)
+
+    // Second fetch: api/config check using env url
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ version: '1.0.0' }),
+    } as Response)
+
+    const url = await getApiUrl()
+    expect(url).toBe('http://env-url.com')
+  })
+
+  it('should use default (relative path) if both runtime and env are missing', async () => {
+    // Setup: Env var NOT set, Runtime config returns empty
+    delete process.env.NEXT_PUBLIC_API_URL
+    
+    // First fetch: /config returns empty
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ apiUrl: '' }),
+    } as Response)
+
+    // Second fetch: api/config check using default relative path
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ version: '1.0.0' }),
+    } as Response)
+
+    const url = await getApiUrl()
+    expect(url).toBe('')
+  })
+})
diff --git a/frontend/src/lib/config.ts b/frontend/src/lib/config.ts
index 3fd2f8b..ca52597 100644
--- a/frontend/src/lib/config.ts
+++ b/frontend/src/lib/config.ts
@@ -57,60 +57,61 @@ export async function getConfig(): Promise<AppConfig> {
  * Fetch configuration from the API or use defaults.
  */
 async function fetchConfig(): Promise<AppConfig> {
-  console.log('🔧 [Config] Starting configuration detection...')
-  console.log('🔧 [Config] Build time:', BUILD_TIME)
+  const isDev = process.env.NODE_ENV === 'development'
+  
+  if (isDev) {
+    console.log('🔧 [Config] Starting configuration detection...')
+    console.log('🔧 [Config] Build time:', BUILD_TIME)
+  }
 
   // STEP 1: Try to get runtime config from Next.js server-side endpoint
   // This allows API_URL to be set at runtime (not baked into build)
   // Note: Endpoint is at /config (not /api/config) to avoid reverse proxy conflicts
   let runtimeApiUrl: string | null = null
   try {
-    console.log('🔧 [Config] Attempting to fetch runtime config from /config endpoint...')
+    if (isDev) console.log('🔧 [Config] Attempting to fetch runtime config from /config endpoint...')
     const runtimeResponse = await fetch('/config', {
       cache: 'no-store',
     })
     if (runtimeResponse.ok) {
       const runtimeData = await runtimeResponse.json()
       runtimeApiUrl = runtimeData.apiUrl
-      console.log('✅ [Config] Runtime API URL from server:', runtimeApiUrl)
+      // Treat empty string as "not set" to allow fallback to env var or default
+      if (runtimeApiUrl === '') {
+        runtimeApiUrl = null
+      }
+      if (isDev) console.log('✅ [Config] Runtime API URL from server:', runtimeApiUrl)
     } else {
-      console.log('⚠️ [Config] Runtime config endpoint returned status:', runtimeResponse.status)
+      if (isDev) console.log('⚠️ [Config] Runtime config endpoint returned status:', runtimeResponse.status)
     }
   } catch (error) {
-    console.log('⚠️ [Config] Could not fetch runtime config:', error)
+    if (isDev) console.log('⚠️ [Config] Could not fetch runtime config:', error)
   }
 
   // STEP 2: Fallback to build-time environment variable
   const envApiUrl = process.env.NEXT_PUBLIC_API_URL
-  console.log('🔧 [Config] NEXT_PUBLIC_API_URL from build:', envApiUrl || '(not set)')
+  if (isDev) console.log('🔧 [Config] NEXT_PUBLIC_API_URL from build:', envApiUrl || '(not set)')
 
-  // STEP 3: Smart default - infer API URL from current frontend URL
-  // If frontend is at http://10.20.30.20:8502, API should be at http://10.20.30.20:5055
-  let defaultApiUrl = 'http://localhost:5055'
+  // STEP 3: Smart default - prefer relative path to use Next.js Rewrites
+  // This avoids CORS issues and port mapping complexities by proxying through Next.js
+  const defaultApiUrl = ''
 
-  if (typeof window !== 'undefined') {
-    const hostname = window.location.hostname
-    const protocol = window.location.protocol
-    console.log('🔧 [Config] Current frontend URL:', `${protocol}//${hostname}${window.location.port ? ':' + window.location.port : ''}`)
-
-    // If not localhost, use the same hostname with port 5055
-    if (hostname !== 'localhost' && hostname !== '127.0.0.1') {
-      defaultApiUrl = `${protocol}//${hostname}:5055`
-      console.log('🔧 [Config] Detected remote hostname, using:', defaultApiUrl)
-    } else {
-      console.log('🔧 [Config] Detected localhost, using:', defaultApiUrl)
-    }
+  if (typeof window !== 'undefined' && isDev) {
+      console.log('🔧 [Config] Using relative path (rewrites) as default')
   }
 
   // Priority: Runtime config > Build-time env var > Smart default
-  const baseUrl = runtimeApiUrl || envApiUrl || defaultApiUrl
-  console.log('🔧 [Config] Final base URL to try:', baseUrl)
-  console.log('🔧 [Config] Selection priority: runtime=' + (runtimeApiUrl ? '✅' : '❌') +
-              ', build-time=' + (envApiUrl ? '✅' : '❌') +
-              ', smart-default=' + (!runtimeApiUrl && !envApiUrl ? '✅' : '❌'))
+  // Note: runtimeApiUrl must be checked against null explicitly as empty string might be valid if intended (though we treat '' as null above)
+  const baseUrl = runtimeApiUrl !== null && runtimeApiUrl !== undefined ? runtimeApiUrl : (envApiUrl || defaultApiUrl)
+  if (isDev) {
+    console.log('🔧 [Config] Final base URL to try:', baseUrl)
+    console.log('🔧 [Config] Selection priority: runtime=' + (runtimeApiUrl ? '✅' : '❌') +
+                ', build-time=' + (envApiUrl ? '✅' : '❌') +
+                ', smart-default=' + (!runtimeApiUrl && !envApiUrl ? '✅' : '❌'))
+  }
 
   try {
-    console.log('🔧 [Config] Fetching backend config from:', `${baseUrl}/api/config`)
+    if (isDev) console.log('🔧 [Config] Fetching backend config from:', `${baseUrl}/api/config`)
     // Try to fetch runtime config from backend API
     const response = await fetch(`${baseUrl}/api/config`, {
       cache: 'no-store',
@@ -126,7 +127,7 @@ async function fetchConfig(): Promise<AppConfig> {
         hasUpdate: data.hasUpdate || false,
         dbStatus: data.dbStatus, // Can be undefined for old backends
       }
-      console.log('✅ [Config] Successfully loaded API config:', config)
+      if (isDev) console.log('✅ [Config] Successfully loaded API config:', config)
       return config
     } else {
       // Don't log error here - ConnectionGuard will display it
diff --git a/frontend/src/lib/hooks/use-ask.ts b/frontend/src/lib/hooks/use-ask.ts
index 8252217..d0a6f27 100644
--- a/frontend/src/lib/hooks/use-ask.ts
+++ b/frontend/src/lib/hooks/use-ask.ts
@@ -2,6 +2,8 @@
 
 import { useState, useCallback } from 'react'
 import { toast } from 'sonner'
+import { useTranslation } from '@/lib/hooks/use-translation'
+import { getApiErrorKey } from '@/lib/utils/error-handler'
 import { searchApi } from '@/lib/api/search'
 import { AskStreamEvent } from '@/lib/types/search'
 
@@ -25,6 +27,7 @@ interface AskState {
 }
 
 export function useAsk() {
+  const { t } = useTranslation()
   const [state, setState] = useState<AskState>({
     isStreaming: false,
     strategy: null,
@@ -36,12 +39,12 @@ export function useAsk() {
   const sendAsk = useCallback(async (question: string, models: AskModels) => {
     // Validate inputs
     if (!question.trim()) {
-      toast.error('Please enter a question')
+      toast.error(t('apiErrors.pleaseEnterQuestion'))
       return
     }
 
     if (!models.strategy || !models.answer || !models.finalAnswer) {
-      toast.error('Please configure all required models')
+      toast.error(t('apiErrors.pleaseConfigureModels'))
       return
     }
 
@@ -130,7 +133,8 @@ export function useAsk() {
       setState(prev => ({ ...prev, isStreaming: false }))
 
     } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred'
+      const err = error as { message?: string }
+      const errorMessage = err.message || 'An unexpected error occurred'
       console.error('Ask error:', error)
 
       setState(prev => ({
@@ -139,11 +143,11 @@ export function useAsk() {
         error: errorMessage
       }))
 
-      toast.error('Ask failed', {
-        description: errorMessage
+      toast.error(t('apiErrors.askFailed'), {
+        description: t(getApiErrorKey(errorMessage))
       })
     }
-  }, [])
+  }, [t])
 
   const reset = useCallback(() => {
     setState({
diff --git a/frontend/src/lib/hooks/use-modal-manager.test.ts b/frontend/src/lib/hooks/use-modal-manager.test.ts
new file mode 100644
index 0000000..c848233
--- /dev/null
+++ b/frontend/src/lib/hooks/use-modal-manager.test.ts
@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { renderHook, act } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { useModalManager } from './use-modal-manager'
+import { useRouter, useSearchParams, usePathname } from 'next/navigation'
+
+// Mock next/navigation
+vi.mock('next/navigation', () => ({
+  useRouter: vi.fn(),
+  useSearchParams: vi.fn(),
+  usePathname: vi.fn(),
+}))
+
+describe('useModalManager', () => {
+  const pushMock = vi.fn()
+  const pathnameMock = '/test-path'
+  
+  beforeEach(() => {
+    vi.mocked(useRouter).mockReturnValue({ push: pushMock } as any)
+    vi.mocked(usePathname).mockReturnValue(pathnameMock)
+    pushMock.mockClear()
+  })
+
+  it('should return null modal state when no params present', () => {
+    vi.mocked(useSearchParams).mockReturnValue(new URLSearchParams() as any)
+    const { result } = renderHook(() => useModalManager())
+    
+    expect(result.current.modalType).toBeNull()
+    expect(result.current.modalId).toBeNull()
+    expect(result.current.isOpen).toBe(false)
+  })
+
+  it('should read modal state from URL params', () => {
+    vi.mocked(useSearchParams).mockReturnValue(new URLSearchParams('modal=note&id=123') as any)
+    const { result } = renderHook(() => useModalManager())
+    
+    expect(result.current.modalType).toBe('note')
+    expect(result.current.modalId).toBe('123')
+    expect(result.current.isOpen).toBe(true)
+  })
+
+  it('should call router.push when opening a modal', () => {
+    vi.mocked(useSearchParams).mockReturnValue(new URLSearchParams() as any)
+    const { result } = renderHook(() => useModalManager())
+    
+    act(() => {
+      result.current.openModal('source', 'abc')
+    })
+    
+    expect(pushMock).toHaveBeenCalledWith('/test-path?modal=source&id=abc', { scroll: false })
+  })
+
+  it('should call router.push when closing a modal', () => {
+    vi.mocked(useSearchParams).mockReturnValue(new URLSearchParams('modal=note&id=123') as any)
+    const { result } = renderHook(() => useModalManager())
+    
+    act(() => {
+      result.current.closeModal()
+    })
+    
+    expect(pushMock).toHaveBeenCalledWith('/test-path?', { scroll: false })
+  })
+})
diff --git a/frontend/src/lib/hooks/use-modal-manager.ts b/frontend/src/lib/hooks/use-modal-manager.ts
index 265160e..eb28816 100644
--- a/frontend/src/lib/hooks/use-modal-manager.ts
+++ b/frontend/src/lib/hooks/use-modal-manager.ts
@@ -10,8 +10,8 @@ export function useModalManager() {
   const pathname = usePathname()
 
   // Read current modal state from URL params
-  const modalType = searchParams.get('modal') as ModalType | null
-  const modalId = searchParams.get('id')
+  const modalType = searchParams?.get('modal') as ModalType | null
+  const modalId = searchParams?.get('id')
 
   /**
    * Open a modal by updating URL params without navigation
@@ -19,7 +19,7 @@ export function useModalManager() {
    * @param id - ID of the content to display
    */
   const openModal = (type: ModalType, id: string) => {
-    const params = new URLSearchParams(searchParams.toString())
+    const params = new URLSearchParams(searchParams?.toString() || '')
     params.set('modal', type)
     params.set('id', id)
     // Use scroll: false to prevent page from scrolling when modal state changes
@@ -30,7 +30,7 @@ export function useModalManager() {
    * Close the currently open modal by removing modal params from URL
    */
   const closeModal = () => {
-    const params = new URLSearchParams(searchParams.toString())
+    const params = new URLSearchParams(searchParams?.toString() || '')
     params.delete('modal')
     params.delete('id')
     router.push(`${pathname}?${params.toString()}`, { scroll: false })
diff --git a/frontend/src/lib/hooks/use-models.ts b/frontend/src/lib/hooks/use-models.ts
index 8a48180..77f0d75 100644
--- a/frontend/src/lib/hooks/use-models.ts
+++ b/frontend/src/lib/hooks/use-models.ts
@@ -1,6 +1,8 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { modelsApi } from '@/lib/api/models'
 import { useToast } from '@/lib/hooks/use-toast'
+import { useTranslation } from '@/lib/hooks/use-translation'
+import { getApiErrorKey } from '@/lib/utils/error-handler'
 import { CreateModelRequest, ModelDefaults } from '@/lib/types/models'
 
 export const MODEL_QUERY_KEYS = {
@@ -28,21 +30,21 @@ export function useModel(id: string) {
 export function useCreateModel() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (data: CreateModelRequest) => modelsApi.create(data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: MODEL_QUERY_KEYS.models })
       toast({
-        title: 'Success',
-        description: 'Model created successfully',
+        title: t.common.success,
+        description: t.models.saveSuccess,
       })
     },
     onError: (error: unknown) => {
-      const errorMessage = (error as { response?: { data?: { detail?: string } } })?.response?.data?.detail || 'Failed to create model'
       toast({
-        title: 'Error',
-        description: errorMessage,
+        title: t.common.error,
+        description: getApiErrorKey(error, t.common.error),
         variant: 'destructive',
       })
     },
@@ -52,6 +54,7 @@ export function useCreateModel() {
 export function useDeleteModel() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (id: string) => modelsApi.delete(id),
@@ -59,14 +62,14 @@ export function useDeleteModel() {
       queryClient.invalidateQueries({ queryKey: MODEL_QUERY_KEYS.models })
       queryClient.invalidateQueries({ queryKey: MODEL_QUERY_KEYS.defaults })
       toast({
-        title: 'Success',
-        description: 'Model deleted successfully',
+        title: t.common.success,
+        description: t.models.deleteSuccess,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to delete model',
+        title: t.common.error,
+        description: getApiErrorKey(error, t.common.error),
         variant: 'destructive',
       })
     },
@@ -83,20 +86,21 @@ export function useModelDefaults() {
 export function useUpdateModelDefaults() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (data: Partial<ModelDefaults>) => modelsApi.updateDefaults(data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: MODEL_QUERY_KEYS.defaults })
       toast({
-        title: 'Success',
-        description: 'Default models updated successfully',
+        title: t.common.success,
+        description: t.models.saveSuccess,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to update default models',
+        title: t.common.error,
+        description: getApiErrorKey(error, t.common.error),
         variant: 'destructive',
       })
     },
diff --git a/frontend/src/lib/hooks/use-notebooks.ts b/frontend/src/lib/hooks/use-notebooks.ts
index 41bf5ca..67b6086 100644
--- a/frontend/src/lib/hooks/use-notebooks.ts
+++ b/frontend/src/lib/hooks/use-notebooks.ts
@@ -2,6 +2,8 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { notebooksApi } from '@/lib/api/notebooks'
 import { QUERY_KEYS } from '@/lib/api/query-client'
 import { useToast } from '@/lib/hooks/use-toast'
+import { useTranslation } from '@/lib/hooks/use-translation'
+import { getApiErrorKey } from '@/lib/utils/error-handler'
 import { CreateNotebookRequest, UpdateNotebookRequest } from '@/lib/types/api'
 
 export function useNotebooks(archived?: boolean) {
@@ -22,20 +24,21 @@ export function useNotebook(id: string) {
 export function useCreateNotebook() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (data: CreateNotebookRequest) => notebooksApi.create(data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.notebooks })
       toast({
-        title: 'Success',
-        description: 'Notebook created successfully',
+        title: t.common.success,
+        description: t.notebooks.createSuccess,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to create notebook',
+        title: t.common.error,
+        description: t(getApiErrorKey(error, t.common.error)),
         variant: 'destructive',
       })
     },
@@ -45,6 +48,7 @@ export function useCreateNotebook() {
 export function useUpdateNotebook() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: ({ id, data }: { id: string; data: UpdateNotebookRequest }) =>
@@ -53,14 +57,14 @@ export function useUpdateNotebook() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.notebooks })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.notebook(id) })
       toast({
-        title: 'Success',
-        description: 'Notebook updated successfully',
+        title: t.common.success,
+        description: t.notebooks.updateSuccess,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to update notebook',
+        title: t.common.error,
+        description: t(getApiErrorKey(error, t.common.error)),
         variant: 'destructive',
       })
     },
@@ -70,20 +74,21 @@ export function useUpdateNotebook() {
 export function useDeleteNotebook() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (id: string) => notebooksApi.delete(id),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.notebooks })
       toast({
-        title: 'Success',
-        description: 'Notebook deleted successfully',
+        title: t.common.success,
+        description: t.notebooks.deleteSuccess,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to delete notebook',
+        title: t.common.error,
+        description: t(getApiErrorKey(error, t.common.error)),
         variant: 'destructive',
       })
     },
diff --git a/frontend/src/lib/hooks/use-notes.ts b/frontend/src/lib/hooks/use-notes.ts
index 2e17f88..f3fab05 100644
--- a/frontend/src/lib/hooks/use-notes.ts
+++ b/frontend/src/lib/hooks/use-notes.ts
@@ -2,6 +2,8 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { notesApi } from '@/lib/api/notes'
 import { QUERY_KEYS } from '@/lib/api/query-client'
 import { useToast } from '@/lib/hooks/use-toast'
+import { useTranslation } from '@/lib/hooks/use-translation'
+import { getApiErrorKey } from '@/lib/utils/error-handler'
 import { CreateNoteRequest, UpdateNoteRequest } from '@/lib/types/api'
 
 export function useNotes(notebookId?: string) {
@@ -24,6 +26,7 @@ export function useNote(id?: string, options?: { enabled?: boolean }) {
 export function useCreateNote() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (data: CreateNoteRequest) => notesApi.create(data),
@@ -32,14 +35,14 @@ export function useCreateNote() {
         queryKey: QUERY_KEYS.notes(variables.notebook_id) 
       })
       toast({
-        title: 'Success',
-        description: 'Note created successfully',
+        title: t.common.success,
+        description: t.notebooks.noteCreatedSuccess,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to create note',
+        title: t.common.error,
+        description: getApiErrorKey(error, t.notebooks.failedToCreateNote),
         variant: 'destructive',
       })
     },
@@ -49,6 +52,7 @@ export function useCreateNote() {
 export function useUpdateNote() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: ({ id, data }: { id: string; data: UpdateNoteRequest }) =>
@@ -57,14 +61,14 @@ export function useUpdateNote() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.notes() })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.note(id) })
       toast({
-        title: 'Success',
-        description: 'Note updated successfully',
+        title: t.common.success,
+        description: t.notebooks.noteUpdatedSuccess,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to update note',
+        title: t.common.error,
+        description: getApiErrorKey(error, t.notebooks.failedToUpdateNote),
         variant: 'destructive',
       })
     },
@@ -74,6 +78,7 @@ export function useUpdateNote() {
 export function useDeleteNote() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (id: string) => notesApi.delete(id),
@@ -81,14 +86,14 @@ export function useDeleteNote() {
       // Invalidate all notes queries (with and without notebook IDs)
       queryClient.invalidateQueries({ queryKey: ['notes'] })
       toast({
-        title: 'Success',
-        description: 'Note deleted successfully',
+        title: t.common.success,
+        description: t.notebooks.noteDeletedSuccess,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to delete note',
+        title: t.common.error,
+        description: getApiErrorKey(error, t.notebooks.failedToDeleteNote),
         variant: 'destructive',
       })
     },
diff --git a/frontend/src/lib/hooks/use-podcasts.ts b/frontend/src/lib/hooks/use-podcasts.ts
index c1473b7..3729d3e 100644
--- a/frontend/src/lib/hooks/use-podcasts.ts
+++ b/frontend/src/lib/hooks/use-podcasts.ts
@@ -4,6 +4,8 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { podcastsApi, EpisodeProfileInput, SpeakerProfileInput } from '@/lib/api/podcasts'
 import { QUERY_KEYS } from '@/lib/api/query-client'
 import { useToast } from '@/lib/hooks/use-toast'
+import { useTranslation } from '@/lib/hooks/use-translation'
+import { getApiErrorKey } from '@/lib/utils/error-handler'
 import {
   ACTIVE_EPISODE_STATUSES,
   EpisodeProfile,
@@ -81,20 +83,21 @@ export function usePodcastEpisodes(options?: { autoRefresh?: boolean }) {
 export function useDeletePodcastEpisode() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (episodeId: string) => podcastsApi.deleteEpisode(episodeId),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: 'Episode deleted',
-        description: 'Podcast episode removed successfully.',
+        title: t.podcasts.episodeDeleted,
+        description: t.podcasts.episodeDeletedDesc,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Failed to delete episode',
-        description: 'Please try again or check the server logs for details.',
+        title: t.podcasts.failedToDeleteEpisode,
+        description: getApiErrorKey(error, t.common.error),
         variant: 'destructive',
       })
     },
@@ -116,6 +119,7 @@ export function useEpisodeProfiles() {
 export function useCreateEpisodeProfile() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (payload: EpisodeProfileInput) =>
@@ -124,14 +128,14 @@ export function useCreateEpisodeProfile() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: 'Episode profile created',
-        description: 'The new episode profile is ready to use.',
+        title: t.podcasts.profileCreated,
+        description: t.podcasts.profileCreatedDesc,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Failed to create episode profile',
-        description: 'Double-check the form and try again.',
+        title: t.podcasts.failedToCreateProfile,
+        description: getApiErrorKey(error, t.common.error),
         variant: 'destructive',
       })
     },
@@ -141,6 +145,7 @@ export function useCreateEpisodeProfile() {
 export function useUpdateEpisodeProfile() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: ({
@@ -154,14 +159,14 @@ export function useUpdateEpisodeProfile() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: 'Episode profile updated',
-        description: 'Changes saved successfully.',
+        title: t.podcasts.profileUpdated,
+        description: t.podcasts.profileUpdatedDesc,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Failed to update episode profile',
-        description: 'Please try again later.',
+        title: t.podcasts.failedToUpdateProfile,
+        description: getApiErrorKey(error, t.common.error),
         variant: 'destructive',
       })
     },
@@ -171,6 +176,7 @@ export function useUpdateEpisodeProfile() {
 export function useDeleteEpisodeProfile() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (profileId: string) => podcastsApi.deleteEpisodeProfile(profileId),
@@ -178,14 +184,14 @@ export function useDeleteEpisodeProfile() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: 'Episode profile deleted',
-        description: 'Profile removed successfully.',
+        title: t.podcasts.profileDeleted,
+        description: t.podcasts.profileDeletedDesc,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Failed to delete episode profile',
-        description: 'Ensure the profile is not in use and try again.',
+        title: t.podcasts.failedToDeleteProfile,
+        description: getApiErrorKey(error, t.podcasts.failedToDeleteProfileDesc),
         variant: 'destructive',
       })
     },
@@ -195,6 +201,7 @@ export function useDeleteEpisodeProfile() {
 export function useDuplicateEpisodeProfile() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (profileId: string) =>
@@ -203,14 +210,14 @@ export function useDuplicateEpisodeProfile() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: 'Episode profile duplicated',
-        description: 'A copy of the profile has been created.',
+        title: t.podcasts.profileDuplicated,
+        description: t.podcasts.profileDuplicatedDesc,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Failed to duplicate episode profile',
-        description: 'Please try again later.',
+        title: t.podcasts.failedToDuplicateProfile,
+        description: getApiErrorKey(error, t.common.error),
         variant: 'destructive',
       })
     },
@@ -240,6 +247,7 @@ export function useSpeakerProfiles(episodeProfiles?: EpisodeProfile[]) {
 export function useCreateSpeakerProfile() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (payload: SpeakerProfileInput) =>
@@ -249,14 +257,14 @@ export function useCreateSpeakerProfile() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: 'Speaker profile created',
-        description: 'The speaker profile is ready to use.',
+        title: t.podcasts.speakerCreated,
+        description: t.podcasts.speakerCreatedDesc,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Failed to create speaker profile',
-        description: 'Double-check the form and try again.',
+        title: t.podcasts.failedToCreateSpeaker,
+        description: getApiErrorKey(error, t.common.error),
         variant: 'destructive',
       })
     },
@@ -266,6 +274,7 @@ export function useCreateSpeakerProfile() {
 export function useUpdateSpeakerProfile() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: ({
@@ -280,14 +289,14 @@ export function useUpdateSpeakerProfile() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: 'Speaker profile updated',
-        description: 'Changes saved successfully.',
+        title: t.podcasts.speakerUpdated,
+        description: t.podcasts.speakerUpdatedDesc,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Failed to update speaker profile',
-        description: 'Please try again later.',
+        title: t.podcasts.failedToUpdateSpeaker,
+        description: getApiErrorKey(error, t.common.error),
         variant: 'destructive',
       })
     },
@@ -297,6 +306,7 @@ export function useUpdateSpeakerProfile() {
 export function useDeleteSpeakerProfile() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (profileId: string) => podcastsApi.deleteSpeakerProfile(profileId),
@@ -305,14 +315,14 @@ export function useDeleteSpeakerProfile() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: 'Speaker profile deleted',
-        description: 'Profile removed successfully.',
+        title: t.podcasts.speakerDeleted,
+        description: t.podcasts.speakerDeletedDesc,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Failed to delete speaker profile',
-        description: 'Ensure the profile is not in use and try again.',
+        title: t.podcasts.failedToDeleteSpeaker,
+        description: getApiErrorKey(error, t.podcasts.failedToDeleteSpeakerDesc),
         variant: 'destructive',
       })
     },
@@ -322,6 +332,7 @@ export function useDeleteSpeakerProfile() {
 export function useDuplicateSpeakerProfile() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (profileId: string) =>
@@ -329,14 +340,14 @@ export function useDuplicateSpeakerProfile() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.speakerProfiles })
       toast({
-        title: 'Speaker profile duplicated',
-        description: 'A copy of the profile has been created.',
+        title: t.podcasts.speakerDuplicated,
+        description: t.podcasts.speakerDuplicatedDesc,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Failed to duplicate speaker profile',
-        description: 'Please try again later.',
+        title: t.podcasts.failedToDuplicateSpeaker,
+        description: getApiErrorKey(error, t.common.error),
         variant: 'destructive',
       })
     },
@@ -346,6 +357,7 @@ export function useDuplicateSpeakerProfile() {
 export function useGeneratePodcast() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (payload: PodcastGenerationRequest) =>
@@ -354,14 +366,14 @@ export function useGeneratePodcast() {
       // Immediately refetch to show the new episode
       await queryClient.refetchQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
       toast({
-        title: 'Podcast generation started',
-        description: `Episode "${response.episode_name}" is being created.`,
+        title: t.podcasts.generationStarted,
+        description: t.podcasts.generationStartedDesc.replace('{name}', response.episode_name),
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Failed to start podcast generation',
-        description: 'Please try again in a moment.',
+        title: t.podcasts.failedToStartGeneration,
+        description: getApiErrorKey(error, t.podcasts.tryAgainMoment),
         variant: 'destructive',
       })
     },
diff --git a/frontend/src/lib/hooks/use-search.ts b/frontend/src/lib/hooks/use-search.ts
index c222af7..3c0537f 100644
--- a/frontend/src/lib/hooks/use-search.ts
+++ b/frontend/src/lib/hooks/use-search.ts
@@ -1,9 +1,12 @@
 import { useMutation } from '@tanstack/react-query'
 import { toast } from 'sonner'
+import { useTranslation } from '@/lib/hooks/use-translation'
+import { getApiErrorKey } from '@/lib/utils/error-handler'
 import { searchApi } from '@/lib/api/search'
 import { SearchRequest } from '@/lib/types/search'
 
 export function useSearch() {
+  const { t } = useTranslation()
   return useMutation({
     mutationFn: async (params: SearchRequest) => {
       const response = await searchApi.search(params)
@@ -23,8 +26,8 @@ export function useSearch() {
       }
     },
     onError: (error: Error) => {
-      toast.error('Search failed', {
-        description: error.message || 'An error occurred while searching'
+      toast.error(t('apiErrors.searchFailed'), {
+        description: t(getApiErrorKey(error.message))
       })
     }
   })
diff --git a/frontend/src/lib/hooks/use-settings.ts b/frontend/src/lib/hooks/use-settings.ts
index 9f20bff..181b058 100644
--- a/frontend/src/lib/hooks/use-settings.ts
+++ b/frontend/src/lib/hooks/use-settings.ts
@@ -2,6 +2,8 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { settingsApi } from '@/lib/api/settings'
 import { QUERY_KEYS } from '@/lib/api/query-client'
 import { useToast } from '@/lib/hooks/use-toast'
+import { useTranslation } from '@/lib/hooks/use-translation'
+import { getApiErrorKey } from '@/lib/utils/error-handler'
 import { SettingsResponse } from '@/lib/types/api'
 
 export function useSettings() {
@@ -14,20 +16,21 @@ export function useSettings() {
 export function useUpdateSettings() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (data: Partial<SettingsResponse>) => settingsApi.update(data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.settings })
       toast({
-        title: 'Success',
-        description: 'Settings updated successfully',
+        title: t.common.success,
+        description: t.common.saveSuccess,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to update settings',
+        title: t.common.error,
+        description: getApiErrorKey(error, t.common.error),
         variant: 'destructive',
       })
     },
diff --git a/frontend/src/lib/hooks/use-sources.ts b/frontend/src/lib/hooks/use-sources.ts
index c03e864..354327e 100644
--- a/frontend/src/lib/hooks/use-sources.ts
+++ b/frontend/src/lib/hooks/use-sources.ts
@@ -3,6 +3,8 @@ import { useCallback, useMemo } from 'react'
 import { sourcesApi } from '@/lib/api/sources'
 import { QUERY_KEYS } from '@/lib/api/query-client'
 import { useToast } from '@/lib/hooks/use-toast'
+import { useTranslation } from '@/lib/hooks/use-translation'
+import { getApiErrorKey } from '@/lib/utils/error-handler'
 import {
   CreateSourceRequest,
   UpdateSourceRequest,
@@ -87,6 +89,7 @@ export function useSource(id: string) {
 export function useCreateSource() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (data: CreateSourceRequest) => sourcesApi.create(data),
@@ -115,20 +118,20 @@ export function useCreateSource() {
       // Show different messages based on processing mode
       if (variables.async_processing) {
         toast({
-          title: 'Source Queued',
-          description: 'Source submitted for background processing. You can monitor progress in the sources list.',
+          title: t.sources.sourceQueued,
+          description: t.sources.sourceQueuedDesc,
         })
       } else {
         toast({
-          title: 'Success',
-          description: 'Source added successfully',
+          title: t.common.success,
+          description: t.sources.sourceAddedSuccess,
         })
       }
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to add source',
+        title: t.common.error,
+        description: t(getApiErrorKey(error, t.sources.failedToAddSource)),
         variant: 'destructive',
       })
     },
@@ -138,6 +141,7 @@ export function useCreateSource() {
 export function useUpdateSource() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: ({ id, data }: { id: string; data: UpdateSourceRequest }) =>
@@ -147,14 +151,14 @@ export function useUpdateSource() {
       queryClient.invalidateQueries({ queryKey: ['sources'] })
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.source(id) })
       toast({
-        title: 'Success',
-        description: 'Source updated successfully',
+        title: t.common.success,
+        description: t.sources.sourceUpdatedSuccess,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to update source',
+        title: t.common.error,
+        description: t(getApiErrorKey(error, t.sources.failedToUpdateSource)),
         variant: 'destructive',
       })
     },
@@ -164,6 +168,7 @@ export function useUpdateSource() {
 export function useDeleteSource() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (id: string) => sourcesApi.delete(id),
@@ -173,14 +178,14 @@ export function useDeleteSource() {
       // Also invalidate the specific source
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.source(id) })
       toast({
-        title: 'Success',
-        description: 'Source deleted successfully',
+        title: t.common.success,
+        description: t.sources.sourceDeletedSuccess,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to delete source',
+        title: t.common.error,
+        description: t(getApiErrorKey(error, t.sources.failedToDeleteSource)),
         variant: 'destructive',
       })
     },
@@ -190,6 +195,7 @@ export function useDeleteSource() {
 export function useFileUpload() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: ({ file, notebookId }: { file: File; notebookId: string }) =>
@@ -199,14 +205,14 @@ export function useFileUpload() {
         queryKey: QUERY_KEYS.sources(variables.notebookId) 
       })
       toast({
-        title: 'Success',
-        description: 'File uploaded successfully',
+        title: t.common.success,
+        description: t.sources.fileUploadedSuccess,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to upload file',
+        title: t.common.error,
+        description: t(getApiErrorKey(error, t.sources.failedToUploadFile)),
         variant: 'destructive',
       })
     },
@@ -243,6 +249,7 @@ export function useSourceStatus(sourceId: string, enabled = true) {
 export function useRetrySource() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (sourceId: string) => sourcesApi.retry(sourceId),
@@ -256,14 +263,14 @@ export function useRetrySource() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.source(sourceId) })
 
       toast({
-        title: 'Source Retry Queued',
-        description: 'The source has been requeued for processing.',
+        title: t.sources.sourceRequeued,
+        description: t.sources.sourceRequeuedDesc,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Retry Failed',
-        description: 'Failed to retry source processing. Please try again.',
+        title: t.common.error,
+        description: t(getApiErrorKey(error, t.sources.failedToRetry)),
         variant: 'destructive',
       })
     },
@@ -273,6 +280,7 @@ export function useRetrySource() {
 export function useAddSourcesToNotebook() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: async ({ notebookId, sourceIds }: { notebookId: string; sourceIds: string[] }) => {
@@ -302,27 +310,29 @@ export function useAddSourcesToNotebook() {
       // Show appropriate toast based on results
       if (result.failures === 0) {
         toast({
-          title: 'Success',
-          description: `${result.successes} source${result.successes > 1 ? 's' : ''} added to notebook`,
+          title: t.common.success,
+          description: t.sources.sourcesAddedToNotebook.replace('{count}', result.successes.toString()),
         })
       } else if (result.successes === 0) {
         toast({
-          title: 'Error',
-          description: 'Failed to add sources to notebook',
+          title: t.common.error,
+          description: t.sources.failedToAddSourcesToNotebook,
           variant: 'destructive',
         })
       } else {
         toast({
-          title: 'Partial Success',
-          description: `${result.successes} source${result.successes > 1 ? 's' : ''} added, ${result.failures} failed`,
+          title: t.common.success,
+          description: t.sources.partialAddSuccess
+            .replace('{success}', result.successes.toString())
+            .replace('{failed}', result.failures.toString()),
           variant: 'default',
         })
       }
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to add sources to notebook',
+        title: t.common.error,
+        description: t(getApiErrorKey(error, t.sources.failedToAddSourcesToNotebook)),
         variant: 'destructive',
       })
     },
@@ -332,6 +342,7 @@ export function useAddSourcesToNotebook() {
 export function useRemoveSourceFromNotebook() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: async ({ notebookId, sourceId }: { notebookId: string; sourceId: string }) => {
@@ -348,14 +359,14 @@ export function useRemoveSourceFromNotebook() {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.source(sourceId) })
 
       toast({
-        title: 'Success',
-        description: 'Source removed from notebook successfully',
+        title: t.common.success,
+        description: t.sources.sourceRemovedFromNotebook,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to remove source from notebook',
+        title: t.common.error,
+        description: t(getApiErrorKey(error, t.sources.failedToRemoveSourceFromNotebook)),
         variant: 'destructive',
       })
     },
diff --git a/frontend/src/lib/hooks/use-toast.ts b/frontend/src/lib/hooks/use-toast.ts
index 1e13130..1677bcf 100644
--- a/frontend/src/lib/hooks/use-toast.ts
+++ b/frontend/src/lib/hooks/use-toast.ts
@@ -1,4 +1,5 @@
 import { toast as sonnerToast } from 'sonner'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 type ToastProps = {
   title?: string
@@ -7,14 +8,16 @@ type ToastProps = {
 }
 
 export function useToast() {
+  const { t } = useTranslation()
+
   return {
     toast: ({ title, description, variant = 'default' }: ToastProps) => {
       if (variant === 'destructive') {
-        sonnerToast.error(title || 'Error', {
+        sonnerToast.error(title || t.common.error, {
           description,
         })
       } else {
-        sonnerToast.success(title || 'Success', {
+        sonnerToast.success(title || t.common.success, {
           description,
         })
       }
diff --git a/frontend/src/lib/hooks/use-transformations.ts b/frontend/src/lib/hooks/use-transformations.ts
index fb885fe..de187d6 100644
--- a/frontend/src/lib/hooks/use-transformations.ts
+++ b/frontend/src/lib/hooks/use-transformations.ts
@@ -1,6 +1,8 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { transformationsApi } from '@/lib/api/transformations'
 import { useToast } from '@/lib/hooks/use-toast'
+import { useTranslation } from '@/lib/hooks/use-translation'
+import { getApiErrorKey } from '@/lib/utils/error-handler'
 import {
   CreateTransformationRequest,
   UpdateTransformationRequest,
@@ -33,20 +35,21 @@ export function useTransformation(id?: string, options?: { enabled?: boolean })
 export function useCreateTransformation() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (data: CreateTransformationRequest) => transformationsApi.create(data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: TRANSFORMATION_QUERY_KEYS.transformations })
       toast({
-        title: 'Success',
-        description: 'Transformation created successfully',
+        title: t.common.success,
+        description: t.transformations.createSuccess,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to create transformation',
+        title: t.common.error,
+        description: t(getApiErrorKey(error, t.common.error)),
         variant: 'destructive',
       })
     },
@@ -56,22 +59,23 @@ export function useCreateTransformation() {
 export function useUpdateTransformation() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: ({ id, data }: { id: string; data: UpdateTransformationRequest }) =>
       transformationsApi.update(id, data),
-    onSuccess: (_, { id, data }) => {
+    onSuccess: (_, { id }) => {
       queryClient.invalidateQueries({ queryKey: TRANSFORMATION_QUERY_KEYS.transformations })
       queryClient.invalidateQueries({ queryKey: TRANSFORMATION_QUERY_KEYS.transformation(id) })
       toast({
-        title: 'Success',
-        description: `Transformation '${data.name || 'transformation'}' saved successfully`,
+        title: t.common.success,
+        description: t.transformations.updateSuccess,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to update transformation',
+        title: t.common.error,
+        description: t(getApiErrorKey(error, t.common.error)),
         variant: 'destructive',
       })
     },
@@ -81,20 +85,21 @@ export function useUpdateTransformation() {
 export function useDeleteTransformation() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (id: string) => transformationsApi.delete(id),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: TRANSFORMATION_QUERY_KEYS.transformations })
       toast({
-        title: 'Success',
-        description: 'Transformation deleted successfully',
+        title: t.common.success,
+        description: t.transformations.deleteSuccess,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to delete transformation',
+        title: t.common.error,
+        description: t(getApiErrorKey(error, t.common.error)),
         variant: 'destructive',
       })
     },
@@ -103,13 +108,14 @@ export function useDeleteTransformation() {
 
 export function useExecuteTransformation() {
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (data: ExecuteTransformationRequest) => transformationsApi.execute(data),
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to execute transformation',
+        title: t.common.error,
+        description: t(getApiErrorKey(error, t.common.error)),
         variant: 'destructive',
       })
     },
@@ -126,20 +132,21 @@ export function useDefaultPrompt() {
 export function useUpdateDefaultPrompt() {
   const queryClient = useQueryClient()
   const { toast } = useToast()
+  const { t } = useTranslation()
 
   return useMutation({
     mutationFn: (prompt: { transformation_instructions: string }) => transformationsApi.updateDefaultPrompt(prompt),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: TRANSFORMATION_QUERY_KEYS.defaultPrompt })
       toast({
-        title: 'Success',
-        description: 'Default prompt saved successfully',
+        title: t.common.success,
+        description: t.transformations.updateSuccess,
       })
     },
-    onError: () => {
+    onError: (error: unknown) => {
       toast({
-        title: 'Error',
-        description: 'Failed to update default prompt',
+        title: t.common.error,
+        description: t(getApiErrorKey(error, t.common.error)),
         variant: 'destructive',
       })
     },
diff --git a/frontend/src/lib/hooks/use-translation.test.ts b/frontend/src/lib/hooks/use-translation.test.ts
new file mode 100644
index 0000000..0f35881
--- /dev/null
+++ b/frontend/src/lib/hooks/use-translation.test.ts
@@ -0,0 +1,48 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { renderHook, act } from '@testing-library/react'
+// Ensure we are testing the real implementation
+vi.unmock('@/lib/hooks/use-translation') 
+import { useTranslation } from './use-translation'
+import { useTranslation as useI18nTranslation } from 'react-i18next'
+
+// Mock react-i18next is already done in setup.ts, 
+// but we might need to control it per test
+vi.mock('react-i18next', () => ({
+  useTranslation: vi.fn()
+}))
+
+describe('useTranslation Hook', () => {
+  const changeLanguageMock = vi.fn()
+  
+  beforeEach(() => {
+    vi.clearAllMocks()
+    ;(useI18nTranslation as unknown as { mockReturnValue: (v: unknown) => void }).mockReturnValue({
+      t: (key: string) => {
+        if (key === 'common') return { appName: 'Open Notebook' }
+        if (key === 'common.appName') return 'Open Notebook'
+        return key
+      },
+      i18n: {
+        language: 'en-US',
+        changeLanguage: changeLanguageMock,
+      },
+    })
+  })
+
+  it('should return initial translations via proxy', () => {
+    const { result } = renderHook(() => useTranslation())
+    expect(result.current.language).toBe('en-US')
+    // Test the proxy behavior t.common.appName -> t("common.appName")
+    expect(result.current.t.common.appName).toBe('Open Notebook')
+  })
+
+  it('should allow changing language via i18n.changeLanguage', () => {
+    const { result } = renderHook(() => useTranslation())
+    
+    act(() => {
+      result.current.setLanguage('zh-CN')
+    })
+    
+    expect(changeLanguageMock).toHaveBeenCalledWith('zh-CN')
+  })
+})
diff --git a/frontend/src/lib/hooks/use-translation.ts b/frontend/src/lib/hooks/use-translation.ts
new file mode 100644
index 0000000..44a515d
--- /dev/null
+++ b/frontend/src/lib/hooks/use-translation.ts
@@ -0,0 +1,157 @@
+import { useTranslation as useI18nTranslation } from 'react-i18next'
+import { useMemo, useCallback, useRef } from 'react'
+import { emitLanguageChangeEnd, emitLanguageChangeStart } from '@/lib/i18n-events'
+
+/**
+ * Custom useTranslation hook that provides a Proxy-based API for accessing translations.
+ * 
+ * CRITICAL: The Proxy implementation must be carefully designed to avoid infinite loops
+ * during language switching. Key safeguards:
+ * 1. Strict depth limit (max 4 levels)
+ * 2. Blocked properties list to prevent React/JS internals from triggering recursion
+ * 3. Early return for missing keys
+ * 4. Memoization with stable dependencies
+ */
+export function useTranslation() {
+  const { t: i18nTranslate, i18n } = useI18nTranslation()
+  
+  // Use a ref to track the current language to avoid unnecessary Proxy recreation
+  const languageRef = useRef(i18n.language)
+  languageRef.current = i18n.language
+  
+  // Loop detection
+  const accessCounts = useRef<Record<string, number>>({})
+  const lastResetTime = useRef(Date.now())
+
+  // High-performance Recursive Proxy with strict safety limits
+  const t = useMemo(() => {
+    const i18nTranslateCopy = i18nTranslate;
+    
+    // Set of properties to completely block from Proxy traversal
+    const BLOCKED_PROPS = new Set([
+      '__proto__', '__esModule', '$$typeof', 'toJSON', 'constructor',
+      'valueOf', 'toString', 'inspect', 'nodeType', 'tagName',
+      'then', 'catch', 'finally', // Promise methods
+      'prototype', 'caller', 'callee', 'arguments', // Function props
+      'Symbol(Symbol.toStringTag)', 'Symbol(Symbol.iterator)',
+    ]);
+    
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const createProxy = (path: string, depth: number = 0): any => {
+      // SAFETY: Strict depth limit to prevent stack overflow
+      if (depth > 3) {
+        return path; // Return the path string as fallback
+      }
+      
+      // Base function for t('key') or t.path({ options })
+      const proxyTarget = (keyOrOptions?: string | unknown, options?: unknown) => {
+        if (typeof keyOrOptions === 'string') {
+          const fullPath = path ? `${path}.${keyOrOptions}` : keyOrOptions;
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          return i18nTranslateCopy(fullPath, options as any);
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return i18nTranslateCopy(path, keyOrOptions as any);
+      };
+
+      return new Proxy(proxyTarget, {
+        get(target, prop) {
+          // Reset counters every 1s
+          const now = Date.now()
+          if (now - lastResetTime.current > 1000) {
+            accessCounts.current = {}
+            lastResetTime.current = now
+          }
+
+          if (typeof prop === 'string') {
+             const key = path ? `${path}.${prop}` : prop;
+             accessCounts.current[key] = (accessCounts.current[key] || 0) + 1;
+             
+             if (accessCounts.current[key] > 1000) {
+               console.error(`[useTranslation] INFINITE LOOP DETECTED on key: "${key}". Breaking recursion.`);
+               return key; // Force break
+             }
+          }
+
+          // Handle Symbol properties immediately
+          if (typeof prop === 'symbol') {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return (target as any)[prop];
+          }
+          
+          // Handle function's own properties
+          if (prop in target) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return (target as any)[prop];
+          }
+
+          if (typeof prop !== 'string') return undefined;
+
+          // Block React internals and JS built-ins
+          if (prop.startsWith('__') || prop.startsWith('@@') || BLOCKED_PROPS.has(prop)) {
+            return undefined;
+          }
+
+          const currentPath = path ? `${path}.${prop}` : prop;
+
+          // Try to get the translation
+          const result = i18nTranslateCopy(currentPath, { returnObjects: true });
+
+          // If it's a leaf string, return it directly
+          if (typeof result === 'string') {
+            return result;
+          }
+
+          // Handle String.prototype methods on the current path
+          if (prop === 'replace' || prop === 'split' || prop === 'length' ||
+              prop === 'trim' || prop === 'toLowerCase' || prop === 'toUpperCase') {
+            const translated = i18nTranslateCopy(path);
+            if (typeof translated === 'string') {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              const val = (translated as any)[prop];
+              return typeof val === 'function' ? val.bind(translated) : val;
+            }
+          }
+
+          // If i18n returned the key itself (meaning not found), stop recursion
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          if ((result as any) === currentPath || result === undefined || result === null) {
+            return currentPath; // Return path as fallback instead of continuing
+          }
+
+          // If it's an object (nested structure), continue with depth limit
+          if (typeof result === 'object') {
+            return createProxy(currentPath, depth + 1);
+          }
+
+          return result;
+        }
+      });
+    };
+
+    return createProxy('', 0);
+  }, [i18nTranslate])
+
+  const setLanguage = useCallback(async (lang: string) => {
+    if (lang === i18n.language) {
+      return i18n.language
+    }
+
+    emitLanguageChangeStart(lang)
+
+    try {
+      await i18n.changeLanguage(lang)
+      return i18n.language
+    } finally {
+      emitLanguageChangeEnd(lang)
+    }
+  }, [i18n])
+
+  return useMemo(() => ({ 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    t: t as any,
+    i18n,
+    language: i18n.language, 
+    setLanguage 
+  }), [t, i18n, setLanguage])
+}
diff --git a/frontend/src/lib/hooks/use-version-check.ts b/frontend/src/lib/hooks/use-version-check.ts
index 59684bf..051d25f 100644
--- a/frontend/src/lib/hooks/use-version-check.ts
+++ b/frontend/src/lib/hooks/use-version-check.ts
@@ -1,71 +1,44 @@
-'use client'
-
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import { toast } from 'sonner'
 import { getConfig } from '@/lib/config'
+import { useTranslation } from '@/lib/hooks/use-translation'
 
 /**
  * Hook to check for version updates and display notification.
  * Should be called once per session in the dashboard layout.
+ * 
+ * Simplified implementation using a single useEffect with a ref guard.
+ * The toast is displayed once when an update is available and the user
+ * hasn't dismissed it in this session.
  */
 export function useVersionCheck() {
+  const { t } = useTranslation()
+  const hasChecked = useRef(false)
+
   useEffect(() => {
-    const checkVersion = async () => {
-      try {
-        const config = await getConfig()
+    if (hasChecked.current) return
+    hasChecked.current = true
 
-        // Only show notification if update is available
-        if (config.hasUpdate && config.latestVersion) {
-          // Check if user has dismissed this version in this session
-          const dismissKey = `version_notification_dismissed_${config.latestVersion}`
-          const isDismissed = sessionStorage.getItem(dismissKey)
+    getConfig()
+      .then(config => {
+        if (!config.hasUpdate || !config.latestVersion) return
 
-          if (!isDismissed) {
-            // Show persistent toast notification
-            toast.info(`Version ${config.latestVersion} available`, {
-              description: 'A new version of Open Notebook is available.',
-              duration: Infinity, // No auto-dismiss - user must manually dismiss
-              closeButton: true, // Show close button for dismissing
-              action: {
-                label: 'View on GitHub',
-                onClick: () => {
-                  window.open(
-                    'https://github.com/lfnovo/open-notebook',
-                    '_blank',
-                    'noopener,noreferrer'
-                  )
-                },
-              },
-              onDismiss: () => {
-                // Store dismissal in session storage
-                sessionStorage.setItem(dismissKey, 'true')
-              },
-            })
+        const dismissKey = `version_notification_dismissed_${config.latestVersion}`
+        if (sessionStorage.getItem(dismissKey)) return
 
-            console.log(
-              `🔔 [Version Check] Update available: ${config.version} → ${config.latestVersion}`
-            )
-          } else {
-            console.log(
-              `🔕 [Version Check] Notification dismissed for version ${config.latestVersion}`
-            )
-          }
-        } else if (config.latestVersion) {
-          console.log(
-            `✅ [Version Check] Running latest version: ${config.version}`
-          )
-        } else {
-          console.log(
-            `⚠️ [Version Check] Could not check for updates (offline or GitHub unavailable)`
-          )
-        }
-      } catch (error) {
-        console.error('❌ [Version Check] Failed to check version:', error)
-        // Silently fail - don't disrupt user experience
-      }
-    }
-
-    // Run version check
-    checkVersion()
-  }, []) // Run once on mount
+        toast.info(t.advanced.updateAvailable.replace('{version}', config.latestVersion), {
+          description: t.advanced.updateAvailableDesc,
+          duration: Infinity,
+          closeButton: true,
+          action: {
+            label: t.advanced.viewOnGithub,
+            onClick: () => window.open('https://github.com/lfnovo/open-notebook', '_blank'),
+          },
+          onDismiss: () => sessionStorage.setItem(dismissKey, 'true'),
+        })
+      })
+      .catch(() => {
+        // Silently fail - version check is non-critical
+      })
+  }, [t]) // t is still a dependency but only executes once due to ref guard
 }
diff --git a/frontend/src/lib/hooks/useNotebookChat.ts b/frontend/src/lib/hooks/useNotebookChat.ts
index e97cd18..6a87afa 100644
--- a/frontend/src/lib/hooks/useNotebookChat.ts
+++ b/frontend/src/lib/hooks/useNotebookChat.ts
@@ -3,6 +3,8 @@
 import { useState, useCallback, useEffect } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
+import { getApiErrorKey } from '@/lib/utils/error-handler'
+import { useTranslation } from '@/lib/hooks/use-translation'
 import { chatApi } from '@/lib/api/chat'
 import { QUERY_KEYS } from '@/lib/api/query-client'
 import {
@@ -22,6 +24,7 @@ interface UseNotebookChatParams {
 }
 
 export function useNotebookChat({ notebookId, sources, notes, contextSelections }: UseNotebookChatParams) {
+  const { t } = useTranslation()
   const queryClient = useQueryClient()
   const [currentSessionId, setCurrentSessionId] = useState<string | null>(null)
   const [messages, setMessages] = useState<NotebookChatMessage[]>([])
@@ -77,10 +80,11 @@ export function useNotebookChat({ notebookId, sources, notes, contextSelections
         queryKey: QUERY_KEYS.notebookChatSessions(notebookId)
       })
       setCurrentSessionId(newSession.id)
-      toast.success('Chat session created')
+      toast.success(t.chat.sessionCreated)
     },
-    onError: () => {
-      toast.error('Failed to create chat session')
+    onError: (err: unknown) => {
+      const error = err as { response?: { data?: { detail?: string } }, message?: string };
+      toast.error(t(getApiErrorKey(error.response?.data?.detail || error.message, 'apiErrors.failedToCreateSession')))
     }
   })
 
@@ -97,10 +101,11 @@ export function useNotebookChat({ notebookId, sources, notes, contextSelections
       queryClient.invalidateQueries({
         queryKey: QUERY_KEYS.notebookChatSession(currentSessionId!)
       })
-      toast.success('Session updated')
+      toast.success(t.chat.sessionUpdated)
     },
-    onError: () => {
-      toast.error('Failed to update session')
+    onError: (err: unknown) => {
+      const error = err as { response?: { data?: { detail?: string } }, message?: string };
+      toast.error(t(getApiErrorKey(error.response?.data?.detail || error.message, 'apiErrors.failedToUpdateSession')))
     }
   })
 
@@ -116,10 +121,11 @@ export function useNotebookChat({ notebookId, sources, notes, contextSelections
         setCurrentSessionId(null)
         setMessages([])
       }
-      toast.success('Session deleted')
+      toast.success(t.chat.sessionDeleted)
     },
-    onError: () => {
-      toast.error('Failed to delete session')
+    onError: (err: unknown) => {
+      const error = err as { response?: { data?: { detail?: string } }, message?: string };
+      toast.error(t(getApiErrorKey(error.response?.data?.detail || error.message, 'apiErrors.failedToDeleteSession')))
     }
   })
 
@@ -189,8 +195,9 @@ export function useNotebookChat({ notebookId, sources, notes, contextSelections
         queryClient.invalidateQueries({
           queryKey: QUERY_KEYS.notebookChatSessions(notebookId)
         })
-      } catch {
-        toast.error('Failed to create chat session')
+      } catch (err: unknown) {
+        const error = err as { response?: { data?: { detail?: string } }, message?: string };
+        toast.error(t(getApiErrorKey(error.response?.data?.detail || error.message, 'apiErrors.failedToCreateSession')))
         return
       }
     }
@@ -220,9 +227,10 @@ export function useNotebookChat({ notebookId, sources, notes, contextSelections
 
       // Refetch current session to get updated data
       await refetchCurrentSession()
-    } catch (error) {
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { detail?: string } }, message?: string };
       console.error('Error sending message:', error)
-      toast.error('Failed to send message')
+      toast.error(t(getApiErrorKey(error.response?.data?.detail || error.message, 'apiErrors.failedToSendMessage')))
       // Remove optimistic message on error
       setMessages(prev => prev.filter(msg => !msg.id.startsWith('temp-')))
     } finally {
@@ -235,7 +243,8 @@ export function useNotebookChat({ notebookId, sources, notes, contextSelections
     pendingModelOverride,
     buildContext,
     refetchCurrentSession,
-    queryClient
+    queryClient,
+    t
   ])
 
   // Switch session
diff --git a/frontend/src/lib/hooks/useSourceChat.ts b/frontend/src/lib/hooks/useSourceChat.ts
index 4648d71..5024a87 100644
--- a/frontend/src/lib/hooks/useSourceChat.ts
+++ b/frontend/src/lib/hooks/useSourceChat.ts
@@ -3,6 +3,8 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
+import { getApiErrorKey } from '@/lib/utils/error-handler'
+import { useTranslation } from '@/lib/hooks/use-translation'
 import { sourceChatApi } from '@/lib/api/source-chat'
 import {
   SourceChatSession,
@@ -13,6 +15,7 @@ import {
 } from '@/lib/types/api'
 
 export function useSourceChat(sourceId: string) {
+  const { t } = useTranslation()
   const queryClient = useQueryClient()
   const [currentSessionId, setCurrentSessionId] = useState<string | null>(null)
   const [messages, setMessages] = useState<SourceChatMessage[]>([])
@@ -57,10 +60,11 @@ export function useSourceChat(sourceId: string) {
     onSuccess: (newSession) => {
       queryClient.invalidateQueries({ queryKey: ['sourceChatSessions', sourceId] })
       setCurrentSessionId(newSession.id)
-      toast.success('Chat session created')
+      toast.success(t.chat.sessionCreated)
     },
-    onError: () => {
-      toast.error('Failed to create chat session')
+    onError: (err: unknown) => {
+      const error = err as { response?: { data?: { detail?: string } }, message?: string };
+      toast.error(t(getApiErrorKey(error.response?.data?.detail || error.message, 'apiErrors.failedToCreateSession')))
     }
   })
 
@@ -71,10 +75,11 @@ export function useSourceChat(sourceId: string) {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['sourceChatSessions', sourceId] })
       queryClient.invalidateQueries({ queryKey: ['sourceChatSession', sourceId, currentSessionId] })
-      toast.success('Session updated')
+      toast.success(t.chat.sessionUpdated)
     },
-    onError: () => {
-      toast.error('Failed to update session')
+    onError: (err: unknown) => {
+      const error = err as { response?: { data?: { detail?: string } }, message?: string };
+      toast.error(t(getApiErrorKey(error.response?.data?.detail || error.message, 'apiErrors.failedToUpdateSession')))
     }
   })
 
@@ -88,10 +93,11 @@ export function useSourceChat(sourceId: string) {
         setCurrentSessionId(null)
         setMessages([])
       }
-      toast.success('Session deleted')
+      toast.success(t.chat.sessionDeleted)
     },
-    onError: () => {
-      toast.error('Failed to delete session')
+    onError: (err: unknown) => {
+      const error = err as { response?: { data?: { detail?: string } }, message?: string };
+      toast.error(t(getApiErrorKey(error.response?.data?.detail || error.message, 'apiErrors.failedToDeleteSession')))
     }
   })
 
@@ -107,9 +113,10 @@ export function useSourceChat(sourceId: string) {
         sessionId = newSession.id
         setCurrentSessionId(sessionId)
         queryClient.invalidateQueries({ queryKey: ['sourceChatSessions', sourceId] })
-      } catch (error) {
+      } catch (err: unknown) {
+        const error = err as { response?: { data?: { detail?: string } }, message?: string };
         console.error('Failed to create chat session:', error)
-        toast.error('Failed to create chat session')
+        toast.error(t(getApiErrorKey(error.response?.data?.detail || error.message, 'apiErrors.failedToCreateSession')))
         return
       }
     }
@@ -180,9 +187,10 @@ export function useSourceChat(sourceId: string) {
           }
         }
       }
-    } catch (error) {
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { detail?: string } }, message?: string };
       console.error('Error sending message:', error)
-      toast.error('Failed to send message')
+      toast.error(t(getApiErrorKey(error.response?.data?.detail || error.message, 'apiErrors.failedToSendMessage')))
       // Remove optimistic messages on error
       setMessages(prev => prev.filter(msg => !msg.id.startsWith('temp-')))
     } finally {
@@ -190,7 +198,7 @@ export function useSourceChat(sourceId: string) {
       // Refetch session to get persisted messages
       refetchCurrentSession()
     }
-  }, [sourceId, currentSessionId, refetchCurrentSession, queryClient])
+  }, [sourceId, currentSessionId, refetchCurrentSession, queryClient, t])
 
   // Cancel streaming
   const cancelStreaming = useCallback(() => {
diff --git a/frontend/src/lib/i18n-events.ts b/frontend/src/lib/i18n-events.ts
new file mode 100644
index 0000000..349e409
--- /dev/null
+++ b/frontend/src/lib/i18n-events.ts
@@ -0,0 +1,24 @@
+export const I18N_LANGUAGE_CHANGE_START = 'i18n:language-change-start'
+export const I18N_LANGUAGE_CHANGE_END = 'i18n:language-change-end'
+
+type LanguageChangeDetail = {
+  language: string
+}
+
+export const i18nEvents = new EventTarget()
+
+export function emitLanguageChangeStart(language: string) {
+  i18nEvents.dispatchEvent(
+    new CustomEvent<LanguageChangeDetail>(I18N_LANGUAGE_CHANGE_START, {
+      detail: { language },
+    })
+  )
+}
+
+export function emitLanguageChangeEnd(language: string) {
+  i18nEvents.dispatchEvent(
+    new CustomEvent<LanguageChangeDetail>(I18N_LANGUAGE_CHANGE_END, {
+      detail: { language },
+    })
+  )
+}
diff --git a/frontend/src/lib/i18n.ts b/frontend/src/lib/i18n.ts
new file mode 100644
index 0000000..c441eb8
--- /dev/null
+++ b/frontend/src/lib/i18n.ts
@@ -0,0 +1,24 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import { resources } from './locales'
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    fallbackLng: 'en-US',
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+    react: {
+      useSuspense: false,
+    },
+    detection: {
+      order: ['localStorage', 'navigator'],
+      caches: ['localStorage'],
+    },
+  })
+
+export default i18n
diff --git a/frontend/src/lib/locales/en-US/index.ts b/frontend/src/lib/locales/en-US/index.ts
new file mode 100644
index 0000000..9cdee60
--- /dev/null
+++ b/frontend/src/lib/locales/en-US/index.ts
@@ -0,0 +1,950 @@
+export const enUS = {
+  common: {
+    search: "Search...",
+    create: "New",
+    new: "New",
+    cancel: "Cancel",
+    delete: "Delete",
+    edit: "Edit",
+    theme: "Theme",
+    signOut: "Sign Out",
+    noMatches: "No matches found",
+    tryDifferentSearch: "Try using a different search term.",
+    light: "Light",
+    dark: "Dark",
+    system: "System",
+    loading: "Loading...",
+    note: "Note",
+    insight: "Insight",
+    newSource: "New Source",
+    newNotebook: "New Notebook",
+    newPodcast: "New Podcast",
+    language: "Language",
+    english: "English",
+    chinese: "简体中文",
+    source: "Source",
+    notebook: "Notebook",
+    podcast: "Podcast",
+    quickActions: "Quick actions",
+    quickActionsDesc: "Navigation, search, ask, theme",
+    appName: "Open Notebook",
+    add: "Add",
+    remove: "Remove",
+    confirm: "Confirm",
+    warning: "Warning",
+    error: "Error",
+    success: "Success",
+    sessions: "Sessions",
+    model: "Model",
+    send: "Send",
+    back: "Back",
+    next: "Next",
+    done: "Done",
+    processing: "Processing...",
+    creating: "Creating...",
+    tokenCount: "Tokens",
+    charCount: "Chars",
+    linked: "Linked",
+    added: "Added on {date}",
+    adding: "Adding...",
+    addSelected: "Add Selected",
+    customModel: "Custom Model",
+    messages: "Messages",
+    failed: "failed",
+    current: "Current",
+    save: "Save",
+    writeNote: "Write Note",
+    batchMode: "Batch Mode",
+    optional: "Optional",
+    type: "Type",
+    title: "Title",
+    created: "Created {time}",
+    updated: "Updated {time}",
+    actions: "Actions",
+    noResults: "No results",
+    references: "References",
+    refreshPage: "Please try refreshing the page",
+    refresh: "Refresh",
+    aiGenerated: "AI Generated",
+    human: "Human",
+    unknown: "Unknown",
+    notes: "Notes",
+    chat: "Chat",
+    details: "Details",
+    deleteForever: "Delete Forever",
+    connectionError: "Connection Error",
+    unableToConnect: "Unable to connect to the API server",
+    retryConnection: "Retry Connection",
+    diagnosticInfo: "Diagnostic Information",
+    version: "Version",
+    built: "Built",
+    apiUrl: "API URL",
+    frontendUrl: "Frontend URL",
+    checkConsoleLogs: "Check browser console for detailed logs (look for 🔧 [Config] messages)",
+    yes: "Yes",
+    no: "No",
+    simple: "Simple",
+    saving: "Saving...",
+    description: "Description",
+    saveToNote: "Save to note",
+    copyToClipboard: "Copy to clipboard",
+    close: "Close",
+    insights: "Insights",
+    progress: "Progress",
+    deleting: "Deleting...",
+    created_label: "Created",
+    updated_label: "Updated",
+    download: "Download",
+    saveChanges: "Save Changes",
+    name: "Name",
+    default: "Default",
+    nameRequired: "Name is required",
+    modelConfiguration: "Model Configuration",
+    resetToDefault: "Reset to Default",
+    notFound: "Not found",
+    reasoning: "Reasoning",
+    searchTerms: "Search Terms",
+    strategy: "Strategy",
+    individualAnswers: "Individual Answers ({count})",
+    finalAnswer: "Final Answer",
+    notebookLabel: "Notebook: {name}",
+    itemNotFound: "This {type} could not be found",
+    accessibility: {
+      navigation: "Navigation",
+      transformationViews: "Transformation views",
+      searchKB: "Ask or search your knowledge base",
+      enterQuestion: "Enter your question to ask the knowledge base",
+      enterSearch: "Enter search query",
+      searchKBBtn: "Search knowledge base",
+      podcastViews: "Podcast views",
+      chatSessions: "Chat sessions",
+      ytVideo: "YouTube video",
+      askResponse: "Ask Response",
+      searchNotebooks: "Search notebooks",
+    },
+    url: "URL",
+    errorDetails: "Error Details",
+    editTransformation: "Edit Transformation",
+    comingSoon: "Coming soon",
+    retry: "Try Again",
+    traditionalChinese: "繁體中文",
+    completed: "completed",
+    saveSuccess: "Saved successfully",
+    contextModes: {
+      off: "Not included in chat",
+      insights: "Insights only",
+      full: "Full content",
+      clickToCycle: "Click to cycle",
+    },
+    clickToEdit: "Click to edit",
+  },
+  apiErrors: {
+    notebookNotFound: "Notebook not found",
+    sourceNotFound: "Source not found",
+    transformationNotFound: "Transformation not found",
+    fileUploadFailed: "File upload failed",
+    urlRequired: "URL is required for link type",
+    contentRequired: "Content is required for text type",
+    invalidSourceType: "Invalid source type",
+    processingFailed: "Processing failed",
+    failedToQueue: "Failed to queue processing",
+    invalidSortBy: "Sort field must be 'created' or 'updated'",
+    invalidSortOrder: "Sort order must be 'asc' or 'desc'",
+    accessDenied: "Access to file denied",
+    fileNotFoundOnServer: "File not found on server",
+    searchFailed: "Search failed",
+    askFailed: "Ask failed",
+    pleaseEnterQuestion: "Please enter a question",
+    pleaseConfigureModels: "Please configure all required models",
+    failedToCreateSession: "Failed to create session",
+    failedToUpdateSession: "Failed to update session",
+    failedToDeleteSession: "Failed to delete session",
+    failedToSendMessage: "Failed to send message",
+    unauthorized: "Unauthorized access, please check your password",
+    invalidPassword: "Invalid password",
+    missingAuth: "Missing authorization",
+    embeddingModelRequired: "This feature requires an embedding model. Please configure one in the Models section.",
+    strategyModelNotFound: "Strategy model not found",
+    answerModelNotFound: "Answer model not found",
+    finalAnswerModelNotFound: "Final answer model not found",
+    noAnswerGenerated: "No answer could be generated",
+    genericError: "An unexpected error occurred",
+  },
+  connectionErrors: {
+    apiTitle: "Unable to Connect to API Server",
+    apiDesc: "The Open Notebook API server could not be reached",
+    dbTitle: "Database Connection Failed",
+    dbDesc: "The API server is running, but the database is not accessible",
+    troubleshooting: "This usually means:",
+    apiUnreachable1: "The API server is not running",
+    apiUnreachable2: "The API server is running on a different address",
+    apiUnreachable3: "Network connectivity issues",
+    dbFailed1: "SurrealDB is not running",
+    dbFailed2: "Database connection settings are incorrect",
+    dbFailed3: "Network issues between API and database",
+    quickFixes: "Quick fixes:",
+    setApiUrl: "Set the API_URL environment variable:",
+    checkSurreal: "Check if SurrealDB is running:",
+    seeDocumentation: "For detailed setup instructions, see:",
+    docLink: "Open Notebook Documentation",
+    showTechnical: "Show Technical Details",
+    attemptedUrl: "Attempted URL",
+    message: "Message",
+    technicalDetails: "Technical Details",
+    stackTrace: "Stack Trace",
+    retryLabel: "Retry Connection",
+    retryHint: "Press R or click the button to retry",
+    dockerLabel: "For Docker",
+    localDevLabel: "For local development",
+  },
+  auth: {
+    loginTitle: "Open Notebook",
+    loginDesc: "Enter your password to access the application",
+    passwordPlaceholder: "Password",
+    signingIn: "Signing in...",
+    signIn: "Sign In",
+    unhandledError: "Unhandled error during login",
+    connectErrorHint: "Unable to connect to server. Please check if the API is running.",
+  },
+  navigation: {
+    collect: "Collect",
+    process: "Process",
+    create: "Create",
+    manage: "Manage",
+    sources: "Sources",
+    notebooks: "Notebooks",
+    askAndSearch: "Ask and Search",
+    podcasts: "Podcasts",
+    models: "Models",
+    transformations: "Transformations",
+    transformation: "Transformation",
+    settings: "Settings",
+    advanced: "Advanced",
+    nav: "Navigation",
+    language: "Toggle language",
+    theme: "Theme",
+    search: "Search",
+    ask: "Ask",
+  },
+  notebooks: {
+    title: "Notebooks",
+    newNotebook: "New Notebook",
+    searchPlaceholder: "Search notebooks...",
+    archived: "Archived",
+    archive: "Archive",
+    unarchive: "Unarchive",
+    deleteNotebook: "Delete Notebook",
+    deleteNotebookDesc: "Are you sure you want to delete this notebook? This action cannot be undone.",
+    activeNotebooks: "Active Notebooks",
+    archivedNotebooks: "Archived Notebooks",
+    emptyDescription: "Start by creating your first notebook to organize your research.",
+    noActiveNotebooks: "No active notebooks",
+    noArchivedNotebooks: "No archived notebooks",
+    notFound: "Notebook not found",
+    notFoundDesc: "The requested notebook does not exist.",
+    noDescription: "No description...",
+    updated: "Updated",
+    namePlaceholder: "Notebook name",
+    addDescription: "Add description...",
+    noNotesYet: "No notes yet",
+    deleteNote: "Delete Note",
+    deleteNoteConfirm: "Are you sure you want to delete this note? This action cannot be undone.",
+    noteCreatedSuccess: "Note created successfully",
+    failedToCreateNote: "Failed to create note",
+    noteUpdatedSuccess: "Note updated successfully",
+    failedToUpdateNote: "Failed to update note",
+    noteDeletedSuccess: "Note deleted successfully",
+    failedToDeleteNote: "Failed to delete note",
+    createNew: "Create New Notebook",
+    createNewDesc: "Enter a name and optional description to get started.",
+    descPlaceholder: "Add more info about this notebook here...",
+    createSuccess: "Notebook created successfully",
+    updateSuccess: "Notebook updated successfully",
+    deleteSuccess: "Notebook deleted successfully",
+  },
+  sources: {
+    title: "Sources",
+    add: "Add Source",
+    addNew: "Add New Source",
+    addExisting: "Add Existing Source",
+    empty: "No sources yet",
+    emptyDesc: "Add your first source to start building your knowledge base.",
+    delete: "Delete Source",
+    deleteMsg: "Are you sure you want to delete this source? This action cannot be undone.",
+    statusPreparing: "Preparing",
+    statusQueued: "Queued",
+    statusProcessing: "Processing",
+    statusCompleted: "Completed",
+    statusFailed: "Failed",
+    statusPreparingDesc: "Preparing to process",
+    statusQueuedDesc: "Waiting to be processed",
+    statusProcessingDesc: "Being processed",
+    statusCompletedDesc: "Successfully processed",
+    statusFailedDesc: "Processing failed",
+    failedToLoad: "Failed to load sources",
+    allSourcesDesc: "View all your sources here. You can add new sources or manage existing ones.",
+    allSources: "All Sources",
+    insights: "Insights",
+    yes: "Yes",
+    no: "No",
+    loadingMore: "Loading more...",
+    noSourcesYet: "No sources yet",
+    allSourcesDescShort: "View all your sources here.",
+    cannotSaveNoteNoNotebook: "Cannot save note: notebook ID not available",
+    createFirstSource: "Add your first source to start building your knowledge base.",
+    deleteSourceConfirm: "Are you sure you want to delete this source?",
+    deleteConfirm: "Are you sure you want to delete this?",
+    deleteConfirmWithTitle: "Are you sure you want to delete \"{title}\"?",
+    deleteSuccess: "Source deleted successfully. Note: To delete the file from storage, you must enable checking the \"delete file\" option in the settings page.",
+    failedToDelete: "Failed to delete source",
+    sourceQueued: "Source Queued",
+    sourceQueuedDesc: "Source submitted for background processing. You can monitor progress in the sources list.",
+    sourceAddedSuccess: "Source added successfully",
+    failedToAddSource: "Failed to add source",
+    sourceUpdatedSuccess: "Source updated successfully",
+    failedToUpdateSource: "Failed to update source",
+    sourceDeletedSuccess: "Source deleted successfully",
+    failedToDeleteSource: "Failed to delete source",
+    fileUploadedSuccess: "File uploaded successfully",
+    failedToUploadFile: "Failed to upload file",
+    sourceRequeued: "Source Retry Queued",
+    sourceRequeuedDesc: "The source has been requeued for processing.",
+    failedToRetry: "Retry Failed",
+    failedToRetryDesc: "Failed to retry source processing. Please try again.",
+    sourcesAddedToNotebook: "{count} source(s) added to notebook",
+    failedToAddSourcesToNotebook: "Failed to add sources to notebook",
+    partialAddSuccess: "{success} source(s) added, {failed} failed",
+    sourceRemovedFromNotebook: "Source removed from notebook successfully",
+    failedToRemoveSourceFromNotebook: "Failed to remove source from notebook",
+    removeConfirm: "Are you sure you want to remove this from the notebook?",
+    checking: "Checking...",
+    untitledSource: "Untitled Source",
+    maxItems: "max {count}",
+    insightsCount: "{count} insights",
+    details: "Details",
+    detailsTitle: "Source Details",
+    content: "Content",
+    metadata: "Metadata",
+    type: {
+      link: "Link",
+      file: "File",
+      text: "Text",
+    },
+    id: "Source ID",
+    topics: "Topics",
+    embedded: "Embedded",
+    notEmbedded: "Not Embedded",
+    embedContent: "Embed Content",
+    embedding: "Embedding...",
+    alreadyEmbedded: "Already Embedded",
+    downloadFile: "Download File",
+    fileUnavailable: "File unavailable",
+    preparing: "Preparing...",
+    generateNewInsight: "Generate New Insight",
+    selectTransformation: "Select a transformation...",
+    noInsightsYet: "No insights yet",
+    createFirstInsight: "Create your first insight using a transformation above",
+    viewInsight: "View Insight",
+    deleteInsight: "Delete Insight",
+    deleteInsightConfirm: "Are you sure you want to delete this insight? This action cannot be undone.",
+    deleteNoteConfirm: 'Are you sure you want to delete this note? This action cannot be undone.',
+    editNote: 'Edit note',
+    createNote: 'Create note',
+    addTitle: 'Add a title...',
+    untitledNote: 'Untitled Note',
+    writeNotePlaceholder: 'Write your note content here...',
+    saveNote: 'Save Note',
+    createNoteBtn: 'Create Note',
+    noNotesYet: "No notes yet",
+    createFirstNote: "Create your first note to capture insights and observations.",
+    deleteNote: "Delete Note",
+    urlLabel: 'URL(s) *',
+    fileLabel: 'File(s) *',
+    textContentLabel: 'Text Content *',
+    enterUrlsPlaceholder: 'Enter URLs, one per line\nhttps://example.com/article1\nhttps://example.com/article2',
+    batchUrlHint: 'Paste multiple URLs (one per line) to batch import',
+    invalidUrlsDetected: 'Invalid URLs detected:',
+    lineLabel: 'Line {line}',
+    fixInvalidUrls: 'Please fix or remove invalid URLs to continue',
+    selectMultipleFilesHint: 'Select multiple files to batch import. Supported: Documents (PDF, DOC, DOCX, PPT, XLS, EPUB, TXT, MD), Media (MP4, MP3, WAV, M4A), Images (JPG, PNG), Archives (ZIP)',
+    selectedFiles: 'Selected files:',
+    textPlaceholder: 'Paste or type your content here...',
+    titlePlaceholder: 'Give your source a descriptive title',
+    batchTitlesAuto: 'Titles will be automatically generated for each source.',
+    batchCommonSettings: 'The same notebooks and transformations will be applied to all items.',
+    urlsCount: '{count} URL(s)',
+    filesCount: '{count} file(s)',
+    addSource: "Add Source",
+    notEmbeddedAlert: "Content Not Embedded",
+    notEmbeddedDesc: "This content hasn't been embedded for vector search. Embedding enables advanced search capabilities and better content discovery.",
+    openOnYoutube: "Open on YouTube",
+    urlCopied: "URL copied to clipboard",
+    viewSource: "View Source",
+    noInsightSelected: "No insight selected",
+    sourceInsight: "Source Insight",
+    manageNotebooks: "Manage Notebooks",
+    manageNotebooksDesc: "Manage which notebooks contain this source",
+    noNotebooksAvailable: "No notebooks available",
+    loadFailed: "Failed to load source details",
+    removeFromNotebook: "Remove from Notebook",
+    retryProcessing: "Retry Processing",
+    deleteSource: "Delete Source",
+    retry: "Retry",
+    progress: "Progress",
+    addExistingTitle: "Add Existing Sources",
+    addExistingDesc: "Select existing sources from across all your notebooks to add to the current one.",
+    searchPlaceholder: "Search sources by name or URL...",
+    noNotebooksFound: "No notebooks found.",
+    showingFirst100: "Showing first 100 sources. Use search to find specific ones.",
+    selectedCount: "{count} sources selected",
+    added: "Added on {date}",
+    addUrl: "Add URL",
+    uploadFile: "Upload File",
+    enterText: "Enter Text",
+    processDescription: "Content will be processed and analyzed by AI.",
+    processingFiles: "Processing your files...",
+    titleRequired: "A title is required for text content",
+    titleGenerated: "If left empty, a title will be generated from the content",
+    batchCount: "{count} {type} will be processed",
+    enableEmbedding: "Enable embedding for search",
+    embeddingDesc: "Allows this source to be found in vector searches and AI queries",
+    embeddingAlways: "Embedding enabled automatically",
+    embeddingAlwaysDesc: "Your settings are configured to always embed content for vector search.",
+    embeddingNever: "Embedding disabled",
+    embeddingNeverDesc: "Your settings are configured to skip embedding. Vector search won't be available for this source.",
+    changeInSettings: "You can change this in Settings",
+    notFound: "Source not found",
+    noContent: "No content available",
+    insightsDesc: "Insights generated from model analysis",
+    uploadedFile: "Uploaded file",
+    fileUnavailableDesc: "This file is currently unavailable due to storage system reasons.",
+    batchSuccess: "{count} source(s) created successfully",
+    batchFailed: "Failed to create all {count} sources",
+    batchPartial: "{success} succeeded, {failed} failed",
+    submittingSource: "Submitting source for processing...",
+    contentRequired: "Please provide the required content for the selected source type",
+    titleRequiredForText: "Title is required for text sources",
+    processingBatchSources: "Processing {count} sources. This may take a few moments.",
+    processingSource: "Your source is being processed. This may take a few moments.",
+    maxFilesAllowed: "Maximum {count} files allowed per batch",
+  },
+  chat: {
+    sessions: "Sessions",
+    sessionTitlePlaceholder: "Type a title here...",
+    noSessions: "No chat sessions yet",
+    startChatting: "Start chatting about your sources.",
+    deleteSession: "Delete Session",
+    deleteSessionDesc: "Are you sure you want to delete this chat session? This action cannot be undone.",
+    sendPlaceholder: "Ask anything about your sources...",
+    newChat: "New Chat",
+    sessionsTitle: "Chat Sessions",
+    clearhistory: "Clear History",
+    renameSession: "Rename Session",
+    noSourcesLinked: "No sources linked",
+    thinking: "AI is thinking...",
+    chatWith: "Chat with {name}",
+    startConversation: "Start a conversation about this {type}",
+    askQuestions: "Ask questions to understand the content better",
+    pressToSend: "Press {key} to send",
+    model: "Model",
+    createToStart: 'Create a session to start.',
+    chatWithNotebook: 'Chat with Notebook',
+    unableToLoadChat: 'Unable to load chat',
+    noDescription: 'No description',
+    startByCreating: 'Start by creating your first notebook to organize your research.',
+    messagesCount: "{count} messages",
+    sessionCreated: "Chat session created",
+    sessionUpdated: "Session updated",
+    sessionDeleted: "Session deleted",
+  },
+  searchPage: {
+    askAndSearch: "Ask and Search",
+    chooseAMode: "Choose a mode",
+    askBeta: "Ask (beta)",
+    search: "Search",
+    askYourKb: "Ask Your Knowledge Base (beta)",
+    askYourKbDesc: "The LLM will answer your query based on the documents in your knowledge base.",
+    question: "Question",
+    enterQuestionPlaceholder: "Enter your question...",
+    pressToSubmit: "Press Cmd/Ctrl+Enter to submit",
+    noEmbeddingModel: "You can't use this feature because you have no embedding model selected. Please set one up in the Models page.",
+    usingCustomModels: "Using Custom Models",
+    usingDefaultModels: "Using Default Models",
+    advanced: "Advanced",
+    strategy: "Strategy",
+    answer: "Answer",
+    final: "Final",
+    ask: "Ask",
+    processing: "Processing...",
+    saveToNotebooks: "Save to Notebooks",
+    searchDesc: "Search your knowledge base for specific keywords or concepts",
+    enterSearchPlaceholder: "Enter search query...",
+    pressToSearch: "Press Enter to search",
+    searchType: "Search Type",
+    vectorSearchWarning: "Vector search requires an embedding model. Only text search is available.",
+    textSearch: "Text Search",
+    vectorSearch: "Vector Search",
+    searchIn: "Search In",
+    searchSources: "Search Sources",
+    searchNotes: "Search Notes",
+    resultsFound: "{count} results found",
+    matches: "Matches ({count})",
+    noResultsFor: "No results found for “{query}”",
+    notSet: "Not set",
+    saveToNotebook: "Save to Notebook",
+    saveSuccess: "Successfully saved to notebook",
+    saveError: "Failed to save to notebook",
+    selectNotebook: "Select Notebook",
+    createNewNotebook: "Create New Notebook",
+    cancel: "Cancel",
+    searchAndAsk: "Search & Ask",
+    searchResultsFor: "Search results for “{query}”",
+    askAbout: "Ask about “{query}”",
+    orSearchKb: "Or search your knowledge base",
+    saving: "Saving...",
+    advancedModelTitle: "Advanced Model Selection",
+    advancedModelDesc: "Choose specific models for each stage of the Ask process",
+    strategyModel: "Strategy Model",
+    answerModel: "Answer Model",
+    finalAnswerModel: "Final Answer Model",
+    selectStrategyPlaceholder: "Select strategy model",
+    selectAnswerPlaceholder: "Select answer model",
+    selectFinalPlaceholder: "Select final answer model",
+    saveChanges: "Save Changes",
+    processingQuestion: "Processing your question...",
+  },
+  podcasts: {
+    podcastProfiles: {
+      business_analysis: "Business Analysis",
+      solo_expert: "Solo Expert",
+      tech_discussion: "Tech Discussion",
+    },
+    generateEpisode: "Generate Podcast Episode",
+    generateEpisodeDesc: "Select the content to include and configure the episode details before generating a new podcast episode.",
+    content: "Content",
+    contentDesc: "Pick notebooks, sources, and notes to include in this episode.",
+    itemsSelected: "{count} items selected",
+    tokens: "{count} tokens",
+    chars: "{count} chars",
+    loadingNotebooks: "Loading notebooks...",
+    noNotebooksFoundInPodcasts: "No notebooks found. Create a notebook and add content before generating a podcast.",
+    noContentSelected: "No content selected",
+    summary: "Summary",
+    fullContent: "Full content",
+    untitledSource: "Untitled source",
+    untitledNote: "Untitled note",
+    episodeSettings: "Episode Settings",
+    episodeProfile: "Episode profile",
+    episodeProfilePlaceholder: "Select an episode profile",
+    episodeName: "Episode name",
+    episodeNamePlaceholder: "e.g., AI and the Future of Work",
+    additionalInstructions: "Additional instructions",
+    instructionsPlaceholder: "Any supplementary advice to append to the episode briefing...",
+    generating: "Generating...",
+    generate: "Generate",
+    hostPlaceholder: "Host {number}",
+    profileRequired: "Episode Profile Required",
+    profileRequiredDesc: "Select an episode profile before generating a podcast.",
+    nameRequired: "Episode name required",
+    nameRequiredDesc: "Provide a name for the episode.",
+    addContext: "Add context",
+    addContextDesc: "Select at least one source or note to include in the episode.",
+    generationFailed: "Podcast generation failed",
+    speakerProfile: "Speaker Profile",
+    usesSpeakerProfile: "Uses speaker profile",
+    sources: "Sources",
+    notes: "Notes",
+    noSources: "No sources available in this notebook.",
+    noNotes: "No notes available in this notebook.",
+    selectMode: "Select mode",
+    buildContextFailed: "Failed to build context. Please review your selections.",
+    podcastTaskStarted: "Podcast task started",
+    loadingProfiles: "Loading episode profiles...",
+    noProfilesFound: "No episode profiles found. Create an episode profile before generating a podcast.",
+    listTitle: "Podcasts",
+    listDesc: "Keep track of generated episodes and manage reusable templates.",
+    chooseAView: "Choose a view",
+    episodesTab: "Episodes",
+    templatesTab: "Templates",
+    overviewTitle: "Episodes overview",
+    overviewDesc: "Monitor podcast generation jobs and review the final artefacts.",
+    generateBtn: "Generate Podcast",
+    total: "Total",
+    processingLabel: "Processing",
+    completedLabel: "Completed",
+    failedLabel: "Failed",
+    pendingLabel: "Pending",
+    loadErrorTitle: "Failed to load episodes",
+    loadErrorDesc: "We could not fetch the latest podcast episodes. Try again shortly.",
+    loadingEpisodes: "Loading episodes…",
+    noEpisodesYet: "No podcast episodes yet. Generate your first one from the notebook or source chat interfaces.",
+    statusRunningTitle: "Currently Processing",
+    statusRunningDesc: "Episodes that are actively generating assets.",
+    statusPendingTitle: "Queued / Pending",
+    statusPendingDesc: "Submitted episodes waiting to start processing.",
+    statusCompletedTitle: "Completed Episodes",
+    statusCompletedDesc: "Ready to review, download, or publish.",
+    statusFailedTitle: "Failed Episodes",
+    statusFailedDesc: "Episodes that encountered issues during generation.",
+    templatesWorkspaceTitle: "Templates workspace",
+    templatesWorkspaceDesc: "Build reusable episode and speaker configurations for fast podcast production.",
+    howTemplatesPowerTitle: "How templates power podcast generation",
+    howTemplatesPowerDesc: "Templates split the podcast workflow into two reusable building blocks. Mix and match them whenever you generate a new episode.",
+    episodeProfilesSetFormat: "Episode profiles set the format",
+    episodeProfilesList1: "Outline the number of segments and how the story flows",
+    episodeProfilesList2: "Pick the language models used for briefing, outlining, and script writing",
+    episodeProfilesList3: "Store default briefings so every episode starts with a consistent tone",
+    speakerProfilesBringVoices: "Speaker profiles bring voices to life",
+    speakerProfilesList1: "Choose the text-to-speech provider and model",
+    speakerProfilesList2: "Capture personality, backstory, and pronunciation notes per speaker",
+    speakerProfilesList3: "Reuse the same host or guest voices across different episode formats",
+    recommendedWorkflow: "Recommended workflow",
+    workflowStep1: "Create speaker profiles for each voice you need",
+    workflowStep2: "Build episode profiles that reference those speakers by name",
+    workflowStep3: "Generate podcasts by selecting the episode profile that fits the story",
+    workflowHint: "Episode profiles reference speaker profiles by name, so starting with speakers avoids missing voice assignments later.",
+    failedToLoadTemplates: "Failed to load templates data",
+    failedToLoadTemplatesDesc: "Ensure the API is running and try again. Some sections may be incomplete.",
+    loadingTemplates: "Loading templates…",
+    speakerProfilesTitle: "Speaker profiles",
+    speakerProfilesDesc: "Configure voices and personalities for generated episodes.",
+    createSpeaker: "Create speaker",
+    noSpeakerProfiles: "No speaker profiles yet. Create one to make episode templates available.",
+    noDescription: "No description provided.",
+    usedByCount_one: "Used by 1 episode",
+    usedByCount_other: "Used by {count} episodes",
+    usedByCount: "Used by {count} episodes",
+    unused: "Unused",
+    voiceId: "Voice ID",
+    backstory: "Backstory",
+    personality: "Personality",
+    edit: "Edit",
+    duplicate: "Duplicate",
+    deleteSpeakerProfileTitle: "Delete speaker profile?",
+    deleteSpeakerProfileDesc: "Deleting “{name}” cannot be undone.",
+    deleteSpeakerDisabledHint: "Remove this speaker from episode profiles before deleting it.",
+    deleting: "Deleting…",
+    episodeProfilesTitle: "Episode profiles",
+    episodeProfilesDesc: "Define reusable generation settings for your shows.",
+    createProfile: "Create profile",
+    createSpeakerFirst: "Create a speaker profile before adding an episode profile.",
+    noEpisodeProfiles: "No episode profiles yet. Create one to kickstart podcast generation.",
+    speakerCreated: "Speaker Created",
+    speakerCreatedDesc: "The speaker \"{name}\" has been successfully added.",
+    failedToCreateSpeaker: "Failed to create speaker profile",
+    speakerUpdated: "Speaker Updated",
+    speakerUpdatedDesc: "The speaker \"{name}\" has been successfully updated.",
+    failedToUpdateSpeaker: "Failed to update speaker profile",
+    speakerDeleted: "Speaker Deleted",
+    speakerDeletedDesc: "The speaker \"{name}\" has been successfully removed.",
+    failedToDeleteSpeaker: "Failed to delete speaker profile",
+    speakerDuplicated: "Speaker Duplicated",
+    speakerDuplicatedDesc: "The speaker \"{name}\" has been successfully duplicated.",
+    failedToDuplicateSpeaker: "Failed to duplicate speaker profile",
+    generationStarted: "Generation Started",
+    generationStartedDesc: "Podcast generation has been queued.",
+    failedToStartGeneration: "Failed to start generation",
+    tryAgainMoment: "Please try again in a moment.",
+    deleteProfileTitle: "Delete profile?",
+    deleteProfileDesc: "This will remove “{name}”. Existing episodes keep their data, but new ones will no longer use this configuration.",
+    profileCreated: "Profile Created",
+    profileCreatedDesc: "The episode profile \"{name}\" has been successfully created.",
+    failedToCreateProfile: "Failed to create profile",
+    profileUpdated: "Profile Updated",
+    profileUpdatedDesc: "The episode profile \"{name}\" has been successfully updated.",
+    failedToUpdateProfile: "Failed to update profile",
+    profileDeleted: "Profile Deleted",
+    profileDeletedDesc: "The episode profile \"{name}\" has been successfully removed.",
+    failedToDeleteProfile: "Failed to delete profile",
+    failedToDeleteProfileDesc: "Failed to remove the episode profile.",
+    profileDuplicated: "Profile Duplicated",
+    profileDuplicatedDesc: "The episode profile \"{name}\" has been successfully duplicated.",
+    failedToDuplicateProfile: "Failed to duplicate profile",
+    episodeDeleted: "Episode Deleted",
+    episodeDeletedDesc: "The episode has been successfully deleted.",
+    failedToDeleteEpisode: "Failed to delete episode",
+    failedToDeleteSpeakerDesc: "Failed to remove the speaker profile.",
+    outlineModel: "Outline model",
+    transcriptModel: "Transcript model",
+    segments: "Segments",
+    defaultBriefingTitle: "Default briefing",
+    created: "Created at {time}",
+    details: "Details",
+    summaryTab: "Summary",
+    outlineTab: "Outline",
+    transcriptTab: "Transcript",
+    briefing: "Briefing",
+    noOutline: "No outline available.",
+    noTranscript: "No transcript available.",
+    deleteEpisodeTitle: "Delete episode?",
+    deleteEpisodeDesc: "This will remove “{name}” and its audio file permanently.",
+    audioUnavailable: "Audio unavailable",
+    segment: "Segment",
+    speaker: "Speaker",
+    profile: "Profile",
+    link: "Link",
+    file: "File",
+    embedded: "Embedded",
+    notEmbedded: "Not embedded",
+    noSpeakerProfilesAvailable: "No speaker profiles available",
+    noLanguageModelsAvailable: "No language models available",
+    editEpisodeProfile: "Edit Episode Profile",
+    createEpisodeProfile: "Create Episode Profile",
+    episodeProfileFormDesc: "Define how episodes should be generated and which speaker configuration they use by default.",
+    noSpeakerProfilesDesc: "Create a speaker profile before configuring an episode profile.",
+    noLanguageModelsDesc: "Add language models in the Models section to configure outline and transcript generation.",
+    profileName: "Profile name",
+    profileNamePlaceholder: "e.g., Tech discussion",
+    descriptionPlaceholder: "Short summary of when to use this profile",
+    speakerConfig: "Speaker configuration",
+    selectSpeakerProfile: "Select a speaker profile",
+    outlineGeneration: "Outline generation",
+    transcriptGeneration: "Transcript generation",
+    defaultBriefingPlaceholder: "Outline the structure, tone, and goals for this episode format",
+    editSpeakerProfile: "Edit Speaker Profile",
+    createSpeakerProfile: "Create Speaker Profile",
+    speakerProfileFormDesc: "Configure text-to-speech settings and define up to four speakers.",
+    noTtsModelsAvailable: "No text-to-speech models available",
+    noTtsModelsDesc: "Add TTS models in the Models section before creating a speaker profile.",
+    speakers: "Speakers",
+    speakersDesc: "Configure between one and four voices for this profile.",
+    addSpeaker: "Add speaker",
+    speakerNumber: "Speaker {number}",
+    backstoryPlaceholder: "Short biography or context for the speaker",
+    personalityPlaceholder: "Describe style and tone",
+    outlineProviderRequired: "Outline provider is required",
+    outlineModelRequired: "Outline model is required",
+    transcriptProviderRequired: "Transcript provider is required",
+    transcriptModelRequired: "Transcript model is required",
+    defaultBriefingRequired: "Default briefing is required",
+    segmentsInteger: "Must be an integer",
+    segmentsMin: "At least 3 segments",
+    segmentsMax: "Maximum 20 segments",
+    voiceIdRequired: "Voice ID is required",
+    backstoryRequired: "Backstory is required",
+    personalityRequired: "Personality is required",
+    speakerCountMin: "At least one speaker is required",
+    speakerCountMax: "You can configure up to 4 speakers",
+    delete: "Delete",
+    unknown: "Unknown",
+    deleteSuccess: "Podcast deleted successfully",
+    failedToDelete: "Failed to delete podcast",
+  },
+  settings: {
+    contentProcessing: "Content Processing",
+    contentProcessingDesc: "Configure how documents and URLs are processed",
+    docEngine: "Document Processing Engine",
+    docEnginePlaceholder: "Select document processing engine",
+    urlEngine: "URL Processing Engine",
+    urlEnginePlaceholder: "Select URL processing engine",
+    autoRecommended: "Auto (Recommended)",
+    simple: "Simple",
+    docling: "Docling",
+    helpMeChoose: "Help me choose",
+    docHelp: "· Docling is a little slower but more accurate, specially if the documents contain tables and images. · Simple will extract any content from the document without formatting it. · Auto (recommended) will try to process through docling and default to simple.",
+    firecrawl: "Firecrawl",
+    jina: "Jina",
+    urlHelp: "· Firecrawl is a paid service (with a free tier), and very powerful. · Jina is a good option as well and also has a free tier. · Simple will use basic HTTP extraction and will miss content on javascript-based websites. · Auto (recommended) will try to use firecrawl then Jina, finally fallback to simple.",
+    embeddingAndSearch: "Embedding and Search",
+    embeddingAndSearchDesc: "Configure search and embedding options",
+    defaultEmbeddingOption: "Default Embedding Option",
+    embeddingOptionPlaceholder: "Select embedding option",
+    ask: "Ask",
+    always: "Always",
+    never: "Never",
+    embeddingHelp: "Embedding the content will make it easier to find by you and by your AI agents. If you are running a local embedding model (Ollama, for example), you shouldn't worry about cost and just embed everything.",
+    fileManagement: "File Management",
+    fileManagementDesc: "Configure file handling and storage options",
+    autoDeleteFiles: "Auto Delete Files",
+    autoDeletePlaceholder: "Select auto delete option",
+    filesHelp: "Once your files are uploaded and processed, they are not required anymore. Most users should allow Open Notebook to delete uploaded files from the upload folder automatically.",
+    loadFailed: "Failed to load settings",
+  },
+  advanced: {
+    title: "AdvancedTools",
+    desc: "Advanced tools and utilities for power users",
+    systemInfo: "System Info",
+    systemInfoDesc: "View the status of underlying system components",
+    rebuildEmbeddings: "Rebuild Embeddings",
+    rebuildEmbeddingsDesc: "Rebuild vector search index for all sources",
+    rebuildWarning: "This action can be very time-consuming depending on the number of sources you have. It will clear existing vector indices and re-generate embeddings for everything.",
+    startRebuild: "Start Rebuild",
+    rebuilding: "Rebuilding...",
+    rebuildSuccess: "Embedding rebuild started successfully",
+    currentVersion: "Current Version",
+    latestVersion: "Latest Version",
+    status: "Status",
+    updateAvailable: "Version {version} Available",
+    updateAvailableDesc: "A new version of Open Notebook is available.",
+    upToDate: "Up to Date",
+    unknown: "Unknown",
+    viewOnGithub: "View on GitHub",
+    updateCheckFailed: "Unable to check for updates. GitHub may be unreachable.",
+    rebuild: {
+      mode: "Rebuild Mode",
+      existing: "Existing",
+      all: "All",
+      existingDesc: "Re-embed only items that already have embeddings (faster, for model switching)",
+      allDesc: "Re-embed existing items + create embeddings for items without any (slower, comprehensive)",
+      include: "Include in Rebuild",
+      selectOneError: "Please select at least one item type to rebuild",
+      starting: "Starting Rebuild...",
+      startBtn: "🚀 Start Rebuild",
+      queued: "Queued",
+      running: "Running...",
+      completed: "Completed!",
+      failed: "Failed",
+      leavePageHint: "You can leave this page as this will run in the background",
+      startNew: "Start New Rebuild",
+      itemsProcessed: "{processed}/{total} items ({percent}%)",
+      failedItems: "{count} items failed to process",
+      time: "Time",
+      whenToRebuild: "When should I rebuild embeddings?",
+      whenToRebuildAns: "You should rebuild when switching models, upgrading versions, fixing corruption, or after bulk imports.",
+      howLong: "How long does rebuilding take?",
+      howLongAns: "Processing time depends on item count, model speed, and API rate limits. Local models are usually very fast.",
+      isSafe: "Is it safe to rebuild while using the app?",
+      isSafeAns: "Yes, rebuilding is safe! It doesn't delete content, only replaces embeddings, and handles errors gracefully.",
+    },
+  },
+  transformations: {
+    title: "Transformations",
+    desc: "Transformations are prompts that will be used by the LLM to process a source and extract insights, summaries, etc.",
+    workspace: "Choose a workspace",
+    playground: "Playground",
+    defaultPrompt: "Default Transformation Prompt",
+    defaultPromptDesc: "This will be added to all your transformation prompts",
+    defaultPromptPlaceholder: "Enter your default transformation instructions...",
+    saveDefault: "Save Default",
+    listTitle: "Custom Transformations",
+    createNew: "Create New",
+    testInPlayground: "Test in Playground",
+    inputLabel: "Input Text",
+    inputPlaceholder: 'Enter some text to transform...',
+    outputLabel: 'Output',
+    runTest: 'Run Transformation',
+    running: 'Running...',
+    selectToStart: 'Select a transformation to start',
+    name: 'Name',
+    namePlaceholder: 'Unique identifier, e.g. key_topics',
+    titlePlaceholder: 'Displayed title, defaults to name',
+    promptPlaceholder: 'Write the prompt that will power this transformation...',
+    descriptionPlaceholder: 'Describe what this transformation does.',
+    suggestDefault: 'Suggest by default on new sources',
+    promptHint: 'Prompts should be written with the source content in mind. You can ask the model to summarise, extract insights, or produce structured outputs such as tables.',
+    createSuccess: 'Transformation created successfully',
+    updateSuccess: 'Transformation updated successfully',
+    deleteSuccess: 'Transformation deleted successfully',
+    noTransformations: "No transformations yet",
+    createOne: "Create a transformation to get started",
+    deleteDesc: "Deleting this transformation cannot be undone.",
+    selectModel: "Select a model",
+    deleteConfirm: "Are you sure you want to delete this transformation?",
+    model: "Model",
+    systemPrompt: "System Prompt",
+    type: "Type",
+    extraction: "Extraction",
+    summary: "Summary",
+    custom: "Custom",
+    saveChanges: "Save Changes",
+    overrideModelDesc: "Override the default model for this chat session. Leave empty to use the system default.",
+    sessionUseReplacement: "This session will use {name} instead of the default model.",
+    systemDefault: "System Default",
+  },
+  models: {
+    title: "Model Management",
+    desc: "Configure AI models for different purposes across Open Notebook",
+    failedToLoad: "Failed to load models data",
+    language: "Language Models",
+    embedding: "Embedding Models",
+    tts: "Text to Speech (TTS)",
+    stt: "Speech to Text (STT)",
+    providers: "Providers",
+    defaultModels: "Default Models",
+    status: "Status",
+    notConfigured: "Not configured",
+    active: "Active",
+    inactive: "Inactive",
+    configure: "Configure",
+    saveChanges: "Save Changes",
+    addModel: "Add Model",
+    modelName: "Model Name",
+    provider: "Provider",
+    apiKey: "API Key",
+    baseUrl: "Base URL",
+    capabilities: "Capabilities",
+    enabled: "Enabled",
+    disabled: "Disabled",
+    deleteConfirm: "Are you sure you want to delete this model?",
+    deleteSuccess: "Model deleted successfully",
+    saveSuccess: "Model saved successfully",
+    providerStatus: "Provider Status",
+    connectionOk: "Connection OK",
+    connectionFailed: "Connection failed",
+    changeEmbeddingWarning: "Changing the default embedding model will affect new sources. Existing sources might need to be re-indexed.",
+    changeEmbeddingTitle: "Change Default Embedding Model?",
+    aiProviders: "AI Providers",
+    providerConfigDesc: "Configure providers through environment variables to enable their models.",
+    configuredCount: "{count} of {total} configured",
+    noModels: "No models",
+    learnMore: "Learn how to configure providers →",
+    seeLess: "See less",
+    seeAll: "See all {count} providers",
+    language_models: "Language Models",
+    embedding_models: "Embedding Models",
+    text_to_speech: "Text to Speech (TTS)",
+    speech_to_text: "Speech to Text (STT)",
+    languageDesc: "Chat, transformations, and text generation",
+    embeddingDesc: "Semantic search and vector embeddings",
+    ttsDesc: "Generate audio from text",
+    sttDesc: "Transcribe audio to text",
+    all: "All",
+    noModelsConfigured: "No models configured",
+    noProviderModelsConfigured: "No {provider} models configured",
+    showMore: "Show {count} more",
+    deleteModel: "Delete Model",
+    deleteModelDesc: "Are you sure you want to delete \"{name}\"? This action cannot be undone.",
+    defaultAssignments: "Default Model Assignments",
+    defaultAssignmentsDesc: "Configure which models to use for different purposes across Open Notebook",
+    missingRequiredModels: "Missing required models: {models}. Open Notebook may not function properly without these.",
+    selectModelPlaceholder: "Select a model",
+    requiredModelPlaceholder: "⚠️ Required - Select a model",
+    whichModelToChoose: "Which model should I choose? →",
+    chatModelLabel: "Chat Model",
+    chatModelDesc: "Used for chat conversations",
+    transformationModelLabel: "Transformation Model",
+    transformationModelDesc: "Used for summaries, insights, and transformations",
+    toolsModelLabel: "Tools Model",
+    toolsModelDesc: "Used for function calling - OpenAI or Anthropic recommended",
+    largeContextModelLabel: "Large Context Model",
+    largeContextModelDesc: "Used for processing large documents - Gemini recommended",
+    embeddingModelLabel: "Embedding Model",
+    embeddingModelDesc: "Used for semantic search and vector embeddings",
+    ttsModelLabel: "Text-to-Speech Model",
+    ttsModelDesc: "Used for podcast generation",
+    sttModelLabel: "Speech-to-Text Model",
+    sttModelDesc: "Used for audio transcription",
+    addSpecificModel: "Add {type} Model",
+    addSpecificModelDesc: "Configure a new {type} model from available providers.",
+    noProvidersForType: "No providers available for {type} models",
+    selectProviderPlaceholder: "Select a provider",
+    providerRequired: "Provider is required",
+    modelNameRequired: "Model name is required",
+    modelRequired: "Model is required",
+    adding: "Adding...",
+    azureHint: "For Azure, use the deployment name as the model name",
+    enterModelName: "Enter model name",
+    embeddingChangeTitle: "Embedding Model Change",
+    embeddingChangeConfirm: "You are about to change your embedding model from {from} to {to}.",
+    rebuildRequired: "Important: Rebuild Required",
+    rebuildReason: "Changing your embedding model requires rebuilding all existing embeddings to maintain consistency. Without rebuilding, your searches may return incorrect or incomplete results.",
+    whatHappensNext: "What happens next:",
+    step1: "Your default embedding model will be updated",
+    step2: "Existing embeddings will remain unchanged until rebuild",
+    step3: "New content will use the new embedding model",
+    step4: "You should rebuild embeddings as soon as possible",
+    proceedToRebuildPrompt: "Would you like to proceed to the Advanced page to start the rebuild now?",
+    changeModelOnly: "Change Model Only",
+    changeAndRebuild: "Change & Go to Rebuild",
+  }
+}
diff --git a/frontend/src/lib/locales/index.test.ts b/frontend/src/lib/locales/index.test.ts
new file mode 100644
index 0000000..ba925a4
--- /dev/null
+++ b/frontend/src/lib/locales/index.test.ts
@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest'
+import { enUS } from './en-US'
+import { zhCN } from './zh-CN'
+import { zhTW } from './zh-TW'
+
+describe('Internationalization Locales Integrity', () => {
+  const getKeys = (obj: Record<string, unknown>, prefix = ''): string[] => {
+    return Object.keys(obj).reduce((res: string[], el) => {
+      const val = obj[el]
+      if (typeof val === 'object' && val !== null && !Array.isArray(val)) {
+        return [...res, ...getKeys(val as Record<string, unknown>, prefix + el + '.')]
+      }
+      return [...res, prefix + el]
+    }, [])
+  }
+
+  const enKeys = getKeys(enUS)
+  const zhCNKeys = getKeys(zhCN)
+  const zhTWKeys = getKeys(zhTW)
+
+  it('zh-CN should have the same keys as en-US', () => {
+    const missingInZhCN = enKeys.filter(key => !zhCNKeys.includes(key))
+    const extraInZhCN = zhCNKeys.filter(key => !enKeys.includes(key))
+
+    expect(missingInZhCN, `Missing keys in zh-CN: ${missingInZhCN.join(', ')}`).toEqual([])
+    expect(extraInZhCN, `Extra keys in zh-CN: ${extraInZhCN.join(', ')}`).toEqual([])
+  })
+
+  it('zh-TW should have the same keys as en-US', () => {
+    const missingInZhTW = enKeys.filter(key => !zhTWKeys.includes(key))
+    const extraInZhTW = zhTWKeys.filter(key => !enKeys.includes(key))
+
+    expect(missingInZhTW, `Missing keys in zh-TW: ${missingInZhTW.join(', ')}`).toEqual([])
+    expect(extraInZhTW, `Extra keys in zh-TW: ${extraInZhTW.join(', ')}`).toEqual([])
+  })
+})
diff --git a/frontend/src/lib/locales/index.ts b/frontend/src/lib/locales/index.ts
new file mode 100644
index 0000000..fda8858
--- /dev/null
+++ b/frontend/src/lib/locales/index.ts
@@ -0,0 +1,26 @@
+import { zhCN } from './zh-CN';
+import { enUS } from './en-US';
+import { zhTW } from './zh-TW';
+
+export const resources = {
+  'zh-CN': { translation: zhCN },
+  'en-US': { translation: enUS },
+  'zh-TW': { translation: zhTW },
+} as const;
+
+export type TranslationKeys = typeof enUS;
+
+export type LanguageCode = 'zh-CN' | 'en-US' | 'zh-TW';
+
+export type Language = {
+  code: LanguageCode;
+  label: string;
+};
+
+export const languages: Language[] = [
+  { code: 'en-US', label: 'English' },
+  { code: 'zh-CN', label: '简体中文' },
+  { code: 'zh-TW', label: '繁體中文' },
+];
+
+export { zhCN, enUS, zhTW };
diff --git a/frontend/src/lib/locales/zh-CN/index.ts b/frontend/src/lib/locales/zh-CN/index.ts
new file mode 100644
index 0000000..9de605a
--- /dev/null
+++ b/frontend/src/lib/locales/zh-CN/index.ts
@@ -0,0 +1,950 @@
+export const zhCN = {
+  common: {
+    search: "搜索...",
+    chat: '聊天',
+    notes: '笔记',
+    create: "新建",
+    new: "新建",
+    cancel: "取消",
+    save: "保存",
+    nameRequired: "这是必填项",
+    delete: "删除",
+    edit: "编辑",
+    actions: "快捷操作",
+    theme: "主题",
+    signOut: "退出登录",
+    noMatches: "未找到匹配项",
+    tryDifferentSearch: "尝试使用不同的搜索词。",
+    light: "浅色",
+    dark: "深色",
+    system: "系统",
+    loading: "加载中...",
+    note: "笔记",
+    insight: "洞察",
+    newSource: "新建来源",
+    newNotebook: "新建笔记本",
+    newPodcast: "新建播客",
+    language: "语言",
+    english: "English",
+    chinese: "简体中文",
+    source: "来源",
+    notebook: "笔记本",
+    podcast: "播客",
+    quickActions: "快捷操作",
+    quickActionsDesc: "导航、搜索、提问、主题",
+    appName: "Open Notebook",
+    add: "添加",
+    remove: "移除",
+    confirm: "确认",
+    warning: "警告",
+    error: "操作失败",
+    success: "操作成功",
+    modelConfiguration: "模型配置",
+    resetToDefault: "重置为默认",
+    sessions: "会话",
+    model: "模型",
+    send: "发送",
+    back: "返回",
+    next: "下一步",
+    done: "完成",
+    processing: "处理中...",
+    creating: "创建中...",
+    tokenCount: "Token",
+    charCount: "字符",
+    linked: "已关联",
+    added: "已于 {date} 添加",
+    adding: "正在添加...",
+    addSelected: "添加所选",
+    customModel: "自定义模型",
+    messages: "消息",
+    failed: "失败",
+    current: "当前",
+    writeNote: '撰写笔记',
+    batchMode: "批量模式",
+    optional: "可选",
+    type: "类型",
+    title: "标题",
+    created: "创建于 {time}",
+    updated: "更新于 {time}",
+    noResults: "未找到结果",
+    references: "引用",
+    refreshPage: "请重试刷新页面",
+    refresh: "刷新",
+    aiGenerated: "AI 生成",
+    human: "人类",
+    unknown: "未知",
+    details: "详情",
+    deleteForever: "永久删除",
+    connectionError: "连接错误",
+    unableToConnect: "无法连接到 API 服务器",
+    retryConnection: "重试连接",
+    diagnosticInfo: "诊断信息",
+    version: "版本",
+    built: "构建时间",
+    apiUrl: "API 地址",
+    frontendUrl: "前端地址",
+    checkConsoleLogs: "请检查浏览器控制台获取详细日志（搜索 🔧 [Config] 消息）",
+    yes: "是",
+    no: "否",
+    simple: "简单",
+    saving: "正在保存...",
+    description: "描述",
+    saveToNote: "保存到笔记",
+    copyToClipboard: "复制到剪贴板",
+    close: "关闭",
+    insights: "见解",
+    progress: "进度",
+    deleting: "正在删除...",
+    created_label: "创建时间",
+    updated_label: "更新时间",
+    download: "下载",
+    saveChanges: "保存更改",
+    name: "名称",
+    default: "默认",
+    notFound: "未找到",
+    reasoning: "推理过程",
+    searchTerms: "搜索词",
+    strategy: "策略",
+    individualAnswers: "独立回答 ({count})",
+    finalAnswer: "最终回答",
+    notebookLabel: "笔记本: {name}",
+    itemNotFound: "未找到该 {type}",
+    accessibility: {
+      navigation: "导航",
+      transformationViews: "转换视图",
+      searchKB: "向知识库提问或搜索",
+      searchNotebooks: "搜索笔记本",
+      enterQuestion: "输入您的问题以询问知识库",
+      enterSearch: "输入搜索词",
+      searchKBBtn: "搜索知识库",
+      podcastViews: "播客视图",
+      chatSessions: "对话 Session",
+      ytVideo: "YouTube 视频",
+      askResponse: "提问回答",
+    },
+    url: "URL",
+    errorDetails: "错误详情",
+    editTransformation: "编辑转换规则",
+    comingSoon: "敬请期待",
+    retry: "重试",
+    traditionalChinese: "繁体中文",
+    completed: "已完成",
+    saveSuccess: "保存成功",
+    contextModes: {
+      off: "未包含在聊天中",
+      insights: "仅限见解",
+      full: "全部内容",
+      clickToCycle: "点击循环切换",
+    },
+    clickToEdit: "点击编辑",
+  },
+  apiErrors: {
+    notebookNotFound: "找不到笔记本",
+    sourceNotFound: "找不到源文件",
+    transformationNotFound: "找不到转换规则",
+    fileUploadFailed: "文件上传失败",
+    urlRequired: "链接类型需要提供 URL",
+    contentRequired: "文本类型需要提供内容",
+    invalidSourceType: "无效的源类型",
+    processingFailed: "处理失败",
+    failedToQueue: "排队处理失败",
+    invalidSortBy: "排序字段必须是 'created' 或 'updated'",
+    invalidSortOrder: "排序方向必须是 'asc' 或 'desc'",
+    accessDenied: "文件访问被拒绝",
+    fileNotFoundOnServer: "服务器上找不到该文件",
+    failedToCreateSession: "创建对话失败",
+    failedToUpdateSession: "更新会话失败",
+    failedToDeleteSession: "删除会话失败",
+    failedToSendMessage: "发送消息失败",
+    pleaseEnterQuestion: "请输入问题",
+    pleaseConfigureModels: "请配置所有必选模型",
+    askFailed: "提问失败",
+    searchFailed: "搜索失败",
+    unauthorized: "无权访问，请检查您的密码",
+    invalidPassword: "密码错误",
+    missingAuth: "缺少身份验证信息",
+    embeddingModelRequired: "此功能需要嵌入模型。请在模型设置中配置一个。",
+    strategyModelNotFound: "未找到策略模型",
+    answerModelNotFound: "未找到回答模型",
+    finalAnswerModelNotFound: "未找到最终回答模型",
+    noAnswerGenerated: "未能生成回答",
+    genericError: "发生了意外错误",
+  },
+  connectionErrors: {
+    apiTitle: "无法连接到 API 服务器",
+    apiDesc: "无法访问 Open Notebook API 服务器",
+    dbTitle: "数据库连接失败",
+    dbDesc: "API 服务器正在运行，但无法访问数据库",
+    troubleshooting: "这通常意味着：",
+    apiUnreachable1: "API 服务器未运行",
+    apiUnreachable2: "API 服务器运行在不同的地址",
+    apiUnreachable3: "网络连接问题",
+    dbFailed1: "SurrealDB 未运行",
+    dbFailed2: "数据库连接设置不正确",
+    dbFailed3: "API 与数据库之间的网络问题",
+    quickFixes: "快速修复：",
+    setApiUrl: "设置 API_URL 环境变量：",
+    checkSurreal: "检查 SurrealDB 是否运行：",
+    seeDocumentation: "有关详细设置说明，请参阅：",
+    docLink: "Open Notebook 文档",
+    showTechnical: "显示技术细节",
+    attemptedUrl: "尝试的 URL",
+    message: "消息",
+    technicalDetails: "技术细节",
+    stackTrace: "堆栈跟踪",
+    retryLabel: "重试连接",
+    retryHint: "按 R 或点击按钮重试",
+    dockerLabel: "对于 Docker",
+    localDevLabel: "对于本地开发",
+  },
+  auth: {
+    loginTitle: "Open Notebook",
+    loginDesc: "输入密码以访问应用程序",
+    passwordPlaceholder: "密码",
+    signingIn: "正在登录...",
+    signIn: "登录",
+    unhandledError: "登录过程中出现未处理的错误",
+    connectErrorHint: "无法连接到服务器。请检查 API 是否正在运行。",
+  },
+  navigation: {
+    collect: "采集",
+    process: "处理",
+    create: "创作",
+    manage: "管理",
+    sources: "来源",
+    notebooks: "笔记本",
+    askAndSearch: "询问与搜索",
+    search: "搜索",
+    ask: "提问",
+    podcasts: "播客",
+    models: "模型",
+    transformations: "转换",
+    transformation: "转换",
+    settings: "设置",
+    advanced: "高级",
+    nav: "导航",
+    language: "切换语言",
+    theme: "主题",
+  },
+  notebooks: {
+    title: "笔记本",
+    newNotebook: "创建笔记本",
+    searchPlaceholder: "搜索笔记本...",
+    archived: "已归档",
+    archive: "归档",
+    unarchive: "取消归档",
+    deleteNotebook: "删除笔记本",
+    deleteNotebookDesc: "您确定要删除此笔记本吗？此操作无法撤销。",
+    activeNotebooks: "活动的笔记本",
+    archivedNotebooks: "归档的笔记本",
+    emptyDescription: "从创建您的第一个笔记本开始，组织您的研究。",
+    noActiveNotebooks: "没有活动的笔记本",
+    noArchivedNotebooks: "没有归档的笔记本",
+    notFound: "未找到笔记本",
+    notFoundDesc: "请求的笔记本不存在。",
+    noDescription: "暂无描述...",
+    updated: "已更新",
+    namePlaceholder: "笔记本名称",
+    addDescription: "添加描述...",
+    noNotesYet: "暂无笔记",
+    deleteNote: "删除笔记",
+    deleteNoteConfirm: "确定要删除此笔记吗？此操作无法撤销。",
+    noteCreatedSuccess: "笔记创建成功",
+    failedToCreateNote: "创建笔记失败",
+    noteUpdatedSuccess: "笔记更新成功",
+    failedToUpdateNote: "更新笔记失败",
+    noteDeletedSuccess: "笔记删除成功",
+    failedToDeleteNote: "删除笔记失败",
+    createNew: "创建新笔记本",
+    createNewDesc: "输入名称和可选描述以开始。",
+    descPlaceholder: "在此添加有关此笔记本的更多信息...",
+    createSuccess: "笔记本创建成功",
+    updateSuccess: "笔记本更新成功",
+    deleteSuccess: "笔记本删除成功",
+  },
+  sources: {
+    title: "来源",
+    add: "添加来源",
+    addNew: "添加新来源",
+    addExisting: "添加现有来源",
+    allSourcesDescShort: "在此查看所有来源。",
+    cannotSaveNoteNoNotebook: "无法保存笔记：缺少笔记本 ID",
+    empty: "暂无来源",
+    emptyDesc: "添加您的第一个来源，开始构建您的知识库。",
+    delete: "删除来源",
+    deleteMsg: "确定要删除此来源吗？此操作无法撤销。",
+    statusPreparing: "正在准备",
+    statusQueued: "已排队",
+    statusProcessing: "正在处理",
+    statusCompleted: "已完成",
+    statusFailed: "处理失败",
+    statusPreparingDesc: "准备处理中",
+    statusQueuedDesc: "等待处理",
+    statusProcessingDesc: "正在处理内容",
+    statusCompletedDesc: "处理成功",
+    statusFailedDesc: "处理失败",
+    failedToLoad: "加载来源失败",
+    allSourcesDesc: "在此查看所有来源。您可以添加新来源或管理现有来源。",
+    allSources: "所有来源",
+    insights: "见解",
+    yes: "是",
+    no: "否",
+    loadingMore: "正在加载更多...",
+    deleteConfirm: "确定要删除吗？",
+    deleteConfirmWithTitle: "确定要删除 \"{title}\" 吗？",
+    deleteSuccess: "来源删除成功。注意：要从存储中删除文件，必须在设置页面中启用“删除文件”选项。",
+    failedToDelete: "删除来源失败",
+    sourceQueued: "来源已加入队列",
+    sourceQueuedDesc: "来源已提交进行后台处理。您可以在来源列表中监控进度。",
+    sourceAddedSuccess: "来源添加成功",
+    failedToAddSource: "添加来源失败",
+    sourceUpdatedSuccess: "来源更新成功",
+    failedToUpdateSource: "更新来源失败",
+    sourceDeletedSuccess: "来源删除成功",
+    failedToDeleteSource: "删除来源失败",
+    fileUploadedSuccess: "文件上传成功",
+    failedToUploadFile: "文件上传失败",
+    sourceRequeued: "来源重试已加入队列",
+    sourceRequeuedDesc: "来源已重新加入处理队列。",
+    failedToRetry: "重试失败",
+    failedToRetryDesc: "重试来源处理失败。请重试。",
+    sourcesAddedToNotebook: "{count} 个来源已添加到笔记本",
+    failedToAddSourcesToNotebook: "添加来源到笔记本失败",
+    partialAddSuccess: "{success} 个来源已添加，{failed} 个失败",
+    sourceRemovedFromNotebook: "来源已成功从笔记本中移除",
+    failedToRemoveSourceFromNotebook: "从笔记本中移除来源失败",
+    removeConfirm: "确定要从此笔记本移除吗？",
+    noSourcesYet: "暂无来源",
+    createFirstSource: "添加您的第一个来源开始构建知识库。",
+    deleteSourceConfirm: "确定要删除此来源吗？",
+    checking: "正在检查...",
+    untitledSource: "未命名来源",
+    maxItems: "最多 {count} 个",
+    insightsCount: "{count} 条见解",
+    details: "详情",
+    detailsTitle: "来源详情",
+    content: "内容",
+    metadata: "元数据",
+    type: {
+      link: "链接",
+      file: "文件",
+      text: "文本",
+    },
+    id: "来源 ID",
+    topics: "主题",
+    embedded: "已嵌入向量",
+    notEmbedded: "未嵌入向量",
+    embedContent: "嵌入内容",
+    embedding: "正在嵌入...",
+    alreadyEmbedded: "已嵌入",
+    downloadFile: "下载文件",
+    fileUnavailable: "文件不可用",
+    preparing: "正在准备...",
+    generateNewInsight: "生成新见解",
+    selectTransformation: "选择转换规则...",
+    noInsightsYet: "暂无见解",
+    createFirstInsight: "使用上方的转换规则创建您的第一个见解",
+    viewInsight: "查看见解",
+    viewSource: "查看来源",
+    noInsightSelected: "未选择见解",
+    sourceInsight: "来源见解",
+    manageNotebooks: "管理所属笔记本",
+    manageNotebooksDesc: "管理包含此来源的笔记本",
+    noNotebooksAvailable: "暂无可用笔记本",
+    deleteInsight: "删除见解",
+    deleteInsightConfirm: "确定要删除此见解吗？此操作无法撤销。",
+    notEmbeddedAlert: "内容未嵌入向量",
+    notEmbeddedDesc: "此内容尚未为了向量搜索进行嵌入。嵌入可以启用高级搜索功能并更好地发现内容。",
+    openOnYoutube: "在 YouTube 上打开",
+    urlCopied: "URL 已复制到剪贴板",
+    loadFailed: "加载来源详情失败",
+    removeFromNotebook: "从笔记本移除",
+    retryProcessing: "重试处理",
+    deleteSource: "删除来源",
+    retry: "重试",
+    progress: "进度",
+    addExistingTitle: "添加现有来源",
+    addExistingDesc: "从您的所有笔记本中选择已有的来源添加到当前笔记本。",
+    searchPlaceholder: "通过名称或 URL 搜索来源...",
+    noNotebooksFound: "未找到笔记本。",
+    showingFirst100: "仅显示前 100 个来源。请使用搜索功能查找特定来源。",
+    selectedCount: "已选择 {count} 个来源",
+    added: "已添加于 {date}",
+    noNotesYet: '暂无笔记',
+    createFirstNote: '创建您的第一条笔记，记录见解与观察。',
+    deleteNote: '删除笔记',
+    deleteNoteConfirm: '您确定要删除此笔记吗？此操作无法撤销。',
+    editNote: '编辑笔记',
+    createNote: '创建笔记',
+    addTitle: '添加标题...',
+    untitledNote: '无标题笔记',
+    writeNotePlaceholder: '在此处编写您的笔记内容...',
+    saveNote: '保存笔记',
+    createNoteBtn: '创建笔记',
+    urlLabel: 'URL(s) *',
+    fileLabel: '文件(s) *',
+    textContentLabel: '文本内容 *',
+    enterUrlsPlaceholder: '每行输入一个 URL\nhttps://example.com/article1\nhttps://example.com/article2',
+    batchUrlHint: '粘贴多个 URL（每行一个）进行批量导入',
+    invalidUrlsDetected: '检测到无效的 URL：',
+    lineLabel: '第 {line} 行',
+    fixInvalidUrls: '请修正或移除无效的 URL 以继续',
+    selectMultipleFilesHint: '选择多个文件进行批量导入。支持：文档 (PDF, DOC, DOCX, PPT, XLS, EPUB, TXT, MD)，媒体 (MP4, MP3, WAV, M4A)，图片 (JPG, PNG)，归档 (ZIP)',
+    selectedFiles: '已选择文件：',
+    textPlaceholder: '在此处粘贴或输入您的内容...',
+    titlePlaceholder: '为您的来源起一个描述性的标题',
+    batchTitlesAuto: '将为每个来源自动生成标题。',
+    batchCommonSettings: '同样的笔记本和转换将应用于所有项目。',
+    urlsCount: '{count} 个 URL',
+    filesCount: '{count} 个文件',
+    addSource: "添加来源",
+    addUrl: "添加 URL",
+    uploadFile: "上传文件",
+    enterText: "输入文本",
+    processDescription: "内容将经过处理并由 AI 分析。",
+    processingFiles: "正在处理您的文件...",
+    titleRequired: "文本内容必须提供标题",
+    titleGenerated: "如果留空，将根据内容自动生成标题",
+    batchCount: "将处理 {count} 个{type}",
+    enableEmbedding: "启用搜索向量嵌入",
+    embeddingDesc: "允许此来源在向量搜索和 AI 查询中被检索",
+    embeddingAlways: "已自动启用嵌入",
+    embeddingAlwaysDesc: "您的设置已配置为始终对内容进行向量嵌入。",
+    embeddingNever: "嵌入已禁用",
+    embeddingNeverDesc: "您的设置已配置为跳过嵌入。此来源将无法进行向量搜索。",
+    changeInSettings: "您可以在此处更改设置：",
+    notFound: "未找到来源",
+    noContent: "暂无内容",
+    insightsDesc: "根据模型分析生成的见解",
+    uploadedFile: "已上传文件",
+    fileUnavailableDesc: "由于存储系统原因，此文件目前不可用。",
+    batchSuccess: "成功创建 {count} 个来源",
+    batchFailed: "全部 {count} 个来源创建失败",
+    batchPartial: "{success} 个成功，{failed} 个失败",
+    submittingSource: "正在提交来源进行处理...",
+    contentRequired: "请提供所选来源类型所需的内容",
+    titleRequiredForText: "文本来源需要提供标题",
+    processingBatchSources: "正在处理 {count} 个来源，请稍候...",
+    processingSource: "正在处理您的来源，请稍候...",
+    maxFilesAllowed: "每批最多允许 {count} 个文件",
+  },
+  chat: {
+    sessions: "会话",
+    sessionTitlePlaceholder: "在此输入标题...",
+    noSessions: "暂无会话",
+    startChatting: "开始针对您的来源进行聊天。",
+    deleteSession: "删除会话",
+    deleteSessionDesc: "确定要删除此聊天会话吗？此操作无法撤销。",
+    sendPlaceholder: "向您的来源提问...",
+    newChat: "新建对话",
+    sessionsTitle: "对话列表",
+    clearhistory: "清空历史",
+    renameSession: "重命名会话",
+    noSourcesLinked: "未关联来源",
+    thinking: "AI 正在思考...",
+    chatWith: "与{name}对话",
+    startConversation: "开始针对{type}进行对话",
+    askQuestions: "提出问题以更好地理解内容",
+    pressToSend: "按 {key} 发送",
+    model: "模型",
+    createToStart: '创建一个会话以开始。',
+    chatWithNotebook: '与笔记本对话',
+    unableToLoadChat: '无法加载聊天',
+    noDescription: '暂无描述',
+    startByCreating: '从创建您的第一个笔记本开始，组织您的研究。',
+    messagesCount: "{count} 条消息",
+    sessionCreated: "聊天会话已创建",
+    sessionUpdated: "会话已更新",
+    sessionDeleted: "会话已删除",
+  },
+  searchPage: {
+    askAndSearch: "提问与搜索",
+    chooseAMode: "选择模式",
+    askBeta: "提问 (beta)",
+    search: "搜索",
+    askYourKb: "向您的知识库提问 (beta)",
+    askYourKbDesc: "大语言模型将根据您知识库中的文档回答您的查询。",
+    question: "问题",
+    enterQuestionPlaceholder: "输入您的问题...",
+    pressToSubmit: "按 Cmd/Ctrl+Enter 提交",
+    noEmbeddingModel: "您无法使用此功能，因为尚未选择嵌入模型。请在模型页面设置一个。",
+    usingCustomModels: "正在使用自定义模型",
+    usingDefaultModels: "正在使用默认模型",
+    advanced: "高级",
+    strategy: "策略",
+    answer: "回答",
+    final: "最终",
+    ask: "提问",
+    processing: "处理中...",
+    saveToNotebooks: "保存到笔记本",
+    searchDesc: "在您的知识库中搜索特定的关键字或概念",
+    enterSearchPlaceholder: "输入搜索查询...",
+    pressToSearch: "按 Enter 键搜索",
+    searchType: "搜索类型",
+    vectorSearchWarning: "向量搜索需要嵌入模型。目前仅文本搜索可用。",
+    textSearch: "文本搜索",
+    vectorSearch: "向量搜索",
+    searchIn: "搜索范围",
+    searchSources: "搜索来源",
+    searchNotes: "搜索笔记",
+    resultsFound: "{count} 个结果",
+    matches: "匹配项 ({count})",
+    noResultsFor: "未找到 “{query}” 的结果",
+    notSet: "未设置",
+    saveToNotebook: "保存到笔记本",
+    saveSuccess: "成功保存到笔记本",
+    saveError: "保存到笔记本失败",
+    selectNotebook: "选择笔记本",
+    createNewNotebook: "创建新笔记本",
+    cancel: "取消",
+    saving: "保存中...",
+    advancedModelTitle: "高级模型选择",
+    advancedModelDesc: "为提问过程的每个阶段选择特定的模型",
+    strategyModel: "策略模型",
+    answerModel: "回答模型",
+    finalAnswerModel: "最终回答模型",
+    selectStrategyPlaceholder: "选择策略模型",
+    selectAnswerPlaceholder: "选择回答模型",
+    selectFinalPlaceholder: "选择最终回答模型",
+    saveChanges: "保存更改",
+    searchAndAsk: "搜索与提问",
+    searchResultsFor: "搜索 “{query}”",
+    askAbout: "提问关于 “{query}”",
+    orSearchKb: "或搜索您的知识库",
+    processingQuestion: "正在处理您的问题...",
+  },
+  podcasts: {
+    podcastProfiles: {
+      business_analysis: "商业分析",
+      solo_expert: "独家专家",
+      tech_discussion: "技术研讨",
+    },
+    generateEpisode: "生成播客单集",
+    generateEpisodeDesc: "在生成新的播客单集之前，选择要包含的内容并配置单集详情。",
+    content: "内容",
+    contentDesc: "选择要包含在此单集中的笔记本、来源和笔记。",
+    itemsSelected: "{count} 个项目已选择",
+    tokens: "{count} token",
+    chars: "{count} 字符",
+    loadingNotebooks: "正在加载笔记本...",
+    noNotebooksFoundInPodcasts: "未找到笔记本。在生成播客之前，请先创建一个笔记本并添加内容。",
+    noContentSelected: "未选择内容",
+    summary: "摘要",
+    fullContent: "全部内容",
+    untitledSource: "未命名来源",
+    untitledNote: "未命名笔记",
+    episodeSettings: "单集设置",
+    episodeProfile: "单集简介",
+    episodeProfilePlaceholder: "选择单集简介",
+    episodeName: "单集名称",
+    episodeNamePlaceholder: "例如：AI 与工作的未来",
+    additionalInstructions: "附加指令",
+    instructionsPlaceholder: "任何要追加到单集简讯的补充建议...",
+    generating: "正在生成...",
+    generate: "生成",
+    hostPlaceholder: "主持人 {number}",
+    profileRequired: "需要单集简介",
+    profileRequiredDesc: "在生成播客之前，请选择一个单集简介。",
+    nameRequired: "需要单集名称",
+    nameRequiredDesc: "请为单集提供一个名称。",
+    addContext: "添加上下文",
+    addContextDesc: "至少选择一个来源或笔记包含在单集中。",
+    generationFailed: "播客生成失败",
+    speakerProfile: "主持人简介",
+    usesSpeakerProfile: "使用主持人简介",
+    sources: "来源",
+    notes: "笔记",
+    noSources: "此笔记本中没有可用的来源。",
+    noNotes: "此笔记本中没有可用的笔记。",
+    selectMode: "选择模式",
+    buildContextFailed: "构建上下文失败。请检查您的选择。",
+    podcastTaskStarted: "播客生成任务已开始",
+    loadingProfiles: "正在加载单集简介...",
+    noProfilesFound: "未找到单集简介。在生成播客之前，请先创建一个单集简介。",
+    listTitle: "播客",
+    listDesc: "跟踪生成的单集并管理可重复使用的模板。",
+    chooseAView: "选择视图",
+    episodesTab: "单集",
+    templatesTab: "模板",
+    overviewTitle: "单集概览",
+    overviewDesc: "监控播客生成任务并查看最终成品。",
+    generateBtn: "生成播客",
+    total: "总计",
+    processingLabel: "处理中",
+    completedLabel: "已完成",
+    failedLabel: "失败",
+    pendingLabel: "排队中",
+    loadErrorTitle: "加载单集失败",
+    loadErrorDesc: "无法获取最新的播客单集。请稍后重试。",
+    loadingEpisodes: "正在加载单集...",
+    noEpisodesYet: "暂无播客单集。从笔记本或来源聊天界面开始生成您的第一个单集。",
+    statusRunningTitle: "正在处理中",
+    statusRunningDesc: "正在活跃生成资产的单集。",
+    statusPendingTitle: "排队中 / 待处理",
+    statusPendingDesc: "已提交并在等待开始处理的单集。",
+    statusCompletedTitle: "已完成单集",
+    statusCompletedDesc: "可以查看、下载或发布。",
+    statusFailedTitle: "失败单集",
+    statusFailedDesc: "在生成过程中遇到问题的单集。",
+    templatesWorkspaceTitle: "模板工作区",
+    templatesWorkspaceDesc: "构建可重复使用的单集和发言人配置，以实现快速的播客制作。",
+    howTemplatesPowerTitle: "模板如何驱动播客生成",
+    howTemplatesPowerDesc: "模板将播客工作流拆分为两个可重复使用的构建块。在生成新单集时可以随时混合搭配它们。",
+    episodeProfilesSetFormat: "单集简介设定格式",
+    episodeProfilesList1: "概述分段数量及故事流向",
+    episodeProfilesList2: "选择用于简报、大纲和脚本编写的语言模型",
+    episodeProfilesList3: "存储默认简报，以便每个单集都以一致的基调开始",
+    speakerProfilesBringVoices: "发言人简介赋予声音生命",
+    speakerProfilesList1: "选择文字转语音库及模型",
+    speakerProfilesList2: "记录每个发言人的性格、背景故事和发音说明",
+    speakerProfilesList3: "在不同的单集格式中重复使用相同的主持人或嘉宾声音",
+    recommendedWorkflow: "推荐工作流",
+    workflowStep1: "为您需要的每个声音创建发言人简介",
+    workflowStep2: "构建按名称引用这些发言人的单集简介",
+    workflowStep3: "通过选择适合故事的单集简介来生成播客",
+    workflowHint: "单集简介按名称引用发言人简介，因此从发言人开始可以避免以后缺少声音指派。",
+    failedToLoadTemplates: "加载模板数据失败",
+    failedToLoadTemplatesDesc: "请确保 API 正在运行并重试。某些部分可能不完整。",
+    loadingTemplates: "正在加载模板...",
+    speakerProfilesTitle: "发言人简介",
+    speakerProfilesDesc: "为生成的单集配置声音和性格。",
+    createSpeaker: "创建发言人",
+    noSpeakerProfiles: "暂无发言人简介。创建一个以使单集模板可用。",
+    noDescription: "未提供描述。",
+    usedByCount_one: "被 1 个单集使用",
+    usedByCount_other: "被 {count} 个单集使用",
+    usedByCount: "被 {count} 个单集使用",
+    unused: "未使用",
+    voiceId: "声音 ID",
+    backstory: "背景故事",
+    personality: "性格",
+    edit: "编辑",
+    duplicate: "复制",
+    deleteSpeakerProfileTitle: "删除发言人简介？",
+    deleteSpeakerProfileDesc: "删除 “{name}” 无法撤销。",
+    deleteSpeakerDisabledHint: "在删除之前，请先从单集简介中移除该发言人。",
+    deleting: "正在删除...",
+    episodeProfilesTitle: "单集简介",
+    episodeProfilesDesc: "为您播客定义可重复使用的生成设置。",
+    createProfile: "创建简介",
+    createSpeakerFirst: "在添加单集简介之前，请先创建一个发言人简介。",
+    noEpisodeProfiles: "暂无单集简介。创建一个以启动播客生成。",
+    deleteProfileTitle: "删除简介？",
+    deleteProfileDesc: "这将移除 “{name}”。现有单集将保留其数据，但新单集将不再使用此配置。",
+    outlineModel: "大纲模型",
+    transcriptModel: "脚本模型",
+    segments: "分段数量",
+    defaultBriefingTitle: "默认简报",
+    created: "创建于 {time}",
+    details: "详情",
+    summaryTab: "总结",
+    outlineTab: "大纲",
+    transcriptTab: "脚本",
+    briefing: "内容简报",
+    noOutline: "暂无大纲。",
+    noTranscript: "暂无脚本。",
+    deleteEpisodeTitle: "删除单集？",
+    deleteEpisodeDesc: "这将永久移除 “{name}” 及其音频文件。",
+    audioUnavailable: "音频不可用",
+    segment: "分段",
+    speaker: "发言人",
+    profile: "简介",
+    link: "链接",
+    file: "文件",
+    embedded: "已嵌入",
+    notEmbedded: "未嵌入",
+    noSpeakerProfilesAvailable: "没有可用的发言人简介",
+    noLanguageModelsAvailable: "没有可用的语言模型",
+    editEpisodeProfile: "编辑单集简介",
+    createEpisodeProfile: "创建单集简介",
+    episodeProfileFormDesc: "定义单集生成的规则及默认使用的发言人配置。",
+    noSpeakerProfilesDesc: "在配置单集简介之前，请先创建一个发言人简介。",
+    noLanguageModelsDesc: "在“模型”部分添加语言模型，以配置大纲和文稿生成。",
+    profileName: "简介名称",
+    profileNamePlaceholder: "例如：技术讨论",
+    descriptionPlaceholder: "简要说明何时使用此简介",
+    speakerConfig: "发言人配置",
+    selectSpeakerProfile: "选择发言人简介",
+    outlineGeneration: "大纲生成",
+    transcriptGeneration: "文稿生成",
+    defaultBriefingPlaceholder: "概述此单集格式的结构、语气和目标",
+    editSpeakerProfile: "编辑发言人简介",
+    createSpeakerProfile: "创建发言人简介",
+    speakerProfileFormDesc: "配置文字转语音设置并定义最多四名发言人。",
+    noTtsModelsAvailable: "没有可用的文字转语音模型",
+    noTtsModelsDesc: "在创建发言人简介之前，请先在“模型”部分添加 TTS 模型。",
+    speakers: "发言人",
+    speakersDesc: "为此简介配置一到四种声音。",
+    addSpeaker: "添加发言人",
+    speakerNumber: "发言人 {number}",
+    backstoryPlaceholder: "发言人的简要传记或背景信息",
+    personalityPlaceholder: "描述风格和语气",
+    outlineProviderRequired: "必须选择大纲提供商",
+    outlineModelRequired: "必须选择大纲模型",
+    transcriptProviderRequired: "必须选择文稿提供商",
+    transcriptModelRequired: "必须选择文稿模型",
+    defaultBriefingRequired: "必须填写默认简介",
+    segmentsInteger: "必须是整数",
+    segmentsMin: "至少包含 3 个分段",
+    segmentsMax: "最多包含 20 个分段",
+    voiceIdRequired: "必须填写声音 ID",
+    backstoryRequired: "必须填写背景故事",
+    personalityRequired: "必须填写性格描述",
+    speakerCountMin: "至少需要一个发言人",
+    speakerCountMax: "最多只能配置 4 个发言人",
+    delete: "删除",
+    unknown: "未知",
+    deleteSuccess: "播客删除成功",
+    failedToDelete: "删除播客失败",
+    episodeDeleted: "剧集已删除",
+    episodeDeletedDesc: "播客剧集已成功移除。",
+    failedToDeleteEpisode: "删除剧集失败",
+    profileCreated: "剧集配置已创建",
+    profileCreatedDesc: "新的剧集配置已准备就绪。",
+    failedToCreateProfile: "创建剧集配置失败",
+    profileUpdated: "剧集配置已更新",
+    profileUpdatedDesc: "更改已成功保存。",
+    failedToUpdateProfile: "更新剧集配置失败",
+    profileDeleted: "剧集配置已删除",
+    profileDeletedDesc: "配置已成功移除。",
+    failedToDeleteProfile: "删除剧集配置失败",
+    failedToDeleteProfileDesc: "请确保配置未在使用中并重试。",
+    profileDuplicated: "剧集配置已复制",
+    profileDuplicatedDesc: "已创建配置副本。",
+    failedToDuplicateProfile: "复制剧集配置失败",
+    speakerCreated: "发言人配置已创建",
+    speakerCreatedDesc: "发言人配置已准备就绪。",
+    failedToCreateSpeaker: "创建发言人配置失败",
+    speakerUpdated: "发言人配置已更新",
+    speakerUpdatedDesc: "更改已成功保存。",
+    failedToUpdateSpeaker: "更新发言人配置失败",
+    speakerDeleted: "发言人配置已删除",
+    speakerDeletedDesc: "配置已成功移除。",
+    failedToDeleteSpeaker: "删除发言人配置失败",
+    failedToDeleteSpeakerDesc: "请确保配置未在使用中并重试。",
+    speakerDuplicated: "发言人配置已复制",
+    speakerDuplicatedDesc: "已创建配置副本。",
+    failedToDuplicateSpeaker: "复制发言人配置失败",
+    generationStarted: "播客启动生成",
+    generationStartedDesc: "剧集 \"{name}\" 正在创建中。",
+    failedToStartGeneration: "启动播客生成失败",
+    tryAgainMoment: "请稍后再试。",
+  },
+  settings: {
+    contentProcessing: "内容处理",
+    contentProcessingDesc: "配置文档和 URL 的处理方式",
+    docEngine: "文档处理引擎",
+    docEnginePlaceholder: "选择文档处理引擎",
+    urlEngine: "URL 处理引擎",
+    urlEnginePlaceholder: "选择 URL 处理引擎",
+    autoRecommended: "自动 (推荐)",
+    simple: "Simple",
+    docling: "Docling",
+    helpMeChoose: "帮助我选择",
+    docHelp: "· Docling: 速度稍慢但更准确，特别是包含表格和图像的文档。 · Simple: 直接提取内容而不进行格式化。 · 自动 (推荐): 优先尝试 Docling，失败则回退至 Simple。",
+    firecrawl: "Firecrawl",
+    jina: "Jina",
+    urlHelp: "· Firecrawl: 强大的付费服务（有免费额度）。 · Jina: 优秀的备选方案，同样提供免费额度。 · Simple: 基础 HTTP 提取，在 JS 渲染的网站上可能会丢失内容。 · 自动 (推荐): 优先尝试 Firecrawl，其次 Jina，最后回退至 Simple。",
+    embeddingAndSearch: "嵌入与搜索",
+    embeddingAndSearchDesc: "配置搜索和向量嵌入选项",
+    defaultEmbeddingOption: "默认嵌入选项",
+    embeddingOptionPlaceholder: "选择嵌入选项",
+    ask: "询问",
+    always: "始终",
+    never: "从不",
+    embeddingHelp: "将内容进行向量嵌入可以让您和您的 AI 助手更容易找到它。如果您运行本地嵌入模型（如 Ollama），建议开启。对于在线服务商，只有在每天处理数百个文档时才需考虑成本。",
+    fileManagement: "文件管理",
+    fileManagementDesc: "配置文件的处理和存储选项",
+    autoDeleteFiles: "自动删除文件",
+    autoDeletePlaceholder: "选择自动删除选项",
+    filesHelp: "文件处理完成后，原始件不再需要。建议开启自动删除以节省存储空间。除非您将其作为主要存储位置（不建议），否则请选择“是”。",
+    loadFailed: "加载设置失败",
+  },
+  advanced: {
+    title: "高级工具",
+    desc: "面向进阶用户的调试和实用工具",
+    systemInfo: "系统信息",
+    systemInfoDesc: "查看底层系统组件的状态",
+    rebuildEmbeddings: "重建索引",
+    rebuildEmbeddingsDesc: "为所有来源重建向量索引",
+    rebuildWarning: "此操作可能非常耗时，具体取决于您的来源数量。它将清除现有的向量索引并重新为所有内容生成嵌入。",
+    startRebuild: "开始重建",
+    rebuilding: "正在重建...",
+    rebuildSuccess: "索引重建已成功启动",
+    currentVersion: "当前版本",
+    latestVersion: "最新版本",
+    status: "状态",
+    updateAvailable: "版本 {version} 可用",
+    updateAvailableDesc: "Open Notebook 的新版本可用。",
+    upToDate: "已是最新",
+    unknown: "未知",
+    viewOnGithub: "在 GitHub 上查看",
+    updateCheckFailed: "无法检查更新。GitHub 可能无法访问。",
+    rebuild: {
+      mode: "重建模式",
+      existing: "仅现有项",
+      all: "全部项",
+      existingDesc: "仅重新嵌入已有向量的项（速度较快，适用于切换模型）",
+      allDesc: "重新嵌入已有项 + 为缺失向量的项补全（速度较慢，较全面）",
+      include: "包含在重建中",
+      selectOneError: "请至少选择一种重建类型",
+      starting: "正在启动重建...",
+      startBtn: "开始重建",
+      queued: "排队中",
+      running: "正在运行...",
+      completed: "已完成!",
+      failed: "失败",
+      leavePageHint: "您可以离开此页面，后台将继续运行",
+      startNew: "开始新的重建",
+      itemsProcessed: "{processed}/{total} 项 ({percent}%)",
+      failedItems: "{count} 项处理失败",
+      time: "耗时",
+      whenToRebuild: "我该何时重建索引？",
+      whenToRebuildAns: "当您切换嵌入模型、升级模型版本、怀疑数据损坏或进行了大批量内容导入后，建议执行重建。",
+      howLong: "重建需要多长时间？",
+      howLongAns: "耗时取决于项目总数、模型速度和 API 速率限制。本地模型（如 Ollama）通常非常快。",
+      isSafe: "在使用应用时重建安全吗？",
+      isSafeAns: "是的，重建过程是安全的。它不会删除您的原始内容，仅会逐步替换向量数据。在大批量处理时，搜索速度可能会有轻微抖动。",
+    },
+  },
+  transformations: {
+    title: "内容转换规则",
+    desc: "转换规则是用于让大模型处理来源并提取见解、摘要等的提示词。",
+    workspace: "选择工作区",
+    playground: "实验室",
+    defaultPrompt: "默认全局提示词",
+    defaultPromptDesc: "该提示词将被添加到您所有的转换提示词中",
+    defaultPromptPlaceholder: "输入您的默认转换指令...",
+    saveDefault: "保存默认设置",
+    listTitle: "自定义转换",
+    createNew: "新建转换",
+    testInPlayground: "在实验室测试",
+    inputLabel: "输入文本",
+    inputPlaceholder: '请输入要转换的文本...',
+    outputLabel: '输出',
+    runTest: '运行转换',
+    running: '运行中...',
+    selectToStart: '选择一个转换规则开始',
+    name: '名称',
+    namePlaceholder: '唯一标识符，例如 key_topics',
+    titlePlaceholder: '显示名称，默认为名称',
+    promptPlaceholder: '编写驱动此转换的提示词...',
+    descriptionPlaceholder: '描述此转换的作用。',
+    suggestDefault: '新来源默认建议',
+    promptHint: '提示词应根据源内容编写。您可以要求模型总结、提取见解或生成表格等结构化输出。',
+    createSuccess: '转换规则创建成功',
+    updateSuccess: '转换规则更新成功',
+    deleteSuccess: '转换规则删除成功',
+    noTransformations: "暂无转换规则",
+    createOne: "创建一个转换规则以开始",
+    deleteDesc: "删除此转换无法撤销。",
+    selectModel: "选择模型",
+    deleteConfirm: "确定要删除此转换规则吗？",
+    model: "模型",
+    systemPrompt: "系统提示词",
+    type: "类型",
+    extraction: "提取",
+    summary: "摘要",
+    custom: "自定义",
+    saveChanges: "保存更改",
+    overrideModelDesc: "为此聊天会话覆盖默认模型。留空则使用系统默认。",
+    sessionUseReplacement: "此会话将使用 {name} 而不是默认模型。",
+    systemDefault: "系统默认",
+  },
+  models: {
+    title: "模型管理",
+    desc: "配置用于 Open Notebook 不同用途的 AI 模型",
+    failedToLoad: "加载模型数据失败",
+    language: "语言模型",
+    embedding: "嵌入模型",
+    tts: "文字转语音",
+    stt: "语音转文字",
+    providers: "服务商",
+    defaultModels: "默认模型",
+    status: "状态",
+    notConfigured: "未配置",
+    active: "活动",
+    inactive: "不活动",
+    configure: "配置",
+    saveChanges: "保存更改",
+    addModel: "添加模型",
+    modelName: "模型名称",
+    provider: "服务商",
+    apiKey: "API 密钥",
+    baseUrl: "基础 URL",
+    capabilities: "功能",
+    enabled: "已启用",
+    disabled: "已禁用",
+    deleteConfirm: "确定要删除此模型吗？",
+    deleteSuccess: "模型删除成功",
+    saveSuccess: "模型保存成功",
+    providerStatus: "服务商状态",
+    connectionOk: "连接正常",
+    connectionFailed: "连接失败",
+    changeEmbeddingWarning: "更改默认嵌入模型将影响新的来源。现有来源可能需要重建索引。",
+    changeEmbeddingTitle: "更改默认嵌入模型？",
+    aiProviders: "AI 服务商",
+    providerConfigDesc: "通过环境变量配置服务商以启用其模型。",
+    configuredCount: "已配置 {count} / {total}",
+    noModels: "暂无模型",
+    learnMore: "了解如何配置服务商 →",
+    seeLess: "收起",
+    seeAll: "查看全部 {count} 个服务商",
+    language_models: "语言模型",
+    embedding_models: "嵌入模型",
+    text_to_speech: "文字转语音",
+    speech_to_text: "语音转文字",
+    languageDesc: "聊天、内容转换和文本生成",
+    embeddingDesc: "语义搜索和向量嵌入",
+    ttsDesc: "根据文本生成音频",
+    sttDesc: "将语音转录为文本",
+    all: "全部",
+    noModelsConfigured: "未配置模型",
+    noProviderModelsConfigured: "未配置 {provider} 模型",
+    showMore: "显示更多 ({count})",
+    deleteModel: "删除模型",
+    deleteModelDesc: "确定要删除模型 “{name}” 吗？该操作无法撤销。",
+    defaultAssignments: "默认模型分配",
+    defaultAssignmentsDesc: "配置用于 Open Notebook 不同用途的默认模型",
+    missingRequiredModels: "缺少必需的模型：{models}。如果没有这些模型，Open Notebook 可能无法正常运行。",
+    selectModelPlaceholder: "选择一个模型",
+    requiredModelPlaceholder: "⚠️ 必需 - 请选择一个模型",
+    whichModelToChoose: "我该选择哪个模型？→",
+    chatModelLabel: "聊天模型",
+    chatModelDesc: "用于聊天对话",
+    transformationModelLabel: "转换模型",
+    transformationModelDesc: "用于摘要、见解和内容转换",
+    toolsModelLabel: "工具模型",
+    toolsModelDesc: "用于函数调用 - 推荐 OpenAI 或 Anthropic",
+    largeContextModelLabel: "大上下文模型",
+    largeContextModelDesc: "用于处理大文档 - 推荐 Gemini",
+    embeddingModelLabel: "嵌入模型",
+    embeddingModelDesc: "用于语义搜索和向量嵌入",
+    ttsModelLabel: "文字转语音模型",
+    ttsModelDesc: "用于生成播客",
+    sttModelLabel: "语音转文字模型",
+    sttModelDesc: "用于音频转录",
+    addSpecificModel: "添加 {type} 模型",
+    addSpecificModelDesc: "从可用服务商配置一个新的 {type} 模型。",
+    noProvidersForType: "暂无可用于 {type} 模型的服务商",
+    selectProviderPlaceholder: "选择服务商",
+    providerRequired: "服务商是必填项",
+    modelNameRequired: "模型名称是必填项",
+    modelRequired: "模型是必填项",
+    adding: "正在添加...",
+    azureHint: "对于 Azure，请使用部署名称作为模型名称",
+    enterModelName: "输入模型名称",
+    embeddingChangeTitle: "嵌入模型变更",
+    embeddingChangeConfirm: "您即将将嵌入模型从 {from} 更改为 {to}。",
+    rebuildRequired: "重要提示：需要重建索引",
+    rebuildReason: "更改嵌入模型需要重建所有现有嵌入以保持一致性。如果不重建，您的搜索可能会返回错误或不完整的结果。",
+    whatHappensNext: "接下来会发生什么：",
+    step1: "您的默认嵌入模型将被更新",
+    step2: "在重新构建之前，现有的嵌入将保持不变",
+    step3: "新内容将使用新的嵌入模型",
+    step4: "您应该尽快重新构建嵌入",
+    proceedToRebuildPrompt: "您想现在前往“高级设置”页面开始重建索引吗？",
+    changeModelOnly: "仅更改模型",
+    changeAndRebuild: "更改并前往重建",
+  },
+}
diff --git a/frontend/src/lib/locales/zh-TW/index.ts b/frontend/src/lib/locales/zh-TW/index.ts
new file mode 100644
index 0000000..6893936
--- /dev/null
+++ b/frontend/src/lib/locales/zh-TW/index.ts
@@ -0,0 +1,950 @@
+export const zhTW = {
+  common: {
+    search: "搜尋...",
+    chat: '聊天',
+    notes: '筆記',
+    create: "新增",
+    new: "新建",
+    cancel: "取消",
+    save: "儲存",
+    delete: "刪除",
+    edit: "編輯",
+    actions: "快捷操作",
+    theme: "主題",
+    signOut: "登出",
+    loading: "載入中...",
+    note: "筆記",
+    insight: "洞察",
+    newSource: "新增來源",
+    newNotebook: "新增筆記本",
+    newPodcast: "新增播客",
+    nameRequired: "此為必填項",
+    noMatches: "沒有找到匹配項",
+    tryDifferentSearch: "請嘗試使用不同的關鍵詞搜尋。",
+    light: "亮色",
+    dark: "暗色",
+    system: "系統",
+    language: "語言",
+    english: "English",
+    chinese: "簡體中文",
+    source: "來源",
+    notebook: "筆記本",
+    podcast: "播客",
+    quickActions: "快捷操作",
+    quickActionsDesc: "導覽、搜尋、提問、主題",
+    appName: "Open Notebook",
+    add: "新增",
+    remove: "移除",
+    confirm: "確認",
+    warning: "警告",
+    error: "錯誤",
+    success: "成功",
+    sessions: "對話",
+    model: "模型",
+    send: "發送",
+    back: "返回",
+    next: "下一步",
+    done: "完成",
+    processing: "處理中...",
+    creating: "正在新增...",
+    tokenCount: "Token",
+    charCount: "字元",
+    linked: "已連結",
+    added: "已於 {date} 新增",
+    adding: "正在新增...",
+    addSelected: "新增所選",
+    customModel: "自訂模型",
+    messages: "訊息",
+    failed: "失敗",
+    current: "目前",
+    writeNote: '撰寫筆記',
+    batchMode: "批次模式",
+    optional: "可選",
+    type: "類型",
+    title: "標題",
+    created: "建立於 {time}",
+    updated: "更新於 {time}",
+    noResults: "未找到結果",
+    references: "引用",
+    refreshPage: "請嘗試重新整理頁面",
+    refresh: "重新整理",
+    aiGenerated: "AI 生成",
+    human: "人類",
+    unknown: "未知",
+    details: "詳情",
+    deleteForever: "永久刪除",
+    connectionError: "連線錯誤",
+    unableToConnect: "無法連線至 API 伺服器",
+    retryConnection: "重試連線",
+    diagnosticInfo: "診斷資訊",
+    version: "版本",
+    built: "構建時間",
+    apiUrl: "API 位址",
+    frontendUrl: "前端位址",
+    checkConsoleLogs: "請檢查瀏覽器主控台以獲取詳細日誌（搜尋 🔧 [Config] 訊息）",
+    yes: "是",
+    no: "否",
+    simple: "簡單",
+    saving: "正在儲存...",
+    description: "描述",
+    saveToNote: "儲存到筆記",
+    copyToClipboard: "複製到剪貼簿",
+    close: "關閉",
+    insights: "見解",
+    progress: "進度",
+    deleting: "正在刪除...",
+    created_label: "建立時間",
+    updated_label: "更新時間",
+    download: "下載",
+    saveChanges: "儲存更改",
+    name: "名稱",
+    default: "預設",
+    modelConfiguration: "模型設定",
+    resetToDefault: "重置為預設",
+    notFound: "未找到",
+    reasoning: "推理過程",
+    searchTerms: "搜尋詞",
+    strategy: "策略",
+    individualAnswers: "獨立回答 ({count})",
+    finalAnswer: "最終回答",
+    notebookLabel: "筆記本: {name}",
+    itemNotFound: "未找到該 {type}",
+    accessibility: {
+      navigation: "導覽",
+      transformationViews: "轉換視圖",
+      searchKB: "向知識庫提問或搜尋",
+      searchNotebooks: "搜尋筆記本",
+      enterQuestion: "輸入您的問題以詢問知識庫",
+      enterSearch: "輸入搜尋詞",
+      searchKBBtn: "搜尋知識庫",
+      podcastViews: "播客視圖",
+      chatSessions: "對話 Session",
+      ytVideo: "YouTube 影片",
+      askResponse: "提問回答",
+    },
+    url: "URL",
+    errorDetails: "錯誤詳情",
+    editTransformation: "編輯轉換規則",
+    comingSoon: "敬請期待",
+    retry: "重試",
+    traditionalChinese: "繁體中文",
+    completed: "已完成",
+    saveSuccess: "儲存成功",
+    contextModes: {
+      off: "未包含在聊天中",
+      insights: "僅限見解",
+      full: "全部內容",
+      clickToCycle: "點擊循環切換",
+    },
+    clickToEdit: "點擊編輯",
+  },
+  apiErrors: {
+    notebookNotFound: "找不到筆記本",
+    sourceNotFound: "找不到源檔案",
+    transformationNotFound: "找不到轉換規則",
+    fileUploadFailed: "檔案上傳失敗",
+    urlRequired: "連結類型需要提供 URL",
+    contentRequired: "文本類型需要提供內容",
+    invalidSourceType: "無效的源類型",
+    processingFailed: "處理失敗",
+    failedToQueue: "排隊處理失敗",
+    invalidSortBy: "排序欄位必須是 'created' 或 'updated'",
+    invalidSortOrder: "排序方向必須是 'asc' 或 'desc'",
+    accessDenied: "檔案存取被拒絕",
+    fileNotFoundOnServer: "伺服器上找不到該檔案",
+    failedToCreateSession: "新增對話失敗",
+    failedToUpdateSession: "更新對話失敗",
+    failedToDeleteSession: "刪除對話失敗",
+    failedToSendMessage: "發送訊息失敗",
+    pleaseEnterQuestion: "請輸入問題",
+    pleaseConfigureModels: "請設定所有必選模型",
+    askFailed: "提問失敗",
+    searchFailed: "搜尋失敗",
+    unauthorized: "無權存取，請檢查您的密碼",
+    invalidPassword: "密碼錯誤",
+    missingAuth: "缺少身分驗證資訊",
+    embeddingModelRequired: "此功能需要嵌入模型。請在模型設定中設定一個。",
+    strategyModelNotFound: "未找到策略模型",
+    answerModelNotFound: "未找到回答模型",
+    finalAnswerModelNotFound: "未找到最終回答模型",
+    noAnswerGenerated: "未能生成回答",
+    genericError: "發生了意外錯誤",
+  },
+  connectionErrors: {
+    apiTitle: "無法連線到 API 伺服器",
+    apiDesc: "無法存取 Open Notebook API 伺服器",
+    dbTitle: "資料庫連線失敗",
+    dbDesc: "API 伺服器正在執行，但無法存取資料庫",
+    troubleshooting: "這通常意味着：",
+    apiUnreachable1: "API 伺服器未運行",
+    apiUnreachable2: "API 伺服器運行在不同的位址",
+    apiUnreachable3: "網路連線問題",
+    dbFailed1: "SurrealDB 未運行",
+    dbFailed2: "資料庫連線設定不正確",
+    dbFailed3: "API 與資料庫之間的網路問題",
+    quickFixes: "快速修復：",
+    setApiUrl: "設定 API_URL 環境變數：",
+    checkSurreal: "檢查 SurrealDB 是否運行：",
+    seeDocumentation: "有關詳細設定說明，請參閱：",
+    docLink: "Open Notebook 文件",
+    showTechnical: "顯示技術細節",
+    attemptedUrl: "嘗試的 URL",
+    message: "訊息",
+    technicalDetails: "技術細節",
+    stackTrace: "堆疊追蹤",
+    retryLabel: "重試連線",
+    retryHint: "按 R 或點擊按鈕重試",
+    dockerLabel: "對於 Docker",
+    localDevLabel: "對於本地開發",
+  },
+  auth: {
+    loginTitle: "Open Notebook",
+    loginDesc: "輸入密碼以存取應用程式",
+    passwordPlaceholder: "密碼",
+    signingIn: "正在登入...",
+    signIn: "登入",
+    unhandledError: "登入過程中出現未處理的錯誤",
+    connectErrorHint: "無法連線至伺服器。請檢查 API 是否正在運行。",
+  },
+  navigation: {
+    collect: "採集",
+    process: "處理",
+    create: "創作",
+    manage: "管理",
+    sources: "來源",
+    notebooks: "筆記本",
+    askAndSearch: "詢問與搜尋",
+    search: "搜尋",
+    ask: "提問",
+    podcasts: "播客",
+    models: "模型",
+    transformations: "轉換",
+    transformation: "轉換",
+    settings: "設定",
+    advanced: "進階",
+    nav: "導覽",
+    language: "切換語言",
+    theme: "主題",
+  },
+  notebooks: {
+    title: "筆記本",
+    newNotebook: "新增筆記本",
+    searchPlaceholder: "搜尋筆記本...",
+    archived: "已封存",
+    archive: "封存",
+    unarchive: "取消封存",
+    deleteNotebook: "刪除筆記本",
+    deleteNotebookDesc: "您確定要刪除此筆記本嗎？此操作無法復原。",
+    activeNotebooks: "活動中的筆記本",
+    archivedNotebooks: "封存的筆記本",
+    emptyDescription: "從新增您的第一個筆記本開始，組織您的研究。",
+    noActiveNotebooks: "沒有活動中的筆記本",
+    noArchivedNotebooks: "沒有封存的筆記本",
+    notFound: "未找到筆記本",
+    notFoundDesc: "請求的筆記本不存在。",
+    noDescription: "暫無描述...",
+    updated: "已更新",
+    namePlaceholder: "筆記本名稱",
+    addDescription: "新增描述...",
+    noNotesYet: "暫無筆記",
+    deleteNote: "刪除筆記",
+    deleteNoteConfirm: "確定要刪除此筆記嗎？此操作無法撤銷。",
+    noteCreatedSuccess: "筆記創建成功",
+    failedToCreateNote: "創建筆記失敗",
+    noteUpdatedSuccess: "筆記更新成功",
+    failedToUpdateNote: "更新筆記失敗",
+    noteDeletedSuccess: "筆記刪除成功",
+    failedToDeleteNote: "刪除筆記失敗",
+    createNew: "新增筆記本",
+    createNewDesc: "輸入名稱和可選描述以開始。",
+    descPlaceholder: "在此新增有關此筆記本的更多資訊...",
+    createSuccess: "筆記本新增成功",
+    updateSuccess: "筆記本更新成功",
+    deleteSuccess: "筆記本刪除成功",
+  },
+  sources: {
+    title: "來源",
+    add: "新增來源",
+    addNew: "新增新來源",
+    addExisting: "新增現有來源",
+    allSourcesDescShort: "在此檢視所有來源。",
+    cannotSaveNoteNoNotebook: "無法儲存筆記：缺少筆記本 ID",
+    empty: "暫無來源",
+    emptyDesc: "新增您的第一個來源，開始構建您的知識庫。",
+    delete: "刪除來源",
+    deleteMsg: "確定要刪除此來源嗎？此操作無法撤銷。",
+    statusPreparing: "正在準備",
+    statusQueued: "已排隊",
+    statusProcessing: "正在處理",
+    statusCompleted: "已完成",
+    statusFailed: "處理失敗",
+    statusPreparingDesc: "準備處理中",
+    statusQueuedDesc: "等待處理",
+    statusProcessingDesc: "正在處理內容",
+    statusCompletedDesc: "處理成功",
+    statusFailedDesc: "處理失敗",
+    failedToLoad: "載入來源失敗",
+    allSourcesDesc: "在此檢視所有來源。您可以新增新來源或管理現有來源。",
+    allSources: "所有來源",
+    insights: "見解",
+    yes: "是",
+    no: "否",
+    loadingMore: "正在載入更多...",
+    deleteConfirm: "確定要刪除嗎？",
+    deleteConfirmWithTitle: "確定要刪除 \"{title}\" 嗎？",
+    deleteSuccess: "來源刪除成功。注意：要從儲存中刪除檔案，必須在設定頁面中啟用「刪除檔案」選項。",
+    failedToDelete: "刪除來源失敗",
+    sourceQueued: "來源已加入隊列",
+    sourceQueuedDesc: "來源已提交進行後台處理。您可以在來源列表中監控進度。",
+    sourceAddedSuccess: "來源新增成功",
+    failedToAddSource: "新增來源失敗",
+    sourceUpdatedSuccess: "來源更新成功",
+    failedToUpdateSource: "更新來源失敗",
+    sourceDeletedSuccess: "來源刪除成功",
+    failedToDeleteSource: "刪除來源失敗",
+    fileUploadedSuccess: "檔案上傳成功",
+    failedToUploadFile: "檔案上傳失敗",
+    sourceRequeued: "來源重試已加入隊列",
+    sourceRequeuedDesc: "來源已重新加入處理隊列。",
+    failedToRetry: "重試失敗",
+    failedToRetryDesc: "重試來源處理失敗。請重試。",
+    sourcesAddedToNotebook: "{count} 個來源已新增到筆記本",
+    failedToAddSourcesToNotebook: "新增來源到筆記本失敗",
+    partialAddSuccess: "{success} 個來源已新增，{failed} 個失敗",
+    sourceRemovedFromNotebook: "來源已成功從筆記本中移除",
+    failedToRemoveSourceFromNotebook: "從筆記本中移除來源失敗",
+    removeConfirm: "確定要從此筆記本移除嗎？",
+    noSourcesYet: "暫無來源",
+    createFirstSource: "新增您的第一個來源開始構建知識庫。",
+    deleteSourceConfirm: "確定要刪除此來源嗎？",
+    checking: "正在檢查...",
+    untitledSource: "未命名來源",
+    maxItems: "最多 {count} 個",
+    insightsCount: "{count} 條見解",
+    details: "詳情",
+    detailsTitle: "來源詳情",
+    content: "內容",
+    metadata: "元資料",
+    type: {
+      link: "連結",
+      file: "檔案",
+      text: "文字",
+    },
+    id: "來源 ID",
+    topics: "主題",
+    embedded: "已嵌入向量",
+    notEmbedded: "未嵌入向量",
+    embedContent: "嵌入內容",
+    embedding: "正在嵌入...",
+    alreadyEmbedded: "已嵌入",
+    downloadFile: "下載檔案",
+    fileUnavailable: "檔案不可用",
+    preparing: "正在準備...",
+    generateNewInsight: "生成新見解",
+    selectTransformation: "選擇轉換規則...",
+    noInsightsYet: "暫無見解",
+    createFirstInsight: "使用上方的轉換規則新增您的第一個見解",
+    viewInsight: "查看見解",
+    viewSource: "查看來源",
+    noInsightSelected: "未選擇見解",
+    sourceInsight: "來源見解",
+    manageNotebooks: "管理所屬筆記本",
+    manageNotebooksDesc: "管理包含此來源的筆記本",
+    noNotebooksAvailable: "暫無可用筆記本",
+    deleteInsight: "刪除見解",
+    deleteInsightConfirm: "確定要刪除此見解嗎？此操作無法撤銷。",
+    notEmbeddedAlert: "內容未嵌入向量",
+    notEmbeddedDesc: "此內容尚未為了向量搜尋進行嵌入。嵌入可以啟用進階搜尋功能並更好地發現內容。",
+    openOnYoutube: "在 YouTube 上開啟",
+    urlCopied: "URL 已複製到剪貼簿",
+    loadFailed: "載入來源詳情失敗",
+    removeFromNotebook: "從筆記本移除",
+    retryProcessing: "重試處理",
+    deleteSource: "刪除來源",
+    retry: "重試",
+    progress: "進度",
+    addExistingTitle: "新增現有來源",
+    addExistingDesc: "從您的所有筆記本中選擇已有的來源新增到當前筆記本。",
+    searchPlaceholder: "通過名稱或 URL 搜尋來源...",
+    noNotebooksFound: "未找到筆記本。",
+    showingFirst100: "僅顯示前 100 個來源。請使用搜尋功能查找特定來源。",
+    selectedCount: "已選擇 {count} 個來源",
+    added: "已新增於 {date}",
+    noNotesYet: '暫無筆記',
+    createFirstNote: "新增您的第一條筆記，記錄見解與觀察。",
+    deleteNote: '刪除筆記',
+    deleteNoteConfirm: '您確定要刪除此筆記嗎？此操作無法撤銷。',
+    editNote: '編輯筆記',
+    createNote: "新增筆記",
+    addTitle: '新增標題...',
+    untitledNote: '無標題筆記',
+    writeNotePlaceholder: '在此處編寫您的筆記內容...',
+    saveNote: '儲存筆記',
+    createNoteBtn: "新增筆記",
+    urlLabel: 'URL(s) *',
+    fileLabel: '檔案(s) *',
+    textContentLabel: '文字內容 *',
+    enterUrlsPlaceholder: '每行輸入一個 URL\nhttps://example.com/article1\nhttps://example.com/article2',
+    batchUrlHint: '貼上多個 URL（每行一個）進行批次導入',
+    invalidUrlsDetected: '檢測到無效的 URL：',
+    lineLabel: '第 {line} 行',
+    fixInvalidUrls: '請修正或移除無效的 URL 以繼續',
+    selectMultipleFilesHint: '選擇多個檔案進行批次導入。支援：文件 (PDF, DOC, DOCX, PPT, XLS, EPUB, TXT, MD)，媒體 (MP4, MP3, WAV, M4A)，圖片 (JPG, PNG)，歸檔 (ZIP)',
+    selectedFiles: '已選擇檔案：',
+    textPlaceholder: '在此處貼上或輸入您的內容...',
+    titlePlaceholder: '為您的來源取一個描述性的標題',
+    batchTitlesAuto: '將為每個來源自動生成標題。',
+    batchCommonSettings: '相同的筆記本和轉換將應用於所有項目。',
+    urlsCount: '{count} 個 URL',
+    filesCount: '{count} 個檔案',
+    addSource: "新增來源",
+    addUrl: "新增 URL",
+    uploadFile: "上傳檔案",
+    enterText: "輸入文字",
+    processDescription: "內容將經過處理並由 AI 分析。",
+    processingFiles: "正在處理您的檔案...",
+    titleRequired: "文字內容必須提供標題",
+    titleGenerated: "如果留空，將根據內容自動生成標題",
+    batchCount: "將處理 {count} 個{type}",
+    enableEmbedding: "啟用搜尋向量嵌入",
+    embeddingDesc: "允許此來源在向量搜尋和 AI 查詢中被檢索",
+    embeddingAlways: "已自動啟用嵌入",
+    embeddingAlwaysDesc: "您的設定已設定為始終對內容進行向量嵌入。",
+    embeddingNever: "嵌入已禁用",
+    embeddingNeverDesc: "您的設定已設定為跳過嵌入。此來源將無法進行向量搜尋。",
+    changeInSettings: "您可以在此處更改設定：",
+    notFound: "未找到來源",
+    noContent: "暫無內容",
+    insightsDesc: "根據模型分析生成的見解",
+    uploadedFile: "已上傳檔案",
+    fileUnavailableDesc: "由於儲存系統原因，此檔案目前不可用。",
+    batchSuccess: "成功新增 {count} 個來源",
+    batchFailed: "全部 {count} 個來源新增失敗",
+    batchPartial: "{success} 個成功，{failed} 個失敗",
+    submittingSource: "正在提交來源進行處理...",
+    contentRequired: "請提供所選來源類型所需的內容",
+    titleRequiredForText: "文字來源需要提供標題",
+    processingBatchSources: "正在處理 {count} 個來源，請稍候...",
+    processingSource: "正在處理您的來源，請稍候...",
+    maxFilesAllowed: "每批最多允許 {count} 個檔案",
+  },
+  chat: {
+    sessions: "對話",
+    sessionTitlePlaceholder: "在此輸入標題...",
+    noSessions: "暫無對話",
+    startChatting: "開始針對您的來源進行聊天。",
+    deleteSession: "刪除對話",
+    deleteSessionDesc: "確定要刪除此聊天會話嗎？此操作無法撤銷。",
+    sendPlaceholder: "向您的來源提問...",
+    newChat: "新建對話",
+    sessionsTitle: "對話列表",
+    clearhistory: "清空歷史",
+    renameSession: "重新命名對話",
+    noSourcesLinked: "未連結來源",
+    thinking: "AI 正在思考...",
+    chatWith: "與 {name} 對話",
+    startConversation: "開始針對 {type} 進行對話",
+    askQuestions: "提出問題以更好地理解內容",
+    pressToSend: "按 {key} 發送",
+    model: "模型",
+    createToStart: "新增一個會話以開始。",
+    chatWithNotebook: '與筆記本對話',
+    unableToLoadChat: '無法載入聊天',
+    noDescription: '暫無描述',
+    startByCreating: "從新增您的第一個筆記本開始，組織您的研究。",
+    messagesCount: "{count} 條訊息",
+    sessionCreated: "聊天會話已建立",
+    sessionUpdated: "會話已更新",
+    sessionDeleted: "會話已刪除",
+  },
+  searchPage: {
+    askAndSearch: "提問與搜尋",
+    chooseAMode: "選擇模式",
+    askBeta: "提問 (beta)",
+    search: "搜尋",
+    askYourKb: "向您的知識庫提問 (beta)",
+    askYourKbDesc: "大語言模型將根據您知識庫中的文件回答您的查詢。",
+    question: "問題",
+    enterQuestionPlaceholder: "輸入您的問題...",
+    pressToSubmit: "按 Cmd/Ctrl+Enter 提交",
+    noEmbeddingModel: "您無法使用此功能，因為尚未選擇嵌入模型集。請在模型頁面設定一個。",
+    usingCustomModels: "正在使用自訂模型",
+    usingDefaultModels: "正在使用預設模型",
+    advanced: "進階",
+    strategy: "策略",
+    answer: "回答",
+    final: "最終",
+    ask: "提問",
+    processing: "處理中...",
+    saveToNotebooks: "儲存到筆記本",
+    searchDesc: "在您的知識庫中搜尋特定的關鍵字或概念",
+    enterSearchPlaceholder: "輸入搜尋查詢...",
+    pressToSearch: "按 Enter 鍵搜尋",
+    searchType: "搜尋類型",
+    vectorSearchWarning: "向量搜尋需要嵌入模型。目前僅文本搜尋可用。",
+    textSearch: "文本搜尋",
+    vectorSearch: "向量搜尋",
+    searchIn: "搜尋範圍",
+    searchSources: "搜尋來源",
+    searchNotes: "搜尋筆記",
+    resultsFound: "{count} 個結果",
+    matches: "匹配項 ({count})",
+    noResultsFor: "未找到 “{query}” 的結果",
+    notSet: "未設定",
+    saveToNotebook: "儲存到筆記本",
+    saveSuccess: "成功儲存到筆記本",
+    saveError: "儲存到筆記本失敗",
+    selectNotebook: "選擇筆記本",
+    createNewNotebook: "建立新筆記本",
+    cancel: "取消",
+    saving: "儲存中...",
+    advancedModelTitle: "進階模型選擇",
+    advancedModelDesc: "為提問過程的每個階段選擇模型",
+    strategyModel: "策略模型",
+    answerModel: "回答模型",
+    finalAnswerModel: "最終回答模型",
+    selectStrategyPlaceholder: "選擇策略模型",
+    selectAnswerPlaceholder: "選擇回答模型",
+    selectFinalPlaceholder: "選擇最終回答模型",
+    saveChanges: "儲存更改",
+    searchAndAsk: "搜尋與提問",
+    searchResultsFor: "搜尋 “{query}”",
+    askAbout: "提問關於 “{query}”",
+    orSearchKb: "或搜尋您的知識庫",
+    processingQuestion: "正在處理您的問題...",
+  },
+  podcasts: {
+    podcastProfiles: {
+      business_analysis: "商業分析",
+      solo_expert: "獨家專家",
+      tech_discussion: "技術研討",
+    },
+    generateEpisode: "生成播客單集",
+    generateEpisodeDesc: "在生成新的播客單集之前，選擇要包含的內容並設定單集詳情。",
+    content: "內容",
+    contentDesc: "選擇要包含在此單集中的筆記本、來源和筆記。",
+    itemsSelected: "{count} 個項目已選擇",
+    tokens: "{count} token",
+    chars: "{count} 字元",
+    loadingNotebooks: "正在載入筆記本...",
+    noNotebooksFoundInPodcasts: "未找到筆記本。在生成播客之前，請先建立一個筆記本並新增內容。",
+    noContentSelected: "未選擇內容",
+    summary: "摘要",
+    fullContent: "全部內容",
+    untitledSource: "未命名來源",
+    untitledNote: "未命名筆記",
+    episodeSettings: "單集設定",
+    episodeProfile: "單集簡介",
+    episodeProfilePlaceholder: "選擇單集簡介",
+    episodeName: "單集名稱",
+    episodeNamePlaceholder: "例如：AI 與工作的未來",
+    additionalInstructions: "附加指令",
+    instructionsPlaceholder: "任何要追加到單集簡訊的補充建議...",
+    generating: "正在生成...",
+    generate: "生成",
+    hostPlaceholder: "主持人 {number}",
+    profileRequired: "需要單集簡介",
+    profileRequiredDesc: "在生成播客之前，請選擇一個單集簡介。",
+    nameRequired: "需要單集名稱",
+    nameRequiredDesc: "請為單集提供一個名稱。",
+    addContext: "新增上下文",
+    addContextDesc: "至少選擇一個來源或筆記包含在單集中。",
+    generationFailed: "播客生成失敗",
+    speakerProfile: "主持人簡介",
+    usesSpeakerProfile: "使用主持人簡介",
+    sources: "來源",
+    notes: "筆記",
+    noSources: "此筆記本中沒有可用的來源。",
+    noNotes: "此筆記本中沒有可用的筆記。",
+    selectMode: "選擇模式",
+    buildContextFailed: "構建上下文失敗。請檢查您的選擇。",
+    podcastTaskStarted: "播客生成任務已開始",
+    loadingProfiles: "正在載入單集簡介...",
+    noProfilesFound: "未找到單集簡介。在生成播客之前，請先建立一個單集簡介。",
+    listTitle: "播客",
+    listDesc: "跟踪生成的單集並管理可重複使用的模板。",
+    chooseAView: "選擇視圖",
+    episodesTab: "單集",
+    templatesTab: "模板",
+    overviewTitle: "單集概覽",
+    overviewDesc: "監控播客生成任務並查看最終成品。",
+    generateBtn: "生成播客",
+    total: "總計",
+    processingLabel: "處理中",
+    completedLabel: "已完成",
+    failedLabel: "失敗",
+    pendingLabel: "排隊中",
+    loadErrorTitle: "載入單集失敗",
+    loadErrorDesc: "無法獲取最新的播客單集。請稍後重試。",
+    loadingEpisodes: "正在載入單集...",
+    noEpisodesYet: "暫無播客單集。從筆記本或來源聊天介面開始生成您的第一個單集。",
+    statusRunningTitle: "正在處理中",
+    statusRunningDesc: "正在活躍生成資產的單集。",
+    statusPendingTitle: "排隊中 / 待處理",
+    statusPendingDesc: "已提交并在等待開始處理的單集。",
+    statusCompletedTitle: "已完成單集",
+    statusCompletedDesc: "可以查看、下載或發布。",
+    statusFailedTitle: "失敗單集",
+    statusFailedDesc: "在生成過程中遇到問題的單集。",
+    templatesWorkspaceTitle: "模板工作區",
+    templatesWorkspaceDesc: "構建可重複使用的單集和發言人設定，以實現快速的播客製作。",
+    howTemplatesPowerTitle: "模板如何驅動播客生成",
+    howTemplatesPowerDesc: "模板將播客工作流拆分為兩個可重複使用的構建塊。在生成新單集時可以隨時混合搭配它們。",
+    episodeProfilesSetFormat: "單集簡介設定格式",
+    episodeProfilesList1: "概述分段數量及故事流向",
+    episodeProfilesList2: "選擇用於簡報、大綱和腳本編寫的語言模型",
+    episodeProfilesList3: "儲存預設簡報，以便每個單集都以一致的基調開始",
+    speakerProfilesBringVoices: "發言人簡介賦予聲音生命",
+    speakerProfilesList1: "選擇文字轉語音庫及模型",
+    speakerProfilesList2: "記錄每個發言人的性格、背景故事和發音說明",
+    speakerProfilesList3: "在不同的單集格式中重複使用相同的主持人或嘉賓聲音",
+    recommendedWorkflow: "推薦工作流",
+    workflowStep1: "為您需要的每個聲音建立發言人簡介",
+    workflowStep2: "構建按名稱引用這些發言人的單集簡介",
+    workflowStep3: "通過選擇適合故事的單集簡介來生成播客",
+    workflowHint: "單集簡介按名稱引用發言人簡介，因此從發言人開始可以避免以後缺少聲音指派。",
+    failedToLoadTemplates: "載入模板資料失敗",
+    failedToLoadTemplatesDesc: "請確保 API 正在運行並重試。某些部分可能不完整。",
+    loadingTemplates: "正在載入模板...",
+    speakerProfilesTitle: "發言人簡介",
+    speakerProfilesDesc: "為生成的單集設定聲音和性格。",
+    createSpeaker: "建立發言人",
+    noSpeakerProfiles: "暫無發言人簡介。建立一個以使單集模板可用。",
+    noDescription: "未提供描述。",
+    usedByCount_one: "被 1 個單集使用",
+    usedByCount_other: "被 {count} 個單集使用",
+    usedByCount: "被 {count} 個單集使用",
+    unused: "未使用",
+    voiceId: "聲音 ID",
+    backstory: "背景故事",
+    personality: "性格",
+    edit: "編輯",
+    duplicate: "複製",
+    deleteSpeakerProfileTitle: "刪除發言人簡介？",
+    deleteSpeakerProfileDesc: "刪除 “{name}” 無法撤銷。",
+    deleteSpeakerDisabledHint: "在刪除之前，請先從單集簡介中移除該發言人。",
+    deleting: "正在刪除...",
+    episodeProfilesTitle: "單集簡介",
+    episodeProfilesDesc: "為您播客定義可重複使用的生成設定。",
+    createProfile: "建立簡介",
+    createSpeakerFirst: "在新增單集簡介之前，請先建立一個發言人簡介。",
+    noEpisodeProfiles: "暫無單集簡介。建立一個以啟動播客生成。",
+    deleteProfileTitle: "刪除簡介？",
+    deleteProfileDesc: "這將移除 “{name}”。現有單集將保留其資料，但新單集將不再使用此設定。",
+    outlineModel: "大綱模型",
+    transcriptModel: "腳本模型",
+    segments: "分段數量",
+    defaultBriefingTitle: "預設簡報",
+    created: "建立於 {time}",
+    details: "詳情",
+    summaryTab: "總結",
+    outlineTab: "大綱",
+    transcriptTab: "腳本",
+    briefing: "內容簡報",
+    noOutline: "暫無大綱。",
+    noTranscript: "暫無腳本。",
+    deleteEpisodeTitle: "刪除單集？",
+    deleteEpisodeDesc: "這將永久移除 “{name}” 及其音訊檔案。",
+    audioUnavailable: "音訊不可用",
+    segment: "分段",
+    speaker: "發言人",
+    profile: "簡介",
+    link: "連結",
+    file: "檔案",
+    embedded: "已嵌入",
+    notEmbedded: "未嵌入",
+    noSpeakerProfilesAvailable: "沒有可用的發言人簡介",
+    noLanguageModelsAvailable: "沒有可用的語言模型",
+    editEpisodeProfile: "編輯單集簡介",
+    createEpisodeProfile: "建立單集簡介",
+    episodeProfileFormDesc: "定義單集生成的規則及預設使用的發言人設定。",
+    noSpeakerProfilesDesc: "在設定單集簡介之前，請先建立一個發言人簡介。",
+    noLanguageModelsDesc: "在“模型”部分新增語言模型，以設定大綱和文稿生成。",
+    profileName: "簡介名稱",
+    profileNamePlaceholder: "例如：技術討論",
+    descriptionPlaceholder: "簡要說明何時使用此簡介",
+    speakerConfig: "發言人設定",
+    selectSpeakerProfile: "選擇發言人簡介",
+    outlineGeneration: "大綱生成",
+    transcriptGeneration: "文稿生成",
+    defaultBriefingPlaceholder: "概述此單集格式的結構、語氣和目標",
+    editSpeakerProfile: "編輯發言人簡介",
+    createSpeakerProfile: "建立發言人簡介",
+    speakerProfileFormDesc: "設定文字轉語音設定並定義最多四名發言人。",
+    noTtsModelsAvailable: "沒有可用的文字轉語音模型",
+    noTtsModelsDesc: "在建立發言人簡介之前，請先在“模型”部分新增 TTS 模型。",
+    speakers: "發言人",
+    speakersDesc: "為此簡介設定一到四種聲音。",
+    addSpeaker: "新增發言人",
+    speakerNumber: "發言人 {number}",
+    backstoryPlaceholder: "發言人的簡要傳記或背景資訊",
+    personalityPlaceholder: "描述風格和語氣",
+    outlineProviderRequired: "必須選擇大綱提供商",
+    outlineModelRequired: "必須選擇大綱模型",
+    transcriptProviderRequired: "必須選擇文稿提供商",
+    transcriptModelRequired: "必須選擇文稿模型",
+    defaultBriefingRequired: "必須填寫預設簡介",
+    segmentsInteger: "必須是整數",
+    segmentsMin: "至少包含 3 個分段",
+    segmentsMax: "最多包含 20 個分段",
+    voiceIdRequired: "必須填寫聲音 ID",
+    backstoryRequired: "必須填寫背景故事",
+    personalityRequired: "必須填寫性格描述",
+    speakerCountMin: "至少需要一個發言人",
+    speakerCountMax: "最多只能設定 4 個發言人",
+    delete: "刪除",
+    unknown: "未知",
+    deleteSuccess: "播客刪除成功",
+    failedToDelete: "刪除播客失敗",
+    episodeDeleted: "劇集已刪除",
+    episodeDeletedDesc: "播客劇集已成功移除。",
+    failedToDeleteEpisode: "刪除劇集失敗",
+    profileCreated: "劇集設定已建立",
+    profileCreatedDesc: "新的劇集設定已準備就緒。",
+    failedToCreateProfile: "建立劇集設定失敗",
+    profileUpdated: "劇集設定已更新",
+    profileUpdatedDesc: "更改已成功儲存。",
+    failedToUpdateProfile: "更新劇集設定失敗",
+    profileDeleted: "劇集設定已刪除",
+    profileDeletedDesc: "設定已成功移除。",
+    failedToDeleteProfile: "刪除劇集設定失敗",
+    failedToDeleteProfileDesc: "請確保設定未在使用中並重試。",
+    profileDuplicated: "劇集設定已複製",
+    profileDuplicatedDesc: "已建立設定副本。",
+    failedToDuplicateProfile: "複製劇集設定失敗",
+    speakerCreated: "發言人設定已建立",
+    speakerCreatedDesc: "發言人設定已準備就緒。",
+    failedToCreateSpeaker: "建立發言人設定失敗",
+    speakerUpdated: "發言人設定已更新",
+    speakerUpdatedDesc: "更改已成功儲存。",
+    failedToUpdateSpeaker: "更新發言人設定失敗",
+    speakerDeleted: "發言人設定已刪除",
+    speakerDeletedDesc: "設定已成功移除。",
+    failedToDeleteSpeaker: "刪除發言人設定失敗",
+    failedToDeleteSpeakerDesc: "請確保設定未在使用中並重試。",
+    speakerDuplicated: "發言人設定已複製",
+    speakerDuplicatedDesc: "已建立設定副本。",
+    failedToDuplicateSpeaker: "複製發言人設定失敗",
+    generationStarted: "播客啟動生成",
+    generationStartedDesc: "劇集 \"{name}\" 正在建立中。",
+    failedToStartGeneration: "啟動播客生成失敗",
+    tryAgainMoment: "請稍後再試。",
+  },
+  settings: {
+    contentProcessing: "內容處理",
+    contentProcessingDesc: "設定文件和 URL 的處理方式",
+    docEngine: "文件處理引擎",
+    docEnginePlaceholder: "選擇文件處理引擎",
+    urlEngine: "URL 處理引擎",
+    urlEnginePlaceholder: "選擇 URL 處理引擎",
+    autoRecommended: "自動 (推薦)",
+    simple: "Simple",
+    docling: "Docling",
+    helpMeChoose: "幫助我選擇",
+    docHelp: "· Docling: 速度稍慢但更準確，特別是包含表格和圖片的文件。 · Simple: 直接提取內容而不進行格式化。 · 自動 (推薦): 優先嘗試 Docling，失敗則回退至 Simple。",
+    firecrawl: "Firecrawl",
+    jina: "Jina",
+    urlHelp: "· Firecrawl: 強大的付費服務（有免費額度）。 · Jina: 優秀的備選方案，同樣提供免費額度。 · Simple: 基礎 HTTP 提取，在 JS 渲染的網站上可能會丟失內容。 · 自動 (推薦): 優先嘗試 Firecrawl，其次 Jina，最後回退至 Simple。",
+    embeddingAndSearch: "嵌入與搜尋",
+    embeddingAndSearchDesc: "設定搜尋和向量嵌入選項",
+    defaultEmbeddingOption: "預設嵌入選項",
+    embeddingOptionPlaceholder: "選擇嵌入選項",
+    ask: "詢問",
+    always: "始終",
+    never: "從不",
+    embeddingHelp: "將內容進行向量嵌入可以讓您和您的 AI 助手更容易找到它。如果您運行本地嵌入模型（如 Ollama），建議開啟。對於線上服務商，只有在每天處理數百個文件時才需考慮成本。",
+    fileManagement: "檔案管理",
+    fileManagementDesc: "設定檔案的處理和儲存選項",
+    autoDeleteFiles: "自動刪除檔案",
+    autoDeletePlaceholder: "選擇自動刪除選項",
+    filesHelp: "檔案處理完成後，原始件不再需要。建議開啟自動刪除以節省儲存空間。除非您將其作為主要儲存位置（不建議），否則請選擇“是”。",
+    loadFailed: "載入設定失敗",
+  },
+  advanced: {
+    title: "進階工具",
+    desc: "針對進階使用者的調試和實用工具",
+    systemInfo: "系統資訊",
+    systemInfoDesc: "查看底層系統組件的狀態",
+    rebuildEmbeddings: "重建索引",
+    rebuildEmbeddingsDesc: "為所有來源重建向量索引",
+    rebuildWarning: "此操作可能非常耗時，具體取決於您的來源數量。它將清除現有的向量索引並重新為所有內容生成嵌入。",
+    startRebuild: "開始重建",
+    rebuilding: "正在重建...",
+    rebuildSuccess: "索引重建已成功啟動",
+    currentVersion: "目前版本",
+    latestVersion: "最新版本",
+    status: "狀態",
+    updateAvailable: "版本 {version} 可用",
+    updateAvailableDesc: "Open Notebook 的新版本可用。",
+    upToDate: "已是最新",
+    unknown: "未知",
+    viewOnGithub: "在 GitHub 上查看",
+    updateCheckFailed: "無法檢查更新。GitHub 可能無法存取。",
+    rebuild: {
+      mode: "重建模式",
+      existing: "僅現有項",
+      all: "全部項",
+      existingDesc: "僅重新嵌入已有向量的項（速度較快，適用於切換模型）",
+      allDesc: "重新嵌入已有項 + 為缺失向量的項補全（速度較慢，較全面）",
+      include: "包含在重建中",
+      selectOneError: "請至少選擇一種重建類型",
+      starting: "正在啟動重建...",
+      startBtn: "開始重建",
+      queued: "排隊中",
+      running: "正在執行...",
+      completed: "已完成!",
+      failed: "失敗",
+      leavePageHint: "您可以離開此頁面，後台將繼續運行",
+      startNew: "開始新的重建",
+      itemsProcessed: "{processed}/{total} 項 ({percent}%)",
+      failedItems: "{count} 項處理失敗",
+      time: "耗時",
+      whenToRebuild: "我該何時重建索引？",
+      whenToRebuildAns: "當您切換嵌入模型、升級模型版本、懷疑資料損壞或進行了大批次內容導入後，建議執行重建。",
+      howLong: "重建需要多長時間？",
+      howLongAns: "耗時取決於項目總數、模型速度和 API 速率限制。本地模型（如 Ollama）通常非常快。",
+      isSafe: "在使用應用時重建安全嗎？",
+      isSafeAns: "是的，重建過程是安全的。它不會刪除您的原始内容，僅會逐步替換向量資料。在大批次處理時，搜尋速度可能會有輕微抖動。",
+    },
+  },
+  transformations: {
+    title: "內容轉換規則",
+    desc: "轉換規則是用於讓大模型處理來源並提取見解、摘要等的提示詞。",
+    workspace: "選擇工作區",
+    playground: "實驗室",
+    defaultPrompt: "預設全局提示詞",
+    defaultPromptDesc: "該提示詞將被新增到您所有的轉換提示詞中",
+    defaultPromptPlaceholder: "輸入您的預設轉換指令...",
+    saveDefault: "儲存預設設定",
+    listTitle: "自訂轉換",
+    createNew: "新建轉換",
+    testInPlayground: "在實驗室測試",
+    inputLabel: "輸入文本",
+    inputPlaceholder: '請輸入要轉換的文本...',
+    outputLabel: '輸出',
+    runTest: '運行轉換',
+    running: '運行中...',
+    selectToStart: '選擇一個轉換規則開始',
+    name: '名稱',
+    namePlaceholder: '唯一標識符，例如 key_topics',
+    titlePlaceholder: '顯示名稱，預設為名稱',
+    promptPlaceholder: '編寫驅動此轉換的提示詞...',
+    descriptionPlaceholder: '描述此轉換的作用。',
+    suggestDefault: '新來源預設建議',
+    promptHint: '提示詞應根據源內容編寫。您可以要求模型總結、提取見解或生成表格等結構化輸出。',
+    createSuccess: '轉換規則建立成功',
+    updateSuccess: '轉換規則更新成功',
+    deleteSuccess: '轉換規則刪除成功',
+    noTransformations: "暫無轉換規則",
+    createOne: "建立一個轉換規則以開始",
+    deleteDesc: "刪除此轉換無法復原。",
+    selectModel: "選擇模型",
+    deleteConfirm: "確定要刪除此轉換規則嗎？",
+    model: "模型",
+    systemPrompt: "系統提示詞",
+    type: "類型",
+    extraction: "提取",
+    summary: "摘要",
+    custom: "自訂",
+    saveChanges: "儲存更改",
+    overrideModelDesc: "為此對話會話覆蓋預設模型。留空則使用系統預設。",
+    sessionUseReplacement: "此會話將使用 {name} 而不是預設模型。",
+    systemDefault: "系統預設",
+  },
+  models: {
+    title: "模型管理",
+    desc: "設定用於 Open Notebook 不同用途的 AI 模型",
+    failedToLoad: "載入模型資料失敗",
+    language: "語言模型",
+    embedding: "嵌入模型",
+    tts: "文字轉語音",
+    stt: "語音轉文字",
+    providers: "提供商",
+    defaultModels: "預設模型",
+    status: "狀態",
+    notConfigured: "未設定",
+    active: "活動",
+    inactive: "不活動",
+    configure: "設定",
+    saveChanges: "儲存更改",
+    addModel: "新增模型",
+    modelName: "模型名稱",
+    provider: "提供商",
+    apiKey: "API 密鑰",
+    baseUrl: "基礎 URL",
+    capabilities: "功能",
+    enabled: "已啟用",
+    disabled: "已禁用",
+    deleteConfirm: "確定要刪除此模型嗎？",
+    deleteSuccess: "模型刪除成功",
+    saveSuccess: "模型儲存成功",
+    providerStatus: "提供商狀態",
+    connectionOk: "連線正常",
+    connectionFailed: "連線失敗",
+    changeEmbeddingWarning: "更改預設嵌入模型將影響新的來源。現有來源可能需要重建索引。",
+    changeEmbeddingTitle: "更改預設嵌入模型？",
+    aiProviders: "AI 提供商",
+    providerConfigDesc: "通過環境變數設定提供商以啟用其模型。",
+    configuredCount: "已設定 {count} / {total}",
+    noModels: "暫無模型",
+    learnMore: "了解如何設定提供商 →",
+    seeLess: "收起",
+    seeAll: "查看全部 {count} 個提供商",
+    language_models: "語言模型",
+    embedding_models: "嵌入模型",
+    text_to_speech: "文字轉語音",
+    speech_to_text: "語音轉文字",
+    languageDesc: "聊天、內容轉換和文本生成",
+    embeddingDesc: "語義搜尋和向量嵌入",
+    ttsDesc: "根據文本生成音訊",
+    sttDesc: "將語音轉錄為文本",
+    all: "全部",
+    noModelsConfigured: "未設定模型",
+    noProviderModelsConfigured: "未設定 {provider} 模型",
+    showMore: "顯示更多 ({count})",
+    deleteModel: "刪除模型",
+    deleteModelDesc: "確定要刪除模型 “{name}” 嗎？該操作無法撤銷。",
+    defaultAssignments: "預設模型分配",
+    defaultAssignmentsDesc: "設定用於 Open Notebook 不同用途的預設模型",
+    missingRequiredModels: "缺少必需的模型：{models}。如果没有這些模型，Open Notebook 可能無法正常運行。",
+    selectModelPlaceholder: "選擇一個模型",
+    requiredModelPlaceholder: "⚠️ 必需 - 請選擇一個模型",
+    whichModelToChoose: "我該選擇哪個模型？→",
+    chatModelLabel: "聊天模型",
+    chatModelDesc: "用於聊天對話",
+    transformationModelLabel: "轉換模型",
+    transformationModelDesc: "用於摘要、見解和內容轉換",
+    toolsModelLabel: "工具模型",
+    toolsModelDesc: "用於函數調用 - 推薦 OpenAI 或 Anthropic",
+    largeContextModelLabel: "大上下文模型",
+    largeContextModelDesc: "用於處理大文件 - 推薦 Gemini",
+    embeddingModelLabel: "嵌入模型",
+    embeddingModelDesc: "用於語義搜尋和向量嵌入",
+    ttsModelLabel: "文字轉語音模型",
+    ttsModelDesc: "用於生成播客",
+    sttModelLabel: "語音轉文字模型",
+    sttModelDesc: "用於音訊轉錄",
+    addSpecificModel: "新增 {type} 模型",
+    addSpecificModelDesc: "從可用提供商設定一個新的 {type} 模型。",
+    noProvidersForType: "暫無可用於 {type} 模型的提供商",
+    selectProviderPlaceholder: "選擇提供商",
+    providerRequired: "提供商是必填項",
+    modelNameRequired: "模型名稱是必填項",
+    modelRequired: "模型是必填項",
+    adding: "正在新增...",
+    azureHint: "對於 Azure，請使用部署名稱作為模型名稱",
+    enterModelName: "輸入模型名稱",
+    embeddingChangeTitle: "嵌入模型變更",
+    embeddingChangeConfirm: "您即將將嵌入模型從 {from} 更改為 {to}。",
+    rebuildRequired: "重要提示：需要重建索引",
+    rebuildReason: "更改嵌入模型需要重建所有現有嵌入以保持一致性。如果不重建，您的搜尋可能會返回錯誤或不完整的结果。",
+    whatHappensNext: "接下來會發生什麼：",
+    step1: "您的預設嵌入模型将被更新",
+    step2: "在重新構建之前，現有的嵌入將保持不變",
+    step3: "新內容將使用新的嵌入模型",
+    step4: "您應該儘快重新構建嵌入",
+    proceedToRebuildPrompt: "您想現在前往“進階設定”頁面開始重建索引嗎？",
+    changeModelOnly: "僅更改模型",
+    changeAndRebuild: "更改並前往重建",
+  },
+}
diff --git a/frontend/src/lib/utils/date-locale.ts b/frontend/src/lib/utils/date-locale.ts
new file mode 100644
index 0000000..5ff6243
--- /dev/null
+++ b/frontend/src/lib/utils/date-locale.ts
@@ -0,0 +1,22 @@
+import { zhCN, enUS, zhTW, Locale } from 'date-fns/locale'
+
+/**
+ * Mapping of language codes to date-fns locales.
+ * Add new languages here as needed.
+ */
+const LOCALE_MAP: Record<string, Locale> = {
+  'zh-CN': zhCN,
+  'zh-TW': zhTW,
+  'en-US': enUS,
+}
+
+/**
+ * Get the date-fns locale for a given language code.
+ * Falls back to English (en-US) if the language is not found.
+ * 
+ * @param language - The language code (e.g., 'zh-CN', 'en-US')
+ * @returns The corresponding date-fns Locale object
+ */
+export function getDateLocale(language: string): Locale {
+  return LOCALE_MAP[language] || enUS
+}
diff --git a/frontend/src/lib/utils/error-handler.ts b/frontend/src/lib/utils/error-handler.ts
new file mode 100644
index 0000000..f9672d0
--- /dev/null
+++ b/frontend/src/lib/utils/error-handler.ts
@@ -0,0 +1,68 @@
+/**
+ * Utility to map backend English error messages to i18n keys.
+ */
+export const ERROR_MAP: Record<string, string> = {
+  "Notebook not found": "apiErrors.notebookNotFound",
+  "Source not found": "apiErrors.sourceNotFound",
+  "Transformation not found": "apiErrors.transformationNotFound",
+  "File upload failed": "apiErrors.fileUploadFailed",
+  "URL is required for link type": "apiErrors.urlRequired",
+  "Content is required for text type": "apiErrors.contentRequired",
+  "Invalid source type": "apiErrors.invalidSourceType",
+  "Processing failed": "apiErrors.processingFailed",
+  "Failed to queue processing": "apiErrors.failedToQueue",
+  "sort_by must be 'created' or 'updated'": "apiErrors.invalidSortBy",
+  "sort_order must be 'asc' or 'desc'": "apiErrors.invalidSortOrder",
+  "Access to file denied": "apiErrors.accessDenied",
+  "File not found on server": "apiErrors.fileNotFoundOnServer",
+  "Missing authorization": "apiErrors.unauthorized",
+  "Invalid password": "apiErrors.invalidPassword",
+  "Invalid authorization header format": "apiErrors.unauthorized",
+  "Missing authorization header": "apiErrors.unauthorized",
+  "Vector search requires an embedding model": "apiErrors.embeddingModelRequired",
+  "Ask feature requires an embedding model": "apiErrors.embeddingModelRequired",
+  "Strategy model": "apiErrors.strategyModelNotFound",
+  "Answer model": "apiErrors.answerModelNotFound",
+  "Final answer model": "apiErrors.finalAnswerModelNotFound",
+  "No answer generated": "apiErrors.noAnswerGenerated",
+};
+
+/**
+ * Translates a backend error message using the ERROR_MAP.
+ * If no mapping exists, returns the fallback key or generic error key.
+ */
+export function getApiErrorKey(errorOrMessage: unknown, fallbackKey?: string): string {
+  const message = formatApiError(errorOrMessage);
+  
+  if (!message) return fallbackKey || "apiErrors.genericError";
+
+  // Try exact match first
+  if (ERROR_MAP[message]) {
+    return ERROR_MAP[message];
+  }
+
+  // Try partial match for dynamic messages (e.g., "File upload failed: ...")
+  for (const [key, value] of Object.entries(ERROR_MAP)) {
+    if (message.startsWith(key)) {
+      return value;
+    }
+  }
+
+  return fallbackKey || "apiErrors.genericError";
+}
+
+/**
+ * Formats a raw error from the API into a user-friendly (potentially translated) string.
+ */
+export function formatApiError(error: unknown): string {
+  if (typeof error === 'string') return error;
+  
+  const err = error as { response?: { data?: { detail?: string } }, detail?: string, message?: string };
+  const detail = err?.response?.data?.detail || err?.detail || err?.message;
+  
+  if (typeof detail === 'string') {
+    return detail; // We'll handle the actual translation using the key in the hook/component
+  }
+  
+  return "An unexpected error occurred";
+}
diff --git a/frontend/src/lib/utils/source-references.tsx b/frontend/src/lib/utils/source-references.tsx
index 26f013e..4ab5827 100644
--- a/frontend/src/lib/utils/source-references.tsx
+++ b/frontend/src/lib/utils/source-references.tsx
@@ -11,6 +11,8 @@ export interface ParsedReference {
   endIndex: number
 }
 
+// ExtractedReference and ExtractedReferences are kept for backward compatibility
+// but not currently used in the codebase
 export interface ExtractedReference {
   type: ReferenceType
   id: string
@@ -327,13 +329,14 @@ export function createReferenceLinkComponent(
  * 4. Append reference list at the bottom
  *
  * @param text - Original text with references
+ * @param referencesLabel - Locales label for "References" title (default: "References")
  * @returns Text with numbered citations and reference list appended
  *
  * @example
  * Input: "See [source:abc] and [note:xyz]. Also [source:abc] again."
  * Output: "See [1] and [2]. Also [1] again.\n\nReferences:\n[1] - [source:abc]\n[2] - [note:xyz]"
  */
-export function convertReferencesToCompactMarkdown(text: string): string {
+export function convertReferencesToCompactMarkdown(text: string, referencesLabel: string = 'References'): string {
   // Step 1: Parse all references using existing function
   const references = parseSourceReferences(text)
 
@@ -394,7 +397,7 @@ export function convertReferencesToCompactMarkdown(text: string): string {
   }
 
   // Step 5: Build reference list
-  const refListLines: string[] = ['\n\nReferences:']
+  const refListLines: string[] = [`\n\n${referencesLabel}:`]
 
   // Iterate through reference map in insertion order (Map preserves order)
   for (const [, refData] of referenceMap) {
diff --git a/frontend/src/test/jest-dom.d.ts b/frontend/src/test/jest-dom.d.ts
new file mode 100644
index 0000000..e48dee9
--- /dev/null
+++ b/frontend/src/test/jest-dom.d.ts
@@ -0,0 +1 @@
+/// <reference types="@testing-library/jest-dom" />
diff --git a/frontend/src/test/setup.ts b/frontend/src/test/setup.ts
new file mode 100644
index 0000000..1a98dc0
--- /dev/null
+++ b/frontend/src/test/setup.ts
@@ -0,0 +1,69 @@
+import '@testing-library/jest-dom'
+import { vi } from 'vitest'
+import { enUS } from '../lib/locales/en-US'
+
+// Mock next/navigation
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+  }),
+  usePathname: () => '',
+  useSearchParams: () => new URLSearchParams(),
+}))
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // Deprecated
+    removeListener: vi.fn(), // Deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+})
+
+// Mock @/lib/hooks/use-translation with full locale structure
+vi.mock('../lib/hooks/use-translation', () => {
+  const t = (key: string) => key
+  Object.assign(t, enUS)
+  
+  return {
+    useTranslation: () => ({
+      t,
+      language: 'en-US',
+      setLanguage: vi.fn(),
+    }),
+  }
+})
+
+// Mock @/lib/hooks/use-auth
+vi.mock('@/lib/hooks/use-auth', () => ({
+  useAuth: vi.fn(() => ({
+    user: { id: '1', email: 'test@example.com' },
+    logout: vi.fn(),
+    isLoading: false,
+  })),
+}))
+
+// Mock @/lib/stores/sidebar-store
+vi.mock('@/lib/stores/sidebar-store', () => ({
+  useSidebarStore: vi.fn(() => ({
+    isCollapsed: false,
+    toggleCollapse: vi.fn(),
+  })),
+}))
+
+// Mock @/lib/hooks/use-create-dialogs
+vi.mock('@/lib/hooks/use-create-dialogs', () => ({
+  useCreateDialogs: vi.fn(() => ({
+    openSourceDialog: vi.fn(),
+    openNotebookDialog: vi.fn(),
+    openPodcastDialog: vi.fn(),
+  })),
+}))
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index c3e5672..dcae906 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -1,3 +1,4 @@
+import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
 
 const config: Config = {
@@ -10,7 +11,7 @@ const config: Config = {
   theme: {
     extend: {},
   },
-  plugins: [require("@tailwindcss/typography")],
+  plugins: [typography],
 };
 
 export default config;
\ No newline at end of file
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index b575f7d..6a2b905 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -36,6 +36,7 @@
     ".next/dev/types/**/*.ts"
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "vitest.config.ts"
   ]
 }
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
new file mode 100644
index 0000000..1649e5e
--- /dev/null
+++ b/frontend/vitest.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./src/test/setup.ts'],
+    alias: {
+      '@': path.resolve(__dirname, './src')
+    }
+  }
+})
diff --git a/mypy.ini b/mypy.ini
index e9daff2..186fd9d 100644
--- a/mypy.ini
+++ b/mypy.ini
@@ -5,7 +5,7 @@ warn_return_any = False
 warn_unused_configs = True
 ignore_missing_imports = True
 no_implicit_optional = False
-check_untyped_defs = False
+
 check_untyped_defs = True
 explicit_package_bases = True
 mypy_path = .
diff --git a/open_notebook/ai/models.py b/open_notebook/ai/models.py
index fef4e83..efdd6d9 100644
--- a/open_notebook/ai/models.py
+++ b/open_notebook/ai/models.py
@@ -173,13 +173,10 @@ class ModelManager:
             model_id = defaults.default_chat_model
         elif model_type == "transformation":
             model_id = (
-                defaults.default_transformation_model
-                or defaults.default_chat_model
+                defaults.default_transformation_model or defaults.default_chat_model
             )
         elif model_type == "tools":
-            model_id = (
-                defaults.default_tools_model or defaults.default_chat_model
-            )
+            model_id = defaults.default_tools_model or defaults.default_chat_model
         elif model_type == "embedding":
             model_id = defaults.default_embedding_model
         elif model_type == "text_to_speech":
diff --git a/open_notebook/database/async_migrate.py b/open_notebook/database/async_migrate.py
index da333c0..5128a2a 100644
--- a/open_notebook/database/async_migrate.py
+++ b/open_notebook/database/async_migrate.py
@@ -107,15 +107,33 @@ class AsyncMigrationManager:
             AsyncMigration.from_file("open_notebook/database/migrations/9.surrealql"),
         ]
         self.down_migrations = [
-            AsyncMigration.from_file("open_notebook/database/migrations/1_down.surrealql"),
-            AsyncMigration.from_file("open_notebook/database/migrations/2_down.surrealql"),
-            AsyncMigration.from_file("open_notebook/database/migrations/3_down.surrealql"),
-            AsyncMigration.from_file("open_notebook/database/migrations/4_down.surrealql"),
-            AsyncMigration.from_file("open_notebook/database/migrations/5_down.surrealql"),
-            AsyncMigration.from_file("open_notebook/database/migrations/6_down.surrealql"),
-            AsyncMigration.from_file("open_notebook/database/migrations/7_down.surrealql"),
-            AsyncMigration.from_file("open_notebook/database/migrations/8_down.surrealql"),
-            AsyncMigration.from_file("open_notebook/database/migrations/9_down.surrealql"),
+            AsyncMigration.from_file(
+                "open_notebook/database/migrations/1_down.surrealql"
+            ),
+            AsyncMigration.from_file(
+                "open_notebook/database/migrations/2_down.surrealql"
+            ),
+            AsyncMigration.from_file(
+                "open_notebook/database/migrations/3_down.surrealql"
+            ),
+            AsyncMigration.from_file(
+                "open_notebook/database/migrations/4_down.surrealql"
+            ),
+            AsyncMigration.from_file(
+                "open_notebook/database/migrations/5_down.surrealql"
+            ),
+            AsyncMigration.from_file(
+                "open_notebook/database/migrations/6_down.surrealql"
+            ),
+            AsyncMigration.from_file(
+                "open_notebook/database/migrations/7_down.surrealql"
+            ),
+            AsyncMigration.from_file(
+                "open_notebook/database/migrations/8_down.surrealql"
+            ),
+            AsyncMigration.from_file(
+                "open_notebook/database/migrations/9_down.surrealql"
+            ),
         ]
         self.runner = AsyncMigrationRunner(
             up_migrations=self.up_migrations,
diff --git a/open_notebook/domain/base.py b/open_notebook/domain/base.py
index 7684489..f1b2d93 100644
--- a/open_notebook/domain/base.py
+++ b/open_notebook/domain/base.py
@@ -2,7 +2,13 @@ from datetime import datetime
 from typing import Any, ClassVar, Dict, List, Optional, Type, TypeVar, Union, cast
 
 from loguru import logger
-from pydantic import BaseModel, ConfigDict, ValidationError, field_validator, model_validator
+from pydantic import (
+    BaseModel,
+    ConfigDict,
+    ValidationError,
+    field_validator,
+    model_validator,
+)
 
 from open_notebook.database.repository import (
     ensure_record_id,
@@ -148,7 +154,9 @@ class ObjectModel(BaseModel):
                 )
             # Update the current instance with the result
             # repo_result is a list of dictionaries
-            result_list: List[Dict[str, Any]] = repo_result if isinstance(repo_result, list) else [repo_result]
+            result_list: List[Dict[str, Any]] = (
+                repo_result if isinstance(repo_result, list) else [repo_result]
+            )
             for key, value in result_list[0].items():
                 if hasattr(self, key):
                     if isinstance(getattr(self, key), BaseModel):
diff --git a/open_notebook/domain/notebook.py b/open_notebook/domain/notebook.py
index ab4c663..aacfe9c 100644
--- a/open_notebook/domain/notebook.py
+++ b/open_notebook/domain/notebook.py
@@ -201,7 +201,9 @@ class Source(ObjectModel):
 
             # Extract execution metadata if available
             result = getattr(status_result, "result", None)
-            execution_metadata = result.get("execution_metadata", {}) if isinstance(result, dict) else {}
+            execution_metadata = (
+                result.get("execution_metadata", {}) if isinstance(result, dict) else {}
+            )
 
             return {
                 "status": status_result.status,
@@ -290,11 +292,11 @@ class Source(ObjectModel):
             # 2. Split text into chunks
             # 3. Submit each chunk as an embed_chunk job
             command_id = submit_command(
-                "open_notebook",      # app name
-                "vectorize_source",   # command name
+                "open_notebook",  # app name
+                "vectorize_source",  # command name
                 {
                     "source_id": str(self.id),
-                }
+                },
             )
 
             command_id_str = str(command_id)
@@ -306,7 +308,9 @@ class Source(ObjectModel):
             return command_id_str
 
         except Exception as e:
-            logger.error(f"Failed to submit vectorization job for source {self.id}: {e}")
+            logger.error(
+                f"Failed to submit vectorization job for source {self.id}: {e}"
+            )
             logger.exception(e)
             raise DatabaseOperationError(e)
 
@@ -365,7 +369,9 @@ class Source(ObjectModel):
                         "Continuing with database deletion."
                     )
             else:
-                logger.debug(f"File {file_path} not found for source {self.id}, skipping cleanup")
+                logger.debug(
+                    f"File {file_path} not found for source {self.id}, skipping cleanup"
+                )
 
         # Call parent delete to remove database record
         return await super().delete()
diff --git a/open_notebook/graphs/ask.py b/open_notebook/graphs/ask.py
index bb11d12..2bdfc20 100644
--- a/open_notebook/graphs/ask.py
+++ b/open_notebook/graphs/ask.py
@@ -62,7 +62,11 @@ async def call_model_with_messages(state: ThreadState, config: RunnableConfig) -
     ai_message = await model.ainvoke(system_prompt)
 
     # Clean the thinking content from the response
-    message_content = ai_message.content if isinstance(ai_message.content, str) else str(ai_message.content)
+    message_content = (
+        ai_message.content
+        if isinstance(ai_message.content, str)
+        else str(ai_message.content)
+    )
     cleaned_content = clean_thinking_content(message_content)
 
     # Parse the cleaned JSON content
@@ -105,7 +109,11 @@ async def provide_answer(state: SubGraphState, config: RunnableConfig) -> dict:
         max_tokens=2000,
     )
     ai_message = await model.ainvoke(system_prompt)
-    ai_content = ai_message.content if isinstance(ai_message.content, str) else str(ai_message.content)
+    ai_content = (
+        ai_message.content
+        if isinstance(ai_message.content, str)
+        else str(ai_message.content)
+    )
     return {"answers": [clean_thinking_content(ai_content)]}
 
 
@@ -118,7 +126,11 @@ async def write_final_answer(state: ThreadState, config: RunnableConfig) -> dict
         max_tokens=2000,
     )
     ai_message = await model.ainvoke(system_prompt)
-    final_content = ai_message.content if isinstance(ai_message.content, str) else str(ai_message.content)
+    final_content = (
+        ai_message.content
+        if isinstance(ai_message.content, str)
+        else str(ai_message.content)
+    )
     return {"final_answer": clean_thinking_content(final_content)}
 
 
diff --git a/open_notebook/graphs/chat.py b/open_notebook/graphs/chat.py
index 408e019..4c32570 100644
--- a/open_notebook/graphs/chat.py
+++ b/open_notebook/graphs/chat.py
@@ -69,7 +69,11 @@ def call_model_with_messages(state: ThreadState, config: RunnableConfig) -> dict
     ai_message = model.invoke(payload)
 
     # Clean thinking content from AI response (e.g., <think>...</think> tags)
-    content = ai_message.content if isinstance(ai_message.content, str) else str(ai_message.content)
+    content = (
+        ai_message.content
+        if isinstance(ai_message.content, str)
+        else str(ai_message.content)
+    )
     cleaned_content = clean_thinking_content(content)
     cleaned_message = ai_message.model_copy(update={"content": cleaned_content})
 
diff --git a/open_notebook/graphs/source.py b/open_notebook/graphs/source.py
index 68e16f5..02d1e75 100644
--- a/open_notebook/graphs/source.py
+++ b/open_notebook/graphs/source.py
@@ -37,7 +37,17 @@ async def content_process(state: SourceState) -> dict:
         default_content_processing_engine_url="auto",
         default_embedding_option="ask",
         auto_delete_files="yes",
-        youtube_preferred_languages=["en", "pt", "es", "de", "nl", "en-GB", "fr", "hi", "ja"]
+        youtube_preferred_languages=[
+            "en",
+            "pt",
+            "es",
+            "de",
+            "nl",
+            "en-GB",
+            "fr",
+            "hi",
+            "ja",
+        ],
     )
     content_state: Dict[str, Any] = state["content_state"]  # type: ignore[assignment]
 
@@ -58,7 +68,9 @@ async def content_process(state: SourceState) -> dict:
             if stt_model:
                 content_state["audio_provider"] = stt_model.provider
                 content_state["audio_model"] = stt_model.name
-                logger.debug(f"Using speech-to-text model: {stt_model.provider}/{stt_model.name}")
+                logger.debug(
+                    f"Using speech-to-text model: {stt_model.provider}/{stt_model.name}"
+                )
     except Exception as e:
         logger.warning(f"Failed to retrieve speech-to-text model configuration: {e}")
         # Continue without custom audio model (content-core will use its default)
@@ -78,11 +90,11 @@ async def save_source(state: SourceState) -> dict:
     # Update the source with processed content
     source.asset = Asset(url=content_state.url, file_path=content_state.file_path)
     source.full_text = content_state.content
-    
+
     # Preserve existing title if none provided in processed content
     if content_state.title:
         source.title = content_state.title
-    
+
     await source.save()
 
     # NOTE: Notebook associations are created by the API immediately for UI responsiveness
diff --git a/open_notebook/graphs/source_chat.py b/open_notebook/graphs/source_chat.py
index dc353bf..142efa2 100644
--- a/open_notebook/graphs/source_chat.py
+++ b/open_notebook/graphs/source_chat.py
@@ -110,7 +110,9 @@ def call_model_with_source_context(
     }
 
     # Apply the source_chat prompt template
-    system_prompt = Prompter(prompt_template="source_chat/system").render(data=prompt_data)
+    system_prompt = Prompter(prompt_template="source_chat/system").render(
+        data=prompt_data
+    )
     payload = [SystemMessage(content=system_prompt)] + state.get("messages", [])
 
     # Handle async model provisioning from sync context
@@ -156,7 +158,11 @@ def call_model_with_source_context(
     ai_message = model.invoke(payload)
 
     # Clean thinking content from AI response (e.g., <think>...</think> tags)
-    content = ai_message.content if isinstance(ai_message.content, str) else str(ai_message.content)
+    content = (
+        ai_message.content
+        if isinstance(ai_message.content, str)
+        else str(ai_message.content)
+    )
     cleaned_content = clean_thinking_content(content)
     cleaned_message = ai_message.model_copy(update={"content": cleaned_content})
 
diff --git a/open_notebook/graphs/transformation.py b/open_notebook/graphs/transformation.py
index cb4906d..9660047 100644
--- a/open_notebook/graphs/transformation.py
+++ b/open_notebook/graphs/transformation.py
@@ -47,7 +47,9 @@ async def run_transformation(state: dict, config: RunnableConfig) -> dict:
     response = await chain.ainvoke(payload)
 
     # Clean thinking content from the response
-    response_content = response.content if isinstance(response.content, str) else str(response.content)
+    response_content = (
+        response.content if isinstance(response.content, str) else str(response.content)
+    )
     cleaned_content = clean_thinking_content(response_content)
 
     if source:
diff --git a/open_notebook/podcasts/models.py b/open_notebook/podcasts/models.py
index 5545f94..6535dfb 100644
--- a/open_notebook/podcasts/models.py
+++ b/open_notebook/podcasts/models.py
@@ -139,9 +139,9 @@ class PodcastEpisode(ObjectModel):
     def _prepare_save_data(self) -> dict:
         """Override to ensure command field is always RecordID format for database"""
         data = super()._prepare_save_data()
-        
+
         # Ensure command field is RecordID format if not None
         if data.get("command") is not None:
             data["command"] = ensure_record_id(data["command"])
-            
+
         return data
diff --git a/open_notebook/utils/__init__.py b/open_notebook/utils/__init__.py
index c5aa0b7..dd910ef 100644
--- a/open_notebook/utils/__init__.py
+++ b/open_notebook/utils/__init__.py
@@ -30,5 +30,5 @@ __all__ = [
     "token_cost",
     "compare_versions",
     "get_installed_version",
-    "get_version_from_github"
-]
\ No newline at end of file
+    "get_version_from_github",
+]
diff --git a/open_notebook/utils/context_builder.py b/open_notebook/utils/context_builder.py
index 906eac5..d3f0666 100644
--- a/open_notebook/utils/context_builder.py
+++ b/open_notebook/utils/context_builder.py
@@ -4,6 +4,7 @@ Generic ContextBuilder for the Open Notebook project.
 This module provides a flexible ContextBuilder class that can handle any parameters
 and build context from sources, notebooks, insights, and notes.
 """
+
 from __future__ import annotations
 
 from dataclasses import dataclass
@@ -20,13 +21,13 @@ from .text_utils import token_count
 @dataclass
 class ContextItem:
     """Represents a single item in the context."""
-    
+
     id: str
     type: Literal["source", "note", "insight"]
     content: Dict[str, Any]
     priority: int = 0
     token_count: Optional[int] = None
-    
+
     def __post_init__(self):
         """Calculate token count for the content if not provided."""
         if self.token_count is None:
@@ -39,12 +40,12 @@ class ContextConfig:
     """Configuration for context building."""
 
     sources: Optional[Dict[str, str]] = None  # {source_id: inclusion_level}
-    notes: Optional[Dict[str, str]] = None    # {note_id: inclusion_level}
+    notes: Optional[Dict[str, str]] = None  # {note_id: inclusion_level}
     include_insights: bool = True
     include_notes: bool = True
     max_tokens: Optional[int] = None
     priority_weights: Optional[Dict[str, int]] = None  # {type: weight}
-    
+
     def __post_init__(self):
         """Initialize default values."""
         if self.sources is None:
@@ -60,7 +61,7 @@ class ContextBuilder:
     Generic ContextBuilder that can handle any parameters and build context
     from sources, notebooks, insights, and notes.
     """
-    
+
     def __init__(self, **kwargs):
         """
         Initialize ContextBuilder with flexible parameters.
@@ -78,20 +79,20 @@ class ContextBuilder:
         self.params = kwargs
 
         # Extract commonly used parameters
-        self.source_id: Optional[str] = kwargs.get('source_id')
-        self.notebook_id: Optional[str] = kwargs.get('notebook_id')
-        self.include_insights: bool = kwargs.get('include_insights', True)
-        self.include_notes: bool = kwargs.get('include_notes', True)
-        self.max_tokens: Optional[int] = kwargs.get('max_tokens')
+        self.source_id: Optional[str] = kwargs.get("source_id")
+        self.notebook_id: Optional[str] = kwargs.get("notebook_id")
+        self.include_insights: bool = kwargs.get("include_insights", True)
+        self.include_notes: bool = kwargs.get("include_notes", True)
+        self.max_tokens: Optional[int] = kwargs.get("max_tokens")
 
         # Context configuration
-        context_config_arg: Optional[ContextConfig] = kwargs.get('context_config')
+        context_config_arg: Optional[ContextConfig] = kwargs.get("context_config")
         self.context_config: ContextConfig
         if context_config_arg is None:
             self.context_config = ContextConfig(
                 include_insights=self.include_insights,
                 include_notes=self.include_notes,
-                max_tokens=self.max_tokens
+                max_tokens=self.max_tokens,
             )
         else:
             self.context_config = context_config_arg
@@ -100,73 +101,72 @@ class ContextBuilder:
         self.items: List[ContextItem] = []
 
         logger.debug(f"ContextBuilder initialized with params: {list(kwargs.keys())}")
-    
+
     async def build(self) -> Dict[str, Any]:
         """
         Build context based on provided parameters.
-        
+
         Returns:
             Dict containing the built context with metadata
         """
         try:
             logger.info("Starting context building")
-            
+
             # Clear existing items
             self.items = []
-            
+
             # Build context based on parameters
             if self.source_id:
                 await self._add_source_context(self.source_id)
-            
+
             if self.notebook_id:
                 await self._add_notebook_context(self.notebook_id)
-            
+
             # Process any additional custom parameters
             await self._process_custom_params()
-            
+
             # Apply post-processing
             self.remove_duplicates()
             self.prioritize()
-            
+
             if self.max_tokens:
                 self.truncate_to_fit(self.max_tokens)
-            
+
             # Format and return response
             return self._format_response()
-            
+
         except Exception as e:
             logger.error(f"Error building context: {str(e)}")
             raise DatabaseOperationError(f"Failed to build context: {str(e)}")
-    
+
     async def _add_source_context(
-        self, 
-        source_id: str, 
-        inclusion_level: str = "insights"
+        self, source_id: str, inclusion_level: str = "insights"
     ) -> None:
         """
         Add source and its insights to context.
-        
+
         Args:
             source_id: ID of the source
             inclusion_level: "insights", "full content", or "not in"
         """
         if inclusion_level == "not in":
             return
-        
+
         try:
             # Ensure source ID has table prefix
             full_source_id = (
-                source_id if source_id.startswith("source:")
-                else f"source:{source_id}"
+                source_id if source_id.startswith("source:") else f"source:{source_id}"
             )
-            
+
             source = await Source.get(full_source_id)
             if not source:
                 logger.warning(f"Source {source_id} not found")
                 return
-            
+
             # Determine context size based on inclusion level
-            context_size: Literal["short", "long"] = "long" if "full content" in inclusion_level else "short"
+            context_size: Literal["short", "long"] = (
+                "long" if "full content" in inclusion_level else "short"
+            )
             source_context = await source.get_context(context_size=context_size)
 
             # Add source item
@@ -175,15 +175,17 @@ class ContextBuilder:
                 id=source.id or "",
                 type="source",
                 content=source_context,
-                priority=priority
+                priority=priority,
             )
             self.add_item(item)
-            
+
             # Add insights if requested and available
             if self.include_insights and "insights" in inclusion_level:
                 insights = await source.get_insights()
                 for insight in insights:
-                    insight_priority = (self.context_config.priority_weights or {}).get("insight", 75)
+                    insight_priority = (self.context_config.priority_weights or {}).get(
+                        "insight", 75
+                    )
                     insight_item = ContextItem(
                         id=insight.id or "",
                         type="insight",
@@ -191,24 +193,24 @@ class ContextBuilder:
                             "id": insight.id,
                             "source_id": source.id,
                             "insight_type": insight.insight_type,
-                            "content": insight.content
+                            "content": insight.content,
                         },
-                        priority=insight_priority
+                        priority=insight_priority,
                     )
                     self.add_item(insight_item)
-            
+
             logger.debug(f"Added source context for {source_id}")
-            
+
         except NotFoundError:
             logger.warning(f"Source {source_id} not found")
         except Exception as e:
             logger.error(f"Error adding source context for {source_id}: {str(e)}")
             raise
-    
+
     async def _add_notebook_context(self, notebook_id: str) -> None:
         """
         Add notebook content based on context configuration.
-        
+
         Args:
             notebook_id: ID of the notebook
         """
@@ -216,7 +218,7 @@ class ContextBuilder:
             notebook = await Notebook.get(notebook_id)
             if not notebook:
                 raise NotFoundError(f"Notebook {notebook_id} not found")
-            
+
             # Process sources from context config or get all
             config_sources = self.context_config.sources
             if config_sources:
@@ -242,134 +244,130 @@ class ContextBuilder:
                     for note in notes:
                         if note.id:
                             await self._add_note_context(note.id, "full content")
-            
+
             logger.debug(f"Added notebook context for {notebook_id}")
-            
+
         except Exception as e:
             logger.error(f"Error adding notebook context for {notebook_id}: {str(e)}")
             raise
-    
+
     async def _add_note_context(
-        self, 
-        note_id: str, 
-        inclusion_level: str = "full content"
+        self, note_id: str, inclusion_level: str = "full content"
     ) -> None:
         """
         Add note to context.
-        
+
         Args:
             note_id: ID of the note
             inclusion_level: "full content" or "not in"
         """
         if inclusion_level == "not in":
             return
-        
+
         try:
             # Ensure note ID has table prefix
-            full_note_id = (
-                note_id if note_id.startswith("note:")
-                else f"note:{note_id}"
-            )
-            
+            full_note_id = note_id if note_id.startswith("note:") else f"note:{note_id}"
+
             note = await Note.get(full_note_id)
             if not note:
                 logger.warning(f"Note {note_id} not found")
                 return
-            
+
             # Get note context
-            context_size: Literal["short", "long"] = "long" if "full content" in inclusion_level else "short"
+            context_size: Literal["short", "long"] = (
+                "long" if "full content" in inclusion_level else "short"
+            )
             note_context = note.get_context(context_size=context_size)
 
             # Add note item
             priority = (self.context_config.priority_weights or {}).get("note", 50)
             item = ContextItem(
-                id=note.id or "",
-                type="note",
-                content=note_context,
-                priority=priority
+                id=note.id or "", type="note", content=note_context, priority=priority
             )
             self.add_item(item)
-            
+
             logger.debug(f"Added note context for {note_id}")
-            
+
         except NotFoundError:
             logger.warning(f"Note {note_id} not found")
         except Exception as e:
             logger.error(f"Error adding note context for {note_id}: {str(e)}")
-    
+
     async def _process_custom_params(self) -> None:
         """Process any additional custom parameters."""
         # Hook for future extensions - can be overridden in subclasses
         # or used to process additional kwargs
         for key, value in self.params.items():
-            if key.startswith('custom_'):
+            if key.startswith("custom_"):
                 logger.debug(f"Processing custom parameter: {key}={value}")
                 # Custom processing logic can be added here
-    
+
     def add_item(self, item: ContextItem) -> None:
         """
         Add a ContextItem to the builder.
-        
+
         Args:
             item: ContextItem to add
         """
         self.items.append(item)
         logger.debug(f"Added item {item.id} with priority {item.priority}")
-    
+
     def prioritize(self) -> None:
         """Sort items by priority (higher priority first)."""
         self.items.sort(key=lambda x: x.priority, reverse=True)
         logger.debug(f"Prioritized {len(self.items)} items")
-    
+
     def truncate_to_fit(self, max_tokens: int) -> None:
         """
         Remove items if total token count exceeds limit.
-        
+
         Args:
             max_tokens: Maximum allowed tokens
         """
         if not max_tokens:
             return
-        
+
         total_tokens = sum(item.token_count or 0 for item in self.items)
-        
+
         if total_tokens <= max_tokens:
             logger.debug(f"Token count {total_tokens} within limit {max_tokens}")
             return
-        
+
         logger.info(f"Truncating from {total_tokens} to {max_tokens} tokens")
-        
+
         # Remove items from the end (lowest priority) until under limit
         current_tokens = total_tokens
         removed_count = 0
-        
+
         while current_tokens > max_tokens and self.items:
             removed_item = self.items.pop()
-            current_tokens -= (removed_item.token_count or 0)
+            current_tokens -= removed_item.token_count or 0
             removed_count += 1
-        
-        logger.info(f"Removed {removed_count} items, final token count: {current_tokens}")
-    
+
+        logger.info(
+            f"Removed {removed_count} items, final token count: {current_tokens}"
+        )
+
     def remove_duplicates(self) -> None:
         """Remove duplicate items based on ID."""
         seen_ids = set()
         deduplicated_items = []
-        
+
         for item in self.items:
             if item.id not in seen_ids:
                 deduplicated_items.append(item)
                 seen_ids.add(item.id)
-        
+
         removed_count = len(self.items) - len(deduplicated_items)
         self.items = deduplicated_items
-        
+
         if removed_count > 0:
             logger.debug(f"Removed {removed_count} duplicate items")
-    
+
     def _format_response(self) -> Dict[str, Any]:
         """
         Format the final response.
-        
+
         Returns:
             Formatted context response
         """
@@ -377,7 +375,7 @@ class ContextBuilder:
         sources = []
         notes = []
         insights = []
-        
+
         for item in self.items:
             if item.type == "source":
                 sources.append(item.content)
@@ -385,10 +383,10 @@ class ContextBuilder:
                 notes.append(item.content)
             elif item.type == "insight":
                 insights.append(item.content)
-        
+
         # Calculate total tokens
         total_tokens = sum(item.token_count or 0 for item in self.items)
-        
+
         response = {
             "sources": sources,
             "notes": notes,
@@ -402,66 +400,63 @@ class ContextBuilder:
                 "config": {
                     "include_insights": self.include_insights,
                     "include_notes": self.include_notes,
-                    "max_tokens": self.max_tokens
-                }
-            }
+                    "max_tokens": self.max_tokens,
+                },
+            },
         }
-        
+
         # Add notebook_id if provided
         if self.notebook_id:
             response["notebook_id"] = self.notebook_id
-        
-        logger.info(f"Built context with {len(self.items)} items, {total_tokens} tokens")
-        
+
+        logger.info(
+            f"Built context with {len(self.items)} items, {total_tokens} tokens"
+        )
+
         return response
 
 
 # Convenience functions for common use cases
 
+
 async def build_notebook_context(
     notebook_id: str,
     context_config: Optional[ContextConfig] = None,
-    max_tokens: Optional[int] = None
+    max_tokens: Optional[int] = None,
 ) -> Dict[str, Any]:
     """
     Build context for a notebook.
-    
+
     Args:
         notebook_id: ID of the notebook
         context_config: Optional context configuration
         max_tokens: Optional token limit
-    
+
     Returns:
         Built context
     """
     builder = ContextBuilder(
-        notebook_id=notebook_id,
-        context_config=context_config,
-        max_tokens=max_tokens
+        notebook_id=notebook_id, context_config=context_config, max_tokens=max_tokens
     )
     return await builder.build()
 
 
 async def build_source_context(
-    source_id: str,
-    include_insights: bool = True,
-    max_tokens: Optional[int] = None
+    source_id: str, include_insights: bool = True, max_tokens: Optional[int] = None
 ) -> Dict[str, Any]:
     """
     Build context for a single source.
-    
+
     Args:
         source_id: ID of the source
         include_insights: Whether to include insights
         max_tokens: Optional token limit
-    
+
     Returns:
         Built context
     """
     builder = ContextBuilder(
-        source_id=source_id,
-        include_insights=include_insights,
-        max_tokens=max_tokens
+        source_id=source_id, include_insights=include_insights, max_tokens=max_tokens
     )
     return await builder.build()
 
@@ -470,33 +465,31 @@ async def build_mixed_context(
     source_ids: Optional[List[str]] = None,
     note_ids: Optional[List[str]] = None,
     notebook_id: Optional[str] = None,
-    max_tokens: Optional[int] = None
+    max_tokens: Optional[int] = None,
 ) -> Dict[str, Any]:
     """
     Build context from mixed sources.
-    
+
     Args:
         source_ids: List of source IDs
         note_ids: List of note IDs
         notebook_id: Optional notebook ID
         max_tokens: Optional token limit
-    
+
     Returns:
         Built context
     """
     context_config = ContextConfig(max_tokens=max_tokens)
-    
+
     # Configure sources
     if source_ids:
         context_config.sources = {sid: "insights" for sid in source_ids}
-    
-    # Configure notes  
+
+    # Configure notes
     if note_ids:
         context_config.notes = {nid: "full content" for nid in note_ids}
-    
+
     builder = ContextBuilder(
-        notebook_id=notebook_id,
-        context_config=context_config,
-        max_tokens=max_tokens
+        notebook_id=notebook_id, context_config=context_config, max_tokens=max_tokens
     )
-    return await builder.build()
\ No newline at end of file
+    return await builder.build()
diff --git a/open_notebook/utils/text_utils.py b/open_notebook/utils/text_utils.py
index b2a7720..3a98216 100644
--- a/open_notebook/utils/text_utils.py
+++ b/open_notebook/utils/text_utils.py
@@ -128,7 +128,7 @@ def parse_thinking_content(content: str) -> Tuple[str, str]:
     if malformed_match:
         thinking_content = malformed_match.group(1).strip()
         # Remove the thinking content and </think> tag
-        cleaned_content = content[malformed_match.end():].strip()
+        cleaned_content = content[malformed_match.end() :].strip()
         return thinking_content, cleaned_content
 
     return "", content
diff --git a/open_notebook/utils/token_utils.py b/open_notebook/utils/token_utils.py
index 3ef133e..9b4a9ea 100644
--- a/open_notebook/utils/token_utils.py
+++ b/open_notebook/utils/token_utils.py
@@ -24,6 +24,7 @@ def token_count(input_string: str) -> int:
     """
     try:
         import tiktoken
+
         encoding = tiktoken.get_encoding("o200k_base")
         tokens = encoding.encode(input_string)
         return len(tokens)
@@ -43,4 +44,4 @@ def token_cost(token_count: int, cost_per_million: float = 0.150) -> float:
     Returns:
         float: The calculated cost for the given token count.
     """
-    return cost_per_million * (token_count / 1_000_000)
\ No newline at end of file
+    return cost_per_million * (token_count / 1_000_000)
diff --git a/open_notebook/utils/version_utils.py b/open_notebook/utils/version_utils.py
index 124965c..27662b9 100644
--- a/open_notebook/utils/version_utils.py
+++ b/open_notebook/utils/version_utils.py
@@ -11,6 +11,50 @@ import tomli
 from packaging.version import parse as parse_version
 
 
+async def get_version_from_github_async(repo_url: str, branch: str = "main") -> str:
+    """
+    Fetch and parse the version from pyproject.toml in a public GitHub repository (async).
+    """
+    from urllib.parse import urlparse
+    import httpx
+    import tomli
+
+    # Parse the GitHub URL
+    parsed_url = urlparse(repo_url)
+    if "github.com" not in parsed_url.netloc:
+        raise ValueError("Not a GitHub URL")
+
+    # Extract owner and repo name from path
+    path_parts = parsed_url.path.strip("/").split("/")
+    if len(path_parts) < 2:
+        raise ValueError("Invalid GitHub repository URL")
+
+    owner, repo = path_parts[0], path_parts[1]
+
+    # Construct raw content URL for pyproject.toml
+    raw_url = f"https://raw.githubusercontent.com/{owner}/{repo}/{branch}/pyproject.toml"
+
+    # Fetch the file with timeout using httpx
+    async with httpx.AsyncClient(timeout=10.0) as client:
+        response = await client.get(raw_url)
+        response.raise_for_status()
+
+    # Parse TOML content
+    pyproject_data = tomli.loads(response.text)
+
+    # Try to find version
+    try:
+        # Check tool.poetry.version
+        version_str = pyproject_data["tool"]["poetry"]["version"]
+    except KeyError:
+        try:
+            # Check project.version
+            version_str = pyproject_data["project"]["version"]
+        except KeyError:
+            raise KeyError("Version not found in pyproject.toml")
+
+    return version_str
+
 def get_version_from_github(repo_url: str, branch: str = "main") -> str:
     """
     Fetch and parse the version from pyproject.toml in a public GitHub repository.
diff --git a/scripts/export_docs.py b/scripts/export_docs.py
index 602c618..fb8ec17 100644
--- a/scripts/export_docs.py
+++ b/scripts/export_docs.py
@@ -36,7 +36,9 @@ def consolidate_folder(folder: Path, output_dir: Path) -> None:
     with output_file.open("w", encoding="utf-8") as outf:
         # Write header
         outf.write(f"# {folder.name.replace('-', ' ').title()}\n\n")
-        outf.write(f"This document consolidates all content from the {folder.name} documentation folder.\n\n")
+        outf.write(
+            f"This document consolidates all content from the {folder.name} documentation folder.\n\n"
+        )
         outf.write("---\n\n")
 
         # Process each markdown file
@@ -71,7 +73,9 @@ def main():
     logger.info(f"Output directory: {output_dir.absolute()}")
 
     # Get all subdirectories in docs/
-    subdirs = [d for d in docs_dir.iterdir() if d.is_dir() and not d.name.startswith(".")]
+    subdirs = [
+        d for d in docs_dir.iterdir() if d.is_dir() and not d.name.startswith(".")
+    ]
 
     if not subdirs:
         logger.warning("No subdirectories found in docs/")
diff --git a/tests/test_domain.py b/tests/test_domain.py
index 4abd4de..ac623e1 100644
--- a/tests/test_domain.py
+++ b/tests/test_domain.py
@@ -136,14 +136,16 @@ class TestSourceDomain:
             source = Source(
                 id="source:test_delete",
                 title="Test Source",
-                asset=Asset(file_path=str(tmp_path))
+                asset=Asset(file_path=str(tmp_path)),
             )
 
             # Verify file exists
             assert tmp_path.exists()
 
             # Mock the parent delete method to avoid database operations
-            with patch.object(Source.__bases__[0], 'delete', new_callable=AsyncMock) as mock_delete:
+            with patch.object(
+                Source.__bases__[0], "delete", new_callable=AsyncMock
+            ) as mock_delete:
                 mock_delete.return_value = True
 
                 # Delete the source
@@ -165,14 +167,12 @@ class TestSourceDomain:
     async def test_source_delete_without_file(self):
         """Test that deleting a source without a file doesn't fail."""
         # Create source without file asset
-        source = Source(
-            id="source:test_no_file",
-            title="Test Source",
-            asset=None
-        )
+        source = Source(id="source:test_no_file", title="Test Source", asset=None)
 
         # Mock the parent delete method
-        with patch.object(Source.__bases__[0], 'delete', new_callable=AsyncMock) as mock_delete:
+        with patch.object(
+            Source.__bases__[0], "delete", new_callable=AsyncMock
+        ) as mock_delete:
             mock_delete.return_value = True
 
             # Delete should complete without error
@@ -187,11 +187,13 @@ class TestSourceDomain:
         source = Source(
             id="source:test_missing_file",
             title="Test Source",
-            asset=Asset(file_path="/nonexistent/path/file.txt")
+            asset=Asset(file_path="/nonexistent/path/file.txt"),
         )
 
         # Mock the parent delete method
-        with patch.object(Source.__bases__[0], 'delete', new_callable=AsyncMock) as mock_delete:
+        with patch.object(
+            Source.__bases__[0], "delete", new_callable=AsyncMock
+        ) as mock_delete:
             mock_delete.return_value = True
 
             # Delete should complete even though file doesn't exist
@@ -272,7 +274,9 @@ class TestPodcastDomain:
                 name="Test",
                 tts_provider="openai",
                 tts_model="tts-1",
-                speakers=[{"name": "Speaker 1"}],  # Missing voice_id, backstory, personality
+                speakers=[
+                    {"name": "Speaker 1"}
+                ],  # Missing voice_id, backstory, personality
             )
 
         # Test valid - single speaker with all fields
@@ -345,7 +349,9 @@ class TestEpisodeProfile:
     def test_episode_profile_segment_validation(self):
         """Test segment count validation (3-20)."""
         # Test invalid - too few segments
-        with pytest.raises(ValidationError, match="Number of segments must be between 3 and 20"):
+        with pytest.raises(
+            ValidationError, match="Number of segments must be between 3 and 20"
+        ):
             EpisodeProfile(
                 name="Test",
                 speaker_config="default",
@@ -358,7 +364,9 @@ class TestEpisodeProfile:
             )
 
         # Test invalid - too many segments
-        with pytest.raises(ValidationError, match="Number of segments must be between 3 and 20"):
+        with pytest.raises(
+            ValidationError, match="Number of segments must be between 3 and 20"
+        ):
             EpisodeProfile(
                 name="Test",
                 speaker_config="default",
diff --git a/tests/test_graphs.py b/tests/test_graphs.py
index 899dc5c..22661b4 100644
--- a/tests/test_graphs.py
+++ b/tests/test_graphs.py
@@ -77,10 +77,7 @@ class TestPromptGraph:
     def test_pattern_chain_state_structure(self):
         """Test PatternChainState structure and fields."""
         state = PatternChainState(
-            prompt="Test prompt",
-            parser=None,
-            input_text="Test input",
-            output=""
+            prompt="Test prompt", parser=None, input_text="Test input", output=""
         )
 
         assert state["prompt"] == "Test prompt"
@@ -119,7 +116,7 @@ class TestTransformationGraph:
             input_text="Test text",
             source=mock_source,
             transformation=mock_transformation,
-            output=""
+            output="",
         )
 
         assert state["input_text"] == "Test text"
@@ -139,7 +136,7 @@ class TestTransformationGraph:
         state = {
             "input_text": None,
             "transformation": mock_transformation,
-            "source": None
+            "source": None,
         }
 
         config = {"configurable": {"model_id": None}}
diff --git a/tests/test_models_api.py b/tests/test_models_api.py
index b0ef456..8c32b97 100644
--- a/tests/test_models_api.py
+++ b/tests/test_models_api.py
@@ -97,9 +97,7 @@ class TestModelCreation:
 
     @pytest.mark.asyncio
     @patch("open_notebook.database.repository.repo_query")
-    async def test_create_same_model_name_different_type(
-        self, mock_repo_query, client
-    ):
+    async def test_create_same_model_name_different_type(self, mock_repo_query, client):
         """Test that creating a model with same name but different type is allowed."""
         from open_notebook.ai.models import Model
 
diff --git a/tests/test_utils.py b/tests/test_utils.py
index 65e12e1..d92040b 100644
--- a/tests/test_utils.py
+++ b/tests/test_utils.py
@@ -52,7 +52,7 @@ class TestTextUtilities:
     def test_remove_non_printable(self):
         """Test removal of non-printable characters."""
         # Text with various Unicode whitespace and control chars
-        text = "Hello\u2000World\u200B\u202FTest"
+        text = "Hello\u2000World\u200b\u202fTest"
         result = remove_non_printable(text)
 
         # Should have regular spaces and printable chars only
@@ -146,7 +146,9 @@ class TestTokenUtilities:
         from unittest.mock import patch
 
         # Make tiktoken raise an ImportError to trigger fallback
-        with patch("tiktoken.get_encoding", side_effect=ImportError("tiktoken not available")):
+        with patch(
+            "tiktoken.get_encoding", side_effect=ImportError("tiktoken not available")
+        ):
             text = "one two three four five"
             count = token_count(text)
 
@@ -253,7 +255,7 @@ class TestContextBuilder:
             source_id="source:123",
             notebook_id="notebook:456",
             max_tokens=1000,
-            include_insights=False
+            include_insights=False,
         )
 
         assert builder.source_id == "source:123"