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: '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 },
+  { 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 },
+  { 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 },
+  { 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 },
+  { 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 },
+  { key: 'finance', title: 'Finance / Comptabilité', desc: 'IFRS, bilans, fiscalité', icon: BarChart3, templateId: 'finance' },
-  { key: 'marketing', title: 'Marketing / Publicité', desc: 'Digital, branding, analytics', icon: Megaphone },
+  { key: 'marketing', title: 'Marketing / Publicité', desc: 'Digital, branding, analytics', icon: Megaphone, templateId: 'marketing' },
-  { key: 'automotive', title: 'Automobile', desc: 'Motorisation, ADAS, homologation', icon: Car },
+  { 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({
+  const [systemPrompt, setSystemPrompt] = useState(settings.systemPrompt);
-    systemPrompt: settings.systemPrompt,
-    glossary: settings.glossary,
-  });
 
   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) => {
+  const handleClear = () => {
-    applyPreset(key);
+    updateSettings({ systemPrompt: '' });
-    setTimeout(() => {
+    setSystemPrompt('');
-      setLocalSettings({
-        systemPrompt: useTranslationStore.getState().settings.systemPrompt,
-        glossary: useTranslationStore.getState().settings.glossary,
-      });
-    }, 0);
   };
 
-  const handleClear = () => {
+  const handleCreatePresetGlossary = async (preset: typeof PRESETS[0]) => {
-    clearContext();
+    setCreatingPreset(preset.key);
-    setLocalSettings({ systemPrompt: '', glossary: '' });
+    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)}
+                  onClick={() => handleCreatePresetGlossary(p)}
-                  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={!!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}
+            value={systemPrompt}
-            onChange={e => setLocalSettings({ ...localSettings, systemPrompt: e.target.value })}
+            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 ────────────────────────────────── */}
+        {/* ── Glossary link ────────────────────────────────────── */}
-        <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
+        <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-4 mb-8 text-brand-accent">
+          <div className="flex items-center gap-6">
-            <Database size={20} />
+            <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">
-            <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
+              <BookOpen size={28} />
-              {t('context.glossary.title')}
+            </div>
-            </h3>
+            <div>
-          </div>
+              <h3 className="text-2xl font-black uppercase tracking-tight text-brand-dark dark:text-white">
-          <p className="text-sm text-brand-dark/40 dark:text-white/40 mb-10 font-medium">{t('context.glossary.desc')}</p>
+                {t('context.glossary.title')}
-          <textarea
+              </h3>
-            value={localSettings.glossary}
+              <p className="text-brand-dark/30 dark:text-white/30 text-[10px] font-black uppercase tracking-widest mt-2 leading-relaxed">
-            onChange={e => setLocalSettings({ ...localSettings, glossary: e.target.value })}
+                {t('context.glossary.desc')}
-            placeholder={"pression statique=static pressure\nrécupérateur de chaleur=heat recovery unit"}
+              </p>
-            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>
             </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 { memo, useCallback, useMemo, useState } from 'react';
-import { Input } from '@/components/ui/input';
+import { Plus, Trash2, ChevronDown, ChevronUp } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import type { GlossaryTermInput } from './types';
-import { ArrowRight, Plus, Trash2 } from 'lucide-react';
+import { MAX_TERMS_PER_GLOSSARY, SUPPORTED_LANGUAGES } from './types';
-import type { GlossaryTermInput, GlossaryTermInputWithId } from './types';
-import { MAX_TERMS_PER_GLOSSARY, generateTermId } 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="space-y-4">
-      <div className="mb-2 grid grid-cols-[1fr_32px_1fr_36px] items-center gap-2 px-1">
+      {/* Header */}
-        <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+      <div className="flex items-center justify-between">
-          {t('glossaries.termEditor.sourceTerm')}
+        <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">
+      {/* Term rows */}
-        {terms.map((term, index) => (
+      <div className="space-y-4">
-          <div
+        {terms.map((term, index) => {
-            key={termKeys[index]}
+          const translations = term.translations || {};
-            className="group grid grid-cols-[1fr_32px_1fr_36px] items-center gap-2"
+          const filledCount = Object.keys(translations).filter(k => translations[k]?.trim()).length;
-          >
+
-            <Input
+          return (
-              value={term.source}
+            <TermRow
-              onChange={(e) => updateTerm(index, 'source', e.target.value)}
+              key={termKeys[index]}
-              placeholder="Source term..."
+              term={term}
-              className="font-mono text-xs"
+              index={index}
-              aria-label={`Source term ${index + 1}`}
               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
+      {/* Add button */}
-        variant="outline"
+      <button
-        size="sm"
         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> = {};

frontend/src/lib/i18n.tsx

@@ -694,6 +694,17 @@ const messages: Record<Locale, Record<string, string>> = {
     "context.clearAll": "Clear all",
     "context.saving": "Saving...",
     "context.save": "Save",
+    "translate.glossary.title": "Glossary",
+    "translate.glossary.select": "Select a glossary",
+    "translate.glossary.none": "None",
+    "translate.glossary.terms": "terms",
+    "context.presets.createGlossary": "Create glossary",
+    "context.presets.created": "Glossary created",
+    "context.presets.createdDesc": "The glossary \"{name}\" has been created with {count} terms.",
+    "context.presets.hint": "Click a preset to create a glossary with domain-specific terms. Manage your glossaries in the Glossaries section.",
+    "context.glossary.manage": "Manage glossaries",
+    "context.saved": "Saved",
+    "context.savedDesc": "Your context instructions have been saved.",
 
     // ── Admin ──
     "admin.login.title": "Administration",
@@ -1447,6 +1458,17 @@ const messages: Record<Locale, Record<string, string>> = {
     "context.clearAll": "Tout effacer",
     "context.saving": "Enregistrement...",
     "context.save": "Enregistrer",
+    "translate.glossary.title": "Glossaire",
+    "translate.glossary.select": "Sélectionner un glossaire",
+    "translate.glossary.none": "Aucun",
+    "translate.glossary.terms": "termes",
+    "context.presets.createGlossary": "Créer le glossaire",
+    "context.presets.created": "Glossaire créé",
+    "context.presets.createdDesc": "Le glossaire \"{name}\" a été créé avec {count} termes.",
+    "context.presets.hint": "Cliquez sur un preset pour créer un glossaire avec des termes spécifiques au domaine. Gérez vos glossaires dans la section Glossaires.",
+    "context.glossary.manage": "Gérer les glossaires",
+    "context.saved": "Enregistré",
+    "context.savedDesc": "Vos instructions de contexte ont été enregistrées.",
 
     // ── Admin ──
     "admin.login.title": "Administration",
@@ -2146,6 +2168,17 @@ const messages: Record<Locale, Record<string, string>> = {
     "context.clearAll": "Borrar todo",
     "context.saving": "Guardando...",
     "context.save": "Guardar",
+    "translate.glossary.title": "Glosario",
+    "translate.glossary.select": "Seleccionar glosario",
+    "translate.glossary.none": "Ninguno",
+    "translate.glossary.terms": "términos",
+    "context.presets.createGlossary": "Crear glosario",
+    "context.presets.created": "Glosario creado",
+    "context.presets.createdDesc": "El glosario \"{name}\" ha sido creado con {count} términos.",
+    "context.presets.hint": "Haz clic en un preset para crear un glosario con términos específicos del dominio. Gestiona tus glosarios en la sección de Glosarios.",
+    "context.glossary.manage": "Gestionar glosarios",
+    "context.saved": "Guardado",
+    "context.savedDesc": "Tus instrucciones de contexto se han guardado.",
     "admin.login.title": "Administración",
     "admin.login.required": "Inicio de sesión requerido",
     "admin.login.password": "Contraseña de administrador",
@@ -2843,6 +2876,17 @@ const messages: Record<Locale, Record<string, string>> = {
     "context.clearAll": "Alles löschen",
     "context.saving": "Wird gespeichert...",
     "context.save": "Speichern",
+    "translate.glossary.title": "Glossar",
+    "translate.glossary.select": "Glossar auswählen",
+    "translate.glossary.none": "Keins",
+    "translate.glossary.terms": "Begriffe",
+    "context.presets.createGlossary": "Glossar erstellen",
+    "context.presets.created": "Glossar erstellt",
+    "context.presets.createdDesc": "Das Glossar \"{name}\" wurde mit {count} Begriffen erstellt.",
+    "context.presets.hint": "Klicken Sie auf ein Preset, um ein Glossar mit domänenspezifischen Begriffen zu erstellen. Verwalten Sie Ihre Glossare im Glossar-Bereich.",
+    "context.glossary.manage": "Glossare verwalten",
+    "context.saved": "Gespeichert",
+    "context.savedDesc": "Ihre Kontextanweisungen wurden gespeichert.",
     "admin.login.title": "Administration",
     "admin.login.required": "Anmeldung erforderlich",
     "admin.login.password": "Admin-Passwort",
@@ -3540,6 +3584,17 @@ const messages: Record<Locale, Record<string, string>> = {
     "context.clearAll": "Limpar tudo",
     "context.saving": "Salvando...",
     "context.save": "Salvar",
+    "translate.glossary.title": "Glossário",
+    "translate.glossary.select": "Selecionar glossário",
+    "translate.glossary.none": "Nenhum",
+    "translate.glossary.terms": "termos",
+    "context.presets.createGlossary": "Criar glossário",
+    "context.presets.created": "Glossário criado",
+    "context.presets.createdDesc": "O glossário \"{name}\" foi criado com {count} termos.",
+    "context.presets.hint": "Clique em um preset para criar um glossário com termos específicos do domínio. Gerencie seus glossários na seção Glossários.",
+    "context.glossary.manage": "Gerenciar glossários",
+    "context.saved": "Salvo",
+    "context.savedDesc": "Suas instruções de contexto foram salvas.",
     "admin.login.title": "Administração",
     "admin.login.required": "Login necessário",
     "admin.login.password": "Senha de administrador",
@@ -4237,6 +4292,17 @@ const messages: Record<Locale, Record<string, string>> = {
     "context.clearAll": "Cancella tutto",
     "context.saving": "Salvataggio...",
     "context.save": "Salva",
+    "translate.glossary.title": "Glossario",
+    "translate.glossary.select": "Seleziona glossario",
+    "translate.glossary.none": "Nessuno",
+    "translate.glossary.terms": "termini",
+    "context.presets.createGlossary": "Crea glossario",
+    "context.presets.created": "Glossario creato",
+    "context.presets.createdDesc": "Il glossario \"{name}\" è stato creato con {count} termini.",
+    "context.presets.hint": "Fai clic su un preset per creare un glossario con termini specifici del dominio. Gestisci i tuoi glossari nella sezione Glossari.",
+    "context.glossary.manage": "Gestisci glossari",
+    "context.saved": "Salvato",
+    "context.savedDesc": "Le tue istruzioni di contesto sono state salvate.",
     "admin.login.title": "Amministrazione",
     "admin.login.required": "Accesso richiesto",
     "admin.login.password": "Password amministratore",
@@ -4934,6 +5000,17 @@ const messages: Record<Locale, Record<string, string>> = {
     "context.clearAll": "Alles wissen",
     "context.saving": "Opslaan...",
     "context.save": "Opslaan",
+    "translate.glossary.title": "Woordenlijst",
+    "translate.glossary.select": "Woordenlijst selecteren",
+    "translate.glossary.none": "Geen",
+    "translate.glossary.terms": "termen",
+    "context.presets.createGlossary": "Woordenlijst maken",
+    "context.presets.created": "Woordenlijst gemaakt",
+    "context.presets.createdDesc": "De woordenlijst \"{name}\" is gemaakt met {count} termen.",
+    "context.presets.hint": "Klik op een preset om een woordenlijst met domeinspecifieke termen te maken. Beheer je woordenlijsten in het Woordenlijsten-gedeelte.",
+    "context.glossary.manage": "Woordenlijsten beheren",
+    "context.saved": "Opgeslagen",
+    "context.savedDesc": "Je contextinstructies zijn opgeslagen.",
     "admin.login.title": "Beheer",
     "admin.login.required": "Inloggen vereist",
     "admin.login.password": "Admin-wachtwoord",
@@ -5633,6 +5710,17 @@ const messages: Record<Locale, Record<string, string>> = {
     "context.clearAll": "Очистить всё",
     "context.saving": "Сохранение...",
     "context.save": "Сохранить",
+    "translate.glossary.title": "Глоссарий",
+    "translate.glossary.select": "Выбрать глоссарий",
+    "translate.glossary.none": "Нет",
+    "translate.glossary.terms": "терминов",
+    "context.presets.createGlossary": "Создать глоссарий",
+    "context.presets.created": "Глоссарий создан",
+    "context.presets.createdDesc": "Глоссарий \"{name}\" создан с {count} терминами.",
+    "context.presets.hint": "Нажмите на пресет, чтобы создать глоссарий с предметными терминами. Управляйте глоссариями в разделе Глоссарии.",
+    "context.glossary.manage": "Управлять глоссариями",
+    "context.saved": "Сохранено",
+    "context.savedDesc": "Ваши контекстные инструкции сохранены.",
     "admin.login.title": "Администрирование",
     "admin.login.required": "Требуется вход",
     "admin.login.password": "Пароль администратора",
@@ -6329,6 +6417,17 @@ const messages: Record<Locale, Record<string, string>> = {
     "context.clearAll": "すべてクリア",
     "context.saving": "保存中...",
     "context.save": "保存",
+    "translate.glossary.title": "用語集",
+    "translate.glossary.select": "用語集を選択",
+    "translate.glossary.none": "なし",
+    "translate.glossary.terms": "件",
+    "context.presets.createGlossary": "用語集を作成",
+    "context.presets.created": "用語集を作成しました",
+    "context.presets.createdDesc": "用語集「{name}」を{count}件の用語で作成しました。",
+    "context.presets.hint": "プリセットをクリックして、専門用語の用語集を作成します。用語集セクションで管理できます。",
+    "context.glossary.manage": "用語集を管理",
+    "context.saved": "保存しました",
+    "context.savedDesc": "コンテキスト指示を保存しました。",
     "admin.login.title": "管理画面",
     "admin.login.required": "ログインが必要です",
     "admin.login.password": "管理者パスワード",
@@ -7025,6 +7124,17 @@ const messages: Record<Locale, Record<string, string>> = {
     "context.clearAll": "모두 지우기",
     "context.saving": "저장 중...",
     "context.save": "저장",
+    "translate.glossary.title": "용어집",
+    "translate.glossary.select": "용어집 선택",
+    "translate.glossary.none": "없음",
+    "translate.glossary.terms": "개",
+    "context.presets.createGlossary": "용어집 만들기",
+    "context.presets.created": "용어집 생성됨",
+    "context.presets.createdDesc": "용어집 \"{name}\"이(가) {count}개의 용어로 생성되었습니다.",
+    "context.presets.hint": "프리셋을 클릭하여 도메인별 용어가 포함된 용어집을 만드세요. 용어집 섹션에서 관리할 수 있습니다.",
+    "context.glossary.manage": "용어집 관리",
+    "context.saved": "저장됨",
+    "context.savedDesc": "컨텍스트 지침이 저장되었습니다.",
     "admin.login.title": "관리",
     "admin.login.required": "로그인 필요",
     "admin.login.password": "관리자 비밀번호",
@@ -7679,6 +7789,17 @@ const messages: Record<Locale, Record<string, string>> = {
     "context.clearAll": "全部清除",
     "context.saving": "保存中...",
     "context.save": "保存",
+    "translate.glossary.title": "术语表",
+    "translate.glossary.select": "选择术语表",
+    "translate.glossary.none": "无",
+    "translate.glossary.terms": "个术语",
+    "context.presets.createGlossary": "创建术语表",
+    "context.presets.created": "术语表已创建",
+    "context.presets.createdDesc": "术语表 \"{name}\" 已创建，包含 {count} 个术语。",
+    "context.presets.hint": "点击预设以创建包含领域特定术语的术语表。在术语表部分管理您的术语表。",
+    "context.glossary.manage": "管理术语表",
+    "context.saved": "已保存",
+    "context.savedDesc": "您的上下文说明已保存。",
     "admin.login.title": "管理后台",
     "admin.login.required": "需要登录",
     "admin.login.password": "管理员密码",
@@ -8333,6 +8454,17 @@ const messages: Record<Locale, Record<string, string>> = {
     "context.clearAll": "مسح الكل",
     "context.saving": "جارٍ الحفظ...",
     "context.save": "حفظ",
+    "translate.glossary.title": "المسرد",
+    "translate.glossary.select": "اختر مسرداً",
+    "translate.glossary.none": "بدون",
+    "translate.glossary.terms": "مصطلحات",
+    "context.presets.createGlossary": "إنشاء مسرد",
+    "context.presets.created": "تم إنشاء المسرد",
+    "context.presets.createdDesc": "تم إنشاء المسرد \"{name}\" بـ {count} مصطلحات.",
+    "context.presets.hint": "انقر على إعداد مسبق لإنشاء مسرد بمصطلحات خاصة بالمجال. أد穹 مصادرك في قسم المسرات.",
+    "context.glossary.manage": "إدارة المسرات",
+    "context.saved": "تم الحفظ",
+    "context.savedDesc": "تم حفظ تعليمات السياق الخاصة بك.",
     "admin.login.title": "الإدارة",
     "admin.login.required": "تسجيل الدخول مطلوب",
     "admin.login.password": "كلمة مرور المسؤول",
@@ -9023,6 +9155,17 @@ const messages: Record<Locale, Record<string, string>> = {
     "context.clearAll": "پاک کردن همه",
     "context.saving": "در حال ذخیره...",
     "context.save": "ذخیره",
+    "translate.glossary.title": "واژه‌نامه",
+    "translate.glossary.select": "انتخاب واژه‌نامه",
+    "translate.glossary.none": "هیچکدام",
+    "translate.glossary.terms": "واژه",
+    "context.presets.createGlossary": "ایجاد واژه‌نامه",
+    "context.presets.created": "واژه‌نامه ایجاد شد",
+    "context.presets.createdDesc": "واژه‌نامه \"{name}\" با {count} واژه ایجاد شد.",
+    "context.presets.hint": "روی یک پیش‌تنظیم کلیک کنید تا واژه‌نامه‌ای با اصطلاحات تخصصی ایجاد شود. واژه‌نامه‌های خود را در بخش واژه‌نامه‌ها مدیریت کنید.",
+    "context.glossary.manage": "مدیریت واژه‌نامه‌ها",
+    "context.saved": "ذخیره شد",
+    "context.savedDesc": "دستورالعمل‌های زمینه شما ذخیره شد.",
     "admin.login.title": "مدیریت",
     "admin.login.required": "ورود لازم است",
     "admin.login.password": "رمز عبور مدیر",