feat(translate): multi-file queue with dedicated runner tests + context polish

Batch upload: dropzone and inputs accept multiple files (cap 10/run,
validated + deduped); 2+ files switch the submit to a queue screen —
sequential jobs with per-file progress, failure messages through the
humanizer, per-file download/review links, staggered download-all,
real server-side stop (cancel API) plus between-files abort. The
one-file flow is untouched: files.length === 1 takes the exact
existing path.

Runner: standalone runTranslationJob (submit + poll + abort + cancel)
with injectable poll interval; 5 dedicated vitest cases covering
completed-with-progress, backend failure, submit HTTP error, mid-flight
abort with server cancel, and network-failure cutoff.

Context page close review: /dashboard/context is a clean redirect to
glossaries (no duplicate); the fake 300ms save delay removed (instant
zustand persist); suggestion chips now resolve their prompt bodies
through i18n (EN+FR — no more French prompts for English users); the
translate config column shows a 'Context guidelines active' chip that
links to the editor when a Pro LLM prompt is set.

Dead code: legacy file-uploader.tsx (+webllm.ts, its only consumer)
and the unused PRESETS/applyPreset/clearContext store block removed
(-14KB of glossary strings).

Verified: build exit 0, vitest 14/14 (9 prior + 5 runner), eslint 62
errors (vs 64 at HEAD), 0 missing i18n keys.

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

@@ -12,12 +12,15 @@ import {
 } from 'lucide-react';
 import { useFileUpload } from './useFileUpload';
 import { useTranslationConfig } from './useTranslationConfig';
-import { useTranslationSubmit, getRecentJobs, fetchServerHistory, type RecentJob } from './useTranslationSubmit';
+import { useTranslationSubmit, getRecentJobs, fetchServerHistory, pushRecentJob, type RecentJob } from './useTranslationSubmit';
+import { runTranslationJob } from './translationRunner';
+import type { BatchItem } from './types';
 import LanguageSelector from './LanguageSelector';
 import { ProviderSelector } from './ProviderSelector';
 import { GlossarySelector } from './GlossarySelector';
 import { Switch } from '@/components/ui/switch';
 import { useNotification } from '@/components/ui/notification';
+import { useTranslationStore } from '@/lib/store';
 import { useI18n } from '@/lib/i18n';
 import { API_BASE } from '@/lib/config';
 import { cn } from '@/lib/utils';
@@ -66,14 +69,18 @@ function SplitTitle({ base, accent }: { base: string; accent: string }) {
 /* ── Page ────────────────────────────────────────────────────────── */
 export default function TranslatePage() {
   const upload = useFileUpload();
-  const config = useTranslationConfig(!!upload.file);
+  const config = useTranslationConfig(upload.files.length > 0);
   const submit = useTranslationSubmit();
   const { error: showError } = useNotification();
   const { t } = useI18n();
+  const systemPrompt = useTranslationStore((s) => s.settings.systemPrompt);
   const lastErrorRef = useRef<string | null>(null);
   const replaceInputRef = useRef<HTMLInputElement>(null);
   const dropzoneInputRef = useRef<HTMLInputElement>(null);
   const [pdfMode, setPdfMode] = useState<'layout' | 'text_only'>('layout');
+  const [batch, setBatch] = useState<{ items: BatchItem[]; running: boolean } | null>(null);
+  const batchAbortRef = useRef(false);
+  const batchJobRef = useRef<string | null>(null);
   const [elapsed, setElapsed] = useState(0);
   const [recentJobs, setRecentJobs] = useState<RecentJob[]>([]);
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -133,10 +140,83 @@ export default function TranslatePage() {
   }, [submit.status]);
 
   const handleTranslate = async () => {
-    if (!upload.file || !config.isConfigValid) return;
+    if (upload.files.length === 0 || !config.isConfigValid) return;
     const cfg = config.getConfig();
     if (isPdf) cfg.pdfMode = pdfMode;
-    await submit.submitTranslation(upload.file, cfg);
+    if (upload.files.length === 1) {
+      await submit.submitTranslation(upload.files[0], cfg);
+    } else {
+      await handleBatch(cfg);
+    }
+  };
+
+  const updateBatchItem = (index: number, patch: Partial<BatchItem>) => {
+    setBatch((b) => (b ? { ...b, items: b.items.map((it, i) => (i === index ? { ...it, ...patch } : it)) } : b));
+  };
+
+  const handleBatch = async (cfg: ReturnType<typeof config.getConfig>) => {
+    const files = upload.files;
+    batchAbortRef.current = false;
+    setBatch({
+      running: true,
+      items: files.map((f) => ({ name: f.name, size: f.size, status: 'pending', progress: 0 })),
+    });
+    for (let i = 0; i < files.length; i++) {
+      if (batchAbortRef.current) {
+        updateBatchItem(i, { status: 'aborted' });
+        continue;
+      }
+      updateBatchItem(i, { status: 'processing', progress: 0 });
+      const result = await runTranslationJob(files[i], cfg, {
+        onJobId: (jobId) => { batchJobRef.current = jobId; },
+        onProgress: ({ progress }) => updateBatchItem(i, { progress }),
+        shouldAbort: () => batchAbortRef.current,
+      });
+      batchJobRef.current = null;
+      if (result.status === 'completed') {
+        updateBatchItem(i, { status: 'completed', jobId: result.jobId ?? undefined, progress: 100 });
+        pushRecentJob({ jobId: result.jobId ?? '', fileName: result.fileName, completedAt: Date.now() });
+      } else if (result.status === 'aborted') {
+        updateBatchItem(i, { status: 'aborted' });
+      } else {
+        updateBatchItem(i, { status: 'failed', error: result.error });
+      }
+      // small breather between jobs so the backend never sees a burst
+      if (i < files.length - 1) await new Promise((r) => setTimeout(r, 600));
+    }
+    setBatch((b) => (b ? { ...b, running: false } : b));
+    setRecentJobs(getRecentJobs());
+  };
+
+  const handleBatchAbort = () => {
+    batchAbortRef.current = true;
+    const jobId = batchJobRef.current;
+    if (jobId) {
+      const token = localStorage.getItem('token');
+      const headers: Record<string, string> = {};
+      if (token) headers['Authorization'] = `Bearer ${token}`;
+      fetch(`${API_BASE}/api/v1/translations/${jobId}/cancel`, { method: 'POST', headers }).catch(() => {});
+    }
+  };
+
+  const handleBatchClose = () => {
+    setBatch(null);
+    upload.removeFile();
+    setElapsed(0);
+    setRecentJobs(getRecentJobs());
+  };
+
+  const handleDownloadAll = () => {
+    const items = batch?.items ?? [];
+    let delay = 0;
+    for (const item of items) {
+      if (item.status === 'completed' && item.jobId) {
+        // stagger downloads so browsers don't block them as popups
+        const jobId = item.jobId;
+        setTimeout(() => { handleDownload(jobId); }, delay);
+        delay += 400;
+      }
+    }
   };
 
   const handleRetry = async () => {
@@ -157,7 +237,7 @@ export default function TranslatePage() {
     }
   };
 
-  const handleNewTranslation = () => { submit.reset(); upload.removeFile(); setElapsed(0); setRecentJobs(getRecentJobs()); };
+  const handleNewTranslation = () => { batchAbortRef.current = true; setBatch(null); submit.reset(); upload.removeFile(); setElapsed(0); setRecentJobs(getRecentJobs()); };
   const handleDownload = async (jobId: string = submit.jobId ?? '') => {
     if (!jobId) return;
     const token = localStorage.getItem('token');
@@ -191,7 +271,7 @@ export default function TranslatePage() {
   };
 
   /* ── Derived states ──────────────────────────────────────────── */
-  const isConfiguring = !!upload.file && submit.status === 'idle' && !submit.isSubmitting;
+  const isConfiguring = upload.files.length > 0 && submit.status === 'idle' && !submit.isSubmitting && batch === null;
   const isProcessing = (submit.status === 'processing' || submit.isSubmitting) && submit.status !== 'completed';
   const isCompleted = submit.status === 'completed';
   const isFailed = submit.status === 'failed';
@@ -209,7 +289,8 @@ export default function TranslatePage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [upload.file, config.isConfigValid, submit.isSubmitting, isProcessing]);
 
-  const showUpload = !upload.file && !isProcessing && !isCompleted && !isFailed;
+  const showBatch = batch !== null;
+  const showUpload = !upload.file && !isProcessing && !isCompleted && !isFailed && !showBatch;
   const showConfiguring = isConfiguring;
   const showProcessing = isProcessing;
   const showComplete = isCompleted && !!submit.jobId;
@@ -325,6 +406,7 @@ export default function TranslatePage() {
                   ref={dropzoneInputRef}
                   type="file"
                   accept=".xlsx,.docx,.pptx,.pdf"
+                  multiple
                   className="hidden"
                   onChange={upload.handleFileSelect}
                   aria-hidden="true"
@@ -333,6 +415,112 @@ export default function TranslatePage() {
               </div>
             )}
 
+            {/* ── BATCH QUEUE: sequential multi-file translations ── */}
+            {showBatch && batch && (
+              <div className="editorial-card p-8 bg-white shadow-editorial dark:bg-[#141414] space-y-6">
+                <div className="flex items-center justify-between gap-4 border-b border-black/5 pb-4 dark:border-white/5">
+                  <div>
+                    <h3 className="text-xl font-serif font-medium tracking-tight text-brand-dark dark:text-white">
+                      {batch.running
+                        ? t('translate.batch.runningTitle')
+                        : t('translate.batch.doneTitle', {
+                            done: batch.items.filter((i) => i.status === 'completed').length,
+                            total: batch.items.length,
+                          })}
+                    </h3>
+                    <p className="mt-1 text-[11px] font-semibold uppercase tracking-wider text-brand-dark/50 dark:text-white/50">
+                      {srcLangName} → {tgtLangName}
+                    </p>
+                  </div>
+                  {batch.running ? (
+                    <button
+                      onClick={handleBatchAbort}
+                      className="shrink-0 rounded-xl border border-red-200 px-4 py-2 text-[10px] font-bold uppercase tracking-wider text-red-500 transition-colors hover:bg-red-50 dark:border-red-900/40 dark:hover:bg-red-950/30"
+                    >
+                      {t('translate.batch.stop')}
+                    </button>
+                  ) : (
+                    <div className="flex shrink-0 gap-2">
+                      <button
+                        onClick={handleDownloadAll}
+                        disabled={!batch.items.some((i) => i.status === 'completed' && i.jobId)}
+                        className="rounded-xl border border-brand-accent/30 px-4 py-2 text-[10px] font-bold uppercase tracking-wider text-brand-accent transition-colors hover:bg-brand-accent/10 disabled:opacity-40"
+                      >
+                        <Download size={11} className="mr-1 inline" /> {t('translate.batch.downloadAll')}
+                      </button>
+                      <button
+                        onClick={handleBatchClose}
+                        className="rounded-xl bg-brand-dark px-4 py-2 text-[10px] font-bold uppercase tracking-wider text-white transition-colors hover:bg-brand-accent dark:bg-brand-accent dark:text-brand-dark"
+                      >
+                        {t('translate.batch.newSession')}
+                      </button>
+                    </div>
+                  )}
+                </div>
+
+                <ul className="space-y-2">
+                  {batch.items.map((item, i) => (
+                    <li
+                      key={`${item.name}-${i}`}
+                      className="flex items-center gap-3 rounded-2xl border border-black/5 bg-brand-muted/30 px-4 py-3 dark:border-white/5 dark:bg-white/5"
+                    >
+                      {item.status === 'processing' ? (
+                        <Loader2 className="size-4 shrink-0 animate-spin text-brand-accent" />
+                      ) : item.status === 'completed' ? (
+                        <CheckCircle2 className="size-4 shrink-0 text-emerald-500" />
+                      ) : item.status === 'failed' ? (
+                        <AlertTriangle className="size-4 shrink-0 text-red-500" />
+                      ) : item.status === 'aborted' ? (
+                        <X className="size-4 shrink-0 text-brand-dark/40 dark:text-white/40" />
+                      ) : (
+                        <span className="size-4 shrink-0 rounded-full border-2 border-brand-dark/20 dark:border-white/20" />
+                      )}
+                      <div className="flex min-w-0 flex-1 flex-col">
+                        <span className="truncate text-xs font-bold text-brand-dark dark:text-white">{item.name}</span>
+                        {item.status === 'processing' && (
+                          <span className="mt-1 h-1 w-full overflow-hidden rounded-full bg-brand-dark/10 dark:bg-white/10">
+                            <span
+                              className="block h-full rounded-full bg-brand-accent transition-all"
+                              style={{ width: `${item.progress}%` }}
+                            />
+                          </span>
+                        )}
+                        {item.status === 'failed' && item.error && (
+                          <span className="truncate text-[10px] text-red-500">{humanFriendlyError(item.error)}</span>
+                        )}
+                      </div>
+                      {item.status === 'completed' && item.jobId ? (
+                        <span className="flex shrink-0 items-center gap-1.5">
+                          <button
+                            type="button"
+                            onClick={() => handleDownload(item.jobId!)}
+                            aria-label={`${t('translate.download')} — ${item.name}`}
+                            className="rounded-lg border border-black/10 px-2.5 py-1.5 text-[10px] font-bold uppercase tracking-wider text-brand-dark/60 dark:border-white/10 dark:text-white/60"
+                          >
+                            <Download size={11} />
+                          </button>
+                          <Link
+                            href={`/dashboard/reviews/${item.jobId}`}
+                            className="rounded-lg border border-brand-accent/25 px-2.5 py-1.5 text-[10px] font-bold uppercase tracking-wider text-brand-accent"
+                          >
+                            {t('translate.recent.review')}
+                          </Link>
+                        </span>
+                      ) : (
+                        <span className="w-10 shrink-0 text-right text-[10px] font-bold uppercase tracking-wider text-brand-dark/50 dark:text-white/50">
+                          {item.status === 'processing'
+                            ? `${Math.round(item.progress)}%`
+                            : item.status === 'completed'
+                              ? '100%'
+                              : ''}
+                        </span>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
             {/* ── RECENT JOBS: client-side history with review access ── */}
             {showUpload && recentJobs.length > 0 && (
               <div className="editorial-card p-6 bg-white dark:bg-[#141414] border-none shadow-editorial">
@@ -374,8 +562,33 @@ export default function TranslatePage() {
                   {t('landing.translate.sourceDocument') || 'Document Source'}
                 </h4>
                 <FileStrip file={upload.file!} onRemove={upload.removeFile} onReplace={() => replaceInputRef.current?.click()} t={t} />
-                <input ref={replaceInputRef} type="file" accept=".xlsx,.docx,.pptx,.pdf" className="hidden" onChange={upload.handleFileSelect} />
+                <input ref={replaceInputRef} type="file" accept=".xlsx,.docx,.pptx,.pdf" multiple className="hidden" onChange={upload.handleFileSelect} />
                 {upload.error && <p className="mt-2 text-xs text-destructive">{t(upload.error)}</p>}
+                {upload.files.length > 1 && (
+                  <ul className="space-y-2">
+                    {upload.files.map((f, i) => (
+                      <li key={`${f.name}-${f.lastModified}-${i}`} className="flex items-center gap-3 rounded-2xl border border-black/5 bg-brand-muted/30 px-4 py-2.5 dark:border-white/5 dark:bg-white/5">
+                        {(() => {
+                          const ext = f.name.split('.').pop()?.toLowerCase() ?? '';
+                          const FileIcon = FILE_ICONS[ext] ?? FileText;
+                          return <FileIcon className={`size-4 shrink-0 ${FILE_COLORS[ext] ?? ''}`} />;
+                        })()}
+                        <div className="flex min-w-0 flex-1 flex-col">
+                          <span className="truncate text-[11px] font-bold text-brand-dark dark:text-white">{f.name}</span>
+                          <span className="text-[10px] font-semibold uppercase tracking-wider text-brand-dark/50 dark:text-white/50">{fmt(f.size)}</span>
+                        </div>
+                        <button
+                          type="button"
+                          onClick={() => upload.removeAt(i)}
+                          aria-label={`${t('dashboard.translate.replace')} — ${f.name}`}
+                          className="flex size-6 shrink-0 items-center justify-center rounded-lg text-brand-dark/40 transition hover:bg-brand-muted hover:text-brand-dark dark:text-white/40 dark:hover:bg-white/10"
+                        >
+                          <X className="size-3.5" />
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                )}
               </div>
             )}
 
@@ -383,26 +596,28 @@ export default function TranslatePage() {
             {(showUpload || showConfiguring) && (
               <div className="hidden lg:block editorial-card p-6 bg-white dark:bg-[#141414] border-none shadow-editorial space-y-4">
                 <button
-                  disabled={!config.isConfigValid || submit.isSubmitting || !upload.file}
+                  disabled={!config.isConfigValid || submit.isSubmitting || upload.files.length === 0}
                   onClick={handleTranslate}
                   className={cn(
                     'w-full py-4 text-xs font-bold uppercase tracking-[0.18em] flex items-center justify-center gap-2 rounded-2xl transition-all shadow-sm active:scale-98',
-                    config.isConfigValid && upload.file && !submit.isSubmitting
+                    config.isConfigValid && upload.files.length > 0 && !submit.isSubmitting
                       ? 'bg-brand-dark text-white hover:bg-brand-accent dark:bg-brand-accent dark:text-brand-dark hover:shadow-xl cursor-pointer'
                       : 'bg-brand-muted/70 text-brand-dark/40 dark:bg-white/5 dark:text-white/30 cursor-not-allowed border border-black/[0.03] dark:border-white/[0.03]'
                   )}
                 >
                   {submit.isSubmitting ? (
                     <><Loader2 className="size-4 animate-spin" /> {t('translate.submit')}</>
+                  ) : upload.files.length > 1 ? (
+                    <>{t('translate.startBatch', { count: upload.files.length })} <ArrowRight size={13} className="text-brand-accent" /></>
                   ) : (
-                    <>{t('translate.startTranslation')} <ArrowRight size={13} className={upload.file ? 'text-brand-accent' : 'opacity-20'} /></>
+                    <>{t('translate.startTranslation')} <ArrowRight size={13} className={upload.files.length > 0 ? 'text-brand-accent' : 'opacity-20'} /></>
                   )}
                 </button>
 
-                {!upload.file && (
+                {upload.files.length === 0 && (
                   <p className="text-center text-[10px] text-brand-dark/50 dark:text-white/50 font-semibold uppercase tracking-wider">{t('translate.pleaseLoadFile')}</p>
                 )}
-                {upload.file && !config.targetLang && (
+                {upload.files.length > 0 && !config.targetLang && (
                   <p className="text-center text-[10px] text-brand-dark/50 dark:text-white/50 font-semibold uppercase tracking-wider">{t('translate.chooseTargetLang')}</p>
                 )}
 
@@ -567,7 +782,7 @@ export default function TranslatePage() {
           <div className="lg:col-span-5 space-y-6">
 
             {/* ── CONFIG (upload / configuring / failed) ──────────── */}
-            {(showUpload || showConfiguring || showFailed) && (
+            {(showUpload || showConfiguring || showFailed) && !showBatch && (
               <div className="editorial-card bg-white dark:bg-[#141414] border-none shadow-editorial overflow-hidden flex flex-col lg:sticky lg:top-8 lg:max-h-[calc(100vh-6rem)]">
                 {/* Scrollable config content */}
                 <div className="flex-1 overflow-y-auto p-6 space-y-5">
@@ -612,6 +827,17 @@ export default function TranslatePage() {
                       </div>
                     )}
 
+                    {/* Context guidelines indicator — ties the glossaries tab to this flow */}
+                    {config.mode === 'llm' && !!systemPrompt?.trim() && (
+                      <Link
+                        href="/dashboard/glossaries"
+                        className="flex items-center gap-2 rounded-xl border border-brand-accent/25 bg-brand-accent/5 px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-brand-accent transition-colors hover:bg-brand-accent/10"
+                      >
+                        <FileText className="size-3.5 shrink-0" />
+                        {t('translate.contextActive')}
+                      </Link>
+                    )}
+
                     {/* Glossary selector — Pro only; hidden entirely for free users */}
                     {config.isPro && (
                     <GlossarySelector
@@ -816,14 +1042,14 @@ export default function TranslatePage() {
         </div>
 
         {/* Mobile Sticky Action Bar (visible on mobile, hidden on lg) */}
-        {(showUpload || showConfiguring) && (
+        {(showUpload || showConfiguring) && !showBatch && (
           <div className="block lg:hidden fixed bottom-0 left-0 right-0 z-40 p-4 bg-white/90 dark:bg-[#141414]/90 backdrop-blur-md border-t border-black/5 dark:border-white/5 shadow-lg">
             <button
-              disabled={!config.isConfigValid || submit.isSubmitting || !upload.file}
+              disabled={!config.isConfigValid || submit.isSubmitting || upload.files.length === 0}
               onClick={handleTranslate}
               className={cn(
                 'w-full py-4 text-xs font-bold uppercase tracking-[0.15em] flex items-center justify-center gap-2 rounded-xl transition-all active:scale-98',
-                config.isConfigValid && upload.file && !submit.isSubmitting
+                config.isConfigValid && upload.files.length > 0 && !submit.isSubmitting
                   ? 'bg-brand-dark text-white hover:bg-brand-accent dark:bg-brand-accent dark:text-brand-dark cursor-pointer'
                   : 'bg-brand-muted/70 text-brand-dark/40 dark:bg-white/5 dark:text-white/30 cursor-not-allowed'
               )}