From 0b85d42197c5978ffc67d6e2c4d7837f369f7adf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Sun, 23 Aug 2026 05:30:45 +0000
Subject: [PATCH] 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.
---
 .../Dashboard/Jobs/DownloadJobDetail.tsx      | 48 +++++++++++++------
 .../Screens/Dashboard/Jobs/JobDetail.tsx      | 35 +++++++++-----
 .../Screens/Dashboard/Jobs/JobsPage.tsx       | 36 ++++++++------
 .../Dashboard/Jobs/ScriptJobDetail.tsx        | 43 +++++++++++------
 src/apps/officer-web/locales/en-GB.json       | 36 ++++++++++++++
 src/apps/officer-web/locales/pt-PT.json       | 36 ++++++++++++++
 6 files changed, 177 insertions(+), 57 deletions(-)

diff --git a/src/apps/officer-web/Screens/Dashboard/Jobs/DownloadJobDetail.tsx b/src/apps/officer-web/Screens/Dashboard/Jobs/DownloadJobDetail.tsx
index 7645e115..8f99ce44 100644
--- a/src/apps/officer-web/Screens/Dashboard/Jobs/DownloadJobDetail.tsx
+++ b/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"
diff --git a/src/apps/officer-web/Screens/Dashboard/Jobs/JobDetail.tsx b/src/apps/officer-web/Screens/Dashboard/Jobs/JobDetail.tsx
index 917a9d96..63a3b5b4 100644
--- a/src/apps/officer-web/Screens/Dashboard/Jobs/JobDetail.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/Jobs/JobDetail.tsx
@@ -18,6 +18,7 @@ import { Button } from '@/components/ui/button';
 import { WorkspaceLayout } from 'officerdev';
 import type { LayoutNode, PanelComponents } from 'officerdev';
 import { randomId } from 'helpers/random-id';
+import { useTranslation } from '@/lib/i18n';
 
 type Cost = { inputTokens: number; outputTokens: number; totalUSD: number };
 
@@ -162,6 +163,7 @@ type ToolCallEntryProps = {
 };
 
 const ToolCallEntry = ({ entry }: ToolCallEntryProps) => {
+  const { t } = useTranslation();
   const [expanded, setExpanded] = useState(false);
 
   return (
@@ -183,14 +185,14 @@ const ToolCallEntry = ({ entry }: ToolCallEntryProps) => {
       {expanded && (
         <div className="p-2.5 space-y-2 border-t border-duck-dark/10">
           <div>
-            <div className="text-[10px] text-duck-dark/40 uppercase mb-1">Input</div>
+            <div className="text-[10px] text-duck-dark/40 uppercase mb-1">{t('jobs.input')}</div>
             <pre className="text-duck-dark/60 whitespace-pre-wrap break-words text-[11px] max-h-40 overflow-y-auto">
               {JSON.stringify(entry.toolInput, null, 2)}
             </pre>
           </div>
           {entry.output !== undefined && (
             <div>
-              <div className="text-[10px] text-duck-dark/40 uppercase mb-1">Output</div>
+              <div className="text-[10px] text-duck-dark/40 uppercase mb-1">{t('jobs.output')}</div>
               <pre
                 className={`whitespace-pre-wrap break-words text-[11px] max-h-60 overflow-y-auto ${entry.isError ? 'text-red-500' : 'text-duck-dark/60'}`}
               >
@@ -236,6 +238,7 @@ const DEFAULT_LAYOUT: LayoutNode = {
 };
 
 const StepsPanel = () => {
+  const { t } = useTranslation();
   const ctx = useJobPanel();
   const {
     displaySteps,
@@ -255,7 +258,7 @@ const StepsPanel = () => {
   return (
     <div className="flex h-full flex-col overflow-hidden">
       <div className="px-3 py-2 border-b border-duck-dark/10">
-        <h2 className="text-xs font-medium text-duck-dark/60 uppercase tracking-wider">Steps</h2>
+        <h2 className="text-xs font-medium text-duck-dark/60 uppercase tracking-wider">{t('jobs.steps')}</h2>
       </div>
       <div className="flex-1 overflow-y-auto">
         {displaySteps.map((step, i) => {
@@ -336,6 +339,7 @@ const StepsPanel = () => {
 };
 
 const OutputPanel = () => {
+  const { t } = useTranslation();
   const ctx = useJobPanel();
   const { selectedKey, outputMap, streamingMap, outputPanelRef } = ctx;
 
@@ -345,7 +349,7 @@ const OutputPanel = () => {
   return (
     <div className="flex h-full flex-col overflow-hidden">
       <div className="px-3 py-2 border-b border-duck-dark/10 flex items-center gap-2">
-        <h2 className="text-xs font-medium text-duck-dark/60 uppercase tracking-wider">Output</h2>
+        <h2 className="text-xs font-medium text-duck-dark/60 uppercase tracking-wider">{t('jobs.output')}</h2>
         {selectedKey && (
           <span className="text-xs text-duck-dark/40 truncate">
             {selectedKey.includes(':') ? selectedKey.split(':')[1] : `step ${Number(selectedKey) + 1}`}
@@ -355,12 +359,12 @@ const OutputPanel = () => {
       <div ref={outputPanelRef} className="flex-1 overflow-y-auto p-3 space-y-2 font-mono text-xs">
         {!selectedKey && (
           <div className="flex items-center justify-center h-full text-duck-dark/30 text-sm font-sans">
-            Select a step or sub-task to view output
+            {t('jobs.selectStep')}
           </div>
         )}
         {selectedKey && selectedOutputs.length === 0 && !selectedStreaming && (
           <div className="flex items-center justify-center h-full text-duck-dark/30 text-sm font-sans">
-            No output yet
+            {t('jobs.noOutput')}
           </div>
         )}
         {selectedOutputs.map((entry) => {
@@ -385,6 +389,7 @@ const OutputPanel = () => {
 };
 
 export const PipelineJobDetail = () => {
+  const { t } = useTranslation();
   const { id } = useParams<{ id: string }>();
   const client = useClient();
 
@@ -792,15 +797,15 @@ export const PipelineJobDetail = () => {
   );
 
   if (isLoading) {
-    return <div className="flex h-full items-center justify-center text-duck-dark/30 text-sm">Loading...</div>;
+    return <div className="flex h-full items-center justify-center text-duck-dark/30 text-sm">{t('jobs.loading')}</div>;
   }
 
   if (!job) {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-3 text-duck-dark/30 text-sm">
-        <span>Job not found</span>
+        <span>{t('jobs.notFound')}</span>
         <Link to="/jobs" className="text-duck-teal text-xs hover:underline">
-          Back to jobs
+          {t('jobs.backToJobs')}
         </Link>
       </div>
     );
@@ -821,7 +826,11 @@ export const PipelineJobDetail = () => {
       <Card className="px-4 py-3 shrink-0">
         <div className="flex items-center gap-3">
           {/* The other two job detail panes already do this; this was the last imperative back in Jobs. */}
-          <Link to="/jobs" aria-label="Back to jobs" className="p-1 rounded hover:bg-duck-dark/10 cursor-pointer">
+          <Link
+            to="/jobs"
+            aria-label={t('jobs.backToJobs')}
+            className="p-1 rounded hover:bg-duck-dark/10 cursor-pointer"
+          >
             <ArrowLeft className="h-4 w-4 text-duck-dark/60" />
           </Link>
           <div className="flex-1 min-w-0">
@@ -837,7 +846,7 @@ export const PipelineJobDetail = () => {
           {isRunning && (
             <Button variant="outline" size="sm" onClick={handleStop} className="gap-1.5">
               <Square className="h-3 w-3" />
-              Stop
+              {t('jobs.stop')}
             </Button>
           )}
         </div>
@@ -852,13 +861,13 @@ export const PipelineJobDetail = () => {
             {displayCost && (
               <>
                 <div className="flex items-center gap-1.5 text-duck-dark/60">
-                  <span className="text-duck-dark/40">Tokens:</span>
+                  <span className="text-duck-dark/40">{t('jobs.tokens')}</span>
                   <span className="font-mono tabular-nums">
                     {formatTokens(displayCost.inputTokens)} in / {formatTokens(displayCost.outputTokens)} out
                   </span>
                 </div>
                 <div className="flex items-center gap-1.5 text-duck-dark/60">
-                  <span className="text-duck-dark/40">Cost:</span>
+                  <span className="text-duck-dark/40">{t('jobs.cost')}</span>
                   <span className="font-mono tabular-nums">{formatCost(displayCost.totalUSD)}</span>
                 </div>
               </>
diff --git a/src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx b/src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx
index 837c9b41..69f6b22e 100644
--- a/src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx
@@ -22,6 +22,7 @@ import { Card } from '@/components/Card';
 import { ScriptJobDetail } from './ScriptJobDetail';
 import { DownloadJobDetail } from './DownloadJobDetail';
 import { PipelineJobDetail } from './JobDetail';
+import { useTranslation } from '@/lib/i18n';
 
 type JobSummary = {
   id: string;
@@ -99,6 +100,7 @@ const useJobsData = () => {
 
 type JobRowProps = { job: JobSummary; onAction: (ev: MouseEvent, job: JobSummary) => void };
 const JobRow = ({ job, onAction }: JobRowProps) => {
+  const { t } = useTranslation();
   const { id: activeId } = useParams<{ id: string }>();
   const isRunning = job.status === 'running';
   const target = basename(job.target);
@@ -126,7 +128,7 @@ const JobRow = ({ job, onAction }: JobRowProps) => {
       </Link>
       <button
         onClick={(ev) => onAction(ev, job)}
-        title={isRunning ? 'Stop' : 'Delete'}
+        title={isRunning ? t('jobs.stop') : 'Delete'}
         className="shrink-0 mr-2 p-1.5 rounded-md text-duck-dark/40 hover:text-red-500 hover:bg-red-500/10 md:opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
       >
         {isRunning ? <Square className="h-4 w-4" /> : <Trash2 className="h-4 w-4" />}
@@ -144,6 +146,7 @@ const PanelHeader = ({ children }: { children: ReactNode }) => (
 // real event is wired to it. Sends { type: 'test' }, which reaches every configured channel — Discord
 // today, APNs and FCM once their credentials exist. Delete this once a real producer replaces it.
 const TestNotificationButton = () => {
+  const { t } = useTranslation();
   const client = useClient();
   const [sending, setSending] = useState(false);
 
@@ -157,12 +160,12 @@ const TestNotificationButton = () => {
       );
       const results = res?.results ?? [];
       if (results.length === 0) {
-        toast.warning('No channels configured');
+        toast.warning(t('jobs.noChannels'));
       } else {
         toast.success(results.map((r) => `${r.channel}: ${r.sent} sent`).join(', '));
       }
     } catch {
-      toast.error('Failed to send notification');
+      toast.error(t('jobs.notifyFailed'));
     } finally {
       setSending(false);
     }
@@ -172,7 +175,7 @@ const TestNotificationButton = () => {
     <button
       onClick={send}
       disabled={sending}
-      title="Send a test notification to every configured channel"
+      title={t('jobs.testNotification')}
       className="ml-auto shrink-0 flex items-center gap-1 text-xs font-medium text-duck-dark/50 hover:text-duck-teal cursor-pointer disabled:opacity-40"
     >
       <Bell className="h-3.5 w-3.5" />
@@ -182,6 +185,7 @@ const TestNotificationButton = () => {
 };
 
 const ActiveJobsPanel = () => {
+  const { t } = useTranslation();
   const { jobs, isLoading, act } = useJobsData();
   const active = [
     ...jobs.filter((j) => j.status === 'running'),
@@ -191,15 +195,17 @@ const ActiveJobsPanel = () => {
     <div className="h-full p-2">
       <Card className="h-full flex flex-col overflow-hidden">
         <PanelHeader>
-          <h2 className="text-sm font-semibold text-duck-dark">Running &amp; Queued</h2>
+          <h2 className="text-sm font-semibold text-duck-dark">{t('jobs.runningQueued')}</h2>
           {active.length > 0 && <span className="text-xs text-duck-dark/40">{active.length}</span>}
           <TestNotificationButton />
         </PanelHeader>
         <div className="flex-1 overflow-y-auto">
           {isLoading ? (
-            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">Loading…</div>
+            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">{t('jobs.loading')}</div>
           ) : active.length === 0 ? (
-            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">Nothing running</div>
+            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">
+              {t('jobs.nothingRunning')}
+            </div>
           ) : (
             active.map((job) => <JobRow key={job.id} job={job} onAction={act} />)
           )}
@@ -211,6 +217,7 @@ const ActiveJobsPanel = () => {
 
 // Bottom-left panel: finished / failed / stopped, newest first, searchable.
 const HistoryJobsPanel = () => {
+  const { t } = useTranslation();
   const { jobs, isLoading, act, clearHistory } = useJobsData();
   const [search, setSearch] = useState('');
   const history = jobs
@@ -224,12 +231,12 @@ const HistoryJobsPanel = () => {
     <div className="h-full p-2">
       <Card className="h-full flex flex-col overflow-hidden">
         <PanelHeader>
-          <h2 className="text-sm font-semibold text-duck-dark shrink-0">History</h2>
+          <h2 className="text-sm font-semibold text-duck-dark shrink-0">{t('jobs.history')}</h2>
           <div className="relative flex-1">
             <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-duck-dark/40" />
             <input
               type="text"
-              placeholder="Search…"
+              placeholder={t('jobs.search')}
               value={search}
               onChange={(ev) => setSearch(ev.target.value)}
               className="w-full pl-8 pr-3 py-1 text-sm rounded-md border border-duck-dark/15 bg-background/60 text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/40"
@@ -238,16 +245,16 @@ const HistoryJobsPanel = () => {
           {history.length > 0 && (
             <button
               onClick={clearHistory}
-              title="Delete all finished jobs"
+              title={t('jobs.deleteFinished')}
               className="shrink-0 text-xs font-medium text-duck-dark/50 hover:text-red-500 cursor-pointer"
             >
-              Clear all
+              {t('jobs.clearAll')}
             </button>
           )}
         </PanelHeader>
         <div className="flex-1 overflow-y-auto">
           {isLoading ? (
-            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">Loading…</div>
+            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">{t('jobs.loading')}</div>
           ) : history.length === 0 ? (
             <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">
               {search ? 'No matches' : 'No finished jobs'}
@@ -263,6 +270,7 @@ const HistoryJobsPanel = () => {
 
 // ── Right panel: the selected job's detail, by mode (script terminal / pipeline steps) ──
 const JobDetailPanel = () => {
+  const { t } = useTranslation();
   const { id } = useParams<{ id: string }>();
   const client = useClient();
   const [mode, setMode] = useState<string | null>(null);
@@ -284,7 +292,7 @@ const JobDetailPanel = () => {
       <div className="h-full p-2">
         <Card className="h-full flex flex-col items-center justify-center gap-2 text-duck-dark/30">
           <Inbox className="h-8 w-8" />
-          <span className="text-sm">Select a job</span>
+          <span className="text-sm">{t('jobs.selectJob')}</span>
         </Card>
       </div>
     );
@@ -301,7 +309,7 @@ const JobDetailPanel = () => {
   if (mode === 'notfound') {
     return (
       <div className="h-full p-2">
-        <Card className="h-full flex items-center justify-center text-duck-dark/50 text-sm">Job not found.</Card>
+        <Card className="h-full flex items-center justify-center text-duck-dark/50 text-sm">{t('jobs.notFound')}</Card>
       </div>
     );
   }
diff --git a/src/apps/officer-web/Screens/Dashboard/Jobs/ScriptJobDetail.tsx b/src/apps/officer-web/Screens/Dashboard/Jobs/ScriptJobDetail.tsx
index 4176f9ad..64b6ea22 100644
--- a/src/apps/officer-web/Screens/Dashboard/Jobs/ScriptJobDetail.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/Jobs/ScriptJobDetail.tsx
@@ -4,6 +4,9 @@ import { Loader2, CheckCircle2, XCircle, Ban, Clock, ArrowLeft, Square } from 'l
 import { useClient } from 'hooks/useClient';
 import { toast } from 'sonner';
 import { PhaseBar, type DownloadProgress } from './DownloadJobDetail';
+import { useTranslation } from '@/lib/i18n';
+
+type TFn = ReturnType<typeof useTranslation>['t'];
 
 type ScriptJob = {
   id: string;
@@ -27,36 +30,46 @@ const isTerminal = (s: string) => s === 'completed' || s === 'failed' || s === '
 const isDownloadProgress = (p: unknown): p is DownloadProgress =>
   !!p && typeof p === 'object' && 'meta' in p && 'dl' in p;
 
-const statusBadge = (status: string, exitCode: number | null) => {
+// Takes `t` because it is a module-level helper, not a component.
+const statusBadge = (status: string, exitCode: number | null, 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${exitCode != null ? ` (exit ${exitCode})` : ''}`,
+        label: exitCode != null ? t('jobs.failedWithCode', { code: exitCode }) : 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',
       };
   }
 };
 
 export const ScriptJobDetail = () => {
+  const { t } = useTranslation();
   const { id } = useParams<{ id: string }>();
   const client = useClient();
 
@@ -137,9 +150,9 @@ export const ScriptJobDetail = () => {
     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'));
     }
   };
 
@@ -153,15 +166,15 @@ export const ScriptJobDetail = () => {
   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, job.exitCode);
+  const badge = statusBadge(job.status, job.exitCode, t);
   const running = !isTerminal(job.status);
 
   return (
@@ -185,7 +198,7 @@ export const ScriptJobDetail = () => {
             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>
@@ -193,14 +206,14 @@ export const ScriptJobDetail = () => {
       {isDownloadProgress(job.progress) && (
         <div className="px-5 py-4 border-b border-duck-dark/10 flex flex-col gap-4">
           <PhaseBar
-            label="Titles"
+            label={t('jobs.titles')}
             c={job.progress.meta}
             active={job.progress.phase === 'metadata'}
             savedLabel="found"
             failedLabel="skipped"
           />
           <PhaseBar
-            label="Download"
+            label={t('jobs.download')}
             c={job.progress.dl}
             active={job.progress.phase === 'download'}
             savedLabel="saved"
diff --git a/src/apps/officer-web/locales/en-GB.json b/src/apps/officer-web/locales/en-GB.json
index 12236a60..b4a502f1 100644
--- a/src/apps/officer-web/locales/en-GB.json
+++ b/src/apps/officer-web/locales/en-GB.json
@@ -636,5 +636,41 @@
     "send": "Send · on an empty composer with something queued, send that now",
     "newline": "Newline",
     "stopTurn": "Stop the turn that is generating"
+  },
+  "jobs": {
+    "runningQueued": "Running & Queued",
+    "loading": "Loading…",
+    "nothingRunning": "Nothing running",
+    "history": "History",
+    "clearAll": "Clear all",
+    "selectJob": "Select a job",
+    "notFound": "Job not found.",
+    "backToJobs": "Back to jobs",
+    "stop": "Stop",
+    "testNotification": "Send a test notification to every configured channel",
+    "search": "Search…",
+    "deleteFinished": "Delete all finished jobs",
+    "noChannels": "No channels configured",
+    "notifyFailed": "Failed to send notification",
+    "stopRequested": "Stop requested",
+    "stopFailed": "Failed to stop",
+    "titles": "Titles",
+    "download": "Download",
+    "input": "Input",
+    "output": "Output",
+    "steps": "Steps",
+    "selectStep": "Select a step or sub-task to view output",
+    "noOutput": "No output yet",
+    "tokens": "Tokens:",
+    "cost": "Cost:",
+    "status": {
+      "running": "Running",
+      "queued": "Queued",
+      "completed": "Completed",
+      "failed": "Failed",
+      "stopped": "Stopped",
+      "interrupted": "Interrupted"
+    },
+    "failedWithCode": "Failed (exit {{code}})"
   }
 }
diff --git a/src/apps/officer-web/locales/pt-PT.json b/src/apps/officer-web/locales/pt-PT.json
index cb03a0d1..2e7be6e3 100644
--- a/src/apps/officer-web/locales/pt-PT.json
+++ b/src/apps/officer-web/locales/pt-PT.json
@@ -636,5 +636,41 @@
     "send": "Enviar · num compositor vazio com algo em fila, enviar isso agora",
     "newline": "Nova linha",
     "stopTurn": "Parar o turno que está a gerar"
+  },
+  "jobs": {
+    "runningQueued": "Em execução e em fila",
+    "loading": "A carregar…",
+    "nothingRunning": "Nada em execução",
+    "history": "Histórico",
+    "clearAll": "Limpar tudo",
+    "selectJob": "Selecione um trabalho",
+    "notFound": "Trabalho não encontrado.",
+    "backToJobs": "Voltar aos trabalhos",
+    "stop": "Parar",
+    "testNotification": "Enviar uma notificação de teste para todos os canais configurados",
+    "search": "Pesquisar…",
+    "deleteFinished": "Eliminar todos os trabalhos terminados",
+    "noChannels": "Nenhum canal configurado",
+    "notifyFailed": "Falha ao enviar a notificação",
+    "stopRequested": "Paragem pedida",
+    "stopFailed": "Falha ao parar",
+    "titles": "Títulos",
+    "download": "Descarregar",
+    "input": "Entrada",
+    "output": "Saída",
+    "steps": "Passos",
+    "selectStep": "Selecione um passo ou subtarefa para ver a saída",
+    "noOutput": "Ainda não há saída",
+    "tokens": "Tokens:",
+    "cost": "Custo:",
+    "status": {
+      "running": "Em execução",
+      "queued": "Em fila",
+      "completed": "Concluído",
+      "failed": "Falhou",
+      "stopped": "Parado",
+      "interrupted": "Interrompido"
+    },
+    "failedWithCode": "Falhou (saída {{code}})"
   }
 }