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.
2026-08-23 05:30:45 +00:00
parent 2e846933e9
commit 0b85d42197
6 changed files with 177 additions and 57 deletions
@@ -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"
@@ -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>
              </>
@@ -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>
    );
  }
@@ -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"
@@ -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}})"
  }
 }
@@ -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}})"
  }
 }