jobs keyed (73 -> 21)

The three job detail panes and the jobs page. Status labels share one jobs.status.*
group across all three panes rather than three copies of "Running".

statusBadge in two of the panes is a module-level helper, not a component, so it
takes `t` as a parameter -- the alternative is calling a hook outside a component
body. ScriptJobDetail's version built "Failed (exit N)" by string concatenation;
that is a key with a parameter now.

src/apps/officer-web/Screens/Dashboard/Jobs/DownloadJobDetail.tsx

@@ -3,6 +3,9 @@ import { useParams, Link } from 'react-router';
 import { Loader2, CheckCircle2, XCircle, Ban, Clock, ArrowLeft, Square, Film, Music } from 'lucide-react';
 import { useClient } from 'hooks/useClient';
 import { toast } from 'sonner';
+import { useTranslation } from '@/lib/i18n';
+
+type TFn = ReturnType<typeof useTranslation>['t'];
 
 // Detail view for a `download` job — a compact two-phase progress readout (metadata → download), polled
 // from the job's persisted progress (the executor emits counter snapshots, not per-item events).
@@ -29,26 +32,40 @@ type DownloadJob = {
 const POLL_MS = 1500;
 const isTerminal = (s: string) => s === 'completed' || s === 'failed' || s === 'stopped' || s === 'interrupted';
 
-const statusBadge = (status: string) => {
+// Takes `t` because it is a module-level helper, not a component — the alternative is a hook
+// call outside a component body.
+const statusBadge = (status: string, t: TFn) => {
   switch (status) {
     case 'running':
       return {
         icon: <Loader2 className="h-4 w-4 animate-spin" />,
-        label: 'Running',
+        label: t('jobs.status.running'),
         cls: 'text-amber-600 dark:text-amber-500',
       };
     case 'pending':
-      return { icon: <Clock className="h-4 w-4" />, label: 'Queued', cls: 'text-blue-600 dark:text-blue-400' };
+      return {
+        icon: <Clock className="h-4 w-4" />,
+        label: t('jobs.status.queued'),
+        cls: 'text-blue-600 dark:text-blue-400',
+      };
     case 'completed':
-      return { icon: <CheckCircle2 className="h-4 w-4" />, label: 'Completed', cls: 'text-duck-teal' };
+      return { icon: <CheckCircle2 className="h-4 w-4" />, label: t('jobs.status.completed'), cls: 'text-duck-teal' };
     case 'failed':
-      return { icon: <XCircle className="h-4 w-4" />, label: 'Failed', cls: 'text-red-600 dark:text-red-400' };
+      return {
+        icon: <XCircle className="h-4 w-4" />,
+        label: t('jobs.status.failed'),
+        cls: 'text-red-600 dark:text-red-400',
+      };
     case 'stopped':
-      return { icon: <Ban className="h-4 w-4" />, label: 'Stopped', cls: 'text-duck-dark/50 dark:text-foreground/50' };
+      return {
+        icon: <Ban className="h-4 w-4" />,
+        label: t('jobs.status.stopped'),
+        cls: 'text-duck-dark/50 dark:text-foreground/50',
+      };
     default:
       return {
         icon: <XCircle className="h-4 w-4" />,
-        label: 'Interrupted',
+        label: t('jobs.status.interrupted'),
         cls: 'text-orange-600 dark:text-orange-400',
       };
   }
@@ -100,6 +117,7 @@ export const PhaseBar = ({
 };
 
 export const DownloadJobDetail = () => {
+  const { t } = useTranslation();
   const { id } = useParams<{ id: string }>();
   const client = useClient();
   const [job, setJob] = useState<DownloadJob | null>(null);
@@ -134,9 +152,9 @@ export const DownloadJobDetail = () => {
     if (!id) return;
     try {
       await client.post(`/jobs/${id}/stop`, {});
-      toast.success('Stop requested');
+      toast.success(t('jobs.stopRequested'));
     } catch {
-      toast.error('Failed to stop');
+      toast.error(t('jobs.stopFailed'));
     }
   };
 
@@ -149,14 +167,14 @@ export const DownloadJobDetail = () => {
   if (!job)
     return (
       <div className="flex-1 flex flex-col items-center justify-center gap-3 text-duck-dark/60 dark:text-foreground/60">
-        <span>Job not found.</span>
+        <span>{t('jobs.notFound')}</span>
         <Link to="/jobs" className="text-duck-teal hover:underline">
-          Back to jobs
+          {t('jobs.backToJobs')}
         </Link>
       </div>
     );
 
-  const badge = statusBadge(job.status);
+  const badge = statusBadge(job.status, t);
   const running = !isTerminal(job.status);
   const p = job.progress;
   const isAudio = job.inputs?.format !== 'video';
@@ -197,7 +215,7 @@ export const DownloadJobDetail = () => {
             onClick={stop}
             className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md bg-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/20 cursor-pointer transition-colors"
           >
-            <Square className="h-3 w-3" /> Stop
+            <Square className="h-3 w-3" /> {t('jobs.stop')}
           </button>
         )}
       </div>
@@ -206,14 +224,14 @@ export const DownloadJobDetail = () => {
         <div className="mx-auto flex max-w-md flex-col gap-5">
           <div className="text-sm text-duck-dark/60 dark:text-foreground/60">{phaseLabel}</div>
           <PhaseBar
-            label="Titles"
+            label={t('jobs.titles')}
             c={p?.meta ?? { done: 0, failed: 0, total: 0 }}
             active={p?.phase === 'metadata'}
             savedLabel="found"
             failedLabel="skipped"
           />
           <PhaseBar
-            label="Download"
+            label={t('jobs.download')}
             c={p?.dl ?? { done: 0, failed: 0, total: 0 }}
             active={p?.phase === 'download'}
             savedLabel="saved"