@parhelia/localization 0.1.12788 → 0.1.12790

package/dist/translation-center/BatchTranslationView.js

@@ -1,870 +0,0 @@
-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, 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.
-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);
-});
-// Normalize API shape/casing to what the UI expects
-function normalizeBatchInfo(raw) {
-    if (!raw)
-        return null;
-    const toNum = (v) => typeof v === "number" ? v : v != null ? parseInt(v, 10) : undefined;
-    const info = {
-        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;
-}
-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);
-    const lastWsAtRef = useRef(0);
-    const batchJobsRef = useRef([]);
-    const hasLoadedRef = useRef(false);
-    const isSubscribedRef = useRef(false);
-    const initGuardRef = useRef(false);
-    const lastBatchIdRef = useRef(null);
-    const completionRefreshRef = useRef(null);
-    // 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 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)
-            return null;
-        try {
-            return JSON.parse(batchInfo.metadata);
-        }
-        catch {
-            return null;
-        }
-    }, [batchInfo?.metadata]);
-    // Keep refs in sync with state
-    useEffect(() => {
-        batchJobsRef.current = batchJobs;
-    }, [batchJobs]);
-    const loadProviders = useCallback(async () => {
-        try {
-            const res = await getTranslationProviders();
-            const providerData = (res?.data ??
-                res ??
-                []);
-            setProviders(providerData);
-        }
-        catch (error) {
-            console.error("Failed to load translation providers:", error);
-        }
-    }, []);
-    const loadBatchJobs = useCallback(async () => {
-        setIsLoading(true);
-        try {
-            // Use efficient batch-specific endpoint
-            const res = await listBatchTranslationJobs(batchId);
-            const apiJobsRaw = (res?.data ?? res ?? []);
-            const apiJobs = apiJobsRaw.map(normalizeJobRecord);
-            // Merge API response with existing state to prevent flickering
-            setBatchJobs((prevJobs) => {
-                // Create a map of existing jobs keyed by itemId-targetLanguage
-                const existingMap = new Map();
-                for (const job of prevJobs) {
-                    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 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 = 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, {
-                                ...normalizedJob,
-                                sourceLanguage: normalizedJob.sourceLanguage ||
-                                    existingJob.sourceLanguage ||
-                                    "",
-                            });
-                        }
-                    }
-                    else {
-                        // New job from API - ensure sourceLanguage is set
-                        existingMap.set(key, {
-                            ...normalizedJob,
-                            sourceLanguage: normalizedJob.sourceLanguage || "",
-                        });
-                    }
-                }
-                // Convert map back to array
-                const mergedJobs = Array.from(existingMap.values());
-                // Only update if the merged result differs from current state
-                // Check if arrays are different (length or content)
-                if (mergedJobs.length !== prevJobs.length) {
-                    return mergedJobs;
-                }
-                // Deep comparison: check if any job changed
-                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}`;
-                    const prevJob = prevMap.get(key);
-                    if (!prevJob ||
-                        prevJob.status !== mergedJob.status ||
-                        prevJob.timestamp !== mergedJob.timestamp ||
-                        prevJob.message !== mergedJob.message) {
-                        hasChanges = true;
-                        break;
-                    }
-                }
-                if (hasChanges) {
-                    return mergedJobs;
-                }
-                // No changes detected, return previous state to avoid unnecessary re-render
-                return prevJobs;
-            });
-        }
-        catch (error) {
-            console.error("Failed to load batch jobs:", error);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [batchId, editContext]);
-    // Load initial data and conditionally subscribe to batch updates
-    useEffect(() => {
-        // Reset guards if batchId changed
-        if (lastBatchIdRef.current !== batchId) {
-            lastBatchIdRef.current = batchId;
-            hasLoadedRef.current = false;
-            isSubscribedRef.current = false;
-            initGuardRef.current = false;
-            completionRefreshRef.current = null;
-        }
-        let cancelled = false;
-        const init = async () => {
-            if (initGuardRef.current)
-                return; // prevent duplicate init under StrictMode
-            initGuardRef.current = true;
-            try {
-                // Always load batch info first to decide on subscriptions
-                try {
-                    const resInfo = await getBatchInfo(batchId);
-                    const raw = resInfo?.data ?? resInfo;
-                    const info = normalizeBatchInfo(raw);
-                    if (!cancelled && info)
-                        setBatchInfo(info);
-                    const isTerminal = info?.status === "Completed" || info?.status === "Error";
-                    // Conditionally subscribe only for non-terminal batches
-                    if (!isTerminal && editContext?.sessionId) {
-                        await subscribeToBatch(batchId, editContext.sessionId);
-                        isSubscribedRef.current = true;
-                    }
-                }
-                catch { }
-                // Load providers for display name mapping
-                await loadProviders();
-                // Load jobs once per mount/batch change
-                if (!hasLoadedRef.current) {
-                    await loadBatchJobs();
-                    hasLoadedRef.current = true;
-                }
-            }
-            catch (e) {
-                // no-op
-            }
-        };
-        init();
-        return () => {
-            // Cleanup: unsubscribe when component unmounts or batch changes
-            if (isSubscribedRef.current &&
-                editContext &&
-                editContext.sessionId &&
-                batchId) {
-                unsubscribeFromBatch(batchId, editContext.sessionId).catch(console.error);
-            }
-        };
-    }, [batchId, editContext?.sessionId]);
-    // Listen for translation events - only for this batch
-    useEffect(() => {
-        const removeSocketMessageListener = editContext?.addSocketMessageListener((message) => {
-            // Mark last websocket activity time for adaptive polling
-            if (message.type === "translation-started" ||
-                message.type === "translation-finished" ||
-                message.type === "translation-error" ||
-                message.type === "translation-progress" ||
-                message.type === "batch-completed") {
-                lastWsAtRef.current = Date.now();
-            }
-            if (message.type === "translation-started" ||
-                message.type === "translation-finished" ||
-                message.type === "translation-error") {
-                // 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 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
-                            const updatedJobs = [...prevJobs];
-                            const existingJob = updatedJobs[jobIndex];
-                            if (existingJob) {
-                                updatedJobs[jobIndex] = {
-                                    ...existingJob,
-                                    itemId: normalizedItemId,
-                                    status: message.payload.status,
-                                    timestamp: message.payload.timestamp || existingJob.timestamp,
-                                    message: payloadMessage || existingJob.message,
-                                    // Preserve sourceLanguage from existing job if not provided in message
-                                    sourceLanguage: message.payload.sourceLanguage ||
-                                        existingJob.sourceLanguage ||
-                                        "",
-                                };
-                            }
-                            return updatedJobs;
-                        }
-                        else {
-                            // Add new job if it doesn't exist yet so terminal updates are still visible.
-                            const newJob = {
-                                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: payloadMessage,
-                            };
-                            return [...prevJobs, newJob];
-                        }
-                    });
-                }
-            }
-            if (message.type === "translation-progress") {
-                // Only track progress for jobs in this batch
-                if (message.payload.batchId === batchId) {
-                    const itemId = normalizeJobItemId(message.payload.itemId);
-                    const language = message.payload.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) => normalizeJobItemId(j.itemId) === itemId &&
-                            j.targetLanguage === language);
-                        if (idx >= 0)
-                            return prevJobs;
-                        const newJob = {
-                            itemId,
-                            targetLanguage: language,
-                            sourceLanguage: message.payload.sourceLanguage || "", // Keep this
-                            status: "In Progress",
-                            timestamp: new Date().toISOString(),
-                            batchId: batchId,
-                            message: message.payload.message || "",
-                        };
-                        return [...prevJobs, newJob];
-                    });
-                    setTranslationProgress((prev) => {
-                        const next = new Map(prev);
-                        next.set(progressKey, {
-                            progress: message.payload.progress || 0,
-                            message: message.payload.message || "",
-                        });
-                        return next;
-                    });
-                }
-            }
-            // Handle batch-completed messages for this specific batch
-            if (message.type === "batch-completed" &&
-                message.payload.batchId === batchId) {
-                // Refresh header info only (jobs are already updated via websocket)
-                (async () => {
-                    try {
-                        const resInfo = await getBatchInfo(batchId);
-                        const raw = resInfo?.data ?? resInfo;
-                        const info = normalizeBatchInfo(raw);
-                        if (info)
-                            setBatchInfo(info);
-                        await loadBatchJobs();
-                    }
-                    catch { }
-                })();
-            }
-        });
-        return () => {
-            if (removeSocketMessageListener) {
-                removeSocketMessageListener();
-            }
-        };
-    }, [editContext, batchId]);
-    // Adaptive polling while batch is in progress - only as fallback when websockets are silent
-    useEffect(() => {
-        const isRunning = batchInfo?.status === "In Progress";
-        if (!isRunning)
-            return;
-        const pollBatchInfo = async () => {
-            try {
-                const resInfo = await getBatchInfo(batchId);
-                const raw = resInfo?.data ?? resInfo;
-                const info = normalizeBatchInfo(raw);
-                if (info)
-                    setBatchInfo(info);
-            }
-            catch (error) {
-                console.error("Failed to refresh batch info:", error);
-            }
-        };
-        // Don't poll immediately - rely on websocket updates and initial load
-        // Only poll as a fallback if websockets are completely silent
-        const id = setInterval(() => {
-            const timeSinceLastWs = Date.now() - lastWsAtRef.current;
-            // Only poll if websockets have been completely silent for 30+ seconds
-            // This is a fallback mechanism - websockets should handle all updates
-            if (timeSinceLastWs > 30000) {
-                void pollBatchInfo();
-                // Only poll for jobs if websockets are silent for even longer
-                if (timeSinceLastWs > 45000) {
-                    void loadBatchJobs();
-                }
-            }
-        }, 30000); // Check every 30 seconds, but only poll if WS silent for 30+ seconds
-        return () => clearInterval(id);
-    }, [batchInfo?.status, loadBatchJobs, batchId]);
-    // Fetch item names when batchJobs change
-    useEffect(() => {
-        if (!editContext?.itemsRepository || batchJobs.length === 0) {
-            return;
-        }
-        const fetchItemNames = async () => {
-            // Extract unique item IDs from batchJobs
-            const uniqueItemIds = Array.from(new Set(batchJobs.map((job) => job.itemId)));
-            if (uniqueItemIds.length === 0) {
-                return;
-            }
-            // Get language from editContext or fallback to "en"
-            const language = editContext.currentItemDescriptor?.language || "en";
-            try {
-                // Create ItemDescriptors for fetching
-                const itemDescriptors = uniqueItemIds.map((itemId) => ({
-                    id: itemId,
-                    language: language,
-                    version: 0, // Latest version
-                }));
-                // Fetch item stubs
-                const stubs = await editContext.itemsRepository.getItemsStubs(itemDescriptors);
-                // Store names in Map
-                const namesMap = new Map();
-                for (const stub of stubs) {
-                    if (stub.name) {
-                        namesMap.set(stub.id.toLowerCase(), stub.name);
-                    }
-                }
-                setItemNames((prevNames) => {
-                    // Merge with existing names, only update if there are changes
-                    let hasChanges = false;
-                    const merged = new Map(prevNames);
-                    for (const [id, name] of namesMap) {
-                        if (merged.get(id) !== name) {
-                            merged.set(id, name);
-                            hasChanges = true;
-                        }
-                    }
-                    return hasChanges ? merged : prevNames;
-                });
-            }
-            catch (error) {
-                console.error("Failed to fetch item names:", error);
-                // On error, keep existing names (don't clear them)
-            }
-        };
-        fetchItemNames();
-    }, [
-        batchJobs,
-        editContext?.itemsRepository,
-        editContext?.currentItemDescriptor?.language,
-    ]);
-    // Group jobs by item for better organization
-    const itemGroups = useMemo(() => {
-        const groups = {};
-        for (const job of batchJobs) {
-            if (!groups[job.itemId]) {
-                groups[job.itemId] = [];
-            }
-            groups[job.itemId].push(job);
-        }
-        return groups;
-    }, [batchJobs]);
-    // Sort items by status priority: in-progress first, then errors, then completed
-    const sortedItemGroups = useMemo(() => {
-        const entries = Object.entries(itemGroups);
-        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");
-                if (hasInProgress)
-                    return 1; // Highest priority - show first
-                if (hasError)
-                    return 2; // Second priority
-                if (allCompleted)
-                    return 4; // Lowest priority - show last
-                return 3; // Pending/other statuses
-            };
-            const priorityA = getStatusPriority(jobsA);
-            const priorityB = getStatusPriority(jobsB);
-            return priorityA - priorityB;
-        });
-    }, [itemGroups]);
-    // 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
-            ? batchInfo.expectedJobs
-            : batchJobs.length;
-        if (expectedTotal === 0) {
-            return {
-                completed: 0,
-                inProgress: 0,
-                error: 0,
-                pending: 0,
-                completedCount: 0,
-                inProgressCount: 0,
-                errorCount: 0,
-                pendingCount: 0,
-                total: 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;
-        // 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;
-        // 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);
-        const pct = (count) => Math.max(0, Math.min(100, Math.round((count / expectedTotal) * 100)));
-        // 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 = getJobKey(job.itemId, job.targetLanguage);
-                const jobProgress = translationProgress.get(progressKey);
-                totalActualProgress += jobProgress?.progress || 0;
-            }
-        }
-        const actualProgress = Math.max(0, Math.min(100, Math.round(totalActualProgress / expectedTotal)));
-        const segments = {
-            completed: pct(completedCount),
-            inProgress: pct(inProgressCount),
-            error: pct(errorCount),
-            pending: pct(pendingCount),
-            completedCount,
-            inProgressCount,
-            errorCount,
-            pendingCount,
-            total: expectedTotal,
-            actualProgress,
-        };
-        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" &&
-        progressSegments.total > 0 &&
-        progressSegments.completedCount === progressSegments.total &&
-        progressSegments.errorCount === 0 &&
-        progressSegments.inProgressCount === 0
-        ? "Completed"
-        : batchInfo?.status;
-    // Ensure terminal state is reflected in UI even if a websocket message was missed.
-    useEffect(() => {
-        if (effectiveStatus !== "Completed" && effectiveStatus !== "Error")
-            return;
-        if (completionRefreshRef.current === batchId)
-            return;
-        completionRefreshRef.current = batchId;
-        (async () => {
-            try {
-                const resInfo = await getBatchInfo(batchId);
-                const raw = resInfo?.data ?? resInfo;
-                const info = normalizeBatchInfo(raw);
-                if (info)
-                    setBatchInfo(info);
-                await loadBatchJobs();
-            }
-            catch { }
-        })();
-    }, [effectiveStatus, batchId, loadBatchJobs]);
-    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;
-                        for (const job of jobs) {
-                            if (job.status === "Completed") {
-                                totalProgress += 100; // Full credit for completed jobs
-                            }
-                            else if (job.status === "In Progress") {
-                                // Get progress for this specific job
-                                const progressKey = getJobKey(job.itemId, job.targetLanguage);
-                                const jobProgress = translationProgress.get(progressKey);
-                                totalProgress += jobProgress?.progress || 0; // Use actual progress or 0
-                            }
-                            else {
-                                totalProgress += 0; // Pending/Error jobs contribute 0
-                            }
-                        }
-                        const itemProgress = Math.round(totalProgress / jobs.length);
-                        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: `${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-(--color-dark)", children: job.targetLanguage })),
-                                        },
-                                        {
-                                            header: "Status",
-                                            className: "w-[14rem] min-w-[14rem]", // Keep status column width stable as content changes
-                                            body: (job) => {
-                                                const progressKey = getJobKey(job.itemId, job.targetLanguage);
-                                                const progress = translationProgress.get(progressKey);
-                                                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-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-(--color-gray-1)", children: job.sourceLanguage || "—" })),
-                                        },
-                                        {
-                                            header: "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-gray-2 whitespace-nowrap", children: date.toLocaleTimeString() }));
-                                            },
-                                        },
-                                    ], items: jobs.sort((a, b) => {
-                                        // Sort by status first (in-progress first, then errors, then completed)
-                                        const getJobPriority = (job) => {
-                                            if (job.status === "In Progress")
-                                                return 1;
-                                            if (job.status === "Error")
-                                                return 2;
-                                            if (job.status === "Completed")
-                                                return 4;
-                                            return 3; // Pending/other statuses
-                                        };
-                                        const priorityA = getJobPriority(a);
-                                        const priorityB = getJobPriority(b);
-                                        // If same priority, sort by language alphabetically
-                                        if (priorityA === priorityB) {
-                                            return a.targetLanguage.localeCompare(b.targetLanguage);
-                                        }
-                                        return priorityA - priorityB;
-                                    }) }))] }, itemId));
-                    }) })) })] }));
-}