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/context/page.tsx

@@ -2,40 +2,40 @@
 
 import { useState, useEffect } from 'react';
 import {
-  Zap, Save, Brain, BookOpen, Trash2, Crown, Loader2,
+  Zap, Save, Crown, Loader2, Trash2,
   Wrench, HardHat, Monitor, Scale, Stethoscope, BarChart3,
-  Megaphone, Car, MessageSquare, Database,
+  Megaphone, Car, MessageSquare, BookOpen, CheckCircle2,
 } from 'lucide-react';
 import { useTranslationStore } from '@/lib/store';
 import { API_BASE } from '@/lib/config';
 import { useI18n } from '@/lib/i18n';
+import { useToast } from '@/components/ui/toast';
 import Link from 'next/link';
 import { cn } from '@/lib/utils';
 
 const PRESETS = [
-  { key: 'hvac', title: 'HVAC / Génie climatique', desc: 'Thermique, ventilation, climatisation', icon: Wrench },
-  { key: 'construction', title: 'BTP / Construction', desc: 'Gros œuvre, second œuvre, normes', icon: HardHat },
-  { key: 'it', title: 'IT / Logiciel', desc: 'Développement, infrastructure, DevOps', icon: Monitor },
-  { key: 'legal', title: 'Juridique / Contrats', desc: 'Droit des affaires, contentieux', icon: Scale },
-  { key: 'medical', title: 'Médical / Santé', desc: 'Pharmacologie, chirurgie, diagnostic', icon: Stethoscope },
-  { key: 'finance', title: 'Finance / Comptabilité', desc: 'IFRS, bilans, fiscalité', icon: BarChart3 },
-  { key: 'marketing', title: 'Marketing / Publicité', desc: 'Digital, branding, analytics', icon: Megaphone },
-  { key: 'automotive', title: 'Automobile', desc: 'Motorisation, ADAS, homologation', icon: Car },
+  { key: 'hvac', title: 'HVAC / Génie climatique', desc: 'Thermique, ventilation, climatisation', icon: Wrench, templateId: 'hvac' },
+  { key: 'construction', title: 'BTP / Construction', desc: 'Gros œuvre, second œuvre, normes', icon: HardHat, templateId: 'construction' },
+  { key: 'it', title: 'IT / Logiciel', desc: 'Développement, infrastructure, DevOps', icon: Monitor, templateId: 'technology' },
+  { key: 'legal', title: 'Juridique / Contrats', desc: 'Droit des affaires, contentieux', icon: Scale, templateId: 'legal' },
+  { key: 'medical', title: 'Médical / Santé', desc: 'Pharmacologie, chirurgie, diagnostic', icon: Stethoscope, templateId: 'medical' },
+  { key: 'finance', title: 'Finance / Comptabilité', desc: 'IFRS, bilans, fiscalité', icon: BarChart3, templateId: 'finance' },
+  { key: 'marketing', title: 'Marketing / Publicité', desc: 'Digital, branding, analytics', icon: Megaphone, templateId: 'marketing' },
+  { key: 'automotive', title: 'Automobile', desc: 'Motorisation, ADAS, homologation', icon: Car, templateId: 'automotive' },
 ];
 
 export default function ContextGlossaryPage() {
   const { t } = useI18n();
-  const { settings, updateSettings, applyPreset, clearContext } = useTranslationStore();
+  const { settings, updateSettings } = useTranslationStore();
+  const { toast } = useToast();
   const [isSaving, setIsSaving] = useState(false);
   const [isPro, setIsPro] = useState(false);
+  const [creatingPreset, setCreatingPreset] = useState<string | null>(null);
 
-  const [localSettings, setLocalSettings] = useState({
-    systemPrompt: settings.systemPrompt,
-    glossary: settings.glossary,
-  });
+  const [systemPrompt, setSystemPrompt] = useState(settings.systemPrompt);
 
   useEffect(() => {
-    setLocalSettings({ systemPrompt: settings.systemPrompt, glossary: settings.glossary });
+    setSystemPrompt(settings.systemPrompt);
   }, [settings]);
 
   useEffect(() => {
@@ -66,24 +66,60 @@ export default function ContextGlossaryPage() {
   const handleSave = async () => {
     setIsSaving(true);
     try {
-      updateSettings(localSettings);
+      updateSettings({ systemPrompt });
       await new Promise(resolve => setTimeout(resolve, 500));
+      toast({ title: t('context.saved'), description: t('context.savedDesc') });
     } finally { setIsSaving(false); }
   };
 
-  const handleApplyPreset = (key: string) => {
-    applyPreset(key);
-    setTimeout(() => {
-      setLocalSettings({
-        systemPrompt: useTranslationStore.getState().settings.systemPrompt,
-        glossary: useTranslationStore.getState().settings.glossary,
-      });
-    }, 0);
+  const handleClear = () => {
+    updateSettings({ systemPrompt: '' });
+    setSystemPrompt('');
   };
 
-  const handleClear = () => {
-    clearContext();
-    setLocalSettings({ systemPrompt: '', glossary: '' });
+  const handleCreatePresetGlossary = async (preset: typeof PRESETS[0]) => {
+    setCreatingPreset(preset.key);
+    try {
+      const token = localStorage.getItem('token');
+      if (!token) return;
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      };
+
+      // Import the template as a new glossary via the API
+      const params = new URLSearchParams({ template_id: preset.templateId });
+      const res = await fetch(`${API_BASE}/api/v1/glossaries/import?${params.toString()}`, {
+        method: 'POST',
+        headers,
+      });
+
+      if (res.ok) {
+        const result = await res.json();
+        const glossary = result.data;
+        toast({
+          title: t('context.presets.created'),
+          description: t('context.presets.createdDesc', {
+            name: glossary?.name ?? preset.title,
+            count: String(glossary?.terms?.length ?? 0),
+          }),
+        });
+      } else {
+        toast({
+          variant: 'destructive',
+          title: t('glossaries.toast.error'),
+          description: t('glossaries.toast.errorCreate'),
+        });
+      }
+    } catch {
+      toast({
+        variant: 'destructive',
+        title: t('glossaries.toast.error'),
+        description: t('glossaries.toast.errorImport'),
+      });
+    } finally {
+      setCreatingPreset(null);
+    }
   };
 
   if (!isPro) {
@@ -130,14 +166,20 @@ export default function ContextGlossaryPage() {
           <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
             {PRESETS.map((p) => {
               const Icon = p.icon;
+              const isCreating = creatingPreset === p.key;
               return (
                 <button
                   key={p.key}
-                  onClick={() => handleApplyPreset(p.key)}
-                  className="p-6 bg-brand-muted dark:bg-white/5 hover:bg-brand-dark dark:hover:bg-brand-dark group transition-all rounded-[32px] text-center border border-black/5 dark:border-white/10 hover:shadow-2xl hover:-translate-y-1"
+                  onClick={() => handleCreatePresetGlossary(p)}
+                  disabled={!!creatingPreset}
+                  className="p-6 bg-brand-muted dark:bg-white/5 hover:bg-brand-dark dark:hover:bg-brand-dark group transition-all rounded-[32px] text-center border border-black/5 dark:border-white/10 hover:shadow-2xl hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   <div className="flex justify-center mb-4 text-brand-dark group-hover:text-brand-accent group-hover:scale-125 transition-all">
-                    <Icon size={24} />
+                    {isCreating ? (
+                      <Loader2 size={24} className="animate-spin" />
+                    ) : (
+                      <Icon size={24} />
+                    )}
                   </div>
                   <h4 className="text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white group-hover:text-white mb-2">
                     {p.title}
@@ -145,10 +187,18 @@ export default function ContextGlossaryPage() {
                   <p className="text-[8px] text-brand-dark/30 dark:text-white/30 group-hover:text-white/40 font-bold uppercase tracking-widest leading-relaxed">
                     {p.desc}
                   </p>
+                  <span className="inline-flex items-center gap-1 mt-3 px-3 py-1 rounded-full bg-brand-accent/10 text-brand-accent text-[8px] font-black uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">
+                    <BookOpen size={10} />
+                    {t('context.presets.createGlossary')}
+                  </span>
                 </button>
               );
             })}
           </div>
+
+          <p className="mt-8 text-[9px] text-brand-dark/20 dark:text-white/20 font-black uppercase tracking-widest italic border-t border-black/5 dark:border-white/5 pt-6">
+            {t('context.presets.hint')}
+          </p>
         </section>
 
         {/* ── Context Instructions ──────────────────────────────── */}
@@ -161,8 +211,8 @@ export default function ContextGlossaryPage() {
           </div>
           <p className="text-sm text-brand-dark/40 dark:text-white/40 mb-10 font-medium">{t('context.instructions.desc')}</p>
           <textarea
-            value={localSettings.systemPrompt}
-            onChange={e => setLocalSettings({ ...localSettings, systemPrompt: e.target.value })}
+            value={systemPrompt}
+            onChange={e => setSystemPrompt(e.target.value)}
             placeholder={t('context.instructions.placeholder')}
             className="w-full h-48 p-8 bg-brand-muted dark:bg-white/5 rounded-[32px] border border-black/5 dark:border-white/10 text-sm focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all outline-none resize-y"
           />
@@ -184,41 +234,27 @@ export default function ContextGlossaryPage() {
           </div>
         </section>
 
-        {/* ── Technical Glossary ────────────────────────────────── */}
-        <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
-          <div className="flex items-center gap-4 mb-8 text-brand-accent">
-            <Database size={20} />
-            <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
-              {t('context.glossary.title')}
-            </h3>
-          </div>
-          <p className="text-sm text-brand-dark/40 dark:text-white/40 mb-10 font-medium">{t('context.glossary.desc')}</p>
-          <textarea
-            value={localSettings.glossary}
-            onChange={e => setLocalSettings({ ...localSettings, glossary: e.target.value })}
-            placeholder={"pression statique=static pressure\nrécupérateur de chaleur=heat recovery unit"}
-            className="w-full h-64 p-8 bg-brand-muted dark:bg-white/5 rounded-[32px] border border-black/5 dark:border-white/10 text-sm font-mono focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all outline-none resize-y"
-          />
-          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mt-6 gap-4">
-            <span className="text-[9px] text-brand-dark/20 dark:text-white/20 font-black uppercase tracking-widest">
-              {localSettings.glossary
-                ? `${localSettings.glossary.split('\n').filter(l => l.includes('=')).length} ${t('context.glossary.terms')}`
-                : `0 ${t('context.glossary.terms')}`}
-            </span>
-            <div className="flex gap-4">
-              <button className="px-8 py-3 bg-brand-muted dark:bg-white/5 text-brand-dark/40 dark:text-white/40 rounded-xl text-[9px] font-black uppercase tracking-widest hover:text-brand-dark dark:hover:text-white transition-all">
-                {t('context.clearAll')}
-              </button>
-              <button
-                onClick={handleSave}
-                disabled={isSaving}
-                className="premium-button px-10 py-3 text-[9px] uppercase tracking-widest !rounded-xl flex items-center gap-3 disabled:opacity-50"
-              >
-                {isSaving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
-                {isSaving ? t('context.saving') : t('context.save')}
-              </button>
+        {/* ── Glossary link ────────────────────────────────────── */}
+        <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
+          <div className="flex items-center gap-6">
+            <div className="w-14 h-14 bg-brand-muted dark:bg-white/10 rounded-2xl flex items-center justify-center text-brand-accent shrink-0">
+              <BookOpen size={28} />
+            </div>
+            <div>
+              <h3 className="text-2xl font-black uppercase tracking-tight text-brand-dark dark:text-white">
+                {t('context.glossary.title')}
+              </h3>
+              <p className="text-brand-dark/30 dark:text-white/30 text-[10px] font-black uppercase tracking-widest mt-2 leading-relaxed">
+                {t('context.glossary.desc')}
+              </p>
             </div>
           </div>
+          <Link href="/dashboard/glossaries">
+            <button className="premium-button px-10 py-4 text-[10px] uppercase tracking-widest !rounded-2xl flex items-center gap-3">
+              <BookOpen size={14} />
+              {t('context.glossary.manage')}
+            </button>
+          </Link>
         </section>
       </div>
     </div>

frontend/src/app/dashboard/glossaries/TermEditor.tsx

@@ -1,22 +1,20 @@
 'use client';
 
-import { memo, useCallback, useMemo } from 'react';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import { ArrowRight, Plus, Trash2 } from 'lucide-react';
-import type { GlossaryTermInput, GlossaryTermInputWithId } from './types';
-import { MAX_TERMS_PER_GLOSSARY, generateTermId } from './types';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { Plus, Trash2, ChevronDown, ChevronUp } from 'lucide-react';
+import type { GlossaryTermInput } from './types';
+import { MAX_TERMS_PER_GLOSSARY, SUPPORTED_LANGUAGES } from './types';
 import { useI18n } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
 
 interface TermEditorProps {
   terms: GlossaryTermInput[];
   onChange: (terms: GlossaryTermInput[]) => void;
   disabled?: boolean;
+  sourceLanguage?: string;
 }
 
-// Generate stable IDs for terms based on index and content hash
 function getTermKey(term: GlossaryTermInput, index: number): string {
-  // Create a stable key from content to help React reconciliation
   const contentHash = `${term.source}-${term.target}`.slice(0, 50);
   return `term-${index}-${contentHash}`;
 }
@@ -25,98 +23,210 @@ export const TermEditor = memo(function TermEditor({
   terms,
   onChange,
   disabled = false,
+  sourceLanguage = 'fr',
 }: TermEditorProps) {
   const { t } = useI18n();
-  // Generate stable keys for current terms
+
   const termKeys = useMemo(() => {
     return terms.map((term, index) => getTermKey(term, index));
   }, [terms]);
 
+  const translationLangs = useMemo(() => {
+    return SUPPORTED_LANGUAGES.filter(l => l.code !== sourceLanguage);
+  }, [sourceLanguage]);
+
   const addTerm = useCallback(() => {
     if (terms.length >= MAX_TERMS_PER_GLOSSARY) return;
-    onChange([...terms, { source: '', target: '' }]);
+    onChange([...terms, { source: '', target: '', translations: {} }]);
   }, [terms, onChange]);
 
   const removeTerm = useCallback((index: number) => {
     onChange(terms.filter((_, i) => i !== index));
   }, [terms, onChange]);
 
-  const updateTerm = useCallback((index: number, field: 'source' | 'target', value: string) => {
+  const updateField = useCallback((index: number, field: 'source' | 'target', value: string) => {
     const newTerms = [...terms];
     newTerms[index] = { ...newTerms[index], [field]: value };
     onChange(newTerms);
   }, [terms, onChange]);
 
+  const updateTranslation = useCallback((index: number, langCode: string, value: string) => {
+    const newTerms = [...terms];
+    const term = newTerms[index];
+    const translations = { ...(term.translations || {}) };
+    if (value.trim()) {
+      translations[langCode] = value;
+    } else {
+      delete translations[langCode];
+    }
+    newTerms[index] = { ...term, translations };
+    onChange(newTerms);
+  }, [terms, onChange]);
+
   const maxTermsReached = terms.length >= MAX_TERMS_PER_GLOSSARY;
+  const validTermsCount = terms.filter(t => t.source.trim() && t.target.trim()).length;
+
+  const sourceLabel = SUPPORTED_LANGUAGES.find(l => l.code === sourceLanguage)?.flag ?? '🌐';
 
   return (
-    <div className="space-y-3">
-      <div className="mb-2 grid grid-cols-[1fr_32px_1fr_36px] items-center gap-2 px-1">
-        <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-          {t('glossaries.termEditor.sourceTerm')}
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <span className="text-[9px] font-black uppercase tracking-widest text-brand-dark/30">
+          {validTermsCount} / {terms.length} {t('glossaries.dialog.terms')}
         </span>
-        <span />
-        <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-          {t('glossaries.termEditor.targetTranslation')}
-        </span>
-        <span />
       </div>
 
-      <div className="flex flex-col gap-2">
-        {terms.map((term, index) => (
-          <div
-            key={termKeys[index]}
-            className="group grid grid-cols-[1fr_32px_1fr_36px] items-center gap-2"
-          >
-            <Input
-              value={term.source}
-              onChange={(e) => updateTerm(index, 'source', e.target.value)}
-              placeholder="Source term..."
-              className="font-mono text-xs"
-              aria-label={`Source term ${index + 1}`}
+      {/* Term rows */}
+      <div className="space-y-4">
+        {terms.map((term, index) => {
+          const translations = term.translations || {};
+          const filledCount = Object.keys(translations).filter(k => translations[k]?.trim()).length;
+
+          return (
+            <TermRow
+              key={termKeys[index]}
+              term={term}
+              index={index}
               disabled={disabled}
+              sourceFlag={sourceLabel}
+              sourceLanguage={sourceLanguage}
+              translationLangs={translationLangs}
+              filledTranslations={filledCount}
+              onUpdateField={updateField}
+              onUpdateTranslation={updateTranslation}
+              onRemove={removeTerm}
             />
-            <div className="flex items-center justify-center">
-              <ArrowRight className="size-3.5 text-muted-foreground" />
-            </div>
-            <Input
-              value={term.target}
-              onChange={(e) => updateTerm(index, 'target', e.target.value)}
-              placeholder="Translation..."
-              className="font-mono text-xs"
-              aria-label={`Target translation ${index + 1}`}
-              disabled={disabled}
-            />
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              onClick={() => removeTerm(index)}
-              disabled={disabled}
-              className="opacity-0 group-hover:opacity-100 transition-opacity"
-              aria-label={`Remove term ${index + 1}`}
-            >
-              <Trash2 className="size-3.5 text-muted-foreground hover:text-destructive" />
-            </Button>
-          </div>
-        ))}
+          );
+        })}
       </div>
 
-      <Button
-        variant="outline"
-        size="sm"
+      {/* Add button */}
+      <button
         onClick={addTerm}
         disabled={disabled || maxTermsReached}
-        className="mt-3 gap-1.5 border-dashed"
+        className="w-full py-4 border-2 border-dashed border-black/10 dark:border-white/10 rounded-2xl text-[10px] font-black uppercase tracking-widest text-brand-dark/30 dark:text-white/30 hover:text-brand-dark dark:hover:text-white hover:border-brand-accent/30 transition-all disabled:opacity-40 flex items-center justify-center gap-2"
       >
-        <Plus className="size-3.5" />
+        <Plus size={14} />
         {t('glossaries.termEditor.addTerm')}
-      </Button>
+      </button>
 
       {maxTermsReached && (
-        <p className="text-xs text-amber-600">
+        <p className="text-[9px] font-black uppercase tracking-widest text-amber-600">
           {t('glossaries.termEditor.maxReached', { max: String(MAX_TERMS_PER_GLOSSARY) })}
         </p>
       )}
     </div>
   );
 });
+
+/* ── Individual Term Row with expandable translations ── */
+
+interface TermRowProps {
+  term: GlossaryTermInput;
+  index: number;
+  disabled: boolean;
+  sourceFlag: string;
+  sourceLanguage: string;
+  translationLangs: { code: string; label: string; flag: string }[];
+  filledTranslations: number;
+  onUpdateField: (index: number, field: 'source' | 'target', value: string) => void;
+  onUpdateTranslation: (index: number, langCode: string, value: string) => void;
+  onRemove: (index: number) => void;
+}
+
+const TermRow = memo(function TermRow({
+  term,
+  index,
+  disabled,
+  sourceFlag,
+  sourceLanguage,
+  translationLangs,
+  filledTranslations,
+  onUpdateField,
+  onUpdateTranslation,
+  onRemove,
+}: TermRowProps) {
+  const [expanded, setExpanded] = useState(false);
+  const translations = term.translations || {};
+
+  // Auto-expand if there are existing translations
+  const hasExisting = Object.keys(translations).some(k => translations[k]?.trim());
+
+  return (
+    <div className="rounded-2xl border border-black/5 dark:border-white/10 bg-white dark:bg-white/5 overflow-hidden">
+      {/* Main row: source + default target */}
+      <div className="grid grid-cols-[1fr_24px_1fr_32px] items-center gap-2 p-4">
+        <input
+          value={term.source}
+          onChange={(e) => onUpdateField(index, 'source', e.target.value)}
+          placeholder={`${sourceFlag} Source...`}
+          className="font-mono text-xs bg-transparent outline-none w-full placeholder:text-brand-dark/20 dark:placeholder:text-white/20"
+          disabled={disabled}
+          aria-label={`Source term ${index + 1}`}
+        />
+        <span className="text-brand-dark/20 dark:text-white/20 text-center">→</span>
+        <input
+          value={term.target}
+          onChange={(e) => onUpdateField(index, 'target', e.target.value)}
+          placeholder="Translation..."
+          className="font-mono text-xs bg-transparent outline-none w-full placeholder:text-brand-dark/20 dark:placeholder:text-white/20"
+          disabled={disabled}
+          aria-label={`Target translation ${index + 1}`}
+        />
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => setExpanded(!expanded)}
+            className={cn(
+              "p-1 rounded-lg transition-all",
+              expanded ? "bg-brand-accent/10 text-brand-accent" : "text-brand-dark/20 hover:text-brand-accent",
+              hasExisting && !expanded && "text-brand-accent/60"
+            )}
+            title="Translations"
+          >
+            {expanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+          </button>
+          <button
+            onClick={() => onRemove(index)}
+            disabled={disabled}
+            className="p-1 rounded-lg text-brand-dark/20 hover:text-red-500 transition-all opacity-0 group-hover:opacity-100"
+            aria-label={`Remove term ${index + 1}`}
+          >
+            <Trash2 size={14} />
+          </button>
+        </div>
+      </div>
+
+      {/* Expanded: multilingual translations grid */}
+      {expanded && (
+        <div className="px-4 pb-4 pt-2 border-t border-black/5 dark:border-white/5">
+          <p className="text-[8px] font-black uppercase tracking-widest text-brand-dark/20 dark:text-white/20 mb-3">
+            Translations ({filledTranslations}/{translationLangs.length})
+          </p>
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
+            {translationLangs.map((lang) => (
+              <div
+                key={lang.code}
+                className={cn(
+                  "flex items-center gap-2 rounded-xl border px-3 py-2 transition-all",
+                  translations[lang.code]?.trim()
+                    ? "border-brand-accent/20 bg-brand-accent/5"
+                    : "border-black/5 dark:border-white/10 bg-brand-muted/30 dark:bg-white/5"
+                )}
+              >
+                <span className="text-sm shrink-0">{lang.flag}</span>
+                <input
+                  value={translations[lang.code] || ''}
+                  onChange={(e) => onUpdateTranslation(index, lang.code, e.target.value)}
+                  placeholder={lang.code.toUpperCase()}
+                  className="font-mono text-[11px] bg-transparent outline-none w-full min-w-0 placeholder:text-brand-dark/15 dark:placeholder:text-white/15"
+                  disabled={disabled}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});

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> = {};