@parhelia/localization 0.1.12570 → 0.1.12585

package/dist/translation-center/BatchTranslationView.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useState, useMemo, useRef, useCallback, memo, } from "react";
-import { useEditContext, SimpleTable, Progress as CoreProgress, Button, } from "@parhelia/core";
-import { listBatchTranslationJobs, subscribeToBatch, unsubscribeFromBatch, getBatchInfo, getTranslationProviders } from "../services/translationService";
-import { ChevronDown, ChevronUp } from "lucide-react";
+import { useEditContext, SimpleTable, Progress as CoreProgress, Button, SimpleIconButton, CopyButton, usePathname, useRouter, useSearchParams, } from "@parhelia/core";
+import { listBatchTranslationJobs, retryBatchTranslation, subscribeToBatch, unsubscribeFromBatch, getBatchInfo, getTranslationProviders, } from "../services/translationService";
+import { ChevronDown, ChevronUp, RefreshCw, ArrowLeft, Info, Loader2, Languages, ExternalLink, } from "lucide-react";
+import { toast } from "sonner";
 import { JsonView, defaultStyles } from "react-json-view-lite";
 import "react-json-view-lite/dist/index.css";
 // Wrapper so React 19 sees a plain function component instead of a forwardRef exotic component.
@@ -10,6 +11,12 @@ const Progress = (props) => React.createElement(CoreProgress, props);
 // Wrappers for lucide-react icons to work with React 19
 const ChevronUpIcon = (props) => React.createElement(ChevronUp, props);
 const ChevronDownIcon = (props) => React.createElement(ChevronDown, props);
+const RefreshIcon = (props) => React.createElement(RefreshCw, props);
+const ArrowLeftIcon = (props) => React.createElement(ArrowLeft, props);
+const InfoIcon = (props) => React.createElement(Info, props);
+const LoaderIcon = (props) => React.createElement(Loader2, props);
+const LanguagesIcon = (props) => React.createElement(Languages, props);
+const ExternalLinkIcon = (props) => React.createElement(ExternalLink, props);
 const MemoizedJsonView = memo(({ data }) => (_jsx(JsonView, { data: data, shouldExpandNode: (level) => level < 2, style: defaultStyles })), (prevProps, nextProps) => {
     return JSON.stringify(prevProps.data) === JSON.stringify(nextProps.data);
 });
@@ -17,32 +24,66 @@ const MemoizedJsonView = memo(({ data }) => (_jsx(JsonView, { data: data, should
 function normalizeBatchInfo(raw) {
     if (!raw)
         return null;
-    const pick = (a, b) => (a !== undefined ? a : b);
-    const toNum = (v) => (typeof v === "number" ? v : v != null ? parseInt(v, 10) : undefined);
+    const toNum = (v) => typeof v === "number" ? v : v != null ? parseInt(v, 10) : undefined;
     const info = {
-        batchId: pick(raw?.batchId, raw?.BatchId),
-        createdAtUtc: pick(raw?.createdAtUtc, raw?.CreatedAtUtc),
-        startedAtUtc: pick(raw?.startedAtUtc, raw?.StartedAtUtc),
-        completedAtUtc: pick(raw?.completedAtUtc, raw?.CompletedAtUtc),
-        initiatedByUser: pick(raw?.initiatedByUser, raw?.InitiatedByUser),
-        initiatorSessionId: pick(raw?.initiatorSessionId, raw?.InitiatorSessionId),
-        provider: pick(raw?.provider, raw?.Provider),
-        status: pick(raw?.status, raw?.Status),
-        expectedJobs: toNum(pick(raw?.expectedJobs, raw?.ExpectedJobs)),
-        completedJobs: toNum(pick(raw?.completedJobs, raw?.CompletedJobs)),
-        errorJobs: toNum(pick(raw?.errorJobs, raw?.ErrorJobs)),
-        metadata: pick(raw?.metadata, raw?.Metadata),
-        lastUpdatedUtc: pick(raw?.lastUpdatedUtc, raw?.LastUpdatedUtc),
-        exists: pick(raw?.exists, raw?.Exists),
+        batchId: raw?.batchId,
+        createdAtUtc: raw?.createdAtUtc,
+        startedAtUtc: raw?.startedAtUtc,
+        completedAtUtc: raw?.completedAtUtc,
+        initiatedByUser: raw?.initiatedByUser,
+        initiatorSessionId: raw?.initiatorSessionId,
+        provider: raw?.provider,
+        status: raw?.status,
+        expectedJobs: toNum(raw?.expectedJobs),
+        completedJobs: toNum(raw?.completedJobs),
+        errorJobs: toNum(raw?.errorJobs),
+        metadata: raw?.metadata,
+        lastUpdatedUtc: raw?.lastUpdatedUtc,
+        exists: raw?.exists,
     };
     return info.batchId ? info : null;
 }
-export function BatchTranslationView({ batchId, onBack }) {
+function normalizeJobItemId(itemId) {
+    return (itemId ?? "").toString().toLowerCase();
+}
+function getJobKey(itemId, language) {
+    return `${normalizeJobItemId(itemId)}-${(language ?? "").toString()}`;
+}
+function getSocketPayloadMessage(payload) {
+    return payload?.message || payload?.error || "";
+}
+function normalizeJobRecord(raw) {
+    return {
+        id: typeof raw?.id === "number"
+            ? raw.id
+            : typeof raw?.Id === "number"
+                ? raw.Id
+                : undefined,
+        itemId: normalizeJobItemId(raw?.itemId ?? raw?.ItemId),
+        targetLanguage: raw?.targetLanguage ?? raw?.TargetLanguage ?? "",
+        sourceLanguage: raw?.sourceLanguage ?? raw?.SourceLanguage ?? "",
+        status: raw?.status ?? raw?.Status ?? "",
+        timestamp: raw?.timestamp ?? raw?.Timestamp ?? "",
+        hash: raw?.hash ?? raw?.Hash,
+        message: raw?.message ?? raw?.Message,
+        batchId: raw?.batchId ?? raw?.BatchId,
+        metadata: raw?.metadata ?? raw?.Metadata ?? null,
+    };
+}
+function getRetryJobKey(job) {
+    return `${job.id ?? "no-id"}|${normalizeJobItemId(job.itemId)}|${job.sourceLanguage}|${job.targetLanguage}`;
+}
+export function BatchTranslationView({ batchId, onBack, }) {
     const editContext = useEditContext();
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
     const [batchJobs, setBatchJobs] = useState([]);
     const [batchInfo, setBatchInfo] = useState(null);
     const [providers, setProviders] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
+    const [isRetryingAll, setIsRetryingAll] = useState(false);
+    const [retryingJobKeys, setRetryingJobKeys] = useState(new Set());
     const [translationProgress, setTranslationProgress] = useState(new Map());
     const [itemNames, setItemNames] = useState(new Map());
     const [isMetadataExpanded, setIsMetadataExpanded] = useState(false);
@@ -56,10 +97,94 @@ export function BatchTranslationView({ batchId, onBack }) {
     // Helper function to get display name from service name
     const getProviderDisplayName = useCallback((serviceName) => {
         if (!serviceName)
-            return 'Unknown';
-        const provider = providers.find(p => p.name === serviceName);
+            return "Unknown";
+        const provider = providers.find((p) => p.name === serviceName);
         return provider?.displayName || serviceName;
     }, [providers]);
+    const openItemInEditor = useCallback((itemId, language) => {
+        editContext?.loadItem({
+            id: normalizeJobItemId(itemId),
+            language,
+            version: 0,
+        });
+        editContext?.switchWorkspace?.("editor");
+    }, [editContext]);
+    const openBatchInView = useCallback((nextBatchId) => {
+        const current = new URLSearchParams(searchParams.toString());
+        current.set("batchId", nextBatchId);
+        router.push(`${pathname}?${current.toString()}`, { scroll: false });
+    }, [pathname, router, searchParams]);
+    const buildRetryJobs = useCallback((jobs) => {
+        const uniqueJobs = new Map();
+        for (const job of jobs) {
+            if (job.status !== "Error")
+                continue;
+            const key = getRetryJobKey(job);
+            if (uniqueJobs.has(key))
+                continue;
+            uniqueJobs.set(key, {
+                sourceTranslationId: job.id,
+                itemId: normalizeJobItemId(job.itemId),
+                sourceLanguage: job.sourceLanguage,
+                targetLanguage: job.targetLanguage,
+                metadata: job.metadata ?? undefined,
+            });
+        }
+        return Array.from(uniqueJobs.values());
+    }, []);
+    const handleRetryJobs = useCallback(async (jobs, retryAll) => {
+        const retryJobs = buildRetryJobs(jobs);
+        if (retryJobs.length === 0) {
+            toast.error("No failed translations available to retry.");
+            return;
+        }
+        if (!editContext?.sessionId) {
+            toast.error("Cannot retry without an active session.");
+            return;
+        }
+        if (!batchInfo?.provider) {
+            toast.error("Retry provider could not be resolved for this batch.");
+            return;
+        }
+        if (retryAll) {
+            setIsRetryingAll(true);
+        }
+        else {
+            setRetryingJobKeys(new Set(jobs.map((job) => getRetryJobKey(job)).filter((key) => retryJobs.some((retryJob) => key ===
+                `${retryJob.sourceTranslationId ?? "no-id"}|${retryJob.itemId}|${retryJob.sourceLanguage}|${retryJob.targetLanguage}`))));
+        }
+        try {
+            const result = await retryBatchTranslation({
+                sessionId: editContext.sessionId,
+                sourceBatchId: batchId,
+                provider: batchInfo.provider,
+                jobs: retryJobs,
+            });
+            if (result.type !== "success" || !result.data) {
+                toast.error(result.details ||
+                    result.summary ||
+                    "Failed to start retry translations.");
+                return;
+            }
+            const response = result.data;
+            const startedCount = response.started?.length ?? 0;
+            const skippedCount = response.skipped?.length ?? 0;
+            if (startedCount === 0) {
+                toast.error(skippedCount > 0
+                    ? response.skipped[0]?.error || "No retries were started."
+                    : "No retries were started.");
+                return;
+            }
+            toast.success(retryAll
+                ? `Started retry batch with ${startedCount} translation${startedCount === 1 ? "" : "s"}.`
+                : "Started retry batch for failed translation.");
+            openBatchInView(response.retryBatchId);
+        }
+        finally {
+            setIsRetryingAll(false);
+            setRetryingJobKeys(new Set());
+        }
+    }, [batchId, batchInfo?.provider, buildRetryJobs, editContext?.sessionId, openBatchInView]);
     // Parse metadata for display
     const parsedMetadata = useMemo(() => {
         if (!batchInfo?.metadata)
@@ -78,7 +203,9 @@ export function BatchTranslationView({ batchId, onBack }) {
     const loadProviders = useCallback(async () => {
         try {
             const res = await getTranslationProviders();
-            const providerData = (res?.data ?? res ?? []);
+            const providerData = (res?.data ??
+                res ??
+                []);
             setProviders(providerData);
         }
         catch (error) {
@@ -90,36 +217,45 @@ export function BatchTranslationView({ batchId, onBack }) {
         try {
             // Use efficient batch-specific endpoint
             const res = await listBatchTranslationJobs(batchId);
-            const apiJobs = (res?.data ?? res ?? []);
+            const apiJobsRaw = (res?.data ?? res ?? []);
+            const apiJobs = apiJobsRaw.map(normalizeJobRecord);
             // Merge API response with existing state to prevent flickering
-            setBatchJobs(prevJobs => {
+            setBatchJobs((prevJobs) => {
                 // Create a map of existing jobs keyed by itemId-targetLanguage
                 const existingMap = new Map();
                 for (const job of prevJobs) {
-                    const key = `${job.itemId}-${job.targetLanguage}`;
+                    const key = getJobKey(job.itemId, job.targetLanguage);
                     existingMap.set(key, job);
                 }
                 // Merge API jobs into the map (API data takes precedence)
                 for (const apiJob of apiJobs) {
-                    const key = `${apiJob.itemId}-${apiJob.targetLanguage}`;
+                    const normalizedJob = normalizeJobRecord(apiJob);
+                    const key = getJobKey(normalizedJob.itemId, normalizedJob.targetLanguage);
                     const existingJob = existingMap.get(key);
                     if (existingJob) {
                         // Prefer API data if timestamp is newer or status changed
-                        const apiTimestamp = apiJob.timestamp ? new Date(apiJob.timestamp).getTime() : 0;
-                        const existingTimestamp = existingJob.timestamp ? new Date(existingJob.timestamp).getTime() : 0;
-                        if (apiTimestamp >= existingTimestamp || apiJob.status !== existingJob.status) {
+                        const apiTimestamp = normalizedJob.timestamp
+                            ? new Date(normalizedJob.timestamp).getTime()
+                            : 0;
+                        const existingTimestamp = existingJob.timestamp
+                            ? new Date(existingJob.timestamp).getTime()
+                            : 0;
+                        if (apiTimestamp >= existingTimestamp ||
+                            normalizedJob.status !== existingJob.status) {
                             // Preserve sourceLanguage from API if available, otherwise keep existing
                             existingMap.set(key, {
-                                ...apiJob,
-                                sourceLanguage: apiJob.sourceLanguage || existingJob.sourceLanguage || ""
+                                ...normalizedJob,
+                                sourceLanguage: normalizedJob.sourceLanguage ||
+                                    existingJob.sourceLanguage ||
+                                    "",
                             });
                         }
                     }
                     else {
                         // New job from API - ensure sourceLanguage is set
                         existingMap.set(key, {
-                            ...apiJob,
-                            sourceLanguage: apiJob.sourceLanguage || ""
+                            ...normalizedJob,
+                            sourceLanguage: normalizedJob.sourceLanguage || "",
                         });
                     }
                 }
@@ -131,7 +267,7 @@ export function BatchTranslationView({ batchId, onBack }) {
                     return mergedJobs;
                 }
                 // Deep comparison: check if any job changed
-                const prevMap = new Map(prevJobs.map(j => [`${j.itemId}-${j.targetLanguage}`, j]));
+                const prevMap = new Map(prevJobs.map((j) => [`${j.itemId}-${j.targetLanguage}`, j]));
                 let hasChanges = false;
                 for (const mergedJob of mergedJobs) {
                     const key = `${mergedJob.itemId}-${mergedJob.targetLanguage}`;
@@ -181,7 +317,7 @@ export function BatchTranslationView({ batchId, onBack }) {
                     const info = normalizeBatchInfo(raw);
                     if (!cancelled && info)
                         setBatchInfo(info);
-                    const isTerminal = info?.status === 'Completed' || info?.status === 'Error';
+                    const isTerminal = info?.status === "Completed" || info?.status === "Error";
                     // Conditionally subscribe only for non-terminal batches
                     if (!isTerminal && editContext?.sessionId) {
                         await subscribeToBatch(batchId, editContext.sessionId);
@@ -204,7 +340,10 @@ export function BatchTranslationView({ batchId, onBack }) {
         init();
         return () => {
             // Cleanup: unsubscribe when component unmounts or batch changes
-            if (isSubscribedRef.current && editContext && editContext.sessionId && batchId) {
+            if (isSubscribedRef.current &&
+                editContext &&
+                editContext.sessionId &&
+                batchId) {
                 unsubscribeFromBatch(batchId, editContext.sessionId).catch(console.error);
             }
         };
@@ -226,8 +365,10 @@ export function BatchTranslationView({ batchId, onBack }) {
                 // Only update if this message is for our batch
                 if (message.payload.batchId === batchId) {
                     // Update the specific job in our local state instead of refetching all jobs
-                    setBatchJobs(prevJobs => {
-                        const jobIndex = prevJobs.findIndex(job => job.itemId === message.payload.itemId &&
+                    setBatchJobs((prevJobs) => {
+                        const normalizedItemId = normalizeJobItemId(message.payload.itemId);
+                        const payloadMessage = getSocketPayloadMessage(message.payload);
+                        const jobIndex = prevJobs.findIndex((job) => normalizeJobItemId(job.itemId) === normalizedItemId &&
                             job.targetLanguage === message.payload.language);
                         if (jobIndex >= 0) {
                             // Update existing job
@@ -236,41 +377,44 @@ export function BatchTranslationView({ batchId, onBack }) {
                             if (existingJob) {
                                 updatedJobs[jobIndex] = {
                                     ...existingJob,
+                                    itemId: normalizedItemId,
                                     status: message.payload.status,
                                     timestamp: message.payload.timestamp || existingJob.timestamp,
-                                    message: message.payload.message || existingJob.message,
+                                    message: payloadMessage || existingJob.message,
                                     // Preserve sourceLanguage from existing job if not provided in message
-                                    sourceLanguage: message.payload.sourceLanguage || existingJob.sourceLanguage || ""
+                                    sourceLanguage: message.payload.sourceLanguage ||
+                                        existingJob.sourceLanguage ||
+                                        "",
                                 };
                             }
                             return updatedJobs;
                         }
-                        else if (message.type === "translation-started") {
-                            // Add new job if it doesn't exist (shouldn't happen with batch subscriptions, but safe fallback)
+                        else {
+                            // Add new job if it doesn't exist yet so terminal updates are still visible.
                             const newJob = {
-                                itemId: message.payload.itemId,
+                                itemId: normalizedItemId,
                                 targetLanguage: message.payload.language,
                                 sourceLanguage: message.payload.sourceLanguage || "", // Keep this, but we'll try to populate from API
                                 status: message.payload.status,
                                 timestamp: message.payload.timestamp || new Date().toISOString(),
                                 batchId: batchId,
-                                message: message.payload.message || ""
+                                message: payloadMessage,
                             };
                             return [...prevJobs, newJob];
                         }
-                        return prevJobs;
                     });
                 }
             }
             if (message.type === "translation-progress") {
                 // Only track progress for jobs in this batch
                 if (message.payload.batchId === batchId) {
-                    const itemId = (message.payload.itemId ?? "").toString().toLowerCase();
+                    const itemId = normalizeJobItemId(message.payload.itemId);
                     const language = message.payload.language;
-                    const progressKey = `${itemId}-${language}`;
+                    const progressKey = getJobKey(itemId, language);
                     // Ensure a row exists; if not, add a placeholder "In Progress" job
-                    setBatchJobs(prevJobs => {
-                        const idx = prevJobs.findIndex(j => j.itemId === itemId && j.targetLanguage === language);
+                    setBatchJobs((prevJobs) => {
+                        const idx = prevJobs.findIndex((j) => normalizeJobItemId(j.itemId) === itemId &&
+                            j.targetLanguage === language);
                         if (idx >= 0)
                             return prevJobs;
                         const newJob = {
@@ -280,7 +424,7 @@ export function BatchTranslationView({ batchId, onBack }) {
                             status: "In Progress",
                             timestamp: new Date().toISOString(),
                             batchId: batchId,
-                            message: message.payload.message || ""
+                            message: message.payload.message || "",
                         };
                         return [...prevJobs, newJob];
                     });
@@ -288,14 +432,15 @@ export function BatchTranslationView({ batchId, onBack }) {
                         const next = new Map(prev);
                         next.set(progressKey, {
                             progress: message.payload.progress || 0,
-                            message: message.payload.message || ""
+                            message: message.payload.message || "",
                         });
                         return next;
                     });
                 }
             }
             // Handle batch-completed messages for this specific batch
-            if (message.type === "batch-completed" && message.payload.batchId === batchId) {
+            if (message.type === "batch-completed" &&
+                message.payload.batchId === batchId) {
                 // Refresh header info only (jobs are already updated via websocket)
                 (async () => {
                     try {
@@ -318,7 +463,7 @@ export function BatchTranslationView({ batchId, onBack }) {
     }, [editContext, batchId]);
     // Adaptive polling while batch is in progress - only as fallback when websockets are silent
     useEffect(() => {
-        const isRunning = batchInfo?.status === 'In Progress';
+        const isRunning = batchInfo?.status === "In Progress";
         if (!isRunning)
             return;
         const pollBatchInfo = async () => {
@@ -356,7 +501,7 @@ export function BatchTranslationView({ batchId, onBack }) {
         }
         const fetchItemNames = async () => {
             // Extract unique item IDs from batchJobs
-            const uniqueItemIds = Array.from(new Set(batchJobs.map(job => job.itemId)));
+            const uniqueItemIds = Array.from(new Set(batchJobs.map((job) => job.itemId)));
             if (uniqueItemIds.length === 0) {
                 return;
             }
@@ -364,7 +509,7 @@ export function BatchTranslationView({ batchId, onBack }) {
             const language = editContext.currentItemDescriptor?.language || "en";
             try {
                 // Create ItemDescriptors for fetching
-                const itemDescriptors = uniqueItemIds.map(itemId => ({
+                const itemDescriptors = uniqueItemIds.map((itemId) => ({
                     id: itemId,
                     language: language,
                     version: 0, // Latest version
@@ -378,7 +523,7 @@ export function BatchTranslationView({ batchId, onBack }) {
                         namesMap.set(stub.id.toLowerCase(), stub.name);
                     }
                 }
-                setItemNames(prevNames => {
+                setItemNames((prevNames) => {
                     // Merge with existing names, only update if there are changes
                     let hasChanges = false;
                     const merged = new Map(prevNames);
@@ -397,7 +542,11 @@ export function BatchTranslationView({ batchId, onBack }) {
             }
         };
         fetchItemNames();
-    }, [batchJobs, editContext?.itemsRepository, editContext?.currentItemDescriptor?.language]);
+    }, [
+        batchJobs,
+        editContext?.itemsRepository,
+        editContext?.currentItemDescriptor?.language,
+    ]);
     // Group jobs by item for better organization
     const itemGroups = useMemo(() => {
         const groups = {};
@@ -415,9 +564,9 @@ export function BatchTranslationView({ batchId, onBack }) {
         return entries.sort(([, jobsA], [, jobsB]) => {
             // Calculate status priority for each item group
             const getStatusPriority = (jobs) => {
-                const hasInProgress = jobs.some(j => j.status === "In Progress");
-                const hasError = jobs.some(j => j.status === "Error");
-                const allCompleted = jobs.every(j => j.status === "Completed");
+                const hasInProgress = jobs.some((j) => j.status === "In Progress");
+                const hasError = jobs.some((j) => j.status === "Error");
+                const allCompleted = jobs.every((j) => j.status === "Completed");
                 if (hasInProgress)
                     return 1; // Highest priority - show first
                 if (hasError)
@@ -434,7 +583,7 @@ export function BatchTranslationView({ batchId, onBack }) {
     // Calculate overall progress segments including in-progress job progress.
     // Incorporate server-side expected/completed/error counts so pending server jobs are reflected.
     const progressSegments = useMemo(() => {
-        const expectedTotal = typeof batchInfo?.expectedJobs === 'number' && batchInfo.expectedJobs > 0
+        const expectedTotal = typeof batchInfo?.expectedJobs === "number" && batchInfo.expectedJobs > 0
             ? batchInfo.expectedJobs
             : batchJobs.length;
         if (expectedTotal === 0) {
@@ -448,18 +597,22 @@ export function BatchTranslationView({ batchId, onBack }) {
                 errorCount: 0,
                 pendingCount: 0,
                 total: 0,
-                actualProgress: 0
+                actualProgress: 0,
             };
         }
-        const localCompleted = batchJobs.filter(job => job.status === 'Completed').length;
-        const localErrors = batchJobs.filter(job => job.status === 'Error').length;
-        const serverCompleted = typeof batchInfo?.completedJobs === 'number' ? batchInfo.completedJobs : undefined;
-        const serverErrors = typeof batchInfo?.errorJobs === 'number' ? batchInfo.errorJobs : undefined;
+        const localCompleted = batchJobs.filter((job) => job.status === "Completed").length;
+        const localErrors = batchJobs.filter((job) => job.status === "Error").length;
+        const serverCompleted = typeof batchInfo?.completedJobs === "number"
+            ? batchInfo.completedJobs
+            : undefined;
+        const serverErrors = typeof batchInfo?.errorJobs === "number"
+            ? batchInfo.errorJobs
+            : undefined;
         // Prefer the larger of local/server so UI can progress smoothly with local updates
         const completedCount = Math.max(0, Math.min(expectedTotal, Math.max(localCompleted, serverCompleted ?? 0)));
         const errorCount = Math.max(0, Math.min(expectedTotal - completedCount, Math.max(localErrors, serverErrors ?? 0)));
         // Known in-progress from client state
-        const knownInProgressCount = batchJobs.filter(job => job.status === 'In Progress').length;
+        const knownInProgressCount = batchJobs.filter((job) => job.status === "In Progress").length;
         // Cap to not exceed remaining after completed+error
         const inProgressCount = Math.max(0, Math.min(knownInProgressCount, expectedTotal - completedCount - errorCount));
         const pendingCount = Math.max(0, expectedTotal - completedCount - errorCount - inProgressCount);
@@ -467,8 +620,8 @@ export function BatchTranslationView({ batchId, onBack }) {
         // Actual progress: completed=100 each, in-progress use live progress if available, others 0
         let totalActualProgress = completedCount * 100;
         for (const job of batchJobs) {
-            if (job.status === 'In Progress') {
-                const progressKey = `${job.itemId}-${job.targetLanguage}`;
+            if (job.status === "In Progress") {
+                const progressKey = getJobKey(job.itemId, job.targetLanguage);
                 const jobProgress = translationProgress.get(progressKey);
                 totalActualProgress += jobProgress?.progress || 0;
             }
@@ -489,6 +642,7 @@ export function BatchTranslationView({ batchId, onBack }) {
         return segments;
     }, [batchJobs, batchInfo, translationProgress]);
     const overallProgress = progressSegments.actualProgress;
+    const isMobile = editContext?.isMobile ?? false;
     // Treat the batch as Completed if all jobs are completed and there are no errors/in-progress,
     // even if the backend status is still "In Progress".
     const effectiveStatus = batchInfo?.status === "In Progress" &&
@@ -517,14 +671,38 @@ export function BatchTranslationView({ batchId, onBack }) {
             catch { }
         })();
     }, [effectiveStatus, batchId, loadBatchJobs]);
-    return (_jsxs("div", { className: "flex h-full flex-col min-h-0 bg-[var(--color-gray-5)]", "data-testid": "batch-translation-view", children: [_jsxs("div", { className: "flex-shrink-0 border-b border-[var(--color-gray-3)] bg-background p-4 md:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [onBack && (_jsxs(Button, { size: "sm", variant: "outline", onClick: onBack, children: [_jsx("i", { className: "pi pi-arrow-left" }), "Back"] })), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold text-[var(--color-dark)]", children: "Translation Batch" }), _jsxs("p", { className: "text-sm text-[var(--color-gray-2)] mt-1", children: ["Batch ID: ", _jsx("span", { className: "font-mono text-xs bg-[var(--color-gray-4)] px-2 py-0.5 rounded-md", children: batchId })] }), batchInfo && (_jsxs("div", { className: "mt-2 flex flex-wrap gap-2 items-center text-xs", children: [effectiveStatus && (_jsx("span", { "data-testid": "translation-job-status", className: `inline-flex items-center rounded-full px-2.5 py-1 font-medium ${effectiveStatus === 'Completed'
-                                                            ? 'bg-green-100 text-green-700'
-                                                            : effectiveStatus === 'In Progress'
-                                                                ? ''
-                                                                : effectiveStatus === 'Error'
-                                                                    ? 'bg-red-100 text-red-600'
-                                                                    : 'bg-[var(--color-gray-4)] text-[var(--color-gray-1)]'}`, style: effectiveStatus === 'In Progress' ? { backgroundColor: '#f6eeff', color: '#9650fb' } : undefined, children: effectiveStatus })), batchInfo.provider && (_jsxs("span", { className: "text-[var(--color-gray-1)]", children: ["Provider: ", _jsx("span", { className: "font-medium", children: getProviderDisplayName(batchInfo.provider) })] })), batchInfo.initiatedByUser && (_jsxs("span", { className: "text-[var(--color-gray-1)]", children: ["By: ", _jsx("span", { className: "font-medium", children: batchInfo.initiatedByUser })] })), (batchInfo.startedAtUtc || batchInfo.completedAtUtc || batchInfo.lastUpdatedUtc) && (_jsxs("span", { className: "text-[var(--color-gray-2)]", children: [batchInfo.startedAtUtc && (_jsxs(_Fragment, { children: ["Started: ", new Date(batchInfo.startedAtUtc).toLocaleString()] })), batchInfo.completedAtUtc && (_jsxs(_Fragment, { children: [batchInfo.startedAtUtc ? ' • ' : '', "Completed: ", new Date(batchInfo.completedAtUtc).toLocaleString()] })), !batchInfo.completedAtUtc && batchInfo.lastUpdatedUtc && (_jsxs(_Fragment, { children: [batchInfo.startedAtUtc ? ' • ' : '', "Updated: ", new Date(batchInfo.lastUpdatedUtc).toLocaleString()] }))] }))] }))] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "text-sm text-[var(--color-gray-2)]", children: [`${progressSegments.completedCount}/${progressSegments.total} completed`, progressSegments.errorCount ? `, ${progressSegments.errorCount} errors` : ''] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: loadBatchJobs, disabled: isLoading, title: "Manual refresh - normally updates come through websocket subscriptions", children: [_jsx("i", { className: `pi pi-refresh ${isLoading ? 'pi-spin' : ''}` }), "Refresh"] })] })] }), parsedMetadata && (_jsxs("div", { className: "border-t border-[var(--color-gray-3)] bg-[var(--color-gray-5)] mt-4 rounded-b-lg", children: [_jsxs("button", { onClick: () => setIsMetadataExpanded(!isMetadataExpanded), className: "flex w-full cursor-pointer items-center justify-between px-4 py-2.5 text-left transition-colors hover:bg-[var(--color-gray-4)]", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "pi pi-info-circle text-[var(--color-gray-2)]" }), _jsx("span", { className: "text-xs font-medium text-[var(--color-gray-1)]", children: "Batch Metadata" })] }), isMetadataExpanded ? (_jsx(ChevronUpIcon, { className: "h-4 w-4 text-[var(--color-gray-2)]", strokeWidth: 1 })) : (_jsx(ChevronDownIcon, { className: "h-4 w-4 text-[var(--color-gray-2)]", strokeWidth: 1 }))] }), isMetadataExpanded && (_jsx("div", { className: "max-h-96 overflow-y-auto px-4 pb-3", children: _jsx("div", { className: "rounded-lg border border-[var(--color-gray-3)] bg-background p-3 text-xs shadow-sm mt-2", children: _jsx(MemoizedJsonView, { data: parsedMetadata }) }) }))] })), _jsxs("div", { className: "mt-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("span", { className: "text-sm font-medium text-[var(--color-dark)]", children: "Overall Progress" }), _jsxs("span", { className: "text-sm text-[var(--color-gray-2)]", children: [progressSegments.completedCount, " / ", progressSegments.total, " completed"] })] }), _jsxs("div", { className: "relative h-4 rounded-full overflow-hidden", style: { backgroundColor: 'var(--color-gray-3)' }, children: [_jsxs("div", { className: "absolute inset-0 flex", children: [progressSegments.completed > 0 && (_jsx("div", { className: "h-full transition-all duration-300", style: { width: `${progressSegments.completed}%`, backgroundColor: '#8ae048' } })), progressSegments.inProgress > 0 && (_jsx("div", { className: "h-full transition-all duration-300", style: { width: `${progressSegments.inProgress}%`, backgroundColor: '#9650fb' } })), progressSegments.error > 0 && (_jsx("div", { className: "bg-destructive h-full transition-all duration-300", style: { width: `${progressSegments.error}%` } })), progressSegments.pending > 0 && (_jsx("div", { className: "h-full transition-all duration-300", style: { width: `${progressSegments.pending}%`, backgroundColor: 'var(--color-gray-4)' } }))] }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsxs("span", { className: "text-xs font-medium text-white drop-shadow-sm", children: [overallProgress, "%"] }) })] }), _jsxs("div", { className: "flex flex-wrap gap-3 mt-2 text-xs", children: [progressSegments.completedCount > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3 h-3 rounded-sm", style: { backgroundColor: '#8ae048' } }), _jsxs("span", { className: "text-[var(--color-gray-1)]", children: [progressSegments.completedCount, " completed"] })] })), progressSegments.inProgressCount > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3 h-3 rounded-sm", style: { backgroundColor: '#9650fb' } }), _jsxs("span", { className: "text-[var(--color-gray-1)]", children: [progressSegments.inProgressCount, " in progress"] })] })), progressSegments.errorCount > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3 h-3 bg-destructive rounded-sm" }), _jsxs("span", { className: "text-[var(--color-gray-1)]", children: [progressSegments.errorCount, " errors"] })] })), progressSegments.pendingCount > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3 h-3 bg-[var(--color-gray-4)] rounded-sm" }), _jsxs("span", { className: "text-[var(--color-gray-1)]", children: [progressSegments.pendingCount, " pending"] })] })), typeof batchInfo?.expectedJobs === 'number' && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3 h-3 bg-[var(--color-gray-4)] rounded-sm" }), _jsxs("span", { className: "text-[var(--color-gray-1)]", children: [(batchInfo.expectedJobs || 0) - (batchInfo.completedJobs || 0) - (batchInfo.errorJobs || 0), " pending (server)"] })] }))] })] })] }), _jsx("div", { className: "flex-1 overflow-auto p-4 md:p-6 min-h-0", children: isLoading && batchJobs.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "flex items-center gap-2 text-[var(--color-gray-2)]", children: [_jsx("i", { className: "pi pi-spin pi-spinner text-[#9650fb]" }), "Loading batch translations..."] }) })) : batchJobs.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "text-center text-[var(--color-gray-2)]", children: [_jsx("i", { className: "pi pi-language text-2xl block mb-2 text-[var(--color-gray-3)]" }), _jsx("p", { className: "font-medium text-[var(--color-gray-1)]", children: "No translations found for this batch" }), _jsx("p", { className: "text-sm mt-1", children: "The batch may not exist or no translation jobs have started yet" })] }) })) : (_jsx("div", { className: "space-y-4", children: sortedItemGroups.map(([itemId, jobs]) => {
-                        const itemCompleted = jobs.filter(j => j.status === "Completed").length;
+    return (_jsxs("div", { className: "flex h-full flex-col min-h-0 bg-gray-5", "data-testid": "batch-translation-view", children: [_jsxs("div", { className: "shrink-0 border-b border-gray-3 bg-background p-4 md:p-6", children: [_jsxs("div", { className: `flex ${isMobile ? "flex-col items-start gap-4" : "items-center justify-between"}`, children: [_jsxs("div", { className: `flex ${isMobile ? "w-full" : "items-center"} gap-3`, children: [onBack && (_jsxs(Button, { size: "sm", variant: "outline", onClick: onBack, className: isMobile ? "shrink-0 self-start p-0 w-8 h-8" : "", children: [_jsx(ArrowLeftIcon, { className: "h-4 w-4" }), isMobile ? "" : "Back"] })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h1", { className: "text-lg md:text-xl font-semibold text-(--color-dark) truncate", children: "Translation Batch" }), _jsxs("p", { className: "text-xs md:text-sm text-gray-2 mt-0.5 md:mt-1", children: ["Batch ID:", " ", _jsx("span", { className: "font-mono text-[10px] md:text-xs bg-gray-4 px-2 py-0.5 rounded-md break-all", children: batchId })] }), batchInfo && !isMobile && (_jsxs("div", { className: "mt-2 flex flex-wrap gap-2 items-center text-xs", children: [effectiveStatus && (_jsx("span", { "data-testid": "translation-job-status", className: `inline-flex items-center rounded-full px-2.5 py-1 font-medium ${effectiveStatus === "Completed"
+                                                            ? "bg-green-100 text-green-700"
+                                                            : effectiveStatus === "In Progress"
+                                                                ? ""
+                                                                : effectiveStatus === "Error"
+                                                                    ? "bg-red-100 text-red-600"
+                                                                    : "bg-gray-4 text-(--color-gray-1)"}`, style: effectiveStatus === "In Progress"
+                                                            ? { backgroundColor: "#f6eeff", color: "#9650fb" }
+                                                            : undefined, children: effectiveStatus })), batchInfo.provider && (_jsxs("span", { className: "text-(--color-gray-1)", children: ["Provider:", " ", _jsx("span", { className: "font-medium", children: getProviderDisplayName(batchInfo.provider) })] })), batchInfo.initiatedByUser && (_jsxs("span", { className: "text-(--color-gray-1)", children: ["By:", " ", _jsx("span", { className: "font-medium", children: batchInfo.initiatedByUser })] })), (batchInfo.startedAtUtc ||
+                                                        batchInfo.completedAtUtc ||
+                                                        batchInfo.lastUpdatedUtc) && (_jsxs("span", { className: "text-gray-2", children: [batchInfo.startedAtUtc && (_jsxs(_Fragment, { children: ["Started:", " ", new Date(batchInfo.startedAtUtc).toLocaleString()] })), batchInfo.completedAtUtc && (_jsxs(_Fragment, { children: [batchInfo.startedAtUtc ? " • " : "", "Completed:", " ", new Date(batchInfo.completedAtUtc).toLocaleString()] })), !batchInfo.completedAtUtc &&
+                                                                batchInfo.lastUpdatedUtc && (_jsxs(_Fragment, { children: [batchInfo.startedAtUtc ? " • " : "", "Updated:", " ", new Date(batchInfo.lastUpdatedUtc).toLocaleString()] }))] }))] }))] })] }), isMobile && batchInfo && (_jsxs("div", { className: "grid grid-cols-2 gap-x-4 gap-y-3 w-full mt-1 border-t border-gray-3 pt-3", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-[10px] text-gray-2 uppercase font-bold tracking-wider", children: "Status" }), effectiveStatus && (_jsx("span", { "data-testid": "translation-job-status", className: `inline-flex items-center self-start rounded-full px-2 py-0.5 text-[10px] font-medium ${effectiveStatus === "Completed"
+                                                    ? "bg-green-100 text-green-700"
+                                                    : effectiveStatus === "In Progress"
+                                                        ? ""
+                                                        : effectiveStatus === "Error"
+                                                            ? "bg-red-100 text-red-600"
+                                                            : "bg-gray-4 text-(--color-gray-1)"}`, style: effectiveStatus === "In Progress"
+                                                    ? { backgroundColor: "#f6eeff", color: "#9650fb" }
+                                                    : undefined, children: effectiveStatus }))] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-[10px] text-gray-2 uppercase font-bold tracking-wider", children: "Provider" }), _jsx("span", { className: "text-xs font-medium text-(--color-gray-1) truncate", children: getProviderDisplayName(batchInfo.provider) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-[10px] text-gray-2 uppercase font-bold tracking-wider", children: "Initiated By" }), _jsx("span", { className: "text-xs font-medium text-(--color-gray-1) truncate", children: batchInfo.initiatedByUser || "System" })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-[10px] text-gray-2 uppercase font-bold tracking-wider", children: "Activity" }), _jsx("span", { className: "text-[10px] text-gray-2 leading-tight", children: batchInfo.completedAtUtc ? (_jsxs(_Fragment, { children: ["Done:", " ", new Date(batchInfo.completedAtUtc).toLocaleTimeString()] })) : batchInfo.startedAtUtc ? (_jsxs(_Fragment, { children: ["Started:", " ", new Date(batchInfo.startedAtUtc).toLocaleTimeString()] })) : batchInfo.lastUpdatedUtc ? (_jsxs(_Fragment, { children: ["Updated:", " ", new Date(batchInfo.lastUpdatedUtc).toLocaleTimeString()] })) : (_jsx(_Fragment, { children: "Created" })) })] })] })), _jsxs("div", { className: `flex items-center ${isMobile ? "w-full justify-between border-t border-gray-3 pt-3 mt-1" : "gap-3"}`, children: [_jsxs("div", { className: "text-xs md:text-sm text-gray-2", children: [_jsx("span", { className: "font-semibold text-(--color-dark)", children: progressSegments.completedCount }), "/", progressSegments.total, " completed", progressSegments.errorCount
+                                                ? `, ${progressSegments.errorCount} errors`
+                                                : ""] }), _jsxs("div", { className: "flex items-center gap-2", children: [progressSegments.errorCount > 0 && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => void handleRetryJobs(batchJobs.filter((job) => job.status === "Error"), true), disabled: isRetryingAll || isLoading, className: "md:w-auto h-8 px-3", children: [_jsx(RefreshIcon, { className: `h-4 w-4 ${isRetryingAll ? "animate-spin" : ""}` }), _jsx("span", { children: "Retry All Failed" })] })), _jsxs(Button, { size: "sm", variant: "outline", onClick: loadBatchJobs, disabled: isLoading || isRetryingAll, title: "Manual refresh - normally updates come through websocket subscriptions", className: "md:w-auto w-8 h-8 md:h-8 p-0 md:px-3", children: [_jsx(RefreshIcon, { className: `h-4 w-4 ${isLoading ? "animate-spin" : ""}` }), _jsx("span", { className: "hidden md:inline", children: "Refresh" })] })] })] })] }), parsedMetadata && (_jsxs("div", { className: `border-t border-gray-3 bg-gray-5 mt-4 rounded-b-lg ${isMobile ? "-mx-4 border-x-0" : ""}`, children: [_jsxs("button", { onClick: () => setIsMetadataExpanded(!isMetadataExpanded), className: `flex w-full cursor-pointer items-center justify-between ${isMobile ? "px-4 py-3" : "px-4 py-2.5"} text-left transition-colors hover:bg-gray-4`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(InfoIcon, { className: "h-4 w-4 text-gray-2" }), _jsx("span", { className: "text-xs font-medium text-(--color-gray-1)", children: "Batch Metadata" })] }), isMetadataExpanded ? (_jsx(ChevronUpIcon, { className: "h-4 w-4 text-gray-2", strokeWidth: 1 })) : (_jsx(ChevronDownIcon, { className: "h-4 w-4 text-gray-2", strokeWidth: 1 }))] }), isMetadataExpanded && (_jsx("div", { className: "max-h-96 overflow-y-auto px-4 pb-3", children: _jsx("div", { className: "rounded-lg border border-gray-3 bg-background p-3 text-xs shadow-sm mt-2", children: _jsx(MemoizedJsonView, { data: parsedMetadata }) }) }))] })), _jsxs("div", { className: "mt-6 md:mt-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("span", { className: "text-sm font-medium text-(--color-dark)", children: "Overall Progress" }), _jsxs("span", { className: "text-sm text-gray-2", children: [_jsx("span", { className: "font-semibold text-(--color-dark)", children: progressSegments.completedCount }), " ", "/ ", progressSegments.total, " completed"] })] }), _jsxs("div", { className: `relative ${isMobile ? "h-5" : "h-4"} rounded-full overflow-hidden bg-gray-3`, children: [_jsxs("div", { className: "absolute inset-0 flex", children: [progressSegments.completed > 0 && (_jsx("div", { className: "h-full transition-all duration-300", style: {
+                                                    width: `${progressSegments.completed}%`,
+                                                    backgroundColor: "#8ae048",
+                                                } })), progressSegments.inProgress > 0 && (_jsx("div", { className: "h-full transition-all duration-300", style: {
+                                                    width: `${progressSegments.inProgress}%`,
+                                                    backgroundColor: "#9650fb",
+                                                } })), progressSegments.error > 0 && (_jsx("div", { className: "bg-destructive h-full transition-all duration-300", style: { width: `${progressSegments.error}%` } })), progressSegments.pending > 0 && (_jsx("div", { className: "h-full transition-all duration-300", style: {
+                                                    width: `${progressSegments.pending}%`,
+                                                    backgroundColor: "var(--color-gray-4)",
+                                                } }))] }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: _jsxs("span", { className: `text-xs font-bold text-white drop-shadow-sm ${isMobile ? "-mt-1" : ""}`, children: [overallProgress, "%"] }) })] }), _jsxs("div", { className: `flex flex-wrap ${isMobile ? "gap-x-4 gap-y-2" : "gap-3"} mt-3 md:mt-2 text-[10px] md:text-xs`, children: [progressSegments.completedCount > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-2.5 h-2.5 rounded-sm", style: { backgroundColor: "#8ae048" } }), _jsxs("span", { className: "text-(--color-gray-1)", children: [progressSegments.completedCount, " completed"] })] })), progressSegments.inProgressCount > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-2.5 h-2.5 rounded-sm", style: { backgroundColor: "#9650fb" } }), _jsxs("span", { className: "text-(--color-gray-1)", children: [progressSegments.inProgressCount, " in progress"] })] })), progressSegments.errorCount > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-2.5 h-2.5 bg-destructive rounded-sm" }), _jsxs("span", { className: "text-(--color-gray-1)", children: [progressSegments.errorCount, " errors"] })] })), progressSegments.pendingCount > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-2.5 h-2.5 bg-gray-4 rounded-sm" }), _jsxs("span", { className: "text-(--color-gray-1)", children: [progressSegments.pendingCount, " pending"] })] }))] })] })] }), _jsx("div", { className: "flex-1 overflow-auto p-4 md:p-6 min-h-0", children: isLoading && batchJobs.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "flex items-center gap-2 text-gray-2", children: [_jsx(LoaderIcon, { className: "h-5 w-5 animate-spin text-theme-secondary" }), "Loading batch translations..."] }) })) : batchJobs.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "text-center text-gray-2", children: [_jsx(LanguagesIcon, { className: "h-8 w-8 block mx-auto mb-2 text-gray-2" }), _jsx("p", { className: "font-medium text-(--color-gray-1)", children: "No translations found for this batch" }), _jsx("p", { className: "text-sm mt-1", children: "The batch may not exist or no translation jobs have started yet" })] }) })) : (_jsx("div", { className: "space-y-4", children: sortedItemGroups.map(([itemId, jobs]) => {
+                        const itemCompleted = jobs.filter((j) => j.status === "Completed").length;
                         // Calculate item progress including in-progress job progress
                         // Performance: item-level calculation is always fast (typically 2-10 jobs per item)
                         let totalProgress = 0;
@@ -534,7 +712,7 @@ export function BatchTranslationView({ batchId, onBack }) {
                             }
                             else if (job.status === "In Progress") {
                                 // Get progress for this specific job
-                                const progressKey = `${job.itemId}-${job.targetLanguage}`;
+                                const progressKey = getJobKey(job.itemId, job.targetLanguage);
                                 const jobProgress = translationProgress.get(progressKey);
                                 totalProgress += jobProgress?.progress || 0; // Use actual progress or 0
                             }
@@ -543,51 +721,131 @@ export function BatchTranslationView({ batchId, onBack }) {
                             }
                         }
                         const itemProgress = Math.round(totalProgress / jobs.length);
-                        const itemInProgress = jobs.some(j => j.status === "In Progress");
-                        const itemError = jobs.some(j => j.status === "Error");
-                        return (_jsxs("div", { className: "border border-[var(--color-gray-3)] rounded-lg bg-background p-4 md:p-6 shadow-sm", children: [_jsxs("div", { className: "mb-4", children: [_jsx("div", { className: "mb-3", children: (() => {
+                        const itemInProgress = jobs.some((j) => j.status === "In Progress");
+                        const itemError = jobs.some((j) => j.status === "Error");
+                        const itemTerminalError = itemError && !itemInProgress;
+                        const itemVisualProgress = itemTerminalError ? 100 : itemProgress;
+                        return (_jsxs("div", { className: `border border-gray-3 rounded-lg bg-background ${isMobile ? "p-4" : "p-6"} shadow-sm`, children: [_jsxs("div", { className: "mb-4", children: [_jsx("div", { className: "mb-3", children: (() => {
                                                 const itemName = itemNames.get(itemId.toLowerCase());
-                                                return itemName ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-base font-semibold text-[var(--color-dark)] mb-1", children: itemName }), _jsxs("div", { className: "text-xs text-[var(--color-gray-2)] font-mono", children: ["Item ID: ", itemId] })] })) : (_jsxs("div", { className: "text-xs text-[var(--color-gray-2)] font-mono", children: ["Item ID: ", itemId] }));
-                                            })() }), _jsx("div", { className: "flex items-center justify-between mb-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-sm text-[var(--color-gray-2)]", children: [itemCompleted, " / ", jobs.length, " languages"] }), itemInProgress && (_jsx("span", { className: "text-xs px-2.5 py-1 rounded-full font-medium", style: { backgroundColor: '#f6eeff', color: '#9650fb' }, children: "In Progress" })), itemError && (_jsx("span", { className: "text-xs bg-red-100 text-red-600 px-2.5 py-1 rounded-full font-medium", children: "Error" }))] }) }), _jsx("div", { className: "relative", children: _jsx(Progress, { value: itemProgress, className: "h-3 mb-2", indicatorClassName: itemError ? "bg-destructive" : undefined, indicatorStyle: itemError ? undefined :
-                                                    itemProgress === 100 ? { backgroundColor: '#8ae048' } :
-                                                        { backgroundColor: '#9650fb' }, showValue: true }) })] }), _jsx(SimpleTable, { columns: [
+                                                return itemName ? (_jsxs(_Fragment, { children: [_jsx("div", { className: `${isMobile ? "text-sm" : "text-base"} font-bold text-(--color-dark) mb-1`, children: itemName }), _jsxs("div", { className: `flex items-center gap-1.5 text-[10px] md:text-xs text-gray-2 font-mono break-all`, children: [_jsxs("span", { className: "break-all", children: ["Item ID: ", itemId] }), _jsx(SimpleIconButton, { onClick: () => openItemInEditor(itemId, "en"), icon: _jsx(ExternalLinkIcon, { className: "h-3.5 w-3.5", strokeWidth: 1 }), label: "Open item in English", className: "p-0! text-gray-2 hover:text-(--color-gray-1)" })] })] })) : (_jsxs("div", { className: `flex items-center gap-1.5 text-[10px] md:text-xs text-gray-2 font-mono break-all`, children: [_jsxs("span", { className: "break-all", children: ["Item ID: ", itemId] }), _jsx(SimpleIconButton, { onClick: () => openItemInEditor(itemId, "en"), icon: _jsx(ExternalLinkIcon, { className: "h-3.5 w-3.5", strokeWidth: 1 }), label: "Open item in English", className: "p-0! text-gray-2 hover:text-(--color-gray-1)" })] }));
+                                            })() }), _jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: `${isMobile ? "text-xs" : "text-sm"} text-gray-2`, children: [itemCompleted, " / ", jobs.length, " languages"] }), itemInProgress && (_jsx("span", { className: `${isMobile ? "text-[10px]" : "text-xs"} px-2 py-0.5 md:px-2.5 md:py-1 rounded-full font-medium`, style: {
+                                                                backgroundColor: "#f6eeff",
+                                                                color: "#9650fb",
+                                                            }, children: "In Progress" })), itemError && (_jsx("span", { className: `${isMobile ? "text-[10px]" : "text-xs"} bg-red-100 text-red-600 px-2 py-0.5 md:px-2.5 md:py-1 rounded-full font-medium`, children: "Error" }))] }), _jsxs("span", { className: `${isMobile ? "text-xs" : "text-sm"} font-bold text-(--color-dark)`, children: [itemVisualProgress, "%"] })] }), _jsx("div", { className: "relative", children: _jsx(Progress, { value: itemVisualProgress, className: `${isMobile ? "h-2" : "h-3"} mb-2`, indicatorClassName: itemError ? "bg-destructive" : undefined, indicatorStyle: itemError
+                                                    ? undefined
+                                                    : itemProgress === 100
+                                                        ? { backgroundColor: "#8ae048" }
+                                                        : { backgroundColor: "#9650fb" }, showValue: false }) })] }), isMobile ? (_jsx("div", { className: "space-y-3", children: jobs
+                                        .sort((a, b) => {
+                                        const getJobPriority = (job) => {
+                                            if (job.status === "In Progress")
+                                                return 1;
+                                            if (job.status === "Error")
+                                                return 2;
+                                            if (job.status === "Completed")
+                                                return 4;
+                                            return 3;
+                                        };
+                                        const priorityA = getJobPriority(a);
+                                        const priorityB = getJobPriority(b);
+                                        if (priorityA === priorityB) {
+                                            return a.targetLanguage.localeCompare(b.targetLanguage);
+                                        }
+                                        return priorityA - priorityB;
+                                    })
+                                        .map((job) => {
+                                        const progressKey = getJobKey(job.itemId, job.targetLanguage);
+                                        const progress = translationProgress.get(progressKey);
+                                        const date = new Date(job.timestamp);
+                                        const displayMessage = job.message ||
+                                            (job.status === "Error"
+                                                ? progress?.message || "Translation failed"
+                                                : "");
+                                        const jobRetryKey = getRetryJobKey(job);
+                                        const isRetryingJob = isRetryingAll || retryingJobKeys.has(jobRetryKey);
+                                        return (_jsxs("div", { className: "rounded-md border border-gray-4 bg-gray-5 p-3", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-bold text-(--color-dark)", children: job.targetLanguage }), _jsx("span", { className: "text-gray-2", children: "\u2190" }), _jsx("span", { className: "text-xs text-(--color-gray-1)", children: job.sourceLanguage || "—" })] }), _jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold ${job.status === "Completed"
+                                                                ? "bg-green-100 text-green-700"
+                                                                : job.status === "In Progress"
+                                                                    ? ""
+                                                                    : job.status === "Error"
+                                                                        ? "bg-red-100 text-red-600"
+                                                                        : "bg-gray-4 text-(--color-gray-1)"}`, style: job.status === "In Progress"
+                                                                ? {
+                                                                    backgroundColor: "#f6eeff",
+                                                                    color: "#9650fb",
+                                                                }
+                                                                : undefined, children: job.status })] }), displayMessage && (_jsxs("div", { className: "mb-2 flex items-start gap-1.5", children: [_jsx("div", { className: "min-w-0 flex-1 text-xs text-gray-2 break-words [overflow-wrap:anywhere] whitespace-normal leading-relaxed line-clamp-3", title: displayMessage, children: displayMessage }), _jsx(CopyButton, { textToCopy: displayMessage, iconOnly: true, className: "mt-0.5 shrink-0 text-gray-2 hover:text-(--color-gray-1)" })] })), job.status === "In Progress" && progress && (_jsxs("div", { className: "mb-2", children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("span", { className: "text-[10px] text-gray-2 truncate pr-2", children: progress.message }), _jsxs("span", { className: "text-[10px] font-bold text-(--color-gray-1) shrink-0", children: [Math.round(progress.progress), "%"] })] }), _jsx(Progress, { value: progress.progress, className: "h-2", indicatorStyle: {
+                                                                backgroundColor: "#9650fb",
+                                                            }, showValue: false })] })), job.status === "Error" && (_jsx("div", { className: "mb-2", children: _jsx(Progress, { value: 100, className: "h-2", indicatorClassName: "bg-destructive", showValue: false }) })), _jsx("div", { className: "text-[10px] text-gray-2 text-right mt-1", children: date.toLocaleTimeString([], {
+                                                        hour: "2-digit",
+                                                        minute: "2-digit",
+                                                    }) }), _jsx("div", { className: "mt-2 flex justify-end", children: _jsxs("div", { className: "flex items-center gap-2", children: [job.status === "Error" && (_jsx(SimpleIconButton, { onClick: () => void handleRetryJobs([job], false), icon: _jsx(RefreshIcon, { className: `h-3.5 w-3.5 ${isRetryingJob ? "animate-spin" : ""}`, strokeWidth: 1 }), label: "Retry translation as new batch", disabled: isRetryingJob, className: "p-0! text-gray-2 hover:text-(--color-gray-1)" })), _jsx(SimpleIconButton, { onClick: () => openItemInEditor(job.itemId, job.targetLanguage), icon: _jsx(ExternalLinkIcon, { className: "h-3.5 w-3.5", strokeWidth: 1 }), label: `Open item in ${job.targetLanguage}`, disabled: isRetryingAll, className: "p-0! text-gray-2 hover:text-(--color-gray-1)" })] }) })] }, job.targetLanguage));
+                                    }) })) : (_jsx(SimpleTable, { columns: [
                                         {
                                             header: "Language",
                                             className: "w-16", // Fixed width for language column
-                                            body: (job) => (_jsx("div", { className: "font-medium text-[var(--color-dark)]", children: job.targetLanguage }))
+                                            body: (job) => (_jsx("div", { className: "font-medium text-(--color-dark)", children: job.targetLanguage })),
                                         },
                                         {
                                             header: "Status",
-                                            className: "w-32", // Fixed width for status column
+                                            className: "w-[14rem] min-w-[14rem]", // Keep status column width stable as content changes
                                             body: (job) => {
-                                                const progressKey = `${job.itemId}-${job.targetLanguage}`;
+                                                const progressKey = getJobKey(job.itemId, job.targetLanguage);
                                                 const progress = translationProgress.get(progressKey);
-                                                return (_jsxs("div", { children: [_jsx("span", { className: `inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ${job.status === "Completed"
+                                                const displayMessage = job.message ||
+                                                    (job.status === "Error"
+                                                        ? progress?.message || "Translation failed"
+                                                        : "");
+                                                return (_jsxs("div", { className: "w-[14rem] min-w-[14rem]", children: [_jsx("span", { className: `inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ${job.status === "Completed"
                                                                 ? "bg-green-100 text-green-700"
                                                                 : job.status === "In Progress"
                                                                     ? ""
                                                                     : job.status === "Error"
                                                                         ? "bg-red-100 text-red-600"
-                                                                        : "bg-[var(--color-gray-4)] text-[var(--color-gray-1)]"}`, style: job.status === "In Progress" ? { backgroundColor: '#f6eeff', color: '#9650fb' } : undefined, children: job.status }), job.status === "In Progress" && progress && Math.round(progress.progress || 0) === 0 && (_jsx("div", { className: "mt-1 text-xs text-[var(--color-gray-2)]", children: "Version created" })), progress && job.status === "In Progress" && (_jsxs("div", { className: "mt-1.5", children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("span", { className: "text-xs text-[var(--color-gray-2)] truncate", "data-testid": "translation-progress-text", children: progress.message }), _jsxs("span", { className: "text-xs font-medium text-[var(--color-gray-1)] ml-1", children: [Math.round(progress.progress), "%"] })] }), _jsx(Progress, { value: progress.progress, className: "h-2", indicatorStyle: { backgroundColor: '#9650fb' }, showValue: false, "data-testid": "translation-progress-bar" })] }))] }));
-                                            }
+                                                                        : "bg-gray-4 text-(--color-gray-1)"}`, style: job.status === "In Progress"
+                                                                ? {
+                                                                    backgroundColor: "#f6eeff",
+                                                                    color: "#9650fb",
+                                                                }
+                                                                : undefined, children: job.status }), job.status === "In Progress" &&
+                                                            progress &&
+                                                            Math.round(progress.progress || 0) === 0 && (_jsx("div", { className: "mt-1 text-xs text-gray-2", children: "Version created" })), progress && job.status === "In Progress" && (_jsxs("div", { className: "mt-1.5", children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("span", { className: "text-xs text-gray-2 truncate", "data-testid": "translation-progress-text", children: progress.message }), _jsxs("span", { className: "text-xs font-medium text-(--color-gray-1) ml-1", children: [Math.round(progress.progress), "%"] })] }), _jsx(Progress, { value: progress.progress, className: "h-2", indicatorStyle: {
+                                                                        backgroundColor: "#9650fb",
+                                                                    }, showValue: false, "data-testid": "translation-progress-bar" })] })), job.status === "Error" && (_jsx("div", { className: "mt-1.5", children: _jsx(Progress, { value: 100, className: "h-2", indicatorClassName: "bg-destructive", showValue: false, "data-testid": "translation-progress-bar" }) }))] }));
+                                            },
                                         },
                                         {
                                             header: "Source",
                                             className: "w-16", // Fixed width for source column
-                                            body: (job) => (_jsx("div", { className: "text-sm text-[var(--color-gray-1)]", children: job.sourceLanguage || "—" }))
+                                            body: (job) => (_jsx("div", { className: "text-sm text-(--color-gray-1)", children: job.sourceLanguage || "—" })),
                                         },
                                         {
                                             header: "Message",
-                                            className: "w-64", // Fixed width with proper wrapping for message column
-                                            body: (job) => (_jsx("div", { className: "text-sm text-[var(--color-gray-2)] break-words whitespace-normal leading-relaxed", children: job.message || "—" }))
+                                            className: "w-full min-w-0",
+                                            body: (job) => {
+                                                const message = job.message ||
+                                                    (job.status === "Error"
+                                                        ? "Translation failed"
+                                                        : "—");
+                                                return (_jsxs("div", { className: "flex items-start gap-1.5", children: [_jsx("div", { className: "min-w-0 w-full flex-1 text-sm text-gray-2 break-words [overflow-wrap:anywhere] whitespace-normal leading-relaxed line-clamp-3", title: message, children: message }), message !== "—" && (_jsx(CopyButton, { textToCopy: message, iconOnly: true, className: "mt-0.5 shrink-0 text-gray-2 hover:text-(--color-gray-1)" }))] }));
+                                            },
+                                        },
+                                        {
+                                            header: "Actions",
+                                            className: "w-24",
+                                            body: (job) => {
+                                                const jobRetryKey = getRetryJobKey(job);
+                                                const isRetryingJob = isRetryingAll || retryingJobKeys.has(jobRetryKey);
+                                                return (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [job.status === "Error" && (_jsx(SimpleIconButton, { onClick: () => void handleRetryJobs([job], false), icon: _jsx(RefreshIcon, { className: `h-3.5 w-3.5 ${isRetryingJob ? "animate-spin" : ""}`, strokeWidth: 1 }), label: "Retry translation as new batch", disabled: isRetryingJob, className: "p-0! text-gray-2 hover:text-(--color-gray-1)" })), _jsx(SimpleIconButton, { onClick: () => openItemInEditor(job.itemId, job.targetLanguage), icon: _jsx(ExternalLinkIcon, { className: "h-3.5 w-3.5", strokeWidth: 1 }), label: `Open item in ${job.targetLanguage}`, disabled: isRetryingAll, className: "p-0! text-gray-2 hover:text-(--color-gray-1)" })] }));
+                                            },
                                         },
                                         {
                                             header: "Updated",
                                             className: "w-24", // Fixed width for updated column
                                             body: (job) => {
                                                 const date = new Date(job.timestamp);
-                                                return (_jsx("div", { className: "text-sm text-[var(--color-gray-2)] whitespace-nowrap", children: date.toLocaleTimeString() }));
-                                            }
+                                                return (_jsx("div", { className: "text-sm text-gray-2 whitespace-nowrap", children: date.toLocaleTimeString() }));
+                                            },
                                         },
                                     ], items: jobs.sort((a, b) => {
                                         // Sort by status first (in-progress first, then errors, then completed)
@@ -607,6 +865,6 @@ export function BatchTranslationView({ batchId, onBack }) {
                                             return a.targetLanguage.localeCompare(b.targetLanguage);
                                         }
                                         return priorityA - priorityB;
-                                    }) })] }, itemId));
+                                    }) }))] }, itemId));
                     }) })) })] }));
 }