feat: multilingual glossary UI, translate selector, context fusion

- TermEditor: rewritten with expandable multilingual translation grid
  (13 languages), editorial styling, source/target + translations JSON
- GlossarySelector: new component in translate page config panel,
  fetches user glossaries, shows flag + term count, Pro+LLM only
- useTranslationConfig: added glossaryId state
- useTranslationSubmit: sends glossary_id to backend
- Context page: removed textarea glossary, presets now create API
  glossaries via template import, added link to Glossaries page
- i18n: added 12 keys × 13 locales for glossary/translate/context

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/app/dashboard/translate/GlossarySelector.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { BookText, ChevronDown } from 'lucide-react';
+import { API_BASE } from '@/lib/config';
+import { useI18n } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+import { SUPPORTED_LANGUAGES } from '../glossaries/types';
+
+interface GlossaryOption {
+  id: string;
+  name: string;
+  source_language: string;
+  terms_count: number;
+}
+
+interface GlossarySelectorProps {
+  glossaryId: string | null;
+  onChange: (id: string | null) => void;
+  disabled?: boolean;
+}
+
+export function GlossarySelector({ glossaryId, onChange, disabled }: GlossarySelectorProps) {
+  const { t } = useI18n();
+  const [glossaries, setGlossaries] = useState<GlossaryOption[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchGlossaries = async () => {
+      try {
+        const token = localStorage.getItem('token');
+        const headers: Record<string, string> = {};
+        if (token) headers['Authorization'] = `Bearer ${token}`;
+
+        const res = await fetch(`${API_BASE}/api/v1/glossaries?per_page=100`, { headers });
+        if (res.ok) {
+          const data = await res.json();
+          setGlossaries(data.data || []);
+        }
+      } catch {
+        // ignore
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchGlossaries();
+  }, []);
+
+  const selected = glossaries.find(g => g.id === glossaryId);
+  const sourceFlag = SUPPORTED_LANGUAGES.find(l => l.code === selected?.source_language)?.flag ?? '';
+
+  if (isLoading || glossaries.length === 0) return null;
+
+  return (
+    <div className="space-y-3">
+      <label className="text-[9px] font-black text-brand-dark/40 dark:text-white/40 uppercase tracking-[0.2em] block">
+        <BookText size={10} className="inline mr-1.5 text-brand-accent" />
+        {t('translate.glossary.title')}
+      </label>
+
+      <div className="relative">
+        <button
+          onClick={() => !disabled && setIsOpen(!isOpen)}
+          disabled={disabled}
+          className={cn(
+            "w-full px-5 py-4 bg-brand-muted dark:bg-white/10 rounded-2xl text-[10px] font-black uppercase tracking-widest border border-black/5 dark:border-white/10 flex items-center justify-between gap-3 transition-all",
+            isOpen && "ring-2 ring-brand-accent/20 border-brand-accent/30",
+            disabled && "opacity-50 cursor-not-allowed"
+          )}
+        >
+          <span className={cn(
+            "truncate",
+            selected ? "text-brand-dark dark:text-white" : "text-brand-dark/30 dark:text-white/30"
+          )}>
+            {selected ? (
+              <>{sourceFlag} {selected.name} <span className="text-brand-dark/30 dark:text-white/30 font-normal normal-case">({selected.terms_count} {t('translate.glossary.terms')})</span></>
+            ) : (
+              t('translate.glossary.select')
+            )}
+          </span>
+          <ChevronDown size={14} className={cn(
+            "text-brand-accent shrink-0 transition-transform",
+            isOpen && "rotate-180"
+          )} />
+        </button>
+
+        {isOpen && (
+          <div className="absolute z-50 top-full left-0 right-0 mt-2 bg-white dark:bg-[#1a1a1a] rounded-2xl border border-black/10 dark:border-white/10 shadow-xl max-h-64 overflow-y-auto">
+            {/* None option */}
+            <button
+              onClick={() => { onChange(null); setIsOpen(false); }}
+              className={cn(
+                "w-full px-5 py-3 text-left text-[10px] font-black uppercase tracking-widest hover:bg-brand-muted dark:hover:bg-white/5 transition-colors",
+                !glossaryId ? "text-brand-accent" : "text-brand-dark/30 dark:text-white/30"
+              )}
+            >
+              {t('translate.glossary.none')}
+            </button>
+
+            {glossaries.map((g) => {
+              const flag = SUPPORTED_LANGUAGES.find(l => l.code === g.source_language)?.flag ?? '';
+              return (
+                <button
+                  key={g.id}
+                  onClick={() => { onChange(g.id); setIsOpen(false); }}
+                  className={cn(
+                    "w-full px-5 py-3 text-left text-[10px] font-black uppercase tracking-widest hover:bg-brand-muted dark:hover:bg-white/5 transition-colors border-t border-black/5 dark:border-white/5",
+                    glossaryId === g.id ? "text-brand-accent" : "text-brand-dark dark:text-white"
+                  )}
+                >
+                  <span className="mr-2">{flag}</span>
+                  {g.name}
+                  <span className="ml-2 text-brand-dark/30 dark:text-white/30 font-normal normal-case">
+                    ({g.terms_count} {t('translate.glossary.terms')})
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/app/dashboard/translate/page.tsx

@@ -13,6 +13,7 @@ import { useTranslationConfig } from './useTranslationConfig';
 import { useTranslationSubmit } from './useTranslationSubmit';
 import LanguageSelector from './LanguageSelector';
 import { ProviderSelector } from './ProviderSelector';
+import { GlossarySelector } from './GlossarySelector';
 import { useNotification } from '@/components/ui/notification';
 import { useI18n } from '@/lib/i18n';
 import { API_BASE } from '@/lib/config';
@@ -401,6 +402,14 @@ export default function TranslatePage() {
                       isPro={config.isPro}
                     />
 
+                    {config.isPro && config.mode === 'llm' && (
+                      <GlossarySelector
+                        glossaryId={config.glossaryId}
+                        onChange={config.setGlossaryId}
+                        disabled={submit.isSubmitting}
+                      />
+                    )}
+
                     {/* PDF mode selector */}
                     {isPdf && (
                       <div className="space-y-2">

frontend/src/app/dashboard/translate/types.ts

@@ -42,6 +42,7 @@ export interface TranslationConfig {
   mode: TranslationMode;
   provider?: Provider;
   pdfMode?: 'layout' | 'text_only';
+  glossaryId?: string | null;
 }
 
 export interface UseTranslationConfigReturn {
@@ -60,6 +61,8 @@ export interface UseTranslationConfigReturn {
   setSourceLang: (lang: string) => void;
   setTargetLang: (lang: string) => void;
   setProvider: (provider: Provider | null) => void;
+  glossaryId: string | null;
+  setGlossaryId: (id: string | null) => void;
   getConfig: () => TranslationConfig;
 }
 

frontend/src/app/dashboard/translate/useTranslationConfig.ts

@@ -64,6 +64,7 @@ export function useTranslationConfig(hasFile: boolean): UseTranslationConfigRetu
   const [sourceLang, setSourceLang] = useState('auto');
   const [targetLang, setTargetLang] = useState(settings.defaultTargetLanguage || '');
   const [provider, setProvider] = useState<Provider | null>(null);
+  const [glossaryId, setGlossaryId] = useState<string | null>(null);
   const [availableProviders, setAvailableProviders] = useState<AvailableProvider[]>([]);
   const [isLoadingProviders, setIsLoadingProviders] = useState(false);
   const [languages, setLanguages] = useState<Language[]>([]);
@@ -212,7 +213,8 @@ export function useTranslationConfig(hasFile: boolean): UseTranslationConfigRetu
     targetLang,
     mode,
     provider: provider ?? undefined,
-  }), [sourceLang, targetLang, mode, provider]);
+    glossaryId,
+  }), [sourceLang, targetLang, mode, provider, glossaryId]);
 
   return {
     sourceLang,
@@ -229,6 +231,8 @@ export function useTranslationConfig(hasFile: boolean): UseTranslationConfigRetu
     setSourceLang,
     setTargetLang,
     setProvider,
+    glossaryId,
+    setGlossaryId,
     getConfig,
   };
 }

frontend/src/app/dashboard/translate/useTranslationSubmit.ts

@@ -143,6 +143,10 @@ export function useTranslationSubmit(): UseTranslationSubmitReturn {
       if (config.pdfMode) {
         formData.append('pdf_mode', config.pdfMode);
       }
+      // Glossary for LLM translation (Pro only)
+      if (config.glossaryId) {
+        formData.append('glossary_id', config.glossaryId);
+      }
 
       const token = localStorage.getItem('token');
       const headers: Record<string, string> = {};